.toggle-switch-container {
display: inline-block;
vertical-align: bottom;
margin-bottom: 5px; 
}
.switch-container {
position: relative;
width: 250px;
height: 36px;
border: 1px solid #CCC;
border-radius: 5px;
display: flex;
font-weight: 900;
font-size: 14px;
overflow: hidden;
}
.switch-option {
flex: 1;
text-align: center;
line-height: 36px;
text-decoration: none;
z-index: 2;
transition: color 0.3s;
background: transparent;
}
#institutional {
color: #1385ca; }
#sportive {
color: #4d4d4d; }
.slider {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
border-radius: 5px;
transition: left 0.3s, background-color 0.3s;
z-index: 1;
}
.switch-container.active-institutional .slider {
left: 0;
background-color: #1385ca;
}
.switch-container.active-institutional #institutional {
color: #fff;
}
.switch-container.active-institutional #sportive {
color: #4d4d4d;
}
.switch-container.active-sportive .slider {
left: 50%;
background-color: #4d4d4d;
}
.switch-container.active-sportive #sportive {
color: #fff;
}
.switch-container.active-sportive #institutional {
color: #1385ca;
}
.switch-container:not(.active-institutional) #institutional:hover ~ .slider {
left: 0;
background-color: #1385ca;
}
.switch-container:not(.active-institutional) #institutional:hover {
color: #fff;
}
.switch-container:not(.active-sportive) #sportive:hover ~ .slider {
left: 50%;
background-color: #4d4d4d;
}
.switch-container:not(.active-sportive) #sportive:hover {
color: #fff;
}
.switch-container.active-institutional:hover #institutional:not(:hover) {
color: #1385ca;
}
.switch-container.active-institutional:hover #sportive:not(:hover) {
color: #4d4d4d;
}
.switch-container.active-sportive:hover #sportive:not(:hover) {
color: #4d4d4d;
}
.switch-container.active-sportive:hover #institutional:not(:hover) {
color: #1385ca;
}