.login-box,
.register-box { width: 360px; }

@view-transition { navigation: auto; }
@media (max-width: 576px) {
    .login-box,
    .login-box, .register-box { margin-top: 0.5rem; min-width: 300px !important; margin: auto !important; }
}

.login-page, .register-page { -ms-flex-align: center; align-items: center; background: #e9ecef; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; height: 100vh; -ms-flex-pack: center; justify-content: center; }

.login-card-body,
.register-card-body { background: #ffffff; border-top: 0; color: #666; padding: 20px; }

.login-card-body .input-group .form-control,
.register-card-body .input-group .form-control { border-right: 0; }

.login-card-body .input-group .form-control:focus,
.register-card-body .input-group .form-control:focus { box-shadow: none; }

.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text { border-color: #80bdff; }

.login-card-body .input-group .form-control.is-valid:focus,
.register-card-body .input-group .form-control.is-valid:focus { box-shadow: none; }

.login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text { border-color: #28a745; }

.login-card-body .input-group .form-control.is-invalid:focus,
.register-card-body .input-group .form-control.is-invalid:focus { box-shadow: none; }

.login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text { border-color: #dc3545; }

.login-card-body .input-group .input-group-text,
.register-card-body .input-group .input-group-text { background-color: transparent; border-bottom-right-radius: 0.25rem; border-left: 0; border-top-right-radius: 0.25rem; color: #777; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }

.login-text { margin-bottom: 0.9rem; text-align: center; color: white; font-weight: 900; }
.login-text a { color: white; font-size: 1.7rem; font-weight: 900; filter: drop-shadow(1px 3px 2px #7979798c); text-align: center; }

.login_seperation { display: inline-block; vertical-align: middle; width: 100%; text-align: center; color: #91918F; line-height: 60px; }
.login_seperation:after, .login_seperation:before { content: " "; border-top: 1px solid #e5e5e5; width: 35%; display: inline-block; vertical-align: middle; }

.login-box-msg,
.register-box-msg { margin: 0; padding: 0 20px 20px; text-align: center; }

.text-sm { font-size: .875rem !important; }
.login-box-title3 { font-size: 1rem; color: #9e159e; }

body { background-image: url("../../Content/images/SHOPPING.jpg") !important; background-size: cover !important; background-repeat: repeat-y !important; height:auto !important; }
/*body::after { content: ''; background: #d845e3; width: 100%; height: 100%; position: absolute; opacity: 0.1; z-index: 1; top:0px; }*/

.register-box, .login-box { z-index: 2; min-width: 500px; max-width: 550px; position: relative; margin: auto 13rem; }
.register-page { align-items: end !important; }
.register-box .card { border-radius: 10px; box-shadow: 2px 3px 4px 2px #00000038; }
.register-box .card-body { border-radius: 10px; }

.step-box { position: absolute; display: flex; padding: 0rem 3rem; top: 3rem; width: 50%; right: 0; background: #ffffffa1; z-index: 2; align-items: center; }

.step-title { max-width: 50%; }
.step-title h1 { color: #a435b8; margin-bottom: 0; }

.step-bar { display: flex; margin: 0 auto; justify-content: space-between; position: relative; }
.step-bar::before { content: ''; width: 100%; height: 2px; position: absolute; background: purple; top: 50%; z-index: 2; }

.step-circle { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: #d4acd0; border-radius: 50px; border: 2px solid #7c217c; z-index: 3; color: #7c217c; font-weight: 500; font-size: 1.5rem; }
.step-circle.active { border: 3px solid #9549a2; background: #d4acd0; color: #89299a; box-shadow: 0px 0px 0px 5px #c99bd4ad; }
.step-circle.finished { border: 3px solid #89299a; background: #89299a; color: #fce0ff; }

.login-box-title { font-size: 1.8rem; color: #9e159e; }

.sub-label { position: absolute; display: block; font-size: 0.8rem; margin-top: -0.3rem; right: 0; padding: inherit; }

.login-box-title2 { font-size: 1.5rem; color: #89299a; margin-bottom: 0; display: flex; align-items: center; }

.soc-select-box { display: flex; height: 200px; justify-content: space-between; }

.soc-select-fb { height: 100%; flex-basis: 49%; background: #4867aa; border-radius: 5px; color: white; display: flex; flex-direction: column; cursor: pointer; }
.soc-select-fb:hover { background: #355096; }

.soc-select-line { flex-basis: 49%; background: #06C152; border-radius: 5px; color: white; display: flex; flex-direction: column; cursor: pointer; }
.soc-select-line:hover { background: #119247; }

.soc-icon { display: flex; justify-content: center; flex-basis: 65%; align-items: flex-end; }
.soc-icon i { font-size: 6rem; }

.soc-text { display: flex; font-size: 1.2rem; font-weight: 900; justify-content: center; align-items: flex-end; margin-top: 1rem; }
.soc-text label { display: flex; font-size: 1.2rem; font-weight: 900; justify-content: center; align-items: flex-end; }

[class^=register-step]:not(.register-step-1,.register-step-noExistMer) { display: none; }
.soc-list::-webkit-scrollbar { width: 5px; }
.soc-list::-webkit-scrollbar-track { background: #f1f1f1; }
.soc-list::-webkit-scrollbar-thumb { background: #888; }
.soc-list::-webkit-scrollbar-thumb:hover { background: #555; }
.soc-checkbox { position: relative; margin-bottom: 0.5rem; }
.soc-checkbox:last-child { margin: 0; }
.soc-checkbox-item { appearance: none; width: 100%; height: 100%; position: absolute; cursor: pointer !important; }
.soc-checkbox-label { margin: 0; padding: 1rem; width: 100%; background: #d7ceda40; border-radius: 5px; }

input.soc-checkbox-item:checked ~ .soc-checkbox-label { background: #8330ae96; color: white; }
input.soc-checkbox-item:hover:not(:checked) ~ .soc-checkbox-label { background: #922cc638; }

.tooltip > .tooltip-inner { z-index: 30; background-color: #CE0000 !important; opacity: 0.8; }

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before { z-index: 30; border-top-color: #CE0000 !important; opacity: 0.8; }
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before { z-index: 30; border-right-color: #CE0000 !important; opacity: 0.8; }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before { z-index: 30; border-bottom-color: #CE0000 !important; opacity: 0.8; }
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^=left] .arrow::before { border-left-color: #CE0000 !important; opacity: 0.8; z-index: 30; }

/*.active { background-color: rgba(255,255,255,.1); color: #fff; }*/

.owl-height { transition:height .2s ease-in-out }
#merShiWaySel + span, #merPicPoiSel + span, #merPayWaySel + span { width: 66.6667% !important; }

#getHeadImg { width:30px; height:30px; border-radius:50px;}

[contenteditable] { outline: 0px solid transparent; caret-color: transparent }
@media screen and (max-width: 1023px) {
    .register-box { width: 90%; margin: auto !important; }
    /*.step-box { width: 100%; padding: 0rem 2rem; height: 7rem; flex-wrap: wrap; justify-content: center; }*/
    .step-title { max-width: 100%; }
    .sub-label { position: absolute; display: inline-block; font-size: 0.8rem; bottom: 0; padding: inherit; margin-top: unset; right: unset; }
    .register-card-body { overflow: auto; }
    .card { overflow: hidden; }
    #merShiWaySel + span, #merPicPoiSel + span, #merPayWaySel + span { width: 100% !important; }
    .register-step-3 .select2{ width: 100% !important; }
    .register-step-3 [name=addressDiv] > [class*=Gi] + .select2 { width: 33% !important; }
    .step-circle { width: 40px; height: 40px; font-size:1rem; }
}

@media screen and (min-width: 1024px) {
    .register-step-3 div:not([name=addressDiv]) > .select2 { width: 100% !important; }
    .register-step-3 .select2:not([class^=Gi]) { width: 100% !important; }
    .register-step-3 [name=addressDiv] > [class*=Gi] + .select2 { width: 33% !important; }
}