﻿/* APPLICATION COLORS */
body{
    --main-color: #00975E;
    --lighter-green : #00A66E;
    --main-color-rgb: 0, 151, 94;
    --light-gray: #F2F2F4;
    --mid-gray: #E1DFE9;
    --dark-gray: #666666;
}

/* Bootstrap Validation Summary Override */
/* Bootstrap Validation Summary Override */
.validation-summary-valid {
    display: none;
}

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1rem;
}

.alert.validation-summary-errors {
    margin-bottom: 1rem;
}

.col-0 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4.166665%;
    flex: 0 0 4.166665%;
    max-width: 4.166665%;
    width: 4.166665%;
}

.col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
    width: 8.33333%;
}

.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666%;
    flex: 0 0 16.66666%;
    max-width: 16.66666%;
    width: 16.66666%;
}

.dataTables_empty {
    font-size: 1.5rem !important;
}

table.dataTable tbody tr.selected > * {
    box-shadow: inset 0 0 0 9999px #00A66E !important;
}

.opacity-0{
    opacity: 0;
}

/* Bootstrap-like additions */
.flex-even {
    flex: 1;
}

.flex-even-2 {
    flex: 2;
}

.flex-even-3 {
    flex: 3;
}

.h-0 {
    height: 0;
}

.gap-small {
    gap: 8px;
}
.gap-medium {
    gap: 16px;
}

.gap-huge {
    gap: 64px;
}

.hidden {
    display: none;
}

/* Reference classes, no implementation */
.base,
.needs-validation,
.flex-start,
.text-faded,
.app-container-demo,
.lang-js,
.lang-csharp,
.has-tooltip,
.has-popover

/* Keeps analyzers happy */
.js-waves-off,
.js-waves-on,
.js-get-date,
.js-collapse,
.js-modal-settings,
.js-filter-message,
.js-buttons,
.js-icon-class,
.js-icon-copy,
.js-bg-color,
.js-bg-gradient,
.js-bg-gradient-demo,
.js-bg-target

/* Small word wrap correction */
section > ol > li {
    word-break: break-all;
}

code {
    border: 1px solid silver;
    padding: 0.03rem 0.2rem !important;
}

pre.prettyprint {
    border-radius: 0.2rem;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}

.documentation h2 {
    color: var(--primary);
}

.documentation th:first-child,
.documentation th:nth-child(3) {
    width: 16%;
}

.documentation blockquote {
    margin-left: 1rem;
    padding: 1rem 1rem 0.01rem 1rem;
    font-weight: 400;
    border-radius: 0 4px 4px 0;
    background: #edf2f9;
    border-left: 3px solid var(--primary);
}

    .documentation blockquote.info {
        background: #edf2f9;
        border-left: 3px solid var(--info);
    }

    .documentation blockquote.warning {
        background: #fff4db;
        border-left: 3px solid var(--warning);
    }

    .documentation blockquote.danger {
        background: #fadeeb;
        border-left: 3px solid var(--danger);
    }

/* Enter custom CSS rules for your application here */

/* Put SWAL alerts on top of everything */
.swal2-container {
    z-index: 5000 !important;
}

.swal-scrollable-content {
    overflow-y: auto;
    max-height: 50vh;
}

/* Loader */
.loading {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: -webkit-fill-available;
    overflow: hidden;
    width: 100%;
    display: flex;
    background: radial-gradient(#AAAAAAAA, #AAAAAA00);
    justify-content: center;
    z-index: 1050;
}
    .loading em.fa.fa-spinner.fa-spin {
        position:relative;
        top:max(50% - 2rem);
        font-size:4rem;
        transform-origin:2rem 2rem;
    }

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #00A66E;
    background-color: #00A66E;
}
table.dataTable.table-bordered .selected td,
table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected,
table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected,
table.dataTable.stripe tbody > tr.even.selected, table.dataTable.stripe tbody > tr.even > .selected,
table.dataTable.display tbody > tr.even.selected, table.dataTable.display tbody > tr.even > .selected,
table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected
table.dataTable.display tbody > tr.selected > .sorting_2,
table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_2,
table.dataTable.table-bordered td.selected {
    color: white;
    background-color: #00A66E !important;
}


.modal-handle {
    height: 3rem;
    font-size: 1.5rem;
    padding: 0.5rem;
    position: absolute;
    color: #AAAAAA33;
    top: 10px;
    left: 10px;
    cursor: move;
    display: flex;
    right: 50px;
    flex-direction: row-reverse;
    border: 1px solid #AAAAAA33;
    border-radius: 5px;
    background-color: #AAAAAA22;
    align-items: center;
}
.modal-handle:hover {
    border: 2px dashed #00A66E;
    color: #00A66E;
}

.modal-xxl table thead .sorting:before,
.modal-xxl table thead .sorting_asc:before,
.modal-xxl table thead .sorting_desc:before,
.modal-xxl table thead .sorting_asc_disabled:before,
.modal-xxl table thead .sorting_desc_disabled:before,
.modal-xxl table thead .sorting:after,
.modal-xxl table thead .sorting_asc:after,
.modal-xxl table thead .sorting_desc:after,
.modal-xxl table thead .sorting_asc_disabled:after,
.modal-xxl table thead .sorting_desc_disabled:after {
    top: 0.3rem!important;
}
@media (min-width: 300px) {
    .modal-xxl {
        max-width: 300px;
    }
}
@media (min-width: 450px) {
    .modal-xxl {
        max-width: 450px;
    }
}
@media (min-width: 600px) {
    .modal-xxl {
        max-width: 600px;
    }
}
@media (min-width: 750px) {
    .modal-xxl {
        max-width: 750px;
    }
}
@media (min-width: 1000px) {
    .modal-xxl {
        max-width: 1000px;
    }
}
@media (min-width: 1200px) {
    .modal-xxl {
        max-width: 1200px;
    }
}
@media (min-width: 1300px) {
    .modal-xxl {
        max-width: 1300px;
    }
}
@media (min-width: 1400px) {
    .modal-xxl {
        max-width: 1400px;
    }
}
@media (min-width: 1500px) {
    .modal-xxl {
        max-width: 1500px;
    }
}
@media (min-width: 1600px) {
    .modal-xxl {
        max-width: 1600px;
    }
}
@media (min-width: 1700px) {
    .modal-xxl {
        max-width: 1700px;
    }
}
@media (min-width: 1800px) {
    .modal-xxl {
        max-width: 1790px;
    }
}
@media (min-width: 1900px) {
    .modal-xxl {
        max-width: 1890px;
    }
}
@media (min-width: 2000px) {
    .modal-xxl {
        max-width: 1990px;
    }
}

/* NAVIGATION TABS */

.nav.nav-tabs .nav-item{
    margin: 0;
}

.nav.nav-tabs .nav-item a{
    border: 0;
}

.nav.nav-tabs .nav-item a:hover{
    color: var(--lighter-green) !important;
}

.nav.nav-tabs .nav-item a.active{
    border-bottom: 2px solid var(--lighter-green);
    color: var(--lighter-green) !important;
}

/* Modal */
.modal-dialog-right .modal-header {
    border-top-right-radius: 0 !important;
}
.modal-dialog-right .modal-content {
    border-bottom-right-radius: 0 !important;
}

/* Buttons */
.btn {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1) !important;
    border-radius: 5px;
}

.btn-primary {
    background-color: var(--main-color);
    color: white;
}

.btn-white {
    background-color: white;
    color: var(--dark-gray);
    border: 1px solid var(--light-gray);
}

.btn-delete {
    background-color: white;
    color: red;
    font-size: 18px;
}

.btn-toggle {
    border-width: 2px;
    border-color: #ff00005d;
}

.btn-toggle.active {
    border-color: var(--main-color);
    border-width: 2px;
}

/* Inputs */
.form-control[readonly],
.form-control:disabled {
    background-color: var(--mid-gray);
}

.form-control {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Checkbox */
input[type='checkbox']{
    width: 24px;
    height: 24px;
}

input[type='checkbox'].small{
    width: 18px;
    height: 18px;
}

input[type='checkbox'].initial-size{
    width: initial;
    height: initial;
}

input[type='checkbox'].big{
    width: 32px;
    height: 32px;
}

/* Datatable short icons */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  scale: 1.3;
}

/* Width of datatable number rows to show select fix */
div.dt-button-collection,
div.dt-button-collection div.dropdown-menu {
    width: 100%;
}

/* Datatable search bar */
.dataTables_filter .input-group-text {
    background-color: transparent;
    border: none;
    padding-left: 1.75em !important;
}

.dataTables_filter .form-control {
    border: none;
    box-shadow: none;
}

.dataTables_filter {
    border: 1px solid #BDBDBD;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding-top: 3px !important;
}

.dataTables_filter > label {
    margin-bottom: 3px !important;
}

/* TEXT */
.text-main-color {
    color: var(--main-color);
}

/* ICONS */
em.clickable {
    cursor: pointer;
}

/* SEPARATORS */
.v-separator {
    border-left: 2px solid var(--light-gray);
}

.float-right {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* #region Sizing */
.max-vh-50 {
    max-height: 50vh;
}
/* #endregion Sizing */

.translate-middle {
    transform: translateY(-50%) translateX(-50%);
}

/* #region Design elements */
.small-circle {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
}
/* #endregion Design elements */

/* #region Position */
.top-0 {
    top: 0;
}

.left-100 {
    left: 100%;
}
/* #endregion Position */

/* #region gaps */
.gap-sm {
    gap: 8px;
}

.gap-md {
    gap: 16px;
}

.gap-lg {
    gap: 24px;
}

.gap-xl {
    gap: 32px;
}
/* #endregion gaps */

/* #region font sizes */
.fs-sm {
    font-size: 14px;
}

.fs-md {
    font-size: 16px;
}

.fs-lg {
    font-size: 18px;
}

.fs-xl {
    font-size: 22px;
}
/* #endregion font sizes */
