/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 15/06/2018, 09:24:40
    Author     : ti4
*/

.toggle-box {
    font-size: 1rem;
}

.toggle-box .toggle-box-elem,
.toggle-box .toggle-box-elem-nopadding {
    position: relative;
    background-color: #fafafa;
    margin: 2px 0;
    cursor: pointer;
    /* Comentado pois estava escondendo conteudo flutuante */
    /*overflow: hidden;*/
    /*box-shadow: 0 0 4px rgba(0, 0, 0, .3);*/
    /*transition: all ease-in-out .3s;*/
}

.toggle-box .toggle-box-elem {
    padding: .4em .8em .4em;
    width: 100%;
}

.toggle-box .toggle-box-elem-nopadding {
    padding: 0;
}

.toggle-box .toggle-box-elem-nopadding .larg-fixa-grande,
.toggle-box .toggle-box-elem.larg-fixa-grande {
    width: 230px;
}

.toggle-box .toggle-box-elem-nopadding .larg-fixa-media,
.toggle-box .toggle-box-elem.larg-fixa-media {
    width: 150px;
}


.toggle-box .toggle-box-elem-nopadding .larg-fixa-pequena,
.toggle-box .toggle-box-elem.larg-fixa-pequena {
    width: 80px;
}

@media only screen and (max-width: 992px) {
    .toggle-box .toggle-box-elem-nopadding .larg-fixa-grande,
    .toggle-box .toggle-box-elem.larg-fixa-grande {
        /*width: 100% !important;*/
        /*display: inline-block;*/
    }

    .toggle-box .toggle-box-elem-nopadding .larg-fixa-media,
    .toggle-box .toggle-box-elem.larg-fixa-media {
        /*width: 100% !important;*/
        /*display: inline-block;*/
    }

    .toggle-box .toggle-box-elem-nopadding .larg-fixa-pequena,
    .toggle-box .toggle-box-elem.larg-fixa-pequena {
        /*width: 100% !important;*/
        /*display: inline-block;*/
    }
}

.toggle-box .toggle-box-elem,
.toggle-box .toggle-box-elem-nopadding {
    border: 1px solid #CCC;
}

.toggle-box .disabled .toggle-box-elem,
.toggle-box .disabled .toggle-box-elem-nopadding {
    background-color: #e0e0e0;
    cursor: not-allowed;
}

.toggle-box .selected .toggle-box-elem,
.toggle-box .selected .toggle-box-elem-nopadding {
    /*border-color: #00D235;*/
    border: 1px solid #0f9d58;
    background-color: #0f9d58;
    color: #FFFFFF;
}

.toggle-box .toggle-box-icon {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    justify-content: center;
    top: 0;
    right: 0;
    width: 1em;
    height: 90%;
    background-color: #00D235;
    padding: 1px;
    z-index: 100;
}

.toogle-chip {
    border: 1px solid #ccc;
    border-radius: 16px;
    line-height: 32px;
    height: 32px;
    padding: 0px 12px
}

.toogle-chip.selected {
    background-color: #3d3d3d;
    color: white
}

.toogle-svg {
    border: 1px solid #ccc;
    margin: 0px 5px 0px -12px;
    border-radius: 50%;
    background-color: #fff;
}

.toogle-chip.selected .toogle-svg > div > svg path {
    fill: #0f9d58;
}

.toggle-box .toggle-box-icon svg {
    width: .8em;
    height: .8em;
}

.toggle-box .toggle-box-icon svg path {
    fill: #000;
}

.toggle-box .toggle-box-elem.larg-total {
    width: 100%;
    display: inline-block;
}

.toggle-box.color .field_toggle_elem .toggle-box-elem {
    width: 3em;
    height: 3em;
}

.toggle-box.color .field_toggle_elem .toggle-box-elem-nopadding {
    width: 3em;
    height: 3em;
}

.toggle-box.color .field_toggle_elem.selected .toggle-box-elem {
    border: 0.3em solid #ccc;
}

.toggle-box.color .field_toggle_elem.selected .toggle-box-elem-nopadding {
    border: 0.3em solid #ccc;
}

.toggle-box.movimentador .field_toggle_elem .toggle-box-elem {
    position: relative;
    padding: 0;
    width: 8em;
    height: 8em;
}

.toggle-box.movimentador .field_toggle_elem .movimentador-centro {
    position: relative;
    top: 1em;
    left: 1em;
    width: 4em;
    height: 4em;
    z-index: 1;
    border: 1px solid #ccc;
}

.toggle-box.movimentador .field_toggle_elem .movimentador-centro > div {
    position: absolute;
    text-align: center;
    font-size: 0.8em;
    color: #000000;
    border-radius: .2em;
    z-index: 1;
}

.toggle-box.movimentador .field_toggle_elem .movimentador-altura {
    top: -25%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-25%);
    transform: translateX(-50%) translateY(-25%);
}

.toggle-box.movimentador .field_toggle_elem .movimentador-comprimento {
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(110%);
    transform: translateX(-50%) translateY(110%);
}

.toggle-box.movimentador .field_toggle_elem .movimentador-largura {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateX(110%) translateY(-50%);
    transform: translateX(110%) translateY(-50%);
}

.toggle-box.movimentador .field_toggle_elem .icone {
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}