:root {
   --blue: #0075ff;
   --blue-alt: #0d69d5;
   --orange: #f59e0b;
   --green: #22c55e;
   --red: #f44336;
   --grey: #888;
}
* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

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

*:focus {
   outline: none;
}

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);
}
::-webkit-scrollbar-thumb:hover {
   background-color: var(--blue-alt);
}
.page {
   background-color: #f1f5f9;
   min-height: 100vh;
}

/*Start Sidebar*/
.sidebar {
   width: 250px;
   box-shadow: 0 0 10px #ddd;
}
.sidebar > h3 {
   margin-bottom: 50px;
}
.sidebar > h3::before,
.sidebar > h3::after {
  content: "";
  background-color: black;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
}
.sidebar > h3::before {
  width: 80px;
  height: 2px;
  bottom: -20px;
}
.sidebar > h3::after {
  bottom: -29px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 4px solid white;
}
.sidebar ul li a {
   transition: 0.3s;
   margin-bottom: 5px;
}
.sidebar ul li a:hover,
.sidebar ul li a.active {
   background-color: #f6f6f6;
}
.sidebar ul li a span {
   font-size: 14px;
   margin-left: 10px;
}
@media (max-width: 767px) {
   .sidebar {
      width: 62px;
      padding: 10px;
   }
   .sidebar > h3 {
      font-size: 13px;
      margin-bottom: 15px;
   }
   .sidebar > h3::before,
   .sidebar > h3::after {
      display: none;
   }
}
/*End Sidebar*/
/*Start Content*/
.content {
overflow: hidden;
}
.head {
   padding: 5px;

}
.head .search::before{
   font-family: var(--fa-style-family-classic);
   content: "\f002";
   font-weight: 900;
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 14px;
   color: var(--grey);
}
.head .search input {
   border: 1px solid #ccc;
   border-radius: 10px;
   margin-left: 10px;
   padding-left: 30px;
   width: 160px;
   transition: width 0.3s;
}
.head .search input:focus{
   width: 200px;
}
.head .search input:focus::placeholder{
   opacity: 0;
}
.head .icons .notification::before {
   content: "";
   position: absolute;
   width: 10px;
   height: 10px;
   background-color: var(--red);
   border-radius: 50%;
   right: -5px;
   top: -5px;
}

.head .icons img {
   width: 32px;
   height: 32px;
   margin-left: 15px;
}

.page h1 {
   margin:  20px 20px 40px;
}

.page h1::before,
.page h1::after{
   content: "";
   height: 3px;
   position: absolute;
   bottom: -10px;
   left: 0;
}
.page h1::before {
   background-color: white;
   width: 120px;
}
.page h1::after {
   background-color: black;
   width: 40px;
}
.wrapper {
   grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
   margin-inline: 20px;
   margin-bottom: 20px;
}
@media  (max-width: 767px){
   .wrapper {
      grid-template-columns: minmax(200px, 1fr);
      margin-inline: 10px;
      gap: 10px;
   }
}
/*End Content*/
/*Start  Welcome widget*/
.wolecom {
   overflow: hidden;
}
.wolecom .intro img {
   width: 200px;
   margin-bottom: -10px;
}
.wolecom .avatar{
   width: 64px;
   height: 64px;
   border: 2px solid white;
   border-radius: 50%;
   padding: 2px;
   box-shadow: 0 0 5px #ddd;
   margin-left: 20px;
   margin-top: -32px;
}
.wolecom .body {
   border-top: 1px solid #eee;
   border-bottom: 1px solid #eee;
}
.wolecom .body > div {
   flex: 1;
}
.wolecom .visit {
   margin: 0 15px 15px auto;
   transition: 0.3s;
}
.wolecom .visit:hover{
   background-color: var(--blue-alt);
}
@media (max-width: 767px){
   .wolecom .intro {
      padding-bottom: 30px;
   }
   .wolecom .avatar {
      margin-left: 0;
   }
   .wolecom .body > div:not(:last-child){
      margin-bottom: 20px;
   }
}
/*End  Welcome widget*/
/*Start  quick-draft*/
.quick-draft textarea {
   resize: none;
   min-height: 180px;
}
.quick-draft .save{
   margin-left: auto;
   transition: 0.3s;
   cursor: pointer;
}
.quick-draft .save:hover{
   background-color: var(--blue-alt);
}
/*End quick-draft*/
/*Start Targets*/
.targets .target-row .icon {
   width: 80px;
   height: 80px;
   margin-right: 15px;
}
.targets .detalis {
   flex: 1;
}
.targets .detalis .progress {
   height: 4px;
}
.targets .detalis .progress > span {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
}
.targets .detalis .progress > span span {
   position: absolute;
   bottom: 16px;
   right: -16px;
   color: white;
   padding: 2px 5px;
   border-radius: 6px;
   font-size: 13px;
}
.targets .detalis .progress > span span::after {
   content: "";
   position: absolute;
   border-color: transparent;
   border-width: 5px;
   border-style: solid;
   bottom: -9px;
   left: 50%;
   transform: translateX(-50%);
}
.targets .detalis .progress > .blue span::after {
   border-top-color: var(--blue);
}
.targets .detalis .progress > .orange span::after {
   border-top-color: var(--orange);
}
.targets .detalis .progress > .green span::after {
   border-top-color: var(--green);
}

.blue .icon,
.blue .progress {
   background-color: rgb(0 117 255 / 20%);
}
.orange .icon,
.orange .progress {
   background-color: rgb(245 158 11 / 20%);
}
.green .icon,
.green .progress {
   background-color: rgb(34 197 94 / 20%);
}
/*End Targets*/
/*Start Tickets*/
.ticket .box {
   border: 1px solid #ccc;
   width: calc(50% - 10px);
}
@media (max-width: 767px) {
   .ticket .box {
      width: 100%;
   }
}
/*End Tickets*/
/* Start Last News*/
.latest-news .news-row:not(:last-of-type) {
   margin-bottom: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #eee;
}
.latest-news .news-row img {
   width: 100px;
   border-radius: 6px;
   margin-right: 15px;
}
.latest-news .info {
   flex-grow: 1;
}
.latest-news .info h3 {
   margin: 0 0 5px;
   font-size: 16px;
}
@media (max-width: 767px) {
   .latest-news .news-row {
      display: block;
   }
   .latest-news .news-row .label {
      margin: 10px auto;
      width: fit-content;
   }
}
/* End Last News*/
/*Start Tasks*/
.tasks .task-row:not(:last-of-type) {
   margin-bottom: 15px;
   padding-bottom: 15px;
   border-bottom: 1px solid #eee;
}
.tasks .info {
   flex-grow: 1;
}
.tasks .done {
   opacity: 0.3;
}
.tasks .done h3,
.tasks .done p {
   text-decoration: line-through;
}

.tasks .delete {
   cursor: pointer;
   transition: 0.3s;
}
.tasks .delete:hover {
   color: var(--red);
}
/*End Tasks*/
/* Start latest Uploads */
.latest-uploads ul li:not(:last-child) {
   border-bottom: 1px solid #eee;
}
.latest-uploads ul li img {
   width: 40px;
   height: 40px;
}
/* End latest Uploads */
/*Start last Project*/
.last-project ul::before {
   content: "";
   position: absolute;
   left: 10px;
   width: 2px;
   height: 100%;
   background-color: var(--blue);
}
.last-project ul li::before {
   content: "";
   width: 20px;
   height: 20px;
   display: block;
   border-radius: 50%;
   display: block;
   background-color: white;
   border: 2px solid white;
   outline: 2px solid var(--blue);
   margin-right: 15px;
   z-index: 1;
}
.last-project ul li.done::before {
   background-color: var(--blue);
}

.last-project ul li.current::before {
   animation: change-color 0.9s infinite alternate;
}
@keyframes change-color {
   from {
      background-color: var(--blue);
   }
   to {
      background-color: white;
   }
}
.last-project .launch-icon {
   position: absolute;
   width: 160px;
   right: 0;
   bottom: 0;
   opacity: 0.1;
}
/* End  last Project */
/* Start Reminders */
.reminders ul li .key {
   width: 15px;
   height: 15px;
}
.reminders ul li > .blue {
   border-left: 2px solid var(--blue);
}
.reminders ul li > .green {
   border-left: 2px solid var(--green);
}
.reminders ul li > .orange {
   border-left: 2px solid var(--orange);
}
.reminders ul li > .red {
   border-left: 2px solid var(--red);
}
/* End Reminders */
 /* Start Latest Post */
 .latest-post .avatar {
   width: 48px;
   height: 48px;
 }
 .latest-post .post-content {
   text-transform: capitalize;
   line-height: 1.8;
   border-top: 1px solid #eee;
   border-bottom: 1px solid #eee;
   min-height: 140px;
 }
 /* End Latest Post */
 /* Start Social Media */
 .social-media .box {
   padding-left: 70px;
 }
 .social-media .box i {
   position: absolute;
   left: 0;
   top: 0;
   width: 52px;
   transition: 0.3s;
 }
 .social-media .box i:hover {
   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;
 }
 /* End Social Media */
 /* Start Projects table */
 .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 settings */
 /* Start Settings Box */
 .settings-page {
   grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
 }
 @media (max-width: 767px) {
   .settings-page {
      grid-template-columns: minmax(100px, 1fr);
      margin-inline: 10px;
      gap: 10px;
    }
 }
 .settings-page .close-message {
   border: 1px solid #ccc;
   resize: none;
   min-height: 150px;
 }
 .toggle-checkbox {
   -webkit-appearance: none;
   appearance: none;
   display: none;
 }
 .toggle-switch {
   background-color: #ccc;
   width: 78px;
   height: 32px;
   border-radius: 16px;
   position: relative;
   transition: 0.3s;
   cursor: pointer;
 }
 .toggle-switch::before {
   font-family: var(--fa-style-family-classic);
   content: "\f00d";
   font-weight: 900;
   background-color: white;
   width: 24px;
   height: 24px;
   position: absolute;
   border-radius: 50%;
   top: 4px;
   left: 4px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #aaa;
   transition: 0.3s;
 }
 .toggle-checkbox:checked + .toggle-switch {
   background-color: var(--blue);
 }
 .toggle-checkbox:checked + .toggle-switch::before {
   content: "\f00c";
   left: 50px;
   color: var(--blue);
 }
 /* End Settings Box */
/* Start General Info Box */
.settings-page .email {
   display: inline-flex;
   width: calc(100% - 80px);
}
/* sec-box */
.settings-page .sec-box {
   padding-bottom: 15px;
}
.settings-page .sec-box:not(:last-child) {
   border-bottom: 1px solid #eee;
}
.settings-page .sec-box .button {
   transition: 0.3s;
}
.settings-page .sec-box .button:hover {
   background-color: var(--blue-alt);
}

/* sec-box */
/* End General Info Box */
/* start Social Info */
.settings-page .social-boxes i {
   width: 40px;
   height: 40px;
   background-color: #f6f6f6;
   border: 1px solid #ddd;
   border-right: none;
   border-radius: 6px 0 0 6px;
   transition: 0.3s;
}
.settings-page .social-boxes input {
   height: 40px;
   background-color: #f6f6f6;
   border: 1px solid #ddd;
   padding-left: 10px;
   border-radius: 0 6px 6px 0;
}
.settings-page .social-boxes > div:focus-within i {
   color: black;
}
.settings-page :disabled {
   cursor: no-drop;
   background-color: #f0f4f8;
}
/* End Social Info */
/* Start widgets-control */
.settings-page .widgets-control input[type="checkbox"] {
   -webkit-appearance: none;
   appearance: none;
}
.settings-page .widgets-control .control label {
   padding-left: 30px;
   cursor: pointer;
   position: relative;
}
.settings-page .widgets-control .control label::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   width: 14px;
   height: 14px;
   border: 2px solid var(--grey);
   margin-top: -9px;
   border-radius: 5px;
}
.settings-page .widgets-control .control label:hover::before {
   border-color: var(--blue-alt);
}

.settings-page .widgets-control .control label::after {
   font-family: var(--fa-style-family-classic);
   content: "\f00c";
   font-weight: 900;
   position: absolute;
   left: 0;
   top: 50%;
   margin-top: -9px;
   background-color: var(--blue);
   color: white;
   font-size: 12px;
   width: 18px;
   height: 18px;
   display: flex;
   justify-content: center;
   align-items: center;
   transform: scale(0) rotate(360deg);
   transition: 0.4s;
   border-radius: 5px;

}
.settings-page .widgets-control input[type="checkbox"]:checked + label::after {
   transform: scale(1);
}
/* End widgets-control */
/* Start Backup Manager */
.backup-manager input[type="radio"]{
   -webkit-appearance: none;
   appearance: none;
}
.backup-manager .date label {
   padding-left: 30px;
   cursor: pointer;
   position: relative;
}
.backup-manager .date label::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   margin-top: -11px;
   width: 18px;
   height: 18px;
   border: 2px solid var(--grey);
    border-radius: 40%;
}
.backup-manager .date label::after {
   content: "";
   position: absolute;
   left: 5px;
   top: 5px;
   width: 12px;
   height: 12px;
   background: var(--blue);
   border-radius: 40%;
   transition: 0.4s;
   transform: scale(0);
}
.backup-manager .date input[type="radio"]:checked + label::before {
   border-color: var(--blue);
}
.backup-manager .date input[type="radio"]:checked + label::after {
   transform: scale(1);
}
.backup-manager .servers {
   border-top: 1px solid #eee;
   padding-top: 20px;
}
.backup-manager .servers .server {
   border: 2px solid #eee;
   position: relative;
}
@media (width < 767px) {
   .backup-manager .servers {
     flex-wrap: wrap;
   }
}
.backup-manager .servers .server label {
   cursor: pointer;
}
.backup-manager .servers input[type="radio"]:checked + .server {
   border-color: var(--blue);
   color: var(--blue-alt);
}
/* End Backup Manager */ 
 /* End settings */
 /* Start profile-page */
 /* Start overview */
 @media (width < 768px) {
   .profile-page .overview {
      flex-direction: column;
   }
 }
 .profile-page .avatar-box {
 width: 300px;
 }
 @media (width > 768px) {
   .profile-page .avatar-box {
   border-right: 1px solid #eee;
   }
 }
 .profile-page .avatar-box > img {
   width: 120px;
   height: auto;
 }
 .profile-page .avatar-box .level {
   height: 6px;
   overflow: hidden;
   margin: auto;
   width: 70%;
 }
 .profile-page .avatar-box .level span {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   background-color: var(--blue);
   border-radius: 6px;
 }
 /* End overview */
  /* Start info box */
   .profile-page .info-box .box {
   flex-wrap: wrap;
   border-bottom: 1px solid #eee;
   transition: 0.4s;
   }
   .profile-page .info-box .box:hover {
      background-color: #f9f9f9;
      }
      .profile-page .info-box .box > div {
         min-width: 250px;
         padding: 15px 0 0;
      }
   .profile-page .info-box h4 {
      font-weight: normal;
   }
   
 .profile-page .info-box .toggle-switch {
   background-color: #ccc;
   width: 85px;
   height: 28px;
   border-radius: 16px;
   position: relative;
   transition: 0.3s;
   cursor: pointer;
 }
 .profile-page .info-box .toggle-switch::before {
   font-family: var(--fa-style-family-classic);
   content: "\f00d";
   font-weight: 900;
   background-color: white;
   width: 20px;
   height: 20px;
   position: absolute;
   border-radius: 50%;
   top: 4px;
   left: 4px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #aaa;
   transition: 0.3s;
 }
 .profile-page .info-box .toggle-checkbox:checked + .toggle-switch {
   background-color: var(--blue);
 }
 .toggle-checkbox:checked + .toggle-switch::before {
   content: "\f00c";
   left: 60px;
   color: var(--blue);
 }
   /* End info box */
   /* Start  Other data */
   @media (max-width: 767px) {
      .profile-page .other-data {
         flex-direction: column;
      }
   }
   .profile-page .skills-card ul li {
      padding: 15px 0;
   }
   .profile-page .skills-card ul li:not(:last-child) {
      border-bottom: 1px solid #eee;
   }
   .profile-page .skills-card ul li span {
      display: inline-flex;
      padding: 4px 10px;
      background-color: #eee;
      border-radius: 6px;
      font-size: 14px;
   }
   .profile-page .skills-card ul li span:not(:last-child){
      margin-right: 5px;
   }
   .profile-page .other-data .activities {
      flex-grow: 2;
   }
   /* End Other data */
 /* End profile-page */