/*

z-index most top 99 only

*/

* {
    box-sizing: border-box;
}

:focus {
    outline: none;
}

[data-tool_tip] {
    position: relative;
}

[data-tool_tip]::after {
    content: attr(data-tool_tip);
    display: block;
    position: absolute;
    background-color: #000;
    color: #f2f2f2;
    border: 5px;
    white-space: nowrap;
    right: 0;
    bottom: 100%;
    transform: scale(0);
    transition: transform ease-out 150ms;
    border-radius: 5px;
    padding: 12px 22px;
    font-size: 12px;
    font-family: Prompt;
}

[data-tool_tip]:hover::after {
    transform: scale(1);
}

[data-input_type=datalist] {
    background-color: #fff;
    border-radius: 5px !important;
    width: 100% !important;
    outline: none !important;
    border: 1px solid !important;
    border-color: -internal-light-dark(#767676, #c3c3c3) !important;
    border-image: initial;
}

[data-tool_tip_rt] {
    position: relative;
}

[data-tool_tip_rt]::after {
    content: attr(data-tool_tip_rt);
    display: block;
    position: absolute;
    background-color: #000;
    color: #f2f2f2;
    border: 5px;
    white-space: nowrap;
    left: 0;
    bottom: 100%;
    transform: scale(0);
    transition: transform ease-out 150ms;
    border-radius: 5px;
    padding: 12px 22px;
    font-size: 12px;
    font-family: Prompt;
}

[data-tool_tip_rt]:hover::after {
    transform: scale(1);
}

[data-tool_tip_lb] {
    position: relative;
}

[data-tool_tip_lb]::after {
    content: attr(data-tool_tip_lb);
    display: block;
    position: absolute;
    background-color: #000;
    color: #f2f2f2;
    border: 5px;
    white-space: nowrap;
    right: 0;
    top: 100%;
    transform: scale(0);
    transition: transform ease-out 150ms;
    border-radius: 5px;
    padding: 12px 22px;
    font-size: 12px;
    font-family: Prompt;
}

[data-tool_tip_lb]:hover::after {
    transform: scale(1);
}

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: Prompt;
}

input[type=text],
input[type=number],
input[type=password] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    outline: none;
    transition: border-color 0.6s linear;
}

input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus {
    border-color: #333;
}

input:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.inputGroup {
    display: table;
}

.inputGroup .titleGroup {
    display: table-cell;
    padding: 5px 12px;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    width: 1%;
}

.inputGroup .closeGroup,
.inputGroup .addGroup,
.inputGroup .removeGroup,
.inputGroup .addBorrow,
.inputGroup .removeBorrow {
    display: table-cell;
    width: 1%;
    padding: 0 5px;
    cursor: pointer;
}

.inputGroup .closeGroupdisabled {
    display: table-cell;
    width: 1%;
    padding: 0 5px;
    cursor: pointer;
    color: #05ae0e;
}

.inputGroup input[type=text] {
    display: table-cell;
    border-radius: 0 4px 4px 0;
    width: 100%;
    position: relative;
}

.inputGroup input[type=text]:focus {
    border-color: #DDD;
}

.inputGroupIn .titleGroup {
    border: 1px solid #08bbf7;
    background-color: #08bbf7;
    color: #f2f2f2;
}

.inputGroupOut .titleGroup {
    border: 1px solid #f82020;
    background-color: #f82020;
    color: #f2f2f2;
}

.inputGroupReturn .titleGroup {
    border: 1px solid #ccc;
    background-color: #ccc;
    color: #f2f2f2;
}

.inputGroup2 {
    display: table;
}

.inputGroup2 input[type=text] {
    display: table-cell;
    border-radius: 4px 0 0 4px;
    width: 100%;
    position: relative;
}

.inputGroup2 .titleGroup2 {
    display: table-cell;
    padding: 5px 12px;
    color: #555;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    width: 1%;
}

.inputGroup2 .titleGroup2 button {
    display: table-cell;
    background-color: #fff;
    border: none;
}

button {
    padding: 8px 12px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    border: 1px solid #000;
    display: flex;
    align-items: center;
}

button .icon {
    margin-right: 3px;
}

button .icon2 {
    margin-left: 3px;
}

textarea {
    padding: 8px 12px;
    background-color: #fff;
    border-radius: 5px;
    width: 100%;
    outline: none;
    height: 80px;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
}

select {
    padding: 7px 12px;
    background-color: #fff;
    border-radius: 5px;
    width: 100%;
    outline: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

.template {
    display: none;
}

.clear {
    clear: both;
}

.under-line {
    position: relative;
}

.under-line:after {
    position: absolute;
    content: '';
    height: 2px;
    width: 100%;
    background: #fafafa;
    bottom: 0;
    left: 0;
    transform: translateX(-101%);
    transition: all 0.3s ease-in-out;
}

.under-line:hover:after {
    transform: translateX(0px);
}

.box-shadow {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}

.row-line {
    width: 100%;
    background-color: #ccc;
    height: 1px;
    clear: both;
    margin: 10px 0;
}

.bg_img {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.status-so {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    right: 3px;
}

.status-so.wait {
    background-color: #ffcb08;
}

.status-so.danger {
    background-color: #f00;
}

.status-so.success {
    background-color: #00c851;
}

.line-one {
    white-space: nowrap;
}

.textDot {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cursorPointer {
    cursor: pointer;
}

.cursorDefault {
    cursor: default;
}

.userUnselect {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/*=================Button=================*/


/*=================Black=================*/

.btn {
    border-color: #000;
    color: #ffcb08;
    background-color: #333;
    transition: background-color 0.6s linear;
}

.btn:hover {
    background-color: #ddd;
    color: #000;
}

.btn:disabled,
.btn[disabled],
.btn2:disabled,
.btn2[disabled] {
    border: 1px solid #999;
    background-color: #ccc;
    color: #666;
}

.btn[disabled]:hover,
.btn2[disabled]:hover {
    border: 1px solid #999;
    background-color: #ccc;
    color: #666;
}

.btn-label {
    padding: 8px 12px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    align-items: center;
    font-size: 13.33px;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    display: block;
    text-align: center;
    border: 1px solid #ddd;
    color: #333;
    background-color: #fff;
}

.btn-label .icon {
    margin-right: 3px;
}

.btn-label:hover {
    background-color: #ddd;
    color: #000;
    border-color: #000;
}


/*=================Black=================*/

.btn2 {
    border-color: #ddd;
    color: #333;
    background-color: #fff;
    transition: background-color 0.6s linear;
}

.btn2:hover {
    background-color: #000;
    color: #ffcb08;
    border-color: #ffcb08;
}


/*=================Danger=================*/

.btnDanger {
    border-color: #f44;
    color: #f44;
    transition: background-color 0.6s linear;
}

.btnDanger:hover {
    border-color: #c00;
    background-color: #c00;
    color: #fff;
}


/*=================Warning=================*/

.btnWarning {
    border-color: #fb3;
    color: #fb3;
    transition: background-color 0.6s linear;
}

.btnWarning:hover {
    border-color: #f80;
    background-color: #f80;
    color: #fff;
}


/*=================Success=================*/

.btnSuccess {
    border-color: #00c851;
    color: #00c851;
    transition: background-color 0.6s linear;
}

.btnSuccess:hover {
    border-color: #007e33;
    background-color: #007e33;
    color: #fff;
}


/*=================Info=================*/

.btnInfo {
    border-color: #33b5e5;
    color: #33b5e5;
    transition: background-color 0.6s linear;
}

.btnInfo:hover {
    border-color: #09c;
    background-color: #09c;
    color: #fff;
}


/*=================Emerald=================*/

.btnEmerald {
    border-color: #2bbbad;
    color: #2bbbad;
    transition: background-color 0.6s linear;
}

.btnEmerald:hover {
    border-color: #00695c;
    background-color: #00695c;
    color: #fff;
}


/*=================Primary=================*/

.btnPrimary {
    border-color: #4285f4;
    color: #4285f4;
    transition: background-color 0.6s linear;
}

.btnPrimary:hover {
    border-color: #0d47a1;
    background-color: #0d47a1;
    color: #fff;
}


/*=================Secondary=================*/

.btnSecondary {
    border-color: #a6c;
    color: #a6c;
    transition: background-color 0.6s linear;
}

.btnSecondary:hover {
    border-color: #93c;
    background-color: #93c;
    color: #fff;
}


/*=================TEXT SIZE=================*/

.text-small1 {
    font-size: 0.1em;
}

.text-small2 {
    font-size: 0.2em;
}

.text-small3 {
    font-size: 0.3em;
}

.text-small4 {
    font-size: 0.4em;
}

.text-small5 {
    font-size: 0.5em;
}

.text-small6 {
    font-size: 0.6em;
}

.text-small7 {
    font-size: 0.7em;
}

.text-small8 {
    font-size: 0.8em;
}

.text-small9 {
    font-size: 0.9em;
}


/*=================TEXT SIZE=================*/

.text-transform1 {
    text-transform: capitalize;
}

.text-transform2 {
    text-transform: uppercase;
}

.text-transform3 {
    text-transform: lowercase;
}


/*=================TEXTAREA SIZE=================*/

.textarea-line2 {
    height: 45px;
}

.textarea-line6 {
    height: 105px;
}


/*=================LABEL=================*/

.label {
    font-size: 0.8em;
    background-color: #d9d9d9;
    color: #333;
    padding: 3px 5px;
    border-radius: 5px;
    margin-right: 5px;
    transition: background-color 0.8s;
    white-space: nowrap;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

.labelWarning.active {
    background-color: #fb3;
    color: #F2F2F2;
}

.labelWarning:hover {
    background-color: #f80;
    color: #F2F2F2;
}

.labelSuccess.active {
    background-color: #00c851;
    color: #F2F2F2;
}

.labelSuccess:hover {
    background-color: #007e33;
    color: #F2F2F2;
}

.labelDanger.active {
    background-color: #f44;
    color: #F2F2F2;
}

.labelDanger:hover {
    background-color: #c00;
    color: #F2F2F2;
}

.labelInfo.active {
    background-color: #33b5e5;
    color: #F2F2F2;
}

.labelInfo:hover {
    background-color: #09c;
    color: #F2F2F2;
}

.labelEmerald.active {
    background-color: #2bbbad;
    color: #F2F2F2;
}

.labelEmerald:hover {
    background-color: #00695c;
    color: #F2F2F2;
}

.labelPrimary.active {
    background-color: #4285f4;
    color: #F2F2F2;
}

.labelPrimary:hover {
    background-color: #0d47a1;
    color: #F2F2F2;
}

.labelSecondary.active {
    background-color: #a6c;
    color: #F2F2F2;
}

.labelSecondary:hover {
    background-color: #93c;
    color: #F2F2F2;
}

.labelOrange.active {
    background-color: #e68a00;
    color: #F2F2F2;
}
.labelOrange:hover {
    background-color: #b36b00;
    color: #F2F2F2;
}

.labelBlack.active {
    background-color: #333;
    color: #F2F2F2;
}
.labelBlack:hover {
    background-color: #000;
    color: #F2F2F2;
}

/*=================ALERT MESSAGE=================*/

.alert_message {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 1000;
}

.alert_message .alert_content {
    border: 1px solid;
    width: 400px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
}

.alert_danger {
    border-color: #f44;
    color: #f44;
    background-color: #f2dede;
}

.alert_warning {
    border-color: #fb3;
    color: #fb3;
    background-color: #fff8ea;
}

.alert_success {
    border-color: #00c851;
    color: #00c851;
    background-color: #dff0d8;
}

.alert_info {
    border-color: #33b5e5;
    color: #33b5e5;
    background-color: #eaf7fc;
}

.alert_emerald {
    border-color: #2bbbad;
    color: #2bbbad;
    background-color: #e9f8f7;
}

.alert_primary {
    border-color: #4285f4;
    color: #4285f4;
    background-color: #e7f0fe;
}

.alert_secondary {
    border-color: #a6c;
    color: #a6c;
    background-color: #f6effa;
}


/*=================ALERT CONFIRM=================*/

.alert_confirm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(#000 0%, rgba(1, 1, 1, 0.55) 135%);
    z-index: 100;
    display: none;
}

.alert_confirm .alert_content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: 250px;
    background-color: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    border: 1px solid rgba(1, 1, 1, 0.5);
}

.alert_confirm .alert_content .head {
    background-color: #f44;
    color: #fff;
    padding: 12px 16px;
    border-radius: 5px 5px 0 0;
}

.alert_confirm .alert_content .head.success {
    background-color: #00c851;
}

.alert_confirm .alert_content .head.warning {
    background-color: #fb3;
}

.alert_confirm .alert_content .head.info {
    background-color: #33b5e5;
}

.alert_confirm .alert_content .body {
    padding: 25px 10px;
    text-align: center;
}

.alert_confirm .alert_content .body .detail {
    margin-bottom: 10px;
}

.alert_confirm .alert_content button {
    display: initial;
}

@media only screen and (min-width: 768px) {
    .alert_confirm .alert_content {
        width: 400px;
    }
}


/*=================COLOR=================*/

.color_danger {
    color: #f44;
}

.color_warning {
    color: #fb3;
}

.color_success {
    color: #00c851;
}

.color_info {
    color: #33b5e5;
}

.color_emerald {
    color: #2bbbad;
}

.color_primary {
    color: #4285f4;
}

.color_secondary {
    color: #a6c;
}

.color_warning2 {
    color: #ff751a;
}


/*=================STATUS=================*/

.status_wait {
    background-color: #ffffe6 !important;
}

.status_success {
    background-color: #ebfaeb !important;
}

.status_cancel {
    background-color: #ffebe6 !important;
}


/*=================FROM=================*/

form.form {
    width: 100%;
}

form.form .row {
    color: #ffcb08;
    padding-bottom: 10px;
}

form.form .row .title {
    padding-bottom: 10px;
}

form.form .row .title-request::after {
    content: ' *';
    color: #f44;
}

form.form .row .input-address .wrap-address2 {
    margin-bottom: 5px;
}

@media only screen and (min-width: 600px) {
    form.form .row .input-address {
        overflow: hidden;
    }
    form.form .row .input-address .wrap-address2:nth-child(odd) {
        width: 49.5%;
        float: left;
    }
    form.form .row .input-address .wrap-address2:nth-child(even) {
        width: 49.5%;
        float: right;
    }
}

form.form .row-head {
    position: fixed;
    top: 0;
    overflow: hidden;
    font-size: 1.3em;
    color: #ffcb08;
    padding: 10px 20px 0 0;
    width: 100%;
}

form.form .row-head .slide-title {
    float: left;
}

form.form .row-head .slide-close {
    float: right;
    cursor: pointer;
}

form.form .row-picture .input .preview_picture {
    display: none;
}

form.form .row-picture .input button {
    width: 100%;
    display: block;
}

form.form .row-save {
    position: fixed;
    bottom: 0;
    padding: 10px 20px 10px 0;
    width: 100%;
}

form.form .row-save button {
    width: 100%;
    display: block;
}

form.form .row-login {
    padding-top: 10px;
    width: 100%;
}

form.form .row-login button {
    width: 100%;
    display: block;
}

@media only screen and (min-width: 768px) {
    form.form .row-head,
    form.form .row-save {
        width: 450px;
    }
}

@media only screen and (min-width: 1200px) {
    form.form .row-head,
    form.form .row-save {
        width: 800px;
    }
}

form.form .row-head_quo {
    overflow: hidden;
}

form.form .row-head_quo .row {
    overflow: hidden;
    color: #ffcb08;
}

form.form .row-head_quo .row .title {
    padding: 10px 5px 10px 0;
}

form.form .row-head_quo .row .quo_number {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 10px;
}

form.form .row-head_quo .row .input .address {
    padding: 12px 16px;
    background-color: #fff;
    border-radius: 5px;
    color: #333;
}

form.form .row-head_quo .row .address1 .address b,
form.form .row-head_quo .row .address2 .address b {
    text-decoration: underline;
}

@media only screen and (min-width: 1200px) {
    form.form .row-head_quo .row .language {
        float: left;
    }
    form.form .row-head_quo .row .quo_number {
        float: right;
    }
    form.form .row-head_quo .row .date {
        float: right;
        text-align: right;
    }
    form.form .row-head_quo .row .customer {
        float: left;
        width: 45%;
    }
    form.form .row-head_quo .row .customer select {
        min-width: 300px;
    }
    form.form .row-head_quo .row .address1 {
        float: left;
        width: 45%;
    }
    form.form .row-head_quo .row .address2 {
        float: right;
        width: 45%;
    }
}

form.form .row-col2 {
    margin-bottom: 10px;
}

form.form .row-col2 .col {
    margin-bottom: 10px;
}

form.form .row-col2 .col .title {
    padding-bottom: 10px;
    color: #ffcb08;
}

form.form .row-col2 .col .input-address select {
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}

form.form .row-col2 .col .input-address textarea {
    border-top: none;
}

@media only screen and (min-width: 1200px) {
    form.form .row-col2 {
        display: flex;
        justify-content: space-between;
    }
    form.form .row-col2 .col {
        margin-bottom: 0;
        width: 49%;
    }
}

form.form .row-serial {}

form.form .row-serial .serial {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5px;
}

form.form .row-serial .serial>div:nth-child(1) {
    width: 2%;
    margin-right: 15px;
}

form.form .row-serial .serial>div:nth-child(2) {
    width: 100%;
}

form.form .row-serial .serial2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 3px;
}

form.form .row-serial .serial2 div:nth-child(1) {
    width: 1%;
    margin-right: 10px;
}

form.form .row-serial .serial2 div:nth-child(2) {
    width: 64%;
}

form.form .row-serial .serial2 div:nth-child(3) {
    width: 30%;
    margin: 0 5px;
}

form.form .row-serial .serial2 div:nth-child(4) {
    width: 1%;
}

form.form .row-serial .serial3 .wrap_serial3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 3px;
}

form.form .row-serial .serial3 .wrap_serial3 > div:nth-child(1) {
    width: 1%;
    margin-right: 10px;
}

form.form .row-serial .serial3 .wrap_serial3 > div:nth-child(2) {
    width: 98%;
    margin-right: 5px;
}

form.form .row-serial .serial3 .wrap_serial3 > div:nth-child(4) {
    width: 1%;
}

form.form .row-cost .cost {
    margin-bottom: 10px;
}

form.form .row-cost .cost .cost_option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

form.form .row-cost .cost .cost_data>div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 3px;
}

form.form .row-checklist {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

form.form .row-checklist::after {
    content: '';
    width: 100%;
    height: 4px;
    background-color: #ffcb08;
    position: absolute;
    bottom: 0;
    /* left: 50%;
transform: translateX(-50%); */
}

form.form .row-checklist .checklist.choice {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5px;
}

form.form .row-checklist .checklist.choice .input {
    width: 88%;
    margin-right: 10px;
}

form.form .row-checklist .checklist.choice .select_status {
    width: 12%;
}

form.form .row-checklist .checklist>.detail {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5px;
}

form.form .row-checklist .checklist>.detail .input {
    width: 100%;
}

form.form .row-checklist .checklist div:nth-child(2) textarea {}

form.form-blank .row {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
}

form.form-blank .row .title {
    color: #333;
    font-weight: 700;
}

form.form-blank .title-head {
    background-color: #333;
    color: #ffcb08;
    font-weight: 700;
    font-size: 1.3em;
}

@media only screen and (min-width: 1200px) {
    form.form-blank .row {
        width: 50%;
        float: left;
    }
    form.form-blank .row2 {
        margin-left: 1%;
        width: 49%;
    }
    form.form-blank .title-head {
        width: 100%;
    }
    form.form-blank .row-detail {
        width: 100%;
    }
}

form.form .row_spec .row_detail {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
form.form .row_spec div:nth-child(1) {
    margin-bottom: 5px;
}
form.form .row_spec .row_detail div:nth-child(1) {
    width: 30px;
}
form.form .row_spec .row_detail div:nth-child(2) {
    width: 100%;
}
form.form .row_spec .row_detail div:nth-child(2) textarea {
    height: 50px;
}

form.form .row_so .row_so_product {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 0;
}
form.form .row_so div:nth-child(1) {
    margin-bottom: 5px;
}
form.form .row_so .row_so_product>div:nth-child(1) {
    width: 30px;
}
form.form .row_so .row_so_product>div:nth-child(2) {
    width: 100%;
}
form.form .row_so .row_so_product>div:nth-child(3) {
    width: 30px;
    margin-left: 5px;
}

.row-choose_address {
    background-color: #FFF;
    color: #333 !important;
    margin-bottom: 5px;
    padding: 5px 10px;
    border-radius: 5px;
}

.row-choose_address .title {
    font-weight: 700;
    display: inline-flex;
    justify-content: start;
    align-items: center;
}

.row3col {
    
}

.row3col>div {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .row3col {
        display: flex;
        justify-content: space-between;
    }

    .row3col>div {
        width: 33%;
    }
}
/*=================HEADER=================*/

header .header {
    background-color: #333;
    color: #ffcb08;
    padding: 10px;
    font-size: 1.3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .header .icon {
    cursor: pointer;
}

header .header .title {
}

header .header-menu {
    position: fixed;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(1, 1, 1, 0.55) 0%, #010101 105%, #000 100%);
    font-size: 1.3em;
    color: #ffcb08;
    display: none;
    z-index: 99;
}

header .header-menu .header-content {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #333;
}

header .header-menu .header-content .header-overflow {
    height: 100%;
}

header .header-menu .header-content .header-overflow .list-close {
    text-align: right;
    padding-right: 3px;
}

header .header-menu .header-content .header-overflow .list-close a {
    cursor: pointer;
}

header .header-menu .header-content .header-overflow .list {
    overflow: hidden;
    margin-bottom: 10px;
}

header .header-menu .header-content .header-overflow .list-sub {
    overflow: hidden;
    margin-bottom: 10px;
    font-size: 0.8em;
    margin-left: 10px;
}

@media only screen and (min-width: 768px) {
    header .header-menu .header-content {
        width: 350px;
    }
}


/*=================FOOTER=================*/

footer {}


/*=================SLIDE=================*/

.slide-update {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    display: none;
    background: linear-gradient(90deg, rgba(1, 1, 1, 0.55) 0%, #010101 70%, #000 100%);
}

.slide-update .slide-content {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: #333;
    padding: 60px 10px 65px 10px;
}

.slide-update .slide-content .slide-overflow {
    height: 100%;
}

@media only screen and (min-width: 768px) {
    .slide-update .slide-content {
        width: 450px;
    }
}

@media only screen and (min-width: 1200px) {
    .slide-update .slide-content {
        width: 800px;
    }
}

.show-gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 99;
}

.show-gallery .show-gallery_content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #000;
}

.show-gallery .show-gallery_content .show-gallery_close {
    font-size: 1.3em;
    color: #ffcb08;
    text-align: right;
    cursor: pointer;
    padding: 10px;
}

.show-gallery .show-gallery_content .show-gallery_footer {
    width: 100%;
    background-color: rgba(1, 1, 1, 0.55);
    padding: 10px;
    overflow: hidden;
    color: #f2f2f2;
}

.show-gallery .show-gallery_content .show-gallery_footer .title {
    float: left;
}

.show-gallery .show-gallery_content .show-gallery_footer .size {
    float: right;
}


/*=================SLIDE FULL=================*/

.slide-full {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    display: none;
    z-index: 1;
}

.slide-full .slide-head {
    width: 100%;
    font-size: 1.3em;
    color: #ffcb08;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.slide-full .slide-main {
    width: 100%;
    padding: 10px;
    position: fixed;
    left: 0;
    height: 100%;
    padding-bottom: 70px;
}

.slide-full .slide-main .slide-overflow {
    height: 100%;
}

.slide-full .slide-main .slide-overflow .add-item {
    text-align: right;
}

.slide-full .slide-main .slide-overflow2 {}

.slide-full .slide-main-list_item {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 10px;
    background-color: #FFF;
    display: none;
}

.slide-full .slide-main-list_item .slide-main-list_item_head {
    display: flex;
    justify-content: space-between;
    font-size: 1.3em;
    color: #ffcb08;
    padding: 10px 5px;
    background-color: #333;
}

.slide-full .slide-main-list_item .warp-list_item {
    height: 100%;
    margin: 10px 0;
    padding-bottom: 90px;
}

.slide-full .slide-main-list_item .warp-list_item .slide-overflow {
    height: 100%;
    background-color: #f2f2f2;

}

.slide-full .slide-main-list_item .warp-list_item .slide-overflow .list-item-type .head-so {
    font-weight: 700;
    color: #f2f2f2;
    padding: 10px 10px 0 10px;
}

@media only screen and (min-width: 1200px) {
    .slide-full .slide-main .slide-overflow .add-item {
        display: none;
    }
    .slide-full .slide-main-list_item .warp-list_item .slide-overflow {
        background-color: #f2f2f2;
    }
    .slide-full .slide-main {
        width: 60%;
    }
    .slide-full .slide-main-list_item {
        width: 40%;
        height: 100%;
        left: unset;
        top: 52px;
        right: 0;
        background-color: #fff;
        display: block;
    }
    .slide-full .slide-main-list_item .slide-main-list_item_head {
        display: none;
    }
    .slide-full .slide-main-list_item .warp-list_item {
        padding: 10px 0 100px 0;
    }
    .slide-full .slide-main-list_item .warp-list_item .slide-overflow .list-item-type .head-so {
        color: #000;
    }
}

.slide-address {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(1, 1, 1, 0.55);
    z-index: 1;
    display: none;
}

.slide-address .slide-content {
    position: fixed;
    top: 0;
    /* right: -100%; */
    width: 100%;
    height: 100%;
    background-color: #333;
    padding: 60px 10px 10px 10px;
}

.slide-address .slide-content .slide-overflow {
    height: 100%;
}

@media only screen and (min-width: 768px) {
    .slide-address .slide-content {
        width: 450px;
        height: 450px;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
    }
    .slide-address .slide-content .row-head {
        width: 450px;
    }
}


/*=================POPUP GALLERY=================*/

.popup-gallery {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: rgba(1, 1, 1, 0.55);
    display: none;
}

.popup-gallery .popup-gallery_content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /*background-color:$colorBG1;*/
    height: 100%;
    background-color: #333;
    padding: 60px 10px 60px 10px;
    border-radius: 5px;
}

.popup-gallery .popup-gallery_content .popup-gallery_overflow {
    height: 100%;
}

.popup-gallery .popup-gallery_content .popup-gallery_overflow .gallery-head {
    position: fixed;
    top: 0;
    overflow: hidden;
    padding: 10px 20px 0 0;
    /*font-size:$fontSize_head1; color:$colorText1;*/
    width: 100%;
    font-size: 1.3em;
    color: #fff;
}

.popup-gallery .popup-gallery_content .popup-gallery_overflow .gallery-head .gallery-title {
    float: left;
}

.popup-gallery .popup-gallery_content .popup-gallery_overflow .gallery-head .gallery-close {
    float: right;
    cursor: pointer;
}

.popup-gallery .popup-gallery_content .popup-gallery_overflow .gallery-list {
    float: left;
    width: 49%;
    height: 140px;
    background-color: #f2f2f2;
    position: relative;
    border-radius: 5px;
    margin: 0.4%;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
}

.popup-gallery .popup-gallery_content .popup-gallery_overflow .gallery-list .gallery-list_option {
    background-color: rgba(254, 254, 254, 0.35);
    overflow: hidden;
}

.popup-gallery .popup-gallery_content .popup-gallery_overflow .gallery-list .gallery-list_option .icon-left {
    float: left;
    margin-left: 5px;
    cursor: pointer;
}

.popup-gallery .popup-gallery_content .popup-gallery_overflow .gallery-list .gallery-list_option .input-right {
    float: right;
    margin-right: 5px;
}

.popup-gallery .popup-gallery_content .gallery-footer {
    margin-top: 10px;
    overflow: hidden;
}

.popup-gallery .popup-gallery_content .popup-gallery_overflow .gallery-list .gallery-list_rankging {
    position: absolute;
    bottom: 0;
    left: 0;
}

.popup-gallery .popup-gallery_content .popup-gallery_overflow .gallery-list .gallery-list_rankging input[type=text] {
    width: 40px;
    padding: 5px;
}

.popup-gallery .popup-gallery_content .gallery-footer button:nth-child(1) {
    float: left;
}

.popup-gallery .popup-gallery_content .gallery-footer button:nth-child(2) {
    float: right;
}

@media only screen and (min-width: 768px) {
    .popup-gallery .popup-gallery_content {
        width: 650px;
        height: 650px;
        padding-bottom: 30px;
    }
    .popup-gallery .popup-gallery_content .popup-gallery_overflow {
        height: 500px;
    }
    .popup-gallery .popup-gallery_content .popup-gallery_overflow .gallery-list {
        width: 32.5%;
        height: 180px;
    }
}


/*=================PREVIEW IMSGES=================*/

.showImages {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 5px;
}

.showImages .listImages {
    width: 100%;
    height: 150px;
    box-shadow: 1px 1px 2px rgba(51, 51, 51, 0.25);
    margin-bottom: 0.5%;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.showImages .listImages .listDelete {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(51, 51, 51, 0.5);
    padding: 10px;
    border-radius: 0 0 5px 0px;
}

.showImages .listImages:hover {
    opacity: 0.8;
    transition: opacity 1000ms linear;
}

@media only screen and (min-width: 600px) {
    .showImages .listImages {
        width: 49.5%;
        height: 150px;
        margin-right: 0.5%;
    }
}

@media only screen and (min-width: 1000px) {
    .showImages .listImages {
        width: 24.5%;
        height: 95px;
    }
}

@media only screen and (min-width: 1300px) {
    .showImages .listImages {
        height: 150px;
    }
}

.listImagesNew {
    position: relative;
}

.listImagesNew::after {
    content: 'NEW';
    position: absolute;
    background-color: rgba(51, 51, 51, 0.45);
    color: #F2F2F2;
    padding: 5px;
    right: 0;
    border-radius: 0 5px 0 0;
}


/*=================CONTENT=================*/

.content {
    padding: 10px;
}

.content .content-head {
    overflow: hidden;
    padding-bottom: 15px;
}

.content .content-head .nav-page {
    float: left;
    overflow: hidden;
    display: flex;
}

.content .content-head .nav-page .title {
    float: left;
    padding: 0 10px;
    font-size: 1.3em;
}

.content .content-head .nav-page .nav-title {
    display: none;
    float: left;
    margin-left: 10px;
}

.content .content-head .nav-page .nav-title a {
    margin: 0 5px;
}

.content .content-head .header-content_option {
    float: right;
    margin-top: 8px;
}

@media only screen and (min-width: 768px) {
    .content .content-head .nav-page .title {
        border-right: 1px solid #333;
    }
    .content .content-head .nav-page .nav-title {
        display: flex;
        align-items: center;
        margin-top: 3px;
    }
    .content .content-head .header-content_option {
        margin-top: 0;
    }
}

.content .content-search {
    margin-bottom: 10px;
}

.content .content-search .row {}

.content .content-search .row .l {}

.content .content-search .row .l .subbox {
    margin-right: 5px;
}

@media only screen and (min-width: 1200px) {
    .content .content-search {
        overflow: hidden;
    }
    .content .content-search .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
    }
}

.content .content-search_stock .row .l {}

.content .content-search_stock .row .l select,
.content .content-search_stock .row .l input {
    width: auto;
}

.content .contant-search-product {
    padding-bottom: 10px;
}

.content .contant-search-product .col {
    padding-left: 10px;
    padding-bottom: 5px;
}

@media only screen and (min-width: 1200px) {
    .content .contant-search-product {
        display: flex;
        justify-content: flex-start;
        padding-bottom: 10px;
    }
}

.content-login {
    padding: 10px;
}

.content-login .logo {
    width: 180px;
    margin: 10px auto;
}

.content-login .content-login_form form .row .title {
    color: #000;
}

@media only screen and (min-width: 768px) {
    .content-login {
        width: 450px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1.5px solid #333;
        border-radius: 5px;
        padding: 30px 20px;
    }
}


/*=================OPTION=================*/

.option .option-pc {
    display: none;
    overflow: hidden;
}

.option .option-mobile {
    position: absolute;
    right: 10px;
}

.option .option-mobile .icon {
    cursor: pointer;
}

.option .option-mobile .option-list {
    position: absolute;
    right: 20px;
    top: 0;
    border: 2px solid #333;
    padding: 5px;
    border-radius: 5px;
    background-color: #fff;
    z-index: 1;
    display: none;
}

.option .option-mobile .option-list .list {
    line-height: 30px;
    cursor: pointer;
    padding: 3px 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    white-space: nowrap;
}

.option .option-mobile .option-list .list:hover {
    background-color: #ddd;
}

.option .option-mobile .option-list i {
    margin-right: 5px;
}

.option .option-mobile .option-list .list-language {
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    padding: 3px 0;
    overflow: hidden;
}

.option .option-mobile .option-list .list-language .la {
    float: left;
    width: 50%;
}

.option .option-mobile .option-list .list-language .la:hover {
    background-color: #ddd;
}

.option .option-mobile .option-list .list-language .la.active {
    background-color: #ddd;
}

.option .option-pc .option-list {
    float: left;
}

.option .option-pc .option-list .list-language {
    overflow: hidden;
}

.option .option-pc .option-list .list-language .la {
    float: left;
    width: auto;
    background-color: #ddd;
    color: #333;
}

.option .option-pc .option-list .list-language .la.active {
    background-color: #333;
    color: #ffcb08;
}

.option .option-pc .option-list .list-language .la:nth-child(1) {
    border-right: none;
    border-radius: 5px 0 0 5px;
}

.option .option-pc .option-list .list-language .la:nth-child(2) {
    border-left: none;
    border-radius: 0 5px 5px 0;
}

.option .option-pc .option-list .list-language .la:hover {
    background-color: #333;
    color: #ffcb08;
}

@media only screen and (min-width: 768px) {
    .option .option-mobile {
        display: none;
    }
    .option .option-pc {
        display: block;
    }
}


/*=================CONTENT=================*/

.content .content-data {
    background-color: #f2f2f2;
    padding: 5px;
}

.content .content-data .content-data_head_row {
    padding: 10px;
    background-color: #333;
    margin: 10px 5px;
    border-radius: 5px;
    color: #ffcb08;
}

.content .content-data .content-data_row {
    padding: 8px;
    background-color: #fff;
    margin: 10px 5px;
    border-radius: 5px;
}


/*=================CELL2=================*/

.row-cell_2 {
    overflow: hidden;
}

.row-cell_2 .cell {
    float: left;
}

.row-cell_2 .cell-1 {
    width: 20%;
}

.row-cell_2 .cell-2 {
    width: 80%;
}

.cell-clear {
    clear: both;
}

.cell-config {
    overflow: hidden;
    text-align: right;
    margin-top: 8px;
    padding: 0 10px;
}

.cell-config .icon {
    float: right;
    margin-right: 5px;
}

.cell-config .icon i {
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .row-cell_2 .cell-1 {
        width: 10%;
        padding: 0 30px;
    }
    .row-cell_2 .cell-2 {
        width: 90%;
        padding: 0 10px;
    }
}

@media only screen and (min-width: 1200px) {
    .row-cell_2 .cell-1 {
        width: 10%;
        padding: 0 50px;
    }
    .row-cell_2 .cell-2 {
        width: 80%;
        padding: 0 10px;
    }
    .cell-clear {
        display: none;
    }
    .cell-config {
        width: 10%;
        float: left;
        margin-top: 0px;
    }
    .cell-config .row-line {
        display: none;
    }
    .cell-config .cell-block_icon {
        position: absolute;
    }
}


/*=================CELL4=================*/

.row-cell_4 {
    overflow: hidden;
}

.row-cell_4 .cell {
    float: left;
}

.row-cell_4 .cell-1 {
    width: 10%;
}

.row-cell_4 .cell-2 {
    width: 50%;
}

.row-cell_4 .cell-3 {
    width: 40%;
}

.row-cell_4 .cell-4 {
    width: 20%;
    display: none;
}

.row-cell_4:first-child .cell-clear {
    display: none;
}

.row-cell_4:first-child .cell-config {
    display: none;
}

@media only screen and (min-width: 768px) {
    .row-cell_4 .cell-1 {
        width: 10%;
        padding: 0 30px;
    }
    .row-cell_4 .cell-2 {
        width: 40%;
        padding: 0 10px;
    }
    .row-cell_4 .cell-3 {
        width: 30%;
        padding: 0 10px;
    }
    .row-cell_4 .cell-4 {
        width: 20%;
        padding: 0 10px;
        display: block;
    }
}

@media only screen and (min-width: 1200px) {
    .row-cell_4 .cell-2 {
        width: 30%;
    }
    .row-cell_4:first-child .cell-config {
        display: block;
    }
}


/*=================TABLE=================*/

.table-category {
    width: 100%;
    border-spacing: 0 10px;
    padding: 0 5px;
}

.table-category tr {
    box-shadow: 1px 1px 2px rgba(51, 51, 51, 0.15);
    background-color: #FFFFFF;
}

.table-category tr th {
    padding: 5px 10px;
    margin: 10px 5px;
    font-weight: normal;
    white-space: nowrap;
}

.table-category tr th:first-child {
    border-radius: 5px 0 0 5px;
}

.table-category tr th:last-child {
    border-radius: 0 5px 5px 0;
}

.table-category tr td {
    padding: 5px 10px;
    /* background-color: #fff; */
}

.table-category tr td:first-child {
    border-radius: 5px 0 0 5px;
}

.table-category tr td:last-child {
    border-radius: 0 5px 5px 0;
}

.table-category tr td .table-option .icon {
    margin-right: 5px;
    cursor: pointer;
}

.table-category tr.success {
    background-color: #00c851;
}

.table-category tr.table-row_list_product:hover {
    background-color: #ccc;
}

.table-category tr.table-row_list_product td div {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.table-category tr.table-row_list_product td div:last-child {
    margin-bottom: 0;

}

.table-category .table-head {
    padding: 10px;
    background-color: #333 !important;
    margin: 10px 5px;
    border: 1px solid #333;
    border-radius: 5px;
    color: #ffcb08;
}

.table-category .table-head-black {
    background-color: #333 !important;
}

.table-category .table-head_inventory th:nth-child(1) {
    width: 10%;
}

.table-category .table-head_inventory th:nth-child(2) {
    width: 10%;
}

.table-category .table-head_inventory th:nth-child(3) {
    width: 45%;
}

.table-category .table-head_inventory th:nth-child(5) {
    width: 10%;
}

.table-category .table-head_inventory th:nth-child(5) {
    width: 15%;
}

.table-category .table-head_inventory th:nth-child(6) {
    width: 10%;
}


/* .table-category tr:nth-child(even) {
background-color: #f2f2f2;
} */

.table-quantity {
    min-width: 70px;
}

.table-quantity .quantity-minus {
    display: inline;
    cursor: pointer;
}

.table-quantity .quantity-text {
    display: inline;
    padding: 0 5px;
}

.table-quantity .quantity-plus {
    display: inline;
    cursor: pointer;
}

.table-quantity_option {
    min-width: 60px;
}

.table-quantity_option .icon {
    display: inline;
}

.table-list:hover {
    background-color: #ccc;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
}

.quo-quantity {
    display: flex;
    justify-content: center;
}

.quo-quantity .quantity-minus {
    float: left;
}

.quo-quantity .quantity-text {
    float: left;
    margin: 0 10px;
}

.quo-quantity .quantity-plus {
    float: left;
}

.block-point_status {
    overflow: hidden;
    display: table;
    text-align: center;
    min-width: 75px;
}

.block-point_status .point-status {
    float: left;
    margin-right: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.block-point_status .point-status_green {
    background-color: #00c851;
}

.block-point_status .point-status_red {
    background-color: #f44;
}

.block-point_status .point-status_orange {
    background-color: #f80;
}

.block-point_status .point-status_blue {
    background-color: #3399ff;
}

.list-product_quo .row-product_in_detail td,
.list-product_inv .row-product_in_detail td,
.list-product_po .row-product_in_detail td,
.list-product_delivery .row-product_in_detail td {
    padding-bottom: 10px;
    border-radius: 5px !important;
}

.list-product_quo .row-product_in_detail td .warp_spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}

.list-product_quo .row-product_in_detail td .warp_spec .title,
.list-product_inv .row-product_in_detail td .warp_spec .title,
.list-product_po .row-product_in_detail td .warp_spec .title {
    font-weight: 700;
    margin-bottom: 10px;
}

.list-product_quo .row-product_in_detail td .wrap_detail {
    width: 49%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

.list-product_quo .row-product_in_detail td .wrap_detail:nth-child(odd) {
    margin-left: 0.5%;
}

.list-product_quo .row-product_in_detail td .wrap_detail:nth-child(even) {
    margin-right: 0.5%;
}

.list-product_quo .row-product_in_detail td .wrap_detail span {
    min-width: 25px;
    text-align: center;
}

.list-product_quo .row-product_in_detail td .wrap_detail textarea {
    height: 50px;
}

.list-product_quo .row-product_in_detail td .wrap_detail .icon {
    margin: 0 5px;
}

.list-product_inv .row-product_in_detail td .warp_spec {
    margin-bottom: 5px;
}

.list-product_inv .row-product_in_detail td .wrap_detail,
.list-product_po .row-product_in_detail td .wrap_detail {
    margin-bottom: 5px;
}


/*=================DASHBOARD=================*/

.dashboard-sale {
    padding: 5px 10px;
    overflow: hidden;
}

.dashboard-sale .dashboard-block {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

.dashboard-sale .dashboard-block .title {
    padding: 10px;
    border-radius: 5px 5px 0 0;
}

.dashboard-sale .dashboard-block .input {
    padding: 10px;
}

.dashboard-sale .dashboard-block:nth-child(1) {
    background-color: #e6fff0;
}

.dashboard-sale .dashboard-block:nth-child(1) .title {
    background-color: #00cc52;
    color: #fff;
}

.dashboard-sale .dashboard-block:nth-child(2) {
    background-color: #fff9e6;
}

.dashboard-sale .dashboard-block:nth-child(2) .title {
    background-color: #ffcb08;
    color: #fff;
}

.dashboard-sale .dashboard-block:nth-child(3) {
    background-color: #e6f9ff;
}

.dashboard-sale .dashboard-block:nth-child(3) .title {
    background-color: #00bfff;
    color: #fff;
}

.dashboard-sale .dashboard-block:nth-child(4) {
    background-color: #fff2e6;
}

.dashboard-sale .dashboard-block:nth-child(4) .title {
    background-color: #ff8000;
    color: #fff;
}

@media only screen and (min-width: 768px) {
    .dashboard-sale .dashboard-block:nth-child(1) {
        width: 50%;
        float: left;
    }
    .dashboard-sale .dashboard-block:nth-child(2) {
        width: 49%;
        float: left;
        margin-left: 1%;
    }
    .dashboard-sale .dashboard-block:nth-child(3) {
        width: 50%;
        float: left;
    }
    .dashboard-sale .dashboard-block:nth-child(4) {
        width: 49%;
        float: left;
        margin-left: 1%;
    }
    .dashboard-sale .dashboard-block:nth-child(4) .input {
        overflow: hidden;
    }
    .dashboard-sale .dashboard-block:nth-child(4) .input .l {
        float: left;
        width: 50%;
    }
    .dashboard-sale .dashboard-block:nth-child(4) .input .r {
        float: left;
        width: 50%;
    }
}

@media only screen and (min-width: 1200px) {
    .dashboard-sale .dashboard-block:nth-child(1) {
        width: 25%;
    }
    .dashboard-sale .dashboard-block:nth-child(2) {
        width: 24%;
    }
    .dashboard-sale .dashboard-block:nth-child(3) {
        width: 24%;
        margin-left: 1%;
    }
    .dashboard-sale .dashboard-block:nth-child(4) {
        width: 24%;
    }
}

.dashboard-sale2 {
    border-radius: 5px;
    border: 1px solid #ccc;
    overflow: hidden;
    margin: 5px 10px;
    position: relative;
    margin-bottom: 15px;
}

.dashboard-sale2 .dashboard-block_title {
    padding: 10px;
    background-color: #ccc;
}

.dashboard-sale2 .dashboard-block_quo {
    height: 250px;
    background-color: #fff;
}

.dashboard-sale2 .dashboard-block_quo .dashboard-sale_overflow {
    height: 100%;
}

.dashboard-sale2 .dashboard-block_quo .dashboard-sale_overflow .dashboard-sale_list {
    padding: 5px 10px;
}

.dashboard-sale2 .dashboard-sale_detail {
    position: absolute;
    background-color: #333;
    width: 100%;
    height: 250px;
    top: 44px;
    left: 0;
    display: none;
}

.dashboard-sale2 .dashboard-sale_detail .dashboard-sale_overflow {
    height: 100%;
}

.dashboard-sale2 .dashboard-sale_detail .dashboard-sale_overflow .row {
    padding: 10px 10px 0 10px;
}

.dashboard-sale2 .dashboard-sale_detail .dashboard-sale_overflow .row:nth-child(2) {
    padding-top: 0;
}

.dashboard-sale2 .dashboard-sale_detail .dashboard-sale_overflow .row .title {
    color: #ffcb08;
}

.dashboard-sale2 .dashboard-sale_detail .dashboard-sale_overflow .row .input {
    color: #fff9e6;
}

.dashboard-sale2 .dashboard-sale_detail .dashboard-sale_overflow .row .dashboard-sale_detail_close {
    color: #ffcb08;
    text-align: right;
    cursor: pointer;
    font-size: 1.3em;
}

@media only screen and (min-width: 1200px) {
    .dashboard-sale2 {
        width: 31.8%;
        float: left;
    }
    .dashboard-sale2 .dashboard-block_quo {
        height: 350px;
    }
    .dashboard-sale2 .dashboard-sale_detail {
        height: 350px;
    }
}

@media only screen and (min-width: 1600px) {
    .dashboard-sale2 {
        width: 32.26%;
    }
}


/*=================SLIDE STATUS=================*/

.slide-status {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 99;
    display: none;
}

.slide-status .slide-status_content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 10px;
}

.slide-status .slide-status_content .slide-status_header {
    overflow: hidden;
    background-color: #333;
    color: #ffcb08;
    font-size: 1.3em;
    padding: 10px;
    border-radius: 5px 5px 0 0;
}

.slide-status .slide-status_content .slide-status_header .slide-status_title {
    float: left;
}

.slide-status .slide-status_content .slide-status_header .slide-status_close {
    float: right;
}

.slide-status .slide-status_content .slide-status_body {
    background-color: #f2f2f2;
    padding: 10px 40px;
    border-radius: 0 0 5px 5px;
    position: relative;
    overflow: hidden;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block .options1 {
    overflow: hidden;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block .options1 .option {
    width: 32.9%;
    float: left;
    margin-right: 0;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block .options2 .option {
    text-align: center;
    margin-right: 0;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block .options3 {
    overflow: hidden;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block .options3 .option {
    width: 50%;
    float: left;
    margin-right: 0;
    text-align: left;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block .options4 {
    overflow: hidden;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block .options4 .number {
    float: left;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block .options4 .icon {
    float: right;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block {
    display: none;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block.active {
    display: block;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block .row {
    margin: 10px 0;
    text-align: center;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block .buttons {
    text-align: center;
}

.slide-status .slide-status_content .slide-status_body .slide-status_block .buttons button {
    display: unset;
    margin-bottom: 10px;
}

.slide-status .slide-status_content .slide-status_body .slide-arrow_left {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-size: 1.7em;
}

.slide-status .slide-status_content .slide-status_body .slide-arrow_right {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    font-size: 1.7em;
}

@media only screen and (min-width: 400px) {
    .slide-status .slide-status_content {
        width: 400px;
    }
}


/*=================AUTO COMPLETE SEARCH=================*/

.auto-complete-search {
    position: relative;
}

.auto-complete-block {
    position: absolute;
    top: 35px;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    z-index: 1;
    background-color: #fff;
    display: none;
}

.auto-complete-block .auto-complete_overflow {
    height: 100%;
}

.auto-complete-block ul,
.auto-complete-block ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.auto-complete-block ul li:hover {
    background-color: #f2f2f2;
    cursor: pointer;
}

.auto-complete-block ul li:nth-child(1):hover {
    background-color: #fff;
    cursor: default;
}

.list-search-close {
    text-align: right;
    margin-right: 15px !important;
}

.wrap_product_search {
    clear: both;
    display: flex;
    padding: 10px 0;
}

.list-item-search .contant-search-product {
    padding: 5px;
}

.list-item-search .contant-search-product .col {
    margin-bottom: 5px;
}

.list-item-search .contant-search-product .col .title {
    padding: 5px 10px;
}

.slide-total-bill {
    color: #ffcb08;
}

.slide-total-bill>div {
    margin-bottom: 3px;
}

.slide-total-bill .wrap_subbox_total {
    display: flex;
    justify-content: flex-end;
}

.slide-total-bill .wrap_subbox_total .lable_total_invoice {
    width: 135px;
    text-align: left;
}

.slide-total-bill .wrap_subbox_total .value_total_invoice {
    width: 135px;
}

@media only screen and (min-width: 768px) {
    .slide-total-bill {
        text-align: right;
    }
}

.wrap_distributor {
    padding: 10px;
    color: #ffcb08;
}

.wrap_distributor .row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
}

.wrap_distributor .row div:nth-child(1) {
    margin-right: 3px;
}

.wrap_distributor .row div:nth-child(2) {
    margin-right: 3px;
}

.wrap_distributor .row .delete_distributor {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 3px;
}

.wrap_inv_cost {}

.wrap_inv_cost .row_inv_cost {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 3px;
}

.wrap_inv_cost .row_inv_cost .type_cost {
    width: 100px;
}

.wrap_inv_cost .row_inv_cost .title_cost {
    width: 160px;
}

.wrap_inv_cost .row_inv_cost .price_cost {
    width: 100px;
}

.wrap_inv_cost .row_inv_cost .delete_cost {
    width: 30px;
}

.wrap_distributor_email {}

.wrap_distributor_email .row_distributor_email {
    margin-bottom: 3px;
}

.wrap_distributor_email .row_distributor_email div:nth-child(1) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 3px;
}

.wrap_spec {}

.wrap_spec .row_spec {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 3px;
}

.wrap_spec .row_spec div:nth-child(1) {
    width: 20%;
}

.wrap_spec .row_spec div:nth-child(2) {
    width: 79%;
    margin-left: 1%;
}

.wrap_product_so {}

.wrap_product_so .row_product_so {
    margin-bottom: 5px;
}

.wrap_product_so .row_product_so .title {
    padding: 10px 10px 0 10px;
    background-color: #333;
    color: #ffcb08;
    float: left;
    border-radius: 5px 5px 0 0;
}

@keyframes spin {
    0% {
        animation-timing-function: cubic-bezier(0.3333, 0.3333, 0.6667, 0.6667);
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(1turn);
    }
}

.spin {
    animation: spin 1s infinite linear;
}

.wrap_tab {}

.wrap_tab .tab_title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wrap_tab .tab_title .title {
    padding: 10px;
    background-color: #F2F2F2;
    color: #333;
    border-radius: 0 5px 0 0;
    cursor: pointer;
}

.wrap_tab .tab_title .title.active {
    background-color: #333;
    color: #ffcb08;
    border-radius: 5px 5px 0 0;
}

.wrap_tab .tab_content {
    padding: 10px;
    border: 1px solid #333;
}

.wrap_tab .tab_content .tab_content_inner:nth-child(1) {
    display: block;
}

.wrap_tab .tab_content .tab_content_inner {
    display: none;
}

.wrap_serial td .row_serial {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wrap_serial td .row_serial div:nth-child(1) {
    width: 35px;
}

.dashborad {}

.dashborad .row {
    border-radius: 5px;
    padding: 0 0 10px 0;
    margin-bottom: 20px;
}

.dashborad .row .title {
    background-color: #333;
    border-radius: 5px 5px 0 0;
    color: #ffcb08;
    padding: 10px;
    font-size: 1.2em;
}

.dashborad .row_overview .data .chart_volum {
    width: 100%;
    margin-top: 10px;
}
.dashborad .row_overview .data .chart_volum .chart_option {
    display: flex;
    justify-content: end;
}

.dashborad .row_overview .data .chart_volum .chart_option button {
    margin-left: 5px;
}
.dashborad .row_overview .data .chart_volum .chart_title {
    font-weight: 700;
    margin-left: 5px;
    font-size: 20px;
}

.dashborad .row_overview .data_chart {
    display: grid;
    grid-gap: 5px;
    align-items: center;
}

.dashborad .row_overview .data_chart .item1 {
    order: 2;
}

.dashborad .row_overview .data_chart .item2 {
    order: 2;
}

.dashborad .row_overview .data_chart .item3 {
    order: 1;
}

@media only screen and (min-width: 768px) {
    .dashborad .row_overview {
        background-color: #F2F2F2;
    }
    .dashborad .row_overview .data_chart .item1 {
        order: 2;
    }
    .dashborad .row_overview .data_chart .item2 {
        order: 3;
    }
    .dashborad .row_overview .data_chart .item3 {
        grid-column-start: 1;
        order: 1;
        border-bottom: none;
    }
}

@media only screen and (min-width: 1024px) {
    .dashborad .row_overview .data_chart {
        grid-template-columns: 1fr 1fr;
    }
    .dashborad .row_overview .data_chart .item1 {
        grid-column: 1;
        order: 2;
    }
    .dashborad .row_overview .data_chart .item2 {
        grid-column: 2;
        order: 2;
    }
    .dashborad .row_overview .data_chart .item3 {
        grid-column: 1/3;
        order: 1;
        border-bottom: 1px solid #333;
    }
}

@media only screen and (min-width: 1200px) {
    .dashborad .row_overview .data {
        background-color: #F2F2F2;
    }
    .dashborad .row_overview .data_chart {
        grid-template-columns: 1fr 1fr;
        /* height: 600px; */
        align-items: start;
    }
    .dashborad .row_overview .data_chart .item1 {
        grid-column: 1;
        order: 1;
    }
    .dashborad .row_overview .data_chart .item2 {
        grid-column: 2;
        order: 2;
    }
    .dashborad .row_overview .data_chart .item3 {
        grid-column: 3;
        order: 3;
        border-bottom: none;
    }
}

.data_quotation .wrap_quotation {
    padding: 5px 0;
    background-color: #f2f2f2;
}

.data_quotation .wrap_quotation .overflow_quotation,
.data .wrap_sale .overflow_quotation {
    height: 100%;
}

.data .wrap_sale {
    padding: 10px 0;
    height: 250px;
}

@media only screen and (min-width: 1200px) {
    .data .wrap_sale {
        height: 600px;
    }
}

.data .wrap_sale .row_head_sale {
    color: #ffcb08;
    background-color: #333;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 5px;
}

.data .wrap_sale .row_sale {
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 3px;
}

.data .wrap_sale .row_sale.active,
.data .wrap_sale .row_sale:hover {
    background-color: #ccc;
    cursor: pointer;
}

.list_search {
    position: absolute;
    width: 100%;
}

.list_search>.title {
    background-color: #ccc;
    color: #333;
}

.wrap_list_search {
    position: absolute;
    z-index: 1;
}

.wrap_list_search .inner_list_search {
    height: 400px;
    overflow-y: auto;
}

.wrap_list_search .inner_list_search .list_search_customer {
    width: 455px;
}

.wrap_list_search .inner_list_search .list_search_customer .customer_select {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px;
}

.list_search_customer {
    background-color: #666666;
    color: #F2F2F2;
}

.list_search_customer>.customer_title:hover {
    color: #ffcb08;
}

.fadeIn {
    animation: fadeIn 1.5s;
    -webkit-animation: fadeIn 1.5s;
    -moz-animation: fadeIn 1.5s;
    -o-animation: fadeIn 1.5s;
    -ms-animation: fadeIn 1.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.wrap_claim_detail {
    background-color: #f2f2f2;
    color: #333 !important;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.wrap_claim_detail .row_claim {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wrap_claim_detail .row_claim>.title {
    padding: 0 !important;
    margin-right: 5px;
    width: 180px;
    margin-bottom: 5px;
}

.wrap_discount {
    display: none;
}

.listCustomer {
    cursor: pointer;
    background-color: #666666 !important;
    color: #F2F2F2 !important;
}

.listCustomer:hover {
    color: #ffcb08 !important;
}

.input-express_list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 3px;
}

.wrap-row-c2,
.wrap-row-c3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 3px;
}

.wrap-row-c2 div:nth-child(1) {
    width: 95%;
}

.wrap-row-c2 div:nth-child(2) {
    text-align: center;
    width: 5%;
}

.wrap-row-c3 div:nth-child(1) {
    width: 2%;
}

.wrap-row-c3 div:nth-child(2) {
    width: 93%;
}

.wrap-row-c3 div:nth-child(3) {
    text-align: center;
    width: 5%;
}

.wrap_invoice_number > div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3px;
}

.wrap_invoice_number > div > i {
    margin-left: 5px;
}

/*=================MULTI CHOICE=================*/
.wrap_multi_choice {
    position: fixed;
    right: -200px;
    bottom: 50px;
    background-color: #333;
    color:#ffcb08;
    padding: 15px;
    border-radius: 5px;
    width: 200px;
}

.wrap_multi_choice .wrap_title {
    display: flex;
    justify-content: space-between;
}

.wrap_multi_choice .wrap_topic .topic {
    background-color: #F2F2F2;
    color: #333;
    padding: 3px 5px;
    margin: 3px 0;
    border-radius: 5px;
}

.wrap_multi_choice .open-multi_choice {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #333;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.anima-blink {
    animation: blink-text 1.9s linear 2;
}

@keyframes blink-text {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.so_detail {
    background-color: #333;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}

.so_detail .row {
    padding-bottom: 10px;
    color: #ffcb08;
}

.so_detail .row .title {
    padding-bottom: 10px;
}

.so_detail .row .input .input_row {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;

    color: #000;
    background-color: #FFF;

    font-size: 14px;
}

/*=================Warranty=================*/
.wrap_warranty_type {
    margin-bottom: 5px;
}

@media only screen and (min-width: 1200px) {
    .wrap_warranty_type {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
    }
}

.wrap_warranty_type>div:first-child {
    margin-bottom: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wrap_warranty_type>div:first-child>span:first-child {
    margin-right: 5px;
}

.wrap_warranty_type>div>div:first-child {
    margin-bottom: 5px;
}

.wrap_warranty_type .wrap_warranty_date_type2 {
    display: none;
}

.wrap_warranty_type .wrap_warranty_date_type1 .warranty_date_start,
.wrap_warranty_type .wrap_warranty_date_type1 .warranty_date_end {
    width: 100px;
}

.wrap_warranty_type .notification_alert,
.wrap_warranty_type .warranty_remove {
    margin-left: 5px;
}

@media only screen and (min-width: 1200px) {
    .wrap_warranty_type .wrap_warranty_date_type1 div,
    .wrap_warranty_type .wrap_warranty_date_type2 div {
        display: flex;
        align-items: center;
    }

    .wrap_warranty_type .wrap_warranty_date_type2 {
        margin-right: 10px;
    }

}

.wrap_product_group {
    background-color: #444;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

/*=================END Warranty=================*/

.ui-datepicker-month, .ui-datepicker-year {
    padding: 2px;
}

.wrap_list_product_invoice {
    
}

.wrap_list_product_invoice .wrap_product_invoice {
    padding: 5px 0;
}

.wrap_list_product_invoice .wrap_product_invoice .product_title {
    margin-bottom: 5px;
}