html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.right {
  float: right;
}

.margins {
  margin-left: 7px;
  margin-right: 7px;
}

.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;

  .plate {
    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;

    }
  }
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  max-height: 90%;
  position: relative;
  transition: all 5s ease-in-out;
  overflow: scroll;

  dev {
    padding: 7px;
  }

  h2 {
    margin-top: 0;
    color: #333;
    font-family: Tahoma, Arial, sans-serif;
  }
  .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  .close:hover {
    color: #06D85F;
  }

  .content {
    max-height: 30%;
    overflow: scroll;
  }

  #deactivate {
    float: right;
  }

  #sign {
    padding-left: 7px;
  }
}

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

tsp-login {
  /**/
  
  *,*:before,*:after{box-sizing:border-box}

  .logo {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;
    height: 100%;
    width: 100%;
    z-index: 100;
  }
  img {
    z-index: 110;
    align-items: center;
    margin: auto;
    display: block;
  }

  .pod {
    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:#799D3F;}
    &:after{transform:rotate(135deg);background:#799D3F;}
  }
  
  .bottom{
    &:before{transform:rotate(-45deg);background:#799d3e;}
    &:after{transform:rotate(-135deg);background:#799d3e;}
  }
  
  .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%;
    }
  }
  
  /**/
}

#dll-list {
  display: none;
}