@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Open+Sans&display=swap");
:root {
  --primary: radial-gradient(50% 50% at 50% 50%, #38d7d0 0%, #00b7af 100%);
  --secondary: #13d2b8;
  --primaryHover: #1f748e;
  --danger: #ea3131;
  --pink: #ffe3e3;
  --pinkDark: #f1b9bfc7;
  --blue: #8be9fd;
  --gray: #e0e0e0;
  --mainColor: #f1f8fa;
  --grey: #f2f2f2;
  --borderColor: #828282;
  --imgBorder: #c4c4c4;
  --success: #28a745;
  --font: "Noto Sans JP", sans-serif;
  --gradient: linear-gradient(
    90deg,
    rgba(11, 36, 60, 0.7125) 0%,
    rgba(6, 36, 100, 0.675) 100%
  );
  --shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
  --newPrimary: #195df2;
  --newDark: #042e9a;
  --orange: #ff8a00;
  --yellow: #FFC24F;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  user-select: none;
}

*::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  background: rgba(15, 34, 0, 0.05);
}

* {
  -webkit-overflow-scrolling: touch;
}

*::-webkit-scrollbar {
  height: 6px;
  width: 6px;
  background: rgba(15, 34, 0, 0.05);
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 50px;
}

*::-webkit-scrollbar-corner {
  background-color: rgba(15, 34, 0, 0.05);
}

/* 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;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
}

input,
button,
textarea,
select {
  font-family: var(--font);
  font-size: 1.4rem;
  font-weight: 300;
  outline: none;
  border: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  -webkit-appearance: none;
}

button {
  cursor: pointer;
}

html {
  height: 100%;
}

body {
  height: 100%;
  font-family: var(--font);
  font-size: 1.2rem;
  overflow-x: hidden;
  font-weight: 300;
  background-color: var(--mainColor);
  /* background-image: url("../image/background-main.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; */
  background: url("../image/background-main.jpg") no-repeat center center fixed;
  background-size: cover;
}

/* Component */
.dropdown .dropdown__select,
.btn,
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--primary);
  width: 176px;
  font-size: 14px;
  color: var(--grey);
  box-sizing: border-box;
  border-radius: 6px;
}

.btn-primary {
  justify-content: center;
  padding: 6px 12px;
  width: 84px;
  height: 38px;
  box-shadow: 0px 4px 12px rgba(42, 121, 194, 0.6);
  border-color: transparent;
}

.btn-success {
  background: var(--success);
  padding: 6px 8px;
}

.btn-danger {
  padding: 6px 12px;
  background-color: var(--pink);
  border-radius: 20px;
  border-color: var(--danger);
  width: auto;
  height: auto;
}

.btn-outline-info {
  background: #fff;
  color: var(--primary);
  border-color: var(--primary);
  border-width: 2px;
  padding: 6px 8px;
  height: 60px;
}

.btn-outline-info:hover,
.btn-outline-info:active,
.btn-outline-info:focus {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-info:hover img,
.btn-outline-info:active img,
.btn-outline-info:focus img {
  filter: brightness(0) invert(1);
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
  background-color: var(--pinkDark) !important;
}

.btn__play,
.btn__pause {
  justify-content: space-between;
  align-items: center;
  /* margin: 0 auto; */
  width: 182px;
  height: 50px;
  font-size: 24px;
}

.btn__play img {
  margin-top: 5px;
}

.btn__pause .footer__img--close {
  margin-top: 0;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--primaryHover) !important;
  border-color: var(--primaryHover) !important;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(31, 116, 142, 0.6) !important;
}

.btn__play:disabled,
.btn-primary:disabled {
  background-color: var(--primaryHover) !important;
  border-color: var(--primaryHover) !important;
  cursor: not-allowed;
  pointer-events: none;
}

.dropdown .dropdown__select {
  position: relative;
  font-size: 16px;
}
.dropdown .dropdown__arrow {
  position: absolute;
  width: 19px;
  height: 7px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.bg-liner-on-header {
  background: linear-gradient(
    90deg,
    rgba(56, 215, 208, 0.2) 0%,
    rgba(56, 215, 208, 0.16) 0.01%,
    rgba(56, 215, 208, 0.03) 91.15%
  ) !important;
}

.modal-confirm-final .modal-dialog {
  display: flex;
  justify-content: center;
}

.modal-confirm-final .modal-content {
  width: 313px;
}

.modal-confirm-final .modal-header {
  border-bottom: none;
}

.modal-confirm-final .modal-title {
  width: 100%;
  text-align: center;
  color: white;
}

.modal-confirm-final .modal-header {
  background: #38d7d0;
}

.modal-confirm-final .modal-body {
  padding: 30px 15px 15px 15px;
  background: linear-gradient(180deg, #05093c 0%, #1b2353 100%);
}

.modal-confirm-final .modal-body .actions {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.modal-confirm-final .modal-body .actions button {
  color: #0c4286;
}

.modal-confirm-final .twit,
.modal-confirm-final .modal-body p {
  color: white;
  font-size: 14px;
}

.modal-confirm-final .twit .twit__icon {
  color: var(--yellow);
}

.modal-confirm-final .q-confirm {
  margin: 10px 0 25px 0;
}

.main-screen {
  display: flex;
  width: 1260px;
  height: 690px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 1.25rem;
}

/* CONTENT LEFT STYLE */
.main-screen .main-screen__left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-right: 20px;
  height: 640px;
}

.left__header,
.header__guide {
  display: flex;
  align-items: center;
  width: 100%;
}

.menu-camera {
  left: 0;
  width: auto;
  background: #082e6f;
}

.menu-camera button {
  font-size: 14px;
  color: white;
}

.main-screen .dropdown-toggle::after {
  display: none !important;
}

.left__header .panel-wrapped {
  flex-basis: 740px;
  display: flex;
  justify-content: space-between;
  padding: 0px 0 0 25px;
  box-sizing: content-box;
}

.left__header .panel-wrapped .panel-header {
  border-radius: 6px;
  width: 176px;
  height: 38px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  color: #38d7d0;
  font-size: 14px;
}

.left__header .panel-wrapped .panel-header:first-child {
  margin-right: 24px;
}

.left__header .panel-wrapped .panel-header img {
  margin-right: 10px;
}

.left__header .header__guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* margin-right: 1rem; */
}

.left__header .header__guide .header__help,
.left__header .header__guide .header__info {
  position: relative;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  user-select: none;
}

.left__header .header__guide .header__info {
  align-items: center;
}

.left__header .header__guide .header__help .header__help--explain,
.left__header .header__guide .header__info .header__help--explain {
  display: flex;
  align-items: flex-end;
  font-size: 1.375rem;
  font-style: italic;
  color: var(--borderColor);
  margin-left: 33px;
}
.left__header .header__guide .header__help .header__help--icon {
  display: flex;
  align-items: center;
  color: var(--primary);
  font-size: 20px;
  cursor: pointer;
}

.left__header .header__guide .header__help .header__help--icon img {
  margin-right: 0.5rem;
}

.left__header .header__guide .header__info .header__help--explain {
  align-items: center;
  margin-left: 0;
  margin-right: 2.5rem;
}

.left__header .header__guide .header__info .header__help--explain span {
  padding-bottom: 0.5rem;
}

.left__header .header__guide .header__info .header__help--explain img {
  position: absolute;
  right: -8px;
  top: -6px;
  width: 71px;
  height: 20px;
}

.btn-group1 {
  width: 180px;
  height: 38px;
}

.btn-secondary {
  color: #38d7d0;
  border-color: #38d7d0;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
  color: #38d7d0 !important;
  border-color: #38d7d0 !important;
  box-shadow: none !important;
}

.btn-group1 #show {
  max-width: 100px;
  display: inline-block;
  overflow: hidden;
}

.dropdown-menu {
  flex-direction: column;
  align-items: flex-start;
  max-width: 180px;
  min-width: 180px;

  border-radius: 6px;
  border: 1px solid #38d7d0;
  padding: 10px 10px;
}

.dropdown-item {
  font-size: 14px;
  color: #38d7d0 !important;
  padding: 0.25rem 0.5rem;
  white-space: break-spaces;
  border-bottom: 1px solid #38d7d0;
}

.dropdown-item:hover,
.dropdown-item:focus {
  outline: none;
  background: linear-gradient(
    90deg,
    rgba(56, 215, 208, 0.45) 0%,
    rgba(56, 215, 208, 0.36) 0.01%,
    rgba(67, 221, 214, 0.09) 91.15%
  );
}

/* Left content */
.main-screen .main-screen__left .left__content {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 570px;
  height: 100%;
  /* box-shadow: 0px 23px 55px rgba(69, 118, 213, 0.2); */
  border-radius: 20px;
  pointer-events: visible;
  margin: 10px 0 10px 0;
  z-index: 20;
}

.main-screen .main-screen__left .left__content .main-content {
  position: relative;
  width: 792px;  /* 795px; */ 
  padding: 24px 45px 25px 25px; 

  /* padding-top: 24px;
  padding-right: 40px; 
  padding-bottom: 25px;
  padding-left: 40px;  */

  background: var(--gradient);
  margin-right: 24px;
  border-radius: 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

.cover-scan {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;
  opacity: 0.6;
  z-index: 90;
}

.tool-madal {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 210px;
  height: 144px;
  background: linear-gradient(180deg, #05093c 0%, #1b2353 100%);
  border-radius: 12px;
  z-index: 190;
  position: absolute;
  transform: translate(130%, 130%);
}

.tool-madal .close-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.tool-madal p {
  margin-top: 20px;
  font-weight: bold;
  color: #38d7d0;
  font-size: 18px;
}

.main-screen .main-screen__left .left__content .section__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.main-screen .main-screen__left .left__content .section__img .content__img {
  max-width: unset;
  width: 100%;
  flex: 0;
  height: auto;
}

/* .main-screen .main-screen__left .left__content--active {
    height: 610px;
    min-height: unset;
  } */

.main-screen .main-screen__left .left__content .overlay {
  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 20px;
  background-color: rgba(42, 158, 194, 0.3);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 30;
}

.main-screen .main-screen__left .left__content .overlay .overlay__text {
  font-size: 45px;
  color: var(--mainColor);
}

/* .main-screen .main-screen__left .left__content .content__camera, */
.main-screen .main-screen__left .left__content .content__img {
  flex: 1;
  width: 73%;
  height: auto;
  margin-right: 8px;
  border-radius: 12px;
}

.main-screen .main-screen__left .left__content .content__camera {
  width: 84%;
  border-radius: 6px;
  top: 2%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.main-screen .main-screen__left .left__content .content__img--loading {
  background-color: var(--borderColor);
  height: 500px;
  margin: 0 auto;
}

.main-screen .main-screen__left .left__content .content__camera {
  position: relative;
  height: auto;
}

.hidden__content {
  display: none !important;
}

/* PREVIEW SLIDER */
.carousel-inner .active + .carousel-item,
.active + .carousel-item + .carousel-item {
  display: block;
  visibility: visible;
}

.carousel-inner
  .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
  + .carousel-item,
.carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)
  + .carousel-item
  + .carousel-item {
  transition: none;
}

.content__slider {
  flex: 1;
  display: flex;
  align-items: center;
  height: auto;
  border-radius: 12px;
  padding: 0 10px;
  overflow: hidden;
}

.content__slider-active {
  height: auto;
}

.content__slider .slider__arrow {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--newPrimary);
  width: 54px;
  height: 47.38px;
  border-radius: 50%;
}

.content__slider .slider__arrow:hover {
  background-color: var(--newDark);
}

.content__slider .slider__carousel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  overflow: hidden;
}

.content__slider .slider__carousel .slider__item {
  position: relative;
  align-items: center;
  width: 190px;
  border-radius: 12px;
  margin-bottom: 10px;
  margin: 0 1rem;
  border: 2px solid transparent;
  opacity: 0.5;
  cursor: pointer;
}

.content__slider .slider__carousel .slider__item img {
  border-radius: 10px;
  width: 190px;
  height: 130px;
  object-fit: cover;
}

.content__slider .slider__carousel .slider__item--img-active {
  border: 2px solid var(--orange);
  opacity: 1;
  overflow: hidden;
}

.content__slider .slider__carousel .slider__item--img-unactive {
  display: flex;
  justify-content: center;
  width: 190px;
  height: 130px;
  overflow: hidden;
}

.slider__carousel .slider__item--img-active .slider__item--img,
.content__slider
  .slider__carousel
  .slider__item--img-unactive
  .slider__item--img {
  height: 130px;
}

.content__slider .slider__carousel .slider__item .slider__item--btn {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 20px;
  height: 20px;
  top: 5%;
  right: 5%;
  border-radius: 0;
  cursor: pointer;
}

/* CONTENT RIGHT STYLES */
.main-screen .main-screen__right {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  z-index: 40;
  height: 570px;
  border-radius: 12px;
  background: var(--gradient);
}
.main-screen__right .main-screen__right--box {
  position: absolute;
  top: 22px;
  right: 39px;
  width: 309px;
  height: 455px;
  display: flex;
  align-items: center;
}
.right--box__content .right--box__content--text {
  font-family: var(--font);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  color: #38d7d0;
  letter-spacing: 0.002em;
  line-height: 22px;
}

.main-screen__right .no-data {
  padding-top: 240px;
  color: #38d7d0;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.main-screen__right .infomation {
  padding: 24px 34px;
}

.main-screen__right .infomation ul {
  padding-left: 0;
}

.main-screen__right .infomation ul li {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #195df2;
  padding-bottom: 10px;
}

.main-screen__right .infomation ul li span {
  font-size: 13px;
  font-weight: bold;
}

.main-screen__right .infomation ul li .label {
  color: #38d7d0;
  white-space: nowrap;
}

.main-screen__right .infomation ul li .value {
  color: white;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 250px;
  text-align: right;
}

.main-screen__right .questions {
  position: relative;
  padding: 0 30px;
}

.main-screen__right .questions .panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 14px;
  color: white;
}

.main-screen__right .questions .list__content {
  font-size: 14px;
}

.main-screen__right .questions .panel .more {
  display: flex;
  align-items: center;
}

.main-screen__right .questions .panel .has-alert {
  display: flex;
  align-items: center;
  margin-left: 10px;
  color: #ff8a00;
  font-weight: normal;
}

.main-screen__right .questions ul {
  padding-left: 0;
  border: 1.6px solid #41587f;
  border-radius: 12px;
  height: 216px;
  overflow-y: auto;
}

.main-screen__right .questions ul li {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #41587f;
  padding: 10px 20px;
}

.main-screen__right .questions ul li:last-child {
  border-bottom: none;
}

.main-screen__right .questions ul li span {
  font-size: 14px;
  font-weight: bold;
  color: white;
}

.main-screen__right .questions ul li .action {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.main-screen__right .questions ul li .inputs {
  display: flex;
  align-items: center;
}

.main-screen__right .questions ul li .inputs input {
  width: 40px;
  height: 28px;
  border: 1px solid #38d7d0;
  border-radius: 12px;
  background: none;
  color: white;
  font-size: 13px;
  text-align: center;
}

.main-screen__right .questions ul li .action div {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  font-size: 13px;
  font-weight: bold;
  color: #38d7d0;
}

.main-screen__right .questions ul li .action img {
  width: 20px;
}

.main-screen__right .questions ul li .action .mid-symbol {
  display: inline-block;
  width: 11px;
  text-align: center;
  font-size: 13px;
  color: #38d7d0;
}

.main-screen .main-screen__right .btn-primary {
  position: absolute;
  top: 51%;
  transform: translateY(-51%);
  z-index: 10;
}
.main-screen .main-screen__right .right__table {
  width: 425px;
  height: 539px;
  background-color: var(--grey);
  border-radius: 20px;
}

.main-screen .main-screen__right .right__table .table__header,
.main-screen .main-screen__right .right__table .table__user,
.main-screen .main-screen__right .right__table .table__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 23px 15px 15px;
  border-bottom: 1px solid var(--borderColor);
}

.main-screen
  .main-screen__right
  .right__table
  .table__header
  .table__header--title,
.main-screen
  .main-screen__right
  .right__table
  .table__user
  .table__header--title,
.main-screen
  .main-screen__right
  .right__table
  .table__footer
  .table__header--title {
  font-size: 24px;
  font-weight: bold;
}

.main-screen .main-screen__right .right__table .table__footer {
  border-bottom: 0;
  border-top: 1px solid var(--borderColor);
}

.main-screen .main-screen__right .right__table .table__content {
  display: flex;
  flex-direction: column;
  height: 360px;
  overflow: auto;
}

.main-screen .main-screen__right .right__table .table__content .table__item {
  display: flex;
  justify-content: space-between;
  padding: 15px 22px 15px 15px;
  width: 100%;
  border-bottom: 1px solid var(--gray);
  font-size: 20px;
  color: #333333;
  font-weight: 500;
}

.main-screen
  .main-screen__right
  .right__table
  .table__content
  .table__item
  .table__item--label {
  flex: 1;
}

.main-screen
  .main-screen__right
  .right__table
  .table__content
  .table__item
  .table__item--input {
  flex: 2;
}

.main-screen
  .main-screen__right
  .right__table
  .table__content
  .table__item
  .table__item--input
  .input__grp {
  display: flex;
  width: 100%;
  align-items: center;
}

.main-screen
  .main-screen__right
  .right__table
  .table__content
  .table__item
  .table__item--input
  .input__grp
  i,
.main-screen
  .main-screen__right
  .right__table
  .table__content
  .table__item
  .table__item--number
  i {
  cursor: pointer;
}

.main-screen
  .main-screen__right
  .right__table
  .table__content
  .table__item
  .table__item--input
  .input__grp
  i:last-child {
  margin-left: 0.5rem;
}

.main-screen
  .main-screen__right
  .right__table
  .table__content
  .table__item
  .table__item--input
  .input__grp
  input {
  width: 100%;
  padding: 0 6px;
  border-radius: 10px;
  margin: 0 5px;
  font-size: 20px;
  color: #333333;
  font-weight: 500;
}

.disable__btn {
  opacity: 0.3;
  pointer-events: none;
}

.main-screen
  .main-screen__right
  .right__table
  .table__footer
  .table__header--title {
  font-weight: normal;
  color: var(--borderColor);
}

.main-screen .main-screen__right .right__btn-grp {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.main-screen .main-screen__right .right__btn-grp .btn {
  height: 60px;
  padding: 6px 8px;
}

/* NOTIFICATION STYLES*/
#notification-area {
  position: fixed;
  top: 0px;
  right: 10px;
  width: 250px;
  height: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 99;
}
#notification-area .notification {
  position: relative;
  padding: 15px 10px;
  background: #111;
  color: #f5f5f5;
  font-family: "Raleway";
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
  margin: 5px 0px;
  opacity: 0;
  left: 20px;
  animation: showNotification 500ms ease-in-out forwards;
}
@keyframes showNotification {
  to {
    opacity: 1;
    left: 0px;
  }
}
#notification-area .notification.success {
  background: var(--secondary);
}
#notification-area .notification.error {
  background: var(--danger);
}
#notification-area .notification.info {
  background: var(--primary);
}

/* LOADING */
@keyframes loading2 {
  50% {
    transform: rotate(200deg);
  }
  75% {
    transform: rotate(160deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
.overlay__loading {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(42, 158, 194, 0.3);
  border-radius: 20px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}
.circle-loading2 {
  display: inline-flex;
  animation: loading2 1s infinite;
}
.circle-loading2 div {
  width: 35px;
  height: 35px;
  border: 3px solid #fff;
  border-radius: 50%;
  margin: 0 5px;
}

#myCanvas {
  position: relative;
  z-index: 99;
  height: 500px;
  flex: 1;
  width: 100%;
  border-radius: 12px;
  background: white;
}

/* DROPDOWN */
.dropdown {
  display: flex;
  position: relative;
  border-radius: 8px;
}
.dropdown__select {
  background-color: white;
  box-shadow: var(--shadow);
  padding: 1.5rem;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.dropdown__select * {
  pointer-events: none;
}
.dropdown__list {
  list-style-type: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 1rem;
  background-color: var(--primary);
  box-shadow: var(--shadow);
  padding: 0.5rem;
  border-radius: 8px;
  display: none;
  z-index: 50;
}
.dropdown__list:before {
  content: "";
  height: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  transform: translateY(-100%);
}
.dropdown__list.show {
  display: block;
}
.dropdown__item {
  padding: 0.5rem;
  color: #fff;
  transition: all 0.25s ease;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
.dropdown__item:hover {
  color: var(--primary);
  background-color: #f1fbff;
}

/* CLOSE ICON */
.close {
  position: sticky;
  z-index: 20;
  right: 16px;
  top: 16px;
  width: 36px;
  height: 36px;
  opacity: 0.3;
}

.close:hover img {
  content: url("../asset/images/large-close-active.svg");
}

.close:focus {
  outline: none;
}

/* ZOOM */
.zoom {
  position: sticky;
  bottom: 16px;
  margin-left: 556px;
}

.zoom__content {
  /* position: absolute; */
  display: flex;
  width: 143px;
  height: 30px;
  background: rgba(12, 66, 134, 0.2);
  border-radius: 6px;
}

.zoom__content .zoom__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: inherit;

  background: #0c4286;
  color: #fff;
  font-weight: 500;
  font-size: 14px;

  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.zoom__content .zoom__action {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.zoom__action button {
  flex: 0 0 50%;
  height: 100%;
  background-color: transparent;
}

.zoom__action button img {
  margin: 0 auto;
}

.zoom__action button:focus {
  outline: none;
}

.zoom__action::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 23px;
  background: #0c4286;
}

.scanbot-camera-view {
  width: auto !important;
}

.footer-main {
  display: flex;
  flex-flow: row nowrap;
  padding: 10px 0;
  background: var(--gradient);
  min-height: 170px;
  border-radius: 12px;
}

.carousel-documents {
  position: relative;
  width: 792px;
  min-height: 100px;
  padding: 20px 75px;
  background: var(--gradient);
  border-radius: 12px;
}

.carousel-documents .owl-carousel .item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  position: relative;
  border-radius: 6px;
  border: 2px solid transparent;
}

.carousel-documents .owl-carousel .item img {
  border-radius: 6px;
  width: 190px;
}

.carousel-documents .owl-carousel .item .close-icon {
  position: absolute;
  width: 30px;
  right: 15px;
  top: 15px;
}

.carousel-documents .owl-carousel .item .close-icon:hover {
  background: #b16969;
  cursor: pointer;
}

.footer-main .actions {
  flex-basis: 400px;
  padding-left: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-main .actions button {
  width: 156px;
  height: 70px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  font-size: 14px;
  align-items: center;
  border: none;
}

.send-btn {
  background: #195df2;
  color: white;
}

.btn-reload {
  min-width: 81px;
  max-width: 81px;
  height: 38px;
  border: 1px solid #38d7d0;
  margin-left: 1rem;
  color: #38d7d0;
  background: linear-gradient(
    90deg,
    rgba(56, 215, 208, 0.45) 0%,
    rgba(56, 215, 208, 0.36) 0.01%,
    rgba(67, 221, 214, 0.09) 91.15%
  );
  font-weight: 500;
  font-size: 14px;
}

.btn-reload:hover {
  border: 1px solid #fff;
}

.btn__edit,
.btn__cancel,
.btn__save {
  cursor: pointer;
}

.btn__edit:hover img {
  content: url("../asset/images/edit-white-icon.svg");
}

.btn__cancel:hover img {
  content: url("../asset/images/close-red-full-icon.svg");
}

.btn__save:hover {
  content: url("../asset/images/accept-blue-icon.svg");
}

.send-btn img,
.camera-btn img {
  margin-right: 0.5rem;
}

.camera-btn,
.close-btn {
  background: #ff8a00;
  color: white;
}

.close-btn {
  background: #eb5757;
}

.close-btn img {
  width: 22px;
  height: 22px;
  margin-right: 0.5rem;
}

.footer-main .owl-nav {
  display: block !important;
}

.footer-main .owl-dots {
  display: none !important;
}

.footer-main .owl-nav:hover,
.footer-main .owl-nav button:hover {
  outline: none !important;
  background: none !important;
}

.footer-main .owl-nav button {
  outline: none;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
  position: absolute;
  top: 35%;
}

.owl-nav .owl-prev {
  left: -70px;
}

.owl-nav .owl-next {
  right: -65px;
}

.owl-nav button span {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #195df2;
  color: white;
  padding-left: 0px;
  padding-bottom: 15px;
  border-radius: 50%;
  font-size: 50px;
}

/* .left__footer {
    display: flex;
    justify-content: center;
  } */

.crop-navbar {
}

.cropping-controller {
  background-color: #f1f8fa;
  height: 100%;
}

.crop_action_bar {
  position: fixed;
  bottom: 0;
}

.scanbot-shutter-button {
  display: none;
}

.mouseNone {
  pointer-events: none;
}

.modal-footer .btn {
  width: 150px;
  justify-content: center;
}

.grp__input-file {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #38d7d0;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  padding: 4px 5px;
}

.grp__input-file label {
  font-size: 14px;
  margin: 0 0;
  cursor: pointer;
}

.grp__input-file input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}


.custom-btn {
  width: 84px;
  margin-top: 15px;
}
/* .modal-qa {
  width: 370px !important;
} */
.btn-tick {
  color: #fff !important;
  background-color: #007bff !important;
  border-color: #007bff !important;
  margin-right: 20px;
}
.btn-circle {
  color: #fff !important;
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}
.btn-close-qa {
  color: #fff !important;
  background-color: #343a40 !important;
  border-color: #343a40 !important;
}



/* .checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px} */
.toggle{position:relative;overflow:hidden}
.toggle input[type=checkbox]{display:none}
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
.toggle.off .toggle-group{left:-100%}
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px; background: white !important;}
.toggle.btn{
  min-width: 59px;
  min-height: 34px;
  max-width: 90px;
  max-height: 34px;
}
.toggle-on.btn{padding-right:24px;}
.toggle-off.btn{padding-left:24px; background: rgb(8, 46, 111) !important;}
.toggle.btn-lg{min-width:79px;min-height:45px}
.toggle-on.btn-lg{padding-right:31px}
.toggle-off.btn-lg{padding-left:31px}
.toggle-handle.btn-lg{width:40px}
.toggle.btn-sm{min-width:50px;min-height:30px}
.toggle-on.btn-sm{padding-right:20px}
.toggle-off.btn-sm{padding-left:20px}
.toggle.btn-xs{min-width:35px;min-height:22px}
.toggle-on.btn-xs{padding-right:12px}
.toggle-off.btn-xs{padding-left:12px}

.toogle .btn-primary {
  position: relative !important;
}

.btn-secondary.disabled, 
.btn-secondary:disabled {
  color: #fff;
  border-color: #38d7d0 !important;
  /* border-color: #6c757d; */
}