* {
    box-sizing: border-box;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;    
}

body, html {
    color: var(--text);
    background-color: var(--background);
    overscroll-behavior-y: contain;
    padding: 0;
    margin: 0;
}

button {
    display: block;
    color: var(--text);
    background: var(--c0);
    border: 1px solid var(--c2);
    height: 35px;
    border-radius: 3px;
    margin: 20px auto;
    padding: 0 20px;
    font-size: 15px;
}

table {
    border-collapse: collapse;
}

button:disabled {
    color: gray;
    background-color: #333;
    cursor: not-allowed;
}

.error {
    color: red;
    text-align: center;
    margin: 20px
}

.msg {
    text-align: center;
    margin: 20px
}

input, textarea, select {
    height: 35px;
    margin: 20px auto;
    display: block;
    border-radius: 3px;
    border: 1px solid var(--c2);
    background-color: var(--c0);
    color: var(--text);
    padding: 10px;
    resize: vertical;
}

input:disabled {
    color: gray;
    border: 1px solid var(--c1)
}


.lm_content, .content {
    overflow: auto !important;
    height: 100%;
}

.work_data, .work_div, .work_employees, .Work_payelm, .ag-theme-balham-dark {
    height: 100%
}

.work_div {
    overflow: auto
}

#Work_payroll_button{
    margin: 0;
    padding: 3px;
    height: unset;
    font-size: 12px;
}

h1 {
    font-size: 32px
}

h2 {
    font-size: 24px
}

h3 {
    font-size: 18px
}

.selectize-input{
    text-align: left;
}

.data_div > input, .data_peek_div > input,  .acceptDataChange_div > input{

    width: calc(100% - 10px);
    margin: 5px;
    box-sizing: border-box;

}

.data_div, .data_peek_div, .acceptDataChange_div {

    height: calc(100% - 5px);
    margin: 0;
    padding: 0;
    box-sizing: border-box
    
}

.data_grid, .acceptDataChange_grid {

    height: calc(100% - 40px);
    margin: 0;

}

.data_peek_grid {
    height: calc(100% - 40px);
}

.picture_frame {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.picture_frame > img {
    max-width: 100%;
    max-height: 100%;
}

.ag-popup {
    height: 0
}

.ag-root-wrapper-body {
    height: 100%
}

.work_new_plans_wrapper {
    height: 100%
}

.work_new_plans_btns {
    height: 35px
}

.work_new_plans_btns .Choose_tile {
    margin: 2px 10px;
    height: 30px;
    font-size: 20px;
}

.work_new_plans_grid {
    height: calc(100% - 35px)
}

a {

    color: var(--text);
    text-decoration: none;

}

.ag-row-group {

    color: var(--c2);
    font-weight: 800

}


.data_load {

    height: 100%;
    display: grid;
    place-items: center;
    font-size: 5vh;
    width: 100%;

}

.data_load div {

    height: 100%;
    display: grid;
    place-items: center;
    font-size: 5vh;
    width: 100%;

}

.caseFolder {
    width: 100%;
    display: block;
    text-align: center;
}


.orgs_map_room {
    stroke-width: 1px;
    stroke: var(--c4);
    fill: var(--background);
}

.orgs_map_controls {
    height: 60px;
}

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

.orgs_map_controls button {
    display: unset;
    height: 28px;
    margin: unset;
}

.orgs_map_container {
    height: calc(100% - 30px);
    width: 100%;
    overflow: auto;
    background-color: var(--c1);
}

.orgs_map_map {
    background-color: var(--c1)
}

.orgs_map_text {
    fill: var(--text)
}

.gray_roomnames .orgs_map_text {
    fill: #444
}

.orgs_map_text_white {
    fill: var(--text) !important
}

.orgs_map_room_selected {
    stroke: red
}

.orgs_map_room_highlighted {
    fill: darkred
}

.QR_div {
    padding: 0 5%;
}

.QR_div input {
    width: 100%
}

.QR_div img {
    width: 100%;
    max-width: 60vh;
    display: block;
    margin: auto;
}

.orgs_map_controls > .selectedItem {
    background-color: darkred;
}

.getValShow_table {
    border-collapse:separate; 
    border-spacing:0 10px;
    }

.payroll_table {
    border-collapse: collapse;
    width: 100%
}

.payroll_table td{
    border: 1px solid var(--c2);
    padding: 5px;
    white-space: break-spaces;
}

.tempKey_table td {
    width: 25% !important;
    text-align: center;
}

.tempKey_table tr:first-of-type >td{
    font-weight: bold;
    font-size: 15px;
}

.tempKey_table button {
    margin-top: 0;
    margin-bottom: 0
}

textarea:disabled {
    color: gray
}

.barcode {
    width: 90%;
    height: 99%;
}