:root {
--darkteal: #1e1eaa;
--teal: #f0e0ac;
--icy-blue: #aadfffff;
--night-bordeaux: #4c191bff;
--seaweed: #06a77dff;
--soft-apricot: #fcd0a1ff;
--slate-grey: #63768dff;

--m_icy-blue: #d3e5f1ff;
--m_night-bordeaux: #94595bff;
--m_seaweed: #58c4a7ff;
--m_soft-apricot: #eedfcfff;
--m_slate-grey: #9ca4adff;

--tabheight: 40px;
--width-without-scrollbar: calc(100vw - (100vw - 100%));
}

body{
    /* text-wrap: balance; */
    text-wrap: wrap;
    max-width:1200px;
    margin: 0 auto;
    font-weight: 300;
}

/*
body * {
    border: 1px solid red;
}
*/

h1{
    font-weight: 500;
    font-size: 2.5em;
}

h2{
    font-weight: 400;
    font-size: 2.5em;
}

strong{
    font-weight: 550;
}

.reset_fontsize{
    font-size: 100%;
}

.monospace{
    /*
    font-family: ui-monospace,
             Menlo, Monaco,
             "Cascadia Mono", "Segoe UI Mono",
             "Roboto Mono",
             "Oxygen Mono",
             "Ubuntu Mono",
             "Source Code Pro",
             "Fira Mono",
             "Droid Sans Mono",
             "Consolas", "Courier New", monospace;
*/
    font-variant-numeric: tabular-nums;
}

.topbar {
    background:#ddd;
    padding:3px 0;
    border-bottom:3px solid #888;
    border-top: 3px solid #eee;
}

.embedvideo {
    animation: 2s linear 0s 1 heroload;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.embedvideo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.embedvideo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.embedvideo #intro {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    background: #fff;
    text-align: center;
    font-size: clamp( 30px, 6vw, 60px );
    display:flex;
    justify-content: center;
    align-items: center;
}

/* image poster clicked, player class added using js */
.embedvideo.player img { display: none; }
.embedvideo.player:after { display: none; }

@keyframes heroload {
    0% {
        transform: scale(0.6,0.6);
    }

    30% {
        transform: scale(0.8,0.8);
    }

    100% {
        transform: scale(1,1);
    }
}

.tests{

    & p {
        margin-bottom: 0;
    }
}

.wrap_default{
    text-wrap: wrap;
}

.EXCEPTION {
    position: fixed;
    inset: 0;
    width: 96vw;
    max-width: 800px;
    height: fit-content;
    margin: auto;
    border: solid;
    padding: 2ch;
    color: CanvasText;
    background: linear-gradient(-45deg, #fff56f 25%, #888 25%, #888 50%, #fff56f 50%, #fff56f 75%, #888 75%, #888);

    & h1 { text-align: center; font-size: 1.2em; }
    & .dumpster {
        background-color: Canvas;
        width: calc(96vw - 6px);
        max-width: calc(800px - 6px); ;
        position: relative;
    }
    & .cancelx {
        position: absolute; top: -20px; right: -20px;
    }
}

.topspacer {
    box-sizing: border-box;
    width: var(--width-without-scrollbar);
    height: calc( 2px + var(--tabheight) );
    z-index: 10;
}

.tablist {
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: var(--width-without-scrollbar);
    display:flex;
    flex-direction: row;
    border-bottom: 1px solid white;
    z-index: 10;
}

.tablist .tab, .tablist .dummy {
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    border: 1px solid white;
    background: #0000dd;
    color: white;
    flex: 1 1 20%;
    text-align: center;
    font-weight: 400;
    line-height: var(--tabheight);
    padding-left, padding-right: 2px;
}

.tablist .dummy.selected {
    background: #fff;
    color: #0000dd;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
}

.tablist .tab:hover {
    background: #addfff;
    color: #008;
}

.tablist .tab.narrow,
.tablist .dummy.narrow {
    flex: 1 1 2em;
}

.logout {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 2px 6px;
    color: #aaa;
    font-weight: bold;
}

input:not([type=checkbox]) {
    text-align: center;
    width: 40vw;
    font-size: 24px;
}


h1 {
    font-weight: 500;
    font-size: clamp(1.5rem, 3.5vw, 4rem);
    margin-block-end: 0.1em;
}

h2 {
    font-weight: 400;
    font-size: clamp(1.5rem, 2.5vw, 3rem);
    margin-block-start: 0.1em;
    margin-block-end: 0.1em;
    text-align: center;
}

.success {
    background: #aaffaa;
}

.adminpages h1 {
    font-size: clamp(1.5rem, 1.2vw, 2rem);
}

.adminpages h2 {
    font-size: clamp(1.5rem, 1.0vw, 2rem);
}

.vrequest {
    border-bottom: 1px solid #ccc;
    position: relative;
}

.vrequest.confirmed {
    background: #ccc;
}

.vrequest .vendor {
    color: black !IMPORTANT;
}

.vrequest h1 {
    margin: 2px;
    font-size: 22px;
    display: flex;
    justify-content: space-between;
}

.vrequest p {
    display: flex;
    justify-content: space-between;
}

.vrequest > h1 > span {
    color: #004;
}
.vrequest > h1 > span:hover {
    color: #00c;
    cursor: pointer;
}

.vrequest.query > h1 > span,
.vrequest.querymsg > h1 > span,
.vrequest.querymsgsent > h1 > span {
    color: #DD0;
}
.vrequest.query > h1 > span:hover,
.vrequest.querymsg > h1 > span:hover,
.vrequest.querymsgsent > h1 > span:hover {
    color: #FF8;
}

.vrequest p {
    margin: 2px;
}

.request {
    margin: 0.2em;
    padding-left: 0.25em;
    border: 1px solid black;
    padding 0.2em;
    position: relative;
    background: #fff;
}

.request img {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
}

.request .deladjustment img {
    position: static;
    width: 2ch;
    height: auto;
    cursor: pointer;
}

.request.adjustment {
    background: white;
}
.request.review {
    background: #ffffc0;
}
.vrequest.query,
.request.query {
    background: #1a2476;
    color: #fff;
}
.request.querymsg, .request.querymsgsnt,
.vrequest.querymsg, .vrequest.querymsgsnt{
    background: #2c39c6;
    color: #fff;
}

.request .alert,
.vrequest .alert {
    width: 100%;
    font-size: 0.5em;
    text-align: center;
    background: #800;
}

.request.full {
    background: #ffc0c0;
}

.request.confirmed {
    background: #c0ffc0;
}

.request > .name { font-weight: bold; display:inline-block; text-transform: capitalize; position:relative; left: 2em;  }
.request > .role { display: block; text-align: center; }
.request > .status { font-weight: bold; display: block; text-align: right; padding:0 1em; }
.request > .hours { display: inline-block; position: absolute; bottom: 0.1em; left: 0.1em; }
.request   .banked { font-weight: bold; text-align: center;}

.journal {
    .request { width:75%; max-width:600px; margin: 0 auto; display:flex; justify-content:space-between; }
    .request:last-of-type{ margin-bottom:6px;}

    .request.adjustment { background-color:#c8d7ca; }
    .request.adjust_banked { background-color:#a9b7da; }
    .request.adjust_buyout { background-color:#adc3b0; }
    .request.buyout { background-color:#709775; color:white; }
    .request.review { background-color:#f0ece2; }
    .request.confirmed { background: #dfd3c3; }
    .request.querymsg, .request.querymsgsnt { background: #3c4f76; }
    .request span { display:inline-block;  padding: 2px; box-sizing:border-box;}
    .request > .date { flex: 0 0 11ch; }
    .request > .name { font-weight: bold; text-transform: capitalize; position:static; flex: 0 1 10ch; }
    .request > .role { position: static; flex: 1 1; }
    .request > .notes { position: static; flex: 1 1; }
    .request > .status { position: static; }
    .request > .hours { position: static; width:auto; }
    .request   .banked { font-weight: bold; text-align: center;}


}

.usernotes {
    position: relative;
}
.usernotes textarea {
    box-sizing: border-box;
    width: 100%;
    height: 6em;
    padding: 8px;
    font-size: 20px;
}
.usernotes span {
    background: #99c8a8;
    position: absolute;
    right: 0;
    bottom: -1em;
}

.center{
    display: block;
    margin: 10px auto;
}

.inset {
    margin-left: 1em;
    margin-right: 1em;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.flex_columns_parent {
    display: flex;
    flex-flow: row wrap;
    gap: 4px;
    justify-content: space-around;
}

.flex_columns_parent > div {
    flex: 0 0 164px;
}

.flex_columns_parent.stylemax > div {
    flex: 0 0 135px;
}

.cardheader {
    background-color: var(--soft-apricot);
    color: black;
    border: 1px solid black;
    border-radius: 0;
}

.cb_vendor {
    flex: 1 1;
    position:relative;
    padding: 4px 8px;
    background-color: #addfff;
    color: black;
    font-weight: 200;
    border-radius: 10px;
    border: 1px solid grey;
}

.cb_vendor > .cover {
    cursor: pointer;
    position: absolute;
    left: 0;
    top:  0;
    width:  100%;
    height: 100%;
}

.cb_vendor > input[type='checkbox'] { position:relative; top: -3px; }
.cb_vendor > label {
    margin-left: 1em;
}

.wbutton {
    flex: 0 0;
    margin-top: 1em;
    font-size: 17px;
    padding: 0.5em 1.3em;
    font-weight: 500;
    background: #addfff;
    color: black;
    border: 1px solid black;
    position: relative;
    top: -1em;
    border-radius: 0.6em;
    cursor: pointer;
}

.wbutton:hover {
	box-shadow:inset 0px 1px 0px 0px #f29c93;
}
.wbutton:active {
    transform: scale(0.97);
}

.vendprefs {
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}

.vendprefs > .cb_vendor {
    margin-bottom: 2px;
}

.vendprefs .prefs {
    padding-left: 2ch;
}

.inter-heavy {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.inter-med {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 150;
  font-style: normal;
}

.queryconfirm {
    display: flex;
    justify-content: space-around;
    padding-bottom: 6px;
}

.queryconfirm .simplebutton {
    display: inline-block;
    margin: 0;
}

.queryconfirm .query-note {
    background: #c8601b;
}

/* From https://codefronts.com/motion/css-animated-buttons/css-liquid-fill-button-animation/ */
.liquid {
  --liquid: var(--teal);
  --border-col: var(--darkteal);
  --hover-text: black;
  position: relative;
  overflow: hidden;
  padding: .85rem 2.2rem;
  font-size: 1rem;
  color: #f4f4f4;
  background: var(--border-col);
  border: 2px solid black;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  letter-spacing: .03em;
  transition: color .4s;
}

.liquid:disabled{
    transition: none !important;
    background: #ccc;
    --liquid: #ccc;
    --hover-text: #f4f4f4;
}

.liquid.small {
    padding: 0.5ch 1ch;
}

.liquid-bordeaux {
  --liquid: var(--teal);
  --border-col: #a78bfa;
  --hover-text: black;
  color: #fff;
}

.liquid--apricot {
  --liquid: #fff9f3;
  --border-col: var(--soft-apricot);
  --hover-text: black;
  color: var(--night-bordeaux);
}

.liquid--cyan {
  --liquid: #0891b2;
  --border-col: #22d3ee;
  color: #67e8f9;
}

.liquid--violet {
  --liquid: #7c3aed;
  --border-col: #a78bfa;
  color: #c4b5fd;
}

.liquid--amber {
  --liquid: #d97706;
  --border-col: #fbbf24;
  color: #444;
}

.liquid span {
  position: relative;
  z-index: 1;
}

.liquid::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -25%;
  width: 150%;
  height: 200%;
  background: var(--liquid);
  border-radius: 45% 55% 0 0 / 25% 25% 0 0;
  transform: translateY(100%);
  transition: transform .65s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}

.liquid:hover::before {
  transform: translateY(5%);
  animation: ab-06-wave 2.5s ease-in-out infinite .65s;
}

.liquid:hover {
    color: var(--hover-text);
}

@keyframes ab-06-wave {
  0%,
    100% {
    border-radius: 45% 55% 0 0 / 25% 25% 0 0;
  }

  50% {
    border-radius: 55% 45% 0 0 / 20% 30% 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .liquid::before {
    transition: none;
  }

  .liquid:hover::before {
    animation: none;
  }
}

#purge_vendor {
    margin: 32px 0 0 32px;
    padding: 0;
    position: relative;
    flex: 0 0 200px;
    height: 100px;
    border-radius: 12px;
    border: 1px solid #ccc;
    overflow: hidden;
}

#do_purge {
    position: absolute;
    top: 50px;
    left: 150px;
    transform: translate( -50%, -50% );
}

#safety {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 100px
}

#lock {
    position: absolute;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    border: 1px solid grey;
    width:  60px;
    height: 60px;
    margin: 0 auto;
    transition: transform 1s;
    background-image: url('/images/locksmall.png');
}

#safety.open #lock {
    transform: rotate(90deg);
}

#cover {
    position: absolute;
    top: 0;
    left: 0px;
    width: 200px;
    height:100px;
    background: rgba(0,0,0,0.4);
}

#safety.open #cover {
    transition: width 1s ease-in-out;
    width: 100px;
}

#safety #condemned{
    text-align: center;
    position: absolute;
    left: 100px;
    top: 75px;
    width: 100px;
}



/* From Uiverse.io by cssbuttons-io */
.simplebutton, .abutton {
  flex: 0 0;
  margin-top: 1em;
  font-size: 17px;
  padding: 0.5em 1.3em;
  font-weight: 500;
  background: #1c3cdf;
  color: white;
  border: none;
  position: relative;
  border-radius: 0.6em;
  cursor: pointer;
}

.gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0.6em;
/*
  margin-top: -0.25em;
  background-image: linear-gradient(
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.3)
  );
*/
}

.label {
  position: relative;
  top: -1px;
}

.transition {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 500ms;
  background-color: rgba(128, 179, 255, 0.6);
  width: 100%;
  height: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 0.6em;
}

.abutton:hover .transition {
  height: 100%;
}

.abutton:active {
  transform: scale(0.97);
}

.AlertButton {
	box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
	background-color:#fe1a00;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35;
    text-align: center;
}
.AlertButton:hover {
	background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
	background-color:#ce0100;
}
.AlertButton:active {
	position:relative;
	top:1px;
}

dialog{
    border-radius: 20px;
    border: 1px solid black;
    background: white;
    color: black;
    box-shadow: 8px 8px 5px -2px rgba(0, 0, 0, 0.25);
    max-width: 800px;
}

.cancelx {
    position: absolute; top: 20px; right: 20px;
    cursor: pointer;
}

#shiftdetails h1 {
    text-align: center;
    margin: 0 auto 4px;
}

.stylemax div {
    margin-top: 2rem;
}

.stylemax input[type=radio] {
  display: none;
}
.stylemax input[type=radio]:not(:disabled) ~ label {
  cursor: pointer;
}
.stylemax input[type=radio]:disabled ~ label {
  color: #bcc2bf;
  border-color: #bcc2bf;
  box-shadow: none;
  cursor: not-allowed;
}

.stylemax label {
  height: 70%;
  display: block;
  background: white;
  border: 2px solid #2c39c6;
  border-radius: 20px;
  padding: 0.7rem;
  text-align: center;
  box-shadow: 0px 3px 10px -2px rgba(44, 57, 198, 0.5);
  position: relative;
  top: 25px;
}

.stylemax input[type=radio]:checked + label {
  background: #2c39c6;
  color: white;
  box-shadow: 0px 0px 20px rgba(44, 57, 198, 0.75);
}
.stylemax input[type=radio]:checked + label::after {
  color: #3d3f43;
  font-family: FontAwesome;
  border: 2px solid #addfff;
  content: "";
  font-size: 24px;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background: white;
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.25);
}

.cb_vendor input{
    position: relative;
}

.cb_vendor input[type=checkbox]:checked + label::after {
  color: #3d3f43;
  font-family: FontAwesome;
  border: 2px solid #addfff;
  content: "";
  font-size: 24px;
  position: absolute;
  top:  -25%;
  left: 10px;
  transform: translateX(-50%);
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background: white;
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.25);
}