@media (max-width:1441px) {
    html {
        font-size: 14px
    }

    .h3, h3 {
        font-size: 1.15rem
    }

    .h5, h5 {
        font-size: 1rem
    }

    .page-informer, .page-title i {
        font-size: .85rem
    }

    .side-menu.left {
        width: 185px
    }

    .dashboard-welcoming {
        font-size: 1.75rem
    }

    #dealerGroupHolder > span:first-child {
        margin-left: 10px;
    }

    #dealerGroupHolder > span {
        height: 50px;
        min-width: 50px;
        margin-bottom: -7px;
        background-size: cover !important;
        background-position-y: bottom;
    }

    .content-bars.single {
        height: 55px;
        max-width: 4vw;
        min-width: 290px;
    }

        .content-bars.single > div.content-bar {
            width: 100%;
            height: 100%;
            min-height: initial;
        }

    .content-bars > .content-bar > div.content-number-holder > span:first-child {
        font-size: 27px;
        line-height: 20px;
        display: block;
        color: #0c1b24bd;
        font-weight: 700;
    }

    .content-bars > .content-bar > div.content-number-holder > span.small, .content-bars > .content-bar > div.content-number-holder > span:nth-child(3) {
        font-size: 12px;
        display: block;
        margin-top: -6px;
    }

    .dashboard-count {
        font-size: 20px
    }

    .dashboard-chart .dashboard-chart-lines > span {
        padding-bottom: calc(10% + 17px)
    }

    .table-holder table.rich-table td {
        max-width: 10vw
    }

    .chart-descriptions .color-descriptions {
        width: 15px !important;
        height: 15px !important
    }

    .color-descriptions + span {
        padding: 0 5px;
        font-size: 10px;
        line-height: 15px
    }

    .dashboard-boxes > div:nth-child(2), .dashboard-boxes > div:nth-child(3) {
        padding: 10px 20px
    }

    .dashboard-boxes.smaller-box > div:nth-child(2) {
        padding-bottom: 20px;
        padding-top: 0
    }

    input[type=radio] + label:before, input[type=radio]:checked + label:before {
        height: 20px;
        width: 35px
    }

    .button-group input[type=radio] + label {
        padding: .5px 30px;
        font-size: 11px
    }

    #sidebar-menu ul ul ul a:before {
        margin-right: 5px
    }

    #sidebar-menu ul li.has_sub ul li ul li:first-child a {
        padding-top: 5px;
        padding-bottom: 2px
    }

    #sidebar-menu ul li.has_sub ul li ul li a {
        padding-top: 0;
        padding-bottom: 2px;
        padding-left: 20px
    }

    .content-page {
        margin-left: 185px
    }

    .page-informer {
        margin-bottom: 5px
    }

    .table-holder table td.button-cell a img {
        height: 18px
    }

    .button-group input[type=radio] + label {
        height: 25px;
        line-height: 21px
    }

    #sidebar-menu .hamburger {
        right: 11px;
        top: 11px;
        height: 23px;
        font-size: 18px;
        width: 30px
    }

    #sidebar-menu #mikro-logo-holder {
        width: 60px;
        height: 60px;
        margin-left: 50%;
        margin-top: 60px;
        margin-bottom: 7vh
    }

    #sidebar-menu #user-area {
        width: 150px;
        min-height: 30px;
        padding: 0 10px;
        font-size: .85rem
    }

        #sidebar-menu #user-area:hover a {
            height: 30px;
            line-height: 30px
        }

        #sidebar-menu #user-area i, #sidebar-menu #user-area > span {
            line-height: 30px
        }

    #sidebar-menu ul ul a {
        padding: 5px 10px 5px 20px;
        font-size: .75rem
    }

    #sidebar-menu > ul > li > a > span {
        font-size: .75rem;
        line-height: 20px
    }

    #sidebar-menu > ul > li > a {
        padding: 4px 16px
    }

    #sidebar-menu .sidebar-footer a, #sidebar-menu .sidebar-footer span {
        color: hsla(206,25%,40%,1);
        line-height: .8rem;
        font-size: .65rem
    }

    .container-fluid {
        padding: 5px 15px
    }

    .fast-forward-holder {
        bottom: 8px;
        right: 16px
    }

        .fast-forward-holder button {
            width: 35px;
            height: 35px;
            font-size: 18px
        }

    .filter-select {
        height: 25px
    }

    .table-holder table th {
        padding: 2px .75rem;
        font-size: .8rem
    }

    .table-holder table td {
        line-height: 19px;
        font-size: .75rem
    }

        .table-holder table td.button-cell a {
            height: 19px;
            line-height: 19px;
            font-size: .8rem
        }

    .table-slim th {
        font-size: .85rem;
        white-space: nowrap
    }

    .table-slim td {
        padding: 2px 0;
        font-size: .8rem
    }

    .form-input input, .form-input select {
        height: 25px;
        padding: .3rem .75rem .375rem .75rem;
        font-size: .85rem
    }

    .single-input input {
        height: 40px;
        margin: 0;
        font-size: 16px
    }

    .search-button.rounded {
        height: 30px;
        width: 30px;
        right: 25px;
        top: 5px
    }

    .informer {
        float: right;
        margin-top: 2px;
        font-size: 11px
    }

    #sidebar-menu > ul > li > a > i, #sidebar-menu > ul > li > a > img {
        font-size: 18px;
        line-height: 17px;
        margin-right: 10px;
        width: 16px
    }

    .card-body .card-title, .search-button {
        font-size: .85rem
    }

    .search-button {
        height: 25px;
        line-height: 24px;
        padding: 0 20px
    }

    .card.card-with-tabs .card-title a {
        line-height: 13px;
        top: 3px
    }

    .card.card-with-tabs .card-tabs {
        margin-top: 10px
    }

    .btn-toggle {
        margin: 0 2.5rem;
        height: 1.3rem;
        width: 1.9rem
    }

        .btn-toggle:after, .btn-toggle:before {
            color: #000;
            font-size: .7rem;
            letter-spacing: 0;
            width: 2.2rem
        }

        .btn-toggle:before {
            left: -2.4rem
        }

        .btn-toggle:after {
            right: -2.4rem
        }

        .btn-toggle.active > .handle {
            left: .875rem;
            width: .875rem;
            height: .875rem
        }

    .card.card-with-tabs .card-tabs li {
        line-height: 30px;
        font-size: 1rem
    }

    .image-circle {
        width: 60px;
        height: 60px;
        border: 1px dashed #0c1b23;
        padding: 5px
    }

    .card.card-with-tabs .card-tab-content {
        padding: 15px 15px 5px;
        font-size: .85rem
    }

    .brach-actions button {
        font-size: .8rem;
        padding: .25rem 1rem;
        margin-bottom: 5px !important
    }

    .dashboard-chart {
        padding: 15px 1vw
    }

        .dashboard-chart .dashboard-chart-lines > span:after {
            width: calc(100% - 35px)
        }

    div.dashboard-others > div:nth-child(3), div.dashboard-pink > div:nth-child(3), div.dashboard-purple > div:nth-child(3) {
        padding: 0;
        font-size: 16px
    }

    .dashboard-percantage-holder {
        height: 45px;
        width: 45px;
        right: 25px;
        top: 10px;
        padding-top: 10px !important
    }

    .dashboard-chart .dashboard-chart-header {
        font-size: 16px
    }

    .dashboard-chart.smaller-content {
        font-size: 12px
    }

    .dashboard-blue > div:nth-child(2), .dashboard-others > div:nth-child(2), .dashboard-pink > div:nth-child(2), .dashboard-purple > div:nth-child(2) {
        background: #fdfdfd;
        color: #3f4b51;
        padding: 25px 20px
    }

    .dashboard-small-text {
        font-size: 11px
    }
}

@media (min-width:1340px) {
    .container-fluid {
        padding: 14px 15px 5px
    }
}

@media (min-width:421px) {
    .only-mobile {
        display: none !important
    }
}

@media (max-width:421px) {
    .form-holder .login-logo-holder {
        bottom: 1%;
    }

    .form-holder .main-container {
        padding: 90px 38px 45px 38px;
        width: calc(100vw - 20px);
        border-radius: 8px;
    }

    .content-page {
        margin-left: 65px;
    }

    .enlarged #sidebar-menu #mikro-logo-holder img {
        width: 100%
    }

    .enlarged #sidebar-menu .search-holder input:focus {
        width: 90vw;
        border-radius: 25px;
        padding-left: 45px
    }

    .enlarged #sidebar-menu .search-holder input:after {
        content: "\f002";
        font: normal normal normal 14px/1 FontAwesome;
        display: inline-block;
        width: 25px;
        height: 25px;
        background: red;
        color: red
    }

    .enlarged #sidebar-menu .search-holder input::-webkit-input-placeholder {
        color: #26343f
    }

    .enlarged #sidebar-menu .search-holder input::-moz-placeholder {
        color: #26343f
    }

    .enlarged #sidebar-menu .search-holder input:-ms-input-placeholder {
        color: #26343f
    }

    .enlarged #sidebar-menu .search-holder input:-moz-placeholder {
        color: #26343f
    }

    .enlarged #sidebar-menu .search-holder {
        position: relative
    }

        .enlarged #sidebar-menu .search-holder:after {
            content: "\f002";
            font: normal normal normal 14px/1 FontAwesome;
            position: absolute;
            top: 14px;
            left: 15px;
            font-size: 20px;
            color: #fff;
            pointer-events: none
        }

    input[type=radio] + label {
        padding: 9.5px 7px
    }

    .alert-info {
        font-size: 11px;
        padding: 10px
    }

    .side-menu.left {
        z-index: 99;
        width: 310px
    }

    #sidebar-menu #mikro-logo-holder {
        margin-top: 35px;
        margin-bottom: 35px;
    }

    .search-holder input {
        margin: 5px 0
    }

    .history-holder {
        right: 25px
    }

        .history-holder button + ul {
            min-width: 73vw
        }

    .filter-button {
        background: #26343f;
        border: 1px solid #26343f;
        box-shadow: 4px 5px 8px 0 rgba(0,0,0,.08);
        color: #fff;
        border-radius: 100%;
        width: 45px;
        height: 45px;
        font-size: 20px;
        outline: 0
    }

    .filter-holder {
        display: none
    }

    .table-holder table td {
        max-width: 300px
    }

    .table-holder .card-body {
        max-width: 80vw;
        overflow: auto
    }

    .card-body .card-title {
        font-size: 12px;
        padding-left: 0
    }

        .card-body .card-title h3 {
            font-size: 1.05rem
        }

    #userDetailTable {
        font-size: .8rem
    }

        #userDetailTable tr {
            display: inline-block;
            margin-bottom: 1rem
        }

        #userDetailTable td {
            padding: 0;
            width: 100%;
            display: inline-block
        }

            #userDetailTable td:first-child {
                font-weight: 700;
                margin-bottom: .3rem
            }

    .content-bars {
        display: block;
    }

        .content-bars > .content-bar {
            display: block;
            margin-bottom: 10px;
            margin-right: 0;
        }

    #notificationContent {
        left: 10px;
        right: 10px;
        transform: none;
        top: 10px;
        bottom: 10px;
        width: initial;
        box-shadow: 0 0 0vw 20px rgba(0, 0, 0, 0.82);
    }

    .owl-carousel.owl-drag .owl-item {
        max-height: calc(100vh - 100px);
        overflow-x: hidden;
    }

        .owl-carousel.owl-drag .owl-item img {
            width: calc(100vw - 65px);
            display: block;
        }

    .filter-form-inputs > div {
        margin-right: 0;
    }

        .filter-form-inputs > div.margin-bottom {
            margin-bottom: 10px;
        }

    .filter-form-inputs .search-button {
        float: right;
    }

    .content-bars > .content-bar {
        min-height: 69px;
    }

        .content-bars > .content-bar > div.content-number-holder {
            height: 69px;
        }

    .dashboard-welcoming + span {
        line-height: 16px;
    }

    .partner-type-badges {
        width: 100%;
        text-align: left;
    }

    #dealerGroupHolder > span {
        margin-right: 0;
        min-width: 60px;
    }

    .dashboard-chart {
        padding: 15px 10px;
    }

        .dashboard-chart .dashboard-chart-lines > span {
            padding-bottom: 20px;
        }

        .dashboard-chart .dashboard-graphs {
            width: calc(100% - 54px);
            left: 30px;
        }

    .dashboard-chart-value {
        min-width: 29px;
    }

    .dashboard-chart .dashboard-graphs > span {
        min-width: 29px;
    }

    .small-radial-chart {
        margin-top: 20px;
    }

    #sidebar-menu .hamburger {
        right: 17px;
    }

    #sidebar-menu #user-area i, #sidebar-menu #user-area > span {
        line-height: 29px;
    }

    .enlarged #sidebar-menu #user-area i, #sidebar-menu #user-area > span {
        line-height: 45px;
    }

    .enlarged #sidebar-menu > ul > li > a {
        text-align: center;
    }

    #sidebar-menu #side-menu {
        max-height: 507px;
        overflow: overlay;
    }

    #sidebar-menu > ul > li > a {
        text-align: left;
        line-height: 36px;
        height: 47px;
    }

        #sidebar-menu > ul > li > a > span {
            font-size: 18px;
            margin-left: 13px;
            line-height: 22px;
        }

        #sidebar-menu > ul > li > a > i, #sidebar-menu > ul > li > a > img {
            margin-left: 0;
            margin-right: 0;
            width: 22px;
        }

    #sidebar-menu ul ul a {
        padding: 5px 10px 5px 20px;
        font-size: 18px;
    }

    #sidebar-menu ul ul ul a:before {
        margin-right: 5px;
        position: relative;
        top: -3px;
    }

    #sidebar-menu, #sidebar-menu #side-menu > li {
        line-height: 40px;
    }

        #sidebar-menu .sidebar-footer a, #sidebar-menu .sidebar-footer span {
            color: hsla(206,25%,40%,1);
            line-height: 20px;
            font-size: 15px;
        }
}

@media (max-width:390px) {
    h3 {
        font-size: 1.25rem
    }

    .card-body {
        padding: 1.25rem 0
    }

    #sidebar-menu > ul > li > a {
        padding: 10px 21px
    }
}