@charset "UTF-8";

.form-control::-moz-placeholder {
  color: #cccccc;
}

.form-control:-ms-input-placeholder {
  color: #cccccc;
}

.form-control::placeholder {
  color: #cccccc;
}

.app-env-area,
.app-env-area--staging,
.app-env-area--testing,
.app-env-area--local {
  border: 1px solid;
  border-radius: 25px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 2px 10px 2px 10px;
  font-weight: bold;
  font-size: 18px;
}

.app-env-area--local {
  background-color: #addeff;
  color: #ff0000;
}

.app-env-area--testing {
  background-color: #73faa0;
  color: #ff0000;
}

.app-env-area--staging {
  background-color: #fff384;
  color: #ff0000;
}

.table-hover-green thead tr {
  background: linear-gradient(0deg, #24292e, #696767);
  color: #f8f9fa;
}

.table-hover-green thead tr th {
  border: solid 1px #6b6a6a;
}

.table-hover-green tbody tr:hover th,
.table-hover-green tbody tr:hover td {
  background-color: rgba(0, 255, 38, 0.165);
}

.table-hover-green tbody tr:hover .btn-row-edit {
  display: block;
}

.table-striped-dark tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.059);
}

.bg--dark-gray {
  background-color: #24292e !important;
}

.bg--dark-navy {
  background-color: #3e435a !important;
}

.bg--dark-red {
  background-color: #cc0000 !important;
}

.bg--dark-blue {
  background-color: #3d41ff !important;
}

.bg--light-red {
  background-color: #ff4f4f !important;
}

.bg--light-blue {
  background-color: #223EE6 !important;
}

.bg--super-light-blue {
  background-color: #e6f1fc !important;
}

.bg--super-light-yellow {
  background-color: #fffecf !important;
}

.bg--light-gray {
  background-color: #c4c4c4 !important;
}

.bg--super-light-gray {
  background-color: #dcdcdc !important;
}

.bg--blue {
  background-color: #0050E2 !important;
}

.bg-suc {
  background-color: #e0ffd1 !important;
}

.bg-err {
  background-color: #ffd1d1 !important;
}

.bg--none {
  background: none !important;
}

.th-fix--80 {
  width: 80px;
}

.th-fix--90 {
  width: 90px;
}

.th-fix--100 {
  width: 100px;
}

.th-fix--150 {
  width: 150px;
}

.th-fix--200 {
  width: 200px;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.pt-6 {
  padding-top: 3.5rem !important;
}

.pt-7 {
  padding-top: 4rem !important;
}

.pt-8 {
  padding-top: 4.5rem !important;
}

.pt-9 {
  padding-top: 5rem !important;
}

.pt-10 {
  padding-top: 5.5rem !important;
}

.pt-px-8 {
  padding-top: 8px !important;
}

.z-1000 {
  z-index: 1000;
}

.z-1010 {
  z-index: 1010;
}

.z-1020 {
  z-index: 1020;
}

.z-1030 {
  z-index: 1030;
}

.z-9995 {
  z-index: 9995;
}

.z-9996 {
  z-index: 9996;
}

.z-9997 {
  z-index: 9997;
}

.z-9998 {
  z-index: 9998;
}

.z-9999 {
  z-index: 9999;
}

.h-30p {
  height: 30px;
}

.h-95 {
  height: 95%;
}

.font-80 {
  font-size: 80%;
}

.cursor--pointer {
  cursor: pointer;
}

.msg__area {
  position: fixed;
  margin: auto;
  width: 100%;
  z-index: 2;
}

.msg__box {
  border-radius: 5px;
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 14px;
  width: 90%;
  margin: auto;
  -webkit-animation: SlideIn 0.7s;
          animation: SlideIn 0.7s;
}

.msg__box--title {
  font-size: 16px;
}

.msg__box--info {
  background-color: rgba(214, 233, 249, 0.863);
  border: solid 1px #cce7fd;
  color: #0707dd;
}

.msg__box--success {
  background-color: rgba(217, 248, 230, 0.863);
  border: solid 1px #c1fdda;
  color: #14a800;
}

.msg__box--warning {
  background-color: rgba(255, 250, 204, 0.863);
  border: solid 1px #fff59a;
  color: #f01d1d;
}

.msg__box--danger {
  background-color: rgba(247, 198, 197, 0.863);
  border: solid 1px #fdbebd;
  color: #f01d1d;
}

@-webkit-keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-title__text {
  font-size: 19px;
  font-weight: bold;
  text-align: left;
}

.modal-detail__text {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}

.btn {
  transition: 0.3s;
}

.btn--radius {
  border-radius: 25px;
}

.btn-light-red {
  color: #fff;
  background-color: #fd5959;
  border-color: #fc4f4f;
  font-weight: bold;
}

.btn-light-red:hover {
  color: #fff;
  background-color: #df3939;
  border-color: #b63131;
}

.btn-dark-blue {
  background-color: #0050E2;
}

.btn-dark-blue:hover {
  background-color: #0242b9;
}

.btn-dark-red {
  background-color: #cc0000;
}

.btn-dark-red:hover {
  background-color: #af0000;
}

.btn-light-gray {
  font-weight: bold;
  color: #000000;
  background-color: #dddddd;
  border-color: #c2c2c2;
}

.btn-light-gray:hover {
  color: #000000;
  background-color: #c4c4c4;
  border-color: #acacac;
}

.btn-row-edit {
  border-radius: 15px;
  content: "\F303";
  display: none;
}

.btn-row-edit:hover {
  display: block;
}

.content-btn {
  border-radius: 0 3px 3px 0 !important;
}

.content-btn--cyan {
  background-color: #d5e8f8;
  cursor: pointer;
}

.content-btn--cyan:hover {
  background-color: #c8e6ff;
}

.content-btn--gray {
  background-color: #e9e9e9;
  cursor: pointer;
}

.content-btn--gray:hover {
  background-color: #dfdfdf;
}

.accordion-box,
.accordion-box--blue {
  display: block;
  display: inline-block;
  background-color: #eee;
  border-bottom: 1px solid #acac;
}

.accordion-box--blue {
  border-bottom: 1px solid #badaf5;
}

.accordion-panel,
.accordion-panel--blue {
  background-color: white;
  padding: 20px 20px;
  display: none;
  border-left: 1px solid #acac;
  border-right: 1px solid #acac;
}

.accordion-panel--blue {
  border-left: 1px solid #badaf5;
  border-right: 1px solid #badaf5;
}

.accordion-btn,
.accordion-btn--blue {
  display: block;
  flex-grow: 1;
  width: 100%;
  padding: 5px;
  outline: none;
  border: 1px solid #acac;
  cursor: pointer;
  text-align: left;
  color: #505050;
  background-color: rgba(0, 255, 38, 0.165);
}

.accordion-btn:hover,
.accordion-btn--blue:hover {
  background-color: rgba(0, 255, 38, 0.267);
}

.accordion-btn--blue {
  border: 1px solid #badaf5;
  background-color: #d5e8f8;
}

.accordion-btn--blue:hover {
  background-color: #bee0fc;
}

.text--required {
  color: #0707dd;
}

.toggle-btn {
  width: 60px;
  height: 29px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAmUlEQVQ4T6WT0RWDMAhFeZs4ipu0mawZpaO4yevBc6hUIWLNd+4NeQDk5sE/PMkZwFvZywKSTxF5iUgH0C4JHGyF97IggFVSqyCFga0CvQSg70Mdwd8QSSr4sGBMcgavAgdvwQCtApvA2uKr1x7Pu++06ItrF5LXPB/CP4M0kKTwYRIDyRAOR9lJTuF0F0hOAJbKopVHOZN9ACS0UgowIx8ZAAAAAElFTkSuQmCC") no-repeat 35px center #2ecc71;
  cursor: pointer;
  transition: background-color 0.4s ease-in-out;
  cursor: pointer;
}

.toggle-btn.active {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyklEQVQ4T42TaxHCQAyENw5wAhLACVUAUkABOCkSwEkdhNmbpHNckzv689L98toIAKjqGcAFwElEFr5ln6ruAMwA7iLyFBM/TPDuQSrxwf6fCKBoX2UMIYGYkg8BLOnVg2RiAEexGaQQq4w9e9klcxGLLAUwgDAcihlYAR1IvZA1sz/+AAaQjXhTQQVoe2Yo3E7UQiT2ijeQdojRtClOfVKvMVyVpU594kZK9zzySWTlcNqZY9tjCsUds00+A57z1e35xzlzJjee8xf0HYp+cOZQUQAAAABJRU5ErkJggg==") no-repeat 10px center #e74c3c;
}

.toggle-btn.active .round-btn {
  left: 33px;
}

.toggle-btn .round-btn {
  width: 25px;
  height: 25px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 2px;
  top: 58%;
  margin-top: -15px;
  transition: all 0.3s ease-in-out;
}

.toggle-btn .cb-value {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 9;
  cursor: pointer;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.made-with-love {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 10px;
  text-align: center;
  font-size: 10px;
  z-index: 9999;
  font-family: arial;
  color: #fff;
}

.made-with-love i {
  font-style: normal;
  color: #F50057;
  font-size: 14px;
  position: relative;
  top: 2px;
}

.made-with-love a {
  color: #fff;
  text-decoration: none;
}

.made-with-love a:hover {
  text-decoration: underline;
}

.modal__err {
  font-size: 14px;
  font-weight: normal;
  color: #ff0000;
}

.modal__war {
  font-size: 14px;
  font-weight: normal;
  color: #eec927;
}

.modal-text__title {
  font-size: 19px;
  font-weight: bold;
  text-align: left;
}

.modal-text__detail {
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

.modal-company-search__list {
  overflow-y: scroll;
  height: 200px;
}

.stamp-status--stamp {
  color: #212529;
  border: solid 1px #6c757d !important;
}

.stamp-status--requested {
  color: #ffffff;
  background-color: #3e8be2 !important;
}

.stamp-status--approval {
  color: #ffffff;
  background-color: #343a40 !important;
}

.stamp-status--close {
  color: #343a40;
  background-color: #b5b5b5 !important;
}

.stamp-status--cancel {
  color: #343a40;
  background-color: #ffed4a !important;
}

.stamp-status--remand {
  color: #343a40;
  background-color: #ffed4a !important;
}

.stamp-status--err {
  color: #ffffff;
  background-color: #e3342f !important;
}

.search {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: auto;
  background: #ffffff;
  border: solid 1px #6c757d;
  border-radius: 5px;
}

.search-container {
  width: 100%;
  height: auto;
}

.search-container-box {
  display: flex;
  width: 100%;
  background: #a3a3a3;
  outline: 0px;
  border: 0px;
  transition: 0.3s;
}

.search-container-box > select {
  width: 100%;
  outline: none;
  border: none;
  border-radius: 0;
  border-right: solid 1px #999999;
  box-shadow: none !important;
}

.search-container-box > input#selectMonth {
  width: 100%;
  height: auto;
  background: #ffffff;
  outline: 0px;
  border: 0px;
  border-right: solid 1px #999999;
}

.search-container-box > input#selectMonth:hover {
  background: #e6f4ff;
}

.search-btn {
  border: 0px;
  outline: 0px;
  font-weight: bold;
  color: #ffffff;
  background: #3490dc;
  padding: 3px 10px;
}

.search-btn:hover {
  background: #2e83c9;
}

.border--none {
  border: none !important;
}

input[type=date].custom-shadow-dom,
input[type=month].custom-shadow-dom {
  position: relative;
}

input[type=date].custom-shadow-dom::-webkit-datetime-edit,
input[type=month].custom-shadow-dom::-webkit-datetime-edit {
  text-align: center;
  font-weight: bold;
}

input[type=date].custom-shadow-dom::-webkit-calendar-picker-indicator,
input[type=month].custom-shadow-dom::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  top: 0;
  left: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}