/***** preloader *****/
.preloader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--bs-white-rgb), 0.5);
    z-index: 999;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0;
}
.preloader img {
    width: 250px;
}
/***** End preloader *****/
/* ---------------------------- */
/*           Google Fonts
/* ---------------------------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
/*================================
=            uiversal            =
================================*/
:root {
    --brandcolor: #0b98ca;
    --brandcolororange: #f4940b;
    --brandcolorblue: #00356b;
    --bordercolorlblue: #1b8afb;
    --bordercolordblue: #1483ab;
    --bordercolorash: #DDDDDD;
    --ashcolor: #333333;
    --ashcolorborder: #d3d3d3;
    --ashcolordborder: #777777;
    --sbtncolor: #002143;
    --sbtnhcolor: #005ebd;
    --markcolor: #ffff00;
    --bodybscolor: #ececec;
    --tickerbackcolor: #347fd0;
    --tickerscolor: #c81c1c;
    --orangetxtcolor: #f6980c;
    --greentxtcolor: #008000;
    --lnktxthcolor: #FF0000;
    --lnktxtvcolor: #2a6496;
    --snttxtcolor: #e36c09;
    --sntlnktxtcolor: #0000cd;
    --greentitletxtcolor: #76923c;
    --lyellowbgcolor: #ffffee;
    --lbtnbgcolor: #f0f0f0;
    --fcfcolor: #cccccc;
    --sidebarbordercolor: #e5e5e5;
    --sidebarnavcolor: #101010;
    --formlabelcolor: #707070;
    --formcontrolbcolor: #E5E7E9;
    --formcontrolcolor: #555555;
    --custbtnbordercolor: #bfbfbf;
    --custbtnpurpcolor: #644896;
    --wcdtetimecolor: #ffff99;
}
@font-face {
    font-family: 'Kalpurush';
    src: url('../fonts/Kalpurush.eot');
    src: url('../fonts/Kalpurush.woff') format('woff'), url('../fonts/Kalpurush.ttf') format('truetype'), url('../fonts/Kalpurush.svg#Kalpurush') format('svg'), url('../fonts/Kalpurush.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'Open Sans', 'Kalpurush', 'Font Awesome 6 Free', sans-serif;
    background-color: var(--brandcolor);
    font-size: 14px;
}
main {
    background-color: var(--bodybscolor);
    padding-bottom: .25rem !important;
    padding-top: .25rem !important;
}
/*================================
=             header             =
================================*/
.topnav {
    background-color: var(--brandcolor);
}
.subnavbar {
    background-color: var(--bs-white);
}
header .navbar .navbar-toggler {
    color: var(--bs-white);
    border: var(--bs-border-width) solid var(--bs-white);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
header .navbar .navbar-nav .nav-link {
    color: var(--bs-white);
    font-size: 11px;
    text-transform: uppercase;
    padding: 8px 7px;    
}
header .navbar .offcanvas.show .navbar-nav .nav-link {
    padding: 8px 0px;
}
header .navbar .navbar-nav .nav-item {
    margin: 0 1px;
    border-right: 1px solid var(--bordercolorlblue);
    border-left: 1px solid var(--bordercolordblue);
}
header .navbar .offcanvas.show .navbar-nav .nav-item {
    margin: 0;
    border-right: none;
    border-left: none;
}
header .navbar .navbar-nav .nav-item:first-child {
    border-left: none;
}
header .navbar .navbar-nav .nav-item:last-child {
    border-right: none;
}
header .navbar .navbar-nav .nav-item:first-child > .nav-link {
    padding-left: 0px;
}
header .navbar .navbar-nav .nav-item:last-child > .nav-link {
    padding-right: 0px;
}
header .navbar .navbar-nav .nav-link:hover,
header .navbar .navbar-nav .nav-link:focus,
header .navbar .navbar-nav .nav-link:active {
    color: var(--brandcolororange);
}
header .navbar .nav-item:hover > .nav-link,
header .navbar .nav-item:focus-within > .nav-link {
    color: var(--brandcolororange);
}
header .navbar .nav-item .dropdown-menu .dropdown-item {
    padding: 5px 8px;
    white-space: normal;
    font-size: 13.5px;
    color: var(--brandcolorblue);
}
header .navbar .nav-item .dropdown-menu .dropdown-item:hover,
header .navbar .nav-item .dropdown-menu .dropdown-item:focus {
    background-color: var(--brandcolororange);
    color: var(--bs-white);
}
.offcanvas {
    background-color: var(--brandcolor);
}
.offcanvas .offcanvas-title {
    color: var(--bs-white);
}
.offcanvas .offcanvas-header .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
}
.offcanvas .offcanvas-header {
    padding-bottom: 0px;
}
.offcanvas .offcanvas-body .wcdtwrap {
    margin-left: auto;
    margin-bottom: 0px;
    color: var(--wcdtetimecolor) !important;
    padding-left: 0px;
}
.offcanvas .offcanvas-body .wcdtwrap li{
    list-style: none;
    line-height: 1;
}
.offcanvas .offcanvas-body .wcdtwrap li a {
    color: var(--wcdtetimecolor) !important;
}
.offcanvas .offcanvas-body .wcdtwrap .dhakaClock {
    font-size: 15px;
    font-weight: 700;
    color: var(--wcdtetimecolor) !important;
}
.ofchm .nav-justified .nav-item .nav-link {
    font-size: 12px;
    color: #333333;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    text-align: left;
}
.ofchm .nav-link.webregreq:hover {
    color: #00356b;
}
.ofchm .nav-link.boaopening:hover {
    color: #de5400;
}
.ofchm .nav-link.clientlogin:hover {
    color: #2f8900;
}
.hi-icon {
    display: inline-block;
    cursor: pointer;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.2s;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}
.hi-icon:after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 100%;
    height: 100%;
    border: 2px dashed;
    border-radius: 90%;
    box-sizing: content-box;
    z-index: 10;
    pointer-events: none;
}
.hi-icon:before {
    speak: none;
    -webkit-font-smoothing: antialiased;
    line-height: 2px;
}
.ofchm .nav-link:hover .hi-icon {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.ofchm .nav-link:hover .hi-icon:after {
    animation: spinAround 9s linear infinite;
}
.ofchm .clientlogin .hi-icon {
    box-shadow: 0 0 0 3px rgba(47,137,0,1);
}
.ofchm .clientlogin .hi-icon:after {
    border-color: #2f8900;
}
.ofchm .webregreq .hi-icon {
    box-shadow: 0 0 0 3px rgba(26,78,149,1);
}
.ofchm .webregreq .hi-icon:after {
    border-color: #00356b;
}
.ofchm .mobiletrading .hi-icon {
    box-shadow: 0 0 0 3px rgba(26,78,149,1);
}
.ofchm .mobiletrading .hi-icon:after {
    border-color: #1a4e95;
}
.ofchm .boaopening .hi-icon {
    box-shadow: 0 0 0 3px rgba(222,84,0,1);
}
.ofchm .boaopening .hi-icon:after {
    border-color: #de5400;
}
@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.ofchm .nav {
    width: 100%;
    align-items: center;
    justify-content: center;
}
.ofchm .nav-justified .nav-item {
    border-right: 1px solid var(--ashcolorborder);
}
.ofchm .nav-justified .nav-item mark {
    background-color: var(--markcolor);
    font-weight: 700;
}
.ofchm .nav-justified .nav-item, .ofchm .nav-justified > .nav-link {
    flex-grow: 1;
    flex-basis: 1;
    text-align: center;
}
.ofchm {
    margin-top: 15px;
}
.cuscardbr {
    border-radius: 0px;
    padding: 10px 10px;
}
.cusbox {
    border-radius: 0px;
    padding: 10px 10px;
    border: var(--bs-border-width) solid var(--bs-border-color-translucent);
    background: var(--bs-white);
}
.cusboxwp {
    border-radius: 0px;
    border: var(--bs-border-width) solid var(--bs-border-color-translucent);
    background: var(--bs-white);
}
.ch-100 {
    height: 100% !important;
}
.fwcusbox {
    border-radius: 0px;
    padding: 20px;
    border: var(--bs-border-width) solid var(--bs-border-color-translucent);
    background: var(--bs-white);
}
.fwcusbox hr {
    margin-left: -20px;
    margin-right: -20px;
}
.sidebar {
    background-color: var(--bs-white);
    border: 1px solid var(--bordercolorash);
}
.sidebar h4 {
    font-size: 17px;
    color: var(--bs-white);
    padding: 10px 15px;
    margin-bottom: 0px;
    background-color: var(--orangetxtcolor);
}
.sidebar .nav-item {    
    border-bottom: 1px solid var(--sidebarbordercolor);
}
.sidebar .nav-item:last-child {    
    border-bottom: none;
}
.sidebar .nav-item .nav-link {
    padding: 10px 15px;
    color: var(--sidebarnavcolor);
}
.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item .nav-link:focus,
.sidebar .nav-item .nav-link:active,
.sidebar .nav-item .nav-link.active {
    color: var(--bs-white);
    background-color: var(--brandcolorblue);
}
.custombtn {
    background-color: var(--brandcolorblue) !important;
    border: 1px solid var(--brandcolorblue) !important;
    color: var(--bs-white) !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: 4px;
}
.custombtn:hover,
.custombtn:active,
.custombtn:focus,
.fwcusbox a.custombtn:hover,
.fwcusbox a.custombtn:active,
.fwcusbox a.custombtn:focus {
    background-color: var(--bodybscolor) !important;
    border: 1px solid var(--custbtnbordercolor) !important;
    color: var(--brandcolorblue) !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: 4px;
}

@media all and (min-width: 992px) {
    .container-fluid {
        max-width: 90%;
    }
    header .navbar .nav-item .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        top: 100%;
        max-width: 180px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        padding: 7px 0px;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    }
    header .navbar .nav-item .dropdown-toggle:after {
        margin-left: 0;
        vertical-align: 0;
        content: "";
        border: none;
    }
    header .navbar .nav-item .dropdown-menu:before {
        content: "";
        position: absolute;
        top: -10px;
        left: 20px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid var(--bs-white);
        z-index: 2;
    }
    header .navbar .nav-item:hover .dropdown-menu,
    header .navbar .nav-item:focus .dropdown-menu,
    header .navbar .nav-item:focus-within .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: 0s; 
    }
    .ofchm {
        display: flex !important;
        height: 100%;
        margin-top: 0px;
    }        
}
/*================================
=             footer             =
================================*/
footer {
    background-color: var(--brandcolor);
    padding: 15px 0px;
}
.copyright {
    color: var(--bodybscolor);
    font-size: 12px;
}
.copyright .ucas img {
    width: 100%;
    max-width: 45px;
    margin-left: 5px;
}
.dhakaClock {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: var(--bs-white);
    text-align: center;
}
footer .social {
    list-style: none;
    margin: 8px 0px 0px 0px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
footer .social a {
    color: var(--bs-white);
    background-color: var(--sbtncolor);
    text-decoration: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0px 5px;
    font-size: 16px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s ease-in-out 0s;
}
footer .social a:hover {
    background-color: var(--sbtnhcolor);
    color: var(--bs-white);
}
@media (max-width: 991px) {
    .copyright {
        text-align: center;
    }
    footer .social {
        justify-content: center;
    }
    .ch-100 {
        height: auto !important;
    }
    .mtrv {
        margin-top: 15px;
    }
}