.logbg{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23f1f1f1' fill-opacity='0.4'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* width */

::-webkit-scrollbar {
    width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
div.scroll {
    /*margin: 0px 0px;*/
    padding: 4px;
    width: 100%;
    overflow: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    height: auto;
}
.scroll::-webkit-scrollbar {
    height: 10px;
}
.scroll::-webkit-scrollbar-track {
    background: transparent;
}
.scroll:hover::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb {
    background: transparent;
}
.scroll:hover::-webkit-scrollbar-thumb {
    background: #888;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
}
header {
    z-index: 1000;
    position: fixed;
    background: #f1f1f1;
    padding: 10px;
    width: calc(100% - 0%);
    top: 0;
    height: 60px;
    width:100%;
}
.left_area img {
    width: 40px;
    height: 40px;
    margin-top: -20px;
    z-index: 500;
}
.left_area span {
    color: #000;
    margin-top: -35px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 900;
}
.logout_btn {
    text-decoration: none;
    float: right;
    margin-top: -30px;
    margin-right: 20px;
    font-size: 15px;
    transition: 0.5s;
    transition-property: background;
    padding-right: 20px;
}
.nbell_btn {
    float: right;
    margin-top: -34px;
    font-size: 15px;
    transition: 0.5s;
    transition-property: background;
    padding-right: 10px;
}
.user_login {
    float: right;
    margin-top: -32px;
}
.sidebar {
    z-index: 0;
    top: 0;
    background: #7386d5;
    margin-top: 60px;
    position: fixed;
    left: 0;
    width: 250px;
    height: 100%;
    transition: 0.5s;
    transition-property: left;
    overflow-y: auto;
}
.sidebar a {
    font-size: 16px;
    color: #fff;
    display: block;
    width: 100%;
    line-height: 45px;
    text-decoration: none;
    padding-left: 40px;
    box-sizing: border-box;
    transition: 0.5s;
    transition-property: background;
}
.sidebar div .dropdown {
    font-size: 16px;
    color: #000;
    display: block;
    width: 100%;
    line-height: 30px;
    transition: 0.5s;
    transition-property: background;
}
.sidebar div .dropdown-content {
    width: 100%;
    line-height: 30px;
}
.sidebar .dropdown-content a {
    font-size: 16px;
    color: #000;
    display: block;
    width: 100%;
    line-height: 30px;
    text-decoration: none;
    padding: 5px;
    box-sizing: border-box;
    transition: 0.5s;
    transition-property: background;
}
.sidebar i {
    padding-right: 10px;
}
label #sidebar_btn {
    z-index: 1;
    color: #000;
    position: fixed;
    cursor: pointer;
    left: 230px;
    font-size: 20px;
    margin: 5px 0;
    transition: 0.5s;
    transition-property: color;
}
label #sidebar_btn:hover {
    color: #7385d5;
}
#check:checked~.sidebar {
    left: -180px;
}
#check:checked~.sidebar a span {
    display: none;
}
#check:checked~.sidebar .titles {
    display: none;
}
#check:checked~.sidebar a {
    font-size: 20px;
    margin-left: 165px;
    width: 100%;
    /* margin-top:10px; */
}
#check:checked~.sidebar .topmr {
    margin-top: 10px;
}
.content {
    width: (100% - 250px);
    margin-top: 60px;
    /* padding: 20px; */
    margin-left: 250px;
    background: url(background.png) no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    transition: 0.5s;
    position: relative;
}
#check:checked~.content {
    margin-left: 60px;
}
#check:checked~.sidebar .profile_info {
    display: none;
}
#check {
    display: none;
}

.mobile_nav {
    display: none;
}
/* Responsive CSS */
@media screen and (max-width: 780px) {
    .sidebar {
        display: none;
    }
    #sidebar_btn {
        display: none;
    }
    .content {
        width:100%;
        height: 100vh;
        margin-left: 0;
        margin-top: 0;
        /* padding: 10px 10px; */
        transition: 0s;
        margin-left: 0px;
    }
    #check:checked~.content {
        margin-left: 0;
    }
    .mobile_nav {
        display: block;
        width: calc(100% - 0%);
    }
    div.scroll {
        width:99%;
        overflow: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-behavior: smooth;
        height: auto;
    }
    .nav_bar {
        background: #7385d5;
        width: (100% - 0px);
        margin-top: 38px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }
    .mobile_nav div .dropdown {
        font-size: 16px;
        color: #000;
        display: block;
        width: 100%;
        line-height: 30px;
        transition: 0.5s;
        transition-property: background;
    }
    .mobile_nav div .dropdown-content {
        width: 50%;
        line-height: 30px;
    }
    .mobile_nav .dropdown-content a {
        font-size: 16px;
        color: #000;
        display: block;
        width: 100%;
        line-height: 30px;
        text-decoration: none;
        padding: 5px;
        box-sizing: border-box;
        transition: 0.5s;
        transition-property: background;
    }
    .mobile_nav .dropdown-content a:hover {
        color: #fff;
        background: #000;
    }
    .nav_bar .mobile_profile_image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: #fff;
    }
    .nav_bar .nav_btn {
        color: #fff;
        font-size: 22px;
        cursor: pointer;
        transition: 0.5s;
        transition-property: color;
    }
    .nav_bar .nav_btn:hover {
        color: #c5c5c5;
    }
    .mobile_nav_items {
        background: #2F323A;
        display: none;
    }
    .mobile_nav_items a {
        color: #fff;
        display: block;
        text-align: center;
        letter-spacing: 1px;
        line-height: 60px;
        text-decoration: none;
        box-sizing: border-box;
        transition: 0.5s;
        transition-property: background;
    }
    .mobile_nav_items a:hover {
        background: #fff;
        color: #000;
    }
    .mobile_nav_items i {
        padding-right: 10px;
    }
    .active {
        display: block;
    }
}

.wrap{
   animation: caret 1s steps(1) infinite;
   border-right: 0.08em solid #fff;
  padding-right: 1px;
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}

/*code for skeleton for book*/
.doremon:empty {
        margin-left: 10px;
        width: 100%;
        height: 800px; /* change height to see repeat-y behavior */
    
        background-image:
            radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ),
            linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
            linear-gradient( lightgray 20px, transparent 0 ),
            linear-gradient( lightgray 20px, transparent 0 ),
            linear-gradient( lightgray 20px, transparent 0 ),
            linear-gradient( lightgray 20px, transparent 0 );

        background-repeat: repeat-y;

        background-size:
            100px 200px, /* circle */
            100px 200px, /* highlight */
            400px 200px,
            300px 200px,
            100px 200px,
            250px 200px;

        background-position:
            0 0, /* circle */
            0 0, /* highlight */
            120px 0,
            120px 40px,
            120px 80px,
            120px 120px;

        animation: shine 1s infinite;
    }

    @keyframes shine {
        to {
            background-position:
                0 0,
                100% 0, /* move highlight to right */
                120px 0,
                120px 40px,
                120px 80px,
                120px 120px;
        }
    }
/* code for card skeleton */
/* Card styles for index*/
        .cards{
            background-color: #fff;
            height: 245px;
            width: 195px;
            overflow: hidden;
            margin: 12px;
            border-radius: 5px;
            box-shadow: 9px 17px 45px -29px rgba(0, 0, 0, 0.44);
        }

        .card__image img {
            width: 195px;
            height: 200px;
        }
        
        .card__image.loading {
            height: 160px;
            width: 195px;
        }
        .card__title {
            padding: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .card__title.loading {
            height: 1rem;
            width: 50%;
            margin: 1rem;
            border-radius: 1px;
        }
        .card__description {
            padding: 2px;
            font-size: 8px;
        }
        
        .card__description.loading {
            height: 1rem;
            margin: 1rem;
            border-radius: 3px;
        }
        .loading {
            position: relative;
            background-color: #e2e2e2;
        }
        .loading::after {
            display: block;
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            transform: translateX(-100%);
            background: -webkit-gradient(linear, left top,
                        right top, from(transparent),
                        color-stop(rgba(255, 255, 255, 0.2)),
                        to(transparent));
                        
            background: linear-gradient(90deg, transparent,
                    rgba(255, 255, 255, 0.2), transparent);
    
            animation: loading 0.8s infinite;
        }
        @keyframes loading {
            100% {
                transform: translateX(100%);
            }
        }

/*code for text down to up slider*/                
.Iam {
  padding: 0em 1em;
  font: normal 40px/50px Montserrat, sans-serif;
  color: #999;
  font-size:30px;
}
.Iam p {
  height: 50px;
  float: left;
  margin-right: 0.3em;
}
.Iam b {
  float: left;
  overflow: hidden;
  position: relative;
  height: 50px;
  top: 2px;
}
.Iam .innerIam {
  display: inline-block;
  color: #7386d5;
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 0;
  font-size:30px;


/*animation*/
-webkit-animation:move 6s;
   -moz-animation:move 6s;
    -ms-animation:move 6s;
     -o-animation:move 6s;
        animation:move 6s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
     -o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
   -moz-animation-delay:1s;
    -ms-animation-delay:1s;
     -o-animation-delay:1s;
        animation-delay:1s;
}
@keyframes move{
0%  { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}

@-webkit-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-moz-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-o-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}