:root{
    --image-background_4k : url("../../images/eTIME_SPLASH_4K.png");
	--image-background_2k : url("../../images/eTIME_SPLASH_2K.png");
	--image-background_1k : url("../../images/eTIME_SPLASH_1K.png");
	--image-background_768 : url("../../images/eTIME_SPLASH_768.png");
	--image-background_767 : url("../../images/eTIME_SPLASH_767.png");
	--color-page-background : #fff;
	--color-title : #2a2a2a;
	--color-title-background : #9aca3c;
	--color-main : #9aca3c;
	--color-menu : #e3f3d6;
	--color-menu-hover : #f7b64a;
	--color-alert-danger : red;	
	--color-alert-success : #356635;	
	--color-alert-warning : #ff5c5c;	
	--color-alert-info : #ff5c5c;	
	--color-dashboard-background : #495154;
	--color-button-background : #e3f3d6;
	--color-button-background-hover : #f7b64a;
    --tile-font-weight: 600;
    --tile-font-size: 2.25rem;	
    --body-color: #000;
    --body-background-color: #fff;
    --color-href: #2a2a2a;
    --color-href-underline: #f7b64a;
}

body {
  font-family: Verdana;
  font-size: 12px;
  line-height: 1.2;
  color: var(--body-color);
  background-color: var(--body-background-color);
}

.form-control,
.snip_control {
  font-size: 12px;
  line-height: 1.2;
  color: var(--body-color);
  background-color: var(--body-background-color);
}

.r-vbar-page .r-left .panel {
  color: var(--body-color);
}

.navbar .btn.btn.btn {
  border-top-color: #000;
}

.caret {
  border-top-color: #2a2a2a !important;
}

.r-left .r-menu {
  padding-top: 0px;
}

[data-itemtype="notifications"] > .dropdown-menu,
[data-itemtype="notifications"] .r-noti-message:hover,
[data-itemtype="notifications"] .r-noti-title,
[data-itemtype="notifications"] .r-noti-title .r-noti-when {
  color: var(--body-color);
}

h2, .h2 {
	font-size: 2em;
}

h4.panel-title {
    padding-top: 3px;
    padding-bottom: 3px;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  color: var(--body-color);
}

.function-dashboard {
  background: var(--color-dashboard-background) !important;
}

.function-login div.panel-title div.col-md-6 {
    width: 50%;
}

.function-login,
.function-remind,
.function-remind_success,
.function-register,
.function-register_success { 
  background-size:cover;  
  padding-top:50px;
}

@media screen and (min-width: 2049px) {
	.function-login,
	.function-remind,
	.function-remind_success,
	.function-register,
	.function-register_success { 
	  background: transparent var(--image-background_4k) no-repeat top right fixed;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      -moz-background-size: cover; 	  
	}
}

@media screen and (max-width: 2048px) {
	.function-login,
	.function-remind,
	.function-remind_success,
	.function-register,
	.function-register_success { 
	  background: transparent var(--image-background_2k) no-repeat top right fixed;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      -moz-background-size: cover; 	  
	}
}

@media screen and (max-width: 1024px) {
	.function-login,
	.function-remind,
	.function-remind_success,
	.function-register,
	.function-register_success { 
	  background: transparent var(--image-background_1k) no-repeat top right fixed;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      -moz-background-size: cover; 	  
	}
}

@media screen and (max-width: 768px) {
	.function-login,
	.function-remind,
	.function-remind_success,
	.function-register,
	.function-register_success { 
	  background: transparent var(--image-background_768) no-repeat top right fixed;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      -moz-background-size: cover; 	  
	}
}

@media screen and (max-width: 767px) {
	.function-login,
	.function-remind,
	.function-remind_success,
	.function-register,
	.function-register_success { 
	  background: transparent var(--image-background_767) no-repeat top right fixed;
      background-size: cover;
      -webkit-background-size: cover;
      -o-background-size: cover;
      -moz-background-size: cover; 	  
	}
}

[data-cellid="footer_c2"][data-page="_global_login"][data-cellid="footer_c2"][data-page="_global_login"][data-cellid="footer_c2"][data-page="_global_login"] {
  width: 100% !important;
}

.function-add,
.function-edit,
.function-search {
	background-color: var(--color-page-background) !important;
}

[data-itemid="add_header"],
[data-itemid="edit_header"],
[data-itemid="view_header"],
[data-itemid="search_header"],
[data-itemtype="lookupheader"] {
  color: var(--color-title);
  background: var(--color-title-background);
  padding: 6px;
  border-radius: 6px;
}

.r-form[data-location="top"] {
	margin-bottom: 0px !important;
}

.panel-primary {  
  border-color: var(--color-page-background) !important;
}

.modal-header,
.panel-primary > .panel-heading,
.panel-title,
[data-itemid="add_header"],
[data-itemid="edit_header"],
[data-itemid="view_header"],
[data-itemid="search_header"],
[data-itemtype="lookupheader"] {  
  border-color: var(--color-title-background) !important;
  background-image: linear-gradient(to bottom, var(--color-title-background) 0%, var(--color-title-background) 100%) !important;
  color: var(--color-title) !important;
}

.modal-header {	
  font-size: 18px;
}

.panel-title {
	font-weight: bold;
}

.btn-primary, .btn {  
  color: var(--body-color) !important;
  background-color: var(--color-button-background) !important;
  border-color: #2a2a2a !important;
  background-image: linear-gradient(to bottom, var(--color-button-background) 0%, var(--color-button-background) 100%) !important;
}

.btn-primary:not([disabled]):hover,
.btn-primary.hover:not([disabled]),
.btn-primary:not(.disabled.):hover,
.btn-primary.hover:not(.disabled.),
.btn-primary:not([disabled]):focus,
.btn-primary.focus:not([disabled]),
.btn-primary:not(.disabled):focus,
.btn-primary.focus:not(.disabled.),
.btn:not([disabled]):hover,
.btn.hover:not([disabled]),
.btn:not(.disabled):hover,
.btn.hover:not(.disabled),
.btn:not([disabled]):focus,
.btn.focus:not([disabled]),
.btn:not(.disabled):focus,
.btn.focus:not(.disabled) {
  background-color: var(--color-button-background-hover) !important;
  border-color: #2a2a2a !important;
  color: var(--body-color) !important;
  background-image: linear-gradient(to bottom, var(--color-button-background-hover) 0%, var(--color-button-background-hover) 100%) !important;
}

.btn-xs, .btn-group-xs > .btn {
/*	padding: 6px 6px; */
	font-size: 12px;
}

.dropdown-menu > li:not(.disabled) > a:hover, 
.dropdown-menu > li:not(.disabled) > a:focus {
  color: var(--color-title) !important;
  background-color: var(--color-title-background) !important;
  border-color: var(--color-title-background) !important;
  background-image: linear-gradient(var(--color-title-background), var(--color-title-background) 6%, var(--color-title-background)) !important;
}

.close {
  color: var(--color-title) !important;
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
  text-shadow: none !important;
}

.navbar-default {
  background-image: -webkit-linear-gradient(var(--color-dashboard-background), var(--color-dashboard-background) 60%, var(--color-dashboard-background));
  background-image: linear-gradient(var(--color-dashboard-background), var(--color-dashboard-background) 60%, var(--color-dashboard-background));
  background-color: var(--color-dashboard-background);
  border: none;
  border-left: none;
}

.navbar-brand {
  position:absolute;
  width:100%;
  height:100%;
  text-align: center; /*handles the horizontal centering*/
  padding: 10px 15px;
}

.r-vbar-page .r-left {
  background-image: -webkit-linear-gradient(var(--color-dashboard-background), var(--color-dashboard-background) 60%, var(--color-dashboard-background));
  background-image: linear-gradient(var(--color-dashboard-background), var(--color-dashboard-background) 60%, var(--color-dashboard-background));
  background-color: var(--color-dashboard-background);
  border: none;
}

[data-itemid="logo"],
[data-itemid="logo1"] {
  height: 76px !important;
  background-color: var(--color-dashboard-background);
}

[data-itemid="expand_button"] {
  height: 40px;
  background-color: var(--color-dashboard-background);
}

div.r-box-header{
    height: 100%;    
}


@media screen and (min-width: 768px) {
    [data-itemtype="dashboard-item"]{
     min-height:95px;
    }
}

@media screen and (max-width: 767px) {
    [data-itemtype="dashboard-item"]{
     min-height:75px;
    }
}


/*handles the vertical centering*/
.logo_centerer {
    display: inline-block;
/*    height: 100%; */
    vertical-align: middle;
}
.logo_centered {
    display: inline-block;
    vertical-align: middle;
}

.nav>li>a[data-toggle="collapse"], 
div[data-toggle="collapse"] {
	color: var(--color-title) !important;
	background-color: var(--color-menu) !important;
	background-image: linear-gradient(to bottom, var(--color-menu) 0%, var(--color-menu) 100%) !important;
	font-weight: bold !important;
	border-top: 1px solid #2a2a2a !important;
}

.panel-info > .panel-heading,
.panel-heading>h4.panel-title {
	color: var(--color-title) !important;
	background-color: var(--color-menu) !important;
	background-image: linear-gradient(to bottom, var(--color-menu) 0%, var(--color-menu) 100%) !important;
	font-weight: bold !important;
}

.panel-heading>h4.panel-title>a[role="button"] {
	text-decoration: none;
}

.panel-heading[aria-expanded="false"]>h4.panel-title>a[role="button"]::before {
	font-family: "FontAwesome";
	content: '\f0d7';
}

.panel-heading[aria-expanded="true"]>h4.panel-title>a[role="button"]::before {
	font-family: "FontAwesome";
	content: '\f0d8';
}
 
@media screen and (min-width: 768px) {
    .nav-tabs>li {
      float: left;
    }
}

@media screen and (max-width: 767px) {
    .nav-tabs>li {
      float: none;
    }
}
 
.nav>li>a {
	color: var(--color-title) !important;
	background-color: var(--color-menu) !important;
	font-weight: bold !important;
	border-top: 1px solid #2a2a2a !important;
}

.nav>li>a:hover:not([data-toggle="tab"]),
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: var(--color-title) !important;
	background-color: var(--color-menu-hover) !important;
	font-weight: bold !important;
}

.nav>li.active>a:not([data-toggle="tab"]){
	background-color: var(--color-menu-hover) !important;
}

a {
  color: var(--color-href) !important;
}

a:hover,
a:focus {
  color: var(--color-href) !important;
  text-decoration: underline;
  text-decoration-color: var(--color-href-underline) !important;
}

.glyphicon,
.pagination>li>a{
	color: #0c0c0c !important;
}

.glyphicon:hover,
.glyphicon:focus,
.pagination>li>a:hover,
.pagination>li>a:focus{
	text-decoration-color: #0c0c0c !important;
}

@media print, (min-width: 768px) {
	.r-edit-form > * > tr > [data-cellid].r-ori-vert > [edit-form-cell] > [data-itemid]:not([data-before-same-field]):not(.r-integrated-field), .r-edit-form > * > tr > [data-cellid][data-single] > [edit-form-cell] > [data-itemid]:not([data-before-same-field]):not(.r-integrated-field)
	{
		padding-bottom: 10px
	}
	
    .r-edit-form > * > tr > [data-cellid]:not(.r-ori-vert):not([data-fullwidth]) > [edit-form-cell] > .r-edit-label {
        width: 33.33333333%;
    }
    
    .r-edit-form[data-body-align="left"] > * > tr > [data-cellid][data-fullwidth]:not( .r-ori-vert ) > * > .r-edit-label {
        width: 16.66666666%;
    }
}

@media screen and (max-width: 767px) {
	.r-vbar-page .r-body {
		padding-top: 15px;
	}

	.r-edit-form > * > tr > [data-cellid].r-ori-vert > [edit-form-cell] > [data-itemid]:not([data-before-same-field]):not(.r-integrated-field), 
	.r-edit-form > * > tr > [data-cellid][data-single] > [edit-form-cell] > [data-itemid]:not([data-before-same-field]):not(.r-integrated-field) {
		padding-bottom: 4px
	}

  .r-vbar-page .nav {
		background: none;
  }
}

[data-itemid="grid_field_totals"] {
	font-weight: bold;
}

.alert-danger,
.alert-danger>h5{
  color: var(--color-alert-danger) !important;
  border-color: var(--color-alert-danger) !important;
  font-weight: bold;
}

.alert-success,
.alert-success>h5{
  color: var(--color-alert-success);
  border-color: var(--color-alert-success); 
  font-weight: bold;
}

.alert-warning,
.alert-warning>h5{
  color: var(--color-alert-warning);
  border-color: var(--color-alert-warning);
  font-weight: bold;
}

.alert-info,
.alert-info>h5{
  color: var(--color-alert-info);
  border-color: var(--color-alert-info);
  font-weight: bold;
}

.rowitemred {
	color: #cc0000;
}        

.rowitemsmaller {
	font-size: 0.85em;
}

.search_suggest {
  font-size: 10pt;
  z-index: 110 !important;
  color: #1a1a1a !important;
  background-color: #f7f7f7 !important;
  border-color: #2a2a2a !important;
  background-image: linear-gradient(to bottom, #f7f7f7 0%, #ddd 100%) !important;
  border-radius: 4px;
}

.radio {
	padding-bottom: 4px;
}

.r-cookie-banner {
    bottom: 40px !important;
}

.r-left:not(.r-left-collapsed) .r-menu [data-menu-top],
.r-left:not(.r-left-collapsed) .r-menu [data-menu-inline] {
    font-size:14px;
}

.public-holiday {
    background:Burlywood;
    color:white;
}

@media print, (min-width: 768px) {
  label.r-view-label {
    width: 33.33333333%;
    text-align: right;
  }
}

.btn-link.glyphicon {
    font-size:16px;
}

/* code snippets */

.r-box-left > .r-box-icon > [data-icontype="text"] {
  font-size: 22px;
  width: 40px;
  height: 40px;
}

@media screen and (min-width: 768px) {
    .snip_title {
        font-size: 15px;
    }    
    
    .snip_body {
        font-size: 22px;
    }    
}

@media screen and (max-width: 767px) {
    .snip_title {
        font-size: 11px;
    }    

    .snip_body {
        font-size: 16px;
    }    

}

.snip_title {
    color: #d0d0d0;
    text-align: right;
    font-family: 'Roboto';
    vertical-align: middle !important;
    width: 70%;
}    
    
.snip_body {
    color: var(--color-page-background) !important;
    text-align: right;
    font-family: 'Roboto';
}    

.snip_link {
  color: var(--color-menu-hover) !important;
  background-color: transparent;
  text-decoration: none;
}

.snip_control {
/*  display: block;
  width: 100%; */
  height: 30px;
  padding: 6px 6px;
  font-size: 12px;
  line-height: 1.4;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.snip_control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.snip_control::-moz-placeholder {
  color: #999999;
  opacity: 1;
}
.snip_control:-ms-input-placeholder {
  color: #999999;
}
.snip_control::-webkit-input-placeholder {
  color: #999999;
}
.snip_control::-ms-expand {
  border: 0;
  background-color: transparent;
}
.snip_control[disabled],
.snip_control[readonly],
fieldset[disabled] .snip_control {
  background-color: #eeeeee;
  opacity: 1;
}
.snip_control[disabled],
fieldset[disabled] .snip_control {
  cursor: not-allowed;
}

.dashboardclockdisplay {
    color: var(--color-title);
    text-align: center;
    background: var(--color-menu);
}

.ecspublicmessagedisplay {
    color: var(--color-title);
    text-align: center;
    background: #010a01;
    min-height: 80px;
    display:flex; 
    align-items: center;
}

.ecspublicmessage {
    letter-spacing: 1px;
    color: var(--body-background-color);
}

@media screen and (min-width: 768px) {
    .dashboardclockdisplay {
        border: 6px solid var(--color-menu-hover);
        padding: 5px;
        border-radius: 4px;
    }
    
    .dashboardclock {
        font-size: 2.1em;
        letter-spacing: 6px;
    }
    
    .dashboarddate {
        font-size: 1.1em;
        letter-spacing: 3px;
    }
    
    .ecspublicmessagedisplay {
        border: 6px solid var(--color-menu-hover);
        padding: 5px;
        border-radius: 4px;
    }
    
    .ecspublicmessage {
        font-size: 1.4em;
    }
}

@media screen and (max-width: 767px) {
    .dashboardclockdisplay {
        border: 3px solid var(--color-menu-hover);
        padding: 5px;
        border-radius: 2px;
    }
    
    .dashboardclock {
        font-size: 1.5em;
        letter-spacing: 6px;
    }
    
    .dashboarddate {
        font-size: 0.8em;
        letter-spacing: 3px;
    }
    
    .ecspublicmessagedisplay {
        border: 3px solid var(--color-menu-hover);
        padding: 5px;
        border-radius: 4px;
    }

    .ecspublicmessage {
        font-size: 0.8em;
        line-height: 1.0;
    }
}

.r-noti-close {
    font-size: large;
}

[data-fieldfilter] .resizable:has(.r-filter-dialog):has(.clear-all) {
  min-width: 310px;
}

[data-dashboard][data-dashboard] [data-dashtype]:not([data-hidden]):not([data-media-hidden]):not(.navbar-toggle) {
  margin: 4px;
}

[data-itemtype="grid_field_label"] {
  white-space: normal;
}

.collapsing {
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .01s;
       -o-transition-duration: .01s;
          transition-duration: .01s;
  -webkit-transition-property: height, visibility;
       -o-transition-property: height, visibility;
          transition-property: height, visibility;
}

.swal-button--proceed,
.swal-button--ok,
.swal-button--yes,
.swal-button--no,
.swal-button--cancel,
.swal-button--confirm,
.swal-button--delete,
.swal-button--danger {
  background-color: var(--color-button-background) !important;
  background-image: linear-gradient(to bottom, var(--color-button-background) 0%, var(--color-button-background) 100%) !important;
  color: var(--body-color) !important;
  font-weight: normal !important;
  border: 1px solid transparent !important;
  border-color: #2a2a2a !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.swal-button--proceed:hover,
.swal-button--ok:hover,
.swal-button--yes:hover,
.swal-button--no:hover,
.swal-button--cancel:hover,
.swal-button--confirm:hover,
.swal-button--delete:hover,
.swal-button--danger:hover,
.swal-button--proceed:focus,
.swal-button--ok:focus,
.swal-button--yes:focus,
.swal-button--no:focus,
.swal-button--cancel:focus,
.swal-button--confirm:focus,
.swal-button--delete:focus,
.swal-button--danger:focus {
  background-color: var(--color-button-background-hover) !important;
  background-image: linear-gradient(to bottom, var(--color-button-background-hover) 0%, var(--color-button-background-hover) 100%) !important;
  border-color: #2a2a2a !important;
  box-shadow: none !important;
}

.toggle-password-eye {
    float: right;
    top: -22px;
    right: 10px;
    position: relative;
    cursor: pointer;
    color: lightgray;
}

.toggle-password-eye-visible {
	color: black !important;
}

.btn-flat {
    padding-top: 4px;
    padding-bottom: 4px;
}

[data-location="supertop"] .open > .dropdown-menu {
    background-color: var(--body-background-color);
}

.navbar .input-group {
  background: var(--body-background-color);
  border-radius: 3px;
  border: none;
  color: var(--body-color);
}

.navbar .input-group:focus-within {
  background: var(--body-background-color);
}

.navbar .input-group .form-control.form-control,
.navbar .input-group .form-control.form-control:focus {
  color: var(--body-color);
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none;
}

.pointer{
    cursor: pointer;
}

.hover:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-menu-hover) !important;
  -webkit-text-decoration-color: var(--color-menu-hover) !important;
}

/* HTML5-QRCode */
#erganicardscanner-qrreader {
    border: none !important;
}

@media screen and (min-width: 768px) {
    #erganicardscanner-qrreader {
        width: 500px;
        margin: auto;
    }    
}

@media screen and (max-width: 767px) {
    #erganicardscanner-qrreader {
        width: 100%;
        margin: auto;
    }    

}

#erganicardscanner-qrreader__scan_region{
    background-color: var(--body-background-color) !important;
    border-radius: 3px;
}

#erganicardscanner-qrreader__dashboard{
    background-color: #343a40 !important;    
}

#erganicardscanner-qrreader__header_message{
    border: none !important;
    background-color: #343a40 !important;    
    color: var(--color-page-background) !important;
}

.html5-qrcode-element {
  border: none;
  color: var(--body-color) !important;
  background-color: var(--color-button-background) !important;
  border-color: #2a2a2a !important;
  background-image: linear-gradient(to bottom, var(--color-button-background) 0%, var(--color-button-background) 100%) !important;
  border-radius: 3px;
  vertical-align: middle;
  text-align: center;
  padding: 6px 6px;
  margin: 3px;
  font-size: 12px;
}

@media screen and (min-width: 768px) {
    .btn-erganicardscanner-declare {
        width: 240px;
        height: 55px;
        display: block;
        margin-bottom: 10px;
        font-size: 22px;
    }
    
    #erganicardscanner-declare-checkinout {
        width: 240px;
        margin: auto;
    }
}

@media screen and (max-width: 767px) {
    .btn-erganicardscanner-declare {
        width: 190px;
        height: 40px;
        display: block;
        margin-bottom: 10px;
        font-size: 18px;
    }
    
    #erganicardscanner-declare-checkinout {
        width: 190px;
        margin: auto;
    }
}

.neonText {
  animation: flicker 1.5s infinite alternate;
  color: #fff;
}

/* Flickering animation */
@keyframes flicker {
    
  0%, 18%, 22%, 25%, 53%, 57%, 100% {

      text-shadow:
      0 0 1px #fff,
      0 0 3px #fff,
      0 0 4px #fff,
      0 0 8px #0fa,
      0 0 10px #0fa,
      0 0 12px #0fa,
      0 0 16px #0fa,
      0 0 20px #0fa;
  
  }
  
  20%, 24%, 55% {        
      text-shadow: none;
  }    
}

.ui-draggable-handle {
    cursor: move;
}
}