/* -----------------------------------
   Variable Definitions
----------------------------------- */
:root {
    --raiju-dark: #2b2b2b;
    --raiju-dark-rgb: 43, 43, 43;
    --raiju-light: #ffffff;
    --raiju-light-rgb: 255, 255, 255;
    --raiju-lavender: #c6b0ee;
    --raiju-lavender-rgb: 198, 176, 238;
    --raiju-soft-lavender: #d5cae9;
    --raiju-soft-lavender-rgb: 213, 202, 233;
    --raiju-mid-lavender: #9670d4;
    --raiju-mid-lavender-rgb: 150, 112, 212;
    --raiju-hard-lavender: #7564e5;
    --raiju-hard-lavender-rgb: 113, 56, 192;
    --raiju-yellow: #daef86;
    --raiju-yellow-rgb: 16, 32, 32;
    --raiju-soft-yellow: #dbe6b0;
    --raiju-soft-yellow-rgb: 219, 230, 176;
    --raiju-mid-yellow: #c2df64;
    --raiju-mid-yellow-rgb: 194, 223, 100;
    --raiju-hard-yellow: #819c29;
    --raiju-hard-yellow-rgb: 129, 156, 41;
    --raiju-orange: #ea714b;
    --raiju-orange-rgb: 193, 229, 203;
    --raiju-soft-orange: #f18160;
    --raiju-soft-orange-rgb: 241, 129, 96;
    --raiju-mid-orange: #ec592c;
    --raiju-mid-orange-rgb: 236, 89, 44;
    --raiju-hard-orange: #df491c;
    --raiju-hard-orange-rgb: 223, 73, 28;
    --raiju-cool-gray: #d2d2d2;
    --raiju-cool-gray-rgb: 210, 210, 210;
    --raiju-light-gray: #eeeeee;
    --raiju-light-gray-rgb: 238, 238, 238;
    --bootstrap-dark-theme: #212529;
}

/* -----------------------------------
   Font Face Definitions
----------------------------------- */
@font-face {
    font-family: 'GTAmerica';
    src: url('/static/fonts/GT-America/GT-America-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'GTAmerica';
    src: url('/static/fonts/GT-America/GT-America-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'GTAmerica';
    src: url('/static/fonts/GT-America/GT-America-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Obviously';
    src: url('/static/fonts/Obviously/fonnts.com-Obviously.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

/* -----------------------------------
   Base Styles
----------------------------------- */
body {
    font-family: 'GTAmerica', serif;
    height: 100%;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Obviously', serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    text-transform: uppercase;
}

.gta {
    font-family: 'GTAmerica', serif;
    text-transform: none;
}
.mx-md-400 {
    margin-left: 11px;
    margin-right: 11px;
}
.mx-md-200 {
    margin-left: 6px;
    margin-right: 6px;
}
.mx-md-150 {
    margin-left: 4px;
    margin-right: 4px;
}
@media (min-width: 576px) {
    .mx-md-400 {
        margin-left: 66px;
        margin-right: 66px;
    }
    .mx-md-200 {
        margin-left: 33px;
        margin-right: 33px;
    }
    .mx-md-150 {
        margin-left: 25px;
        margin-right: 25px;
    }
}
@media (min-width: 768px) {
    .mx-md-400 {
        margin-left: 200px;
        margin-right: 200px;
    }
    .mx-md-200 {
        margin-left: 100px;
        margin-right: 100px;
    }
    .mx-md-150 {
        margin-left: 75px;
        margin-right: 75px;
    }
}
@media (min-width: 1400px) {
    .mx-md-400 {
        margin-left: 400px;
        margin-right: 400px;
    }
    .mx-md-200 {
        margin-left: 200px;
        margin-right: 200px;
    }
    .mx-md-150 {
        margin-left: 150px;
        margin-right: 150px;
    }
}

/* -----------------------------------
   Typography
----------------------------------- */

.underline-link {
    position: relative;
}
.underline-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.25s ease-in-out;
}
.underline-link:hover::after {
    transform: scaleX(1);
    visibility: visible;
}
.underline-link i {
    vertical-align: middle;
    text-decoration: none;
}
.underline-link.underline-orange::after {
    background-color: var(--raiju-orange);
}
.underline-link.underline-lavender::after {
    background-color: var(--raiju-lavender);
}
.underline-link.underline-green::after {
    background-color: var(--raiju-yellow);
}

/* -----------------------------------
   Backgrounds and Colors
----------------------------------- */
.bg-bs-dark {
    background-color: var(--bootstrap-dark-theme);
    color: var(--raiju-light);
}
.bg-raiju-dark {
    background-color: var(--raiju-dark);
    color: var(--raiju-light);
}
.bg-dark-accent {
    background-color: var(--raiju-cool-gray);
    color: var(--raiju-dark);
}
.bg-light-accent {
    background-color: var(--raiju-light-gray);
    color: var(--raiju-dark);
}
.bg-lavender {
    background-color: var(--raiju-lavender);
    color: var(--raiju-dark);
}
.bg-orange {
    background-color: var(--raiju-orange);
    color: var(--raiju-dark);
}
.bg-green {
    background-color: var(--raiju-yellow);
    color: var(--raiju-dark);
}
.bg-token-bundles {
    transition: background-color 0.2s ease-in-out;
    background-color: var(--raiju-cool-gray);
    color: var(--raiju-dark);
}
.bg-token-bundles:hover {
    background-color: var(--raiju-lavender);
}

/* -----------------------------------
   Borders
----------------------------------- */
.border-orange {
    border-color: var(--raiju-orange);
}
.border-lavender {
    border-color: var(--raiju-lavender);
}
.border-green {
    border-color: var(--raiju-yellow);
}
.border-light-accent {
    border-color: var(--raiju-light-gray);
}
.border-bottom-raiju {
	border-bottom-style: inset;
	border-bottom-width: medium;
}

/* -----------------------------------
   Text Colors
----------------------------------- */
.text-raiju-dark {
    color: var(--raiju-dark) !important;
}
.text-orange {
    color: var(--raiju-orange) !important;
}
.text-lavender {
    color: var(--raiju-lavender) !important;
}
.text-green {
    color: var(--raiju-yellow) !important;
}

/* -----------------------------------
   Navigation Links
----------------------------------- */
.nav-link-orange {
    background-color: var(--raiju-dark);
    color: var(--raiju-light);
}
.nav-link.nav-link-orange:focus,
.nav-link.nav-link-orange:hover {
    color: var(--raiju-orange);
}
.nav-link.nav-link-orange.active {
    background-color: var(--raiju-orange);
    color: var(--raiju-light);
}
.nav-link-lavender {
    background-color: var(--raiju-dark);
    color: var(--raiju-light);
}
.nav-link.nav-link-lavender:focus,
.nav-link.nav-link-lavender:hover {
    color: var(--raiju-lavender);
}
.nav-link.nav-link-lavender.active {
    background-color: var(--raiju-lavender);
    color: var(--raiju-dark);
}

/* -----------------------------------
   Button Styles
----------------------------------- */
.btn-raiju {
    padding: 18px 32px;
}
.btn.btn-dropdown {
    padding: 9px 16px;
}
.btn-orange {
    --bs-btn-color: var(--raiju-light);
    --bs-btn-bg: var(--raiju-orange);
    --bs-btn-border-color: var(--raiju-orange);
    --bs-btn-hover-color: var(--raiju-light);
    --bs-btn-hover-bg: var(--raiju-mid-orange);
    --bs-btn-hover-border-color: var(--raiju-hard-orange);
    --bs-btn-focus-shadow-rgb: var(--raiju-mid-orange-rgb);
    --bs-btn-active-color: var(--raiju-light);
    --bs-btn-active-bg: var(--raiju-hard-orange);
    --bs-btn-active-border-color: var(--raiju-hard-orange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--raiju-light);
    --bs-btn-disabled-bg: var(--raiju-orange);
    --bs-btn-disabled-border-color: var(--raiju-orange);
}
.btn-outline-orange {
    --bs-btn-color: var(--raiju-dark);
    --bs-btn-border-color: var(--raiju-orange);
    --bs-btn-hover-color: var(--raiju-light);
    --bs-btn-hover-bg: var(--raiju-orange);
    --bs-btn-hover-border-color: var(--raiju-orange);
    --bs-btn-focus-shadow-rgb: var(--raiju-lavender-rgb);
    --bs-btn-active-color: var(--raiju-light);
    --bs-btn-active-bg: var(--raiju-orange);
    --bs-btn-active-border-color: var(--raiju-orange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--raiju-orange);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--raiju-orange);
    --bs-gradient: none;
}
.btn-lavender {
    --bs-btn-color: var(--raiju-dark);
    --bs-btn-bg: var(--raiju-lavender);
    --bs-btn-border-color: var(--raiju-lavender);
    --bs-btn-hover-color: var(--raiju-light);
    --bs-btn-hover-bg: var(--raiju-mid-lavender);
    --bs-btn-hover-border-color: var(--raiju-hard-lavender);
    --bs-btn-focus-shadow-rgb: var(--raiju-mid-lavender-rgb);
    --bs-btn-active-color: var(--raiju-light);
    --bs-btn-active-bg: var(--raiju-hard-lavender);
    --bs-btn-active-border-color: var(--raiju-hard-lavender);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--raiju-light);
    --bs-btn-disabled-bg: var(--raiju-lavender);
    --bs-btn-disabled-border-color: var(--raiju-lavender);
}
.btn-outline-lavender {
    --bs-btn-color: var(--raiju-dark);
    --bs-btn-border-color: var(--raiju-lavender);
    --bs-btn-hover-color: var(--raiju-dark);
    --bs-btn-hover-bg: var(--raiju-lavender);
    --bs-btn-hover-border-color: var(--raiju-lavender);
    --bs-btn-focus-shadow-rgb: var(--raiju-lavender-rgb);
    --bs-btn-active-color: var(--raiju-dark);
    --bs-btn-active-bg: var(--raiju-lavender);
    --bs-btn-active-border-color: var(--raiju-lavender);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--raiju-lavender);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--raiju-lavender);
    --bs-gradient: none;
}
.btn-green {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--raiju-yellow);
    --bs-btn-border-color: var(--raiju-yellow);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--raiju-mid-yellow);
    --bs-btn-hover-border-color: var(--raiju-hard-yellow);
    --bs-btn-focus-shadow-rgb: 194, 223, 100;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--raiju-hard-yellow);
    --bs-btn-active-border-color: var(--raiju-hard-yellow);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--raiju-yellow);
    --bs-btn-disabled-border-color: var(--raiju-yellow);
}
.btn-outline-green {
    --bs-btn-color: var(--raiju-hard-yellow);
    --bs-btn-border-color: var(--raiju-yellow);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--raiju-yellow);
    --bs-btn-hover-border-color: var(--raiju-yellow);
    --bs-btn-focus-shadow-rgb: 191, 161, 233;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--raiju-yellow);
    --bs-btn-active-border-color: var(--raiju-yellow);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--raiju-yellow);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--raiju-yellow);
    --bs-gradient: none;
}
.btn-outline-dark {
	--bs-btn-color: var(--raiju-dark);
	--bs-btn-border-color: var(--raiju-dark);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--raiju-dark);
	--bs-btn-hover-border-color: var(--raiju-dark);
	--bs-btn-focus-shadow-rgb: 33,37,41;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--raiju-dark);
	--bs-btn-active-border-color: var(--raiju-dark);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: var(--raiju-dark);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: var(--raiju-dark);
	--bs-gradient: none;
}
.btn-outline-gray {
    --bs-btn-color: var(--raiju-dark);
    --bs-btn-border-color: var(--raiju-cool-gray);
    --bs-btn-hover-color: var(--raiju-dark);
    --bs-btn-hover-bg: var(--raiju-cool-gray);
    --bs-btn-hover-border-color: var(--raiju-cool-gray);
    --bs-btn-focus-shadow-rgb: 81, 81, 81;
    --bs-btn-active-color: var(--raiju-dark);
    --bs-btn-active-bg: var(--raiju-cool-gray);
    --bs-btn-active-border-color: var(--raiju-cool-gray);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--raiju-cool-gray);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--raiju-cool-gray);
    --bs-gradient: none;
}

/* -----------------------------------
   Miscellaneous Styles
----------------------------------- */
#cookie-consent-banner {
    position: fixed;
    z-index: 10;
    bottom: 20px;
    right: 20px;
    width: 50%;
	background: var(--raiju-cool-gray);
	color: var(--raiju-dark);
}
.raiju-rounded {
    border-radius: 15px;
}
.raiju-rounded-left {
    border-radius: 15px 0px 0px 15px;
}
.raiju-rounded-right {
    border-radius: 0px 15px 15px 0px;
}
.raiju-rounded-bottom {
    border-radius: 0 0 15px 15px;
}
@keyframes fadeInPlusMode {
    0% {
        background-color: transparent;
        color: transparent;
    }
    100% {
        background-color: #1D2B3D;
        color: #91A5CF;
    }
}
/* Overlay base styles */
#loadingOverlay {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
/* Triggered when visible */
#loadingOverlay.active {
  opacity: 1;
}

/* -----------------------------------
   Password classes in sentinel:login
----------------------------------- */
.password-container {
    position: relative;
}
.password-container .input-group-text {
    cursor: pointer;
}


/* -----------------------------------
   Icon Styles
----------------------------------- */
/* General transition for all hover directions */
.icon-link-hover svg {
    transition: transform 0.3s ease; /* Smooth transition for all icons */
}
/* Right hover effect */
.icon-link-hover-right:hover svg {
    transform: translateX(3px); /* Move right */
}
/* Left hover effect */
.icon-link-hover-left:hover svg {
    transform: translateX(-3px); /* Move left */
}
/* Up hover effect */
.icon-link-hover-up:hover svg {
    transform: translateY(-3px); /* Move up */
}

.color-square {
    display: inline-block;
    width: 10px;
    height: 10px;
}
.color-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ccc;
}

/* -----------------------------------
   Image Styles
----------------------------------- */
.empty-state {
	max-height: 185px;
}