#navbarSupportedContent {height:40px;}

#ares {padding: 20px 40px 20px 0px;}
.loading { background: url(../images/loading_icon.gif) no-repeat right; }

label span {/*color: #fd6cab;*/ color:black;}

/* background */
.bg-color-primary{
    background: #3f4974;
    color: #9ddbff
}
.bg-color-secondary{
    background: #22323c;
    color: #ffffff;
}
.bg-color-tertiary{
    background: #9ddbff;
    color: #000;
}
.bg-shadow{
    box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}

.background-gradient{
    background-image: linear-gradient(to right, #3f4974, #5d6eb0);
	padding-bottom: 0px;
	padding-top: 0px;
}

.background-gradient2 {
    background: #3f4974 ;
    padding-bottom: 0px;
    padding-top: 0px;
}

.big-text {
    font-size: 1.2em;
}

.demand_form {background-image: linear-gradient(to right, #3f4974, #5d6eb0); color:white;}
.demand_form button {background: #22323C; color: white; border: none;}


/* Form */
/* smart select box - search country */
.bootstrap-select button{
    background: white;
    border: 1px solid rgb(206, 212, 218);
    color: #495057
    height: calc(2.875rem + 2px);
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem;
}

label.custom-label-margin{
    margin-top: .5rem;
    margin-bottom: 0;
}

.custom-radio-button, .custom-specific-position{
    cursor: pointer;
}

#photos {list-style-type: none; margin: 20px 0px 15px 0px; padding: 0;}
#photos li { position:relative; float: left;  width: 128px;height: 128px;  cursor: pointer; border: 1px solid #ccc; margin:  0px !important; padding: 0 !important; list-style: none; background: none;}
#photos .highlight {border: 1px dotted red !important; font-weight: bold; font-size: 45px; background-color: #eee;}
#photos li .delete {position:absolute; height:16px; width:16px; top: 5px; right:5px; display:none; background: url(../img/delete2.png) no-repeat;}
#photos li:hover .delete {display:block;}
#photos li .delete:hover {background: url(../img/delete2_black.png) no-repeat;}

#uploading {margin: 5px 0px;}
#uploading img {margin-right:5px; display: inline-block;}
#uploading span {}
#uploaded {margin: 5px 0px;}
#uploaded img {margin-right:5px; display: inline-block;}


@media only screen and (min-width: 768px) {
    .specifick-position{
        /*background: url("../img/or.png") center 45px;*/
        background-repeat: no-repeat;
        background-size: auto;
    }
    div.help-mobie-class{
        display: none;
    }
    .cc-menu form input, .cc-menu form button { border-radius: 0;}
}
@media only screen and (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        left: -90px;
    }
}
@media only screen and (max-width: 768px) {
    label.help-mobie-class{
        display: none;
    }
}




/* HP - custom style */
.hp-intro {  text-shadow: 2px 2px 5px black;}
.hp-intro h1 { color: #fff; font-size: 3.5em; max-width: 750px; }
.hp-intro h2 {color: #fff; font-weight: 300; line-height: 1.3em; max-width: 700px; }
.hp-intro button {box-shadow: 2px 2px 5px #444;}
.hp-intro .button-more-info {background:white;}
.hp-intro a:hover .button-more-info {background:#DDD;}

.hp-intro1 {background: url("../img/intro/1/PA210230_stika_lin_okoun.JPG") center -800px  no-repeat scroll; /*background-size: cover;*/}
/*.hp-intro1 {background: url("../img/bg-2.png")  no-repeat scroll; background-size: cover;}*/
.hp-intro2 {background: url("../img/intro/2/DSC01807_hrouzci.JPG") center -380px no-repeat scroll; /*background-size: cover; */}
.hp-intro3 {background: url("../img/intro/3/PB200052_Kaprokaras.JPG") center -900px no-repeat scroll; /*background-size: cover;*/}

.button-primary-color { background: #9ddbff; color: #000; }
.button-primary-color:hover { background: #95d0f2; }
.button-primary-color-outline { background: none; border: 1px solid #9ddbff; color: #9ddbff; }
.button-primary-color-outline:hover { background: #9ddbff; color: #000;  }
.button-secondary-color { background: #22323c; color: #ffffff; }
.button-secondary-color:hover { background: #11191e; color: #ffffff; }
.button-secondary-color-outline { background: none; color: #22323c; border: 1px solid #22323c; }
.button-secondary-color-outline:hover { background: #22323c; color: #ffffff; }

.help-footer-class{ color: #5a78f1; font-size: 2.0em; }
.navbar-toggler { border-color: #9ddbff !important; background: #9ddbff !important; }
.navbar-toggler span.navbar-toggler-icon { }

nav .dropdown-item:focus, nav .dropdown-item:hover {
    text-decoration: none;
    background-color: #272d4a;
}

.add_record {padding-top: 0px; padding-bottom:0px !important;}
.navbar-brand {padding: 0px 0px 3px 0px !important; }

.cc-menu a {color: #9ddbff !important;}
.cc-menu ul.mr-auto a {font-size: 16px; padding-top:13px; padding-bottom:11px;}
.cc-menu ul.mr-auto a:hover {color: #fff !important; border-bottom:3px solid white; padding-bottom:8px;}
.cc-menu ul.mr-auto li.active a {color: #fff !important; border-bottom:3px solid white; padding-bottom:8px;}


.about-us h3 { line-height: 1.3em; }


#results .standard {background: url(../images/markers/red-dot.png) no-repeat left 4px; padding-left: 28px; padding-top: 11px;}
#results .homozygot {background: url(../images/markers/blue-dot.png) no-repeat left 4px; padding-left: 28px; padding-top: 11px;}
#results .heterozygot {background: url(../images/markers/yellow-dot.png) no-repeat left 4px; padding-left: 28px; padding-top: 11px;}
#results .hybrid {background: url(../images/markers/green-dot.png) no-repeat left 4px; padding-left: 28px; padding-top: 11px;}

#map_labels label {padding: 0px 15px 0px 3px;}

/* end HP custom style */




/* 2.4 complte report */
.complet-report {}
.complet-report table {}
.complet-report table th,
.complet-report table td {
    border-top: none;
    padding: 0;
}
/* 2.4.1 box in first row */
.complet-report table td .left-box,
.complet-report table td .center-box,
.complet-report table td .right-box{
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    min-height: 50px;
}


.complet-report table td .left-box {
    border-left: 1px solid #aaa;
}
.complet-report table td .right-box {
    border-right: 1px solid #aaa;
}

.complet-report .marker {}
.complet-report .marker span {background-size: 22px 22px !important; padding-left: 22px; padding-top: 11px;}
.complet-report .marker .red {background: url(../images/markers/red-dot.png) no-repeat left 9px;}
.complet-report .marker .blue {background: url(../images/markers/blue-dot.png) no-repeat left 9px;}
.complet-report .marker .yellow {background: url(../images/markers/yellow-dot.png) no-repeat left 9px;}
.complet-report .marker .green {background: url(../images/markers/green-dot.png) no-repeat left 9px;}


.complet-report pre {
    font-size: 0.6em;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    line-height:18px;
    padding:15px;
}

/* 2.4.2 second row */
.complet-report table td .close-row{
}
.complet-report table td .close-row-box{
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    position: relative;
    top: -3px;
}

#export-box{
    background: #629c44;
    color: #fff;
}



/* external source https://bootsnipp.com/snippets/4MR9W */
.complet-report table td .left-box label,
.complet-report table th label {
    position: relative;
    cursor: pointer;
    color: #000;
    margin-bottom: 0;
    font-weight: 400;
}

.complet-report table td .left-box input[type="checkbox"], .complet-report table td .left-box input[type="radio"],
.complet-report table th input[type="checkbox"], .complet-report table th input[type="radio"],
.select-table-row-chceckbox input[type="checkbox"] {
    position: absolute;
    right: 9000px;
}

/*Check box*/
.complet-report table td .left-box input[type="checkbox"] + .label-text:before,
.complet-report table th input[type="checkbox"] + .label-text:before,
.select-table-row-chceckbox input[type="checkbox"] + .label-text:before{
    content: "\f0c8";
    font-family: "Font Awesome 5 Free";
    speak: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing:antialiased;
    width: 1em;
    display: inline-block;
    margin-right: 5px;
    font-size: 25px;
    vertical-align: -20%;
}

.complet-report table td .left-box input[type="checkbox"]:checked + .label-text:before,
.complet-report table th input[type="checkbox"]:checked + .label-text:before,
.select-table-row-chceckbox input[type="checkbox"]:checked + .label-text:before {
    content: "\f14a";
    color: #629c44;
    animation: effect 250ms ease-in;
    font-weight: 900;
}

.complet-report table td .left-box input[type="checkbox"]:disabled + .label-text,
.complet-report table th input[type="checkbox"]:disabled + .label-text,
.select-table-row-chceckbox input[type="checkbox"]:disabled + .label-text {
    color: #aaa;
}

.complet-report table td .left-box input[type="checkbox"]:disabled + .label-text:before,
.complet-report table th input[type="checkbox"]:disabled + .label-text:before,
.select-table-row-chceckbox input[type="checkbox"]:disabled + .label-text:before {
    content: "\f0c8";
    color: #ccc;
}


/* custom */
.complet-report table td,
.complet-report table th,
.select-table-row {
    font-size: 1.2em;
}
.complet-report table td .left-box label span:before,
.complet-report table th .left-box label span:before,
.select-table-row label span:before{
    font-size: 35px !important;
}
.complet-report table th div{
    min-height: 50px;
}
.complet-report table th div.left-box{
    border-top-left-radius: .25rem !important;
    border-bottom-left-radius: .25rem !important;
}
.complet-report table th div.right-box{
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}
.complet-report table th,
.complet-report table th label{
    color: #fff;
    border-bottom: 0;
    font-weight: 400;
}

.select-table-row{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 3;
    box-shadow: 0 -4px 6px 0 hsla(0, 0%, 0%, 0.2);
}
.complet-report table td .manual-selected-row{
    border-color: #629c44;
    border-width: 3px;
}

.tooltip-inner {
    white-space:pre;
    max-width:none;
}

/*module detail*/
#lokuses .form-group {padding-left: 2px !important;}

.lokuses .fa-check {color:#0fbb0f; font-size: 1.2em; text-shadow: #666 1px 1px 2px;}
.lokuses .fa-times {color:red; font-size: 1.2em; text-shadow: #666 1px 1px 2px;}
.lokuses {background: white; padding: 20px 30px; overflow-x:scroll;}
.lokuses table {width:100%;}
.lokuses table tr.input_row td {padding-bottom: 10px;}
.lokuses table th {padding: 0px 15px;}
.lokuses table th, .lokuses table td  {white-space: nowrap; text-align:center;}
.lokuses table th:first-child, .lokuses table td:first-child  {text-align:left; padding-left: 0px;}
.lokuses table span {padding: 2px 4px;}
.lokuses table span.green {background: #b8fca8;}
.lokuses table span.yellow {background: #fad83c;}
.lokuses table span.red {background: #ff5656;}

.diversity_score { font-size: 22px; font-weight: bold; padding-top: 10px; color:red; }

/* record detail */
#record-detail-sequence-copy-message{
    display: none;
}

.locality-detail{

}
.locality-detail-shadow {
    box-shadow: 0 2px 3px 0 hsla(0, 0%, 0%, 0.2);
}
.locality-detail-shadow:hover{
    box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
}

.record-detail-tablist li, .record-detail-tablist li a  {
    background: none !important;
    border-bottom: none !important;
}
.record-detail-tablist li a.active{
    background: #f8f9fa !important;
}

#plot {background: black; display:flex; color: white; justify-content: space-between;}
#plot .column {width:50px; text-align:center;}
#plot .axis {width:25px !important;}
#plot .column .head {}
#plot .column .value {position:absolute; bottom: 0px; border-top: 2px solid white; line-height: 16px; width:inherit;}
#plot .column .value span { font-size: 12px;}