/* GAIA Custom CSS */ 
/* voorbeeld met de standaard waarden zoals nu worden weergegeven */



/************ ALGEMEEN ************/

body {    
    color: #212529; 
    background-color: #f8fafc; 
    scrollbar-width: thin;
}

label {
  text-overflow: ellipsis;
  overflow: hidden;
}

/* top navigation bar */ 
.navbar {
    background-color: transparent ;

}

/* login screen, main top menu en andere "cards" */
.card {
    background-color: #fff;
    color: rgb(33, 37, 41);
}
/* card header */
.card-header { 
    color: #44752d;
    background-color: rgba(0, 0, 0, 0.03);        
}

/* scherm hoofd-titels, detail-scherm titels*/
.frametitle {
    text-align: left;
    color: #166df4;
}
/* scherm sub-titels */
h4.subframetitle, h5.subframetitle {
    color: #333;
}

/* labels, titels, veldnamen */
label {
    color: rgb(0, 100, 0);
}

/* calender iconen (oranje) */
.input-group-addon span {
    color: #fe7065;
}

/* dropdown menu's */
#dropdownMenuButton {
    background-color: #ff7043;
}

/* loading animatie */
.mb-load-spinner {
    opacity: 0.7;
    background-color: #ff7043!important;
    border-color: red!important;
    color: white!important;
    font-size: 21px;
}

/************ CONTAINERS ************/ 

/* top container waar het menu zich in bevindt */
.mb-top-container {
    min-width:100%;
    color: rgb(33, 37, 41);
    background-color: transparent;
}

/* container waar het data-grid EN het zich in bevindt */
#dgw {
    background-color: transparent;
}

/* container waar het detail-scherm zich in bevindt */
#fcw {
    background-color: transparent;
}


/************ STAMGEGEVENS MENU ************/

/* Stamgegevens, linker menu items */
.sidebar-nav li a {
    color: #44752d;
}



/************ BUTTONS ************/

/*  bootstrap primary button (blue-ish) */
.btn-primary {
    color: #fff;
    background-color: #3490dc;
    border-color: #3490dc;
}

/*  bootstrap success button (green-ish) */
.btn-success {
    color: #fff;
    background-color: #38c172;
    border-color: #38c172;
}

/*  bootstrap warning button (yellow) */
.btn-warning {
    color: #212529;
    background-color: #ffed4a;
    border-color: #ffed4a;
}

/*  bootstrap danger button (red) */
.btn-danger {
    color: #fff;
    background-color: #e3342f;
    border-color: #e3342f;
}



/************ TOP MENU ************/

/* main top menu items kleurfilter (groen) */
img.mb-colorize-1 {
    filter: invert(60%) sepia(35%) saturate(700%) hue-rotate(70deg) brightness(62%) contrast(50%);
}

/* geselecteerd / aktief menu item kleurfilter (grijs) */
.menu-icon-selected {
    filter: invert(61%) sepia(0%) saturate(2000%) hue-rotate(65deg) brightness(89%) contrast(45%) drop-shadow(3px 3px 3px lightgray)!important;
}




/*************** DASHBOARD ***************/

/* linker selectie / filter blok */
#leftbar {
    color:darkgreen;
    border-right:3px dashed green;     
    min-width:200px;
    max-width:200px;
    border-radius: 11px;
    border: 1px solid #ddd;
    background-color:white;
    border-right: 1px solid #ddd;
    overflow:hidden auto;
    height:161px;
    scrollbar-width: thin;    
}

#rightpart {
    overflow: auto auto; 
    height: 161px;
    scrollbar-width: thin;
}

/* dashboard GAIA rapportage container */
.rapp-container {
    border-radius:11px; 
    border:1px solid #ccc;
    background-color:white;
    padding:10px;
    padding-bottom:15px;
    margin:15px;
    margin-top:0px;
    margin-left:0;
    color:darkgreen;
}

/* dashboard GAIA rapportage labels (o.a. "Verstrekt aan", etc.) */
.mb-dash-rap-label-1 {
    font-weight: 600;
    color: darkgreen;
}

/* dashboard GAIA rapportage waardes (o.a. "Verstrekt aan datum") */
.mb-dash-rap-val-1 {
    color: #333;
}

/* dashboard GAIA rapportage disclamer */
#disclaimer {
    color: #333;
}

/* dashboard GAIA rapportage organisatie naam */
.rapp-org-title {
    font-size:125%;
    font-weight:600; 
    color: rgb(49, 153, 0);    
}

/* dashboard GAIA rapportage icon titels (o.a. "douchebeurten, uren, afvalbakken", etc.) */
.mb-gg-icon-text-1 {
    color: rgb(0, 100, 0);
}

.mb-kilo-inzink-1 {    
    color: rgb(0, 100, 0);
    text-align:center;
    font-size:15px;
    margin-top:20px;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 5px;
}


/************** DATA GRID ************/

/* boostrap button deep orange (o.a. zoek / reset buttons in grids) */
.btn-deep-orange {
    color: #fff;
    background-color: #ff7043 !important;
    opacity: 0.85;
}

/* Tabel kop teksten (veldnamen) */
th.mb-datafield.mb-datafield .mb-prop {
    color: rgb(78, 176, 52);
}

/* geselecteerde / aktieve rijen */
.mb-row-selected{
    background-color: #44752d!important;
}

/* even grid rijen */
tr.mb-datarow-even {
    background-color: #ffffeb;
}
/* on-even grid rijen */
tr.mb-datarow-odd {
    background-color: #d0e8c9;
}

/* grid next/prev page controls container */
.mb-link-bar {
    background-color: transparent;    
}

/* grid next/prev page controls, currently selected page number */
.mb-link-bar TABLE TD {
    color: black;
}

/* grid next/prev page controls */
.mb-link-bar A{ 
    color: rgb(52, 144, 220);
}

.landico {
    width: 20px;
    height: auto;                
    border: 2px solid #ddd;
}
.catalogverttext {
    margin-top: 8px;    
    max-width: 149px;
    overflow: hidden;
    font-size: 22px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    cursor:pointer;
    text-align: center;
    margin: auto auto;
}
#basket {
    display:none;
    position: absolute;
    top: 5%;
    left: 15%;
    bottom: 5%;
    right: 15%;
    background-color: rgb(229, 238, 233);
    border: 2px solid darkgray;
    border-radius: 14px;
    padding: 14px;
    z-index: 100;
}
.disabledscreen {
    opacity: .75;
    filter: blur(2px);
    pointer-events: none;
}

.bootbox-largeWidth {
    margin: 0 auto;
    width: 90%;
}
.menuspan {
    text-align:left;
    padding-left:15px;            
    display: flex;
    align-items: baseline;
}

.menuspan label{            
    color: #444;
    max-width: 90%;
    line-height: 18px;            
    margin-top: auto;
}
.menuspan input {                        
    vertical-align: text-top;                        
}
#cat-container table {
    border-collapse: separate;
    border-spacing: 0;
    scrollbar-width: thin;
}
.buttontd {
    max-width: 32px!important;
    min-width: 32px!important;
    width: 32px!important;
    text-align: center;
    margin: auto auto;
    padding: 0;
    opacity: .8;                   
}
.buttontd:HOVER {
    opacity: 1; 
    padding-left: 3px!important;            
}
.dimmed {
    /*filter: invert(20%);*/
    opacity: 50%;
}

#cattable {
    max-width:100%;
    min-width:100%;
    width:100%;
    overflow:hidden;
    cursor:default!important;
}
#cattable td {
    border: solid 2px darkgray;
    border-style: none solid solid none;
    cursor: default!important;
    padding: 7px;
    padding-top: 0px;
    padding-bottom: 0px;       
    min-width:95px;
    width:170px;     
    line-height: 15px;                  
}
.catimgtd {    
    overflow:hidden;
    height:65px;
    min-height:65px;
    max-height:65px;
    white-space: nowrap;
    text-align:center;
    padding:0px;
    margin:0px;
    background-color:#d5d5d5;
}

.catimg {
    border:1px solid rgb(233, 227, 227);
    border-radius:6px;
    cursor:pointer!important;
    /*max-height:198px;*/
    max-height:59px;
    margin:0;
    width:auto;    
}
.catbadge {           
    margin-top: -67px;
    margin-bottom: 18px;
    margin-left: 33%;
    text-align: center;
    opacity: .8;
    width: 175px;
    align-content: center;
    padding-top: 0.5%;
    transform: rotate(-17deg);
    font-weight: 600;
    font-size: 26px;
}
.catbadge img { /* obsolete */
    max-width: 100%;
    height: auto;
    transform: rotate(-12deg);
}
.catbadge span {
}
.cbsold {
    color: rgb(25, 188, 25);
}
.cbres{
    color: rgb(255, 118, 44);
}


#cattable tr:first-child td:first-child { border-top-left-radius: 10px; }
#cattable tr:first-child td:last-child { border-top-right-radius: 10px; }

#cattable tr:last-child td:first-child { border-bottom-left-radius: 10px; }
#cattable tr:last-child td:last-child { border-bottom-right-radius: 10px; }

#cattable tr:first-child td { border-top-style: solid; }
#cattable tr td:first-child { border-left-style: solid; }

.cattr {
    max-width:100%;
    min-width:100%;
    width:100%;
    color:#000;
    overflow:hidden;
}

.mandje {
    margin-top:8px;
    margin-right:8px;
    cursor: pointer;
}
.mandje i {
    color:rgb(186, 63, 63);
    font-size:120%;
}
.mandje div {
    position: absolute;                                    
    top: 52px;                                    
    text-align: center;
    display: block;
    margin: auto auto; 
    width: 40px;
    margin-left: -10px;                                   
    color: darkgreen;
    font-size: 10px;
}
.mandjeaccent {
    color: darkorange!important;
}
.catbuttonaccent {
    background-color: darkorange!important;
}