body {
    background-color: black;
}


li {
	display: inline;
	list-style: none;
}

#logo {
	height: 35px;
	margin-bottom: 0;
}

#theBody{
    height:100%;
    width:100%;
    position:absolute;
}

/*used to highlight ui elements that require attention from the user*/
/*.faulted{
    background-color: red !important;
}*/


/*workaround needed for firefox...force it to highlight on focus*/
/*.w3-select:active {
	background-color: royalblue !important;
    color: black !important;
}*/

/*#qcfiltermodal{
    z-index: 10001;
    position:absolute; 
    left: 0px;
    top: 50px;
    height: 100%;
    overflow: hidden;
    width:50%;
    transition-property:all;
    transition-duration:1.6s;
}*/

#qcfiltermodal table{
    overflow: hidden;
}

#filtertablecontent{
    width:100%;
    z-index: 10002;
    display:table-cell;
    overflow:hidden;
    margin-top:20px;
    text-align:center;
    background-color: rgba(0,0,0,0.97);
    transition-property:all;
    transition-duration:1.8s;
}


#filtertablecontent.collapsed{
   display:none;
}

/*#qcfiltermodal.collapsed:after{
    content:"☰ Filters";
    position:absolute;
    top:100px;
    left:20px;
}*/

/*#filtertabletab:after{
   content:"☰ Filters";
   position:relative;
   top:-90%;
   left:100%;
}*/

/*#npo_select:focus{
    background-color: royalblue !important;
    color: white !important;
}

#tribal_select:focus{
    background-color: royalblue !important;
    color: white !important;
}*/


header h2{
    margin-left:6px;
    margin-top:-4px;
    background-image:url()
}

.imgButton {
	cursor: pointer;
}

.underline {
	text-decoration: underline;
}

.w3-btn:hover {
	opacity: .8;
}

.w3-btn:active {
	opacity: .5;
}

.ota.newlayout{
    height:15% !important;
}
.ota.oldlayout{
    height:30% !important;
}

.otamodal { 
    width:100%;
    z-index:1000;
    min-height:50%;
    height:auto;
    position:absolute;
    top:-1%;
    left:1%;
    display:none;
    background-color:#101010;
    opacity:100;
    font-size:1.0em;
    color:#FFFFFF;
    padding:20px;
    font-size-adjust:initial
}

.otamodal b{
    color:cyan;
    font-size:1.0em;
}

.ota-modal-item:hover{
    background-color: #AAA;
}

.ota-window-btn{
     text-decoration: none;
    float: right;
    font-size: 24px;
    font-weight: bold;
    color: gray;
    z-index:20;
    margin-right:4px;
}

.ota-window-btn:hover, .ota-window-btn:focus{
    color: #FFF;
    text-decoration: none;
    cursor: pointer;
}


.ngExpand{
    display:block;
}
.ngCollapse{
    display:none;
}

.ota-expanderbtn{
    background-color:#0067cb;
    border-radius:50%;
    height:16px;
    width:16px;
    line-height:13px !important;
    font-size:16px !important;
    text-align:center;
    cursor:pointer;
    color:white;
}
.ota-expanderbtn:hover{
   background-color:cyan;
   color: black;
}
.ota-expanderbtn.collapsed:before{
   content:"+";
}
.ota-expanderbtn:not(.collapsed){
   line-height:13px !important;
}
.ota-expanderbtn:not(.collapsed):before{
   content:"-";
}

.ota-fullwidth{
    width: 100%;
}
.ota-halfwidth{
    width: 50%;
}
.ota-zerowidth{
    width: 0%;
}

.alert-flash {
    background: rgba(255, 0, 0, .8) !important;
    /*background-image: radial-gradient(80% 20%, red, #131313);*/
}

.signal-flash {
    background-color: royalblue !important;
}
/*:focus {
	border: 2px solid red !important;
}*/

@media screen and (min-width:1025px) {
    .license {
        width: 100%;
        max-width: 330px;
        height: 85px;
        font-size: 30pt;
        text-align: center;
        text-transform: uppercase;
    }
}

/* This is the current screen size for most data entry clerks. */
@media screen and (max-width:1024px) and (min-width:941px) {
    .license {
        width: 100%;
        max-width: 330px;
        height: 75px;
        font-size: 20pt;
        text-align: center;
        text-transform: uppercase;
    }

    label, label.w3-large {
        font-size: 11pt !important;
    }
}

@media screen and (max-width:940px) and (min-width:751px) {
    .license {
        width: 100%;
        max-width: 330px;
        height: 65px;
        font-size: 18pt;
        text-align: center;
        text-transform: uppercase;
    }

    label, label.w3-large {
        font-size: 10pt !important;
    }
}

.encoder-license {
	width: 100%;
	height: 56px;
	font-size: 18pt;
	text-align: left;
	text-transform: uppercase;
}

.encoder-name {
	display: block;
}

.verifier-name {
	display: block;
}

.button-container {
	width: 100%;
	text-align: center;
	margin: 5px;
}

#pic {	
	/*margin-bottom: 10px;*/    
	overflow: auto;
}
	#pic img {
		
	}
	#pic .imgButton {
		min-height: 350px;       
	}

#appSettings header {
	cursor: pointer;
}

.w3-modal-dialog {
	/*left: 455px;*/
	/*position: absolute;
	top: 2305.5px;
	z-index: 9999;*/
	/*opacity: 0;*/
	/*display: none;*/
	/*height: auto;
	width: auto;*/		
}

input[type=radio]:checked ~ span {
    background-color: #19734B;
    
}

#divNPO input[type=radio]:checked ~ span {
    color: white;
    background-color: #AA0000;
    
}

.w3-checkbox {
    padding-right: 10px;    
}

/*#lblFlag.flagged {
    color: white;
    background-color: #AA0000;
    border-radius:50%;
}*/

.flag {
    max-height: 1.3rem;
}

@keyframes flash-letters {
    from {
        color: #191919;
    }
    to {
        color:red;
    }
}

/*#ckFlag{
    font-size:18px;
}

#flagControlDiv{
    width:150px;
    color:gray;
}
#flagControlDiv:after{
    content:"Verified";
    position:relative;
    left:10%;
}
#flagControlDiv.tagflagged{
    width:150px;
    animation-name: flash-letters;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
    animation-duration: 1s;
}

#flagControlDiv.tagflagged #ckFlag{
    background-color:red;
}
#flagControlDiv.tagflagged:after{
    content:"Flagged";
    position:relative;
    left:10%;
}*/
/*#flagControlDiv.tagflagged:before{
    content:"☰";
    position:relative;
    left:-5%;
}*/
#filtercontenttable table td{
    width:48%;
}

/*.ng-invalid{
    background-color:red;
    font-weight: bold;
}*/
/*.ng-invalid:after{
    color:red;
    content:" invalid entry ";*/
}