/*
INDEX

    COLORS
    GENERAL
    CUSTOM JUMBOTRON
    TO MAKE THE CUSTOM CHECKBOX OF BOOTSTRAP BIGGER
    CUSTOMIZATIONS TO BOOTSTRAP
    HEADER
    LOADING LAYER
    BUTTONS
    PALETTES
    COOL COLLAPSE CARD
    MAIN NAVBAR
    COOL NAVBAR
    TABLE CUSTOM
    EDIT TABLE
    UPLOAD
    CUSTOM SIZING
    CUSTROM FONT SIZE
    PATCHES AND STUFF

*/


/* ---------------- COLORS ---------------- */
:root {
    --body-bkg: #F6F7FC;
    --null-color: #adbac5;
    --font-color: #707070;
    --bold-color: #4D4D4D;
    --navbar-start: #51cfc1;
    --navbar-end: #3570f0;
    --chem-purple-light: #9c8ef3;
    --chem-purple: #4B3BB6;
    --chem-purple-dark: #3828a5;
    --phy-red-light: #ff9e9f;
    --phy-red: #FF393C;
    --phy-red-dark: #e22326;
    --red-0: #ffe9e9;
    --red-1: #FFBEBE;
    --red-2: #FB8F86;
    --red-3: #EC6048;
    --red-4: #E63910;
    --red-5: #CC3D25;
    --green-0: #dfffe5;
    --green-1: #BEFFCA;
    --green-2: #85e183;
    --green-3: #52c12c;
    --green-4: #2BA800;
    --green-5: #688160;
    --orange-1: #FFD9AD;
    --orange-2: #FEB86F;
    --orange-3: #FB9530;
    --orange-4: #FF7F00;
    --orange-5: #E67E18;
    --blue-0: #e6fcff;
    --blue-1: #a2f1ff;
    --blue-2: #6ad3ea;
    --blue-3: #06B6D7;
    --blue-4: #00A0BE;
    --blue-5: #098db5;
    --yellow-0: #fff3d3;
    --yellow-1: #fae9bb;
    --yellow-2: #e6ce8c;
    --yellow-4: #d9aa1e;
}

/* ---------------- GENERAL ---------------- */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    background: var(--body-bkg);
}

h1, h2, h3, h4, h5, h6, p, span, label, th {
    color: var(--font-color);
}
.main-font-color {
    color: var(--font-color);
}

.font-weight-bold, th {
    font-weight: 600 !important;
    color: var(--bold-color);
}

.bg-body {
    background: var(--body-bkg);
}

/* LIMIT INPUTS WIDTH */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"],
input[type="number"],
select {
    max-width: 280px;
}

.form-control::placeholder { /* Firefox, Chrome, Opera */ 
    color: var(--null-color); 
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.title {
    font-weight: 600 !important;
    color: var(--bold-color);
    margin-top: 2rem;
}

.null-text {
    font-style: italic;
    font-weight: lighter;
}


/* Make the validation error of unobtrusive validation red */
.field-validation-error span{
    color: var(--red-4);
}

/* Cursor types */
.cursor-pointer{
    cursor: pointer !important;
}
.cursor-auto{
    cursor: auto !important;
}

/* Margin for the icons inside buttons, links and tittles */
button .fa, a .fa, h1 .fa, h2 .fa, h3 .fa{
    margin-right: 0.25rem;
}

/* Make an image a circle */
.img-circle {
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.img-responsive img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Responsive magic */
}

/* To the question mark that show a Tooltip with help info */
.info-mark {
    /*font-size: .8rem;
    vertical-align: top;
    cursor: pointer;*/
    cursor: pointer;

}
    .info-mark::after {
        content: '?';
        font-size: .8rem;
        vertical-align: top;
        cursor: pointer;
    }

code_in_text {
    font-family: "Courier New", Courier, monospace;
    background-color: #1E1E1E;
    padding: 3px;
    border-radius: 4px;
    overflow-x: auto;
    color: orangered;
}

.code-theme {
    background-color: #1E1E1E;
    font-family: monospace;
    border-radius: 5px;
    color: #D4D4D4;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
    .code-theme:focus {
        background-color: #272727;
        font-family: monospace;
        border-radius: 5px;
        color: #D4D4D4;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }


/* ---------------- CUSTOM JUMBOTRON ---------------- */
.cool-jumbotron { /* not so cool anymore, use the other ones */
    border-radius: 5px;
    background: #fff;
    padding: 1.5rem 2rem;
    margin: 0px;
}

.c-jumbotron-xl {
    border-radius: 5px;
    background: #fff;
    padding: 1.5rem 2rem;
    margin: 0px;
}

.c-jumbotron-lg {
    border-radius: 5px;
    background: #fff;
    padding: 0.8rem 1.5rem;
    margin: 0px;
}

.c-jumbotron-md {
    border-radius: 5px;
    background: #fff;
    padding: 0.5rem 1.2rem;
    margin: 0px;
}

.c-jumbotron-sm {
    border-radius: 5px;
    background: #fff;
    padding: 0.3rem 0.5rem;
    margin: 0px;
}

/* ---------------- TO MAKE THE CUSTOM CHECKBOX OF BOOTSTRAP BIGGER ---------------- */
.c-big-checkbox .custom-control-label::before {
    top: 0.6rem;
}
.c-big-checkbox .custom-control-label::after {
    top: 0.6rem;
}
.c-big-checkbox label{
    font-size: 1.2rem;
    font-weight: bold;
}
/* ---------------- CUSTOMIZATIONS TO BOOTSTRAP ---------------- */
.jumbotron {
    border-radius: 1rem;
    background: #fff;
}

.modal-body{
    padding: 1rem 2rem;
}

/* ---------------- HEADER ---------------- */
.c-header {
    /* d-flex flex-row mt-2rem */
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    margin-top: 2rem;
}

.c-header h2{
    /* font-weight-bold */
    font-weight: 600 !important;
    color: var(--bold-color);
    margin-bottom: 1.5rem;
}


.c-header .data-table th, .c-header .data-table td {
    font-size: 1.25rem;
    padding-bottom: 0.3rem;
}
.c-header .data-table th{
    padding-right: 1.5rem;
}


/* ---------------- LOADING LAYER ---------------- */
.loading-layer {
    width: 20rem;
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------- BUTTONS ---------------- */

.btn {
    height: max-content;
}
    .btn:disabled {
        cursor: default;
        opacity: 0.4;
    }

.btn-main {
    color: #fff;
    background-color: var(--blue);
    border-color: var(--blue);
}
    .btn-main:hover {
        color: #fff;
        background-color: var(--blue-dark);
        border-color: var(--blue-dark);
    }

.btn-main-nonfilled {
    color: var(--blue);
    background-color: transparent;
    border-color: var(--blue);
}
    .btn-main-nonfilled:hover {
        color: #fff;
        background-color: var(--blue-dark);
        border-color: var(--blue-dark);
    }


.btn-red {
    background-color: var(--red-3);
    color: white !important;
}
    .btn-red:hover {
        background-color: var(--red-5);
        color: white !important;
    }

.btn-green {
    background-color: var(--green-3);
    color: white !important;
}
    .btn-green:hover {
        background-color: var(--green-2);
        color: white !important;
    }

.btn-orange {
    background-color: var(--orange-3);
    color: white !important;
}
    .btn-orange:hover {
        background-color: var(--orange-5);
        color: white !important;
    }

.btn-blue {
    background-color: var(--blue-3);
    color: white !important;
}
    .btn-blue:hover {
        background-color: var(--blue-5);
        color: white !important;
    }
    
.btn-blue-nonfilled {
    color: var(--blue-5);
    background-color: transparent;
    border-color: 1px solid var(--blue-5);
}
    .btn-blue-nonfilled:hover {
        color: white;
        background-color: var(--blue-2);
        border-color: 1px solid var(--blue-5);
    }
    .btn-blue-nonfilled:focus {
        box-shadow: none;
    }
    .btn-blue-nonfilled.active {
        color: white;
        background-color: var(--blue-3);
        border-color: 1px solid var(--blue-5);
    }
    

    
.btn-phy-red {
    border: 1px solid var(--red-5);
    color: var(--red-5);
}
    .btn-phy-red:hover {
        background-color: var(--red-1);
        color: var(--red-5);
    }
.btn-chem-purple {
    border: 1px solid #6d25cc;
    color: #6d25cc;
}
    .btn-chem-purple:hover {
        background-color: #e7beff;
        color: #6d25cc;
    }
.btn-bio-turquoise {
    border: 1px solid #06ACB8;
    color: #06ACB8;
}

    .btn-bio-turquoise:hover {
        background-color: #C7ECEF;
        color: #06ACB8;
    }


/* ---------------- PALETTES ---------------- */

.palette-green {
    color: var(--green-4);
    background: var(--green-1);
}

.palette-red {
    color: var(--red-4);
    background: var(--red-1);
}

.palette-orange {
    color: var(--orange-4);
    background: var(--orange-1);
}

.palette-blue {
    color: var(--blue-4);
    background: var(--blue-1);
}

.palette-yellow {
    color: var(--yellow-4);
    background: var(--yellow-1);
}


.color-green{
    color: var(--green-4);
}
.color-red{
    color: var(--red-4);
}
.color-orange{
    color: var(--orange-4);
}
.color-blue{
    color: var(--blue-4);
}
.color-yellow {
    color: var(--yellow-4);
}


/* ---------------- COOL COLLAPSE CARD ---------------- */
.cool-collapse-card .card-header {
    background: #fff;
    height: 3rem;
    cursor: pointer;
    border-bottom: 0px;
    /* py-2 px-4 */
    padding: 0.5rem 1.25rem;
    /* row */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* align-items-center */
    -ms-flex-align: center !important;
    align-items: center !important;
}
    .cool-collapse-card .card-header:first-child {
        border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) calc(0.25rem - 1px) calc(0.25rem - 1px);
    }
    .cool-collapse-card .card-header .btn{
        height: 32px;
        min-width: 5rem;
        /* d-flex */
        display: -ms-flexbox;
        display: flex;
        /* align-items-center */
        -ms-flex-align: center !important;
        align-items: center !important;
        /* justify-content-center */
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }

/* ---------------- MAIN NAVBAR ---------------- */

.navbar-custom {
    /* Foreground Color */
    color: #fff;
    /* Gradient */
    background: var(--navbar-start);
    background: -moz-linear-gradient(90deg, var(--navbar-start) 0%, var(--navbar-end) 100%);
    background: -webkit-linear-gradient(90deg, var(--navbar-start) 0%, var(--navbar-end) 100%);
    background: linear-gradient(90deg, var(--navbar-start) 0%, var(--navbar-end) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--navbar-start),endColorstr=var(--navbar-end),GradientType=1);
}
    .navbar-custom a, .navbar-custom span {
        /* Foreground Color */
        color: #fff;
    }

    /* "EB Classic" Button */
    .navbar-custom .nav-btn {
        border-radius: 0.25rem !important;
        border: 1px solid #fff;
        background: transparent;
    }
    
    /* Title */
    .navbar-custom .font-bold{
        font-weight: 700;
    }
    .navbar-custom .font-italic {
        font-style: italic;
        font-size: 80%;
    }

    /* Active Menu */
    .navbar-custom .active{
        font-weight: 700;
    }



/* ---------------- COOL NAVBAR ---------------- */

.cool-nav .nav-tabs{
    border: 0px;
}

    .cool-nav .nav-tabs > .nav-item {
        border: 1px solid #EFEFEF;
        border-radius: 0px;
        background: #fff;

        color: var(--bold-color);
        font-size: 1.2rem;
    }

    .cool-nav .nav-tabs .nav-link.active {
        color: #fff;
        background-color: var(--blue-4);
        border: 0px;
    }

/* ---------------- TABLE CUSTOM ---------------- */
/* table-main-blue is a blue table with striped rows */
/* table-hover have custom values too */

/* SPECIAL ROWS */
tr.row-green {
    background-color: var(--green-0) !important;
    color: var(--green-4) !important;
    border-bottom: 1px solid var(--green-2);
}
tr.row-green:hover {
    background-color: var(--green-1) !important;
}

tr.row-yellow {
    background-color: var(--yellow-0) !important;
    color: var(--yellow-4) !important;
    border-bottom: 1px solid var(--yellow-2);
}
tr.row-yellow:hover {
    background-color: var(--yellow-1) !important;
}

tr.row-red {
    background-color: var(--red-0) !important;
    color: var(--red-4) !important;
    border-bottom: 1px solid var(--red-2);
}
tr.row-red:hover {
    background-color: var(--red-1) !important;
}

/* TABLE HEADERS */
.table-main-blue thead th {
    color: var(--bold-color);
    background-color: var(--blue-2);
    font-weight: 650;
}

.table-main-blue tr td,
.table-main-blue tr th {
    padding-right: 1rem;
    vertical-align: middle;
}

/* ODD ROWS */
.table-main-blue tbody tr:nth-of-type(2n+1) {
    background-color: var(--blue-0);
}

/* table-hover FOR ODD ROWS */
.table-main-blue.table-hover tbody tr:nth-of-type(2n+1):hover {
    background-color: #b8daff;
}

/* BODERLESS */
.table-main-blue th, .table-main-blue td, .table-main-blue thead th, .table-main-blue tbody + tbody {
	border: 0;
}

.table-main-blue.border {
    border: solid var(--blue-0) 1px !important;
}

/*  */
.table-primary, .table-primary > th, .table-primary > td {
	background-color: var(--blue-1);
}

/* CELL WIDTH MIN CONTENT */
.cell-min-content {
    white-space: nowrap;
    width: 1%;
    padding-right: 1rem;
}

.th-min-content th {
    white-space: nowrap;
    width: 1%;
    padding-right: 1rem;
}

.clickable-row td:not(.non-clickable) {
    cursor: pointer;
}


.page-item.active .page-link {
	background-color: var(--blue-3);
	border-color: var(--blue-3);
}

.page-link{
	color: var(--blue-3);
}
.page-link:focus {
	box-shadow: none;
}

/* ---------------- EDIT TABLE ---------------- */
/* Use it along table-main-blue to make rows with a th and inputs in the td */
.edit-table th{
    padding-left: 0.4rem;
    padding-right: 1.5rem;
}
.edit-table tr td {
    padding: .5rem 1rem;
}


/* ---------------- UPLOAD ---------------- */

.img-uploader img {
    height: 100%;
    width: auto !important;
}

/* For Image Upload */
.img-uploader #upload-input {
    opacity: 0;
}

.img-uploader #upload-label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.img-uploader .up-input{
    border-radius: 5px;
    background-color: var(--blue-0);
    color: var(--blue-5);
}
.img-uploader .up-input label{
    font-weight: lighter;
}

.img-uploader .up-input .choose-btn{
/*m-0 rounded-pill px-4*/
    margin: 0px;
    border-radius: 5px;
    padding: 0rem 1rem;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}

/* ---------------- CUSTOM SIZING ---------------- */
.w-min-content {
    width: min-content;
}
.w-max-content {
    width: max-content;
}
.h-min-content {
    height: min-content;
}
.h-max-content {
    height: max-content;
}


.maxw-maxc {
    max-width: max-content;
}

.w-6rem{
    width: 6rem;
}

.h-2rem {
    height: 2rem;
}

.flex-row-center {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.flex-row-v-center {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

/* PADDING BY REM */
.p-1rem{
    padding: 1rem;
}
.p-2rem {
    padding: 2rem;
}
.p-3rem {
    padding: 3rem;
}
.p-4rem {
    padding: 4rem;
}
.p-5rem {
    padding: 5rem;
}
.px-1rem {
    padding-right: 1rem;
    padding-left: 1rem;
}
.px-2rem {
    padding-right: 2rem;
    padding-left: 2rem;
}
.px-3rem {
    padding-right: 3rem;
    padding-left: 3rem;
}
.px-4rem {
    padding-right: 4rem;
    padding-left: 4rem;
}
.px-5rem {
    padding-right: 5rem;
    padding-left: 5rem;
}
.py-1rem {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-2rem {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.py-3rem {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.py-4rem {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.py-5rem {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.pl-1rem {
    padding-left: 1rem;
}
.pl-2rem {
    padding-left: 2rem;
}
.pl-3rem {
    padding-left: 3rem;
}
.pl-4rem {
    padding-left: 4rem;
}
.pl-5rem {
    padding-left: 5rem;
}
.pt-1rem {
    padding-top: 1rem;
}
.pt-2rem {
    padding-top: 2rem;
}
.pt-3rem {
    padding-top: 3rem;
}
.pt-4rem {
    padding-top: 4rem;
}
.pt-5rem {
    padding-top: 5rem;
}
.pr-1rem {
    padding-right: 1rem;
}
.pr-2rem {
    padding-right: 2rem;
}
.pr-3rem {
    padding-right: 3rem;
}
.pr-4rem {
    padding-right: 4rem;
}
.pr-5rem {
    padding-right: 5rem;
}
.pb-1rem {
    padding-bottom: 1rem;
}
.pb-2rem {
    padding-bottom: 2rem;
}
.pb-3rem {
    padding-bottom: 3rem;
}
.pb-4rem {
    padding-bottom: 4rem;
}
.pb-5rem {
    padding-bottom: 5rem;
}
/* MARGIN BY REM */
.m-1rem {
    margin: 1rem;
}
.m-2rem {
    margin: 2rem;
}
.m-3rem {
    margin: 3rem;
}
.m-4rem {
    margin: 4rem;
}
.m-5rem {
    margin: 5rem;
}
.mx-1rem {
    margin-right: 1rem;
    margin-left: 1rem;
}
.mx-2rem {
    margin-right: 2rem;
    margin-left: 2rem;
}
.mx-3rem {
    margin-right: 3rem;
    margin-left: 3rem;
}
.mx-4rem {
    margin-right: 4rem;
    margin-left: 4rem;
}
.mx-5rem {
    margin-right: 5rem;
    margin-left: 5rem;
}
.my-1rem {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.my-2rem {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.my-3rem {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.my-4rem {
    margin-top: 4rem;
    margin-bottom: 4rem;
}
.my-5rem {
    margin-top: 5rem;
    margin-bottom: 5rem;
}
.ml-1rem {
    margin-left: 1rem;
}
.ml-2rem {
    margin-left: 2rem;
}
.ml-3rem {
    margin-left: 3rem;
}
.ml-4rem {
    margin-left: 4rem;
}
.ml-5rem {
    margin-left: 5rem;
}
.mt-1rem {
    margin-top: 1rem;
}
.mt-2rem {
    margin-top: 2rem;
}
.mt-3rem {
    margin-top: 3rem;
}
.mt-4rem {
    margin-top: 4rem;
}
.mt-5rem {
    margin-top: 5rem;
}
.mr-1rem {
    margin-right: 1rem;
}
.mr-2rem {
    margin-right: 2rem;
}
.mr-3rem {
    margin-right: 3rem;
}
.mr-4rem {
    margin-right: 4rem;
}
.mr-5rem {
    margin-right: 5rem;
}
.mb-1rem {
    margin-bottom: 1rem;
}
.mb-2rem {
    margin-bottom: 2rem;
}
.mb-3rem {
    margin-bottom: 3rem;
}
.mb-4rem {
    margin-bottom: 4rem;
}
.mb-5rem {
    margin-bottom: 5rem;
}

/* ---------------- CUSTROM FONT SIZE ---------------- */
.font-0-5rem{
    font-size: 0.5rem;
}
.font-1-0rem {
    font-size: 1rem;
}
.font-1-1rem {
    font-size: 1.1rem;
}
.font-1-2rem {
    font-size: 1.2rem;
}
.font-1-3rem {
    font-size: 1.3rem;
}
.font-1-4rem {
    font-size: 1.4rem;
}
.font-1-5rem {
    font-size: 1.5rem;
}
.font-1-6rem {
    font-size: 1.6rem;
}
.font-1-7rem {
    font-size: 1.7rem;
}
.font-1-8rem {
    font-size: 1.8rem;
}
.font-1-9rem {
    font-size: 1.9rem;
}
.font-2-0rem {
    font-size: 2rem;
}




/* ---------------- PATCHES AND STUFF ---------------- */

/* Bootstrap have this margins on the rows. I don't like that so kill it */
.row {
    margin-left: 0px;
    margin-right: 0px;
}
/* Why the fuck all of these have paddings and margins, stop it */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl, .col-xxl-auto {
    padding-right: 0;
    padding-left: 0;
}

/* For some reason the span inside the custom Dropdown (.selectpicker) selected item have background dark blue and dark font. Let's fix it. */
.dropdown-item.active ,
.dropdown-item:active {
    background-color: var(--blue-4);
}
.dropdown-item.active span,
.dropdown-item:active span {
    color: white !important;
}