/*@font-face {
    font-family: 'BebasNeue';
	src: url('../fonts/Brandon_light.eot'),
		 url('../fonts/BebasNeue.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Brandon';	
	src: url('../fonts/Brandon_light.eot'),
		 url('../fonts/Brandon_light.ttf');
    font-weight: normal;
    font-style: normal;
}*/

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #333;
  /*background: #18393d url('../../assets/img/afnie-bg.png') repeat;*/
  background: #18393d url('../../assets/img/bg-eeblack-login1.jpg') center repeat;
}


*{
  margin: 0;
  padding: 0;
}



img {
	max-width: 100%;
}

h1,
h2,
h3 {
	margin: 0;
	padding: 0;
}

h1 {
  font-size: 3.7em;
  letter-spacing: 5px;
}

h2,
h2 a {
  font-size: 40px;
  letter-spacing: 1px;
  font-style: italic;
  color: #94b1af;
}

h3 {
  font-size: 2.3em;
  letter-spacing: 0.5px;
}

h4 {
  font-size: 2.07em;
  letter-spacing: 0.5px;
  color: white;
}

h5 {
  font-size: 1em;
  letter-spacing: 0.5px;
}

h6 {
  font-size: 1.85em;
  letter-spacing: 0.5px;
}

a:focus {
	outline: none;
}

.no-margin {
	margin: 0 !important;
}

.no-padding {
	padding: 0 !important;
}

.no-padding-sides {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.no-padding-left {
	padding-left: 0 !important;
}

.no-padding-right {
	padding-right: 0 !important;
}

.no-padding-bottom {
	padding-bottom: 0 !important;
}

.no-scroll {
	overflow: hidden;
}

main.container{
    margin-top:40px;
}

.container{
    width:90%;
}

.navbar-brand img{
height:28px;
}

nav.navbar{
background: #222 !important; 
padding:0px 8px;
}

.PageTitle{    
  background: url('../../assets/img/header-bg.png') repeat-x;
  /*height:40px;*/
  padding: 40px 0px 16px 0px;
  margin-bottom: 40px;

  border-bottom:1px solid rgba(255,255,255,.32);
}

.PageTitle h2{
    text-transform:uppercase;
    color:#fff;
    font-size:18px;

    font-style:normal;
    display:inline-block;
}

.PageTitle a:hover h2,
.PageTitle a:hover i{
    color:#f5d408;
    
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}

.PageTitle i{
    color:#fff;
    display:inline-block;
    margin-right:8px;
    font-size: 18px;
}

.PageTitle span{
    color:#f5d408;
    font-weight:bold;

    margin-left:8px;
}

.PageTitle input[type]{
    background:none;
    color:#fff;
    /*font-weight:bold;*/
    border:none;
    text-align:right;

    width:160px;
}

.PasswordTitle{    

  margin-left:16px;
  padding:12px;

  /*border-bottom:1px solid #777;*/

  background: #2b4a83; /* Old browsers */
background: -moz-linear-gradient(top,  #2b4a83 0%, #296faa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #2b4a83 0%,#296faa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #2b4a83 0%,#296faa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b4a83', endColorstr='#296faa',GradientType=0 ); /* IE6-9 */

}


.PasswordTitle h2{
    text-transform:uppercase;
    color:#fff;
    font-size:18px;

    font-style:normal;
    display:inline-block;
}

.PasswordTitle i{
    color:#f5d408;
    display:inline-block;
    margin-right:8px;
}

.Content{
    /*margin:50px auto 40px auto;*/
     margin:40px auto 16px auto;
}

.Content p{
    color:#fff;
    text-transform:uppercase;
    text-align:right;
}

.ClockHolder{
    background:#fff;
    text-align:center;
    padding: 0px 5px;
    padding: 51px 0px;
    border: 2px solid #000;
    /*margin:0 auto;*/
}
.Content #date {
  text-align: left !important;
  font-size: 24px;
  font-weight: 600;
}

.ClockHolder span,
.ClockHolder p{
    display:inline-block;
    margin: 0px;
}

.ClockHolder .unit{
    background:none;
    font-size: 160px;
    font-weight:bold;
    line-height: normal;
    color:#000;
    display: inline-block;

}

  .ClockHolder .unit#minutes {
    color: #000;
  }

  .ClockHolder .unit#seconds {
    color: #000;
  }

.ClockHolder .unit#ampm{
    color:#3c3c3c;
    font-size:52px;
    font-weight:normal;

    margin-left:16px;
    margin-top:-16px;

}

.ClockHolder .Delimiter {
  color: #000;
  font-size: 140px;
  font-weight: bold;
  line-height: normal;
  margin: 0px 4px;
}

.ClockHolder .Delimiter.One {
}
  .ClockHolder .Delimiter.Two {
    color: #000;
  }

.ButtonHolder{
  padding-top: 38px;
}

.ButtonHolder input[type="button"]{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2b4a83+0,296faa+100 */
background: #2b4a83; /* Old browser0s */
/* background: -moz-linear-gradient(top,  #2b4a83 0%, #296faa 100%); /* FF3.6-15 */
/* background: -webkit-linear-gradient(top,  #2b4a83 0%,#296faa 100%); /* Chrome10-25,Safari5.1-6 */
/* background: linear-gradient(to bottom,  #2b4a83 0%,#296faa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b4a83', endColorstr='#296faa',GradientType=0 ); /* IE6-9 */

background: #b7830e; /* Old browsers */
background: -moz-linear-gradient(top, #b7830e 0%, #e2b348 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b7830e 0%,#e2b348 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #b7830e 0%,#e2b348 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7830e', endColorstr='#e2b348',GradientType=0 ); /* IE6-9 */


-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

padding: 36px;
color:#000;
/*border:1px solid #8fa3c2;*/
border:1px solid #333;
font-size: 32px;
font-weight: 600;

width: 100%;

margin-top:16px;

-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;

cursor:pointer;
}

.ButtonHolder input[type="button"]:hover {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#296faa+0,2b4a83+100 */
  /*background: #296faa; /* Old browsers */
  /*background: -moz-linear-gradient(top,  #296faa 0%, #2b4a83 100%); /* FF3.6-15 */
  /*background: -webkit-linear-gradient(top,  #296faa 0%,#2b4a83 100%); /* Chrome10-25,Safari5.1-6 */
  /*background: linear-gradient(to bottom,  #296faa 0%,#2b4a83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#296faa', endColorstr='#2b4a83',GradientType=0 ); /* IE6-9 */
  background: #e2b348; /* Old browsers */
  background: -moz-linear-gradient(top, #e2b348 0%, #b7830e 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #e2b348 0%,#b7830e 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #e2b348 0%,#b7830e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2b348', endColorstr='#b7830e',GradientType=0 ); /* IE6-9 */
}

.ButtonHolder input[type="button"]:disabled {
    background: #a7a7a7;
    color:#666;
}

.LogsHolder {
  padding: 8px;
  background: #fcfcfc;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 92px;
  border: 2px solid #000;
}
  .LogsHolder .tbl-info {
      display: table;
      width: 100%;
  }
  .LogsHolder .tbl-info .cell-img {
    display: table-cell;
    width: 100%;
    text-align: center;
  }
  .LogsHolder .img-holder {
    margin: 0px auto 16px auto;
    width: 100%;
    height: 100%;
    border: 1px solid #333;
  }
  .LogsHolder .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .LogsHolder .tbl-info .cell-img p {
    color: #111;
    margin-bottom: 0px;
    font-weight: 700;
    font-size: 23px;
  }
  .LogsHolder .tbl-info .cell-img p .student-no {
    border-right: 2px solid #333;
    padding-right: 8px;
    margin-right: 8px;
  }
  .tbl-info .qr-scan input[type="text"] {
    background-color: unset;
    border: none;
    padding: 0px;
    margin-bottom: 8px;
    font-size: 22px;
    color: #111;
    width: 140px;
  }

  .tbl-info .qr-scan input[type="text"]:last-of-type {
    font-weight: 700;
  }

  .tbl-list{
    border: 2px solid #000;
  }
  .tbl-list tbody {
  display: block;
  height: 214px;
  font-size: 14.1px;
  overflow: hidden;
  /*overflow-y: scroll;*/
  }
  .tbl-list thead {
    width: calc(100% - 1em);
  }
  .tbl-list thead tr,
  .tbl-list tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  /*.tbl-list thead tr th:first-child {
    width: 333px;
  }*/
  .tbl-list table thead tr th {
    background-color: #eee !important;
    color: #333;
    padding: 8px;
    border: 1px solid #ddd;
  }
  .tbl-list table tbody tr td {
    color: #333;
    padding: 9px 8px;
     border: 1px solid #ddd;
  }
  .tbl-list table tbody tr:nth-child(even) td {
    background-color: #eee;
  }

      .LogsHolder .LogsItem {
        height: 440px;
        /*overflow-y:scroll;*/
        overflow: hidden;
      }

.LogsHolder table{
    width:100%;

}

.LogsHolder .name{
    color:#fff;
    border-bottom:1px solid #246296;
    padding-bottom:8px;
}

.LogsContent {
  background: #fff;
}

.LogsContent th {
  border-bottom: 1px solid #246296;
  padding-bottom: 8px;
}

.LogsContent tr td{
    padding:6px 0px;
}

.LogsContent input[type="text"],
.LogsContent input[type="text"]:disabled{
    background: none;
    border:none;

    color:#333;

    /*width:200px;*/

}

.navbar-nav {
      flex-direction: row;
      margin:0px;
    }
    
    .nav-link {
      padding-right: .5rem !important;
      padding-left: .5rem !important;

      min-width:180px;
      text-align:right;
    }

    .dropdown-item{
      text-align:left;
    }

.dropdown .dropdown-menu{
    background:#222;

    color:#fff;

    /*left:-120px;*/
    right:0px;
}

.dropdown .dropdown-menu a{
    color:#fff;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}

.dropdown .dropdown-menu a:hover{
    color:#fff;
    background:#0f7a8a;
}

.dropdown .dropdown-menu a i{
    margin-right:8px;
}

.ContentHolder{
    background:#fff;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    width:100%;

    padding:60px 20px;
    text-align:left;
}

.ContentHolder input[type="text"]:disabled{
    background:none;
    border:none;
}

.FormHolder{
margin:0px;
}

.FormHolder form{
width:100%;
}


.FormHolder input[type="text"],
.FormHolder input[type="password"],
.FormHolder textarea{
border:1px solid #ccc;
margin:4px 0px;

-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}

.FormHolder input[type="text"]:focus,
.FormHolder input[type="password"]:focus,
.FormHolder textarea:focus {
    border: 1px solid #777;
    box-shadow:unset !important;
}

.FormHolder input[type="submit"],
.FormHolder a.btn-default{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2b4a83+0,296faa+100 */
background: #2b4a83; /* Old browsers */
background: -moz-linear-gradient(top,  #2b4a83 0%, #296faa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #2b4a83 0%,#296faa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #2b4a83 0%,#296faa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b4a83', endColorstr='#296faa',GradientType=0 ); /* IE6-9 */

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

padding:8px 24px;
color:#fff;
border:1px solid #8fa3c2;



-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;

cursor:pointer;
}

.FormHolder input[type="submit"]:hover,
.FormHolder a.btn-default:hover{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#296faa+0,2b4a83+100 */
background: #296faa; /* Old browsers */
background: -moz-linear-gradient(top,  #296faa 0%, #2b4a83 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #296faa 0%,#2b4a83 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #296faa 0%,#2b4a83 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#296faa', endColorstr='#2b4a83',GradientType=0 ); /* IE6-9 */

}

.FormHolder a.BackBtn{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ce2929+0,723d3d+100 */
background: #ce2929; /* Old browsers */
background: -moz-linear-gradient(top,  #ce2929 0%, #723d3d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ce2929 0%,#723d3d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ce2929 0%,#723d3d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce2929', endColorstr='#723d3d',GradientType=0 ); /* IE6-9 */

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

padding:10px 24px;
color:#fff;
border:1px solid #ce2929;



-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;

cursor:pointer;
}

.FormHolder a.BackBtn:hover {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#723d3d+0,ce2929+100 */
background: #723d3d; /* Old browsers */
background: -moz-linear-gradient(top,  #723d3d 0%, #ce2929 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #723d3d 0%,#ce2929 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #723d3d 0%,#ce2929 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#723d3d', endColorstr='#ce2929',GradientType=0 ); /* IE6-9 */

text-decoration:none;
}


.FormHolder span{
    text-align:left;
    font-size:12px;
    display:block;
}

.FormHolder .text-danger ul{
    padding:0px;
    margin:0px;

}

.FormHolder .text-danger ul li{
    list-style:none;
    text-align:left;
    font-size:14px;
}

.TableHolder{
/*margin:24px 16px;*/
margin:0px 16px;
text-align:left;
}

.TableHolder .table{
margin-bottom:0px;
}

.TableHolder .table th, 
.TableHolder .table td{
padding:2px 4px;

font-size:14px;
}

.LoginHolder{
    background:#fff;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    width:400px;    
    margin:0px auto;
    padding:20px 20px;
    text-align:center;
}

.LoginHolder h3{
    font-size:20px;
    text-transform:uppercase;
    text-align:left;
    letter-spacing:normal;
    font-weight:bold;
}

.LoginHolder p{
    font-size:14px;
    text-align:left;
    margin-top:16px;
}


.LoginHolder a.ForgotPw{
color:#777;
text-align:left;
text-decoration:none;
display:block;
padding: 9px 0px 0px 0px;

-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}

.LoginHolder a.ForgotPw:hover{
text-decoration:none;
color:#333;

}

.LogoHolder{
    /*background:#2b4a83;
    text-align:center;*/
    /*padding:20px 0px;*/
    width:300px;
    margin:0px auto;
}
/*logo update*/

.LoginLogoHolder {
	width: unset;
	text-align: center;
	display: block;
}
.LogoHolder img{
    width: 200px;
    margin: 16px auto 32px auto;
}

.CustomFile .input-group-btn{
background: #17a2b8; /*#17a2b8*/
color:#fff;
font-size:14px;

padding:8px;
height:38px;

margin-top:4px;

cursor:pointer;

-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}

.CustomFile .input-group-btn:hover{
background: #007bff;
}

.CustomFile .input-group-btn label{
padding:0px;
margin:0px;
cursor:pointer;

}

body.CustomDTR{
overflow:hidden;
}

.dtr-title {
	padding: 6px 0px !important;
}

.dtr-title h2 {
	font-size: 15px; !important;
}

.dtr-content {
	margin: 14px auto 40px auto !important;
}

.center {
  text-align: center;
}
.forgot-password h1 {
  font-size: 24px;
  padding-bottom: 8px;
  letter-spacing: .32px;
  font-weight: 600;
}
.forgot-password p {
  color: #aaa;
  text-align: unset;
  border-bottom: 2px dotted #ccc;
  text-transform: unset;
  margin: 0px auto 24px auto;
  padding-bottom: 16px;
  width: 50%;

}
.forgot-password input[type="text"] {
  width: 48% !important;
  margin: 0px auto 12px auto;
  padding: 10px 18px;
  color: #777;
}
.forgot-password a {
  padding: 9px 24px 11.5px 24px !important;
}
.tbl-dtr thead tr th {
  padding: 16px;
}
.kiosk-content {
  
}
.kiosk-content p {
  display: inline-block;
}
.kiosk-panel {
  max-width: 1920px;
}

@media only screen and (min-width: 1280px) {
  .dtr-table table th, .dtr-table table td {
    font-size: 11.5px !important;
}

.dtr-content{
margin:10px auto 40px auto !important
}

.TableHolder .table th, 
.TableHolder .table td{
padding:0px 4px;
}
}


@media only screen and (min-width: 976px) {
    .dtr-table table th,
.dtr-table table td {
    font-size: 11.5px !important;
}

.dtr-content{
margin:10px auto 40px auto !important
}

.TableHolder .table th, 
.TableHolder .table td{
padding:0px 4px;
}
}