.toast {
  display: none;
  min-width: 20vw;
}
.toast.show {
  display: block;
  opacity: 1;
  position: fixed;
  z-index: 99999999;
  margin: 20px;
  right: 0;
  top: 3.5rem;
}
.swal2-container {
  z-index: 99999999;
}
#preloader2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #ffffff82;
}

#preloader2:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #1977cc;
  border-top-color: #d1e6f9;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}
@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: smaller;
  color: #000000cf;
  font-style: italic;
}
.modal-dialog.large {
  width: 80% !important;
  max-width: unset;
}
.modal-dialog.mid-large {
  width: 50% !important;
  max-width: unset;
}
#viewer_modal .btn-close {
  position: absolute;
  z-index: 999999;
  /*right: -4.5em;*/
  background: unset;
  color: white;
  border: unset;
  font-size: 27px;
  top: 0;
}
#viewer_modal .modal-dialog {
  width: 80%;
  max-width: unset;
  height: calc(90%);
  max-height: unset;
}
#viewer_modal .modal-content {
  background: rgb(0, 0, 0);
  border: unset;
  height: calc(100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
#viewer_modal img,
#viewer_modal video {
  max-height: calc(100%);
  max-width: calc(100%);
}

.sidebar::-webkit-scrollbar {
  width: 0px; /* Ukuran lebar scrollbar */
}

::-webkit-scrollbar {
  width: 10px; /* Ukuran lebar scrollbar */
  height: 90px !important;
}
::-webkit-scrollbar-button {
  background-color: #8a8a8a;
}

::-webkit-scrollbar-track {
  background: #ffffff;
}

::-webkit-scrollbar-thumb {
  /* Warna thumb scrollbar */
  background: #b5b5b5 !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #f8a500; /* Warna thumb scrollbar saat dihover */
}

/* Full-width input fields */
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  padding-left: 38px;
  margin: 8px 0;
  padding-left: 38px;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 8px 15px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  box-shadow: rgba(0, 0, 0, 0.498039) 2px 5px 5px;
}

input[type="email"],
input[type="password"],
textarea,
select {
  border-color: #488bfecf;
  color: rgb(0, 0, 0);
  background: rgb(230 225 225 / 63%);
}

input[type="email1"],
input[type="password1"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 35px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;

  box-shadow: 0px 0px 0px 4px #ffc;
  box-shadow: rgba(0, 0, 0, 0.498039) 2px 5px 5px;
  color: #000;
  border: 1px solid #8ab15f;
}
input[type="text"] {
  width: 100%;
  padding: 12px 20px;
  padding-left: 38px;
  margin: 8px 0;
  padding-left: 38px;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 8px 15px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  box-shadow: rgba(0, 0, 0, 0.498039) 2px 5px 5px;
}
input[type="email1"],
input[type="password1"],
textarea {
  border-color: #488bfecf;
  color: rgb(0, 0, 0);
  background: rgba(255, 146, 146, 0.774);
}

select {
  background-color: #00c3ff;
  width: 220px;
  height: 40px;
  border-radius: 12px;
}

.text-category {
  color: #000000;

  font-family: system-ui;

  background-color: #d9d9d9;

  font-size: 16px;
}

.category-text {
  background-color: #c9d8e1;
}

.text-change-category {
  color: #fc4141;
}
/* Set a style for all buttons */
button {
  background-color: #077ea6;
  color: #0e0e0e;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
}
.loginbox {
  width: 100%;
  margin-top: 20px;
  border-radius: 8px;
  font-weight: bold;
  background: #17a2b8 linear-gradient(45deg, #3d3d3d, transparent);
  transition-duration: 0.4s;
}

.loginbox:hover {
  background-color: #ffb624;
  color: white;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar1 {
  /* width: 34%; */
  border-radius: 50%;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The Modal (background) */
.modal1 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #0a0a0acf; /* Fallback color */
  backdrop-filter: blur(1.5px);

  padding-top: 60px;
  scroll-behavior: smooth;
}

/* Modal Content/Box */
.modal1-content {
  width: 345px;
  background-color: #fefefe;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-top: 8px solid #3073b6;
  border-bottom: 8px solid #17a2b8;
  border-radius: 15px;
  z-index: 1500;
}

.modal2 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #0a0a0acf; /* Fallback color */

  padding-top: 60px;
  scroll-behavior: smooth;
  overflow: scroll;
  overflow-y: scroll;
}

/* Modal Content/Box */
.modal2-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 70%; /* Could be more or less, depending on screen size */
  border-top: 5px solid #ffc107;
  border-bottom: 5px solid #007bff;

  border-radius: 30px;
  z-index: 1500;
}

.rememberme {
  padding-top: 18px;
  /* margin-top: 18px; */
  color: #dc3545;
}

.card-login-header {
  width: 100%;
  font-weight: bold;
  padding: 10px;
  margin-top: -18px;
  display: grid;
  justify-content: left;
  align-items: center;
  grid-template-columns: auto auto auto;
}
.card-login:nth-child(1) {
  width: 100%;
  grid-row: span 2;
  grid-column-start: 1;
  grid-column-end: 3;
  padding-left: 0px;
}

.card-login:nth-child(2) {
  width: 100%;
  padding-left: 0px;
  margin-top: 15px;
}
.card-login:nth-child(3) {
  width: 100%;
  padding-left: 0px;
  margin-top: -45px;
}

.border-bottom-login {
  width: 90%;
  border-bottom: 2px solid #aaaaaa;
  margin: 0 auto;
  margin-top: -16px;
  margin-bottom: 17px;
}
.containerbg {
  width: 94%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media only screen and (min-width: 420px) and (max-width: 768px) {
  .modal1-content {
    padding-top: 2px;
    padding-bottom: 9px;
    width: 75%;
  }

  .card-login-header {
    font-size: 17px;
  }

  .text-logo-employee {
    font-size: 21px;
  }

  .picture_header {
    display: none;
  }
}

@media (max-width: 450px) {
  .btn-datatables-single {
    background-color: #dee2e6;
    border-radius: 4px !important;
    border: 0px;
    color: #030303;
    height: 33px !important;
    width: 135px;
    font-size: 12px !important;
    padding: 5px;
    box-shadow: 1px 1px 5px 1px #acacac;
    /* text-align: right; */
  }

  .modal1-content {
    padding-top: 2px;
    padding-bottom: 9px;
    width: 80%;
  }

  .card-login-header {
    font-size: 17px;
    margin-top: -30px;
  }

  .login {
    font-size: 18px;
  }

  .picture_header {
    display: none;
  }
}

.containers {
  position: absolute;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;

  margin-right: auto;
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.picture_header {
  width: 225px;
  padding-top: 5px;
  height: auto;
  float: left;
  padding-left: 10px;
  position: relative;
  z-index: 2;
}

.registered,
.linkin {
  font-size: 13px;
  float: right;
  text-align: right;
  color: #194cea;
  margin-top: -18px;
  position: relative;
  display: flow;
}

/* The Close Button (x) */
.close1 {
  position: absolute;
  right: 3px;
  top: -39px;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close1:hover,
.close1:focus {
  color: red;
  cursor: pointer;
}

.navbar-primary {
  background: #3369b6 linear-gradient(65deg, #2c3033, transparent);
  border: 0px !important;
  box-shadow: 0px 1px 2px 1px #5d5a5a;
}

.layout-navbar-fixed
  .wrapper
  .sidebar-dark-primary
  .brand-link:not([class*="navbar"]) {
  background: #2c3033;
  height: 56px;
  border: 0px !important;
}

.nav-sidebar .nav-link > .right:nth-child(2),
.nav-sidebar .nav-link > p > .right:nth-child(2) {
  right: 1rem;
  margin-top: 7px;
}

.img-circle {
  border-radius: 50%;
  width: 75px;
  height: 75px;
  margin-top: 10px !important;
  margin: 0px auto;
}

.font-avatar {
  font-size: 16px;
  color: #090909;
  text-align: center;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700 !important;
  background: #fafafa;
  width: fit-content;
  margin: 0px auto;
  border-radius: 6px;
  padding-left: 3px;
  padding-right: 3px;
  margin-top: 3px;
}

.font-avatar2 {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 16px;
  color: #fff;
  text-align: left;
  margin-left: 2px;
  margin-top: 14px;
  /* font-weight: 600 !important; */
  /* padding-left: 23px; */
  top: -10px;
}

.text-topbar {
  font-family: "Jura", sans-serif;
  font-size: 24px;
  padding-top: 0px;
}

[class*="sidebar-dark-"] .sidebar a {
  color: #ffffff;
}

[class*="sidebar-dark-"] {
  background-color: #2c3033;
  margin-right: 11px;
}

.nav-link.nav-home.active {
  color: #ffffff !important;
  background-color: #dc3545 !important;
  border-radius: 20px;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 7px;
}

.nav-link.nav-home:hover {
  color: #ffffff !important;
  background-color: transparent !important;
}

.nav-sidebar .nav-item > .nav-link {
  color: #fefefe;
}

[class*="sidebar-dark-"] .nav-sidebar > .nav-item.menu-open > .nav-link,
[class*="sidebar-dark-"] .nav-sidebar > .nav-item:hover > .nav-link,
[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link:focus {
  /**background-color: #17a2b8;**/
  color: #17a2b8 !important;
  background: transparent;
}

[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link {
  color: #b5b4b1;
  padding-left: 5px;
  margin-left: 20px;
  font-size: 13px;
  transition: 0.3s linear, opacity 0.3s ease, visibility 0.3s ease;
}

[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link:hover {
  color: #17a2b8 !important;
  background: transparent !important;
  margin-right: 10px;
}

[class*="sidebar-dark-"]
  .nav-flat
  .nav-item
  .nav-treeview
  > .nav-item
  > .nav-link.active {
  color: #a6a6a6 !important;
  font-weight: 700;
  background-color: transparent !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #a6a6a6 !important;
  font-weight: 700;
  background-color: transparent !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: transparent !important;
  box-shadow: none !important;
  color: #a6a6a6 !important;
  font-weight: 700;
}

.nav-flat.nav-sidebar > .nav-item .nav-treeview .nav-item > .nav-link,
.nav-flat.nav-sidebar > .nav-item > .nav-treeview .nav-item > .nav-link {
  border-left: 0 solid !important;
}

/* sidebar dashboard animation */

.nav-dashboard-close {
  background: #3369b6;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 339px;
  height: 45px;
  margin-top: 35px;
  padding-top: 3px;
  border-radius: 20px 20px 0px;
  box-shadow: -3px 0px 3.5px #000;
}

.nav-dashboard-close img {
  text-align: right !important;
  align-items: center;
  height: 60px;
  /* float: right; */
  margin-left: 38px;
  /* z-index: 10; */
}
.nav-dashboard-close,
.nav-dashboard-close span {
  transition: 400ms;
}

.nav-dashboard-close .text {
  transform: translatex(5px);
  color: #fcfcfc;
  font-weight: bold;
  margin-left: 15px;
}

.nav-dashboard-close .icon {
  position: absolute;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  text-align: left;
  justify-content: center; /* top: 39px !important; */
}

.nav-dashboard-close:hover {
  background: #3369b6 !important;
}

.nav-dashboard-close:hover .text {
  color: #000;
}

.nav-dashboard-close:hover .icon {
  width: 160px;
  border-left: none;
  transform: translateX(0);
}

.nav-dashboard-close:focus {
  outline: none;
}

.nav-dashboard-close:active .icon svg {
  transform: scale(0.8);
}

.text-backto-home {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  color: #000000;
}

.alert-info-download {
  color: #007bff;
  margin-left: -8px;
  margin-top: -15px;
}

.bg-light-share {
  color: #001f3f;
  height: 35px;
  border-right: 4px solid #000 !important;
  border-top: 0px !important;
  border-bottom: 0px !important;
  border-left: 0px !important;

  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.bg-light-share:hover {
  background-color: #fdf901 !important;
  color: #000;
  border-left: 4px solid #000 !important;
  border-right: 4px solid #fdf901 !important;
  transform: translateX(0%);
}

.bg-light-share:active {
  color: #ff0000;
}

.nav-link {
  padding-left: 20px;
}

.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  width: 0 !important;
  height: 8px !important;
  background: #3369b6;
  border: solid #3369b6;
  border-width: 2px 2px 2px 2px;
  display: inline-block;
  padding: 2px;
  float: left;
  left: 2px;
  position: absolute;
  overflow-x: hidden !important;
}

.btn-success-files {
  color: #001f3f;
  border: 2px solid #dadada;
  border-radius: 5px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 10px;
  text-align: center;
  position: relative;
  display: flow;
  width: 125px;
  height: 64px;
  margin-left: 0px;
  margin-top: 23px;
  padding-top: 18px;
  cursor: pointer;
}
.btn-success-files:hover {
  color: #fbfbfb;
  background-color: #464646;
}

.lead {
  font-size: 12px;
  font-weight: 300;
}

.btn-secondary {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
  box-shadow: none;
  border-radius: 10px;
}

.button-save {
  border-radius: 10px;
  border-width: 1px;
  box-shadow: none;
  background-color: #1977cc;
  width: 90px;
  color: white;
}

.button-save:hover {
  background-color: #aaabac;
  border-color: #aaabac;
  color: #000000;
  width: 90px;
  border-radius: 10px;
  border-width: 1px;
}

.button-cancel {
  border-radius: 10px;
  border-width: 1px;
  box-shadow: none;
  background-color: #cc1919;
  width: 90px;
  color: wheat;
}

.button-cancel:hover {
  background-color: #ffffff;
  border: 2px solid#ff0000;
  color: #ff0000;
}

.card-info.card-outline {
  border-top: 4px solid #007bff;
  height: 96%;
}

.card-primary.card-outline {
  border-top: 0px solid #6c757d;
  height: 96%;
}

.text-muted-upload {
  color: #030303 !important;
  font-weight: bold;
  font-size: 20px;
}
.font-document-sharing {
  font-family: monospace;
  font-size: calc(18px - 0.23vw);
  color: #dc3545;
  margin-top: 16px;
}

.text-note {
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  padding-left: 7px;
  padding-top: 7px;
}
.card-note {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: rgba(97, 97, 97, 0.89);
  background-clip: border-box;
  /* border: 0 solid rgba(0,0,0,.125); */
  border-radius: 0.25rem;
  border-bottom: 3px solid #505050;
  margin-bottom: 21px;
}
.card-header > .card-tools {
  float: right;
  margin-right: 0.375rem;
}

@media (min-width: 768px) {
  .layout-navbar-fixed.sidebar-mini-md.sidebar-collapse .wrapper .brand-link,
  .layout-navbar-fixed.sidebar-mini.sidebar-collapse .wrapper .brand-link {
    /* height: calc(5.5rem + 0px); */
    width: 4.6rem;
  }
}

/* CSS SIDE BAR 2 */

/* Remove padding */
.no-padding {
  padding: 0px !important;
}

input[type="file"] {
  display: none !important;
}

.info-box .info-box-text,
.info-box .progress-description {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Exo 2", sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  color: #fd7e14;
}

.info-box .info-box-number {
  display: block;
  margin-top: 0.25rem;
  font-weight: 700;
  font-size: 20px;
  font-family: "Yanone Kaffeesatz";
}

.btn-group > .btn-group:not(:last-child) > .btn,
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  height: 40px;
  border-radius: 15px;
  margin: 2px;
}

.btn-group > .btn-group:not(:first-child) > .btn,
.btn-group > .btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-radius: 15px;
  margin-top: 2px;
  height: 40px;
  margin-left: 10px;
}

.info-box .info-box-icon {
  border-radius: 1.25rem;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.875rem;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  width: 82px;
  height: 82px;
}

.bg-info {
  background-color: #343a40 !important;
}

.bg-primary {
  background-color: #dc3545 !important;
}

.bg-leave {
  background-color: #9e9e9e !important;
}

.text-pemisah {
  color: #c7c7c7;
  font-family: monospace;
  font-size: 12px;
}

.text-pemisah-2 {
  background: linear-gradient(to right, #bdc0c2a6 0%, #0000 100%);
  color: #131312;
  height: 35px;
  width: 115%;
  border-radius: 0px 17px 0px 0px;
  margin-left: -28px;
  margin-top: 12px;
  padding-top: 4px;
  padding-left: 20px;
  font-family: "Nunito", sans-serif;
  font-weight: bold;
  box-shadow: 1px 1px 3px 0px #6c757d;
}

.info-box {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
  background-color: #fff;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
  min-height: 80px;
  padding: 0.5rem;
  position: relative;
  width: 100%;
  background-color: #d5d7d9;
  border-radius: 35px 0px;
  border-bottom: 3.4px solid #ff7706;
}

/* Tabel */

@media screen and (max-width: 768px) {
  div.dataTables_wrapper div.dataTables_length,
  div.dataTables_wrapper div.dataTables_filter,
  div.dataTables_wrapper div.dataTables_info,
  div.dataTables_wrapper div.dataTables_paginate {
    text-align: left;
    margin-left: 7px;
    /* left: 8px; */
    /* justify-content: center; */
  }

  div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 68px;
  }

  .note-editor.note-airframe,
  .note-editor.note-frame {
    border: 1px solid rgba(0, 0, 0, 0.2);
    max-width: 100%;
  }

  .form-control-tx {
    max-width: 100%;
  }

  .info-box {
    max-width: 95%;
  }

  dt {
    font-size: 17px;
  }

  .row-document-list {
    overflow-x: auto;
  }

  .table-filter-container {
    text-align: left;
    float: left;
  }

  div.dataTables_wrapper div.dataTables_length select {
    width: auto;
    display: inline-block;
    margin-left: 50px;
    /* padding-top: 2px; */
  }

  .form-control-categories {
    padding-left: 90px;
  }
  .form-control-categories-2 {
    padding-left: 90px;
  }

  .tabel1 {
    max-width: 100%;
  }
  .tabel2 {
    max-width: 100%;
  }

  .text-admin {
    font-size: 14px !important;
  }

  .text-admin-2 {
    font-size: 15px !important;
    color: #030303;
    font-family: "Dosis", sans-serif;
  }

  .text-admin-3 {
    font-size: 12px !important;
    color: #030303;
    font-family: Arial, Helvetica, sans-serif;
  }
  .text-for-created-document {
    font-size: 13px !important;
  }

  .pagination {
    display: -ms-flexbox;
    display: flex;
    list-style: none;
    border-radius: 0.25rem;
    width: 40%;
    padding-left: 30px;
    border: 0px !important;
  }
}

div.dataTables_wrapper div.dataTables_filter input {
  display: inline-block;
  width: 197px;
  background-color: #ffffff;
  height: 37px;
  color: #001f3f;
  border-bottom: 3px solid #17a2b8;
}

div.dataTables_wrapper div.dataTables_filter input.active {
  border-bottom: 3px solid #2a2a2a;
}

.note-editor.note-airframe,
.note-editor.note-frame {
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 120%;
}

.form-control-tx {
  height: 40px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  width: 420px;
  border: 1px solid #c6c6c6;
}

.m-0 {
  margin: 0 !important;
  font-family: "Josefin Sans", sans-serif;
  background-color: #cacbf4;
  padding-left: 16px;
  border-radius: 9px;
  border-bottom: 3px solid #676161;
  /* margin: 5px; */
  padding-top: 5px;
  /* width: 198%; */
}

.spacing-shared {
  padding-left: 8px;
  width: 100%;
}
.text-shared {
  font-family: "Comfortaa", cursive;
  color: #fff;
  font-size: calc(12px + 0.2vw);
}

.m-home {
  position: relative;
  width: 100%;
  top: 1px;
  z-index: 99;
}

.position {
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(17px + 0.233vw);
  margin-top: -37px;
  padding-top: 28px;
  text-align: right;
  border-radius: 1px 0px 20px 20px;
  padding-right: 9px;
  height: 66px;
  background: #343a40;
}

.span-m-home {
  padding-left: 10px;
  padding-right: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #141414;
  text-shadow: 0 0 BLACK;
  background: #edebeb;
}
.col-sm-6 {
  margin-left: 11px;
}

/*chart JS */

.chart {
  max-width: 100%;
  text-align: center;
  margin-top: -122px;
  margin-left: 20p;
}
.myChart-2 {
  max-width: 89%;
  text-align: center;
  margin-top: -122px;
}
.tabel1 {
  background-color: #5595bb1f;
  /* margin-left: 10px; */
  margin-top: 45px;
  /* padding-left: 30px; */
  border-radius: 15px;
  display: block;
  /*margin-left: auto;
            margin-right: auto; */
}

.tabel2 {
  background-color: #ff6e421f;
  /* margin-left: 10px; */
  margin-top: 45px;
  /* padding-top: 35px !important; */
  border-radius: 15px;
}

.center-elements-all {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.text-chart {
  font-size: calc(13px + 0.290625vw);
  font-family: "Chakra Petch";
  color: #fff;
  float: left;
  background-color: #2e9dbd;
  border-radius: 8px 0px 8px;
  padding-right: 15px;
  border-bottom: 4px solid #3468b6;
  margin-left: 6px;
  margin-top: 10px;
  margin-bottom: 21px;
  padding-top: 0px;
  padding-left: 10px;
}

.text-chart2 {
  font-size: calc(13px + 0.290625vw);
  font-family: "Chakra Petch";
  color: #ffffff;
  float: left;
  background-color: #2e9dbd;
  border-radius: 8px 0px 8px;
  /* font-style: italic; */
  padding-left: 15px;
  padding-right: 15px;
  border-bottom: 4px solid #6c757d;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 21px;
  padding-left: 20px;
}

.model-box {
  border: 1px solid #d5d7d9;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #dadada;
  background-color: #c8c8c61a;
  padding: 11px;
  margin: 10px;
  height: 350px;
}

.text-admin {
  color: #315466;
  font-family: "Source Sans Pro";
}

/* blink element */
.blink {
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.progress-bar {
  position: relative;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  height: 5px;
  margin-top: 6px;
  background-color: #3c8dbc;
  transition: width 0.6s ease;
}

/*TAMPIL DATA UPLOAD - DOWNLOAD RESPONSIVE */

@media screen and (max-width: 768px) {
  .box-before-upload {
    max-width: 75px;
    max-height: 54px;
  }

  .box-upload {
    max-width: 75px;
    max-height: 78px;
  }

  .box-isi {
    max-width: 40%;
    max-height: 42%;
    object-fit: cover;
    display: block;
    margin-top: -17px;
    padding-left: 9px;
    padding-top: -13px;
  }
  .image-view {
    max-width: 60px;
    max-height: 65px;
    margin-top: 6px;
  }
  .box-download {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .box-download-bottom {
    border: 0px solid rgb(7, 7, 7);
    max-width: 100%;
  }

  .col-sm-3 {
    position: relative;

    width: 25%;

    padding-right: 3.5px;

    padding-left: 0.5px;
  }
}

.box-before-upload {
  margin-top: 25px;
  background-color: transparent;
}

.tabel-isi-box {
  width: auto;
}
.box-upload {
  border: 2px solid rgb(255, 255, 255);
  background: #b8bebf;
  border-radius: 10px;
}
.box-isi {
  object-fit: cover;
  display: block;
  margin-top: -17px;
  padding-left: 15px;
  padding-top: -13px;
}

.image-view {
  width: 76px;
  height: 79px;
}

.box-download {
  border: 0px solid rgb(7, 7, 7);
  overflow-wrap: break-word;
}

.box-download-bottom {
  border: 0px solid rgb(7, 7, 7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #001f3f !important;
  background: #17a2b8;
  border-radius: 5px;
  width: 105px;
}

.box-break {
  width: 100px;
  height: 10px;
}

.btn-download {
  background-color: #414040;
  color: #f1f1f1;
}

.btn-download:hover {
  background-color: #ebebeb;
  color: #000000;
  border-bottom: 3px solid #cc1919;
}

.preview-document {
  position: relative;
  text-align: right;
  margin-top: -16px;
  z-index: 10;
}

.box-category {
  position: relative;
  top: -17px;
  border-radius: 10px 0px;
  margin-left: 0px;
  display: flex;
  font-size: 20px;
  color: #17a2b8;
}
.table-category {
  border: 0px solid #e70b0b;
  padding-left: 10px;
  width: auto;
  height: fit-content;
}

.category-isi {
  width: 65%;
  height: 65%;
  object-fit: cover;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px;
}

.top-elements {
  top: auto;
  display: block;
}

dt {
  font-weight: 700;
  font-family: "Rajdhani", sans-serif;
  color: #343a40;
  font-size: calc(16px + 0.390625vw);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  padding: 0.75rem 1.25rem;
  position: relative;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  z-index: 1;
}

.card-body-view-document {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
  background-image: url("assets/img/techno.png");
  background-image: url(../imgs/wallpaper.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.span-card {
  max-width: 48%;
  position: absolute;
  z-index: 0;
  text-align: right;
  /* margin-top: 190px; */
}

/* element for document list */

.CS-01 {
  font-size: calc(10px + 0.290625vw);
}

.btn-warning {
  color: #1f2d3d;
  background-color: #ffc107;
  border-color: #ffc107;
  box-shadow: none;
  margin-top: 0px;
}

.table-filter-container {
  text-align: right;
}

.submitter-group {
  padding-bottom: 20px;
}

.input-group-text {
  background-color: #f1c121;

  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;

  font-weight: 700;

  color: #000;

  width: 30%;

  display: flex;

  align-items: center;

  justify-content: center;
}

.input-group-text-2 {
  /* background-color: #dc3545; */
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-weight: 700;
  color: #000;
  width: 145px;

  /* height: 200px; */
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 4px solid #ffc107;
}

/* Search Box */
.category-dropdown {
  background-color: #ffffff;

  color: #000000;

  width: 100% !important;

  margin-left: 4px;

  cursor: pointer;

  height: 23px;

  line-height: 2px;

  /* padding-left: 4px; */
}

.category-dropdown-2 {
  border-bottom: 4px solid #ffc107;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  background-color: #f4f4f4;
  color: #000000;
  width: 161% !important;
  margin-left: 6px;
  /* text-align: center; */
  /* padding-left: 4px; */
}

.form-control-categories {
  display: block;
  width: 100%;
  height: calc(2.12rem + 2px);
  padding: 0.11rem 0.75rem;
  /* padding-left: 4px; */
  margin-top: 1px;
  border: 0px;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 7px;
  border-radius: 0.25rem;
  box-shadow: inset 1px 1px 2px #787474;
  padding-right: 11px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control-categories-2 {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.11rem 0.75rem;
  /* padding-left: 4px; */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 transparent;
  padding-right: 0px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control-new-document {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.11rem 0.75rem;
  /* padding-left: 4px; */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 transparent;
  padding-right: 0px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.on-search-table {
  font-family: "Dosis", sans-serif;

  font-size: calc(15px + 0.390625vw);

  color: #000;

  padding-top: -1px;
}

.on-search {
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  background-color: #28b6f8;
  border-bottom: 4px solid #6d6d6d;
  border-radius: 0.25rem 1rem;
  border-left: 4px solid #6d6d6d;
  border-top: 0px;
  border-right: 0px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-style: italic;
}

input[type="on-search"] {
  background-color: #f1c121;
  transition: background-color 0.8s ease;
  color: #000000;
  font-family: monospace;
}

input[type="on-search"]:focus {
  background-color: #ffffff;
  /* border: 0px; */
  outline: none;

  border-bottom: 4px solid #dc3545;
  border-radius: 0.25rem 1rem;
  border-left: 4px solid #dc3545;
  border-top: 0px;
  border-right: 0px;
}

/* Info Update Head */
@media screen and (min-width: 768px) {
  .popup {
    width: 35%;
    height: auto;
  }
}
.popup {
  position: fixed;
  bottom: 63px;
  right: 20px;

  border-radius: 20px;
  height: 88px;
  background-color: rgb(142 142 142 / 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  float: right;
}

.pop {
  box-sizing: border-box;
}
.popup img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}

.font-update {
  color: yellow;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-size: calc(18px + 0.390625vw);
}
.font-update2 {
  font-size: calc(12px + 0.290625vw);
}

.container-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 45px 45px;
  gap: 3px;
}
.item {
  /* background-color: #4CAF50; */
  color: #001f3f;
  padding: 14px;
}

/* ------------- info update foot ----- */

.marquee {
  direction: rtl;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.typewriter {
  overflow: hidden; /* Membuat teks tidak terlihat */
  border-right: 0.1em solid #dc3545; /* Membuat efek kursor */
  white-space: nowrap; /* Membuat teks tidak pindah ke baris baru */
  margin: 0 auto; /* Membuat teks berada di tengah */
  letter-spacing: 0.11em; /* Jarak antar huruf */
  animation: typing 3.5s steps(30, end), blink-caret 0.5s step-end infinite;
}

/* Animasi mengetik */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Animasi kursor */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #dc3545;
  }
}

@media screen and (max-width: 768px) {
  .image-share {
    /* margin: auto; */
    max-width: 400px;
    /* padding: 10px; */
    padding-top: 40px !important;
    padding-bottom: 44px !important;
    margin: 0 auto;
  }
}
/*share preview */

.image-share {
  margin: 0 auto;
  width: 500px;
  padding: 10px;
  /* display: flex; */
  /* flex-direction: inherit; */
}
.text-share-nn {
  font-family: sans-serif;
  /* display: flex; */
  /* flex-wrap: wrap; */
  text-align: center;
  color: #be9200;
  font-size: calc(14px + 0.290625vw);
  font-weight: 600;
}

.text-share-nto a {
  font-family: "Archivo Narrow", sans-serif;
  color: #be2c00;
  font-size: calc(17px + 0.290625vw);
  font-weight: 600;
}

.inner-2 {
  border: 0.05em solid transparent;
  display: flex;
  height: 53px;
  margin-top: 0px;
  flex-direction: row;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
}
.inner-1 {
  border: 0.05em solid transparent;
  display: flex;
  height: 55px;
  margin-top: -30px;
  flex-direction: row;
  justify-content: center;
}

.outer {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
}

.table-document-list {
  border: 2px solid #007bff;
  width: 100%;
  height: 167px;
}

.btn-view-user {
  /* border-radius: 12px; */
  border-width: 1px;
  border-radius: 15px !important;
  box-shadow: none;
  /* background-color: chocolate; */
}

.btn-datatables {
  background-color: #dee2e6;
  border-radius: 4px !important;
  border: 0px;
  color: #030303;
  height: 31px !important;
  width: 115px;
  font-size: 13px !important;
  padding: 5px;
  box-shadow: 1px 1px 5px 1px #acacac;
}

.btn-datatables:hover {
  color: #ffe710;
}

.btn-datatables:active {
  background-color: thistle;
}

.btn-datatables-single {
  background-color: #dee2e6;
  border-radius: 4px !important;
  border: 0px;
  color: #030303;
  height: 31px !important;
  width: 115px;
  font-size: 13px !important;
  padding: 5px;
  box-shadow: 1px 1px 5px 1px #acacac;
}

/* carding for search button new */

div.dt-button-collection div.dropdown-menu {
  display: block;
  z-index: 2002;
  width: auto;
}

.box-search {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-grow: revert; */
  background: #9d9d9d17;
  /* background-color: #51788c; */
  height: auto;
  box-shadow: 1px 2px 4px 0px #6c757d;
  padding-top: 15px;
  padding-bottom: 15px;
  backdrop-filter: blur(10px);
  /* position: fixed; */
}
.row-search {
  width: calc(100% / 3);
  margin: 5px;
  height: 45px;
}

.row-search:nth-child(1) {
  width: 240px;
  padding-top: 8px;
}
.row-search:nth-child(2) {
  width: 317px;
  padding-top: 5px;
}
.row-search:nth-child(3) {
  width: 87px; /* flex-wrap: wrap; */
  margin-top: 5px;
  margin-left: 10px;
  padding-top: -8px;
}

/* end carding button search new */

.card-info.card-outline {
  border-top: 0px solid #a0a0a0 !important;
}

.card-header-viewdocument {
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  padding: 0.75rem 1.25rem;
  position: relative;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  z-index: 1;
  border-top: 0px solid #a0a0a0 !important;
}

.elevation-4 {
  box-shadow: 0px 0px 5px 0px #000 !important;
}

/* gambar avatar di sidebar */
.box-image-preline {
  display: contents;
  position: fixed;
  max-height: 60px; /* background: antiquewhite; */
  z-index: 100;
}

.body-text {
  display: flex;
  flex-direction: column;
}

.pre-line-box {
  margin-left: 13px !important;
  width: 224px;
  height: 120px;
  position: fixed;
  overflow: hidden;
  background: #c9caca;
  border-radius: 0px 0px 12px 12px;
  z-index: 1000;
  box-shadow: 0px 2px 2px 1px #767778;
  transition: margin-left 0.3s linear, opacity 0.3s ease, v;
  background-size: cover;
}

.layout-navbar-fixed .wrapper .brand-link .pre-line-box {
  overflow: hidden;
  position: fixed;
  top: -6px;
  transition: width 0.3s ease-in-out;
  width: 223px;
  z-index: 1035;
}

.layout-navbar-fixed.layout-fixed .wrapper .sidebar {
  margin-top: calc(3.5rem + 1px);
}

.layout-navbar-fixed .wrapper .brand-link {
  overflow: hidden;
  position: fixed;
  top: 0;
  transition: width 0.3s ease-in-out;
  width: 250px;
  z-index: 1;
}

/*from view-document.php */

.carding-view-document {
  position: relative;
  display: flex;
  grid-gap: 0.9rem;
  height: 160px;
  word-wrap: break-word;
  background: linear-gradient(to right, #2c303394 0%, #0000 100%);
  border-right: 1px solid #2c303394;
  border-radius: 0.35rem;
  padding: 1.25rem;
  /* box-shadow: 1px -2px 6px 2px #6c757d; */
  margin-bottom: 10px;
}

.content-board-image-view-document {
  display: grid;
  width: 124px;
  place-items: center;
  margin-left: 0px;
  height: 80px;
  padding-top: 16px;
}
.content-board-isi-view-document {
  display: grid;
  text-align: left;
  height: 80px;
  padding-top: 18px;
}

.image-body-view-document {
  display: flex;
  border: 2px solid #2f70b6;
  border-radius: 20px;
  width: 95px;
  height: 95px;
  transform: rotate(-45deg) !important;
  background: #17a2b8;
  background-size: cover;
}

/* Screen larger than 600px? 2 column */
@media (max-width: 450px) {
  .box-category {
    margin-left: -20px;
  }

  .carding-view-document {
    height: 232px;
    position: relative;
    display: flow;
    padding-top: 30px;
  }
  .content-board-isi-view-document {
    grid-template-columns: repeat(1, 320px);
    margin-top: 45px;
    height: auto;
    padding-top: 2px;
  }

  .bg-gray-dark-generate {
    width: 224px;
    margin-left: 0px !important;
  }

  .button-share-generate {
    width: 90px !important;
    margin-right: 20px;
  }

  .text-box-generate {
    padding-right: 20px;
  }

  .bg-gradient-generate {
    width: 90px !important;
    margin-right: 20px;
  }
}

.background-image-picture-view-document {
  transform: rotate(45deg);
  background: #6c757d;
  border-radius: 23px;
  width: 95px;
  height: 95px;
  /* display: flex; */
  justify-content: center;
  display: flex;
  box-shadow: 0px 0px 5px #343435;
}

/* popup generate */

.generate {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.generate:hover {
  background-color: #3e8e41;
}

.generate:active {
  background-color: #3e8e41;
}

.popup-generate {
  width: 320px;
  position: absolute;
  top: calc(50% - (160px / 2));
  left: calc(50% - (160px / 2));
  border-radius: 5px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
}

.close {
  border-radius: 0%;
  text-align: center;
  line-height: 20px;
}

/*box generate code */
.box-generate {
  position: relative;
  display: grid;
  grid-gap: 0.3rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
    rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  background: #ffffff;
  padding: 11px;
  margin-bottom: 10px;
  border-radius: 6px;
}

.box-generate-content {
  display: flex;
  align-items: flex-start;
  text-align: end;
  justify-content: end;
  justify-items: center;
}

.box-generate-content2 {
  display: flex;
  align-items: flex-start;
  text-align: end;
  justify-content: end;
  justify-items: center;
}

.button-share-generate {
  width: 113px;
  margin-top: 1px;
  margin-left: 11px;
  padding-left: 10px;
  padding: 6px;
  height: 37px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  background-color: #d03746;
  border-radius: 5px;
  border: 0px;
  font-size: calc(12px + 0.30625vw);
}
.button-share-generate:hover {
  background-color: #daba1b;
}

.box-generate-content select {
  display: block;
  width: 225px;
  height: calc(2.23rem + 2px);
  padding: 0.11rem 0.75rem;
  /* padding-left: 4px; */
  margin-top: 1px;
  border: 0px;
  font-size: calc(12px + 0.390625vw);
  font-weight: 400;
  line-height: 7px;
  border-radius: 6px;
  box-shadow: inset 1px 1px 2px #787474;
  padding-right: 11px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background: #d5d5d5;
}

.bg-gray-dark-generate {
  background-color: #343a40 !important;
  color: white;
  margin-top: 7px;
  border-radius: 5px;
  height: 37px;
  padding: 6px;
  font-size: calc(12px + 0.390625vw);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.bg-gradient-generate {
  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x !important;
  color: #fff;
  /* margin-left: 11px; */
  margin-left: 0px;
  margin-top: 7px;

  width: 113px;
  font-size: calc(10px + 0.30625vw);
  height: 37px;
}
.text-box-generate {
  color: #0d8597;
  font-size: calc(13px + 0.390625vw);
  text-align: right;
  font-weight: 600;
  font-family: "Dosis", sans-serif;
  padding-bottom: 13px;
}

input[type="text-document"] {
  padding: 5px 10px;
  height: 40px;
  margin: 5px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  box-shadow: rgba(0, 0, 0, 0.498039) 2px 5px 5px;
}

/* new css for correspondence */
@media screen and (max-width: 768px) {
  input[type="text-correspondence"] {
    max-width: 100%;
  }

  .category-correspondence {
    max-width: 100%;
  }

  .date-signature {
    max-width: 100%;
  }

  .callout-signature {
    max-width: 100%;
  }
}

input[type="text-correspondence"] {
  padding: 5px 10px;
  width: 420px;
  margin: 5px 0;
  display: inline-block;
  border: 0px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  box-shadow: #3c8dbc 2px 1px 1px;
}

.category-correspondence {
  padding: 5px 10px;
  margin: 5px 0;
  width: 420px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border: 0px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  box-shadow: #3c8dbc 2px 1px 1px;
  height: 40px;
  background-color: transparent;
}

.date-signature {
  padding: 5px 10px;
  margin: 5px 0;
  width: 420px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border: 1px solid #ccc;
  border-radius: 5px;
  height: 40px;
}

.callout-signature {
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  background-color: #fff;
  border-left: 5px solid #001f3f;
  margin-bottom: 1rem;
  padding: 1rem;
  width: 420px;
}

.main-footer {
  padding: 2px 30px 4px 20px;
  font-size: calc(11px + 0.190625vw);
  border-top: 0px;
  width: 100%;
  background: #3f51b5 linear-gradient(45deg, #343a40, transparent);
  border-radius: 10px 10px 0px 0px;
  z-index: 9999 !important;
  position: fixed;
  bottom: 0;
  margin-left: 0px !important;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: auto;
  overflow: hidden;
  outline: 0;
  background: #343a400f;
  margin-top: 50px;
  bottom: 50px !important;
}

/*custom alert for attendance */
.custom-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f8d7da;
  color: #721c24;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

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

.close-button {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

.close-button:hover {
  color: #721c24;
}
/*end custom alert*/

.camera-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

#video {
  width: 310px;
  position: relative;
  display: block;
  left: 0px;
  border-radius: 5px;
  top: auto;
  border: 2px solid #f8f9fa;
  padding: 5px;
}

#capture-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#canvas {
  display: none;
}