/* VAR */
:root {
    --bg-color:#229fe1;
    --bg-color-lt:#33B0F2;
    --bg-color-opc:#33B0F2;
    --link-color:#229fe1;
    --link-hover-color:#000;
    --link-active-color:#444;
    --button-color:#fff;
    --button-bg:#229fe1;
    --button-hover-bg:#33B0F2;
    --button-hover-color:#fff;
    --link-color-wt:#fff;
    --link-color-grey:#eee;
}

/* COMMON */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

body {
    font-family:Archivo, Arial;
    font-size: 14px;
    padding: 0;
    margin: 0;
}

h4,.h4{ font-size: 24px; line-height: 25px; }

a{ color: var(--link-color); cursor: pointer; }
a:hover{ color: var(--link-hover-color); text-decoration:none; }

.btn{ padding: 6px 11px; border-radius: 4px; }

.btn-primary,.btn-primary.disabled, .btn-primary:disabled { color: var(--button-color);  background-color: var(--button-bg); border-color: var(--button-bg); }
.btn-outline-primary{ color: var(--button-color); background:none; border-color: var(--button-bg); }
.btn-primary:hover,.btn-outline-primary:hover,.btn-primary:focus{ color: var(--button-hover-color);  background-color: var(--button-hover-bg); border-color: var(--button-hover-bg); }

a,input,textarea,select,.form-control, button,.btn,.form-select{ font-size: 14px; outline: none; }

.fa-nm{ font-weight: 400; }

.btn:focus, button:focus, input:focus,textarea:focus, select:focus a:focus,.form-select:focus{ box-shadow: none !important; }
.btn:click{ box-shadow: none; }

.m-0{ margin: 0px !important; }
.m-1{ margin: 5px !important; }
.m-2{ margin: 10px !important; }
.m-3{ margin: 15px !important; }
.m-4{ margin: 20px !important; }
.m-5{ margin: 25px !important; }
.m-6{ margin: 30px !important; }

.mt-0{ margin-top: 0px !important; }
.mt-1{ margin-top: 5px !important; }
.mt-2{ margin-top: 10px !important; }
.mt-3{ margin-top: 15px !important; }
.mt-4{ margin-top: 20px !important; }
.mt-5{ margin-top: 25px !important; }
.mt-6{ margin-top: 30px !important; }

.mb-0{ margin-bottom: 0px !important; }
.mb-1{ margin-bottom: 5px !important; }
.mb-2{ margin-bottom: 10px !important; }
.mb-3{ margin-bottom: 15px !important; }
.mb-4{ margin-bottom: 20px !important; }
.mb-5{ margin-bottom: 25px !important; }
.mb-6{ margin-bottom: 30px !important; }

.ms-0{ margin-left: 0px !important; }
.ms-1{ margin-left: 5px !important; }
.ms-2{ margin-left: 10px !important; }
.ms-21{ margin-left: 12px !important; }
.ms-3{ margin-left: 15px !important; }
.ms-4{ margin-left: 20px !important; }
.ms-5{ margin-left: 25px !important; }
.ms-6{ margin-left: 30px !important; }

.me-0{ margin-right: 0px !important; }
.me-1{ margin-right: 5px !important; }
.me-2{ margin-right: 10px !important; }
.me-3{ margin-right: 15px !important; }
.me-4{ margin-right: 20px !important; }
.me-5{ margin-right: 25px !important; }
.me-6{ margin-right: 30px !important; }

.p-0{ padding: 0px !important; }
.p-1{ padding: 5px !important; }
.p-2{ padding: 10px !important; }
.p-3{ padding: 15px !important; }
.p-4{ padding: 20px !important; }
.p-5{ padding: 25px !important; }
.p-6{ padding: 30px !important; }

.pt-0{ padding-top: 0px !important; }
.pt-1{ padding-top: 5px !important; }
.pt-2{ padding-top: 10px !important; }
.pt-3{ padding-top: 15px !important; }
.pt-4{ padding-top: 20px !important; }
.pt-5{ padding-top: 25px !important; }
.pt-6{ padding-top: 30px !important; }

.pb-0{ padding-bottom: 0px !important; }
.pb-1{ padding-bottom: 5px !important; }
.pb-2{ padding-bottom: 10px !important; }
.pb-3{ padding-bottom: 15px !important; }
.pb-4{ padding-bottom: 20px !important; }
.pb-5{ padding-bottom: 25px !important; }
.pb-6{ padding-bottom: 30px !important; }

.ps-0{ padding-left: 0px !important; }
.ps-1{ padding-left: 5px !important; }
.ps-2{ padding-left: 10px !important; }
.ps-3{ padding-left: 15px !important; }
.ps-4{ padding-left: 20px !important; }
.ps-5{ padding-left: 25px !important; }
.ps-6{ padding-left: 30px !important; }

.pe-0{ padding-right: 0px !important; }
.pe-1{ padding-right: 5px !important; }
.pe-2{ padding-right: 10px !important; }
.pe-3{ padding-right: 15px !important; }
.pe-4{ padding-right: 20px !important; }
.pe-5{ padding-right: 25px !important; }
.pe-6{ padding-right: 30px !important; }

.px-0{ padding-left:0px !important; padding-right:0px !important;  }
.px-1{ padding-left:5px !important; padding-right:5px !important;  }
.px-2{ padding-left:10px !important; padding-right:10px !important;  }
.px-3{ padding-left:15px !important; padding-right:15px !important;  }
.px-4{ padding-left:20px !important; padding-right:20px !important;  }
.px-5{ padding-left:25px !important; padding-right:25px !important;  }
.px-6{ padding-left:30px !important; padding-right:30px !important;  }

.py-0{ padding-top:0px !important; padding-bottom:0px !important;  }
.py-1{ padding-top:5px !important; padding-bottom:5px !important;  }
.py-2{ padding-top:10px !important; padding-bottom:10px !important;  }
.py-3{ padding-top:15px !important; padding-bottom:15px !important;  }
.py-4{ padding-top:20px !important; padding-bottom:20px !important;  }
.py-5{ padding-top:25px !important; padding-bottom:25px !important;  }
.py-6{ padding-top:30px !important; padding-bottom:30px !important;  }

.border-bottom{ border-bottom: 1px solid #e9e9e9 !important; }

.btn-user img, img.rounded-circle, img.img-circle, img.rounded{ background: #fff; }

h6 .float-end{ margin-top: 1px; }
.nav-link{ padding: 7px; }
.navbar{ padding-top: 8px; padding-bottom: 8px; }
.navbar-brand{ padding: 0; margin-right: 0; }
.navbar-nav{ margin: auto; }
.navbar-nav .nav-link{ font-weight: bold; margin: 0 10px; color: var(--link-color-wt); }
.navbar-nav .nav-link:hover{ color: var(--link-color-grey); }
.navbar-toggler{ margin-left:5px; }
.navbar-toggler .navbar-toggler-icon{ width: auto; }
.navbar-toggler-icon i{ color: #eee; font-size:21px; padding:5px 7px; border:1px solid #eee; border-radius:4px; }

.modal-content{ border:none; }
.modal-header{ background:var(--bg-color-opc); color: #fff; border:0px solid #fff; padding:11px 15px; }
.modal-header .btn{ padding: 0; height: auto; font-size: 30px; line-height: 16px; border: none; color: #ddd; }
.modal-body{ padding: 15px; }
.modal-title{ line-height: 24px; font-size: 18px; }
.modal-footer{ padding:4px 12px; background: #efefef; }
.modal-footer .btn{ padding:4px 11px; }

.pac-container{ z-index: 10000 !important; }

.input-group-text,.dropdown-menu,.navbar-brand,.h6, h6{ font-size: 16px; }

.dropdown-menu{ padding: 8px 0; }
.dropdown-item{ padding: 4px 16px }

.g-3, .gy-3 { --bs-gutter-y: 15px; }
.g-4, .gy-4 { --bs-gutter-y: 20px; }

.form-control,.input-group-text{ padding: 6px 12px; }
.form-select{ padding:6px 30px 6px 12px; }

p{ margin-bottom: 10px; }

.form-box .form-label{ margin-bottom: 0; }
.form-box .form-control{ background-color: transparent; border: none; border-bottom:2px solid #ddd; border-radius: 0px; padding-top:3; padding-left: 0; }
.form-box .invalid-feedback,.form-box .errorMessage{ margin-top:6px; line-height: 14px; }
.form-box input.error,.form-box .has-error input,.form-box .has-error select, .form-box .has-error textarea{ 
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + .75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(.375em + .1875rem) center !important;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
}
.form-box .has-error .invalid-feedback{ display: block;  }
.form-box .errorMessage{ font-size: .875em; color: #dc3545; }

.alert{ padding: 10px 15px; }
.alert .i-flash-close{ text-decoration: navajowhite; font-size: 15px; line-height: 16px; color: #fff; float: right; cursor: pointer; background: #222; width: 15px; height: 15px; text-align: center; border-radius: 50%; text-transform: uppercase; letter-spacing: 0px; margin-right: -5px; margin-top: 3px; }

.container{}

.gpb{ border:1px solid #ddd; padding:1px; }

.dropdown-box{ margin-top:13px !important; background: none repeat scroll 0 0 rgba(255, 255, 255, 0.97); border: 1px solid rgba(0,0,0,.1); border-radius:0 0 4px 4px; box-shadow: 0 6px 12px rgba(0,0,0,.175); }
.dropdown-box:not(.nar)::before{ content:" "; position: absolute; border:12px solid transparent; border-bottom-color: #ddd; right: 1px; top:-24px; }
.dropdown-box .divider{ height: 1px; margin: 5px 0; overflow: hidden; background-color: #e5e5e5; }
.dropdown-box.hd{ font-size:14px;  padding: 0; width: 320px; }
.dropdown-box h4 i{ width: 14px; text-align: center; margin-right:4px; }
.dropdown-box h4{ font-size: 14px; display: block; margin: 0; padding:10px; line-height: 16px; font-weight: bold; background: #efefef; border-bottom:1px solid #e9e9e9; }
.dropdown-box .ftr{ background:#f5f5f5; border-top:1px solid #f0f0f0; padding: 8px; text-align: center; font-size: 14px; line-height: 14px; }
.dropdown-box p{ text-align: center; margin-top: 10px; }
.dropdown-box .content{ overflow-y: auto; max-height: 200px; }

.btn-group .btn.show.har:after{ content:" "; position: absolute; border:12px solid transparent; border-bottom-color: #e9e9e9; top: 27px; left:6px; }

.js-loading i{  -webkit-animation:spin 0.7s linear infinite;
    -moz-animation:spin 0.7s linear infinite;
    animation:spin 0.7s linear infinite; 
}
.js-processing{ font-size: 0px !important;  }
.js-processing > *{ display: none; }
.js-processing::after{
    position:relative; z-index:1;  border:5px solid rgba(250,250,250,0.5); border-top: 5px solid #fff; border-radius: 50%; height: 21px; width: 21px;  animation: spin 0.7s linear infinite; display: inline-block;
    content:" ";
}
.js-processing.dark::after{ border:5px solid rgba(0,0,0,0.12); border-top: 5px solid #222; }

@media (min-width: 992px){
    .navbar-toggler{ display: none; }
}

@media (max-width: 1100px){
    .hdn-lx{ display: none; }
}

@media (max-width: 991px){
    .hdn-lg{ display: none; }
    .navbar-nav{ padding-top: 10px; }
    .navbar-nav .nav-link{ text-align: right; }
    .offcanvas-collapse {
        position: fixed;
        top: 51px;
        bottom: 0;
        left: 100%;
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        visibility: hidden;
        background-color: rgba(0,0,0,0.9);
        transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    }
    .offcanvas-collapse.open {
        visibility: visible;
        transform: translateX(-100%);
    }
    .p-0-lg{ padding: 0px !important; }
    .p-5-lg{ padding:25px !important; }
    .ps-4-lg{ padding-left:20px !important; }
    .p-3-lg{ padding:15px !important; }
    .mb-3-lg{ margin-bottom: 15px !important; }

@media (max-width: 767px){
    .m-0-md{ margin: 0px !important; }
    .me-0-md{ margin-right: 0px !important; }
    .p-0-md{ padding: 0px !important; }
    .hdn-md{ display: none; }
    .m-0-md{ margin: 0px !important; }
    .px-15-md{ padding-left:15px; padding-right: 15px; }

    .mt-1-md{ margin-top:5px !important; }
    .mb-3-md{ margin-bottom: 15px !important; }
    .pb-3-md{ padding-bottom: 15px !important; } 
    .p-4-md{ padding:20px !important; }
}

@media (max-width: 600px){
    .hdn-sm{ display: none; }
}
@media (max-width: 575px){
    .modal-sm { max-width: 300px; margin-right: auto; margin-left: auto; }
}
@media (max-width: 520px){
    .m-0-ss{ margin: 0px !important; }
    .mb-3-ss{ margin-bottom: 15px !important; }
    .pt-3-ss{ padding-top: 15px !important; }
    .hdn-ss{ display: none !important; }
    .dropdown-box{ margin-top:9px !important; }
    .btn-group .btn.show.har::after{ top: 18px; }
}

@media (max-width: 460px){
    .hdn-sx{ display: none !important; }
    .mb-3-sx{ margin-bottom: 15px !important; }
    .p-4-sx{ padding:4px !important; }
    .px-1-sx{ padding-left: 5px !important; padding-right: 5px !important; }
    .px-2-sx{ padding-left:10px !important; padding-right: 10px !important; }
}

@media (max-width: 360px){
    .hdn-sxx{ display: none !important; }
    .px-3-sxx{ padding-left:15px !important; padding-right: 15px !important; }
}