/*
 Copyright Watman & Worth Web Ltd 2018-2020
 Use without modification granted to all our customers.
 Do Not Redistribute
*/
/* 
    Created on : 06-Aug-2020, 11:02:16
    Author     : William Worth <william@watmanworth.co.uk>
*/


/******HEADER***********/

.sticky-header {
    background-color: #253746;
    min-width: 100%;
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 100 !important;
    padding-left: 12px;
    padding-right: 12px;
}

.logo h3 {
    color: #fff;
}


.logo img {
    display:none;
} /****TEMPORARY*****/

/***STOCK REQUEST*****/

.header-title {
    padding-right: 24px;
    display: inline-block !important;
    width: auto !important;
    position: absolute;
    right: 0px;
}

.header-title.stock-requests-button a {
    background-color: #44733e;
    color: #fff;
    padding: 8px 24px;
    vertical-align: top;
    display: inline-block;
    margin-top: 11px;
    margin-left: 12px;
    border-radius: 50px;
    border: 1px solid #fff;
    font-size: 12px;
    font-weight: bold;
}


/*********INDEX************/

.main-body {
    z-index: 90 !important;
    padding-left: 12px;
    padding-right: 12px;
}

.icon-button {
    font-size: 30px;
    width: 50%;
    height: 250px;
    line-height: 400px;
    background-size: 40%;
    background-position: center 30px;
}

.icon-button.stock-button {
    background-image: url("/pofs-warehouse/images/package");
}

.icon-button.wip-button {
    background-image: url("/pofs-warehouse/images/delivery");
}


.icon-button.wip-in {
    background-image: url("/pofs-warehouse/images/log-in");
}

.icon-button.wip-out {
    background-image: url("/pofs-warehouse/images/logout");
}

.contain-block {
    padding: 24px;
    border: 1px solid #ccc;
    background-color: #efefef;
    text-align:center;
}

.stock-search form {
    text-align:center;
}
.stock-search > label, .stock-search form div {
    text-align:left;
}


.slim-title h1 {
    font-size: 2.5em;
    padding-right: 24px;
}


/*******FOLDER NAV*********/


.folder-tree {
    border: 1px solid #ccc;
    background-color: #efefef;
}

.folder-tree {
    display: flex;
}


.folder-sect .new-folder {
    font-size: 12px;
    line-height: 20px;
    padding: 2px 32px 2px 16px;
    background-image: url("/run-manager/images/add");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px;
    cursor: pointer;
    width: auto;
    margin-bottom: 4px;
    margin-left: 10px;
    margin-right: auto;
    margin-top: 4px;
    border: none;
}

.folder-tree .tab-container {
    display:flex;
}

.folder-tree .tab-container .lm-tab {
    background-color: #253746;
    color: #fff;
    padding: 6px;
    display: inline-block;
    width: auto;
    font-size: 11px;
    margin-right: 0px;
    text-align: center;
    opacity: 0.7;
    flex-grow: 1;
}

.folder-tree .tab-container .lm-tab.active {
    opacity:1;
}

.folder-tree .tab-container .lm-tab:last-child {
    margin-right:0px !important;
    width:32.67%;
}

.folder-tree .lm-tab-wrapped {
    background-color: #fff;
    padding: 12px;
    text-align: left;
}

.folder-tree .folders .folder {
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    padding-top: 4px;
    padding-bottom: 4px;
    font-weight: bold;
}

.folder-tree .folders .folder .folder-name {
    vertical-align: top;
    display: inline-block;
}

.folder-tree .folders .folder:last-child {
    border-bottom:0px solid transparent;
}

.folder-detail {
    width: 70%;
    display: inline-block;
}
.folder-controls {
    width: auto;
    float:right;
    text-align: right;
}

.folder-tree .folders .folder .button {
    font-size: 0px;
    padding: 0px 0px 0px 0px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: 6px;
    background-position: center;
    vertical-align: top;
    border: none;
    line-height: 20px;
    transition: none !important;
}

.folder-tree .folders .folder .button:hover {
    font-size: 8px !important;
    padding: 0px 6px 0px 18px;
    width: auto;
    border-radius: 4px;
    background-size: 6px;
    background-position: 4px center;
}

.folder-tree .folders .folder .button.move-to-root {
    background-image: url("/pofs-warehouse/images/upload");
    background-size: 12px;
}

.folder-tree .folders .folder .button.move {
    background-image: url("/pofs-warehouse/images/move");
    background-size: 12px;
}

.folder-tree .folders .folder .button.remove-folder {
    background-color:darkred;
    background-image: url("/pofs-warehouse/images/close");
    background-size: 10px;
}

.folder-tree .folders .folder .children {
    border: 1px solid #ccc;
    padding: 6px;
    margin-top:12px;
    margin-bottom:24px;
    background-color:#fff;
}

.folder-tree .child-count {
    background-image: url(/pofs-warehouse/images/up-arrow);
    background-color: #203444;
    display: inline-block;
    padding-left: 20px;
    background-size: 10px;
    background-repeat: no-repeat;
    color: #fff;
    padding-right: 12px;
    font-size: 8px;
    background-position: 5px center;
    border-radius: 8px;
    height: 16px;
    vertical-align: top;
    line-height: 16px;
    cursor:pointer;
}

.folder-tree .child-count.expanded.loaded {
    background-image: url(/pofs-warehouse/images/down-arrow);
    background-color: #44733e;
}

.folder-tree .item-count {
    background-color: #d0d0d0;
    color: #373737;
    display: inline-block;
    padding: 1px 6px;
    font-size: 8px;
    vertical-align: top;
    border-radius: 0% 0% 90% 90%;
    height: 20px;
    line-height: 18px;
    text-align: center;
}


.folder-drag, .item-drag {
    display: inline-block;
    background-size: 30px;
    background-image: url(/pofs-warehouse/images/folder-move);
    background-color: rgba(51, 51, 51, 0.75);
    background-repeat: no-repeat;
    background-position: center;
    height: 50px;
    width: 50px;
    font-size: 0px;
    border-radius: 6px;
    border: 3px dashed #fff;
}

.ui-droppable-hover {
    border: 2px dashed black !important;
}





/******FOLDER CONTENTS********/


.folder-contents .summary .summary-contents > div {
    display:inline-block;
    width:auto;
    margin-right:12px;
}



.dialogue-h1 {
    font-size: 2em;
    text-align: left;
    width: 1024px !important;
    margin: auto;
}

.dialogue-main-content {
    width: 1024px;
    margin: auto;
}

.section-tabs {
    text-align: left;
    margin-bottom: -1px;
}
.section-tabs .section-tab {
    background-color: #253746;
    color: #fff;
    padding: 8px 12px;
    font-size: 12px;
    margin-left: 1px;
    border-radius: 6px 6px 0px 0px;
    cursor: pointer;
}

.dialogue-section {
    border: 1px solid #ccc;
    margin-bottom: 12px;
}

.dialogue-section > h2 {
    background-color: #253746;
    color: #fff;
    text-align: left;
    padding: 6px 12px;
    font-size: 20px;
}
.dialogue-section .parts {
    padding:12px;
}

.text-input, .image-input {
    text-align:left !important;
    vertical-align:top;
}

.image-input {
    width:49.5%;
    display: inline-block;
}
.image-input input {
    width:auto;
    line-height:30px;
}
.image-input img {
    height: 40px;
    vertical-align: top;
    width: 40px;
    background-color: #efefef;
}

.image-input input .delete {
    height: 40px;
    vertical-align: top;
    line-height: 26px;
}

.dialogue-ctrls .button, .dialogue-main-content .button {
    color:#fff !important;
}

.folder-contents > .folders > h1, .folder-contents > .folders > .folders > h3 {
    background-color: #253746;
    color: #fff;
    font-size: 20px;
    line-height: 36px;
    padding: 2px 12px;
    margin-bottom: 12px;
}

.folder-contents > .folders > .new-folder {
    font-size: 14px;
    line-height: 24px;
    padding: 2px 32px 2px 12px;
    background-image: url("/run-manager/images/add");
    background-position: 96% center;
    background-repeat: no-repeat;
    background-size: 20px;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 4px;
}

.folder-contents > .folders > .back {
    font-size: 14px;
    line-height: 24px;
    padding: 2px 32px 2px 12px;
    background-image: url("/pofs-warehouse/images/return");
    background-position: 94% center;
    background-repeat: no-repeat;
    background-size: 20px;
    position: absolute;
    right: 140px;
    top: 5px;
    border: 1px solid #fff;
}

.folder-contents > .folders > .folders {
    margin-top:12px;
    position:relative;
}

.folder-contents > .folders .move-selected-folders {
    font-size: 14px;
    line-height: 24px;
    padding: 2px 32px 2px 12px;
    background-image: url("/pofs-warehouse/images/return");
    background-position: 94% center;
    background-repeat: no-repeat;
    background-size: 20px;
    position: absolute;
    right: 4px;
    top: 5px;
    border: 1px solid #fff;
}

.mod_pofs_warehouse_component_folders > .result {
    border: 1px solid #ccc;
    margin-bottom: 12px;
}

.mod_pofs_warehouse_component_folders > .result .name {
    background-color: #253746;
    background-image: url("/pofs-warehouse/images/folder-white");
    background-repeat: no-repeat;
    background-size: 24px;
    padding-left: 30px;
    background-position: 12px center;
}

.mod_pofs_warehouse_component_folders > .result .name:hover {
    background-image: url("/pofs-warehouse/images/document-white");
}

.mod_pofs_warehouse_component_folders > .result .name a {
    color: #fff;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    padding: 6px;
}

.mod_pofs_warehouse_component_folders > .result .item-count {
    font-weight: bold;
    font-size: 14px;
    background-color: #efefef;
    padding: 4px;
}
.mod_pofs_warehouse_component_folders > .result .item-count label {
    font-size: 14px;
    display:inline-block;
    font-weight:normal;
}

.folders .no-subs {
    display: inline-block;
    width: 100%;
    background-color: #efefef;
    padding: 12px;
    border: 1px solid #ccc;
    margin-bottom: 12px;
    font-size: 14px;
}


.folders > .folder-image {
    background-color: #c2c2c2;
    max-width: 30px;
    border: 1px solid #ccc;
}


/********ITEMS**********/

.contents-header h1 {
    background-color: #253746;
    color: #fff;
    font-size: 20px;
    line-height: 36px;
    padding: 2px 12px;

}
.folder-contents .new-item {
    font-size: 14px;
    line-height: 24px;
    padding: 2px 32px 2px 12px;
    background-image: url("/run-manager/images/add");
    background-position: 96% center;
    background-repeat: no-repeat;
    background-size: 20px;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 4px;
}

.folder-contents .move-selected {
    font-size: 14px;
    line-height: 24px;
    padding: 2px 32px 2px 12px;
    background-image: url("/pofs-warehouse/images/return");
    background-position: 96% center;
    background-repeat: no-repeat;
    background-size: 20px;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 130px;
}




.folder-items-list {
    margin-top:12px;
}

.folder-items-list .result {
    border: 1px solid #ccc;
    margin-bottom: 12px;
    vertical-align: top;
}

.folder-items-list .result .title {
    padding:8px 0px;
    font-size: 14px;
}

.folder-items-list .result .title:hover {
}



.result .quantity, .result .inline-data {
    background-color: #efefef;
    padding: 4px 8px;
}
.result .quantity label {
    display:inline-block;
    font-size:14px;
    margin-right:4px;
}
.result .quantity .content {
    display:inline-block;
    font-size:14px;
}

.result .inline-data {
    display:inline-block;
    font-size:14px;
    line-height: 26px;
}





.result .controls {
    padding:8px;
}
.result .controls .button {
    border: none;
    vertical-align: top;
}

.result .controls .edit.button, .result .controls .edit-folder.button  {
    background-image: url("/pofs-warehouse/images/edit");
    background-size: 12px;
    background-position: 6px center;
    padding-left: 22px;
    padding-right: 12px;
}

.result .controls .button.delete {
    font-size: 0px;
    background-image: url(/pofs-warehouse/images/close);
    background-size: 8px;
    color: transparent;
    background-position: center;
    padding: 6px 0px !important;
    height: 22px;
    width: 22px;
}

/******EDIT LISTING*******/

.layout-update > .i > h4 {
    font-size: 16px;
    text-align: left;
    background-color: #efefef;
    padding: 8px 12px;
}

.details-container {
    padding: 12px;
    border: 1px solid #ccc;
}

.image-upload-control img {
    max-width: 100%;
    width: 40px;
    height: 40px;
}

.image-upload-control .image-upload-container {
    width: auto;
    display: inline-block;
}

.image-upload-control .image-upload-container span {
    display:none;
}
.image-upload-control .image-upload-container input {
    font-size: 12px;
    margin: 0px 0px 4px;
}

.ui-widget-content a.button {
    color:#fff !important;
}

.update-controls .button {
    padding: 6px 12px 6px 30px;
    background-position: 6px center;
    background-size: 18px;
}
.update-controls .button.save {
    background-image: url("/pofs-warehouse/images/button-tick");
}
.update-controls .button.cancel {
    background-image: url("/pofs-warehouse/images/return");
}


/******QUANTITY********/

.ui-dialog-content h2.page-title h2.page-title {
    background-color: #253746 !important;
    color: #fff;
    text-align: left;
    padding: 8px 12px;
    font-size: 1.5em !important;
    margin: 0px !important;
}

.qty-contents {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
    margin-bottom:12px;
}

.qty-contents > .col2 {
    vertical-align:top;
}

.qty-ctrl {
    position:relative;
}
.qty-ctrl input {
    padding: 4px 50px !important;
}
.qty-ctrl .button {
    font-size: 0px;
    width: 40px;
    height: 40px;
    background-size: 24px;
    background-position: center;
    position: absolute;
    border: none;
    top: 0px;
    border-radius: 0px;
}
.qty-ctrl .button.decrease {
    background-image: url("/pofs-warehouse/images/minus");
    left: 0px;
    right:auto;
}
.qty-ctrl .button.increase {
    background-image: url("/run-manager/images/add");
    left: auto;
    right:0px;
}

span.qty-display {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    background-color: #efefef;
    width: 100%;
    text-align: center;
}


.mod_pofs_warehouse_component_folders > .result {
}

.mod_pofs_warehouse_component_folders > .result .name {
}
.mod_pofs_warehouse_component_folders > .result .name a {
}
.mod_pofs_warehouse_component_folders > .result .item-count {
    font-weight:bold;
    font-wize:14px;
}
.mod_pofs_warehouse_component_folders > .result .item-count label {
    display:inline-block;
    font-weight:normal;
}






/**********PDF************/

.pdf-view {
    padding: 24px 12px;
}

.pdf-header {
    background-color: #253746;
    padding: 12px;
    margin-bottom: 12px !important;
    border-radius: 2px;
}

.header-contact p {
    color: #fff;
    font-size: 14px;
    margin: 0px;
}

.pdf-view .folder-item {
    border: 1px solid #ccc;
    margin-bottom: 12px;
    background-color: #efefef5e;
    padding: 12px;
}

.pdf-view .folder-item .title, .pdf-view .folder-iteration .name {
    font-weight: bold;
    margin-bottom: 12px;
    font-size: 20px;
}

.pdf-view .info-stack {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
}

.pdf-view .info-stack label {
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
}


.pdf-view .pdf-folder > h4, .pdf-view .folder-view > h4 {
    margin-bottom: 8px;
    padding: 8px;
    border-bottom: 2px solid #757575;
    font-weight: bold;
    font-size: 24px;
}


.pdf-view .stock::after {
    content: none;
    font-size: 12px;
    color: #757575;
    font-weight: normal;
}

progress[value] {
    /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;

    width: 250px;
    height: 20px;
}

progress[value]::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}


progress[value]::-webkit-progress-value {
    background-image:
        -webkit-linear-gradient(-45deg,
        transparent 33%, rgba(0, 0, 0, .1) 33%,
        rgba(0,0, 0, .1) 66%, transparent 66%),
        -webkit-linear-gradient(top,
        rgba(255, 255, 255, .25),
        rgba(0, 0, 0, .25)),
        -webkit-linear-gradient(left, #09c, #f44);

    border-radius: 2px;
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

@-webkit-keyframes animate-stripes {
    100% {
        background-position: -100px 0px;
    }
}

@keyframes animate-stripes {
    100% {
        background-position: -100px 0px;
    }
}

-webkit-animation: animate-stripes 5s linear infinite;
animation: animate-stripes 5s linear infinite;

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  
  /* Get rid of default border in Firefox. */
  border: none;
  
  /* Dimensions */
  width: 250px;
  height: 20px;
}

progress[value]::-moz-progress-bar { 
  background-image:
    -moz-linear-gradient(
      135deg, 
      transparent 33%, 
      rgba(0, 0, 0, 0.1) 33%, 
      rgba(0, 0, 0, 0.1) 66%, 
      transparent 66% 
    ),
    -moz-linear-gradient(
      top, 
      rgba(255, 255, 255, 0.25), 
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(
      left, 
      #09c, 
      #f44
    );

  border-radius: 2px; 
  background-size: 35px 20px, 100% 100%, 100% 100%; 
}