/* body css start form here */
body{
    font-family: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body .app-sidebar,
body .app-header{
    background: white;
}
body .sidebar-wrapper a {
  color: #546368;
  font-size: 11px;
  font-weight: 700;
}
body .sidebar-wrapper a:hover{
    color: #1a2c3c;
}
body .sidebar-wrapper a:focus{
    color: #1a2c3c;
}
i.bi::before{
  font-weight: 700 !important;
}
body ul.nav.nav-treeview a {
    color: #3d5059;
}
body ul.nav.nav-treeview a:hover{
    background: #54636814;
}

body ul.nav.nav-treeview a.active{
    background: #4285f429;
}
body ul.nav.nav-treeview a.active,body ul.nav.nav-treeview a.active p{
    color: #4285f4;
}
body .sidebar-menu .menu-open > .nav-treeview p {
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
    color: #3d5059;
}

body .badge {
    background: #4285f429;
    color: #214baf;
    padding: 7px 12px;
}

body section.dashboard_section h3.video_title {
    font-size: 2rem;
    color: #1a2c3c;
    font-weight: 700;
    line-height: 48px;
}
body aside.app-sidebar {
    border-right: 1px solid #5463681f;
}
body .row.action_row button,.row.action_row a{
    background: #4285f429;
}
body .row.action_row button i , .row.action_row a i{
    color: #214baf;
}


ul.nav.nav-treeview i::before {
    font-size: 17px;
}
body .row .video_div{
  background: #5463680a;
  padding: 25px;
  border-radius: 15px;
}

body span.title {
    font-size: 14px;
    color: #214baf;
    font-weight: 600;
    line-height: 22px;
}

body span.sub_title {
    font-size: 14px;
    color: #3d5059;
    line-height: 22px;
}

body span.search_title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.57;
}

body span.search_sub_title {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
}

body span.sub_badge {
    background: #54636829;
    color: #3D5059;
    border-radius: 6px;
    font-size: 0.75rem;
    padding: 2px 10px;
}
body div#searchModal a.nav-link {
    border-bottom: 1px dashed #3D5059;
    padding: 6px 0px;
}
body div#searchModal .modal-body {
    height: 400px;
    overflow-y: auto;
}

.searchModal .modal-body::-webkit-scrollbar{
    height: 4px;
    width: 4px;
    background: gray;
}

/* Track */
.searchModal .modal-body::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.searchModal .modal-body::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.searchModal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.searchModal .modal-body::-webkit-scrollbar-thumb:vertical{
    background: #8CA0A4;
    border-radius: 10px;
}


/* body css end form here */

/* body dark mode css start form here */
body.dark-mode,
body.dark-mode .app-sidebar,
body.dark-mode .app-header,
body.dark-mode .modal-content{
    background: #101f31;
    color: #8CA0A4;
}
body.dark-mode .sidebar-wrapper a {
    color: #8CA0A4;
}
body.dark-mode .sidebar-wrapper a:hover,
body.dark-mode .sidebar-wrapper a:focus,
body.dark-mode .sidebar-wrapper li.nav-item.menu-open a,
body.dark-mode ul.nav.nav-treeview a.active p,
body.dark-mode ul.nav.nav-treeview a.active i{
    color: #d8dcdd;
}
body.dark-mode aside.app-sidebar{
    border-right: 1px solid #8CA0A4;
}

body.dark-mode .app-header,
body.dark-mode .modal-header {
   border-bottom: 1px solid #8CA0A4; 
}
body.dark-mode .app-header i{
    color: #8CA0A4;
}
body.dark-mode .sidebar-menu .menu-open > .nav-treeview p{
    color: #8CA0A4;
}
body.dark-mode .dashboard_section p,
body.dark-mode .dashboard_section .badge,
body.dark-mode .dashboard_section h3.video_title,
body.dark-mode .dashboard_section button i,
body.dark-mode .dashboard_section :is(h1,h2,h3,h5,h6,i,span),
body.dark-mode span.sub_badge {
    color: #8CA0A4;
}

body.dark-mode .modal-content input{
    background: none;
    border: 1px solid #8CA0A4;
    color: #fff;
}
body.dark-mode .modal-content input::placeholder{
    color: #8CA0A4;
}
body.dark-mode .modal-content input:focus{
    box-shadow: none;
}
body.dark-mode .row .video_div{
    box-shadow: 0px 0px 6px 0px #2d4868;
}

/* body dark mode css end form here */


@media only screen and (max-width: 600px){
    .row.action_row button,.row.action_row a{
        width: 100%;
    }
}
@media (min-width: 600px) and (max-width: 767px) {
    .row.action_row button,.row.action_row a{
        width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
   
}