@import url(https://fonts.googleapis.com/css?family=Nunito);

/* Modal ESTILOS */

.margin-top-none {
    margin-top: 0px !important;
}

.modal-body {
    padding: 30px;
    padding-top: 0px;
}

.modal-body hr {
    margin-top: -6px;
}

.modal-body .row {
    padding: 0px 10px;
}

.modal-body .example-title {
    margin-top: 20px;
    color: #6f6f6f;
}

@media (max-width: 768px) {
    .modal-body {
        padding: 15px;
        padding-top: 0px;
    }
    .modal-body .row {
        padding: 0px 3px;
    }
}

.table-md {
    width: 100%;
}

.table-md tr {
    border-top: 0px solid #fafafa;
    padding-right: 22px;
}

.table-md td {
    vertical-align: middle;
}

.alert .close {
    right: 30px !important;
    top: 10px !important;
}

.form-group .error {
    color: #ff4c52;
    font-size: 12px;
    margin-top: 5px;
}

/* END Modal ESTILOS */

/** color background */

.bg-g1 {
    background-color: #f2f2f2 !important;
}

/** END color background */

/** margin css */

.m-bottom-none {
    margin-bottom: 0px !important;
}

/** END margin css */

/** margin css */

.w-m10 {
    width: 220px !important;
}

/** END margin css */

/*
 * This section is used to implement css for the TABLE TECH class
 */
#tableTech {}

#tableTech table tr td:first-child {
    text-align: center;
}

#tableTech table tr td:last-child {
    text-align: center;
    background: #FAFAFA;
}

#tableTech table tr:first-child td {
    background: #FFF !important;
    font-weight: 580;
}

#tableTech table tr:hover:not(:first-child) td {
    background: #F3F5F6 !important;
}

#purchaseTech table tr:hover:not(:first-child) td {
    background: #F3F5F6 !important;
    color: #76838f;
}
/*arreglar hover de columnas*/

#tableTech table td:hover::after {
    background: #F3F5F6 !important;
}

#tableTech table .active {
    background-color: #f3fdff !important;
    border-left: 3px solid #337ab7 !important;
}

/*
 * This section is used to implement css for the LOADER
 */
.overlay {
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    z-index: 10000 !important;
    vertical-align: middle !important;
    content: "" !important;
}

.overlay .content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    color: #000;
    font-size: 30px;
}

.overlay .loader-grill,
.loader-grill::after,
.loader-grill::before {
    background: blue !important;
}

.ms-container {
    width: 100%;
}

#modalAddRecipeToStore .modal-body {
    padding: 0 30px 0px 30px;
}

#container-multi-select .example-buttons {
    margin: auto;
    width: 40%;
}
#container-multi-select .example-buttons .btn, .example-buttons .btn-group, .example-buttons .btn-group-vertical {
    margin: 0;
}

#container-multi-select .ms-container .ms-list {
    height: 260px;
}

/*
 * This section is used to implement css for the USER module
 */
#modalAssignPermissions {
    height: 100%;
    width: 100%;
}

#modalAssignPermissions .modal-dialog {
    height: 80%;
    width: 70%;
    display: flex;
    max-width: 100%
}

#modalAssignPermissions .modal-header {
    height: 12%;
}

#modalAssignPermissions .modal-body {
    height: 76%;
}

#modalAssignPermissions .panel {
    height: 100%;
}

#modalAssignPermissions .panel .panel-body {
    height: 100%;
    padding: 0px;
}

#modalAssignPermissions .panel .panel-body .row {
    height: 100%!important;
    margin: 0px;
}

#modalAssignPermissions .panel .panel-body .row .col-lg-12 {
    height: 100%;
}

#modalAssignPermissions .panel .panel-body .row .col-lg-12 .example-wrap {
    height: 100%;
}

#modalAssignPermissions .panel .panel-body .row .col-lg-12 .example-wrap .example-title {
    height: 5%;
    margin: 0px;
}

#modalAssignPermissions .panel .panel-body .row .col-lg-12 .example-wrap .example {
    height: 80%;
    margin: 0px;
}

#modalAssignPermissions .panel .panel-body .row .col-lg-12 .example-wrap .example-buttons {
    height: 15%;
    text-align: center;
}

#modalAssignPermissions .panel .panel-body .row .col-lg-12 .example-wrap .example-buttons button {
    height: 90%;
    margin: 0% 2%;
    max-height: 50px;
}

#modalAssignPermissions .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container {
    height: 100%;
}

#modalAssignPermissions .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable {
    height: 100%;
}

#modalAssignPermissions .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selection {
    height: 100%;
}

#modalAssignPermissions .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable ul {
    height: 90%;
}

#modalAssignPermissions .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selection ul {
    height: 90%;
}

#modalAssignPermissions .panel .panel-body .ms-container {
    width: 100% !important;
}

#modalAssignPermissions .modal-footer {
    height: 12%;
}

#assignPermissionsForm {
    height: 100%;
}

#tableUsers td {
    vertical-align: middle;
}

#modalAssignRole {
    height: 100%;
    width: 100%;
}

#modalAssignRole .modal-dialog {
 	height: 80%;
	width: 70%;
	display: flex;
	max-width: 100%
}

#modalAssignRole .modal-header {
    height: 12%;
}

#modalAssignRole .modal-body {
    height: 76%;
}

#modalAssignRole form {
    height: 100%;
    margin: 0px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    padding-bottom: 10px;
}

#modalAssignRole .row {
    height: 100%;
    margin: 0px;
}

#modalAssignRole .row .col-lg-12 {
    height: 100%;
}

#modalAssignRole .row .col-lg-12 .example-wrap {
    height: 100%;
}

#modalAssignRole .row .col-lg-12 .example-wrap .example-title {
    height: 5%;
    margin: 0px;
}

#modalAssignRole .row .col-lg-12 .example-wrap .example {
    height: 90%;
    margin: 0px;
}

#modalAssignRole .row .col-lg-12 .example-wrap .example-buttons {
    height: 10%;
    text-align: center;
}

#modalAssignRole .row .col-lg-12 .example-wrap .example-buttons button {
    height: 90%;
    margin: 0% 2%;
    max-height: 50px;
}

#modalAssignRole .row .col-lg-12 .example-wrap .example .ms-container {
    height: 100%;
}

#modalAssignRole .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable {
    height: 100%;
}

#modalAssignRole .row .col-lg-12 .example-wrap .example .ms-container .ms-selection {
    height: 100%;
}

#modalAssignRole .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable ul {
    height: 90%;
}

#modalAssignRole .row .col-lg-12 .example-wrap .example .ms-container .ms-selection ul {
    height: 90%;
}

#modalAssignRole .ms-container {
    width: 100% !important;
}

#modalAssignRole .modal-footer {
    height: 12%;
}

#modalAssignCompany {
    height: 100%;
    width: 100%;
}

#modalAssignCompany .modal-dialog {
 	height: 80%;
	width: 70%;
	display: flex;
	max-width: 100%
}

#modalAssignCompany .modal-header {
    height: 12%;
}

#modalAssignCompany .modal-body {
    height: 76%;
}

#modalAssignCompany form {
    height: 100%;
    margin: 0px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    padding-bottom: 10px;
}

#modalAssignCompany .row {
    height: 100%;
    margin: 0px;
}

#modalAssignCompany .row .col-lg-12 {
    height: 100%;
}

#modalAssignCompany .row .col-lg-12 .example-wrap {
    height: 100%;
}

#modalAssignCompany .row .col-lg-12 .example-wrap .example-title {
    height: 5%;
    margin: 0px;
}

#modalAssignCompany .row .col-lg-12 .example-wrap .example {
    height: 90%;
    margin: 0px;
}

#modalAssignCompany .row .col-lg-12 .example-wrap .example-buttons {
    height: 10%;
    text-align: center;
}

#modalAssignCompany .row .col-lg-12 .example-wrap .example-buttons button {
    height: 90%;
    margin: 0% 2%;
    max-height: 50px;
}

#modalAssignCompany .row .col-lg-12 .example-wrap .example .ms-container {
    height: 100%;
}

#modalAssignCompany .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable {
    height: 100%;
}

#modalAssignCompany .row .col-lg-12 .example-wrap .example .ms-container .ms-selection {
    height: 100%;
}

#modalAssignCompany .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable ul {
    height: 90%;
}

#modalAssignCompany .row .col-lg-12 .example-wrap .example .ms-container .ms-selection ul {
    height: 90%;
}

#modalAssignCompany .ms-container {
    width: 100% !important;
}

#modalAssignCompany .modal-footer {
    height: 12%;
}

/*
 * This section is used to implement css for the Inventories module
 */

#createProductGroupForm {}

#createProductGroupForm input::-webkit-outer-spin-button,
#createProductGroupForm input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

#createProductGroupForm input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

#updateProductGroupForm {}

#updateProductGroupForm input::-webkit-outer-spin-button,
#updateProductGroupForm input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

#updateProductGroupForm input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

#createProductCategoryForm {}

#createProductCategoryForm input::-webkit-outer-spin-button,
#createProductCategoryForm input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

#createProductCategoryForm input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

#updateProductCategoryForm {}

#updateProductCategoryForm input::-webkit-outer-spin-button,
#updateProductCategoryForm input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

#updateProductCategoryForm input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

#createProductForm {}

#createProductForm input::-webkit-outer-spin-button,
#createProductForm input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

#createProductForm input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

#updateProductForm {}

#updateProductForm input::-webkit-outer-spin-button,
#updateProductForm input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

#updateProductForm input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

#modalAssignPermissions {
    height: 100%;
    width: 100%;
}

#modalAssignPermissions .modal-dialog {
    height: 80%;
    width: 70%;
    display: flex;
    max-width: 100%
}

#modalAssignPermissions .modal-header {
    height: 12%;
}

#modalAssignPermissions .modal-body {
    height: 76%;
}

#modalAssignPermissions .panel {
    height: 100%;
}

#modalAssignPermissions .panel .panel-body {
    height: 100%;
    padding: 0px;
}

/*modal assign stores to agreement*/

#modalAssignStores {
    height: 100%;
    width: 100%;
}

#modalAssignStores .modal-dialog {
    height: 80%;
    width: 70%;
    display: flex;
    max-width: 100%
}

#modalAssignStores .modal-header {
    height: 12%;
}

#modalAssignStores .modal-body {
    height: 80%;
}

#modalAssignStores .panel {
    height: 100%;
}

#modalAssignStores .panel .panel-body {
    height: 100%;
    padding: 0px;
}

#modalAssignStores .panel .panel-body form {
    height: 100%;
    padding: 0px;
}

#modalAssignStores .panel .panel-body .row {
    margin: 0px;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 {
    height: 100%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap {
    height: 100%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example-title {
    height: 5%;
    margin: 0px;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example {
    height: 80%;
    margin: 0px;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example-buttons {
    height: 15%;
    text-align: center;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example-buttons button {
    height: 90%;
    margin: 0% 2%;
    max-height: 50px;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container {
    height: 100%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable {
    height: 100%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selection {
    height: 100%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable ul {
    height: 90%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selection ul {
    height: 90%;
}

#modalAssignStores .panel .panel-body .ms-container {
    width: 100% !important;
}

#modalAssignStores .modal-footer {
    height: 8%;
}

#assignPermissionsForm {
    height: 100%;
}

/*end*/

#tableInventories .select2-selection__clear {
    color: #fb5959;
    margin-left: 5px;
}

#updateStoreUserForm {
    visibility: hidden;
}

/* TABLE FOR ORDER PURCHASE FORM */

#modalCreatePurchase .modal-body {
    padding: 0px 20px !important;
}

#modalCreatePurchase .modal-body #exampleWizardFormContainer {
    margin: 0px !important;
    box-shadow: 0 0 0;
}

#modalCreatePurchase .modal-body #exampleWizardFormContainer .panel-body {
    padding: 10px 30px;
}

#tableOrderRquest {
    max-height: 340px;
    overflow-y: scroll;
    overflow-x: hidden!important;
}

/**/

#drawOrderRquest {
    max-height: 180px;
    overflow-y: scroll;
    overflow-x: hidden !important;
}

#drawOrderRquest .generate-button {
    margin: 10px 0px;
}

#tablePurchases .w-200 {
    width: 100px !important;
}

/*sumary styles*/

#sumary-purchase {
    margin-bottom: 10px;
}

#sumary-purchase .label {
    font-size: 15px;
    padding: 0px;
}

#sumary-purchase .label2 {
    font-size: 15px;
}

.counter.counter-inverse {
    display: grid;
}

#sumary-total {
    margin: 10px 0px;
    text-align: right;
}

#sumary-total .label {
    padding: 0px 0px 10px 30px;
    font-size: 30px;
    color: #85959D;
    display: inline;
    font-family: "Times New Roman", Times, serif;
}

#sumary-total .label2 {
    padding: 0px 20px 10px 5px;
    font-size: 30px;
    color: #697981;
    display: inline;
    font-family: "Times New Roman", Times, serif;
}

#exampleTable1 .progress {
    width: 70%!important;
}

.label2 {
    padding: 0px 20px 10px 5px;
    font-size: 20px;
    color: #697981;
    display: inline;
    font-family: "Times New Roman", Times, serif;
}

.over-div {
    width: 100%;
    height: 110px;
    position: absolute;
    top: 0px;
    background: white;
    z-index: 10;
    opacity: 0;
}

#reception_form {
    margin-top: 15px;
    margin-bottom: 15px;
}

.input-style {
    width: 100%;
    height: 35px;
    border: 2px solid #e4eaec;
    text-align: center;
    border-radius: 5px;
    margin-right: 5%;
}

.red-input {
    border: 2px solid #e97f7f;
}

#orderRequestSumary {
    max-height: 180px;
    overflow-y: scroll;
    overflow-x: hidden !important;
    width: 100%;
    padding: 2%;
}

#productSumary {
    max-height: 620px;
    overflow-y: scroll;
    overflow-x: scroll;
    width: 100%;
    padding: 4%;
}

#productSumary table {
    margin: 0px;
}

#productSumary .input-td {
    width: 15%;
    text-align: center;
}

#productSumary .input-td div input {
    width: 90%;
    text-align: center;
}

/*DAILY COUNTING*/

#filter_stores .select2-container {
    z-index: 1!important;
}

#filter_categories .select2-container {
    z-index: 1!important;
}

#filter_groups .select2-container {
    z-index: 1!important;
}

#modalInfoDailyCounting .modal-lg {
    max-width: 1000px;
}

#modalCreateDailyCounting .modal-lg {
    max-width: 1000px;
}

#dailyCountingInfoList {
    max-height: 470px;
    overflow-y: scroll;
    overflow-x: hidden !important;
    width: 100%;
    padding: 2px;
}

#dailyCountingCreationList {
    max-height: 470px;
    overflow-y: scroll;
    overflow-x: hidden !important;
    width: 100%;
    padding: 2px;
}

/*
#dailyCountingCreationList td{
    border: none;
    padding: 0px;
    padding-bottom: 5px;
    width: 500px;
} */

/* #dailyCountingCreationList td .media{
    border: 1px solid #e4eaec;
    padding: 10px;
    border-radius: 5px;
} */

/* #dailyCountingCreationList td .media .mb-5{
    text-align: center;
    margin-bottom: 5px !important;
}
#dailyCountingCreationList td .media .pr-20{
    padding-right: 0px!important;
} */

/* #dailyCountingCreationList td .media .avatar-lg{
    width: 100px;
}
#dailyCountingCreationList td .media .unit_name{
    text-align: center;
    font-size: 18px;
} */

#dailyCountingInfoList {
    max-height: 470px;
    overflow-y: scroll;
    overflow-x: hidden !important;
    width: 100%;
    padding: 2px;
}

/* #dailyCountingInfoList td{
    border: none;
    padding: 0px;
    padding-bottom: 5px;
    width: 500px;
}
#dailyCountingInfoList td .media{
    border: 1px solid #e4eaec;
    padding: 10px;
    border-radius: 5px;
}

#dailyCountingInfoList td .media .mb-5{
    text-align: center;
    margin-bottom: 15px !important;
}
#dailyCountingInfoList td .media .pr-20{
    padding-right: 0px!important;
}
#dailyCountingInfoList td .media .avatar-lg{
    width: 100px;
}
#dailyCountingInfoList td .media .unit_name{
    text-align: center;
    font-size: 18px;
} */

#infoPreparationForm .row {
    max-height: 350px;
    overflow-y: scroll;
    overflow-x: hidden !important;
    width: 100%;
    padding: 2%;
}

/*PREPARATIONS*/

#preparationCreationList {
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden !important;
    max-width: 100%;
}
#exampleWizardFormContainer .wizard-pane textarea{
    height: 100%;
    width: 100%;
    border: 1px solid #e4eaec;
}
#preparationCreationList input{
    width: 50%;
    text-align: center;
    border: none;
    border-bottom: 2px solid black;
}

#modalCreatePreparation .modal-body .panel {
    box-shadow: none !important;
    margin: 0px;
}

#modalInfoPreparation .form-control-label {
    font-weight: 600;
}

#modalInfoPreparation .form-group {
    margin: 0px;
}

#preparationInfoList {
    max-height: 350px;
    overflow-y: scroll;
    overflow-x: hidden !important;
    width: 100%;
}

#modalCompletePreraration .form-control-label {
    font-weight: 600;
}

#modalCompletePreraration .form-group {
    margin: 0px;
    text-align: center;
}

#modalCompletePreraration .blockquote {
    width: 100%;
}

/** CSS MODAL DEFAULT */

.btn-omitir {
    background: none;
    border: 0;
    color: #a8a8a8;
}

.btn-omitir:hover {
    background: none;
    color: #272727;
}

.marginElement {
    padding: 5px 25px;
    padding-top: 0px;
    margin-bottom: 20px;
}

.overlay-modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
    cursor: pointer;
}

.overlay-modal .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    color: #000;
    width: 100px;
}

.counting-card{
    padding: 0% 4%;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 1%;
    margin-right: 5%;
}
.counting-card div{
    display: inline-block;
}
.counting-card span{
    width: auto;
    float: right;
    min-width: 20%;
}
.counting-card span button{
    width: 100%;
}
.counting-card input{
    width: 20%;
    float: right;
    text-align: center;
}

.counting-card-grid {
    display: grid;
    grid-template-columns: 50px 24% 130px 16% 10% 15%;
    grid-gap:14px;
    align-items: center;
    margin: 6px 30px;
    width: 100%;
    text-align: center;
}

.counting-card-grid span {
    word-break: break-all;
}

/** FIN CSS MODAL DEFAULT */

/* MODAL UPLOAD IMAGE*/

#modalUploadFileOrderRequest .modal-header {
    padding: 15px 40px 0px 25px;
}

#reception_file_or {
    padding: 0px 25px;
}

#reception_file_or .panel-body {
    padding: 15px 15px;
}

#reception_file {}

#reception_file .panel .panel-body {
    text-align: left;
}

/**
* Transfers
*/

#exampleWizardFormContainer {
    margin: 0px !important;
    box-shadow: 0 0 0;
}

#modalCreateTransfer .dataSelect li {
    height: 90px !important;
}

#modalCreateTransfer .dataSelect li input {
    width: 130px;
    border-radius: 5px;
    text-align: center;
}

#modalCreateTransfer .dataSelect li img {
    height: 70px !important;
    width: auto !important;
}

#transferInfoList {
    width: 100%;
    text-align: center;
}

/** Progress bar purchases */

.progress_pur {
    height: 10px;
}

.table_items {}

.table_items tr:first-child {
    background-color: #e7ecee;
}

.table_items tr:hover td {
    background-color: rgb(245, 246, 247);
}

.table_items tr {
    border-bottom: #ececec solid 1px;
}

#loadSupplierDocumentsList table .panel-body {
    padding: 0px!important;
    text-align: center;
}

/* TableTech styles */

.btn-mt {
    padding: .286rem;
    font-size: .858rem;
    line-height: 1em;
}

.bmt-primary {
    color: #fff;
    background-color: #3e8ef7;
    border-color: #3e8ef7;
    box-shadow: none;
}

.bmt-success {
    color: #fff;
    background-color: #11c26d;
    border-color: #11c26d;
    box-shadow: none;
}

.bmt-danger {
    color: #fff;
    background-color: #ff4c52;
    border-color: #ff4c52;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bmt-info {
    color: #fff;
    background-color: #0bb2d4;
    border-color: #0bb2d4;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.table-mt {
    width: 100%;
}

.table-mt td {
    vertical-align: middle;
}

.table-mt .img-avatar {
    width: 50px;
    padding-right: 10px;
}

#orderRequestPanel {}

#orderRequestPanel .slidePanel-header {
    height: 170px;
}

.tags .profile-tag-button {
    color: #76838f;
    background-color: #fff;
    border-color: #fff;
}

.app-contacts .slidePanel #productSumary .user-info td {
    padding: 5px 0;
}

.card-prod {}

.card-prod .bg-content {
    background: #f1f4f5;
}

.card-prod .modal-body {
    background: #efefef;
}

.card-prod .card-title {
    margin-bottom: 3px;
    font-size: 1.3rem;
}

.card-prod .cost {
    color: #247cf0;
    font-weight: bold;
}

.card-prod .bg-red {
    background: #dc3545;
    color: #fff;
}

.card-prod .bg-c-red {
    color: #dc3545;
}

.card-prod .card-block {
    padding: 10px 20px;
}

.card-prod .card-footer {
    padding: 6px 20px;
    color: #8a8d8f !important;
    background: #fafafa;
    font-size: 13px;
}

.card-prod .title-content {
    margin-top: 0px;
    padding-top: 20px;
    padding-bottom: 10px;
}

.card-prod .img-address {
    position: absolute;
    right: 28px;
    height: 18px;
    top: 6px;
    opacity: 0.8;
    transform: rotate(180deg);
}

.card-prod .img-address-left {
    position: absolute;
    left: 28px;
    height: 18px;
    top: 6px;
    opacity: 0.8;
}

.card-prod .timeline-period {
    line-height: 28px;
    padding: 5px;
    background: #efefef;
}

.card-prod .name-product {
    font-size: 16px;
    font-weight: bold;
    padding: 6px 25px;
    color: #484848;
}

.card-prod .quant-product {
    font-weight: bold;
    font-size: 17px;
}

.card-prod .timeline::before {
    background-color: #dbdbdb;
}

@media (max-width: 768px) {
    .card-prod .timeline-item {
        margin-bottom: 10px;
        margin-top: 10px !important;
    }
    .card-prod .img-address {
        position: absolute;
        left: 28px;
        height: 18px;
        top: 6px;
        opacity: 0.8;
        transform: rotate(0deg);
    }
    .card-prod .timeline-period {
        background: none;
        margin-bottom: 7px;
    }
}

#transferPanel {}

#transferPanel .slidePanel-header {
    height: 250px;
}
.app-contacts #transferPanel .slidePanel-header .avatar {
    width: 115px;
    padding-top: 20%;
}
#productTransferSumary{
    text-align: center;
}

#purchasesPanel {}
#purchasesPanel .slidePanel-header {
    height: 220px;
}

/**
* Order request logs
*/
.timeline-item .badge-default {
    color: #3e4854;
    background-color: #e4eaec;
    color: #76838f;
}
.timeline-item .badge-prumary {
    color: #fff;
    background-color: #3e8ef7;
}
.timeline-item .badge-danger {
    color: #fff;
    background-color: #ff4c52;
}
.timeline-item .badge-info {
    color: #fff;
    background-color: #0bb2d4;
}
.timeline-item .badge-success {
    color: #fff;
    background-color: #28a745;
}
.timeline-item .badge-warning {
    color: #fff;
    background-color: #eb6709;
}
.select2-dropdown{
    z-index: 10000!important;
}
#CountingPlanProfileInfo .selectEditProduct{
    max-height: 350px;
    overflow-y: scroll;
}
#modalCreatePreparation .modal-lg {
    max-width: 90%;
    max-height: 90%;
}
#countingPlansWizzard{
    margin-bottom: 0px!important;
}
#modalCreateCountingPlan .modal-footer{
    padding: 0px!important;
}
.selectEditProduct .dataSelect li{
    height: 75px;
}
@media only screen and (max-width: 768px) {
    #ui-datepicker-div{
        max-width: 600px;
        transform: translateX(-20%);
        text-align: center;
    }
    .app-contacts table > thead > tr > th, .app-contacts table > tbody > tr > th, .app-contacts table > thead > tr > td, .app-contacts table > tbody > tr > td {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
}
.inputDisabled{
    color: #76838f;
    padding: .429rem 1rem;
    font-size: 1rem;
    background-color: #f3f7f9;
    font-weight: 300;
    border: 1px solid #e4eaec;
    height: 30px;
    width: auto;
}
.inputEnabled{
    color: #76838f;
    padding: .429rem 1rem;
    font-size: 1rem;
    background-color: white;
    font-weight: 300;
    border: 1px solid #e4eaec;
    height: 30px;
    width: auto;
    display: initial;
}
.op_dash_counting{
    padding: 4% 20%;
    border-radius: 5px;
}
.op_dash_discard{
    padding: 8% 10%;
    border-radius: 0px;
}
.op_dash_or{
    text-align: center;
}
.op_dash_or .op_dash_icon{
    display: inline-flex;
}
.op_dash_or span{
    margin: 2%;
}
.op_dash_ico{
    text-emphasis: none;
}
#main table tr td{
    vertical-align: middle!important;
}
@media screen and (max-width: 540px) {
    .op_dash_icon{
        width: 40%;
        padding: 6% 5%;
    }
    .op_dash_discard{
        width: 100%
    }
    .store-dash-sumary .sumary-card{
        margin-right: 0px;
        margin-left: 0px;
    }

}
.slidePanel-right-lg{
    top: 66.01px;
    bottom: 0;
    width: 1000px;
}
.slidePanel-scrollable-lg{
    width: 100%;
}

/**
* Dashboard for stores
*/
.store-dash-preparations input{
    border-radius: 5px;
    width: 100px;
    height: 28px;
    font-size: 1em;
    text-align: center;
    float: left;
    line-height: 13px;
    color: rgba(0, 0, 0, 0.3);
}
.store-dash-preparations input .fa-search {
    position: absolute;
    top: 28px;
    left: 65%;
    font-size: 15px;
}
.store-dash-preparations .list-group.bg-inherit .list-group-item{
    background-color: white;
    padding: 10px 20px 0px 20px;
}
.store-dash-preparations .list-group.bg-inherit .list-group-item:first-child{
    padding-top: 20px;
}
.store-dash-preparations .list-group.bg-inherit .list-group-item:last-child{
    padding-bottom: 20px;
}
.store-dash-sumary{
    margin-bottom: 20px;
}
.store-dash-sumary .sumary-card{
    margin-bottom: 12px;
    background: white;
}
.store-dash-sumary .sumary-card img{
    width: 100%;
    height: auto;
    padding: 20px 10%;
    max-width: 100px;
}
.store-dash-sumary .sumary-card a:last-child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    background-color:#4ad991;
}
.store-dash-sumary .sumary-card .sumary-card-min-div{
    padding-top: 20px;
}
.sumary-card a{
    color: #76838f;
    text-decoration: underline;
}
.sumary-card .expand{
    border-top: 2px solid #f4f6f9;;
    padding: 5%;
    text-align: center;
    margin-bottom: 0px;
}
.sumary-card .btn-group{
    display: flex;
    justify-content: center;
    color: #3b86ff;
}
.sumary-card .btn-group a{
    color: #3b86ff;
}
.sumary-card #pendantRequests{
    background: white;
    color: #3b86ff;
}
.sumary-card .expand a{
    text-decoration: none;
}
.store-dash-trasfers{
    margin-bottom: 40px!important;
}
.store-dash-trasfers .store-dash-transfer-container{
    height: 100%;
    background: white;
    max-height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    margin: 0px;
}
.store-dash-trasfers .store-dash-transfer-container .transfer-container{
    margin: 0px;
    width: 100%;
    padding: 0px 20px 20px 20px;
}
.store-dash-trasfers .store-dash-transfer-container .transfer-container .row{
    margin: 0px;
    padding: 5% 0%;
    border-bottom: 2px solid #f4f6f9;
}
.store-dash-trasfers .store-dash-transfer-container .transfer-container .row:first-child{
    padding-top: 20px;
}
.store-dash-trasfers .store-dash-transfer-container .transfer-container .row:hover{
    background-color: #f4f6f9;
}
.store-dash-trasfers .store-dash-transfer-container .transfer-container .row a{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color:#4ad991;
    color: white;
}
.store-dash-trasfers .store-dash-transfer-container .transfer-container .row p{
    margin-bottom: 0px;
}
.store-dash-trasfers label,.store-dash-preparations label, .store-dash-sumary label{
    margin: 0px;
    padding: 12px 0px;
    font-size:18px;
    color: #000;
}
/**
* Order request reception
*/
.select_orders{
    padding-top: 20px;
}
.select_orders .order_request{
    padding: 0px 20px 20px 20px;
}
.select_orders .order_request .row{
    border: 2px solid #f4f6f9;
    border-radius: 5px;
    padding: 2%;
}
.select_orders .order_request .row:hover{
    background-color: #f4f6f9;
}
.select_orders .order_request .row button{
    background-color:#4ad991;
    color: white;
}
.select_orders .order_request .row p{
    margin-bottom: 0px;
}
.billing-info .list-group-item .icon{
    margin-right: 0px;
}
.billing-input{
    padding: 20px 20px 0px 20px;
}
.billing-input .media-body .mt-0{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#reception_file .panel{
    border: 2px solid rgba(0, 0, 0, 0.04);
    box-shadow: none;
}
#requestReception_reception .btn-success{
    color: #4ad991;
    border-color: #4ad991;
}
#requestReception_reception .btn-success:hover{
    color: white;
    background-color: #4ad991;
}
.reception-buttons{
    text-align: left;
    padding-top: 20px;
    border-top: 2px solid rgba(0, 0, 0, 0.04);
}
.modal-open #tableArticle .under-modal .select2-container{
    z-index: 1!important;
}
.creation_size{
    background-color: #F9F9F9;
    margin: 0px;
}
.creation_element{
    background-color: #F9F9F9;
    margin: 0px;
}
#listElements{
    max-height: 290px;
    overflow-y: scroll;
}
table .ui-sortable tr{
    cursor: all-scroll;
}
.purchasedashboardgreen{
    background-color: #4ad991!important;
    color: white;
}
.purchasedashboardred{
    background-color: #ff6565!important;
    color: white;
}
.purchasedashboardblue{
    background-color: #81c9ff!important;
    color: white;
}
.table-tech table tr:first-child{
    font-weight: 600;
}
#purchaseTech table tr td{
    text-align: center;
}
.mouse-company:hover{
    background-color: #D9E9FF;
}

/*
 * This section is used to implement css for assign agreements to a store modal
 */
 #modalAssignAgreements {
    height: 100%;
    width: 100%;
}

#modalAssignAgreements .modal-dialog {
    height: 80%;
    width: 70%;
    display: flex;
    max-width: 100%
}

#modalAssignAgreements .modal-header {
    height: 12%;
}

#modalAssignAgreements .modal-body {
    height: 80%;
}

#modalAssignAgreements .panel {
    height: 100%;
}

#modalAssignAgreements .panel .panel-body {
    height: 100%;
    padding: 0px;
}

#modalAssignAgreements .panel .panel-body form {
    height: 100%;
    padding: 0px;
}

#modalAssignAgreements .panel .panel-body .row {
    height: 100%!important;
    margin: 0px;
}

#modalAssignAgreements .panel .panel-body .row .col-lg-12 {
    height: 100%;
}

#modalAssignAgreements .panel .panel-body .row .col-lg-12 .example-wrap {
    height: 100%;
}

#modalAssignAgreements .panel .panel-body .row .col-lg-12 .example-wrap .example-title {
    height: 5%;
    margin: 0px;
}

#modalAssignAgreements .panel .panel-body .row .col-lg-12 .example-wrap .example {
    height: 80%;
    margin: 0px;
}

#modalAssignAgreements .panel .panel-body .row .col-lg-12 .example-wrap .example-buttons {
    height: 15%;
    text-align: center;
}

#modalAssignAgreements .panel .panel-body .row .col-lg-12 .example-wrap .example-buttons button {
    height: 90%;
    margin: 0% 2%;
    max-height: 50px;
}

#modalAssignAgreements .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container {
    height: 100%;
}

#modalAssignAgreements .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable {
    height: 100%;
}

#modalAssignAgreements .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selection {
    height: 100%;
}

#modalAssignAgreements .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable .ms-list {
    height: 90%;
}

#modalAssignAgreements .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selection .ms-list {
    height: 90%;
}

#modalAssignAgreements .panel .panel-body .ms-container {
    width: 100% !important;
}

#modalAssignAgreements .modal-footer {
    height: 8%;
}

#modalAssignStores {
    height: 100%;
    width: 100%;
}

#modalAssignStores .modal-dialog {
    height: 80%;
    width: 70%;
    display: flex;
    max-width: 100%
}

#modalAssignStores .modal-header {
    height: 12%;
}

#modalAssignStores .modal-body {
    height: 80%;
}

#modalAssignStores .panel {
    height: 100%;
}

#modalAssignStores .panel .panel-body {
    height: 100%;
    padding: 0px;
}

#modalAssignStores .panel .panel-body form {
    height: 100%;
    padding: 0px;
}

#modalAssignStores .panel .panel-body .row {
    height: 100%!important;
    margin: 0px;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 {
    height: 100%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap {
    height: 100%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example-title {
    height: 5%;
    margin: 0px;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example {
    height: 80%;
    margin: 0px;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example-buttons {
    height: 15%;
    text-align: center;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example-buttons button {
    height: 90%;
    margin: 0% 2%;
    max-height: 50px;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container {
    height: 100%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable {
    height: 100%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selection {
    height: 100%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selectable .ms-list {
    height: 90%;
}

#modalAssignStores .panel .panel-body .row .col-lg-12 .example-wrap .example .ms-container .ms-selection .ms-list {
    height: 90%;
}

#modalAssignStores .panel .panel-body .ms-container {
    width: 100% !important;
}

#modalAssignStores .modal-footer {
    height: 8%;
}
#assignPermissionsForm {
    height: 100%;
}

/*end*/
#dishDiscardFormContainer .ms-container{
    width: 100%;
    height: 350px;
}
#dishDiscardFormContainer .ms-container .ms-selectable{
    height: 100%;
}
#dishDiscardFormContainer .ms-container .ms-selection{
    height: 100%;
}
#dishDiscardFormContainer .ms-container .ms-list{
    height: 100%;
}

table.delivery-integrations thead th{
    font-size: 1.3rem;
}

table.delivery-integrations thead th img{
    margin-right: 7px;
}

table.delivery-integrations tbody td.dvprov-store-name div{
    display: flex;
    align-items: center;
    min-height: 125px;
}

/* BEGIN New title for modal «#modalCreateDiscardDish» discards for product */
#dishDiscardFormContainer .wizard-pane .example-wrap .d-flex .alert-warning {
    margin-bottom: 0;
}
#dishDiscardFormContainer .wizard-pane .example-wrap .d-flex .box-1 {
    padding-left: 0;
    max-width: 47%;
}
#dishDiscardFormContainer .wizard-pane .example-wrap .d-flex .box-2 {
    max-width: 47%;
    margin-left: 6%;
    padding-right: 0;
}
#dishDiscardFormContainer .wizard-pane .example-wrap .ms-selection .ms-elem-selection > div {
    padding-left: 5px;
    font-weight: bold;
    color: #656565;
}

/* END New title for discards for product */

.counting-card > input.red-input:valid {
    border: 1px solid #ebe9ed;
}

@media (max-width: 768px) and (min-width: 500px) {
    .panel-list{
        padding: 30px;
    }
    .panel-complete {
        width: 100%;
    }
}

@media (max-width: 425px) {
    .py-15 {
        padding-top: 15px!important;
        padding-bottom: 15px!important;
    }

    .ingredient-title {
        overflow: hidden;
        white-space: nowrap;
        width: 29%;
        text-overflow: ellipsis;
    }
    .panel-complete {
        width: 100%;
    }
}

@media (max-width: 375px) {
    .divisor{
        width: 100%;
    }

    .ingredient-title {
        width: 100%;
    }

    .counting-card {
        padding: 4%;
        display: inline-block;
    }

    .ingredient-title{
        width: 70%;
    }

    .counting-card input {
        width: 55%;
    }

    .panel-complete {
        width: 100%;
    }
}

@media (max-width: 320px) {

    .counting-card input {
        width: 45%;
    }
}

/* Arreglo factura lateral */

.slidePanel-right, .slidePanel-left {
    width: 75% !important;
}

.bill__product__info {
    padding: 0 !important;
    width: 55% !important;
}

.bill__image {
    height: 90% !important;
    width: 45% !important;
}

.bill__image__src {
    max-height:600px;
    object-fit: contain;
    width:100%;
}

.bill__info__container {
    margin-top: 15px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
}

.button__add_purchased__request {
    margin-bottom: 20px !;
}

/* end of comment */

/* Walkers Select */
.walkers-filter {
    position: absolute;
    right: 320px;
    transform: translate(0, 0px);
    z-index: 100;
}

/* Notifications Section */
.notification-messaje{
    width:100% !important;
    height: auto !important;
    word-wrap: break-word !important;
    white-space: normal;
}
.notification-noread{
    background-color:#ebeef0;
}
.notification-read{
    background-color: #ffffff;
}
.send_data{
    float: right;
}
/* END Notifications Section */

@media (max-width: 320px) {

    .walkers-filter {
        position: relative;
        right: 0;
    }
}
@media (max-width: 768px) {

    .walkers-filter {
        position: relative;
        right: 0;
        float: right;
    }
}

@media (min-width: 1280px) {

    .walkers-filter {
        position: relative;
        right: 40%;
    }
    #modalEditStoreMenu .general-menu-input{
        text-align:center;
    text-align:center;
        text-align:center;
        width: 100%;
    width: 100%;
        width: 100%;
        height: 100%
    }
    #modalEditStoreMenu .general-menu-input::placeholder{
        color: gray;
    }
    #modalCreateStoreMenu .general-menu-input{
        text-align:center;
    text-align:center;
        text-align:center;
        width: 100%;
    width: 100%;
        width: 100%;
        height: 100%
    }
    #modalCreateStoreMenu .general-menu-input::placeholder{
        color: gray;
    }

}

.btn .icon {
    width: auto;
    margin: 0 3px 0;
}

.div-radio-button-gray{
    background-color: #f9f9f9;
    border-radius: 5px;
    margin-left: 14px;
    padding: 6px 15px;
    border: 1px solid #e2e2e2;
    max-width: 47%;
}

.actions-status-Inactivo .bmt-danger {
    display: none;
}
.actions-status-Activo .bmt-success {
    display: none;
}