/*
** /styles/site_accessibility.css
*/

/********************************
** Configuration
********************************/

section.siteConfiguration {
  width: 100%;
  /*text-align: center;*/
}

/****************************
** Font Size
****************************/

section.siteConfiguration > p {
  margin: 0px 5px 0px 5px;
  padding: 5px 5px 5px 5px;
}

section.siteConfigurationFontSize {
  display: flex;
  flex-direction: row;
  flex: 100%;
  
  flex-wrap: wrap;
  justify-content: center;
}

section.siteConfigurationFontSize > div {
  text-align: center;
}

section.siteConfigurationFontSize > div#themeFontSizeDecrease,
section.siteConfigurationFontSize > div#themeFontSizeIncrease {
  flex: calc( 25% - 10px);
  height: 20px;
  margin: 5px 5px 5px 5px;
  
  cursor: crosshair;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

section.siteConfigurationFontSize > div#themeFontSizeReset {
  flex: calc( 50% - 12px);
  height: 20px;
  margin: 5px 5px 5px 5px;
  
  border: 1px solid var(--color-border-site-010);
  cursor: crosshair;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

section.siteConfigurationFontSize > div#themeFontSizeReset > span {
  vertical-align: center;
  font-size: 9pt;
}

section.siteConfigurationFontSize > div:hover {
  background-color: var(--color-background-theme-010);
}

section.siteConfigurationFontSize > div > span {
  font-size: var(--fontSize12);
}

/****************************
** Themes
****************************/

section.themeConfig {
  width: calc( 100% - 10px );
  margin: 5px 5px 5px 5px;
  
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

section.themeConfig > div {
  text-align: center;
}

section.themeConfig > div.themeConfigRow {
  display: flex;
  flex-direction: row;
  height: 20px;
  justify-content: center;
}
section.themeConfig > div.themeConfigRow:hover {
  :
}

section.themeConfig > div.themeConfigRow > div {
  flex: calc( 100% / 4 );
  height: 20px;
  cursor: crosshair;
}

section.themeConfig > div.themeConfigRow > div > span {
  font-size: 9pt;
  vertical-align: middle;
}

section.themeConfig > div.themeConfigRow > div#themeWhite {
  color: hsl(0, 0%, 10%);
  background-color: hsl(0, 0%, 100%);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeConfig > div.themeConfigRow > div#themeWhite:hover {
  background-color: hsl(0, 0%, 80%);
}

section.themeConfig > div.themeConfigRow > div#themeLight {
  color: hsl(0, 0%, 0%);
  background-color: hsl(0, 0%, 80%);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeConfig > div.themeConfigRow > div#themeLight:hover {
  background-color: hsl(0, 0%, 60%);
}

section.themeConfig > div.themeConfigRow > div#themeDark {
  color: hsl(0, 0%, 100%);
  background-color: hsl(0, 0%, 20%);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeConfig > div.themeConfigRow > div#themeDark:hover {
  background-color: hsl(0, 0%, 40%);
}

section.themeConfig > div.themeConfigRow > div#themeBlack {
  color: hsl(0, 0%, 90%);
  background-color: hsl(0, 0%, 0%);
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeConfig > div.themeConfigRow > div#themeBlack:hover {
  background-color: hsl(0, 0%, 20%);
}

/****************************
** Theme Colors
****************************/

section.themeColorsConfig {
  width: calc( 100% - 10px );
  margin: 10px 5px 5px 5px;
  text-align: center;
  
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

section.themeColorsConfig > div.themeColorsConfigRow {
  display: flex;
  flex-direction: column;
  height: 30px;
  opacity: 0.3;
}

section.themeColorsConfig > div.themeColorsConfigRow:hover {
  opacity: 1;
}

section.themeColorsConfig > div.themeColorsConfigRow > div.themeMonoChrome {
  flex: 100%;
  height: 10px;
  cursor: crosshair;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

section.themeColorsConfig > div.themeColorsConfigRow > div.themePolyChrome {
  display: flex;
  flex-direction: row;
  flex: 100%;
}

section.themeColorsConfig > div.themeColorsConfigRow > div.themePolyChrome > div {
  flex: calc( 100% / 72 );
  height: 20px;
  cursor: crosshair;
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

/****************************
** Theme Colors Special
****************************/

section.themeColorsConfigSpecial {
  width: calc( 100% - 10px );
  margin: 5px 5px 5px 5px;
  
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}

section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow {
  display: flex;
  flex-direction: row;
  height: 20px;
  justify-content: center;
  opacity: 0.3;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow:hover {
  opacity: 1;
}

section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div {
  flex: calc( 100% / 2 );
  height: 20px;
  cursor: crosshair;
}

section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div > span {
  font-size: 9pt;
  vertical-align: middle;
}

/* Fire */
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetFire1 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(60, 100%, 40%), hsl(180, 100%, 40%), hsl(300, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetFire1:hover {
  background: linear-gradient(to bottom left, hsl(60, 100%, 50%), hsl(180, 100%, 50%), hsl(300, 100%, 50%));
}

section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetFire2 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(300, 100%, 40%), hsl(60, 100%, 40%), hsl(180, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetFire2:hover {
  background: linear-gradient(to bottom left, hsl(300, 100%, 50%), hsl(60, 100%, 50%), hsl(180, 100%, 50%));
}

section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetFire3 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(180, 100%, 40%), hsl(300, 100%, 40%), hsl(60, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetFire3:hover {
  background: linear-gradient(to bottom left, hsl(180, 100%, 50%), hsl(300, 100%, 50%), hsl(60, 100%, 50%));
}

/* Valentines */
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetValentines1 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(305, 100%, 40%), hsl(275, 100%, 40%), hsl(350, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetValentines1:hover {
  background: linear-gradient(to bottom left, hsl(305, 100%, 50%), hsl(275, 100%, 50%), hsl(350, 100%, 50%));
}

section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetValentines2 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(350, 100%, 40%), hsl(305, 100%, 40%), hsl(275, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetValentines2:hover {
  background: linear-gradient(to bottom left, hsl(350, 100%, 50%), hsl(305, 100%, 50%), hsl(275, 100%, 50%));
}

section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetValentines3 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(275, 100%, 40%), hsl(350, 100%, 40%), hsl(305, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetValentines3:hover {
  background: linear-gradient(to bottom left, hsl(275, 100%, 50%), hsl(350, 100%, 50%), hsl(305, 100%, 50%));
}

/* Easter */
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetEaster1 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(60, 100%, 40%), hsl(180, 100%, 40%), hsl(300, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetEaster1:hover {
  background: linear-gradient(to bottom left, hsl(60, 100%, 50%), hsl(180, 100%, 50%), hsl(300, 100%, 50%));
}

section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetEaster2 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(300, 100%, 40%), hsl(60, 100%, 40%), hsl(180, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetEaster2:hover {
  background: linear-gradient(to bottom left, hsl(300, 100%, 50%), hsl(60, 100%, 50%), hsl(180, 100%, 50%));
}

section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetEaster3 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(180, 100%, 40%), hsl(300, 100%, 40%), hsl(60, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetEaster3:hover {
  background: linear-gradient(to bottom left, hsl(180, 100%, 50%), hsl(300, 100%, 50%), hsl(60, 100%, 50%));
}

/* Christmas */
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetChristmas1 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(0, 100%, 40%), hsl(120, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetChristmas1:hover {
  background: linear-gradient(to bottom left, hsl(0, 100%, 50%), hsl(120, 100%, 50%));
}

section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetChristmas2 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(120, 100%, 40%), hsl(0, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetChristmas2:hover {
  background: linear-gradient(to bottom left, hsl(120, 100%, 50%), hsl(0, 100%, 50%));
}

/* Halloween */
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetHalloween1 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(35, 100%, 40%), hsl(55, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetHalloween1:hover {
  background: linear-gradient(to bottom left, hsl(35, 100%, 50%), hsl(55, 100%, 50%));
}

section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetHalloween2 {
  color: hsl(0, 0%, 10%);
  background: linear-gradient(to bottom left, hsl(55, 100%, 40%), hsl(35, 100%, 40%));
  transition: background-color 0.2s ease-in-out 0.0s, border 0.2s ease-in-out 0.0s, color 0.2s ease-in-out 0.0s;
}
section.themeColorsConfigSpecial > div.themeColorsConfigSpecialRow > div#presetHalloween2:hover {
  background: linear-gradient(to bottom left, hsl(55, 100%, 50%), hsl(35, 100%, 50%));
}

/****************************
** Theme Colors Special
****************************/

section.settingsSave {
  margin-top: 10px;
}