:root{
    --color-1: #99c4de;
    --color-2: #2d2d2d;
    --color-3: #e3aa2f;
    --color-4: #c4e4ff;
    --color-5: #00fff8;
    --color-6: #1fd27e;
    --color-7: #3f3f3f;
    --color-8: #d6dbe5;
    --color-9: #283e6a;
    --color-10: rgb(178, 51, 51);
}

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
body{min-height: 100vh; background: #000; font-family: "Comfortaa", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings: "wdth" 100;}
.manage-index input, .manage-index textarea, .manage-index select, #itemsForm select{background-color: #000; color: #fff; border: none; box-sizing: border-box; font-family: inherit;}
input[type="date"]::-webkit-calendar-picker-indicator {filter: invert(50%) sepia(100%) hue-rotate(180deg); /* color tint */}
.manage-index input:focus, .manage-index textarea:focus{outline: none; border: none;}
.manage-index input:focus, .manage-index textarea:focus{background-color: var(--color-7);}
.manage-index input[type="number"]{width: 70px;}
.gap-5{gap: 5px;}
.small-text{font-size: 0.85rem;}
.reservation-view-frame{padding: 30px; border-radius: 20px; background-color: #fff; color: #000;}
#index, #footer{overflow: initial;}
.sticky{top: 40px;}
.margin-top-5{margin-top: 5px;}
.border-radius-20{border-radius: 20px;}

#festival-board .button{display: block; padding: 6px 12px; border-radius: 30px; color: #00fff8; background-color: transparent; border: none; transition: 0.5s; font-weight: bold;}
#festival-board .button:hover{background: #000; color: #fff;}
#festival-board .button.active{background-color: white; color: #000;}
.manage-button, .row-add{ position: relative; border: none; display: inline-flex; align-items: center; vertical-align: middle; -webkit-appearance: none; appearance: none; outline: none !important; font-weight: 400; font-size: 15px; text-transform: uppercase; letter-spacing: 1.6px; padding: 5px 10px; background: linear-gradient(90deg, #3fff00 0%, #00a5ff 100%); border-radius: 10px; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; overflow: hidden; gap: 10px; z-index: 1; color: #000; }
.manage-index .row-add{background: #e3aa2f; background-color: #e3aa2f;}
.manage-index .button-cancel, .manage-index  .manage-button.delete{background: #ff0000; background-color: #ff0000; color: #fff;}
.new-message{position: absolute; right: 10px; top: 10px; background-color: red; border-radius: 100%; padding: 7px 14px;}

#mobile-menu{display: none;}
#controller{padding: 0 10px;}
#festival-menu{width: 350px; background: linear-gradient(288deg, #3fff00 0%, #00a5ff 100%); color: #000; font-family: "Anton SC", sans-serif; font-weight: 700; border-radius: 5px; margin: 5px; height: fit-content;}
#festival-menu i{width: 20px; padding-right: 10px; color: #00fff8;}
#festival-menu ul{list-style-type: none;}
#festival-menu > ul > li > a, #festival-menu > ul > li > legend{font-size: 20px; padding: 5px 0;}
.sub-festival-menu li > a{padding: 5px 0 5px 10px; display: flex;}
.sub-festival-menu li > a:before{content: "-"; display: inline-block; padding-right: 10px;}
#festival-menu .festival-active{color: var(--color-5);}
#festival-menu li{border-bottom: none;}

#event-menu{border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 10px 0;}
#event-menu .button{padding: 8px 16px; margin: 0 10px; border: 1px dashed #999; border-radius: 5px; background-color: transparent; color: #fff; display: flex;}
#event-menu .active{background-color: #40a3f8; border: none; color: #000;}
#event-menu i{width: 20px; padding-right: 5px;}
.event-title{margin: 5px 0; font-size: 20px; word-break: break-word; color: #fff;}
.menu-close{display: none; position: absolute; top: 10px; right: 10px; font-size: 30px; color: var(--color-5); z-index: 2;}
#festival-menu .menu-close i{opacity: 1;}
.offer-design{background-color: #fff; color: #000; padding: 20px; border-radius: 10px;}
.offer-design ul {list-style: none; /* remove default bullets */padding-left: 0;}
.offer-design ul li::before { content: "✔"; /* or "✓", "✅" */ color: green;  /* optional */ font-weight: bold; /* optional */ margin-right: 8px;/* space between checkmark and text */}
.offer-design ol {list-style: none; /* remove default bullets */padding-left: 0;}
.offer-design ol li::before { content: "X"; color: red;  /* optional */ font-weight: bold; /* optional */ margin-right: 8px;/* space between checkmark and text */}

.festival-search{background: #fff; border-radius: 5px; overflow: hidden; display: flex; align-items: center;}
.festival-search input{border: none; outline: none; padding: 11px 10px;}
.festival-search i{font-size: 18px;}

.user-photo{width: 50px; height: 50px; overflow: hidden; border-radius: 10px;}

/* RESERVATION */

.manage-index, .manage-form{padding: 20px 0; border-color: rgba(255, 255, 255, 0.1); background-color: #1a1a1a; color: #fff; margin: 30px auto;}
.manage-table th, #festival-board .manage-table td{padding: 5px 10px; border-bottom: 1px solid #555;}
.manage-table tr:last-child td{border-bottom: unset;}
.manage-table tr:hover{background: linear-gradient(14deg, #3fff00 0%, #00a5ff 70%); color: #000; font-weight: bold;}
.manage-table tr th{background-color: #1a1a1a; color: #fff;}

#itemsForm fieldset{border: none;}
.room-person{ border-bottom: 1px solid #313131 !important; margin: 10px 0; position: relative;}
.person-data{padding: 3px;}
.room-person > legend{color: var(--color-6)}
.person-data span{display: block; font-size: 0.85rem; color: var(--color-5); text-align: center;}
.person-data p, .guest-price{margin-top: 4px; text-align: center;}
.room-person .name-field, .room-person .phone-field{width: 100px;}
.room-person .name-field input, .room-person .phone-field input{width: 100%;}
.reserve-fieldset{min-width: 200px;}
.reserve-fieldset .removeRow{position: absolute; font-size: 30px; right: -10px; top: -45px; cursor: pointer; transition: 0.5s;}
.reserve-fieldset .removeRow:hover{color: var(--color-5); transform: rotate(90deg);}
.reserve-fieldset .remove-pass{top: -25px;}
.reserve-fieldset > legend{position: absolute; top: -41px; left: 40px; font-size: 32px;}
.reservation-username{word-break: break-word;}
.special-discount-data{position: absolute; bottom: -15px; right: 10px; font-size: 0.8em; line-height: 1.8em; color: var(--color-6)}
.special-discount-text{font-size: 0.8em; line-height: 1.8em; color: var(--color-6)}

#festival-board .festival-color-1{color: var(--color-1);}
#festival-board .festival-color-1-bg{background-color: var(--color-1);}
#festival-board .festival-color-2{color: var(--color-2);}
#festival-board .festival-color-2-bg{background-color: var(--color-2);}
#festival-board .festival-color-3{color: var(--color-3);}
#festival-board .festival-color-3-bg{background-color: var(--color-3);}
#festival-board .festival-color-4{color: var(--color-4);}
#festival-board .festival-color-4-bg{background-color: var(--color-4);}
#festival-board .festival-color-5{color: var(--color-5);}
#festival-board .festival-color-5-bg{background-color: var(--color-5); color: #000;}
#festival-board .festival-color-6{color: var(--color-6);}
#festival-board .festival-color-6-bg{background-color: var(--color-6);}
#festival-board .festival-color-7{color: var(--color-7);}
#festival-board .festival-color-7-bg{background-color: var(--color-7);}
#festival-board .festival-color-8{color: var(--color-8);}
#festival-board .festival-color-8-bg{background-color: var(--color-8)}
#festival-board .festival-color-9{color: var(--color-9);}
#festival-board .festival-color-9-bg{background-color: var(--color-9)}
#festival-board .festival-color-10{color: var(--color-10);}
#festival-board .festival-color-10-bg{background-color: var(--color-10)}

.new-events{background-color: var(--color-5); color: #000; border-radius: 100%; padding: 0 5px; margin-right: 5px; margin-left: -20px; height: 20px;}
#festival-board .new-order{border: 3px solid var(--color-5);}

@media screen and (min-width: 1080px) {
    .room-cap{margin-top: -38px;}
}

@media screen and (max-width: 1080px) {
    #festival-menu, #event-menu{position: fixed; top: 0; left: -100vw; width: 100vw; height: 100vh; overflow: auto; transition: 0.5s; z-index: 3; margin: 0;}
    #event-menu{left: 100%; background-color: var(--color-2);}
    #event-menu > .flex {display: block; margin-top: 40px;}
    #event-menu > .flex > *{margin: 15px auto; display: block; width: 80%;}
    .festival-menu-open #festival-menu, .event-menu-open #event-menu{left: 0;}
    .festival-menu-open, .event-menu-open{overflow: hidden;}
    .menu-close{display: block;}
    #mobile-menu{display: flex; background-color: var(--color-7); display: flex; color: var(--color-8); padding: 10px; font-size: 22px;}
    #festival-board .manage-index, #festival-board .manage-form{margin: 10px auto;}
    
}

@media screen and (max-width: 768px) {
    .room-person .name-field{width: 48%;}
    .room-person .email-field{width: 96%;}
    .room-person .email-field input{width: 100%;}

    .reserve-manager{zoom: 0.4; width: 240vw; overflow: auto;}
    /* .reserve-manager .person-data span{font-size: 0.5rem;}
    .reserve-manager input, .reserve-manager select, .reserve-manager textarea{zoom: 0.6;} */
}