$retroModeColor:  #0E74AF;

.retro-mode {
  .reg-header, &.opd-header-wrapper, .opd-header-wrapper {
	border-top: 4px solid orange;
	header{
		height: 46px;
	}
	&, header {
	  background: $retroModeColor;
	}
	a.back-btn, button.back-btn, ul li a.back-btn, .back-btn-link,.recent-patients .recent-patients-header button {
	  &, &:before {
		background: darken($retroModeColor, 10%);
		border-color: darken($retroModeColor, 12%);
		color: #fff;
	  }
	}
	a.back-btn, button.back-btn{
		margin: 4px 6px 0px 0px;
	}
    a.back-btn.patient-switch{
      margin: 0px 6px 0px 0px;
    }
	button.toggle-patient {
	  background-color: darken($retroModeColor, 10%);
	  border-color: darken($retroModeColor, 15%);
	  margin: 3px 0;
	}
	.tabs ul li.tab-item {
	  a,  button {
		background: darken($retroModeColor, 6%);
        padding-top: 13px;
        padding-bottom: 12px
	  }
	  &.tab-selected a, &.tab-selected button {
		background: white;
	  }
	  .tab-submenu ul, .tab-submenu .submenu-item {
		border-color: darken($retroModeColor, 6%);
		background: darken($retroModeColor, 6%);
	  }
	}
      .retro-date-widget-header{
        margin-top: 4px !important;
      }
  }
  .retro-date-widget {
	color: #0a5580;
  }
  .retro-date-text {
	color: black;
	display: inline-block;
	position: absolute;
	top: 0;
	background: orange;
	font-weight: bold;
	left: 50%;
	padding: 9px 10px;
	font-size: 14px;
	border-radius: 0 0 5px 5px;
	transform: translateX(-50%);
  }
  .recent-patients,.opd-header-wrapper .opd-header-bottom .grouped-buttons{
  	padding-top: 4px;
  }

}
.reg-header, .opd-header-wrapper {
	.retro-date-widget-wrapper{
      float: right;
      width: auto;
      display: flex;
      gap: 6px;
    .retro-date-widget-header {
      margin-top: 6px;
      //margin-left:10px;
      button{
        cursor: pointer;
        width: auto;
        max-width: 100%;
        padding: 10px 12px 10px;
        float: left;
        color: $white;
        border: 1px solid darken($bahmniSecondaryColor, 15%);
        background: linear-gradient(to bottom, $bahmniSecondaryColor, darken($bahmniSecondaryColor, 10%));
        font-size: 16px;
      }
      a{
        text-shadow: 0px 4px 6px rgba(0,0,0,.8);
        font-size: 16px;
        text-decoration: underline;
        color: #fff;
        &:hover{
          text-decoration: none;
        }
      }
    }
  }
  input.retro-date-widget {
	&.disabled-date {
	  background-color: lightgrey;
	}
  }
  label.retro-date-widget {
	color: black;
  }
}

.patient-control-panel .retro-date-widget {
  margin-left: 28px;
  color: white;
  .retro-mode & {
	color: orange;
  }
}

.reg-header, .opd-header-wrapper, .patient-control-panel {
  input.retro-date-widget.disabled-date {
	background: none;
	border: 0;
  }
}

.retro-date-widget-panel{
  float: left;
  margin: 6px 0;
  div.input-container{
    width: 210px;
    padding-left: 10px;
    margin-bottom: 10px;
    &.date-widget-container{
    }
    select{
      width: 100%;
      -webkit-appearance: menulist-button;
      height: 31px;
    }
    label.retro-date-label{
      font-size: 14px;
      line-height: 1;
      display: inline-block;
      font-weight: bold;
    }
    input.retro-date-widget {
      height: 30px;
      width: 97%;
      padding: 1px;
    }
  }
  .retro-widget-button-wrapper{
    float: right;
    margin-right: 7px;
    margin-top: 15px;
    button.retro-widget-button{
      float: right;
      width:93px;
      color: $black;
      &.ok_btn{
        margin-left: 10px;
      }
    }
  }

}
.ui-autocomplete{
  z-index: 10001;
}

.test.ngdialog.ngdialog-theme-default {
  .ngdialog-content{
    width: 245px;
  }
}
