body {
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    cursor: default;
}

html {
    width: 100%;
    height: 100%;
}

.font-weight-normal{
    font-weight:normal;
}

textarea.no-resize {
    -moz-resize: none;
    -ms-resize: none;
    -o-resize: none;
    resize: none;
}

.js-form-modal-radio input[type=radio] {
    display: none;
}

    .js-form-modal-radio input[type=radio] + label a {
        pointer-events: none;
    }

tr:hover .js-form-tag {
    border-color: lightgray;
}

.js-form-tag {
    border: 1px solid transparent;
    display: inline-block;
    width: 100%;
    height: 100%;
}

    .js-form-tag ul.tags {
        list-style: none;
        margin: 0;
        padding: 0;
        float: left;
        min-height: 2em;
    }

        .js-form-tag ul.tags .js-tag a:hover {
            cursor: text;
            text-decoration: none;
        }

        .js-form-tag ul.tags a[contenteditable=true] {
            border: none !important;
            outline: none;
        }

        .js-form-tag ul.tags li {
            font-size: 14px;
            border-radius: 4px;
            background: #3D365F;
            margin: 0 0 0 5px;
            border: solid 1px #efefef;
            float: left;
            clear: none;
            position: relative;
            padding: 5px;
        }

            .js-form-tag ul.tags li a {
                margin: 10px 10px 20px;
                color: #eee !important;
            }

            .js-form-tag ul.tags li .glyphicon {
                font-size: 9pt;
                font-weight: normal;
                float: right;
                color: #eee;
                margin-top: 4px;
                cursor: pointer;
            }

.js-form-modal-radio input + label a.thumbnail {
    border: solid 1px transparent;
    transition: border ease-in-out 0.1s;
    -webkit-transition: border ease-in-out 0.1s;
}

.js-form-modal-radio input:checked + label a.thumbnail {
    background: transparent;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 6px;
}

    .js-form-modal-radio input:checked + label a.thumbnail:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: #3D365F;
        opacity: 0.3;
    }

.thumbnail-wrapper {
    margin: 2px;
    width: 200px;
    height: 200px;
    display: inline-block;
    background: transparent;
    text-align: center;
}

    .thumbnail-wrapper a.thumbnail {
        position: relative;
        height: auto;
        width: auto;
        margin: 0;
        padding: 0;
        display: table;
    }


.js-form-partial-delete {
    position: relative;
}

/*#region prohibit override setting */
.js-prohibit-override-setting {
    top: -25px;
    left: -24px;
    position: relative;
    display: inline-block;
    width: 14px;
    height: 16px;
    cursor: pointer;
    -ms-opacity: 1;
    opacity: 1;
    color: #999;
}

    .js-prohibit-override-setting.prohibitoverride, .js-prohibit-override-setting:hover {
        -ms-opacity: 0.4;
        opacity: 0.4;
        color: #ccc;
    }

.js-setting-info {
    cursor: pointer;
    float: right;
    position: relative;
    top: -25px;
    right: -30px;
    color: #ccc;
}

/*#endregion prohibit override setting */

.js-table-togglesorting:after {
    font-family: 'Glyphicons Halflings';
    content: "\e113";
    color: #333;
    top: 2px;
    left: 5px;
    position: relative;
}

.js-table-togglesorting.selected:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    color: #333;
    top: 4px;
    left: 5px;
    position: relative;
}

/*#region generic styles */
.table-filter-btn {
    background: transparent;
}

    .table-filter-btn:focus {
        border: 0;
    }

.field-validation-error {
    color: red;
    margin-top: 5px;
}

.vertical-align {
    display: flex;
    align-items: center;
}

#category-items-form .field-validation-error,
#section-categories-form .field-validation-error {
    display: inline-block;
    float: right;
    margin: 0 0 10px 0;
    font-style: italic;
}

.dropdown-toggle.input-validation-error {
    border-color: red;
}

#category-items-form .mandatory::after,
#section-categories-form .mandatory::after,
#item-button-form .mandatory::after {
    content: " *";
    color: #3D365F;
}

.categoryItemContainer {
    border-left-width: 10px !important;
    border-left-color: #939293 !important;
}

.visibleCategoryItem,
.visibleItemModifierOption,
.visibleItemModifierMealGroupItem,
.visibleSectionCategory,
.visibleItemItemModifier,
.visibleAvailabilityPeriod {
    border-left-color: #1BA8AE !important;
}
#categories-list-container {
    margin-top: -1%;
}

div.categories-row-header p {
    font-weight: bold;
}

.bs-callout-link {
    font-size: 14px;
    color: #3D365F!important;
}

.bs-callout-no-left-border{
    border-left-color: #dfdede;
    border-left-width:1px;
}

#ms-add-items-list, #ms-add-teaser-items-list {
    width: auto;
}

#create-item-link,
#create-category-link {
    margin-right: 10px;
}

.search-container > input[placeholder="Search"] {
    outline: none;
    border: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    width: 100%;
    background: transparent;
    position: absolute;
}

.breakword {
    word-wrap: break-word;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.highlighted{
    background-color:yellow;
}

.styled-hr {
    border: 1px solid #ccc;
}

.readonly-no-bg[readonly] {
    background-color: #fff;
    opacity: 1;
}
/*#endregion */


/*#region layout */

.main {
    /*padding: 0 40px !Important;*/
    margin-top: 50px;
}

    .main > section {
        padding: 0 40px;
    }

@media (min-width: 768px) {
    /*.main {
		padding-right: 40px;
		padding-left: 40px;
	}*/
    .main > section {
        padding-right: 40px;
        padding-left: 40px;
    }
}

#wrapper #top-fixed-menu-container {
    padding: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1030;
    background-color: #ffffff;
    -webkit-transition: width 0.4s ease-out;
    -moz-transition: width 0.4s ease-out;
    -ms-transition: width 0.4s ease-out;
    -o-transition: width 0.4s ease-out;
    transition: width 0.4s ease-out;
}

#wrapper #fix-to-top-2nd-level {
    background: #fff;
    border-bottom: 1px #ccc solid;
    position: fixed;
    top: 106px;
    right: 0;
    background: #fff;
    width: calc(100% - 250px);
    -webkit-transition: width 0.4s ease-out;
    -moz-transition: width 0.4s ease-out;
    -ms-transition: width 0.4s ease-out;
    -o-transition: width 0.4s ease-out;
    transition: width 0.4s ease-out;
    z-index: 1009;
    min-height: 40px;
}

#wrapper.toggled #fix-to-top-2nd-level {
    width: 100%;
}

#fix-to-top-2nd-level > #scroll-menu > li {
    font-size: 13px;
    /*font-style: italic;*/
}

    #fix-to-top-2nd-level > #scroll-menu > li > a,
    #fix-to-top-2nd-level > #scroll-menu > li:hover > a {
        padding: 10px 20px;
        padding-bottom: 8px;
        background: none;
    }



/*#endregion */

.displaymessage {
    padding: 10px 0 10px 0;
}

.edit-form {
    display: none;
}

/*#region top-title-bar */
#top-title-bar {
    position: fixed;
    top: 51px;
    border-bottom: 1px #ccc solid;
    min-height: 40px;
    z-index: 1010;
    background: #fff;
    right: 0;
    width: calc(100% - 250px);
    -webkit-transition: width 0.4s ease-out;
    -moz-transition: width 0.4s ease-out;
    -ms-transition: width 0.4s ease-out;
    -o-transition: width 0.4s ease-out;
    transition: width 0.4s ease-out;
}

div#wrapper.toggled #top-title-bar {
    width: 100%;
}

#top-title-bar hr {
    margin: 60px 0 0 0;
}

#top-title-bar-placeholder-left {
    float: left;
}

    #top-title-bar-placeholder-left ul {
        margin: 15px;
    }

    #top-title-bar-placeholder-left li {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
    }

        #top-title-bar-placeholder-left li a {
            color: #cacaca;
        }

#top-title-bar-placeholder-middle {
    float: left;
    margin: 0 auto 0 20px;
}

#top-title-bar-placeholder-right {
    float: right;
    margin: 10px 0 10px 0;
}

#top-title-bar-placeholder-middle .add-button {
    margin: 17px auto;
    display: block;
}

.appendTo {
    display: none;
}
/*#endregion btn-save-container */

/*#region iris-icons*/
.guest-valet-icon {
    background-image: url("http://www.irisapps.com/assets/Uploads/iRiS-Guest-Valet-1024-x-4.png");
}

.form-icon {
    width: 40px;
    height: 40px;
    background-size: cover;
    margin: 0 auto;
}

.fb-icon {
    background-image: url("http://www.irisapps.com/assets/Uploads/FB-App-Icon.png");
}

.lobby-icon {
    background-image: url("http://www.irisapps.com/assets/Uploads/Lobby-1024-x-2.png");
}
/*#endregion iris-icons*/

/*#region rule-info */

.rule-info {
    visibility: hidden;
    display: inline-block;
    float: right;
    min-width: 200px;
    background: rgba(173, 216, 230, 0.27);
    color: #60777E;
    padding: 5px;
    text-align: center;
    line-height: 20px;
}

    .rule-info.active {
        visibility: visible;
    }

/*#endregion rule-info*/

/*#region grid */

.list-header {
    display: flex;
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    padding: 0 0 5px 0;
}

.display-row {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    clear: both;
}

.edit-row .row {
    margin-bottom: 5px;
}

.display-row.selected {
    background: #ebebeb;
}

    .display-row.selected .arrow-on-left:after {
        content: "\e260";
    }


/*#endregion grid */

/*#region SITE SETUP */

/*#region user-settings */

#user-list, #role-list {
    clear: right;
}

#user-settings-partial .user-options {
    margin: 10px;
}


#user-settings-partial .edit-row {
    display: inline;
}



/*#endregion user-settings */

/*#region room-settings */
#room-options {
    margin: 10px 0 30px 0;
}

#room-settings-header {
    display: inline;
    margin-right: 10px;
}

.edit-form {
    display: none;
}

.js-form-table-options {
    display: none;
}

.options-container {
    min-height: 35px;
}
/*#endregion room-settings*/

/*#region system-operational-settings*/
#system-settings-form .form-icon {
    float: left;
    margin-left: 17px;
}

.hidelanguageflagtitlecontainer {
    padding-left: 0px;
    margin-top: 20px;
}

.hidelanguageflagcontainer {
    padding-left: 10px;
    margin-top: 20px;
    padding-right:0px;
}

@media screen and (max-width: 992px) {
    .hidelanguageflagcontainer {
        padding-left: 0px;
    }
}

/*#endregion system-operational-settings*/

/*#region appsettings*/

/*#endregion appsettings*/

/*#endregion SITE SETUP */


/*=====================================================================================*/
/*=============================	Guest Centres Styling	===============================*/
/*=====================================================================================*/
/*#region JS function classes */

.js-tab-menu {
    /*position: absolute;*/
    list-style-type: none;
    padding: 0 0 0 20px;
    border-color: #999;
    line-height: 35px;
}

    .js-tab-menu li {
        text-align: center;
        display: block;
        float: left;
    }

        .js-tab-menu li > a {
            color: #999;
            border-color: #ddd #ddd #999 !important;
            margin-right: 0;
        }

        .js-tab-menu li.active > a,
        .js-tab-menu li.active > a:hover,
        .js-tab-menu li.active > a:focus {
            border-color: #999 !important;
            border-bottom-color: transparent !important;
            color: #3D365F;
            cursor: pointer !important;
        }

/*#endregion JS function classes */



/*#region Bootstrap candidates*/

/*#region badges*/
#guest-centre-nav-menu > .js-tab-menu li > a {
    padding: 10px 5px 10px 15px;
}


.item-counter-badge {
    font-size: 10px;
    line-height: 1.3;
    margin-left: -2px;
    margin-top: -40px;
    font-weight: normal;
}

.menu-counter-badge,
.item-counter-badge {
    display: none;
}


    .item-counter-badge.pending-counter {
        background: #fde8e6;
        color: #e83b3c;
    }

li.active > a > .item-counter-badge.pending-counter {
    background: #e83b3c;
    color: #ffffff;
}

.item-counter-badge.acknowledged-counter {
    background: #feeddc;
    color: #f08219;
}

li.active > a > .item-counter-badge.acknowledged-counter {
    background: #f3932d;
    color: #ffffff;
}

.item-counter-badge.unread-counter {
    color: white;
    background-color: blue;
}

li.active > a > .item-counter-badge.unread-counter {
    background: blue;
    color: #ffffff;
}


/*#endregion badges*/

/*#region filter*/
#filter-container {
    line-height: 35px;
    height: 36px;
    margin-top: 18px;
}

#filter-label {
    border: 1px solid #999;
    border-radius: 7px 0 0 7px;
    /*color: #3D365F;*/
    text-align: center;
}

#filter-content {
    border: 1px solid #999;
    border-radius: 0 7px 7px 0;
    padding-top: 0;
    padding-bottom: 0;
    font-family: FontAwesome;
}
/*#endregion filter*/

/*#region collapse arrows*/
.arrow-on-left:after {
    font-family: "Glyphicons Halflings";
    content: "\e259";
    float: left;
    /*color: #3D365F;*/
    margin: 0 15px 0 0;
}

.arrow-on-right:after {
    font-family: "Glyphicons Halflings";
    content: "\e259";
    color: #333;
    margin: 0 0 0 15px;
}

tr.selected .arrow-on-left:after,
tr.selected .arrow-on-right:after,
.arrow-on-left.selected:after,
.arrow-on-right.selected:after {
    content: "\e260";
}

/*#endregion collapse arrows*/

/*#region generics*/
.align-right {
    float: right;
    margin-right: 10px;
}

.align-left {
    float: left;
    margin-left: 10px;
}

.fa {
    color: #999;
}

.text-in-gray {
    color: #999;
}

.text-in-black {
    color: #333333;
}
.text-in-white {
    color: white;
}

.item-title {
    font-weight: bold;
    font-size: 14px;
}

.item-indented {
    margin: 0 0 0 15px;
}

.item-indented-bold {
    margin: 0 0 0 15px;
    font-weight: bold;
}

.scroller-right {
    float: right;
}

.scroller-left {
    float: left;
}

.scroller {
    padding-top: 15px;
    color: #3D365F;
}

.inactive {
    opacity:0.4;
}
/*#endregion generics*/

#orderCentreContentContainer {
    clear:both;
}

#fullMessageContainer {
    padding: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: #fafafa;
    min-height:700px;
    max-height: 700px;
    overflow-x: hidden;
    overflow-y: auto; 
}
/*#endregion Bootstrap candidates*/
/*#region OrderCentres and Service Centres */
/* #region Changes that depend on the step */
/* POST */
.action-detail-step-post #action-execute-button {
    background-color: #e83b3c;
}

/* ACKNOWLEDGE */
.action-detail-step-acknowledge #action-execute-button {
    background-color: #f3932e;
}

/* ONTHEWAY */
.action-detail-step-ontheway #action-execute-button {
    background-color: #f5d43b;
}

/* COMPLETE */
.action-detail-step-complete #action-execute-button {
    background-color: #3D365F;
}

.action-detail-step-complete.action-detail-status-success #action-execute-button {
    background-color: #63a4fe;
}

/* END COMPLETE */

/* CANCEL */

#action-execute-button.cancel-button {
    background-color: #63a4fe;
    margin-top: 30px;
}

/* END CANCEL*/

/* COMMON TO ALL STEPS */
.action-detail-status-error #action-system-message:before {
    font-family: "FontAwesome";
    content: "\f00d";
    color: red;
    margin-right: 10px;
}

.action-flow-button > .action-flow-success:before {
    font-family: "FontAwesome";
    content: "\f00c";
    color: #d3d3d3;
    margin-right: 10px;
}

.action-flow-button > .action-flow-error:before {
    font-family: "FontAwesome";
    content: "\f00d";
    color: #d3d3d3;
    margin-right: 10px;
}

/* END COMMON TO ALL STEPS */

/* #endregion Changes that depend on the step */

/*#region Change that depend on the status of the order/request*/
.item-status {
    border: 1px solid #ebebeb;
    -ms-border-radius: 3px;
    border-radius: 3px;
    padding: 5px 25px 5px 25px;
    text-align: center;
}

.item-status-pending {
    background-color: #fde8e6;
    border-color: #ed6751;
    color: #ed6751;
}

.item-status-acknowledged {
    background-color: #feeddc;
    border-color: #f3932d;
    color: #f08218;
}

.item-status-delivering {
    background-color: #fbf8d0;
    border-color: #e0bc19;
    color: #cdaa07;
}

.item-status-completed {
    background-color: #f4f6e6;
    border-color: #63911A;
    color: #63911A;
}

.item-status-cancelled {
    background-color: #f1f1f1;
    border-color: #9f9e9f;
    color: #949394;
}

.item-status-senttopos {
    background-color: #fbf8d0;
    border-color: #e0bc19;
    color: #cdaa07;
}

.item-status-failedinpos {
    background-color: #fde8e6;
    border-color: #ed6751;
    color: #ed6751;
}

.item-status-readyforpickup {
    background-color: #f4f6e6;
    border-color: #63911A;
    color: #63911A;
}

/*#endregion Change that depend on the status of the order/request*/

/*#region Action flow*/
#action-flow-container {
    margin-top: 15px;
}

#action-detail-footer {
    position: relative;
    bottom: 0;
    margin-top: 30px;
}

#action-execute-button {
    -ms-border-radius: 1px;
    border-radius: 1px;
    color: #FFF;
    float: right;
    padding: 5px 25px 5px 25px;
    box-shadow: 2px 2px 2px #d3d3d3;
    cursor: pointer;
}

#action-leave-message {
    float: left;
    color: #939393;
}

    #action-leave-message i {
        color: #63a4fe;
        margin-right: 10px;
    }

#action-menu-dropdown {
    cursor: pointer;
}

#action-system-message {
    margin-top: 15px;
}

.action-message-tosend-radiobutton:not(:first-of-type) {
    margin-left: 100px;
}

.action-message-tosend-radiobutton > input {
    margin-right: 10px;
}


#action-message-useguestlanguage-checkbox {
    float: right;
}

#action-message-tosend-container {
    margin-top: 15px;
}

.action-message-tosend-content {
    margin-top: 15px;
    border-color: #d3d3d3;
    resize: none;
    height: 100px;
    width: 100%;
    border-width: 2px;
}

#action-message-tosend-dropdown {
    margin-top: 15px;
    border-width: 2px;
    border-color: #939393;
    background-color: #d3d3d3;
    padding: 10px;
    height: auto;
}

    #action-message-tosend-dropdown > option {
        background-color: #d3d3d3;
    }

#action-system-reference-container {
    margin-top: 15px;
}

#action-system-reference-title {
    color: #939393;
}

#action-system-reference-content {
    color: #939393;
    font-weight: bold;
}

#action-title {
    float: left;
}

#action-close-button {
    float: right;
    cursor: pointer;
}

.action-history-detail-user-message,
.action-history-detail-use-guest-language,
.action-history-detail-reference {
    color: #939393;
}

.action-history-detail-user-message-text {
    font-style: italic;
}

.action-history-time {
    text-align: right;
    color: #939393;
    font-weight: bold;
    padding-right: 0;
}

.action-history-date {
    color: #939393;
    font-weight: bold;
    padding-left: 15px;
}

#action-user-message-sent-title {
    color: #939393;
    margin-top: 15px;
}

#action-guest-language-used {
    color: #939393;
    margin-top: 5px;
    margin-left: 5px;
}
/*#endregion Action flow*/
/*#region nav menu*/
#guest-centre-nav-menu {
    position: relative;
    overflow: hidden;
    padding: 15px 0 15px 0;
    height: 70px;
}
    #guest-centre-nav-menu > ul {
        white-space: nowrap;
        padding-left: 0;
    }
        #guest-centre-nav-menu > ul > li {
            float: none;
            display:inline-block;
        }
            #guest-centre-nav-menu > ul > li > a {
                margin-right: -4px;
            }
/*#endregion nav menu*/
/* #region Order/Request table header */

#item-list-table-header .sort-arrow-down:after,
#item-list-table-header .sort-arrow-up:after {
    font-family: "Glyphicons Halflings";
    font-size: 10px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 5px;
}

.sort-arrow-down:after {
    content: "\e259";
}

.sort-arrow-up:after {
    content: "\e260";
}

#item-list-status-header {
    position: relative;
}

    #item-list-status-header i {
        color: #333;
        margin-left: 17px;
    }

#item-list-payment-status-header {
    position: relative;
}
    #item-list-payment-status-header i {
        color: #333;
        margin-left: 17px;
    }

.pointer-cursor {
    cursor: pointer;
    position: relative;
    padding-right: 15px;
    margin-right: 10px;
    white-space: nowrap;
}

.pointer-cursor.hover-color-change:hover {
    color: #999;
}
/* #endregion Order/Request table header */
/*#region generics*/
#item-list-container tr.selected {
    background: #ebebeb;
}

.item-list-internal-container {
    padding: 15px !important;
    background: #ebebeb;
    border-top: 0 !important;
}

.item-list-internal-container > div {
    background: #FFF;
    display:table;
    width:100%;
}

.item-list-internal-container .item-title {
    margin:15px;
}
.item-list-internal-container .collapse-order-item-action {
    margin:15px;
}

.line-separator-detail-action {
    width: 100%;
    margin-bottom: 0;
    margin-top: 20px;
    border-top: 0;
    border: 0;
}

#show-all-items-toggler {
    float: right;
    padding-top:7px;
}

#item-action-menu-container {
    float: right;
}

.orders-test-item-image {
    width: 20px;
    height: 20px;
    margin-top: -2px;
}


/*#endregion generics*/
/*#endregion OrderCentres and Service Centres */
/*#region Order Centres */
/*#region order details */
#order-items-table {
    width: 100%;
    color: #999;
    margin-top: 10px;
}

    #order-items-table td {
        padding: 5px 0 5px 0;
    }

    #order-items-table tbody tr:not(#order-item-comments) {
        border-top: 1px solid #ebebeb;
    }

    #order-items-table tr:not(#order-item-comments) td:not(:first-of-type),
    #order-items-table tr th:not(:first-of-type) {
        text-align: right;
    }

#order-item-guest-comments {
    margin: 10px 0 30px 0;
}
/*#endregion order details */
/*#endregion Order Centres */

/*#region Request Centres */

/*#region request details */
#request-items-table {
    width: 100%;
    color: #999;
    margin-top: 10px;
}

    #request-items-table td {
        padding: 5px 0 5px 0;
    }

    #request-items-table tbody tr:not(#request-item-comments) {
        border-top: 1px solid #ebebeb;
    }

    #request-items-table tr:not(#request-item-comments) td:not(:first-of-type),
    #request-items-table tr th:not(:first-of-type) {
        text-align: right;
    }

#request-item-guest-comments {
    margin-top: 10px;
}
/*#endregion request details */
/*#endregion Request Centres */


/* #region Internal Messages */

.internal-message-name {
    font-weight: bold;
}

.internal-message-time {
    color: #939393;
}

.internal-message-container:not(:last-child) > div:last-child {
    border-bottom: 2px solid #d3d3d3;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.internal-message-balloon {
    margin-top: -26px;
    float: right;
}


/* #endregion Internal Messages */

/*#region To be replaced by images from styling*/
.order-category-food:before {
    content: "\f0f5";
}

.order-category-food:after {
    content: "In Room Dining";
    margin-left: 10px;
    white-space: nowrap;
}

/*#endregion To be replaced by images from styling*/
/*=====================================================================================*/

.js-paging-media table {
    table-layout: fixed;
}
/*#region media-library */
a.js-modal-media {
    margin-left: 10px;
}

.js-media-gallery .checkbox {
    /*margin: 0;*/
    padding-left: 0;
}

    .js-media-gallery .checkbox label > img {
        width: 100%;
    }

    .js-media-gallery .checkbox label:before,
    .js-media-gallery .checkbox label:after {
        margin: 5px 10px;
    }

.js-media-gallery .media-gallery-image-label {
    font-size: smaller;
    margin-left: 5px;
}

.js-media-gallery td {
    position: relative;
    border: 1px solid #ccc;
    min-height: 200px;
}

.btn-view {
    width: 20px;
    height: 20px;
    display: inline-block;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    border: solid 1px #ddd;
    margin-right: 4px;
}

    .btn-view > input[type=radio]:checked {
        background: #F00;
        display: inline-block;
    }

    .btn-view:hover {
        background-color: #eee;
        border-color: #ccc;
    }

.btn-listview {
    background-image: url(/Images/contentmanagement/listview-image.png);
}

.btn-thumbview {
    background-image: url(/Images/contentmanagement/thumbview-image.png);
}

.btn-view.selected {
    border: solid 1px #aaa;
}

input[class*=toggle-button]:checked + .btn-view {
    border: solid 1px #aaa;
}

table.edit {
    min-height: 200px;
}

div.table-wrapper table {
    border: solid 1px #aaaaaa;
    margin-bottom: 18px;
}

div.table-wrapper.hover {
    background: #eee;
    border-style: dashed;
    border-width: 3px;
}

table.upload {
    min-height: 100px;
}

    table.upload.empty tbody td.dropFiles {
        font-size: 30pt;
        opacity: 0.1;
        text-align: center;
        font-family: sans-serif;
        font-weight: bolder;
    }

table.table.media-library img {
    max-height: 50px !important;
    width: auto;
}

table.table.media-library span.file-binary {
    border: solid 1px;
    width: 20px;
    height: 20px;
    display: inline-block;
}

table.table.media-library tbody:not(.js-tab-upload) tr:hover {
    background: #eee;
}

table.table.media-library thead th:last-child {
    width: 350px;
}

/*#region resizable-handle style */
.inner-resizable-handle {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    left: 0 !important;
    top: 0 !important;
    margin: 0;
    padding: 0;
}

    .inner-resizable-handle.disabled > .ui-resizable-handle {
        display: none;
    }

.ui-resizable-handle {
    position: absolute;
    opacity: 0.3;
    width: 8px;
    height: 8px;
    background: #F00;
}

.ui-resizable-n {
    top: 0;
    left: 50%;
    cursor: n-resize;
}

.ui-resizable-s {
    bottom: 0;
    left: 50%;
    cursor: s-resize;
}

.ui-resizable-e {
    cursor: e-resize;
    right: 0;
    top: 50%;
}

.ui-resizable-w {
    cursor: w-resize;
    left: 0;
    top: 50%;
    right: 0;
}

.ui-resizable-nw {
    top: 0;
    left: 0;
    cursor: nw-resize;
}

.ui-resizable-ne {
    top: 0;
    right: 0;
    cursor: ne-resize;
}

.ui-resizable-sw {
    bottom: 0;
    left: 0;
    cursor: sw-resize;
}

.ui-resizable-se {
    bottom: 0;
    right: 0;
    cursor: se-resize;
}

.resize-handle-se {
    cursor: se-resize;
    float: right;
}
/*#endregion resizable-handle */

/*#region overlay */
.crop-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay-table {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    display: table;
    /*pointer-events: none;*/
    z-index: 999;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .overlay-table::selection,
    .overlay-table::-moz-selection,
    .overlay-table::-webkit-selection {
        background: transparent;
    }

.overlay-row {
    display: table-row;
}

.overlay-cell {
    display: table-cell;
    vertical-align: middle;
    background: #000;
}

    .overlay-cell:not(.overlay) {
        opacity: 0.5;
    }

.overlay.resizable {
    border: solid 1px #F00;
    /*pointer-events: none;*/
    border: dashed 2px rgba(222,60,80,.9);
}

.overlay {
    background: transparent;
    color: #FFF;
    /*resize: both;*/
    overflow: auto;
    border: solid 2px #aaa;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    left: 0 !important;
    top: 0 !important;
}

    .overlay:before {
        content: attr(data-text);
        font-weight: bold;
        font-family: sans-serif;
        text-shadow: 0 0 3px #000;
    }

    .overlay:not(.resizing) {
        -webkit-transition: width 300ms ease-in-out, height 300ms ease-in-out;
        -moz-transition: width 300ms ease-in-out, height 300ms ease-in-out;
        -o-transition: width 300ms ease-in-out, height 300ms ease-in-out;
        transition: width 300ms ease-in-out, height 300ms ease-in-out;
    }

    .overlay:hover {
    }
/*#endregion overlay */

/*#region slider */
.ui-slider label, .ui-slider input[type=range] {
    float: left;
    margin-right: 4px;
}

    .ui-slider input[type=range], .ui-slider label:after {
        font-size: 9pt;
    }

    .ui-slider label:after {
        display: inline-block;
        border: none;
        float: right;
        background: #eee;
        width: 30px;
        content: attr(data-range);
        text-align: center;
    }

input[type=range] {
    -webkit-appearance: none;
    width: auto;
    height: auto;
}

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: #3D365F;
        border-color: #3D365F;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        width: 10px;
        min-height: 10px;
    }

    input[type=range]::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        background: #eee;
    }

    input[type=range]::-webkit-slider-thumb {
    }

    input[type=range]:before {
        content: attr(min);
        font-weight: bold;
        margin-right: 4px;
    }

    input[type=range]:after {
        content: attr(max);
        font-weight: bold;
        margin-left: 4px;
        font-size: 8pt;
    }

.crop-container {
    position: relative;
    display: table;
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    float: left;
}
/*#endregion slider */

.resize-container {
    width: 100%;
    display: inline-block;
    float: left;
}

.image-wrapper {
    width: 100%;
    display: inline-block;
    position: absolute;
    left: 0;
}

.crop-container > img {
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    display: none;
}

#result > img {
    display: none;
}

#result ul {
    list-style: none;
    margin: 0;
}

.crop-result-wrapper {
    max-height: 100px;
    overflow: hidden;
    overflow-y: auto;
}

    .crop-result-wrapper table tbody {
    }

.crop-result .crops img {
    float: left;
    margin: 2px 10px;
}


table.crop-result {
    width: 100%;
}

    table.crop-result img {
        max-height: 80px;
    }



    table.crop-result td {
        padding-bottom: 5px;
        border: solid 1px #ddd;
        left: 0;
        width: auto;
    }

    table.crop-result tr.selected {
        background: #acd;
    }

    table.crop-result tr:hover {
        background: #eee;
    }

    table.crop-result tr.selected:hover {
        background: #ccc;
    }

    table.crop-result input[type=number].size {
        width: 40px;
    }

input[type=number].size::-webkit-inner-spin-button,
input[type=number].size::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

/*#endregion media-library*/


/*#region contentmanagement */
.contentmanagement hr {
    margin: 0;
    margin-bottom: 10px;
}

.contentmanagement tr.disabled {
    color: #E8E8E8;
    background: #fff !important;
}

.contentmanagement .control-label {
    text-align: left;
}

.contentmanagement .form-group label {
    margin-bottom: 10px;
}

.upload-icon {
    display: none !important;
}

.contentmanagement .help-block {
    color: #cccccc;
    font-weight: normal;
}

.checkbox-img div {
    float: left;
    margin-left: 20px;
}

.checkbox-img input[type="checkbox"] {
    /*opacity: 0;
	position: absolute;
	width: 40px;
	height: 40px;
	z-index: 1;
	cursor: pointer;*/
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}

.checkbox-img img.form-icon, .checkbox-img input[type="checkbox"] {
    margin-right: 50px;
    margin-bottom: 20px;
}

    .checkbox-img input[type="checkbox"] + img {
        opacity: 0.2;
    }

    .checkbox-img input[type="checkbox"]:checked + img {
        opacity: 1;
    }

.contentmanagement .nestable-lists {
    padding: 0px 0;
    border: 0px;
}

#section-list {
    margin-top: 20px;
}

    #section-list .nestable-lists {
        padding: 0px 0;
        border-bottom: 0px;
    }

    #section-list .icon-thumbnail {
        margin-top: -10px;
    }

.nestedSectionOutlet {
    padding: 15px;
    margin: 10px 0;
    min-height: 50px;
    background: #f0f0f0;
    border: 1px solid #dedfdf;
    -ms-border-radius: 1px;
    border-radius: 1px;
}

.ui-control-sectionsettingsicon {
    /*margin-top: 20px;
	margin-bottom: 40px;*/
}

    .ui-control-sectionsettingsicon .js-upload-thumbnail {
        float: left;
        margin-right: 79px;
    }

.toggle-nestable#btn-nestable-done {
    display: none;
}

.toggle-nestable {
    float: right;
}

.ui-control-itemmodifieroptionisvisible .toggle,
.ui-control-itemtimemodifieroptionisvisible .toggle,
.ui-control-createadvertisingstreamisvisible .toggle,
.ui-control-advertisingstreamisvisible .toggle,
#item-modifiers-edit .toggle,
#item-edit .toggle,
#category-edit .toggle,
#section-edit .toggle,
#form-add-update-property .toggle{
    float: left;
    margin-right: 10px;
}

#itemModifierOptionList .toggle-nestable,
#itemModifierMealGroupItemList .toggle-nestable {
    margin-bottom: 15px;
}

#itemModifierOptionList .dd-handle {
    color:#333;
}

#itemModifierOptionList .dd-handle a, 
#itemModifierMealGroupItemList .dd-handle a {
    font-size: 14px;
    color: #3D365F;
}

#itemModifierOptionList .glyphicon-remove,
#itemModifierMealGroupItemList .glyphicon-remove {
    color: black;
    margin-top: 5px;
    float: right;
    margin-right: 0px;
}

.item-modifier-option-header-first {
    margin-left: 20px;
}

.item-modifier-option-header-last {
    margin-right: 12px;
}

.item-modifier-option-header-timer-last{
    padding-left:0px;
}

#outlet-settings-edit .toggle {
    margin-right: 10px;
}

.ui-control-outletsettingsvisibilitydescription {
    margin: 30px 0;
    padding-top: 30px;
    border-top: 1px solid #eeeeee;
}

/*categories */
.test-category-item-image-container {
    height: 100%;
    width: 100%;
    position: relative;
}

.test-category-item-image {
    width: 25px !important;
    height: 25px !important;
    position: absolute;
    right: 5%;
    top: 8px;
}


/*#endregion contentmanagement */
/*#region breadcrum-stepper */
.breadcrumb-stepper {
    width: 100%;
    /*centering*/
    display: inline-block;
    /*box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);*/
    overflow: hidden;
    border-radius: 5px;
    /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
    /*counter-reset: flag;*/
}

    .breadcrumb-stepper a {
        text-align: center;
        text-decoration: none;
        outline: none;
        display: block;
        float: left;
        font-size: 12px;
        line-height: 36px;
        color: #8f8f90;
        /*need more margin on the left of links to accomodate the numbers*/
        padding: 0 10px 0 35px;
        background: #f0f0f0;
        position: relative;
    }
        /*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
        .breadcrumb-stepper a:first-child {
            padding-left: 46px;
            border-radius: 5px 0 0 5px;
            /*to match with the parent's radius*/
        }

            .breadcrumb-stepper a:first-child:before {
                left: 14px;
            }

        .breadcrumb-stepper a:last-child {
            padding-right: 20px;
            border-radius: 0 5px 5px 0;
            /*this was to prevent glitches on hover*/
        }
        /*adding the arrows for the breadcrumbs using rotated pseudo elements*/
        .breadcrumb-stepper a:after {
            content: '';
            position: absolute;
            top: 0;
            right: -18px;
            /*half of square's length*/
            /*same dimension as the line-height of .breadcrumb a */
            width: 36px;
            height: 36px;
            /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
            transform: scale(0.707) rotate(45deg);
            /*we need to prevent the arrows from getting buried under the next link*/
            z-index: 1;
            /*background same as links but the gradient will be rotated to compensate with the transform applied*/
            background: #ffffff;
            /*stylish arrow design using box shadow*/
            /*box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);*/
            border-right: 3px solid #ffffff;
            border-top: 3px solid #ffffff;
            /*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
            border-radius: 0 5px 0 50px;
        }
        /*we dont need an arrow after the last link*/
        .breadcrumb-stepper a:last-child:after {
            content: none;
        }

/*#region flat stepper, used in orderCentres and ServiceCentres */
/*we will use the :before element to show numbers*/
.flat a:before {
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin: 8px 0;
    position: absolute;
    top: 0;
    left: 30px;
    font-weight: bold;
    background: #ffffff;
    box-shadow: 0 0 0 1px #ccc;
}

.flat a, .flat a:after {
    background: #ccc;
    color: #333;
    transition: all 0.5s;
}

    .flat a.badge-completed:before {
        /*content: counter(flag);
	counter-increment: flag;*/
        font-family: "FontAwesome";
        content: "\f00c";
    }

    .flat a.badge-completed {
        /*need more margin on the left of links to accomodate the numbers*/
        padding: 0 10px 0 60px;
    }

    .flat a.flat-postStatus.active, .flat a.flat-postStatus.active:after {
        background: #fbddd9;
        color: #ed6e5a;
    }

    .flat a.flat-acknowledgeStatus.active, .flat a.flat-acknowledgeStatus.active:after {
        background: #fee7cf;
        color: #f08318;
    }

    .flat a.flat-onTheWayStatus.active, .flat a.flat-onTheWayStatus.active:after {
        background: #fbeebd;
        color: #cdaa0a;
    }

    .flat a.flat-completeStatus.active, .flat a.flat-completeStatus.active:after {
        background: #e0e8b5;
        color: #9aaa29;
    }

    .flat a.flat-postStatus.active:hover, .flat a.flat-postStatus.active:hover:after {
        background: #e83b3c;
        color: #ffffff;
    }

    .flat a.flat-acknowledgeStatus.active:hover, .flat a.flat-acknowledgeStatus.active:hover:after {
        background: #f08218;
        color: #ffffff;
    }

    .flat a.flat-onTheWayStatus.active:hover, .flat a.flat-onTheWayStatus.active:hover:after {
        background: #f4d43c;
        color: #ffffff;
    }

    .flat a.flat-completeStatus.active:hover, .flat a.flat-completeStatus.active:hover:after {
        background: #3D365F;
        color: #ffffff;
    }

    .flat a.flat-postStatus.active:hover:before {
        background: #ffffff;
        color: #ed6e5a;
    }

    .flat a.flat-acknowledgeStatus.active:hover:before {
        background: #ffffff;
        color: #f08318;
    }

    .flat a.flat-onTheWayStatus.active:hover:before {
        background: #ffffff;
        color: #cdaa0a;
    }

    .flat a.flat-completeStatus.active:hover:before {
        background: #ffffff;
        color: #9aaa29;
    }

/*#endregion flat stepper, used in orderCentres and ServiceCentres */

/*#endregion breadcrum-stepper */



/*#region loader*/
.sk-cube-grid {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

    .sk-cube-grid .sk-cube {
        width: 33%;
        height: 33%;
        background-color: #3D365F;
        float: left;
        -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
        animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    }

    .sk-cube-grid .sk-cube1 {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .sk-cube-grid .sk-cube2 {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .sk-cube-grid .sk-cube3 {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    .sk-cube-grid .sk-cube4 {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    .sk-cube-grid .sk-cube5 {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    .sk-cube-grid .sk-cube6 {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .sk-cube-grid .sk-cube7 {
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
    }

    .sk-cube-grid .sk-cube8 {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

    .sk-cube-grid .sk-cube9 {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

@-webkit-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }

    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }

    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}
/*#endregion loader*/

input[type="text"].multiselect-search {
    margin-bottom: 5px;
    border-radius: 4px;
}

/* Login form */
.login-form {
    border-radius: 3px;
    background-color: #e4f2cd;
    border: solid 0.5px #939598;
}

.input-validation-error {
    border-color: red;
}

.validation-summary-errors.text-danger ul {
    color: red;
    list-style-type: none;
    margin-left: -40px;
}

.login-form-btn {
    margin-top: 5px;
    height: 34px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
    color: #ffffff;
}

.login-failed-validation .validation-summary-errors ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

/* Image Container */

.image-gallery-container {
    list-style-type: none;
    padding: 0;
}

.image-attributes div.radio {
    margin: 0;
}

.image-attributes{
    margin-left:0;
    margin-top:5px;
}

.image-gallery-container li {
    margin: 5px;
    text-align: center;
    padding: 0;
    height: 130px;
    margin-bottom: 20px;
    /*width: 30%;*/
}

    .image-gallery-container li > .image {
        border: 1px #ccc solid;
        -ms-background-size: cover !important;
        background-size: cover !important;
        -moz-background-position-x: center !important;
        -o-background-position-x: center !important;
        background-position-x: center !important;
        background-repeat: no-repeat !important;
        height: 115px;
    }

    .image-gallery-container li .image-attributes {
        font-size: 12px;
        text-align: left;
        bottom: 0;
    }

    .image-gallery-container li > .image .image-options {
        font-size: 14px;
        height: 115px;
        -ms-opacity: 0;
        opacity: 0;
        background: rgba(144, 144, 144, .9);
    }

        .image-gallery-container li > .image .image-options:hover {
            -ms-opacity: 100;
            opacity: 100;
            -webkit-filter: alpha(opacity=100);
            -moz-filter: alpha(opacity=100);
            -o-filter: alpha(opacity=100);
            filter: alpha(opacity=100);
        }

        .image-gallery-container li > .image .image-options a {
            display: none;
        }

        .image-gallery-container li > .image .image-options:hover a {
            display: inline-block;
            margin-top: 30px;
        }

/*For the messages. ToDo: Styling */

.line-separator-messages {
    width: 100%;
    margin-bottom: 0;
}

.message-sent-user {
    background-color: #4A4A4A;
    float: right;
    border-radius: 3px;
}

    .message-sent-user:after {
        border: 20px solid transparent;
        border-bottom-color: #4A4A4A; /* arrow color */
        right: -20px;
    }

.message-sent-guest {
    background-color: #EFEFEF;
    float: left;
    border-radius: 3px;
}

    .message-sent-guest:after {
        border: 20px solid transparent;
        border-bottom-color: #EFEFEF; /* arrow color */
        right: auto;
        left: -20px;
    }

.message-sent-action-step-code {
    border-radius: 4px;
    float: left;
    font-size: 12px;
    top: 23px;
    position: relative;
    border: none;
}

.bubble {
    box-sizing: border-box;
    width: auto;
    max-width: 80%;
    position: relative;
    clear: both;
    margin: 20px;
    padding: 6px 14px;
    word-wrap: break-word;
}

    .bubble:before, .bubble:after {
        border-radius: 80px / 20px;
        content: '';
        display: block;
        position: absolute;
        bottom: 15px;
    }

.item-list-internal-container > section > div {
    background-color: white;
}

.message-line-separator {
    width: 100%;
    border-color: #ebebeb;
    margin: 10px 0 10px 0;
    padding: 0;
    border-style: solid;
    border-width: 1px;
}

.message-label {
    margin-top: 10px;
    margin-bottom: 10px;
    white-space: nowrap;
}

.message-button {
    margin-top: 10px;
    margin-bottom: 10px;
}
/* Messages */


/*#region filter-paging*/

.js-pagefilter-toggle-filter span:after {
    content: "\002B";
    color: #FFF;
    margin-left: 10px;
}

.js-pagefilter-toggle-filter.selected span:after {
    content: "\002D";
    padding-right: 4px;
}

.filter-list {
    display: none;
    padding: 10px 0 10px 20px;
}

.filter-list-container {
    padding: 15px;
    background: rgba(240, 240, 240, 1);
    display: none;
    position: absolute;
    left: 15px;
    top: 34px;
    z-index: 20;
    max-width: 400px;
}

.filter-list-display {
    display: inline-block;
    width: 100%;
}

.filter-list-item {
    margin: 0 20px 0 0;
    float: left;
}

    .filter-list-item .date {
        margin: 0 0 10px 0;
    }

    .filter-list-item ul {
        margin: 0;
        padding: 0;
    }

    .filter-list-item li {
        list-style-type: none;
    }
/*#endregion filter-paging*/

/*#region multiselect */

.btn-multi-select {
    margin-right: 10px;
}
/*#endregion multiselect */

.column-without-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0;
    padding: 0;
    float: left;
}




div[id*=roomFormContainer] .input-group .input-group-addon {
    padding-right: 0;
}

.text-grayed {
    color: #cccccc;
    font-weight: normal;
    cursor: pointer;
    pointer-events: none;
}


/*#region media-edit */
#medialibrary-edit ul {
    list-style-type: none;
    padding: 0;
    margin: 10px 0 0 0;
}

#medialibrary-edit li {
    float: left;
}

#medialibrary-edit .form-control, #medialibrary-edit label, #medialibrary-edit span.input-group-addon {
    background: white;
    font-size: 13px;
}

#medialibrary-edit .image-preview-wrapper {
    display: inline-block;
}

#medialibrary-edit .crop-edit-row {
    margin: 10px 0 0 0;
}

#medialibrary-edit .media-edit-crop img, .media-edit-crop canvas {
    display: block;
    margin: 0 auto;
    padding: 20px;
}

#medialibrary-edit label.input-group-addon {
    width: 200px;
}


#medialibrary-edit .fa {
    color: white;
}

#medialibrary-edit .file-info span {
    clear: left;
    float: left;
}

/* cropper styles custom */

.img-container, .img-preview {
    background-color: #f7f7f7;
    width: 100%;
    text-align: center;
}

.img-container {
    min-height: 200px;
    max-height: 516px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .img-container {
        min-height: 516px;
    }
}

.img-container > img {
    max-width: 100%;
}

.docs-preview {
    margin-right: -15px;
}

.img-preview {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

    .img-preview > img {
        max-width: 100%;
    }

.preview-lg {
    width: 263px;
    height: 148px;
}

.preview-md {
    width: 139px;
    height: 78px;
}

.preview-sm {
    width: 69px;
    height: 39px;
}

.preview-xs {
    width: 35px;
    height: 20px;
    margin-right: 0;
}

.docs-data > .input-group {
    margin-bottom: 10px;
}

    .docs-data > .input-group > label {
        min-width: 80px;
    }

    .docs-data > .input-group > span {
        min-width: 50px;
    }

.docs-buttons > .btn,
.docs-buttons > .btn-group,
.docs-buttons > .form-control {
    margin-right: 5px;
    margin-bottom: 10px;
}

.docs-toggles > .btn,
.docs-toggles > .btn-group,
.docs-toggles > .dropdown {
    margin-bottom: 10px;
}

.docs-tooltip {
    display: block;
    margin: -6px -12px;
    padding: 6px 12px;
}

    .docs-tooltip > .icon {
        margin: 0 -3px;
        vertical-align: top;
    }

.tooltip-inner {
    white-space: normal;
}

.btn-upload .tooltip-inner {
    white-space: nowrap;
}

@media (max-width: 400px) {
    .btn-group-crop {
        margin-right: -15px !important;
    }

        .btn-group-crop > .btn {
            padding-left: 5px;
            padding-right: 5px;
        }

        .btn-group-crop .docs-tooltip {
            margin-left: -5px;
            margin-right: -5px;
            padding-left: 5px;
            padding-right: 5px;
        }
}

.docs-options .dropdown-menu {
    width: 100%;
}

    .docs-options .dropdown-menu > li {
        padding: 3px 20px;
    }

        .docs-options .dropdown-menu > li:hover {
            background-color: #f7f7f7;
        }

        .docs-options .dropdown-menu > li > label {
            display: block;
        }

.docs-cropped .modal-body {
    text-align: center;
}

    .docs-cropped .modal-body > img,
    .docs-cropped .modal-body > canvas {
        max-width: 100%;
    }

/* end cropper styles custom */

/*#endregion media-edit */

/*#region app */
#APIToken {
    height: 100px;
}

form#form-addorupdate-app .glyphicon-warning-sign {
    color: #f3932e;
}

.collapse.proceed .confirm {
    background: white;
}

.regenerate-transient-label {
    margin: 10px 0 0 0;
}

.collapse.proceed span.glyphicon-remove {
    color: #e83b3c;
}

.collapse.proceed span.glyphicon-ok {
    color: green;
}
/*#endregion app */

#assetmanager p {
    margin-bottom: 15px;
}

#assetmanager hr {
    margin: 30px 0;
}

h3.section-heading {
    color: #3D365F;
    font-size: 18px;
}

label.highlight {
    color: #3D365F;
}

#visible-to-room-textbox {
    width: 400px;
}

#visible-to-room-label {
    width: 170px;
    font-weight: bold;
    margin-top: 5px;
}

#visible-to-room-label-parent {
    display: inline-block;
    width: 180px;
}

#visible-to-room-textbox-parent {
    display: inline-block;
    width: 400px;
}

#section-container-name-label {
    width: 170px;
    font-weight: bold;
    margin-top: 5px;
}

#section-container-name-textbox {
    width: 400px;
    margin-left: 10px;
}

.overridedisplayblock {
    display: inline-block;
}

#visible-to-room-header {
    border-bottom: 1px #ccc solid;
}

#visible-to-room-footer {
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    padding: 10px 10px 10px 10px;
}

.checkboxListStyle {
    width: 5%;
    display: inline-block;
}

.checkboxListLabel {
    display: inline-block;
    width: 150px;
    vertical-align: middle;
    font-weight: bold;
}

#ssection-visibility-advanced-settings-checkboxlist {
    font-weight: bold;
}

.hide_form_group {
    display: none !important;
}

.display_form_group {
    display: block;
}

#section-visiblilty-advanced-settings-header {
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

#section-visibility-advanced-settings-footer {
    border-bottom: 1px #ccc solid;
    margin-top: 0px;
}

#visible-to-room-title {
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
}

#outlet-settings-opening-days-title {
    font-size: 14px;
    color: #333333;
    text-align: left;
    font-weight: bold;
    padding-bottom: 8px;
}

.additional-details-key {
    color: #999;
    width: 40%;
}

.additional-details-value {
    word-wrap: break-word;
    font-weight: bold;
}

#item-list-order-actions-additional-details-section, #item-list-request-actions-additional-details-section {
    display: flex;
    flex-direction: row;
    height: 100%;
    background: #ebebeb;
}

#item-list-order-actions, #item-list-request-actions {
    float: left;
    width: 62%;
    background: #FFF;
}

#item-list-order-additional-details, #item-list-request-additional-details {
    float: left;
    width: 36.5%;
    margin-left: 1.5%;
    background: #FFF;
}

.widgetLink,
.footerWidgetLink {
    color: #3D365F !important;
    font-weight:bold!important;
}
.widgetInfo {
    color:#908d8d;
    font-weight:bold!important;
}

.guest-centre-header {
    padding: 0 0 10px 0;
    border-bottom: 1px solid #999;
}

.guest-centre-table {
    min-height: 500px;
}

.guestCentreBtnContainer {
    padding: 5px 0 10px 0;
}

.guestCentreRefreshBtn {
    color: white;
    background-color: #8147FF;
    cursor: pointer;
    padding: 8px 20px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
}

.guestCentreBtn {
    padding: 8px 20px;
    display: inline-block;
    text-align: center;
    color: #3D365F;
    background-color: white;
    border-radius: 5px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: bold;
}

.activeGuestCentreBtn {
    color: white;
    background-color: #3D365F;
    cursor:default;
}

/* #region Guest Centres > Order Centres > Payments */
.order-payments-table {
    border-collapse: separate;
    border-spacing: 8px 0px;
}

.order-payments-card-group {
    margin-left: auto;
    margin-right: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.order-payments-card-group > :nth-child(2n) {
    margin-left: 20px;
}

.order-payments-card-group > :nth-child(n+3) {
    margin-top: 20px;
}

.order-payments-card {
    width: calc((100% - 20px * 1) / 2);
    height: auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,.2)
}

.order-payments-card-textbox {
    width: 100%;
    height: auto;
    padding: 20px 18px;
    box-sizing: border-box;
}

.order-payments-card-textbox > * + * {
    margin-top: 10px;
}

.order-payments-card-titletext {
    font-size: 14px;
    font-weight: bold;
    line-height: 125%;
}
/* #endregion Guest Centres > Order Centres > Payments */

/* #region Content Management > F&B Menu */
.fnbRefreshBtn {
    color: white;
    background-color: #8147FF;
    cursor: pointer;
    padding: 8px 20px;
    display: inline-block;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
}

.menuListRefreshBtn, .versionListRefreshBtn {
    color: white;
    background-color: #8147FF;
    border-color: #8147FF;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

    .fnbRefreshBtn:hover {
        opacity: 0.7;
        color: white;
        text-decoration: none;
    }

.menuListRefreshBtn:hover, .versionListRefreshBtn:hover {
    opacity: 0.7;
    color: white;
    text-decoration: none;
    background-color: #8147FF;
    border-color: #8147FF;
}

#btnTestConnectivity {
    color: #fff;
    background-color: #09C;
    border-color: #09C
}

#btnTestConnectivity:hover {
    color: #fff;
    background-color: #00688B;
    border-color: #00688B;
}
/* #endregion Content Management > F&B Menu */

.widgetsHeader div:first-child {
    padding-left: 8px;
}

.widgetsHeader div:nth-child(2) {
    padding-left: 20px;
}

.topWidget > div > div > div,
.footerWidget > div > div > div {
    padding: 0 0 0 15px;
}

#messageOverviewContainer {
    border-right: 1px solid lightgray;
    padding-right: 0;
    max-height:700px;
    overflow-y:auto;
}
.noMessageImg {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#newMessageLink {
    padding: 10px 10px 10px 7px;
    border-bottom: 1px solid lightgray;
    color: #3D365F;
    font-weight: bold;
}
.messageInfoContainer {
    padding: 10px 10px 10px 7px;
    border-bottom: 1px solid lightgray;
    border-left: 7px solid white;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.messageStatus {
    width: 25px;
    height: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}
    .messageStatus.statusOpenMessage {
        background-color: #FEEDDC;
        border: 1px solid #f08219;
    }
    .messageStatus.statusActionRequiredMessage {
        background-color: #FDE8E6;
        border: 1px solid #ED6751;
    }
    .messageStatus.statusClosedMessage {
        background-color: #F4F6E6;
        border: 1px solid #AFC03E;
    }

.ui-control-itemmodifiermaximumquantity .ui-control-itemmodifierminimumquantity {
    width: 60px;
}

.ui-control-sectiondynamicwidgetheader {
    font-weight:bold;
}

.btn-add-underneath-table {
    padding-top: 30px;
}

.list-table-first-column {
    padding-left: 5px;
}

.text-bold {
    font-weight: bold;
}

.block-description {
    padding-right: 75px;
    color: #737373
}

.ui-control-outletsettingsuserstitle > h4 {
    padding-left:15px;
}

.ui-control-outletsettingsuserstitle > h4 {
    font-weight: bold;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-btn {
    min-width: initial;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.dropdown-btn:before {
    content: "";
    position: absolute;
    left: -1px;
    bottom: 25%;
    height: 50%;
    width: 1px;
    border-left: 1px solid white;
}

.no-margin {
    margin: 0;
}

.filter-header {
    display: inline-block;
    text-align: right;
    padding-top: 7px;
    font-size: 13px;
    font-weight: bold;
}

.view-content-btn {
    float: right;
    color: black !important;
}

a.disabled {
    pointer-events: none;
    color: #999;
}

.icon-grey,
.icon-grey:focus,
.icon-grey:active {
    color: #999999;
}

.icon-grey:hover {
    color: #888888;
}

.icon-success,
.icon-success:focus,
.icon-success:active {
    color: #3D365F;
}

    .icon-success:hover {
        color: #282340;
    }

.icon-warning,
.icon-warning:focus,
.icon-warning:active {
    color: #f3932e;
}

.icon-warning:hover {
    color: #d6792d;
}

.icon-danger,
.icon-danger:focus,
.icon-danger:active {
    color: #e83b3c;
}

.icon-danger:hover {
    color: #bc3939;
}

.btnGroupSetting {
    color:#fff;
}

    .btnGroupSetting:hover, .btnGroupSetting:focus, .btnGroupSetting.focus {
        color: #fff;
    }
/* Pure CSS Animations */
.fade-in {
    animation: fadeIn ease 2s;
    -webkit-animation: fadeIn ease 2s;
    -moz-animation: fadeIn ease 2s;
    -o-animation: fadeIn ease 2s;
    -ms-animation: fadeIn ease 2s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* #region Content Management Checkbox */
.custom-checkbox {
    width: 20px;
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    background-color: white;
    border: 2px solid #808080 !important;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    position: relative;
    vertical-align: middle;
    margin: 0 !important;
    display: inline-block;
}

    .custom-checkbox:checked {
        border: 2px solid #282340 !important;
        background-color: #282340 !important;
    }

        .custom-checkbox:checked::after {
            content: '';
            position: absolute;
            left: 1px;
            top: 2px;
            width: 14px;
            height: 8px;
            border-left: 3px solid #fff;
            border-bottom: 3px solid #fff;
            transform: rotate(-45deg);
            border-radius: 1px;
        }
/* #endregion Content Management Checkbox */