/* ---------------------------------------------- COLOR DEFINITIONS */
@import url(color_ages.css?v=0.1);
:root {
    --col-body-background: white;
    --col-main: var(--col-gold);
    --col-primary: var(--col-ocean);
    --col-secondary: var(--col-sky);

    --col-main-dark: var(--col-gold-dark-20);
    --col-main-light: var(--col-gold-light-60);
    --col-primary-dark: var(--col-ocean-dark-20);
    --col-primary-light: var(--col-ocean-light-20);
    --col-primary-light-light: var(--col-ocean-light-60);
    --col-primary-light-light-light: var(--col-ocean-light-90);
    --col-secondary-dark: var(--col-sky-dark-20);
    --col-secondary-light: var(--col-sky-light-20);

    --col-table-odd: var(--col-sand-light-60);
    --col-table-selected: var(--col-ocean-light-60);

    --footer-logo-height: 40px;
}

/* ---------------------------------------------- BODY, GENERAL */

body {
    background-color: var(--col-body-background);
    /* color: var(--col-body-background); */
}

.wrapper {
    background-color: var(--col-body-background) !important;
    min-height: 611px
}

.content-wrapper {
    background-color: var(--col-body-background);
    /* margin-top: 20px; */
    /* padding-top: 10px; */
}

section.content {
    padding-top: 0;
}

a {
    color: #00395a;
}

/* shinydashboard bug, remove if left menu ever comes to exist */
.content-wrapper,.main-footer,.right-side {
    margin-left: 0
}
aside#sidebarCollapsed {
    display: none;
}

/* ---------------------------------------------- COMPONENTS */

/* -------------------------------- TEXT INPUT */
.form-control:focus {
    border-color: var(--col-primary)
}

/* -------------------------------- FILE INPUT */
div.input-group > input.form-control {
    height: 32px;
}

/* -------------------------------- BUTTON */

.btn-default:not(.dropdown-toggle):not(.actions-btn),
div.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper div.dt-buttons > button.dt-button,
.dataTables_wrapper div.dt-buttons>.dt-button:hover:not(.disabled) {
    white-space: normal;
    text-decoration: none;
    display:inline-block;
    border-radius: 0px;
    margin-bottom: 4px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
}

/* --- DARK */
/* also shinywidgets popups */
.btn-default:not(.dropdown-toggle):not(.actions-btn):not(.btn-light),
div.swal2-actions > button.swal2-confirm {
    background: var(--col-primary);
    color: white;

    border-color: var(--col-primary);
    border-bottom: 2px solid var(--col-primary);
    padding-bottom: 4px;
    transition: .2s ease-out; 
}

.btn-default:not(.dropdown-toggle):not(.actions-btn):not(.btn-light):is(:hover,:active,:active:focus,:active:focus-visible),
div.swal2-actions > button.swal2-confirm:is(:hover,:active,:active:focus,:active:focus-visible) {
    background: var(--col-primary-dark);
    color: white;
    border-bottom: 2px solid var(--col-main);
    transition: .2s ease-out; 
    box-shadow: none;
}

.btn-default:not(.dropdown-toggle):not(.actions-btn):not(.btn-light):focus-visible,
div.swal2-actions > button.swal2-confirm:focus-visible {
    box-shadow: 0 0 3px 2px black;
    /* outline: 2px solid blue;  */
}

.btn-default:not(.dropdown-toggle):not(.actions-btn):disabled,
.btn-default:not(.dropdown-toggle):not(.actions-btn):disabled:is(:hover,:active),
div.dataTables_wrapper .dataTables_paginate .paginate_button.current,
div.dataTables_wrapper .dataTables_paginate .paginate_button.current:is(:hover,:focus,:active,:active:focus,:active:focus-visible) {
    background: var(--col-primary-light);
    border-bottom: 2px solid var(--col-primary-light);
    color: white !important;
}

/* -- LIGHT */
/* also shinywidgets popups */
.btn-default.btn-light,
div.swal2-actions > button.swal2-cancel,
div.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper div.dt-buttons > button.dt-button,
.dataTables_wrapper div.dt-buttons > button.dt-button { 
    background: var(--col-secondary);
    color: var(--col-primary);

    border-color: var(--col-secondary);
    border-bottom: 2px solid var(--col-secondary);
    padding-bottom: 4px;
    transition: .2s ease-out; 
}

.btn-default.btn-light:is(:hover,:active,:active:focus,:active:focus-visible),
div.swal2-actions > button.swal2-cancel:is(:hover,:active,:active:focus,:active:focus-visible),
div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):is(:hover,:active,:active:focus,:active:focus-visible),
.dataTables_wrapper div.dt-buttons > button.dt-button:is(:hover,:active,:active:focus,:active:focus-visible) {
    background: var(--col-primary-light-light);
    color: var(--col-primary);
    border-bottom: 2px solid var(--col-main);
    transition: .2s ease-out; 
}

.btn-default.btn-light:focus-visible,
div.swal2-actions > button.swal2-cancel:focus-visible,
div.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible,
.dataTables_wrapper div.dt-buttons > button.dt-button:focus-visible { 
    box-shadow: 0 0 3px 2px black;
}

.btn-default.btn-light:disabled,
.btn-default.btn-light:disabled:is(:hover,:active),
.dataTables_wrapper div.dt-buttons > button.dt-button:disabled,
.dataTables_wrapper div.dt-buttons > button.dt-button:disabled:is(:hover,:active) {
    background: var(--col-secondary-light);
    border-bottom: 2px solid var(--col-secondary-light);
    color: var(--col-primary-light-light);
}

/* -------------------------------- BOX */
div.box {
    border: 1px solid var(--col-grey-30);
    box-shadow: 0px 0px 15px 2px var(--col-grey-50);
}

div.box > div.box-header {
    /* border-bottom: 2px solid var(--col-main); */
    box-shadow: 0px 8px 10px -10px var(--col-main-dark);
    font-weight: bold;
    margin-bottom: 10px;
}

div.box button.btn.btn-box-tool:focus-visible  {
    box-shadow: 0 0 3px 2px black;
}


/* phone only */
@media (max-width: 768px) {
    div.row div[class^='col-sm-']:has(> div.box), 
    div.row div[class^='col-sm-']:has(> div[class^='col-sm-'] > div.box){
        padding-left: 3px;
        padding-right: 3px;
    }
}

div.box-footer {
    border-top-color: var(--col-grey-40);
}


/* -------------------------------- DROPDOWN */
.btn-default.dropdown-toggle, 
.btn-default.dropdown-toggle:is(:hover,:focus,:active) {
  background-color: transparent;
  border: 1px solid var(--col-grey-40);
  border-radius: 1px;
}

.dropdown-menu > .active > a, 
.dropdown-menu > .active > a:hover {
  background-color: var(--col-primary);
}

.dropdown-menu > div.inner.open:is([role="listbox"]) li.selected > a, 
.dropdown-menu > div.inner.open:is([role="listbox"]) li.selected > a:hover {
    color: black;
    background-color: var(--col-primary-light-light-light);
}

.dropdown-menu > div.inner.open:is([role="listbox"]) li.selected span.glyphicon {
    color: var(--col-primary);
}

.dropdown-menu > div.inner.open:is([role="listbox"]) li.selected small {
    color: var(--col-grey-60) !important;
}

.bs-actionsbox > .btn-group > .btn-default.actions-btn {
    background-color: var(--col-secondary);
}
.bs-actionsbox > .btn-group > .btn-default.actions-btn:is(:hover,:focus,:active) {
    background-color: var(--col-primary-light-light);
}


/* ---------------------------------------------- HEADER */
.main-header {
    max-height: 100%;
}

nav.navbar > div.navbar-custom-menu {
    display: flex;
    justify-content: flex-end;
}

nav.navbar > div.navbar-custom-menu > ul.navbar-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.main-header > .logo {
    background-color: var(--col-main) !important;
    color: #525252 !important;
    font-size: 30pt;
    /* font-weight: bold; */
    height: auto;

    text-align: left;
    width: auto;
    max-width: 386px;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 100px;
    padding-right: 20px;
}

.main-header > .logo > a:hover {
    color: #525252 !important;
}

/* image as logo */
.main-header > .logo > img,
.main-header > .logo > a > img {
    height: calc(50px + 8px + 8px + 20px);
    padding-right: 10px;
}

.main-header > .logo:has(img) {
    padding-bottom: 5px;
    padding-top: 7px;
}

/* image as logo with also text */
.main-header > .logo:has(img):has(span) {
    padding-left: 10px;
}

/* navbar */
.navbar-nav li.header-logo > a {
    padding: 5px;
    padding-left: 15px;
}

.navbar-nav li.header-logo > a > img {
    max-height: 60px;
    height: auto;
}

.main-header > nav.navbar {
    background-color: var(--col-body-background) !important;
}

.main-header > nav.navbar .nav > li > a {
    color: black !important;
}

.main-header > nav.navbar .nav > li.header-logo > a:hover {
    background-color: transparent !important;
}

/* buttons in navbar */
nav.navbar > div.navbar-custom-menu > ul.navbar-nav {
    margin-top: 4px;
}

li#menu_user_txt_notifications_right {
    margin-left: 5px;
}

/* ---------------------------------------------- NOTIFICATION ICONS ROW */
.notification-icons > .main-header > .logo {
    display: none;
}

.notification-icons > .main-header > .navbar {
    margin-left: 0;
    min-height: 20px;
}

.notification-icons .navbar-custom-menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notification-icons ul.navbar-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.notification-icons ul.navbar-nav > li {
    display: flex;
    align-items: center;
}

.notification-icons ul.navbar-nav li.dropdown.messages-menu > a, 
.notification-icons ul.navbar-nav li.dropdown.notifications-menu > a, 
.notification-icons ul.navbar-nav li.dropdown.tasks-menu > a {
    padding-bottom: 5px;
}

.notification-icons ul.navbar-nav li.menu-user-text-left {
    margin-right: auto;
}

div#language_picker_header {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
div#language_picker_header > div.shiny-input-container {
    margin-top: 5px;
    margin-right: 15px;
    margin-bottom: 0px;
}
div#language_picker_header label {
    margin-right: 5px;
}


/* phone only */
@media (max-width: 768px) {
    .main-header {
        margin-bottom: 0px;
    }

    .main-header .navbar {
        min-height: 0px;
    }

    .main-header > .logo {
        text-align: center;
        width: auto;
        font-size: 26pt;
        padding-left: 20px;
        
        margin-top: 0px;
        padding-top: 2px;
        padding-top: 2px;
        max-width: 768px;
    }
    
    .navbar-nav li.header-logo,
    .navbar-nav li.header-logo > a {
        display: none !important;
    }

    div#language_picker_header {
        display: none;
    }
}

@media (min-width: 769px) {
    div#language_picker_header {
        display: flex;
    }
}

div#header_top_notification {
    display: flex;
    align-items: center;
}


/* ---------------------------------------------- LOGIN PANEL */ 
div.login-panel {
    margin-top: 10%;   
}

/* ---------------------------------------------- NAV TABS */ 

/* tabs lvl 1 */
.nav-tabs {
  border-bottom: 4px solid var(--col-main);
  box-shadow: 0px 10px 20px -20px black;
  margin-bottom: 10px;
}


.nav-tabs > li {
  margin: 0;
}

.nav-tabs > li > a {
   color: black; 
   font-weight: bold;
   font-size: 16px;
   box-sizing: border-box;
   border-bottom: 0px;
}

.nav-tabs > li:not(.active) > a:is(:hover,:active,:focus) { 
    color: black;
    background: var(--col-body-background);
    background-color: var(--col-body-background);
    border-color: var(--col-body-background);
    border-bottom: 4px solid black;
    padding-bottom: 6px;
    margin-bottom: 0px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:is(:hover,:focus,:active) {
    background-color: var(--col-main-light);
    color: black;
    border-color: var(--col-main-light);
    border-radius: 0;
    border-bottom: 0px;
}

/* phone only */
@media (max-width: 768px) {

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:is(:hover, :focus, :active) {
        border-bottom: 0px;
    }

    .nav-tabs > li:not(.active) > a,
    .nav-tabs > li:not(.active) > a:is(:hover, :focus, :active) {
        margin-bottom: 0px;
        padding-bottom: 10px;
        border-bottom: 0px;
    }
}

/* big screen only */
@media (min-width: 769px) {

    div.tab-content {
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* tabs lvl 2 */
div.tab-content > div.tab-pane .nav-tabs {
    border-bottom: 2px solid var(--col-main);
    box-shadow: 0px 10px 20px -20px black;
    margin-bottom: 10px;
}

/* phone only */
@media (max-width: 768px) {
    
    div.tab-content > div.tab-pane .nav-tabs {
        margin-left: 15px;
    }
}



/* ---------------------------------------------- MAPS */ 

div.leaflet {
    background-color: transparent;
}

div.leaflet .leaflet-control-attribution > a {
    display: none;
}


/* ---------------------------------------------- TABLES */ 

div.datatables {
    overflow-x: auto
}

table.dataTable thead>tr>th.sorting:before, 
table.dataTable thead>tr>th.sorting:after {
    color: var(--col-primary);
}

div.datatables table.dataTable.display > tbody > tr > td {
    border-top: none !important;
}

div.datatables table.dataTable.display > tbody > tr.odd {
    background-color: var(--col-table-odd);
}

.dataTables_processing {
    display: none !important;
}

/* top buttons */
.dataTables_wrapper div.dt-buttons > button.dt-button:focus:not(:focus-visible) {
    outline: none;
}


/* top labels */
div.datatables .dataTables_length label,
div.datatables .dataTables_filter label {
    font-weight: 400;
}

div.datatables .dataTables_length label > select {
    margin-right: 5px;
}
div.datatables .dataTables_filter label > input {
    margin-left: 5px;
}

/* top buttons */
.dataTables_wrapper div.dt-buttons {
    float: right;
    text-align: right;
    margin-top: 2px;
}


/* navigation buttons */ 
div.dataTables_wrapper .dataTables_paginate 
.paginate_button:not(.current):not(.disabled):is(:focus, :hover, :active, :active:focus, :active:focus-visible) {
    /* the rest is set up at buttons */
    color: var(--col-primary) !important;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    /* set up at buttons */
}



div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:is(:focus,:hover,:active,:active:focus,:active:focus-visible) {
    color: var(--col-grey-30) !important;
} 

div.dataTables_wrapper .dataTables_paginate:has(> a.paginate_button.previous.disabled):has(> a.paginate_button.next.disabled) {
    /* only 1 page */
    display: none;
}

div.dataTables_wrapper table.dataTable.stripe>tbody>tr.selected>*,
div.dataTables_wrapper table.dataTable.display>tbody>tr.selected>* {
    box-shadow: inset 0 0 0 9999px var(--col-table-selected) !important;
    color: black;
}

div.dataTables_wrapper table.dataTable.stripe>tbody>tr.selected:hover>*,
div.dataTables_wrapper table.dataTable.display>tbody>tr.selected:hover>* {
    box-shadow: inset 0 0 0 9999px var(--col-table-selected) !important;
    color: black;
}

/* double header */

/* add vertical line if top header has another top header next to it*/
table.dataTable thead:has(> tr:nth-of-type(2))  /* thead has >=2 rows */
  > tr:first-child  /* only first row */
  > th:is([rowspan="1"], :not([rowspan]))  /* previous <th> */
  + th:is([rowspan="1"], :not([rowspan])) {  /* current <th> with prev match */
    border-left-style: ridge;
}

/* column border */
table.dataTable tbody td.border-left-col {
    border-left-style: ridge;
}
table.dataTable tbody td.border-right-col {
    border-right-style: ridge;
}
table.dataTable thead th.border-left-col {
    border-left-style: ridge;
}
table.dataTable thead th.border-right-col {
    border-right-style: ridge;
}

/* ---------------------------------------------- MODAL POPUP */

/* header */
div.modal-dialog .modal-title {
    text-align: center;
}


/* footer */
div.modal-footer > div.footer-leftright {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* bootstrap3 not supporting xl fix */
@media (min-width: 769px) {
    .modal-xl {
        width: 100%;
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* ---------------------------------------------- SHINYWIDGETS POPUP */
div.swal2-popup {
    border-radius: 3px;
}

div.swal2-icon-show.swal2-question,
div.swal2-icon-show.swal2-info, 
div.swal2-icon-show.swal2-warning, 
div.swal2-icon-show.swal2-error, span.swal2-x-mark {
    animation-duration: .3s !important;
}

div.swal2-icon-show.swal2-question > div.swal2-icon-content, 
div.swal2-success > span.swal2-success-line-tip,
div.swal2-success > span.swal2-success-line-long,
div.swal2-icon-show.swal2-info > div.swal2-icon-content, 
    div.swal2-icon-show.swal2-warning > div.swal2-icon-content {
    animation-duration: .5s !important;
}
div.swal2-success > div.swal2-success-circular-line-right {
    animation-duration: 3s !important;
}


/* ---------------------------------------------- LOADING ANIMATION */ 
div.shiny-spinner-hidden > div.loader {
    display: none;
}


div.shiny-spinner-output-container div.loader, 
div.shiny-spinner-output-container div.loader:before, 
div.shiny-spinner-output-container div.loader:after  {
    color: var(--col-main) !important;
    background: var(--col-main) !important;
    /* background-color: var(--col-main); */
}


/* ---------------------------------------------- FOOTER */
footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--col-primary-light);
}

footer div.footer-logo,
footer div.footer-s-screen-misc {
    display: flex;
    flex-wrap: wrap;
    
    justify-content: center; 
    align-items: center;
    gap: 10px;
}

footer div.footer-logo {
    margin-top: 10px;
    margin-bottom: 10px;
}

footer div.footer-logo > a {
    flex: 0 1 auto;
}

footer div.footer-logo > a > img {
    max-height: var(--footer-logo-height);
    height: auto;
} 

footer span.language-picker-footer label#footer-language_picker-label {
    margin-right: 5px;
}
footer span.language-picker-footer div.dropdown {
    background-color: var(--col-primary-light-light);
}
footer span.language-picker-footer div.dropdown .btn-default {
    border-color: var(--col-primary-dark);
}

/* big screen only  */
@media (min-width: 769px) {
    footer div.footer-s-screen {
        display: none;
    }
    footer div.footer-s-screen-misc {
        display: none;
    }
}

/* 
/* ---------------------------------------------- FEATURES */
.datepicker {
    z-index: 1050 !important;
}



/* ---------------------------------------------- ABWASSER DASHBOARD SPECIFIC */

/* ----------- SUMMARY */
span.summary {
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    min-height: 27px;
}

span.summarydate {
    color: var(--col-grey-60);
    padding-right: 5px;
}

button.summaryhistory {
    float: right;
    margin-bottom: 0px !important;
    padding-top: 2px;
    padding-bottom: 2px;
}

div.summary-createedit {
    padding-top: 10px;
}

div.box > div.box-footer:has(> div:only-child > div.empty) {
    display: none;
}


/* ----------- VIEW DT */
div.viewDT button.btn-default {
    margin-top: 10px;
}

div.pathogen-viewDT:has(> div.viewDT) {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}