@charset "UTF-8";
400;
500;
600;
700&display=swap);
@font-face{
    font-family:hkgrotesk;
    src:url(../fonts/hkgrotesk-light.eot);
    src:local("hkgrotesk light"),url(../fonts/hkgrotesk-light.woff) format("woff");
    font-weight:300
}
@font-face{
    font-family:hkgrotesk;
    src:url(../fonts/hkgrotesk-regular.eot);
    src:local("hkgrotesk regular"),url(../fonts/hkgrotesk-regular.woff) format("woff");
    font-weight:400
}
@font-face{
    font-family:hkgrotesk;
    src:url(../fonts/hkgrotesk-medium.eot);
    src:local("hkgrotesk medium"),url(../fonts/hkgrotesk-medium.woff) format("woff");
    font-weight:500
}
@font-face{
    font-family:hkgrotesk;
    src:url(../fonts/hkgrotesk-semibold.eot);
    src:local("hkgrotesk semibold"),url(../fonts/hkgrotesk-semibold.woff) format("woff");
    font-weight:600
}
@font-face{
    font-family:hkgrotesk;
    src:url(../fonts/hkgrotesk-bold.eot);
    src:local("hkgrotesk bold"),url(../fonts/hkgrotesk-bold.woff) format("woff");
    font-weight:700
}

html {
	scroll-behavior: smooth;
}

body {
	width: 100%;
	height: 100%;
}

.app-container {
}

.app-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	background: var(--gray-100);
	z-index: 100;
	opacity: .5;
}

.fa-sm {
	font-size:14px;
    vertical-align: none !important;
}

.app-sidebar {
	display: flex;
	flex-direction: column;
	min-width: 240px;
	max-width: 240px;
	background: #031b4d;
	border-right: 1px solid #e3e4e6;
	margin-right: 10px;
	transition: margin .15s linear;
	overflow-y: auto;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	z-index: 9;
}
@media screen and (max-width: 600px) {
  .app-sidebar{
    visibility: hidden;
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  app-sidebar {
    display: none !important;
  }
}
@media screen and (max-width: 800px) {
  .app-sidebar{
    visibility: hidden;
    display: none;
  }
}

[dir="rtl"] .app-sidebar {
	margin-left: initial;
	left: initial;
	right: 0;
	margin-right: -252px;
}

[data-theme-style="dark"] .app-sidebar {
	background: #2f3647;
	border-right: 1px solid #3b4254;
	overflow-y: auto;
    position: fixed;
    height: 100%;
}

[dir="rtl"] [data-theme-style="dark"] .app-sidebar {
	background: var(--gray-50);
	border-right: 0;
	border-left: 2px solid var(--gray-200);
}

/* Light or "glow" shadow for dark theme */
[data-theme-style="dark"] .shadow-lg {
    -webkit-box-shadow: 0 5px 10px rgba(255, 255, 255, 0.2) !important;
     box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.75), 0px 17px 24px rgba(0, 0, 0, 0.3) !important;
}

body.app-sidebar-opened .app-sidebar {
	margin-left: 0;
}

[dir="rtl"] body.app-sidebar-opened .app-sidebar {
	margin-right: 0;
}

@media (min-width: 992px) {
	.app-sidebar {
		margin-left: 0;
	}

	[dir="rtl"] .app-sidebar {
		margin-right: 0;
	}
}

.app-sidebar-title {
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    height: 75px;
}

.app-sidebar-title a {
	font-size: 1.4rem;
	color: var(--white);
}

[data-theme-style="dark"] .app-sidebar-title a {
	color: var(--black);
}

.app-sidebar-title a:hover {
	text-decoration: none;
}

.app-sidebar-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
	font-weight:500;
	font-size: 15px;
	margin-bottom: 0.35em;
	padding: 0.5em;
	animation: color 2s ease;
}

.app-sidebar-links-divider-nav {
	border-top: 1px solid #374151;
    width: calc(100% - 3em);
    margin-left: 1.5em;
}

.app-sidebar-links2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
	margin: 0;
	position: relative;
}

.app-sidebar-links > li {
	width: 100%;
}

[data-theme-style="dark"] .app-sidebar-links > li > a {
	width: 100%;
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    color: #ffffff;
	background: #2f3647;
}

.app-sidebar-links > li > a {
	width: 100%;
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    color: #fff;
}

.app-sidebar-links > li > a:hover {
	text-decoration: none;
	color: #10b77f;
}

[data-theme-style="dark"] .app-sidebar-links > li > a:hover {
	color: var(--gray-800);
}

.app-sidebar-links > li.active > a {
	color: #10b77f;
	font-weight: 700;
}

[data-theme-style="dark"] .app-sidebar-links > li.active > a {
	color: #10b77f;
	font-weight: 700;
}

.app-px-1 {
	padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.app-text-caption {
    font-size: 12px;
    line-height: 133%;
}
.min-w-\[14px\] {
    min-width: 14px;
}

.app-sidebar-avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.app-sidebar-footer-block {
	max-width: 100%;
}

.app-sidebar-footer-text {
	color: #000;
}

[data-theme-style="dark"] .app-sidebar-footer-text {
	color: var(--gray-800);
}

.app-content {
	background: #f8fbff;
	margin-left: 0;
	flex-grow: 1;
	overflow: auto;
}

[data-theme-style="dark"] .app-content {
	background: #222838;
	margin-left: 250px;
	flex-grow: 1;
	overflow: auto;
}

[dir="rtl"] .app-content {
	margin-left: initial;
	margin-right: 0;
}

@media (min-width: 992px) {
	.app-content {
		margin-left: 250px;
	}
	[dir="rtl"] .app-content {
		margin-left: initial;
		margin-right: 250px;
	}
}

.app-navbar {
	min-height: 75px;
	background:#293040;
	border-bottom: 1px solid var(--gray-100) !important;
}

[data-theme-style="dark"] .app-navbar2 {
	min-height: 70px;
	background:#222838;
	border-bottom: 1px solid #3b4254 !important;
}

.app-navbar2 {
	min-height: 70px;
	background:#f8fbff;
    border-bottom: 1px solid var(--gray-100) !important;
}


.navbar .dropdown-item svg {
	color: var(--gray-700);
}

.navbar .dropdown-item:active svg {
	color: #fff;
}

[data-theme-style="dark"] .app-navbar {
	border-color: var(--gray-200);
}

.dropdown-item svg {
	color: var(--gray-600);
}

.dropdown-item:active svg {
	color: var(--white);
}

/* Qr Code */
#qr {
	padding: 1rem;
}
#qr img {
	width: 100%;
	height: auto;
}

.pickr .pcr-button {
	width: 100% !important;
}

/* Footer */
.app-footer {
	margin: 3rem 0 0 0;
	padding-top: 3rem;
	padding-bottom: 3rem;
	border-top: 1px solid var(--gray-100);
}

.app-footer {
	color: var(--gray-700);
}

.app-footer a:not(.dropdown-item), .app-footer a:hover:not(.dropdown-item) {
	color: var(--gray-700);
}

.app-footer a.icon {
	color: var(--gray-700);
}

.app-footer button, .app-footer button:hover {
	color: var(--gray-700) !important;
}

.footer-logo {
	max-height: 2.5rem;
	height: 2.5rem;
}

/* Filters */
.filters-dropdown {
	width: 18rem;
	max-height: 30rem;
	overflow-y: auto;
}

canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.modal-header {
	padding: 1rem;
	border-bottom: 0;
	border-radius:6px;
}

.modal-subheader {
	padding: 0 1rem;
	border-bottom: 0;
	margin: 0;
}

.modal-content {
	padding: 1rem;
	border: none;
	box-shadow: none;
	-webkit-box-shadow: none;
}

/* Forms */
.input-group-text {
	font-size: 0.9rem;
}

/* Custom breadcrumbs */
.custom-breadcrumbs {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.custom-breadcrumbs > li {
	margin-right: .5rem;
}

.custom-breadcrumbs > li > a {
	color: var(--gray);
}

[data-theme-style="dark"] .custom-breadcrumbs > li > a {
	color: #fff;
}

.custom-breadcrumbs > li > svg {
	color: var(--gray-400);
	margin-left: .5rem;
}

.custom-breadcrumbs > li.active {
}

/* Helper classes */
.list-style-none {
	list-style: none;
	padding: 0;
}

.appearance-none {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

.select-custom-altum {
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232D3748' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
	padding: .375rem 1.75rem .375rem .75rem;
	background-color: var(--gray-100);
	height: 100%;
}

.clickable {
	cursor: pointer;
}

.icon-favicon {
	width: 2rem;
	height: auto;
}

/* Navbar custom menu */
.navbar-main .navbar-nav > li {
	padding: .5rem 0 !important;
}

@media (min-width: 992px) {
	.navbar-main .navbar-nav > li {
		padding: .5rem !important;
	}
}

.navbar-logo {
	max-height: 2rem;
	height: 2rem;
}

.navbar-logo-app {
	max-height: 2rem;
	height: 2rem;
	-webkit-filter: invert(100%);
	filter: invert(100%);
}

[data-theme-style="dark"] .navbar-logo {
	max-height: 2rem;
	height: 2rem;
	-webkit-filter: invert(100%);
	filter: invert(100%);
}

[data-layout-mode=dark] .ifi-ball {
	-webkit-filter: invert(100%) !important;
	filter: invert(100%) !important;
}

/* Dark theme: Invert logo */
[data-theme-style="dark"] .logo-ifi {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

/* Light theme: No filter applied */
.logo-ifi {
    -webkit-filter: none;
    filter: none;
}


.navbar-avatar {
	width: 20px;
	height: 20px;
	border-radius: .25rem;
}

.navbar-custom-toggler {
	padding: 0.5rem .8rem;
	font-size: 1.25rem;
	line-height: 1;
	background-color: transparent;
	border-radius: .25rem;

	color: var(--gray-500);
	border-color: var(--gray-300);
}

.chart-container {
	position: relative;
	margin: auto;
	height: 215px;
	width: 100%;
}

.chart-container2 {
	position: relative;
	margin: auto;
	height: 40px;
	width: 100%;
}

/* Index */
.index-header {
	font-size: 3.1rem;
	font-weight: 600;

	background: linear-gradient(80deg , var(--blue-300), var(--blue-500) 30%, var(--primary));
	background-clip: border-box;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
@media (min-width: 992px) {
	.index-header {
		font-size: 3.5rem;
	}
}

.index-subheader {
	font-size: 1.35rem;
	color: var(--gray-500);
}

.index-button {
    padding: 0.6rem 4rem;
}

.index-hero {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='560' preserveAspectRatio='none' viewBox='0 0 1920 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1084%26quot%3b)' fill='none'%3e%3cpath d='M0 312.3L10 347.17L20 377.14L30 396.03L40 329.54L50 289.18L60 236.71L70 302.17L80 369.8L90 303.82L100 253.76L110 286.71L120 319.36L130 383.25L140 376.95L150 407.21L160 391.17L170 401.74L180 362.63L190 299.32L200 229.66L210 232.76L220 269.94L230 281.25L240 245.49L250 232.64L260 196.98L270 135.18L280 99.92L290 79.23L300 89.07L310 114.52L320 117.44L330 128.32L340 84.85L350 80.51L360 130.4L370 141.25L380 123.86L390 127.6L400 195.16L410 247.05L420 187.73L430 165.27L440 159.29L450 176.39L460 246.19L470 214.27L480 184.38L490 127.68L500 135.64L510 125.15L520 92.55L530 147.34L540 113.89L550 178.47L560 236.86L570 297.44L580 355.25L590 423.1L600 474.94L610 496.25L620 435.04L630 401.52L640 470.37L650 422.46L660 401.39L670 466.78L680 458.75L690 466.58L700 490.72L710 546.48L720 553.29L730 485.33L740 455.07L750 434.63L760 495.62L770 534.45L780 464.98L790 443.06L800 390.02L810 385L820 445.56L830 409.68L840 447.24L850 407.44L860 449.7L870 497.8L880 534.02L890 527.89L900 491.79L910 490.79L920 512.19L930 450.18L940 434.01L950 379.33L960 446.12L970 449.12L980 495.32L990 462.04L1000 440.19L1010 466.06L1020 531.61L1030 480.42L1040 516.89L1050 521.73L1060 533.16L1070 526.79L1080 502.28L1090 455.54L1100 407.72L1110 403.31L1120 457.46L1130 456.51L1140 441.3L1150 500.75L1160 462.05L1170 454.62L1180 436.88L1190 497.96L1200 488.15L1210 442.07L1220 394.16L1230 359.11L1240 391L1250 339.96L1260 395.54L1270 441.38L1280 411.81L1290 391.91L1300 373.14L1310 306.26L1320 274.31L1330 225.38L1340 164.56L1350 141.51L1360 137.74L1370 114.84L1380 106.14L1390 76.81L1400 94.98L1410 97.42L1420 89.71L1430 91.87L1440 36.11L1450 12.74L1460 25.32L1470 86.4L1480 140.16L1490 171.37L1500 164.91L1510 209.54L1520 144.73L1530 188.88L1540 195.31L1550 248.38L1560 316.51L1570 332.04L1580 291.54L1590 235.61L1600 211.01L1610 227.58L1620 238.83L1630 279.95L1640 338.16L1650 272.75L1660 268.61L1670 200.23L1680 168.78L1690 114.86L1700 164.69L1710 214.38L1720 242.44L1730 219.78L1740 274.61L1750 296.67L1760 328.74L1770 380.43L1780 413.04L1790 356.8L1800 355.5L1810 409.72L1820 476.1L1830 507.35L1840 533.44L1850 467.4L1860 451.06L1870 447.56L1880 486.52L1890 431.07L1900 410.6L1910 343.55L1920 382.72' stroke='rgba(207%2c 223%2c 252%2c 1)' stroke-width='2'%3e%3c/path%3e%3cpath d='M0 312.3L10 347.17L20 377.14L30 396.03L40 329.54L50 289.18L60 236.71L70 302.17L80 369.8L90 303.82L100 253.76L110 286.71L120 319.36L130 383.25L140 376.95L150 407.21L160 391.17L170 401.74L180 362.63L190 299.32L200 229.66L210 232.76L220 269.94L230 281.25L240 245.49L250 232.64L260 196.98L270 135.18L280 99.92L290 79.23L300 89.07L310 114.52L320 117.44L330 128.32L340 84.85L350 80.51L360 130.4L370 141.25L380 123.86L390 127.6L400 195.16L410 247.05L420 187.73L430 165.27L440 159.29L450 176.39L460 246.19L470 214.27L480 184.38L490 127.68L500 135.64L510 125.15L520 92.55L530 147.34L540 113.89L550 178.47L560 236.86L570 297.44L580 355.25L590 423.1L600 474.94L610 496.25L620 435.04L630 401.52L640 470.37L650 422.46L660 401.39L670 466.78L680 458.75L690 466.58L700 490.72L710 546.48L720 553.29L730 485.33L740 455.07L750 434.63L760 495.62L770 534.45L780 464.98L790 443.06L800 390.02L810 385L820 445.56L830 409.68L840 447.24L850 407.44L860 449.7L870 497.8L880 534.02L890 527.89L900 491.79L910 490.79L920 512.19L930 450.18L940 434.01L950 379.33L960 446.12L970 449.12L980 495.32L990 462.04L1000 440.19L1010 466.06L1020 531.61L1030 480.42L1040 516.89L1050 521.73L1060 533.16L1070 526.79L1080 502.28L1090 455.54L1100 407.72L1110 403.31L1120 457.46L1130 456.51L1140 441.3L1150 500.75L1160 462.05L1170 454.62L1180 436.88L1190 497.96L1200 488.15L1210 442.07L1220 394.16L1230 359.11L1240 391L1250 339.96L1260 395.54L1270 441.38L1280 411.81L1290 391.91L1300 373.14L1310 306.26L1320 274.31L1330 225.38L1340 164.56L1350 141.51L1360 137.74L1370 114.84L1380 106.14L1390 76.81L1400 94.98L1410 97.42L1420 89.71L1430 91.87L1440 36.11L1450 12.74L1460 25.32L1470 86.4L1480 140.16L1490 171.37L1500 164.91L1510 209.54L1520 144.73L1530 188.88L1540 195.31L1550 248.38L1560 316.51L1570 332.04L1580 291.54L1590 235.61L1600 211.01L1610 227.58L1620 238.83L1630 279.95L1640 338.16L1650 272.75L1660 268.61L1670 200.23L1680 168.78L1690 114.86L1700 164.69L1710 214.38L1720 242.44L1730 219.78L1740 274.61L1750 296.67L1760 328.74L1770 380.43L1780 413.04L1790 356.8L1800 355.5L1810 409.72L1820 476.1L1830 507.35L1840 533.44L1850 467.4L1860 451.06L1870 447.56L1880 486.52L1890 431.07L1900 410.6L1910 343.55L1920 382.72L1920 560L0 560z' fill='url(%23SvgjsLinearGradient1085)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1084'%3e%3crect width='1920' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='SvgjsLinearGradient1085'%3e%3cstop stop-opacity='0.65' stop-color='rgba(207%2c 223%2c 252%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-opacity='0' stop-color='white' offset='0.8'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
}

.index-card-image {
	border: 2px solid var(--gray-100);
}

[data-theme-style="dark"] .ck.ck-editor__main>.ck-editor__editable{
    border-top:0!important;
    background-color:#2b3139;
    border-color:var(--vz-input-border)!important;
    -webkit-box-shadow:none!important;
    box-shadow:none!important
}

/* Login & register */
.login-background {
	background-color: #f2fbfd;
	background-image:  radial-gradient(#10B77F 1.1px, transparent 1.1px), radial-gradient(#10B77F 1.1px, #f2fbfd 1.1px);
	background-size: 44px 44px;
	background-position: 0 0,22px 22px;

}
[data-theme-style="dark"].login-background {
	background-color: #1a1a1a;
	background-image:  radial-gradient(#225443 1.1px, transparent 1.1px), radial-gradient(#225443 1.1px, #1a1a1a 1.1px);
	background-size: 44px 44px;
	background-position: 0 0,22px 22px;
}

.register-background {
	background-color: #f2fbfd;
	background-image:  radial-gradient(#10B77F 1.1px, transparent 1.1px), radial-gradient(#10B77F 1.1px, #f2fbfd 1.1px);
	background-size: 44px 44px;
	background-position: 0 0,22px 22px;
}

[data-theme-style="dark"].register-background {
	background-color: #1a1a1a;
	background-image:  radial-gradient(#225443 1.1px, transparent 1.1px), radial-gradient(#225443 1.1px, #1a1a1a 1.1px);
	background-size: 44px 44px;
	background-position: 0 0,22px 22px;
}

/* Header container */
.header {
	margin-bottom: 1.5rem;
}

.user-avatar {
	border-radius: 50%;
	max-width: 70px;
	max-height: 70px;
}

/* Others */
.container-disabled {
	pointer-events: none;
	opacity: .5;
}

.container-disabled-simple {
	pointer-events: none;
}
/* Tables */
.table-custom-container {
	border-radius: .25rem;
	border: 1px solid var(--gray-100);
}

[data-theme-style="dark"] .table-custom {
	margin-bottom: 0;
	background: #293040;
}

.table-custom {
	margin-bottom: 0;
	background: #fff;
}
.col-lg-25 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 13.33333333%;
    }
.ticon {
    display: inline-block; /* Ensure the icon respects transformations */
    transform: rotate(15deg); /* Rotate 10 degrees on its axis */
}
.micon {
    display: inline-block; /* Ensure the icon respects transformations */
    transform: rotate(-15deg); /* Rotate 10 degrees on its axis */
}
	
[data-theme-style="dark"] .table-custom thead th {
	border-top: 0;
	border-bottom: 0;
	color: var(--gray);
}

.table-custom thead th {
	border-top: 0;
	color: var(--gray);
}

.table-custom th {
    padding: 0.8rem 1rem;
	font-size: .9rem;
}

[data-theme-style="dark"] .table-custom thead th {
	color: var(--gray-800)
}

[data-theme-style="dark"] .table-custom tr:nth-child(even) {
	background: #293040;
	border-top:1px solid #3b4454;
}

.table-custom tr:nth-child(even) {
	background: #fff;
	border-top:1px solid #deeaf2;
}

.table-custom td {
	padding: 1rem 1rem;
	vertical-align: middle;
}

.table-custom tbody tr td {
	border-bottom: 1px solid var(--gray-100) !important;
}

[data-theme-style="dark"] .table-custom tbody tr td {
	background: #293040;
	border-bottom: 1px solid #3b4454 !important;
}

.table-custom tbody tr {
	transition: all .3s ease-in-out;
}

.table-custom tbody tr:hover td {
}

/* Custom Radio Boxes */
.custom-radio-box {
	cursor: pointer;
}

.custom-radio-box .custom-radio-box-main-text {
	font-size: 1.15rem;
	font-weight: bold;
}

.custom-radio-box .custom-radio-box-main-icon {
	font-size: 1.25rem;
}

.custom-radio-box input[type="radio"] + div {
	transition: all .3s ease-in-out;
	border: 1px solid var(--gray-200);
}

[data-theme-style="dark"] .custom-radio-box input[type="radio"] + div {
	transition: all .3s ease-in-out;
	border: 2px solid var(--gray-200);
	background: #2f3647;
}

.custom-radio-box input[type="radio"]:checked + div {
	border: 2px solid var(--primary);
}

.custom-radio-box input[type="radio"]:hover + div {
	border: 2px solid var(--primary);
}

/* Pricing cards */
.pricing-card {
	border-top: 3px solid var(--blue-100);
}

/* Round circles */
.round-circle-md {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

.round-circle-lg {
	width: 4.5rem;
	height: 4.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

.circle {
    background-color: #62bd19;
}

.circle-mon {
    background-color: #62bd19;
	margin-top: 9px;
}

.red-circle {
	background-color:#de3618;
}

.red-circle-mon {
	background-color:#de3618;
	margin-top: 11px;
}

/* Badge colors */
.badge-primary {
	color: hsl(211, 100%, 35%);
	background-color: hsl(211, 100%, 85%);
}

[data-theme-style="dark"] .badge-primary {
	background-color: hsl(211, 100%, 35%);
	color: hsl(211, 100%, 85%);
}

.badge-secondary {
	color: hsl(208, 7%, 35%);
	background-color: hsl(208, 7%, 85%);
}

[data-theme-style="dark"] .badge-secondary {
	background-color: hsl(208, 7%, 35%);
	color: hsl(208, 7%, 85%);
}

.badge-success {
	color: hsla(134, 50%, 30%, 1);
	background-color: hsla(134, 50%, 85%, 1);
}

[data-theme-style="dark"] .badge-success {
	background-color: hsla(134, 50%, 30%, 1);
	color: hsla(134, 50%, 85%, 1);
}

.badge-danger {
	color: hsla(354, 70%, 35%, 1);
	background-color: hsla(354, 70%, 85%, 1);
}

[data-theme-style="dark"] .badge-danger {
	background-color: hsla(354, 70%, 35%, 1);
	color: hsla(354, 70%, 85%, 1);
}

.badge-warning {
	background-color: hsla(45, 100%, 85%, 1);;
	color: hsla(40, 80%, 30%, 1);
}

[data-theme-style="dark"] .badge-warning {
	background-color: hsla(50, 20%, 20%, 1);
	color: hsla(45, 100%, 85%, 1);
}

.badge-info {
	color: hsla(188, 60%, 30%, 1);
	background-color: hsla(188, 78%, 85%, 1);
}

[data-theme-style="dark"] .badge-info {
	background-color: hsla(188, 60%, 30%, 1);
	color: hsla(188, 78%, 85%, 1);
}

.badge-light {
	color: #fff;
	background-color: hsl(134deg 61% 41%);
}

[data-theme-style="dark"] .badge-light {
	background-color: hsl(134deg 61% 41%);
	color: hsl(210, 17%, 95%);
}

.badge-dark {
	color: hsla(210, 10%, 90%, 1);
	background-color: hsla(210, 10%, 20%, 1);
}

[data-theme-style="dark"] .badge-dark {
	background-color: hsla(210, 10%, 90%, 1);
	color: hsla(210, 10%, 20%, 1);
}

/* Invoice css */
.invoice-table th {
	border-top: 0 !important;
}

@media print {
	.invoice-logo {
		filter: grayscale(100%);
	}
}

/* Base animation */
.pingt-animate {
	-webkit-animation-duration:1s;
	animation-duration:1s;
}

.pingt-animate-fill-both {
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

.pingt-animate-fill-none {
	-webkit-animation-fill-mode:none;
	animation-fill-mode:none;
}

@-webkit-keyframes fadeIn{
	0% {
		opacity:0
	}
	to {
		opacity:1
	}
}
@keyframes fadeIn{
	0% {
		opacity:0
	}
	to {
		opacity:1
	}
}
.pingt-animate-fade-in {
	-webkit-animation-name:fadeIn;
	animation-name:fadeIn
}

/* App sub menu */
.account-header-navbar {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding-left: 0;
	list-style: none;
	margin: 0 0 1.5rem 0;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 .25rem;
	border-bottom:1px solid #deeaf2 !important;
}

@media (min-width: 992px) {
	.account-header-navbar {
		flex-direction: row;
	}
}

.account-header-navbar .nav-item {
	margin-bottom: .5rem;
	min-width: fit-content;
}

.account-header-navbar .nav-link {
	padding: .5rem 1.5rem;
	color: #000;
	font-size: .9rem;
}
[data-theme-style="dark"] .account-header-navbar {
	
    border-bottom: 1px solid #374151 !Important;
}

[data-theme-style="dark"] .account-header-navbar .nav-link {
	padding: .5rem 1.5rem;
	color: #ffffff;
	font-size: .9rem;
}

[data-theme-style="dark"] .account-header-navbar .nav-link:hover {
	color: var(--gray-700);
}

.account-header-navbar .nav-link:hover {
	color: #000;
}

[data-theme-style="dark"] .account-header-navbar .nav-link.active {
	color: #FFF;
	border-bottom: 3px solid #5056ed;
}

.account-header-navbar .nav-link.active {
	color: #000;
	border-bottom: 3px solid #5056ed;
}

.account-header-navbar .nav-link.active2 {
	color: #000;
	border-left: 3px solid #0185ff;
    font-weight: 700;
}

/* Blog */
.blog-post-image {
	max-height: 25rem;
	object-fit: cover;
}

/* File input */
.pingt-file-input {
	padding: 1rem;
	background: #f8fbff;
	border: 1px solid var(--gray-100);
	border-radius: 4px;
	cursor: pointer;
	font-size: .9rem;
}

[data-theme-style="dark"] .pingt-file-input {
	padding: 1rem;
	background: #222838;
	border: 1px solid var(--gray-100);
	border-radius: .25rem;
	cursor: pointer;
	font-size: .9rem;
}

.pingt-file-input:hover {
	border-color: #222838;
}

.pingt-file-input::file-selector-button {
	border: 0;
	padding: .4rem .75rem;
	border-radius: .25rem;
	background-color: var(--white);
	cursor: pointer;
	font-size: .9rem;
	margin-right: 1rem;
}

.ring-container {
    position: relative;
}

.circle-dash {
    width: 15px;
    height: 15px;
    background-color: #62bd19;
    border-radius: 50%;
    
}

.circle-pause {
    width: 13px;
    height: 13px;
    background-color: #ff7300;
    border-radius: 50%;
    
}
.circle-down {
	width: 13px;
	height: 13px;
	background-color: #de3618;
	border-radius: 50%;
}

.circle {
    width: 15px;
    height: 15px;
    background-color: #62bd19;
    border-radius: 50%;
    position: absolute;
    top: 23px;
    left: 23px;
}

.ringring {
    border: 3px solid #62bd19;
    -webkit-border-radius: 30px;
    height: 25px;
    width: 25px;
    position: absolute;
    left: 15px;
    top: 15px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
.ant-tag {
    box-sizing: border-box;
    margin: 5px 8px 0 0;
    color: #000000d9;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    -webkit-font-feature-settings: "tnum","tnum";
    font-feature-settings: "tnum","tnum";
    display: inline-block;
    height: auto;
    padding: 0 7px;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    background: #fafafa;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    opacity: 1;
    transition: all .3s;
}
.ant-tag-success {
    color: #fff;
    background: #28a745;
    border-color: #28a745;
}
[data-theme-style="dark"] .ant-tag-success {
	background-color: #28a745;
	color: #fff;
}
.icon-arrow-right {
	background-image: url(../images/icon-arrow-right.svg);
	width: 18px;
	height: 14px
}

.icon-arrow-right.is-dark {
	background-image: url(../images/icon-arrow-right-dark.svg);
	width: 18px;
	height: 14px
}

.icon-check {
	background-image: url(../images/icon-check.svg);
	width: 15px;
	height: 14px
}

.icon-plus {
	background-image: url(../images/icon-plus.svg);
	width: 17px;
	height: 14px
}

.icon-house {
	background-image: url(../images/icon-house.svg);
	width: 17px;
	height: 17px
}
.btnss {
	display: inline-block;
	padding: 15px 22px;
	background: #ed553b;
	border: 2px solid transparent;
	outline: 0;
	border-radius: 5px;
	font-family: Graphik, sans-serif;
	font-size: 18px;
	line-height: 19px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	color: #fff;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: background .2s, border-color .2s, color .2s;
}

.btns {
    display: inline-block;
    padding: .5rem 1rem;
    background: #ed553b;
    border: 2px solid transparent;
    outline: 0;
    border-radius: 5px;
    font-size: 15px;
    line-height: 19px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: background .2s, border-color .2s, color .2s;
}

.btns:hover {
	background: 0 0;
	border-color: #ed553b;
	color: #ed553b;
	text-decoration: none;
}

/* my blog css */

ain.blog .single-header-img {
    object-fit: cover;
}
article.single-header {
    width: 100%;
    padding: 15px 25px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: #3d5266;
}
article.single-header div.announcement {
    flex-basis: 400px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

article.single-header div.announcement h2.announcement-title {
    font-size: 1.375rem;
}

article.single-header div.announcement h2.announcement-title, article.single-header div.announcement div.categories, article.single-header div.announcement p.announcement-author {
    margin-bottom: 12px;
}

article.single-header div.announcement p.announcement-author {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: .9em;
    font-weight: 500;
    color: #fff;
}

article.single-header div.announcement p.announcement-author .author-photo {
    width: 25px;
    height: 25px;
    border: 1px solid;
    border-radius: 100%;
    margin: 6px 0;
}

article.single-header div.announcement time {
    margin-left: 5px;
}

.share-blog, .article-details {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: center;
    margin-top: 5px;
    background: rgba(5,114,236,.1);
    width: 100%;
    margin: 0 auto;
    padding: 1em;
    -webkit-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
}

.share-blog .share-icons, .article-details .share-icons {
    flex-grow: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.share-blog .share-icons p.share-this-page, .article-details .share-icons p.share-this-page {
    display: inline-flex;
    flex-basis: 110px;
    justify-content: flex-start;
    margin-bottom: 0;
    font-style: italic;
    font-size: .85em;
}
.share-blog .share-icons .icons-container, .article-details .share-icons .icons-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-basis: 100px;
    justify-content: flex-end;
}

/* end my blog css */


/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  max-width: auto;
  left: auto;
  right: auto;
  
}


/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

.cover__change-img {
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
}
.cover__change.cover__change--positive {
    color: #3cd483;
}
.coin__change-img.coin__change-img--negative {
    margin-top: -2px;
	color: #ff6060;
}

.sm\:mt-8 {
    margin-top: 2rem;
}
.flex-1 {
    flex: 1 1;
}

.mb-4 {
    margin-bottom: 1rem;
}
.flex-2 {
    flex: 2 2;
}
.mt-8 {
    margin-top: 2rem;
}

.status-page-legend {
	margin-top: 0;
	display: flex;
    margin: 10px -10px 0;
}

.status-page-legend-operational:hover {
    color: #50b83c;
}
.status-page-legend-degraded:hover {
    color: #f49342;
}
.status-page-legend-downtime:hover {
    color: #DE3618;
}

.status-page-legend-maintenance:hover {
    color: #5F59F7;
}

.status-page-legend-monitored:hover {
    color: #454f5b;
}

.status-page-legend-item {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: #dfe3e8;
    height: 16px;
}
.status-page-resource-ticks {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 0;
}
.status-page-resource-tick {
    width: 100%;
    padding: 0 1px;
}
.status-page-resource-tick-inner {
    background: #dfe0e1;
    height: 40px;
    border-radius: 20px;
}
.card4 {
	border-right: 1px solid #dde4ee;
	border-bottom: 1px solid #dde4ee;
    height: 377px;
    position: relative;
    width: 240px;
	top:-70px;
	right: 606px;
	line-height: 24px;
	padding: 0 0 0 13px;
	background:#fff;
	border-bottom-right-radius: 6px;
}

.card-body4 {
	flex: 1 1 auto;
	min-height: 1px;
	padding: 1.25rem;
	background: #fff;
	color: #000;
}
.btn-outline-secondary {
	color: #4a5464;
	border-color: #4a5464
}

.btn-outline-secondary:hover {
	color: #fff;
	background-color: #4a5464;
	border-color: #4a5464
}

.btn-outline-secondary.focus,
.btn-outline-secondary:focus {
	box-shadow: 0 0 0 .2rem rgba(74, 84, 100, .5)
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
	color: #4a5464;
	background-color: transparent
}

.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.show>.btn-outline-secondary.dropdown-toggle {
	color: #fff;
	background-color: #4a5464;
	border-color: #4a5464
}
.popa {
    background-color: rgb(240, 243, 248);
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: -1;
}
.tag_go_pro_hdr {
    background: linear-gradient(#c1e3ff, #e4f2ff 50%, #fff);
}
.p20 {
    padding: 20px;
}
.wow_content {
    background-color: #fff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
    border-radius: 10px;
    padding: 15px 15px 1px;
	width: auto;
	height:319px;
}
.tag_boost_help {
    justify-content: space-between;
}
.valign {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.tag_boost_help > ul {
    width: 100%;
    max-width: 450px;
    margin: 0;
    padding: 0 0 0 10px;
    list-style-type: none;
}
.tag_boost_help > ul > svg {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0 0 10px;
}
.tag_boost_help > ul h3 {
    margin: 0 0 15px;
    font-size: 26px;
    font-family: 'Readex Pro', sans-serif;
}
.tag_boost_help > ul li {
    font-weight: normal;
    font-size: 17px;
    margin: 0 0 10px;
    padding: 0 0 0 30px;
    position: relative;
}
.tag_boost_help > ul h3 .pro-badgez {
    padding: 0 5px;
    font-size: 11px;
    line-height: 20px;
    font-weight: normal;
}
.pro-badgez {
    background: #ff7043;
    color: #ffffff;
    padding: 4px 5px 0;
    border-radius: 3px;
    font-size: 13px;
    vertical-align: middle;
    line-height: 16px;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 1px;
}
.tag_boost_help > ul li:before {
    content: '';
    background-image: url(https://pingt.io/assets/images/okbro.svg);
    width: 18px;
    height: 18px;
    top: 2px;
    left: 4px;
    position: absolute;
    background-position: center;
    background-size: contain;
}
.plan__list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 12px;
    background-image: url(../images/svg/checkmark-alt.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}
.btn-outline-secondary {
	color: #4a5464;
	border-color: #4a5464
}

.btn-outline-secondary:hover {
	color: #fff;
	background-color: #4a5464;
	border-color: #4a5464
}

.btn-outline-secondary.focus,
.btn-outline-secondary:focus {
	box-shadow: 0 0 0 .2rem rgba(74, 84, 100, .5)
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
	color: #4a5464;
	background-color: transparent
}

.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.show>.btn-outline-secondary.dropdown-toggle {
	color: #fff;
	background-color: #4a5464;
	border-color: #4a5464
}

/* custom css for card */

.headers {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}

.containers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    max-width: 1200px;
}

.cards {
    width: calc(27.66% - 40px);
    height: 140px;
    margin: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #ccc;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.cards:hover .overlay {
    transform: translateY(0);
}

.cards:hover .overlay span {
    display: block;
}

.cards img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

.cards .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(100%);
    transition: all 0.5s;
}

.cards .overlay span {
    display: none;
    margin-top: -6px;
    font-size: 20px;
}

.website-info-container {
    margin-top: 20px;
    margin-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.website-info {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.website-info a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #333;
}

.footers {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
    font-size: 12px;
    border-top: 1px solid #ccc;
    margin-top: 20px;
}

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu li {
    margin-bottom: 10px;
}

.menu a {
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    display: block;
    padding: 10px;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

.menu a:hover {
    background-color: #ccc;
}

.expiration-date {
    font-size: 14px;
    margin-top: 7px;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the tab buttons */
 .tab {
     overflow: hidden;
     border: 1px solid #ccc;
     background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
 .tab button {
     background-color: inherit;
     float: left;
     border: none;
     outline: none;
     cursor: pointer;
     padding: 14px 16px;
     transition: 0.3s;
     font-size: 17px;
}
/* Change background color of buttons on hover */
 .tab button:hover {
     background-color: #ddd;
}
/* Create an active/current tablink class */
 .tab button.active {
     background-color: #ccc;
}
/* Style the tab content */
 .tabcontent {
     display: none;
     padding: 6px 12px;
     border: 1px solid #ccc;
     border-top: none;
}
 .nav-tabs .nav-link {
     border: none;
     border-top-left-radius: .25rem;
     border-top-right-radius: .25rem;
}
 .nav-tabs .nav-link.active {
     border-color: #007bff #007bff #fff;
     border-style: solid;
     border-width: 1px;
     border-bottom: none;
     background-color: #f3f6f9 !important;
}

[data-layout-mode=dark] .nav-tabs .nav-link.active {
     border-color: #007bff #007bff #fff;
     border-style: solid;
     border-width: 1px;
	 color:#ced4da;
     border-bottom: #222838 !important;
     background-color: #222838 !important;
}

 .nav-tabs {
     border-bottom: 1px solid #007bff;
}
 .navbar-brand {
     padding: 0;
}
 .navbar-brand img {
     height: 40px;
     margin-right: 10px;
}
 .logo {
     margin-top: 10px;
     margin-bottom: 10px;
}
 .sidebar {
     background-color: #f5f5f5;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     padding-top: 50px;
}
 .sidebar ul {
     list-style: none;
     margin: 0;
     padding: 0;
}
 .sidebar li {
     padding: 10px;
}
 .my-content {
     margin-left: 200px;
    /* Adjust this to match the width of your sidebar */
}
.trial-email {
  margin-top: 10px;
}
.card-img {
  display: flex;
  justify-content: center;
}

.card-img img {
  max-height: 150px;
  max-width: 100%;
  object-fit: contain;
}
logo-container {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #<?php echo substr(md5(rand()), 0, 6); ?>; /* generate random background color */
  display: flex;
  align-items: center;
  justify-content: center;
}

.logos {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.logo-text {
  font-size: 36px;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.choices {
  display: inline-block;
  position: relative;
}

.choices select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  border: 1px solid #ced4da;
  border-radius: 4px;
  color: #495057;
  cursor: pointer;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  width: 100%;
}

.choices select:focus {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.choices::before {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-weight: 900;
  font-size: 0.75rem;
  color: #495057;
  pointer-events: none;
}

.choices select[aria-expanded="true"] + ::before {
  content: "\f077";
}


 /* Custom styles for the soccer pitch card */
        .soccer-card {
			background-color: #8BC34A; /* Green color like a soccer pitch */
			height: 350px;
            border-radius: 6px;
            position: relative;
            display: flex;
			color: white;
            justify-content: center;
            align-items: center;
        }

        .soccer-card .time {
            font-size: 20px;
			margin-top: -190px;
        }

        .soccer-card .club-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
		
		/* Draw the field lines */
        .soccer-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 2px solid #e9ebec; /* Outer boundary */
            border-radius: 8px;
        }

        /* Center line */
        .center-line {
            position: absolute;
            width: 340px;
            height: 2px;
            background-color: #e9ebec;
            top: 50%;
			transform: translateY(-50%) rotate(-90deg);
        }

        /* Center circle */
        .center-circle {
            position: absolute;
            width: 80px;
            height: 80px;
            border: 2px solid #e9ebec;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* Left and right penalty boxes */
        .penalty-box-left,
        .penalty-box-right {
            position: absolute;
            top: 10%;
            bottom: 10%;
            width: 20%;
            border: 2px solid #e9ebec;
        }

        .penalty-box-left {
            left: 0%;
        }

        .penalty-box-right {
            right: 0%;
        }
        
        .soccer-card .club-name {
            margin-top: 5px;
            font-size: 19px;
            text-align: center;
        }

        .soccer-card .left,
        .soccer-card .right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column; /* Stack icon and name vertically */
            align-items: center;    /* Center align icon and name */
            gap: 5px;               /* Space between icon and name */
        }


        .soccer-card .left {
            left: 110px;
        }

        .soccer-card .right {
            right: 125px;
        }


/* carrier css */


#perso_stat1{
    width: 185px;
    position: relative;
    float: left;
    height: 275px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

#perso_stat1_chart{
    width:185px;
    height:185px;
    position: relative;
	margin-left: 20px;
	font-size:20px;
}

.perso_stat_title{
    text-align:center;
    font-size:15px;
    line-height:18px;
    margin-top:20px;
}

#perso_stat2{
    margin-left:185px;
    padding-left:50px;
    overflow:hidden;
}

.perso_fp_stats .doughnutSummaryTitle{
    width:100px;
    margin-left:10px;
	font-size: 30px;
}

.perso_stat_bar{
    height:200px;
    width:110%;
    border-bottom:1px solid #ccced1;
    margin-bottom:100px;
}

.perso_stat_bar .perso_stat_col{
    height:200px;
}

.perso_stat_col{
    width:14.28%;
    width: calc(100% / 7);
    float:left;
    position: relative;
}

#perso_stat2 .perso_stat_bar .perso_stat_col{
    width:12.5%;
    float:left;
    position: relative;
}

.player_karrier .perso_stat_bar .perso_stat_col{
    width:13%;
}

.perso_col_icon{
    background-image:url(/assets/img/asset.png);
    width:44px;
    height:44px;
    margin:0 auto;
}

.perso_stat_col_goal .perso_col_icon{
    background-position:440px 0;
}

.perso_stat_col_goal:hover .perso_col_icon{
    background-position:440px 44px;
}

.perso_stat_col_yellow .perso_col_icon{
    background-position:396px 0;
}

.perso_stat_col_yellow:hover .perso_col_icon{
    background-position:396px 44px;
}

.perso_stat_col_red .perso_col_icon{
    background-position:352px 0;
}

.perso_stat_col_red:hover .perso_col_icon{
    background-position:352px 44px;
}

.perso_stat_col_starter .perso_col_icon{
    background-position:308px 0;
}

.perso_stat_col_starter:hover .perso_col_icon{
    background-position:308px 44px;
}

.perso_stat_col_replace .perso_col_icon{
    background-position:176px 0;
}

.perso_stat_col_replace:hover .perso_col_icon{
    background-position:176px 44px;
}

.perso_stat_col_owngoal .perso_col_icon{
    background-position:88px 0;
}

.perso_stat_col_owngoal:hover .perso_col_icon {
    background-position:88px 44px;
}

.perso_stat_col_bench .perso_col_icon{
    background-position:44px 0;
}

.perso_stat_col_bench:hover .perso_col_icon {
    background-position:44px 44px;
}

.perso_col_dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ccced1;
    position: absolute;
    bottom:-5px;
    left:50%;
    -webkit-transform:translateX(-50%);
            -ms-transform:translateX(-50%);
        transform:translateX(-50%);
}

.perso_stat_col:hover .perso_col_dot{
    background:#ef3030;
}

.perso_col_bottom{
    position: absolute;
    bottom: -12px;
    -webkit-transform: rotate(-90deg) translateY(50%);
            -ms-transform: rotate(-90deg) translateY(50%);
        transform: rotate(-90deg) translateY(50%);
    -webkit-transform-origin: right bottom;
            -ms-transform-origin: right bottom;
        transform-origin: right bottom;
    text-align: right;
    right: 50%;
    line-height: 16px;
    font-size: 14px;
    color: #b4bbc2;
}

.perso_stat_col:hover{
    cursor:pointer;
}

.perso_stat_col:hover .perso_col_bottom{
    color: #32f900;
}

.perso_col_bg {
    bottom: 10px;
    position: absolute;
    width: 70%;
    left: 15%;
    border-radius: 4px;
    height: 146px;
}

.perso_stat_col .perso_col_data{
    background: #2faf25;
}

.perso_col_data {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 4px;
    background: #dee2e7;
    height:0;
    -webkit-transition:height 1s ease;
    -o-transition:height 1s ease;
    transition:height 1s ease;
}

.perso_col_popup {
    display: none;
    position: absolute;
    text-align: center;
    width: auto;
    left: 50%;
    top: -15px;
    -webkit-transform: translateY(-100%) translateX(-50%);
            -ms-transform: translateY(-100%) translateX(-50%);
        transform: translateY(-100%) translateX(-50%);
    min-height: 30px;
    line-height:18px;
    padding:6px 2px;
    padding:6px 15px;
    background: #2faf25;
    color: #ffffff;
    font-size: 14px;
    z-index:100;
    white-space: nowrap;
}

.perso_stat_col:hover .perso_col_popup{
    display:block;
}

.perso_col_popup:after{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 7.5px 0 7.5px;
    border-color: #2faf25 transparent transparent transparent;
    content:'';
    display:block;
    position:absolute;
    left:50%;
    bottom:-7px;
    -webkit-transform:translateX(-50%);
            -ms-transform:translateX(-50%);
        transform:translateX(-50%);
}

/* Always active columns on player page */
.perso_stat_col .perso_col_popup{
    display:block;
}


.perso_stat_col .perso_col_dot{
    background: #2faf25;
}

.perso_stat_col_goal .perso_col_icon{
    background-position:440px 44px;
}

.perso_stat_col_yellow .perso_col_icon{
    background-position:396px 44px;
}

.perso_stat_col_red .perso_col_icon{
    background-position:352px 44px;
}

.perso_stat_col_starter .perso_col_icon{
    background-position:308px 44px;
}

.perso_stat_col_replace .perso_col_icon{
    background-position:176px 44px;
}

.perso_stat_col_owngoal .perso_col_icon {
    background-position:88px 44px;
}

.perso_stat_col_bench .perso_col_icon {
    background-position:44px 44px;
}


/* Base for label styling */
#belepes [type="checkbox"]:not(:checked) {
  position: absolute;
  left: -9999px;
}
#belepes [type="checkbox"]:not(:checked) + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
#belepes [type="checkbox"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
        transform: translateY(-50%);
}

@media all and (max-width:768px) {

}

@media all and (max-width:650px){

    #perso_stat1, #perso_stat2{
        width:100%;
    }

	#perso_stat1_chart{
        margin:0 auto;
    }

    #perso_stat2{
        margin:0;
        padding-left:15px;
    }

    #perso_stat2 .perso_stat_bar .perso_stat_col{
        width:12.5%;
        width: calc(100% / 8);
    }

    .perso_stat_col .perso_col_popup{
        display:block;
        min-height:24px;
        line-height: 18px;
        padding: 3px 10px;

    }

    .perso_stat_col .perso_col_bottom{
        color: #57455b;
    }

    .perso_stat_col .perso_col_dot {
        background: #57455b;
    }

    .perso_stat_col_goal .perso_col_icon {
        background-position: 440px 44px;
    }

    .perso_stat_col_owngoal .perso_col_icon {
        background-position: 88px 44px;
    }

    .perso_stat_col_yellow .perso_col_icon {
        background-position: 396px 44px;
    }

    .perso_stat_col_red .perso_col_icon {
        background-position: 352px 44px;
    }

    .perso_stat_col_starter .perso_col_icon {
        background-position: 308px 44px;
    }

    .perso_stat_col_replace .perso_col_icon {
        background-position: 176px 44px;
    }

    .perso_stat_col_bench .perso_col_icon {
        background-position: 44px 44px;
    }
}

.doughnutSummaryNumber {
    position: absolute;
    top: 54%;
    width: 100%;
    margin-top: -0%;
    font-size: 18px;
	margin-left:-10px;
}

    .perso_col_icon{
        width:32px;
    }

    .perso_stat_col_goal .perso_col_icon, .perso_stat_col_goal:hover .perso_col_icon {
        background-position: 435px 44px;
    }

    .perso_stat_col_owngoal .perso_col_icon, .perso_stat_col_owngoal:hover .perso_col_icon {
        background-position: 83px 44px;
    }

    .perso_stat_col_yellow .perso_col_icon, .perso_stat_col_yellow:hover .perso_col_icon {
        background-position: 391px 44px;
    }

    .perso_stat_col_red .perso_col_icon, .perso_stat_col_red:hover .perso_col_icon {
        background-position: 347px 44px;
    }

    .perso_stat_col_starter .perso_col_icon, .perso_stat_col_starter:hover .perso_col_icon {
        background-position: 303px 44px;
    }

    .perso_stat_col_replace .perso_col_icon, .perso_stat_col_replace:hover .perso_col_icon {
        background-position: 171px 44px;
    }

    .perso_stat_col_bench .perso_col_icon, .perso_stat_col_bench:hover .perso_col_icon {
        background-position: 37px 44px;
    }
}
/* Initially hide the "APAT" icons */
.full-textz {
    display: none;
}

/* Show the "APAT" icons when the parent container is hovered */
.icon-containerz:hover .full-text {
    display: inline-block; /* Show APAT icons on hover */
}

/* Optional: styling for icon-container */
.icon-containerz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Styling for the visible icons (CS) */
.icon-containerz i {
    margin-right: 5px; /* Adjust this to space out the icons if needed */
}

/* cool button */

.coolbutton {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);
  cursor: pointer;
  transition-duration: .3s;
  overflow: hidden;
  position: relative;
}

.svgIcon {
  width: 12px;
  transition-duration: .3s;
}

.svgIcon path {
  fill: white;
}

.coolbutton:hover {
  width: 140px;
  border-radius: 50px;
  transition-duration: .3s;
  background-color: rgb(255, 69, 69);
  align-items: center;
}

.coolbutton:hover .svgIcon {
  width: 50px;
  transition-duration: .3s;
  transform: translateY(60%);
}

.coolbutton::before {
  position: absolute;
  top: -20px;
  content: "Delete";
  color: white;
  transition-duration: .3s;
  font-size: 2px;
}

.coolbutton:hover::before {
  font-size: 13px;
  opacity: 1;
  transform: translateY(30px);
  transition-duration: .3s;
}


/* chat app */

.chat-app .people-list {
    width: 280px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px;
    z-index: 7
}

.chat-app .chat {
    margin-left: 280px;
    border-left: 1px solid #eaeaea
}

.people-list {
    -moz-transition: .5s;
    -o-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s
}

.people-list .chat-list li {
    padding: 10px 15px;
    list-style: none;
    border-radius: 3px
}

.people-list .chat-list li:hover {
    background: #efefef;
    cursor: pointer
}

.people-list .chat-list li.active {
    background: #efefef
}

.people-list .chat-list li .name {
    font-size: 15px
}

.people-list .chat-list img {
    width: 45px;
    border-radius: 50%
}

.people-list img {
    float: left;
    border-radius: 50%
}

.people-list .about {
    float: left;
    padding-left: 8px
}

.people-list .status {
    color: #999;
    font-size: 13px
}

.chat .chat-header {
    padding: 15px 20px;
    border-bottom: 2px solid #f4f7f6
}

.chat .chat-header img {
    float: left;
    border-radius: 40px;
    width: 40px
}

.chat .chat-header .chat-about {
    float: left;
    padding-left: 10px
}

.chat .chat-history {
    padding: 20px;
    border-bottom: 2px solid #fff
}

.chat .chat-history ul {
    padding: 0
}

.chat .chat-history ul li {
    list-style: none;
    margin-bottom: 30px
}

.chat .chat-history ul li:last-child {
    margin-bottom: 0px
}

.chat .chat-history .message-data {
    margin-bottom: 15px
}

.chat .chat-history .message-data img {
    border-radius: 40px;
    width: 40px
}

.chat .chat-history .message-data-time {
    color: #434651;
    padding-left: 6px
}

.chat .chat-history .message {
    color: #444;
    padding: 18px 20px;
    line-height: 26px;
    font-size: 16px;
    border-radius: 7px;
    display: inline-block;
    position: relative
}

.chat .chat-history .message:after {
    bottom: 100%;
    left: 7%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px
}

.chat .chat-history .my-message {
    background: #efefef
}

.chat .chat-history .my-message:after {
    bottom: 100%;
    left: 30px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #efefef;
    border-width: 10px;
    margin-left: -10px
}

.chat .chat-history .other-message {
    background: #e8f1f3;
    text-align: right
}

.chat .chat-history .other-message:after {
    border-bottom-color: #e8f1f3;
    left: 93%
}

.chat .chat-message {
    padding: 20px
}

.online,
.offline,
.me {
    margin-right: 2px;
    font-size: 8px;
    vertical-align: middle
}

.online {
    color: #86c541
}

.offline {
    color: #e47297
}

.me {
    color: #1d8ecd
}

.float-right {
    float: right
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

@media only screen and (max-width: 767px) {
    .chat-app .people-list {
        height: 465px;
        width: 100%;
        overflow-x: auto;
        background: #fff;
        left: -400px;
        display: none
    }
    .chat-app .people-list.open {
        left: 0
    }
    .chat-app .chat {
        margin: 0
    }
    .chat-app .chat .chat-header {
        border-radius: 0.55rem 0.55rem 0 0
    }
    .chat-app .chat-history {
        height: 300px;
        overflow-x: auto
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .chat-app .chat-list {
        height: 650px;
        overflow-x: auto
    }
    .chat-app .chat-history {
        height: 600px;
        overflow-x: auto
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .chat-app .chat-list {
        height: 480px;
        overflow-x: auto
    }
    .chat-app .chat-history {
        height: calc(100vh - 350px);
        overflow-x: auto
    }
}

/* event schedule css */

.event-schedule-area .tab-area .nav-tabs {
    border-bottom: inherit;
}

.event-schedule-area .tab-area .nav {
    border-bottom: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 80px;
}

.event-schedule-area .tab-area .nav-item {
    margin-bottom: 75px;
}
.event-schedule-area .tab-area .nav-item .nav-link {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    border-radius: inherit;
    border: inherit;
    padding: 0px;
    text-transform: capitalize !important;
}

.event-schedule-area .tab-area .tab-content .table {
    margin-bottom: 0;
    width: 80%;
}
.event-schedule-area .tab-area .tab-content .table thead td,
.event-schedule-area .tab-area .tab-content .table thead th {
    border-bottom-width: 1px;
    font-size: 20px;
    font-weight: 600;
}
.event-schedule-area .tab-area .tab-content .table td,
.event-schedule-area .tab-area .tab-content .table th {
    border: 1px solid #b7b7b7;
    padding-left: 30px;
}
.event-schedule-area .tab-area .tab-content .table tbody th .heading,
.event-schedule-area .tab-area .tab-content .table tbody td .heading {
    font-size: 16px;
    text-transform: capitalize;
    margin-bottom: 16px;
    font-weight: 500;
    margin-bottom: 6px;
}
.event-schedule-area .tab-area .tab-content .table tbody th span,
.event-schedule-area .tab-area .tab-content .table tbody td span {
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}
.event-schedule-area .tab-area .tab-content .table tbody th span.date,
.event-schedule-area .tab-area .tab-content .table tbody td span.date {
    font-size: 14px;
    font-weight: 500;
    margin-top: 15px;
}
.event-schedule-area .tab-area .tab-content .table tbody th p {
    font-size: 14px;
    margin: 0;
    font-weight: normal;
}

.event-schedule-area-two .section-title .title-text h2 {
    margin: 0px 0 15px;
}

.event-schedule-area-two ul.custom-tab {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 30px;
}
.event-schedule-area-two ul.custom-tab li {
    margin-right: 70px;
    position: relative;
}
.event-schedule-area-two ul.custom-tab li a {
    font-size: 25px;
    line-height: 25px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 35px 0;
    position: relative;
}
.event-schedule-area-two ul.custom-tab li a:hover:before {
    width: 100%;
}
.event-schedule-area-two ul.custom-tab li a:before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    width: 0;
    height: 2px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.event-schedule-area-two .primary-btn {
    margin-top: 40px;
}

.event-schedule-area-two .tab-content .table {
    margin-bottom: 0;
}
.event-schedule-area-two .tab-content .table thead {
   font-size: 20px;
}
.event-schedule-area-two .tab-content .table thead tr th {
    padding: 20px;
    border: 0;
}

.event-schedule-area-two .tab-content .table tbody tr th {
    border: 0;
    padding: 30px 20px;
    vertical-align: middle;
}
.event-schedule-area-two .tab-content .table tbody tr th .event-date {
    text-align: center;
}
.event-schedule-area-two .tab-content .table tbody tr th .event-date span {
    font-size: 50px;
    line-height: 50px;
    font-weight: normal;
}
.event-schedule-area-two .tab-content .table tbody tr td {
    padding: 30px 20px;
    vertical-align: middle;
}

.event-schedule-area-two .tab-content .table tbody tr td .event-wrap h3 a {
    font-size: 20px;
    line-height: 20px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .categories {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 10px 0;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .categories a {
    font-size: 16px;
    margin-left: 10px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .categories a:before {
    content: "\f1e3";
    font-family: fontawesome;
    padding-right: 5px;
}

.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .organizers {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 10px 0;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .organizers a {
    color: #607ddd;
    font-size: 16px;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.event-schedule-area-two .tab-content .table tbody tr td .event-wrap .organizers a:before {
    content: "\f007";
    font-family: fontawesome;
    padding-right: 5px;
}
.event-schedule-area-two .tab-content .table tbody tr td .primary-btn {
    margin-top: 0;
    text-align: center;
}
.event-schedule-area-two .tab-content .table tbody tr td .event-img img {
    width: 62px;
    height: 62px;
    border-radius: 5px;
}
/* container-custom */

/* From Uiverse.io by KSAplay */ 
.card-weather {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 220px;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 12px 12px 0px rgba(0, 0, 0, 0.1);
  background-color: white;
}

/* Landscape section */
.landscape-section {
  position: relative;
  width: 100%;
  height: 70%;
  overflow: hidden;
}

.landscape-section * {
  position: absolute;
}

.sky {
  width: 100%;
  height: 100%;
  background: rgb(247, 225, 87);
  background: linear-gradient(
    0deg,
    rgba(247, 225, 87, 1) 0%,
    rgba(233, 101, 148, 1) 100%
  );
}

.sun {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: white;
  bottom: 40%;
  left: 23%;
  filter: drop-shadow(0px 0px 10px white);
}

.sun::after {
  position: absolute;
  content: "";
  width: 118%;
  height: 118%;
  border-radius: 50%;
  background-color: white;
  opacity: 0.5;
}

.sun::before {
  position: absolute;
  content: "";
  width: 134%;
  height: 134%;
  border-radius: 50%;
  background-color: white;
  opacity: 0.1;
}

.ocean {
  overflow: hidden;
  bottom: 0;
  width: 100%;
  height: 28%;
  background: rgb(241, 192, 125);
  background: linear-gradient(
    0deg,
    rgba(241, 192, 125, 1) 0%,
    rgba(247, 218, 150, 1) 100%
  );
}

.reflection {
  position: absolute;
  background-color: white;
  opacity: 0.5;
  z-index: 1;
}

.reflection:nth-child(1) {
  width: 40px;
  height: 10px;
  clip-path: polygon(0% 0%, 100% 0%, 50% 20%);
  top: 5%;
  left: 32%;
}

.reflection:nth-child(2) {
  width: 80px;
  height: 15px;
  clip-path: polygon(0% 0%, 100% 0%, 60% 20%, 40% 20%);
  top: 15%;
  left: 39%;
}

.reflection:nth-child(3) {
  width: 60px;
  height: 2px;
  clip-path: polygon(0% 50%, 40% 0%, 60% 0%, 100% 50%, 60% 100%, 40% 100%);
  top: 27%;
  right: 15%;
}

.reflection:nth-child(4) {
  width: 70px;
  height: 2px;
  clip-path: polygon(0% 50%, 40% 0%, 60% 0%, 100% 50%, 60% 100%, 40% 100%);
  top: 37%;
  right: 28%;
}
.reflection:nth-child(5) {
  width: 70px;
  height: 3px;
  clip-path: polygon(0% 50%, 40% 0%, 60% 0%, 100% 50%, 60% 100%, 40% 100%);
  top: 46%;
  right: 8%;
}

.hill-1 {
  right: -25%;
  bottom: 20%;
  width: 150px;
  height: 40px;
  border-radius: 50%;
  background-color: #e6b29d;
}

.shadow-hill-1 {
  right: -25%;
  top: -30%;
  width: 150px;
  height: 40px;
  border-radius: 50%;
  background-color: #f1c7a0;
  opacity: 1;
}

.hill-2 {
  right: -36%;
  bottom: 10%;
  width: 150px;
  height: 80px;
  border-radius: 50%;
  background-color: #c29182;
}

.shadow-hill-2 {
  right: -36%;
  top: -65%;
  width: 150px;
  height: 80px;
  border-radius: 50%;
  background-color: #e5bb96;
  opacity: 1;
}

.hill-3 {
  left: -100%;
  bottom: -28%;
  width: 350px;
  height: 150px;
  border-radius: 50%;
  background-color: #b77873;
  z-index: 3;
}

.tree-1 {
  bottom: 20%;
  left: 3%;
  width: 50px;
  height: 70px;
  z-index: 3;
}

.tree-2 {
  bottom: 14%;
  left: 25%;
  width: 50px;
  height: 70px;
  z-index: 3;
}

.hill-4 {
  right: -100%;
  bottom: -40%;
  width: 350px;
  height: 150px;
  border-radius: 50%;
  background-color: #a16773;
  z-index: 3;
}

.tree-3 {
  bottom: 10%;
  right: 1%;
  width: 65px;
  height: 80px;
  z-index: 3;
}

.filter {
  height: 100%;
  width: 100%;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 40%
  );
  z-index: 5;
  opacity: 0.2;
}

/* Content section */
.content-section {
  width: 100%;
  height: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.weather-info {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0%;
  width: 100%;
  padding-top: 15px;
  color: white;
  z-index: 10;
}

.weather-info .left-side:not(.icon) {
  width: 20%;
  font-size: 11pt;
  font-weight: 600;
  align-self: baseline;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon svg {
  width: 40px;
}

.weather-info .right-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.weather-info .right-side p:nth-child(2) {
  font-size: 9pt;
  margin: 0;
  padding: 0;
}

.weather-info .location span {
  font-size: 11pt;
  font-weight: 700;
  text-transform: uppercase;
}

.location {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: 0;
  margin: 0;
}

.location svg {
  width: 14px;
  height: auto;
}

.temperature {
  font-size: 20pt;
  font-weight: 700;
  line-height: 30px;
}

.forecast {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
  width: 100%;
  padding: 10px 25px;
}

.forecast > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: lightslategray;
  font-size: 9pt;
}

.separator {
  width: 100%;
  height: 2px;
  background-color: rgb(233, 233, 233);
  border-radius: 1px;
}

/* Calendar Design */
.calendar-icon {
    width: 130px; /* Adjust size as needed */
    border-radius: 6px;
    overflow: hidden;
}

.calendar-header {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.calendar-header:before,
.calendar-header:after {
    content: '';
    width: 12px;
    height: 8px;
    background-color: black;
    position: absolute;
    top: -4px;
    border-radius: 2px;
}

.calendar-header:before {
    left: 20%;
}

.calendar-header:after {
    right: 20%;
}

.calendar-body {
    padding: 10px;
}

.day {
    font-size: 2rem;
}

.month {
    font-size: 0.8rem;
}
.task-description {
        font-size: 16px;
        line-height: 1.5;
        padding: 10px;
        margin-top: 10px;
    }
    
    .task-description p {
        margin: 0 0 10px;
    }
/* new subtitle */

.subtitle-new {
    align-items: center;
    display: flex
;
    font-weight: 600;
    line-height: 24px;
    padding-left: 14px;
    position: relative;
}
.subtitle-new:before {
    background-color: #3273fa;
    border-radius: 2px;
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    width: 4px;
}
.text-blurb {
    font-size: 14px;
    margin-top: 8px;
}
/* tactics */

#field {
    width: 100%;
    height: 722px;
    background: url('/assets/img/field2.avif') no-repeat center center;
    background-size: contain;
    position: relative;
    margin-top: 20px;
    border: 2px solid #000;
	border-radius:6px;
}

.player {
    width: 50px;
    height: 50px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    position: absolute;
    cursor: pointer;
    user-select: none;
    background-size: cover;
    background-position: center;
	border-radius:6px;
}

.team-a {
    background-color: #007bff; /* Team A */
    background-image: url('/assets/img/team1.png'); /* Icon for Team A */
}

.team-b {
    background-color: #ff6b6b; /* Team B */
    background-image: url('/assets/img/team2.png'); /* Icon for Team B */
}

.player .number {
    font-size: 16px;
    z-index: 1; /* Make sure the number is visible above the icon */
	color:#000;
}

 .arrow {
        position: absolute;
        height: 0;
        border-top: 2px solid red;
    }

    .arrowhead {
        position: absolute;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid red;
        top: -5px;
        left: 100%;
    }
	
.display-4 {
    font-size: 2.5rem;
}

.event-item {
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.event-item h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.text-muted.small {
    font-size: 0.85rem;
}

.badge {
    font-size: 0.75rem;
    padding: 4px 8px;
}

/* text new css */

/* Spacing utilities */
.mb-6 {
  margin-bottom: 1.5rem !important;
}

.me-7 {
  margin-right: 1.75rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.me-3 {
  margin-right: 0.75rem !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;
}

.py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.py-5 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.me-6 {
  margin-right: 1.5rem !important;
}


/* Symbol group */
.symbol-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.symbol {
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  border-radius: 0.95rem;
}

.symbol-35px {
  width: 35px;
  height: 35px;
}

.symbol-circle {
  border-radius: 50% !important;
}

.symbol-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  
}

.bg-warning {
  background-color: #e8c444 !important;
}

.text-inverse-warning {
  color: #000000 !important;
}

.text-inverse-primary {
  color: #000000 !important;
}

.text-inverse-info {
  color: #ffffff !important;
}

.text-inverse-dark {
  color: #ffffff !important;
}


/* Separator */
.separator {
  border-bottom: 1px solid #eaeaea;
  margin: 1rem 0;
}
/* player card stuff */

.player-card {
   border-radius: 15px;
    padding: 15px;
    position: relative;
    z-index: 1;
}

.right-actions {
    display: flex;
    gap: 20px;
    padding-right: 10px;
}

.card-content {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Allows items to wrap to the next line if needed */
}

/* Make it stack on smaller screens */
@media (max-width: 768px) {
    .card-content {
        flex-direction: column;
        gap: 10px; /* Reduce gap for better spacing */
    }
}

.logo-card {
	position: absolute;
    bottom: -12px;
    right: 10px;
    font-size: 14px;
    font-weight: bold;
	color: #000;
}

[data-layout-mode=dark] .logo-card {
	
	color: #fff;
}

.left-column {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.right-column {
    flex: 1;
    padding-left: 20px;
}

.player-image-section {
    height: 100%;
	max-width:405px;
    border-radius: 12px;
    position: relative;
    border: 3px solid var(--gold);

}

.ovr-rating {
    position: absolute;
    top: 7px;
    left: 5px;
    background: linear-gradient(135deg, var(--gold), #c0962f);
    padding: 0px 7px;
    border-radius: 8px;
    font-size: 32px;
    font-weight: bold;
    color: #000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.ovr-rating-dash {
    position: relative; /* Keep it within its parent container */
    border-radius: 8px;
    font-size: 24px; /* Adjusted for a 50px box */
    font-weight: bold;
    color: #000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    width: 50px; /* Set fixed width */
    height: 50px; /* Set height to 50px */
    display: flex; /* Use flexbox to align the text */
    justify-content: center; /* Center the text horizontally */
    align-items: center; /* Center the text vertically */
    background-color: gold;
    margin: 0 auto; /* Center it horizontally */
	top:5px;
}

@media (max-width: 768px) {
    .ovr-rating-dash {
        font-size: 20px; /* Adjust font size for smaller screens */
        width: 40px; /* Adjust width for small screens */
        height: 40px; /* Adjust height to match width */
    }
}


.position-tags {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
}

.position-tag {
    background-color: #00040026;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: white;
}

.player-header {
    margin-bottom: 25px;
}

.player-header h1 {
    font-size: 2.4rem;
    font-weight: 500;
    margin: 0 0 15px 0;
}

.player-details {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.9rem;

}

.player-details span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.player-details .flag-icon {
    margin-right: 5px;
}

.stats-section {
    margin: 25px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-label {
    width: 90px;
    font-size: 1rem;
    
    font-weight: 500;
}

.stat-bar {
    flex-grow: 1;
}

.progress {
    height: 24px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
}

.progress-bar {
    height: 100%;
    border-radius: 12px;
    
    text-align: center;
    line-height: 24px;
    font-size: 0.95rem;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.progress-bar.high {
    background: linear-gradient(90deg, var(--stat-green), var(--dark-green));
}

.progress-bar.medium {
    background: linear-gradient(90deg, var(--gold), var(--stat-gold));
}

.stamina-section, .skill-moves-section {
    padding: 10px;
    margin: 15px 0;
}


.skill-label {
    
    font-size: 0.95rem;
    margin-right: 10px;
}


.training-section, .rank-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding: 10px 0;
}

.training-level, .rank-level {
    
    font-size: 0.95rem;
}

.level {
    color: var(--stat-green);
    font-weight: 500;
    margin-left: 10px;
}


.rank-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rank-indicators {
    display: flex;
    gap: 5px;
}

.rank-dot {
    width: 8px;
    height: 8px;
    background-color: #333;
    border-radius: 50%;
}

.rank-dot.active {
    background-color: var(--stat-green);
}

.skills-traits-container {
    display: flex;
    justify-content: space-between;
    margin: 25px 0;
    gap: 20px;
}

.skills-section, .traits-section {
    flex: 1;
}

.section-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: 500;
}

.skill-icons, .trait-icons {
    display: flex;
    gap: 15px;
    padding: 5px 0;
}

.skill-icon, .trait-icon {
    width: 42px;
    height: 42px;
    background-color: #0000001a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.skill-icon {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.trait-icon {
    border-radius: 8px;
}

.mb-7 { 
    margin-bottom: 1.75rem!important;
} 

.fs-2x { 
    font-size: calc(1.325rem + .5vw)!important;
} 

.fw-bold { 
    font-weight: 600!important;
} 

.z-index-2 { 
    z-index: 2!important;
} 

.mb-3 { 
    margin-bottom: .75rem!important;
} 


.border-danger { 
    --bs-border-opacity: 1; 
    border-color: rgba(var(--bs-danger-rgb),var(--bs-border-opacity))!important;
} 

.border-4 { 
    border-width: 4px!important;
} 
.ovr-ratings {
    position: absolute;
    top: 7px;
    left: 5px;
    background: linear-gradient(135deg, var(--gold), #c0962f);
    padding: 0px 18px;
    border-radius: 8px;
    font-size: 32px;
    font-weight: bold;
    /* color: #000; */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #28a745; /* Green color */
    border-radius: 50%;
    margin-left: 5px;
    box-shadow: 0 0 5px #28a745;
    animation: pulse 1.5s infinite;
}
.pulse-dot-not {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #28a745; /* Green color */
    border-radius: 50%;
    margin-left: -3px;
    box-shadow: 0 0 5px #28a745;
    animation: pulse 1.5s infinite;
	margin-top:-23px;
}

.pulse-dot-side {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #28a745;
    border-radius: 50%;
    margin-left: 47px;
    box-shadow: 0 0 5px #28a745;
    animation: pulse 1.5s infinite;
    margin-top: 0px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.6;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.css-bar {
    width: 0px;
    height: 32px;
    border-left: 1px solid rgb(226, 232, 239);
    margin-right: -5px;
}
.progress-container {
    width: 36px;
    height: 36px;
}

.progress-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    background: #ddd;
}

.circle-inner {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-text {
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

/* book css */

.book-container {
                padding: 40px;
                height: 1090px; /* Changed to fixed height of 900px */
                border-radius: 10px;
               
            }

            .book-inner {
                position: relative;
                border-radius: 10px;
				background:#fff;
            }
			[data-layout-mode=dark] .book-inner {
                 background: #2f3647 !important;
                
            }

            .spine {
                position: absolute;
				top: 0;
                width: 4px;
                height: 100%;
                background: linear-gradient(to bottom, #bbb, #888);
                left: 50%;
                transform: translateX(-50%);
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            }
            

            .page-left {
                border-radius: 5px 0 0 5px;
            }

            .page-right {
                border-radius: 0 5px 5px 0;
            }
			
			[data-layout-mode=dark] .page-right {
                 --vz-card-bg: #2f3647;
                 --vz-card-cap-bg: #2f3647;
                
            }
			
			[data-layout-mode=dark] .page-left {
                 --vz-card-bg: #2f3647;
                 --vz-card-cap-bg: #2f3647;
                 
            }

            .nav-tabsz {
                border: none;
                padding: 10px;
                margin-bottom: 0;
                border-radius: 5px 5px 0 0;
            }

            .nav-linkz {
                border: 1px solid #ddd;
                margin: 0 5px;
                border-radius: 5px;
                transition: all 0.3s;
            }

            .nav-linkz.active {
                border-bottom: none;
                color: #000;
            }

            .tab-content {
                animation: pageTurn 0.5s ease;
            }

            @keyframes pageTurn {
                0% { transform: translateX(20px); opacity: 0; }
                100% { transform: translateX(0); opacity: 1; }
            }

            			

    .page-left .row, .page-right .row {
        width: 100%;
        justify-content: space-between;
    }

    .page-left .col-md-4, .page-right .col-md-4 {
        display: flex;
        justify-content: center;
        padding: 0 5px;
    } 
	
	.card-player.grayed-out {
    filter: grayscale(100%);
    opacity: 0.6;
}

/* Rarity indicator */
    .rarity {
        position: absolute;
        bottom: 10px;
        left: 7px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 2px 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .card-normal {
    border: 1px solid #66BB6A;
    background: linear-gradient(135deg, #A5D6A7 0%, #E8F5E9 100%), /* Green gradient */ url('/assets/images/back-pl.avif') no-repeat center center;
    background-size: cover; /* Ensures the image covers the element */
    background-blend-mode: overlay; /* Blends the gradient with the image */
    }

    /* Mythic Card */
    .card-mythic {
        border: 2px solid #FFD700; /* Gold border */
    background: linear-gradient(135deg, #FFD700 0%, #FFFACD 100%), /* Gold gradient */ url('/assets/images/back-pl.avif') no-repeat center center;
    background-size: cover; /* Ensures the image covers the element */
    background-blend-mode: overlay; /* Blends the gradient with the image */
    }

    /* Legendary Card */
    .card-legendary {
        border: 3px solid #ff8457; /* Orange-red border */
        background: linear-gradient(135deg, #FF4500 0%, #FFD700 100%), url('/assets/images/back-pl.avif') no-repeat center center;
        background-size: cover; /* Ensures the image covers the element */
        background-blend-mode: overlay; /* Blends the gradient with the image */
        box-shadow: 0 0 15px rgba(255, 69, 0, 0.8); /* Glow effect */
        animation: glow 1.5s infinite alternate; /* Pulsing glow */
    }

    /* Glow animation for Legendary */
    @keyframes glow {
        from {
            box-shadow: 0 0 10px rgba(255, 69, 0, 0.8);
        }
        to {
            box-shadow: 0 0 20px rgba(255, 69, 0, 1);
        }
    }
	
	/* card stats for book */
	
	.nav-tabsz .dropdown-menu {
    max-height: 300px; /* Limit dropdown height */
    overflow-y: auto; /* Add scrollbar if too many items */
    width: 200px; /* Adjust width as needed */
}

.nav-tabsz .dropdown-toggle {
    cursor: pointer;
}

.card-player .stats2 {
    width: 100%; /* Fit within card, no overflow */
    text-align: center;
    margin-top: 10px; /* Reduced margin for tighter integration */
    font-size: 14px; /* Slightly smaller for balance, but adjustable */
    font-weight: 500; /* Reduced weight for a lighter, modern look */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Responsive grid for better layout */
    gap: 8px 8px; /* Row and column gaps for spacing */
    padding: 8px; /* Add padding for breathing room */
    background: rgba(255, 255, 255, 0.9); /* Subtle white background for contrast */
    border-radius: 6px; /* Rounded corners for modern look */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    position: relative; /* Keep relative positioning for vertical line */
}

/* Style for individual stat items - MODIFIED to reduce gap */
.stats2 .stat-item {
    display: flex;
    justify-content: flex-start; /* Changed from space-between to flex-start */
    align-items: center; /* Center vertically for better alignment */
    padding: 4px 0; /* Minimal padding for each item */
}

/* Style for stat labels */
.stats2 .stat-label {
    color: #333; /* Darker gray for labels, readable and professional */
    font-weight: 600; /* Bold labels for emphasis */
    margin-right: 2px; /* Reduced space between label and value */
    text-transform: uppercase; /* Optional: Uppercase for a sleek look */
    font-size: 12px; /* Slightly smaller labels for hierarchy */
    min-width: 40%; /* Added to ensure consistent label width */
}

/* Style for stat values - MODIFIED */
.stats2 .stat-value {
    font-weight: 700; /* Bold values for emphasis */
    font-size: 14px; /* Match or slightly larger than labels for balance */
    min-width: 30px; /* Ensure values have enough space */
    text-align: left; /* Changed to left align */
    margin-left: 15px;
    margin-right: 15px;
}

/* Optional: Hover effect for interactivity */
.stats2 .stat-item:hover {
    background: rgba(0, 102, 204, 0.1); /* Light blue background on hover */
    border-radius: 4px; /* Rounded corners on hover */
    transition: background 0.3s ease; /* Smooth transition */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-player .stats2 {
        grid-template-columns: 1fr; /* Stack items on smaller screens */
        gap: 6px; /* Reduced gap on mobile */
        padding: 6px; /* Reduced padding on mobile */
        font-size: 12px; /* Smaller font on mobile */
    }
    .stats2 .stat-label {
        font-size: 10px; /* Smaller labels on mobile */
        margin-right: 2px; /* Further reduce margin on mobile for tighter spacing */
    }
    .stats2 .stat-value {
        font-size: 12px; /* Smaller values on mobile */
        margin-left: 2px; /* Smaller margin on mobile */
    }
}

/* Remove or adjust padding for .stats2 > div if not needed */
.card-player .stats2 > div {
    padding: 0; /* Removed padding to avoid extra vertical spacing */
}

/* Add vertical line between columns using a pseudo-element */
.card-player .stats2::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* Center of the grid */
    width: 1px; /* Thickness of the line */
    background-color: #ccc; /* Light gray line; adjust color as needed */
    transform: translateX(-50%); /* Center the line precisely */
    z-index: 1; /* Ensure the line is above the grid items */
}