/* ? Body */

html {
	scroll-behavior: smooth;
	font-size: 62.5%;
}

html, body {
	background-color: var(--body-bg);
	color: var(--body-clr);
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.5;
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	overflow-x: hidden;
}

a, a:link, a:visited, a:hover, a:active {
	color: var(--body-clr);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--link-hover-clr);
}

/* ? Background */

.itvBox_reset {
	background-color: var(--box-reset-bg);
}

.itvBox_light {
	background-color: var(--box-light-bg);
}

.itvBox_dark {
	background-color: var(--box-dark-bg);
}

.itvBox_default {
	background-color: var(--box-default-bg);
}

/* ? Lists */

.itvList_reset {
	list-style: none;
	margin: var(--sp-0);
	padding: var(--sp-0);
}

.itvList_inline li {
	display: inline-block;
}

/* ? Layout */

.itvContainer {
	margin: var(--sp-0) auto;
	padding: var(--sp-0);
	max-width: var(--layout-container);
	position: relative;
}

/* ? Box */

.itvBox {
	background-color: var(--box-default-bg);
	border-radius: var(--sp-1);
	border: 1px solid var(--box-border-clr);
	box-shadow: 0 0 10px rgb(36, 38, 43, 0.3);
	transition: all 0.3s ease;
	position: relative;
}

.itvBox_content {
	padding: var(--sp-2) var(--sp-4);
}

.itvBox_footer {
	padding: var(--sp-3) var(--sp-4);
	border-top: 1px solid var(--box-border-clr);
}

.itvBox_footer a {
	background-color: var(--box-read-more-bg);
	color: var(--text-light-clr);
	display: block;
	width: 100%;
	padding: var(--sp-3);
	text-align: center;
	border-radius: var(--sp-1);
	border: 1px solid var(--box-read-more-border);
	font-weight: 600;
	transition: 0.3s ease;
}

.itvBox_footer a:hover {
	background-color: var(--box-read-more-hover-bg);
	border-color: var(--box-read-more-hover-border);
	color: var(--text-very-light-clr);
}

/* ? Main area */

.itvLayout_main {
	margin-top: -40px;
}

.itvLayout_mainArea, .itvLayout_sidebar {
    display: table-cell;
    height: 100%;
    vertical-align: top;
    box-sizing: border-box;
}

.itvLayout_mainArea {
	width: 100%;
    min-height: 350px;
    padding: var(--sp-0);
}

/* ? Aside area */

.itvLayout_sidebar {
	min-width: 390px;
    max-width: 390px;
    padding-bottom: var(--sp-4);
	padding-left: var(--sp-5);
    overflow: hidden;
}

/* ? Articles */

.itvBox_article {
	margin-bottom: var(--sp-3);
}

.itvBox_article:last-child {
	margin-bottom: var(--sp-0);
}

.itvBox_article .itvBox_title {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.itvBox_article .itvBox_title h2 {
	font-size: 1.3rem;
}

.itvBox_articleUser {
	color: var(--text-light-clr);
	font-size: 0.9rem;
	font-weight: normal;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.itvBox_articleUser img {
	margin-right: var(--sp-3);
}

.itvBox_articleUser p:last-child b {
	color: var(--text-very-light-clr);
}

/* responsive */

.itvResponsiveHeader {
	background-color: var(--header-topbar-bg);
	padding: var(--sp-4) var(--sp-5);
	font-size: 1.2rem;
	text-align: right;
}

.itvResponsiveHeader_list {
	margin: var(--sp-0);
	padding: var(--sp-0);
	list-style: none;
}

.itvResponsiveHeader_list li {
	display: inline-block;
	margin-right: var(--sp-4);
}

.itvResponsiveHeader_list li:last-child {
	margin-right: var(--sp-0);
}

.itvResponsive_login_button {
	font-weight: 500;
}

.itvResponsiveHeader .offcanvas [data-bs-dismiss="offcanvas"] {
	background-color: var(--header-topbar-bg);
	opacity: 1;
	color: var(--text-very-light-clr);
	position: absolute;
	left: -4rem;
	top: var(--sp-6);
	width: 44px;
	height: 44px;
	text-align: center;
	line-height: 44px;
	border-radius: 100%;
	border: 0;
}

.itvResponsiveHeader>div:not(.offcanvas) {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.itvResponsiveHeader>div:not(.offcanvas)>a>img {
	width: 120px;
}

.itvResponsiveHeader .offcanvas.offcanvas-end {
	padding: var(--sp-0) var(--sp-4);
}

.itvResponsiveHeader .offcanvas-body {
	padding: var(--sp-6) var(--sp-0) !important;
	padding-left: var(--sp-0) !important;
	text-align: left;
}

.itvResponsiveHeader .offcanvas-body ul {
	padding: var(--sp-0);
	margin: var(--sp-0);
	list-style: none;
	font-size: 0.9rem;
}

.itvResponsiveHeader .offcanvas-body ul li {
	margin: var(--sp-2) var(--sp-0);
} 

.itvResponsiveHeader .offcanvas-body ul li a {
	display: block;
	background-color: var(--footer-bg-2);
	color: var(--text-light-clr);
	padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-3);
	border-radius: var(--sp-1);
	font-weight: 600;
}

.itvResponsiveHeader .offcanvas-body ul li a:hover {
	background-color: var(--link-hover-clr);
	color: var(--text-very-light-clr);
}


@media screen and (max-width: 1100px) {
	.itvTopBar {
		display: none;
	}
	.itvResponsiveHeader .offcanvas.offcanvas-end {
		--bs-offcanvas-width: 360px;
	}
	.itvContainer {
		padding: var(--sp-0) 15px;
	}
	.itvLayout_mainArea, .itvLayout_sidebar {
		display: block;
	}
	.itvBoxServerList .itvServerList ul li.itvServerItem {
		text-align: center !important;
		gap: 1rem;
	}
	.itvBoxServerList .itvServerList ul li.itvServerItem .itvServerList_icon,
	.itvBoxServerList .itvServerList ul li.itvServerItem .itvServerList_name,
	.itvBoxServerList .itvServerList ul li.itvServerItem .itvServerList_progress,
	.itvBoxServerList .itvServerList ul li.itvServerItem .itvServerList_address,
	.itvBoxServerList .itvServerList ul li.itvServerItem .itvServerList_map {
		flex: 0 0 45%;
		max-width: unset;
		min-width: unset;
		padding-left: var(--sp-0);
	}
	.itvServerList_icon span {
		margin: var(--sp-0) auto;
	}
	.itvBoxServerList .itvServerList ul li.itvServerItem .itvServerList_map {
		flex: 1 0 100% !important;
	}
	.itvLayout_sidebar {
		max-width: 100%;
		min-width: 100%;
		padding-top: var(--sp-7);
		padding-left: var(--sp-0);
	}
	.itvLayout_sidebar .itvBox.itvBox_sidebar {
		max-width: 100%;
		min-width: 100%;
	}
	.itvServerFooter li {
		width: 100%;
		display: block;
		margin-right: var(--sp-0);
		margin-top: var(--sp-3);
	}
	.itvBox_header,
	.itvBox_article .itvBox_title {
		flex-wrap: wrap;
	}
	.itvBox_articleUser {
		margin-top: var(--sp-4);
	}
	.itvAdv_footer .itvContainer ol {
		grid-template-columns: 1fr !important;
	}
	footer .itvContainer {
		justify-content: center !important; 
	}
}

@media (min-width: 280px) and (max-width: 375px) {
	.itvResponsiveHeader .offcanvas.offcanvas-end {
		--bs-offcanvas-width: 250px;
	}
}

@media (min-width: 1100px) {
	.itvResponsiveHeader {
		display: none;
	}
}


.itvResponsiveHeader .offcanvas-body ul li a.itv-responsive-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: var(--sp-3);
}

.itvResponsiveHeader .offcanvas-body ul li a.itv-responsive-dropdown-toggle i {
    font-size: 1rem;
}

.itv-responsive-dropdown-content {
    margin: var(--sp-0);
    padding: var(--sp-0) var(--sp-0) var(--sp-0) var(--sp-4);
    list-style: none;
    transition: all 0.5s ease;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.itv-responsive-dropdown-hide {
    max-height: 0;
    transition: max-height 0.5s ease;
}

.itv-responsive-dropdown-show {
    max-height: 400px;
    transition: max-height 0.5s ease;
}

.itv-responsive-dropdown-content>li>a {
    padding: var(--sp-2) var(--sp-6)
}

.itv-responsive-dropdown-content>li>a i {
    padding-right: var(--sp-2);
    vertical-align: middle;
}