#app
{
    /*max-width: 560px;*/
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
}

#map-container{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;

}

#app.hide{
    opacity: 0;
}

#app h1 {
    font-size: 14pt;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
#app .remark
{
	 font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 15px;
    display: block;
}

#app .text-sm{
    font-size: 13px;

}

#app .text-sm a{
    color:#757170;
    text-decoration: none;
}

#app .legend {

    margin: 10px 0;
}

#app .legend .legend-box {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: top;
}

#app .legend .legend-value {
    margin: 0 5px;
}


.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute;
    z-index: 0;
}

#slider-trade{
    width:92%;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

.trade-label{
    margin-top: 10px;
    width:92%;
    margin-left: auto;
    margin-right: auto;
}

.labels button
{
    width: 40px;
    height: 40px;
    line-height: 30px;
    background: #ECECEC;
    border: none;
}

button.republican{
    background: #CE1021;
    color: #FFFFFF;
    border: none;
}

button.democrat{
    background: #007FFF;
    color: #FFFFFF;
    border: none;
}


#slider-red,
#slider-blue
{
    height:100%
}

.info{
    font-size: 14px;
    margin-up: 20px;
    margin-bottom: 20px;
}

.squaire-tooltip{
    z-index: 1024;
}
.squaire-tooltip .close{
    position: absolute;
    top: 0;
    right: 5px;
    z-index: 5510;
}





/* Prototype V2*/


#scenario-heading,
#scenario-text{
    position: relative;
}

#scenario-heading .item,
#scenario-text .item{

    transform-origin: top;
    transition: transform 300ms ease, opacity 300ms ease;
    transition-delay: 300ms, 0ms;
}


.app-info .hide{
    display: inline-block;
    position: absolute;
    transform: scale(1, 0);
    opacity: 0;
    top: 0;
    left: 0;
}

.my-1rem
{
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.svg-wrap{
    cursor: pointer;
}

.svg-wrap svg
{
    width: 25px;
    display: block;
    margin: 0 auto;

    transition: fill 300ms ease, transform 300ms ease;
}

.squaire .box-rect{
    transition: fill 300ms ease;
}

.svg-wrap.disabled svg
{
    fill: rgba(0, 0, 0, 0.41);
    /*transform: scale(0.9,0.9)*/
}

.rot-270{
    transform: rotateZ(-90deg);
}

.rot-90{
    transform: rotateZ(90deg);
}


.trade-label .hide{
    display: none;
}


/*toggle button style*/
.toggle-container{
    margin-top: 0.24em;
    box-sizing: border-box;
}

#toggle {
    opacity: 0;
    display: none;
}

#label {
    display: inline-block;
    width: 2em;
    height: 1em;
    border-radius: 0.5em;
    border: 0.05em solid #2c3e50;
    position: relative;
    cursor: pointer;
    background: #ffffff;
}

#switch {
    position: absolute;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.01em;
    border-radius: 1em;
    background: #FFCB05;
    box-shadow: 5px 0px 28px -9px rgba(0, 0, 0, 0.75);
    transition: transform .2s ease-in;
}

#toggle:checked ~ #label #switch {
    background: #01258e;
    transform: translatex(1em);
    transition: transform .2s ease-in;
}

/*// Small devices (landscape phones, 576px and up)*/
@media screen and (max-width: 360px) {
	#app h1 {
		font-size:11.3pt;
	}

	#app .remark{
		font-size:13.5px;
	}
	.header .h-title {
		    font-size: 15px;
	}
	.trade-label {

		width:100%;
		    margin-left: 2px;
	}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 540px)
{
	
	#app .remark
{
    font-size: 11pt;
}
    .toggle-container{
        font-size: 1.138em;
    }
}

/*// Large devices (desktops, 992px and up)*/
@media screen and (miax-width: 330px)
{
	#app h1 {
		font-size:10.5pt;
	}
 .header .h-title {
    font-size: 14px;
}
}