*, .btn{
    border-radius:3px;
}


* img{
    border-radius:0px !important;
}

html {
    background:#eee;
}
body{
    font-size:13px;
    font-family:roboto-condensed;
}

body.wait {
    opacity:0.4;
    filter: grayscale(100%);
    cursor : wait;
}

body.wait * {
    cursor : wait;
}

a{
    text-decoration:none;
}



a.underlined{
    display:inline-block;
    border-bottom:1px dotted #aaa !important;
    border-radius:0 !important;
    padding:1px 2px 0px 1px;
}

a.username-account {
    color:#07c;
    font-size:100%;
    display:inline-block;
    padding:0.3em 0.5em 0.3em 0.5em; 
    background:#eee;
}

div {
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box; 
}



.light {
    font-weight:300;
}

hr{
    border:none;
    border-bottom:1px dotted #aaa;
    margin-top:5px;
    margin-bottom:5px;
} 


#footer{
    margin-top:3%;
    padding:3% 0 5% 0;
    color:#1abc9c;
    background:#eee;
}
#footer .content{
    width:1170px;
    margin:0 auto;
}
#footer a{
    color:#1abc9c;
}
#content{
    padding:0% 0% 0% 0%  ;
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;   
    background:#fff; 
    min-height:500px;
    float:left;
    width:80%;    
}


#topnav {
    padding:1% 0% 0% 0%;
    text-align:right;
}

#navbar {
    float:left;
    width:20%;
}

.small {
    font-size:0.6em;
}

#notice{
    margin:0;
    margin-bottom:1em;
    font-size:1.1em;
    font-weight:bold;
}
#notice div{
  background:#fdee58;
}
#notice * ul{
    margin:0;
    margin-left:1.4%;
    padding:1% 3% 1% 1% ;
}

#notice * ul li{
    list-style:none;
    padding:0 0 0 21px;
    margin:3px;
}
#notice li.error{
    list-style:inside none;
    background:url('../images/delete.png') left no-repeat;    
}

#notice li.pass{
    list-style:inside none;
    background:url('../images/success.png') left no-repeat;
}
#notice li.info{
    list-style:inside none;
    background: url('../images/info.png') left no-repeat;
}


.link-button{
    border:none;
    background:none;
    border-bottom:1px dotted #07c;
    border-radius:0 !important;
    color:#07c;
    padding:0 0 0 0;
    margin-right:15px;
    font-size: 1.2em
}
form.gray-form {
    background:#f3f3f3;
    padding:16px 16px 16px 16px ;
}

table {
    font-size:14px;
}

table.nice tr:hover{
    background:#eee;
}
table.nice * table.nice tr:hover{
    background:#ddd;
}
table.nice * a {
    text-decoration:none;
}
table.nice tr td{
    border-bottom:1px dotted #ddd;
    vertical-align:middle;
}

table.nice * table.nice tr td{
    border-bottom:1px dotted #f3f3f3;
    vertical-align:middle;
}


.desc{
    font-size:0.8em;
}
.faint{
    color:#aaa;  
}

.input input[type='text'],.input input[type='number'], .input * input[type='password'],textarea{
    width:360px;
    max-width:100%;
    font-size:13px;
}

input[type='number'],input[type='text'],input[type='password'],textarea, select {
    padding:6px 6px 6px 6px   ;
    background:#eee;
    color:#777;
    border:1px solid #eee;
    max-width:100%;


}

input[type='number']:focus,input[type='text']:focus,input[type='password']:focus,textarea:focus, select:focus {
    color:#000;
    border:1px solid #1abc9c;
    background-color:#fff;
}

input[type='number']:hover,input[type='text']:hover,input[type='password']:hover,textarea:hover, select:hover {
    background-color:#f8f8f8;

}

input[type='checkbox']{
    clear:none;
}
.input label.for-checkbox, label.for-checkbox{
    padding:0;
    margin:0;
    clear:none;
    display: inline-block;
    vertical-align:top;
    line-height:1.8em;
    font-size:13px;
}


.input label{
    display:block;
    font-size:13px;
}

div.input{
    margin-bottom:12px;
}

input[type='file'] {

}

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;  
}

.block-bg{
    background:#f6f6f6;
    padding:0.6em 0.6em 0.6em 0.6em ;
    display: inline-block;
}

.delete:hover{
    color:#e00;
}

.show {
    display:block;
}

.hide{
    display:none;
}

.fancybox-skin {
    position: fixed !important;
    top:0;
}
.fancybox-container{
    padding:2% 200px 2% 200px ;
}
.fancy-custom-close.fancybox-close{
    background:url(../images/close.png) #f00;
    width: 36px;
    height: 36px;
    right:40px;
    top:40px;
}

/* paginator */

div.pagination{
    margin:10px;
    padding:0 0 0 0;
}

.pagination div{
    display:inline-block;
    margin:0;
    display:inline;
    }
.pagination div a{
    display:inline-block;
    padding:0 0.6em 0 0.6em ;
    margin:1px;
    text-shadow: #fff 0px 1px 0px;
    background:#f4f4f4;
    border-radius:0 !important;
    }    
.current-page{
   
    }
.pagination div.current-page a:hover{
    
}

.pagination div.current-page a{
    display:inline-block;  
    background:#444;
    color:#fff; 
    border:none;
    text-shadow:none;
}
.pagination div.current-page a:hover{

}
.pagination div a.first-page, .pagination div a.last-page, .pagination div a.next-page, .pagination div a.prev-page {
    text-decoration:none;
}
.pagination div a.first-page, .pagination div a.last-page{
    color:#aaa;
}
a.first-page:hover, a.last-page:hover, a.next-page:hover, a.prev-page:hover,.pagination div a:hover { 
    background:#aaa;
    color:#fff;
    text-shadow:none;
}
/* end : paginator*/

.mask{
     position:absolute;
     width:100%;
     height:100%;
     padding:330px 4% 4%  4%;
     text-align:center;
     color:#fff;
     left:0; top:0;
     background:url(../images/trans-bg.png);
     font-size:120%;
}

.choose-upload {
    border-radius:3px;
    color:#05d;
    padding:12px 8px 4px 5px ;
    height:22px;
    font-weight:normal;

    display:inline-block;
    cursor:pointer;
    background:url(../images/attach.png) no-repeat 4% #eee;
}

.editing {
    background:#fffff4  !important;
    border:1px solid #229 !important;
    color:#229 !important;
}

.inline-form {
    display:inline;
}

.site-title{
    font-size:200%;
    letter-spacing: -2px;

}

table.data-entry {
    background:#fff;
}

table.data-entry tr.verified td.fprint input{
vertical-align: middle;
}

table.data-entry tr td input:focus,table.data-entry tr td input:hover{
    border:none;
    background:none;
}

table.data-entry tr.verified{
    color:#bbb;
    background:#eee;
}

table.data-entry tr td input,table.data-entry tr td select{
    background:none;
    border:none;
    width:100%;
    color:#000;
    font-weight:normal;
    padding:2 2 2 2;
    font-size:1em;

}

select{
    background:#eee;
    border:none;
    width:100%;
    color:#777;
    padding:4px 6px 4px 6px ;
    border:5px solid #eee;
}

.header th {
    padding:6px 6px 6px 6px ;
}


table.data-entry tr td {
    border-top:1px dotted #ddd;
    margin:none;
    padding:6px 6px 6px 6px ; 

}

table.data-entry tr td:last-child {
    border-right:none;
}

table.data-entry tr td:first-child {
    border-left:none;
}

.black {color:black;}

tr.highlight-dim{
   
}
tr.highlight{
    background:#fff;
}
table.data-entry tr td input, table.data-entry tr td select{
    color:#666;
}

table.data-entry tr.highlight td {
    border:1px solid #eee;
}
table.data-entry tr.highlight td.highlight{
    background:#f3f293;
    border:none;

}
table.data-entry tr.highlight td.highlight input{
    color:#000;
}
table.data-entry tr.highlight td{
    background:#eee;
    border:1px solid #fff;
}

select.ui-datepicker-month, select.ui-datepicker-year {
    padding: 0 0 0 0;
    height:auto;
}
input.date {
    background-image:url(../images/date.png);
    background-position:95px;
    background-repeat:no-repeat;
    padding-right:25px;
    width:120px !important;
}
/*jquery file upload with progress bar*/

.file-upload{
    display:inline-block;
    width:200px;
}
.choose-upload {
    border-radius:2px;
    color:#05d;
    padding:4px 4px 4px 4px ;
    font-weight:normal;
    font-size:14px;
    display:inline-block;
    cursor:pointer;
    background:#ccc;
}


.fprogress .bar{
    background:#afe8d6;
    width:2%;
    padding:12px 0 0 0 ;
    border-radius:0 !important;
}
.fprogress .text{
    padding:2% 0% 2% 0%  ;
}

.fprogress {
    display:block;
    width:280px;
    font-size:13px;
    color:#777;
    margin:4px;
    margin-left:0px;
}
  

.form input[type='number'],.form input[type='text'],.form button, .form select{

    width:24em;
}

.form button{
    width:100%;
}

#capture-photo {
    width:100%;
    height:350px;
    background:url(../images/default-photo-fade.png) center center #fff no-repeat;
    background-size:70% ;
}

#capture-photo img {
    width:100%;
    height: 100%;
}

img[src='Error.src']{
    display: none;
}

#capture-fprint {
    width:100%;
    height:350px;
    background:url(../images/fingerprint-scan-big-fade.png) center center #eee no-repeat;
    background:url(../images/fingerprint-scan-big-fade.png) center center #eee no-repeat;
    background-size:70% ;
}

.inverted {
    filter: invert(100%);
}

.contrast{
    filter: contrast(160%) invert(100%);
}

.chkbox-label{
    color:#888;
}

.fa{
    line-height:1.5em;
}

.btn.capture:hover{
    background:#58D68D;
}

.cell{
    padding:0.5em 0.5em 0.5em 1.5em ;
    font-weight:bold;
}

table.db{
    width:100%;
}

.db tr td {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}


.form-error label{
    color:#c11;
}
.invalid-input, input.invalid-input, select.invalid-input {
    border:2px solid #f11;
}

div.invalid-input {
    border:2px solid #c11;
    padding:1.3em;
}

.assistance .invalid-input.main-label {
    color: #c11;
    font-weight:bold;
    border:none;
}

#counter {
    font-size:2em;
    font-weight:300;
    color:#ccc;
    display:block;
    margin-bottom:5px;

}

#webcam, #canvas {
    width:540px;
    height:400px;    
    background: #eee;
}

#photo img {
    width:100%;
    height:210px;
}

tr.disabled{
    color:#666;
}

.filters{
    /*display:none;*/
}
.filter-heading {
  text-overflow: ellipsis;
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;    
}

.bbox {
    display:inline-block;
    font-size:0.7em;
    padding:0em 0.5em 0em 0.5em ;
    vertical-align: top;
}

.bbox.gray{
    background:#eee;    
}
.bbox.green{
    background:#1abc9c;   
    color:#fff;       
}
.bbox.yellow{
    background:#f1c40f;   
    color:#fff;      
}

.bbox.blue{
    background:#34495E; 
    color:#fff;  
}

#modal {
    position:absolute;
    left:0px;top:0px;
    width:100%;
    height:1200px;
    min-height:100%;
    background:url(../images/trans-bg.png);
    padding:9% 9% 9% 9% ;
}

#modal div{
    background:#fff;
    height:400px;
    overflow-y:auto;
    padding:2em 2em 2em 2em ;
}

#modal div iframe {
    width:100%;
    border:none;
    height:100%;
}

 /*VUE errors*/
#errors {
    padding:0.5em;
    border:1px solid #f00;
    margin-top:0.4em ;
    padding-left:1em ;
    padding-right:1em ;
    padding-bottom:1em ;
    margin-bottom:0.4em; 
    color:#f00;
}

[v-cloak] {display:none;}
[v-cloak].wait {display:block;}
.btn-primary-outlined {
    border: 1px solid #1abc9c;
    color: #1abc9c;
}

.btn-inactive-outlined {
    border: 1px solid #777;
    color:#777;

}

.btn-active-link-outlined {
    background: transparent;
    border: none;
    color:#1abc9c;
    text-decoration: underline;
    padding-left:0;
    padding-right:0;
}

.btn-inverse-outlined {
    border: none;
    color:#34495E;
    border: 1px solid #34495E;
}

.btn-danger-outlined {
    border: none;
    color:#c03;
    border: 1px solid #c03;
}

.btn-inactive-link-outlined {
    border: none;
    color:#777;
    text-decoration: underline;
    padding-left:0;
    padding-right:0;
    background: transparent;
}

.table td {
    height:33px;
}

#progress {
    padding:1em 1em 1em 1em ;
    margin-bottom:1em;
    margin-top:1em;
    background:#fff;
    border:1px solid #34495E;
    color:#05c;
    width:100%;
    position:relative;    
    border-radius:0px;
    font-size:14px;
    font-weight:bold;
}
#progress i.far, #progress i.fas{
    /*color:#888;*/
}
#progress.error{
    color:#c30;
    background:transparent;
    border:1px solid #c30;
}

#progress.complete, #progress.success {
    color:#088962;;
    background:transparent;
    border:1px solid #1abc9c;;
}

#progress.no_device, #progress.low_quality, #progress.already_scanned, #progress.already_enrolled, #progress.failed {
    color:#c30;
    background:transparent;
    border:1px solid #c30;
}