/*********************************
    IMPORT MAIN STYLE SHEET
**********************************/
@import "./main.css";


/*********************************
             HEADER
**********************************/
.login_form{
    background-color:var(--primary);
}

.login_form header{
    width:100vw;
    height:100vh;
    overflow:hidden;
    position:relative;
    z-index:1;
    align-items:center;
    justify-content:center;
    color:var(--white);
}

.login_form header:before{
    content:"";
    position:absolute;
    width:400px;
    height:300px;
    transform:rotate(30deg);
    left:-100px;
    top:-150px;
    background-color:var(--secondary);
    z-index:-1;
}

.login_form header:after{
    content:"";
    position:absolute;
    width:400px;
    height:300px;
    transform:rotate(-30deg);
    right:-100px;
    bottom:-150px;
    background-color:var(--secondary);
    z-index:-1;
}

.login_form header .logo{
    position:absolute;
    top:1rem;
    left:2rem;
}

.login_form header form{
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    gap:1rem;
    border:1px solid rgba(255,255,255,0.4);
}

.login_form header form fieldset{
    padding:0;
    margin:0;
}

.login_form header form fieldset label{
    display:block;
    margin-bottom:5px;
}

.login_form header form input{
    width:100%;
    padding:1rem;
    background-color:transparent;
    border:1px solid rgba(255,255,255,0.4);
    color:var(--white);
}

.login_form header form .btn{
    height:auto;
    padding:1rem;
    width:100%;
}

@media (max-width:720px){
    .login_form header:before, .login_form header:after{
        width:200px;
        height:150px;
    }

    .login_form header:before{
        left:-40px;
        top:-80px;
    }

    .login_form header:after{
        right:-40px;
        bottom:-80px;
    }

    .login_form header{
        padding:0 !important;
    }

    .login_form header form{
        width:100%;
        border:0;
    }
}


/*EDITING FORM*/
.editing_form .left_section{
    padding-left:2rem;
}

.editing_form form{
    width:100%;
    grid-template-columns: 40vw 1fr;
}

.editing_form label input{
    display:none;
}

.editing_form header{
    height:30vh;
    width:100%;
    background-color:var(--secondary);
    position:relative;
}

.editing_form header .btn{
    position:absolute;
    bottom:1rem;
    right:1rem;
    z-index:1;
}

.profile_pic{
    max-width:512px;
    height:512px;
    position:relative;
    top:-2rem;
    overflow:hidden;
}

.profile_pic figure{
    width:100%;
    height:100%;
    overflow:hidden;
    border:2px solid var(--primary);
    position:relative;
}

.profile_pic figure img{
    object-fit:cover;
}

.profile_pic figcaption{
    position:absolute;
    bottom:5px;
    right:5px;
    z-index:1;
    color:var(--primary);
    background-color:var(--secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition:0.5s;
}

.profile_pic:hover figcaption{
    background-color:var(--gray);
    color:var(--secondary);
}

.editing_form table{
    width:100%;
    border-collapse:collapse;
    text-align:left;
    margin-top:1rem !important;
}

.editing_form table caption{
    white-space:nowrap;
    margin-bottom:1rem;
    text-align:left;
}

.editing_form table td{
    padding:1em;

}

.editing_form table th{
    white-space:nowrap;
    padding:1em;
    color:var(--gray);
    font-weight:400;
    text-align:left;
}

[contenteditable] {
    outline: 0px solid transparent;
    font-weight:500;
    position:relative;
    overflow-wrap: break-word;
    word-break: break-all;
    hyphens: auto;
}

[contenteditable]:after {
    content:"\f044";
    font-family:"FontAwesome";
    opacity:0.6;
    margin:0 10px;
}

.editing_form .right_section fieldset label{
    display:block;
    margin-bottom:5px;
}

.editing_form .tag{
    display:inline-block;
    margin:7px 5px;
}

.editing_form .tag label{
    white-space:nowrap;
    display:inline !important;
    cursor:pointer;
    padding:1px 10px;
    border-radius:20px;
    border:1px solid rgba(1,1,1,0.2);
    color:var(--gray);
    margin-bottom:0px;
}

.editing_form .tag input{
    display:none;
}

.editing_form .tag input:checked + label{
    background-color:var(--secondary);
}

.editing_form .right_section fieldset textarea{
    resize:none;
    width:100%;
}

.editing_form .right_section fieldset{
    padding:0;
    margin:0;
    margin-bottom:2rem;
}

.editing_form .left_section input{
    width:100%;
    border:0;
    background:transparent;
}

.editing_form input{
    width:100%;
}

@media (max-width:920px){
    .editing_form form{
        grid-template-columns: 1fr;
    }

    .editing_form .left_section{
        padding-left:0;
        padding:1rem;
    }

    .editing_form header{
        height:15vh;
    }
}

@media (max-width:620px){
    .profile_pic{
        max-width:100%;
        height:200px;
    }

    .editing_form header{
        height:10vh;
    }

    .editing_form .left_section .medium{
        text-align:center;
        font-size:22px !important;
    }
}