/* Common CSS styling across all clients
Issuer, investor, Participant portals. Not the Admin Portal
Not to be confused with common.scss which stitches together all SCSS files
*/

@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap");

.text-bg-dark {
    background-color: rgba(3, 4, 94, var(--bs-bg-opacity, 1)) !important;
    color: #fff !important;
}

.content-page {
    /* // 86px is approx height of the top nav bar */
    min-height: calc(100vh - 86px);
}

.logo-box {
    height: 70px;
}

.tab-pane-scrollable {
    max-height: 50vh;
    overflow-y: auto;
    padding: 15px;
}

#sidebar-menu a.active,
#sidebar-menu a:active,
#sidebar-menu a:focus,
#sidebar-menu a:hover {
    color: var(--bs-link-color) !important;
}

/* places content vertically for simple layout */
/* so that content is (almost centered) */
/* accounting for top navbar and bottom fixed footer */
.a-place-content {
    margin-top: -86px;
    padding-top: 120px;
    padding-bottom: 60px;
}

/* not using custom-file label currently (on generic forms) so hide it */
form .custom-file .custom-file-label {
    display: none;
}

/* class to size logo div to our standard logo size */
.a-size-177x177 {
    width: 177px;
    height: 177px;
}

.dygraph-axis-label {
    /* account for any font letter width variation
    with of labels is fixed
    and some fonts make the label look slightly cut-off */
    font-size: 98%;
}

/* New version of vanilla-datepicker  */
input.datepicker {
    display: block !important;
}

/* datepicker fix from bootstrap editable clash */
.datepicker > div {
    display: block;
}

/* New DataTables version adds a <colgroup> element that calcualtes columns widths but
 * doesn't take into account d-none columns, causing layout issues. Hide it.
 */
.dataTable colgroup {
    display: none;
}

/* Revert sorting arrows to initial (right-aligned) postiion */
table.dataTable th.dt-type-numeric div.dt-column-header {
    flex-direction: initial;
}

.dt-container .dt-info {
    padding-top: 0.85em;
    text-align: left !important; /* override center alignment at smaller screen widths */
}

.dt-container ul.pagination {
    justify-content: flex-end;
    padding-top: 0.5rem;
}

/* Generic Collapse Classes to show down and up arrows */

a.collapse-bs5-tab {
    text-decoration: none; /* no underline */
}

.collapse-bs5-tab[aria-expanded="true"]:after {
    content: "\f077"; /* up arrow */
}

.collapse-bs5-tab[aria-expanded="false"]:after {
    content: "\f078"; /* down arrow */
}

.collapse-bs5-tab:after {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f078"; /* down arrow - for tabs that are collapsed */
    margin-left: 5px;
    color: #bdbdbd;
}

#sidebar-menu .expand-symbol:after {
    font-family: "Font Awesome 7 Free";
    color: #bdbdbd;
    display: inline-block;
    transition: transform 0.1s ease;
}

#sidebar-menu a[aria-expanded="true"] > .expand-symbol:after {
    /* up arrow */
    content: "\f077";
    transform: rotate(0deg);
}

#sidebar-menu a[aria-expanded="false"] > .expand-symbol:after {
    /* Up arrow, rotated to point down */
    content: "\f077";
    transform: rotate(180deg);
}

/* form specific styles */

form[name="admForm"] input:checked + label {
    font-weight: 700;
}

form[name="admForm"] label.form-check-label {
    cursor: pointer;
}

/* generic forms */

div:has(> label.generic-form-hide-parent) {
    display: none;
}

.repeating-area-container .fa-trash {
    color: rgb(202, 0, 0);
    cursor: pointer;
}

.repeating-area-container .repeating_area_handle {
    cursor: move;
}

.repeating-area-container + p,
.repeating-area-container + h2,
.repeating-area-container + h3 {
    margin-top: 20px;
}

label.required:after {
    content: "*";
}

form[name="genericFormReview"] .form-check label {
    width: 100% !important;
    margin-top: 0 !important;
    text-align: start !important;
}

form[name="genericFormReview"]
    [id^="genericFormReview_state"]
    .form-check
    [value="accept"]:checked {
    --bs-bg-opacity: 1;
    background-color: rgba(
        var(--bs-success-rgb),
        var(--bs-bg-opacity)
    ) !important;
}

form[name="genericFormReview"]
    [id^="genericFormReview_state"]
    .form-check
    [value="reject"]:checked {
    --bs-bg-opacity: 1;
    background-color: rgba(
        var(--bs-danger-rgb),
        var(--bs-bg-opacity)
    ) !important;
}

.a-card .card-header {
    align-items: center !important;
    display: flex !important;
    justify-content: space-between !important;
}

.a-card .card-header .card-title {
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

.expand-arrow:after {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f078";
    margin-left: 5px;
    color: #bdbdbd;
}

.collapsed .expand-arrow:after {
    content: "\f078"; /* down arrow */
}

.expand-arrow:after {
    content: "\f077"; /* down arrow */
}