@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
*{
    box-sizing:border-box;
    list-style:none;
}

:root{
    --primary-color:#333;
}

body{
    font-family: 'Lato', sans-serif;
    background-color:#ddd;
    
    padding:0;
    margin:0;
}

.lines1,.lines2,.lines3{
    width:25px;
    height:3px;
    margin:6px;

    transition:all 0.2s ease-in;
}

.crossxs .lines1{
    transform:rotate(-45deg) translate(-6px,6px);
}

.crossxs .lines2{
    transform:translate(-100%);
    opacity:0;
}

.crossxs .lines3{
    transform:rotate(45deg) translate(-6px,-6px);
}

/* Start Left Sidebar Section */
/* Start left Sidebar  */
.sidebars{
    height:100vh;
    background-color:var(--primary-color);
}

.sidebarlinks{
    position:relative;
    opacity:0.75;
    transition:all 0.4s;
}

.sidebarlinks:hover{
    opacity:1;
    background-color:#555;
}

.currents{
    box-shadow:-2px 0 10px #111;
    opacity:1;
    transition:transform 0.3s;
}

.currents:hover{
    transform:translateY(-1px);
}

.mores{
    position:absolute;
    right:20px;
    top:50%;

    transform:translateY(-50%);
}

/* End left Sidebar */
/* End Left Sidebar Section*/

/* Start Top sidebar Section  */
/* Start Top Sidebar */
.topnavbars{
    background:var(--primary-color);
}

.iconparents{
    position:relative;
}

.iconbullets i{
    color:#fff;
}

.iconbullets::after{
    content:'';
    width:10px;
    height:10px;
    background-color:red;
    border-radius:50%;

    position:absolute;
    right:0;
    top:5px;
}

.breadcrumb a{
    color:#f4f4f4;
}

/* End Top Sidebar */
/* End Top sidebar Section */

/* Start Content Section  */
.cardboxs{
    transition:all .3s;
}

.cardboxs:hover{
    box-shadow:1px 3px 3px #bbb;
    transform:translateY(-1px);
}
/* End Content Section */

/* Start User Permission */
.borderends{
    border-right:3px solid skyblue;
}

/*  Start pagination */
.pagination>li>a,
.pagination>li>span{
    color:#000;
    border:1 solid silver;
}

.pagination>li.active>a{
    background-color:gray;
    color:#fff;
    border:1px solid gray;
}

.pagination>li>a:hover,
.pagination>li>span:hover{
    background-color:#eee;
    color:#000;
    border-color:ddd;
}

/*  End pagination */
/* End User Permission */