.toggle-switch {
    height: 44px;
    border: 2px solid #000000;
    display: inline-block;
    overflow: hidden;
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    border-radius: 4px;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
}
.toggle-switch:after,
.toggle-switch:before {
    height: 41px;
    display: block;
    line-height: 41px;
    text-align: center;
    position: absolute;
    font-size: 1.3em;
    transition: left 0.5s, right 0.5s;
}
.toggle-switch::after {
    left: 10px;
}
.toggle-switch::before {
    /* right: 109px; */
}
.toggle-switch:checked::after {
    /* left: 109px; */
}
.toggle-switch:checked::before {
    right: 10px;
}

/* Streets / Satelite */
.toggle-switch.switch-gender {
    width: 109px;
}
.toggle-switch.switch-gender:after,
.toggle-switch.switch-gender:before {
    width: 99px;
}
.toggle-switch.switch-gender::after {
    left: 10px;
}
.toggle-switch.switch-gender::before {
    right: 109px;
}
.toggle-switch.switch-gender:checked::after {
    left: 109px;
}
.toggle-switch.switch-gender:checked::before {
    right: 10px;
}
.toggle-switch.switch-gender::before {
    background-color: #3B99FC;
    content: 'Streets';
    color: white;
}
.toggle-switch.switch-gender::after {
    content: 'Satellite';
    background-color: #F06292;
    color: white;
}

/* Display Data / Hide Data */
.toggle-switch.switch-data-show {
    width: 149px;
}
.toggle-switch.switch-data-show:after,
.toggle-switch.switch-data-show:before {
    width: 139px;
}
.toggle-switch.switch-data-show::after {
    left: 10px;
}
.toggle-switch.switch-data-show::before {
    right: 149px;
}
.toggle-switch.switch-data-show:checked::after {
    left: 149px;
}
.toggle-switch.switch-data-show:checked::before {
    right: 10px;
}
.toggle-switch.switch-data-show::before {
    background-color: #3B99FC;
    content: 'Display Data';
    color: white;
}
.toggle-switch.switch-data-show::after {
    content: 'Hide Data';
    background-color: #F06292;
    color: white;
}

/* Show divisions / Hide Divisions */
.toggle-switch.switch-msa-division {
    width: 169px;
}
.toggle-switch.switch-msa-division:after,
.toggle-switch.switch-msa-division:before {
    width: 159px;
}
.toggle-switch.switch-msa-division::after {
    left: 10px;
}
.toggle-switch.switch-msa-division::before {
    right: 169px;
}
.toggle-switch.switch-msa-division:checked::after {
    left: 169px;
}
.toggle-switch.switch-msa-division:checked::before {
    right: 10px;
}
.toggle-switch.switch-msa-division::before {
    background-color: #3B99FC;
    content: 'Show divisions';
    color: white;
}
.toggle-switch.switch-msa-division::after {
    content: 'Hide Divisions';
    background-color: #F06292;
    color: white;
}

/* NECTAS / MSAs */
.toggle-switch.switch-nectas-msas {
    width: 119px;
}
.toggle-switch.switch-nectas-msas:after,
.toggle-switch.switch-nectas-msas:before {
    width: 109px;
}
.toggle-switch.switch-nectas-msas::after {
    left: 10px;
}
.toggle-switch.switch-nectas-msas::before {
    right: 119px;
}
.toggle-switch.switch-nectas-msas:checked::after {
    left: 119px;
}
.toggle-switch.switch-nectas-msas:checked::before {
    right: 10px;
}
.toggle-switch.switch-nectas-msas::before {
    background-color: #3B99FC;
    content: 'NECTAS';
    color: white;
}
.toggle-switch.switch-nectas-msas::after {
    content: 'MSAs';
    background-color: #F06292;
    color: white;
}

.toggle-switch-label {
    line-height: 41px;
    vertical-align: top;
    margin-top: 4px;
}
#animationBtn {
    background-color: #4dc351;
    border-radius: 4px;
    width: 28px;
    margin-right: 8px;
    border: 2px black solid;
    color: white;
}

@media screen and (max-width: 350px) {
    .toggle-switch.switch-data-show {
        width: 119px;
    }
    .toggle-switch.switch-data-show:after,
    .toggle-switch.switch-data-show:before {
        width: 109px;
    }
    .toggle-switch.switch-data-show::before {
        right: 119px;
    }
    .toggle-switch.switch-data-show:checked::after {
        left: 119px;
    }
    .toggle-switch.switch-data-show::before {
        content: 'Show Data';
    }
    .toggle-switch.switch-data-show::after {
        content: 'Hide Data';
    }
}