/******************************
    GLOBAL CSS FILE
*******************************/

/* HCS Brand Book Color Palette

    Dark Navy (Pantone 654) - loyalty, trust and peace
    Primary
    RGB 0 58 112
    HEX/HTML 003A70
    CMYK 100 71 10 47

    Cerulean Blue (Pantone 319) - communication and clarity
    Primary
    RGB 45 204 211
    HEX/HTML 2DCCD3
    CMYK 59 0 22 0

    Light Brown (Pantone 400) - simplicity and dependability
    Secondary
    RGB 196 191 182
    HEX/HTML C4BFB6
    CMYK 6 7 13 16

    Magenta (Pantone 7420) - energy, action and ambition
    Secondary
    RGB 155 34 66
    HEX/HTML 9B2242
    CMYK 13 100 54 30 */

/* It is not recommended to use !important, but it overrides Bootstrap CSS for now.

    When using !important, ordering of pseudo-classes matter, whereas the latest pseudo always overrides the previous.
        Example:
                    .dropdown:focus {...}
                    .dropdown:hover {...}
                    .dropdown:disabled {...}
                    ------------------------
                    disabled > hover > focus */
@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.spinning-wheel {
    margin-left: 10px;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

#hidden-status {
    float: right;
    position: absolute;
    right: 10px;
    top: 0px;
}

.space-between > div:not(:last-child) {
    margin-bottom: 5px;
}

.nav-elements:hover {
    color: rgb(155, 34, 66) !important;
    text-decoration: none;
}
 
.nav-elements {
    color: rgb(0, 58, 112) !important;
    cursor: pointer;
}

.about.nav-elements {
    padding: 8px;
}

button {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid #d3d3d3;
}

.button,
.button:focus,
.button-inverse,
.dropdown-radio,
.dropdown-hcs {
    background-color: white;
    border-color: lightgrey;
    box-shadow: none;
    color: rgb(0, 58, 112);
    outline: none;
}

.dropdown-hcs:focus {
    background: none !important;
    border-color: lightgrey !important;
    box-shadow: none !important;
    color: rgb(0, 58, 112) !important;
}

.button:hover,
.button:active,
.dropdown-hcs:hover {
    background-color: rgb(45, 204, 211) !important;
    border-color: rgb(45, 204, 211) !important;
    box-shadow: none !important;
    color: rgb(0, 58, 112) !important;
    outline: none !important;
}

.button-link,
.button-link:hover,
.button-link:focus,
.button-link:active {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: rgb(155, 34, 66) !important;
    font-size: 14px !important;
    margin-top: -3px !important;
    outline: none !important;
    padding: 0 !important;
}

.button:disabled,
.dropdown-hcs:disabled {
    background-color: lightgrey !important;
    border-color: lightgrey !important;
    color: rgb(0, 58, 112) !important;
    opacity: 1 !important;
}

.button-gap {
    margin-top: 48px;
}

.col,
.dropdown-item,
.dropdown-toggle,
h1,
h2,
h3,
h4,
h5,
h6,
.input,
.input:focus,
label,
.list-group-item,
.table {
    color: rgb(0, 58, 112);
}

.crf {
    margin-left: 20px;
    width: 50%;
}

.crf label {
    margin-left: 0px;
}

.crfTitle {
    margin-left: 10px;
    margin-top: 10px;
}

.crfDropdown {
    padding-left: 20px;
}

.crfDependency {
    display: inline;
    width: 100%;
}

.crfAnswerParent {
    margin-left: 0px;
    margin-right: 0px;
}

.crfAnswerChild {
    display: inline;
    margin-left: 40px;
}

.group-border {
    border-color: lightgrey;
    border-style: solid;
    border-width: 1px;
}

input[type=file]:disabled + label {
    background-color: lightgrey;
    border-color: lightgrey;
    color: rgb(0, 58, 112);
    cursor: default;
    opacity: 1;
}

.input:focus {
    border-color: rgb(45, 204, 211);
    box-shadow: 0 0 0 0.2rem rgb(45, 204, 211);
}

.input[type="checkbox"]:focus {
    box-shadow: none;
}

.input[type="hms"],
.input[type="hm"] {
    margin-left: 10px;
    text-align: center;
}

input:disabled + label {
    background-color: lightgrey;
    border-color: lightgrey;
    color: rgb(0, 58, 112);
    cursor: default;
    opacity: 1;
}

.tab {
    margin-left: 20px;
}

.dropdown-menu {
    max-height: 16em;
    overflow-y: auto;
}

.dropdown-item.active,
.dropdown-item:hover {
    background-color: rgb(45, 204, 211);
    border: none;
    color: rgb(0, 58, 112);
    outline: none;
}

table {
    margin-bottom: 0 !important;
}

table,
.thead-no-scroll {
    width: 100%;
}

td,
th {
    border-color: lightgrey;
    border-style: solid;
    border-width: 1px;
    padding: 4px !important;
}

tbody:not(#recordTableHeader) tr:hover,
tbody tr.selected {
    background-color: rgb(45, 204, 211) !important;
    border-color: rgb(45, 204, 211) !important;
    color: rgb(0, 58, 112) !important;
    cursor: pointer;
    outline: none !important;
}

.tableRecordHistory {
    max-height: 30vh;
    overflow-y: auto;
    border: 1px solid #dfdfdf;
}

#recordHistoryTableHead {
    text-align: center;
    font-weight: bold;
    border: 1px solid #dfdfdf;
}

.recordHistoryTableBody:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.05 );
    border: 1px solid #dfdfdf;
}

.dark {
    background-color: rgb(248, 248, 248);
    padding: 15px;
}

.light {
    background-color: rgb(256, 256, 256);
    padding: 15px;
}

.gap {
    margin-top: 24px;
}

.gap-bottom {
    margin-bottom: 24px;
}

.white-space {
    white-space: pre;
}

.scheduler-box {
    padding-top: 10px;
    padding-bottom: 10px;
}

.scheduler {
    display: inline;
}

.boxPeriod {
    display: inline-block;
    background-color: lightgrey;
    border-color: darkgrey;
    border-radius: 5px;
    padding: 3px 10px 3px 10px;
}

.indented {
    margin-left: 30px;
    margin-top: -10px;
    margin-bottom: 20px;
}

.center {
    padding: 8px 0;
    text-align: center;
}

.file-upload {
    border-color: lightgrey;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    color: rgb(0, 58, 112);
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 6px 12px;
}

.file-upload:hover,
.file-upload:focus,
.file-upload:active {
    background-color: rgb(45, 204, 211);
    border-color: rgb(45, 204, 211);
}

.input-shortened {
    margin-left: 10px;
    width: 30%;
}


.ComplianceTableHeader th {
    background-color: rgb(240,240,240) !important;
    border-color: black !important;
    border-style: solid;
    color: rgb(0, 58, 112) !important;
    cursor: default;
    text-align: center;
}

.complianceColumns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 20px;
    text-align: center;
}

.complianceColumns .tab-pane {
    padding-bottom: 40px;
}

/**************radzen table overrides START*********************/
.rz-radio-button-list-vertical .rz-radio-btn {
    padding: 0 !important;
    margin: 0 !important;
}

.rz-unselectable-text {
    padding: 0 !important;
}
.rz-cell-filter-label {
    height: 12px !important;
    margin: 0;
}

.center_template {
    text-align: center;
    vertical-align: central;
}

/**************radzen table overrides END***********************/

.whyQaDisabled {
    display: none; /* Hidden by default*/
    border-color: black;
    border-style: solid;
    border-width: 4px;
    border-radius: 8px;
    position: absolute; /*Sit on top of the page content */
    width: 500px;
    bottom: -1em;
    left: -25%;
    background-color: rgba(255,64,64,0.8);
    z-index: 2;
    box-shadow: 5px 8px rgba(112,64,64,0.3);
}

.whyQaDisabled h4 {
    text-align: center;
}

.pdf-viewer {
    height: 99vh;
    margin: 0px;
    width: 100%;
}

.pdf-page-canvas {
    display: block;
    margin: 5px auto;
    border: 1px solid rgba(0, 0, 0, 0.2);
}