@CHARSET "ISO-8859-1";

/* Roboto font, from Google */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);

/* Material Design icons, from Google */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined);

@import url("theme.css");

/* For debugging */
/*
div {
	border: solid 1px gray;
}
*/

html, body, html * {
   background: var(--background-color);
   font-family: var(--main-font);
   color: var(--text-color-dark);
}

html, body {
   margin: 0;
}

body {
	height: 100%;
}

body.hide-until-loaded {
   display:none;
}

.main {
	width: 100%;
}

.main.splash {
	height: 100%;
   background-image: url("/images/FlexScreen-7-scaled-1080px.jpg");
   /*background-repeat: no-repeat;*/
   background-size: cover;
}

.main > .center-pane {
   width: 100%; 
   margin-right:25px;
	margin-right:50px;
}

.clickable {
   cursor: pointer;
}

.clickable.disabled {
   cursor: auto;
}

a {
   color: #405ef8;
   text-decoration: none;
   cursor: pointer;
 }

a:hover {
   text-decoration: underline
}

/* ********************************* Header ********************************* */

.header {
   padding: 10px;
   user-select: none;
}

.header > .left-pane div {
   margin-right: 15px;
}

.header > .center-pane {
   width: 100%;
}

.header > .right-pane {
   position: relative;
}

.header #website-icon {
   height:50px;
}

.header .website-title {
   white-space: nowrap;
   font-size: 1.4em;
}

.header .site-selection-pane {
	margin-right: 10px;
}

.header .site-selection-pane .material-icons {
	margin-right: 5px;
   color: var(--accent-color-7);
}

.header .user-icon {
   width: 35px;
   height: 35px;
   font-size: 1.1em;
   background: var(--accent-color-1);
   color: var(--text-color-light);
   border-radius: 25px;
}

.header.no-menu .menu-icon,
.header.no-login .user-icon,
.header.no-login .site-selection-pane {
	visibility: hidden;
}

/* ********************************* Account ******************************** */

.account-pane {
   display: none;   /* Hidden by default */
   position: absolute; /* Stay in place */
   z-index: 1;      /* Sit on top */
   top: 45;	
   width: 250px;
   padding-top: 15px;
   padding-bottom: 15px;
   border-radius: 10px;
   box-shadow: 0 3px 5px rgb(0 0 0 / 0.3);
   border: solid 1px var(--gray-2);
}

.account-pane .top-pane, .account-pane .bottom-pane {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.account-pane .top-pane div {
   margin-bottom: 10px;
}

.pane-separator {
   border-top: solid 1px var(--gray-2);
   width:100%;
   margin-top: 15px;
   margin-bottom: 15px;
}

.account-pane .user-icon {
   width: 90px;
   height: 90px;
   font-size: 3em;
   background: var(--accent-color-1);
   color: var(--text-color-light);
   border-radius: 50px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   user-select: none;
}

.account-pane .user-full-name {
   font-weight: bold;
}

.account-pane .logout-button {
   padding: 10px;
   border: solid 1px var(--gray-2);
   border-radius: 5px;
   user-select: none;
}

.account-pane .logout-button:hover {
   background: var(--gray-1);
}

/* ********************************** Menu ********************************** */

.menu {
	min-width: 230px;
}

/* Menu item */
.menu .menu-item {
   font-size: .95em;
   height: 40px;
   width: 200px;
   padding-left: 10px;
   border-top-right-radius: 25px;
   border-bottom-right-radius: 25px;
   white-space: nowrap;
}

/* Menu item selected */
.menu .menu-item.selected, 
.menu .menu-item.selected .material-icons,
.menu .menu-item.selected .menu-label {
   background: var(--accent-color-2);
   color: var(--accent-color-3);
}

/* Menu item hover */
.menu .menu-item:hover, 
.menu .menu-item:hover, 
.menu .menu-item:hover .material-icons,
.menu .menu-item:hover .menu-label {
   background: var(--gray-1);
}

.menu .menu-item .menu-icon {
   margin-right: 20px;
}

.menu .menu-gutter {
	width: 25px;
}

.menu .indent-1 {
	padding-left: 30px;
}

.menu .indent-2 {
   padding-left: 60px;
}

.menu .submenu-item + .submenu {
	display: none;
}

.menu .submenu-item.expanded + .submenu {
   display: flex;
}

.menu .submenu-item.expanded .menu-unexpanded-icon,
.menu .submenu-item .menu-expanded-icon {
	display: none;
}

.menu .submenu-item.expanded .menu-expanded-icon,
.menu .submenu-item .menu-unexpanded-icon {
   display: flex;
}

.menu .menu-item.secret {
   opacity: 0;
}

.menu .menu-item.secret:hover,
.menu .menu-item.secret.selected  {
   opacity: 100;
}

/* ********************************* Table ********************************** */

/*
.tabulator {
   width: 90%;
}
*/

.tabulator .editable {
	background: #cddef8;
	margin: 10px;
}

.tabulator .ad-hoc-icon,
.tabulator .ad-hoc-icon .material-icons-outlined {
	color: orange;
}

/* ********************************* Button ********************************* */
 
.action-button {
   background: var(--accent-color-1);
   font-size: .95em;
   color: var(--text-color-light);
   border: none;
   height: 35px;
   min-width: 73px;
   border-radius: 5px;
   white-space: nowrap;
   padding-left: 15px;
   padding-right: 15px;
}

.action-button.disabled, .action-button.disabled:hover {
   background: #e7e8e8;
   color: #a8a9aa
}

.action-button:hover {
   background: #2b64c5;
}

.add-button {
   background: white;
   font-size: .95em;
   border: none;
   height: 43px;
   width: 173px;
   border-radius: 25px;
   box-shadow: 0 3px 5px rgb(0 0 0 / 0.3);
   position: fixed;
   bottom:0%;
   right:0%;
   margin-bottom: 50px;
   margin-right: 50px;
   padding-right: 30px;
}

.add-button:hover {
   background: #f6fafe;
   box-shadow: 0 3px 15px rgb(0 0 0 / 0.3);
}

.add-button div {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   background-color:rgba(0, 0, 0, 0);
   width: 100%;
   white-space: nowrap;
}

.add-button .material-icons {
   color: #3071e2;
   font-size: 2.5em;
   background-color:rgba(0, 0, 0, 0);
 }
 
 .add-button.hidden {
   display: none
 }
 
.panel-button {
	min-width: 75px;
   padding: 10px;
   border: solid 1px var(--gray-2);
   border-radius: 5px;
   user-select: none;
}

.panel-button:hover {
   background: var(--gray-1);
}
 
 /* ***************************** Input (text) ****************************** */
 
.input-heading {
   font-weight: bold;
   margin-bottom: 50px;
}
 
.input-group { 
   position: relative; 
   margin-bottom: 45px; 
}

input[type="text"], 
input[type="password"],
input[type="number"] {
   font-size:16px;
   padding:10px 10px 10px 5px;
   display:block;
   width:300px;
   border:none;
   border-bottom:1px solid #757575;
}

input[type="text"]:focus, 
input[type="password"]:focus,
input[type="number"],
textarea:focus {
   outline:none;
}

input[type="text"] ~ label,
input[type="password"] ~ label,
input[type="number"] ~ label,
textarea ~ label {
   color:#999; 
   font-size:16px;
   font-weight:normal;
   position:absolute;
   pointer-events:none;
   left:5px;
   top:10px;
   transition:0.2s ease all; 
   -moz-transition:0.2s ease all; 
   -webkit-transition:0.2s ease all;
}

input[type="text"]:focus ~ label, 
input[type="text"]:valid ~ label,
input[type="password"]:focus ~ label, 
input[type="password"]:valid ~ label,
input[type="number"]:focus ~ label, 
input[type="number"]:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
   top:-20px;
   font-size:14px;
   color:#5264AE;
}

.bar  {
   position:relative; 
   display:block; 
   width:300px; }

.bar:before, .bar:after {
   content:'';
   height:2px; 
   width:0;
   bottom:1px; 
   position:absolute;
   background:#5264AE; 
   transition:0.2s ease all; 
   -moz-transition:0.2s ease all; 
   -webkit-transition:0.2s ease all;
}

.bar:before {
   left:50%;
}

.bar:after {
   right:50%; 
}

input[type="text"]:focus ~ .bar:before, 
input[type="text"]:focus ~ .bar:after,
input[type="password"]:focus ~ .bar:before, 
input[type="password"]:focus ~ .bar:after,
input[type="number"]:focus ~ .bar:before, 
input[type="number"]:focus ~ .bar:after,
textarea:focus ~ .bar:before,
textarea:focus ~ .bar:after {
   width:50%;
}

input[type="checkbox"] ~ label {
   margin-left: 20px;
} 

 /* ***************************** Input (select) **************************** */
 
.select {
   position: relative;
   width: 350px;
}

.select-text {
   position: relative;
   font-family: inherit;
   background-color: transparent;
   width: 350px;
   padding: 10px 10px 10px 0;
   font-size: 18px;
   border-radius: 0;
   border: none;
   border-bottom: 1px solid rgba(0,0,0, 0.12);
}

.select-text:focus {
   outline: none;
   border-bottom: 1px solid rgba(0,0,0, 0);
}

.select .select-text {
   appearance: none;
   -webkit-appearance:none
}

.select:after {
   position: absolute;
   top: 18px;
   right: 10px;
   /* Styling the down arrow */
   width: 0;
   height: 0;
   padding: 0;
   content: '';
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid rgba(0, 0, 0, 0.12);
   pointer-events: none;
}

.select-label {
   color: rgba(0,0,0, 0.26);
   font-size: 18px;
   font-weight: normal;
   position: absolute;
   pointer-events: none;
   left: 0;
   top: 10px;
   transition: 0.2s ease all;
}

.select-text:focus ~ .select-label, 
.select-text:valid ~ .select-label {
   color: #5264AE;
   top: -20px;
   transition: 0.2s ease all;
   font-size: 14px;
}

.select-bar {
   position: relative;
   display: block;
   width: 350px;
}

.select-bar:before, 
.select-bar:after {
   content: '';
   height: 2px;
   width: 0;
   bottom: 1px;
   position: absolute;
   background: #5264AE;
   transition: 0.2s ease all;
}

.select-bar:before {
   left: 50%;
}

.select-bar:after {
   right: 50%;
}

.select-text:focus ~ .select-bar:before, 
.select-text:focus ~ .select-bar:after {
   width: 50%;
}

.select-highlight {
   position: absolute;
   height: 60%;
   width: 350px;
   top: 25%;
   left: 0;
   pointer-events: none;
   opacity: 0;
}
 
/* ********************************* Details ******************************** */
  
.pane {
   border: solid 1px var(--gray-2);
   padding: 20px;
   padding-bottom: 15px;
   border-radius: 7px;
   margin-right: 15px;
   margin-bottom: 15px;
}

.details-pane {
   width: 500px;
}

.pane-header {
   font-weight: bold;
   /*
   margin-bottom: 15px;
   margin-left: 15px;
   */
}

.details-item {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
   margin-bottom: 13px;
   /*
   margin-left: 15px;
   */
   margin-right: 30px;
}

.details-item .material-icons-outlined {
   margin-right: 15px;
}

.action-link {
   color: var(--accent-color-1);
   user-select: none;
}

.action-link:hover {
   color: var(--accent-color-5);
}

.pane-separator {
   border-top: solid 1px var(--gray-2);
   width:100%;
   margin-top: 15px;
   margin-bottom: 15px;
}

.history-date {
   font-size: .75em;
}
 
 /* ********************************** Item ********************************* */
 
.item-pane {
   width: 100%;
   padding-top: 15px;
   padding-bottom: 15px;
   margin-bottom: 25px;
   border-bottom: solid 1px var(--gray-2);
}

.item-pane > .left-pane {
   width: 75px;
}

.item-pane > .center-pane {
   margin-right: 15px;
 }

.item-pane > .right-pane {
   flex-grow: 1;
}

.item-pane .item-icon {
   width: 125px;
   height: 125px;
   background: var(--accent-color-1);
   color: var(--background-color);
   border-radius: 62px;
   margin-right: 25px;
}

.item-pane .item-icon.user-icon {
	font-size: 4.5em;
}

.item-pane .item-icon .material-icons-outlined {
	font-size: 4.5em;
	background: var(--accent-color-1);
	color: var(--background-color);
}

.item-pane .cart-icon,  .item-pane .cart-icon .material-icons-outlined {
   background: var(--accent-color-7);
}

.item-pane .customer-icon,  .item-pane .customer-icon .material-icons-outlined {
   background: var(--accent-color-6);
}

.item-pane .item-name {
   font-size: 2em;
}

/* ******************************* Pane table ******************************* */

.pane table, .pane table th {
	text-align: left;
}

.pane table td, .pane table th {
   padding-right: 20px;
}

#received-pane input {
	width: 50px;
}

#received-pane .material-icons-outlined.complete {
	color: green;
}

#received-pane .material-icons-outlined.error {
   color: red;
}

/* ****************************** Scanner page ****************************** */

#scanner {
	width: 400px;
	height: 250px;
   margin-bottom: 50px;
}

.drawingBuffer {
	visibility: hidden;
}
 
/* ******************************* Carts page ******************************* */

.item-identifier {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
 }
 
 .item-identifier.cart-identifier .material-icons {
   color: var(--accent-color-7);
 }
 
 .item-identifier.customer-identifier .material-icons {
   color: var(--accent-color-6);
 }
 
 .item-identifier.user-identifier .material-icons {
   color: var(--accent-color-1);
 }
 
.item-identifier .material-icons {
   margin-right: 20px;
 }
 
 .checked-in {
    color: green;
 }
 
 .checked-out {
    color: red;
 }
 
 .out-of-circulation {
    color: black;
 }
 
 /* ******************************* Customer page ******************************* */
 
 .overdue {
     color: red;
 }
 
 /* ******************************* Login (revisit) ******************************* */
 
 .login-div {
   min-width: 300px;
   min-height: 300px;
   background: rgba(255, 255, 255, 0.85);
   color: black;
   padding: 20px;
}

.login-div form,
.login-div div,
.login-div label {
	background: rgba(255, 255, 255, 0.0);
}

.login-div form {
	margin: 0px;
}

.login-div label {
   color: black;
   font-size: 18px;
   margin-bottom: 5px;  
}

.login-div .title {
   color: black;
   font-size: 24px;  
   font-style: strong;
   margin-bottom: 15px;
}

.login-div input {
   border: 2px solid #14a3db;
   border-radius: 4px;
   height: 30px;
   width: 250px;
   padding: 5px;
   margin-bottom: 20px;    
}

.login-div .login-error-message {
   width:300px; 
   color: red;	
   text-align: center;
}

/* ********************* */

.category-input .item-input-container {
	margin-left: 15px;
}

.category-input.collapsed .item-input-container,
.category-input.empty {
	display: none;
}

.category-input.collapsed .menu-expanded-icon,
.category-input.expanded .menu-unexpanded-icon {
   display: none;
}

.category-input.expanded .menu-expanded-icon,
.category-input.collapsed .menu-unexpanded-icon {
   display: flex;
}

 /* ********************************* Mobile ******************************** */

/* 
Device = Most of the Smartphones Mobiles (Portrait)
Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 479px) {
  
   .hide-on-mobile {
      display: none;
   }
   
   .hide-on-tablet {
      display: none;
   }
   
   .menu {
      display: none;
      position: absolute; /* Stay in place */
      z-index: 1;         /* Sit on top */
      box-shadow: 0 3px 5px rgb(0 0 0 / 0.3);
      border: solid 1px var(--gray-2);
   }
}
 
/* ********************************* Timeline ******************************** */ 
/* https://codeconvey.com/simple-horizontal-timeline-css/ */
 
.timeline {
   width:800px;
   height: 20px;
   list-style: none;
   text-align: justify;
   margin: 80px auto;
   background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(45%, rgba(255,255,255,0)), color-stop(51%, rgba(191,128,11,1)), color-stop(57%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0)));
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 45%, rgba(191,128,11,1) 51%, rgba(255,255,255,0) 57%, rgba(255,255,255,0) 100%);
}

.timeline:after {
   display: inline-block; 
   content: ""; 
   width: 100%;
}

.timeline li {
   display: inline-block;
   width: 20px;
   height: 20px;
   background: #F2BB13;
   text-align: center;
   line-height: 1.2;
   position: relative;
   border-radius: 50%;
}

.timeline li[data-achieved="false"] {
	background: #c0c0c0;
}

.timeline li:before {
   display: inline-block;
   content: attr(data-status);
   font-size: 26px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

.timeline li:nth-child(odd):before {
   top: -40px;
}

.timeline li:nth-child(even):before {
   bottom: -40px;
}

.timeline li:after {
   display: inline-block;
   content: attr(data-timestamp);
   font-size: 16px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

.timeline li:nth-child(odd):after {
   bottom: 0;
   margin-bottom: -10px;
   transform: translate(-50%, 100%);
}

.timeline li:nth-child(even):after {
   top: 0;
   margin-top: -10px;
   transform: translate(-50%, -100%);
}

.timeline li[data-achieved="false"], .timeline li[data-achieved="false"]:after {
   background: var(--gray-2);
   color: var(--gray-2);
}

/* ********************************* Pin Pad ******************************** */

#pin-pad-container {
	align-items: center;
   justify-content: center;
}

#pin-pad {
   font-size: 18pt;
}

#pin-pad .material-icons {
	font-size: 18pt;
	background-color: var(--accent-color-2);
}

/* Key */
#pin-pad > div > div {
   width: 65px;
   height: 65px;
   align-items: center;
   justify-content: center;
   display: flex;
   border-radius: 50%;
   background-color: var(--accent-color-2);
   margin: 3px;
   user-select: none;
}

/* Function Key */
#pin-pad > div > div.function-key,
#pin-pad > div > div.function-key .material-icons  {
   background-color: var(--gray-2);
}

#pin-pad > div > div.function-key .material-icons  {
   pointer-events: none;
}

#pin-pad-display {
	justify-content: space-evenly;
}

/* Dots */
#pin-pad-display > div {
	width: 15px;
	height: 15px;
	margin: 10px;
	border: solid 4px var(--gray-2);
	border-radius: 50%;
	background-color: white;
}

#pin-pad-display > div.filled {
   background-color: var(--gray-2);
}


 /* ********************************* Mobile ******************************** */
 
 #flexing-modal {
    font-weight: bold;
    font-size: 18pt;
 }