body::-webkit-scrollbar {
    width: 10px;               /* ширина scrollbar */
  }
  body::-webkit-scrollbar-track {
    background: #000000;        /* цвет дорожки */
  }
  body::-webkit-scrollbar-thumb {
    background-color: #BF17C2;    /* цвет плашки */
    border-radius: 10px;       /* закругления плашки */
    border: 2px solid black;  /* padding вокруг плашки */
  }


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #D9D9D9;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #D9D9D9;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:   #D9D9D9;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #D9D9D9;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #D9D9D9;
}
::placeholder { /* Most modern browsers support this now. */
   color:    #D9D9D9;
}


img{
    -webkit-user-drag: none;
}
.edit {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    filter: brightness(50%);
  }

  @media only screen and (max-width: 600px){
    .edit {
        display: none;
      }
  }

.login-pan{
    /* z-index: 1; */
    /* background-color: #282828; */
    background-color: #161616;
    /* background: linear-gradient(90deg, rgba(46, 46, 46, 0.3) 0%, rgb(40, 40, 40) 15%); */
    border-top-left-radius: 1vw;
    border-bottom-left-radius: 1vw;
    width: 40vw;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

@media only screen and (max-width: 600px){
    .login-pan{
        width: 100%;
        border-radius: 0;
    }
}

.login-pan img{
    position: absolute;
    left: 0; right: 0;
    top: 15vh;
    margin: auto;
    width: 16vw;
    
}

@media(max-width: 600px){
    .login-pan img{
        position: absolute;
        left: 0;
        right: 0;
        top: 7vh;
        margin: auto;
        width: 83vw;
        
    }
}




.form{
    margin-top: 30vh;
}

@media(max-width: 600px){
    .form{
        margin-top: 22vh;
    }
}

.form .input-field {
    position: relative;
    height: 5vh;
    width: 100%;
    margin-top: 4vh;
}
.input-field input {
    position: absolute;
    left: 0; right: 0;
    margin: auto;
    height: 5vh;
    width: 25vw;
    padding: 0 1.5vw;
    background-color: #d9d9d921;
    border-radius: 1.2vw;
    border: solid 0.5vh white;
    outline: none;
    color: white;
    font-family: "Press Start 2P", system-ui;
    font-size: 0.7vw;
    /* border-bottom: 2px solid #ccc; */
    /* border-top: 2px solid transparent; */
    transition: all 0.2s ease;
}

@media(max-width: 600px){
    .input-field input {
        width: 83vw;
        padding: 0 1.5vw;
        background-color: #d9d9d921;
        border-radius: 8.2vw;
        border: solid 0.5vh white;
        outline: none;
        color: white;
        font-family: "Press Start 2P", system-ui;
        font-size: 2.7vw
    }
}

.input-field i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 23px;
    transition: all 0.2s ease;
}
.input-field input:is(:focus, :valid)~i {
    color: #4070f4;
}
.input-field i.icon {
    left: 0;
}
.input-field i.showHidePw {
    right: 0;
    cursor: pointer;
    padding: 10px;
}
.form .checkbox-text {
    font-family: "Press Start 2P", system-ui;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8vw;
    margin-left: 6vw;
    margin-top: 4vh;
}

@media(max-width: 600px){
    .form .checkbox-text {
        font-size: 2.8vw;

    }
}

.checkbox-text .checkbox-content {
    display: flex;
    align-items: center;
}
.checkbox-content input {
    width: 1vw;
    height: 2vh;
    margin-right: 0.5vw;
    accent-color: #BF17C2;
}

@media(max-width: 600px){

    .checkbox-content input {
        width: 10vw;
        height: 2vh;
        margin-right: 0.5vw;
        accent-color: #BF17C2;
    }

}

.form .text {
    font-family: "Press Start 2P", system-ui;
    line-height: 150%;
    color: white;
    font-size: 0.7vw;
}

@media(max-width: 600px){
    .form .text {
        font-size: 3.7vw;
    }
}


.form a.text {
    color: #BF17C2;
    text-decoration: none;
    transition: all 0.1s ease;
}
.form a:hover {
    color: #5e0c5f;
    /* text-decoration: underline; */
}

a, h1, h2, h3, h4, h5, h6, p {
    color: #fff;
    font-family: "Press Start 2P", system-ui;
    text-decoration: none;
}

.form .text-back{
    font-size: 0.7vw;
    text-align:center ;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    /* margin-left: 15vw; */
    margin-top: 5vh;
}

@media(max-width: 600px){
    .form .text-back{
        font-size: 3.7vw;
    }    
}

.form .text-back:hover{
    color: #BF17C2;
}
 

.form .button {
    margin-top: 4.5vh;
}

@media(max-width: 600px){
    .form .button {
        margin-top: 11.5vh;
    }
}

.form .button button {
    position: absolute;
    left: 0; right: 0;
    margin: auto;

    height: 5vh;
    width: 10vw;
    border: none;

    background: none;
    cursor: pointer;
    transition: all 0.1s ease;
}

@media(max-width: 600px){
    .form .button button {
        width: 46%;
        top: -8vh;
    }
}



.form .button img{
    width: 11vw;
    margin-top: -15.3vh;
    transition: all 0.3s ease;
}

@media(max-width: 600px){
    .form .button img{
        width: 45vw;
        top: 15vh;
    }
}

.button img:hover {
    filter: drop-shadow(0 0.4vh 0 #ffffff);
    top: 14.3vh;
}

@media(max-width: 600px){
    .button img:hover {
        filter: drop-shadow(0 0.4vh 0 #ffffff00);

    }
}

.button img:active {
    filter: drop-shadow(0 0 0 #ffffff00);
    top: 15.3vh;
}

@media(max-width: 600px){
    .button img:active {
        filter: drop-shadow(0 0.2vh 0 #ffffff00);

    }
}

.form .login-signup {
    margin-top: 3vh;
    text-align: center;
}

@media(max-width: 600px){
    .form .login-signup {
        margin-top: -1vh;
    }
}




#loginMessage{
    position: absolute;
    /* top: 40vh; */
    bottom: 5vh;
    left: 0; right: 0;
    margin: auto;
    text-align: center;
}


#signMessage{
    position: absolute;
    /* top: 40vh; */
    bottom: 5vh;
    left: 0; right: 0;
    margin: auto;
    text-align: center;
}