/*
|--------------------------------------------------------------------------
| GENERAL PAGE
|--------------------------------------------------------------------------
*/
.success .dashhead.dashhead-card {
    color: #111;
    background-color: #1BC98E;
    border-color: #1BC98E;
}
.success .dashhead.dashhead-card .dashhead-subtitle {
    color: #fff;
}
.danger .dashhead.dashhead-card {
    color: #111;
    background-color: #A83441;
    border-color: #A83441;
}
.danger .dashhead.dashhead-card .dashhead-subtitle {
    color: #fff;
}

.btn {
    cursor: pointer;
}
.btn-rc {
    background: #e2001a;
    color: #fff;
}
.btn-crl {
    background: #6ac1ed;
    color: #fff;
}

.dashhead-subtitle {
    font-size: 50%;
}
.dashhead-title {
    font-size: 1.9em;
}


/*
|--------------------------------------------------------------------------
| WELCOME PAGE
|--------------------------------------------------------------------------
*/
.title {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    text-align: center;
    margin-top: 50px;
}

/*Nav*/
.links > a {
    font-size: 10px;
    padding: 0 15px;
}
.home-nav > div {
    padding: 2px;
}


/*
|--------------------------------------------------------------------------
| COLOURS
|--------------------------------------------------------------------------
*/
.bin-purple {
    background: #871a99;
    color: #fff;
}
.bin-green {
    background: #009c05;
    color: #fff;
}
.bin-orange {
    background: #e67809;
    color: #000;
}
.bin-yellow {
    background: #e5de00;
    color: #000;
}
.bin-red {
    background: #c40600;
    color: #fff;
}
.bin-white {
    background: #ffffff;
    color: #000;
}
.bin-black {
    background: #000000;
    color: #fff;
}

/*
|--------------------------------------------------------------------------
| TASKS PAGE
|--------------------------------------------------------------------------
*/
.btn-barcode {
    color: #fff;
    background-color: #979315;
    border-color: #979315;
}
.btn-barcode:hover {
    color: #fff;
    background-color: #716F10;
    border-color: #716F10;
}
.btn-outline-barcode {
    color: #979315;
    background-color: transparent;
    background-image: none;
    border-color: #979315;
}
.btn-outline-barcode:hover {
    color: #716F10;
    background-color: transparent;
    background-image: none;
    border-color: #716F10;
}




/*
|--------------------------------------------------------------------------
| TASKS PAGE
|--------------------------------------------------------------------------
*/
.statcard {
    overflow: hidden;
}
.statcard .statcard-body,
.statcard .statcard-check,
.statcard .statcard-details {
    padding-top: 15px;
    padding-bottom: 15px;
}
.statcard .statcard-check,
.statcard .statcard-details {
    font-size: 300%;
    line-height: 100%;
    text-align: center;
}
.statcard .statcard-check {
    background-color: #6DDCB7;
}
.statcard .statcard-details {
    background-color: #16BAC5;
}
.statcard .statcard-check:hover {
    background-color: #7ADFBD;
}
.statcard .statcard-details:hover {
    background-color: #14AAB4;
}
.statcard .statcard-check a .fa,
.statcard .statcard-details a .fa {
    color: #fff;
}
.statcard-collapse .collapse,
.statcard-collapse .collapsing {
    margin: 0 -10px;
}
.statcard-collapse .card-body {
    border-radius: 0 0 3px 3px;
    background-color: #fff;
    color: #383B42;
}

#refresh {
    display: none;
    visibility: hidden;
}
#toggle-refresh {
    color: #a5a5a5;
    background-color: #eee;
    border-color: #a5a5a5;
}
#toggle-refresh.checked {
    color: #fff;
    background-color: #1BC98E;
    border-color: #1BC98E;
}

/*
|--------------------------------------------------------------------------
| Transfer Page
|--------------------------------------------------------------------------
*/
.dashhead.dashhead-card {
    border: 1px solid;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    padding: 15px 20px;
    margin: 0 -10px;
}
.header-card-wrap {
    color: #222;
    border-radius: 0;
    border: 1px #222 solid;
    padding: 5px;
    overflow: hidden;
    position: relative;
}
.header-card-wrap .header-card {
    font-weight: normal;
    color: inherit;
    z-index: 2;
    font-size: 12px;
}
.header-card-title {
    font-size: 16px;
}

.task-step {
    color: #222;
    border-radius: 0;
    border: 1px #222 solid;
    border-top: 0;
    padding: 15px 20px;
    overflow: hidden;
    position: relative;
}

#transfer-list h5 {
    font-size: 12px;
}
#transfer-list small {
    font-size: 8px;
}
#transfer-list h4 {
    font-size: 13px;
}
#transfer-list .btn.btn-lg {
    padding: 10px 5px;
    line-height: 1;
    font-size: 12px;
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/
.form-control-lg {
    font-size: 1.1em;
}
/*
|--------------------------------------------------------------------------
| Create IMPORT PAGE
|--------------------------------------------------------------------------
*/
.pallet {

}
.pallet .pallet-list {
    margin: 0;
    padding: 4px 0 0 0;
}
.pallet > div,
.pallet .pallet-list > div {
    margin: 0;
    padding: 4px 0 0 0;
}
.pallet .pallet-list input,
.pallet .pallet-list button,
.pallet .pallet-list select {
    height: calc(2.25rem + 2px);
}
.pallet .pallet-list select.item-id {
    width: 59%;
    float: left;
}
.pallet .pallet-list input.item-batch {
    width: 39%;
    float: right;
}
#item-list {
    margin: 0;
}
#item-list .sscc-details {
    border: 1px #222 solid;
    border-top: 0;
    margin: 0 -10px;
}
#item-list .sscc-details .row {
    font-size: 15px;
    margin: 0;
    padding: 5px 2px;
}
#item-list .sscc-details .row h3 {
    font-size: 16px;
}
#item-list .sscc-details .sscc-details-info {
    font-size: 10px;
    color: #111;
    background-color: #45D9FF;
}
#item-list .sscc-details .sscc-details-sm {
    display: none;
    font-size: 10px;
}
#item-list .sscc-details .btn-group,
#item-list .sscc-details #complete {
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| Modal Styles
|--------------------------------------------------------------------------
*/

@media (min-width: 992px) {
    .modal-xl {
        max-width: 1140px;
    }
}
.modal-header .modal-title {
    font-size: 14px;
}
.modal-body h3 {
    font-size: 17px;
}
.modal-primary .modal-header {
    border-color: #307095
}

.modal-warning .modal-header {
    border-color: #c87f0a;
    background-color: #A83441;
}

.modal-info .modal-header {
    border-color: #0097bc
}

.modal-success .modal-header {
    border-color: #1BC98E;
    background-color: #1BC98E;
}

.modal-danger .modal-header {
    border-color: #A83441;
    background-color: #A83441;
}

.modal-body.bin-stack {
    padding: 1px;
    overflow: auto;
}
.modal-body.bin-stack td {
    padding: 3px;
}
.modal-body.bin-stack td button {
    padding: 5px;
    font-size: 12px;
    width: 100%;
    margin-top: 1px;
}

/*
|--------------------------------------------------------------------------
| Damages Modal
|--------------------------------------------------------------------------
*/
.damages-button {
    position: fixed;
    bottom: 0;
    right: 0;
}
.damages-button .btn {
    font-size:15px;
    border-radius: 5px 5px 0 0;
}

/*
|--------------------------------------------------------------------------
| Truck Check Page
|--------------------------------------------------------------------------
*/
.wrapper {
    margin: 25px auto;
    display: table;
    position: relative
}
.wrapper #signature-pad {
    background-color: #eee;
    border: #ccc 1px solid;
    border-radius: 5px;
}
.wrapper #clear {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 5px 0 5px 0;
}
.truck-check-list .input-group select.form-control-lg {
    max-width: 110px;
    height: 48px;
}

/*
|--------------------------------------------------------------------------
| Stocktake Page
|--------------------------------------------------------------------------
*/
.ui-autocomplete {
    z-index: 2000;
    background-color: #ffffff;
    width: 18em;
    /* Ul elements  */
    list-style-type: none;
    margin: 0;

}

.ui-autocomplete-input{
    overflow: auto;
}

.ui-menu-item:hover{
    background-color: #49b1b1;
}

.ui-menu-item{
    padding: 5px 3px 5px 2px;
    margin-bottom: 5px;
    /* font */
    font-size: 14px;
}

.bins-card {
    cursor: pointer;
    border-style: none;
    padding: 1px;
}

.bins-card > div.card-body {
    padding: 4px;
}

#ajax_search{
    margin-bottom: 1em;
}
.ui-helper-hidden-accessible{
    display: none;
}

.ui-menu li{
    padding-left: 10px;
}

.ui-widget-content{
    padding-left: 2px;
    font-size: 12px;
}

.alert{
    margin-top: 4px;
}

.alert ul{
    list-style-type:none;
    margin-bottom: 4px;
    padding-left: 20px;
}

.alert-success{
    background-color: #1BC98E;
    color: #ffffff;
}

.hidden{
    display: none!important;
}

.correct i{
    color: #ffffff;
    background-color: #95c623;
    font-size: 20px;
    padding: 2px;
    float: right
}

/** Picking Frontened **/

#table a{
    color:#ffffff;
}

#table input[type=file] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    content: "Take Picture"!important;
}

#table .label-bton{
    margin-bottom: 1px;
}

#table .table-row:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

#table .table-row:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0.05);
}

#table .table-row:hover {
    background-color: #ffffff;
}

/*.desktop-hidden{*/
/*display: none;*/
/*}*/

.tiny-font{
    font-size: 8px;
}

.mobile-padding{
    padding-top: 40px;
}

@media only screen and (min-width: 600px) {

    #table .last-td{
        text-align: right;
        width: 200px;
        min-width: 200px;
    }

    .desktop-hidden{
        display: none;
    }

}

@media only screen and (max-width: 600px) {

    .mobile-hidden{
        display: none;
    }

}

/*
|--------------------------------------------------------------------------
| New Stocktake Page
|--------------------------------------------------------------------------
*/

.bin-count {
    border: 1px #7a7a7a solid;
    border-radius: 0 0 15px 15px;
    padding: 20px 0;
    margin-bottom: 15px;
    background: #a2c6c9;
    transition: background-color 2s ease;
}
.bin-count.found {
    background: #fff;
}
.bin-count-header {
    border: 1px #7a7a7a solid;
    border-radius: 15px 15px 0 0;
    padding: 20px 10px;
}
.bin-count > div:first-child {
     text-align: center;
    font-size: 30px;
    padding-bottom: 10px;
 }
.bin-count .stocktake-count {
    padding: 20px 10px;
    border-radius: 15px;
}
.bin-count #pallet-list > div {
    padding: 5px 1px;
    font-size: 12px;
}
#pallet-list input,
#pallet-list button,
#pallet-list select {
    font-size: 12px;
}


.return{
    float: right;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    text-align: center;
}

.return .icon{
    font-size: 30px;
    color: black;
}

.return .icon::before{
    top:16px;
}

.pink-sticky{
    background-color: #F840D0;
}

.green-sticky{
    background-color: #00E060;
}