@import "TreeViewCheckboxes.css";

/* Root Variables */
:root {
    --read-only-text-color: #2970A4;
    --information-text-color: #767676;
    --hover-color: #76A5BA;
    --pagination-label-color: #596D90;
}

/* Base Styles */
.emptyReadOnly, .numberScheme, .limitLabel {
    color: var(--information-text-color);
    font-size: calc(1em - 1px);
}

.emptyReadOnly {
    font-style: italic;
}

.headerItem {
    font-weight: bold;
}

.readOnlyText {
    color: var(--read-only-text-color);
}

.childQuestions {
    margin-left: 10px;
}

/* Additional Item Styles */
.additionalItem {
    .readOnlyText {
        margin-left: 20px;
        display: inline-block;
    }

    .text:before {
        content: "\2022";
        display: inline-block;
        margin-right: 10px;
        color: var(--bs-body-color);
    }
}

/* Read More Button */
.readMoreButton {
    display: block;
    cursor: pointer;
    text-align: right;
    color: var(--bs-secondary-color);
}

/* Number & Label Styles */
.limitLabel {
    margin-bottom: .5rem;
}

.number {
    font-weight: 600;
}

/* This applies when .number is not empty */
.number:not(:empty):after {
    content: ".";
}

/* Form Item Row Styles */
.formItemRow {
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));

    .withChildQuestions, .withSpreadsheetQuestions {
        &:hover {
            color: var(--hover-color);
        }
    }

    .upDownArrow {
        display: inline-block;
        font-size: 14px;
        margin-top: 2px;
        margin-left: 5px;
        cursor: pointer;

        &.active {
            transform: rotate(180deg); /* Rotates the arrow to point down */
        }
    }

    .withChildQuestions {
        cursor: pointer;
    }
}

/* Error Styles */
.checkListError {
    color: var(--bs-danger);
}

/* Override .modal-content to remove border */
.modal-content {
    border: none;
}

/* Override white-space for .secondLabel so text doesn't shrink when collapsed */
.secondLabel.text-truncate {
    white-space: normal !important;
}

.pagination-label {
    color: var(--pagination-label-color);
    text-wrap: nowrap;
}
@media only screen and (min-width: 992px) {

    .breadcrumb-padding {
        padding-left: 0 !important;
    }
}

.save-and-finish-later-mobile {
    text-decoration: none;
}