/***
 * # Dual License Notice
 *
 * This software is licensed under the GNU Affero General Public License version 3 (AGPLv3) or later.
 * See the LICENSE.AGPL file for the full text.
 * If you wish to use this software under different terms, such as a commercial license that does not
 * require you to disclose modifications or source code (e.g., for proprietary use or internal development),
 * please contact danny.amor.joubolo@proton.com to discuss licensing options.
 * Commercial licenses are available for a fee and allow closed-source modifications and distribution.
 *
 * Copyright (C) 2025 Danny Amor Joubolo
 *
 *
 *
 *
 *
 * **/
:root {
    --default-white: #fff;
    --dark-bg: #333;
    --light-bg: #f4f4f4;
    --default-red: #7b71e2;
    --default-highlight: #d0c7fe;
}

body.amor-preload {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../../assets/images/check_load.png') no-repeat center center;
    background-size:  25%;
    z-index: 9999;
    animation: fadeOut 0.25s ease-in-out forwards;
    animation-delay: 0.55s;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        display: none;
    }
}




#amorUIMessageObject {
    visibility: hidden;
}
#amorUINavigatorMessageObject {
    position: fixed;
    border: #6f42c1 2px solid;
    border-radius: 5px;
    left: 5px;
    top: 10px;
    padding: 10px;
    background-color: #053975;
    color: white;
    z-index: 9999;
    display: block;
}

#amorEditMenu{
    position: fixed;
    border-radius: 5px;
    left: 155px;
    top: -5px;
    padding: 10px;
    z-index: 9999;
    display: block;
}

.amor-link .amor-edit{
    /*   display: inline-flex;       Allows for both inline and flex properties */
    /*  align-items: center;        Vertically centers content */
    /* gap: 0.5rem;                Adds space between icon and text, if any */
    color: #0066cc;             /* Classic link blue */
    text-decoration: none;      /* Removes underline by default */
    /*     font-weight: 500;           Medium font weight */
    /*padding: 0.5rem 1rem;        Comfortable padding */
    border-radius: 4px;         /* Slightly rounded corners */
    transition: all 0.2s ease;  /* Smooth transition for hover/focus effects */
    cursor: pointer;            /* Changes cursor to pointer on hover */
    background-color: transparent;
    /*  border: none;               Removes default border for button-like elements */
}

.amor-link:hover,
.amor-edit:hover,
.amor-edit:focus,
.amor-link:focus {
    color: #0052a3;             /* Darker blue on hover/focus */
    text-decoration: underline; /* Underline on hover/focus */
    outline: #0052a3 ;
    background-color: rgba(0, 102, 204, 0.1); /* Light background on hover */
    padding: 0.5rem 1rem;
}

.amor-link:active {
    color: #004080;             /* Even darker blue when clicked */
}

.amor-link svg,
.amor-link i {
    font-size: 1em;            /* Ensures icons match text size */
}

.amor-deleted {
    opacity: 0.4; /* semi-transparent */
    border: 1px dotted;
    text-decoration: line-through; /* Strikethrough */
    color: #999; /* Grayed out */
    background-color: #ffe6e6; /* Light red background for "oops, deleted" feel */
    padding: 5px;
}

.highlighted-element {
    position: relative; /* Allows pseudo-element or other layers to be positioned */
    outline: 1px solid var(--default-red); /* Adds a solid border overlay */
    border-radius: 25%; /* Creates a round or elliptical shape */
    box-sizing: content-box; /* Ensures padding/border does not affect the size */
    transition: all 0.2s ease; /* what does this do...? */
}

.edited-element {
    background-color: transparent;
    border: black solid 3px;
    border-radius: 5%;
    padding: 15px;

}


.highlighted-element:hover {
    background-color: #d0c7fe; /* Background highlight on hover */
    border: black dotted 2px;
    padding: 15px;
}


.highlighted-element::after {
    position: absolute; /* Positioned relative to the parent element */
    top: 10px;
    left: 10px;

    right: 10px;
    bottom: 10px;
    font-size: 20px; /* Size of the icon */
    pointer-events: none; /* Ensure it doesn't interfere with interactions */
}

.unActiveLinkIcon::before {
    content: '\f0c1';
    font-family: 'Font Awesome 5 Free'; /*Specify the Font Awesome font */
    font-weight: 900;
    position: absolute;
    top: 25%;
    right: 25%;
    color: var(--dark-bg);
    cursor: pointer; /* Optional: Make the icon clickable */
    pointer-events: none; /* Prevent icon from interfering with clicks */
    z-index: 9999; /* Ensure the icon appears above other elements **/
    font-size: 0.85em; /* Use a scalable font size relative to the element */
}

.activeLinkIcon::before {
    content: '\f35d';
    font-family: 'Font Awesome 5 Free'; /*Specify the Font Awesome font */
    font-weight: 900;
    position: absolute;
    top: 25%;
    right: 25%;
    color: var(--dark-bg);
    cursor: pointer; /* Optional: Make the icon clickable */
    pointer-events: none; /* Prevent icon from interfering with clicks */
    z-index: 99; /* Ensure the icon appears above other elements **/
    font-size: 0.85em; /* Use a scalable font size relative to the element */
}


.edit-icon::after {
    content: '\f044';
    font-family: 'Font Awesome 5 Free'; /*Specify the Font Awesome font */
    position: absolute;
    top: 45%;
    left: 70%;
    color: var(--default-red);
    cursor: pointer; /* Optional: Make the icon clickable */
    pointer-events: none; /* Prevent icon from interfering with clicks */
    z-index: 9999; /* Ensure the icon appears above other elements **/
    font-size: 14px;

}

.flag-icon::after {
    /*content: '\f024';   flag */
    font-family: 'Font Awesome 5 Free'; /*Specify the Font Awesome font */
    position: absolute;
    top: 10%;
    left: 10%;
    content: " ∅ ";
    color: var(--default-highlight);
    cursor: pointer; /* Optional: Make the icon clickable */
    pointer-events: none; /* Prevent icon from interfering with clicks */
    z-index: 9999; /* Ensure the icon appears above other elements **/
    font-size: 1.85em; /*Use a scalable font size relative to the element */
}

/* Blinking Effect */
.blinking {
    animation: blink-animation 1s steps(2, start) infinite;
    background-color: rgba(203, 231, 252, 0.5); /* Semi-transparent background */
}

@keyframes blink-animation {
    50% {
        opacity: 0; /* Makes the element completely invisible */
    }
}

/* Context Menu */
.custom-context-menu {
    position: absolute; /* Position it absolutely */
    background-color: var(--default-white); /* White background */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    padding: 10px; /* Space inside the menu */
    z-index: 9999; /* Ensure it appears above other elements */
    display: none; /* Initially hidden */
    font-family: Arial, sans-serif; /* Optional: Set font style */
    font-size: 12px; /* Optional: Set font size */
    color: #333; /* Optional: Text color */
}

.div-label {
    position: absolute;
    top: -15px; /* Positions the label over the container */
    left: 10px;
    background-color: inherit;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-bottom: none; /* no bottom border,so that it integrates with the container */
    border-radius: 5px 5px 0 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.copied {
    transform: scale(1.2); /* Briefly scale up the icon */
    color: #4CAF50; /* Change color to green to show success */
}

.suggestionContainer {
    display: block;
    max-width: 600px;
    max-height: 600px; /* Set max height for the suggestion container */
    min-width: 100px;
    min-height: 150px;
    overflow-y: auto;
    overflow-x: hidden; /* Correct overflow-x value */
    border: 1px solid #ccc; /* Add a border around the container (optional) */
    padding: 5px; /* Optional padding inside the container */
    border-radius: 10px;
}


.icon-container {
    display: flex; /* Use Flexbox layout */
    justify-content: space-around; /* Distribute icons evenly with space around */
    align-items: center; /* Align icons vertically in the center */
    margin-top: 2px; /* Add 2px space above the icons */
    gap: 10px; /* Add 10px spacing between the icons */
}

.contextMenuHeader {
    background: var(--default-highlight); /* Solid dark base for rock-like stability */
    color: var(--dark-bg); /* Crisp white text for bold contrast */
    font-weight: 700; /* Heavy bold for emphasis */
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  Clean, sturdy font */
    font-style: normal; /* Override italics if needed */
    border-radius: 6px; /* Subtle rounding for grounded edges */
    padding: 10px 16px; /* Substantial padding for weight */
    border: 2px solid var(--default-white); /* Purple border for accent and definition */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), /* Deep shadow for solid base */
    inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Faint inner glow for texture */
    margin-bottom: 6px; /* Space below */
    display: block;  /* Full-width option */
    letter-spacing: 0.5px; /*Tight spacing for bold impact */
    /*text-transform: uppercase;  Caps for commanding presence */
    transition: all 0.2s ease; /* Firm hover response */
}
.contextMenuMessenger {
    background: var(--default-highlight); /* Solid dark base for rock-like stability */
    color: var(--dark-bg); /* Crisp white text for bold contrast */
    font-weight: 700; /* Heavy bold for emphasis */
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  Clean, sturdy font */
    font-style: normal; /* Override italics if needed */
    border-radius: 6px; /* Subtle rounding for grounded edges */
    padding: 10px 16px; /* Substantial padding for weight */
    border: 2px solid var(--default-white); /* Purple border for accent and definition */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), /* Deep shadow for solid base */
    inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Faint inner glow for texture */
    margin-top: 6px; /* Space below */
    margin-bottom: 6px; /* Space below */
    /*font-size: 0.75rem;*/
    display: block;  /* Full-width option */
    /*letter-spacing: 0.5px; Tight spacing for bold impact */
    /*text-transform: uppercase;  Caps for commanding presence */
    transition: all 0.2s ease; /* Firm hover response */
}

.contextMenuHeaderError {
    background: red; /* strong error background */
    color: white; /* clear contrast */
    font-weight: bold; /* emphasize error */
    font-style: normal; /* avoid italics */
}

/* Common styles for all icons */
.icon {
    cursor: pointer; /* Make the icon interactive */
    font-size: 17px; /* Set size of the icon */
    display: inline-block; /* Ensure consistent alignment */
    border-radius: 4px; /* slightly rounded corners */
    padding: 6px 10px 6px 6px;
    border: 1px dotted;
}

.icon-small {
    cursor: pointer; /* Make the icon interactive */
    font-size: 12px; /* Set size of the icon */
    display: inline-block; /* Ensure consistent alignment */
    border-radius: 4px; /* slightly rounded corners */
    padding: 3px;
    border: 1px dotted;
}

.icon-big {
    cursor: pointer; /* Make the icon interactive */
    font-size: 30px; /* Set size of the icon */
    display: inline-block; /* Ensure consistent alignment */
    border-radius: 4px; /* slightly rounded corners */
    padding: 8px;
    border: 1px dotted;
}

.icon-grayed {
    opacity: 0.5; /* semi-transparent */
    color: currentColor; /* inherit text color if needed */
    border: none;
}


.icon-container {
    display: flex; /* Use Flexbox layout */
    justify-content: space-around; /* Distribute icons evenly with space around */
    align-items: center; /* Align icons vertically in the center */
    margin-top: 2px; /* Add 2px space above the icons */
    gap: 10px; /* Add 10px spacing between the icons */
}


.cancel-icon {
    /*top: -10px;
    left: 80%;*/
    position: relative;
    border:none;
}

.page-icon {
    padding: 0 10px;
    opacity: 0.5;
    pointer-events: none;
    cursor: none;
}

.draggable{
    /* empty class for dragging-functionality only */
}
/* Specific icon styles (Font Awesome for now) */
.drag-icon::before {
    content: '\f0b2'; /* Font Awesome arrows-alt Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */
    /*font-size: 2em; /* 50% bigger */
    /*position: absolute; /* Ensure positioning works */
    /*top: 1px;
    left: 1px;*/
    border:none;
}


.edit-page-mode-icon::before {
    content: '\f1ea'; /* Font Awesome newspaper Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */

    pointer-events: none;
    cursor: none;
}

.edit-cms-mode-icon::before {
    content: '\f0e8'; /* Font Awesome sitemap Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */

    pointer-events: none;
    cursor: none;
}

.addNewPage-icon::before {
    content: '\f0fe'; /* Font Awesome plus Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */
}

.brokenLink-icon::before {
    content: '\f127'; /* Font Awesome unlink Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */
}

.search-icon::before {
    content: '\f002'; /* Font Awesome search icon Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */
}

.cancel-icon::before {
    content: '\f410'; /* Font Awesome window-close icon Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */
}


.editor-edit-icon::before {
    content: '\f044'; /* Font Awesome edit icon Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */
}


.save-icon::before {
    content: '\f0c7'; /* Font Awesome save icon Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */
}


.delete-icon::before {
    content: '\f2ed'; /* Font Awesome trash-alt icon Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */
}


.new-content-icon::before {
    content: '\f067'; /* Font Awesome plus icon Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */
}

.copy-template-icon::before {
    content: '\f0c5'; /* Font Awesome copy icon Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 400; /* Regular style */
}

.publish-cloud-icon::before {
    content: '\f382'; /* Font Awesome cloud-upload-alt icon Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Solid style */
}

.copy-page-icon::before {
    content: '\f0c5'; /* Font Awesome copy icon Unicode */
    font-family: 'Font Awesome 5 Free';
    font-weight: 400; /* Regular style */
}

.amorEditor {
    /*width: 90%; /* Make the element fill 95% of the width of the parent * /
    height: 98%; /* Make the element fill 95% of the height of the parent * /
    border-radius: 10px; /* Rounded borders for the element * /
    margin: 1px; /* Create space between the container and the element * /
    padding: 10px; /* Add padding inside the textarea for better appearance * /
    outline: none; /* Remove the default outline on focus * /
    background-color: var(--default-highlight); /* Set the background color * /
    resize: both; /* Allow horizontal and vertical resizing * /
    / *white-space: normal; / * Allow text to wrap within the element * /
    overflow: hidden; / * Hide both horizontal and vertical scrollbars */

    outline: none;
    display: inline-block;
    max-width: 550px;
    max-height: 350px;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--default-highlight);
    margin: 1px;
    box-sizing: border-box;
}

textarea.amorEditor {
    width: 100%;           /* Fills div's full width */
    max-width: 100%;       /* Respects container max */
    max-height: 300px;     /* Caps height */
    min-height: 50px;      /* Optional: Min to "fill" if empty */
    min-width: 50px;      /* Optional: Min to "fill" if empty */
    height: 0;             /* Start collapsed; JS will set actual height */
    border: none;
    padding: 10px;
    box-sizing: border-box;
    font-family: monospace;
    resize: none;          /* No manual drag */
    overflow-y: auto;      /* Scroll if max-height hit */
    line-height: 1.4;      /* Consistent wrapping */
}

oldtextarea.amorEditor  {
    resize: none;
    max-width: 550px;
    /*  max-height: 350px;
   /*min-width: 98%;
     min-height: 98%;*/
    overflow: auto; /* scrollbars if bigger than 300x300 */
    width: 100%;
    min-height: 50px; /* Minimum height */
    border: none;
    outline: none;
   /* background: transparent;*/
    white-space: pre-wrap; /* Preserve line breaks */
    box-sizing: border-box;
}

.amorEditor-editMode {
    width: 90%; /* Make the textarea fill 95% of the width of the parent */
    height: 98%; /* Make the textarea fill 95% of the height of the parent */
    border-radius: 10px; /* Rounded borders for the textarea */
    margin: 1px; /* Create space between the container and the textarea */
    padding: 10px; /* Add padding inside the textarea for better appearance */
    outline: none; /* Remove the default outline on focus */
    background-color: var(--default-white); /* Set the background color */
    resize: both; /* Allow horizontal and vertical resizing */
    white-space: normal; /* Allow text to wrap within the textarea */
    overflow: hidden; /* Hide both horizontal and vertical scrollbars */
}

/* Apply only to textareas with this class */
textarea.amorEditor-editMode {
    width: 100%;           /* Fills div's full width */
    max-width: 100%;       /* Respects container max */
    max-height: 300px;     /* Caps height */
    min-height: 50px;      /* Optional: Min to "fill" if empty */
    min-width: 50px;      /* Optional: Min to "fill" if empty */
    height: 0;             /* Start collapsed; JS will set actual height */
    border: 1px solid;
    padding: 5px;
    box-sizing: border-box;
    font-family: monospace;
    resize: none;          /* No manual drag */
    overflow-y: auto;      /* Scroll if max-height hit */
    line-height: 1.4;      /* Consistent wrapping */
}

.search-span {
    display: flex; /* Use Flexbox layout */
    align-items: center; /* Align items vertically in the center */
    gap: 10px; /* Add 10px spacing between child elements */
    padding-top: 5px;
}

.suggestion-item {
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: white; /* Text color */
    padding: 5px; /* Space inside the element */
    border: 1px solid #ccc; /* Border around the element */
    margin-top: 2px; /* Space above the element */
    cursor: pointer; /* Pointer cursor for interactivity */
}

.no-results-message {
    padding: 5px;
    border: 1px solid #ccc;
    margin-top: 2px;
}

.ok-button {
    background-color: #4a89dc;
    color: #efecec;
    border: 1px;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    margin-left: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ok-button:hover {
    background-color: #3a7bc8; /* Darker Blue on  Hover */
    transform: translateY(-1px);
}

.ok-button:active {
    background-color: #2a6bb8; /* Even Darker Blue on Click */
    transform: translateY(0);
}

.seo {
    visibility: hidden;
}

.amor-log {
    overflow: auto;
    width: 200px;
    height: 100px;
}

.tab-label {
    position: absolute;
    top: -15px;
    left: 10px;
    background-color: #f9f9f9;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    font-size: 14px;
}

.content {
    margin-top: 10px;
}

.amor-found-pages-div {
    /**/
    position: absolute; /*position relative to .search-span*/
    top: 100%; /*directly below the input*/
    left: 0;
    z-index: 9999;
    background: #fff; /* white background */
    border: 1px solid #ccc;
    border-radius: 6px; /* rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* subtle shadow */
    padding: 8px 12px; /* spacing inside the box */


    max-height: 200px; /* limit height */
    overflow-y: auto; /* scroll if too many items */

    width: max-content; /* adapt width to content */
    min-width: 100%; /* at least as wide as parent */
    box-sizing: border-box; /* include padding in width */

    display: block; /* visible */
}

.amor-found-pages-div p {
    margin: 4px 0; /* spacing between items */
    padding: 4px 8px;
    cursor: pointer; /* pointer on hover */
    transition: background 0.2s;
    white-space: nowrap; /* prevent wrapping if content is short */
}

.amor-found-pages-div p:hover {
    background-color: #f0f0f0; /* subtle hover effect */
}

/**  Amorize classes */


.amor-text-hidden {
    color: transparent; /* Makes text invisible but reserves space */
    font-size: 0; /* Collapses text height/line breaks */
    line-height: 0; /* Ensures no extra vertical space */
    text-indent: -9999px; /* Optional: Pushes text off-screen if needed (for accessibility) */
}

/* If you also need to hide pseudo-content (e.g., Font Awesome icons) */
.amor-text-hidden::before,
.amor-text-hidden::after {
    content: none; /* Removes CSS-generated text/icons */
}

.amorizeHeader {
    position: absolute;
    top: 25%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 1000;
    background: white;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.amorizeHeader img {
    width: 50px;
    height: auto;
}

.amorizeHeader i {
    color: #666;
    font-size: 1.5em;
}

.amorizeToggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.amorizeToggle input {
    opacity: 0;
}

.amorizeSlider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ddd;
    border-radius: 20px;
    transition: 0.3s;
}

.amorizeSlider:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

input:checked + .amorizeSlider {
    background: #7b71e2;
}

input:checked + .amorizeSlider:before {
    transform: translateX(20px);
}


/**  Image selector **/

.image-selector-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.selector-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-btn {
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 100%;
}

.cancel-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
}

.gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1002;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-inner {
    background: white;
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    max-height: 80%;
    overflow: auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.gallery-item {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
    overflow: hidden;
    transition: border-color 0.3s;
}

.gallery-item.hovered {
    border-color: #007bff;
}

.gallery-img {
    width: 100%;
    height: auto;
    display: block;
}

.modal-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.created-by-amor-footnote{
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #eee;
    font-size: 0.85em;
    color: #666;
    line-height: 1.5;
}