body {
      transition: 1.5s;
      margin: 0px;
}

button {
      cursor: pointer;
}

button:disabled {
      cursor: not-allowed;
}

.board-frame {
      margin: 20px;
      margin-bottom: 0px;
      padding: 16px;
      border: 2px #888 solid;
      border-radius: 9px;
      min-height: 200px;
      max-height: 400px;
      overflow-y: scroll;
}

button {
      font-family: Bmitra;
}

.board-frame::-webkit-scrollbar {
      width: 12px;
}

.board-frame::-webkit-scrollbar-track {
      background-color: #f2f2f2;
      border-radius: 12px 2px 2px 12px;
}

.board-frame::-webkit-scrollbar-thumb {
      background-color: #d6d3d3;
      border-radius: 12px;

}

.pme {
      margin-top: 16px;
      padding: 10px;
      margin-right: 60px;
      background-color: rgb(218, 227, 223);
}

.pres {
      margin-top: 16px;
      padding: 10px;
      margin-left: 40px;
      background-color: rgb(242, 242, 255);
      border-radius: 4px;
}

.operation-report-frame {
      background-color: #88888844;
      border-radius: 8px;
}

.operation-report-frame h5 {
      margin-top: 0px;
      margin-bottom: 6px;
}

.result-report {
      min-height: 3rem;
      padding: 8px;
}

.status-report {
      background-color: #88888844;
      display: flex;
      justify-content: baseline;
      border-radius: 0px 0px 8px 8px;
      padding: 0px 8px 4px 4px;
}


.sendMessageEditor {
      margin: 20px;
      padding: 10px;
      width: -webkit-fill-available;
      border-radius: 9px;
}

form[name=ayat-selector] {
      pointer-events: none;
      background-color: rgb(126, 125, 125);
}

.ayat-frame {
      font-family: Bnazanin;

      margin: 20px;
      padding: 16px;
      border: 2px #888 solid;
      background-color: #e6e6e6;
      border-radius: 9px;
      font-size: 0.8rem;
}

.ayat-frame-2 {
      font-family: Bnazanin;

      margin: 20px;
      /* padding: 16px; */
      border: 2px #888 solid;
      background-color: #e6e6e6;
      border-radius: 9px;
      font-size: 0.8rem;
      width: fit-content;
      box-shadow: #17263a44 0px 0px 10px;
}

.section-frame {
      display: flex;
      justify-content: center;
}

.action-row-wrapper {
      display: flex;
      justify-content: center;
      padding-bottom: 12px;
}

.action-row {
      display: block;
      /* justify-content: space-between; */
      width: 220px;
      font-size: large;
}

.action-row select {
      width: 100%;
      border: 2px gray solid;
      border-radius: 8px;
      height: 2rem;
      text-align: center;
}






.fw-bolder {
      border-radius: 0px !important;
}

.info {
      cursor: pointer;
      color: #d3d2d2;
      text-decoration: none;
}

.info-display-frame {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #00000066;
      z-index: 2;
      justify-content: center;
      align-items: center;
      display: none;

}

.info-display-card {
      background-color: #ffffff;
      width: 400px;
      min-height: 250px;
      align-self: center;
      padding: 20px;
      border: #072a55 2px solid;
      border-radius: 20px;
}

#info-frame {
      position: fixed;
      display: none;
}

.extra-file-input {
      background-color: #efefef;
      padding: 2px 6px;
      border-radius: 2px;
      border: 1px solid black;
      font-size: small;
}

.extra-file-input:hover {
      background-color: rgb(229, 229, 229);

}

.file-input-btn-img {
      width: 16px;
      position: relative;
      top: 4px;
}

.close-btn {
      cursor: pointer;
      margin: 10px;
}

.action-box {
      margin: 10px;
}

.list-headline-frame {
      width: 100%;
      display: flex;
      justify-content: center;
      align-content: center;
}

.list-headline-box {
      width: fit-content;

      justify-content: center;
      align-content: center;
}



.iransanswebfont {
      font-family: 'iransansweb';
}

@font-face {
      font-family: 'me_quran';
      src: url('me_quran\ Regular.ttf') format('truetype');
      /* src: url('/mag/wp-content/uploads/font/me_quran.eot?#iefix') format('embedded-opentype'), url('/mag/wp-content/uploads/font/me_quran.woff') format('woff'), url('/mag/wp-content/uploads/font/me_quran.ttf') format('truetype'), url('/mag/wp-content/uploads/font/me_quran.svg#me_quran') format('svg'); */
      font-weight: normal;
      font-style: normal;
      line-height: 2.5em;
}

@font-face {
      font-family: 'iransansweb';
      src: url('./iransansweb.ttf') format('truetype');
      /* src: url('/mag/wp-content/uploads/font/me_quran.eot?#iefix') format('embedded-opentype'), url('/mag/wp-content/uploads/font/me_quran.woff') format('woff'), url('/mag/wp-content/uploads/font/me_quran.ttf') format('truetype'), url('/mag/wp-content/uploads/font/me_quran.svg#me_quran') format('svg'); */
      font-weight: normal;
      font-style: normal;
      line-height: 2.5em;
}

@font-face {
      font-family: 'AzarMehr';
      src: url('./azarmehr.ttf') format('truetype');
      /* src: url('/mag/wp-content/uploads/font/me_quran.eot?#iefix') format('embedded-opentype'), url('/mag/wp-content/uploads/font/me_quran.woff') format('woff'), url('/mag/wp-content/uploads/font/me_quran.ttf') format('truetype'), url('/mag/wp-content/uploads/font/me_quran.svg#me_quran') format('svg'); */
      font-weight: normal;
      font-style: normal;
      line-height: 2.5em;
}

@font-face {
      font-family: 'Bnazanin';
      src: url('./B\ Nazanin_YasDL.com.ttf') format('truetype');
      /* src: url('/mag/wp-content/uploads/font/me_quran.eot?#iefix') format('embedded-opentype'), url('/mag/wp-content/uploads/font/me_quran.woff') format('woff'), url('/mag/wp-content/uploads/font/me_quran.ttf') format('truetype'), url('/mag/wp-content/uploads/font/me_quran.svg#me_quran') format('svg'); */
      font-weight: normal;
      font-style: normal;
      /* line-height: 2.5em; */
}

@font-face {
      font-family: 'Bmitra';
      src: url('./B\ Mitra_YasDL.com.ttf') format('truetype');
      /* src: url('/mag/wp-content/uploads/font/me_quran.eot?#iefix') format('embedded-opentype'), url('/mag/wp-content/uploads/font/me_quran.woff') format('woff'), url('/mag/wp-content/uploads/font/me_quran.ttf') format('truetype'), url('/mag/wp-content/uploads/font/me_quran.svg#me_quran') format('svg'); */
      font-weight: normal;
      font-style: normal;
      /* line-height: 2.5em; */
}


.action-comment {
      font-size: 0.8rem;
      line-height: 0.8rem;
      color: #47494d;
}

.text-change-warning {
      color: red;
      font-size: small;
      display: none;
}

.result-frame {
      padding: 5%;
      font-family: 'iransansweb';
      background-image: url('/src/img/Borhan.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: rgba(255, 255, 255, 0.94);
      background-blend-mode: lighten;
}

.btn {
      padding: 6px 18px 6px 18px;
      color: azure;
      font-size: larger;
      cursor: pointer;

}

.output-action-btn {
      border: 2px rgb(56, 56, 56) solid;
      padding: 6px;
      border-radius: 4px;
      max-width: 16px;
      opacity: 0.8;
}

.smaller {
      max-width: 10px;
}

.output-action-btn:hover {
      border: 2px black solid;
      opacity: 1 !important;
      cursor: pointer;
}

.btn-primary {
      background-color: #072a55;
      color: rgb(198, 201, 209);
      border: #072a55 2px solid;
      border-radius: 8px !important;
      cursor: pointer;
      width: 100%;

}

.btn-primary:hover {
      background-color: #0f335f;
      color: rgb(228, 236, 203);
      border: #284e7c 2px solid;
      cursor: pointer;
}

.btn-primary:disabled {
      background-color: #47494d;
      color: rgb(12, 9, 54);
      border: #17263a 2px solid;
      cursor: not-allowed;
}

.display-control-box {
      padding-left: 40px;
      direction: ltr;
      display: flex;
      align-content: end;
}

.control-btns {
      max-width: 16px;
}

.page-header {
      display: flex;
      padding: 2vw;
      justify-content: center;
}

.page-header h1 {
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.app-image {
      max-width: 60px;
      aspect-ratio: 1/1 !important;
}

.output-action {
      max-width: 16px;
      opacity: 0.4;
      cursor: pointer;
}

.input-determination-field {
      background-color: bisque;
      padding: 4px;
      border-radius: 10px;
      margin-bottom: 20px;
      padding-bottom: 14px;
}

label {
      margin-bottom: 4px;
      height: 1.2rem;
}

.output-setting-textarea {
      width: 70%;
      height: 6rem;
      resize: none;
}


.hidden {
      display: none;
}

.red-alert {
      color: rgb(163, 7, 7);
      font-weight: bold;
}

.ltrs {
      direction: ltr;
      display: flex;
}

.test-error {
      background-color: red;
      padding: 0px 10px 0px 10px;
      font-weight: bold;
}

.test-ok {
      background-color: rgb(69, 248, 84);
      padding: 0px 10px 0px 10px;
      font-weight: bold;
}

.refresh-btn {
      cursor: pointer;
      max-width: 14px;
}

.refresh-btn :hover {

      max-width: 16px;
}

.do-waiting-img {
      width: 36px;
      animation: rotate 2s infinite;
      animation-timing-function: cubic-bezier(1, 0, .5, 1);
}

@-webkit-keyframes rotate {
      from {
            -webkit-transform: rotate(0deg)
      }

      to {
            -webkit-transform: rotate(720deg)
      }
}

#chev1 {
      margin-bottom: -5px;
}

#do-waiting {
      display: none;
}

.clickable {
      cursor: pointer;
      width: fit-content;
}

.clickable:hover {
      text-shadow: #17263a44 0px 0px 3px;
}

.full-width-in-mobile {
      cursor: pointer;
      width: fit-content;
}

.setting-info {
      padding: 16px;
      background-color: #d3d2d2;
      border-radius: 4px;
}

.setting-info-row {
      font-size: small;
      color: #47494d;
}


#createNewSettingForm {
      margin-top: 20px;
}

.operation-btn-frame {
      /* display: flex; */
      padding-top: 12px;
}

.hidden {
      display: none;
}

.operation-btn-box {
      /* position: fixed; */
}

.center {
      display: flex;
      justify-content: center;
}

.center100 {
      display: flex;
      justify-content: center;
      width: 100%;
}

.result-received {

      padding: 10px;
      background-color: #ccf748;
      display: flow-root;

}

#extraSelect-description {
      height: 300px;
      resize: both;

}


@media (min-width:320px) {

      /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
      .size-change-guide {
            visibility: hidden;
      }

}



#settingsSelectToEdit {
      width: 50%
}

.width50 {
      width: 50%
}

.page-header {
      display: grid;
}

.page-header span {
      display: flex;
      justify-content: center;
      width: 96vw;
}

/* To set some classes for the mobile screen */
@media (max-width:599px) {
      .action-row {
            width: 80vw
      }

      .action-row-2 {
            width: 75vw
      }

      #settingsSelectToEdit {
            width: 90%
      }




      .page-header h1 {
            font-size: 1.5rem;
      }

      .output-setting-textarea {
            width: 98%;
      }

      .full-width-in-mobile {

            width: 100%;
      }

      .ayat-frame {
            width: 78vw;
            margin: 20px 0px;
      }
}


/* To set some classes for the desktop screen */
@media (min-width:600px) {

      .action-row {
            width: 100%
      }

      .desk-grid-frame {
            width: 90vw;
            display: flex;
            justify-content: space-around;
      }

      .desk-grid {
            width: 30%;
            padding: 16px;
      }

      .text-center {
            text-align: center;
      }

      .vw90 {
            width: 90vw;
      }

      .btn {
            padding: 0%;
      }

      .operation-btn-frame {

            padding-top: 24px;
      }

      .ayat-frame {
            width: 88vw;
            margin: 20px 0px;
      }

      .page-header {
            display: block;
      }

      .page-header span {
            display: flex;
            justify-content: center;
      }
}

.history-link {
      font-size: medium;
      margin-top: 1em;
}