body {
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    /*height: 100vh - 70px;*/
}

@media (max-height: 100vh), (min-width: 100vw) {
    body {
        height: calc(100% - 75px);
    }

        body::before {
            height: calc(100% - 75px);
        }
}

.centered {
    position: fixed; /*Can also be `fixed`*/
    left: 0;
    right: 0;
    top: 15%;
    bottom: 0;
    margin: auto;
    /*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
}

.logo-separator {
    border-right: 1px solid; /* Sets width and style */
    /* border-color is handled by Bootstrap's .border-light or defined here */
}

.bg-app-soft {
    background-color: #F9FAFA !important;
}

.bg-custom-navy {
    background-color: #303584 !important;
    color: white !important; /* Optional: ensures text is readable */
}

.bg-custom-white {
    /* background-color: white !important; */
    color: #303584 !important; /* Optional: ensures text is readable */
}

.text-announcements {
    color: #03878C !important;
}

/* Optional: Make headings slightly bolder for that Fintech look */
h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

h5 {
    font-size: 1rem !important;
}

.login-page {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    font-style: normal;
    line-height: 135%;
    color: #232C34 !important;
}

.dashboard_padding_left {
    padding-left: 40px !important;
}

.dashboard_padding_right {
    padding-right: 40px !important;
}

.dashboard-app-name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    font-style: normal;
    line-height: 135%;
    color: #232C34 !important;
}

.dashboard-app-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    font-style: normal;
    line-height: 120%; /* 14.4px */
    color: #768696;
}

.dashboard-card-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.dashboard-card-hover:hover {
    /* Lifts the card up by 5px */
    transform: translateY(-5px);
    /* Deepens the shadow (Bootstrap shadow-md equivalent) */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    /*    background-color: #EAEBF3 !important;
        border-color: #EAEBF3 !important;
    */
}

/* Optional: Change the icon color on hover */
.dashboard-card-hover:hover .bi {
    transition: color 0.2s ease;
    filter: brightness(1.2);
}

.dashboard-icon-custom {
    color: #303584;
}

.special-link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    font-style: normal;
    line-height: 135%;
    color: #303584 !important;
    text-decoration: none !important;
}

.special-link:hover {
    text-decoration: underline !important;
}

/* Show the menu on hover */
/*.dropdown:hover > .dropdown-menu {
    display: none;
    margin-top: 0;*/ /* Prevents a gap that might close the menu when moving the mouse */
/*}*/

.dropdown-min-width {
    min-width: 34px !important;
}

/* Optional: Ensure the arrow/toggle reflects the open state */
.dropdown:hover > .dropdown-toggle::after {
    /* Your optional styling here */
}

.btn-square {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Important: removes Bootstrap's default side padding */
    border: none;
}

@media (min-width: 576px) {
    .container-sm, .container {
        max-width: 50px;
    }
}

@media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 750px;
    }
}

@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 980px;
    }
}

@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 100%;
    }
}

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 100%;
    }
}

.marTech-button--action {
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 4px 15px 2px 15px !important;
    border: #038489 2px solid;
}

.marTech-button--action a:hover {
    text-decoration: none !important;
}