@font-face{
    font-family: 'ploni-round';
    src: url('SecularOne-Regular.ttf') format('truetype');
    font-weight: normal;
}

html{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
        supported by Chrome, Edge, Opera and Firefox */
}

body {
   /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   */
   font-family: 'ploni-round';
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }

  .container {
    display: none; 
    height: auto;
    width: auto;
    min-width: 200px;
  /*  border: 2px solid black;  */
    position: absolute;
    top: 40%;
    left: 75%;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);

    white-space: nowrap;
}

.SubtitleContainer {
    width: auto;
    height: 20px;
    background-color: rgba(51, 65, 85, 0.95);

    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bolder;
    font-size: 20px;
    color: white;
    gap: 5px;
    direction: rtl;
}

.officersContainer {
    direction: rtl;
    width: auto;
    height: auto;
    padding: 4px;
    border-top: none;
    background: rgba(0, 0, 0, 0.3);
    font-size: 16px;
}

.officer {
    width: auto;
    height: auto;
    margin: 5px;
    color: white;
}

.tag {
    background: rgb(0, 128, 255);
    font-weight: bolder;
    border-radius: 3px;
    padding: 0.1px 4px 0.1px 4px;

}

.fullname {

}

.grade {

}

.radio {
    font-family: ;
    font-weight: bolder;
    text-shadow: 0px 0px 2px white;
}

.commanderC {
    background: rgb(255, 0, 0);
}

.commanderCC {
    background: rgb(146, 0, 0);
}

.swatC {
    background: rgb(0, 0, 0);
}

.detectiveC {
    background: rgb(232, 116, 0);
}

.trooperC {
    background: rgb(0, 12, 179);
}

.tazP {
    background: rgb(179, 0, 167);
}

.yasam {
    background: rgb(158, 158, 158);
}

.yasmag {
    background: rgb(0, 179, 51);
}

.me {
    text-shadow: 0px 0px 1px white;
}

.yarokzait {
    background: rgb(51, 102, 0);
}

.haki {
    background: rgb(204, 204, 0);
}

.hom {
    background: #351C00;
}

.SubtitleButton {
    color: rgb(181, 181, 181);
    display: flex;
    justify-content: center;
    align-items: center;
    direction: ltr;
    gap: 15px;
  }
  
  .SubtitleButton:hover {
    cursor: pointer;
    transition: all 100ms ease-in-out;
    color: white;
  }
  
  .SubtitleButton:active {
    transition: all 100ms ease-in-out;
    color: rgb(181, 181, 181);
  }

  .tabUL {
    color: white;
  }

  .speaking {
    color: red;
    text-shadow: 0px 0px 2px red;
}

.SubtitleCategory {
    margin-left: 30px;
}






  /*Main Container*/








  .MContainer {
    display: none;
      width: 400px;
      height: 210px;
      background-color: rgba(51, 65, 85);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 10px;
      box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.75);
      direction: rtl;
  }
  
  .TopC {
      width: auto;
      height: 60px;
    /*  border: 2px solid black;  */
      display: flex;
      justify-content: space-between;
      padding: 15px;
  }
  
  .Pimg {
      filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(180deg);
  }
  
  .SubtitleMCtext {
      color: white;
    /*  border: 2px solid red; */
      font-weight: bolder;
      font-size: 25px;
  }
  
  .SubtitleMCtextSmall {
      color: rgb(190, 190, 190);
      font-size: 15px;
      font-weight: bold;
  }
  
  .BottomC {
      height: 40%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px;
  }
  
  .tagC {
      border-radius: 10px;
      background: rgb(62, 79, 103);
      box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
      width: 100px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      gap: 2px;
  }
  
  .tagInput {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
  }
  
  .tagInput input {
      width: 45%;
      height: 20px;
      background: transparent;
      border: none;
      border-radius: 5px;
      font-size: 15px;
      font-weight: bold;
      border: 2px solid white;
      margin-top: 2px;
      color: white;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
  .tagInput input[type="number"]:focus {
      outline: none;
    
      }
    
      .tagInput input[type="number"]:not(:focus) {
          transition: all 500ms ease-in-out;
          }
    
    .tagInput input[type="number"]::-webkit-inner-spin-button, 
    .tagInput input[type="number"]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
    }
  
    .ConfirmCallsignButton {
      background: rgb(8, 213, 8);
      border-radius: 50%;
      color: white;
      width: 15px;
      padding: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .ConfirmCallsignButton:hover {
      cursor: pointer;
      box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 0.75);
      transition: all 200ms ease-in-out;
    }
  
    .ConfirmCallsignButton:active {
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
    transition: all 200ms ease-in-out;
    }
  
  .toggleC {
      border-radius: 10px;
      background: rgb(62, 79, 103);
      box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
      width: 100px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .TOGGLEbutton {
      display: flex;
      height: 100%;
      width: 100%;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
  
      box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
      color: white;
      font-weight: bolder;
      gap: 5px;
  }
  
  .TOGGLEbutton:hover {
      cursor: pointer;
      box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 0.75);
      transition: all 200ms ease-in-out;
  }
  
  .TOGGLEbutton:active {
      box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
      transition: all 200ms ease-in-out;
  }
  
  .sizeC {
      border-radius: 10px;
      background: rgb(62, 79, 103);
      box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.75);
      width: 100px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
  }
  
  .plusminusButtons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      margin: 8px;
  }
  
  .PlusSizeButton {
      background: rgb(8, 213, 8);
      border-radius: 50%;
      color: white;
      width: 15px;
      padding: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .PlusSizeButton:hover {
      cursor: pointer;
      box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 0.75);
      transition: all 200ms ease-in-out;
  }
  
  .PlusSizeButton:active {
      box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
      transition: all 200ms ease-in-out;
  }
  
  .MinusSizeButton {
      background: rgb(213, 8, 8);
      border-radius: 50%;
      color: white;
      width: 15px;
      padding: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .MinusSizeButton:hover {
      cursor: pointer;
      box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 0.75);
      transition: all 200ms ease-in-out;
  }
  
  .MinusSizeButton:active {
      box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.75);
      transition: all 200ms ease-in-out;
  }