html {
  background-color: #ffffff;
}

body {
  margin: 0;
  font-family: "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  text-transform: none !important;
}

button.MuiButton-containedPrimary,
button.btn-primary,
button.btn-success,
button.btn-warning,
button.btn-info,
button.btn-danger {
  font-weight: initial;
}

.verticalMinimalLayout.bg-img {
  background-image: url(/images/image_background.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.verticalMinimalLayout.bg-white {
  background-image: none;
  background-color: white;
}

code {
  font-family: "Courier New", monospace;
}

.page-wrapper {
  background-image: url("/images/hero-1.png");
  background-repeat: no-repeat;
  background-color: #ffffff;
  overflow: hidden;
}

/*********************** MAP ***********************/

.map-wrapper-gui {
  height: 300px;
  /* user-select: none; */
  position: relative;
}

.map-wrapper-gui-modal {
  height: 600px;
  /* user-select: none; */
  position: relative;
}

.map-wrapper-map {
  margin-top: 0px;
  height: 105%;
  /* user-select: none; */
  position: relative;
}

.map-speeddial-filter {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.map-speeddial-filter * {
  pointer-events: auto;
}

.map-speeddial-filter .MuiBackdrop-root {
  z-index: 2;
}

.map-speeddial-filter .map-menu {
  position: absolute;
  left: 20px;
  top: 20px;
}

.map-speeddial-filter .map-speeddial {
  position: absolute;
  left: 20px;
  bottom: 20px;
}

.map-speeddial-filter .map-filter {
  position: absolute;
  left: 80px;
  top: 20px;
  width: 35%;
  min-width: 300px;
  max-width: 35%;
  min-height: 40vh;
  max-height: calc(100% - 160px);
  pointer-events: all;
  padding: 0;
  z-index: 2;
}

.map-speeddial-filter .map-info {
  position: absolute;
  right: 10px;
  top: 65px;
  min-width: 300px;
  max-width: 35%;
  max-height: calc(100% - 200px);
  pointer-events: all;
  z-index: 1;
}

.map-speeddial-filter .map-maptype-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.map-speeddial-filter .map-maptype-wrapper>div {
  font-weight: 600;
  transition: all 0.3s;
}

.map-speeddial-filter .map-maptype-wrapper.active .map-maptype {
  border: 3px solid rgb(0, 153, 255);
  transform: scale(1.05);
}

.map-speeddial-filter .map-maptype-wrapper.active>div {
  color: rgb(0, 153, 255);
  transform: scale(1.05);
}

.map-speeddial-filter .map-maptype {
  border: 3px solid rgb(255, 255, 255);
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s;
  height: 86px;
  width: 86px;
}

.map-speeddial-filter .map-maptype>img {
  max-height: 80px;
  max-width: 80px;
  height: 80px;
  width: 80px;
  border-radius: 3px;
}

.map-speeddial-filter .map-maptype:hover {
  transform: scale(1.05);
}

.map-speeddial-filter .MuiInputBase-root {
  background-color: white;
}

.custom-marker {
  background-color: #f2994a;
  font-weight: 600;
  color: white;
  padding: 0.5rem;
  position: absolute;
  left: -10px;
  top: -10px;
  border: 1px solid #d87c2b;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.custom-marker:hover {
  background-color: #e08433;
}

.pin-wrapper {
  position: absolute;
  top: -30px;
  left: -15px;
  /* top: -36px;
    left: -16px; */
}

.pin-noanimation {
  -webkit-animation-name: none !important;
  -moz-animation-name: none !important;
  -o-animation-name: none !important;
  -ms-animation-name: none !important;
  animation-name: none !important;
}

.pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #ec342e;
  border: 2px solid white;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 0;
  top: 0;
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  -ms-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
  cursor: pointer;
}

.pin:after {
  content: "";
  align-items: center;
  text-align: center;
  padding-top: 1px;
  width: 14px;
  height: 14px;
  margin: 6px 0 0 6px;
  background: #722727;
  position: absolute;
  border-radius: 50%;
  color: white;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.pulse {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 30px 0px 0px 9px;
  -webkit-transform: rotateX(55deg);
  -moz-transform: rotateX(55deg);
  -o-transform: rotateX(55deg);
  -ms-transform: rotateX(55deg);
  transform: rotateX(55deg);
  z-index: -2;
}

.pulse:after {
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
  -webkit-animation: pulsate 1s ease-out;
  -moz-animation: pulsate 1s ease-out;
  -o-animation: pulsate 1s ease-out;
  -ms-animation: pulsate 1s ease-out;
  animation: pulsate 1s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-box-shadow: 0 0 1px 2px #161125;
  box-shadow: 0 0 1px 2px #89849b;
  -webkit-animation-delay: 1.1s;
  -moz-animation-delay: 1.1s;
  -o-animation-delay: 1.1s;
  -ms-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

@keyframes wiggle {

  0%,
  7% {
    transform: rotateZ(0);
  }

  15% {
    transform: rotateZ(-15deg);
  }

  20% {
    transform: rotateZ(10deg);
  }

  25% {
    transform: rotateZ(-10deg);
  }

  30% {
    transform: rotateZ(6deg);
  }

  35% {
    transform: rotateZ(-4deg);
  }

  40%,
  100% {
    transform: rotateZ(0);
  }
}

@-moz-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }

  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }

  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}

@-o-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }

  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}

@keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }

  50% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  100% {
    -webkit-transform: scale(1.2, 1.2);
    -moz-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}

@-moz-keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }

  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }

  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }

  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}

@-webkit-keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }

  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }

  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }

  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}

@-o-keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }

  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }

  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }

  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}

@keyframes bounce {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-2000px) rotate(-45deg);
    -moz-transform: translateY(-2000px) rotate(-45deg);
    -o-transform: translateY(-2000px) rotate(-45deg);
    -ms-transform: translateY(-2000px) rotate(-45deg);
    transform: translateY(-2000px) rotate(-45deg);
  }

  60% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(30px) rotate(-45deg);
    -moz-transform: translateY(30px) rotate(-45deg);
    -o-transform: translateY(30px) rotate(-45deg);
    -ms-transform: translateY(30px) rotate(-45deg);
    transform: translateY(30px) rotate(-45deg);
  }

  80% {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -moz-transform: translateY(-10px) rotate(-45deg);
    -o-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
  }

  100% {
    -webkit-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
  }
}

/**********************************************/

header.header {
  box-shadow: none;
  padding: 1.5rem 0;
}

img.logo {
  height: 50px;
}

.content {
  padding-top: 1rem;
  padding-bottom: 1rem;
  height: 100%;
  min-height: 500px;
}

.box-title>h1 {
  font-family: "Segoe UI", Arial, sans-serif;
  color: #000;
  font-size: 4.5rem;
  font-weight: 700;
  letter-spacing: -2px;
  margin-bottom: 25px;
}

.box-title>h3 {
  font-weight: 300;
  letter-spacing: -0.5px;
  margin-bottom: 25px;
}

.box-title>h5 {
  margin-bottom: 25px;
}

.box-footer {
  background-image: url("/images/QRCode.jpg");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
  display: inline-block;
  padding-left: 90px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: right;
}

.star-icon {
  fill: #ffd901 !important;
  transition: all 0.3s;
}

.box-footer>div:not(:nth-child(1)) {
  color: #acacac;
}

.icon-button {
  width: 35px;
  height: 35px;
}

.icon-button-contained {
  border-radius: 50% !important;
  padding: 3px !important;
  min-width: auto !important;
}

.button-danger {
  background-color: #e04d5b !important;
  color: white !important;
}

.button-danger:hover {
  transition: background-color 0.3s;
  background-color: #c22e3d !important;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.pagination-center>ul {
  justify-content: center;
}

.swal2-container {
  z-index: 9999 !important;
}

.custom-button-navbar>button:hover {
  box-shadow: none;
  background-color: rgba(0, 0, 0, 0.04);
}

.circularProgressRoot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1301 !important;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffffb0;
}

.modal-footer {
  padding: 1rem !important;
}

.loadingBackdrop {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffffa3;
  width: 100%;
  height: 100%;
  min-height: 100%;
  pointer-events: none;
  transition: all 0.5s;
  z-index: 1;
}

.text-header {
  color: #414141;
  font-size: 1.05rem;
}

.input-highlight {
  color: #3985c7 !important;
  font-weight: 600 !important;
}

.input-highlight input {
  color: #3985c7 !important;
  font-weight: 600 !important;
}

/* .input-highlight fieldset {
    border-color: #3e9ae9 !important;
}

.input-highlight label {
    color: #3e9ae9 !important;
} */
.hr-light {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.section-border {
  border: 1px solid rgb(209, 209, 209);
  border-radius: 5px;
}

.section-header {
  color: #6d6d6d;
  font-size: 0.9rem;
}

.section-header.main {
  color: rgb(60 60 60) !important;
  font-size: 1.05rem !important;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.section-header.sub {
  color: rgb(60 60 60) !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.section-header.main .MuiSvgIcon-root,
.section-header.sub .MuiSvgIcon-root {
  fill: #0064d0;
}

.section-header hr {
  margin-top: 0.5rem;
  margin-bottom: 0;
  border-color: #0064d0;
}

.section-scrollbar.main hr {
  border: 0;
  border-top: 2px solid rgb(67, 119, 196);
}

.map-collapse-header {
  border-bottom: 1px solid #bdbdbd !important;
  /* border-radius: 5px !important; */
  background-color: #f0f0f0 !important;
  padding: 0 0.8rem !important;
}

.map-collapse-header .text-bold svg {
  fill: #1fb2ff;
}

.MuiTooltip-tooltip {
  font-size: 0.8rem !important;
}

.large-tooltip {
  max-width: 600px !important;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
  transition: all 0.2s;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #767676;
}

.btn-small {
  padding: 5px !important;
  min-width: auto !important;
  font-size: 0.85rem !important;
}

.btn-small svg {
  font-size: 1.25rem !important;
}

.btn-mini {
  padding: 4px !important;
  min-width: auto !important;
  font-size: 0.85rem !important;
}

.btn-mini svg {
  font-size: 0.9rem !important;
}

.btn-badge-small {
  padding: 1px !important;
  min-width: auto !important;
  font-size: 0.6rem !important;
}

.btn-badge-small svg {
  font-size: 0.9rem !important;
}

.btn-badge-small-masterplan-b {
  padding: 2px !important;
  min-width: auto !important;
  font-size: 0.6rem !important;
}

.btn-badge-small-masterplan-b svg {
  font-size: 0.9rem !important;
}

.btn-primary {
  color: #fff !important;
  background-color: #007aee !important;
  border-color: #0074e0 !important;
}

.btn-primary:hover {
  background-color: #3700b3 !important;
  border-color: #3300ac !important;
}

.btn-success {
  color: #fff !important;
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

.btn-success:hover {
  background-color: #137429 !important;
  border-color: #137429 !important;
}

.btn-warning {
  color: #212529 !important;
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
}

.btn-warning:hover {
  background-color: #e7aa00 !important;
  border-color: #e7aa00 !important;
}

.btn-orange {
  color: #fff !important;
  background-color: #ff844b !important;
  border-color: #ff844b !important;
}

.btn-orange:hover {
  background-color: #e76123 !important;
  border-color: #e76123 !important;
}

.btn-score-1 {
  color: #fff !important;
  background-color: #ee473f !important;
  border-color: #ee473f !important;
}

.btn-score-2 {
  color: #fff !important;
  background-color: #f78843 !important;
  border-color: #f78843 !important;
}

.btn-score-3 {
  color: #212529 !important;
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
}

.btn-score-4 {
  color: #fff !important;
  background-color: #a8c449 !important;
  border-color: #a8c449 !important;
}

.btn-score-5 {
  color: #fff !important;
  background-color: #56b94d !important;
  border-color: #56b94d !important;
}

.btn-drs {
  color: #fff !important;
  background-color: #056f00 !important;
  border-color: #056f00 !important;
}

.btn-drs:hover {
  background-color: #066901 !important;
  border-color: #066901 !important;
}

.score-name {
  border-color: #007aee !important;
  border: 1px solid #007aee;
  border-radius: 20px;
  padding: 3px 13px;
  display: flex;
  color: #007aee;
  font-weight: bold;
  font-size: 15.21px;
  width: fit-content;
}

.score-detail {
  border-color: #007aee !important;
  border: 1px solid #007aee;
  border-radius: 20px;
  padding: 40px 18px;
  font-weight: bold;
  font-size: 15.21px;
  width: fit-content;
}

.btn-info {
  color: white !important;
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
}

.btn-info:hover {
  background-color: #0091a8 !important;
  border-color: #0091a8 !important;
}

.btn-danger {
  color: #fff !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

.btn-danger:hover {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
}

.btn-pink {
  color: #fff !important;
  background-color: #dc7cba !important;
  border-color: #dc7cba !important;
}

.btn-pink:hover {
  background-color: #d565af !important;
  border-color: #e198c9 !important;
}

.btn-muted {
  color: #fff !important;
  background-color: #b3b3b3 !important;
  border-color: #a3a3a3 !important;
}

.btn-muted svg {
  fill: #fff !important;
}

.btn-muted:hover {
  background-color: #a3a3a3 !important;
  border-color: #858585 !important;
}

.btn-purple {
  color: white !important;
  background-color: #9935dc !important;
  border-color: #9935dc !important;
}

.btn-purple:hover {
  background-color: #981beb !important;
  border-color: #981beb !important;
}

.icon-btn-default {
  color: rgb(9, 136, 255) !important;
  background-color: #ffffff !important;
  border-color: #f1f1f1 !important;
  border-radius: 5px !important;
  padding: 9px !important;
  box-shadow: #0000004d 0px 2px 3px !important;
}

.icon-btn-default:hover {
  color: rgb(2, 112, 214) !important;
  background-color: #dddddd !important;
  border-color: #d1d1d1 !important;
}

.add-button {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

.add-button svg {
  width: 20px !important;
  height: 20px !important;
}

.back-button-wrapper {
  position: absolute;
  top: 95px;
  left: 60px;
  opacity: 0;
  animation-name: back-button-in;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  animation-delay: 0.28s;
  transition: all 0.3s;
}

.back-button-wrapper>button {
  min-width: 0 !important;
  opacity: 1;
}

.btn-download {
  color: #fff !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  padding: 1rem;
}

.btn-download:hover {
  background-color: #c82333 !important;
  border-color: #bd2130 !important;
  cursor: pointer;
}

.edited {
  background-color: #fff9d5 !important;
}

.htWarning {
  background-color: #f5e65b !important;
}

.htHighlight {
  background-color: #77f0b9 !important;
}

.handsontable td.htDimmed:not(.listbox) {
  background-color: #dfdfdf !important;
  border-color: #cccccc !important;
}

/* table tr.groupHead {
    background-color: #dddddd !important;
} */

.custom-badge {
  background-color: #898989;
  border: 1px solid #808080;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  color: white;
}

.badge-comment {
  color: #fff;
  background-color: #fa5977;
}

.custom-verticaltab button:not(:first-child) {
  border-top: 1px solid #e1e1e1 !important;
}

.box-title {
  position: relative;
  padding-left: 75px;
  padding-bottom: 20px;
  min-height: 70px;
}

.list-title {
  position: absolute;
  top: 8px;
  left: 15px;
  height: 58px;
  width: 58px;
  border-radius: 50%;
  border: 1px solid #007bff;
  font-weight: 600;
  color: #007bff;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.list-icon {
  position: absolute;
  top: 70px;
  left: 0px;
  height: 80px;
  width: 80px;
  /* border-radius: 50%;
    border: 1px solid #007bff; */
  font-weight: 600;
  color: #dc3545;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.list-icon>div:first-child {
  color: #436e82;
}

.list-icon>div:last-child {
  color: #dc3545;
  position: absolute;
  top: 40px;
  left: 40px;
}

.current-step {
  color: #007bff;
}

/* custom project request render section 4 */

.list-section4 {
  position: absolute;
}

.list-icon-section4 {
  top: 0px;
  left: 0px;
  height: 18px;
  width: 18px;
  font-weight: 600;
  color: #dc3545;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
  position: relative;
}

.list-icon-section4>div:first-child {
  color: #436e82 !important;
}

.list-icon-section4>div:last-child {
  color: #dc3545 !important;
  top: 7px;
  left: 7px;
  position: absolute;
}

.section-header-4 {
  color: #6d6d6d;
  font-size: 0.9rem;
}

.section-header-4.main {
  color: rgb(60 60 60) !important;
  font-size: 1.05rem !important;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.section-header-4.sub {
  color: rgb(60 60 60) !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.section-header-4 hr {
  margin-top: 0.5rem;
  margin-bottom: 0;
  border-color: #0064d0;
}

.rediness-upload-status-pass {
  background: #28a745 !important;
  color: white !important;
  width: fit-content;
  border-radius: 4px;
  padding: 10px;
  margin-right: 14px;
}

.rediness-upload-status-fail {
  background: #dc3545 !important;
  color: white !important;
  width: fit-content;
  border-radius: 4px;
  padding: 10px;
}

.description-folder-name {
  color: #0096ff;
  text-align: left;
  margin-top: 5px;
}

.rediness-success {
  background-color: #f1f1f1;
  padding: 5px 7px 5px 13px;
  border-radius: 3px;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
  margin-left: 0.5rem !important;
  margin-top: 0.5rem !important;
}

.rediness-success.selected,
.rediness-success:hover {
  background-color: #daf7a6 !important;
  -webkit-box-shadow: 1px 0 2px 2px #c1e1c1;
  box-shadow: 1px 0 2px 2px #c1e1c1;
  transform: scale(1.05);
}

.rediness-success.selected::before,
.rediness-success:hover::before {
  background-color: rgb(31, 187, 44) !important;
}

.rediness-success::before {
  content: " ";
  width: 5px;
  height: 100%;
  background-color: rgb(168, 168, 168);
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transition: all 0.3s;
}

.rediness-fail {
  background-color: #f1f1f1;
  padding: 5px 7px 5px 13px;
  border-radius: 3px;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
  margin-left: 1.5rem !important;
  margin-top: 0.5rem !important;
}

.rediness-fail.selected,
.rediness-fail:hover {
  background-color: #fdecec !important;
  -webkit-box-shadow: 1px 0 2px 2px #f3d9d9;
  box-shadow: 1px 0 2px 2px #f3d9d9;
  transform: scale(1.05);
}

.rediness-fail.selected::before,
.rediness-fail:hover::before {
  background-color: #e4917f !important;
}

.rediness-fail::before {
  content: " ";
  width: 5px;
  height: 100%;
  background-color: rgb(168, 168, 168);
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transition: all 0.3s;
}

/* end custom project request render section 4 */
.versionBadge {
  width: fit-content;
  border-radius: 15px;
  border: #3e86dd 2px solid;
  padding: 3px 13px;
  color: #3e86dd;
  font-weight: bold;
}

.versionbuildBadge {
  width: fit-content;
  border-radius: 15px;
  border: #979797 2px solid;
  padding: 3px 13px;
  color: #979797;
  font-weight: bold;
}

.masterplanBadge {
  width: fit-content;
  border-radius: 15px;
  background-color: #38a170;
  padding: 0px 13px;
  color: white;
  font-weight: bold;
}

.issignoff-badge {
  width: fit-content;
  border-radius: 15px;
  background-color: #dc3545;
  padding: 0px 13px;
  color: white;
  font-weight: bold;
}

.isAppeal-badge {
  width: fit-content;
  border-radius: 15px;
  background-color: #9935dc;
  padding: 0px 13px;
  color: white;
  font-weight: bold;
}

/********************** Drag ***********************/

#drag-wrapper {
  position: relative;
}

#drag-inside-drag-event {
  border: dashed grey 4px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

#drag-inside-text {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  text-align: center;
  color: grey;
  font-size: 36;
}

#drag-item-wrapper {
  height: 500px;
  border: 2px solid #d2d2d2;
  border-radius: 4px;
}

#drag-item-wrapper .file-icon {
  font-size: 2.5rem;
}

#drag-bottom-text-wrapper {
  position: absolute;
  bottom: 10px;
  width: 100%;
  align-items: center;
}

#drag-bottom-rediness {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 13px;
}

/************************************************/

@keyframes back-button-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 960px) {
  .map-wrapper-map {
    margin-top: -10px;
  }

  .map-speeddial-filter .map-filter,
  .map-speeddial-filter .map-info {
    max-width: 560px;
  }
}

@media screen and (min-width: 1279px) {
  .padding-Menu {
    left: 80px;
  }
}

@media screen and (min-width: 901px) {
  .page-content-padding {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media screen and (max-width: 600px) {
  .page-content-padding {
    padding-left: 0rem;
    padding-right: 0rem;
  }

  .back-button-wrapper {
    display: none;
  }
}

@media screen and (max-width: 900px) {
  .page-content-padding {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media screen and (max-width: 960px) {
  .back-button-wrapper {
    top: 75px;
    left: 20px;
  }
}

@media screen and (min-height: 1200px) {
  .map-wrapper-gui {
    height: 500px;
  }
}

.menu-disabled {
  filter: contrast(50%);
}

.hover-zoom {
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s !important;
}

.hover-zoom.menu-highlight {
  background-color: #fff8c8;
  border: 1px solid #ffe590;
  box-shadow: 2px 1px 3px 2px rgba(255, 224, 144, 0.2),
    0px 2px 1px 2px rgba(255, 216, 144, 0.12),
    0px 1px 1px 2px rgba(255, 211, 144, 0.14);
  transform: scale(1.025);
}

.hover-zoom:hover {
  border: 1px solid #90c9ff;
  box-shadow: 2px 1px 3px rgb(144 201 255 / 20%),
    0px 2px 1px rgb(144 201 255 / 12%), 0px 1px 1px rgb(144 201 255 / 14%);
  transform: scale(1.05);
}

.hover-zoom.menu-highlight:hover {
  transition: background-color 0.2s, border 0s, box-shadow 0.1s, transform 0.2s !important;
  background-color: #fff8c8;
  border: 2px solid #ffe590 !important;
  box-shadow: 2px 1px 5px 4px rgba(255, 218, 144, 0.2),
    0px 2px 3px 4px rgba(255, 212, 144, 0.12),
    0px 1px 3px 4px rgba(255, 209, 144, 0.14);
  transform: scale(1.085);
}

.hover-zoom.menu-highlight-blue {
  background-color: #d3ecff !important;
  border: 1px solid #4bb1ff !important;
  box-shadow: 2px 1px 3px 2px rgba(144, 231, 255, 0.2),
    0px 2px 1px 2px rgba(144, 214, 255, 0.12),
    0px 1px 1px 2px rgba(144, 220, 255, 0.14) !important;
}

.hover-zoom.menu-highlight-blue:hover {
  border: 1px solid #4bb1ff !important;
  box-shadow: 2px 1px 5px 4px rgba(144, 225, 255, 0.2),
    0px 2px 3px 4px rgba(144, 222, 255, 0.12),
    0px 1px 3px 4px rgba(144, 225, 255, 0.14) !important;
}

.menu-image-wiggle {
  animation: wiggle 2s linear infinite;
}

.MuiSelect-root.MuiSelect-select.MuiSelect-selectMenu {
  background-color: white;
}

.signoff-duplicate-result-100 {
  background-color: #f1f1f1;
  padding: 5px 7px 5px 13px;
  border-radius: 3px;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}

.signoff-duplicate-result-100.selected,
.signoff-duplicate-result-100:hover {
  background-color: #fdecec !important;
  -webkit-box-shadow: 1px 0 2px 2px #f3d9d9;
  box-shadow: 1px 0 2px 2px #f3d9d9;
  transform: scale(1.05);
  margin-right: 1rem !important;
}

.signoff-duplicate-result-100.selected::before,
.signoff-duplicate-result-100:hover::before {
  background-color: #e4917f !important;
}

.signoff-duplicate-result-100::before {
  content: " ";
  width: 5px;
  height: 100%;
  background-color: rgb(168, 168, 168);
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transition: all 0.3s;
}

.signoff-duplicate-result-80 {
  background-color: #f1f1f1;
  padding: 5px 7px 5px 13px;
  border-radius: 3px;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}

.signoff-duplicate-result-80.selected,
.signoff-duplicate-result-80:hover {
  background-color: #fdf8ec !important;
  -webkit-box-shadow: 1px 0 2px 2px #f3ebd7;
  box-shadow: 1px 0 2px 2px #f3ebd7;
  transform: scale(1.05);
}

.signoff-duplicate-result-80.selected::before,
.signoff-duplicate-result-80:hover::before {
  background-color: #ffd643 !important;
}

.signoff-duplicate-result-80::before {
  content: " ";
  width: 5px;
  height: 100%;
  background-color: rgb(168, 168, 168);
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transition: all 0.3s;
}

.toggle-custom .MuiToggleButton-label {
  min-width: 20px !important;
  min-height: 20px !important;
}

.toggle-custom.toggle-primary .Mui-selected {
  border-color: rgb(2, 79, 161) !important;
  background-color: #007aee !important;
  color: white !important;
}

.rowDuplicate-100 {
  position: relative;
}

.rowDuplicate-100.row-color {
  background-color: #fdecec !important;
}

.rowDuplicate-100.row-top::after {
  content: " ";
  width: 5px;
  height: 100%;
  background-color: #e4917f;
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 3px;
}

.rowDuplicate-100.row-bottom::after {
  content: " ";
  width: 5px;
  height: 100%;
  background-color: #e4917f;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom-left-radius: 3px;
}

.rowDuplicate-80 {
  position: relative;
}

.rowDuplicate-80.row-color {
  background-color: #fdf8ec !important;
}

.rowDuplicate-80.row-top::after {
  content: " ";
  width: 5px;
  height: 100%;
  background-color: #ffd643;
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 3px;
}

.rowDuplicate-updated {
  position: relative;
}

.rowDuplicate-updated.row-color {
  background-color: #cbcbcb !important;
}

.rowDuplicate-updated.row-bottom {
  background-color: #ececec !important;
}

.rowDuplicate-updated.row-top::after {
  content: " ";
  width: 5px;
  height: 100%;
  background-color: #8c8c8c;
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 3px;
}

.rowDuplicate-updated.row-bottom::after {
  content: " ";
  width: 5px;
  height: 100%;
  background-color: #8c8c8c;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom-left-radius: 3px;
}

.chip-success {
  color: rgb(31, 187, 44) !important;
  border: 1px solid rgb(31, 187, 44) !important;
  background-color: rgb(238, 252, 238) !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}

.chip-primary {
  color: rgb(255, 255, 255) !important;
  border: 1px solid rgb(33 146 202) !important;
  background-color: rgb(62 169 222) !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  padding: 0.6rem;
}

.chip-success.circle {
  border-radius: 50% !important;
}

.chip-danger {
  color: rgb(190, 30, 30) !important;
  border: 1px solid rgb(190, 30, 30) !important;
  background-color: rgb(253, 241, 241) !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}

.chip-warning {
  color: #f8be67 !important;
  border: 1px solid #f8be67 !important;
  background-color: #fff7ea !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}

.chip-orange {
  color: #ed9e26 !important;
  border: 1px solid #ed9e26 !important;
  background-color: #fdf5e9 !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}

.chip-readinessstatus {
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  font-weight: 400;
  padding: 6px 10px;
}

.chip-readinessstatus.success {
  border-left: 5px solid #76dd78;
}

.chip-readinessstatus.warning {
  border-left: 5px solid #ffb84f;
}

.chip-readinessstatus.danger {
  border-left: 5px solid #f37142;
}

.chip-readinessstatus.table2 {
  background-color: #fff;
}

.toggle-selected-primary {
  color: #007aee !important;
  background-color: #007aee24 !important;
  border-color: #007aee !important;
}

:root {
  --color-completed: #007aee;
  --color-inprogress: #f5a600;
}

.SignoffDiv {
  position: relative;
  float: left;
  transition: transform 0.2s;
  height: 100px;
  width: 25%;
  padding-left: 15px;
  padding-right: 15px;
}

.SignoffDiv.is-hover:not(.active) {
  cursor: pointer;
}

.SignoffDiv.is-hover:not(.active):hover,
.SignoffDiv.active {
  transform: scale(1.05);
}

.SignoffBoxDiv {
  width: 100%;
  height: 100%;
  padding-left: 50px;
  padding-right: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 2px solid rgba(0, 0, 0, 0.12);
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
}

.SignoffDiv.is-first .SignoffBoxDiv {
  border-left: 2px solid rgba(0, 0, 0, 0.12);
}

.SignoffDiv.is-last .SignoffBoxDiv {
  border-right: 2px solid rgba(0, 0, 0, 0.12);
}

.SignoffDiv.inprogress .SignoffBoxDiv {
  border-left: 2px solid var(--color-inprogress);
  border-top: 2px solid var(--color-inprogress);
  border-bottom: 2px solid var(--color-inprogress);
}

.SignoffDiv.inprogress.active .SignoffBoxDiv {
  border-left: 3px solid var(--color-inprogress);
  border-top: 3px solid var(--color-inprogress);
  border-bottom: 3px solid var(--color-inprogress);
}

.SignoffDiv.completed .SignoffBoxDiv {
  border-left: 2px solid var(--color-completed);
  border-top: 2px solid var(--color-completed);
  border-bottom: 2px solid var(--color-completed);
}

.SignoffDiv.completed.active .SignoffBoxDiv {
  border-left: 3px solid var(--color-completed);
  border-top: 3px solid var(--color-completed);
  border-bottom: 3px solid var(--color-completed);
}

.SignoffDiv.is-last.inprogress .SignoffBoxDiv {
  border-right: 2px solid var(--color-inprogress);
}

.SignoffDiv.is-last.inprogress.active .SignoffBoxDiv {
  border-right: 3px solid var(--color-inprogress);
}

.SignoffDiv.is-last.completed .SignoffBoxDiv {
  border-right: 2px solid var(--color-completed);
}

.SignoffDiv.is-last.completed.active .SignoffBoxDiv {
  border-right: 3px solid var(--color-completed);
}

.SignoffDiv:not(.is-first) .SignoffBoxDiv {
  border-left: 2px solid transparent !important;
}

.ArrowTopStart {
  position: absolute;
  height: 54%;
  top: -2px;
  left: 27px;
  width: 1px;
  border-left: 2px solid rgba(0, 0, 0, 0.12);
  transform: rotate(-25deg);
}

.ArrowBottomStart {
  position: absolute;
  height: 56%;
  top: 46%;
  left: 27px;
  width: 1px;
  border-left: 2px solid rgba(0, 0, 0, 0.12);
  transform: rotate(-155deg);
}

.ArrowTopEnd {
  position: absolute;
  height: 54%;
  top: -1px;
  left: calc(100% - 5px);
  width: 1px;
  border-left: 2px solid rgba(0, 0, 0, 0.12);
  transform: rotate(-25deg);
}

.ArrowBottomEnd {
  position: absolute;
  height: 55%;
  top: 47%;
  left: calc(100% - 5px);
  width: 1px;
  border-left: 2px solid rgba(0, 0, 0, 0.12);
  transform: rotate(-155deg);
}

.SignoffDiv.inprogress .ArrowBottomEnd,
.SignoffDiv.inprogress .ArrowTopEnd,
.SignoffDiv.inprogress .ArrowBottomStart,
.SignoffDiv.inprogress .ArrowTopStart {
  border-left: 2px solid var(--color-inprogress);
}

.SignoffDiv.inprogress.active .ArrowBottomEnd,
.SignoffDiv.inprogress.active .ArrowTopEnd,
.SignoffDiv.inprogress.active .ArrowBottomStart,
.SignoffDiv.inprogress.active .ArrowTopStart {
  border-left: 3px solid var(--color-inprogress);
}

.SignoffDiv.completed .ArrowBottomEnd,
.SignoffDiv.completed .ArrowTopEnd,
.SignoffDiv.completed .ArrowBottomStart,
.SignoffDiv.completed .ArrowTopStart {
  border-left: 2px solid var(--color-completed);
}

.SignoffDiv.completed.active .ArrowBottomEnd,
.SignoffDiv.completed.active .ArrowTopEnd,
.SignoffDiv.completed.active .ArrowBottomStart,
.SignoffDiv.completed.active .ArrowTopStart {
  border-left: 3px solid var(--color-completed);
}

.chip-pulse {
  position: relative;
  z-index: 2;
}

.chip-pulse::after {
  content: "";
  border-radius: 50%;
  height: 120%;
  width: 120%;
  position: absolute;
  -webkit-animation: pulsate 2.2s ease-out;
  -moz-animation: pulsate 2.2s ease-out;
  -o-animation: pulsate 2.2s ease-out;
  -ms-animation: pulsate 2.2s ease-out;
  animation: pulsate 2.2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-box-shadow: 0 0 1px 2px #007aee78;
  box-shadow: 0 0 1px 2px #007aee78;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
  transform: translate(-52%, -50%);
  z-index: 1;
}

.avatar-square {
  border-radius: 2px !important;
}

.masterplan-r-1 {
  background-color: rgb(236 242 253);
  border-bottom: 1px solid rgb(137 166 255);
}

.masterplan-r-2 {
  background-color: rgb(242 255 239);
  border-bottom: 1px solid rgb(160 200 151);
}

.masterplan-r-3 {
  background-color: rgb(255 252 235);
  border-bottom: 1px solid rgb(223 206 111);
}

.masterplan-r-4 {
  background-color: rgb(237 255 249);
  border-bottom: 1px solid rgb(119 227 191);
}

.masterplan-r-5-2 {
  background-color: rgb(222 239 255);
  border-bottom: 1px solid rgb(50 109 163);
}

.masterplan-r-5-3 {
  background-color: rgb(222 239 255);
  border-bottom: 1px solid rgb(50 109 163);
}

.master-plan-b-row-5-4 {
  background-color: rgb(222 239 255);
  border-bottom: 1px solid rgb(50 109 163);
}

.chart-img-tooltip {
  position: fixed;
  padding: 0.5rem;
  max-width: 250px;
  align-items: center;
  justify-content: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 3px;
  z-index: 999;
  background-color: #fdfdfd;
  border: 1px solid rgb(224, 224, 224);
  opacity: 0;
  animation-name: back-button-in;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.fill-project-important-1 {
  color: #18c499 !important;
}

.fill-project-request-1 {
  color: #80ceba !important;
}

.fill-project-request-2 {
  color: #50ad86 !important;
}

.fill-project-request-3 {
  color: #38a170 !important;
}

.fill-project-request-4 {
  color: #259457 !important;
}

.fill-project-request-5 {
  color: #088131 !important;
}

.print-component-projectimportant {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  padding-left: 8em;
  padding-right: 8em;
  background-color: white;
  /* page-break-after: always;
    page-break-before: always;
    page-break-inside: avoid; */
  /* width: 297mm !important;  */
  max-width: 297mm !important;
  /* height: 420mm !important;
    max-height: 420mm !important; */
  /* columns: 130mm !important;
    -webkit-columns: 130mm !important;
    -moz-columns: 130mm !important; */
  columns: 50%;
  column-count: 2;
  column-fill: balance;
  -moz-column-fill: balance;
  -webkit-column-fill: balance;
  font-size: 0.8rem;
}

.print-component-projectimportant .section-header {
  font-size: 0.8rem !important;
}

.section-border {
  border: 1px solid #0064d0 !important;
  padding: 1rem;
}

.pie-component {
  display: block;
  /* display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around; */
}

.print-component-projectrequestChartPie {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 50vh;
  /* border-bottom: 1px solid #dfdfdf; */
  /* page-break-before: always; */
  /*  page-break-inside: avoid; */
}

.print-component-projectrequestChartPie-inside-text {
  width: 50%;
}

.print-component-projectrequestChartPie-inside-chart {
  width: 50%;
}

.print-component-projectimportant-tree {
  display: block;
  top: 0;
  left: 0;
  padding-left: 3em;
  padding-right: 3em;
  background-color: white;
  max-width: 100%;
  font-size: 0.8rem;
  /* page-break-after: always;
    page-break-before: always;
    page-break-inside: avoid; */
}

@media print {
  @page {
    size: A4;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    /*Chrome, Safari */
    print-color-adjust: exact !important;
    /*Firefox*/
  }

  body * {
    visibility: hidden;
  }

  .no-print-component {
    opacity: 0 !important;
    position: fixed !important;
    top: 0;
    left: 0;
  }

  .page-wrapper {
    overflow: auto !important;
  }

  .Cmt-sidebar-content {
    display: none;
  }

  #projectimportant-print-modal,
  #projectimportant-print-modal *,
  #projectrequest-print-modal,
  #projectrequest-print-modal * {
    visibility: visible;
  }

  #projectimportant-print-modal .MuiBackdrop-root,
  #projectrequest-print-modal .MuiBackdrop-root {
    background-color: white !important;
  }

  .MuiToolbar-root {
    opacity: 0 !important;
  }

  .pie-component {
    display: block;
    width: 100%;
    columns: 100%;
    column-count: 1;
    column-fill: balance;
    -moz-column-fill: balance;
    -webkit-column-fill: balance;
  }

  .print-component-projectrequestChartPie {
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    top: 20px;
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .print-component-projectrequestChartPie-inside-text {
    width: 100%;
    text-align: center;
  }

  .print-component-projectrequestChartPie-inside-chart {
    width: auto;
  }
}

.groupHead-all {
  background-color: #aed6f0 !important;
}

.groupHead {
  background-color: #cce9fd;
}

.groupSubHead {
  background-color: #e7f4ff;
}

.disabled-btn {
  color: #ccc;
  pointer-events: none;
}

#term-of-agreement-dialog-title h2 {
  font-size: 16px !important;
}

.notification {
  display: flex;
  word-break: break-word;
  background-color: #c1f7ee;
  transform-origin: right;
  -webkit-animation: notify 1.15s ease-in;
  animation: notify 1.15s ease-in;
  box-shadow: 0px 3px 4px -1px rgb(0 0 0 / 25%);
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
}

.notification2 {
  display: flex;
  background-color: #fffdd0;
  transform-origin: right;
  -webkit-animation: notify 1.15s ease-in;
  animation: notify 1.15s ease-in;
  box-shadow: 0px 3px 4px -1px rgb(0 0 0 / 25%);
  width: fit-content;
  margin-left: auto;
  margin-right: 0;
  margin-top: 10px;
}

.notification-close {
  -webkit-animation: notify-out 1.15s ease-in;
  animation: notify-out 1.15s ease-in;
  animation-fill-mode: forwards;
}

.profile-picture {
  display: flex;
  position: relative;
  align-items: center;
  width: 128px;
  height: 128px;
  margin: 1.5rem 0;
}

.profile-picture img {
  position: absolute;
  max-width: 128px;
  max-height: 128px;
  width: auto;
  height: auto;
  border-radius: 50%;
}

.profile-picture::after {
  content: "";
  display: block;
  position: absolute;
  width: 128px;
  height: 128px;
  border: 2px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
}

.upload-btn {
  z-index: 600;
  content: "";
  position: absolute !important;
  color: #222 !important;
  background-color: #ccc !important;
  padding: 6px !important;
  left: 95px;
  top: 90px;
}

.manage-picture {
  position: relative;
  display: block;
  user-select: none;
}

@-webkit-keyframes notify {
  0% {
    transform: scaleX(0);
  }

  30% {
    transform: scaleX(1);
  }

  50% {
    transform: scale(1.1);
  }

  75% {
    transform: scale(1);
  }

  100% {
    transform: scaleX(1);
    border-radius: 0%;
  }
}

@keyframes notify {
  0% {
    transform: scaleX(0);
  }

  30% {
    transform: scaleX(1);
  }

  50% {
    transform: scale(1.1);
  }

  75% {
    transform: scale(1);
  }

  100% {
    transform: scaleX(1);
    border-radius: 0%;
  }
}

@-webkit-keyframes notify-out {
  0% {
    transform: scaleX(1);
    border-radius: 0%;
  }

  30% {
    transform: scaleX(1);
  }

  50% {
    transform: scale(1.1);
  }

  75% {
    transform: scale(0);
  }

  100% {
    transform: scaleX(1);
  }
}

@keyframes notify-out {
  0% {
    transform: scaleX(1);
    border-radius: 0%;
  }

  30% {
    transform: scaleX(1);
  }

  50% {
    transform: scale(1.1);
  }

  75% {
    transform: scale(0);
  }

  100% {
    transform: scaleX(1);
  }
}

.notification-content {
  display: flex;
  align-items: center;
  padding: 0.5rem;
}

.notification-identifier {
  height: 20px;
  width: 20px;
  min-height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background-color: #94dacd;
  opacity: 0;
  -webkit-animation: exit 1.15s ease-in;
  animation: exit 1.15s ease-in;
  animation-fill-mode: forwards;
  margin-right: 0.25rem;
  cursor: pointer;
}

.notification-close .notification-identifier {
  transition: all 0.5s;
  transition-delay: 0.5s;
  margin-right: 0;
}

.notification-identifier2 {
  height: 20px;
  width: 20px;
  min-height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background-color: #ffd700;
  opacity: 0;
  -webkit-animation: exit 1.15s ease-in;
  animation: exit 1.15s ease-in;
  animation-fill-mode: forwards;
  margin-right: 0.25rem;
  cursor: pointer;
}

.notification-close .notification-identifier2 {
  transition: all 0.5s;
  transition-delay: 0.5s;
  margin-right: 0;
}

.notification-text {
  opacity: 0;
  -webkit-animation: exit 1.15s ease-in;
  animation: exit 1.15s ease-in;
  animation-fill-mode: forwards;
  padding: 0.25rem;
  width: auto;
}

.notification-close .notification-text {
  width: calc(100% - 20px);
  -webkit-animation: text-exit 0.75s ease-in;
  animation: text-exit 0.75s ease-in;
  animation-delay: 0.3s;
  opacity: 1;
  animation-fill-mode: forwards;
  white-space: nowrap;
}

.steplabel .MuiStepLabel-labelContainer span {
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  color: #007aee;
  transition: 0.2s;
}

.steplabel .MuiStepLabel-labelContainer span:hover {
  font-size: 18.5px;
  text-decoration: underline;
}

.steplabel .MuiSvgIcon-root {
  font-size: 2.4rem;
  margin-left: -0.45rem;
}

.steplabel .MuiStepIcon-text {
  font-size: 0.65rem;
}

@-webkit-keyframes text-exit {
  0% {
    opacity: 1;
    width: calc(100% - 20px);
  }

  85% {
    opacity: 0;
    width: 0px;
  }

  100% {
    opacity: 0;
    width: 0px;
    height: 0;
    padding: 0rem;
  }
}

@keyframes text-exit {
  0% {
    opacity: 1;
    width: calc(100% - 20px);
  }

  85% {
    opacity: 0;
    width: 0px;
  }

  100% {
    opacity: 0;
    width: 0px;
    height: 0;
    padding: 0rem;
  }
}

@-webkit-keyframes exit {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes exit {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.prev-year {
  color: #c22e3d !important;
}

.next-year {
  color: #3700b3 !important;
}

.change-year {
  font-size: 10px;
  position: absolute;
  width: 130px;
  left: 33px;
  color: #222 !important;
}

.score-box {
  margin: 1rem;
  width: auto !important;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
}

.score-total {
  text-align: right;
}

.score-total input {
  text-align: center !important;
  font-size: 28px;
  font-weight: 600;
  max-width: 120px;
  background-color: #b1e1ff;
  color: #222;
}

.score-total label {
  color: #222;
}

.score-group-1 input {
  text-align: center !important;
  background-color: #e3ffcd;
  color: #222;
}

.score-group-1 label {
  color: #222;
}

.score-group-2 input {
  text-align: center !important;
  background-color: #ffe3c2;
  color: #222;
}

.score-group-2 label {
  color: #222;
}

.score-chip {
  font-size: 18px !important;
  height: 100% !important;
  border-radius: 20px !important;
}

.score-avatar {
  width: 30px !important;
  height: 30px !important;
  font-size: 1rem !important;
  background-color: #007aee !important;
}

.score-input {
  max-width: 80px;
}

.score-input-wide {
  max-width: 140px;
}

.score-input input,
.score-input-wide input {
  text-align: center;
}

.score-input-layer-2 input {
  max-width: 140px;
  text-align: center;
}

.score-input-parent input {
  text-align: center;
  color: #222;
  background-color: #b1e1ff;
  font-weight: bold;
  border-radius: 4px;
  font-size: 19px;
  max-width: 100px;
}

.score-input-parent-project-important input {
  text-align: center;
  color: #222;
  background-color: #ffe5b4;
  font-weight: bold;
  border-radius: 4px;
  font-size: 19px;
  max-width: 100px;
}

.score-input-total {
  text-align: center !important;
}

.score-input-total input {
  text-align: center;
  font-weight: bold;
  font-size: 17px;
  max-width: fit-content;
  color: #222;
}

.score-input-total-positive input {
  text-align: center;
  font-weight: bold;
  font-size: 17px;
  color: #5cb85c;
  max-width: 101px;
}

.score-input-total-negative input {
  text-align: center;
  font-weight: bold;
  font-size: 17px;
  color: #e04d5b;
  max-width: 100px;
}

.custom-card {
  border-radius: 0px 4px 4px 4px !important;
}

.custom-tab {
  border-radius: 4px 4px 0px 0px !important;
  background-color: #fff;
  box-shadow: 0px 1px 3px rgb(0 0 0 / 20%), 0px 2px 1px rgb(0 0 0 / 12%),
    0px 1px 1px rgb(0 0 0 / 14%);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.tab-count0 {
  max-width: 0px;
}

.tab-count1 {
  max-width: 160px;
}

.tab-count2 {
  max-width: 320px;
}

.tab-count3 {
  max-width: 480px;
}

.tab-count4 {
  max-width: 640px;
}

.tab-count5 {
  max-width: 800px;
}

.custom-tab.signoff {
  max-width: 600px !important;
}

.custom-tab .tab {
  min-width: 200px !important;
}

.template-modal .MuiDialogContent-root {
  overflow-y: hidden !important;
}

.score-board {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: fit-content;
  padding: 0.8rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  box-shadow: 2px 2px 3px 1px rgb(0 0 0 / 20%), 0px 2px 1px rgb(0 0 0 / 12%),
    0px 1px 1px rgb(0 0 0 / 14%);
  background-color: #57adffdb;
  color: #fff;
  pointer-events: none;
}

.score-board .star {
  color: #ffc107;
}

.profile-tag {
  box-shadow: 0px 1px 3px rgb(0 0 0 / 20%), 0px 2px 1px rgb(0 0 0 / 12%),
    0px 1px 1px rgb(0 0 0 / 14%);
  border-radius: 4px;
  min-height: 30px;
  align-items: center;
  display: flex;
  padding-right: 1rem;
  padding-left: 1rem;
  border-left: 4px solid;
}

.profile-tag.success {
  border-left: 4px solid #28a745 !important;
}

.profile-tag.danger {
  border-left: 4px solid #dc3545 !important;
}

.profile-tag.warning {
  border-left: 4px solid #ffc107 !important;
}

.limit-select {
  max-width: 64px;
}

.new-tag {
  padding: 2px 8px;
  width: fit-content;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  box-shadow: 0px 1px 3px rgb(0 0 0 / 20%), 0px 2px 1px rgb(0 0 0 / 12%),
    0px 1px 1px rgb(0 0 0 / 14%);
  color: #ffeb12;
  font-family: "Courier New", monospace;
  font-weight: 600;
  font-size: 12px;
  background-image: linear-gradient(to right,
      #eee,
      #fc4f4f,
      #fc4f4f,
      #fc4f4f,
      #fc4f4f,
      #eee);
  animation: slidebg 20s linear infinite;
}

@keyframes slidebg {
  to {
    background-position: 20vw;
  }
}

.detail-modal {
  max-height: 375px !important;
}

.text-primary.layer-path,
.text-secondary.layer-path {
  cursor: pointer;
  transition: 200ms;
}

.text-primary.layer-path:hover {
  color: #3300ac !important;
}

.text-secondary.layer-path:hover {
  color: #007aee !important;
}

.row-success {
  background-color: #f5ffea;
}

.row-error {
  background-color: #ffeded;
}

.ceiling-border {
  border: 2px solid red;
  height: fit-content;
}

.ceiling {
  color: red !important;
  font-weight: 700 !important;
  padding: 0 !important;
}

.training-spec {
  display: flex;
  align-items: center;
  font-weight: normal;
}

.year-disabled {
  background-color: #d8d8d8 !important;
  pointer-events: none;
  /* transition: all 0.1s; */
  /* display: none !important; */
}

.hover-scale:hover {
  transform: scale(1.075);
  transition: all 0.3s;
}

.speech-bubble {
  --r: 16px;
  --t: 11px;
  --_d: 0%;
  max-width: 300px;
  padding: calc(2 * var(--r) / 3);
  -webkit-mask: radial-gradient(var(--t) at var(--_d) 0, #0000 98%, #000 102%) var(--_d) 100% / calc(100% - var(--r)) var(--t) no-repeat,
    conic-gradient(at var(--r) var(--r), #000 75%, #0000 0) calc(var(--r) / -2) calc(var(--r) / -2) padding-box,
    radial-gradient(50% 50%, #000 98%, #0000 101%) 0 0 / var(--r) var(--r) space padding-box;
  background: #afbfff;
  font-weight: bold;
  font-size: 14px;
  border-left: var(--t) solid #0000;
  place-self: start;
  margin-top: -23px;
  margin-right: -90px;
}

.contact img,
.contact .speech-bubble {
  transition: all 0.08s !important;
}

.contact:hover img {
  transform: scale(1.5)
}

.contact:hover .speech-bubble {
  transform: scale(1.2)
}

.li-no-dot {
  display: flex;
}

.li-no-dot:before {
  content: "";
}

.li-dot-top{
  display: flex;
}

.li-dot-top:before{
  content: "•";
  vertical-align: top;
  margin-right: 10px;
  font-size: 2rem;
  margin-top: -16px;
  color: #3e86dd;
}

.menu-card-disabled {
  pointer-events: none;
  cursor: pointer;
  background-color: #adadad !important;
}

.menu-card-disabled img {
  opacity: 0.75;
}