/*:root {
  
    --c-white: #ffffff;
    --c-black: #000000; 
    --c-tab-active-bg: rgb(40,40,40);
    --c-gray-50: rgb(50,50,50);
    --c-gray-74: rgb(74,74,74);
    --c-gray-180: rgb(180,180,180);
    --c-gray-192: rgb(192,192,192); 
    --c-gray-eee: #eeeeee; 
    --c-gray-aaa: #aaaaaa; 
    --c-gray-name: gray; 
    --c-scrollbar-thumb: #7a7b7d; 
    --c-gray-placeholder: silver; 
    --c-gray-120: rgb(120,120,120);
    --c-gray-80: rgb(80,80,84);
    --c-wheat: wheat; 
    --c-gray-150: rgb(150,150,150);
    --c-brown-41-13-1: rgb(41,13,1);
    --c-blue-basic: blue; 
    --c-gray-94: rgb(94,94,94);
    --c-gray-64: rgb(64,64,64);
    --c-cream-ffeedd: #ffeedd; 
    --c-amber: #ffb928; 
    --c-amber-dark: rgb(195,142,31);
    --c-amber-ffd54f: #ffea7f; 
    --c-amber-ffc85a: #ffc85a; 
    --c-amber-ffd24d: #ffd24d; 
    --c-amber-ffc107: #ffc107; 
    --c-amber-ffd54f: #ffd54f; 
    --c-amber-ffca28: #ffca28; 
    --c-amber-f59e0b: #f59e0b; 
    --c-yellow-e6c400: #e6c400; 
    --c-yellow-marker-070: rgba(255,235,59,0.7);
    --c-yellow-075: rgba(255,235,59,.75);
    --c-yellow-028: rgba(255,208,0,.28);
    --c-yellow-010: rgba(255,208,0,.10);
    --c-yellow-040: rgba(255,208,0,.40);
    --c-yellow-221-038: rgba(255,221,87,0.38);
   
    --c-orange-deep: #f4511e;
    --c-orange-ff5e13: #FF5E13; 
    --c-orange-df4700: #df4700; 
    --c-orange-ff4300: #ff4300; 
    --c-orange-ff7043: #ff7043; 
    
    --c-green-52c41a: #52c41a;
    --c-green-overlay-082-196-026-022: rgba(82,196,26,.22);
    --c-green-66bb6a: #66bb6a; 
    --c-green-4caf50: #4caf50; 
    --c-green-7dd87d: #7dd87d; 
    --c-green-002b1f: #002b1f; 
    --c-green-0f3b1a: #0f3b1a; 
    --c-green-10b981: #10b981; 
    --c-green-2ecc71: #2ecc71; 
    --c-teal-26a69a: #26a69a; 
    --c-teal-80cbc4: #80cbc4; 
    --c-teal-4db6ac: #4db6ac; 
    --c-teal-5-135-137: rgb(5,135,137);
    --c-springgreen: mediumspringgreen; 
    --c-green-00E18A: #00E18A; 
    --c-green-4cffa5: #4cffa5; 

    --c-red: rgb(255,0,0);
    --c-red-ff073a: rgb(255,7,58);
    --c-red-f44336: #f44336; 
    --c-red-e53935: #e53935; 
    --c-red-3b0f0f: #3b0f0f; 
    --c-red-e74c3c: #e74c3c; 
    --c-pink-deeppink: deeppink; 
    --c-pink-ed00eb: #ed00eb; 
    --c-red-ff2400: #ff2400; 
   
    --c-blue-336699: #336699; 
    --c-blue-4da3ff: #4da3ff; 
    --c-blue-64b5f6: #64b5f6; 
    --c-blue-81d4fa: #81d4fa; 
    --c-blue-2c3e50: #2c3e50; 
    --c-blue-3498db: #3498db; 
    --c-cyan-6AEFEE: #6AEFEE; 
    --c-cyan-00ffff: #00FFFF; 
    --c-blue-navy: #000080; 
    --c-purple-7f38ec: #7f38ec; 
    --c-purple-b39ddb: #b39ddb; 
    --c-purple-ab47bc: #ab47bc; 
    
    --c-text-white: #fff; 
    --c-text-silver: silver; 
    --c-text-light: #ccc; 
   
    --c-white-012: rgba(255,255,255,0.12);
    --c-white-010: rgba(255,255,255,0.10);
    --c-white-006: rgba(255,255,255,0.06);
    --c-white-050: rgba(255,255,255,.5);
    --c-black-050: rgba(0,0,0,0.5);
    --c-black-025: rgba(0,0,0,0.25);
    --c-black-015: rgba(0,0,0,0.15);
    --c-black-018: rgba(0,0,0,0.18);
    --c-gray-eee-050: rgba(238,238,238,.50); 
    --c-black-040: rgba(0,0,0,.40); 
    --c-amber-e9b24a: #e9b24a; 
    --c-amber-e9b24a-006: rgba(233,178,74,.06);
    --c-amber-ffc107-050: rgba(255,193,7,.50);
   
    --c-2b2f38: #2b2f38; 
    
    --bg-top: rgb(50,50,50);
    --bg-bot: rgb(24,24,24);
    --glow-amber-020: rgba(255,185,40,.20);
    --glow-amber-010: rgba(255,185,40,.10);
    --glow-amber-016: rgba(255,185,40,.16);
    --glow-amber-008: rgba(255,185,40,.08);
    --c-amber-045: rgba(255,185,40,.45); 
    --c-amber-080: rgba(255,185,40,.8);
   
    --c-orange-ff8528: #ff8528; 
    --c-brown-3a2c15: #3a2c15; 
    --c-gray-ddd: #dddddd; 
    --c-purple-7f38ec-028: rgba(127,56,236,.28);
   
    --c-red-f44336-045: rgba(244,67,54,.45);
    --c-red-f44336-012: rgba(244,67,54,.12);
    --c-green-2ecc71-045: rgba(46,204,113,.45);
   
    --c-black-010: rgba(0,0,0,.10);
}*/



:root {
    /* Basic */
    --c-white: #ffffff; /* rgb(255,255,255) */
    --c-black: #000000; /* rgb(0,0,0) */
    --c-amber: #ffb928; /* Main Accent color rgb(255,185,40) */
    /* Main Colors */
    --c-gray-12: rgb(8,8,12); /* Special color - chat code block*/
    --c-gray-120: rgb(14,14,18); /* deepest canvas / body / chat conversation area, chat maessage > code block > toolbar */
    --c-gray-64: rgb(24,24,28); /* toolbars / rails / Side bars / drop down menus/ selected text boxes / chat incoming msg / chat chart canvas background*/
    --c-gray-74: rgb(28,28,32); /* Main - controls group boxes, editor, chat text area user prompt */
    --c-gray-50: rgb(20,20,24); /* Selected controls like text boxes combo boxes / chat citations and recources blocks bg */
    --c-tab-active-bg: rgb(38,38,42); /* Active controls like editor active tab / hover on drop down menues */
    --c-btn-hover-bg: rgb(50,50,54); /* Buttons hover bg color */
    --c-gray-60: rgb(62,62,66); /* Used for the editor splitter linear-gradient color */
    --c-gray-54: rgb(42,42,46); /* Controls - text boxes background color / buttons background color */
    --c-gray-94: rgb(90,90,94); /* Control borders / text box border progress bar backgroud color */
    --c-amber-focus: rgba(233,178,74,.48); /* Inputs focus */
    --c-gray-name: rgb(126,126,130); /* Used mostyle for box-shadow */
    --c-gray-150: rgb(150,150,150); /* We use it for disabled controls color in the chat for example "undo chages when its disabled on a --c-gray-64 background */
    --c-gray-aaa: rgb(170,170,174);
    --c-gray-180: rgb(180,180,184);
    --c-gray-placeholder: rgb(192,192,192); /* place holders for inputs and secondary text - mostly on --c-gray-74 background */
    --c-white-012: rgba(255,255,255,.15); /* Controls border like chat text area container */
    /* Custome Scroll bar*/
    --c-scrollbar-thumb: var(--c-gray-94); /* Scroll bar - thumb */
    --c-scrollbar-thumb-hover: rgb(120,120,124); /* Scroll bar - thumb - hover */
    --c-white-006: rgba(255,255,255,0.06); /* Scroll bar - Track background color */

    --c-gray-ddd: rgb(221,221,221); /* Chat List font color */
    --c-gray-eee: rgb(238,238,238); /* Chat user prompt font color / chat incoming message font color / chat callouts font color */
    --c-text-white: #fff; /* Chat incoming messege H2 header */
    --c-text-light: rgb(204,204,204); /* Light text like text on disabled controls or secondary inputs */
    /* Chat user outgoing message bubble*/
    --c-brown-3a2c15: #3a2c15; /* rgb(58,44,21) - chat outgoing message bubble background color */
    --c-cream-ffeedd: #ffeedd; /* rgb(255,238,221) -  chat outgoing message bubble font color*/
    --c-amber-e9b24a: #e9b24a; /* rgb(233,178,74) - we use it for the outgoing chat bubble box shadow*/
    --c-amber-080: rgba(255,185,40,.8); /* We use it for the datetime and name of the chat outgoing bubble header (equivilent for place holder color for regular controls)*/
    /* Alpha Colors white/black */
    --c-black-050: rgba(0,0,0,0.5);
    --c-black-040: rgba(0,0,0,.40);
    --c-black-018: rgba(0,0,0,0.18);
    --c-black-010: rgba(0,0,0,.10);
    --c-black-025: rgba(0,0,0,0.25);
    --c-white-050: rgba(255,255,255,.5);
    --c-white-010: rgba(255,255,255,0.10);
    /* Alpha Colors main accent color (amber) */
    --glow-amber-020: rgba(255,185,40,.20);
    --glow-amber-010: rgba(255,185,40,.10);
    --glow-amber-016: rgba(255,185,40,.16);
    --glow-amber-008: rgba(255,185,40,.08);
    --c-amber-ffc107-050: rgba(255,193,7,.50); /* rgb(255,193,7) @ 50% */
    --c-amber-045: rgba(255,185,40,.45); /* rgb(255,185,40)  @ 45% */
    /* Amber variations (mainly for gradient colors and box shadows styles)*/
    --c-amber-ffd54f: #ffd54f; /* rgb(255,213,79) */
    --c-amber-ffc85a: #ffc85a; /* rgb(255,200,90) */
    --c-amber-ffc107: #ffc107; /* rgb(255,193,7) */
    --c-amber-f59e0b: #f59e0b; /* rgb(245,158,11) Hover yellow */
    /* Other Colors*/
    /* Purples*/
    --c-purple-7f38ec: #7f38ec; /* rgb(127,56,236) */
    --c-purple-7f38ec-028: rgba(127,56,236,.28);
    /* Oranges/Reds */
    --c-orange-ff8528: #ff8528; /* rgb(255,133,40) - אזהרה/כתום חם */
    --c-red-ff073a: rgb(255,7,58);
    --c-red-f44336: #f44336; /* rgb(244,67,54) */
    --c-red-f44336-045: rgba(244,67,54,.45);
    --c-red-f44336-012: rgba(244,67,54,.12);
    --c-red-3b0f0f: #3b0f0f; /* rgb(59,15,15) */
    --c-red-e74c3c: #e74c3c; /* rgb(231,76,60) */
    --c-pink-deeppink: deeppink; /* Editor Marker Color */
    /* Yellows */
    --c-yellow-010: rgba(255,208,0,.10);
    --c-yellow-040: rgba(255,208,0,.40);
    --c-yellow-028: rgba(255,208,0,.28);
    --c-yellow-e6c400: #e6c400; /* rgb(230,196,0) (Editor Marker Color)*/
    --c-yellow-marker-070: rgba(255,235,59,0.7); /* Chat search marker*/
    /* Greens */
    --c-green-2ecc71-045: rgba(46,204,113,.45);
    --c-green-2ecc71: #2ecc71; /* rgb(46,204,113) */
    --c-green-002b1f: #002b1f; /* rgb(0,43,31) */
    --c-green-10b981: #10b981; /* rgb(16,185,129) */
    --c-green-0f3b1a: #0f3b1a; /* rgb(15,59,26) */
    --c-green-4cffa5: #4cffa5; /* Editor marker color */
    /* Blues */
    --c-blue-2c3e50: #2c3e50; /* rgb(44,62,80) */
    --c-blue-3498db: #3498db; /* rgb(52,152,219) */
    --c-teal-5-135-137: rgb(5,135,137); /* Editor Marker Color */
    --c-blue-navy: #000080; /* Editor Marker Color */
    --c-cyan-00ffff: #00FFFF; /* Editor Marker Color */
    /********** Chat callout background a left border colors ***********/
    /* Info: neutral/blue for FYI messages */
    --c-callout-info-bg: var(--c-blue-2c3e50);
    --c-callout-info-accent: var(--c-blue-3498db);
    /* Warning: amber/brown for risks & cautions */
    --c-callout-warn-bg: var(--c-brown-3a2c15);
    --c-callout-warn-accent: var(--c-amber-f59e0b);
    /* Tip: green/teal for hints & best practices */
    --c-callout-tip-bg: var(--c-green-002b1f);
    --c-callout-tip-accent: var(--c-green-10b981);
    /* Error: red for failures & blocking issues */
    --c-callout-error-bg: var(--c-red-3b0f0f);
    --c-callout-error-accent: var(--c-red-e74c3c);
    /* Success: green for confirmations & completion */
    --c-callout-success-bg: var(--c-green-0f3b1a);
    --c-callout-success-accent: var(--c-green-2ecc71);
    /* Neutral: generic note with subtle gray accent */
    --c-callout-neutral-bg: var(--c-tab-active-bg);
    --c-callout-neutral-accent: var(--c-gray-180);
    /* ***************************************************************/
    /****************** Code mirror editor Theme ********************/
    /* Editor: primary code text on dark editor */
    --c-editor-text-primary: #ffffec; /* rgb(255,255,236) */
    /* Editor: selection background (solid) + rgb triplet for rgba uses */
    --c-editor-selection-bg: #716C62; /* rgb(113,108,98) */
    --c-editor-selection-rgb: 113,108,98;
    /* Editor: subtle gutter markers */
    --c-editor-gutter-subtle: rgb(198,198,198);
    /* Editor: comments */
    --c-editor-comment: #95958a; /* rgb(149,149,138) */
    /* Editor: cyan for numbers/atoms/vars-2 */
    --c-editor-cyan: rgb(0,248,255);
    /* Editor: properties/attributes/tags */
    --c-editor-prop: #9ddfe9; /* rgb(157,223,233) */
    /* Editor: string literals */
    --c-editor-string: #ffcf6c; /* rgb(255,207,108) */
    /* Editor: bracket color (very light text) */
    --c-editor-bracket: #fffffc; /* rgb(255,255,252) */
    /* Editor: link tokens (URLs) */
    --c-editor-link: #f54b07; /* rgb(245,75,7) */
    /* Editor: error underline color */
    --c-editor-error-underline: #636363; /* rgb(99,99,99) */
    /* Editor: active line background */
    --c-editor-activeline-bg: #494b41; /* rgb(73,75,65) */
    /* Editor: matching tag highlight (default CM) */
    --c-editor-matchtag-bg: rgba(255,255,255,.37);
    /* Editor: matching tag (Jonathan override) */
    --c-editor-matchtag-bg-alt: rgba(50,50,50,.5);
    --c-editor-matchtag-text: #f9f67e; /* rgb(249,246,126) */
    /* Editor: matching bracket colors */
    --c-editor-matchbracket: #4cffa5; /* rgb(76,255,165) */
    --c-editor-matchbracket-bg: rgba(10,10,10,.5);
    /* Editor: non-matching bracket color */
    --c-editor-nonmatchbracket: #ff2222; /* rgb(255,34,34) */
    /* Editor: match-highlight background (search highlight) */
    --c-editor-matchhighlight-bg: rgb(54,54,54);
    /* Editor hints dropdown (popup) */
    --c-editor-hint-border: #c0c0c0; /* rgb(192,192,192) */ /* 1px border (silver) */
    --c-editor-hints-bg: rgb(54,54,54); /* popup background */
    --c-editor-hint-text: #e74c3c; /* rgb(231,76,60) */ /* default hint text (red) */
    --c-editor-hint-active-bg: rgb(30,30,30); /* active item background */
    /****************************************************************/

    --nav-ico-size: 24px; /* Account side bar icons size */
}


/*:root {*/
    /* Basic */
    /*--c-white: #ffffff;
    --c-black: #000000;
   
    --c-gray-12: rgb(54,54,58); 
    --c-gray-120: rgb(60,60,64); 
    --c-gray-64: rgb(70,70,74); 
    --c-gray-74: rgb(74,74,78); 
    --c-gray-50: rgb(66,66,70); 
    --c-tab-active-bg: rgb(84,84,88); 
    --c-btn-hover-bg: rgb(96,96,100); 
    --c-gray-60: rgb(108,108,112); 
    --c-gray-54: rgb(88,88,92); 
    --c-gray-94: rgb(136,136,140); 
    --c-amber-focus: rgba(233,178,74,.48);
    --c-gray-name: rgb(172,172,176); 
    --c-gray-150: rgb(196,196,196); 
    --c-gray-aaa: rgb(216,216,220); 
    --c-gray-180: rgb(226,226,230); 
    --c-gray-placeholder: rgb(238,238,238); 
    --c-white-012: rgba(255,255,255,.15);
   
    --c-scrollbar-thumb: var(--c-gray-94);
    --c-scrollbar-thumb-hover: rgb(166,166,170); 
    --c-white-006: rgba(255,255,255,0.06);

    --c-gray-ddd: rgb(255,255,255); 
    --c-gray-eee: rgb(255,255,255); 
    --c-text-white: #fff;
    --c-text-light: rgb(250,250,250);

    --c-black-050: rgba(0,0,0,0.5);
    --c-black-040: rgba(0,0,0,.40);
    --c-black-018: rgba(0,0,0,0.18);
    --c-black-010: rgba(0,0,0,.10);
    --c-black-025: rgba(0,0,0,0.25);
    --c-white-050: rgba(255,255,255,.5);
    --c-white-010: rgba(255,255,255,0.10);

    --c-amber: #ffb928;
    --glow-amber-020: rgba(255,185,40,.20);
    --glow-amber-010: rgba(255,185,40,.10);
    --glow-amber-016: rgba(255,185,40,.16);
    --glow-amber-008: rgba(255,185,40,.08);
    --c-amber-ffc107-050: rgba(255,193,7,.50);
    --c-amber-045: rgba(255,185,40,.45);
    --c-amber-ffd54f: #ffd54f;
    --c-amber-ffc85a: #ffc85a;
    --c-amber-ffc107: #ffc107;
    --c-amber-f59e0b: #f59e0b;
    --c-brown-3a2c15: #3a2c15;
    --c-cream-ffeedd: #ffeedd;
    --c-amber-e9b24a: #e9b24a;
    --c-amber-080: rgba(255,185,40,.8);
    --c-purple-7f38ec: #7f38ec;
    --c-purple-7f38ec-028: rgba(127,56,236,.28);
    --c-orange-ff8528: #ff8528;
    --c-red-ff073a: rgb(255,7,58);
    --c-red-f44336: #f44336;
    --c-red-f44336-045: rgba(244,67,54,.45);
    --c-red-f44336-012: rgba(244,67,54,.12);
    --c-red-3b0f0f: #3b0f0f;
    --c-red-e74c3c: #e74c3c;
    --c-yellow-010: rgba(255,208,0,.10);
    --c-yellow-040: rgba(255,208,0,.40);
    --c-yellow-028: rgba(255,208,0,.28);
    --c-yellow-e6c400: #e6c400;
    --c-green-2ecc71-045: rgba(46,204,113,.45);
    --c-green-2ecc71: #2ecc71;
    --c-green-002b1f: #002b1f;
    --c-green-10b981: #10b981;
    --c-green-0f3b1a: #0f3b1a;
    --c-blue-2c3e50: #2c3e50;
    --c-blue-3498db: #3498db;

    --c-callout-info-bg: var(--c-blue-2c3e50);
    --c-callout-info-accent: var(--c-blue-3498db);
    --c-callout-warn-bg: var(--c-brown-3a2c15);
    --c-callout-warn-accent: var(--c-amber-f59e0b);
    --c-callout-tip-bg: var(--c-green-002b1f);
    --c-callout-tip-accent: var(--c-green-10b981);
    --c-callout-error-bg: var(--c-red-3b0f0f);
    --c-callout-error-accent: var(--c-red-e74c3c);
    --c-callout-success-bg: var(--c-green-0f3b1a);
    --c-callout-success-accent: var(--c-green-2ecc71);
    --c-callout-neutral-bg: var(--c-tab-active-bg);
    --c-callout-neutral-accent: var(--c-gray-180);

    --c-editor-text-primary: #ffffec;
    --c-editor-selection-bg: #716C62;
    --c-editor-selection-rgb: 113,108,98;
    --c-editor-gutter-subtle: rgb(198,198,198);
    --c-editor-comment: #95958a;
    --c-editor-cyan: rgb(0,248,255);
    --c-editor-prop: #9ddfe9;
    --c-editor-string: #ffcf6c;
    --c-editor-bracket: #fffffc;
    --c-editor-link: #f54b07;
    --c-editor-error-underline: #636363;
    --c-editor-activeline-bg: #494b41;
    --c-editor-matchtag-bg: rgba(255,255,255,.37);
    --c-editor-matchtag-bg-alt: rgba(50,50,50,.5);
    --c-editor-matchtag-text: #f9f67e;
    --c-editor-matchbracket: #4cffa5;
    --c-editor-matchbracket-bg: rgba(10,10,10,.5);
    --c-editor-nonmatchbracket: #ff2222;
    --c-editor-matchhighlight-bg: rgb(54,54,54);
    --c-editor-hint-border: #c0c0c0;
    --c-editor-hints-bg: rgb(54,54,54);
    --c-editor-hint-text: #e74c3c;
    --c-editor-hint-active-bg: rgb(30,30,30);
}*/




* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: var(--c-gray-74);
    font-family: Calibri;
    /*min-width: 1105px;*/
}

body {
    clear: both;
    margin: 0 auto;
    padding: 0;
    /*min-width: 1105px;*/
}

/* For hiding unfilled ads*/
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}
/* For backup image for ads */
ins.adsbygoogle a {
    display: none !important;
}
/* For backup image for ads */
ins.adsbygoogle[data-ad-status="unfilled"] a {
    display: block;
}

.mainheader {
    width: 100%;
    height: 80px;
    background-color: var(--c-white);
    margin: auto;
    /*min-width: 1105px;*/
}

h1 {
    color: var(--c-blue-336699); /* #369 */
    font-family: Calibri,Arial, Helvetica, sans-serif;
    font-size: 250%;
}

.btn {
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 7px 10px 7px 10px;
    text-align: left;
    border-radius: 4px;
    font-size: 14px;
    color: var(--c-gray-eee);
    background-color: var(--c-gray-54);
    border: none;
    cursor: pointer;
}

    .btn img {
        display: inline-block;
        margin-right: 7px;
    }

    .btn span {
        display: inline-block;
    }

    .btn:hover {
        background-color: var(--c-tab-active-bg);
        color: var(--c-amber);
    }

.onerrorelement {
    color: var(--c-red);
}

/* modal yes / no messagebox*/
.resultboxmodal {
    display: none;
    position: fixed;
    z-index: 9;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--c-black);
    background-color: var(--c-black-050);
}

.msgboxyesno {
    box-shadow: 1px 1px 2px var(--c-gray-name) inset, -1px -1px 2px var(--c-gray-name) inset, 2px 2px 12px var(--c-black);
}

#id_confrmdiv {
    display: block;
    background-color: var(--c-gray-eee);
    border-radius: 5px;
    border: 1px solid var(--c-gray-aaa);
    position: fixed;
    width: 300px;
    left: 50%;
    top: 25%;
    margin-left: -150px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--c-gray-50);
    color: var(--c-amber);
    box-shadow: inset 0 0 8px var(--c-amber), -1px -1px 2px var(--c-gray-name) inset, 2px 2px 12px var(--c-black);
}

#resultboxtextcontent {
    margin-bottom: 5px;
}

.btn2 {
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 7px 10px;
    text-align: left;
    border-radius: 4px;
    font-size: 14px;
    color: var(--c-tab-active-bg);
    background-color: var(--c-amber);
    border: none;
    cursor: pointer;
}

    .btn2 img {
        display: inline-block;
        margin-right: 7px;
    }

    .btn2 span {
        display: inline-block;
    }

    .btn2:hover {
        background-color: var(--c-amber-dark);
        color: var(--c-gray-12);
    }

.btn_red {
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 7px 10px;
    text-align: left;
    border-radius: 4px;
    font-size: 14px;
    color: var(--c-tab-active-bg);
    background-color: var(--c-red-ff073a);
    border: none;
    cursor: pointer;
}

    .btn_red img {
        display: inline-block;
        margin-right: 7px;
    }

    .btn_red span {
        display: inline-block;
    }

    .btn_red:hover {
        background-color: var(--c-orange-deep);
        color: var(--c-gray-12);
    }

.btn_green {
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 7px 10px;
    text-align: left;
    border-radius: 4px;
    font-size: 14px;
    color: var(--c-tab-active-bg);
    background-color: var(--c-springgreen);
    border: none;
    cursor: pointer;
}

    .btn_green img {
        display: inline-block;
        margin-right: 7px;
    }

    .btn_green span {
        display: inline-block;
    }

    .btn_green:hover {
        background-color: var(--c-green-00E18A);
        color: var(--c-gray-12);
    }

.btn_orange {
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 7px 10px;
    text-align: left;
    border-radius: 4px;
    font-size: 14px;
    color: var(--c-tab-active-bg);
    background-color: var(--c-orange-ff5e13);
    border: none;
    cursor: pointer;
}

    .btn_orange img {
        display: inline-block;
        margin-right: 7px;
    }

    .btn_orange span {
        display: inline-block;
    }

    .btn_orange:hover {
        background-color: var(--c-orange-df4700);
        color: var(--c-gray-12);
    }

.btn_gray {
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 7px 10px;
    text-align: left;
    border-radius: 4px;
    font-size: 14px;
    color: var(--c-black);
    background-color: var(--c-gray-placeholder);
    border: none;
    cursor: pointer;
}

    .btn_gray img {
        display: inline-block;
        margin-right: 7px;
    }

    .btn_gray span {
        display: inline-block;
    }

    .btn_gray:hover {
        background-color: var(--c-gray-180);
        color: var(--c-gray-12);
    }

.btn_purple {
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 7px 10px;
    text-align: left;
    border-radius: 4px;
    font-size: 14px;
    color: var(--c-text-white);
    background-color: var(--c-purple-7f38ec);
    border: none;
    cursor: pointer;
}

    .btn_purple img {
        display: inline-block;
        margin-right: 7px;
    }

    .btn_purple span {
        display: inline-block;
    }

    .btn_purple:hover {
        background-color: var(--c-purple-7f38ec);
        color: var(--c-gray-eee);
    }

.styled-background {
    background-color: var(--c-black) !important;
    color: var(--c-white) !important;
}

.styled-backgroundword {
    background-color: var(--c-yellow-e6c400);
    color: var(--c-gray-54) !important;
}

.styled-gray-marker {
    background-color: var(--c-text-light);
    color: var(--c-gray-54) !important;
}

.styled-backgroundwordconcat {
    background-color: var(--c-yellow-e6c400);
    color: var(--c-gray-54) !important;
}

.styled-htmlmarker {
    background-color: var(--c-orange-deep);
    color: var(--c-black) !important;
}

.styled-searcheditem {
    background-color: var(--c-yellow-e6c400) !important;
    color: var(--c-gray-54) !important;
}

.styled-backgroundCurrentSearchItm {
    background-color: var(--c-pink-deeppink) !important;
    color: var(--c-yellow-e6c400) !important;
    font-weight: bold;
}

/* Marker Colors */
.styled-marker-green {
    background-color: var(--c-green-4cffa5) !important;
    color: var(--c-gray-54) !important;
}

.styled-marker-white {
    background-color: var(--c-white) !important;
    color: var(--c-gray-54) !important;
}

.styled-marker-glowingyellow {
    background-color: var(--c-yellow-e6c400) !important;
    color: var(--c-gray-54) !important;
}

.styled-marker-yellow {
    background-color: var(--c-amber) !important;
    color: var(--c-gray-54) !important;
}

.styled-marker-pink {
    background-color: var(--c-pink-deeppink) !important;
    color: var(--c-white) !important;
}

.styled-marker-cyan {
    background-color: var(--c-cyan-00ffff) !important;
    color: var(--c-gray-54) !important;
}

.styled-marker-deepblue {
    background-color: var(--c-teal-5-135-137) !important;
    color: var(--c-white) !important;
}

.styled-marker-navy {
    background-color: var(--c-blue-navy) !important;
    color: var(--c-white) !important;
}

.styled-marker-error {
    background-color: var(--c-red);
    color: var(--c-black) !important;
}

.styled-marker-black {
    background-color: var(--c-black) !important;
    color: var(--c-white) !important;
}

/* MAIN EDITOR HELP STYLE */
.styled-help-header {
    font-weight: bold;
    color: var(--c-white);
    font-size: 1.1em;
}

.styled-help-bold {
    color: var(--c-amber);
}

.styled-help-bold-gyellow {
    color: var(--c-yellow-e6c400);
}

.styled-help-bold-white {
    color: var(--c-white);
}

.styled-help-bullet {
    color: var(--c-amber);
}

.styled-help {
    color: var(--c-amber);
}

.styled-header {
    color: var(--c-amber);
    font-weight: bold;
    text-decoration: underline;
}

.waitmsgdiv {
    text-align: center;
    display: inline-block;
    box-shadow: inset 0 0 8px var(--c-amber), -1px -1px 2px var(--c-gray-name) inset, 2px 2px 12px var(--c-black);
    padding: 25px 50px;
    background-color: var(--c-gray-54);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    border-radius: 3px;
}

.waitmsgdivfirstload {
    text-align: center;
    display: inline-block;
    /*border: 7px solid var(--c-amber);*/
    background-color: var(--c-gray-74);
    width: 100%;
    min-height: -moz-calc(100vh - 70px);
    min-height: -webkit-calc(100vh - 70px);
    min-height: -o-calc(100vh - 70px);
    min-height: calc(100vh - 250px);
    border-radius: 3px;
    padding-top: 150px;
}

.waitimgfirstload {
    text-align: center;
    display: inline-block;
    width: 100%;
}

.waitmsg {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.6em;
    font-weight: bold;
    color: var(--c-amber);
    font-family: Calibri;
}

.CodeMirror pre.CodeMirror-placeholder {
    color: var(--c-gray-placeholder);
    font-style: italic;
}

.mobile {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    padding: 0 !important;
}

    .mobile #msg {
        margin-top: 25%;
    }


/* A */










/* REGEX ADDED BY JONATHAN */
.cm-a {
    background: var(--c-amber);
    color: var(--c-black);
}

.cm-b {
    background: var(--c-teal-5-135-137);
    color: var(--c-white);
}

.cm-c {
    color: var(--c-green-4caf50);
}

.cm-g1 {
    background: var(--c-gray-54);
    color: var(--c-yellow-e6c400);
}

.cm-g2 {
    background: var(--c-green-4cffa5);
    color: var(--c-gray-54);
}

.cm-g3 {
    background: var(--c-blue-basic);
    color: var(--c-white);
}

.cm-g4 {
    background-color: var(--c-pink-deeppink);
    color: var(--c-white);
}

.cm-g5 {
    background-color: var(--c-red);
    color: var(--c-white);
}

.cm-err {
    background: var(--c-orange-ff4300);
}

.resources-list.animated li::marker {
    color: var(--c-amber);
}

/* AI CHAT DEFINITIONS */
.resources-list.animated a {
    color: var(--c-amber);
    text-decoration: none;
}

    .resources-list.animated a:hover {
        text-decoration: underline;
    }

.ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 5px;
    background-color: transparent;
    color: var(--c-text-light);
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Segoe UI', Roboto, sans-serif;
    height: 33px;
    border: none; /* kill the UA border */
    box-shadow: none; /* just in case */
}

    .ctrl-btn i {
        margin-right: 3px;
    }

    .ctrl-btn img {
        width: 16px;
        height: 16px;
        margin-right: 1px;
        vertical-align: middle;
        display: inline-block;
    }

    .ctrl-btn:hover {
        border: 1px solid var(--c-amber);
        transform: translateY(-1px);
        color: var(--c-amber);
    }

.search-mark {
    background-color: var(--c-yellow-marker-070);
    padding: 0 2px;
    border-radius: 2px;
}

.inline-code {
    background: var(--c-white-012);
    color: var(--c-gray-placeholder);
    font-family: Consolas, 'Courier New', monospace;
    font-size: .92em;
    padding: .08em .35em;
    border-radius: 4px;
    white-space: pre-wrap;
    line-height: 1.4;
}

.msg-icon {
    display: inline-block;
    margin-right: 6px;
    font-size: 1em;
    vertical-align: middle;
    opacity: .95;
}

    .msg-icon.note {
        color: var(--c-blue-4da3ff);
    }

    .msg-icon.warn {
        color: var(--c-amber-ffc107);
    }

    .msg-icon.tip {
        color: var(--c-green-7dd87d);
    }

    .msg-icon.success {
        color: var(--c-green-4caf50);
    }

    .msg-icon.error {
        color: var(--c-red-f44336);
    }

    .msg-icon.info {
        color: var(--c-blue-64b5f6);
    }

    .msg-icon.important {
        color: var(--c-orange-ff7043);
    }

    .msg-icon.bug {
        color: var(--c-red-f44336);
    }

    .msg-icon.fix {
        color: var(--c-teal-26a69a);
    }

    .msg-icon.deprecated {
        color: var(--c-gray-180);
    }

    .msg-icon.breaking {
        color: var(--c-red-e53935);
    }

    .msg-icon.security {
        color: var(--c-purple-b39ddb);
    }

    .msg-icon.perf {
        color: var(--c-teal-80cbc4);
    }

    .msg-icon.a11y {
        color: var(--c-blue-81d4fa);
    }

    .msg-icon.seo {
        color: var(--c-amber-ffd54f);
    }

    .msg-icon.browser {
        color: var(--c-teal-4db6ac);
    }

    .msg-icon.heads {
        color: var(--c-purple-ab47bc);
    }

    .msg-icon.reminder {
        color: var(--c-amber-ffca28);
    }

    .msg-icon.update {
        color: var(--c-blue-64b5f6);
    }

    .msg-icon.question {
        color: var(--c-blue-64b5f6);
    }

    .msg-icon.answer {
        color: var(--c-green-66bb6a);
    }

    .msg-icon.todo {
        color: var(--c-text-light);
    }

/* *********************** OPS MARKERS ************************/
.CodeMirror .cv-op-preview {
    background: var(--c-yellow-075) !important;
}

.CodeMirror .cv-op-applied {
    background: var(--c-green-overlay-082-196-026-022) !important;
    border-bottom: 2px solid var(--c-green-52c41a);
}

.cv-op-mode .CodeMirror-selected,
.cv-op-mode.CodeMirror-focused .CodeMirror-selected {
    background: var(--c-yellow-028) !important;
}

.CodeMirror .cv-op-preview, .CodeMirror .cv-op-preview * {
    color: var(--c-black) !important;
}
/* *********************** OPS MARKERS ************************/

/* Re-color selection while in op-review mode */
:host ::ng-deep .cv-op-mode .CodeMirror-selected {
    background: var(--c-yellow-028) !important;
}

/* target range */
:host ::ng-deep .cv-op-highlight {
    background: var(--c-yellow-221-038);
    border-bottom: 2px solid var(--c-amber-ffd24d);
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--c-black-015) inset;
}

/* links בתוך הודעות */
.chat-messages a {
    color: var(--c-amber);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1.25px;
}

    .chat-messages a:hover,
    .chat-messages a:focus {
        color: var(--c-amber-ffc85a);
        text-decoration-thickness: 2px;
        outline: none;
    }

.chat-messages pre a, .chat-messages code a {
    text-decoration: none;
}

/* Scroll bar */




/* ===== Global scrollbar styling ===== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--c-scrollbar-thumb) var(--c-white-006);
}

    /* WebKit/Blink */
    *::-webkit-scrollbar {
        width: 14px;
        height: 14px;
    }

    *::-webkit-scrollbar-track {
        background: var(--c-white-006);
    }

    *::-webkit-scrollbar-thumb {
        background: var(--c-scrollbar-thumb);
        border-radius: 8px;
        border: 3px solid transparent;
        background-clip: padding-box;
    }

        *::-webkit-scrollbar-thumb:hover {
            background: var(--c-scrollbar-thumb-hover);
        }


/* === CodeMirror custom scrollbars === */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--c-scrollbar-thumb) var(--c-white-006); /* thumb | track */
}

    /* Chrome/Edge/WebKit */
    .CodeMirror-vscrollbar::-webkit-scrollbar,
    .CodeMirror-hscrollbar::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .CodeMirror-vscrollbar::-webkit-scrollbar-track,
    .CodeMirror-hscrollbar::-webkit-scrollbar-track {
        background: var(--c-white-006);
        border-radius: 8px;
    }

    .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
    .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
        background: var(--c-scrollbar-thumb);
        border-radius: 8px;
        border: 2px solid var(--c-black-025);
    }

        .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
        .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
            background: var(--c-scrollbar-thumb);
        }

/* avoid layout shift when bars appear */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar {
    scrollbar-gutter: stable;
}

/************** ANIMATION **********************/
.login-page .digits-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    display: grid;
    font-family: "JetBrains Mono", Consolas, monospace;
    color: var(--c-2b2f38);
    line-height: 18px;
}

    .login-page .digits-bg span {
        font-size: 14px;
        opacity: .85;
    }

@keyframes flash-white {
    0% {
        color: var(--c-2b2f38)
    }

    25% {
        color: var(--c-white);
        opacity: .9
    }

    50% {
        color: var(--c-white);
        opacity: .5
    }

    100% {
        color: var(--c-2b2f38)
    }
}

@keyframes flash-yellow {
    0% {
        color: var(--c-2b2f38)
    }

    25% {
        color: var(--c-amber);
        opacity: .85
    }

    50% {
        color: var(--c-2b2f38)
    }

    100% {
        color: var(--c-2b2f38)
    }
}

@keyframes flash-pink {
    0% {
        color: var(--c-2b2f38)
    }

    25% {
        color: var(--c-pink-ed00eb);
        opacity: .8
    }

    50% {
        color: var(--c-2b2f38)
    }

    100% {
        color: var(--c-2b2f38)
    }
}

@keyframes flash-blue {
    0% {
        color: var(--c-2b2f38)
    }

    25% {
        color: var(--c-cyan-6AEFEE);
        opacity: .8
    }

    50% {
        color: var(--c-2b2f38)
    }

    100% {
        color: var(--c-2b2f38)
    }
}

.login-page .digits-bg .anim-w2 {
    animation: flash-white 2s ease-in-out 2s infinite;
}

.login-page .digits-bg .anim-w3 {
    animation: flash-white 3s ease-in-out 3s infinite;
}

.login-page .digits-bg .anim-y4 {
    animation: flash-yellow 4s ease-in-out 1s infinite;
}

.login-page .digits-bg .anim-p5 {
    animation: flash-pink 5s ease-in-out 2s infinite;
}

.login-page .digits-bg .anim-b6 {
    animation: flash-blue 6s ease-in-out 3s infinite;
}

.login-page .contact-content > * {
    position: relative;
    z-index: 1;
}
/************** END ANIMATION **********************/

/************** Sparkle ANIMATION **********************/
.general, .background {
}

.background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg, var(--bg-top), var(--bg-bot));
}

    .background::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 160px;
        pointer-events: none;
        background: radial-gradient(220% 60% at 50% -38%, var(--glow-amber-020) 0%, var(--glow-amber-010) 42%, transparent 62%), radial-gradient(140% 50% at 85% -45%, var(--glow-amber-016) 0%, var(--glow-amber-008) 36%, transparent 60%), radial-gradient(680px 420px at 140px -20px, var(--glow-amber-008), transparent 58%);
    }

@media (max-width: 800px) {
    .background {
        background: radial-gradient(1100px 760px at 140px 80px, var(--glow-amber-010), transparent 65%), radial-gradient(1400px 900px at 50% -15%, var(--glow-amber-008), transparent 72%), radial-gradient(1200px 900px at 50% 120%, var(--c-black-018), transparent 65%), linear-gradient(180deg, var(--bg-top), var(--bg-bot));
    }
}

@keyframes fade-in-out {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}
/************** End Sparkle ANIMATION **********************/

.cv-icon {
    color: var(--c-amber); /* drives stroke via currentColor */
    display: block; /* optional: avoid inline gaps */
    width: 20px;
    height: 20px; /* optional defaults */
}
.cv-icon-medium {
    color: var(--c-amber); /* drives stroke via currentColor */
    display: block; /* optional: avoid inline gaps */
    width: 25px;
    height: 25px; /* optional defaults */
}
/* ========== CodVerter Logo Icon ========== */

/* structural colors */
.cv-logo .frame {
    stroke: var(--c-amber);
}

.cv-logo .spine {
    stroke: var(--c-gray-placeholder);
}

.cv-logo .bar {
    stroke: var(--c-amber);
}

/* glow and motion */
.cv-logo {
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 0 18px var(--glow-amber-020)) drop-shadow(0 0 10px var(--glow-amber-016)) drop-shadow(0 0 4px var(--glow-amber-008));
    transition: filter .15s ease, transform .15s ease;
}

    .cv-logo:hover {
        transform: scale(1.04);
        filter: drop-shadow(0 0 22px var(--glow-amber-020)) drop-shadow(0 0 10px var(--glow-amber-016)) drop-shadow(0 0 6px var(--glow-amber-010));
        cursor: pointer;
    }


    /* GRAY MONO LOGO DEFENITIONS*/
/* Footer/mono variant — all strokes use placeholder gray and no glow */
.cv-logo--mono .frame,
.cv-logo--mono .spine,
.cv-logo--mono .bar {
    stroke: var(--c-gray-placeholder);
}

.cv-logo--mono {
    filter: none;
}

    .cv-logo--mono:hover {
        transform: none;
        filter: none;
    }

/*********** END LOGO ************/

/* SMART PHONE */
@media all and (max-width: 800px) {
    body {
        font-size: .95em;
    }
}



/* Handle extentions like last pass etc..fro ruin styles*/
/* Chrome/Edge */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-text-white) !important;
  caret-color: var(--c-text-white) !important;

  /* Paint your own background over the yellow */
  box-shadow: 0 0 0 1000px var(--c-gray-54) inset !important;

  /* keep your normal border */
  -webkit-box-shadow:
    0 0 0 1000px var(--c-gray-54) inset !important;
}

/* when focused, also keep your focus ring color */
input:-webkit-autofill:focus {
  outline: none !important;
  border-color: var(--c-amber) !important;
  box-shadow:
    0 0 0 1000px var(--c-gray-54) inset !important,
    0 0 0 3px var(--c-amber-focus) !important;
}

/* Firefox */
input:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--c-gray-54) inset !important;
  -moz-text-fill-color: var(--c-text-white) !important;
  caret-color: var(--c-text-white) !important;
}