@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: Open Sans;
}

.spinner {
    border: 16px solid silver;
    border-top: 16px solid #22527b;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 30%;
    margin: auto;
    position: relative;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.investor_bg_img {
    background-image: url("/images/BackgroundImages/cell100.jpg");
}

.summary_bg_img {
    background-image: url("/images/BackgroundImages/2_summary.jpg");
    background-color: #1F4A6B;
}

.bg_img_responsive {
    background-repeat: no-repeat;
    min-height: 100%;
    background-size: cover;
    background-position: center center;
}

.contactus_bg_img {
    background-image: url("/images/BackgroundImages/Investor_contact.jpg");
    background-color: #5FA7E1;
}

.communication_bg_img {
    background-image: url("/images/BackgroundImages/communication.jpg");
    background-color: #5FA7E1;
}

.fundReport_bg_img {
    background-image: url("/images/BackgroundImages/fund_report.jpg");
    background-color: #5FA7E1;
}

.inv_dashboard_bg_img {
    background-image: url("/images/BackgroundImages/1_dashboard.jpg");
    background-color: #3D73A1;
}

.inv_account_bg_img {
    background-image: url("/images/BackgroundImages/3_Investors.jpg");
    background-color: #7CABDF;
}

.blue_bg_color {
    background-color: #3D73A1;
}

.rooftops_wide_bg_img {
    background-image: url("/images/BackgroundImages/rooftops_wide.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    max-height: 100vh;
    background-color: #3D73A1;
}

.rooftops_bg_img {
    background-image: url("/images/BackgroundImages/rooftops.jpg");
    background-size: cover;
    background-position: center;
}

.reverse {
    -webkit-transform: scaleX(-1)
}

nav.tw-flex-1 a.active {
    background-color: #4a5568;
    font-weight: 500;
}

a:hover {
    color: #ffffff;
}



input::-moz-placeholder, textarea::-moz-placeholder {
    font-style: italic !important;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    font-style: italic !important;
}

input::placeholder, textarea::placeholder {
    font-style: italic !important;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    font-style: italic !important;
}

.e-acrdn-header {
    border-top-left-radius: 0.4375rem;
    border-top-right-radius: 0.4375rem;
}

.e-acrdn-panel {
    border-bottom-right-radius: 0.4375rem;
    border-bottom-left-radius: 0.4375rem;
}


/*Nano Scroll CSS*/
.min_scroll::-webkit-scrollbar {
    width: 6px;
    cursor: pointer;
}

.min_scroll::-webkit-scrollbar-track {
    background-color: rgba(229, 231, 235, var(--bg-opacity));
    cursor: pointer;
}

.min_scroll::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-color: #a0aec0;
}

/*Grid CSS*/

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem 1rem;
    grid-template-areas: "One Two Three" "Four Five Six";
}

.One {
    grid-area: One;
}

.Two {
    grid-area: Two;
}

.Three {
    grid-area: Three;
}

.Four {
    grid-area: Four;
}

.Five {
    grid-area: Five;
}

.Six {
    grid-area: Six;
}


/*Custom select incon in dropdown*/

select {
    background-color: white;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    select.classic {
        background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, #718096, #718096);
        background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
        background-size: 5px 5px, 5px 5px, 2.8em 2.5em;
        background-repeat: no-repeat;
    }

/*Custom CSS for SFGrid sticky header*/
.e-gridheader {
    position: sticky;
    top: 0;
    z-index: 10;
}

    .e-gridheader::before {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        top: -1px;
        left: 0;
        background-color: #fcfcfc;
        z-index: -1;
    }

    .e-gridheader + .e-gridheader::after {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -1px;
        background-color: #fcfcfc;
        z-index: -1;
    }

/*Custom CSS for SfDialog header and content*/
.e-dialog .e-dlg-content {
    color: black !important;
}

.e-popup.e-popup-open.e-dialog {
    width: 350px;
}

.e-dlg-header, .e-dlg-header * {
    color: white !important;
}

.filebutton {
    width: 120px;
    height: 30px;
    overflow: hidden;
    position: relative;
    background-image: url("/images/Icons/upload_files_icon.svg");
    background-repeat: no-repeat;
}

    .filebutton input {
        z-index: 999;
        line-height: 0;
        position: absolute;
        top: -2px;
        opacity: 0;
        filter: alpha(opacity = 0);
        -ms-filter: "alpha(opacity=0)";
        cursor: pointer;
        _cursor: hand;
        margin: 0;
        padding: 0;
        height: 22px;
    }

/*Custom CSS for SfAccordion header content*/
.e-acrdn-header-content {
    width: 100%;
}