/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */


body {
  font-family:'db_helvethaica_x';
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}
.width-auto{
  width: auto;
}
.btn-white {
  color: #000000;
  background-color: #fff;
  border-color: #E4E4E4;
  box-shadow: 0 3px 6px #00000059;
}
.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}
.btn-search {
  color: #fff;
  background-color: #1CA6DF;
}
.flex-search-date {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flex-contant-button {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.flex-button {
  display: flex;
  align-items: center;
}
.input-date{
  background-color: #194888;
  color: white;
  text-align: center;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-family:'db_helvethaica_x';
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

/* Sticky Content styles
-------------------------------------------------- */

.f20{
  font-size: 20px;
}
.f22{
  font-size: 22px;
}
.text-blue{
  color: #194888 !important;
}
.container-fluid.content{
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
}
.content-bg-dashboard {
  background-color: white;
  border-radius: 5px;
  border: #E4E4E4;
  box-shadow: 0 3px 6px #00000059;
}
.content-bg-dashboard-shadow {
  box-shadow: 0 3px 6px #00000059 !important;
}
.line-dashboard{
  border-left: solid #1E73AC;
}
.content-bg {
  background-color: white;
  border-radius: 15px;
  margin-bottom: 2%;
  padding: 2% 3%;
  border: #E4E4E4;
  box-shadow: 0 3px 6px #00000059;
}
.content-bg-blue {
  background-color: #BCD8F0;
  border-radius: 15px;
  margin-bottom: 2%;
  padding: 2% 3%;
  box-shadow: 0 3px 6px #00000059;
}
.content-bg-blue .flex {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: end;
}
.content-bg-blue .flex-dopa{
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.content-bg-blue .flex-dopa .flex-btn-dopa {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.content-bg-blue .flex-header {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: end;
}
.content-bg-blue .flex-header .yellow55 {
  font-size: 55px;
  color: #F79421;
  padding-right: 10px;
}
.content-bg-blue .flex-header .blue44 {
  font-size: 44px;
  color: #194888;
  margin-bottom: 21px;
}
.content-h2-list{
  color: #44566A;
  border-bottom: 2px solid #e3e6f0
}
.btn_add{
  color: white !important;
  background-color: #1E73AC !important;
  margin-top: 0 !important;
  margin: 0 10px;
}.btn_add.list{
  color: white !important;
  background-color: #1E73AC !important;
  margin-top: 0 !important;
  margin: 0 0;
}
.btn_edit{
  color: white !important;
  background-color: #F79421 !important;
  margin-top: 0 !important;
  /* margin: 0 10px; */
}
.btn_delete{
  color: white !important;
  background-color: #F36262 !important;
  margin-top: 0 !important;
  margin: 0 10px;
}
.btn_apikey{
  color: #194888 !important;
  background-color: #94DAFD !important;
}
.btn_online{
  color: white !important;
  background-color: #28B463 ;
  margin-top: 0 !important;
  margin: 0 10px;
}
.btn_offline{
  color: white !important;
  background-color: #F36262 !important;
  margin-top: 0 !important;
  margin: 0 10px;
}
.btn-readcard{
  /* border-radius: 5px;
  font-size: 26px; */
  color: white !important;
  background: #194888 !important;
}
.btn-help{
  color: #194888 !important;
  background-color: #F8F8F8 !important;
  padding: 5% 25%;
  border-radius: 20px;
  border-width: 1px;
  border-color: #B3BBC5 !important;
  box-shadow: none;
}
.content-container {
  position: relative;
  text-align: center;
  color: white;
}
.content-container a{
  color: white;
}
.content-centered-folder {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content-bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.content-top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.content-top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.content-bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.content-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.text-start {
  text-align: start;
}
.font-bold{
  font-weight: bold;
}
.text-gray {
  color: #44566A;
}
.icon-color-pen{
  color: #F79421;
}
.icon-color-trash{
  color: #F36262
}
.icon-color-view{
  color: #1E73AC
}
.icon-color-dashboard{
  color: #1CA6DF;
}
.icon-color-on{
  color: #28B463;
}
.icon-color-off{
  color: #E74C3C;
}
form.activity {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
}

form label {
	font-size:26px;
	color:#44566A;
	/* cursor:pointer; */
}

form label,
form input {
	/* float:left; */
	clear:both;
}

form input {
	margin-bottom:20px;
	padding:12px;
	width:40%;
  font-size: 22px;
	outline:none;
	/* border:1px solid #B3BBC5; */
	border-radius:10px;
  border: 1px solid #E4E4E4;
  box-shadow: 0 3px 6px #00000059;
	display:inline-block;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	        box-sizing:border-box;
    -webkit-transition:0.2s ease all;
	   -moz-transition:0.2s ease all;
	    -ms-transition:0.2s ease all;
	     -o-transition:0.2s ease all;
	        transition:0.2s ease all;
}

form input[type=text]:focus,
form input[type="password"]:focus {
	border-color:cornflowerblue;
  box-shadow: 0 3px 6px #6495ed6b;
}


input[type=submit] {
	padding:15px 50px;
	width:auto;
	background:#1abc9c;
	border:none;
	color:white;
	cursor:pointer;
	display:inline-block;
	float:right;
	clear:right;
	-webkit-transition:0.2s ease all;
	   -moz-transition:0.2s ease all;
	    -ms-transition:0.2s ease all;
	     -o-transition:0.2s ease all;
	        transition:0.2s ease all;
}

input[type=submit]:hover {
	opacity:0.8;
}

input[type="submit"]:active {
	opacity:0.4;
}
form input:read-only{
  background-color: #e5e5e5;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #B3BBC5;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #B3BBC5;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #B3BBC5;
}
form input.error{
  color: red;
  border-color: red;
  box-shadow: 0 3px 6px #ff000059;
}
form label.error{
  color: red;
}

.custom-switch.custom-switch-on-success .custom-control-input:checked ~ .custom-control-label::before {
  background: #28a745;
  border-color: #28a745;
}

.custom-switch.custom-switch-on-success .custom-control-input:checked:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px rgba(40, 167, 69, 0.25);
}

.custom-switch.custom-switch-on-success .custom-control-input:checked ~ .custom-control-label::after {
  background: #ffffff;
}
.custom-switch.custom-switch-off-danger .custom-control-input ~ .custom-control-label::before {
  background: #dc3545;
  border-color: #dc3545;
}

.custom-switch.custom-switch-off-danger .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.custom-switch.custom-switch-off-danger .custom-control-input ~ .custom-control-label::after {
  background: #ffffff;
}

/* for lg */

.custom-switch.custom-switch-lg .custom-control-label {
  padding-left: 3rem;
  padding-bottom: 2rem;
}

.custom-switch.custom-switch-lg .custom-control-label::before {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}

.custom-switch.custom-switch-lg .custom-control-label::after {
  width: calc(2rem - 4px);
  height: calc(2rem - 4px);
  border-radius: calc(3rem - (2rem / 2));
}

.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(calc(2rem - 0.25rem));
}

/* for xl */

.custom-switch.custom-switch-xl .custom-control-label {
  padding-left: 4rem;
  padding-bottom: 2.5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::before {
  height: 2.5rem;
  width: calc(4rem + 0.75rem);
  border-radius: 5rem;
}

.custom-switch.custom-switch-xl .custom-control-label::after {
  width: calc(2.5rem - 4px);
  height: calc(2.5rem - 4px);
  border-radius: calc(4rem - (2.5rem / 2));
}

.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(calc(2.5rem - 0.25rem));
}

form .content-footer{
  width: 100%;
  margin-top: 5%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}
.content-footer.remark{
  justify-content: space-between;
}
.content-footer .btn-cancel {
  border-radius: 5px;
  margin-right: 10px;
  font-weight: bold;
  font-size: 26px;
  font-weight: bold;
  background: white;
  color: #194888;
	text-decoration: none;
	transition: all 0.4s;
	line-height: normal;
	border: none;
  box-shadow: none;
}
.content-footer .btn-ok {
  border-radius: 5px;
  font-size: 26px;
  background: #194888;
  color: white;
	text-decoration: none;
	transition: all 0.4s;
	line-height: normal;
	border: none;
}
.select2-container {
  width: 40%;
  margin-bottom: 20px;
  border-radius: 10px !important;
  border: #E4E4E4 !important;
  box-shadow: 0 3px 6px #00000059 !important;
}

.progressbarWrapper {
	height: 50px;
  /* width: 500px; */
  display: block;
  /* margin: auto; */
  margin-top: 3vh;
	position: relative;
	background: rgb(172, 172, 172);
	padding: 3px;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

 #greenBar {
  display: block;
  height: 100%;
  width: 0px;
  background-color: rgb(65 233 110);
  background-image: linear-gradient(
    center bottom,
    rgb(65 233 110) 37%,
    rgb(41, 185, 80) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  font-size: 20px;
  text-align: center;
  color:#fd5f5f;
}

@font-face {
	font-family: "NTF Grand"; 
	src: url(../fonts/NTF-Grand-Regular.otf) format("opentype"),
	 url("//db.onlinewebfonts.com/t/b30ffe63cc57ffdba315d296d0ca85b0.eot"),
	 url("//db.onlinewebfonts.com/t/b30ffe63cc57ffdba315d296d0ca85b0.eot?#iefix") format("embedded-opentype"), 
	 url("//db.onlinewebfonts.com/t/b30ffe63cc57ffdba315d296d0ca85b0.woff2") format("woff2"), 
	 url("//db.onlinewebfonts.com/t/b30ffe63cc57ffdba315d296d0ca85b0.woff") format("woff"), 
	 url("//db.onlinewebfonts.com/t/b30ffe63cc57ffdba315d296d0ca85b0.ttf") format("truetype"), 
	 url("//db.onlinewebfonts.com/t/b30ffe63cc57ffdba315d296d0ca85b0.svg#NTF-Grand-Regular") format("svg"); 
	 }
  
/* body{
	background:#02143c;
	margin:0;
	padding:0;
	min-height:100vh;
} */

.wrapperBar{
	/* height:75vh; */
	margin:10vh auto 0 auto;
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

.wrapperBar .bars,
.wrapperBar .clock{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
}
.wrapperBar .bars{
	height:100%;
}


.wrapperBar .bars div{
	width:5em;
	transition:ease 0.33s;
	align-self:flex-end;		
}


.wrapperBar .clock div{
	display:flex;
	align-items:center;
	width:15em;
}

.wrapperBar .clock div span{
	font-size:4em;
	text-align:center;
	color:#eef;
	width:100%;
	vertical-align:bottom;
	font-family:NTF Grand;
	font-variant-numeric:tabular-nums;
}

.seconds{
	background:#009fff;
}
.minutes{
	background:#007ddd;
}
.hours{
	background:#005bbb;
}

.time{
	background:#1297ff;
	width:100%;
}

.settings-container {
	border-radius: 15px;
	background-color: #fff;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.349);
	display: flex;
	flex-direction: column;
	padding: 24px 32px;
  margin-top: 30px;
	border: 1px solid #e4e4e4;
}
.settings-title {
  align-self: stretch;
  flex: 1;
  border-bottom: 2px solid #e3e6f0;
  max-width: 100%;
  width: 1010px;
  font-size: 32px;
  color: #44566a;
  letter-spacing: -0.32px;
}
.settings-content {
  display: flex;
  margin-top: 24px;
  width: 100%;
  flex-direction: column;
  align-items: start;
  padding: 0 32px;
}
.setting-item {
  display: flex;
  width: 430px;
  max-width: 100%;
  flex-direction: column;
  margin-bottom: 12px;
}
.setting-label {
  color: #44566a;
  font-size: 26px;
  letter-spacing: -0.26px;
  margin-bottom: 13px;
}
.select-wrapper {
  position: relative; /* Make the wrapper relative for absolute positioning */
}
.setting-select {
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.349);
  display: flex;
  min-height: 42px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px 10px 12px;
  border: 1px solid #cdd3d9;
  font-size: 19px;
  color: #6c757d;
  cursor: pointer;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.setting-select::-ms-expand {
  display: none;
}
.select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  pointer-events: none;
}