*{
    margin: 0;
}

/* =========================================== global design ============================================ */
:root{
    --body:#1a233a;
    --text:#8a99b5;
    --border:#283557;
    --primary:rgb(255, 255, 255);
    --card:#d8e6fe;
    --btn:linear-gradient(to right, rgb(42, 96, 42), 60.5%, rgb(43, 176, 43) 100%);
    --btn-1:linear-gradient(to right, rgb(43, 176, 43), 60.5%, rgb(42, 96, 42)  100%);
    --light:#ccc;
    --main:#f7f7f7;
    --dim:rgb(42, 96, 42);
}

.intro label{
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 6px;
    padding:10px 35px 5px 35px;
}
.main-btn {
    border: none;
    outline: none;
    background: var(--btn);
    color: var(--main);
    padding: 9px 30px;
    border-radius: 4px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
}
.main-btn-2 {
    border: none;
    outline: none;
    background: var(--btn);
    color: var(--main);
    padding: 9px 30px;
    border-radius: 4px;
}
.save-cta {
    display: flex;
    justify-content: right;
}
a{
    text-decoration: none;
}
body{
    /* background-color: var(--body); */
}
.line {
    height: 1px;
    width: 100%;
    background: var(--light);
}
.margin {
    margin: 0 2%;
}
/* =========================================== end of global design ============================================ */

/* ======================================== dashbard content ========================================================= */
.dashboard-content {
    display: flex;

}
.dash-sidebar {
    width: 19%;
    border-right: 1px solid var(--border);
    background: var(--body);
    color: var(--text);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 50px;
}
.dash-sidebar::-webkit-scrollbar {
    width: 10px;
}


#sidebars::-webkit-scrollbar {
    width: 10px;
}
#sidebars {
    position: fixed;
    top: 0;
    left: -1000px;
    height: 100vh;
    background:var(--body);
    width: 25%;
    color: var(--text);
    transition: left 1s ease;
    display: none;
    z-index: 10000;
    overflow-y: auto;
    overflow-x: hidden;
     padding-bottom: 100px;
}
#sidebars.show{
    left: 0;
}
#bars{
    display: none;
    cursor: pointer;
}
.no-scroll {
    overflow: hidden;
}
.wrap-image {
    display: none;
}
.side-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px 10px 20px;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    background: var(--body);
}
.side-logo img{
    cursor: pointer;
}
.side-nav i{
    cursor: pointer;
}

.sidebar-item-1 {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 35px;
    transition: 0.30s ease;
}
.sidebar-item-1 label{
    font-weight: bold;
    font-size: 15px;
}
.sidebar-items{
    margin: 0 20px 0 0;
}
.sidebar-items a {
    color:var(--text) ;
}
.submenu{
    margin-left: 55px;
    line-height: 14px;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
    pointer-events: none;
    opacity: 0;
}
.submenu.open {
    pointer-events: auto;
    opacity: 1;
}
.submenu p{
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
.submenu a{
    color: var(--text);
}
.submenu p:nth-child(1) {
    margin-top: 14px;
}
.submenu p:hover{
    color:  yellow;
}
.submenu a:hover{
    color:  yellow;
}
.sidebar-item-1:hover{
    border-left: 3px solid yellow;
    /* background: #343e58; */
    background: rgba(255, 255, 255, 0.1);
    color: yellow;
    cursor: pointer;
}
.sidebar-item-1.active{
    border-left: 3px solid yellow;
    background: rgba(255, 255, 255, 0.1);
    color:  yellow;
    cursor: pointer;
}
.side-drop.active{
    color:  yellow;
}
.dash-sidebar-content a{
    color: var(--text);
}
/* ======================================== end of dashbard content ========================================================= */


/* ================================ dash body section =========================================== */
.search input{
    border: none;
    outline: none;
    background: transparent;
    color: #555;
    width: 100%;
}
.first-item a{
    color: #555;
}
.search {
    display: flex;
    align-items: center;
    /* border: 1px solid var(--border); */
    background:#ddd;
    padding: 8px;
    gap: 5px;
    border-radius: 8px;
}
.search ::placeholder{
    color: #555;
    font-size: 14px;
}
.side-nav-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    /* border-bottom: 1px solid #ddd; */
    position: sticky;
    top: 0;
    background:var(--main) ;
    color: #555;
    z-index: 1000;
}
.profile-pic img{
    width: 45px;
    height: 45px;
    border-radius: 100px;
    cursor: pointer;
}
.side-nav-1-content {
    display: flex;
    align-items: center;
    gap: 20px;
}
.side-nav-1-content svg{
    cursor: pointer;
}
.profile-item label{
    font-size: 13px;
    cursor: pointer;
}
.profile-item {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
.profile-nav {
    display: block;
}
.profile-nav-items h6{
    font-size: 13px;
    margin-bottom: 15px;
}
.profile-nav-items {
    /* border: 1px solid var(--border); */
    background: var(--primary);
    border-radius: 10px;
    min-width: 160px;
    z-index: 2;
    position: absolute;
    right: 30px;
    top:85px;
    display: none;
    transition: 1s ease-in-out;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.dash-body::-webkit-scrollbar {
    width: 1px;
}
.dash-body {
    width: 81%;
    background:var(--main);
    color: #555;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.main-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.main-left {
    width: 100%;
}
.main-right iframe{
    width: 100%;
    height: 50vh;
    border-radius: 10px;
}
.main-left-item {
    display: flex;
    align-items: center;
    background: var(--primary);
    padding: 30px 20px;
    border-radius: 10px;
    gap: 20px;
    justify-content: space-between;
    color: #555;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.main-left-icon{
    padding: 13px;
    background-color: rgb(248, 232, 234);
    border-radius: 100px;
    width: fit-content;
}
.main-left-icon svg{
    width: 35px;
    height: 35px;
    color:  rgb(98, 98, 227);
}
.m{
    padding: 13px;
    background-color: rgb(248, 232, 234);
    border-radius: 100px;
}
.assign-left svg{
    width: 35px;
    height: 35px;
    color:  rgb(98, 98, 227);
}
.assign-left-icon{
    padding: 13px;
    background-color:  rgb(234, 234, 253);
    border-radius: 100px;
    width: fit-content;
}
.assign-left p{
    font-size: 14px;
}
.assign-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--light);
    padding: 20px 20px 10px 20px;
    border-radius: 10px;
    margin-bottom: 15px;
}
.assignment-content a{
    color: unset;
}
.assignment-content {
    display: block;
}
.all-assignment {
    padding: 15px;
    background:var(--primary);
    border-radius: 20px;
}
.assign-head {
    display: flex;
    align-items:flex-start;
    justify-content: space-between;
}
.main-left-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.main-left-title h5{
    font-size: 15px;
}

/* ================================ end of dash body section =========================================== */


/* ======================================== footer section =========================================== */
.footer-content {
    text-align: center;
}
.all-footer{
    /* background-color: var(--primary); */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.168);
    padding: 20px 0 1px 0;
}
.footer-content p{
    font-size: 14px;
}
.footer-content a {
    color:rgb(42, 96, 42);
    font-weight: 500;
}
/* ======================================== end of footer section =========================================== */




/* ====================================== student table section ================================================== */
 .status-badge {
      display: inline-flex;
      align-items: center;
      background-color: #fcedda;
      color: var(--light);
      font-weight: 500;
      padding: 2px 12px;
      border-radius: 999px;
      font-size: 14px;
    }

    .status-badge i {
      font-size: 8px;
      margin-right: 6px;
      color: #fa8c16;
    }
    .status-badge label{
        color: #fa8c16;
    }

 .status-badge-1 {
      display: inline-flex;
      align-items: center;
      background-color: #d9fbe7;
      color: #17b46f;
      font-weight: 500;
      padding: 2px 12px;
      border-radius: 999px;
      font-size: 14px;
    }

    .status-badge-1 i {
      font-size: 8px;
      margin-right: 6px;
      color: #17b46f;
    }
    .status-badge-1 label{
        color: #17b46f;
    }

.all-table {
    padding: 20px;
    background: var(--primary);
    border-radius: 10px;
}
table {
    border-radius: 20%;
}
.table th{
    font-size: 15px;
    color: #555;
    background: rgba(11, 0, 226, 0.04);
}
.table span{
    color: #ccc;
    font-weight: lighter;
}
.table td{
    font-size: 14px;
}
.course-table-title p{
    font-weight: bold;
    color: #555;
    font-size: 20px;
}
.user-profile img {
    width: 40px;
    height: 40px;
    border-radius: 100px;
}
.user-profile {
    display: flex;
    align-items: center;
    gap: 5px;
}
.table input{
    accent-color: rgb(98, 98, 227);
    width: 16px;
    height: 16px;
}
/* ====================================== end of student table section ================================================== */

/* ======================================= setting section ====================================================== */

.profile-left img{
    width: 150px;
    height: 150px;
    border-radius: 100%;
    margin-bottom: 5px;
    cursor: pointer;
}
.profile-left {
    text-align: center;
}
#file-input {
    display: none;
}
.edit-icon svg{
    font-size: 1.5rem;
    /* background-color:rgba(0, 0, 0, 0.738); */
    width: fit-content;
    color: #675e5e;
    /* padding: 10px; */
    position: absolute;
    bottom: 15px;
    right: 1px;
}
.edit-icon {
    position: relative;
}
.edit-profile {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.edit-profile-left img{
    width: 180px;
    height: 180px;
    border-radius: 100%;
    margin-bottom: 5px;
    cursor: pointer;
}
.profile-content {
    display: flex;
    align-items: center;
    gap: 30px;
}
.profile-right p span {
    display: block;
}
.profile-right p {
    margin-bottom: 20px;
}
.profile-right h5{
    font-weight: bold;
    background: linear-gradient(to left,rgb(42, 96, 42), rgb(49, 165, 49));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}
.all-profile {
    /* background: var(--primary); */
    border: 1px solid var(--light);
    padding: 20px;
    border-radius: 10px;
}
.personal-item h6{
    font-weight: bold;
}
.personal-item p{
    font-size: 15px;
}
.personal-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.edit-input-content label{
    display: block;
    font-size: 15px;
    margin-bottom: 5px;
}
.edit-input-content input {
    width: 100%;
    border: 1px solid #ccc;
    background-color: transparent;
    outline: none;
    padding: 10px;
    border-radius: 7px;
    margin-bottom: 15px;
}
.edit-input-content select {
    width: 100%;
    border: 1px solid #ccc;
    background-color: transparent;
    outline: none;
    padding: 10px;
    border-radius: 7px;
    margin-bottom: 20px;
}
.edit-input-content{
    width: 100%;
}
.all-edit-input {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* ======================================= end of  setting section ====================================================== */


/* ============================================== support section ====================================== */
.all-support {
    background: linear-gradient(rgba(66, 65, 65, 0.579), rgba(66, 65, 65, 0.579)), url(../image/img-2.jpg) no-repeat center center/cover;
    border-radius: 15px;
    padding: 20px 0;
}
.support {
    text-align: center;
}
.support-search input{
    border: none;
    outline: none;
    background-color: transparent;
    color: #555;
    width: 100%;
}
.support-search svg{
    color: #555;
}
.support-search {
    display: flex;
    align-items: center;
    gap: 7px;
    background-color: var(--primary);
    padding: 6px 10px;
    border-radius: 30px;
    width: 50%;
    justify-self: center;

}
.support-content h3{
    color: var(--primary);
    font-weight: bold;
}
.support-content p{
    color: var(--light);
}
.producer-name img{
    width: 40px;
    height: 40px;
    border-radius: 100%;
}
.producer-name {
    display: flex;
    align-items: center;
    gap: 10px;
}
.producer-name span{
    color: var(--dim);
    font-weight: 500;
}
.support-card-item {
    background: var(--primary);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.support-icon svg{
    color: var(--dim);
}
.support-icon {
    background: rgba(17, 211, 17, 0.197);
    width: fit-content;
    padding: 15px 15px 10px 15px;
    border-radius: 10px;
}
.support-card-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
/* ============================================== end of support section ====================================== */

/* ====================================== overview section ==================================== */
.outer-bar {
    width: 100%;
    height: 13px;
    background-color: #ccc;
    border-radius: 10px;
    
    
}
.inner-bar {
    width: 80%;
    background-color: green;
    height: 13px;
    border-radius: 10px;
    animation: runX 20s linear infinite;   
}
.inner-bar-1 {
    width: 45%;
    background-color:rgb(255, 213, 3);
    height: 13px;
    border-radius: 10px;   
}
.inner-bar-2 {
    width: 25%;
    background-color:rgb(255, 0, 0);
    height: 13px;
    border-radius: 10px;   
}

.overview-item h1{
    text-align: center;
    margin-top: 10px;
}

.control-btn {
    border: none;
    outline: none;
    width: 50%;
    padding: 10px;
    color: white;
    font-weight: bold;
    background: var(--btn);
    border-radius: 10px;
    display:block;
    justify-self: center;
}
.control-btn:hover {
    background: var(--btn-1);
}
.overview-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
.overview-item {
    padding: 20px ;
    border: 1px solid #ccc;
    border-radius: 20px;
}

canvas {
    width: 100% !important;
    margin-top: 50px ;
    display: block;
}
/* ====================================== end of overview section ==================================== */