/*
    Theme Name: ABP Base Theme
    Author: Anh Bui
    Author Email: anhbp.uet@gmail.com
    Description: AnhBP Custom theme
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: <https://www.gnu.org/licenses/gpl-2.0.html>
*/

@import url('css/fonts.css');

:root {
    --main-blue-color: #034EA2;
    --dark-blue-color: #003E84;
    --light-blue-color: #00ADFF;
    --light-grey-color: #F0F3FF;
    --dark-grey-color: #535353;
}

@media (min-width: 768px) {
    /* scrollbar */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.3);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }

    ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(255, 255, 255, 0.3);
    }
}

body {
    margin: 0;
    box-sizing: border-box;
}
button {
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    outline: none;
}
button:focus {
    outline: none;
}
.content-wrapper {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1600px) {
    .content-wrapper {
        max-width: 1600px;
    }
}
.text-blue {
    color: var(--main-blue-color);
}
.text-white {
    color: #FFFFFF;
}

.custom-selector {
    visibility:hidden;
    padding-right:10px;
}
.s-hidden {
    visibility:hidden;
    padding-right:10px;
}
.custom-select-container {
    cursor: pointer;
    display: inline-block;
    position:relative;
    background-color: #ffffff;
    width: 100%;
    padding: 8px;
}
.styledSelect {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color: #ffffff;
    padding: 16px 30px 16px 8px;
    font-size: 16px;
    line-height: 19px;
    color: var(--light-blue-color);
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.styledSelect:after {
    content: "";
    width: 28px;
    height: 28px;
    position:absolute;
    top: 50%;
    right: 8px;
    margin-top: -14px;
    background-image: url("css/img/icons/arrow-down-right-grey.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.styledSelect:active, .styledSelect.active {
    background-color:#eee;
}
.custom-select-options {
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index: 8;
    margin:0 0;
    padding:0 8px;
    list-style:none;
    background-color: #ffffff;
    max-height: 400px;
    overflow: auto;
}
.custom-select-options li {
    padding: 16px 30px 16px 0;
    border-bottom: 1px solid var(--dark-grey-color);
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: var(--dark-grey-color);
    position: relative;
}
.custom-select-options li.active::after {
    content: "";
    width: 28px;
    height: 28px;
    position:absolute;
    top: 50%;
    right: 0;
    margin-top: -14px;
    background-image: url("css/img/icons/arrow-up-right-grey.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.custom-select-options li:hover,
.custom-select-options li.active {
    color: var(--light-blue-color);
}