*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{

    --body-color: #E5E4E2;
    --side-bar-color:#fff;
    --primary-color:#6956FE;
    --primary-color-light:#F6F5FF;
    --toggle-color:#DDD;
    --text-color:#707070;
    --card-color:rgb(247, 247, 247);

    --tran-02: all 0.2 ease;
    --tran-03: all 0.3 ease;
    --tran-04: all 0.4 ease;
    --tran-05: all 0.5 ease;

}

body.darck{

    --body-color: #2c2e30;
    --side-bar-color:#161718;
    --primary-color:#b5ace7;
    --primary-color-light:#3A3B3C;
    --toggle-color:#fff;
    --text-color:#CCC;
    --card-color:#424446;
}

/*==============Body==========*/
body{
    height: 100vh;
    background: var(--body-color);
    transition: 1s ease 0.3s;
    overflow-y: visible;
}












/* validated forms */



    .container .containerForm .form{
        gap: 25px;
    }


    .container .containerForm .form h2{
        color: var(--text-color);
        font-weight: 500;
        letter-spacing: 0.1em;
    }

    .container .containerForm .form .inputBox{

        position: relative;
        width: 98%;

    }


    .container .containerForm .form .inputBox select,
    .container .containerForm .form .inputBox input{

        padding: 12px 10px 12px 48px;
        border: none;
        width: 100%;
        background: var(--body-color);
        border: 1px solid green;
        color: var(--text-color);
        font-weight: 300;
        border-radius: 25px;
        font-size: 1em;
        box-shadow: -5px -5px 15px rgb(29, 36, 28), 5px 5px 15px rgb(75, 100, 71);
        transition: 0.5s;
        outline: none;

    }

    .container .containerForm .form .inputBox span{

        position: absolute;
        left: 0;
        padding: 12px 10px 12px 48px;
        pointer-events: none;
        font-size: 1em;
        font-weight: 300;
        transition: 0.5s;
        letter-spacing: 0.2em;
        color: var(--text-color);


    }

    .container .containerForm .form p{

        color: #CCC;
        font-weight: 300;
        font-size: 20px;
    }

    .container .containerForm .form p a{

        color: blue;
        font-weight: bold;
        font-size: 20px;
        list-style: none;

    }


    .container .containerForm .form p i{
        width: 25px;
        padding: 2px 0;
        padding-right: 8px;
        font-size: 20px;
        color: #00dfc4;
        border-right: 1px solid  #00dfc4;

    }
    .container .containerForm .form .inputBox select:valid ~ span,
    .container .containerForm .form .inputBox select:focus ~ span,
    .container .containerForm .form .inputBox input:valid ~ span,
    .container .containerForm .form .inputBox input:focus ~ span{

        color:  #00dfc4;
        border: 1px solid #00dfc4;
        border-radius: 10px;
        background-color: grey;
        font-size: 12px;
        letter-spacing: 0.1em;
        padding: 0 5px 0 5px;
        transform: translateX(40%) translateY(-10px);

    }
    .container .containerForm .form .inputBox input[type="file"] ~ span,
    .container .containerForm .form .inputBox input[type="date"] ~ span{
        color:  #00dfc4;
        border: 1px solid #00dfc4;
        border-radius: 10px;
        background-color: grey;
        font-size: 12px;
        letter-spacing: 0.1em;
        padding: 0 5px 0 5px;
        transform: translateX(40%) translateY(-10px);

    }

    .container .containerForm .form .inputBox button{

        width: 70%;
        border-radius: 30px;
    }

    .container .containerForm .form .inputBox select:valid,
    .container .containerForm .form .inputBox select:focus,
    .container .containerForm .form .inputBox input:valid,
    .container .containerForm .form .inputBox input:focus{

        border: 3px solid #00dfc4;

    }

    .container .containerForm .form .inputBox i{

        position: absolute;
        top: 15px;
        left: 16px;
        width: 25px;
        padding: 2px 0;
        padding-right: 8px;
        color: #00dfc4;
        border-right: 1px solid  #00dfc4;
        font-size: 20px;

    }

/*end of forms */











.TopBars{

    background-color: var(--side-bar-color);
    color: var(--text-color);
    transition: 1s ease 0.3s;
}

.TopBars .container{

    background-color: var(--side-bar-color);
    color: var(--text-color);
    transition: 1s ease 0.3s;
}


.TopBars .container ul li a{
    color: var(--text-color);
}

.card{
    background-color: var(--card-color);
    transition: 1s ease 0.3s;
    color: var(--text-color);
    opacity: 90%;

}

.card .card-body .table{
    background-color: var(--card-color);
    transition: 1s ease 0.3s;
    color: var(--text-color);
}





/*==============Reusable Code==========*/
.sidebar .image-text .text{

font-size: 16px;
font-weight: 500;
color: var(--text-color);
transition: 1s ease 0.3s;
}


.sidebar .image-text .image{

   min-width: 60px;
   display: flex;
   align-items: center;
}
/*==============Side Bar==========*/
.sidebar{

    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    background: var(--side-bar-color);
    padding: 10px 14px;
    transition: 1s ease 0.3s;
    z-index: 100;
    overflow-y: visible;
}

.sidebar.close{

    width: 70px;
}

.sidebar.close .text{

    opacity: 0;
}

.sidebar.close:hover .text,
.sidebar.close:hover{

    width: 180px;
    opacity: 100%;
    font-size: 12px;
}
.sidebar li{

    height: 36px;
    margin-top: 16px;
    list-style: none;
    display: flex;
    align-items: center;

}

.sidebar.close li{
    height: 36px;
    margin-top: 16px;
    list-style: none;
    display: flex;
    margin-left: 0;

}


.sidebar li .icon{
font-size: 20px;
min-width: 60px;
display: flex;
align-items: center;
justify-content: center;
 transition: 1s ease 0.3s;
 color: var(--text-color);
}



.sidebar.close li .icon{
    position: absolute;
    left: 0;
    font-size: 28px;
    min-width: 60px;
    display: flex;
}

.sidebar .menu .search-box{
    background-color: var(--primary-color-light);
}

.sidebar .menu .search-box input{
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background-color: var(--primary-color-light);
}

.sidebar li .text{
    font-size: 12px;
    color: var(--text-color);
    transition: 1s ease 0.3s;
    }


.sidebar li a{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 6px;
    transition: 1s ease 0.3s;

}

.sidebar li a:hover{

    background-color: var(--primary-color);
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text{

    color: var(--side-bar-color);
}

.sidebar.close li a:hover .icon{
    color: #CCC;
}
.sidebar header{

   position:  relative;
}
.sidebar .image-text img{
    width: 50px;
    border-radius: 6px;
}

.sidebar header .image-text{

    display: flex;
    align-items: center;
}

.sidebar header .image-text .header-text{

    display: flex;
    flex-direction: column;
}

.sidebar header .image-text .header-text .name{

font-weight: 600;
}

.sidebar header .image-text .header-text .proffesion{

 margin-top: -2px;
}

.sidebar header .toggle{

position: absolute;
top: 50%;
right: -20px;
height: 25px;
width: 25px;
background-color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 22px;
color: var(--side-bar-color);
z-index: 100;
}



.sidebar .menu-bar{

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

.sidebar  .mode{

    background: var(--side-bar-color);

}



.sidebar .mode .moon-sun{
    height: 50px;
    width: 60px;
    align-items: center;
    justify-content: center;
}

.sidebar .mode .moon-sun i{
    position: relative;
    top: 12px;
}



.sidebar .mode i.sun{
    opacity: 0;
}

body.darck .mode i.sun{

    opacity: 1;
}
body.darck .mode i.moon{

    opacity: 0;
}

.sidebar .mode .toggle-switch{
    position: absolute;
    right: 0;
    display: flex;
    height: 100%;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar .mode .toggle-switch .switch{
    height: 22px;
    width: 44px;
    background: var(--text-color);
    position: relative;
    border-radius: 25px;
}

.switch::before{
    content: '';
    position: absolute;
    height: 15px;
    border-radius: 50%;
    top:50%;
    left: 5px;
    transform: translateY(-50%);
    width: 15px;
    background: black;
    cursor: pointer;
    transition: 1s ease 0.3s;

}

body.darck .switch::before{

    left: 20px;
    background: var(--side-bar-color);
}

.home{

    position: relative;
    left: 255px;
    min-height: 100vh;
    color: var(--text-color);
    background-color: var(--body-color);
    padding: 2% 2%;
    transition: 1s ease 0.5s;
    width: calc(100%-255px);

}

.sidebar.close~ .home{
    left: 70px;
    width: calc(100%-70px);
    padding: 2% 2%;
}



.home .container .progress .progress-done{

    display: flex;
    align-items: center;
    justify-content: center;
    background-image: repeating-linear-gradient(to left, green, orange, red);
    box-shadow: 0 5px 5px -6px red, 0 3px 7px orange;
    color: white;
    height: 100%;
    width: 0;
    transition: 1s ease 0.3s ;
}