:root {
    /* fonts */
    --font: 'Museo 500';
    --font-distak: 'Geometos', sans-serif; 

    /* colors */
    --color-white: #ffffff;
    --color-yellow: #ffd530;
    --color-red: #ef4430;
    --color-red-dark: #c93826;
    --color-brown: #5c310b;
}

.lateral--panel {
    position: fixed;
    top: 50%;
    right: -250px;
    width: 250px;
    min-height: 100px;
    z-index: 10;
    padding: 15px 20px 10px;
    background: var(--color-yellow);
    transform: translateY(-50%);
    border-bottom-left-radius: 10px;
    border: 2px solid var(--color-red-dark);
    transition: right .2s ease, box-shadow .2s ease;
}
.lateral--panel.show {
    right: -2px;
    box-shadow: -5px 5px 20px -3px rgba(0, 0, 0, 0.38);
}
.lateral--panel .toggle-panel {
    position: absolute;
    cursor: pointer;
    top: -2px; left: -32px;
    background: var(--color-yellow);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 2px solid var(--color-red-dark);
    border-right: none;
}
.lateral--panel .toggle-panel i {
    background: transparent url(../images/ceta-previ-galendario.png) no-repeat center center;
    background-size: 80%;
    display: block;
    width: 30px;
    height: 30px;
}
.lateral--panel .toggle-panel.open i {
    background-image: url(../images/close-30-30.png);
}

/* Conteudo */
.lateral--panel-title {
    font-family: var(--font-distak);
    text-transform: uppercase;
    color: var(--color-brown);
    font-weight: bold;
    margin-bottom: 10px;
}

.lateral--panel-option {
    margin: 10px 0;
}
/* .lateral--panel-option p { */
/* } */
.lateral--panel-option p {
    display: block;
    margin:0;
    color: #333;
    font-weight: 400;
    font-size: 1.1em;
}
.lateral--panel-option .value {
    font-family: var(--font-distak);
    color: var(--color-brown);
    font-weight: bold;
}
.lateral--panel-option .value small {
    font-size: .75em;
    font-weight: 300;
    color: #5e5e5e;
    font-family: var(--font);
}

/* valor total */
.lateral--panel-total {
    border-top: 1px dashed var(--color-red);
    padding-top: 10px;
}
.lateral--panel-total p,
.lateral--panel-total > span {
    display: inline-block;
    font-family: var(--font-distak);
    margin:0;
}
.lateral--panel-total p {
    color: var(--color-brown);
    font-weight: 400;
    text-transform: uppercase;
    font-size: .875em;
}
.lateral--panel-total > span {
    background: #fff;
    padding: 4px 10px 2.5px;
    color: var(--color-brown);
    margin-left: 15px;
    float: right;
}