body {
    background-color: ghostwhite;
}

.row-plan {
    background-color: #68bcec;
    color: yellow;
    padding: 10px;
    margin-bottom: 10px;
    font-style: italic;
}

.url-bar {
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
    padding: 10px 15px;
    background-color: #CAE9F7;
}

.guide-line-bar {
    text-align: right;
    margin-bottom: 10px;
    margin-top: 0;
    width: auto;
    padding: 10px 15px;
    border-radius: 5px;
    background-color: #5bc0de;
    font-weight: bold;
}

.guide-line-bar a {
    color: #ffffff;
    text-decoration: none;
}

#zenbox_tab {
    top: 80% !important;
}

/* Override feedback icon position */
.form-horizontal .has-feedback .input-group .form-control-feedback,
.form-horizontal .has-feedback .input-group+.form-control-feedback {
    top: 0;
    right: -30px;
}

/* Menu */
.menu {
    background-color: #2d3e50;
    border-radius: 0px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
    height: 100%;
    padding: 0;
    position: fixed;
    right: 0;
    top: 0;
}

@media (max-width: 991px) {
    .nav-stacked>li {
        text-align: center;
    }

    .menu .menu-item,
    .menu span#publishLabel,
    .menu span.badge {
        display: none;
    }

    .menu .nav-pills>li.publish-top-shop {
        padding: 0 !important;
    }
}

@media (min-width: 992px) {
    .menu .menu-item {
        display: inline;
        padding-left: 10px;
    }
}

.menu .nav-pills>li>a {
    border-radius: 0;
}

.menu .nav-pills>li.publish-top-shop {
    padding: 10px 15px;
}

.menu .nav-pills>li.active>a,
.menu .nav-pills>li.active>a:hover,
.menu .nav-pills>li.active>a:focus {
    background-color: #34495e;
    color: #fff;
}

.menu .nav-pills>li>a:hover {
    border-radius: 0;
    background-color: #34495e;
    color: #fff;
}

.menu .nav-pills>li>a {
    border-radius: 0;
    background-color: #2d3e50;
    color: #c0c5cb;
}

/* End Menu */

/* Comamnd */
.btn-primary {
    border-radius: 25px;
    color: #fff;
    padding: 10px 15px;
}

.btn-success {
    border-radius: 25px;
    color: #fff;
    padding: 10px 15px;
}

.btn-info {
    border-radius: 0;
    color: #fff;
    padding: 10px 15px;
}

.btn-warning {
    border-radius: 4px;
    color: #fff;
    padding: 10px 15px;
}

.btn-danger {
    border-radius: 25px;
    color: #fff;
    padding: 10px 15px;
}

.btn-cancel {
    background-color: #ccc;
    border-color: #ccc;
    border-radius: 25px;
    color: #fff;
    padding: 10px 15px;
}

.btn-cancel:hover,
.btn-cancel:focus,
.btn-cancel:active {
    background-color: #6a757f;
    border-color: #6a757f;
    color: #fff;
    padding: 10px 15px;
}

.badge {
    background-color: #479ccf;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    min-width: 10px;
    padding: 3px 7px;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}

.command-btn {
    float: right;
    margin-left: 5px;
}

.menu-btn {
    float: right;
}

.btnTip {
    float: left;
    margin-left: 5px;
}

.btnVideo {
    float: left;
    margin-left: 5px;
}

.nav .nav-pills .publishShop {
    width: 100%;
}

.command-bar .publishShop {
    float: left;
}

.command-bar {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

/* Comamnd */

/* Carousel */
.carousel-control {
    width: 4%;
}

.carousel-control.left,
.carousel-control.right {
    margin-left: 15px;
    background-image: none;
}

@media (max-width: 767px) {
    .active>div {
        display: none;
    }

    .active>div:first-child {
        display: block;
    }

    .active>div:nth-child(2) {
        display: block;
    }

    .carousel-inner .active.left {
        left: -100%;
    }

    .carousel-inner .next {
        left: 100%;
    }

    .carousel-inner .prev {
        left: -100%;
    }
}

@media (min-width: 767px) and (max-width: 992px) {
    .active>div {
        display: none;
    }

    .active>div:first-child {
        display: block;
    }

    .active>div:nth-child(2) {
        display: block;
    }

    .carousel-inner .active.left {
        left: -50%;
    }

    .carousel-inner .next {
        left: 50%;
    }

    .carousel-inner .prev {
        left: -50%;
    }
}

@media (min-width: 992px) {
    .carousel-inner .active.left {
        left: -25%;
    }

    .carousel-inner .next {
        left: 25%;
    }

    .carousel-inner .prev {
        left: -25%;
    }
}

/* End Carousel */

/* A Gift For You */
a.a-gift-for-you,
a.a-gift-for-you:hover {
    color: #F400FF !important;
    font-weight: bold;
    text-transform: uppercase;
    animation: pulse 1s ease infinite alternate;
    -webkit-animation: pulse 1s ease infinite alternate;
    cursor: pointer;
}

@keyframes pulse {

    0%,
    100% {
        color: #F400FF;
    }

    50% {
        color: orange;
    }
}

#gift-for-you button.close {
    position: absolute;
    top: 2px;
    right: 5px;
    color: #fff;
    opacity: 1 !important;
}

#gift-for-you .slogan-image {
    max-width: 100%;
}

#gift-for-you a.get-it-now {
    position: absolute;
    top: 79.4%;
    left: 25.4%;
    display: block;
    width: 35.4%;
    height: 11.4%;
}

#gift-for-you a.get-it-now:hover {
    text-decoration: none;
}

@media (min-width: 768px) {
    #gift-for-you .modal-dialog {
        width: 560px;
    }
}

/* End A Gift For You */

/* Start Banner */
@font-face {
    font-family: 'Kaushan-Script';
    src: url('../../fonts/Kaushan-Script.ttf.woff') format('woff'),
        url('../../fonts/Kaushan-Script.ttf.svg#Kaushan-Script') format('svg'),
        url('../../fonts/Kaushan-Script.ttf.eot'),
        url('../../fonts/Kaushan-Script.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Amaranth-Regular';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/Amaranth-Regular.otf');
}

@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    src: local('Anton Regular'), local('Anton-Regular'), url(https://fonts.gstatic.com/s/anton/v9/o-91-t7-bPc7W26HmS2N4Q.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

.bc-banner {
    background: url('../../img/apps/banner/bg.jpg') repeat transparent;
    position: relative;
    min-height: 250px;
    overflow: hidden;
}

.bc-banner .left-top,
.bc-banner .left-bottom,
.bc-banner .right-top,
.bc-banner .right-bottom {
    position: absolute;
    display: block;
    height: auto;
    z-index: 1;
}

.bc-banner .left-top {
    width: 97px;
    left: -10px;
    top: -7px;
    -ms-transform: rotate(-29deg);
    -webkit-transform: rotate(-29deg);
    transform: rotate(-29deg);
}

.bc-banner .left-bottom {
    width: 160px;
    left: -20px;
    bottom: -14px;
}

.bc-banner .right-top {
    width: 89px;
    right: -9px;
    top: -8px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.bc-banner .right-bottom {
    width: 130px;
    right: -28px;
    bottom: -16px;
    -ms-transform: rotate(-17deg);
    -webkit-transform: rotate(-17deg);
    transform: rotate(-17deg);
}

.bc-banner .content {
    position: absolute;
    margin: 5px auto;
    z-index: 2;
    left: 0;
    right: 0;
    width: 80%;
}

.bc-banner .line-1 {
    font-family: 'Kaushan-Script';
    font-size: 26px;
    margin-bottom: 5px;
}

.bc-banner .line-2 {
    text-transform: uppercase;
    font-size: 30px;
    font-family: 'Anton';
    margin-bottom: 5px;
}

.bc-banner .line-3,
.bc-banner .line-4 {
    color: #fe1c77;
    font-family: 'Amaranth-Regular', sans-serif;
    font-size: 19px;
    margin-bottom: 5px;
}

.bc-banner .line-4 .percent {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 25px;
}

.bc-banner .line-4 .bold-text {
    font-weight: bold;
    font-size: 21px;
}

.bc-banner-btn {
    color: #e31f26;
    text-transform: uppercase;
    margin: 0 auto;
    padding: 16px 30px 14px;
    font-family: 'Anton', sans-serif;
    font-size: 16px;
    letter-spacing: 4px;
    display: inline-block;
    background: url('../../img/apps/banner/btn-bg.png') no-repeat transparent;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

.bc-banner-btn:active,
.bc-banner-btn:focus,
.bc-banner-btn:hover {
    color: #e31f26;
    text-decoration: none;
}

@media screen and (max-width: 1079px) {
    .bc-banner {
        min-height: 270px;
    }
}

@media screen and (max-width: 864px) {
    .bc-banner {
        min-height: 295px;
    }
}

@media screen and (max-width: 761px) {
    .bc-banner {
        min-height: 335px;
    }
}

@media screen and (max-width: 505px) {
    .bc-banner {
        min-height: 365px;
    }
}

@media screen and (max-width: 473px) {
    .bc-banner {
        min-height: 395px;
    }
}

@media screen and (max-width: 448px) {
    .bc-banner-btn {
        font-size: 15px;
    }
}

@media screen and (max-width: 434px) {
    .bc-banner-btn {
        font-size: 13px;
    }
}

@media screen and (max-width: 414px) {
    .bc-banner {
        min-height: 435px;
    }
}

@media screen and (max-width: 375px) {
    .bc-banner {
        min-height: 345px;
    }

    .bc-banner .line-1 {
        font-size: 24px;
    }

    .bc-banner .line-2 {
        font-size: 25px;
    }

    .bc-banner .line-3,
    .bc-banner .line-4 {
        font-size: 16px;
    }

    .bc-banner-btn {
        font-size: 15px;
        padding: 7px 10px 8px;
        letter-spacing: 2px;
    }

    .bc-banner .line-4 .percent,
    .bc-banner .line-4 .bold-text {
        font-size: 20px;
    }
}

@media screen and (max-width: 360px) {
    .bc-banner .line-1 {
        font-size: 22px;
    }

    .bc-banner .line-2 {
        font-size: 24px;
    }
}

@media screen and (max-width: 320px) {
    .bc-banner .line-1 {
        font-size: 20px;
    }

    .bc-banner .line-2 {
        font-size: 23px;
    }
}

/* End Banner */
.zEWidget-launcher {
    width: 127px !important;
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.scasp-loader {
    width: 50px;
    height: 50px;
}

table.table-bordered tbody th,
table.table-bordered tbody td {
    vertical-align: middle;
}

.content-border {
    border: 1px solid #ccc;
    background-color: #ffffff;
}

.content-border button {
    opacity: 0.8;
}

.content-border:hover button {
    opacity: 1;
}

.border-radius {
    border-radius: 4px;
}

.card-shadow:hover {
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
}

.btn-nomal {
    border-radius: 4px !important;
}

.btn-dark {
    background-color: #0f0f11 !important;
}

.btn:focus {
    outline: 0 !important;
}

.dataTable {
    width: 100% !important;
}

/**
 * NAV
 */
.bg-app-main {
    border: 1px solid #1f73b7;
    border-radius: 0;
    background-color: #1f73b7;
}

#nav-app-main>li>a:not(.nav-rate-us) {
    color: #fff !important;
}

#nav-app-main>li.active>a {
    color: black !important;
}

.new-feature {
    background-color: #E81123;
    margin-left: 3px;
    padding: 3px 6px;
    font-size: 12px;
    color: white;
    border-radius: 2px;
}

.navbar-brand {
    color: #fff !important;
}

.btn-location-action {
    background-color: #1f73b7;
    border: 1px solid #ccc;
    color: #fff;
    opacity: 1 !important;
}

.btn-location-danger {
    border-radius: 4px;
    color: #fff !important;
    padding: 10px 15px;
    background-color: #d9534f;
}

.btn-location-info {
    border-radius: 4px;
    color: #fff !important;
    padding: 10px 15px;
    background-color: #5bc0de;
}

.btn-delivery-rate-app {
    border-radius: 4px;
    color: #fff !important;
    padding: 10px 15px;
    background-color: #1fc8a9;
}

body::-webkit-scrollbar {
    width: 7px;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
    border-radius: 10px;
}

#bottom-command {
    margin-bottom: 100px !important;
}

.title-survey {
    color: #1f73b7;
}

/**
 * Modal
 */
.none-border {
    border: unset !important;
}

.border-radius-15 {
    border-radius: 15px;
}

.border-radius-25 {
    border-radius: 25px;
}

.font-weight-bold {
    font-weight: 600 !important;
}

.command-tags {
    margin-right: 5px;
}

/**
 * Color
 */
.text-red {
    color: #ff5252;
}

.text-warning {
    color: #ffc107 !important
}

.logo-color-1 {
    color: #1f73b7;
}

.logo-color-2 {
    color: #fecb34;
}

.card-image {
    border: 2px solid #1f73b7;
    padding: 5px;
    border-radius: 5px;
}

/**
 * Modal
 */
.sw-theme-arrows>.nav .nav-link.done {
    border-color: #1f73b7 !important;
    background: #1f73b7 !important;
}

.sw-theme-arrows>.nav .nav-link.done::after {
    border-left-color: #1f73b7 !important;
}

/**
 * Modal
 */
.modal {
    background-color: rgba(0, 0, 0, 0.7);
}

.cursor-pointer {
    cursor: pointer;
}

li.list-group-item>p>span {
    font-size: 15px !important;
}

.nav-rate-us {
    color: #fed330 !important;
}

/**
 * Delivery rate app modal
 */
#delivery-rate-app {}

#delivery-rate-app .modal-content {
    background-color: #1fc8a9;
}

#delivery-rate-app .close {
    opacity: 1;
    color: #ffffff;
}