/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
  body {
    font-family: sans-serif;
    /*font-size: 32px;*/
  }

  .header {
    & svg {
      height: .5em;
      fill: #CDCDCD;
    }
    & a {
      text-decoration: none;
      color: rgb(0, 0, 0, 54%);
      margin-right: .6em;
      margin-left: .6em;
    }
  }

  .main {
    
    margin: 5%;
    .descbtn {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: center;
    }

    .users {
      .user-list {
        list-style: none;
        padding: 0;
        .user-li {
          margin-bottom: .6em;
          padding: .4em .4em .4em 1.2em;
          background: #f5f5f5;
          border-radius: .3em;
          height: 2em;
          display: flex;
          align-items: center;
          justify-content: space-between;
          & button {
            width: 8.5em;
            padding: .6em;
            font-size: 1em;
            border-radius: .6em;
            border-style: none;
            box-shadow: 0px .6em 1em 0px rgb(0 0 0 / 11%);
            background-color: #DBF2FF;
            &:active, &:hover {
              background-color: #B8E5FF;
            } 
            & svg {
              height: .5em;
              fill: #CDCDCD;
            }
          }
        }
      }
    }

    .page {
      display: flex;
      align-items: baseline;
      justify-content: center;
      & input {
        font-size: 1em;
      }
      & form {
        display: flex;
        align-items: center;
      }
    }

    /* User Page */

    &.--user {
      .readonly {
        font-size: 1em;
        width: 27em;
        height: 100%;
        resize: none;
        background: #F5F5F5;
        border: 0;
        padding: .6em;
        border-radius: .6em;
        margin-bottom: .6em;
      }
      .btn-user {
        width: 28.4em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        & button {
          width: 13.5em;
          padding: .6em;
          font-size: 1em;
          border-radius: .6em;
          border-style: none;
          box-shadow: 0px .6em 1em 0px rgb(0 0 0 / 11%);
          &#edituser {
            background-color: #DBF2FF;
            &:active, &:hover {
              background-color: #B8E5FF;
            } 
          }
        }
      }
    }
    /* User Page end*/

    /* User Edit*/
    &.--edituser, &.--new-user {
      .--alert {
        vertical-align: middle;
        display: flex;
        width: 50%;
        position: absolute;
        left: 25%;
        top: 50%;
        transform: translateY(-50%);
        border-color: #73CDFF;
        border-width: revert-layer;
        border-style: solid;
        border-radius: 1em;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        
        .--text-delete {
          margin: 3em 0 3em 0;
        }

        #savebtns {
          margin-top: 1em;
          display: flex;
          align-items: center;
          width: 100%;
        }
      }

      .settings {
        &.--form {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          & label {
            display: flex;
            align-items: center;
          }
          #savebtns {
            margin-top: 1em;
            display: flex;
            align-items: center;
            width: 100%;
          }
        }
      }
      
      & input {
        padding: .6em;
        font-size: 1em;
        border: 0;
        border-radius: .6em;
        height: 1.8em;
        background-color: #F5F5F5;
        outline-color: #DBF2FF;
        &.checkbox {
          padding: 0;
        }
        &.time {
          width: calc(100% - 1.2em);
        }
      }

      & button {
        border-radius: .6em;
        border: 0;
        font-size: 1em;
        width: 100%;
        height: 3em;
        background-color: #DBF2FF;
        &:active, &:hover {
          background-color: #B8E5FF;
        }
        &.--save-settings {
          margin: 1em;
          box-shadow: 0px .6em 1em 0px rgb(0 0 0 / 11%);

          &#deluser {
            background-color: #FFDBDB;
            &:active, &:hover {
              background-color: #eccaca;
            } 
          }
        }
      }
  
      .infoaboutform {
        padding: .6em;
        background-color: #F5F5F5;
        border-radius: .6em;
      }
  
      .comaboutform {
        padding: .6em;
        background-color: #DBF2FF;
        border-radius: .6em;
      }

      #wrongtoken {
        background-color: #FADCDC;
        &:active, &:hover {
          background-color: #F0BEBE;
        }
      }
    
      #righttoken {
        background-color: #E8FADC;
        &:active, &:hover {
          background-color: #D2F0BE;
        }
      }
  
      .stroke {
        height: 3em;
      }

      /* ToolTip */

      .tooltip-toggle {
        width: 2em;
        height: 2em;
        border-radius: 6em;
      }

      .tooltip-toggle:hover + .tooltip-text, .tooltip-toggle:focus + .tooltip-text {
        display: block;
      }

      .tooltip-text {
        position: absolute;
        background-color: #333333; /* Цвет фона */
        color: #FFFFFF; /* Цвет текста */
        font-size: 1em; /* Размер текста */
        padding: 20px 18px 18px 22px; /* Отступы внутри элемента */
        border-radius: 10px; /* Скругление углов */
        width: 256px; /* Ширина элемента */
        transform: translateX(+50%); /* Сдвиг элемента по горизонтали */
        display: none; /* Скрываем элемент по умолчанию */
      }
    }
    /*End of user edit*/
  }

  .sortdiv {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    & select, input {
      font-size: 1em;
    }
  }
  .svgbtn {
    background: none;
    padding:0;
    border:0;
      svg {
        height: 2.5em;
      }
  }

  .txtsvgbtn {
    padding: .6em;
    border: 0;
    border-radius: .6em;
    background-color: #DBF2FF;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 1em;
    &:active, &:hover {
      background-color: #B8E5FF;
    } 
    svg {
      height: 1.5em;
    }
  }
  
  .footer {
    position: fixed;
    bottom: 0;
    right: .6em;
    .authdata {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }

  .no-auth {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    & p {
      text-align: center;
    }
    & svg {
      height: 5em;
      margin-bottom: 1em;
    }
    & input {
      padding: .6em;
      font-size: 1em;
      border-radius: .6em;
      border-style: none;
      outline-color: #DBF2FF;
      background-color: #DBF2FF;
      box-shadow: 0px .6em 1em 0px rgb(0 0 0 / 11%);
      &:active, &:hover {
        background-color: #B8E5FF;
      } 
    }
  }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  body {
    font-size: 16px;
  }

  .svgbtn svg{
    height: 1.5em;
  }
}