*, ::before, ::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Fredoka', sans-serif;
    color: #1D2A2E;
}
.account-reg{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
}

.account-cred{
    width: 50%;
    height: 100%;
}

.account-right{
    width: 50%;
    height: 100%;
    background: url('../3d/vault.svg') center center no-repeat, linear-gradient(180deg, rgba(229,235,242,1) 35%, rgba(110,189,235,1) 100%);
    background-size: 400px;
}

.account-cred{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 60px 0;
}

.creds p{
    text-align: center;
    opacity: 0.4;
}

.select-creds{
    width: 380px;
    height: 50px;
    background-color: #f0eff2;
    border-radius: 12px;
    display: flex;
    padding: 4px;
}

.selector-cred{
    height: 100%;
    width: 50%;
    background-color: white;
}

.select-creds div{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #848386;
}

.select-creds .active{
    background-color: white;
    border-radius: 10px;
    color: #1D2A2E;
}

form{
    width: 380px;
}

form button{
    background-color: #1D2A2E;
    outline: none;
    border: none;
    width: 100%;
    height: 60px;
    margin-top: 32px;
    border-radius: 8px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    transition: 0.4s;
    cursor: pointer;
}

form button:focus:not(:disabled){
    box-shadow: rgba(2, 102, 255, 0.3) 0 0 3px 5px;
}

form button:hover:not(:disabled){
    opacity: 0.8;
}

form button:disabled{
    background-color: #CCCCCC;
}

.form-input-wrap{
    padding: 16px;
    display: flex;
    border: solid 1px rgba(0,0,0,0.2);
    border-radius: 12px;

    /* box-shadow: rgba(106,48,255,0.0) 0 0 3px 5px; */
    transition: 0.4s;
}

.form-input-wrap:first-child{
    margin: 32px 0 12px 0px;
}

.form-input-wrap:focus-within{
    /* box-shadow: rgba(106,48,255,0.2) 0 0 3px 5px; */
    border-color: #1D2A2E;
}

.form-input-wrap:focus-within .form-input-icon{
    border-color: #1D2A2E;
}

.form-input-icon{
    width: 36px;
    display: flex;
    align-items: center;
    border-right: solid 1px rgba(0,0,0,0.2);
    transition: 0.4s;
}

.form-input-field{
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-input-field label{
    font-size: 10px;
    opacity: 0.6;
    margin-bottom: 4px;
    font-weight: 600;
}

.form-input-field input{
    outline: none;
    border: none;
    font-weight: 600;
}
.form-input-field input:placeholder-shown{
    opacity: 0.6;
}

.form-input-valid{
    display: flex;
    align-items: center;
    padding-left: 8px;

}

.verification-input {
    display: flex;
    justify-content: space-between;
    width: 300px;
    margin: 32px auto;
}

.verification-input input {
    font-size: 34px;
    width: 40px;
    border-radius: 6px;
    border: solid 1px rgba(0,0,0,0.2);
    height: 50px;
    caret-color: white;
    color: #1D2A2E;
    text-align: center;
    margin: 0 5px;
    outline: none;
    transition: 0.4s;
}

.verification-input input:focus {
    /* box-shadow: rgba(106,48,255,0.2) 0 0 3px 3px; */
    border-color: #1D2A2E;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

[data-tooltip] {
position: relative;
cursor: pointer;
}
[data-tooltip]:before,
[data-tooltip]:after {
line-height: 1;
font-size: .9em;
pointer-events: none;
position: absolute;
box-sizing: border-box;
display: none;
opacity: 0;
}
[data-tooltip]:before {
content: "";
border: 5px solid transparent;
z-index: 100;
}
[data-tooltip]:after {
content: attr(data-tooltip);
text-align: center;
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 12px 12px;
border-radius: 8px;
background: #FFCE44;
color: #FFFFFF;
z-index: 99;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
display: block;
opacity: 1;
}
[data-tooltip]:not([data-flow])::before,
[data-tooltip][data-flow="top"]::before {
bottom: 100%;
border-bottom-width: 0;
border-top-color: #FFCE44;
}
[data-tooltip]:not([data-flow])::after,
[data-tooltip][data-flow="top"]::after {
bottom: calc(100% + 5px);
}
[data-tooltip]:not([data-flow])::before, [tooltip]:not([data-flow])::after,
[data-tooltip][data-flow="top"]::before,
[data-tooltip][data-flow="top"]::after {
left: 50%;
-webkit-transform: translate(-50%, -4px);
        transform: translate(-50%, -4px);
}
[data-tooltip=""]::after, [data-tooltip=""]::before {
display: none !important;
}


.ToolTipHidden::after, .ToolTipHidden::before{
    visibility: hidden !important;
}