@font-face {
    font-family: sf_pro_regular;
    src: url('../fonts/SFPRODISPLAYREGULAR.OTF');
    font-style: normal;
}

:root {
    /* Global */
    --primary-color: rgba(31, 166, 122, 1);
    --white: rgba(255, 255, 255, 1);
    --grey: rgba(100, 100, 100, 1);
    --blue: rgba(29, 76, 115, 1);
    --red: rgba(193, 34, 31, 1);
    --green: rgba(14, 129, 64, 1);
    --black: rgba(0, 0, 0, 1);
    /* Navbar */
    --navbar-height: 60px;
    --nav-link-font-size: 16px;
    --nav-link-submenu-font-size: 14px;
    --nav-link-font-family: sf_pro_regular;
    --nav-link-hover-color: rgba(23, 129, 94, 1);
    --nav-dropdown-link-border-radius: 10px;
    --nav-icon-back: 20px;
    --page-title-background-color: var(--grey);
    /* Footer */
    /* Button */
    --button-font-size: 16px;
    --button-font-family: sf_pro_regular;
    --button-font-weight: 700;
    /* H1 */
    /* H2 */
    --h2-font-size: 1.5em;
    --h2-font-family: sf_pro_regular;
    /* H3 */
    --h3-font-size: 1.17em;
    --h3-font-family: sf_pro_regular;
    /* P */
    --p-font-size: 16px;
    --p-font-family: sf_pro_regular;
    /* Modal */
    --modal-border-radius: 30px;
    --modal-background-color: var(--primary-color);
    --modal-back-color: rgba(0, 0, 0, 0.5);
    /* TD */
    --td-font-size: 16px;
    --td-font-family: sf_pro_regular;
    /* Grid View TD */
    --grid-view-td-font-size: 13px;
    --grid-view-td-font-family: sf_pro_regular;
    /* Label */
    --label-font-size: 16px;
    --label-font-family: sf_pro_regular;
    /* Borders */
    --default-border-color: var(--black);
    --default-border-radius: 0.25rem;
    --button-border-radius: 15px;
    --menu-dropdown-border-radius: 20px;
    --nav-logo-border-radius: 5px;
    --table-border-radius: 15px;
    /* Button */
    --button-font-size: 16px;
    --button-font-family: sf_pro:regular;
    --button-hover-opacity: 0.8;
    /* Inputs */
    --default-input-height: 33px;
    /* Grid View */
    /* Icons */
    --close-icon-size: 20px;
    --eye-icon-size: 20px;
    --update-icon-size: 20px;
    --edit-icon-size: 20px;
    --status-icon-size: 20px;
    --documents-icon-size: 20px;
    --notes-icon-size: 20px;
}

body {
    overflow-x: hidden;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.master-page-form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.master-page-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

.content-placeholder {
    margin-top: 87px;
    position: relative;
}

h1, h2, h3, h6, p, label {
    padding: 0px;
    margin: 0px;
}

h2 {
    font-size: var(--h2-font-size);
    font-family: var(--h2-font-family);
}

h3 {
    font-size: var(--h3-font-size);
    font-family: var(--h3-font-family);
}

p {
    font-size: var(--p-font-size);
    font-family: var(--p-font-family);
}

.btn {
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
}

.btn:focus {
    border: none !important;
    outline: none;
}

input {
    position: relative;
    border: none;
    outline: none;
}

select {
    position: relative;
    top: 0px;
    left: 0px;
    max-width: 187px;
    min-width: 187px;
    min-height: 33px;
    border-radius: var(--default-border-radius);
}

textarea {
    height: 17px;
}

label {
    font-size: var(--label-font-size);
    font-family: var(--label-font-family);
}

span {
    font-size: var(--label-font-size);
    font-family: var(--label-font-family);
}

/* Bootstrap */
.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 1rem;
}

.flex-1 {
    flex: 1;
}

.p-relative {
    position: relative;
}

.to-upper {
    text-transform: uppercase;
}

.content-container {
    min-height: 100%;
}

.blur-bg {
    position: absolute;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    background-color: var(--primary-color);
    border-radius: var(--default-border-radius);
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
}

.custom-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.custom-bg.background-image {
    object-fit: cover;
    background-size: cover;
}

.custom-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
}

.custom-bg.primary {
    background-color: var(--primary-color);
    opacity: 0.9;
    z-index: -1;
}

.custom-bg.secondary {
    background-color: var(--grey);
    opacity: 0.7;
    z-index: -1;
}

.navbar .custom-blur {
    z-index: -1;
    /*background-color: var(--primary-color);
    opacity: 0.9;*/
}

.error {
    border: 3px solid var(--red) !important;
}

@media (max-width: 768px) {
    h3 {
        font-size: 1em;
    }
    p {
        font-size: 0.8em;
    }
    span {
        font-size: 0.8em;
    }
    label {
        font-size: 0.8em;
    }
    .btn {
        font-size: 0.9em;
    }
}

@media (min-width: 768px) {
    .gap-md-0 {
        gap: 0rem;
    }
}