/* -------------------------- Html elements begin -------------------------- */
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    vertical-align: baseline;
}
*:not(input):not(textarea){
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

html {
  scroll-behavior: smooth;
}

body{
    position: relative;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 17px; 
    overflow-x: hidden;
}
p{
    color: #02367c;
    line-height: 1.5em;
}
li {
    list-style-type: none;
}
a{
    color: #02367c;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s;
    text-decoration: none;
}
a:not(.btn):hover, a:not(.btn):focus{
    color: #111;
}
a:not(.btn){
    text-decoration: underline;
}
form{
    width: 100%;
    margin: 15px 0;
}
input,textara{
    position: relative;
    color: #02367c;
    border-radius: 0;
}
input:focus, textarea:focus, select:focus{
    outline: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
/* -------------------------- Html elements end -------------------------- */




.lock-openlock-confirm .errors{
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    padding: 10px;
    font-size: 17px;
    margin: auto;
    clear: both;
}

#header{
    top: 0;
    left: 0;
    z-index: 10000001;
    height: 60px;
    box-shadow: 0 0 20px 1px rgb(0 0 0 / 20%);
}
#header .row{
    position: relative;
}
#header .lock{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30px;
    margin: 0;
    transform: translate(-110px,-50%);
}
#header .logo{
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 40px;
    margin: 0;
    cursor: pointer;
    transform: translate(-50%,-50%);
}

#header .row{
    padding: 0 30px;
    text-align: center;
}

#userzone{
    position: relative;
    overflow: hidden;
}

.register-email-message {
    position: absolute;
    top: -10000px;
    background: #fff;
    height: 100%;
    text-align: center;
    padding-top: 50px;
    opacity: 0;
    transition: opacity 0.7s;
}

[data-page="register"] #register,[data-page="forgot-password"] #forgot-password, [data-page="forgot-password-step2"] #forgot-password-step2, [data-page="forgot-password-step3"] #forgot-password-step3{
    position: relative;
}

[data-page="register"] .login-container, [data-page="register-email"] .login-container,
[data-page="forgot-password"] .login-container, [data-page="forgot-password-step2"] .login-container, [data-page="forgot-password-step3"] .login-container,
[data-page="forgot-password-step3"] #forgot-password, [data-page="forgot-password-step3"] #forgot-password-step2{
    display: none;
}

[data-page="register-hide"] .login-container{
    display: block;
}

[data-page="register-email"] .register-email-message{
    top: 0;
    opacity: 1;
}

#forgot-password-step3{
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: #fff;
    padding-top: 100px;
}

.forgot-password-step2-message{
    text-align: center;
}

.input--field-register-dateofbirth label{
    position: relative;
}

.input--field-register-dateofbirth input{
    position: relative;
    z-index: 100;
    height: 30px;
    text-align: left;
    justify-content: flex-start;
}

input::-webkit-date-and-time-value {
    text-align: left;
}

/* -------------------------- Utility classes begin -------------------------- */
.p-r{
    position: relative !important;
}
.p-a{
    position: absolute !important;
}
.p-f {
    position: fixed;
}
.d-b{
    display: block;
}
.d-n{
    display: none !important;
}
.b0 {
    bottom: 0;
}
.ai-c {
    align-items: center;
}
.jc-c {
    justify-content: center;
}
.mt5 {
    margin-top:5px;
}
.mt15 {
    margin-top:15px;
}
.mt30 {
    margin-top:30px;
}
.mb5 {
    margin-bottom: 5px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb30 {
    margin-bottom: 30px;
}
.mb60 {
    margin-bottom: 60px;
}
.h100p {
    height: 100%;
}
.w100p {
    width: 100%;
}
.mx-a, body .grid .col.mx-a {
    margin-left: auto;
    margin-right: auto;
}
.d-f {
    display: flex;
}
.bc-fff {
    background-color: #fff;
}
.ta-c {
    text-align: center;
}
.zi10 {
    z-index: 10 !important;
}
.fff{
    background-color: #fff;
}
.f0f0f0{
    background-color: #f0f0f0;
}
.lightred{
    background-color: #F17F7C;
}
.lightblue{
    background-color: #9cc4ff;
}
.blue{
    background: #02367c;
}
.lightgreen{
    background-color: #CDE6D2;
}
.theme, .theme a {
    background-color: #02367c;
    color: #fff;
}
.c-fff {
    color: #fff;
}
.c-fff,.btn.c-fff{
    color: #fff;
}
.c-lightblue{
    color: #9cc4ff;
} 
.c-theme {
    color: #02367c;
}
.c-blue{
    color: #02367c;
} 
.c-red{
    color: #b94a48;
} 
.c-lightgreen{
    color: #CDE6D2;
}
.c-green{
    color: #63936c;
} 
.c-required{
    color: #c4291d;
}

.full-wh{
    position: relative;
    width: 100%;
    height: 100vh;
    background: #fff;
}

.grid {
    position: relative;
    width: 100%;
    max-width: 1329px;
    margin: 0 auto;
    padding: 0 60px;
    display: block;
    max-width: 700px;
    margin: auto;
    padding: 0 30px;
}

.row{
    width: 100%;
    max-width: 600px;
    margin: auto;
}

.content{
    font-size: 23px;
    font-weight: 400;
    text-align: center;
    line-height: 1.5em;
    padding: 20px 0;
}

.errors,.warning{
    position: relative;
    display: block;
    top: 30px;
    width: 100%;
    margin-bottom: 45px;
    padding: 20px;
    background: #f2dede;
    color: #b94a48;
    line-height: 1.5em;
    opacity: 0;
    transition: opacity 1s;
    font-size: 19px;
}
.warning{
    padding: 0;
    background: transparent;
}
.errors span{
    display: block;
    padding-bottom: 15px;
}
.errors span:last-child{
    padding-bottom: 0;
}
.errors.active{
    opacity: 1;
}
.success{
    padding: 30px 15px;
    margin-bottom: 30px;
    text-align: left;
    color: #155724;
    background-color: #d4edda;
}
.success + .errors{
    margin-top: 30px !important;
}
/* -------------------------- Utility classes end -------------------------- */


/* -------------------------- Btn classes begin -------------------------- */
.btn{
    display: flex;
    padding: 0 30px;
    font-size: 19px;
    font-weight: 600;
    width: 100%;
    height: 56px;
    line-height: 56px;
    border: 2px solid #02367c;
    text-align: center;
    border-radius: 60px; 
    color: #02367c;
    max-width: 390px;
    cursor: pointer;
    transition: background .3s,color .3s;
    cursor: pointer !important;
    -webkit-appearance: none;
    justify-content: center;
    align-items: center;
    line-height: 1.2em;
}

input.btn, .btn-user-update{
    border: 2px solid #02367c;
    background: #02367c;
    font-size: 21px;
    color: #fff;
}

.btn-close, .btn-refresh{
    position: fixed;
    top: -1000px;
    left: 15px;
    background: #fff;
    border-radius: 100px;
    width: 50px;
    height: 50px;
    z-index: 1001;
    border: 0;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    transition: opacity 1s;
    opacity: 0;
}
.btn-close.active, .btn-refresh.active{
    top: 90px;
    z-index: 10000000;
    opacity: 1;
}
.btn-close.active.hide, .btn-refresh.active.hide{
    opacity: 0;
}
.btn-close{
    height:35px;
}
.btn-close img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%,-50%);
}

.btn-refresh{
    right: 15px;
    width: 40px;
    height: 40px;
    left: auto;
    padding: 0;
    background: #fff !important;
}
.btn-refresh img{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    transform: translate(-50%,-50%);
}

.btn.btn-forgot-password{
    margin: 30px auto;
}

.btn.btn-register,.btn.btn-login{
    margin: 15px auto;
}

.btn-openlock-confirm, .btn-start-session-confirm{
    margin: auto;
}

.btn-stop-session-confirm{
    margin: 15px auto;
}

.btn-user-update{
    position: relative;
    margin: 60px auto 15px auto;
}
.btn-user-update, .btn-user-update *{
    cursor: pointer;
}
.btn-user-update span{
    padding-right: 15px;
}
.btn-user-update img{
    position: relative;
    width: 30px;
}

.btn-logout{
    margin-bottom: 30px;
}

.btn-close-confirm, .btn-close-user-update{
    font-size: 60px;
    font-weight: 400;
    display: inline-block; 
    margin: auto;
    margin-top: 31px;
    margin-bottom: 50px;
    cursor: pointer;
}

.btn-close-user-update{
    position: relative;
    left: 50%;
    margin-top: 1px;
    transform: translateX(-50%);
}

.btn-user-delete, .btn-user-delete-confirm{
    margin: 90px auto 30px auto;
}
.btn-theme{
    background: #02367c;
    color: #fff;
    border-color: #02367c;
}
.btn-red{
    background: #e24150;
    color: #fff;
    border-color: #e24150;
}
.btn-stop-session{
    margin-bottom: 30px;
    margin-left: 15px;
    margin-right: 15px;
    width: auto;
}
.btn-stop-session-confirm{
    background: #e24150;
    color: #fff;
    border-color: #e24150;
}
.btn-user-delete{
    margin-bottom: 150px;
}
.btn-service-conditions{
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.btn-service-conditions *{
    cursor: pointer !important;
}
.btn-email{
    color: #02367c !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.btn-service-conditions span{
    border-bottom: 1px solid #02367c;
}
.btn-service-conditions svg{
    position: absolute;
    top: -1px;
    right: -35px;
}
.locker-rent .btn-service-conditions{
    margin-left: 15px;
}
.btn-open-lock{
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
}
/* -------------------------- Btn classes end -------------------------- */


/* -------------------------- Form classes begin -------------------------- */
label.mdl-textfield__label{
    color: #6a7f9d;
}

.input-checkbox{
    position: relative;
    display: flex;
    margin-right: 15px;
    margin-bottom: 30px;
}
.input-checkbox__input{
    position: relative;
    margin-right: 15px;
    width: 25px;
    min-width: 25px;
    height: 25px;
    border: 2px solid #02367c;
    cursor: pointer;
}
.input-checkbox.active .input-checkbox__input{
    background: #02367c;
}
.input-checkbox svg{
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    width: 30px;
    transform: translate(-41%,-41%);
    cursor: pointer;
}
.input-checkbox.active svg{
    display: block;
}
.input-checkbox label{
    color: #02367c;
    line-height: 1.5em;
    font-weight: 400;
    text-align: left;
}

.mdl-textfield__label{
    top: 15px;
    font-size: 19px;
}

form .mdl-textfield{
    width: 100%;
} 
.mdl-textfield__input{
    border-bottom: 1px solid #6a7f9d;
}

.input--field-register-confirm{
    margin-top: 30px;
}

.col-right input{
    font-size: 17px;
    padding-bottom: 5px;
    width: 100%;
    background: #fff;
}
.col-right input:not([disabled]){
    /*color: #6a7f9d;*/
    border-bottom: 1px solid #6a7f9d;
}
.input:not(.is-focused):not(.is-dirty) input[type="date"]{
    color: #fff;
    text-indent: -1000px;
}
.styled-select{
    position: relative;
    border: 0;
    width: 100%;
    overflow: hidden;
    float: left;
    padding: 0;
    cursor: pointer;
}
.styled-select select{
    width: 200% !important;
    height: 33px;
    background: transparent;
    color: #02367c !important;
    font-size: 17px;
    opacity: 1 !important;
}
.styled-select select:not([disabled]){
    /*color: #6a7f9d !important;*/
    border-bottom: 1px solid #6a7f9d;
}
.styled-select svg{
    position: absolute;
    display: none;
    top: 7px;
    right: 0;
    height: 25px;
    z-index: -1;
    margin: 0 !important;
}
.content.active.update .styled-select svg{
    display: block;
}
/* -------------------------- Form classes end -------------------------- */


/* -------------------------- Modal classes begin -------------------------- */
.modal{
    position: absolute;
    top: -10000px;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
    opacity: 0;
}
.modal.active{
    top: 0;
    opacity: 1;
}
.modal-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    z-index: 1;
    background: rgba(0,0,0,0.3);
}
.modal-container{
    position: absolute;
    top: 170px;
    left: 50%;
    width: 90%;
    max-width: 600px;
    margin: 0 auto 60px auto;
    background: #fff;
    display: block;
    transform: translate(-50%,-50%);
    padding: 90px 30px 30px 30px;
    border-radius: 30px;
    z-index: 1;
    text-align: center;
    box-shadow: 1px 5px 9px 0px rgba(0,0,0,0.3);
}
.btn-modal-close{
    position: absolute;
    top: 15px;
    right: 25px;
    z-index: 100;
    cursor: pointer !important;
    font-size: 30px;
}
.modal-title{
    font-size: 25px;
    font-weight: 400;
    color: #02367c;
}
.modal-content hr{
    width: 100%;
    height: 2px;
    background: #02367c;
    margin: 30px 0;
}
.modal .btn{
    //margin: 30px auto 0 auto;
}
.modal-message .modal-container{
    padding-top: 60px;
}
.modal-title + .modal-content{
    color: #02367c;
    line-height: 1.5em;
    text-align: left;
}
.modal-message.active{
    position: relative;
    left: 0;
    padding-top: 100px;
    z-index: 1000;
}
.modal-message.active .modal-overlay, .modal.active .modal-overlay{
    position: fixed;
}
.modal-message.active .modal-container{
    position: relative;
    top: 0;
    left: 0;
    width: 90%;
    margin-bottom: 30px;
    max-width: 400px;
    min-height: 300px;
    margin: 0 auto;
    margin-bottom: 30px;
    transform: none;
}
.modal-message.active .modal-content{
    text-align: left;
}
.modal-message .modal-container .errors{
    top: 0;
    margin-bottom: 20px;
    margin-top: -40px;
}
#userzone.service-conditions-active .locks-list, #userzone.service-conditions-active .box-page{
    display: none;
}
.modal-delete-account .modal-container{
    top: 230px;
}
[data-modal] #login{
    display: none;
}
[data-modal] #userzone{
    position: fixed;
    width: 100%;
}
.modal-open-lock-confirm .modal-title{
    margin-bottom: 30px;
}
#login .logo{
    position: relative;
    left: 28px;
}
.modal-logout .modal-overlay{
    background: #fff;
}
/* -------------------------- Modal classes end -------------------------- */


/* -------------------------- App bottom nav begin -------------------------- */
#nav{
    position: fixed;
    bottom: 0;
    background: #fff;
    height: 70px;
    z-index: 10000;
    border-top: 1px solid #cccccc;
    width: 100%;
    box-shadow: 0 0 15px 1px rgb(0 0 0 / 7%);
}
#nav ul{
    height: 69px;
    display: flex;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
#nav li{
    position: relative;
    padding: 0 15px;
    text-align: center;
    width: 33.33%;
    max-width: 150px;
    cursor: pointer;
}
#nav li span{
    position: relative;
    top: 7px;
    font-weight: 400;
    color: #02367c;
}
#nav li.active span{
    font-weight: 600;
}
#nav li img{
    position: absolute;
    height: 33px;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}
/* -------------------------- App bottom nav end -------------------------- */


/* -------------------------- Map begin -------------------------- */
#map{
    position: fixed !important;
    top: 60px;
    width: 100%;
    height: calc(100% - 130px);
    box-shadow: 0 0 20px 1px rgb(0 0 0 / 15%) !important;
}
#map iframe{
    position: absolute;
    width: 100%;
    height: calc(100% - 130px);
}
.gm-style iframe + div { 
    border:none!important; 
}
/* -------------------------- Map end -------------------------- */


/* -------------------------- Search locker begin -------------------------- */
#search-locker{
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1000px;
    transition: opacity 0.6s;
}
#search-locker:after{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    content: " ";
    background: url("../images/icons/search.svg");
    width: 60px;
    height: 50px;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
}
#search-locker.hide{
    opacity: 0;
}
#search-locker input[type="text"]{
    width: 100%;
    line-height: 50px;
    padding: 0 20px 0 70px;
    font-size: 23px;
    font-weight: 300;
    border-radius: 100px;
    box-shadow: 0 0 20px 1px rgb(0 0 0 / 20%);
}
#search-locker input[type="submit"]{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 10;
    width: 60px;
    height: 50px;
    background: transparent;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    cursor: pointer;
}
/* -------------------------- Search locker end -------------------------- */


/* -------------------------- Page begin -------------------------- */
.page{
    position: absolute;
    top: -10000px;
    background: #fff;
    width: 100%;
    min-height: calc(100vh - 60px);
    z-index: 1000;
    padding: 45px 0;
    padding-bottom: 30px;
    min-height: 100vh;
    opacity: 0;
    transition: opacity 0.7s;
}
.page:before{
    position: absolute;
    display: block;
    top: -300px;
    left: -15px;
    right: -15px;
    content: " ";
    width: auto;
    height: 300px;
    background: #fff;
    text-align: center;
}

.page.active{
    position: relative;
    top: 61px;
    opacity: 1;
    padding-bottom: 150px;
}
.page.hide{
    position: absolute;
    top: 61px;
    transition: opacity 0.5s;
    opacity: 0;
}

.page header{
    text-align: center;
}
.page header ul{
    display: flex;
    justify-content: center;
}
.page header li{
    font-size: 19px;
    font-weight: 400;
    margin: 0 15px;
    cursor: pointer;
}
.page header li.active{
    font-weight: 600;
}
/* -------------------------- Page end -------------------------- */


/* -------------------------- Lock page begin -------------------------- */
.lock-page{
    position: absolute;
    top: -10000px;
    opacity: 0;
    color: #02367c;
    transition: opacity 1s;
    padding-top: 15px;
}
.lock-page .lock-title{
    margin-top: 25px;
}
.lock-page.active{
    position: relative;
    top: 0;
    opacity: 1;
}
.lock-page.disabled{
    top: -10000px;
    opacity: 0;
}
.lock-page.disabled.show{
    top: 0;
    opacity: 1;
    transition: opacity 0.6s;
}
.open-lock-from-distance{
    display: none;
}
.open-lock-from-distance .errors{
    margin-top: 0 !important;
    margin-bottom: 30px;
}
.open-lock-from-distance.active{
    display: block;
}
.open-lock-from-distance.active + .modal-content, .open-lock-from-distance.active + .modal-content + .btn-open-lock-confirm{
    display: none;
}
.open-lock-from-distance .warning{
    top: 0;
}
.open-lock-from-distance .warning.active{
    opacity: 1;
}
/* -------------------------- Lock page end -------------------------- */


/* -------------------------- Page user begin -------------------------- */
#user .title{
    font-size: 19px;
    border-bottom: 2px solid  #02367c;
    padding-bottom: 5px;
    width: 100%;
}

#user .content, #user .user-update{
    position: relative;
    margin: auto;
    max-width: 500px;
    text-align: left;
    color:  #02367c;
    padding: 0 30px;
}

#user .content .row{
    font-size: 17px;
    font-weight: 400;
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
}
#user .content .col-left{
    width: 300px;
    font-weight: 600;
}
#user .content .col-right{
    width: 100%;
    text-align: left;
    opacity: 1 !important;
}
#user .content .col-right,.col-right input{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#user .content .btn-user-update-cancel, #user .content .btn-user-update-save,
#user .content.update .btn-user-update, #user .content.update .btn-logout{
    display: none;
}
#user .content.update .btn-user-update-cancel, #user .content.update .btn-user-update-save{
    display: block;
    margin: 10px auto;
}
#user .content.update .btn-user-update-cancel{
    margin-top: 60px;
    line-height: 56px;
}
#user .errors{
    top: 0;
    margin: 0;
    margin: auto;
    text-align: center;
    margin-top: -45px;
    margin-bottom: 30px;
}
#user .errors p{
    color: #b94a48;
}
#user .content.active.update .btn-user-delete{
    display: none;
}
/* -------------------------- Page user begin -------------------------- */


/* -------------------------- Offline and preloader begin -------------------------- */
#offline, #preloader{
    position: fixed;
    display: flex;
    top: -100000px;
    left: 0;
    align-items: center;
    z-index: 1000000000 !important;
    opacity: 0;
    transition: opacity 0.5s;
}

#preloader{
    top: 0 !important;
    background: #fff;
}
#preloader img{
    top: 50%;
    left: 50%;
    width: 30px;
    animation: preloader-pulse 1s linear infinite;
}

#offline img{
    max-width: 300px;
}
#offline.active, #preloader.active{
    top: 0;
    opacity: 1;
}
#offline.active.hide, #preloader.active.hide{
    opacity: 0;
}
#offline .icon-wifi-off{
    width: 90%;
    max-width: 100px;
    margin: 30px 0;
}

@keyframes preloader-pulse{
  0% {
    transform: scale(1);
  }
  50%{
      transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  } 
}
/* -------------------------- Preloader end -------------------------- */


/* -------------------------- Locker category begin -------------------------- */
.locker-category{
    position: fixed;
    bottom: -190px;
    width: 100%;
    min-height: 175px;
    background: #fff;
    text-align: center;
    padding: 0px 0 0 0;
    padding-bottom: 70px;
    margin-top: 150px;
    opacity: 0;
    z-index: 1000;
    transition: bottom 0.7s, opacity 0.7s, height 0.7s;
    display: none;
}
.locker-category:after{
    position: absolute;
    display: block;
    content: " ";
    top: 100%;
    left: 0;
    width: 100%;
    height: 50px;
    background: #fff;
}
.locker-category.active{
    bottom: -100px;
    opacity: 1;
    position: relative;
    padding-bottom: 150px;
    min-height: calc(100vh - 200px);
    display: block;
}
.locker-category.scroll{
    transition: none;
}
.locker-category.active.scroll{
    position: relative;
    top: 0;
    bottom: auto;
}
.locker-category.active:before{
    position: absolute;
    display: block;
    content: " ";
    top: -1000px;
    width: 100%;
    height: 1000px;
    background: rgba(255,255,255,0.7);
}
.locker-step1, .locker-step2, .locker-step3{
    transition: opacity 0.3s;
}
.locker-category.step2{
    height: 540px;
}
#sessions .locker-category h2,#sessions  .locker-category .locks-free, #sessions  .locker-category .locks-cost,
#sessions  .lock-page .lock-cost{
    padding: 0;
}
.locker-category h2{
    color: #02367c;
    font-size: 23px;
    font-weight: 600;
}
.locker-category .locks-free{
    margin: 10px 0;
}
.locker-category .locks-free .c-red{
    padding-left: 5px;
}
/* -------------------------- Locker category end -------------------------- */


#login,#register,#forgot-password,#forgot-password-step2, #forgot-password-step3{
    flex-wrap: wrap;
    height: auto;
}

#login{
    z-index: 1001;
    transition: opacity 0.7s;
}

#login.hide.disabled{
    top: -10000px;
}

#register, #forgot-password, #forgot-password-step2, #forgot-password-step3{
    position: absolute;
    top: -10000px;
    left: 0;
    padding-bottom: 30px;
    opacity: 0;
    min-height: 100%;
    transition: opacity 0.7s;
}

#register.active,#forgot-password.active, #forgot-password-step2.active, #forgot-password-step3.active{
    position: absolute;
    display: block;
    top: 0;
    opacity: 1;
}

#login.hide,#forgot-password.active.hide,#forgot-password-step2.active.hide,#forgot-password-step3.active.hide,#register.active.hide{
    position: absolute;
    opacity: 0;
}

.logo{
    max-width: 200px;
    width: 100%;
    margin: 30px auto;
}
.logo img{
    width: 100%;
}
#logo-login img{
    width: 100%;
}
#login .lock{
    position: absolute;
    width: 37px;
    height: 37px;
    top: -3px;
    left: 50%;
    transform: translateX(-127px);
}

.forgot-password-message{
    position: relative;
    top: -10px;
    margin-bottom: 15px;
}

.register-message,.login-message{
    display: block;
    clear: both;
    width: 100%;
    margin: 15px 0;
    text-align: center;
}

.register-message{
    margin-top: 30px;
    padding-bottom: 30px;
}


.page-tab-content{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 170px);
}


.btn-locker{
    background: #a7d6bc;
    border: 0px;
}
.btn-locker:hover{
    background: #7cad92;
    color: #02367c;
}
.locker-step1.hide, .locker-step2.hide, .locker-rent.hide{
    opacity: 0;
}
.locker-step2, .locker-step3, .locker-rent, .box-list{
    text-align: left;
    max-width: 390px;
    margin: auto;
}
.box-list{
    padding: 0 15px;
}
.locker-step2.active, .locker-step3.active, .locker-rent.active{
    opacity: 1;
}
h2{
    font-weight: 400;
}
.locker-step2 h2{
    margin-top: 30px;
    margin-bottom: 5px;
}
.locker-step2 h2{
    margin-bottom: 5px;
}
.locker-step3 .content{
    text-align: left;
    font-size: 17px;
    font-weight: 400;
    padding: 0 0 15px 0;
}
.btn-locker-more-info{
    position: relative;
    margin-top: 15px;
    border-top: 1px solid #111;
    padding: 15px 0;
    font-size: 21px;
    cursor: pointer;
    transition: color 0.3s;
}
.btn-locker-more-info:hover{
    color: #02367c;
}
.btn-locker-more-info:after{
    position: absolute;
    display: block;
    content: "⌄";
    top: 50%;
    right: 15px;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 30px;
    color: #111;
    transition: color 0.3s;
}
.btn-locker-more-info:hover:after{
    color: #02367c;
}
#map {
   width: 100%;
}
.markers{
    position: absolute;
    top: 60px;
    z-index: 10;
}
.marker{
    background: #ff0000;
    color: #ffffff;
    padding: 30px;
    cursor: pointer;
}
.locks-list{
    position: relative;
    color: #02367c;
    padding-top:15px;
}
.locker-rent ul li, .box-list ul li{
    position: relative;
    display: flex;
    width: 100%;
    padding: 15px 0;
    justify-content: space-between;
    text-align: left;
    font-size: 19px;
    font-weight: 300;
    color: #02367c;
}
.locker-rent ul li:first-child{
    color: #fff;
    border-top: 1px solid #ccc;
    font-size: 19px;
    font-weight: 600;
    display: block;
    text-align: center;
    line-height: 18px;
    width: auto !important;
    margin: 0 15px;
    margin-bottom: 20px;
}
.locker-rent .lock-content{
    width: 100%;
    padding-right: 15px;
}
.locker-rent .lock-content span{
    display: block;
}
.lock-number-owned, .lock-number-available, .lock-number-claimed{
    background: #00DDB8;
    color: #fff;
}
.lock-number.disabled{
    background: #b94a48;
    color: #fff;
}
.lock-number-owned, .lock-number-claimed{
    background: #02367c;
}
.lock-overview .lock-title, .lock-overview .lock-status{
    color: #02367c;
    padding: 0 !important;
}
/*.lock-overview .lock-number-available{
    background: #f0f0f0;
    color: #02367c;
}*/
.locker-rent li .lock-title, .box-list ul li span{
    font-size: 18px;
}
.locker-rent .lock-btn-claim, .locker-rent .lock-btn-release, .locker-rent .lock-btn-openlock{
    position: relative;
    top: -15px;
    min-width: 160px;
    width: auto;
    font-size: 15px;
    padding: 5px 15px;
    height: 33px;
}
.locker-rent .lock-btn-openlock{
    position: absolute;
    top: 41px;
    right: 0;
}
.locker-rent [data-lock-islocked=""] .lock-locked-status{
    color: #7cad92;
}
.locker-rent [data-lock-islocked="1"] .lock-locked-status{
    color: #b94a48;
}
.locker-rent [data-lock-isclaimed=""] .lock-claimed-status{
    color: #7cad92;
}
.locker-rent [data-lock-isclaimed="1"] .lock-claimed-status{
    color: #7cad92;
}
.locker-category__claimed{
    color: #7cad92;
}

.locker-rent *{
    cursor: default;
}
.locker-rent ul li, .locker-rent ul li *,  .box-list ul *{
    cursor: pointer;
}
.locker-rent ul li.disabled, .locker-rent ul li.disabled *{
    cursor: default;
}
.locks-cost{
    position: absolute;
    top: 15px;
    right: 0;
    font-weight: 600;
}
.btn.disabled{
    cursor: default !important;
}
.box-category:before{
    position: absolute;
    display: block;
    content: " ";
    width: 100%;
    height: 10000px;
    top: -10000px;
    background: rgba(255,255,255,0.5);
}
.box-category{
    position:fixed;
    top: -10000000px;
    z-index:1001;
    width:100%;
    padding-bottom:30px;
    left:0;
    background:#fff;
    opacity: 0;
    transition: opacity 1s;
}
.box-category h2{
    color: #02367c;
    margin-top: 30px;
}
.box-category.active{
    top: auto;
    bottom: 69px;
    opacity: 1;
}
.box-category.active.hide{
    top: -10000000px;
    bottom: auto;
    transition: opacity 0s;
}
.box-category ul{
    margin-top: 10px;
}
.box-category.active .box-list{
    display: none;
}
.box-category.active .box-list.active{
    display: block;
}
.locker-rent ul li:first-child, .box-category ul li:first-child{
    border-top: 1px solid #ccc;
}
#nav.disabled{
    opacity: 0 !important;
    z-index: 10;
}
#map:before{
    position: absolute;
    display: block;
    content: " ";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #ffffff;
    z-index: 100;
    transition: all 0.3s;
}
#map.disabled:before{
    height: 200px;
    opacity: 1;
    transition-delay: 0.7s;
}
.lock-content{
    display: flex;
    align-items: center;
}
.lock-number{
    position: relative;
    display: flex !important;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 600;
    margin-right: 15px;
}
.icon-next{
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}
.lock-overview{
    position: relative;
    display: flex;
    align-items: center;
    margin-top: -20px;
    font-size: 17px;
    text-align: left;
    padding: 0 15px;
}
#sessions .lock-overview{
    margin-top: 10px;
}
.lock-overview .lock-number {
    margin-right: 15px;
    width: 60px;
    height: 60px;
    font-size: 43px;
}
.locks-list.hide{
    opacity: 0;
    transition: opacity 1s;
}
.locks-list.hide.active{
    opacity: 1;
}
.locks-list.loading{
    opacity: 0 !important;
}

.locks-list li:nth-child(2n){
    position: relative;
    background: #f0f0f0;
}
.locks-list li:nth-child(2n):before{
    position: absolute;
    display: block;
    z-index: -1;
    content: " ";
    top: 0;
    left: -5000px;
    width: 100000px;
    height: 100%;
    background: #f0f0f0;
}

.locks-category {
    font-weight: bold;
}

.locks-category:before {
    position: absolute;
    display: block;
    z-index: -1;
    content: " ";
    top: 0;
    left: -5000px;
    width: 100000px;
    height: 45px;
    background: #00DEB7;
}

.btn-session, .btn-start-session-confirm{
    background: #00ddb8;
    color: #fff;
    margin: 30px auto;
    border: 0px;
}
.session-content{
    position: relative;
    padding: 30px;
    background: #f0f0f0;
    border-radius: 30px;
}
.btn.btn-close-lock{
    max-width: 250px;
    margin: 15px auto;
    padding: 10px 20px;
    background: #fff !important;
}
.lock-confirm, .lock-openlock-confirm, .lock-status-confirm{
    position: absolute;
    top: -10000px;
    z-index: 10001;
    text-align: center;
    opacity: 0;
    margin-top: -100px;
    padding: 0 30px;
    transition: opacity 0.6s;
}
.lock-confirm.active{
    top: 60px;
    opacity: 1;
}
.lock-openlock-confirm.active, .lock-status-confirm.active{
    top: 70px;
    opacity: 1;
    padding-bottom: 30px;
}
.lock-status-confirm.active{
    position: relative;
}
.lock-openlock-confirm.active.hide, .lock-status-confirm.active.hide{
    opacity: 0;
}
.lock-confirm.active.hide, .lock-status-confirm.active.hide{
    opacity: 0;
}
.lock-confirm-active .lock-status, .lock-confirm-active h2, .lock-confirm-active h2 + div{
    display: none;
}

.content-confirm{
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    padding: 0;
}


#user .content, #user .user-update{
    position: relative;
    transition: opacity 0.6s;
}
#user .content:not(.active), #user .user-update:not(.active){
    position: absolute;
    top: -10000px;
    opacity: 0;
}
body #user .content.active, body #user .user-update.active{
    opacity: 1 !important;
}
#sessions .page-tab-content{
    display: block;
    text-align: center;
    padding: 30px 0;
    padding-bottom: 90px;
    max-width: 390px;
    margin: auto;
}
#sessions .locker-rent h2, #sessions .locker-rent h2 + .mb30{
    padding: 0 15px;   
}

#sessions:before{
    position: absolute;
    display: block;
    content: " ";
    top: -300px;
    left: 0;
    width: 100%;
    height: 300px;
    background: #ccc;
}

.total-active-sessions{
    padding-bottom: 30px;
    border-bottom: 3px solid #02367c;
    margin-bottom: 45px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    width: calc(100% - 30px);
}
.total-active-sessions.hide{
    display: none;
}
.page-tab-content{
    position: absolute;
    top: -100000px;
    opacity: 0;
    transition: opacity 0.6s;
}
.page-tab-content.active{
    position: relative;
    top: 0;
    opacity: 1;
}
[data-tab-content="active"] .lock-overview{
    position: relative;
    cursor: pointer;
}
#sessions .btn-close,#sessions.session-lock header, #sessions.session-lock .lock-overview[data-lock-id]{
    display: none;
}
#sessions.session-lock .btn-close{
    display: block;
}
#sessions.session-lock .locker-rent{
    margin-top: 60px;
}
.lock-locked-status, .lock-session-status{
    position: relative;
    text-align: center;
    margin: 15px 15px;
    padding: 20px;
    padding-top: 50px;
    border-radius: 15px;
    box-shadow: 0px 7px 10px 0px rgb(0 0 0 / 15%);
}
.lock-locked-title, .lock-session-title{
    position: absolute;
    top: 17px;
    font-size: 14px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 30px;
    left: 0px;
}
.lock-locked-status .lock-locked-title img{
    width: 100%;
    max-width: 20px;
    position: relative;
    top: -7px;
}
.box-page{
    position: absolute;
    top: -10000px;
    opacity: 0;
    margin: 15px;
    margin-bottom: 45px;
    color: #02367c;
    padding: 0;
    transition: opacity 0.7s;
}
.box-page.active{
    position: relative;
    top: 0;
    opacity: 1;
}
.current-amount{
    margin-top: 5px;
}
.locks-list.hide:not(.active){
    position: absolute;
    top: -10000px;
}
.locks-list ul,
.locks-list ol{
    position: absolute;
    top: -10000px;
    opacity: 0;
    transition: opacity 0.7s;
    margin-bottom: 30px;
}
.lock-openlock-confirm .errors.active + .btn-close-confirm{
    margin-top: 80px;
}
.locker-category.scroll .lock-page{
    padding-bottom: 30px;
}
.locks-list ul.hide,
.locks-list ol.hide {
    transition: opacity 0s;
}
.locks-list ul.active,
.locks-list ol.active{
    position: relative;
    top: 0;
    opacity: 1;
}
.user-check{
    display: none;
}
.lock-openlock-confirm.step2 .content-confirm, .lock-openlock-confirm.step2 .btn-openlock-confirm{
    display: none;
}
.lock-openlock-confirm.step2 .user-check{
    display: block;
}


.locker-category h2,.locker-category .locks-free, .locker-category .locks-cost, .locker-category .locks-category,
.lock-page .lock-cost{
    padding: 0 0 10px 0;
}
.box-list{
    padding: 0 15px;
}
.lock-overview{
    padding: 0 15px;
}
#sessions .locker-rent h2, #sessions .locker-rent h2 + .mb30{
    padding: 0 15px;   
}
.lock-status[data-status="0"]{
    padding: 0 15px;
}
.lock-status .lock-content {
    width: 100%;
    justify-content: center;
    margin: auto;
    margin-bottom: 30px;
    padding: 0 15px;
    font-size: 17px;
}
.modal-error svg, .modal-logout svg{
    display: block;
    width: 60px;
    margin: auto;
    height: 60px;
    margin-bottom: 15px;
    color: #b94a48;
}
.languages{
    position: absolute;
    top: 10px;
    right: 30px;
    width: 70px;
    z-index: 1;
    overflow: visible;
    cursor: pointer;
}
.languages:before{
    position: absolute;
    display: block;
    content: " ";
    background: #f0f0f0;
    top: -5px;
    bottom: -5px;
    left: -10px;
    width: 85px !important;
    height: auto !important;
    border-radius: 10px !important;
    z-index: -10;
}
.languages:after{
  position: absolute;
  content: "";
  top: -5px;
  left: 100px;
  width: 50px;
  height: 30px;
  background: #fff;
  z-index: 98;
}
.languages.styled-select select:not([disabled]){
    border-bottom: none;
    font-weight: 600;
    color: #02367c !important;
    cursor: pointer;
}
.languages.styled-select select{
    padding-left: 30px;
}
.languages.styled-select svg{
    position: absolute !important;
    display: block;
    top: 5px;
    left: 0;
    margin: 0 !important;
}

@media (max-width:600px){
    #login .lock {
        position: absolute;
        width: 37px;
        height: 37px;
        top: -3px;
        left: 30px !important;
        transform: none !important;
    }
    #login .logo {
        transform: scale(0.8) !important;
        left: -25px !important;
        max-width: 200px;
        width: 200px;
        margin: 30px 60px;
    }
}

@media (max-width:370px){
    .languages{
        top: -15px;
    }
    #login .lock{
        top: 30px;
    }
    #login .logo{
        top: 30px;
        margin-bottom: 50px;
    }
}

.gmnoprint{
    display: none !important;
}

img[alt="Google"] {
    display: none;
}


@media (max-width:370px){
    .locks-cost{
        position: relative;
    }
}