:root {
  --primary-text-color: #222;
  --secondary-text-color: #fff;
  --primary-bg-color: #222;
  --secondary-bg-color: #fff;
  --tertiary-bg-color: #ddd;
}

body { 
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  margin: 0; //1em;

  background-color: var(--tertiary-bg-color);
  color: var(--primary-text-color);
  font-family: "Rubik", serif;
  font-size: 1.2rem;
  line-height: 1.6;

  min-height:100vh;
}


button { font-family: inherit; font-size: 75%; padding: 5px; }

/**/

dashboard-app {
  app-tab {
    display: none;
  }

  dll-login {
    /**/
    
    *,*:before,*:after{box-sizing:border-box}
    
    .container{
      position:absolute;
      width:100%;
      height:100%;
      overflow:hidden;
      
      &:hover,&:active{
        .top, .bottom{
          &:before, &:after{
            margin-left: 200px;
            transform-origin: -200px 50%;
            transition-delay:0s;
          }
        }
        
        .center{
          opacity:1;
          transition-delay:0.2s;
        }
      }
    }
    
    .top, .bottom{
      &:before, &:after{
        content:'';
        display:block;
        position:absolute;
        width:200vmax;
        height:200vmax;
        top:50%;left:50%;
        margin-top:-100vmax;
        transform-origin: 0 50%;
        transition:all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
        z-index:10;
        opacity:0.65;
        transition-delay:0.2s;
      }
    }
    
    .top{
      &:before{transform:rotate(45deg);background:#e46569;}
      &:after{transform:rotate(135deg);background:#ecaf81;}
    }
    
    .bottom{
      &:before{transform:rotate(-45deg);background:#60b8d4;}
      &:after{transform:rotate(-135deg);background:#3745b5;}
    }
    
    .center{
      position:absolute;
      width:400px;
      height:400px;
      top:50%;left:50%;
      margin-left:-200px;
      margin-top:-200px;
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding:30px;
      opacity:0;
      transition:all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
      transition-delay:0s;
      color:#333;
      
      input{
        width:100%;
        padding:15px;
        margin:5px;
        border-radius:1px;
        border:1px solid #ccc;
        font-family:inherit;
        font-size: 90%;
      }
    }
    
    /**/
  }
}

.loader {
  width:50px;
  height:50px;
  border-radius:50%;
  border:8px solid;
  border-color:#E4E4ED;
  border-right-color: #766DF4;
  animation:s2 1s infinite linear;
}
@keyframes s2 {to{transform: rotate(1turn)}}

dll-spinner {
  display: none;

  .container {
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;

    .center{
      position:absolute;
      width:400px;
      height:400px;
      top:50%;left:50%;
      margin-left:-200px;
      margin-top:-200px;
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding:30px;
      //opacity:0;
      //background-color: rgb(0, 0, 0);
      //transition:all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
      //transition-delay:0s;
      color:#333;

    }
  }
}

dll-heading {
  width: 100%;
  .heading {
      h1 {
        text-align: center;
      }
  }
}

dll-summary {
  .summary {
    width: 100%;
      div {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
        
        span {
          padding: 3px;
        }
        button {
          float: right;
          padding: 3px;
        }
      }
  }
}


.number {
	text-align: right;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem auto;
  max-width: 70ch
}

.tabs label {
  background: var(--primary-bg-color);
  color: var(--secondary-text-color);
  cursor: pointer;
  display: block;
  font-weight: 600;
  margin-right: 0.3rem;
  order: initial;
  padding: 1rem 2rem;
  transition: background ease 0.3s;
  width: 100%;
}

.tabs .tab-content {
  background: var(--secondary-bg-color);
  display: none;
  flex-grow: 1;
  padding: 1rem;
  width: 100%;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked + label {
  background: var(--secondary-bg-color);
  color: var(--primary-text-color)
}

.tabs input[type="radio"]:checked + label + .tab-content {
  display: block;
}

.tab-content tbody tr {
  cursor: pointer;
  transition: background ease 0.3s;
}

.tab-content tbody tr:hover {
  background-color: var(--tertiary-bg-color);
}

@media (min-width: 10em) {
  .tabs .tab-content {
	order: 99
  }
  
  .tabs label {
	order: 1;
  }
  
  .tabs label {
	margin-right: 0.3rem;
	margin-top: 0;
	width: auto;
  }
}