:root {
    --highlight-color: #2D6AFD;
}

/* General inspinia tweaks */
.ibox-title {
    min-height: 42px;
    padding: 11px 15px 4px;
}

.ibox-title.ibox-title-default {
    padding: 30px 15px 7px;
    min-height: 48px;
}

/* Common stuffs */
.alert-messages {
    margin-top: 15px;
}

/* Dashboards list */
.mosaic-dashboard .ibox-content {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ibox-title.chart-title.dashboard-title:after,
.print-setup-ibox .ibox-title {
    content: '';
    display: block;
    clear: both;
}

.print-setup-ibox .ibox-title {
    height: 60px;
}

/* Dashboards: widgets & co */
/*.ibox-metric .ibox-content, .dashboard-small-metric {*/
/*min-height: 120px;*/
/*max-height: 120px;*/
/*}*/

.col-metric {
    padding-left: 10px;
    padding-right: 10px;
}

.ibox-metric .ibox-content {
    padding: 9px 12px 15px;
}

.ibox-metric > .ibox-content > h4 {
    font-size: 14px;
    display: flex;
    align-items: center;
}

@media (min-width: 992px) {
    .ibox-metric .ibox-content h1 {
        font-size: 1.2vw;
    }
}

@media (min-width: 1200px) {
    .ibox-metric .ibox-content h1 {
        font-size: 1.5vw;
    }
}

.ibox-metric .ibox-content small {
    /*white-space: nowrap;*/
    display: inline-block;
    /*max-width: 30%;*/
}

.stat-percent {
    float: none;
}

.ibox-metric .ibox-content small.no-evolution {
    max-width: 100%;
}

.metric-value-overflow {
    white-space: nowrap;
    overflow: hidden;
}

.dashboard-small-metric {
    border-radius: 5px;
    padding: 20px 10px;
}

.navbar.navbar-static-top {
    z-index: 2002 !important;
}

/* Dashboards: grid widgets */
.row-metric-item {
    padding: 0 10px;
}

.grid-metric {
    padding-left: 3px;
    padding-right: 3px;
}

.grid-metric > * {
    text-align: center;
}

.grid-metric-value {
    line-height: 2.2em;
    font-size: 2.8vmin;
    font-weight: bold;
}

@media (min-width: 1200px),
(min-height: 1200px) {
    .grid-metric-value {
        font-size: 2.1vmin;
    }
}

/* Dashboards: datatable widgets */
.grid-stack-item-content .pagination > li > a {
    padding: 0 7px;
}

.grid-stack-item-content .dt-button {
    padding: 0.1em 0.5em;
}

.buttons-html5 {
    padding: 0.5em 0.8em;
    margin-right: 0.5em;
    margin-left: 1em;
}

/* Dashboard pages: tabs like */
/* some rules are located in vendor / less files */

.dashboard-page .page-heading {
    padding-bottom: 0;
}

.dashboard-page .page-heading .tabs-container {
    position: relative;
    overflow: hidden;
    height: 36px;
}

.dashboard-page .tabs-container .nav-tabs li > span {
    background-color: #f8f8f8;
}

.dashboard-page .tabs-container .nav-tabs li {
    margin-right: 3px;
}

.dashboard-page .tabs-wrapper {
    margin-top: 10px;
}

.dashboard-page .page-heading .btn-tab {
    color: white;
    line-height: 1.5;
}

.dashboard-page .page-heading .btn-tab:hover {
    color: #555;
}

#modal_new_page .col-mosaic,
#modal_new_chart .col-mosaic {
    text-align: center;
}

#modal_new_page .col-mosaic h3,
#modal_new_chart .col-mosaic h4 {
    margin-left: -10px;
}

#modal_new_page .col-mosaic-abs-title {
    position: absolute;
    top: 0;
    left: 6px;
}

#modal_new_chart .col-mosaic-abs-title {
    position: absolute;
    bottom: 42px;
    right: 0;
}

.mosaic-item {
    min-height: 160px;
}

.ibox-dates-and-sources .ibox-title input[type="submit"] {
    margin-left: 10px;
    display: none;
}

.ibox-tools-left {
    float: left;
    padding-right: 10px;
}

.ibox-tools.ibox-tools-right {
    margin-left: 100px;
}

.ibox-dates-and-sources .ibox-tools-right .fa-wrench {
    vertical-align: 10%;
}

.ibox-dates-and-sources .sliding-buttons {
    display: none;
    position: absolute;
    top: -33px;
    left: 50%;
    background-color: white;
    padding: 4px;
    border-color: #e8ebed;
    border-width: 3px;
    border-style: solid none none;
}

.ibox-dates-and-sources .daterange-wrapper {
    position: relative;
}

.btn-open-locations,
.btn-clip-ids {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
}

.btn-clip-ids {
    display: none;
}

button.btn-clip-ids.no-hover:hover {
    cursor: default;
}

.dashboard-page .dynamic-filters-summary,
.dividing-factor,
.ldsk-campaign-id .timezone-shift {
    font-weight: bold;
}


.dashboard-page .query-health {
    margin-top: -7px;
    margin-right: 5px;
    font-weight: bold;
    cursor: default;
}

.dashboard-page .dynamic-filters-slider {
    padding: 20px 30px 20px 15px;
}

.dashboard-page .dynamic-filters-slider .slider {
    border: 1px solid lightgrey;
    padding: 7px 10px 17px 10px;
}

.dashboard-page .dynamic-filters-slider .slider .slider-header {
    padding-bottom: 27px;
    line-height: 2.5em;
}

.dashboard-page .dynamic-filters-slider .slider .slider-header .btn {
    float: right;
}

.dashboard-page .dynamic-filters-slider .slider .multiselect-header {
    padding-bottom: 5px;
    line-height: 2.5em;
}

.dashboard-page .dynamic-filters-slider .slider .multiselect-header .btn {
    float: right;
}

.dashboard-page .dynamic-filters-slider .filter-range {
    padding: 0 15px;
}

.noUi-horizontal .noUi-handle {
    height: 24px;
    top: -4px;
}

.noUi-handle {
    cursor: pointer;
}

.filter-min-value {
    float: left;
}

.filter-max-value {
    float: right;
}

/* grid-stack & charts UI */
.grid-stack-item-content {
    background-color: white;
}

.grid-stack-item-content .ibox-content {
    padding: 5px 5px 0;
}

.grid-stack-item .ui-resizable-se {
    background-image: none;
}

.c3-chart-arc text {
    fill: #3a3a3a !important;
    /* text-shadow: 1px 1px 2px white; */
    /* text-shadow: 2px 0 3px #fff, -2px 0 3px #fff, 0 2px 3px #fff, 0 -2px 3px #fff; */
    text-shadow: 2px 0 0 rgba(255, 255, 255, 0.5), -2px 0 0 rgba(255, 255, 255, 0.5), 0 2px 0 rgba(255, 255, 255, 0.5), 0 -2px 0 rgba(255, 255, 255, 0.5), 1px 1px rgba(255, 255, 255, 0.5), -1px -1px 0 rgba(255, 255, 255, 0.5), 1px -1px 0 rgba(255, 255, 255, 0.5), -1px 1px 0 rgba(255, 255, 255, 0.5);
}

.c3-area {
    opacity: 0.3;
}

.c3-line {
    stroke-width: 2px;
}

.c3-region-male {
    fill: blue;
}

.c3-region-female {
    fill: red;
}

#ots_and_watchers .c3-tooltip tr th,
#total_dwell_and_attention .c3-tooltip tr th,
#ots_and_watchers_per_avg_loc .c3-tooltip tr th,
#total_dwell_and_attention_avg_loc .c3-tooltip tr th,
#clip-watchers-watchers-two-seconds .c3-tooltip tr th,
#clip-total-dwell-attention .c3-tooltip tr th {
    display: none;
}

/*remove bars for total impressions in bar charts (per location, avg period)*/
.c3-target-total-impressions.c3-chart-bar {
    display: none;
}

/*remove legend for total impressions in bar charts (per location)*/
[id*="per-location"] .c3-legend-item-total-impressions {
    display: none;
}

/*remove legend for total impressions in bar charts (avg period)*/
[id*="-avg"] .c3-legend-item-total-impressions {
    display: none;
}

.ibox-title h6 {
    display: inline-block;
    margin: 3px 0 0 5px;
    text-overflow: ellipsis;
    float: left;
}


/* navbar */
.minimalize-styl-2 {
    margin-left: -35px;
    position: fixed;
    z-index: 2001;
}

.navbar-top-links .network {
    display: inline-block !important;
    margin-right: 0 !important;
}

/* force on all resolution */
.navbar-left {
    float: left;
}

.navbar-right {
    float: right;
}

/* fix filter inputs in datatables */
@media (min-width: 768px) {
    .table .form-control {
        width: 100%;
    }
}

/* missing css rules with datatables bootstrap */
.dt-right {
    text-align: right;
}

/* aggressively wrap content names */
/*.dt-right.hardwrap {*/
/*    word-break: break-all;*/
/*}*/

/* hack / fix labels */
.hack-align-label-sm {
    padding-top: 7px;
    margin-bottom: 0px;
    text-align: right;
}

/* Hack / Users page: fix datatables pagination */
#users_paginate {
    margin-left: -4px;
}

/* Hack / checkbox inputs alignment */
.align-input {
    display: inline-block;
    min-height: 21px;
    margin-top: 10px;
    margin-bottom: 10px;
}


/* top & bottom margin on "create-new-network" link */
.create-new-network {
    margin: 30px 0;
}

/* datatables */
.account__name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.downloads__title {
    min-width: 250px;
}

.downloads__category {
    min-width: 150px;
}

.search-page .hr-line-dashed {
    width: 90%;
    margin: 5px 0;
}

.search-page .search-result-container {
    display: flex;
    column-gap: 20px;
    justify-content: flex-start;
}

.search-page .search-item h2 {
    white-space: normal;
}

.search-page .search-item {
    min-width: 125px;
    max-width: 12.5%;
    white-space: nowrap;
}

.search-page .search-result {
    white-space: normal;
}

.search-page .search-result h3, .search-page .search-result span {
    overflow-wrap: break-word;
}

.search-page .search-result .search-link {
}

.search-page .search-result .extra-display {
    font-size: 90%;
    line-height: 1.5em;
}

.search-page .search-result .extra-display span {
    font-weight: bolder;
}

.navbar-form-custom {
}

.user_new-account_fields {
    border-right: solid 1px gainsboro;
}

.list-separator-text {
    vertical-align: top;
    margin-top: 5px;
}

.nav hr {
    margin: 4px 20px;
    opacity: 0.3;
}

#djhj {
    /* top: 0; */
    /* bottom: auto; */
    background-size: 50px 50px;
    background-color: #ffe761;
    color: #000;
    background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, .04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, .04) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(0, 0, 0, .04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, .04) 75%, transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(0, 0, 0, .04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, .04) 75%, transparent 75%, transparent);
}

.djhj-notification {
    height: 80px;
}

.modified-field {
    border-color: rgba(82, 168, 236, .8);
    box-shadow: 0 0 8px rgba(82, 168, 236, .6);
}

.menu-margin {
    margin-left: 15px;
}

.list-group-item .flag {
    margin-top: 2px;
}

span.quiet {
    color: #999;
    font-weight: normal;
}

span.tiny {
    font-size: 10px;
}

div.quiet {
    color: #999;
    font-weight: normal;
}

div.tiny {
    font-size: 10px;
}

.no-padding-left {
    padding-left: 0px;
}

.align-right {
    text-align: right;
}

.has-success-background {
    background-color: #DFF0D8 !important;
}

.has-error-background {
    background-color: #F2DEDE !important;
}

.has-danger-background {
    background-color: #DCA7A7 !important;
}


.alert-small {
    display: inline-block;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-large {
    padding: 15px 40px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-small.alert-danger {
    color: #333;
}

.text-center {
    text-align: center;
}

.mt-2 {
    margin-top: 2px;
}

.mt-4 {
    margin-top: 4px;
}

.mt-6 {
    margin-top: 6px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-50 {
    margin-top: 50px !important;
}

.mt-150 {
    margin-top: 150px;
}

.mt-200 {
    margin-top: 200px;
}

.ml-2 {
    margin-left: 2px;
}

.ml-3 {
    margin-left: 3px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-21 {
    margin-bottom: 21px;
}

.ml-m8 {
    margin-left: -8px;
}

.ml-m11 {
    margin-left: -11px;
}

.mb-25 {
    margin-bottom: 25px;
}

.ml-m12 {
    margin-left: -12px;
}

.mb-60 {
    margin-bottom: 60px;
}

.ml-30p {
    margin-left: 30%;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.btn-clear {
    margin-top: 4px;
}

.pb-0 {
    padding-bottom: 0px !important;
}

.pt-3 {
    padding-top: 3px;
}

.p-15 {
    padding: 0 15px;
}

.h70 {
    height: 70px;
}

.ibox-title h5 {
    z-index: 100;
    position: relative;
}

.ibox-title > .chart-description {
    display: inline-block;
    margin: -10px 0 5px 5px;
    text-overflow: ellipsis;
    float: left;
}

span.processing {
    position: absolute;
    top: 200px;
    left: 40%;
    z-index: 1;
}

span.btn-add {
    float: right;
    position: absolute;
    top: 25%;
    right: 0px;
    line-height: 1em;
}

.nav-second-level li a.btn-add {
    padding: 0;
    position: static;
    opacity: 0.6;
}

.navbar-default {
    position: fixed;
    overflow: auto;
    height: 90vh;
}

.navbar-default::-webkit-scrollbar-track {
    border-radius: 6px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    -webkit-box-shadow: inset 0 0 6px #dddddd;
    background: transparent;
}

.navbar-default::-webkit-scrollbar {
    width: 6px;
}

.navbar-default::-webkit-scrollbar-thumb {
    background-color: #9e9e9e;
    border-radius: 6px;
}

.navbar-default .nav > li > a.btn-add:hover {
    opacity: 1;
    color: #A7B1C2;
}

.nav-second-level li a {
    padding: 7px 10px 7px 35px;
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.nav-third-level li a {
    padding-left: 50px;
}

.nav > li.active {
    background: #272355;
    border-left: 0;
    /* override quividi-style.css style! */
}

.nav > li.active > a.btn-add {
    color: #A7B1C2;
}

.btn-back {
    margin-top: 20px;
    margin-right: 35px;
}

.input-group-addon-search {
    cursor: pointer;
}

.search-form {
    margin-top: 10px;
    flex-grow: 4;
}

.search-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* override margin-top 5px from other lib */
.search-header > h2 {
    margin-top: 10px;
}

.search-header > small {
    width: 100%;
    margin-bottom: 10px;
}

.nav-header {
    padding: 19px 25px;
}

.nav-header .dropdown > a {
    text-shadow: 1px 1px 2px black;
    color: white;
}

body.mini-navbar .search-container {
    display: none;
}

body.mini-navbar .nav-second-level span {
    display: inline;
}

body.mini-navbar .nav-label,
body.mini-navbar .navbar-default .nav.nav-second-level li.menu-margin {
    margin-left: 0;
}

body.mini-navbar .nav-label,
body.mini-navbar .navbar-default .nav.nav-second-level li a:not(.btn-add) i {
    display: none;
}

body.mini-navbar .nav-label,
body.mini-navbar .navbar-default .nav.nav-second-level li a span {
    display: inline;
}

ol.breadcrumb {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 100;
}

ol.breadcrumb li.active strong {
    font-weight: 500;
}

.page-heading {
    padding: 0 10px 5px;
}

div.dataTables_wrapper div.pull-left div.dataTables_info {
    padding-top: 4px;
}

.home-top-row {
    margin-top: 10px;
}

tr.faded {
    font-weight: 100;
    font-style: italic;
}

.dropdown-menu > li > a {
    padding: 1px 15px;
    margin: 1px;
}

.dropdown-menu > form > button {
    margin: 4px 0px 6px 15px;
}

.dropdown-menu > form {
    justify-content: left;
}

.dropdown-submenu.pull-left {
    float: none !important;
}

.jstree-default .jstree-search {
    font-style: normal !important;
    font-weight: bold;
    background: #EDEDED;
    /* color configured in quividi-custom */
}

li.jstree-node.faded {
    font-style: italic;
    font-weight: 100;
}

li.jstree-node.faded b {
    font-weight: 100;
}

li.jstree-node.unsynced a {
    color: #FF2346;
}

.modal-content {
    min-width: 500px;
    width: fit-content;
}

.row-jstreesearch {
    margin-bottom: 10px;
}

.buttons-jstree {
    display: flex;
    justify-content: flex-start;
    column-gap: 10px;
    row-gap: 5px;
    margin-bottom: 10px;
}

.location-uploads label {
    margin-bottom: 0;
    margin-top: 5px;
}

.location-uploads legend {
    margin-bottom: 10px;
}

.box-status label {
    margin-bottom: 0;
    margin-top: 5px;
}

.box-status legend {
    margin-bottom: 10px;
}

.alerts-number {
    margin-bottom: 22.2px;
}

.input-group-addon.clear-autocomplete {
    cursor: pointer;
}

table.datatable th div.form-group {
    width: 100%;
}

table.dataTable thead > tr > th {
    padding-right: 8px;
}

/* back to default */
.dashboard-page table.dataTable thead > tr > th {
    padding: 8px 30px 8px 8px;
}

.dashboard-page table.dataTable td {
    padding: 2px 4px;
}

ol.breadcrumb button.selectpicker {
    font-size: 24px;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 250px;
}

/* GMAPS */
.inmodal.gmap .modal-header {
    padding: 15px 15px;
}

.gmap .modal-body {
    padding: 20px 20px 20px;
}

.modal-body .map-canvas {
    height: 400px;
}

body.home #map_canvas {
    height: 350px;
}

.ibox-content #map_canvas {
    height: 400px;
}

@media screen and (min-width: 768px) {
    .ibox-content #map_canvas {
        height: 450px;
    }

    .ibox-content fieldset #map_canvas {
        height: 350px;
    }
}

@media screen and (min-width: 1200px) {
    .ibox-content #map_canvas {
        height: 550px;
    }

    .ibox-content fieldset #map_canvas {
        height: 400px;
    }

    .btn-maps {
        display: block;
    }
}


.logo-element-bottom {
    position: fixed;
    bottom: 10px;
    left: 15px;
    opacity: 1;
}

.logo-element-bottom .logo-lg {
    padding-left: 20px;
}

body.mini-navbar .logo-element-bottom .logo-lg {
    display: none;
}

.logo-element-bottom .logo-sm {
    display: none;
}

body.mini-navbar .logo-element-bottom .logo-sm {
    display: block;
}

.profile-element {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

/* minimized search link */
.logo-element span.fa-stack {
    cursor: pointer;
    padding: 5px;
}

h1.welcome {
    margin-left: 10px;
    font-weight: 400;
    margin-top: 16px;
}

.page-heading.home {
    padding: 0px 10px;
}

.page-heading.home img {
    margin-top: 10px;
    margin-bottom: 10px;
    max-height: 50px;
}

.panel-default > .panel-heading .badge.badge-primary {
    background-color: #165770;
    color: #FFF;
}

textarea.form-control.textarea {
    resize: vertical;
    height: 34px;
    min-height: 34px;
}

textarea.form-control.textarea.dashboard-description {
    height: 204px;
}

textarea.form-control.textarea.message-content {
    height: 107px;
}

textarea.form-control.textarea.software-description {
    height: 148px;
}

textarea.form-control.textarea.document-description {
    height: 220px;
}

li > .bootstrap-select > button.btn {
    padding: 0px 12px;
    margin-bottom: 3px;
}

.address-popin {
    display: none;
}

.smaller {
    font-size: 70%;
}

.background-menu {
    background-color: #293846;
}

img.profile-picture {
    border-radius: 22.5px;
}


.wizard > .steps > ul > li {
    width: 16.66666666666667%;
}

.wizard > .content > .body {
    position: inherit;
}

.wizard > .steps .current a {
    background-color: #165770;
    cursor: pointer;
}

.wizard > .steps .current a:hover {
    background-color: #165770;
}

.wizard > .steps .done a {
    background-color: rgba(22, 87, 112, 0.63);
}

.wizard > .steps .done a:hover {
    background-color: rgba(22, 87, 112, 0.63);
}

.wizard > .content > .body input.select2-input {
    border: 0px none;
}

fieldset.no-legend-mb legend {
    margin-bottom: 0px;
}

.bootstrap-datetimepicker-widget {
    z-index: 10000;
}

.wizard > .content > .body ul.no-style {
    list-style-type: none !important;
}

.hover-pointer:hover {
    cursor: pointer;
}

.hover-green:hover {
    color: green;
}

i.page-rename {
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.nav-tabs > li span:hover i.page-rename {
    opacity: 1;
}

input.page-rename {
    height: 24px;
    padding: 0 3px 0 3px;
    font-size: 13px;
}

.input-group-addon.page-rename {
    padding: 4px 6px 3px 5px;
}

.mosaic-item > span.badge-group {
    position: fixed;
    margin-top: 3px;
    margin-left: 5px;
}

.mosaic-item > span.badge-group > .badge {
    margin-right: 2px;
}

.chart-title > h6 > span.badge-chart {
    margin-top: -4px;
    margin-right: 10px;
    margin-left: -8px;
}

.form-group .control-label {
    margin-bottom: 0;
    padding-top: 7px;
    text-align: right;
}

.dropdown-submenu {
    position: relative;
    min-width: 160px;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
    margin-left: 1px;
}

.nav-tabs > li > a,
.nav-tabs > li > span {
    padding: 6px 5px 6px 10px;
}

.nav-tabs > li > span.rename-padding {
    padding: 4px 5px 5px 5px;
    max-width: 300px;
    /* See #154840915 */
}

.nav-tabs li.ui-sortable-handle {
    cursor: move;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

li.dropdown i.fa-wrench {
    vertical-align: 10%;
    font-size: 18px;
}

.slick_info h2 {
    margin-bottom: 20px;
}

#daterange > i.fa-calendar {
    vertical-align: 10%;
}

.btn-saved {
    cursor: default;
    margin-left: 5px;
}

#twitter-widget-1 {
    width: 100%;
}

.ots-conversion-warning .alert {
    margin-bottom: 0;
}

/* TRIX */
trix-editor.chart-edit {
    min-height: 300px;
}

trix-editor.dashboard-edit {
    min-height: 108px;
}

/* custom buttons in AMP dashboards */
.trix-button--icon-align-left::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>');
}

.trix-button--icon-align-center::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-center" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>');
}

.trix-button--icon-align-right::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>');
}

/* apply custom styles before opening trix widget */
align-left, align-center, align-right {
    display: block;
    width: 100%;
}

align-left {
    text-align: left;
}

align-center {
    text-align: center;
}

align-right {
    text-align: right;
}

/* END TRIX */

.modal-edit-widget .i-checks {
    margin-top: 30px;
}

.ibox-tools.ibox-tools-inline {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 5px;
    margin-top: 5px;
    z-index: 2;
}

blockquote {
    font-size: inherit;
}

#div_id_zip_compression {
    margin-top: 10px;
}

.dropdown-menu > li > a.change-order-selected {
    font-weight: bold;
}

.dropdown-menu > li > a.change-rotated-selected {
    font-weight: bold;
}

.dropdown-menu > li > a.change-order-by-selected {
    font-weight: bold;
}

.ibox-metric.ibox-metric-period .ibox-content {
    padding-top: 5px;
    padding-bottom: 6px;
}

.btn-period {
    font-size: 17px;
    display: inline-block;
}

.btn-period:not(:first-child) {
    margin-top: 4px;
}

.btn-period.active {
    font-weight: bold;
}

.btn-traffic-type {
    border-color: #fff4ba;
    background-color: #fff4ba;
    color: rgb(103, 106, 108);
    padding: 1px 3px;
}

.btn-traffic-type.selected {
    border-color: #f5d328;
    background-color: #f5d328;
    font-weight: bold;
}

span.toggle-group {
    position: relative;
    float: left;
}

button.btn-toggle.selected {
    font-weight: bold;
}

.ibox.ibox-dates-and-sources button.btn.btn-xs {
    padding: 1px 3px;
}

a.btn-renew {
    margin-left: 10px;
}

div.clip-select-popover {
    min-width: 275px;
}

div.clip-select-popover select {
    display: none;
}

div.ibox-dates-and-sources div.popover {
    min-width: 500px;
}

div.gate-select-popover select {
    display: none;
}

div.gate-select-popover button.btn-select-gates {
    margin-left: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
}

div.clip-select-popover button.btn-select-clips {
    margin-left: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
}

span.filter-checkbox-label {
    margin-left: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.logo-element .profile-picture:hover {
    cursor: pointer;
}

.dropdown-menu.picture-dropdown {
    margin-top: -61px;
    margin-left: 10px;
    color: black;
    left: 70%;
    transform: translateY(50%);
}

blockquote.api-response {
    white-space: pre;
    font-family: monospace;
}

div.grid-stack.right-line {
    border-right: 1px solid #2f4050;
}

div.col-xs-6.col-benchmark {
    padding-left: 25px;
}

div.col-xs-6.col-comparison {
    padding-left: 25px;
}

div.i-checks p.help-block {
    font-weight: 400;
    margin-left: 25px;
}

div.dashboard-permission {
    margin-top: 10px;
}

/* See [#133245625] */
.modal-open .select2-container--open {
    z-index: 2051;
}

/* for navigator and amp dashboard topology tag field */
#tab_pane_tags .select2-container {
    flex: 1;
    min-width: 0;
}

.pagination > li > input {
    float: left;
    width: 50px;

    min-height: 28px;
    border: 1px solid #e5e6e7;
    padding: 0 4px;
}

.pagination > li > span.no_hover:hover {
    background-color: inherit;
    color: inherit;
}

.pagination > li > span.border_left {
    border-left: 1px solid #DDDDDD;
    border-top: none;
    border-bottom: none;
    border-right: none;
}

.pagination > li > span.border_right {
    border-right: 1px solid #DDDDDD;
    border-top: none;
    border-bottom: none;
    border-left: none;

    margin-left: 0;
}

/* styling in dashboard list page */
.pagination span {
    font-size: 14px;
    font-weight: bold;
}

.nav-tabs-pages {
    position: absolute;
    min-width: 10000px;
    margin-top: 5px;
}

.nav-tabs-staff-pages {
    margin-top: 5px;
}

#modal_sources_tree_picker .tab-content .tab-pane {
    margin-top: 10px;
}

.benchmark-title {
    text-align: center;
}

.benchmark-title-container {
    padding-bottom: 5px;
    padding-top: 5px;
}

tx {
    background-color: #EFA7FA4D;
}

div.sites-without-address {
    padding: 5px 0px;
    background: #fff9;
}

div.top-of-map {
    padding: 5px 0px 0px;
    background: #fff9;
}

.stats-label > span {
    font-size: 1.2em;
}

.stats-label > h2 {
    margin-top: 10px;
}

div.map-warning {
    padding: 5px 20px;
}

div.network-terms {
    border-bottom: 1px solid #e5e5e5;
}

div.network-terms-preamble {
    border-bottom: 1px solid #e5e5e5;
}

/* formsets don't have the same error class */
.oem-registration .error .form-control {
    border-color: #b33c1d;
}

.oem-registration .error .help-block,
.oem-registration .error .help-inline {
    color: #a94442;
}

table.table.ibox-table {
    margin-bottom: 0;
}

table.ibox-table tr:first-child td {
    border-top: none;
}

.controlUI {
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    text-align: center;
    margin-top: 2px;
    margin-left: 2px;
}

.controlText {
    color: rgb(25, 25, 25);
    font-family: Roboto, Arial, sans-serif;
    font-size: 12px;
    line-height: 18px;
    padding-left: 5px;
    padding-right: 5px;
}

.jstree-hidden {
    display: none;
}

.jstree-node.jstree-hidden {
    display: none;
}

.bg-img-tags {
    line-height: 1.8;
}

form.password-reset ul.errorlist {
    list-style-type: none;
}

form.password-reset ul.errorlist > li {
    color: #D28B00;
}

.scroller {
    text-align: center;
    cursor: pointer;
    padding: 7px;
    padding-top: 11px;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #fff;
    transition: color 0.5s linear, opacity 0.5s linear;
    color: #8080804d;
    opacity: 0;
}

.scroller-right {
    float: right;
}

.scroller-left {
    float: left;
}

/* #151796187 / Charts: better overflow of big tooltips */
.c3-tooltip-container {
    z-index: 101;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content:not([renderer='datatable']):not([renderer='custom']) {
    /* Resets few css properties */
    overflow-x: initial;
    overflow-y: initial;
    z-index: initial !important;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content[renderer='custom'],
.grid-stack > .grid-stack-item > .grid-stack-item-content[renderer='datatable'] {
    overflow: hidden !important;
}


.grid-stack-item[reference='editable-image-widget'][hide_title='false'] > .grid-stack-item-content > .ibox-content {
    height: calc(100% - 46px);
    /* required by image-widget new sizing model */
}


.grid-stack-item[reference='editable-image-widget'][hide_title='true'] > .grid-stack-item-content > .ibox-content {
    height: 100%;
}


.worldmap-marker {
    fill: #1c4176;
    stroke: #1c4176;
    stroke-width: 2;
    opacity: 1;
    transition: opacity 1s;
}

.table.no-border-top-on-first-line tr:first-child td {
    border-top: 0;
}


/* Pivotal [#170105472] commented for allowing export from dropdown menu */
/*div.dataTables_wrapper.dt-bootstrap {*/
/*    overflow-x: auto;*/
/*}*/

/* strip content names in first table column */
table[id*="clip"].datatable td:nth-child(1) {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 150px;
}

div div.fc-event:not(:first-child) {
    margin-top: 10px;
}

.fc-event.ui-draggable {
    cursor: pointer;
}

.fc-event.ui-draggable.ui-draggable-dragging {
    cursor: move;
}

.ibox-metric h5 i {
    padding-top: 3px;
}

.dynamic-filters-buttons .filter_display {
    background-color: #f3f3f2;
}


/* Background images related style */
.background-caption {
    position: absolute;
    bottom: 7px;
    right: 7px;
    padding: 3px;
}

.background-left-caption {
    position: absolute;
    bottom: 7px;
    left: 7px;
    padding: 3px;
}

.background-nav-container {
    display: flex;
    position: absolute;
    gap: 10px;
    top: 7px;
    right: 7px;
    padding: 3px;
    background: #ffffffab;
}

.background-nav-container img {
    opacity: 0.4;
}

.background-nav-available {
    cursor: pointer;
    opacity: 1 !important;
}

.background-comparison-container {
    display: flex;
    position: absolute;
    gap: 10px;
    top: 7px;
    right: 7px;
    padding: 3px;
    background: #ffffffab;
}

.background-comparison-container img {
    opacity: 0.4;
}

.background-comparison-available {
    cursor: pointer;
    opacity: 1 !important;
}


.background-caption-text {
    background: #ffffffab;
}

.background-img-container {
    position: relative;
    aspect-ratio: 16/9;
}

.background-item .img-responsive {
    height: 100%;
    margin: auto;
}

.img-htmx-indicator {
    display: none;
}

.htmx-request.img-htmx-indicator {
    display: inline-block;
    width: 15px;
    margin-left: 10px;
}

.background-img-placeholder {
    margin: auto;
}

.overview-btn-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.background-req-container {
    display: flex;
    position: absolute;
    gap: 10px;
    top: 7px;
    left: 7px;
    padding: 3px;
    background: #ffffffab;
}

.background-req-container img {
    margin: auto;
    display: block;
    cursor: pointer;
}

.background-req-container span {
    position: relative;
    bottom: 0px;
    right: 0px;
    padding: 0px;
    background: none;
}

.background-grid {
    display: flex;
}

.grid-loader {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.link {
    text-decoration: underline;
    font-weight: bold;
}

button.btn-add-page {
    margin-bottom: 5px !important;
}

h3.add-page {
    margin-bottom: 25px;
}

.btn-download {
    background-color: #fbd54a;
    border-color: #fbd54a;
    color: #2c2760;
    font-size: 18px;
}

h5.vr-version {
    color: #2c2760;
    font-size: 12px;
}

li.list-group-item.dashboard-tags {
    line-height: 22px;
}

span.label-tag {
    cursor: pointer;
}

/* Pivotal [#161078043] */
.modeled-locations-inputs {
    /* mimics default button color */
    background-color: rgb(221, 221, 221);
}

.modeled-locations-inputs input {
    width: 45px;
    font-size: 10px;
    border-width: 0;
    background-color: #f1f1f2;
}

.modeled-locations-inputs input.modeled_primary_input {
    background-color: #ffffff;
}


.btn-opt-shortcut.active {
    background-color: #6C6DFF !important;
    border-color: #6C6DFF !important;
}

.chart-title .debug-chart {
    color: red;
}

/* #162907628: always visible, hide it ATM */
#hint_id_json_options {
    display: none;
}

#editable-image-widget {
    height: 100%;
}

.quividi-img-responsive {
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.quividi-logo-print {
    margin-left: 5px;
}

.btn-new-dashboard {
    margin-bottom: 20px;
}

.campaigns-back-to-dt {
    font-weight: initial;
    clear: both;
}

.campaigns-back-to-dt a {
    color: #A7B1C2;
}

.campaigns-view .nav-tabs {
    margin-top: 10px;
}

.campaigns-view .nav-tabs > li {
    width: 15%;
    font-size: 14px;
}

.campaigns-view .nav-tabs > li > a:hover,
.campaigns-view .nav-tabs > li.active > a {
    background-color: initial;
    border-radius: initial;
    border: none;
    border-bottom: 2px solid #6C6DFF;
}

.campaigns-view .campaigns-date {
    margin-top: -10px;
    margin-bottom: 10px;
    color: #949DAC;
}

.campaigns-view .panel-body {
    padding: 15px 0;
}

.campaigns-actions {
    margin-top: 20px;
    font-size: 20px;
}

.campaigns-actions a {
    margin-left: 20px;
}

.campaigns-actions-list {
    font-size: 18px;
    margin-left: 5px;
}

[v-cloak] > * {
    display: none;
}

[v-cloak]::before {
    content: "loading…";
}

.campaign-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(55px, auto);
    margin-bottom: 10px;
    grid-column-start: 1;
    grid-column-end: 12;
}

.campaign-cell {
    border-radius: 10px;

    position: relative;
    background-color: #ffffff;
    padding: 10px;

    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0.10), 0 0px 8px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px 0px rgba(0, 0, 0, 0);
    /* would be better :shrug: */
    /*box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0.10), 1px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 0px rgba(0, 0, 0, 0);*/
    overflow: hidden;
}

.campaign-cell-no-bck {
    background-color: initial;
    box-shadow: initial;
}

.campaign-cell-with-subgrid {
    background-color: initial;
}

.campaign-subgrid-wrapper {
    border-radius: 10px;
    background: white;
    grid-gap: 2px;
    box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0.10), 0 0px 8px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.campaign-subgrid-wrapper .campaign-cell {
    box-shadow: initial;
    background-color: initial;
}

.campaign-subgrid-wrapper:first-of-type {
    margin-top: -10px;
}

.campaign-subgrid-wrapper:not(:first-of-type) {
    margin-top: 30px;
}

.campaign-content-kpis .campaign- {
    color: #d5c9c8;
    line-height: 2.2em;
    padding-left: 0;
}

.campaign-subgrid-wrapper .campaign-content-kpis {
    line-height: 3em;
    padding-left: 40px;
}

.campaign-content-kpis [class^="fa-quividi-"],
.campaign-content-kpis [class*=" fa-quividi-"] {
    line-height: inherit;
}

.campaign-content-kpis .fa-stack-1x,
.campaign-content-kpis .kpi-value {
    color: #2c2760;
}

.campaign-kpi-best,
.campaign-content-kpis .campaign-kpi-best .kpi-value {
    color: #00a676;
    font-weight: bold;
}

.campaign-kpi-best .fa-stack-1x {
    color: white;
}

.campaign-summary-kpis .row {
    margin-top: 10px;
}

.campaign-summary-kpis,
.campaign-summary-score .row div {
    font-size: 18px;
    margin-left: 10px;
}

.campaign-cell h2 {
    margin-top: 2px;
}

.campaign-cell h2 small {
    text-transform: initial;
}

.campaign-summary-desc {
    font-size: 1.4em;
    margin-top: 20px;
}

.campaign-summary-content > h4,
.campaign-contents-performance h4 {
    text-align: center;
}

.campaign-leaderboard {
    width: 100%;
    margin-top: 25px;
}

.campaign-leaderboard span {
    font-size: 18px;
    margin-left: 5px;
}

.campaign-leaderboard span,
.campaign-leaderboard i {
    vertical-align: middle;
}

.campaign-leaderboard td {
    text-align: center;
    font-weight: bold;
    color: black;
    font-size: 16px;
}

.campaign-leaderboard th {
    text-align: center;
}

.campaign-summary-score i,
.campaign-summary-kpis i,
.campaign-leaderboard i {
    color: #2c2760;
}

.campaign-summary-score {
    margin-top: 30px;
    margin-bottom: 30px;
}

.campaign-content-target {
    margin-top: 5px;
    text-align: center;
}

/* summary KPIs */
.campaign-cell .widget {
    margin: 5px 0;
    padding-left: 0;
}

.campaign-cell .reload {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    z-index: 1;
    opacity: 0.25;
}

.debug .campaign-cell .reload {
    display: inline-block;
}

.js-plotly-plot {
    position: relative;
    /* in order to place reload relative to each plot */
}

.campaign-scroll-zone,
.campaign-sync-scroll-zone {
    overflow-x: auto;
    white-space: nowrap;
}

.campaign-scroll-element * {
    white-space: initial;
}

.campaign-scroll-element {
    display: inline-block;
    float: none;
    padding-top: 15px;
    padding-bottom: 15px;
}

.row-campaign-kpi {
    display: flex;
    align-items: center;
}

.row-campaign-kpi .col-xs-2 {
    margin-right: 10px;
}

.back-card {
    background-color: #ecececc7;
    margin-bottom: 7px;
    padding: 7px;
    display: grid;
}

.back-card > .row {
    display: flex;
    align-items: center;
}

.back-card-1 {
    min-height: 195px;
}

.back-card-2 {
    min-height: 75px;
}

.back-card-3 {
    min-height: 90px;
}

.back-card > .row > div {
    line-height: 1.7em;
}

.campaign-per-content-general {
}

.campaign-per-content-general > h4 {
    text-align: center;
}

.campaign-per-content-general .campaign-content-kpis {
    margin-top: 10px;
}

.campaign-list-thumbnail {
    height: 40px;
    width: 40px;
    display: inline-block;
    border-radius: 22px;
    margin-right: 8px;
}

.tooltip-inner {
    max-width: 400px;
    white-space: pre-wrap;
}

.tooltip-d3 {
    background-color: white;
    border: 2px solid;
    border-radius: 5px;
    padding: 5px;
}

/* custom highlight in select2 dropdowns */
.select2-results__option[aria-selected="true"] {
    background-color: #A6D785 !important;
}

/* Change height of the dropdown options list (200 px default) */
.select2-results__options {
    max-height: 300px !important
}

.d-none {
    display: none;
}

.d-inline {
    display: inline;
}

.homepage-danger {
    color: #c91212;
    font-weight: bold;
}

.homepage-warning {
    color: #edb100;
    font-weight: bold;
}

.homepage-primary {
    color: green;
    font-weight: bold;
}

.select2-search__field {
    cursor: pointer;
}

/* select2 containers have fixed width otherwise */
.select2-container {
    max-width: 100%;
    min-width: 100%;
}

.vrc-success {
    color: #28a745;
}

.vrc-danger {
    color: rgb(177, 19, 19);
}

.modal-parent {
    display: flex !important;
}

/* table within dashboards */
.modal-dialog.modal-lg {
    /* Width */
    min-width: 600px;
    max-width: 90%;
    width: auto;
    margin: 30px auto;
}

.text-bold {
    font-weight: bold;
}

/*container queries: reduce some font sizes when c3 charts are too small*/
.c3.chart {
    container-name: c3-chart;
    container-type: inline-size;
}

@container c3-chart (max-width: 500px) {
    svg .c3-legend-item {
        font-size: 9px;
    }

    svg .c3-axis {
        font-size: 8px;
    }
}

.ibox-footer-flex {
    font-style: italic;
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    column-gap: 5px;
}

.camera-icons {
    display: flex;
    column-gap: 3px;
}

.camera-issue > input {
    display: none;
}

.camera-issue > label {
    cursor: pointer;
}

/* add margin below each fieldset in forms */
.ibox-content fieldset {
    margin-bottom: 10px;
}

/* VC2024 */
.new-bg {
    background-color: #F3F6FD;
}

.ibox {
    border-radius: 15px;
}

.ibox-content {
    border-radius: 0 0 15px 15px;
}

.ibox-round {
    border-radius: 15px;
}

.ibox-info {
    border-radius: 15px;
}

.ibox-title {
    border-radius: 15px 15px 0 0;
}

.ibox-title-default {
    border-radius: 15px;
}

.nav-header {
    background-color: #2E2591;
    margin-bottom: 20px;
}

body.mini-navbar .nav-header {
    background-color: #2E2591;
}

.navbar-default {
    background-color: #1F195E;
}

.nav > li.active {
    background-color: #2E2591;
}

.nav > li.dashboard-page {
    background-color: white;
}


.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    background-color: #2E2591;
    color: white;
}

body {
    background-color: #1F195E;
}

.btn {
    border-radius: 10px;
}

.btn-primary {
    background-color: #2D6AFD;
    border-color: #2D6AFD;
    color: #FFFFFF;
}

.btn-default {
    background-color: #2D6AFD;
    border-color: #2D6AFD;
    color: #FFFFFF;
    border-radius: 10px;
}

.logo-element-bottom {
    background-color: #1F195E;
}

.badge-primary {
    background-color: #2D6AFD;
}

.form-control,
.single-line {
    border-radius: 10px;
}

.btn-new-chart {
    color: white !important;
}

.search-container {
    border-radius: 15px;
}

.input-group-addon-search {
    border-radius: 10px;
}

.btn-success {
    border-radius: 10px;
}

.panel-heading {
    border-radius: 15px 15px 0 0;
}

/* FLEX CLASSES HELPERS */
.d-flex {
    display: flex;
}

.flex-center {
    justify-content: center;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

/* Toggle button (e.g in navigator) */
.toggle-switch > input[type="checkbox"] {
    display: none;
}

.toggle-switch {
    display: flex;
    align-items: center;
    margin: 0 0 0 2em;
    align-self: center;
}

.toggle-switch > span {
    font-size: 18px;
}

.toggle-switch > label {
    cursor: pointer;
    height: 0;
    position: relative;
    width: 40px;
    margin: 4px 0 0 10px;
}

.toggle-switch > label::before {
    /*background: var(--highlight-color);*/
    background: rgb(200, 200, 200);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 14px;
    margin-top: -10px;
    position: absolute;
    opacity: 0.3;
    transition: all 0.2s ease-in-out;
    width: 35px;
}

.toggle-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 20px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.2s ease-in-out;
    width: 20px;
}

.toggle-switch > input[type="checkbox"]:checked + label::before {
    background: var(--highlight-color);
    opacity: 0.4;
}

.toggle-switch > input[type="checkbox"]:checked + label::after {
    background: var(--highlight-color);
    left: 20px;
}

/* bi-directional toggle */
.toggle-switch-always-blue > label::before {
    background: var(--highlight-color) !important;
    opacity: 0.4;
}

.toggle-switch-always-blue > label::after {
    background: var(--highlight-color) !important;
}

/* Chatbot CSS */

.chat-toggle {
    display: block;
    z-index: 1000;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.chat-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
}

/*#chat_container {*/
/*    position: absolute;*/
/*    bottom: 20px;*/
/*    right: 20px;*/
/*}*/


/* scene comparison page */
.scene-panel-row {
    display: grid;
    grid-template-columns: 1fr 200px 1fr;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin-bottom: 20px;
    margin-right: 20px;
}

.scene-panel-img-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    position: relative;
    aspect-ratio: 16 / 9;
    flex-direction: column;
}

.scene-label {
    margin-bottom: 10px;
    font-weight: bold;
}

.scene-panel-img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: block;
}

.scene-message-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    gap: 10px;
}

.scene-panel-outer {
    transition: all 0.4s ease-out;
    overflow: hidden;
}

.scene-panel-fadeout {
    opacity: 0;
    visibility: hidden;
}

.scene-panel-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.scene-panel-background-item {
    min-height: 600px;
}

.scene-badge {
    display: block;
    width: fit-content;
    margin: 1px auto;
    padding: 3px 10px;
    color: white;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
}

.scene-badge--small {
    background: #3498db;
}

.scene-badge--major {
    background: #ea8078;
}

.scene-badge--camera {
    background: #f39c12;
}

.scene-badge--blur {
    background: #9b59b6;
}

.scene-badge--resolution {
    background: #1abc9c;
}

.scene-badge--mask {
    background: #e67e22;
}

/* inline datatable badges are slightly smaller */
.scene-badge-datatable {
    padding: 2px 6px;
    margin: 1px;
    border-radius: 3px;
    font-size: 0.85em;
}

.scene-badge-empty {
    color: #95a5a6;
}

/* metrics items that are used both in Navigator and SceneComparison */

.glyphicon-save {
    font-size: 22px;
}

.glyphicon-resize-vertical {
    font-size: xx-large
}

.metric-item {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 15px;
    border-radius: 15px;
    background: var(--metric-bg-color) !important; /* important for print purposes (erase default white bg) */
    border: 1px solid #e7eaec;
}

.metric-evol {
    color: #FFF;
    background: #B8B8B8;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 1000px;
    box-shadow: 0 10px 40px 0 rgba(22, 104, 123, 0.25);
    padding: 7px 5px;
}

.metric-evol-down {
    background: #fa4f4f !important; /* important for print purposes (erase default white bg) */
}

.metric-evol-down-dark {
    background: #C21F1F !important; /* important for print purposes (erase default white bg) */
}

metric-evol-up {
    background: #33cb4b !important; /* important for print purposes (erase default white bg) */
}

.metric-evol-up-dark {
    background: #168A2B !important; /* important for print purposes (erase default white bg) */
}

.glyphicon-resize-horizontal {
    font-size: xxx-large
}

/* SweetAlert2: override base font-size (default 1rem = 13px in our Bootstrap 3 theme) */
.swal2-popup:not(.swal2-toast) {
    font-size: 16px;
}