/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification 
for details on configuring this project to bundle and minify static web assets. */
body {
    padding-top: 25px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}


/* set a max-width for horizontal fluid layout and make it centered */
 .container-medium {
    margin-right: auto;
    margin-left: auto;
    max-width: 1600px; 
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
/*@media screen and (max-width: 767px) {
    
    .carousel-caption {
        display: none;
    }
}*/


.dropdown-submenu {
    position: relative;
}

    /*.dropdown-submenu > a:after {
        content: "\f0da";
        float: right;
        border: none;
        font-family: 'Font Awesome\ 5 Free';
        font-weight: 900;
        border-left-color: #fff;
    }*/
    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }


    .dropdown-submenu.pull-left {
        float: none;
    }

    .dropdown-submenu.pull-left > .dropdown-menu {
        left: -100%;
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
    }

/*for displaying the dropdown menu in the centre.*/
/*.justify-content-center .dropdown-menu {
    left: 50%;
    transform: translateX(-50%);
}*/

    
/*DataTables related*/
/*This makes the default search box disappear...so that a custom textbox can be used for search. 
    Main advantage with this approach is so that the search box can be placed at desired location
*/
.dataTables_filter {
    display: none;
}

/* following 3 styles are for changing the default style of datatables pagination to dark theme. #343a40 */
.page-link {
    color: #fff;
    background-color: #0b65c5;
    border: 1px solid #dee2e6;
}

.page-item.active .page-link {
    color: black;
    background-color: lightgrey;
    border-color: #dee2e6;
}

.page-item.disabled .page-link {
    color: #fff;
    background-color: #004996;
    border-color: #dee2e6;
}


/* Vertical tabs in Edit Fund page*/

.nav-pills-custom .nav-link {
    color: #aaa;
    background: #fff;
    position: relative;
}

    .nav-pills-custom .nav-link.active {
        color: #fff;
        background: #343a40 !important;
    }

/* Add indicator arrow for the active tab */
    .nav-pills-custom .nav-link::before {
        content: '';
        display: block;
        border-top: 8px solid transparent;
        border-left: 10px solid #343a40;
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translateY(-50%);
        opacity: 0;
    }
/*@media (min-width: 992px) {
    
}*/

.nav-pills-custom .nav-link.active::before {
    opacity: 1;
}


/* lined tabs */

.with-arrow .nav-link.active {
    position: relative;
}

    .with-arrow .nav-link.active::after {
        content: '';
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #343a40;
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        display: block;
    }

.lined .nav-link {
    color: #aaa;
    border: none;
    border-bottom: 3px solid transparent;
}

.lined .nav-link:hover {
    border: none;
    border-bottom: 3px solid transparent;
}

.lined .nav-link.active {
    /*background: none;*/
    background: #e0dede;
    color: #555;
    border-color: #343a40;
}




/* START - CUSTOM styles & overridden styles */

/*bg-dark replacement*/
.bg-SMSFAS-darkblue {
    background: #0b65c5;
}

.bg-smsfas-paleblue {
    background: #60a9f7;
}

.bg-smsfas-darkgrey {
    background: #bbbbbb;
}

/*button to be of same color as headers*/
.btn-dark {
    color: #fff;
    /*background-color: #0b65c5;
    border-color: #0b65c5;*/
    background-color: #004996;
    border-color: #004996;
}

.btn-dark:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-darkgrey {
    color: #fff;
    /*background-color: #0b65c5;
    border-color: #0b65c5;*/
    background-color: #bbbbbb;
    border-color: #bbbbbb;
}

    .btn-darkgrey:hover {
        color: #fff;
        background-color: #e0dede;
        border-color: #e0dede;
    }


.bg-dark {
    background-color: #0b65c5 !important;
}

.table .thead-dark th {
    color: #fff;
    background-color: #0b65c5;
    border-color: #0b65c5;
}

/*for setting the text in menu, black*/
.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,1);
}

/*for underlining the menu of current page - #e7e8e8
LIVE: 
	border-bottom: 2px solid #0b65c5;
	background-color: #e7e8e8;
TEST:
	border-bottom: 2px solid #ff6f6f;
	background-color: #ff6f6f;
*/
    .navbar-light .navbar-nav .nav-link.active {
        border-bottom: 2px solid #0b65c5;
		background-color: #e7e8e8;
    }


/*This will make the file upload box small - same size as small input text box.*/
.custom-file-label,
.custom-file-label::after {
    /*height: auto;*/ /*commented out to stop the skinny appearance of input box, after cancel btn click */
    padding-top: 0.30rem;
    padding-bottom: 0.30rem;
}



/* Form label and inputs*/

/*.smsfasFormLabel-bold-small{
    font-weight: bold;
    font-size: 12.8px;
}*/

/*to make the label bold and reduced size.*/
.control-label {
    font-weight: bold;
    font-size: 12.8px;
}

.smsfasFormInput-small {
    font-size: 12.8px;
    height: calc(1.8rem + 2px);
}

.smsfasSecondaryHeader {
    background: #e0dede;
}

/*changes font size globally*/
html {
    font-size: 15px;
    line-height: 1.428;
}

/*to reduce gap between form-group elements */
.form-group{
    margin-bottom: 0.5rem;
}

/*to reduce gap between table rows*/
.table td {
    padding: 0.35rem;
    vertical-align: middle;
}


.btn-sq-lg {
    width: 50px !important;
    height: 50px !important;
}


/*change background color of toolbar in Edit Audit request page*/
.scrolled {
    /*background: #e0dede;*/
    transition: background 300ms;
    border: 2px solid #0b65c5;
}

/*to display text under icon in edit AuditRequest page toolbar at top*/
#arHdrToolBar a span {
    
    padding: 5px 0 10px 0;
    display: block;
    /*letter-spacing: 1px;*/
}

#arHdrToolBar button span {
    
    padding: 5px 0 10px 0;
    display: block;
    /*letter-spacing: 1px;*/
}



select.auditTest {
    /*height: calc(1.8125rem + 2px);*/
    /*padding: .25rem .5rem;*/
    font-size: 12px;
    line-height: 1.5;
    border-radius: .2rem;
    width: 175px;
}
textarea.auditTest {
    font-size: 12px;
    width: 250px;
}


/*splitter panels*/
.panel-container {
    display: flex;
    flex-direction: row;
    border: 1px solid silver;
    overflow: hidden;
    /* avoid browser level touch actions */
    /*xtouch-action: none;*/
}

.panel-left {
    flex: 0 0 auto;
    /* only manually resize */
    padding: 10px;
    width: 300px;
    min-height: 200px;
    min-width: 150px;
    white-space: nowrap;
    background: #838383;
    color: white;
}

.splitter {
    flex: 0 0 auto;
    width: 18px;
    background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
    min-height: 200px;
    cursor: col-resize;
}

.panel-right {
    flex: 1 1 auto;
    /* resizable */
    padding: 10px;
    width: 100%;
    min-height: 200px;
    min-width: 200px;
    background: #eee;
}



/* Start - Timeline */







.text-ellipsis,
.text-nowrap {
    white-space: nowrap !important
}


.profile-content {
    padding: 10px;
    border-radius: 4px
}

    .profile-content:after,
    .profile-content:before {
        content: '';
        display: table;
        clear: both
    }

    .profile-content .tab-content,
    .profile-content .tab-pane {
        background: 0 0
    }

.profile-left {
    width: 200px;
    float: left
}

.profile-right {
    margin-left: 240px;
    padding-right: 20px
}

.profile-image {
    height: 175px;
    line-height: 175px;
    text-align: center;
    font-size: 72px;
    margin-bottom: 10px;
    border: 2px solid #E2E7EB;
    overflow: hidden;
    border-radius: 4px
}

    .profile-image img {
        display: block;
        max-width: 100%
    }

.profile-highlight {
    padding: 12px 15px;
    background: #FEFDE1;
    border-radius: 4px
}

    .profile-highlight h4 {
        margin: 0 0 7px;
        font-size: 12px;
        font-weight: 700
    }


.timeline {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative
}

    .timeline:before {
        content: '';
        position: absolute;
        top: 5px;
        bottom: 5px;
        width: 1px; /*from 5 to 2*/
        background: #2d353c;
        left: 5%;               /*changed from 15% to 5%*/
        /*margin-left: -2.5px*/ /*commented*/
    }

    .timeline > li {
        position: relative;
        min-height: 50px;
        padding-top: 20px 0; /*changed from padding to padding-top*/
    }

    .timeline .timeline-time {
        position: absolute;
        left: 0;
        width: 10%;
        text-align: right;
        top: 30px
    }

        .timeline .timeline-time .date,
        .timeline .timeline-time .time {
            display: block;
            font-weight: 600
        }

        .timeline .timeline-time .date {
            line-height: 16px;
            font-size: 12px
        }

        .timeline .timeline-time .time {
            line-height: 16px;
            font-size: 12px;
            color: #242a30
        }

    .timeline .timeline-icon {
        /*left: 10%;*/          /*commented*/
        position: absolute;
        width: 10%;
        text-align: center;
        top: 25px   /*from 40px to 25px*/
    }

        .timeline .timeline-icon a {
            text-decoration: none;
            width: 20px;
            height: 20px;
            display: inline-block;
            border-radius: 20px;
            background: #d9e0e7;
            line-height: 10px;
            color: #fff;
            font-size: 14px;
            border: 2px solid #2d353c; /*from 5px to 2 px*/
            transition: border-color .2s linear
        }

    .timeline .timeline-body {
        margin-left: 10%;       /*changed from 20% to 10%*/
        margin-right: 5px;
        background: #fff;
        position: relative;
        padding: 5px 5px;   /*from 10px 5px to 5px 5px*/
        border-radius: 6px
    }

        .timeline .timeline-body:before {
            content: '';
            display: block;
            position: absolute;
            border: 10px solid transparent;
            border-right-color: #fff;
            left: -20px;
            top: 20px
        }

        .timeline .timeline-body > div + div {
            margin-top: 5px; /*from 15px to 5px*/
        }

            .timeline .timeline-body > div + div:last-child {
                margin-bottom: -20px;
                padding-bottom: 10px; /*from 20px to 10px*/
                border-radius: 0 0 6px 6px
            }

.timeline-header {
    padding-bottom: 2px; /*from 10px to 2px*/
    border-bottom: 1px solid #feffff; /*from e2e7eb to dfe0e0 to feffff*/
    line-height: 30px
}

    .timeline-header .userimage {
        float: left;
        width: 34px;
        height: 34px;
        border-radius: 40px;
        overflow: hidden;
        margin: -2px 10px -2px 0
    }

    .timeline-header .username {
        font-size: 12px;
        font-weight: bold;  /*changed from 600 to bold*/
    }

        .timeline-header .username,
        .timeline-header .username a {
            color: #2d353c
        }

.timeline img {
    max-width: 100%;
    display: block
}

.timeline-content {
    letter-spacing: .25px;
    line-height: 18px;
    font-size: 13px
}

    .timeline-content:after,
    .timeline-content:before {
        content: '';
        display: table;
        clear: both
    }

.timeline-title {
    margin-top: 0
}

.timeline-footer {
    background: #fff;
    border-top: 1px solid #e2e7ec;
    padding-top: 15px
}

    .timeline-footer a:not(.btn) {
        color: #575d63
    }

        .timeline-footer a:not(.btn):focus,
        .timeline-footer a:not(.btn):hover {
            color: #2d353c
        }

.timeline-likes {
    color: #6d767f;
    font-weight: 600;
    font-size: 12px
}

    .timeline-likes .stats-right {
        float: right
    }

    .timeline-likes .stats-total {
        display: inline-block;
        line-height: 20px
    }

    .timeline-likes .stats-icon {
        float: left;
        margin-right: 5px;
        font-size: 9px
    }

        .timeline-likes .stats-icon + .stats-icon {
            margin-left: -2px
        }

    .timeline-likes .stats-text {
        line-height: 20px
    }

        .timeline-likes .stats-text + .stats-text {
            margin-left: 15px
        }

.timeline-comment-box {
    background: #f2f3f4;
    margin-left: -25px;
    margin-right: -25px;
    padding: 20px 25px
}

    .timeline-comment-box .user {
        float: left;
        width: 34px;
        height: 34px;
        overflow: hidden;
        border-radius: 30px
    }

    .timeline-comment-box .user img {
        max-width: 100%;
        max-height: 100%
    }

    .timeline-comment-box .user + .input {
        margin-left: 44px
    }

.lead {
    margin-bottom: 20px;
    font-size: 21px;
    font-weight: 300;
    line-height: 1.4;
}

.text-danger, .text-red {
    color: #ff5b57 !important;
}

/* Finish - Timeline */

/*AuditRequest Note */
.auditRequestNote {
    /*margin-left: 5%;*/
    margin-right: 5px;
    background: #fff;
    position: relative;
    padding: 10px 5px;
    border-radius: 3px;
    border: 1px solid #dee2e6;
    background-color: #dfe0e0;
}

.auditRequestNote .noteText{
    margin-top: 5px;
}



.auditPlanTable-Wrapper
{
    max-height: 400px;
    overflow: auto;
    display: inline-block;
}


.successNotification {
    background-color: #75d672;
}

.failureNotification {
    background-color: #f9957e;
}

/*used in styling queries table in Edit AR page.*/


table.dataTable td.details-control:before {
    content: '\f152';
    font-family: 'Font Awesome\ 6 Free';
    cursor: pointer;
    font-size: 15px;
    color: #0b65c5;
}

table.dataTable tr.shown td.details-control:before {
    content: '\f150';
    color: #0b65c5;
}

.btnCustWidth150 {
    width: 150px;
    
}

.text-darkblue {
    color: #004996;
}



/* for overriding card header 20Sept design changes */
/*used to be .editFundContainer .card-header, when doing POC*/
 .card-header {
    font-weight: bold;
    font-size: 13.8px;
    border-bottom-color: #0b65c5;
}

/* For setting the Save button color to green 20Sept design changes */
.smsfas-saveBtn {
    background-color: #2ecc71;
    border-color: #2ecc71;
}

/*for setting the active tab to blue b/g 20Sept design changes */
/*for POC: #fdTabs .nav-link.active */
.nav-tabs .nav-link.active{
    background: #007bff;
    color: #fff;
}



/*add shadow to buttons - design change req.*/
.btnShadow {
    /*box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);*/
    /*box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2)*/
    /*box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2)*/
    box-shadow: 2px 3px 10px 2px #bdbdbd;
}

/* introduced to have fixed width for columns in data tables...did not seem to have any effect.
    ...fixedwidth = false in datatable seeems to have the effect.
    .table {
    margin: 0 auto;
    width: 100%;
    clear: both;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap:break-word;
    
}*/


.smsfasTertiaryHeader {
    background: rgba(0,0,0,.05);
}


.largeCheckBox {
    
    height: 20px;
    width: 20px;
}

/*for changing style of just the CY tab, as per 28Oct feedback*/
#curYearNotes-tab.active {
    background: #ffffff;
    color: #000;
}

.anotePrevYr {
    position: relative;
    left: 35px;
}

/*6-Jan-23 to resolve issue experienced in Safari browser on Mac (JB email dated 5th Jan) */
.row:before, .row:after {
    display: none !important;
}


.card-header a {
    color: #0b65c5;

}


/*11-Sept-25: to make the jsPanel stay on top of the navbar.*/
.navbar.sticky-top {
    position: sticky;
    top: 0;
    z-index: 100; /* Example z-index for the navbar */
}

.jsPanel {
    border: 0;
    box-sizing: border-box;
    vertical-align: baseline;
    font-family: Roboto, "Open Sans", Lato, "Helvetica Neue", Arial, sans-serif;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    opacity: 0;
    overflow: visible;
    position: absolute;
    /* top: 0  do not remove, otherwise panel is at the very bottom of the page -> results in vertical scrollbars -> positioning at right incorrect */
    z-index: 9999;
}


/* FINISH - CUSTOM styles & overridden styles */