/* * {
    box-sizing: border-box;
} */

/* 
colors...
main blue: lightblue;
accent blue: #54c3e7;
highlight/active/live: navajowhite;
selection: coral
warning: currently red... need to chg this
*/

/*Noto Sans font from file*/
@font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900;
    src: url(../Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf) format("truetype");
}

* {
    /* box-sizing: border-box; */
    font-family: 'Noto Sans', sans-serif;

}

:root {
    --mainBlue: lightblue;
    /* --accentBlue: #54c3e7; */
    --active: navajowhite;
    --selection: coral;
    --warning: #f94300;
    --accentPurple: lavender;

    --backgroundBlue: #d4e2e6;
    --backgroundGray: #e4e7e4;
    --accentBlue: #274e74;

    --backgroundBlank: #f6f8f9;

    --rangeEnds: rgb(54 103 175);

    --cancel: #bf5151;
    --action: #f1875f;

    /* generic colors for timelines, etc */
    --color-1: orange;
    --color-2: rgb(76, 140, 235);
    --color-3: rgb(32, 179, 98);
    --color-4: rgb(212, 64, 64);
    --color-5: yellow;
    --color-6: rgb(159, 82, 214);
    --color-7: violet;
    --color-8: lightgreen;
    --color-9: lightblue;
    --color-10: lightyellow;
    --color-11: rgba(230, 90, 55, 0.925);
    --color-12: rgb(240, 192, 36);
    --color-13: rgb(233, 121, 183);
    --color-14: rgb(21, 218, 21);
    --color-15: rgb(7, 7, 243);

    --bkgImg: '/img/palms.jpg'
}


/*GLOBAL STYLING*/

body {
    background-color: white;

    background: linear-gradient(270deg, rgb(255 255 255) 0%, rgb(221 228 233) 100%);

    /*COMMENTED FOR NOW...*/
    /* height: 100vh; */
}

button {
    display: block;
    border: none;
    font-size: 1rem;
    width: 200px;
    height: 40px;
    margin: 7px auto;
    text-align: center;
    text-decoration: none;
    color: whitesmoke;
    border-radius: 12%;
    background-color: var(--accentBlue);
}

.linkbutton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none;
    width: 200px;
    height: 40px;
    margin: 7px auto;
    text-align: center;
    text-decoration: none;
    color: whitesmoke;
    border-radius: 12%;
    background-color: var(--accentBlue);
}


h1 {
    text-align: center;
}

/* h2 {
    width: 350px;
    margin: 20px auto;
    text-align: center;
} */

.inactive {
    display: none;
}

.flex {
    display: flex;
}

.block {
    display: block;
}

.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.lineout {
    text-decoration: line-through;
}

.live {
    background-color: var(--active);
    color: black;
    border: 1px solid black;
    font-weight: 500;
}

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

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

.warn {
    color: var(--warning);
    font-variant: small-caps;
    font-size: 1.5rem;
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
    padding: 0px 5px;
    border-radius: 25px;
    border: 1px solid black;
    max-width: 130px;
    min-height: 30px;
    margin: 0 auto;
}

.goodflag {
    color: whitesmoke;
    font-variant: small-caps;
    font-size: 1.5rem;
    /* display: flex
; */
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    background-color: #18b718;
    padding: 0px 5px;
    border-radius: 25px;
    border: 2px solid #18b718;
    max-width: 180px;
    min-height: 30px;
    margin: 0 auto;
}

/*CLASS TO CAPITALIZE FIRST LETTER OF EACH WORD*/
.cap {
    text-transform: capitalize;
}

/*FORM VALIDATION STYLING*/

.invalid {
    border: 1px solid var(--warning);
}

/*END FORM VALIDATION STYLING*/


/*ICON STYLING*/
.icon-medium {
    max-width: 110px;
    height: auto;
}

/*END ICON STYLING*/


/*GENERIC COLOR CLASSES*/

.color-1 {
    background-color: var(--color-1);
}

.color-2 {
    background-color: var(--color-2);
}

.color-3 {
    background-color: var(--color-3);
}

.color-4 {
    background-color: var(--color-4);
}

.color-5 {
    background-color: var(--color-5);
}

.color-6 {
    background-color: var(--color-6);
}

.color-7 {
    background-color: var(--color-7);
}

.color-8 {
    background-color: var(--color-8);
}

.color-9 {
    background-color: var(--color-9);
}

.color-10 {
    background-color: var(--color-10);
}

.color-11 {
    background-color: var(--color-11);
}

.color-12 {
    background-color: var(--color-12);
}

.color-13 {
    background-color: var(--color-13);
}

.color-14 {
    background-color: var(--color-14);
}

.color-15 {
    background-color: var(--color-15);
}

/*GENERIC COLOR CLASSES*/

.only-print {
    display: none;
}

.mobile {
    display: block;
    text-transform: uppercase;
}

.not-mobile {
    display: none;
}

#go-back {
    background-color: var(--cancel);
}

.flashSuccess {
    text-align: center;
    background-color: var(--color-8);
    /* padding: 7px; */
}

.flashError {
    text-align: center;
    background-color: var(--warning);
    /* padding: 7px; */
}

/*END GLOBAL STYLING*/

/*HEADER*/

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    position: relative;
    top: 0;

    height: 50px;
    padding: 7px;
    /* border: 3px solid black; */
    color: black;

    margin: 20px auto;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}


#burger img {
    height: 44px;
    width: 44px;
    display: inline-block;
    position: relative;
    top: 3px;
}


/* #logo-link {
    color: black;
    font-weight: 400;
    background-color: transparent;
    width: auto;
} */

#logo-link {
    display: block;
    width: 100px;
    /* color: whitesmoke;
    text-align: center; */
    /* border-radius: 5%;
    font-size: 28px; */
    /* border: none; */
    /* padding: 2px 0; */
    /* text-decoration: none; */
}

#logo-link img {
    height: 90px;
    width: 90px;
}

#stamp {
    display: none;
    padding: 5px 7px;
}

/*END HEADER STYLING*/

/*NAV STYLING*/

nav {
    border-left: 2px solid black;
    width: 280px;
    margin: 0 auto;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* nav li {
    border-bottom: 2px solid black;
} */


nav a {
    color: black;
    display: block;
    text-align: center;
    font-size: 1.1rem;
    text-decoration: none;
    padding: 6px 26px;
    font-weight: 600;
    /* border-bottom: 2px solid black; */

    background-image: linear-gradient(90deg, black, black), linear-gradient(90deg, var(--mainBlue), var(--mainBlue));
    background-size: 235px 2px, 220px 22px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom, center;
}

/* nav a:hover {
    color: black;
    background-color: lightblue;
} */

/* .navcat {
    display: block;
    text-align: center;
    font-size: 1rem;
    text-decoration: none;
    padding: 6px 26px;
    font-weight: 800;
} */

.subnav a {
    color: black;
    background-image: linear-gradient(90deg, black, black), linear-gradient(90deg, var(--accentPurple), var(--accentPurple));
    background-size: 235px 2px, 220px 22px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom, center;

    display: block;
    text-align: center;
    /* font-size: 1rem; */
    text-decoration: none;
    padding: 6px 26px;
    font-weight: 600;
}

.navloc {
    background-image: linear-gradient(90deg, black, black), linear-gradient(90deg, var(--active), var(--active));
}

/*END NAV STYLING*/


/*LOGIN PAGES STYLING*/

#ldg {
    background-image: linear-gradient(0deg, black 1%, transparent), url(/img/palms.jpg);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    height: 95vh;

}


#ldg a:link,
#ldg a:visited {
    color: antiquewhite;
}

#ldg a:active {
    color: var(--color-10)
}


#ldg-logo {
    height: 125px;
    width: 125px;
    margin: 80px auto 0 auto;
    display: block;
}

#login h2 {
    text-align: center;
    color: var(--accentBlue)
}

#login form {
    margin: 50px auto 0 auto;
    width: 190px;
    border: 1px solid black;
    padding: 10px 15px 15px 15px;
    background-color: rgb(255 255 255 / 70%);
}

#login form label,
#login form input {
    display: block;
    width: 180px;
    /* margin: 0 auto; */
}

#login form button {
    display: block;
    /* margin: 10px auto 0 auto; */
    margin-top: 10px;
    width: 188px;
}

#forgot {
    display: block;
    text-align: center;
    margin-top: 10px;
}

footer .ack {
    display: block;
    text-align: center;
    position: relative;
    top: 50px;
}

/*END LOGIN PAGES STYLING*/


/*CALENDAR STYLING (ALL INSTANCES... USER SCHD, ADMIN VIEWS THAT USE CALENDAR, ETC)*/

.month {
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 3px solid black; */
}

#calendar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 364px;

    background-color: #f6f8f9;

    background: linear-gradient(150deg, rgb(244 244 247) 0%, rgb(227 227 241) 100%);
}

.date {
    height: 30px;
    width: 30px;
}

.week {
    background-color: darkgray;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.headings {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: black;
    width: 364px;
}

.headings .day {
    background-image: none;
    background-color: var(--mainBlue);
}

.day {
    min-width: 41px;
    max-width: 50px;
    min-height: 40px;
    background-image: linear-gradient(90deg, black, black);
    background-size: 25px 2px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    padding: 5px;
    font-size: .8rem;
    border-left: 1px solid black;
    /* border-right: 1px solid black; */
    /* border: 1px solid black; */
}

.shift {
    text-decoration: underline;
    font-weight: 700;
    hyphens: auto;
}

.today {
    background-color: var(--active);
}

.month-chg {
    font-weight: 600;
    font-size: 1.1rem;
    color: black;
    /* background-color: var(--mainBlue); */
    background-color: lightgray;
    border-radius: 15%;
    padding: 0px 10px;
    margin-top: 10px;
    display: inline-block;
    border: 2px solid black;
    width: 150px;
    text-align: center;
    text-decoration: none;
}

/*END CALENDAR STYLING (ALL INSTANCES... USER SCHD, ADMIN VIEWS THAT USE CALENDAR, ETC)*/



/*OPTIONS FORMS STYLING (BOTH PREFS AND POSITIONS)*/
/* .opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "a b"
        ". ."
        ". .";
} */

#options {
    padding: 0 50px;
}

.centr-head {
    width: 350px;
    margin: 20px auto;
    text-align: center;
}

#range-select {
    width: 300px;
    margin: 10px auto;
    padding: 10px;
    border: 2px solid black;
}

#range-select button {
    width: 200px;
    height: 40px;
    margin: 5px auto;
}

.adjust {
    background-color: var(--cancel);
}

#add {
    background-color: #f1f770;
    border: 2px solid black;
    color: black;
    font-weight: 600;
}

.x {
    background-color: lightgray;
    color: black;
    border: 2px solid black;
}

.s {
    background-color: var(--action);
    margin: 10px;
}

.e {
    background-color: lightgray;
    color: black;
    border: 2px solid black;
}

#done {
    background-color: var(--action);
    width: 350px;
    height: 45px;
    margin: 10px auto;
}

#opts-form {
    /* display: flex;
    flex-direction: column; */
    width: 350px;
    margin: 5px auto;
}

#opts-form button {
    width: 350px;
    height: 45px;
    margin: 5px auto;
}

/* .posOptions button {
    width: 350px;
    height: 45px;
    margin: 5px auto;
} */
/* 
.posOptions button:nth-of-type(n+2) {
    width: 350px;
    height: 45px;
    margin: 0px auto;
} */


.posOptions {
    width: 350px;
    margin: 10px auto;
}

.dayOfWeek {
    /* grid-area: a; */
    display: flex;
    flex-direction: column;
    width: 170px;
    margin: 10px auto;
    border: 2px solid black;
    padding: 10px;
    background-color: var(--backgroundBlue);
}

.locs {
    /* grid-area: b; */
    display: flex;
    flex-direction: column;
    width: 170px;
    margin: 10px auto;
    border: 2px solid black;
    padding: 10px;
    background-color: var(--backgroundBlue);
}

.inst {
    margin: 10px;
    /* font-weight: 700; */
    text-align: justify;
    /* border: 2px solid black; */
    padding: 10px;
}

#times {
    border: 2px solid black;
    padding: 10px;
    background-color: var(--backgroundBlue);
    width: 250px;
    margin: 10px auto;
}

#times #box-title {
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    margin: 0px 0 5px 0;
}

#times label {
    display: block;
}

#times input {
    display: block;
    width: 225px;
}

.sss {
    width: 350px;
    height: 45px;
    margin: 35px auto;
    background-color: var(--action);
}

#summary {
    border-left: 2px solid black;
    padding: 10px;
    margin: 20px;
}

#summary button {
    width: 250px;
    height: 40px;
    margin: 7px auto;
}

.range {
    text-align: center;
    font-weight: 800;
    font-size: 1.1rem;
}

/*END OPTIONS FORMS STYLING*/


/*USER PREF SUMMARY PAGE*/
.prefSummary {
    border-left: 2px solid black;
    margin: 40px auto;
    padding: 5px;
    width: 300px;
}

.ppp {
    border-top: 1.5px dashed black;
    border-bottom: 1.5px dashed black;
    padding: 10px;
    margin: 5px 0 10px 0;
    background-color: var(--backgroundBlue);
}

.done {
    width: 350px;
    height: 45px;
    margin: 5px auto;
}

/*END USER PREF SUMMARY PAGE*/


/*USER SEEQUALS PAGE*/

#qual-info {
    width: 250px;
    margin: 0 auto;
    border-left: 2px solid black;
    padding: 15px;
}

.qualdetail {
    display: block;
    background-image: linear-gradient(90deg, black, black);
    background-size: 235px 2px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    padding: 5px 15px;
}

.qname {
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 600;

}

.qdate {
    font-size: 1.1rem;
}

/*END USER SEEQUALS PAGE*/


/*USER MY ACCT PAGE*/

#acct {
    width: 300px;
    margin: 0 auto 0 15px;
    display: block;
    /* border: 1px dashed; */
    padding: 10px;
    font-weight: 500;
    font-size: 1.1rem;
}

#acct div {
    margin-top: 10px;
    text-transform: capitalize;
}

/*END USER MY ACCT PAGE*/



/*USER HOME PAGE*/

.el {
    /* width: 250px; */
    margin: 70px auto;
    text-align: center;
    font-size: 1.1rem;

}

.attn {
    font-weight: 600;
    color: black;
    border: 2px dashed black;
    /* border: 2px solid var(--accentBlue); */
    /* border-top: 2px solid black; */
    padding: 5px;
    width: 220px;
    background-color: var(--mainBlue);

}

/*END USER HOME PAGE*/


/*ADMIN DASH*/

#page-sections {
    margin: 23px auto 30px auto;
    padding: 0px 20px 20px 20px;
    width: 320px;
}

#page6 h2 {
    margin: 20px auto 10px auto;
}

#page-sections a {
    display: block;
    margin-top: 3px;
    margin-left: 7px;
    font-weight: 550;
}

#page-sections a:link,
#page-sections a:visited {
    color: var(--accentBlue);
}

/* #page6 a:hover {
    color: var(--color-12)
} */

#page6 a:active {
    color: var(--color-10)
}


/*END ADMIN DASH*/


/*ADMIN POSITIONS PAGE*/

.posSummary {
    /* font-weight: 700; */
    margin: 5px auto 15px auto;
    border-left: 2px solid black;
    width: 300px;
    /* text-align: center; */
    padding: 5px;
}

.posheading {
    margin-top: 20px;
    font-weight: 600;
    font-size: 1.5rem;
}

/* .posSummary span { */
/* position: relative;
    left: 4px;
    top: 0px;
    display: block;
    width: 100px;
    margin: 3px 0 5px 0; */
/* } */

.posSummary button {
    height: 25px;
    width: 60px;
    margin: 0px;
}

.posOptions .start,
.posOptions .end {
    width: 200px;
}

.posname {
    text-align: center;
    border-top: 2px solid black;
    /* border-bottom: 2px solid black; */
    padding: 20px 0;

    color: black;
    font-variant: small-caps;
    font-size: 1.5rem;
    margin-top: 5px;
}

/**/


/*ADMIN COVERAGE PAGE*/

#cvgtitle {
    font-size: 1.7rem;
    text-align: center;
    margin: 25px auto -50px auto;

}

.cvgsum {
    border: 1px solid var(--accentBlue);
    padding: 1px 2px;
}

.sel {
    background-color: var(--selection);
}

/**/

/*USER SEE-PREFS PAGE*/

.p {
    border: 2px solid black;
    padding: 10px;
    margin: 10px;
    background-color: var(--backgroundBlue);
    width: 315px;
}

.p div {
    width: 300px;
    margin: 0 auto;
}

.dlt {
    background-color: var(--cancel);
}

#no-prefs {
    text-align: center;
    font-size: 1.1rem;
    padding: 50px 0;
}

/**/


/*AA PAGE*/

#aa-results {
    border-top: 2px solid black;
    margin: 15px auto;
}

.aasum {
    border-bottom: 2px solid black;
    padding-bottom: 15px;
}

.aa,
.aa-pref,
.aa-shift,
.aa-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px auto;

    border-top: 1px black dashed;
    border-bottom: 1px black dashed;
    padding: 10px;
}

.aa-not {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px auto;

    border-top: 1px black dashed;
    border-bottom: 1px black dashed;
    padding: 10px;
}

.aapref {
    width: 300px;
    display: inline-block;
}

.aaresult {
    margin-top: 15px;
    width: 300px;
    display: inline-block;
}

.sim-text {
    color: var(--warning);
    text-align: center;
}

.sum-heading {
    text-align: center;
    font-weight: 700;
    font-size: 1.3rem;
    /* margin: 10px auto; */
    padding: 10px;
}

#aa-nums {
    padding: 10px;
}

#run {
    background-color: var(--action);
    font-weight: 600;
    color: black;
}

/*END AA PAGE*/

/*ADMIN PRE VIEW*/

#pre h1 {
    font-size: 1.7rem;
    margin-top: 30px;
}

#pre .workerselect {
    width: 275px;
    margin: 50px auto;
}

/*END ADMIN PRE VIEW*/


/*ADMIN ADJUST VIEW*/

#empl-info {
    font-weight: 700;
    font-size: 1.2rem;
    margin: 10px auto 20px auto;
    width: 275px;
    text-align: center;
    border: 2px dashed black;
    padding: 3px;
}

#open {
    width: 300px;
    margin: 10px auto 0 auto;
    border: 2px dashed;
    padding: 5px;
    background-color: var(--backgroundBlue);
}

#open-title {
    font-weight: 500;
    text-align: center;
}

#open-inst {
    font-weight: 500;
    text-align: center;
    /* position: relative;
    left: 10px; */
}

#openlist {
    padding: 10px;
    margin: 0;
}

#openlist li {
    text-align: center;
    background-color: var(--accentBlue);
    width: 175px;
    color: whitesmoke;
    padding: 5px;
    margin: 5px auto;
}

#open .center {
    /* text-align: center; */
    margin-top: 7px;
}


#remove-shift {
    padding: 5px;
    border: 2px dashed;
    background-color: var(--backgroundBlue);
    width: 300px;
    margin: 0 auto;
}

#remove-shift #leave-inst-one {
    text-align: center;
    /* width: 275px; */
    /* margin-bottom: 12px; */
    margin: 5px 0 0 0;
    font-weight: 500;
}

#remove-shift button {
    width: 140px;
    height: 40px;
}

#leave-sel {
    width: 275px;
    /* display: block; */
    margin: 12px auto;
    text-align: center;
}

#leave-inst-two {
    padding: 5px;
    font-weight: 600;
    text-align: center;

}

#adj-calendar {
    position: relative;
    top: -40px;
}

#adj-error .error {
    text-align: center;
    padding: 7px;
}

#adj-error button {
    width: 180px;
    height: 40px;
}

/*END ADMIN ADJUST VIEW*/


/*END ADMIN RANGE VIEW*/

#inst {
    font-weight: 600;
    text-align: center;
}

#date-range {
    padding: 5px;
    /* font-size: 0.9rem; */
    font-weight: 500;
    width: 340px;
    margin: 10px auto;
    border: 2px dashed black;
    background-color: var(--backgroundBlue);
}

/* #date-range span {
    text-align: center;
} */

.add-more.wide-button {
    width: 300px;
    background-color: var(--action);
}

#reset-dates {
    background-color: var(--cancel);
}

.add-more {
    background-color: var(--action);
}

#btns-one {
    padding: 5px;
}

#btns-one button {
    width: 160px;
    height: 40px;
}

#btns-one #undo {
    background-color: var(--cancel);
}

#btns-one .add-more {
    background-color: var(--action);
}

#btns-two {
    margin: 35px auto;
}

#btns-two button {
    width: 200px;
    height: 40px;
}

#btns-two #save {
    background-color: var(--action);
}

#btns-two #discard {
    background-color: var(--cancel);
    margin-top: 7px;
}

#range-calendar .month {
    margin: -10px auto;
}

#range-error button {
    width: 180px;
    height: 40px;
}

#range-error .error {
    margin: 7px auto;
    width: 275px;
}

#range-error #override {
    background-color: var(--action);
    margin-top: 10px;
}

#range-error #cancel {
    background-color: var(--cancel);
}

/*END ADMIN RANGE VIEW*/


/*ADD USER VIEW*/

#user-new form {
    width: 320px;
    margin: 10px auto;
}

#user-new .info {
    width: 300px;
    display: flex;
    gap: 5px;
}

#user-new .info label {
    padding: 5px;
}


#user-new .info input {
    flex: 1;
    margin-top: 5px;
}

.dateSel {
    padding: 5px;
}

.dateSel #yr {
    width: 148px;
}

#classific,
#user-quals {
    display: flex;
    flex-direction: column;
    width: 260px;
    margin: 10px auto;
    border: 2px solid black;
    padding: 10px;
    background-color: var(--backgroundBlue);
}

#admin-toggle {
    width: 264px;
    margin: 0 auto;
    border: 2px solid black;
    padding: 5px;
    background-color: var(--backgroundBlue);
}

#add-user-error .error-text {
    margin: 10px auto;
    padding: 5px;
    font-weight: 800;
    width: 280px;
}

#classific.invalid {
    border: 1px solid var(--warning);
}

#user-new #add {
    margin-top: 15px;
    width: 260px;
}

#user-new #go-back {
    margin: 10px auto 20px auto;
    width: 260px;
}

/*END ADD USER VIEW*/


/*EDIT USER VIEW*/

#empl-select {
    width: 300px;
    margin: 10px auto;
    text-align: center;
}

/*END EDIT USER VIEW*/


/*EDIT QUALS PAGE*/

/* #empl-info {
    font-weight: 700;
    margin: 10px 0;
} */

.q-label {
    padding: 5px;
    margin: 5px;
    display: block;
    border-bottom: 2px solid black;
}

#empl-quals {
    width: 320px;
    margin: 0 auto;
}

#empl-quals #empl-info {
    font-weight: 500;
    font-size: 1rem;
    margin: 10px auto 20px auto;
    width: 300px;
    text-align: left;
    border: 2px dashed black;
    padding: 10px;
}

#empl-quals .yr {
    width: 50px;
}

#empl-quals .error-disp {
    text-align: center;
    color: var(--warning);
    font-size: 1.1rem;
    border: 2px dashed var(--warning);
    padding: 3px;
    margin-bottom: 7px;
}

#empl-quals button {
    width: 250px;
}

#empl-quals #add {
    margin-top: 12px;
}

#empl-quals #go-back {
    margin-top: 8px;
    margin-bottom: 17px;
}

/*END EDIT QUALS PAGE*/


/*COSUMMARY PAGE*/

#cosum {
    width: 320px;
    margin: 30px auto 40px auto;
}

#cosum h2 {
    margin-top: 25px;
}

ul {
    list-style-type: none;
}

.cat {
    font-weight: 700;
    font-size: 1.2rem;
}

.subcat {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--accentBlue);
}

.catinfo {
    font-size: 1.1rem;
    color: var(--accentBlue);
}

/*END COSUMMARY PAGE*/


/*ALLSHIFTS VIEW*/

.trans-box {
    margin: 10px;
    border: 2px solid black;
    padding: 5px;
}

.nested-trans {
    border: 2px solid cadetblue;
    width: 90%;
    margin: 10px auto;
    background-color: aliceblue;
    padding: 5px;
}

/*END ALLSHIFTS VIEW*/


/*TRANSACTIONS VIEW*/

#all-transactions {
    width: 330px;
    margin: 0 auto 40px auto;
}


/*END TRANSACTIONS VIEW*/


/*DEVFOOTER STYLING*/

#devfooter {
    margin: 20px;
}

/*END DEVFOOTER STYLING*/


/*TIME CLOCK STYLING*/

/*likely a needed global style*/
.error-text {
    font-size: 1rem;
    text-align: center;
    color: var(--warning);
    border: 2px dashed var(--warning);
    width: 200px;
    margin: 0 auto;
    padding: 10px;
}

#page7 button {
    border: none;
    font-size: 1rem;
    width: 200px;
    height: 40px;
    margin: 7px auto;
    text-align: center;
    text-decoration: none;
    color: whitesmoke;
    border-radius: 12%;
    background-color: var(--accentBlue);
}

#top-ctr {
    display: block;
    height: 130px;
    margin: 40px auto;
}


#co-title {
    text-align: center;
    font-size: 1.5rem;
    position: relative;
    top: 150px;
}

#clock form {
    position: relative;
    top: 50px;
}

#clock label {
    width: 196px;
    padding: 0;
    height: 25px;
    margin: 0px auto;
    display: block;
}

#clock input {
    width: 196px;
    padding: 0;
    height: 25px;
    margin: 0px auto 10px auto;
    display: block;
}

.shift-details {
    margin: 0 auto;
    width: 200px;
    text-align: center;
    border: 2px dashed black;
    padding: 10px;
    margin-bottom: 20px;
}

/* #shift-disp button,
#punch-disp button,
#error-disp button,
#enter-pin button {
    width: 200px;
    height: 40px;
    margin: 5px auto;
} */

#shift-disp,
#punch-disp,
#error-disp,
#enter-pin {
    font-weight: 700;
}

/* #clock a {
    color: black;
} */

.punch {
    text-align: center;
    width: 300px;
    /* padding: 10px; */
    margin: 5px auto;
}

/*END TIME CLOCK STYLING*/


/*ERROR PAGE STYLING*/

#errorpage img {
    max-width: 150px;
    margin: 0 auto;
    display: block;
}

/*END ERROR PAGE STYLING*/


/*SHIFTSCHD STYLING*/

#shift-schd {
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#slot-rows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.slot-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-bottom: 1px dashed black;
}


#slots {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: black;

}

#slots .slot {
    background-color: var(--mainBlue);
}


.slot {
    min-width: 41px;
    min-height: 40px;
    padding: 5px;
    font-size: .8rem;
    border-left: 1px solid black;

}

.position {
    /* color: #18b718; */
    width: 100px;
    font-weight: 500;
    font-size: 1.2rem;
    background-color: var(--backgroundBlank);
}

.pos-line {
    width: 100%;
    /* height: 2px; */
    border-bottom: 2px solid black;
}

/* various fill values */

.zero {
    background-color: var(--backgroundBlank);
}

.odd.twelve {
    background-color: green;
}

.odd.one {
    background: linear-gradient(to right, green 8%, rgba(0, 0, 0, 0) 1%);
}

.odd.two {
    background: linear-gradient(to right, green 17%, rgba(0, 0, 0, 0) 1%);
}

.odd.three {
    background: linear-gradient(to right, green 25%, rgba(0, 0, 0, 0) 1%);
}

.odd.four {
    background: linear-gradient(to right, green 33%, rgba(0, 0, 0, 0) 1%);
}

.odd.five {
    background: linear-gradient(to right, green 42%, rgba(0, 0, 0, 0) 1%);
}

.odd.six {
    background: linear-gradient(to right, green 50%, rgba(0, 0, 0, 0) 1%);
}

.odd.seven {
    background: linear-gradient(to right, green 58%, rgba(0, 0, 0, 0) 1%);
}

.odd.eight {
    background: linear-gradient(to right, green 67%, rgba(0, 0, 0, 0) 1%);
}

.odd.nine {
    background: linear-gradient(to right, green 75%, rgba(0, 0, 0, 0) 1%);
}

.odd.ten {
    background: linear-gradient(to right, green 83%, rgba(0, 0, 0, 0) 1%);
}

.odd.eleven {
    background: linear-gradient(to right, green 92%, rgba(0, 0, 0, 0) 1%);
}

/* reversing the fill for front... */

.odd.front.one {
    background: linear-gradient(to left, green 8%, rgba(0, 0, 0, 0) 1%);
}

.odd.front.two {
    background: linear-gradient(to left, green 17%, rgba(0, 0, 0, 0) 1%);
}

.odd.front.three {
    background: linear-gradient(to left, green 25%, rgba(0, 0, 0, 0) 1%);
}

.odd.front.four {
    background: linear-gradient(to left, green 33%, rgba(0, 0, 0, 0) 1%);
}

.odd.front.five {
    background: linear-gradient(to left, green 42%, rgba(0, 0, 0, 0) 1%);
}

.odd.front.front.six {
    background: linear-gradient(to left, green 50%, rgba(0, 0, 0, 0) 1%);
}

.odd.front.seven {
    background: linear-gradient(to left, green 58%, rgba(0, 0, 0, 0) 1%);
}

.odd.front.eight {
    background: linear-gradient(to left, green 67%, rgba(0, 0, 0, 0) 1%);
}

.odd.front.nine {
    background: linear-gradient(to left, green 75%, rgba(0, 0, 0, 0) 1%);
}

.odd.front.ten {
    background: linear-gradient(to left, green 83%, rgba(0, 0, 0, 0) 1%);
}

.odd.front.eleven {
    background: linear-gradient(to left, green 92%, rgba(0, 0, 0, 0) 1%);
}



.even.twelve {
    background-color: cadetblue;
}

.even.one {
    background: linear-gradient(to right, cadetblue 8%, rgba(0, 0, 0, 0) 1%);
}

.even.two {
    background: linear-gradient(to right, cadetblue 17%, rgba(0, 0, 0, 0) 1%);
}

.even.three {
    background: linear-gradient(to right, cadetblue 25%, rgba(0, 0, 0, 0) 1%);
}

.even.four {
    background: linear-gradient(to right, cadetblue 33%, rgba(0, 0, 0, 0) 1%);
}

.even.five {
    background: linear-gradient(to right, cadetblue 42%, rgba(0, 0, 0, 0) 1%);
}

.even.six {
    background: linear-gradient(to right, cadetblue 50%, rgba(0, 0, 0, 0) 1%);
}

.even.seven {
    background: linear-gradient(to right, cadetblue 58%, rgba(0, 0, 0, 0) 1%);
}

.even.eight {
    background: linear-gradient(to right, cadetblue 67%, rgba(0, 0, 0, 0) 1%);
}

.even.nine {
    background: linear-gradient(to right, cadetblue 75%, rgba(0, 0, 0, 0) 1%);
}

.even.ten {
    background: linear-gradient(to right, cadetblue 83%, rgba(0, 0, 0, 0) 1%);
}

.even.eleven {
    background: linear-gradient(to right, cadetblue 92%, rgba(0, 0, 0, 0) 1%);
}

/* reversing the fill for front... */

.even.front.one {
    background: linear-gradient(to left, cadetblue 8%, rgba(0, 0, 0, 0) 1%);
}

.even.front.two {
    background: linear-gradient(to left, cadetblue 17%, rgba(0, 0, 0, 0) 1%);
}

.even.front.three {
    background: linear-gradient(to left, cadetblue 25%, rgba(0, 0, 0, 0) 1%);
}

.even.front.four {
    background: linear-gradient(to left, cadetblue 33%, rgba(0, 0, 0, 0) 1%);
}

.even.front.five {
    background: linear-gradient(to left, cadetblue 42%, rgba(0, 0, 0, 0) 1%);
}

.even.front.front.six {
    background: linear-gradient(to left, cadetblue 50%, rgba(0, 0, 0, 0) 1%);
}

.even.front.seven {
    background: linear-gradient(to left, cadetblue 58%, rgba(0, 0, 0, 0) 1%);
}

.even.front.eight {
    background: linear-gradient(to left, cadetblue 67%, rgba(0, 0, 0, 0) 1%);
}

.even.front.nine {
    background: linear-gradient(to left, cadetblue 75%, rgba(0, 0, 0, 0) 1%);
}

.even.front.ten {
    background: linear-gradient(to left, cadetblue 83%, rgba(0, 0, 0, 0) 1%);
}

.even.front.eleven {
    background: linear-gradient(to left, cadetblue 92%, rgba(0, 0, 0, 0) 1%);
}

/* end various fill values */

.half {
    opacity: 0.5;
}

#shiftschd-legend {
    border: 2px solid black;
    margin: 20px;
    text-align: center;
    text-transform: uppercase;
    padding: 7px;
}

/*END SHIFTSCHD STYLING*/


/*START EMPLSCHD STYLING*/

#empl-schd {
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#empl-slot-rows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.empl-slot-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid black;
}


#empl-slots {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: black;
    background-color: var(--mainBlue);
    border-bottom: 1px solid black;

}

#empl-slots .empl {
    background-color: var(--mainBlue);
    color: black;
}


.empl-slot {
    width: 30px;
    height: 40px;
    padding: 5px;
    font-size: .8rem;
    border-left: 1px solid black;

}

.empl {
    color: #18b718;
    width: 100px;
    height: 40px;
    font-size: 1rem;
    background-color: var(--backgroundBlank);
}

#empl-legend {
    border: 2px solid black;
    margin: 20px;
    text-align: center;
    text-transform: uppercase;
    padding: 7px;
}

.legend-box {
    width: 70%;
    margin: 0 auto;
}

/*END EMPLSCHD STYLING*/



/*RANGE SCHD VIEW*/

.next,
.prev {
    background-color: lightgray;

}

.sel-first {
    background-color: var(--rangeEnds);
}

.sel-second {
    background-color: var(--rangeEnds);
}

.sel-between {
    background-color: var(--color-2);
}


/*modal for adding shifts*/

#modal {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    /* background-color: white; */
    /* display: flex; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#shift-opts {
    border: 2px solid black;
    width: 300px;
    padding: 10px;
    background-color: var(--backgroundGray);
}

#shift-opts .empl-info {
    text-align: center;
    margin: 0px auto 7px auto;
    font-weight: 780;
}

#shift-opts #the-range {
    padding: 5px;
    border: 2px dashed black;
    background-color: var(--backgroundBlue);
    font-weight: 700;
    width: 200px;
    margin: 0 auto;
}

#shift-opts #pos-select {
    text-align: center;
    margin: 7px auto 0px auto;
    width: 200px;
}

#shift-opts #info,
#shift-opts #shift-length {
    width: 200px;
    margin: 7px auto 0px auto;
}

#shift-opts #form-error {
    font-weight: 800;
}

#shift-opts #add-shifts {
    background-color: var(--action);
}

#shift-opts #cancel {
    background-color: var(--cancel);
}


/*end modal styling*/

.legal-error {
    color: red;
    font-weight: 700;
}

.error {
    padding: 5px;
    border: 2px dashed var(--warning);
    margin: 5px;
    font-weight: 900;
    color: var(--cancel);
    background-color: var(--backgroundBlue);
}

/* .prev {
    background-color: lightgray
} */

/*END RANGE SCHD VIEW*/


/*ROSTER VIEW STYLING*/

#roster {
    margin: 0 auto 30px auto;
    width: 330px;
}

#roster-title {
    text-align: center;
}

#roster-date {
    text-align: center;
}

#roster .location-name {
    border-bottom: 1px dashed black;
}

#roster h3 {
    padding-left: 7px;
}

#roster .location-name span {
    display: block;
    padding-bottom: 12px;
    padding-left: 7px;
}

#roster ul {
    margin: 0;
    padding: 0;
}

#roster ul .rosterspot {
    margin: 5px 0;
    padding-left: 7px;
}

/*END ROSTER VIEW STYLING*/


/*LICENSE VIEW STYLING*/

.go-login {
    margin: 20px;
    text-align: left;
    display: block;
}

.go-login:link,
.go-login:visited {
    color: var(--accentBlue);
    font-weight: 700;
}

.go-login:active {
    color: var(--color-10);
}

#lic-ack {
    margin: 20px;
}

/*END LICENSE STYLING*/


/*tablets*/
@media only screen and (min-width: 681px) and (max-width: 1069px) {
    .aa {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        margin: 20px auto;
    }

    .aa-not {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        margin: 20px auto;
    }

    .mobile {
        display: none;
    }

    .not-mobile {
        display: block;
        text-transform: uppercase;
    }
}

/*small desktop and everything beyond...*/
@media only screen and (min-width: 1070px) {

    .aa {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        margin: 20px auto;
    }

    .aa-not {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        margin: 20px auto;
    }

    .mobile {
        display: none;
    }

    .not-mobile {
        display: block;
        text-transform: uppercase;
    }
}



/*styling for printable views*/
@media print {

    body {
        background-color: white;
        padding: 10px;
        color: black;
        /* font-size: 0.8rem; */
        height: auto;
    }

    header {
        display: none;
    }

    .only-print {
        display: block;
        height: 100px;
        width: 100px;
        margin: 0 auto;
    }

    .location-name {
        break-inside: avoid;
    }

}