/*#region Left Bar */

/* Read only lockout */
.read-only-lock
{
    width: 100%;
    height: 100%;
    background: #222;
    opacity: 0.8;
    position: absolute;
    z-index: 9999;
}
.lock-icon
{
    margin: 100px auto;
    text-align: center;
    width: 100%;
}
.p-left-nav-col #accordion {
    margin-top:0px;
    font-size:14px;
}
.p-left-nav-col #searchfield {
    background-color:#333333;
    color:#b3b3b3;
    border:0px;
}

.p-left-nav-col #search-btn {
    background-color: transparent;
    border: 0px;
}

/* Catalog blocks */
.catalog-block.ui-draggable-dragging
{
    border: 2px dashed blue;
    width: 241px;
    height: 159px;
}
.catalog-block.ui-draggable-dragging img{

    max-width: 239px;
    max-height: 157px;
}


.catalog-block.ui-draggable-dragging .p-catalog-title-col {
    display: none;
}

img.catalog-loader{
    margin: 10px;
}

.catalog-hover {
    border: 2px dashed blue;
    position: absolute;
    top: 0; left: 0;
    padding: 8px;
    display: none;
}

/* Transparency overlay */
div.transparency-overlay {
    border-bottom: 35px solid transparent;
    border-left: 35px solid #428bca;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    position: absolute;
    text-indent: -30px;
    color: white;
}

div.transparency-overlay .fa {
    display: inline;
}

div.transparency-overlay.hidden {
    display: none;
}



.p-left-nav-col .catalog-thumb {
    background-color: #FFF;
    margin:14px 10px;
    border-radius:4px;
    object-fit: scale-down;
    width:100%;
    max-height:50px;
}

.p-catalog-title-col > span {
    display:block;
}
.p-catalog-title-col span:first-letter {
  text-transform: uppercase;
}

.p-catalog-title-col {
    text-transform: lowercase;
    margin-top: 20px;
    line-height: 18px;
    width: 60%;
    margin-left: 10px;
}

.p-left-nav-col .panel-body {
    border:0px !important;
}

.p-left-nav-col  p, .p-left-nav-col .catalog-title {
    color:#ffffff;
}

.p-catalog-thumb-col {
    padding-right:0px;   
}

.p-left-nav-col #search-results-list > p {
     color:#b3b3b3;
}

.p-left-nav-col .panel-heading {
    border-radius: 0px;
    padding:14px 15px;
    background-color:#333333;
    color:#999999;
}

.p-left-nav-col .catalog-block {
    margin:0px 10px 10px 10px;
    border-radius:4px;
    background-color:#212121;
    border: 2px dashed #333333;
    color:#e6e6e6;
    position:relative;
    padding: 20px 10px;
}

#clipboard-list{
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 435px;
}

 #search-results-loader { 
    display: none;
    height: 32px;
    width:32px;
    padding:10px;
    margin-left:120px;
}

 .p-left-nav-col #search-results-list {
    max-height: 435px;
    margin-top: 20px;
}

.p-top-wrapper .nav>li>a:hover, .p-top-wrapper .nav>li>a:active, .p-top-wrapper .nav>li>a:focus {
    background-color: transparent;
}

.p-left-nav-col a:hover, .p-left-nav-col a:focus, .p-left-nav-col a:active {
    text-decoration:none;
}
.p-left-nav-col .panel-heading {
    padding: 14px 5px;
}

.p-workspace-header-col {
    padding:0px;
}

.p-left-nav-col #search-btn .fa-search {
    color:#b3b3b3;
}

.p-left-nav-col .nav .caret {
    border-top-color: #b3b3b3;
    border-bottom-color: #b3b3b3
}

.p-left-nav-col .input-group-addon {
    background-color:#4d4d4d;
    border:0px;
}

.p-left-nav-col .panel-group .panel {
    border-radius:0px;
    border:0px;
    background-color:#1a1a1a;
}

/*#endregion*/

/*#region Widgets*/
.loading-spinner {
    display: none;
}
/*#endregion */

/*#region Menu and Buttons */
/* Force fixed width icons for buttons */
i.toggle-fw
{
    width: 14px;
}

.body-content .workspace-header {
    background-color:#0071bc;
    color: #73b5e6;
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
}
.workspace-header.master-editor-header{
    background-color: #fbb03b;
    color: black;
}
.workspace-header.shelftalker-header{
    background-color: darkcyan;
    color: white;
}
.p-frame-col #toolbar { padding:20px 15px; }

.p-frame-col #toolbar .btn-group button{
    background-color:#1A1A1A;
    color:#b3b3b3;
    border: 0px;
    border-radius:4px;
}

.p-frame-col #toolbar .p-page-group .input-group-addon, .p-page-group .form-control {
    background-color:#1A1A1A;
    color:#b3b3b3;
    border: 0px;
    border-radius:4px;
}

.p-frame-col #main-right {
    background-color: white;
    margin-left: 15px;
    position:relative;
    background-size: 100% 100%;
    overflow: hidden;

}



.p-frame-col #grid { background-size: auto !important; }
.p-frame-col .p-file .caret { border-top-color: #b3b3b3; }

.p-frame-col #toolbar .btn-group .p-right-border {
    border-right:1px solid #4d4d4d;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}


.p-frame-col #toolbar .btn-group #selPages {
    border-right: 0px;
    border-left:0px;
    border-radius: 0 4px 4px 0;
}

    .p-frame-col #toolbar .btn-group  .p-left-border {
    border-left:1px solid #4d4d4d;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.p-frame-col #toolbar .btn-group .p-center-border {
    border-radius: 0px;
    border-right:1px solid #4d4d4d;
    border-left:1px solid #4d4d4d;
}

.p-frame-col .btn {
    padding: 7px 12px;
    /* THIS IS CAUSING PROBLEMS 
    background-color:#0071BD;
    border-color:#0071BD;
        */
}

/* Backgrounds Selector */
div.bg-container{
    overflow-y: auto;
    max-height: 500px;
}

div.bg-element{
    margin: 5px;
    float: left;
    width: 110px;
    line-height: 100px;
    min-height: 201px;
    text-align:center;
}

div.bg-element:hover{
    box-shadow: 0 0 4px lightblue;
    background: lightblue;
}

div.bg-element img{
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

div.bg-element .bg-title
{
    text-align: center;
    word-break:break-word;
    line-height: initial;
    padding-top: 10px;
    padding-bottom: 10px;
}

#bgSelector .modal-dialog .modal-content
{
    background-color: #eeeeee;
}

#bgSelector .modal-header
{
    border-bottom: 1px solid #cccccc;
}

#bgSelector .modal-footer {
    border-top: 1px solid #cccccc;
}

#bgSelector .nav-tabs {
    border-bottom: 1px solid #cccccc;
}

    #bgSelector .nav-tabs > li.active > a {
        border: 1px solid #cccccc;
        border-bottom-color: transparent;
        background-color: #eeeeee;
    }

    #bgSelector .nav-tabs > li.active > a:hover {
        border: 1px solid #cccccc;
        border-bottom-color: transparent;
        background-color: #eeeeee;
    }

    #bgSelector .nav-tabs > li > a {
        border: 1px solid #cccccc;
        border-bottom-color: #cccccc;
        background-color: #bbbbbb;
        color: black;
    }

    #bgSelector .tab-content>div
    {
        padding-top: 10px;
    }

/*#endregion*/
/*#region Active Editor */
span.dirtyFlag {
    color: red;
    font-size: 8pt;
    position: absolute;
    left: 20px;
    top: 8px;
}
div.active-block:hover
{    
    box-shadow: 0 0 4px lightblue;
}
.active-layout{
   box-shadow: 0 0 6px navy;
}
div.active-block.no-edges
{
    border-color: transparent;
}
/* Resize handle */
.ui-resizable-handle.ui-resizable-sw { 
    background: url("/Content/Images/UI/sw-resize.png") no-repeat; 
    width: 16px; 
    height: 16px;
    bottom: 0;
    left: 0;

}
div#grid {
    width: 1400px;
    height: 900px;
    background: url('/Content/Images/UI/tiny-grid.png');

}

.flipped {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}

.selectedBlock{
    box-shadow: 0 0 4px lightblue;
}

/*#endregion*/


/* #region Shelf-Talker Editor */

.p-frame-col #shelftalker-main-right {
    margin-left: 15px;
    position:relative;
    background-size: 100% 100%;
    overflow: hidden;
}
.shelftalker-zone {   position: absolute; }
/*
div.active-block.shelftalker-block {  padding: 58px 20px; }
    */
div.active-block.shelftalker-block .block-text {  width: 48%; float: left; }
div.active-block.shelftalker-block .block-image { width: 50%; float: right; }
div.active-block.shelftalker-block .block-footer { position: absolute;  }

div.active-block.shelftalker-block .block-sale {

    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;

}
div.active-block.shelftalker-block .block-logo { margin: 14px auto; }
div.active-block.shelftalker-block .block-barcode { position: absolute; }
div.active-block.shelftalker-block{ box-sizing: border-box; }
div.shelftalker-block div.block-image { position: relative; }


div.active-block.shelftalker-lumber-block div.block-sku-lumber {
    float: none !important;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 80pt;
    text-align: center;
    }
div.active-block.shelftalker-lumber-block div.block-sku-lumber p {
    font-size: 80pt !important;
    }
div.active-block.shelftalker-lumber-block div.block-description {
    float: none !important;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    }
div.active-block.shelftalker-lumber-block div.block-price {
    float: none !important;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 100pt;
    text-align: center;
    }
div.active-block.shelftalker-lumber-block div.block-price p {
    font-size: 100pt !important;
    }
div.active-block.shelftalker-lumber-block .block-sale {

    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;

}

/* #endregion */
/*#region Document Index Page */

.p-workspace-nav {
    background-color:#333333;
}

.p-workspace-nav .nav-pills>li.active> a, .p-workspace-nav .nav-pills>li.active>.nav-panel > ul > li > a {
    background-color:#252525;
    /*border-left: 10px solid #0071BD;*/
    border-radius:0px;
}

.p-workspace-nav .nav > li > a, .p-workspace-nav .nav > li > .nav-panel > ul > li > a, .p-workspace-nav > button {
    padding: 15px 0px 15px 30px;
    color:#f1f1f1;
    /*border-left: 10px solid #333333;*/
    border-radius: 0px;
}

.p-workspace-nav .nav > li > a:hover,  .p-workspace-nav .nav > li > a:focus,  .p-workspace-nav .nav > li > a:active, 
.p-workspace-nav > .nav-panel > ul.nav > li > a:hover, .p-workspace-nav > .nav-panel > ul.nav > li > a:focus, .p-workspace-nav > .nav-panel > ul.nav > li > a:active,
.p-workspace-nav > button:hover{
    background-color:#252525;
    /*border-left: 10px solid #0071BD;*/
    border-radius:0px;
}

.p-workspace-nav > .nav-panel > ul.nav > li > a > span{
    top: 0px !important;
}

.p-workspace-nav > .nav-panel > ul.nav > li > a > i {
    left: 5px !important;
}

.p-workspace-nav /*.nav-stacked*/ {
    margin-top: 20px;
}


.body-content .p-workspace-body {
    padding:0px 15px;
    margin-bottom: 4em;
}


.p-workspace-nav .nav-stacked li span, .p-workspace-nav > button > span {
    vertical-align: top;
    position: relative;
    top: 4px;
    font-size: 14px;
    left:15px;
}

.p-workspace-nav .nav-stacked li i, .p-workspace-nav > button > i{
    position: relative;
    left: -5px;
    text-align: center;
}

.p-workspace-nav .nav-stacked li .fa, .p-workspace-nav > button > .fa {
    color:#4d4d4d;
    width:15px;
    height: auto;
}

.p-workspace-nav .nav-stacked li:hover .fa, .p-workspace-nav > button:hover .fa {
    color:#0071BD;
}

.p-tab-pane #table-active-documents th {
    border:0px;
}

.p-tab-pane .dataTables_wrapper .dataTables_info, .p-tab-pane .dataTables_wrapper .dataTables_paginate {
    padding-top:40px;
}

    .p-tab-pane .dataTables_wrapper .dataTables_paginate .paginate_button {
        border:0px;
    }

.p-tab-pane .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .p-tab-pane .dataTables_wrapper .dataTables_paginate .paginate_button:focus, .p-tab-pane .dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: #0071BD;
    border: 0px;
    box-shadow:none;
    color: white !important;
}


.p-tab-pane #table-active-documents td select, .p-tab-pane #table-history-documents td select {
        border:0px;
        box-shadow:none;
        -webkit-box-shadow:none;
    }

.p-tab-pane #table-history-documents td select {
    padding-left: 0px;
    padding-top: 0px;
    margin-top: -4px;
}

.p-tab-pane #table-active-documents {
    border-bottom: 0px;
}


.p-tab-pane .dataTables_length, .p-workspace-frame .dataTables_length {
    padding: 0px 0px 15px 0px;
}

    .p-frame-col .dataTables_length label {
        font-weight: normal;
        margin-top:10px;
    }

   .p-frame-col .dataTables_length select {
            padding: 2px 5px;
            border-radius: 4px;
            border-color:#cccccc;
    }

.p-tab-pane .dataTable thead th {
    padding: 10px;
    font-weight: normal;
}

.p-workspace-frame .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background:#0071BD;
    border:0px;
    color:white !important;
}

.p-workspace-frame .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border:0px !important;
    color:white !important;
    background:#008ae6;
}

.p-workspace-frame {
    padding-bottom: 20px;
}

/* search filter box */
div.dataTables_filter input{
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
    color: #cccccc;
    position: relative;
    left: 25px;
}


.p-document-search {
    height: 17px;
    width: 25px;
    top: 0px;
    position: relative;
    color:#cccccc;
    right: 175px;
    border: none;
    background-color: transparent
}

.table-active-documents-dropdown {
    position: absolute;
    right: 60px;
    z-index: 1000;
    top: 105px;
}

.table-active-documents-dropdown select {
    width: 300px;
}

.p-tab-pane #table-history-documents tbody > tr > td, .p-tab-pane #table-history-documents thead th, .p-tab-pane #table-history-documents {
    border:0px;
}

.p-frame-col #toolbar .btn-group .focus {
    background-color:#0071BC;
    color:white;
}

.stDirections{
    padding: 0 45% 0 0;
    font-style: italic;
    color: #808080;
}

.stDirectionsB{
    font-style: italic;
    color: #808080;
}

#downloadTemplateBtn {
    display: inline-block;
    float: right;
    margin: 0 0 0 50px;
}

.error{
    background-color: #FFF !important;
}

/*#endregion*/

.workspace-footer{
    text-align: left;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    color: #DADADA;
    padding: 0 25px 10px 25px;
}

/*#region Help Docs*/
div#modalContent{
    border-radius: 2px;
    padding: 0 15px;
}

div#helpHeader{
    border-bottom: 3px solid #2700ac;
}

div#helpHeader h4{
    color: #2700ac;
    font-size: 18pt;
    font-weight: bold;
}

ul.helpText{
    list-style: none;
    text-decoration: none;
    font-weight: bold;
    font-size: 10pt;
    padding-left: 0;
    color: #0071bc;
}

ul.helpText li{
    padding: 5px 0;
}

#helpBody{
    margin: 15px 0;
    background-color: #F1F1F1;
}

.helpHeader{
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20pt;
    color: #999999;
}

#categoryCrumb{
    font-size: 20pt;
}

#documentCrumb{
    font-size: 14pt;
}

#titleCrumb{
    font-size: 14pt;
}

.docText{
    text-align: left;
    width: 100%;
    border: 1px solid #E5E5E5;
    padding: 15px 10px;
    max-height: 400px;
    overflow-y: scroll;
    background-color: #FFF;
}

#categoryCrumb, #documentCrumb{
    cursor: pointer;
}

.helpNav-Button{
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    color: #CCC;
}

.helpNav-Button:hover{
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    color: #2700ac;
}
/*#endregion*/

/*#region editor image*/
.img-rotate{
    position: absolute;
    left: 0px;
    top: 0px;
}

.ui-rotatable-handle{
    position: absolute;
    left: 50%;
    top: -40px;
}

#colorSwap{
    position: absolute;
    left: 20px;
}

.simplePrice{
    width: 200px;
    height: 120px;
    background-color: #F0F0F0;
    border: 4px solid #4D4D4D;
    border-radius: 4px;
    position: fixed;
    top: 40vh;
    left: 43vw;
    padding: 5px;
    z-index: 100000;
}

#simplePriceEdit{
    width: 91%;
    height: 25px;
    font-size: 12pt;
    margin: 4px 4px;
    border: none;
    border-radius: 4px;
    position: absolute;
    top: 30px;
    left: 5px;
}

span#simpleTitle{
    position: absolute;
    top: 5px;
    left: 5px;
    width: 100%;
    font-size: 12pt;
    font-weight: bold;
    text-align: left;
}

button#priceChange{
    position: absolute;
    bottom: 10px;
    left: 10px;
}

button.advMode{
    background-color: #FFF !important;
    border-color: transparent !important;
    position: absolute;
    bottom: 10px;
    left: 90px;
}

button.percentClose{
    cursor: pointer;
    color: #333;
    background-color: transparent;
    margin-left: 1px;
    border: 1px solid transparent;
    padding: 2px 3px;
    border-radius: 100%;
    position: absolute;
    top: 5px;
    right: 5px;
}

div.fakeBox{
    border: 2px dotted #CCC;
    position: absolute;
}

/*#endregion*/

/*#region Email Document Editor*/
.hiddenStaticBlock{
    border: 1px solid #4d4d4d !important;
    opacity: 0.5;
}

/*#endregion*/