html, body {
    width: 100%;
    height: 100%;
    color: #333;
    margin: 0;
    padding: 0;
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 25px;
}

ul, ol {
    margin: 0;
    padding: 0;
    display: inline-block;
    list-style-type: none;
    list-style-position: inside;
}

li {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none !important;
    outline: 0 !important;
}

b, strong {
    font-weight: 700;
}

.nopadd {
    padding: 0;
}

.form-group {
    position: relative;
}

.btn {
    padding: 10px 12px;
    outline: 0 !important;
}

.btn-xs {
    padding: 1px 6px;
    font-size: 11px;
}

.btn-brown {
    background: #504d4b;
}

.btn-full-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 15px;
    width: 100%;
    border-radius: 0;
}

.btn-haft-left {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 15px;
    width: 50%;
    border-radius: 0;
}

.btn-haft-right {
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 15px;
    width: 50%;
    border-radius: 0;
}
/*======== Login ========*/
#forgot {
    display: none;
}

.signin {
    position: absolute;
    width: 350px;
    top: 20%;
    left: 50%;
    margin-left: -175px;
}

    .signin h3 {
        font-weight: 700;
        font-size: 22px;
        margin-bottom: 40px;
        line-height: 35px;
    }

.copyright {
    position: absolute;
    font-size: 12px;
    bottom: 20px;
    left: 0;
    right: 0;
}

    .copyright a.btn {
        padding: 10px 30px;
        background: #333;
        border-radius: 0;
        color: #fff;
    }

form {
    height: 100%;
}

.form .form-control {
    box-shadow: none;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #aaa;
    margin-bottom: 20px;
}

.form-control:focus {
    border-color: #aaa;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-control.Captcha {
    width: 270px;
}

.has-error .form-control {
    border-bottom: 1px solid #f00;
}

    .has-error .form-control:focus {
        border-bottom: 1px solid #f00;
        box-shadow: none;
    }

.form .btn {
    padding: 10px 40px;
}

#login {
    display: none;
}
/*======== Profile ========*/
.profile-row {
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 300;
    border-bottom: 1px solid #ccc;
}

    .profile-row label {
        font-size: 12px;
        margin-right: 20px;
        margin-bottom: 0;
    }

    .profile-row.has-error label {
        color: #f00;
    }
/*======== Default ========*/
#wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    display: inline-block;
}

#header {
    background: #337ab7;
    color: #fff;
    padding: 20px 0 15px 0;
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid #196596;
}

    #header a {
        color: #fff;
        font-size: 22px;
        display: inline-block;
    }

        #header a.right-nav {
            float: right;
            margin-right: 50px
        }

        #header a.left-nav {
            float: left;
            margin-left: 50px
        }

    #header .search-nav {
        cursor: pointer;
    }

    #header h4 {
        margin: 0;
        padding: 2px 0 0 0;
        font-weight: 500;
    }

#header-profile {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    color: #fff;
    padding: 20px 0 15px 0;
    width: 100%;
    display: inline-block;
}

    #header-profile a {
        color: #fff;
        font-size: 22px;
        display: inline-block;
    }

        #header-profile a.left-nav {
            float: left;
        }

        #header-profile a.right-nav {
            float: right;
        }

.body-title {
    padding-top: 20px;
}

    .body-title h3 {
        font-size: 20px;
        margin: 0 0 5px 0;
    }

/*======== Search Nav ========*/
.searchForm {
    display: none;
}

    .searchForm .form-group {
        margin: 0;
        background: #ddd;
        padding: 15px;
        position: relative;
    }

        .searchForm .form-group .form-control {
            padding-right: 38px;
            min-height: 40px;
            box-shadow: none;
            border: none;
            border-radius: 0;
        }

        .searchForm .form-group .btnSearch {
            position: absolute;
            top: 27px;
            right: 28px;
        }

/*======== Form Control ========*/
.body-content .form-group {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
}

.body-content .form-control {
    box-shadow: none;
    border: none;
    border-radius: 0;
    height: 45px;
    background: #eee;
}

.body-content textarea.form-control {
    height: 100%;
}

.body-content .label-control {
    padding-top: 8px;
}

.body-content .label-title {
    font-weight: 700;
    font-size: 13px
}

.body-content .dropdown-toggle {
    border-radius: 0;
    background: #eee;
}

    .body-content .dropdown-toggle:hover {
        background: #fff;
    }

.body-content .bootstrap-select {
    background: none;
}

.body-content input[type='number'] {
    -moz-appearance: textfield;
}

.body-content input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.body-content .has-error .form-control {
    border: 1px solid #f00;
}

.body-content .has-error .bootstrap-select {
    border: none;
}

.body-content .has-error .error {
    color: #f00;
    font-weight: 300;
    font-size: 12px;
}

.bootstrap-select input.form-control {
    border: 1px solid #ccc !important;
}

.bootstrap-select:hover .btn-default {
    background: #fff !important;
}
/*======== Dashboard ========*/
.dashboard-box {
    color: #fff;
    margin-bottom: 30px;
}

    .dashboard-box a {
        color: #fff;
    }

    .dashboard-box h1 {
        margin: 0;
        padding: 0;
        font-size: 65px;
        font-weight: 400
    }

.dashboard-box-top {
    padding: 15px 20px 10px 20px;
}

    .dashboard-box-top i {
        font-size: 40px;
        border: 1px solid #fff;
        border-radius: 50%;
        padding: 20px;
    }

.dashboard-box-bottom {
    padding: 12px 20px;
}

    .dashboard-box-bottom i {
        font-size: 20px;
        vertical-align: middle;
        margin-right: 5px;
    }

/*======== Step 1 ========*/
.dateTitle {
    background: #4099ff;
    color: #fff;
    ;
    display: block;
    padding: 10px;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
}

ul.list-item-sub {
    display: inline-block;
    width: 100%;
}

    ul.list-item-sub li {
        width: 100%;
        clear: both;
        border-bottom: 1px solid #ccc;
    }

    ul.list-item-sub > li > span {
        background: #eee;
        display: block;
        padding: 8px 10px;
        font-weight: 700;
        border-bottom: 1px solid #ccc;
    }

    ul.list-item-sub > li > a {
        background: #fff;
        width: 100%;
        color: #333;
        padding: 20px 20px 10px 20px;
        display: inline-block;
    }

        ul.list-item-sub > li > a p {
            margin: 0;
            padding: 0;
            display: inline-block;
            line-height: 20px;
        }

            ul.list-item-sub > li > a p b {
                font-size: 16px;
                line-height: 25px;
            }

        ul.list-item-sub > li > a i {
            float: right;
            margin-top: 5px;
        }

/*======== Step 2 ========*/
.order-list {
    padding-bottom: 20px;
}

/*======== Customer ========*/
ul.list-item.customer > li > a .status {
    float: left;
    margin-top: 24px;
    margin-right: 20px;
}

/*======== Pending ========*/
ul.list-item-two-column {
    display: inline-block;
    width: 100%;
}

    ul.list-item-two-column li {
        width: 100%;
        clear: both;
        border-bottom: 1px solid #ccc;
    }

    ul.list-item-two-column > li > span {
        background: #eee;
        display: block;
        padding: 8px 10px;
        font-weight: 700;
        border-bottom: 1px solid #ccc;
    }

    ul.list-item-two-column > li > .content {
        width: 100%;
        padding: 10px 20px 0 20px;
        display: inline-block;
    }

        ul.list-item-two-column > li > .content a {
            background: #fff;
            color: #333;
            display: inline-block;
            width: 100%;
        }

            ul.list-item-two-column > li > .content a p {
                margin: 0;
                padding: 0;
                display: inline-block;
                line-height: 20px;
            }

                ul.list-item-two-column > li > .content a p b {
                    font-size: 16px;
                    line-height: 25px;
                }

    ul.list-item-two-column > li i {
        float: right;
        font-size: 20px;
    }

    ul.list-item-two-column > li > .content .checkbox-style > input {
        background: none;
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
    }

/*======== Submitted ========*/
ul.list-item {
    display: inline-block;
    width: 100%;
}

    ul.list-item li {
        width: 100%;
        clear: both;
        border-bottom: 1px solid #ccc;
    }

    ul.list-item > li > span {
        background: #eee;
        display: block;
        padding: 8px 10px;
        font-weight: 700;
        border-bottom: 1px solid #ccc;
    }

    ul.list-item > li > .content {
        width: 100%;
        padding: 10px 20px 0 20px;
        display: inline-block;
    }

        ul.list-item > li > .content a {
            background: #fff;
            color: #333;
            display: inline-block;
            width: 100%;
        }

            ul.list-item > li > .content a p {
                margin: 0;
                padding: 0;
                display: inline-block;
                line-height: 20px;
            }

                ul.list-item > li > .content a p b {
                    font-size: 16px;
                    line-height: 25px;
                }

    ul.list-item > li > i {
        float: right;
        font-size: 20px;
    }

    ul.list-item > li > .content a .status {
        float: left;
        margin-right: 20px;
    }

/*======== Profile ========*/
.profile-wrap {
    position: relative;
    width: 100%;
    height: 230px;
}

.profile-bg {
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.profile-img {
    position: absolute;
    z-index: 9;
    top: 50%;
    left: 50%;
    text-align: center;
}

    .profile-img .img-center {
        width: 110px;
        height: 110px;
        border: 2px solid #fff;
        border-radius: 50%;
        position: absolute;
        overflow: hidden;
    }

        .profile-img .img-center img {
            width: 100%;
        }

.profile-name {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    width: 100%;
    position: absolute;
    top: 75%;
    z-index: 9
}

/*======== Table ========*/
table.list {
    width: 100%;
    border: none;
}

    table.list tr th {
        background: #337ab7;
        color: #fff;
        border: 1px solid #fff;
        padding: 7px 10px;
        text-transform: uppercase;
        border-collapse: separate;
        text-align: center;
    }

    table.list tr td {
        padding: 10px;
        border: 1px solid #fff;
        background: #f8f8f8;
    }

    table.list tr:nth-child(2n-1) td {
        background: #e8e9ea;
    }

table.tb-list {
    width: 100%;
    border: none;
}

    table.tb-list tr th {
        background: #337ab7;
        color: #fff;
        border: 1px solid #fff;
        padding: 7px 10px;
        text-transform: uppercase;
        border-collapse: separate;
        text-align: center;
    }

    table.tb-list tr td {
        padding: 10px;
        border: 1px solid #fff;
    }

    table.tb-list tr:nth-child(2n-1):not(:has(.payment-rejected, .payment-received)) {
        background: #e8e9ea;
    }

 

/*======== Tabs ========*/
.tab-content {
    margin-top: -5px;
}

.nav-tabs > li {
    border: none !important;
}

    .nav-tabs > li > a {
        font-weight: bold;
        border-radius: 0 !important;
        border: none !important;
    }

    .nav-tabs > li > a {
        background: #337ab7;
        color: rgba(255, 255, 255, 0.8);
    }

        .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
            background: #206696;
        }

    .nav-tabs > li.active > a {
        background: #fff;
        color: #2574ab;
    }

/*======== Order Detail ========*/
.order-wrap {
    padding: 15px;
    line-height: 20px;
}

table.order-detail tr td {
    padding: 3px 0;
}

    table.order-detail tr td span.title {
        font-weight: 500
    }

/*======== Notification ========*/
.notification {
    background: #eee;
    width: 100%;
    min-height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    cursor: pointer;
}

    .notification input {
        float: left;
        margin-top: 15px;
        height: 25px;
        margin-left: 10px;
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
    }

    .notification h4 {
        margin: 0 0 5px 0;
    }

    .notification p {
        margin: 0;
        line-height: 20px
    }

    .notification .button-wrap {
        border-top: 1px solid #666;
        padding-top: 5px;
        margin-top: 5px;
        text-align: center
    }

    .notification a {
        color: #333;
        font-weight: bold;
        font-size: 12px
    }

/*======== Image ========*/
.fileUpload {
    position: relative;
    overflow: hidden;
    background: #fff;
    color: #777;
    bottom: 0;
    right: 0;
    padding: 23px 0;
    text-align: center;
    border: 2px dashed #ccc;
    cursor: pointer;
}

    .fileUpload input.upload {
        cursor: pointer;
        margin: 0;
        opacity: 0;
        padding: 0;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 23px;
        width: 100%
    }

.imageUpload {
    padding: 25px 0;
    position: relative;
}

    .imageUpload span {
        position: absolute;
        color: #333;
        top: -7px;
        right: -7px;
        font-size: 20px;
        cursor: pointer;
        background: #fff;
        border-radius: 100%;
        padding: 0.5px 0.5px 0 2.5px;
    }

/*box img*/
.imgBox {
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: scroll;
    z-index: 9999;
    display: none;
}

    .imgBox .imgWrap {
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 640px;
        width: 90%;
        height: auto;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;
    }

        .imgBox .imgWrap img.imgValue {
            border: 1px solid #ccc;
            border-bottom: none;
            width: 100%;
        }

        .imgBox .imgWrap .imgCaption {
            font-size: 13px;
            padding: 8px 10px;
            color: #333;
            background: #F5F5F5;
            border: 1px solid #eee;
            border-top: none;
        }

        .imgBox .imgWrap .imgClose {
            position: absolute;
            top: -10px;
            right: -12px;
            width: 30px;
            cursor: pointer;
        }

        .imgBox .imgWrap .arrowBox {
            background: rgba(255, 255, 255, 0.5);
            font-size: 30px;
            margin-top: -20px;
            position: absolute;
            top: 50%;
            z-index: 9;
            cursor: pointer;
            color: #666;
            display: none;
        }

            .imgBox .imgWrap .arrowBox:hover {
                background: rgba(255, 255, 255, 0.8);
                color: #444;
            }

            .imgBox .imgWrap .arrowBox.arrow-right {
                border-radius: 5px 0 0 5px;
                padding: 5px 5px 5px 8px;
                right: 10px;
            }

            .imgBox .imgWrap .arrowBox.arrow-left {
                border-radius: 0 5px 5px 0;
                padding: 5px 8px 5px 5px;
                left: 10px;
            }

/* === Loading === */
.upload_loading {
    background: #ccc;
    position: absolute;
    bottom: 10px;
    left: 15%;
    width: 70%;
    overflow: hidden;
}

    .upload_loading div {
        width: 50px;
        height: 4px;
        background-color: #337ab7;
        position: relative;
        -webkit-animation: mymove 2s infinite;
        animation: mymove 2s infinite;
    }

    .upload_loading div {
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }

@-webkit-keyframes mymove {
    from {
        left: 0%;
    }

    to {
        left: 100%;
    }
}

@keyframes mymove {
    from {
        left: 0%;
    }

    to {
        left: 100%;
    }
}

/*======== Custom Create Order ========*/
ul.imglist {
    margin: 0;
    padding: 0;
}

    ul.imglist li {
        float: left;
        margin: 0 5px 10px 5px;
        width: 100px;
    }

ul.imglistPartner1 {
    margin: 0;
    padding: 0;
}

    ul.imglistPartner1 li {
        float: left;
        margin: 0 5px 10px 5px;
        width: 100px;
    }

ul.imglistPartner2 {
    margin: 0;
    padding: 0;
}

    ul.imglistPartner2 li {
        float: left;
        margin: 0 5px 10px 5px;
        width: 100px;
    }

ul.imglistPartner3 {
    margin: 0;
    padding: 0;
}

    ul.imglistPartner3 li {
        float: left;
        margin: 0 5px 10px 5px;
        width: 100px;
    }

ul.imglistPartner4 {
    margin: 0;
    padding: 0;
}

    ul.imglistPartner4 li {
        float: left;
        margin: 0 5px 10px 5px;
        width: 100px;
    }

ul.imglistPartner5 {
    margin: 0;
    padding: 0;
}

    ul.imglistPartner5 li {
        float: left;
        margin: 0 5px 10px 5px;
        width: 100px;
    }

.payment-received {
    background-color: #409940 !important;
    color: #ffffff;
}

.payment-rejected {
    background-color: #b93131 !important;
    color: #ffffff;
}

.payment-default {
    background-color: #f8f8f8;
}

tr.order-disabled, tr.order-disabled select {
    color: #9a9a9a !important;
}

    tr.order-disabled input, tr.order-disabled select {
        pointer-events: none;
    }


    tr.order-disabled img {
        filter: grayscale(1) !important;
    }