:root {
    --purple-default: #AA65FF;
    --blue-default: #247EF3;
    --orange-color: #FF7700;
    --sycp-color: #FF07AA;
    --sywp-color: #00D19F;
    --syh2-color: #AA65FF;
    --syap-color: #8DFF33;
    --syes-color: #FFDD00;
    --disabled-color: #464646;
	--disabled-gradient: linear-gradient(270deg, #000 0%, #282726 100%);
	--svg-path-color: #42AAFF;

	--blue-gradient: linear-gradient(270deg, #000 0%, #1C3E61 100%);
	--blue-text-color: #75AAD7;
	--blue-icon-color: #42AAFF;
	--blue-background: rgba(19, 134, 255, 0.30);

	--orange-gradient: linear-gradient(270deg, #000 0%, #A44C00 100%);
	--orange-text-color: #FFD6B1;
	--orange-icon-color: #FFD6B1;
	--orange-background: #BC6A1E;

	--sycp-gradient: linear-gradient(270deg, #000 0%, #BC0850 100%);
	--sycp-text-color: #FFD9F2;
	--sycp-icon-color: #FFBDDC;
	--sycp-background: #BC356B;

	--sywp-gradient: linear-gradient(270deg, #000 0%, #18463B 100%);
	--sywp-text-color: #BAFFEE;
	--sywp-icon-color: #6DD2AE;
	--sywp-background: #0B5E4A;

	--syh2-gradient: linear-gradient(270deg, #000 0%, #43078D 100%);
	--syh2-text-color: #E8C5FF;
	--syh2-icon-color: #C495FF;
	--syh2-background: #59109E;

	--syes-gradient: linear-gradient(270deg, #000 0%, #6F6000 100%);
	--syes-text-color: #FFF7C2;
	--syes-icon-color: #FFEF87;
	--syes-background: #9A8B2D;

	--syap-gradient: linear-gradient(270deg, #000 0%, #4FA70A 100%);
	--syap-text-color: #E4FFE3;
	--syap-icon-color: #A9FB79;
	--syap-background: #37A63A;

    --sycp-filter: brightness(0) saturate(100%) invert(27%) sepia(78%) saturate(7329%) hue-rotate(310deg) brightness(101%) contrast(109%);
    --sywp-filter: brightness(0) saturate(100%) invert(70%) sepia(29%) saturate(1882%) hue-rotate(112deg) brightness(87%) contrast(101%);
    --syh2-filter: brightness(0) saturate(100%) invert(53%) sepia(39%) saturate(6732%) hue-rotate(237deg) brightness(103%) contrast(101%);
    --syap-filter: brightness(0) saturate(100%) invert(82%) sepia(86%) saturate(465%) hue-rotate(33deg) brightness(101%) contrast(101%);
    --syes-filter: brightness(0) saturate(100%) invert(75%) sepia(75%) saturate(588%) hue-rotate(359deg) brightness(103%) contrast(105%);

    --blue-to-sycp-filter: brightness(0.8) contrast(1.19) saturate(1.45) hue-rotate(1.42rad);
    --blue-to-sywp-filter: brightness(1.1) contrast(1) saturate(0.7) hue-rotate(4.7rad);
    --blue-to-syh2-filter: brightness(1.16) contrast(1) saturate(0.7) hue-rotate(0.5rad);
    --blue-to-syap-filter: brightness(1) contrast(1) saturate(0.98) hue-rotate(4.1rad);
    --blue-to-syes-filter: brightness(1.2) contrast(1) saturate(.8) hue-rotate(2.9rad);
    --pink-to-syap-filter: brightness(1.2) contrast(0.85) saturate(1) hue-rotate(3rad);
    --pink-to-syes-filter: brightness(1.1) contrast(.8) saturate(.9) hue-rotate(1.8rad);
    --disabled-filter: grayscale(100%) contrast(.8);
}

#tracks-carousel-wrapper {
    position: relative;
}

#tracks-carousel-wrapper:before, #tracks-carousel-wrapper:after {
    position: absolute;
    top: 0;
    z-index: 1;
    content: "";
    display: block;
    width: 20px;
    height: 100%;

}

#tracks-carousel-wrapper:before{
    left: -1rem;
    background: linear-gradient(90deg, var(--background-color, #080A0B), transparent);
}

#tracks-carousel-wrapper:after{
    right: -1rem;
    background: linear-gradient(-90deg, var(--background-color, #080A0B), transparent);
}

#tracks-carousel {
    margin-bottom: 80px;
    overflow: hidden;
    display: flex;
    gap: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
}

#tracks-carousel .track-item {
    margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
    align-items: center;
	border-radius: 4px;
	background: linear-gradient(270deg, #1A1A1A 0%, #000 100%);
    border: 2px solid  #1A1A1A;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    padding: .5rem 1rem;
    --color: var(--purple-default);
}

#tracks-carousel .track-item.sycp {
    --color: var(--sycp-color);
}

#tracks-carousel .track-item.sywp {
    --color: var(--sywp-color);
}
#tracks-carousel .track-item.syh2 {
    --color: var(--syh2-color);
}
#tracks-carousel .track-item.syap {
    --color: var(--syap-color);
}
#tracks-carousel .track-item.syes {
    --color: var(--syes-color);
}

#tracks-carousel .track-item:hover {
    border: 2px solid var(--color);
}

#tracks-carousel .track-item.active {
    border-radius: 4px;
    border: 2px solid  var(--color);
    box-shadow: 0px 0px 10px 0px var(--color);
	background: var(--color);
}

#tracks-carousel .track-item .image-container img {
    height: 50px;
    width: auto;
    -webkit-user-drag: none;
}

#tracks-carousel .track-item .text-container {
    color: #FFF;
    text-align: center;
    font-family: Raleway, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
    text-transform: uppercase;
}

#tracks-carousel .track-item.active .text-container {
	color: #000;
	text-align: center;
	-webkit-text-stroke-width: 0.4px;
	-webkit-text-stroke-color: #000;
	font-size: 14px;
	font-style: normal;
}

#track-grid {
    display: grid;
    --grid-rows: 102;
    grid-template-columns: repeat(39, 1fr);
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-auto-flow: row;
    --card-col-size: 8;
    --connection-col-size: 2;
    --card-row-size: 6;
    --connection-row-size: 6;

    user-select: none;
}


#track-grid > * , #subgrid-mobile > *{
    --col: auto;
    --row: auto;
    --col-size: auto;
    --row-size: auto;

    grid-column: var(--col) / span var(--col-size);
    grid-row: var(--row) / span var(--row-size);
}

#track-grid .track-card {
    --col-size: var(--card-col-size);
    --row-size: var(--card-row-size);
	flex-direction: row-reverse;
}

#track-grid .track-card.empty-card, #track-grid-mobile .track-card.empty-card {
    --row-size: 15;
}


#track-grid .track-connection {
    --col-size: var(--connection-col-size);
    --row-size: var(--connection-row-size);
}

.track-grid .track-card:not(.empty-card) {
    display: flex;
    padding: 8px 8px 8px 10px;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 5px;
    background: var(--background-gradient, linear-gradient(270deg, #1A1A1A 0%, #000 100%));
	color: var(--text-color, #5F5F5F);
    cursor: pointer;
    z-index: 1;
}



.track-grid .track-card.certification {
    border-radius: 6px;
    border: 2px solid #5F5F5F;
    background: transparent;
    justify-content: center;
    gap: 12px;
}

.track-grid .blue-card {
	--color: var(--blue-default);
    --background-color: var(--blue-background);
	--text-color: var(--blue-text-color);
	--background-gradient: var(--blue-gradient);
	--icon-color: var(--blue-icon-color);
}


.track-grid .track-card .text-container {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	height: 100%;
	color: var(--text-color, #5F5F5F);
}


#track-grid-mobile .track-card .text-container {
	justify-content: space-around;
	align-items: center;
}

.icons-container {
	display: flex;
	align-items: center;
	gap: 3px;
}

.icons-container .icon-section {
	display: flex;
	align-items: center;
	padding: 4px;
	border-radius: 4px;
	gap: 5px;
	text-transform: none;
	font-size: 12px;
	background: var(--background-color);
}

.icons-container .icon-section img.disabled {
	display: none;
}

.icons-container .icon-section img.disabled {
	display: block;
}

.icons-container .icon-section img:not(.disabled) {
	display: none;
}

.icons-container .icon-section {
	color: var(--icon-color);
}

.track-grid .orange-card {
	--color: var(--orange-color);
    --background-color: var(--orange-background);
	--text-color: var(--orange-text-color);
	--background-gradient: var(--orange-gradient);
	--icon-color: var(--orange-icon-color);
}

.track-grid .pink-card {
	--color: var(--sycp-color);
    --background-color: var(--sycp-background);
	--text-color: var(--sycp-text-color);
	--background-gradient: var(--sycp-gradient);
	--icon-color: var(--sycp-icon-color);
}

.track-grid .cyan-card {
    --color: var(--sywp-color);
    --background-color: var(--sywp-background);
	--text-color: var(--sywp-text-color);
	--background-gradient: var(--sywp-gradient);
	--icon-color: var(--sywp-icon-color);
}

.track-grid .purple-card {
    --color: var(--syh2-color);
    --background-color: var(--syh2-background);
	--text-color: var(--syh2-text-color);
	--background-gradient: var(--syh2-gradient);
	--icon-color: var(--syh2-icon-color);
}

.track-grid .track-card.certification.sycp {
	--color: var(--sycp-color);
}

.track-grid .track-card.certification.sywp {
	--color: var(--sywp-color);
}

.track-grid .track-card.certification.syap {
	--color: var(--syap-color);
}

.track-grid .track-card.certification.syh2 {
	--color: var(--syh2-color);
}

.track-grid .track-card.certification.syes {
	--color: var(--syes-color);
}

.track-grid .green-card {
    --color: var(--syap-color);
    --background-color: var(--syap-background);
	--text-color: var(--syap-text-color);
	--background-gradient: var(--syap-gradient);
	--icon-color: var(--syap-icon-color);
}

.track-grid .yellow-card {
    --color: var(--syes-color);
    --background-color: var(--syes-background);
	--text-color: var(--syes-text-color);
	--background-gradient: var(--syes-gradient);
	--icon-color: var(--syes-icon-color);
}

.track-grid .track-card.sycp.active-sycp {
    --color: var(--sycp-color);
	--background-gradient: var(--sycp-gradient);
	--text-color: var(--sycp-text-color);
	--icon-color: var(--sycp-icon-color);
	--background-color: var(--sycp-background);
}

.track-grid .track-card.sywp.active-sywp {
    --color: var(--sywp-color);
	--background-gradient: var(--sywp-gradient);
	--text-color: var(--sywp-text-color);
	--icon-color: var(--sywp-icon-color);
	--background-color: var(--sywp-background);
}

.track-grid .track-card.syh2.active-syh2 {
    --color: var(--syh2-color);
	--background-gradient: var(--syh2-gradient);
	--text-color: var(--syh2-text-color);
	--icon-color: var(--syh2-icon-color);
	--background-color: var(--syh2-background);
}

.track-grid .track-card.syap.active-syap {
    --color: var(--syap-color);
	--background-gradient: var(--syap-gradient);
	--text-color: var(--syap-text-color);
	--icon-color: var(--syap-icon-color);
	--background-color: var(--syap-background);
}

.track-grid .track-card.syes.active-syes {
    --color: var(--syes-color);
	--background-gradient: var(--syes-gradient);
	--text-color: var(--syes-text-color);
	--icon-color: var(--syes-icon-color);
	--background-color: var(--syes-background);

}

.track-grid .track-card.blue-card.sycp.active-sycp .image-container img {
    filter: var(--blue-to-sycp-filter);
}

.track-grid .track-card.blue-card.sywp.active-sywp .image-container img {
    filter: var(--blue-to-sywp-filter);
}

.track-grid .track-card.blue-card.syh2.active-syh2 .image-container img {
    filter: var(--blue-to-syh2-filter);
}

.track-grid .track-card.blue-card.syap.active-syap .image-container img {
    filter: var(--blue-to-syap-filter);
}

.track-grid .track-card.blue-card.syes.active-syes .image-container img {
    filter: var(--blue-to-syes-filter);
}

.track-grid .track-card.pink-card.syap.active-syap .image-container img {
    filter: var(--pink-to-syap-filter);
}

.track-grid .track-card.pink-card.syes.active-syes .image-container img {
    filter: var(--pink-to-syes-filter);
}

.track-grid .track-connection.sycp.active-sycp {
    filter: var(--sycp-filter);
}

.track-grid .track-connection.sywp.active-sywp {
    filter: var(--sywp-filter);
}

.track-grid .track-connection.syh2.active-syh2 {
    filter: var(--syh2-filter);
}

.track-grid .track-connection.syap.active-syap {
    filter: var(--syap-filter);
}

.track-grid .track-connection.syes.active-syes {
    filter: var(--syes-filter);
}


.track-grid .track-card:not(.certification) {
    border: 1px solid var(--color);
    color:  var(--text-color, #5F5F5F);
}


.track-grid .track-card.coming-soon {
    --color: var(--disabled-color);
    cursor: default;
    position: relative;
}


.track-grid .track-card {
	position: relative;
}

.track-grid .track-card .coming-soon-strip, .track-grid .image-strip{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

#track-grid .track-card:not(.certification,.empty-card,.disabled,.coming-soon):hover,
#track-grid .track-card.active:not(.certification,.empty-card,.disabled,.coming-soon)  {
    border-left: 1px solid var(--color);
    border-right: 1px solid var(--color);
    border-top: 1px solid var(--color);
    border-bottom: 1px solid var(--color);
    color: var(--text-color);
}

#track-grid-mobile .track-card.active:not(.certification,.empty-card,.disabled,.coming-soon)  {
    border: 1px solid var(--color);
    color: var(--text-color);
}

#track-grid .track-card:not(.certification,.disabled,.coming-soon):hover {
    box-shadow: 0px 0px 20px 0px var(--color);
}

#track-grid .track-card.certification:hover, .track-grid .track-card.certification.active {
    border:  2px solid var(--color);
}

#track-grid .track-card.certification.sycp {
    --color: var(--sycp-color);
}

#track-grid .track-card.certification.sywp {
    --color: var(--sywp-color);
}

#track-grid .track-card.certification.syh2 {
    --color: var(--syh2-color);
}

#track-grid .track-card.certification.syap {
    --color: var(--syap-color);
}

#track-grid .track-card.certification.syes {
    --color: var(--syes-color);
}

.track-grid.coming-soon {
	row-gap: 2rem
}

.track-grid.coming-soon .track-card {
	cursor: default;
	pointer-events: none;
	height: 100%;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.track-grid.coming-soon .track-card.disabled .text-container {
	color: #9B9B9B;
}

.track-grid.coming-soon .track-card.mystery-course {
	cursor: pointer;
	pointer-events: all;
	border: 1px solid #464646;
	background: linear-gradient(270deg, #000 0%, #282726 100%);
	--background-color: #313131;
}


.track-grid.coming-soon .text-container  {
	gap: .5rem;
	flex-basis: 0;
	flex-grow: 1;
}

.ui.stackable.grid.track-grid.coming-soon > .column {
	/* padding-right: 3rem!important; */
	padding-top: 0!important;
	padding-bottom: 0!important;
	min-height: 98px;
}

.track-grid .track-card.disabled:not(.empty-card) {
    --color: var(--disabled-color);
	border: 1px solid var(--disabled-color);
	background: var(--disabled-gradient);
}


.track-grid .track-card.disabled .text-container {
	color: var(--disabled-color);
}

.track-grid.coming-soon .track-card.disabled .text-container .icons-container .icon-section svg {
    fill: #BCBCBC;
}


.track-grid.coming-soon .track-card.disabled .text-container .icons-container .icon-section {
    color: #BCBCBC;
	background: #3C3C3C;
}


.track-grid .track-card.disabled .icons-container .icon-section {
	background: var(--disabled-gradient);
	color: var(--disabled-color);
}

.track-grid .track-card.disabled .image-container img {
    filter: var(--disabled-filter);
}

#track-grid .track-card .image-container {
    min-width: 45px;
    flex-shrink: 0;
}

.track-grid .track-card .image-container img {
    max-height: 80px;
}

.track-grid .track-card.certification .image-container img {
    max-height: 70px;
}

.track-grid .track-card .text-container {
    font-family: Gabarito, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 13px;
    text-transform: uppercase;


}

/*#track-grid .track-card .image-container {*/
/*    background: linear-gradient(0deg, rgba(36, 126, 243, 0.70) 0%, rgba(36, 126, 243, 0.70) 100%), url('./intro-solyd-one.webp') lightgray 50% / cover no-repeat;*/
/*    background-blend-mode: color, normal;*/
/*}*/

.track-grid .track-card.certification .text-container {
    display: flex;
    flex-direction: column;
    color: #FFF;
    text-align: center;
    font-family: Gruppo, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
    text-transform: uppercase;
}

.track-grid .track-card.certification .text-container .certification-label {
    font-size: 24px;
}

#track-grid .track-connection {
    --col-size: 2;
    --row-size: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.track-grid .track-connection {
    z-index: 0;
    position: relative;
}

#track-grid #intro-solyd-one {
    --row: 5;
}

#track-grid #intro-solyd-one-connection {
    --row: 5;
}

#track-grid #intro-infosec-pentest {
    --row: 5;
    grid-row: 5 / span 6;
}

#track-grid #intro-infosec-pentest-connection {
    --row: 4;
    --row-size: 8;
}

#track-grid #intro-infosec-pentest-connection img{
    height: 100%;
}

#track-grid #linux-shell-pentester {
    --row: 1;
}

#track-grid #linux-shell-pentester-connection {
    --row: 1;
}

#track-grid #intro-python {
    --row: 9;
}

#track-grid #intro-python-connection {
    --row: 9;
}

#track-grid #cripto-and-passwords {
    --row: 1;
}

#track-grid #python-oop {
    --row: 9;
}

#track-grid #triple-connection {
    --col-size: 1;
    --row: 4;
    --row-size: 16;
    position: relative;
}

#track-grid #triple-connection img {
    height: 100%;
    position: absolute;
}

#track-grid #pentest-in-network-padding {
    --col-size: calc(var(--card-col-size) + var(--connection-col-size));
    --row: 17;
}

#track-grid #pentest-in-network {
    --row: 17;
}

#track-grid #pentest-in-network-connection {
    --row: 17;
}

#track-grid #recon-pentest {
    --row: 17;
}

#track-grid #recon-pentest-connection {
    --row: 17;
}

#track-grid #network-for-pentest {
    --row: 17;
}

#track-grid #crossroad-connection1 {
    --col: 11;
    --col-size: 8;
    --row: 23;
}

#track-grid #crossroad-connection2 {
    --col: 11;
    --col-size: 8;
    --row: 24;
}

.track-grid .track-connection.top-half img, .track-grid .track-connection.bottom-half img {
    position: absolute!important;
}

.track-grid .track-connection.vertical.top-half, .track-grid .track-connection.vertical.bottom-half {
    --row-size: 1!important;
}

.track-grid .track-connection.top-half img {
    bottom: -2px!important;
}

.track-grid .track-connection.bottom-half img {
    top: 0!important;
}

#track-grid #initial-connection {
	--row: 1;
	--row-size: 4;
	justify-content: flex-end;

}

.track-grid #initial-connection .connection-circle {
	position: relative;
	width: 20px;
	height: 20px;
	min-height: 20px;
	background-color: var(--purple-default);
	border-radius: 50%;
	z-index: 1;
}

#track-grid #initial-connection .connection-circle {
	top: 5px;
}

#track-grid-mobile .first-connection {
	flex-direction: column;
	align-items: center;
}

#track-grid-mobile .first-connection .connection-circle {
	transform: translateX(1px);
}



.track-grid #initial-connection .connection-circle:after {
	content: "";
	border: 1.5px solid var(--purple-default);
	position: absolute;
	border-radius: 50%;
	transform: scale(1);
	animation: pulse 1s infinite;
	width: 100%;
	height: 100%;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  33%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}


.track-grid #initial-connection .zero-label {
	--offset-top: 20px;
	color: #FFF;
	text-align: center;
	font-family: Gruppo;
	font-size: 21.341px;
	font-style: normal;
	font-weight: 400;
	line-height: 25.49px; 
	text-transform: uppercase;
	position: absolute;
	top: 0;
	transform: translateY(calc(-50% - var(--offset-top)));
}

#track-grid-mobile #initial-connection .zero-label {
	--offset-top: 30px;
}


#track-grid #sycp-connection {
    --col: 5;
    --col-size: 10;
    --row: 24;
    position: relative;
    align-self: start;
}

#track-grid #sycp-connection img {
    width: 100%;
}

#track-grid #syh2-connection {
    --col: 15;
    --col-size: 10;
    --row: 24;
    position: relative;
    align-self: start;
}

#track-grid #syh2-connection img {
    width: 100%;
}

#track-grid #rogue-connection {
    --col: 25;
    --col-size: 10;
    --row: 24;
    position: relative;
    align-self: start;
}

.absolute-connection img {
    position: absolute;
}

.fit-cell {
    align-self: start;
}

.fit-cell img {
    width: 100%;
}

#track-grid #rogue-connection img {
    width: 100%;
}

#track-grid .col1 {
    --col: 1
}

#track-grid #webdev-pentest {
    --row: 25;
}

#track-grid .track-connection.vertical {
    --col-size: 8;
    --row-size: 2;
}

#track-grid #webdev-pentest-connection {
    --row: 31;
    position: relative;
}

#track-grid #webdev-pentest-connection img {
    position: absolute;
}

#track-grid #attack-web {
    --row: 33;
}

#track-grid #attack-web-connection {
    --row: 39;
}

#track-grid #pentest-cloud {
    --row: 41;
}

#track-grid #pentest-cloud-connection1 {
    --row: 47
}

#track-grid #pentest-cloud-connection2 {
    --row: 48
}

#track-grid #to-sycp-connection {
    --row: 48;
    --col: 5;
    --col-size: 10;
}

#track-grid #pentest-app-android {
    --row: 49;
}

#track-grid #pentest-app-android-connection {
    --row: 55;
}

#track-grid #malware-android {
    --row: 57;
}

#track-grid #malware-android-connection {
    --row: 63;
}

#track-grid #syap {
    --row: 65;
}

#track-grid .col2 {
    --col: 11;
}

#track-grid #attack-wifi {
    --row: 25;
}

#track-grid #attack-wifi-connection {
    --row: 31;
}

#track-grid #security-wifi {
    --row: 33;
}

#track-grid #security-wifi-connection {
    --row: 39;
}

#track-grid #sywp {
    --row: 41;
}

#track-grid #automation-bug-bounty {
    --row: 49;
}

#track-grid #automation-bug-bounty-connection {
    --row: 55;
}

#track-grid #ai-pentest {
    --row: 57;
}

#track-grid #ai-pentest-connection {
    --row: 63;
}

#track-grid #c-pentest {
    --row: 65;
}

#track-grid #c-pentest-connection1 {
    --row: 71;
}

#track-grid #c-pentest-connection2 {
    --row: 72;
}

#track-grid #to-syes-connection {
    --row: 72;
    --col: 15;
    --col-size: 10;
}

#track-grid #post-exploit-linux {
    --row: 73;
}

#track-grid #post-exploit-linux-connection {
    --row: 79;
}

#track-grid #docker-pentester {
    --row: 81;
}

#track-grid #docker-pentester-connection {
    --row: 87;
}

#track-grid #methodology-pentest {
    --row: 89;
}

#track-grid #methodology-pentest-connection {
    --row: 95;
}

#track-grid #sycp {
    --row: 97;
}

#track-grid .col3 {
    --col: 21;
}

#track-grid #electronics {
    --row: 25;
}

#track-grid #electronics-connection {
    --row: 31;
}

#track-grid #gadgets {
    --row: 33;
}

#track-grid #gadgets-connection {
    --row: 39;
}

#track-grid #game-cheat {
    --row: 41;
}

#track-grid #game-cheat-connection {
    --row: 47;
}

#track-grid #hardware-practice {
    --row: 49;
}

#track-grid #hardware-practice-connection {
    --row: 55;
}

#track-grid #syh2 {
    --row: 57;
}

#track-grid #powershell {
    --row: 73;
}

#track-grid #powershell-connection {
    --row: 79
}

#track-grid #windows-ad {
    --row: 81
}

#track-grid #windows-ad-connection {
    --row: 87
}

#track-grid #assembly {
    --row: 89
}

#track-grid #assembly-connection {
    --row: 76;
    --row-size: 16;
    --col: 29;
    --col-size: 2;
}

#track-grid #assembly-connection img {
    height: 100%;
}

#track-grid .col4 {
    --col: 31;
}

#track-grid #dos {
    --row: 25;
}

#track-grid #dos-connection {
    --row: 31;
}

#track-grid #mitm {
    --row: 33;
}

#track-grid #mitm-connection {
    --row: 39;
}

#track-grid #phishing {
    --row: 41;
}

#track-grid #phishing-connection {
    --row: 47;
}

#track-grid #privacy {
    --row: 49;
}

#track-grid #adm {
    --row: 73;
}

#track-grid #adm-connection {
    --row: 79;
}

#track-grid #edr {
    --row: 81;
}

#track-grid #edr-connection {
    --row: 87;
}

#track-grid #syes {
    --row: 89;
}


#track-grid-mobile {
    display: none;
    color: var(--disabled-color);
    flex-direction: column;
    align-items: center;
    gap: 0;
}

#track-grid-mobile #subgrid-mobile-wrapper {
    margin-top: -6px;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
	padding: 0 15px;
}

#track-grid-mobile #subgrid-mobile {
    display: grid;
    grid-template-rows: repeat(144, 1fr);
    grid-template-columns: repeat(70, 1fr);
    grid-auto-flow: dense;
    flex-direction: column;
    gap: 0;
    width: max-content;

    --card-col-mobile-size: 16;
    --connection-col-mobile-size: 16;
    --card-row-mobile-size: 12;
    --connection-row-mobile-size: 4;
}


#subgrid-mobile .track-card {
    --col-size: var(--card-col-mobile-size);
    --row-size: var(--card-row-mobile-size);
}

#subgrid-mobile .track-connection {
    --col-size: var(--connection-col-mobile-size);
    --row-size: var(--connection-row-mobile-size);
}


#track-grid-mobile .row {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 2rem;
	padding: 0 1.5rem;
}

#track-grid-mobile #subgrid-mobile .row {
    justify-content: flex-start;
}

#track-grid-mobile  .row.double .track-card {
    max-width: 50%;
}

#track-grid-mobile .row.double .double-section{
	max-width: 50%;
}

#track-grid-mobile .row.double .double-section .track-card {
	max-width: 100%;
}

#track-grid-mobile .row.double .double-section .track-connection {
	display: flex;
	justify-content: center;
}

#track-grid-mobile  .row.connection-row  {
    height: 30px;
    position: relative;

}

#track-grid-mobile  .row.double.connection-row  {
    height: auto;
    position: static;
    margin: -25px 0;
}

#track-grid-mobile  .row.double.connection-row .track-connection {
    position: static;
    max-width: 240px;
    width: 60%;
}

#track-grid-mobile  .row.double.connection-row img  {
    position: static;
    width: 100%;
}

#track-grid-mobile  .row.static.connection-row img  {
    position: static;
}

#track-grid-mobile  .row.parallel.connection-row {
    justify-content: space-evenly;
}

#track-grid-mobile .row.connection-row img  {
    position: absolute;
    bottom: 0;
    z-index: -1;
}

#track-grid-mobile .row.connection-row.crossroad img  {
    position: static;
}

#track-grid-mobile .row.connection-row.crossroad {
    display: flex;
    justify-content: flex-start;
    gap: 0;
}

#track-grid-mobile #left-arrow {
    margin-right: auto;
    margin-left: 10px;
    z-index: 1;
}

#track-grid-mobile #right-arrow {
    margin-right: 10px;
    margin-left: auto;
    z-index: 1;
}

#track-grid-mobile .row.connection-row.crossroad .long {
    min-width: 50%;
}

.clock-icon-path, .book-icon-path, .difficulty-icon-g path {
	fill: var(--icon-color);
}

.track-card.disabled :is(.clock-icon-path, .book-icon-path, .difficulty-icon-g path) {
	fill: var(--disabled-color);
}

.track-grid.coming-soon .track-card.disabled :is(.clock-icon-path, .book-icon-path, .difficulty-icon-g path) {
	fill: #BCBCBC;
}

.difficulty-icon-g path.difficulty-icon-lighter {
	fill: var(--icon-color);
}

#track-grid-mobile .row.connection-row.crossroad .short {
    min-width: 30%;
}

#track-grid-mobile .row.connection-row.crossroad img {
    width: 100%;
}

#track-grid-mobile.track-grid .track-card {
    flex-direction: column;
    width: 200px;
    height: 170px;
}

/* #track-grid-mobile.track-grid .track-card:not(.certification) .image-container, #track-grid-mobile.track-grid .track-card .image-container img  { */
/*     width: 100%; */
/* } */

#track-grid-mobile.track-grid .track-card .text-container {
    font-family: Gabarito, sans-serif;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    line-height: 13px;
    text-transform: uppercase;
	gap: 5px;
}

#subgrid-mobile .track-connection.vertical  {
    --row-size: 2;
    --col-size: 16;
    position: relative;
    display: flex;
    justify-content: center;
}


#subgrid-mobile .track-connection.vertical img  {
    height: 30px;
    position: absolute;
    bottom: 0;
}


#subgrid-mobile .track-connection.crossroad  {
    --row-size: 2;
    margin-top: 7px;
}

#subgrid-mobile .track-connection.crossroad.short  {
    margin-top: 6px;
}


#subgrid-mobile .track-connection.crossroad img  {
    width: 100%;
    position: absolute;
}

#subgrid-mobile .track-connection.crossroad.long  {
    --col-size: 18;
}

#subgrid-mobile .track-connection.crossroad.short  {
    --col-size: 9;

}

#track-grid-mobile .track-connection.adjacent {
    --row-size: 1;
    --col-size: 18;
}

#track-grid-mobile #to-sycp-connection {
    --row: 44;
    --col: 9;
}

#track-grid-mobile #pentest-cloud-connection2 {
    --row: 44;
}

.left-correction {
    margin-left: -2px;
}

.right-correction {
   margin-right: 2px;
}

#track-grid-mobile .track-connection.adjacent img {
    position: absolute;
    width: 100%;
}

#subgrid-mobile .track-connection.half-width  {
    --col-size: 2;
    --row-size: 1;
    --col: 35
}

#subgrid-mobile #sycp-connection  {
    --col: 9;
    margin-right: -2px;
}

#subgrid-mobile #rogue-connection  {
    margin-left: -2px;
}


#track-grid-mobile .track-card:not(.certification,.empty-card) {
    border: 1px solid var(--color);
    color:  #5F5F5F;
}

#track-grid-mobile.track-grid .track-card.certification {
    gap: 5px;

}

#track-grid-mobile.track-grid .track-card.certification .image-container img {
    max-height: 95px;
    width: auto;
}


#track-grid-mobile .track-card.certification .text-container {
	text-align: center;
    display: flex;
    flex-direction: column;
    color: #FFF;
    text-align: center;
    font-family: Gruppo, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
    text-transform: uppercase;
    align-items: center;
    gap: 0;
}


#track-grid-mobile #c-pentest-connection1 {
    --row: 85;
}

#track-grid-mobile #c-pentest-connection2 {
    --row: 86;
}

#track-grid-mobile #to-syes-connection {
    --row: 86;
    --col: 27;
}

#track-grid-mobile #powershell {
    --row: 87
}


#track-grid-mobile #assembly-connection {
    --row: 93;
    --col: 53;
    --col-size: 2;
    --row-size: 28;
}

#track-grid-mobile #adm {
    --row: 87;
}

#subgrid-mobile .col1 {
    --col: 1;
}

#subgrid-mobile .col2 {
    --col: 19;
}
#subgrid-mobile .col3 {
    --col: 37;
}
#subgrid-mobile .col4 {
    --col: 55;
}

@media only screen and (max-width: 1199px) {
    .track-grid .track-card.break-words .text-container {
        word-break: break-all;
    }

	.track-grid .track-card .text-container {
		font-size: 10px
	}

	#track-grid .track-card:not(.empty-card) {
		gap: 0;
	}
}

@media only screen and (max-width: 1199px) and (min-width: 992px) {
	.track-grid .track-card .icons-container {
		display: none;
	}
}

@media only screen and (max-width: 991px) {
    #tracks-carousel .track-item .image-container img {
        height: 35px;
    }

    #track-grid .track-card .image-container {
        flex-shrink: 1;
    }

    .track-grid .track-card .text-container {
        font-size: 10px;
    }

    #track-grid .track-card.certification .text-container {
        font-size: 10px;
        line-height: 18px;
    }

}


@media only screen and (max-width: 991px) {
    #tracks-carousel .track-item .text-container {
        font-size: 12px;
    }

    #tracks-carousel .track-item .image-container img {
        height: 30px;
    }

    #track-grid {
        display: none;
    }
    #track-grid-mobile {
        display: flex;
    }
}