/* Start Variables */
:root {
    --blue-color: #0075ff;
    --blue-alt-color: #0d69d5;
    --orange-color: #f59e0b;
    --green-color: #22c55e;
    --red-color: #f44336;
    --grey-color: #888;
}

/* End Variables */
/* ---------- Strat Global Rules ------------ */
* {
    box-sizing: border-box;
}
*:focus{
    outline: none;
}
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}
a{
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
}
::-webkit-scrollbar{
    width: 15px;
}
::-webkit-scrollbar-track{
    background-color: white;
}
::-webkit-scrollbar-thumb{
    background-color: var(--blue-color);
}
::-webkit-scrollbar-thumb {
    background-color: var(--blue-alt-color);
}
.page{
    background-color: #f1f5f9;
    min-height: 100vh;
}

/* ---------- End Global Rules -------------- */
/* ---------- Strat SideBar ------------ */
.sidebar{
    width: 200px;
    box-shadow: 0 0 10px #ddd;
    z-index: 2;
}
@media (max-width: 767px){
    .sidebar {
            width: 58px;
            padding: 10px;
        }
    .sidebar span{
        display: none;
    }
    .sidebar>h3 {
        margin-bottom: 15px !important;
        font-size: 12px;
    }
    .sidebar>h3::before,
    .sidebar>h3::after
    {
        display: none;
    }
    .sidebar ul li a{

    }
}
.sidebar >h3{
    margin-bottom: 50px;
}
.sidebar>h3::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: -27px;
    left: 50%;
    background-color: black;
    transform: translateX(-50%);
    border-radius: 50% ;
    -webkit-border-radius: 50% ;
    -moz-border-radius: 50% ;
    -ms-border-radius: 50% ;
    -o-border-radius: 50% ;
    border: 4px solid white;
    z-index: 1;
}
.sidebar>h3::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 2px;
    bottom: -20px;
    left: 50%;
    background-color: black;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.sidebar ul li a {
    margin-bottom: 5px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.sidebar ul li a:hover{
    background-color: #f6f6f6;
    font-weight: bolder;
}
.sidebar ul li a span{
    margin-left: 10px;
}
.active{
    background-color: #f6f6f6;
}

/* ---------- End SideBar ------------ */
/* ------------------------ Strat Content --------------------- */
/*------------------------------------------------------------- */

/*---------------Start Header----------- */
.content {
    position: relative;
    width: 100%;
    overflow:hidden;
}
.content .box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    background-color: white;

}
.content .box .info{
    display: flex;
    align-items: center;
}
.content .box .info i {
    margin-right: 10px;
}
.content .box .info .nof::before{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    right: 56px;
    top: 27px;
    transform: translateY(-50%);
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.content .box img{
    max-width: 100%;
    width: 30px;
    margin-right: 10px;
}

.content .box .search{
    position: relative;
}
.content .box .search::before{
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    font-size: 14px;
    color : var(--grey-color--)
}
.content .box input {
    padding-left: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border: 1px solid #ccc;
    width: 160px;
    transition: width 0.3s;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
}
.content .box input:focus{
    width: 200px;
}
.content .box input:focus::placeholder{
    opacity: 0;
}
.page .content > h1{
    padding: 20px;
    position: relative;
    margin: 20px 0 40px;
}
.page .content > h1::before{
    content: "";
    position: absolute;
    width: 50px;
    height: 3px;
    background-color: black;
    bottom: 10px;
    z-index: 1;
}
.page .content > h1::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 3px;
    background-color: white;
    bottom: 10px;
    left: 20px;

}
/*---------------End Header----------- */
/*---------------Start Wrapper----------- */
.wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fill , minmax(450px , 1fr));
    gap: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
@media (max-width : 767px){
    .wrapper {
        grid-template-columns: minmax(200px, 1fr);
        margin-left: 10px;
        margin-right: 10px;
        gap: 10px;
    }
}

/*---------------End Wrapper----------- */
/*---------------Start Welcome----------- */
.welcome {
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
}
.welcome h2{
    margin: 0;
}
.welcome .welcome-content{
    display: flex;
    justify-content: space-between;
    background-color: #eee;
    padding: 20px;
}
.welcome .welcome-content span{
    color: var(--grey-color);
    font-size: 15px;
}
.welcome .image img{
    max-width: 100%;
    width: 200px;
}
.wrapper .user{
    padding: 20px;
    background-color: white;
    text-align: center;
    margin-bottom: 20px;
    
}
.wrapper .user .image{
    width: 50px;
}
.wrapper .user .image img {
    width: 62px;
    margin-top: -40px;
    border: 2px solid white;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.wrapper .user-info{
    display: flex;
    text-align: center;
    justify-content: space-around;
    margin: 20px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.wrapper .user-detiles{
    margin-bottom: 20px;
}
.wrapper .user-detiles h5{
        font-size: 14px;
}
.wrapper .profile{
    display: block;
    text-align: right;
    border-radius: 6px;
    background-color: blue;
    width: fit-content;
    padding: 10px;
    color: white;
    font-size: 14px;
    margin: 0 15px 15px auto;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.wrapper a:hover{
    background-color: var(--blue-alt-color);
}
@media (max-width: 767px ) {
    .welcome .welcome-content .image img {
            display: none;
        }
    .wrapper .user .image {
        margin: auto;
    }
    .wrapper .user-info{
        flex-direction: column;
    }
}
/*---------------End Welcome----------- */
/*---------------Start Draft----------- */
.draft{
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
}
.draft-content{
    padding: 20px;
}
.draft .draft-content h2 {
    margin: 0;
}
.draft .draft-content span {
    display: block;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--grey-color);
    font-size: 15px;
}
.draft .title {
    display: block;
    margin-bottom: 20px;
    padding: 10px;
    width: 100%;
    border: none;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    background-color: #eee;
}
.draft .txtarea{
    margin-bottom: 20px;
    height: 200px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    background-color: #eee;
    resize: none;
}
.draft .save{
    display: block;
    background-color: blue;
    padding: 10px;
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    transition: 0.3s;
    margin: 0 0 0 auto;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.draft .save:hover{
    background-color: var(--blue-alt-color);
    cursor: pointer;
}
/*---------------End Draft----------- */
/*---------------Start Targets----------- */
.targets{
    padding: 20px;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
}
.targets .ideas{
    display: block;
    margin-top: -15px;
    margin-bottom: 20px;
    color: var(--grey-color);
    font-size: 15px;
}
.targets .boxes {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.targets .boxes .icon{
    width: 80px;
    height: 80px;
    background-color: rgb(0 117 255 / 20%);
    margin-right:  15px;
    align-items: center;
    display: flex;
    justify-content: center;
}
.targets .boxes .detiles{
    width: 100%;
}
.targets .boxes .detiles .money{
    font-size: 14px;
    color: var(--grey-color);
}
.targets .boxes .detiles .num{
    margin-top: 5px;
    margin-bottom: 10px;
    display: block;
    font-weight: bold;
}
.targets .boxes .detiles .blue{
    background-color: var(--blue-color);
}
.targets .boxes .detiles .progress{
    height: 4px;
    background-color: rgb(0 117 255 / 20%);
    position: relative;
}
.targets .boxes .detiles .progress > span{
    position: absolute;
    height: 4px;
}
.targets .boxes .detiles .progress>span span{
    position: absolute;
    bottom: 14px;
    right: -16px;
    background-color: var(--blue-color);
    color: white;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    font-size: 13px;
    padding: 2px 5px;
}
.targets .boxes .detiles .progress>span span::after{
    content: "";
    border-color: transparent;
    border-top-color: var(--blue-color);
    border-width: 5px;
    border-style: solid;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.targets .boxes .detiles .blue {
    background-color: var(--blue-color);
}
.targets .boxes .detiles .orange {
    background-color: rgba(255, 115, 0, 1);
}
.targets .boxes .detiles .green {
    background-color: rgb(21, 255, 1);
}
/*---------------End Targets----------- */
/*---------------Start Stat----------- */
.stat {
    padding: 20px;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
}

.stat .ideas {
    display: block;
    margin-top: -15px;
    margin-bottom: 20px;
    color: var(--grey-color);
    font-size: 15px;
}
.stat .stat-content{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 20px;
}
.stat .stat-content .box{
    border: 1px solid #ccc ;
    border-radius: 10px;
    display: block;
    text-align: center;
    width: calc(50% - 10px);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
@media (max-width : 767px) {
    .stat .stat-content .box {
            width: 100%;
        }
}
.stat .stat-content .box i{
    margin: 10px;
}
.stat .stat-content .box span{
    display: block;
    color: black;
    font-weight: bold;
    font-size: 24px;
}
.stat .stat-content .box p {
    display: block;
    color: var(--grey-color);
    font-size: 13px;
}
/*---------------End Stat----------- */
/*---------------Start News----------- */
.news {
    padding: 20px;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
}
.news .box{
    display: flex;
    align-items: center;
}
@media (max-width : 767px) {
    .news .box {
        flex-direction: column;
        text-align: center;
    }
    .news .news-content img{
        margin-bottom: 10px;
    }
    .news .news-content .title{
        margin-bottom: 20px;
    }
}
.news .box:not(:last-of-type){
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}
.news .news-content img {
    width: 100px;
    margin-right: 15px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.news .news-content .title{
    flex-grow: 1;
}
.news .news-content .title p {
    margin: 0 0 6px;
    color: black;
    font-weight: bold;
}
.news .news-content .title span {
    display: block;
    color: var(--grey-color);
    font-size: 13px;
}
.news .box .date{
    font-size: 13px;
    padding: 5px 10px;
    background-color: #eee;
    border-radius: 6px;
    color: black
}
/*---------------End News----------- */
/*---------------Start Tasks----------- */
.tasks{
    padding: 20px;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
}
.tasks .boxes{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

}
.tasks .boxes:not(:last-of-type){
    border-bottom: 1px solid #ccc;
}
.tasks .boxes .done{
    opacity: 0.3;
}
.tasks .boxes .done p {
    text-decoration: line-through;

}
.tasks .boxes .done span {
    text-decoration: line-through;
    margin : 0;
}
.tasks .boxes .done2 {
    opacity: 0.3;
}
.tasks .boxes .info{
    margin-bottom: 20px;
    flex-grow: 1;
}
.tasks .boxes p{
    font-weight: bold;
    margin: 0;
}
.tasks .boxes span{
    color: var(--grey-color);
    font-weight: bold;
    margin-bottom: 20px;
}
.tasks .boxes i {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.tasks .boxes i:hover{
    color: var(--red-color);
    cursor: pointer;
}
/*---------------End Tasks----------- */
/*---------------Start Serach----------- */
.search{
    padding: 20px;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
}
.search .search-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.search .search-box .search-title p ,
.search .search-box .search-number p {
        text-align: center;
            font-weight: bold;
}
.search .search-box span{
    display: block;
    text-align: center;
    padding: 5px 6px;
    margin-bottom: 10px;
    background-color: #eee;
    border-radius: 6px;
    margin-bottom: 40px;
}
/*---------------End Serach----------- */
/*---------------Start Upload----------- */
.upload{
    padding: 20px;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
}
.upload .upload-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .upload .upload-box{
        flex-direction: column;
        text-align: center;
    }
}
.upload .upload-box:not(:last-of-type){
    border-bottom: 1px solid #ccc;
}
.upload .upload-box .upload-title{
    flex-grow: 1;
    margin-bottom: 20px;
}
.upload .upload-box .upload-title p{
    margin: 0;
}
.upload .upload-box .upload-title span{
    font-size: 13px;
    color: var(--grey-color);
}
.upload .news-content img{
    width: 50px;
    margin-right: 15px;
    margin-bottom: 20px;
}
.upload .upload-date{
    font-size: 13px;
    color: black;
    background-color: #eee;
    padding: 5px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
/*---------------End Upload----------- */
/*---------------Start Project Progress----------- */
.project-progress{
    padding: 20px;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
}
.project-progress ul{
    margin: 0;
    position: relative;
}
.project-progress ul li {
    margin-top: 25px;
    padding-left: 40px;
    position: relative;
}
.project-progress ul li::before{
    content: "";
    position: absolute;
    left: 0 ;
    top: 50% ;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: var(--blue-color);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border : 2px solid white;
    outline: 2px solid var(--blue-color);
}
.project-progress ul .done::before{
    background-color: var(--blue-color);
}
.project-progress ul .current::before ,
.project-progress ul .not-done::before {
    background-color: white;
}
.project-progress ul .current::before{
    animation: change-color 0.8s infinite alternate;
    -webkit-animation: change-color 0.8s infinite alternate;
}
.project-progress ul::before{
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    width: 2px;
    height: 200px;
    transform: translateY(-50%);
    background-color: var(--blue-color);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.project-progress .launch-icon{
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.1;
    width: 200px;
}
/*---------------End Project Progress----------- */
/*---------------Start REminder----------- */
.reminder{
    padding: 20px;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
}
.reminder ul {
    margin-top: 0;
    position: relative;
}
.reminder ul li {
    position: relative;
    margin-bottom: 25px;
    padding-left: 50px;
    font-weight: bold;
}
.reminder ul li::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 40px;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.reminder ul li::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.reminder ul li.reminder-blue::before,
.reminder ul li.reminder-blue::after {
    background-color: var(--blue-color);
}
.reminder ul li.reminder-green::before,
.reminder ul li.reminder-green::after {
    background-color: var(--green-color);
}
.reminder ul li.reminder-orange::before,
.reminder ul li.reminder-orange::after{
    background-color: var(--orange-color);
}
.reminder ul li.reminder-red::before,
.reminder ul li.reminder-red::after {
    background-color: var(--red-color);
}

.reminder ul li span{
    display: block;
    font-size: 14px;
    margin-top: 5px;
    font-weight: normal;
    color: var(--grey-color);
}
/*---------------End REminder----------- */
/*---------------Start Latest Post----------- */
.latest-post{
    padding: 20px;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
}
.latest-post img{
    width: 60px;
    margin-right: 15px;
    margin-bottom: 40px;
}
.latest-post .post-title{
    margin-bottom: 40px;
}
.latest-post .post-info{
    display: flex;
    align-items: center;
    flex-grow: 1;
    border-bottom: 1px solid #ccc;
    margin-bottom: 25px;
}
.latest-post .post-info .post-title p{
    margin: 0;
    font-weight: bold;
}
.latest-post .post-info .post-title span{
    margin-top: 5px;
    display: block;
    color: var(--grey-color);
}
.latest-post .para{
    margin-bottom: 100px;
    color: black;
    
}
.latest-post .post-icon{
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--grey-color);
    font-size: 14px;
    border-top: 1px solid #ccc;
}
/*---------------End Latest Post----------- */
/*---------------Start Socila Media----------- */
.social-media{
    padding: 20px;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.social-media .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    margin-bottom: 10px;
    position: relative;
    padding-left: 70px;
}
.social-media .box i{
    height: 100%;
    width: 52px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    color: white;
}
.social-media .box i:hover {
    transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
}
.social-media .twitter {
    background-color: rgb(29 161 242 / 20%);
    color: #1da1f2;
}

.social-media .twitter i,
.social-media .twitter a {
    background-color: #1da1f2;
}

.social-media .facebook {
    background-color: rgb(24 119 242 / 20%);
    color: #1da1f2;
}

.social-media .facebook i,
.social-media .facebook a {
    background-color: #1877f2;
}

.social-media .youtube {
    background-color: rgb(255 0 0 / 20%);
    color: #ff0000;
}

.social-media .youtube i,
.social-media .youtube a {
    background-color: #ff0000;
}

.social-media .linkedin {
    background-color: rgb(0 119 181 / 20%);
    color: #0077b5;
}

.social-media .linkedin i,
.social-media .linkedin a {
    background-color: #0077b5;
}
.social-media a{
    border-radius: 6px;
        padding: 0 5px;
        color: white;
        font-size: 13px;
}
/*---------------End Socila Media----------- */
/*---------------Start Project Table----------- */
/*---------------End Project Table----------- */
/* Start Projects Table */
.projects{
    padding: 20px;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.projects .responsive-table {
    overflow-x: auto;
}

.projects table {
    min-width: 1000px;
    border-spacing: 0;
}

.projects thead td {
    background-color: #eee;
    font-weight: bold;
}

.projects table td {
    padding: 15px;
}

.projects tbody td {
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    transition: 0.3s;
}

.projects table tbody tr td:last-child {
    border-right: 1px solid #eee;
}

.projects tbody tr:hover td {
    background-color: #faf7f7;
}

.projects table img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 2px;
    background-color: white;
}

.projects table img:not(:first-child) {
    margin-left: -20px;
}

.projects table .label {
    font-size: 13px;
}

/* End Projects Table */
/* -------------------------------------------------------------------------- */
/*------------------------------- Start Site Control ------------------------ */
/* -------------------------------------------------------------------------- */
.toggle-checkbox{
    appearance: none;
}
.toggle-switch {
    width: 78px;
    height: 32px;
    background-color: #ccc;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.toggle-switch::before{
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 14px;
    background-color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.toggle-checkbox:checked + .toggle-switch {
    background-color: var(--blue-color);
}
.toggle-checkbox:checked+.toggle-switch::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    left: 50px;
    color: var(--blue-color);

}
/*---------------Start Site Control----------- */
.site-control{
    position: relative;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
    padding: 20px;
    margin-bottom: 0;
}
.site-control .wel h2 {
    margin-bottom: 5px;
}
.site-control span{
    font-size: 14px;
    color: var(--grey-color);
    margin-top: -20px;
}
.site-control .website{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-control .website .website-info{
    margin-top: 15px;
    margin-bottom: 30px;
}
.site-control .website .website-info p{
    margin-bottom: 5px;
}
.site-control .website .website-info span {
    margin-bottom: 5px;
}
.site-control textarea {
    min-height: 150px;
    width: 100%;
    border: 1px solid #ccc;
    resize: none;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    padding: 20px;
}
/*---------------End Site Control----------- */
/*---------------Start Gengerl Info----------- */
.general-info {
    position: relative;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
    padding: 20px;
    margin-bottom: 0;
}

.general-info .wel h2 {
    margin-bottom: 5px;
}

.general-info span {
    font-size: 14px;
    color: var(--grey-color);
    margin-top: -20px;
}
.general-info label{
    color: var(--grey-color);
    font-size: 14px;
    margin-bottom: 10px;
    display: block;
}
.general-info input {
    width: 100%;
    margin-bottom: 10px;
    color: var(--grey-color);
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.general-info input[type = email] {
    width: calc(100% - 80px);
    margin-right: 5px;
    background-color: #c1e7ff;
}
.general-info a{
    color: var(--blue-color);
    font-weight: bold;
}
/*---------------End Gengerl Info----------- */
/*---------------Start Security----------- */
.security {
    position: relative;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
    padding: 20px;
    margin-bottom: 0;
}

.security .wel h2 {
    margin-bottom: 5px;
}

.security span {
    font-size: 14px;
    color: var(--grey-color);
    margin-top: -20px;
}
.security .password{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}
.security .password:not(:last-of-type){
    border-bottom: 1px solid #ccc;
    
}
.security .password p{
    margin-bottom: 5px;
}
.security .password .change{
    padding: 4px 10px;
    border-radius: 6px;
    background-color: var(--blue-color);
    color: white;
}
.security .password .device {
    padding: 4px 10px;
    border-radius: 6px;
    color: rgb(0, 0, 0);
    background-color: #ccc;
}
/*---------------End Security----------- */
/*---------------Start Social Info----------- */
.social-info {
    position: relative;
    background-color: white;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    overflow: hidden;
    padding: 20px;
    margin-bottom: 0;
    margin-top: 20px;
}

.social-info .wel h2 {
    margin-bottom: 5px;
}

.social-info span {
    font-size: 14px;
    color: var(--grey-color);
    margin-top: -20px;
}
.social-info .icon{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
}
.social-info .social-box i{
    font-size: 18px;
    color: var(--grey-color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    border-radius: 6px 0 0 6px;
    border: 1px solid #ddd ;
    border-right: none;
    -webkit-border-radius: 6px 0 0 6px;
    -moz-border-radius: 6px 0 0 6px;
    -ms-border-radius: 6px 0 0 6px;
    -o-border-radius: 6px 0 0 6px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.social-info .social-box input{
    height: 40px;
    background-color: #eee;
    border-radius: 0 6px 6px 0;
    border: 1px solid #ddd;
    width: calc(100% - 40px);
    -webkit-border-radius: 0 6px 6px 0;
    -moz-border-radius: 0 6px 6px 0;
    -ms-border-radius: 0 6px 6px 0;
    -o-border-radius: 0 6px 6px 0;
    padding: 10px;
}
.social-info .social-box > div:focus-within i{
    color: black;
}
/*---------------End Social Info----------- */
/*---------------Start widget-control----------- */
.widget-control{
    margin-top: 20px;
}
.widget-control .control input{
    margin-right: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}
.widget-control .control input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
}

.widget-control .control label {
    padding-left: 30px;
    cursor: pointer;
    position: relative;
}

.widget-control .control label::before,
.widget-control .control label::after {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -9px;
    border-radius: 4px;
}

.widget-control .control label::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid var(--grey-color);
}

.widget-control .control label:hover::before {
    border-color: var(--blue-alt-color);
}

.widget-control .control label::after {
    font-family: var(--fa-style-family-classic);
    content: "\f00c";
    font-weight: 900;
    background-color: var(--blue-color);
    color: white;
    font-size: 12px;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0) rotate(360deg);
    transition: 0.3s;
}

.widget-control .control input[type="checkbox"]:checked+label::after {
    transform: scale(1);
}
/*---------------End widget-control----------- */
/*---------------Start Backup Manage----------- */
.backup{
    border-bottom: 1px solid #ddd;
}
.backup .back-info{
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 15px;
}
.backup label{
    margin-right: 15px;
    padding-left: 30px;
    cursor: pointer;
    position: relative;
}
.backup input{
    appearance: none;
}
.backup label::before{
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    background-color: var(--grey-color--);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 1px solid var(--grey-color);
}
.backup label::after{
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 4px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    background-color: var(--blue-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.backup input:checked + label::before {
    border-color: var(--blue-color);
} 
.backup input:checked+label::after{
    transform: translateY(-50%) scale(1);
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
}

.servers {
    border-top: 1px solid #eee;
    padding-top: 20px;
}

@media (max-width: 767px) {
    .servers {
        flex-wrap: wrap;
    }
}
.servers input{
    appearance: none;
}
.servers .server {
    border: 2px solid #eee;
    position: relative;
}

.servers .server label {
    cursor: pointer;
}

.servers input[type="radio"]:checked+.server {
    border-color: var(--blue-color);
    color: var(--blue-color);
}
/*---------------End Backup Manage----------- */
/* -------------------------------------------------------------------------- */
/*------------------------------- Start Profile Page ------------------------ */
/* -------------------------------------------------------------------------- */
.profile{
    display: flex;
    align-items: center;
    background-color: white;
    padding: 20px;
    margin-left: 15px;
    margin-right: 15px;
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.profile .profile-img{
    width: 300px;
    padding: 20px;
    text-align: center;   
}
@media(max-width : 767px){
    .profile {
        text-align: center;
        flex-direction: column;
        }
    .profile-information .profile-box{
        text-align: center;
    }
}
@media (min-width : 768px){
   
    .profile .profile-img{
        border-right: 1px solid #eee;

    }
}
.profile .profile-img img {
    width: 120px;
    height: 120px;
    text-align: center;
}
.profile .profile-img h3{
    margin-bottom: 5px;
}
.profile .profile-img .level{
    color: var(--grey-color);
    display: block;
    margin-bottom: 15px;
}
.profile .profile-img .profile-icon{
    margin-bottom: 10px;
}
.profile .profile-img .rating{
    font-size: 13px;
    color: var(--grey-color);
    display: block;
    margin-top: 10px;
}
.profile .profile-img .range{
    position: relative;
    height: 6px;
    overflow: hidden;
    background-color: #ddd;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    margin: auto;
    width: 70%;
}
.profile .profile-img .range span {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--blue-color);
    height: 6px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.profile .profile-box{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.profile .profile-box:hover{
    background-color: #eee;
}
.profile .profile-box > div{
    font-size: 14px;
    display: flex;
    align-items: center;
    min-width: 200px;
    padding: 10px;
}
.profile .profile-box h4{
    width: 100%;
    margin: 0 10px;
    font-weight: normal;
    color: var(--grey-color);
}
.profile .profile-box p {
    color: var(--grey-color);
}
.profile .profile-box .l1{
    height: 67px;
}
.profile-widget {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    
}
@media (max-width : 767px){
    .profile-widget {
        flex-direction: column;
    }
}
.profile-widget .skills-box{
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    margin: 15px;
}
.profile-widget .skills-box h2 {
    margin-bottom: 5px;
}
.profile-widget .skills-box .list {
    font-size: 14px;
    color: var(--grey-color);
    margin-top: 3px;
    display: block;
    margin-bottom: 20px;

}
.profile-widget .skills-box>div{
    margin:  20px 0;
    padding: 20px 10px;
    border-bottom: 1px solid #ddd;
}
.profile-widget .skills-box >div span{
    font-size: 14px;
    padding: 5px 5px;
    background: #ddd;
    margin-right: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.activites {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    margin: 15px 15px 15px 0px;
    flex-grow: 1;
}
.profile-widget h2 {
    margin-bottom: 5px;
}
.profile-widget .list {
    font-size: 14px;
    color: var(--grey-color);
    margin-top: 3px;
    display: block;
    margin-bottom: 20px;  
}
.profile-widget .activites .act-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #ddd;
}
.profile-widget .activites .act-box:not(:last-of-type){
    border-bottom: 1px solid #ddd;
}
.profile-widget .activites .act-box img {
    width: 75px;
}
.profile-widget .activites .info{
    flex-grow: 1;
    margin-left: 15px;
}
.profile-widget .activites .act-box span {
    display: block;
}


/*---------------Start Backup Manage----------- */
/*---------------Start Annimation----------- */
@keyframes change-color {
    from    {
        background-color: white;
    }
    to {
        background-color: var(--blue-color);
    }
}
/*---------------End Annimation----------- */