:root
 {
   
--colb: #D6D6D6;
--colback: #BDBDBD;
--colbcard: #BDBDBD;

--colm: #89D681;
--colo: #E86A33;
--colink: #C98B2C;
--colbut: #C98B2C;
--colslide: brown;
--colinfo: orange;
--collinea: #41644A;
--collineb: #41644A;

--colb: #484B4D; 
--colb: #89D681;

--colbcard:  #c9d1ca;
--colb: #6CA56C;
--colb: #67CEC4;

--colb: #D3DDE0;

--colt: #426f83;
--colm: #67CEC4;
--colo: #AA8B56;
--colbtable:#e7e7e7;


--colink: #54cae3;
--colink: #4ba180;

--colbut:  #c2e6ff;
--colslide:#67CEC4;
--colcheck: #5ABAE0;

--collinea: #41644A;
--collinea: #D3DDE0;

--collineb: #d7d7d7;
--backs:  #ededed5e;
}  
:root 
.dark-mode {
--colb: #5E5D5E; 
--colb: #35473F;
--colb: #484B4D;
--colb: #2f3c44;


--colbcard: #2E2E2E;
--colbcard: #2f4238;
--colbcard: #316051;
--colbcard: #2f3c44;
--colbcard: #265558;
--colbtable: #2f3a3b;

--colbcard: #00684b;

--colt: #F0EBCE;
--colm: #305C36;
--colo: #F0EBCE;;

--colslide:#4995B3;

--colink: #31a6ad;
--colbut:  #237c85;

--colcheck:  #237c85;

--collinea: #9f8e71;
--collinea: #2f3a3b;

--collineb: #015054;
  --colbcard: #006d74;

--backs: #0202025e;  
  
}

.tabbable > .nav > li > a[data-value='1. Global emissions'] { color:#D98C1A !important; }

.tabbable > .nav > li > a.active[data-value='1. Global emissions'] { 
  border-top: .2vw solid #D98C1A !important;
                 border-inline: .2vw solid #D98C1A !important;
    border-bottom: .1vw solid var(--colbtable) !important;
}

.tab-pane.active[data-value='1. Global emissions'] {
border-block: .2vw solid #D98C1A !important;
                             border-inline: .2vw solid #D98C1A !important;
}

.tabbable > .nav > li > a[data-value='2. Population projection'] { color:#AD7AFF !important }
.tabbable > .nav > li > a.active[data-value='2. Population projection'] {  border-top: .2vw solid #AD7AFF !important;
                             border-inline: .2vw solid #AD7AFF !important;
      border-bottom: .1vw solid var(--colbtable) !important;

}
                             .tab-pane.active[data-value='2. Population projection'] {
border-block: .2vw solid #AD7AFF !important;
                             border-inline: .2vw solid #AD7AFF !important;
}


.tabbable > .nav > li > a[data-value='4. Carbon price'] { color:#33C70E !important }
.tabbable > .nav > li > a.active[data-value='4. Carbon price'] {  border-top: .2vw solid #33C70E !important;
                             border-inline: .2vw solid #33C70E !important;
      border-bottom: .1vw solid var(--colbtable) !important;

}
                             .tab-pane.active[data-value='4. Carbon price'] {
border-block: .2vw solid #33C70E!important;
                             border-inline: .2vw solid #33C70E !important;
}
                             
                             .tabbable > .nav > li > a[data-value='3. User emissions'] { color:#24B0FF !important }
.tabbable > .nav > li > a.active[data-value='3. User emissions'] {  border-top: .2vw solid #24B0FF !important;
                             border-inline: .2vw solid #24B0FF !important;
      border-bottom: .1vw solid var(--colbtable) !important;

}
                             .tab-pane.active[data-value='3. User emissions'] {
border-block: .2vw solid #24B0FF !important;
                             border-inline: .2vw solid #24B0FF !important;
                                 border-bottom: .1vw solid var(--colbtable) !important;

}
                             .tabbable > .nav > li > a[data-value='EXTRA: Countries'] { color:yellow !important }
.tabbable > .nav > li > a.active[data-value='EXTRA: Countries'] {  border-top: .2vw solid yellow !important;
                             border-inline: .2vw solid yellow !important;}
                             .tab-pane.active[data-value='EXTRA: Countries'] {
border-block: .2vw solid yellow !important;
                             border-inline: .2vw solid yellow !important;
                                 border-bottom: .1vw solid var(--colbtable) !important;

}

.tabbable > .nav > li > a[data-value='1. Globaalit päästöt'] { color:#D98C1A !important; }

.tabbable > .nav > li > a.active[data-value='1. Globaalit päästöt'] { 
  border-top: .2vw solid #D98C1A !important;
                             border-inline: .2vw solid #D98C1A !important;
      border-bottom: .1vw solid var(--colbtable) !important;
  
}

.tab-pane.active[data-value='1. Globaalit päästöt'] {
border-block: .2vw solid #D98C1A !important;
                             border-inline: .2vw solid #D98C1A !important;

}



.tabbable > .nav > li > a[data-value='2. Maailman väestö'] { color:#AD7AFF !important }
.tabbable > .nav > li > a.active[data-value='2. Maailman väestö'] {  border-top: .2vw solid #AD7AFF !important;
                             border-inline: .2vw solid #AD7AFF !important;}
                             .tab-pane.active[data-value='2. Maailman väestö'] {
border-block: .2vw solid #AD7AFF !important;
                             border-inline: .2vw solid #AD7AFF !important;
                                 border-bottom: .1vw solid var(--colbtable) !important;

}


.tabbable > .nav > li > a[data-value='4. Hiilen hinta'] { color:#33C70E !important }
.tabbable > .nav > li > a.active[data-value='4. Hiilen hinta'] {  border-top: .2vw solid #33C70E !important;
                             border-inline: .2vw solid #33C70E !important;}
                             .tab-pane.active[data-value='4. Hiilen hinta'] {
border-block: .2vw solid #33C70E!important;
                             border-inline: .2vw solid #33C70E !important;
                                 border-bottom: .1vw solid var(--colbtable) !important;

}
                             
                             .tabbable > .nav > li > a[data-value='3. Käyttäjän päästöt'] { color:#24B0FF !important }
.tabbable > .nav > li > a.active[data-value='3. Käyttäjän päästöt'] {  border-top: .2vw solid #24B0FF !important;
                             border-inline: .2vw solid #24B0FF !important;}
                             .tab-pane.active[data-value='3. Käyttäjän päästöt'] {
border-block: .2vw solid #24B0FF !important;
                             border-inline: .2vw solid #24B0FF !important;
                                 border-bottom: .1vw solid var(--colbtable) !important;

}
                             .tabbable > .nav > li > a[data-value='EXTRA: Maat'] { color:yellow !important }
.tabbable > .nav > li > a.active[data-value='EXTRA: Maat'] {  border-top: .2vw solid yellow !important;
                             border-inline: .2vw solid yellow !important;}
                             .tab-pane.active[data-value='EXTRA: Maat'] {
border-block: .2vw solid yellow !important;
                             border-inline: .2vw solid yellow !important;
                                 border-bottom: .1vw solid var(--colbtable) !important;

}

.tabbable[data-value='1. Global emissions'] {border-block: 2px solid white !important;
                             border-inline: 2px solid white !important;}

.accordion {
  margin-bottom: .5rem;
}

.accordion a {
  color: white !important;
  margin-bottom: 1.5rem;
}

.accordion .dark-mode .card {
  border-color: white !important;
  border-width: 1px;
}

.card-orange {
  border-color:orange;
  border-width: .2rem;
}

.card-success {
  border-color: rgb(40,167,69);
  border-width: .2rem;
}
.card-lightblue {
  border-color: rgb(60,141,188);
  border-width: .2rem;
}


.radio {
  font-size: calc(.8vw +.4rem);
}

/*

.nav-tabs > li > .nav-link.active {
   border-color: green !important;
}
.tabbable > .nav > li > a[data-value='4. Carbon price'] { color:lightgreen !important}
.tabbable > .nav > li > a[data-value='3. User emissions'] { color:pink !important}
.tabbable > .nav > li > a[data-value='EXTRA: Countries'] { color:yellow !important}
--colinfo: #5ABAE0;

--colinfo: #5ABAE0;

--colslide:#5ABAE0;

:root,
@media (prefers-color-scheme: dark) {
  
  :root {
  --colb: red;  
}
}    
@media (prefers-color-scheme: light){
  :root {
--colb: blue;  
}
}

 var(--colb)


 .tab-content .tab-pane .sox {
    margin: 0.5vw;
}

.dark-mode .nav-tabs {
    border-color: transparent !important;
}
*/  
.custom-control-input:checked~.custom-control-label::before {
    color: var(--colt);
    border-color: orange!important;
    background-color: orange!important;
}

 input:checked {
       background-color: var(--colink) !important;

                    color: #007d3c!important;
                  }
              input[type="radio"] {
   color: green;
}    
            
             input[type=radio]:checked {
         background-color: green !important;
                             color: #007d3c!important;

      }      
   
   
.checkbox-primary input[type="checkbox"] {
      color: var(--colink) !important;
width: .1px;
    background-color: var(--colink) !important;
    border-color: var(--colink) !important;
}   
                  
.checkbox-primary input[type="checkbox"]:checked+label::before, .checkbox-primary input[type="radio"]:checked+label::before {
      color: var(--colink) !important;
width: .1px;
    background-color: var(--colink) !important;
    border-color: var(--colink) !important;
}
/*
      input[type='checkbox']{ /* style for checkboxe
        width: 30px !important; /*Desired width
        height: 30px !important; Desired height
        line-height: 30px !important; 
      }

.checkbox {
          width: 30px !important; /*Desired width
        height: 30px !important; /*Desired height
        line-height: 30px !important; 
  
}
*/

.checkbox-primary input[type="checkbox"]:checked+label::before, .checkbox-primary input[type="radio"]:checked+label::before {
      color: var(--colink) !important;

    background-color: var(--colink) !important;
    border-color: var(--colink) !important;
}

input[type=checkbox] {
    box-sizing: border-box;
    margin-top: .1vw;
    width:  calc(.6rem + .3vw) !important;
    height: calc(.6rem + .3vw) !important;
    line-height: .1vw !important;

}

#noku input[type=checkbox] {
          margin-bottom: -2.9vw !important;

  
}

.noku {
color: red;
font-family: trebuchet MS  !important;
font-size: calc(.2vw + .7rem) !important;
margin-left: -.4vw; 
margin-right: -.4vw;
text-align: left !important;
line-height: 1.1;
margin -.4vw -.4vw -.4vw -.4vw; 
padding: -.4vw  -.4vw -.4vw -.4vw;
border-collapse: collapse;
overflow: auto;


}
/*
.noku p {
color: blue;
font-family: trebuchet MS !important;
font-size: calc(.7vw + .23rem) !important;
text-decoration: none !important;
margin-bottom: .2rem !important;
margin-top: .1rem !important;
text-align: left !important;
margin-right:auto;margin-left:0px
line-height: 1.1;
}

*/
.noku p {
color: blue;
font-family: trebuchet MS !important;
font-size: calc(2.7vw + 2.23rem) !important;
text-decoration: none !important;
margin-bottom: .2rem !important;
margin-top: .1rem !important;
text-align: left !important;
margin-right:auto;margin-left:0px
line-height: 1.1;
}

/*
*/
.noku .shiny-input-container:not(.shiny-input-container-inline) {
            margin-bottom: -2.9vw !important;

}

input[type="radio"]{
    box-sizing: border-box;
    margin-top: .1vw;
    width:  calc(.4rem + .4vw) !important;
    height: calc(.4rem + .4vw) !important;
    line-height: .1vw !important;
  
  
}


.navbar-expand .navbar-nav .nav-link {
    padding-right: 0rem;
    padding-left: 0rem;
}

.irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single {
    color: #var(--colt);
    text-shadow: none;
    padding: 1px 3px;
    background-color: var(--colcheck) !important;
    border-radius: 3px;
    z-index: 3;
    font-size: calc(.4rem + .4vw); !important;
    line-height: 1.333;
}



.checkbox-primary input[type="checkbox"]:checked+label::before, .checkbox-primary input[type="radio"]:checked+label::before {
    background-color: var(--colcheck);
    border-color:var(--colcheck);
    border-top-color: var(--colcheck);
    border-right-color: var(--colcheck);
    border-bottom-color: var(--colcheck);
    border-left-color: var(--colcheck);
}

:after, :before{
                          color: var(--colink);
                            }'

.awesome-checkbox {
    background-color: var(--colb) !important;
}

.irs-grid-pol.small {height: 0px;}

.irs-grid-text {height: 0px;}


.dark-mode .card {
background-color: var(--colbcard);

}
hr {border-top: 2px solid white; margin-bottom:3px; margin-top:3px;}



rota.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
} 


/*
.dark-mode .card {
background-color: rgb(45, 36, 36);

  scrollbar-color: pink lightblue;
.irs--shiny .irs-min, .irs--shiny .irs-max {
  
  visibility: hidden !important;
}
} */


.dark-mode .rota {
  scrollbar-color:  #426f83  grey;
}

.navbar-gray-dark {
    background-color: var(--colb);
}

.dark-mode  .content-wrapper {
background-color: var(--collineb);
color: var(--colt);
padding: .1vw;
margin: .1vw;

}
.div.content-wrapper {
background-color: var(--collineb);
color: var(--colt);
padding: .1vw;
}

 .content-wrapper {
background-color: var(--collineb);
color: var(--colt);
padding: .1vw;
margin: .1vw;

}
//
.content-wrapper>.content {
padding: .1vw !important;
}


.bttn-fill.bttn-primary {
    background:var(--colbut);
    color: var(--colt);
}

.bttn-material-flat.bttn-primary {
    background: var(--colbut);
    color: var(--colt);
}

/*
.custom-control-input { 
visibility: hidden !important;

}
*/

.content-wrapper>.content {
    padding: .1vw !important;
}

.custom-control-input:checked~.custom-control-label::before {
color: var(--colt);
    border-color: #343a40;
    background-color: #343a40;
    box-shadow: none;
}

/*
 .dark-mode .custom-control-label, .dark-mode .custom-file-label, .dark-mode .custom-file-label::after, .dark-mode .custom-select, .dark-mode .form-control, .dark-mode .input-group-text {
    background-color: var(--colb) !important;
color: var(--colt);
    padding: 0.1rem;
    font-size: calc(.5rem + .5vw);
    height: calc(1.45rem + .5vw);
}
*/
 .custom-control-label, .custom-file-label,  .custom-file-label::after, .custom-select, .form-control,  .input-group-text {
    background-color: var(--colb) !important;
color: var(--colt);
    padding: 0.1rem;
    margin-right: 2.1rem;
    font-size: calc(.5rem + .4vw);
    height: calc(1.45rem + .1vw);
}
/*
.custom-switch .custom-control-label::before {
visibility: hidden !important;

}

.custom-switch .custom-control-label::after { 
visibility: hidden !important;

}
.custom-switch {
visibility: hidden !important;

}
*/
// yläreunan valikko {}

.label .radio-inline {
font-size: .45rem;

}

p {
margin-bottom: .1vw;
}

 .card-body {
               padding: .1vw;
    background-color: var(--colbcard) !important;

 }



.accordion {


}



.slick-dots li button:before {
      color: grey;
      opacity:.9;
    }          
    
    .slick-dots li.slick-active button:before {
      
            color: white;
      opacity:.9;
      
    }

#view {
font-size: .85rem;
              margin-bottom: .1vw;
line-height: 1;

}



#visib {
font-size: .85rem;
line-height: 1;
              margin-bottom: .1vw;

}

.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {
padding-top: 0.1vw;
}


.input[type=checkbox] {
    transform: scale(.7);
}

input[type=awesome-checkbox] {
                    transform: scale(.2);
           }
           
.custom-control-input:checked~.custom-control-label::before {
    color: #var(--colt);
    border-color: red;
    background-color: red;
}           


.dark-mode input[type="checkbox"] { /* change "blue" browser chrome to yellow */
  filter: invert(100%) hue-rotate(165deg) brightness(1.2);
}
/*
#tablu {
color: red;
font-family: trebuchet MS  !important;
font-size: calc(.7vw + .23rem) !important;
margin-left: -.4vw; 
margin-right: -.4vw;
text-align: left !important;
line-height: 1.1;
margin -.4vw -.4vw -.4vw -.4vw; 
padding: -.4vw  -.4vw -.4vw -.4vw;
border-collapse: collapse;
overflow: auto;


}

#tablu p {
color: blue;
font-family: trebuchet MS !important;
font-size: calc(.7vw + .23rem) !important;
text-decoration: none !important;
margin-bottom: .2rem !important;
margin-top: .1rem !important;
text-align: left !important;
margin-right:auto;margin-left:0px
line-height: 1.1;
}

#tablu2 {
color: blue;
font-family: trebuchet MS  !important;
font-size: calc(.7vw + .23rem) !important;
margin-left: -.4vw; 
margin-right: -.4vw;
line-height: 1.1;
margin -.4vw -.4vw -.4vw -.4vw; padding: -.4vw  -.4vw -.4vw -.4vw;
border-collapse: collapse;
overflow: auto;
}

#tablu2 p {
color: blue;
font-family: trebuchet MS  !important;
font-size: calc(.7vw + .23rem) !important;
text-decoration: none !important;
margin-bottom: .2rem !important;
margin-top: .1rem !important;
line-height: 1.1;
}

#tablu3 {
color: blue;
font-family: trebuchet MS  !important;
font-size: calc(.7vw + .23rem) !important;
margin-left: -.4vw; 
margin-right: -.4vw;
line-height: 1.1;
margin -.4vw -.4vw -.4vw -.4vw; padding: -.4vw  -.4vw -.4vw -.4vw;
border-collapse: collapse;
overflow: auto;
}

#tablu3 p {
color: blue;
font-family: trebuchet MS  !important;
font-size: calc(.7vw + .23rem) !important;
text-decoration: none !important;
margin-bottom: .2rem !important;
margin-top: .1rem !important;
line-height: 1.1;
}
#tablu4 {
color: blue;
font-family: trebuchet MS  !important;
font-size: calc(.7vw + .23rem) !important;
margin-left: -.4vw; 
margin-right: -.4vw;
line-height: 1.1;
margin -.4vw -.4vw -.4vw -.4vw; padding: -.4vw  -.4vw -.4vw -.4vw;
border-collapse: collapse;
overflow: auto;
}

#tablu4 p {
color: blue;
font-family: trebuchet MS  !important;
font-size: calc(.7vw + .23rem) !important;
text-decoration: none !important;
margin-bottom: .2rem !important;
margin-top: .1rem !important;

line-height: 1.1;
}

#tablu5 {
color: blue;
font-family: trebuchet MS  !important;
font-size: calc(.7vw + .23rem) !important;
margin-left: -.4vw; 
margin-right: -.4vw;
line-height: 1.1;
margin -.4vw -.4vw -.4vw -.4vw; padding: -.4vw  -.4vw -.4vw -.4vw;
border-collapse: collapse;
overflow: auto;
}

#tablu5 p {
color: blue;
font-family: trebuchet MS  !important;
font-size: calc(.7vw + .23rem) !important;
text-decoration: none !important;
margin-bottom: .2rem !important;
margin-top: .1rem !important;

line-height: 1.1;
}
*/


#tablu .col-sm-12, #tablu2 .col-sm-12, #tablu3 .col-sm-12, #tablu4 .col-sm-12, #tablu5 .col-sm-12 {
      padding-right: 0.1vw !important;
    padding-left: 0.1vw !important;
}

          .table {
              margin-bottom: .1vw;
overflow: scroll;
               padding: .1vw !important;
border-spacing: 0px;
               }
               
               .table td {
                                padding-top: .1vw !important;

               padding-bottom: .1vw !important;
                              padding-right: .2vw !important;

              margin-bottom: .1vw;
    background-color:var(--colb)!important;
border-color: var(--collinea) !important;
 border: 0px solid white;
text-align: left;


               }

.table-bordered {
  
  border-color: green;
  border: .1vw solid var(--collinea) !important;
  
}     
               
/*
               .td {
               padding: .1vw;
              margin-bottom: .1vw;
display: inline-block;
text-align: right;
               }
*/

 input[type='awesome-checkbox']{ /* style for checkboxes */
        width: 60px !important; /*Desired width*/
        height: 30px; /*Desired height*/
        line-height: 30px; 
      }



.form-group {
margin-bottom: .3rem;

}

//
/*
        .nav-tabs .nav-item {
  transform: skew(-22.5deg);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, .2);
        }
*/
.row{
      margin-right: -0.5px;
    margin-left: -3.5px;
    margin-bottom: 5px;
}

#bor {
    
padding: .1vw !important;
margin: .4vw !important;
box-sizing: border-box;
border-width: 0px;
}




#bor2 {
 border-color: #3C8DBC;
border-bottom-color: none;
            border-width: .2vw;
 border-style: outset;
border-color: white !important;
  border-radius: 5px;
padding: .3vw !important;


}
 
#bor3 {
 border-color: var(--collineb);
border-bottom-color: none;
            border-width: .3vw;
 border-style: solid;
  border-radius: 5px;
padding: .3vw !important;

    background-color: var(--colbcard)!important;
text-align: center;
}



#bor4 {
 border-color: var(--colm);
border-bottom-color: none;
            border-width: .3vw;
 border-style: solid;
  border-radius: 5px;
padding: .3vw !important;
    background-color: var(--colbcard)!important;


}


#buddo {
      background-color: var(--collinea)!important;
  
  
}

#bor4 .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
}




#bor4 {
  
 
   

  
 border-color: var(--colbcard);
border-bottom-color: none;
            border-width: .2vw;
 border-style: solid; 
  border-radius: 5px;
padding: .5vw !important;

}


#bor4a {
    background-color: var(--colbcard);
  border-color: var(--collinea) !important;
padding: .5vw !important;
margin: .0vw !important;
box-sizing: border-box;
 border-style: solid; 
  border-radius: 5px;
            border-width: .2vw;
}


#bor4a .control-label {
color: var(--collinea);
font-size: calc(.6vw + .7rem);
text-align: center !important;
text-decoration: none;
margin-bottom: .7rem;
}

#bor4a p {
color: var(--collinea);
font-size: calc(.7vw + .7rem);
text-align: left !important;
text-decoration: none;
margin-bottom: .5rem;
margin-top: -.3rem;
}

/*
#nok .nav {
    flex-wrap: wrap-reverse;
    flex-direction: row;
    text-align: left;
    padding: 0vw;
    margin: 0vw;
    line-height: 1.2rem;
}
 style for checkboxes 
#bor5 .row {
    display: flex;

    flex-direction: column;
    flex-wrap: nowrap; 
  
  
}
*/


#nok a {
     background-color: var(--backs);
     z-index: -1;
  
  
}


#bor5 .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    
    justify-content: space-between;
}




#bor5 {
  
 
       background-color: var(--colbcard);


  line-height: 1.1;
 border-color: var(--collinea);
border-bottom-color: none;
            border-width: .0vw;
 border-style: solid; 
  border-radius: 5px;
padding: rem !important;
padding-top: .1vw !important;
padding-bottom: .1rem !important;


}


#bor5a {
    background-color: var(--colbcard);
  border-color: var(--collinea) !important;
padding: .5vw !important;
margin: .0vw !important;
box-sizing: border-box;
 border-style: solid; 
  border-radius: 5px;
            border-width: .2vw;
}


#bor5a .control-label {
color: var(--collinea);
font-size: calc(.6vw + .7rem);
text-align: center !important;
text-decoration: none;
margin-bottom: .7rem;
}

#bor5a p {
color: var(--collinea);
font-size: calc(.7vw + .7rem);
text-align: left !important;
text-decoration: none;
margin-bottom: .5rem;
margin-top: -.3rem;
}

  
#bor5 a {


padding-left: .5vw;
padding-right: .8vw;

margin-top: 0vw !important;
color: var(--colink);
padding-top: .0vw;
padding-bottom: .0vw;
margin-bottom: -.0vw;

margin-left: .5vw;

font-size: calc(.5vw + .54rem);
line-height: 1.0rem;
font-weight: 1000 !important;

display: inline;
    } 

.selectize-control .selectize-dropdown {
  position: static !important;
}

#lak .row {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: nowrap;
}

#automatic {
display: table-cell;
}
 #startlabel {
display: table-cell;
}

// left panel texts    border-color:rgb(45, 36, 36) !important;
 {}


    /* 
   .col-sm-12 {
padding: .1vw;
   } 


   .col-sm-3 {
padding: .1vw;
   } 

   .col-sm-2 {
padding: .1vw;
   } 
   .col-sm-4 {
padding: .1vw;
box-sizing: border-box;

   } 

   .col-sm-8 {
padding: 0.1vw;
margin: 0vw;
    border-left: 0px;
box-sizing: border-box;

    } 
*/
 
 #bor4   a {
color: var(--colink);
padding-top: .2vw;
padding-bottom: .2vw;

padding-left: 2px;
margin-left: .0vw;
font-size: calc(.2vw + .7rem);
line-height: 1.0rem;
font-weight: 1000 !important;

display: inline;
    } 
    
     #bor5  a {

padding-left: .5vw;
padding-right: .8vw;

    } 
       
#luu { 
  border-right: 0.1px solid white; 
  margin-right: .1vw;
}


   
#tabb  a.active {
color: var(--colt);
margin-bottom: s.5rem;
    padding-top: 0.2vw !important;
    padding-bottom: 0.9rem !important;

display: inline;
margin-left: -.1vw;
    background-color: var(--colbtable) !important;
    display:block !important;
    } 
    
#tabb  a {
color: var(--colt);
margin-bottom: .5rem;
    padding-top: 0.2vw !important;
    padding-bottom: 0.9rem !important;

display: inline;
margin-left: -.1vw;
    display:block !important;
    } 
    

// nav extend left selection field backgrounds to whole lenght
and make vertical instead of horizontal {}             
  .btn {
font-size: .8rem;
}
  /*   
  
         li.active {
padding-top: -.0vw;
padding-bottom: .2vw;
margin-left: .1vw;

    } 

  
         .nav{
flex-wrap: wrap-reverse;
  flex-direction: column;
text-align: left;
padding: .0vw;
margin: .0vw;
line-height: 1.2rem;

.li {
      background-color: #001f3f59;
}
  
}
}
*/
  // left panel general {}



.content-wrapper .nav li {
  color: #46E8CD;
  border-top: .0px solid white;

  border-right: .0px solid white;
  border-left: .0px solid white;
  padding-bottom: -2px;
    margin-bottom: calc(-.3vw - .3rem);

   /*
background-color: black !important;
*/
  }

.content-wrapper .nav li a {
  display: block;
    padding-bottom: -2px;
    margin-bottom: -2px;

  }

label {
    font-weight: 300;
    margin-bottom: 0.1rem !important;
}



// left panel active
  box-shadow: 5px 5px 15px rgba(0, 0, 0, .2);
{}

//
.content-wrapper .nav li .active {
    border-top: 2px solid red;
    border-bottom: 2px solid red;
}

// headlines {}

.control-label {
 
font-size: calc(.61vw + .46rem);
line-height: .9rem;
margin-bottom: .8rem;
margin-top: .3;

}


.shiny-input-checkboxgroup label~.shiny-options-group, .shiny-input-radiogroup label~.shiny-options-group {
    margin-top: -1px;
}

// right panel active {}


  input[type=\"number\"] {
    width: max(6vw, 52px);
padding: 0.1rem 0.1rem;
font-size: .9rem;
height: calc(.75rem+2px);

  }
  
label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 500;
}

.slug .label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 500 !important;
}

.slug .p {
  font-weight: 500 !important;

}
.acco  {
  color: white;

}


.radio label:not(.form-check-label):not(.custom-file-label)  {
font-weight: 500 !important;
}

#rad label:not(.form-check-label):not(.custom-file-label)  {
font-weight: 500 !important;
}


 /*
.tab-pane.active{
  
    background-color: var(--colbtable);
               margin-left: 0.5vw;
                              margin-right: 0.5vw;
                              margin-top: 0.2vw;

padding: .6vw;
padding-right: 1.3vw;
padding-top: .6vw;
padding-bottom: .2vw;

font-size: calc(.35vw + .47rem) !important;
font-weight: 100 !important;


}
 */

#panes {
  
    background-color: var(--colb);
               margin-left: 0.0vw;
                              margin-right: 0.0vw;
                              margin-top: 0.0vw;

padding: .6vw;
padding-right: 1.3vw;
padding-top: .6vw;
padding-bottom: .2vw;

font-size: calc(.45vw + .47rem) !important;
font-weight: 100 !important;


}



#view {

font-size: calc(.45vw + .47rem) !important;
font-weight: 100 !important;

}

#sla label{display: table-cell; text-align: left; vertical-align: middle; 
 /*
 width: 40px !important; 
 */
 font-size: calc(.41vw + .41rem) !important;
} 

#sla label {
  
  font-size: calc(.51vw + .41rem) !important;
}

#sla .form-group { display: table-row; 
horizontal-align: right;
  /*
 width: 40px !important;
 
max-width: 40px;

#rota {
    transform:rotateX(180deg);

}

#rota img {
    transform:rotateX(180deg);

}

#rota .shiny-output-error {
    transform:rotateX(180deg);

}
*/

}

#sla shiny-input-container:not(.shiny-input-container-inline){
 width: 2rem !important;
/*
max-width: 2rem;
#sla p {width: 8.1vw !important; }
}
*/
}

.shiny-input-container:not(.shiny-input-container-inline) {
    width: auto;
    max-width: 100%;
}

#sla .div{
 width: 2rem !important;
}

@media all and (min-device-width: 480px) {



@media all and (max-device-width: 480px) {
 #sla p {
   width: 38.1vw !important;
  }
}


.form-check-label {
font-weight: 100 !important;

}
label:not(.form-check-label):not(.custom-file-label) {


}

.radio {

line-height: 1;
margin-bottom: .0rem;
font-weight: 100 !important;

}



.card-title {
font-size: 1.0rem !important; 

}
/*
#ruukk {
  visibility: hidden;
}
*/
.card {
  overflow: hidden;
margin-bottom: .0vw;
}

.card-header {
  overflow: hidden;
padding: .1vw;

}

.card-header {
text-align: center;
  
}

.body p {
text-align: center;
  line-height: 1.1;

}
  

  
.card-text {
    word-wrap: break-word;
flex-wrap: wrap;
}

#info .text {
display: flex;
flex-wrap: wrap; 
        flex-direction: row;
}

.irs-single {
top: 5px !important;

}

.irs--shiny .irs-bar { 
  height: 13px !important; 
  top: 15px !important;
} 

.irs--shiny .irs-line { 
  height: 15.5px !important; 
  top: 15px !important;
} 


 .irs--shiny .irs-single {
font-size: calc(.6vw + .6rem);
z-index: 2;
top: 5px !important;
margin-top: -4px;

 }



 .irs--shiny .irs-handle {
color: var(--colink) !important;
background-color: var(--colink);

 }


.irs--shiny .irs-bar {
    top: 25px;
    height: 8px;
    border-top: 1px solid var(--colink);
    border-bottom: 1px solid var(--colink);
    background: var(--colink) !important;
}

.irs--shiny .irs-shadow {
    top: 35px;
    height: .35vw;
    background: #f8f9fa !important;
    border-radius: 5px;
}


.dark-mode .irs-grid-pol {
    background-color: #001f3f !important;
      top: 5px !important;

}

#yearc .irs-handle {
color: black !important;


}

.slider-animate-container {
    text-align: right;
  margin-top: -1.2vw;

}

.dataTables_scrollBody {
    transform:rotateX(180deg);

}
.dataTables_scrollBody table {
    transform:rotateX(180deg);

}


div.datatables {
color: white !important;
}

table.dataTable tbody tr {
background-color: var(--colcheck) !important;
}

table.dataTable.display tbody tr.odd {
background-color: var(--colb) !important;

}


tr {
  
  
}

table.dataTable.display tbody tr:hover {
background-color: #1d89ff !important;

}

button.dt-button {

color: white;
}

tbody {
vertical-align: left;
}

pre {
padding: .1px;
margin: .1px;
overflow-y: scroll; 
}

.irs--shiny .irs-line {
height: 160px

}
fas.ca-info-circle {
color: black;


}

.fa a {
color: black;

}

.btn {
    font-size: 1.8rem;
        line-height: 1.5!important;

}

#but .btn {

    
        font-size: calc(.45vw + .45rem);
    line-height: .4 !important;
  
    padding: .5vw;
        margin-right: .3vw;
    
}

#tably .dt-button {
  
  color: white;
}


#countrr .btn {
    font-size: .8rem;
}

#vuo .control-label {
margin-bottom: 0.2rem !important;

}
 .slick-slide img {
    width: 100% !important;
 }

.slick-next:before {
    content: '>';
}
.slick-prev:before {
    content: '<';
}
.slick-prev:before, .slick-next:before {
    color:  var(--colo);
font-size: 2.3rem;
font-weight: 900;

}



#tuto .card {
border-color: var(--colb);
border-width: 2px;
margin-bottom: .2rem;
margin-top: .2em;

}

#tuto .shiny-html-output {
  font-size: calc(.5vw + .5rem) !important;
}

#tuto .shiny-text-output {
  font-size: calc(.6vw + .6rem) !important;
}


.btn-tool {
margin-right: .2rem;
margin-top: -.7rem;
float: none;
color: var(--colo);
}

 .btn-default {
    background-color: var(--colbut);
    color: #var(--colt);
    border-color: var(--colbut) !important;
}

#ress .btn {
    font-size: calc(.47vw + .47rem);
    line-height: .4 !important;
    text-align: right;
    padding: .6vw;
        margin-right: .3vw;
}

#ress2 .btn {
  background-color: #bd00a6;
    font-size: calc(.99vw + .49rem);
    line-height: .4 !important;
    text-align: right;
    padding: .6vw;
        margin-right: .3vw;
}


.card-title {
float: center !important;
color: var(--colo);
font-size: 1.3rem;
font-weight: 600;
}