/* editor-fonts.css */
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Bad+Script&family=Caveat:wght@400..700&family=Comfortaa:wght@300..700&family=Comforter+Brush&family=Great+Vibes&family=Inter&family=Kablammo&family=Lobster&family=Marck+Script&family=Pacifico&family=Pattaya&family=Reggae+One&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Rubik+Wet+Paint&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&family=Train+One&family=Triodion&family=Yanone+Kaffeesatz:wght@200..700&display=swap');

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400; /* Regular weight */
    font-style: normal;
    font-display: swap; /* Ensures text is visible while the font loads */
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500; /* Medium weight */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700; /* Bold weight */
    font-style: normal;
    font-display: swap;
}
/* Italic Regular weight */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic; /* Crucial for defining the italic style */
    font-display: swap;
}

/* Italic Medium weight (if you have the file) */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Italic Bold weight (if you have the file) */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

  body.main {
    background-image: url(/images/photo_2025-04-06_12-16-26.jpg);
  }
  h1.pmHeader {
  	font-family:Triodion;
  	font-size:2.4em;
  	font-weight:100;
    margin-bottom:0;
    color:#004;
    background-color: #ffffff00;
  }
  .welcomeMsg {
    display: flex;
    flex-direction: column;
    max-width:1000px;
  }

  .welcomeMsg p {
    margin:2px 0;
    padding:5px 4px;
    max-width:1050px;  
  }
  .welcomeMsg p img {
    padding:2px;
  }

  button {
    margin:6px 15px 4px 15px;
  }
  div.pmHeader h1 img {
    margin-left: 220px;  
  }

.reaction {
    font-family: 'JetBrains Mono';
}

/* --- chemical arrow with reacton condition on top BEGIN--- */
div.condition {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 92%;
    margin-top: -1.5em;
    position: relative;
    white-space: nowrap;
    bottom: 26px;
    height: 39px;
}
div.condition span {
    white-space: nowrap;
    position: relative;
    top: 12px;
    padding: 0 15px;
}
div.condition.short span {
    padding: 0 11px;
}

div.condition::after {
    content: '';
    display: block;
    width: 100%;
    height: 13px;
    background: url('data:image/svg+xml;utf8,<svg width="40" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="4.5" x2="30" y2="4.5" stroke="black" stroke-width="1" /><polygon points="30,2 40,4.5 30,7" fill="black" /></svg>') no-repeat;
    background-size: contain;
    margin-top: 0.5em; /* Space between text and arrow */
    background-position: center;
}

div.condition.short::after {
    background: url('data:image/svg+xml;utf8,<svg width="25" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="4.5" x2="17" y2="4.5" stroke="black" stroke-width="1" /><polygon points="17,2 25,4.5 17,7" fill="black" /></svg>') no-repeat;
    background-size: contain;    
}

div.condition.long::after {
    background: url('data:image/svg+xml;utf8,<svg width="100" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="4.5" x2="90" y2="4.5" stroke="black" stroke-width="1" /><polygon points="90,2 100,4.5 90,7" fill="black" /></svg>') no-repeat;
    background-size: contain;    
}

div.condition.long2::after {
    background: url('data:image/svg+xml;utf8,<svg width="200" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="4.5" x2="190" y2="4.5" stroke="black" stroke-width="1" /><polygon points="190,2 200,4.5 190,7" fill="black" /></svg>') no-repeat;
    background-size: contain;    
}
/* --- chemical arrow with reacton condition on top END--- */


/* --- css chemical arrow with reacton condition on top BEGIN--- */
span.condition {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 92%;
    margin-top: -1.5em;
    margin-bottom: -35px; 
    position: relative;
    white-space: nowrap;
    bottom: 0.45em;
    vertical-align: middle;
}
.condition>span {
    min-width: 10px;
    padding: 0 4px;
}

span.condition::after {
    position: relative;
    content: '';
    display: block;
    width: 100%;
    height: 13px;
    background-image: url('data:image/svg+xml;utf8,<svg width="40" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="4.5" x2="40" y2="4.5" stroke="black" stroke-width="1.5" /></svg>'), url('data:image/svg+xml;utf8,<svg width="40" height="9" xmlns="http://www.w3.org/2000/svg"><polygon points="32,1 40,4.5 32,8" fill="black" /></svg>');
    background-repeat: repeat, no-repeat;
    background-position: center, right;
    background-size: 100% 9px, 42px 9px;
    margin-top: 0.5em;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    top: -10px;
}
span.condition.revertable::before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 10px;
    background-image: 
        url('data:image/svg+xml;utf8,<svg width="40" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="4.5" x2="40" y2="4.5" stroke="black" stroke-width="1.5" /></svg>'), 
        url('data:image/svg+xml;utf8,<svg width="40" height="9" xmlns="http://www.w3.org/2000/svg"><polygon points="12,1 0,4.5 12,8" fill="black" /></svg>');
    background-repeat: repeat, no-repeat;
    background-position: center, left;
    background-size: 100% 9px, 42px 9px;
    margin-top: -0.5em; 
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    top: 1.92em;
}

span.condition.revertable.short::before {
    background: url('data:image/svg+xml;utf8,<svg width="25" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="8" y1="4.5" x2="25" y2="4.5" stroke="black" stroke-width="1" /><polygon points="8,2 0,4.5 8,7" fill="black" /></svg>') no-repeat;
    background-size: contain;
}
span.condition.revertable.long::before {
    background: url('data:image/svg+xml;utf8,<svg width="100" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="10" y1="4.5" x2="100" y2="4.5" stroke="black" stroke-width="1" /><polygon points="10,2 0,4.5 10,7" fill="black" /></svg>') no-repeat;
    background-size: contain;
}
span.condition.revertable.long2::before {
    background: url('data:image/svg+xml;utf8,<svg width="200" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="10" y1="4.5" x2="200" y2="4.5" stroke="black" stroke-width="1" /><polygon points="10,2 0,4.5 10,7" fill="black" /></svg>') no-repeat;
    background-size: contain;
}
/* --- chemical arrow with reacton condition on top END--- */

svg,img,a {
    vertical-align: middle;
    display: inline-block !important;
}

.condition.processed-js::after {
    content: none !important; 
    display: none !important;
}

.condition span {
    white-space: nowrap;
    position: relative;
    bottom: -3px;
    padding: 0 10px 0 6px;
    font-size: 85%;
}
.condition.short span {
    padding: 0 11px;
}

.reaction {
    font-family: 'JetBrains Mono';
}

.xrarr {
    padding: 0 3px;
}

#publish-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
}
.pub-window {
    background: white;
    border-radius: 8px;
    width: 350px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -175px;
    margin-top: -150px;
}
.pub-header {
    background: #f1f1f1;
    padding: 12px;
    cursor: move;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
.pub-body { padding: 20px; }

/* New classes from inline styles */
.pub-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.pub-hint {
    color: #666;
    display: block;
    margin-bottom: 15px;
}
.pub-error-msg {
    color: red;
    font-size: 12px;
    margin-bottom: 10px;
    display: none;
    font-weight: bold;
}

.pub-input {
    width: 100%;
    margin-bottom: 15px;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.pub-footer {
    text-align: right;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

/* Button styles */
.btn-cancel, .btn-submit {
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
}
.btn-cancel {
    background: #eee;
    border: 1px solid #ccc;
}
.btn-submit {
    background: #2ecc71;
    color: white;
    border: none;
    padding: 6px 18px;
    margin-left: 10px;
}