/*Start Global */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
ul{
    list-style: none;
}
body{
    font-family: 'Open Sans', sans-serif;
    outline: none;
}
/* end global */
:root{
    --blue-color:#0075ff;
    --blue-alt-color:#0d69d5;
    --orange-color:#f59e0b;
    --green-color:#22c55e;
    --red-color:#f44336;
    --grey-color:#888;
}
/* start scrollbar  */
.scrollbar{
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background-color:#0075ff;
    z-index: 1000;
}
/* end scrollbar  */
/* star app  */
.app{
width: 100%;
/* height: 100vh; */
background-color: gainsboro;
display: flex;
}
.dashbar{
padding: 15px;
width: 20%;
background-color: white;
box-shadow: 2px 2px 5px gainsboro;
z-index: 2;
}
.content{
width: 80%;
}
.dashbar h3{
margin-top: 20px;
margin-bottom: 50px;
text-align: center;
text-transform: capitalize;
position: relative;
}
.dashbar h3::before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -15px;
    width: 50%;
    height: 3px;
    background-color: black;
    transform: translateX(-50%);
}
.dashbar h3::after{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid;
    border-color: white;
}
.dashbar ul li{
    padding: 10px;
    margin-bottom: 5px;
    transition: 0.3s;
}
.dashbar ul li a{
    text-decoration: none;
    color: black;  
}
.active,
.dashbar ul li:hover{
    background-color: rgb(238, 235, 235);
    border-radius: 5px;
}
.dashbar ul li a span{
    margin-left: 10px;
    text-transform: capitalize;
    font-size: 14px;
}
.dashbar ul li i{
    width: 15px;
}
@media (max-width:768px){
    .app{
    height: auto;
    }
    .dashbar{
        padding: 0;
        width: 62px;
    }
    .content{
        width: calc(100% - 62px);
    }
    .dashbar h3{
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .dashbar h3::before,
    .dashbar h3::after{
        display: none;
    }
    .dashbar ul{
        padding: 10px;
    }
    .dashbar ul li{
        padding: 7px;
        text-align: center;
    }
    .dashbar ul li a span{
        display: none;
    }
}
/* end app  */
/* start head  */
.content .head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: white;
}
.content .head .search input{
    padding: 10px 10px 10px 30px;
    border-radius: 5px;
    outline: none;
    border: 2px solid gainsboro;
    width: 170px;
    transition: width 0.3s;
}
.content .head .search{
    position: relative;
}
.content .head .search input:focus{
    width: 200px;
}
.content .head .search i{
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 900;
}
.content .head .search input::placeholder{
    font-size: 14px;
}
.content .icons{
    display: flex;
    align-items: center;
}
.content .icons span {
    margin-right: 10px;
    position: relative;
}
.content .icons span::before{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--red-color);
    top: -3px;
    right: -5px;
}
.content .icons img{
   width: 50px;
}
.content h1{
    margin-left: 20px;
    margin-top: 20px;
    text-transform: capitalize;
    position: relative;
    width: fit-content;
    margin-bottom: 40px;
}
.content h1::after,
.content h1::before{
    content: "";
    position: absolute;
    height: 4px;
    bottom: -10px;
    left: 0;
}
.content h1::after{
    background-color: rgb(29, 28, 28);
    width: 20%;

}
.content h1::before{
    background-color: rgb(235, 231, 231);
    width: 100%;
}
/* end head  */
/* start dashboard */
.dashboard{
    /* display: none; */
}
.content .grid-w{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(450px,1fr));
    margin-left: 20px;
    margin-right: 20px;
    gap: 10px;
}
.content .grid-w .welcome{
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    position: relative;   
}
@media (max-width:767px){
    .content .grid-w{
        grid-template-columns: minmax(200px,1fr);
        margin-left: 10px;
        margin-right: 10px;
        gap: 10px;
    }
}
.content .grid-w .welcome .intro{
    display: flex;
    padding: 20px;
    justify-content: space-between;
    background-color: rgb(241, 239, 239);
    margin-bottom: 20px;
    height: 128px;
}
.content .grid-w .welcome .intro h3,
.content .grid-w .welcome .intro p{
    text-transform: capitalize;
}
.content .grid-w .welcome .intro img{
    width: 150px;
}
.content .grid-w .welcome .body{
    padding: 5px 15px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}
.content .grid-w .welcome .body div{
    display: flex;
    flex-direction: column;
    text-align: center;
    text-transform: capitalize;
    font-weight: bold;
    justify-content: space-between;
    font-size: 14px;
    padding: 20px;
    gap: 10px;
    flex: 1;
}
.content .grid-w .welcome .body div span{
    font-weight: 400;
}
.content .grid-w .welcome .profil{
    padding: 15px 20px 15px 15px;
    text-align: right;
}
.content .grid-w .welcome .profil a{
    text-decoration: none;
    text-transform: capitalize;
    color: white;
    font-size: 14px;
    font-weight: 500;
    background-color:var(--blue-color);
    padding: 5px 10px;
    border-radius: 10px;
    transition: 0.3s;
}
.content .grid-w .welcome .profil a:hover{
    background-color: var(--blue-alt-color);
}
.content .grid-w .welcome .welcome-img{
    width: 70px;
    margin-top: -90px;
    margin-left: 20px;
    margin-bottom: 10px;
    border-radius: 50%;
    border: 5px solid white;
}
/* start quick */
.welcome .quick{
    padding: 20px;
    text-align: left;
    text-transform: capitalize;

}
.welcome .from{
    padding: 20px;
    width: 100%;
}
.welcome .from input,
.welcome .from textarea{
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px  solid gainsboro;
    outline: none;
    background-color:ghostwhite;
    text-transform: capitalize;
}
.welcome .from input{
    margin-bottom: 10px;
}
.welcome .from textarea{
    height: 100px;
}
.welcome .save{
    padding: 0px 20px 15px 15px;
    text-align: right;
}
.welcome .save a{
    text-decoration: none;
    text-transform: capitalize;
    color: white;
    font-size: 14px;
    font-weight: 500;
    background-color:var(--blue-color);
    padding: 5px 10px;
    border-radius: 10px;
    transition: 0.3s;
}
/* start target  */
.welcome .target{
    padding: 20px;
    text-align: left;
    text-transform: capitalize;
}
.welcome .box{
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
}
.welcome .box:last-child{
    margin-bottom: 15px;
}
.welcome .box .icons{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 60px;
    background-color:  violet;
    font-weight: bold;
    color: rebeccapurple;
}
.welcome .box .content {
  padding-top: 10px;
  margin-left: 10px;
  text-transform: capitalize;
  text-align: left;
}
.welcome .box .content h5{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 2.5px;
}
.welcome .box .content p{
    font-size: 14px;
    margin-bottom: 2.5px;
}
.welcome .box .content .prog{
    width: 100%;
    height: 10px;
    background-color: rebeccapurple;  
}
.welcome .box .content .prog div{
 height: 100%;
 background-color: violet;
 position: relative;
} 
.welcome .box .content .prog div span{
    position: absolute;
    padding: 5px 10px;
    top: -35px;
    right:-20px;
    border-radius: 5px;
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
    font-size: 10px;
}
.welcome .box .content .prog div::after{
    position: absolute;
    content: "";
    border:8px solid;
    border-color: rebeccapurple transparent  transparent  transparent ;
    top: -15px;
    right: -8px;
}
/* start tickets  */
.welcome .tickets{
    padding: 20px;
    text-align: left;
    text-transform: capitalize;
}
.welcome .statis-box{
    padding: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.welcome .statis-box .box1{
    padding: 30px;
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
    border: 2px solid gainsboro;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    text-transform: capitalize;
} 
.welcome .statis-box .box1 i{
    font-size: 30px;
} 
.green{
    color: var(--green-color);
}
.red{
    color: var(--red-color); 
}
.blue{
    color: var(--blue-color);
}
.orange{
    color: var(--orange-color);
}

.welcome .statis-box .box1 h3{
    font-weight: 900;
} 
.welcome .statis-box .box1 p{
    color: #888;
} 
/* start latest latest-news */
.welcome .latest-news{
    text-transform: capitalize;
    padding: 20px;
    text-align: left;
}
.welcome .latests-box{
    padding: 20px;
}
.welcome .latests-box .box2{
  display: flex;
  align-items: center;
}
.welcome .latests-box .box2:not(:last-of-type){
    border-bottom: 1px solid gainsboro;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.welcome .latests-box .box2 img{
    width: 100px;
    border-radius: 5px;
    margin-right: 5px;
}
.welcome .latests-box .box2 .latests-content{
    display: flex;
    align-items: center;
    flex-basis: calc(100% - 100px);
    justify-content: space-between;
    
}
.welcome .latests-box .box2 .latests-content .info{
    font-size: 14px;
}
.welcome .latests-box .box2 .latests-content .info h3{
    margin-bottom: 5px;

}
.welcome .latests-box .box2 .latests-content .info p{
    font-size: 12px;
    color: #888;
}
.welcome .latests-box .box2 .latests-content .latests-shope{
    background-color: gainsboro;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 14px;
    text-transform: capitalize;
}
/* start tasks */
.welcome .latest-tasks{
padding: 20px;
text-align: left;
text-transform: capitalize;
}
.welcome .tasks{
    padding: 20px;

}
.welcome .tasks .box-tasks{
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: capitalize;
}
.welcome .tasks .box-tasks:not(:last-of-type){
    border-bottom: 1px solid gainsboro;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.welcome .tasks .box-tasks .info-tasks h3{
    margin-bottom: 5px;
    
}
.welcome .tasks .box-tasks .info-tasks p{
    color: #888;  
}
.welcome .tasks .box-tasks .delet{
    cursor: pointer;
    font-size: 18px;
}
.welcome .tasks .box-tasks .delet:hover{
    color: var(--red-color);
}
.done{
    opacity: 0.3;
}
.welcome .top-search{
    padding: 20px;
    text-align: left;
    text-transform: capitalize;
}
.welcome .box-search{
    padding: 15px 20px 0px 20px;
    display: flex;
    justify-content: space-between;
    text-transform: capitalize;
    margin-bottom: 15px;
}
.welcome .box-search div{
    font-weight: bold;
}
.welcome .box-search span:last-child{
    width: fit-content;
    background-color: gainsboro;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}

/* start upload  */
.welcome .latest-upload{
    padding: 20px;
    text-align: left;
    text-transform: capitalize;
}
.welcome .upload-box{
    padding: 10px 20px;
    display: flex;
}
.welcome .upload-box:not(:last-of-type){
    border-bottom: 1px solid gainsboro;
}
.welcome .upload-box i{
    font-size: 50px;
    margin-right: 15px;
}
.welcome .upload-box .info-upload{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-basis: 100%;
}

.welcome .upload-box .info-upload p{
    color: #888;
    text-transform: capitalize;
    margin-top: 5px;
}
.welcome .upload-box .info-upload span{
    width: fit-content;
    background-color: gainsboro;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}

/* start projects progrss  */
.welcome .projects{
    padding: 20px;
    text-align: left;
    text-transform: capitalize;

}
.welcome .last-projects{
    text-transform: capitalize;
    position: relative;
}
.welcome .last-projects::before{
    position: absolute;
    content: "";
    width: 3px;
    height: 85%;
    background-color:var(--blue-color);
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
}
.welcome .list-progress{
    padding: 20px 60px;
    position: relative;
}
.welcome .list-progress::before{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 50%;
    left: 19px;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: white;
    border: 3px solid white;
    outline: 3px solid var(--blue-color);
}
.welcome .list-progress.finish::before{
    background-color: var(--blue-color);
}
.welcome .list-progress.current::before{
    animation: change-color 0.8s infinite alternate;
}
.w-relative{
    position: relative;
}
.welcome .img-projects{
    width: 150px;
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.5;
}
/* start remindes */
.welcome .reminders{
    padding: 20px;
    text-align: left;
    text-transform: capitalize;
}
.welcome .info-reminders{
    padding: 0px 50px;
}
.welcome .box-reminders{
    text-transform: capitalize;
    position: relative;
    padding: 0 10px;
    margin-bottom: 20px;
}
.welcome .box-reminders:first-child{
    border-left: 3px solid var(--blue-alt-color);
}
.welcome .box-reminders:nth-child(2){
    border-left: 3px solid var(--orange-color)
}
.welcome .box-reminders:nth-child(3){
    border-left: 3px solid var(--red-color)
}
.welcome .box-reminders:nth-child(4){
    border-left: 3px solid var(--green-color)
}
.welcome .box-reminders .key{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 50%;
    left: -30px;
    transform: translateY(-50%);
    border-radius: 50%;
}
.welcome .box-reminders .blue{
    background-color: var(--blue-color);
}
.welcome .box-reminders .orange{
    background-color: var(--orange-color);
}
.welcome .box-reminders .green{
    background-color: var(--green-color);
}
.welcome .box-reminders .red{
    background-color: var(--red-color);
}
.welcome .box-reminders h3{
    margin-bottom: 5px;
    font-size: 17px;
}
.welcome .box-reminders p{
    color: #888;
}
/* start post  */
.welcome .post{
    padding: 20px;
    text-align: left;
    text-transform: capitalize;

}
.welcome .info-post .info{
    padding: 10px 20px;
    display: flex;
    align-items: center;
    text-transform: capitalize;   
}
.welcome .info-post .info img{
    width: 60px;
    margin-right: 10px;
}
.welcome .info-post .info p{
    color: #888;
}
.welcome .info-post .content-post{
    padding: 20px 20px;
    text-transform: capitalize;
    line-height: 1.5;
    border-top: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
}
.welcome .info-post .count-post{
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
    color: #888;
}
/* start social media  */
.welcome .social-media{
    padding: 20px;
    text-transform: capitalize;
    text-align: left;
}
.welcome .box-social{
    padding: 20px;
}
.welcome .box-social .info-social{
    display: flex;
    margin-bottom: 10px;
}
.welcome .box-social .info-social .icon-social{
    background-color:var(--blue-color);
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.welcome .box-social .info-social:nth-child(3) .icon-social,
.welcome .box-social .info-social:nth-child(3) .content-social span{
    background-color: var(--red-color) !important;
}
.welcome .box-social .info-social:nth-child(3) .content-social p{
    color: var(--red-color);
}
.welcome .box-social .info-social:nth-child(3) .content-social{
    background-color:#fa9b95;
}
.welcome .box-social .info-social .icon-social i{
    font-size: 25px;
}
.welcome .box-social .content-social{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-basis:calc(100% - 60px);
    text-transform: capitalize;
    background-color:#85baf7;
    padding: 17px;
}
.welcome .box-social .content-social p{
    color: var(--blue-alt-color);
    font-weight: bold;
    font-size: 14px;
}
.welcome .box-social .content-social span{
    width: fit-content;
    background-color: var(--blue-color);
    color: white;
    padding: 3px 5px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}
/* start projects table */
.project-table{
    margin: 10px 20px 20px 20px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
}
.project-table h3{
    text-transform: capitalize;
    margin-bottom: 20px;
}
.project-table .table{
    overflow-x: auto;
}
.project-table table{
    min-width: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.project-table table thead{
    background-color: gainsboro;
    text-transform:uppercase;
    font-weight: bold;
}
.project-table table thead td{
    padding: 15px;
    border-bottom: 1px solid gainsboro;
    border-right: 1px solid gainsboro;
}
.project-table table tbody{
    text-transform: capitalize;
    background-color: ghostwhite;
}
.project-table table tbody tr td{
    padding: 15px;
}
.project-table table tbody tr{
    transition: 0.3s;
}
.project-table table tbody tr:hover{
    cursor: pointer;
    background-color: rgb(240, 240, 252)

} 
.project-table table tbody tr td p{
    background-color: var(--red-color);
    width: fit-content;
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}
.project-table table tbody tr td img{
    width: 30px;
    border-radius: 50%;
    border: 3px solid white;
}
.project-table table tbody tr td img:not(:first-child){
    margin-left: -20px;
}

/* start animation */
@keyframes change-color{
    from{
        background-color: var(--blue-color);
    }
    to{
        background-color: white;
    }
}
/* start media  */
@media (max-width:767px){
    .content .grid-w .welcome{
        text-align: center; 
    }
    .content .grid-w .welcome .intro img{
        display: none;
    }   
    .content .grid-w .welcome .welcome-img{
        margin-left: 0;
    } 
    .content .grid-w .welcome .body{
        display: block;
    }
    .content .grid-w .welcome .body div{
       padding: 10px;
    }
    .content .grid-w .welcome .profil{
        text-align: center;
    }
    .content .grid-w .welcome .profil a{
        padding: 5px 20px;
    }
    .welcome .statis-box{
        flex-direction: column;
    }
    .welcome .statis-box .box1{
        width:100%;
    }
    .welcome .latests-box .box2{
        flex-direction: column;
    }
    .welcome .latests-box .box2 .latests-content{
        flex-direction: column;
    }
    .welcome .latests-box .box2 img{
        margin-bottom: 15px;
    }
    .welcome .latests-box .box2 .latests-content{
        gap: 15px;
    }
    .welcome .upload-box .info-upload h3,
    .welcome .box-reminders h3
    {
        font-size: 14px;
    }
    .welcome .img-projects{
        display: none;
    }
    .welcome .box-reminders p{
      font-size: 13px;
    }
    .project-table{
        margin: 10px;
    }
}
@media (max-width:1200px){
    .project-table table{
        min-width: 1000px
    }
    .project-table .table{
        overflow-x: scroll;
    }
}
/* end dashboard */
/* start settings */
.settings{
    display: none;
}
.settings-page{
    padding:20px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(450px,1fr));
    gap: 10px;
}
.settings-page .welcome{
    background-color: white;
    border-radius: 10px;
    padding: 20px;
}
/* start toggle-checked */
.settings-page .toggle-checked,
.profile .toggle-checked{
    -webkit-appearance: none;
    appearance: none;
}
.settings-page .toggle-switch{
    width: 78px;
    height: 32px;
    background-color: #888;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
}
.settings-page .toggle-switch::before{
    font-family: var(--fa-style-family-classic);
    content: "\f00d";
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: gainsboro;
    top: 4px;
    left: 4px;
    border-radius: 50%;
    font-weight:900;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    transition: 0.3s;
}
.settings-page .toggle-checked:checked + .toggle-switch,
.profile .toggle-checked:checked + .toggle-switch{
    background-color: var(--blue-color);
    
}
.settings-page .toggle-checked:checked + .toggle-switch::before{
    left: 50px;
    content: "\f00c";
    color: var(--blue-color);
}
/* start website control */
.settings-page .welcome h3{
    text-transform: capitalize;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 20px;
}
.settings-page .welcome p{
    text-transform: capitalize;
    color: #888;
}
.settings-page .welcome .website{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 20px;
}
.settings-page .welcome .website .info-website h4{
    margin-bottom: 5px;
    font-size: 14px;
    text-transform: capitalize;
}
.settings-page .welcome textarea{
    width: 100%;
    height: 200px;
    padding: 10px;
    text-transform: capitalize;
    border: 1px solid gainsboro;
    border-radius: 5px;
    outline: none;
}
.settings-page .welcome form{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    text-transform: capitalize;
}
.settings-page .welcome form label{
    margin-bottom: 10px;
}
.settings-page .welcome form input{
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 5px;
    outline: none;
    border: 1px solid gainsboro;
}
.settings-page .welcome form input::placeholder{
    text-transform: capitalize;
    font-size: 14px;
}
.settings-page .welcome form div input{
    width:calc(100% - 100px);
    background-color: gainsboro;
}
.settings-page .welcome form div a{
    width: fit-content;
    text-decoration: none;
    text-transform: capitalize;
    background-color: var(--blue-color);
    color: white;
    font-weight: bold;
    padding: 8px 10px;
    border-radius: 10px;
    margin-left: 10px;
}
/* start security */
.welcome .security{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    align-items:flex-end;
}
.welcome .security:not(:last-child){
    border-bottom: 1px solid ghostwhite;
    padding-bottom: 20px;
}
.welcome .security a{
    width: fit-content;
    text-decoration: none;
    text-transform: capitalize;
    background-color: var(--blue-color);
    color: white;
    font-weight: bold;
    padding: 8px 10px;
    border-radius: 10px;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.welcome .security .info-security{
    text-transform: capitalize;
}
.welcome .security .info-security h4{
    margin-bottom: 5px;
}

/* start social media  */
.welcome .form-social-info{
    margin-top: 30px;
}
.welcome .form-social-info .socil-box{
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}
.welcome .form-social-info .socil-box i{
    width: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgb(168, 167, 167);
    color: rgb(114, 112, 112);
}
.welcome .form-social-info .socil-box input{
    padding:10px 10px 10px 55px;
    width: 100%;
    outline: none;
    border: 1px solid rgb(168, 167, 167);
    border-radius: 5px;
    background-color: gainsboro;
}
/* start widgets and backup*/
.welcome .widgets-box,
.welcome .backup-box{
    margin-top: 20px;
    display: flex;
    align-items: center;
}
.welcome .widgets-box input{
    width:16px;
    height: 16px;
    margin-right: 5px;
}
.welcome .backup-box input{
    margin-right: 5px;
    width: 25px;
    height: 25px;
}
.welcome .widgets-box label,
.welcome .backup-box label{
    text-transform: capitalize;
}
.welcome .backup-server{
    margin-top: 15px;
    border-top: 1px solid gainsboro;
    padding-top: 10px;
    padding-bottom:20px ;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.welcome .backup-server .server{
    flex-basis: calc(33% - 10px);
    gap: 5px;
    border-radius: 10px;
}
.welcome .backup-server .server label{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-transform: capitalize;
    border: 1px solid gainsboro;
    padding: 20px;
    border-radius: 10px;
    z-index: 3;
}
.welcome .backup-server .toggle-radio{
    -webkit-appearance: none;
    appearance: none;
}
.welcome .backup-server .server input[type="radio"]:checked + label{
    border-color: var(--blue-color);
    color: var(--blue-color);
}
@media (max-width:767px){
    .settings-page{
        grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
        gap: 10px;
    }
    .settings-page .welcome form div{
        display: flex;
        flex-direction: column;
    }
    .settings-page .welcome form div input{
        width: 100%;
    }
    .settings-page .welcome form div a{
        margin: 0 0 0 auto;
    }
    .welcome .backup-server .server{
        flex-basis: calc(100% - 10px);
    }

}
/* end settings */
/* start profile */
.profile{
    display: none;
}
.profil-info{
    background-color: white;
    margin: 20px;
    border-radius: 10px;
    display: flex;
}
.profil-info .box-info{
    text-transform: capitalize;
    flex-basis: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    border-right: 1px solid gainsboro;
}
.profil-info .box-info img{
    width: 100px;
    border-radius: 50%;
}
.profil-info .box-info p{
    color: #888;
}
.profil-info .box-info .profile-pro{
    width: 50%;
    height: 10px;
    border-radius: 10px;
    background-color:gainsboro;
    position: relative;
    overflow: hidden;
}
.profil-info .box-info .profile-pro::before{
    position: absolute;
    content: "";
    width: 70%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--blue-color);
}
.profil-info .box-info .star i{
    color: rgb(253, 186, 15);
}
.profil-info .gernal-info{
    flex-basis: 80%;
}
.profil-info .gernal-info .box{
    text-transform: capitalize;
    margin-top: 20px;
    padding-left: 20px;
}
.profil-info .gernal-info .box:not(:last-child){
    border-bottom: 1px solid gainsboro;
}
.profil-info .gernal-info .box p{
    color: #888;
}
.profil-info .gernal-info .box .content{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.profil-info .gernal-info .box .content .content-box{
    flex-basis:25%; 
    display: flex;
    width: fit-content;
}
.profil-info .gernal-info .box .content .content-box span{
    font-weight: bold;
    margin-right: 5px;
}
.profile .toggle-switch{
    width: 100px;
    height: 22px;
    background-color: #888;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    margin-bottom: 18px;
}
.profile .toggle-switch::before{
    font-family: var(--fa-style-family-classic);
    content: "\f00d";
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: white;
    top: 2px;
    left: 3px;
    border-radius: 50%;
    font-weight:900;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    transition: 0.3s;
}
.profile .toggle-checked:checked + .toggle-switch::before{
    left: 80px;
    content: "\f00c";
    color: var(--blue-color);
}
.profile .profile-skills{
    margin: 20px;
    border-radius: 10px;
    display: flex;
    gap: 20px;
}
.profile .profile-skills .skills{
    border-radius: 10px;
    background-color: white;
    flex-basis:calc(35% - 5px);
    padding: 20px;
    text-transform: capitalize;
}
.profile .profile-skills .skills h3,
.profile .profile-skills .latest-activ h3{
    margin-bottom: 5px;
}
.profile .profile-skills .skills p,
.profile .profile-skills .latest-activ p{
    color: #888;
}
.profile .profile-skills .skills ul{
    text-transform: capitalize;
    padding: 20px 0px 0px 0px;
}
.profile .profile-skills .skills ul li{
    display: flex;
    gap: 15px;
    padding:15px 0px;
}
.profile .profile-skills .skills ul li:not(:last-child){
    border-bottom: 1px solid rgb(231, 231, 236);
}
.profile .profile-skills .skills ul li span{
    background-color: gainsboro;
    padding: 4px 8px;
    border-radius: 5px;
    
}
.profile .profile-skills .latest-activ{
    border-radius: 10px;
    background-color: white;
    flex-basis:calc(65% - 5px);
    padding: 20px;
    text-transform: capitalize;
}
.profile .profile-skills .latest-activ .activitles{
    margin-top: 20px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.profile .profile-skills .latest-activ .activitles:not(:last-child){
    border-bottom: 1px solid gainsboro;
}
.profile .profile-skills .latest-activ .activitles img{
    width: 60px;
    border-radius: 50%;
}
.profile .profile-skills .latest-activ .activitles .box-activitles{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.profile .profile-skills .latest-activ .activitles .box-activitles h4{
    margin-bottom: 5px;
}

@media (max-width:1600px){
    .profil-info .gernal-info .box .content .content-box{
        flex-basis: 100%;
    }
    .profil-info .gernal-info{
        flex-basis: 60%;
    }
    .profil-info .box-info{
        flex-basis: 40%;
    }
    .profil-info .gernal-info .box .content{
        gap: 10px;
        margin-top: 20px;
    }
   
    
}
@media (max-width:767px){
    .profil-info{
        flex-direction: column;
        justify-content: center;
    }
    .profil-info .gernal-info .box .content{
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
    .profil-info .gernal-info .box{
        text-align: center;
    }
    .profil-info {
        gap: 20px;
    }
}
/* end profile */
/* start projects */
.projects{
    display: none;
}
.projects .projects-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(450px,1fr));
    gap: 15px;
    padding: 20px;
}
.projects .projects-grid .projects-box{
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    text-transform: capitalize;
    position: relative;
}
.projects .projects-grid .projects-box h3{
    margin-bottom: 10px;
}
.projects .projects-grid .projects-box p{
    color: #888;
    margin-bottom: 10px;
    line-height: 1.5;
}
.projects .projects-grid .projects-box .data{
    position: absolute;
    top: 25px;
    right: 20px;
    color: #888;
}
.projects .projects-grid .projects-box .image-team{
    padding-top: 15px;
    padding-bottom: 30px;
    position: relative;
    min-height: 80px;
    border-bottom: 1px solid gainsboro;
}
.projects .projects-grid .projects-box .image-team img{
    width: 40px;
    border:4px solid white;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}
.projects .projects-grid .projects-box .image-team img:nth-child(2){
    left: 25px;
}
.projects .projects-grid .projects-box .image-team img:nth-child(3){
    left: 50px;
}
.projects .projects-grid .projects-box .image-team img:nth-child(4){
    left: 75px;
}
.projects .projects-grid .projects-box .image-team img:nth-child(5){
    left: 100px;
}
.projects .projects-grid .projects-box .image-team img:nth-child(6){
    left: 125px;
}
.projects .projects-grid .projects-box .projects-langauges{
    text-align: right;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid gainsboro;
}
.projects .projects-grid .projects-box .projects-langauges span{
    background-color: gainsboro;
    border-radius: 5px;
    padding: 5px 7px;
    font-size: 14px;
    font-weight: bold;
}
.projects .projects-grid .projects-box .projects-pro{
    padding-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;    
}
.projects .projects-grid .projects-box .projects-pro .pro{
    width: 200px;
    height: 10px;
    border-radius: 10px;
    background-color: gainsboro;
    position: relative;
    overflow: hidden;
}
.projects .projects-grid .projects-box .projects-pro .pro::before{
    position: absolute;
    content: "";
    width: 80%;
    height: 100%;
    background-color: var(--red-color);
}
.projects .projects-grid .projects-box .projects-pro span{
    color: #888;
    font-weight: bold;    
}
@media (max-width:767px){
    .projects .projects-grid .projects-box .projects-langauges{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .projects .projects-grid .projects-box .projects-langauges span{
        width: fit-content;
    }
    .projects .projects-grid .projects-box .projects-pro{
        flex-direction: column;
        gap: 15px;
    }
    .projects .projects-grid{
        grid-template-columns:minmax(100%,1fr);
    }

}
/* end projects  */
/* start courses */
.courses{
    display: none;
}
.courses .courses-grid{
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 15px;
}
.courses .courses-grid .courses-box{
    background-color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}
.courses .courses-grid .courses-box .courese-img{
    position: relative;
}
.courses .courses-grid .courses-box .courese-img img:first-child{
    max-width: 100%;
}
.courses .courses-grid .courses-box .courese-img img:last-child{
    width: 60px;
    position: absolute;
    top: 10px;
    left: 10px;
    border: 4px solid white;
    border-radius: 50%;
}
.courses .courses-grid .courses-box .courses-info{
    padding: 20px 20px 40px 20px;
    text-transform: capitalize;
    border-bottom: 1px solid gainsboro;
}
.courses .courses-grid .courses-box .courses-info h3{
    margin-bottom: 10px;
}
.courses .courses-grid .courses-box .courses-info p{
    color: #888;
    line-height: 1.5;
    font-size: 14px;
}
.courses .courses-grid .courses-box .courses-fotter{
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 20px;
    text-transform: capitalize;
    position: relative;
}
.courses .courses-grid .courses-box .courses-fotter span{
    font-size: 14px;
    font-weight:bold;
    color: #888;
}
.courses .courses-grid .courses-box .courses-fotter a{
    text-decoration: none;
    background-color: #0d69d5;
    font-size: 16px;
    color: white;
    font-weight: bold;
    padding: 8px 10px;
    border-radius: 10px;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%)
}
/* end courses */
/* start friends */
.friends{
    display: none;
}
.friends .friends-grid{
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 10px;
}
.friends .friends-grid .friends-box{
    background-color: white;
    border-radius: 10px;
    padding: 10px;
}
.friends .friends-grid .friends-box .friends-photo i{
    background-color: gainsboro;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}
.friends .friends-grid .friends-box .friends-photo .image{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-transform: capitalize;
    border-bottom: 1px solid gainsboro;
    padding-bottom: 20px;
}
.friends .friends-grid .friends-box .friends-photo img{
    width: 120px;
    border-radius: 50%;
}
.friends .friends-grid .friends-box .friends-photo p{
    color: #888;
}
.friends .friends-grid .friends-box .friends-info{
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
}
.friends .friends-grid .friends-box .friends-info .friends-content{
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    text-transform: capitalize;
}
.friends .friends-grid .friends-box .friends-info .friends-content span i{
    width: 20px;
    font-size: 14px;
}
.friends .friends-grid .friends-box .friends-info .friends-vip{
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.friends .friends-grid .friends-box .friends-info .friends-vip span{
    font-size: 40px;
    color: var(--red-color);
    font-weight: bold;
    opacity: 0.2;
}
.friends .friends-grid .friends-box .friends-fotter{
    display: flex;
    border-top: 1px solid gainsboro;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 10px;
    padding: 20px 10px 10px 10px;
}
.friends .friends-grid .friends-box .friends-fotter span{
    font-size: 12px;
    color: #888;
}
.friends .friends-grid .friends-box .friends-fotter .fotter-botton a{
    text-decoration: none;
    font-size: 14px;
    padding: 5px 7px;
    border-radius: 5px;
    background-color: gainsboro;
    color: white;
    text-transform: capitalize;
}
.friends .friends-grid .friends-box .friends-fotter .fotter-botton a:first-child{
    background-color: var(--blue-color);
}
.friends .friends-grid .friends-box .friends-fotter .fotter-botton a:last-child{
    background-color: var(--red-color);
}
/* end friends */
/* start files  */
.files{
    display: none;
}
.files-page{
    padding: 20px;
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    gap: 10px;
}
.files-page .files-box{
    background-color: white;
    flex-basis: 300px;
    border-radius: 10px;
    padding: 20px;
    text-transform: capitalize;
}
.files-page .files-box h3{
    margin-bottom: 20px;
}
.files-page .files-box .files-info{
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 10px;
    border: 1px solid gainsboro;
    border-radius: 10px;
    margin-bottom: 10px;
}
.files-page .files-box .files-info i{
    font-size: 25px;
    width: 45px;
    height: 100%;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(238, 130, 238, 0.20);
}
.files-page .files-box .files-info .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.files-page .files-box .files-info .content .info h4{
    margin-bottom: 5px;
}
.files-page .files-box .files-info .content .info p,
.files-page .files-box .files-info .content span{
    color: #888;
}
.files-page .files-box button{
    text-decoration: none;
    background-color: var(--blue-color);
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
    outline: none;
    width: fit-content;
    text-transform: capitalize;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.files-page .files-box button:hover{
    background-color: var(--blue-alt-color);
}
.files-page .files-box button i{
    margin-right: 10px;
    font-size: 16px;
}
.files-page .files-box .button{
    display: flex;
    justify-content: center;
}
.files-page .files-box button:hover i{
    animation: top-down 0.3s infinite alternate ;
}
.files-page .files-content{
    flex-basis: calc(100% - 310px);
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    align-items: flex-start;
}
.files .files-page .files-content .files-down{
    background-color: white;
    border-radius: 10px;
    position: relative;
}
.files .files-page .files-content .files-down .icons{
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
    color: #888;
}
.files .files-page .files-content .files-down .files-image{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    margin-top: 50px;
}
.files .files-page .files-content .files-down .files-image p{
    font-weight: bold;
    font-size: 17px;
}
.files .files-page .files-content .files-down .files-image i{
    font-size: 50px;
}
.files .files-page .files-content .files-down .files-image .orange{
    color: var(--orange-color);
}
.files .files-page .files-content .files-down .files-image .blue{
    color: var(--blue-color);
}
.files .files-page .files-content .files-down .files-image .green{
    color: var(--green-color);
}
.files .files-page .files-content .files-down .filse-name{
    padding: 10px 10px;
    text-transform: capitalize;
    color: #888;
}
.files .files-page .files-content .files-down .files-size{
    border-top:1px solid gainsboro;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    color: #888;
}
@media (max-width:767px){
    .files-page{
        flex-direction: column;
        align-items: normal;
    }
}
@keyframes top-down{
    0%,100%{
        transform: translateY(2px);
    }
    50%{
        transform: translateY(-5px);
    }
}
/* end files  */
/* start plans */
.plans{
    display: none;
}
.plans .plans-page{
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(450px,1fr));
    gap: 20px;
}
.plans .plans-page .plans-box{
    background-color: white;
    padding: 20px;
    border-radius: 10px;
}
.plans .plans-page .plans-box .plans-price{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-transform: capitalize;
    gap: 10px;
    font-size: 20px;
    border:3px solid white;
    border-radius: 10px;
    color: white;
    font-weight: bold;
}
.plans .plans-page .plans-box .orange{
    outline: 2px solid var(--orange-color);
    background-color: var(--orange-color);

}
.plans .plans-page .plans-box .blue{
    outline: 2px solid var(--blue-color);
    background-color: var(--blue-color);
}
.plans .plans-page .plans-box .green{
    outline: 2px solid var(--green-color);
    background-color: var(--green-color);
}
.plans .plans-page .plans-box .plans-price .price{
    font-size: 30px;
    position: relative;
}
.plans .plans-page .plans-box .plans-price .price i{
    font-size: 14px;
    position: absolute;
    top: 0;
    left: -10px;
}
.plans .plans-page .plans-box ul li i{
    width: 20px;
}
.plans .plans-page .plans-box ul{
    margin: 10px;
}
.plans .plans-page .plans-box ul li{
    padding: 20px 0;
    border-bottom: 1px solid gainsboro;
    text-transform: capitalize;
    position: relative;
}
.plans .plans-page .plans-box ul li .yes{
    color: var(--green-color);
}
.plans .plans-page .plans-box ul li .no{
    color: var(--red-color);
}
.plans .plans-page .plans-box ul li .help{
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
}
.plans .plans-page .button{
    margin-top: 20px;
    text-align: center;
}
.plans .plans-page .button button{
    padding: 7px 15px;
    background-color: var(--green-color);
    color: white;
    font-weight: bold;
    text-transform: capitalize;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 5px;    
}

@media (max-width:767px){
    .plans .plans-page{
        grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    }
    .plans .plans-page .plans-box ul li .help{
        right: 0;
    }
}
/* end plans */