
#forgetPasswordWindow>div{
    width: 100%;
    max-width: 500px;
}

#forgetPasswordWindow .windowHeader>img{
    width: 40px;
}

#forgetPasswordWindow .windowHeader>span{
    position: absolute;
    right: 20px;
    top: 10px;
    color: var(--color-gray);
    padding: 4px;
    cursor: pointer;
}

#forgetPasswordWindow>div>div{
    display: flex;
    justify-content: center;
    padding: 0 60px;
}

#forgetPasswordWindow .regionName>div{
    font-size: 1.5rem;
    cursor: pointer;
}

#forgetPasswordWindow .regionName>div.active{
    color: var(--color-black);
}

#forgetPasswordWindow .regionName>div:not(.active){
    color: var(--color-gray-disable);
}

#forgetPasswordWindow .inputField{
    margin-bottom: 20px;
    padding: 0;
}

#forgetPasswordWindow .inputField>div{
    padding: 0;
}

#forgetPasswordWindow .inputField label{
    color: var(--color-gray);
    font-size: 13px;
}

#forgetPasswordWindow .inputField>input{
    width: 100%;
    border-radius: 20px;
    border: 1px solid var(--color-gray-light);
    padding: 3px 15px;
    background-color: var(--background-color);
}

#forgetPasswordWindow .buttonContainer.authorize{
    display: flex;
    justify-content: center;
    align-items: center;
}

#forgetPasswordWindow .buttonContainer.authorize button{
    background-color: var(--makeon-color);
    border: 1px solid var(--makeon-color);
    border-radius: 30px;
    color: var(--color-white);
    font-size: 14px;
    font-weight: bold;
    padding: 6px 10px;
    box-shadow: 5px 5px 10px -3px var(--shadow-color);
    width: 121px;
}



#loginRegisterWindow>div{
    width: 100%;
    max-width: 500px;
}

#loginRegisterWindow .windowHeader>span{
    position: absolute;
    right: 20px;
    top: 10px;
    color: var(--color-gray);
    padding: 4px;
    cursor: pointer;
}

#loginRegisterWindow .windowHeader>img{
    width: 40px;
}

#loginRegisterWindow>div>div{
    display: flex;
    justify-content: center;
    padding: 0 60px;
}

#loginRegisterWindow .regionName>div{
    font-size: 1.5rem;
    cursor: pointer;
}

#loginRegisterWindow .regionName>div.active{
    color: var(--color-black);
}

#loginRegisterWindow .regionName>div:not(.active){
    color: var(--color-gray-disable);
}

#loginRegisterWindow .inputField{
    margin-bottom: 20px;
    padding: 0;
}

#loginRegisterWindow .inputField>div{
    padding: 0;
}

#loginRegisterWindow .inputField label{
    color: var(--color-gray);
    font-size: 13px;
}

#loginRegisterWindow .inputField>input{
    width: 100%;
    border-radius: 20px;
    border: 1px solid var(--color-gray-light);
    padding: 3px 15px;
    background-color: var(--background-color);
}

#loginRegisterWindow .buttonContainer.register button{
    background-color: var(--makeon-color);
    border: 1px solid var(--makeon-color);
    border-radius: 30px;
    color: var(--color-white);
    font-size: 14px;
    font-weight: bold;
    padding: 6px 10px;
    box-shadow: 5px 5px 10px -3px var(--shadow-color);
    width: 121px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

#loginRegisterWindow .buttonContainer.register{
    position: relative;
}

#loginRegisterWindow .rememberMe{
    display: flex;
    justify-content: left;
    align-items: center;
}

#loginRegisterWindow .buttonContainer.authorize{
    display: flex;
    justify-content: right;
    align-items: center;
}

#loginRegisterWindow .buttonContainer.authorize button{
    background-color: var(--makeon-color);
    border: 1px solid var(--makeon-color);
    border-radius: 30px;
    color: var(--color-white);
    font-size: 14px;
    font-weight: bold;
    padding: 6px 10px;
    box-shadow: 5px 5px 10px -3px var(--shadow-color);
    width: 121px;
}

.forgetPasswordButton{
    margin-top: 20px;
    text-align: center;
}

.forgetPasswordButton>button{
    border: none;
    background-color: var(--color-white);
    font-size: 12px;
    color: var(--makeon-color);
}

#loginRegisterWindow [data-tip] {
    position:relative;
}
#loginRegisterWindow [data-tip]:before {
    content:'';
    display:none;
    content:'';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1a1a1a;	
    position:absolute;
    top:56px;
    left:35px;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
}
#loginRegisterWindow [data-tip]:after {
    display:none;
    content:attr(data-tip);
    position:absolute;
    top:61px;
    left:0px;
    padding:5px 8px;
    background:#1a1a1a;
    color:#fff;
    z-index:9;
    font-size: 0.75em;
    max-width: 304px;
    line-height:18px;
    border-radius: 3px;
    word-wrap:normal;
}
#loginRegisterWindow [data-tip]:hover:before,
#loginRegisterWindow [data-tip]:hover:after {
    display:block;
}



#nicknameWindow>div{
    width: 100%;
    max-width: 500px;
}

#nicknameWindow .windowHeader>span{
    position: absolute;
    right: 20px;
    top: 10px;
    color: var(--color-gray);
    padding: 4px;
    cursor: pointer;
}

#nicknameWindow .windowHeader>img{
    width: 40px;
}

#nicknameWindow>div>div{
    display: flex;
    justify-content: center;
    padding: 0 60px;
}

#nicknameWindow .regionName>div{
    font-size: 1.5rem;
    cursor: pointer;
}

#nicknameWindow .regionName>div.active{
    color: var(--color-black);
}

#nicknameWindow .regionName>div:not(.active){
    color: var(--color-gray-disable);
}

#nicknameWindow .inputField{
    margin-bottom: 20px;
    padding: 0;
}

#nicknameWindow .inputField>div{
    padding: 0;
}

#nicknameWindow .inputField label{
    color: var(--color-gray);
    font-size: 13px;
}

#nicknameWindow .inputField>input{
    width: 100%;
    border-radius: 20px;
    border: 1px solid var(--color-gray-light);
    padding: 3px 15px;
    background-color: var(--background-color);
}

#nicknameWindow .buttonContainer.register button{
    background-color: var(--makeon-color);
    border: 1px solid var(--makeon-color);
    border-radius: 30px;
    color: var(--color-white);
    font-size: 14px;
    font-weight: bold;
    padding: 6px 10px;
    box-shadow: 5px 5px 10px -3px var(--shadow-color);
    width: 121px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

#nicknameWindow .buttonContainer.register{
    position: relative;
}

#nicknameWindow .rememberMe{
    display: flex;
    justify-content: left;
    align-items: center;
}

#nicknameWindow .buttonContainer.authorize{
    display: flex;
    justify-content: right;
    align-items: center;
}

#nicknameWindow .buttonContainer.authorize button{
    background-color: var(--makeon-color);
    border: 1px solid var(--makeon-color);
    border-radius: 30px;
    color: var(--color-white);
    font-size: 14px;
    font-weight: bold;
    padding: 6px 10px;
    box-shadow: 5px 5px 10px -3px var(--shadow-color);
    width: 121px;
}

#nicknameWindow [data-tip] {
    position:relative;
}
#nicknameWindow [data-tip]:before {
    content:'';
    display:none;
    content:'';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1a1a1a;	
    position:absolute;
    top:56px;
    left:35px;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
}
#nicknameWindow [data-tip]:after {
    display:none;
    content:attr(data-tip);
    position:absolute;
    top:61px;
    left:0px;
    padding:5px 8px;
    background:#1a1a1a;
    color:#fff;
    z-index:9;
    font-size: 0.75em;
    max-width: 304px;
    line-height:18px;
    border-radius: 3px;
    word-wrap:normal;
}
#nicknameWindow [data-tip]:hover:before,
#nicknameWindow [data-tip]:hover:after {
    display:block;
}




#emailConfirmation>div{
    width: 100%;
    max-width: 500px;
}

#emailConfirmation .windowHeader>span{
    position: absolute;
    right: 20px;
    top: 10px;
    color: var(--color-gray);
    padding: 4px;
    cursor: pointer;
}

#emailConfirmation .windowHeader>img{
    width: 40px;
}

#emailConfirmation>div>div{
    display: flex;
    justify-content: center;
    padding: 0 60px;
}

#emailConfirmation .inputField{
    margin-bottom: 20px;
    padding: 0;
}

#emailConfirmation .inputField>div{
    padding: 0;
}

#emailConfirmation .inputField label{
    color: var(--color-gray);
    font-size: 13px;
}



#resetRequest>div{
    width: 100%;
    max-width: 500px;
}

#resetRequest .windowHeader>span{
    position: absolute;
    right: 20px;
    top: 10px;
    color: var(--color-gray);
    padding: 4px;
    cursor: pointer;
}

#resetRequest .windowHeader>img{
    width: 40px;
}

#resetRequest>div>div{
    display: flex;
    justify-content: center;
    padding: 0 60px;
}

#resetRequest .inputField{
    margin-bottom: 20px;
    padding: 0;
}

#resetRequest .inputField>div{
    padding: 0;
}

#resetRequest .inputField label{
    color: var(--color-gray);
    font-size: 13px;
}
