/* VARIABILI ROOT */
:root {
  --color-white:#fbf9f5;
  --color-black:#131614;
  --color-red:#ea5827;
  --color-purple:#eecbff;
  --color-green:#329f94;
  --padding: 42px;
  --padding-mobile: 20px;
  --menuHeight: 60px;
  --optionShort: 270px;
  --optionShortRegister:360px;
  --numDays: 7;
  --numHours: 35;
  --timeHeight: 20px;
  --timeHeightDash: 20px;
  --calBgColor: #fff1f8;
  --eventBorderColor: #f2d3d8;
  --eventColor1: #ffd6d1;
  --eventColor2: #fafaa3;
  --eventColor3: #e2f8ff;
  --eventColor4: #d1ffe6;
  --eventColor5: #F7D08A;
  --eventColor6: #F79F79;
  --eventColor7: #75DDDD;
  --eventColor8: #EDC9FF;
  --eventColor9: #824C71;
  --eventColor10: #a97f9c;
  --eventColor11: #FFE8CC; /* Soft Peach */
  --eventColor12: #C1DFF0; /* Light Sky Blue */
  --eventColor13: #FFC3A0; /* Warm Coral */
  --eventColor14: #B4E1DD; /* Soft Aqua */
  --eventColor15: #FFB7CE; /* Blush Pink */
  --eventColor16: #FCE6A8; /* Light Butter Yellow */
  --eventColor17: #D3FFD7; /* Pastel Mint */
  --eventColor18: #FFFAE3; /* Creamy Beige */
  --eventColor19: #C2B8A3; /* Soft Taupe */
  --eventColor20: #D2B1FF; /* Lavender Purple */
  --heightdifference: 160px;
}

html, body {
    display: block;
    position: relative;
    width: 100vw;
    overflow-x: hidden;
    background-color: var(--color-white);
}

.error{
    color: var(--color-red);
    margin-bottom: 10px;
}

/* STYLE SCROLLBAR */

/* width */
::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: var(--color-white);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-black);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--color-purple);
}
.warning{
  margin-top:20px;
  margin-bottom: 20px;
  font-size: 12px;
}

.warningBox{
  display: none;
  position: absolute;
  border-radius:4px;
  transform: translateY(70%);
  background-color: var(--color-black);
  padding:0 15px;
  z-index: 9;
  .warning{
    color: var(--color-white);
    font-size:14px;
    font-weight: 500;
  }
  &.active{
    display: block;
  }
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Per Firefox */
input[type=number] {
    -moz-appearance: textfield;
}