/******************************
RESPONSIVE STYLES 
******************************/

@media screen and (max-width: 1880px) {
    
}
@media screen and (max-width: 1440px){
    .side-banner {
        width: 42%;
    }
    .side-content {
        width: 58%;
        padding: 45px 50px 25px;
    }
    .container {
        padding: 0 50px;
    }
    body.menu-open .dashboard-content {
        padding-left: 66px;
    }
    .form-wrapper .pass-text-box.floated {
        margin-left: 0;
    }
    .pass-text-box.floated ul + ul{
        margin-left: 20px;
    }
}
@media screen and (max-width: 1250px) {
    .dashboard-stats .stat-box {
        width: calc(33.333% - 15px);
    }
    .stat-box:not(:last-child) {
        margin-right: 22.5px;
        padding: 20px;
    }
    .stat-box .stat-icon {
        width: 80px;
        height: 80px;
        font-size: 40px;
    }
    .pass-floated-row {
        flex-wrap: wrap;
    }
    .form-wrapper .pass-text-box.floated {
        margin: 25px 0 0;
    }
    .pass-text-box.floated ul + ul{
        margin-left: 70px;
    }
}
@media screen and (max-width: 1150px) {
    .side-header .logo {
        max-width: 270px;
    }
    /*.full-height-wrapper, 
    .full-height-wrapper .flexbox {
        height: auto;
    }*/
    .full-height-wrapper .flexbox {
        flex-direction: column;
    }
    .side-content .form-wrapper {
        min-height: 0;
        margin-bottom: 30px;
        padding: 0;
    }
    .side-banner, 
    .side-content{
        width: 100%;
    }
    .side-banner {
        height: 390px;
    }
    .scroll-wrapper {
        width: 100%;
        height: auto;
    }
    .scroll-wrapper .form-wrapper {
        position: static;
    }
    .side-content {
        height: calc(100% - 390px);
    }
    .dashboard-content .container {
        padding: 0 30px;
    }
    .dashboard-container .form-wrapper .form-col:not(:last-child) {
        margin-right: 30px;
    }
    .dashboard-stats .stat-box {
        flex-direction: column;
        text-align: center;
    }
    .stat-box .stat-icon {
        margin: 0 0 15px;
    }
    .stat-box .stat-title {
        font-size: 14px;
        font-weight: bold;
        max-width: 180px;
    }
    .pagination-box a.prev-items {
        margin-right: 15px;
    }
    .table-filter {
        padding-right: 0;
    }
    .pagination-box a.next-items,
    .filter-select + .filter-select {
        margin-left: 15px;
    }
    .highslide-container {
        z-index: 10004 !important;
    }
    .table-details .w-50,
    .table-details tr:not(:first-child) td:last-child {
        display: none;
    }
    .table-details th strong,
    .table-details td strong {
        display: block;
    }
    .dashboard-change-password .pass-text-box {
        margin-left: 40px;
    }

}
@media screen and (max-width: 1000px) { /* Target Screen Width */
    .side-banner {
        height: 320px;
    }
    .side-content {
        height: calc(100% - 320px);
    }
    .dashboard-header,
    .table-filter {
        flex-direction: column;
        align-items: flex-start;
    }
    .dashboard-header > div:first-child,
    .table-filter > .flex-row {
        padding: 0;
        margin-bottom: 25px;
    }
    .pagination-box {
        margin-left: 0;
    }
    .highslide-wrapper .popup-lg {
        padding: 35px 30px 30px;
    }
    .dashboard-change-password .pass-text-box {
        margin: 25px 0 0;
        width: 100%;
    }

}   
@media screen and (max-height: 800px) {
    .highslide-wrapper .popup-lg .popup-main {
        padding-right: 0;
    }
    .highslide-wrapper .popup-lg .popup-main {
        height: auto;
        overflow: auto;
    }
    .highslide-wrapper .popup-lg {
        max-height: 100%;
    }
}
@media screen and (max-width: 900px) {
    .side-header .logo {
        max-width: 220px;
    }
    .side-banner {
        height: 280px;
    }
    .side-content {
        height: calc(100% - 280px);
    }
    .form-wrapper .pass-text-box ul + ul {
        margin-left: 30px;
    }
    .dashboard-menu {
        width: 0;
    }
    .dashboard-content,
    body.menu-open .dashboard-content {
        padding-left: 0;
    }
    .dashboard-container .form-wrapper .form-col:not(:last-child) {
        margin-right: 20px;
    }
    .form-wrapper .search-box .form-col:last-child {
        margin-left: 0;
    }
    .dashboard-container {
        padding: 30px 20px;
    }
    .dashboard-container .dashboard-search {
        padding-bottom: 15px;
    }
    .popup-lg .table-wrapper {
        overflow-x: auto;
    }
    .table-details {
        line-height: 1.7;
    }
    .table-details,
    .table-details th,
    .table-details tr,
    .table-details td,
    .table-details tbody,
    .table-details thead {
        display: block;
        padding: 0;
    }
    .table-details th {
        padding: 0;
        height: auto;
        background: none;
    }
    .table-details th:first-child, 
    .table-details td:first-child {
        padding: 0;
    }
    .table-details th strong, .table-details td strong {
        display: inline-block;
    }
    .table-details thead {
        margin-bottom: 10px;
    }
    .highslide-wrapper .popup-lg .popup-footer {
        padding: 0;
    }
    .table-details .w-340 {
        width: 100%;
    }
}   

@media screen and (max-width: 770px) { /* Tablet View */
    body{
        cursor: pointer; /* iOS Clicking Fix */
    }
    body.menu-open .header-wrapper .logo {
        max-width: 200px;
    }
    .dashboard-content .form-wrapper .form-row.flex-row {
        flex-direction: column;
    }
    .dashboard-search .form-row {
        margin-bottom: 26px;
    }
    .form-wrapper .form-row .form-col {
        width: 100%;
        margin-bottom: 26px;
    }
    .form-wrapper .form-col.w-300 {
        width: 100%;
    }
    .dashboard-change-password .flexbox div {
        width: 100%;
    }
    .dashboard-container .form-wrapper .form-col:not(:last-child) {
        margin-right: 0;
    }
    .form-wrapper .pass-text-box.floated {
        margin-top: 0;
    }
    .dashboard-container .dashboard-search {
        padding-bottom: 0;
    }
    .form-wrapper .form-col.btn-col {
        flex-direction: column;
        align-items: flex-start;
    }
    .form-wrapper .form-col.btn-col span {
        margin: 25px 0 0;
        align-self: center;
    }
    .form-wrapper .form-row .form-col:last-child {
        margin-bottom: 0;
    }
    .btn-row-alt .flex-row {
        flex-direction: column;
        align-items: center;
    }
    .btn-row-alt .flex-row > div {
        margin: 0 0 15px;
    }
    .btn-row-alt .flex-row > div:last-child {
        margin-bottom: 0;
    }
    .popup-default .btn-row-alt {
        margin-bottom: 25px;
    }
    .highslide-wrapper .popup-lg .popup-main {
        padding-right: 0;
    }
    .highslide-wrapper .popup-lg .popup-main {
        height: auto;
        overflow: auto;
    }
    .highslide-wrapper .popup-lg {
        max-height: 100%;
    }
}

@media screen and (max-width: 670px) { /* Phone View */
    h1, h2 {
        font-size: 26px;
    }
    .side-header .logo {
        max-width: 180px;
    }
    .header-wrapper .container {
        padding: 0 30px;
    }
    .side-content {
        padding: 30px 30px 25px;
    }
    .side-content .form-wrapper .pass-text-box ul:first-child {
        margin-left: 0;
    }
    .profile-menu-inner .profile-name {
        display: none;
    }
    .profile-menu-inner {
        padding-right: 15px;
    }
    .profile-menu .sub-menu {
        text-align: left;
        right: -30px;
    }
    .profile-menu .sub-menu:before {
        right: 30px;
    }
    .profile-menu .profile-name {
        color: #4D565C;
        text-align: left;
        font-weight: bold;
        padding: 10px 0;
        font-size: 16px;
        border-bottom: 1px solid #F4F4F5;
    }
    .profile-menu .sub-menu li a {
        padding: 10px 0;
    }
    .profile-name span {
        font-weight: normal;
    }
    .dashboard-menu {
        width: 260px;
        left: -260px;
    }
    body.menu-open .dashboard-menu {
        left: 0;
    }
    .dashboard-menu {
        top: 0;
        z-index: 10003;
    }
    .dashboard-menu .close-menu-btn {
        display: block;
        position: absolute;
        right: 15px;
        top: 20px;
        font-size: 28px;
    }
    .dashboard-menu .inner-box {
        padding-top: 70px;
    }
    .dashboard-menu .logo {
        padding-left: 20px;
        max-width: 200px;
        margin-bottom: 30px;
    }
    .dashboard-title {
        flex-direction: column;
        align-items: flex-start;
    }
    .dashboard-title > div:first-child:not(:only-child) {
        margin-bottom: 20px;
    }
    .dashboard-stats {
        flex-direction: column;
    }
    .dashboard-stats .stat-box {
        width: 100%;
        margin: 0 0 20px;
    }
    .stat-box:not(:last-child) {
        margin-right: 0;
    }
    .dashboard-stats .stat-box:last-child {
        margin-bottom: 0;
    }
    .daterangepicker.show-calendar .drp-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
    .daterangepicker.show-calendar .drp-selected {
        width: 100%;
        margin: 0 0 10px;
        text-align: center;
    }
    .daterangepicker .drp-selected {
        padding-right: 0;
    }
    .dashboard-header > div:last-child {
        flex-direction: column;
        align-items: flex-start;
    }
    .dashboard-header > div:last-child  .btn + .btn {
        margin: 25px 0 0;
    }
    .filter-select, .filter-input {
        display: block;
    }
    .filter-select label, .filter-input label {
        display: none;
    }
}   
@media screen and (max-width: 480px) {
    h1, h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 20px;
    }
    .side-banner {
        height: 250px;
    }
    .side-content {
        height: calc(100% - 250px);
        padding: 30px 15px 25px;
    }
    .container,
    .dashboard-content .container,
    .header-wrapper .container {
        padding: 0 15px;
    }
    .side-content .form-row .form-col {
        width: 100%;
    }
    .form-wrapper .form-row.flex-row,
    .pass-text-box .flex-row {
        flex-direction: column;
    }
    .side-content .form-row .form-col:first-child {
        margin: 0 0 26px;
    }
    .side-content .form-wrapper .pass-text-box ul:first-child {
        margin-bottom: 0;
    }
    .form-wrapper .pass-text-box ul + ul,
    .side-content .form-wrapper .pass-text-box ul + ul {
        margin: 0;
    }
    .side-footer p span {
        display: block;
    }
    .highslide-wrapper .popup-default .popup-top i {
        font-size: 44px;
    }
    .dashboard-content {
        padding-bottom: 50px;
    }
    .btn-row-alt .flex-row > div {
        flex-direction: column;
    }
    .btn-row-alt .tip-label {
        margin: 10px 0 0;
    }
    .highslide-wrapper .popup-default {
        padding: 70px 15px 50px;
    }
    .highslide-wrapper .popup-lg {
        padding: 35px 15px 30px;
    }
    .dashboard-footer {
        padding: 30px 0 0;
    }
}
@media screen and (max-width: 360px) {
    .btn {
        font-size: 16px;
        padding: 13px 15px;
    }
    .side-header {
        font-size: 17px;
    }
    .side-header .logo {
        max-width: 160px;
    }
    .side-header p br {
        display: none;
    }
    .side-content .btn {
        width: 100%;
    }
    .dashboard-title .datepicker-field input {
        padding-left: 30px;
    }
    .dashboard-title .datepicker-field:before {
        left: 10px;
    }
    .dashboard-title > div:nth-child(2) {
        min-width: 290px;
    }
    .dashboard-container {
        padding: 25px 15px;
    }
    .table-filter > .flex-row {
        display: block;
    }
    .filter-select + .filter-select {
        margin: 25px 0 0;
    }
    .btn.btn-notice i {
        font-size: 20px;
        margin-right: 8px;
        vertical-align: text-bottom;
    }
    .popup-default .btn-row-alt + .align-left {
        min-height: 75px;
        text-align: center !important;
    }
    .dashboard-footer .flex-row {
        flex-direction: column;
    }
    .dashboard-footer .flex-row .btn + .btn {
        margin: 25px 0 0;
    }
}