@media (min-width: 768px) {
    #app-container {
        min-height: 70vh;
    }
    
    #footer_nav {
        max-width:768px;
        text-align: center;
    }
}

#footer_nav {
    
    margin: 0px auto;
    padding:15px;
    margin-bottom:20px;
}

.footer_nav_col h5 {
    font-weight:bold;
    margin-bottom:1.5em;
}

.footer_nav_col ul {
    display:inline;
    list-style:none;
    padding:0;
}

.footer_nav_col ul li {
    margin-bottom:10px;
}

.footer_nav_col a {
    color:white;
}

.copyright a {
    color:white;
    text-decoration: underline;
}

.social-login {
    display: flex;
    gap:3px;
}

.social-login a {
flex: 1 1 0px;
text-decoration: none;
text-align: center;
color: #fff;
}
.social-login a:hover {
color: #fff;
}
.social-login a.facebook {
background: #3b5998;
}
.social-login a.facebook:hover {
background: #344e86;
}
.social-login a.twitter {
background: #1da1f2;
}
.social-login a.twitter:hover {
background: #0d95e8;
}
.social-login a.google {
background: #ea4335;
}
.social-login a.google:hover {
background: #e82e1e;
}

/* Blogs css */
.blog-grid {
padding: 10px;
background-color: #fff;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border: 1px solid #ECEDF2;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}

.blog-layout {
margin-bottom: 20px;
}

.blog-grid .thumb-image {
overflow: hidden;
}

.blog-layout .blog-thumbnail {
overflow: hidden;
display: block;
position: relative;
}

.image-lazy-loading .image-wrapper.image-loaded {
background: none;
}

.image-lazy-loading .image-wrapper.image-loaded img {
opacity: 1;
filter: alpha(opacity=100);
}

.blog-layout .blog-thumbnail img {
-webkit-transition: all 0.6s ease-in-out 0s;
-o-transition: all 0.6s ease-in-out 0s;
transition: all 0.6s ease-in-out 0s;
width: 100%;
}

.blog-grid .inner-bottom {
padding: 0 10px 7px;
}

.blog-layout .inner-bottom {
width: 100%;
}

.blog-layout .top-info {
font-size: 14px;
margin-top: 10px;
color: #696969;
}

.blog-layout .top-info>* {
display: inline-block;
position: relative;
vertical-align: middle;
padding-right: 10px;
margin-right: 12px;
}

.blog-layout .top-info>*:last-child {
padding: 0;
margin: 0;
}

.blog-layout .entry-title {
font-size: 15px;
margin: 12px 0 0;
}

.entry-title {
font-size: 25px;
margin: 0;
word-wrap: break-word;
}

.blog-layout .btn-readmore {
font-size: 14px;
padding-bottom: 1px;
}

.blog-layout .description {
margin: 10px 0 0;
}

.blog-layout .readmore {
margin: 10px 0 0;
}

.blog-layout .readmore i {
font-size: 14px;
}

@media (min-width: 1200px) {
.blog-grid {
    padding: 15px;
}

.blog-grid .inner-bottom {
    padding: 0 10px 12px;
}

.entry-title {
    font-size: 30px;
}

.blog-layout .entry-title {
    margin-top: 18px;
    font-size: 18px;
}
}

@media (min-width: 768px) {
.blog-layout {
    margin-bottom: 30px;
}

.blog-layout .top-info {
    margin-top: 18px;
}
}

.blog-content {
max-width: 876px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
line-height: 2;
}

.blog-content img {
max-width: 100%;
}

a.categories-name, h4.entry-title a, div.readmore a.btn-readmore {
    color: #224abe;
}

.title-heading {
    font-weight: bold;
}

.employer-location {
    margin-bottom: 5px;
}

.employer-location a {
    color: #5567ff;
}
/* End Blogs css */

/* Help css */
.card-customise-fix {
    border: 1px solid #e3e6f0;
}

.card-customise-fix .title {
    font-weight: bold;
}

.card-customise-fix .title, .card-customise-fix .text {
    color: #5567ff;
}

.title-box h3 {
    font-weight: bold;
}

.title-box h5 {
    font-weight: 500;
}
/* End Help css */

/* Pricing css */
.pricing-box {
    border: 1px solid transparent;
    position: relative;
    -webkit-box-shadow: 0 6px 50px rgba(0, 0, 0, 0.05);
    box-shadow: 0 6px 50px rgba(0, 0, 0, 0.08);
    padding: 35px 50px;
    border-radius: 2rem;
  }
  .pricing-box.is_featured{
    border: 3px solid #3435A4;
  }
  
  .pricing-box .pricing-lable {
    position: absolute;
    right: 0px;
    top: 30px;
    background: #3435A4;
    display: inline-block;
    padding: 6px 20px;
    color: #fff;
    border-radius: 20px 0px 0px 20px;
    font-weight: 600;
  }
  .pricing-box .pricing-features{
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .pricing-box .pricing-plan h1 {
    font-size: 50px;
  }
  
  .pricing-box .pricing-plan sup {
    font-size: 20px;
    position: relative;
    top: -30px;
  }
  
  .pricing-box .pricing-plan h1 {
    font-size: 50px;
  }
  
  .pricing-box .pricing-plan sup {
    font-size: 20px;
    position: relative;
    top: -30px;
  }
  
  .f-16 {
    font-size: 16px;
  }

  .square_custom_2x {
    width:150px;
    height:150px;
  }
  
  .square_custom_1x {
    width:75px;
    height:75px;
    object-fit: contain;
  }

  /* css from customize.css */
  body {
    font-family: "Poppins", sans-serif;
    background-color: #fff;
    font-size: 0.9rem;
    color: #272c33;
    }
    #app-container{
      margin-top: 30px;
    }
    .sidebar hr.sidebar-divider {
    border: 0;
    border-top: 1.2px solid rgb(208 204 204);
    width: 20%;
    margin: 0.5rem 1rem 0.5rem;
    }
    
    .page-link {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    border: none;
    line-height: 1.25 !important;
    }
    
    .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    }
    
    .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    }
    
    .page-item.disabled .page-link {
    color: #cfcfcf;
    pointer-events: none;
    }
    
    .page-item.disabled .page-link {
    cursor: auto;
    background-color: transparent;
    border-color: #dee2e6;
    }
    
    .pagination-lg .page-link {
    font-size: 1.21875rem;
    line-height: 1.5;
    }
    .min-h-200 {
    min-height: 200px;
    }
    .min-h-100 {
    min-height: 100px;
    }
    .badge-warning {
    color: #fff;
    background-color: #fdcb2a;
    }
    .bg-login-image {
    background: url(../img/photo-1518020382113-a7e8fc38eac9.jpg) rgb(0 0 0 / 45%);
    background-size: cover;
    background-blend-mode: multiply;
    }
    .sidebar .nav-item .nav-link span {
    font-size: 14px;
    display: inline;
    }
    .sidebar .nav-item.active{
    background-color: rgba(57,76,96,.15);
    }
    .sidebar .nav-item.active .nav-link {
    font-weight: 600;
    }
    
    
    @media (min-width: 768px) {
    .sidebar .nav-item .nav-link {
      display: block;
      width: 100%;
      text-align: left;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    }
    .thumb_image {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
    }
    .mindmap-card {
    height: 240px;
    width: 100%;
    margin-bottom: 20px;
    }
    .mindmap-card:hover {
    box-shadow: 0 0 11px rgba(33, 33, 33, 0.2);
    }
    
    .header-brand-img {
    height: 3rem;
    margin-right: 0.5rem;
    }
    
    
    .navbar-brand img {
    max-width: 200px;
    }
    .img-thumbnail {
    max-width: 100px;
    max-height: 100px;
    }
    .pdf-export-format {
    max-width: 150px;
    margin-right: 1rem;
    }
    .categories-item {
    margin-right: 15px;
    }
    
    .categories-link {
    background-color: #fff;
    border: 1px solid #e7eff3;
    border-radius: 4px;
    color: #576274;
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 10px 20px;
    text-decoration: none !important;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    }
    .categories-link-isCurrent {
    background-color: var(--bs-primary);
    color: #fff;
    }
    .dropdown-toggle::after {
    display: none;
    }
    .categories-link-isCurrent:hover {
    color: #fff;
    }
    
    .blogitemlist .content_blog h3 {
    font-size: 16px;
    margin: 0;
    min-height: auto;
    color: #343e44;
    }
    
    .blog {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 0px 26px 0px rgba(22, 73, 172, 0.12);
    margin-bottom: 30px;
    }
    .blog.blogitemlarge .image-blog {
    display: block;
    position: relative;
    text-align: center;
    }
    .blog.blogitemlarge .image-blog img {
    height: 100%;
    width: 100%;
    max-width: 100%;
    max-height: 250px;
    }
    .blog.blogitemlarge .image-blog img.loaded {
    height: unset;
    width: auto;
    }
    
    .blog.blogitemlarge .image-blog:before {
    content: "";
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
    left: 0;
    }
    
    .blog.blogitemlarge .image-blog .post-date {
    color: #fff;
    position: absolute;
    bottom: 15px;
    left: 15px;
    margin-bottom: 0;
    padding: 6px;
    font-weight: 400;
    }
    .blog.blogitemlarge p {
    overflow: hidden;
    }
    .blog.blogitemlist {
    margin-bottom: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }
    .blog.blogitemlist .image-blog img {
    height: 140px;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    }
    .blog.blogitemlist .image-blog img.loaded {
    height: unset;
    width: auto;
    }
    .blog.blogitemlist .content_blog {
    width: calc(100% - 230px);
    -webkit-width: calc(100% - 230px);
    -moz-width: calc(100% - 230px);
    -o-width: calc(100% - 230px);
    -os-width: calc(100% - 230px);
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px 30px;
    }
    .start-premium {
    font-weight: bold;
    }
    .start-free {
    color: green !important;
    font-weight: bold;
    }
    .blog .post-date {
    margin-bottom: 15px;
    color: #83898c;
    font-size: 15px;
    }
    .blog p {
    color: #83898c;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    margin: 0;
    display: block;
    }
    .blog h3 {
    display: block;
    color: #343e44;
    font-size: 20px;
    font-weight: 700;
    margin: 0px 0 15px;
    min-height: 56px;
    }
    .blog.blogitemlist .content_blog .post-date {
    margin-bottom: 10px;
    }
    .blog .content_blog {
    padding: 10px;
    }
    .blog.blogitemlist .content_blog h3 {
    font-size: 15px;
    margin: 0;
    min-height: auto;
    }
    .h3,
    h3 {
    font-size: 1.5rem;
    }
    .h4,
    h4 {
    font-size: 1.25rem;
    }
    a {
    color: #40475b;
    text-decoration: none;
    background-color: transparent;
    }
    a:hover {
    color: #000;
    text-decoration: none;
    background-color: transparent;
    }
    .card-upgrade {
    background: #40475b;
    border: none;
    }
    .background-fafafa {
    background-color: #fafafa;
    }
    .bg-gradient-dark-2 {
    color: #ffff;
    background-color: #3c414f;
    background-size: cover;
    }
    .navbar-area-start {
    box-shadow: 0px 0px 20px 0px rgba(44, 111, 161, 0.1);
    background-color: #fff;
    }
    .navbar-area-start {
    padding: 20px 0;
    }
    .display-view a {
    color: #3ba4ef;
    margin-right: 11px;
    font-size: 22px;
    }
    .navbar-live-aleart span {
    color: #43467f;
    font-weight: 600;
    margin-right: 25px;
    position: relative;
    }
    .navbar-live-aleart span:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #316cbe;
    left: -15px;
    top: 6px;
    border-radius: 30px;
    }
    .display-view a:last-child {
    margin-right: 0;
    }
    .page_navbar select {
    border: navajowhite;
    width: 43%;
    background: transparent;
    margin-bottom: 0;
    color: #454e57;
    font-weight: 600;
    }
    .page_navbar select:focus {
    outline: 0;
    box-shadow: none;
    background: transparent;
    }
    .navbar-page-list {
    margin-top: -8px;
    }
    .navbar-live-aleart {
    display: flex;
    justify-content: flex-end;
    }
    
    .display-view a.active {
    color: var(--bs-primary);
    position: relative;
    }
    
    i.flaticon-visibility.view-site {
    margin-right: 40px;
    font-weight: 700;
    color: #43467f;
    }
    .flaticon-visibility:before {
    font-size: 27px;
    }
    a.site-view {
    margin-top: -7px;
    }
    .website-append iframe {
    width: 100%;
    height: 86vh;
    box-shadow: 0px 0px 20px 0px rgba(44, 111, 161, 0.1);
    }
    .website-append.mobile {
    width: 375px;
    margin: auto;
    transition: 0.3s;
    }
    .website-append.tablet {
    width: 768px;
    margin: auto;
    transition: 0.3s;
    }
    
    .dropdown-h5-acion a {
    text-decoration: none;
    }
    .setting-tabs .tab-content {
    padding-top: 25px;
    }
    .setting-tabs .tab-content .title-tab-content {
    padding-bottom: 20px;
    }
    .setting-tabs .tab-content .title-break {
    font-weight: 500;
    font-style: italic;
    margin-top: 10px;
    }
    .setting-tabs .tab-content .text-small {
    font-size: 12px;
    }
    
    .img-thumbnail {
    max-width: 100px;
    max-height: 100px;
    }
    .sidebar .sidebar-brand {
    height: auto;
    padding: 10px;
    padding-top: 15px;
    }
    
    
    
    .card {
    border: none;
    }
    .list-group-item {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    }
    .form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 1rem + 6px);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: #272c33;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    .form-control {
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d4d0d0;
    border-radius: 0.25rem;
    box-shadow: inset 0 1px 1px rgba(39, 44, 51, 0.075);
    }
    
    @media (prefers-reduced-motion: reduce) {
    .form-control {
      transition: none;
    }
    }
    
    .form-control::-ms-expand {
    background-color: transparent;
    border: 0;
    }
    
    .form-control:-moz-focusring {
    color: transparent;
    }
    
    .form-control:-moz-focusring {
    text-shadow: 0 0 0 #272c33;
    }
    
    .form-control:focus {
    color: #272c33;
    outline: 0;
    }
    
    .form-control:focus {
    background-color: #fff;
    border-color: #fff;
    box-shadow: inset 0 2px 2px rgba(39, 44, 51, 0.075), 0 0 0 2px var(--bs-primary);
    }
    
    .form-control::-moz-placeholder {
    color: #949595;
    opacity: 1;
    }
    
    .form-control:-ms-input-placeholder {
    color: #949595;
    opacity: 1;
    }
    
    .form-control::placeholder {
    color: #949595;
    opacity: 1;
    }
    
    .form-control:disabled,
    .form-control[readonly] {
    opacity: 1;
    }
    
    .form-control:disabled,
    .form-control[readonly] {
    background-color: #e9ecef;
    }
    
    input[type="date"].form-control,
    input[type="datetime-local"].form-control,
    input[type="month"].form-control,
    input[type="time"].form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    }
    select.form-control{
      appearance: none;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAAAdVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhMdQaAAAAJ3RSTlMAAAECAwQGBwsOFBwkJTg5RUZ4eYCHkJefpaytrsXGy8zW3+Do8vNn0bsyAAAAYElEQVR42tXROwJDQAAA0Ymw1p9kiT+L5P5HVEi3qJn2lcPjtIuzUIJ/rhIGy762N3XaThqMN1ZPALsZPEzG1x8LrFL77DHBnEMxBewz0fJ6LyFHTPL7xhwzWYrJ9z22AqmQBV757MHfAAAAAElFTkSuQmCC);
      background-position: 100%;
      background-repeat: no-repeat;
    }
  
    select.form-control:focus::-ms-value {
    color: #272c33;
    }
    
    select.form-control:focus::-ms-value {
    background-color: #fff;
    }
    
    .form-control-file,
    .form-control-range {
    display: block;
    width: 100%;
    }
    
    .col-form-label {
    font-size: inherit;
    line-height: 1.5;
    }
    
    .col-form-label {
    padding-top: calc(0.5rem + 1px);
    padding-bottom: calc(0.5rem + 1px);
    margin-bottom: 0;
    }
    
    .col-form-label-lg {
    font-size: 1.21875rem;
    line-height: 1.75;
    }
    
    .col-form-label-lg {
    padding-top: calc(0.5rem + 1px);
    padding-bottom: calc(0.5rem + 1px);
    }
    
    .col-form-label-sm {
    font-size: 0.7109375rem;
    line-height: 1.5;
    }
    
    .col-form-label-sm {
    padding-top: calc(0.25rem + 1px);
    padding-bottom: calc(0.25rem + 1px);
    }
    
    .form-control-plaintext {
    display: block;
    width: 100%;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #272c33;
    }
    
    .form-control-plaintext {
    padding: 0.5rem 0;
    margin-bottom: 0;
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
    }
    
    .form-control-plaintext.form-control-lg,
    .form-control-plaintext.form-control-sm,
    .form-control-plaintext.form-control-lg,
    .form-control-plaintext.form-control-sm {
    padding-right: 0;
    padding-left: 0;
    }
    
    .form-control-sm {
    height: calc(1.5em + 0.5rem + 2px);
    font-size: 0.7109375rem;
    line-height: 1.5;
    }
    
    .form-control-sm {
    padding: 0.25rem 0.5rem;
    border-radius: 0.2rem;
    }
    
    .form-control-lg {
    height: calc(1.75em + 1rem + 2px);
    font-size: 1.21875rem;
    line-height: 1.75;
    }
    
    .form-control-lg {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    }
    
    select.form-control[multiple],
    select.form-control[size],
    textarea.form-control {
    height: auto;
    }
    
    .form-group {
    margin-bottom: 1rem;
    }
    
    .form-text {
    display: block;
    }
    
    .form-text {
    margin-top: 0.25rem;
    }
    
    .form-row {
    display: flex;
    flex-wrap: wrap;
    }
    
    .form-row,
    .form-row {
    margin-right: -5px;
    margin-left: -5px;
    }
    
    .form-row > .col,
    .form-row > [class*="col-"],
    .form-row > .col,
    .form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
    }
    
    .form-check {
    position: relative;
    display: block;
    }
    
    .form-check {
    padding-left: 1.25rem;
    }
    
    .form-check {
    padding-right: 1.25rem;
    }
    
    .form-check-input {
    position: absolute;
    }
    
    .form-check-input {
    margin-top: 0.3rem;
    }
    
    .form-check-input {
    margin-left: -1.25rem;
    }
    
    .form-check-input {
    margin-right: -1.25rem;
    }
    
    .form-check-input:disabled ~ .form-check-label,
    .form-check-input[disabled] ~ .form-check-label {
    color: rgba(39, 44, 51, 0.5);
    }
    
    .form-check-label {
    margin-bottom: 0;
    }
    
    .form-check-inline {
    display: inline-flex;
    align-items: center;
    }
    
    .form-check-inline {
    padding-left: 0;
    margin-right: 0.75rem;
    }
    
    .form-check-inline {
    padding-right: 0;
    margin-left: 0.75rem;
    }
    
    .form-check-inline .form-check-input {
    position: static;
    }
    
    .form-check-inline .form-check-input {
    margin-top: 0;
    }
    
    .form-check-inline .form-check-input {
    margin-right: 0.3125rem;
    margin-left: 0;
    }
    
    .form-check-inline .form-check-input {
    margin-left: 0.3125rem;
    margin-right: 0;
    }
    
    .btn {
    display: inline-block;
    font-weight: 600;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 0.8125rem;
    line-height: 1.5;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    .btn {
    text-align: center;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.35rem 1rem;
    border-radius: 0.25rem;
    }
    
    
    .btn.focus,
    .btn:focus {
    outline: 0;
    box-shadow: none;
    }
    
    
    .btn.disabled,
    .btn:disabled {
    opacity: 0.65;
    }
    
    .btn.disabled,
    .btn:disabled {
    box-shadow: none;
    }
    
    .btn:not(:disabled):not(.disabled) {
    cursor: pointer;
    }
    
    .btn:not(:disabled):not(.disabled).active,
    .btn:not(:disabled):not(.disabled):active {
    box-shadow: inset 0 3px 5px rgba(39, 44, 51, 0.125);
    }
    
    a.btn.disabled,
    fieldset:disabled a.btn {
    pointer-events: none;
    }
    
    .btn-primary {
    color: #fff;
    }
    
    .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075);
    }
             
    .btn-grad {
      background-image: var(--gardient-main-color);
      padding: 10px 20px 10px 20px;
      text-align: center;
      transition: 0.5s;
      background-size: 200% auto;
      color: white;            
      border-radius: 20px;
      border: 0px;;
    }
    
    .btn-grad:hover {
      background-position: right center; /* change the direction of the change here */
      color: #fff;
      text-decoration: none;
    }
    .btn-grad:focus-visible,  .btn-grad:focus{
      border: 0px;
    }
    
    .btn-link {
      color: var(--bs-primary);
    }
  
    .btn-primary:hover {
      color: #fff;
    }
    
    .btn-primary:hover {
    background-color: #4547CA;
    border-color: #4547CA;
    }
    
    .btn-primary.focus,
    .btn-primary:focus {
    color: #fff;
    }
    
    .btn-primary.focus,
    .btn-primary:focus {
    background-color: #2B52A3;
    border-color: #2239ff;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075), 0 0 0 1px rgba(111, 126, 255, 0.5);
    }
    
    .btn-primary.disabled,
    .btn-primary:disabled {
    color: #fff;
    }
    
    .btn-primary.disabled,
    .btn-primary:disabled {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    }
    
    .btn-primary:not(:disabled):not(.disabled).active,
    .btn-primary:not(:disabled):not(.disabled):active,
    .show > .btn-primary.dropdown-toggle {
    color: #fff;
    }
    
    .btn-primary:not(:disabled):not(.disabled).active,
    .btn-primary:not(:disabled):not(.disabled):active,
    .show > .btn-primary.dropdown-toggle {
    background-color: #2239ff;
    border-color: #152eff;
    }
    
    .btn-primary:not(:disabled):not(.disabled).active:focus,
    .btn-primary:not(:disabled):not(.disabled):active:focus,
    .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: inset 0 3px 5px rgba(39, 44, 51, 0.125),
      0 0 0 1px rgba(111, 126, 255, 0.5);
    }
    
    .btn-secondary {
    color: #fff;
    }
    
    .btn-secondary {
    background-color: #868e96;
    border-color: #868e96;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075);
    }
    
    .btn-secondary:hover {
    color: #fff;
    }
    
    .btn-secondary:hover {
    background-color: #727b84;
    border-color: #6c757d;
    }
    
    .btn-secondary.focus,
    .btn-secondary:focus {
    color: #fff;
    }
    
    .btn-secondary.focus,
    .btn-secondary:focus {
    background-color: #727b84;
    border-color: #6c757d;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075), 0 0 0 1px rgba(152, 159, 166, 0.5);
    }
    
    .btn-secondary.disabled,
    .btn-secondary:disabled {
    color: #fff;
    }
    
    .btn-secondary.disabled,
    .btn-secondary:disabled {
    background-color: #868e96;
    border-color: #868e96;
    }
    
    .btn-secondary:not(:disabled):not(.disabled).active,
    .btn-secondary:not(:disabled):not(.disabled):active,
    .show > .btn-secondary.dropdown-toggle {
    color: #fff;
    }
    
    .btn-secondary:not(:disabled):not(.disabled).active,
    .btn-secondary:not(:disabled):not(.disabled):active,
    .show > .btn-secondary.dropdown-toggle {
    background-color: #6c757d;
    border-color: #666e76;
    }
    
    .btn-secondary:not(:disabled):not(.disabled).active:focus,
    .btn-secondary:not(:disabled):not(.disabled):active:focus,
    .show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: inset 0 3px 5px rgba(39, 44, 51, 0.125),
      0 0 0 1px rgba(152, 159, 166, 0.5);
    }
    
    .btn-success {
    background-color: #77c13a;
    border-color: #77c13a;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075);
    }
    
    .btn-success:hover {
    color: #fff;
    }
    
    .btn-success:hover {
    background-color: #65a431;
    border-color: #5f9a2e;
    }
    
    .btn-success.focus,
    .btn-success:focus {
    color: #fff;
    }
    
    .btn-success.focus,
    .btn-success:focus {
    background-color: #65a431;
    border-color: #5f9a2e;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075), 0 0 0 1px rgba(106, 170, 55, 0.5);
    }
    
    .btn-success.disabled,
    .btn-success:disabled {
    color: #212529;
    }
    
    .btn-success.disabled,
    .btn-success:disabled {
    background-color: #77c13a;
    border-color: #77c13a;
    }
    
    .btn-success:not(:disabled):not(.disabled).active,
    .btn-success:not(:disabled):not(.disabled):active,
    .show > .btn-success.dropdown-toggle {
    color: #fff;
    }
    
    .btn-success:not(:disabled):not(.disabled).active,
    .btn-success:not(:disabled):not(.disabled):active,
    .show > .btn-success.dropdown-toggle {
    background-color: #5f9a2e;
    border-color: #59902b;
    }
    
    .btn-success:not(:disabled):not(.disabled).active:focus,
    .btn-success:not(:disabled):not(.disabled):active:focus,
    .show > .btn-success.dropdown-toggle:focus {
    box-shadow: inset 0 3px 5px rgba(39, 44, 51, 0.125),
      0 0 0 1px rgba(106, 170, 55, 0.5);
    }
    
    .btn-info {
    color: #fff;
    }
    
    .btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075);
    }
    
    .btn-info:hover {
    color: #fff;
    }
    
    .btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
    }
    
    .btn-info.focus,
    .btn-info:focus {
    color: #fff;
    }
    
    .btn-info.focus,
    .btn-info:focus {
    background-color: #138496;
    border-color: #117a8b;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075), 0 0 0 1px rgba(58, 176, 195, 0.5);
    }
    
    .btn-info.disabled,
    .btn-info:disabled {
    color: #fff;
    }
    
    .btn-info.disabled,
    .btn-info:disabled {
    background-color: #17a2b8;
    border-color: #17a2b8;
    }
    
    .btn-info:not(:disabled):not(.disabled).active,
    .btn-info:not(:disabled):not(.disabled):active,
    .show > .btn-info.dropdown-toggle {
    color: #fff;
    }
    
    .btn-info:not(:disabled):not(.disabled).active,
    .btn-info:not(:disabled):not(.disabled):active,
    .show > .btn-info.dropdown-toggle {
    background-color: #117a8b;
    border-color: #10707f;
    }
    
    .btn-info:not(:disabled):not(.disabled).active:focus,
    .btn-info:not(:disabled):not(.disabled):active:focus,
    .show > .btn-info.dropdown-toggle:focus {
    box-shadow: inset 0 3px 5px rgba(39, 44, 51, 0.125),
      0 0 0 1px rgba(58, 176, 195, 0.5);
    }
    
    .btn-warning {
    color: #212529;
    }
    
    .btn-warning {
    background-color: #e4a93c;
    border-color: #e4a93c;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075);
    }
    
    .btn-warning:hover {
    color: #212529;
    }
    
    .btn-warning:hover {
    background-color: #db991e;
    border-color: #d0911d;
    }
    
    .btn-warning.focus,
    .btn-warning:focus {
    color: #212529;
    }
    
    .btn-warning.focus,
    .btn-warning:focus {
    background-color: #db991e;
    border-color: #d0911d;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075), 0 0 0 1px rgba(199, 149, 57, 0.5);
    }
    
    .btn-warning.disabled,
    .btn-warning:disabled {
    color: #212529;
    }
    
    .btn-warning.disabled,
    .btn-warning:disabled {
    background-color: #e4a93c;
    border-color: #e4a93c;
    }
    
    .btn-warning:not(:disabled):not(.disabled).active,
    .btn-warning:not(:disabled):not(.disabled):active,
    .show > .btn-warning.dropdown-toggle {
    color: #212529;
    }
    
    .btn-warning:not(:disabled):not(.disabled).active,
    .btn-warning:not(:disabled):not(.disabled):active,
    .show > .btn-warning.dropdown-toggle {
    background-color: #d0911d;
    border-color: #c5891b;
    }
    
    .btn-warning:not(:disabled):not(.disabled).active:focus,
    .btn-warning:not(:disabled):not(.disabled):active:focus,
    .show > .btn-warning.dropdown-toggle:focus {
    box-shadow: inset 0 3px 5px rgba(39, 44, 51, 0.125),
      0 0 0 1px rgba(199, 149, 57, 0.5);
    }
    
    .btn-danger {
    color: #fff;
    }
    
    .btn-danger {
    background-color: #d9534f;
    border-color: #d9534f;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075);
    }
    
    .btn-danger:hover {
    color: #fff;
    }
    
    .btn-danger:hover {
    background-color: #d23430;
    border-color: #c9302c;
    }
    
    .btn-danger.focus,
    .btn-danger:focus {
    color: #fff;
    }
    
    .btn-danger.focus,
    .btn-danger:focus {
    background-color: #d23430;
    border-color: #c9302c;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075), 0 0 0 1px rgba(223, 109, 105, 0.5);
    }
    
    .btn-danger.disabled,
    .btn-danger:disabled {
    color: #fff;
    }
    
    .btn-danger.disabled,
    .btn-danger:disabled {
    background-color: #d9534f;
    border-color: #d9534f;
    }
    
    .btn-danger:not(:disabled):not(.disabled).active,
    .btn-danger:not(:disabled):not(.disabled):active,
    .show > .btn-danger.dropdown-toggle {
    color: #fff;
    }
    
    .btn-danger:not(:disabled):not(.disabled).active,
    .btn-danger:not(:disabled):not(.disabled):active,
    .show > .btn-danger.dropdown-toggle {
    background-color: #c9302c;
    border-color: #bf2e29;
    }
    
    .btn-danger:not(:disabled):not(.disabled).active:focus,
    .btn-danger:not(:disabled):not(.disabled):active:focus,
    .show > .btn-danger.dropdown-toggle:focus {
    box-shadow: inset 0 3px 5px rgba(39, 44, 51, 0.125),
      0 0 0 1px rgba(223, 109, 105, 0.5);
    }
    
    .btn-light,
    .navbar-light .navbar-btn {
    background-color: #f8f9fc;
    border-color: #EFEFEF;
    }
    
    .btn-light:hover,
    .navbar-light .navbar-btn:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
    }
    
    .btn-light.focus,
    .btn-light:focus,
    .navbar-light .focus.navbar-btn,
    .navbar-light .navbar-btn:focus {
    background-color: #e2e6ea;
    border-color: #dae0e5;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075), 0 0 0 1px rgba(216, 217, 219, 0.5);
    }
    
    .btn-light.disabled,
    .btn-light:disabled,
    .navbar-light .disabled.navbar-btn,
    .navbar-light .navbar-btn:disabled {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    }
    
    .btn-light:not(:disabled):not(.disabled).active,
    .btn-light:not(:disabled):not(.disabled):active,
    .navbar-light .navbar-btn:not(:disabled):not(.disabled).active,
    .navbar-light .navbar-btn:not(:disabled):not(.disabled):active,
    .navbar-light .show > .dropdown-toggle.navbar-btn,
    .show > .btn-light.dropdown-toggle {
    background-color: #dae0e5;
    border-color: #d3d9df;
    }
    
    .btn-light:not(:disabled):not(.disabled).active:focus,
    .btn-light:not(:disabled):not(.disabled):active:focus,
    .navbar-light .navbar-btn:not(:disabled):not(.disabled).active:focus,
    .navbar-light .navbar-btn:not(:disabled):not(.disabled):active:focus,
    .navbar-light .show > .dropdown-toggle.navbar-btn:focus,
    .show > .btn-light.dropdown-toggle:focus {
    box-shadow: inset 0 3px 5px rgba(39, 44, 51, 0.125),
      0 0 0 1px rgba(216, 217, 219, 0.5);
    }
    
    .btn-dark {
    color: #fff;
    }
    
    .btn-dark {
    background-color: #303840;
    border-color: #303840;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075);
    }
    
    .btn-dark:hover {
    color: #fff;
    }
    
    .btn-dark:hover {
    background-color: #20252a;
    border-color: #1a1f23;
    }
    
    .btn-dark.focus,
    .btn-dark:focus {
    color: #fff;
    }
    
    .btn-dark.focus,
    .btn-dark:focus {
    background-color: #20252a;
    border-color: #1a1f23;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.15),
      0 1px 1px rgba(39, 44, 51, 0.075), 0 0 0 1px rgba(79, 86, 93, 0.5);
    }
    
    .btn-dark.disabled,
    .btn-dark:disabled {
    color: #fff;
    }
    
    .btn-dark.disabled,
    .btn-dark:disabled {
    background-color: #303840;
    border-color: #303840;
    }
    
    .btn-dark:not(:disabled):not(.disabled).active,
    .btn-dark:not(:disabled):not(.disabled):active,
    .show > .btn-dark.dropdown-toggle {
    color: #fff;
    }
    
    .btn-dark:not(:disabled):not(.disabled).active,
    .btn-dark:not(:disabled):not(.disabled):active,
    .show > .btn-dark.dropdown-toggle {
    background-color: #1a1f23;
    border-color: #15181c;
    }
    
    .btn-dark:not(:disabled):not(.disabled).active:focus,
    .btn-dark:not(:disabled):not(.disabled):active:focus,
    .show > .btn-dark.dropdown-toggle:focus {
    box-shadow: inset 0 3px 5px rgba(39, 44, 51, 0.125),
      0 0 0 1px rgba(79, 86, 93, 0.5);
    }
    
    .badge {
    display: inline-block;
    font-size: 75%;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    vertical-align: baseline;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    .badge {
    padding: 0.5em 1em;
    text-align: center;
    border-radius: 0.25rem;
    }
    
    @media (prefers-reduced-motion: reduce) {
    .badge {
      transition: none;
    }
    }
    
    a.badge:focus,
    a.badge:hover {
    text-decoration: none;
    }
    
    .badge:empty {
    display: none;
    }
    
    .btn .badge {
    position: relative;
    top: -1px;
    }
    
    .badge-pill {
    border-radius: 10rem;
    }
    
    [dir="ltr"] .badge-pill,
    [dir="rtl"] .badge-pill {
    padding-right: 0.6em;
    padding-left: 0.6em;
    }
    
    .badge-primary {
    color: #fff;
    }
    
    .badge-primary {
    background-color: var(--bs-primary);
    }
    
    a.badge-primary:focus,
    a.badge-primary:hover {
    color: #fff;
    }
    
    a.badge-primary:focus,
    a.badge-primary:hover {
    background-color: #2239ff;
    }
    
    a.badge-primary.focus,
    a.badge-primary:focus {
    outline: 0;
    }
    
    a.badge-primary.focus,
    a.badge-primary:focus {
    box-shadow: 0 0 0 1px rgba(85, 103, 255, 0.5);
    }
    
    .badge-secondary {
    color: #fff;
    }
    
    .badge-secondary {
    background-color: #868e96;
    }
    
    a.badge-secondary:focus,
    a.badge-secondary:hover {
    color: #fff;
    }
    
    a.badge-secondary:focus,
    a.badge-secondary:hover {
    background-color: #6c757d;
    }
    
    a.badge-secondary.focus,
    a.badge-secondary:focus {
    outline: 0;
    }
    
    a.badge-secondary.focus,
    a.badge-secondary:focus {
    box-shadow: 0 0 0 1px rgba(134, 142, 150, 0.5);
    }
    
    .badge-success {
    background-color: #77c13a;
    }
    
    a.badge-success:focus,
    a.badge-success:hover {
    color: #212529;
    }
    
    a.badge-success:focus,
    a.badge-success:hover {
    background-color: #5f9a2e;
    }
    
    a.badge-success.focus,
    a.badge-success:focus {
    outline: 0;
    }
    
    a.badge-success.focus,
    a.badge-success:focus {
    box-shadow: 0 0 0 1px rgba(119, 193, 58, 0.5);
    }
    
    .badge-info {
    color: #fff;
    }
    
    .badge-info {
    background-color: #17a2b8;
    }
    
    a.badge-info:focus,
    a.badge-info:hover {
    color: #fff;
    }
    
    a.badge-info:focus,
    a.badge-info:hover {
    background-color: #117a8b;
    }
    
    a.badge-info.focus,
    a.badge-info:focus {
    outline: 0;
    }
    
    a.badge-info.focus,
    a.badge-info:focus {
    box-shadow: 0 0 0 1px rgba(23, 162, 184, 0.5);
    }
    
    .badge-warning {
    color: #212529;
    }
    
    .badge-warning {
    background-color: #e4a93c;
    }
    
    a.badge-warning:focus,
    a.badge-warning:hover {
    color: #212529;
    }
    
    a.badge-warning:focus,
    a.badge-warning:hover {
    background-color: #d0911d;
    }
    
    a.badge-warning.focus,
    a.badge-warning:focus {
    outline: 0;
    }
    
    a.badge-warning.focus,
    a.badge-warning:focus {
    box-shadow: 0 0 0 1px rgba(228, 169, 60, 0.5);
    }
    
    .badge-danger {
    color: #fff;
    }
    
    .badge-danger {
    background-color: #d9534f;
    }
    
    a.badge-danger:focus,
    a.badge-danger:hover {
    color: #fff;
    }
    
    a.badge-danger:focus,
    a.badge-danger:hover {
    background-color: #c9302c;
    }
    
    a.badge-danger.focus,
    a.badge-danger:focus {
    outline: 0;
    }
    
    a.badge-danger.focus,
    a.badge-danger:focus {
    box-shadow: 0 0 0 1px rgba(217, 83, 79, 0.5);
    }
    
    .badge-light {
    color: #212529;
    }
    
    .badge-light {
    background-color: #f8f9fa;
    }
    
    a.badge-light:focus,
    a.badge-light:hover {
    color: #212529;
    }
    
    a.badge-light:focus,
    a.badge-light:hover {
    background-color: #dae0e5;
    }
    
    a.badge-light.focus,
    a.badge-light:focus {
    outline: 0;
    }
    
    a.badge-light.focus,
    a.badge-light:focus {
    box-shadow: 0 0 0 1px rgba(248, 249, 250, 0.5);
    }
    
    .badge-dark {
    color: #fff;
    }
    
    .badge-dark {
    background-color: #303840;
    }
    
    a.badge-dark:focus,
    a.badge-dark:hover {
    color: #fff;
    }
    
    a.badge-dark:focus,
    a.badge-dark:hover {
    background-color: #1a1f23;
    }
    
    a.badge-dark.focus,
    a.badge-dark:focus {
    outline: 0;
    }
    
    a.badge-dark.focus,
    a.badge-dark:focus {
    box-shadow: 0 0 0 1px rgba(48, 56, 64, 0.5);
    }
    /*nav-tab*/
    .nav-tabs {
    border-bottom: 1px solid #e9edf2;
    }
    
    .nav-tabs .nav-item {
    margin-bottom: -1px;
    }
    
    .nav-tabs .nav-link {
    border: 1px solid transparent;
    color:#272c33;
    }
    
    .nav-tabs .nav-link:focus,
    .nav-tabs .nav-link:hover {
    border-color: transparent transparent #e9edf2;
    }
    
    .nav-tabs .nav-link.disabled {
    color: #868e96;
    }
    
    .nav-tabs .nav-link.disabled {
    background-color: transparent;
    border-color: transparent;
    }
    
    
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    color: #4353ff;
    border-color: #4353ff;
    border:none;
    border-bottom: 2px solid;
    }
    
    .nav-tabs .dropdown-menu {
    margin-top: -1px;
    }
    
    .nav-pills .nav-link {
    color:#272c33;
    }
    
    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
    color: #4353ff;
    border-color: #4353ff;
    border:none;
    border-bottom: 2px solid;
    border-radius: 0;
    background-color: transparent;
    }
    
    
    .nav-fill .nav-item,
    .nav-fill > .nav-link {
    flex: 1 1 auto;
    }
    
    .nav-fill .nav-item,
    .nav-fill > .nav-link {
    text-align: center;
    }
    
    .nav-justified .nav-item,
    .nav-justified > .nav-link {
    flex-basis: 0;
    flex-grow: 1;
    }
    
    .nav-justified .nav-item,
    .nav-justified > .nav-link {
    text-align: center;
    }
    
    .tab-content > .tab-pane {
    display: none;
    }
    
    .tab-content > .active {
    display: block;
    }
    
    .intergration_row {
    margin-bottom: 20px;
    }
    
    .intergration_row .card {
    margin-bottom: 20px;
    }
    
    .intergration_row .card:hover,
    .intergration_row .card.active {
    background-color: #edeff4;
    }
    
    .intergration_row .card-block {
    height: 30px;
    }
    
    .intergration_row .card-block img {
    width: 80px;
    height: auto;
    }
    
    
    @media (max-width: 768px){
    #pageviews_chart{
      height: 250px;
      max-height: 400px;
    }
    .sidebar.background-linear-gradient .nav-item .collapse .collapse-inner{
      background-image: linear-gradient(60deg, #29323c 0%, #485563 100%) !important;
    }
    }
    table.dataTable td{
    max-width: 200px;
    }
    table.dataTable td  {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 13px;
    }
    
    table.table td{
    max-width: 350px;
    }
    table.table td  {
    font-size: 13px;
    }
    .btn-sm {
    border-radius: .1rem;
    font-size: .75rem;
    padding: .2rem .5rem;
    }
    .btn-default {
      background-color: rgba(64,87,109,.07);
      color: #0d1216;
    }
    .btn-default:hover {
      background-color: rgba(57,76,96,.15);
      color: #0d1216;
    }
    .btn-default:focus {
      background-color: rgba(57,76,96,.15);
      color: #0d1216;
    }
    
    .dropdown-menu{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border-radius: 0.2rem;
    padding: 0.2rem;
    }
    .nav-link.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    }
    .dropdown-item.active, .dropdown-item:active{
    color: #206bc4;
    background-color: rgba(32, 107, 196, 0.04);
    }
    
    .sidebar {
    min-height: auto;
    }
    .sidebar .nav-item .nav-link {
    text-align: left;
    width: 100%;
    }
    .sidebar .nav-item .collapse{
      position: block;
    }
    .sidebar .nav-item .collapse{
    position: static;
    }
    
    .card .card-footer {
    background-color: #ffffff;
    }
    .card .card-title {
    margin-bottom: 0px;
    }
    .card .card-header{
    background-color: #ffffff;
    }
    .sidebar .nav-item .collapse .collapse-inner .collapse-item.active, .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
    color: var(--bs-primary);
    font-weight: 500;
    }
    .table .thead-dark th{
    background-color: #000;
    border-color: #000;
    }
    .form-group.required label:not(:empty)::after {
    content: ' *';
    color: #ff0000;
    }
    
    .form-selector-2 input{
    position:absolute;
    z-index:999;
    }
    
    
    .form-selector-2 input:active +.form-drinkcard-selector, .cc-selector input:active +.form-drinkcard-selector{opacity: .9;}
    .form-selector-2 input:checked +.form-drinkcard-selector, .cc-selector input:checked +.form-drinkcard-selector{
    -webkit-filter: none;
        -moz-filter: none;
            filter: none;
    }
    .form-drinkcard-selector{
    position: relative;
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:200px;
    height:150px;
    border: 1px solid #4144FF;
    -webkit-transition: all 100ms ease-in;
        -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.9);
        -moz-filter: brightness(1.8) grayscale(1) opacity(.9);
            filter: brightness(1.8) grayscale(1) opacity(.9);
    }
    .form-drinkcard-selector .preview_button{
    max-width: 80px; 
    max-height: 29px;
    display: block;
    position:absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    margin:auto;
    }
    .form-drinkcard-selector:hover{
    -webkit-filter: brightness(1) grayscale(0) opacity(1);
        -moz-filter: brightness(1) grayscale(0) opacity(1);
            filter: brightness(1) grayscale(0) opacity(1);
    }
    
    .form-selector-2 input{ margin: 5px 0 0 12px; }
    .form-selector-2 label{ margin-left: 7px; }
    
    .tabStepFunnels .card-body{
    padding: 0px;
    }
    .action-create-step{
    padding:20px;
    margin:0px;
    border-bottom: 1px solid #eaedf2;
    }
    .action-create-step .btn{
    max-width: 150px;
    }
    .stepFunnelCard{
    padding:20px;
    margin:0px;
    border-bottom: 1px solid #eaedf2;
    }
    .stepFunnelCard:hover{
    background-color: #e3eaef;
    }
    
    .stepFunnelCard.active{
    background-color: #e3eaef;
    }
    
    .stepFunnelCard .funnel-title{
    font-size: 16px;
    margin-bottom: 3px;
    }
    
    .stepFunnelCard .funnel-type{
    margin-bottom:0px;
    font-size: 13px;
    }
    
    .stepFunnelCard .step-actions{
    display: inline-block; text-align: right; width: 100%
    }
    .stepFunnelCard .step-actions a{ 
    color: #5A5C69;
    }
    @media (min-width: 768px){
    .sidebar {
        width: auto!important;
    }
    }
    
    @media (max-width: 768px){
    .dropdown-item{
      color: #000;
      padding: 0.25rem 0.75rem;
    }
    .dropdown-menu{
      box-shadow: none;
      background-color: transparent;
      border: none;
      color: #fff;
    }
    .dropdown-item.active, .dropdown-item:active {
        color: #ffff;
        background-color: transparent;
    }
    .sidebar .nav-item .collapse .collapse-inner {
        box-shadow: none;
    }
    .sidebar {
      width: auto;
      min-height: auto;
    }
    .sidebar .nav-item .nav-link[data-toggle=collapse].collapsed::after {
      content: "\f061";
      font-family:"Font Awesome 6 Pro"
    } 
    .sidebar .nav-item .nav-link[data-toggle=collapse]::after {
      width: 1rem;
      text-align: center;
      float: right;
      vertical-align: 0;
      border: 0;
      font-weight: 900;
      content: "\f061";
      font-family:"Font Awesome 6 Pro"
    }
    .sidebar .sidebar-heading{
      text-align: left;
    }
    }
    
    
    .tippy-tooltip.light-border-theme {
    background: white;
    border: 1px solid rgba(0, 8, 16, 0.15);
    color: #333;
    box-shadow: 0 3px 14px -0.5px rgba(0, 8, 16, 0.1);
    }
    .tippy-tooltip.light-border-theme .tippy-arrow {
    transform-style: preserve-3d;
    }
    .tippy-tooltip.light-border-theme .tippy-arrow::after {
    content: '';
    position: absolute;
    left: -8px;
    transform: translateZ(-1px);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    }
    /* A mixin is used for the arrow, but here it is with regular scss */
    .tippy-popper[x-placement^='top'] .tippy-tooltip.light-border-theme .tippy-arrow {
    border-top-color: #fff;
    }
    .tippy-popper[x-placement^='top'] .tippy-tooltip.light-border-theme .tippy-arrow::after {
    top: -7px;
    border-top: 8px solid rgba(0, 8, 16, 0.15);
    }
    .tippy-popper[x-placement^='bottom'] .tippy-tooltip.light-border-theme .tippy-arrow {
    border-bottom-color: #fff;
    }
    .tippy-popper[x-placement^='bottom'] .tippy-tooltip.light-border-theme .tippy-arrow::after {
    bottom: -7px;
    border-bottom: 8px solid rgba(0, 8, 16, 0.15);
    }
    
    
        /* Ali Custom Styles */
    
    .cl_page_title {
    font-size: 29px !important
    }
    @media screen and (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 1400px;
    }
    }
    
    /* Header CSS */
    
    .ds_sidebar{
      background:#fff;
      border-bottom:1px solid #e1e1e1;
      padding:10px 0;
    }
    .ds_sidebar_logo a{
    display:inline-block
    }
    .ds_sidebar_logo a img{
    width:100%;
    max-width:178px
    }
    .ds_sidebar_logo{
    min-width:200px
    }
    .cl_navbar>ul{
    list-style:none;
    padding:0;
    margin:0;
    width:100%
    }
    .cl_navbar>ul>li>a{
    color:#000;
    font-size:17px;
    padding:10px 10px;
    display:block;
    border-radius:4px;
    transition:.2s ease all!important
    }
    .cl_navbar>ul>li>a:hover{
    text-decoration:none;
    background-color:#f1f4f8
    }
    .cl_navbar>ul>li>a>i{
    padding-right:5px
    }
    .cl_navbar>ul>li{
    border-radius:5px;
    margin-bottom:5px
    }
    .cl_navbar>ul>li>a>i.fa-regular.fa-chevron-down{
    float:right;
    transition:.3s ease all!important;
    padding:3px 0
    }
    .cl_navbar_dropdown{
    display:none
    }
    .cl_navbar_dropdown{
    background:#f1f4f8
    }
    .cl_navbar_dropdown ul{
    list-style:none;
    padding:5px 0;
    margin:0
    }
    .cl_navbar_dropdown ul li a{
    display:block;
    color:#000;
    font-size:16px;
    padding:5px 10px
    }
    .cl_navbar_dropdown ul li{
    padding-left:30px
    }
    .cl_user_action_support a{
    color:#2196f3;
    font-size:23px;
    padding:4px 4px;
    background:#fff;
    border-radius:5px;
    margin-left:0
    }
    .cl_user_action_upgrade a{
    color:#ef9d13;
    border:1px solid #fff;
    font-size:20px;
    padding:4px 2px;
    border-radius:5px;
    margin-left:3px
    }
    .ds_navbar_center .dropdown-menu .dropdown-item{
    padding:6px 17px 6px 11px;
    font-size:16px
    }
    .ds_navbar_center .dropdown-menu .dropdown-item i{
    min-width:33px;
    text-align:center;
    font-size:18px;
    color:#334155
    }
    .ds_navbar_center .dropdown:hover>.dropdown-menu{
    display:block
    }
    .ds_navbar_center .dropdown-toggle::after{
    display:none
    }
    .ds_navbar_center {
    flex: 1 1 auto;
    text-align: right;
    }
    .ds_navbar_center>ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    }
    .ds_navbar_center>ul>li{
    display:inline-block!important
    }
    .ds_navbar_center .nav-item .nav-link {
    padding: 11px 7px 10px 7px;
    color: #000;
    font-weight: 400;
    font-size: 16px;
    margin: 0 3px;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    overflow: hidden;
    }
    .ds_navbar_center .cl_user_info_desktop .nav-item .nav-link {
    padding: 0 0;
    padding-left: 13px;
    }
    .ds_navbar_center .cl_user_info_desktop .nav-item .nav-link:before {
    display: none;
    }
    .ds_navbar_center .nav-item .nav-link:before{
    content:"";
    position:absolute;
    z-index:-1;
    left:51%;
    right:51%;
    bottom:0;
    background:var(--gardient-main-color);
    height:2px;
    -webkit-transition-property:left,right;
    transition-property:left,right;
    -webkit-transition-duration:.3s;
    transition-duration:.3s;
    -webkit-transition-timing-function:ease-out;
    transition-timing-function:ease-out
    }
    .daterangepicker {
    font-family: inherit !important;
    }
    .ds_navbar_center .nav-item .nav-link:hover:before{
    left:0;
    right:0
    }
    .ds_navbar_center .nav-item .nav-link i{
    font-size:14px
    }
    .cl_user_info>ul{
    padding:0;
    margin:0;
    list-style:none;
    text-align:right
    }
    .cl_user_info>ul>li{
    display:inline-block!important
    }
    .cl_main_navbar{
    background-color:#fff;
    padding:4px 25px;
    border-bottom:1px solid #e1e1e1;
    text-align:right
    }
    .cl_main_container{
    max-width:1400px;
    margin:auto;
    padding:0 15px
    }
    .cl_user_info>ul{
    display:inline-block
    }
    .nav-link-user-profile>a{
    color:#000;
    font-size:16px;
    padding-left:10px;
    margin-left:10px;
    border-left:1px solid #dbdbdb
    }
    .nav-link-user-profile>a>img{
    width:38px;
    border-radius:80px;
    height:38px;
    margin-right:3px
    }
    .nav-link-user-profile .dropdown-toggle::after{
    display:none
    }
    .cl_main_body{
    padding:25px 15px
    }
    
    .cl_progress{
    width:100%;
    height:8px
    }
    .cl_dashboard_list ul{
    list-style:none;
    margin:0;
    padding:0
    }
    .ds_sidebar_action{
    display:inline-block;
    position:relative;
    top:6px
    }
    .ds_sidebar_action button{
    background:0 0;
    border:0;
    font-size:26px;
    line-height:0;
    padding:6px 6px;
    color: #000;
    }
    .ds_navbar_mobile{
    position:fixed;
    left:-120%;
    top:0;
    width:270px;
    height:100%;
    background:#fff;
    z-index:9999;
    border-right:1px solid #e9e9e9;
    overflow-y:auto!important;
    transition:.3s ease all!important
    }
    .ds_navbar_mobile_header{
    padding:10px 15px;
    display:flex;
    justify-content:space-between
    }
    .ds_navbar_mobile_header img{
    width:145px
    }
    .ds_navbar_mobile_content{
    padding:7px 10px
    }
    .ds_navbar_mobile_content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .ds_navbar_mobile_content ul li{
    display:block!important
    }
    .ds_navbar_mobile_content .nav-item .nav-link {
    font-size: 17px;
    text-align: left;
    color: black;
    }
    .ds_navbar_mobile_content .nav-item .nav-link i.fa-duotone {
    padding-right: 4px;
    }
    .ds_navbar_mobile_content li.nav-item.dropdown.no-arrow.nav-link-user-profile {
    display: none !important;
    }
    .ds_navbar_mobile_content .dropdown-menu.dropdown-menu-right.show {
    position: unset !important;
    transform: unset !important;
    width: 100% !important;
    float: unset !important;
    margin-bottom: 6px !important;
    box-shadow: unset !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    padding: 9px 0 9px 0;
    }
    .ds_navbar_mobile_content a.nav-link.text-warning {
    border: 1px solid;
    margin-bottom: 7px;
    margin-top: 7px;
    }
    .ds_navbar_mobile_content .dropdown-menu .dropdown-item i {
    display: none;
    }
    .ds_navbar_mobile_content .dropdown-menu .dropdown-item {
    font-size: 17px;
    color: black;
    }
    .ds_navbar_mobile_actions ul{
    padding:0 20px;
    list-style:none;
    margin:0
    }
    .ds_navbar_mobile_actions li a{
    padding:10px 18px;
    display:block;
    font-size:16px;
    margin:0;
    margin-bottom:8px;
    background:#fff;
    text-align:left;
    color:#000;
    border:1px solid #d3d3d3
    }
    .ds_sidebar_action{
    display:none
    }
    @media screen and (max-width:992px){
    .ds_sidebar_action{
    display:inline-block
    }
    .dropdown-menu {
    background: white;
    border: 1px solid #e3e6f0; 
    }
    div#cl_navbar_main{
    
    }
    .ds_navbar_center>ul>li {
    display:none !important;
    }
    .ds_sidebar_logo a img{
    max-width:160px
    }
    .ds_sidebar_action button{
    font-size:21px
    }
    .ds_sidebar_logo{
    min-width:auto
    }
    .nav-link-user-profile>a span{
    display:none
    }
    .ds_sidebar_inner .cl_main_container{
    padding-left:10px;
    padding-right:10px
    }
    .nav-link-user-profile>a>img{
    width:30px;
    height:30px
    }
    .nav-link-user-profile>a{
    padding-left:5px;
    margin-left:5px;
    padding-right:5px;
    border:0
    }
    .ds_navbar_mobile_content>div{
    display:block!important
    }
    .cl_user_info>ul>li.cl_user_action_support{
    display:none!important
    }
    .cl_user_info>ul>li.cl_user_action_upgrade{
    display:none!important
    }
    }
    
    /* Dashboard Box */
    
    
    .cl_dashboard_info {
    background: #fff;
    padding: 0;
    position: relative;
    box-shadow: 0 3px 15px rgb(0 0 0 / 6%);
    border-radius: 20px;
    margin: 10px 0 !important;
    }
    
    .card.shadow {
    box-shadow: 0 3px 15px rgb(0 0 0 / 6%) !important;
    border-radius: 0 !important;
    border-radius: 15px;
    }
    .row .card.shadow {
    border-radius: 15px !important;
    overflow: hidden;
    }
    
    .cl_chart_info{
      padding:20px 25px 0 25px
    }
    span.badge.bade-success{
      color:#83caa3;
      background:#e7f9ee;
      font-size:15px;
      padding:7px 8px
    }
    .cl_chart_info h2 {
    font-weight: 600;
    font-size: 35px;
    margin: 0;
    color: #1ebaff !important;
    }
    .cl_chart_info h2 span{
      position:relative;
      top:-5px
    }
    .cl_chart_info p{
      font-size:18px;
      margin-bottom:5px
    }
    @media screen and (max-width:992px){
      #dashboard-card-01,dashboard-card-02{
          max-height:170px!important
      }
    }
    
    #formFilter .daterange {
      font-size: 15px;
      min-width: 230px !important;
    }
    .daterangepicker td.in-range {
    background-color: #f0eff5 !important;
    }
    .daterangepicker td.active, .daterangepicker td.active:hover {
      background-color: #28236b !important;
    }
    .daterangepicker .ranges li.active {
    background-color: #28236b !important;
    }
    button.applyBtn.btn.btn-sm.btn-primary {
      background: #28236b !important;
      border-color: #28236b !important;
    }
    
    
    .ds_navbar_mobile_active {
      left: 0%;
    }
    .cl_chart {
      padding: 20px !important;
    }
    
    
    .cl_browser_progress {
      height: 6px;
      background: #dddddd;
      border-radius: 8px;
      overflow: hidden;
    }
    .cl_browser_progress > div {
      height: 100%;
      background: #43bcfe;
      border-radius: 8px;
    }
    .cl_browser_each {
      display: flex;
    }
    .cl_browser_img {
      margin-right: 10px;
      width: 35px;
    }
    .cl_browser_img img {
      width: 35px;
      height: 35px;
      border-radius: 80px;
    }
    .cl_browser_each p {
      margin-bottom: 5px;
      color: black;
    }
    .cl_browser_grid {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -5px;
    }
    .cl_browser_col {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 10px 14px;
    }
    .cl_browser_info {
      flex: 1 1 auto;
    }
    .card.shadow {
      box-shadow: 0 3px 15px rgb(0 0 0 / 6%) !important;
      border-radius: 0 !important;
    }
    .card-header p {
      font-size: 17px;
    }
    
    .cl_leads_progress {
      height: 6px;
      background: #dddddd;
      border-radius: 8px;
      overflow: hidden;
    }
    .cl_leads_progress > div {
      height: 100%;
      background: #43bcfe;
      border-radius: 8px;
    }
    .cl_leads_each {
      display: flex;
    }
    .cl_leads_img {
      margin-right: 10px;
      width: 35px;
      text-align:center;
    }
    .cl_leads_img img {
      width: 90%;
      height: 95%;
      object-fit: contain;
    }
    .cl_leads_each p {
      margin-bottom: 5px;
      color: black;
    }
    .cl_leads_grid {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -5px;
    }
    .cl_leads_col {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 10px 14px;
    }
    .cl_leads_info {
      flex: 1 1 auto;
    }
    
    .card_body_is_scrollable {
      height: 310px;
      overflow-y: auto;
    }
    table#graph2_tbl td {
      color: black;
      font-size: 15px;
      vertical-align: middle;
    }
    table#graph2_tbl td .progress {
      height: 6px;
    }
    table#graph2_tbl td .progress-bar {
      background: #43bcfe;
    }
    
    
    .daterangepicker .drp-calendar {
    display: block !important;
    }
    html {
    background-color: #F1F4F8 !important;
    }
    
    /* Fix Dropdown Hover Issue */
    .dropdown-menu {
    margin: 0 !important;
    }
    .table-responsive{
    border-radius: 15px !important;
    box-shadow: 0 3px 15px rgb(0 0 0 / 6%) !important;
    }
    
    .card{
    border-radius: 15px !important;
    }
    
    /* Design Fago Customize CSS */
    
    footer.sticky-footer{
    margin-top: 30px;
    background: #121216;
    color: #fff;
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
    }

    footer.sticky-footer a:hover {
      color: #ccc;
    }
    
    /* Hero */
    .hero .custom_size_btn {
    background-color: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,.1);
    color: #000;
    padding: 10px 20px;
    position: absolute;
    right: 25px;
    text-decoration: none;
    top: 25px
    }
    
    .hero .custom_dropdown_menu {
    max-width: 420px
    }
    
    .hero {
      background-image: var(--gardient-main-color);
      background-position: 50%;
      background-repeat: no-repeat;
      height: 100%;
      max-height: 360px;
      min-height: 360px;
      object-fit: cover;
      position: relative;
      width: 100%;
    }
    
    .hero .hero_main {
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
    }
    
    .hero .hero_main .hero_heading p.comman_para,.hero .hero_main .search_input {
    margin: 0 auto;
    width: 80%
    }
    
    .hero .hero_main .search_input {
    background: #fff;
    border-radius: 10px;
    height: 38px;
    padding: 5px 10px;
    }
    
    .search_input path {
    fill: #2ec4b6
    }
    
    .search_input input {
    align-items: center;
    display: flex;
    height: 40px;
    line-height: 40px;
    padding: 0 5px 3px
    }
    
    :focus-visible {
      outline: 0 auto -webkit-focus-ring-color
    }
    
    @media screen and (max-width: 767px){
    .hero .hero_main {
        width: 90%;
    }
    .main_heading {
        font-size: 30px;
        line-height: 36px;
    }
    }
    /* End hero */
    
    /* Design category */
    .small_card_icon {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 8px auto;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: opacity .3s ease-in-out 0s,-webkit-transform .3s ease-in-out 0s;
    transition: transform .3s ease-in-out 0s,opacity .3s ease-in-out 0s;
    transition: transform .3s ease-in-out 0s,opacity .3s ease-in-out 0s,-webkit-transform .3s ease-in-out 0s;
    }
  
    .category-small-card {
      background: #fff9e2;
      padding: 15px;
      border-radius: 10px;
      margin-bottom:10px;
    }
    
    .small_card_text h6{
    font-size: 13px;
    }
    /* end Design category */
    
    /* Template card design */
    .template_design .ds_template_card {
    margin-top: 5px;
    width: 170px;
    }
    .template_design .gallery_img {
    align-items: center;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    }
    .template_design_list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    grid-gap: 15px;
    justify-items: center;
    }
    @media screen and (max-width: 767px) {
    .template_design_list{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      grid-gap: 5px;
      justify-items: center;
    }
    .template_design_list .ds_template_card {
      width: 160px;
    }
    }
    
    
    .min_h_240 {
    max-height: 240px;
    min-height: 240px
    }
    
    .min_h_240 img {
    height: 220px;
    object-fit: cover;
    }
    .position-relative {
    position: relative!important;
    }
    .background_light_template {
    background-color: #F1F3F5
    }
    
    .padding_10 {
    padding: 10px
    }
    
    .img_small_title h6 {
    color: #0d1216;
    font-size: 14px;
    font-weight: 500
    }
    
    .img_small_title h6,.img_small_title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
    }
    
    .img_small_title span {
    color: rgba(13,18,22,.7);
    display: block;
    font-size: 12px;
    font-weight: 400
    }
    .template_premium {
      position: absolute;
      right: 15px;
      bottom: 15px;
    }
    
    .template_premium .premium_icon {
      align-items: center;
      background: rgba(0,0,0,.6);
      border-radius: 8px;
      height: 16px;
      width: 16px;
      padding: 2px 8px 2px 8px;
      justify-content: center;
    }
    .template_premium .premium_icon {
      color: #fcc946;
      font-size: 11px;
    }
    
    .show_more_link,h3.section_title {
      font-weight: 400
    }
    
    .show_more_link {
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background: var(--gardient-main-color);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 18px;
    line-height: 30px;
    position: relative;
    text-align: center
    }
    
    .show_more_link:before {
    background: var(--gardient-main-color);
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    right: 0;
    transition: all .2s ease;
    width: 0
    }
    
    .show_more_link:hover:before {
    left: 0;
    width: 100%
    }
    
    .owl-next, .owl-prev {
    background: #fff!important;
    border: 1px solid #2b3b4a4d!important;
    border-radius: 50%;
    box-shadow: 0 0 12px 0 rgb(64 87 109/7%);
    height: 40px;
    line-height: 40px;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition-duration: .2s;
    transition-property: border-color,color;
    width: 40px
    }
    
    .owl-prev {
    left: 7px
    }
    .owl-next {
    right: 7px
    }
    .fa-2x {
    font-size: 1rem
    }
    
    
    /* End Template card design */
    
    /* Project design */
    
    .project_card_list .project_card {
    margin-top: 5px;
    width: 200px;
    }
    
    .project_card_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 20px;
    justify-items: center;
    }
    
    
    .project_card
    {
      position: relative;
    }
    
    .btn-action-design
    {
      position: absolute; 
      right:8px; 
      top: 8px;
      display:none;
    }
    .project_card:hover .btn-action-design, .ds_template_card:hover .btn-action-design{ 
      display:block; 
    }
    
    .btn-action-design .dropdown .dropdown-toggle{
    max-width: 32px;
    max-height: 32px;
    padding: 4px;
    border-radius: 5px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: #fff;
    }
    .btn-action-design .dropdown .dropdown-toggle:hover{
    background-image: var(--gardient-main-color);
    }
    .btn-action-design .dropdown .dropdown-toggle:focus{
    background-image: var(--gardient-main-color);
    }
    .btn-action-design .dropdown .dropdown-menu{
    width: 180px;
    }
    
    .btn-action-design .dropdown .dropdown-menu h6{
    padding: 0.25rem 1rem;
    font-weight: 500;
    color: #000;
    }
    .btn-action-design .dropdown .dropdown-menu span{
    padding: 0.25rem 1rem;
    color: #0d1216;
    }
    .btn-action-design .dropdown .dropdown-menu hr{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    }
    .btn-action-design .dropdown .dropdown-menu .dropdown-item{
    padding: .25rem 1rem;
    }
  
    /* Redesign modal */
    .modal-footer{
      border-top: 0px;
    }
    .modal-content{
      border-radius: 20px;
    }
    .modal-body {
      padding: 1.5rem;
  
    }
    /* Customize alert Swal */
  
    .swal2-container.swal-container-customize{
      width: calc(100% - 8px) !important;
      max-width: 500px !important;
    }
    .swal2-popup.swal-popup-customize{
      background: #0d1216 !important;
      padding: 5px 10px 5px 10px !important;
      border-radius: 10px !important;
      width: auto !important;
    }
    .swal-icon-customize{
      color: #59B259 !important;
      font-size: 12px !important;
      border: 0px !important;
    }
    .swal2-popup.swal2-toast .swal2-title.swal-title-customize{
      color: #fff !important;
      font-size: 16px !important;
      line-height: 2.2rem !important;
    }
    
    /* End project desing */
    
    
    /* End Design Fago */

/* css customized for books */
.dropdown-menu{
    border-radius: 10px;
  }
  .dropdown-item {
    padding: .5rem 2rem;
    color: #000;
  }
  
  .dropdown-item:hover {
    background-color: #e6e6e6;
  }
  
  #templatePreviewModal .owl-prev {
    left: -20px;
  }
  
  #templatePreviewModal .owl-next {
    right: -20px;
  }
  
  a.modal-close {
    font-size: 14px;
    position: absolute;
    top: -15px;
    color: white;
    right: -38px;
    background: black;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    padding-top: 7px;
    padding-left: 1px;
  }
  
  a.modal-close:hover {
    color:var(--blue) !important;
    background-color: black !important;
  }
  
  #templatePreviewModal {
    padding-right:0 !important;
  }
  
  @media only screen and (max-width: 768px) {
    #templatePreviewModal .modal-dialog {
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 15px;
    }
  
    a.modal-close {
      padding-top: 6px !important;
      width: 28px !important;
      height: 28px !important;
      font-size: 12px !important;
      right: -30px !important;
    }
  
    #templatePreviewModal h1 {
      font-size: 2rem;
    }
  }
  
  .thumbContainer {
    border-radius: 10px;
    padding: 10px;
    background: #f7f7f7;
    margin: 5px;
    display: block;
  }
  
  
  /* width */
  .tinyscroll::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  .tinyscroll::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  .tinyscroll::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  .tinyscroll::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  #loader {
    text-align: center;
  }
  
  [data-editing="0"] .edit-on {
    display: none;
  }
  
  [data-editing="1"] .edit-off {
    display: none;
  }
  
  [data-editing="0"] .edit-off .editModeToggle {
    display: none;
  }
  
  [data-editing="0"] .edit-off:hover .editModeToggle {
    display: inline;
    cursor: pointer;
  }
  
  #loader {
    text-align: center;
  }
  
  .editModeToggle {
    right: 0;
    position: absolute;
  }
  
  .tag_filters .btn {
    border-radius: 8px;
  }
  
  .tag_filters .active:before {
    font-family: "Font Awesome 6 Pro";
    content: "\f00c";
  }
  
  .square_custom_2x {
    width:150px;
    height:150px;
  }
  
  .square_custom_1x {
    width:75px;
    height:75px;
  }
  
  .custom_mt_n1p {
    margin-top:-1px;
  }
  
  .d-none-less {
    display: none;
  }
  
  .d-inline-less {
    display: inline;
  }
  
  .template_card_adtnl {
    object-fit:contain;
    cursor:pointer;
    height: 220px;
  }
  
  .template_premium_left {
    left:8px;
  }
  
  .hero_main_extra {
    width: 100%;
    max-width: 600px;
  }
  
  .gallery_img_extra {
    border-radius:10px;
  }
  
  .gallery_img_extra img {
    border-radius: 12px;
    max-width: 150px;
    height: auto;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }
  
  #templatePreviewModal .ds_template_card {
    padding: 10px;
  }
  
  #templatePreviewModal .ds_template_card .gallery_img {
    border-radius: 10px;
  }
  
  .custom-filter-pills {
    overflow-wrap: anywhere;
    margin-bottom:1em;
  }
  
  .custom-filter-pills-item {
    background: #efefef;
    padding: 5px 13px;
    border-radius: 5px;
    font-size: 13px;
    margin-left: 10px;
    font-weight: 500;
    line-height: 35px;
  }
  
  .custom-filter-pills-item:hover {
    background: #dbdada;
  }
  
  .custom-filter-pills-item.active {
    font-weight: bold;
    background-color: #ddf2ff;
  }
  
  .book_card {
      border-radius:10px;
      box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.1);
  }
  
  .book_card:hover {
      box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
  }
  
  .book_card_features {
      position:absolute;
      top:10px;
      left:10px;
  }
  
  .book_card_features-right {
      position:absolute;
      top:10px;
      right:10px;
  }
  
  .book_card_img {
      padding:20px 10px;	
      text-align:center;
      height:220px;
  }
  
  .book_card_img img {
      border-radius:12px;
      max-width:120px;
      height:auto;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.1);
    margin:0px auto;
  }
  
  .book_card_top {
      background:#fff9e2;
  }
  
  .book_card_bottom {
      padding:15px;
  }
  
  .book_card_bottom h6 {
      font-weight: 250;
  }
  .book_card_bottom  .time_clock {
      font-size: 15px;
  }
  .book_card_bottom  i[data-favorite-book] {
      font-size: 20px;
  }
  
  .custom-sm-btn {
      padding:8px;
      border-radius:50%;
      width:40px;
      height:40px;
  }
  
  .br-20 {
    border-radius: 20px;
  }
  
  .custom-card {
    background: #e2f9c9;
    border-radius: 20px;
  }
  
  body.bottom-fixed-player {
      margin-bottom:100px;
  }
  
  body.bottom-fixed-player #audio-player-container {
      position:fixed;
      bottom:0;
      left:0;
      right:0;
    z-index:1;
  }
  
  .reader-buttons {
      margin-bottom:20px;
      display:block;
  }
  font-size: 13px;
  .reader-container {
    max-width:1100px;
    width: 100%;
    padding-right: .75rem;
    padding-left: .75rem;
    margin-right: auto;
    margin-left: auto;
  }
  
  #reader-page {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    padding: 48px;
    border-radius: 5px;
  }
  #reader-page {
    color: #141c31;
    letter-spacing: -.02em;
    font-size: 18px;
    line-height: 1.75
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page {
        font-size:16px
    }
  }
  
  #reader-page strong {
    font-weight: 500
  }
  
  #reader-page .h1,#reader-page .h2,#reader-page .h3,#reader-page .h4,#reader-page .h5,#reader-page h1,#reader-page h2,#reader-page h3,#reader-page h4,#reader-page h5 {
    font-weight: 500;
    letter-spacing: inherit;
    line-height: 1.5;
    margin-bottom: 12px
  }
  
  #reader-page .h1,#reader-page h1 {
    font-size: 32px
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page .h1,#reader-page h1 {
        font-size:30px
    }
  }
  
  #reader-page .h2,#reader-page h2 {
    font-size: 30px
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page .h2,#reader-page h2 {
        font-size:24px
    }
  }
  
  #reader-page .h3,#reader-page h3 {
    font-size: 24px;
    margin-top: 44px;
    padding-top: 42px;
    border-top: 1px solid #d4d0d0
  }
  
  @media only screen and (max-width: 991px) {
    #reader-page .h3,#reader-page h3 {
        margin-top:40px;
        padding-top: 40px
    }
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page .h3,#reader-page h3 {
        font-size:22px;
        padding-top: 46px
    }
  }
  
  #reader-page .small-margin.h3,#reader-page h3.small-margin {
    margin-bottom: 10px
  }
  
  #reader-page .h4,#reader-page h4 {
    font-size: 20px
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page .h4,#reader-page h4 {
        font-size:18px
    }
  }
  
  #reader-page .blockquote,#reader-page .h5,#reader-page .h6,#reader-page h5,#reader-page h6,#reader-page li,#reader-page p,#reader-page td,#reader-page th {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit
  }
  
  #reader-page p {
    margin-bottom: 1em
  }
  
  #reader-page p .text-gray {
    color: #999ba4
  }
  
  #reader-page a,#reader-page a:hover {
    text-decoration: underline
  }
  
  #reader-page a.btns {
    text-decoration: none
  }
  
  #reader-page .small-line-height p {
    line-height: 1.3;
    letter-spacing: 0;
    margin-bottom: .9em!important
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page .small-line-height p {
        line-height:1.5;
        letter-spacing: -.02em
    }
  }
  
  #reader-page ol,#reader-page ul {
    margin-bottom: 1em
  }
  
  @media only screen and (max-width: 991px) {
    #reader-page ol,#reader-page ul {
        margin-bottom:1.6em
    }
  }
  
  #reader-page ol li,#reader-page ul li {
    margin-bottom: 1em
  }
  
  #reader-page ol ol,#reader-page ul ol {
    padding-left: 2em
  }
  
  @media only screen and (max-width: 991px) {
    #reader-page ol ol,#reader-page ul ol {
        padding-left:1.6em
    }
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page ol ol,#reader-page ul ol {
        padding-left:1.2em
    }
  }
  
  #reader-page ol ul,#reader-page ul ul {
    padding-left: 1em
  }
  
  @media only screen and (max-width: 991px) {
    #reader-page ol ul,#reader-page ul ul {
        padding-left:.6em
    }
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page ol ul,#reader-page ul ul {
        padding-left:.2em
    }
  }
  
  #reader-page ol {
    padding-left: 1em
  }
  
  #reader-page ol li {
    padding-left: .33em
  }
  
  @media only screen and (max-width: 991px) {
    #reader-page ol li {
        margin-bottom:1.6em
    }
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page ol li {
        margin-bottom:1.2em
    }
  }
  
  #reader-page ol li ol,#reader-page ol li ul {
    margin-top: 1em
  }
  
  @media only screen and (max-width: 991px) {
    #reader-page ol li ol,#reader-page ol li ul {
        margin-top:1.6em
    }
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page ol li ol,#reader-page ol li ul {
        margin-top:1.2em
    }
  }
  
  #reader-page ul li {
    position: relative;
    padding-left: .5em;
  }
  
  #reader-page[style*="font-family: Rotunda"] ul li:before {
    top: .6em
  }
  
  #reader-page .line {
    display: inline-block;
    width: 23px;
    margin: 0 6px;
    position: relative
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page .line {
        display:block;
        margin: 0
    }
  }
  
  #reader-page .line:before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: #999ba4;
    position: absolute;
    left: 0;
    bottom: 5px
  }
  .book-limit{
    position: relative;
      text-align: center;
  }
  .book-limit-fade{
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 80%);
    position: absolute;
    padding-top: 300px;
    width: 100%;
    bottom: 0;
  }
  .book-limit a, .book-limit p{
    position: relative;
  }
  .btn-read-full{
    text-decoration: none !important;
    max-width: 250px;
  }
  @media only screen and (max-width: 575px) {
    #reader-page .line:before {
        content:none
    }
  }
  
  #reader-page img {
    display: block;
    margin: auto;
    border-radius: 8px
  }
  
  #reader-page blockquote {
    background-color: #fafafa;
    border: 1px solid #d4d0d0;
    border-radius: 8px;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding: 20px 40px;
  }
  
  @media only screen and (max-width: 991px) {
    #reader-page blockquote {
        margin-top:1.6em;
        margin-bottom: 2em;
        padding: 25px 32px
    }
  }
  
  @media only screen and (max-width: 575px) {
    #reader-page blockquote {
        margin-top:1.2em;
        margin-bottom: 1.2em;
        padding: 16px 22px
    }
  }
  
  #reader-page blockquote p {
    margin-bottom: .9em
  }
  
  #reader-page blockquote p:last-child {
    margin-bottom: 0
  }
  
  .back-button-container {
    margin-top:3em;
    margin-bottom:5em;
  }
  
  @media screen and (max-width: 768px) {
    #reader-buttons-container {
      position:fixed;
      bottom:0;
      left:0;
      right:0;
      text-align:center;
      padding:10px 20px;
      background-color: #f7f7f7;
      z-index: 2;
    }
  
    body.bottom-fixed-player {
      margin-bottom:160px;
    }
  
    .reader-buttons {
      margin:10px 20px;
      display: inline;
      color:#757575;
      font-size: 20px;
    }
  
    .reader-container {
      padding:0;
      margin:0;
    }
  
    #reader-page {
      padding: 25px;
    }
  
    .remove-relative-sm {
      position: unset;
    }
  
    .back-button-container {
      margin-top:2em;
      margin-bottom:0;
    }
  }
  
  @media (max-width: 640px) {
    .shk[data-fixed-type="auto"] {
      bottom: 60px !important;
    }
  
    body {
      margin-bottom: 60px;
    }
  }
  
  #load_more_container {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 20px;
    column-gap: 20px;
  }
  
  @media screen and (max-width: 1024px) {
    #load_more_container {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  @media screen and (max-width: 768px) {
    #load_more_container {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media screen and (max-width: 576px) {
    #load_more_container {
      grid-template-columns: repeat(1, 1fr);
    }
  }
  
  .text-sm {
    font-size:13px;
  }

  #accordion .card-header {
    margin-bottom: 8px;
    background: none;
  }
  #accordion .card{
    background: none;
  }
  #accordion .accordion-title {
    position: relative;
    display: block;
    padding: 8px 0 8px 50px;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #000;
    font-size: 1.25rem;
    font-weight: 600;
    width: 100%;
    text-align: left;
    transition: all 0.4s ease-in-out;
  }
  
  #accordion .accordion-title i {
    position: absolute;
    font-size: 20px;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
  }
  #accordion .accordion-title:hover {
    color: #3435A4;
  }

  #accordion [aria-expanded=true] {
    color: #3435A4;
  }
  #accordion [aria-expanded=true] i {
    color: #3435A4;
  }
  #accordion [aria-expanded=true] i:before {
    content: "";
  }
  #accordion .accordion-body {
    padding: 20px 55px;
  }
  .btn-xl {
      padding: 10px 40px;
      font-size: 15px;
      font-weight: bold;
  }
  @media screen and (max-width: 768px) {
    #accordion .accordion-title {
      padding: 8px 0 8px 30px;
      font-size: 1rem;
    }
    #accordion .accordion-body{
      padding: 10px 25px;
    }
    .btn-xl {
      padding: 10px 30px;
    }
  }
  .my-ddm .dropdown-item {
		padding:0.6rem 1rem;
    min-width: 200px;
	}

	.dropdown-icon-circle i {
		padding: 10px;
		border-radius: 50%;
		color: #fff;
	}

	@media only screen and (max-width: 460px) {
		a.custom-sm-btn {
			width:60px;
		}
	}


  .separator {
    border-bottom:2px solid red;
    width:150px;
    display:block;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 5px;
  }

  .g_id_signin [role="button"] {
    margin: 0 auto;
  }
  .subjects-list {
		gap: 10px;
	}

	.subject-item {
		display: flex;
		align-items: center;
		padding: 10px 15px;
		background-color: #f8f9fa;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		text-decoration: none;
		color: #212529;
		transition: background-color 0.3s ease, box-shadow 0.3s ease;
		font-size: 14px;
	}

	.subject-item:hover {
		background-color: #e9ecef;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}

	.subject-icon {
		width: 20px;
		height: 20px;
		margin-right: 8px;
	}

	.subject-name {
		font-weight: 500;
	}