.loading-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; z-index: 9999;
justify-content: center;
align-items: center;
}
.dots-wave {
display: flex;
}
.dot {
width: 15px;
height: 15px;
margin: 5px;
background-color: white;
border-radius: 50%;
animation: wave 1.2s linear infinite;
border-color: #935c42;
border-style: solid;
}
.dot:nth-child(1) {
animation-delay: 0s;
}
.dot:nth-child(2) {
animation-delay: 0.2s;
}
.dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes wave {
0%, 60%, 100% {
transform: initial;
}
30% {
transform: translateY(-15px);
}
}.vigi-body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: transparent;
}
.vigi-body2 {
display: flex;
height: 100vh;
margin: 0;
background-color: transparent;
}
.all-container {
position: absolute;
position: relative;
top: 0px;
}
.all-container2 {
position: relative;
top: 0px;
left: 50%;
margin-left: -490px;
}
.grid-container {
display: block;
float: right;
position: absolute;
left: 130px;
}
.grid-side-bar {
position: absolute;
border-left-style: solid;
height: 632px;
width: 18px;
left: 120px;
border-radius: 20px;
border-left-color: #945d3f;
border-left-width: 16px;
}
.drop-container {
justify-content: center;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
}
.week-select {
text-align: center;
background-color: #fcfbe4;
color: #6e3b1f;
width: 200px;
height: 36px;
border-radius: 6px;
font-weight: bold;
font-size: 18px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.week-select:hover {
content: '\25BC';
}
.row-container {
display: grid;
grid-template-columns: repeat(8, 100px);
grid-template-rows: repeat(4, 22px);
gap: 1px 5px;
background-color: #945d3f;
padding: 0px 6px 6px 6px;
border-radius: 8px;
margin-bottom: 10px;
}
.row-container-mobile {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(4, 22px);
gap: 1px 5px;
background-color: #945d3f;
padding: 0px 6px 6px 6px;
border-radius: 8px;
margin-bottom: 10px;
}
.item {
font-weight: bold;
display: block;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
text-align: left;
background-color: #fcfbe4;
color: #36353d;
align-items: center;
font-size: 13px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 2px;
white-space: nowrap;
padding: 3px 6px;
}
.item:hover {
color: black;
}
.highlight {
background-color: #fcfbe4;
transition: all 0.3s;
}
.highlight:hover {
background-color: rgb(211, 248, 202);
}
.confirm {
background-image: linear-gradient(to bottom, #fcfbe4 0%, #fcfbe4 100%), linear-gradient(to bottom, rgb(155, 253, 161) 0%, rgb(155, 253, 161) 100%);
background-clip: content-box, padding-box;
}
.hour {
background-color: transparent;
color: rgb(255, 251, 245);
font-size: 12px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-top: 2px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1px;
}
.cur-hour {
background-color: rgb(253 250 244);
color: brown;
font-weight: normal;
border-style: solid;
border-color: #945d3f;
border-radius: 8px;
border-width: 1px;
height: 16px;
}
.vigi-select {
width: 100%; padding-left: 10px;
border: 1px solid #ccc;
border-radius: 6px;
background-color: #fff;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #3c4348;
}
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9998;
transition: opacity 0.3s ease-in-out;
}
.popup-overlay p {
margin-bottom: 0px;
font-weight: bold;
color: #a75e1f;
padding-left: 8px;
}
.popup-overlay button {
border-radius: 3px;
background-color: #e9e6e6;
font-family: sans-serif;
font-size: 14px;
color: #627857;
border-color: #9d9b9b;
}
.popup-overlay input {
height: 20px;
margin: -5px;
border-color: #b2b2b5 !important;
border-style: solid !important;
margin: -5px 3px -5px 3px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 16px;
}
.popup-content {
background: white;  position: relative;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
display: flex;
flex-direction: column;
gap: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.close-btn {
position: absolute;
top: 0px;
right: 7px;
background-color: transparent !important;
color: #779155 !important;
border: none !important;
padding: 0px !important;
cursor: pointer !important;
border-radius: 3px !important;
font-weight: bold !important;
font-size: 22px !important;
z-index: 999 !important;
}
.dropdown {
width: 200px;
}
.vigi-label {
margin-bottom: -8px;
font-weight: bold;
}
.vigi-btn {
font-weight: bold;
color: #55722e;
-moz-padding-start: 5px !important;
-moz-padding-end: 5px !important;
}
.vigi-radio-group {
text-align: center;
}
.vigi-radio {
vertical-align: middle;
}
.vigi-radio-group label {
margin: 0 20px 0 5px;
}
.vigi-summary-btn {
height: 40px;
width: 106px;
position: absolute;
bottom: 180px;
left: 3px;
border-radius: 10px;
border-color: #919191;
border-style: solid;
border-width: 1px;
text-align: center;
padding-top: 6px;
color: rgb(73, 73, 73);
background-color: #fcfbe4;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
cursor: pointer;
display: none;
}
.vigi-summary-btn:hover { background-color: #e2ce73;
color: rgb(32, 32, 32);
border-color: #636363;
}
@-moz-document url-prefix() {
.vigi-summary-btn {
font-size: 12px;
}
}
.vigi-summary-panel {
font-weight: bold;
overflow: auto;
margin-bottom: 12px;
}