:root {
    --studio-manager-spinner-background-color: #12131f;
    --studio-manager-spinner-width: 85px;
    --studio-manager-spinner-thinborderwidth: 6;
    --studio-manager-spinner-borderwidth: 12;
    --studio-manager-spinner-wideborderwidth: 24;
    --studio-manager-spinner-blue-color: #12131f;
    --studio-manager-spinner-red-color: #f43b2b;
    --studio-manager-spinner-white-color: #fffbec;
}

/**, ::after, ::before {
    box-sizing: content-box;
}*/

/*logo spinner css*/

.outsideSpinner {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: var(--studio-manager-spinner-background-color);
    width: calc(var(--studio-manager-spinner-width) + (calc((var(--studio-manager-spinner-width) / 100) * 10)));
    height: calc(var(--studio-manager-spinner-width) + (calc((var(--studio-manager-spinner-width) / 100) * 10)));
    border-radius: 10px;
    padding: 2px;
    margin: 10% auto;
}

.nospin {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.logospinner {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: calc(var(--studio-manager-spinner-width) /100);
    animation: spinnerContinual;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation: spinnerContinual;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

    .logospinner.red.thin {
        border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-thinborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-red-color) transparent transparent #f43b2b;
    }

    .logospinner.blue.thin {
        border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-thinborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-blue-color) transparent transparent #12131f;
    }

    .logospinner.white.wide {
        border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-borderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-white-color) transparent transparent #fffbec;
    }

    .logospinner.blue.wider {
        border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-wideborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-blue-color) transparent transparent #12131f;
    }

    .logospinner.white.wider {
        border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-wideborderwidth)) solid transparent;
        border-color: var(--studio-manager-spinner-white-color) transparent transparent #fffbec;
    }

.nospin.red.thin {
    border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-thinborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-red-color);
}

.nospin.blue.thin {
    border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-thinborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-blue-color);
}

.nospin.white.wide {
    border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-borderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-white-color);
}

.nospin.blue.wider {
    border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-wideborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-blue-color);
}

.nospin.white.wider {
    border: calc((var(--studio-manager-spinner-width) / 200) * var(--studio-manager-spinner-wideborderwidth)) solid transparent;
    border-color: var(--studio-manager-spinner-white-color);
}

@keyframes spinnerContinual {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spinnerContinual {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}


/*ajax loading stuff*/

#loadingMessage {
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #EEE;
    opacity: 0.8;
    top: 0px;
    left: 0px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loadingMessage img {
    position: absolute;
    top:50%;
    left:50%;
}

#loadingModalMessage {
    background-color: #EEE;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    position:fixed;
}

    #loadingModalMessage img {
        position: absolute;
        top: 50%;
        left: 50%;
    }

/*---[ Navigation ]---*/


.mainNavigation
{
    margin: 0;
    list-style: none;
    padding: 0px 0;
}

.mainNavigation ul
{
    font-size:1.0em;
    margin-bottom:0;
}

.mainNavigation li
{
    border: 0px;
    list-style:none;
    font-size:1.0em;
    cursor:pointer;
    padding-left:19px;
    margin:6px 0px;
    
}

.mainNavigation li span
{
    color:#000000;
    font-size:17px;
    white-space:nowrap;
}


.mainNavigation li a 
{
    color:#000000;
    font-size:17px;
    text-decoration:none;
    font-weight:normal;
    white-space:nowrap;
}


.mainNavigation li a:hover
{
    text-decoration:underline;
}


.mainNavigation a.selected
{
    text-decoration:underline;
    font-weight:bold;
}

.mainNavigation li.showChildTasks > ul
{
}

.mainNavigation li.showChildTasks
{ 
    background:url('../cssimages/navigation/open.png') no-repeat left 0px;
}

.mainNavigation li.hideChildTasks > ul
{
    display:none;
}

.mainNavigation li.hideChildTasks
{
    background:url('../cssimages/navigation/close.png') no-repeat left 2px;
}

/*task specific classes*/

/*hide password task from tree*/

#anchor_37 {
    display:none;
}

.home > a {
    /*background: url('../cssimages/navigation/icon_home.png') no-repeat left;*/
    padding-left: 25px;
    display: inline-block;
    background-size: 20px 20px;
}

.reports > span
{
    background:url('../cssimages/navigation/icon_reports.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:20px 20px;
}

.admin > span
{
    background:url('../cssimages/navigation/icon_admin.png') no-repeat left;
    padding-left:18px;
}

.admin > a
{
    background:url('../cssimages/navigation/icon_admin.png') no-repeat left;
    padding-left:25px;
    display:inline-block;
    background-size:20px 20px;
}

.brand > a {
    background: url('../cssimages/navigation/icon_brand.png') no-repeat left;
    padding-left: 25px;
    display: inline-block;
    background-size: 20px 20px;
}

.mediaitem > a {
    background: url('../cssimages/navigation/icon_mediaitem.png') no-repeat left;
    padding-left: 25px;
    display: inline-block;
    background-size: 20px 20px;
}

.social > a {
    background: url('../cssimages/navigation/icon_social.png') no-repeat left;
    padding-left: 25px;
    display: inline-block;
    background-size: 20px 20px;
}

.css > a {
    background: url('../cssimages/navigation/icon_css.png') no-repeat left;
    padding-left: 25px;
    display: inline-block;
    background-size: 20px 20px;
}

.contact > a {
    background: url('../cssimages/navigation/icon_contact.png') no-repeat left;
    padding-left: 25px;
    display: inline-block;
    background-size: 20px 20px;
}

.policy > a {
    background: url('../cssimages/navigation/icon_policy.png') no-repeat left;
    padding-left: 25px;
    display: inline-block;
    background-size: 20px 20px;
}

.phone > a
{
    background:url('../cssimages/navigation/icon_phone.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:20px 20px;
}

.security > span
{
    background:url('../cssimages/navigation/icon_security.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:20px 20px;
}

.me > span
{
    background:url('../cssimages/navigation/icon_me.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:20px 20px;
}

.me > a
{
    background:url('../cssimages/navigation/icon_me.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:20px 20px;
}

.team > span
{
    background:url('../cssimages/navigation/icon_team.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:20px 20px;
}

.orgstructure > a
{
    background:url('../cssimages/navigation/icon_org.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:20px 20px;
}

.folder > span
{
    background:url('../cssimages/navigation/icon_folder.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:20px 20px;
}

.settings > span {
    background: url('../cssimages/navigation/icon_settings.png') no-repeat left;
    padding-left: 25px;
    display: inline-block;
    background-size: 20px 20px;
}

.settings > a
{
    background:url('../cssimages/navigation/icon_settings.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:20px 20px;
}

.emaillog > a
{
    background:url('../cssimages/navigation/icon_email.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:20px 20px;
}

.calendar > a
{
    background:url('../cssimages/navigation/icon_calendar.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:16px 16px;
}

.quicksetup > a
{
    background:url('../cssimages/navigation/icon_quicksetup.png') no-repeat left;
    padding-left:25px;
     display:inline-block;
    background-size:20px 20px;
}

.mainNav p
{
    font-weight: bold;
    color:White;
    padding: 5px 5px 2px 5px;
    height:24px;
    margin-bottom: 0px;
    border-bottom: #EFEFEF solid 1px;
    background-color:#12131f;
    font-size:1.2em;

    /*background: #b7b7b7;*/ /* Old browsers */
    /*background: -moz-linear-gradient(top,  #b7b7b7 1%, #454545 100%);*/ /* FF3.6+ */
    /*background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#b7b7b7), color-stop(100%,#454545));*/ /* Chrome,Safari4+ */
    /*background: -webkit-linear-gradient(top,  #b7b7b7 1%,#454545 100%);*/ /* Chrome10+,Safari5.1+ */
    /*background: -o-linear-gradient(top,  #b7b7b7 1%,#454545 100%);*/ /* Opera 11.10+ */
    /*background: -ms-linear-gradient(top,  #b7b7b7 1%,#454545 100%);*/ /* IE10+ */
    /*background: linear-gradient(to bottom,  #b7b7b7 1%,#454545 100%);*/ /* W3C */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7b7b7', endColorstr='#454545',GradientType=0 );*/ /* IE6-9 */
}

table.subNavGrid
{
    width: 100%;
}
table.subNavGrid tr
{
    border: #F5F5F4 0px solid !important;
}

    table.subNavGrid th {
        border:none;
        display: block;
        padding: 3px 5px;
        text-align: left;
        height: 24px;
        color: #ffffff;
        background-color: #12131f;
        font-weight:normal;
    }

    table.subNavGrid td {
        cursor: pointer;
        border-top: none;
        border-right: none;
        border-bottom: 1px solid #ccc;
        border-left: none;
        display: block;
        padding: 3px 5px;
        text-align: left;
        font-size: 80%;
        overflow: hidden;
        white-space: nowrap;
        background-color: #ffffff;
    }

table.subNavGrid tr.selected td
{
    background: #2A818A;
    color:#ffffff;
    font-size:100%;
    font-weight:bold;
}

table.subNavGrid td:hover
{
    background: #2A818A;
    color:#ffffff;
}

.navigation
{
    float: left;
    position: relative;
    width: 240px;
    height: 100%;
}

.navigation .container {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

/*
.navigation a img {
    display:block;
}

.navigation td a
{
    color: #000;
    text-decoration: none;
    margin-left:0px;
}

.navigation td a:hover {text-decoration:underline!important;}

.navigation td a.selected,
.navigation td.selected a
{
    font-weight: bold;
    text-decoration: underline!important;
    font-size: 100%;
}

.navigation td a img
{
	padding-right:2px;
}
*/
/*---[ General ]---*/
.textAlignLeft {
    text-align:left !important;
}

.textAlignRight {
    text-align: right !important;
}

.textAlignCentre {
    text-align: center !important;
}

/*---[ Content Panel ]---*/

.panelHolder
{
    float: left;
    position: relative;
    width: 100%;
}

.panel
{
    /*background: #FFF;*/
    position:relative;
}

.commandBarPanel 
{
	padding-top: 30px;
}

.panelContent
{
    overflow-y: auto;
    /*min-width:650px;*/
}

table.gridView {
    border: none;
    margin-bottom: 10px;
    background-color: #ffffff;
    min-width: 70%;
    border-collapse: collapse;
    margin-left: 5px;
    max-width:calc(100% - 10px);
}

table.gridView th, table.gridView td
{
    color: #000;
    font-size: 14px;
    font-weight: normal;
    padding: 2px 5px;
    text-align: left;
}

    table.gridView th:first-child {
        border-top-left-radius: 3px;
        -webkit-border-top-left-radius: 3px;
        -moz-border-top-left-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }

    table.gridView th:last-child {
        border-top-right-radius: 3px;
        -webkit-border-top-right-radius: 3px;
        -moz-border-top-right-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }

    table.gridView td {
        background: #fff;
        border-bottom: 1px solid #cccccc;
        vertical-align:middle !important;
    }

    table.gridView td div.customColumn {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 250px;
        white-space: nowrap;
        padding-right: 20px;
    }

    table.gridView tr.gridViewAlternate td {
        background: #fff;
    }

        table.gridView tr.gridViewAlternate td div.customColumn {
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 250px;
            white-space: nowrap;
            padding-right: 20px;
        }
    
table.gridView th {
    font-weight: 500;
    font-size: 1.0em;
    color: White;
    background-color: #12131f;
}

table.gridView th a
{
    color:White;
    text-decoration:none;
}

table.gridView th a:hover
{
    text-decoration:underline;
}

table.gridView th a:visited
{
    text-decoration:none;
}

    table.gridView th.sort-asc {
        min-width:90px;
    }

    table.gridView th.sort-asc:after {
        content: '\2191';
        margin-left: 5px;
        background-color: #2A818A;
        border-radius: 3px;
        /*display: inline-block;*/
        font-size: 0.7em;
        vertical-align: bottom;
        padding: 3px;
    }

    table.gridView th.sort-dec {
        min-width: 90px;
    }

    table.gridView th.sort-dec:after {
        content: '\2193';
        margin-left: 5px;
        background-color: #2A818A;
        border-radius: 3px;
        /*display: inline-block;*/
        font-size: 0.7em;
        vertical-align: bottom;
        padding: 3px;
    }

table.gridView tr:hover, table.gridView tr:hover:not(.selected) td:not(.availablesearchresult):not(.unavailablesearchresult) {
    background-color: #F2F2F2 !important;
    transition: background 0.3s;
}

table.gridView tr.selected td
{
    background-color: #CCCCCC;
    font-weight:bold;
    color:#000000;
}

table.gridView tr.unavailablesearchresult td {
    color:red;
    font-weight:bold;
}

table.gridView td.availablesearchresult{
    color:#ffffff !important;
    font-weight:bold;
    text-transform:uppercase;
    background-color:green;
}

table.gridView td.unavailablesearchresult{
    text-transform:uppercase;
    color:#ffffff !important;
    background-color:red;
}

table.gridView span.multiLine {
    display: block;
}

table.gridView div.multilineContainer {
    max-height: 100px;
    overflow-y: auto;
}

table.gridView span.multiLine.middle {
    border-bottom: 1px solid #F2F2F2
}

table.gridView.smallTableSize {
    width: 50% !important;
}

table.gridView.mediumTableSize {
    width: 70% !important;
}

table.gridView.largeTableSize {
    width: calc(100% - 20px) !important;
}

table.gridView.autoTableSize {
    width: auto !important;
}

/*---[ Splitters]---*/
#splitter {
    cursor: n-resize;
    height: 8px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-width: 1px 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 0;
}

/* Need to make these background images to stop the user from being able to drag the images */
.collapseTop, .collapseBottom
{
    height: 8px;
    width: 25px;
    cursor: pointer;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    display:inline-block;
}

.collapseTop 
{
	margin-right:2px;
    background:url(../images/js/collapseTop.gif) center;
}

.collapseBottom 
{
	margin-left:2px;
    background:url(../images/js/collapseBottom.gif) center;
}

/******

Note: If you update the width of the sideResizeBar please
change both the width and the left. 

*******/
.sideResizeBar, .ghostPlaceholder
{
    height: 100%;
    cursor: w-resize;
    width: 8px;
    left: -10px;
    position: absolute;
    z-index: 50;
    top: 0px;
}


.sideResizeBar
{
    border: 1px solid #ccc;
    border-width: 0 1px;
    background: #EEE url(../cssimages/backgrounds/resize-scroller.gif) center center no-repeat;
}

.ghostPlaceholder
{
    width: 300px;
    background: url(../images/transparent.gif);
    left: 0px;
}

/*custom forms*/

/*used to hide section if there are no editable fields*/
div.hideCustomFormSection {
    display:none;
}

/*used to hide question if it is not editable*/
div.hideCustomFormQuestion {
    display: none;
}


fieldset.customFormSectionFeildset {
}

    fieldset.customFormSectionFeildset.questions fieldset legend {
        background-color: #D1E3E4;
        color:#000000;
    }

    fieldset.customFormSectionFeildset div.questionSeperator {
        width: 100%;
        background-color: rgb(209, 227, 228);
        height: 1px;
        clear: both;
    }

    fieldset.customFormSectionFeildset div.questioncrudimages {
        display:flex;
        flex-direction:row;
        justify-content:center;
    }

    fieldset.customFormSectionFeildset div.questioncrudimages img {
        width: 16px;
        height: 16px;
        padding: 0 3px 0 3px;
        cursor: pointer;
    }

    fieldset.customFormSectionFeildset div.questioncrudimages input[type="image"] {
        width:16px;
        height:16px;
        padding:0 3px 0 3px;
        cursor:pointer;
        min-height:unset;
    }

/*product selector popup*/
fieldset.productSelectorFieldset legend {
    background-color: #12131f;
}

div.variantGrouping select {
    width:calc(100% - 10px);
}

div.form.productSelectorForm {
    display: grid;
    grid-template-columns: 250px calc(100% - 275px);
}

.productSelectorCategoryFilter {
    padding-right:10px;
}

div.formrow.productSelectorContainer {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

tr.productRow label {
    display:block;
    text-align:left;
}

tr.productRow.footer td {
    background-color: #D1E3E4;
    border-top: 3px solid #12131f;
}

tr.productRow span.formcontrol {
    display: block;
}

span.productSKU {
    margin: 0;
    font-size: 10px;
    /*padding: 0 5px 0 5px;*/
    display: block;
}

span.stockinfomessage {
    display:block;
    font-size:10px;
    line-height:10px;
    padding-top:3px;
}

span.productSKU:before {
    content: 'SKU '
}

span.newProductSelectionVariant {
    display:block;
}

input.formButton.selectProductButton {
    display: block;
    margin: 5px;
}

.productSelectorCategoryFilter label {
    display: none;
}

.productSelectorList select.invalidVariantSelection {
    border:2px dashed red;
}

.productSelectorTypeFilter label {
    display: none;
}

.productSelectorPackageFilter label {
    display: none;
}

div.productSelectorList {
    width: 22%;
    /*float: left;*/
    margin: 10px;
    border: 1px solid #000000;
    padding: 5px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
    min-height: 240px;
    min-width: 230px;
}

    div.productSelectorList.hideProduct {
        display:none;
    }

div.productSelectorList div.mediaItem {
    max-height: 110px;
    width: 100%;
    text-align: center;
    margin: 0;
    border: none;
    box-shadow: none;
    cursor:default;
}
        div.productSelectorList div.mediaItem div.imageWrapper {
            display:inline-block;
            margin:0 auto;
        }

            div.productSelectorList div.mediaItem div.imageWrapper img {
                margin: 5px;
                /*border: 1px solid black;*/
                /*border-radius: 5px;*/
            }

    div.productSelectorList div.productDetail {
        width:100%;
        text-align:center;
    }

    div.productSelectorList div.productDetail span.productName {
        width: 100%;
        display:block;
    }

    div.productSelectorList div.formrow.selectProductButton {
        text-align:center;
    }

div.stockInformationMessage {
    padding:5px;
    font-size:12px;
}

    div.stockInformationMessage.productOutOfStock {
        color:red;
    }

/*Media picker popup*/

.dropzone {
    border:none !important;
}

    .dropzone .dz-preview {
        border:1px solid black !important;
        border-radius:3px;
    }

    div.mediaItemContainer {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

div.mediaItem {
    display: inline-block;
    height: 150px;
    margin: 10px;
    border: 2px solid black;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
    cursor: pointer;
}

    div.mediaItem.itemSelected {
        border: 2px solid #008101;
        box-shadow: 0px 8px 16px 0px rgba(0,129,1,0.2);
    }


    div.mediaFileName {
        width: 100%;
        font-size: 11px;
        text-align: center;
        overflow: hidden;
        width: 148px;
        white-space: nowrap;
        padding: 2px;
    }

div.mediaItem div.imageWrapper img {
    max-height: 100px;
    background: none;
    display: block;
    margin: 5px auto 5px auto;
    max-width:94%;
}

div.mediaItem div.imageWrapper img.loading {
    background: url(../cssimages/backgrounds/smallloading.gif) 50% no-repeat;
}

div.mediaSelectorControl {
    display: inline-block;
    height: 185px;
    padding: 5px;
    max-width: 550px;
    overflow: auto;
}
    div.mediaSelectorControl img {
        max-height: 150px;
        cursor: none;
        border: 1px solid black;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        padding: 5px;
    }

        div.mediaSelectorControl img:not(.hasImage, .readOnly):hover {
            border-color: #008101 !important;
            border-style: dashed !important;
            cursor: pointer;
        }

        div.mediaSelectorControl img.hasImage {
            cursor: pointer;
        }

            div.mediaSelectorControl img.hasImage:hover {
                border-color: red;
                border-style: dashed;
                cursor: pointer;
            }

        div.mediaSelectorControl img:hover {
        }

        div.mediaSelectorControl input {
            display: none;
        }

.mediaItemGridListing {
    max-height: 150px;
    max-width: 150px;
    cursor: pointer;
    border: 1px solid black;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    padding: 5px;
}

#selectedMediaItems {
    display: none;
}

.dropzone .dz-preview .dz-error-message {
    top:25px !important;
}

.dropzone .dz-preview .dz-progress {
    top: 76% !important;
    background-color:#008101 !important;
}

.dropzone .dz-message .dz-button {
    position: relative !important;
    top: 62px !important;
    background-color: #12131f !important;
    color:#ffffff !important;
    padding: 4px !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

#mediaUploader {
    background: url(../cssimages/backgrounds/upload-illustration.svg) 50% no-repeat !important;
}

/*---[ Forms ]---*/
a.helpinfo {
    float: right;
    color: #000000 !important;
    text-align: center;
    min-width: 100px !important;
    border: 1px solid #f9de56 !important;
    background-color: #f9de56 !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-appearance: none;
    cursor: pointer;
    font-weight: bold !important;
    font-size: 0.9em !important;
    font-family: Calibri, Arial, Tahoma,Helvetica, sans-serif;
    text-transform: uppercase;
    line-height: 1.0em;
    box-sizing: border-box;
    padding:3px 8px 3px 8px;
}

    a.helpinfo:hover {
        color: #000000 !important;
        opacity: 0.7;
    }

    a.helpinfo i {
        padding-left: 3px;
    }

.helpul {
}

.helpul li {
    padding-left:10px;
    list-style:none;
}

.helpul li ul {
    font-size:100%;
    margin-bottom:5px;
}

.helpul li ul li {
    list-style:none;
}

.commandBar {
    margin-bottom: 5px;
    height: 30px;
    width: 100%;
    margin-bottom: 5px;
    background-color: #ffffff; /*#12131f;*/
    border-bottom: 1px solid #12131f;
}

.commandBar .inner
{
	padding:3px 5px 2px 5px;
}

.commandBar p
{
    margin: 0;
}

.panelContent table 
{
    /*min-width:50%;*/
}

.panelContent.popupPanelContent table.popupformwrapper {
    width: 100%;
    height: 100%;
}

    .panelContent.popupPanelContent table.popupformwrapper tr:first-of-type td:first-of-type {
        vertical-align: top;
    }

.panelContent.popupPanelContent table.ui-buttonset {
    width:auto;
    margin:0 0 10px 10px;
}

.panelContent table table
{
}

#formView {
    min-width:60%;
    margin-left:5px;
}

.form
{
    margin-bottom: 20px;
    width:100%;
}

    .form div.formsectionseperator {
        padding: 5px;
        width: 99%;
        background-color: #12131f;
        height: 24px;
        border-bottom: 4px solid #2A818A;
        color: #ffffff;
        clear:both;
        margin-top:40px;
    }

    .form fieldset {
        background: #FFF;
        padding-bottom: 5px;
        margin-left: 5px;
        margin-right: 5px;
        border: 1px solid #D1E3E4;
        margin-bottom: 20px;
        margin-top: 10px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }

.form fieldset fieldset 
{
}

    .form legend {
        font-size: 14px;
        font-weight: 700;
        color: #000000;
        background-color: #D1E3E4;
        border: 1px solid #D1E3E4;
        /* border: none; */
        width: 90%;
        padding-top: 5px;
        padding-bottom: 6px;
        text-indent: 10px;
        margin-left: 10px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        cursor: pointer;
        background-image: url(../images/arrow_down.png);
        background-position: 99.5% center;
        background-repeat: no-repeat;
        background-size: 16px 16px;
        text-transform: uppercase;
        margin-bottom: 12px;
    }

    .form legend.up {
        background-image: url(../images/arrow_up.png);
        background-position: 99.5% center;
        background-repeat: no-repeat;
        background-size: 16px 16px;
    }

    div.form.loginForm {
        max-width:500px;
    }

    div.form.loginForm fieldset legend {
        background-image:none;
    }

    div.form.loginForm input[type=text] {
        max-height:40px;
        min-height:40px;
    }

        div.form.loginForm input[type=password] {
            max-height: 40px;
            min-height: 40px;
        }

.formrow {
}

    .formrow span.formcontrol {
        display: grid;
        grid-template-columns: calc(100% / 6) calc(100% - calc(100% / 6));
    }

    .formrow.split-1-3  span.formcontrol {
        display: grid;
        grid-template-columns: calc(100% / 4) calc(100% - calc(100% / 4));
    }

    .formrow.col-1 {
        display: block;
    }

        .formrow.col-1 span.formcontrol {
            display: block;
            padding-left:10px;
        }

    .formrow.col-2 {
        display: grid;
        grid-template-columns: calc(100% / 2) calc(100% / 2)
    }

    .formrow.col-3 {
        display: grid;
        grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3)
    }

    .formrow.col-3 span.formcontrol {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .formrow.col-4 {
        display: grid;
        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4)
    }

        .formrow.col-4 span.formcontrol {
            display: grid;
            grid-template-columns: 50% 50%;
        }

.formrow span.smallhelptext {
    font-size: 80%;
}

.ui-buttonset .ui-button {
    min-height: 25px;
}

.form label {
    margin-right: 5px;
    font-size: 80%;
    /*min-height: 20px;*/
    text-align: right;
    display: inline-block;
}

.form span.formMessage {
    font-size: 85%;
    display: inline-block;
    max-width: 95%;
    margin-bottom: 10px;
    margin-left: 10px;
}

.form span.formMessage.highlight {
    font-style:italic;
    color:red;
}

    .form span.formMessage.large {
        font-size: 100% !important;
    }

.form p.formMessage {
    font-size: 80%;
    display: inline-block;
    max-width: 95%;
    margin-bottom: 10px;
    margin-left: 10px;
}

    .form p.formMessage.highlight {
        font-style: italic;
        color: red;
    }

.form span.label {
    margin-right: 5px;
    font-size: 80%;
    min-height: 20px;
    text-align:right;
    word-wrap:break-word;
    display:inline-block;
}

.form .formcontrol {
    display: inline-block;
    padding: 3px 0 3px 0;
    width:calc(100% - 10px);
    display:grid;
    grid-template-columns:50% 50%;
    align-items:flex-start;
}

.formcontrol span.read ul.read {
    font-size: 100%;
}

.formcontrol label
{
	/*min-height: 25px;
    vertical-align:top;*/
    word-wrap:break-word;
}

.formcontrol.checkboxlist label {
    float:left !important;
    text-align:left !important;
}

.formcontrol.checkboxlist span.label {
    float: left !important;
    text-align: right !important;
}

/*testing removal*/
/*.formcontrol.extrasmallLabel label {
    width: 50px;
}

.formcontrol.mediumLabel label
{
	width: 150px;
}

.formcontrol.largeLabel label
{
	width: 250px;
}

.formcontrol.autoLabel label
{
	width: auto;
}*/

.formcontrol span.label {
    min-height: 25px;
    word-wrap: break-word;
}

/*testing removal*/
/*.formcontrol.extrasmallLabel span.label {
    width: 50px;
}

.formcontrol.mediumLabel span.label {
    width: 150px;
}

.formcontrol.largeLabel span.label {
    width: 250px;
}

.formcontrol.autoLabel span.label {
    width: auto;
}*/


.formcontrol .calendaricon 
{
	width:auto;
	margin-bottom:-5px;
	margin-left:6px;
}

div.tox.tox-tinymce {
    width: 100% !important;
}

.tox-tinymce {
    border: 1px solid #777777 !important;
    border-radius: 3px !important;
}

/*.tox tox-tinymce {
    width:100%;
}*/
span.formcontrol.tinyMCEReadOnlyMode div.tox-editor-header {
    display: none;
}

span.formcontrol.tinyMCEReadOnlyMode div.tox-statusbar {
    display: none;
}

.form .read {
    margin-right: 10px;
    font-size: 80%;
    /*width: 105px;*/
    font-weight: bold;
    /*text-overflow: ellipsis;
    overflow: hidden;*/
    /*white-space: nowrap;*/
    display: inline-block;
    /*vertical-align: top;
    min-height: 25px;*/
    word-break:break-word;
}

/*testing removal*/
/*.form .read.textMedium
{
	width: 200px;
}

.form .read.textLarge
{
	width: 300px;
}

.form .read.textAuto
{
	width: auto;
}*/


.form .read.textAuto {
    width: fit-content;
}



.read li {
    list-style: none;
}


/*form column max sizes dependent on containing column*/

/*COL ONE*/
/*.formrow.col-1.lbl-small span.formcontrol span.label {
    max-width: 100px;
}

.formrow.col-1.lbl-small span.formcontrol label {
    max-width: 100px;
}

.formrow.col-1.lbl-auto span.formcontrol label {
    width: auto;
    max-width:none;
}

.formrow.col-1 textarea {
    width: calc(100% - 200px);
}
*/
/*COL TWO*/
/*.formrow.col-2 span.formcontrol span.label {
    max-width: 100px;
}

.formrow.col-2 span.formcontrol label {
    max-width: 100px;
}*/

/*.formrow.col-2 span.formcontrol span.read {
    max-width: 120px;
}
*/

/*COL THREE*/
/*.formrow.col-3 span.formcontrol span.label {
    max-width: 100px;
}

.formrow.col-3 span.formcontrol label {
    max-width: 100px;
}

.formrow.col-3 span.formcontrol span.read {
    max-width: 120px;
}
*/

.form .validationsummary {
    margin: 10px 10px 25px 10px;
    border: 1px dashed #000000;
    padding: 5px;
    background-color: #ffffff; /*rgba(255,0,0,0.06);*/
    box-shadow: 0 0 0 3px rgba(255,0,0,.3);
}

.form .validationsummary b {
    color:red;
}

.form .validationsummary ul
{
	padding:0 0 0 20px;
}

    .form .validationsummary li {
        font-size:14px;
    }

span.vatInclusionNotification {
    /*float: left;*/
    font-size: 12px;
    height: 25px;
    display: inline-block;
}

.form input {
    width: 200px;
    margin-right: 10px;
    min-height: 25px;
    max-height: 25px;
}

    .form input:not([type]),
    .form input[type="color"],
    .form input[type="email"],
    .form input[type="number"],
    .form input[type="password"],
    .form input[type="tel"],
    .form input[type="url"],
    .form input[type="text"],
    .form select {
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        border: 1px solid #777777;
        /*background-color: #EFEFEF;*/
        padding-left:3px;
    }

.form input:focus {
   outline:none; 
}

    .form input:focus::placeholder {
        color: transparent;
    }

.form select:focus {
   outline:none; 
}

.form input.inputSmall
{
    width: 100px;
}

    .form input.inputSmall:focus::placeholder {
        color: transparent;
    }

/*this is the default*/
/*.form input.inputMedium
{
    width: 200px;
}

    .form input.inputMedium:focus::placeholder {
        color: transparent;
    }*/

.form input.inputLarge
{
    width: 300px;
}

    .form input.inputLarge:focus::placeholder {
        color: transparent;
    }


.form input.inputAuto
{
    width: auto;
}

    .form input.inputAuto:focus::placeholder {
        color: transparent;
    }

.form input.inputAllSpaceAvailable {
    width: calc(100% - 10px);
}

    .form input.inputAllSpaceAvailable:focus::placeholder {
        color: transparent;
    }


.form input.colourPickerInput {
    height:24px;
    padding-left:25px;
}

.form select {
    min-width: 203px;
    margin-right: 10px;
    height: 28px;
    width:fit-content;
}

    .form select:focus {
        outline: none; /* no outline - for most browsers */
    }

    .form select option:focus {
        outline: none; /* no outline - for most browsers */
        color:red;
    }

form select option {
    padding: 5px;
    border: 1px solid #EFEFEF;
}
    form select option:checked {
        border: 1px solid darkgray;
    }

    form select option:hover {
        border: 1px solid darkgray;
    }

.form select.inputSmall
{
    width: 103px;
}

/*this is the default*/
/*.form select.inputMedium
{
    width: 203px;
}*/

.form select.inputLarge
{
    width: 303px;
}

.form select.inputAuto
{
    width: fit-content;
    min-width: 103px;
}

.form select.inputAllSpaceAvailable {
    width: calc(100% - 10px);
    min-width: 103px;
}

.form select[multiple] {
    height:100px;
}

.form input[type="checkbox"] {
    width:30px;
    height: 20px;
}

.form input[type="checkbox"] + label {
    width:80px;
}

.form textarea {
    font-family: Calibri, Arial, Tahoma,Helvetica, sans-serif;
    /*background-color: #EFEFEF;*/
    border: 1px solid #777777;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    padding-left: 3px;
    font-size: 15px;
    height:120px;
    width:calc(100% - 15px);
}

    .form textarea:focus::placeholder {
        color: transparent;
    }

.form textarea.inputSmall {
    width: 103px;
}

    .form textarea.inputSmall:focus::placeholder {
        color: transparent;
    }

/*only need to support text area when it is smaller than default*/
/*.form textarea.inputMedium {
    width: 203px;
}

    .form textarea.inputMedium:focus::placeholder {
        color: transparent;
    }

.form textarea.inputLarge {
    width: 303px;
}

    .form textarea.inputLarge:focus::placeholder {
        color: transparent;
    }

.form textarea.inputAuto {
    width: auto;
}

    .form textarea.inputAuto:focus::placeholder {
        color: transparent;
    }

.form textarea.inputAllSpaceAvailable {
    width: calc(100% - 10px);
}

    .form textarea.inputAllSpaceAvailable:focus::placeholder {
        color: transparent;
    }*/

.form ul.multiSelectControl,
ul.multiSelectControlBound {
    font-family: Calibri, Arial, Tahoma,Helvetica, sans-serif;
    display: inline-block;
    font-size: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    overflow: auto;
    /*min-height: 60px;*/
    margin:0px;
}

.form ul.multiSelectControl,
ul.multiSelectControlBound.popup {
    margin-left:10px;
}

    form ul.multiSelectControl > li.root,
    ul.multiSelectControlBound > li.root {
        margin-left: 0px;
    }

    form ul.multiSelectControl > li.root > span, 
            ul.multiSelectControlBound > li.root > span {
        display: none;
    }

form ul.multiSelectControl ul, 
        ul.multiSelectControlBound ul {
    font-size: 100% !important;
    margin-bottom: 0px;
}

form ul.multiSelectControl > li > ul > li, 
        ul.multiSelectControlBound > li > ul > li {
    margin-left: 0px;
}

form ul.multiSelectControlBound > li {
    margin-left: 0px;
}

form ul.multiSelectControl li, ul.multiSelectControlBound li {
    list-style: none;
    font-size: 100% !important;
    margin-left: 10px;
    cursor:pointer;
}

form ul.multiSelectControl.horizontallayout li, ul.multiSelectControlBound.horizontallayout li {
    float:left;
    padding-left:5px;
}

    form ul.multiSelectControl li span, ul.multiSelectControlBound li span {
        padding: 3px;
        border: 1px solid #12131f;
        display: inline-block;
        min-width: 150px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        margin-bottom: 2px;
    }

        form ul.multiSelectControl li span i, ul.multiSelectControlBound li span i {
            font-size: 14px;
            font-weight: 100;
            padding-left: 3px;
            color: #ffffff;
            transition: all 0.4s;
            float: right;
            position: relative;
            top: 3px;
        }

    form ul.multiSelectControl li.selected > span, ul.multiSelectControlBound li.selected > span {
        background-color: #12131f;
        border-color: #12131f;
        color: #ffffff;
        transition:all 0.4s;
    }

        form ul.multiSelectControl li.selected > span, ul.multiSelectControlBound li.selected > span i {
            display: inline-block;
            color:#ffffff;
        }

    form ul.multiSelectControl li:hover > span,
            ul.multiSelectControlBound li:hover > span{
                cursor: pointer;
    }

    form ul.multiSelectControl li:not(.selected):hover > span i,
    ul.multiSelectControlBound li:not(.selected):hover > span i {
        color: #12131f;
    }

    form ul.multiSelectControl li > span p.productSKU,
    ul.multiSelectControlBound li > span p.productSKU {
        display: inline-block;
        margin: 0;
        font-size: 10px;
        padding: 0 5px 0 5px;
    }

.multiselectSummaryItemList div.commandBar.modalNavBar {
    margin-bottom: 0;
    padding: 0;
    height:28px;
}

    .multiselectSummaryItemList div.commandBar.modalNavBar.bottom {
        margin-bottom: 0;
        border-top-color: #2A818A;
        border-top-width: 4px;
        border-bottom: none;
        padding-top: 0;
        border-top-style: solid;
        /*top: -10px;
        position: relative;*/
    }

.multiselectSummaryItemList label{
    margin-left:10px;
}

.multiselectSummaryItemList.hidden {
    display: none;
}

span.multiselectSummaryItemList.show {
    position: absolute;
    /*top: 10%;*/
    background-color: white;
    border: 1px solid #12131f;
    border-radius: 3px;
    left: calc(100% / 6);
    /*right: 0;*/
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    max-width:600px;
    transition: all 0.4s;
    z-index: 2500;
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.3);
}

.multiselectSummaryItemList div.scrollableItemsList {
    max-height: 400px;
    overflow: auto;
    padding-top: 10px;
    display: grid;
    grid-template-columns: calc(100% / 4) calc(100% - calc(100% / 4));
}

input.formButton.viewMultiselectOptions {
    display: block;
    margin-bottom: 10px;
    clear:both;
}

.dateRange input, .dateRange select {
    width: 80px;
}
.form .calendaricon 
{
	width:auto;
	margin-bottom:-5px;
	margin-right:6px;
}
.radioButtons input 
{
	width:auto;
}
.radioButtons label 
{
	margin-right:20px;
}

.datePickerClearImage{
	width:16px;
    height:16px;
}

.mainEditFragment {
    padding-left:0px !important;
    padding-top:0px !important;
    overflow:auto;
}

/* form validation */
.error
{
}

/* main submit buttons */

.leftButton {
    margin-left:5px;
}

.commandBar input
{
    float: left;
}

    .commandBar input.exportButton {
        float: right !important;
        margin-right: 3px !important;
    }

        .commandBar input.exportButton.reportExportButton {
            float: none !important;
        }


.commandBar.dashboard {
    min-height: 62px;
    height:auto;
}

.commandBar.dashboard input {
    float: none !important;
    clear: both;
}

    .commandBar.dashboard input.personaliseDashboardButton {
        float: right !important;
        margin-right: 0px;
    }

    .commandBar input, .commandBar input:visited, .formButton, .formButton:visited, a.formButton, a.formButton:visited {
        border: 1px solid #12131f;
        color: white !important;
        min-width: 100px;
        margin-right: 30px;
        text-transform: uppercase;
        width: fit-content;
        overflow: visible;
        padding: 4px 8px 4px 8px;
        cursor: pointer;
        font-weight: bold;
        font-size: 0.9em;
        font-family: Calibri, Arial, Tahoma,Helvetica, sans-serif;
        background-color: #12131f;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        -webkit-appearance: none;
        letter-spacing:1px;
        line-height:1.0em;
        box-sizing:border-box;
    }

        .commandBar input:hover, .formButton:hover, a.formButton:hover {
            opacity: 0.7;
        }

        .commandBar input:active, .formButton:active, a.formButton:active {
            background-color: #e95931;
            color: white;
        }

.commandBar input.cancelButton {
    border: 1px solid #f43b2b !important;
    background-color: #f43b2b !important;
}

.commandBar input.saveButton {
    border: 1px solid #008101 !important;
    background-color: #008101 !important;
    color:#ffffff;
}

.commandBar input.newButton {
    border: 1px solid #008101 !important;
    background-color: #008101 !important;
    color: #ffffff;
}

.commandBar input.saveAndCloseButton {
    border: 1px solid #008101 !important;
    background-color: #008101 !important;
    color: #ffffff;
}

.commandBar input.saveAndBackButton {
    border: 1px solid #008101 !important;
    background-color: #008101 !important;
    color: #ffffff;
}

.commandBar input.deleteButton {
    display: inline;
    background-image: url(/cssimages/navigation/delete-32.png);
    background-repeat: no-repeat;
    background-position: center right 5px;
    background-size: 12px 12px;
    border: 1px solid #f43b2b !important;
    background-color: #f43b2b !important;
}

.commandBar input[disabled="disabled"], input.disabled
{
	opacity: 0.5;
    cursor:not-allowed!important;
    color:white;
}

input.formButton 
{
    width: fit-content;
}

.formButton.lrg-button {
    min-height: 50px;
    margin-top: 3px;
    margin-bottom: 3px;
}

.newButton {
    border: 1px solid #008101 !important;
    background-color: #008101 !important;
    color: #ffffff;
}

.runButton {
    border: 1px solid #008101 !important;
    background-color: #008101 !important;
    color: #ffffff;
}

.cancelButton {
    border: 1px solid #f43b2b !important;
    background-color: #f43b2b !important;
    color: #ffffff;
}

input[disabled="disabled"].formButton, input.disabled.formButton {
    opacity: 0.5;
    cursor: not-allowed !important;
    color: white;
}

.formrow div.popUpcommandBar {
    margin:5px;
}

.popUpcommandBar input {
    float: left;
}

    .popUpcommandBar input, .popUpcommandBar input:visited {
        border: 1px solid #12131f;
        color: white;
        width: fit-content;
        overflow: visible;
        padding: 10px 8px 10px 8px;
        cursor: pointer;
        font-weight: bold;
        font-size: 80%;
        font-family: Calibri, Arial, Tahoma,Helvetica, sans-serif;
        background-color: #12131f;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        text-transform: uppercase;
        -webkit-appearance: none;
        letter-spacing: 1px;
        max-height:unset;
    }

.popUpcommandBar input:hover
{
	opacity: 0.7;
}

.popUpcommandBar input:active
{
    background-color:#e95931;
    color: white;
}

.popUpcommandBar input[disabled="disabled"], input.disabled
{
	opacity: 0.5;
    cursor:not-allowed!important;
    color:white;
}

.popUpcommandBar .cancelButton {
    float: right;
    border: 1px solid #f43b2b !important;
    background-color: #f43b2b !important;
}

.popUpcommandBar input.saveButton {
    border: 1px solid #008101 !important;
    background-color: #008101 !important;
    color: #ffffff;
}

.popUpcommandBar input.saveAndCloseButton {
    border: 1px solid #008101 !important;
    background-color: #008101 !important;
    color: #ffffff;
}

.popUpcommandBar input.saveAndBackButton {
    border: 1px solid #008101 !important;
    background-color: #008101 !important;
    color: #ffffff;
}

a.saveButton {
    border: 1px solid #008101 !important;
    background-color: #008101 !important;
    color: #ffffff;
}

input.formButton.saveButton {
    border: 1px solid #008101 !important;
    background-color: #008101 !important;
    color: #ffffff;
}

input.formButton.deleteButton {
    background-image: url(/cssimages/navigation/delete-32.png);
    background-repeat: no-repeat;
    background-position: center right 5px;
    background-size: 12px 12px;
    border: 1px solid #f43b2b !important;
    background-color: #f43b2b !important;
}

    input.formButton.deleteButton.formSectionDelete {
        width:160px;
    }
    
/*Calendar Styles*/
/*Main Div Controll*/
.bookingSlotCalendar {
    height: 100%;
    overflow: hidden;
}

.bookingSlotCalendarContainer {
	padding:1px;
    width:100%;
}

#bookingSlotCalendarNavigation {
    display:inline-block; /*this is needed to ensure the correct hight is calculated for the nav controls*/
}

/*Set up the standard settings for any table within the calendar*/
.bookingSlotCalendar table, .bookingSlotCalendar tr, .bookingSlotCalendar td {
	margin:0;
	padding:0;
}

/*calendar*/
.slotCalendarContentWrapper {
    height:100%;
}

#calendarContainer {
    width:100%;
}

#calendarTimeContainer {
    display:inline-block;
    float:left;
}

#calendarDataContainer {
    display:inline-block;
    float:left;
    /*max-width:85%;*/
}

#calendarDataHeaderTableContent {
    overflow-x: hidden;
    width:100%;
}

#calendarDataTableContainer {
    overflow-y:auto;
    overflow-x:scroll;
    width:100%;
    padding-right:17px;
}

#calendarTimeTableContent {
    overflow-y:hidden;
    overflow-x:scroll;
}

#calendarZoomControls {
    width:100%;
    text-align:left;
    min-width:450px;
}

.zoominButton {
    font-size: 1.0em;
    font-weight: bold;
    /*line-height:20px;*/
    width: 20px;
    display: inline-block;
    text-align: center;
    background-color: #12131f;
    color: white;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    cursor: pointer;
    margin-left: 5px;
}

    .zoominButton:hover {
        opacity:0.7;
    }

    #zoomout {
        margin-right: 20px;
        margin-left: 0px;
    }

#zoomState {
    border: 1px solid #ccc;
    width: 40px;
    display: inline-block;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    font-size: 1.0em;
}

.headerTable {
    table-layout: fixed;
}

.headerTable td {
    width:100px;
    height:20px;
	text-align:center;
	font-weight:bold;
	color:White;
	background-color: #454545;
}

.headerTable td.firstHeader {
    width:50px;
}

.headerTable td.firstHeader div {
    width:50px;
    padding-left: 1px;
    padding-right: 1px;
}

/*reduced size for monthly calendar*/

.headerTable.monthly td {
    font-size:0.8em;
}

.headerTable.monthly td.firstHeader {
}

.headerCellContent { 
    width:100px;
    padding-left: 1px;
    padding-right: 1px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.headerCellContent.monthly { 
    width:50px;
}

.headerCellContent.timeHeader {
}

.headerCellContent.weekend {
}


/*Content table styles*/


#calendarScrollingTableContent {
    /*overflow-y:auto;*/
}

/*#calendarDataContainer {
    overflow-y:auto;
    width:95%;
}*/

.contentTable {
    table-layout: fixed;
}

.contentTable td.firstHeader {
    width:50px;
}

.contentTable td.firstHeader div {
    width:50px;
}

.contentTable td {
    width:100px;
}

.timeDivision {
    /*height:18px;*/
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    font-size:0.8em;
    text-align:left;
    width:100px;
    position:relative; /*testing*/
    Cursor:pointer;
}

.timeDivision.excludedDay {
    cursor:not-allowed;
    background-color:#CCCCCC !important;
}

.timeDivision.monthly {
    width:50px;
}

.timeDivision.weekend {
    background-color:#e6e6e6;
}

.timeDivision.odd {
    border-top: 1px solid black;
    font-weight:bold;
    text-align:right;
    font-size:0.9em;
    position:relative; /*testing*/
}

.timeDivision.odd.weekend {
    background-color:#e6e6e6;
}

.linkedBookingSlot {
    position:absolute;
    width:98%;
    background-color:#8E8E8E;
    -webkit-box-shadow: 2px 2px 1px 1px #454545;
    box-shadow: 2px 2px 1px 1px #454545;
    overflow-y: hidden;
    overflow-x: hidden;
    text-align:center;
    opacity:1;
    z-index:2000;
    cursor:not-allowed;
}

.linkedBookingSlotAdmin {
    position: absolute;
    width: 98%;
    background-color: #8E8E8E;
    -webkit-box-shadow: 2px 2px 1px 1px #454545;
    box-shadow: 2px 2px 1px 1px #454545;
    overflow-y: hidden;
    overflow-x: hidden;
    text-align: center;
    opacity: 0.5;
    z-index: 2000;
    pointer-events: none;
    cursor: pointer;
}

.predefinedCalBookingSlot {
    position:absolute; 
    width:98%;
    -webkit-box-shadow: 2px 2px 1px 1px #454545;
    box-shadow: 2px 2px 1px 1px #454545;
    overflow: hidden;
    z-index:1000;
    background-color:#1A9E60; /*#1aa260;*/
    opacity:0.9;
    cursor:pointer;
    color:white;
    text-align:center;
    text-transform:uppercase;    
}

.predefinedCalBookingSlot:hover {
    opacity:1.0;
}

.predefinedCalBookingSlot.slotselected {
    background-color:#f43b2b;
    opacity:1.0;
}

.predefinedCalBookingSlot input[type="checkbox"] {
    width:16px;
    height:16px;
    margin-left:3px;
    margin-top:3px;
    position: absolute;
    top: 0px;
    left: 0px;
    display:none;
}

.predefinedCalBookingSlotNotFixed {
    position: absolute;
    width: 3%;
    overflow: hidden;
    z-index: 1000;
    background-color: #1A9E60; /*#1aa260;*/
    opacity: 0.4;
    Cursor: not-allowed;
    color: white;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
    width: 98%;
    -webkit-box-shadow: 2px 2px 1px 1px #1A9E60;
    box-shadow: 2px 2px 1px 1px #1A9E60;
}

#clearSelectionButton {
    padding-bottom:0px;
    padding-top:0px;
}

.calBookingSlot {
    position:absolute;
    width:98%;
    background-color:white;
    -webkit-box-shadow: 2px 2px 1px 1px #454545;
    box-shadow: 2px 2px 1px 1px #454545;
    overflow-y: hidden;
    z-index:2000;
}

.calBookingSlot.highlight {
    background-color:#F2F2F2;
    
}

.forwardWizardButton {
    background: url(../cssimages/navigation/arrow-right.png) no-repeat;
    background-size: 16px;
    background-position: right 5px center;
    padding-right: 25px !important;
}

.arrowButton {
    background-color: #12131f;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: white;
    font-weight: bold;
}

/*.ui-widget span.formcontrol {
    float:none;
}*/

.calBookingSlot img {
    Cursor:pointer;
    padding:1px 1px 1px 1px;
    float:left;
    width:18px;
}

.calBookingSlot input {
    Cursor:pointer;
    padding:1px 1px 1px 1px;
    float:right;
}
.calBookingSlot div {
    clear:both;
}
.calBookingSlot div p {
    font-size:75%;
}

.checkBoxLabelWidthAuto label {
    width:auto !important;
}

.checkBoxLabelWidthAuto.checkBoxLabelRight label {
    float: right;
    text-align: left;
    white-space: nowrap;
    min-width: 10px;
    /*width: 10px !important;*/
}

/*Monthly boking slot calendar selection controls - e.g. yeah and month*/
.monthlyBookingNavControls ul {
    margin-bottom: 0px;
}

.monthlyBookingNavControls li,#calView li,#prevnextControl li 
{
	/*float:left;*/
	list-style:none;
	margin-right:4px;
	width:40px;
}

.monthlyBookingNavControls
{
    width:100%;
    overflow:hidden;
    margin-bottom:4px;
    margin-top:4px;
    margin-left:1px;
}

.monthlyBookingNavControls li {
    display:inline;
}

    .monthlyBookingNavControls li a {
        padding: 2px 4px 0px 4px;
        display: inline-block;
        height: 22px;
        background-color: #dcdbdb;
        font-weight: bold;
        border: 1px solid #dcdbdb;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        min-width: 25px;
        text-align: center;
        color:#000000 !important;
    }

.monthlyBookingNavControls li a:link,.monthlyBookingNavControls li a:visited 
{
    color:#ffffff;
    text-decoration:none;
}

        .monthlyBookingNavControls li a:hover {
            color: #ffffff !important;
            text-decoration: none;
            background-color: #f43b2b;
            border: 1px solid #f43b2b;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding;
            background-clip: padding-box;
        }

        .monthlyBookingNavControls li.selected a {
            color: #ffffff !important;
            text-decoration: none;
            background-color: #12131f;
            border: 1px solid #12131f;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            -webkit-background-clip: padding-box;
            -moz-background-clip: padding;
            background-clip: padding-box;
        }

    .monthlyBookingNavControls li select {
        border: 1px solid #2A818A;
        padding: 1px;
        height: 35px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }

/*tool tip style*/

table.toolTipTable {
    border-collapse: collapse;
    width:100%;
    font-size:80%;
}
    table.toolTipTable th:first-child {
        text-align: left;
    }

    table.toolTipTable th {
        text-align: center;
        padding: 0 3px 0 3px;
        font-weight: normal;
        border-right: 1px solid #454545;
        border-left: 1px solid #454545;
        background-color: #454545;
        color: #ffffff;
    }

    table.toolTipTable td {
        text-align: center;
        padding: 0 3px 0 3px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        font-weight: normal;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }

        table.toolTipTable td.toolTipProductName {
            text-align: left;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        table.toolTipTable td.toolTipQuantity {
            max-width:50px;
        }

/*Home page web parts styles*/

.homePageWidgetContentRead {

}

.homePageWidgetContentEdit {
}

/*home page widget dashboard manager styles*/

.deleteWidget {
    background-color:transparent;
    border:none;
    cursor:pointer;
    width:25px;
    height:25px;
}

.sortWidget {
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 25px;
    height: 25px;
    margin-right:8px;
}

.widgetSortOrder {
    width: 30px;
    border: none;
    height: 30px;
    text-align: center;
}

.deleteWidget svg {
    width: 25px;
    height: 25px;
}

.dashboardColumnRead {
    float: left;
    display: inline;
    padding: 0 0 5px 5px
}

.dashboardColumnEdit {
    display: inline-block;
    padding: 0 0 5px 5px;
    margin: 5px;
    border: 1px solid #D1E3E4;
    min-height: 500px;
    min-width: 520px;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.homePageWidget {
    border-top: solid 2px #12131f !important;
    margin: 20px 10px 10px 10px;
    background-color: white;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

    .homePageWidget.edit:hover {
        border-top: 2px dashed #008101 !important;
        border-bottom: 2px dashed #008101 !important;
        transform: scale(0.998);
        transition: all 0.2s;
        padding: 3px 0 3px 0;
    }

.widgetTitle {
	border-bottom:1px solid #CCCCCC;
	color:White;	
	font-weight: normal;
	padding:5px 5px;
    background: #2A818A; /* Old browsers */
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:1.2em;
    cursor:pointer;
    background-position-x:5px !important;
}

.widgetClosed {
    max-width:300px;
}

.widgetTitle a {
    color: White;
    font-size: 80%;
    text-decoration: none;
}

.widgetTitle a:hover
{
	color:White;
	font-weight:bold;
	text-decoration:underline;
}


.widgetTitleEdit {
    border-bottom: 1px solid #CCCCCC;
    color: White;
    font-weight: normal;
    padding: 5px 5px;
    background: #2A818A; /* Old browsers */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.2em;
    cursor: pointer;
    background-position-x: 5px !important;
    display: grid;
    grid-template-columns: calc(85% - 16px) 20%;
    align-items: center;
}

    .widgetTitleEdit a {
        color: White;
        font-size: 80%;
        text-decoration: none;
    }

        .widgetTitleEdit a:hover {
            color: White;
            font-weight: bold;
            text-decoration: underline;
        }

.widgetEditControls {
    display:flex;
    flex-direction:row;
    align-items:center;
    align-content:space-evenly;
}

/*-----------------------------*/
/*---[ Homepage Components ]---*/
/*-----------------------------*/
.addToWaitingListIcon {
    background-image: url(../images/addToWaitingListIcon.png);
    background-position-x: 2px;
    background-position-y: center;
    background-repeat: no-repeat;
    padding-left: 28px;
}

.waitingListIcon {
    background-image:url(../images/waitinglist.png);
    background-position-x: 2px;
    background-position-y:center;
    background-repeat:no-repeat; 
    padding-left:28px;     
}

.availabilityCalendarIcon {
    background-image:url(../images/availabilityCalendarIcon.png);
    background-position-x: 2px;
    background-position-y:center;
    background-repeat:no-repeat; 
    padding-left:28px;   
}

.searchIcon {
    background-image:url(../images/searchIcon.png);
    background-position-x: 2px;
    background-position-y:center;
    background-repeat:no-repeat; 
    padding-left:30px;   
}

.quickBookIcon {
    background-image:url(../images/quickBookIcon.png);
    background-position-x: 2px;
    background-position-y:center;
    background-repeat:no-repeat; 
    padding-left:30px;   
}

.voucherIcon {
    background-image:url(../images/voucherIcon.png);
    background-position-x: 2px;
    background-position-y:center;
    background-repeat:no-repeat; 
    padding-left:30px;   
}

.bookingsIcon {
    background-image: url(../images/bookingsIcon.png);
    background-position-x: 2px;
    background-position-y: center;
    background-repeat: no-repeat;
    padding-left: 30px;
}

.ordersIcon {
    background-image: url(../images/ordersIcon.png);
    background-position-x: 2px;
    background-position-y: center;
    background-repeat: no-repeat;
    padding-left: 30px;
}

.quoteIcon {
    background-image: url(../images/quoteIcon.png);
    background-position-x: 2px;
    background-position-y: center;
    background-repeat: no-repeat;
    padding-left: 30px;
}

.errorIcon {
    background-image:url(../images/errorIcon.png);
    background-position-x: 2px;
    background-position-y:center;
    background-repeat:no-repeat; 
    padding-left:30px;   
}


#desktopSwitch {
    background-image:url(../images/desktop.png) !important;
    background-position: center center !important;
    background-repeat:no-repeat !important;
    height:16px; 
}


#mobileSwitch {
    background-image:url(../images/mobile.png) !important;
    background-position: center center !important;
    background-repeat:no-repeat !important;
    height:16px; 
}

/*search jquery result*/

input[type='text'].ui-autocomplete-loading {
    background-image: url(../cssimages/backgrounds/smallloading.gif) !important;
    background-position:right center;
    background-repeat:no-repeat;
    background-size:20px;
}

li.appSearchResult {
    white-space: nowrap;
}

li.customer-result a:before {
    font-family: "FontAwesome";
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: '\f007';
    margin-right: 5px;
}

li.customer-result.cancelled a:before {
    color: rgba(255,0,0,1) !important;
}

li.booking-result a:before {
    font-family: "FontAwesome";
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: '\f073';
    color: #008101;
    margin-right: 5px;
}

li.booking-result.cancelled a:before {
    color: rgba(255,0,0,1) !important;
}

li.order-result a:before {
    font-family: "FontAwesome";
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: '\f291';
    color: #008101;
    margin-right: 5px;
}

li.order-result.cancelled a:before {
    color: rgba(255,0,0,1) !important;
}

li.quote-result a:before {
    font-family: "FontAwesome";
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: '\f044';
    color: #FFA500;
    margin-right: 5px;
}

li.quote-result.cancelled a:before {
    color: rgba(255,0,0,1) !important;
}


/*Drillable report CSS*/
.reportHeader {
    background-color: Gray;
}
.reportHeader TD
{
    border-bottom: 1px solid Black;
    padding:0;
}

/*a hidden row*/
.reportRowHidden
{
    display:none;
}

/*level 0 - summary line*/
.reportRow0
{
    background-color:#454545;
    font-weight:bold;
    color:white;
}

.reportRow1
{
    /*background-color:#CCFF99;*/
    background-color:#CCECFF;
    font-size:1.1em;
    font-weight:bold;
}


.reportRow2
{
    background-color:#FFFF99;
    font-size:1.05em;
}

.reportRow3
{
    background-color:white;
    font-size:0.9em;
}

.reportRow4
{
    background-color:none;
    font-size:0.9em;
}

/*j quory plug in css*/

/*.tablescroll
{ font: 12px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color:#fff; }*/

.tablescroll {
    margin-left:10px;
}

.tablescroll td, 
.tablescroll_wrapper,
.tablescroll_head,
.tablescroll_foot
{ border:1px solid #ccc; }

.tablescroll td
{ padding:1px 3px;
  text-align:center;
}

.tablescroll_wrapper
{ border-left:0; }

.tablescroll_head
{ font-size:0.8em; font-weight:bold; background-color:#eee; border-left:0; border-top:0; margin-bottom:3px; }

.tablescroll thead td
{ border-right:0; 
  border-bottom:0; 
  text-align:center;
  color:White;
  background-color:#454545;  
}

.tablescroll tbody td
{ 
    border-right:0; 
    border-bottom:0; 
    white-space:nowrap;
}

.tablescroll tbody td img {
    vertical-align:middle;
}

.tablescroll_body {
    font-size:0.8em;
}

.tablescroll tbody tr.first td
{ border-top:0; }

.tablescroll_foot
{ font-weight:bold; background-color:#eee; border-left:0; border-top:0; margin-top:3px; }

.tablescroll tfoot td
{ border-right:0; border-bottom:0; }

.driller
{
    font-weight:bold;
    /*
    display:inline-block;
    width:15px;
    padding:1px 0px;
    brder: 1px solid black;
    background: salmon;
    border-radius: 50%;
    text-align:center;
    box-shadow:0px 0px 5px rgba(0,0,0,0.3);
    font-weight:bold;
    */
}

.reportCellHighlighterGood
{
    background: #52b152; /* Old browsers */
    background: -moz-linear-gradient(top,  #b4ddb4 0%, #52b152 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top,  #b4ddb4 0%,#52b152 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b4ddb4 0%,#52b152 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b4ddb4 0%,#52b152 100%); /* IE10+ */
    background: linear-gradient(top,  #b4ddb4 0%,#52b152 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#52b152',GradientType=0 );
}

.reportCellHighlighterBad
{
    background: rgba(207,4,4,1); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,212,209,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6+ */
    background: -webkit-linear-gradient(top, rgba(255,212,209,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,212,209,1) 0%,rgba(207,4,4,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,212,209,1) 0%,rgba(207,4,4,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255,212,209,1) 0%,rgba(207,4,4,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd4d1', endColorstr='#cf0404',GradientType=0 );
}

td.emptyGridContainer {
    border-bottom:none !important;
    font-size:14px !important;
    background-color:transparent !important;
}

    td.emptyGridContainer:hover {
        color: #000000 !important;
        cursor:unset !important;
    }

    .emptyGrid {
        padding-left: 5px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-height: 25px;
        background-color: #ffffff;
    }

        .emptyGrid :hover {
            color: #000000 !important;
            cursor: unset !important;
        }

    #formView div.emptyGrid {
        padding-left: 10px;
    }

/*Pager style for grids*/

.pagerStyle
{
    font-size:1.5em;
    color:#000000;
}

    .pagerStyle td {
        border:none !important;
    }

    .pagerStyle td table {
        width: auto !important;
    }

    .pagerStyle SPAN {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        background-color: #12131f;
        width: 20px;
        display: inline-block;
        text-align: center;
        border-radius: 3px;
    }

    .pagerStyle a {
        /*text-decoration: underline;*/
        font-size: 16px;
        width: 20px;
        display: inline-block;
        text-align: center;
        border-radius: 3px;
    }

        .pagerStyle a:hover {
            /*text-decoration: underline;*/
            color: #ffffff;
            background-color: #12131f;
        }

.fileUpload
{
    width:500px!important;
}

.staffPicture
{
    border:solid 1px #b7b7b7;
	padding:3px;
	background-color:white;
	display:inline-block;
	-webkit-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    2px 2px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 2px 5px rgba(50, 50, 50, 0.75);
    border-collapse:separate;
}
.staffPicture img
{
    display:block;
}

/*bread crumb styles*/
.nav-breadcrumb {
    font-weight: normal;
    color: #ffffff;
    padding: 3px 5px 2px 5px;
    height: 24px;
    white-space: nowrap;
    overflow: hidden;
    background-color: #12131f;
    font-size: 1.0em;
}
    .nav-breadcrumb span {
        color: rgba(255,255,255,0.9);
        padding-right: 5px;
    }

        .nav-breadcrumb span:not(:last-of-type)::after {
            content: "|";
            padding-left: 5px;
        }

    .nav-breadcrumb a {
        color: rgba(255,255,255,0.9);
        text-decoration: none;
        border-bottom: 1px solid #ffffff;
    }

        .nav-breadcrumb a:hover {
            color: #2A818A;
            text-decoration: none;
            border-bottom: 1px solid #2A818A;
        }

/*Custom Sub Nav List Control Styles*/
.customsubnavheadertext p {
    font-weight: normal;
    color: #ffffff;
    padding: 5px 5px 1px 5px;
    height: 24px;
    margin-bottom: 0px;
    /*border-bottom: solid 1px #12131f;*/
    white-space: nowrap;
    overflow: hidden;
    background-color: #12131f;
    font-size: 1.0em;
    /*margin-bottom: 5px;*/
}

.customsubnav
{
    float: left;
    position: relative;
    width: 100%;
    height: 100%;
}

.customsubnav .customsubnavcontainer {
    height: 100%;
    width: 100%;
}

    .customsubnav .customsubnavcontainer div.commandBar {
        /*border-top:1px solid white;*/
    }

.customsubnavrowheader {
    font-weight:bold;
    background:url('../cssimages/navigation/icon_folder.png') no-repeat left 2px;
    background-position-x: 5px;
    background-size:16px 16px;
    /*border-top: solid 1px black;*/
    width:100%;
    display:block;
    cursor: pointer;
    white-space:nowrap;
    overflow:hidden;
    text-indent:25px;
}

.customsubnavrow div {
    text-align: right;
    padding: 3px 5px;
    cursor: pointer;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid #ccc;
    border-left: none;
    font-size: 88%;
    overflow: hidden;
    white-space: nowrap;
    background-color: #ffffff;
}

.customsubnavrow.selected div{
    font-weight:600;
    background: #2A818A;
    font-size:100%;
    color:#ffffff;
}

.customsubnavrow div:hover {
    background: #2A818A;
    color:#ffffff;
}

/*.customsubnavrow.level1.hideChildTasks div,
.customsubnavrow.level1 div:hover,
.customsubnavrow.level1.hideChildTasks.selected div,
.customsubnavrow.level1.selected div:hover {
    background: url(../cssimages/navigation/open.png) no-repeat left 5px;
    display:inline-block;
}*/

.customsubnavrow.level1 div {
    text-align:left;
    text-indent:15px;
    width:100%;
}

.customsubnavrow.level1.selected div{
    font-weight:600;
    font-size:100%;
    text-decoration:underline;
    /*background:none !important;*/
    color:#000000 !important;   
}

.customsubnavrow.level1 div:hover{
    text-decoration:underline;
    color:#000000 !important;   
}

.customsubnavrow.level2 div {
    text-align:left;
    text-indent:45px;
}

.customsubnavcontainer ul {
    font-size: 1.0em;
    margin-bottom: 0px;
}

.customsubnavcontainer ul li {
    
    list-style:none;
    font-size: 1.0em;
    cursor:pointer;
    margin-left:10px !important;
    padding-bottom: 2px;
}

.customsubnavcontainer li.showChildTasks {
    background: url(../cssimages/navigation/open.png) no-repeat left 1px;
    text-indent: 18px;
}

.customsubnavcontainer li.hideChildTasks {
    background: url(../cssimages/navigation/close.png) no-repeat left 3px;
    text-indent: 18px;
}

.customsubnavcontainer li.hideChildTasks ul {
    display:none;
}

.customsubnavcontainer li.showChildTasks ul {
}

.customsubnavcontainer ul li span {
    font-size: 1.0em;
    color:#000000;
    white-space:nowrap;
}

.customsubnavcontainer ul li span:hover {
    text-decoration:underline;
}

.customsubnavcontainer span.selected{
    font-weight:bold;
    /*background: #E95931;*/
    font-size:100%;
    /*color:white;*/
}

.subNavExtraText {
    font-size: 0.75rem;
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    max-width: 150px;
    text-overflow: ellipsis;
}

/*.customsubnavcontainer span:hover {
    background: #E95931;
    color:white;
}*/

/*** Modal Dialog ***/

.iframeModalDialog {
    position: absolute;
    top: 3%;
    z-index: 101;
    border-radius: 5px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    width: 90%;
    max-height: 90%;
    min-height: 90%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width:1250px;
}

.modalCover {
    width:100%;
    height:100%;
    background-color:#000000;
    position:fixed;
    z-index:100;
    top:0;
    left:0;
}

.commandBar.modalNavBar {
    padding-top: 5px;
    background-color: #12131f;
    border-bottom-color: #2A818A;
    border-bottom-width:4px;
}

.modalNavBar input {
    float:right;
    margin-right:5px;
}

/**slot calendar styles*/

.bookedSlotHeld {
    height:100%;
    width:100%;
    background-color:#ffaa42;
    cursor:not-allowed;
    overflow:hidden;
}

.bookedSlotComplete {
    height:100%;
    width:100%;
    cursor: pointer;
    background-color: #e6e6e6 ; /* Old browsers */
    overflow:hidden;
}

.bookedSlotAvailable {
    height:100%;
    width:100%;
    cursor:pointer;
    background-color:#5a9949;
    overflow:hidden;
}

.bookedSlotFull {
    display: inline-block;
    line-height: normal;
    font-weight: bold;
    font-size: 14px;
    color: #000000;
    background: url(../cssimages/navigation/popup-link-black.png) no-repeat;
    background-size: 12px;
    background-position: 98% 2%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
}

/*a wee pop up to let folks know about things*/
.notifier {
    border-top: solid 1px #e95931 !important;
	border-left: solid 1px #CCCCCC !important;
	border-right: solid 1px #CCCCCC !important;
	border-bottom: solid 1px #CCCCCC !important;
	width:150px;
    position:absolute;
    bottom:10px;
    right:40px;
    background-color:#EEE;
    display:none;
}

.notificationContent {
    height:200px;
    display:none;
}

.notifierTitle {
    border-bottom:1px solid #CCCCCC;
    padding-left:3px;
	color:White;
    height:20px;
    text-align:center;	
	font-weight: normal;
	background: #b7b7b7; /* Old browsers */
    background: -moz-linear-gradient(top,  #b7b7b7 1%, #454545 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#b7b7b7), color-stop(100%,#454545)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b7b7b7 1%,#454545 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b7b7b7 1%,#454545 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b7b7b7 1%,#454545 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b7b7b7 1%,#454545 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7b7b7', endColorstr='#454545',GradientType=0 ); /* IE6-9 */
}

.formHelpText {
    padding-left:5px;
}

.passwordResetFailMessage {
    color:red;
}

.calendarInfoMoney {
    display: inline-block;
    width: 100%;
    float: left;
    text-align: center;
    font-size: 14px !important;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendarInfoMoney.calendarInfoMoneyOwed {    
    color: red;
}

.calendarInfoMoney.calendarInfoNoMoneyOwed {    
    color: green;
}

.calendarInfoText {
    display: inline-block;
    width: 98%;
    overflow: hidden;
    float: left;
    padding-top: 8px;
    padding-left:2px;
    margin-left: -2px;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 1.0em;
    font-weight: normal;
    white-space:nowrap;
    color:#000000;
}

.calendarInfoText.highlight {
    font-style:italic;
}

.calendarSlotLeftCount {
    display: inline-block;
    line-height: 1;
    position: absolute;
    top: 0px;
    left: 1px;
    font-weight: 500;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    width: 94%;
    height: 15px;
    text-align: left;
}

.calendarSlotLeftCount.showbookings {
        border: 1px solid white;
        background: url(../cssimages/navigation/popup-link-white.png) no-repeat;
        background-size: 12px;
        background-position: 98% 20%;
        background-color:#12131f;
    }

    .calendarSlotLeftCount.showbookings:hover {
        background-color: #f43b2b;
        opacity:0.9;
    }

    .calendarSlotLeftCount.showbookings.lowcountwarning {
        background-color: #f43b2b;
        border: 1px solid white;
        font-weight: bold;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }
    .calendarSlotLeftCount.showbookings.lowcountwarning:hover {
        /*background-color:#12131f;*/
        opacity:0.9;
    }

/*Availability Calendar - home page widget*/
.dayResult {
    display:inline-block;
    margin-left:2px;
    margin-right:2px;
}

.dayResult > span {
    font-size:0.7em;
    font-weight:bold;
    width:100%;
    min-width:40px;
    display:block;
    text-align:center;
    background-color:#454545;
    color:white;
    padding:2px 0px 2px 0px;
    margin-bottom:2px;
}

.patternResult {
    display:inline-block;
    min-width:40px;
    float:left;
    margin-left:2px;
    margin-right:2px;
}

.slotResult {
    padding:0px;
    margin:0px;
    width:100%;
}

.slotResult li {
    list-style-type: none;
    width:100%;
}

.slotResult li span {
    display:block;    
}

.slotResult li a {
    display:block; 
    text-decoration:none;
    height:100%;
    padding-left:0px;
    padding-right:0px;
    border-top:2px solid #606060;
 }

.slotResult li.searchedDate a {
    border: 2px solid #000000;
    font-weight:bold;
 }

/*Available*/
.slotResult li.available a:hover {
    /*background-color:white;*/
    opacity:0.7;
}

.slotResult li.available a {
    background-color:#86D194;
    cursor:pointer;  
}

/*un available*/
.slotResult li.unAvailable a {
    background-color:#FF4747;
    cursor:default;
}

.slotInfoContainer {
    padding:0px 2px 0px 2px;
    height:100%;
    position:relative;
}

.slotResult li.unavailableDay {
    background-color: #CCCCCC;
    border-top:2px solid #606060;
}

.startTime {
    font-size:0.9em;
    font-weight:bold;
    text-align:left;
}

.startTime.small {
    display:inline-block;
    width:100%;
    text-align:left;
    font-size:0.6em;
}

.endTime {
    font-size:0.9em;
    text-align:left;
}

.endTime.small {
     display:none;
}

.price {
    font-size:1.0em;
    text-align:center;
    font-weight:bold;
    display:none;
}

.price.small {
    display:inline-block;
    text-align:right;
    font-size:0.7em;
    width:50%;
    padding-right:2px;
}

/*booking notes styles*/

li.hasnotes:not(.ui-state-active) a {
  /*background-color:#1A9E60;
  color:#ffffff;*/
}

li.hasnotes:not(.ui-state-active) a:hover {
  /*background-color:#f43b2b;*/
}

li.hasnotes:not(.ui-state-active) a::before {
  content:"*";
  color:red;
}

    li.hasnotes:not(.ui-state-active) a::after {
        content: "*";
        color: red;
    }

li.hasnotes:not(.ui-state-active) a span {
  /*color:#ffffff;*/
}

tr.hasnotes td:nth-child(5), tr.hasnotes-6 td:nth-child(6) {
    background-image: url('/cssimages/navigation/notes.png') !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    background-position: right 3px bottom 50% !important;
    padding-right: 20px !important;
}

tr.hasnotes:hover td:nth-child(5), tr.hasnotes-6:hover td:nth-child(6) {
    background-image: url('/cssimages/navigation/notes.png') !important;
    background-repeat: no-repeat !important;
    background-size: 16px 16px !important;
    background-position: right 3px bottom 50% !important;
    padding-right: 20px !important;
}

#forgottenPasswordButton {

}

#forgottenPasswordButton:hover {
    cursor:pointer;
}


#forgottenPasswordText {
    display:none;
}

/** Modal Message Stuff  ***/

/* The Modal (background) */
.modalMessageWrapper {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

/* Modal Content/Box */
.modalContentWrapper {
    background-color: #fefefe;
    margin: 5% auto; /* 15% from the top and centered */
    border: 2px solid #ffffff;
    width: 50%; /* Could be more or less, depending on screen size */
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    max-width:700px;
}

/* The Close Button */
.modalMessageClose {
    color: #ffffff;
    font-size: 30px;
    text-align:center;
}

    .modalMessageClose:hover,
    .modalMessageClose:focus {
        color: red;
        text-decoration: none;
        cursor: pointer;
    }

.modalMessageHeader {
    width: 100%;
    background-color: #12131f;
    font-size: 20px;
    border-bottom: 4px solid #2A818A;
    color: #ffffff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: 'Century Gothic',CenturyGothic,AppleGothic,'Open Sans',sans-serif;
    display: grid;
    grid-template-columns: calc(100% - 30px) 30px;
    justify-content: flex-start;
}

.modalMessageContent {
    margin:10px;
}

.modalMessageContent p {
    font-size:100%;
}

/********************* responsize stuff here*/

@media (min-width:1700px) {
    
    .iframeModalDialog {
        width: 75%;
    }

    div.formrow.productSelectorContainer {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width:0px) and (max-width:1450px) {

    table.gridView.smallTableSize {
        width: 75% !important;
    }

    table.gridView.mediumTableSize {
        width: 100% !important;
    }

    table.gridView.largeTableSize {
        width: 100% !important;
    }
}

@media (min-width:1161px) and (max-width:1350px) {

    div.formrow.productSelectorContainer {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width:0px) and (max-width:1160px) {

    .formrow.col-4 {
        grid-template-columns: 50% 50%;
    }

    #formView {
        min-width:100%;
    }

    th.th-lr {
        display: none;
    }

    td.td-lr {
        display: none;
    }

    div.formrow.productSelectorContainer {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .modalContentWrapper {
        width: 90%; /* Could be more or less, depending on screen size */
    }

    span.formcontrol.multiselectSummaryItemList.show {
        width:75%;
    }
}

@media (min-width:0px) and (max-width:830px) {

    .formrow.col-4 {
        grid-template-columns: 50% 50%;
    }

    /*.formrow.col-4 span.formcontrol {
        display: block;
    }*/

    .formrow.col-3 {
        grid-template-columns:50% 50%;
    }

        /*.formrow.col-3 span.formcontrol {
            display:block;
        }*/

    .formrow.split-1-3 span.formcontrol {
        display: block;
        padding-left: 10px;
    }

    .formrow.split-1-3 span.formcontrol label {
        display: block;
        text-align: left;
    }

    .formrow.split-1-3 span.formcontrol span.label {
        display: block;
        text-align: left;
    }

    th.th-lr {
        display: none;
    }

    td.td-lr {
        display: none;
    }

    th.th-md {
        display: none;
    }

    td.td-md {
        display: none !important;
    }

}

@media (min-width:0px) and (max-width:700px) {

    .commandBar.dashboard input.personaliseDashboardButton {
        display:none;
    }

    .formrow.col-4 {
        grid-template-columns: 100%;
    }

    .formrow.col-4 span.formcontrol {
        display: block;
    }

    .formrow.col-3 {
        grid-template-columns: 100%;
    }

    .formrow.col-3 span.formcontrol {
            display:block;
        }

    
    .formrow span.formcontrol {
        display: block;
        padding-left: 10px;
    }

    .form span.label {
        display: block;
        text-align: left;
    }

        .form span.label.spacer {
            display:none;
        }

    .form label {
        display: block;
        text-align: left;
    }
}