:root {
  --header-height: 63px;
  --default-font-family: "Poppins", system-ui, sans-serif;

  --bg-color: #fafafa;
  --bg-color-alpha-high: #ffffff73;
  --bg-deep: #ffffff;
  --bg-deep-alpha9: rgba(255, 255, 255, 0.95);
  --bg-secondary-mid: #f5f5f5;
  --bg-secondary: #f0f0f0;
  --bg-ternary: #e0e0e0;
  --bg-opposite: #000000;
  --bg-course-bar: #e5e5e5;
  --bg-quiz-question: #eceef5;
  --text-color: #222222;
  --text-color-deep: #000000;
  --text-color-lighter: #555555;
  --link-color: #0556f3;
  --link-hover-color: #008000;
  --header-bg-color: #f5f5f5;
  --h1-highlight-color: linear-gradient(90deg, #ff7e5f, #3d00ff, #ff7e5f);
  --theme-toggle-button-bg: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.23129 2.24048C9.24338 1.78695 10.1202 2.81145 9.80357 3.70098C8.72924 6.71928 9.38932 10.1474 11.6193 12.3765C13.8606 14.617 17.3114 15.2755 20.3395 14.1819C21.2206 13.8637 22.2173 14.7319 21.7817 15.7199C21.7688 15.7491 21.7558 15.7782 21.7427 15.8074C20.9674 17.5266 19.7272 19.1434 18.1227 20.2274C16.4125 21.3828 14.3957 22.0001 12.3316 22.0001H12.3306C9.93035 21.9975 7.6057 21.1603 5.75517 19.6321C3.90463 18.1039 2.64345 15.9797 2.18793 13.6237C1.73241 11.2677 2.11094 8.82672 3.2586 6.71917C4.34658 4.72121 6.17608 3.16858 8.20153 2.25386L8.23129 2.24048Z' fill='%23222222'/%3E%3C/svg%3E");
  --code-bg: #f8f8f8;
  --tab-header-bg: #f2f2f2;
  --tab-active-bg: #112233;
  --code-color: #3b6d00;
  --container-bg: #ffffff;
  /*--code-bar-bg: #42baff59;*/
  --code-bar-bg: #444444;
  --code-msg-bg: #00800021;

  /* lanugage highlight */
  --comment-color:     #6a737d;   
  --punctuation-color: #383a42;   
  --function-name-color:rgb(148, 155, 162); 
  --string-color:      #032f62;   
  --variable-color:    #e36209;   
  --keyword-color:     #d73a49;   
  --number-color:      #005cc5;   
  --boolean-color:     #d73a49;   
  --operator-color:    #6f42c1;   
  --type-color:        #22863a;   
  --regex-color:       #0366d6;   

  /* JSAV */
  --jsavcontainer-bg: #ffffff;
  --jsavcode-bg: #9090901c;
  --jsavcode-before-bg: #77777722;
  --jsavcode-before-text: #228b22;
  --jsavoutputcontainer-bg:rgb(255, 255, 255);
  --jsavindexlabel-color: #000000;
  --jsavnode-color: #000000;
  /*--jsavnode-bg: rgb(255, 108, 0);*/
  --jsavnode-bg: radial-gradient(circle at 30% 30%, rgb(255, 255, 255), rgb(228, 228, 228));
  --jsavnode-border: 1px solid;
  --jsavnode-border-color: rgb(255, 108, 0);
  /*--jsavnode-bg: #000000;*/
  --jsavindexlabel-color: #999999;
  --jsavlabel-color: #333333;
  --jsavlabel-bg: #5e8cd4;
  --jsavpointer-color: #eeeeee;
  --jsavpointer-bg: #5e8cd4;
  --jsavcontrols-span-bg: #ffffff;
  --jsavpreviousline-bg: #c0c0c033;
  --jsavcurrentline-bg: #b4d9ffa1;
  --text-lighter: #aaaaaa;
  --jsavcode-after-color: #919db7;
  --jsavcode-after-bg: #e6f1ff63;
  --jsav-null-node-bg: #bbbbbb;
  --jsav-node-edge-color: #aaaaaa;
  --jsavcontainer-box-shadow: 0 0 5px #ccc;

  --jsav-output-bg: radial-gradient(circle at 30% 30%, #2196f34f, rgb(0 142 255 / 19%));
  --jsav-umsg-color: #1228a0;

  /* data structure colors */
  --ds-font-family: "Nunito", cursive;
  --array-item-color: #ffffff;
  --array-item-bg: rgb(255, 108, 0);
  --array-index-color: #666666;
  --highlight-bg:rgb(141, 83, 255);
  --highlight-bg-pseudo:radial-gradient(circle at 30% 30%, rgba(170, 128, 255, 0.3), rgba(126, 62, 255, 0.5));
  --highlight-border-color:rgb(141, 83, 255);
  --highlight-red-bg: #ff0000;
  --highlight-red-bg-pseudo: radial-gradient(circle at 30% 30%,rgba(255, 30, 30, 0.3), rgba(200, 0, 0, 0.5));
  --highlight-red-border-color: #ff0000;
  --highlight-green-bg: #22863a;  
  --highlight-green-bg-pseudo:radial-gradient(circle at 30% 30%,rgba(79, 197, 107, 0.3),rgba(0, 130, 30, 0.5));
  --highlight-green-border-color: #22863a;  
  --highlight-blue-bg:rgb(18, 131, 243);    
  --highlight-blue-bg-pseudo:radial-gradient(circle at 30% 30%, rgba(58, 156, 255, 0.3), rgba(0, 113, 225, 0.5));
  --highlight-blue-border-color:rgb(18, 131, 243);    
  --highlight-pink-bg: #FF69B4;    
  --highlight-pink-bg-pseudo:radial-gradient(circle at 30% 30%,rgba(255, 105, 180, 0.3),rgba(213, 54, 134, 0.5));
  --highlight-pink-border-color:rgb(213, 54, 134);    
  --highlight-border: 3px solid #111;  
  --highlight-border-thicker: 4px solid #000000; 
  --highlight-slno-bg-pseudo:radial-gradient(circle at 30% 30%, rgb(249 249 249), rgb(196 196 196));
  --stack-border: 3px solid #777;
  --pointer-i-bg:rgb(222, 186, 235) !important;
  --pointer-j-bg: rgb(235, 182, 163) !important; 
  --ds-linked-list-item-border: 20px solid #666;
  --ds-linked-list-arrow-color: #000000;
  --ds-array-item-font-size: 20px;
  --label-color: rgb(141, 83, 255);

  --depth-2-border-color: #ff9696;
  --depth-3-border-color: #c5dbc6;
  --depth-4-border-color: #a4c6e3;
  --depth-5-border-color: #d8a4e3;
  --depth-6-border-color: #e3cca4;

  --subtle-border-color: #dddddd;
  --current-newline-bg: linear-gradient(90deg, #3F51B5, #3F51B5,rgb(0, 28, 185), #3F51B5, #3F51B5);
  --highlight-glow: highlightGlowLight;

  --transparent-bg: #00000000 !important;

  --button-bg: linear-gradient(225deg, #9ef5ff, #aeafff, #ddc3ff);

  --tag-bg: #fcfcfc;
  --tag-color: #333333;

  --tag-accent-color-alpha: #ffa97555;
  --tag-accent-color:rgb(255, 124, 43);

  --svg-path-fill: rgb(255, 108, 0);
  --accent-color: rgb(255, 108, 0);
  --accent-color-50: rgb(255 108 0 / 50%);
  --accent-color-80: rgb(255 108 0 / 80%);
  --accent-color-dark: #bf360c;
  --accent-color-bright: rgb(255, 85, 0);

  --heading-highlight: linear-gradient(90deg,rgb(255, 88, 47),rgb(255, 64, 0), #ff7e5f);

  --outline-button-border-color: #2196F388;
  --outline-button-color: rgb(0, 85, 255);
  --outline-button-bg: #2196F333;
  --outline-button-hover-border-color: #2196F3;
  --outline-button-hover-color:rgb(0, 85, 255);
  --outline-button-hover-bg: #2196F355;

  --avatar-bg-1: linear-gradient(225deg, #ffffff, #e8ffe2, #ddc3ff);
  --avatar-bg-2: linear-gradient(45deg, #ffffff, #fff4db, #ffe1e1);

  --green-color: #00a400;
  --red-color: #ff0000;
  
  --qa-expectations-color: #c8e4f7;
  --qa-answer-color: #cfeed0;

  --line-highlight-bg-dim:  rgba(0, 160, 255, 0.05);
  --line-highlight-bg-bright:  rgba(0, 160, 255, 0.2);
  --line-highlight-bg-mid:  rgba(0, 160, 255, 0.2);
  --line-highlight-bg:  rgba(0, 160, 255, 0.3);
  --line-highlight-bg-2:  rgba(0, 160, 255, 0.3);
  --line-highlight-bg-3:  rgba(0, 160, 255, 0.3);

  /*--vis-max-width: 820px;*/
  --vis-max-width: max(calc(100% - 450px), 400px);
  --visualization-link-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='25px' fill='white' height='25px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.75 17.5C7.75 17.0858 7.41421 16.75 7 16.75H2C1.58579 16.75 1.25 17.0858 1.25 17.5C1.25 17.9142 1.58579 18.25 2 18.25H7C7.41421 18.25 7.75 17.9142 7.75 17.5Z'/%3E%3Cpath d='M16.25 6.5C16.25 6.08579 16.5858 5.75 17 5.75H22C22.4142 5.75 22.75 6.08579 22.75 6.5C22.75 6.91421 22.4142 7.25 22 7.25H17C16.5858 7.25 16.25 6.91421 16.25 6.5Z'/%3E%3Cpath d='M22.75 17.5C22.75 17.0858 22.4142 16.75 22 16.75H13C12.5858 16.75 12.25 17.0858 12.25 17.5C12.25 17.9142 12.5858 18.25 13 18.25H22C22.4142 18.25 22.75 17.9142 22.75 17.5Z'/%3E%3Cpath d='M1.25 6.5C1.25 6.08579 1.58579 5.75 2 5.75H11C11.4142 5.75 11.75 6.08579 11.75 6.5C11.75 6.91421 11.4142 7.25 11 7.25H2C1.58579 7.25 1.25 6.91421 1.25 6.5Z'/%3E%3Cpath d='M6.25 15.5C6.25 14.5335 7.0335 13.75 8 13.75H12C12.9665 13.75 13.75 14.5335 13.75 15.5V19.5C13.75 20.4665 12.9665 21.25 12 21.25H8C7.0335 21.25 6.25 20.4665 6.25 19.5V15.5ZM8 15.25C7.86193 15.25 7.75 15.3619 7.75 15.5V19.5C7.75 19.6381 7.86193 19.75 8 19.75H12C12.1381 19.75 12.25 19.6381 12.25 19.5V15.5C12.25 15.3619 12.1381 15.25 12 15.25H8Z'/%3E%3Cpath d='M17.75 4.5C17.75 3.5335 16.9665 2.75 16 2.75H12C11.0335 2.75 10.25 3.5335 10.25 4.5V8.5C10.25 9.4665 11.0335 10.25 12 10.25H16C16.9665 10.25 17.75 9.4665 17.75 8.5V4.5ZM16 4.25C16.1381 4.25 16.25 4.36193 16.25 4.5V8.5C16.25 8.63807 16.1381 8.75 16 8.75H12C11.8619 8.75 11.75 8.63807 11.75 8.5V4.5C11.75 4.36193 11.8619 4.25 12 4.25H16Z'/%3E%3C/svg%3E");

  --mermaid-label-fill: #ffffff;
  --mermaid-label-stroke: #000000;
  --mermaid-startend-fill: #cccccc;
  --mermaid-startend-stroke: #aaaaaa;
  --mermaid-inputoutput-fill: #d1e8ff;
  --mermaid-inputoutput-stroke: #007acc;
  --mermaid-decision-fill: #fff3cd;
  --mermaid-decision-stroke: #ffc107;
  --mermaid-process-fill: #e2f7e1;
  --mermaid-process-stroke: #28a745;
  --mermaid-print-fill: #fce4ec;
  --mermaid-print-stroke: #d81b60;
  --mermaid-font-color: #000000;

  --comment-bg-color: #4caf501c;

  --player-border-color: rgb(64 64 64);
  --player-output-bg: #3F51B5;

  --message-pointer-bg: #ffffffcc;

  --conic-gradient-1: conic-gradient(from 0deg, limegreen, red, orange, green, blue, red, limegreen);
  --menu-link-bg: linear-gradient(135deg, #50f0ee, #3392e6);
  --compiler-run-bg: #008bff;
  --compiler-run-green-bg: #54c962;
}

body.dark {
  --bg-deep: #000000;
  --bg-deep-alpha9: rgba(0, 0, 0, 0.9);
  --bg-color: #121212;
  --bg-color-alpha-high: #0000005e;
  --bg-secondary-mid: #1b1b1b;
  --bg-secondary: #333333;
  --bg-ternary: #444444;
  --bg-opposite: #ffffff;
  --bg-course-bar: #333333;
  --bg-quiz-question: #15172e;
  --text-color: #dddddd;
  --text-color-deep: #ffffff;
  --text-color-lighter: #bbbbbb;
  --link-color: #9fbfff;
  --link-hover-color:rgb(159, 255, 159);
  --header-bg-color: #222222;
  --h1-highlight-color: linear-gradient(90deg, #ff7e5f, #b39cff, #ff7e5f);
  --theme-toggle-button-bg: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg fill='%23f5f5f5' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.031 16.5c0 4.143 3.358 7.5 7.5 7.5s7.5-3.357 7.5-7.5-3.357-7.5-7.5-7.5c-4.142 0-7.5 3.357-7.5 7.5zM15.531 3.75l-2.109 4.219h4.219l-2.11-4.219zM24.543 7.457l-4.475 1.491 2.982 2.983 1.493-4.474zM10.994 8.948l-4.474-1.491 1.491 4.475 2.983-2.984zM6.969 14.359l-4.219 2.11 4.219 2.109v-4.219zM24.031 18.641l4.219-2.109-4.219-2.109v4.218zM15.531 29.25l2.109-4.219h-4.219l2.11 4.219zM20.068 24.052l4.475 1.491-1.492-4.475-2.983 2.984zM6.52 25.543l4.475-1.491-2.983-2.983-1.492 4.474z'%3E%3C/path%3E%3C/svg%3E");
  --code-bg: #1d1d1d;
  --tab-header-bg: #29254e;
  --tab-active-bg: #5447b4;
  --code-color: #8BC34A;
  --container-bg: #000000;
  --code-bar-bg: #5a5a5a;
  --code-msg-bg: #006600;
  --code-bar-bg-deep:rgb(57, 44, 151);

  --comment-color:     #6a737d;    
  --punctuation-color: #abb2bf;    
  --function-name-color: #61afef;  
  --string-color:      #98c379;    
  --variable-color:    #e06c75;    
  --keyword-color:     #c678dd;    
  --number-color:      #d19a66;    
  --boolean-color:     #56b6c2;    
  --operator-color:    #56b6c2;    
  --type-color:        #e5c07b;    
  --regex-color:       #f1fa8c;    

  --jsavcontainer-bg: #000000;
  --jsavcode-bg: #90909052;
  --jsavcode-before-bg: #5e57495c;
  --jsavcode-before-text: aqua;
  --jsavoutputcontainer-bg: #0048ff12;
  --jsavindexlabel-color: #f5f5f5;
  --jsavnode-color: #ffffff;
  --jsavnode-bg: #111111;
  --jsavnode-bg: radial-gradient(circle at 30% 30%, rgb(101 101 101 / 74%), rgb(170 170 170 / 5%));
  --jsavnode-border-color: #555;
  /*--jsavnode-bg: #ffffff;*/
  --jsavindexlabel-color: #777777;
  --jsavlabel-color: #ffffffdd;
  --jsavlabel-bg: #2c2c2c;
  --jsavpointer-color: #ffffffdd;
  --jsavpointer-bg: #2c2c2c;
  --jsavcontrols-span-bg: #222222;
  --jsavpreviousline-bg: #eeeeee33;
  --jsavcurrentline-bg: #007fffa1;
  --text-lighter: #919db7;
  --jsavcode-after-color: #919db7;
  --jsavcode-after-bg: #e6f1ff36;
  --jsav-null-node-bg: #222222;
  --jsav-node-edge-color: #999999;
  --jsavcontainer-box-shadow: 0 0 5px #444;

  --jsav-output-bg: radial-gradient(circle at 30% 30%, #2196f34f, rgb(0 142 255 / 19%));
  --jsav-umsg-color: rgb(141, 222, 255);

  --array-item-color: #000000;
  --array-item-bg: rgb(255, 108, 0);
  --array-index-color: #999999;
  --highlight-bg: #d59eff;
  --highlight-bg-pseudo: var(--jsavcode-bg);
  --highlight-bg-pseudo:radial-gradient(circle at 30% 30%, rgb(149 97 255), rgb(45 0 134 / 70%));
  --highlight-border-color: #d59eff;
  --highlight-red-bg:rgb(255, 89, 89);
  --highlight-red-bg-pseudo:var(--jsavcode-bg);
  --highlight-red-bg-pseudo: radial-gradient(circle at 30% 30%, rgb(255 0 0 / 100%), #690000);
  --highlight-red-border-color:rgb(255, 89, 89);
  --highlight-green-bg: #02f62d;
  --highlight-green-bg-pseudo: var(--jsavcode-bg);
  --highlight-green-bg-pseudo:radial-gradient(circle at 30% 30%, rgb(31 221 76), rgb(0 113 26 / 82%));
  --highlight-green-bg-pseudo:radial-gradient(circle at 30% 30%, rgb(0 172 41), rgb(0 67 15 / 74%));
  --highlight-green-border-color: #02f62d; 
  --highlight-blue-bg: #03A9F4;
  --highlight-blue-bg-pseudo: var(--jsavcode-bg);
  --highlight-blue-bg-pseudo:radial-gradient(circle at 30% 30%, rgb(58, 156, 255), rgb(0 55 109 / 58%));
  --highlight-blue-border-color: #03A9F4;   
  --highlight-border: 2px solid #eee;  
  --highlight-border-thicker: 4px solid #ffffff; 
  --highlight-slno-bg-pseudo:radial-gradient(circle at 30% 30%, rgb(108 108 108), rgb(28 28 28));
  --stack-border: 3px solid #aaa;
  --pointer-i-bg:rgb(148, 89, 170) !important;
  --pointer-j-bg: rgb(139, 79, 57) !important; 
  --ds-linked-list-item-border: 20px solid #ddd;
  --ds-linked-list-arrow-color: #ffffff;
  --label-color: #02f62d;

  --depth-2-border-color: #ff9696;
  --depth-3-border-color: #c5dbc6;
  --depth-4-border-color: #a4c6e3;
  --depth-5-border-color: #d8a4e3;
  --depth-6-border-color: #e3cca4;

  --subtle-border-color: #444444;
  --current-newline-bg: linear-gradient(90deg, #00f0ff, #00f0ff,rgb(195, 169, 255), #00f0ff, #00f0ff);
  --highlight-glow: highlightGlowDark;

  --button-bg: linear-gradient(225deg, #00dbf3, #2224fc, #8d44ef);

  --tag-bg: #222222;
  --tag-color: #eeeeee;
  --tag-accent-color:rgb(111, 154, 255);
  --tag-accent-color-alpha: #0035b385;

  --svg-path-fill: rgb(255, 108, 0);
  --accent-color: rgb(255, 108, 0);
  --accent-color-50: rgb(255 108 0 / 50%);
  --accent-color-dark: #bf360c;

  --heading-highlight: linear-gradient(90deg, #ff7e5f, #feb47b, #ff7e5f);

  --outline-button-border-color:rgba(33, 173, 243, 0.53);
  --outline-button-color: rgb(146, 182, 255);
  --outline-button-bg: #216cf333;
  --outline-button-hover-border-color: #2196F3;
  --outline-button-hover-color:rgb(255, 255, 255);
  --outline-button-hover-bg: #216cf355;

  --green-color: #00ff00;
  --red-color: #ff0000;

  --qa-expectations-color: #0098ff5c;
  --qa-answer-color: #00ff0c63;

  --line-highlight-bg-dim:  rgba(0, 40, 255, 0.2);
  --line-highlight-bg-bright:  rgba(0, 40, 255, 0.5);
  --line-highlight-bg-mid:  rgba(0, 40, 255, 0.4);

  --line-highlight-bg:  rgba(0, 40, 255, 0.4);
  --line-highlight-bg-2:  rgba(195, 255, 0, 0.3);
  --line-highlight-bg-3:  rgba(0, 255, 238, 0.3);
  --visualization-link-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='25px' fill='black' height='25px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.75 17.5C7.75 17.0858 7.41421 16.75 7 16.75H2C1.58579 16.75 1.25 17.0858 1.25 17.5C1.25 17.9142 1.58579 18.25 2 18.25H7C7.41421 18.25 7.75 17.9142 7.75 17.5Z'/%3E%3Cpath d='M16.25 6.5C16.25 6.08579 16.5858 5.75 17 5.75H22C22.4142 5.75 22.75 6.08579 22.75 6.5C22.75 6.91421 22.4142 7.25 22 7.25H17C16.5858 7.25 16.25 6.91421 16.25 6.5Z'/%3E%3Cpath d='M22.75 17.5C22.75 17.0858 22.4142 16.75 22 16.75H13C12.5858 16.75 12.25 17.0858 12.25 17.5C12.25 17.9142 12.5858 18.25 13 18.25H22C22.4142 18.25 22.75 17.9142 22.75 17.5Z'/%3E%3Cpath d='M1.25 6.5C1.25 6.08579 1.58579 5.75 2 5.75H11C11.4142 5.75 11.75 6.08579 11.75 6.5C11.75 6.91421 11.4142 7.25 11 7.25H2C1.58579 7.25 1.25 6.91421 1.25 6.5Z'/%3E%3Cpath d='M6.25 15.5C6.25 14.5335 7.0335 13.75 8 13.75H12C12.9665 13.75 13.75 14.5335 13.75 15.5V19.5C13.75 20.4665 12.9665 21.25 12 21.25H8C7.0335 21.25 6.25 20.4665 6.25 19.5V15.5ZM8 15.25C7.86193 15.25 7.75 15.3619 7.75 15.5V19.5C7.75 19.6381 7.86193 19.75 8 19.75H12C12.1381 19.75 12.25 19.6381 12.25 19.5V15.5C12.25 15.3619 12.1381 15.25 12 15.25H8Z'/%3E%3Cpath d='M17.75 4.5C17.75 3.5335 16.9665 2.75 16 2.75H12C11.0335 2.75 10.25 3.5335 10.25 4.5V8.5C10.25 9.4665 11.0335 10.25 12 10.25H16C16.9665 10.25 17.75 9.4665 17.75 8.5V4.5ZM16 4.25C16.1381 4.25 16.25 4.36193 16.25 4.5V8.5C16.25 8.63807 16.1381 8.75 16 8.75H12C11.8619 8.75 11.75 8.63807 11.75 8.5V4.5C11.75 4.36193 11.8619 4.25 12 4.25H16Z'/%3E%3C/svg%3E");

  --mermaid-label-fill: #1e1e1e;
  --mermaid-label-stroke: #dddddd;
  --mermaid-startend-fill:#444444;
  --mermaid-startend-stroke: #888888;
  --mermaid-inputoutput-fill: rgb(0, 74, 185);
  --mermaid-inputoutput-stroke: #5dade2;
  --mermaid-decision-fill:rgb(214, 64, 0);
  --mermaid-decision-stroke:rgb(255, 129, 56);
  --mermaid-process-fill:rgb(27, 133, 49);
  --mermaid-process-stroke: #58d68d;
  --mermaid-print-fill: #4a1f33;
  --mermaid-print-stroke: #f06292;
  --mermaid-font-color: #ffffff;

  --player-border-color: rgb(180 180 180);
  --player-output-bg: #e8e8e8;

  --message-pointer-bg: #000000cc;

  --conic-gradient-1: conic-gradient(from 0deg, red, yellow, orange, white, #7FFFD4, lightgreen, lightblue, yellow, red);
}

html {
  scroll-padding-top: 90px;
  scroll-behavior: smooth;
  accent-color: var(--accent-color);
}

hr {
  border-color: var(--subtle-border-color);
  border-top: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.2s ease, color 0.2s ease;
  font-family: var(--default-font-family);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
}
body.dsa {
  background-color: var(--bg-secondary);
}

.course-page-content ol li {
  padding: 0.25rem 0;
}

.home-page h1 {
  text-align: center;
}

video {
  width: 100%;
  max-width: 1920px;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px;
}

.main-content {
  margin-left: calc( 60px + 1.5rem);
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity ease 0.3s;
}
.main-content.leftnavopen {
  opacity: 0.2;
}
.main-content-division {
  display: flex;
  gap: 1rem;
}
.main-content-division.flex-column {
  display: flex;
  flex-direction: column;
  width: calc(100% - 1rem);
  min-height: 500px;
}
.main-content-division.flex-column.first-block {
  gap: 0.25rem;
}
.main-content-division#visualization-div h2 {
  width: fit-content;
  margin: 1rem auto 0;
  padding-top: 1rem;
  font-weight: 600;
  font-size: 1.5rem;
  text-align: center;
  border-top: 1px solid var(--subtle-border-color);
}
.course-home-page .progress-item,
aside .progress-item {
  background: var(--bg-color-alpha-high);
  margin-bottom: 0;
}
main {
  flex: 1;
  max-width: calc(100% - 320px - 1rem);
}
.profile main {
  max-width: calc(100% - 1rem);
}
.profile aside {
  display: none;
}
main p a,
main li a,
main td a {
  border-bottom: 1px solid;
}

#scrollToTopBtn {
  display:none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: var(--bg-color);
  text-align: center;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid var(--subtle-border-color);
  transition: opacity 0.5s ease;
  opacity: 0;
  z-index: 999;
}
#scrollToTopBtn svg path {
  stroke: var(--text-color);
}
#scrollToTopBtn:hover svg path {
  stroke: var(--accent-color);
}
#scrollToTopBtn:hover {
  border-color: var(--accent-color);
}

h1 .highlight, h2.highlight, h2 .highlight {
  background: var(--h1-highlight-color);
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: shine 3s linear infinite;
}
h1 .highlight-1 {
  font-weight: 300;
}
button.copy {
  position: absolute;
  top: 0;
  right: 0;
  min-height: 30px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  background: var(--bg-secondary);
  border: none;
  padding: 0 0.5rem;
  cursor: pointer;
  z-index: 1;
  opacity: 0.8;
  transition: opacity 0.3s ease-in-out;
}
button.copy:hover {
  opacity: 1.0;
}

img {
  max-width: 100%;
}
img.dark {
  background: #000000;
  border-radius: 1rem;
}
img.uml {
  filter: invert(0.02);
}
.dark img.uml {
  filter: invert(0.93);
}
body.html .output img {
  border: 1px solid var(--text-color);
  border-radius: 1rem;
}
.img-wrapper.output img {
  margin-top: 3rem;
}
.img-wrapper {
  position: relative;
  display: block;
}
.img-wrapper.output::before {
  content: 'Output';
  display: block;
  position: absolute;
  color: var(--text-color);
  top: 0;
  left: 0;
  padding: 1rem 0;
}

strong {
  font-weight: 600;
}

.site-icon-title {
  display:flex;
  align-items: center;
  cursor: pointer;
  font-weight: 900;
  color: var(--text-color-lighter);
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover, a:hover code {
  color: var(--link-hover-color);
}

dd {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--subtle-border-color);
  margin-bottom: 2rem;
}

.header-container {
  position: relative;
  margin: 0.5rem;
  width: calc(100% - 1rem);
  top: 0;
  z-index: 999;
  transform: translateY(0);
  border-radius: 2rem;
  background-color: var(--bg-deep);
  backdrop-filter: blur(8px);
  transition: transform 0.4s ease-in-out;
}

.header-container.header-hidden {
  transform: translateY(-120%);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.5rem;
  height: var(--header-height);
}
header img {
  height: 40px;
  background: #000;
  border-radius: 50%;
  margin-right: 0.5rem;
  padding: 5px;
}
header p a {
  font-size: 18px;
  color: var(--text-color);
  text-decoration: none;
}

header .menu a {
  padding-left: 10px;
  text-decoration: none;
}

/* Base styles */
.header-left,
.header-right {
  display:flex;
  align-items:center;
  gap:0.25rem;
}
.course-bar {
  display: flex;
  justify-content: center;
  margin: 0;
  overflow: auto;
  padding: 0.5rem;
}

.course-bar a,
.compilers-list a {
  padding: 0.25rem 0.75rem;
  margin: 0 0.25rem;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  border-radius: 1rem;
  width: fit-content;
  color: var(--text-color-lighter);
  transition: padding 0.2s ease-in-out, margin 0.2s ease-in-out;
}
.course-bar a.accent {
  
}
body.dsa a.dsa-link,
body.mongodb a.mongodb-link,
body.sql a.sql-link,
body.numpy a.numpy-link,
body.uml a.uml-link,
body.programming a.programming-link,
body.machine-learning a.machine-learning-link,
body.ds a.ds-link,
body.python a.python-link,
body.java a.java-link {
  background: var(--menu-link-bg);
  color: black;
}

.course-bar a:hover,
.compilers-list a:hover {
  background: var(--menu-link-bg);
  color: black;
  padding: 0.25rem 1rem;
  margin: 0 0;
}

/* Dropdown styles */
.dropdown-column {
  background-color: var(--bg-secondary);
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  list-style: none;
  padding: 0 0 10px; 
  margin: 0;
}

.dropdown-column li a {
  padding: 10px 10px 0;
  color: var(--text-color);
}

.dropdown-column li a:hover {
  color: var(--link-hover-color);
}

.menu-item.dropdown:hover .dropdown-column {
  display: block;
}

#search-wrapper {
  padding-top: 0.25rem;
  right: 0px;
  z-index: 1001;
  width: 55px;
  height: 50px;
  display: flex;
  cursor: pointer;
  margin-top: 1px;
}

#icon-search, #icon-close  {
  right: 0;
  width: 35px;
  cursor: pointer;
  font-size: 30px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
}
#search-icon[data-open="true"] {
  color: red;
  font-size: 50px;
  padding: 0 10px;
}

#search-icon svg path {
  fill: var(--bg-opposite);
  transition: fill 0.3s ease;
}
#search-icon:hover svg path {
  fill: var(--accent-color);
}

#icon-search.hide {
  display: none;
}

#icon-close.hide {
  display: none;
}

#search-bar {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: -1rem;
  width: calc(100% + 2rem - 4px);
  border: 2px solid var(--accent-color);
  z-index: 999;
  border-radius: 1rem;
  background: var(--bg-deep-alpha9);
}

#search-bar input {
  width: calc(100% - 24px);
  padding: 10px;
  text-align: center;
  font-size: 24px;
  border-radius: 1rem 1rem 0 0;
  border: 1px solid var(--subtle-border-color);
  background: var(--bg-deep);
  color: var(--text-color);
}
#search-bar input:focus {
  outline: none
  border: 1px solid var(--subtle-border-color);
}

#search-results {
  list-style: none;
  z-index: 1002;
  background: var(--bg-deep-alpha9);
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  border-radius: 0 0 1rem 1rem;
}
#search-results .course-block:last-child{
  margin-bottom: 5rem;
}

#search-results li {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}

#search-results li:hover {
  background: #f0f0f0;
  cursor: pointer;
}

.no-results {
  text-align: center;
  padding: 1rem;
  color: var(--subtle-border-color);
}

.course-block {
  padding: 0.5rem 2rem;
}
.result-item {
  padding: 0.25rem 0;
}
.result-item:hover {
  color: var(--link-hover-color);
}

pre.output::before {
  width: fit-content;
  content: attr(data-name);
  display: block;
  position: relative;
  background: var(--bg-secondary);
  color: var(--text-color-lighter);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  font-family: system-ui, sans-serif;
  font-size: smaller;
}
pre.output:not([data-name])::before {
  content: "Output";
}
button.copy svg path {
  fill: var(--text-color-lighter);
  opacity: 0.5;
}
button.copy:hover svg path {
  fill: var(--accent-color);
  opacity: 1;
}

h1 {
  font-weight: 700;
  padding-bottom: 0!important;
  margin-bottom: 1rem;
}

h2 {
  font-weight: 400;
  font-size: xx-large;
}

.hide {
  display: none!important;
}

.jsavpointer .jsavpointerarea {
  display:none;
}

footer {
  margin-left: calc( 60px + 1.5rem);
  margin-right: 1rem;
}
footer .row {
  padding: 1rem 2rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--bg-color);
  border-radius: 1rem;
  margin-bottom: 1rem;
}
footer .row.left {
  justify-content: left;
}
footer h3 {
  text-align: left;
  margin: 0;
  color: var(--accent-color-dark);
  font-weight: 400;
  font-size: medium;
}
footer .column {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  gap: 0.5rem;
}
footer a {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--text-color-lighter);
  font-weight: bold;
}
footer .column a:hover {
  color: var(--link-hover-color);
}
.copyright {
  width: 100%;
  text-align: center;
}

code {
  color: var(--code-color);
  padding: 0 5px;
  border-radius: 3px;
  font-size: 1rem;
}
h1 code {
  font-size: 2rem;
  color: var(--text-color);
}
.code-msg code {
  background: var(--code-msg-bg);
  padding: 3px 5px;
  font-size: 0.9rem;
  color: var(--text-color);
}

.jsavoutput code {
  padding: 0;
  color: var(--text-color);
}

#theme-toggle-btn {
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-size: 28px;
  background-position: center;
  border: none;
  border-radius: 50%;
  background-color: var(--bg-ternary);
  cursor: pointer;
  background-image: var(--theme-toggle-button-bg);
  transition: filter 0.3s ease;
}
#theme-toggle-btn:hover {
  box-shadow: 1px 1px 8px 1px var(--accent-color);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin: 2rem;
}

.card {
  display: block;
  background-color: var(--bg-color);
  color: var(--text-color);
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.card h3 {
  font-size: 1rem;
  padding: 0.75rem;
  font-weight: 500;
}

.internal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: var(--bg-secondary);
  color: var(--text-color);
  font-size: 14px;
  text-decoration: none;
  border: 1px solid;
  transition: all 0.2s ease;
  border-color: var(--subtle-border-color);
}

.chip:hover {
  background-color: var(--bg-deep);
  cursor: pointer;
}

.topics-thumbnail {
  height:150px;
  width: auto;
  display: block;
  margin: auto;
  border-radius: 1rem;
}

table.content {
  border-collapse: collapse;
  width: fit-content;
  max-width: 100%;
  margin: 2rem 0;
}

table.content, table.content td, table.content th {
  border: 1px solid var(--subtle-border-color);
  padding: 5px;
}
table.content thead {
  border-bottom: 2px solid;
  background: var(--tab-header-bg);
}
table.content th {
  padding: 1rem 5px;
  text-align: left;
}
table.content tr:nth-child(even) {
  background: var(--bg-secondary-mid);
}

#examples table {
  border-collapse: collapse;
  width: 100%;
}

#examples table, #examples td, #examples th {
  border: 1px solid var(--subtle-border-color);
  padding: 5px;
}
#examples thead {
  border-bottom: 2px solid;
}
#examples td {
  min-width: 40px;
  vertical-align: top;
}
#examples th {
  padding: 1rem 5px;
  text-align: left;
  vertical-align: baseline;
}

#example h3 {
  border-bottom: 2px solid var(--subtle-border-color);
}

.css-output {
  padding: 1rem;
  background: #fff;
  color: #000;
  box-shadow: rgba(50, 50, 93, 0.25) 5px -4px 20px -12px inset, rgba(0, 0, 0, 0.3) -8px 4px 20px -18px inset, rgba(50, 50, 93, 0.25) 1px 3px 20px -12px inset;
}

.category-card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  max-height: 36px;
  overflow: hidden;
  transition: all 0.5s ease;
  background: var(--bg-color-alpha-high);
}

.category-card a:hover {
  color: var(--link-hover-color);
}

.category-card.expanded {
  max-height: 10000px;
  box-shadow: none;
  padding-bottom: 10px;
}

.category-container {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  max-width: 700px;
  margin: auto;
}

.category-wrapper {
  border: 1px solid;
  border-color: var(--subtle-border-color);
  border-radius: 0.5rem;
}

main .category-wrapper .heading {
  background: var(--bg-color);
  border-radius: 0.5rem;
}
.category-wrapper .heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin: 0 0 0 0;
  padding: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}
#page-quick-links {
  display: flex;
  flex-wrap: wrap;
}
.category-wrapper .tag-list {
  padding: 0 0.5rem 1rem; 
}
.category-wrapper .tag-filter,
#page-quick-links a {
  display: inline-block;
  background: var(--tag-bg);
  color: var(--text-color-lighter);
  border: 1px solid;
  border-color: var(--tag-accent-color-alpha);
  padding: 0.2rem 0.5rem;
  margin: 0.25rem;
  border-radius: 1rem;
  font-size: 12px;
  cursor: pointer;
  box-shadow: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
#page-quick-links a#prob {
  margin-left: 0;
}
#page-quick-links a#vis {
  background: var(--accent-color);
  color: var(--bg-deep-alpha9);
}
#page-quick-links a#vis svg path {
  fill: var(--bg-deep-alpha9);
}

@keyframes horizontalFlip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

#vis svg, .visualization-link:before {
  animation: horizontalFlip 3s step-start	 infinite;
  transform-origin: center;
}

.category-wrapper .tag-filter:hover {
  border-color: var(--accent-color);
  background: var(--bg-deep);
  box-shadow: 0 0 5px var(--accent-color);
}
#page-quick-links a:hover {
  border-color: var(--accent-color-50);
  box-shadow: 0 5px 5px var(--accent-color);
  transform: translateY(-2px);
}
.category-wrapper .tag-filter.reset-filter {
  color: var(--tag-bg);
  background: var(--tag-color);
}
.category-wrapper .tag-filter.selected {
  background: var(--tag-accent-color);
  color: var(--tag-bg);
}

.category-info {
  display: flex;
  align-items: center;
}

.category-wrapper span.size {
  border: 1px solid var(--subtle-border-color);
  font-size: 15px;
  margin-left: 1rem;
  padding: 5px 10px;
  border-radius: 5px;
  min-width: 10px;
  background: var(--bg-secondary);
}
.category-wrapper span.module-n {
  font-weight: 300;
  color: var(--text-color-lighter);
  min-width: 8ch;
  display: inline-block;
  font-size: smaller;
}

.toggle-icon {
  cursor:pointer;
  font-size:1.2rem;
  text-align: center;
  width: 30px;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.toggle-icon.expanded {
  transform: rotate(90deg);
}

.category-wrapper img {
  width: 40px;
  height: auto;
  object-fit: cover;
  border-radius: 0.35rem;
  flex-shrink: 0;
  margin-right: 10px;
  padding: 0;
  transition: width 0.2s ease;
}

.category-card ol {
  list-style: none;
  display: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.category-card.expanded ol {
  display: block;
}

.category-card li {
  margin-bottom: 0.5rem;
}

.category-card li::marker {
  background: var(--bg-deep);
}

.category-card a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 1rem;
  font-weight: 400;
  max-width: calc(100% - 70px);
  text-shadow: 0 0 5px var(--bg-color);
  transition: color 0.2s ease;
}
main .category-card a {
  font-family: "Nunito", system-ui;
  border-bottom: 0;
}

#page-quick-links a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.1rem;
  align-items: center;
  padding: 0.2rem 0.25rem 0.1rem;
  border-radius: 0;
  border-color: var(--bg-deep);
  margin: 0 1px;
  background: var(--bg-color);  
}
#page-quick-links a span {
  text-align: center;
}
#page-quick-links svg path {
  fill: var(--svg-path-fill);
}
.quick-links-heading {
  margin: 0;
  margin-top: 1rem;
  font-size: 1.3rem;
  font-weight: 600;
}
.section {
  border: 1px solid;
  background: var(--bg-color);
  border-color: var(--subtle-border-color);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.section#code {
  padding-bottom: 1rem;
}
.section h3 {
  border-bottom: 1px solid;
}
.section h4 {
  
}
.section > * {
  padding: 0.5rem 1rem 0;
}
.section > ul {
  padding-left: 2rem;
}

.section h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin: 0 0 0 0;
  padding: 0.5rem 1rem 0;
}

.section-content {
  display: none;
  transition: all 0.5s ease;
  padding: 0 1rem 1rem 1rem;
  overflow: hidden;
}
#examples .section-content,
#time-complexity .section-content {
  padding: 0 0;
  border:0;
}

.section-content.expanded {
  display: block;
}

pre.language-basic::before {
    content: "Pseudocode";
    display: block;
    color: var(--text-color-lighter);
    padding: 0.25rem 0.5rem;
    background: var(--subtle-border-color);
    width: fit-content;
}

h1 .highlight, h2 .highlight, h3.highlight {
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: shine 6s ease infinite;
}
h3.highlight {
  font-size: large;
}

@keyframes shine {
  0% { background-position: 200% center; }
  100% { background-position: 0% center; }
}

ol.custom {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
  margin-top: 0;
}

ol.custom li {
  position: relative;
  margin: 0.5rem 0;
  padding-left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

ol.custom li:first-child {
  margin-top: 0.3em;
}

.slno {
  display: block;
  text-align: center;
  width: 35px;
  min-width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 1rem;
  border-radius: 50%;
  background: var(--highlight-slno-bg-pseudo);
}

.slno.completed {
  background: var(--highlight-green-bg-pseudo);
  font-weight: 600;
  color: var(--bg-opposite);
}


/** DATA STRUCTURES CSS **/
.ds-array {
  display: flex;
  margin: 10px 0 10px;
  position: relative;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
}
.ds-array.center {
  justify-content: center;
}
.ds-array.string:before,
.ds-array.string:after {
  display: inline-block;
  content: "\"";
  padding: 0 5px;
  font-size: larger;
  font-family:monospace;
}
.ds-array.string .ds-array-cell .ds-array-item {
  border: none;
  border-radius: 0;
  width: fit-content;
  min-width: 1rem;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 1.5rem;
  padding: 0.25rem;
  white-space: pre;
}

.ds-array.large .ds-array-item {
  font-size: 2rem;
  padding: 1rem 2rem;
}
.ds-array.variable {
  gap: 1rem;
  flex-wrap: wrap;
}
.ds-array.variable .ds-array-item {
  border-radius: 0;
  border-top: 0;
  border-width: 0.25rem;
}
.ds-array.variable .ds-array-label {
  color: var(--text-color-lighter);
  font-weight: 700;
  font-size: 1.2rem;
}

.ds-array-item {
  padding: 8px;
  background: var(--jsavnode-bg);
  font-family: var(--ds-font-family);
  font-size: var(--ds-array-item-font-size);
  border: var(--jsavnode-border);
  border-color: var(--jsavnode-border-color);
  font-weight: 700;
  text-align: center;
  position: relative;
  border-radius: 10px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  color: var(--jsavnode-color);
}

.ds-array[data-show-indices="true"] .ds-array-cell {
  margin-bottom: 16px;
}

.ds-array-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.ds-array-label {
  font-size: 14px;
  color: var(--label-color);
  margin-top: 12px;
}

/* Index displayed below the box */
.ds-array-item::after {
  position: relative;
  content: attr(data-index);
  font-size: 14px;
  bottom: -0.5rem;
  left: 50%;
  font-weight: 400;
  transform: translateX(-50%);
  color: var(--array-index-color);
  display: none;
}

/* Show index when enabled */
.ds-array[data-show-indices="true"] .ds-array-item::after {
  display: block;
}

/* Optional highlights */
.children-highlight .jsavnode {
  background: var(--highlight-bg-pseudo);
  border-color: var(--highlight-border-color);
}

.children-highlight-pink .jsavnode {
  background: var(--highlight-pink-bg-pseudo);
  border-color: var(--highlight-pink-border-color);
  color: var(--jsavnode-color);
}

.children-highlight-green .jsavnode {
  background: var(--highlight-green-bg-pseudo);
  border-color: var(--highlight-green-border-color);
  color: var(--jsavnode-color);
}

.children-highlight-red .jsavnode {
  background: var(--highlight-red-bg-pseudo);
  border-color: var(--highlight-red-border-color);
  color: var(--jsavnode-color);
}

.children-highlight-blue .jsavnode {
  background: var(--highlight-blue-bg-pseudo);
  border-color: var(--highlight-blue-border-color);
  color: var(--jsavnode-color);
}

.children-empty .jsavnode {
  background: transparent!important;
  border-color: transparent!important;
  color: var(--text-color)!important;
  box-shadow: none;
}

.children-empty-complete .jsavnode {
  background: transparent!important;
  border-color: transparent!important;
  color: var(--bg-color)!important;
  box-shadow: none;
}

.highlight.jsavnode,
.highlight {
  background: var(--highlight-bg-pseudo);
  border-color: var(--highlight-border-color);
}

.highlight-pink.jsavnode,
.highlight-pink {
  background: var(--highlight-pink-bg-pseudo);
  border-color: var(--highlight-pink-border-color);
  color: var(--jsavnode-color);
}

.highlight-blue.jsavnode,
.highlight-blue {
  background: var(--highlight-blue-bg-pseudo);
  border-color: var(--highlight-blue-border-color);
  color: var(--jsavnode-color);
}

.highlight-green.jsavnode,
.highlight-green {
  background: var(--highlight-green-bg-pseudo);
  border-color: var(--highlight-green-border-color);
  color: var(--jsavnode-color);
}

.highlight-red.jsavnode,
.highlight-red {
  background: var(--highlight-red-bg-pseudo);
  border-color: var(--highlight-red-border-color);
  color: var(--jsavnode-color);
}

.empty.jsavnode,
.empty {
  background: transparent!important;
  border-color: transparent!important;
  color: var(--text-color)!important;
  box-shadow: none;
}

.empty-complete,
.empty-complete.jsavnode,
.empty-complete .jsavindexlabel {
  background: transparent!important;
  border-color: transparent!important;
  color: var(--bg-color)!important;
  box-shadow: none;
}

.special,
.special .jsavvaluelabel {
  background-color: #90caf9;
  border-color: #90caf9;
}

.highlight-border {
  box-shadow: 0 0 3px 3px var(--highlight-blue-border-color);
}
.highlight-border.jsavtreenode .jsavvaluelabel {
  border: none;
}

.jsavtreenode.end-of-word {
  box-shadow: 0 0 0px 3px var(--bg-opposite) !important;
}

.container100max {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.ds-highlight {
  background: var(--highlight-bg-pseudo);
  border-color: var(--highlight-border-color);
}

.ds-highlight-blue {
  background: var(--highlight-blue-bg-pseudo);
  border-color: var(--highlight-blue-border-color);
}

.ds-highlight-red {
  background: var(--highlight-red-bg-pseudo);
  border-color: var(--highlight-red-border-color);
}

.ds-highlight-green {
  background: var(--highlight-green-bg-pseudo);
  border-color: var(--highlight-green-border-color);
}

.ds-special {
  background-color: #90caf9;
}

/* Container behaves like a vertical stack */
.ds-array, .ds-stack, .ds-tree, #jsavcontainer * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.ds-stack.ds-array {
  display: flex;
  flex-direction: column-reverse; /* bottom to top */
  align-items: center;
  justify-content: flex-start;
  border-left: var(--stack-border);
  border-right: var(--stack-border);
  border-bottom: var(--stack-border);
  border-radius: 0 0 10px 10px;
  padding: 10px;
  width: fit-content;
  margin: 20px 0 20px 20px;
}

/* Each stack element */
.ds-stack .ds-array-item {
  min-width: 60px;
  text-align: center;
  position: relative;
}

.ds-queue.ds-array {
  border-top: var(--stack-border);
  border-bottom: var(--stack-border);
  padding: 10px;
  width: fit-content;
  margin: 20px;
}

.render-tree.ds-binary-tree {
  height: auto;
  position: relative;
  padding: 0 20px;
  margin-top:-30px;
}

.ds-tree-node {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--jsavnode-bg);
  color: var(--array-item-color);
  border-radius: 100%;
  text-align: center;
  line-height: 60px;
  font-weight: bold;
  font-size: var(--ds-array-item-font-size);
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
  transform: translateX(-50%);
  z-index: 2;
}

.ds-tree-node-label {
  position: absolute;
  color: var(--label-color);
  z-index: 2;
  width: fit-content;
  font-weight: 600;
  height: auto;
  font-size: 16px;
  border-radius: 5px;
  padding: 0 5px
}

.ds-tree-edge line {
  stroke: var(--jsav-node-edge-color);
  stroke-width: 10;
  z-index: 1;
}

pre {
  border: 1px solid transparent;
}
code[class*=language-],pre[class*=language-]{color:var(--text-color);font-family:monospace;font-size:1rem;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{position:relative;margin:0;margin-top:1rem;overflow:visible;background:var(--bg-deep-alpha9);border:1px solid var(--subtle-border-color);border-radius: 5px}pre[class*=language-]>code{position:relative;z-index:1}code[class*=language-]{max-height:inherit;height:inherit;padding:1rem 4rem 1rem 1rem;display:block;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:not(pre)>code[class*=language-]{position:relative;padding:.2em;border-radius:.3em;color:#c92c2c;border:1px solid rgba(0,0,0,.1);display:inline;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:var(--comment-color)}.token.punctuation{color:var(--punctuation-color)}.token.boolean,.token.constant,.token.deleted,.token.function-name,.token.number,.token.property,.token.symbol,.token.tag{color:var(--function-name-color)}.token.attr-name,.token.builtin,.token.char,.token.function,.token.inserted,.token.selector,.token.string{color:var(--string-color)}.token.entity,.token.operator,.token.url,.token.variable{color:var(--variable-color)}.token.atrule,.token.attr-value,.token.class-name,.token.keyword{color:var(--keyword-color)}.token.important,.token.regex{color:var(--regex-color)}.language-css .token.string,.style .token.string{color:var(--string-color);}.token.important{font-weight:400}.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.namespace{opacity:.7}@media screen and (max-width:767px){pre[class*=language-]:after,pre[class*=language-]:before{bottom:14px;box-shadow:none}}pre[class*=language-].line-numbers.line-numbers{padding-left:0;max-width:100%;overflow:hidden;}
pre[class*=language-].line-numbers.line-numbers code{padding-left:3em}
pre[class*=language-].line-numbers.line-numbers .line-numbers-rows{left:0;opacity:0.5}pre[class*=language-][data-line]{padding-top:0;padding-bottom:0;padding-left:0}pre[data-line] code{position:relative;padding-left:3.8em}
.code-block-wrapper {
  position: relative;
  margin-bottom: 1rem;
}
.code-block-wrapper.output{
  max-height: 100vh;
}
.pre-filename {
  padding: 0.25rem 0.5rem;
  font-family: system-ui;
  font-size: smaller;
  color: var(--text-color-lighter);
}
pre[data-lines] {
  border: 2px solid var(--code-bar-bg);
  border-radius: 0 0;
  margin: 0;
  margin-top: 1rem;
  border-top-width: 1px;
  margin-top: 0;
}
.code-block-wrapper pre[data-lines] {
  border-bottom: 0;
}
pre[class*=language-]:not([data-lines]) {
  /*width: fit-content;*/
}
pre[data-lines] code[class*=language-] {
  padding-top: 2rem;
  padding-bottom: 2rem;
  max-height: calc(100vh - 300px);
}
pre[data-lines] code[class*=language-] .line-numbers-rows {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.tab-content pre[class*=language-] {
  margin-top: 0;
}
pre.line-numbers[data-exec-order] .line-numbers-rows {
}
pre[data-line] {
  padding: 0!important;
}
.line-numbers-rows>span:before {
  color: var(--text-color)!important;
}

.line-numbers .line-numbers-rows {
  padding-top: 1rem;
  padding-bottom: 1rem;
  width: 2.5rem!important;
  border-right: 1px solid var(--subtle-border-color)!important;
}
.line-numbers-rows>span:before{
  padding-right:0.5rem!important;
}

pre.output .line-numbers-rows {
  display: none;
}

.code-exec-bar {
  right: 0;
  bottom: 0;
  display: flex;
  gap: 5px;
  justify-content: space-between;
  background: var(--bg-course-bar);
  border: 2px solid var(--code-bar-bg);
  border-radius: 0 0 1rem 1rem;
  border-top-width: 2px;
}

.code-msg {
  padding: 0.25rem 0.5rem;
  margin: 0  0.25rem;
  font-family: 'Nunito';
  border-radius: 8px;
  flex: 1;
  background: var(--bg-color);
}

@keyframes pulseGlow {
  0%, 100% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.05);
  }
}

.code-controls {
  display: flex;
  gap: 5px;
  z-index: 2;
  padding: 5px 10px;
  position: relative;
  background: var(--bg-course-bar);
  padding-top: 20px;
  border-bottom-right-radius: 1rem;
}
.code-controls:hover {
  animation: none;
  transform: scale(1);
}
.code-controls::after {
  content: "Execution Flow";
  position: absolute;
  font-size: small;
  top: 0;
  color: var(--text-color-lighter);
  font-weight: 600;
  width: 135px;
  text-align: center;
}
.code-controls button {
  border-radius: 50%;
  background: var(--accent-color);
  color: var(--text-color);
  border: 2px solid var(--bg-color);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: pulseGlow 2s ease-in-out infinite;
  transition: transform 0.1s ease, box-shadow 0.3s ease;
}
.code-controls.glow-stopped button {
  animation: none !important;
}
.code-controls button:hover {
  border-color: var(--accent-color);
  border-color: var(--bg-deep);
  box-shadow: 0 4px 5px;
  transform: scale(1.1);
}
.code-controls button svg path {
  /*fill: var(--text-color);*/
}
.code-controls-wrapper input[type="range"] {
  background: #888888;
}
.code-controls-wrapperinput[type="range"] {
  background: #ccc;
  border: 2px solid #fff;
}
.code-controls-wrapper input[type="range"]::-webkit-slider-thumb {
  background: #ccc;
  border: 2px solid #fff;
}
.code-controls-wrapper input[type="range"]::-webkit-slider-thumb:hover {
  background: #fff;
  transform: scale(1.1);
}
.code-controls-wrapper input[type="range"]::-moz-range-thumb {
  background: #ccc;
  border: 2px solid #fff;
}
.code-controls-wrapper input[type="range"]::-moz-range-thumb:hover {
  background: #fff;
  transform: scale(1.1);
}

.code-controls-wrapper input[type="range"]::-ms-thumb {
  background: #ccc;
  border: 2px solid #fff;
}


pre .line-highlight {
  z-index: 0;
  margin-top: -1rem;
  background: var(--bg-deep);
  background-color: var(--line-highlight-bg);
  /*animation: dimBrightPulse 1s ease-in-out forwards;*/
}
pre .line-highlight:nth-of-type(1) {
  background-color: var(--line-highlight-bg);
}
pre .line-highlight:nth-of-type(2) {
  background-color: var(--line-highlight-bg-2);
}
pre .line-highlight:nth-of-type(3) {
  background-color: var(--line-highlight-bg-3);
}
pre .line-highlight:nth-of-type(4) {
  background-color: var(--line-highlight-bg);
}
pre[data-lines] .line-highlight {
  margin-top: -2rem;
}

@keyframes dimBrightPulse {
  0% {
    background-color: var(--line-highlight-bg-dim);
  }
  50% {
    background-color: var(--line-highlight-bg-bright);
  }
  100% {
    background-color: var(--line-highlight-bg-mid);
  }
}


.jsavcontainer code[class*=language-] {
  margin-top: 0;
}
h2 code, h3 code {
  color: var(--text-color);
  font-size: inherit;
  border-bottom: 2px solid var(--accent-color);
}
.quiz-question h3 code {
  border-bottom: none;
  font-weight: normal;
}
.link-tag {
  display: inline-block;
  color: var(--text-color-lighter);
  background: var(--bg-secondary);
  font-size: 12px;
  margin-left: 10px
  padding: 2px 5px; 
  border-radius: 5px;
}

#visualizer-wrapper {
  position: relative;
}

.jsavcounter{
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  font-size: small;
  padding: 0.25rem 1rem 0.25rem;
  color: var(--text-color-lighter);
  font-weight: 600;
  background: var(--bg-secondary);
  z-index: 10;
  border-bottom-left-radius: 0.5rem;
}
#credits{display:none;left:3rem;top:1rem;padding:0.5rem 1rem;color: var(--text-lighter);font-size:small;font-weight:600;font-family: 'Nunito', system-ui;z-index:9;flex: 0 0 auto;}
.algorithm-steps{max-width:800px;margin:auto}
.algorithm-steps li{padding:0.25em 0}
.prevnext {
  display: flex;
  justify-content: space-between;
  min-height: 50px;
  padding-bottom: 0;
  align-items: center;
}
.prevnext .prev, .prevnext .next {
  max-width: min(400px, 60%);
  padding: 0.25rem 1rem;
  border: 1px solid var(--subtle-border-color);
  border-radius: 0.5rem;
  background: var(--bg-color);
  transition: border 0.2s ease;
  margin-top: 0.5rem;
}
.prevnext .prev {
}
.prevnext .next {
  text-align: right;
}
.prevnext hr {
  flex: 1;
  height: 1px;
  min-width: 1rem;
}
.prevnext .hint {
  display: block;
  margin: 0;
  font-size: smaller;
  color: var(--text-color-lighter);
  transition: color 0.2s ease;
}
.prevnext .text {
  margin: 0;
}
.prevnext a {
  text-decoration: none;
  font-size: smaller;
  color: var(--text-color-lighter)
}
.prevnext a:hover {
  border: 1px solid var(--accent-color);
  text-decoration: none;
  background: var(--bg-deep);
}
.prevnext a:hover .hint {
  color: var(--accent-color);
}
.tab-container {

}
.tab-header {
  display: flex;
  overflow: hidden;
  padding: 0.5rem 0;
  max-width: 400px;
  flex-wrap: wrap;
}
.tab-header:hover {
  overflow: auto;
}
.tab-header .tab {
  padding: 0.25rem 1rem;
  cursor: pointer;
  border: 1px solid var(--accent-color-50);
  border-radius: 3rem;
  font-size: 16px;
  font-weight: 500;
  min-width: fit-content;
  text-align: center;
  margin: 0 0.125rem 0.25rem;
  transition: padding 0.2s ease, margin 0.2s ease;
}
.tab-header .tab:hover,
.tab-header .active {
  background: var(--accent-color);
  color: var(--bg-deep);
  margin: auto 0;
  padding: 0.25rem 1.125rem;
}
.tab-content pre {
  overflow: auto;
  border-radius: 0;
}
.tab-content .code-block-top-bar {
  border-width: 1px;
}
.tab-content pre[class*=language-].line-numbers.line-numbers {
  border: 1px solid var(--code-bar-bg);
  border-top-width: 0;
}
.tab-content .filename {
  overflow: auto;
  padding: 0.25rem 0.5rem;
  background: var(--bg-secondary);
}
@keyframes auroraGlow {
  0% {
    box-shadow: 0 0 20px rgba(95, 162, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 106, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 20px rgba(95, 162, 255, 0.5);
  }
}

#visualization-div #jsavcontainer {
  box-shadow: 0 0 20px rgba(95, 162, 255, 0.5);
  animation: auroraGlow 20s ease-in-out infinite;
}
#jsavcontainer,
.jsavcontainer {
  padding: 0;
  margin: 0;
  background: var(--container-bg);
  position: relative;
  border-radius: 2rem;
  border: 10px solid; /* initial border */
  border-color: var(--player-border-color);
}

.example.jsavcontainer {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

#jsavcontainer.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  max-width: calc(100% - 2rem);
  width: 100%;
  height: 100vh;
  border-radius: 0;
  z-index: 9999;
}

.userinput {
  display: flex;
  justify-content: center;
  overflow: auto;
  border-top: 1px solid var(--accent-color);
  margin: 0;
  padding: 0.5rem;
  gap: 0.5rem;
}
.userinput input[type="text"] {
  padding: 8px 12px;
  font-size: 16px;
  border: 2px solid;
  border-color: var(--bg-course-bar);
  width: 300px;
  outline: none;
  transition: border-color 0.3s;
  font-family: 'Nunito', system-ui;
  background: var(--bg-deep);
  color: var(--text-color);
  line-height: 22px;
}

.userinput input#key,
.userinput input#key1,
.userinput input#key2 {
  width: 80px;
}
.userinput input[type="text"] {
  border-radius: 10px;
}
.userinput input[type="text"]:focus {
  border-color: var(--accent-color);
  border-width: 2px;
}

.userinput button#loadData {
  padding: 8px 12px;
  margin: 0 4px;
  font-size: 16px;
  font-family: 'Nunito', system-ui;
  font-weight: 300;
  color: var(--text-color);
  background-color: var(--bg-course-bar);
  border: none;
  opacity: 0.9;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.3s ease-in-out, padding 0.3s ease-in-out, margin 0.3s ease-in-out, background-color 0.5s ease-in-out;
}

.userinput:hover #loadData  {
  background-color: var(--accent-color-80);
  padding: 8px 16px;
  margin: 0 0;
  opacity: 1;
}

#canvascodewrapper {
  display: flex;
}
#canvascodewrapper>div {

}

#canvasoutputcontainer {
  margin: 0 0;
  width: 70%;
  max-height: 70vh;
  overflow: auto;
  padding: 1rem;
}
.slimplayer #canvasoutputcontainer {
  width: 100%;
}
.slimplayer .jsavcanvas {
  padding-bottom: 0;
}
.slimplayer img {
  max-height: 60vh;
  width: auto;
}
.dark .slimplayer img {
  filter: invert(1);
  max-width: 100%;
}

.thumbnail-container {
  text-align:center;
}
.thumbnail {
  border-radius: 1rem;
  max-height: 150px;
}
img.profile {
  width: 150px;
  height: auto;
  border-radius: 50%;
}
.profile-info {
  text-align: left;
}
.profile-info a {
  text-decoration: none;
}
.app-items {
    display: grid;
    grid-auto-columns: max-content;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-gap: 20px;
}
a.app-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    align-items: center;
    width: 100px;
    height: 100px;
    padding: 20px;
    border-radius: 50%;
    row-gap: 15px;
    transition: transform .2s;
}
a.app-item .title {
  font-size: 14px;
}

.jsavcontainer .right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 30%;
  z-index: 9;
  margin-top: 1rem;
}

span.newline {
  display: block;
  overflow: hidden;
  line-height: 1.3;
  padding-bottom: 0.5rem;
  color: var(--jsav-umsg-color);
}

.newline.expanded {
  max-height: 300px;
  opacity: 1;
  transition: max-height 0.4s ease, opacity 0.5s ease;
}

span.depth2 {
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--depth-2-border-color);
}
span.depth3 {
  margin-left: 1rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--depth-3-border-color);
}
span.depth4 {
  margin-left: 1.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--depth-4-border-color);
}
span.depth5 {
  margin-left: 2.0rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--depth-5-border-color);
}
span.newline:first-of-type {
  border-width: 0;
}
@keyframes gradientTextFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: -200% 50%;
  }
}
span.newline:last-of-type {
  margin-bottom: 4em;
}
span.newline.current {
  width: 100%;
  font-size: 1rem;
  background: var(--current-newline-bg);
  background-size: 200% auto;
  background-clip: text; 
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;;
  animation: gradientTextFlow 3s linear infinite;
  font-weight: 700;
  white-space: pre-wrap;
  overflow: hidden;
}

.jsavoutputcontainer::-webkit-scrollbar,
#canvasoutputcontainer::-webkit-scrollbar,
#pseudocodecontainer::-webkit-scrollbar {
  width: 10px;
}

.jsavoutputcontainer::-webkit-scrollbar-track,
#canvasoutputcontainer::-webkit-scrollbar-track,
#pseudocodecontainer::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

.jsavoutputcontainer::-webkit-scrollbar-thumb,
#canvasoutputcontainer::-webkit-scrollbar-thumb,
#pseudocodecontainer::-webkit-scrollbar-thumb {
  background-color: var(--bg-deep);
  border-radius: 5px;
}

.jsavoutputcontainer:hover::-webkit-scrollbar-thumb,
#canvasoutputcontainer:hover::-webkit-scrollbar-thumb,
#pseudocodecontainer:hover::-webkit-scrollbar-thumb {
  background-color: var(--highlight-blue-bg);
  border-radius: 5px;
}

.jsavoutputcontainer::-webkit-scrollbar-thumb:hover,
#canvasoutputcontainer::-webkit-scrollbar-thumb:hover,
#pseudocodecontainer::-webkit-scrollbar-thumb:hover {
  background-color: var(--highlight-blue-bg);
}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  backdrop-filter: blur(5px);
  color: var(--bg-opposite);
  text-align: center;
  border-radius: 8px;
  padding: 16px;
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 30px;
  font-size: 16px;
  transform: translateX(-50%);
  border: 1px solid var(--accent-color);
  box-shadow: 0 0 20px var(--accent-color);
  opacity: 0;
  transition: opacity 0.5s ease, bottom 0.5s ease;
}

#snackbar.show {
  visibility: visible;
  opacity: 1;
  bottom: 50px;
}

#code-run-msg {
  display: none;
  width: 100%;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 16px;
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 0px;
  font-size: 16px;
  transform: translateX(-50%);
  border: 1px solid var(--accent-color);
}

/* Toggle Button (Hamburger) */
.leftnav-toggle-button {
  width: 25px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1001;
  padding: 1rem;
  margin-top: 1px;
}

.leftnav-toggle-button .bar {
  height: 4px;
  width: 100%;
  background-color: var(--text-color-lighter);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.leftnav-toggle-button:hover .bar {
  background-color: var(--accent-color);
}

/* Close Button State */
.leftnav-toggle-button.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
  background-color: var(--accent-color);
}

.leftnav-toggle-button.active .bar:nth-child(2) {
  opacity: 0;
  background-color: var(--accent-color);
}

.leftnav-toggle-button.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
  background-color: var(--accent-color);
}

.breadcrumbs {
  height: 25px;
  display: flex;
  display: none;
  font-size: 16px;
  font-size: smaller;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1001; /* above the nav */
  position: fixed;
  top: var(--header-height);
  left: 63px;
  padding: 1rem;
  margin-top: 1px;
}

.login-button {
  display: none;
  padding: 10px 16px;
  font-size: 1rem;
  background: var(--bg-secondary);
  border: 0px solid;
  color: var(--text-color);
  border-radius: 2rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.login-button:hover {
  text-decoration: none;
  box-shadow: 1px 1px 8px 1px var(--accent-color);
}

  /* Overlay */
.login-box-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none; /* hidden initially */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Login box */
.login-box {
  background: var(--bg-deep);
  border: 1px solid var(--subtle-border-color);
  padding: 40px 30px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.google-login-link {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid var(--subtle-border-color);
  color: black;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 500;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}
.google-login-link:hover {
  color: black;
}

.google-login-link img {
  margin-right: 10px;
}

img.profile-button {
  border-radius: 50%;
  object-fit: cover;
  width: 35px;
  height: 35px;
  border: 2px solid var(--subtle-border-color);
  cursor: pointer!important;
  padding: 0;
  background: transparent;
  margin-right: 0;
}
.profile-button img {
  cursor: pointer!important;
}

.profile-button img:hover {
  opacity: 0.8;
}

.profile-button-container {
  position: relative;
  display: flex;
}

.profile-menu {
  display: none;
  position: absolute;
  top: 35px; /* Adjust based on your layout */
  right: 0;
  background: var(--bg-deep);
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1rem;
  z-index: 1000;
  width: 200px;
  text-align: center;
}

.profile-menu a, .profile-menu button {
  display: block;
  margin: 0.5rem 0;
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.6rem 1rem;
  color: var(--text-color);
  border-radius: 6px;
  background-size: 100% 100%;
  background-position: center center;
  transition: background-position 0.4s ease;
}
.profile-menu a {
  background: var(--button-bg);
}
.profile-menu a:hover {
  text-decoration: none;
  background: var(--button-bg);
  background-size: 200% 100%;
  background-position: center center;
}

.profile-button-container:hover .profile-menu {
  display: block;
}

.signout-button {
  width: 100%;
  padding: 0.6rem 1rem;
  background-color: var(--bg-color);
  border: 1px solid var(--bg-color);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 1rem;
}

.signout-button:hover {
  border: 1px solid var(--subtle-border-color);
}

pre.output code {
  display: block;
  border: 1px solid var(--subtle-border-color);
  padding: 1rem;
  color: var(--text-color);
  overflow: auto;
  background: var(--bg-deep);
  line-height: 1.5rem;
  font-size: smaller;
  border-radius: 0 1rem 1rem;
}

.course-actions {
  display: flex;
  gap: 1rem;
  justify-content: end;
  min-height: 30px;
  padding: 0;
}
.course-actions .buttons {
  opacity: 0.01;
}
.loggedin .course-actions buttons {
  opacity: 1;
}
.course-actions button {
  display: flex;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border: 1px solid var(--subtle-border-color);
  border-radius: 0.5rem;
  background: var(--bg-deep);
  color: var(--text-color-lighter);
  cursor: pointer;
  align-items: center;
}
.course-actions button::before {
  content: ' ';
  width: 16px;
  height: 16px;
  border: 2px solid var(--subtle-border-color);
  border-radius: 5px;
  margin-right: 0.5rem;
  display: inline-block;
  vertical-align: sub;
}
.course-actions button:hover {
  color: var(--text-color);
}
.course-actions button:hover::before {
  border: 2px solid var(--accent-color);
}
.course-actions button.completed::before, .course-actions button.bookmarked::before {
  vertical-align: unset;
  content: '✔';
  color: var(--bg-deep);
  background: #01b600;
  border-color: #01b600;
}
button {
  font-family: var(--default-font-family);
}
#courseprogress {
  min-height: 90px;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.login-info {
  font-size: 1rem;
  color: var(--text-color-lighter);
}
.progress-item {
  margin-bottom: 1rem;
  font-size: 14px;
  min-width: 200px;
  background: var(--bg-secondary);
  padding:0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
}
.progress-item p.status {
  text-align: right;
  margin: 0;
}
.progress-item .percentage {
  font-weight:bold;
}
.progress-item .category-name {
    margin-bottom: 0; 
}
.progress {
  width: 100%;
  height: 20px;
}
.progress-item-name-percentage {
  display: flex;
  justify-content: space-between;
}
.progress-status {
  display: flex;
  gap: 1rem;
  align-items: center;
}

#time-complexity .value {
  white-space: nowrap;
}

.support-site {
  margin-top: 0.5rem;
}
.support-site .section-heading {
  font-size: smaller;
  padding-bottom: 0.5rem;
  color: var(--text-color-lighter);
  font-weight: bold;
}
.support-site-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
}
.support-site-options > * {
  max-width: 300px;
  padding: 0 1rem;
  border: 1px solid var(--subtle-border-color);
}

.quiz-section {
  margin: 2rem auto;
  padding: 0;
}
.quiz-section > * {
  padding-left: 1rem;
  padding-right: 1rem; 
}

.quiz-question {
  padding-bottom: 0rem;
  margin-bottom: 1rem;
  border: 1px solid var(--subtle-border-color);
  border-radius: 1rem;
  background: var(--bg-quiz-question);
}
.quiz-question .label {
  color: var(--accent-color);
  font-weight: 400;
  font-size: 1.5rem;
  display: block;
}

.quiz-question h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.quiz-explanation p {
  font-size: 1rem;
}

ul.options {
  list-style: none;
  padding-left: 0;
}

ul.options li {
}

ul.options label {
  padding: 0.5rem 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
ul.options label pre {
  margin: 0.5rem 0;
}
ul.options label:hover {
  background: var(--bg-ternary);
}

input[type="radio"],
input[type="checkbox"] {
  margin-right: 0.5rem;
  width: 20px;
  height: 20px;
}

.quiz-check-btn {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--outline-button-border-color);
  color: var(--outline-button-color);
  background: var(--outline-button-bg);
}
.quiz-check-btn:hover {
  border: 1px solid var(--outline-button-hover-border-color);
  color: var(--outline-button-hover-color);
  background: var(--outline-button-hover-bg);
}

.quiz-result {
  margin-top: 0.5rem;
  font-weight: bold;
}
.quiz-result.correct {
  color: var(--green-color);
}
.quiz-result.incorrect {
  color: var(--red-color);
}
.quiz-controls {
  display: flex;
  gap: 0.25rem;
}
.hide {
  display: none!important;
}
.ref-link {
  display: block;
  padding: 5px;
}

.qa-quick-links-container {
  border: 1px solid var(--subtle-border-color);
  padding: 1rem;
  border-radius: 2rem;
}
.qa-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.qa-quick-links a {
  padding: 0.5rem;
  border: 1px solid;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background: var(--bg-secondary);
  border-radius: 50%;
}

.smaller {
  font-size: smaller;
}

#dragbar-horizontal {
  height: 5px!important;
  cursor: row-resize;
  position: relative;
  background-color: var(--bg-secondary);
  z-index: 1;
}
#dragbar-horizontal:before {
  content: "⋮⋮";
  position: absolute;
  top: 0;
  right: 2px;
  letter-spacing: -2px;
  opacity: 0.5;
}
#dragbar-vertical {
  width: 5px!important;
  cursor: col-resize;
  margin-top: 0 !important;
  z-index: 9;
  position: relative;
  background-color: var(--bg-secondary);
}
#dragbar-vertical:before {
  content: "⋮⋮";
  position: absolute;
  top:0;
  left: -11px;
  letter-spacing: -2px;
  opacity: 0.5;
}

#visualization {
  /*max-height: 95vh;*/
  transition: height ease 1s;
}
div.visualization {
  margin-bottom: 2rem;
}

.visualization-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem;
  background: var(--accent-color);
  box-shadow: 0 0 0 0 #888;
  width: fit-content;
  color: var(--bg-color);
  border-radius: 0.5rem;
  margin: 0.75rem 0 1rem 0;
  cursor: pointer;
  font-size: 0.9rem;
  transition: box-shadow 0.3 ease-in-out;
}
.visualization-link:before {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-image: var(--visualization-link-svg);
}
.visualization-link:hover {
  box-shadow: 0 2px 0 2px var(--text-color-lighter);
  color: var(--bg-deep);
}

#playerSettingsPopup {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-deep);
  box-shadow: 0 0 20px var(--bg-opposite);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  z-index: 9999;
  max-width: 350px;
}
#playerSettingsPopup label {
  display: flex;
  margin: 1rem 0;
  align-items: center;
  gap: 0.5rem;

}
.popup-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
#popupOverlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.2);
  z-index: 9998;
}
.hidden {
  display: none !important;
}
#playerSettingsPopup .switch-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
}

#playerSettingsPopup .switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

#playerSettingsPopup .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: background-color 0.3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.switch input:checked + .slider {
  background-color: #4caf50;
}

.switch input:checked + .slider:before {
  transform: translateX(24px);
}
.popup-buttons button {
  font-family: system-ui;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--text-color);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.popup-buttons button#closeSettings {
  color: #ff0000;
}
.popup-buttons button:hover {
  padding: 0.5rem 2rem;
}
.h-ad {
  padding: 10px 0 0 0;
}
body.dark.html .output img {
  filter: brightness(0.7)
}
.course-page-content {
  padding: 1rem;
  background: var(--bg-color);
  margin-top: 0.5rem;
}
.course-page-content h2:first-of-type {
  margin-top: 0;
}

/* Global for all Mermaid diagrams */
.mermaid svg {
  font-family: "Nunito", cursive !important;
  font-size: 14px;
}

.mermaid svg span{
  color: var(--text-color-deep)!important;
}

.mermaid svg .flowchart-link{
  stroke: var(--text-color)!important;
}
.mermaid svg .edgeLabel{
  background-color: var(--bg-color)!important;
}

/* Themed styling based on class name assigned via `class` */
.mermaid svg .startEnd rect {
  fill: var(--mermaid-startend-fill)!important;
  stroke: var(--mermaid-startend-stroke)!important;
  stroke-width: 2px!important;
}

.mermaid svg .process rect {
  fill: var(--mermaid-process-fill)!important;
  stroke: var(--mermaid-process-stroke)!important;
  stroke-width: 2px!important;
}

/* Decisions (diamond nodes) */
.mermaid svg .decision polygon {
  fill: var(--mermaid-decision-fill)!important;
  stroke: var(--mermaid-decision-stroke)!important;
  stroke-width: 2px!important;
}

/* Input/Output (parallelogram nodes) */
.mermaid svg .input polygon,
.mermaid svg .output polygon{
  fill: var(--mermaid-inputoutput-fill)!important;
  stroke: var(--mermaid-inputoutput-stroke)!important;
  stroke-width: 2px!important;
}

/* Print block */
.mermaid svg .print rect {
  fill: var(--mermaid-print-fill)!important;
  stroke: var(--mermaid-print-stroke)!important;
  stroke-width: 2px!important;
}

/* Optional: text color */
.mermaid svg .node text {
  fill: var(--mermaid-font-color)!important;
  font-weight: 500!important;
}
h2.center {
  text-align: center;
}

.comment-section {
  margin: 1rem auto;
  padding: 1.5rem;
  border: 1px solid var(--subtle-border-color);
  border-radius: 1rem;
  background: var(--bg-color);
}

.comment-section h3 {
  margin-top: 0;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--subtle-border-color);
  padding-bottom: 0.5rem;
}

#commentForm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#commentText {
  resize: vertical;
  padding: 0.8rem;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid var(--subtle-border-color);
  min-height: 80px;
}

#commentForm button {
  align-self: flex-start;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

#commentForm button:hover {
  background-color: #45a049;
}

#commentsList {
  margin-top: 1.5rem;
}

.comment-section .comment {
  background-color: var(--comment-bg-color);
  padding: 1rem;
  margin-bottom: 1rem;
  border-left: 4px solid #4CAF50;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.comment p {
  margin: 0.2rem 0;
}

.comment small {
  color: var(--text-color-lighter);
  font-size: 0.85rem;
}
.comment-guidelines {
  font-size: 0.9rem;
  color: var(--text-color-lighter);
  margin-bottom: 1rem;
}
#visual_example li {
  margin-bottom: 1rem;
}
@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-3deg); }
  50%  { transform: rotate(3deg); }
  75%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

.wiggle {
  animation: wiggle 0.4s ease-in-out infinite;
}

@keyframes jump {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}
.jump {
  animation: jump 0.6s ease-out infinite;
}

pre.output code div {
  transition: opacity 0.3s ease;
  opacity: 1;
}

pre.output.player-ready code div {
  opacity: 0.1;
}

pre.output code div.highlight-output {
  opacity: 1;
}
.rise {
  transform: translateY(-10px);
}


/** monoco editor **/
.editor-block {
  margin-top: 1rem;
  border-radius: 1rem;
  padding-bottom: 1rem;
  border: 5px solid var(--highlight-blue-border-color);
}
.editor-block > * { 
  padding: 0 1rem;
}
.editor-block h3 { 
  margin: 0;
  background: var(--bg-ternary);
  border-radius: 1rem 1rem 0 0;
  padding-bottom: 0.5rem;
}
.editor-block h4 { 
  margin: 0 0 0.5rem 0;
}
.monaco-editor-wrapper {
  height: auto !important;
  max-height: none;
  min-height: 200px;
  overflow: visible;
  border: 1px solid #ccc;
  padding: 0;
  background: #1e1e1e;
  border-radius: 1rem;
  margin-bottom: 0.5rem;
  transition: height 0.2s ease;
}
.monaco-editor, .monaco-scrollable-element {
  overflow: visible !important;
}
.monaco-editor .overflow-guard {
  border-radius: 1rem;
}
.monaco-editor {
  border-radius: 1rem;
}
.editor-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.editor-btn {
  padding: 10px 16px;
  font-size: 1rem;
  background: var(--bg-secondary);
  border: 0px solid;
  color: var(--text-color);
  border-radius: 2rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}
.editor-btn:hover {
  box-shadow: 4px 2px 8px var(--accent-color);
}
.editor-btn[data-action=run] {
  color: #000;
  background: var(--accent-color);
}
.editor-btn[data-action=run]:hover {
  box-shadow: 4px 2px 8px var(--text-color);
}
.code-output {
  background: var(--jsav-output-bg);
  color: var(--text-color-deep);
  font-family: monospace;
  font-size: 1rem;
  padding: 10px;
  margin-top: 10px;
  white-space: pre-wrap;
  opacity: 1;
  border-radius: 0.25rem;
  margin: 1rem 0;
  transition: opacity ease 0.2s;
}
.code-output.loading {
  opacity: 0;
}

pre.output-in-player {
  margin: 0;
  border: 2px solid var(--code-bar-bg); 
  border-top-width: 2px;
  border-bottom-width: 0;
  background: var(--bg-secondary);
}
pre.output-in-player code{
  border: 0;
  background: none;
  border: 0;
  color: var(--text-color-lighter);
  padding: 0.25rem 0 0.5rem 0.5rem;
}
pre.output-in-player code div {
  min-height: 1rem;
}
pre.output-in-player:not([data-name])::before {
  border-radius: 0;
  background: var(--bg-course-bar);
  width: calc(100% - 16px);
  color: var(--text-color);
}

@keyframes rotateBorder {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(-1turn);
  }
}

button:disabled {
  cursor: default;  
}
a code {
  color: inherit;
}

.code-block-top-bar {
  display: flex;
  justify-content: space-between;
  border: 2px solid var(--code-bar-bg);
  border-bottom-width: 0;
}
.code-block-top-bar button.copy{
  position: relative;
  border-radius: 0;
}
.aurora-bg {
  position: relative;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
  border: 0;
  font-size: 1rem;
  margin-top: -4px;
  margin-bottom: -3px;
  /*transform: scale(1.15);*/
}

.aurora-bg::before {
  content: "";
  position: absolute;
  top: -1000%;
  left: -300%;
  width: 600%;
  height: 2000%;
  background: var(--conic-gradient-1);
  z-index: -1;
  animation: rotateBorder 10s linear infinite;
}
.aurora-bg::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: var(--message-pointer-bg);
  z-index: -1;
  border-radius: 4px;
}
.code-block-top-bar-right {
  display: flex;
  gap: 2rem
}
button.practice_program {
  background: var(--compiler-run-green-bg);
  padding: 1rem 2rem;
  font-size: 1rem;
  border: 0;
  font-weight: 600;
  color: #000;
  cursor: pointer;
  transition: transform 0.2s ease;
  gap: 0.5rem;
  display: flex;
  align-items: center;
}
button.practice_program:hover {
  box-shadow: 0 0 5px #888;
  transform: scale(1.05);
}