html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    /* padding-left: 15px;
    padding-right: 15px;  */
    padding-left: 50px;
    padding-right: 50px;
}

#ej2Tab.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    background-color: #08c;
}

.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: none;
}

text {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.BackgroundColor-Acumulados {
    background-color: #e1e8ff;
}

.annotation-chart {
    font-size: x-large;
    font-weight: 400;
    color: #337ab7;
}

.container-chart {
    margin-bottom: 20px;
}
/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

label.required:after {
    color: #A94442;
    content: ' *';
    display: inline;
}

.statusActivo {
    color: #00cc00;
    position: relative;
    top: 1px;
}


.statustemp.statusActivo {
    background-color: #ccffcc;
}

.statustxt.statusActivo {
    color: #00cc00;
}


.statustemp.statusActivo {
    width: 57px;
}


.statusInactivo {
    color: #e60000;
    position: relative;
    top: 1px;
}

.statustemp.statusInactivo {
    background-color: #ffd7cc;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
}

.statustxt.statusInactivo {
    color: #e60000;
}

.statusDisponible {
    color: #00cc00;
    position: relative;
    top: 1px;
}

.statustemp.statusDisponible {
    background-color: #ccffcc;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
}

.statustxt.statusDisponible {
    color: #00cc00;
}

.statustemp.statusOpcionado {
    background-color: yellow;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
}

.statustxt.statusOpcionado {
    color: orange;
}

.statustemp.statusPre-Separado {
    background-color: yellow;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
}

.statustxt.statusPre-Separado {
    color: orange;
}


.statustemp.statusSeparado {
    background-color: yellow;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
}

.statustxt.statusSeparado {
    color: orange;
}

.statustemp.statusSolicitado {
    background-color: yellow;
    width: auto;
    padding-left: 5px;
    padding-right: 5px;
}

.statustxt.statusSolicitado {
    color: orange;
}

.statustemp {
    position: relative;
    height: 19px;
    border-radius: 5px;
/*    text-align: center*/
}



.resultstemp {
    position: relative;
    height: 19px;
    border-radius: 5px;
    text-align: center;
    width: 64px;
}

    .resultstemp.negativecolor {
        background-color: #ffd7cc;
    }

    .resultstemp.positivecolor {
        background-color: #ccffcc;
    }

.resultstxt.positivecolor {
    color: #00cc00;
}

.resultstxt.negativecolor {
    color: #e60000;
}


.btn-altern-1 {
    color: #fff;
    background-color: #868e96;
    border-color: #868e96;
}

.btn-altern-1:active:hover {
    color: #fff;
    background-color: #727b84;
    border-color: #6c757d;
}

.btn-altern-2 {
    color: #fff;
    background-color: #7892c2;
    border-color: #4e6096;
}

    .btn-altern-2:active:hover {
        color: #fff;
        background-color: #476e9e;
        border-color: #4e6096;
    }


.myButton {
    background-color: #7892c2;
    border-radius: 28px;
    border: 1px solid #4e6096;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 17px;
    padding: 16px 31px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #283966;
}

.myButton:hover {
    background-color: #476e9e;
}

.myButton:active {
    position: relative;
    top: 1px;
}

.myCheckboxLabel {
    max-width: 100%;
    font-weight: 400;
    display: inline-block;
    margin-left: 10px;
    margin-top: 5px;
}


.record-with-errors {
    background-color: #F3C3C3;
}
/* ---------------------------------------------------------*/
/*            Begin @media  special conditions              */
/* ---------------------------------------------------------*/


/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

.customCss.e-rowcell {
    padding:2px;
    background-color: #ffd7cc;
    color: red;
}

.btn-Grid-Actions {
    padding: 4px 8px;
    font-size: 12px;
}

.deleteItem {
    margin-left: 4px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
}

.remarksbox {
    min-height: 90px;
    resize: none;
}


.control-section {
    min-height: auto;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

.e-responsive-header {
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* We need this css class for width of columns fine in syncfusion datagrids */
.e-grid .e-table {
    /* table-layout: inherit !important; */
    width: 100%;
    table-layout: fixed;
}

.e-grid .e-filtered::before {
    color: orangered !important;
}

/* We need this css class for change tabs */
.e-tab-wrap {
    background: #f1e5c3 !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    color: #000000 !important;
    border-radius: 3px !important;
}

.e-tab-header {
    margin-left: 15px;
}

.e-tab-text {
    color: #000000 !important;
}

.sectionTabHeaderTitle {
    margin-left: 15px;
    background: #f1e5c3 !important;
    width: 98%;
    padding-top: 3px;
}

.sectionRow {
    background: #f1f2f2;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: none;
    border-radius: 7px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.sectionRowTitle {
    background: #f1e5c3;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: none;
    border-radius: 7px;
    padding-bottom: 5px;
    padding-top: 7px;
    text-align: center;
}