:root {
	--bs-tw-bg: #2AA1D3;;
	--bs-tw-bg-subtle: #1d6381;
}

.btn-primary {
	--bs-btn-color: #fff; 
	--bs-btn-bg: #2AA1D3;  /* Base color */
	--bs-btn-border-color: #2AA1D3;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #2490BF; /* Slightly darker */
	--bs-btn-hover-border-color: #1E7DAA;
	--bs-btn-focus-shadow-rgb: 42, 161, 211; /* RGB of base color */
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #1E7DAA; /* Even darker */
	--bs-btn-active-border-color: #1A6E97;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #2AA1D3;
	--bs-btn-disabled-border-color: #2AA1D3;
}

i .text-primary {
	color: #2AA1D3;
}

.card-dash-number-big {
	font-size: 4rem;
	text-align: center;
}

.bg-tw-subtle {
    background-color: var(--bs-tw-bg-subtle) !important;
}

.pointer {
	cursor: pointer;
}

/* ==================== RGB BORDER ==================== */

@property --angle{
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.rgb-border {
  position: relative;
}

.rgb-border::after,
.rgb-border::before {
	content: '';
	position: absolute;
	height: calc(100% + 6px);
	width: calc(100% + 6px);
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	z-index: -1;
	padding: 3px;
	border-radius: 8px;
	animation: 3s spin linear infinite;
}

.primary-gradient::before, .primary-gradient::after {
    background-image: conic-gradient(from var(--angle),
        #2AA1D3 0%,   /* Base Blue */
        #1C8AC0 25%,  /* Slightly Darker Blue */
        #1675A5 50%,  /* Medium Blue */
        #105F8A 75%,  /* Darker Blue */
        #2AA1D3 100%  /* Back to Base Blue */
    );
}

.warning-gradient::before, .warning-gradient::after {
    background-image: conic-gradient(from var(--angle),
        #fffb00 0%,   /* Bright Yellow */
        #ffed00 25%,   /* Yellow Gold */
        #ffbf00 50%,   /* Yellow-Orange */
        #ff9900 75%,   /* Orange Yellow */
        #fffb00 100%   /* Back to Bright Yellow */
    );
}

.danger-gradient::before, .danger-gradient::after {
    background-image: conic-gradient(from var(--angle),
        #ff0000 0%,   /* Red */
        #ff5500 25%,   /* Red-Orange */
        #ffaa00 50%,   /* Orange */
        #ff0000 75%,   /* Red */
        #ff5500 100%   /* Red-Orange */
    );
}

.success-gradient::before, .success-gradient::after {
    background-image: conic-gradient(from var(--angle),
        #00ff00 0%,   /* Bright Green */
        #00cc00 25%,   /* Medium Green */
        #009900 50%,   /* Darker Green */
        #006600 75%,   /* Very Dark Green */
        #00ff00 100%   /* Back to Bright Green */
    );
}

.rgb-border::before {
	filter: blur(1.5rem);
  	opacity: 0.5;
}

@keyframes spin{
	from{
	  --angle: 0deg;
	}
	to{
	  --angle: 360deg;
	}
}

@media (min-width: 768px) {
    .scale-d-none {
        display: table-cell !important;
    }
}

@media (min-width: 100px) and (max-width: 767px) {
    .scale-d-none {
        display: none !important;
    }
}