/*----------------CANDIDATE STYLES ---------------*/
/*--------------DEFAULT LIGHT THEME --------------*/
html {
  --background__default: rgb(240, 235, 248);
  --blockquote--border__default: rgb(0 0 0 / 20%);

  --font__default: 'Nunito Sans', sans-serif;
  --headings__default: rgb(0, 0, 0);
  --link__default: rgb(175, 56, 177);
  --link__hover: rgb(201, 92, 251);
  --outline__default: rgb(201, 92, 251 / 60%);
  --text__default: rgb(120, 120, 120);

  --header--background__default: rgb(100, 54, 161);
    --branding__default: rgb(120, 68, 152);
    --logo__default: url('../images/logo-black.svg');

  --accent__default: rgb(235, 73, 219);
  --error__default: rgb(227, 0, 0);
  --error--background__default: rgb(255, 242, 244);
  --information__default: rgb(60, 130, 249);
  --information--background__default: rgb(218, 242, 251);
  --success__default: rgb(56, 177, 83);
  --success--background__default: rgb(218, 251, 224);
  --warning__default: rgb(246, 117, 4);
  --warning--background__default: rgb(251, 241, 218);

  --interactive__default: rgb(175, 56, 177);
  --interactive__hover: rgb(201, 92, 251);
  --interactive--text__default: rgb(255, 255, 255);
  --interactive--secondary__default: rgb(133, 54, 161);
  --interactive--secondary__hover: rgb(133, 54, 161);
  --item--action--background__hover: rgb(60 130 249 / 10%);

  --availability--time-slot--background__default: rgb(255, 255, 255);
  --availability--time-slot--border__default: rgb(102, 102, 102);
  --availability--time-slot--text__default: rgb(120, 120, 120);
  --availability--is--today--time-slot--background__default: rgb(250 243 255);
  --availability--is--today--time-slot--border__default: rgb(119 30 189);
    --availability--is--today--column--day--background__default: rgb(206, 126, 238);
    --availability--is--today--column--day--text__default: rgb(206, 126, 238);
  --availability--is--past--time-slot--background__default: rgb(186, 186, 186);
    --availability--is--past--column--day--background__default: rgb(226, 217, 228);

  --form--field--background__default: rgb(255 255 255 / 80%);
  --form--field--border__default: rgb(210, 210, 215);
  --form--field--text__default: rgb(29, 29, 31);
    --form--field--icon__default: rgb(134, 134, 139);

  --highlighted-block--background: rgb(244, 251, 255);

  --meeting__default: rgb(175, 59, 177);
  --meeting--background__default: rgb(248, 248, 248);
  --meeting--box-shadow__default: none;
  --meeting--box-shadow__hover: rgb(0 0 0 / 20%);
  --meeting--actions--text__default: rgb(255, 255, 255);
  --meeting--actions--background__hover: rgb(0 0 0 / 20%);
  --meeting--accepted__default: rgb(56, 177, 83);
  --meeting--cancelled__default: rgb(246, 4, 4);
  --meeting--new-invitation--background__default: rgb(232, 152, 234);
  --meeting--new-invitation--heading__default: rgb(166, 13, 169);
  --meeting--new-invitation--text__default: rgb(255, 255, 255);

  --modal--background__default: rgb(241 242 243 / 90%);
  --modal--box-shadow__default: rgb(196 196 196 / 25%);
  --modal--border__default: rgb(245, 250, 255);

  --avatar--background__default: rgb(0 0 0 / 30%);
  --avatar--text__default: rgb(255, 255, 255);

  --month-picker--background__default: var(--background__default);
    --month-picker--header--background: var(--highlighted-block--background);
    --month-picker--year--background: transparent;
    --month-picker--year--text__default: var(--accent__default);
    --month-picker--month--text__default: var(--interactive__default);
    --month-picker--month--background__hover: var(--interactive__default);
    --month-picker--month--background__focus: var(--interactive__hover);
    --month-picker--month--text__hover: var(--interactive--text__default);
    --month-picker--month--selected--background__default: var(--accent__default);
    --month-picker--month--selected--text__default: rgb(255, 255, 255);

/* Candidate specific */
--text--shadow__default: rgb(144 94 207 / 25%);
--information-panel--left--background__default: rgb(234, 208, 255);
--information-panel--left--color__default: rgb(119, 30, 189);

}

/*--------------DEFAULT DARK THEME --------------*/
@media screen and (prefers-color-scheme: dark) {
  html {

    --background__default: rgb(42, 40, 44);
    --blockquote--border__default: rgb(255 255 255 / 20%);
  
    --font__default: 'Nunito Sans', sans-serif;
    --headings__default: rgb(201, 92, 251) /* rgb(102, 102, 102) */;
    --link__default: rgb(175, 56, 177);
    --link__hover: rgb(201, 92, 251);
    --outline__default: rgb(201 92 251 / 60%);
    --text__default: rgb(198, 199, 201) /* rgb(143, 145, 150)*/;
  
    --header--background__default: rgb(104, 47, 111);
      --branding__default: rgb(198, 199, 201);
      --logo__default: url('../images/logo-white.svg');
  
    --accent__default: rgb(235, 73, 219);
    --error__default: rgb(227, 0, 0);
    --error--background__default: rgb(71, 25, 32);
    --information__default: rgb(60, 130, 249);
    --information--background__default: rgb(25, 59, 72);
    --success__default: rgb(56, 177, 83);
    --success--background__default: rgb(25, 67, 32);
    --warning__default: rgb(246, 117, 4);
    --warning--background__default: rgb(68, 54, 26);

    --interactive__default: rgb(175, 56, 177);
    --interactive__hover: rgb(201, 92, 251);
    --interactive--text__default: rgb(255, 255, 255);
    --interactive--secondary__default: rgb(133, 54, 161);
    --interactive--secondary__hover: rgb(133, 54, 161);
    --item--action--background__hover: rgb(60 130 249 / 10%);
  
    --availability--time-slot--background__default: rgb(63, 62, 66);
    --availability--time-slot--border__default: rgb(102, 102, 102);
    --availability--time-slot--text__default:  rgb(198, 199, 201);
    --availability--is--today--time-slot--background__default: rgb(63 35 63);
    --availability--is--today--time-slot--border__default: rgb(175 56 177);
      --availability--is--today--column--day--background__default: rgb(40, 81, 59);
      --availability--is--today--column--day--text__default: rgb(201, 92, 251);
    --availability--is--past--time-slot--background__default: rgb(186, 186, 186);
      --availability--is--past--column--day--background__default: rgb(63, 62, 66);
  
    --form--field--background__default: rgb(53 51 54 / 80%);
    --form--field--border__default: rgb(73, 73, 79);
    --form--field--text__default: rgb(198, 199, 201);
      --form--field--icon__default: rgb(134, 134, 139);
  
    --highlighted-block--background: rgb(244 251 255 /10%);
  
    --meeting__default: rgb(175, 59, 177);
    --meeting--background__default: rgb(24, 25, 28);
    --meeting--box-shadow__default: none;
    --meeting--box-shadow__hover: rgb(0 0 0 / 20%);
    --meeting--actions--text__default: rgb(255, 255, 255);
    --meeting--actions--background__hover: rgb(0 0 0 / 20%);
    --meeting--accepted__default: rgb(56, 177, 83);
    --meeting--cancelled__default: rgb(246, 4, 4);
    --meeting--new-invitation--background__default: rgb(49, 25, 49);
    --meeting--new-invitation--heading__default: rgb(166, 13, 169);
    --meeting--new-invitation--text__default: rgb(198, 199, 201);
  
    --modal--background__default: rgb(20 20 21 / 90%);
    --modal--box-shadow__default: rgb(25 23 27 / 50%);
    --modal--border__default: rgb(20, 20, 27);
      --user--availability__default: rgb(32, 31, 31);

    --avatar--background__default: rgb(0 0 0 / 30%);
    --avatar--text__default: rgb(198, 199, 201);

    /* Candidate specific */
  --text--shadow__default: rgb(35 16 59 / 25%);
  --information-panel--left--background__default: rgb(49, 25, 49);
  --information-panel--left--color__default: /* rgb(119, 30, 189) */ rgb(192, 141, 232);
  }
}

body {
  height: 100%;
}

.page-container {
  height: 100%;
  padding-left: 0;
}

  .logo {
    margin: 0 0.5rem;
  }

  .logo span {
    width: auto;
  }

  #content {
    margin: 0;
    gap: 0;
  }

    .left--column,
    .right--column {
      padding: 1rem;
    }

    .left--column header {
      background-color: transparent;
      padding: 0 0 2rem 0;
    }

  .page-container .modal {
    width: 50%;
  }

    .modal--right .submit-buttons {
      margin-top: 3rem;
    }

  .logo span,
  .item--main-title h1 {
    text-shadow: 0 4px 6px var(--text--shadow__default);
  }

  .item--section-navigation h4 {
    color: var(--text__default);
  }

  .information-panel {
    background-color: var(--information-panel--left--background__default);
    color: var(--information-panel--left--color__default);
  }

  .dialog .secondary-button {
    color: currentColor;
  }

    .dialog .secondary-button:hover {
      border: 3px solid currentColor;
    }