.hidden{
        display: none;
    }

    .block{
       display: block;
    }

    [class*="col"]{
        border-style: none;
    }

    .collapsible {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      background-color: #777;
      color: white;
      cursor: pointer;
      padding: 5px 18px 5px 18px;
      width: 420px;
      border: none;
      text-align: left;
      outline: none;
      font-size: 20px;
      visibility: hidden;
    }

    .info{
        background: #eeffff;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        display: block;
        border-style: solid;
        border-width: 1.5px;
        border-top-style: none;
        border-radius: 0 0 5px 5px;
        border-color: #333333;
        width:min-content;
        padding: 3px;
    }

    .info:hover{
        background-color: #80bfff;
    }


    .btnCustom{
        font-family: "Source Sans Pro", sans-serif;
        font-size: 18px;
        font-weight: 400;
        border-style: solid;
        border-width: 2px;
        border-radius: 3px;
        border-color: #777777;
        background-color: #f1f1f1;
        width:fit-content;
        padding: 4px;
    }

    .btnCustom:hover{
        background-color: #80bfff;
    }
    .btnCustom:active{
        background-color: #b3d9ff;
    }

    .instructions{
        cursor: pointer;
        visibility: collapse;
    }

    input[type="file"] {
    display: none;
    }

    .custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 8px 6px;
    cursor: pointer;
    }

    .custom-file-upload:hover{
        background-color: #80bfff;
        border-color: #0044aa;
        border-style: solid;
    }

    .custom-file-upload:active{
        border-color: #0044aa;
        background-color: #b3d9ff;
        border-style: solid;

    }

    .custom-pos{
        height: 186px;
        width: 130px;
        border: 1px solid #aaa;
        cursor: pointer;

    }

    .custom-pos:hover{
        background-color: #80bfff;
        border-color: #0044aa;
        border-style: solid;
    }

    .appearFade {
    opacity: 1;
    animation: fade 0.5s linear;
    }


    @keyframes fade {
      0% { opacity: 0 }
      50% { opacity: 0.7 }
      10%,100% { opacity: 1 }
    }

    .disabled {
        pointer-events: none;
        opacity: 0.5;
      }
    .name{
        font-family: "Source Sans Pro", sans-serif;
        font-size: 20px;
    }
    .descr{
        font-family: "Source Sans Pro", sans-serif;
        font-size: 15px;
        padding-right: 5px;
    }



    .pointselect{
        margin-left: 25px;
        margin-top: 48px;
        padding: 5px;
        width: 80px;
        height: 80px;
        border-radius: 2px;
        border-color: #cccccc;
        border-style: solid;
        cursor: pointer;
    }
    .pointselect:hover{
        background-color: #80bfff;
        border-color: #0044aa;
        border-style: solid;
    }

    .pointselect:focus{
        background-color: #80bfff;
        border-color: #0044aa;
        border-style: solid;
        cursor: crosshair;

    }
    .pointselect:active{
        border-color: #0044aa;
        background-color: #b3d9ff;
        border-style: solid;

    }

    .selected{
        background-color: #bfffb3;
        border-color: #19ff40;
        border-style: solid;

    }

    .nselected{
        background-color: #ff6a4d;
        border-color: #ff0000;
        border-style: solid;
    }

    .preselected{
        border-color: #777;
        background-color: #cccccc;
        border-style: solid;
    }


    .active, .collapsible:hover {
      background-color: #555;
    }

    .collapsible:after {
      content: '\25BD';
      color: white;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }

    .active:after {
      content: "\25B3";
      color: white;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }

    .content {
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 400;
      font-size: 17px;
      padding: 0px 10px 0px 10px;
      max-height: 0;
      width: 420px;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      background-color: #f1f1f1;
    }

    input[type=range][orient=vert]
    {
        position: relative;
        top: 30px;
        right: 5px;
        transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        height: 130px;
        width: 129px;
        cursor: pointer;
    }


    .pos {
        visibility: hidden;
    }

    .pos .collapsible{
        visibility: hidden;
    }

    .varst{
        height: 50px;
        width: 50px;
        border-style: solid;
        background-color: #555555;
    }

    .true{
        background-color: #19ff40;
        height: 50px;
        width: 50px;
        border-style: solid;
    }
    .false{
        background-color: red;
        height: 50px;
        width: 50px;
        border-style: solid;
    }

    .statContent{
        font-family: "Source Sans Pro",sans-serif;
        font-size: 18px;
    }

    .messageHidden{
        display: none;
    }

    .message{
        display: block;
        width: 1000px;
        border-style: solid;
        border-radius: 10px;
        background-color: #b3d9ff;
        opacity: 90%;
        padding: 20px;
        justify-content: center;
        align-content: center;
        z-index: 2;

    }

    .vw{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100em;
        width: 100em;
        display: flex;
        margin: 0;
        z-index: 3;
    }

    .switch {
      position: relative;
      display: inline-block;
      width: 51px;
      height: 26px;
      left: 200px;
      margin-bottom: 5px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 2px;
      bottom: 3px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked + .slider {
      background-color: #80bfff;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 25px;
    }

    .slider.round:before {
      border-radius: 50%;
    }

    .indicator{
        position: relative;
        display: inline-block;
        left: 250px;
        bottom: -10px;
        height: 20px;
        width: 20px;
        border-style: solid;
        border-radius: 20px;

    }

    .vp {
        box-shadow: 0 4px 8px 0 rgba(50, 50, 50, 0.99), 0 6px 20px 0 rgba(50, 50, 50, 0.99);
    }
    .vp.active {
        box-shadow: 0 4px 8px 0 rgba(12, 87, 237, 0.62), 0 6px 20px 0 rgba(12, 87, 237, 0.62);
    }