/* Remove default styles */
button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

/* Modal window */
dialog {
    border-radius: 66px;
    background-color: black;
    color: white;

    font-family: proxima-nova, sans-serif;
    text-align: center;

    border: 2px solid #434343;

    padding: 0;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}


/* Specific modal windows */
#reg-dialog {
    width: 592px;
    height: 540px;
    overflow: visible;
}

#login-dialog {
    width: 592px;
    height: 473px;
    overflow: visible;
}

#recover-password-dialog {
    width: 592px;
    height: 473px;
    overflow: visible;
}

#download-dialog {
    width: 592px;
    height: 610px;
}

#profile-dialog {
    width: 633px;
    height: 473px;
    overflow: visible;
}



/* Common elements in modals */
input {
    width: 75%;
    max-width: 355px;
    height: 47px;
    border-radius: 10px;
    background-color: black;

    border: 1.5px solid #434343;

    color: #B3B7BC;

    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0;
    text-align: left;
    padding: 10px 0 10px 16px;

}

input:focus {
    color: #00D95F;
    box-shadow: 0 0 1.5px #00D95F;
    border: 1.5px solid #00D95F;
    outline: none;
}


.modal-box {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 40px;

    position: relative;
}

#profile-modal-box {
    height: 100%;

    display: flex;
    flex-direction: row;
}

.modal-columns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
    width: 100%;
    text-align: center;

}

.modal-btn {
    width: 75%;
    max-width: 372px;
    height: 53px;

    border-radius: 13px;
    background: #00D95F40;
    color: #00D95F;

    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: 0;
    text-align: center;

    padding: 12px 0 12px 0;
}

.modal-confirm-btn {

}

.close-modal-btn {
    color: #00D95F;

    position: absolute;
    right: 0;
    top: 0;
    margin-top: 2rem;
    margin-right: 2rem;
}

.modal-header {
    margin-top: 50px;
}

.modal-under-text-link{
    text-decoration: underline;
}

/* Specific elements in modals */
.modal-under-text {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    text-align: left;
    color: #B3B7BC;

}

#no-acc {
    text-align: right;
}

#forgot-pass {
    text-align: center;
}

.login-under-text {
    width: 55%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}


/* Profile modal */
.profile-left {
    width: 45%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    outline: 2px solid #434343;
    border-radius: 66px;


}

.profile-right {
    width: 55%;
    height: 62%;
    margin-top: 3rem;
    padding-left: min(2rem, 3%);
    padding-right: min(2rem, 3%);

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
}

.profile-status{
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    color: #00D95F;


}

.pass-status{
    height: 66px;
    width: 100%;
    max-width: 220px;
    min-width: 160px;

    border: 2px solid #434343;
    border-radius: 19px;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap:1rem;
    margin-top: 10px;
}

.pass-status span{
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0;
    text-align: left;

    width: 40%;

}

.about-profile{
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    color: #B3B7BC;

}

.profile-left img{
    width: 232px ;
}

.profile-btn{
    width: 100%;
    max-width: 220px;

    border-radius: 13px;
    background: #00D95F40;
    color: #00D95F;

    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;

    padding: 12px 0 12px 0;

}

.skin-preview {
    image-rendering: -moz-pixelated; /* Firefox */
    -ms-interpolation-mode: nearest-neighbor;  /* IE */
    image-rendering: pixelated; /* Стандартное свойство */

    max-width: 66%;
    overflow: hidden;
}

#slim-skin {
    margin-top: 10px;
    
    max-width: 224px;
}

#slim-skin-checkbox {
    max-width: 20px;
    max-height: 20px;

    position: relative;
    vertical-align: middle;

    accent-color: #00D95F;
}

#slim-skin-label {
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    text-align: left;
    color: white;

    position: relative;
    vertical-align: middle;

    margin-left: 5px;
}

.capes-dropdown {
    max-width: 224px;

    margin-top: 10px;

    height: 47px;
}

.capes-dropdown-control {
    border-radius: 10px !important;
    background-color: black !important;

    border: 2px solid #434343 !important;

    color: #B3B7BC !important;
}

.unlogin-button-container {
    margin-top: 20px;
    cursor: pointer;
}

.unlogin-button {
    max-width: 200px;
    padding: 10px 15px 10px 15px;
    border: 2px solid #434343;
    border-radius: 19px;
}

.launcher-button {
    display: flex;
    flex-direction: row;

    max-width: 492px;
    padding: 25px 30px 25px 30px;
    border-radius: 38px;
    border: 1px solid #434343;
    gap: 15px;

}

.launcher-heading {
    margin: 0 0 5px;
}

.launcher-text {
    text-align: left;
    max-width: 322px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.launcher-under-text {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    color: #B3B7BC;


}

#error-dialog{
    /* width: 360px; */
    height: 66px;

    border-radius: 19px;
    background-color: #380505;
    border: none;

    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    top: 115%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

#error-dialog:focus{
    outline: none;
}

#error-modal-box{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    gap: 0;
}

.error-text{
    color: #E21515;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0;
    text-align: center;
}



#ok-dialog{
    width: 360px;
    height: 66px;

    border-radius: 19px;
    background-color: #083805;
    border: none;

    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    top: 115%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

#ok-dialog:focus{
    outline: none;
}

#ok-modal-box{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    gap: 0;
}

.ok-text{
    color: #15e24c;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0;
    text-align: center;
}