/*
Color pallete: #d5b0d8  #ffe4f4  #e0e9f1  #c5d6e4  #a9c2d7
#e5c36c
 */
/*Generic styles */
:root {
  --prim-color: #607D8B;
  --sec-color: #FFC107;
  --sec-light: #FFEB3B;
  --sec-faint: #FFC10740;
  --prim-faint: #607D8B26;
  --setting-back: #d5b0d852;
  --setting-shadow: blueviolet;
  --toggle-off: slategray;
  --toggle-off-hover: yellowgreen;
  --toggle-on: slateblue;
  --toggle-on-hover: palevioletred;
  --content-shadow: blue;
  --sec-dark: #804E17;
}
@font-face {
    font-family: galvanize;
    src: url("./galvanize.woff2");
}
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: galvanize;
  font-size: 1.2em;
  text-align: center;
}

/*Input elements*/
select{
    text-align-last: center;
}
.inputElem{
    width: 100%;
    overflow-y: auto;
    color: grey;
    background-color: var(--prim-faint);
    border-radius: 0.5em;
    border-style: dotted;
    border-color: var(--sec-dark);
    border-width: thin;
    font-family: galvanize;
    font-size: 100%;
    overflow: hidden;
    text-align: center;
}
.inputSmall{
    width: 5em;
    overflow-y: auto;
    color: grey;
    background-color: var(--prim-faint);
    border-radius: 0.5em;
    border-style: dotted;
    border-color: var(--sec-dark);
    border-width: thin;
    font-family: galvanize;
    font-size: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0.5em;
}
.normalButton {
    color: #FFFFFF;
    background-color: var(--prim-color);
    font-size: 100%;
    border: none;
    transition-duration: 0.5s;
    border-radius: 0.5em;
    font-family: galvanize;
    cursor: pointer;
    border-style: dotted;
    border-width: thin;
}
.normalButton:hover {
    color: #000000;
    background-color: var(--sec-color);
}
.normalButton:disabled {
    background-color: #ccc;
}

/*Toggle Button Switch*/
.toggle {
  cursor: pointer;
  position : relative ;
  display : inline-block;
  width : 2.15em;
  height : 1em;
  background-color: var(--toggle-off);
  border-radius: 1em;
}
.toggle:hover{
  background-color: var(--toggle-off-hover);
}
.toggle:after {
  content: 'OFF';
  position: absolute;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background-color: white;
  top: 0.05em;
  left: 0.1em;
  transition:  all 0.5s;
  text-align: center;
  line-height: 1.3em;
  font-size: 0.7em;
}
input[type='checkbox'] {
  display : none;
}
input[type='checkbox']:checked + .toggle {
  background-color: var(--toggle-on);
}
input[type='checkbox']:checked + .toggle:hover {
  background-color: var(--toggle-on-hover);
}
input[type='checkbox']:checked + .toggle:after {
  left : 1.7em;
  content: 'ON';
}



/*HTMX Inactive button during AJAX Request*/
.htmx-request {
  z-index:-1;
  background-color:gray;
}

/*Settings Widget*/
#settings {
  font-size: 1.5em;
  position: fixed;
  top: 0;
  right: 0;
  width: 32;
  height: 32;
  margin: 1em;
  fill: white;
  background-color: none;
  border-radius: 15%;
  filter: drop-shadow(5px 5px 5px var(--setting-shadow));
  transition: all 1s;
}
#settings:hover {
  width: 160;
  height: 160;
  fill: white;
  background-color: var(--setting-back);
  filter: drop-shadow(5px 5px 5px white);
}
#settings:hover > div {
  opacity: 1;
}
#settings > div {
  height: 50%;
  display: grid;
  align-content: space-evenly;
  justify-items: center;
  opacity: 0;
  overflow: hidden;
  transition: all 1s ease-in-out;
}

/*APP Specific Styles*/
#bgfar {
  position: absolute;
  width: 125%;
  height: 100%;
  display: flex;
  overflow: hidden;
  background: url('/public/media/bgfar.jpg');
  background-repeat: no-repeat;
  background-attachment: local;
  background-size: 100% 100%;
}
#bgmid {
  position: absolute;
  width: 150%;
  height: 100%;
  display: flex;
  overflow: hidden;
  background: url('/public/media/bgmid.png');
  background-repeat: no-repeat;
  background-attachment: local;
  background-size: 100% 100%;
}
#content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: scroll;
  background: url('/public/media/bgnear.png');
  background-repeat: no-repeat;
  background-attachment: local;
  background-size: 100% 100%;
  filter: drop-shadow(2px 2px 6px var(--content-shadow));
}
@media (hover: hover) and (pointer: fine) {
  #content {
    overflow: hidden;
  }
}
#content > span {
  min-width: 50%;
  display: grid;
  align-items: center;
  justify-items: center;
}
#content > span > div {
  position: relative;
  display: inline-block;
  width: 12.5%;
  transition: width 1s, height 1s;
  overflow: hidden;
}
#content > span > div > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#content > span > div > div > div {
  height: 33.3333%;
  transition: filter 1s;
  position: relative;
  display: grid;
  align-content: center;
  > :first-child {
    opacity: 0;
    transition: opacity 1s;
    font-size: 3rem;
    padding: 1rem;
  }
}
#content > span > div > div > div:nth-child(1):after, #content > span > div > div > div:nth-child(3):after {
  opacity: 1;
  transition: opacity 1s;
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#content > span > div > div > div:nth-child(1):hover, #content > span > div > div > div:nth-child(3):hover {
  > :first-child {
    opacity: 1;
    z-index: 1;
  }
}
#content > span > div > div > div:nth-child(1):hover:after, #content > span > div > div > div:nth-child(3):hover:after {
  opacity: 0;
}
#content > span > div > div > div:nth-child(2):hover {
  filter: none;
}
#news:hover, #alerts:hover, #plans:hover, #users:hover {
  width: 85%;
  height: 85%;
  > svg { filter: none; }
  > div { opacity: 1; }
}
#news{
  height: 40.74%;
  > div > div:nth-child(1):after {
    background: url('/public/media/top_news.svg') top center / 100% 100% no-repeat;
  }
  > div > div:nth-child(2) {
    filter: sepia(1);
    background: url('/public/media/news.svg') top center / 100% 100% no-repeat;
  }
  > div > div:nth-child(3):after {
    background: url('/public/media/live_feed.svg') top center / 100% 100% no-repeat;
  }
}
#alerts{
  height: 63.15%;
  > div > div:nth-child(1):after {
    background: url('/public/media/alert_setup.svg') top center / 100% 100% no-repeat;
  }
  > div > div:nth-child(2) {
    filter: sepia(1);
    background: url('/public/media/alerts.svg') top center / 100% 100% no-repeat;
  }
  > div > div:nth-child(3):after {
    background: url('/public/media/unit_conf.svg') top center / 100% 100% no-repeat;
  }
}
#plans{
  height: 52.04%;
  > div > div:nth-child(1):after {
    background: url('/public/media/free_plan.svg') top center / 100% 100% no-repeat;
  }
  > div > div:nth-child(2) {
    filter: sepia(1);
    background: url('/public/media/plans.svg') top center / 100% 100% no-repeat;
  }
  > div > div:nth-child(3):after {
    background: url('/public/media/paid_plan.svg') top center / 100% 100% no-repeat;
  }
}
#users{
  height: 51.85%;
  > div > div:nth-child(1):after {
    background: url('/public/media/sign_up.svg') top center / 100% 100% no-repeat;
  }
  > div > div:nth-child(2) {
    filter: sepia(1);
    background: url('/public/media/users.svg') top center / 100% 100% no-repeat;
  }
  > div > div:nth-child(3):after {
    background: url('/public/media/log_in.svg') top center / 100% 100% no-repeat;
  }
}
#news > svg, #alerts > svg, #plans > svg, #users > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(5px 5px 5px white);
}
#news > div, #alerts > div, #plans > div, #users > div {
  opacity: 0;
  position: relative;
  transition: opacity 1s;
}