/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.containerMap{
    display: flex;
}

.contentWrapper {
    width: 40%;
    margin-right: 16px;
    max-height: 600px; 
    overflow-y: auto; 
}

.mapWrapper{
    width: calc(60% - 16px);
}

.map path{
    fill: #f1ebeb;
    stroke: #cecece;
    cursor: pointer;
    transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.map path:hover{
    fill: #cd1626;
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
    transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.mapActive{
    fill: #cd1626 !important;
}

/* .statesList */
.statesList{
    list-style: none !important;
    padding: 10;
    margin: 10 !important;
}
.statesList__item{
    /* display: flex; */
    flex-flow: column;
    display: none;
}
.statesList__item--active{
    display: flex;
}

/* repList */
.repsList{
    list-style: none !important;
    padding: 10;
    margin: 10 !important;
}
.repsList__item{
    display: flex;
    flex-flow: column;

    width: 100%;
    padding: 16px 24px;
    margin: 6px auto;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.repsList__item:hover{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 15px;
    transition: .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}