body, html {
        margin: 0;
        font-family: MS Gothic, Tahoma, Helvetica;
        font-size: 10pt;
        width: 100vw;
    max-width: 100%;
    height: 100vh;
    max-height: 100%;
    overscroll-behavior: none;
      }
  #settingsAppContent, .settingsAppContent {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #EEEFE1;
    font-family: MS Gothic, "MS Gothic";
  }
  .controlPanelToolbar {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 25px;
  }
  .controlPanelToolbarOpt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 11px);
    padding: 5px;
    margin: 1px;
    cursor: default;
    user-select: none;
    font-size: 9pt;
  }
  .controlPanelToolbarOpt:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  .controlPanelLocationToolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    border: solid 1px #E0D7CA;
    box-shadow: 0 1px 1px #FFF, 0 1px 1px #FFF inset;
    border-left: none;
    border-right: none;
  }
  .controlPanelLocationToolbar div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px;
  }
  .cPtoolbarBtn {
    height: 16pt;
    min-width: 16pt;
  }
  .cPtoolbarBtn img:hover {
    cursor: pointer;
  }
  .navButtonDesc {
    padding: 5px;
    margin-left: 5px;
    font-size: 9pt;
    cursor: pointer;
  }
  .controlPanelUrlBar {
    width: 50%;
    min-width: 200px;
    font-family: inherit;
  }
  .controlPanelBack {
    transform: rotate(180deg);
  }
  .controlPanelForward {
    transform: rotate(360deg);
  }
  .cPNavIco {
    width: 16pt;
    height: 16pt;
  }
  #settingsNav {
    width: 100%;
    height: 20%;
    margin: 0;
  }
  #settingsContent {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80%;
    margin: 0;
  }
  #settingsContentLeft {
    background-color: #6B85DC;
    width: 220px; /* 250px - 30px */
    height: calc(100% - 30px);
    color: #30508D;
    padding: 15px;
  }
  #cPIntroTitle {
    background: linear-gradient(90deg, #074BB0, #205ABE);
    color: #FFF;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 30px;
    border-radius: 10px 10px 0 0;
  }
  #cPIntroTitleIcon {
    width: 30px;
    margin-left: 5px;
  }
  #cPIntroTitle > span {
    padding-left: 15px;
  }
  #cPIntroDesc {
    background-color: #F0F2FF;
    border-radius: 0 0 2px 2px;
    padding: 10px;
  }
  #cPIntroTitle2 {
    background: linear-gradient(90deg, #FFF, #C6D4FB);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 30px;
    border-radius: 10px 10px 0 0;
  }
  #cPIntroTitle2 > span {
    padding-left: 15px;
  }
  #cPIntroDesc2 {
    background-color: #D7DEF8;
    border-radius: 0 0 2px 2px;
    padding: 10px;
  }
  #settingsContentRight {
    width: calc(100% - 280px);
    height: calc(100% - 30px);
    background-color: #FFF;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 5px;
    padding: 15px;
  }
  #settingsContentRight > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    color: #000 !important;
  }
  #settingsContentRight > a:focus {
    background-color: rgba(0, 85, 234, 0.3);
    outline: dotted 1px #000;
  }
  #settingsContentRight > a img {
    height: 50px;
    width: 50px;
  }
  #settingsContentRight > a p {
    font-size: 10pt;
    letter-spacing: -1px;
  }