/* variables */
:root {
    --color-tools-color: rgba(50, 50, 50, 1);
    --color-spec-color: rgba(178, 26, 54, 1);
    --color-quality-and-correct-color: rgba(231, 98, 160, 1);
    --color-match-color: rgba(239, 121, 76, 1);
    --hub-color: rgba(251, 212, 29, 1);
    --color-tint-color: rgba(163, 198, 70, 1);
    --color-quality-color: rgba(71, 185, 178, 1);
    --analytics-color: rgba(66, 49, 110, 1);
    --color-viz-color: var(--color-viz-color);
}

/* ReSharper disable RequiresFallbackColor */
@font-face {
    font-family: 'Roboto-Light';
    src: url('fonts/Roboto/Roboto-Light.ttf?v=4.3.0') format('truetype');
}

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

body {
    background-color: transparent;
    font-family: 'Roboto-Light', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #000000;
    height: 100%;
    min-width: 350px;
    /* Selection will be disable by default*/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

.mosaic-selectable {
    -webkit-touch-callout: default; /* iOS Safari */
    -webkit-user-select: text;   /* Chrome/Safari/Opera */
    -khtml-user-select: text;    /* Konqueror */
    -moz-user-select: text;      /* Firefox */
    -ms-user-select: text;       /* Internet Explorer/Edge */
    user-select: text;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

.mosaic-main-container {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.mosaic-main-container .content {
    height: calc(100% - 72px);
    height: -moz-calc(100% - 72px);
    height: -webkit-calc(100% - 72px);
    height: calc(100% - 72px);
}

.mosaic-main-background {
    background-color: #EBEBEB;
    background: white url("images/box-gray-v4.svg");
    background-size: 400px 400px;
}

/* NavBar */

.navbar-nav > li > a {
    padding-top: 4px;
    padding-bottom:0 !important;
    padding-right: 15px;
    padding-left: 15px;
    height: 100% !important;
    font-size:12px;
}

.mosaic-navbar {
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-bottom: 1px solid rgba(196, 196, 196, 1);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    min-height: 50px !important;
}

.mosaic-sub-navbar {
    background-color: transparent;
    border: none;
    margin-bottom: 10px;
    min-height: 40px !important;
}

.mosaic-sub-navbar ul li {
    height: 40px;
}

.mosaic-sub-navbar ul li a{
    height: 40px;
}

.mosaic-navbar-module-title {
    margin-left: 2px;
}

.navbar-default .navbar-nav > .dropdown-right:last-child > a >div{
    height: 18px;
}

/* COLORS */
.color-spec-color {
    color: var(--color-spec-color);
}
.color-match-color {
    color: var(--color-match-color);
}
.color-quality-color {
    color: var(--color-quality-color);
}
.color-tint-color {
    color: var(--color-tint-color);
}
.color-viz-color {
    color: var(--color-viz-color);
}
.general-color {
    color: var(--color-tools-color);
}
.color-quality-and-correct-color {
    color: var(--color-quality-and-correct-color);
}
.hub-color {
    color: var(--hub-color);
}
analytics-color {
    color: var(--analytics-color);
}

/* Blocks */
.mosaic-block {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-tools-color);
    fill: var(--color-tools-color);
}

.colibri-color-spec .mosaic-block {
    background-color: var(--color-spec-color);
    fill: var(--color-spec-color);
}

.colibri-color-match .mosaic-block {
    background-color: var(--color-match-color);
    fill: var(--color-match-color);
}

.colibri-color-quality .mosaic-block {
    background-color: var(--color-quality-color);
    fill: var(--color-quality-color);
}

.colibri-color-tint .mosaic-block {
    background-color: var(--color-tint-color);
    fill: var(--color-tint-color);
}

.colibri-color-viz .mosaic-block {
    background-color: var(--color-viz-color);
    fill: var(--color-viz-color);
}

.colibri-color-quality-and-correct .mosaic-block {
    background-color: var(--color-quality-and-correct-color);
    fill: var(--color-quality-and-correct-color);
}

.colibri-analytics .mosaic-block {
    background-color: var(--analytics-color);
    fill: var(--analytics-color);
}

.colibri-hub {
    background-color: var(--hub-color);
    fill: var(--hub-color);
}

.mosaic-block-gray {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: rgba(196, 196, 196, 1);
    fill: rgba(196, 196, 196, 1);
}

.mosaic-block-red {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-spec-color);
    fill: var(--color-spec-color);
}

.mosaic-block-orange {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-match-color);
    fill: var(--color-match-color);
}

.mosaic-block-turquoise {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-quality-color);
    fill: var(--color-quality-color);
}

.mosaic-block-green {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-tint-color);
    fill: var(--color-tint-color);
}

.mosaic-block-blue {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-viz-color);
    fill: var(--color-viz-color);
}

.mosaic-block-empty {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-tools-color);
}

.colibri-color-spec .mosaic-block-empty {
    border: 1px solid var(--color-spec-color);
}

.colibri-color-match .mosaic-block-empty {
    border: 1px solid var(--color-match-color);
}

.colibri-color-quality .mosaic-block-empty {
    border: 1px solid var(--color-quality-color);
}

.colibri-color-tint .mosaic-block-empty {
    border: 1px solid var(--color-tint-color);
}

.colibri-color-quality-and-correct .mosaic-block {
    border: 1px solid var(--color-quality-and-correct-color);
}

.colibri-analytics .mosaic-block {
    border: 1px solid var(--analytics-color);
}

.colibri-hub {
    border: 1px solid var(--hub-color);
}

.colibri-color-viz .mosaic-block-empty {
    border: 1px solid var(--color-viz-color);
}

.mosaic-block-empty-gray {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(196, 196, 196, 1);
}

.mosaic-block-empty-red {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-spec-color);
}

.mosaic-block-empty-orange {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-match-color);
}

.mosaic-block-empty-turquoise {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-quality-color);
}

.mosaic-block-empty-green {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-tint-color);
}

.mosaic-block-empty-blue {
    /*position: absolute;*/
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-viz-color);
}

.mosaic-block-div,
.mosaic-block-div-dark-gray {
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-tools-color);
}

.mosaic-block-div-gray {
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: rgba(196, 196, 196, 1);
}

.mosaic-block-div-white {
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: #ffffff;
}

.colibri-color-spec .mosaic-block-div {
    background-color: var(--color-spec-color);
}

.mosaic-block-div-red {
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-spec-color);
}

.colibri-color-match .mosaic-block-div {
    background-color: var(--color-match-color);
}

.mosaic-block-div-orange {
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-match-color);
}

.colibri-color-quality .mosaic-block-div {
    background-color: var(--color-quality-color);
}

.mosaic-block-div-turquoise {
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-quality-color);
}

.colibri-color-tint .mosaic-block-div {
    background-color: var(--color-tint-color);
}

.mosaic-block-div-green {
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-tint-color);
}

.colibri-color-viz .mosaic-block-div {
    background-color: var(--color-viz-color);
}

.mosaic-block-div-blue {
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
    width: 8px;
    height: 8px;
    overflow: hidden;
    background-color: var(--color-viz-color);
}

.mosaic-block-empty-div,
.mosaic-block-empty-div-dark-gray {
    display: block;
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-tools-color);
}

.mosaic-block-empty-div-gray {
    display: block;
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid rgba(196, 196, 196, 1);
}

.colibri-color-spec .mosaic-block-empty-div {
    border: 1px solid var(--color-spec-color);
}

.mosaic-block-empty-div-red {
    display: block;
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-spec-color);
}

.colibri-color-match .mosaic-block-empty-div {
    border: 1px solid var(--color-match-color);
}

.mosaic-block-empty-div-orange {
    display: block;
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-match-color);
}

.colibri-color-quality .mosaic-block-empty-div {
    border: 1px solid var(--color-quality-color);
}

.mosaic-block-empty-div-turquoise {
    display: block;
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-quality-color);
}

.colibri-color-tint .mosaic-block-empty-div {
    border: 1px solid var(--color-tint-color);
}

.mosaic-block-empty-div-green {
    display: block;
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-tint-color);
}

.colibri-color-viz .mosaic-block-empty-div {
    border: 1px solid var(--color-viz-color);
}

.mosaic-block-empty-div-blue {
    display: block;
    width: 8px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--color-viz-color);
}

/* Colors */
.light-gray {
    background-color: rgba(230, 230, 230, 1);
    fill: rgba(230, 230, 230, 1);
}

.gray {
    background-color: rgba(196, 196, 196, 1);
    fill: rgba(196, 196, 196, 1);
}

.dark-gray {
    background-color: var(--color-tools-color);
    fill: var(--color-tools-color);
}

.turquoise {
    background-color: var(--color-quality-color);
    fill: var(--color-quality-color);
}

.orange {
    background-color: var(--color-match-color);
    fill: var(--color-match-color);
}

.red {
    background-color: var(--color-spec-color);
    fill: var(--color-spec-color);
}

.green {
    background-color: var(--color-tint-color);
    fill: var(--color-tint-color);
}

.blue {
    background-color: var(--color-viz-color);
    fill: var(--color-viz-color);
}

/* file upload input - button style */
input[type="file"] {
    display: none;
}
.mosaic-file {
    height: 30px; /* same as mosaic-button */
    position: relative;
    overflow: hidden;
}
.mosaic-file input[type=file] {
    display: initial;
    position: absolute;
    top: 0;
    right: 0;
    /*min-width: 100%;
    min-height: 100%;*/
    height: 1em;
    width: 1em;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    color: #000000;
}

/* Buttons */
.mosaic-button,
button,
.mosaic-file-upload {
    height: 30px;
    border: 1px solid var(--color-tools-color);
    background-color: var(--color-tools-color);
    padding: 5px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 300;
    border-radius: 0;
    /*
    font-variant: small-caps;
    */
    cursor: pointer;
    white-space: nowrap;
}

.mosaic-button, button, .btn, .btn-default, .btn-info {
	
}

.btn, .btn-default, .btn-info {
    line-height: 0;
    height: 22px;
    border: 1px solid var(--color-tools-color);
    background-color: var(--color-tools-color);
    padding: 5px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 300;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
}

.colibri-color-spec .mosaic-button,
.colibri-color-spec button,
.colibri-color-spec .btn, 
.colibri-color-spec .btn-default, 
.colibri-color-spec .btn-info,
.colibri-color-spec .mosaic-file-upload {
    border: 1px solid var(--color-spec-color);
    background-color: var(--color-spec-color);
}

.colibri-color-match .mosaic-button,
.colibri-color-match button,
.colibri-color-match .btn, 
.colibri-color-match .btn-default, 
.colibri-color-match .btn-info,
.colibri-color-match .mosaic-file-upload {
    border: 1px solid var(--color-match-color);
    background-color: var(--color-match-color);
}

.colibri-color-quality .mosaic-button,
.colibri-color-quality button,
.colibri-color-quality .btn, 
.colibri-color-quality .btn-default, 
.colibri-color-quality .btn-info,
.colibri-color-quality .mosaic-file-upload {
    border: 1px solid var(--color-quality-color);
    background-color: var(--color-quality-color);
}

.colibri-color-tint .mosaic-button,
.colibri-color-tint button,
.colibri-color-tint .btn, 
.colibri-color-tint .btn-default, 
.colibri-color-tint .btn-info,
.colibri-color-tint .mosaic-file-upload {
    border: 1px solid var(--color-tint-color);
    background-color: var(--color-tint-color);
}

.colibri-color-viz .mosaic-button,
.colibri-color-viz button,
.colibri-color-viz .btn, 
.colibri-color-viz .btn-default,
.colibri-color-viz .btn-info,
.colibri-color-viz .mosaic-file-upload {
    border: 1px solid var(--color-viz-color);
    background-color: var(--color-viz-color);
}

.colibri-hub .mosaic-button,
.colibri-hub button,
.colibri-hub .btn,
.colibri-hub .btn-default,
.colibri-hub .btn-info,
.colibri-hub .mosaic-file-upload {
    border: 1px solid var(--hub-color);
    background-color: var(--hub-color);
}

.colibri-analytics .mosaic-button,
.colibri-analytics button,
.colibri-analytics .btn,
.colibri-analytics .btn-default,
.colibri-analytics .btn-info,
.colibri-analytics .mosaic-file-upload {
    border: 1px solid var(--analytics-color);
    background-color: var(--analytics-color);
}

.colibri-color-quality-and-correct .mosaic-button,
.colibri-color-quality-and-correct button,
.colibri-color-quality-and-correct .btn,
.colibri-color-quality-and-correct .btn-default,
.colibri-color-quality-and-correct .btn-info,
.colibri-color-quality-and-correct .mosaic-file-upload {
    border: 1px solid var(--color-quality-and-correct-color);
    background-color: var(--color-quality-and-correct-color);
}

.mosaic-button:hover,
button:hover,
.btn:hover, 
.btn-default:hover, 
.btn-info:hover,
.bootstrap-touchspin .btn:hover,
.mosaic-file-upload:hover {
    box-shadow:none;
    outline: none;
    text-decoration: none;
    background-color: var(--color-tools-color);
    color: rgba(196, 196, 196, 1);
}

.colibri-color-spec .mosaic-button:hover,
.colibri-color-spec .btn:hover, 
.colibri-color-spec .btn-default:hover, 
.colibri-color-spec .btn-info:hover,
.colibri-color-spec button:hover,
.colibri-color-spec .bootstrap-touchspin .btn:hover,
.colibri-color-spec .mosaic-file-upload:hover {
    color: rgba(196, 196, 196, 1);
    background-color: var(--color-spec-color);
}

.colibri-color-match .mosaic-button:hover,
.colibri-color-match .btn:hover, 
.colibri-color-match .btn-default:hover, 
.colibri-color-match .btn-info:hover,
.colibri-color-match button:hover,
.colibri-color-match .bootstrap-touchspin .btn:hover,
.colibri-color-match .mosaic-file-upload:hover {
    color: var(--color-tools-color);
    background-color: var(--color-match-color);
}

.colibri-color-quality .mosaic-button:hover,
.colibri-color-quality .btn:hover, 
.colibri-color-quality .btn-default:hover, 
.colibri-color-quality .btn-info:hover,
.colibri-color-quality button:hover,
.colibri-color-quality .bootstrap-touchspin .btn:hover,
.colibri-color-quality .mosaic-file-upload:hover {
    color: var(--color-tools-color);
    background-color: var(--color-quality-color);
}

.colibri-color-tint .mosaic-button:hover,
.colibri-color-tint .btn:hover, 
.colibri-color-tint .btn-default:hover, 
.colibri-color-tint .btn-info:hover,
.colibri-color-tint button:hover,
.colibri-color-tint .bootstrap-touchspin .btn:hover,
.colibri-color-tint .mosaic-file-upload:hover {
    color: var(--color-tools-color);
    background-color: var(--color-tint-color);
}

.colibri-color-viz .mosaic-button:hover,
.colibri-color-viz .btn:hover, 
.colibri-color-viz .btn-default:hover, 
.colibri-color-viz .btn-info:hover,
.colibri-color-viz button:hover,
.colibri-color-viz .bootstrap-touchspin .btn:hover,
.colibri-color-viz .mosaic-file-upload:hover {
    color: rgba(196, 196, 196, 1);
    background-color: var(--color-viz-color);
}

.colibri-hub .mosaic-button:hover,
.colibri-hub.btn:hover,
.colibri-hub .btn-default:hover,
.colibri-hub .btn-info:hover,
.colibri-hub button:hover,
.colibri-hub .bootstrap-touchspin .btn:hover,
.colibri-hub .mosaic-file-upload:hover {
    color: rgba(196, 196, 196, 1);
    background-color: var(--hub-color);
}

.colibri-analytics .mosaic-button:hover,
.colibri-analytics .btn:hover,
.colibri-analytics .btn-default:hover,
.colibri-analytics .btn-info:hover,
.colibri-analytics button:hover,
.colibri-analytics .bootstrap-touchspin .btn:hover,
.colibri-analytics .mosaic-file-upload:hover {
    color: rgba(196, 196, 196, 1);
    background-color: var(--analytics-color);
}

.colibri-color-quality-and-correct .mosaic-button:hover,
.colibri-color-quality-and-correct .btn:hover,
.colibri-color-quality-and-correct .btn-default:hover,
.colibri-color-quality-and-correct .btn-info:hover,
.colibri-color-quality-and-correct button:hover,
.colibri-color-quality-and-correct .bootstrap-touchspin .btn:hover,
.colibri-color-quality-and-correct .mosaic-file-upload:hover {
    color: rgba(196, 196, 196, 1);
    background-color: var(--color-quality-and-correct-color);
}

button:focus, 
.mosaic-button-focus, 
.btn:focus, 
.btn-default:focus, 
.btn-info:focus,
.bootstrap-touchspin .btn:focus,
.mosaic-file-upload:focus {
    box-shadow:none;
    outline: none;
    text-decoration: none;
    background-color: var(--color-tools-color);
    color: rgba(196, 196, 196, 1);
}

.colibri-color-spec .mosaic-button:focus, 
.colibri-color-spec .btn:focus, 
.colibri-color-spec .btn-default:focus, 
.colibri-color-spec .btn-info:focus,
.colibri-color-spec button:focus,
.colibri-color-spec .bootstrap-touchspin .btn:focus,
.colibri-color-spec .mosaic-file-upload:focus {
    color: rgba(196, 196, 196, 1);
    background-color: var(--color-spec-color);
}

.colibri-color-match .mosaic-button:focus, 
.colibri-color-match .btn:focus, 
.colibri-color-match .btn-default:focus, 
.colibri-color-match .btn-info:focus,
.colibri-color-match button:focus,
.colibri-color-match .bootstrap-touchspin .btn:focus,
.colibri-color-match .mosaic-file-upload:focus {
    color: var(--color-tools-color);
    background-color: var(--color-match-color);
}

.colibri-color-quality .mosaic-button:focus,
.colibri-color-quality .btn:focus, 
.colibri-color-quality .btn-default:focus, 
.colibri-color-quality .btn-info:focus,
.colibri-color-quality button:focus,
.colibri-color-quality .bootstrap-touchspin .btn:focus,
.colibri-color-quality .mosaic-file-upload:focus {
    color: var(--color-tools-color);
    background-color: var(--color-quality-color);
}

.colibri-color-tint .mosaic-button:focus, 
.colibri-color-tint .btn:focus, 
.colibri-color-tint .btn-default:focus, 
.colibri-color-tint .btn-info:focus,
.colibri-color-tint button:focus,
.colibri-color-tint .bootstrap-touchspin .btn:focus,
.colibri-color-tint .mosaic-file-upload:focus {
    color: var(--color-tools-color);
    background-color: var(--color-tint-color);
}

.colibri-color-viz .mosaic-button:focus, 
.colibri-color-viz .btn:focus, 
.colibri-color-viz .btn-default:focus, 
.colibri-color-viz .btn-info:focus,
.colibri-color-viz button:focus,
.colibri-color-viz .bootstrap-touchspin .btn:focus,
.colibri-color-viz .mosaic-file-upload:focus {
    color: rgba(196, 196, 196, 1);
    background-color: var(--color-viz-color);
}

.colibri-hub .mosaic-button:focus,
.colibri-hub .btn:focus,
.colibri-hub .btn-default:focus,
.colibri-hub .btn-info:focus,
.colibri-hub button:focus,
.colibri-hub .bootstrap-touchspin .btn:focus,
.colibri-hub .mosaic-file-upload:focus {
    color: rgba(196, 196, 196, 1);
    background-color: var(--hub-color);
}

.colibri-analytics .mosaic-button:focus,
.colibri-analytics .btn:focus,
.colibri-analytics .btn-default:focus,
.colibri-analytics .btn-info:focus,
.colibri-analytics button:focus,
.colibri-analytics .bootstrap-touchspin .btn:focus,
.colibri-analytics .mosaic-file-upload:focus {
    color: rgba(196, 196, 196, 1);
    background-color: var(--analytics-color);
}

.colibri-color-quality-and-correct .mosaic-button:focus,
.colibri-color-quality-and-correct .btn:focus,
.colibri-color-quality-and-correct .btn-default:focus,
.colibri-color-quality-and-correct .btn-info:focus,
.colibri-color-quality-and-correct button:focus,
.colibri-color-quality-and-correct .bootstrap-touchspin .btn:focus,
.colibri-color-quality-and-correct .mosaic-file-upload:focus {
    color: rgba(196, 196, 196, 1);
    background-color: var(--color-quality-and-correct-color);
}

.mosaic-button label {
    font-weight: normal;
    cursor: pointer;
}

.mosaic-button input[type=file] {
    border: none;
    background-color: transparent;
}

.mosaic-button[disabled],
.mosaic-button[disabled]:hover,
.mosaic-button[disabled]:focus,
.mosaic-button[disabled]:active,
.mosaic-file-upload[disabled],
.mosaic-file-upload[disabled]:hover,
.mosaic-file-upload[disabled]:focus,
.mosaic-file-upload[disabled]:active {
    cursor: default;
    pointer-events: none;
    /*color: #c0c0c0;*/
    color: GrayText;
    background-color: #dddddd;
    border: 1px outset ButtonFace;
    opacity: 0.5;
}

button:disabled,
.btn:disabled, 
.btn-default:disabled, 
.btn-info:disabled {
    cursor: default;
    pointer-events: none;
    /*color: #c0c0c0;*/
    color: GrayText;
    background-color: #dddddd;
    border: 1px outset ButtonFace;
}

.mosaic-button-small {
    height: 21px;
    line-height: 0;
}

/* Widgets */
.mosaic-widget {
    /*margin: 10px;*/
    position: relative;
    height: 100%;
    padding:4px;
    border-style: solid;
    border-color: rgba(196, 196, 196, 1);
    border-width: 1px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.75);
}

.mosaic-widget-no-border {
    height: 100%;
    border: none;
    overflow: hidden;
    margin: 1px 4px;
}

.mosaic-widget-header {
    background-color: rgba(255, 255, 255, 0.5) ;
    height: 48px;
    border-style: solid;
    border-color: rgba(196, 196, 196, 1);
    border-width: 1px;
    padding:8px;
    white-space: nowrap;
}

.mosaic-widget-header-content {
    width: 100%;
    text-align: left;
    margin: 5px;
}

.mosaic-widget-header-content .title{
    display: inline;
    height: 100%;
    font-size: 20px;
    padding: 0;
    margin: 3px 0 0;
}

.mosaic-widget-header-left {
    float: left;
    text-align: left;
    /*background-color: lightgreen;*/
    width: 30px;
}

.mosaic-widget-header-middle {
    text-align: left;
    height: 100%;
    margin-left: 35px;
    margin-right: 35px;
    /*background-color: lightblue;*/
}

.mosaic-widget-header-middle .title {
    display: inline;
    height: 100%;
    font-size: 20px;
    padding: 0;
    margin: 3px 10px 0;
}

.mosaic-widget-header-right {
    float: right;
    /*background-color: lightcoral;*/
    width: 30px;
    margin-top: -30px;
}

.mosaic-widget-content {
    padding-top: 5px;
}


/* Sub-Widgets */
.mosaic-sub-widget {
    position: relative;
    border: 1px solid rgba(196, 196, 196, 1);
    background-color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    height: 100%;
    width: 100%;
}
.mosaic-sub-widget .mosaic-sub-widget-header {
    margin: 10px 10px 0;
    padding: 0 0 5px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid rgba(196, 196, 196, 1);
}
.mosaic-sub-widget .mosaic-sub-widget-header .mosaic-block-div-group-top {
    position: absolute;
    top: 2px;
    right: 0;
}
.mosaic-sub-widget .mosaic-sub-widget-header .mosaic-block-div-group-top .block1 {
    position: absolute;
    top: 0;
    right: 0;
}
.mosaic-sub-widget .mosaic-sub-widget-header .mosaic-block-div-group-top .block2 {
    position: absolute;
    top: 0;
    right: 10px;
}
.mosaic-sub-widget .mosaic-sub-widget-header .mosaic-block-div-group-top .block3 {
    position: absolute;
    top: 10px;
    right: 0;
}
.mosaic-sub-widget .mosaic-sub-widget-header .mosaic-sub-widget-title {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.mosaic-sub-widget .mosaic-sub-widget-content {
    height: 100%;
    width: 100%;
    padding: 10px 15px 15px;
}
.mosaic-sub-widget .mosaic-block-div-group-bottom-left {
    position: absolute;
    bottom: 2px;
    left: 0;
}
.mosaic-sub-widget .mosaic-block-div-group-bottom-left .block1 {
    position: absolute;
    bottom: 0;
    left: 10px;
}
.mosaic-sub-widget .mosaic-block-div-group-bottom-left .block2 {
    position: absolute;
    bottom: 0;
    left: 0;
}
.mosaic-sub-widget .mosaic-block-div-group-bottom-left .block3 {
    position: absolute;
    bottom: 10px;
    left: 0;
}

.mosaic-sub-widget .mosaic-block-div-group-bottom-right {
    position: absolute;
    bottom: 2px;
    right: 0;
}
.mosaic-sub-widget .mosaic-block-div-group-bottom-right .block1 {
    position: absolute;
    bottom: 0;
    right: 10px;
}
.mosaic-sub-widget .mosaic-block-div-group-bottom-right .block2 {
    position: absolute;
    bottom: 0;
    right: 0;
}
.mosaic-sub-widget .mosaic-block-div-group-bottom-right .block3 {
    position: absolute;
    bottom: 10px;
    right: 0;
}

#AllSettingsDropdownMenu{
    overflow: visible;
}


/* Global Settings */
.global-settings-style .mosaic-widget .mosaic-widget-header {
    display: flex;
    white-space: normal;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.global-settings-style .mosaic-widget .mosaic-widget-header .mosaic-widget-header-left {
    align-self: flex-start;
}

.global-settings-style .mosaic-widget .mosaic-widget-header .mosaic-widget-header-middle {
    margin-left: 0;
    align-self: flex-start;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 200px; 
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.global-settings-style .mosaic-widget .mosaic-widget-header .mosaic-widget-header-middle .title {
    width: 100%;
    overflow: hidden;
}

.global-settings-style .mosaic-widget .mosaic-widget-header .mosaic-widget-header-right {
    margin-top: 0;
    margin-left: auto;
    float: none;
    display: flex;
    align-self: flex-end;
}

.global-settings-style .mosaic-widget .mosaic-widget-header .mosaic-widget-header-right .form-group {
    display: flex;
    margin-right: 10px;
    margin-top: 4px;
}

.global-settings-style .mosaic-widget .mosaic-widget-header .mosaic-widget-header-right .form-group label {
    margin-right: 8px;
    margin-top: 2px;
}

/* Others */
.mosaic-title {
    font-size: 34px;
}

.mosaic-sub-title {
    color: rgba(196, 196, 196, 1);
    font-size: 18px;
}

.pointer{
    cursor: pointer;
}

input,
textarea,
select,
.input-group .form-control, 
.form-group .form-control,
.input-group-addon {
    /*
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    */
    /*border: 1px solid rgba(196, 196, 196, 1);*/
    border: 1px solid var(--color-tools-color);
    border-radius: 0;
    background-color: #ffffff;
    padding: 1px 4px;
    height: 22px;
    font-size: 12px;
    line-height: normal;
    font-family: 'Roboto-Light', sans-serif;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #000000;
}

.has-error .form-control{
    border: 1px solid #ccc;
}


input:disabled,
textarea:disabled,
select:disabled,
.input-group .form-control:disabled,
input:disabled:hover,
textarea:disabled:hover,
select:disabled:hover,
.input-group .form-control:disabled:hover {
    background: rgba(100, 100, 100, 0.3);
}

.form-group .form-control {
    padding-top: 0;
    padding-bottom: 0;
}

.colibri-color-spec input,
.colibri-color-spec textarea,
.colibri-color-spec select,
.colibri-color-spec .input-group .form-control {
    border: 1px solid var(--color-spec-color);
}

.colibri-color-match input,
.colibri-color-match textarea,
.colibri-color-match select,
.colibri-color-match .input-group .form-control {
    border: 1px solid var(--color-match-color);
}

.colibri-color-quality input,
.colibri-color-quality textarea,
.colibri-color-quality select,
.colibri-color-quality .input-group .form-control,
.input-group-addon{
    border: 1px solid var(--color-quality-color);
    width: inherit;
}

.colibri-color-tint input,
.colibri-color-tint textarea,
.colibri-color-tint select,
.colibri-color-tint .input-group .form-control {
    border: 1px solid var(--color-tint-color);
}

.colibri-color-viz input,
.colibri-color-viz textarea,
.colibri-color-viz select,
.colibri-color-viz .input-group .form-control{
    border: 1px solid var(--color-viz-color);
}

.colibri-hub input,
.colibri-hub textarea,
.colibri-hub select,
.colibri-hub .input-group .form-control{
    border: 1px solid var(--hub-color);
}

.colibri-analytics input,
.colibri-analytics textarea,
.colibri-analytics select,
.colibri-analytics .input-group .form-control{
    border: 1px solid var(--analytics-color);
}

.colibri-color-quality-and-correct input,
.colibri-color-quality-and-correct textarea,
.colibri-color-quality-and-correct select,
.colibri-color-quality-and-correct .input-group .form-control{
    border: 1px solid var(--color-quality-and-correct-color);
}

input:focus,
select:focus,
textarea:focus,
.input-group .form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    background-color: #ffffff;

    /*outline: none;*/
    /*outline-style:none;*/
    outline-width: 1px;
    outline-style: solid;
    outline-color: var(--color-tools-color);
    border: 1px solid var(--color-tools-color);
    color: #000000;
}

.colibri-color-spec input:focus,
.colibri-color-spec select:focus,
.colibri-color-spec textarea:focus,
.colibri-color-spec .input-group .form-control:focus {
    /*box-shadow: 0 0 5px var(--color-spec-color);*/
    outline-color: var(--color-spec-color);
    border: 1px solid var(--color-spec-color);
}

.colibri-color-match input:focus,
.colibri-color-match select:focus,
.colibri-color-match textarea:focus,
.colibri-color-match .input-group .form-control:focus {
    /*box-shadow: 0 0 5px var(--color-match-color);*/
    outline-color: var(--color-match-color);
    border: 1px solid var(--color-match-color);
}

.colibri-color-quality input:focus,
.colibri-color-quality select:focus,
.colibri-color-quality textarea:focus,
.colibri-color-quality .input-group .form-control:focus {
    /*box-shadow: 0 0 5px var(--color-quality-color);*/
    outline-color: var(--color-quality-color);
    border: 1px solid var(--color-quality-color);
}

.colibri-color-tint input:focus,
.colibri-color-tint select:focus,
.colibri-color-tint textarea:focus,
.colibri-color-tint .input-group .form-control:focus {
    /*box-shadow: 0 0 5px var(--color-tint-color);*/
    outline-color: var(--color-tint-color);
    border: 1px solid var(--color-tint-color);
}

.colibri-color-viz input:focus,
.colibri-color-viz select:focus,
.colibri-color-viz textarea:focus,
.colibri-color-viz .input-group .form-control:focus {
    /*box-shadow: 0 0 5px var(--color-viz-color);*/
    outline-color: var(--color-viz-color);
    border: 1px solid var(--color-viz-color);
}

.colibri-hub input:focus,
.colibri-hub select:focus,
.colibri-hub textarea:focus,
.colibri-hub .input-group .form-control:focus {
    /*box-shadow: 0 0 5px var(--color-viz-color);*/
    outline-color: var(--hub-color);
    border: 1px solid var(--hub-color);
}

.colibri-analytics input:focus,
.colibri-analytics select:focus,
.colibri-analytics textarea:focus,
.colibri-analytics .input-group .form-control:focus {
    /*box-shadow: 0 0 5px var(--color-viz-color);*/
    outline-color: var(--analytics-color);
    border: 1px solid var(--analytics-color);
}

.colibri-color-quality-and-correct input:focus,
.colibri-color-quality-and-correct select:focus,
.colibri-color-quality-and-correct textarea:focus,
.colibri-color-quality-and-correct .input-group .form-control:focus {
    /*box-shadow: 0 0 5px var(--color-viz-color);*/
    outline-color: var(--color-quality-and-correct-color);
    border: 1px solid var(--color-quality-and-correct-color);
}

input:hover,
input[type=hover],
textarea:hover,
select:hover,
.input-group .form-control:hover {
    outline-width: 1px;
    outline-style: solid;
    outline-color: var(--color-tools-color);
    box-shadow:none;
    border-radius: 0;
    background-color: #ffffff;
    border: 1px solid var(--color-tools-color);
    color: #000000;
}

.colibri-color-spec input:hover,
.colibri-color-spec input[type=hover],
.colibri-color-spec textarea:hover,
.colibri-color-spec select:hover,
.colibri-color-spec .input-group .form-control:hover {
    outline-color: var(--color-spec-color);
    border: 1px solid var(--color-spec-color);
}

.colibri-color-match input:hover,
.colibri-color-match input[type=hover],
.colibri-color-match textarea:hover,
.colibri-color-match select:hover,
.colibri-color-match .input-group .form-control:hover {
    outline-color: var(--color-match-color);
    border: 1px solid var(--color-match-color);
}

.colibri-color-quality input:hover,
.colibri-color-quality input[type=hover],
.colibri-color-quality textarea:hover,
.colibri-color-quality select:hover,
.colibri-color-quality .input-group .form-control:hover {
    outline-color: var(--color-quality-color);
    border: 1px solid var(--color-quality-color);
}

.colibri-color-tint input:hover,
.colibri-color-tint input[type=hover],
.colibri-color-tint textarea:hover,
.colibri-color-tint select:hover,
.colibri-color-tint .input-group .form-control:hover {
    outline-color: var(--color-tint-color);
    border: 1px solid var(--color-tint-color);
}

.colibri-color-viz input:hover,
.colibri-color-viz input[type=hover],
.colibri-color-viz textarea:hover,
.colibri-color-viz select:hover,
.colibri-color-viz .input-group .form-control:hover {
    outline-color: var(--color-viz-color);
    border: 1px solid var(--color-viz-color);
}

.colibri-hub input:hover,
.colibri-hub input[type=hover],
.colibri-hub textarea:hover,
.colibri-hub select:hover,
.colibri-hub .input-group .form-control:hover {
    outline-color: var(--hub-color);
    border: 1px solid var(--hub-color);
}

.colibri-analytics input:hover,
.colibri-analytics input[type=hover],
.colibri-analytics textarea:hover,
.colibri-analytics select:hover,
.colibri-analytics .input-group .form-control:hover {
    outline-color: var(--analytics-color);
    border: 1px solid var(--analytics-color);
}

.colibri-color-quality-and-correct input:hover,
.colibri-color-quality-and-correct input[type=hover],
.colibri-color-quality-and-correct textarea:hover,
.colibri-color-quality-and-correct select:hover,
.colibri-color-quality-and-correct .input-group .form-control:hover {
    outline-color: var(--color-quality-and-correct-color);
    border: 1px solid var(--color-quality-and-correct-color);
}

input:hover,
input[type=hover],
textarea:hover,
select:hover,
.input-group .form-control:hover{
    outline: none;
    border: 1px solid rgb(169, 169, 169);
    color: #000000;
}

.date-picker-input {
    width: 50%;
}

.mosaic-checkbox input[type=checkbox] {
    display:none;
}

.mosaic-checkbox input[type=checkbox] + span {
    display:inline-block;
    width:8px;
    height:8px;
    background-color: rgba(196, 196, 196, 1);
}

.mosaic-checkbox input[type=checkbox]:disabled + span {
    border: 2px solid rgba(196, 196, 196, 1);
    background-color: white;
}

.mosaic-checkbox input[type=checkbox]:disabled ~ .text {
    color: rgba(196, 196, 196, 1);
}

.mosaic-checkbox .leftAligned .text {
    margin-left: 3px;
    display: inline-block;
}

.mosaic-checkbox .rightAligned .text {
    margin-right: 3px;
    display: inline-block;
}

.mosaic-checkbox .bold {
    font-weight: bold;
}

.mosaic-checkbox label {
    cursor: pointer;
    margin-bottom: 3px;
    font-weight: normal;
}

.mosaic-checkbox input[type=checkbox]:checked + span  {
    background-color: var(--color-tools-color);
}

.colibri-color-spec .mosaic-checkbox input[type=checkbox]:checked + span  {
    background-color: var(--color-spec-color);
}

.colibri-color-match .mosaic-checkbox input[type=checkbox]:checked + span  {
    background-color: var(--color-match-color);
}

.colibri-color-quality .mosaic-checkbox input[type=checkbox]:checked + span  {
    background-color: var(--color-quality-color);
}

.colibri-color-tint .mosaic-checkbox input[type=checkbox]:checked + span  {
    background-color: var(--color-tint-color);
}

.colibri-color-viz .mosaic-checkbox input[type=checkbox]:checked + span  {
    background-color: var(--color-viz-color);
}

.colibri-hub .mosaic-checkbox input[type=checkbox]:checked + span  {
    background-color: var(--hub-color);
}

.colibri-analytics .mosaic-checkbox input[type=checkbox]:checked + span  {
    background-color: var(--analytics-color);
}

.colibri-color-quality-and-correct .mosaic-checkbox input[type=checkbox]:checked + span  {
    background-color: var(--color-quality-and-correct-color);
}

.mosaic-radio input[type=radio] {
    display:none;
}

.mosaic-radio .leftAligned input[type=radio] + span {
    width: 8px;
    height: 8px;
    background-color: rgba(196, 196, 196, 1);
    position: absolute;
    top: 5px;
    left: 0;
}

.mosaic-radio .rightAligned input[type=radio] + span {
    width: 8px;
    height: 8px;
    background-color: rgba(196, 196, 196, 1);
    position: absolute;
    top: 5px;
    right: 0;
}

.mosaic-radio .leftAligned .text {
    width: calc(100% - 13px);
    margin-left: 3px;
    position: absolute;
    left: 10px;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.mosaic-radio .rightAligned .text {
    width: calc(100% - 13px);
    margin-right: 3px;
    position: absolute;
    right: 10px;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
}

.mosaic-radio .selected {
    font-weight: bold;
    color: black;
}

.mosaic-radio label {
    height: 17px;
    position: relative;
    width: 100%;
    cursor: pointer;
    margin-bottom: 0;
    font-weight: normal;
}

.mosaic-radio input[type=radio]:checked + span {
    background-color: var(--color-tools-color);
}

.mosaic-radio .text.radio-not-valid {
    color: rgba(255, 0, 0, 1);
}

.mosaic-radio .mosaic-element.radio-not-valid {
    border: 1px solid rgba(255, 0, 0, 1);
}

.mosaic-radio .text {
    display: inline-block;
    width: auto!important;
}

.colibri-color-spec .mosaic-radio input[type=radio]:checked + span {
    background-color: var(--color-spec-color);
}

.colibri-color-match .mosaic-radio input[type=radio]:checked + span {
    background-color: var(--color-match-color);
}

.colibri-color-quality .mosaic-radio input[type=radio]:checked + span {
    background-color: var(--color-quality-color);
}

.colibri-color-tint .mosaic-radio input[type=radio]:checked + span {
    background-color: var(--color-tint-color);
}

.colibri-color-viz .mosaic-radio input[type=radio]:checked + span {
    background-color: var(--color-viz-color);
}

.colibri-color-hub .mosaic-radio input[type=radio]:checked + span {
    background-color: var(--hub-color);
}

.colibri-color-quality-and-correct .mosaic-radio input[type=radio]:checked + span {
    background-color: var(--color-quality-and-correct-color);
}
.colibri-analytics .mosaic-radio input[type=radio]:checked + span {
    background-color: var(--analytics-color);
}


/* scroll bar W3C */
* {
    scrollbar-width: thin;
}


/* ScrollBars - experimental (only works for browser with webkit) */
::-webkit-scrollbar {
    width: 8px;  /* for vertical scrollbars */
    height: 8px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-button {

}
::-webkit-scrollbar-track {
    /*background: rgba(0, 0, 0, 0.1);*/
    width: 4px;
    height: 4px;
    background: rgba(196, 196, 196, 1);
}
::-webkit-scrollbar-track-piece {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-thumb {
    width: 8px;
    height: 8px;
    background: var(--color-tools-color);
}

.colibri-color-spec ::-webkit-scrollbar-thumb {
    background: var(--color-spec-color);
}

.colibri-color-match ::-webkit-scrollbar-thumb {
    background: var(--color-match-color);
}

.colibri-color-quality ::-webkit-scrollbar-thumb {
    background: var(--color-quality-color);
}

.colibri-color-tint ::-webkit-scrollbar-thumb {
    background: var(--color-tint-color);
}

.colibri-color-viz ::-webkit-scrollbar-thumb {
    background: var(--color-viz-color);
}

.colibri-color-quality-and-correct ::-webkit-scrollbar-thumb {
    background: var(--color-quality-and-correct-color);
}

.colibri-hub ::-webkit-scrollbar-thumb {
    background: var(--hub-color);
}

.colibri-analytics ::-webkit-scrollbar-thumb {
    background: var(--analytics-color);
}

::-webkit-scrollbar-corner {

}
::-webkit-resizer {

}

/* tooltip */
.tooltip {

}
.tooltip.in {

}
.tooltip.top {

}
.tooltip.right {

}
.tooltip.bottom {

}
.tooltip.left {

}
.tooltip-inner {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: 1px solid rgba(196, 196, 196, 1);
    background: rgba(50, 50, 50, 0.95);
    max-width: none;
}
.tooltip-arrow {
    /*background: rgba(50, 50, 50, 0.9);*/
}
.tooltip.top .tooltip-arrow {
    border-top-color: rgba(196, 196, 196, 1);
}
.tooltip.top-left .tooltip-arrow {
    border-top-color: rgba(196, 196, 196, 1);
}
.tooltip.top-right .tooltip-arrow {
    border-top-color: rgba(196, 196, 196, 1);
}
.tooltip.right .tooltip-arrow {
    border-right-color: rgba(196, 196, 196, 1);
}
.tooltip.left .tooltip-arrow {
    border-left-color: rgba(196, 196, 196, 1);
}
.tooltip.bottom .tooltip-arrow {

    border-bottom-color: rgba(196, 196, 196, 1);
}
.tooltip.bottom-left .tooltip-arrow {
    border-bottom-color: rgba(196, 196, 196, 1);
}
.tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: rgba(196, 196, 196, 1);
}
/*
@keyframes tooltip-fade {
    0% {
        opacity: 1;
        visibility: visible;
    }
    
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.tooltip.fade.in {
    opacity: 0;
    visibility: hidden;
    animation: tooltip-fade 3s linear;
}
*/

/* Modal */
.mosaic-modal {

}

.mosaic-modal-dialog {
    background-color: white;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

    position: relative;
    max-height: calc(100% - 60px);
    max-height: -moz-calc(100% - 60px);
    max-height: -webkit-calc(100% - 60px);
}

.mosaic-modal-dialog .mosaic-widget,
.mosaic-modal-dialog .mosaic-widget .mosaic-widget-content,
.mosaic-modal-dialog .mosaic-modal-content,
.mosaic-modal-dialog .modal-content,
.mosaic-modal-dialog .modal-body,
.mosaic-modal-dialog .mosaic-modal-body,
.mosaic-modal-dialog .colibri-grid-view,
.mosaic-modal-dialog .colibri-grid {
    position: relative;
    background-color: rgba(255, 255, 255, 0.9);
}

.mosaic-modal-dialog .modal-header .close {
    height: 22px;
    background: none;
    border: 0;
}
.mosaic-modal-dialog .modal-header .close:hover {
    background-color: transparent;
    color: black;
}

.mosaic-modal-content {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: url("images/box-gray-v4.svg");
    background-size: 400px 400px;

    max-height: calc(100vh - 60px);
    max-height: -moz-calc(100vh - 60px);
    max-height: -webkit-calc(100vh - 60px);
}
.mosaic-modal-dialog .mosaic-modal-content .modal-body {
    max-height: calc(100vh - 160px);
    max-height: -moz-calc(100vh - 160px);
    max-height: -webkit-calc(100vh - 160px);
}

.mosaic-dialog-large {
    min-width: 992px;
    max-width: 1300px;
    width: 90%;
}
.mosaic-dialog-large .colibri-grid {
    min-height: 400px;
}

.mosaic-dialog-medium {
    min-width: 400px;
    width: 60%;
    max-width: 1300px;
}
.mosaic-dialog-medium .colibri-grid {
    min-height: 300px;
}
.mosaic-dialog-fit-content{
    width: fit-content;
}

.mosaic-dialog-small {
    min-width: 200px;
    width: 20%;
}
.mosaic-dialog-small .colibri-grid {
    min-height: 130px;
}

.mosaic-modal-header {
    flex-direction: row;
    height: 50px;
    background-color: rgba(255,255,255,0.5);
    border-color: rgb(196, 196, 196);
}

.mosaic-modal-body {
    padding: 0;
}

.mosaic-modal-footer {
    padding: 10px;
    background-color: white;
    background-color: rgba(255,255,255,0.5);
    height: 50px;
    border-color: rgb(196, 196, 196);
    text-align: right;
}

.mosaic-modal-title {
    font-size: 14px;
}

.svg-icon-large {
    background-repeat: no-repeat;
    width: 2em; /*or your image's width*/
    height: 2em; /*or your image's height*/
    margin: 0;
    padding: 0;
}

.svg-icon-medium {
    background-repeat: no-repeat;
    width: 1.5em; /*or your image's width*/
    height: 1.5em; /*or your image's height*/
    margin: 0;
    padding: 0;
}

.svg-icon {
    background-repeat: no-repeat;
    width: 1em; /*or your image's width*/
    height: 1em; /*or your image's height*/
    margin: 0;
    padding: 0;
}

.exclaim-icon {
    background: url("images/exclaim-icon.svg");
}

.x-icon {
    background: url("images/x-icon.svg");
}

.tick-icon {
    background: url("images/tick-icon.svg");
}

.exclaim-icon-12 {
    height: 12px;
    width: 12px;
    margin-top: 9px;
    margin-left: 4px;
    background: url("images/exclaim-icon.svg");
}

.x-icon-12 {
    height: 12px;
    width: 12px;
    margin-top: 9px;
    margin-left: 4px;
    background: url("images/x-icon.svg");
}

.tick-icon-12 {
    height: 12px;
    width: 12px;
    margin-top: 9px;
    margin-left: 4px;
    background: url("images/tick-icon.svg");
}

@-webkit-keyframes loading-fade-in {
    from { opacity: 0.0; }
    to { opacity: 1.0; }
}
@keyframes loading-fade-in {
    from { opacity: 0.0; }
    to { opacity: 1.0; }
}

.mosaic-loading-layer {
    position: absolute;
    width: 100%;
    height: 100% !important;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    /*background-color: rgba(211, 211, 211, 0.9);*/
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 24px;
    color: rgba(255, 255, 255, 1);

    -webkit-animation: loading-fade-in 0.2s ease-in;
    animation: loading-fade-in 0.2s ease-in;
}

.modal .mosaic-loading-layer {
    z-index: 1051;
}

.mosaic-loading-layer-full-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    /*background-color: rgba(211, 211, 211, 0.9);*/
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 24px;
    color: rgba(255, 255, 255, 1);
    
    -webkit-animation: loading-fade-in 0.5s ease-in;
    animation: loading-fade-in 0.5s ease-in;
}

.mosaic-loading-layer-small {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 24px;
    color: rgba(255, 255, 255, 1);

    -webkit-animation: loading-fade-in 0.2s ease-in;
    animation: loading-fade-in 0.2s ease-in;
}

.mosaic-loading-layer h1 {
    font-family: 'Roboto-Light', sans-serif;
    font-weight: 300;
    font-size: 24px;
}
.mosaic-loading-layer-full-screen h1 {
    font-family: 'Roboto-Light', sans-serif;
    font-weight: 300;
    font-size: 24px;
}

.mosaic-loading-layer-small .loading-image{
    height: 32px;
    width: 42px;
    background: url("images/loading.svg") no-repeat;
    margin-left: calc(50% - 15px);
    margin-left: -moz-calc(50% - 15px);
    margin-left: -webkit-calc(50% - 15px);
}

.mosaic-loading-layer .loading-image,
.mosaic-loading-layer-full-screen .loading-image {
    height: 50px;
    width: 70px;
    background: url("images/loading.svg") no-repeat;
    margin-left: calc(50% - 25px);
    margin-left: -moz-calc(50% - 25px);
    margin-left: -webkit-calc(50% - 25px);
}

.loading-image-small {
    height: 32px;
    width: 32px;
    background: url("images/loading.svg") no-repeat;
}

.mosaic-loading-layer-small .loading-image.ie{
    background: url("images/loading.gif") no-repeat;
    background-size: 32px 32px;
}

.mosaic-loading-layer .loading-image.ie,
.mosaic-loading-layer-full-screen .loading-image.ie{
    background: url("images/loading.gif"); no-repeat
    background-size: 50px 50px;
}

.loading-image-small.ie{
    background: url("images/loading.gif") no-repeat;
    background-size: 32px 32px;
}

.mosaic-inner-loading {
    /*background-color: rgba(226, 226, 226, 1);*/
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(196, 196, 196, 1);
    padding: 15px;
}

.mosaic-colibri-logo {
    background: url("images/colibri-logo.svg") no-repeat;
    position: absolute;
    top: 10px;
    left: 10px;
    margin: 0;
    padding: 0;
    width: 32px;
    height: 32px;
}

.mosaic-library-logo{
    background: url("images/library.svg");
    margin-left: 5px;
    margin-top: 5px;
    height: 60px;
    width: 60px;
}

/* 
    Navigation Bar Logos
*/

.mosaic-navigation-bar-logo {
    display: inline-block;
    width: 100%;
    height: 36px;
    margin: 0 auto;
    margin-left: 2px; /* small offset so the text appears in the center */
}

.mosaic-account-logo {
    margin-top: 16px;
}

.mosaic-navigation-bar-color-spec-logo {
    background: url("images/color-spec.svg") no-repeat center;
    background-size: 36px;
}

.mosaic-navigation-bar-color-quality-logo {
    background: url("images/color-quality.svg") no-repeat center;
    background-size: 36px;
}

.mosaic-navigation-bar-color-match-logo {
    background: url("images/color-match.svg") no-repeat center;
    background-size: 36px;
}

.mosaic-navigation-bar-color-tint-logo {
    background: url("images/color-tint.svg") no-repeat center;
    background-size: 36px;
}

.mosaic-navigation-bar-color-general-logo {
    background: url("images/colibri-general.svg") no-repeat center;
    background-size: 36px;
}

.mosaic-navigation-bar-hub-logo {
    background: url("images/colibri-hub.svg") no-repeat center;
    background-size: 36px;
}

.mosaic-navigation-bar-analytics-logo {
    background: url("images/colibri-analytics.svg") no-repeat center;
    background-size: 36px;
}

.mosaic-navigation-bar-color-quality-and-correct-logo {
    background: url("images/color-quality-and-correct.svg") no-repeat center;
    background-size: 36px;
}

/* 
    Library Corner Animated Logos
*/

.mosaic-library-color-spec-logo{
    background: url("images/library-color-spec.svg");
    margin-left: 5px;
    margin-top: 5px;
    height: 60px;
    width: 60px;
}

.mosaic-library-color-quality-logo{
    background: url("images/library-color-quality.svg");
    margin-left: 5px;
    margin-top: 5px;
    height: 60px;
    width: 60px;
}

.mosaic-library-color-match-logo{
    background: url("images/library-color-match.svg");
    margin-left: 5px;
    margin-top: 5px;
    height: 60px;
    width: 60px;
}

/*
    Regular Logos
 */

.mosaic-color-quality-logo {
    background: url("images/color-quality-sm.svg") no-repeat;
    background-size: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.mosaic-color-spec-logo {
    background: url("images/color-spec-sm.svg") no-repeat;
    background-size: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.mosaic-color-tint-logo {
    background: url("images/color-tint-sm.svg") no-repeat;
    background-size: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.mosaic-color-viz-logo {
    background: url("images/color-viz-32.svg") no-repeat;
    background-size: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.mosaic-color-match-logo {
    background: url("images/color-match-sm.svg") no-repeat;
    background-size: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.mosaic-colibri-general-logo {
    background: url("images/colibri-general-sm.svg") no-repeat;
    background-size: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.mosaic-colibri-general-reports-logo {
    background: url("images/reports-library.svg") no-repeat;
    background-size: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.mosaic-color-quality-and-correct-logo {
    background: url("images/color-quality-and-correct-sm.svg") no-repeat;
    background-size: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.mosaic-hub-logo {
    background: url("images/colibri-hub-sm.svg") no-repeat;
    background-size: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
}

.mosaic-analytics-logo {
    background: url("images/colibri-analytics-sm.svg") no-repeat;
    background-size: 32px;
    display: inline-block;
    width: 32px;
    height: 32px;
}

/*
    Regular Logos Small
 */

.mosaic-color-quality-logo-small {
    background: url("images/color-quality-sm.svg") no-repeat;
    background-size: 100%;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.mosaic-color-spec-logo-small {
    background: url("images/color-spec-sm.svg") no-repeat;
    background-size: 100%;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.mosaic-color-tint-logo-small {
    background: url("images/color-tint-sm.svg") no-repeat;
    background-size: 100%;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.mosaic-color-viz-logo-small {
    background: url("images/color-viz.svg") no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.mosaic-color-match-logo-small {
    background: url("images/color-match-sm.svg") no-repeat;
    background-size: 100%;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.mosaic-colibri-general-logo-small {
    background: url("images/colibri-general-sm.svg") no-repeat;
    background-size: 100%;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.mosaic-colibri-text-logo {
    background: url("images/colibri-text.svg") no-repeat;
    display: inline-block;
    width: 64px;
    height: 32px;
}

.mosaic-colibri-platform-logo {
    background: url("images/colibri-platform-bold.svg") no-repeat;
    background-size: 50%;
    display: inline-block;
    cursor: default;
    width: 180px;
    height: 100%;
}


.mosaic-administration-logo {
    background: url("images/administration.svg");
    display: none;
}

.mosaic-help-logo {
    background: url("images/help.svg");
    display: none;
}

.mosaic-account-logo {
    background: url("images/account.svg") no-repeat;
    height: 28px;
    width: 20px;
}

#toastr-infocenter-button .notifications-icon{
    background: url("images/notification-icon.svg") no-repeat;
    height: 32px;
}
#toastr-infocenter-button .notifications-empty-icon{
    background: url("images/empty-notification-icon.svg") no-repeat;
    height: 32px;
}

.mosaic-widget-settings {
    text-align: right;
}

/* ProgressBar */
.progress {
    background: rgba(245, 245, 245, 1);
    border: 0 solid rgba(245, 245, 245, 1);
    border-radius: 0;
    height: 20px;
    margin-bottom: 5px;
}

.progress-bar-custom {
    background: var(--color-tools-color);
}

.progress-striped .progress-bar-custom {
    background-color: var(--color-tools-color);
    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: 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-size: 40px 40px;
}

.colibri-color-spec .progress-bar-custom {
    background: var(--color-spec-color);
}

.colibri-color-spec .progress-striped .progress-bar-custom {
    background-color: var(--color-spec-color);
    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: 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-size: 40px 40px;
}

.colibri-color-match .progress-bar-custom {
    background: var(--color-match-color);
}

.colibri-color-match .progress-striped .progress-bar-custom {
    background-color: var(--color-match-color);
    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: 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-size: 40px 40px;
}

.colibri-color-quality .progress-bar-custom {
    background: var(--color-quality-color);
}

.colibri-color-quality .progress-striped .progress-bar-custom {
    background-color: var(--color-quality-color);
    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: 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-size: 40px 40px;
}

.colibri-color-tint .progress-bar-custom {
    background: var(--color-tint-color);
}

.colibri-color-tint .progress-striped .progress-bar-custom {
    background-color: var(--color-tint-color);
    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: 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-size: 40px 40px;
}

.colibri-color-viz .progress-bar-custom {
    background: var(--color-viz-color);
}

.colibri-color-viz .progress-striped .progress-bar-custom {
    background-color: var(--color-viz-color);
    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: 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-size: 40px 40px;
}

.colibri-color-quality-and-correct .progress-bar-custom {
    background: var(--color-quality-and-correct-color);
}

.colibri-color-quality-and-correct .progress-striped .progress-bar-custom {
    background-color: var(--color-quality-and-correct-color);
    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: 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-size: 40px 40px;
}

.colibri-hub .progress-bar-custom {
    background: var(--hub-color);
}

.colibri-hub .progress-striped .progress-bar-custom {
    background-color: var(--hub-color);
    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: 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-size: 40px 40px;
}

.colibri-analytics .progress-bar-custom {
    background: var(--analytics-color);
}

.colibri-analytics .progress-striped .progress-bar-custom {
    background-color: var(--analytics-color);
    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: 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-size: 40px 40px;
}

/* Animations */
.rotate {
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    -ms-transition:all 0.5s ease-out;
    -o-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

.rotate:hover {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

.grow {
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    -ms-transition:all 0.5s ease-out;
    -o-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

.grow:hover {
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);
    -o-transform:scale(1.3);
    transform:scale(1.3);
}

.shrink{
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    -ms-transition:all 0.5s ease-out;
    -o-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

.shrink:hover {
    -webkit-transform:scale(.7);
    -moz-transform:scale(.7);
    -ms-transform:scale(.7);
    -o-transform:scale(.7);
    transform:scale(.7);
}

@-webkit-keyframes pulse {
    25% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    75% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@keyframes pulse {
    25% {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
    75% {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
}

.pulse {
    display: inline-block;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.pulse:hover {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes wobble {
    16.65% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
    33.3% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    49.95% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes wobble {
    16.65% {
        -webkit-transform: translateY(8px);
        -ms-transform: translateY(8px);
        transform: translateY(8px);
    }
    33.3% {
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    49.95% {
        -webkit-transform: translateY(4px);
        -ms-transform: translateY(4px);
        transform: translateY(4px);
    }
    66.6% {
        -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        transform: translateY(-2px);
    }
    83.25% {
        -webkit-transform: translateY(1px);
        -ms-transform: translateY(1px);
        transform: translateY(1px);
    }
    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.wobble {
    display: inline-block;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.wobble:hover {
    -webkit-animation-name: wobble;
    animation-name: wobble;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.zoom-tilt {
    -webkit-transition:all 0.3s ease-out;
    -moz-transition:all 0.3s ease-out;
    -ms-transition:all 0.3s ease-out;
    -o-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

.zoom-tilt:hover {
    -webkit-transform:rotate(15deg) scale(1.3);
    -moz-transform:rotate(15deg) scale(1.3);
    -ms-transform:rotate(15deg) scale(1.3);
    -o-transform:rotate(15deg) scale(1.3);
    transform:rotate(15deg) scale(1.3);
}

.sink {
    -webkit-transition:all .3s ease-out;
    -moz-transition:all .3s ease-out;
    -o-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.sink:hover {
    -webkit-transform:translate(0,10px);
    -moz-transform:translate(0,10px);
    -ms-transform:translate(0,10px);
    -o-transform:translate(0,10px);
    transform:translate(0,10px);
}

.float {
    -webkit-transition:all .3s ease-out;
    -moz-transition:all .3s ease-out;
    -o-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.float:hover {
    -webkit-transform:translate(0,-10px);
    -moz-transform:translate(0,-10px);
    -ms-transform:translate(0,-10px);
    -o-transform:translate(0,-10px);
    transform:translate(0,-10px);
}

.cloud-upload-image {
    height: 32px;
    width: 32px;
    background: url("images/cloud-upload.svg");
}

.cloud-download-image {
    height: 32px;
    width: 32px;
    background: url("images/cloud-download.svg");
}

.cloud-error-image {
    height: 32px;
    width: 32px;
    background: url("images/cloud-error.svg");
}

.cloud-error2-image {
    height: 32px;
    width: 32px;
    background: url("images/cloud-error2.svg");
}

.cloud-image {
    height: 32px;
    width: 32px;
    background: url("images/cloud.svg");
}

.restore-image {
    height: 32px;
    width: 32px;
    background: url("images/restore.svg");
}

.stop-watch-image {
    height: 32px;
    width: 32px;
    background: url("images/stop-watch.svg");
}

.magnifying-glass-image {
    height: 32px;
    width: 32px;
    background: url("images/magnifying-glass.svg");
}


/* login color styles - begin */
.login-container {
    border-color: rgba(196, 196, 196, 1);
    background-color: rgba(196, 196, 196, 0.2);
    color: black;
}

.login-container .mosaic-colibri-platform-logo-login {
    color: black;
}

.login-container .login-message {
    color: red;
}

.login-container {
    color: var(--color-tools-color);
}

.login-background {
    background-color: #EBEBEB;
    background: url("images/box-gray-v4.svg");
    background-size: 400px 400px;
    color: #dddddd;
}

.new-connection-container, .disclaimer-container, .privacy-statement-container {
    border-color: rgba(196, 196, 196, 1);
    background-color: rgba(255, 255, 255, 0.6);
    color: black;
}
.login-colibri-platform {
    background: url("images/colibri-platform.svg") no-repeat;
    background-size: 100%;
    width: 350px;
    height: 200px;
    position: fixed;
    left: 50px;
    top: 50px;
}
.login-datacolor-logo {
    background: url("images/Datacolor_logo_RGB.svg") no-repeat;
    background-size: 100%;
    width: 350px;
    height: 200px;
    position: fixed;
    right: 50px;
    top: 50px;
}
.login-3d-blocks {
    background: url("images/3d-blocks-login.svg");
    width: 806px;
    height: 418px;
    position: fixed;
    right: 10px;
    bottom: 10px;
}

#edit-connection .form-container .separator {
    border-top-color: rgba(196, 196, 196, 1);
}

#edit-connection .form-container .form-row .right-side #validation-message {
    color: red;
}

#edit-connection .form-container .form-row .right-side #connection-ok {
    color: green;
}

#edit-connection .form-container .form-row .right-side #connection-failed {
    color: red;
}
/* login color styles - end */


/* main color styles - begin */
.mosaic-dropdown-menu {
    z-index: 500;
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgb(196, 196, 196);
}
.dropdown-submenu>a:after { 
    border-color:transparent; 
    border-left-color:#cccccc; 
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}

/* main color styles - end */


/* ui-select style overrides - begin */
.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
    padding: 2px 4px!important;
    line-height: 15px;
    background-color: transparent;
    color: black;
}

.ui-select-bootstrap>.ui-select-match>.btn{
    background-color: #ffffff;
    color: #777;
    line-height: 10px;
}

.ui-select-toggle{
    overflow-x: hidden!important;
}

/* ui-select style overrides - end */


/* message box style - begin */
#ramphastosMessageBox {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    background-color: white;
    border-style: solid;
    border-color: rgba(196, 196, 196, 1);
    border-width: 1px;
    max-width: 700px;
    max-height: 300px;
    overflow-y: auto; 
}

#ramphastosMessageBox .titleBar {
    font-weight: bold;    
    font-size: larger; 
}

#ramphastosMessageBox .message {
    padding: 5px;
}
     
#ramphastosMessageBox .titleBar {
    height: 20px;
    background-color: white;
    border-style: solid;
    border-color: rgba(196, 196, 196, 1);
    border-width: 1px;
    margin: 1px;
}

#ramphastosMessageBox .titleBar h1 {
    margin: 0;
    padding-top: 0;
    color: white;
    font-size: 14px;
}

.messageBoxContainer {
    position: absolute;
    width: 100%;
    height:100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1200;
}
/* message box style - end */

/* custom font awesome icons */
.custom-spinner {
    border: 2px solid #f0f0f0; /* Background color */
    border-top: 2px solid rgba(150, 150, 150, 1); /* Spinner color */
    border-right: 2px solid rgba(150, 150, 150, 1);
    border-bottom: 2px solid rgba(150, 150, 150, 1);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    animation: spin 1s linear infinite;
    margin-left: 2px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.width-auto {
    width: auto;
}

.inline-block {
    display: inline-block;
}

.modal-body-content {
    margin-right: 10px; 
    margin-top: 10px;
}

/* ReSharper restore RequiresFallbackColor */

/* screen size dependent stuff */
/*
@media (max-width: 991px) {
    .mosaic-main-container {
        overflow-y: hidden;
    }
}

@media (min-width: 992px) {
    .mosaic-main-container {
        overflow-y: auto;
    }
}
*/

/* mosaic main layout */
.mosaic-main-layout {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.mosaic-main-layout > .left-side {
    height: 100%;
    padding: 5px;
    margin: 0;
    text-align: right;
}

.mosaic-main-layout > .right-side {
    height: 100%;
    padding: 5px;
    margin: 0;
    text-align: left;
}
.mosaic-main-layout > .resize-view-bar {
    position: absolute;
    left: calc(25%);
    height: calc(100% - 20px);
    width: 10px;
    cursor: pointer;
}
.mosaic-main-layout > .resize-view-bar:hover .bar {
    opacity: 1;
}
.mosaic-main-layout > .resize-view-bar .bar {
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
    position: absolute;
    /*width: 100%;*/
    width: 5px;
    height: 100%;
    border-right: 1px dashed rgba(196, 196, 196, 1);
}
.mosaic-main-layout > .resize-view-bar .bar .bar-button-group {
    position: absolute;
    width: 100%;
    height: 38px;
}
.mosaic-main-layout > .resize-view-bar .bar .bar-button-group .mosaic-button {
    height: 16px;
    width: 10px;
    padding: 0;
    background: none;
    border: none;
    margin-bottom: 2px;
    color: rgba(196, 196, 196, 1);
}
.mosaic-main-layout > .resize-view-bar .bar .bar-button-group .mosaic-button:hover {
    color: rgba(0, 0, 0, 1);
}
/* screen size dependant stuff */
@media (max-width: 357px){
    .mosaic-main-layout > .right-side,
    .mosaic-main-layout .hide-right-side  {
        transform: none !important;
        width: 100% !important;
        position: relative !important;
    }
    .mosaic-main-layout > .left-side,
    .mosaic-main-layout .hide-left-side,
    .mosaic-main-layout > .left-side.secondary-navbar-collapse.collapse.hide-left-side {
        transform: none !important;
        position: absolute !important;
        width: 100% !important;
    }

	/* since 3.1.0 */
    .mosaic-main-layout > .left-side.secondary-navbar-collapse.collapse.in {
		display: block !important;
		margin-left: 0;
	}
    .mosaic-main-layout > .left-side .collapsing {
		overflow: hidden !important;
	}
	#mainNavBar #secondary-navbar-collapse-button.navbar-toggle {
		display: block !important;
	}
    .mosaic-main-layout > .left-side.secondary-navbar-collapse {
		position: absolute;
		top: -22px;
		left: 0;
		width: 100%;
		height: -moz-calc(100% + 22px);
		height: -webkit-calc(100% + 22px);
		height: calc(100% + 22px);
		background: rgba(255,255,255,1);
		z-index: 1000;
		/*border-right: 1px solid rgb(196, 196, 196);*/
	}
    .mosaic-main-layout > .resize-view-bar {
        display: none;
    }
}

@media (min-width: 358px) and (max-width: 1260px){
    .mosaic-main-layout > .right-side,
    .mosaic-main-layout .hide-right-side  {
        transform: none !important;
        width: 100% !important;
        position: relative !important;
    }
    .mosaic-main-layout > .left-side,
    .mosaic-main-layout .hide-left-side,
    .mosaic-main-layout > .left-side.secondary-navbar-collapse.collapse.hide-left-side {
        transform: none !important;
        position: absolute !important;
        width: 100% !important;
    }

	/* since 3.1.0 */
    .mosaic-main-layout > .left-side.secondary-navbar-collapse.collapse.in {
		display: block !important;
		margin-left: 0;
	}
    .mosaic-main-layout > .left-side .collapsing {
		overflow: hidden !important;
	}
	#mainNavBar #secondary-navbar-collapse-button.navbar-toggle {
		display: block !important;
	}
    .mosaic-main-layout > .left-side.secondary-navbar-collapse {
		position: absolute;
		top: -22px;
		left: 0;
		width: 100%;
		height: -moz-calc(100% + 22px);
		height: -webkit-calc(100% + 22px);
		height: calc(100% + 22px);
		background: rgba(255,255,255,1);
		z-index: 1000;
		/*border-right: 1px solid rgb(196, 196, 196);*/
	}
    .mosaic-main-layout > .resize-view-bar {
        display: none;
    }
}

@media (min-width: 1261px) and (max-width: 1300px){
	#mainNavBar #secondary-navbar-collapse-button.navbar-toggle {
		display: none;
	}
    .mosaic-main-layout > .left-side.secondary-navbar-collapse.collapse {
		display: block !important;
		height: 100% !important;
	}
    .mosaic-main-layout > .left-side.secondary-navbar-collapse {
		top: 0;
		z-index: auto;
	}
    .mosaic-main-layout > .left-side.secondary-navbar-collapse.collapse.in {
		display: block !important;
		margin-left: 0;
	}
    .mosaic-main-layout > .resize-view-bar {
        display: initial !important;
    }
}

@media (min-width: 1301px){
    .mosaic-main-layout > .left-side #secondary-navbar-collapse-button.navbar-toggle {
		display: none;
	}
    .mosaic-main-layout > .left-side.secondary-navbar-collapse.collapse {
		display: block !important;
		height: 100% !important;
	}
    .mosaic-main-layout > .left-side.secondary-navbar-collapse {
		top: 0;
		z-index: auto;
	}
    .mosaic-main-layout > .left-side.secondary-navbar-collapse.collapse.in {
		display: block !important;
		margin-left: 0;
	}
    .mosaic-main-layout > .resize-view-bar {
        display: initial !important;
    }
}


.no-wrap {
    white-space: nowrap;
}

textarea.property-textarea {
    overflow: visible!important;
    height:auto!important;
}

.mmc-logo-background {
    display: none;
}

#collapsable-color-quality-date-time{
    display: grid;
}