form .field--name-field-group1-total,
form .field--name-field-group2-total,
form .field--name-field-group3-total,
form .field--name-field-group4-total,
form .field--name-field-total-sum {
  display: none !important;
}
.js-form-wrapper.js-webform-states-hidden[style*="display: block"] {
  display: flex !important;
}
.row.js-form-wrapper {
  width: 100%;
  margin-inline: 0;
}
.sum-all {
  font-size: 140%;
  justify-content: space-between;
  padding: 5px 20px;
  font-weight: 600;
  color: var(--main1);
}
@font-face {
  font-family: "itf Qomra Arabic";
  src: url("webFonts/itfQomraArabic-Bold.eot");
  src:
    url("webFonts/itfQomraArabic-Bold.eot?#iefix") format("embedded-opentype"),
    url("webFonts/itfQomraArabic-Bold.woff2") format("woff2"),
    url("webFonts/itfQomraArabic-Bold.woff") format("woff"),
    url("webFonts/itfQomraArabic-Bold.ttf") format("truetype"),
    url("webFonts/itfQomraArabic-Bold.svg#itfQomraArabic-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "itf Qomra Arabic";
  src: url("webFonts/itfQomraArabic-Light.eot");
  src:
    url("webFonts/itfQomraArabic-Light.eot?#iefix") format("embedded-opentype"),
    url("webFonts/itfQomraArabic-Light.woff2") format("woff2"),
    url("webFonts/itfQomraArabic-Light.woff") format("woff"),
    url("webFonts/itfQomraArabic-Light.ttf") format("truetype"),
    url("webFonts/itfQomraArabic-Light.svg#itfQomraArabic-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "itf Qomra Arabic";
  src: url("webFonts/itfQomraArabic-Black.eot");
  src:
    url("webFonts/itfQomraArabic-Black.eot?#iefix") format("embedded-opentype"),
    url("webFonts/itfQomraArabic-Black.woff2") format("woff2"),
    url("webFonts/itfQomraArabic-Black.woff") format("woff"),
    url("webFonts/itfQomraArabic-Black.ttf") format("truetype"),
    url("webFonts/itfQomraArabic-Black.svg#itfQomraArabic-Black") format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "itf Qomra Arabic";
  src: url("webFonts/itfQomraArabic-Medium.eot");
  src:
    url("webFonts/itfQomraArabic-Medium.eot?#iefix") format("embedded-opentype"),
    url("webFonts/itfQomraArabic-Medium.woff2") format("woff2"),
    url("webFonts/itfQomraArabic-Medium.woff") format("woff"),
    url("webFonts/itfQomraArabic-Medium.ttf") format("truetype"),
    url("webFonts/itfQomraArabic-Medium.svg#itfQomraArabic-Medium")
      format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "itf Qomra Arabic";
  src: url("webFonts/itfQomraArabic-Regular.eot");
  src:
    url("webFonts/itfQomraArabic-Regular.eot?#iefix")
      format("embedded-opentype"),
    url("webFonts/itfQomraArabic-Regular.woff2") format("woff2"),
    url("webFonts/itfQomraArabic-Regular.woff") format("woff"),
    url("webFonts/itfQomraArabic-Regular.ttf") format("truetype"),
    url("webFonts/itfQomraArabic-Regular.svg#itfQomraArabic-Regular")
      format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.print-btn {
  box-shadow: none;
  position: fixed;
  bottom: 20px;
  inset-inline: auto 15px;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--main3);
  box-shadow: 0 0 20px #00000030;
}
:root {
  --green1: #427f77;
  --green2: #094239;
  --green3: #002623;

  --main1: var(--green2);
  --main2: #eeeeee;
  --main3: #988561;
  --main4: #b9a779;

  --main350: rgba(152, 133, 97, 0.176);

  --circle: 500px;

  --bs-btn-focus-box-shadow: 0 0 0 0.25rem
    rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--main2) !important;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "itf Qomra Arabic", sans-serif !important;
}
.navbar-brand > span {
  display: flex;
  flex-direction: column;
}

.navbar-brand img {
  width: 100%;
  margin-inline-end: 10px;
}

.navbar-brand > span > span:first-child {
  font-size: 82%;
  color: #111;
}

.navbar-brand > span > span:last-child {
  font-size: 82%;
  color: #232637;
}
.form-control:focus {
  border-color: var(--green1);
  box-shadow: 0 0 0 0.25rem var(--main350);
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--green2);
  --bs-btn-border-color: var(--green2);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--green1);
  --bs-btn-hover-border-color: var(--green1);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--green1);
  --bs-btn-active-border-color: var(--green1);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--green2);
  --bs-btn-disabled-border-color: var(--green2);
}

html {
  height: 100%;
}
body,
.dialog-off-canvas-main-canvas,
.dialog-off-canvas-main-canvas > div,
.dialog-off-canvas-main-canvas > div > div,
#page {
  min-height: 100vh;
}
#page {
  display: flex;
  flex-direction: column;
}
.site-footer {
  margin-block: auto 0;
  padding: 15px 0 30px;
  background-color: var(--green3);
}

body {
  background-color: var(--main2);
}
.nav-link,
a {
  color: var(--green2);
}
a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
}
.newBg {
  background: url(../imgs/bg1.svg);
  height: 60vh;
  /* width: 50vw; */
  position: fixed;
  inset: 0;
  z-index: -1;
}

.newBg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    143deg,
    rgba(238, 238, 238, 0.7) 0%,
    rgba(238, 238, 238, 1) 40%
  );
  /* background-size: 80%; */
}
.navbar-brand {
  width: 80px;
}
#main-wrapper {
  padding-top: 15px;
}
h1.title {
  font-weight: 600;
  font-size: 130%;
}
/* login */

.page-user-login .nav-tabs {
  display: none;
}

.page-user-login #main-wrapper {
  flex-grow: 1;
  align-items: center;
  display: flex;
}
.page-user-login .main-content {
  max-width: 440px;
  margin-inline: auto;
}
.page-user-login .main-content .section .title {
  text-align: center;
}
.page-user-login .main-content .section {
  padding: 25px;
  box-shadow: 0 0 30px #b9a77a;
  border-radius: 10px;
  background: #fff;
}
.page-user-login .main-content form button {
  width: 100%;
}

body:not(.page-user-login) header > nav > * {
  background-color: #fff;
  border-radius: 10px;
}
body:not(.page-user-login) header > nav {
  margin-top: 15px;
  padding-block: 0 !important;
}

body:not(.page-user-login) #main > * {
  background-color: #fff;
  padding: 30px 20px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.form-actions button {
  min-width: 90px;
}
@media only screen and (min-width: 991px) {
  .offcanvas-body {
    margin-inline: auto 0;
  }
}
#block-moed3-page-title .title {
  margin-bottom: 40px;
}
.dropdown-item {
  display: flex;
  justify-content: start;
}
.dropdown-menu {
  border: 0;
  box-shadow: 0 0 14px #00000030;
  padding-block: 10px !important;
}
.table-responsive td {
  font-size: 140%;
}
.block-menu + .views-element-container {
  display: flex;
  align-items: center;
}
.current-user-tools {
  display: flex;
  margin-inline-start: 40px;
}
.current-user-tools svg {
  margin-inline-end: 5px;
}
.current-user-tools > *:last-child {
  margin-inline-start: 16px;
}
.current-user-tools > *:last-child .logout svg {
  width: 16px;
}

/* evaluation form */
.node-head-dept-evaluation-form
  .field--type-integer:not(.field--name-field-years),
.node-evaluation-form .field--type-integer:not(.field--name-field-years),
.node-mgr-rvaluation-form .field--type-integer:not(.field--name-field-years),
.node-head-dept-evaluation-edit-form
  .field--type-integer:not(.field--name-field-years),
.node-evaluation-edit-form .field--type-integer:not(.field--name-field-years),
.node-mgr-rvaluation-edit-form
  .field--type-integer:not(.field--name-field-years) {
  padding-block: 10px;
  padding: 10px;
  background: #f3f3f3 !important;
  margin-bottom: 0 !important;
}
.node-head-dept-evaluation-form .field--type-integer:nth-child(even),
.node-evaluation-form .field--type-integer:nth-child(even),
.node-mgr-rvaluation-form .field--type-integer:nth-child(even),
.node-head-dept-evaluation-edit-form .field--type-integer:nth-child(even),
.node-evaluation-edit-form .field--type-integer:nth-child(even),
.node-mgr-rvaluation-edit-form .field--type-integer:nth-child(even) {
  background: #fcfcfc !important;
}
.node-head-dept-evaluation-form
  .field--type-integer:not(.field--name-field-years)
  > *,
.node-evaluation-form .field--type-integer:not(.field--name-field-years) > *,
.node-mgr-rvaluation-form
  .field--type-integer:not(.field--name-field-years)
  > *,
.node-head-dept-evaluation-edit-form
  .field--type-integer:not(.field--name-field-years)
  > *,
.node-evaluation-edit-form
  .field--type-integer:not(.field--name-field-years)
  > *,
.node-mgr-rvaluation-edit-form
  .field--type-integer:not(.field--name-field-years)
  > * {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0 !important;
}

.node-head-dept-evaluation-form
  .field--type-integer:not(.field--name-field-years)
  > *
  input,
.node-evaluation-form
  .field--type-integer:not(.field--name-field-years)
  > *
  input,
.node-mgr-rvaluation-form
  .field--type-integer:not(.field--name-field-years)
  > *
  input,
.node-head-dept-evaluation-edit-form
  .field--type-integer
  > *
  input:not(.field--name-field-years),
.node-evaluation-edit-form
  .field--type-integer
  > *
  input:not(.field--name-field-years),
.node-mgr-rvaluation-edit-form
  .field--type-integer
  > *
  input:not(.field--name-field-years) {
  width: 150px;
  text-align: center;
  border: 1px solid var(--main3);
  margin-inline-end: 10px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
.field-group-details summary {
  padding-block: 15px 10px;
  font-size: 120%;
  padding-inline-start: 34px;
  font-weight: 600;
}

details {
  border: 1px solid #c7c7c7;
  margin-block: 18px;
  border-radius: 10px;
}
details summary::marker {
  content: "";
}
details summary {
  position: relative;
}
details summary::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="%230F0F0F"/></svg>');
  inset-inline: 5px auto;
  inset-block: auto;
}
details[open] summary::before {
  transform: rotate(-90deg);
}

.assessment-with-degree {
  display: flex;
  justify-content: space-between;
  background: #fafafa;
  padding: 14px;
}
.assessment-with-degree:nth-child(even) {
  background: #f1f1f1;
}
.assessment-degree {
  display: flex;
  gap: 10px;
  min-width: 160px;
}
.assessment-degree.total > * {
  font-size: 140%;
  font-weight: 600;
  font-family: arial;
}

.mark-as-text {
  display: flex;
  align-items: center;
}
.circleMark {
  width: 14px;
  height: 14px;
  border-radius: 40px;
  display: inline-flex;
}
.circleMark {
  margin-inline-end: 8px;
}
.circleMark.m1 {
  background-color: #29dd00;
}
.circleMark.m2 {
  background-color: #13e0b2;
}
.circleMark.m3 {
  background-color: #d15fe0;
}
.circleMark.m4 {
  background-color: orange;
}
.circleMark.m5 {
  background-color: #ea2828;
}
.employee-info .ddd {
  display: flex;
}
.employee-info .ddd > * {
  padding: 12px 0;
}
.employee-info .ddd > *:first-child {
  padding-inline-start: 12px;
  font-weight: 600;
}
.employee-info .ddd > *:last-child {
  padding-inline-start: 8px;
}
.employee-info .row:nth-child(odd) .ddd {
  background-color: #f1f1f1;
}
.employee-info .row:nth-child(even) .ddd {
  background-color: #fafafa;
}

.employee-info {
  margin-bottom: 40px;
}

.assessment-with-degree .total-label {
  font-weight: 600;
}

.navbar-toggler {
  border: 0;
  box-shadow: none;
  padding-inline-end: 4px;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.node--type-manager-report .all-assessments .field,
.employee-info,
.all-assessments .section-title {
  padding: 15px 10px;
  border: 1px solid var(--main3);
  margin-block: 32px;
  border-radius: 12px;
}
.employee-info {
  margin-bottom: 32px;
}
.all-assessments > * > *:first-child {
  font-size: 140%;
  margin-bottom: 10px;
  color: var(--green2);
  font-weight: 500;
}
.all-assessments > *:first-child {
  margin-top: 10px;
}

.all-assessments > .assessment-with-degree {
  margin-top: -25px !important;
}
/* offcanvas  */

@media screen and (max-width: 991px) {
  .offcanvas {
    background-color: var(--main2);
  }
  .offcanvas-body {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
  }
  .offcanvas nav > ul {
    display: flex;
    flex-direction: column;
    padding-inline-start: 8px;
  }
  .current-user-tools {
    margin-inline: 0px !important;
    margin-bottom: 30px;
    justify-content: space-between;
    width: 100%;
    border: 1px solid #09423930;
    padding: 20px;
    border-radius: 10px;
    background: #0000000d;
  }
  .navbar .navbar-brand {
    width: 70px;
  }
  .navbar .navbar-brand + span {
    font-size: 12px;
  }
  .offcanvas-header {
    padding-bottom: 0;
  }
  .offcanvas-header .navbar-brand {
    width: 80px;
    display: flex;
  }
  .nav.navbar-nav li {
    padding-block: 8px;
  }
  .nav.navbar-nav li:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
  }
  .nav-link.dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

@media screen and (max-width: 767px) {
  .node-head-dept-evaluation-form .field--type-integer > * input,
  .node-evaluation-form .field--type-integer > * input,
  .node-mgr-rvaluation-form .field--type-integer > * input,
  .node-head-dept-evaluation-edit-form .field--type-integer > * input,
  .node-evaluation-edit-form .field--type-integer > * input,
  .node-mgr-rvaluation-edit-form .field--type-integer > * input {
    width: 70px;
  }

  .dropdown-item.active,
  .dropdown-item:active {
    color: var(--main2);
    background-color: var(--green3);
  }
  .assessment-with-degree {
    flex-direction: column;
  }

  .views-exposed-form .d-flex,
  .views-exposed-form .d-flex > *,
  .views-exposed-form .d-flex > * > button {
    width: 100%;
  }
}

.button.dialog-cancel {
  display: inline-flex;
  background: #6b6b6b;
  padding: 8px 20px 6px 20px;
  border-radius: 6px;
  color: #fff;
  min-width: 90px;
  justify-content: center;
  align-items: center;
}

/*******************/
.node-form .field--name-field-nodedirectorate {
  display: none !important;
}
.node-form .content.row > * {
  width: 100% !important;
}

/*************************/
.user-form {
  max-width: 480px;
  margin-inline: auto;
}
.list-group-item {
  color: unset;
  text-decoration: none;
  background-color: transparent;
  border: 0;
}

@media print {
  #block-moed3-page-title .title {
    margin-bottom: 20px;
  }

  .container {
    width: 100%;
    max-width: unset;
  }

  body,
  input,
  textarea,
  select {
    color: #000;
    background: none;
  }
  .two-sidebars,
  .sidebar-first,
  .sidebar-second,
  body {
    width: unset !important;
  }
  #sidebar-first,
  #sidebar-second,
  .navigation,
  #toolbar,
  .site-footer,
  .tabs,
  .shortcut-action {
    display: none;
  }
  .one-sidebar .main-content,
  .two-sidebars .main-content {
    width: 100%;
  }
  .featured-bottom {
    width: 960px;
    margin: 0;
    padding: 0;
    border: none;
  }
  .featured-bottom-first,
  .featured-bottom-second,
  .featured-bottom-third {
    width: 250px;
  }

  /* ---------- Node Pages ---------- */
  article header,
  #comments .title,
  #comments form,
  .comment-forbidden {
    display: none;
  }

  #main {
    width: 100%;
    max-width: unset;
  }
  .employee-info > * {
    display: flex;
  }
  .employee-info > * > * {
    width: 50%;
  }
  .offcanvas {
    display: none !important;
  }
  #block-moed3-page-title .title {
    margin-bottom: 20px;
  }
  .employee-info {
    margin-bottom: 12px;
  }
  .all-assessments > * > *:first-child {
    font-size: 120%;
  }
  body:not(.page-user-login) #main > *:last-child {
    margin-bottom: 0px;
    padding-bottom: 0px;
  }
  .assessment-with-degree {
    padding: 8px 14px;
  }
  #block-moed3-page-title .title {
    margin-bottom: 0px;
  }
  .circleMark {
    width: 14px;
    height: 14px;
    border-radius: 40px;
    display: inline-flex;
  }
  .circleMark {
    margin-inline-end: 8px;
  }
  .circleMark.m1 {
    background-color: #29dd00 !important;
  }
  .circleMark.m2 {
    background-color: #13e0b2 !important;
  }
  .circleMark.m3 {
    background-color: #d15fe0 !important;
  }
  .circleMark.m4 {
    background-color: orange !important;
  }
  .circleMark.m5 {
    background-color: #ea2828 !important;
  }
}

[dir="rtl"] .form-item-phone {
  direction: ltr;
}
[dir="rtl"] .form-item-phone label {
  width: 100%;
  direction: rtl;
}
[dir="rtl"] .form-item-phone .form-control {
  margin-right: unset;
  margin-left: calc(-1 * var(--bs-border-width));
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.webform-type-fieldset {
  border: 1px solid var(--main3);
  border-radius: 10px;
}
.webform-type-fieldset .fieldset-legend {
  background-color: var(--green2);
  color: #b9a779;
  padding-inline: 20px;
  border-radius: 8px;
  padding-block: 4px;
  font-size: 86%;
}
.webform-type-fieldset legend {
  transform: translate(0px, -18px) !important;
}

.webform-type-fieldset:not(:last-of-type) {
  margin-bottom: 50px !important;
}
/**********/
.stats {
  display: flex;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  justify-content: center;
}
.stats > span {
  display: inline-flex;
  margin-inline: 8px;
}
#views-exposed-form-moed-submissions-states > div {
  display: flex;
  column-gap: 16px;
}
#views-exposed-form-moed-submissions-states > div > * {
  width: calc(100% / 4 - (48px / 3));
}

#views-exposed-form-moed-submissions-states > div > * * {
  width: 100%;
}

#views-exposed-form-moed-submissions-states #edit-submit-moed-submissions {
  margin-bottom: 16px;
}
@media only screen and (max-width: 767px) {
  .stats {
    display: flex;
    flex-direction: column;
  }
  #views-exposed-form-moed-submissions-states > div {
    column-gap: 0px;
  }
  #views-exposed-form-moed-submissions-states > div > * {
    width: 100%;
  }
}
