button:not(.md-button, .md-list-item-button), .button:not(.md-button){

    border: solid var(--color2) 2pt;
    background-color: white;
    color: var(--color2);
    font-size: 25pt;
    padding: 5px;
    cursor: pointer;
}
button:not(.md-button, .md-list-item-button):hover, .button:not(.md-button):hover{
    color:white ;
    background-color: var(--color2);
}
input{
    -webkit-appearance: none;

}
.navbar{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
}
.navbar li{
    list-style-type: none;
    flex: 1 0 auto;

    text-align: center;
    border: none;
    cursor: pointer;
}
.navbar li.active{
    border-bottom: solid var(--color2) 2pt;
    cursor: default;
}
.list{
    padding: 0;
}
.list li{
    list-style-type: none;
    padding: 5px;
    cursor: pointer;
}
.list li.active{
    background-color: var(--color2);
    color: white;

}
.comboBox{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}
.comboBox.hide{
    display: none;
}
.comboBox ul {
    flex: 1 0 auto;
    padding: 0;
    margin: auto 0;
}
.comboBox ul li{
    list-style-type: none;
    text-align: center;
    font-size: 60pt;
    margin: 20pt 0;
    color: white;
}
.comboBoxOpener{
    text-align: center;
    font-size: 19pt!important;
    margin: 10pt;
    float: left;
}

.comboBoxOpener::after{
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>');
    float: right;
    height: 20pt;
    width: 20pt;
    fill: red;
    margin-left: 5pt;
}
div.checkbox{
  margin: auto 0pt;
    flex: 0 0 28pt;
    height: 14pt;
    width: 28pt;
    border-radius: 14pt;
    padding: 2.5pt;
    background-color: lightgrey;
    transition: background-color 0.4s;
}
div.checkbox.x2{
  flex: 0 0 56pt;
  height: 28pt;
  width: 56pt;
  border-radius: 28pt;
  padding: 5pt;
}
div.checkbox:before{
  content: '';
    display: block;
    width: 14pt;
    height: 14pt;
    top: 0;
    left: 0;
    background-color: white;
    border-radius: 14pt;
    transition: margin 0.4s;
}
div.checkbox.x2:before{
  width: 28pt;
  height: 28pt;

  border-radius: 28pt;
}
div.checkbox.clicked{
    background-color:  var(--color2);
}
div.checkbox.clicked:before{
    margin-left: calc(50% - 1.75pt);
}
div.checkbox.x2.clicked:before{
    margin-left: calc(50% - 2.5pt);
}



.image{
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}


#snackbar {
  position: fixed; /* Sit on top of the screen */
  z-index: 100; /* Add a z-index if needed */
  bottom: 30px; /* 30px from the bottom */
  width: 100%;
  display: none;

  flex-direction: row;
}

#snackbar.show {
  display: flex;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;

}
#snackbar .placeholder{
  flex: 1 0 0;
}
#snackbar .box{
  flex: 0 0 auto;
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  
}
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
@media screen and (max-device-width: 800px) {
  #snackbar .box{
    font-size: 42pt;
  }
  .comboBoxOpener{
    font-size: 50pt!important;
  }

  .comboBoxOpener::after{
    height: 50pt;
    width: 50pt;

  }

div.checkbox{
    margin: auto 20pt;
    flex: 0 0 60pt;
    height: 34pt;
    width: 68pt;
    border-radius: 19pt;
    padding: 4pt;
    background-color: lightgrey;
    transition: background-color 0.4s
}
div.checkbox.x2{
    flex: 0 0 120pt;
    height: 68pt;
    width: 136pt;
    border-radius: 38pt;
    padding: 8pt;
}
div.checkbox:before{
    content: '';
    display: block;
    width: 32pt;
    height: 32pt;
    top: 0;
    left: 0;
    background-color: white;
    border-radius: 16pt;
    transition: margin 0.4s;
}
div.checkbox.x2:before{
  width: 64pt;
  height: 64pt;
  border-radius: 32pt;
}

div.checkbox.clicked{
    background-color: rgb(34, 96, 182);;
}
div.checkbox.clicked:before{
    margin-left: calc(50% - 2pt);
}
div.checkbox.x2.clicked:before{
    margin-left: calc(50% - 4pt);

}

}
.hide{
    display: none !important;
}
.icon{
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.not_show{
  visibility: hidden;
}
@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}