*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

::-webkit-scrollbar { 
    display: none; 
}

*::-webkit-scrollbar { display: none !important; }

body {
    font-size: 14px;
    color: rgba(0,0,0,1);
    color: #353951;
    font-family: 'Roboto', sans-serif;
    line-height: 1;
    overflow-x: hidden;
    background-color: #f5f7fa;
    height: 100vh;
    width: 100vw;
    position: absolute;
}

p a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

p a:hover {
    text-decoration: underline;
    cursor: pointer;
}

i.left {
    float: left;
    margin-right: 8px;
}

.row {
    margin-bottom: 28px;
    position: relative;
}

input.browser-default {
    width: 100%;
}

.btn.text{
    margin: 2px 0 2px 0;
    padding: 0 1rem 0 1rem;
    max-width: 320px;
}

.btn {
    background-color: #494E6A;
    background-color: #c0ca33;
    
    border-radius: 4px;
    width: 100%;
    overflow: hidden;
    margin: 2px 0 8px 0;
    margin: 2px 0 2px 0;
    padding: 0 2.4rem 0 1rem;
}

.btn.enrolled {    
    box-shadow: none;
    background-color: rgba(194, 204, 51, 0.8);
    cursor:initial;
}

.btn i {
    color: rgba(255, 255, 255, 1);
}


.material-icons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
}

.btn.margin32 {
    margin-bottom: 32px !important;
}

.btn.btn-side {
    margin-left: 10%;
    margin: 0 0 8px 0;
    float: right;
    max-width: 280px;
}

.btn:focus {
    background-color: #5A6181;
    box-shadow: none;
}

.btn:hover {
    background-color: #5A6181;
    background-color: rgba(194, 204, 51, 0.8);
    box-shadow: none;
}

.btn-large {
    height: 44px;
    line-height: 44px;
}

.btn.disabled {
    pointer-events: none;
    background-color: #DFDFDF !important;
    background-color: rgba(0,0,0, 0.1) !important;
    background-color: rgba(73,73,106,0.1) !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #ffffff !important;
    cursor: default;
}

.margin6 {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

.secondary-btn {
    /* background: #ffffff; */
    background: transparent;
    color: rgba(43, 53, 107, 1);
    box-shadow: none;
    border: solid 1px #494e6999;
    line-height: 2.3rem;

}

.secondary-btn i {
    color: rgba(43, 53, 107, 1)
}

.secondary-btn:hover {
    background: #f5f7fa;
    box-shadow: none;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 56px;
    padding: 10px 8px;
    background: #494e6a;
    z-index: 1000;
    text-align: center;
    border-bottom: solid 1px rgba(0,0,0, 0.1);
}

.close-button {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    width: 56px;
    height: 56px;
    padding: 14px;
    cursor: pointer;
    text-align: center;
    background:transparent;
    color: #353951;
}

@media screen and (min-width: 426px) {
    .mobile-only{
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .event-detail-panel::before{
        content: "";
        width: 100%;
        height: 1px;
        display: none;
        position: sticky;
        top: 0;
        left: 0;
    }
}

.logo {
    /* display: inline-block; */
    position: absolute;
    left: 6px;
    top:10px;
    transition: all .28s ease;
    transition-delay: .14s;
    height: 36px;
    /* background-color: #f5f7fa;
    border-radius: 4px; */
}

/* .logo:hover {
    opacity:0.8 !important;
} */

.digido-logo {
    width: 36px;
    height: 36px;
}

/* .digido-logo:hover {
    opacity:0.8 !important;
} */

.icon-btn {
    display: inline-block;
    position: absolute;
    top:10px;
    color: #ffffff;
    width: 36px;
    height: 36px;
    padding: 5px 10px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

.back {
    padding: 6px 11px;
    left:100px;
    visibility: hidden;
    opacity: 0;
    transition: all .28s ease;
}

.more-actions {
    padding: 5px 5px;
    right: 10px;
    visibility: hidden;
}

.favourite-btn {
    padding: 5px 5px;
    right: 66px;
    visibility: hidden;
}

.contact-btn {
    padding: 5px 5px;
    right: 10px;
    visibility: hidden;
}

.share-btn {
    padding: 5px 5px;
    right: 122px;
    visibility: hidden;
}

.close{
    padding: 5px 5px;
    right: 10px;
    visibility: hidden;
}

.icon-btn:hover, .icon-btn:focus {
    
    background-color: #5A6181;
    transition: all 0s ease;
    outline: transparent;
    
}

.icon-btn.back.show{
    left:6px;
    visibility: visible;
    opacity: 1;
}

.dropdown-content {
    background-color: #494e6a;
    margin: 0 auto;
    display: none;
    min-width: 320px;
    width: auto;
    overflow: visible;
    opacity: 0;
    position: static !important;
    margin-top: 10px;
    z-index: 999;
    -webkit-transform-origin: 50% 0 !important;
    transform-origin: 50% 0 !important;
}

/* Top-tools-container */
.top-tools-container {
    width: auto;
    height: 100%;
    margin-left: 42px;
    position: relative;
}

div[class^="space-"] {
    float: left;
    height: 36px;
    display: inline-block;
    border-left: solid 1px rgba(255,255,255,0.25);
    position: relative;
    z-index: 1;
}

div.space-1 {
    /* background:rgba(255,255,255,1); */
    width: 20%;
    /* z-index: 8; */
    position: absolute;
    /* top: 0; */
    left: 0;
    border-radius: 4px;
    height: 36px;
    border-left: none;
}

div.space-2 {
    width: 15%;
    /* z-index: 7; */
    margin-left: 20%;
    border-left: transparent;
}

div.space-3 {
    width: 30%;
    /* z-index: 5; */
}

div.space-4 {
    width: 18%;
    /* z-index: 6; */
}

div.space-5 {
    width: 13%;
    /* z-index: 7; */
}

div.space-6 {
    width: 4%;
    /* z-index: 8; */
}

div[class^="space-"].hide-space {
    z-index: 0;
}

@media screen and (max-width: 768px) {
    div.space-1, div.space-2, div.space-4, div.space-5, div.space-6 {
        overflow: hidden;
        margin: 0;

        width: 20vw;
        z-index: 1;
        position: fixed;
        /* position: absolute; */
        /* top: calc(100vh - 78px); */
        left: 0;
        bottom: 0;
        border-radius: 0;
        height: 64px;
        display: block;
        background: #494e6a;
        padding: 3px 16px 4px 16px;
        border: none;
        border-top: solid 1px rgba(255,255,255,0.25);
    }

    div.space-3 {
        width: auto;
        border: none;
        z-index: 0;
    }

    div.space-1 {
        left: 0;
    }
    div.space-2 {
        left: 20vw;
        /* border-left: solid 1px rgba(255,255,255,0.25); */
    }

    div.space-4 {
        left: 40vw;
    }

    div.space-5 {
        left: 60vw;
    }

    div.space-6 {
        left: 80vw;
    }

    div[class^="space-"].hide-space {
        display: none;
        z-index: 0;
    }
}




/* Top menues general and Profiles */
.profiles-pannel {
    display: inline-block;
    height: auto;
    max-height: 100vh;
    width: 100%;
    min-width: 280px;
    margin: 0 auto;
    color: #ffffff;
    position: relative;
    background: #494e6a;
    transition: height 0.5s;
    top: -10px;
    padding-top: 10px;
    /* padding-bottom: 20px; */
    /* float: right; */
    overflow-x: hidden;

    box-shadow: 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%), 0 11px 15px -7px rgb(0 0 0 / 20%)

}

.profiles-pannel .header {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0 28px;
    width: 100%;
    height: 46px;
    padding: 0 24px;
    background: #494e6a;
}

.profiles-pannel .shadow {
    height: calc(100% - 46px);
    width: 100%;
    position: absolute;
    bottom:0;
    left:0;
    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
}

.profiles-pannel .title {
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.25px;
    height: 36px;
    text-align: left;
    top: 0;
    padding-top: 4px;
}

.profiles-pannel .title i {
    width: 24px;
    height: 24px;
    opacity: 0.75;
    vertical-align: middle;
    margin-right: 8px;
}

.profiles-pannel .title span {
    vertical-align: middle;
}

.profiles-pannel .close-button {
    display: inline-block;
    position: absolute;
    right: 0;
    top: -10px;
    width: 56px;
    height: 56px;
    padding: 16px;
    cursor: pointer;
    text-align: center;
    background: #494e6a;
    color: #ffffff;
}

.profiles-pannel .profiles-box {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 16px;
    background: #494e6a;
}

.profiles-pannel .profiles-box .profile {
    position: relative;
    width: 100%;
    height: 52px;
    margin: 6px 0;
    display: inline-block;
    background-color:transparent;
}


@media screen and (min-width: 769px) {
    .profiles-pannel .profiles-box .member:hover,
    .profiles-pannel .profiles-box .member.selected:hover  {
        background-color: rgba(87, 92, 116, 0.5);
        cursor: pointer;
        /* background-color: red; */
    }
}

.profiles-pannel .profiles-box .edit-button:hover, .profiles-pannel .profiles-box .show-button:hover, .profiles-pannel .profile.add-new:hover,
.profiles-pannel .profiles-box .edit-button:focus, .profiles-pannel .profiles-box .show-button:focus, .profiles-pannel .profile.add-new:focus,
.profiles-pannel .profiles-box .member.selected  {
    background-color: #575c74;
    cursor: pointer;
}

.profiles-pannel.initial .profiles-box .member.selected,
.profiles-pannel .profiles-box .member   {
    background-color: transparent;
}

.profiles-pannel .profiles-box .avatar {
    float: left;
    height: 44px;
    width: 44px;
    border: solid 1px #ffffff;
    border-radius: 50%;
    overflow: hidden;
    margin-right:8px;
}

.profiles-pannel .profiles-box .avatar img {
    width: 100%;
    height: 100%;
}

.profiles-pannel .profiles-box .member {
    width: calc(100% - 56px);
    text-align: left; 
    font-size: 16px;
    height: 100%;
    padding-left: 16px;
    float: left;
    position: relative;
}

.profiles-pannel .name {
    opacity: 1;
    transition: all .28s ease;
    color: #ffffff;
}

.profiles-pannel .profiles-box .show-button {
    width: 56px;
    height: 52px;
    text-align: center;
    float: left;
}

.profiles-pannel .profiles-box .edit-button {
    width: 56px;
    height: 52px;
    text-align: center; 
    float: left;
}

.profiles-pannel .profiles-box i {
    font-size: 24px;
    width: 24px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
    opacity: 0.25;
    margin: auto;
}

.profiles-pannel .profiles-box .edit-button:hover i, .profiles-pannel .profiles-box .show-button:hover i, 
.profiles-pannel .profiles-box .edit-button:focus i, .profiles-pannel .profiles-box .show-button:focus i {
    opacity: 0.95;
}

.profiles-pannel .expand-button {
    display: none;
}

.profiles-pannel .expand-button i {
    opacity: 1;
}

.profiles-pannel.initial {
    /* display: inline-block; */
    height: 36px;
    max-width: none;
    min-width: initial;
    position: relative;
    background: none;
    margin: 0 2%;
    padding-right: 24px;
    float: initial !important;
    width: auto;
    overflow: visible;
    box-shadow: none;
}

@media screen and (max-width: 768px) {
    .space-3 .profiles-pannel.initial {
        margin: 0;
        top: -10px !important;
    }
}

.profiles-pannel.initial  .shadow {
    box-shadow: 0 8px 8px rgba(0,0,0,0);
}

.profiles-pannel.initial .header {
    display: none;
}
.profiles-pannel.initial .show-button {
    display: none;
}
.profiles-pannel.initial .edit-button {
    display: none;
}
.profiles-pannel.initial .name {
    display: none;
    width: 0;
    opacity: 0;
    transition: all .28s ease;
}

.profiles-pannel.initial .profiles-box {
    height: 100%;
    margin: -2px auto;
    display: inherit;
    background: none;
}

.profiles-pannel.initial .profiles-row {
    padding: 0 4px 0 0; 
    overflow: hidden;
    height: 56px;
}

.profiles-pannel.initial .profiles-box .profile {
    width: auto;
    height: 52px;
    margin: 0 1px 5px 1px;
}

.profiles-pannel.initial .profiles-box .member {
    width: 100%;
    text-align: left;
    height: 100%;
    padding: 0;
    position: relative;
    display: inline-block;
}

.profiles-pannel.initial .profiles-box .member .avatar {
    margin: 0 2px;
    height: 40px;
    width: 40px;
    transition: all 0.28s;
    

}

.profiles-pannel.initial .profiles-box .member.selected .avatar {
    margin: 1px -1px;
    height: 48px;
    width: 48px;
    box-shadow: 0 3px 4px 2px rgba(0,0,0,0.14), 0 3px 2px rgba(0,0,0,0.12), 0 2px 4px -3px rgba(0,0,0,0.2);

}

.profiles-pannel.initial .profiles-box .member:hover, .profiles-pannel.initial .profiles-box .edit-button:hover, .profiles-pannel.initial .profiles-box .show-button:hover,
.profiles-pannel.initial .profiles-box .member:focus, .profiles-pannel.initial .profiles-box .edit-button:focus, .profiles-pannel.initial .profiles-box .show-button:focus  {
    background-color: transparent;
}

@media screen and (min-width: 769px) {
    .profiles-pannel.initial .profiles-box .avatar:hover, 
    .profiles-pannel.initial .profiles-box .avatar.selected:hover {
        box-shadow: 0 3px 4px 2px rgba(0,0,0,0.24), 0 3px 2px rgba(0,0,0,0.22), 0 2px 4px -3px rgba(0,0,0,0.3);
        margin: 0px 0px;
        height: 44px;
        width: 44px;
        cursor: pointer;
    }
}
.profiles-pannel.initial .expand-button {
    display: inline-block;
    width: 24px;
    height: 24px;
    font-size: 20px;
    overflow: hidden;
    position: absolute;
    top: 8px;
    right: -24px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .profiles-pannel.initial .expand-button {
        right: -16px;
    }

    .profiles-pannel.settings.initial .expand-button {
        right: initial;
    }

    .profiles-pannel.initial .expand-button.cover {
        right: -16px;
        display: block;
        width: 125%;
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .profiles-pannel .expand-button.cover i {
        position: absolute;
        top: 9px;
        right: -3.5px;
    }

}

.profiles-pannel.initial .add-new {
    display: none;
}

.profiles-pannel .profile.add-new {
    margin-top: 24px;
}

.profiles-pannel .add-new .member {
    width: 100%;
}

.profiles-pannel .profiles-box .profile.add-new .avatar {
    text-align: center;
    border: solid 1px rgba(255,255,255,0.4);
}

.profiles-pannel .add-new .member:hover .avatar {
    border: solid 1px rgba(255,255,255,1);
}

.profiles-pannel .add-new .name {
    color: rgba(255,255,255,0.5);
}

.profiles-pannel .add-new .member:hover .name {
    color: rgba(255,255,255,1);
    transition: all 0s;
}

/* .profiles-pannel .add-new .member .avatar i, */
.profiles-pannel .profiles-box .member .avatar i {
    vertical-align: middle;
    position: static;
    font-size: 24px;
    /* padding-top: 5px; */
}

.profiles-pannel .add-new .member:hover .avatar i {
    opacity: 0.95;
}

.profiles-pannel .profiles-box .member i {
    /* width: 36px; */
    /* height: 36px; */
    position: absolute;
    right: 20px;
    font-size: 16px;
    /* padding-top: 10px; */
    color: #FFFFFf;
}

.profiles-pannel.initial .profiles-box .member>i {
    display: none;
}

.profiles-pannel .profiles-box .profile.ui-sortable-helper {
    box-shadow: 0 3px 4px 2px rgba(0,0,0,0.24), 0 3px 2px rgba(0,0,0,0.22), 0 2px 4px -3px rgba(0,0,0,0.3);
    background: #575c74;
    transition: all 0;
}

.profiles-pannel .profiles-box .profile.ui-sortable-helper .member i {
    opacity: 0.95; 
}

.profiles-pannel.initial .profiles-box .profile.ui-sortable-helper {
    box-shadow: none !important;
    background: #575c74;
    background: transparent !important;
    transition: all 0;
    height: auto !important;
}

.profiles-pannel.initial .profiles-box .profile.ui-sortable-helper .member i {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .profiles-pannel {
        display: inline-block;
        height: 100hw;
        width: 100vw;
        width: 100vw;
        min-width: auto;
        margin: 0;
        position: fixed;
        left:0;
        top: 0;
        transition: all 0s;
        /* height: 100vh; */
        height: 100%;
    }

    .profiles-pannel.profiles.initial {
        width: calc(100vw - 60px);
    }


    .profiles-pannel.profiles.initial .expand-button,
    .profiles-pannel .close-button {
        position: fixed;
        left: initial;
        right: 10px;
        top: 10px;
        width: 36px;
        height: 36px;
        padding: 5px;
    }

    .profiles-pannel.add-profile .close-button {
        position: absolute;
        top: 0px;
    }

    .profiles-pannel .title {
        text-align: center;
    }
}

/* Categories */
@media screen and (min-width: 769px) {
    .profiles-pannel.categories {
        float: right;
    }

    .profiles-pannel.categories.initial {
        margin-left: 16%;
    }
}

.profiles-pannel.categories .profiles-box .member {
    /* width: calc(100% - 56px); */
    width: 100%;
}

.profiles-pannel.categories.initial .profiles-box .profile {
    margin: 0;
    float: left;
}

.profiles-pannel.categories.initial .profiles-row {
    margin: 0 0 0 4px;
    min-width: 44px;
}

.profiles-pannel.categories.initial .profiles-box .member .avatar {
    margin: 2px 0;
    height: 36px;
    width: 1.5vw;
    max-width: 8px;
    box-shadow: none;
    border-radius: 0;
    border-right: none;
    border-left: none;
    border-color: rgba(255,255,255,0.4);
}

@media screen and (max-width: 768px) {
    .profiles-pannel.categories.initial .profiles-box .member .avatar  {
        max-width: 5px;
    }
}

.profiles-pannel.categories.initial .profiles-box .profile:first-child .member .avatar {
    border-radius: 4px 0 0 4px;
    border-left: solid 1px #ffffff;
}

.profiles-pannel.categories.initial .profiles-box .profile:last-child .member .avatar {
    border-radius: 0 4px 4px 0;
    border-right: solid 1px #ffffff;
}

.profiles-pannel.categories .profiles-box .avatar {
    float: left;
    height: 40px;
    width: 40px;
    border: solid 1px #ffffff;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 8px;
}

.profiles-pannel.categories.initial .art.selected .avatar {
    background-color: #f6cd56;
}
.profiles-pannel.categories.initial .art .avatar {
    background-color: rgba(246, 205, 86,0);
}


.profiles-pannel.categories.initial .sport.selected .avatar {
    background-color: #56ce67;
}
.profiles-pannel.categories.initial .sport .avatar {
    background-color: rgba(86, 206, 103,0);
}


.profiles-pannel.categories.initial .swimming.selected .avatar {
    background-color: #4290f4;
}
.profiles-pannel.categories.initial .swimming .avatar {
    background-color: rgba(66, 144, 244,0);
}


.profiles-pannel.categories.initial .dance.selected .avatar {
    background-color: #f55c59;
}
.profiles-pannel.categories.initial .dance .avatar {
    background-color: rgba(245, 92, 89,0);
}


.profiles-pannel.categories.initial .music.selected .avatar {
    background-color: #a06331;
}
.profiles-pannel.categories.initial .music .avatar {
    background-color: rgba(160, 99, 49, 0);
}

.profiles-pannel.categories.initial .education.selected .avatar {
    background-color: #9d9da0;
}
.profiles-pannel.categories.initial .education .avatar {
    background-color: rgba(157, 157, 160, 0);
}

.profiles-pannel.categories.initial .others.selected .avatar {
    background-color: #ffffff;
}
.profiles-pannel.categories.initial .others .avatar {
    background-color: rgba(255,255,255,0);
}

.profiles-pannel.categories.initial .avatar i {
    opacity: 0;
}

/* .profiles-pannel.categories .avatar i{
    opacity: 1;
} */

.profiles-pannel .avatar i{
    opacity: 1;
}

.profiles-pannel .add-new .avatar i{
    opacity: 0.25;
}

.profiles-pannel.categories .art .avatar i, .profiles-pannel.add-profile .art .avatar i{
    color: #f6cd56;
}
.profiles-pannel.categories .sport .avatar i, .profiles-pannel.add-profile .sport .avatar i{
    color: #56ce67;
}
.profiles-pannel.categories .swimming .avatar i, .profiles-pannel.add-profile .swimming .avatar i {
    color: #4290f4;
}
.profiles-pannel.categories .dance .avatar i, .profiles-pannel.add-profile .dance .avatar i {
    color: #f55c59;
}
.profiles-pannel.categories .music .avatar i, .profiles-pannel.add-profile .music .avatar i {
    color: #a06331;
}
.profiles-pannel.categories .education .avatar i, .profiles-pannel.add-profile .education .avatar i {
    color: #9d9da0;
}

.profiles-pannel.categories .others .avatar i, .profiles-pannel.add-profile .others .avatar i {
    color: #ffffff;
}

/* Top-tools-btn */
@media screen and (min-width: 769px) {
    .profiles-pannel.top-tools-btn {
        float: right;
    }
}

.profiles-pannel.top-tools-btn.initial .profiles-row {
    height: 40px;
}

@media screen and (max-width: 768px) {
    .profiles-pannel.top-tools-btn.initial .profiles-row {
        max-width: 48px;
    }
}

.profiles-pannel.top-tools-btn .profiles-box .member {
    width: calc(100%);
}

.profiles-pannel.top-tools-btn.add-profile .profiles-box  .member {
    width: calc(100% - 56px);
}

.profiles-pannel.top-tools-btn.initial .profiles-box .profile {
    margin: 0;
    float: left;
}

.profiles-pannel.top-tools-btn.initial .profiles-box .member.selected .avatar {
    margin: 2px 4px;
    height: 36px;
    width: 36px;
    box-shadow: none;
    border-color: rgba(255,255,255,0.4);
}

.profiles-pannel.top-tools-btn.initial .profiles-box .member .avatar {
    margin: 2px 4px;
    height: 36px;
    width: 36px;
    box-shadow: none;
    border-color: rgba(255,255,255,0.4);
}

.profiles-pannel.top-tools-btn .profiles-box .avatar {
    float: left;
    height: 40px;
    width: 40px;
    border: solid 1px #ffffff;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 8px;
}

.profiles-pannel.top-tools-btn.initial .avatar {
    background-color: transparent;
}

.profiles-pannel.top-tools-btn.initial .avatar:hover {
    background-color: #5A6181;
    border-color: #5A6181 !important;

}

.profiles-pannel.top-tools-btn .categories .avatar i {
    /* color: #ffffff; */
    opacity: 1;
}

.profiles-pannel.top-tools-btn .avatar.active i {
    color: #c0ca33;
}

.profiles-pannel.top-tools-btn .profiles-box .member.all-suggested .avatar i {
    transform: scale(1.2);
}

@media screen and (min-width: 769px){
    
    
    .profiles-pannel.settings {
        left: 8px;
    }
    
    .profiles-pannel.settings .expand-button {
        right: -16px;
    }
}

.profiles-pannel.settings.initial .ui-sortable {
    display: none;
}

.profiles-pannel.add-profile.initial .ui-sortable {
    display: none;
}

/* .profiles-pannel.options.initial .ui-sortable {
    display: none;
} */








/* Main structure */
.time-line {
    width: 48px;
    height: auto;
    position: absolute;
    top: 96px;
    left: 0;
    z-index: 1;
}

@media screen and (max-width: 768px) {
    .time-line.short-it{
        max-height: calc(100vh - 96px) !important;
    }
}

.time-line .hour-box {
    width: 48px;
    height: 120px;
    padding: 8px;
    /* border-bottom: solid 1px rgba(0,0,0,0.1); */
    border-top: solid 1px rgba(0,0,0,0.1);
    background-color: white;
    font-size: 12px;
    text-align: right;
    color: #494e6a;

    position: sticky;
    top: 96px;
}

.tabs {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    z-index: 1;
    height: 40px;
    padding-left: 48px !important;
    background-color: #f5f7fa;
    z-index: 2;
}

@media screen and (min-width: 769px) {
    .tabs {
        transition: all .28s ease;
    }
}

.tabs .tab {
    display: inline-block;
    text-align: center;
    line-height: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    width: calc(100% / 7);
    float: left;
}

@media screen and (min-width: 769px) {
    .tabs .tab {
        position: relative;
    }
}

.tabs .tab a {
    color: #494e6a !important;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 0.5em;
    font-size: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-transition: color .28s ease;
    transition: color .28s ease;
}

.tabs .indicator {
    position: absolute;
    bottom: 8px;
    height: 24px;
    min-width: 24px;
    margin: 0 0.1em;
    border-radius: 12px;
    background-color: rgba(73,73,106,0.1);
    will-change: left, right;
}

@media screen and (min-width: 769px) {
    .tabs .indicator  {
        visibility: hidden;
    }
}

.carousel.carousel-slider {
    top: 96px;
    margin-left: 48px;
    width: calc(100vw - 48px);
    height: 1440px !important;
    overflow-x: hidden;
}

@media screen and (max-width: 768px) {
    .carousel.carousel-slider {
        margin-bottom: 78px;
    }
    .carousel.short-it{
        max-height: calc(100vh - 96px) !important;
    }
}

.carousel.carousel-slider .carousel-item {
    border-right: white 1px solid;
    width: calc(100% - 8px);
}

@media screen and (min-width: 667px) {
    .carousel {
        width: calc(100% - 48px);
    }

    .carousel.carousel-slider {
        transition: all .28s ease;
    }

    .carousel.carousel-slider .carousel-item {
        width: 100%;
        width: calc(100% / 7);
        height: 1400px;
        min-height: 1400px;
        position: relative;
        top: 0;
        left: 0;
        display: inline-block;
        float: left;
        transform: initial !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: initial !important;
    }
}

.hour-box {
    position: relative;
    width: 100%;
    height: 120px;
    /* border-bottom: solid 1px rgba(0,0,0,0.1); */
    border-top: solid 1px rgba(0,0,0,0.1);
    background-color: #f5f7fa;
    padding: 0px;
    overflow: visible;
    color: rgba(0,0,0,0.1);
    font-size: 10px;
}

.hour-box span {
    padding: 10px;
    display: inline-block;
}

/* Activity Card */
.activity-card {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    /* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); */
    /* box-shadow: 0 2px 2px 0 rgb(0 0 0 / 7%), 0 3px 1px -2px rgb(0 0 0 / 6%), 0 1px 5px 0 rgb(0 0 0 / 10%); */
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 8%), 0 3px 1px -2px rgb(0 0 0 / 7%), 0 1px 5px 0 rgb(0 0 0 / 11%);
    overflow: hidden;
    z-index: 1;
    transition: all .28s ease;
}

.activity-card.min15 {
    height: 25%;
}
.activity-card.min30 {
    height: 50%;
}
.activity-card.min45 {
    height: 75%;
}
.activity-card.min60 {
    height: 100%;
}
.activity-card.min75 {
    height: 125%;
}
.activity-card.min90 {
    height: 150%;
}
.activity-card.min105 {
    height: 175%;
}
.activity-card.min120 {
    height: 200%;
}

.block .activity-card.min15 {
    height: 30px;
}
.block .activity-card.min30 {
    height: 60px;
}
.block .activity-card.min45 {
    height: 90px;
}
.block .activity-card.min60 {
    height: 120px;
}
.block .activity-card.min75 {
    height: 150px;
}
.block .activity-card.min90 {
    height: 180px;
}
.block .activity-card.min105 {
    height: 210px;
}
.block .activity-card.min120 {
    height: 240px;
}


.activity-card.width1 {
    width:100%;
}
.activity-card.width2 {
    width:calc(100% / 2);
}
.activity-card.width3 {
    width:calc(100% / 3);
}
.activity-card.width4 {
    width:calc(100% / 4);
}

.activity-card.offset50 {
    left:50%; 
}

.activity-card.offset0 {
    left:0; 
}
.activity-card.offset33 {
    left:33.33333%; 
}
.activity-card.offset66 {
    left:66.66666%; 
}
.activity-card.offset75 {
    left:75%; 
}

.activity-card.past5 {
    top: calc(100% / 60 * 5); 
}
.activity-card.past15 {
    top: calc(100% / 60 * 15); 
}
.activity-card.past30 {
    top: calc(100% / 60 * 30); 
}
.activity-card.past45 {
    top: calc(100% / 60 * 45); 
}

.calendar .activity-card:hover, 
/* .activity-card:focus,  */
.activity-card.event-detail-view {
    left:0;
    z-index: 100;
    width: 100% !important;
    transition: all .28s ease;
    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
    cursor: pointer;
}

.activity-card:blure {
    z-index: initial;
    width: initial !important;
    transition: all .28s ease;
}

.activity-card .category-strip {
    position: absolute;
    width: 8px;
    height: 100%;
    z-index: 1;
}

.activity-card.art .category-strip {
    background-color: #f6cd56;
}
.activity-card.sport .category-strip {
    background-color: #56ce67;
}
.activity-card.swimming .category-strip {
    background-color: #4290f4;
}
.activity-card.dance .category-strip {
    background-color: #f55c59;
}
.activity-card.music .category-strip {
    background-color: #a06331;
}
.activity-card.education .category-strip {
    background-color: #9d9da0;
}

.activity-card .avatar {
    position: absolute;
    top: 10px;
    left: -12px;
    width: 40px;
    height: 40px;
    border: solid 1px #ffffff;
    border-radius: 50%;
    background-color: #ffffff;
    background-position: center;
    background-size: contain;
    z-index: 2;
}

.activity-card.ludwik .avatar {
    background-image: url(../img/ludwik-avatar.jpg) ;
}
.activity-card.hania .avatar {
    background-image: url(../img/hania-avatar.jpg) ;
}
.activity-card.veronika .avatar {
    background-image: url(../img/veronika-avatar.jpg) ;
}
.activity-card.gabi .avatar {
    background-image: url(../img/gabi-avatar.jpg) ;
}
.activity-card.janina .avatar {
    background-image: url(../img/janina-avatar.jpg) ;
}
.activity-card.zosia .avatar {
    background-image: url(../img/zosia-avatar.jpg) ;
}
.activity-card.wojtek .avatar. {
    background-image: url(../img/wojtek-avatar.jpg) ;
}


.activity-card .info {
    position: absolute;
    top: 10px;
    left: 32px;
    width: calc(100% - 40px);
    height: calc(100% - 16px);
    overflow: hidden;
}

.activity-card .info .time-place{
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.43;
    letter-spacing: 0.25px;
    color: rgba(0, 0, 0, 0.6);
    color: rgb(73, 78, 105, 1);
    width: 500px;
}

.activity-card .info .time-place span{
    display: none;
}

.activity-card .info .name{
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.25px;
    color: rgba(0, 0, 0, .87);
    width: 500px;
    margin-top: -4px;
}

.activity-card .info .duration-price{
    font-family: Roboto;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: 0.4px;
    color: rgba(0, 0, 0, 0.6);
    color: rgb(73, 78, 105, 1);
    margin-top: 6px; 
    width: 500px;
}

.activity-card .icon-status {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 30px;
    color: #c0ca33;
    background-color: white;
}

.activity-card .icon-nav {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 30px;
    color: #494e6a;
    background-color: white;
    display: none !important;
}

.activity-card .material-icons {
    position: absolute;
    right: 8px;
    width: 24px;
    height: 24px;
}

.activity-card .icon-status span.status-desc {
    width: auto !important;
    position: absolute;
    top: 6px;
    right: 30px;
    text-align: right;
}

.activity-card .icon-status .material-icons {
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.activity-card.new .icon-status span.status-desc, .activity-card.new .icon-status .material-icons, .new {
    color: #FF0063;
}


.activity-card .icon-nav .material-icons {
    bottom: 8px;
}

.no-activities {
    padding: 26px 10px;
    margin: 0 5%;
    font-size: 32px;
    text-align: center;
    font-family: 'Nanum Brush Script', cursive;
    color: #C0CA33;
    line-height: 1.1;
    position: fixed;
    top: 50vw;
    width: 90%;
    z-index: 1;
    text-shadow: 0 0px 80px rgba(0,0,0,0.3);
    backdrop-filter: blur(7px);
}

@media screen and (min-width: 769px) {
    .no-activities {
        display:none;
    }
}

.hide-it {
    display: none;
}

.hide-it-cat {
    display: none;
}

.hide-it-status {
    display: none;
}

/* Event Detail Pamel */
@media screen and (min-width: 0px) {
    .event-detail-panel {
        background-color: #ffffff;
        opacity: 1;
        width: 100vw;
        right:-100vw;
        z-index: 100;
        transition: all .28s ease;
        overflow-x: hidden;
        padding-top: 0;
        top: 0;
        height: 100%;
        position: fixed;
    }

    .event-detail-panel .container, , .top-cta .container {
        margin: 0 auto 0 auto;
        max-width: 1440px;
        width: 96%;
    }

    .border {
        border-left: #4290f4 8px solid;
        padding: 84px 0 8px 0;
        background: #ffffff;
    }

    .connector {
        background-color: #ffffff;
        width: 10px;
        height: 0;
        position: absolute;
        right: -100%;
        margin-left: -2px;
        top: 50%;
        z-index: 101;
        display: none;
        visibility: hidden;
        transition: all .28s ease;

    }

    .event-detail-panel .event-title .avatar {
        width: 68px;
        display: inline-block;
        float: left;
    }

    .event-detail-panel .event-title .avatar .avatar-img{
        width: 56px;
        height: 56px;
        border: solid 2px rgb(0, 0, 0, .1);
        border-radius: 50%;
        background-size: contain;
        background-image: url(../img/wojtek-avatar.jpg) ;
        background-repeat: no-repeat;
    }

    h1 {
        font-size: 38px;
        line-height: 1.2;
        margin: .6rem 0 .8rem 0;
        color: black;
        color: rgba(0, 0, 0, .87);
    }

    .event-detail-panel .event-status {
        margin-left: -5%;
        margin-right: -5%;
    }

    .event-detail-panel .event-gallery{
        margin-bottom: 16px;
        margin-left: -11%;
        margin-right: -11%;
    }

    .event-detail-panel .event-gallery .col {
        max-height: 336px;
        overflow: hidden;
        padding: 0;

    }
}

@media screen and (min-width: 769px) {
    .event-detail-panel {
        width: calc( 6 * (100% - 48px) / 7 );
        position: fixed;
        overflow: scroll;
    }

    .event-detail-panel .container, .top-cta .container {
        width: 90%;
    }

    .border {
        border-left-width: 8px;
        height: auto;
        min-height: 100vh;
    }

    .connector {
        margin-right: calc( 6 * (100% - 58px) / 7 );
        display: block;
        visibility: visible;
        transition: all .28s ease;

    }

    .event-detail-panel .event-title .avatar {
        width: 84px;
        min-height: 108px;
        display: inline-block;
    }

    .event-detail-panel .event-title .avatar .avatar-img{
        width: 72px;
        height: 72px;
        background-size: contain;
        background-image: url(../img/wojtek-avatar.jpg) ;

    }

    h1 {
        font-size: 48px;
    }

    .event-detail-panel .event-gallery, .event-detail-panel .event-status {
        margin-left: initial;
        margin-right: initial;
    }

    .event-status {
        background: white;
        z-index: 1010;
    }

    .event-detail-panel .event-gallery .col {
        padding: 0 0.75rem;

    }

    .event-detail-panel .row.event-description .btn {
        margin-top: -52px;
    }
}

.event-detail-panel .icon-cancel {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 8px;
    color: #353951;
}

.event-detail-panel .row.event-title{
    margin-bottom: 24px;
    background: white;
    padding-bottom: 24px;
    margin-bottom: 0;
}

h6 {
    font-size: 17px;
    line-height: 1.4;
    margin: .4rem 0 .4rem 0;
    opacity: 1;
    color: black;
    color: rgba(0, 0, 0, .87);
}

h5 {
    font-size: 24px;
    color: black;
    color: rgba(0, 0, 0, .87);
    margin-bottom: 1rem;
}

p {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 1.4rem;
}

h6 span {
    color: #353951;
}


.event-detail-panel .row.event-status.active {
    position: sticky;
    top: 96px;
    z-index: 10;
    margin-bottom: 60px;
}

.event-detail-panel .event-status-box {
    height: 0px;
    border-top: solid 1px rgb(0, 0, 0, .1);
    /* padding: 8px 8px 0 8px; */
    overflow: hidden;
    position: relative;
    transition: all 0.28s;
    background-color: #ffffff;
}

.event-detail-panel .event-status-box.active {
    height: auto;
    overflow: auto;
    overflow-x: hidden;
    /* margin-bottom: 42px; */
    box-shadow: 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%), 0 11px 15px -7px rgb(0 0 0 / 20%);
}



.event-detail-panel .event-status-box.active .contact {
    font-family: Roboto;
    font-size: 17px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.25px;
    width: 100%;
    padding: 10px 16px;
    color: #353951;
    position: relative;
    height: 56px;
    background: #ffffff;
}

.event-detail-panel .event-status-box.active .chat-content {
    position: relative;
    max-height: 40vh;
    padding-bottom: 16px;
    overflow: auto;

}

.event-detail-panel .event-status-box.active .contact div span {
    text-decoration: underline;
}

.event-detail-panel .event-status-box.active .contact .avatar {
    display: inline-block;
    left: 0px;
    width: 38px;
    height: 38px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: #ffffff;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../img/larisa-avatar.jpg);
}

.event-detail-panel .event-status-box p{
    font-size: 14px;
    color: rgba(73, 78, 105, 1);
    margin: 16px; 
}

.event-detail-panel .event-status-box p strong{
    font-weight: 400;
}

.event-detail-panel .event-status-box p span.chat-box{
    border-radius: 12px;
    padding: 4px 12px;
    background-color: #f5f7fa;
    display: inline-block;
}

.event-detail-panel .event-status-box.new-request p span.chat-box{
    background:#ffffff;
    animation: chat_box_animation 0.28s ease 0.28s running normal forwards;
}

@keyframes chat_box_animation {
    0%  {background: #ffffff;}
    100%   {background: #f5f7fa;}
    
}

.event-detail-panel .event-status-box p span.date{
    color: rgba(73, 78, 105, 1);
    font-size: 12px;
    text-align: left;
    display: block;
    opacity: 0.8;
    
}

.event-detail-panel .event-status-box p span.text{
    
}

.event-detail-panel .event-status-box p.provider{
    text-align: left;
    margin-right:12%;
}

.event-detail-panel .event-status-box p.user span{
    /* background-color: rgba(73,73,106,0.1); */
    /* background-color: #f5f7fa; */
}

.event-detail-panel .event-status-box p.user{
    text-align: right;
    margin-left:12%;
}

.event-detail-panel .event-status-box p.provider span{
    background: rgba(73, 78, 106, 0.4);
    background-color: #f55c59;
    color: #ffffff;
}

.event-detail-panel .event-status-box .input-box{
    background-color: #f5f7fa;
    overflow: auto;
    margin-bottom: 0;
    font-size: 16px;
    padding: 8px 0;
    background: rgba(87, 92, 116, 0.1);    
}

.event-detail-panel .event-status-box .input-box input {
    display: inline-block;
    margin:0 0 0 16px;
    padding: 0 16px;
    width: 100%;
    height: 36px;
    border: none;
    color: rgba(0, 0, 0, .87);
    background-color: #ffffff;
    border-radius: 4px;
}

.event-detail-panel .event-status-box .input-box .btn {
    margin: 0 16px 0 0;
    background: #494e6a;
    color: #ffffff;
    padding: 0 8px;
    text-align: center;
    min-width: 36px;
}

.event-detail-panel .event-status-box .input-box .btn i {
    color: #ffffff;
    float: none !important;
    text-align: center;
    line-height: 1.2;
    margin: 0 8px 0 0;
}

@media screen and (max-width: 768px) {

    header.remove-it{
        display: none;
    }

    .event-detail-panel .row.event-status.active {
        /* position: initial;
        z-index: 10; */
    }

    .event-detail-panel .event-status-box {
        transition: all 0s;
    }

    .event-detail-panel .event-status-box.active {
        border: none;
        overflow: auto;
        box-shadow: none;
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 8px;
        width: calc(100vw - 8px);
        height: 100vh;
        transition: all 0s;
    }

    .event-detail-panel .event-status-box.active .chat-content {
        top: 0;
        height: calc(100vh - 121px);
        max-height: initial;
    }

    .event-detail-panel .event-status-box .input-box{
        padding: 14px 16px;
        position: fixed;
        bottom: 0;
        width: 100vw;
        left: 10px;
        left: 0.75rem;
        height: 64px;
        background: #575c74;
    }

    .event-detail-panel .event-status-box .input-box input {
        margin: 0;
    }

    .event-detail-panel .event-status-box .input-box .btn {
        background: #c0ca33;
        margin: 0;
    }

    .event-detail-panel .event-status-box .input-box .btn i {
        line-height: 1.35;
        margin: 0;
    }

    .event-detail-panel .event-status-box.active .contact {
        background-color: #ffffff;
        position: sticky;
        top: 0;;
    }

    .event-detail-panel .event-status-box.active .contact .close-button {
        position: fixed;
    }
}

@media screen and (max-width: 1024px) {
    .event-detail-panel .event-status-box .input-box .btn i {
        margin: 0;
    }
}

.event-detail-panel .event-status-box .input-box .btn:hover {
    background: rgba(73, 78, 105, 0.8);
}

.event-detail-panel .event-status-box.new-request p{
    display: none;
}
.event-detail-panel .event-status-box.new-request .user.request{
    display: block;
}

.event-detail-panel .event-status-box.contact p{
    display: none;
}



.event-detail-panel .row.event-address .width160 {
    width: 160px;
}

.event-detail-panel .event-logo {
    width: 100%;
    height: 80px;
    display: inline-block;
    border: solid 1px rgb(73, 78, 105, .6);
    border-radius: 4px;
    background-color: #ffffff;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../img/meilen-hallenbad-logo.png) ;
}

.event-detail-panel .event-gallery img{
    max-width: 100%;
}

.event-detail-panel .event-gallery .event-image {
    height: 336px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (max-width: 768px) {
    .event-detail-panel .event-gallery .event-image {
        height: 260px;
    }
}


.event-detail-panel .row.event-description {
margin-bottom: 16px;
}

.event-detail-panel .row.event-description .event-teacher {
    margin-bottom: 8px;
    margin-top: 0;
}

.event-detail-panel .row .event-teacher span {
    font-size: 12px;
}

.event-detail-panel .row .event-teacher span.teacher-name {
    font-size: 18px;
    color: #353951;
    color: rgba(0, 0, 0, .87);
}

@media screen and (min-width: 993px) {
    .hide-on-large-and-up {
        display: none;
    }
}

.row.mobile-action-btns {
    position: sticky;
    bottom: -242px;
    bottom: -268px;
    background: rgba(255,255,255, 1);
    border-top: solid 1px rgba(0,0,0, 0.1);
    padding: 8px 5% 32px 5%;
    transition: all .28s ease;
    margin-bottom: 0;
}

.row.mobile-action-btns.show-btns {
    bottom: 0px;
    background: rgba(255,255,255, 1);
    padding-top: 32px;
    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
}

@media screen and (max-width: 768px) {
    .row.mobile-action-btns.show-btns {
        border-radius: 8px 8px 0 0;
    }
}

.top-info {
    position: relative;
    top: 0;
    left: 0vw;
    margin: -10px auto 0 auto;
    display: inline-block;
    display: none;
    height: 56px;
    z-index: 110000;
    overflow: hidden;
    opacity: 0;
    transition: all .2s;
}

.top-cta {
    display: none;
}

.top-cta .btn {
    display: none;
}

.top-cta .container {
    padding-left: 8px;
}

@media screen and (min-width: 993px) {
    .top-cta {
        right: 0vw;
        display: inline-block !important;
        display: none;
        opacity: 0;
        transition: all .2s;
        width: calc( 6 * (100% - 56px) / 7 );
        position: fixed;
    }
    .top-cta .btn {
        display: inline-block;
    }
}



@media screen and (max-width: 768px) {
    .top-info {
        width: 60vw; 
    }
}

.top-info .avatar {
position: absolute;
top: 8px;
left: 0;
width: 40px;
height: 40px;
border: solid 1px #ffffff;
border-radius: 50%;
background-color: #cfcfcf;
background-position: center;
background-size: contain;
z-index: 2;
}
    
.top-info.ludwik .avatar {
    background-image: url(../img/ludwik-avatar.jpg) ;
}
.top-info.hania .avatar {
    background-image: url(../img/hania-avatar.jpg) ;
}
.top-info.veronika .avatar {
    background-image: url(../img/veronika-avatar.jpg) ;
}
.top-info.gabi .avatar {
    background-image: url(../img/gabi-avatar.jpg) ;
}
.top-info.janina .avatar {
    background-image: url(../img/janina-avatar.jpg) ;
}
.top-info.zosia .avatar {
    background-image: url(../img/zosia-avatar.jpg) ;
}
.top-info.wojtek .avatar. {
    background-image: url(../img/wojtek-avatar.jpg) ;
}
    
    
.top-info .info {
    position: relative;
    top: 10px;
    margin-left: 52px;
    height: auto;
    width: auto;
    overflow: hidden;
    opacity: 0.9;
    max-height: 44px;
}
    
.top-info .info .time-place{
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.43;
    letter-spacing: 0.25px;
    color: rgba(0, 0, 0, 0.6);
    color: rgb(255, 255, 255, 1);
    text-align: left;
    height: 20px;
    overflow: hidden;
}
    
.top-info .info .name{
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.25px;
    color:  rgb(255, 255, 255, 1);
    margin-top: -4px;
    text-align: left;
}

.hour-box.affix{
    position:fixed;
    top:0;
    right:0;
}

/* Search Box */
/* .search-box.valign-wrapper {
    height: 100%;
    background: #ffffff;
    border-radius: 4px;
}

.space-1 .search {
    display: none;
}

@media screen and (max-width: 768px) {
    .search-box.valign-wrapper {
        margin: auto;
        width: 36px;

        display: none;
    }

    .space-1 .search {
        display: inline-block;;
    }
}

.search-box i {
    display: inline-block;
    margin: 0 4px;
}

.search-box input {
    display: inline-block;
    margin:0;
    padding: 0 4px;
    height: 100%;
    border: none;
    color: rgba(0, 0, 0, .87);
}

input:not([type]):focus:not([readonly]),
.search-box input:focus {
    border: none;
    box-shadow:none;
} */

/* Search Box */
.search-box.valign-wrapper {
    height: 100%;
    background: #ffffff;
    border-radius: 4px;

    display: none;
}

.space-1 .search {
    float: left;
    
}

.profiles-pannel.search{
    margin-left: 0;
}

.profiles-pannel.search .profiles-box .profile {
    width: 100%;
}

.profiles-pannel.top-tools-btn.initial.search .avatar:hover {
    border-color: #ffffff !important;

}

@media screen and (min-width: 769px) {
    .profiles-pannel.top-tools-btn.search.initial .profiles-box .member {
        padding-right: 0;
    }
    .profiles-pannel.search.top-tools-btn .profiles-box .member.selected .avatar{
        margin-left: 0;
    }
}
.profiles-pannel.top-tools-btn.search .profiles-box .member {
    padding-right: 8px;
}

.profiles-pannel.search.top-tools-btn .profiles-box .member.selected .avatar{
    width: 100%;
    /* margin-left: 0; */
    background-color: #ffffff;
}

.profiles-pannel.search.top-tools-btn .profiles-box .member.selected .avatar i.icon-search{
    padding-left: 6px;
}

.profiles-pannel.search.top-tools-btn .profiles-box .member.selected .avatar i{
    color: #353951;
    /* padding-left: 8px; */
}

.profiles-pannel.search.top-tools-btn .profiles-box .member.selected .avatar span{
    color: #353951;
}


@media screen and (max-width: 768px) {
    .search-box.valign-wrapper {
        margin: auto;
        width: 36px;

        display: none;
    }

    .space-1 .search {
        display: inline-block;;
    }

    .profiles-pannel.search.top-tools-btn.initial .profiles-box .member.selected .avatar{
        background-color: transparent;
    }
    
    .profiles-pannel.search.top-tools-btn.initial .profiles-box .member.selected .avatar i{
        color: #ffffff;
        padding-left: 0;
    }
}

.search-box i {
    display: inline-block;
    margin: 0 4px;
}

.search-box input {
    display: inline-block;
    margin:0;
    padding: 0 4px;
    height: 100%;
    border: none;
    color: rgba(0, 0, 0, .87);
}

input:not([type]):focus:not([readonly]),
.search-box input:focus {
    border: none;
    box-shadow:none;
}

/* Landing Page */
.landing-page {
    /* background: #ffffff; */
}

.landing-page .container>.valign-wrapper{
    height: calc(100vh - 112px);
    height: 75vh;
}

@media screen and (min-width: 768px) {
    .landing-page .container>.valign-wrapper{
        height: 85vh;
    }
}

.landing-page .digido-logo {
    width: 146px;
    height: 36px;
}







/* @media screen and (min-width: 426px) { */
    .landing-page .logo {
        position: absolute;
        left: 0px;
        top: 10px;
        height: 36px;
        left: 50%; 
        margin-left: -73px; 
        opacity:0.8;
        animation: logo_animation_landing 0.28s ease 0s running normal forwards;
    }
/* } */

@keyframes logo_animation_landing {
    0%  {left: 50%; margin-left: -73px; opacity:0.8;}
    100%   {left: 0px; margin-left: 0; opacity:1}
    
}

/* .landing-page.login header .btn.join-us {
    margin-right: 0;
    border: transparent;
}*/

.landing-page h1 {
    animation: h1_text_animation_landing 0.28s ease 0s running normal forwards;
    opacity:0
}

@keyframes h1_text_animation_landing {
    0%   {opacity: 0;}
    100%  {opacity: 0.8;}
} 

.landing-page .login,
.landing-page .join-us {
    animation: btns_animation_landing 0.28s ease 0s running normal forwards;
    opacity:0
}

@keyframes btns_animation_landing {
    0%   {opacity: 0;}
    100%  {opacity: 1;}
} 


















.landing-page header {
    margin: 0 auto;
    max-width: 768px;
    position: relative;
    background:transparent;
    /* border: none; */
    width: 100%;
    padding: 10px 0;
    height: 56px;
}

.landing-page .copyrights {
    width: 100%;
    position: fixed;
    /* top: calc(100vh - 24px); */
    bottom: 24px;
    left: 0;
    text-align: center;
    /* color: rgba(0, 0, 0, .4); */
    font-size: 0.8rem;
    opacity: 0.6;
}

.landing-page header .btn, .log-out header .btn.login {
    border-radius: 4px;
    width: auto;
    overflow: hidden;
    margin: 0;
    padding: 0 16px;
    /* min-width: 96px; */
    float: right;
    box-shadow: none;
}

.landing-page header .btn.join-us {
    margin-right: 8px;
    border: transparent;
    height: 32px;
    line-height: 32px;
    margin-top: 2px;
    padding: 0 12px;
}

header .btn.login,
.log-out header .btn.login {
    background: #9096BA;
    height: 32px;
    line-height: 32px;
    margin-top: 2px;
}

header .btn.login:hover {
    opacity: 0.8 !important;
}

header .btn.join-us:hover {
    background-color: rgba(73,73,106,0.1);
}

.landing-page h1 {
    text-align: center;
    color: #c0ca33;
    padding: 0 0 7vh 0;
    font-size: 3.8rem;
    line-height: 0.8;
    font-family: 'Nanum Brush Script', cursive;
    opacity: 0.8;
    /* text-shadow: 0px 10px 10px rgba(0,0,0,0.1); */
    -webkit-text-stroke: #f5f7fa 0.6px;
}

@media screen and (max-width: 768px) {
    .landing-page h1 {
        font-size: 3.2rem;
    }
    .landing-page header .btn {
        padding: 0 1rem;
        min-width: 0;
    }
}

@media screen and (max-width: 425px) {
    .landing-page h1 {
        font-size: 3.2rem;
        padding: 0 0 5vh 0;
        margin-top: 0;
    }
}

@media screen and (max-width: 374px) {
    .landing-page header .btn {
        padding: 0 1rem;
        min-width: 0;
        height: 32px;
        line-height: 32px;
        font-size: 13px;
        margin-top: 3px;
    }
    .landing-page .digido-logo {
        height: 28px;
        width: auto;
    }
}


.landing-page .search-area {
    margin: auto;
    text-align: center;
    width: 100%;
    max-width: 768px;
}

.landing-page .search-area p {
    margin-top: 3%;
    font-size: 14px;
    float: left;
    text-align: center;
    display: block;
    width: 100%;
    opacity: 0.6;
}

.landing-page .search-box {
    display: flex;
    height: 42px;
    width: 100%;
    margin: 1.5% 0;
    padding: 8px;
    /* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); */
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 8%), 0 3px 1px -2px rgb(0 0 0 / 7%), 0 1px 5px 0 rgb(0 0 0 / 11%);
}

.landing-page .search-box input {
    padding: 0 8px;
}

.landing-page .search-box.place {
    width: 59%;
    float: left;
}

.landing-page .search-box.place i {
    font-size: 18px;
    margin-top: 5px;
    opacity: 1;
}

.landing-page .search-box.distance {
    width: 38.5%;
    float: right;
}

.landing-page .search-box.distance i {
    opacity: 1;
}

::placeholder {
    color: rgba(0, 0, 0, .60);
}

.landing-page .search-area .btn.search {
    margin: 8vh 0;
    max-width: 375px;
    background: #494e6a;
}

.landing-page .search-area .btn:hover {
    /* background: rgba(73, 78, 106, 0.8); */
    opacity: 0.8 !important;
}

.btn.secondary-btn.add-activity {
    margin-top: 16px;
    width: auto;
    border: transparent;
    height: 32px;
    line-height: 32px;
    margin-top: 0;
    padding: 0 12px;
}

.btn.secondary-btn.add-activity:hover {
    background-color: rgba(73,73,106,0.1);
    opacity: 1 !important;
}

@media screen and (max-width: 425px) {
    .landing-page .search-area .btn.search {
        margin: 2px 5%;
        max-width: 90%;
        height: initial;
        /* line-height: 36px; */
        font-size: initial;
        position: fixed;
        bottom: 12px;
        left: 0;
        background: #c0ca33;
    }

    .landing-page .copyrights {
        position: fixed;
        bottom: 10vh;
        /* color: rgba(0, 0, 0, .2); */
        font-size: 0.8rem;
    }
}

select {
    background-color: rgba(255,255,255,0);
    width: 100%;
    padding: 0 8px 0 5px;
    border: none;
    border-radius: 2px;
    height: auto;
    font-size: 1rem;
}

/* Class for when element is above threshold */
/* .pin-top {
    position: relative;
} */
/* Class for when element is below threshold */
/* .pin-bottom {
    position: relative;
} */
/* Class for when element is pinned */
/* .pinned {
    position: fixed !important;
} */

.block {
    position: relative;
    height: 100%;
    height: auto;
    top: 56px;
    /* border-bottom: solid 1px rgba(0,0,0,0.1); */
    max-width: 768px;
    margin: auto;
    transition: all .28s ease;
    min-height: calc(100vh - 96px);
}

/* .block.monday{
    z-index: 97;
}
.block.tusday{
    z-index: 96;
}
.block.wednesday{
    z-index: 95;
}
.block.thursday{
    z-index: 94;
}
.block.friday{
    z-index: 93;
}
.block.saturday{
    z-index: 92;
}
.block.sunday{
    z-index: 91;
} */

@media screen and (max-width: 768px) {
    .block {
        min-height: calc(100vh - 174px);
        width: initial !important;
    }
}

.block:last-child {
    min-height: calc(100vh - 56px);
}

.block .valign-wrapper{
    min-height: calc(100vh - 136px);
    width: 100%;
    border-top: solid 1px rgba(0,0,0,0.1);
    /* padding: 0 2rem 3rem 2rem; */
}

.block .valign-wrapper>div{
    width: 100%;
}

.block .valign-wrapper p.no-activity{
    text-align: center;
    margin: auto;
    color: #c0ca33;
    font-size: 2.8rem;
    line-height: 0.8;
    font-family: 'Nanum Brush Script', cursive;
    opacity: 0.8;
    /* position: sticky;
    top: 49vh; */
    margin: 0 2rem 5rem 2rem;
    -webkit-text-stroke: #f5f7fa 0.6px;
} 

.block .hour-box {
    position: relative;
    width: 100%;
    width: calc(100% - 8px);
    height: auto;
    background-color: #f5f7fa;
    padding: 0px;
    
    border-bottom: solid 1px rgba(0,0,0,0.0);
    background-color: white;
    font-size: 12px;
    color: #494e6a;
    /* overflow: hidden; */
    overflow: visible;
    min-height: 28px;
}

.block .hour-box:last-child {    
    border-bottom: solid 1px rgba(0,0,0,0.1);
}

.block .hour-box::before {
    content: " - ";
    display: block;
    height: 0;
    width: 0;
    overflow: hidden;
}

@media screen and (min-width: 769px) {
    .block .hour-box {
        width: 100%;
    }
}

.block .hour-box span {
    width: 48px;
    padding: 8px;
    float: left;

    position: sticky;
    top: 96px;
    
}

.block .activity-card {
    position: relative;
    z-index: 0;
    box-shadow: none;
    margin-bottom: 1px;
    width: calc(100% - 48px);
    margin-left: 48px;
    /* border-bottom: 1px solid #f5f7fa; */

    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 3%), 0 3px 1px -2px rgb(0 0 0 / 2%), 0 1px 5px 0 rgb(0 0 0 / 6%);
}

.block .activity-card:hover{
    z-index: 10;
    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
}


.block .activity-card.event-detail-view {
    left: 0;
    z-index: 0;
    width: calc(100% - 48px) !important;
    transition: none;
    box-shadow: none;
    cursor: pointer;

    transition: all .28s ease;
    margin-top: 30px;
    margin-bottom: 30px !important;
    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2);
}




.block .activity-card:last-child {
    margin-bottom: 0;
}



nav {
    position: sticky;
    top: 56px;
    z-index: 100;
    left: 0;
    height: 40px;
    background-color: #f5f7fa;
    background-color: transparent;
    text-align: center;
    box-shadow: none;
    transition: all .28s ease;
    /* border-bottom: solid 1px rgba(0,0,0,0.1); */
}

nav.shadow::before {
    content: "";
    position: fixed;
    top: 56px;
    z-index: 99;
    left: 0;
    height: 40px;
    width: 100%;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    background-color: #f5f7fa;
}

nav::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    height: 24px;
    width: 56%;
    margin-left: -28%;
    border-radius: 12px;
    background-color: rgba(73,73,106,0.1);
    /* background: red; */
    /* will-change: left, right; */
    z-index: 100;
}

@media screen and (min-width: 769px) {
    .tabs .tab::after {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        height: 24px;
        width: 60%;
        margin-left: -30%;
        border-radius: 12px;
        background-color: rgba(73,73,106,0.1);
        z-index: 100;
        transition: all 0s;
        transition-delay: 0s;
        opacity:0;
    }

    .tabs .tab.show::after {
        opacity:1;
        transition: all 0s;
        transition-delay: 0.28s;
    }
}

nav a {
    line-height: 40px;
    height: 40px;
    color: #494e6a !important;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 0.5em;
    font-size: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-transition: color .28s ease;
    transition: color .28s ease;
    text-transform: uppercase;
    z-index: 101;
    position: relative;
}



.log-out div.space-1 {
    width: calc(35% - 12px);
    position: relative;
    padding-right: calc(15% - 12px);
}

.log-out div.space-3 {
    border: none;
}

.log-out div.space-4 {
    width: 35%;
    border: none;
}

.log-out .search-box.valign-wrapper {
    display: inline-flex;
    float: left;
    margin-right: 8px;
    width: calc(50% - 8px);
    border-radius: 0;
}

.log-out .search-box.distance, .log-out .search-box.place {
    width: calc(25% - 8px);
    padding: 0 4px;
}

.log-out .add-profile .expand-button {
    height: 48px;
    width: 48px;
    box-shadow: 0 3px 4px 2px rgb(0 0 0 / 14%), 0 3px 2px rgb(0 0 0 / 12%), 0 2px 4px -3px rgb(0 0 0 / 20%);
    float: left;
    /* border: solid 1px #ffffff; */
    border-radius: 50%;
    overflow: hidden;
    top: 1px;
    background: #c0ca33;
    padding-top: 10px;
}

.log-out .activity-card .avatar {
    
    position: absolute;
    /* bottom: 0 !important; */
    left: auto;
    width: 49%;
    right: 10px;
    height: calc(100% - 20px);
    border: solid 1px #ffffff;
    border-radius: 0px 0 0 0px;
    /* background-color: red; */
    background-position: center;
    background-size: cover;
    z-index: 2;
    background-repeat: no-repeat;
    background-image: url(../img/img-Swimming.jpg);
    /* background-image: url(../img/swimming-icon.jpeg);
    opacity: 0.05;
    background-size: 100px; */
}

.log-out .activity-card.zosia .avatar {
    background-image: url(../img/img-Swimming-2.jpg);
}

.log-out .activity-card.ludwik .avatar {
    background-image: url(../img/img-Swimming-3.jpg);
}

/* .profiles-pannel.add-profile .profiles-box {
    padding: 16px;
} */

.profiles-pannel.add-profile .input-field {
    padding: 4px 16px;
    color: #ffffff;
    float: left;
}

.input-field>label {
    color: rgba(255, 255, 255, 0.50);
    margin-left: 16px;
}

input[type=text]:not(.browser-default){
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    margin: 0 0 8px 0;
    transition: all 0.01s;
    height: 40px;
    padding: 0 12px;
    font-size: 16px;
    box-sizing: border-box;
}

.profiles-pannel.add-profile .input {
    color: #ffffff;
}

input[type=text]:not(.browser-default).validate+label{
    /* color: #ffffff; */
    width: auto;
}

input[type=text]:not(.browser-default):focus:not([readonly]), input[type=text].valid:not(.browser-default){
    border-bottom: 1px solid #ffffff;
    box-shadow: none;
    background-color: #494e6a !important;
    color: #ffffff !important;
    
    transition: all 0s;
}

input[type=text]:not(.browser-default):focus:not([readonly])+label{
    color: #ffffff;
}


.profiles-pannel.add-profile  .btn-container {
    margin: 12px 5%;

    /* padding: 12px 5%;
    position: fixed;
    width: 100%;
    bottom: 0;
    background: #575c74; */
}

.profiles-pannel.add-profile  .btn {
    /* margin: 4px 0 4px 0 !important; */
    padding: 0 1rem 0 1rem;
    /* max-width: 320px; */
}

.log-out .icon-status, .log-out .event-detail-panel .avatar, .log-out .top-info .avatar {
    display: none;
}

.log-out .top-info .info {
    margin-left: 0;
}

.log-out .top-tools-container .add-prof-text {
    position: fixed;
    left: calc(50% + 40px);
    top: 18px;
    margin-bottom: 0;
    color: #ffffff;
}

.profiles-pannel .profiles-box .add-new .avatar {
    float: left;
    height: 44px;
    width: 44px;
    border: solid 1px #ffffff;
    border-radius: 50%;
    overflow: hidden;
}

.profiles-pannel.add-profile p {
    color: rgba(255, 255, 255, 0.50);
}



.search input {
    height: 100%;
    margin: 0;
    border: none;
    font-size: 16px;
    padding: 4px 8px;
}

@media screen and (max-width: 768px) {
    .search.initial input {
        display:none
    }

    .profiles-pannel.add-profile  .btn-container {
        margin: 0;
        padding: 8px 5%;
        position: fixed;
        width: 100%;
        bottom: 0;
        background: #575c74;
    }

    .profiles-pannel.add-profile  .categories{
        padding-bottom: 78px;
    }

}

@media screen and (max-width: 768px) {
    .log-out div.space-1, .log-out div.space-4  {
        width: 25%;
        position: relative;
        height: 36px;
        border: none;
        padding: 0 8px;
    }

    .log-out div.space-3  {
        width: 50%;
    }

    .log-out div.space-4 {
        left: initial;
        float: right;
        padding: 0;
    }

    .log-out .top-tools-container .add-prof-text {
        display: none;
    }

    .log-out .space-1 .search.initial {
        display: inline-block;
        padding-top: 0;
    }
}

@media screen and (max-width: 375px) {
    

    .log-out .activity-card .avatar{
        left: auto;
        width: 40%;
        right: 10px;
    }
}





.landing-page.login .back {
    padding: 8px 12px;
    left: 0px;
    top: 12px;
    opacity: 1;
    transition: all .28s ease;
    color: rgba(43, 53, 107, 1);
    visibility: initial;
    width: 32px;
    height: 32px;
    opacity: 0;
    animation: back_arrow_animation 0.28s ease 0.14s running normal forwards;
}

.landing-page.login .back i {
    font-size: 16px;
}

.landing-page.login .back:hover {
    background-color: rgba(73,73,106,0.1);
}

@keyframes back_arrow_animation {
    0%   {opacity: 0;}
    100%  {opacity: 1;}
}

/* @media screen and (min-width: 426px) { */
    .landing-page.login .logo {
        position: absolute;
        left: 0px;
        top: 10px;
        height: 36px;
        opacity:1;
        margin-left: 0;
        animation: logo_animation 0.28s ease 0s running normal forwards;
    }

    .landing-page.login .logo:hover {
        opacity:0.8;
    }
/* } */

@keyframes logo_animation {
    0%   {left: 0px; margin-left: 0;}
    100%  {left: 50%; margin-left: -73px}
}

@media screen and (max-width: 374px) {
    .landing-page.login .logo {
        animation: logo_small_animation 0.28s ease 0s running normal forwards;
    }
}

@keyframes logo_small_animation {
    0%   {left: 0px; margin-left: 0;}
    100%  {left: 50%; margin-left: -56px}
}

.landing-page.login header .btn.join-us {
    margin-right: 0;
    border: transparent;
}

.landing-page.login h1 {
    animation: h1_text_animation 0.28s ease 0s running normal forwards;
    opacity:0
}

@keyframes h1_text_animation {
    0%   {opacity: 0;}
    100%  {opacity: 0.8;}
}

.landing-page.login  .login-box {
    display: flex;
    height: 42px;
    width: 100%;
    max-width: 375px;
    margin: 1.5% auto;
    padding: 8px;
    /* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); */
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 8%), 0 3px 1px -2px rgb(0 0 0 / 7%), 0 1px 5px 0 rgb(0 0 0 / 11%);
}

.landing-page.login  .login-box.password {
    margin-top: 3%;
}

.login-box.valign-wrapper {
    height: 100%;
    background: #ffffff;
    border-radius: 4px;
    display: none;
}

.login-box input {
    display: inline-block;
    margin: 0;
    padding: 0 4px;
    height: 100%;
    border: none;
    color: rgba(0, 0, 0, .87);
}

/* .btn {
    box-shadow: none !important;
}

body::before{
    content: "";
    display: none;
    display: block;
    width: 100%;
    height: 36px;
    background: red;
    position: fixed;
    bottom: 14px;
    z-index: 1000000000;
    opacity: 0.2;
}


body::after{
    content: "";
    display: none;
    display: block;
    width: 100%;
    height: 64px;
    background: red;
    position: fixed;
    bottom: 0px;
    z-index: 1000000000;
    opacity: 0.2;
} */