* {
  box-sizing: inherit;
}

.sis-theme {
/* A copy of our theme template */
  --primary-color: #4FCC16;
  --secondary-color: #54EACC;
  --accent-color: #55E4CC;
  --main-bg: white;

  --info-color: #5252DA;
  --success-color: #6EE57E;
  --warning-color: #D97706;
  --error-color: #DE3C3C;

  --primary-hover-color: #1EA630;
  --secondary-hover-color: #5151511a;
  --main-hover-bg: #F2F4F6;

  --primary-shadow-color: #C2E1E1;
  --error-shadow-color: #FD4E5D30;
  --warning-shadow-color: #FBC7565C;

  --sis-bg: white;

  --sis-grey: #D1D3D5;
  --sis-grey-50: #F9FAFB;
  --sis-grey-100: #E6E6E6;
  --sis-grey-200: #E5E7EB;
  --sis-grey-300: #D1D5DB;
  --sis-grey-400: #9CA3AF;
  --sis-grey-600: #4B5563;

  --sis-green-600: #50E063;

  --sis-main-text: #374150;
  --sis-material-icon: #515151;

  --sis-button-primary-hover: #21BA45;
  --sis-button-secondary: #E3E3E3;
  --sis-disable-button-color: #A4A4A4;
  --sis-disable-button-background: #F3F3F3;

  font-family: 'Inter', sans-serif;
}

p.error {
  color: var(--error-color);
}

/* Input */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="date"],
input[type="tel"],
input:not([type]),
select,
textarea {
  border-radius: 0.5rem;
  background-color: var(--sis-grey-50);
  border: 1px solid var(--sis-grey-100);
  padding: 0.8rem 1rem;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="time"]:hover,
input[type="date"]:hover,
input[type="tel"]:hover,
input:not([type]):hover,
select:hover,
textarea:hover {
  box-shadow: none;
  outline: 1px solid black;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: 1.5px solid var(--sis-green-600);
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="time"]:disabled,
input[type="date"]:disabled,
input[type="tel"]:disabled,
input:not([type]):disabled,
select:disabled,
textarea:disabled {
  background-color: var(--sis-grey-50);
  border: 1px solid var(--sis-grey-200);
  color: var(--sis-grey-300);
  outline: none;
}

input[type="text"]:disabled::placeholder,
input[type="email"]:disabled::placeholder,
input[type="url"]:disabled::placeholder,
input[type="password"]:disabled::placeholder,
input[type="number"]:disabled::placeholder,
input[type="time"]:disabled::placeholder,
input[type="date"]:disabled::placeholder,
input[type="tel"]:disabled::placeholder,
input:not([type]):disabled::placeholder,
select:disabled::placeholder,
textarea:disabled::placeholder{
  color: var(--sis-grey-300);
}

input[type="text"].error,
input[type="email"].error,
input[type="url"].error,
input[type="password"].error,
input[type="number"].error,
input[type="time"].error,
input[type="date"].error,
input[type="tel"].error,
input:not([type]).error,
select.error,
textarea.error {
  box-shadow: none;
  outline: 1px solid var(--error-color);
  color: var(--error-color);
}

input[type="text"]::placeholder.error,
input[type="email"]::placeholder.error,
input[type="url"]::placeholder.error,
input[type="password"]::placeholder.error,
input[type="number"]::placeholder.error,
input[type="time"]::placeholder.error,
input[type="date"]::placeholder.error,
input[type="tel"]::placeholder.error,
input:not([type])::placeholder.error,
select::placeholder.error,
textarea::placeholder.error {
  color: var(--error-color);
}

input[type="text"].error:focus,
input[type="email"].error:focus,
input[type="url"].error:focus,
input[type="password"].error:focus,
input[type="number"].error:focus,
input[type="time"].error:focus,
input[type="date"].error:focus,
input[type="tel"].error:focus,
input:not([type]).error:focus,
select.error:focus,
textarea.error:focus {
  box-shadow: none;
}

label p + input[type="text"],
label p + input[type="email"],
label p + input[type="url"],
label p + input[type="password"],
label p + input[type="number"],
label p + input[type="time"],
label p + input[type="date"],
label p + input:not([type]),
label p + textarea {
  margin-bottom: 0.313rem;
}

/* label */
label p {
  font-weight: 600;
}

/* React Select */

div.Select-control {
  border-radius: 0.5rem !important;
  background-color: var(--sis-grey-50);
  border: 1px solid var(--sis-grey-100);
}

div.Select-control:hover {
  box-shadow: none;
  border-color: black;
}

div.Select-input > input:focus {
  outline: unset;
}

div.Select-control:focus-within {
  box-shadow: none;
  background: var(--sis-grey-50);
  outline: 1.5px solid var(--sis-green-600);
}

/* Select styling */
div.Select--multi > div.Select-control div.Select-placeholder,
div.Select--multi div.Select-multi-value-wrapper,
div.Select--single div.Select-multi-value-wrapper,
div.Select--single > div.Select-control div.Select-value,
div.Select--single > div.Select-control div.Select-placeholder {
  padding: 0.8rem 1rem;
}

.sis-theme .page-background{
  border-radius: 1.25rem;
}

.material-icons,
.material-icons-outlined {
  color: var(--sis-material-icon);
}

button, .button {
  padding: 0.625rem 0.75rem;
  border-radius: 0.25rem;
  box-shadow: none;
  font-weight: 700;
}

button:hover,
.button:hover,
button.primary:hover,
.button.primary:hover {
  filter: unset;
  background-color: var(--sis-button-primary-hover);
}

button:disabled, .button:disabled {
  background-color: var(--sis-disable-button-background) !important;
  color: var(--sis-disable-button-color);
}

button.secondary, .button.secondary {
  background-color: var(--sis-button-secondary);
  border: none;
}

button.secondary:hover, .button.secondary:hover {
  background-color: var(--sis-grey);
  color: var(--sis-main-text);
  border-color: var(--sis-grey);
}

input[type="checkbox"].toggle:checked:before {
  background-color: #C4F5CB;
}

/* Toggle slide transition */
input[type="checkbox"].toggle:not(:checked):after {
  transition: left 0.3s ease;
  left: 0;
}

input[type="checkbox"].toggle:checked:after {
  transition: left 0.3s ease;
  left: 1.125rem;
}

input[type="checkbox"]:hover:disabled:after,
input[type="radio"]:hover:disabled:after {
  cursor: not-allowed;
}

/* Checkbox and radio button hover transitions */
input[type="checkbox"]:hover:not(:disabled):after,
input[type="radio"]:hover:not(:disabled):after {
  background-color: #E3E3E3;
  transition: box-shadow 0.3s ease;
  box-shadow: 0px 0px 0px 5px #E3E3E3;
  border-radius: 50%;
}

input[type="checkbox"]:hover:checked:after,
input[type="radio"]:hover:checked:after {
  background-color: #4FCC161A;
  box-shadow: 0px 0px 0px 5px #4FCC161A;
  border-radius: 50%;
}

/* Toggle hover transitions */
input[type="checkbox"].toggle:not(:disabled):hover:after {
  transition: all 0.3s ease;
  background-color: #858585;
  box-shadow: 0px 0px 0px 10px #C8C8C84A;
}

input[type="checkbox"].toggle:not(:disabled):hover:checked:after {
  transition: all 0.3s ease;
  background-color: var(--primary-color);
  box-shadow: 0px 0px 0px 10px #4FCC162A;
}

.material,
.material-section  {
  box-shadow: none;
  border: 1px solid var(--sis-grey-300);
}

.card-l2:hover,
.l2-material-section:hover {
  box-shadow: none;
  border: 1px solid var(--sis-green-600);
}