:root{
    --corona-black: #343a40;
    --corona-green: #28a745;
    --corona-red: #e21b22;
    --corona-light-red: #e4787c;
    --corona-light-gray: #c2c2c2;
    --corona-gray: gray;
    --corona-orange: #f79c04;
}

@font-face {
    font-family: "Kanit";
    src: url("../fonts/Kanit-Regular.ttf");
}

@font-face {
    font-family: "B612Mono";
    src: url("../fonts/B612Mono-Regular.ttf");
}

body{
    font-family: "Kanit", sans-serif;
}

.monospace{
    font-family: "B612Mono", monospace;
}

[role="button"]:hover{
    cursor: pointer;
}

.red{
    color: var(--corona-red) !important;
}

.red_bg{
    background-color: var(--corona-red) !important;
}

.light-red{
    color: var(--corona-light-red) !important;
}

.gray{
    color: var(--corona-gray) !important;
}

.gray_bg{
    background-color: var(--corona-gray) !important;   
}

.light-gray{
    color: var(--corona-light-gray) !important;
}

.light-gray_bg{
    background-color: var(--corona-light-gray) !important;   
}

.black{
    color: var(--corona-black) !important;
}

.black_bg{
    background-color: var(--corona-black) !important;  
}

.green{
    color: var(--corona-green) !important;
}

.green_bg{
    background-color: var(--corona-green) !important;  
}

.white{
    color: white !important;
}

.white_bg{
    background-color: white !important;    
}

/*.btn{
    border: none;
}*/

.btn.active, .toggler.active{
    background-color: var(--corona-red) !important;
}

.btn.active svg, .toggler.active svg{
    color: white;
}

.btn.focus, .btn:focus{
    box-shadow: none;
}

.btn.btn-danger{
    background-color: var(--corona-red);
    border-color: var(--corona-red);
}

.btn.btn-danger:hover{
    opacity: 0.9;
    background-color: var(--corona-red);
}

.btn.btn-success:hover{
    opacity: 0.9;
    background-color: var(--corona-green);
}

.modal-dialog{
	width: 90%;
    max-width: 1200px;
}

.comment_dialog .modal-dialog{
    max-width: 600px;
}

.modal-header{
    background-color: var(--corona-black);
    color: white;
    border-radius: 0px;
}

#coronabase_logo{
    height: 45px;
    position: absolute;
    top: 5px;
    left: 15px;
}

#logo_text{
    margin-left: 50px;
}

#instance{
    font-weight: bold;
    color: var(--corona-red);
}

.navbar-nav *{
    transition: 0s;
}

.navbar-nav .nav-item{
    margin-right: 5px;
}

.corona-button{
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: var(--corona-black);
    color: white;
    border-radius: 3px;
    border: none;
}

.corona-button .icon + *{
    margin-left: 0.5rem;
}

.corona-button:hover{
    cursor: pointer;
    background-color: black;
    color: white;
    text-decoration: none;
}

.corona-button.inactive:hover{
    cursor: default;
}

.corona-button .icon{
    color: var(--corona-red);
    /*margin-right: 0.5rem;*/
    align-items: center;
    height: 1.5rem;
    display: flex;
}

#main-menu{
    padding: 20px;
    margin-bottom: 30px;
    justify-content: center;
}

#main-menu .button:hover{
    text-decoration: none;
    background-color: black;
}

*{
    transition: 0.1s;
}

.highcharts-container *{
    transition: 0s;
}

svg{
    transition: 0s; 
}

#main-menu .button{
    margin: 10px;
    background-color: #343a40;
    width: 250px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border-radius: 3px;
    color: white;
    padding: 10px;
}

#main-menu .button .label{
    font-size: 1.2rem;
    padding: 10px;
    border-top: solid white 3px;
    margin-top: 10px;
    color: #D2D2D2;
}

#main-menu .button .icon{
    font-size: 60px;
    color: #e21b22;
    padding: 10px;
}

#content{
    padding: 10px;
}

footer{
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: var(--corona-black);
    color: white;
    font-size: 0.9rem;
    border-top: solid white 2px;
}

footer img{
    height: 1rem;
}

#lang_select_form{
    right: 5;
    top: -3;
}

#lang_select{
    display: inline;
    padding: 0 0.5rem;
    height: 1.7rem;
}

#lang_icon{
    font-size: 28px;
}

#result-header{
	background-color: white;
}

nav{
    font-size: 0.9rem;
}

nav .dropdown-menu .icon{
    width: 25px;
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
}

@media (min-width: 992px) {

	nav{
	    border-bottom: solid white 2px;
	}
	.table .header{
	    position: sticky;
	    z-index: 100;
	    position: -webkit-sticky;
	}

	.top.sticky{
        position: sticky;
        position: -webkit-sticky;
        z-index: 101;
        background-color: white;
    }
}

.table .col, .table .col-1, .table .col-2, .table .col-3, .table .col-4, .table .col-5{
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.table a{
    color: #333;
}

.table{
    font-size: 0.9rem;
}

.table .header{
	color: white;
	background-color: var(--corona-black);
	border-radius: 3px;
    white-space: nowrap;
}

.table .row{
	margin: 0px;
	padding: 5px 10px;
	border-bottom: solid #D2D2D2 1px;
	align-items: center;
    flex-wrap: wrap;
    display: flex;
}

.row .icon{
    font-size: 1.5rem;  
    width: 1.5rem;
    text-align: center;
}

.row .corona-button .icon{
    font-size: 1rem;  
    width: auto;
}

.table .header.row .col{
    border-radius: 3px;
}

.table .header.row .icon{
    font-size: 1.2rem;
    text-align: center;
}

.row .result-value{
    text-align: center;
    border-radius: 3px;
    color: white;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: gray;
}

.result-value.positive, .result-value.borderline{
    background-color: var(--corona-black);
}

.result-value.positive svg{
    color: var(--corona-red);
}

.result-value.borderline svg{
    color: var(--corona-light-gray);
}

.result-value.negative{
    background-color: var(--corona-light-gray); 
}

.result-value.inconclusive{
    background-color: var(--corona-orange); 
}

.result-value.error, .result-value.re-test, .result-value.invalid{
    background-color: var(--corona-red);    
}

.title{
    font-size: 2rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.subtitle{
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}

.title .icon, .subtitle .icon{
    color: #e21b22;
    margin-right: 10px;
}

.kv-table > .row + .row{
    border-top: solid #D2D2D2 1px;
}

.kv-table .row{
    padding: 0.3rem 0rem;
    align-items: flex-start;
    margin-left: 0px;
    margin-right: 0px;
}

.kv-table .row .label{
    color: #e21b22;
    width: 200px;
    padding: 0.2em 0.5em;
}

.kv-table .row .value{
    color: #333;
    min-width: 200px;
    padding: 0.2em 0.5em;
}

.filter-form input[type="text"].form-control{
	max-width: 150px;
}

.filter-form{
	padding: 0px 20px;
}

.filter-form .buttons{
    border-top: solid #D2D2D2 1px;
}

.filter-form .form-group{
	margin: 20px 20px 0px 0px;
}

.filter-form .form-group label{
    padding-right: 20px;
}

.header-barcode{
    min-width: 120px;
}

.barcode{
    background-color: #D2D2D2;
    color: #333;
    border-radius: 3px;
    padding: 0.25rem 0.5rem;
    display: block;
    width: 100%;
    transition: 0s;
}

.barcode:hover{
    cursor: pointer;
    color: white;
    background-color: gray;
    text-decoration: none;
}

.top{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.top .title{
    margin-bottom: 0px;
    font-size: 1.5rem;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.top-left{
    display: flex;
    align-items: center;
}

.top-right{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#go_to_page{
    border-right: solid #666 2px;
}

#go_to_page input{
    background-color: #D2D2D2;
    border: none;
    border-radius: 2px;
    text-align: center;
    width: 40px;
    font-size: 0.9rem
}

.table a.btn{
    background-color: var(--corona-black);
    /*padding: 5px 10px;*/
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table a.btn .count{
    background-color: var(--corona-red);
    padding: 0px 5px;
    border-radius: 3px;
}

.corona_button{
    color: white;
    font-weight: bold;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--corona-black);
    border: none;
    padding: 0.2em 0.6em;
}

.corona_button .icon{
    color: var(--corona-red);
    margin-right: .5em;
}

.corona_button:hover{
    color: white;
    text-decoration: none;
    background-color: black;
}

.top-right [role='button'], .top-right [type='button'], .top-right > a, .top-right > .pagination, .top-right > .count{
    background-color: var(--corona-black);
    padding: 5px 10px;
    color: white;
    border-radius: 0.25rem;
    margin-top: 3px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-right > * > svg, a[role='button'] svg{
    margin-right: 0.25rem;
}

.top-right > .dropdown{
    padding: 0px;
    color: white;
    background-color: transparent;
}

.top-right > .dropdown.show > button{
    background-color: black;
}

.top-right > .dropdown button{
    margin: 0px;
    padding: 4px 10px;
}

#export-buttons{
    padding: 0px;
}

#export-buttons > button{
    color: #333;
    background-color: transparent;
}

.top-right > *:not(:last-child){
    margin-right: 0.25rem;
}

.top-right svg{
    color: var(--corona-red);
}

a:hover{
    text-decoration: none;
}

.top-right a:hover, .toggler:hover, a.btn:hover, button.btn:hover{
    cursor: pointer;
    color: white;
    text-decoration: none;
    background-color: black;
}

.pagination a, .count svg{
    color: var(--corona-red);
}

.ui-datepicker{
    font-family: "Kanit";
}

.tooltip{
    font-family: "Kanit";
}

.plate_tooltip{
    background-color: var(--corona-black);
    border: 2px solid var(--corona-red);
    opacity: 0.9;
    border-radius: 0.25rem;
    color: white !important;
    padding: 0.5rem;
    transition: none;
}

.plate_tooltip table{
    color: white;
}

.date{
    white-space: nowrap;
}

.result.highlight{
    background-color: var(--corona-black);
    border-radius: 3px;
    padding: 5px;
}

.ct-values{
    /*margin: 3px;*/
}

.ct-value{
    padding: 0px 3px;
    border-radius: 3px;
    background-color: var(--corona-red);
    color: white;
    width: 60px;
    text-align: center;
    margin: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-value.reference{
    background-color: var(--corona-green);
}

.sortable{
    display: flex;
    /*justify-content: center;*/
    align-items: center;
}

.sortable:hover{
    cursor: pointer;
    background-color: black;
}

.order-by{
    color: #D2D2D2;
}

.order-by.active{
    color: var(--corona-red);
}

.bordered{
    padding: 10px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0px 1px rgba(0,0,0,0.24);
}

#export-buttons{
    transition: 0s;
}

#export-buttons > *{
    margin: 0px;
    border-radius: 0px;
    display: flex;
    align-items: center;
}

#export-buttons > * + *{
    border-top: solid white 1px;
}

.tooltip_red{
    color: var(--corona-red);
}

#records .experiment{
    display: flex;
    flex-wrap: wrap;
}

#records .experiment .plate-pos{
    width: 150px;
    max-width: 150px;
    text-align: left;
}

#records .experiment .plate-pos svg{
    font-size: 0.7rem;
}

#records .experiment .ct-values{
    width: 280px;
    max-width: 280px;
}

#records .experiment .result{
    width: 220px;
    max-width: 220px;
    padding-right: 20px;
}

#records .experiment .result select{
    min-width: 120px;
}

.experiment.inactive{
    opacity: 0.7;
}

.hint{
    font-size: 0.8rem;
    padding: 3px 10px;
    margin-top: 5px;
    width: max-content;
    margin-right: 3px;
}

.hints{
    display: flex;
    align-items: center;
}

[v-cloak] > * { display:none !important; }
[v-cloak]::before { content: "loading…" }

/* ANIMATIONS */

.rotate-center{-webkit-animation:rotate-center .6s infinite both;animation:rotate-center .6s infinite both}
.fade-in-fwd{-webkit-animation:fade-in-fwd 2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-fwd 2s cubic-bezier(.39,.575,.565,1.000) both}