@charset "UTF-8";

/* NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

:root {
    --primary-color: #d01e26;
    --secondary-color: #2c303b;
}


/* Variables Above */

body {
    overflow-x: hidden !important;
}

.classic-tabs .tab-content #accordionWrap1 .card-body {
    background: #fafafa;
    padding: 1.5rem 1.5rem;
}

.classic-tabs .nav-tabs .nav-link {
    transition: all 0.3s ease-in !important;
    position: relative;
}

.classic-tabs .nav-tabs .nav-link:active,
.classic-tabs .nav-tabs .nav-link:focus,
.classic-tabs .nav-tabs .nav-link:hover,
.classic-tabs .nav-tabs .nav-link .active,
.classic-tabs .nav-tabs .nav-link .nav.nav-tabs.nav-underline .nav-item a.nav-link:before {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #111 !important;
}

.classic-tabs .nav-tabs .nav-link i {
    position: relative !important;
    top: 5px !important;
    font-size: 20px !important;
    font-weight: 700;
}

.classic-listing {
    margin: 0px;
}

.classic-listing li {
    list-style-type: none;
    padding: 0.5rem;
    line-height: 2;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    transition: all 0.2s ease-in !important;
}

.classic-listing li:hover {
    padding-left: 1rem;
    background: #f9f9f9;
}

.classic-listing a {
    display: block;
}

.plain-listing {
    margin: 0px;
    padding: 0;
}

.plain-listing li {
    list-style-type: none;
    padding: 0.5rem;
    line-height: 2;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    transition: all 0.2s ease-in !important;
}

.plain-listing li:hover {
    background: #f9f9f9;
}

.plain-listing a {
    display: block;
}

.btn-circle {
    border-radius: 100%;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar .navbar-header.expanded .navbar-brand>.brand-logo.brand-logo-icon {
    display: none !important;
}

.header-navbar .navbar-header .navbar-brand .brand-logo {
    width: 50px;
}

input.form-control,
select.form-control {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 30px;
}


/* User Dashboard Page - Contracts Section Slider Specific Css - need to update accordingly  */

#carouselExampleControls.carousel .carousel-control-next,
#carouselExampleControls.carousel .carousel-control-prev {
    opacity: 1;
}

#carouselExampleControls.carousel .carousel-control-next:active,
#carouselExampleControls.carousel .carousel-control-next:focus,
#carouselExampleControls.carousel .carousel-control-prev:active,
#carouselExampleControls.carousel .carousel-control-prev:focus {
    text-decoration: none !important;
}

#carouselExampleControls .carousel-control-next-icon,
#carouselExampleControls .carousel-control-prev-icon {
    line-height: 0.8848em;
}

#carouselExampleControls .carousel-control-prev {
    left: -4.5rem;
}

#carouselExampleControls .carousel-control-next {
    right: -4.5rem;
}

#carouselExampleControls .carousel-control-next:active,
#carouselExampleControls .carousel-control-next:focus,
#carouselExampleControls .carousel-control-next:hover,
#carouselExampleControls .carousel-control-prev:active,
#carouselExampleControls .carousel-control-prev:focus,
#carouselExampleControls .carousel-control-prev:hover {
    background-color: transparent;
}

#carouselExampleControls .carousel-inner>.item {
    -webkit-transition: -webkit-transform 1.2s ease-in-out !important;
    -o-transition: -o-transform 1.2s ease-in-out !important;
    transition: transform 1.2s ease-in-out !important;
}

#carouselExampleControls .carousel-control-prev.btn-link.active,
#carouselExampleControls .carousel-control-prev.btn-link:active {
    text-decoration: none !important;
}


/* ========== */

#project-timeline .cd-horizontal-timeline .events-content li>* {
    max-width: initial;
}

#project-timeline .cd-horizontal-timeline .heading-elements li {
    position: static;
    opacity: 1;
    width: auto;
    display: inline-block;
    padding: 0;
    transform: translate(0);
}

.main-menu.menu-dark.darken-1,
.main-menu.menu-dark.lighten-1 .navigation,
footer.footer-dark.darken-1 {
    background: #22262f;
}

.main-menu.menu-dark.lighten-1,
.main-menu.menu-dark.lighten-1 .navigation,
footer.footer-dark.lighten-1 {
    background: #3d4250;
}

.ls-0 {
    letter-spacing: 0;
}

.card .card.shadow-light {
    box-shadow: 0 1px 15px 1px rgba(62, 57, 107, 0.07) !important;
}

.card-collapse.collapse.show .card-content {
    background-color: #FAFAFA !important;
}

.card-collapse.collapse.show .card-content .table {
    background-color: #FAFAFA !important;
}

.page-background {
    background: url("../../app-assets/images/backgrounds/login-bg.jpg") no-repeat left center;
    background-size: cover;
    height: 100%;
    position: relative;
}

.page-background::after {
    content: "";
    background: rgba(10, 67, 86, 60%);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    display: block;
    z-index: 1;
}

.page-background * {
    position: relative;
    z-index: 2;
}


/* keystone app custom buttons */

.btn-color-red {
    color: #0a4356
}

.btn-red-gredient {
    border: 0;
    letter-spacing: 0.5px;
    background: linear-gradient(to bottom, #0a4356 20%, #0a4356);
    box-shadow: none;
}

.btn-lg {
    padding: 1.2rem 1rem;
}

@media (min-width: 992px) {
    .sidebar {
        vertical-align: top;
        width: 300px;
    }
}


/* CSS vertical Marquee effect */

.marquee-container {
    max-height: 15rem;
}

.marquee {
    top: 0rem;
    position: relative;
    box-sizing: border-box;
    animation: marquee 15s alternate-reverse infinite;
}

.marquee:hover {
    animation-play-state: paused;
}


/* Make it move! */

@keyframes marquee {
    0% {
        top: 0rem;
    }
    100% {
        top: -17rem;
    }
}


/* CSS Bounce Arrow Animation */

.simplebar-content {
    position: relative;
}

.bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-10px);
    }
}

.hr-divider {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.07);
    position: relative;
}

.hr-divider:after {
    content: "";
    position: absolute;
    left: 4%;
    top: 0;
    width: 5rem;
    background: rgba(0, 0, 0, 0.2);
    height: 100%;
    animation-name: moveInPlace;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.bouncing-arrow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5rem;
    top: auto;
    margin: auto;
    width: 100%;
    height: 40px;
    display: block;
    z-index: 101;
    transition: all 0.3s ease;
}

.bouncing-arrow i {
    width: 40px;
    height: 40px;
    padding-top: 0.7rem;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    border-radius: 100%;
    display: block;
    position: fixed;
    bottom: 0;
    left: 50%;
    background: rgba(255, 255, 255, 0.7);
}

.card .position-relative:hover .bouncing-arrow {
    opacity: 0;
}


/* ====================================
    custom-popover
   ====================================
*/

.popover__title {
    font-size: 24px;
    line-height: 36px;
    text-decoration: none;
    color: #e44444;
    text-align: center;
    padding: 15px 0;
}

.popover__wrapper {
    position: relative;
    display: inline-block;
    width: auto !important;
}

.popover__wrapper .popover__content {
    opacity: 0;
    /*visibility: hidden;*/
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transform: translate(0, 10px);
    background-color: #FFF;
    padding: 1.5rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
    width: auto;
    min-width: 400px;
    max-width: 400px;
    min-height: 340px;
    transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
    z-index: 10;
}

.popover__wrapper .popover__content:before {
    position: absolute;
    z-index: -1;
    content: "";
    right: calc(50% - 10px);
    top: -8px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #FFF transparent;
    transition-duration: 0.3s;
    transition-property: transform;
}

.popover__wrapper .popover__content.__fromRight {
    transform: translate(30px, 0);
    left: 100%;
    right: auto;
    top: 0;
    bottom: 0;
}

.popover__wrapper .popover__content.__fromRight:before {
    right: auto;
    left: -10px;
    top: calc(50% - 10px);
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #DDD transparent transparent;
}

.popover__wrapper:hover .popover__content {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -20px);
}

.popover__wrapper:hover .popover__content.__fromRight {
    transform: translate(0px, 0);
}

label {
    display: inline-block;
    color: #3d4250;
    cursor: pointer;
    position: relative;
}

label span {
    display: inline-block;
    position: relative;
    background-color: transparent;
    width: 24px;
    height: 22px;
    transform-origin: center;
    border: 2px solid #bbb;
    border-radius: 3px;
    vertical-align: -6px;
    margin-right: 5px;
    transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}

label span:before {
    content: "";
    width: 5px;
    height: 2px;
    border-radius: 2px;
    background: #CCC;
    position: absolute;
    transform: rotate(45deg);
    top: 7px;
    left: 6px;
    transition: all 50ms ease 50ms;
    transform-origin: 0% 0%;
}

label span:after {
    content: "";
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: #CCC;
    position: absolute;
    transform: rotate(305deg);
    top: 12px;
    left: 8px;
    transition: all 50ms ease;
    transform-origin: 0% 0%;
}

label:hover span {
    border-color: #1790b5;
}

label:hover span:before {
    width: 5px;
    transition: all 100ms ease;
    background: #1790b5;
}

label:hover span:after {
    width: 10px;
    transition: all 150ms ease 100ms;
    background: #1790b5;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox]:checked+label span {
    background-color: #fff;
    border-color: #1790b5;
    transform: scale(1.25);
}

input[type=checkbox]:checked+label span:after {
    width: 10px;
    background: #1790b5;
    transition: width 150ms ease 100ms;
}

input[type=checkbox]:checked+label span:before {
    width: 5px;
    background: #1790b5;
    transition: width 150ms ease 100ms;
}

input[type=checkbox]:checked+label:hover span {
    background-color: #fff;
    border-color: #1790b5;
    transform: scale(1.25);
}

input[type=checkbox]:checked+label:hover span:after {
    width: 10px;
    background: #1790b5;
    transition: width 150ms ease 100ms;
}

input[type=checkbox]:checked+label:hover span:before {
    width: 5px;
    background: #1790b5;
    transition: width 150ms ease 100ms;
}


/* Mixins Above */

body.material-layout,
body.material-layout .navigation,
body.material-layout .navigation .navigation-header,
body.material-layout .breadcrumb,
body.material-layout .navbar-nav .mega-dropdown-menu,
body.material-layout .header-navbar,
body.material-layout .ql-editor,
body.material-layout .ql-editor h1,
body.material-layout .ql-editor h2,
body.material-layout .ql-editor h3,
body.material-layout .ql-editor h4,
body.material-layout .ql-editor h5,
body.material-layout .ql-editor h6,
body.material-layout .ql-toolbar,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
body,
body a,
body p {
    font-family: "Muli", sans-serif !important;
}

body.vertical-layout.material-layout.fixed-navbar.menu-expanded .header-navbar .navbar-header .navbar-brand .brand-logo.brand-logo-icon {
    display: none;
}


/* Chat Window Panel CSS  */

#flyover {
    z-index: 999;
}

#btn-flyout-open {
    display: none;
    z-index: 1051;
}

#btn-flyout-close,
#btn-flyout-open {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 10px;
    right: 20px;
    color: #FFF;
    text-align: center;
    line-height: 36px;
    font-size: 20px;
}

#btn-flyout-close i,
#btn-flyout-open i {
    font-size: 14px;
}

#referral-content {
    position: fixed;
    z-index: 9999 !important;
    top: 0;
    bottom: 0;
    width: 380px;
    right: -300px;
    background-color: #ffffff;
    padding: 90px 20px 20px 10px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

.referral-content-inner {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

#referral-content h2 {
    font-size: 20px !important;
}

#referral-content p {
    font-size: 16px !important;
}

#btn-flyout-close {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100%;
}

a.panel-out {
    position: absolute;
    left: 0;
    width: 380px;
    height: 72px;
    top: 0;
    background-color: #2C303B;
    text-align: left;
    line-height: 70px;
    padding-left: 25px;
}

a.panel-out i {
    font-size: 24px;
    font-weight: 400;
    color: #FFF;
}

a.panel-out:hover,
a.panel-out:active,
a.panel-out:focus {
    text-decoration: none;
}


/*a.panel-out p {
    text-align: center;
    margin: 0px;
    color: #ffffff;
    padding: 5px 10px;
    font-size: 16px;
}

a.panel-out p span {
    margin-left: 15px;
    float: right;
    padding: 5px 0px;
}*/


/* -- Chat Window Panel CSS  */

.text-base.darken-1 {
    color: #951c21;
}

html body a,
.text-base {
    color: #0a4356;
}

html body a:hover,
html body a:focus {
    text-decoration: none;
    color: #0a4356;
}

.ticket-posted-by,
.response-status .response-yes,
.response-status .response-no {
    margin-top: 4px;
    border-radius: 40px;
}

.nav.nav-tabs.nav-underline .nav-item a.nav-link.text-dark:before {
    background: #666;
}

.response-status .response-yes,
.response-status .response-no {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-top: 10px;
    position: relative;
    top: 4px;
}

.pos-r {
    position: relative;
}

.max-height-200 {
    max-height: 190px;
}

.max-height-300 {
    max-height: 300px;
}

.max-height-400 {
    max-height: 400px;
}

.max-height-500 {
    max-height: 500px;
}

.max-height-600 {
    max-height: 600px;
}

.max-height-700 {
    max-height: 700px;
}

.max-height-800 {
    max-height: 800px;
}

.max-height-900 {
    max-height: 900px;
}

.max-height-full {
    max-height: 100vh;
}

.py-half {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.px-half {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.mb-half {
    margin-bottom: 0.5rem !important;
}

.blank-card {
    background: none;
    box-shadow: none;
}

.img-auto-width {
    width: auto !important;
    max-width: none !important;
}

.img-size-sm {
    width: 20px !important;
    max-width: none !important;
    height: auto;
}

.img-size-md {
    width: 35px !important;
    max-width: none !important;
    height: auto;
}

.img-size-lg {
    width: 50px !important;
    max-width: none !important;
    height: auto;
}

.full-height {
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
}

.text-bold-200 {
    font-weight: 200 !important;
}

.text-bold-300 {
    font-weight: 300 !important;
}

.text-bold-400 {
    font-weight: 400 !important;
}

.text-bold-500 {
    font-weight: 500 !important;
}

.text-bold-600 {
    font-weight: 600 !important;
}

.text-bold-700 {
    font-weight: 700 !important;
}

.text-bold-800 {
    font-weight: 800 !important;
}

.text-bold-900 {
    font-weight: 900 !important;
}

.shadow-light {
    box-shadow: 0 1px 15px 1px rgba(62, 57, 107, 0.07);
}

.shadow-light-no-bottom {
    box-shadow: 0 -5px 15px 1px rgba(62, 57, 107, 0.07);
}

.border-light {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.header-navbar .navbar-header .navbar-brand .brand-text .brand-logo {
    width: 100px;
}

a,
.btn,
.k-grid table tr {
    transition: all 0.2s ease-in;
}

.pagination .page-link {
    color: #464855;
    border-radius: 3rem;
    transition: all 0.9s ease !important;
    margin-left: 10px;
}

.pagination .page-link:hover {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.07));
}

.paginate_button.page-item.next.disabled,
.paginate_button.page-item.previous.disabled {
    cursor: not-allowed;
}

.page-item.active .page-link {
    background-color: rgba(218, 234, 255, 0.8);
}

.users-contacts-wrapper-main .table td {
    border-bottom: none;
}

.users-contacts-wrapper-main .dropdown .dropdown-menu {
    min-width: 12.2rem;
    box-shadow: 0 5px 50px 2px rgba(64, 70, 74, 0.2) !important;
}

.users-contacts-wrapper-main div.dataTables_wrapper div.dataTables_filter input {
    min-width: 385px !important;
}

.user-info-icon-btn {
    right: 40px;
    top: 0;
}

.user-info-icon-btn a {
    border-radius: 100% !important;
    padding: 1rem !important;
}

body {
    position: relative;
}

body:after {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 99999;
    width: 100%;
    height: 100%;
    margin: auto;
    transition: all 0.7s ease;
}

body .spin-preloader {
    display: block;
}

body.pace-done .spin-preloader {
    display: none;
}

body.pace-done:after {
    opacity: 0;
    z-index: -9 !important;
}

@keyframes fadeInAnim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOutAnim {
    0% {
        opacity: 1;
        animation-fill-mode: backwards;
    }
    100% {
        opacity: 0;
    }
}

@keyframes moveInPlace {
    0% {
        transform: translate(0);
    }
    50% {
        transform: translateX(50%);
    }
    100% {
        transform: translate(0);
    }
}


/* user-timeline-content */

.user-timeline-content {
    position: relative;
}

.user-timeline-content p {
    margin-bottom: 5px;
}

.user-timeline-content .user-action-status {
    position: relative;
    border-left: 1px solid #ccc;
    height: 100%;
    width: 20px;
    left: 0;
    top: 0;
}

.user-timeline-content .user-action-status span {
    border-radius: 100%;
    width: 10px;
    padding: 5px 0px;
    display: inline-block;
    position: absolute;
    left: -6px;
    top: 4px;
}

.user-timeline-time {
    /*  ================================
      CSS Preloader Animation Below
      ================================
  */
    /* option 1 
      ========================================
      <div class="spinner">
        <div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div>
      </div>
      ========================================
  */
    /* option 2
  
      ========================================
      <div class="loader">
          <span></span><span></span><span></span><span></span>
      </div>
      ========================================
  
  */
    /*  ================================
      CSS Preloader Animation Above
      ================================
  */
    /* main-menu.menu-dark Styles Below */
    /* main-menu.menu-light Styles Below */
    /*    -------   */
    /* Theme Changes Styles Below */
    /*  welcome screen page text animation  */
    /* Responsive media quearies below */
    /* ========================
      Overrides
     ========================
  */
    /* Kendo UI Specific CSS Styles */
}

.user-timeline-time p {
    margin-bottom: 5px;
}

.user-timeline-time .user-data-tabs-example-1 .nav.nav-tabs.nav-underline .nav-item a.nav-link:before {
    background: red;
}

.user-timeline-time .simplebar-scrollbar {
    right: 0.4rem !important;
    width: 0.2rem !important;
}

.user-timeline-time .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    top: 0.4rem !important;
    bottom: 0.4rem !important;
    opacity: 0.2 !important;
}

.user-timeline-time .max-height-200:hover .simplebar-scrollbar:before {
    opacity: 0.5 !important;
}

.user-timeline-time .card-perspec {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: flex;
    position: relative;
    pointer-events: none;
    transform: translateZ(0);
}

.user-timeline-time .card-perspec:after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 10px;
    border-radius: 50%;
    left: 0;
    bottom: -50px;
    box-shadow: 0 30px 20px rgba(0, 0, 0, 0.3);
}

.user-timeline-time .img-shadow-block {
    position: relative;
    display: block;
}

.user-timeline-time .img-shadow-block img {
    animation: floatUp 4s ease-in-out infinite;
}

.user-timeline-time .img-shadow-block .img-shadow {
    width: 40%;
    height: 10px;
    border-radius: 50%;
    margin: 0 auto;
    transform: translateY(-20px);
    box-shadow: 0 50px 20px rgba(0, 0, 0, 0.3);
    animation: sizeSmall 4s ease-in-out infinite;
}

.user-timeline-time .spin-preloader {
    margin: auto;
    width: 70px;
    text-align: center;
    height: 30px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 999999;
}

.user-timeline-time .spin-preloader>div {
    width: 18px;
    height: 18px;
    background-color: #122e5d;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.user-timeline-time .spin-preloader .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.user-timeline-time .spin-preloader .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
    }
}

@keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.user-timeline-time .loader {
    text-align: center;
    margin: 40px 0;
    position: fixed;
    z-index: 999999;
    height: 40px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.user-timeline-time .loader span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #122e5d;
    display: inline-block;
}

.user-timeline-time .loader span:first-child {
    animation: loading-2 0.5s linear infinite;
    opacity: 0;
    transform: translate(-20px);
}

.user-timeline-time .loader span:nth-child(2),
.user-timeline-time .loader span:nth-child(3) {
    animation: loading-3 0.5s linear infinite;
}

.user-timeline-time .loader span:last-child {
    animation: loading-1 0.5s linear infinite;
}

@-webkit-keyframes loading-1 {
    100% {
        transform: translate(40px);
        opacity: 0;
    }
}

@keyframes loading-1 {
    100% {
        transform: translate(40px);
        opacity: 0;
    }
}

@-webkit-keyframes loading-2 {
    100% {
        transform: translate(20px);
        opacity: 1;
    }
}

@keyframes loading-2 {
    100% {
        transform: translate(20px);
        opacity: 1;
    }
}

@-webkit-keyframes loading-3 {
    100% {
        transform: translate(20px);
    }
}

@keyframes loading-3 {
    100% {
        transform: translate(20px);
    }
}

@keyframes floatUp {
    0% {
        transform: translatey(0px);
    }
    50% {
        transform: translatey(-40px);
    }
    100% {
        transform: translatey(0px);
    }
}

@keyframes sizeSmall {
    0% {
        width: 40%;
    }
    50% {
        width: 20%;
    }
    100% {
        width: 40%;
    }
}

.user-timeline-time div.dataTables_wrapper {
    width: 99.2% !important;
    margin: 0;
}

.user-timeline-time .icheckbox_square-blue,
.user-timeline-time .iradio_square-blue {
    height: 23px;
}

.user-timeline-time .customizer {
    right: -320px;
    transition: all 0.5s ease-out;
}

.user-timeline-time .customizer.open {
    z-index: 99999 !important;
}

.user-timeline-time .customizer .customizer-sidebar-options .active,
.user-timeline-time .customizer .customizer-sidebar-options .active:hover {
    background-color: #00BCD4;
    border-color: #00BCD4;
    color: #FFFFFF !important;
}

.user-timeline-time .blank-card .line-on-side {
    border-bottom: 1px solid #CCC;
}

.user-timeline-time .blank-card .line-on-side span {
    background-color: #F5F5F5 !important;
}

.user-timeline-time .material-vertical-layout.vertical-menu-modern .navbar-semi-dark .navbar-wrapper .navbar-container .collapse .nav .nav-item .nav-link .search-icon,
.user-timeline-time .material-vertical-layout.vertical-menu-modern .navbar-semi-dark .navbar-wrapper .navbar-container .collapse .nav .nav-link-search .nav-link .search-icon {
    font-size: 1.3em;
}

.user-timeline-time body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.open>a:not(.mm-next):after,
.user-timeline-time body.vertical-layout.vertical-menu-modern .main-menu .navigation li.open>a:not(.mm-next):after {
    transform: rotate(0deg) !important;
}

.user-timeline-time .main-menu.menu-dark .navigation>li>a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
}

.user-timeline-time .main-menu.menu-dark .navigation>li.hover>a,
.user-timeline-time .main-menu.menu-dark .navigation>li:hover>a,
.user-timeline-time .main-menu.menu-dark .navigation>li.active>a {
    color: #FFF;
}

.user-timeline-time .main-menu.menu-dark .navigation>li>a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1%;
    height: 100%;
    background: rgba(255, 255, 255, 0.04);
    opacity: 0;
    transition: all 0.3s ease-in-out 0.1s;
}

.user-timeline-time .main-menu.menu-dark .navigation>li>a:hover:after {
    width: 100%;
    opacity: 1;
}

.user-timeline-time .main-menu.menu-dark .navigation>li.open>a {
    background: rgba(255, 255, 255, 0.04);
    color: #FFF;
}

.user-timeline-time .main-menu.menu-light .navigation>li>a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

.user-timeline-time .main-menu.menu-light .navigation li a,
.user-timeline-time .main-menu.menu-light .navigation>li.hover>a,
.user-timeline-time .main-menu.menu-light .navigation>li:hover>a,
.user-timeline-time .main-menu.menu-light .navigation>li.active>a {
    color: #3d4250 !important;
}

.user-timeline-time .main-menu.menu-light .navigation>li>a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1%;
    height: 100%;
    background: rgba(243, 246, 255, 0.6);
    opacity: 0;
    transition: all 0.3s ease-in-out 0.1s;
}

.user-timeline-time .main-menu.menu-light .navigation>li>a:hover:after {
    width: 100%;
    opacity: 1;
}

.user-timeline-time .body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation>li>a>i,
.user-timeline-time .main-menu.menu-light .navigation li a i,
.user-timeline-time .body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation>li>a>i,
.user-timeline-time .main-menu.menu-light .navigation li a span {
    position: relative;
    z-index: 2;
}

.user-timeline-time .main-menu.menu-light .navigation>li.open>a {
    background: rgba(243, 246, 255, 0.6);
    color: #3d4250 !important;
}

.user-timeline-time .badge-left {
    position: absolute;
    top: 10px;
    right: auto;
    left: 10px;
}

.user-timeline-time .user-login-form .position-relative.has-icon-left .form-control {
    border: 1px solid #e2e2e2;
    background: transparent;
    border-radius: 3rem;
    padding: 0.6rem 0.6rem 0.6rem 2.6rem;
}

.user-timeline-time .pos-r .sidebar-sticky {
    position: absolute;
    height: 100% !important;
    right: 0;
    top: 0;
}

.user-timeline-time .user-login-form input,
.user-timeline-time .user-login-form textarea,
.user-timeline-time .main-search-box input,
.user-timeline-time .main-search-box textarea {
    display: block;
    width: 100%;
    border: 0;
    padding: 1.05rem 5px;
    background: transparent no-repeat;
    /*
  * IMPORTANT PART HERE
  */
    /* 2 imgs : 1px gray line (normal state) AND 2px green line (focus state) */
    background-image: linear-gradient(to bottom, #999, #999), linear-gradient(to bottom, silver, silver);
    /* sizes for the 2 images (default state) */
    background-size: 0 2px, 100% 1px;
    /* positions for the 2 images. Change both "50%" to "0%" or "100%" and tri again */
    background-position: 50% 100%, 50% 100%;
    /* animation solely on background-size */
    transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
}

.user-timeline-time .user-login-form input:focus,
.user-timeline-time .user-login-form textarea:focus,
.user-timeline-time .main-search-box input:focus,
.user-timeline-time .main-search-box textarea:focus {
    /* sizes for the 2 images (focus state) */
    background-size: 100% 2px, 100% 1px;
    outline: none;
}

.user-timeline-time .material-vertical-layout .main-menu.menu-dark .user-profile,
.user-timeline-time .material-vertical-layout .main-menu.menu-light .user-profile {
    background: url(../../app-assets/images/backgrounds/tg-avatar-bg.png) center center no-repeat;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.user-timeline-time .material-vertical-layout.menu-collapsed .main-menu.menu-dark .user-profile .user-img,
.user-timeline-time body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .user-profile .user-img,
.user-timeline-time .material-vertical-layout.menu-collapsed .main-menu.menu-light .user-profile .user-img,
.user-timeline-time .material-vertical-layout.menu-expanded .main-menu.menu-light .user-profile .user-img {
    border: none;
    width: 10% !important;
    margin: 0 !important;
    display: block !important;
}

.user-timeline-time body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .user-profile .user-name {
    display: block;
}

.user-timeline-time .material-vertical-layout.menu-collapsed .main-menu.menu-dark.expanded .user-profile .user-img,
.user-timeline-time body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .user-profile .user-img,
.user-timeline-time .material-vertical-layout.menu-collapsed .main-menu.menu-dark.expanded .user-profile .user-img,
.user-timeline-time .material-vertical-layout.menu-collapsed .main-menu.menu-light.expanded .user-profile .user-img,
.user-timeline-time body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-light .user-profile .user-img,
.user-timeline-time .material-vertical-layout.menu-collapsed .main-menu.menu-light.expanded .user-profile .user-img {
    border: none;
    width: 1% !important;
    margin: 0 !important;
    display: block !important;
}

.user-timeline-time .material-vertical-layout.menu-collapsed .main-menu.menu-dark.expanded .user-profile .user-img+i,
.user-timeline-time body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .user-profile .user-img+i,
.user-timeline-time .material-vertical-layout.menu-collapsed .main-menu.menu-light.expanded .user-profile .user-img+i,
.user-timeline-time body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-light .user-profile .user-img+i {
    display: none;
}

.user-timeline-time body.vertical-layout.vertical-menu-modern .navbar-semi-light .toggle-icon,
.user-timeline-time body.vertical-layout.vertical-menu-modern .navbar-light .toggle-icon {
    color: #2C303B !important;
}

.user-timeline-time .main-menu.menu-dark,
.user-timeline-time .main-menu.menu-light {
    color: #DCDCDC;
}

.user-timeline-time .text {
    width: 640px;
    height: 40px;
    text-align: left !important;
    margin: 0 auto;
}

.user-timeline-time .text p {
    display: inline-block;
    vertical-align: top;
    margin: 0 5px;
    font-size: 2.5rem;
}

.user-timeline-time .word {
    position: absolute;
    width: 220px;
    opacity: 0;
}

.user-timeline-time .letter {
    position: relative;
    float: left;
    transform: translateZ(25px);
    transform-origin: 50% 50% 25px;
}

.user-timeline-time .letter.out {
    transform: rotateX(90deg);
    transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.user-timeline-time .letter.behind {
    transform: rotateX(-90deg);
}

.user-timeline-time .letter.in {
    transform: rotateX(0deg);
    transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.user-timeline-time .main-search-box .search-btn {
    font-size: 1.3em;
    color: #8B8C9E;
    z-index: 2;
    margin-left: -3.5rem !important;
}

.user-timeline-time .main-search-box input {
    padding-left: 1rem;
    padding-top: 0;
    padding-bottom: 0;
}

.user-timeline-time .custom-control-label {
    padding-left: 1rem;
}

.user-timeline-time .custom-control-label:after {
    top: 0rem;
}

.user-timeline-time input::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: red;
    opacity: 1;
    /* Firefox */
}

.user-timeline-time input::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: red;
}

.user-timeline-time input:-webkit-input-placeholder {
    /* Internet Explorer 10-11 */
    color: red;
    opacity: 1;
    /* Firefox */
}

.user-timeline-time input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: red;
}

.user-timeline-time input::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}

@media (min-width: 992px) {
    .user-timeline-time .sidebar-right.sidebar-sticky {
        float: right !important;
        margin-left: -300px;
        width: 300px !important;
        position: fixed;
        z-index: 2;
        right: 0;
        top: 0;
        height: 100%;
    }
}

.user-timeline-time .nav.nav-tabs.nav-underline .nav-item a.nav-link.active {
    border: none;
    background-color: #f9f9f9;
}

.user-timeline-time .k-header.k-grid-toolbar {
    border-color: #e2e2e2;
}

.user-timeline-time .k-grid {
    border-color: rgba(255, 255, 255, 0.01);
}

.user-timeline-time .k-grid-header th.k-header>.k-link,
.user-timeline-time .k-grid-header th.k-header {
    color: #333;
}

.user-timeline-time .k-grid-header th.k-header {
    font-weight: 800;
}

.user-timeline-time .k-grid table td.k-state-focused,
.user-timeline-time .k-grid table th.k-state-focused,
.user-timeline-time .k-grid table tr.k-state-hover,
.user-timeline-time .k-grid table tr:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.user-timeline-time .negative-spacing {
    margin: -10px 0 -10px -10px;
    padding: 7px 0 7px 10px;
}

.user-timeline-time .k-pager-wrap .k-pager-numbers .k-state-selected {
    display: inline-block;
    width: 37px;
    height: 38px;
    line-height: 23px;
    margin: -2px 5px 0 0;
}

.user-timeline-time .k-pager-numbers .k-link,
.user-timeline-time .k-pager-numbers .k-state-selected {
    border-width: 1px 0 0;
}


/* Misc CSS */

.dummy-hide {
    display: none;
}

.api-error {
    padding: 4px;
    background: #F44336;
    color: #fff;
    border-radius: 30px;
    margin-bottom: 20px;
    text-align: center;
}

.api-error.success {
    background: #8BC34A;
    color: #fff !important;
}

.main-menu-content img,
.main-menu-child img {
    width: 27px;
    filter: brightness(0) invert(1);
    margin-right: 10px;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.menu-fixed .main-menu-content,
.vertical-overlay-menu .main-menu.menu-fixed .main-menu-content,
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu.menu-fixed .main-menu-content {
    /* height: calc(100% - 300px) !important; */
}

.user-info-dashboard .card-profile-image img {
    border: 5px solid #FFF;
    position: absolute;
    margin-top: -70px;
    width: 110px;
}

.user-info-dashboard .profile-card-with-cover-content {
    margin-top: 60px;
}

.page-body {
    min-height: 300px;
}

.no-content {
    text-align: center;
    line-height: 250px;
    color: #0a4356;
    font-size: 18px;
    width: 100%;
}

.activities-wrapper {
    max-height: 443px;
    overflow-y: auto;
    overflow-x: hidden;
}

.activities-wrapper .tag-color-0 {
    background: #673AB7;
}

.activities-wrapper .tag-color-1 {
    background: #F44336;
}

.activities-wrapper .tag-color-2 {
    background: #00BCD4;
}

.activities-wrapper .tag-color-3 {
    background: #607D8B;
}

.activities-wrapper .tag-color-4 {
    background: #009688;
}

.activities-wrapper .tag-color-5 {
    background: #FFC107;
}

@media (max-width: 991px) {
    .navbar-brand>img {
        display: none;
    }
}

.menu-title-child {
    font-size: 18px;
    width: calc(100% - 40px);
    padding: 20px;
    border-bottom: 1px solid #727272;
    margin-left: 20px;
    padding-left: 0;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.menu-title-child::before {
    content: '...';
    position: absolute;
    left: 0;
    right: 0;
    line-height: 0px;
    padding-left: 4px;
    display: block;
}

.main-menu.expanded .menu-title-child::before,
body.menu-expanded .menu-title-child::before {
    display: none;
}

.main-menu:not(.expanded) .menu-title-child>span,
body:not(.menu-expanded) .menu-title-child>span {
    display: none;
}

.main-menu.expanded .menu-title-child>span,
body.menu-expanded .menu-title-child>span {
    display: block!important;
}

.menu-title-child::after {
    content: "";
    font-family: "Material Icons";
    position: absolute;
    top: 0;
    empty-cells: 0;
    left: 0;
    background: #2c303b;
    width: 100%;
    height: 100%;
    line-height: 90px;
    text-align: center;
    display: none;
}

.main-menu:not(.expanded) .menu-title-child {
    border: none;
}

.main-menu.expanded .menu-title-child {
    border-color: #727272;
}

.main-menu.expanded .menu-title-child::after {
    display: none;
}

.material-vertical-layout .main-menu .main-menu-content .navigation li.active>a {
    background: #007da2 !important;
}

.login-loader {
    height: 20px;
    display: none;
    position: absolute;
    right: 28px;
    top: 14px;
    width: 20px;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-left: 3px solid #fff;
    border-radius: 60%;
    border-right: 2px solid transparent;
    animation: animate-loader linear 1s infinite;
}

@keyframes animate-loader {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.dropdown-notification {
    display: none;
}

.pages-content {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.pages-content li {
    padding: 1px;
    list-style: none;
    display: flex;
    width: 30.33%;
    flex-wrap: wrap;
    position: relative;
    margin: 20px;
}

@media (max-width: 1695px) {
    .pages-content li {
        width: 29.33%;
    }
}

@media (max-width: 1370px) {
    .pages-content li {
        width: 45%;
    }
}

@media (max-width: 1163px) {
    .pages-content li {
        width: 44%;
    }
}

@media (max-width: 1030px) {
    .pages-content li {
        width: 100%;
    }
}

.pages-content li.document-list .thumb img {
    max-width: 100%;
    max-height: 100%;
}

.pages-content li.document-list .thumb a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
}

.pages-content li .thumb {
    overflow: hidden;
    background: #ddd;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
}

.pages-content li .thumb img,
.pages-content li .thumb audio,
.pages-content li .thumb video,
.pages-content li .thumb a {
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

.pages-content li .thumb a.video-element {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
}

.pages-content li .thumb img i,
.pages-content li .thumb audio i,
.pages-content li .thumb video i,
.pages-content li .thumb a i {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 60px;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: 0.2s filter;
    filter: drop-shadow(2px 4px 6px #d0d0d0);
}

.pages-content li .thumb img:active i,
.pages-content li .thumb audio:active i,
.pages-content li .thumb video:active i,
.pages-content li .thumb a:active i {
    transition: 0.2s filter;
    filter: drop-shadow(0px 0px 0px #d0d0d0);
}

.pages-content li .thumb audio {
    display: none;
}

.pages-content li .naming {
    width: calc(100% - 178px);
    display: flex;
    align-items: center;
    padding-left: 20px;
    font-size: 18px;
}

.pages-content .dropdown-wrapper {
    display: flex;
    align-items: center;
}

.pages-content .dropdown-toggle::after {
    font-size: 20px;
    color: #2C303B;
}

.page-dropdown {
    display: inline-block;
    box-shadow: 0 8px 10px 1px rgba(95, 95, 95, 0.14), 0 3px 14px 3px rgba(95, 95, 95, 0.12), 0 4px 15px 0 rgba(95, 95, 95, 0.2);
    border: 1px solid #E4E5EC;
    border-radius: 5px;
    overflow: hidden;
    position: absolute;
    background: #fff;
    display: none;
    margin-top: 0px;
    margin-left: -88px!important;
}

.page-dropdown>a {
    display: inline-block;
    padding: 5px 12px 10px;
    border-right: 1px solid #E4E5EC;
    color: #5f5f5f;
}

.page-dropdown>a:hover {
    background: #F5F5F5;
}

.page-body a:hover .page-dropdown,
.page-body .dropdown-parent:hover .page-dropdown {
    display: inline-block;
}

.audio-wrapper {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    height: 200px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #682529;
    padding-bottom: 20px;
}

.audio-video-title {
    display: flex;
    justify-content: space-between;
    padding: 0;
    border-bottom: 1px solid #ddd;
    margin: 0 20px;
    align-items: center;
}

.audio-video-title h1 {
    font-size: 18px;
}

.page-title {
    text-transform: uppercase;
}


/* content share  */

.mail-compose {
    background: var(--white-color);
    height: calc(100% - 64px);
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    position: relative;
    overflow-y: auto;
}

.mail-compose .title {
    font-size: 20px;
    padding: 10px;
    min-height: 380px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.mail-compose .title img {
    width: 25px;
}

.mail-compose .title .pin {
    width: 50px;
    position: relative;
    padding: 0px 8px;
    overflow: hidden;
}

.mail-compose .title .pin input {
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}

.mail-compose .title .submit {
    width: 40px;
    background: none;
    border: 0;
}

.mail-compose .mail-input {
    border-bottom: 1px solid #ddd;
    padding: 12px 0;
}

.mail-compose .mail-input label {
    font-size: 22px;
    font-weight: 600;
    float: left;
    clear: both;
    width: 100px;
    margin-bottom: 0;
    color: var(--black-color);
}

.mail-compose .mail-input input,
.mail-compose .mail-input textarea {
    height: 36px !important;
    border: 0;
    width: calc(100% - 100px);
    margin: 0;
    padding: 0;
    color: #000;
    border-radius: 0;
}

.mail-compose .mail-input input:focus,
.mail-compose .mail-input textarea:focus {
    outline: 0;
}

.mail-compose .mail-input input[disabled],
.mail-compose .mail-input textarea[disabled] {
    opacity: 0.2;
    background: none;
}

.mail-compose .mail-input .textarea {
    min-height: 100px;
    width: 100%;
    font-size: 16px;
}

.mail-compose .mail-input .error {
    color: #fff;
    background: #8c1e1f;
    font-size: 17px;
    display: none;
    padding: 0 10px;
}

.mail-compose.loader::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(255, 255, 255, 0.73) var(--loadergif) center center no-repeat;
}

.mail-compose .loader-gif {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    transform: translate(-50%, -50%);
    z-index: 99;
}

.media-card {
    display: flex;
    color: #d01e26;
    align-items: center;
    font-size: 17px;
    margin: -6px 8px 0 8px;
    padding: 3px;
    max-width: 990px;
    height: 55px;
    position: relative;
    overflow-x: auto;
    padding-right: 60px;
}

.media-card .delete-icon {
    position: absolute;
    right: 0px;
    padding: 20px;
    cursor: pointer;
}

.media-card .delete-icon:hover {
    background: #ddd;
}

.media-card .icon {
    padding: 7px;
    background: #eaeaea;
    margin: 0 5px 0 2px;
}

.media-card .icon img {
    width: 30px;
    height: 35px;
}

.mail-content-wrapper .text-container textarea {
    min-height: 100px;
    max-width: 100%;
}

@media (max-width: 1100px) {
    .edit-profile>.col-3 {
        display: none;
    }
    .edit-profile>.col-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.edit-profile input.form-control,
.edit-profile select.form-control {
    border-radius: 5px;
}

.edit-profile .input-container {
    max-width: 500px;
}

.api-response.error {
    margin-bottom: 18px;
    background: #F44336;
    padding: 5px;
    color: #fff !important;
    border-radius: 3px;
    display: block;
}

.api-response.success {
    background: #8BC34A;
    margin-bottom: 18px;
    padding: 5px;
    color: #fff !important;
    border-radius: 3px;
    display: block;
}


/* Dashboard RESP */

@media (max-width: 1300px) {
    .user-info-container,
    .user-totals-container {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .user-activity-container {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 1150px) {
    .user-info-container,
    .user-totals-container,
    .user-activity-container {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.dropdown-user-link {
    padding: 1.2rem 0.5rem!important;
    line-height: 23px!important;
    cursor: pointer;
    margin: 3px;
}

.dropdown-user-link:hover {
    background-color: #e4e4e4!important;
}

.content-body video {
    background: #000;
}

.explorer-return {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 9999;
    background: rgb(29, 29, 29, 0.85);
}

.explorer-return:after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.8;
    z-index: 1
}

.explorer-return p {
    font-size: 20px;
    width: 90%;
    max-width: 300px;
    background: #fff;
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9;
    transform: translate(-50%, -50%);
    border: 5px solid #8e262a;
}


/* Change */

.navbar-brand .brand-text img {
    margin-top: -12px;
}

.navbar-brand .brand-logo {
    margin-top: -12px;
    margin-left: -5px;
}

.content-header {
    background: linear-gradient(to bottom, #0a4356 20%, #0a4356)!important;
}

.change-theme-color {
    background: linear-gradient(to bottom, #0a4356 20%, #0a4356)!important;
}

.main-menu .main-menu-content {
    height: auto!important;
    max-height: calc(100% - 300px) !important;
    overflow: auto;
}

.navbar-nav.float-right li:first-child {
    display: none;
}

.page-body img:hover~.page-dropdown {
    display: inline-block;
}

@media (max-width: 768px) {
    .content-wrapper {
        top: -120px!important;
    }
}