@font-face {
    font-family:'BeVietnam';
    src: url('../fonts/BeVietnam-Thin.ttf');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family:'BeVietnam';
    src: url('../fonts/BeVietnam-Light.ttf');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family:'BeVietnam';
    src: url('../fonts/BeVietnam-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family:'BeVietnam';
    src: url('../fonts/BeVietnam-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family:'BeVietnam';
    src: url('../fonts/BeVietnam-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family:'BeVietnam';
    src: url('../fonts/BeVietnam-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family:'BeVietnam';
    src: url('../fonts/BeVietnam-ExtraBold.ttf');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family:'Montserrat';
    src: url('../fonts/Montserrat-Light.ttf');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family:'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family:'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family:'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}




html, body { background-color: #F6F6F6; }
body { overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

.page { width: calc(100% - 400px); margin-left: 400px; padding: 20px 40px; }

h1 { color: #003262; font-family: 'Montserrat', sans-serif; font-size: 42px; text-align: center; font-weight: 700; }
h2 { color: #003262; font-family: 'Montserrat', sans-serif; font-size: 34px; text-align: center; font-weight: 700; }
h3 { color: #003262; font-family: 'Montserrat', sans-serif; font-size: 28px; text-align: center; font-weight: 700; }
h4 { color: #3d3540; font-family: 'Montserrat', sans-serif; font-size: 24px; text-align: center; font-weight: 700; }
h5 { color: #3d3540; font-family: 'Montserrat', sans-serif; font-size: 20px; text-align: center; font-weight: 600; }
p { font-family: 'BeVietnam' ,sans-serif; color: #3d3540; margin: 0px; }
.upper { text-transform: uppercase !important; }

.form-group-switch {
    margin-bottom: 15px;
    padding-top: 22px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.form-group-switch label.switch {
    margin-right: 10px;
}
.form-group-switch p { line-height: 22px; }
.switch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 24px;
    min-width: 54px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F64646;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}
.switch input:checked + .slider {
    background-color: #74D153;
}
.switch .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}
.switch input:checked + .slider:before {
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
}

/*-------- Buttons -------*/
.btn-primary { background-color: #0B1352; color: white; border: none; transition: background-color ease-in-out .2s; font-family: Comfortaa, sans-serif; font-weight: bold; height: calc(1.8125rem + 7px); padding: 0px 6px; font-size: .875rem; line-height: 1.5; outline: none !important; cursor: pointer !important; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.btn-primary.btn-light { background-color: #6BB0FE; }
.btn-primary.circular { border-radius: 50%; width: 45px; height: 45px; padding: 0px; }
.btn-primary.float { position: fixed; bottom: 30px; right: 30px; box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.3); z-index: 100; background-color: #6BB0FE; }
.btn-primary:hover { background-color: #113d7d; border: none; }
.btn-primary.btn-light:hover { background-color: #0069d9!important; color: white!important; }
.btn-primary:focus { color: #fff; background-color: #113d7d; border: none !important; }
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle { color: #fff; background-color: #113d7d; border: none; }
.btn-primary img { width: 60%; height: auto; max-width: 60%; max-height: 60%; }
.btn-primary.disabled, .btn-primary:disabled { color: #fff; background-color: #0B1352 !important; border-color: none; }
.btn-primary.btn-light.disabled, .btn-primary.btn-light:disabled { background-color: #80bafc!important; }
.close { color: white; }
.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover { color: white; }

/*------------ Forms-- ----------*/
.form-group { margin-bottom: 6px; }
.form-group label { font-family: Roboto-Regular, sans-serif; color: #5A5A5A; margin-bottom: 0px; font-size: 14px; }
.form-group .input-group .input-group-prepend { height: calc(1.8125rem + 2px); }
.form-group .input-group .input-group-prepend .input-group-text { border: 1px solid #bdbdbd; font-size: 13px; }
.form-control { height: calc(1.8125rem + 2px); padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: .2rem; border: 1px solid #bdbdbd; }
.form-control:focus { box-shadow: 0 0 0 2px #80bdff !important; border-color: #80bdff !important; }
.form-group-switch { margin-bottom: 15px; padding-top: 22px; display: flex; flex-direction: row; }
.form-group-switch label { font-family: Roboto-Regular, sans-serif; color: #5A5A5A; margin-bottom: 0px; font-size: 14px; margin-top: auto; margin-bottom: auto; }
.form-group-switch label.switch { margin-right: 10px; }

/*--------- Search Field ----------*/
div.search { display: flex; flex-direction: row; flex-wrap: nowrap; }
div.search input { border-radius: .2rem 0px 0px .2rem; border-right: none; width: 300px; }
div.search button { border-radius: 0px .2rem .2rem 0px; height: calc(1.8125rem + 2px); width: 52px; }

/*--------- Filters ----------*/
section.filters { display: flex; flex-direction: row; margin: 40px 0px 20px 0px; }
#search-result { display: none; }
#search-result.show { display: flex; flex-direction: row; }
#search-result label { color: #8b8b8b; font-family: 'BeVietnam', sans-serif;; font-size: 14px; margin-right: 20px; font-weight: 500; }
#search-result label.remove-filters { color: #0B1352; margin-right: 0px; cursor: pointer; }

/*--------- List ----------*/
ul { padding-inline-start: 0px; padding-left: 0px; list-style: none; }
ul li a { text-decoration: none !important; }
.li { 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0px;
    transition: all ease-in-out .3s;
    cursor: pointer;
    margin-bottom: 0px;
    flex-wrap: wrap;
    border-bottom: 1px solid #e8e8e8;
 }
.li:hover { 
    padding-left: 16px;
    background-color: white; 
} 
.li.stacked-data div { display: flex; flex-direction: column; }
.li label { 
    font-family: 'BeVietnam', sans-serif;
    color: #5a5a5a;
    font-size: 16px;
    cursor: pointer;
    line-height: 18px;
    margin-bottom: 4px;
    font-weight: 500;
    text-transform: capitalize;
 }
.li label.main { color: #003262; }

/* Alignment */
.centralize-row { display: flex; flex-direction: row; justify-content: center; align-items: center; }
.centralize-column { display: flex; flex-direction: column; justify-content: center; align-items: center; }


/*----------- MOBILE Settings ----------------*/
@media (max-width: 992px) {
    .page { margin-left: 0px; width: 100vw; }
    .desktop-only { display: none; }
    section.filters { justify-content: center; }
}