:root {
    --font-family: 'Prompt';

    --cr-light: #ffffff;
    --cr-black: #151515;
    --cr-dark: #333333;
    --cr-lightdark: #444444;
    --cr-gray: #666666;
    --cr-lightgray: #999999;
    --cr-primary: #006EAB;
    --cr-primary-dark: #183568;
    --cr-snow: #f7f7f7;
    --cr-border: #294472;
    --cr-border-fieldset: #E5EDF0;
    --cr-error: #F55C5C;

    --typo-md: 18px;
    --typo-sm: 16px;
    --typo-xs: 14px;

    --fw-semibold: 600;
    --fw-normal: 400;

    --lh-xl: 38px;
    --lh-lg: 28px;
    --lh-normal: 26px;

    --tsition: all 400ms ease;
}

.locationSearch{position: relative; padding: 64px 0;}
.locationSearch .loader {border: 5px solid var(--cr-primary);border-radius: 100%;border-top-color: #5983cd; width: 48px;height: 48px; margin: auto;
    -webkit-animation: loaderSpin 2000ms linear infinite;
    animation: loaderSpin 2000ms linear infinite;
}
@keyframes loaderSpin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
.locationSearch .nowrap{white-space: nowrap;}
.locationSearch .locationSearch-container{padding: 0 24px; width: 100%; max-width: 1800px; margin: 0 auto;}
.locationSearch .btn.btn-primary{color: var(--cr-light); background-color: var(--cr-primary);}
.locationSearch .btn.btn-primary:hover{background-color: var(--cr-primary-dark);}

.locationSearch-container > .h-title{text-align: center; margin: 0 0 48px; color: var(--cr-lightdark); font-family: var(--font-family);
    font-size: var(--typo-md); font-weight: var(--fw-normal); line-height: var(--lh-normal);
}
.locationSearch-container > .sc-inner{display: flex; margin: 0 -16px; min-height: 552px;}
.locationSearch-container > .sc-inner > div{padding: 0 16px}

.locationSearch-content{flex: 0 0 40%;}
.locationSearch-content .form-default{width: 100%; min-width: 476px;}
.locationSearch-content .form-fieldset{min-width: 0; padding: 0; margin: 0; border: 0; height: auto; transition: var(--tsition);}
.locationSearch-content .form-fieldset.hide{height: 0px; overflow: hidden;}
.locationSearch-content .form-fieldset.form-fieldset-result{margin-top: 0px;}
.locationSearch-content .form-fieldset.form-fieldset-result.show{margin-top: 26px;}
.locationSearch-content .form-fieldset.form-fieldset-result .form-legend{padding: 4px 24px; background-color: var(--cr-border-fieldset);
    border-radius: 20px 20px 0 0; border: 1px solid var(--cr-border-fieldset); 
}
.locationSearch-content .form-legend{font-size: var(--typo-md); font-weight: var(--fw-semibold); color: var(--cr-primary-dark);
    line-height: var(--lh-xl); margin: 0; font-family: var(--font-family);
}
.locationSearch-content .form-legend.hide{display: none;}
.locationSearch-content .form-row{display: flex; flex-wrap: wrap; margin: 0 -12px}
.locationSearch-content .form-row > .form-col{padding: 0 12px; flex: 1 0 0%;}
.locationSearch-content .form-group{margin-bottom: 16px;}
.locationSearch-content .form-label{font-family: var(--font-family); color: var(--cr-dark);font-size: var(--typo-md); font-weight: var(--fw-normal); 
    line-height: var(--lh-normal); margin: 0;
}
.locationSearch-content .form-select{padding: 0 16px; color: var(--cr-primary-dark); background-color: var(--cr-light);
    background-size: 12px 7px; background-repeat: no-repeat; background-position: right 24px center;
    background-image: url(../img/icon/arrow.svg);
}
.locationSearch-content .form-select.disabled{opacity: 0.5; pointer-events: none;}
.locationSearch-content .form-select.inselected{color: var(--cr-gray);}
.locationSearch-content .form-select,
.locationSearch-content .form-control{font-family: var(--font-family); font-size: var(--typo-sm); font-weight: var(--fw-normal); 
    line-height: var(--lh-normal); min-height: 40px; border: 1px solid var(--cr-border); border-radius: 18.5px;
}
.locationSearch-content .form-select:focus,
.locationSearch-content .form-control:focus{box-shadow: none;}
.locationSearch-content .form-control{padding: 0 24px; color: var(--cr-primary-dark);}
.locationSearch-content .form-action .btn{width: 100%; font-family: var(--font-family); font-weight: var(--fw-semibold);
    padding: 10px 40px; min-height: 48px; border-radius: 100px; transition: var(--tsition); font-size: var(--typo-md); line-height: var(--lh-lg);
}
.locationSearch-content .txt-alert{text-align: center; color: var(--cr-error); display: block; margin: 24px 0 0;
    font-family: var(--font-family); font-size: var(--typo-xs); font-weight: var(--fw-normal); line-height: var(--lh-normal);
}

.locationSearch-list{padding: 0; margin: 0; list-style: none; border-radius: 0 0 20px 20px; border:1px solid var(--cr-border-fieldset);
    max-height: calc(61px * 4); overflow-y: auto;
}
.locationSearch-list > li + li{border-top:1px solid var(--cr-border-fieldset);}
.locationSearch-list > li.hide{display: none;}
.locationSearch-list > li.no-data{text-align: center;}
.locationSearch-list .wrapper{padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px;}
.locationSearch-list .txt{flex: 1 0 0%; margin: 0; color: var(--cr-primary-dark);
    font-family: var(--font-family); font-weight: var(--fw-normal); font-size: var(--typo-sm); line-height: var(--lh-normal);
    -webkit-line-clamp: 2; max-height: calc(var(--lh-normal) * 2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
}
.locationSearch-list .action{flex: 0 0 auto;}
.locationSearch-list .btn{display: flex; justify-content: center; align-items: center; gap: 4px; padding: 1px 5px; min-width: 109px;
    font-family: var(--font-family); font-weight: var(--fw-normal); font-size: var(--typo-xs); line-height: var(--lh-lg);
}
.locationSearch-list .btn .icon{width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;}

.locationSearch-map{flex: 1 0 0%;}
.locationSearch-map .figure-iframe{position: relative; height: 100%; margin: 0;}
.locationSearch-map .figure-iframe .loader-wrapper{position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--cr-snow);}
.locationSearch-map .figure-iframe .loader{position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0;}
.locationSearch-map .figure-iframe iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; padding: 0; margin: 0;
    transition: var(--tsition); opacity: 0; pointer-events: none; z-index: -1;
}
.locationSearch-map .figure-iframe iframe.active{opacity: 1; pointer-events: visible; z-index: 0;}

@media screen and (max-width: 1800px) {
    .locationSearch .locationSearch-container{padding: 0 76px;}
}
@media screen and (max-width: 1440px) {
    .locationSearch .locationSearch-container{padding: 0 66px;}
}
@media screen and (max-width: 1200px) {
    .locationSearch .locationSearch-container{padding: 0 46px;}

    .locationSearch-content{flex: 0 0 auto;}
    .locationSearch-content .form-default {min-width: 360px;}
    .locationSearch-content .form-row > .form-col{flex: 0 0 100%;}
}
@media screen and (max-width: 1000px) {
    .locationSearch{padding: 40px 0;}
    .locationSearch .locationSearch-container{padding: 0 38px;}

    .locationSearch-container > .h-title{margin: 0 0 40px;}
}
@media screen and (max-width: 991px) {
    .locationSearch-container > .sc-inner{flex-direction: column; gap: 24px; min-height: inherit;}

    .locationSearch-content .form-default {width: 100%; min-width: inherit;}
    .locationSearch-content .form-fieldset.form-fieldset-result.show {margin-top: 32px;}

    .locationSearch-map .figure-iframe{height: auto; padding-bottom: 100%;}
}
@media screen and (max-width: 750px) {
    .locationSearch .locationSearch-container{padding: 0 16px;}

    .locationSearch-content .form-row > .form-col{flex: 0 0 100%;}

    .locationSearch-map .figure-iframe{padding-bottom: calc(74dvh);}
}