/*Changing theme*/
:root {
  --primaryColor: #0091ea;
  --secondaryColor: #78909c;
  --thirdColor: #eceff1;
  --primaryColorUserLogin: #4caf50;
  --primaryTextColor: #455a64;
  --secondaryTextColor: white;
  --thirdTextColor: #455a64;
  --redColor: #FB0B0B;
  --whiteColor: #ffffff;
  --borderColor: #455a64;
  --backgroundColorHover: rgba(0, 145, 234, 0.7);
  --backgroundColorHoverUserMode: rgba(76, 175, 80, 0.7);
  --backgroundColorHover2: rgba(236, 239, 241, 0.5);
  --glyphiconColor: #455a64;
  --boxShadowColor: #8c8b8b;
  --rfl: url("/Images/Default_Icons/rfq.png");
  --heart: url("/Images/Default_Icons/document_heart.png");
  --RPH: url("/Images/Default_Icons/Record project hours.png");
  --dplan: url("/Images/Default_Icons/dplan.png");
  --chart-area: url("/Images/Default_Icons/chart_area.png");
  --keys: url("/Images/Default_Icons//keys.png");
  --userLog-history: url("/Images/Default_Icons/userlog-history.png");
  --history32x32: url("/Images/Default_Icons//history32x32.png");
  --personal: url("/Images/Default_Icons//personal-28x28.png");
  --bell: url("/Images//Default_Icons/bell.png");
  --door-exit: url("/Images/Default_Icons/door_exit.png");
  --sum: url("/Images/Default_Icons//sum.png");
  --attendance: url("/Images/Default_Icons/attendance.png");
  --switch-mode: url("/Images/Default_Icons/switchMode.png");
  --settings: url("/Images/Default_Icons/settings.png");
  --signin: url("/Images/Default_Icons/icons8-sign-28.png");
  --station-lines: url("/Images/Default_Icons/station-lines.png");
  --station-icons: url("/Images/Default_Icons/station-icon.png");
  --shift-lines-icon-2: url("/Images/Default_Icons/shift-lines-icon-2.png");
  --shift-lines-icon-1: url("/Images/Default_Icons/shift-lines-icon.png");
  --append-btn: url("/Images/Default_Icons/append.png");
  --erase: url("/Images/Default_Icons/erase.png");
  --add: url("/Images/Default_Icons/add.png");
  --paper-jet: url("/Images/Default_Icons/paper_jet2.png");
  --information: url("/Images/Default_Icons/information.png");
  --ok: url("/Images/Default_Icons/ok.png");
  --reject: url("/Images/Default_Icons/reject.png");
  --close: url("/Images/Default_Icons/close.png");
  --edit32x32: url("/Images/Default_Icons/edit32x32.png");
  --edit: url("/Images/Default_Icons/edit.png");
  --delete-white: url("/Images/Default_Icons/delete_white.png");
  --history-white: url("/Images/Default_Icons/history_white.png");
  --calculator: url("/Images/Default_Icons/calculator.png");
  --speech-balloon-question: url("/Images/Default_Icons/speech_balloon_question.png");
  --rfl-dark: url("/Images/Default_Icons/rfq_dark.png");
  --document-heart-dark: url("/Images/Default_Icons/document_heart_dark.png");
  --delete: url("/Images/Default_Icons/delete.png");
  --history: url("/Images//Default_Icons//history.png");
  --printer: url("/Images/Default_Icons/printer2.png");
  --printerTransparent: url("/Images/Default_Icons/printer.png");
  --arrow-down: url("/Images/Default_Icons//arrow_down.png");
  --arrow-up: url("/Images/Default_Icons/arrow_up.png");
  --left-arrow: url("/Images/Default_Icons/left-arrow.png");
  --right-arrow: url("/Images/Default_Icons/right-arrow.png");
  --menu: url("/Images/Default_Icons/menu.png");
  --calendar-31: url("/Images/Default_Icons/calendar_31.png");
  --arrow-left-hamburger-menu: url("/Images/Default_Icons/arrow_left_hamburger_menu.png");
  --dialog-icon-close: url("/Images/Default_Icons/close.png");
  --geocon-logo-footer: url("/Images/Default_Icons/logogeocon-white.png");
  --date-picker-icon-arrow: url("../images/ui-icons_ffffff_256x240.png");
  --icon-calendar-31: url("/Images/Default_Icons/calendar_31_white.png");
  --copy: url("/Images/Default_Icons/documents_empty.png");
  --rph: url("/Images/Default_Icons/Record project hours.png"); }

@font-face {
  font-family: 'customFont';
  src: url("/fonts/Roboto-Light.woff") format("woff"); }

body, footer, .navbar-header {
  color: #455a64 !important;
  color: var(--primaryTextColor) !important;
  background-color: #eceff1 !important;
  background-color: var(--thirdColor) !important; }

h3 {
  font-family: customFont !important; }

body, .ui-button-text {
  font-family: customFont !important;
  font-size: 14px; }

.ui-button-text {
  color: white ;
  color: var(--secondaryTextColor) ; }

.button-style {
  background-color: #0091ea !important;
  background-color: var(--primaryColor) !important;
  color: white !important;
  color: var(--secondaryTextColor) !important; }

.calendar-icon::after {
  content: url("/Images/Default_Icons/calendar_31_white.png") ;
  content: var(--icon-calendar-31) ; }

input#date-field {
  color: white !important;
  color: var(--secondaryTextColor) !important; }

.date-field#ui-datepicker-div > div > div > span.ui-datepicker-month, .date-field#ui-datepicker-div > div > div > span.ui-datepicker-year {
  color: white !important;
  color: var(--secondaryTextColor) !important; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #455a64 ;
  -webkit-text-fill-color: var(--thirdTextColor) ; }

input, select, textarea, textarea:focus, input:focus, label, a, span, strong {
  color: #455a64 ;
  color: var(--thirdTextColor) ; }

.button-style:hover {
  background-color: rgba(0, 145, 234, 0.7) ;
  background-color: var(--backgroundColorHover) ; }

.fields > div.form-group > label {
  font-family: customFont ;
  font-size: 15px;
  text-align: left;
  margin-bottom: 0; }

.dialog-class {
  /*position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate3d(-50%, -50%, 0);*/
  font-family: customFont ;
  height: auto;
  min-height: 60px;
  width: auto;
  min-width: 300px;
  color: #455a64 !important;
  color: var(--primaryTextColor) !important;
  text-align: center; }

/*Pop-ups/Dialogs Styles*/
.ui-dialog .ui-dialog-title {
  text-align: left; }

.ui-dialog-title {
  color: white ;
  color: var(--secondaryTextColor) ; }

.ui-button-text {
  color: white !important;
  color: var(--secondaryTextColor) !important; }

.ui-button-text-only .ui-button-text {
  padding: 0; }

button.ui-button {
  display: inline-block;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  height: 35px;
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 1px; }

div.ui-dialog-buttonset > button.ui-button {
  background: #0091ea !important;
  background: var(--primaryColor) !important; }

.ui-dialog .ui-dialog-buttonpane {
  box-shadow: none;
  margin: 0; }

.ui-dialog .ui-dialog-content {
  box-shadow: none;
  background: #eceff1 ;
  background: var(--thirdColor) ; }

div.ui-dialog-titlebar.ui-widget-header {
  border: none;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; }

span.ui-button-icon-primary.ui-icon {
  background-color: #0091ea ;
  background-color: var(--primaryColor) ; }

.week-picker-holder {
  background: #0091ea ;
  background: var(--primaryColor) ;
  color: white ;
  color: var(--secondaryTextColor) ; }

.week-picker-holder label, .week-picker-holder span {
  color: white !important;
  color: var(--secondaryTextColor) !important; }

.left-arrow-holder:before {
  content: url("/Images/Default_Icons/left-arrow.png") ;
  content: var(--left-arrow) ; }

.right-arrow-holder:before {
  content: url("/Images/Default_Icons/right-arrow.png") ;
  content: var(--right-arrow) ; }

/*Datepickers styles*/
.calendar-week-hover {
  border: 1px solid #0091ea !important;
  border: 1px solid var(--primaryColor) !important; }

.ui-datepicker-week-col {
  color: #455a64 ;
  color: var(--primaryTextColor) ;
  text-align: center; }

.ui-dialog {
  padding: 0; }

.ui-icon-closethick {
  content: url("/Images/Default_Icons/close.png") !important;
  content: var(--dialog-icon-close) !important;
  content: var(--dialog-icon-close) !important; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ui-icon-closethick {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/close.png") !important;
      background-repeat: no-repeat;
      background-size: cover; } }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ui-icon-closethick {
      background-color: #0091ea !important;
      background-color: var(--primaryColor) !important;
      background-repeat: no-repeat !important;
      background-position-x: 60% !important;
      background-position-y: 50% !important;
      transform: scale(0.8) !important; } }

.ui-state-hover.ui-datepicker-next-hover, .ui-state-hover.ui-datepicker-prev-hover {
  background: transparent !important;
  border: none !important; }

a.ui-datepicker-next.ui-corner-all > span, a.ui-datepicker-prev.ui-corner-all > span {
  background-image: url("../images/ui-icons_ffffff_256x240.png") !important;
  background-image: var(--date-picker-icon-arrow) !important; }

td.ui-datepicker-current-day > a {
  background: #0091ea !important;
  background: var(--primaryColor) !important;
  color: white !important;
  color: var(--secondaryTextColor) !important;
  opacity: 0.7;
  border-radius: 5px; }

.ui-widget-header, .ui-widget-header .ui-state-default {
  background: #0091ea ;
  background: var(--primaryColor) ;
  color: white ;
  color: var(--secondaryTextColor) ;
  font-family: customFont ; }

button.ui-datepicker-close.ui-state-default.ui-priority-primary.ui-corner-all {
  display: inline-block;
  padding: 6px 12px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 1px;
  font-size: 16px;
  height: 35px;
  width: 100px;
  border-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #0091ea ;
  background: var(--primaryColor) ;
  color: white ;
  color: var(--secondaryTextColor) ; }

.ui-widget-content {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  border: none;
  background: #eceff1 ;
  background: var(--thirdColor) ;
  color: #455a64 ;
  color: var(--primaryTextColor) ; }

.ui-state-default, .ui-widget-content .ui-state-default {
  background: #ffffff ;
  background: var(--whiteColor) ;
  border: none;
  text-align: center;
  color: #455a64 ;
  color: var(--thirdTextColor) ; }

table.ui-datepicker-calendar thead {
  background: #ffffff ;
  background: var(--whiteColor) ; }

table.ui-datepicker-calendar thead tr th span {
  color: #455a64 !important;
  color: var(--primaryTextColor) !important; }

.ui-datepicker-week-end .ui-state-default {
  color: #FB0B0B !important;
  color: var(--redColor) !important; }

#render-body-div {
  background: #eceff1 ;
  background: var(--thirdColor) ; }

.ui-widget select, .ui-widget {
  font-family: customFont ; }

.arrows-mobile {
  background: #0091ea ;
  background: var(--primaryColor) ; }

.rows {
  background: #78909c ;
  background: var(--secondaryColor) ; }

/*Mobile Tables*/
table.bt tbody td:before {
  background: #0091ea !important;
  background: var(--primaryColor) !important;
  color: white !important;
  color: var(--secondaryTextColor) !important; }

table.bt tbody td {
  background: #ffffff !important;
  background: var(--whiteColor) !important; }

table.bt tbody td span {
  color: #455a64 !important;
  color: var(--thirdTextColor) !important; }

table.details tbody td:first-child, table.table-period tbody td:first-child {
  background: #0091ea !important;
  background: var(--primaryColor) !important;
  color: white !important;
  color: var(--secondaryTextColor) !important; }

table.details tbody td, table.table-period tbody td {
  background: #ffffff !important;
  background: var(--whiteColor) !important; }

table.table-period tbody, table.details tbody {
  border: 1px solid #455a64 ;
  border: 1px solid var(--borderColor) ; }

table.basicTable thead > tr > th, table.basicTable tbody > tr > th, table.basicTable tfoot > tr > th, table.basicTable thead > tr > td, table.basicTable tbody > tr > td, table.basicTable tfoot > tr > td {
  background-color: #eceff1 ;
  background-color: var(--thirdColor) ; }

.rfl-collapsing {
  background: #0091ea ;
  background: var(--primaryColor) ; }

table.ui-datepicker-calendar tbody {
  background-color: #ffffff ;
  background-color: var(--whiteColor) ; }

table tbody {
  background-color: #ffffff ;
  background-color: var(--whiteColor) ;
  color: #455a64 ;
  color: var(--thirdTextColor) ; }

.right-column-details-table {
  background: #eceff1 ;
  background: var(--thirdColor) ; }

.user-info {
  -webkit-box-shadow: 2px 2px 5px 2px #8c8b8b;
  -moz-box-shadow: 2px 2px 5px 2px #8c8b8b;
  box-shadow: 2px 2px 5px 2px #8c8b8b; }

table thead {
  color: white !important;
  color: var(--secondaryTextColor) !important; }

/*RECORD PROJECT HOURS*/
.rph-bigtable-holder {
  background: #ffffff ;
  background: var(--whiteColor) ; }

table.rph-big-table {
  background: #0091ea ;
  background: var(--primaryColor) ; }

table.rph-top-right-table {
  background: #0091ea ;
  background: var(--primaryColor) ; }

#rph-close, #btn-close {
  background: url("/Images/Default_Icons/close.png") no-repeat 10% 50% ;
  background: var(--close) no-repeat 10% 50% ; }

#rph-new {
  background: url("/Images/Default_Icons/add.png") no-repeat 10% 50% ;
  background: var(--add) no-repeat 10% 50% ; }

#rph-change, #btnPropose, #btn-propose-plannedShift, #proposeBtnShiftRequest {
  background: url("/Images/Default_Icons/edit32x32.png") no-repeat 10px ;
  background: var(--edit32x32) no-repeat 10px ; }

#rph-submit, #btn-submit {
  background: url("/Images/Default_Icons/paper_jet2.png") no-repeat 10% 50% ;
  background: var(--paper-jet) no-repeat 10% 50% ; }

#rph-copy {
  background: url("/Images/Default_Icons/documents_empty.png") no-repeat 5% 50% ;
  background: var(--copy) no-repeat 5% 50% ; }

.rph-edit {
  content: var(--edit) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .rph-edit {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/edit.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

.rph-delete {
  content: var(--delete) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .rph-delete {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/delete.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

input#date-field-rph {
  color: white ;
  color: var(--secondaryTextColor) ; }

#gridProjectActivity table.k-selectable tr.k-state-selected td {
  border: 1px solid #0091ea ;
  border: 1px solid var(--primaryColor) ; }

#gridProjectActivity .k-state-selected {
  color: #455a64 ;
  color: var(--primaryTextColor) ; }

#pa-name, #pa-dropdown {
  border: 1px solid #455a64 ;
  border: 1px solid var(--borderColor) ; }

.pa-grid > div:last-child {
  background: #ffffff ;
  background: var(--whiteColor) ; }

.ui-icon-check {
  background: url("/Images/Default_Icons/add.png") !important;
  background: var(--add) !important; }

.ui-icon-close {
  background: url("/Images/Default_Icons/close.png") !important;
  background: var(--close) !important; }

.basic-select select {
  /* Appearance: none will hide the default arrow */
  -webkit-appearance: none;
  -moz-appearance: none; }

/* This will add our own cutom arrow or icon */
.basic-select:after {
  content: url("/Images/Default_Icons//arrow_down.png") ;
  content: var(--arrow-down) ;
  background-color: #0091ea ;
  background-color: var(--primaryColor) ;
  /*if you want to change the position you can use margins or:*/
  position: absolute !important;
  background-size: 100% 100%;
  display: inline-block;
  /*size of your image*/
  height: 30px;
  width: 10px !important;
  padding-top: 5px !important;
  padding-right: 45px !important;
  border-radius: 2px;
  margin-left: -45px !important;
  pointer-events: none; }

#SecondTable > thead > tr > th, #Abbr > thead > tr > th, .rph-top-right-table > thead > tr > th {
  background: #0091ea !important;
  background: var(--primaryColor) !important;
  font-weight: normal;
  cursor: auto; }

.abbr-holder {
  background: #78909c ;
  background: var(--secondaryColor) ;
  color: white ;
  color: var(--secondaryTextColor) ; }

.left-column-details-table {
  background-color: #0091ea ;
  background-color: var(--primaryColor) ;
  color: white ;
  color: var(--secondaryTextColor) ; }

#ConfirmationHistory > thead > tr > th {
  background: #0091ea !important;
  background: var(--primaryColor) !important;
  font-weight: normal;
  color: white ;
  color: var(--secondaryTextColor) ;
  cursor: auto; }

#ConfirmedPlannedPeriods > thead > tr > th {
  background: #0091ea !important;
  background: var(--primaryColor) !important;
  font-weight: normal;
  cursor: auto;
  border-color: 1px solid #455a64 ;
  border-color: 1px solid var(--borderColor) ; }

#AbbreviationTableHeader {
  font-size: 0.8vw;
  align-self: center;
  font-size: 14px;
  width: 100%;
  background: #0091ea ;
  background: var(--primaryColor) ;
  font-weight: normal;
  color: white ;
  color: var(--secondaryTextColor) ;
  cursor: auto;
  border: 1px solid #455a64 ;
  border: 1px solid var(--borderColor) ; }

#AbbreviationTable > thead > tr > th {
  background: #0091ea ;
  background: var(--primaryColor) ;
  font-weight: normal;
  color: white ;
  color: var(--secondaryTextColor) ;
  cursor: auto;
  border-color:  #455a64 ;
  border-color:  var(--borderColor) ;
  border-width: 0px; }

#hamburger, #arrow-menu, #navigation-button {
  background: #0091ea ;
  background: var(--primaryColor) ; }

#open, #clickable {
  content: var(--menu) ;
  float: right;
  width: 30px;
  height: 33px; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #open, #clickable {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/menu.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#close {
  content: var(--arrow-left-hamburger-menu) ;
  float: right;
  width: 30px;
  height: 33px; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #close {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/arrow_left_hamburger_menu.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#calendar1, #calendar2 {
  background: #0091ea ;
  background: var(--primaryColor) ; }

#RemarkHeader {
  background: #0091ea ;
  background: var(--primaryColor) ;
  text-align: left;
  color: white ;
  color: var(--secondaryTextColor) ;
  border: 1px solid #455a64 ;
  border: 1px solid var(--borderColor) ; }

.add-info-menu {
  border-left: 1px solid #eceff1 ;
  border-left: 1px solid var(--thirdColor) ;
  display: block;
  background: #0091ea ;
  background: var(--primaryColor) ;
  margin-left: -15px;
  margin-right: -15px;
  height: 4em;
  display: flex;
  justify-content: center;
  color: white ;
  color: var(--secondaryTextColor) ;
  font-size: 15px; }

.glyphicon {
  color: #455a64 !important;
  color: var(--glyphiconColor) !important; }

#a1:before {
  content: url("/Images/Default_Icons/rfq.png") ;
  content: var(--rfl) ;
  margin-right: 0.65em; }

#a2:before {
  content: url("/Images/Default_Icons/document_heart.png") ;
  content: var(--heart) ;
  margin-right: 0.65em; }

.nav > li > a {
  color: white !important;
  color: var(--secondaryTextColor) !important;
  font-size: medium; }

#a3:before {
  content: url("/Images/Default_Icons/dplan.png") ;
  content: var(--dplan) ;
  margin-right: 0.65em; }

#a4:before {
  content: url("/Images/Default_Icons/chart_area.png") ;
  content: var(--chart-area) ;
  margin-right: 0.65em; }

#a5:before {
  content: url("/Images/Default_Icons//keys.png") ;
  content: var(--keys) ;
  margin-right: 0.65em; }

#a11:before {
  content: url("/Images/Default_Icons/userlog-history.png") ;
  content: var(--userLog-history) ;
  margin-right: 0.65em; }

#a12:before {
  content: url("/Images/Default_Icons//history32x32.png") ;
  content: var(--history32x32) ;
  margin-right: 0.65em; }

#a13:before {
  content: url("/Images/Default_Icons/Record project hours.png") ;
  content: var(--rph) ;
  margin-right: 0.65em; }

#a6:before {
  content: url("/Images/Default_Icons//personal-28x28.png") ;
  content: var(--personal) ;
  margin-right: 0.65em; }

#a10:before {
  content: url("/Images//Default_Icons/bell.png") ;
  content: var(--bell) ;
  margin-right: 0.65em; }

#liexit > a:before {
  content: url("/Images/Default_Icons/door_exit.png") ;
  content: var(--door-exit) ;
  margin-right: 0.65em; }

#SwitchMode > a:before, #switchMode > a:before {
  content: url("/Images/Default_Icons/switchMode.png") ;
  content: var(--switch-mode) ;
  margin-right: 0.65em; }

#lisettings > a:before {
  content: url("/Images/Default_Icons/settings.png") ;
  content: var(--settings) ;
  margin-right: 0.65em;
  width: 28px !important;
  height: 35px !important; }

#lisignin > a:before {
  content: url("/Images/Default_Icons/icons8-sign-28.png") ;
  content: var(--signin) ;
  margin-right: 0.65em; }

#a8:before {
  content: url("/Images/Default_Icons//sum.png") ;
  content: var(--sum) ;
  margin-right: 0.65em; }

#a9:before {
  content: url("/Images/Default_Icons/attendance.png") ;
  content: var(--attendance) ;
  margin-right: 0.65em; }

#stationLine2, #stationLine1 {
  content: var(--station-lines) ;
  width: 30px;
  height: 43px; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #stationLine2, #stationLine1 {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/station-lines.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

@media only screen and (max-width: 600px) {
  #stationLine2 {
    margin-left: -10px;
    margin-top: -5px; } }

@media only screen and (min-width: 600px) {
  #stationIcon2 {
    margin-left: -11px;
    margin-bottom: 0px; } }

@media only screen and (min-width: 600px) {
  .stationIcons {
    margin-left: -25px;
    margin-top: 5px; } }

@media only screen and (min-width: 600px) {
  #stationLine2 {
    /* CSS HERE ONLY ON DESKTOP */
    margin-left: -33px;
    margin-top: -5px; } }

.stationIcons, #stationIcon1, #Sstations-img, .stations-img {
  content: var(--station-icons) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .stationIcons, #stationIcon1, #Sstations-img, .stations-img {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/station-icon.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }
  @media only screen and (min-width: 600px) {
    .stationIcons, #stationIcon1, #Sstations-img, .stations-img {
      /* CSS HERE ONLY ON DESKTOP */
      width: 30px;
      height: 30px; } }

.shift-lines-icon-2 {
  content: var(--shift-lines-icon-2) ;
  width: 50px;
  height: 50px; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .shift-lines-icon-2 {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/shift-lines-icon-2.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }
  @media only screen and (max-width: 600px) {
    .shift-lines-icon-2 {
      margin-left: -10px !important;
      margin-top: -5px !important; } }
  @media only screen and (min-width: 600px) {
    .shift-lines-icon-2 {
      margin-left: -10px !important;
      margin-top: 5px !important; } }

.shift-lines-icon-1 {
  content: var(--shift-lines-icon-1) ;
  width: 40px;
  height: 43px; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .shift-lines-icon-1 {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/shift-lines-icon.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }
  @media only screen and (max-width: 600px) {
    .shift-lines-icon-1 {
      margin-left: -10px !important;
      margin-top: -5px !important; } }
  @media only screen and (min-width: 600px) {
    .shift-lines-icon-1 {
      margin-left: -10px !important;
      margin-top: 5px !important; } }

.nav > li > a {
  color: white !important;
  color: var(--secondaryTextColor) !important;
  font-size: medium;
  padding-left: 0px;
  padding-right: 0px;
  width: 100%;
  padding: 10px;
  display: inline-flex;
  align-items: center; }

.nav > li > a:hover {
  background-color: rgba(236, 239, 241, 0.5) !important;
  background-color: var(--backgroundColorHover2) !important;
  /*color: var(--backgroundColorHover) !important;*/
  cursor: pointer; }

.submenu > li > a {
  color: white !important;
  color: var(--secondaryTextColor) !important; }

.submenu > li > a:hover {
  background-color: rgba(236, 239, 241, 0.5) !important;
  background-color: var(--backgroundColorHover2) !important;
  /*color: var(--backgroundColorHover) !important;*/
  cursor: pointer; }

.dropdown-menu > .active > a {
  background-color: rgba(236, 239, 241, 0.5) ;
  background-color: var(--backgroundColorHover2) ; }

.submenu > li.active > a:hover {
  /*color: var(--backgroundColorHover2) !important;*/ }

.dropdown-menu.submenu {
  background-color: #78909c ;
  background-color: var(--secondaryColor) ; }

/*Moble specific button icons*/
#btn-close-plannedShift, #btn-close {
  background: url("/Images/Default_Icons/ok.png") no-repeat 10% 50% ;
  background: var(--ok) no-repeat 10% 50% ; }

#btn-submit {
  background: url("/Images/Default_Icons/paper_jet2.png") no-repeat 10% 50% ;
  background: var(--paper-jet) no-repeat 10% 50% ; }

#takeBtnShiftRequest {
  background: url("/Images/Default_Icons/append.png") no-repeat 10px ;
  background: var(--append-btn) no-repeat 10px ; }

#btnAppend {
  background: url("/Images/Default_Icons/append.png") no-repeat 10px ;
  background: var(--append-btn) no-repeat 10px ;
  float: left; }

#btnRemove {
  background: url("/Images/Default_Icons/erase.png") no-repeat 10px ;
  background: var(--erase) no-repeat 10px ;
  margin-left: 10px; }

#btnNew {
  background: url("/Images/Default_Icons/add.png") no-repeat 10px ;
  background: var(--add) no-repeat 10px ; }

#btnOkAbbreviation, #btnSubmitNewPeriod, #btnOkPass, #btnOkPersonal, .btnOk {
  background: url("/Images/Default_Icons/paper_jet2.png") no-repeat 10px ;
  background: var(--paper-jet) no-repeat 10px ; }

#rejectBtnShiftRequest, #cancelBtnShiftRequest {
  background: url("/Images/Default_Icons/close.png") no-repeat 10px ;
  background: var(--close) no-repeat 10px ; }

#btnClosePropose {
  background: url("/Images/Default_Icons/ok.png") no-repeat 10px ;
  background: var(--ok) no-repeat 10px ;
  margin-left: 15px; }

#btnCloseAbbreviation {
  background: url("/Images/Default_Icons/close.png") no-repeat 10px ;
  background: var(--close) no-repeat 10px ;
  margin-left: 10px; }

#btnCloseNewPeriod, #btnClosePass, #btnClosePersonal {
  background: url("/Images/Default_Icons/close.png") no-repeat 10px ;
  background: var(--close) no-repeat 10px ;
  margin-left: 3%; }

#btnViewChangeClose {
  background: url("/Images/Default_Icons/ok.png") no-repeat 10px ;
  background: var(--ok) no-repeat 10px ; }

#btnViewChangeNew {
  background: url("/Images/Default_Icons/add.png") no-repeat 10px ;
  background: var(--add) no-repeat 10px ;
  float: left; }

#btnViewChangeDetails {
  background: url("/Images/Default_Icons/edit32x32.png") no-repeat 10px ;
  background: var(--edit32x32) no-repeat 10px ;
  margin-left: 10px; }

.WishBinIcon {
  background: url("/Images/Default_Icons/delete_white.png") ;
  background: var(--delete-white) ;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px; }

.WishHistoryIcon {
  background: url("/Images/Default_Icons/history_white.png") ;
  background: var(--history-white) ;
  background-repeat: no-repeat;
  background-position: center;
  width: inherit; }

#btnCalculate {
  background: url("/Images/Default_Icons/calculator.png") no-repeat 10px ;
  background: var(--calculator) no-repeat 10px ;
  width: 130px;
  margin-left: 8px; }

#bntSubmitNewRequest {
  background: url("/Images/Default_Icons/paper_jet2.png") no-repeat 10px ;
  background: var(--paper-jet) no-repeat 10px ;
  float: left; }

#btnCloseNewRequest {
  background: url("/Images/Default_Icons/close.png") no-repeat 10px ;
  background: var(--close) no-repeat 10px ;
  float: left;
  margin-left: 10px; }

#btnEditAttendance {
  background: url("/Images/Default_Icons/edit32x32.png") ;
  background: var(--edit32x32) ;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: 10px;
  border-radius: 0px;
  vertical-align: middle;
  height: 45px;
  width: 140px;
  text-align: center;
  color: white ;
  color: var(--secondaryTextColor) ;
  background-color: #0091ea ;
  background-color: var(--primaryColor) ;
  border-width: 0px;
  float: right;
  padding-left: 40px; }

.tableIconEdit {
  content: var(--edit) ;
  display: inline-block; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .tableIconEdit {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/edit.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

.tableIconDelete {
  content: var(--delete) ;
  display: inline-block; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .tableIconDelete {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/delete.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

.tableIconHistory {
  content: var(--history) ;
  display: inline-block; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .tableIconHistory {
      /* IE10+ CSS styles go here */
      background: url("/Images//Default_Icons//history.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

table#ReportsTable > tbody > tr > td:last-child {
  background-color: #0091ea ;
  background-color: var(--primaryColor) ; }

.printReport:before {
  content: url("/Images/Default_Icons/printer2.png") ;
  content: var(--printer) ;
  display: inline-block; }

.tableIconPrint {
  content: var(--printerTransparent) ;
  display: inline-block; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .tableIconPrint {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/printer.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#AppForLeaveHistoryIcon {
  content: var(--rfl-dark) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #AppForLeaveHistoryIcon {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/rfq_dark.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#WishHistoryIcon {
  content: var(--document-heart-dark) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #WishHistoryIcon {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/document_heart_dark.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#btnDeleteAttendance {
  background: url("/Images/Default_Icons/delete.png") ;
  background: var(--delete) ;
  color: white ;
  color: var(--secondaryTextColor) ;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: 10px;
  border-radius: 0px;
  vertical-align: middle;
  height: 45px;
  width: 140px;
  text-align: center;
  background-color: #0091ea;
  border-width: 0px;
  float: right;
  padding-left: 40px; }

#btnCloseReports {
  background: url("/Images/Default_Icons/close.png") no-repeat 10px ;
  background: var(--close) no-repeat 10px ; }

#btnCloseHistory {
  background: url("/Images/Default_Icons/close.png") no-repeat 10px ;
  background: var(--close) no-repeat 10px ;
  color: white ;
  color: var(--secondaryTextColor) ;
  background-color: #0091ea ;
  background-color: var(--primaryColor) ;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: 10px;
  border-radius: 0px;
  height: 45px;
  width: 140px;
  text-align: center;
  border-width: 0px;
  float: right;
  padding-left: 35px;
  margin-top: 10px; }

#btnRequestLeaving {
  background: url("/Images/Default_Icons/speech_balloon_question.png") no-repeat 10px ;
  background: var(--speech-balloon-question) no-repeat 10px ; }

#request {
  background: url("/Images/Default_Icons/speech_balloon_question.png") ;
  background: var(--speech-balloon-question) ;
  color: white ;
  color: var(--secondaryTextColor) ;
  background-color: #0091ea ;
  background-color: var(--primaryColor) ;
  background-repeat: no-repeat;
  background-position: 10px;
  float: right;
  margin-right: 35px;
  border-radius: 1px;
  vertical-align: middle;
  height: 45px;
  width: 150px;
  text-align: center;
  border-width: 0px; }

/*Checkboxes*/
/*input[type="checkbox"].checkboxes, input[type="checkbox"]#select-all, input[type="checkbox"]#select-all-div {
    width: 25px !important;
    height: 25px !important;
}*/
.custom-color-checkbox:checked:after {
  background: #0091ea ;
  background: var(--primaryColor) ; }

#edit, .edit {
  content: var(--edit) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #edit, .edit {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/edit.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#delete, .delete {
  content: var(--delete) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #delete, .delete {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/delete.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

.wishIconNotification {
  content: var(--heart) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .wishIconNotification {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/document_heart.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

.RPH_IconNotification {
  content: var(--RPH) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .RPH_IconNotification {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/Record project hours.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

.rflIconNotification {
  content: var(--rfl) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .rflIconNotification {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/rfq.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

.shiftConfIconNotification {
  content: var(--dplan) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .shiftConfIconNotification {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/dplan.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#add-info {
  content: var(--arrow-down) ;
  background-color: #0091ea !important;
  background-color: var(--primaryColor) !important; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #add-info {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons//arrow_down.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #add-info {
      width: 50px;
      height: 22px; } }

#add-info-close {
  content: var(--arrow-up) ;
  background-color: #0091ea !important;
  background-color: var(--primaryColor) !important; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #add-info-close {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/arrow_up.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }
  @media only screen and (min-width: 600px) {
    #add-info-close {
      /* CSS HERE ONLY ON DESKTOP */
      display: flex;
      cursor: pointer;
      position: absolute;
      left: 50%; } }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #add-info-close {
      /*IE*/
      width: 50px;
      height: 22px; } }

#btnLeft {
  cursor: pointer;
  content: var(--left-arrow) ;
  background-color: #4caf50 !important;
  background-color: var(--primaryColorUserLogin) !important; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #btnLeft {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/left-arrow.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#btnRight {
  cursor: pointer;
  content: var(--right-arrow) ;
  background-color: #4caf50 !important;
  background-color: var(--primaryColorUserLogin) !important; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #btnRight {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/right-arrow.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#btnMonthlyPrevDate, #ReportsLeftArrow, #RequestLeavingLeftArrow, #btnPrevDate, #btnWishesPrevDate, #image-arrow-menu {
  content: var(--left-arrow) ;
  background-color: #0091ea !important;
  background-color: var(--primaryColor) !important; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #btnMonthlyPrevDate, #ReportsLeftArrow, #RequestLeavingLeftArrow, #btnPrevDate, #btnWishesPrevDate, #image-arrow-menu {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/left-arrow.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #btnMonthlyPrevDate, #ReportsLeftArrow, #RequestLeavingLeftArrow, #btnPrevDate, #btnWishesPrevDate, #image-arrow-menu {
      width: 30px;
      height: 30px; } }

#ReportsRightArrow, #RequestLeavingRightArrow, #btnNextDate, #btnWishesNextDate, #btnMonthlyNextDate {
  content: var(--right-arrow) ;
  background-color: #0091ea !important;
  background-color: var(--primaryColor) !important; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #ReportsRightArrow, #RequestLeavingRightArrow, #btnNextDate, #btnWishesNextDate, #btnMonthlyNextDate {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/right-arrow.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #ReportsRightArrow, #RequestLeavingRightArrow, #btnNextDate, #btnWishesNextDate, #btnMonthlyNextDate {
      width: 30px;
      height: 30px; } }

#ReportsCalendar31, #RequestLeavingCalendar31, #PlanCalendar31 {
  content: var(--calendar-31) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #ReportsCalendar31, #RequestLeavingCalendar31, #PlanCalendar31 {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/calendar_31.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#lbl5 {
  /*color: var(--primaryTextColor);*/ }

#ProposedPeriods > thead > tr > th {
  background: #0091ea ;
  background: var(--primaryColor) ;
  font-weight: normal;
  cursor: auto;
  border-color:  #455a64 ;
  border-color:  var(--borderColor) ;
  border-width: 1px; }

#upper {
  background: #ffffff ;
  background: var(--whiteColor) ;
  border-bottom: 1px solid #0091ea ;
  border-bottom: 1px solid var(--primaryColor) ;
  margin: 0;
  position: static;
  display: flex;
  flex-direction: row-reverse; }

#left, #drop-down {
  background: #78909c ;
  background: var(--secondaryColor) ;
  box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.1); }

#footer {
  background: #78909c ;
  background: var(--secondaryColor) ;
  border: 0px;
  z-index: 10;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding-right: 30px; }

.active {
  background-color: rgba(236, 239, 241, 0.5) ;
  background-color: var(--backgroundColorHover2) ; }

#header1 {
  margin-top: 10px;
  text-align: left;
  background: rgba(0, 145, 234, 0.7) ;
  background: var(--backgroundColorHover) ;
  margin-bottom: 0px;
  height: 20px; }

#header2 {
  margin-top: 10px;
  text-align: left;
  background: rgba(0, 145, 234, 0.7) ;
  background: var(--backgroundColorHover) ; }

#header5 {
  background: rgba(0, 145, 234, 0.7) ;
  background: var(--backgroundColorHover) ; }

#right label, #right span, #render-body-div label, #render-body-div span, .navbar-header label, .path span {
  color: #455a64 ;
  color: var(--primaryTextColor) ; }

table.userModePersInfo td {
  font-family: customFont !important; }

#right {
  /*width: auto;*/
  width: 100%;
  overflow-y: scroll;
  width: -webkit-fill-available;
  -ms-overflow-style: none;
  /*IE 10+*/
  scrollbar-width: none;
  /*Firefox*/ }

#ProposedLeft {
  height: 200px;
  background-color: #78909c !important;
  background-color: var(--secondaryColor) !important;
  overflow: auto; }

#ProposedLeft > table > tbody, #ConfirmedLeft > table > tbody {
  background-color: #78909c !important;
  background-color: var(--secondaryColor) !important;
  color: white !important;
  color: var(--secondaryTextColor) !important; }

#ConfirmedLeft {
  height: 200px;
  background-color: #78909c !important;
  background-color: var(--secondaryColor) !important;
  overflow: auto; }

#MonthlyCalendar31 {
  content: var(--calendar-31) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #MonthlyCalendar31 {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/calendar_31.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#gridevents .k-header {
  background-color: rgba(0, 145, 234, 0.7) ;
  background-color: var(--backgroundColorHover) ; }

#gridperiods .k-header {
  background-color: rgba(0, 145, 234, 0.7) ;
  background-color: var(--backgroundColorHover) ; }

#gridperiods .k-grid-header th.k-header {
  text-align: center;
  background: #0091ea ;
  background: var(--primaryColor) ; }

#gridevents .k-grid-header th.k-header {
  text-align: center;
  background: #0091ea ;
  background: var(--primaryColor) ; }

.k-header > .k-link {
  color: white !important;
  color: var(--secondaryTextColor) !important; }

#gridevents .k-grid-pdf, #gridevents .k-grid-add, #gridevents .k-grid-submit, #gridperiods .k-grid-pdf, #new-event-btn {
  font-size: 12px;
  font-family: customFont ;
  background-color: #0091ea ;
  background-color: var(--primaryColor) ;
  color: white !important;
  color: var(--secondaryTextColor) !important;
  border-color: #ffffff ;
  border-color: var(--whiteColor) ;
  border: 1px solid; }

table.user-info tr, table.user-info td {
  font-family: customFont !important;
  font-size: 14px; }

#blank-row {
  border-bottom: 1px solid #0091ea ;
  border-bottom: 1px solid var(--primaryColor) ; }

#kendocalendar .k-footer .k-nav-today {
  background-color: #0091ea ;
  background-color: var(--primaryColor) ;
  color: white !important;
  color: var(--secondaryTextColor) !important; }

#kendocalendar .k-header {
  background-color: #0091ea ;
  background-color: var(--primaryColor) ;
  color: white ;
  color: var(--secondaryTextColor) ;
  background-image: none;
  background-repeat: no-repeat; }

#kendocalendar .k-state-selected {
  background-color: #0091ea !important;
  background-color: var(--primaryColor) !important; }

#kendocalendar .k-state-selected .k-link {
  color: white !important;
  color: var(--secondaryTextColor) !important; }

.k-calendar .k-content th {
  color: #455a64 ;
  color: var(--thirdTextColor) ; }

#MonthlyBalance tbody, #PlanLegend tbody, #legendWishes tbody {
  background-color: #eceff1 !important;
  background-color: var(--thirdColor) !important; }

#load-partial, #load-partial label, #load-partial span {
  color: #455a64 !important;
  color: var(--thirdTextColor) !important; }

#ReportsTable > thead > tr > th {
  background: #0091ea ;
  background: var(--primaryColor) ;
  font-weight: normal;
  cursor: auto; }

#btnMonthlyNextDate {
  content: var(--right-arrow) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #btnMonthlyNextDate {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/right-arrow.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#col7-content, #col3-content {
  background-color: rgba(0, 145, 234, 0.7) ;
  background-color: var(--backgroundColorHover) ;
  color: #455a64 ;
  color: var(--primaryTextColor) ; }

.head-row {
  background-color: rgba(0, 145, 234, 0.7) ;
  background-color: var(--backgroundColorHover) ;
  height: 30px; }

#expandeAccordionItem, #expandeAccordionItemMob {
  content: var(--arrow-down) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #expandeAccordionItem, #expandeAccordionItemMob {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons//arrow_down.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#collapseAccordionItem, #collapseAccordionItemMob {
  content: var(--arrow-up) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #collapseAccordionItem, #collapseAccordionItemMob {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/arrow_up.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#bottomnavarrow, #rfl-rotating-arrow {
  content: var(--arrow-down) ;
  background-color: #0091ea !important;
  background-color: var(--primaryColor) !important; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #bottomnavarrow, #rfl-rotating-arrow {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons//arrow_down.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

#topnavarrow {
  content: var(--arrow-up) ;
  background-color: #0091ea !important;
  background-color: var(--primaryColor) !important; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #topnavarrow {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/arrow_up.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

div[data-selectedabrid=selected], div[data-selectedstatid=selected] {
  background-color: rgba(236, 239, 241, 0.5) !important;
  background-color: var(--backgroundColorHover2) !important; }

.ui-datepicker-close {
  color: white !important;
  color: var(--secondaryTextColor) !important; }

span.k-icon {
  /*@include var(color,secontTextColor,true);*/ }

#load-partial-view {
  background-color: #ffffff !important;
  background-color: var(--whiteColor) !important; }

.k-grid-edit, .k-grid-delete, .k-grid-update, .k-grid-cancel, .k-dropdown-wrap.k-state-default, .k-list, .k-list-container, .k-list > .k-state-focused.k-state-selected {
  background-color: #0091ea ;
  background-color: var(--primaryColor) ;
  color: white ;
  color: var(--secondaryTextColor) ; }

.k-grid-edit:hover, .k-grid-delete:hover, .k-grid-update:hover, .k-grid-cancel:hover {
  background-color: rgba(0, 145, 234, 0.7) ;
  background-color: var(--backgroundColorHover) ; }

.k-popup .k-list .k-state-hover {
  background-color: rgba(0, 145, 234, 0.7) ;
  background-color: var(--backgroundColorHover) ;
  color: white ;
  color: var(--secondaryTextColor) ; }

.k-list > .k-state-selected {
  border-color: white !important;
  border-color: var(--secondaryTextColor) !important;
  box-shadow: none !important; }

.k-dropdown .k-input {
  color: white !important;
  color: var(--secondaryTextColor) !important; }

.tableRowWhite {
  background-color: #ffffff ;
  background-color: var(--whiteColor) ;
  padding: 0.4em; }

.tableRowGrey {
  background-color: rgba(236, 239, 241, 0.5) ;
  background-color: var(--backgroundColorHover2) ;
  padding: 0.4em; }

.container-custom {
  background-color: #ffffff ;
  background-color: var(--whiteColor) ; }

#Abbr tbody tr.clicked td {
  background-color: rgba(236, 239, 241, 0.5) ;
  background-color: var(--backgroundColorHover2) ; }

.clicked {
  background-color: rgba(236, 239, 241, 0.5) ;
  background-color: var(--backgroundColorHover2) ; }

#AbbreviationTable > tbody > tr {
  border-top: 1px solid rgba(236, 239, 241, 0.5) ;
  border-top: 1px solid var(--backgroundColorHover2) ; }

.tab-content {
  background-color: #78909c ;
  background-color: var(--secondaryColor) ; }

table#table-tree tbody {
  background-color: #78909c !important;
  background-color: var(--secondaryColor) !important;
  color: white ;
  color: var(--secondaryTextColor) ;
  border: 1px solid #455a64 !important;
  border: 1px solid var(--borderColor) !important; }

ul.tabs > li {
  background-color: rgba(236, 239, 241, 0.5) ;
  background-color: var(--backgroundColorHover2) ;
  color: white ;
  color: var(--secondaryTextColor) ; }

.row-tabs {
  background-color: #78909c !important;
  background-color: var(--secondaryColor) !important; }

.selectedTab {
  background-color: #78909c !important;
  background-color: var(--secondaryColor) !important; }

.head-note {
  background-color: #0091ea !important;
  background-color: var(--primaryColor) !important; }

.head-note-label {
  color: white !important;
  color: var(--secondaryTextColor) !important; }

#ViewChangeheader2 {
  background-color: rgba(0, 145, 234, 0.7) ;
  background-color: var(--backgroundColorHover) ;
  margin-top: 10px;
  margin-left: 0px;
  text-align: left;
  height: 100%; }

#ViewChangeheader1 {
  margin-top: 10px;
  margin-left: 0px;
  text-align: left;
  background-color: rgba(0, 145, 234, 0.7) ;
  background-color: var(--backgroundColorHover) ;
  margin-bottom: 0px;
  height: 20px; }

#ViewChangePlannedPeriods > thead > tr > th {
  font-weight: normal;
  cursor: auto;
  background-color: #0091ea ;
  background-color: var(--primaryColor) ;
  border-width: 1px; }

#ViewChangePlannedContent {
  align-self: center;
  cursor: pointer;
  margin-top: 0px;
  margin-left: -4px;
  border: 0px;
  background-color: #78909c ;
  background-color: var(--secondaryColor) ;
  color: white;
  margin-left: 0px; }

#ViewChangePlannedContent > tbody {
  float: left;
  margin-left: 20px;
  background-color: #78909c ;
  background-color: var(--secondaryColor) ;
  color: white ;
  color: var(--secondaryTextColor) ; }

.k-pager-info {
  display: none; }

span.k-i-search {
  color: #455a64 !important;
  color: var(--primaryTextColor) !important; }

.persInfoMobileRfl label {
  color: #455a64 !important;
  color: var(--thirdTextColor) !important; }

.footer-logo {
  content: var(--geocon-logo-footer) ; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .footer-logo {
      /* IE10+ CSS styles go here */
      background: url("/Images/Default_Icons/logogeocon-white.png") ;
      background-repeat: no-repeat;
      background-size: cover; } }

.ui-icon-closethick:hover {
  background-color: #0091ea !important;
  background-color: var(--primaryColor) !important; }

@media only screen and (min-width: 600px) {
  .AbbrShifts {
    margin-left: 10px !important;
    margin-top: 30px !important; } }

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: customFont !important; }

/*End Changing theme*/