@import url('https://fonts.googleapis.com/css?family=Open+Sans');

html, body {
    font-family: 'Open Sans', sans-serif;
}

body {
    background: var(--cornerstone-page-background-color);
}

.xdce {
    height: 100%;
    width: 100%;
}

.full-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.shadow-panel {
    background: white;
    border: 1px solid grey;
    padding: 0.5rem;
    margin: 0.5rem;
    border-radius: 1rem;
    align-items: center;
    box-shadow: 0 0 0 .1rem lightgray;
}

.shadow-panel select {
    background: var(--cornerstone-navigation-bar-color);
    color: white;
    height: 2.25rem;
    padding: 0.75rem;
}

.card {
    width: calc(48% - 3rem);
    min-height: 12rem;
    padding: 1rem;
    margin: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}

.subform {
    width: calc(100% - 1.5rem);
    margin: 1rem 0;
    padding: 0.75rem;
    min-height: unset;
}

.card-title {
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    max-width: 100%;
}

.card-body {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    max-width: 100%;
}

.card-body-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75em;
}

.status {
    font-size: 1.1rem;
    font-weight: bold;
}

.card .button-row {
    display: flex;
    flex-direction: row;
    padding: 1rem 0 0 0;
}

.card .button-row img {
    margin-right: 1rem;
}

.card .button-row button {
    margin-right: 1rem;
}

#page-selector .select-text {
    display: flex;
    align-items: center;
    height: 3rem;
}

#page-selector .select-row {
    height: 3rem;
}

#form-select-modal .select-text {
    display: flex;
    align-items: center;
    height: 3rem;
}

#form-select-modal .select-row {
    height: 3rem;
}

.select-dropdown {
    max-height: 50vh;
    overflow-y: auto;
}

.field-warning {
    color: var(--cornerstone-tertiary-color);
    font-size: 0.8rem;
    cursor: pointer;
}

.field-warning:hover {
    text-decoration: underline;
}

.alert-message {
    color: var(--cornerstone-tertiary-color);
}

.invalid-items {
    max-height: 10rem;
    overflow-y: auto;
}

.arrow-container {
    width: 2rem;
    padding: 0.5rem;
}

.arrow-container img {
    width: 100%;
}

.x-box {
    flex: 1;
    display: flex;
    padding: 0.5rem;
    font-size: .9rem;
    flex-direction: column;
    break-inside: avoid;
}



.x-modal .x-combo-box {
    width: 100%;
}

.x-page form {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.validation-message {
    color: var(--cornerstone-warning-color);
    position: relative;
    overflow-x: visible;
}

input:not([type=checkbox]):not([type=radio]) {
    height: 1.75rem;
    line-height: 1.75rem;
    padding: 1px 0.5rem;
    border-radius: 0.5rem;
}

.select-container {
    border-radius: 0.5rem;
}

.x-input-box:invalid {
    background-color: #f4cecb;
    border: 1px solid var(--cornerstone-tertiary-color);
}

.btn {
    border-radius: 1rem;
    border: 1px solid black;
    padding: 0.5rem;
    cursor: pointer;
    background: var(--cornerstone-secondary-color);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: white;
}

.btn-clear {
    border: 1px solid transparent;
    background: transparent;
}

.btn-secondary {
    background: var(--cornerstone-navigation-bar-color);
}

.btn-info {
    background: var(--cornerstone-secondary-color);
    color: black;
}

.btn-danger {
    background: var(--cornerstone-tertiary-color);
}

.x-form button {
    margin: 0.5rem;
}

select {
    height: 1.75rem;
    line-height: 1.75rem;
    padding: 1px 0.5rem;
    border-radius: 0.5rem;
}

.dce-header {
    color: var(--cornerstone-primary-text-color);
}

label {
    color: var(--cornerstone-primary-text-color);
}

.x-modal-button-row {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.x-modal-button-row button {
    margin: 1rem;
    min-width: 4rem;
}

.x-modal label {
    color: var(--cornerstone-primary-button-text-color);
}

.x-modal div {
    color: var(--cornerstone-primary-button-text-color);
}

#addDceYearValidationMsg {
    color: red;
}

.x-radio-input {
    margin-left: 0.5rem;
}

.modal-body {
    margin: 1rem;
    max-height: 28rem;
    overflow-y: scroll;
}

.modal-header {
    max-height: 3rem;
}

.modal-content {
    height: 100%;
    max-height: 40rem;
}

.modal-footer {
    max-height: 4rem;
}

.modal-footer button {
    margin: 0;
}

.x-static-display {
    border: 2px solid black;
    cursor: default;
    background: white;
    position: relative;
    flex-grow: 1;
    border-radius: 0.5rem;
    height: 1.75rem;
    line-height: 1.75rem;
    padding: 1px 0.5rem;
    color: #000;
}

.disabled {
    cursor: default;
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));
    border-color: rgba(118, 118, 118, 0.3);
}

:root {
    --cornerstone-page-background-color: #FFFFFF;
    --cornerstone-secondary-background-color: #F5F5F5;
    --cornerstone-contrast-background-color: #000000;
    --cornerstone-border-color: #808080;
    --cornerstone-navigation-bar-color: #0B2D71;
    --cornerstone-navigation-text-color: #FFFFFF;
    --cornerstone-primary-color: #F6F7FB;
    --cornerstone-secondary-color: #32AE56;
    --cornerstone-tertiary-color: #E90101;
    --cornerstone-contrast-color: #000000;
    --cornerstone-light-background-color: #FFFFFF;
    --cornerstone-dark-text-color: #000000;
    --cornerstone-primary-text-color: #0B2D71;
    --cornerstone-secondary-text-color: #FFFFFF;
    --cornerstone-primary-button-text-color: #0B2D71;
    --cornerstone-secondary-button-text-color: #FFFFFF;
    --cornerstone-warning-color: #E90101;
}

@media (max-width: 768px) {

    .card {
        width: 100%;
    }
    .subform {
        width: calc(100% - 1.5rem);
    }
}

@media (max-width: 1074px) {
    #page-selector .select-text {
        height: 5.5rem;
    }

    #page-selector .select-row {
        height: 5.5rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --cornerstone-page-background-color: #696969;
        --cornerstone-secondary-background-color: #000000;
        --cornerstone-contrast-background-color: #FFFFFF;
        --cornerstone-border-color: #808080;
        --cornerstone-navigation-bar-color: #0B2D71;
        --cornerstone-navigation-text-color: #FFFFFF;
        --cornerstone-primary-color: #F6F7FB;
        --cornerstone-secondary-color: #32AE56;
        --cornerstone-tertiary-color: #E90101;
        --cornerstone-light-background-color: #FFFFFF;
        --cornerstone-dark-text-color: #000000;
        --cornerstone-primary-text-color: #FFFFFF;
        --cornerstone-secondary-text-color: #0B2D71;
        --cornerstone-primary-button-text-color: #0B2D71;
        --cornerstone-secondary-button-text-color: #FFFFFF;
        --cornerstone-warning-color: #f4cecb;
    }
}

@media screen {
    .print-footer {
        display: none;
    }
}

@media print {
    .no-print {
        display: none!important;
    }
    
    .validation-message {
        display: none;
    }
    
    .x-page {
        margin: 0 1rem;
        page-break-inside: avoid;
    }
    
    .print-footer {
        position: fixed;
        bottom: 0;
    }
    
    @page {
        margin: 3rem;
    }
}