*{
    /*font-family:Arial, Helvetica, sans-serif ;*/
    font-family:"Nunito", sans-serif;
}

html{
    font-family:Arial, Helvetica, sans-serif ;
    font-size: 12pt;
}

body{
    margin: 5px 2em;
    height: 100vh;
    background: linear-gradient(to bottom, rgb(211, 211, 211), rgb(255, 255, 255));
    background-size: 100%;
    background-repeat: no-repeat;
}

input[type="checkbox"] {
    position: relative;
    width: 1.8em;
    height: 1.8em;
    color: black;
    border: 3px solid grey;
    border-radius: 4px;
    appearance: none;
    outline: 0;
    cursor: pointer;
    transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
    &::before {
      position: absolute;
      content: '';
      display: block;
      top: 0;
      left: 0.2em;
      width: 0.5em;
      height: 0.7em;
      border-style: solid;
      border-color: white;
      border-width: 0 4px 4px 0;
      transform: rotate(45deg);
      opacity: 0;
    }
    &:checked {
      color: white;
      border-color: black;
      background: green;
      &::before {
        opacity: 1;
      }
      ~ label::before {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      }
    }
}

.checkbox-label-container{
      display: flex;
      align-items: center;
}

input[type=button]{
  border: 3px solid grey;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  width: 150px;
  height: 50px;
  background: radial-gradient(rgb(255, 255, 255), rgb(141, 141, 141));
  font-weight: bold;
}

input[type=button]:hover{
  transform:scale(1.15);
  transition: 0.3s;
}

input[type=text]{
  border: 3px solid grey;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.bold-label{
  font-weight: bold;
}

#radio {
  box-sizing: border-box;
  &::before, &::after {
    box-sizing: border-box;
  }
}

input[type="radio"] {
  position: relative;
  width: 1em;
  height: 1em;
  color: black;
  border: 3px solid grey;
  border-radius: 15px;
  appearance: none;
  outline: 0;
  cursor: pointer;
  transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}

input[type="radio"]:checked {
  background: green;
}

.vertical-blank-space{
  height: 0px;
}

.horizontal-container{
  display: flex;
  align-items: center;
}

.horizontal-container div{
  margin: 0 5px;
}

.input-text-container{
  font-size: 24px;
}

.no-scroll{
  overflow: hidden;
}

.disabled-content{
  pointer-events:none;
  opacity: 0.3;
}

.hide-content{
  display: none;
}

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

.vertical-container-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vertical-container-left{
  display: flex;
  flex-direction: column;
}

.horizontal-list{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.horizontal-list li {
float: left;
margin-inline: .5em;
}

.zero-opacity{
  opacity: 0;
}