@import url('bootstrap-icons/bootstrap-icons.css');

@font-face {
    font-family: 'Roboto';
    src: url('Roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('Roboto/Roboto-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('Roboto/Roboto-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('Roboto/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'FjallaOne-Regular';
    src: url('FjallaOne/FjallaOne-Regular.ttf') format('truetype');
}

html, body {
    font-family: Roboto, sans-serif;
    font-size:16px;
    line-height:1.8;
}

h1, h2, h3,
.h1, .h2, .h3{
    font-family: FjallaOne-Regular, Roboto, sans-serif;
    text-transform: uppercase;
}

h1, .h1 {
    line-height: 1;
    letter-spacing: 1px;
    font-size: 40px;
    
    font-stretch:condensed;
    font-weight:bold;
}

h2, .h2 {
    font-size:25px;
    line-height:1.4;    
}

h3, .h3{
    font-size:20px;
}

h4, .h4{
    font-size:20px;
}

h5, .h5 {
    font-size: 16px;
    text-transform: uppercase;
    color: #444;
}

small {
    color: #666;
}

p{color:#333;}

.form-group{
    margin-bottom:5px;
}

.navbar-brand > img{
    width:auto;
    height:32px;
}
.navbar-dark > a{
    text-transform: uppercase;
    text-decoration:none;
}

.nav-wizard{

}

.nav-wizard > .nav-item{
    font-size:1.25rem;
    cursor:pointer;    
}
.nav-wizard .nav-link{
   color:grey;   
}

.nav-wizard .nav-link:hover {
    font-weight: bold;
}

.nav-wizard .nav-link.active {
    color:black;
    font-weight:bold;
}

.nav-wizard .nav-link.valid{    
    color:green;    
}

.nav-wizard .nav-link.error{
    color:red;
}

.nav-link.disabled {
    color: lightgray;
    pointer-events: none;
}

.main{
    margin-bottom:30px;
}

.form-check-input[type=radio], .form-check-input[type=checkbox] {
    width: 1.25em;
    height: 1.25em;
    margin-top: .20em;
    border-width: 2px;
}

.form-check-input[type=checkbox] {
    border-radius: .15rem;
}


.form-switch .form-check-input, .form-switch .form-check-input:focus {
    width: 3em;
    height: 1.75em;
    border-radius: 2em;
    margin-top: 0;
    margin-right: 5px;
    box-shadow: none;
}

.page-item.active .page-link {
    background-color: #003152 !important;
    border-color: #003152 !important;
}

.page-link, .page-link:hover {
    color: #003152;
}

.nav-item a {
    border-radius: 0 !important;
}

.nav-link.text-white{
    color:#fff !important;
    border:none !important;
}

th {       
    text-transform: uppercase;    
    font-weight: normal;
}

.table.link-rows tr{
    cursor:pointer;
}

.accordion-button:not(.collapsed) {
    font-weight:normal;
}

.accordion-button {
    padding: 0.5rem 1.25rem;
    text-transform:uppercase;
}

.accordion-button:focus {    
    border-color: inherit;    
    box-shadow: none;
}

.accordion-item .accordion-button, .accordion-item, .accordion-item .accordion-collapse, .list-group-item {
    border-radius: 0;
}

.nav-link i {
    margin-right: 10px;
    font-size: 1.1rem;
}

.btn, .btn:hover {
    min-width: 25px;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 10px;
    border-radius:50px;
}

.btn-danger-secondary {
    color: var(--secondary-red) !important;
}

.btn:focus, .btn-primary:focus, btn-secondary:focus, .form-select:focus, .form-control:focus, .btn-close:focus {
    box-shadow: none;
}

.btn:active:focus, .btn-primary:active:focus, btn-secondary:active:focus, .form-select:active:focus, .form-control:active:focus,.btn-clos:active:focus {
    box-shadow: 0 0 0 0.25rem rgb(150 150 150 / 50%);
}

.btn-circle, .btn-circle:hover {
    text-align: center;
    min-width: 25px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.btn-auto, .btn-auto:hover{
    min-width:25px;
}

.btn-circle.btn-sm {
    width: 30px;
    height: 30px;
    padding: 6px 0;
    border-radius: 15px;
    font-size: 8px;    
}

.btn-circle.btn-md {
    width: 50px;
    height: 50px;
    padding: 7px 10px;
    border-radius: 25px;
    font-size: 10px;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 12px;    
}

.clickable{
    cursor:pointer;
}

.btn-danger, .btn-danger:hover {
    border-color: #dc3545 !important;
}

dt, .dt {    
    font-family: Roboto-Light;
    font-size: 13px;
    text-transform: uppercase;
    color: #555;
    padding-top:1px;
    font-weight:normal;
}

.dt{padding-right:5px;}

dd, .dd {
    margin-bottom: 0.75rem;
}

bg-white{
    background: var(--common-grey);
}

.tile {
    padding: 10px 15px;
    min-height: 200px; 
}

.shadow, .tile {
    /*box-shadow: 0 2px 5px -2px #ddd !important*/
    box-shadow:none !important;
}

.clickable-card {
    cursor:pointer
}

    .clickable-card:hover {
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important
    }

    .clickable-card.selected {
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important
    }

    .text-light.selected p {
        color: #f8f9fa !important
    }

    .text-light.selected h5 {
        color: #f8f9fa !important
    }

.tile .tile {    
    border:none;
    padding:0px;
}

.card, .tile {
    border-radius: 5px;    
    border: solid 1px #ddd;    
}

.h-min-200{
    min-height: 200px;
}

.sensor-output{
    font-size:14px;
    line-height:1;
}

.navbar-logo{
    padding-left:15px;
    padding-top:0;
}

.no-list-style {
    list-style: none;
    margin: 0; 
    padding: 0; 
}

.tracker {
    position: relative;
    overflow-x: auto;
    padding: 10px;
    height: 80px;
}

.tracker .scroll{
    position:absolute;
}

.tracker .btn {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    margin-right: 2px;
    padding-left: 35px;
    padding-right:35px;
}

.tracker .btn.active {
    border-top: 3px solid;
    border-bottom: 3px solid;
    box-shadow: 0 0 6px -2px #333;
    z-index:1;
}
.tracker .btn.track-pending {
    background: #BFBFBF;
    border-top-color: #BFBFBF;
    border-bottom-color: #bfbfbf;
}

.tracker .btn.track-complete {
    background: green;
    border-top-color: green;
    border-bottom-color: green;
    color:#fff;
}

.tracker .btn.track-active {
    background: #003152;
    border-top-color: #003152;
    border-bottom-color: #003152;
    color:#fff;
}

.tracker .btn.track-canceled {
    background: #4f4f4f;
    border-top-color: #4f4f4f;
    border-bottom-color: #4f4f4f;
    color: #fff;
    text-decoration: line-through;
}

.data-table {
    width: calc(100vw - 21rem);
    overflow-x: auto;
}

@media only screen and (max-width: 641px) {
    .data-table {
        width: calc(100vw - 2.5rem);
    }
}

.h-bg {
    background: #eee;
    border-bottom: 1px solid #ddd;
    padding-left: 10px;
}

.list-group.flush-no-border > .list-group-item{
    border:none!important;
}

.modal-header{
    padding:0.5rem 1rem;
}

.metadata {    
    line-height: 1.25;
    margin-bottom: 10px;
}

.metadata > dt, .metadata > .dt {
    text-transform: none;
}

.metadata > dd, .metadata > .dd {
    font-size: 13px;
    margin-bottom: 0px;
}

.select-modal > li.meta-detail:hover, .select-modal > li.meta-detail.selected {
    background: var(--clamp-grey);
    cursor: pointer;
}

.select-modal > li.meta-detail {
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-radius: 0px;
}

.meta-detail{
    border:none;
    border-radius:5px;
}

.meta-detail-list .meta-detail{
    background-color:#eee;
    border:0;
}

.meta-detail .dd {
    font-size: 14px;
}

.meta-detail-title {
    font-size: 15px;        
    font-family:Roboto-Medium
}

.meta-detail-btn, .meta-detail-btn:hover {
    color: #003152;
    border-color: #BFBFBF;
    cursor: pointer;
}

.meta-detail-btn:hover {
    border-color: #003152;
    background-color: #f9f9f9;
}

.icon-btn{
    cursor:pointer;
}

.dropdown-cb{
    font-size:14px;
    width:120%;
}

.dropdown-cb > li{
    border-bottom: 1px solid #ddd;
    margin-bottom:5px;
    cursor:pointer;
}

.checkbox-desc{
    line-height:1
}

@media only screen and (max-width: 768px) {
    .btn {
        width: 100%;
    }
}

.badge.rounded-circle {
    width: 25px;
    height: 25px;
    padding:.5em .35em;
}

/*Data Viz styles*/
#my_dataviz {
    height: 400px;
}

.dataviz-chart {
    min-height: 400px;
}

.pie-chart{
    min-height: 250px;

}

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    vertical-align: top;
    overflow: hidden;
}

.pie-chart-label {
    text-anchor: middle;
    font-size: 14px;
}

.chart-grid {
    opacity: 0.1;
}

.charts{
    display:flex;
    height:100%;
}

polyline {
    opacity: .3;
    stroke: black;
    stroke-width: 2px;
    fill: none;
}

.overflow-x-scroll {
    width: 100%;
    overflow-x: scroll;
}

.drop-zone {
    padding: 20px;
    width: 100%;
    min-height: 100px;
    border: 2px dashed #2f2f2f;
    border-radius: 5px;
}

.drop-zone.hover {
    border-style: solid;
}

.non-draggable {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.img-small {
    height: 6rem;
    width: auto;
}

.upload-card {
    width: 10rem;
    height: 10rem;
}

.boxed {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: none;
    border: 1px solid slategray;
}

.max-width-sm {
    max-width: 24rem;
}

.max-width-md {
    max-width: 45rem;
}

.max-width-lg{
    max-width:56rem;
}

.max-width-xl{
    max-width: 62rem;
}

.max-width-2xl{
    max-width: 66rem;
}

.max-width-3xl{
    max-width: 72rem;
}

.warning {
    color: #fb923c;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
}

.warning-outline {
    outline: 1px solid #fb923c;
}
.cursor-pointer {
    cursor: pointer;
}
.cursor-help {
    cursor: help;
}

.disabled-hoverable {
    cursor: not-allowed;
    pointer-events: auto!important;
}

.disabled-wrapper {
    cursor: not-allowed !important;
}

.half-opacity-hover {

}

    .half-opacity-hover:hover {
        opacity: 50%;
    }

.dropdown-item.selected {
    background-color: #767676;
    color: white;
}
.dropdown-menu.scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 12rem;
}

.validation-message-sm {
    color: red;
    font-size: .875rem;
}


.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;    
    line-height: 1.25rem;
}

.text-base {
    font-size: 1rem; 
    line-height: 1.5rem; 
}

.vh-90 {
    height: 90vh !important;
}

.active-form {
    background-color: #d6d6d6;
    border-radius: 10px;
}


.panel-sidebar {
    overflow-y: scroll;
    height: 90vh;
}

    /* width */
    .panel-sidebar::-webkit-scrollbar {
        width: 10px;
        border-radius: 15px;
        margin-top: 10px;
    }

    /* Track */
    .panel-sidebar::-webkit-scrollbar-track {
        background: #e5e5e5;
        border-radius: 15px;
    }

    /* Handle */
    .panel-sidebar::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 15px;
    }

        /* Handle on hover */
        .panel-sidebar::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.highlighted-table-row {
    background-color: rgba(255, 173, 177, 0.5) !important;
}

.text-disabled {
    opacity: 75%;
}

.custom-field-editor__input-with-unit {
    position: relative;
    width: 100%;
}

.custom-field-editor__input-with-unit > :first-child {
    width: 100%;
}

.custom-field-editor__unit {
    color: var(--bs-secondary-color, #6c757d);
    font-size: .875rem;
    white-space: nowrap;
    position: absolute;
    left: calc(100% + .5rem);
    top: 50%;
    transform: translateY(-50%);
}