/*
DARK MODE COLORS
*/

:root {
  --clr-primary: #724cf9;
  --clr-success: #4daf7b;
  --clr-danger: #f95738;
  --clr-info: #65afff;
  --clr-warning: #F7B538;

  --foreground: #121212;
  --background: #d0d4d7;
  --background-2: #e7e8e9;
  --background-3: white;
}

.darkmode {
  --clr-primary: #724cf9;
  --clr-success: #4daf7b;
  --clr-danger: #f95738;
  --clr-info: #65afff;
  --clr-warning: #F7B538;

  --foreground: #e7e3e7;
  --background: black;
  --background-2: #121212;
  --background-3: #1e1e1e;
}


:root {
    --dark_mode_gray1: #121212;
    --dark_mode_gray2: #282828;
    --dark_mode_gray3: #2f2f2f;
    --dark_mode_gray4: #424242;
    --dark_mode_gray5: #656565;
    --dark_mode_gray6: rgba(60,60,60,0.94);
    --dark_mode_white1: rgba(255,255,255,0.87);
    --dark_mode_white2: rgba(255,255,255,0.66);
    --dark_mode_white3: rgba(255,255,255,0.5);
    
    --dark-color1: #724cf9;
    --dark-color2: #6745e1;
    --dark-color3: #5c3dc8;
    --dark-color4: #5036af;
    --sidebar-dark-color-1: #724cf9;
    --sidebar-dark-color-2: #5036af;
    
    --color1: #724cf9;
    --color2: #815efa;
    --color3: #8f70fb;
    --color4: #9d82fb;
    --sidebar-color-1: #724cf9;
    --sidebar-color-2: #9d82fb;
    
    --blue: #4e73df;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #e74a3b;
    --orange: #fd7e14;
    --yellow: #f6c23e;
    --green: #1cc88a;
    --teal: #20c9a6;
    --cyan: #36b9cc;
    --white: #fff;
    --gray: #858796;
    --gray-dark: #5a5c69;
    --primary: #4e73df;
    --secondary: #858796;
    --success: #1cc88a;
    --info: #36b9cc;
    --warning: #f6c23e;
    --danger: #e74a3b;
    --light: #f8f9fc;
    --dark: #5a5c69;
}

/*
DARK MODE TAKEOVER
*/

body {
    scrollbar-color: var(--clr-primary) var(--background-2);
    scrollbar-width: thin;
}

.ql-editor {
    min-height: 200px;
}

.ql-container.ql-snow,
.ql-toolbar.ql-snow {
    border: 1px solid var(--foreground);
}

.ql-snow .ql-picker,
.ql-snow .ql-picker-options,
.ql-snow .ql-formats button {
    background: var(--background-2);
}

.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
    margin-bottom: 5px;
}

.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    background: var(--clr-primary);
    color: white;
    stroke: white;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: white;
}

#pricing_msg {
    background: var(--background-2);
}

.badge-primary-soft.text-primary {
    color: white!important;
}

.page-item.disabled .page-link,
.page-link {
    color: var(--foreground);
    background-color: var(--background-2);
    border: 1px solid var(--background-3);
}

.page-link:hover {
    background-color: var(--color1);
    border-color: var(--background-3);
    color: white;
}

.page-item.active .page-link {
    background-color: var(--color1);
    border-color: var(--background-3);
}

.disabled {
    opacity: 0.25 !important;
}

body {
  background: var(--background)!important;
  color: var(--foreground)!important;
}

.close {
    color: var(--foreground)!important;
    text-shadow: none!important;
    opacity: .5;
}

.sp-colorize-container {
    background: none!important;
}

.sp-container {
    background-color: var(--background)!important;
    color: var(--foreground)!important;
}

.sp-palette-container {
    border-right: solid 1px var(--background-3)!important;
}

.sp-container button.sp-choose {
    background-color: var(--clr-success)!important;
}

.file_music_library .icon_type,
.file_music_library .name_file {
    color: var(--foreground)!important;
}

/* Change Autocomplete styles in Chrome*/
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
textarea:-webkit-autofill,
input[type="password"]:-webkit-autofill,
select:-webkit-autofill {
  border: 1px solid var(--background-2)!important;
  -webkit-text-fill-color: var(--foreground)!important;
  -webkit-box-shadow: 0 0 0px 1000px var(--background-2) inset!important;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* your error styles */
input:is(:invalid, [aria-invalid=true]) {
  background-color: var(--background-2);
  border: 1px solid var(--background-2);
}

/* hack needed to get rid of autofill styles only on invalid forms */
input:is(:invalid, [aria-invalid=true]):is(:-webkit-autofill, :-webkit-autofill:focus) {
  transition: background-color 600000s 0s, color 600000s 0s;
}

input {
    background-color: var(--background-2) !important;
    background-image: none !important;
    color: var(--foreground) !important;
}

input:-internal-autofill-selected {
    background-color: var(--background-2) !important;
    background-image: none !important;
    color: var(--foreground) !important;
}

#poweredby_type {
    background-color: var(--background-3) !important;
}

.card-body {
    color: var(--foreground)!important;
}


.badge-secondary {
    color: #fff;
    background-color: var(--clr-primary)!important;
}

.badge-light {
    color: var(--foreground)!important;
    background-color: var(--background-2)!important;
}

.progress-bar {
    background-color: var(--clr-primary)!important;
}

.progress {
    background-color: var(--background-2)!important;
}

.rooms_slider .room_quick_btn,
.rooms_slider .room_image {
    border: 2px solid var(--foreground)!important;
}

#rooms_slider_m .room_image {
    border-right: none !important;
}

.rooms_slider {
    margin: 0px!important;
    max-height: 90px;
}

.slick-slide {
    padding: 5px!important;
    transition: all .5s ease-in-out;
}

.slick-slide:hover {
    background: var(--background-2);
}


.rooms_slider .selected_room .room_quick_btn,
.rooms_slider .selected_room .room_image {
    border: 4px solid var(--color1)!important;
}

div#IconPickerModal .ip-icons-content .ip-icons-search > i.placeholder-icon {
    color: var(--foreground)!important;
}

div#IconPickerModal .ip-icons-content {
    background: var(--background)!important;
    color: var(--foreground)!important;
    box-shadow: 0 0 24px -8px rgb(0 0 0 / 20%);
}

div#IconPickerModal .ip-icons-content .ip-icons-search-results > * > i:hover, div#IconPickerModal .ip-icons-content .ip-icons-area > i:hover {
    background: var(--clr-primary)!important;
    color: white!important;
}

#msg_drawing {
    background: var(--background)!important;
    color: var(--foreground)!important;
}

.dropzone .dz-preview.dz-image-preview {
    background: transparent!important;
}

.ui_edit_box {
    background-color: var(--background-3)!important;
    color: var(--foreground)!important;
}

.custom-file-label {
    color: var(--foreground)!important;
    background-color: var(--background-2)!important;
    border: 1px solid var(--background-2)!important;
    cursor: pointer!important;
}

.custom-file-label:hover {
    color: white!important;
    background-color: var(--clr-primary)!important;
    border: 1px solid var(--clr-primary)!important;
}

.custom-file-label::after {
    color: white!important;
    background-color: var(--clr-primary)!important;
}

.selectator_element {
    background-color: var(--background-2)!important;
    color: var(--foreground)!important;
    border: 2px solid var(--clr-background-2)!important;
}

.selectator_element:after {
    color: inherit!important;
}

.selectator_element.focused {
    box-shadow: none!important;
}

.selectator_element.single.disable_search.options-visible {
    border: 2px solid var(--clr-primary)!important;
}

.selectator_element:focus {
    border: 2px solid var(--clr-primary)!important;
    background-color: var(--background-2)!important;
}

.selectator_selected_items .selectator_selected_item {
    color: var(--foreground)!important;
}

.selectator_options .selectator_option.active {
    background-color: var(--clr-primary)!important;
    color: white!important;
}

.selectator_options .selectator_option {
    color: var(--foreground)!important;
}

.disable_search .selectator_options {
    border-top: 1px solid #7f9db9;
}
.selectator_options {
    border: none!important;
    background-color: var(--background-2)!important;
    box-shadow: none!important;
}

.nav-tabs {
    border-bottom: 1px solid var(--clr-primary)!important;
}

.nav-tabs .nav-link:hover {
    border: 1px solid var(--clr-primary)!important;
    background: var(--clr-primary)!important;
    color: white!important;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: white!important;
    background-color: var(--clr-primary)!important;
    border: 1px solid var(--clr-primary)!important;
}

.image_icon {
    background-color: rgba(114, 76, 249, 0.5)!important;
    color: var(--foreground)!important;
}
#confirm_edit,
#confirm_move {
    background-color: var(--background-3)!important;
    border: none!important;
    color: var(--foreground)!important;
}

#action_box {
    background-color: var(--background-2)!important;
    border: none!important;
}

#action_box .goto_action:hover {
    color: var(--clr-primary)!important;
}

/* Tables, Charts and Graphs */

.table thead th,
.table-bordered td,
.table-bordered th,
.table-bordered {
    border: 1px solid var(--background-2)!important;
}

.table thead th,
.table-bordered th {
    border-bottom: none!important;
}

.table {
    color: var(--foreground)!important;
    margin-bottom: 12px!important;
}

.dataTables_scroll {
    margin-bottom: 12px!important;
}

input[type='range'],
input[type="file" i] {
    background-color: var(--background-2)!important;
}

input[type="time" i] {
    color: var(--foreground)!important;
    fill: var(--foreground)!important;
}

.highcharts-background {
    fill: var(--background-3)!important;
    color: var(--foreground)!important;
}

.highcharts-grid-line {
    stroke: var(--background-2)!important;
}

.highcharts-button-box {
    fill: var(--background-2)!important;
    color: var(--foreground)!important;
}

.highcharts-button:hover {
    fill: var(--clr-primary);
}

.highcharts-button-box:hover {
    fill: var(--clr-primary)!important;
    color: var(--foreground)!important;
}

.highcharts-button-pressed .highcharts-button-box {
    fill: var(--clr-primary)!important;
}

.highcharts-button-box:hover text,
.highcharts-button-normal .highcharts-button-box text,
.highcharts-button-pressed .highcharts-button-box text {
    fill: var(--foreground)!important;
    color: var(--foreground)!important;
}

text {
    pointer-events: none!important;
}

.highcharts-button-disabled {
    
}

.highcharts-menu {
    background: var(--background-2)!important;
    color: var(--foreground)!important;
    box-shadow: none!important;
    border: none!important;
}

.highcharts-menu-item {
    color: var(--foreground)!important;
}

.highcharts-menu-item:hover {
    color: var(--foreground)!important;
    background: var(--clr-primary)!important;
}

.highcharts-axis-labels,
.highcharts-yaxis-labels {
    color: var(--foreground)!important;
}

.highcharts-navigator-mask-inside {
    fill: rgba(114, 76, 249, 0.3)!important;
}

/* End */

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show>.btn-light.dropdown-toggle {
    background-color: var(--clr-primary);
}

.topbar .nav-item .nav-link .img-profile {
    margin-left: -4px;
}

.topbar #sidebarToggleTop:hover {
    background-color: var(--clr-primary)!important;
    color: white!important;
}

.selected_room {
    color: var(--foreground) !important;
}

.div_panorama_container {
    max-height: calc(100vh - 250px)!important;
}

.pnlm-container {
    background: var(--clr-primary) url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2267%22%20height%3D%22100%22%20viewBox%3D%220%200%2067%20100%22%3E%0A%3Cpath%20stroke%3D%22%23ccc%22%20fill%3D%22none%22%20d%3D%22M33.5%2C50%2C0%2C63%2C33.5%2C75%2C67%2C63%2C33.5%2C50m-33.5-50%2C67%2C25m-0.5%2C0%2C0%2C75m-66.5-75%2C67-25m-33.5%2C75%2C0%2C25m0-100%2C0%2C50%22%2F%3E%0A%3C%2Fsvg%3E%0A) repeat;
}

.dropzone {
    background: var(--background)!important;
    border: 1px dashed var(--clr-primary)!important;
}

.dropzone:hover {
    background: var(--clr-primary)!important;
    border: 1px dashed var(--clr-primary)!important;
    color: white!important;
}

#editor_toolbar {
    background: var(--background)!important;
}

#list_editor_ui_items ul li {
    border-bottom: 1px solid var(--background);
    background: var(--background-3);
    color: var(--foreground);
}

.btn-outline-secondary {
    border-color: var(--clr-primary)!important; 
}

.poi_editor_div {
  background: var(--background)!important;
  color: var(--foreground)!important;
}

.font-picker .fp-modal {
    background: var(--background-2)!important;
    color: var(--foreground)!important;
}

.font-picker .fp-results li.fp-active {
    background-color: var(--clr-primary)!important;
    color: white!important;
}

.font-picker .fp-results li.fp-hover {
    background-color: var(--clr-primary)!important;
    color: white!important;
}

.rooms_slider {
    width: 100%!important;
    margin-left: 0px!important;
    background: var(--background-3)!important;
}

.slick-next:before {
    color: var(--clr-primary)!important;
    margin-left: -60px!important;
}

.slick-prev:before {
    color: var(--clr-primary)!important;
    margin-left: 30px!important;
}

.div_map_grid .map_content > div:first-of-type,
.div_vt_grid .vt_content > div:first-of-type,
.div_room_grid .room_content > div:first-of-type {
    width: 100%!important;
    margin-bottom: 10px!important;
}

.map_content > div:first-of-type,
.vt_content > div:first-of-type,
.room_content > div:first-of-type {
    height: auto!important;
    aspect-ratio: 16 / 9!important;
}

.map_content > div:first-of-type img,
.vt_content > div:first-of-type img,
.room_content > div:first-of-type img {
    height: 100%;
    object-fit: cover;
}


.preview_room_overlay {
    border: 0px!important;
}

.img2_vt {
    width: 25%!important;
    height: 50%!important;
    border-bottom: 2px solid var(--background-3)!important;
    border-left: 2px solid var(--background-3)!important;
}

.img3_vt {
    width: 25%!important;
    height: 50%!important;
    top: 50%!important;
    border-left: 2px solid var(--background-3)!important;
}

.modal-content {
    background-color: var(--background-3)!important;
    border: 1px solid rgba(0,0,0,.2);
}

.modal-header {
    border-bottom: 1px solid var(--background-2)!important;
}

.modal-footer {
    border-top: 1px solid var(--background-2)!important;
}

.dd3-content {
    border: 1px solid var(--background-2)!important;
    background: var(--background-2)!important;
    color: var(--foreground)!important;
}

.dd3-handle,
.category_editable {
    border: 1px solid var(--background)!important;
    background: var(--background)!important;
    color: var(--foreground)!important;
}

.dd-placeholder {
    background: var(--background)!important;
    border: 1px dashed var(--clr-primary)!important;
}

.input-group-text {
    color: var(--foreground)!important;
    background-color: var(--background)!important;
    border: 0px!important;
}

.btn-light {
    background: none;
}

.toggle.btn.btn-light,
.toggle.btn.btn-outline-light {
    background-color: var(--background-2)!important;
    border-color: var(--clr-primary)!important;
}

.btn-light:hover {
    color: #3a3b45;
    background-color: var(--clr-primary)!important;
    border-color: var(--clr-primary)!important;
}

.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before,
.shepherd-element.shepherd-has-title[data-popper-placement^=left]>.shepherd-arrow:before,
.shepherd-element.shepherd-has-title[data-popper-placement^=right]>.shepherd-arrow:before,
.shepherd-element.shepherd-has-title[data-popper-placement^=top]>.shepherd-arrow:before {
    background-color: var(--background-3)!important;
}

.shepherd-title,
.shepherd-content,
.shepherd-header,
.shepherd-footer,
.shepherd-text {
    background-color: var(--background-3)!important;
    color: var(--foreground)!important;
}

.shepherd-progress-bar span {
    background: var(--clr-primary)!important;
}

.shepherd-button {
    background: var(--clr-primary)!important;
    color: white!important;
}

.shepherd-cancel-icon {
    color: var(--foreground)!important;
}

.shepherd-cancel-icon {
    color: var(--clr-primary)!important;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: white!important;
    background-color: var(--clr-primary)!important;
}

.dropdown .dropdown-menu .dropdown-header {
    color: var(--clr-primary)!important;
}

.dropdown-list .dropdown-item:focus,
.dropdown-list .dropdown-item:hover {
    background-color: transparent!important;
}

.div_vt .card-body {
    flex: 1 1 auto!important;
}

.toggle-handle {
    background-color: var(--clr-primary)!important;
}

.bootstrap-select .no-results {
    background: transparent;
}

.form-control:disabled, .form-control[readonly] {
    padding: .375rem .75rem!important;
}

.form-control,
input[type=search],
input[type=text],
input[type=password],
input[type=email],
input[type=select] { 
	color: var(--foreground)!important;  
	background-color: var(--background-2)!important;
	border: var(--background-2)!important;
	box-shadow: none!important;
	-webkit-appearance: none!important;
   -moz-appearance:    none!important;
   appearance:         none!important;
   min-height: 40px;
}

.rename_input {
    min-height: 26px!important;
}

input[type=checkbox]:checked,
input[type=radio]:checked {
	background-color: var(--clr-primary)!important;
	border: var(--clr-primary)!important;
}

.form-control:focus,
input[type=search]:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=select]:focus,
input[type=checkbox]:focus,
input[type=radio]:focus { 
	outline: 2px solid var(--clr-primary)!important;
	box-shadow: none!important;
}

input[type='checkbox'], input[type='radio'] {
    --background: var(--background-2)!important;
    --disabled: var(--background-2)!important;
    --disabled-inner: var(--background-2)!important;
    border: 1px solid var(--background-2)!important;
    background: var(--background-2)!important;
}

.btn .dropdown-toggle {
    color: var(--foreground)!important;
    background-color: var(--background-2)!important;
	border: var(--clr-primary)!important;
	box-shadow: none!important;
}

.badge-primary-soft,
.bg-primary-soft {
    background-color: var(--clr-primary) !important;
}

.dropdown-item,
.dropdown-menu {
    color: var(--foreground)!important;
    background-color: var(--background)!important;
    border: 1px solid var(--background)!important;
    
}

.dropdown-item {
    padding: .25rem 1rem;
    font-size: 12px;
}

[aria-labelledby="userDropdown"] .dropdown-item,
[aria-labelledby="langDropdown"] .dropdown-item {
    display: flex;
    align-items: center;
}

#userDropdown span {
    margin-right: 5px!important;
}

.lang_switcher img, .lang_switcher_login img {
    margin: 0px!important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--color1) !important;
    color: #fff !important;
}

.list-group-item {
    background-color: var(--background-3)!important;
    border: 1px solid rgba(0,0,0,.125);
}

.btn {
    color: var(--foreground)!important;
    border: 2px solid !important;
    border-color: transparent!important;
}

.btn:hover {
    color: white!important;
}

#tool_ui .btn {
    margin-bottom: 5px;
}

#tool_ui .btn:hover {
    background: var(--clr-primary);
}

.btn.btn-block.btn-outline-secondary {
    background: var(--background-2)!important;
}

.btn.btn-block.btn-outline-secondary:hover {
    background: var(--clr-primary)!important;
    color: white!important;
}

.handle.btn.btn-primary.btn-circle.tooltipstered {
    background: var(--clr-primary)!important;
}

.handle.btn.btn-primary.btn-circle.tooltipstered i {
    color: white!important;
}

.btn-dark,
.btn-secondary,
.btn-warning,
.btn-info,
.btn-danger {
    color: #fff!important;
}

.btn-primary {
    color: white!important;
    border-color: var(--clr-primary)!important;
    background-color: var(--clr-primary)!important;
}

.btn-outline-primary {
    border-color: var(--clr-primary)!important;
}

.btn-outline-primary:hover {
    color: white!important;
}

.btn-secondary {
    border-color: var(--clr-primary)!important;
    background-color: transparent!important;
    color: var(--foreground)!important;
    cursor: pointer!important;
}

.btn-secondary:hover {
    border-color: var(--clr-primary)!important;
    background-color: var(--clr-primary)!important;
    color: white!important;
}

.btn-success {
    color: white!important;
    border-color: var(--clr-success)!important;
    background-color: var(--clr-success)!important;
}

.btn-danger {
    color: white!important;
    border-color: var(--clr-danger)!important;
    background-color: var(--clr-danger)!important;
}

.btn-info {
    color: white!important;
    border-color: var(--clr-info)!important;
    background-color: var(--clr-info)!important;
}

.btn-warning {
    color: white!important;
    border-color: var(--clr-warning)!important;
    background-color: var(--clr-warning)!important;
}

.btn:hover {
    opacity: .8;
}

.btn.dropdown-toggle.vt_selector_btn {
    border: none!important;
}

.btn.dropdown-toggle.vt_selector_btn:hover {
    color: var(--foreground)!important;
}

#btn_list_hs,
#btn_toggle_effetcs,
#btn_screenshot {
    color: var(--foreground)!important;
    background-color: var(--background-2)!important;
    border-color: var(--background-2)!important;
}
#btn_list_hs:hover,
#btn_toggle_effetcs:hover,
#btn_screenshot:hover {
    color: white!important;
    background-color: var(--clr-primary)!important;
    border-color: var(--clr-primary)!important;
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show>.btn-secondary.dropdown-toggle {
    color: white!important;
    background-color: var(--clr-primary)!important;
    border-color: var(--clr-primary)!important;
}

.vt_select_header .tooltip_arrows {
    margin-top: 10px!important;
}

.vt_select_header {
    background-color: var(--background)!important;
    color: var(--foreground)!important;
}

.btn-outline-primary {
    background-color: var(--background-2)!important;
}
.btn-outline-primary:hover {
    background-color: var(--clr-primary)!important;
}

.room_buttons:first-child a {
    background-color: var(--clr-primary)!important;
    color: white!important;
}

.blu_color,
.text-success,
.text-primary,
.text-info,
.text-warning {
    color: var(--foreground)!important;
}

.sidebar-dark hr.sidebar-divider {
    border-top: 1px solid var(--background);
    opacity: 1;
    margin: 0px;
}

.sidebar .nav-item.active .nav-link {
    font-weight: 500;
    background-color: var(--clr-primary)!important;
    color: white!important;
}

.sidebar .nav-item .nav-link:hover {
    background-color: var(--clr-primary)!important;
    color: white!important;
}

.sidebar .nav-item .collapse, .sidebar .nav-item .collapsing {
    margin: 1rem;
}

.topbar .topbar-divider {
    border-right: 1px solid var(--foreground)!important;
    margin: auto 0rem!important;
}

.sidebar-dark #sidebarToggle {
    background-color: var(--background)!important;
}

.sidebar-dark.toggled #sidebarToggle::after {
    color: var(--foreground)!important;
}

.sidebar-dark #sidebarToggle::after {
    color: var(--foreground)!important;
}

.sidebar-dark #sidebarToggle:hover {
    background-color: var(--clr-primary)!important;
}

.sidebar-dark #sidebarToggle:hover::after {
    color: white !important;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item {
    color: var(--foreground)!important;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
    background-color: var(--background-2)!important;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
    background-color: var(--clr-primary)!important;
    color: white!important;
    font-weight: 500!important;
}

.sidebar-dark .nav-item .nav-link[data-toggle=collapse]::after {
    color: inherit!important;
}

.sidebar-dark .nav-item .nav-link[data-toggle=collapse] i {
    color: var(--foreground)!important;
}

.sidebar-dark .nav-item .nav-link[data-toggle=collapse]:hover::after,
.sidebar-dark .nav-item .nav-link[data-toggle=collapse]:hover i {
    color: var(--white)!important;
}

.sidebar-dark .nav-item .active .nav-link[data-toggle=collapse]::after,
.sidebar-dark .nav-item .active .nav-link[data-toggle=collapse] i {
    color: var(--white)!important;
}

.sidebar-dark .nav-item:hover .active .nav-link[data-toggle=collapse]::after,
.sidebar-dark .nav-item:hover .active .nav-link[data-toggle=collapse] i {
    color: var(--white)!important;
}

.nav {
    gap: 5px!important;
}

.nav-pills .nav-item {
    border: none!important;
}

.nav-pills .nav-link {
    background-color: var(--background-2) !important;
    color: var(--foreground)!important;
}

.nav-pills .nav-link:hover {
    background-color: var(--clr-primary) !important;
    color: white!important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--clr-primary) !important;
    color: white!important;
}

.text-dark,
.text-secondary,
.text-gray-300,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-gray-800 {
    color: var(--foreground)!important;
}

.bg-white {
    background-color: var(--background)!important;
}

nav.navbar {
    background-color: var(--background-2)!important;
    color: var(--foreground)!important;
}


.navbar .nav-link {
    padding: 0px!important;
}

.sidebar,
.navbar-nav {
    background-color: var(--background-2)!important;
    color: var(--foreground)!important;
}

.bg-gradient-primary {
    background: var(--background-2)!important;
}

#wrapper #content-wrapper {
    background-color: var(--background)!important;
    color: var(--foreground)!important;
    overflow-y: scroll;
}

.container-fluid {
    background-color: var(--background)!important;
    color: var(--foreground)!important;
    padding-top: 8px!important;
}

.card-header {
    background-color: var(--background-2)!important;
    color: var(--foreground)!important;
    border: none!important;
}

.card {
    background-color: var(--background-3)!important;
    border-radius: none!important;
    border: var(--background)!important;
}

.card-footer {
    border-top: 1px solid var(--background)!important;
}

#div_image_logo_s, #div_image_logo {
    background-color: rgba(114, 76, 249, 0.5)!important;
}

.bg-warning .card-body {
    background: var(--clr-warning)!important;
    color: white!important;
    border-radius: 0.25rem;
}

.bg-warning .card-body .text-white {
    color: var(--clr-danger)!important;
}

/*
LOGIN CSS
*/

#footer_login {
    background: transparent;
}

#footer_login .footer_link a {
    color: white!important;
}

#footer_login .footer_link a:hover {
    color: white!important;
    opacity: 0.5;
}

#footer_login .copyright {
    color: white!important;
}


/*
DESIGN TWEAKS
*/

/* List Tours and Rooms Grids */

.row .vt,
.row .room {
    gap: 5px;
    flex-wrap: nowrap;
}

@media (max-width: 1366px) {
  
}

.vt_info {
    position: relative;
}
.button_storage_vt {
    position: absolute;
    top: 5px;
    left: 0;
}

.vt_info input,
.vt_name {
    margin-left: 30px!important;
}

.row .vt .vt_content,
.row .room .room_content {
    max-width: 100%!important;
    flex: 1 0 auto!important;
    width: auto!important;
}

.row .vt .vt_buttons,
.row .room .room_buttons {
    max-width: 100%!important;
    flex: 0 0 auto!important;
    margin-left: auto!important;
}
/*
@media only screen and (max-width: 1510px) {
    .row .vt,
    .row .room {
        flex-direction: column;
    }
    .row .vt .vt_buttons,
    .row .room .room_buttons {
        margin-left: 0!important;
        justify-content: flex-start;
    }
}
*/

#maps_list,
#rooms_list,
#virtual_tours_list {
    margin: 0px!important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px
}

#maps_list > :not(.div_map_grid),
#rooms_list > :not(.div_room_grid),
#virtual_tours_list > :not(.div_vt_grid),
#virtual_tours_list > :first-child {
  grid-column: 1 / -1;
}

#rooms_list > div,
#virtual_tours_list > div {
  width: 100%!important;
  margin: 0px!important;
}

#search_div {
    margin-bottom: 15px;
}

.search_vt_div {
    margin-inline: 5px!important;
}

.room_name {
    margin-top: 5px!important;
}

.div_vt,
.div_room,
.div_map {
    border-left: 0.25rem solid var(--background-2)!important;
}
.div_vt:hover,
.div_room:hover,
.div_map:hover {
    border-left: 0.25rem solid var(--color1)!important;
    background: var(--background-2) !important;
}

.div_vt .vt_content div:first-of-type,
.div_room .room_content div:first-of-type,
.div_map .map_content div:first-of-type {
    border: 4px solid transparent !important;
}

.div_vt:hover .vt_content div:first-of-type,
.div_room:hover .room_content div:first-of-type,
.div_map:hover .map_content div:first-of-type {
    border: 4px solid var(--color1) !important;
}

.vt_buttons .btn,
.room_buttons .btn,
.map_buttons .btn {
    border-radius: 50%;
    display: flex!important;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 30px;
}

.vt_buttons,
.room_buttons,
.map_buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 30px));
    gap: 5px;
    align-content: center;
    justify-content: end;
    padding: 0px!important;
    margin: 0px;
}

.div_vt_grid .vt_buttons,
.div_room_grid .room_buttons,
.div_map_grid .map_buttons {
    justify-content: center;
}

.room_info,
.map_info,
.vt_info {
    margin-left: 0px!important;
}

.div_vt_grid .vt {
    gap: 10px;
    height: 100%;
}

.div_vt_grid .vt_buttons {
    margin-top: auto!important;
}

.div_vt_grid .card-body {
    height: 100%;
}

.map_content,
.room_content,
.vt_content {
    padding: 0px;
}

.room_image_div > .preview_room_overlay:hover {
    border: 0px!important;
}

.room_image_div > .preview_room_overlay {
    border: 0px!important;
}

/* End */

.dashboard_stats .card.border-left-success,
.dashboard_stats .card.border-left-warning,
.dashboard_stats .card.border-left-info,
.dashboard_stats .card.border-left-primary {
    background: linear-gradient(to right, var(--clr-primary) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-in-out;
}

.dashboard_stats .card.border-left-primary:hover,
.dashboard_stats .card.border-left-warning:hover,
.dashboard_stats .card.border-left-info:hover,
.dashboard_stats .card.border-left-success:hover {
    background-position: left bottom;
    color: white!important;
}

b,
.rooms_slider .room_name,
.font-weight-bold {
    font-weight: 500!important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt_select_header #save_btn {
    width: 100%!important;
    margin-top: 24px!important;
}

.vt_select_header .btn-danger {
    margin: 0px!important;
    width: 100%!important;
    margin-top: 12px!important;
}

.vt_select_header {
    background-color: var(--background)!important;
    color: var(--foreground)!important;
}

.vt_select_header:has(#loading_header) {
    background-color: var(--background-3)!important;
    color: var(--foreground)!important;
}

.vt_select_header:has(.justify-content-end) {
    background-color: var(--background)!important;
    color: var(--foreground)!important;
}

.justify-content-end #save_btn {
    margin-left: 0px!important;
}

.justify-content-end .btn-danger {
    margin-top: -38px!important;
    margin-bottom: -24px!important;
}

.vt_select_header {
    min-height: auto!important;
    padding-right: 24px!important;
    padding-top: 0px!important;
    padding-left: 24px!important;
    top: 64px!important;
}

.navbar {
    border: none!important;
    height: 65px!important;
    padding: 0.2rem 24px;
    border-bottom: 1px solid var(--background)!important;
}

.nav {
    margin-bottom: 24px!important;
}

.btn:focus,
.button:focus {
    outline: 2px solid var(--clr-foreground)!important;
}

a:focus {
    outline: 2px solid var(--clr-foreground)!important;
}

/*
SIDEBAR
*/

.sidebar.toggled .nav-item .nav-link i {
    font-size: 1rem!important;
}

#sidebar_logo {
    max-width: 100%!important;
    max-height: 100%!important;
    width: 100%!important;
}

.sidebar .sidebar-brand {
    height: auto!important;
    padding: 1.25rem 1rem!important;
}

.sidebar .sidebar-brand:hover {
    opacity: .5;
}

.sidebar-brand-icon {
    min-width: 100%!important;
}

.sidebar-dark .nav-item .nav-link i {
    color: rgba(var(--foreground), 0.5)!important;
}

.sidebar-dark .nav-item .nav-link {
    color: var(--foreground)!important;
}

.sidebar-dark .nav-item.active .nav-link i {
    color: white!important;
}

#measure_editor_div,
#marker_editor_div,
#poi_editor_div {
    background: transparent!important;
}

#btn_close_hs_list,
#slider_hs_list,
.list-group {
    background: var(--background-2)!important;
}

#slider_hs_list {
    border: 0px!important;
}

.marker_div .icon_visible_view,
.icon_visible_view {
    bottom: 90px;
}

.list-group {
    padding: 5px!important;
}

#btn_close_hs_list {
    color: var(--foreground)!important;
}

#modal_new_room,
#modal_preview_global {
    z-index: 99999!important;
    padding: 0px!important;
}

/*
DARK MODE TOGGLE
*/

.countelem_header {
    font-size: 10px!important;
}

#dark-mode-toggle {
    z-index: 1001!important;
    height: 20px;
    width: 30px;
    position: absolute;
    right: 24px;
    top: 19px;
    cursor: pointer;
}

.dark-mode-toggle svg {
  fill: var(--foreground)!important;
}

.dark-mode-toggle:hover svg {
  fill: var(--clr-primary)!important;
}

.dark-mode-toggle:focus {
  outline: var(--clr-primary)!important;
}

.dark-mode-toggle {
  z-index: 100;
  color: var(--foreground);
  background: transparent;
  cursor: pointer;
}

.navbar .navbar-nav {
    font-size: 14px!important;
    gap: 20px;
}

@media only screen and (max-width: 768px) {
    .navbar {
        padding: 0.2rem 8px;
    }
}

.header_menu_title {
    margin-left: 0px!important;
}

.navbar-expand .navbar-nav {
    padding-right: 50px;
}

.flip--x {
    transform: rotateY(180deg);
}

/*
FOOTER
*/

footer.sticky-footer {
    padding-bottom: 5rem!important;
}

#custom_b_html {
    display: none!important;
}

/*
LOGIN FORM
*/

form.user .form-control-user,
form.user .btn-user {
    border-radius: .35em!important;
}

/*
DARK MODE OVERRIDES
*/

.glass_effect_sidebar {
    backdrop-filter: blur(6px) saturate(150%);
    -webkit-backdrop-filter: blur(6px) saturate(150%);
    background-color: var(--background)!important;
}

#video_estimated_duration {
    color: var(--foreground)!important;
}

.new_video_slide {
    border: 1px solid var(--foreground)!important;
}

.new_video_slide:hover {
    border: 1px solid var(--clr-success)!important;
    background: var(--clr-success)!important;
}

.new_video_slide i {
    color: inherit!important;
}

.new_video_slide:hover i {
    color: white!important;
}