*{margin:0; padding:0; box-sizing: border-box;}
body{
    font-family: 'Courier New', Courier, monospace;
}

.connect-btn{
    position: absolute;
    height:20px;
    width:60px;
    opacity:.01;
    transform-origin:center;
    text-align: center;
    background-color: rgb(199, 255, 199);
    border:none;

    &:hover{
        opacity: .8;
    }
}



.output{
    background-color: rgb(255, 190, 190);
}

.outputFalse{
    background-color: rgb(190, 201, 255);
}

.toggle-false{
    font-size:22px;
    background-color: rgb(190, 201, 255);
    height:30px;
    width:20px;
}

.toggle-in-out{
    font-size:22px;
    background-color: rgb(255, 190, 190);
    height:30px;
    width:20px;
}

.fa{
    font-size:2.5rem;
    width:3rem;
}

header{
    padding:0.5rem;
    
    *{
        z-index:3;
    }
    h1{
        background-color: gainsboro;
        padding:0.2rem;
    }

    .tool-row{
         background-color: gainsboro;
        
    }

    input{
        width:5rem;
        font-size: 2rem;
        text-align: center;
        background-color: gainsboro;
        border:1px solid black;
    }

}

#draw{
    margin-left:.75rem;
    border:2px solid black;
    width: 100%;
    height:92.5vh;
    overflow: auto;
}

#draw-line-button{
   border-top: 2px solid black;
}

#tools{
      min-width:150px;
      max-width:150px;
      gap:.5rem;
      min-height: 90vh;
      padding-left:0.5rem;

}

#ad{
    display:flex;
    justify-content: start;
    flex-direction: column;
    align-items: center;
    min-width:310px;
    max-width:310px;
    height:100%;
    top:3.3rem;
    right:5px;
    font-size:.8rem;
    font-family:arial;
    background-color: rgb(242, 242, 242);
    z-index:0;
    padding:0.25rem;
    gap:0.5rem;

    div{ width:100%; background-color: gainsboro;}

    button{
        width:1rem; height:1rem; border-radius:0.5rem; border:1px solid black; background-color: transparent; display: inline; 
    }

    p{display: inline; margin-bottom: 0.25rem; }

    span{
        font-size: 0.6rem;
    }

    a{
        width:100%;
        color:black;
       
    }
    &:visited{
        color:black;
    }

}

.tool-row{
 justify-content: space-evenly;

  button{
    background-color: transparent;
    border: none;
  }

  .small-button{
    width:1.5rem;
    .fa{
        font-size:1.5rem; 
        width:1.5rem;
     
    }  
  }
  

}

.single-button{
    background-color: transparent;
    border: none;

    img{
      width:120px;  
    }
    
}

.flex{
   display: flex;
}

.column{
    flex-direction: column;
}

.space-between{
    justify-content: space-between;
}

.separator{
    margin-top:.5rem;
}

.small-gap{
    gap:1rem;
}
select{
    width:100%;
    font-size: 1rem;
    border-radius:0;
    background-color: gainsboro;
    border:none;
    padding:0.1rem;
}

#support{
    border-top: 0.1rem solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:.75rem;
  
        padding-top:0.5rem;

}

button:hover{
    transform: scale(1.1);
}

.debug-message{
    position: absolute;
    display:none;
    min-width:6rem;
    border: 0.1rem solid red;
    background-color: gainsboro;
    border-radius: 0.2rem;
    text-align: center;
    font-size:1.3rem;
    animation: flash 0.5s ease-in infinite;
    animation-play-state: paused;
    animation-direction:alternate;
    transform: scale(1);
}

@keyframes flash{
    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.2);
        border-width:0.2rem;
    }

    100%{
        transform: scale(1);
        border-width:0.1rem;
    }
}

optgroup{
    color:black;
    font-weight: bold;
}

.stop-options{
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
    input{
        width:1.5rem;
    }

    div{
        height:100%;
    }
}

#clock-icon{
    opacity:0.3;
}

fieldset{
    display: flex;
}