/************ Root ************/
@font-face {
  font-family: 'aktiv-medium';
  src: url('../fonts/aktiv-grotesk/aktiv-grotesk-medium.woff2');
}

@font-face {
  font-family: 'hiragino-regular';
  src: url('../fonts/aktiv-grotesk/aktiv-grotesk-regular.woff2');
}

:root {
  --header-height: 5rem;
  --nav-width: 60px;
  --primary-color: #5653e5;
  --first-color-light: #AFA5D9;
  --white-color: #F7F6FB;
  --body-font: 'Nunito', sans-serif;
  --font-size-15: 0.9375rem;
  --font-size-14: 0.875rem;
  --z-fixed: 100;
  --bg-primary: #F1F3F7;
  --icon-normal-color: #1A1926;
  --icon-focus-color: #5653e5;
  --sidebar-width: 300px;
  --text-dark-color: rgb(25, 24, 37);
  --font-hiragino-w3: 'Hiragino Kaku Gothic ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro';
  --font-hiragino-w6: 'Hiragino Kaku Gothic ProN W6', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro';
  --font-aktiv-medium: 'aktiv-medium';
  --font-aktiv-regular: 'aktiv-regular';
  --color-gray-300: #E8EAED;
  --color-gray-100: #F5F7FA;
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--bg-primary);
  font-family: var(--font-hiragino-w3);
  font-size: 0.9375rem;
}

i {
  color: var(--icon-normal-color);
}

header {
  height: var(--header-height);
  background-color: var(--bg-primary);
  position: sticky;
  top: 0;
  z-index: 101;
}

header i {
  font-size: 2rem;
}

footer {
  height: 50px;
}

.font-14 {
  font-size: 14px;
}

.text-bold {
  font-weight: bold;
}

/************ Datepicker ************/
.datepicker {
  padding: 16px;
  font-family: var(--font-hiragino-w3);
  border-radius: 16px;
  border: 1px solid var(--bg-primary);
  box-shadow: -1px 9px 14px 2px rgba(0,0,0,0.3);
  -webkit-box-shadow: -1px 9px 14px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: -1px 9px 14px 2px rgba(0,0,0,0.3);
}

.datepicker::before {
  display: none;
}

.datepicker::after {
  display: none;
}

.datepicker table tr td {
  width: 36px;
  height: 36px;
}

.datepicker table tbody {
  font-size: 14px;
  color: #28263B;
}

.datepicker table thead .datepicker-switch {
  font-size: 18px;
  font-family: var(--font-hiragino-w6);
}

.datepicker table thead tr:last-child {
  font-size: 14px;
  color: #637085;
  height: 40px;
}

.datepicker .active {
  background-color: var(--primary-color)!important;
  color: #ffffff!important;
}

.input-datepicker {
  width: 140px;
  padding-left: 30px;
}

.input-datepicker ~ i {
  position: absolute;
  top: 19%;
  left: 10px;
}

/************ TimePicker ************/
.time-picker {
  width: 140px;
}

.time-picker input {
  width: inherit;
}

.time-picker ul {
  min-width: 140px;
  width: 140px;
}

.time-picker ul > div {
  padding: 14px;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-color: var(--bg-primary);
  scrollbar-width: thin;
  text-align: center;
}

.time-picker li {
  line-height: 38px;
  border-radius: 10px;
  cursor: pointer;
  margin: 1px 0;
  font-size: var(--font-size-15);
}

.time-picker li:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

.time-picker .clock-icon {
  top: 21%;
  left: 10px;
}

.time-picker input {
  padding-left: 30px;
  width: inherit;
}

.time-picker div {
  width: inherit;
}

.time-picker .dropdown-toggle::after {
  display: none!important;
}

.time-picker .dropdown-menu {
  margin: 10px 0!important;
  box-shadow: -1px 9px 14px 2px rgba(0,0,0,0.3);
  -webkit-box-shadow: -1px 9px 14px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: -1px 9px 14px 2px rgba(0,0,0,0.3);
  border-radius: 14px;
}

.time-picker ul li.active {
  background-color: var(--primary-color);
  color: #ffffff;
}

/************ Summernote Editor ************/
.note-editor {
  border-radius: 14px;
  font-family: var(--font-hiragino-w3)!important;
}

.note-editor .note-toolbar {
  border-radius: 14px 14px 0px 0px;
  background-color: #ffffff;
  padding: 0 0 5px 7px;
}

.note-editor.note-frame .note-statusbar {
  background-color: #ffffff;
  border-radius: 0 0 14px 14px;
  border-top: 1px solid #dee2e6;;
}

.note-editor.note-frame .note-statusbar .note-resizebar {
  height: 11px;
  padding-top: 2px;
}

.note-editor.note-airframe, .note-editor.note-frame {
  border: 1px solid #dee2e6;
}

.checkbox.sn-checkbox-open-in-new-window,
.checkbox.sn-checkbox-use-protocol {
  display: none;
}

.note-editor .note-modal-footer {
  padding-top: 0;
  padding-right: 30px;
}

/************ Datatable ************/
div.dt-container .dt-search input {
  width: 210px!important;
}

/************ Summernote Editor ************/
.ss-main {
  height: 40px;
  border-radius: 10px;
  border: 1px solid #E3E5E8;
  font-family: var(--font-hiragino-w3);
  font-size: var(--font-size-15);
  padding: .375rem 0.475rem .375rem .75rem;
  font-weight: 400;
  line-height: 1.5;
}

.ss-content .ss-list .ss-option {
  padding: .375rem 0.475rem .375rem .75rem;
}

/************ Element ************/
.btn-bg-primary {
  background-color: var(--primary-color);
  color: #ffffff;
}

.btn-bg-primary:hover {
  color: #fff;
  background-color: var(--primary-color);
  opacity: 0.8;
}

.avatar {
  width: 40px;
  height: 40px;
  border: 1px solid red;
  border-radius: 50%!important;
}

.main-left {
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  position: sticky;
  top: var(--header-height);
}

.main-right {
  width: 100vw;
}

.menu-icon:hover {
  background-color: #d4d4d9;
}

#sidebar a {
  text-decoration: none;
}

#sidebar .menu,
#sidebar .submenu {
  text-decoration: none;
  color: var(--text-dark-color);
  padding: 0.8rem 0.8rem;
  border-radius: 1rem;
  font-size: 15px;
  cursor: pointer;
}

#sidebar .menu:focus,
#sidebar .menu:hover,
#sidebar .submenu:hover {
  color: rgb(84, 82, 229);
  background-color: #e0e1f5;
}

#sidebar .submenu {
  margin-left: 1.5rem;
}

.menu.active,
.submenu.active {
  color: rgb(84, 82, 229)!important;
  background-color: #e0e1f5;
}

.breadcrumb {
  height: 55px;
  position: sticky;
  top: var(--header-height);
  font-size: var(--font-size-15);
  background-color: var(--bg-primary);
  z-index: 100;
}

.breadcrumb a {
  text-decoration: none;
  color: var(--primary-color)
}

.page-content {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 30px -18px #040f151a;
}

.subtab a {
  color: #000000!important;
  font-size: var(--font-size-15);
}

.subtab a.active {
  color: var(--primary-color)!important;
}

label.required::after {
  content: '*';
  color: red;
  margin-left: 4px;
}

.font-hiragino-w6 {
  font-family: var(--font-hiragino-w6);
}

.btn-cs-style {
  border-radius: 14px;
  padding: 9px 16px;
}

.btn-out-primary {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.btn-out-primary:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

.btn-bg-gray {
  background-color: var(--color-gray-300);
}

.btn-bg-gray:hover {
  background-color: var(--color-gray-300);
  opacity: 0.8;
}

.hide {
  display: none!important;
}

.form-control {
  font-size: var(--font-size-15);
}

.form-check-input:checked {
  background-color: var(--primary-color);
}

.left-box-datatable {
  display: inline-block;
  bottom: -40px;
  position: absolute;
  z-index: 1;
}

.right-box-datatable {
  position: absolute;
  right: 222px;
  bottom: -40px;
  z-index: 1;
}

div.dt-container .dt-search input {
  padding:8px 8px 8px 34px;
  background: url('../icon/search.svg') no-repeat;
  background-position: 10px;
  border: 1px solid #E3E5E8;
  border-radius: 10px;
  font-family: var(--font-hiragino-w3);
}

div.dt-container .dt-search input::placeholder {
  color: #E3E5E8;
}

div.dt-container .dt-search input:focus-visible {
  outline: none;
  border-color: var(--primary-color);
}

.width-220 {
  width: 220px;
}

.form-select {
  height: 40px;
  border-radius: 10px;
  border: 1px solid #E3E5E8;
  font-family: var(--font-hiragino-w3);
  font-size: var(--font-size-15);
}

table.dataTable thead {
  background-color: var(--color-gray-100)!important;
  box-shadow: none!important;
  font-family: var(--font-hiragino-w6);
  font-size: var(--font-size-15);
  color: #637085;
  height: 44px;
}

table.dataTable tbody {
  font-family: var(--font-hiragino-w3);
}

table.dataTable thead th,
table.dataTable tbody td {
  border-bottom: 1px solid var(--bg-primary)!important;
}

table.dataTable thead th:hover {
  outline: none!important;
}

table.dataTable tbody tr td {
  /* background-color: #ffffff!important; */
  box-shadow: none!important;
  height: 56px;
}

table.dataTable tbody tr:hover {
  background-color: rgba(245, 247, 250, 0.5)!important;
}

.badge-custom {
  padding: 6px 20px;
  border-radius: 14px;
}

.badge-custom-sm {
  padding: 2px 8px;
  border-radius: 14px;
  font-size: 13px;
}

.nowrap {
  white-space: nowrap;
}

.badge-green {
  background-color:rgba(21, 206, 183, 0.1);
  color: #15CEB7;
}

.badge-secondary {
  background-color:rgba(99, 112, 133, 0.1);
  color: #637085;
}

.badge-yellow {
  background-color:rgba(252, 212, 66, 0.2);
  color: #FFA805;
}

.badge-blue {
  background-color:rgba(9, 100, 247, 0.13);
  color: #241E65;
}

.badge-red {
  background-color:rgba(247, 9, 9, 0.13);
  color: #f9082c;
}

.dt-container div.dt-layout-cell.dt-start {
  padding: 0!important;
}

div.dt-container .dt-paging .dt-paging-button {
  border: none!important;
}

div.dt-container .dt-paging .dt-paging-button.first,
div.dt-container .dt-paging .dt-paging-button.last {
  display: none!important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover,
div.dt-container .dt-paging .dt-paging-button:not(.disabled, .previous, .next):hover {
  background-color: var(--primary-color)!important;
  background-image: none !important;
  border: none!important;
  border-radius: 14px;
  color: #ffffff!important;
}

div.dt-container .dt-paging .dt-paging-button.previous:hover,
div.dt-container .dt-paging .dt-paging-button.next:hover {
  background-color: none!important;
  background-image: none !important;
  border: none!important;
}

div.dt-container .table-header,
div.dt-container .table-footer {
  margin: 20px 0;
}

.datatable-length-menu {
  height: 40px;
  border: none;
  font-size: var(--font-size-15);
  font-family: var(--font-hiragino-w3);
  border-left: 1px solid var(--bg-primary);
}

.datatable-length-menu:focus-visible {
  outline: none;
}

.btn-create-notice {
  font-size: var(--font-size-14);
  font-family: var(--font-hiragino-w3);
  border-radius: 10px;
  line-height: 25px;
}

.btn-create-notice i {
  color: #ffffff!important;
  font-size: var(--font-size-15);
}

.toast i {
  color: #ffffff!important;
}

.inactive {
  pointer-events: none;
  /* background-color: var(--primary-color);
  opacity: 0.8; */
}

.inactive:hover {
  cursor: no-drop;
}

.btn-action {
  padding: 0 0.25rem!important;
}

table tbody tr:hover .td-action {
  display: block!important;
}

.text-cs-primary {
  color: var(--primary-color)!important;
}

.modal-header-custom {
  border: none!important;
  font-family: var(--font-hiragino-w6);
}

.modal-footer-custom {
  margin-bottom: 20px;
}

.btn-delete {
  background-color: #FF7193;
  color: #ffffff;
  font-size: 15px;
  font-family: var(--font-hiragino-w3);
}

.btn-delete:hover {
  background-color: #f987a2;
  color: #ffffff;
}

.btn-cancel {
  background-color: #E8EAED;
  color: #000000;
  font-size: 15px;
  font-family: var(--font-hiragino-w3);
}

.btn-cancel:hover {
  background-color: #dbdcdd;
  color: #000000;
}

.btn-test-notice {
  background-color: green;
  color: #ffffff;
  font-size: 15px;
  font-family: var(--font-hiragino-w3);
}

.btn-test-notice:hover {
  background-color: rgb(5, 167, 5);
  color: #ffffff;
}

.main-left.small {
  width: 90px!important;
  text-align: center;
}

.main-left.small .menu-text {
  display: none!important;
}

.menu-popup {
  z-index: 101;
  padding: 10px;
  border-radius: 12px;
  display:none;
  box-shadow: 0px 0px 24px 8px rgba(0,0,0,0.1);
  background: var(--bg-primary);
  position: fixed;
  width: fit-content;
}

.menu-popup a {
  text-decoration: none;
  padding: 10px;
  border-radius: 12px;
  color: #000000;
}

.menu-popup a:hover,
.menu-popup .active {
  background-color: #e0e1f5!important;
  color: rgb(84, 82, 229)!important;
}

.hidden {
  visibility: hidden;
}

li.disabled {
  color: #dddddd;
  pointer-events: none;
}

.note-modal-footer {
  margin-bottom: 15px;
}

.dt-scroll-body thead tr {
  visibility: collapse;
}

div.dt-container.dt-empty-footer .dt-scroll-body {
  border: none;
}

.cs-invalid {
  border-color: var(--bs-form-invalid-border-color)!important;
  padding-right: calc(1.5em + .75rem)!important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e")!important;
  background-repeat: no-repeat!important;
  background-position: right calc(.375em + .1875rem) center!important;
  background-size: calc(.75em + .375rem) calc(.75em + .375rem)!important;
}