@media only screen and (max-width: 981px) {
    .show_button_text {
        display: none;
    }
}
@media only screen and (min-width: 981px) {
    .show_button_text {
        display:inline-block;
    }
}

@media only screen and (max-width: 981px) {
    .hide_div_small_screen {
        display:none;
    }
    .show_div_small_screen {
        display:initial;
    }
}
@media only screen and (min-width: 981px) {
    .hide_div_small_screen {
        display:initial;
    }
    .show_div_small_screen {
        display:none;
    }
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

.button_nav_date {
    height:2em; 
    line-height:1em;
    letter-spacing: 0.02em;
    padding:0;
    margin-bottom:2px;
    width:15%;
}

.popup {
    z-index:99999;
    padding: 10px 10px 20px 10px;
    background-color: rgba(230, 235, 237, 1);
    width:300px;
    border-radius: 15px;
    border: 1px solid rgba(242, 134, 26, 1);
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    color: #333;
    visibility: hidden;
    /*transition: transform 0.4s, top 0.4s;*/
}
.popup_button {
    padding:0px 60px;
    background: #fff;
    border:0;
    outline:none;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    border-radius:30px;
    line-height: 2em;
    height: 2em;
}
.open-popup {
    visibility: visible;
    top:50%;
    transform: translate(-50%, -50%) scale(1);
}

.list_header {
    text-align:right;
    margin-bottom: 15px;
    margin-right: 20px;
}
.list_data {
    text-align:left;
    margin-bottom: 15px;
}
.list_header h4, .list_data div {
    margin-bottom:0;
}
@media screen and (max-width: 980px) {
  .list_header {
    margin-bottom: 0px;
    text-align: left; } 
  .list_data {
    margin-bottom: 15px;
    text-align: left; } 
}

.modal_lightbox {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0, 0.9);
    z-index:99999;
}

.modal_lightbox_content {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

div.lineup_card {
    margin:0 0 10px 0px; 
    border:1px dotted gray; 
    padding:10px; 
    border-radius:15px; 
}
section.section_min_width {
    min-width: 1000px;
}
div.wrapper_min_width {
    min-width: fit-content;
}
div.disabled_div {
    pointer-events: none;
    opacity: 0.5;
    background-color: #f2f2f2;
    color: #999;
    cursor: not-allowed;
    border-radius:15px;
    margin-left:0;
    padding-left:0;
}
div.table_lineup {
    max-height: 80vh;
    max-width: 90vw;
    overflow-x: auto;
    overflow-y: auto;
    /* margin-bottom: 10px; */
}
th.top_sticky {
    position: -webkit-sticky;
    position: sticky;
    /* background-color: lightblue; */
    /* width: 100px; */
    /* min-width: 100px; */
    /* max-width: 100px; */
    top: 60px;    
}
td.left_sticky {
    position: -webkit-sticky;
    position: sticky;
    background-color: #EDEDED;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    left: 0px;    
}
th.left_sticky {
    position: -webkit-sticky;
    position: sticky;
    background-color: white;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    left: 0px;    
}
td.left_sticky_200 {
    position: -webkit-sticky;
    position: sticky;
    background-color: #EDEDED;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    left: 0px;    
}
th.left_sticky_200 {
    position: -webkit-sticky;
    position: sticky;
    background-color: white;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    left: 0px;    
}
input.keypad {
    font-size: 20pt;
    line-height: 20pt;
    color: black !important;
    background-color: #eeeeee;
    border: 3px solid darkslategray;
    width: 80%;
    box-shadow: none;
    margin: 10px auto;
    padding: 0;
    text-align: center;
    display: block;
    border-radius: 12pt;
    -webkit-transition: none;
    transition:none;
}
input.keypad:hover, input.keypad:active {
    background-color: #eeeeee;
}

div.workflow_hover:hover {
    background-color: #eeeeee;
    color: #3d4449;
}

tr.total_row {
    background-color:#EDEDED; 
    color: rgba(242, 134, 26, 255);
    border-top: 3px solid rgba(242, 134, 26, 255);
    border-bottom: 4px double rgba(242, 134, 26, 255);
    /*border-top:2px solid rgba(9, 105, 163, 1);*/
    /*border-bottom:4px double rgba(9, 105, 163, 1);*/
    /*outline-offset: -2px; */
    /*height: 24px; */
}
th.string, th.number, th.no_pointer {
    position: sticky;
    top: 0;
    /*background-color: inherit;*/
    background-color: white;
    /* z-index: 10; */
    z-index: 7;
    box-shadow: inset 0 0px 0 #000000, inset 0 -1px 0 rgba(210, 215, 217, 0.75);
}
.collapsible-start-visible, .collapsible-start-hidden { 
    position: sticky;
    top: 0;
    z-index: 15;
}
.collapsible-table-overview { 
    top:50px;
}

input:disabled, select:disabled {
    background-color: #e6ebed;
    color: #77; /*#777;*/
    opacity: 1.0; /*0.8;*/
}
select.schedule_defaults {
    height:2em;
    line-height:2em;
}
i.nav_sub {
    border-bottom: dotted 1px;
    color: /* #f56a6a */ rgba(242, 134, 26, 1);
    text-decoration: none;
    font-style: normal;
    margin: 0;
}
i.nav_button {
    border: 3px solid;
    color: /* #f56a6a */ rgba(242, 134, 26, 1);
    text-decoration: none;
    font-style: normal;
    margin: 0;
    padding: 0 5px;
    border-radius: 5px;
    margin-left:20px;
    position:sticky;
    top:100px;
    background:white;
    z-index:20;
}
i.nav_button:hover {
    border: 3px solid black;
    color:white;
    background-color: /* rgba(245, 106, 106, 0.05) */ rgba(242, 134, 26, 1);
    cursor:pointer;
}
p.count-rows {
    margin-bottom:0.25em;
}
.collapsible-start-visible {
    background-color: #F5F5F5;
    margin-bottom: 15px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 11pt;
    color: black !important;
    height: 2.25em;
    line-height: 2.25em;
    box-shadow: inset 0 0 0 1px /* #f56a6a */ rgba(242, 134, 26, 1);
}
.collapsible-start-visible:hover {
    background-color: #555;
    color: white !important;
    outline: 3px solid rgba(242, 134, 26, 255);
    outline-offset: -2px;
}
.collapsible-start-visible:after {
    content: "[\2212]";
    color: black;
    float: right;
    margin-left: 5px;
    font-size: 9pt;
}
.collapsible-start-visible.active:hover {
    color: white !important;
}
.collapsible-start-visible.clicked:after {
    content: "[\002B]";
    font-size: 9pt;
}
.collapsible-start-visible:not(.clicked) {
    background-color: #555;
    color: white !important;
    outline: 3px solid rgba(242, 134, 26, 255);
    outline-offset: -2px;
}
.collapsible-content-visible {
    padding-left: 10px;
    display: block;
    /*overflow: hidden;*/
    border-left: 1px solid #e5e5e5;
    margin-bottom: 5px;
    margin-left: 10px;
}
.collapsible-content-hidden {
    padding-left: 10px;
    display: none;
    /*overflow: hidden;*/
    border-left: 1px solid #e5e5e5;
    margin-bottom: 5px;
    margin-left: 10px;
}
.collapsible-start-hidden {
    background-color: #F5F5F5;
    margin-bottom: 15px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 11pt;
    color: black !important;
    height: 2.25em;
    line-height: 2.25em;
    box-shadow: inset 0 0 0 1px /* #f56a6a */ rgba(242, 134, 26, 1);
}
.collapsible-start-hidden:hover {
    background-color: #555;
    color: white !important;
    outline: 3px solid rgba(242, 134, 26, 255);
    outline-offset: -2px;
}
.collapsible-start-hidden:after {
    content: "[\002B]";
    color: black;
    float: right;
    margin-left: 5px;
    font-size: 9pt;
}
.collapsible-start-hidden.clicked:after {
    content: "[\2212]";
    font-size: 9pt;
}
.collapsible-start-hidden.clicked {
    background-color: #555;
    color: white !important;
    outline: 3px solid rgba(242, 134, 26, 255);
    outline-offset: -2px;
}

.above, .mid, .below {
    /*text-align: center;*/
}
.below {
    background-color: #efb3ab;
}
.mid {
    background-color: #f3e260;
}
.above {
    background-color: #b7ddb0;
}
.search-input {
    background-image: url(/images/search_icon_18x18.png);
    background-position: 7px 7px;
    background-repeat: no-repeat;
    border: 1px solid #6e625b;
    border-radius: 5px;
    padding: 5px 30px;
}
#query_limit_span {
    float:right;
    margin: 0.25em 0 0 0;
    font-size: 0.9em;
}
i {
    cursor: pointer;
    margin-left:0.25em;
    margin-right:0.25em;
    /*padding: 0 20px;*/
}
.ul_nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.ul_nav li {
    float: left;
    margin: 0 0.75em 0 0;
}
.ul_nav li a {
    /*display: block;
    text-align:center;
    text-decoration: none;*/
}
.ul_nav li a.active {
    /*display: block;
    text-align:center;
    text-decoration: none;*/
    text-decoration: none;
    border-bottom:1px solid #3d4449;
    color:#3d4449;
}
tr.row_inactive {
    color: darkseagreen /*rgba(242, 134, 26, .5)*/;
}
span.form_span_desc {
    /*float: left; */
    margin: 0;
}
span.form_input_required {
    /*float: left; */
    margin: 0 0 0 0.3em;
    color: rgba(242, 134, 26, 1); 
}
span.form_link_to_add_item {
    float: right;
    margin: 0.1em 0 0 0.3em;
    color: rgba(242, 134, 26, 1); 
    font-size: 90%;
}
div.vl {
    border-left: 1px solid rgba(242, 134, 26, .5);
    margin-right: 1em;
}
div.sub_name {
    /*font-size: 65%; */
    font-size: 75%;
    margin-left: 10px;
}
.modal {
    display: none; 
    position: fixed; 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);  
    z-index: 999; 
    width: 60%; 
    background-color: rgba(230, 235, 237, 1);
    padding: 3em;
    border: 1px solid rgba(242, 134, 26, 1);
}
.modal-content-container {
  text-align:center;
}

/* The Modal Close Button (x) */
.modal-close {
  position: absolute;
  right: /*35px*/ 0px;
  top: /*15px*/ 0px;
  padding: 0.5em;
  font-size: 2em;
  color: #555;
  line-height: 1em;
}
.modal-close:hover,
.modal-close:focus {
  color: #f44336;
  cursor: pointer;
  color: rgba(242, 134, 26, 1);
}
/* Clear floats */
.modal-clearfix::after {
  content: "";
  clear: both;
  display: table;
}


.password-container{
    width: 100%;
    position: relative;
}
.password-container input[type="password"],
.password-container input[type="text"]{
    width: 100%;
}
.fa-eye{
    position: absolute;
    top: 35%;
    right: 1%;
    cursor: pointer;
    color: lightgray;
    scale: 100%;
}
/* Error */
.error {
    color: rgba(242, 134, 26, 1);
}
p.error {
    padding: 0.5em;
    margin: 0
}
div.error, span.no_error {
    padding: 0.5em;
    margin-top: -0.75em;
    margin-bottom: 0.5em;
    font-size: 85%; 
    min-width: 150px;
}
  
.announce-warning {
    margin-top: 0.5em;
    padding: 0.5em;
    background-color: rgb(255, 249, 242);
    color: rgba(242, 134, 26, 1);
    margin-left: 0;
    border: 1px solid rgb(192, 192, 192); 
    border-radius: 5px;
}   
.announce-success {
    margin-top: 0.5em;
    padding: 0.5em;
    background-color: rgb(236, 255, 216);
    color: green;
    margin-left: 0;
    border: 1px solid rgb(192, 192, 192); 
    border-radius: 5px;
}   

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.collapsible {
    background-color: #F5F5F5;
    color: white;
    cursor: pointer;
    padding: 8px 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 85%;
}
.collapsible:hover {
    background-color: #555;
    outline: 3px solid rgba(242, 134, 26, 1); 
    outline-offset: -2px;
    color: white !important;
}
.collapsible_content {
    padding-left: 30px;
    display: none;
    /*overflow: hidden;*/
}

#sticky_search {
    /*position: sticky;
    position: -webkit-sticky;
    background: white;
    top: 0; */
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 1px rgba(242, 134, 26, .2);
    */
    border-bottom: 1px solid rgba(242, 134, 26, 1);
    padding: 0.5em 0.5em 0.5em 0.5em;
    z-index: 1;
    font-size: 0.9em;
    margin-bottom: 0;
    /*font-family: "Open Sans", sans-serif;*/
    font-family: system-ui, sans-serif;
}
#sticky_search input, #sticky_search label, #sticky_search select, #sticky_search option {
    font-size: 0.9em;
    line-height: 2em; 
    height: 1em;
    /*font-family: "Open Sans", sans-serif;*/
    font-family: system-ui, sans-serif;
}
#sticky_search input[type="date"] {
    height: 2em;
}
#sticky_search select, #sticky_search option {
    height: 2em;
}
#sticky_search input.keyword_search {
    text-align: center;
    height: 2em;
}
#sticky_search .button {
    height: 2em;
/*    line-height: 2em; 
    box-shadow: 0 0 0 0.5px;
    text-transform: none;
    margin-bottom: 0.5em;
    font-family: "Open Sans", sans-serif; */
    /*font-family: "Open Sans", sans-serif;
    font-family: system-ui, sans-serif;*/

}
#sticky_search div.search_title {
    font-size: 0.9em;
    /*font-family: "Open Sans", sans-serif;*/
    font-family: system-ui, sans-serif;
    text-align: center;
    border-bottom: 1px dotted rgba(242, 134, 26, 0.5);
    width: 80%;
    margin: 0 auto 0.5em auto;
}    
  @media screen and (max-width: 736px) {
    #sticky_search, #sticky_search input, #sticky_search label, #sticky_search select, #sticky_search option, #sticky_search button, #sticky_search div.search_title {
      font-size: 0.8em; } 
  }

.sort-table th {
    cursor: pointer;
}
th.string {
    cursor:pointer;
}
th.number {
    cursor:pointer;
}
th.no_pointer {
    cursor:text;
}

#gotoTop_button {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    cursor: pointer;
}

.span-center {
    display:flex; 
    justify-content:space-evenly; 
    margin-top:0.2em;
}

.remove {
    cursor: pointer;
}

.tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

.tooltip .tooltiptext {
    visibility: hidden;
    /*width: 300px;*/
    width: 100px;
    background-color: #555;
    color: rgba(242, 134, 26, 1);
    text-align: center;
    border-radius: 6px;
    padding: 0.5em;
    position: absolute;
    z-index: 100;
    bottom: 125%;
    left: 50%;
    /*margin-left: -60px;*/
    margin-left: -30px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 80%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 19%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext_order_data {
    visibility: hidden;
    background-color: #555;
    color: rgba(242, 134, 26, 1);
    /*width: 300px;*/
    /*text-align: center;*/
    border-radius: 6px;
    padding: 0.5em;
    position: absolute;
    z-index: 100;
    bottom: 65%;
    left: 50%;
    margin-left: -50px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 80%;
}

.tooltip .tooltiptext_order_data::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 10%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext_order_data {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext_labor_data {
    visibility: hidden;
    background-color: #555;
    color: rgba(242, 134, 26, 1);
    /*width: 300px;*/
    /*text-align: center;*/
    border-radius: 6px;
    padding: 0.5em;
    position: absolute;
    z-index: 100;
    bottom: 65%;
    left: 50%;
    margin-left: -5px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 80%;
}

.tooltip .tooltiptext_labor_data::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 2%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext_labor_data {
    visibility: visible;
    opacity: 1;
}