/* ----------------------------------------------- */
/* LOAD FONTS */
/* ----------------------------------------------- */

@font-face {
  font-family: 'OpenSans-Light';
  src:  url('../fonts/OpenSans-Light.ttf');
}
@font-face {
  font-family: 'OpenSans-Regular';
  src:  url('../fonts/OpenSans-Regular.ttf');
}
@font-face {
  font-family: 'OpenSans-Semibold';
  src:  url('../fonts/OpenSans-Semibold.ttf');
}

/* ======================================== */
/* GENERAL                                  */
/* ======================================== */

input[name="langs"],
input[name="booking_icon"],
input[name="booking_currency"] {
    display: none !important;
}

.form-row label {
    font-weight: bold;
}

.editable-form {
    min-width: 380px !important;
}

.editable-form select {
    width: 200px !important;
}
.editable-form > p > input[type="text"],
.editable-form > p > input[type="number"],
.editable-form > p > input[type="url"] {
    padding: 3px !important;
    margin-top: 6px !important;
}

#editable-loading {
    height: 24px;
    border: solid 4px #fffcc3;
    border-left-width: 8px;
    border-right-width: 8px;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
}

select {
    display: inline-block;
    margin: 0;      
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
}
select,
input[type="text"],
input[type="number"],
input[type="url"] {
    vertical-align: middle;
    font-weight: normal !important;
    border: 1px solid #bbb;
    border-color: #ccc #ddd #ddd #ccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    padding-left: 6px !important;
    padding-right: 6px;
}

input[type="text"],
input[type="number"],
input[type="url"] {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    -o-user-select: text !important;;
    user-select: text !important;
}

.change-form input[type="text"],
.change-form input[type="number"],
.change-form input[type="url"],
.change-form input[type="number"] {
    padding-top: 6px;
    padding-bottom: 4px;
    height: 14px;
}

select {
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
      calc(100% - 11px) calc(0.75em + 1px), calc(100% - 6px) calc(0.75em + 1px), calc(100% - 1.75em) 0.25em;
    background-size:
      5px 5px,
      5px 5px,
      1px 1.5em;
    background-repeat: no-repeat;
    padding-left: 6px !important;
    padding-right: 27px !important;
}
@-moz-document url-prefix() {
    select {
        padding-left: 3px !important;
    }
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] {
    -moz-appearance: textfield;
}

.multicheckbox li {
    list-style-type: none;
    float: left;
    margin-right: 20px;
}
.multicheckbox li input {
    width: auto;
}
.multicheckbox li label {
    font-weight: normal !important;
}
ul.multicheckbox {
    padding-left: 0px !important;
    margin-top: -5px !important;
}

.table {
    display: table;
}
.table .col {
    display: table-cell;
}
.table .col .row {
    margin-bottom: 5px !important;
}

.hidden {
    display: none;
}

/* ======================================== */
/* TEXT                                     */
/* ======================================== */

.highlight-text .editable-form > p > label {
    display: none !important;
}

/* ======================================== */
/* IMAGE EDITOR                             */
/* ======================================== */

.form-row .edit-image-buttons {
    position: relative;
    float: right;
    top: 13px;
    right: 82px;
    display: none;
}
.editable-form .edit-image-buttons {
    position: absolute;
    right: 40px;
    top: 65px;
    display: none;
}

.editable-form .filer-dropzone {
    padding-right: 80px !important;
}

.js-object-attached .edit-image-buttons {
    display: block;
}
.edit-image-buttons-toggle {
    cursor: pointer;
    display: block;
    padding: 9px;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    width: 36px !important;
    height: 36px !important;
}
.edit-image-buttons-toggle:hover {
    color: #454545 !important;
    background-color: #f2f2f2 !important;
    border-color: #d0d0d0 !important;
}

.edit-image-buttons-toggle.active .fa {
    color: #2b8dad !important;
}
.edit-image-buttons-toggle .fa {
    font-size: 18px !important;
    line-height: 18px !important;
    color: #999;
}
.edit-image-buttons-dropdown {
    position: absolute;
    white-space: nowrap;
    padding: 0px 0px;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    margin-top: 5px;
    line-height: 20px !important;
    z-index: 999;
}
.edit-image-button {
    cursor: pointer;
    display: block !important;
    padding: 3px 9px !important;
}
.edit-image-button:hover,
.edit-image-button:hover span {
    background-color: #a4cedb !important;
}

.edit-image-button span {
    margin-right: 5px;
}

#image_editor {
    position: fixed !important;
    display: flex;
    width: 100vw;
    height: 100vh;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 9999;
}
.image-editor-container {
    display: flex;
    margin: auto;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
}
.image-editor-container input[type="number"] {
    height: 14px !important;
    line-height: 18px !important;
    width: 90px !important;
}
#body .image-editor-container input[type="number"] {
    height: 25px !important;
    font-size: 14px;
    padding-top: 3px;
    padding-bottom: 3px;
    width: 100px !important;
}
.image-editor-container .image-container {
    max-width: calc(100vw - 205px - 400px);
    max-height: calc(100vh - 200px);
    background: #eee;
}
.image-editor-container .options-container {
    width: 205px;
    padding: 20px;
    background: #eee;
}
#body .image-editor-container .image-container {
    max-width: calc(100vw - 240px - 400px);
}
#body .image-editor-container .options-container {
    width: 240px;
}
.image-editor-container .image-container img {
    max-width: 100%;
    max-height: 100%;
}
#image_editor label {
    width: 50px;
    display: inline-block;
    font-weight: bold;
}
#image_editor .row {
    margin-bottom: 5px;
    white-space: nowrap !important;
}
#image_editor .row-close {
    margin-bottom: 50px !important;
    clear: both;
}
#image_editor .row-title {
    font-size: 14px !important;
    line-height: 14px !important;
    color: #2b8dad;
    font-weight: bold;
    margin-bottom: 10px !important;
}
#image_editor .row-button {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}
#image_editor .row-close .form_button {
    float: right;
}
#image_editor .form_button {
    padding: 0px 10px !important;
    background-color: #2b8dad;
    background: -webkit-gradient(linear, left top, left bottom, from(#2b8dad), to(#2b8dad));
    color: #ffffff;
    cursor: pointer;
    line-height: 28px !important;
    display: block;
    text-align: center;
}
#image_editor .form_button:hover {
	background-color: #3b3b3b !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#3b3b3b)) !important;
}
#image_editor_toggle_aspect,
#image_editor_toggle_aspect_crop {
    display: block;
    width: 25px;
    height: 50px;
    cursor: pointer;
}
#image_editor_toggle_aspect span,
#image_editor_toggle_aspect_crop span {
    position: relative;
    top: 18px;
    left: 15px;
    font-size: 18px !important;
    line-height: 18px !important;
    color: #2b8dad;
}
#crop_image_overlay {
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#crop_image_TL {
    background-image: url('/static/editors/img/marker-corner-NW.png');
    display: block;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    position: absolute;
    background-size: contain;
}
#crop_image_BR {
    background-image: url('/static/editors/img/marker-corner-SE.png');
    display: block;
    width: 50px;
    height: 50px;
    bottom: 0;
    right: 0;
    position: absolute;
    background-size: contain;
}
#crop_image_CE {
    background-image: url('/static/editors/img/marker-center.png');
    display: block;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    position: absolute;
    background-size: contain;
    margin-left: -25px;
    margin-top: -25px;
}
#crop_image_box {
    position: absolute;
    border: solid 2px rgba(172, 215, 229, 0.75) !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.auto-width {
    width: auto !important;
}
.form_button.disabled,
.form_button.disabled:hover {
    background: #ddd !important;
}

/* ======================================== */
/* AUDIO / VIDEO                            */
/* ======================================== */

.editable-audio .media_player audio,
.editable-video .media_player video {
    width: 300px;
}

/* ======================================== */
/* DETAIL EDITOR                            */
/* ======================================== */

.highlight-image-edit-button p {
    display: none !important;
}

.related-widget-wrapper .detail_editor {
    margin-top: 15px !important;
}

.detail_editor {
    display: inline-flex;
    width: 100%;
}

.detail_editor_image > img {
    width: auto;
    height: auto;
    max-height: 80vh;
}
.form-row.field-image .detail_editor_image > img {
    max-width: 100%;
}
.detail_editor_options {
    width: 320px;
}

.highlight-image-edit-button.editable-image {
    padding-right: 10px !important;
}
.highlight-image-edit-button.editable-image .detail_editor_options {
    padding-right: 2px;
}

.detail_editor_options > div {
    padding: 10px !important;
    margin: 0 0 20px 20px !important;
    border: solid 1px #ddd;
    border-radius: 3px;
    background-color: #f2f2f2;
    line-height: 18px !important;
}
.detail_editor_options > div label {
    font-weight: normal !important;
}
.detail_editor_options > div .header {
    display: block;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}
.detail_editor_options > div p,
.detail_editor_options > div span,
.detail_editor_options > div label {
    font-size: 13px !important;
}
.detail_editor_options > div label {
    width: 75px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
.detail_editor_options > div .row {
    display: flex !important;
}
.detail_editor_options .options_container .row {
    margin-bottom: 5px;
}
.detail_editor_options .button_container .row {
    margin-bottom: 5px;
}

.opacity_button {
    padding: 4px 10px !important;
    background-color: #a4cedb;
    background: -webkit-gradient(linear, left top, left bottom, from(#acd7e5), to(#a4cedb));
    color: #ffffff;
    cursor: pointer;
    line-height: 28px !important;
    margin-right: 10px;
}
.opacity_button:hover,
.opacity_button.overlay-transparent {
	background-color: #3b3b3b !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#3b3b3b)) !important;
}

.leaflet-overlay-pane.overlay-transparent {
    opacity: 0.5;
}

.delete_button {
    padding: 4px 10px !important;
    background-color: #ad2b2b;
    background: -webkit-gradient(linear, left top, left bottom, from(#bf3030), to(#ad2b2b));
    color: #ffffff;
    cursor: pointer;
    line-height: 28px !important;
}
.delete_button:hover {
	background-color: #3b3b3b !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#3b3b3b)) !important;
}

.opacity_button,
.delete_button,
.form_button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.highlight-image-edit-button .detail-button img {
    margin-bottom: 6px;
}
.highlight-image-edit-button .detail-button {
    transform: scale(1.0);
}

.button_container .row,
.marker_container .row {
    margin-bottom: 1px !important;
}

/* ---------------------------------------- */
/* DETAIL BUTTONS                           */
/* ---------------------------------------- */

.detail-button {
    position: absolute !important;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    height: auto;
    padding: 2px 4px 12px 4px;
    border: solid 4px transparent;
    transform-origin: 0 0;
}

.detail-button.selected {
    border: solid 4px #2b8dad;
    border-radius: 8px;
}
.detail-button,
.detail-button:hover,
.detail-button *,
.detail-button:hover * {
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-filter: blur(0);
}
.detail-button img {
    width: 40px;
    height: auto;
    opacity: 0.70;
    cursor: pointer;
}
.detail-button span {
    display: block;
    max-width: 240px;
    color: #dd5f26;
    background-color: rgba(255, 255, 255, 0.70);
    padding: 3px 6px;
    border: solid 2px rgba(221, 95, 38, 0.75);
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.25 !important;
    font-family: ubuntu, helvetica, arial;
    cursor: pointer;
}
.detail-button:hover span {
    /*-webkit-transition: all 0.90s ease;
    -moz-transition: all 0.90s ease;
    -o-transition: all 0.90s ease;
    transition: all 0.90s ease;*/
    background-color: rgba(255, 255, 255, 0.90);
    border: solid 2px rgba(221, 95, 38, 9.0) !important;
}
.detail-button:hover img {
    /*-webkit-transition: all 0.90s ease;
    -moz-transition: all 0.90s ease;
    -o-transition: all 0.90s ease;
    transition: all 0.90s ease;*/
    opacity: 0.90;
}

.addable_button {
    cursor: move;
}
.addable_button {
    padding: 3px 6px 3px 0px;
    margin: -3px 0px -3px 0px;
    border: solid 2px transparent;
    font-size: 14px;
}
.addable_button.ui-draggable-dragging {
    color: #dd5f26 !important;
    background-color: rgba(255, 255, 255, 1.0);
    padding: 3px 6px 3px 6px;
    margin: -3px 0px -3px 0px;
    border: solid 2px rgba(221, 95, 38, 1.0);
    border-radius: 4px;
    font-size: 14px;
    font-family: ubuntu, helvetica, arial;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-filter: blur(0);
}

/* =========================================*/
/* VECTOR MAP                               */
/* ======================================== */

#editor_vector {
    display: flex;
}
#map_preview {
    height: 680px;
    width: calc(100% - 320px);
}
.field-vector #map_preview {
    height: 960px;
}
#map_editor {
    height: auto;
    width: 320px;
}

#map_editor > div {
    padding: 10px !important;
    margin: 0 0 20px 20px !important;
    border: solid 1px #ddd;
    border-radius: 3px;
    background-color: #f2f2f2;
    line-height: 18px !important;
}
#map_editor > div label {
    font-weight: normal !important;
}
#map_editor > div .header {
    display: block;
    font-weight: bold !important;
    margin-bottom: 10px !important;
}
#map_editor > div p,
#map_editor > div span:not(.fa),
#map_editor > div label {
    font-size: 13px !important;
}
#map_editor > div label {
    width: 75px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
#map_editor > div .row {
    display: flex !important;
}
#map_editor > div .row.marker_toggle.collapsed {
    display: none !important;
}
#map_editor .row {
    margin-bottom: 10px;
}
#map_editor .row {
    margin-bottom: 5px;
}

.field-vector #map_editor_settings {
    padding: 6px 10px !important;
}
.field-vector #map_editor_settings .header {
    margin-bottom: 6px !important;
    margin-top: 4px !important;
}
.field-vector #map_editor_settings .row {
    margin-bottom: 0px !important;
}

#map_editor_settings .select_gps {
    display: block;
    width: 25px;
    height: 25px;
    background-image: url('../img/select-gps.png');
    cursor: pointer;
    transition: all ease;
}
#map_editor_settings .map_init_bounds,
#map_editor_settings .map_scroll_bounds {
    background-image: url('../img/select-gps-square.png');
}
#map_editor_settings .select_gps:hover,
#map_editor_settings .select_gps.active {
    background-position-y: 25px;
}
#map_editor select {
    width: 210px;
}
#map_editor_settings input:not(.input_gps) {
    width: 200px !important;
}
#map_editor_settings input.input_gps {
    width: 170px !important;
}
#map_editor_settings input.input_gps_05 {
    width: 74px !important;
}
.editable-vector #map_editor_settings input.input_gps {
    width: 175px !important;
}
.editable-vector #map_editor_settings input.input_gps_05 {
    width: 88px !important;
}

#map_overlay_list span {
    display: block;
    cursor: pointer;
    min-height: 20px;
}
.ui-state-highlight-sortable {
    display: block;
    height: 20px;
    background-color: #acd7e5;
}

.addable_marker {
    cursor: move;
    z-index: 999 !important;
}
.addable_marker {
    padding: 3px 6px 3px 0px;
    margin: -3px 0px -3px 0px;
    border: solid 2px transparent;
    font-size: 14px;
}
.addable_marker.ui-draggable-dragging {
    color: #dd5f26 !important;
    background-color: rgba(255, 255, 255, 1.0);
    padding: 3px 6px 3px 6px;
    margin: -3px 0px -3px 0px;
    border: solid 2px rgba(221, 95, 38, 1.0);
    border-radius: 4px;
    font-size: 14px;
    font-family: ubuntu, helvetica, arial;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-filter: blur(0);
}

#map_droppable {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#map_editor > div label {
    width: 75px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}
#map_editor select,
#map_editor input[type="text"],
#map_editor input[type="number"],
#map_editor input[type="url"] {
    margin: 0px !important;
}

.leaflet-control {
    font: bold 12px/20px Tahoma, Verdana, sans-serif !important;
}
.leaflet-control-zoom-display {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    width: 30px;
    height: 30px;
    line-height: 30px !important;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
    padding-top: 0 !important;
    font: bold 12px/20px Tahoma, Verdana, sans-serif;
}
.editable-form .leaflet-control-zoom-display {
    width: 34px;
    height: 34px;
}

#map_image_layers .related-lookup * {
    display: inline-block !important;
    line-height: 1.0 !important;
}
#map_image_layers .related-lookup.related-lookup-change span {
    line-height: 1.0 !important;
}
#map_image_layers .related-lookup {
    background-image: none !important;
    margin-bottom: 0;
    padding: 6px 20px !important;
    border-radius: 3px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: normal;
    text-transform: none !important;
    letter-spacing: normal !important;
    background-color: #0bf !important;
    border: 1px solid #0bf !important;
    background-clip: padding-box;
    float: left !important;
    overflow: hidden;
    width: auto !important;
    height: auto !important;
    padding: 10px 20px !important;
    cursor: pointer;
}

#map_image_layers .related-lookup .fa {
    color: white;
    font-size: 17px;
    margin: 0 10px 0 0 !important;
    vertical-align: middle;
}

#map_image_layers .filerFile {
    position: relative !important;
    top: 0px !important;
    left: 0px !important;
    height: 52px;
}

#warning {
    background-color: #bf3030;
    padding: 10px;
}
#warning p {
    font-weight: bold;
    color: #ffffff;
    display: block !important;
    line-height: 16px !important;
}
#warning .header {
    display: none !important;
}
#map_size {
    font-weight: bold;
    margin-top: 4px;
}
.change-form #map_size {
    margin-left: -6px;
}

/* =========================================*/
/* QUEST MAP                                */
/* ======================================== */

body.cms_quest-questmap select[name=marker_style] option {
    display: none;
}
body.cms_quest-questmap select[name=marker_style] option[value*="markerQ"] {
    display: block;
}
body.cms_content-map select[name=marker_style] option[value*="markerQ"] {
    display: none;
}

body.cms_quest-questmap #map_editor_auto_marker_options {
    display: none !important;
}

/* =========================================*/
/* MARKER LIST                              */
/* ======================================== */

.marker_container .row.marker_guide,
.button_container .row.marker_guide {
    margin-left: 0px;
}
.marker_container .row.marker_guide .addable_button,
.button_container .row.marker_guide .addable_button {
    padding-top: 6px !important;
    padding-bottom: 0px !important;
    max-width: calc(100% - 40px);
}
.marker_container .row.marker_guide .addable_marker,
.button_container .row.marker_guide .addable_marker {
    max-width: calc(100% - 40px);
}
.marker_container .row.marker_highlight,
.button_container .row.marker_highlight {
    margin-left: 10px;
    
}
.marker_container .row.marker_detail,
.button_container .row.marker_detail {
    margin-left: 20px;
}
.marker_container .row.marker_popup,
.button_container .row.marker_popup {
    margin-left: 30px;
}

.marker_container .button-row-toggle,
.button_container .button-row-toggle {
    position: relative;
    right: 0px;
    margin-left: auto;
    display: block;
    height: 25px;
    width: 25px;
    cursor: pointer;
    background-image: url('../img/drop-up.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 24px 12px;
    background-position: center;
}
.marker_container .button-row-toggle.collapsed,
.button_container .button-row-toggle.collapsed {
    background-image: url('../img/drop-down.png');
}

body.cms_quest-questmap #editor_vector div.row.marker_highlight.collapsed,
body.cms_quest-questmap #editor_vector .hidden {
    display: none !important;
}

/* =========================================*/
/* MARKER SIZES                             */
/* ======================================== */

.marker-style-icon img {
    opacity: 1.0 !important;
}
.marker-scale-small span {
    font-size: 18px;
}
.marker-scale-medium span {
    font-size: 20px;
}
.marker-scale-large span {
    font-size: 22px;
}
.marker-scale-xlarge span {
    font-size: 24px;
}
.marker-scale-small img {
    height: 50px;
    width: auto;
}
.marker-scale-medium img {
    height: 60px;
    width: auto;
}
.marker-scale-large img {
    height: 70px;
    width: auto;
}
.marker-scale-xlarge img {
    height: 80px;
    width: auto;
}

.marker-style-marker5 span {
    color: #76c178 !important;
    border: solid 2px rgba(118, 193, 120, 0.75) !important;
}
.marker-style-marker5:hover span {
    border: solid 2px rgba(118, 193, 120, 1.0) !important;
}
.marker-style-marker6 span {
    color: #545454 !important;
    border: none !important;
}
.marker-style-marker6:hover span {
    border: none !important;
}

/* =========================================*/
/* MARKER SCALE MOBILE                      */
/* ======================================== */

.mobile .detail-button {
    transform: scale(1.4);
    transform-origin: center;
}

/* ======================================== */
/* PANO EDITOR                              */
/* ======================================== */

.related-widget-wrapper .pano_editor {
    margin-top: 15px !important;
}
.pano_editor {
    display: inline-flex;
    width: 100%;
}

#pano_button_layer,
#pano_navigation_layer {
    position: absolute !important;
}
#pano_button_layer,
#pano_navigation_layer {
    background-color: rgba(172, 215, 229, 0.0);
    border: solid 2px rgba(172, 215, 229, 0.0);
}
#pano_button_layer.active {
    background-color: rgba(172, 215, 229, 0.25) !important;
    border: solid 2px rgba(172, 215, 229, 0.75) !important;
}
#pano_navigation_layer.active {
    background-color: rgba(172, 215, 229, 0.25) !important;
    border: solid 2px rgba(172, 215, 229, 0.75) !important;
}

.field-pano #pano_settings .header {
    margin-bottom: 14px !important;
    margin-top: 2px !important;
}
.field-pano #pano_settings .row {
    margin-bottom: 0px !important;
}


#pano_editor_image {
    width: calc(100% - 320px) !important;
}
#pano_editor_image > img {
    width: 100% !important;
    height: auto;
}

#pano_settings span.select_position {
    display: block;
    width: 25px;
    height: 25px;
    background-image: url('../img/select-gps.png');
    cursor: pointer;
    transition: all ease;
}
#pano_settings span.select_position:hover,
#pano_settings span.select_position.active {
    background-position-y: 25px;
}
#pano_settings input.select_position {
    width: 170px !important;
}
#pano_settings select {
    width: 210px !important;
}

.detail_editor_options .navigation_container .row {
    margin-bottom: 5px;
}

.addable_navigation {
    cursor: move;
}
.addable_navigation {
    padding: 3px 6px 3px 0px;
    margin: -3px 0px -3px 0px;
    border: solid 2px transparent;
    font-size: 14px;
}
.addable_navigation.ui-draggable-dragging {
    color: #dd5f26 !important;
    background-color: rgba(255, 255, 255, 1.0);
    padding: 3px 6px 3px 6px;
    margin: -3px 0px -3px 0px;
    border: solid 2px rgba(221, 95, 38, 1.0);
    border-radius: 4px;
    font-size: 14px;
    font-family: ubuntu, helvetica, arial;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-filter: blur(0);
}

/* ---------------------------------------- */
/* PANO BUTTONS                             */
/* ---------------------------------------- */

#pano_button_layer .pano-button,
#pano_navigation_layer .pano-button {
    position: absolute !important;
    height: auto;
    padding: 2px !important;
    border: solid 2px transparent;
    transform-origin: 0 0;
    cursor: pointer;
}

#pano_alpha_dragbar {
    position: absolute;
    background-color: rgba(172, 215, 229, 0.25);
    border-left: solid 2px rgba(172, 215, 229, 0.75);
    border-right: solid 2px rgba(172, 215, 229, 0.75);
    cursor: pointer;
}

.pano-button.selected {
    border: solid 2px #2b8dad;
    border-radius: 8px;
}
.pano-button img {
    width: auto;
    height: 100%;
    margin: auto;
    cursor: pointer;
}
.pano-button.marker-scale-small img {
    height: 70%;
    margin-top: 15%;
}
.pano-button.marker-scale-medium img {
    height: 80%;
    margin-top: 10%;
}
.pano-button.marker-scale-large img {
    height: 90%;
    margin-top: 5%;
}
.pano-button.marker-scale-xlarge img {
    height: 100%;
}