@media (max-width:1600px) {
    .app-error .app-error-info {
        padding-left: 100px
    }
}

@media (min-width:1200px) {
    .menu-hover .app-sidebar {
        overflow: visible;
        display: inline-block;
        position: relative;
        height: auto
    }

    .menu-hover .app-sidebar::before {
        position: fixed;
        top: 0;
        height: 100%;
        width: 240px;
        background: var(--white);
        display: block;
        content: '';
        box-shadow: 0 0 1.25rem rgba(31, 45, 61, .04);
        z-index: -1
    }

    .menu-dark.menu-hover .app-sidebar::before {
        background: #13171f
    }

    .menu-hover .app-container {
        display: inline-block;
        margin-left: 0
    }

    .menu-hover.sidebar-hidden .app-sidebar {
        transform: none;
        margin-left: -240px
    }

    .menu-hover .app-menu {
        overflow: visible !important
    }

    .menu-hover .app-menu .accordion-menu {
        overflow-x: visible
    }

    .menu-hover .app-menu li {
        position: relative
    }

    .menu-hover .app-menu ul>li>a {
        -webkit-transition: padding-right 0s, color .2s ease-in-out, padding-left .2s ease-in-out, filter .2s ease-in-out;
        -moz-transition: padding-right 0s, color .2s ease-in-out, padding-left .2s ease-in-out, filter .2s ease-in-out;
        -o-transition: padding-right 0s, color .2s ease-in-out, padding-left .2s ease-in-out, filter .2s ease-in-out;
        transition: padding-right 0s, color .2s ease-in-out, padding-left .2s ease-in-out, filter .2s ease-in-out
    }

    .menu-hover .app-menu ul>li:hover {
        width: calc(100%+ 20px)
    }

    .menu-hover .app-menu>ul>li:hover>a {
        padding-left: 20px;
        margin-right: 40px;
        color: var(--teal)
    }

    .menu-dark.menu-hover .app-menu>ul>li:hover>a {
        color: #d3daed
    }

    .menu-hover .app-menu ul>li>ul>li:hover>a {
        margin-right: 20px;
        color: #1e1e24;
        font-weight: 500
    }

    .menu-dark.menu-hover .app-menu ul>li ul>li:hover>a {
        color: var(--white)
    }

    .app-menu>ul>li:hover>a>i:not(.has-sub-menu)i {
        filter: invert(34%) sepia(23%) saturate(3309%) hue-rotate(195deg) brightness(109%) contrast(115%)
    }

    .menu-hover .app-menu ul>li>a+.sub-menu {
        display: block !important;
        position: absolute;
        margin-left: 20px;
        top: -15px;
        left: 180px;
        padding: 20px 0;
        background: var(--white);
        box-shadow: 0 0 11px 1px rgba(0, 0, 0, .05);
        -webkit-box-shadow: 0 0 11px 1px rgba(0, 0, 0, .05);
        -moz-box-shadow: 0 0 11px 1px rgba(0, 0, 0, .05);
        min-width: 200px;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out
    }

    .menu-hover.menu-dark .app-menu>ul>li ul {
        background: #1f2433
    }

    .menu-hover .app-menu>ul>li>a+.sub-menu {
        top: -40px;
        left: 270px
    }

    .menu-hover .app-menu>ul>li>a.active+.sub-menu {
        display: none
    }

    .menu-hover .app-menu ul>li:hover>.sub-menu {
        height: auto;
        visibility: visible;
        opacity: 1;
        left: 200px
    }

    .menu-hover .app-menu>ul>li:hover>.sub-menu {
        left: 240px
    }

    .menu-hover .app-menu ul>li>.sub-menu:after {
        position: absolute;
        top: 20px;
        left: -7px;
        right: auto;
        display: inline-block !important;
        border-right: 7px solid var(--white);
        border-bottom: 7px solid transparent;
        border-top: 7px solid transparent;
        content: ''
    }

    .menu-hover.menu-dark .app-menu ul>li>.sub-menu:after {
        border-right-color: #1f2433
    }

    .menu-hover .app-menu>ul>li>.sub-menu:after {
        top: 42.5px
    }
}

@media (max-width:1200px) {
    .search {
        width: calc(100% - 60px);
        left: 30px
    }
}

@media (max-width:1200px) {
    .app-content .content-menu {
        position: absolute !important;
        background: var(--white);
        z-index: 999;
        height: auto;
        border-radius: 10px;
        top: 180px;
        left: 30px;
        border-right: none !important;
        opacity: 0;
        visibility: hidden;
        height: auto !important;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        box-shadow: 0 0 11px 1px rgba(0, 0, 0, .05);
        -webkit-box-shadow: 0 0 11px 1px rgba(0, 0, 0, .05);
        -moz-box-shadow: 0 0 11px 1px rgba(0, 0, 0, .05)
    }

    .app-content .content-menu-toggle {
        display: inline-block
    }

    .app-content .content-menu+.content-wrapper {
        width: 100% !important;
        float: none
    }

    .content-menu-shown .app-content .content-menu {
        opacity: 1;
        visibility: visible
    }

    .app-content .content-menu+.content-wrapper .page-description {
        margin: 0 0 30px !important
    }

    .app-content .content-menu li a.active::after {
        left: 0 !important
    }
}

@media (max-width:1200px) {
    .page-description.d-flex {
        display: block !important
    }

    .page-description .page-description-actions a {
        margin: 20px 0 0
    }
}

@media (min-width:1200px) {
    .placeholder-img-lg {
        font-size: 3.5rem
    }
}

@media (max-width:1200px) {
    .widget-stats-large .widget-stats-large-info-container {
        margin: 0 -1px 0 0;
        border-radius: 0 0 10px 10px
    }
}

@media (min-width:1200px) {
    .mailbox-container {
        height: calc(100vh - 160px)
    }

    .mailbox-container>.card {
        height: 100%
    }
}

@media (min-width:1200px) {
    .todo-container {
        height: calc(100vh - 160px);
        margin-bottom: 0 !important
    }

    .todo-container .row,
    .todo-container .row>div {
        height: 100%
    }
}

@media (max-width:1200px) {
    .app-error .app-error-info {
        width: 100%;
        text-align: center;
        padding: 0
    }

    .app-error .app-error-background {
        display: none
    }
}


@media (max-width:1199px) {
    .todo-list {
        margin: 25px;
        height: auto;
        overflow-y: auto
    }
}

@media (max-width:1199px) {
    .app-container {
        margin-left: 0;
        width: 100%
    }

    .app-header {
        left: 330px;
        width: calc(100% - 360px)
    }

    .full-width-header .app-header {
        left: 240px;
        width: calc(100% - 240px)
    }

    .header-transaprent .app-header {
        left: 240px;
        width: calc(100% - 240px);
        right: auto
    }

    .app.sidebar-hidden.header-transaprent .app-sidebar {
        transform: none;
        margin-left: -240px;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0
    }

    .app:not(.sidebar-hidden) .app-sidebar {
        transform: translateX(-240px)
    }

    .app.sidebar-hidden .app-sidebar {
        transform: translateX(0)
    }

    .app.sidebar-hidden .app-container {
        transform: translateX(240px)
    }

    .app.sidebar-hidden {
        overflow: hidden
    }

    .app-sidebar .logo {
        position: fixed;
        width: 240px;
        transform: translateX(310px);
        height: 70px;
        top: 30px;
        padding-top: 15px;
        padding-bottom: 15px;
        border-radius: 10px;
        background-color: var(--white);
        opacity: 1;
        box-shadow: 0 0 11px 1px rgba(0, 0, 0, .05);
        -webkit-box-shadow: 0 0 11px 1px rgba(0, 0, 0, .05);
        -moz-box-shadow: 0 0 11px 1px rgba(0, 0, 0, .05)
    }

    .app.full-width-header .app-sidebar .logo {
        top: 0;
        left: 0;
        transform: translateX(240px);
        width: 240px;
        padding-left: 60px;
        border-radius: 0;
        background: var(--white);
        color: #293442;
        box-shadow: none
    }

    .app.sidebar-colored .app-sidebar .logo .sidebar-user-switcher .user-info-text,
    .app.sidebar-colored .app-sidebar .logo-icon .logo-text {
        color: #333
    }

    .app.sidebar-colored .app-sidebar .logo {
        background-color: var(--white)
    }

    .app-sidebar .app-menu {
        height: 100% !important
    }

    .header-transaprent .app-sidebar .app-menu {
        margin-top: -70px
    }

    .hide-app-sidebar-mobile {
        visibility: hidden;
        opacity: 0;
        z-index: 1004;
        position: absolute;
        right: 0;
        background: rgba(0, 0, 0, .4);
        left: 0;
        height: 100%;
        content: '';
        display: block;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out
    }

    .sidebar-hidden .hide-app-sidebar-mobile {
        visibility: visible;
        opacity: 1;
        left: 240px
    }

    .header-large .app-sidebar .logo {
        top: 0;
        left: 0;
        transform: translateX(240px);
        border-radius: 0;
        width: 310px;
        box-shadow: none;
        border-right: 1px solid #e3e6ea;
        padding: 15px 40.5px
    }

    .header-large .app-header {
        width: calc(100%+ 60px);
        margin-right: 0;
        left: 0
    }

    .header-large .app-header .navbar {
        margin-left: 310px
    }
}

@media (min-width:1199px) {
    .settings-security-two-factor {
        max-width: 75%
    }
}

@media (max-width:1100px) {
    .hidden-on-mobile {
        display: none !important
    }
}

@media (max-width:991px) {
    .invoice-info {
        margin-bottom: 20px
    }
}

@media (max-width:767px) {
    .content-wrapper .container {
        padding: 0;
    }

    .activity-indicator {

        right: -2px;
    }

    .app-header .language-dropdown {
        min-width: auto;
        position: absolute;
    }

    .navbar-nav {
        display: flex;
        flex-direction: row;
    }

    .app-container {
        padding: 10px
    }

    .app-sidebar .logo img {
        display: none
    }

    .app-sidebar .logo,
    .app.menu-off-canvas .app-sidebar .logo,
    .app.sidebar-hidden .app-sidebar .logo.hidden-sidebar-logo {
        width: 70px;
        transform: translateX(250px);
        top: 10px;
        background-image: url("../images/favicon.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 85%;
        border-radius: 0;
    }

    .app.full-width-header .app-sidebar .logo,
    .app.sidebar-hidden.full-width-header .app-sidebar .logo.hidden-sidebar-logo {
        padding-left: 20px;
        width: 140px;
        padding-right: 20px
    }

    .header-large .app-sidebar .logo {
        width: 130px
    }


    .module-name,
    .app-sidebar .logo-icon .logo-text,
    .app-sidebar .logo .sidebar-user-switcher {
        display: none
    }

    .app-header,
    .app.menu-off-canvas .app-header,
    .header-transaprent .app-header {
        left: 90px;
        width: calc(100% - 100px);
    }

    .full-width-header .app-header {

        left: 140px;
        width: calc(100% - 140px)
    }

    .header-large .app-header {
        margin-top: -10px
    }

    .header-large .app-header .navbar {
        margin-left: 130px
    }

    .search {
        width: calc(100% - 20px);
        left: 10px;
        right: 10px
    }

    .full-width-header.search-visible .search,
    .header-large .search {
        width: 100%;
        left: 0;
        right: 0
    }

    .search-visible .search {
        top: 10px
    }

    .full-width-header.search-visible .search {
        top: 0
    }

    .app-content {
        margin-top: 110px
    }

    .mailbox-open-content-email-attachments .attachments-files-list {
        flex-direction: column
    }

    .mailbox-open-content-email-attachments .attachments-files-list-item {
        margin-bottom: 10px
    }

    .progressbar li {
        width: auto;
    }
}