/* Table of Content
====================
* Global variables
* Style switch button
* General
* Logo
* Horizontal accordion
* Logo wall
*/


/* ------------------------------------------------------------- *
 * Global variables
 * Please note that the dark and light colors are reversed. Dark colors are light and light colors are dark!
/* ------------------------------------------------------------- */

body.tt-lightmode-on {
	/* General */
	--tt-dark-color: #e5e3dc;
	--tt-light-color: #212121;

	--tt-bg-color: #e5e3dc;
	--tt-text-color: #212121;
	--tt-text-muted-color: #666;
	--tt-border-color: #666;

	--tt-linear-text-bg-color: rgb(0 0 0 / 20%);

	/* Cursor ball */
	--tt-ball-border-color: #999; /* Ball border color. #999 */
}


/* ------------------------------------------------------------- *
 * Style switch button
/* ------------------------------------------------------------- */

.tt-style-switch {
	position: relative;
	margin-left: 40px;
}
@media (max-width: 1024px) {
	.tt-style-switch {
		margin-left: 0;
		margin-right: 20px;
	}
}

.tt-style-switch-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-color: rgb(179 179 179 / 35%);
	line-height: 1;
	font-size: 15px;
	cursor: pointer;
	border-radius: 100%;
	transition: background-color .3s, color .3s;
}
.tt-stsw-dark {
	display: none;
}
body.tt-lightmode-on .tt-stsw-dark {
	display: block;
}
body.tt-lightmode-on .tt-stsw-light {
	display: none;
}

@media (max-width: 1024px) {
	#tt-header.tt-header-alter .tt-style-switch {
		margin-left: 0;
		margin-right: 25px;
	}
}


/* ------------------------------------------------------------- *
 * General
/* ------------------------------------------------------------- */

/* Selection */
body.tt-lightmode-on ::selection {
	color: var(--tt-dark-color);
	-webkit-text-fill-color: var(--tt-dark-color);
	text-shadow: none;
	background: var(--tt-main-color);
}
body.tt-lightmode-on ::-moz-selection {
	color: var(--tt-dark-color);
	-webkit-text-fill-color: var(--tt-dark-color);
	text-shadow: none;
	background: var(--tt-main-color); /* Firefox */
}
body.tt-lightmode-on ::-webkit-selection {
	color: var(--tt-dark-color);
	-webkit-text-fill-color: var(--tt-dark-color);
	text-shadow: none;
	background: var(--tt-main-color); /* Safari */
}


/* ------------------------------------------------------------- *
 * Logo
/* ------------------------------------------------------------- */

body.tt-lightmode-on .tt-logo-light {
	display: none;
}
body.tt-lightmode-on .tt-logo-dark {
	display: block;
}


/* ------------------------------------------------------------- *
 * Horizontal accordion
/* ------------------------------------------------------------- */

/* Horizontal accordion item alternative hover (no effect on small screens!) */
@media (min-width: 1025px) {
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item:first-child,
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item.active {
		background-color: var(--tt-light-color);
		color: var(--tt-dark-color);
		border-color: transparent;
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item:first-child.inactive {
		background-color: var(--tt-bg-color);
		color: var(--tt-text-color);
		border-color: var(--tt-border-color);
	}
}

/* Horizontal accordion item for small screens only (effects only with alternative hover!) */
@media (max-width: 1024px) {
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item {
		background-color: var(--tt-light-color);
		color: var(--tt-dark-color);
		border-color: transparent;
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline > *,
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline > *:after {
		color: var(--tt-dark-color);
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline {
		box-shadow: inset 0 0 0 2px var(--tt-dark-color);
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item-count::before {
		opacity: .6;
	}
}

/* ------------------------------------------------------------- *
 * Logo wall
/* ------------------------------------------------------------- */

body.tt-lightmode-on .tt-logo-wall-item,
body.tt-lightmode-on a.tt-logo-wall-item:hover {
	background-color: var(--tt-light-color);
}