@font-face {
    font-family: 'MarkPro';
    src: url(assets/fonts/MarkPro-ExtraLight.woff) format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url(assets/fonts/MarkPro-Light.woff) format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url(assets/fonts/MarkPro-Bold.woff) format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url(../fonts/MarkPro-Heavy.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url(../fonts/MarkPro-Black.woff) format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url(../fonts/MarkPro.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url(../fonts/MarkPro-Book.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'MarkPro';
    src: url(../fonts/MarkPro-Medium.woff) format('woff');
    font-weight: 600;
    font-style: normal;
}


body {
    font-family: 'MarkPro' !important;
}

h6 {
    margin-bottom: 0px;
}

table {
    font-family: 'MarkPro' !important;
}

.table>thead>tr>th {
    font-weight: 600 !important;
    font-size: 12px;
}

/*------------------Login Page ------------------*/
.login-image {
    background-image: url(../icon/Login.jpg);
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-image-rtl {
    background-image: url(../icon/Login-rtl.jpg);
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-image .form-select {
    background-color: transparent;
    color: white;
    border: none;
}

.login-image .form-select option {
    color: black;
}

.login-image .row {
    height: 100vh;
}

.login-form {
    vertical-align: middle;
    margin: 0 20%;

}

.login-form img {
    margin-bottom: 30px
}

.login-form label {
    font-size: 13px;
    color: #ECECEC;
    font-family: Mark Pro;
    font-weight: 500;
}

.login-form input {
    background: #161F28 0% 0%;
    border: none;
    border-radius: 15px;
    opacity: 1;
    height: 45px;
}

.login-form a {
    color: white;
}

.chip {
    display: inline-block;
    padding: 0 25px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-radius: 25px;
    background-color: #f1f1f1;
}

/*----------------------------------------------*/
.content-wrapper {
    /*background: transparent linear-gradient(0deg, #F8F8F8 0%, #FFFFFF 11%, #FFF4F4 79%, #FFF3F3 100%);*/
    background-image: linear-gradient(to right bottom, #fff3f3, #fef6f8, #fef9fc, #fefcfe, #ffffff);
}

.btn-dash-circle {
    border: 1px dashed #707070;
    color: #000000;
    background-color: transparent;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: 5px;
}

.form-label {
    font-weight: 600;
    line-height: normal;
    font-size: 12px;
}

.search-nav {
    width: 500px !important;
}

.nav-active {
    background: transparent linear-gradient(180deg, #EA2027 0%, #BA262B 100%) 0% 0% no-repeat padding-box !important;
    color: #ffffff !important;
    border-left: 0px solid rgba(89, 73, 214, 0) !important;
    box-shadow: 0px 5px 10px #F2617180 !important;
    border: none !important;

}

.nav-active a {
    color: #ffffff !important;
}

.border-none {
    border: none;
}

.border-bottom {
    border-bottom: 1px solid #434343;
    border-top: none;
    border-left: none;
    border-right: none;
}

.tab-icon {
    display: flex;
    background-color: #FEEDEF;
    padding: 10px 5px;
    border-radius: 15px;
    color: #4F1A1F;
    margin-bottom: 5px;
}

.active .tab-icon {
    display: flex;
    background-color: #ffffff;
    padding: 10px 5px;
    border-radius: 15px;
    color: #4F1A1F;
}

.btn-search-i {
    padding-right: 0px;
    margin-top: 1px;
}

.sidebar-menu li>a {
    display: flex;
    line-height: normal;
}

.sidebar-menu>li.header {
    background-color: transparent !important;
    padding: 10px 0px 0px 0px;
    border: none !important;
    border-left: 0px solid rgba(89, 73, 214, 0);
    box-shadow: none !important;

}

.red-container {
    border: 1px solid #F8A5AD;
    border-radius: 10px;
    background: transparent linear-gradient(180deg, #FEF2F4 0%, #FDE7EA 100%);

}

.gray-container {
    border: 1px solid #D4D4D4;
    border-radius: 10px;
    background: transparent linear-gradient(180deg, #E9E9E9 0%, #D4D4D4 100%);

}

.border-top {
    border-top: 1px solid #E9E9E9 !important;
}

.border-right {
    border-right: 1px solid #E9E9E9 !important;
}

/* Button styles */
.btn-rounded {
    border-radius: 10px !important;
    padding: 5px 10px;
}

.btn-check:checked+.btn-outline-secondary:focus,
.btn-check:active+.btn-outline-secondary:focus,
.btn-outline-secondary:active:focus,
.btn-outline-secondary.active:focus,
.btn-outline-secondary.dropdown-toggle.show:focus {
    box-shadow: none;
}

.btn-outline-secondary:hover {
    color: #000;
    background-color: #ffffff;
    border-color: #6c757d;
    box-shadow: none !important;
}

.btn-red {
    background: transparent linear-gradient(180deg, #EA2027 0%, #BA262B 100%);
    color: white;
}

.btn-red:hover {
    background: transparent linear-gradient(180deg, #EA2027 0%, #f1474c 100%) !important;
    color: white;
}

.btn-line-red {
    border: 1px solid #F26171 !important;
    color: #F26171 !important;
    background-color: white !important;
}

.btn-yellow {
    background: transparent linear-gradient(180deg, #FFDA46 0%, #FFCC00 100%);
    color: #000000 !important;
}

.btn-yellow:hover {
    background: transparent linear-gradient(180deg, #FFDA46 0%, #fbcd16 100%);
    color: #000000 !important;
}

.btn-black {
    background: transparent linear-gradient(180deg, #161F28 0%, #63696F 100%);
}

.btn-black:hover {
    background: transparent linear-gradient(180deg, #161F28 0%, #414346 100%);
    color: white;
}

.btn-rounded-line-red {
    border-radius: 60px !important;
    padding: 5px 10px;
    border: 1px solid #F26171;
    color: #F26171;
}

.btn-rounded-line-red:hover,
.btn-rounded-line-red:active,
.btn-rounded-line-red:focus {
    color: #ffffff !important;
    background: #ea2027;
}

.btn-special {
    border-radius: 10px;
    font-weight: 600;
}

.btn-special i {
    background-color: white;
    padding: 5px;
    font-size: 13px;
    width: auto;
    border-radius: 20px;
    font-weight: normal;
    box-shadow: 0px 3px 6px #F2617180;
    color: black !important;
}

.btn-special-bg {
    border-radius: 15px;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 16px;
}

.btn-special-bg:hover {
    background: transparent linear-gradient(180deg, #EA2027 0%, #BA262B 100%) !important;
    color: white !important;
}

.btn-special-bg::before {
    font-family: 'themify';
    content: "\e61a";
    background-color: white;
    color: #000000;
    padding: 10px;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 900;
    width: auto;
    border-radius: 20px !important;
    box-shadow: 0px 3px 6px #f2617180;
}

.btn-special-bg i {
    background-color: white;
    padding: 8px;
    font-size: 11px;
    width: auto;
    border-radius: 20px !important;
    box-shadow: 0px 3px 6px #F2617180;
}

.btn-special:hover {
    background: transparent linear-gradient(180deg, #EA2027 0%, #BA262B 100%) !important;
    color: white !important;
}

::-webkit-file-upload-button {
    background: transparent linear-gradient(180deg, #FBFBFB 0%, #EBEBEB 100%);
    border: none;
    padding: 8px 20px;
    border-radius: 7px;
    cursor: pointer;
}

.btn-rounded-yellow {
    border-radius: 60px !important;
    padding: 5px 10px;
    color: #333;
}

.btn-rounded-yellow:hover,
.btn-rounded-yellow:active,
.btn-rounded-yellow:focus {
    color: #000 !important;

}

/*-----------------------------*/
/*----------color--------------*/
.yellow {
    background: transparent linear-gradient(180deg, #FFDA46 0%, #FFCC00 100%);
}

.white {
    background: transparent linear-gradient(180deg, #FBFBFB 0%, #EBEBEB 100%)
}

.black {
    background: transparent linear-gradient(0deg, #161F28 0%, #63696F 100%);
    color: white;
}

.dark-red {
    background-color: #4F1A1F;
    color: white;
}

.light {
    background-color: #F5F6FD;
}

.badge {
    border-radius: 50px;
    cursor: pointer;
    margin: 0px 10px;
    font-weight: 600;
}

.badge-warning {
    background-color: #FFCC00 !important;
    color: black !important;

}

/*------------------------------*/
/*-----------modal-------------*/
.modal-content-rounded {
    border-radius: 25px;
}

.modal-content-rounded .modal-header {
    border-radius: 25px 25px 0 0;
}

/*bootstrap */
.input-group {
    width: auto;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background: transparent linear-gradient(180deg, #BD4A55 0%, #86323A 100%) 0% 0% no-repeat padding-box;
    box-shadow: 0px 18px 20px #F2617126;
    align-items: center;
}

.nav-pills .nav-link {
    align-items: center;
    background: #FEEDEF;
    border-radius: 18px;
    padding: 20px;
    height: 100%;
}

.nav-link:hover,
.nav-link:focus {
    color: #434343;
}

.accordion-button:not(.collapsed) {
    color: #000000;
    background-color: #ffffff;
}

/* button */
.float-btn {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: rgb(0, 0, 0);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
}

.btn {
    line-height: normal;
}

.my-float-btn {
    margin-top: 22px;
}

.tab-das {
    border-radius: 10px !important;
    padding: 30px 0px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0px 18px 20px #5151511A;
    background-color: white !important;
}

.tab-das-item {
    flex-grow: 1 !important;
    flex-basis: 0;
    margin: 0 15px;
}

.curve-input-btn {
    background-color: #D4D4D4;
    border-radius: 50px 0 0 50px;
}

.curve-input-btn button {
    padding-right: 0px !important;
}

.curve-input {
    background-color: #D4D4D4;
    border-radius: 0 50px 50px 0;
    border: none;
}

.curve-input:focus {
    background-color: #D4D4D4;
    border-radius: 0 50px 50px 0;
    border: none;
}

.curve-input button {
    padding: 10px;
}

.input-light {
    background-color: #f1f1f1;
    border: none;
    border: 1px solid #e9e9e9;
    border-radius: 10px;
}

.input-light:focus {
    border: 1px solid #F8F9FA;
}

.input-white {
    background-color: white;
    border: none;
    border: 1px solid white;
    border-radius: 10px;
}

.input-white:focus {
    border: 1px solid white;
}

.cursor-pointer {
    cursor: pointer;
}

.gray-lable {
    background: #D4D4D4;
    border-radius: 15px;
    opacity: 1;
    padding: 10px;
}

.list-none {
    list-style: none;
    padding: 0;
}

.flex-container-detail {
    padding: 0;
    margin: 15px;
    list-style: none;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.flex-container-detail .flex-item-title {
    flex-basis: 20vw;
    font-weight: 600;
}

.flex-container-detail-table {
    padding: 10px 20px;
    margin: 0px 11px;
    list-style: none;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.flex-container-detail-table .flex-item-title {
    flex: 0 0 auto;
    width: 40%;
    font-weight: 600;
}

.flex-container-detail-table .flex-item-body {
    flex: 0 0 auto;
    width: 60%;
}


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

/* color-card */
.color-card {
    border: 1px solid #707070;
    background-color: #ECECEC;
    border-radius: 14px;
}

.color-card .card-header {
    border-radius: 14px 14px 0 0;
    background-color: #434343;
    padding: 20px;
    color: white;
}

.color-card .card-header h6 {
    margin: 0px;
}

.small-card {
    background-color: white;
    border: 0.5px solid #000000;
    border-radius: 9px;
    padding: 10px 20px;
}

.small-card .sub {
    flex: 0 0 auto;
    width: 50%;
}

.chip {
    border: 1px solid #AFAFAF;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;

}

.chip-active {
    background-color: #434343;
    color: white;
}

.chip-black {
    color: white;
    padding: 5px 8px;
    background: transparent linear-gradient(0deg, #161F28 0%, #63696F 100%);
    border-radius: 5px;

}

.chip-black .ti-close:before {
    color: white;
    font-size: 12px;
}


.ml-0 {
    margin-left: 0px;
}

.mr-0 {
    margin-right: 0;
}

.nav-link {
    color: rgb(0, 0, 0);
}

.hamburger {
    color: white;
}


/*============================================*/
/*-----------------fix-table-------------------*/
/*============================================*/

/*horizontal table*/
.table-scroll {
    position: relative;
    max-width: 100%;
    margin-right: auto;
    overflow: hidden;
    border: 1px solid #E9E9E9;
}

.table-wrap {
    width: 100%;
    overflow: auto;
}

.table-scroll table {
    width: 100%;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
    font-weight: normal;
    text-transform: capitalize;

}

.table-scroll th,
.table-scroll td {
    padding: 0.5em 1.5em;
    border-bottom: 1px solid #E9E9E9;
    border-right: 1px solid #E9E9E9;
    background: #fff;
    white-space: nowrap;
    vertical-align: top;
    font-weight: normal;
    text-transform: capitalize;
}

.table-scroll thead,
.table-scroll tfoot {
    background: #f9f9f9;
    color: #fff;
}

.btn-aligner {
    display: inline-block;
}

.table-scroll tfoot .btn-aligner {
    border-bottom: none;
}

.rounded-btn {
    background-color: #000;
    padding: 0.5em;
    border-radius: 50px;
    position: relative;
    width: 100%;
    float: left;
    margin: 5px 0;
    color: #fff;
    border: 0;
}

/* status button on all orders page*/
.status-rud-btn {
    background-color: #000;
    padding: 0.5em;
    border-radius: 50px !important;
    width: auto !important;
    position: relative;
    float: left;
    margin: 5px 0;
    color: #fff;
    border: 0;
}

.clone {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.clone th,
.clone td {
    visibility: hidden
}

.clone td,
.clone th {
    border-color: transparent
}

.clone tbody th {
    visibility: visible;
    color: #fff;
    font-weight: normal;
}

.clone .fixed-side {
    border-bottom: 1px solid #86323A !important;
    background: #4F1A1F !important;
    visibility: visible !important;
}

.clone thead,
.clone tfoot {
    background: transparent;
}


.aligner {
    display: flex;
    align-items: center !important;
}

.accordion-button-plus::after {
    background-image: none !important;
    font-family: 'themify';
    content: "";
}

.accordion-button-plus:not(.collapsed)::after {
    content: "";
}

.accordion-button-plus::before {
    background-image: none !important;
    font-family: 'themify';
    content: "\e61a";
    width: 2.25rem;
    height: 1.25rem;
}

.accordion-button-plus:not(.collapsed)::before {
    content: "\e622";
}

/*------Special modal---*/
.modal-special-modal .modal-content {
    padding: 20px;
    border: none;
}

.modal-special-modal .modal-header {
    border-bottom: none;
    position: relative;
}

.modal-special-modal .modal-img {
    color: #fff;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: -40px;
    width: 150px;
    height: 140px;
    border-radius: 50%;
    z-index: 9;
    padding: 15px;
    background-repeat: no-repeat;
    background-position: center;
}

.OrderAccepted-img {
    background-image: url(../icon/OrderAccepted.png);
}

.OrderRejected-img {
    background-image: url(../icon/OrderRejected.png);
}

.OrderHold-img {
    background-image: url(../icon/OrderHold.png);
}

.delete-img {
    background-image: url(../icon/delete.png);
}

/*------End-Special modal---*/
.modal-transparent {
    background-color: transparent;
}

.tab-modal {
    background-color: white;
    width: 49.5%;
    text-align: center;
    border-radius: 20px 20px 0 0;
}

.tab-modal .active {
    background: transparent linear-gradient(180deg, #EA2027 0%, #BA262B 100%) !important;
    border: none;
    color: white !important;
    border-radius: 20px 20px 0 0;
}

.tab-modal a {
    transition: none !important;
}

.tab-modal:hover {
    background: transparent linear-gradient(180deg, #EA2027 0%, #BA262B 100%) !important;
    border: none;
    color: white !important;
}

.tab-modal a:hover {
    color: white !important;
}

.tab-modal .active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 0px;
    background: #F26171;
}

/*------Tab modal---*/


/*------Img Tooltip ---*/
.ccn-card {
    background: linear-gradient(180deg, #FBFBFB 0%, #EBEBEB 100%);
    border-radius: 15px;
    height: 190px;
    background-size: 100% 100%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.ccn-card-bg {
    position: absolute;
    right: -2px;
    bottom: -2px;
    opacity: 60%;
}

.img-tooltip {
    position: relative;
}

div.img-tooltip span {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    background: transparent;
    color: #fff;

}

div.img-tooltip:hover span {
    display: block;

}

.img-tooltip {
    font-size: 14px;
    font-weight: 600;
}

.sample-div {
    margin: 10px 19%;
}

.photo-scroll-h200 {
    height: 200px;
    overflow-y: scroll;
}

@media (max-width: 767.98px) {

    .table-scroll th,
    .table-scroll td {
        font-size: 12px;
    }

    .table>tbody>tr>td,
    .table>tbody>tr>th {
        font-size: 12px;
    }

    .tab-das {
        border: 1px solid #707070 !important;
        border-radius: 10px !important;
        padding: 10px 0px;
        font-size: 10px;
        font-weight: 600;
    }

    .tab-das-item {
        flex-grow: 1 !important;
        flex-basis: 2 !important;
        margin: 5px;
    }

    .flex-container-detail .flex-item-title {
        flex-basis: auto;
        font-weight: 600;
        flex-basis: 20vw;
    }

    .flex-container-detail {
        margin: 15px 0;
    }

    .flex-container-detail-table .flex-item-title {
        flex-basis: 30vw;
        font-weight: 600;
    }

    /*------------------Login Page ------------------*/
    .login-form {
        vertical-align: middle;
        margin: 0 5%;
    }

    .sample-div {
        margin: 10px;
    }

}

/*==================================================*/
/*=====================Vaishakh=====================*/
/*==================================================*/
.login-form .form-check {
    padding-left: 0 !important;
}

.flex-container-detail-table ul {
    padding: 0;
    list-style: none;
}

.special-text {
    color: #F26171 !important;
}

.accordion-button {
    font-family: "MarkPro", sans-serif;
    font-weight: 600 !important;
    color: #161F28;
}

.vehi-img img {
    width: 100%;
    padding: 1rem;
}

.red {
    background: transparent linear-gradient(0deg, #BA262B 0%, #EA2027 100%);
    color: white;
}

.special-drop select.form-select {
    line-height: 2 !important;
}

.cls-1 {
    fill: none;
    stroke: #727980;
    stroke-width: 0.3px;
}

.cls-2 {
    fill: url(#linear-gradient);
}

.cls-3 {
    fill: #161f28;
    font-size: 10px;
    font-family: MarkPro, Mark Pro;
}

.cls-4 {
    font-family: MarkPro-Light, Mark Pro;
    font-weight: 300;
}

.cls-5 {
    fill: #52575b;
    stroke: rgba(0, 0, 0, 0);
    stroke-miterlimit: 10;
}


.select2-container {
    min-width: 400px;
}

.select2-results__option {
    padding-right: 20px;
    vertical-align: middle;
}

.select2-results__option:before {
    content: "";
    display: inline-block;
    position: relative;
    height: 20px;
    width: 20px;
    border: 2px solid #e9e9e9;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 20px;
    vertical-align: middle;
}

.select2-results__option[aria-selected=true]:before {
    font-family: fontAwesome;
    content: "\f00c";
    color: #fff;
    background-color: #63696F;
    border: 0;
    display: inline-block;
    padding-left: 3px;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #eaeaeb;
    color: #272727;
}

.select2-container--default .select2-selection--multiple {
    margin-bottom: 10px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #f77750;
    border-width: 2px;
}

.select2-container--default .select2-selection--multiple {
    border-width: 2px;
}

.select2-container--open .select2-dropdown--below {

    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}

.select2-selection .select2-selection--multiple:after {
    content: 'hhghgh';
}

/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
    display: none;
}

.select-icon .placeholder {
    display: none;
}

.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before {
    display: none !important;
    /* content: "" !important; */
}

.select-icon .select2-search--dropdown {
    display: none;
}

/*remove button*/
.remove-btn {
    display: flex;
    justify-content: right;
}

.remove-btn button {
    background: #BA262B;
    border-radius: 5px;
    color: #fff !important;
    height: 26px;
    line-height: 26px;
    padding: 0 10px 0 20px;
    position: relative;
    margin: 0 3px 3px 0;
    text-decoration: none;
    -webkit-transition: color 0.2s;
    border: none !important;
}

.remove-btn button::after {
    background: #fff;
    border-bottom: 13px solid #fdf1f3;
    border-right: 10px solid #BA262B;
    border-top: 13px solid #fdf1f3;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
}

select.missing-box option:last-child {
    position: relative;
    background: #161F28;
    color: #fff;
    width: 100%;
    text-align: center;
    text-transform: capitalize !important;
    padding-top: 1em !important;
}


.cls-1 {
    fill: none;
    stroke: #727980;
    stroke-width: 0.3px;
}

.cls-2 {
    fill: url(#linear-gradient);
}

.cls-3 {
    fill: #161f28;
    font-size: 10px;
    font-family: MarkPro, Mark Pro;
}

.cls-4 {
    font-family: MarkPro-Light, Mark Pro;
    font-weight: 300;
}

.cls-5 {
    fill: #52575b;
    stroke: rgba(0, 0, 0, 0);
    stroke-miterlimit: 10;
}

.bar-chart-block {
    position: relative;
    width: 100%;
}

/******************************************/

/*.grafico {
    padding: 2rem 1rem 1rem;
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
}*/


[class^='eje-'] {
    position: relative;
    width: 100%;
    padding: 2rem 1rem 0 2rem;
    height: auto;
    margin-bottom: 0;
}

.eje-x {
    height: auto;
    position: relative;
    width: 100%;
    content: "";
    z-index: 9;
}

[data-ejeY]:before {
    content: attr(data-ejeY);
    display: inline-block;
    width: 2rem;
    text-align: right;
    line-height: 0;
    position: relative;
    left: -2.5rem;
    top: -1rem;
}

.eje-x li {
    width: auto;
    float: left;
    text-align: center;
}


/**************************
BAR-CHART
**************************/
.grafico.bar-chart {
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
    font-size: 80%;
    overflow-y: visible;
    overflow-x: scroll;
    z-index: 9;
}

.grafico.bar-chart ul li {
    list-style-type: none;
}

.bar-chart [class^='eje-'] {
    bottom: 0;
}

.bar-chart .eje-x {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.bar-chart .eje-y li {
    height: auto;
    border-top: 1px solid #f9f9f9;
    border-width: 100%;
    color: #000;
    padding: 0.5em 0;
}

.bar-chart .eje-x li {
    width: auto;
    position: relative;
    text-align: left;
}

.bar-chart .eje-x li i {
    display: block;
    padding-left: 1em;
    color: #000;
}

.bar-chart .eje-x li:before {
    content: '';
    position: absolute;
    bottom: 5.5em;
    width: 35%;
    left: 50%;
    transform: translate(-50%, 3em);
    border-radius: 5px;
    z-index: 99;
}

.bar-chart .eje-x li:after {
    content: '';
    position: absolute;
    bottom: 2rem;
    width: 1%;
    left: 50%;
    transform: translatex(-50%);
    height: auto;
    border-radius: 0;
    z-index: 9;
}

.bar-chart .eje-x li:after {
    background: #D4D4D4;
    height: 700%;
    z-index: 9;
    width: 1px;
}

.bar-chart .eje-x li.magic-bx1:before {
    background-image: linear-gradient(to bottom, #e9e9e9, #e4e4e4, #dedede, #d9d9d9, #d4d4d4);
    height: 180%;
    z-index: 99;
}

.bar-chart .eje-x li.magic-bx2:before {
    background-image: linear-gradient(to bottom, #e9e9e9, #e4e4e4, #dedede, #d9d9d9, #d4d4d4);
    height: 350%;
    z-index: 99;
}

.bar-chart .eje-x li.magic-bx3:before {
    background-image: linear-gradient(to bottom, #e9e9e9, #e4e4e4, #dedede, #d9d9d9, #d4d4d4);
    height: 530%;
    z-index: 99;
}

.bar-chart .eje-x li.magic-bx4:before {
    background-image: linear-gradient(to bottom, #e9e9e9, #e4e4e4, #dedede, #d9d9d9, #d4d4d4);
    height: 710%;
    z-index: 99;
}

/****************hover****************/
.bar-chart .eje-x li:hover.magic-bx1:before,
.bar-chart .eje-x li:hover.magic-bx2:before,
.bar-chart .eje-x li:hover.magic-bx3:before,
.bar-chart .eje-x li:hover.magic-bx4:before {
    background-image: linear-gradient(to bottom, #ff7070, #ff6a6a, #ff6464, #ff5e5d, #ff5757);
    cursor: pointer;
}

/****************active****************/
/*.bar-chart .eje-x li.active:before {
background-image: linear-gradient(to bottom, #ff7070, #ff6a6a, #ff6464, #ff5e5d, #ff5757);
}
*/


/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #E9E9E9;
    border-radius: 50px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #E9E9E9;
}


.special-scroller {
    overflow-y: scroll;
    height: 16em;
}

.line-charter {
    -webkit-animation: fadeIn 600ms cubic-bezier(0.57, 0.25, 0.65, 1) 1 forwards;
    animation: fadeIn 600ms cubic-bezier(0.57, 0.25, 0.65, 1) 1 forwards;
    opacity: 0;
    /*max-width: 640px;*/
    width: 100%;
}

.required .form-label:after {
    content: " *";
    color: red;
    font-size: 13px;
}

.fixed-table-200 {
    overflow-wrap: break-word;
    width: 200px;
    white-space: unset !important;
}

@-webkit-keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
.login-form input:not(:placeholder-shown) {
  color: #000 !important;
  background: #f1f1f1 !important;
}

.input-lighter {
    background: #fff !important;
    border: 1px solid #ccc;
    font-weight: 600 !important;
    color: #ff5668;
}
.text-box {
    color: #fff;
    margin-bottom: 1em;
}

.digit {
    width: 60px !important;
    height: 50px !important;
    margin: 5px;
    text-align: center;
    transition: 0.3s transform;
}
/*Product and services*/
.otp-boxer {
    width: 100%;
    display: flex;
}

.w100 {
    width: 100%;
}

.expandChildTable:before {
    /*     content: "+"; */
    display: block;
    cursor: pointer;
    font-weight: 700;
    font-size: 1em;
    content: "\f055";
    font-family: "FontAwesome";
    color: #f03f63;
}

.expandChildTable.selected:before {
    content: "\f056";
    font-family: "FontAwesome";
    color: #f03f63;
    /*      content: "-"; */
}

.childTableRow {
    display: none;
}

    .childTableRow table {
        border: 1px solid #dfdfdf;
    }

td.clock-limt {
    position: relative;
}

    td.clock-limt:after {
        position: absolute;
        top: 10px;
        left: 0;
        color: #F26171;
        content: "\f017";
        font-family: "FontAwesome";
    }

    td.clock-limt .tooltiptext {
        visibility: hidden;
        width: 100px;
        background-color: black;
        color: #fff;
        background: #0009;
        font-size: 12px;
        text-align: center;
        border-radius: 6px;
        padding: 2px;
        position: absolute;
        z-index: 1;
        top: 0;
    }

    td.clock-limt:hover .tooltiptext {
        visibility: visible;
    }

.bg-second {
    background-color: #7d7f8b !important;
    color: #ffffff;
}

.bg-third {
    background-color: #9a9ca7 !important;
    color: #ffffff;
}

.btn-width-12 {
    width: 12em !important;
}

.line-height-1 {
    line-height: 1.5;
}

tr.fulfilled {
    background: #fff7b2 !important;
}

.flx-ender {
    justify-content: flex-end !important;
}

.bg-rejected {
    background-color: #ffdce2 !important;
}

.width-reduced-input {
    width: 8em !important;
}

.chat .chat-history {
    padding: 20px 10px 10px 10px;
    border-bottom: 2px solid white;
    overflow-y: scroll;
    height: 380px;
    margin: 1em 0 0;
}

    .chat .chat-history .message-data {
        margin-bottom: 15px;
    }

    .chat .chat-history .message-data-time {
        color: #a8aab1;
        padding-left: 6px;
    }

    .chat .chat-history .message {
        color: #333;
        padding: 18px 20px;
        line-height: 26px;
        font-size: 16px;
        border-radius: 7px;
        margin-bottom: 30px;
        width: 90%;
        position: relative;
    }

        .chat .chat-history .message:after {
            bottom: 100%;
            left: 7%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-bottom-color: #f2eaae;
            border-width: 10px;
            margin-left: -10px;
        }

    .chat .chat-history .my-message {
        background: #f2eaae;
    }

    .chat .chat-history .other-message {
        background: #d4d4d4;
    }

        .chat .chat-history .other-message:after {
            border-bottom-color: #d4d4d4;
            left: 93%;
        }

.chat .chat-message {
    padding: 10px 30px;
}

    .chat .chat-message textarea {
        width: 100%;
        border: none;
        padding: 10px 20px;
        font: 14px/22px "Lato", Arial, sans-serif;
        margin-bottom: 10px;
        border-radius: 5px;
        resize: none;
    }

    .chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
        font-size: 16px;
        color: gray;
        cursor: pointer;
    }

   /* .chat .chat-message button {
        float: right;
        color: #94C2ED;
        font-size: 16px;
        text-transform: uppercase;
        border: none;
        cursor: pointer;
        font-weight: bold;
        background: #F2F5F8;
    }

        .chat .chat-message button:hover {
            color: #75b1e8;
        }*/

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.float-right {
    float: right;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.chat-history ul {
    margin: 0;
}

    .chat-history ul li {
        list-style: none;
    }

.align-box {
    display: flex;
    align-items: center;
}

.alfabetBox {
    display: none;
}

.voucher-block {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.voucher-box {
    width: 100%;
    justify-content: center;
    display: flex;
}

.digit-box {
    border-radius: 10px;
    border: 1px solid #cdcdcd;
}

#panel, #target {
    display: none;
}

.arabic-align {
    text-align: right;
}
.width-max {
    width: max-content;
}