body    {font-family: Calibri, Helvetica; margin: 0}
td      {font-family: Calibri, Helvetica; font-size: 10.0pt}

.TDStationAdd { background: lightpink ; border: lightpink}
.TDQuestionList {background: lightpink; border: lightpink}
.TDQuestionList_Sel {background: lightgreen;}
.TDQuestionListToDo {background: lightgrey;}
.TDQuestionListDone {background: lightyellow;}

.txtRubric {width: 100%; height: 200px}
.txtTitle {font-size: 20pt}
.txtFeedback {width: 100%; height: 60px}
.txtBox {width: 100%}
.mtf:nth-child(even) {background: lightgrey;}


.rotameat td      {font-family: Arial, Helvetica; font-size: 8.0pt}
.rotameat th      {font-family: Arial, Helvetica; font-size: 12.0pt}
.rmp {display:none}
.tn {vertical-align: top}
.tnmob {background: darkblue; color: white}

.shiftpickerSelected {border: red 3px solid !important; font-weight: bold}
.shiftpicker {font-size: 8pt; width: 30; text-align: center}

.shiftdoable { min-width: 30px;}
.cando {opacity:1.0; border: green 3px solid; font-weight: bold}
.cantdo {opacity: 0.3}

.needsbf {color: red}

.roller {opacity:0.5}
.roller:hover {opacity:1.0}

.markedasread {display:none}

#masterrotatable {border-collapse: collapse}
#yearheads td {border-right: 2px solid black; border-top: 2px solid black; border-left: 2px solid black; border-bottom: 1px solid lightgray; font-weight: bold}
#monthheads td {border-left: 1px solid lightgray; border-right: 1px solid lightgray; padding: 2px}
#monthheads .startofyear {border-left: 2px solid black}
#monthheads .endofyear {border-right: 2px solid black}

.selectormatcher:has(> .matching)     {background:lightgreen}
.matching {background: lightgreen}
.nomatch {background: lightpink}

.matchertable td {vertical-align: top; text-align: center; border: 1px solid lightgray}
.matchertable tr:nth-child(even) {background: #CCC}
.matchertable tr:nth-child(odd) {background: #FFF}

 .startofyear {border-left: 2px solid black}
 .endofyear {border-right: 2px solid black}

td.details-control {
    background: url('details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('details_close.png') no-repeat center center;
}

#btnResetPassword {background: lightgray; border: red}
#btnResetPassword:hover {background: lightblue}

.ui-tooltip
{
    /* tooltip container box */
    max-width: 700 !important;
}
.ui-tooltip-content
{
    /* tooltip content */
    max-width: 700 !important;
}

table.minitable td { border: solid 1px lightgray }
table.oncalltable thead td {border-bottom: solid 3px lightgray; font-weight: bold; text-transform: uppercase}
table.oncalltable td {border: solid 1px lightgray; text-align: center; padding: 5px}

.floatingheader {position: fixed;
                 top: 0;
                 display: none;
                 background-color: white;
                 border-bottom: solid 2px gray;
}
.floatingheader th {font-family: Arial, Helvetica; background: #f2f2f2; font-size: 12.0pt}


/*#rotatablehead {display:block; width: 100%; border-spacing: 0; background: #f2f2f2;}
tbody #rotatablebody {display:block; width: 100%; 	overflow-y: auto; 
        overflow-x: hidden; height: 600;}
.rotarow {height: auto}
.rotadividerrow {height: auto}*/




/*#rotatablebody td {height: 50}*/

.hascomment {
    position: relative
}
.hascomment::before,
.hascomment::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}

.hascomment::before {
    border-width: 0.8em;
    border-right-color: #ccc;
    border-top-color: #ccc;
}
.hascomment::after {
    border-radius: 3px;
    border-width: 0.7em;
    border-right-color: #0c0;
    border-top-color: #0c0;
}


.hasleave {
    position: relative;
}
.hasleave::before,
.hasleave::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;


}

.hasleave::before {
    border-width: 1.0em;
    border-right-color: #13a044;
    border-top-color: #13a044;
}
.hasleave::after {
    border-radius: 3px;
    border-width: 0.95em;
    border-right-color: #17823c;
    border-top-color: #17823c;
    
}

.hasStudyLeave {
    position: relative;
}
.hasStudyLeave::before,
.hasStudyLeave::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;


}

.hasStudyLeave::before {
    border-width: 1.0em;
    border-right-color: #fff354;
    border-top-color: #fff354;
}
.hasStudyLeave::after {
    border-radius: 3px;
    border-width: 0.95em;
    border-right-color: #ffec00;
    border-top-color: #ffec00;


    
}


.haspendingleave {
    position: relative;
}
.haspendingleave::before,
.haspendingleave::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;


}

.haspendingleave::before {
    border-width: 1.0em;
    border-right-color: #465298;
    border-top-color: #465298;
}
.haspendingleave::after {
    border-radius: 3px;
    border-width: 0.95em;
    border-right-color: #606dbc;
    border-top-color: #606dbc;    
}


.haspendingStudyLeave {
    position: relative;
}
.haspendingStudyLeave::before,
.haspendingStudyLeave::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;


}

.haspendingStudyLeave::before {
    border-width: 1.0em;
    border-right-color: #465298;
    border-top-color: #465298;
}
.haspendingStudyLeave::after {
    border-radius: 3px;
    border-width: 0.95em;
    border-right-color: #606dbc;
    border-top-color: #606dbc;    
}

.searchrow{}
.searchrow:hover {
    background: lightgreen
}

.SuccessText
{
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    vertical-align: middle;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
    line-height: 140%;
    border: green solid 3px;
    background-color: lightgreen;
    border-radius: 5px
}
.InformationText
{
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    vertical-align: middle;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
    line-height: 140%;
    border: orange solid 3px;
    background-color: lightyellow;
    border-radius: 5px
}

.ErrorText
{
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    vertical-align: middle;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
    line-height: 140%;
    border: red solid 3px;
    background-color: lightpink;
    border-radius: 5px
}


/*test
test*/


.ui-button-text {
    font-size: .6em;
}


.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}
.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
}

.ErrorText  {color: red; font-weight: bold;}


#BodyTable  {height: 100%; width: 100%; align: center;}
.IsPublicHoliday, .isph    {background: #ccccff}
.IsWeekend:not(.IsLeave):not(.IsOtherLeave):not(.IsTimeShift):not(.IsStudyLeave), .iswe:not(.IsLeave):not(.IsTimeShift):not(.IsStudyLeave)   {background: 	#D3D3D3}
.SlotContainer.EmptySlot  {border: lightgrey 1px solid}
.SlotBox, .sb  {border: lightgrey 1px solid}
.sb:hover {border: blue !important; box-shadow: 0 0 5px 2px rgba(0,0,255,.35);}
.IsTimeShift    {background: turquoise}
.dr { background: repeating-linear-gradient(
        135deg,
        white,
        white 10px,
        #f6f6f6 10px,
        #f6f6f6 20px
        ) !important;
    color: white}
/*.IsSASM {background: lightsalmon}*/

.Placeholder  {border: lightgrey 1px solid; vertical-align: top}
.ph  {border: lightgrey 1px solid; vertical-align: top}
.EmptyPlaceholder { vertical-align: middle }
/*.IsRegularSlot  {background: repeating-linear-gradient( 135deg, #ccc, #ccc 10px, #aaa 10px, #aaa 20px ); border: 1px solid lightgrey; opacity: 0.5}*/
.IsRegularSlot{}
.Week1 {border: 2px solid orange; background: lightgrey}
.Week2 {border: 2px solid yellow; background: lightgrey}
.Week3 {border: 2px solid green; background: lightgrey}
.Week4 {border: 2px solid blue; background: lightgrey}
.Week5 {border: 2px solid blueviolet; background: lightgrey}

.rdr    {border: 1px solid gray; background: lightgrey; height:2px} //rotadividerrow



.TraineeAlone   {border: solid violet 2px}
.TraineeAlone:not(.IsRegularSlot)   {border: solid violet 2px}
.UncoveredList:not(.IsRegularSlot)  {border: solid red 2px}
.IsOnCall.UncoveredList:not(.IsRegularSlot):not(.IsTimeShift) {border: solid red 2px; background: lightpink}
.ListCancelled:not(.IsRegularSlot)  {text-decoration: line-through; border: lightgrey 1px solid; color: gray}
.CancelledBySurgeon {background: #FF99CC}
.CancelledByAnaesthetist:not(.IsRegularSlot)      {background: #99CC00}
.LateChangeList:not(.IsRegularSlot) {border: green solid 2px; background: lightgreen}
.IsOnCall:not(.IsRegularSlot):not(.IsTimeShift) {background: #ebf5df}
.SpecialityHasChanged  {background: lightyellow}
.tn, .WorkSessionName    {font-weight: bold}
.SlotIcons  {visibility: hidden; vertical-align:middle; text-align: center}
.sli  {visibility: hidden; vertical-align:middle; text-align: center}
.phi {display:none; text-align: center}
.asb { width: 15; height: 15px; padding-top: 2 !important}  //add slot button
.esb {width: 15; height:15px; padding-top: 2 !important}
.overflow { height: 200px; }
.FirstDayOfWeek {border-left: 2px solid gray}
.LastDayOfWeek {border-right: 2px solid gray}
.GroupHeader    {background: lightgray; font-weight: bold; border: 2px solid gray; padding: 5px}
.ShiftContainer:not(.IsPublicHoliday):not(.IsWeekend):not(.IsLeave):not(.IsStudyLeave) {background: #F5D80B;}
.ShiftPlaceholder:not(.IsLeave):not(.IsStudyLeave) {background: #F5D80B;}
.UserName       {padding-right: 10px; padding-top: 5px; padding-bottom: 5px; white-space: nowrap}
.hovering {border-top: 2px dotted darkred; border-bottom: 2px dotted darkred; padding-top: 10px; padding-bottom: 10px; opacity: 0.2;}
.hovering.FirstDayOfWeek {border-top: 2px dotted darkred; border-bottom: 2px dotted darkred; border-left: 2px dotted darkred; padding-top: 10px; padding-bottom: 10px}
.hovering.LastDayOfWeek {border-top: 2px dotted darkred; border-bottom: 2px dotted darkred; border-right: 2px dotted darkred; padding-top: 10px; padding-bottom: 10px}
/*.SpecialityTitle {text-align: center; font-weight: bold}*/


#icons {
    margin: 0;
    padding: 0;
}
#icons span {
    margin: 2px;
    position: relative;
    padding: 4px 0;
    cursor: pointer;
    display: inline-block;
    list-style: none;
}
#icons a.ui-icon {
    /*float: left;*/
    margin: 0 4px;
}


.fakewindowcontain .ui-widget-overlay {
    position: absolute;
}

.IsLeave    {
        background: repeating-linear-gradient(
        45deg,
        #17823c,
        #17823c 10px,
        #13a044 10px,
        #13a044 20px
        ) !important;
    color: white
}

.isblocked {
    background: lightpink;
}

.IsOtherLeave    {
        background: repeating-linear-gradient(
        45deg,
        red,
        red 10px,
        lightpink 10px,
        lightpink 20px
        ) !important;
    color: white
}

.IsStudyLeave    {
        background: repeating-linear-gradient(
        45deg,
        orange,
        orange 10px,
        #ffec00 10px,
        #ffec00 20px
        ) !important;
    color: gray
}

.IsPendingLeave    {
        background: repeating-linear-gradient(
        45deg,
        #606dbc,
        #606dbc 10px,
        #465298 10px,
        #465298 20px
        ) !important;
    color: white; 
}

.IsPendingStudyLeave    {
        background: repeating-linear-gradient(
        45deg,
        #606dbc,
        #606dbc 10px,
        #465298 10px,
        #465298 20px
        ) !important;
    color: white; font-weight: bold
}

.LeaveStatus1 {
    border: grey solid 2px;
}

.LeaveStatus2 {
    background: lightgreen;
    border: green solid 2px
}
.LeaveStatus4 {
    background: lightpink;
    border:red solid 2px
}
.LeaveStatus8 {
    display:none
}
.LeaveStatus {
    padding: 5px
}
.IsNOC {
    opacity: 0.5
}
.IsAllDay {

}

.topnav {
  overflow: hidden;
  /*background-color: #333;*/
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: transparent;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:not(.disabled):hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

.mainpage { padding: 10px}
.highlightslot { border: double 2px orange}