/*LIGHT-THEME*/

:root {
  --background: #fefffe;/*#fefffe #f6f8fa #ffffff*/
  --fontcolor: #222222;
}

body {
    color: var(--fontcolor);
    background-color: var(--background);
}

.header {
    color: var(--fontcolor);
    background-color: var(--background);
    box-shadow: 0 2px 4px 0 rgba(208, 208, 208, 0.5);
}

.button.button-primary-negative,
button.button-primary-negative {
  color: var(--background);
  background-color: #d80032;
  border-color: #d80032; }
.button.button-primary-negative:hover,
button.button-primary-negative:hover {
  color: var(--background);
  background-color: #b3002a;
  border-color: #b3002a; }

.button.button-primary-positive,
button.button-primary-positive {
  color: var(--background);
  background-color: #8dcb1a;
  border-color: #8dcb1a; }
.button.button-primary-positive:hover,
button.button-primary-positive:hover {
  color: var(--background);
  background-color: #7eb517;
  border-color: #7eb517; }

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    background-color: var(--background);
    color: var(--fontcolor);
    border-color: #D1D1D1;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  background-color: var(--background);
  color: var(--fontcolor); 
}

.icon-basic {
  filter: invert(6%) sepia(58%) saturate(0%) hue-rotate(215deg) brightness(102%) contrast(86%);
}

.reloadicon {
    filter: invert(99%) sepia(13%) saturate(2%) hue-rotate(295deg) brightness(112%) contrast(100%);
}

.modal {
  box-shadow: 2px 2px 4px 2px rgba(208, 208, 208, 0.5);
  background-color: #ffffff;
}

.card {
  box-shadow: 2px 2px 4px 2px rgba(208, 208, 208, 0.5);
}