/* ----------------------------------------------------------------

	Custom CSS

	Add all your Custom Styled CSS here for New Styles or

	Overwriting Default Theme Styles for Better Handling Updates

-----------------------------------------------------------------*/



/* ----------------------------------------------------------------
	CANVAS OVERRIDES
-----------------------------------------------------------------*/
:root {
	--cnvs-themecolor: #064c79;
	--cnvs-themecolor-rgb: 6, 76, 121;
	--cnvs-secondary-font: "Roboto Slab", serif;
	--bs-light-rgb: 235, 235, 235; 
}

:root, .not-dark {
	--cnvs-link-hover-color: var(--cnvs-heading-color);
}

body, .dropdown-menu {
	font-size: 1rem;
}

/*Update Container Grid on xl screen sizes*/
@media (min-width: 1500px) {
	.container-xxl,
	.container-xl,
	.container-lg,
	.container-md,
	.container-sm,
	.container {
		max-width: calc(100vw - 300px);
	}
}


.promo.promo-light {
	background-color: #F5F5F5;
	border-radius: 3px;
	padding: 30px 20px 30px 30px;
}

label {
	color: #555;
	cursor: pointer;
	display: inline-block;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

.card {
	--bs-card-border-color: #064c79;
	--bs-card-cap-bg: #064c79;
	--bs-card-cap-color: white;
}

.card-header h2 {
	color: var(--cnvs-white)
}

li {
	list-style-position:inside;
}

.inline-link{
	font-weight: bold;
}

a:not(.btn-link):not(.text-decoration-underline):not(.menu-link):not(.button):not(.btn).inline-link:hover {
	font-weight: bold;
	text-decoration: underline 1.75px !important;
	text-underline-offset: 4.5px;
	color: var(--cnvs-themecolor);
}

/* ----------------------------------------------------------------
	DevExpress Overrides
-----------------------------------------------------------------*/
/* dx warning button similar to dx-button-danger, which is a built in to css light file */
.dx-button-warning {
	background-color: var(--dx-color-warning, #f0ad4e); /* Use the warning color variable */
	color: #fff; /* Set text color to white for contrast */
	border-color: var(--dx-color-warning, #f0ad4e); /* Match the border color */
}

	.dx-button-warning:hover {
		background-color: #ec9a3c; /* Slightly darker shade for hover effect */
		border-color: #ec9a3c;
	}

	.dx-button-warning:active {
		background-color: #e58b2c; /* Even darker shade for active state */
		border-color: #e58b2c;
	}

	.dx-button-warning:disabled {
		background-color: #f7d8b4; /* Lightened color for disabled state */
		color: #ccc; /* Muted text color */
		border-color: #f7d8b4;
	}


/* ----------------------------------------------------------------
	Root/Body Page Overrides
-----------------------------------------------------------------*/
.fa-solid {
	line-height: inherit;
}

.text-highlight {
	background: left 1em/1em 0.2em;
	background-image: linear-gradient(to bottom, rgba(169, 185, 217, 0.5), rgba(169, 185, 217, 0.5));
	background-repeat: repeat-x;
}

.bg-secondary {
	background-color: #a7c1e5 !important;
}

.bg-soft-blue {
	background-color: #E0E9F6 !important;
	color: var(--cnvs-themecolor);
}

h1, .h1, h2, .h2, h3, .h3 {
	font-family: var(--cnvs-secondary-font);
}

.button {
	--cnvs-btn-color-dark: var(--cnvs-themecolor);
}

.button:hover {
	background-color: #063756;
}

.callout:before {
	background: #064c79;
	content: '';
	display: block;
	height: clamp(12px, 1.200vw, 18px);
	left: 0px;
	position: absolute;
	top: 0px;
	width: 100%;
}

.text-white-60 {
	--bs-text-opacity: 1;
	color: rgba(255, 255, 255, 0.6) !important;
}

.toggle, .accordion {
	--cnvs-toggle-bg-color: var(--cnvs-contrast-200);
}

.w-12 {
	width: 12% !important;
}

.w-24 {
	width: 24% !important;
}

.w-30 {
	width: 30% !important;
}

.w-48 {
	width: 48% !important;
}

.w-60 {
	width: 60% !important;
}

.w-70 {
	width: 70% !important;
}

/*Override bootstrap primary color with theme color*/

.btn-primary {
	--bs-btn-bg: #064c79; /* New base color */
	--bs-btn-border-color: #064c79;
	--bs-btn-hover-bg: #053b61;
	--bs-btn-hover-border-color: #053256;
	--bs-btn-focus-shadow-rgb: 6,  76,  121;
	--bs-btn-active-bg: #053256;
	--bs-btn-active-border-color: #052b4d;
	--bs-btn-disabled-bg: #064c79;
	--bs-btn-disabled-border-color: #064c79;
}

.btn-outline-primary {
	--bs-btn-color: #064c79; /* New text color */
	--bs-btn-border-color: #064c79;
	--bs-btn-hover-bg: #064c79;
	--bs-btn-hover-border-color: #064c79;
	--bs-btn-focus-shadow-rgb: 6,  76,  121;
	--bs-btn-active-bg: #064c79;
	--bs-btn-active-border-color: #064c79;
	--bs-btn-disabled-color: #064c79;
	--bs-btn-disabled-border-color: #064c79;
}

/*Tertiary Color*/

.button-tea-tertiary {
	background-color: #008482;
	color: white;
}

.button-tea-tertiary:hover {
	background-color: #006B69;
}

.button.button-border.button-tea-tertiary {
	background-color: transparent;
	border: 2px solid #006B69;
	color: #006B69;
	font-weight: 700;
	line-height: 36px;
	text-shadow: none;
}

.button-tea-tertiary.button.button-border:not(.button-fill):hover {
	background-color: #006B69;
	color: #fff;
}

.infomsg {
	color: #0c5460;
}

.infomsg .h5 {
	color: #0c5460;
}

.accent-success {
	color: #42873f !important;
}

.tea-teal-dark {
	background-color: #01a79b;
}

.tea-teal-light {
	background-color: #CCEDEB;
}

.tea-yellow-dark {
	background-color: #f8cc2b;
}

.tea-yellow-light {
	background-color: #fcebaa;
}

.tea-green-dark {
	background-color: #87c54a;
}

.tea-green-light {
	background-color: #cfe8b7;
}

/* ----------------------------------------------------------------
	Index Page
-----------------------------------------------------------------*/

/*Fix height of TTESS Logo*/

#logo img {
	height: 100px;
}

/* Feature box Evaluation Process Section Color Overrides*/

.fbox-bg.fbox-center .fbox-icon {
	background-color: #f8f9fa;
}

.fbox-bg.fbox-center {
	border: 2px solid #7c9dbd;
}

/* Learn more link Custom CSS*/

.learn-more-link {
	border-bottom: 2px solid transparent;
	color: #064c79;
	font-weight: 700;
	padding: 1px;
	text-decoration: none;
	transition: border-color 0.3s ease-in-out;
}

.learn-more-link:hover {
	border-color: #064c79;
	color: #064c79;
}

.rubric-box h3 {
	height: 48px;
}

/* ----------------------------------------------------------------
	Rubric Training Page
-----------------------------------------------------------------*/

.dimension-box {
	background-color: #e0e9f6;
	margin-bottom: 4rem !important;
	padding: 3rem 1rem !important;
}

.dimension-header {
	color: var(--cnvs-themecolor);
	font-size: 2rem;
}

/* ----------------------------------------------------------------
	Resources Page Page
-----------------------------------------------------------------*/

.resource-filter li {
	width: 11%;
}

.resource-filter li a {
	text-align: center;
}

.resource-filters a.activeFilter {
	background-color: #1265a8;
}

.resource-filters button.activeFilter {
	background-color: #1265a8;
}

.resource-filters button:not(.activeFilter) {
	background-color: #6699cc !important;
}

.portfolio-overlay a.bottom-icon {
	display: block;
	margin: 20px 0 0 -20px;
	opacity: 0;
}

.portfolio-item:hover a.bottom-icon, .iportfolio:hover a.bottom-icon {
	opacity: 1;
}

.sub-menu-link {
	color: #666;
	display: block;
	font-size: 12px;
	font-weight: 700;
	padding: 0 12px;
	text-transform: uppercase;
}

/* ----------------------------------------------------------------
	Evaluation Management Section
-----------------------------------------------------------------*/

/* custom tab styles for TTESS start */

.ttess-tabs {
	margin: 0 0 30px 0;
	position: relative;
}

.ttess-tabs.tabs-bb ul.tab-nav li {
	border: 0;
	margin: 0;
}

.ttess-tabs.tabs-bb ul.tab-nav li a {
	background-color: transparent;
	border-bottom: 2px solid transparent;
}

.ttess-tabs.tabs-bb ul.tab-nav li.ui-tabs-active a {
	border-bottom: 2px solid #1582C6;
	height: 44px;
	line-height: 44px;
	top: -2px;
}

.ttess-tabs.tabs-alt ul.tab-nav li {
	border-color: transparent;
}

.ttess-tabs.tabs-alt ul.tab-nav li:first-child {
	border-left: 0;
}

.ttess-tabs.tabs-alt ul.tab-nav li a {
	background-color: #FFF;
}

.ttess-tabs.tabs-alt ul.tab-nav li.ui-tabs-active a {
	border: 1px solid #DDD;
	border-bottom: 0;
}

.ttess-eval-tabs ul.tab-nav li {
	width: 25%;
}

.ttess-manage-accounts-tabs ul.tab-nav li {
	width: 33.33%;
}

/* custom tab styles for TTESS end */

/* ----------------------------------------------------------------
	Footer
-----------------------------------------------------------------*/

/* footer style overrides start*/

#footer .widget-links li {
	list-style: none !important;
	margin-bottom: 14px;
}

#footer .widget-links a {
	background: none !important;
	color: #fff;
}

.copy-right {
	color: #fff;
}

/* footer style overrides end*/

/* ----------------------------------------------------------------
	Go To Top
-----------------------------------------------------------------*/

/* gotoTop style overrides start*/

#gotoTop {
	left: 30px;
	right: auto;
}

/* gotoTop style overrides end*/

/* ----------------------------------------------------------------
    Login Section
-----------------------------------------------------------------*/

.my-account-request-section {
	font-size: large;
}

.my-account-request-btn {
	padding-top: 25px;
}

.my-account-note {
	padding-top: 30px;
}

/* Register/Login end*/

.NavMenuButton {
	border: 0;
	color: #666 !important;
	display: block;
	font-family: 'Lato', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 22px;
	padding-bottom: 10px;
	text-transform: uppercase;
	transition: all .2s ease-in-out;
}

.bg-color-darkcyan {
	background-color: #1582C6;
}

.bg-color-yellow {
	background-color: darkorange;
}

.bg-color-red {
	background-color: #ad2e24;
}