.panel_left > button{
	float: left;
	margin-left:8px;
}

@media all and (min-width: 20px)  {  .btn-toogle-circular-small > li  { font-size:0.9em; color: red; } }
@media all and (min-width: 50px)  {  .btn-toogle-circular-medium > li  { font-size:2em; color: #fff; } }
@media all and (min-width: 70px)  {  .btn-toogle-circular-large > li  { font-size:3em; color: red; } }

@media all and (min-width: 20px)  {  .btn-toogle-quadrado-small > li  { font-size:0.9em;color: red;  } }
@media all and (min-width: 50px)  {  .btn-toogle-quadrado-medium > li  { font-size:2em; color: red; } }
@media all and (min-width: 70px)  {  .btn-toogle-quadrado-large > li  { font-size:3em; color: red; } }



/*  ---------- btn quadrado small ----------- */
.btn-toogle-quadrado-small {
    max-height: 100%;
    width: 20px !important;
    height: 20px !important;
    background: transparent;
    border: none;
    padding: 0px;
    vertical-align: middle;
    max-width: 100%;
}

.btn-toogle-quadrado-small > img{
	max-width: 100%;
	max-height: 100%;
}

.btn-toogle-quadrado-small:hover{
	background: transparent;
}

.btn-toogle-quadrado-small:hover, default.active:hover{
	background: transparent;
}

.btn-toogle-quadrado-small, .btn.active, .btn:active{
	outline: 0 !important;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0) !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0) !important;
}

/*  ---------- btn quadrado medium ----------- */

.btn-toogle-quadrado-medium {
    max-height: 100%;
    width: 50px !important;
    height: 50px !important;
    background: transparent;
    border: none;
    padding: 0px;
    vertical-align: middle;
    max-width: 100%;
}

.btn-toogle-quadrado-medium > img{
	max-width: 100%;
	max-height: 100%;
}

.btn-toogle-quadrado-medium:hover{
	background: transparent;
}

.btn-toogle-quadrado-medium:hover, default.active:hover{
	background: transparent;
}

.btn-toogle-quadrado-medium, .btn.active, .btn:active{
	outline: 0 !important;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0) !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0) !important;
}


/*  ---------- btn quadrado large ----------- */

.btn-toogle-quadrado-large {
    max-height: 100%;
    width: 70px !important;
    height: 70px !important;
    background: transparent;
    border: none;
    padding: 0px;
    vertical-align: middle;
    max-width: 100%;
}

.btn-toogle-quadrado-large > img{
	max-width: 100%;
	max-height: 100%;
}

.btn-toogle-quadrado-large:hover{
	background: transparent;
}

.btn-toogle-quadrado-large:hover, default.active:hover{
	background: transparent;
}

.btn-toogle-quadrado-large, .btn.active, .btn:active{
	outline: 0 !important;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0) !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0) !important;
}
/*  ---------- toogle button ----------- */

.btn-default.btn-on.active{color: white;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;}
.btn-default.btn-on{border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;}
.btn-default.btn-on:hover{background-color:white;}


.btn-default.btn-off.active{color: white;border-top-right-radius: 4px !important;border-bottom-right-radius: 4px !important;}
.btn-default.btn-off{border-top-right-radius: 4px !important;border-bottom-right-radius: 4px !important;}
.btn-default.btn-off:hover{background-color: white;}



/*  ---------- btn circular small ----------- */
.btn-toogle-circular-small {
    max-height: 100%;
    width: 20px !important;
    height: 20px !important;
    background: transparent;
    border: none;
    padding: 0px;
    vertical-align: middle;
    max-width: 100%;
    border-radius: 50% !important;
}

.btn-toogle-circular-small > img{
	max-width: 100%;
	max-height: 100%;

}


.btn-toogle-circular-small:hover{
	background: transparent;
}

.btn-toogle-circular-small:hover, default.active:hover{
	background: transparent;
}

.btn-toogle-circular-small, .btn.active, .btn:active{
	outline: 0 !important;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0) !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0) !important;
}

/*  ---------- btn circular medium ----------- */
.btn-toogle-circular-medium {
    max-height: 100%;
    width: 50px !important;
    height: 50px !important;
    background: transparent;
    border: none;
    padding: 4px;
    vertical-align: middle;
    max-width: 100%;
    border-radius: 50% !important;
}

.btn-toogle-circular-medium > img{
	max-width: 100%;
	max-height: 100%;

}

.btn-toogle-circular-medium:hover{
	background: transparent;
}

.btn-toogle-circular-medium:hover, default.active:hover{
	background: transparent;
}

.btn-toogle-circular-medium, .btn.active, .btn:active{
	outline: 0 !important;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0) !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0) !important;
}


/*  ---------- btn circular large ----------- */
.btn-toogle-circular-large {
    max-height: 100%;
    width: 70px !important;
    height: 70px !important;
    background: transparent;
    border: none;
    padding: 4px;
    vertical-align: middle;
    max-width: 100%;
    border-radius: 50% !important;
}

.btn-toogle-circular-large > img{
	max-width: 100%;
	max-height: 100%;
}

.btn-toogle-circular-large:hover{
	background: transparent;
}

.btn-toogle-circular-large:hover, default.active:hover{
	background: transparent;
}

.btn-toogle-circular-large, .btn.active, .btn:active{
	outline: 0 !important;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0) !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0) !important;
}



.btn-header{
	float: right;
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 20px;
    height: 20px;
    text-align: center;
}