body {
  letter-spacing: 0.02rem;
}

input[type="date"] {
  -webkit-appearance: none !important;
  color: red;
  opacity: 1;
  display: block;
  background: url(../images/icons/calendar.png) no-repeat;
  width: 20px;
  height: 20px;
  border-width: thin;
}

.container {
  overflow: auto;
}

.col-80 {
  width: 80%;
}

.p-10-l-r {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.km-view,
.km-view .km-content {
  background-color: #f1f3f3 !important;
}

.km-loader:before {
  background: #0a548b !important;
}

.dairy .km-loader:before {
  background: #67a225 !important;
}

.km-flat .km-touch-scrollbar {
  background: #0a548b !important;
  visibility: hidden !important;
}

.dairy .km-flat .km-touch-scrollbar {
  background: #67a225 !important;
  visibility: hidden !important;
}

.km-flat .km-pages .km-current-page {
  background: #0a548b !important;
}

.dairy .km-flat .km-pages .km-current-page {
  background: #67a225 !important;
}

.km-view:not(.km-drawer) {
  box-shadow: 0px 0px 10px #151719;
}

.remove {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.btnNavigation.drawerButton {
  background-size: 38% 52%;
  background-repeat: no-repeat !important;
  background-position: center;
  background-image: url(../images/icons/icon_menu.png);
}

.btnNavigation.backButton {
  background-size: 100% 100%;
  background-repeat: no-repeat !important;
  z-index: 1;
}

.btnNavigation.resetButton {
  background-position: center;
  -webkit-mask-position: center;
  -webkit-mask-size: 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url(../images/icons/padlock.png);
  background-color: #ffffff !important;
  display: block;
  width: 100%;
}

.btnNavigation.calendarButton {
  background-position: center;
  -webkit-mask-position: center;
  -webkit-mask-size: 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url(../images/icons/calendar.png);
  background-color: #ffffff !important;
  display: block;
  width: 100%;
}

.btnNavigation.searchButton {
  background-repeat: no-repeat !important;
  background-position: center;
  background-image: url(../images/icons/icon_search.png);
  z-index: 1;
}

.btnNavigation.addNewButton {
  background-repeat: no-repeat !important;
  background-position: center;
  background-image: url(../images/icons/Add-New.png);
  z-index: 1;
}

.btnNavigation.printBtn {
  background-repeat: no-repeat !important;
  background-position: center;
  background-image: url(../images/icons/Print.png);
  z-index: 1;
}

.addAttachButton {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-image: url(../images/icons/attach.png) !important;
  z-index: 1 !important;
  background-color: white !important;
  border-color: white !important;
}

.btnNavigation.saveButton {
  background-size: 50% auto;
  background-repeat: no-repeat !important;
  background-position: center;
  background-image: url(../images/icons/icon_save.png);
  z-index: 1;
}

.btnNavigation.qrButton {
  background-size: 50% auto;
  background-repeat: no-repeat !important;
  background-position: center;
  background-image: url(../images/icons/icon_qr.png);
  z-index: 1;
}

.btnNavigation.cardButton {
  background-size: 50% auto;
  background-repeat: no-repeat !important;
  background-position: center;
  background-image: url(../images/icons/icon_card.png);
  z-index: 1;
}

.btnNavigation.closeButton {
  background-size: 35% auto;
  background-repeat: no-repeat !important;
  background-position: center;
  background-image: url(../images/icons/icon_close.png);
  z-index: 1;
}

.tabsContainer {
  display: block;
  min-width: 100%;
  overflow: hidden;
}

.tabsContainer .tabs .km-button {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  background: white;
  position: relative;
  color: #3a3a3c;
}

.tabsContainer .tabs .km-button.km-state-active {
  box-shadow: none;
}

.tabsContainer .tabs .km-button.km-state-active:after {
  display: block;
  height: 3px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #0a548b;
  content: "";
}

.dairy .tabsContainer .tabs .km-button.km-state-active:after {
  display: block;
  height: 3px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: #67a225;
  content: "";
}

.tabsContainer .km-touch-scrollbar {
  background: transparent !important;
}

.detailsList li .container .basicInfo {
  padding: 5px;
  background: #151719;
  color: white;
}

.detailsList li .container .detail {
  padding: 5px 10px;
  position: relative;
}

.detailsList li .container .detail:not(.no-border):before {
  content: " ";
  display: block;
  width: 98%;
  height: 1px;
  background: #cccccc;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
}

.detailsList li .container .detail .not_title {
  font-weight: 400;
  padding: 5px 0px;
}

.subWhiteSpace {
  display: block;
  width: 100%;
  height: 20px;
}

.footer-note {
  width: 100%;
  background: #ffffff;
  color: #b1b1b1;
  vertical-align: middle;
  padding: 10px 10px 6px 10px;
}

.m-10 {
  margin: 10px;
}

.m-t-10 {
  margin-top: 10px;
}

.black {
  color: black;
}

/*.english, .english * {
    direction: ltr;
    text-align: left;
}

.arabic, .arabic * {
    direction: rtl;
    text-align: right;
}*/
.km-flat .km-scroller-pull,
.km-flat .km-scroller-refresh.km-load-more {
  width: 2em !important;
  height: 2em !important;
}

.km-icon {
  font-size: 30px !important;
  left: 1px !important;
  top: 2px !important;
}

.km-scroller-pull .km-scroller-release {
  font-size: 15px !important;
}

.km-flat .km-scroller-pull .km-template {
  font-size: 15px !important;
}

.km-flat .km-scroller-pull {
  background: #0a548b;
  font-size: 15px;
}

.km-scroller-pull .km-template {
  color: #0a548b;
}

.km-view:not(.km-drawer) .header {
  background: #0a548b;
  border-bottom: none;
}

.dairy .km-flat .km-scroller-pull {
  background: #67a225;
  font-size: 15px;
}

.dairy .km-scroller-pull .km-template {
  color: #67a225;
}

.dairy .km-view:not(.km-drawer) .header {
  background: #67a225;
  border-bottom: none;
}

.header .title {
  color: #ffffff;
}

.form-control:focus {
  border-color: #0a548b !important;
  color: #0a548b !important;
}

.dairy .form-control:focus {
  border-color: #67a225 !important;
  color: #67a225 !important;
}

.form-control {
  padding: 0.2rem 0.7rem !important;
}

.btn {
  background: #0a548b !important;
  color: white !important;
}

.dairy .btn {
  background: #67a225 !important;
  color: white !important;
}

.navbar.search-header .title {
  padding: 0px;
}

.p-10 {
  padding: 10px !important;
}

.navbar {
  background-color: #0a548b;
  font-weight: 600;
}

.dairy .navbar {
  background-color: #67a225;
  font-weight: 600;
}

.header .title {
  color: #ffffff;
  text-align: center !important;
}

.content {
  background: #ffffff !important;
}

.label-status {
  padding: 0px 25px;
  background: lightgrey !important;
  color: #5b5b5b !important;
  font-size: 0.6rem;
  border-radius: 6%;
  vertical-align: super;
}

.btn-menu {
  background-image: url(../images/icons/icon_menu.png);
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  display: block;
  border: none !important;
}

.btn-save {
  background-repeat: repeat;
  background-position: 0 0;
  color: #ffffff;
  text-align: center !important;
  width: 100% !important;
  border-radius: 6px;
  min-height: 38px;
  border: 1px solid;
  background-image: #0a548b;
  background-color: #0a548b;
}

.btn-delete {
  background-repeat: repeat;
  background-position: 0 0;
  color: #ffffff;
  text-align: center !important;
  width: 100% !important;
  border-radius: 6px;
  min-height: 38px;
  border: 1px solid;
  background-image: #d91010;
  background-color: #d91010;
}

.grain .btn-save {
  background-image: #0a548b;
  background-color: #0a548b;
}

.dairy .btn-save {
  background-image: #67a225;
  background-color: #67a225;
}

.sub-value * {
  word-break: break-word !important;
}

.control-label {
  width: 100%;
  color: #0a548b;
}

.dairy .control-label {
  color: #67a225;
}

.row {
  display: flex;
  width: 100%;
}

.no-data {
  text-align: center;
  margin-top: 50%;
  color: #0a548b;
}

.dairy .no-data {
  color: #67a225;
}

.no-data-btn {
  background-image: url(../images/icons/no-data.png) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  display: block !important;
  background-color: inherit !important;
  border: none !important;
}

.btn-general {
  text-transform: uppercase;
  padding: 2.5px 10px 2.5px 10px;
  border: 1px solid #0a548b;
  margin: 6px;
  border-radius: 3px;
  text-decoration: none;
  background: transparent;
  color: #0a548b;
}

.dairy .btn-general {
  color: #67a225;
}

#notification-bar {
  display: block;
  width: 100%;
  position: relative;
  padding: 10px 0;
  -webkit-transition: -webkit-transform linear 0.2s;
  -webkit-transform: translate3d(0px, -80px, 0px);
  z-index: 9999;
  background: #111;
  font-size: 0.8rem;
  font-weight: 700;
  color: #FFF;
  opacity: 0.9;
  clear: both;
  overflow: hidden;
}

#notification-bar.visible {
  -webkit-transform: translate3d(0px, 0px, 0px);
}

#notification-bar .notIcon {
  display: inline-block;
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 20px;
  background-image: url(../images/logo.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 4px;
}

#notification-bar .notDetails {
  display: inline-block;
  width: calc(100% - 60px);
  float: left;
  margin-left: 10px;
}

#notification-bar .notTop {
  display: block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  clear: both;
}

#notification-bar .notTitle {
  display: inline-block;
  float: left;
}

#notification-bar .notTime {
  display: inline-block;
  float: left;
  margin-left: 10px;
  font-size: 0.8rem;
  font-weight: 400;
  color: #999;
}

#notification-bar .notMessage {
  font-weight: 400;
  font-size: 0.8rem;
}

.search-bar {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.search-bar .search-input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
  padding: 10px 15%;
  font-size: 1.4rem;
  border: none;
  box-shadow: none;
  -webkit-appearance: none;
}

.search-bar .search-icon {
  display: block;
  width: 15%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  background-size: 45% auto;
  background-repeat: no-repeat !important;
  background-position: center;
  background-image: url(../images/icons/inner-icon.png);
}

.search-bar .cancel-icon {
  display: block;
  width: 15%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
  background-position: center;
  background-size: 30% auto;
  background-repeat: no-repeat;
  background-image: url(../images/icons/icon_close.png);
}

.km-drawer,
[data-role=drawer] {
  width: 70% !important;
}

#drawer .header {
  display: flex;
  background: #0a548b;
  border-bottom: 1px solid #0a548b;
  color: #ffffff !important;
  direction: rtl;
}

.grain #drawer .header {
  background: #0a548b !important;
  border-bottom: 1px solid #0a548b;
}

.dairy #drawer .header {
  background: #67a225 !important;
  border-bottom: 1px solid #67a225;
}

#drawer .header .logo {
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(../images/small-logo.png);
  width: 19%;
  position: relative;
  margin: 0px 9px;
}

.grain #drawer .header .logo {
  background-size: 65%;
}

#drawer .header .userInfo {
  display: block !important;
  width: 70%;
  color: #ffffff;
  text-align: center;
  margin: auto;
}

#drawer .header .userInfo>div {
  display: block !important;
  width: 100%;
  color: inherit;
  font-weight: bold;
  text-align: right;
}

#drawer .header .separator {
  border-bottom: 1px solid white;
}

#drawer .km-content {
  background-color: #ffffff !important;
  /*background-image: url('../images/drawer.png');*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#drawer .content {
  background-color: transparent !important;
}

#drawer #sideMenuList li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: inherit;
  color: #0a548b;
  padding: 0px !important;
  direction: rtl;
}

.dairy #drawer #sideMenuList li {
  color: #67a225;
}

#drawer ul li .icons {
  display: block;
  width: 18%;
  height: 100%;
  float: right;
  color: inherit;
  font-size: inherit;
  margin-left: 20px;
}

#drawer ul li .icons .icon {
  display: block;
  width: 20%;
  -webkit-mask-position: center;
  -webkit-mask-size: auto 100%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
  position: absolute;
  top: 25%;
}

#drawer ul li .arrow {
  display: none;
  width: 10%;
  height: 100%;
  float: left;
  color: inherit;
  font-size: inherit;
}

#drawer ul li .arrow .icon {
  display: none;
  width: 0%;
  height: 100%;
  -webkit-mask-position: 25% center;
  -webkit-mask-size: auto 40%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url(../images/icons/icon_back.png);
  background: currentColor;
}

#drawer ul li.active {
  background: #f1f3f3 !important;
}

#drawer .footer {
  display: block;
  width: 100%;
  background-color: #0a548b;
}

.dairy #drawer .footer {
  background-color: #67a225;
}

#drawer .footer .version {
  display: block;
  width: 100%;
  height: 40px;
  text-align: center;
}

#drawer .footer .version span {
  color: white;
  font-size: 80%;
  vertical-align: -webkit-baseline-middle;
}

#drawer .availableRequestContainer {
  display: flex;
  align-items: center;
  width: 70%;
  margin: 0% auto;
  font-family: SFUIDisplay-Medium;
}

.km-tablet #drawer .availableRequestContainer {
  width: 75%;
  margin: 0% auto;
}

#drawer .availableRequestContainer .hold {
  display: block;
  width: 30%;
  height: 50%;
  float: left;
  color: #0a548b;
}

.dairy #drawer .availableRequestContainer .hold {
  color: #67a225;
}

#drawer .availableRequestContainer .switchConatiner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 100%;
  font-weight: bold;
}

#drawer .availableRequestContainer .available {
  display: block;
  width: 30%;
  height: 50%;
  float: left;
  color: #0a548b;
}

.dairy #drawer .availableRequestContainer .available {
  color: #67a225;
}

#drawer .availableRequestContainer .switchConatiner.disabled {
  pointer-events: none !important;
}

#drawer .availableRequestContainer .switchConatiner .switch {
  display: block;
  width: 80%;
  height: 60%;
}

#drawer .availableRequestContainer .switchConatiner .km-switch {
  display: block;
  width: 78%;
  height: 88%;
  background: #0a548b;
  border-radius: 25px;
  position: relative;
  margin: 0px !important;
  top: 0px !important;
  left: 0px !important;
  right: 0px !important;
}

.dairy #drawer .availableRequestContainer .switchConatiner .km-switch {
  background: #67a225;
}

#drawer .availableRequestContainer .switchConatiner .km-switch-on .km-switch-container {
  background: #316f9e;
  border-radius: 25px;
}

.dairy #drawer .availableRequestContainer .switchConatiner .km-switch-on .km-switch-container {
  background: #79a35a;
}

#drawer .availableRequestContainer .switchConatiner .km-switch-off .km-switch-container {
  background: #0a548b;
  border-radius: 25px;
}

.dairy #drawer .availableRequestContainer .switchConatiner .km-switch-off .km-switch-container {
  background: #67a225;
}

#drawer .availableRequestContainer .switchConatiner .km-switch-handle {
  background: #e8e7e7;
  border-radius: 100%;
  width: 34%;
  border: none;
  height: 90% !important;
}

#drawer .availableRequestContainer .switchConatiner .km-switch-label-on {
  display: none;
}

#drawer .availableRequestContainer .switchConatiner .km-switch-label-off {
  display: none;
}

#drawer .k-switch-handle.km-switch-handle {
  margin-left: 1.6px !important;
}

.km-flat .km-switch-handle,
.km-flat .k-slider-selection,
.km-flat .km-switch-background {
  color: #ffffff;
}

.km-flat .km-switch-handle {
  padding: 0px 4px 0px 3px !important;
}

#en-drawer .header {
  display: flex;
  background: #0a548b !important;
  border-bottom: 1px solid #0a548b;
}

.dairy #en-drawer .header {
  background: #67a225 !important;
  border-bottom: 1px solid #67a225;
}

#en-drawer .header .logo {
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 19%;
  position: relative;
  margin: 0px 9px;
}

.grain #en-drawer .header .logo {
  background-size: 65% !important;
}

#en-drawer .header .userInfo {
  color: #ffffff;
  display: block !important;
  width: 70%;
  text-align: center;
  margin: auto 0;
}

#en-drawer .header .userInfo>div {
  display: block !important;
  width: 100%;
  color: inherit;
  font-weight: bold;
  text-align: center;
}

#en-drawer .header .separator {
  border-bottom: 1px solid white;
}

#en-drawer .km-content {
  background-color: #ffffff !important;
  /*background-image: url('../images/background.jpg');*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#en-drawer .content {
  background-color: transparent !important;
}

#en-drawer #sideMenuList li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: inherit;
  color: #0a548b;
  padding: 0px !important;
}

.dairy #en-drawer #sideMenuList li {
  color: #67a225;
}

#en-drawer ul li.active {
  background: #f1f3f3 !important;
}

#en-drawer ul li .icons {
  display: block;
  width: 18%;
  height: 100%;
  float: left;
  color: inherit;
  font-size: inherit;
  margin-right: 20px;
}

#en-drawer ul li .icons .icon {
  display: block;
  width: 20%;
  -webkit-mask-position: center;
  -webkit-mask-size: auto 100%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
  position: absolute;
  top: 25%;
}

#en-drawer ul li .arrow {
  display: none;
  width: 10%;
  height: 100%;
  float: left;
  color: inherit;
  font-size: inherit;
}

#en-drawer ul li .arrow .icon {
  display: none;
  width: 0%;
  height: 100%;
  -webkit-mask-position: 25% center;
  -webkit-mask-size: auto 40%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url(../images/icons/icon_back.png);
  background: currentColor;
}

#en-drawer .footer {
  display: block;
  width: 100%;
  background-color: #0a548b;
}

.dairy #en-drawer .footer {
  background-color: #67a225;
}

#en-drawer .footer .version {
  display: block;
  width: 100%;
  height: 40px;
  text-align: center;
}

#en-drawer .footer .version span {
  color: white;
  font-size: 80%;
  vertical-align: -webkit-baseline-middle;
}

#en-drawer .availableRequestContainer {
  display: flex;
  align-items: center;
  width: 70%;
  margin: 0% auto;
  font-family: SFUIDisplay-Medium;
}

.km-tablet #en-drawer .availableRequestContainer {
  width: 75%;
  margin: 0% auto;
}

#en-drawer .availableRequestContainer .hold {
  display: block;
  width: 30%;
  height: 50%;
  float: left;
  color: #0a548b;
}

.dairy #en-drawer .availableRequestContainer .hold {
  color: #67a225;
}

#en-drawer .availableRequestContainer .switchConatiner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 100%;
  font-weight: bold;
}

#en-drawer .availableRequestContainer .available {
  display: block;
  width: 30%;
  height: 50%;
  float: left;
  color: #0a548b;
}

.dairy #en-drawer .availableRequestContainer .available {
  color: #67a225;
}

#en-drawer .availableRequestContainer .switchConatiner.disabled {
  pointer-events: none !important;
}

#en-drawer .availableRequestContainer .switchConatiner .switch {
  display: block;
  width: 80%;
  height: 60%;
}

#en-drawer .availableRequestContainer .switchConatiner .km-switch {
  display: block;
  width: 78%;
  height: 88%;
  background: #0a548b;
  border-radius: 25px;
  position: relative;
  margin: 0px !important;
  top: 0px !important;
  left: 0px !important;
  right: 0px !important;
}

.dairy #en-drawer .availableRequestContainer .switchConatiner .km-switch {
  background: #67a225;
}

#en-drawer .availableRequestContainer .switchConatiner .km-switch-on .km-switch-container {
  background: #316f9e;
  border-radius: 25px;
}

.dairy #en-drawer .availableRequestContainer .switchConatiner .km-switch-on .km-switch-container {
  background: #79a35a;
}

#en-drawer .availableRequestContainer .switchConatiner .km-switch-off .km-switch-container {
  background: #0a548b;
  border-radius: 25px;
}

.dairy #en-drawer .availableRequestContainer .switchConatiner .km-switch-off .km-switch-container {
  background: #67a225;
}

#en-drawer .availableRequestContainer .switchConatiner .km-switch-handle {
  background: #e8e7e7;
  border-radius: 100%;
  width: 34%;
  border: none;
  height: 90% !important;
}

#en-drawer .k-switch-handle.km-switch-handle {
  margin-left: 1.6px !important;
}

#en-drawer .availableRequestContainer .switchConatiner .km-switch-label-on {
  display: none;
}

#en-drawer .availableRequestContainer .switchConatiner .km-switch-label-off {
  display: none;
}

.km-flat .km-switch-handle,
.km-flat .k-slider-selection,
.km-flat .km-switch-background {
  color: #ffffff;
}

.card {
  display: block;
  width: 100%;
  margin: 0px auto;
  box-shadow: 0px 5px 20px 0px rgba(218, 218, 218, 0.64);
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #d8d7d7 !important;
}

.card .card-header {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 40px;
  padding: 0px;
  font-weight: bold;
  background: #0a548b;
  color: white;
}

.dairy .card .card-header {
  background: #67a225;
}

.card .card-header .card-title {
  display: table-cell;
  vertical-align: middle;
  height: inherit;
  padding: 10px;
}

.card .card-header .card-actions {
  display: table-cell;
  vertical-align: middle;
  width: 40px;
  height: inherit;
}

.card .card-header .card-actions .card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: inherit;
  border-radius: 0px !important;
  position: relative;
}

.card .card-header .card-actions .card-action:before {
  display: block;
  height: auto;
  width: 1px;
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0px;
  background: #0a548b;
  content: "";
}

.dairy .card .card-header .card-actions .card-action:before {
  background: #67a225;
}

.rtl .card .card-header .card-actions .card-action:before {
  left: auto;
  right: 0px;
}

.card .card-content {
  display: block;
  width: 100%;
  padding: 10px;
  background: white;
}

.error-label {
  background: #dc6a62;
  color: white;
  display: block;
  width: 100%;
  text-align: center !important;
  margin-bottom: 8px;
  border-radius: 5px;
}

.warning-label {
  background: #ff8935;
  color: white;
  display: block;
  width: 100%;
  text-align: center !important;
  margin-bottom: 8px;
  border-radius: 5px;
  font-size: 13px;
    padding: 5px;
}
#loginView .container {
  background: #ffffff;
  background-position: center 0;
  background-repeat: repeat;
  background-size: cover;
  border: 1px solid #0a548b;
  /*background-image: url(../images/background.jpg);*/
}

.grain #loginView .container {
  border: 1px solid #0a548b;
}

.dairy #loginView .container {
  border: 1px solid #67a225;
}

#loginView .mySlides {
  display: none;
}

#loginView .img {
  vertical-align: middle;
}

#loginView #img1 {
  background: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.alpha #loginView #img1 {
  background-size: contain !important;
}

#loginView #img2 {
  background: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 35%;
  background-image: url(../images/Touch.png);
}

#loginView #img3 {
  background: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 35%;
  background-image: url(../images/slip.png);
}

#loginView #img4 {
  background: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 35%;
  background-image: url(../images/Profile.png);
}

/* Slideshow container */
#loginView .slideshow-container {
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
#loginView .prev,
#loginView .next {
  cursor: pointer;
  position: absolute;
  top: 28%;
  width: auto;
  padding: 16px;
  right: 90%;
  color: #d6d5d5;
  font-weight: bold;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
#loginView .next {
  right: 0;
  left: 90%;
  border-radius: 3px 0 0 3px;
}

/* Caption text */
#loginView .text {
  color: #6e98b9;
  position: absolute;
  bottom: 0px;
  top: 93%;
  width: 100%;
  text-align: center;
}

#loginView .dot {
  cursor: pointer;
  margin: 0 2px;
  background-color: #6e98b9;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

#loginView .active,
#loginView .dot:hover {
  background-color: #d6d5d5;
}

#loginView .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.5s;
  animation-name: fade;
  animation-duration: 0.5s;
}

.link {
  color: #0645AD;
  text-decoration: underline;
}

#modal_AcceptTerms .btn-container {
  text-align: center;
  display: flex;
}

#modal_AcceptTerms .modalHeader {
  background-color: #0a548b !important;
  color: #ffffff;
}

#modal_AcceptTerms #decline-btn {
  color: #0a548b !important;
  background-color: transparent;
}

.dairy #modal_AcceptTerms .modalHeader {
  background-color: #67a225 !important;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

.v-b {
  width: 50%;
}

.km-flat .km-buttongroup {
  border-radius: 15px !important;
}

.cell {
  font-size: smaller;
  margin: 5px 10px;
  text-align: center !important;
}

.cell-1 {
  width: 15%;
}

.cell-2 {
  width: 25%;
}

.cell-3 {
  width: 35%;
}

#loginView .sublogo {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  top: 0%;
}

#loginView .inputContainer.first {
  display: block;
  height: 15%;
  color: #0a548b;
}

#loginView .inputContainer.first {
  display: flex;
}

.grain #loginView .inputContainer.first {
  color: #0a548b;
}

.dairy #loginView .inputContainer.first {
  color: #67a225;
}

#loginView .inputContainer.second {
  display: block;
  height: 8%;
  color: #0a548b;
}

.grain #loginView .inputContainer.second {
  color: #0a548b;
}

.dairy #loginView .inputContainer.second {
  color: #67a225;
}

#loginView .inputContainer {
  display: block;
  height: auto;
  box-shadow: none;
  outline: none;
}

#loginView .inputContainer .subWhiteSpace {
  display: block;
  width: 100%;
  height: 15%;
}

#loginView .inputContainer .input {
  display: block;
  width: 85%;
  height: 45px;
  margin: auto auto;
  border-radius: 30px;
  font-size: inherit;
  position: relative;
  box-shadow: none;
  outline: none;
}

#loginView .inputContainer .input input {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  background: #f7f8f3;
  transition: all 0.2s ease 2s;
  -webkit-transition: all 0.2s ease;
  color: #151719;
  box-shadow: none;
  outline: none;
}

#loginView .inputContainer .input .placeholder {
  display: flex;
  width: 90px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: auto;
  left: 0px;
  margin: auto;
  z-index: 9999;
  align-items: center;
  color: #151719;
  padding: 0px 10px;
  pointer-events: none;
}

#loginView .inputContainer .input.blue-border input {
  padding-right: 90px !important;
}

#loginView .inputContainer .input input:focus {
  border: 2px solid #0a548b !important;
}

.dairy #loginView .inputContainer .input input:focus {
  border: 2px solid #67a225 !important;
}

#loginView .inputContainer .input.blue-border .placeholder {
  left: auto;
  right: 5px;
}

#loginView .inputContainer .input input::-webkit-input-placeholder {
  color: #151719;
}

#loginView .btnContainer {
  display: block;
  width: 100%;
  /* height: 7%; */
}

#loginView .btnContainer .btnLogin {
  display: block;
  width: 64%;
  height: 96%;
  margin: 6% auto;
  border-radius: 30px;
  color: #ffffff;
  background: #0a548b;
}

.grain #loginView .btnContainer .btnLogin {
  background: #0a548b;
  height: 2.5rem;
}

.dairy #loginView .btnContainer .btnLogin {
  background: #67a225;
}

#loginView .btnContainer .btnLogin.disabled {
  pointer-events: none;
}

#loginView input {
  margin: 0px;
  background: #f7f8f3;
  width: 100%;
  border-radius: 5px;
}

#loginView .btnContainer .btnLogin .btnIcon {
  display: block;
  width: 40%;
  height: 100%;
  margin: 0% auto;
  float: left;
  color: #0a548b;
  background-position: 30% 50%;
  background-repeat: no-repeat;
  background-size: 20% auto;
  background-image: url(../assets/icon_loginArrow.png);
}

.dairy #loginView .btnContainer .btnLogin .btnIcon {
  color: #67a225;
}

#loginView .btnContainer .btnLogin:active {
  transform: scale(0.97);
  -webkit-transform: scale(0.97);
}

#loginView .btnContainer .btnLogin#btnGoogle {
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 50%;
  background-image: url('../images/icons/icon_google.png');
}
#loginView .btnContainer .btnLogin#btnApple {
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 50%;
  background-image: url('../images/icons/icon_apple.png');
  background-color: #000 !important;
}
#loginView .btnContainer .btnLogin#btnTouch {
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 50%;
  background-image: url('../images/icons/icon_fingerprint.png');
}
.login-social {
  margin-bottom: 1rem;
}
.login-social .btnContainer {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 100% !important;
  margin: 0px !important;
}
.login-social .btnContainer .btnLogin {
  width: 100% !important;
  height: 100% !important;
  border-radius: 100% !important;
  margin: 0px !important;
}
.login-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.btn-combo {
  display: flex !important;
  align-items: center;
  justify-content: stretch;
  gap: 0.5rem;
  margin: 0px 7.5% !important;
  width: auto !important;
}
.btn-combo > .btnLogin {
  flex: 1 !important;
  width: auto !important;
}
.btn-combo .btnContainer.btn-touch {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 100% !important;
  margin: 0px !important;
}
.btn-combo .btnContainer.btn-touch .btnLogin {
  width: 100% !important;
  height: 2.5rem !important;
  border-radius: 80% !important;
  margin: 0px !important;
}

#loginView .whiteSpaceContainer {
  display: block;
  width: 100%;
  height: 18%;
  margin: 0% auto;
}

#loginView .footerContainer {
  display: block;
  width: 70%;
  height: 3%;
  margin: 0% auto;
  color: #0a548b;
}

.dairy #loginView .footerContainer {
  color: #67a225;
}

#loginView .footerContainer .forgetMyPasswordContainer {
  display: block;
  width: 46%;
  height: 100%;
  margin: 0% auto;
  float: left;
}

#loginView .footerContainer .forgetMyPasswordContainer:active {
  transform: scale(0.97);
  -webkit-transform: scale(0.97);
}

#loginView .footerContainer .footerSeperatorContainer {
  display: block;
  width: 2%;
  height: 60%;
  margin: 0% auto;
  float: left;
  border-right: 2px solid #cccccc;
}

#loginView .footerContainer .registerAccountContainer {
  display: block;
  width: 52%;
  height: 100%;
  margin: 0% auto;
  float: left;
}

#loginView .footerContainer .registerAccountContainer:active {
  transform: scale(0.97);
  -webkit-transform: scale(0.97);
}

#loginView .btnContainer .btnGuest:active {
  transform: scale(0.97);
  -webkit-transform: scale(0.97);
}

#managerView .container {
  background-color: #ffffff;
}

#managerView .generalbuttons {
  display: block;
  background: #0a548b;
  border: none;
  box-shadow: 0px 0px 4px #000;
  border-radius: 2px;
  color: #ffffff;
  height: 40px;
  font-weight: bold;
  text-align: center;
  padding: 2%;
}

.dairy #managerView .generalbuttons {
  background: #67a225;
}

#managerView .generalbuttons.km-button.km-state-active {
  -webkit-transition: -webkit-transform 0s !important;
  -webkit-transform: scale(0.96);
}

#managerView .managerbuttons {
  position: absolute;
  top: 45%;
  left: 25%;
  right: 25%;
}

#homeView .content {
  background-color: #ffffff !important;
  color: #0a548b;
}

#homeView .time-exceed {
  color: #dc6a62;
}

#homeView .time-missing {
  color: #0a8b4e;
}

.dairy #homeView .content {
  color: #67a225;
}

#homeView .logo-bar {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16%;
}

#homeView .content-top {
  background: #ffffff;
  padding: 10px;
}

#homeView .content-mid {
  background: #ffffff;
  align-items: center;
  border-bottom: 10px solid #f1f3f3;
}

#homeView .row {
  border-top: 1px solid #d8d7d7;
}

#homeView .row.first {
  padding: 10px 0px;
}

#homeView .content-bottom {
  background: #ffffff;
  border-bottom: 10px solid #f1f3f3;
}
#dateOfApplying{
  background: #def1ff !important;
    border-bottom: none!important;
    color: #0f5183;
    font-weight: bold;
}
#setupView .barcode-img {
  background-image: url(../images/QR-Code.png);
  /* width: 53px;  */
  height: 36px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#setupView #connected-img {
  background-image: url(../images/Connected.png);
  /* width: 53px;  */
  height: 115px;
  display: block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#setupView .btn-save {
  font-size: 25px;
  height: 50px;
  margin-bottom: 10px;
}
#homeView .user-img {
  background-size: cover;
  background-position: center;
  background-image: url(../images/user.png);
  background-repeat: no-repeat;
  border: 1px solid;
  border-color: #d8d7d7 !important;
  margin: 0 auto;
}

#homeView .user-info {
  margin: 0 auto;
  text-align: center;
  line-height: 1;
  padding: 5px;
}

#homeView .user-info .name {
  font-weight: bold;
  margin-bottom: 5px;
}

#homeView .user-info .job {
  color: #b1b1b1;
}

#homeView .clock {
  width: 100%;
  align-items: center;
  padding: 0px 10px;
}

#homeView .clock .title {
  width: 100%;
  background: #ffffff;
  font-weight: 700;
  display: flex;
  color: #0a548b;
  vertical-align: middle;
  padding-top: inherit;
  align-items: center;
}

#homeView .clock-icon {
  -webkit-mask-image: url(../images/icons/timer.png);
  background: #0a548b !important;
}

#homeView .time-icon {
  -webkit-mask-image: url(../images/icons/timer.png);
  background: #0a548b !important;
  -webkit-mask-size: 60% !important;
}

#homeView .time-label {
  text-align: start;
  width: 50%;
  display: grid;
}

#homeView .btn-general {
  width: 50%;
}

#homeView .vac {
  width: 50%;
  align-items: center;
  padding: 0px 10px;
}

#homeView .vac .vac-title {
  text-align: center;
  font-weight: bold;
  color: #151719;
  text-transform: uppercase;
}

#homeView .vac.vac-annual {
  border-right: 1.5px solid #e8e7e7;
}

#homeView .vac.vac-annual .icon {
  -webkit-mask-image: url(../images/icons/vacation.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
  width: 33%;
}

#homeView .vac.vac-sick .icon {
  -webkit-mask-image: url(../images/icons/sick.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 67%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
  width: 33%;
  margin-bottom: 0px;
}

#homeView .label {
  text-align: center;
  margin: auto auto;
}

#homeView .sub-label {
  margin: 2px;
  color: #b1b1b1;
}

#homeView .main-label {
  font-weight: 900;
  display: flex;
  margin: auto 0%;
  align-content: center;
  text-align: center;
  width: 100%;
}

#homeView .num-val {
  font-weight: 100;
}

#homeView .list-header {
  width: 100%;
  background: #ffffff;
  font-weight: 700;
  display: flex;
  padding: 0px 1.1em;
  color: #0a548b;
  vertical-align: middle;
  padding-top: inherit;
  align-items: center;
}

.dairy #homeView .list-header {
  color: #67a225;
}

#homeView .content-bottom .list-header .more {
  display: flex;
  font-size: 10px;
  width: 25%;
  align-items: center;
  justify-content: center;
}

#homeView .content-bottom .list-header .more.clicked {
  color: #151719;
}

#homeView ul li {
  border: none;
  background: #ffffff !important;
  padding: 0px;
  margin: 0px !important;
  display: flex;
  width: 100%;
}

#homeView ul li .flex {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  vertical-align: middle;
}

#homeView ul li.no-border hr {
  display: none !important;
}

#homeView ul li .main-content {
  width: 100%;
  color: #151719;
}

#homeView .icon {
  width: 10%;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  font-size: inherit;
  background: #b1b1b1;
  border-radius: 100%;
}

#homeView .announc-icon:not(.l-h) {
  background: #0a548b;
  border-radius: 0;
  -webkit-mask-size: 65%;
}

.dairy #homeView .announc-icon:not(.l-h) {
  background: #67a225;
}

#homeView .upcoming-icon {
  background: #0a548b;
  border-radius: 0;
  -webkit-mask-size: 65%;
}

#homeView .absent-icon {
  border-radius: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #d8d7d7;
  margin-right: 0.5em;
  margin-left: 0px;
}

#homeView .list-header .announc-icon {
  background: #0a548b;
  -webkit-mask-image: url(../images/icons/announc.png);
}

.dairy #homeView .list-header .announc-icon {
  background: #67a225;
}

#homeView .list-header .upcoming-icon {
  background: #0a548b;
  -webkit-mask-image: url(../images/icons/event.png);
  -webkit-mask-size: 80%;
}

.dairy #homeView .list-header .upcoming-icon {
  background: #67a225;
}

#homeView .list-header .absent-icon {
  background: #0a548b;
  -webkit-mask-image: url(../images/icons/icon_profile.png);
  -webkit-mask-size: 60% !important;
}

#homeView ul li .li-title {
  line-height: 1.6;
}

#homeView hr {
  border-color: #e8e7e7 !important;
  margin-bottom: 0px !important;
}

#homeView .row .mid-footer {
  width: 100%;
  text-transform: uppercase;
  display: flex;
  padding: 2.5px 10px 2.5px 10px;
  align-items: center;
  border: 1px solid #0a548b;
  margin: 6px;
  border-radius: 5px;
  text-decoration: none;
  justify-content: center;
}

.dairy #homeView .row .mid-footer {
  border: 1px solid #67a225;
}

#homeView .row .mid-footer:active {
  transform: scale(0.97);
  -webkit-transform: scale(0.97);
  border: 1px solid #0a548b;
}

.dairy #homeView .row .mid-footer:active {
  border: 1px solid #67a225;
}

#homeView .row .mid-footer .plus {
  -webkit-mask-image: url(../images/icons/plus.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
  width: 12%;
}

#profileView hr {
  margin: 5px auto;
  margin-bottom: 0px;
}

#profileView .header .title {
  font-weight: 100;
  font-size: 0.8rem;
}

#profileView .content {
  background-color: #f1f3f3 !important;
  color: #0a548b;
}

.dairy #profileView .content {
  color: #67a225;
}

#profileView #buttongroup {
  margin: 0px;
  display: flex;
  background: transparent !important;
  text-align: center;
  list-style: none;
  border: none;
}

#profileView #buttongroup #btn-group {
  display: block;
  background: transparent !important;
  border: none;
  padding: 0px 5px;
  text-align: center;
  background: rgba(196, 209, 228, 0.54117647);
  width: 50%;
  color: rgba(196, 209, 228, 0.54117647);
}

#profileView #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #032d56;
  color: #ffffff;
}

.dairy #profileView #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #158301;
}

#profileView #buttongroup #btn-group.km-state-active .personal-icon,
#profileView #buttongroup #btn-group.km-state-active .emergency-icon {
  background: #ffffff !important;
}

#profileView #buttongroup #btn-group * {
  margin: auto;
  display: block;
}

#profileView .personal-icon {
  width: 25%;
  -webkit-mask-image: url(../images/icons/personal-in.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 43%;
  -webkit-mask-repeat: no-repeat;
  background: rgba(196, 209, 228, 0.54117647) !important;
  font-size: inherit;
  padding: 10px;
}

#profileView .emergency-icon {
  width: 25%;
  -webkit-mask-image: url(../images/icons/ambulance.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 43%;
  -webkit-mask-repeat: no-repeat;
  background: rgba(196, 209, 228, 0.54117647) !important;
  font-size: inherit;
  padding: 10px;
}

#profileView .sub-title {
  color: #8c8888;
  width: 100% !important;
  margin-bottom: 2px;
}

#profileView li {
  padding: 0.5em 0.15em;
  background: #ffffff;
}

#profileView .sub-value {
  color: #151719;
  width: 100% !important;
  padding: 0px !important;
}

#profileView .group-header {
  color: #0a548b;
  padding-left: 0px !important;
  padding: 0.5em 0.15em;
  display: -webkit-inline-box;
  margin-left: 1.5em;
}

.dairy #profileView .group-header {
  color: #67a225;
}

#profileView .user-img {
  background-size: 89%;
  background-position: 50% 50%;
  /*background-image: url(../images/user.png);*/
  background-repeat: no-repeat;
  border: 1px solid;
  border-color: #d8d7d7 !important;
  margin: 0 auto;
}

#profileView .user-img :hover {
  border: 4px solid gray;
}

#profileView .user-info {
  margin: 0 auto;
  text-align: center;
  padding: 0px;
  color: #ffffff;
}

#profileView .user-info .name {
  margin-top: 5px !important;
}

#profileView .user-info .job {
  margin-top: 0px !important;
}

#profileView .card {
  border-radius: 0px;
  border: none !important;
  box-shadow: none !important;
  background: #ffffff;
}

#profileView .info-icon {
  width: 25%;
  -webkit-mask-image: url(../images/icons/personal.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 75%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b !important;
  font-size: inherit;
  padding: 10px;
}

.dairy #profileView .info-icon {
  background: #67a225 !important;
}

#profileView .address-icon {
  width: 25%;
  -webkit-mask-image: url(../images/icons/address.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b !important;
  font-size: inherit;
  padding: 3px;
  margin: -1px 4px;
}

.dairy #profileView .address-icon {
  background: #67a225 !important;
}

#profileView .salary-icon {
  width: 25%;
  -webkit-mask-image: url(../images/icons/emp-salary.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b !important;
  font-size: inherit;
  padding: 8px;
  margin: 0 4px;
}

.dairy #profileView .salary-icon {
  background: #67a225 !important;
}

#announcements .arrowButton {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  display: block !important;
  background-color: #ffffff !important;
  border: none !important;
  padding: 1.3em 0.6em !important;
}

#announcements .content .km-list li {
  color: #0a548b !important;
  background: #ffffff;
  border-left: 2px solid #0a548b !important;
  margin: 8px;
  border-right: 2px solid #0a548b !important;
  border: 2px solid #0a548b !important;
}

.dairy #announcements .content .km-list li {
  border-right: 2px solid #67a225 !important;
  border-left: 2px solid #67a225 !important;
  color: #67a225 !important;
}

#announcements ul {
  border-top: 1px solid #d8d7d7;
  background: #ffffff;
  border-top: 1px solid #b1b1b1;
}

#announcements li {
  border: none;
  margin: 0px 10px;
  border-bottom: 1px solid #d8d7d7;
}

#announcements li.no-border {
  border-bottom: none !important;
}

#announcements li .edit-icon {
  width: 35%;
  height: 45px;
  -webkit-mask-image: url(../images/icons/Edit-icon.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 45%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
}
#announcements li .announc-icon {
  width: 30%;
  -webkit-mask-image: url(../images/icons/announc.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 35px;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
}

#announcements li .li-title {
  font-weight: bold;
}

#announcements .main-announc {
  width: 90% !important;
}

#announcements .footer {
  height: auto !important;
}

#announcementDetails .sub-value.w-100 {
  width: 100% !important;
  padding: 5px 0px;
}

#approvalView .sub-value.w-100 {
  width: 100% !important;
  padding: 5px 0px;
}
#announcementDetails .sub-title {
  font-weight: bold;
  color: #8c8888;
}

#announcementDetails .sub-value.date {
  font-weight: 900;
  color: #0a548b;
}

.dairy #announcementDetails .sub-value.date {
  color: #67a225;
}
#vacationView .sub-value-attach {
  width:60% !important;
  font-size: 15px !important;
  color: #504f4f !important;
  font-weight: bold !important;
}
#announcementDetails .sub-value {
  padding: 0px;
  font-weight: bold;
}

#approvalView .sub-value {
  padding: 0px;
  font-weight: bold;
}
#balanceView .content {
  background-color: #f1f3f3 !important;
  color: #0a548b;
}

.dairy #balanceView .content {
  color: #67a225;
}

#balanceView .content-top {
  background: #ffffff;
}

#balanceView .content-mid {
  padding: 0px;
  align-items: center;
  padding-bottom: 0px;
  margin-top: 10px;
}

#balanceView .row {
  border-bottom: 1px solid #e8e7e7 !important;
}

#balanceView .row.first {
  padding-top: 10px;
  padding-bottom: 10px;
  background: #ffffff !important;
}

#balanceView .row .mid-footer {
  width: 100%;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  margin: 10px;
  background: #0a548b;
  border-radius: 5px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  text-decoration: none;
  color: #ffffff;
  font-weight: 900;
  padding: 2.5px 10px 2.5px 10px;
}

.dairy #balanceView .row .mid-footer {
  background: #67a225;
}

#balanceView .row .mid-footer .plus {
  -webkit-mask-image: url(../images/icons/plus.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
  width: 12%;
}

#balanceView .row .mid-footer:active {
  transform: scale(0.97);
  -webkit-transform: scale(0.97);
  border: 1px solid #0a548b;
}

.dairy #balanceView .row .mid-footer:active {
  border: 1px solid #67a225;
}

#balanceView .off-icon {
  -webkit-mask-image: url(../images/icons/timeoff.png);
  display: block;
  -webkit-mask-size: 50%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b;
  font-size: inherit;
  width: 5%;
  height: 25px;
  -webkit-mask-position: center;
  padding: 15px;
}

.dairy #balanceView .off-icon {
  background: #67a225;
}

#balanceView .clock-icon {
  -webkit-mask-image: url(../images/icons/clock.png);
  display: block;
  -webkit-mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b;
  font-size: inherit;
  width: 5%;
  height: 25px;
  -webkit-mask-position: center;
  padding: 15px;
}

.dairy #balanceView .clock-icon {
  background: #67a225;
}

#balanceView .content-bottom {
  background: #f1f3f3;
  margin-top: 10px;
}

#balanceView .vac {
  width: 48%;
  align-items: center;
}

#balanceView .vac .vac-title {
  text-align: center;
  font-weight: bold;
  color: #151719;
}

#balanceView .vac.vac-annual {
  border-right: 1.5px solid #e8e7e7;
}

#balanceView .vac.vac-annual .icon {
  -webkit-mask-image: url(../images/icons/vacation.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
  width: 33%;
  margin: 5px;
}

#balanceView .vac.vac-sick .icon {
  -webkit-mask-image: url(../images/icons/sick.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 62%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
  width: 33%;
  margin: 5px;
  margin-bottom: 0px;
}

#balanceView .label {
  text-align: center;
  margin: auto auto;
}

#balanceView .sub-label {
  margin: 2px;
  color: #649aaf;
}

.dairy #balanceView .sub-label {
  color: #67a225;
}

#balanceView .main-label {
  font-weight: 900;
  display: flex;
  margin: auto 0%;
  align-content: center;
  text-align: center;
  width: 89%;
}

#balanceView .num-val {
  font-weight: 100;
}

#balanceView .list-header {
  width: 100%;
  background: #ffffff;
  color: #0a548b;
  display: flex;
  vertical-align: middle;
  padding: 6px 10px;
  align-items: center;
}

.dairy #balanceView .list-header {
  color: #67a225;
}

#balanceView .row .mid-footer:active {
  background: #f1f3f3;
  border: 1px solid #0a548b !important;
}

.dairy #balanceView .row .mid-footer:active {
  border: 1px solid #67a225 !important;
}

#balanceView ul {
  /*border-top: 1px solid @light_border;*/
  border-bottom: 1px solid #d8d7d7;
}

#balanceView ul li {
  border: none;
  background: #ffffff !important;
  padding: 10px 0px;
  padding-bottom: 0px;
}

#balanceView ul li.no-border {
  border-bottom: none !important;
}

#balanceView ul li .type-icon-u {
  width: 15%;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 55%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
}

#balanceView ul li .main-content {
  width: 100%;
}

#balanceView ul li .type-icon {
  width: 15%;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 55%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
}

#balanceView ul li .li-title {
  font-weight: bold;
  line-height: 1.6;
}

#balanceView .sub-title {
  color: #649aaf;
  width: 100% !important;
}
#balanceDetails .sub-titleRed {
  color: red;
  width: 100% !important;
}

#balanceDetails .sub-titleGreen {
  color: green;
  width: 100% !important;
}
.dairy #balanceView .sub-title {
  color: #67a225;
}

#balanceView hr {
  border-color: #e8e7e7 !important;
  margin-bottom: 0px !important;
}

#balanceDetails .header .navbar {
  height: 60%;
}

#balanceDetails hr {
  border-color: #e8e7e7 !important;
  margin-bottom: 0px !important;
}

#balanceDetails .content {
  background-color: #f1f3f3 !important;
  color: #0a548b;
}

.dairy #balanceDetails .content {
  color: #67a225;
}

#balanceDetails .row {
  border-bottom: 1px solid #d8d7d7 !important;
}

#balanceDetails ul {
  border-top: 1px solid #d8d7d7;
  border-bottom: 1px solid #d8d7d7;
}

#balanceDetails .header ul {
  border: none;
}

#balanceDetails .header ul li {
  background: #0a548b !important;
  color: #ffffff;
  display: block;
  margin: auto;
  align-content: center;
  align-items: center;
  text-align: center;
  padding: 0.5em 0.7em;
}

.dairy #balanceDetails .header ul li {
  background: #67a225 !important;
}

#balanceDetails .header ul li .flex {
  background: #0a548b !important;
  color: #ffffff;
  display: flex !important;
  margin: auto;
  align-content: center;
  align-items: center;
  text-align: center;
}

.dairy #balanceDetails .header ul li .flex {
  background: #67a225 !important;
}

#balanceDetails .header ul li .begin {
  font-size: 0.9rem;
  margin: 0px 0px 0px 10%;
  width: 75%;
}

#balanceDetails .header ul li .li-title {
  width: 85%;
  margin: auto;
}

#balanceDetails .footer ul {
  border: none;
}

#balanceDetails .footer ul li {
  background: #0a548b !important;
  color: #ffffff;
  display: flex !important;
  margin: auto;
  align-content: center;
  align-items: center;
  text-align: center;
}

.dairy #balanceDetails .footer ul li {
  background: #67a225 !important;
}

#balanceDetails .footer ul li .total {
  font-size: 0.9rem;
  margin: 0px 0px 0px 10%;
  width: 75%;
}

#balanceDetails .footer ul li .li-title {
  width: 85%;
  margin: auto;
}

#balanceDetails ul li {
  border: none;
  background: #ffffff !important;
  padding: 10px 0px;
  padding-bottom: 0px;
}

#balanceDetails ul li .li-title {
  font-weight: bold;
  line-height: 1.6;
}

#balanceDetails ul li.no-border {
  border-bottom: none !important;
}

#balanceDetails ul li .type-icon {
  width: 15%;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 55%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
}

#balanceDetails .sub-title {
  color: #649aaf;
  width: 100% !important;
}

#balanceDetails .sub-titleRed {
  color: red;
  width: 100% !important;
}

#balanceDetails .sub-titleGreen {
  color: green;
  width: 100% !important;
}

#balanceDetails .header ul li .main-content {
  width: 50%;
}

#balanceDetails .footer ul li .main-content {
  width: 50%;
}

#balanceDetails ul li .main-content {
  width: 100%;
}
 
#myTeam .arrowButton {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  display: block !important;
  background-color: #ffffff !important;
  border: none !important;
  padding: 1.3em 0.6em !important;
}

#myTeam .content .km-list li {
  color: #0a548b !important;
  margin: 8px;
  display: flex;
}

#myTeam .content .km-list li.all:active {
  transform: scale(0.97);
  -webkit-transform: scale(0.97);
  background: #f7f9ff !important;
}
 
#myTeam ul {
  background: #ffffff;
}

#myTeam li {
  border: none;
  margin: 0px 10px;
  border-bottom: 1px solid #d8d7d7;
}

#myTeam ul.title li {
  background: #f1f3f3 !important;
  border: none !important;
}

#myTeam ul.title {
  border: none !important;
}

#myTeam li.no-border {
  border-bottom: none !important;
}

#myTeam li .announc-icon {
  width: 20%;
  -webkit-mask-image: url(../images/icons/icon_back.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 35%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
}

#myTeam li .li-title {
  font-weight: bold;
  width: 40%;
}

#myTeam li .sub-label {
  font-weight: bold;
  width: 40%;
  text-align: center;
}

 


#slipList .arrowButton {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  display: block !important;
  background-color: #ffffff !important;
  border: none !important;
  padding: 1.3em 0.6em !important;
}

#slipList .content .km-list li {
  color: #0a548b !important;
  margin: 8px;
  display: flex;
}

.dairy #slipList .content .km-list li {
  color: #67a225 !important;
}

#slipList .content .km-list li.all:active {
  transform: scale(0.97);
  -webkit-transform: scale(0.97);
  background: #f7f9ff !important;
}

.dairy #slipList .content .km-list li.all:active {
  background: #f7f9ff !important;
}

#slipList ul {
  background: #ffffff;
}

#slipList li {
  border: none;
  margin: 0px 10px;
  border-bottom: 1px solid #d8d7d7;
}

#slipList ul.title li {
  background: #f1f3f3 !important;
  border: none !important;
}

#slipList ul.title {
  border: none !important;
}

#slipList li.no-border {
  border-bottom: none !important;
}

#slipList li .announc-icon {
  width: 20%;
  -webkit-mask-image: url(../images/icons/icon_back.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 35%;
  -webkit-mask-repeat: no-repeat;
  background: currentColor;
  font-size: inherit;
}

#slipList li .li-title {
  font-weight: bold;
  width: 40%;
}

#slipList li .sub-label {
  font-weight: bold;
  width: 40%;
  text-align: center;
}

#slipView .control-value {
  width: 50%;
}

#slipView .content-header {
  background-color: #0a548b;
}

.dairy #slipView .content-header {
  background-color: #67a225;
}

#slipView .salary-rect {
  position: relative !important;
  color: white;
  background: #032d56;
  padding: 8px;
  width: 80%;
  text-align: center;
  align-content: center;
  margin: auto;
  top: 10px;
  border-radius: 2px;
}

.dairy #slipView .salary-rect {
  background: #158301;
}

#slipView .salary-rect .salary {
  text-align: center;
}

#slipView #period {
  color: #ffffff;
  background: #0a548b;
  border: none;
  padding: 0px !important;
  width: auto;
}

.dairy #slipView #period {
  background: #67a225;
}

#slipView .small-label {
  position: relative;
  top: 10px;
  color: #d3e7f9;
  width: 100%;
  text-align: center;
  align-content: center;
}

.dairy #slipView .small-label {
  color: #d5f9d3;
}

#slipView .content-mid {
  background: #ffffff;
}

#slipView .tabs-button {
  width: 100%;
}

#slipView #buttongroup {
  display: flex;
  background: transparent !important;
  text-align: center;
  list-style: none;
  border: none;
  width: 100%;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin: 0px !important;
}

#slipView #buttongroup #btn-group {
  display: inline-grid;
  background: transparent !important;
  border: none;
  padding: 0px;
  text-align: center;
  width: 25%;
  color: rgba(196, 209, 228, 0.54117647);
  justify-content: center;
  align-items: center;
}

#slipView #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #032d56;
  color: #ffffff;
}

.dairy #slipView #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #158301;
}

#slipView #buttongroup #btn-group.km-state-active .total-icon,
#slipView #buttongroup #btn-group.km-state-active .earn-icon,
#slipView #buttongroup #btn-group.km-state-active .tax-icon,
#slipView #buttongroup #btn-group.km-state-active .deduct-icon {
  background: #ffffff !important;
}

#slipView .icon {
  width: 100%;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 30% auto;
  -webkit-mask-repeat: no-repeat;
  background: rgba(196, 209, 228, 0.54117647) !important;
  font-size: inherit;
}

#slipView .total-icon {
  -webkit-mask-image: url(../images/icons/totals.png);
}

#slipView .earn-icon {
  -webkit-mask-image: url(../images/icons/earn.png);
}

#slipView .tax-icon {
  -webkit-mask-image: url(../images/icons/tax.png);
}

#slipView .deduct-icon {
  -webkit-mask-image: url(../images/icons/deduct.png);
}

#slipView .list-header {
  width: 100%;
  background: #ffffff;
  color: #0a548b;
  display: flex;
  vertical-align: middle;
  font-weight: 600;
  padding: 10px 0px 6px 0px;
}

.dairy #slipView .list-header {
  color: #67a225;
}

#slipView .list-footer {
  width: 100%;
  background: #ffffff;
  color: #151719;
  display: flex;
  vertical-align: middle;
  font-weight: 900;
  padding: 10px 0px 6px 0px;
}

#slipView .footer-note,
#slipList .footer-note ,
#myTeam .footer-note {
  width: 100%;
  background: #ffffff;
  color: #b1b1b1;
  vertical-align: middle;
  padding: 10px 0px 6px 0px;
}

#slipView ul {
  border-top: 1px solid #d8d7d7;
}

#slipView ul li {
  border: none;
  background: #ffffff !important;
  padding: 10px 0;
  border-bottom: 1px solid #d8d7d7;
}

#slipView ul li.no-border {
  border-bottom: none !important;
}

#slipView ul li .main-content {
  width: 100%;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #8c8888;
}

#slipView ul li .li-title {
  width: 100%;
}

#slipView .sub-title {
  width: 70% !important;
  padding: 0 7px;
}

#approvalsList .tabs-button {
  width: 100%;
  display: flex;
}

#approvalsList #buttongroup {
  display: flex;
  background: transparent !important;
  text-align: center;
  list-style: none;
  border: none;
  width: 100%;
  align-items: flex-end;
  margin: 0px !important;
}

#approvalsList #buttongroup #btn-group {
  display: inline-grid;
  background: transparent !important;
  border: none;
  padding: 0px;
  text-align: center;
  width: 35%;
  color: rgba(196, 209, 228, 0.54117647);
  justify-content: center;
  align-items: center;
}

#approvalsList #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #032d56;
  color: #ffffff;
}

.dairy #approvalsList #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #158301;
}

#approvalsList #buttongroup #btn-group.km-state-active .first-icon,
#approvalsList #buttongroup #btn-group.km-state-active .second-icon,
#approvalsList #buttongroup #btn-group.km-state-active .third-icon {
  background: #ffffff !important;
}

#approvalsList #buttongroup #btn-group * {
  margin: auto;
  display: block;
  font-weight: 600;
}

#approvalsList ul.data li {
  background: #ffffff;
  padding: 0px !important;
  border: 0px !important;
  font-weight: 800;
}

#approvalsList .flexo {
  display: flex;
  vertical-align: middle;
  align-items: center;
}

.dairy #approvalsList .flexo {
  display: flex;
  vertical-align: top;
  align-items: flex-start;
}

#approvalsList ul.data li .icon {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #d8d7d7;
  border-radius: 100%;
}

#approvalsList ul li .main-content {
  width: 100%;
  display: inline-table;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #8c8888;
  line-height: 1.8;
}

#approvalsList ul li .li-name {
  color: #151719;
  text-transform: capitalize;
  margin: 0 10px;
}

#approvalsList ul li .li-date {
  font-weight: 500;
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#approvalsList .li-period {
  font-weight: 500;
  display: flex;
}

#approvalsList .icon-cal {
  width: 5%;
  -webkit-mask-image: url(../images/icons/in-calendar.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b !important;
  font-size: inherit;
  margin: 0 10px;
}

.dairy #approvalsList .icon-cal {
  background: #67a225 !important;
}

#approvalsList .icon-leave {
  width: 5%;
  -webkit-mask-image: url(../images/icons/timeoff.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b !important;
  font-size: inherit;
  margin: 0 10px;
}

.dairy #approvalsList .icon-leave {
  background: #67a225 !important;
}

#approvalsList .icon-vac {
  width: 5%;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b !important;
  font-size: inherit;
  margin: 0 10px;
}

.dairy #approvalsList .icon-vac {
  background: #67a225 !important;
}

#approvalView ul li {
  background: #ffffff;
  padding: 0px !important;
  border: 0px !important;
  font-weight: 800;
  display: flex;
}

#approvalView ul li.s {
  align-items: center;
}

#approvalView .flexo {
  display: flex;
}

#approvalView ul li .main-content {
  width: 100%;
  display: inline-table;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #8c8888;
  line-height: 1.8;
}

#approvalView ul li .li-value {
  color: #151719;
  text-transform: capitalize;
}

#approvalView ul li .title-m {
  margin: 1.5rem 20px 0.5rem 20px;
}

#approvalView ul li .t-m {
  margin: 0 20px;
  width: 30%;
}

#approvalView .footer {
  display: flex;
  border-top: 1px solid #d8d7d7;
  align-items: center;
  background: #ffffff;
  justify-content: flex-end;
  padding: 0 3%;
}

#approvalView .footer .btn {
  text-align: center !important;
  width: 13% !important;
  border-radius: 6px;
  margin: 0 5px;
  padding: 0px;
  float: right;
  font-weight: 600;
}
#approvalsHistory .btn.btn-danger  {
  width: 20% !important;
  display: block !important;
  background-color: red !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 60% !important;
  background-image: url(../images/icons/trash.png) !important;
  height: 20px !important;
}
 

#statusView .btn.btn-danger  {
  width: 20% !important;
  display: block !important;
  background-color: red !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 60% !important;
  background-image: url(../images/icons/trash.png) !important;
  height: 20px !important;
} 

#statusView  .btn.btn-danger:active {
  color: #ffffff !important;
  background-color: red !important;
  background-image: url(../images/icons/trash.png);
}
#approvalView .footer .btn.btn-danger {
  border: 0px !important;
  color: #dc6a62 !important;
  background: #ffffff !important;
}

#approvalView .footer .btn.btn-danger:active {
  color: #ffffff !important;
  background-color: #dc6a62 !important;
}

#approvalView .footer .btn.btn-save {
  color: #ffffff !important;
  background: #0a8b4e !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35% !important;
}

#approvalView .footer .btn.btn-save:active {
  color: #0a8b4e !important;
  background: #ffffff !important;
}

#approvalView .footer .btn.btn-save:active .approve-icon {
  background: #0a8b4e !important;
}

#approvalView .footer .approve-icon {
  width: 17%;
  -webkit-mask-image: url(../images/icons/accept.png);
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background: #ffffff !important;
  font-size: inherit;
  margin: 0 5px;
}

#approvalView .icon-person {
  width: 10%;
  -webkit-mask-image: url(../images/icons/icon_profile.png);
  display: block;
  -webkit-mask-position: top;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #b1b1b1 !important;
  font-size: inherit;
  margin: 0 20px;
}

#approvalView .icon-time {
  width: 10%;
  -webkit-mask-image: url(../images/icons/sands-of-time.png);
  display: block;
  -webkit-mask-position: top;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #b1b1b1 !important;
  font-size: inherit;
  margin: 0 20px;
}

#approvalView .icon-period {
  width: 10%;
  -webkit-mask-image: url(../images/icons/clock.png);
  display: block;
  -webkit-mask-position: top;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #b1b1b1 !important;
  font-size: inherit;
  margin: 0 20px;
}

#approvalView .icon-date {
  width: 10%;
  -webkit-mask-image: url(../images/icons/in-calendar.png);
  display: block;
  -webkit-mask-position: top;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #b1b1b1 !important;
  font-size: inherit;
  margin: 0 20px;
}

#approvalView .icon-note {
  width: 10%;
  -webkit-mask-image: url(../images/icons/note.png);
  display: block;
  -webkit-mask-position: top;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #b1b1b1 !important;
  font-size: inherit;
  margin: 0 20px;
}

#approvalView .icon-balance {
  width: 10%;
  -webkit-mask-image: url(../images/icons/Balance-02.png);
  display: block;
  -webkit-mask-position: top;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #b1b1b1 !important;
  font-size: inherit;
  margin: 0 20px;
}

#approvalView .icon-days {
  width: 10%;
  -webkit-mask-image: url(../images/icons/days.png);
  display: block;
  -webkit-mask-position: top;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #cccccc !important;
  font-size: inherit;
  margin: 0 20px;
}

#approvalView .icon-form {
  width: 10%;
  -webkit-mask-image: url(../images/icons/form.png);
  display: block;
  -webkit-mask-position: top;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #b1b1b1 !important;
  font-size: inherit;
  margin: 0 20px;
}

#approvalsHistory .tabs-button {
  width: 100%;
  display: flex;
}

#approvalsHistory #buttongroup {
  display: flex;
  background: transparent !important;
  text-align: center;
  list-style: none;
  border: none;
  width: 100%;
  align-items: flex-end;
  margin: 0px !important;
}

#approvalsHistory #buttongroup #btn-group {
  display: inline-grid;
  background: transparent !important;
  border: none;
  padding: 0px;
  text-align: center;
  width: 35%;
  color: rgba(196, 209, 228, 0.54117647);
  justify-content: center;
  align-items: center;
}

#approvalsHistory .in-grid {
  width: 100%;
  display: inline;
  padding: 3px !important;
  text-align: center;
}

#approvalsHistory #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #032d56;
  color: #ffffff;
}

.dairy #approvalsHistory #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #158301;
}

#approvalsHistory #buttongroup #btn-group.km-state-active .first-icon,
#approvalsHistory #buttongroup #btn-group.km-state-active .second-icon,
#approvalsHistory #buttongroup #btn-group.km-state-active .forth-icon {
  background: #ffffff !important;
}

#approvalsHistory #buttongroup #btn-group * {
  margin: auto;
  display: block;
  font-weight: 600;
}

#approvalsHistory .content .km-list li:not(.title) {
  color: #0a548b !important;
  background: #ffffff;
  border-left: 2px solid #0a548b !important;
  margin-top: 8px;
  border-right: 2px solid #0a548b !important;
}

.dairy #approvalsHistory .content .km-list li:not(.title) {
  border-right: 2px solid #67a225 !important;
  border-left: 2px solid #67a225 !important;
  color: #67a225 !important;
}

#approvalsHistory ul {
  border-top: none;
  background: #f1f3f3;
}

#approvalsHistory li {
  border: none;
  border-bottom: 1px solid #d8d7d7;
}

#approvalsHistory .leaves-title {
  background: #ffffff;
}

#approvalsHistory .vacations-title {
  background: #ffffff;
}

#approvalsHistory .forms-title {
  background: #ffffff;
}

#approvalsHistory .in-li {
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid #d8d7d7;
  padding: 10px 0;
  padding-bottom: 5px;
}

#approvalsHistory #leaves li .li-title {
  font-weight: bold;
  width: 35%;
  text-align: center;
  font-size: 0.75em !important;
}

#approvalsHistory #leaves li .sub-label {
  font-weight: bold;
  width: 35%;
  text-align: center;
}

#approvalsHistory #vacations li .li-title {
  font-weight: bold;
  width: 50%;
  text-align: center;
  font-size: 0.75em !important;
}

#approvalsHistory #vacations li .sub-label {
  font-weight: bold;
  width: 50%;
  text-align: center;
}

#approvalsHistory #forms li .li-title {
  font-weight: bold;
  width: 50%;
  text-align: center;
}

#approvalsHistory #forms li .sub-label {
  font-weight: bold;
  width: 50%;
  text-align: center;
}

#statusView .tabs-button {
  width: 100%;
  display: flex;
}

#statusView #buttongroup {
  display: flex;
  background: transparent !important;
  text-align: center;
  list-style: none;
  border: none;
  width: 100%;
  align-items: flex-end;
  margin: 0px !important;
}

#statusView #buttongroup #btn-group {
  display: inline-grid;
  background: transparent !important;
  border: none;
  padding: 0px;
  text-align: center;
  width: 35%;
  color: rgba(196, 209, 228, 0.54117647);
  justify-content: center;
  align-items: center;
}

#statusView .in-grid {
  width: 100%;
  display: inline;
  padding: 3px !important;
  text-align: center;
}

#statusView #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #032d56;
  color: #ffffff;
}

.dairy #statusView #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #158301;
}

#statusView #buttongroup #btn-group.km-state-active .first-icon,
#statusView #buttongroup #btn-group.km-state-active .second-icon,
#statusView #buttongroup #btn-group.km-state-active .third-icon,
#statusView #buttongroup #btn-group.km-state-active .forth-icon {
  background: #ffffff !important;
}

#statusView #buttongroup #btn-group * {
  margin: auto;
  display: block;
  font-weight: 600;
}

#statusView .content .km-list li:not(.title) {
  color: #0a548b !important;
  background: #ffffff;
  border-left: 2px solid #0a548b !important;
  margin-top: 8px;
  border-right: 2px solid #0a548b !important;
}

.dairy #statusView .content .km-list li:not(.title) {
  border-right: 2px solid #67a225 !important;
  border-left: 2px solid #67a225 !important;
  color: #67a225 !important;
}

#statusView ul {
  border-top: none;
  background: #f1f3f3;
}

#statusView li {
  border: none;
  margin: 0px 10px;
  border-bottom: 1px solid #d8d7d7;
}

#statusView .leaves-title {
  background: #ffffff;
}

#statusView .vacations-title {
  background: #ffffff;
}

#statusView .loans-title {
  background: #ffffff;
}

#statusView .forms-title {
  background: #ffffff;
}

#statusView .in-li {
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid #d8d7d7;
  padding: 10px 0;
  padding-bottom: 5px;
}

#statusView #leaves li .li-title {
  font-weight: bold;
  width: 35%;
  text-align: center;
}

#statusView #leaves li .sub-label {
  font-weight: bold;
  width: 35%;
  flex: 1;
  text-align: center;
  font-size: 0.55rem;
}

#statusView #vacations li .li-title {
  font-weight: bold;
  width: 50%;
  text-align: center;
}

#statusView #vacations li .sub-label {
  font-weight: bold;
  width: 35%;
  text-align: center;
  flex: 1;
  font-size: 0.55rem;
}

#statusView #loans li .li-title {
  font-weight: bold;
  width: 50%;
  text-align: center;
}

#statusView #loans li .sub-label {
  font-weight: bold;
  width: 50%;
  text-align: center;
}

#statusView #forms li .li-title {
  font-weight: bold;
  width: 50%;
  text-align: center;
}

#statusView #forms li .sub-label {
  font-weight: bold;
  width: 50%;
  text-align: center;
}

#modal_SeeStatus ul li {
  background: #ffffff;
  padding: 0px !important;
  border: 0px !important;
  font-weight: 800;
  display: flex;
}

#modal_SeeStatus ul li.s {
  align-items: end;
}

#modal_SeeStatus .flexo {
  display: flex;
}

#modal_SeeStatus ul li .main-content {
  width: 100%;
  display: inline-table;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #8c8888;
  line-height: 1.8;
}

#modal_SeeStatus ul li .li-value {
  color: #151719;
  text-transform: capitalize;
}

#modal_SeeStatus ul li .title-m {
  margin: 1.5rem 20px 0.5rem 20px;
}

#modal_SeeStatus ul li .t-m {
  margin: 0 20px;
  width: 30%;
}

#calendarView .k-alt {
  display: none;
}

#calendarView .k-widget.k-calendar .k-nav-fast {
  text-align: center;
  background: #ffffff !important;
}

#calendarView .header {
  border-bottom: none;
}

#calendarView .k-header {
  background: #ffffff !important;
  color: #0a548b !important;
}

#calendarView .km-content {
  background-color: #ffffff !important;
}

#calendarView .k-calendar th {
  border: none;
  border-bottom: none;
}

#calendarView .container {
  background: #fff;
}

#calendarView .container .whiteSpaceContainer {
  display: block;
  width: 100%;
  height: 2%;
  margin: 0% auto;
}

#calendarView .container .calendarContainer {
  display: block;
  width: 100%;
  height: 70%;
  margin: auto;
  border: none;
}

#calendarView .container .calendarContainer * {
  text-align: center !important;
  font-weight: 600;
  color: #0a548b;
}

#calendarView .k-calendar th {
  background-color: inherit !important;
}

#calendarView .k-calendar .k-header {
  border: none !important;
  border-color: transparent !important;
}

#calendarView .k-today .calevent-container {
  color: #0a548b;
  border-radius: 0%;
  font-weight: 600;
  opacity: 1;
  background: #f1f3f3;
}

#calendarView .k-calendar .k-content .k-link {
  display: block;
  overflow: hidden;
  line-height: 2.5em;
  min-height: 2.5em;
  padding: 0;
  text-align: center;
}

#calendarView .k-calendar td.k-state-selected,
#calendarView .k-calendar td.k-state-selected,
#calendarView .k-widget {
  background-color: inherit !important;
  border-color: transparent !important;
  color: inherit;
}

#calendarView .list-header {
  margin: 15px;
  color: #0a548b;
  font-weight: 600;
}

#calendarView .calendarContainer {
  margin-top: 5px;
  border-bottom: 10px solid #f1f3f3 !important;
}

#calendarView .calendarContainer .k-i-arrow-60-left {
  width: 100%;
  -webkit-mask-image: url(../images/icons/icon_back.png) !important;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b !important;
  margin: auto;
  height: inherit;
  transform: scaleX(-1);
}

#calendarView .calendarContainer .k-i-arrow-60-right {
  width: 100%;
  -webkit-mask-image: url(../images/icons/icon_back.png) !important;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b !important;
  margin: auto;
  height: inherit;
}

#calendarView .calendarContainer .k-icon:before {
  display: none !important;
}

#calendarView .calevent-container.calevent {
  font-weight: bold;
  background-color: #ffffff;
  border-radius: 0%;
  border: 1px solid #0a548b;
  color: #0a548b;
  opacity: 1 !important;
  line-height: 2.5em !important;
}

#calendarView td.k-state-selected .calevent-container {
  background: #0a548b !important;
  color: #ffffff !important;
}

#calendarView .k-other-month {
  /*display: none;*/
  visibility: hidden;
}

#calendarView .calevent-container {
  /*opacity: 0.6;*/
}

#calendarView .k-state-hover {
  border-color: inherit !important;
  background-color: inherit !important;
  color: inherit !important;
}

#calendarView .k-state-focused,
#calendarView .k-list>.k-state-focused,
.k-listview>.k-state-focused,
#calendarView .k-grid-header th.k-state-focused,
#calendarView td.k-state-focused,
#calendarView .k-button.k-state-focused {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

#calendarView .container {
  background: #f1f3f3;
  border-top: 1px solid #d8d7d7 !important;
}

#calendarView ul li {
  border: none;
  background: #ffffff !important;
  padding: 10px 0px;
  padding-bottom: 0px;
}

#calendarView ul li .type-icon {
  width: 15%;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 55%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b;
  font-size: inherit;
  -webkit-mask-image: url(../images/icons/event.png);
}

#calendarView ul li .main-content {
  width: 100%;
}

#calendarView ul li .li-title {
  font-weight: bold;
  line-height: 1.6;
}

#calendarView .sub-title {
  color: #649aaf;
  width: 100% !important;
}

#calendarView .no-events {
  width: 100%;
  display: block;
  background-repeat: no-repeat !important;
  background-position: center;
  background-size: contain;
  background-image: url(../images/icons/no-events.png);
}

.btn-container {
  text-align: center !important;
  display: flex;
}

#leaveView .hideVac-label{
  display: none !important;
}

#vacationView .form .form-group,
#leaveView .form .form-group,
#loanView .form .form-group,
#formView .form .form-group {
  margin-bottom: 0px;
}


#vacationView .form .form-group .form-control,
#leaveView .form .form-group .form-control,
#loanView .form .form-group .form-control,
#formView .form .form-group .form-control {
  margin-bottom: 15px;
}

#vacationView .form .form-group .form-control,
#leaveView .form .form-group .form-control,
#loanView .form .form-group .form-control,
#formView .form .form-group .form-control {
  font-size: 1rem;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-radius: 0px !important;
}

#vacationView .v-b,
#leaveView .v-b,
#loanView .v-b,
#formView .v-b {
  width: 100%;
}

#vacationView #close-btn,
#leaveView #close-btn,
#loanView #close-btn,
#formView #close-btn {
  background: #ffffff;
  color: #0a548b;
  border: none;
  font-weight: 700;
}

.dairy #vacationView #close-btn,
.dairy #leaveView #close-btn,
.dairy #loanView #close-btn,
.dairy #formView #close-btn {
  color: #67a225;
}

/*#vacationView #close-btn :active, #leaveView #close-btn:active, #loanView #close-btn:active {
    background: @blue_color;
    color: @white_color;
}*/
#modal_ResetPassword .btn-container {
  text-align: center;
  display: flex;
}

#modal_ResetPassword .header {
  background-color: #0a548b !important;
  color: #ffffff;
}

.dairy #modal_ResetPassword .header {
  background-color: #67a225 !important;
}

#attendanceList .tabs-button {
  width: 100%;
  display: flex;
}

#attendanceList #buttongroup {
  display: flex;
  background: transparent !important;
  text-align: center;
  list-style: none;
  border: none;
  width: 100%;
  align-items: flex-end;
  margin: 0px !important;
}

#attendanceList #buttongroup #btn-group {
  display: inline-grid;
  background: transparent !important;
  border: none;
  padding: 0px;
  text-align: center;
  width: 35%;
  color: rgba(196, 209, 228, 0.54117647);
  justify-content: center;
  align-items: center;
}

#attendanceList #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #032d56;
  color: #ffffff;
}

.dairy #attendanceList #buttongroup #btn-group.km-state-active {
  border-bottom: 4px solid #158301;
}

#attendanceList #buttongroup #btn-group.km-state-active .first-icon,
#attendanceList #buttongroup #btn-group.km-state-active .second-icon,
#attendanceList #buttongroup #btn-group.km-state-active .third-icon {
  background: #ffffff !important;
}

#attendanceList #buttongroup #btn-group * {
  margin: auto;
  display: block;
  font-weight: 600;
}

#attendanceList ul.data li {
  background: #ffffff;
  padding: 0px !important;
  border: 0px !important;
  font-weight: 800;
}

#attendanceList .flexo {
  display: flex;
  vertical-align: middle;
  align-items: center;
}

.dairy #attendanceList .flexo {
  display: flex;
  vertical-align: top;
  align-items: flex-start;
}

#attendanceList ul.data li .icon {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #d8d7d7;
  border-radius: 100%;
  margin: 0 10px;
}

#attendanceList ul li .main-content {
  width: 100%;
  display: inline-table;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #8c8888;
  line-height: 1.8;
}

#attendanceList ul li .li-name {
  color: #151719;
  text-transform: capitalize;
  margin: 0 10px;
  font-size: 0.65rem !important;
}

#attendanceList .li-date {
  font-weight: 500;
  display: flex;
  vertical-align: middle;
  align-items: center;
  width: 45%;
  margin: 0 10px;
}

#attendanceList .li-date.f {
  width: 35%;
}

#attendanceList .li-period {
  font-weight: 500;
  display: flex;
  vertical-align: middle;
  width: auto;
  margin: 0 10px;
  justify-content: start;
  align-items: center;
}

#attendanceList .li-period .s-icon {
  width: 10% !important;
}

#attendanceList .s-icon {
  width: 20%;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b !important;
  font-size: inherit;
}

#attendanceList .icon-in {
  -webkit-mask-image: url(../images/icons/in.png);
}

#attendanceList .icon-out {
  -webkit-mask-image: url(../images/icons/out.png);
}

#attendanceList .icon-hour {
  -webkit-mask-image: url(../images/icons/hour.png);
}

#attendanceList .content .km-group-container li {
  color: #f1f3f3 !important;
}

#attendanceList li .km-group-title {
  border-style: none !important;
  background: #f1f3f3;
  font-weight: 500;
  color: #0a548b;
}

#attendanceList li .km-group-title .km-text {
  line-height: 2;
}

#timesheet ul.data li {
  padding: 0px !important;
  border: 0px !important;
  font-weight: 800;
  background: transparent;
}

#timesheet ul.data li div {
  background: transparent;
}

#timesheet .flexo {
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#timesheet .km-listview-wrapper {
  background: #f1f3f3;
}

#timesheet ul li .main-content {
  display: inline-table;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #8c8888;
  line-height: 1.8;
  border-left: 1px solid #d8d7d7;
  background: #ffffff !important;
}

#timesheet ul li .li-name {
  color: #151719;
  text-transform: capitalize;
  margin: 0 10px;
}

#timesheet ul li .icon {
  overflow: hidden;
  background: transparent;
}

#timesheet ul li .sub {
  color: #b1b1b1 !important;
}

#datePickerModal {
  width: 100%;
}

#datePickerModal .k-calendar td.k-state-selected {
  background-color: #0a548b;
}

#datePickerModal .calendarContainer .k-icon:before {
  display: none !important;
}

#datePickerModal .km-content {
  width: 100%;
  height: 100%;
  background: transparent;
}

#datePickerModal .km-content .km-scroll-container {
  height: 100% !important;
  position: relative;
}

#datePickerModal .container {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffffff !important;
  position: relative;
  border-radius: 5px;
}

#datePickerModal .modalHeader {
  display: block;
  width: 100%;
  height: 8%;
  position: relative;
  background: #0a548b;
}

#datePickerModal .modalHeader .title {
  display: block;
  width: 100%;
  height: 100%;
}

#datePickerModal .modalHeader .title span {
  display: block;
  width: 100%;
  margin: 0% auto;
  color: #ffffff;
  padding-left: 3%;
  text-align: left;
  font-size: 120%;
}

#datePickerModal .modalContainer {
  display: block;
  width: 100%;
  height: 80%;
  margin: 0% auto;
  padding: 10px;
}

#datePickerModal .modalContainer .calendarContainer {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0% auto;
}

#datePickerModal .modlFooter {
  display: block;
  width: 90%;
  height: 12%;
  margin: 0% auto;
  color: #0a548b;
}

#datePickerModal .modlFooter .whiteSpaceContainer {
  display: block;
  width: 60%;
  height: 10%;
  margin: 0% auto;
  float: left;
}

#datePickerModal .modlFooter .whiteSpaceContainer1 {
  display: block;
  width: 10%;
  height: 10%;
  margin: 0% auto;
  float: left;
}

#datePickerModal .modlFooter .btnCancelContainer {
  display: block;
  width: 15%;
  height: 100%;
  margin: 0% auto;
  float: left;
}

#datePickerModal .modlFooter .btnOkContainer {
  display: block;
  width: 15%;
  height: 100%;
  margin: 0% auto;
  float: left;
}

#datePickerModal .k-alt {
  display: none;
}

#datePickerModal .k-widget.k-calendar .k-nav-fast {
  text-align: center;
  background: #ffffff !important;
}

#datePickerModal .header {
  border-bottom: none;
}

#datePickerModal .k-header {
  background: #ffffff !important;
  color: #0a548b !important;
}

#datePickerModal .km-content {
  background-color: #ffffff !important;
}

#datePickerModal .k-calendar th {
  border: none;
  border-bottom: none;
}

#datePickerModal .container {
  background: #fff;
}

#datePickerModal .k-i-arrow-60-left {
  width: 100%;
  -webkit-mask-image: url(../images/icons/icon_back.png) !important;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b !important;
  margin: auto;
  height: inherit;
  transform: scaleX(-1);
}

#datePickerModal .k-i-arrow-60-right {
  width: 100%;
  -webkit-mask-image: url(../images/icons/icon_back.png) !important;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b !important;
  margin: auto;
  height: inherit;
  transform: none !important;
}

#datePickerModal .k-widget {
  background-color: inherit !important;
  border-color: transparent !important;
  color: inherit;
}

#datePickerModal .k-calendar td.k-state-selected,
#datePickerModal .k-calendar td.k-state-selected {
  background-color: #0a548b !important;
  border-color: transparent !important;
  color: #ffffff;
}

#datePickerModal .k-state-focused,
#datePickerModal .k-list>.k-state-focused,
.k-listview>.k-state-focused,
#datePickerModal .k-grid-header th.k-state-focused,
#datePickerModal td.k-state-focused,
#calendarView .k-button.k-state-focused {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

#requestTypeView .right {
  display: block;
  float: left;
}

#requestTypeView .elapse {
  width: 96%;
  background: #ffffff;
  height: 63%;
  border-radius: 50px;
  position: relative;
  display: flex;
  border: 1px solid #0a548b;
}

.dairy #requestTypeView .elapse {
  border: 1px solid #67a225;
}

#requestTypeView .elapse:hover,
#requestTypeView .elapse:active,
#requestTypeView .elapse:focus {
  background: #f1f3f3;
  border: 0px solid #0a548b;
}

.dairy #requestTypeView .elapse:hover,
.dairy #requestTypeView .elapse:active,
.dairy #requestTypeView .elapse:focus {
  border: 0px solid #67a225;
}

#requestTypeView .sequare {
  display: block;
  background: transparent;
  border-radius: 100%;
  border: 0px solid #0a548b;
  float: left;
  position: relative;
  top: 5px;
  left: 10px;
  /*box-shadow: 2px 2px 2px 0px lightsteelblue;*/
}

.dairy #requestTypeView .sequare {
  border: 0px solid #67a225;
}

#requestTypeView .sequare .icon {
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 57%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b;
  font-size: inherit;
}

.dairy #requestTypeView .sequare .icon {
  background: #67a225;
}

#requestTypeView .sequare .icon.vacation {
  -webkit-mask-image: url(../images/icons/vacation.png);
}

#requestTypeView .sequare .icon.loan {
  -webkit-mask-image: url(../images/icons/earn.png);
}

#requestTypeView .sequare .icon.iform {
  -webkit-mask-image: url(../images/icons/Form-06.png);
}

#requestTypeView .sequare .icon.leave {
  -webkit-mask-image: url(../images/icons/timeoff.png);
}

#requestTypeView .right .control-label {
  height: 100%;
  display: table;
}

#requestTypeView .right .control-label translation {
  display: table-cell;
  vertical-align: middle;
  text-align: center !important;
  font-weight: 600;
}

#employeesList .n-l {
  display: block;
  width: 100%;
}

#employeesList ul.data li {
  background: #ffffff;
  padding: 0px !important;
  border: 0px !important;
  font-weight: 800;
}

#employeesList .flexo {
  display: flex;
  vertical-align: middle;
  align-items: center;
}

.dairy #employeesList .flexo {
  display: flex;
  vertical-align: top;
  align-items: flex-start;
}

#employeesList ul.data li .icon {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #d8d7d7;
  border-radius: 100%;
}

#employeesList ul li .main-content {
  width: 100%;
  display: inline-table;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #8c8888;
  line-height: 3.6;
  border-bottom: 1px solid lightgray;
}

#employeesList ul li .li-name {
  color: #151719;
  text-transform: capitalize;
  margin: 0 10px;
}

#modal_ChangePhoto #photo {
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  border-radius: 100%;
  margin: auto;
}

#modal_ChangePhoto .btn {
  border-radius: 50px;
  position: absolute;
  background-image: url(../images/icons/Camera.png) !important;
  background-position: center !important;
  background-size: 57% !important;
  background-repeat: no-repeat !important;
}

#modal_ChangePhoto #btn-cam {
  background-image: url(../images/icons/Camera.png) !important;
}

#modal_ChangePhoto #btn-tic {
  background-color: #009396 !important;
  background-image: url(../images/icons/tic.png) !important;
}

#modal_ChangePhoto .form {
  margin-left: 8.75px !important;
  margin-right: 8.75px !important;
}

.k-animation-container {
  height: 60% !important;
}
.km-modalview-root .k-animation-container {
  height: 100% !important;
}

#employeesView .n-l {
  display: block;
  width: 100%;
}

#timeAttendance .right {
  display: block;
  float: left;
}

#timeAttendance .elapse {
  width: 96%;
  background: #ffffff;
  height: 50%;
  border-radius: 50px;
  position: relative;
  display: flex;
  border: 1px solid #0a548b;
}

.dairy #timeAttendance .elapse {
  border: 1px solid #67a225;
}

#timeAttendance .elapse:active {
  background: #f1f3f3;
  border: 0px solid #0a548b;
}

.dairy #timeAttendance .elapse:active {
  border: 0px solid #67a225;
}

#timeAttendance .sequare {
  display: block;
  background: transparent;
  border-radius: 100%;
  border: 0px solid #0a548b;
  float: left;
  position: relative;
  top: 5px;
  left: 10px;
  /*box-shadow: 2px 2px 2px 0px lightsteelblue;*/
}

.dairy #timeAttendance .sequare {
  border: 0px solid #67a225;
}

#timeAttendance .sequare .icon {
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: 57%;
  -webkit-mask-repeat: no-repeat;
  background: #0a548b;
  font-size: inherit;
}

.dairy #timeAttendance .sequare .icon {
  background: #67a225;
}

#timeAttendance .sequare .icon.check-in {
  -webkit-mask-image: url(../images/icons/ckeck-in.png);
}

#timeAttendance .sequare .icon.check-out {
  -webkit-mask-image: url(../images/icons/ckeck-out.png);
}

#timeAttendance .right .control-label {
  height: 100%;
  display: table;
  line-height: 2.9;
}

#timeAttendance .right .control-label translation {
  display: table-cell;
  vertical-align: middle;
  text-align: center !important;
  font-weight: 600;
}

#timeAttendance .time-icon,
#timeAttendance .clock-icon {
  width: 10%;
  display: block;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  font-size: inherit;
  background: #b1b1b1;
  border-radius: 100%;
}

#timeAttendance .clock {
  width: 100%;
  align-items: center;
  padding: 0px 10px 15px 10px;
}

#timeAttendance .clock .title {
  width: 100%;
  background: #ffffff;
  font-weight: 700;
  display: flex;
  color: #0a548b;
  vertical-align: middle;
  padding-top: inherit;
  align-items: center;
}

#timeAttendance .clock-icon {
  -webkit-mask-image: url(../images/icons/timer.png);
  background: #0a548b !important;
}

#timeAttendance .time-icon {
  -webkit-mask-image: url(../images/icons/timer.png);
  background: #0a548b !important;
  -webkit-mask-size: 60% !important;
}

#timeAttendance .time-label {
  text-align: start;
  width: 50%;
  display: grid;
}

#timeAttendance .label {
  text-align: center;
  margin: auto auto;
}

#timeAttendance .sub-label {
  margin: 2px;
  color: #b1b1b1;
}

#timeAttendance .main-label {
  font-weight: 900;
  display: flex;
  margin: auto 0%;
  align-content: center;
  text-align: center;
  width: 100%;
  padding-bottom: 12px;
}

#timeAttendance .num-val {
  font-weight: 100;
  color: #0a548b;
}

#progressModal .km-content {
  color: white;
  background: #004477;
}

#progressModal .progressBarContainer {
  display: block;
  height: 40px;
  width: 94%;
  margin: 10px 3%;
  position: relative;
  background: #eee;
  border-radius: 10px;
}

#progressModal .progressBar {
  display: block;
  height: auto;
  width: auto;
  position: absolute;
  left: 0px;
  right: 100%;
  margin-right: 7px;
  margin-left: 7px;
  top: 7px;
  bottom: 7px;
  /*transition: right 0.1s ease;*/
  background: #243e5f;
  border-radius: 5px;
}

#progressModal .progressMessage {
  display: block;
  height: 100px;
  line-height: 30px;
  width: 380px;
  margin: 0 auto;
  text-align: center;
  font-size: 1rem !important;
  color: #0a548b;
}

.hidden {
  display: none !important;
}

.lbl {
    margin: 0px 0px 5px 0px !important;
    color: #b91d1d !important;
    text-align: center !important;
    background: #f7eded !important;
    padding: 5px !important;
    font-size: 20px !important;
}

#setupView .footer {
  display: flex;
  align-items: center;
  background: #ffffff;
  justify-content: flex-end;
  padding: 0 3%;
}

#setupView .footer .btn {
  text-align: center !important;
  width: 13% !important;
  border-radius: 6px;
  margin: 0 5px;
  padding: 0px;
  float: right;
  font-weight: 600;
}