/* Mobile */
@media (max-width: 280px) {
    .login .d-block.justify-content-center {
        height: 100vh!important;
    }
}

@media (max-width: 767px) {
    .h1, h1 {
        font-size: 2rem;
    }

    body {
        background-color: #fff;
    }

    header {
        background-color: #fff;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 99999;
    }

    .mobile-only .navbar {
        position: unset;
    }

    .mobile-only .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        min-width: auto;
        z-index: 9999;
        background-color: #fff;
        padding: 25px;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        border-radius: 10px;
        list-style-type: none;
        text-align: center;
    }

    .mobile-only .btn-secondary, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
        color: #fff;
        background-color: transparent;
        border-color: transparent;
        padding: 0;
        max-width: 25px;
    }

    .mobile-only .dropdown-menu {
        position: static;
        top: 100%;
        left: 0;
        z-index: 1000;
        float: left;
        min-width: 100%;
        padding: 10px 0;
        margin: 0;
        font-size: 1rem;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 0;
        border-radius: .25rem;
        right: 0;
        text-align: center;
    }

    .mobile-only .btn-secondary:not(:disabled):not(.disabled).active:focus, .mobile-only .btn-secondary:not(:disabled):not(.disabled):active:focus, .mobile-only .show>.btn-secondary.dropdown-toggle:focus {
        box-shadow: none;
    }

    .mobile-only .collapse a, .dropdown.second-dropdown {
        color: #153A5B;
        font-size: 17px;
        line-height: 30px;
    }

    .mobile-only .btn-secondary img {
        width: 65%;
        height: auto;
    }

    .mobile-only .profile-img img {
        width: 30%;
    }

    .bg-light {
        background-color: transparent;
        padding: 0;
    }

    .mobi-0, .dropleft .dropdown-toggle::before {
        display: none;
    }

    .navbar-light .navbar-toggler {
        color: #071B33;
        border-color: transparent;
        font-size: 25px;
        padding: 0;
    }

    .navbar-light .navbar-nav .nav-link {
        font-size: 20px;
    }

    .dropleft .dropdown-menu {
        right: 100%;
        left: auto;
        min-width: 14rem;
        top: -10px!important;
        border: 0;
    }

    .close {
        float: right;
        font-size: 40px;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .card {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    }

    .shadow-0 {
        box-shadow: none!important;
    }

    .filter-row .col {
        padding: 0;
    }

    #search {
        width: 100%!important;
    }

    #content {
        padding-top: 20%;
    }

    .all-clients-page .table thead th {
        display: none;
    }

    .disabled-row:after {
        width: 70%;
        left: 0px;
    }

    .client-settings-page .container-fluid {
        padding: 0;
    }

    .client-settings-page .card .media .card-title {
        line-height: 60px;
        border-right: 0!important;
    }

    .comm-preferences .selected i, .comm-preferences i {
        font-size: 30px;
    }

    .chart-date {
        float: left;
        margin-top: 15px;
    }

    .company-profile-setup .form-group .btn-primary.orange {
        padding: 10px!important;
    }

    .image-upload-wrap i {
        font-size: 80px;
    }

    .file-upload {
        height: 300px;
    }

    .input-group-prepend {
        margin-right: 5px;
    }

    #accountingPackageModal .modal-title {
        line-height: 30px;
        font-size: 30px;
    }

    #accountingPackageModal .modal-body img {
        width: 90%;
        height: auto;
    }

    .history-actions .border-right {
        border-right: 0!important;
    }

    .scroll-height .table tr {
        border-bottom: 1px solid #dee2e6!important;
    }
    
    .scroll-height .table td {
        width: 100%;
        display: block;
        padding: 5px 0;
        vertical-align: middle;
    }
}

/* Tablet & small screens: */
@media (min-width: 768px) and (max-width: 991px) {
    .mobi-0 {
        display: none;
    }

    .h1, h1 {
        font-size: 2rem;
    }

    .h2, h2 {
        font-size: 1.5rem;
    }
    
    header .nav-link {
        display: block;
        padding: 0px;
        vertical-align: middle;
        line-height: 40px;
        width: 40px;
        text-align: center;
    }

    header .nav-link i {
        font-size: 20px;
    }

    .navbar .media p {
        font-size: 18px;
        font-weight: 300;
    }

    #viewport {
        padding-left: 210px;
    }

    .table thead th {
        min-width: 220px;
    }

    .table thead th.radio-head {
        min-width: 50px!important;
    }

    .action-btns-head {
        min-width: 100px!important;
    }

    .search-row .text-right {
        text-align: left!important;
    }
    
    .dropleft .dropdown-toggle::before {
        display: none;
    }

    .action-btns {
        text-align: left;
    }

    .action-btns i {
        font-size: 25px!important;
    }

    .table .dropleft .dropdown-menu.more-icons, .dropdown-menu.more-icons {
        top: 0;
        right: 100%;
        left: auto;
        margin-top: 0;
        margin-right: 0;
        min-width: 16rem;
    }

    .table-responsive {
        overflow-x: scroll;
    }

    .table-responsive::-webkit-scrollbar {
        height: 5px;
        width: 0.5em!important;
        border-radius: 50px;
    }
     
    .table-responsive::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
        height: 5px;
        background-color: transparent;
    }
     
    .table-responsive::-webkit-scrollbar-thumb {
        border-radius: 50px;
        background-color: #DBDBDB;
        outline: none;
        height: 5px;
    }

    .accordion_arrow {
        width: 60px;
    }
    
    .chart-date {
        font-weight: 400;
        font-size: 18px;
        width: auto;
        min-width: 300px;
        float: left!important;
        margin-top: 20px;
    }

    .client-nav .nav-link, .client-nav .nav-link.active {
        padding: 0;
        font-size: 17px;
        line-height: 40px;
    }

    .client-nav li {
        width: 100%;
        border-right: 0!important;
    }
    
    .client-nav .nav-link i {
        font-size: 25px;
    }

    .custom-control-label::before {
        width: 1rem;
        height: 1rem;
    }

    .search-row .form-control {
        width: 100%!important;
    }

    #search {
        width: 100%!important;
    }

    .collapsible-table .card {
        border: 0;
        max-width: 100%;
    }

    .collapsible-section-header {
        line-height: 25px;
        vertical-align: middle;
    }

    .collapse {
        background-color: #F2F9FF;
        height: 240px;
        padding-bottom: 0;
    }

    .comm-preferences .absolute-icon i {
        font-size: 25px!important;
    }

    .absolute-icon {
        position: absolute;
        right: 5px;
        top: 5px;
        color: #7D8E9E;
    }

    .history-actions, .history-actions .col-md-12 {
        border: 0!important;
    }

    .history-actions .actions-right-div {
        padding: 20px 0 0 15px;
    }

    .current-unallocated-interest .disabled-row:after {
        left: 0;
        top: 25px;
    }

    .file-upload {
        height: 300px;
    }

    .image-upload-wrap i {
        font-size: 80px;
    }

    .modal-body img {
        width: 80%;
        height: auto;
    }

    .login-logo {
        text-align: center;
    }    

    .login-logo img {
        width: 45%;
    }

    .client-settings-page .card .media {
        min-height: auto;
    }

    .chart-date input {
        min-width: 450px;
    }

    #paymentHistoryModal i {
        font-size: 20px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .h1, h1 {
        font-size: 25px;
    }

    .h5, h5 {
        font-size: 20px;
    }

    .search-row .btn-primary.blue, .search-row .btn-primary.orange {
        padding: 9px 7px!important;
    }

    header .nav-link {
        line-height: 40px;
        width: 40px;
        font-size: 20px;
    }

    .home-section-1 .card {
        min-height: 175px;
    }

    .home-section-1 .card .card-body {
        padding:10px;
    }

    .home-section-1 .card h5 {
        font-size: 16px;
    }

    .home-section-1 .card h2.h1 {
        font-size: 20px;
    }

    .dropleft .dropdown-toggle::before {
        display: none;
    }

    .table .dropleft .dropdown-menu.more-icons, .dropdown-menu.more-icons {
        right: 100%;
        min-width: 14rem;
        top: -10px!important;
        left: 0px!important;
    }

    .table thead th {
        min-width: 170px;
    }

    .table thead th.column-smaller {
        min-width: 140px;
    }

    .table td {
        min-width: 180px;
    }

    .table td.column-smaller {
        min-width: 140px;
    }

    .all-clients-page .table td:first-child, .scheduled-allocation .table td:first-child, .manual-allocations-page .table td:first-child {
        min-width: 0;
    }

    .lrg-icon {
        font-size: 40px;
        line-height: 80px;
    }

    .cards-w-icons .orange-txt {
        font-size: 30px;
    }

    .datepicker table tr td span {
        display: block;
        width: 23%!important;
        height: 40px!important;
        line-height: 45px!important;
    }

    .action-btns-head {
        min-width: 100px!important;
    }

    .radio-head {
        min-width: 40px!important;
    }

    .client-nav .nav-link.active {
        padding: 0;
    }

    .client-nav .nav-link {
        font-size: 17px;
    }

    .client-nav .nav-link i {
        font-size: 25px;
    }

    .search-row .form-control {
        width: 100%!important;
    }

    #search {
        width: 100%!important;
    }

    .collapsible-section-header {
        line-height: 25px;
        vertical-align: middle;
    }

    .disabled-row:after {
        width: 75%;
        left: 33px;
        top: 21px;
    }

    .current-unallocated-interest .disabled-row:after {
        width: 75%;
        left: 0px;
        top: 25px;
    }

    .client-settings .card {
        border: 0;
        max-height: 140px;
        min-height: 140px;
    }    

    .chart-date {
        min-width: 200px;
        text-align: right;
    }

    .chart-date input {
        min-width: 200px;
    }

    .unallocated-allocated-interest-history h5, .unallocated-allocated-interest-history .h5 {
        font-size: 20px!important;
    }

    .history-actions, .history-actions .col-lg-12 {
        border: 0!important;
    }

    .history-actions .actions-right-div {
        padding: 60px 0 0 15px;
    }

    .scheduled-allocation .table thead th {
        min-width: 240px;
    }

    .table td.action-btns {
        text-align: left;
        border-bottom: 0;
    }

    .collapsible-table .card {
        border: 0;
        max-width: 100%;
    }

    .table-responsive::-webkit-scrollbar {
        height: 5px;
        width: 0.5em!important;
        border-radius: 50px;
    }
     
    .table-responsive::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
        height: 5px;
        background-color: transparent;
    }
     
    .table-responsive::-webkit-scrollbar-thumb {
        border-radius: 50px;
        background-color: #DBDBDB;
        outline: none;
        height: 5px;
    }

    .file-upload {
        height: 300px;
    }

    .image-upload-wrap i {
        font-size: 100px;
        color: #E4EBF2;
    }

    .payment-settings .table thead th {
        min-width:140px;
    }

    .user-management .table thead th {
        min-width: 250px;
    }

    .client-settings-page .card-body {
        padding: 0.8rem;
    }

    .client-settings-page .card .media .card-title {
        line-height: 90px;
        font-size: 30px;
    }

    .client-settings-page .card .media {
        min-height: 60px;
    }

    .login .d-block.justify-content-center {
        height: 85vh;
    }

    .toast-header .close {
        float: right;
        font-size: 30px;
        font-weight: 400;
        line-height: 1;
        color: #E4EBF2;
        text-shadow: 0 1px 0 #fff;
        opacity: 1;
        position: absolute;
        top: 0px;
        right: 10px;
    }
}

/* Laptop: */
@media (min-width: 1200px) and (max-width: 1600px) {
    header .nav-link {
        line-height: 40px;
        width: 40px;
    }

    header .nav-link.start-interest-run i {
        font-size: 20px;
        width: 10px;
        text-align: center;
        height: 18px;
        vertical-align: middle;
    }

    header .nav-link i {
        font-size: 20px;
    }

    .home-section-1 .card {
        min-height: 210px;
    }

    .home-section-1 .card h5 {
        font-size: 18px;
    }

    .home-section-1 h1, .home-section-1 .h1 {
        font-size: 25px;
    }

    .table thead th {
        min-width: 200px;
    }

    .all-customers-table thead th {
        min-width: 70px!important;
        max-width: 75px!important;
    }

    .all-customers-table thead th.radio-head {
        min-width: 20px!important;
        max-width: 20px!important;
    }

    /* .all-customers-table .select2-container {
        width: 100%!important;
    } */

    .action-btns-head {
        text-align: right;
    }

    .table-responsive::-webkit-scrollbar {
        height:10px;
        width: 0.5em!important;
        border-radius: 50px;
    }
     
    .table-responsive::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
        height: 10px;
        background-color: transparent;
    }
     
    .table-responsive::-webkit-scrollbar-thumb {
        border-radius: 50px;
        background-color: #DBDBDB;
        outline: none;
        height: 10px;
    }

    .lrg-icon {
        font-size: 40px;
    }

    .lrg-icon-txt {
        font-size: 30px;
    }

    .light-grey-icon i {
        font-size: 20px;
    }

    .cards-w-icons .card {
        min-height: 170px;
    }

    .table thead th.radio-head {
        min-width: 40px;
    }

    .disabled-row:after {
        width:79%;
    }

    .collapsible-table .card {
        border: 0;
        max-width: 100%;
    }

    .table tbody+tbody {
        border-top: 0;
    }

    .collapsible-section-header {
        line-height: 23px;
        vertical-align: middle;
    }

    .collapsible-table td.action-btns {
        border-top: 0;
        border-bottom: 0!important;
    }

    #sidebar .dropdown-menu {
        max-height: 230px;
        overflow-y: scroll;
        /* bottom: 0;
        min-height: 230px; */
    }

    .current-unallocated-interest .disabled-row:after {
        width: 80%;
        left: 0px;
        top: 25px;
    }

    .current-unallocated-interest .table thead th {
        min-width: 150px;
    }

    .current-unallocated-interest .table td.action-btns {
        border-bottom: 1px solid #E4EBF2;
    }

    .absolute-icon i {
        font-size: 17px!important;
    }

    .scroll-height .table td {
        width: auto;
        padding-right: 20px;
    }

    .image-upload-wrap i {
        font-size: 100px;
        color: #E4EBF2;
    }

    .custom-select {
        background: url('/app/images/angle-down-light.png') 96% / 15px 9px no-repeat;
    }

    .client-settings .h1 {
        font-size: 1.8rem;
    }

    .client-settings .h5, .client-settings h5 {
        font-size: 1rem;
    }

    .client-settings .card-body {
        padding: 1rem;
    }

    .client-settings-page .card .media .media-body h5 {
        line-height: 20px;
        padding-top: 25%;
    }

    .history-actions .actions-right-div .h4 {
        margin-top: 11%;
    }

    .history-actions .actions-right-div {
        padding: 0px 0 0 40px;
    }

   .modal-body img {
        width: 70%;
        height: auto;
    }

    .history-actions .actions-right-div {
        padding: 0px 0 0 20px;
    }
}

@media (min-width: 1400px) and (max-width: 1600px) {
    .home-section-1 .card {
        border: 0;
        min-height: 160px;
    }

    .cards-w-icons .card {
        min-height: 140px;
    }

    .table thead th {
        min-width: 200px;
    }

    .action-btns i {
        padding: 0 8px;
    }
}