/*
    Add any app-specific CSS here.
*/

:root {
    --rz-dialog-title-padding-inline: .8rem;
}

#edit-snippet-html {
    height: calc(100vh - 400px);
    min-height: calc(100vh - 400px);
}

.html-preview {
    border:solid 1px var(--bs-border-color);
    background-color:#fff;
    color:#000;
    padding:1em;
    border-radius:.4em;
}

.html-preview * {
    color:#000 !important;
}

img.thumbnail {
    max-width:250px;
    max-height:300px;
    border: solid 1px var(--bs-border-color);
    border-radius:.4em;
    padding:.5em;
    background-color:#fff;
}

img.thumbnail.large {
    max-width:400px;
    max-height:500px;
}

#editor-area {
    border: solid 1px var(--bs-border-color);
    border-radius:.4em;
    padding:.5em;
}

#edit-template-elements-list.editor-large {
    min-height: calc(100vh - 290px);
    max-height: calc(100vh - 290px);
}

#edit-template-elements-list.editor-small {
    min-height: calc(100vh - 435px);
    max-height: calc(100vh - 435px);
}

#editor-area.editor-small #code-editor {
    height: calc(100vh - 435px);
}

#editor-area.editor-large #code-editor {
    height: calc(100vh - 290px);
}

.editor-element,
.editor-toggler {
    background-color: rgba(255, 0, 0, .8);
    color: yellow !important;
    cursor:pointer;
}

.editor-element-missing,
.editor-toggler-missing {
    background-color: yellow;
    color: rgba(255, 0, 0, .8) !important;
    cursor:not-allowed;
    font-weight:bold;
}

.form-import-export {
    height: calc(100vh - 165px);
}

.no-selected-element {
    opacity:0.6;
    font-size:0.8em;
    padding-left:.5em;
}

.selected-element {
    padding-left:.2em;
}

.indented-switch {
    margin-left: 40px;
}

.dropdown-elements {
    font-size:.85em;
}

.monaco-editor .sticky-widget {
    z-index:0 !important;
}

.rz-splitter-pane:has(div.scroll-overflow) {
    overflow-y: auto;
}

.split-bar-outer .spliter-bar {
    width: 6px;
    margin: 0 .5em;
    background-color: var(--bs-border-color);
    border: solid 1px var(--bs-border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.split-bar-outer .spliter-bar:hover {
    border-color: var(--bs-dark-bg-subtle);
    background-color: var(--bs-dark-bg-subtle);
}

.split-bar-outer .spliter-bar::after {
    content: '';
    width: 2px;
    height: 20px;
    background-color: var(--bs-dark);
    opacity: 0.7;
    border-radius: 1px;
}

.split-bar-inner .spliter-bar {
    height: 6px;
    width: 100%;
    background-color: var(--bs-border-color);
    border: solid 1px var(--bs-border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.split-bar-inner .spliter-bar:hover {
    border-color: var(--bs-dark-bg-subtle);
    background-color: var(--bs-dark-bg-subtle);
}

.split-bar-inner .spliter-bar::after {
    content: '';
    width: 20px;
    height: 2px;
    background-color: var(--bs-dark);
    opacity: 0.7;
    border-radius: 1px;
}

span.input-group {
    width: 200px;
}

.media-items {
    display:flex;
    flex-wrap:wrap;
}

.media-items .media-item-wrapper {
    max-width: 300px;
    margin: 0 .5em .5em 0;
}

.media-items .media-item {
    border: solid 1px var(--bs-border-color);
    border-radius:.5em;
    background-color:#fff;
    padding:.1em .4em .2em .4em;
    transition: background-color 150ms ease-in-out;
}

.media-items .media-item.deleted {
    background-color:red;
}

.media-items .media-item.item-file-clickable:hover {
    background-color: #aaa;
}

.media-items .media-item .media-item-name {
    max-width:150px;
    font-size:0.65em;
    color:#000;
}

.media-items .media-item .media-item-image img {
    width:100%;
    max-width:300px;
    max-height:250px;
    min-height:150px;
}

.media-items .media-item .media-item-media-buttons {
    margin-top: .2em;
}

.media-items .media-item .media-item-media-buttons .btn:not(.full-opacity) {
    opacity:0.5;
    transition:opacity 150ms ease-in-out;
}

.media-items .media-item .media-item-media-buttons .btn:hover {
    opacity:1;
}

.media-items .media-item .media-file-size {
    font-size:0.8em;
    display:inline-block;
    float:right;
    opacity:0.7;
    margin-top:.4em;
}

.media-items .media-item-tags {
    font-size:0.7em;
    margin-top:.2em;
}

.media-items .media-item-tags .tag-selector .add-remove {
    min-width:12px;
}

.media-items .media-item-tags .tags .tag {
    opacity:0.7;
}

.media-items .media-item-tags .tags .tag:hover {
    opacity:1;
}

.sticky-dialog-pinned {
    z-index: 4;
    width: 100%;
    position: sticky;
    top: 0px;
    padding-top: .5em;
    background-color: var(--bs-body-bg);
}

td.right {
    text-align:right;
}

.preview-iframe {
    border:solid 3px var(--bs-border-color);
}

#view-source-monaco-editor {
    height: calc(100vh - 220px);
    min-height: calc(100vh - 220px);
}

.email-elements {
    /*font-size:0.8em;*/
}

.email-elements .element {
    cursor:pointer;
}

.email-elements .element:hover {
    background-color:var(--bs-border-color);
}

.email-elements .element-disabled {
    opacity:0.25;
}

.email-elements .element-top-level {
    padding-top:.5em;
}

.edit-email-preview-wrapper {
    padding:.5em;
    text-align:center;
}

.nav-tabs-sm .nav-link {
    padding:.2rem .4rem;
}

#edit-email-elements-list {
    min-height: calc(100vh - 202px);
    max-height: calc(100vh - 202px);
}

.email-element-highlighted,
.template-element-highlighted {
    background-color:orange;
    color:#fff;
}

.email-element-highlighted:hover,
.template-element-highlighted:hover {
    color:#000;
}

.email-element-item-wrapper {
    padding:.2em .4em;
}

.email-element-item {
    padding: .2em .4em;
    transition: background-color 0.5s ease, color 0.2s ease;
}

.rendering-preview {
    opacity:0.4;
}

.tab-content-settings {
    padding: .5em;
    border-left: solid 1px var(--bs-border-color);
    border-right: solid 1px var(--bs-border-color);
    border-bottom: solid 1px var(--bs-border-color);
}

label .note {
    opacity: 0.8 !important;
    font-style: italic !important;
    font-size: .8em !important;
    font-weight:normal !important;
}

.read-only-value {
    border:dashed 1px var(--bs-border-color);
    border-radius:.4em;
    padding:.2em .4em;
}

#cboxTitle {
    font-size:0.8em;
}

.log-item-old-value,
.log-item-new-value {
    font-size:0.8em;
    font-weight: bold;
    padding: .2em;
    border-radius: .4em;
    display:inline-block;
    margin:0 .4em .4em 0;
    background-color: #ccc;
}

.log-item-old-value {
    font-style: italic;
    color: #555;
    border: solid 1px #888;
}

.log-item-new-value {
    color: green;
    border: solid 1px green;
}

.log-item-old-value-html,
.log-item-new-value-html {
    background-color:#fff;
    color:#000;
    margin:.4em 0;
    padding:.2em .4em;
}

.log-item-old-value-html {
    border: dashed 2px #888;
}

.log-item-new-value-html {
    border: dashed 2px green;
}

.log-item-old-value-image img,
.log-item-new-value-image img {
    max-height:100px;
    background-color:#fff;
    margin:.4em 0;
    padding:.2em;
    border-radius: .4em;
}

.log-item-old-value-image img {
    border: solid 1px #888;
}

.log-item-new-value-image img {
    border: solid 1px green;
}

table.table.top thead tr th,
table.table.top tbody tr td {
    vertical-align:top;
}

.log-item {
}

.log-item-action {
    cursor:pointer;
    background-color:#222;
    color:#fff;
    margin:.1em 0;
    padding:.1em;
    border-radius: .4em;
    border-width:1px;
    border-style:solid;
    border-color:var(--bs-border-color);
    font-size:0.8em;
    display:inline-block;
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
}

.log-item-action:hover {
    background-color:palegoldenrod;
    color:#000;
}

.log-item-action.html {
    display:block;
    margin:.4em 0;
}

.log-item-action.image img {
    padding:.4em;
}

/*.log-item-action.image:before { content: '\A'; }*/

/*.log-item-action.old-value {
    border-color: #888;
}

.log-item-action.new-value {
    border-color: green;
}*/