/* . */
/* APPEARANCE
------------------------------------------------------------------- */
.drawer.dark {
    font-family: 'Roboto', 'Noto', sans-serif;
}

.drawer.dark > .caption-drawer,
.drawer.dark > .dropdown-drawer > ul > li > a {
    color: #fff;
    background-color: rgba(182, 0, 0, 0.62);
    cursor: pointer;
}

.drawer.dark > .caption-drawer,
.drawer.dark > .dropdown-drawer > ul > li > a {
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
    -o-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}

.drawer.dark > .caption-drawer:hover,
.drawer.dark > .dropdown-drawer > ul > li > a:hover {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.drawer.dark > .caption-drawer > * {
    font-size: 14px;
    font-weight: 500;
}

.drawer.dark [data-tooltip]:after {
    font-size: 14px;
    text-overflow: ellipsis;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.82);
}