{literal}
/*Responsive styles*/
/* @import "css/bootstrap-grid.min.css"; */

@media screen and  (max-width: 1330px) {
    .order-info-row .form-field {
        /*font-size: 16px;*/
    }
}

@media screen and  (max-width: 991px) {

    .site-header {
        padding-top: 50px;
        position: relative;
    }
    .nav-user li a {
        border-top: none;
    }

    .archive .page-title {
        min-height: 55px;
    }
    .paging {
        padding: 0 15px;
    }
    .status_info {
        padding: 0 15px 20px;
    }
    .footer {
        padding: 30px 15px;
    }
    .form-inline_label {
        margin-right: 10px;
    }
    .page-title {
        margin-top: 0;
    }
    .page-title h1 {
        display: flex;
        align-items: center;
        margin-right: auto;
    }
    .header {
        position: relative;
        -webkit-background-size: contain;
        background-size: contain;

        background: none;
    }

    .header .logo {
        margin-top: 40px;
    }

    .header .logo img {
        max-width: 100%;
    }

    .row-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        display: flex;
        border-bottom: solid 1px #e1e1e1;
        z-index: 99999;
    }

    .header .index_notifications, .site-header .index_notifications {
        flex-grow: 3;
        width: 75%;
        display: flex;
        flex-direction: row-reverse;

    }

    .header .index_notifications > *, .site-header .index_notifications > * {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33.33333%;
        border-right: 1px solid #e1e1e1;
        height: 40px;
    }

    .header .index_notifications a, .site-header .index_notifications a {
        font-size: 0 !important;
    }

    .header .index_notifications a.icon-logout, .site-header .index_notifications a.icon-logout {
        background: none;
        padding: 0;
    }

    .header .index_notifications .fa-stack[data-count]:after, .site-header .index_notifications .fa-stack[data-count]:after {
        left: calc(50% + 10px);
        top: 10px;
    }

    .navigation-button-toggler {
        flex-grow: 1;
        width: 25%;
        height: 40px;
        display: flex;
        justify-content: center;
    }

    .nav-user {
        position: absolute;
        top: calc(50% + 20px);
        right: 20px;

        transform: translateY(-19px);
    }

    .nav-user-dashboard {
        display: none;
    }
    .nav-user-accounts,
    .nav-user-settings {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background-color: #002c57;

    }

    .header .nav-user-accounts a,
    .site-header .nav-user-accounts a,
    .header .nav-user-settings a,
    .site-header .nav-user-settings a {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;

        padding: 0;
        margin: 0;
        background: none;
    }
    .nav-user-accounts span,
    .nav-user-settings span {
        display: none;
    }

    /* Gear SVG has a tight viewBox (no internal padding) — scale it down
       so it visually matches the Accounts icon inside the 38px circle. */
    .nav-user-settings .user-accounts-icon {
        width: 20px;
        height: 20px;
    }

    .sidebar {
        padding: 0;
    }

    .sidebar > ul {
        display: none;
    }

    .main {
        width: 100%;
        max-width: none;
    }

    div.content {
        padding: 15px;
    }

    .page-title {
        padding: 0 6px 0 .5rem;
    }

    .btn-actions {
        margin-top: 12px;
        /*margin-left: auto;*/
        margin-bottom: 8px;
    }

    .wlm-orders fieldset.bordered {
        padding: 20px 15px 24px;
    }

    /*Order Edit*/
    .order-info {
        padding: 0 15px;
    }

    .page-title .actions {
        max-height: 0;
        transition: max-height 0.25s ease-out;
        overflow: hidden;

        display: flex;
        flex-direction: column;
        width: 100%;
        padding-bottom: 0;

    }

    .page-title .actions.active {
        max-height: 1500px;
        transition: max-height 0.25s ease-in;
    }

    .page-title .actions a {
        padding-bottom: 6px;
    }

    .archive .data.hovered tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, .05);
    }
    .wlm_updated fieldset.bordered {
        padding-left: 10px;
        padding-right: 10px;
    }
    .wlm .emt-title-control-wrapper {
        padding-left: 15px;
    }

    .emt-course-info {
        padding-left: 15px;
        padding-right: 15px;
    }
    /*.login .content {
        width: 100%;
    }
    .login .form-row {
        margin: 0.2em 0 1em;
    }
    .login .header .logo {
        margin-top: 0;
    }*/
    /*Reminders Calendar*/
    .fc .fc-toolbar.fc-header-toolbar {
        margin-top: 1.25em;
        margin-left: .5rem;
        margin-right: .5rem;
    }

    .fc-daygrid-event div div[style="display: flex;"] {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }
    .fc-daygrid-dot-event .fc-event-time {
        font-size: 10px;
    }
    .fc-daygrid-dot-event .fc-event-title {
        text-align: center;
    }
    .fc-daygrid-dot-event .fc-event-title span[style="float: right;"]{
        width: 50%;
    }
    .warning_red_full {
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        padding: 15px;
    }
    .form-row {
        margin: .2em 0 0.25em;
        /* overflow: hidden; */
    }

}

@media screen and  (min-width: 992px) {
    .order_aha {
        margin-right: 10px;
    }
    .page-title .actions a {
        margin-left: 1.5em;
    }
    .header {
        /*width: calc(100% - 40px);*/
        width: 80%;
    }

    .header ul li a,
    .header ul li strong {
        float: left;
        height: 39px;
        padding: 0 0 0 5px;
    }

    .header ul strong {
        background: #FFF url({/literal}{$out.http}://{$out.siteurl}{literal}/img/bg-nav.gif) no-repeat 0 -78px;
        font-weight: normal;
    }

    .header .index_notifications {
        float: right;
        height: 71px;
        padding: 10px 0 0;
        color: #777;
        font-size: .7em;
    }

    .header .index_notifications .fa-stack {
        font-size: 16px;
        padding-right: 5px;
        margin-right: 10px;
    }

    .nav-user-accounts .user-accounts-icon,
    .nav-user-settings .user-accounts-icon {
        display: none;
    }

    .main {
        display: flex;
    }

    .sidebar {
        flex: 0 1 185px;
        flex-shrink: 0;
        padding-top: 25px;
        /*width: 180px;*/
        background-color: #f8f9fa;
    }

    .sidebar .navigation {
        display: none;
    }

    

    .wlm-emt .content,
    .wlm-orders .content {
        width: calc(100% - 200px);
    }

    .filters-title {
        display: none;
    }

    .filters-wrapper .filters-content {
        display: block;
        max-height: none;
    }

    .form-row {
        margin: .2em 0 1em;
        /* overflow: hidden; */
    }
    .remodal .form-row {
        margin: 0;
    }

    .wlm-orders .picker-item + .picker-item {
        padding-left: 20px;
    }

    .wlm-orders input[type="submit"] {
        /*height: 32px;*/
        /*float: right;*/
    }

    .page-title .actions a {
        margin-left: 1.5em;
    }
    .warning_red_full {
        height: 50px;
        line-height: 50px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .form-label {
        width: 110px;
    }
    .form-comment,
    .form-field {
        margin-left: 120px;
    }
    .emt-order-email-custom-template {
        margin-left: -120px;
    }
}

@media (min-width: 800px) {
    .modal-dialog {
        max-width: 770px;
    }
}

@media (max-width: 767px) {
    .div_table.form-inline {
        display: flex;
        flex-wrap: wrap;
    }
    .div_table.form-inline > div {
        flex-grow: 1;
        width: 70%;
    }
    .div_table.form-inline > div.label {
        width: 30%;
        padding-left: 0;
    }
    .remodal-wrapper {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    .vue_ul_inquired_statuses {
        padding: 5px 5px 5pc 0;
    }
    .wlm .emt-table-wrapper:before {
        display: none;
    }
    .emt-order-email-custom-template {
        margin-left: 0;
    }
    .form-label {
        width: 100%;
        float: none;
    }
    .form-text-inline {
        display: flex;
    }
    .form-text-inline .form-label {
        width: 140px;
    }

    .form-row_right .form-label {
        width: auto;
    }

    .form-field {
        margin-left: 0;
    }

    .exam-actions-wrapper {
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
    }

    .exam-actions-wrapper > * {
        margin-bottom: 7px;
    }

    .exam-actions-wrapper .btn {
        min-width: 220px;
    }

    .form-check {
        display: flex;
    }

    .form-check .form-label {
        width: auto;
    }

    .form-comment {
        margin-left: 0;
    }
    .wlm .emt-title-control-wrapper {
        flex-wrap: wrap;
    }
    .wlm .emt-title-info-blocks {
        width: 100%;
        margin-left: 0;
    }

    /*course Locations */
    .location_item {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0;
    }
    .location_item .external-link {
        position: absolute;
        top: 12px;
        right: 12px;
    }
    .location_item .location_item_num {
        position: absolute;
        left: 10px;
        top: 10px;
    }
    .location_row .location_custom_name,
    .location_row > select {
        width: 100%;
        margin-bottom: .3rem;
    }
    .location_row {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 13px 42px 13px 32px;
    }
    .location_item .del {
        position: absolute;
        right: 12px;
        top: 185px;
    }
    .table-related-courses {
        min-width: 160px;
    }
    .custom-progress .step-1 {
        left: 10%;
    }
    .custom-progress .step-2 {
        left: 34%;
        transform: translateX(-34%);
    }
    .custom-progress .step-3 {
        left: 65%;
        transform: translateX(-65%);
    }
    .custom-progress .step-4 {
        right: 10%;
    }
}

@media (max-width: 575px) {
    .btn {
        font-size: 14px;
    }
    .btns-wrapper {
        flex-direction: column;
    }
    .btns-wrapper .btn {
        margin-bottom: 8px;
        font-size: 14px;
    }
    .materials-list li select {
        width: 100% !important;
    }
    .materials-list li a {
        margin-left: auto;
    }
    .form-row-payment input[type="radio"] + label {
        flex-direction: column;
        align-items: flex-start;
    }
    #saveandpay {
        flex-direction: column;
    }
    #saveandpay .btn {
        width: 280px;
    }
    #saveandpay img {
        max-width: 260px;
    }
    .btns-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .btns-wrapper .btn {
        width: 280px;
    }
    .order_aha,
    .create_roster {
        width: 100%;
        padding: 10px 20px;
    }
    .create_roster {
        margin-top: 10px;
    }
    .login .header,
    .login .main,
    .login .footer{
        max-width: 500px;
        width: calc(100% - 30px);
        margin: 0 15px;
    }
    .feesUL,
    .extensionsUL {
        /*display: flex;*/
    }
    .wlm fieldset.vue_extensions, .wlm fieldset.vue_fees {
        padding-left: 10px;
        padding-right: 10px;
    }
    .wlm .emt-title-info-blocks .emt-one-block + .emt-one-block {
        margin-left: 2%;
    }
    .filters-content .form-submit {
        text-align: center;
    }
    .days-of-the-week label{
        display: inline-block;
        padding-top: 5px;
        padding-bottom: 10px;
    }
    .wlm-orders input[type="submit"] {
        width: 100%;
        display: block;
        margin: 1em auto;
        /*padding: 10px 20px 11px 20px;*/
        /*font-size: 16px;*/
        /*font-weight: bold;*/
        /*transition: all .25s ease-in-out;*/
    }

    .numbers-info {
        display: flex;
        flex-direction: column;
    }

    .items-per-page form {
        display: flex;
        flex-direction: column;

    }

    .wlm-orders .sales-info-wrapper select {
        margin-top: 5px;
        margin-left: 0;
        width: 100%;
    }

    .order-info-row {
        flex-direction: column;
    }

    .order-info-row > .col {
        display: flex;
        align-items: center;
    }

    .order-info-row .form-label {
        width: 30%;
        margin-bottom: 0;
    }

    .order-info-row .form-field {
        width: 70%;
    }

    .tox.tox-platform-touch .tox-editor-container .tox-toolbar,
    .tox.tox-tinymce-aux.tox-platform-touch .tox-toolbar {
        flex-wrap: wrap !important;
    }

    .icon-find {
        padding: 0;
        background: none;
    }

    select {
        width: 100%;
    }
    
    .order-info-row .form-field {
        font-size: 14px;
    }
    .page-title h1 {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-title h1 span {
        display: block;
        font-size: 11px;
        line-height: 11px;
    }
    .page-title h1 span i {
        display: none;
    }
    .page-title h1 {
        font-size: 1.2em;
    }
    .custom-progress .custom-progress-bar.progress-bar-active.progress-step-1:before {
        width: 17%;
    }
    .custom-progress .step-1 {
        left: 8%;
    }
    .custom-progress .step-2 {
        left: 35%;
        transform: translateX(-35%);
    }
    .custom-progress .step-3 {
        left: 63%;
        transform: translateX(-63%);
    }
    .custom-progress .step-4 {
        right: 8%;
    }
    .custom-progress .step .title {
      max-width: 70px;
      display: inline-block;
    }
    .custom-progress {
      padding-bottom: 65px;
    }
}
@media (max-width: 390px) {
    .custom-progress .step-1 {
          left: 4%;
      }
      .custom-progress .step-2 {
          left: 33%;
          transform: translateX(-33%);
      }
      .custom-progress .step-3 {
          left: 65%;
          transform: translateX(-65%);
      }
      .custom-progress .step-4 {
          right: 4%;
      }
      .custom-progress .step a, .custom-progress .step p {
        font-size: 11px;
      }
}
@media (max-width: 320px) {
    .btn-search {
        width: 100%;
    }
}
{/literal}