/*
/*
 * Widths
 */
@wrapper_width: 1200px;
@medium_width: 800px;
@mobile_width: 640px;

/*
 * The Grid
 */

@gutter_width: 20px;
@column_count: 24;

/*
 * Typography
 */
@base_font_size: 13;

/*
 * Border Radius
 */
@border_radius: 4px;

/*
 * Colours
 */
@border_color: #d7dce4;
@text_color: #323234;

@primary_color: @mtc_blue;
@secondary_color: #4ed2b5;

/*
 * Dark background / Light text
 */
@dark_color: #323232;
@light_text_color: @light_color;

/*
 * Light background / Dark text
 */
@light_color: #edf0f2;
@dark_text_color: #fff;
@med_color: #b7babc;

/*
 * Alert Colours
 */
@alert_color: #e74c3c;
@information_color: #f1c40f;
@success_color: #2ecc71;

/*
 * Misc Colours
 */
@highlight_color: var(--primary_color);
@background_color: var(--light_color);
@mtc_blue: #0f55c4;
@darken_mixin_color: #000;
@light_mixin_color: #fff;
@fade_mixin_color: transparent;

/*
 * Button Colors
 */
@btn_delete_bg:         #dc3333;
@btn_delete_hover:      #c52727;
@btn_red_bg:            #942929;
@btn_red_dark:          #7E0E0E;
@btn_green_bg:          #297E01;
@btn_green_top:         #349E3C;
@btn_cancel_bg:         #393939;
@btn_cancel_top:        #565656;
@btn_cancel_bottom:     #454545;
@btn_grey_bg:           #aaa;
@btn_grey_top:          #ccc;
@btn_black_bg:          #222222;
@btn_black_top:         #333333;

/*
 * Sidebar Colors
 */
@sidebar_bg:            #262d3b;
@sidebar_sub_bg:        #2e3748;
@sidebar_search_bg:     #1a2030;
@sidebar_input_bg:      #1c2230;
@sidebar_muted_text:    #6b7280;
@sidebar_focus_color:   #4a90d9;

/*
 * Tab Navigation Colors
 */
@tab_inactive_bg:       #dddfe3;
@tab_inactive_top:      #e8ebef;
@tab_inactive_bottom:   #cdd0d2;
@tab_text_muted:        #595b63;

/*
 * Table Row Status Colors
 */
@row_patient_notes:     #ffdca8;
@row_recurring:         #fdfcd9;
@row_waiting:           #f7e981;
@row_private_rx:        #ccf714;
@row_active_item:       #ffcc66;
@row_message_history:   #e5fdff;
@row_unread_admin:      #bbdced;

/*
 * Message Component Colors
 */
@msg_success_bg:        #e5f4bb;
@msg_success_border:    #d1e792;
@msg_success_text:      #52a61a;
@msg_error_bg:          #fce3e3;
@msg_error_border:      #f4c9c9;
@msg_alert_bg:          #fcf8e3;
@msg_alert_border:      #E0CBA2;
@msg_alert_text:        #c09853;

/*
 * Chat Bubble Colors
 */
@chat_left_bg:          #46519c;
@chat_right_bg:         #9c7618;
@chat_private_bg:       #9b9b9c;

/*
 * Layout Colors
 */
@page_bg:               #f5f5f5;
@table_stripe_bg:       #f1f4f8;
@table_hover_bg:        #dfe5ed;

/*
 * Form / Error Colors
 */
@error_text_color:      #ce2b2b;
@validation_color:      #ff3333;
@input_readonly_bg:     #F3F3F3;
@input_readonly_text:   #5E5E5E;

/*
 * General UI
 */
@ui_muted_border:       #ccc;

/*
 * Media Query Breakpoints
 */

@desktop: ~"all and (min-width: " (@wrapper_width + 20) ~ ")";
@tablet: ~"all and (min-width: " (@mobile_width + 1) ~ ") and (max-width: " (@wrapper_width + 19) ~ ")";
@medium: ~"all and (min-width: " (@medium_width + 1) ~ ") and (max-width: @{wrapper_width})";
@mobile: ~"all and (max-width: @{mobile_width})";



:root {
    /*
    * Widths
    */
    --wrapper_width: @wrapper_width;
    --medium_width: @medium_width;
    --mobile_width: @mobile_width;

    /*
     * The Grid
     */

    --gutter_width: @gutter_width;
    --column_count: @column_count;

    /*
     * Typography
     */
    --base_font_size: @base_font_size;

    /*
     * Border Radius
     */
    --border_radius: @border_radius;

    /*
     * Colours
     */
    --border_color: @border_color;
    --text_color: @text_color;

    --primary_color: @primary_color;
    --secondary_color: @secondary_color;

    /*
     * Dark background / Light text
     */
    --dark_color: @dark_color;
    --light_text_color: @light_text_color;

    /*
     * Light background / Dark text
     */
    --light_color: @light_color;
    --dark_text_color: @dark_text_color;
    --med_color: @med_color;

    /*
     * Alert Colours
     */
    --alert_color: @alert_color;
    --information_color: @information_color;
    --success_color: @success_color;

    /*
     * Misc Colours
     */
    --highlight_color: var(--primary_color);
    --background_color: var(--light_color);
    --mtc_blue: @mtc_blue;
    --darken_mixin_color: @darken_mixin_color;
    --lighten_mixin_color: @light_mixin_color;
    --fade_mixin_color: @fade_mixin_color;

    /*
     * Sidebar Colors
     */
    --sidebar_bg: @sidebar_bg;
    --sidebar_sub_bg: @sidebar_sub_bg;

    /*
     * Layout Colors
     */
    --page_bg: @page_bg;
    --table_stripe_bg: @table_stripe_bg;

    /*
     * Button Colors
     */
    --btn_delete_bg: @btn_delete_bg;
    --btn_green_bg: @btn_green_bg;
    --btn_red_bg: @btn_red_bg;
}
/*
 * HTML Tag
 */

html {
    font-size: ~"calc(var(--base_font_size) * 1px)";

    &:before {
        content: 'tablet: @{wrapper_width}, mobile: @{mobile_width}, medium: @{medium_width}';
        position: absolute;
        top: 0;
        visibility: hidden;
    }
}

@import 'dynamic_before.less';

/*
 * Typography
 */

body {
    margin: 0;
    font-size: ~"calc(var(--base_font_size) * 1px)";
    line-height: 1.462;
    font-family: var(--body_font);
    color: var(--text_color);
    background: @page_bg;
}

a {
    color: @mtc_blue;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td {
    vertical-align: top;
}

input[type="radio"] {
    -webkit-appearance: radio;
}

input[type="checkbox"] {
    -webkit-appearance: checkbox;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
    *overflow: visible;
}

fieldset {
    margin-bottom: 10px;
}

.shellResult {
    clear: both;
}

/*
 * Populate scripts list styles
 */

.populateList, .populateList ul {
    margin: 1em 0;
    padding: 0 0 0 40px;
    display: block;
}

.populateList {

    li {
        display: list-item;
        list-style-type: disc;
    }

    ul li {
        list-style-type: circle;
    }
}

/*
 * Alert fixes
 */

.alert, .success, .error {
    background: 0;
    font-size: 13px;
    margin: 0;

    a {
        color: var(--text_color);
        text-decoration: underline;
    }

    &:after {
        content: none;
    }
}

.alert {
    color: @mtc_blue;
}

.success {
    clear: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "OpenSansSemibold";
    font-weight: normal;
    color: @mtc_blue;
    margin: 0 0 20px 0;
}

h1 {
    font-size: 2em;
    line-height: 1.192em;
    margin: 0 0 0.4em 0;

    a {
        i {
            &:before {
                font-size: 0.6em;
            }
        }
    }
}

h2 {
    font-size: 1.75em;
    margin: 0 0 0.714em 0;
}

h3 {
    font-size: 1.375em;
    margin: 0 0 0.4em 0;
}

h4 {
    font-size: 1.125em;
    margin: 0 0 0.6em 0;
}

h5, h6 {
    font-size: 1em;
    margin: 0 0 0.8em 0;
}

.black {
    color: #323234;
}

/*
 * Layout styles
 */

.el {
    float: left;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    clear: both;
}

i {
    font-size: 1.538em !important;
}

.msg {
    padding: 1% 10% 1% 1%;
    background: @msg_success_bg;
    border: 1px solid @msg_success_border;
    color: @msg_success_text;
    font-family: "OpenSansbold";
    font-size: 1.2em;
    border-radius: var(--border_radius);
    margin-bottom: 20px;
}

.msg.error {
    background: @msg_error_bg;
    border: 1px solid @msg_error_border;
    color: @error_text_color;
}

.msg.error ul {
    margin: 0;
    padding: 0;
    border: none;
}

.msg.error li {
    list-style-type: none;
}

.error a {
    color: @error_text_color !important;
}

.msg .picto, .msg i {
    position: absolute;
    top: 20%;
    right: 1%;
    font-size: 2.1em;
    line-height: 1;
}

.error {
    color: @error_text_color !important;
}

.logo {
    float: left;
    padding: 16px 20px 16px;

    #Layer_1 {
        width: 61px;
        height: 24px;
    }
}

#header {
    background: var(--mtc_blue);
    color: #fff;
    float: left;
    width: 100%;
    position: relative;

    a {
        color: #fff;
    }

    span {
        font-weight: bold;
    }

    .headerMenuSections, .headerTitleSection {

        @media @mobile {
            display: none;
        }

        li {
            display: inline-block;
            margin: 20px 0;
            padding: 0 20px 0 40px;
            position: relative;

            @media @tablet {
                &:first-child {
                    display: none;
                }
            }

            i {
                position: absolute;
                left: 15px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }

    .headerMenuSections {
        float: right;
        text-align: right;

        li {
            border-right: 1px solid lighten(@mtc_blue, 15%);

            &:last-child {
                border-right: 0;
            }
        }
    }

    .headerTitleSection {
        float: left;

        @media @tablet {
            display: none;
        }

        li {
            border-left: 1px solid lighten(@mtc_blue, 15%);
            padding: 0 20px;

            &:last-child {
                border-left: 0;
            }

            &:first-child {
                border-left: 1px solid lighten(@mtc_blue, 15%);
            }
        }
    }

    .flyoutButton {
        cursor: pointer;
        display: none;
        text-decoration: none;
        color: #fff;
        text-transform: uppercase;
        .rems(14);
        font-family: var(--primary_font);
        position: absolute;
        top: 50%;
        right: 20px;
        margin-right: 20px;
        transform: translateY(-50%);

        i {
            position: absolute;
            top: 50%;
            left: 100%;
            margin-left: 5px;
            transform: translateY(-50%);
        }

        @media @mobile {
            display: block;
        }
    }
}

/*
 * Content
 */

#content {
    clear: both;
    display: flex;
    min-height: ~"calc(100% - 61px)";
}

/*
 * Sidebar
 */

.sidebar {
    background: @sidebar_bg;
    width: 250px;
    float: left;
    padding: 20px 0 0;
    position: relative;
    min-height: ~"calc(100% - 61px)";

    @media @mobile {
        width: 100%;
        z-index: 100;
        position: absolute;
        top: 61px;
        left: -100%;
    }

    @media @mobile {
        transition: transform 0.5s ease-in-out;

        &.active {
            transform: translateX(100%);
        }
    }
}

/*
 * Right Column (Main content area)
 */

.rightcol {
    width: ~"calc(100% - 250px)";
    padding: 40px;
    float: left;

    @media @tablet, @mobile {
        padding: 20px;
        width: 100%;
    }

    img {
        max-width: 100%;
    }
}

/*
 * Sidebar Navigation
 */

.topnav {
    width: 100%;

    li {
        position: relative;
        float: left;
        width: 100%;

        &.active {
            background: color-mix(in srgb, @sidebar_bg, var(--light_mixin_color) 10%);
        }

        a {
            display: block;
            color: #fff;
            padding: 10px 20px 10px 50px;

            &:hover {
                background: color-mix(in srgb, @sidebar_bg, var(--light_mixin_color) 10%);
            }

            i {
                position: absolute;
                left: 20px;
                top: 20px;
                transform: translateY(-50%);
            }
        }

        ul {
            margin-bottom: 20px;
            border-top: 1px solid @sidebar_sub_bg;
            width: 100%;

            li {
                border-bottom: 1px solid @sidebar_sub_bg;
            }
        }
    }

    /*
     * Site navigation is used here to make this part of the menu on
     * mobile only.
     */

    .siteNavigation {
        display: none;

        @media @mobile {
            display: block;
        }
    }

    .sectionHeader {
        .rems(11);
        padding: 20px;
        text-transform: uppercase;
        color: #fff;
        display: block;
        cursor: pointer;
        position: relative;
        padding-right: 40px;

        &:hover {
            background: color-mix(in srgb, @sidebar_bg, var(--light_mixin_color) 10%);
        }
    }

    .sidebar-toggle-icon {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%) scaleX(0.7);
        transition: transform 0.25s ease;
        font-size: 10px !important;
    }

    // Collapsed state (default) — hide child ul
    > li > ul {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        margin-bottom: 0;
    }

    // Open state
    > li.sidebar-section--open > ul {
        max-height: 2000px;
        transition: max-height 0.5s ease-in;
        margin-bottom: 20px;
    }

    > li.sidebar-section--open > .sectionHeader > .sidebar-toggle-icon {
        transform: translateY(-50%) scaleX(0.7) rotate(90deg);
    }

    // Search mode — force sections open when they have matches
    > li.sidebar-section--search-visible > ul {
        max-height: 2000px;
        transition: max-height 0.5s ease-in;
        margin-bottom: 20px;
    }

    > li.sidebar-section--search-visible > .sectionHeader > .sidebar-toggle-icon {
        transform: translateY(-50%) scaleX(0.7) rotate(90deg);
    }

    > li.sidebar-section--search-hidden {
        display: none;
    }
}

/*
 * Sidebar search
 */

.sidebar-search {
    padding: 12px 16px;
    background: @sidebar_search_bg;

    &__input-wrap {
        position: relative;
    }

    &__icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: @sidebar_muted_text;
        .rems(12);
    }

    &__input {
        width: 100%;
        padding: 8px 32px 8px 32px;
        background: @light_mixin_color;
        border: 1px solid @sidebar_sub_bg;
        border-radius: 4px;
        color: @text_color;
        .rems(12);
        outline: none;
        box-sizing: border-box;

        &::placeholder {
            color: @sidebar_muted_text;
        }

        &:focus {
            border-color: @sidebar_focus_color;
            box-shadow: 0 0 0 1px @sidebar_focus_color;
        }
    }

    &__clear {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: @sidebar_muted_text;
        cursor: pointer;
        padding: 4px;
        .rems(12);

        &:hover {
            color: #fff;
        }
    }
}

.sidebar-search-highlight {
    background: fade(@sidebar_focus_color, 15%);
}

.sidebar-no-results {
    padding: 16px 20px;
    color: @sidebar_muted_text;
    .rems(11);
    text-align: center;
}

/*
 * Style guide section
 */

.styleGuideWrap {
    max-width: initial;

    .styleGuideSectionMainTitle {
        padding: 0 0 40px;
    }
}

/*
 * Breadcrumbs
 */

ul.breadcrumbs {
    padding: 0;
    margin: 0 0 10px 0;
}

ul.breadcrumbs li, ul.breadcrumbs li a {
    display: inline;
    color: @tab_text_muted;
}

ul.breadcrumbs li.end {
    font-weight: bold;
}

ul.breadcrumbs li {
    font-size: 0.9em;
}

ul.breadcrumbs li:last-child {
    font-weight: bold;
}

/*
 * Table styles
 */

table {
    width: 100%;
    text-align: left;
}

table.half, div.half {
    width: 50%;
}

.buttonGroups {

    td {
        vertical-align: top !important;

        & > div {
            float: none;
            clear: both;
        }

    }
    button, .btn, .btn.alert {
        padding: 7px 12px 8px 12px !important;
        margin: 0 0 12px 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        height: auto;
        float: none !important;
        clear: both !important;
        min-width: 100%;
        font-size: 13px !important;
        line-height: 16px !important;
    }

    .refundWrapper {
        #refundOrderButton{
            margin-right: 0 !important;
        }
    }
}

table.manage-items {
    margin-bottom: 20px;

    hr {
        margin: 0 !important;;
    }

    tr td {
        border-top: 1px solid @ui_muted_border;
        border-bottom: 1px solid @ui_muted_border;

        a.show {
            color: #5aaa23;
        }

        a.hide {
            color: @error_text_color;
        }

    }

    tr td, tr th {
        padding: 0.4em;
        vertical-align: middle;
        text-align: left;

        &.center {
            text-align: center;
            width: 60px;

            i {
                font-size: 2em;
            }
        }
    }
}

.customerdetails {

    input {
        margin: 1px;
    }
}

.tabular {

    tr {

        &:nth-child(odd) {
            background: @table_stripe_bg;
        }

        &:nth-child(even) {
            background: #fff;
        }

        &:hover {
            background: @table_hover_bg;
        }
    }
}

table .order .picto {
    cursor: move;
}

table .tabular td img {
    max-height: 30px;
}

/*
 * Form styles
 */

form p input[type="submit"] {
    float: right;
}

form {
    margin: 0;
    float: left;
    width: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 20px;

    .row {
        display: block;
        float: left;
        width: 100%;
        margin: 0.6em 0;

        label {
            display: block;
            float: left;
            width: 16%;
            font-weight: bold;
        }
    }
}

.style {
    clear: both;
    width: 100%;
    padding: 1% 1% 0% 1%;
    background: @table_stripe_bg;
    border: 1px solid @border_color;
}

form fieldset .row label {
    margin-top: 7px;
}

.defaultValue {
    float: left;
    margin: 0.55em;
}

.validationMessage {
    color: @validation_color;
    float: left;
    margin: 0.6em;
}

.errorWrap input, .errorWrap select, .errorWrap textarea {
    border-color: @validation_color !important;
}

form .checkboxes input + label, form .checkboxes select + label {
    display: inline;
    width: auto;
    padding: 0 20px 0 10px;
}

form .row input, form .row textarea, form .row select, td input[type="text"] {
    float: left;
    display: block;
    border: 1px solid @border_color;
    border-radius: var(--border_radius);
    padding: 8px;
    width: 40%;
    font-family: var(--body_font);
    text-align: left;
}

form .row .chosen-container {
    width: 40%;
    float: left;
    display: block;
}

form .row .mce-tinymce {
    float: left;
}

input[readonly], select[readonly], select[disabled], textarea[readonly] {
    background-color: @input_readonly_bg;
    color: @input_readonly_text;
}

table td input {
    border: 1px solid @border_color;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 8px;
    font-family: Verdana;
}

form .row input.short {
    width: 12%;
}

form .row input[type="file"] {
    border: none;
}

form .row input[type="radio"], form .row input[type="checkbox"] {
    border: none;
    padding: 0;
    margin-top: 3px;
    width: auto;
}

input[type="checkbox"], input[type="radio"] {
    border: none;
}

form fieldset .row input[type="radio"], form fieldset .row input[type="checkbox"] {
    margin-top: 10px;
}

form .row select {
    min-width: 200px;
    width: auto;
    padding-top: 7px;
    padding-bottom: 7px;
}

form fieldset h1 {
    margin: 0.6em 0;
    font-size: 1.4em;
    border-bottom: 1px solid @border_color;
    width: 100%;
    float: left;
    height: 29px;
}

form fieldset > h1:first-child {
    margin-top: 0;
}

form fieldset > h1 a {
    height: 29px;
}

form fieldset > h1 a i {
    float: right;
    font-size: 1.6em;
    line-height: 1;
    width: 30%;
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
}

.btn, form input[type="submit"], form .submit, .row .btn {
    display: block;
    float: left;
    clear: none;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: @mtc_blue;
    background: -webkit-linear-gradient(top, darken(@mtc_blue, 4%), darken(@mtc_blue, 8%));
    background: -moz-linear-gradient(top, darken(@mtc_blue, 4%), darken(@mtc_blue, 14%));
    color: #fff !important;
    border: none;
    font-size: 1.1em;
    font-family: "OpenSansSemibold";
    outline: none;
    min-width: 100px;
    width: auto;
    padding: 0 15px !important;
    margin-bottom: 5px;
    margin-right: 5px;
    height: 33px;
    line-height: 31px;
}

.btn:hover, .submit:hover {
    text-decoration: none;
    cursor: pointer;
    background: darken(@mtc_blue, 18%);
    background: -webkit-linear-gradient(top, darken(@mtc_blue, 18%), darken(@mtc_blue, 18%));
    background: -moz-linear-gradient(top, darken(@mtc_blue, 4%), darken(@mtc_blue, 18%));
}

.btn.delete {
    background: @btn_delete_bg;
    background: -webkit-linear-gradient(top, @btn_delete_bg, darken(@btn_delete_bg, 5%));
    background: -moz-linear-gradient(top, @btn_delete_bg, darken(@btn_delete_bg, 5%));
}

.btn.delete:hover {
    background: @btn_delete_hover;
    background: -webkit-linear-gradient(top, @btn_delete_hover, darken(@btn_delete_hover, 5%));
    background: -moz-linear-gradient(top, @btn_delete_hover, darken(@btn_delete_hover, 5%));
}

.btn-secondary {
    font-size: 0.9em !important;
    float: right !important;
}

.btn-smaller {
    font-size: 0.9em !important;
}

.rightcol a.cancel {
    background: @btn_cancel_bg;
    background: -webkit-linear-gradient(top, @btn_cancel_top, @btn_cancel_bottom);
    background: -moz-linear-gradient(top, @btn_cancel_top, @btn_cancel_bottom);
    margin-left: 10px;
}

.rightcol a.cancel:hover {
    background: @btn_cancel_bg;
    background: -webkit-linear-gradient(top, @btn_cancel_bg, darken(@btn_cancel_bg, 5%));
    background: -moz-linear-gradient(top, @btn_cancel_bg, darken(@btn_cancel_bg, 5%));
}

.manageAdminMenu {

    ol {

        li {
            float: left;
            width: 100%;
            border-top: 1px solid var(--border_color);

            i {
                margin-top: 7px;
            }

            a {
                padding: 5px 0;
            }

            .right {
                padding-top: 0;
                padding-bottom: 0;
            }
        }
    }
}

/* hint styles */

.row .hint {
    width: 50px;
    clear: none;
    margin-left: 10px;
    height: 33px;
}

.row .hint i {
    position: relative;
    z-index: 1;
}

.row .hint .picto {
    font-size: 2.2em;
    line-height: 1.462;
    color: @ui_muted_border;
    cursor: help;
    height: 20px;
    line-height: 33px;
}

.row .hint .text {
    width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 100;
    background: @mtc_blue;
    color: #fff;
    float: left;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.row .hint .text h1 {
    color: #fff;
    margin: 0;
    line-height: 1;
    margin-bottom: 0;
    font-size: 1.3em;
    height: 15px;
    border: none;
}

.row .hint .text p {
    margin: 0;
    font-size: 0.9em;
}

.tabnav, .tabsnavAlt {
    margin-bottom: 20px;
    border-bottom: 2px solid darken(@mtc_blue, 5%);

    li {
        display: block;
        float: left;
        padding: 7px 20px;
        background: @tab_inactive_bg;
        background: -webkit-linear-gradient(top, @tab_inactive_top, @tab_inactive_bottom);
        background: -moz-linear-gradient(top, @tab_inactive_top, @tab_inactive_bottom);
        margin-right: 1px;
        font-family: "OpenSansSemibold";
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: @tab_text_muted;

        a {
            color: var(--text_color);

            &:hover {
                text-decoration: none;
            }
        }

        &.selected, &.active {
            background: @mtc_blue;
            background: -webkit-linear-gradient(top, @mtc_blue, darken(@mtc_blue, 5%));
            background: -moz-linear-gradient(top, @mtc_blue, darken(@mtc_blue, 5%));

            a {
                color: #fff;
            }
        }
    }
}

.miniselector {
    margin-bottom: 20px;
}

/*
 * Map Styles
 */

.map {
    font-size: 2em;
    margin: 0px auto;
    padding: 0;
    float: left;
    width: 33%;

    li {
        list-style: none;
        padding: 0;

        .picto {
            display: block;
            width: 80px;
            float: left;
        }

        pre {
            font-size: 0.6em;
        }
    }
}

/*
 * Pagination Styles
 */
ul.pagination {
    padding: 0;
    float: left;
    clear: both;
    margin-bottom: 10px;
}

ul.pagination li {
    display: inline;
    margin-right: 4px;
}

ul.pagination li a, ul.pagination li span, ul.pagination li.dots {
    padding: 8px 12px;
    background: #efefef;
    border-radius: 5px;
    color: var(--text_color);
}

ul.pagination li.active a, ul.pagination li.active span, ul.pagination li a:hover {
    background: @mtc_blue;
    background: -webkit-linear-gradient(top, @mtc_blue, darken(@mtc_blue, 5%));
    background: -moz-linear-gradient(top, @mtc_blue, darken(@mtc_blue, 5%));
    color: #fff;
}

ul.pagination li .picto {
    font-size: 1.6em;
}

tr.ui-state-highlight {
    height: 42px;
}

.area {
    margin-bottom: 30px;
}

/*
 * Order page styles
 */

.divider {
    height: 1px;
    background: @ui_muted_border;
    margin: 20px 0;
    width: 80%;
}

.ordersection {
    width: 80%;

    & > table {
        tr {
            & > th  {
                padding: 0 0 12px 0;
            }
        }
    }
}

.orderdetails div.purchasedate, .orderdetails div.actions {
    width: 50%;
    float: left;
    clear: none;
}

.orderdetails div.purchasedate {
    width: 45%;
}

.orderdetails div.actions {
    width: 55%;
}



form .purchasedate input {
    width: 200px;
}

.orderdetails div.actions label,
.orderdetails div.actions a {
    clear: both;
    float: left;
    margin-bottom: 10px;
    height: auto;
    line-height: 21px;
    min-height: 33px;
    width: 180px;
    text-align: center;
}

#dashboardStats {
    .js_dashboardStat {
        height: 200px;

    }

    #dashboard-dates {
        margin-top: 40px;
    }

    .col {
        margin-top: 2%;
        background: #fff;
        border: none;

        &.numeric_stats {
            min-height: 255px;
        }
    }

    .tabular {
        border: none;

        th, td {
            padding: 5px;
        }

        th {
            width: 90%;
        }
    }

    .dashboardIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -10px 0 0 -10px;
    }
}

#dashboard-stats table {
    width: 30%;
    float: left;
    margin: 0 1% 20px 1%;
    padding: 1%;
}

#dashboard-stats table.center-table {
    background: #E9ECF0;
}

#dashboard-dates {
    margin: 10px 0 0 0;
}

.js .items {
    position: relative;
}

.js .items .block {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid @ui_muted_border;
    padding: 10px;
    top: 0;
    left: 0;
    z-index: 10;
}

/* column layouts */

.cols2 .col {
    width: 46%;
    clear: none;
    margin-left: 2%;
    margin-top: 1%;
    border: 1px solid #eaeaea;
    padding: 1%;
    background: #fff;
}

.touch .cols2 .col {
    width: 98%;
    margin: 0 0 3% 0;
}

.cols3 .col {
    width: 31%;
    padding: 1%;
    clear: none;
    margin: 0 0 1% 3%;
}

.cols3 .first, .cols2 .first {
    margin-left: 0;
}

#dashboard-dates .between-dates {
    float: left;
    margin: 0 10px;
    line-height: 35px;
}

#dashboard-dates #filter-dates {
    margin: 0 0 0 10px;
}

/*
 * Admin menu sortable
 */

ol#menuSortable, ol#menuSortable ol, .cms-right ul, .cms-right ol {
    list-style: none;
    margin: 0px;
    margin-left: 5px;
    padding: 0px;
    line-height: 1.75em;
}

ol#menuSortable {
    margin-top: 15px;
    margin-left: 0px;
    max-width: 600px
}

ol#menuSortable span {
    float: left;
    margin-right: 10px;
    font-size: 10px;
}

ol#menuSortable li {
    padding-left: 10px;
    position: relative;
    clear: both;
}

ol#menuSortable li .ui-sortable-handle {
    cursor: pointer;
}

ol#menuSortable li i.left {
    float: left;
    margin-right: 10px;
}

ol#menuSortable li .right {
    position: absolute;
    right: 10px;
    top: 0px;
    z-index: 100;
    text-decoration: none;
}

ol#menuSortable li .right:hover {
    text-decoration: none;
    background: none;
}

ol#menuSortable ol li .right {
    right: 15px;
}

ol#menuSortable a {
    color: #666666;
    display: block;
    text-decoration: none;
}

ol#menuSortable a:hover {
    background-color: #eeeeee;
    text-decoration: underline;
}

ol#menuSortable .active a {
    background-color: #eeeeee;
}

ol#menuSortable .active li a {
    background-color: #ffffff;
}

ol#menuSortable .menu-placeholder {
    background-color: #aaa;
    height: 19px;
    display: block;
}

ol#menuSortable .ui-nestedSortable-error {
    background: #fbe3e4;
    color: #8a1f11;
    padding-left: 10px;
}

ol#menuSortable li span a {
    cursor: move;
}

.ir {
    display: block;
    border: 0;
    text-indent: -999em;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
    *line-height: 0;
}

.ir br {
    display: none;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.ui-dialog .hidden {
    display: block !important;
    visibility: visible;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

.ui-sortable {
    overflow-x: hidden;
    overflow-y: auto;
}

#wrapper {
    height: 100%;
    width: 100%;
}

/*
 * Button Section
 */

.btn-section {
    float: left;
    margin-right: 15px;
}

.btn-section input {
    margin-right: 5px;
}

.btn-section #btn_cancel {
    background: @btn_black_top;
    background: -webkit-linear-gradient(top, @btn_cancel_top, @btn_black_top);
    background: -moz-linear-gradient(top, @btn_cancel_top, @btn_black_top);
}

.cms-delete-btns input[type="submit"] {
    background: @btn_red_bg;
    background: -webkit-linear-gradient(top, @btn_red_bg, @btn_red_dark);
    background: -moz-linear-gradient(top, @btn_red_bg, @btn_red_dark);
}

.btn-section #btn_save {
    background: @btn_green_bg;
    background: -webkit-linear-gradient(top, @btn_green_top, @btn_green_bg);
    background: -moz-linear-gradient(top, @btn_green_top, @btn_green_bg);
}

/*
 * Combobox
 */

.custom-combobox .custom-combobox-toggle {
    background: #fff;
    border: 1px solid @border_color;
}

.custom-combobox {
    position: relative;
    display: inline-block;
    width: 42%;
}

.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}

.custom-combobox-input {
    margin: 0;
    padding: 0.3em;
    background: #FFF;
}

form input.custom-combobox-input {
    width: 90%;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.ui-tooltip {
    white-space: pre;
    display: block;
    unicode-bidi: embed;
    font-size: 11px !important;
    border-width: 2px;
    box-shadow: 5px 5px 4px rgba(60, 81, 114, 0.67);
    background: #F0F4FA;
    border: 1px solid #B9C2D1 !important;
    font-family: courier;
    max-width: 900px;
}

#cropAdjust form .row label {
    width: 65px;
}

#cropAdjust .form-box {
    border-radius: 3px;
    text-align: center;
}

#cropAdjust .original div.container {
    width: 390px;
    height: 390px;
}

#cropAdjust form .original, #cropAdjust form .result {
    height: 390px;
    width: 47%;
    text-align: center;
}

#cropAdjust form .original {
    float: left;
}

#cropAdjust form .result {
    float: right;
}

#cropAdjust .btn-section {
    padding-top: 10px;
}

#cropAdjust .jcrop-holder {
    margin: 0 auto;
}

.row .hint:hover .text {
    display: block;
}

.msg.alert {
    background: @msg_alert_bg;
    border: 1px solid @msg_alert_border;
    color: @msg_alert_text;
}

form input.seo-settings-input {
    width: 90%;
}

.previewTextIframe {
    width: 750px;
    height: 1500px;
    border: 0;
}

.secondaryActionButton, .row .secondaryActionButton {
    margin-left: 10px;
    background: @btn_green_bg;
}

form .bottomSeparator {
    border-bottom: 1px solid @border_color;
    padding-bottom: 10px;
}

/*
 * Customer Contact History
 */

.customerContactHistory {
    margin: 0;
    padding: 0;
}

.customerContactHistory li {
    list-style-type: none;
    margin: 0 0 20px;
}

.customerContactDate {
    margin: 0 0 10px;
    font-style: italic;
    font-size: 11px;
}

.customerContactSubject {
    font-weight: bold;
}

.customerContactMessage {
    clear: both;
}

.relative {
    position: relative;
}

.sizeHover {
    position: absolute;
    top: 50%;
    left: 100%;
    background: #fff;
    border-radius: 3px;
    z-index: 100;
    width: 250px;
    display: none;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 1px solid @mtc_blue;
}

.relative:hover .sizeHover {
    display: block;
}

.sizeHover table, .sizeHover table tr, .sizeHover table tr:hover {
    background: #fff;
}

/*
 * Page Content Class
 */

.pageContent {

    blockquote {
        .rems(20);
        font-weight: 700;
        margin: 0 0 15px;
        padding: 0;
        line-height: 26px;
        position: relative;

        p {
            margin: 0 0 5px;
            line-height: 26px;

            &:first-child {
                &:before {
                    content: '\201C';
                    display: inline;
                }
            }

            &:last-of-type {
                margin: 0;

                &:after {
                    content: '\201D';
                    display: inline;
                }
            }
        }

        cite {
            .rems(16);
            line-height: 1;
            font-style: italic;

            a {
                color: var(--text_color);
                text-decoration: none;

                &:hover {
                    text-decoration: none;
                }

            }
        }
    }

    /*
     * Tiny mce produces left and right images with these attributes
     */

    img[style="float: left;"] {
        margin: 5px 25px 25px 0;
    }

    img[style="float: right;"] {
        margin: 5px 0 25px 25px;
    }

    img[style="float: right;"], img[style="float: left;"] {

        @media @mobile {
            float: none !important;
            display: block;
            margin: 0 auto 25px;
        }

    }

    ul {
        margin: 0 0 0 30px;
        padding: 0 0 20px;

        li {
            list-style-type: disc;
        }
    }
}

/*
 * Sticky Save Button in CORE Admin Settings
 */

.settingsStickyRowWrap {
    float: left;
    width: 100%;
    position: relative;
    padding: 22.5px 0;

    .settingsFixedTitle {
        float: left;
        color: var(--mtc_blue);
        margin: 0 0 0 10px;
        .rems(20);
        font-family: var(--primary_font);
        font-weight: 600;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    input[type="submit"] {
        margin-bottom: 0;
    }

    &.fixed {

        .settingsFixed {
            position: fixed;
            top: 0;
            background: @page_bg;
            box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.15);
            width: ~"calc(100% - 330px)";
            padding: 22.5px 10px;
        }

        .settingsFixedTitle {
            opacity: 1;
        }
    }
}

/*
 * Component Manager
 */

.installedComponentWrap {
    padding: 20px;
    background: #fff;
    margin: 20px 0 30px;
    width: 100%;

    @media all and (min-width: (@mobile_width + 1)) {
        display: flex;
    }

    h3 {
        margin-bottom: 15px;
    }

    .installedComponent {
        background: @page_bg;
        padding: 20px;
        border-radius: 4px;

        @media all and (min-width: (@mobile_width + 1)) {
            .grid(2, 20px);
            margin-bottom: 0;
        }

        @media @mobile {
            width: 100%;

            + .installedComponent {
                margin: 20px 0 0;
            }
        }
    }

    ul {
        width: 100%;

        li {
            line-height: 25px;

            @media all and (min-width: 1500px) {
                .grid(2, 10px);
                margin-bottom: 0;
            }
        }
    }
}

.admin-chat-log-container {
    float: left;
    width: 46%;
    border-right: 1px solid #999999;
    margin-right: 3%;

    .member {
        position: absolute;
        bottom: 0;
        left: 0;

        &:last-child {
            right: 0;
            left: auto;
        }
    }

    .row label {
        width: auto;
    }

    input[type="checkbox"] {
        margin-right: 10px;
    }
}

.messagesOrderHistory {
    width: 50%;
    float: left;

    table {
        div.listOfItems {
            padding: 15px 0;

            table td {
                background-color: @row_message_history;
            }
        }
    }
}

ul.admin-chat-log {
    width: 95%;
    max-height: 600px;
    overflow: auto;
    margin: 0 auto;

    li {
        position: relative;
        clear: both;
        display: block;
        height: auto;
        width: auto;
        max-width: 50%;
        word-wrap: break-word;
        word-break: keep-all;
        text-align: left;
        line-height: 1.5em;
        margin: 2px 10px;
        padding: 10px;
        cursor: default;
        border-radius: 15px;
        color: #FFF;

        &:not(.right) {
            float: left;
            background: @chat_left_bg;

            &::before {
                content: "";
                position: absolute;
                top: 5px;
                left: -10px;
                border-top: 15px solid @chat_left_bg;
                border-left: 15px solid transparent;
            }
        }

        div.messageText {
            border-top: 1px solid rgba(255, 255, 255, 0.5);
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            padding: 20px 0;
        }
    }

    li.left {
        float: left;
        background: @chat_left_bg;

        &::before {
            content: "";
            position: absolute;
            top: 5px;
            left: -10px;
            border-top: 15px solid @chat_left_bg;
            border-left: 15px solid transparent;
        }
    }

    li.right {
        float: right;
        background: @chat_right_bg;

        &::before {
            content: "";
            position: absolute;
            bottom: 5px;
            right: -10px;
            border-bottom: 15px solid @chat_right_bg;
            border-right: 15px solid transparent;
        }

        &.private {
            background: @chat_right_bg;
        }
    }

    li.right.private {

        &::before {
            border-bottom: 15px solid @chat_private_bg;
        }

        background: @chat_private_bg;
    }
}

.reply-bar {
    textarea {
        display: block;
        width: 400px;
        height: 100px;
    }
}

table.doctor-table {
    tbody {
        tr a {
            color: #c7254e;
        }

        .disabled {
            background: #dbdbdb !important;

            a {
                color: #2ca02c;
            }
        }
    }
}

tbody.black-list {
    tr.hard-blacklist {
        td {
            background: rgba(255, 94, 113, 0.3);
        }
    }
}

.doctor-approve-row {
    clear: both;
    display: block;
    padding-top: 30px;

    .btn:first-child {
        margin-right: 20px;
    }


    .actionsIcon {
        margin-left: 10px;
    }

    .nowrap {
        white-space: nowrap;
    }
}

.addQuestion {
    a {
        float: right;
    }
}

.saveAndAdd {
    margin-left: 10px;
}

.showIfQuestion {
    width: 300px;
}

.message-chosen {
    float: left;

    .chosen-container {
        width: 200px;
    }

    button {
        margin-left: 20px;
    }

    .chosen-container,
    button {
        display: inline-block;
    }
}

.view-message,
.delete-message {
    display: inline-block;
    margin-top: 10px;
    margin-left: 20px;
}

.delete-message {
    color: #c7254e;
}

.emailStats {
    td, th {
        padding: 10px;
    }

    th {
        width: 20%;
        min-width: 100px;
    }
}

/*
 * Colours
 */
@text_color: #5f5f5f;
@primary_color: #0f55c4;
@secondary_color: #0f55c4;
@blue: #0f55c4;
@green: @btn_green_bg;
@highlight_color: #0f55c4;

@import 'dynamic_after.less';

.schemaPreview {
    padding: 20px;

    pre {
        font-size: 0.9em;
        padding: 30px;
        background-color: @table_stripe_bg;
        border: solid 1px var(--border_color);

    }

    textarea {
        width: 100% !important;
        height: 500px;
    }
}

.withLeftMargin {
    margin-left: 20px;
    margin-bottom: 10px;
}

.btn:disabled, .btn.disabled {
    opacity: 0.7;
}

.statusChange {
    margin-bottom: 40px;
    border: solid 1px #ddd;
    padding: 20px;
}

.marginTop {
    margin-top: 40px;
}

h3.deliveryMethodName:not(:first-child) {
    margin-top: 60px;
}

.orderVerified {
    display: inline-block;
    padding: 0 5px;
    color: #00aa00;
}

.tabular input.wide.text {
    width: 80%;
}

.btn.btn-red {
    background: @btn_red_bg;
    background: -webkit-linear-gradient(top, @btn_red_bg, @btn_red_dark);
    background: -moz-linear-gradient(top, @btn_red_bg, @btn_red_dark);
}

.btn.btn-grey {
    background: @btn_grey_bg;
    background: -webkit-linear-gradient(top, @btn_grey_top, @btn_grey_bg);
    background: -moz-linear-gradient(top, @btn_grey_top, @btn_grey_bg);
}

.btn.btn-green {
    background: @btn_green_bg;
    background: -webkit-linear-gradient(top, @btn_green_top, @btn_green_bg);
    background: -moz-linear-gradient(top, @btn_green_top, @btn_green_bg);
}

.btn.btn-black {
    background: @btn_black_bg;
    background: -webkit-linear-gradient(top, @btn_black_top, @btn_black_bg);
    background: -moz-linear-gradient(top, @btn_black_top, @btn_black_bg);
}

tr td.black {
    background: #323234;
    color: #ccc;
}

.perPage .selected {
    text-decoration: underline;
}

.hasUnreadAdmin {
    background: @row_unread_admin !important;
}


/*
 * Notification Styles
 */

.success, .error, .alert {
    margin: 0 0 15px 0;
    padding: 9px 13px !important;
    clear: both;
    text-align: left;
    .rems(16);
    border: 0;
    position: relative;
    border: none !important;
    font-size: 13px;
    margin: 0;

    a {
        text-decoration: underline;
    }

    &:after {
        position: absolute;
        top: 50%;
        right: 15px;
        left: auto;
        .transform(translateY(-50%));
    }
}

.btn.alert {
    padding: 0 13px !important;
}

.success {
    color: var(--success_color);
}

.error {
    color: var(--alert_color);
}

.alert {
    color: var(--highlight_color);
}

.privatePrescriptionItemRow {
    td {
        background-color: @row_private_rx;
    }
}

.orderItemStatus {
    font-weight: bold;

    &.approved {
        color: var(--success_color);
    }

    &.rejected {
        color: var(--alert_color);
    }

}

.orderWaiting {
    td {
        background-color: @row_waiting;
    }
}

.red {
    color: var(--alert_color);
}

.beige {
    color: #e5a553;
}

.recurringOrder {
    td {
        background-color: @row_recurring;
    }
}

.hasPatientNotes {
    td {
        background-color: @row_patient_notes;
    }
}

tr {
    &.list-brown td {
        background-color: rgba(181, 98, 27, 0.8);
    }

    &.list-black td {
        background-color: rgba(173, 19, 19, 0.8);
        color: #ccc;

        a {
            color: #ddd !important;
        }
    }
}

select.headerFilter {
    width: 100px !important;
    min-width: 100px !important;
}

.orderItemRow {
    &.active {
        td {
            background-color: @row_active_item;
        }
    }
}

#processing_action, #bulk_status_change {
    width:auto;
}

.questionAttributesTable {
    td {
        padding: 15px 0;
    }
}

.sizeLabelsContainer {
    display: inline-block;
    position: relative;

    div.labelList {
        position: absolute;
        top: -200px;
        left: -200px;
        background-color: #FFF;
        border: 1px solid #CCC;
        padding: 10px;
        width: 600px;
        z-index: 50;
    }

    div.labelListClose {
        position: absolute;
        right: 5px;
        top: 0px;
        cursor: pointer;
        font-size: 20px;
    }

    i {
        line-height: 34px;
        cursor: pointer;
    }
}

form .row.checkboxRow label {
    width: auto;
    margin-left: 10px;
}

form .row.checkboxRow label {
    width: auto;
    margin-left: 10px;
}

form .row.checkboxRow label {
    width: auto;
    margin-left: 10px;
}

form .row.checkboxRow label {
    width: auto;
    margin-left: 10px;
}

.removeForm {
    margin: 0;

    button {
        background: none;

    }
}

table td .redBG {
    background: rgba(255, 0, 0, 0.7);
    color: #fff;
}

table td .yellowBG {
    background: rgba(247, 255, 0, 0.7);
}

tr.assessmentRow {
    &.rowAlert {
        color: #ffa500;
    }
    &.rowBlock {
        color: #ff0000;
    }
    &.rowOkay {
        color: #00cc00;
    }
}

.orderLabel {
    background: #1a4556;
    color: #eeeeee;
    display: block;
    font-size: 0.8em;
    margin: 1px;
    padding: 2px 6px;
}

.orderLabelOrange {
    background: #cd5c26;
}

.orderLabelOrangeInactive {
    background: #cc8866 !important;
    color: #f3f3f3 !important;
    font-size: 0.8em;
    height: auto !important;
}

.orderLabelOrangeInactive a {
    color: #f3f3f3;
}

.multisiteSwitchWrapper {

    background: #e6e6e6;
    float: left;
    position: relative;
    top: -40px;
    left: -40px;
    padding: 30px 40px 0px 40px;
    width: ~"calc(100% + 80px)";

    @media @tablet, @mobile {
        top: -20px;
        left: -20px;
        padding: 20px 20px 0px 20px;
        width: ~"calc(100% + 40px)";
    }

    .multisiteSwitchContent {
    }

}

.purchasedate {
    & > table {
        tr {

            & > td {

                vertical-align: center !important;
                padding: 4px 0 !important;

                &:first-child {
                    width: 120px !important;
                }
            }

            .row {

                margin: 0;

                form {
                    margin: 0;
                }
            }

        }
    }
}


#ordernotetext {
    width: 100%;
    min-height: 140px;
}

.recommendedItemBubble {
    position: relative;
    div {
        min-width: 500px;
        display: none;
        border: 1px solid #666;
        box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
        position:absolute;
        bottom: 15px;
        white-space: nowrap;
    }
    &:hover {
        div {
            display: block;
        }
    }
    p {
        padding-top: 10px;
    }
}
