/***************
    DO NOT ADD ANY NEW CUSTOM CLASSES TO THIS DOCUMENT UNLESS THEY APPLY GLOBALLY TO THE ENTIRE APP!!
    USE CSS ISOLATION FOR ANY CLASSES ON A PAGE/VIEW LEVEL
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

:root {
    --txt-color: #040505;
    --txt-color-white: #ffffff;
    --txt-active: #845fa7;
    --txt-color-2: rgb(4, 5, 5, 0.72);
    --color-borders: rgb(0, 0, 0, 0.32);
    --primary: #845FA7; /*purple*/
    --primary-light: #8e78a3; /*light purple*/
    --success: #198754;
    --warning: #ffc107;
    --danger: #dc3545;
}
    .primary {
        color: var(--primary);
    }

    .success {
        color: var(--success);
    }

    .warning {
        color: var(--warning);
    }

    .danger {
        color: var(--danger);
    }
/* 1) custom text classes */
    .text-purple {
        color: var(--primary) !important;
    }
    .text-sml {
        font-size: 0.5rem;
    }
    .text-70 {
        font-size: 0.7rem;
    }
    .text-80 {
        font-size: 0.8rem;
    }

/* 2) custom button classes */
    .btn-feedback {
        right: -25px;
        transform: rotate(-90deg);
        -webkit-transform-origin: 50% 54%;
    }
    .btn-purple {
        background: var(--primary);
        color: #FFFFFF;
    }
        .btn-purple:hover {
            background: var(--primary-light);
            color: #FFFFFF;
        }
        .btn-purple:focus, .btn-purple:active {
            background: var(--primary-light) !important;
            color: #FFFFFF !important;
        }
    .btn-outline-purple {
        --bs-btn-color: var(--primary);
        --bs-btn-border-color: var(--primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--primary);
        --bs-btn-hover-border-color: var(--primary);
        --bs-btn-focus-shadow-rgb: 13,110,253;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--primary);
        --bs-btn-active-border-color: var(--primary);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: var(--primary);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--primary);
        --bs-gradient: none;
    }
        .btn-outline-purple:hover {
            background: var(--primary) !important;
            color: #FFFFFF !important;
        }
    a.disabled {
        cursor: not-allowed !important;
    }
    .btn.disabled:hover {
        background-color: #6c757d;
        pointer-events: all !important;
    }
    button:disabled, button[disabled] {
        pointer-events: all !important;
        cursor: not-allowed !important;
    }
    a.active {
        color: var(--primary) !important;
        border-bottom: 1px solid var(--primary) !important;
    }
    /*PDF report preview signiture pad button*/
    .reportClearButton {
        margin: 12px 0;
        width: 100px;
        height: 40px;
        background: transparent;
        border: 2px solid var(--txt-color);
        border-radius: 10px;
        font-weight: 600;
    }
    .reportClearButton:hover {
        background-color: var(--txt-color);
        color: var(--txt-color-white);
        transition: 0.2s ease-in;
    }
    /*Removes default colour backbround*/
    .accordion-button:not(.collapsed) {
        background-color: initial !important;
        color: initial !important;
    }
    .accordion-item {
        border: 1px solid #6c757d;
    }
    .accordion-button:focus {
        box-shadow: none !important;
    }

/* 3) custom backgrounds classes */
    .bg-purple, .grape-purple {
        background: var(--primary);
    }
    .border-purple {
        border: 1px solid var(--primary) !important;
    }
    .text-bg-purple {
        color: #fff !important;
        background-color: var(--primary) !important;
    }

/* 4) custom navigation classes */
    a.nav-link {
        color: #333 !important;
    }
    ul.nav-tabs, ul#form-tabs, ul#form-tabs.nav-link:hover {
        --bs-nav-link-color: rgb(0,0,0) !important;
        font-weight: 600 !important;
        cursor: pointer !important;
    }
    .nav-tabs {
        --bs-nav-tabs-border-color: var(--primary) !important;
    }

        .nav-tabs .nav-link {
            border: var(--bs-nav-tabs-border-width) solid var(--primary) !important;
        }

            .nav-tabs .nav-link:hover {
                background: var(--primary) !important;
                color: #ffffff !important;
            }

            .nav-tabs .nav-link.active {
                background: var(--primary) !important;
                color: #ffffff !important;
            }

/* 5) custom hover classes*/
    button.dropdown-item:hover, a.dropdown-item:hover {
        background-color: var(--primary) !important;
        color: #FFFFFF;
        cursor: pointer !important;
    }
    a.dropdown-item.text-success, a.dropdown-item.text-warning {
        color: #000000 !important;
    }
    a.dropdown-item.text-primary:hover, button.dropdown-item.primary:hover {
        background-color: #0a58ca !important;
        color: #FFFFFF !important;
        cursor: pointer !important;
    }
    a.dropdown-item.text-success:hover, button.dropdown-item.text-success:hover {
        background-color: var(--success) !important;
        color: #FFFFFF !important;
        cursor: pointer !important;
    }
    a.dropdown-item.text-warning:hover, button.dropdown-item.text-warning:hover {
        background-color: var(--warning) !important;
        color: #000000 !important;
        cursor: pointer !important;
    }
    a.dropdown-item.text-danger:hover, button.dropdown-item.text-danger:hover {
        background-color: var(--danger) !important;
        color: #FFFFFF !important;
        cursor: pointer !important;
    }
    #doc-list a:hover,
    #pageNav a:hover,
    li.nav-item > a:hover {
        color: var(--primary) !important;
        text-decoration: underline !important;
        font-weight: 600;
    }
    li.text-end:hover button#logout {
        background-color: var(--primary) !important;
        color: #FFFFFF !important;
        border-radius: 0 !important;
        width: 100%;
        text-align: right !important;
        padding: 4px 16px 4px 0px;
        margin-right: 0 !important;
    }
    .hover:hover {
        opacity: 0.5;
    }
    /*help pages - zooms images on hover*/
    .zoom:hover {
        -ms-transform: scale(2); /* IE 9 */
        -webkit-transform: scale(2); /* Safari 3-8 */
        transform: scale(2);
        overflow: scroll;
        cursor: zoom-in;
    }
    #doc-list a.nav-link.active {
        background-color: inherit !important;
        border-radius: 0 !important;
    }

/* 6) misc classes*/
    #sm-screen {
        display: none;
    }
    .required::after {
        content: " (required)"; /*space required*/
        font-weight: 600;
    }
    .form-control{
        min-height:2.5rem;
    }
    /*override - adds dark border to all form inputs*/
    .form-control, .form-select {
        border-color: #212529 !important;
    }
    input:disabled, button:disabled, button[disabled], a.disabled {
        cursor: not-allowed !important;
       /*pointer-events:initial !important;*/
    }
    /*custom large check*/
    input.check-lg {
        height: 1.5em !important;
        width: 1.5em !important;
        margin-right: 5px;
        border: 1px #333 solid;
        margin-top: 0 !important;
    }
    /*fixes label alignment on large check*/
    .form-check-inline > label.form-check-label {
        vertical-align: middle;
    }
    /*increases default size of Bootstrap icons*/
    i.bi {
        /*color: var(--primary);
         font-size: 1.2rem;*/
    }
    /*custom icons*/
    i.md {
        font-size: 1.2rem;
        line-height: 1;
    }
    i.lg {
        font-size: 1.5rem;
    }
    /*removes link on hover*/
    i.bi:hover {
        text-decoration: none !important;
    }
    /*Signature image on preview report - view only*/
    .signature-image {
        display: block;
        box-sizing: border-box;
        border: 1px solid #212529 !important;
        border-radius: 10px;
        width: 100%;
        height: 150px;
    }
/*Overrides dataTables search box default position*/
.dt-layout-row{
    justify-content: start !important;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
    justify-content: center !important;
    width: 80% !important;
    text-align: left !important;
    margin-left: 0 !important;
}
    div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end input[type="search"] {
        width: 700px !important;
        border: 1px solid #212529 !important;
        border-radius: 0.375rem !important;
    }
        div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end input[type="search"]:focus {
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
        }
/*Overrides dataTables row count dropdown*/
.dt-input {
    margin-right: 5px;
}
div.dt-container div.dt-layout-row div.dt-layout-cell {
    display: inline-block !important;
}
/***DESKTOP/LARGE DEVICES****/
@media screen and (min-width: 768px) and (max-width: 992px) {
    /*Overrides dataTables search box default position*/
    div .dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
        width: 70% !important;
    }
        div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end input[type="search"] {
            width: 450px !important;
        }

}
    /***TABLET/MEDIUM DEVICES****/
    @media screen and (min-width: 576px) and (max-width: 768px) {
        select, .form-select {
            font-size: 0.8rem !important;
        }

        .sub {
            padding: 0px 12px;
        }

        .button-group {
            padding: 64px 12px;
        }

        .details {
            margin: 24px 12px;
        }

        label {
            font-size: 1rem;
        }

        input {
            font-size: 0.8rem !important;
        }
        /*Overrides dataTables search box default position*/
        div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end input[type="search"] {
            width: 550px !important;
        }
        /*Fixes dataTables pagination position*/
        .dt-paging {
            text-align: center !important;
            margin-left: 75px !important;
        }

    }
    /***MOBILE/SMALL DEVICES****/
    @media screen and (max-width: 576px) {
        .button-group {
            display: flex !important;
            flex-direction: column !important;
        }

        #sm-screen {
            display: inline-block;
        }
        /*Overrides dataTables search box default position*/
        /*div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
            width: 25% !important;
            float: left !important;
            text-align: left !important;
        }*/

        /*Fixes dataTables pagination position*/
        .dt-paging {
            text-align: center !important;
            margin-left: 75px !important;
            width: 100%;
        }

        div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end input[type="search"] {
            width: 450px !important;
        }

    }