/* 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=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;
}

.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: -25px;
    position: relative;
    white-space: nowrap;
    bottom: 12px;    
}

span.condition::after {
    position: relative;
    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: 100% 100%;
    margin-top: 0.5em;
    background-position: center;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    top: -10px;    
}

/* Styles specifically for printing */
@media print {
    span.condition::after {
        /* Re-specify the background properties to ensure they have high priority in print styles */
        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: 100% 100%;
        background-position: center;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}

span.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;    
}

span.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;    
}

span.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--- */
svg {
    vertical-align: middle;
}