/* Generic Application CSS */

@font-face {
    font-family: TitilliumWeb;
    font-weight: 400;
    src: url("../fonts/Titillium_Web/TitilliumWeb-Regular.ttf") format("truetype");
}
@font-face {
    font-family: TitilliumWeb;
    font-weight: 600;
    src: url("../fonts/Titillium_Web/TitilliumWeb-Bold.ttf") format("truetype");
}
@font-face {
    font-family: TitilliumWeb;
    font-weight: 100;
    src: url("../fonts/Titillium_Web/TitilliumWeb-Light.ttf") format("truetype");
}

.frametrail-body {
	position: relative;
    background: var(--primary-bg-color);
	font-family: TitilliumWeb,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
    font-weight: 400;
	overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100vh;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
}

.wysihtml5-editor {
    height: 100%;
    overflow: auto !important;
    font-family: TitilliumWeb,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.wysihtml5-editor p {
    margin: 0;
}

.wysihtml5-editor ol, .wysihtml5-editor ul {
    margin: 0;
    padding-left: 20px;
}

.frametrail-body.editActive {
    position: fixed !important;
    top: 0px !important;
    left: 0px !important;
    width: 100% !important;
    height: 100% !important;
}

body > .ui-dialog, body > .ui-draggable, body > .contentViewPreview {
    background-color: var(--primary-bg-color);
    font-family: TitilliumWeb,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
}

button, input[type="submit"], input[type="button"], .button {
	font-family: TitilliumWeb,"Helvetica Neue",Helvetica,Arial,sans-serif;
	border: none;
	font-size: 14px;
	text-align: left;
	padding: 4px 6px;
	background-color: transparent;
	border: 2px solid var(--primary-bg-color);
	color: var(--primary-bg-color);
}

button.small, .button.small {
    padding: 2px 4px 2px 1px;
    line-height: 12px;
}

button:focus, input[type="submit"]:focus, input[type="button"]:focus {
    outline: none;
}

button[disabled], input[disabled] {
	background-color: #a3a3a3;
    opacity: 0.4;
    pointer-events: none;
}

button:hover, input[type="submit"]:hover, input[type="button"]:hover, .button:hover {
	background-color: var(--primary-bg-color);
    color: var(--primary-fg-color);
	cursor: pointer;
}

button.active, input[type="submit"].active, input[type="button"].active, .button.active {
    background-color: var(--primary-bg-color);
    color: var(--primary-fg-color);
}

input[type="text"], input[type="password"], textarea {
	font-family: TitilliumWeb,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	margin: 4px 8px 4px 0;
    padding: 3px 5px;
    border: 2px solid var(--semi-transparent-bg-color);
    background: var(--primary-fg-color);
    color: var(--primary-bg-color);
    width: 155px;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
	border-color: var(--primary-bg-color);
}

input[readonly], textarea[readonly] {
	background-color: #cfcfcf;
}

.formColumn {
    float: left;
}

.formColumn.column1 {
    width: 25%;
}

.formColumn.column2 {
    width: 50%;
}

.formColumn.column3 {
    width: 75%;
}

.formColumn.column4 {
    width: 100%;
}

.formColumn input[type="text"], .formColumn textarea {
    width: calc(100% - 20px);
    box-sizing: border-box;
}

.contextSelectButton {
    position: relative;
    display: inline-block;
}

.contextSelectList {
    position: absolute;
    top: 20px;
    left: -2px;
    min-width: 170px;
    min-height: 10px;
    background: var(--primary-fg-color);
    border: 2px solid var(--primary-bg-color);
    z-index: 99;
    display: none;
    max-height: 91px;
    overflow: auto;
}

.contextSelectButton.active .contextSelectList {
    display: block;
}

.contextSelectList div {
    display: block;
    margin: 0px;
    padding: 2px 4px;
    line-height: initial;
    color: var(--primary-bg-color);
    background: var(--primary-fg-color);
}

.contextSelectList div:hover {
    color: var(--primary-fg-color);
    background: var(--secondary-bg-color);
    cursor: pointer;
}

.slideButton {
    position: absolute;
    font-size: 26px;
    background: var(--primary-bg-color);
    color: var(--primary-fg-color);
    opacity: .7;
    overflow: hidden;
}

.slideButton.active {
    display: block;
}

.slideButton:hover {
    cursor: pointer;
    opacity: 1;
}

.slideButton [class^="icon-"]::before, .slideButton [class^="icon-"]::before {
    margin: -2px;
}

.slideButton.slideLeft {
    top: 50%;
    left: 10px;
    width: 22px;
    height: 40px;
    margin-top: -20px;
    line-height: 40px;
}

.slideButton.slideRight {
    top: 50%;
    right: 10px;
    width: 22px;
    height: 40px;
    margin-top: -20px;
    line-height: 40px;
}

.slideButton.slideTop {
    top: 10px;
    left: 50%;
    width: 40px;
    height: 22px;
    margin-left: -20px;
    line-height: 22px;
}

.slideButton.slideBottom {
    top: auto;
    bottom: 10px;
    left: 50%;
    width: 40px;
    height: 22px;
    margin-left: -20px;
    line-height: 22px;
}

.slideButton.slideTop [class^="icon-"]::before, .slideButton.slideBottom [class^="icon-"]::before {
    margin-left: 7px;
}


/* Tags */

.tagItem, .typeItem, .userItem {
    display: inline-block;
    padding: 2px 6px;
    color: var(--primary-fg-color);
    background: var(--secondary-bg-color);
    margin: 2px 6px 6px 0px;
    border-radius: 3px;
    line-height: 20px;
    cursor: default;
}

.tagItem:hover, .typeItem:hover, .userItem:hover {
    background: var(--primary-bg-color);
}

.tagItem .deleteItem, .typeItem .deleteItem, .userItem .deleteItem {
    display: inline-block;
    margin-right: -4px;
    cursor: pointer;
}

/* Theme Items */

.themeItem {
    float: left;
    width: 100px;
    height: 40px;
    padding: 4px 8px;
    margin-right: 8px;
    background: var(--primary-bg-color);
    color: var(--primary-fg-color);
    border: 1px solid var(--secondary-fg-color);
    cursor: pointer;
    transition-property: height;
    transition-duration: 40ms;
    overflow: hidden;
}

.themeItem.active, .themeItem:hover {
    height: 60px;
}

.themeItem .themeColorContainer {
    height: 16px;
}

.themeItem .themeColorContainer div {
    float: left;
    width: 33.2%;
    height: 100%;
}

.themeItem .themeColorContainer div.primary-fg-color {
    background: var(--primary-fg-color);
}

.themeItem .themeColorContainer div.secondary-bg-color {
    background: var(--secondary-bg-color);
}

.themeItem .themeColorContainer div.secondary-fg-color {
    background: var(--secondary-fg-color);
}

/* Select Menu */

.ui-selectmenu-button {
	background-color: var(--primary-fg-color);
	border: 2px solid var(--primary-bg-color);
	color: var(--primary-bg-color);
}

.ui-selectmenu-button:hover {
	background-color: var(--primary-bg-color);
	color: var(--primary-fg-color);
}

.ui-selectmenu-button .ui-icon {
	width: 18px;
	height: 18px;
}

.ui-selectmenu-open {
	background: var(--primary-fg-color);
    color: var(--primary-bg-color);
	box-shadow: 0 0 1px 1px var(--primary-bg-color);
    height: 195px;
    overflow-x: hidden;
    overflow-y: auto;
}

.ui-selectmenu-open .ui-state-active {
    background: var(--primary-bg-color);
    color: var(--primary-fg-color);
}

/* Messages */

.message {
	height: auto;
	line-height: 20px;
	background-color: #FCFAF1;
	border: 1px solid #FFC414;
	color: #333;
	padding: 1px 4px;
	margin-bottom: 10px;
	clear: both;
    border-radius: 3px;
	display: none;
}

.message.active {
	display: block;
}

.message.error {
	background-color: var(--primary-fg-color);
	border: 1px solid #cd0a0a;
	color: #cd0a0a;
}

.message.success {
	background-color: #f1ffe3;
    border: 1px solid #739600;
    color: #739600;
}

.workingSpinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    margin-left: -30px;
    border-radius: 50%;
    transform-origin: center;
    background: var(--primary-fg-color);
    background: -moz-linear-gradient(left, var(--primary-fg-color) 10%, transparent 42%);
    background: -webkit-linear-gradient(left, var(--primary-fg-color) 10%, transparent 42%);
    background: -o-linear-gradient(left, var(--primary-fg-color) 10%, transparent 42%);
    background: -ms-linear-gradient(left, var(--primary-fg-color) 10%, transparent 42%);
    background: linear-gradient(to right, var(--primary-fg-color) 10%, transparent 42%);
    -webkit-animation: loading 1.4s infinite linear;
    animation: loading 1s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    mask-image: radial-gradient(transparent 65%, #000 66%);
    -webkit-mask-image: radial-gradient(transparent 65%, #000 66%);
}

.workingSpinner:before {
    width: 50%;
    height: 50%;
    background: var(--primary-fg-color);
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}

.workingSpinner:after {
    background: var(--primary-bg-color);
    width: 90%;
    height: 90%;
    border-radius: 50%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.workingSpinner.dark {
    background: var(--primary-fg-color);
    background: -moz-linear-gradient(left, var(--primary-bg-color) 10%, transparent 42%);
    background: -webkit-linear-gradient(left, var(--primary-bg-color) 10%, transparent 42%);
    background: -o-linear-gradient(left, var(--primary-bg-color) 10%, transparent 42%);
    background: -ms-linear-gradient(left, var(--primary-bg-color) 10%, transparent 42%);
    background: linear-gradient(to right, var(--primary-bg-color) 10%, transparent 42%);
}

.workingSpinner.dark::before {
    background: var(--primary-bg-color);
}

@-webkit-keyframes loading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Tooltips */

[data-tooltip-left] {
	position: relative;
}

[data-tooltip-left]::before {
    background-color: var(--tooltip-bg-color);
    border-radius: 5px;
    color: #333333;
    content: attr(data-tooltip-left);
    display: none;
    font-size: 13px;
    font-weight: normal;
    left: 0px;
    line-height: 18px;
    padding: 3px 5px;
    position: absolute;
    top: -31px;
    height: 18px;
    width: auto;
    white-space: nowrap;
    z-index: 10;
}

[data-tooltip-left]::after {
    border-top: 4px solid var(--tooltip-bg-color);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    content: "";
    display: none;
    left: 14px;
    position: absolute;
    top: -7px;
}

[data-tooltip-left]:hover::after, [data-tooltip-left]:hover::before {
    cursor: default;
    display: block;
}

[data-tooltip-right] {
	position: relative;
}

[data-tooltip-right]::before {
    background-color: var(--tooltip-bg-color);
    border-radius: 5px;
    color: #333333;
    content: attr(data-tooltip-right);
    display: none;
    font-size: 13px;
    font-weight: normal;
    right: 0px;
    line-height: 18px;
    padding: 3px 5px;
    position: absolute;
    top: -31px;
    height: 18px;
    width: auto;
    white-space: nowrap;
    z-index: 10;
}

[data-tooltip-right]::after {
    border-top: 4px solid var(--tooltip-bg-color);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    content: "";
    display: none;
    right: 14px;
    position: absolute;
    top: -7px;
}

[data-tooltip-right]:hover::after, [data-tooltip-right]:hover::before {
    cursor: default;
    display: block;
}

[data-tooltip-bottom-right] {
	position: relative;
}

[data-tooltip-bottom-right]::before {
    background-color: var(--tooltip-bg-color);
    border-radius: 5px;
    color: #333333;
    content: attr(data-tooltip-bottom-right);
    display: none;
    font-size: 13px;
    font-weight: normal;
    right: 3px;
    line-height: 18px;
    padding: 3px 5px;
    position: absolute;
    bottom: -31px;
    height: 18px;
    width: auto;
    white-space: nowrap;
    z-index: 10;
}

[data-tooltip-bottom-right]::after {
    border-bottom: 4px solid var(--tooltip-bg-color);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    content: "";
    display: none;
    right: 17px;
    position: absolute;
    bottom: -7px;
}

[data-tooltip-bottom-right]:hover::after, [data-tooltip-bottom-right]:hover::before {
    cursor: default;
    display: block;
}

[data-tooltip-bottom-left] {
	position: relative;
}

[data-tooltip-bottom-left]::before {
    background-color: var(--tooltip-bg-color);
    border-radius: 5px;
    color: #333333;
    content: attr(data-tooltip-bottom-left);
    display: none;
    font-size: 13px;
    font-weight: normal;
    left: 3px;
    line-height: 18px;
    padding: 3px 5px;
    position: absolute;
    bottom: -31px;
    height: 18px;
    width: auto;
    white-space: nowrap;
    z-index: 10;
}

[data-tooltip-bottom-left]::after {
    border-bottom: 4px solid var(--tooltip-bg-color);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    content: "";
    display: none;
    left: 17px;
    position: absolute;
    bottom: -7px;
}

[data-tooltip-bottom-left]:hover::after, [data-tooltip-bottom-left]:hover::before {
    cursor: default;
    display: block;
}

[data-tooltip-left-left] {
    position: relative;
}

[data-tooltip-left-left]::before {
    background-color: var(--tooltip-bg-color);
    border-radius: 5px;
    color: #333333;
    content: attr(data-tooltip-left-left);
    display: none;
    font-size: 13px;
    font-weight: normal;
    left: 45px;
    line-height: 18px;
    padding: 3px 5px;
    position: absolute;
    top: 6px;
    height: 18px;
    width: auto;
    white-space: nowrap;
    z-index: 10;
}

[data-tooltip-left-left]::after {
    border-bottom: 4px solid transparent;
    border-right: 4px solid var(--tooltip-bg-color);
    border-top: 4px solid transparent;
    content: "";
    display: none;
    left: 41px;
    position: absolute;
    top: 14px;
}

[data-tooltip-left-left]:hover::after, [data-tooltip-left-left]:hover::before {
    cursor: default;
    display: block;
}

[data-tooltip-right-right] {
    position: relative;
}

[data-tooltip-right-right]::before {
    background-color: var(--tooltip-bg-color);
    border-radius: 5px;
    color: #333333;
    content: attr(data-tooltip-right-right);
    display: none;
    font-size: 13px;
    font-weight: normal;
    right: 45px;
    line-height: 18px;
    padding: 3px 5px;
    position: absolute;
    top: 6px;
    height: 18px;
    width: auto;
    white-space: nowrap;
    z-index: 10;
}

[data-tooltip-right-right]::after {
    border-bottom: 4px solid transparent;
    border-left: 4px solid var(--tooltip-bg-color);
    border-top: 4px solid transparent;
    content: "";
    display: none;
    right: 41px;
    position: absolute;
    top: 14px;
}

[data-tooltip-right-right]:hover::after, [data-tooltip-right-right]:hover::before {
    cursor: default;
    display: block;
}


/* Dialog */

.ui-blocking-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--primary-bg-color);
    /*
    background: -moz-radial-gradient(center, ellipse cover,  var(--primary-bg-color) 1%, rgb(126, 126, 126) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,var(--primary-bg-color)), color-stop(100%,rgb(126, 126, 126)));
    background: -webkit-radial-gradient(center, ellipse cover,  var(--primary-bg-color) 1%,rgb(126, 126, 126) 100%);
    background: -o-radial-gradient(center, ellipse cover,  var(--primary-bg-color) 1%,rgb(126, 126, 126) 100%);
    background: -ms-radial-gradient(center, ellipse cover,  var(--primary-bg-color) 1%,rgb(126, 126, 126) 100%);
    background: radial-gradient(ellipse at center,  var(--primary-bg-color) 1%,rgb(126, 126, 126) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--primary-bg-color)', endColorstr='rgb(126, 126, 126)',GradientType=1 );
    */
    z-index: 100000;
}

.ui-blocking-overlay .ui-overlay-box {
    position: absolute;
    width: 300px;
    height: 250px;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -175px;
}

.ui-blocking-overlay .ui-overlay-box .boxTitle {
    color: var(--primary-fg-color);
    font-size: 22px;
    font-weight: 100;
    text-align: center;
    margin-bottom: 40px;
}

.ui-blocking-overlay .ui-overlay-box button, .ui-blocking-overlay .ui-overlay-box input[type="submit"] {
    border-color: var(--primary-fg-color);
    color: var(--primary-fg-color);
    padding: 6px 12px;
    vertical-align: middle;
}

.ui-blocking-overlay .ui-overlay-box input[type="text"], .ui-blocking-overlay .ui-overlay-box input[type="password"] {
    width: 284px;
}

.ui-blocking-overlay .ui-overlay-box button:hover, .ui-blocking-overlay .ui-overlay-box input[type="submit"]:hover {
    background-color: rgba(248,248,248, .1);
}

.ui-widget-overlay {
	background: rgba(100, 104, 113, 0.6);
}

.ui-dialog {
	background: var(--primary-bg-color);
}

.ui-dialog .ui-dialog-titlebar {
	background: var(--primary-bg-color);
	color: var(--primary-fg-color);
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
    width: 20px;
    height: 20px;
    background-color: transparent !important;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon {
    margin-top: -10px;
    margin-left: -12px;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon::before {
	font-size: 20px;
    color: var(--primary-fg-color);
    margin-top: 0px;
    margin-left: 0px;
}

.ui-dialog .ui-dialog-content {
	background: var(--primary-fg-color);
    color: var(--primary-bg-color);
	padding: 10px;
}

.ui-dialog .ui-dialog-buttonpane {
	background: var(--primary-fg-color);
    color: var(--primary-bg-color);
	margin-top: 2px;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: left;
}

/* Tabs */

.ui-tabs {
    padding: 0.2em 0;
}

.ui-tabs .ui-tabs-nav {
    padding: 0.2em 0 0;
}

.ui-tabs .ui-tabs-nav li {

}

.ui-tabs .ui-tabs-nav li.ui-tabs-right {
    float: right;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-right.tab-label {
    padding: 2px 8px 0 0;
}

.ui-tabs .ui-tabs-nav li.ui-state-disabled a {
	color: #cfcfcf;
	pointer-events: none;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	color: var(--primary-bg-color);
    opacity: .8;
	border-bottom: 3px solid transparent;
    padding: 2px 6px;
}

.ui-tabs .ui-tabs-nav li a:hover, .ui-tabs .ui-tabs-nav .ui-tabs-anchor:hover {
    opacity: 1;
}

.ui-tabs .ui-tabs-nav li.ui-state-active {

}

.ui-tabs .ui-tabs-nav li.ui-state-active a {
	color: var(--primary-bg-color);
    opacity: 1;
	border-bottom: 3px solid var(--primary-bg-color);
	outline: none;
}

.ui-tabs .ui-tabs-panel {
	padding: 12px 8px;
}

/* Droppable UI */

.droppableActive {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAEElEQVQImWN4v0/zPwNBAABnuALWAA7X1wAAAABJRU5ErkJggg==") !important;
	box-shadow: 0 0 0px 1px #FF9919 inset !important;
}

.droppableHover {
	box-shadow: 0 0 1px 3px #FF9919 inset !important;
}

/* Generic Hypervideo Settings */

.hypervideoLayout .settingsContainer {
    background: var(--primary-bg-color);
    height: 144px;
    position: relative;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--primary-fg-color);
    width: 315px;
    border: 5px solid var(--primary-bg-color);
    overflow: hidden;
    cursor: default;
}

.hypervideoLayout .settingsContainer .layoutSettingsWrapper {
    float: left;
    width: 180px;
    border-right: 5px solid var(--primary-bg-color);
}

.hypervideoLayout .settingsContainer [data-config] {
    background-color: #959698;
    color: #333;
    font-weight: 100;
    padding-top: 5px;
    position: relative;
    text-align: center;
}

.hypervideoLayout .settingsContainer [data-config]:hover {
    background-color: #AFAFAF;
    cursor: pointer;
}

.hypervideoLayout .settingsContainer [data-config].active {
    background-color: #F8F8F8;
}

.hypervideoLayout .settingsContainer [data-config="areaTopVisible"] {
    clear: both;
    height: 22px;
}

.hypervideoLayout .settingsContainer .playerWrapper {
    height: 80px;
    margin: 5px 0;
}

.hypervideoLayout .settingsContainer .playerWrapper [data-config="overlaysVisible"] {
    float: left;
    height: 75px;
    width: 110px;
    margin-right: 5px;
}

.hypervideoLayout .settingsContainer .playerWrapper [data-config="areaRightVisible"] {
    float: left;
    height: 75px;
    width: 65px;
}

.hypervideoLayout .settingsContainer [data-config="areaBottomVisible"] {
    clear: both;
    height: 22px;
}

.hypervideoLayout .settingsContainer .genericSettingsWrapper {
    float: left;
    height: 50px;
    margin: 10px;
    width: 110px;
}

.hypervideoLayout .settingsContainer .genericSettingsWrapper [data-config="slidingMode"] {
    height: 20px;
    padding-top: 0;
    background: #f8f8f8;
}

.hypervideoLayout .settingsContainer .genericSettingsWrapper [data-config="slidingMode"] .slidingMode {
    float: left;
    pointer-events: none;
    height: 100%;
    width: 50%;
    outline: 1px solid #333;
    background-color: #959698;
    color: #333;
}

.hypervideoLayout .settingsContainer .genericSettingsWrapper [data-config="slidingMode"] .slidingMode[data-value="adjust"] {
    background-color: #F8F8F8;
}

.hypervideoLayout .settingsContainer .genericSettingsWrapper [data-config="slidingMode"].active .slidingMode[data-value="adjust"] {
    background-color: #959698;
}

.hypervideoLayout .settingsContainer .genericSettingsWrapper [data-config="slidingMode"].active .slidingMode[data-value="overlay"] {
    background-color: #F8F8F8;
}

/* Generic User Management CSS */

.selectUserContainer {
    float: left;
    margin: 10px 0;
}

.userDataContainer {
    display: none;
    float: left;
    margin-left: 25px;
    margin-top: 7px;
    width: 370px;
}

.userColorCollectionItem {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin: 3px;
    opacity: 0.8;
    cursor: pointer;
}

.userColorCollectionItem:hover, .userColorCollectionItem:focus {
    opacity: 1;
}

.userColorCollectionItem.selected {
    outline: 3px solid var(--primary-bg-color);
    opacity: 1;
}

.admin-only {
    opacity: .4;
    pointer-events: none;
}

.cc-by-sa-bg-image {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIKCSBpZD0ic3ZnMiIgaW5rc2NhcGU6dmVyc2lvbj0iMC45MSByMTM3MjUiIHNvZGlwb2RpOmRvY25hbWU9ImhqaGouc3ZnIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDgwMCAyNjciCgkgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgODAwIDI2NzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjE5O30KCS5zdDF7ZmlsbDojRkZGRkZGO3N0cm9rZTojRkZGRkZGO30KCS5zdDJ7ZmlsbDojRkZGRkZGO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDoxNTt9Cgkuc3Qze2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MzEuNDt9Cgkuc3Q0e2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+Cjxzb2RpcG9kaTpuYW1lZHZpZXcgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiBib3JkZXJvcGFjaXR5PSIxLjAiIGZpdC1tYXJnaW4tYm90dG9tPSIwIiBmaXQtbWFyZ2luLWxlZnQ9IjAiIGZpdC1tYXJnaW4tcmlnaHQ9IjAiIGZpdC1tYXJnaW4tdG9wPSIwIiBpZD0iYmFzZSIgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIiBpbmtzY2FwZTpjeD0iNzk2Ljk2MDY3IiBpbmtzY2FwZTpjeT0iMjA1Ljk1MjcyIiBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwODQiIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTAwOCIgaW5rc2NhcGU6d2luZG93LXg9IjEwMjQiIGlua3NjYXBlOndpbmRvdy15PSIwIiBpbmtzY2FwZTp6b29tPSIwLjQ4IiBwYWdlY29sb3I9IiNmZmZmZmYiIHNob3dncmlkPSJmYWxzZSI+Cgk8L3NvZGlwb2RpOm5hbWVkdmlldz4KPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQuMjg1NzEzLDMyOC43OTg1MikiIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIj4KCTxlbGxpcHNlIGlkPSJwYXRoNDE0NyIgY2xhc3M9InN0MCIgY3g9IjY5LjYiIGN5PSItMTk2IiByeD0iMTE1LjgiIHJ5PSIxMTUuNSIvPgoJPGVsbGlwc2UgaWQ9ImVsbGlwc2U0MTQ5IiBjbGFzcz0ic3QwIiBjeD0iMzQ1LjIiIGN5PSItMTk2IiByeD0iMTE1LjgiIHJ5PSIxMTUuNSIvPgoJPGVsbGlwc2UgaWQ9ImVsbGlwc2U0MTUxIiBjbGFzcz0ic3QwIiBjeD0iNjIyLjQiIGN5PSItMTk2IiByeD0iMTE1LjgiIHJ5PSIxMTUuNSIvPgoJPHBhdGggaWQ9InBhdGg0MTUzIiBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiBzb2RpcG9kaTpub2RldHlwZXM9ImNjY2NjY2NjY2NjIiBjbGFzcz0ic3QxIiBkPSJNMzI0LjktMTEwbDAuMy02NC4yCgkJbC0xNC43LTAuMlYtMjMxYzAuMS0zLjIsMS43LTYuMiw2LjItNS45bDU4LjQtMC40YzMuOSwwLjcsNy40LDIsNy4xLDguMWwtMC4zLDU1LjhsLTE1LjQsMC4ydjYzLjhMMzI0LjktMTEweiIvPgoJPGVsbGlwc2UgaWQ9InBhdGg0MTU1IiBjbGFzcz0ic3QyIiBjeD0iMzQ1LjMiIGN5PSItMjY0LjUiIHJ4PSIxNi44IiByeT0iMTYuMyIvPgoJCgkJPHBhdGggaWQ9InBhdGg0MTU3IiBzb2RpcG9kaTpjeD0iNzgyLjk4NyIgc29kaXBvZGk6Y3k9Ii0xNjAuMjAwMDMiIHNvZGlwb2RpOmVuZD0iMi45MDU3ODc1IiBzb2RpcG9kaTpvcGVuPSJ0cnVlIiBzb2RpcG9kaTpyeD0iNjMuNzk3NTM1IiBzb2RpcG9kaTpyeT0iNzIuODg4NDUxIiBzb2RpcG9kaTpzdGFydD0iMy40NTE5MjIiIHNvZGlwb2RpOnR5cGU9ImFyYyIgY2xhc3M9InN0MyIgZD0iCgkJTTU3Ni45LTIxMS43YzcuOC0yNy43LDMyLjMtNDQuNyw1Ny40LTM5LjZjMjUuMSw1LDQzLjEsMzAuNSw0Mi4yLDU5LjZjLTEsMjkuMS0yMC42LDUzLTQ1LjksNTUuOWMtMjUuNCwyLjktNDguNy0xNi4xLTU0LjctNDQuNCIKCQkvPgoJPHBhdGggaWQ9InBhdGg1MjQ3IiBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiBzb2RpcG9kaTpub2RldHlwZXM9ImNjY2MiIGNsYXNzPSJzdDEiIGQ9Ik01NjkuOC0xOTguMmwtMTQuMi0yOGw0Ni4yLDE1LjYKCQlMNTY5LjgtMTk4LjJ6Ii8+CjwvZz4KPHBhdGggY2xhc3M9InN0NCIgZD0iTTE2MywxNTMuOWMtNS42LDAtMTAtMi0xMi45LTZzLTQuNC05LjYtNC40LTE2LjVjMC0xNS4zLDUuNi0yMi45LDE3LjMtMjIuOWMyLjQsMCw0LjgsMC44LDcuNiwyLjRzNC44LDQsNi44LDgKCWwxNi45LTguOGMtNi44LTEyLjQtMTguMS0xOC41LTM0LjEtMTguNWMtMTAuOCwwLTE5LjcsMy42LTI2LjksMTAuOGMtNy4yLDcuMi0xMC44LDE2LjktMTAuOCwyOS4zczMuNiwyMi41LDEwLjQsMjkuMwoJYzYuOCw3LjIsMTYuMSwxMC40LDI3LjcsMTAuNGM3LjIsMCwxMy43LTEuNiwxOS43LTUuMnMxMC44LTguNCwxNC4xLTE0LjlsLTE2LjEtOEMxNzUuOSwxNDkuOCwxNzAuMiwxNTMuOSwxNjMsMTUzLjl6Ii8+CjxwYXRoIGNsYXNzPSJzdDQiIGQ9Ik04OC43LDE1My45Yy01LjYsMC0xMC0yLTEyLjktNmMtMi44LTQtNC40LTkuNi00LjQtMTYuNWMwLTE1LjMsNS42LTIyLjksMTcuMy0yMi45YzIuNCwwLDQuOCwwLjgsNy42LDIuNAoJYzIuOCwxLjYsNC44LDQsNi44LDhsMTcuMy04LjhjLTYuOC0xMi40LTE4LjUtMTguNS0zNC4xLTE4LjVjLTEwLjgsMC0xOS43LDMuNi0yNi45LDEwLjhjLTcuMiw3LjItMTAuOCwxNi45LTEwLjgsMjkuMwoJUzUyLjIsMTU0LjIsNTksMTYxYzcuMiw3LjIsMTYuNSwxMC40LDI3LjcsMTAuNGM3LjIsMCwxMy43LTEuNiwxOS43LTUuMnMxMC40LTguNCwxNC4xLTE0LjlsLTE1LjctOAoJQzEwMS42LDE0OS44LDk2LjMsMTUzLjksODguNywxNTMuOXoiLz4KPC9zdmc+Cg==");
}