/* vue-select */
.v-select{position:relative;font-family:inherit}.v-select,.v-select *{box-sizing:border-box}@-webkit-keyframes vSelectSpinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes vSelectSpinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.vs__fade-enter-active,.vs__fade-leave-active{pointer-events:none;transition:opacity .15s cubic-bezier(1,.5,.8,1)}.vs__fade-enter,.vs__fade-leave-to{opacity:0}.vs--disabled .vs__clear,.vs--disabled .vs__dropdown-toggle,.vs--disabled .vs__open-indicator,.vs--disabled .vs__search,.vs--disabled .vs__selected{cursor:not-allowed;background-color:#f8f8f8}.v-select[dir=rtl] .vs__actions{padding:0 3px 0 6px}.v-select[dir=rtl] .vs__clear{margin-left:6px;margin-right:0}.v-select[dir=rtl] .vs__deselect{margin-left:0;margin-right:2px}.v-select[dir=rtl] .vs__dropdown-menu{text-align:right}.vs__dropdown-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;padding:0 0 4px;background:none;border:1px solid rgba(60,60,60,.26);border-radius:4px;white-space:normal}.vs__selected-options{display:flex;flex-basis:100%;flex-grow:1;flex-wrap:wrap;padding:0 2px;position:relative}.vs__actions{display:flex;align-items:center;padding:4px 6px 0 3px}.vs--searchable .vs__dropdown-toggle{cursor:text}.vs--unsearchable .vs__dropdown-toggle{cursor:pointer}.vs--open .vs__dropdown-toggle{border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}.vs__open-indicator{fill:rgba(60,60,60,.5);transform:scale(1);transition:transform .15s cubic-bezier(1,-.115,.975,.855);transition-timing-function:cubic-bezier(1,-.115,.975,.855)}.vs--open .vs__open-indicator{transform:rotate(180deg) scale(1)}.vs--loading .vs__open-indicator{opacity:0}.vs__clear{fill:rgba(60,60,60,.5);padding:0;border:0;background-color:transparent;cursor:pointer;margin-right:8px}.vs__dropdown-menu{display:block;box-sizing:border-box;position:absolute;top:calc(100% - 1px);left:0;z-index:1000;padding:5px 0;margin:0;width:100%;max-height:350px;min-width:160px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0,0,0,.15);border:1px solid rgba(60,60,60,.26);border-top-style:none;border-radius:0 0 4px 4px;text-align:left;list-style:none;background:#fff}.vs__no-options{text-align:center}.vs__dropdown-option{line-height:1.42857143;display:block;padding:3px 20px;clear:both;color:#333;white-space:nowrap}.vs__dropdown-option:hover{cursor:pointer}.vs__dropdown-option--highlight{background:#5897fb;color:#fff}.vs__dropdown-option--disabled{background:inherit;color:rgba(60,60,60,.5)}.vs__dropdown-option--disabled:hover{cursor:inherit}.vs__selected{display:flex;align-items:center;background-color:#f0f0f0;border:1px solid rgba(60,60,60,.26);border-radius:4px;color:#333;line-height:1.4;margin:4px 2px 0;padding:0 .25em;z-index:0}.vs__deselect{display:inline-flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-left:4px;padding:0;border:0;cursor:pointer;background:none;fill:rgba(60,60,60,.5);text-shadow:0 1px 0 #fff}.vs--single .vs__selected{background-color:transparent;border-color:transparent}.vs--single.vs--open .vs__selected{position:absolute;opacity:.4}.vs--single.vs--searching .vs__selected{display:none}.vs__search::-webkit-search-cancel-button{display:none}.vs__search::-ms-clear,.vs__search::-webkit-search-decoration,.vs__search::-webkit-search-results-button,.vs__search::-webkit-search-results-decoration{display:none}.vs__search,.vs__search:focus{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.4;font-size:1em;border:1px solid transparent;border-left:none;outline:none;margin:4px 0 0;padding:0 7px;background:none;box-shadow:none;width:0;max-width:100%;flex-grow:1;z-index:1}.vs__search::-webkit-input-placeholder{color:inherit}.vs__search::-moz-placeholder{color:inherit}.vs__search:-ms-input-placeholder{color:inherit}.vs__search::-ms-input-placeholder{color:inherit}.vs__search::placeholder{color:inherit}.vs--unsearchable .vs__search{opacity:1}.vs--unsearchable:not(.vs--disabled) .vs__search:hover{cursor:pointer}.vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search{opacity:.2}.vs__spinner{align-self:center;opacity:0;font-size:5px;text-indent:-9999em;overflow:hidden;border:.9em solid hsla(0,0%,39.2%,.1);border-left-color:rgba(60,60,60,.45);transform:translateZ(0);-webkit-animation:vSelectSpinner 1.1s linear infinite;animation:vSelectSpinner 1.1s linear infinite;transition:opacity .1s}.vs__spinner,.vs__spinner:after{border-radius:50%;width:5em;height:5em}.vs--loading .vs__spinner{opacity:1}


/* BEGIN - old css from v1 directory */
body {
  margin: 0;
  min-height: 600px;
  font-size: 14px;
}

legend {
  color: #356BA1;
  font-weight: bold;
}

.fieldheader, .fieldheader > td {
    border-bottom: solid #356BA1 2px;
    color: #356BA1;
    font-weight: bold;
}


#header {
    background: #356BA1;
    height: 40px;
}

#sessionexpirymessage {
    font-weight: bold;
    color: red;
}

.menulink
{
    color: white;
    font-size: 10pt;
}

#maincontent
{   
    background-color: #ffffff;
    padding: 5px; 
    min-height: 600px;
}

table
{
    border-collapse: collapse;
}


.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th
{
    border: 1px #bbbbbb solid;
}



#menudiv
{
    /*position: fixed;*/
    position: relative;
    right: 100px;
    height: 40px;
}

#logoutdiv
{
    position: fixed;
    right: 10px;
    height: 40px;
}


a, a.hover
{
    text-decoration: none;
}

.mandatorymarker
{
    color: red;
}

#loginbox
{
    background: #ffffff;
    box-shadow: 0 0 4px #000000;
    border-radius: 7px;
    text-align: center;
    position: relative;
    width: 380px;
    padding: 10px 10px 10px 10px;
    
}

/* END - old css from v1 directory */


html, body {
  font-family: helvetica;
  font-size: 10pt;
  color: black;
}


img.imagelink
{
  cursor: pointer;
}


table
{
    border-collapse: collapse;
}

.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th
{
    border: 1px #bbbbbb solid;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 3px;
    padding-right: 3px;
    vertical-align: middle;
}

.tablestyle1 > tbody > tr > td
{
    padding: 2px;
}

.mandatoryfieldmarker
{
    color: red;
}

.filter
{
    background-color: #e3eff1 !important
}

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.tab_wrap{
    border:1px solid #999;    
}
tabs {
    margin: auto;
    overflow: hidden;   
    background: #FFFFFF;
}
.tabs ul {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0;      
}
.tabs li a {    
    color: #444444;
    display: block;
    float: left;
    font-weight:bold;   
    padding: 10px;
    text-align: center;
    text-decoration: none;
    border:none;
    border-left:1px solid #d9d9d9;
    border-bottom:1px solid #d9d9d9;    
}
.tabs li a:hover {
    color: #7d7d7d; 
    background:#FFFFFF;
}
.tabs li:first-child a {
    border-left:none;
}
.tabs li a.active {
    border:none;
    background-color: white;
    border-left:1px solid #d9d9d9;
    border-bottom:1px solid #FFFFFF;    
}
.tabs li:first-child a.active {
    border:none;
    border-bottom:1px solid #FFFFFF;    
}
.tabs li:last-child a.active {
    border:none;
    border-left:1px solid #d9d9d9;  
    border-bottom:1px solid #FFFFFF;    
}
.tab_content {
    
    padding: 5px 5px 5px 5px;
    display:none;   
}
.tab_content.active{
    display:block;  
}

a, a.visited {
    cursor: pointer;
    color: #3097D1;
}

.expander
{
    font-size: large;    
}

.expander:hover
{
    cursor: pointer;
}

.error
{
    color: red;
}

table.roster
{
    width: 100%;        
    border-spacing: 1px;
    border-collapse: separate;
}

td.rosterrowheader
{
    height: 45px;
    background-color: #ddeeee; 
    border: 1px solid white; 
}

td.rosterrowempty 
{
    height: 45px;
    background-color: #f1efef; 
    border: 1px solid white;


}

td.rosterrowfull 
{
    height: 45px;
    background-color: #ffffff; 
    border: 2px solid gray;
}

span.rosterrowstarttime
{
    background-color: #cdf2d5; 
    float: left;
}

span.rosterrowendtime
{
    background-color: #fc4d44; 
    float: right;
}

div.rosterrowthickline
{
    display: inline-block; 
    background-color: #8de0fc; 
    width: 100%; 
    text-align: center;
}

span.rosterrowname
{
    color: black;
}

table.rosterdailytab
{
    width: 100%;
}

.rosterdailytab > tbody > tr > td
{
    border: 1px solid gray;
    padding: 10px 10px 10px 10px;
    background-color: inherit;
}

.rosterdailytab td:hover
{
    cursor: pointer;
}

.clickableimage:hover
{
    cursor: pointer;        
}

.rosterdailytab td.active
{
    background-color: #ffffff;
    font-weight: bold;
    border-bottom: 0px;
}


.tblrosterweekly
{
    width: 100%;        
    border-spacing: 1px;
    border-collapse: separate;        
}

table.tblrosterweekly > td.rosterrowheader
{
    height: 45px;
    background-color: #ddeeee; 
    border: 1px solid white; 
}

table.tblrosterweekly tr.rosterrowtrailer
{
    background-color: #e0eff9; 
    text-align: center;
}


td.rosterweeklycell 
{
    height: 45px;
    background-color: #f1efef; 
    border: 1px solid white;
}


span.rosteremployeename
{
    font-weight: bold;
}

span.rosterweeklydatespan
{
    font-weight: bold;
}

span.rosterweeklyshifttime
{
    background-color: #fcf9f9;
}

.rosterviewbuttonselected
{
    background-color: #61cb77;
}

.rosterviewbuttonnotselected
{
    background-color: white;
}

table.rosterweeklyadjustdate
{
    width: 100%;
    background-color: #e0eff9;
}

table.rosterweeklyadjustdate td
{
    height: 40px;
    text-align: center;
}

.rosterweeklydateshifter
{
}

.rosterweeklydateshifter:hover
{
    cursor: pointer;
}



.loader {
position: relative;
border: 10px solid white;
border-radius: 50%;
border-top: 10px solid #e85d5d;
width: 40px;
height: 40px;
left:50%;
top:50%;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
#spinneroverlay{
position: absolute;
top:0px;
left:0px;
width: 100%;
height: 100%;
/*background-color: black;*/
opacity: 1.0;
display: none;
}

/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

    
.booking-fixed-header
{    
    background-color: lightblue;
    z-index: 3;
/*    display: flex; */
    position: relative;
}


/* Start Booking CSS */
.booking-staffcontainer
{
    display: flex;
    flex-direction: row;
}

.booking-timeruler
{
    height: 81px;
    border-top: solid 1px #cecece;
}

.booking-staffnamecontainer
{
    display: flex;
    flex-direction: row;
    margin-top: 30px;
}

.booking-columncontainer
{
    background-color: #eeeeee;
    /*box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.2);    */
}

.booking-staffcolumn
{
    margin-left: 5px;
    background-color: white;
    width: 130px;
}


.booking-stafftimepanel
{
    height: 20px;    
    cursor: copy;   
}

.booking-stafftimepanel:hover
{
    background-color: #bcbcbc;
}

.booking-notavailabletime
{
    background-color: #e8e8e8;
}

.booking-availabletime
{
    background-color: #d4fcd6;
}

.booking-hourdivider
{
    border-top: solid 1px #c9c9c9;;
}


.booking-body 
{
    display: flex;
    overflow: hidden;
    height: calc(100vh - 120px);
    position: relative;
    width: 100%;
    justify-content: space-between;    
}


.booking-bodysub1 
{
  /* display: grid; */
  overflow: auto;
  height: calc(100vh - 180px);
  width: 100%;
  flex: 1 1 auto;
  border: 2px solid gray;
}


.booking-content
{
    border-left-width: 8px;
    border-left-style: solid;
    border-radius: 2px;
    border-color: rgb(153, 160, 255);
    font-size: smaller;
    box-shadow: 0 3px 6px rgba(0,0,0,.16);
    cursor: grab;
    z-index: 2;
}

.booking-dateselectorcomp
{
    cursor: default;    
    padding: 5px;    
    min-width: 30px;
    display: inline-block;
    text-align: center;
}

.booking-dateselectorcomp:hover
{
    background-color: lightgray;
}

.booking-staffnametitle
{
    width: 135px;
    text-align: center;
}
    
.booking-staffnametimeheader
{
    width: 102px;
}




.booking-paneldiv
{
    height: 100%; 
    background-color: white;   
    max-width: 350px;
    border: solid 1px lightgrey;
    flex: 0 0 content;
    overflow: scroll;
}


.booking-grid 
{
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 2;
}
.booking-gridcolumn {
  width: 180px;
  min-width: 180px;
  /*position: relative;*/
}

.booking-timecolumn
{
    width: 140px;
    min-width: 140px;
}

.booking-gridheader 
{
  height: 50px;
  position: sticky;
  background-color: #fce4cf;
  top: 0;
  z-index: 1;
}

.booking-gridcolumnfixedleft 
{
  position: sticky;
  left: 0;
  z-index: 500;
  background-color: #e1edf4;
}

.grid-item {
  height: 50px;
  border: 1px solid #c9c9c9;
}

.booking-editpanel-table > tbody > tr > td
{
   padding: 5px;
}

.booking-searchpaneltableresults
{
   margin: 0 5px;    
}

.booking-searchpaneltableresults > tbody > tr > td
{
   background-color: #e8edff;
   border: 1px solid lightgray;
   padding: 0 5px;
}

.booking-searchpaneltableresults > tbody > tr > td:hover
{
   background-color: #d1dbff;
   cursor: grabbing;
}


.booking-appointmentmarker
{
    position: absolute;
    border-radius: 4px;
    border-left: 5px solid rgb(153, 160, 255);
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: white;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
}



.booking-timecontainercolumn
{
    position: relative;
    /*z-index: -1;*/
}

.booking-timelabel
{
    padding-left: 5px;
}

.booking-closeicon
{
    right: 20px;
    font-size: 2rem;
    padding: 5px;
    float: right;
}

.booking-closeicon:hover
{
    background-color: lightgray;
}

.divbookingwarnings
{
    color: red;    
}


.booking-removecustomericon
{
    padding: 5px;
}

.booking-removecustomericon:hover
{
    background-color: lightgray;    
}

.booking-monthlygridcontainer
{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 100%;        
    /* grid-template-rows will be set in js */
}

.booking-monthlygridcontainer > div
{
    border: 1px grey solid;                
    position: relative;
}

.booking-monthlygrid-dayheader
{
    text-align: center;
    color: green;
    background-color: #e0e0e0;
}

.booking-monthlydatebar
{
    text-align: center;
    height: 22px;
}

.booking-monthlydatebar-focusmonth
{
    background-color: #cceaf7;            
}

.booking-monthlydatebar-othermonth
{
    background-color: #f7f7e9;
}

.booking-monthly-dayapptcontainer
{
    overflow-y: auto;
    position: absolute;
    top: 22px;
    bottom: 0;
    width: 100%;
}

.booking-appointmentmarker-monthly
{
    border-radius: 4px;
    border-left: 5px solid rgb(153, 160, 255);
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    background-color: white;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    height: 25px;
}


/* End booking css */

.fieldvalidationerror
{
    background-color: #f2dede;
}

.fieldreadonly
{
    background-color: #ededed;
}

.buttonactive
{
    color: green;
}

.successmessagediv
{
    background-color: lightgreen;
    padding: 10px;
}

.successmessagediv-fadeout
{
    opacity: 0%;
    transition: 1s;
}

/* reset from _normalize */

fieldset 
{
    min-width: unset;
    padding: 10px;
    margin: 5px;
    border: 2px lightgray solid;
}

legend
{
    padding: 5px;
    margin-bottom: unset;
    font-size: 1.2em;
    line-height: unset;  
    width: initial;
    border-bottom: initial;
}

/* end _normalize fixes */

input:invalid 
{
  border: red solid 3px;
}