#facebook-connect span,#google-signin span,#mail-signin span,#twitter-connect span,.social-button{
    text-transform:uppercase;
    outline:rgb(255,255,255) 0
}
*,.loader,.loader::after,.social-button,:after,:before{
    box-sizing:border-box
}
.lang-option,.social-button{
    cursor:pointer;
    text-decoration:none
}
#checkmarkasd,#progressCircle{
    width:100px;
    height:100px
}
.et_pb_section_23.section_has_divider.insta_bottom_divider .insta_bottom_inside_divider{
    background-image:url(data:image/svg+xml;
    base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI2M3B4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTcyNS4yOSAxMDEuMkMzMjUuMjIgMTIyLjQ4IDAgMCAwIDB2MTQwaDEyODBWMHMtMTU0LjY0IDc5LjkyLTU1NC43MSAxMDEuMnoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNNTU2LjQ1IDExOS43NEM5NTMuNDEgMTQwIDEyODAgMTQgMTI4MCAxNHYxMjZIMFYwczE1OS41IDk5LjQ4IDU1Ni40NSAxMTkuNzR6IiBmaWxsLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0iTTY0MCAxNDBjMzUzLjQ2IDAgNjQwLTE0MCA2NDAtMTM5djE0MEgwVjBzMjg2LjU0IDE0MCA2NDAgMTQweiIvPjwvZz48L3N2Zz4=);
    background-size:133.33333333333% 63px;
    bottom:0;
    height:63px;
    z-index:1;
    transform:rotateY(180deg)
}
.insta_section_23.section_has_divider.insta_top_divider .insta_top_inside_divider{
    background-image:url(data:image/svg+xml;
    base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI4NXB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTcyNS4yOSAxMDEuMkMzMjUuMjIgMTIyLjQ4IDAgMCAwIDB2MTQwaDEyODBWMHMtMTU0LjY0IDc5LjkyLTU1NC43MSAxMDEuMnoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNNTU2LjQ1IDExOS43NEM5NTMuNDEgMTQwIDEyODAgMTQgMTI4MCAxNHYxMjZIMFYwczE1OS41IDk5LjQ4IDU1Ni40NSAxMTkuNzR6IiBmaWxsLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0iTTY0MCAxNDBjMzUzLjQ2IDAgNjQwLTE0MCA2NDAtMTM5djE0MEgwVjBzMjg2LjU0IDE0MCA2NDAgMTQweiIvPjwvZz48L3N2Zz4=);
    background-size:133.33333333333% 85px;
    top:0;
    height:85px;
    z-index:1;
    transform:rotateX(180deg)
}
.insta_section_12.section_has_divider.insta_top_divider .insta_top_inside_divider{
    background-image:url(data:image/svg+xml;
    base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMjJweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxNDFjMjgiPjxwYXRoIGQ9Ik0xMjgwIDBsLTI2NiA5MS41MmE3Mi41OSA3Mi41OSAwIDAgMS0zMC43NiAzLjcxTDAgMHYxNDBoMTI4MHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMTI4MCAwbC0yNjIuMSAxMTYuMjZhNzMuMjkgNzMuMjkgMCAwIDEtMzkuMDkgNkwwIDB2MTQwaDEyODB6Ii8+PC9nPjwvc3ZnPg==);
    background-size:100% 260px;
    top:0;
    height:260px;
    z-index:1;
    transform:rotateX(180deg)
}
.insta_section_12.section_has_divider.insta_bottom_divider .insta_bottom_inside_divider{
    background-image:url(data:image/svg+xml;
    base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMxNDFjMjgiPjxwYXRoIGQ9Ik0xMjgwIDBsLTI2NiA5MS41MmE3Mi41OSA3Mi41OSAwIDAgMS0zMC43NiAzLjcxTDAgMHYxNDBoMTI4MHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMTI4MCAwbC0yNjIuMSAxMTYuMjZhNzMuMjkgNzMuMjkgMCAwIDEtMzkuMDkgNkwwIDB2MTQwaDEyODB6Ii8+PC9nPjwvc3ZnPg==);
    background-size:100% 200px;
    bottom:0;
    height:200px;
    z-index:1;
    transform:rotateY(180deg)
}
.insta_section_5.insta_section22{
    background-color:#141c28!important
}
.insta_section_12.insta_section{
    background-color:#078d5d!important
}
.insta_section_5.section_has_divider.insta_bottom_divider .insta_bottom_inside_divider{
    background-image:url(data:image/svg+xml;
    base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMwNzhkNWQiPjxwYXRoIGQ9Ik0wIDQ3LjQ0TDE3MCAwbDYyNi40OCA5NC44OUwxMTEwIDg3LjExbDE3MC0zOS42N1YxNDBIMFY0Ny40NHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCA5MC43MmwxNDAtMjguMjggMzE1LjUyIDI0LjE0TDc5Ni40OCA2NS44IDExNDAgMTA0Ljg5bDE0MC0xNC4xN1YxNDBIMFY5MC43MnoiLz48L2c+PC9zdmc+);
    background-size:100% 128px;
    bottom:0;
    height:99px;
    z-index:1
}
.insta_section_2.section_has_divider.insta_top_divider .insta_top_inside_divider{
    background-image:url(data:image/svg+xml;
    base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMjVweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMwMDAwMDAiPjxwYXRoIGQ9Ik0wIDUxLjc2YzM2LjIxLTIuMjUgNzcuNTctMy41OCAxMjYuNDItMy41OCAzMjAgMCAzMjAgNTcgNjQwIDU3IDI3MS4xNSAwIDMxMi41OC00MC45MSA1MTMuNTgtNTMuNFYwSDB6IiBmaWxsLW9wYWNpdHk9Ii4zIi8+PHBhdGggZD0iTTAgMjQuMzFjNDMuNDYtNS42OSA5NC41Ni05LjI1IDE1OC40Mi05LjI1IDMyMCAwIDMyMCA4OS4yNCA2NDAgODkuMjQgMjU2LjEzIDAgMzA3LjI4LTU3LjE2IDQ4MS41OC04MFYwSDB6IiBmaWxsLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0iTTAgMHYzLjRDMjguMiAxLjYgNTkuNC41OSA5NC40Mi41OWMzMjAgMCAzMjAgODQuMyA2NDAgODQuMyAyODUgMCAzMTYuMTctNjYuODUgNTQ1LjU4LTgxLjQ5VjB6Ii8+PC9nPjwvc3ZnPg==);
    background-size:100% 125px;
    top:0;
    height:125px;
    z-index:1
}
.checkmark{
    width:25px;
    height:25px;
    border-radius:50%;
    display:block;
    stroke-width:3;
    stroke:#fff;
    stroke-miterlimit:10;
    box-shadow:inset 0 0 0 var(--extra-color);
    animation:.4s ease-in-out .4s forwards fill,.3s ease-in-out .9s both scale
}
.checkmark__circle{
    stroke-dasharray:166;
    stroke-dashoffset:166;
    stroke-width:4;
    stroke-miterlimit:10;
    stroke:var(--extra-color);
    fill:none;
    animation:.6s cubic-bezier(.65,0,.45,1) forwards stroke
}
.checkmark__check{
    transform-origin:50% 50%;
    stroke-dasharray:48;
    stroke-dashoffset:48;
    animation:.3s cubic-bezier(.65,0,.45,1) .8s forwards stroke
}
@keyframes stroke{
    100%{
        stroke-dashoffset:0
    }
}
@keyframes scale{
    0%,100%{
        transform:none
    }
    50%{
        transform:scale3d(1.1,1.1,1)
    }
}
@keyframes fill{
    100%{
        box-shadow:inset 0 0 0 30px var(--extra-color)
    }
}
.containerasd{
    position:absolute;
    top:60%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center
}
#checkmarkasd path{
    stroke:var(--extra-color);
    stroke-width:10px;
    stroke-dasharray:1448.1546630859375;
    stroke-dashoffset:-1448.1546630859375;
    fill:transparent;
    transition:stroke-dashoffset .8s linear .4s,fill .4s
}
#checkmarkasd path.checked{
    fill:#fff;
    stroke-dashoffset:0px;
    transition:stroke-dashoffset .8s linear,fill .4s .8s
}
.swapDisplayBoxes{
    padding:10px;
    text-align:center;
    max-width:90px!important
}
#progressCircle,.autoSwapMobile,.autoSwapPC,.mapboxgl-marker svg,.rimpres,.seachSwapMobile,.seachSwapPC,.sellPairsPreview,input[type=checkbox]{
    display:none
}
.dpNone{
    display:none!important
}
.flex-center{
    width:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center
}
.customModal{
    color:#fff;
    width:550px;
    height:400px;
    z-index:999;
    padding:10px;
    background-color:#4f4f4f;
    box-shadow:0 0 10px 0 #000;
    overflow:auto;
    margin-top:auto;
    margin-bottom:auto;
    border-radius:10px
}
.infoPopUp,.infoPopUp:before{
    padding:5px;
    position:absolute
}
.infoPopUpOpen{
    z-index:999999!important;
    opacity:1!important
}
.infoPopUp{
    background-color:#fffffffa;
    border-radius:10px;
    width:400px;
    margin-left:20px;
    margin-top:-70px;
    min-height:200px;
    z-index:-1;
    opacity:0;
    border:2px solid #cab772;
    -webkit-transition:.2s ease-in-out;
    -moz-transition:.2s ease-in-out;
    -o-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.infoPopUp-note,.infoPopUp:before{
    background-color:#cab772;
    color:#fff;
    height:30px
}
.infoPopUp:before{
    content:"💬";
    width:30px;
    left:-18px;
    top:40%;
    font-size:15px;
    border-radius:50px
}
.infoPopUp-note{
    width:100%;
    font-size:20px;
    text-align:center;
    border-top-left-radius:7px;
    border-top-right-radius:7px
}
@media (max-width:1000px){
    .customModal{
        width:100%!important;
        height:400px
    }
    .customModal-close-container{
        width:90%!important
    }
    .customModal-shop-dam-add-form{
        width:95%!important
    }
}
.customModal-shop-dam-add-form{
    color:#fff;
    width:550px;
    height:400px;
    z-index:999;
    padding:10px;
    background-color:#450502;
    overflow:auto;
    position:absolute;
    margin-left:-10px
}
.customModal-shop-dam-close-button{
    height:40px;
    width:40px;
    cursor:pointer;
    border:1px solid var(--extra-color);
    background-color:#000;
    padding:5px 10px;
    color:#fff;
    border-radius:10px;
    font-size:20px;
    transition:background-color .2s!important;
    -o-transition:background-color .2s!important;
    -webkit-transition:background-color .2s;
    -moz-transition:background-color .2s!important;
    -ms-transition:background-color .2s!important
}
.customModal-shop-dam-close-button:hover,.progress-bar{
    background-color:var(--extra-color)
}
.customModal-shop-dam,textarea.customModal-shop-dam:hover{
    background-color:#000
}
#customAddShift>div>div.row>div:nth-child(5),#customAddShift>div>div.row>div:nth-child(6){
    width:45%
}
.customModal-shop-dam{
    text-align:center;
    height:45px;
    cursor:pointer;
    border:1px solid var(--extra-color);
    padding:10px;
    width:100%;
    margin:5px 2.5%;
    border-radius:10px;
    font-size:15px;
    transition:background-color .2s!important;
    -o-transition:background-color .2s!important;
    -webkit-transition:background-color .2s;
    -moz-transition:background-color .2s!important;
    -ms-transition:background-color .2s!important
}
.customModal-shop-dam:hover{
    background-color:var(--extra-color) 69
}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0
}
input[type=number]{
    -moz-appearance:textfield
}
::-webkit-calendar-picker-indicator{
    filter:invert(1)
}
.customModal-shop-dam:hover .selectedNetwork{
    background-color:#000;
    border-radius:60px;
    width:31px;
    height:30px;
    padding-left:2px
}
.customModal-header{
    text-align:center;
    font-size:20px;
    margin-bottom:20px;
    margin-top:5px
}
#customAddShift{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    background-color:#00000061;
    z-index:9999;
    top:0
}
.customModal-close-container{
    position:relative;
    width:400px;
    display:flex;
    justify-content:flex-end;
    top:-60px;
    margin-left:10px
}
.customModal-close-container2{
    width:10%;
    height:40px;
    text-align:end
}
.customModal-back-container{
    width:10%;
    height:40px
}
.customModal-back-container3{
    width:80%;
    height:40px;
    font-size:20px;
    text-align:center
}
.pairsFiatProvider{
    padding:10px;
    border-radius:5px;
    margin-top:10px;
    border:1px solid var(--main-color);
    cursor:pointer
}
.badge-danger,.badge-primary,.badge-warning,.label-danger,.label-primary,.label-warning{
    height:40px;
    float:left;
    font-size:12px!important;
    padding-top:14px;
    min-width:120px;
    color:#fff;
    text-align:center
}
.sellPairs{
    background-color:#416179
}
.buyPairs{
    background-color:#30966c
}
.buyPairs:hover,.sellPairs:hover{
    background-color:#30966c!important
}
#map,.clasemineContent,.swapResp{
    border-radius:10px
}
.badge-primary,.label-primary{
    background-color:#1ab394
}
.badge-warning,.label-warning{
    background-color:#f8ac59
}
.badge-danger,.label-danger{
    background-color:#ed5565
}
.main-icon i,.modalIcon{
    font-size:40px
}
.badge-success,.label-success{
    color:#fff;
    text-align:center
}
.toggle{
    position:relative;
    top:0;
    bottom:0;
    right:9px;
    margin:auto;
    width:51px;
    height:31px
}
#button-container,#progressCircle,.graphSpinner,.modalIcon,.nav-btn,.owl-carousel .owl-nav,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev,.profile-icon,.toggle i{
    position:absolute
}
.toggle i,.toggle label{
    box-sizing:border-box;
    display:block;
    background:#fff
}
.toggle label{
    width:51px;
    height:32px;
    border-radius:32px;
    border:2px solid #e5e5e5;
    transition:.3s
}
.activateCoin,.toggle i{
    transition:.3s cubic-bezier(.275, -.45, .725, 1.45)
}
.toggle i{
    top:2px;
    left:2px;
    width:28px;
    height:28px;
    border-radius:28px;
    box-shadow:0 0 1px 0 rgba(0,0,0,.25),0 3px 3px 0 rgba(0,0,0,.15);
    background:#fff
}
.freeAppointment,.freeAppointment2,.lang-dropdown{
    -webkit-transition:.1s ease-in-out;
    -moz-transition:.1s ease-in-out;
    -o-transition:.1s ease-in-out
}
input[type=checkbox]:active+.toggle i{
    width:35px
}
input[type=checkbox]:active+.toggle label,input[type=checkbox]:checked+.toggle label{
    border:16px solid #4cd964
}
input[type=checkbox]:checked+.toggle .activateCoin{
    background-color:#99ff6f
}
input[type=checkbox]:checked+.toggle i{
    left:21px
}
input[type=checkbox]:checked:active+.toggle label{
    border:16px solid #e5e5e5
}
input[type=checkbox]:checked:active+.toggle i{
    left:14px
}
.checked{
    background-color:#00d02278!important
}
.newLoaderContainer{
    background-color:var(--secondary-color);
    min-height:600px
}
@media (max-width:700px){

    .responMesagCont{
        margin-left: 15px;
        margin-right: 15px;
    }
    .customShareCont > .customButton > .fa{
        font-size: 15px!important;
    }
    .customShareCont{
        flex-direction: row!important;
        flex-wrap: wrap!important;
        align-content: center!important;
        justify-content: space-around!important;
        align-items: center!important;
    }

    .workerDisp{
        top:15px!important
    }
    .impres,.modalIcon{
        display:none!important
    }
    .rimpres{
        display:block!important
    }
    .customMobileFunc{
        width:50%!important;
        font-size:9px
    }
    .changeSize,.graphSpinner{
        width:100%!important
    }
    .col-lg-12>.customMobileFunc{
        padding-right:0
    }
    .customMobileFunc>.col-lg-12{
        width:79%!important
    }
    .mobilePaddingRemove,.swapResp,.swapResp2{
        padding:0!important
    }
    .contentCustom{
        min-height:85px!important;
        background-position:109px 0!important;
        background-size:110%!important
    }
    #searchBySelected,#searchBySelected2,#searchType{
        height:40px!important
    }
    .newLoaderContainer{
        min-height:300px!important
    }
    .graphSpinner{
        left:0!important;
        top:139px!important
    }
    .clasemineContent{
        background-color:var(--secondary-color)!important;
        margin-left:-15px!important
    }
    #searchOnDb{
        height:60px!important;
        margin-bottom:0!important
    }
    .breadcrumb{
        background-color:#ffffff00!important
    }
    #searchType{
        width:100%;
        border:0;
        padding:10px!important
    }
    .newModal{
        height:100%!important;
        border-radius:0!important
    }
    .changeSize2{
        width:75%!important
    }
    .logoutIcon{
        right:20px!important
    }
}
.changeSize,.changeSize2{
    width:80%
}
.modalIcon{
    margin-right:0;
    background-color:var(--extra-color);
    width:80px;
    border-radius:80px;
    height:80px;
    margin-left:-40px;
    margin-top:-40px;
    padding:22px;
    color:#fff
}
.unfinished{
    margin-top:45px
}
.chosen-container-active .chosen-single{
    border:none!important;
    background-color:var(--extra-color)!important;
    width:100%;
    margin-top:10px
}
.chosen-container-single .chosen-single{
    background-color:var(--extra-color) 00!important;
    border:none!important;
    color:#fff!important
}
.chosen-container .chosen-drop{
    background:#000!important;
    border:1px solid var(--extra-color)!important
}
.chosen-container-single .chosen-search input[type=text]{
    background:url(plugins/chosen/chosen-sprite.png) 100% -20px no-repeat,#000!important;
    color:#fff!important;
    border:1px solid #e5e6e7!important
}
.chosen-container .chosen-results li.highlighted,.mapboxgl-ctrl-compass,.mapboxgl-ctrl-zoom-in,.mapboxgl-ctrl-zoom-out,.sweet-alert button{
    background-color:var(--extra-color)!important
}
.chosen-single{
    width:100%!important;
    margin-top:-10px!important;
    padding-top:10px!important
}
.chosen-container-multi .chosen-choices{
    background-color:#fff0!important;
    border:none!important;
    border-radius:0!important
}
.chosen-container-multi .chosen-choices li.search-choice,.chosen-container-multi .chosen-choices li.search-choice2{
    background:var(--extra-color);
    border:1px solid var(--extra-color);
    border-radius:5px;
    box-shadow:none;
    color:#fff;
    cursor:default;
    line-height:13px;
    margin:3px 0 3px 5px;
    padding:3px 20px 3px 5px;
    position:relative
}
.chosen-container .chosen-results li.active-result{
    color:#fff!important
}
.takis{
    background-color:var(--secondary-color)!important;
    border:none!important;
    margin-bottom:5px;
    font-size:16px!important
}
.businessHoursToday{
    background-color:var(--hovering-color);
    border:1px solid var(--hovering-color);
    padding:5px;
    border-radius:5px
}
.freeAppointment,.freeAppointment2{
    width:100%;
    text-align:center;
    padding:10px;
    background-color:var(--main-color);
    border:1px solid #7b7b7b70;
    transition:.1s ease-in-out
}
.freeAppointment2:hover,.freeAppointment:hover{
    cursor:pointer;
    border:1px solid var(--extra-color)!important
}
.staticContainer{
    min-height:100px
}
.reservedAppointment,.reservedAppointment2{
    color:#7b7b7b70;
    width:100%;
    text-align:center;
    padding:10px;
    background-color:var(--main-color)
}
.fc-day-disabled{
    height:60px;
    background-color:var(--main-color)!important
}
.fc-day-today.fc-daygrid-day-number.fc-daygrid-day-top.fc-daygrid-day-frame{
    cursor:pointer!important
}
.graphSpinner{
    display:none;
    width:97%;
    height:82%;
    background-color:var(--main-color);
    z-index:10;
    left:15px;
    top:109px;
    border-radius:10px
}
#removeTitle,.clock,.lang-selector,.acc-selector,.loader,section{
    position:relative
}
.sk-spinner{
    margin-top:auto!important;
    margin-bottom:auto!important
}
*,:after,:before{
    margin:0;
    padding:0
}
:root{
    --length-view:-10% -10%,30% -10%,50% 50%,120% -10%,110% -10%,110% 110%,-10% 110%;
    --primary-color:var(--extra-colordark);
    --shadow-color:var(--secondary-color);
    --clock-color:#212121;
    --s-animation-time:10s;
    --m-animation-time:60s;
    --h-animation-time:20s;
    --s-rotate-time:60s;
    --m-rotate-time:3600s;
    --h-rotate-time:43200s;
    --s-rotate-from:0deg;
    --m-rotate-from:0deg;
    --h-rotate-from:0deg;
    --s-rotate-to:0deg;
    --m-rotate-to:0deg;
    --h-rotate-to:0deg
}
section{
    display:flex;
    align-items:center;
    justify-content:center
}
section.animation:before,section.working:before{
    font-size:1rem;
    color:var(--primary-color);
    position:absolute
}
.clock,.clock-center,.clock-top,.hours-pointer{
    border-radius:50%
}
.clock{
    height:200px;
    width:200px;
    min-height:200px;
    min-width:200px;
    padding:40px 0 0 31px;
    background-color:var(--clock-color);
    box-shadow:1rem 0 2rem .5rem var(--shadow-color);
    -webkit-box-shadow:1rem 0 2rem .5rem var(--shadow-color);
    -moz-box-shadow:1rem 0 2rem .5rem var(--shadow-color)
}
.clock-center{
    background-color:var(--primary-color);
    box-shadow:.4rem 0 .8rem 0 var(--shadow-color);
    -webkit-box-shadow:.4rem 0 .8rem 0 var(--shadow-color);
    -moz-box-shadow:.4rem 0 .8rem 0 var(--shadow-color);
    display:grid;
    grid-template-rows:repeat(7,1fr);
    grid-template-columns:repeat(7,1fr);
    grid-template-areas:". . . n12 . . ." ". . n11 . n1 . ." ". n10 . . . n2 ." "n9 . . . . . n3" ". n8 . . . n4 ." ". . n7 . n5 . ." ". . . n6 . . .";
    width:180px;
    height:180px;
    margin-left:-22px;
    margin-top:-32px
}
.number{
    font-size:1rem;
    color:var(--clock-color);
    line-height:1;
    align-self:center;
    justify-self:center
}
.number-1{
    grid-area:n1;
    justify-self:end;
    align-self:start
}
.number-2{
    grid-area:n2;
    justify-self:end;
    align-self:start
}
.number-3{
    grid-area:n3;
    justify-self:start
}
.number-4{
    grid-area:n4;
    justify-self:end;
    align-self:end
}
.number-5{
    grid-area:n5;
    justify-self:end;
    align-self:end
}
.number-6{
    grid-area:n6;
    align-self:start
}
.number-7{
    grid-area:n7;
    justify-self:start;
    align-self:end
}
.number-8{
    grid-area:n8;
    justify-self:start;
    align-self:end
}
.number-9{
    grid-area:n9;
    justify-self:end
}
.number-10{
    grid-area:n10;
    justify-self:start;
    align-self:start
}
.number-11{
    grid-area:n11;
    justify-self:start;
    align-self:start
}
.number-12{
    grid-area:n12;
    align-self:end
}
.clock-top,.hours-container,.hours-pointer{
    height:100%;
    width:100%
}
.clock-top{
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center
}
.hours-container{
    position:relative;
    z-index:1;
    filter:drop-shadow(.1rem 0 .6rem var(--shadow-color));
    -webkit-filter:drop-shadow(0.1rem 0 0.6rem var(--shadow-color))
}
.hours-pointer{
    background-color:#212121c2;
    clip-path:polygon(var(--length-view));
    -webkit-clip-path:polygon(var(--length-view))
}
.sec-container:before,.sec-min-container{
    position:absolute;
    border-radius:50%;
    background-color:var(--clock-color);
    z-index:2
}
.sec-min-container{
    height:3rem;
    width:3rem;
    box-shadow:0 .1rem 1rem .1rem var(--shadow-color);
    -webkit-box-shadow:0 .1rem 1rem .1rem var(--shadow-color);
    -moz-box-shadow:0 .1rem 1rem .1rem var(--shadow-color)
}
.min-container,.sec-container{
    position:absolute;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#0b9062;
    border-radius:100%;
    width:80px;
    height:80px;
    left:-17px;
    top:-18px;
    font-size:30px;
    filter:drop-shadow(.1rem 0 .6rem var(--shadow-color));
    -webkit-filter:drop-shadow(0.1rem 0 0.6rem var(--shadow-color))
}
.sec-pointer{
    position:absolute;
    bottom:-1.6rem;
    height:10rem;
    width:.2rem;
    border-radius:.1rem;
    background-color:var(--primary-color);
    box-shadow:0 .1rem 1rem .1rem var(--shadow-color);
    -webkit-box-shadow:0 .1rem 1rem .1rem var(--shadow-color);
    -moz-box-shadow:0 .1rem 1rem .1rem var(--shadow-color);
    z-index:0
}
.sec-container:before{
    content:"";
    height:.4rem;
    width:.4rem
}
.min-pointer,.sec-container:after{
    background-color:#fff;
    position:absolute
}
.sec-container:after{
    content:"";
    height:1.2rem;
    width:1.2rem;
    border:.2rem solid var(--primary-color);
    border-radius:50%;
    z-index:1
}
.min-pointer{
    bottom:-1.5rem;
    height:14rem;
    width:.2rem;
    border-radius:.15rem;
    box-shadow:.4rem .1rem .8rem .1rem var(--shadow-color);
    -webkit-box-shadow:.4rem .1rem .8rem .1rem var(--shadow-color);
    -moz-box-shadow:.4rem .1rem .8rem .1rem var(--shadow-color);
    z-index:0
}
.animation .sec-container{
    animation:animate-seconds var(--s-animation-time) infinite linear;
    -o-animation:animate-seconds var(--s-animation-time) infinite linear;
    -webkit-animation:animate-seconds var(--s-animation-time) infinite linear
}
.animation .min-container{
    animation:animate-pointers var(--m-animation-time) infinite linear;
    -o-animation:animate-pointers var(--m-animation-time) infinite linear;
    -webkit-animation:animate-pointers var(--m-animation-time) infinite linear
}
.animation .hours-pointer{
    animation:animate-pointers var(--h-animation-time) infinite linear;
    -o-animation:animate-pointers var(--h-animation-time) infinite linear;
    -webkit-animation:animate-pointers var(--h-animation-time) infinite linear
}
@keyframes animate-seconds{
    0%,100%{
        transform:rotateZ(0)
    }
    90%{
        transform:rotateZ(360deg)
    }
}
@keyframes animate-pointers{
    to{
        transform:rotateZ(360deg)
    }
}
.working .sec-container{
    transform:rotateZ(var(--s-rotate-from));
    animation:rotate-seconds var(--s-rotate-time) infinite linear;
    -o-animation:rotate-seconds var(--s-rotate-time) infinite linear;
    -webkit-animation:rotate-seconds var(--s-rotate-time) infinite linear
}
.working .min-container{
    transform:rotateZ(var(--m-rotate-from));
    animation:rotate-minutes var(--m-rotate-time) infinite linear;
    -o-animation:rotate-minutes var(--m-rotate-time) infinite linear;
    -webkit-animation:rotate-minutes var(--m-rotate-time) infinite linear
}
.working .hours-pointer{
    transform:rotateZ(var(--h-rotate-from));
    animation:rotate-hours var(--h-rotate-time) infinite linear;
    -o-animation:rotate-hours var(--h-rotate-time) infinite linear;
    -webkit-animation:rotate-hours var(--h-rotate-time) infinite linear
}
@keyframes rotate-seconds{
    from{
        transform:rotateZ(var(--s-rotate-from))
    }
    to{
        transform:rotateZ(var(--s-rotate-to))
    }
}
@keyframes rotate-minutes{
    from{
        transform:rotateZ(var(--m-rotate-from))
    }
    to{
        transform:rotateZ(var(--m-rotate-to))
    }
}
@keyframes rotate-hours{
    from{
        transform:rotateZ(var(--h-rotate-from))
    }
    to{
        transform:rotateZ(var(--h-rotate-to))
    }
}
@-webkit-keyframes checkmark{
    0%{
        stroke-dashoffset:50px
    }
    100%{
        stroke-dashoffset:0
    }
}
@-ms-keyframes checkmark{
    0%{
        stroke-dashoffset:50px
    }
    100%{
        stroke-dashoffset:0
    }
}
@keyframes checkmark{
    0%{
        stroke-dashoffset:50px
    }
    100%{
        stroke-dashoffset:0
    }
}
@-webkit-keyframes checkmark-circle{
    0%{
        stroke-dashoffset:240px
    }
    100%{
        stroke-dashoffset:480px
    }
}
@-ms-keyframes checkmark-circle{
    0%{
        stroke-dashoffset:240px
    }
    100%{
        stroke-dashoffset:480px
    }
}
@keyframes checkmark-circle{
    0%{
        stroke-dashoffset:240px
    }
    100%{
        stroke-dashoffset:480px
    }
}
.inlinesvg .svg svg{
    display:inline
}
.icon--order-success svg path{
    -webkit-animation:.25s ease-in-out .5s backwards checkmark;
    animation:.25s ease-in-out .5s backwards checkmark
}
.icon--order-success svg circle{
    -webkit-animation:.6s ease-in-out .2s backwards checkmark-circle;
    animation:.6s ease-in-out .2s backwards checkmark-circle
}
@media (max-width:700px){
    #wrapper{
        padding-bottom:70px
    }
    .stepper{
        margin-left:auto!important;
        margin-right:auto!important
    }
    .checkboxDisplay{
        width:15%
    }
    .serviceDisplay{
        width:65%
    }
    .iconDisplay{
        width:20%;
        padding:0;
        margin-top:auto;
        margin-bottom:auto
    }
    .iconDisplayTypes{
        padding:0;
        font-size:35px;
        width:60px!important;
        height:60px;
        border-radius:100%;
        display:flex
    }
    .iconDisplay image{
        width:100%!important;
        height:100%!important
    }
    #bookAppointment{
        padding:20px 0 0
    }
    .serviceType{
        margin-left:0;
        margin-bottom:10px!important;
        padding:10px!important
    }
    .serviceNameText{
        font-size:16px!important
    }
    .buttonMaxim{
        top:12px!important
    }
    .selectedServices{
        margin-left:30px;
        margin-top:10px
    }
    .mobileFixOnTimePreviewCont{
        text-align:right!important;
        margin-top:-35px!important;
        margin-left:-10px!important
    }
    .freeAppointmentCont{
        padding:20px!important;
        border-radius:10px!important;
        margin-left:0!important
    }
    .apointmentTimeInfo{
        display:block!important
    }
    .finalServiceContainer{
        margin-left:10px
    }
    .clock{
        height:160px!important;
        width:160px!important;
        min-height:160px!important;
        min-width:160px!important;
        box-shadow:.5rem 0 1rem -.5rem var(--shadow-color)!important;
        -webkit-box-shadow:.5rem 0 1rem -.5rem var(--shadow-color)!important
    }
    .clock-center{
        width:150px!important;
        height:150px!important;
        margin-left:-25px!important;
        margin-top:-35px!important
    }
    .working{
        margin-left:160px;
        margin-top:-110px
    }
    .min-container{
        font-size:25px!important;
        width:60px!important;
        height:60px!important;
        left:-7px!important;
        top:-4px!important
    }
}
.businessIcon,.customServicesPreviewScreen{
    background-size:contain;
    background-repeat:no-repeat
}
#removeTitle,.apointmentTimeInfo,.branding,.icon{
    text-align:center
}
.apointmentTimeInfo,.freeAppointmentCont{
    border-radius:10px;
    background-color:var(--main-color)
}
.finalMessageFix{
    margin-bottom:-50px!important;
    padding-bottom:70px!important;
    border-top-left-radius:10px;
    border-top-right-radius:10px
}
.pricePreviewCont,.timePreviewCont{
    font-size:15px;
    margin-left:auto;
    margin-top:auto;
    margin-bottom:auto
}
.apointmentTimeInfo{
    display:none;
    width:100%;
    height:30px;
    margin:10px 0;
    font-size:18px
}
#selected-lang-img-cont,#sosWrapper div,.apointmentTimeInfo span,.icon i,.loader{
    margin:auto
}
.freeAppointmentCont{
    padding:5px!important;
    min-height:500px;
    margin-left:8%
}
.footer{
    position:inherit;
    width:100%;
    height:40px
}
.requiredInput{
    border:1px solid #639!important
}
.loader{
    width:48px;
    height:48px;
    border:3px solid #1d1d1d;
    border-radius:50%;
    display:inline-block;
    animation:1s linear infinite rotation
}
.loader::after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:56px;
    height:56px;
    border-radius:50%;
    border:3px solid transparent;
    border-bottom-color:var(--extra-color)
}
@keyframes rotation{
    0%{
        transform:rotate(0)
    }
    100%{
        transform:rotate(360deg)
    }
}
.lang-selector{
    width:40px;
    height:40px;
    display:flex
}
.acc-selector{
    width:40px;
    height:40px;
    display:flex
}
.lang-flag{
    width:30px;
    height:30px;
    border-radius:100%
}
.lang-dropdown{
    background-color: var(--main-color);
    border: 1px solid var(--secondary-color);
    border-right: 2px solid #0a7048;
    width: 170px;
    height: 0px;
    font-size: 16px;
    transition: .1s ease-in-out;
    overflow: hidden;
}
.lang-custom-selector-active{
    top: 70px !important;
}
.lang-custom-selector{
    -webkit-transition: all.1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}
.lang-option{
    padding:15px 15px 20px;
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    color:#fff
}
.isSos,.isSosDisabled{
    margin-bottom:10px;
    padding:5px
}
#installModalContent,#suggestionList,.lang-option:hover,.loaderCont{
    background-color:var(--secondary-color)
}
#removeTitle,.barberIcon,.bottom-menu,.businessIcon,.customButtonDisabled,.langCont,.sosBadge{
    background-color:var(--main-color);
    border-radius: 100%;
}
.selected-lang-img{
    width:35px;
    height:35px;
    border:2px solid #f5f5f5;
    border-radius:100%
}
.langCont{
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
}

.accCont{
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
}
#removeTitle{
    width:100%;
    padding:10px;
    -webkit-box-shadow:0 3px 20px -5px #00000085;
    box-shadow:0 3px 20px -5px #00000085;
    z-index:1
}
.isSos{
    border:1px dashed #ff8c00;
    -webkit-transition:.2s ease-in-out;
    -moz-transition:.2s ease-in-out;
    -o-transition:.2s ease-in-out;
    transition:.2s ease-in-out
}
.isSosDisabled{
    border:1px dashed #ff8c0066
}
.isSosDisabled>.sosBadge{
    color:#ff8c0066!important
}
.sosBadge{
    position:absolute;
    margin-top:-6px;
    margin-left:-6px;
    color:#ff8c00;
    padding-right:6px;
    padding-left:6px;
    border-bottom-right-radius:5px;
    border:1px solid
}
.selectedSos{
    border:1px dashed var(--extra-color)!important
}
.barberIcon,.businessIcon{
    width:90px;
    height:90px;
    border-radius:100%;
    padding:3px
}
.selectedSos>.sosBadge{
    color:var(--extra-color)!important
}
.businessIcon{
    background-image:url(../../../images/branding/logo);
    background-position:center
}
.customServicesPreviewScreen{
    padding:10px;
    border-bottom:3px dashed var(--main-color);
    background-position:right 0;
    border-top-right-radius:10px
}
.customDateTimePreviewScreen{
    font-size:12px;
    margin-top:10px;
    border-bottom:3px dashed #2d2d2d
}
#button-container i,.icon{
    font-size:30px
}
.customDateTimePreviewScreen h2{
    text-align:center;
    color:var(--extra-color)
}
.shine-effect{
    position:relative;
    overflow:hidden;
    border-radius:10px;
    padding:5px
}
.shine-effect::before{
    content:"";
    position:absolute;
    top:0;
    margin-left:15px;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 30%,rgba(255,255,255,0) 70%);
    transform:skewX(-30deg);
    animation:1s linear forwards shine
}
@keyframes shine{
    0%{
        left:-100%
    }
    100%{
        left:100%
    }
}
.freeAppointment>.freeAppointment{
    border:0!important;
    padding:0;
    background-color:var(--main-color) 00
}
.customButton,.customButton:hover{
    background-color:var(--extra-color);
    color:#fff
}
.nextStepButton,.nextStepButtonDisabled,.prevStepButton,.prevStepButtonDisabled{
    width:48%;
    height:40px;
    border-radius:10px;
    margin-left:auto;
    margin-right:auto
}
.customButton,.customButtonDisabled{
    -webkit-appearance:none;
    border:none;
    width:48%;
    position:relative
}
.customButton{
    z-index:1;
    border-radius: 8px;
}
.customButton:hover{
    cursor:pointer
}
.customButtonDisabled{
    color:grey
}
.customButtonDisabled:hover{
    cursor:not-allowed;
    background-color:var(--main-color) c7
}
.bottom-menu{
    display:flex;
    justify-content:space-around;
    position:fixed;
    bottom:0;
    width:100%;
    padding:10px 0 0;
    z-index:999;
    margin-bottom:0;
    height:60px;
    -webkit-box-shadow:0 3px 20px -5px #00000099;
    box-shadow:0 3px 20px -5px #00000099;
    -webkit-transition:.2s ease-in;
    -moz-transition:.2s ease-in;
    -o-transition:.2s ease-in;
    transition:.2s ease-in
}
.icon--order-success{
    background-color:var(--secondary-color)!important
}
.icon,.main-icon{
    background-color:var(--main-color);
    display:flex
}
.icon{
    width:22%;
    -webkit-transition:.1s ease-in;
    -moz-transition:.1s ease-in;
    -o-transition:.1s ease-in;
    transition:.1s ease-in;
    margin-top:-7px
}
.main-icon{
    width:20%;
    height:70px;
    border-radius:30%;
    color:#fff;
    align-items:center;
    justify-content:center;
    margin-top:-26px;
    border-top:4px solid var(--extra-color);
    z-index:1
}
#button-container,.iconActive,.line,.ptr--ptr{
    background-color:var(--extra-color)!important;
}
#ptr-loader,.iti__country-list,button.customButton.disabled{
    background-color:var(--main-color)!important
}
.line{
    position:absolute;
    width:100%;
    height:2px;
    top:0;
    z-index:-1
}
.iconActive{
    margin-top:-9px;
    box-shadow:0 3px 10px rgb(24 24 24);
    border-radius:0
}
.controlsDownBar{
    position:fixed!important;
    display:flex!important;
    justify-content:space-around;
    bottom:70px;
    left:15px;
    width:100%;
    z-index:999;
    margin-bottom:0;
    height:50px
}
.buttonsContainer{
    bottom:60px;
    width:100%;
    z-index:100;
    display:flex;
    height:50px;
    position:fixed;
    -webkit-transition:.2s ease-in;
    -moz-transition:.2s ease-in;
    -o-transition:.2s ease-in;
    transition:.2s ease-in
}
.w-100ma{
    WIDTH:100%;
    margin-left:20px;
    margin-right:20px;
    min-height:40px;
    display:none
}
.branding{
    height:20px;
    font-size:12px;
    width:100%;
    opacity:.5;
    display:none
}
.appScreens{
    margin-bottom:10px;
    display:none
}
.main-icon.iconActive>i{
    margin-top:7px
}
.login-box{
    padding:0;
    width: 250px;
}

.extraLoggedoutUserBox{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.social-button{
    background-position:25px 0;
    color:#fff;
    display:inline-block;
    height:50px;
    line-height:50px;
    text-align:left;
    vertical-align:middle;
    width:100%;
    border-radius:10px;
    margin:10px auto;
    padding-left:70px;
    transition:.3s;
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s
}
#facebook-connect span,#mail-signin span{
    box-sizing:border-box;
    border:0 #fff;
    text-align:center;
    cursor:pointer
}
#installModalContent,.previewBox-user-cal{
    display:flex;
    padding:20px
}
#installModal,#sosWrapper{
    display:none;
    left:0;
    top:0
}
#google-signin span,#twitter-connect span{
    box-sizing:border-box;
    border:0 #dc4a3d;
    text-align:center;
    cursor:pointer
}
#facebook-connect{
    background:url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/facebook.svg?sanitize=true') 5px 0/30px 50px no-repeat;
    border:1px solid #3c5a9a
}
#facebook-connect:hover{
    border-color: #3c5a9a;
    background: url(https://raw.githubusercontent.com/eswarasai/social-login/master/img/facebook-white.svg?sanitize=true) 5px 0 / 30px 50px no-repeat;
    -webkit-transition: .8s ease-out;
    transition: .3s ease-out;
    background-color: #3c5a9a;
}
#facebook-connect span{
    color:#3c5a9a;
    -webkit-transition:.3s;
    transition:.3s
}
#google-signin:hover span,#mail-signin:hover span,#twitter-connect:hover span{
    color:#1d1d1d;
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
    transition:.3s
}

#facebook-connect:hover span{
    color:#fff;
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
    transition:.3s
}
#facebook-connect span,#facebook-connect:hover,#google-signin span,#twitter-connect:hover{
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s
}
#mail-signin{
    background-color:#fff0;
    border:1px solid #1d1d1d
}
#mail-signin:hover{
    border-color:#fff;
    -webkit-transition:.8s ease-out;
    transition:.3s ease-out;
    color:#1d1d1d;
}
#mail-signin span{
    color:#1d1d1d;
    -webkit-transition:.3s;
    transition:.3s
}
#google-signin{
    background:url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/google-plus.png') 5px 0/50px 50px no-repeat;
    border:1px solid #dc4a3d
}
#google-signin:hover{
    border-color:#dc4a3d;
    background:url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/google-plus-white.png') 5px 0/50px 50px no-repeat #dc4a3d;
    -webkit-transition:.8s ease-out;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
    transition:.3s ease-out
}
#google-signin span{
    color:#dc4a3d;
    -webkit-transition:.3s;
    transition:.3s
}
#twitter-connect{
    background:url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/twitter.png') 5px 1px/45px 45px no-repeat;
    border:1px solid #55acee
}
#twitter-connect:hover{
    border-color:#55acee;
    background:url('https://raw.githubusercontent.com/eswarasai/social-login/master/img/twitter-white.png') 5px 1px/45px 45px no-repeat;
    -webkit-transition:.8s ease-out;
    transition:.3s ease-out
}
#twitter-connect span{
    color:#55acee;
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
    transition:.3s
}
#socialForm{
    opacity:1;
    -webkit-transition:opacity .3s;
    -moz-transition:opacity .3s;
    -ms-transition:opacity .3s;
    -o-transition:opacity .3s;
    transition:opacity .3s
}
.checkoutLabel{
    margin-bottom:-5px;
    background-color:#2d2d2d;
    padding-left:5px;
    padding-right:5px;
    margin-left:10px
}
.loaderCont{
    height: 150px;
    position: absolute;
    border-radius: 8px !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    z-index: 9;
    background-color: white;
}
.invalidInput,.invalidInput2{
    top:-9px;
    background-color:var(--main-color);
    padding:0 5px;
    position:absolute;
    z-index:1;
    right:20px
}
.invalidInput{
    color:red
}
.invalidInput2{
    color:#ff8c00
}
button.customButton.disabled{
    color:grey;
    cursor:not-allowed
}
#secScren{
    box-shadow:0 0 40px -20px #000;
    margin:0;
    min-height:150px
}
#sosWrapper{
    position:absolute;
    width:100%;
    height:95vh;
    background-color:#1d1d1d;
    z-index:9999
}
#sosWrapper img{
    width:135px;
    height:135px;
    border-radius:100%;
    position:absolute;
    left:0;
    top:0
}
.call-animation{
    background:#fff;
    width:145px;
    height:144px;
    position:relative;
    margin:0 auto;
    border-radius:100%;
    border:5px solid #fff;
    animation:2s infinite play;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    backface-visibility:hidden
}
.previewBox-user,.previewBox-user-cal{
    border-radius:10px;
    margin:5px;
    opacity:.8;
    width:100%;
    padding-top:10px;
    padding-bottom:10px
}
@keyframes play{
    0%{
        transform:scale(1)
    }
    15%{
        box-shadow:0 0 0 5px rgba(255,255,255,.4)
    }
    25%{
        box-shadow:0 0 0 10px rgba(255,255,255,.4),0 0 0 20px rgba(255,255,255,.2);
        box-shadow:0 0 0 15px rgba(255,255,255,.4),0 0 0 30px rgba(255,255,255,.2)
    }
}
body.stop-scrolling-ed{
    height:100%
}
.minimizeH{
    height:0!important
}
.previewContDateTime{
    border-bottom:3px dashed #2d2d2d;
    font-size:15px;
    text-align:center;
    padding-top:13px;
    height:auto
}
@keyframes blink{
    0%,100%,50%{
        border-color:var(--extra-color)
    }
    25%,75%{
        border-color:transparent
    }
}
.blink-border{
    border:1px solid;
    animation:5s linear infinite blink
}
.item{
    background:var(--secondary-color);
    color:#fff;
    border-radius:3px;
    text-align:center
}
.owl-carousel .item img{
    width:100%;
    height:260px;
    object-fit:cover
}
.owl-carousel .owl-nav{
    top:10px;
    width:100%
}
.owl-carousel .owl-nav .owl-prev{
    left:10px
}
.owl-carousel .owl-nav .owl-next{
    right:10px
}
.nav-btn{
    color:#f5f5f5;
    width:40px;
    height:40px;
    top:-6px;
    left:0;
    margin:0;
    padding:0
}
#notInterestedBtn,.toastr-customIcon{
    margin-top:auto;
    margin-bottom:auto
}
.owl-carousel .owl-dots{
    position:absolute;
    bottom:10px;
    right:30px
}
.owl-carousel .owl-dot{
    display:inline-block;
    margin:0 5px;
    background-color:#fff;
    width:10px;
    height:10px;
    border-radius:50%;
    opacity:.5
}
.owl-carousel .owl-dot.active{
    opacity:1
}
.profile-icon{
    width:70px;
    top:-110px;
    z-index:2;
    left:20px
}
#button-container{
    display:grid;
    text-align:center;
    width:80px;
    top:0;
    z-index:1;
    padding:10px;
    border-bottom-right-radius:10px;
    border-top-left-radius:10px;
    cursor:pointer
}
#storeMap{
    height:160px;
    border-radius:11px
}
#progressCirclePath{
    fill:none;
    stroke:var(--extra-color);
    stroke-width:10;
    stroke-linecap:round;
    stroke-dasharray:282.7433;
    stroke-dashoffset:282.7433;
    animation:.2s linear progress;
    transform-origin:center
}
@keyframes progress{
    0%{
        stroke-dashoffset:282.7433
    }
    100%{
        stroke-dashoffset:0
    }
}
.mapboxgl-marker{
    background-image:url(../images/marker-big.png);
    width:40px;
    height:40px;
    background-repeat:no-repeat;
    background-size:contain
}
#suggestionList{
    width:100%;
    display:block;
    overflow:auto
}
#suggestionList a{
    color:#fff;
    font-size:15px;
    padding:10px
}
.toastr-customIcon{
    position:relative;
    left:-33px;
    top:-13px;
    height:0
}
.toastr-customIcon img{
    width:20px;
    height:20px;
    border-radius:100%;
    border:1px solid #f5f5f5
}
.toastrCustom{
    display:flex;
    width:100%!important;
    background-color:#66339921!important;
    font-style:italic!important;
    -moz-box-shadow:0 0 12px #999!important;
    -webkit-box-shadow:0 0 12px #999!important;
    box-shadow:0 0 12px #663399b5!important
}
#installModal{
    position:fixed;
    z-index:1;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:rgba(0,0,0,.7)
}
#installModalContent{
    margin:0 auto;
    border:1px solid var(--extra-color);
    width:80%;
    position:relative;
    top:-100%;
    animation:.7s forwards slideDown;
    border-radius:10px;
    flex-wrap:wrap;
    justify-content:space-around
}
@keyframes slideDown{
    0%{
        top:-100%
    }
    100%{
        top:30%
    }
}
.canceledAppointmentCard.upcomings2{
    width:100%!important;
    right:0!important;
    top:-115px!important;
    height:105px!important;
    left:auto!important
}
@media (min-width:700px){
    .brandIcon,.deskIcon,.selected-lang-img,.selected-lang-img-cont{
        cursor:pointer
    }
    .requiredMsgContainer{
        width:98%!important
    }
    .appointmentNoteCont{
        margin-top:-70px
    }
    .upcommingAppsTab{
        justify-content:center!important
    }
    .canceledAppointmentCard.upcomings{
        width:79%!important;
        right:15px!important;
        top:-62px!important;
        height:100px!important;
        left:auto!important
    }
    .logoutIcon{
        margin-top:17px;
        height:40px;
        width:150px
    }
    .desk-main-icon,.deskIcon{
        background-color:var(--main-color);
        height:40px;
        color:#fff;
        border-radius: 100%;
    }

    #inSlider{
        display:none;
    }

    #appCointainerC,.deskIcon{
        display:flex;
        text-align:center;
        margin:auto
    }
    .brandIcon,.mapboxgl-ctrl-bottom-right{
        display:none
    }
    .desk-main-icon{
        margin-top:auto;
        margin-bottom:auto;
        padding:0;
        width:20%;
        border-radius:30%;
        z-index:1;
        justify-content:initial
    }
    #side-menu li{
        margin-bottom:10px;
        min-height:40px
    }
    .deskIcon{
        width: 40px;
        height: 40px;
        align-items: center;
        padding: 10px;
        padding-top: 8px;
    }
    .iconActive,.line{
        background-color:#2d2d2d;
    }
    [class="wrapper row"]{
        margin:0 auto!important
    }
    .line{
        position:absolute;
        width:100%;
        height:2px;
        top:0;
        z-index:-1
    }
    .iconActive{
        border-radius:0
    }
    .brandIcon{
        width:250px;
        height:250px;
        padding:30px
    }
    [class="icon deskIcon iconActive"]{
        border-radius:100%;
    }
    [class="col-lg-6 appScreens"]{
        flex:0 0 80%;
        max-width:unset
    }
    [class="icon deskIcon desk-main-icon main-icon iconActive"]{
        border-radius:50%!important
    }
    .menuIconText{
        font-size:15px;
        color:#fff;
        text-align:center;
        margin-top:10px
    }
    .icon i{
        margin-top:auto!important;
        margin-bottom:auto;
        font-size:22px!important
    }
    .main-icon.iconActive{
        border:0!important
    }
    #removeTitle{
        opacity:0
    }
    #page-wrapper{
        display:flex;
        margin:0;
        padding:0;
        width:100%;
        float:right
    }
    .icon--order-success{
        width:72px
    }
    #toast-container>div{
        width:auto!important
    }
    #appCointainerC{
        width:100%;
        justify-content:center
    }
    .oneTapService i{
        font-size:40px
    }
    .lang-custom-selector{
        z-index: 2;
        position: absolute;
        top: -60px;
    }
    .lang-dropdown{
        border-bottom-left-radius: 5px;
        height: 130px;
        border-bottom-right-radius: 5px;
    }
    .controls{
        padding:0;
        margin:0 0 20px
    }
    .ibox-title{
        text-align:initial
    }
    .infosContanerC{
        width:80%;
        margin:auto
    }
    .previewBox-user,.previewBoxFinal,.staticContainer{
        width:100%
    }
    .form-group,.toast-message{
        text-align:initial!important
    }
    .sosBadge{
        left:11px
    }
    .iconDisplay{
        margin-left:0!important
    }
    #barberSelectionScreen,#serviceTypeSelectionScreen{
        margin:auto;
        max-width:50%
    }
    .barberSelectionScreen{
        margin-left:auto;
        margin-right:auto
    }
    .sweet-alert{
        left:43%!important
    }
    .main-icon{
        border-top:0
    }
}
.canceledAppointmentCard,.loggedOutCont{
    height:100%;
    display:flex;
    align-content:center;
    position:absolute
}
.businessHoursContainer{
    padding-left:15px
}
#businessHoursPreview{
    padding-left:15px;
    padding-right:15px
}
#installPrompt,#push-notification-prompt{
    display:none;
    opacity:0;
    position:fixed;
    bottom:20px;
    right:20px;
    padding:20px;
    background-color:var(--secondary-color);
    border:1px solid var(--extra-color);
    box-shadow:0 0 10px rgba(0,0,0,.1);
    border-radius:5px;
    z-index:99999;
    -webkit-transition:.5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition:.5s ease-in-out;
    transition:.5s ease-in-out;
    min-width:400px
}
.pushNotificationModalOpen{
    opacity:1!important
}
@media (max-width:999px){
    .customNavbar{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    .customWarning{
        padding-left: 60px!important;
    }

    .owl-carousel .item img{
        width:100%;
        height:190px;
        object-fit:cover;
        object-position:center
    }
    .storeMapContainer{
        margin-top:0!important
    }
    #installPrompt,#push-notification-prompt{
        display:none;
        position:fixed;
        bottom:-100%;
        right:auto;
        left:auto;
        width:100%;
        min-width:auto!important;
        border:none;
        border-top:1px solid var(--extra-color);
        border-top-left-radius:20px;
        border-top-right-radius:20px;
        box-shadow:0 0 400px 0 rgb(0 0 0)
    }
    .pushNotificationModalOpen{
        opacity:1!important;
        bottom:-5px!important
    }
    .owl-carousel .owl-dots{
        position:absolute;
        bottom:30px;
        right:30px
    }
}
body{
    touch-action:manipulation
}
div:where(.swal2-container) div:where(.swal2-validation-message){
    background:var(--secondary-color);
    color:red
}
div:where(.swal2-container) div:where(.swal2-radio),div:where(.swal2-container) input:where(.swal2-file),div:where(.swal2-container) input:where(.swal2-input),div:where(.swal2-container) label:where(.swal2-checkbox),div:where(.swal2-container) select:where(.swal2-select),div:where(.swal2-container) textarea:where(.swal2-textarea){
    margin:1em 0 3px!important;
    width:100%!important
}
div:where(.swal2-container) .swal2-html-container{
    margin:1em .6em .3em
}
.cust-swal-label{
    position:absolute;
    background-color:white;
    margin:10px 0 0 10px;
    padding-left:10px;
    padding-right:10px;
    font-size:13px!important
}
.loggedOutCont{
    width:100%;
    background-color: rgb(255, 255, 255);
    z-index:1;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center
}
.canceledAppointmentCard{
    background-color:#2d2d2df2;
    width:95%;
    left:0;
    top:0;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    z-index:10
}
#wrapperScroll{
    position:relative;
    height:400px;
    overflow:hidden
}
#scroller{
    position:absolute;
    z-index:1;
    -webkit-tap-highlight-color:transparent;
    width:100%;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    -o-text-size-adjust:none;
    text-size-adjust:none
}
.pullDown{
    height:50px;
    line-height:50px;
    text-align:center
}
.upcommingAppsTab{
    font-size:14px;
    display:flex;
    height: 40px;
    flex-direction:row;
    flex-wrap:nowrap;
    align-content:center;
    justify-content:space-around;
    align-items:center;
    padding-right:20px;
    padding-left:30px
}
.appointmentNoteCont{
    padding:10px;
    text-align:center;
    border-top:3px dashed var(--main-color)
}
.fa-caret-up:before{
    top:5px;
    position:relative
}
.requiredMsgContainer{
    display:none;
    opacity:0;
    min-height:46px;
    background-color:var(--secondary-color);
    padding:10px;
    color:#ff8c00;
    width:94%;
    height:auto;
    position:absolute;
    z-index:2;
    text-align:center;
    -webkit-transition:.3s ease-in-out;
    -moz-transition:.3s ease-in-out;
    -o-transition:.3s ease-in-out;
    transition:.3s ease-in-out
}
div.swal2-container.swal2-backdrop-show,div.swal2-container.swal2-noanimation{
    background-color:rgb(62 62 62 / 31%) !important;
}
.logoutIcon{
    position:absolute;
    z-index:1;
    right:-30px
}
#ptr-loader{
    position:relative;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    overflow:hidden;
    display:block;
    height:0
}
.mapboxgl-ctrl-group button+button{
    border-top:1px solid var(--main-color)!important
}

@media screen and (max-height:860px) {
    .containerCust {
        height: 120vh;
    }
}

@media screen and (max-height:700px) {
    .containerCust {
        height: 150vh;
    }
}

.responMesagCont{
    text-align: center;
    font-size: 17px;
    margin-top: 10px;
    justify-content: center;
}

#responMes{
    font-size: 20px;
    color: darkorange;
    font-weight: 900;
    margin-top: 10px;
}

@media only screen and (min-width:768px) and (min-height:1024px) and (max-height:1350px) and (max-width:1025px){
    .bottom-menu{
        height:8%;
        margin-bottom:-1px
    }
    .lang-dropdown{
        width:43.2vw;
        height:16vh;
        font-size:2.3vw
    }
    .lang-custom-selector{
        z-index:-1
    }
    .lang-custom-selector-active{
        top:unset;
        bottom:8vh;
        z-index:-1
    }
    #removeTitle{
        opacity:unset
    }
    .logoutIcon{
        margin:0;
        right:-100px
    }
    .lang-option{
        padding:1.61vh 3.49vw 2.15vh 4.39vw
    }
    .main-icon{
        height:8vh;
        border-top:4px solid var(--extra-color)!important
    }
    .icon{
        align-items:center;
        justify-content:center
    }
    .fa-info-circle:before,.fa-qrcode:before,.fa-user:before{
        font-size:6vw
    }
    .fa.fa-calendar-plus-o:before{
        font-size:9vw
    }
    .selected-lang-img{
        width:6vw;
        max-width:100%;
        height:auto
    }
    .checkboxDisplay{
        width:15%
    }
    .col-lg-1.iconDisplay,.col-lg-10.serviceDisplay{
        width:auto
    }
    [class$=impres]{
        display:none!important
    }
    .gray-bg{
        display:flex;
        align-items:center;
        justify-content:center;
        flex-wrap:wrap
    }
    .customButton{
        font-size:2vw
    }
    .customButtonDisabled{
        font-size:2vw;
        background-color:#222
    }
    #bookAppointment{
        display:flex;
        align-items:center!important;
        justify-content:center!important
    }
    [class$="controls w-100ma"]{
        display:flex;
        align-items:center!important;
        justify-content:center!important;
        position:relative;
        bottom:3vh
    }
    .apointmentTimeInfo{
        display:inline
    }
    .freeAppointmentCont{
        margin-left:0
    }
}
@media only screen and (min-width:1024px) and (min-height:768px) and (max-height:820px) and (max-width:1180px){
    .bottom-menu{
        height:7.8%;
        margin-bottom:-1px
    }
    .lang-dropdown{
        width:25.2vw;
        height:16vh;
        font-size:2.3vw
    }
    .lang-custom-selector{
        z-index:-1
    }
    .lang-custom-selector-active{
        top:unset;
        bottom:8vh;
        z-index:-1
    }
    #removeTitle{
        opacity:unset
    }
    .logoutIcon{
        margin:0;
        right:-100px
    }
    .lang-option{
        padding:1.61vh 3.49vw 2.15vh 4.39vw
    }
    .main-icon{
        height:8vh;
        border-top:4px solid var(--extra-color)!important
    }
    .icon{
        align-items:center;
        justify-content:center
    }
    .fa-info-circle:before,.fa-qrcode:before,.fa-user:before{
        font-size:3vw
    }
    .fa.fa-calendar-plus-o:before{
        font-size:4.5vw
    }
    .selected-lang-img{
        width:4vw;
        max-width:100%;
        height:auto
    }
    .checkboxDisplay{
        width:15%
    }
    .col-lg-1.iconDisplay,.col-lg-10.serviceDisplay{
        width:auto
    }
    [class$=impres]{
        display:none!important
    }
    .gray-bg{
        display:flex;
        align-items:center;
        justify-content:center;
        flex-wrap:wrap
    }
    .customButton{
        font-size:1.5vw
    }
    .customButtonDisabled{
        font-size:1.5vw;
        background-color:var (--secondary-color)
    }
    #bookAppointment{
        display:flex;
        margin-top:10px;
        align-items:center!important;
        justify-content:center!important
    }
    [class$="controls w-100ma"]{
        display:flex;
        align-items:center!important;
        justify-content:center!important;
        position:relative;
        min-height:unset
    }
    .freeAppointmentCont{
        margin:auto
    }
}

.customContact > .container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}


.customNavbar{
    min-width: 40px;
}


.customWarning{
    background-color: darkorange;
    border-radius: 5px;
    color: #1d1d1d;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    min-height: 50px;
    padding-left: 50px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-top: -20px;
    margin-left: -6px;
    margin-right: -10px;
    width: 112%;
}

.customWarning::before{
    font-family: FontAwesome;
    content: "\f071";
    width: 40px;
    height: 40px;
    background-color: #2d2d2d;
    position: absolute;
    left: 3px;
    color: darkorange;
    font-size: 25px;
    padding-top: 3px;
    border-radius: 5px;
    text-align: center;
}


#inSlider,#appCointainerC{
    -webkit-transition:opacity .2s ease-in-out;
    -moz-transition:opacity .2s ease-in-out;
    -o-transition:opacity .2s ease-in-out;
    transition:opacity .2s ease-in-out;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#launcher{
    bottom:36px!important;
}

#page-top > div:nth-child(24) > div:nth-child(2) > div{
    bottom: 111px!important;
}




.btn-google, .btn-fb {
    display: inline-block;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
    transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
}
.btn-google .google-content, .btn-google.google-content {
    display: flex;
    align-items: center;
    width: 240px;
    height: 50px;
    border-radius: 8px;
}

.fb-content, .btn-fb, .btn-fb .fb-content {
    display: flex;
    align-items: center;
    width: 250px;
    height: 50px;
    border-radius: 8px;
}

.btn-google .google-content .logo, .btn-google .fb-content .logo, .btn-fb .google-content .logo, .btn-fb .fb-content .logo {
    padding: 15px 0px 15px 15px;
    height: inherit;
}
.btn-google .google-content svg, .btn-google .fb-content svg, .btn-fb .google-content svg, .btn-fb .fb-content svg {
    width: 18px;
    height: 18px;
}
.btn-google .google-content p, .btn-google .fb-content p, .btn-fb .google-content p, .btn-fb .fb-content p {
    width: 100%;
    line-height: 1;
    letter-spacing: 0.21px;
    text-align: center;
    font-weight: 500;
}

.btn-google {
    background: #FFF;
}
.btn-google:hover {
    box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
}
.btn-google:active {
    background-color: #eee;
}
.btn-google .google-content p {
    color: #757575;
    margin-bottom: 0px;
}

.btn-fb {
    padding-top: 1.5px;
    background: #4267b2;
    background-color: #3b5998;
}
.btn-fb:hover {
    box-shadow: 0 0 3px 3px rgba(59, 89, 152, 0.3);
}
.btn-fb .fb-content p {
    color: rgba(255, 255, 255, 0.87);
    margin-bottom: 0px;
}


#qrcodeImage {
    height: 220px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#affiliateUrl{
    font-size: 20px;
    width: 100%;
    text-align: center;
    border: none;
    margin-bottom: 10px;
}

.customShareCont{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    margin-bottom: 20px;
    text-align:center;
}