html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, em, strong, img, q, dl, dt, dd, ol, ul, li, form, fieldset, legend, label, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    list-style: none;
}
body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 12px;
    word-break: break-all;
    line-height: 1.6;
    color: #333;
    font-weight: normal;
    position: relative;
}

#area_table_block {
    position: absolute;
    top: auto;
    height: calc(100% - 189px);
    overflow: scroll;
    right: 0;
    left: 0;
    background:#fff;
}

#reservation_studio_block {
    position: absolute;
    top: auto;
    height: calc(100% - 189px);
    overflow: scroll;
    right: 0;
    left: 0;
    background:#fff;
}

#reservation_studio_block table.table-list{
    margin-top: 0px;
}

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
}
form {
    display: inline;
}
select, input, textarea {
    padding: var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: rgb(249, 249, 249);
    max-width: calc(100% - 20px);
}
#bg.is_min #menu {
    width: 32px;
}
.max_disabled {
    display: none;
    margin-left: 4px;
}
#bg.is_min .min_disabled {
    display: none;
}
#bg.is_min .max_disabled {
    display: inline;
}
#bg.is_min a.max_disabled {
    margin-left: 0px;
}
#bg.is_min a.max_disabled img.site_logo{
    width: 32px;
    height: auto;
    margin: 0;
}



#bg.is_min div.contents {
    left: 34px;
    width: calc(100% - 34px);
}
#bg.is_min span.primary_color {
    color:var(--primary-color);
}

td:has(input, select, textarea) {
  user-select: none;          /* 親配下のテキスト選択禁止 */
  -webkit-user-select: none;
}
div.main {
    height: 100%;
}
.auto_width {
    width: 100%;
    overflow: auto;
}
.center {
    text-align: center;
}
.display_none {
    display: none;
}
.relative {
    position: relative;
}
.message_area {
  padding: 100px;
  text-align: center;
  font-size: 18px;
}

.result_message {
  color: var(--accent-color);
  font-weight: 700;
}

.error_message {
  color: var(--error-color);
  font-weight: 700;
  margin-top: 10px;
}

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
}

.auth-box {
    max-width: 600px;
    width: 100%;
    padding: var(--space-3xl);
    background: var(--container-background-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.f12 {
    font-size: 12px;
}

.right {
    text-align: right;
}

.input-container {
    display: flex
;
    flex-direction: column;
    gap: var(--space-sm);
}

.font-weight-bold {
    font-weight: var(--font-weight-bold);
}
label {
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
}
div.hissu {
    display: inline;
    color: #c00;
    font-weight: 800;
}
.input-box {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-lg);
    gap: var(--space-xs);
}

.btn, .login-button, .submit-btn, .cancel-btn, .white-btn {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius);
    background: var(--primary-color);
    border: none;
    box-shadow: var(--box-shadow);
    cursor: pointer;
    text-decoration: none;
}

.bt {
    color: #fff;
    padding: var(--space-sm) 15px;
    border-radius: var(--border-radius);
    background: var(--primary-color);
    border: none;
    box-shadow: var(--box-shadow);
    cursor: pointer;
    text-decoration: none;
}

.small_bt {
    color: #fff;
    padding: 4px 15px;
    border-radius: var(--border-radius);
    background: var(--primary-color);
    border: none;
    box-shadow: var(--box-shadow);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

button.delete_btn {
    color: #fff;
    padding: var(--space-sm) 15px;
    border-radius: var(--border-radius);
    background: var(--delete-btn-color);
    border: none;
    box-shadow: var(--box-shadow);
    cursor: pointer;
    text-decoration: none;
}

button.delete_btn.inactive {
    background: var(--disabled-color);
}

.login-button {
    text-align: center;
    width: 100%;
    margin: var(--space-lg) 0;
    padding: var(--space-md);
}

.float_right {
    float:right;
}
.btn_right {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 12px;
}

.btn_right span {
    font-size: 12px;
    vertical-align: middle;
}
.page_setting {
    font-size: 12px;
    margin-left: 10px;
}
.page_setting span{
    font-size: 12px;
    vertical-align: middle;
}
div.menu {
    position: fixed;
    width: 200px;
    height: 100%;
    color: #fff;
    box-shadow: 2px 0 3px #aaaaaa;
}

div.contents {
    position: absolute;
    top: 0px;
    left: 202px;
    width: calc(100% - 202px);
    min-height: 100%;
    background-color: #f0f2f0;
    color: var(--text-color);
}

img.site_logo {
    margin: 10px 10px 10px 10px;
    height: 40px;
}

ul.side_menu {
    margin: 20px 10px 0px 10px;

}

ul.side_menu > li {
    font-size: 14px;
    position: relative;
    left: 0px;
    top: 0px;
    color: var(--text-color);
    margin: 20px 0px 0px 0px;
}

ul.side_menu span.material-symbols-outlined {
    font-size: 14px;
}
ul.side_menu span.icon {
    text-align: center;
}

ul.sub_memu li {
    padding: 2px 5px 2px 17px;
}
ul.side_menu li > a,
ul.sub_memu li a{ 
    text-decoration: none;
    color: var(--text-color);
    font-size: 14px;
}

ul.side_menu li.active > a:hover,
ul.side_menu li.active > a,
ul.side_menu li.active > span.icon,
ul.sub_memu li a:hover,
ul.sub_memu li.active a
{ 
    color: var(--primary-color);
}

ul.side_menu  a:hover {
    color: var(--primary-color);
}

div.header_menu {
    height: 40px;
    background: var(--head_menu-color);
}

div.account_info {
    width: 200px;
    height: 40px;
    margin-right: 0px;
    margin-left: auto;
    text-align: right;
    padding-right: 10px;
    color: #fff;
    font-size: 12px;
}

div.breadcrumb {
    font-size: 12px;
    padding: 5px;
}

div.breadcrumb h2 {
    display: inline;
    font-size: 12px;
}

div.breadcrumb a {
    text-decoration: none;
}


div.breadcrumb span.icon {
    font-size: 17px;
    vertical-align: middle;
}


div.breadcrumb  span {
    vertical-align: bottom;
}
div.breadcrumb > span:last-child {
    font-weight: 800;
}
.w400 {
    width: 400px !important;
}
.w800 {
    width: 800px !important;
}
h1 {
    padding: 20px 0px 20px 20px;
}


h3 {
    padding: 10px;
    font-size: 18px;
    border-bottom: 1px solid #ccc;
}

div.dashboard {
    display: flex;
    padding-top: 30px;
}

div.dashboard_month {
    display: flex;
    width: 45%;
    margin-left: 50px;
}

.month-month {
    font-size: 28px;
    font-weight: bold;
    text-shadow: 2px 2px 0 #008247;
    color: #fff;
}

.month-month > div{ 
    font-size: 13px;
}

.info-box {
    display: block;
    min-height: 90px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    margin-bottom: 15px;
    margin-bottom: 30px;
}

.info-box-content {
    width:100%;
    margin-left: 10px;
    background: #fff;
    min-height: 90px;
    position: relative;
    padding-bottom: 8px;
    padding-top: 8px;
    padding: 5px 10px;
}
.info-box-icon {
    background: var(--head_menu-color);
    align-items: center;
    display: flex;
    justify-content: center;
    width: 200px;
    text-align: center;
}

.question-guide-wrap {
    align-items: center;
    display: flex;
    font-weight: bold;
}

.info-box-number {
    font-size: 26px;
    line-height: 1.4em;
    display: block;
    font-weight: bold;
    padding: 10px 0px;
}

.number-count {
    font-size: 16px;
    padding-left: 4px;
}
.info-box-content {
    min-height: 90px;
    position: relative;
    padding-bottom: 8px;
    padding-top: 18px;
}
.info-box-content p {
    margin: 0;
}
.question-guide-wrap {
    align-items: center;
    display: flex
;
    font-weight: bold;
}
.question-guide-wrap .info-box-text {
    line-height: 1;
}
.info-box-text {
    text-transform: uppercase;
}
.progress-description, .info-box-text {
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.data_contents {
    min-height: 20px;
    margin: 0px 0px 30px 0px;
    background: #fff;
    border-top: 2px solid var(--head_menu-color);
}

div.data_contents h3 {
    position: relative;
}

div.search_and_paging {
    padding: 15px 5px;
    display: grid;
    grid-template-columns: auto 400px;
    position: relative;
    height: 30px;
}

div.area_search {
    margin-left: 10px;
}

.form_text {
    width: 300px;
}

.form_date {
    width: 70px;
}

.pagination {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 5px;
    position: absolute;
    top: 15px;
    right: 10px;
}
.pagination-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    background: #ddd;
    white-space: nowrap;
    overflow:hidden;
}
.pagination-btn[data-len="3"]{
    font-size:12px;
}
.pagination-btn[data-len="4"]{
    font-size:10px;
}
.pagination-btn[data-len="5"]{
    font-size:10px;
}

.pagination-btn.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: var(--font-weight-bold);
}

div.area_table {
    padding: 0px 10px 10px 10px;
}

.table-list {
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
}

.table-list th {
/*    position: sticky;*/
    top: 0;
    border: 1px solid #dddddd;
    line-height: inherit !important;
    background: #f3f3f3;
    font-weight: bold;
    padding: 8px;
    z-index:2;
}


.table-list td {
    border: 1px solid #dddddd;
    line-height: inherit !important;
    background: #fff;
    padding:10px;
}

div.detail_table {
    margin-top: 20px;
    padding: 0px 10px 10px 10px;
}

div.grid2 {
   display: grid;
   grid-template-columns: auto auto;
}
div.detail_table table th {
    text-align: left;
}

div.detail_table table td {
    padding: 10px 10px;
}

div.detail_table table{
    width: calc(100% - 10px);
    margin-bottom: 10px;
}

div.submit_button_area {
    padding: 10px;
}

textarea.nomal {
    width: 600px;
    max-width: 100%;
    height: 100px;
}

table tr.wday6.holiday th,table tr.wday6.holiday td,
table tr.wday6 th,table tr.wday6 td {
    background: #eef;
}

table tr.holiday th,table tr.holiday td,
table tr.wday0 th,table tr.wday0 td
 {
    background: #fee;
}

tr.nostudio th, tr.nostudio td,
td.res_ng
 {
    background: #eee;
}

table tbody tr.duplicate_top th {
    border-top: 1px solid #ddd;
    border-bottom: none;
}

table tbody tr.duplicate th {
    border-top: none;
    border-bottom: none;
}

table tbody tr.duplicate_top td {
    border-bottom: none;
}

table tbody tr.duplicate td {
    border-top: 1px dotted #f4f4f4;
    border-bottom: none;
}


#SetOrderModalOverlay #SetOrderModalWindow {
    min-width: 1050px;
}

.modal-window {
    width: auto;
    max-width: 1200px;
    height: auto;
    max-height: 95vh;
    padding: var(--space-lg);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-md);
    background-color: var(--container-background-color);
    border-radius: var(--border-radius);
    overflow-y: auto;
}

.modal-window h1 {
    padding: 0px;
}

.modal-overlay, .modal-overlay-dontclose {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

#SetOrderModalOverlay .modal-order-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px;
}

#SetOrderModalOverlay .modal-order-header .close {
    font-size: 20px;
    cursor: pointer;
}

#SetOrderModalOverlay .modal-order-content {
    flex: 1;
    display: flex;
    gap: 20px;
    overflow-y: hidden;
}
div.calendar_month table th {
    text-align: center;
    background: #fff;
    color: #444;
    border: 1px solid #aaa;
}
div.calendar_month table .holiday {
    background: #FFF5F4;
    color: #ff1493;
}
div.calendar_month table .saturday {
    background: #F0FCFC;
    color: #1492ff;
}
div.calendar_month table td:first-child {
    border-left: 1px solid #aaa;
}
div.calendar_month table .gray {
    background: #F0F0F0;
    border: none;
}
div.calendar_month table tbody td {
    vertical-align: top;
    position: relative;
    width:calc(100% / 7);
    height: 40px;
    cursor: pointer;
}
div.calendar_month table td, div.calendar_month table th {
    border: 1px solid #aaa;
}
tbody td {
    padding: var(--space-sm) var(--space-xs);
    vertical-align: middle;
    max-width: 200px;
}
div.calendar_month table {
    border-collapse: collapse;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
div.calendar_month table td:last-child {
    border-right: 1px solid #aaa;
}
div.calendar_month table .saturday {
    background: #F0FCFC;
    color: #1492ff;
}

div.select_studio {
    padding: 20px;
}

#SetShiftModalOverlay {
    display: none;
    position: fixed;
    top: 5px;
    right: 10px;
    background: #fff;
    z-index:10;
}

div.modal-close-btn-area {
    position: absolute;
    right:10px;
    top: 5px;
}

div.abs {
    position: absolute;
    top: -1px;
    left: -1px;
    height: calc(100% + 2px);
    border: 1px solid #fff;
    z-index: 990;
    font-size: 10px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 4px;
}

div.abs.absbg_100 {
    background: rgb(230, 230, 233);
}

div.abs.absbg_101 {
    background: rgb(204, 255, 204);
}

div.abs.absbg_2 {
    background: #b3f0f0;
}

div.abs.absbg_3 {
    background: rgb(255, 229, 127);
}

div.abs.absbg_1001 {
  background-image: repeating-linear-gradient(45deg, #fee, #fee 10px, #eee 10px, #eee 17px);
}
.modal-header {
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.search-legend {
    padding: 0 var(--space-sm);
    font-weight: var(--font-weight-bold);
}
.search-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.search-fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 10px;
    padding: var(--space-md);
    border-radius: var(--border-radius);
    border: 2px solid var(--border-color);
}
.search-container-items {
    display: flex;
    width: 100%;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.search-container-item {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: var(--space-xs);
}
.search-container-item select, .search-container-item input {
    width: auto;
}
.search-container-item label {
    white-space: nowrap;
}

input.keyword_search {
    width: 500px;
}

span.reservation_color_box {
    display: inline-block;
    width: 50px;
    height: 20px;
}
span.reservation_color_1 {
    background: #ff8e8e;
}
span.reservation_color_2 {
    background: #ffb2ff;
}
span.reservation_color_3 {
    background: #ffcbe5;
}
span.reservation_color_4 {
    background: #ffd0b2;
}
span.reservation_color_5 {
    background: #ffe57e;
}
span.reservation_color_6 {
    background: #feffb1;
}
span.reservation_color_7 {
    background: #CEE58A;
}
span.reservation_color_8 {
    background: #76D27F;
}
span.reservation_color_9 {
    background: #9DFF9C;
}
span.reservation_color_10 {
    background: #CDFFCC;
}
span.reservation_color_11 {
    background: #9ECECE;
}
span.reservation_color_12 {
    background: #B4F0F0;
}
span.reservation_color_13 {
    background: #6BFFFF;
}
span.reservation_color_14 {
    background: #B3B2FF;
}
span.reservation_color_15 {
    background: #9FDBFF;
}
span.reservation_color_16{
    background: #C2C1E0;
}
span.reservation_color_17 {
    background: #E6E5EA;
}
span.reservation_color_18 {
    background: #DE94DF;
}
span.reservation_color_19 {
    background: #E0B3CA;
}
span.reservation_color_20 {
    background: #F0DFFF;
}

.requests-add-container {
    display: flex;
    flex-direction: row;
    gap: var(--space-lg);
}
.requests-add-container-item {
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    width: 500px;
}
.client_order_change .requests-add-container-items-title {
    font-size: 16px;
    margin-top: 10px;
    font-weight: 800;
}

.requests-add-container-items select,
.requests-add-container-items input
 {
    font-size: 16px;
}
.requests-add-container-items textarea {
    width: 450px;
}


div.cast_detail {
    padding: 20px;
}

div.cast_detail_shop {
    padding: 5px;
    border-bottom: 1px dotted var(--border-color);
}

    /* カード */
div.cast_detail .card{
    max-width: var(--max-width);
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(16,24,40,0.06);
    padding: 36px;
    border: 1px solid rgba(16,24,40,0.03);
}

/* 上部ブロック：写真＋名前 */
div.cast_detail .top {
    display:flex;
    align-items:center;
    gap: var(--gap);
    margin-bottom: 28px;
    flex-wrap:wrap;
    justify-content:center;
}

div.cast_detail .avatar {
    flex: 0 0 auto;
    width: 140px;
    overflow: hidden;
    background: #efefef;
    display:flex;
    align-items:center;
    justify-content:center;
}
div.cast_detail .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

div.cast_detail .name-block{
    padding-left: 10px;
    flex:1 1 260px;
    min-width: 220px;
    text-align:left;
}
div.cast_detail .name {
    font-size: 24px;
    font-weight: 800;
    margin: 6px 0;
}
div.cast_detail .subtitle {
    color: var(--muted);
    font-size: 14px;
    margin-top:2px;
}

div.cast_detail .subtitle select{
    padding: 4px 10px;
}

div.cast_detail .label{
    width: var(--label-w);
    font-weight:700;
    color:var(--muted);
    font-size:15px;
    flex-shrink:0;
}

select.permission_model {
    width: 300px;
}

table.permission {
    margin: 0 auto;
    border-collapse: collapse;
    width: 800px;
}
table.permission thead th{
    background: var(--th-color);
    border: 1px solid var(--border-color);
}

table.permission tbody th{
    border: 1px solid var(--border-color);
    padding: 0px 20px;
    width: 200px;
    padding: 0px;
}

table.permission tbody td{
    border: 1px solid var(--border-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    padding: 2px 0px;
}
table.permission tbody td.circle span{
    color: var(--accent-color);
}
table.permission tbody td.permission_edit:hover{
    background: #ffe57e;
}

table.permission tbody tr:nth-child(odd) {
    background-color: #fafafa
}

.regist_result table.permission thead th {
    text-align: center;
}

.regist_result table.permission tbody th {
    padding-left: 20px;
}

table.studio th {
  width: 200px;
}


.drop-area {
  border: 3px dashed #ddd !important;
  border-radius: 5px;
  text-align: center;
  background-color: rgb(249, 249, 249) !important;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.479 10.092c-.212-3.951-3.473-7.092-7.479-7.092-4.005 0-7.267 3.141-7.479 7.092-2.57.463-4.521 2.706-4.521 5.408 0 3.037 2.463 5.5 5.5 5.5h13c3.037 0 5.5-2.463 5.5-5.5 0-2.702-1.951-4.945-4.521-5.408zm-7.479-1.092l4 4h-3v4h-2v-4h-3l4-4z" fill="gray"/></svg>');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 50px 50px;
}

input {
  max-width: calc(100% - 10px);
}

.drop-area label {
  width: 110px;
  height: 110px;
  display: inline-block;
}

.drop-area input[type=file] {
  display: none;
}

div#upload_images {
  text-align: center;
  margin: 10px;
}

div#room_images {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

div.upload_image {
  position: relative;
  width: 250px;
  min-width: 250px;
  margin:  5px;
  padding: 10px;
  padding-bottom: 50px;
  text-align: center;
  border: 1px solid #444;
}

div.upload_image img {
  width: 100%;
  max-width: 200px;
}

select.room_color {
  position: absolute;
  left: 75px;
  bottom: 5px;
  width: 100px;
  cursor: pointer;
}
span.img_upload_delete_btn {
  position: absolute;
  top: 2px;
  right: 2px;
  cursor: pointer;
}

.modal-overlay, .modal-overlay-dontclose {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* display: none; */
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.modal-window {
    width: auto;
    max-width: 1200px;
    height: auto;
    max-height: 95vh;
    padding: var(--space-lg);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-md);
    background-color: var(--container-background-color);
    border-radius: var(--border-radius);
    overflow-y: auto;
}
.modal-header {
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.modal-window div.btn_area {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 50% 50%;
    margin-top: 30px;
}
.modal-window div.btn_area div {
    text-align: center;
}

.modal-window div.btn_area div .btn {
    display: inline-block;
    width: 140px;
}
.modal_close_btn {
    cursor: pointer;
}


button.cancel_btn {
    background: var(--sub-color-2);
}

#modalConfirm div.modal-window {
    min-width: 500px;
}

#studio_map {
  text-align: center;
  margin-top: 10px;
}

#studio_map iframe {
    max-width: 100%;
}

td.empty_data {
    padding: 50px 0px;
    text-align: center;
}



div.calendar_block {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

div.calendar_month {
  text-align: center;
  margin-bottom: 20px;
}

div.calendar_month table {
  border-collapse: collapse;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

div.calendar_month table td,
div.calendar_month table th {
  border: 1px solid #aaa;
}

div.calendar_month table th {
  text-align: center;
  background: #fff;
  color: #444;
  border: 1px solid #aaa;
}

div.calendar_month table div.day {
  text-align: center;
}

div.calendar_month table tbody td {
  vertical-align: top;
  position: relative;
}

div.calendar_month table div.dayset {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 80px;
}

div.calendar_month table div.noset {
  position: relative;
  width: 100%;
  height: 80px;
}

div.calendar_memo {
  font-size: 10px;
  position:absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
  color: #ff1493;
}

div.calendar_month table .holiday {
  background: #FFF5F4;
  color: #ff1493;
}
div.calendar_month table .saturday {
  background: #F0FCFC;
  color: #1492ff;
}
div.calendar_month table .gray {
  background: #F0F0F0;
  border:none;
}

div.calendar_month table td:first-child {
  border-left: 1px solid #aaa;
}

div.calendar_month table td:last-child {
  border-right: 1px solid #aaa;
}

div.calendar_month table tbody tr:last-child td {
  border-bottom: 1px solid #aaa;
}

select#calendar_year {
    width: 200px;
}

.dont_select {
  background: #eee;
}

div.search-container-items input.calendar_memo {
  margin: 2px 5px;
  width: 100%;
}

select#calendar_year {
  width: 200px;
}

div#modal_calendar {
    display: grid;
    grid-template-columns: 60px 1fr 1fr 60px;
    gap: 10px;
}

div#modal_calendar div.calendar_year {
    margin-top: 30px;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

div#modal_calendar div.calendar_month {
    font-size: 36px;
    font-weight: 800;
    text-align: center;
}

div#modal_calendar div.calendar_move span{
    font-size: 36px;
    font-weight: 800;
}
div#modal_calendar div.calendar_move.calendar_next {
    text-align: right;
}


table.modal_calendar {
  width: 400px;
  min-width: 400px;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

table.modal_calendar td,
table.modal_calendar th {
  border: 1px solid #aaa;
  text-align: center;
}

table.modal_calendar  .holiday {
  background: #FFF5F4;
  color: #ff1493;
}
table.modal_calendar  .saturday {
  background: #F0FCFC;
  color: #1492ff;
}
table.modal_calendar  .gray {
  background: #E5E5E5;
  border:none;
}
table.modal_calendar  .weekday {
  background: #ff9d34;
  color: #fff;
}

div.calendar_header {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
div.calendar_header div:first-child {
  display: table-cell;
  vertical-align: middle;
  text-align :left;
}

div.calendar_header div span {
  font-size: 16px;
}

div.calendar_header_block {
  width: calc(100% - 70px);
  height: 60px;
  margin: 10px auto;
  position: relative;
}

div.calendar_header_block select {
  position:absolute;
  top: 0px;
  left:0px;
}

div.calendar_header_block p {
  position:absolute;
  top: 0px;
  right:0px;
  font-size: 24px;
}

div.studio_shift {
    padding: 0px 15px 15px 15px;
}

div.studio_shift table {
    max-width: 100px;
    margin-bottom: 20px;
}

div.studio_shift table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
}

div.studio_shift table tbody td{
    padding: 3px 0px;
}

div.studio_shift table tbody tr td{
    white-space: nowrap;
}

div.studio_shift table tbody tr.holiday1 td{
    background-color: #ccc;
}

div.studio_shift td.wday6 {
    color: var(--wday6-color);

}
div.studio_shift td.wday0, 
div.studio_shift td.is_holiday {
    color: var(--wday0-color);
}

div.studio_shift td.set_shift {
    cursor: pointer;
}

div.studio_shift td.set_shift:not(.is_not_hover):hover {
    background: #f2f989;
}
div.studio_shift_setting_head {
    padding: 5px 15px 0px 5px;
    position: relative;
}

div.studio_shift_setting_head select#cameraman_id {
    margin-left: 50px;
}


div.studio_shift_setting {
    padding: 0px 15px 5px 15px;
}

div.studio_shift_setting table {
    margin-bottom: 20px;
}

div.studio_shift table thead th.studio-nm  {
    padding: 0px;
    width: 79px;
}

div.studio_shift table thead th.studio-nm div {
    width: 79px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

div.studio_shift table td.calendar_date {
    padding: 0px 10px;
}

div.studio_shif.sat_setting table td {
    padding: 10px 0px; 
} 

div.studio_view_status_change {
    position: absolute;
    right: 15px;
    top: 10px;
}

#toolbox.cameraman_shift_box{
    width:435px;
}
div.select_tool {
    width: 50px;
    height: 50px;
}


#toolbox {
    position: fixed;
    top: 0px;
    right: 0px;
    width: 220px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    z-index: 900;
}
#multi_setting_tool {
    display:none;
    position: fixed;
    top: 0px;
    right: 435px;
    width: 413px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    z-index: 900;
}
#multi_setting_tool div.set_time {
    width: 150px;
}
#multi_setting_tool div.set_week label{
    vertical-align: middle;
}

.toolbox-header {
    background: var(--head_menu-color);
    color: #fff;
    padding: 8px 10px;
    cursor: move;
    height: 28px;
    font-size: 14px;
    position: relative;
}

/* 右上の最小化ボタン */
.minimize-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}
.minimize-btn span {
    font-size: 16px;
    font-weight: 100;
}
.toolbox-body {
    padding: 10px;
    transition: all .2s ease;
}

#toolbox.minimized {
    width: 180px;
    height: auto;
}

#toolbox.minimized .toolbox-body {
    display: none;
}
#toolbox.minimized .toolbox-header {
    cursor: pointer;
}


#multi_setting_tool select.set_time_select {
    padding: 4px;
    width: 50px;
}

#multi_setting_week {
    width: 80px;
    padding: 4px;
}

#multi_setting_tool #multi_setting_btn,
#multi_setting_tool #multi_setting_delete_btn {
    padding: 4px 5px;
    background-color: var(--disabled-color);
}

/*削除ボタンを付けるときは下２つのセクションを調整する。処理は未実装*/
#multi_setting_tool #multi_setting_btn {
    padding: 4px 60px;
}
#multi_setting_tool #multi_setting_delete_btn {
    display: none;
}

#multi_setting_tool #multi_setting_btn.active {
    background-color: var(--primary-color);
}

#multi_setting_tool #multi_setting_delete_btn.active {
    background-color: var(--delete-btn-color);
}

#multi_copy_tool {
    display:block;
    position: fixed;
    top: 0px;
    right: 435px;
    width: 293px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    z-index: 900;
}

#multi_copy_tool div.set_week {
    display: flex;
    gap:10px;
}

img.multi_setting_set_btn {
    position: absolute;
    left: -3px;
    top: 13px;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

span.copy_shift_btn {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: 14px;
    cursor: pointer;
}

img.copy_set_btn {
    position: absolute;
    left: -3px;
    top: 13px;
    width: 12px;
    height: 12px;
    cursor: pointer;
}

tr.is_copy td {
    background-image: repeating-linear-gradient(0deg, #3cc700, #3cc700 9px, transparent 9px, transparent 19px, #3cc700 19px), repeating-linear-gradient(90deg, #3cc700, #3cc700 9px, transparent 9px, transparent 19px, #3cc700 19px), repeating-linear-gradient(180deg, #3cc700, #3cc700 9px, transparent 9px, transparent 19px, #3cc700 19px), repeating-linear-gradient(270deg, #3cc700, #3cc700 9px, transparent 9px, transparent 19px, #3cc700 19px);
    background-size: 1px calc(100% + 19px), calc(100% + 19px) 1px, 1px calc(100% + 19px) , calc(100% + 19px) 1px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
    animation: borderAnimation 0.5s infinite linear;
}
@keyframes borderAnimation {
    from { background-position: 0 0, -20px 0, 100% -20px, 0 100%; }
    to { background-position: 0 -20px, 0 0, 100% 0, -20px 100%; }
}

span.cameraman_shift_add_studio_btn,
span.cameraman_shift_edit_cameraman_btn {
    font-size: 14px;
    position: absolute;
    top: 3px;
    right: 3px;
    cursor: pointer;
}

div.flex2 {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

#toolbox div.tool_item{
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 10px;
    overflow: hidden;
    padding: 2px;
    border: 1px solid var(--border-color);
    font-size: 12px;
    color: #fafafa;
}

#toolbox div.tool_item_br {
    flex-basis: 100%;
    height: 0;
}

#multi_setting_tool div#selected_tool {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 10px;
    overflow: hidden;
    padding: 2px;
    border: 1px solid var(--border-color);
    font-size: 12px;
    color: #fafafa;
    text-align: center;
}

#main_calendar th,
#schedule_table th,
#main_calendar td,
#schedule_table td
{
    white-space: nowrap;
}
#main_calendar tbody td,
#schedule_table tbody td {
    position: relative;
}

#schedule_table tbody th,
#schedule_table tbody td {
    height: 20px !important;
}


#schedule_table tbody th {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    white-space: nowrap;
}

#schedule_table tbody td:nth-child(2) {
    width: 88px;
    min-width: 88px;
    overflow:hidden;
    white-space: nowrap;
}

#schedule_table tbody td.min_00 {
    border-right: none;
}


#schedule_table tbody td.min_30 {
    border-left: 1px dotted #ddd;
}

#main_calendar tbody td:nth-child(n+3) {
    padding: 0;
    color: #ccc;
}
#schedule_table tbody td:nth-child(n+3) {
    padding: 0;
    width: 40px;
    color: #eee;
    text-align: center;
}

#schedule_table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

#schedule_table tbody th,
#schedule_table tbody td
{
    font-size: 12px;
    position: relative;
}

@media screen and (min-width: 1900px) {
    #schedule_table tbody td:nth-child(n+3) {
        padding: 0;
    }
}

/* =========================
   シフトツールBOX
   =========================*/
#shiftToolBox {
    position: fixed;
    right: 40px;
    bottom: 80px;
    width: 360px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    z-index: 900;
    font-size: 14px;
    border: 1px solid #ddd;
}

#shiftToolBox.minimized {
    width: auto;
    height: auto;
    padding: 4px 10px;
    cursor: pointer;
}

#shiftToolBox.minimized .toolbox-body {
    display: none;
}

#shiftToolBox.minimized .toolbox-header {
    cursor: pointer;
    border-radius: 4px;
}

#shiftToolBox.minimized .toolbox-title {
    margin-right: 6px;
}

.toolbox-header {
    background: #0d7f36;
    color: #fff;
    padding: 6px 10px;
    cursor: move;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px 4px 0 0;
}

.toolbox-title {
    font-weight: bold;
}

.toolbox-min-btn {
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.toolbox-body {
    display: flex;
    padding: 8px;
    gap: 6px;
    background: #fff;
    border-radius: 0 0 4px 4px;
}

.tool_item {
    flex: 1 1 auto;
    border: 1px solid #ccc;
    padding: 6px 4px;
    text-align: center;
    background: #f9f9f9;
    cursor: move;
    user-select: none;
    border-radius: 2px;
    font-size: 12px;
}
.tool_item:hover {
    background: #f0f0f0;
}

/* ドラッグ中のクローン */
.tool_drag_helper {
    opacity: 0.8;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
}

/* ドロップ候補スロット */
#schedule_table td.min_00,
#schedule_table td.min_30 {
    position: relative;
    background-clip: padding-box;
}

tr.nostudio .schedule-slot-hover {
    outline: none;
}

.schedule-slot-hover {
    outline: 2px solid #0d7f36;
    z-index:100;
}

/* =========================
   ドロップ後のシフトブロック
   =========================*/
.shift-block {
    position: absolute;
    top: 2px;
    background: rgba(13, 127, 54, 0.6);
    color: #fff;
    border-radius: 3px;
    font-size: 11px;
    padding: 2px 6px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

div.cameraman_system #schedule_table tbody td:nth-child(2) {
    height: 28px;
}

/* 時間表示を分けたい場合 */
.shift-block .label {
    font-weight: bold;
}
.shift-block .time-range {
    display: block;
    font-size: 10px;
    margin-top: -3px;
}
.shift-block .cast_name {
    display: block;
    font-size: 10px;
    margin-top: -3px;
}
/* リサイズハンドル（右端） */
.shift-block .ui-resizable-e {
    position: absolute;
    height: 100%;
    width: 6px;
    right: 0;
    top: 0;
    cursor: e-resize;
    background: rgba(255,255,255,0.35);
}

/* =========================
   area_table を基準座標に
   =========================*/
.area_table {
    position: relative; /* シフトブロックを absolute で載せるため */
}

#studioReservationOverlay table select#cast_id {
    max-width: 200px;
}

#studioReservationOverlay table select,
#studioReservationOverlay table input,
#studioReservationOverlay table textarea
 {
    max-width: 95%;
    padding: 4px;
}

#studioReservationOverlay table td {
    padding: 2px 5px;
}



#schedule_table a.to_camera_shift_btn {
    position: absolute;
    top:0px;
    right: 0px;
    font-size: 10px;
    color: #fff;
    padding: 1px 3px;
    border-radius: 3px;
    background: var(--primary-color);
    border: none;
    box-shadow: var(--box-shadow);
    cursor: pointer;
    text-decoration: none;
}

#cameramanShiftOverlay table {
    width: 500px;
}

#cameramanShiftOverlay table th {
    width: 100px;
}

.reservation_edit_textarea {
    width: 100%;
    height: 50px;
}

span.reservation_menu_color {
    width:14px; 
    height:14px;
    display:inline-block;
    margin-right:10px;
    vertical-align: middle;
}

div.cameraman_shift_header {
    padding: 10px 0px 0px 0px;
    display: flex;
    gap: 20px;
}

div.cameraman_shift_header > div {
    padding: 5px;
}



div.photography_default_setting {
    background: #eee;
}

#reservation_delete_block, #cameraman_shift_delete_block {
    display:inline-block;
    margin-left: auto;
    margin-right: 0px;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
}

#reservation_delete_block span,
#cameraman_shift_delete_btn span {
    font-size: 17px;
    vertical-align: middle;
}

#cameraman_shift_delete_btn {
    display:inline-block;
    margin-left: auto;
    margin-right: 0px;
    cursor: pointer;
    font-size: 14px;
}

div.delete_btn span.material-symbols-outlined {
    vertical-align: middle;
}

.account-detail-items {
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.account-detail-items-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-normal);
    color: var(--text-color);
    flex-basis: 40%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.account-detail-items-content {
    padding: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--space-md);
    color: var(--text-color);
    flex-basis: 50%;
    flex-grow: 1;
    flex-wrap: wrap;
}

.table-fieldset tbody tr:nth-child(odd) {
    background-color: var(--sub-color);
}

.table-fieldset {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

#client_search_tbody td {
    padding: var(--space-sm) var(--space-xs);
    vertical-align: middle;
    max-width: 200px;
    white-space: nowrap;
}

#client_search_result table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-tiny);
    min-width: 600px;
}

#client_search_result legend {
    padding: var(--space-sm);
    font-weight: var(--font-weight-bold);
}

#client_search_result table th {
    background-color: var(--primary-color);
    color: white;
    font-weight: var(--font-weight-bold);
}

#client_search_result thead th {
    position: sticky;
    top: 0;
    padding: var(--space-sm) var(--space-xs);
    white-space: nowrap;
    z-index: 2;
    text-align: left;
}

#client_search_result .table-fieldset {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--space-lg);
    width: 100%;
    margin: var(--space-lg) 0;
}

.noresize .ui-resizable-handle {
    display: none;
}

div.shift-block.is_reserved {
    background: #777  !important; 
}

div div div.shift-block.is_reserved.tentative_reservation {
    background: repeating-linear-gradient(-45deg, #777, #777 5px, #aaa 3px, #aaa 10px) !important;
}

div.is_unreserved {
    border: 2px dashed #000 !important;
}

div#reservation_edit_submit_area {
    display: flex;
}

div#reservation_dont_edit {
    text-align: center;
    color: var(--error-color);
}
#cameraman_shift_edit_btn, #cameraman_reservation_edit_btn {
    width: 50%;
}
div.reservation_edit_btn_area {
    padding: 20px 10px 20px 0px;
    text-align: center;
}

div.reservation_edit_btn_area button {
    width: 200px;
}

.date_change_calendar {
    margin-top: -2px;
    font-size: 30px;
    vertical-align: middle;
}

.view_calendar {
    cursor: pointer;
}

.date_selector {
    margin-top: -2px;
    font-size: 30px;
    vertical-align: middle;
    cursor: pointer;
}

div.calendar_modal_header {
    display: grid;
    grid-template-columns: 50px 1fr 50px;
}

div#calendar_modal_title {
    text-align: center;
}

span#modal_calendar_next {
    display: block;
    text-align: right;
}

td.set_date {
    cursor: pointer;
}

td.set_date:hover {
  animation: flash-yellow 0.3s ease-out;
}

@keyframes flash-yellow {
  0%   { background-color: #fff; } /* 元の色 */
  25%  { background-color: #ffeb3b; } /* 一瞬黄色 */
  100% { background-color: #fff; } /* 元に戻る */
}

div#file_delivery_error_log,
div#file_delivery_result_log {
    height: 60px;
    overflow: auto;
    color: var(--error-color);
    display: none;
}
div#file_delivery_error_log div.error{
    border-bottom: 1px dotted #ccc;
}
div#file_delivery_result_log div.result{
    border-bottom: 1px dotted #ccc;
    color: #00c;
}
div#file_delivery_error_log div.warning{
    border-bottom: 1px dotted #ccc;
    color: rgb(255, 174, 44);
}



#delivery_files {
    column-width: 200px;
    column-gap: 5px;
    padding: 10px;
}

#delivery_files > div{ 
    break-inside: avoid;
    margin-bottom: 5px;
    position: relative;
}

#delivery_files div img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

#delivery_files div img.upload_file_delete_btn {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    right: 3px;
    cursor: pointer;
}

#delivery_files span.is_movie {
    position: absolute;
    left: 5px;
    top: 5px;
    color: #fff;
    text-shadow:
        1px 1px 0 #000,
        -1px 1px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000;
}

div.shift_studio_edit {
    display: flex;
    gap: 4px;
    flex-direction: row;
}

.bgcolor_name {
    color:#fff;
    text-shadow: -1px -1px 0 #777,1px -1px 0 #777,-1px  1px 0 #777,1px  1px 0 #777;
}

#edit_studio_list img.studio_edit_studio_delete_btn {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 3px;
    right: 3px;
    cursor: pointer;
}

button.hide_shift {
    background: #c00;
}

span.delivery_alert {
    color: var(--error-color);
    vertical-align: middle;
}
span.delivery_alert_text {
    color: var(--error-color);
    font-size: 18px;
}
.ui-timepicker-standard .ui-menu-item {
    text-align: left;
}

span.not_delivery_count {
    position: absolute;
    display:block;
    top: -10px;
    left: 0px;
    width: 20px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--error-color);
    text-align: right;
}
#color_picker {
    width: 31px; 
    height: 31px;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: middle;
}


#upload_log {
    width: 320px;
    font-family: "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", sans-serif;
    display: none;
}

#upload_log .upload_text {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
}

#upload_log .upload_result_text {
    display: none;
}

#upload_log .progress_container {
    width: 100%;
    height: 12px;
    background-color: #f3f3f7;
    border-radius: 999px;
    overflow: hidden;
}

#upload_progress_bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: #c7b9ff;
    transition: width 0.4s ease;
}
.area-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.area-item {
    position: relative;
    cursor: pointer;
}

.area-item input[type="checkbox"] {
    display: none;
}

.area-item span {
    display: inline-block;
    padding:2px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #555;
    font-size: 14px;
    transition: all 0.2s ease;
}

/* チェック時 */
.area-item input[type="checkbox"]:checked + span {
    background-color: #82a8ff;
    border-color: #82a8ff;
    color: #fff;
}

/* ホバー */
.area-item:hover span {
    border-color: #4f46e5;
}

div.shift_schedule {
    text-shadow:none;
    font-size: 10px;
}

#editor {
    height: calc(100vh - 440px);
    min-height: 460px;
}

#preview_frame {
    width: 100%;
    height: calc(100vh - 400px);
    border: 1px solid #ccc;
    min-height: 500px;
}

#copy_button {
    cursor: pointer;
    vertical-align: middle;
}

div#calendar_view {
    width:800px;
    display: grid;
    grid-template-columns: 60px 1fr 1fr 60px;
    gap: 10px;
}

div#calendar_view div.calendar_year {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

div#calendar_view div.calendar_month {
    font-size: 36px;
    font-weight: 800;
    text-align: center;
}

div#calendar_view div.calendar_move span{
    font-size: 36px;
    font-weight: 800;
}
div#calendar_view div.calendar_move.calendar_next {
    text-align: right;
}

table.calendar_view {
  width: 300px;
  min-width: 300px;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

table.calendar_view td,
table.calendar_view th {
  border: 1px solid #aaa;
  text-align: center;
  padding: 4px 10px;
}

table.calendar_view  .holiday {
  background: #FFF5F4;
  color: #ff1493;
}
table.calendar_view  .saturday {
  background: #F0FCFC;
  color: #1492ff;
}
table.calendar_view  .gray {
  background: #E5E5E5;
  border:none;
}
table.calendar_view  .weekday {
  background: #fff;
}
table.calendar_view  .reserved {
  background: #ffd736;
}
table.calendar_view  .today {
  background: #ff9d34;
  color: #fff;
}

div#modalReservationForm div#sample_images {
    display: block;
}

div#sample_images div.upload_image {
    max-width: 60px;
    min-width: 60px;
    max-height: 300px;
    border: 1px solid var(--border-color);
    padding: 4px;
    position: relative;
    display: inline-block;
    margin-right: 5px;
}

div.download_block {
    padding: 0px 20px 20px 20px;
}

#cameraman_shift_edit_submit_area {
    display: flex;
}