*{margin: 0;}

.header{
      background: #1E8BD4;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: white;
      padding: 4px;
      font-family: sans-serif;
}

.control-panel{
      background: lightgray;
      text-align: right;
      padding: 4px;
      font-family: sans-serif;
}

.languages{
      background: white;
      border: 1px solid gray;

}
#editor{
      height: 400px;
}
.button-container{
      text-align: left;
      padding: 8px;
      background: #d3d3d3;

}
.btnp{

        background-color: initial;
        border-radius: 6px;
        box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
        color: #FFFFFF;
        cursor: pointer;
        font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
        height: 40px;
        line-height: 40px;
        outline: 0;
        overflow: hidden;
        padding: 0 20px;
        pointer-events: auto;
        position: relative;
        text-align: center;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        vertical-align: top;
        white-space: nowrap;
     
        z-index: 9;
        border: 0;
        transition: box-shadow .2s;
      }
      
      .btnp:hover {
        box-shadow: rgba(253, 76, 0, 0.5) 0 3px 8px;
      }
.output{
      padding: 4px;
      border: 2px solid gray;
      min-height: 50%;
      resize: none;
}
.footer{
      direction: rtl;
      text-align: center;
      padding: 8px;
      height: 10vh;
      width: 100%;

      position: fixed;
}