/* 726 TECHNOLOGY INC 2017 - 2022 */


/* GLOBAL ELEMENT STYLES */

input {
    box-sizing: border-box;
}

div {
    box-sizing: border-box;
}

button:hover {
    cursor: pointer;
}


/* COLOR FILTERS */

.FBBlueSVG {
    filter: invert(30%) sepia(15%) saturate(2389%) hue-rotate(179deg) brightness(96%) contrast(91%);
}

.LightSilverSVG {
    filter: invert(95%) sepia(0%) saturate(772%) hue-rotate(173deg) brightness(68%) contrast(112%);
}

.LiveRedSVG {
    filter: invert(40%) sepia(63%) saturate(3918%) hue-rotate(335deg) brightness(87%) contrast(109%);
}

.OrangeSVG {
    filter: invert(75%) sepia(37%) saturate(5197%) hue-rotate(359deg) brightness(101%) contrast(105%);
}

.ShadowSVG {
    filter: invert(49%) sepia(4%) saturate(0%) hue-rotate(221deg) brightness(93%) contrast(95%);
}

.DarkSVG {
    filter: invert(0%) sepia(1%) saturate(7461%) hue-rotate(6deg) brightness(113%) contrast(60%);
}


/* UNSUPPORTED RESOLUTION */

.AltBodyBox {
    justify-content: center;
    display: flex;
    align-items: center;
    height: 70vh;
    color: #fff;
    font-size: 3vh;
    font-weight: bold;
}

@media screen and (min-width: 700px) {
    .AltBodyBox {
        display: none;
    }
}


/* USABLE PAGE */

.BodyBox {
    width: 92vw;
    height: 94vh;
    background-color: transparent;
    position: absolute;
    bottom: 4vh;
    top: 2vh;
    right: 4vw;
    left: 4vw;
    box-sizing: border-box;
    min-height: 300px;
    display: none;
}

@media screen and (min-width: 700px) {
    .BodyBox {
        display: inline;
    }
}


/* PAGE TITLE */

.TitleBox {
    font-weight: bold;
    padding: 0 2vw;
    background-color: transparent;
    font-size: 3.5vh;
    letter-spacing: 2px;
}




/* PAGE CONTENT */

.ContentBox {
    height: 70vh;
    padding: 0 2vw;
}

.ContentBox.manage {
    height: 78vh;
    padding: 0 4vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.ContentBox.misc {
    height: 82vh;
    padding: 0 4vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
}

.ContentBox.scrollable {
    height: 72vh;
    max-height: 72vh;
    padding: 1vh 4vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    margin-top: 4vh;
    overflow-y: scroll;
}


/* CONTENT VISIBILITY GROUPING */

.ContentForm {
    width: 100%;
}


/* META WRAPPER */

.MetaWrapper {
    margin-top: 4vh;
}


/* META DATA */

.MetaData {
    font-size: 3.0vh;
    font-family: monospace;
    color: #333;
}

.MetaData.mini {
    font-size: 1.5vh;
}

.MetaData.maxi {
    font-size: 4vh;
}


/* FIELD ITEM */

.FieldItem {
    display: block;
    padding: 0 2%;
    margin-top: 4vh;
    box-sizing: border-box;
    width: 100%;
}

.FieldItem input {
    width: 100%;
    padding: 1vh 2vw;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 4vh;
    letter-spacing: 3px;
}

.FieldItem input.condensed {
    font-size: 2vh;
}

.FieldItem__Select {
    width: 100%;
    padding: 1vh 2vw;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 4vh;
    letter-spacing: 3px;
    text-align-last: center;
    margin-top: 4vh;
}


/* BUTTON VISIBILITY GROUPING */

.ButtonGroup {
    width: 100%
}

.ButtonGroup.centered {
    text-align: center;
}

.ButtonGroup.centered {
    text-align: center;
}

.ButtonGroup button {
    box-sizing: border-box;
    font-weight: bold;
    font-size: 4vh;
    letter-spacing: 3px;
    margin-top: 4vh;
}

.ButtonGroup input {
    box-sizing: border-box;
    font-weight: bold;
    font-size: 4vh;
    letter-spacing: 3px;
    margin-top: 4vh;
}

.ButtonGroup input {
    padding: 1vh 0;
}

.ButtonGroup.compact input,
.ButtonGroup.compact button {
    margin-top: 2vh;
}

.ButtonGroup.dense input,
.ButtonGroup.dense button {
    margin-top: 1vh;
}


/* BUTTON LINE SHARING */

.ButtonSplitter {
    display: flex;
    justify-content: center;
}

.ButtonSplitter:not(:first-child) {
    margin-top: 4vh;
}

.ButtonLarge {
    width: 100%;
    left: 5%;
    right: 5%;
    bottom: 5%;
}

.ButtonHalf {
    width: 50%;
}

.ButtonHalf.margined {
    margin-left: 8%;
}

.ButtonThird {
    width: 33%;
}

.ButtonThird.margined {
    margin-left: 8%;
}

.ButtonGroup.compact .ButtonSplitter:not(:first-child) {
    margin-top: 2vh;
}

.ButtonGroup.dense .ButtonSplitter:not(:first-child) {
    margin-top: 1vh;
}


/* BUTTON ICONS DISABLED */

button:disabled .ButtonIconImg {
    filter: invert(58%) sepia(96%) saturate(0%) hue-rotate(133deg) brightness(92%) contrast(86%);
}


/* BUTTON SAVE */

.ButtonSave {
    color: #333;
}

.ButtonSave .ButtonIconImg {
    filter: invert(67%) sepia(79%) saturate(2489%) hue-rotate(133deg) brightness(95%) contrast(101%);
}


/* BUTTON DELETE */

.ButtonDelete {
    color: darkred;
}

.ButtonDelete .ButtonIconImg {
    filter: invert(7%) sepia(76%) saturate(7493%) hue-rotate(10deg) brightness(94%) contrast(111%);
}

.ButtonDelete.selected {
    background-color: #777;
}


/* TILES */


/* TILE SVG */

.TileSVG {
    width: 7vw;
    height: 7vh;
    margin-top: 1vh;
    transition: filter 0.5s;
    filter: invert(16%) sepia(0%) saturate(1%) hue-rotate(325deg) brightness(100%) contrast(89%);
}

.TileSVG.save {
    filter: invert(76%) sepia(30%) saturate(750%) hue-rotate(174deg) brightness(96%) contrast(103%);
}

.TileSVG.delete {
    filter: invert(7%) sepia(76%) saturate(7493%) hue-rotate(10deg) brightness(94%) contrast(111%);
}


/* TILE SIZES */

.TileHalf {
    width: 50%;
    text-align: center;
}

.TileHalf:not(.disabled):hover .TileSVG {
    filter: invert(49%) sepia(4%) saturate(0%) hue-rotate(221deg) brightness(93%) contrast(95%);
    cursor: pointer;
}

.TileHalf:not(.disabled):hover .TileSVG.save {
    filter: invert(86%) sepia(19%) saturate(864%) hue-rotate(99deg) brightness(101%) contrast(102%);
}

.TileThird {
    width: 33%;
    text-align: center;
}

.TileThird:not(.disabled):hover .TileSVG {
    filter: invert(49%) sepia(4%) saturate(0%) hue-rotate(221deg) brightness(93%) contrast(95%);
    cursor: pointer;
}

.TileThird:not(.disabled):hover .TileSVG.save {
    filter: invert(86%) sepia(19%) saturate(864%) hue-rotate(99deg) brightness(101%) contrast(102%);
}

.TileThird:not(.disabled):hover .TileSVG.delete {
    filter: invert(7%) sepia(76%) saturate(7493%) hue-rotate(10deg) brightness(300%) contrast(111%);
}

.TileHalf.selected,
.TileThird.selected {
    background-color: #777;
}

.disabled .TileSVG {
    filter: invert(95%) sepia(0%) saturate(772%) hue-rotate(173deg) brightness(68%) contrast(112%);
}


/* CONSOLE DATA */

.ConsoleData {
    font-size: 3.0vh;
    font-family: monospace;
    color: #333;
}


/* AREA HEADER */

.AreaHeader {
    margin: 3vh 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}


/* AREA SELECT BOX */

.AreaSelectBox {
    display: flex;
    align-items: center;
    width: 32%;
}

.AreaSelectBox.right {
    min-width: 25vw;
    justify-content: flex-end;
}
.filter-header-body{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* AREA SELECT */

.AreaSelect {
    font-size: 2.0vh;
    background-color: #87cefa55;
    border: none;
    padding: 1vh 1vw;
    color: black;
    font-weight: bold;
    outline: none !important;
}

.AreaSelect option,
.AreaSelect option:not(:checked) {
    background-color: #0007 !important;
}


/* AREA ACTION BUTTONS */

.AreaActionButtons {
    display: flex;
    width: 35%;
    justify-content: center;
}

.AreaActionButtons .AreaActionButton.conditional {
    background-color: #5553;
}

.AreaActionButtons .AreaActionButton.conditional:hover {
    background-color: #5553;
    cursor: default;
}

.AreaActionButtons.selected .AreaActionButton.conditional {
    background-color: #5558;
}

.AreaActionButtons.selected .AreaActionButton.conditional:hover {
    background-color: #5599;
    cursor: pointer;
}

.AreaActionButton {
    margin: 0 1vw;
    font-size: 2.5vh;
    background-color: #5558;
    color: #eee;
    outline: none !important;
    padding: 1vh 1vw;
    font-weight: bold;
}

.AreaActionButton:hover {
    background-color: #5599;
    cursor: pointer;
}

.AreaActionButton.disabled {
    background-color: #5553;
}

.AreaActionButton.disabled:hover {
    cursor: default !important;
    background-color: #5553 !important;
}

.AreaActionButton.toggled {
    background-color: #5599;
}
.ToolBarBox > .TitleBox__Text {
    color: white;
    padding: 0.8vh 0 0.1vh 0;
    font-family: 'Papyrus';
}
.form-control-date{
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 0px solid #ced4da;
    -webkit-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}