body {
  color: #d3d3d3;
  font: 12pt arial;
  background-color: #222222;
}

#container,
.container {
  display: flex;
  gap: 10px;
  width: 100%;
  min-width: 1200px;
  height: 82vh;
  margin-top: 10px;
}

.clickable{
  cursor: pointer;
}
.good {
  color: #3cc9ab;
}

.warning {
  color: #efba32;
}

.bad {
  color: #cf2f26;
}
.login_status{
  margin: 0 0 12px 0;
  background: rgba(20, 110, 120, 0.28);
  padding: 8px 10px;
  border-radius: 8px;
}
.login_status_normal{
  color: rgb(230, 249, 249);
}
.login_status_error{
  color: #e28c89;
}
.login_container{
  width: 320px;
  margin: 80px auto;
  padding: 24px;
  border: 1px inset rgba(150, 230, 230, 0.5);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(82, 229, 217, 0.422), 0 0 0 1px rgba(29, 216, 236, 0.262);
  background: linear-gradient(120deg, rgba(12, 80, 88, 0.9), rgba(20, 110, 120, 0.9));
}
.login_container label{
  font-size: 1rem;
  font-weight: 400;
  color: #e6f9f9;
}
.login_container h2{
  margin-top: 0;
  margin-bottom: 14px;
  padding: 6px 12px;
  font-size: 1.45em;
  font-weight: 600;
  color: #f0ffff;
  background: linear-gradient(120deg, rgba(20, 110, 120, 0.9), rgba(30, 140, 150, 0.85));
  border-radius: 8px;
}
.login_input {
  height: 32px;
  border: 1px solid rgba(131, 225, 225, 0.7);
  padding: 4px;
  font-family: monospace;
  transition: 0.4s;
  border-radius: 8px;
  background-color:#1d2c33;
  color: #dee;
  padding: 2px;
  font-size: 1.05em;
    width:100%;
    margin-top:10px;
    margin-bottom:18px;
}
.login_input:hover{
  border: 1px solid rgba(234, 234, 234, 0.7);
  background-color: #131d21!important;
}
.login_input:valid {
  border: 1px solid rgba(131, 255, 205, 0.7);
  background-color: #1d2c33;
  color: #dee;
}
.login_input:invalid {
  border: 1px solid rgba(211, 131, 131, 0.7);
  background-color: #212324;
  color: #e28c89;
}
.login_container .login_button{
  width:100%;
}
.status_red{
  color:#e34a42;
  font-weight: 550;
}
#mynetwork {
  flex: 1.5;
  border: 1px solid #444444;
  background-color: rgb(8, 18, 19);
}

#right-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 50vh;
}
#network_panel{
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 10px;
}
#node_detail_panel{
    display: none;
    flex-direction: column;
    flex: 1;
    margin-top: 10px;
    justify-content: flex-end;
}

:root {
  --server-bar-height: 58px;
  --search-bar-height: 44px;
  /* Global scrollbar palette (from talk_script_md) */
  --scrollbar-size: 6px;
  --scrollbar-thumb: rgba(100, 200, 177, 0.4);
  --scrollbar-track: rgba(5, 5, 5, 0.3);
}

/* Apply standard scrollbar look app-wide (talk_script_md style) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
  width: var(--scrollbar-size);
}
*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 6px;
  border: 1px solid var(--scrollbar-thumb);
}
*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
*::-webkit-scrollbar-button {
  display: none;
}
.monkey-info-bar,
.monkey_info_bar {
  margin-top: 10px;
  height: var(--server-bar-height);
  background-color: #152b2d;
  background: linear-gradient(150deg, rgb(21, 45, 44) 36%, rgb(12, 59, 59) 70%);
  color: #ffffff;
  font-family: "Lucida Console", Monaco, monospace;
  line-height: 1.5;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border-bottom: 1px solid #555555;
  gap:24px;
}
.bar-server-msg,
.bar_server_msg {
  height: var(--server-bar-height);
  color: #ffffff;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #555555;
  background-color: rgba(20, 38, 37,1);
  background-color: #1c3333;
  background: linear-gradient(130deg, rgb(24, 46, 46)60%, rgb(14, 49, 49) 70%);
  border-bottom: 1px solid  rgba(175, 209, 200,0.2);
  border-top: 1px solid  rgba(175, 209, 200,0.2);
  position: sticky;
  padding: 4px 10px;
  top: 0;
  z-index: 930;
  gap:24px;
  overflow: hidden;
}
.colour_back_teal{
background: linear-gradient(110deg, rgb(20, 36, 36)60%, rgb(19, 31, 31) 70%);
background: linear-gradient(150deg, rgb( 8, 41, 38) 36%,   rgb(10, 29, 32)70%);
}
.title_pad {
  min-height: 52px;
  max-height: 58px;
  color: #ffffff!important;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 4px 10px;
  border-bottom: 1px solid #555555;
  background-color: rgba(20, 38, 37,1);
  background-color: #152b2d;
  border-bottom: 1px solid  rgba(175, 209, 200,0.2);
  border-top: 1px solid  rgba(175, 209, 200,0.2);
  gap:24px;
  display: flex;
  align-items: center;
  background: linear-gradient(130deg, rgba(45, 50, 66,1) 25%, rgba(22, 32, 42,1) 70%);
  background: linear-gradient(130deg, rgba(40, 51, 77,1) 25%, rgba(22, 32, 42,1) 70%);
  background: linear-gradient(130deg, rgba(40, 75, 77,1) 25%, rgba(22, 36, 42,1) 70%);
  background: linear-gradient(135deg, rgba(7, 33, 36,1) 25%, rgba(12,41,44,0.7) 50%);
}

.radius_top_borders{
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.radius_bottom_borders{
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.radius_all_borders{
    border-radius: 12px;12px;
}
.monkey-info-bar:not(.nagivation_bottom),
.monkey_info_bar:not(.nagivation_bottom) {
  position: sticky;
  top: calc(var(--server-bar-height) + var(--search-bar-height)); /* sits below bar-server-msg and search */
  z-index: 899;
}

/* Keep search bars visible while scrolling (applies globally) */

.search-bar-zone,
.search_bar_zone {
  height: var(--search-bar-height);
  /* Fixed height for the bar */
  background-color: #333333;
  color: #ffffff;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  padding: 0 6px;
  border-bottom: 1px solid rgba(85, 85, 85,0.8);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.monkey-icon,
.monkey_icon {
  width: 50px;
  height: 50px; /* Sets the icon size */
  border: 2px;
  border-radius: 60%;
}
    .input_containerk {
        display: flex;
        align-items: center;
        position: relative;
        width: max-content;
    }
.input_containerk input{
  width:362px;
}
#node_label {
  font-family: monospace;
  border: 1px solid rgba(204, 204, 204, 0.7);
  padding-right: 30px;
  height: 35px;
  font-size: 14px;
  background-color: #1d2c33;
  color: #7cffbe;
  transition: 0.2s;
}
#node_label:hover {
  border: 1px solid rgba(204, 224, 224, 1);
  cursor: pointer;
}
.buttons_node_panel{
    align-self:flex-end;
      margin-top:10px;
}
.buttons_node_panel_c4{
    align-self:flex-end;
}
.button_node_panel{
  padding: 8px 20px ;
  width:max-content;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  transition:0.2s;
  font-size: 16px;
}
#close_node_detail_panel {
  color: rgba(109, 119, 131, 1);
  border: 1px solid rgba(109, 119, 131, 1);
  transition: 0.3s;
}
#close_node_detail_panel:hover {
  color: rgba(171, 210, 214, 1);
  border: 1px solid rgba(171, 210, 214, 0.8);
}

#save_node_detail_panel {
  color: rgba(71, 168, 150, 1);
  border: 1px solid rgba(71, 168, 150, 1);
  transition: 0.3s;
}
#save_node_detail_panel:hover {
  color: rgba(239, 186, 50, 1);
  border: 1px solid rgba(239, 186, 50, 0.8);
}


#node_detail_panel span{
  margin-bottom:4px;
  color:#dff;
  font-size: 16px;
}
.node-text-span{
  margin-top:10px;
}
.node_content_titles{
  cursor: pointer;
  user-select: none;
  font-style: italic;
  font-weight: bold;
  transition:  transform 0.2s;
}
.node_content_titles_right{

  cursor: pointer;
  float:right;
  font-size: 0.95em;
  user-select: none; /* prevent text selection */
  font-size: 1.05em;
  font-style: italic;
  font-weight: bold;
  transition:  transform 0.2s;
}
.node_content_titles_right_QCM{
  cursor: pointer;
  float:right;
  font-size: 0.95em;
  user-select: none; /* prevent text selection */
  font-size: 1.05em;
  font-style: italic;
  font-weight: bold;
  transition:  transform 0.2s;
  margin-right:15px;
}
.node_content_titles,
.node_content_titles_right,
.node_content_titles_right_QCM {

  color: rgba(183, 235, 225, 0.5);
  border-radius: 5px;
  border: 1px solid rgba(107, 209, 190, 0.6);
  padding:4px 8px;
  transition: 0.3s;
}
.node_content_titles:hover,
.node_content_titles_right:hover,
.node_content_titles_right_QCM:hover{
  color:rgba(217, 185, 102)!important;
  border-radius: 5px;
  border: 1px solid rgba(217, 185, 102, 0.8)!important;
}

.node_content {
  flex: 1;
  height: 49vh;
  border: 1px solid rgba(204, 204, 204, 0.7);
  resize: none;
  padding: 10px;
  font-family: monospace;
  background-color: #1d2c33;
  color: #ffffff;
  overflow-y: scroll;
  transition: 0.2s;
}
.thumbnail_grid {
  height: 50vh;
  border: 1px solid rgba(204, 204, 204, 0.7);
  padding: 0;
  font-family: monospace;
  background-color: #2e4b4d;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}

.thumbnail_scroll_wrapper {
  flex: 1;
  min-height: 0;
}

.monkey_udpate_anim{
    background: linear-gradient(130deg, rgba(16, 38, 32,1) 15%, rgba(27, 37, 32,1) 70%);
    border-top: 1px solid rgba(35, 162, 173,0.4);
    border-bottom: 1px solid rgba(35, 162, 173,0.4);
    /*border: 1px outset rgba(35, 162, 173,0.4);*/
    gap:8px;
}
.monkey_udpate_anim_c{
    background: linear-gradient(130deg, rgba(16, 38, 32,1) 15%, rgba(27, 37, 32,1) 70%);
    border-top: 1px solid rgba(35, 162, 173,0.4);
    border-bottom: 1px solid rgba(35, 162, 173,0.4);
    /*border: 1px outset rgba(35, 162, 173,0.4);*/
    gap: 12px;
}
.monkey_udpate_anim2{
    background: linear-gradient(130deg, rgba(16, 38, 32,1) 15%, rgba(27, 37, 32,1) 70%);
    background: linear-gradient(160deg, rgba(19, 48, 51,0.9) 25%, rgba(27, 44, 46,1) 77%);
    border-top: 1px inset rgba(35, 162, 173,0.4);
    border-bottom: 1px solid rgba(35, 162, 173,0.4);
    /*border: 1px outset rgba(35, 162, 173,0.4);*/
    gap:8px;
}
.popup_table_scroll{
  max-height:60vh;
  height:60vh;
  overflow-y:auto;
  width:100%;
}
.popup_table_scroll table{
  margin:0;
}
.thumbnail_scroll_wrapper::-webkit-scrollbar {
  width: 8px;
}
.thumbnail_scroll_wrapper::-webkit-scrollbar-track {
  background: #1d2c33;
}
.thumbnail_scroll_wrapper::-webkit-scrollbar-thumb {
  background-color: #888;
}

.thumbnail_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 15px;
  table-layout: fixed;
  margin-bottom:-15px
}

.thumbnail_cell {
  vertical-align: top;
  text-align: center;
  width: 33.33%;
}

.thumbnail_item {
  background-color: #1f3133;
  padding: 10px;
  border-radius: 8px;
  transition: transform 0.2s, background-color 0.2s;
  cursor: pointer;
}

.thumbnail_item:hover {
  background-color: #0c1517;
  transform: scale(1.02);
}

.thumbnail_image {
  max-width: 100%;
  max-height: 120px;
  border-radius: 4px;
  margin-bottom: 5px;
  object-fit: cover;
}

.thumbnail_image_filename,
.thumbnail_image_title {
  font-size: 0.85em;
  color: #ccc;
  margin: 2px 0;
}



#node_content:hover {
  border: 1px solid rgba(204, 224, 224, 1);
}

#node_content:hover {
  border: 1px solid rgba(204, 224, 224, 1);
}
/* Webkit Browsers (Chrome, Edge, Safari) */
#node_content::-webkit-scrollbar {
  width: 8px;
}

#node_content::-webkit-scrollbar-track {
  background: #1d2c33;
}

#node_content::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

#node_content::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

#master_node {
  height: 15px;
  border: 1px solid rgba(204, 204, 204, 0.7);
  padding: 10px;
  font-family: monospace;
  background-color: #1d2c33;
  color: #ffffff;
  color: #efba32;
  transition: 0.2s;
  border-radius: 12px;
  cursor: pointer;
}

#master_node:hover {
  border: 1px solid rgba(204, 224, 224, 1);
}
.editor-container {
  flex: 1;
  height: 60vh;
  border: 1px solid rgba(204, 204, 204, 0.7);
  resize: none;
  padding: 10px;
  font-family: monospace;
  background-color: #1d2c33;
  color: #ffffff;
  overflow-y: auto;
  /* Add vertical scrolling */
  scrollbar-width: thin;
  /* For Firefox: thin scrollbar */
  scrollbar-color: #888 #1d2c33;
  /* For Firefox: thumb and track color */
  transition: 0.2s;
}

.editor-container:hover {
  border: 1px solid rgba(204, 224, 224, 1);
}
.container_node_ids {
  background-color: #161e21;
}
.container_node_ids:hover {
  border: 1px solid rgba(204, 204, 204, 0.7);
}
/* Webkit Browsers (Chrome, Edge, Safari) */
.editor-container::-webkit-scrollbar {
  width: 8px;
}

.editor-container::-webkit-scrollbar-track {
  background: #1d2c33;
}

.editor-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.editor-container::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
.popup_gamesteps_long_container{
  height:auto;
  min-height:10vh;
}
.copied-popup {
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  top: -30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transform: translateY(5px);
}
.copied-popup.show {
  opacity: 1;
  transform: translateY(0);
}

.url_path{
  padding:8px 12px;
  background-color: rgba(15, 28, 21,0.3);
  cursor: pointer;
  overflow-wrap: break-word;  /* modern and preferred */
  word-break: break-all;       /* fallback for older browsers */
  max-width: 100%;             /* ensure it stays within parent */
  box-sizing: border-box;      /* prevent padding overflow */
    color: rgb(224, 224, 224);
    font-size:12px;
    border-radius: 12px;
    transition: 0.3s;
}
.url_path:hover{
  background-color: rgba(15, 28, 21,0.5);
}

.btn{
  cursor: pointer;
  border: 1px solid rgb(2, 152, 142);
  font-family: "system-ui";
  font-size: 14px;
  color: rgb(255, 255, 255);
  padding: 10px 30px;
  transition: background-color 0.5s, color 0.5s;
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
  border-radius: 5px;
  background: linear-gradient(100deg, rgb(25, 82, 85) 0%, rgb(11, 28, 27) 70%);
  font-weight: 500;
  --hover-width: 195px;
  --hover-borderSize: 1;
  --hover-borderc: #3cc9ab;
  --hover-color: #ffffff;
  --hover-bgc: rgb(25, 82, 85);
  transition: 0.3s;
}

.btn:hover{
  background: rgb(6, 23, 22) none repeat scroll 0% 0% / auto padding-box border-box;
  border-color: rgb(43, 170, 147);
  border-style: solid;
}

.btn_thin{
  padding:4px 8px;
}
.btn_cyan2{
  background: linear-gradient(100deg, rgb(25, 105, 102) 0%, rgb(13, 84, 80) 70%);
  border: 1px solid rgb(115, 222, 216,0.6);
  color: rgb(214, 214, 214);
  cursor: pointer;
  transition: 0.4s;
}
.btn_cyan2:hover{
    background: linear-gradient(130deg, rgb(0, 132, 115) 10%, rgb(5, 72, 69) 70%);
    border-color: rgb(84, 252, 230)!important;
    border-style: solid;
    color: rgb(224, 254, 244)!important;
    text-shadow: 0 0 2px rgba(84, 247, 210, 0.8), 0 0 4px rgba(44, 247, 210, 0.75);
}

.btn_cyan3{
  background: linear-gradient(100deg, rgb(25, 85, 80) 0%, rgb(13, 54, 50) 70%);
  border: 1px solid rgb(54, 89, 81);
  color: rgb(194, 194, 194);
  cursor: pointer;
  transition: 0.4s;
}
.btn_cyan3:hover{
    background: linear-gradient(100deg, rgb(0, 128, 115) 0%, rgb(5, 69, 69) 70%);
    border-color: rgb(84, 227, 200);
    border-style: solid;
    color: rgb(214, 244, 244);
}
.btn_cyan4{
  background: linear-gradient(100deg, rgb(21, 92, 86) 0%, rgb(13, 79, 73) 70%);
  border: 1px solid rgb(54,207, 187);
  color: rgb(194, 194, 194);
    cursor: pointer;
    transition: 0.4s;
}
.btn_cyan4:hover{
    background: linear-gradient(120deg, rgb(0, 128, 115) 10%, rgb(5, 69, 69) 70%);
    border-color: rgb(84, 227, 200);
    border-style: solid;
    color: rgb(214, 244, 244);
}
.btn_yellow{
  background: linear-gradient(100deg, rgb(110, 99, 5) 0%, rgb(69, 64, 14) 70%);
  border: 1px solid rgb(207, 189, 54);
  color: rgb(194, 194, 194);
    cursor: pointer;
    transition: 0.4s;
}
.btn_yellow:hover{
    background: linear-gradient(120deg, rgb(59, 49, 15) 15%, rgb(61, 49, 6) 70%);
    border: 1px solid rgb(227, 219, 74);
    color: rgb(254, 255, 245);
    text-shadow: 0 0 4px rgba(158, 123, 6, 0.7), 0 0 8px rgba(158, 123, 6, 0.65);
}

.btn_orange{
  background: linear-gradient(42deg, rgb(80 37 7) 0% 0%, rgb(105 38 12) 70%);
  border: 1px solid rgb(227, 139, 34);
  color: rgb(194, 194, 194);
    cursor: pointer;
    transition: 0.4s;
}
.btn_orange:hover{
    background:linear-gradient(50deg, rgb(75 18 5) 15%, rgb(48 8 3) 70%);
    border: 1px solid rgb(247, 159, 54);
    color: rgb(254, 205, 185);
    text-shadow: 0 0 4px rgba(188, 103, 6, 0.7), 0 0 8px rgba(188, 103, 6, 0.65);
}

.btn_grey{
  background: linear-gradient(110deg, rgb(72, 79, 78) 15%, rgb(26, 29, 26) 70%);
  border: 1px solid rgb(79, 70, 67);
  color: rgb(194, 194, 194);
  transition: 0.5s;
      cursor: pointer;
}
.btn_grey:hover{
    background: linear-gradient(110deg, rgb(18,24,20) 15%, rgb(15,18,20) 70%);
    border: 1px solid rgb(143, 143, 143);
    color: rgb(234, 234, 234);
}

.btn_grey2{
  background: linear-gradient(100deg, rgb(40, 49, 48) 0%, rgb(20, 29, 26) 70%);
  border: 1px solid rgb(189, 160, 117);
  color: rgb(194, 194, 194);
  transition: 0.3s;
  cursor: pointer;
}
.btn_grey2:hover{
  background: linear-gradient(130deg, rgb(18,24,20)  0%, rgb(10,18,16)  70%);
    border: 1px solid rgb(189, 160, 117,0.9);
    color: rgb(234, 234, 234);
}
.btn_red{
  background: linear-gradient(100deg, rgb(85, 31, 25) 0%, rgb(28, 11, 11) 70%);
  border: 1px solid rgb(79, 70, 67);
  color: rgb(194, 194, 194);
  transition: 0.4s;
      cursor: pointer;
}
.btn_red:hover{
    background: rgb(20, 3, 3) none repeat scroll 0% 0% / auto padding-box border-box;
    border-color: rgb(143, 126, 126);
    border-style: solid;
    color: rgb(224, 224, 224);
    text-shadow: 0 0 3px rgba(143, 126, 126, 0.7), 0 0 6px rgba(143, 126, 126, 0.65);
}
.btn_red2{
  background: linear-gradient(100deg, rgba(85, 31, 25,0.8) 0%, rgba(28, 11, 11,0.7) 70%);
  border: 1px solid rgb(79, 70, 67);
  color: rgb(194, 194, 194);
  transition: 0.3s;
      cursor: pointer;
}
.btn_red2:hover{
    background: rgba(20, 3, 3,0.7) none repeat scroll 0% 0% / auto padding-box border-box;
    border-color: rgb(143, 126, 126);
    border-style: solid;
    color: rgb(224, 224, 224);
}
.btn_red_hard{
  background: linear-gradient(100deg, rgba(85, 31, 25,0.8) 0%, rgba(28, 11, 11,0.7) 70%);
  border: 1px solid rgb(79, 70, 67);
  color: rgb(194, 194, 194);
  transition: 0.4s;
  text-shadow: 0 0 3px rgba(163, 126, 126, 0.7), 0 0 6px rgba(183, 126, 126, 0.65);
      cursor: pointer;
}
.btn_red_hard:hover{
    background: rgba(23, 3, 18,0.7) none repeat scroll 0% 0% / auto padding-box border-box;
    border-color: rgb(213, 126, 186);
    border-style: solid;
    color: rgb(224, 224, 224);
    text-shadow: 0 0 6px rgba(193, 126, 176, 0.9), 0 0 6px rgba(193, 126, 186, 0.75);
}
.btn_purple{
  background: linear-gradient(100deg, rgb(55, 25, 85) 0%, rgb(19, 11, 28) 70%);
  border: 1px solid rgb(111, 101, 120);
  color: rgb(194, 194, 194);
  transition: 0.3s;
      cursor: pointer;
}
.btn_purple:hover{
    background: rgb(10, 3, 20) none repeat scroll 0% 0% / auto padding-box border-box;
    background: linear-gradient(100deg, rgb(33, 17, 51) 0%, rgb(10, 3, 20) 70%);
    border-color: rgba(159, 136, 184,1);
    border-style: solid;
    color: rgb(224, 224, 224);
    text-shadow: 0 0 4px rgba(159, 136, 184, 0.7), 0 0 8px rgba(159, 136, 184, 0.65);
}
.btn_blue{
  background: linear-gradient(100deg, rgb(25, 48, 85) 0%, rgb(18, 28, 48) 70%);
  border: 1px solid rgb(111, 101, 120);
  color: rgb(194, 194, 194);
  transition: 0.3s;
      cursor: pointer;
}
.btn_blue:hover{
    background: rgb(9, 22, 36) none repeat scroll 0% 0% / auto padding-box border-box;
    border-color: rgba(117, 149, 191,1);
    border-color: rgba(84, 190, 247,0.9);
    border-style: solid;
    color: rgb(224, 224, 224)!important;
    text-shadow: 0 0 4px rgba(84, 190, 247, 0.7), 0 0 8px rgba(84, 190, 247, 0.65);
}
.btn_blue2{
  background: linear-gradient(100deg, rgb(20, 77, 92) 0%, rgb(29, 73, 82) 70%);
  border: 1px solid rgb(94, 122, 122);
  color: rgb(194, 194, 194);
  transition: 0.3s;
  cursor: pointer;
}
.btn_blue2:hover{
    background: rgb(9, 35, 36) none repeat scroll 0% 0% / auto padding-box border-box;
    border-color: rgba(120, 196, 189,1);
    border-style: solid;
    color: rgb(224, 224, 224)!important;
    text-shadow: 0 0 4px rgba(84, 190, 247, 0.7), 0 0 8px rgba(84, 190, 247, 0.65);
}
.btn_cyan_nav{
  background:linear-gradient(150deg, rgb(5, 72, 75) 0%, rgb(6, 34, 36) 70%);
  border: 1px solid rgba(94, 122, 122, 0.8);
  color: rgb(194, 194, 194);
  transition: 0.4s;
  cursor: pointer;
}
.btn_cyan_nav:hover{
    background: rgb(2, 29, 32) none repeat scroll 0% 0% / auto padding-box border-box;
    border-color: rgba(120, 196, 189,1);
    border-style: solid;
    color: rgb(224, 224, 224)!important;
    text-shadow: 0 0 1px rgba(84, 230, 217, 0.15), 0 1px 3px rgba(84, 230, 197, 0.15);
}
.nagivation {
}
.margin_top_12{
  margin-top:24px;
}
.margin_top_24{
  margin-top:24px;
}

.reset_qcm_button{
  margin-left: 8px;
  padding: 6px 12px;
  font-weight: 450;
  width:60px;
  height:30px;
  border-radius: 6px;
}
.thin_side_button{
  margin-left: 8px;
  padding: 6px 12px;
  font-weight: 450;
  border-radius: 6px;
}

/* Custom popup styling */
.popup-new-course,
.popup-upload-pdf,
.popup_courses_listE,
.popup_modify_qcm  {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(25, 82, 85);
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  width: 300px;
  color: #fff;
}

.popup-upload-pdf{
  width: 500px;
}
.popup_modify_qcm{
  width: 800px;
}
.popup_courses_listE {
  width: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.published_courses_list_wrapper {
  width: 100%;
  height: 60vh;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px 0;
  box-sizing: border-box;
  background: linear-gradient(150deg, rgba(7, 18, 15,0.8) 30%, rgba(15, 26, 23,0.5) 70%);
  border-radius: 10px;
  padding:12px;
}
.published_courses_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.courses_list_wrapper {
  width: 100%;
  height: 60vh;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px 0;
  box-sizing: border-box;
  background: linear-gradient(150deg, rgba(7, 18, 15,0.8) 30%, rgba(15, 26, 23,0.5) 70%);
  border-radius: 10px;
  padding:12px;
}
.courses_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.courses_list_wrapper {
  width: 100%;
  height: 60vh;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px 0;
  box-sizing: border-box;
  background: linear-gradient(150deg, rgba(7, 18, 15,0.8) 30%, rgba(15, 26, 23,0.5) 70%);
  border-radius: 10px;
  padding:12px;
}
.courses_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.published_courses_list li {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  background-color: rgba(18, 92, 76, 0.55);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(169, 212, 202, 0.8);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
  font-weight: 550;
}
.published_courses_list li:hover {
  background-color: rgba(168, 122, 40, 0.3);
  border: 1px solid rgba(219, 207, 147, 0.4);
  color: rgba(255, 255, 255, 0.95)!important;

    background-color: rgba(11, 120, 125, 0.6);
    border-color: rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.8)!important;
}
.published_courses_list li.selected {
  background-color: rgba(138, 90, 7, 0.95);
  color: rgba(255, 255, 255, 1)!important;
  border-color: rgba(255, 245, 215, 1);

      background-color: rgba(11, 140, 145, 0.95);
      color: rgba(255, 255, 255, 1)!important;
      border-color: rgba(255, 245, 215, 1);
}

.courses_list li {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  background-color: rgba(18, 92, 76, 0.55);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(169, 212, 202, 0.8);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
  font-weight: 550;
}
.courses_list li:hover {
  background-color: rgba(11, 120, 125, 0.6);
  border-color: rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.8)!important;
}
.courses_list li.selected {
  background-color: rgba(11, 140, 145, 0.95);
  color: rgba(255, 255, 255, 1)!important;
  border-color: rgba(255, 245, 215, 1);
}
.courses_list li {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  background-color: rgba(18, 92, 76, 0.55);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(169, 212, 202, 0.8);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
  font-weight: 550;
}
.courses_list li:hover {
  background-color: rgba(11, 120, 125, 0.6);
  border-color: rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.9)!important;

    background-color: rgba(11, 120, 125, 0.6);
    border-color: rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.8)!important;
}
.courses_list li.selected {
  background-color: rgba(11, 120, 125, 0.95);
  color: rgba(255, 255, 255, 1)!important;
  border-color: rgba(255, 245, 215, 1);

    background-color: rgba(11, 140, 145, 0.95);
    color: rgba(255, 255, 255, 1)!important;
    border-color: rgba(255, 245, 215, 1);
}
.published_courses_controls,
.courses_controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.published_courses_controls input,
.courses_controls input {
  flex: 1 1 auto;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid rgba(204, 204, 204, 0.7);
  background-color: #1d2c33;
  color: #ffffff;
  font-size: 16px;
}
.published_courses_actions {
  margin-top: 10px;
  text-align: right;
}
.courses_actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
[class*="popup"] h3,
.popup_courses_listE h3,
#popup_upload_publish_qcm h3,
#popup_generate_qcm h3,
#popup_generate_qcms_per_node h3,
#popup_format_node_helper h3 {
  margin-top: 0;
  margin-bottom: 15px;
  padding: 6px 12px;
  font-size:18px;
  font-weight:500;
  color: rgba(124, 228, 209, 0.9);
  background: linear-gradient(135deg, rgba(6, 26, 21,0.75), rgba(13, 20, 19,0.5));
  border-radius: 8px;
}
[class*="popup"] h2,
.popup_courses_listE h2,
#popup_upload_publish_qcm h2,
#popup_generate_qcm h2,
#popup_generate_qcms_per_node h2,
#popup_format_node_helper h2 {
  margin-top: 0;
  margin-bottom: 15px;
  padding: 10px 12px;
  font-size:1.5em;
  font-weight:500;
  color: rgba(147, 228, 213, 0.95);
  background: linear-gradient(95deg, rgba(9, 74, 66,0.75), rgba(11, 30, 31,0.5));
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(40, 140, 150, 0.12);
  border: 1px solid rgba(84, 198, 178, 0.35);
}

.popup-upload-pdf p {
  font-size: 14px;
  color: #d9d9d9;
  margin-bottom: 15px;
}

.popup-upload-pdf h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
}


.popup-upload-pdf div {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.popup-upload-pdf div > span,
.popup-upload-pdf div > label,
.popup_courses_listE span  {
  flex: 1;
  font-size: 14px;
  color: #ffffff;
  margin-right: 10px;
}
select{
  font-family: "Lucida Console", Monaco, monospace;
}
/* Styling for select elements */
.popup-upload-pdf select,
.popup_modify_qcm select,
.popup_courses_listE select {
  flex: 0 0 120px;
  /* Fixed width for consistent alignment */
  padding: 5px;
  border: 1px solid rgba(204, 204, 204,0.6);
  border-radius: 5px;
  background-color: #dee;
  color: #000000;
  font-size: 12px;
  box-sizing: border-box;
}
.popup_modify_qcm input:not([type="checkbox"]) {
  /* flex: 0 0 120px; */
}
.popup_modify_qcm input{
    /* Fixed width for consistent alignment */
    padding: 5px;
    border: 1px solid rgba(204, 204, 204,0.6);
    border-radius: 5px;
    background-color: #1d2c33;
    color: #dee;
    font-size: 1.05em;
    box-sizing: border-box;
}
.search-bar-zone input[type="text"],
.search_bar_zone input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}
/* Adjusting the file input */
.popup-upload-pdf input[type="file"] {
  margin-top: 15px;
  width: 97%;
  padding: 5px;
  background-color: #dee;
  color: #000;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 14px;
}
.popup_modify_qcm span{
  margin-right:10px;
}

.popup_modify_qcm_textarea {
  min-height: 80px;
  height: auto;
  max-width:600px;
  border: 1px solid rgba(204, 204, 204, 0.7);
  resize: none;
  padding: 10px;
  font-family: monospace;
  background-color: #1d2c33;
  color: #ffffff;
  overflow-y: scroll;
  transition: 0.4s;
  border-radius: 8px;
}

.popup_modify_qcm_textarea:hover{
  border: 1px solid rgba(234, 234, 234, 0.7);
  background-color: #131d21;
}
.popup_modify_qcm_textarea:focus{
  border: 1px solid rgba(234, 234, 234, 0.7);
  background-color: #131d21;
}
#popup_modify_qcm_explanation{
    min-height:80px;
    height:auto;
    color: rgba(224, 224, 224, 0.8);
}

.popup_modify_qcm textarea{
  background-color:#1d2c33;
  color: #dee;
  padding: 2px;
  border: 1px solid rgb(145, 145, 145);
  font-size:14px;
    font-size: 1.05em;
    width:600px;
    min-height:80px;
    resize: vertical;
}
#popup_modify_qcm_md .markdown_transfo,
#popup_modify_qcm input,
#popup_modify_qcm textarea{
  width:700px;
  max-width:700px;
}
.popup_modify_qcm select{
  background-color:#1d2c33;
  color: #dee;
  margin-bottom:15px;
}
.popup_detail_image {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgb(25, 82, 85);
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  width: 400px;
  color: #fff;
  width:800px;
}

.popup_detail_image_container {
  display: flex;
  gap: 20px; /* optional: spacing between left and right */
  align-items: flex-start; /* align top edges */
}

.popup_detail_image_left_panel {
  flex: 0 0 auto; /* don't stretch, keep image width */
}

.popup_detail_image_right_panel {
  flex: 1; /* take the remaining space */
}
.popup_detail_image_src{
  max-width: 500px;
  max-height: 500px;
}


.popup_detail_image p {
    color: #ddd;
    margin-top:10px
      flex: 1;
      font-size: 14px;
}
.popup_detail_image span{
    flex: 1;
    font-size: 16px;
    color:#8eded2;
    font-weight: bold;
    font-style: italic;
}
.popup_detail_image_txtE{
  margin-top: :10px;
}
.popup_detail_image input{
  border: 1px solid rgba(204, 204, 204, 0.7);
  resize: none;
  font-family: monospace;
  background-color: #1d2c33;
  color: #ffffff;
  font-size: 16px;
  transition: 0.3s;
}
.popup_detail_image input:hover{
  border: 1px solid rgba(234, 234, 234, 0.7);
  background-color: #131d21;
}

.popup_detail_image_textarea {
  height:100px;
  width:80%;
  border: 1px solid rgba(204, 204, 204, 0.7);
  resize: none;
  padding: 10px;
  font-family: monospace;
  background-color: #1d2c33;
  color: #ffffff;
  overflow-y: scroll;
  transition: 0.2s;
}

.popup_detail_image_textarea:hover{
  border: 1px solid rgba(234, 234, 234, 0.7);
  background-color: #131d21;
}
.popup_detail_image_buttons {
  display: flex;
  flex-direction: row;   /* horizontal alignment */
  justify-content: flex-start; /* or center, or space-between if you want spacing */
  align-items: center;   /* align buttons vertically */
  gap: 10px;             /* spacing between buttons */
  margin-top: 10px;      /* optional: spacing from content above */
  float:right;
}

.popup_overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
}

.popup-new-course input {
  margin-top: 10px;
  padding: 5px;
  width: calc(100% - 20px);
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #1d2c33;
  color: #eee;
  font-size: 14px;
}

.original-button, .original-button-delete, .original-button-close {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color: #eee;
  font-size: 18px;
  border-radius: 5px;
  margin-top: 14px;
  width: 140px;
  height: 30px;
  border: 1px solid #333333;
  position: relative;
  transition: 0.3s;
  background-color: #3cc9ab;
  margin-bottom: 20px;
}

.original-button:hover {
  background-color: #0a593b;
}
.original-button-delete{
  background-color: #94312e;
  transition: 0.3s;
}
.original-button-delete:hover{
  background-color: #360403;
}
.original-button-close {
  background: transparent;
  color: rgba(109, 119, 131, 1);
  border: 1px solid rgba(109, 119, 131, 1);
  transition: 0.3s;
}
.original-button-close:hover {
  color: rgba(171, 210, 214, 1);
  border: 1px solid rgba(171, 210, 214, 0.8);
}
.original-button::before {
  transform: translateY(-50%) rotate(30deg);
}

.original-button::after {
  transform: translateY(-50%) rotate(-30deg);
}

.original-button:hover::before {
  transform: translate(5px, -50%) rotate(30deg);
}

.original-button:hover::after {
  transform: translate(5px, -50%) rotate(-30deg);
}

.btn_cyan{
  background: linear-gradient(100deg, rgb(25, 85, 80) 0%, rgb(13, 54, 50) 70%);
  border: 1px solid rgba(31, 120, 117,0.6);
  color: rgb(194, 194, 194);
    cursor: pointer;
    transition: 0.3s;
}
.btn_cyan:hover{
    background: rgb(1, 33, 28) none repeat scroll 0% 0% / auto padding-box border-box;
    border-color: rgb(105, 131, 135);
    border-style: solid;
    color: rgb(214, 244, 244);
}
.auth_btn{
  border-radius: 20px;
  padding-bottom:6px;
  padding-top:6px;
  background: linear-gradient(100deg, rgb(16, 79, 65,0.6) 0%, rgb(9, 97, 73,0.5) 70%);
  color: rgb(194, 194, 194);
  border: 1px solid rgba(9, 156, 132,0.8);
  margin-left: 6px;
}
.auth_btn:hover {
  border: 1px solid rgb(232, 186, 51);
  color: rgb(232, 186, 51);
}
.btn_green_teal{
  background: linear-gradient(140deg, rgba(27, 89, 79,0.9) 20%, rgba(25, 74, 65,0.8) 60%);
  /*background: linear-gradient(100deg, rgb(23,84,75,0.9) 20%, rgb(30 ,90 ,81,0.8) 60%);*/
  border: 1px solid rgb(99, 191 ,176 ,0.7);
  color: rgb(194, 194, 194);
    cursor: pointer;
    transition: 0.3s;
}
.btn_green_teal:hover{
      background: linear-gradient(140deg, rgba(10, 78, 58,1) 0%, rgba(8, 43, 52,0.8) 40%);
    border-color: rgb(252, 236, 130);
    border-style: solid;
    color: rgb(252, 236, 130);
    text-shadow: 0 0 1px rgba(252, 206, 50, 0.45), 0 0 2px rgba(242, 236, 110, 0.35);
    box-shadow: 0 0 3px rgba(252, 206, 50, 0.65), 0 0 3px rgba(242, 236, 110, 0.65);
}
.btn_cyan_teal{
  background: linear-gradient(100deg, rgb(23,74,85,0.9) 20%, rgb(30 ,80 ,91,0.8) 60%);
  border: 1px solid rgba(9, 156, 132,0.8);
  color: rgb(174, 194, 194);
    cursor: pointer;
    transition: 0.3s;
}
.btn_cyan_teal:hover{
      background: linear-gradient(140deg, rgba(10, 38, 48,1) 0%, rgba(8, 33, 42,0.8) 40%);
    border-color: rgb(152, 216, 230);
    border-style: solid;
    color: rgba(212, 236, 240,0.65)!important;
    text-shadow: 0 0 1px rgba(50, 206, 245, 0.45), 0 0 2px rgba(110, 236, 242, 0.35);
    box-shadow: 0 0 2px rgba(50, 206, 245, 0.65), 0 0 1px rgba(110, 236, 242, 0.65);
}
.btn_green_light{
  background: linear-gradient(100deg, rgba(27, 89, 79,0.9) 20%, rgba(15, 74, 65,0.7) 60%);
  background: linear-gradient(100deg, rgb(23, 88, 53,0.9) 20%, rgb(30, 90, 69,0.8) 60%);
  border: 1px solid rgba(9, 156, 132,0.8);
  color: rgb(194, 194, 194);
    cursor: pointer;
    transition: 0.3s;
}
.btn_green_light:hover{
      background: linear-gradient(100deg, rgba(10, 48, 31,1) 0%, rgba(8, 33, 30,0.8) 40%);
    border-color: rgb(186, 247, 208);
    border-style: solid;
    color: rgb(186, 247, 208);
}
.ai_format_node_button{
  background: linear-gradient(100deg, rgb(150, 83, 104) 0%, rgb(94, 57, 69) 70%);
  border: 1px solid rgb(79, 67, 73);
  color: rgb(194, 194, 194);
    cursor: pointer;
    transition: 0.3s;
}
.ai_format_node_button:hover{
    background: rgb(71, 27, 41) none repeat scroll 0% 0% / auto padding-box border-box;
    border-color: rgb(102, 29, 52);
    border-style: solid;
    color: rgb(214, 244, 244);
}
.generate_qcm_node_button{
  background: linear-gradient(100deg, rgb(138, 150, 83) 0%, rgb(84, 94, 57) 70%);
  border: 1px solid rgb(122, 128, 102);
  color: rgb(194, 194, 194);
    cursor: pointer;
    transition: 0.3s;
}
.generate_qcm_node_button:hover{
    background: rgb(54, 51, 12) none repeat scroll 0% 0% / auto padding-box border-box;
    border-color: rgb(119, 122, 31);
    border-style: solid;
    color: rgb(214, 244, 244);
}

.btn_brightcyan{
  background: linear-gradient(100deg, rgb(18, 107, 117) 0%, rgb(2, 39, 43) 70%);
  border: 1px solid rgb(96, 163, 171);
  color: rgb(224, 225, 224);
    cursor: pointer;
    transition: 0.3s;
}
.btn_brightcyan:hover{
      background: linear-gradient(155deg, rgb(10, 72, 103) 0%, rgb(0, 27, 24) 70%);
    border-color: rgb(181, 159, 159);
    border-style: solid;
    color: rgb(234, 244, 244);
}
.btn_brightcyan2{
  background: linear-gradient(100deg, rgb(11, 138, 133) 0%, rgb(0, 79, 71) 70%);
  border: 1px solid rgb(96, 163, 171);
  color: rgb(224, 225, 224);
    cursor: pointer;
    transition: 0.3s;
}
.btn_brightcyan2:hover{
      background: linear-gradient(165deg, rgb(7, 179, 179) 0%, rgb(0, 77, 70) 70%);
    border-color: rgb(133, 243, 255);
    border-style: solid;
    color: rgb(234, 244, 244);
}
#qcm_sub_tabE .thumbnail_scroll_wrapper {
  padding:15px;
}
#generated_qcm_sub_tabE .thumbnail_scroll_wrapper {
  padding: 15px;
}
#qcm_sub_tabE {
  background-color: #1d2c33;
  color: #ffffff;
  overflow-y: scroll;
  transition: 0.2s;
}
#generated_qcm_sub_tabE {
  background-color: #1d2c33;
  color: #ffffff;
  overflow-y: scroll;
  transition: 0.2s;
}
#qcm_sub_tabE .question-block {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  border-color: rgb(111, 199, 209);
  background: linear-gradient(140deg, rgb(13, 41, 35,0.25) 0%, rgb(4, 18, 17,0.25) 70%);
  transition:0.4s;
  margin-bottom: 20px;
}
#qcm_sub_tabE .question-block:hover {
  background: linear-gradient(140deg, rgb(13, 41, 35,0.9) 0%, rgb(4, 18, 17,0.9) 70%);
  border-color: rgb(77, 158, 147);
}

#qcm_sub_tabE .question {
  margin-bottom: 10px;
  font-size:14px;
  color: #ebf2f0;
    font-size: 1.05em;
    background-color:rgba(27, 143, 168,0.3);
    border: 1px solid rgba(206, 213, 221,0.4);
    padding:6px 6px;
    border-radius: 8px;
}

#generated_qcm_sub_tabE .question-block {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  border-color: rgb(111, 199, 209);
  background: linear-gradient(140deg, rgb(13, 41, 35,0.25) 0%, rgb(4, 18, 17,0.25) 70%);
  transition: 0.4s;
  margin-bottom: 20px;
}
#generated_qcm_sub_tabE .question-block:hover {
  background: linear-gradient(140deg, rgb(13, 41, 35,0.9) 0%, rgb(4, 18, 17,0.9) 70%);
  border-color: rgb(77, 158, 147);
}

#generated_qcm_sub_tabE .question {
  margin-bottom: 10px;
  font-size: 14px;
  color: #ebf2f0;
  font-size: 1.05em;
  background-color: rgba(27, 143, 168,0.3);
  border: 1px solid rgba(206, 213, 221,0.4);
  padding: 6px 6px;
  border-radius: 8px;
  max-height: 150px;
  overflow: hidden
}

#qcm_sub_tabE .explanation {
  font-size: 0.9em;
  color: #ddd;
  border: 1px solid rgba(206, 223, 211,0.1);
  background-color:rgba(28, 158, 135,0.3);
  border-color: rgb(111, 199, 209);
  padding:6px 6px;
  border-radius: 8px;
  max-height: 100px;
  overflow: hidden
}
#generated_qcm_sub_tabE .explanation {
  font-size: 0.9em;
  color: #ddd;
  border: 1px solid rgba(206, 223, 211,0.1);
  background-color: rgba(28, 158, 135,0.3);
  border-color: rgb(111, 199, 209);
  padding: 6px 6px;
  border-radius: 8px;
}

#qcm_sub_tabE .question p,
#qcm_sub_tabE .explanation P{
  margin:6px 0px;
  padding:0px;
}
#qcm_sub_tabE .choices {
  list-style-type: circle;
  padding-left: 25px;
  margin-bottom: 10px;
  color: #97b8af;
  color: #aed4c9;
}
#generated_qcm_sub_tabE .choices {
  list-style-type: circle;
  padding-left: 25px;
  margin-bottom: 10px;
  color: #97b8af;
  color: #aed4c9;
}

#qcm_sub_tabE .choices li {
  margin: 4px 0;
  transition: 0.3s;
}
#generated_qcm_sub_tabE .choices li {
  margin: 4px 0;
  transition: 0.3s;
}
#qcm_sub_tabE .choices li:hover{
    color: #e6f0ee;
}
#generated_qcm_sub_tabE .choices li:hover{
  color: #e6f0ee;
}

#qcm_sub_tabE .answer {
  color: #0cc798;
  margin-top: 10px;
  transition: 0.4s;
}
#generated_qcm_sub_tabE .answer {
  color: #0cc798;
  margin-top: 10px;
  transition: 0.4s;
}
#qcm_sub_tabE .answer:hover{
  color: #0af5ca;
}
#generated_qcm_sub_tabE .answer:hover{
  color: #0af5ca;
}

#qcm_sub_tabE .difficulty {
  font-size: 0.9em;
  color: #899;
  padding:6px 6px;
  border-radius: 8px;
}
#generated_qcm_sub_tabE .difficulty {
  font-size: 0.9em;
  color: #899;
  padding: 6px 6px;
  border-radius: 8px;
}
#qcm_sub_tabE .qcm_code {
  font-size: 0.9em;
  color: #899;
  background-color:rgba(9, 36, 31,0.8);
  padding:6px 6px;
  border-radius: 8px;
}
#generated_qcm_sub_tabE .qcm_code {
  font-size: 0.9em;
  color: #899;
  background-color: rgba(9, 36, 31,0.8);
  padding: 6px 6px;
  border-radius: 8px;
}
#qcm_sub_tabE button{
  float:right;
  margin-top:-35px;
}
#generated_qcm_sub_tabE button{
  float: right;
  margin-top: -35px;
}

.branch_viewE {
  display: none;
  flex-direction: column;
  height: 70vh;
  border: 1px solid rgba(204, 204, 204, 0.7);
  padding: 0;
  font-family: monospace;
  color: #ffffff;
  overflow-y: auto;
  transition: 0.2s;
  border-radius: 12px;
  background: linear-gradient(140deg, rgb(19, 30, 42,0.65) 0%, rgb(11, 20, 35,0.65) 70%);
}

.branch_viewE_wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}
.tree-item {
  background: linear-gradient(140deg, rgb(13, 41, 35,0.25) 0%, rgb(4, 18, 17,0.25) 70%);
  border: 1px solid rgb(127, 198, 197,0.7);
  padding: 6px 10px;
  margin: 2px 0;
  border-radius: 4px;
  cursor: pointer;
  width: fit-content;
  transition:border 0.3s, color:0.3s;
  color:#ddd;
  user-select: none;
  transition:  0.4s;
  width:100%;
  box-sizing: border-box;

}
.tree-item:hover{
  border: 1px solid rgba(119, 115, 230,1);
  background:linear-gradient(140deg, rgb(5, 138, 148,0.95) 0%, rgb(10, 126, 136,0.95) 70%);
  color:#fff;
    background:linear-gradient(140deg, rgb(5, 48, 48,0.75) 0%, rgb(10, 36, 36,0.75) 70%);
}
.tree-item-hovered {
  border: 1px solid rgba(119, 115, 230, 1);
  background: linear-gradient(140deg, rgb(5, 48, 48, 0.75) 0%, rgb(10, 36, 36, 0.75) 70%);
  color: #fff;
}
.tree-item-selected{
  background:linear-gradient(140deg, rgb(3, 61, 61) 0%, rgb(0, 28, 26) 70%);
  border: 1px solid rgba(130, 255, 234,1);
  color:#ffffff!important;
    background:linear-gradient(180deg, rgb(5, 68, 68) 20%, rgb(4, 15, 38) 70%);
    border: 1px solid rgba(198, 186, 247,1);
}
#branch_viewE .tree-item{
  width:88%;
}

.btn_all{
  background: transparent;
  border: 1px solid rgb(96, 163, 171);
  color: rgb(224, 225, 224);
    cursor: pointer;
    float:right;
    margin-left:auto;
    margin-right:15px;
    margin-top:10px;
    font-size: 12px;
    padding: 6px 14px;
    transition: 0.4s;
    border-radius: 5px;
}
.btn_all_active{
  background: transparent;
  border: 1px solid rgb(96, 163, 171);
  color: rgb(224, 225, 224);
    cursor: pointer;
    float:right;
    margin-left:auto;
    margin-right:15px;
    margin-top:10px;
    font-size: 12px;
    padding: 6px 14px;
    transition: 0.4s;
          background: linear-gradient(140deg, rgba(13, 115, 103,0.7) 0%, rgba(4, 69, 57,0.7) 70%);
        border-color: rgb(111, 199, 209);
        color: rgb(244, 244, 244);
        border-radius: 5px;
}
.btn_cyan3{
  background: linear-gradient(100deg, rgb(25, 85, 80) 0%, rgb(13, 54, 50) 70%);
  border: 1px solid rgb(54, 89, 81);
  color: rgb(194, 194, 194);
  margin-right: 15px;
  float:right;
    cursor: pointer;
    margin-top:15px;
    transition: 0.4s;
  border-radius: 5px;
  transition: 0.3s;
}
.btn_cyan3:hover{
    background: linear-gradient(100deg, rgb(0, 128, 115) 0%, rgb(5, 69, 69) 70%);
    border-color: rgb(84, 227, 200);
    border-style: solid;
    color: rgb(214, 244, 244);
}



.node_id_fixation_qcm_and_children{
  background-color: #dfffe2;
  border-color: #32c69a;
}

.nagivation_top{
  height: 60px;
  background-color: #0c1314;
  font-family: Arial, sans-serif;
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 0 10px;

  border-radius: 8px;
  border-top: 1px solid rgba(35, 162, 173,0.4);
  border-bottom: 1px solid rgba(35, 162, 173,0.4);
  border: 1px inset rgba(35, 162, 173,0.4);
  gap:8px;
}
.nagivation_bottom{
  border-radius: 8px;
  border-top: 1px solid rgba(35, 162, 173,0.4);
  border-bottom: 1px solid rgba(35, 162, 173,0.4);
  border: 1px outset rgba(35, 162, 173,0.4);
  gap:8px;
}
.popup_modify_qcm input[type="text"],
.popup_modif_vuln input[type="text"]{
  min-height:36px;
}
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #1d2c33; /* fallback for modern browsers */
  transition: 0.2s;
  background-color: rgba(185, 88, 88,1);
    border: 1px solid rgba(234, 234, 234, 0.7);
    border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
}

/* Hover state */
input[type="checkbox"]:hover {
  accent-color: #4CAF50; /* green on hover */
  border-color: rgb(0, 145, 109);
  /*background-color: rgba(151, 191, 176,0.8);*/
}

/* Checked state */
input[type="checkbox"]:checked {
  accent-color: #4CAF50; /* green when checked */
  background-color: #014d38;
  background-color: #088b47;
  background-color: #007d5f;
  transition: 0.3s;
}
input[type="checkbox"]:checked:hover {
  accent-color: #4CAF50; /* green when checked */
  border-color: #e3463b;
  /* background-color: rgba(173, 143, 136,0.8);*/
}
/* optional: white checkmark when checked */
input[type="checkbox"]:checked::after {
  font-size: 12px;
}
input[type="checkbox"]:disabled {
  cursor:default;
  accent-color: rgb(226, 231, 229);   /* muted color */
  background-color:rgb(166, 68, 68);
  opacity: 0.8;
}
input[type="checkbox"]:disabled:checked {
  accent-color: rgb(0, 145, 109);
  background-color: rgb(0, 145, 109);
  opacity: 0.6;
}
input[type="checkbox"]:disabled:checked:hover {
  border: 1px solid rgba(234, 234, 234, 0.7);
}
.branch_viewE input[type="checkbox"]{
  appearance: auto;
  -webkit-appearance: auto;
}
#markdown_color{
  display: none;
}
.popup_vuln_qcm_code_item{
  padding: 6px;
  background-color: #1b2b28;
    border: 1px solid rgba(124, 124,124, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.35;
}
.popup_vuln_qcm_code_item:hover{
  border: 1px solid rgba(254, 124,124, 0.7);
}
.globalAdvice {
  position: absolute;
  z-index: 99999;
  padding: 8px 14px;
  background: rgba(3,10,8,0.95);
  border: 1px solid rgba(102, 250, 230, 0.7);
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  max-width: 250px;
  line-height: 16px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 1.5s ease,
    transform 0.8s ease;
}
.globalAdvice.show {
  opacity: 1;
  transform: translateY(0);
}


.globalTooltip {
  position: fixed;
  z-index: 99999;
  padding: 8px 14px;
  background: rgba(3,10,10,0.95);
  border: 1px solid rgba(182, 250, 232, 0.7);
  color: rgb(255,255,255);
  border-radius: 8px;
  font-size: 16px;
  max-width: 250px;
  line-height: 16px;
  pointer-events: none;
  opacity: 0;                 /* start invisible */
  transition: opacity 0.35s ease;   /* fade in & fade out */
  white-space: normal;
  word-wrap: break-word;
}

.globalTooltip.show {
  opacity: 1;                 /* fade in target */
}
.larger_select{
  font-weight: 500;
  font-size: 16px;
  font-weight: 16px;
}

#popup_publish{
  left:65%;
}
#popup_generate_qcm{
  left:70%;
    top:50%;
}
#popup_upload_publish_qcm{
  top:60%;
    left:73%;
}
#popup_modify_qcm{
  height: 80vh;
  width:auto;
  overflow: auto;
}
#popup_modify_qcm textarea{
  border-radius: 8px;
  padding: 8px;
}
.buttons_bottom_right{
  float:right;
}


.anim_order_info {
  font-family: "Cascadia Mono";
  border: 1px inset rgba(182, 182, 182,0.6);
  font-size: 14px;
  color: rgb(255, 255, 255);
  padding: 8px;
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
  border-radius: 36px;
  background: linear-gradient(150deg, rgba(43, 64, 66,0.8) 30%, rgba(83, 81, 80,0.5) 70%);
  font-weight: 350;
  --hover-width: 195px;
  --hover-borderSize: 1;
  --hover-borderc: #3cc9ab;
  --hover-color: #ffffff;
  --hover-bgc: rgb(25, 82, 85);
}
#animations_menu .anim_order_info{
  padding: 2px 6px;
  border-radius: 16px;
  border: 1px inset rgba(182, 182, 182,0.3);
  background: linear-gradient(150deg, rgba(43, 64, 66,0.4) 30%, rgba(83, 81, 80,0.2) 70%);
}

/* CIA impact bars (scoped to vulnerabilities table) */
.cia_cell {
  min-width: 150px;
  padding: 0.2em 0.2em 0.2em 0.4em;
}
.cia_bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.2;
}
.cia_bar:last-child {
  margin-bottom: 0;
}
.cia_label {
  width: 18px;
  text-align: right;
  font-weight: 500;
  color: #e6e6e6;
}
.cia_track {
  flex: 0 0 75%;
  max-width: 75%;
  height: 14px;
  border-radius: 10px;
  background: rgba(255, 155, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  position: relative;
}
.cia_fill  {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 11px;
  font-weight: 500;
}
.cia_value  {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 500;
  color: #f5f7ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Value profile bars (1-5 scale, dark teal fill) */
.value_profile_bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.2;
}
.value_profile_bar:last-child {
  margin-bottom: 0;
}
.value_profile_label {
  text-align: right;
  font-weight: 500;
  color: #e6e6e6;
}
.value_profile_track {
  flex: 0 0 75%;
  max-width: 75%;
  height: 14px;
  border-radius: 10px;
  background: rgba(255, 155, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  position: relative;
}
.value_profile_fill {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 11px;
  font-weight: 500;
}
.value_profile_value {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 500;
  color: #f5f7ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.popup_av_qcm_codes_buttons{
  margin-top: 12px;
  float:right;
  gap:8px;
  display:flex;
}

.wrapper_with_colours {
  /* Fixed height for the bar */
  color: #ffffff;
  font-family: "Verdana", Monaco, monospace;
  font-size: 14px;
  line-height: 1.5;
  align-items: center;
  background: linear-gradient(130deg, rgb(13, 48, 40) 50%, rgb(39, 74, 69) 70%);
  border: 1px solid rgba(111, 189, 178, 0.5);
  padding: 6px;
}

.connection_hash_input {
  color: rgb(175, 255, 235,0.6);
  margin-top: 12px;
  background: rgb(2,71,74) none repeat scroll 0% 0% / auto padding-box border-box;
  border-color: rgba(143,243,225,0.4);
  border-radius: 12px;
  padding:4px;
  width:250px;
  font-size: 14px;
}

.monkey-info-bar.monkey_udpate_anim2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(44px, auto);
  gap:6px 8px;
  height: auto;
  min-height: 64px;
  align-items: stretch;
    position: inherit;
}
.monkey_udpate_anim2 .btn,
.monkey_udpate_anim2 #markdown_color {
  padding: 6px 8px;
  margin: 0;
  font-size: 14px;
  text-align: center;
}
.padding_buttons{
  padding:12px;
  border-radius: 12px;
}

#popup_modify_qcm_code_md,
#popup_modify_qcm_code{
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid rgba(204, 204, 204, 0.7);
  color: rgba(204, 204, 204, 0.85);
  font-size: 16px;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  width:80%;
}
#popup_modify_qcm span{
  font-size: 16px;
  color: rgba(234, 204, 74, 0.85);
  font-weight: 500;
  font-family: "Lucida Console", Monaco, monospace;
  text-shadow: 0 0 1px rgba(234, 247, 90, 0.4), 0 0 2px rgba(214, 247, 40, 0.25);
}

#popup_modify_qcm_md{
  display: none;
}

.popup_modify_qcm_textarea_thin{
  height:35px;
  max-width:400px;
}
.popup_modify_qcm_choice{
    min-height:30px;
    height:auto;
    max-width:520px;
}
#popup_modify_qcm_choiceA,
#popup_modify_qcm_choiceB,
#popup_modify_qcm_choiceC,
#popup_modify_qcm_choiceD,
#popup_modify_qcm_choiceA_md,
#popup_modify_qcm_choiceB_md,
#popup_modify_qcm_choiceC_md,
#popup_modify_qcm_choiceD_md{
    min-height:25px;
    height:auto;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #ddd !important;
  caret-color: #ddd;
  transition: #131d21 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px #1d2c33 inset !important;
}
.width_80{
  width:80%;
}
.width_100{
  width:80%;
}
.input_styled{
  padding: 6px 12px;
}

/* ── Table skeleton shimmer ──────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.tr-skeleton td {
  background: linear-gradient(
    90deg,
    #1d2c33 25%,
    #2a3f47 50%,
    #1d2c33 75%
  );
  background-size: 1200px 100%;
  animation: shimmer 1.5s infinite linear;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

/* ── Table row entry animation ───────────────────────────────────── */
@keyframes rowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.tr-enter {
  opacity: 0;
  animation: rowIn 0.22s ease both;
  animation-delay: var(--row-delay, 0ms);
}