/*
color: #b31b34;     red
color: #144382;     blue
color: #ffa826;     orange
color: #1bb39a;     cyan
color: #a8adb4;     grey
color: #7f8691;     grey-dark
color: #dddddf;     grey-light
color: #eeeef0;     grey-ligher
*/

div.ap-themeswitcher {

    color: #333;
    font-family: "Open Sans",sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;

    background-color: #fff;
    width: 300px;
    max-width: 95%;
    position: fixed;
    top: 65px;
    z-index: 250000;
    left: 0px;
    box-shadow: 0 6px 12px rgba(0,0,0,.3);
    border: 1px solid #a8adb4;
    border-left: none;
}

@media print {
    div.ap-themeswitcher {
        display: none !important;
    }
}

div.ap-themeswitcher.ts-animation:not(.closed) {
    animation-duration: .5s;
    animation-fill-mode: both;
    transform-origin: left;
    animation-name: fadeRightMenu;
}

div.ap-themeswitcher.closed {
    left: -258px;
}

div.ap-themeswitcher .ts-content {
    position: relative;
}

div.ap-themeswitcher .ts-header {
    background-color: #eeeef0;
    padding: 5px 10px 5px 15px;
}

div.ap-themeswitcher .ts-switch {
    position: absolute;
    right: 5px;
    top: 5px;
    color: #7f8691;
    font-size: 24px;
    width: 30px;
    line-height: 30px;
    padding-left: 3px;
}

div.ap-themeswitcher.closed .ts-switch .fa-times::before{
    content: "\f0ad";
}

div.ap-themeswitcher .ts-switch:hover {
    color: #b31b34;
}

div.ap-themeswitcher h2 {
    margin: 0;
    color: #b31b34;
    font-family: "Open Sans",sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: normal;
}

div.ap-themeswitcher .ts-body {
    padding: 10px 10px 10px 15px;
}

div.ap-themeswitcher.closed .ts-body {
    display: none;
}