:root {
    --primary-color: #365e6d;
    --primary-color-hov: #365e6d47;
    --primary-color-light: #365e6d17;
    --dark-color-light: #70757d;
    --font-size-card: 18px;
    --font-size-label: 16px;
    --font-size-title: 28px;
    --font-size-default: 20px;
    --font-size-button: 18px;
    --max-card-width: 480px;
}

body {
    font-size: var(--font-size-default);
    font-family: 'Poppins', sans-serif;
}

div#contenedor-principal{
    padding-top: 32px;
    display: none;
}

/* ======================================= */
ul.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    background-color: white;
    z-index: 9999;
    position: absolute!important;
    list-style-type: none;
    border: 1px solid var(--dark-color-light);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

ul.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front > li {
    padding: 8px;
    cursor: pointer;
}

ul.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front > li:hover {
    background-color: var(--primary-color);
    color: white;
}

div.ui-helper-hidden-accessible {
    display: none!important;
}

div.dx-container {
    width: 100%;
    max-width: var(--max-card-width);
}

ol.breadcrumb {
    background-color: white;
    font-size: 16px;
}

ol.breadcrumb a {
    font-weight: bold;
    color: var(--primary-color);
}

.sv-shadow {
    -webkit-box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.34);
    box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.34);
}

.sv-shadow-hov:hover {
    -webkit-box-shadow: 4px 4px 40px 0px rgba(0,0,0,0.34);
    box-shadow: 4px 4px 40px 0px rgba(0,0,0,0.34);
}

/*===================================================*/

.btn {
    white-space: normal;
    font-size: var(--font-size-button);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-color-hov);
    border-color: var(--primary-color-hov);
    color: var(--primary-color);
}

.btn-primary:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-primary.disabled {
    background-color: var(--dark-color-light);
    border-color: var(--dark-color-light);
}

.btn-primary.disabled:hover {
    background-color: var(--dark-color-light);
    border-color: var(--dark-color-light);
    color: white;
}

/*===================================================*/

form div.drop-div {
    height: 200px;
    background-color: white;
    border: 4px dashed #ced4da;
    color: #495057;
    text-align: center;
}

/*===================================================*/

.modal-title,
.modal-body {
    font-size: var(--font-size-label);
}

.modal-title {
    font-weight: bold;
}

.sv-title {
    font-weight: bold;
    font-size: var(--font-size-title);
}

/*===================================================*/

i.fa {
    vertical-align: middle;
}

i.fa.fa-md {
    line-height: 0rem;
    font-size: 1.7em;
    vertical-align: middle;
    margin-right: 8px;
}

i.fa.fa-lg {
    line-height: 0rem;
    font-size: 2em;
    vertical-align: middle;
    margin-right: 6px;
}