/*====================================================

    CSS INDEX
    __________________________________________________

    1.  Basic Styles
    2.  Header & Navbar 
    3.  Page Banner
    4.  Publication
    5.  Affiliated Partners
    6.  Forum Page 
    7.  Forum Page 2
    8.  BSIA News
    9.  Search Main-Search
    10. Publication Guidance
    11. Publication Latest Release
    12. Main Search 1
    13. Footer Styles 

    ____________________________________________________

====================================================*/

/* Barlow font family */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* =============
    Basic Styles
   ============== */

    :root{
        --primary: #304055;
        --lightprimary : #415167 ;
        --danger: #C43B43;
        --light: #E7E7E7;
        --gray: #A7A7A7;
        --darkgray : #707070;
        --white: #fff;
        --info: #F1F8FE;
        --lightblue: #53D8FB;
        --warning: #F1C40E;
        --darkblue: #2892D7;
        --purple: #CB9CF2;
        --success : #55BE13;
        --font3: "Barlow", sans-serif;
    }

    *{
        font-family: 'Arial', sans-serif;
        box-sizing: border-box;
    }

    /* text colors */
    .text-primary{
        color: var(--primary) !important;
    }
    .text-danger{
        color: var(--danger) !important;
    }
    .text-light{
        color: var(--light) !important;
    }
    .text-gray{
        color: var(--gray) !important;
    }
    .text-darkgray{
        color: var(--darkgray) !important;
    }
    .text-white{
        color: var(--white) !important;
    }
    .text-info{
        color: var(--info) !important;
    }
    .text-lightblue{
        color: var(--lightblue) !important;
    }
    .text-warning{
        color: var(--warning) !important;
    }
    .text-darkblue{
        color: var(--darkblue) !important;
    }
    .text-purple{
        color: var(--purple) !important;
    }
    .text-success{
        color: var(--success) !important;
    }
    .text-lightprimary{
        color: var(--lightprimary) !important;
    }

    /* bg colors */
    .bg-primary{
        background-color: var(--primary) !important;
    }
    .bg-danger{
        background-color: var(--danger) !important;
    }
    .bg-light{
        background-color: var(--light) !important;
    }
    .bg-gray{
        background-color: var(--gray) !important;
    }
    .bg-darkgray{
        background-color: var(--darkgray) !important;
    }
    .bg-white{
        background-color: var(--white) !important;
    }
    .bg-info{
        background-color: var(--info) !important;
    }
    .bg-lightblue{
        background-color: var(--lightblue) !important;
    }
    .bg-warning{
        background-color: var(--warning) !important;
    }
    .bg-darkblue{
        background-color: var(--darkblue) !important;
    }
    .bg-purple{
        background-color: var(--purple) !important;
    }
    .bg-success{
        background-color: var(--success) !important;
    }

    /* border colors */
    .border-primary{
        border-color: var(--primary) !important;
    }
    .border-danger{
        border-color: var(--danger) !important;
    }
    .border-light{
        border-color: var(--light) !important;
    }
    .border-gray{
        border-color: var(--gray) !important;
    }
    .border-darkgray{
        border-color: var(--darkgray) !important;
    }
    .border-white{
        border-color: var(--white) !important;
    }
    .border-info{
        border-color: var(--info) !important;
    }
    .border-lightblue{
        border-color: var(--lightblue) !important;
    }
    .border-warning{
        border-color: var(--warning) !important;
    }
    .border-darkblue{
        border-color: var(--darkblue) !important;
    }
    .border-purple{
        border-color: var(--purple) !important;
    }
    .border-success{
        border-color: var(--success) !important;
    }

    /* buttons */
    .btn-primary{
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
        min-width: 120px;
        font-size: 10px;
        border-radius:5px;
    }
    .btn-primary:hover{
        background-color: #273446 !important;
        border-color: #273446 !important;
    }
    .btn-success{
        background-color: var(--success) !important;
        border-color: var(--success) !important;
        min-width: 120px;
        font-size: 10px;
        border-radius:5px;
    }
    .btn-success:hover{
        background-color: #228B22 !important;
        border-color: #228B22 !important;
    }
    .btn-danger{
        background-color: var(--danger) !important;
        min-width: 120px;
        font-size: 10px;
        border-radius:5px;
    }
    .btn-danger:hover{
        background-color: #a72c35 !important;
        border-color: #a72c35 !important;
    }
    .btn-light{
        background-color: var(--light) !important;
        min-width: 120px;
        font-size: 10px;
        border-radius:5px;
    }
    .btn-light:hover{
        background-color: #c7c7c7 !important;
        border-color: #c7c7c7 !important;
    }
    .btn-outline-light{
        border:2px solid var(--light);
        background-color: unset;
        min-width: 120px;
        font-size: 10px;
        border-radius:5px;
        color: var(--darkgray);
    }
    .btn-outline-light:hover{
        background-color: var(--light) !important;
        border-color: var(--light) !important;
        color: var(--darkgray) !important;
    }
    .btn-gray{
        background-color: var(--gray) !important;
        min-width: 120px;
        font-size: 10px;
        border-radius:5px;
    }
    .btn-gray:hover{
        background-color: #959191 !important;
        border-color: #959191 !important;
    }
    .btn-outline-gray{
        border:2px solid var(--gray);
        background-color: unset;
        color: var(--gray);
        min-width: 120px;
        font-size: 10px;
        border-radius:5px;
    }
    .btn-outline-gray:hover{
        background-color: var(--gray) !important;
        border-color: var(--gray) !important;
    }
    .btn-darkgray{
        background-color: var(--darkgray) !important;
        color: var(--white) !important;
        min-width: 120px;
        font-size: 10px;
        border-radius:5px;
    }
    .btn-darkgray:hover{
        background-color: #565555 !important;
        border-color: #565555 !important;
        color: var(--white) !important;
    }
    .btn-info{
        background-color: var(--info) !important;
        min-width: 120px;
        font-size: 10px;
        border-radius:5px;
    }
    .btn-info:hover{
        background-color:  #bdc7d1 !important;
        border-color:  #bdc7d1 !important;
    }

    /* Font Families */
    .font-1{
    font-family: 'Arial', sans-serif;
    }
    .font-2{
    font-family:'Georgia', serif;
    }
    .font-3{
    font-family: var(--font3);
    }

    /* other css */
    body{
        overflow-x: hidden ;
    }
    .w-unset{
        width: unset;
        min-width: unset;
        max-width: unset;
    }
    .fs-1{
        line-height: calc(1.375rem + 1.5vw) !important;
    }
    .fs-5{
        line-height: 30px;
    }
    .fs-6{
        font-size: 16px;
        line-height: 19px;
    }
    .fs-7{
        font-size: 14px;
        line-height: 24px;
    }
    .fs-8{
        font-size: 12px;
    }
    .fs-9{
        font-size: 10px;
        line-height: 12px;
    }
    .fs-10{
        font-size: 8px;
        line-height: 12px;
    }
    .p-5{
        padding: 50px !important;
    }
    @media(min-width:1200px){
        .p-xl-40{
            padding: 40px !important;
        }
    }
    @media(min-width:1400px){
        .p-xxl-40{
            padding: 40px !important;
        }
    }
    .py-40{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .p-30{
        padding: 30px !important;
    }
    a{
        color: inherit;
        text-decoration: none;
        box-shadow: inherit !important;
    }
    .btn{
        box-shadow: inherit !important;
    }
    .mb-6{
        margin-bottom: 60px !important;
    }
    .mb-7{
        margin-bottom: 70px !important;
    }
    .mb-8{
        margin-bottom: 80px !important;
    }
    .mb-40{
        margin-bottom: 40px !important;
    }
    a:hover{
        color: inherit;
        text-decoration: none;
    }
    @media (min-width: 1400px) {
        .container{
            max-width: 1400px;
        }
    }
    @media (min-width: 992px) {
        .text-lg-justify{
            text-align: justify;
        }
    }
    .lh-0{
        line-height: 0  ;
    }
    .error{
        color: var(--danger);
        font-size: 12px;
    }
    /* ======================
       Header & Navbar
    ====================== */

    #nav-serachbar{
        width: 100%;
    }
    .nav-link{
        background-color: var(--lightprimary);
        min-width: 129px;
        color:var(--white) !important;
    }
    .nav-link.active, .nav-link:hover, .nav-link:focus{
        background-color: var(--danger);
        color:var(--white) !important; 
    }
    @media(min-width:1200px){
        .header-main .navbar{
            background-color: var(--primary);
        }
    }
    .header-main [type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
        height: 10px;
        width: 10px;
        background-image: url("../../includes/images/icons/times.png");
        background-size: 10px 10px;
    }
    .nav-serachbar input::placeholder{
    color: var(--primary);
    }
    .dropdown-menu li a:hover{
        background-color: var(--lightprimary) !important;
        color: var(--white) !important;
    }

    /* ======================
       Page Banner 
    ====================== */

    .banner-main{
        background: url(../../includes/images/banner.png)no-repeat;
        background-size: cover;
        min-height: 430px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-position: center;
    }
    .banner-content{
        max-width: 450px;
    }

    /* ======================
       Publication
    ====================== */

    .content-main textarea::placeholder{
        font-style: italic;
        font-size: 12px;
        color: var(--primary);
    }
    .content-main textarea:focus{
        border: 1px solid var(--primary);
        border-color: var(--primary) !important;
        outline: unset;
    }
    .cust_height425{
        min-height: 425px;
    }
    .cust_height200{
        min-height: 200px;
    }
    .cust_height180{
        min-height: 180px;
    }
    .cust_height140{
        min-height: 140px;
    }
    .bsiacard{
        background-color: var(--light);
        background-size: cover;
        min-height: 330px;
    }
    @media(min-width:1200px){
        .bsiacard{
            min-height: 380px;
        }
    }
    @media(min-width:768px){
        .w-md-75{
            width: 75% !important;
        }
        .mxw-650{
            max-width: 650px !important;
        }
        .w-md-50{
            width: 50% !important;
        }
        .w-md-25{
            width: 25% !important;
        }
    }
    @media(min-width:992px){
        .w-lg-75{
            width: 75% !important;
        }
        .w-lg-50{
            width: 50% !important;
        }
        .w-lg-25{
            width: 25% !important;
        }
    }
    @media(min-width:1200px){
        .w-xl-75{
            width: 75% !important;
        }
        .w-xl-50{
            width: 50% !important;
        }
        .w-xl-25{
            width: 25% !important;
        }
    }
    .mw-260{
        min-width: 260px !important;
    }
    .bsiacard.sidebar{
        min-height: unset;
    }

    /* ======================
        Affiliated Partners
    ====================== */

    .affiliate-content .page-heading-box{
        max-width: 500px;
        margin: auto;
    }
    .affiliate-content .splide__slide img {
    display: block;
    width: 100%;
    border-radius: 8px;
    transition: transform 400ms;
    transform: scale(0.9);
    transform-origin: center center;
    }
    .affiliate-content .splide .splide__arrow {
        top: 50%;
        bottom: 0;
        transform: none;
        border-radius: unset;
        width: 50px;
        opacity: 1;
    }
    .affiliate-content .splide .splide__arrow svg {
    filter: invert(1);
    width: 24px;
    height: 24px;
    }
    
    .affiliate-content .splide__arrow.splide__arrow--prev {
    left: 0;
    background: unset;
    }
    
    .affiliate-content .splide__arrow.splide__arrow--next {
    right: 0;
    background: unset;
    }
    .affiliate_slide .splide__slide{
    background: url("../../includes/images/slidebg.png")no-repeat;
    background-size: cover;
    min-height: 650px;
    background-position: center;
    position: relative;
    }
    .affiliate_slide .splide_text{
    padding: 15px;
    width: calc(100% - 5px);
    display: flex;
    justify-content: space-between;
    position: relative;
    height: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    }
    .affiliate_slide .splide_text p{
    writing-mode: vertical-lr;
    min-height:200px;
    padding: 25px 0;
    transform: scale(-1);
    width: fit-content;
    }
    .affiliate_slide .splide_text p:nth-child(2){
    text-align: end;
    padding-bottom: 65px;
    }
    .affiliate_slide .splide__arrow.splide__arrow--prev{
    opacity: 0;
    transition: 0.12s ease-in-out;
    }
    .affiliate_slide:hover .splide__arrow.splide__arrow--prev{
    opacity: 1;
    }
    .affiliate-content .splide__arrow svg{
    display: none;
    }
    .affiliate-content .splide__arrow--next::after{
    content: '\f061';
    font-size: 18px;
    font-family: 'fontawesome';
    color: var(--primary);
    }
    .affiliate-content .splide__arrow--prev::after{
    content: '\f060';
    font-size: 18px;
    font-family: 'fontawesome';
    color: var(--primary);
    }
    .icon-bg{
    width: 30px;
    height: 30px;
    }
    .sideimgaffiliate{
        background: url('../../includes/images/sideimg.png');
        min-height: 450px;
        max-height: 450px;
        background-size: cover;
        background-position: center;
    }

    /* ======================
        Forum Page 
    ====================== */

    .forum .page-heading-box{
        max-width: 1040px;
        margin: auto;
    }
    .forum input::placeholder{
        color: var(--primary);
    }
    .seprator-top30{
        width: 32px;
        height: 10px;
        background-color: #B9FFB7;
    }
    .seprator-top50{
        width: 50px;
        height: 10px;
    }
    .filter-btn.active{
        color: var(--white) !important;
        background-color: var(--light) !important;
    }

    /* ======================
        Forum Page 2
    ====================== */

    @media(min-width:992px){
        .not-btn{
            margin-bottom: -20px;
        }
        .not-btn2{
            margin-bottom: -50px;
        }
    }
    .comment-slim-outer, .comment-slim-outer .slimScrollDiv, .comment-view-main{
        height: 350px !important;
    }
    .slimScrollBar{
    background: rgb(48 64 85) !important;
    width: 4px !important;
    }
    .forum2-content ::placeholder{
        color: var(--darkgray) !important;
    }
    .arrow-btn{
        width: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;

    }
    .vote-div{
        width: 30px;
        text-align: center;
    }
    .sideimgforum2{
        max-height: 450px;
        object-fit: cover;
    }

    /* pagination */
    .pagination .page-link{
        color: var(--gray);
    }
    .pagination .page-arrow{
        color: var(--darkgray);
    }
    .pagination .page-link.active{
        color: var(--darkgray);
    }

    /* ======================
        BSIA News
    ====================== */

    .bsiacard-header{
        min-height: 200px;
    }
    .bsia-slim-content, .bsia-slim-outer, .bsia-slim-outer .slimScrollDiv{
        height: 962px !important;
    }

    /* ======================
        Search Main-Search
    ====================== */
    .search-card .card-img img{
       border: 1px solid var(--darkgray);
    }
    .map-side-content{
        min-height: 350px;
    }
    .search-card-main{
        min-width: 275px;
    }
    @media(max-width:768px){
        .search-card-main{
            min-width: 260px;
        }
    }
   
    /* ======================
        Publication Guidance
    ====================== */

    .card-img-shadow{
        min-height: 123px;
        background: var(--lightprimary);
    }
    .guidance .page-heading-box{
        max-width: 1040px;
    }
    /* ======================
        Publication Latest Release
    ====================== */

    .release_arrowdown{
        top:13px;
        right:13px;
    }
    .release_arrowdown:hover{
        cursor: pointer;
    }
    .datepicker td{
        width: unset;
        max-width: 220px;
    }
    .datepicker table tr td span{
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: var(--primary) !important;
        font-weight: 600;
    }
    .datepicker table tr td span.active, .datepicker table tr td span.active.focused{
        background-color: var(--primary) !important;
        background-image: unset;
        color: var(--white) !important;
    }
    .sideimgpublirelease{
        max-height: 450px;
        object-fit: cover;
    }
    .error-pos{
        position: relative;
    }
    .error-pos .error:not(.not-error){
        position: absolute;
        bottom:-17px;
        left: 0;
    }   
    /* ======================
        Main Search 1
    ====================== */

    .select2-search__field{
        padding: 2px 0 0 10px !important;
    }
    .select2-results__option{
        color: var(--primary);
        font-size: 14px;
        text-transform: capitalize;
    }
    .select2-container{
        max-width: 100%;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: var(--primary);
        color: var(--white);
    }
    .select2-selection__choice{
        display: flex;
        gap: 2px;
        padding: 3px !important;
        background-color: var(--light) !important;
        color: var(--darkgray) !important;
        font-size: 12px !important;
    }
    .select2-selection__choice__remove{
        order: 2;
        border: 1px solid gray !important;
        width: 12px !important;
        height: 12px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 50% !important;
        font-size: 12px !important;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__clear {
        margin-top: 8px;
        margin-right: 5px;
    }
    .select2-selection__clear{
        font-size: 0px;
    }
    .select2-selection__clear::after{
        content:'\f00d';
        font-size: 14px;
        color: var(--primary);
        font-family: 'FontAwesome';
    }
    .dismiss{
        border-radius: 50%;
        width: 8px !important;
        height: 8px !important;
        font-size: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* ======================
        Footer Styles
       ====================== */
    .blank_content{
        min-height: 750px;
    }

    .newsletter input[type="email"]{
        min-width: 210px;
        max-width: 250px;
    }
    .footer-link:hover a{
        color: var(--danger) !important;
    }
    /* :checked[type=checkbox] {
        background-image: url(../../includes/images/icons/check.png);
        background-size: 12px;
    } */
    .newsletter input::placeholder{
        color: var(--primary);
    }
    #newsletter .error:not(.not-error){
        position: absolute;
        bottom:-17px;
        left: 0;
        font-size: 10px;
        font-weight: 700;
        color: var(--danger);
    }

    .trilevel {
        max-height:400px!important;
        overflow-y:auto!important;
        width: 100%!important;
    }