/***  tmp\compass\reset  ***/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

html {
    line-height: 1
}

ol,
ul {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle
}

q,
blockquote {
    quotes: none
}

q:before,
q:after,
blockquote:before,
blockquote:after {
    content: "";
    content: none
}

a img {
    border: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
    display: block
}

.acti-animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {

        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInDown {
    0% {
        opacity: 0;
        -ms-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -ms-transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;

        -moz-transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(20px);
    }

    100% {

        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;

        transform: translateX(20px);
    }

    100% {


        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    0% {

        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    0% {

        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    -moz-animation-name: fadeOut;
    -o-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    0% {


        opacity: 1;
        -webkit-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
}

@-moz-keyframes fadeOutDown {
    0% {


        opacity: 1;
        -moz-transform: translateY(0);
    }

    100% {
        opacity: 0;

        -moz-transform: translateY(20px);
    }
}

@-o-keyframes fadeOutDown {
    0% {


        opacity: 1;
        -o-transform: translateY(0);
    }

    100% {
        opacity: 0;

        -o-transform: translateY(20px);
    }
}

@keyframes fadeOutDown {
    0% {


        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;

        transform: translateY(20px);
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    -moz-animation-name: fadeOutDown;
    -o-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
}

@-moz-keyframes fadeOutUp {
    0% {


        opacity: 1;
        -moz-transform: translateY(0);
    }

    100% {
        opacity: 0;

        -moz-transform: translateY(-20px);
    }
}

@-o-keyframes fadeOutUp {
    0% {


        opacity: 1;
        -o-transform: translateY(0);
    }

    100% {
        opacity: 0;

        -o-transform: translateY(-20px);
    }
}

@keyframes fadeOutUp {
    0% {


        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;

        transform: translateY(-20px);
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    -moz-animation-name: fadeOutUp;
    -o-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutLeft {
    0% {


        opacity: 1;
        -webkit-transform: translateX(0);
    }

    100% {
        opacity: 0;

        -webkit-transform: translateX(-20px);
    }
}

@-moz-keyframes fadeOutLeft {
    0% {


        opacity: 1;
        -moz-transform: translateX(0);
    }

    100% {
        opacity: 0;

        -moz-transform: translateX(-20px);
    }
}

@-o-keyframes fadeOutLeft {
    0% {


        opacity: 1;
        -o-transform: translateX(0);
    }

    100% {
        opacity: 0;

        -o-transform: translateX(-20px);
    }
}

@keyframes fadeOutLeft {
    0% {


        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;

        transform: translateX(-20px);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    -moz-animation-name: fadeOutLeft;
    -o-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutRight {
    0% {


        opacity: 1;
        -webkit-transform: translateX(0);
    }

    100% {
        opacity: 0;

        -webkit-transform: translateX(20px);
    }
}

@-moz-keyframes fadeOutRight {
    0% {


        opacity: 1;
        -moz-transform: translateX(0);
    }

    100% {
        opacity: 0;

        -moz-transform: translateX(20px);
    }
}

@-o-keyframes fadeOutRight {
    0% {


        opacity: 1;
        -o-transform: translateX(0);
    }

    100% {
        opacity: 0;

        -o-transform: translateX(20px);
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    -moz-animation-name: fadeOutRight;
    -o-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

.reflect {
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}


/***  app\assets\stylesheets\css\mediaelementplayer  ***/

.mejs-offscreen {
    /* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). */
    position: absolute !important;
    top: -10000px;
    left: -10000px;
    overflow: hidden;
    width: 1px;
    height: 1px;
}

.mejs-container {
    position: relative;
    background: #000;
    font-family: "Inter", sans-serif;
    text-align: left;
    vertical-align: top;
    text-indent: 0;
}

.mejs-container:focus {
    outline: none;
}

.me-plugin {
    position: absolute;
}

.mejs-embed,
.mejs-embed body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}

.mejs-fullscreen {
    /* set it to not show scroll bars so 100% will work */
    overflow: hidden !important;
}

.mejs-container-fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1000;
}

.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
    width: 100%;
    height: 100%;
}

.mejs-clear {
    clear: both;
}

/* Start: LAYERS */
.mejs-background {
    position: absolute;
    top: 0;
    left: 0;
}

.mejs-mediaelement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.mejs-poster {
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

:root .mejs-poster img {
    display: none;
}

.mejs-poster img {
    border: 0;
    padding: 0;
    border: 0;
}

.mejs-overlay {
    position: absolute;
    top: 0;
    left: 0;
}

.mejs-overlay-play {
    cursor: pointer;
}

.mejs-overlay-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    background: url(../img/bigplay.png) no-repeat;
}

.no-svg .mejs-overlay-button {
    background-image: url(../img/bigplay.png);
}

.mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 -100px;
}

.mejs-overlay-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    background: #333;
    background: url(../img/background.png);
    background: rgba(0, 0, 0, 0.9);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.9)), to(rgba(0, 0, 0, 0.9)));
    background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: -o-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: linear-gradient(rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
}

.mejs-overlay-loading span {
    display: block;
    width: 80px;
    height: 80px;
    background: transparent url(../img/loading.gif) 50% 50% no-repeat;
}

/* End: LAYERS */

/* Start: CONTROL BAR */
.mejs-container .mejs-controls {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    bottom: 0;
    left: 0;
    background: url(../img/background.png);
    background: rgba(0, 0, 0, 0.7);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    height: 30px;
    width: 100%;
}

.mejs-container .mejs-controls div {
    list-style-type: none;
    background-image: none;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 26px;
    height: 26px;
    font-size: 11px;
    line-height: 11px;
    font-family: "Inter", sans-serif;
    border: 0;
}

.mejs-controls .mejs-button button {
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    margin: 7px 5px;
    padding: 0;
    position: absolute;
    height: 16px;
    width: 16px;
    border: 0;
    background: transparent url(../img/controls.png) no-repeat;
}

.no-svg .mejs-controls .mejs-button button {
    background-image: url(../img/controls.png);
}

/* :focus for accessibility */
.mejs-controls .mejs-button button:focus {
    outline: dotted 1px #999;
}

/* End: CONTROL BAR */

/* Start: Time (Current / Duration) */
.mejs-container .mejs-controls .mejs-time {
    color: #fff;
    display: block;
    height: 17px;
    width: auto;
    padding: 10px 3px 0 3px;
    overflow: hidden;
    text-align: center;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.mejs-container .mejs-controls .mejs-time a {
    color: #fff;
    font-size: 11px;
    line-height: 12px;
    display: block;
    float: left;
    margin: 1px 2px 0 0;
    width: auto;
}

/* End: Time (Current / Duration) */

/* Start: Play/Pause/Stop */
.mejs-controls .mejs-play button {
    background-position: 0 0;
}

.mejs-controls .mejs-pause button {
    background-position: 0 -16px;
}

.mejs-controls .mejs-stop button {
    background-position: -112px 0;
}

/* Start: Play/Pause/Stop */

/* Start: Progress Bar */
.mejs-controls div.mejs-time-rail {
    direction: ltr;
    width: 200px;
    padding-top: 5px;
}

.mejs-controls .mejs-time-rail span,
.mejs-controls .mejs-time-rail a {
    display: block;
    position: absolute;
    width: 180px;
    height: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
    margin: 5px;
    background: #333;
    background: rgba(50, 50, 50, 0.8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
    background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
}

.mejs-controls .mejs-time-rail .mejs-time-buffering {
    width: 100%;
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    -webkit-background-size: 15px 15px;
    -moz-background-size: 15px 15px;
    -o-background-size: 15px 15px;
    background-size: 15px 15px;
    -webkit-animation: buffering-stripes 2s linear infinite;
    -moz-animation: buffering-stripes 2s linear infinite;
    -ms-animation: buffering-stripes 2s linear infinite;
    -o-animation: buffering-stripes 2s linear infinite;
    animation: buffering-stripes 2s linear infinite;
}

@-webkit-keyframes buffering-stripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 30px 0;
    }
}

@-moz-keyframes buffering-stripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 30px 0;
    }
}

@-ms-keyframes buffering-stripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 30px 0;
    }
}

@-o-keyframes buffering-stripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 30px 0;
    }
}

@keyframes buffering-stripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 30px 0;
    }
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #3caac8;
    background: rgba(60, 170, 200, 0.8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44, 124, 145, 0.8)), to(rgba(78, 183, 212, 0.8)));
    background: -webkit-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    background: -moz-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    background: -o-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    background: -ms-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    background: linear-gradient(rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    width: 0;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    width: 0;
}

.mejs-controls .mejs-time-rail .mejs-time-handle {
    display: none;
    position: absolute;
    margin: 0;
    width: 10px;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    border: solid 2px #333;
    top: -2px;
    text-align: center;
}

.mejs-controls .mejs-time-rail .mejs-time-float {
    position: absolute;
    display: none;
    background: #eee;
    width: 36px;
    height: 17px;
    border: solid 1px #333;
    top: -26px;
    margin-left: -18px;
    text-align: center;
    color: #111;
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
    margin: 2px;
    width: 30px;
    display: block;
    text-align: center;
    left: 0;
}

.mejs-controls .mejs-time-rail .mejs-time-float-corner {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    border: solid 5px #eee;
    border-color: #eee transparent transparent transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    top: 15px;
    left: 13px;
}

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float {
    width: 48px;
}

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current {
    width: 44px;
}

.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner {
    left: 18px;
}

/*
.mejs-controls .mejs-time-rail:hover .mejs-time-handle {
	visibility:visible;
}
*/
/* End: Progress Bar */

/* Start: Fullscreen */
.mejs-controls .mejs-fullscreen-button button {
    background-position: -32px 0;
}

.mejs-controls .mejs-unfullscreen button {
    background-position: -32px -16px;
}

/* End: Fullscreen */


/* Start: Mute/Volume */
.mejs-controls .mejs-volume-button {}

.mejs-controls .mejs-mute button {
    background-position: -16px -16px;
}

.mejs-controls .mejs-unmute button {
    background-position: -16px 0;
}

.mejs-controls .mejs-volume-button {
    position: relative;
}

.mejs-controls .mejs-volume-button .mejs-volume-slider {
    display: none;
    height: 115px;
    width: 25px;
    background: url(../img/background.png);
    background: rgba(50, 50, 50, 0.7);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    top: -115px;
    left: 0;
    z-index: 1;
    position: absolute;
    margin: 0;
}

.mejs-controls .mejs-volume-button:hover {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

/*
.mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
	display: block;
}
*/

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
    position: absolute;
    left: 11px;
    top: 8px;
    width: 2px;
    height: 100px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
    position: absolute;
    left: 11px;
    top: 8px;
    width: 2px;
    height: 100px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
    position: absolute;
    left: 4px;
    top: -3px;
    width: 16px;
    height: 6px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.9);
    cursor: N-resize;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    margin: 0;
}

/* horizontal version */
.mejs-controls a.mejs-horizontal-volume-slider {
    height: 26px;
    width: 56px;
    position: relative;
    display: block;
    float: left;
    vertical-align: middle;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    position: absolute;
    left: 0;
    top: 11px;
    width: 50px;
    height: 8px;
    margin: 0;
    padding: 0;
    font-size: 1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #333;
    background: rgba(50, 50, 50, 0.8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
    background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    position: absolute;
    left: 0;
    top: 11px;
    width: 50px;
    height: 8px;
    margin: 0;
    padding: 0;
    font-size: 1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
    display: none;
}

/* End: Mute/Volume */

/* Start: Track (Captions and Chapters) */
.mejs-controls .mejs-captions-button {
    position: relative;
}

.mejs-controls .mejs-captions-button button {
    background-position: -48px 0;
}

.mejs-controls .mejs-captions-button .mejs-captions-selector {
    visibility: hidden;
    position: absolute;
    bottom: 26px;
    right: -51px;
    width: 85px;
    height: 100px;
    background: url(../img/background.png);
    background: rgba(50, 50, 50, 0.7);
    border: solid 1px transparent;
    padding: 10px 10px 0 10px;
    overflow: hidden;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

/*
.mejs-controls .mejs-captions-button:hover  .mejs-captions-selector {
	visibility: visible;
}
*/

.mejs-controls .mejs-captions-button .mejs-captions-selector ul {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none !important;
    overflow: hidden;
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
    margin: 0 0 6px 0;
    padding: 0;
    list-style-type: none !important;
    display: block;
    color: #fff;
    overflow: hidden;
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
    clear: both;
    float: left;
    margin: 3px 3px 0 5px;
}

.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
    width: 55px;
    float: left;
    padding: 4px 0 0 0;
    line-height: 15px;
    font-family: "Inter", sans-serif;
    font-size: 10px;
}

.mejs-controls .mejs-captions-button .mejs-captions-translations {
    font-size: 10px;
    margin: 0 0 5px 0;
}

.mejs-chapters {
    position: absolute;
    top: 0;
    left: 0;
    -xborder-right: solid 1px #fff;
    width: 10000px;
    z-index: 1;
}

.mejs-chapters .mejs-chapter {
    position: absolute;
    float: left;
    background: #222;
    background: rgba(0, 0, 0, 0.7);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000);
    overflow: hidden;
    border: 0;
}

.mejs-chapters .mejs-chapter .mejs-chapter-block {
    font-size: 11px;
    color: #fff;
    padding: 5px;
    display: block;
    border-right: solid 1px #333;
    border-bottom: solid 1px #333;
    cursor: pointer;
}

.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
    border-right: none;
}

.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
    background: #666;
    background: rgba(102, 102, 102, 0.7);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102, 102, 102, 0.7)), to(rgba(50, 50, 50, 0.6)));
    background: -webkit-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    background: -moz-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    background: -o-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    background: -ms-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    background: linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232);
}

.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
    font-size: 12px;
    font-weight: bold;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 0 3px 0;
    line-height: 12px;
}

.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
    font-size: 12px;
    line-height: 12px;
    margin: 3px 0 4px 0;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mejs-captions-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 20px;
    font-size: 16px;
    color: #fff;
}

.mejs-captions-layer a {
    color: #fff;
    text-decoration: underline;
}

.mejs-captions-layer[lang=ar] {
    font-size: 20px;
    font-weight: normal;
}

.mejs-captions-position {
    position: absolute;
    width: 100%;
    bottom: 15px;
    left: 0;
}

.mejs-captions-position-hover {
    bottom: 35px;
}

.mejs-captions-text {
    padding: 3px 5px;
    background: url(../img/background.png);
    background: rgba(20, 20, 20, 0.5);
    white-space: pre-wrap;
}

/* End: Track (Captions and Chapters) */

/* Start: Error */
.me-cannotplay {}

.me-cannotplay a {
    color: #fff;
    font-weight: bold;
}

.me-cannotplay span {
    padding: 15px;
    display: block;
}

/* End: Error */


/* Start: Loop */
.mejs-controls .mejs-loop-off button {
    background-position: -64px -16px;
}

.mejs-controls .mejs-loop-on button {
    background-position: -64px 0;
}

/* End: Loop */

/* Start: backlight */
.mejs-controls .mejs-backlight-off button {
    background-position: -80px -16px;
}

.mejs-controls .mejs-backlight-on button {
    background-position: -80px 0;
}

/* End: backlight */

/* Start: Picture Controls */
.mejs-controls .mejs-picturecontrols-button {
    background-position: -96px 0;
}

/* End: Picture Controls */


/* context menu */
.mejs-contextmenu {
    position: absolute;
    width: 150px;
    padding: 10px;
    border-radius: 4px;
    top: 0;
    left: 0;
    background: #fff;
    border: solid 1px #999;
    z-index: 1001;
    /* make sure it shows on fullscreen */
}

.mejs-contextmenu .mejs-contextmenu-separator {
    height: 1px;
    font-size: 0;
    margin: 5px 6px;
    background: #333;
}

.mejs-contextmenu .mejs-contextmenu-item {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    padding: 4px 6px;
    cursor: pointer;
    color: #333;
}

.mejs-contextmenu .mejs-contextmenu-item:hover {
    background: #2C7C91;
    color: #fff;
}

/* Start: Source Chooser */
.mejs-controls .mejs-sourcechooser-button {
    position: relative;
}

.mejs-controls .mejs-sourcechooser-button button {
    background-position: -128px 0;
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
    visibility: hidden;
    position: absolute;
    bottom: 26px;
    right: -10px;
    width: 130px;
    height: 100px;
    background: url(../img/background.png);
    background: rgba(50, 50, 50, 0.7);
    border: solid 1px transparent;
    padding: 10px;
    overflow: hidden;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none !important;
    overflow: hidden;
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li {
    margin: 0 0 6px 0;
    padding: 0;
    list-style-type: none !important;
    display: block;
    color: #fff;
    overflow: hidden;
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input {
    clear: both;
    float: left;
    margin: 3px 3px 0 5px;
}

.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label {
    width: 100px;
    float: left;
    padding: 4px 0 0 0;
    line-height: 15px;
    font-family: "Inter", sans-serif;
    font-size: 10px;
}

/* End: Source Chooser */

/* Start: Postroll */
.mejs-postroll-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/background.png);
    background: rgba(50, 50, 50, 0.7);
    z-index: 1000;
    overflow: hidden;
}

.mejs-postroll-layer-content {
    width: 100%;
    height: 100%;
}

.mejs-postroll-close {
    position: absolute;
    right: 0;
    top: 0;
    background: url(../img/background.png);
    background: rgba(50, 50, 50, 0.7);
    color: #fff;
    padding: 4px;
    z-index: 100;
    cursor: pointer;
}

/* End: Postroll */


/* Start: Speed */
div.mejs-speed-button {
    width: 46px !important;
    position: relative;
}

.mejs-controls .mejs-button.mejs-speed-button button {
    background: transparent;
    width: 36px;
    font-size: 11px;
    line-height: normal;
    color: #ffffff;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector {
    display: none;
    position: absolute;
    top: -100px;
    left: -10px;
    width: 60px;
    height: 100px;
    background: url(../img/background.png);
    background: rgba(50, 50, 50, 0.7);
    border: solid 1px transparent;
    padding: 0;
    overflow: hidden;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}


.mejs-controls .mejs-speed-button:hover>.mejs-speed-selector {
    display: block;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected {
    color: rgba(33, 248, 248, 1);
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none !important;
    overflow: hidden;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li {
    margin: 0 0 6px 0;
    padding: 0 10px;
    list-style-type: none !important;
    display: block;
    color: #fff;
    overflow: hidden;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input {
    clear: both;
    float: left;
    margin: 3px 3px 0 5px;
    display: none;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label {
    width: 60px;
    float: left;
    padding: 4px 0 0 0;
    line-height: 15px;
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    color: white;
    margin-left: 5px;
    cursor: pointer;
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover {
    background-color: rgb(200, 200, 200) !important;
    background-color: rgba(255, 255, 255, .4) !important;
}

/* End: Speed */

/* Start: Jump Forward */

.mejs-controls .mejs-button.mejs-jump-forward-button {
    background: transparent url(../img/jumpforward.png) no-repeat;
    background-position: 3px 3px;
}

.mejs-controls .mejs-button.mejs-jump-forward-button button {
    background: transparent;
    font-size: 9px;
    line-height: normal;
    color: #ffffff;
}

/* End: Jump Forward */

/* Start: Skip Back */

.mejs-controls .mejs-button.mejs-skip-back-button {
    background: transparent url(../img/skipback.png) no-repeat;
    background-position: 3px 3px;
}

.mejs-controls .mejs-button.mejs-skip-back-button button {
    background: transparent;
    font-size: 9px;
    line-height: normal;
    color: #ffffff;
}

/* End: Skip Back */


/***  tmp\compass\desktop  ***/

@charset "UTF-8";

html,
button,
input,
select,
textarea {
    color: #222
}

body {
    font-size: 1em;
    line-height: 1.4
}

::-moz-selection,
::selection {
    background: transparent;
    text-shadow: none
}

:-webkit-full-screen body,
:-moz-full-screen body {
    width: 100%;
    height: 100%
}

hr {
    display: block;
    margin: 1em 0;
    padding: 0;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc
}

img {
    vertical-align: middle
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0
}

textarea {
    resize: vertical
}

.ir {
    overflow: hidden;
    border: 0;
    background-color: transparent;
    *text-indent: -9999px
}

.ir:before {
    display: block;
    width: 0;
    height: 100%;
    content: ""
}

.hidden {
    display: none !important;
    visibility: hidden
}

.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    position: static;
    overflow: visible;
    clip: auto;
    margin: 0;
    width: auto;
    height: auto
}

.invisible {
    visibility: hidden
}

.clearfix {
    *zoom: 1
}

.clearfix:before {
    display: table;
    content: " "
}

.clearfix:after {
    display: table;
    content: " ";
    clear: both
}

.w10 {
    width: 10%
}

.w20 {
    width: 20%
}

.w30 {
    width: 30%
}

.w40 {
    width: 40%
}

.w50 {
    width: 50%
}

.w60 {
    width: 60%
}

.w70 {
    width: 70%
}

.w80 {
    width: 80%
}

.w90 {
    width: 90%
}

.w100 {
    width: 100%
}

.ml10 {
    margin-left: 10px
}

.ml20 {
    margin-left: 20px
}

.ml30 {
    margin-left: 30px
}

.ml40 {
    margin-left: 40px
}

.ml50 {
    margin-left: 50px
}

.ml60 {
    margin-left: 60px
}

.ml70 {
    margin-left: 70px
}

.ml80 {
    margin-left: 80px
}

.ml90 {
    margin-left: 90px
}

.mr10 {
    margin-right: 10px
}

.mr20 {
    margin-right: 20px
}

.mr30 {
    margin-right: 30px
}

.mr40 {
    margin-right: 40px
}

.mr50 {
    margin-right: 50px
}

.mr60 {
    margin-right: 60px
}

.mr70 {
    margin-right: 70px
}

.mr80 {
    margin-right: 80px
}

.mr90 {
    margin-right: 90px
}

input,
select,
textarea,
input {
    font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", Osaka, "MS P Gothic", sans-serif;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    color: #555;
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    padding: 4px;
    min-height: 18px;
    -webkit-transition: border linear, box-shadow linear;
    -webkit-transition-delay: 0.2s, 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

input:focus,
textarea:focus {
    border-color: rgba(82, 168, 236, 0.8);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    color: #333;
    outline: 0 none
}

.acti-btn {
    font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", Osaka, "MS P Gothic", sans-serif;
    font-size: 13px;
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    padding: 4px 14px;
    line-height: 23px;
    background-repeat: no-repeat;
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    background-image: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    background-image: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    background-color: #e6e6e6;
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all
}

.acti-btn:hover {
    background-position: 0px -30px;
    color: #333;
    text-decoration: none
}

.acti-sprite,
.acti-icon.acti-few,
.acti-icon.acti-few_last,
.acti-icon.acti-rew,
.acti-icon.acti-rew-last,
.acti-icon.acti-zoom_in,
.acti-icon.acti-zoom_out,
.acti-icon.acti-painter,
.acti-icon.acti-painter_active,
.acti-icon.acti-bookmarker,
.acti-icon.acti-bookmark_active,
.acti-icon.acti-print,
.acti-icon.acti-print_active,
.acti-icon.acti-tag,
.acti-icon.acti-tag_active,
.acti-icon.acti-fullscreen,
.acti-icon.acti-fullscreen_active,
.acti-icon.acti-open,
.acti-icon.acti-close,
.acti-icon.acti-help,
.acti-icon.acti-list,
.acti-icon.acti-screenshot,
.acti-icon.acti-screenshot_active {
    background-image: url('../img/sprites/acti-sed1db68ab5-32.png');
    background-repeat: no-repeat;
}

.mobile-sprite,
.mobile-bookmark,
.mobile-closer-active,
.mobile-closer-deactive,
.mobile-oqbookmark-active,
.mobile-painter,
.mobile-search-active,
.mobile-search-deactive,
.mobile-section-titles-active,
.mobile-section-titles-deactive,
.mobile-thumbnail-active,
.mobile-thumbnail-deactive,
.mobile-tnote {
    background-image: url('../img/sprites/mobile-s887cba6689.png');
    background-repeat: no-repeat
}

.painter-sprite {
    background-image: url('../img/sprites/painter-sec2b969e53.png');
    background-repeat: no-repeat
}

.triangle-sprite,
.acti-arrow,
.acti-arrow:hover,
.acti-arrow.active,
.acti-arrow.active:hover {
    background-image: url('../img/sprites/triangle-sed9b882df8.png');
    background-repeat: no-repeat
}

.plusminus-sprite {
    background-image: url('../img/sprites/plusminus-s4012a03e56.png');
    background-repeat: no-repeat
}

.acti-sprite,
.acti-icon.acti-few,
.acti-icon.acti-few_last,
.acti-icon.acti-rew,
.acti-icon.acti-rew-last,
.acti-icon.acti-zoom_in,
.acti-icon.acti-zoom_out,
.acti-icon.acti-painter,
.acti-icon.acti-painter_active,
.acti-icon.acti-bookmarker,
.acti-icon.acti-bookmark_active,
.acti-icon.acti-print,
.acti-icon.acti-print_active,
.acti-icon.acti-tag,
.acti-icon.acti-tag_active,
.acti-icon.acti-fullscreen,
.acti-icon.acti-fullscreen_active,
.acti-icon.acti-open,
.acti-icon.acti-close,
.acti-icon.acti-help,
.acti-icon.acti-list,
.acti-icon.acti-screenshot,
.acti-icon.acti-screenshot_active {
    background-size: 32px 736px
}

.acti-icon {
    display: block;
    width: 32px;
    height: 32px;
    text-indent: -999em
}

.acti-icon.acti-search {
    background-image: url('../img/search.png');
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.acti-icon.acti-border-top {
    background-image: url('../img/border-top.png');
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.acti-icon.acti-few {
    background-position: 0 -96px
}

.acti-icon.acti-few_last {
    background-position: 0 -128px;
}

.acti-icon.acti-rew {
    background-position: 0 -480px;
}

.acti-icon.acti-rew-last {
    background-position: 0 -512px;
}

.acti-icon.acti-zoom_in {
    background-position: 0 -672px;
}

.acti-icon.acti-zoom_out {
    background-position: 0 -704px;
}

.acti-icon.acti-painter {
    background-position: 0 -352px;
}

.acti-icon.acti-painter:active,
.acti-icon.acti-painter.painter-active {
    background-position: 0 -384px;
}

.acti-icon.acti-painter_active {
    background-position: 0 -384px;
}

.acti-icon.acti-bookmarker {
    background-position: 0 0
}

.acti-icon.acti-bookmarker:active,
.acti-icon.acti-bookmarker.bookmark-active {
    background-position: 0 -32px;
}

.acti-icon.acti-bookmark_active {
    background-position: 0 -32px;
}

.acti-icon.acti-print {
    background-position: 0 -468px
}

.acti-icon.acti-print:active,
.acti-icon.acti-print.print-active {
    background-position: 0 -504px
}

.acti-icon.acti-print_active {
    background-position: 0 -504px
}

.acti-icon.acti-tag {
    background-position: 0 -608px
    /* background-position: center;
    background-image: url('../img/sprites/Icon-12.png');
    background-size: contain; */

}

.acti-icon.acti-tag:active,
.acti-icon.acti-tag.tag-active {
    background-position: 0 -640px
    /* background-position: center;
    background-image: url('../img/sprites/Icon-13.png');
    background-size: contain; */
}

.acti-icon.acti-tag_active {
    background-position: 0 -640px
    /* background-position: center;
    background-image: url('../img/sprites/Icon-13.png');
    background-size: contain; */
}

.acti-icon.acti-fullscreen {
    background-position: 0 -160px
    /* background-position: center;
    background-image: url('../img/sprites/Icon-3.png');
    background-size: contain; */
}

.acti-icon.acti-fullscreen:active,
.acti-icon.acti-fullscreen.fullscreen-active {
    background-position: 0 -191px
    /* background-position: center;
    background-image: url('../img/sprites/Icon-4.png');
    background-size: contain; */
}

.acti-icon.acti-fullscreen_active {
    background-position: 0 -191px
    /* background-position: center;
    background-image: url('../img/sprites/Icon-4.png');
    background-size: contain; */
}

.acti-icon.acti-open {
    background-position: 0 -322px
}

.acti-icon.acti-close {
    background-position: 0 -64px
}

.acti-icon.acti-help {
    background-position: 0 -252px;
    background-position: 0 -324px
}

.acti-icon.acti-list {
    background-position: 0 -288px
}

.acti-icon.acti-screenshot {
    background-position: 0 -612px
}

.acti-icon.acti-screenshot:active,
.acti-icon.acti-screenshot.screenshot-active {
    background-position: 0 -648px
}

.acti-icon.acti-screenshot_active {
    background-position: 0 -648px
}

.mobile-bookmark {
    background-position: 0 0
}

.mobile-closer-active {
    background-position: 0 -24px
}

.mobile-closer-deactive {
    background-position: 0 -48px
}

.mobile-oqbookmark-active {
    background-position: 0 -72px
}

.mobile-painter {
    background-position: 0 -120px
}

.mobile-search-active {
    background-position: 0 -144px
}

.mobile-search-deactive {
    background-position: 0 -168px
}

.mobile-section-titles-active {
    background-position: 0 -192px
}

.mobile-section-titles-deactive {
    background-position: 0 -216px
}

.mobile-thumbnail-active {
    background-position: 0 -240px
}

.mobile-thumbnail-deactive {
    background-position: 0 -264px
}

.mobile-tnote {
    background-position: 0 -312px
}

.acti-header-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

h1.acti-title {
    margin: 0px;
    padding: 5px;
    color: #fff;
    text-align: center;
    text-shadow: none;
    font-size: 1em
}

.acti-global-nav01 {
    position: relative;
    width: 75%;
    line-height: 1em;
    margin: 0 auto
}

.acti-global-nav01 ul {
    margin: 0 auto;
    padding: 0;
    width: auto;
    list-style: none;
    text-align: center
}

.acti-global-nav01 ul li {
    display: inline-block;
    text-indent: -999em;
    padding: 5px 0em;
    text-align: center
}

.acti-global-nav01 ul li a {
    margin: 0 auto;
    color: #333;
    text-decoration: none;
    font-size: 14px
}

.acti-global-nav01 ul li:hover {
    text-decoration: underline
}

.acti-menu-main {
    width: 100%;
    margin: 0 auto
}

.acti-menu-main li {
    margin-right: 8px
}

.acti-global-nav01 a {
    display: block
}

.acti-global-nav01 a:active {
    opacity: 0.5
}

.acti-footer-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

.menu_others {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 200px
}

.menu_others ul {
    float: right;
    margin: 0em 1em
}

.acti-toolbar-opener {
    background-color: gray;
    width: 32px;
    height: 30px;
    position: absolute;
    bottom: 0px;
    right: 25px;
    border-radius: 5px 5px 0px 0px;
    padding: 5px 5px 5px 5px
}

.acti-toolbar-opener:active {
    opacity: 0.5
}

.acti-toolbar-closer {
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 3px;
    padding: 5px 5px 5px 5px
}

@media (min-width: 500px) {
    .acti-toolbar-closer {
        right: 25px
    }
}

@media (max-width: 501px) {
    .acti-toolbar-closer {
        right: 10px
    }
}

@media (max-width: 400px) {
    .acti-toolbar-closer {
        right: 0px
    }
}

.acti-tooltip-goto-fun {
    text-indent: 0 !important;
    height: 36px;
    text-decoration: none !important
}

.acti-tooltip-goto-fun input {
    height: 26px;
    width: 50px;
    position: relative;
    top: 10px;
    padding: 2px 4px 0;
    font-size: 15px
}

.acti-tooltip-goto-fun div {
    display: inherit;
    position: relative;
    top: 9px;
    background: #ddd;
    padding: 2px 11px;
    border-radius: 5px;
    height: 23px;
    cursor: pointer;
    line-height: 25px;
    letter-spacing: 1px;
    margin: 0;
    color: #666;
    vertical-align: middle;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    font-weight: normal;
    font-size: 15px;
    border-left: solid 1px #ccc;
    background: url(../img/gradient_mat.png) repeat-x top;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.acti-tooltip-goto-fun div:active {
    opacity: 0.5
}

.acti-tooltip-goto-fun span {
    position: relative;
    top: 11px;
    margin: 0 13px 0 5px;
    color: #ddd
}

.acti-print-popupBox {
    width: 320px;
    position: absolute;
    left: 50%;
    top: 66%;
    z-index: 999999;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    background: #444;
    border-radius: 5px;
    color: #fff
}

.acti-print-popupBox>div {
    height: 80px;
    display: inline-block;
    width: 100%;
    position: relative
}

.acti-print-popupBox>div>div {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    width: 100%
}

.print_btn01 {
    background-image: url(../img/print_btn01.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.print_btn02 {
    background-image: url(../img/print_btn02.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.print_btn03 {
    background-image: url(../img/print_btn03.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.print_btn04 {
    background-image: url(../img/print_btn04.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.print_btn05 {
    background-image: url(../img/print_btn05.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.capture_button {
    top: 50px;
    position: absolute;
    z-index: 10500;
    left: 50%;
    transform: translate(-50%, 0)
}

.capture_save,
.capture_remove {
    padding: 2px 12px;
    display: inline-block;
    position: relative;
    margin: 0px;
    border-radius: 0px;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
    background-color: #428bca;
    border: 5px solid #428bca;
    box-shadow: none;
    font-family: "メイリオ", "Hiragino Kaku Gothic Pro", Meiryo, "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ3", "MS PGothic", sans-serif;
    height: 34px
}

.capture_remove {
    margin-left: 10px;
    background-color: #abbac3 !important;
    border: 5px solid #abbac3;
    float: right
}

.img_comment_title {
    background-image: url(../img/tnote.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px
}

.img_comment_remove {
    background-image: url(../img/trans.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px !important
}

.acti-sideblock {
    position: fixed;
    top: 50px;
    /* bottom: 86px; */
    bottom: 0;
    left: 0;
    width: 271px;
    margin-left: -271px;
    z-index: 10000
}

.acti-sideblock * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.acti-sidewrap>div {
    height: 100%
}

.acti-sidewrap {
    width: 100%;
    height: 100%;
    position: relative
}

.acti-sidewrap.open {
    margin-left: 0px
}

.acti-sidewrap .acti-opener {
    width: 32px;
    height: 100px;
    position: absolute;
    right: -33px;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0px 5px 5px 0px
}

.acti-sidewrap .acti-opener:active {
    opacity: 0.5
}

.acti-sidewrap .acti-opener a {
    width: 100%;
    height: 100px;
    border-radius: 0px 5px 5px 0px;
    display: block;
    padding-top: 12px
}

.acti-sidewrap-inner {
    height: 100%;
    margin: 0 auto;
    padding: 1em 0.5em;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center
}

ul.acti-button-bar {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    margin: 0 0 10px;
    padding: 0;
    border: 0 none;
    background: none repeat scroll 0 center transparent;
    font-size: 0
}

ul.acti-button-bar li {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    margin: 0 -1px 0 0;
    padding: 0;
    width: 50%;
    background: url(../img/gradient_mat.png) repeat-x top;
    font-size: 0;
    line-height: 100%
}

ul.acti-button-bar li:first-of-type,
ul.acti-button-bar li:first-of-type a {
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border-left: 0
}

ul.acti-button-bar li:last-of-type,
ul.acti-button-bar li:last-of-type a {
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box
}

ul.acti-button-bar li.acti-tabs-selected a,
ul.acti-button-bar li.acti-tabs-selected a:hover {
    background-color: #544c4b;
    color: #fff;
    text-shadow: none;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) inset
}

ul.acti-button-bar li a {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    margin: 0;
    padding: 10px 0px;
    width: 100%;
    color: #666;
    vertical-align: middle;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff;
    font-weight: normal;
    font-size: 15px;
    line-height: 100%;
    border-left: solid 1px #ccc
}

ul.acti-button-bar li a:active {
    background-color: #bbb;
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) inset, 0 -10px 20px rgba(0, 0, 0, 0.07) inset;
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) inset, 0 -10px 20px rgba(0, 0, 0, 0.07) inset;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) inset, 0 -10px 20px rgba(0, 0, 0, 0.07) inset;
    color: #fff
}

ul.acti-button-bar li a .icon {
    position: relative;
    top: -1px;
    left: 0;
    margin: -5px 0
}

.acti-thumbnails {
    position: relative;
    font-size: 0
}

.acti-thumbnails .acti-thumbox {
    margin: 24px 0;
    clear: both;
    overflow: hidden;
    *zoom: 1
}

.acti-thumbnails .acti-thumbox:first-of-type {
    margin-top: 0
}

.acti-thumbnails .acti-thumbox:last-of-type {
    margin-bottom: 0
}

.acti-thumbnails .acti-thumbox article.page {
    display: inline-block;
    width: 50%;
    min-height: 30px
}

.acti-thumbnails .acti-thumbox article.page a {
    display: inline-block
}

.acti-thumbnails .acti-thumbox img {
    max-height: 150px
}

.acti-thumbnails .acti-thumbnail-bookmark {
    width: 0px;
    height: 0px;
    float: left;
    clear: both
}

.acti-thumbnails .acti-thumbnail-bookmark img {
    border: none !important;
    position: relative;
    left: 9px;
    top: 0px;
    width: 20px
}

.acti-thumbnails.acti-direction-ltr .acti-thumbox article:first-of-type {
    float: left;
    text-align: right
}

.acti-thumbnails.acti-direction-ltr .acti-thumbox article:last-of-type {
    float: right;
    text-align: left
}

.acti-thumbnails.acti-direction-rtl .acti-thumbox article:first-of-type {
    float: right;
    text-align: left
}

.acti-thumbnails.acti-direction-rtl .acti-thumbox article:last-of-type {
    float: left;
    text-align: right
}

.acti-tabs {
    height: 100%
}

.acti-tabs .acti-tab-content-pane {
    position: relative
}

.acti-tabs .acti-tab-content-pane .acti-tab {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden
}

.acti-tabs .acti-tab-content-pane .acti-tab>* {
    height: 100%
}

.acti-tabs .acti-tab-content-pane .acti-tab.acti-tab-show {
    visibility: visible
}

.acti-arrow {
    background-position: 0 -15px;
    cursor: pointer;
    display: block;
    float: left;
    height: 15px;
    margin-top: 11px;
    width: 15px
}

.acti-arrow:hover {
    background-position: 0 0
}

.acti-arrow.active {
    background-position: 0 -45px
}

.acti-arrow.active:hover {
    background-position: 0 -30px
}

.acti-page-loading {
    background: url(../img/pageLoading.gif) no-repeat 48% 48%;
    width: 100%;
    height: 150px
}

.acti-list-view {
    margin: 0px 0px;
    padding: 0;
    color: #fff;
    list-style: none;
    text-align: left;
    display: block
}

.acti-list-view.collapsed {
    display: none
}

.acti-list-view ul {
    list-style: none outside none;
    padding-left: 20px
}

.acti-list-view li {
    clear: both;
    overflow: hidden;
    *zoom: 1
}

.acti-list-view li>a,
.acti-list-view li>span {
    padding: 10px 0px;
    margin-left: 15px;
    display: block;
    border-top: solid 1px #a5a5a5;
    -webkit-box-shadow: inset 0px 1px 0 #333;
    -moz-box-shadow: inset 0px 1px 0 #333;
    box-shadow: inset 0px 1px 0 #333
}

.acti-list-view li>a {
    color: #fff;
    text-decoration: none;
    word-break: break-all;
    word-wrap: break-word
}

.acti-list-view:not(.acti-nested)>li:first-of-type>a,
.acti-list-view:not(.acti-nested)>li:first-of-type span {
    border-top: hidden;
    -webkit-box-shadow: 0px 0px 5px transparent;
    -moz-box-shadow: 0px 0px 5px transparent;
    box-shadow: 0px 0px 5px transparent
}

.acti-tags-list-view li:hover {
    background-color: #b5e7b5
}

.acti-tags-list-view li:hover p.tag-text span {
    animation: 0s wordsLoop linear infinite normal
}

.acti-tags-list-view span.danger {
    background: url(../img/tag_red.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30px;
    height: 30px;
    float: left;
    top: -4px;
    position: relative;
    margin-right: 10px
}

.acti-tags-list-view span.info {
    background: url(../img/tag_blue.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30px;
    height: 30px;
    float: left;
    top: -4px;
    position: relative;
    margin-right: 10px
}

.acti-tags-list-view span.warning {
    background: url(../img/tag_yellow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 30px;
    height: 30px;
    float: left;
    top: -4px;
    position: relative;
    margin-right: 10px
}

.acti-tags-list-view p.tag-text {
    float: right;
    width: 230px;
    overflow: hidden
}

.acti-tags-list-view p.tag-text span {
    display: inline-block;
    white-space: nowrap
}

@keyframes wordsLoop {
    0% {
        transform: translateX(0px);
        -webkit-transform: translateX(0px)
    }

    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%)
    }
}

@-moz-keyframes wordsLoop {
    0% {
        transform: translateX(0px);
        -webkit-transform: translateX(0px)
    }

    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%)
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(0px);
        -webkit-transform: translateX(0px)
    }

    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%)
    }
}

.acti-search-box {
    padding: 5px 0px 10px 2px;
    width: 100%;
    text-align: left;
    white-space: nowrap
}

.acti-search-box>* {
    vertical-align: middle;
    line-height: 16px;
    height: 30px
}

.acti-search-box .acti-btn {
    margin: 0px;
    font-size: 16px;
    text-align: center
}

.acti-search-box .acti-btn:disabled {
    color: #888;
    text-decoration: none;
    background-image: none
}

.acti-search-box .acti-search-keyword {
    width: 70%
}

.acti-match-span {
    background-color: #06c
}

.acti-matched-marks mark.acti-matched {
    position: absolute;
    display: block;
    background-color: green;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
    opacity: 0.2
}

.acti-matched-marks mark.acti-matched.acti-selected {
    background-color: red
}

.spin-search {
    width: 100%
}

.acti-search-type {
    color: #fff;
    text-align: left;
    margin-bottom: 5px;
    height: 24px
}

.acti-search-type label {
    cursor: pointer
}

.acti-search-type input {
    position: relative;
    top: 4px;
    margin: 0 3px 0px 5px;
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

.acti-search-type input[type="radio"]+label::before {
    content: "\a0";
    display: inline-block;
    font-size: 18px;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 100%;
    border: 1px solid #c8c8c8;
    line-height: 15px
}

.acti-search-type input[type="radio"]:checked+label::before {
    background-color: #fff;
    background-clip: content-box;
    padding: 4px;
    width: 7px;
    height: 7px;
    line-height: 7px
}

.acti-scroll-pane {
    width: 100%;
    clear: both
}

.acti-scroll-pane .viewport {
    width: 90%;
    height: 100%;
    overflow: hidden;
    position: relative
}

.acti-scroll-pane .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%
}

.acti-scroll-pane .thumb .end,
.acti-scroll-pane .thumb {
    background-color: #A6A6A6
}

.acti-scroll-pane .scrollbar {
    position: relative;
    float: left;
    width: 15px
}

.acti-scroll-pane .track {
    background-color: #5E5E5E;
    height: 100%;
    width: 6px;
    position: relative;
    padding: 0 1px;
    border-radius: 25px;
}

.acti-scroll-pane .thumb {
    height: 20px;
    width: 6px;
    left: 0;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    border-radius: 25px;
}

.acti-scroll-pane .thumb .end {
    overflow: hidden;
    height: 5px;
    width: 13px
}

.acti-scroll-pane .disable {
    display: none
}

.noSelect {
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.tipsy {
    padding: 5px;
    font-size: 18px;
    position: absolute;
    z-index: 100000
}

.tipsy-inner {
    padding: 5px 8px 4px;
    background-color: #000;
    color: #fff;
    max-width: 200px;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
}

.tipsy-arrow {
    position: absolute;
    background: url("../img/tipsy.gif") no-repeat top left;
    width: 9px;
    height: 5px
}

.tipsy-n .tipsy-arrow {
    top: 0;
    left: 50%;
    margin-left: -4px
}

.tipsy-nw .tipsy-arrow {
    top: 0;
    left: 10px
}

.tipsy-ne .tipsy-arrow {
    top: 0;
    right: 10px
}

.tipsy-s .tipsy-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -4px;
    background-position: bottom left
}

.tipsy-sw .tipsy-arrow {
    bottom: 0;
    left: 10px;
    background-position: bottom left
}

.tipsy-se .tipsy-arrow {
    bottom: 0;
    right: 10px;
    background-position: bottom left
}

.tipsy-e .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    right: 0;
    width: 5px;
    height: 9px;
    background-position: top right
}

.tipsy-w .tipsy-arrow {
    top: 50%;
    margin-top: -4px;
    left: 0;
    width: 5px;
    height: 9px
}

html {
    height: 100%;
    width: 100%
}

body {
    height: 100%;
    width: 100%;
    min-height: 100%;
    background-color: #efefef
}

body input {
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text
}

body>.ember-view {
    width: 100%;
    height: 100%
}

#acti-main-contents {
    width: 100%;
    height: 100%
}

#actibook {
    width: 100%;
    height: 100%
}

#actibook .book {
    margin: 0;
    font-size: 100%;
    overflow: hidden
}

#actibook .book-wrapper {
    width: 100%;
    height: 100%;
    font-size: 30px
}

.link-group div {
    position: absolute;
    opacity: 0.2
}

.link-group a {
    display: block;
    width: 100%;
    height: 100%
}

.acti-overlay-bar {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    z-index: -1
}

.acti-overlay-bar.animated.fadeInUp,
.acti-overlay-bar.animated.fadeInDown {
    z-index: 10000
}

.acti-overlay-bar.acti-opened {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    z-index: 10000
}

.link-div {
    display: none;
    position: absolute
}

.link-all {
    position: absolute;
    top: 0;
    left: 0
}

.audio-play {
    display: none;
    position: absolute;
    text-align: center;
    height: 30px;
    bottom: 10px;
    z-index: 100;
    width: 100%
}

.audio-div {
    display: inline-block;
    margin: 0 auto
}

.audio-play .close-button {
    cursor: pointer;
    background: linear-gradient(#1e1e1e, #070707);
    box-sizing: border-box;
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: top
}

.audio-play .close-button img {
    display: block;
    width: 14px;
    height: 14px;
    margin: 8px
}

#acti-main-contents nav {
    display: none;
    top: 0;
    position: fixed;
    width: 50px;
    height: 100%;
    background-color: gray;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

#acti-main-contents nav.to-left {
    left: 0
}

#acti-main-contents nav.to-right {
    right: 0
}

#acti-main-contents nav a {
    display: block;
    width: 100%;
    height: 100%
}

#acti-main-contents nav span {
    display: none;
    position: absolute;
    width: 36px;
    height: 36px;
    top: 50%;
    left: 50%;
    margin: -16px 0 0 -16px
}

#acti-main-contents.zoom nav:not(.disabled) {
    display: block
}

#acti-main-contents.zoom nav:not(.disabled):hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
    opacity: 0.2
}

#acti-main-contents.zoom nav:not(.disabled):hover span {
    display: block
}

.acti-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.loading-initapp {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -45px;
    z-index: 99999;
    width: 90px;
    height: 90px
}

.circle {
    border: 5px solid #41C4DD;
    opacity: 0.9;
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear
}

.circle1 {
    border: 5px solid #41C4DD;
    opacity: 0.9;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -50px;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0
    }
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
        opacity: 1
    }

    100% {
        -moz-transform: rotate(360deg);
        opacity: 0
    }
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0
    }
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
        opacity: 1
    }

    100% {
        -webkit-transform: rotate(360deg);
        opacity: 0
    }
}

body {
    background: #efefef
}

:-webkit-full-screen body {
    width: 100%;
    height: 100%
}

:-moz-full-screen body {
    width: 100%;
    height: 100%
}

.chromeframe {
    margin: 0.2em 0;
    padding: 0.2em 0;
    background: #ccc;
    color: #000
}

div.img-cover {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: #fff;
    position: absolute
}

img.p-tmp {
    height: 100%;
    width: 100%;
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0)
}


/***  app\assets\stylesheets\css\jquery.jspanel  ***/

/* jquery.jspanel.css version 2.5.3 - 2015-05-16 22:21 */


/*@import url(https://softdev-coop.e-manager.jp/actibook-file/index/000/000/027/HTML5/assets/css/fonts/jsglyph.eot);*/

@font-face {
    font-family: 'jsglyphregular';
    /*src: url('fonts/jsglyph.woff') format('woff');*/
    src: url('fonts/jsglyph.eot');
    /* IE9 Compat Modes */
}

@font-face {
    font-family: 'jsglyphregular';
    src: url('fonts/jsglyph.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('fonts/jsglyph.woff2') format('woff2'),
        url('fonts/jsglyph.woff') format('woff'),
        /* Modern Browsers */
        url('fonts/jsglyph.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('fonts/jsglyph.svg#jsglyphregular') format('svg');
    /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}


.jsglyph {
    font-family: "jsglyphregular";
}

.jsglyph-minimize:before {
    content: "\e001";
}

/* unicode &#xe001; */
.jsglyph-maximize:before {
    content: "\e002";
}

.jsglyph-chevron-up:before {
    content: "\e003";
}

.jsglyph-chevron-down:before {
    content: "\e004";
}

.jsglyph-normalize:before {
    content: "\e005";
}

.jsglyph-tick:before {
    content: "\e006";
}

.jsglyph-remove:before {
    content: "\e007";
}

.jsglyph-chevron-right:before {
    content: "\e008";
}

.jsglyph-chevron-left:before {
    content: "\e009";
}

.jsglyph-plus:before {
    content: "\e00a";
}

.jsglyph-minus:before {
    content: "\e00b";
}

.jsglyph-trashcan:before {
    content: "\e00c";
}

.jsglyph-square-info:before {
    content: "\e00d";
}

.jsglyph-square-exclamationmark:before {
    content: "\e00e";
}

.jsglyph-delete:before {
    content: "\e00f";
}

.jsglyph-mail:before {
    content: "\e010";
}

.jsglyph-envelope:before {
    content: "\e011";
}

.jsglyph-play:before {
    content: "\e012";
}

.jsglyph-forward:before {
    content: "\e013";
}

.jsglyph-backward:before {
    content: "\e014";
}

.jsglyph-step-forward:before {
    content: "\e015";
}

.jsglyph-step-backward:before {
    content: "\e016";
}

.jsglyph-fast-forward:before {
    content: "\e017";
}

.jsglyph-fast-backward:before {
    content: "\e018";
}

.jsglyph-eject:before {
    content: "\e019";
}

.jsglyph-stop:before {
    content: "\e01a";
}

.jsglyph-pause:before {
    content: "\e01b";
}

.jsglyph-arrow-right:before {
    content: "\e01c";
}

.jsglyph-arrow-left:before {
    content: "\e01d";
}

.jsglyph-arrow-up:before {
    content: "\e01e";
}

.jsglyph-arrow-down:before {
    content: "\e01f";
}

.jsglyph-star-halffull:before {
    content: "\e020";
}

.jsglyph-star:before {
    content: "\e021";
}

.jsglyph-star-empty:before {
    content: "\e022";
}

.jsglyph-arrow-right-hollow:before {
    content: "\e023";
}

.jsglyph-arrow-left-hollow:before {
    content: "\e024";
}

.jsglyph-arrow-up-hollow:before {
    content: "\e025";
}

.jsglyph-arrow-down-hollow:before {
    content: "\e026";
}

.jsglyph-square-questionmark:before {
    content: "\e027";
}

.jsglyph-circle-info:before {
    content: "\e028";
}

.jsglyph-circle-exclamationmark:before {
    content: "\e029";
}

.jsglyph-circle-questionmark:before {
    content: "\e02a";
}

.jsglyph-circle2-info:before {
    content: "\e02b";
}

.jsglyph-circle2-exclamationmark:before {
    content: "\e02c";
}

.jsglyph-circle2-questionmark:before {
    content: "\e02d";
}

.jsglyph-resize-handle:before {
    content: "\e02e";
}

.jsglyph-resize-handle-2:before {
    content: "\e02f";
}

.jsglyph-pencil:before {
    content: "\e030";
}

.jsglyph-refresh:before {
    content: "\e031";
}

.jsglyph-volume-off:before {
    content: "\e032";
}

.jsglyph-volume-up:before {
    content: "\e033";
}

.jsglyph-volume-down:before {
    content: "\e034";
}

.jsglyph-link:before {
    content: "\e035";
}

.jsglyph-eye-open:before {
    content: "\e036";
}

.jsglyph-eye-slash:before {
    content: "\e037";
}

.jsglyph-power-on:before {
    content: "\e038";
}

.jsglyph-cog:before {
    content: "\e039";
}

.jsglyph-cog2:before {
    content: "\e03a";
}

.jsglyph-torso:before {
    content: "\e03b";
}

.jsglyph-people:before {
    content: "\e03c";
}

.jsglyph-torso-female:before {
    content: "\e03d";
}

.jsglyph-people-female:before {
    content: "\e03e";
}

.jsglyph-torso-male-female:before {
    content: "\e03f";
}

.jsglyph-torso-female-male:before {
    content: "\e040";
}

.jsglyph-torso-hollow:before {
    content: "\e041";
}

.jsglyph-cog3:before {
    content: "\e042";
}

.jsglyph-tools:before {
    content: "\e043";
}

.jsglyph-home:before {
    content: "\e044";
}

.jsglyph-login:before {
    content: "\e045";
}

.jsglyph-logout:before {
    content: "\e046";
}

.jsglyph-download:before {
    content: "\e047";
}

.jsglyph-upload:before {
    content: "\e048";
}

.jsglyph-reload:before {
    content: "\e049";
}

.jsglyph-lock:before {
    content: "\e04a";
}

.jsglyph-unlock:before {
    content: "\e04b";
}

.jsglyph-save:before {
    content: "\e04c";
}

.jsglyph-wrench:before {
    content: "\e04d";
}

.jsglyph-search:before {
    content: "\e04e";
}

.jsglyph-zoom-in:before {
    content: "\e04f";
}

.jsglyph-zoom-out:before {
    content: "\e050";
}

.jsglyph-bars:before {
    content: "\e051";
}

.jsglyph-marker:before {
    content: "\e052";
}

.jsglyph-resize-handle-left:before {
    content: "\e053";
}

.jsglyph-resize-handle-2-left:before {
    content: "\e054";
}

.jsglyph-edit:before {
    content: "\e055";
}


.jsPanel,
.jsPanel-hdr-r,
.jsPanel-hdr-l,
.jsPanel-hdr-r span img,
.jsPanel-content {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    line-height: 1.5em;
    vertical-align: baseline;
}

.jsPanel {
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    border-radius: 3px;
    z-index: 100;
}

.jsPanel-hdr {
    box-sizing: border-box;
    min-height: 26px;
    padding: 2px 0 4px 2px;
}

.jsPanel-hdr * {
    font-size: 16px;
}

.jsPanel-hdr-r {
    position: absolute;
    top: 0;
    right: 0;
}

h3.jsPanel-title {
    float: left;
    width: calc(100% - 90px);
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    margin: 0;
    /*font-variant: small-caps;*/
    font-weight: normal;
    cursor: move;
    min-height: 24px;
    padding: 0 5px;
}

.jsPanel-hdr-r div {
    float: right;
    cursor: pointer;
    margin-left: 1px;
    width: auto;
    height: auto;
    min-width: 20px;
    min-height: 20px;
    overflow: hidden;
}

.jsPanel-btn-close {
    background: url("assets/painter/icon-sprite-20x20.jpg") 20px 0 repeat no-repeat;
}

.jsPanel-btn-max {
    background: url("assets/painter/icon-sprite-20x20.jpg") 40px 0 repeat no-repeat;
}

.jsPanel-btn-norm {
    background: url("assets/painter/icon-sprite-20x20.jpg") 60px 0 repeat no-repeat;
    display: none;
}

.jsPanel-btn-min {
    background: url("assets/painter/icon-sprite-20x20.jpg") 80px 0 repeat no-repeat;
}

.jsPanel-btn-small {
    background: url("assets/painter/icon-sprite-20x20.jpg") 100px 0 repeat no-repeat;
}

.jsPanel-btn-smallrev {
    background: url("assets/painter/icon-sprite-20x20.jpg") 120px 0 repeat no-repeat;
    display: none;
}


.jsPanel-hdr-toolbar {
    box-sizing: border-box;
    clear: both;
    font-size: 16px;
    margin-top: 23px;
    height: auto;
    padding: 0 5px;
    width: auto;
}

.jsPanel-hdr-toolbar img {
    cursor: pointer;
    margin-bottom: 4px;
    margin-right: 5px;
}

.jsPanel-content {
    font-size: 12px;
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.jsPanel-ftr {
    box-sizing: border-box;
    cursor: move;
    display: none;
    font-size: 12px;
    height: auto;
    padding: 2px 2px 2px 5px;
    text-align: right;
}

.jsPanel-ftr button {
    margin: 5px;
}

/* clearfix */
.jsPanel-clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* container that takes the minified jsPanels */
#jsPanel-min-container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: auto;
    height: 28px;
    background: transparent;
    z-index: 9999;
}

/* css for the modal backdrop --------------------------- */
.jsPanel-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.jsPanel-backdrop-inner {
    position: absolute;
    width: 100%;
}

/* THEMES ------------------------------------------------------------------------- */

/* default ------------------------------------------- */
.jsPanel.jsPanel-theme-default {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

.jsPanel-hdr.jsPanel-theme-default {
    color: #000;
    font-weight: normal;
}

.jsPanel-hdr.jsPanel-theme-default h3 {
    color: #000;
}

.jsPanel-hdr.jsPanel-theme-default h3 small {
    color: #000;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-default {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000;
    outline: 1px solid #bbb;
}

.jsPanel-ftr.jsPanel-theme-default {
    font-size: 12px;
    height: auto;
    padding: 2px 2px 2px 5px;
    text-align: right;
}

.jsPanel-theme-default .ui-icon-gripsmall-diagonal-se {
    color: #000;
}


/* light ------------------------------------------- */
.jsPanel.jsPanel-theme-light {
    background: #f1f1f1;
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

.jsPanel-hdr.jsPanel-theme-light {
    color: #000;
    font-weight: normal;
    background: #f1f1f1;
}

.jsPanel-hdr.jsPanel-theme-light h3 {
    color: #000;
}

.jsPanel-hdr.jsPanel-theme-light h3 small {
    color: #000;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-light {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000;
    outline: 1px solid #bbb;
}

.jsPanel-ftr.jsPanel-theme-light {
    color: #000;
    font-weight: normal;
    background: #f1f1f1;
}

.jsPanel-theme-light .ui-icon-gripsmall-diagonal-se {
    color: #000;
}

/* medium -------------------------------------------- */
.jsPanel.jsPanel-theme-medium {
    background: #c2c2c2;
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

.jsPanel-hdr.jsPanel-theme-medium {
    color: #000;
    font-weight: normal;
    background: #c2c2c2;
}

.jsPanel-hdr.jsPanel-theme-medium h3 {
    color: #000;
}

.jsPanel-hdr.jsPanel-theme-medium h3 small {
    color: #000;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-medium {
    background: none repeat scroll 0 0 #fff;
    color: #000;
    outline: 1px solid #bbb;
}

.jsPanel-ftr.jsPanel-theme-medium {
    color: #000;
    font-weight: normal;
    background: #c2c2c2;
}

.jsPanel-theme-medium .ui-icon-gripsmall-diagonal-se {
    color: #000;
}

/* dark ---------------------------------------------- */
/*.jsPanel.jsPanel-theme-dark{ background: #828282; box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4); }
.jsPanel-hdr.jsPanel-theme-dark{ color: #fff; font-family: tahoma,arial,verdana,sans-serif; font-weight: normal; background: #828282; }
.jsPanel-hdr.jsPanel-theme-dark h3{ color: #fff; }
.jsPanel-hdr.jsPanel-theme-dark h3 small{ color: #fff; font-size: 65%; }
.jsPanel-content.jsPanel-theme-dark { background: none repeat scroll 0 0 #fff; color: #000; font-family: tahoma,arial,verdana,sans-serif; outline: 1px solid #bbb; }
.jsPanel-ftr.jsPanel-theme-dark{ color: #fff; font-family: tahoma,arial,verdana,sans-serif; font-weight: normal; background: #828282; }
.jsPanel-theme-dark .ui-icon-gripsmall-diagonal-se{ color: #000; }*/
.jsPanel.jsPanel-theme-dark {
    background: linear-gradient(#4a4a4a 0px, black 100%) repeat scroll 0 0 #4a4a4a;
    background: -ms-linear-gradient(#4a4a4a 0px, black 100%) repeat scroll 0 0 #4a4a4a;
    box-shadow: 0 0 3px #333;
}

.jsPanel-hdr.jsPanel-theme-dark {
    color: #fff;
    font-weight: normal;
    background: black;
}

.jsPanel-hdr.jsPanel-theme-dark h3 {
    color: #fff;
}

.jsPanel-hdr.jsPanel-theme-dark h3 small {
    color: #fff;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-dark {
    background: none repeat scroll 0 0 #fff;
    color: #000;
    outline: 1px solid #bbb;
}

.jsPanel-ftr.jsPanel-theme-dark {
    color: #fff;
    font-weight: normal;
    background: #828282;
}

.jsPanel-theme-dark .ui-icon-gripsmall-diagonal-se {
    color: #000;
}

/* black ---------------------------------------------- */
.jsPanel.jsPanel-theme-black {
    background: linear-gradient(#4a4a4a 0px, black 100%) repeat scroll 0 0 #4a4a4a;
    background: -ms-linear-gradient(#4a4a4a 0px, black 100%) repeat scroll 0 0 #4a4a4a;
    box-shadow: 0 0 3px #333;
}

.jsPanel-hdr.jsPanel-theme-black {
    color: #fff;
    font-weight: normal;
    background: transparent;
}

.jsPanel-hdr.jsPanel-theme-black h3 {
    color: #fff;
}

.jsPanel-hdr.jsPanel-theme-black h3 small {
    color: #fff;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-black {
    background: transparent;
    color: #c3c3c3;
}

.jsPanel-ftr.jsPanel-theme-black {
    color: #fff;
    font-weight: normal;
    background: transparent;
}

.jsPanel-theme-black .ui-icon-gripsmall-diagonal-se {
    color: #fff;
}

/* primary ---------------------------------------------- */
.jsPanel.jsPanel-theme-primary {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

.jsPanel-hdr.jsPanel-theme-primary {
    color: #ffffff;
    font-weight: normal;
    background: #2FA4E7;
}

.jsPanel-hdr.jsPanel-theme-primary h3 {
    color: #fff;
}

.jsPanel-hdr.jsPanel-theme-primary h3 small {
    color: #fff;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-primary {
    background: none repeat scroll 0 0 #ffffff;
    color: #000000;
    outline: 1px solid #bbb;
}

.jsPanel-ftr.jsPanel-theme-primary {}

.jsPanel-theme-primary .ui-icon-gripsmall-diagonal-se {
    color: #000;
}

/* success --------------------------------------------- */
.jsPanel.jsPanel-theme-success {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

.jsPanel-hdr.jsPanel-theme-success {
    color: #fff;
    font-weight: normal;
    background: #73A839;
}

.jsPanel-hdr.jsPanel-theme-success h3 {
    color: #fff;
}

.jsPanel-hdr.jsPanel-theme-success h3 small {
    color: #fff;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-success {
    background: none repeat scroll 0 0 #ffffff;
    color: #000000;
    outline: 1px solid #bbb;
}

.jsPanel-ftr.jsPanel-theme-success {}

.jsPanel-theme-successt .ui-icon-gripsmall-diagonal-se {
    color: #000;
}

/* info ---------------------------------------------- */
.jsPanel.jsPanel-theme-info {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

.jsPanel-hdr.jsPanel-theme-info {
    color: #fff;
    font-weight: normal;
    background: #2497ce;
}

.jsPanel-hdr.jsPanel-theme-info h3 {
    color: #fff;
}

.jsPanel-hdr.jsPanel-theme-info h3 small {
    color: #fff;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-info {
    background: none repeat scroll 0 0 #ffffff;
    color: #000000;
}

.jsPanel-ftr.jsPanel-theme-info {}

.jsPanel-theme-info .ui-icon-gripsmall-diagonal-se {
    color: #000;
}

/* warning ----------------------------------------------- */
.jsPanel.jsPanel-theme-warning {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

.jsPanel-hdr.jsPanel-theme-warning {
    color: #fff;
    font-weight: normal;
    background: #ffb600;
}

.jsPanel-hdr.jsPanel-theme-warning h3 {
    color: #fff;
}

.jsPanel-hdr.jsPanel-theme-warning h3 small {
    color: #fff;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-warning {
    background: none repeat scroll 0 0 #fff;
    color: #000;
}

.jsPanel-ftr.jsPanel-theme-warning {}

.jsPanel-theme-warning .ui-icon-gripsmall-diagonal-se {
    color: #000;
}

/* danger ----------------------------------------------- */
.jsPanel.jsPanel-theme-danger {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

.jsPanel-hdr.jsPanel-theme-danger {
    color: #fff;
    font-weight: normal;
    background: #a83939;
}

.jsPanel-hdr.jsPanel-theme-danger h3 {
    color: #fff;
}

.jsPanel-hdr.jsPanel-theme-danger h3 small {
    color: #fff;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-danger {
    background: none repeat scroll 0 0 #ffffff;
    color: #000000;
}

.jsPanel-ftr.jsPanel-theme-danger {}

.jsPanel-theme-danger .ui-icon-gripsmall-diagonal-se {
    color: #000;
}

/* autumngreen ------------------------------------------- */
.jsPanel.jsPanel-theme-autumngreen {
    background: none repeat scroll 0 0 #eee;
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

.jsPanel-hdr.jsPanel-theme-autumngreen {
    color: rgb(196, 189, 142);
    font-weight: normal;
    background: rgb(125, 126, 81);
}

.jsPanel-hdr.jsPanel-theme-autumngreen h3 {
    color: rgb(196, 189, 142);
}

.jsPanel-hdr.jsPanel-theme-autumngreen h3 small {
    color: #fff;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-autumngreen {
    background: none repeat scroll 0 0 #FFFFFF;
    color: rgb(110, 100, 73);
    outline: 1px solid #bbb;
}

.jsPanel-ftr.jsPanel-theme-autumngreen {
    background: linear-gradient(to bottom, rgba(125, 126, 81, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(top, rgba(125, 126, 81, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgb(110, 100, 73);
}

.jsPanel-theme-autumngreen .ui-icon-gripsmall-diagonal-se {
    color: #000;
}

/* autumnbrown ------------------------------------------- */
.jsPanel.jsPanel-theme-autumnbrown {
    background: none repeat scroll 0 0 #eee;
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

.jsPanel-hdr.jsPanel-theme-autumnbrown {
    color: rgb(233, 206, 135);
    font-weight: normal;
    background: rgb(138, 91, 51);
}

.jsPanel-hdr.jsPanel-theme-autumnbrown h3 {
    color: rgb(233, 206, 135);
}

.jsPanel-hdr.jsPanel-theme-autumnbrown h3 small {
    color: #fff;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-autumnbrown {
    background: none repeat scroll 0 0 #FFFFFF;
    color: rgb(110, 100, 73);
    outline: 1px solid #bbb;
}

.jsPanel-ftr.jsPanel-theme-autumnbrown {
    background: linear-gradient(to bottom, rgba(138, 91, 51, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(top, rgba(138, 91, 51, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgb(110, 100, 73);
}

.jsPanel-theme-autumnbrown .ui-icon-gripsmall-diagonal-se {
    color: #000;
}

/* autumnred ------------------------------------------- */
.jsPanel.jsPanel-theme-autumnred {
    background: none repeat scroll 0 0 #eee;
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

.jsPanel-hdr.jsPanel-theme-autumnred {
    color: rgb(233, 206, 135);
    font-weight: normal;
    background: rgb(198, 113, 10);
}

.jsPanel-hdr.jsPanel-theme-autumnred h3 {
    color: rgb(233, 206, 135);
}

.jsPanel-hdr.jsPanel-theme-autumnred h3 small {
    color: #fff;
    font-size: 65%;
}

.jsPanel-content.jsPanel-theme-autumnred {
    background: none repeat scroll 0 0 #FFFFFF;
    color: rgb(110, 100, 73);
    outline: 1px solid #bbb;
}

.jsPanel-ftr.jsPanel-theme-autumnred {
    background: linear-gradient(to bottom, rgba(198, 113, 10, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(top, rgba(198, 113, 10, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    color: rgb(110, 100, 73);
}

.jsPanel-theme-autumnred .ui-icon-gripsmall-diagonal-se {
    color: #000;
}

/* bootstrap adjustments */
.jsPanel.panel-default,
.jsPanel.panel-primary,
.jsPanel.panel-info,
.jsPanel.panel-success,
.jsPanel.panel-warning,
.jsPanel.panel-danger {
    box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);
}

/* jQuery-UI adjustments */
.ui-icon-gripsmall-diagonal-se {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #000;
    font-family: jsglyphregular;
    font-size: 16px;
    line-height: 16px;
}


.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se {
    text-indent: 0;
    bottom: 2px;
}

/* uncomment to show a lower left resize icon
.ui-resizable-handle.ui-resizable-sw{
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #000;
    font-family: jsglyphregular;
    font-size: 16px;
    line-height: 16px;
    text-indent: 7px;
    bottom: 2px;
    width: 16px;
    height: 16px;
}
.ui-resizable-handle.ui-resizable-sw:before{
    content: "\e054";
}
*/

/* css for the tooltip wrapper ---------------------------- */
.jsPanel-tooltip-wrapper {
    position: relative;
    display: inline-block;
    /* do not change !!!  inline würde gehen -> offsets neu berechnen */
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.jsPanel-tooltip-wrapper .jsPanel {
    border-radius: 4px;
}

/* css for tooltip corners */
.jsPanel-corner-top,
.jsPanel-corner-right,
.jsPanel-corner-bottom,
.jsPanel-corner-left {
    width: 0;
    height: 0;
    border: 12px solid transparent;
    position: absolute;
}

.jsPanel-corner-top {
    border-top-width: 10px;
}

.jsPanel-corner-right {
    border-right-width: 10px;
}

.jsPanel-corner-bottom {
    border-bottom-width: 10px;
}

.jsPanel-corner-left {
    border-left-width: 10px;
}


/* css for the hints ----------------------------------------------------------- */
.jsPanel-hint {
    margin-bottom: 4px;
}

.jsPanel-hint-close {
    float: right;
    font-size: 1.5em;
    margin: 4px 5px 0 0;
    cursor: pointer;
}

.jsPanel-hint-content.jsPanel-hint-default {
    background: #fff none repeat scroll 0 0;
    border: 2px solid #222;
    color: #222;
    text-shadow: 1px 1px 1px #789;
}

.jsPanel-hint-content.jsPanel-hint-light {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(250, 250, 250, 0.65) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(250, 250, 250, 0.65) 100%);
    color: #000;
}

.jsPanel-hint-content.jsPanel-hint-medium {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(130, 130, 130, 1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(130, 130, 130, 1) 100%);
    color: #fff;
}

.jsPanel-hint-content.jsPanel-hint-dark {
    background: linear-gradient(to bottom, rgba(181, 189, 200, 1) 0%, rgba(130, 140, 149, 1) 36%, rgba(40, 52, 59, 1) 100%);
    background: -ms-linear-gradient(top, rgba(181, 189, 200, 1) 0%, rgba(130, 140, 149, 1) 36%, rgba(40, 52, 59, 1) 100%);
    color: #fff;
}

.jsPanel-hint-content.jsPanel-hint-autumngreen {
    background: linear-gradient(to bottom, rgba(125, 126, 81, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(top, rgba(125, 126, 81, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
}

.jsPanel-hint-content.jsPanel-hint-autumnbrown {
    background: linear-gradient(to bottom, rgba(138, 91, 51, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(top, rgba(138, 91, 51, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
}

.jsPanel-hint-content.jsPanel-hint-autumnred {
    background: linear-gradient(to bottom, rgba(198, 113, 10, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: -ms-linear-gradient(top, rgba(198, 113, 10, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
}

.jsPanel-hint-content.jsPanel-hint-primary {
    background: #82C8F1 none repeat scroll 0 0;
    border: 5px solid #02436A;
    color: #02436A;
    text-shadow: 2px 2px 2px #fff;
}

.jsPanel-hint-content.jsPanel-hint-info {
    background: #4594c3 none repeat scroll 0 0;
    border: 5px solid #033c73;
    color: #fff;
    text-shadow: 2px 2px 2px #033c73;
}

.jsPanel-hint-content.jsPanel-hint-success {
    background: #C3EA99 none repeat scroll 0 0;
    border: 5px solid #034E26;
    color: #356304;
    text-shadow: 2px 2px 2px #aaa;
}

.jsPanel-hint-content.jsPanel-hint-warning {
    background: #FFC7A3 none repeat scroll 0 0;
    border: 5px solid #DD5600;
    color: #AD6537;
    text-shadow: 2px 2px 2px #fff;
}

.jsPanel-hint-content.jsPanel-hint-danger {
    background: #fc7073 none repeat scroll 0 0;
    border: 5px solid #c71c22;
    color: #fff;
    text-shadow: 2px 2px 2px #c71c22;
}

/**
 * CSS3 Tips v1.0.1
 * A stylesheet for creating tooltips without using anything other than CSS3.
 * created by c.bavota released under GPL v2 March 21st, 2014
 * HTML example code for the tooltip
 * http://cbavota.bitbucket.org/css3-tips/
 * <a href="http://bavotasan.com" class="top-tip" data-tips="Go to bavotasan.com">bavotasan.com</a>
*/
[data-tips] {
    position: relative;
    text-decoration: none;
}

[data-tips]:after,
[data-tips]:before {
    position: absolute;
    z-index: 100;
    opacity: 0;
}

[data-tips]:after {
    content: attr(data-tips);
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #3276B1;
    border-radius: 4px;
    /*text-shadow: 0 0 5px #000;*/
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

[data-tips]:before {
    content: "";
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
}

[data-tips]:hover:after,
[data-tips]:hover:before {
    opacity: 1;
}

/* Top tips */
[data-tips].top-tip:after,
[data-tips].top-tip:before {
    -webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
    bottom: 90%;
    left: -9999px;
    margin-bottom: 12px;
}

[data-tips].top-tip:before {
    border-color: #3276B1 transparent transparent transparent;
    margin-bottom: 0;
}

[data-tips].top-tip:hover:after,
[data-tips].top-tip:hover:before {
    bottom: 100%;
    left: 0;
}

[data-tips].top-tip:hover:before {
    left: 15px;
}

/* Bottom tip */
[data-tips].bottom-tip:after,
[data-tips].bottom-tip:before {
    -webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
    top: 90%;
    left: -9999px;
    margin-top: 12px;
}

[data-tips].bottom-tip:before {
    border-color: transparent transparent #3276B1 transparent;
    margin-top: 0;
}

[data-tips].bottom-tip:hover:after,
[data-tips].bottom-tip:hover:before {
    top: 100%;
    left: 0;
}

[data-tips].bottom-tip:hover:before {
    left: 15px;
}

/* Right tip */
[data-tips].right-tip:after,
[data-tips].right-tip:before {
    -webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
    top: -9999px;
    left: 96%;
    margin-left: 12px;
}

[data-tips].right-tip:before {
    border-color: transparent #3276B1 transparent transparent;
    margin-left: 0;
}

[data-tips].right-tip:hover:after,
[data-tips].right-tip:hover:before {
    left: 100%;
    top: 0;
}

[data-tips].right-tip:hover:before {
    top: 7px;
}

/* Left tip */
[data-tips].left-tip:after,
[data-tips].left-tip:before {
    -webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
    -moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
    transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
    top: -9999px;
    right: 96%;
    margin-right: 12px;
}

[data-tips].left-tip:before {
    border-color: transparent transparent transparent #3276B1;
    margin-right: 0;
}

[data-tips].left-tip:hover:after,
[data-tips].left-tip:hover:before {
    right: 100%;
    top: 0;
}

[data-tips].left-tip:hover:before {
    top: 7px;
}


/***  app\assets\stylesheets\css\jquery-confirm  ***/

/*!

 * jquery-confirm v2.5.1 (http://craftpip.github.io/jquery-confirm/)

 * Author: boniface pereira

 * Website: www.craftpip.com

 * Contact: hey@craftpip.com

 *

 * Copyright 2013-2016 jquery-confirm

 * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE)

 */

@-webkit-keyframes jconfirm-rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes jconfirm-rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

body.jconfirm-noscroll {
    overflow: hidden !important;
}

.jconfirm {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999;
    font-family: inherit;
    overflow: hidden;
}

.jconfirm .jconfirm-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    -webkit-transition: all .4s;
    transition: all .4s;
}

.jconfirm .jconfirm-bg.seen {
    opacity: 1;
}

.jconfirm .jconfirm-scrollpane {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-perspective-origin: center;
    perspective-origin: center;
}

.jconfirm .jconfirm-box {
    background: white;
    border-radius: 4px;
    position: relative;
    outline: none;
    padding: 15px 15px 0;
}

.jconfirm .jconfirm-box div.closeIcon {
    height: 20px;
    width: 20px;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    opacity: .6;
    text-align: center;
    -webkit-transition: opacity 0.1s ease-in;
    transition: opacity 0.1s ease-in;
    display: none;
    font-size: 27px;
    line-height: 14px;
}

.jconfirm .jconfirm-box div.closeIcon .fa {
    font-size: 16px;
}

.jconfirm .jconfirm-box div.closeIcon .glyphicon {
    font-size: 16px;
}

.jconfirm .jconfirm-box div.closeIcon .zmdi {
    font-size: 16px;
}

.jconfirm .jconfirm-box div.closeIcon:hover {
    opacity: 1;
}

.jconfirm .jconfirm-box div.title-c {
    display: block;
    font-size: 22px;
    line-height: 20px;
}

.jconfirm .jconfirm-box div.title-c .icon-c {
    font-size: inherit;
    padding-bottom: 15px;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

.jconfirm .jconfirm-box div.title-c .icon-c i {
    vertical-align: middle;
}

.jconfirm .jconfirm-box div.title-c .icon-c:empty {
    display: none;
}

.jconfirm .jconfirm-box div.title-c .title {
    font-size: inherit;
    font-family: inherit;
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 15px;
}

.jconfirm .jconfirm-box div.title-c .title:empty {
    display: none;
}

.jconfirm .jconfirm-box div.content-pane {
    margin-bottom: 15px;
    height: auto;
    -webkit-transition: height 0.4s ease-in;
    transition: height 0.4s ease-in;
    display: inline-block;
    width: 100%;
    position: relative;
}

.jconfirm .jconfirm-box div.content-pane .content {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    right: 0;
}

.jconfirm .jconfirm-box div.content-pane .content img {
    width: 100%;
    height: auto;
}

.jconfirm .jconfirm-box div.content-pane .content:empty {
    display: none;
}

.jconfirm .jconfirm-box div.content-pane .content:empty.loading {
    height: 40px;
    position: relative;
    opacity: 0.6;
    display: block;
}

.jconfirm .jconfirm-box div.content-pane .content:empty.loading:before {
    content: '';
    height: 20px;
    width: 20px;
    border: solid 2px transparent;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    border-radius: 50%;
    -webkit-animation: jconfirm-rotate 1s infinite linear;
    animation: jconfirm-rotate 1s infinite linear;
    border-bottom-color: #aaa;
    top: 50%;
    margin-top: -10px;
}

.jconfirm .jconfirm-box div.content-pane .content:empty.loading:after {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -15px;
}

.jconfirm .jconfirm-box .buttons {
    padding-bottom: 15px;
}

.jconfirm .jconfirm-box .buttons button+button {
    margin-left: 5px;
}

.jconfirm .jquery-clear {
    clear: both;
}

.jconfirm.rtl {
    direction: rtl;
}

.jconfirm.rtl div.closeIcon {
    left: 12px;
    right: auto;
}

.jconfirm.jconfirm-white .jconfirm-bg {
    background-color: rgba(0, 0, 0, 0.2);
}

.jconfirm.jconfirm-white .jconfirm-box {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.jconfirm.jconfirm-white .jconfirm-box .buttons {
    float: right;
}

.jconfirm.jconfirm-white .jconfirm-box .buttons button {
    border: none;
    background-image: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    text-shadow: none;
    -webkit-transition: background .1s;
    transition: background .1s;
    color: white;
}

.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default {
    box-shadow: none;
    color: #333;
}

.jconfirm.jconfirm-white .jconfirm-box .buttons button.btn-default:hover {
    background: #ddd;
}

.jconfirm.jconfirm-black .jconfirm-bg {
    background-color: rgba(0, 0, 0, 0.5);
}

.jconfirm.jconfirm-black .jconfirm-box {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    background: #444;
    border-radius: 5px;
    color: white;
}

.jconfirm.jconfirm-black .jconfirm-box .buttons {
    float: right;
}

.jconfirm.jconfirm-black .jconfirm-box .buttons button {
    border: none;
    background-image: none;
    /*text-transform: uppercase;*/
    font-size: 16px;
    font-weight: bold;
    text-shadow: none;
    -webkit-transition: background .1s;
    transition: background .1s;
    color: white;
}

.jconfirm.jconfirm-black .jconfirm-box .buttons button.btn-default {
    box-shadow: none;
    color: #fff;
    background: none;
}

.jconfirm.jconfirm-black .jconfirm-box .buttons button.btn-default:hover {
    background: #666;
}

.jconfirm .jconfirm-box.hilight {
    -webkit-animation: hilight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    animation: hilight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@-webkit-keyframes hilight {

    10%,
    90% {
        -webkit-transform: translate3d(-2px, 0, 0);
        transform: translate3d(-2px, 0, 0);
    }

    20%,
    80% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }

    30%,
    50%,
    70% {
        -webkit-transform: translate3d(-8px, 0, 0);
        transform: translate3d(-8px, 0, 0);
    }

    40%,
    60% {
        -webkit-transform: translate3d(8px, 0, 0);
        transform: translate3d(8px, 0, 0);
    }
}

@keyframes hilight {

    10%,
    90% {
        -webkit-transform: translate3d(-2px, 0, 0);
        transform: translate3d(-2px, 0, 0);
    }

    20%,
    80% {
        -webkit-transform: translate3d(4px, 0, 0);
        transform: translate3d(4px, 0, 0);
    }

    30%,
    50%,
    70% {
        -webkit-transform: translate3d(-8px, 0, 0);
        transform: translate3d(-8px, 0, 0);
    }

    40%,
    60% {
        -webkit-transform: translate3d(8px, 0, 0);
        transform: translate3d(8px, 0, 0);
    }
}

/*Transition rules*/
.jconfirm {
    -webkit-perspective: 400px;
    perspective: 400px;
}

.jconfirm .jconfirm-box {
    opacity: 1;
    -webkit-transition-property: -webkit-transform, opacity, box-shadow;
    transition-property: transform, opacity, box-shadow;
}

.jconfirm .jconfirm-box.anim-top,
.jconfirm .jconfirm-box.anim-left,
.jconfirm .jconfirm-box.anim-right,
.jconfirm .jconfirm-box.anim-bottom,
.jconfirm .jconfirm-box.anim-opacity,
.jconfirm .jconfirm-box.anim-zoom,
.jconfirm .jconfirm-box.anim-scale,
.jconfirm .jconfirm-box.anim-none,
.jconfirm .jconfirm-box.anim-rotate,
.jconfirm .jconfirm-box.anim-rotatex,
.jconfirm .jconfirm-box.anim-rotatey,
.jconfirm .jconfirm-box.anim-scaley,
.jconfirm .jconfirm-box.anim-scalex {
    opacity: 0;
}

.jconfirm .jconfirm-box.anim-rotate {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.jconfirm .jconfirm-box.anim-rotatex {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-rotatexr {
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-rotatey {
    -webkit-transform: rotatey(90deg);
    -ms-transform: rotatey(90deg);
    transform: rotatey(90deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-rotateyr {
    -webkit-transform: rotatey(-90deg);
    -ms-transform: rotatey(-90deg);
    transform: rotatey(-90deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-scaley {
    -webkit-transform: scaley(1.5);
    -ms-transform: scaley(1.5);
    transform: scaley(1.5);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-scalex {
    -webkit-transform: scalex(1.5);
    -ms-transform: scalex(1.5);
    transform: scalex(1.5);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.jconfirm .jconfirm-box.anim-top {
    -webkit-transform: translate(0px, -100px);
    -ms-transform: translate(0px, -100px);
    transform: translate(0px, -100px);
}

.jconfirm .jconfirm-box.anim-left {
    -webkit-transform: translate(-100px, 0px);
    -ms-transform: translate(-100px, 0px);
    transform: translate(-100px, 0px);
}

.jconfirm .jconfirm-box.anim-right {
    -webkit-transform: translate(100px, 0px);
    -ms-transform: translate(100px, 0px);
    transform: translate(100px, 0px);
}

.jconfirm .jconfirm-box.anim-bottom {
    -webkit-transform: translate(0px, 100px);
    -ms-transform: translate(0px, 100px);
    transform: translate(0px, 100px);
}

.jconfirm .jconfirm-box.anim-zoom {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.jconfirm .jconfirm-box.anim-scale {
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

.jconfirm .jconfirm-box.anim-none {
    display: none;
}

.jconfirm.jconfirm-supervan .jconfirm-bg {
    background-color: rgba(54, 70, 93, 0.95);
}

.jconfirm.jconfirm-supervan .jconfirm-box {
    background-color: transparent;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.closeIcon {
    color: white;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.title-c {
    text-align: center;
    color: white;
    font-size: 28px;
    font-weight: normal;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.title-c>* {
    padding-bottom: 25px;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.content-pane {
    margin-bottom: 25px;
}

.jconfirm.jconfirm-supervan .jconfirm-box div.content {
    text-align: center;
    color: white;
}

.jconfirm.jconfirm-supervan .jconfirm-box .buttons {
    text-align: center;
}

.jconfirm.jconfirm-supervan .jconfirm-box .buttons button {
    font-size: 16px;
    border-radius: 2px;
    background: #303f53;
    text-shadow: none;
    border: none;
    color: white;
    padding: 10px;
    min-width: 100px;
}

.jconfirm.jconfirm-material .jconfirm-bg {
    background-color: rgba(0, 0, 0, 0.67);
}

.jconfirm.jconfirm-material .jconfirm-box {
    background-color: white;
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 30px 25px 10px 25px;
}

.jconfirm.jconfirm-material .jconfirm-box div.closeIcon {
    color: rgba(0, 0, 0, 0.87);
}

.jconfirm.jconfirm-material .jconfirm-box div.title-c {
    color: rgba(0, 0, 0, 0.87);
    font-size: 22px;
    font-weight: bold;
}

.jconfirm.jconfirm-material .jconfirm-box div.content {
    text-align: left;
    color: rgba(0, 0, 0, 0.87);
}

.jconfirm.jconfirm-material .jconfirm-box .buttons {
    text-align: right;
}

.jconfirm.jconfirm-material .jconfirm-box .buttons button {
    text-transform: uppercase;
    font-weight: 500;
}

.jconfirm.jconfirm-bootstrap .jconfirm-bg {
    background-color: rgba(0, 0, 0, 0.21);
}

.jconfirm.jconfirm-bootstrap .jconfirm-box {
    background-color: white;
    box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2);
    border: solid 1px rgba(0, 0, 0, 0.4);
    padding: 15px 0 0;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box div.closeIcon {
    color: rgba(0, 0, 0, 0.87);
}

.jconfirm.jconfirm-bootstrap .jconfirm-box div.title-c {
    color: rgba(0, 0, 0, 0.87);
    font-size: 22px;
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box div.content {
    text-align: left;
    color: rgba(0, 0, 0, 0.87);
    padding: 0px 15px;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box .buttons {
    text-align: right;
    padding: 0px 0 0px;
    margin: -5px 0 0px;
    border-top: solid 1px #ddd;
    overflow: hidden;
    border-radius: 0 0 4px 4px;
}

.jconfirm.jconfirm-bootstrap .jconfirm-box .buttons button {
    font-weight: 500;
    border-radius: 0px;
    margin: 0;
    border-left: solid 1px #ddd;
}


/***  app\assets\stylesheets\css\spectrum  ***/

/***

Spectrum Colorpicker v1.8.0

https://github.com/bgrins/spectrum

Author: Brian Grinstead

License: MIT

***/


.sp-container {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    /* https://github.com/bgrins/spectrum/issues/40 */
    z-index: 9999994;
    overflow: hidden;
}

.sp-container.sp-flat {
    position: relative;
}

/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
    position: relative;
    width: 100%;
    display: inline-block;
}

.sp-top-inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.sp-color {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 20%;
}

.sp-hue {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 84%;
    height: 100%;
}

.sp-clear-enabled .sp-hue {
    top: 33px;
    height: 77.5%;
}

.sp-fill {
    padding-top: 80%;
}

.sp-sat,
.sp-val {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.sp-alpha-enabled .sp-top {
    margin-bottom: 18px;
}

.sp-alpha-enabled .sp-alpha {
    display: block;
}

.sp-alpha-handle {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 6px;
    left: 50%;
    cursor: pointer;
    border: 1px solid black;
    background: white;
    opacity: .8;
}

.sp-alpha {
    display: none;
    position: absolute;
    bottom: -14px;
    right: 0;
    left: 0;
    height: 8px;
}

.sp-alpha-inner {
    border: solid 1px #333;
}

.sp-clear {
    display: none;
}

.sp-clear.sp-clear-display {
    background-position: center;
}

.sp-clear-enabled .sp-clear {
    display: block;
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 84%;
    height: 28px;
}

/* Don't allow text selection */
.sp-container,
.sp-replacer,
.sp-preview,
.sp-dragger,
.sp-slider,
.sp-alpha,
.sp-clear,
.sp-alpha-handle,
.sp-container.sp-dragging .sp-input,
.sp-container button {
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

.sp-container.sp-input-disabled .sp-input-container {
    display: none;
}

.sp-container.sp-buttons-disabled .sp-button-container {
    display: none;
}

.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
    display: none;
}

.sp-palette-only .sp-picker-container {
    display: none;
}

.sp-palette-disabled .sp-palette-container {
    display: none;
}

.sp-initial-disabled .sp-initial {
    display: none;
}


/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
.sp-sat {
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}

.sp-val {
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}

.sp-hue {
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

/* IE filters do not support multiple color stops.
   Generate 6 divs, line them up, and do two color gradients for each.
   Yes, really.
 */
.sp-1 {
    height: 17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}

.sp-2 {
    height: 16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}

.sp-3 {
    height: 17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}

.sp-4 {
    height: 17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}

.sp-5 {
    height: 16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}

.sp-6 {
    height: 17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}

.sp-hidden {
    display: none !important;
}

/* Clearfix hack */
.sp-cf:before,
.sp-cf:after {
    content: "";
    display: table;
}

.sp-cf:after {
    clear: both;
}

.sp-cf {
    *zoom: 1;
}

/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
    .sp-color {
        right: 40%;
    }

    .sp-hue {
        left: 63%;
    }

    .sp-fill {
        padding-top: 60%;
    }
}

.sp-dragger {
    border-radius: 5px;
    height: 5px;
    width: 5px;
    border: 1px solid #fff;
    background: #000;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

.sp-slider {
    position: absolute;
    top: 0;
    cursor: pointer;
    height: 3px;
    left: -1px;
    right: -1px;
    border: 1px solid #000;
    background: white;
    opacity: .8;
}

/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/

.sp-container {
    border-radius: 0;
    background-color: #ECECEC;
    border: solid 1px #f0c49B;
    padding: 0;
}

.sp-container,
.sp-container button,
.sp-container input,
.sp-color,
.sp-hue,
.sp-clear {
    font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.sp-top {
    margin-bottom: 3px;
}

.sp-color,
.sp-hue,
.sp-clear {
    border: solid 1px #666;
}

/* Input */
.sp-input-container {
    float: right;
    width: 100px;
    margin-bottom: 4px;
}

.sp-initial-disabled .sp-input-container {
    width: 100%;
}

.sp-input {
    font-size: 12px !important;
    border: 1px inset;
    padding: 4px 5px;
    margin: 0;
    width: 100%;
    background: transparent;
    border-radius: 3px;
    color: #222;
}

.sp-input:focus {
    border: 1px solid orange;
}

.sp-input.sp-validation-error {
    border: 1px solid red;
    background: #fdd;
}

.sp-picker-container,
.sp-palette-container {
    float: left;
    position: relative;
    padding: 10px;
    padding-bottom: 300px;
    margin-bottom: -290px;
}

.sp-picker-container {
    width: 172px;
    border-left: solid 1px #fff;
}

/* Palettes */
.sp-palette-container {
    border-right: solid 1px #ccc;
}

.sp-palette-only .sp-palette-container {
    border: 0;
}

.sp-palette .sp-thumb-el {
    display: block;
    position: relative;
    float: left;
    width: 24px;
    height: 15px;
    margin: 3px;
    cursor: pointer;
    border: solid 2px transparent;
}

.sp-palette .sp-thumb-el:hover,
.sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: orange;
}

.sp-thumb-el {
    position: relative;
}

/* Initial */
.sp-initial {
    float: left;
    border: solid 1px #333;
}

.sp-initial span {
    width: 30px;
    height: 25px;
    border: none;
    display: block;
    float: left;
    margin: 0;
}

.sp-initial .sp-clear-display {
    background-position: center;
}

/* Buttons */
.sp-palette-button-container,
.sp-button-container {
    float: right;
}

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    /*padding: 8px 1px 3px 8px;*/
    padding: 10px 0px 10px 4px;
    display: inline-block;
    *zoom: 1;
    *display: inline;
    /*border: solid 1px #91765d;*/
    background: #eee;
    /*color: #333;*/
    vertical-align: middle;
}

.sp-replacer:hover,
.sp-replacer.sp-active {
    border-color: #F0C49B;
    color: #111;
}

.sp-replacer.sp-disabled {
    cursor: default;
    border-color: silver;
    color: silver;
}

.sp-dd {
    padding: 2px 0;
    height: 16px;
    line-height: 16px;
    float: right;
    font-size: 10px;
}

.sp-preview {
    position: relative;
    width: 20px;
    height: 20px;
    /*border: solid 1px #222;*/
    margin-right: 5px;
    float: left;
    z-index: 0;
}

.sp-palette {
    *width: 220px;
    max-width: 220px;
}

.sp-palette .sp-thumb-el {
    width: 16px;
    height: 16px;
    margin: 2px 1px;
    border: solid 1px #d0d0d0;
}

.sp-container {
    padding-bottom: 0;
}


/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button {
    background-color: #eeeeee;
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
    background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
    border: 1px solid #ccc;
    border-bottom: 1px solid #bbb;
    border-radius: 3px;
    color: #333;
    font-size: 14px;
    line-height: 1;
    padding: 5px 4px;
    text-align: center;
    text-shadow: 0 1px 0 #eee;
    vertical-align: middle;
}

.sp-container button:hover {
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
}

.sp-container button:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}

.sp-cancel {
    font-size: 11px;
    color: #d93f3f !important;
    margin: 0;
    padding: 2px;
    margin-right: 5px;
    vertical-align: middle;
    text-decoration: none;

}

.sp-cancel:hover {
    color: #d93f3f !important;
    text-decoration: underline;
}


.sp-palette span:hover,
.sp-palette span.sp-thumb-active {
    border-color: #000;
}

.sp-preview,
.sp-alpha,
.sp-thumb-el {
    position: relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}

.sp-preview-inner,
.sp-alpha-inner,
.sp-thumb-inner {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.sp-palette .sp-thumb-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}

.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}

.sp-clear-display {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}


/***  app\assets\stylesheets\css\style  ***/

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?4mava7');
    src: url('fonts/icomoon.eot?4mava7#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?4mava7') format('truetype'),
        url('fonts/icomoon.woff?4mava7') format('woff'),
        url('fonts/icomoon.svg?4mava7#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ic-md {
    font-size: 45px;
}

.ic-lt {
    font-size: 24px;
}

.ic {
    color: rgba(255, 255, 255, 1);
}

.ic-active {
    color: #00ff00;
}

.acti-current {
    color: #00ff00;
}

.icon-icon_bookmark:before {
    content: "\e900";
}

.icon-icon_painter-style-pen4:before {
    content: "\e901";
}

.icon-icon_painter-style-pen3:before {
    content: "\e902";
}

.icon-icon_close:before {
    content: "\e903";
}

.icon-icon_comment:before {
    content: "\e904";
}

.icon-icon_delete_forever:before {
    content: "\e905";
}


.icon-icon_detlete-copy:before {
    float: right;
    content: url(../img/resizeG16.png);
    cursor: nw-resize;
}

.icon-icon_detlete-copy:hover {
    cursor: nw-resize;
    float: right;
    content: url(../img/resizeGr16.png);
    color: #7ed321;
}


.icon-icon_detlete:before {
    content: "\e907";
}

.icon-icon_drow_line:before {
    content: "\e908";
}

.icon-icon_drowing_gesture:before {
    content: "\e909";
}

.icon-icon_eraser:before {
    content: "\e90a";
}

.icon-icon_list:before {
    content: "\e90b";
}

.icon-icon_navigate_next:before {
    content: "\e90c";
}

.icon-icon_pen:before {
    content: "\e90d";
}

.icon-icon_painter-style-pen2:before {
    content: "\e90e";
}

.icon-icon_painter-style-pen1:before {
    content: "\e90f";
}

.icon-icon_print:before {
    content: "\e910";
}

.icon-icon_search:before {
    content: "\e911";
}

.icon-icon_thumbnail:before {
    content: "\e912";
}


@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MaterialIcons-Regular.eot);
    /* For IE6-8 */
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(fonts/MaterialIcons-Regular.woff2) format('woff2'),
        url(fonts/MaterialIcons-Regular.woff) format('woff'),
        url(fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
}

.material-icons.md-dark.md-inactive {
    color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}

.material-icons.md-light.md-inactive {
    color: rgba(255, 255, 255, 0.3);
}

/* customize color */
.material-icons.active {
    color: #7ed321;
}

.material-icons.md-cgray {
    color: #666666;
}


#painter {
    bottom: 0;
    top: auto;
    height: 50px !important;
}

ul.PainterMenu {
    list-style-type: none;
    float: left;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: #000;
    opacity: .75;
}

ul.PainterMenu.mobile {
    display: flex;
    width: 100%;
    height: 100%;
}

ul.PainterMenu.mobile li {
    height: 24px;
    width: 24px;
    display: inline-block;
    margin: auto;
}

li.painter-color {
    background-color: #333;
}

li.painter-color .sp-replacer {
    margin-top: -9px;
    width: 40px;
    background-color: #333;
    margin-left: -10px;
}

li.painter-color .sp-replacer .sp-dd {
    color: gray;
}

li.PainterMenuItem {
    display: inline-block;
    margin: 10px 10px 10px;
    overflow: hidden;
    font-size: 1.5em;
    text-align: center;
    width: 40px;
    height: 40px;
}

li.PainterMenuItem img {
    /*margin:10px 0px 0px;*/
    overflow: hidden;
    text-align: center;
    width: 40px;
    height: 40px;
}

li.PainterMenuItem.mobile {

    width: 10%;
    margin: 0px 0px 0px 0px;
    height: 50px;
}

li.PainterMenuItem.mobile>img {
    margin: 0px 0px 0px;
    overflow: hidden;
    text-align: center;
    width: 40px;
    height: 40px;
}


li.PainterMenuItem .sp-light {
    margin-top: 0px;
}

li.PainterMenuItem img:hover,
li.PainterMenuItem .sp-light:hover {
    border: 2px solid #000;
}

li.PainterMenuItem .sp-replacer {
    background: #333333;
}


li.PainterMenuItem.mobile .sp-replacer {
    margin-top: 8px;
}

/* Replacer (the little preview div that shows up instead of the <input>) */
li.PainterMenuItem.mobile .sp-replacer {
    /*    margin:0;
    overflow:hidden;
    cursor:pointer;
    padding: 5px 1px 3px 8px;
    display:inline-block;
    *zoom: 1;
    *display: inline;*/
    /*border: solid 1px #91765d;*/
    /* background: #eee;
    color: #333;
    vertical-align: middle;*/
    padding: 5px 1px 3px 8px;
}

li.PainterMenuItem.color {
    width: 46px;
}

li.PainterMenuItem.mobile.color {
    width: 46px;
    margin-bottom: 4px;
}

li.PainterMenuItem.mobile.lineWidth {
    margin-bottom: 5px;
}


li.PainterMenuItem.mobile.lineWidth img {
    width: 35px;
    height: 35px;
}


/***  app\assets\stylesheets\css\select2.min  ***/

.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select2-container .select2-selection--single .select2-selection__clear {
    position: relative
}

.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px
}

.select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    user-select: none;
    -webkit-user-select: none
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline-block;
    overflow: hidden;
    padding-left: 8px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select2-container .select2-search--inline {
    float: left
}

.select2-container .select2-search--inline .select2-search__field {
    box-sizing: border-box;
    border: none;
    font-size: 100%;
    margin-top: 5px;
    padding: 0
}

.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none
}

.select2-dropdown {
    background-color: white;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 1051
}

.select2-results {
    display: block
}

.select2-results__options {
    list-style: none;
    margin: 0;
    padding: 0
}

.select2-results__option {
    padding: 6px;
    user-select: none;
    -webkit-user-select: none
}

.select2-results__option[aria-selected] {
    cursor: pointer
}

.select2-container--open .select2-dropdown {
    left: 0
}

.select2-container--open .select2-dropdown--above {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.select2-container--open .select2-dropdown--below {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.select2-search--dropdown {
    display: block;
    padding: 4px
}

.select2-search--dropdown .select2-search__field {
    padding: 4px;
    width: 100%;
    box-sizing: border-box
}

.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none
}

.select2-search--dropdown.select2-search--hide {
    display: none
}

.select2-close-mask {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 99;
    background-color: #fff;
    filter: alpha(opacity=0)
}

.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
    float: left
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #eee;
    cursor: default
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none
}

.select2-container--default.select2-container --open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px
}

.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #999;
    margin-top: 5px;
    float: left
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-top: 5px;
    margin-right: 10px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #999;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #333
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
    float: right
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
    margin-left: 5px;
    margin-right: auto
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 2px;
    margin-right: auto
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid black 1px;
    outline: 0
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #eee;
    cursor: default
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
    display: none
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa
}

.select2-container--default .select2-search--inline .select2-search__field {
    background: transparent;
    border: none;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: textfield
}

.select2-container--default .select2-results__option[role=group] {
    padding: 0
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #999
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ddd
}

.select2-container--default .select2-results__option .select2-results__option {
    padding-left: 1em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
    padding-left: 0
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -1em;
    padding-left: 2em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -2em;
    padding-left: 3em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -3em;
    padding-left: 4em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -4em;
    padding-left: 5em
}

.select2-con tainer--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -5em;
    padding-left: 6em
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #5897fb;
    color: white
}

.select2-container--default .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px
}

.select2-container--classic .select2-selection--single {
    background-color: #f7f7f7;
    border: 1px solid #aaa;
    border-radius: 4px;
    outline: 0;
    background-image: -webkit-linear-gradient(top, #fff 50%, #eee 100%);
    background-image: -o-linear-gradient(top, #fff 50%, #eee 100%);
    background-image: linear-gradient(to bottom, #fff 50%, #eee 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
}

.select2-container--classic .select2-selection--single:focus {
    border: 1px solid #5897fb
}

.select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px
}

.select2-container--classic .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    margin-right: 10px
}

.select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: #999
}

.select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: #ddd;
    border: none;
    border-left: 1px solid #aaa;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
    background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
    background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)
}

.select2-container--classic .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0
}

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
    float: left
}

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    border: none;
    border-right: 1px solid #aaa;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    left: 1px;
    right: auto
}

.select2-container--classic.select2-container--open .select2-selection--single {
    border: 1px solid #5897fb
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
    background: transparent;
    border: none
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-image: -webkit-linear-gradient(top, #fff 0%, #eee 50%);
    background-image: -o-linear-gradient(top, #fff 0%, #eee 50%);
    background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-image: -webkit-linear-gradient(top, #eee 50%, #fff 100%);
    background-image: -o-linear-gradient(top, #eee 50%, #fff 100%);
    background-image: linear-gradient(to bottom, #eee 50%, #fff 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)
}

.select2-container--classic .select2-selection--multiple {
    background-color: white;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text;
    outline: 0
}

.select2-container--classic .select2-selection--multiple:focus {
    border: 1px solid #5897fb
}

.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
    list-style: none;
    margin: 0;
    padding: 0 5px
}

.select2-container--classic .select2-selection--multiple .select2-selection__clear {
    display: none
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    color: #888;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #555
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
    float: right
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
    margin-left: 5px;
    margin-right: auto
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 2px;
    margin-right: auto
}

.select2-container--classic.select2-container--open .select2-selection--multiple {
    border: 1px solid #5897fb
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.select2-container--classic .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
    outline: 0
}

.select2-container--classic .select2-search--inline .select2-search__field {
    outline: 0;
    box-shadow: none
}

.select2-container--classic .select2-dropdown {
    background-color: #fff;
    border: 1px solid transparent
}

.select2-container--classic .select2-dropdown--above {
    border-bottom: none
}

.select2-container--classic .select2-dropdown--below {
    border-top: none
}

.select2-container--classic .select2-results__option[role=group] {
    padding: 0
}

.select2-container--classic .select2-results__option[aria-disabled=true] {
    color: grey
}

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
    background-color: #3875d7;
    color: #fff
}

.select2-container--classic .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px
}

.select2-container--classic.select2-container--open .select2-dropdown {
    border-color: #5897fb
}


/***  app\assets\stylesheets\css\cropper  ***/

/*!
 * Cropper.js v1.4.1
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2018-07-15T09:54:43.167Z
 */


.cropper-container {
    direction: ltr;
    font-size: 0;
    line-height: 0;
    position: relative;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cropper-container img {
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
    overflow: hidden;
}

.cropper-drag-box {
    background-color: #fff;
    opacity: 0;
}

.cropper-modal {
    background-color: #ccc;
    opacity: .5;
}

.cropper-view-box {
    display: block;
    height: 100%;
    outline-color: rgba(51, 153, 255, 0.75);
    outline: 1px solid #39f;
    overflow: hidden;
    width: 100%;
}

.cropper-dashed {
    border: 0 dashed #eee;
    display: block;
    opacity: .5;
    position: absolute;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
}

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
}

.cropper-center {
    display: block;
    height: 0;
    left: 50%;
    opacity: .75;
    position: absolute;
    top: 50%;
    width: 0;
}

.cropper-center:before,
.cropper-center:after {
    background-color: #eee;
    content: ' ';
    display: block;
    position: absolute;
}

.cropper-center:before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
}

.cropper-center:after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
    display: block;
    height: 100%;
    opacity: .1;
    position: absolute;
    width: 100%;
}

.cropper-face {
    background-color: #fff;
    left: 0;
    top: 0;
}

.cropper-line {
    background-color: #39f;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
}

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
}

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
}

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
}

.cropper-point {
    background-color: #39f;
    height: 5px;
    opacity: .75;
    width: 5px;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
}

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
}

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
}

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
}

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
}

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
}

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
}

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px;
}

@media (min-width: 768px) {
    .cropper-point.point-se {
        height: 15px;
        width: 15px;
    }
}

@media (min-width: 992px) {
    .cropper-point.point-se {
        height: 10px;
        width: 10px;
    }
}

@media (min-width: 1200px) {
    .cropper-point.point-se {
        height: 5px;
        opacity: .75;
        width: 5px;
    }
}

.cropper-point.point-se:before {
    background-color: #39f;
    bottom: -50%;
    content: ' ';
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%;
}

.cropper-invisible {
    opacity: 0;
}

.cropper-bg {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}

.cropper-hidden {
    display: none !important;
}

.cropper-move {
    cursor: move;
}

.cropper-crop {
    cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
    cursor: not-allowed;
}

.acti-thumbnails a.acti-current img {
    border: solid 2px #f43d10;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


input.acti-tooltip-goto-input::-moz-selection {
    background: #338fff !important;
}