@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Raleway", sans-serif;

}

::selection {

  color: #050a16;

  background: #dee8ff;

}

body{

    width: 100%;

    height: auto;

    background-color: #fff;

    position: relative;

}





.left-side-bar{

    width: 18%;

    height: 695px;

    border-right: 1px solid #eaedf1;

    position: absolute;

    top: 0;

    left: 0;

    background-color: #050a16;

}





.left-side-bar .logo-name{

    width: 100%;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-evenly;

}





.left-side-bar .logo-name .logo{

    width: 60px;

    height: 60px;

    border-radius: 50%;

}





.left-side-bar .logo-name .logo img{

    width: 100%;

    height: 100%;

    border-radius: 50%;

}





.left-side-bar .logo-name .name{

    width: auto;

    height: auto;

    margin-left: 10px;

    font-size: 30px;

    font-weight: 600;

    color: #fff;

}





.left-side-bar .border{

    width: 100%;

    height:auto;

    display: flex;

    align-items: center;

    justify-content: center;

}





.left-side-bar .border .sub-br{

    width: 250px;

    height: 0.5px;

    background-color: #939393;

}





.left-side-bar .module{

    width: 99%;

    height: 600px;

    overflow: auto;

    margin-top: 25px;

}





.left-side-bar .module .menu1{

    width: 100%;

    height: 60px;

    display: flex;

    justify-content: flex-start;

    padding-left: 20px;

    align-items: center;

    border-bottom: 1px solid #eaedf10f;

    transition: 0.5s all ease;

    cursor: pointer;

}

.left-side-bar .module .menu1 i{

    color: #fff;

}

.left-side-bar .module .menu1 h3{

    font-weight: 600;

    font-size: 18px;

    transition: 0.3s all ease;

    color: #fff;

}

.left-side-bar .module .menu1 h3 a{

    text-decoration: none;

    color: #fff;

}

.left-side-bar .module .menu1:hover{

    letter-spacing: 1px;

    transition: 0.5s all ease;

}



.left-side-bar .module::-webkit-scrollbar {

    width: 5px;

    background-color: #11192d92; 

}





.left-side-bar .module::-webkit-scrollbar-thumb{

    background: #ffffff27;

    border-radius: 10px;

}





.left-side-bar .module::-webkit-scrollbar-thumb:hover{

    background: #ffffff4f;

}





.left-side-bar .module .menu1 i{

    padding-right:5px;

}





.left-side-bar .module .menu1:hover{

    box-shadow: rgba(255, 255, 255, 0.1) 0px 10px 50px;

    transition: 0.5s all ease;

}





.right-top-bar{

    width: 81%;

    height: 70px;

    position: absolute;

    top: 0;

    left: 285px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    border-bottom: 1px solid #eaedf1;

    background-color: #dee8ff;

}



.right-top-bar .left-button{

    width: auto;

    height: auto;

    display: flex;

    align-items: center;

    justify-content: center;

}



.right-top-bar .left-button .off-btn{

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 3px;

    margin-left: 20px;



}



.right-top-bar .left-button .off-btn i{

    font-size: 20px;

    color: rgb(32, 32, 32);



}



.right-top-bar .left-button .search-bar{

    width: 250px;

    height: 38px;

    display: flex;

    align-items: center;

    border-radius: 4px;

    margin-left: 50px;

    background-color: #fff;

}

.right-top-bar .left-button .search-bar i{

    padding-left: 10px;

}

.right-top-bar .left-button .search-bar input{

    width: 200px;

    height: 38px;

    margin-left: 10px;

    border: none;

    padding-left: 5px;

    font-size: 13px;

}

.right-top-bar .left-button .search-bar input:focus{

    outline: none;

}

.right-top-bar .right-button{

    width: 300px;

    height: auto;

    display: flex;

    align-items: center;

    justify-content: space-evenly;

}

.right-top-bar .right-button .dark-light-mode{

    width: auto;

    height: auto;

}

.right-top-bar .right-button .dark-light-mode i{

    font-size: 20px;

}

.right-top-bar .right-button .menu{

    width: auto;

    height: auto;

}



.right-top-bar .right-button .notification{

    width: auto;

    height: auto;

}

.right-top-bar .right-button .notification i{

    font-size: 20px;

}

.right-top-bar .right-button .setting{

    width: auto;

    height: auto;

}

.right-top-bar .right-button .setting i{

    font-size: 20px;

}

.right-top-bar .right-button .profile-pic{

    width: 45px;

    height: 45px;

    border-radius: 50%;

    border: 1px solid grey;

}

.right-top-bar .right-button .profile-name{

    height: auto;

    width: auto;

    color: #050a16;

    font-size: 15px;

    font-weight: 600;

}

.right-top-bar .right-button .profile-pic img{

    width: 100%;

    height: 100%;

    border-radius: 50%;

    padding: 3px;

}

.right-bottom-bar{

    width: 81%;

    height: 615px;

    position: absolute;

    left: 285px;

    top: 80px;

    border-top: 1px solid #eaedf1;

    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}

.right-bottom-bar .head{

    width: 100%;

    height: 70px;

    /* border: solid red; */

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.right-bottom-bar .head .heading-name{

    width: auto;

    height: auto;

    margin-left: 30px;

    font-size: 20px;

    font-weight: 800;

}

.right-bottom-bar .head .add-product{

    width: 150px;

    height: 40px;

    background: #050a16;

    margin-right: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

    transition: 0.3s all ease;

}

.right-bottom-bar .head .add-product:hover{

    background-color: #edf8ff;

    /* color: #050a16; */

    transition: 0.3s all ease;

    border: 2px solid #050a16;

}

.right-bottom-bar .head .add-product:hover a{

    color: #050a16;

    font-weight: 600;

}

.right-bottom-bar .head .add-product a{

    text-decoration: none;

    color: #fff;

    font-size: 15px;

    

}

.right-bottom-bar .search-filter{

    width: 100%;

    height: 70px;

    /* border: solid teal; */

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.right-bottom-bar .search-filter .searchbars{

    width: 360px;

    height: 45px;

    background-color: #dee8ff;

    display: flex;

    align-items: center;

    justify-content: space-evenly;

    border-radius: 20px;

    margin-left: 30px;

}

.right-bottom-bar .search-filter .searchbars .option{

    width: 110px;

    height: auto;

    border-right: 1px solid grey;

}

.right-bottom-bar .search-filter .searchbars .option select{

    width: auto;

    height: 30px;

    border: none;

    background-color: #dee8ff;

    color: #000000;

    font-size: 13px;

    

}

.right-bottom-bar .search-filter .searchbars .option select:focus{

    outline: none;

}

.right-bottom-bar .search-filter .searchbars i{

    font-size: 16px;

    color: #050a16;

}

.right-bottom-bar .search-filter .searchbars input{

    width: 200px;

    height: 30px;

    border: none;

    /* padding-left: 10px; */

    color: #000000;

    background-color: #dee8ff;

}

.right-bottom-bar .search-filter .searchbars input:focus{

    outline: none;

}

.right-bottom-bar .search-filter .filter{

    width: 300px;

    height: auto;

    /* border: solid red; */

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-right: 30px;

}

.right-bottom-bar .search-filter .filter .calendar{

    width: 90px;

    height: 30px;

    border: none;

    background-color: #dee8ff;

    font-size: 13px;

    border-radius: 5px;

    color: #000000;

}

.right-bottom-bar .search-filter .filter .calendar:focus{

    outline: none;

}



.right-bottom-bar .search-filter .filter .filt{

    width: 70px;

    height: 30px;

    border: none;

    background-color: #dee8ff;

    font-size: 13px;

    border-radius: 5px;

    color: #000000;

}

.right-bottom-bar .search-filter .filter .filt:focus{

    outline: none;

}

.right-bottom-bar .search-filter .filter .status{

    width: 70px;

    height: 30px;

    border: none;

    background-color: #dee8ff;

    font-size: 13px;

    border-radius: 5px;

    color: #000000;

}

.right-bottom-bar .search-filter .filter .status:focus{

    outline: none;

}

.right-bottom-bar .table-box{

    width: 100%;

    height: 440px;

    display: flex;

    align-items:first baseline;

    justify-content: center;

    /* border: solid #050a16; */

    overflow: auto;

    /* margin-top: 30px; */

    /* position: absolute; */

    /* transition: 6s all ease; */

}

.right-bottom-bar .table-box::-webkit-scrollbar {

    width: 5px;

    background-color: #11192d92; 

}





.right-bottom-bar .table-box::-webkit-scrollbar-thumb{

    background: #ffffff27;

    border-radius: 10px;

}





.right-bottom-bar .table-box::-webkit-scrollbar-thumb:hover{

    background: #ffffff4f;

}

.right-bottom-bar .table-box table{

    width: 90%;

    height: auto;

    /* border: solid #050a16; */

    border-collapse: collapse;

    border-radius: 5px;

    /* margin-left: 30px; */

    /* margin-top: 296px; */

}

.right-bottom-bar .table-box table thead{

    position: sticky;

    top: 0;

}



.right-bottom-bar .table-box table thead tr th{

    width: auto;

    height: 40px;

    background-color: #dee8ff;

    font-size: 14px;

    color: #000000;



}

.right-bottom-bar .table-box table tbody tr  td{

    width: auto;

    height: 50px;

    text-align: center;

    color: #0f3050;

    font-size: 14px;

    border-bottom: 1px solid #daf6ff;

    font-weight: 600;



}

.right-bottom-bar .table-box table tr td a{

    text-decoration: none;

    color: #3a3d46;

}

.right-bottom-bar .table-box table tr td a i{

    font-size: 20px;

}

.right-bottom-bar .table-box table tr td img{

    width: 80px;

    height: 80px;

    margin: 6px;

}

.right-bottom-bar .table-box table .first{

    background-color: #daf6ff;

}

.right-bottom-bar .table-box table .second{

    background-color: #ffffff;

}