@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 {
    font-family: FjallaOne-Regular, Roboto, sans-serif;
    text-transform: uppercase;
}

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

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

h3{
    font-size:20px;
}

h4{
    font-size:20px;
}

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;
}

.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 !important;
}

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

.btn, .btn:hover {
    min-width: 172px;
    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;    
}

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

dt, .dt {    
    font-family: Roboto, sans-serif;
    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;
}

.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;
}

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

@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;
}

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

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

.meta-detail-title {
    font-size: 15px;    
    text-transform:uppercase;
}

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

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


.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;
}


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-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;
}