/***************************
******** Base Structure
***************************/

* { box-sizing : border-box; }

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    min-height : 100%;
    /*padding-top: 50px;*/
    background : #eee;
}

/***************************
******** Global
***************************/

.left { float : left; }

.right { float : right; }

h1 { color : #333; font-size : 17px; font-weight : bold; }

h2 { color : #707070; font-size : 14px; font-weight : 500; text-transform : uppercase; margin-bottom : 10px; }

h3 { color : #828282; font-size : 12px; font-weight : normal; margin-bottom : 15px; }

select { height : 34px; background-color : #fff; border : 1px solid #ccc; min-width : 120px; }

div#preload { display : none; }

div.c-loader {
    height     : 100px;
    width      : 100px;
    margin     : auto;
    background : url('../img/loader.gif') center no-repeat;
    display    : none;
}

.small { font-size : 10px; }

.warning-msg { font-size : 10px; color : #F18396; margin-bottom : 5px; }

.status-pending { background : #F7B15C !important; color : #fff; }

.status-picked { background : #55DF68 !important; color : #fff; }

.status-ordered { background : #5CB6F7 !important; color : #fff; }

.status-received { background : #F7DD5C !important; color : #fff; }

.status-completed { background : #55DF68 !important; color : #fff; }

/***************************
******** Top Bar
***************************/

.topbar { background : #022; height : 100px; }

.topbar .logo { background : #FFF; padding-bottom : 10px; max-height : 100px; }

.logo img { margin : 0 auto; display : block; height : 90px; }

.topbar-main .nav > li > a { color : #FFF; }

.topbar-main .nav > li > a:hover,
.topbar-main .nav > li > a:active,
.topbar-main .nav > li > a:focus,
.topbar-main .nav > li > a:visited { background : none; }

.topbar-main .pagename,
.topbar-main .username { color : #FFF; display : inline-block; margin-top : 20px; }

.topbar-main .pagename { font-size : 2.5rem; font-weight : bold; }

.topbar-main .username { float : right; }

.topbar-main .user-dropdown { float : right; /*display: inline-block;*/ }

/***************************
******** Main Body 
***************************/

.main-row { background : #eee; }

.guest-back { background-color : #e0dedf; }

/***************************
******** Sidebar 
***************************/

.sidebar { background : #FFF; }

.sidebar li { border-bottom : 1px solid #DDDDDD; }

.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:active,
.sidebar .nav > li > a:focus,
.sidebar .nav > li > a:visited { background : none; }

.sidebar li a {
    line-height    : 2;
    color          : #828282;
    font-size      : 12px;
    font-family    : 'Microsoft Sans Serif' !important;
    text-transform : uppercase;
    line-height    : 20px;
    padding        : 17px 12px 15px 32px;
}

.sidebar li:hover,
.sidebar li:active { background-color : rgb(53, 76, 154); }

.sidebar li:hover a { color : #FFF !important; }

.sidebar li.active { background-color : rgb(53, 76, 154); }

.sidebar li.active a { color : #fff; }

.no-radius {
    -webkit-border-radius : 0;
    border-radius         : 0;
}

.emp-solid { background-color : #428bca; }

.emp-solid a { color : #fff !important; }

.sub-grey { padding-left : 20%; background-color : #f1f1f1; border-radius : 0px; }

.list-group-item:first-child { border-top-right-radius : 0px; border-top-left-radius : 0px; }

.list-group-item:last-child { border-bottom-right-radius : 0px; border-bottom-left-radius : 0px; }

/***************************
******** Main 
***************************/

.main-box {
    background : #FFF;
    /*width: 98%;*/
    margin     : 15px auto;
    padding    : 10px 20px;
    border     : 1px solid #ddd;
    /*min-height: 600px;*/
}

/***************************
******** Main 
***************************/

@media (min-width : 767px) {
    .logo img {
        /*width: 70%;*/
    }

    .sidebar,
    .sidebar .navbar-collapse.collapse {
        padding-right : 0;
        padding-left  : 0;
    }
}

/***************************
******** Forms 
***************************/

textarea { border-radius : 4px; width : 95%; }

.login-box {
    padding          : 30px;
    background-color : #fff;
    border-radius    : 10px;
    box-shadow       : 0 5px 30px rgba(0, 0, 0, 0.52);
    min-width        : 300px;
    text-align       : center;
    margin           : 100px auto 100px auto;
    max-width        : 600px;
}

.login-box h3 { font-size : 15px; font-weight : bold; padding-bottom : 15px; }

.login-box .form-group input[type="password"],
.login-box .form-group input[type="text"] { background-color : #ededed; border : medium none; color : #222; padding : 15px 0 15px 40px; height : 45px; }

.login-box .form-group input[type="text"] {
    background-position : 9px 6px;
    background-image    : url("../img/login-sprite.png") !important;
    background-repeat   : no-repeat;
}

.login-box .form-group input[type="password"] {
    background-position : 9px -29px;
    background-image    : url("../img/login-sprite.png") !important;
    background-repeat   : no-repeat;
}

.login-box input[type="submit"] {
    width            : 100%; height : 50px;
    background-color : #43c86f !important;
    font-weight      : bold; font-size : 15px;
    color            : #fff; border-radius : 6px;
}

.login-form { width : 86%; margin : auto; }

.search-form { text-align : center; }

.search-form select { height : 34px !important; width : 150px; background-color : #fff; border : 1px solid #ccc; }

.discount-all-form { margin-bottom : 20px; }

.discount-all-form input[type="text"], .discount-item-form input[type="text"] { width : 80px; margin-left : 15px; margin-right : 20px; }

.discount-all-form label { color : #B5B5B5; font-size : 11px; font-weight : normal; line-height : 30px; }

.qty-box { width : 75px; text-align : center; display : inline-block; vertical-align : top; }

.order-datepicker-start,
.order-datepicker-end {
    width : 130px !important;
}

.sales-target-form { margin-top : 40px; margin-bottom : 15px; }

.sales-target-form input[type="text"] { width : 200px; display : inline-block; }

.switch-wrap { margin : 20px; }

/***************************
******** Tables
***************************/

.add-row { text-align : center; }

.qty-row { width : 140px; }

.discount-row { width : 220px; }

/***************************
******** CC Controls
***************************/

/* tables */
.cc-table .order-head tr { background-color : #F8F8F8; }

.cc-table .cc-section-head { background-color : #fff !important; }

.cc-table .cc-section-head td { background-color : #fff !important; }

.cc-cell-head { border : none !important; }

.table-bordered { border-top : 1px solid #ddd; border-left : none; border-right : none; }

.cc-table td.total { font-weight : bold; }

.cc-table .seg-border-left { border-left : 2px solid #428bca; }

.cc-table .seg-border-right { border-right : 2px solid #428bca; }

/* labels and text */
.cc-pairs { margin-bottom : 8px; min-width : 200px; }

.cc-pairs span { display : block; }

.ccp-label { color : #989898; font-size : 11px; }

.ccp-value { color : #000; font-size : 15px; }

/* buttons */
.cc-btn-edit { float : left; margin-right : 5px; }

.cc-btn-note { height : 32px; width : 32px; background : url('../img/btn-note.png'); background-repeat : no-repeat; border : none; display : inline-block; }

.cc-btn-delete { height : 32px; width : 32px; background : url('../img/btn-cross.png'); background-repeat : no-repeat; border : none; display : inline-block; }

.cc-btn-additem { margin : 0 0 0 5px; height : 32px; width : 32px; background : url('../img/btn-add.png'); background-repeat : no-repeat; border : none; display : inline-block; }

.cc-btn-additem:focus { outline : 0; }

.cc-btn-additem.add { background : url('../img/btn-add.png') !important; }

.cc-btn-additem.loading { background : url('../img/btn-add-loading.gif') !important; }

.cc-btn-additem.update { background : url('../img/btn-update.png') !important; }

.cc-btn-additem.added { background : url('../img/btn-added.png') !important; }

.cc-btn-check { height : 30px; width : 30px; background : url('../img/btn-checkmark.gif') center; background-repeat : no-repeat; border : none; display : inline-block; }

.cc-btn-cross { height : 30px; width : 30px; background : url('../img/btn-crossmark.png') center; background-repeat : no-repeat; border : none; display : inline-block; }

.boxed { border-right : 1px solid #E7E7E7; }

/* tables */
.action-cell { min-width : 100px; }

/* pagination */
.cc-pagination { text-align : center; }

/* Details Box */
.cc-box {
    margin  : 8px 0;
    padding : 5px 15px;
    border  : 1px solid #ddd;
}

.cc-box .warning-msg { display : none; }

/* File Upload */
.cc-box .btn-file {
    position : relative;
    overflow : hidden;
}

.cc-box .btn-file input[type=file] {
    position   : absolute;
    top        : 0;
    right      : 0;
    min-width  : 100%;
    min-height : 100%;
    font-size  : 100px;
    text-align : right;
    filter     : alpha(opacity=0);
    opacity    : 0;
    outline    : none;
    background : white;
    cursor     : inherit;
    display    : block;
}

.cc-box input[readonly] {
    background-color : white !important;
    cursor           : text !important;
}

.cc-box .csv-upload-btn {
    width : 155px;
}

.cc-box .checkbox {
    display      : inline-block;
    margin-right : 10px;
}

@media (max-width : 999px) {
    .cc-box .csv-upload-btn,
    .cc-box .checkbox {
        margin-top  : 10px;
        margin-left : 14px;
    }

    .cc-box .checkbox {
        display : block;
    }
}

.cc-inner-box {
    width            : 80%;
    font-size        : 13px;
    color            : #555;
    font-style       : italic;
    background-color : #E7E7E7;
    padding          : 20px 0 20px 0;
    margin           : 15px auto 10px auto;
}

.price-upload .col-md-6 {
    padding-left : 0;
}

.price-upload .csv-upload-btn {
    display : block;
}

/* Forms */
.cc-date-input {
    background-image      : url('../img/calendar.gif');
    background-repeat     : no-repeat;
    background-attachment : inherit;
    background-position   : 97% center;
}

.cc-form.status-form { text-align : center; }

.cc-form input[type="radio"] { display : none; }

.cc-form label[for="status"] { color : #707070; margin-bottom : 12px; }

.cc-form label[for="rb-pending"],
.cc-form label[for="to-warehouse-1"],
.cc-form label[for="to-warehouse-2"],
.cc-form label[for="to-warehouse-3"],
.transfer-summary .lead {
    display          : inline-block;
    background-color : #bbb;
    padding          : 10px 24px;
    font-family      : Arial;
    font-size        : 15px;
    cursor           : pointer;
    color            : #f1f1f1;
}

.cc-form label[for="rb-picked"] {
    display          : inline-block;
    background-color : #bbb;
    padding          : 10px 24px;
    font-family      : Arial;
    font-size        : 15px;
    cursor           : pointer;
    color            : #f1f1f1;
}

.cc-form td.visible-note { max-width : 350px; }

.cc-form input[type="radio"][id="rb-picked"]:checked + label { background-color : #55DF68; color : #fff; }

.cc-form input[type="radio"][id="rb-pending"]:checked + label { background-color : #F7B15C; color : #fff; }

.purchase-status-form select { min-width : 220px; }

.btn-secondary { background : #274c9d; border : 1px solid #274C9D; border-radius : 20px; color : #fff; }

.btn-secondary:hover, .btn-secondary:focus { color : #fff; border : 0; }

/* Bootstrap Overrides */

.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th { background : #F4F7FC; }

/***************************
******** DASHBOARD
***************************/

.sales-hud {
    background-color : #fff;
    border           : 2px solid #E7E7E7;
    margin-top       : 15px;
}

.sales-hud .progress-block {
    border-right : 2px solid #E7E7E7;
    text-align   : left;
    padding-left : 20px;
}

.progress-block .value-box {
    font-size   : 20px;
    font-weight : bold;
}

.value-box .dollar {
    font-size    : 20px;
    color        : #707070;
    display      : inline-block;
    margin-right : 2px;
}

.value-box .margin {
    margin-left : 15px;
}

.progress-block.small-font .value-box {
    font-size : 15px;
}

.progress-block.small-font .value-box .dollar {
    font-size : 15px;
}

.no-border-right {
    border-right : none !important;
}

.ui-progressbar { height : 10px; margin-top : 5px; margin-bottom : 15px; border : 0px; background : #eee; }

.ui-progressbar .ui-progressbar-value { margin : 0px; border : 0px; }

/* colored bar */
.ui-progressbar.blue .ui-progressbar-value { background : #149bdf; }

.ui-progressbar.green .ui-progressbar-value { background : #62c462; }

.ui-progressbar.red .ui-progressbar-value { background : #ee5f5b; }

.widget-box {
    background-color : #fff;
    border           : 2px solid #E7E7E7;
    margin-top       : 8px;
}

.widget-box.space-right { margin-right : 10px; }

.commission-wrap {
    border     : 2px solid #E7E7E7;
    margin-top : 15px;
    padding    : 0 20px 20px 20px;
}

.commission-value { font-size : 26px; font-weight : bold; }

/***************************
******** MISC
***************************/
select.datepick-month-year { min-width : 80px !important; }

/* Sync Animation */
.glyphicon-refresh-animate {
    -animation        : spin .7s infinite linear;
    -webkit-animation : spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform : rotate(0deg); }
    to { -webkit-transform : rotate(360deg); }
}

@-webkit-keyframes spin {
    from { -webkit-transform : scale(1) rotate(0deg); transform : scale(1) rotate(0deg); }
    to { -webkit-transform : scale(1) rotate(360deg); transform : scale(1) rotate(360deg); }
}

@keyframes spin {
    from { -webkit-transform : scale(1) rotate(0deg); transform : scale(1) rotate(0deg); }
    to { -webkit-transform : scale(1) rotate(360deg); transform : scale(1) rotate(360deg); }
}

/* Xero Button */
.xero-btn {
    width : 120px;
}

#client_selector_chosen {
    max-width : 360px;
}

.edit_ref {
    padding : 10px;
    border  : 1px solid #707070;
    width   : 50%;
}

/***************************
******** Reports
***************************/

#canvas-holder {
    width  : 250px;
    margin : 0 auto;
}

#canvas-holder-customer {
    width  : 300px;
    margin : 0 auto;
}

.top-selling .control-label,
.customer-spendings .control-label,
.highest-paying .control-label,
.monthly-average .control-label,
.budget .control-label,
.monthly-average .col-md-1 {
    margin-top : 5px;
}

.customer-spendings .col-sm-12 {
    margin-top : 10px;
}

.customer-submit {
    margin-top : -10px;
}

.product-list {
    margin-top : 15px;
    border-top : 1px solid #ddd;
}

.product-list label {
    width : 20%;
}

.product-list b {
    width   : 10%;
    display : inline-block;
}

.product-list u {
    width   : 20%;
    display : inline-block;
}

.product-list em {
    width   : 15%;
    display : inline-block;
}

.customer-list label {
    width : 40%;
}

.customer-list b {
    width   : 20%;
    display : inline-block;
}

.customer-list em {
    width   : 20%;
    display : inline-block;
}

@media (max-width : 965px) {
    .product-list label {
        width : auto;
    }

    .product-list b {
        width : auto;
    }

    .product-list u {
        width : auto;
    }
}

@media (max-width : 1065px) {
    .customer-submit {
        margin-top : 10px;
        width      : 100%;
    }
}

.date-label {
    padding-left : 0;
}

.product-box label {
    width        : 150px;
    text-align   : right;
    margin-right : 10px;
}

.monthly-sales label {
    margin-right : 10px;
}

.stockonhand-report h2 {
    display : inline-block;
    width   : 50%;
}

.budget-report h2 {
    display : inline-block;
    width   : 40%;
}

.stockonhand-report form,
.budget-report form {
    display : inline-block;
    width   : 20%;
}

.gap {
    margin-bottom : 10px;
}

.sales-budgets label {
    width : 30%;
}

#budget-amount-get {
    margin-left : -10px;
    width       : 42.5%;
}

@media (max-width : 1098px) {
    #budget-amount-get {
        width       : auto;
        margin-left : 0;
    }
}

.sales-budgets span {
    margin-left  : 5px;
    margin-right : 20px;
}

@media (max-width : 965px) {
    .sales-budgets label {
        width : auto;
    }

    .sales-budgets span {
        display : none;
    }
}

/* Pie Charts */

.doughnut-legend li span,
#budget-legend li span {
    display       : block;
    width         : 14px;
    height        : 14px;
    border-radius : 7px;
    float         : left;
    margin-top    : 4px;
    margin-right  : 8px;
}

#budget-legend li {
    list-style-type : none;
}

.doughnut-legend {
    list-style : none;
    margin     : 0;
    padding    : 0;
    font-size  : 14px;
    margin-top : 20px;
}

.doughnut-legend li {
    margin-bottom : 4px;
}

.doughnut-legend li:first-letter {
    text-transform : capitalize;
}

.comm-how {
    display      : inline-block;
    float        : left;
    color        : #979797;
    width        : 25px;
    text-align   : right;
    margin-right : 25px;
}

#legend-paying .comm-how {
    margin-right : 70px;
}

/*==========  Warehouse to warehouse transfer  ==========*/

.transfer-btn {
    display               : inline-block;
    margin                : 4em 1em;
    color                 : white;
    font-size             : 2em;
    padding               : 2em 3em;
    background            : #337AB7;
    -webkit-border-radius : 5px;
    border-radius         : 5px;
}

@media (max-width : 1198px) {
    .transfer-btn {
        padding : 1em 2em;
        margin  : 1em 1em;
    }
}

.transfer-btn:hover {
    color           : white;
    text-decoration : none;
    background      : #204d74;
}

.transfer-btn:visited {
    text-decoration : none;
}

.transfer-search-form {
    padding : 0;
}

#transfer-ajax-refresh table thead th {
    font-size      : 1em;
    vertical-align : top;
}

.transfer-summary h1 {
    padding-top : 0;
    margin-top  : 0;
}

.cc-form input[type="radio"][id="to-warehouse-1"]:checked + label,
.cc-form input[type="radio"][id="to-warehouse-2"]:checked + label,
.cc-form input[type="radio"][id="to-warehouse-3"]:checked + label,
.transfer-summary .lead { background-color : #274C9D; color : #fff; }

.transfer.cc-btn-delete {
    display : block;
    margin  : 0 auto;
}

.disable-warehouse {
    pointer-events : none;
    cursor         : default;
    background     : gray;
}

/*==========  Store Use  ==========*/

.qty-box.store-use {
    width : 60px;
}

/*--- Orders Xero Statues ---*/

.xero-status {
    width : 4%;
}

.xero-status img {
    display : block;
    width   : 50%;
}