:root {
    --TOPBARHEIGHT: 18px;
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-image: url('images/bg3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

h2,
h3,
strong {
    margin: 0px;
    padding: 0px;
    color: #333;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 18px;
}

hr {
    margin: 3px;
}

.warning {
    color: red;
    font-weight: 600;
    font-size: 10pt;
}

strong {
    color: #333;
}

small {
    color: #791616;
    font-size: 12px;
}

#top,
#bottom {

    padding: 0px;
    text-align: center;
    position: absolute;
    width: 100%;
    z-index: 0;
    background-color: rgba(200, 200, 228, 0.35);
}

#top {
    top: 0;
}

#top_container {
    display: grid;
    width: 100%;
    grid-template-columns: 310px auto 50px 50px 50px 50px 50px 35px 35px 35px 35px 35px 35px;
    text-align: left;

    z-index: 0;
}

#bottom {
    height: 40px;
    bottom: 0;
    font-size: 10pt;
}

#bottom_container {
    display: grid;
    width: 100%;
    height: 40px;

    grid-template-columns: auto 400px;
    text-align: left;
    padding-top: 0px;
    padding-left: 10px;

    z-index: 0;
}

#main {
    position: absolute;
    top: 45px;
    bottom: 40px;
    width: 100%;
    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.movable-div {
    background-color: #fff;
    background-color: rgba(200, 200, 228, 0.75);
    border: 1px solid darkgray;
    padding: 0px;
    width: 150px;
    height: 100px;
    position: absolute;
    resize: both;
    z-index: 1;
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
}

.header {
    cursor: move;
    background-image: linear-gradient(45deg, rgb(90, 155, 215) 0%, rgb(180, 210, 235) 50%, rgb(90, 155, 215) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: repeat-x;
    color: darkblue;
    font-weight: 600;
    padding-top: 0px;
    padding-right: 0px;
    margin-bottom: 0px;
    text-align: left;
    height: var(--TOPBARHEIGHT);
    font-size: 12px;
    border-radius: 10px 10px 0px 0px;
    display: grid;
    grid-template-columns: 10px auto 20px;
}


.movable-div.resizing {
    user-select: none;
}

.movable-div .resize-handle {
    position: absolute;
    z-index: 2;
}

.movable-div .resize-handle.top,
.movable-div .resize-handle.bottom {
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
}

.movable-div .resize-handle.top {
    top: -3px;
}

.movable-div .resize-handle.bottom {
    bottom: -3px;
}

.movable-div .resize-handle.left,
.movable-div .resize-handle.right {
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
}

.movable-div .resize-handle.left {
    left: -3px;
}

.movable-div .resize-handle.right {
    right: -3px;
}




/* Tooltip container */
.tooltip {

    display: inline-block;
    border-bottom: 1px dotted black;
    /* Add dots under the hoverable text */
    cursor: pointer;
}

/* Tooltip text */

.tooltiptext {
    display: none;
    position: absolute;
    width: 400px;
    background: rgb(240, 240, 255);
    color: black;
    padding: 10px;
    border-radius: 6px;
    border: 2px solid blue;
    z-index: 9999;
}


.unselectable {
    user-select: none;
    /* For modern browsers */
    -webkit-user-select: none;
    /* For Safari */
    -moz-user-select: none;
    /* For Firefox */
    -ms-user-select: none;
    /* For Internet Explorer/Edge */
}

.about-content {
 
    height: calc(100% - var(--TOPBARHEIGHT) - 23px);
    background: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0px;

    overflow: auto;
}




ul {
    list-style: none;
    padding: 0px;
    margin-top: 0px;
    background-color: white;
    color: #A20707;
    font-weight: bold;

}

li {
    cursor: pointer;
    text-decoration: none;
    color: #333;
    display: block;
    word-wrap: break-word;
    margin: 0px;
    padding: 5px;
    background-color: white;
    font-size: 10pt;
    font-weight: normal;
    border-bottom: 1px solid lightgrey;

}

li:hover {
    background-color: #A20707;

    color: white;
}

li.selected {
    background-color: salmon;

    color: white;
    cursor: pointer;
}


li.notselectable {
    background-color: white;
    cursor: auto;
    font-size: 12pt;
}

li.notselectable:hover {
    color: black;
}


input[type="checkbox"] {
    cursor: pointer;
}

.checkboxLabel {
    font-size: 12px;
    color: black;
}


#searchInput {
    border: 1px solid #ccc;
    border-radius: 5pt;
    font-family: monospace;
    padding-left: 5px;
    min-height: 20pt;
    width: 280px;
}




/* network visusalization*/

#visualization {
    flex-grow: 1;
    overflow: hidden;
    background-color: white;
    height: 100%;
    width: 100%;
}

#network {
    flex-grow: 1;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;

    background-color: white;
    overflow: hidden;
}


#info_body {
    display: grid;
    grid-template-columns: 50% 50%;
}

#archetype_info {
    background-color: white;
    height: calc(100% - var(--TOPBARHEIGHT));
    overflow: auto;
}

#info_header,
#info_additional,
#info_body {
    margin: 10px;
}

#checklist {
    background-color: white;
    height: calc(100% - var(--TOPBARHEIGHT));
    overflow-y: auto;
    overflow-x: hidden;
}

#checklistView {
    margin: 10px;
}

.checklist_section {
    border: 1px solid lightgray;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 5px;
    background-color: rgb(240, 240, 255);
    box-sizing: border-box;
    font-size: 14px;
}



.checklist_section_label {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
}



#checklistEditor {
    display: grid;
    grid-template-rows: 30px auto;
    background-color: white;
    width: 100%;
    height: 100%;
    overflow: hidden;

}

#checklistSectionButton {
    padding: 10px;
}


#checklistSections {
    height: calc(100% - var(--TOPBARHEIGHT) - 20px);
    overflow: auto;
    padding: 10px;
}



.section, section {
    border: 1px solid lightgray;
    width: calc(100% - 45px);
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 5px;
    background-color: rgb(240, 240, 255);
    box-sizing: border-box;

}

.element {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    width: 100%;

}

.element_container{
    display:grid;
    grid-template-columns: 30px auto 15px;
    text-align: center;
    width:100%;
    background-color:rgb(250,245,250);
    border:1px solid lightgray;
    border-radius:5px;
    padding:5px;
    margin:3px;

}

.element_input_description_container{
    display:grid;
    grid-template-rows: auto auto;

    max-width:100%;
}

.element_input_container{


    display:grid;
    grid-template-columns: auto 350px 30px 40px;
    vertical-align: center;
    gap:3px;
    width:100%;

}

.element_description{
    border-radius:3px;
    margin-top:3px;
    width:calc(100% - 10px);
    resize: vertical;
}




#project_info {
    height: calc(100% - var(--TOPBARHEIGHT));
    overflow: auto;
    background-color: rgb(240, 240, 255);
}

label {
    font-size: 12px;
    margin-left: 10px;
}

#project_name {
    width: calc(100% - 75px);
    font-size: 16px;
    margin-left: 10px;
    border-radius:7px;
    padding:5px;
}

#project_description {
    width: calc(100% - 65px);
    height: 120px;
    margin-left: 10px;
    resize: none;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border-radius:7px;
    padding:5px;
}

#project_author,
#project_contact,
#project_copyright {
    width: calc(100% - 75px);
    margin-left: 10px;
    border-radius:7px;
    padding:5px;
}

#main_view_project_name {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 8px;
    margin: 0px;
    user-select: none;
    /* No text wrapping */
    white-space: nowrap;

    /* For modern browsers */
    -webkit-user-select: none;
    /* For Safari */
    -moz-user-select: none;
    /* For Firefox */
    -ms-user-select: none;
    /* For Internet Explorer/Edge */
}

#select_vis_view {
    position: absolute;
    top: calc(5px + var(--TOPBARHEIGHT));
    right: 10px;
    background-color: rgb(240, 240, 255);
    z-index: 2;
}

#collection_list {
    height: calc(100% - var(--TOPBARHEIGHT));
    overflow: auto;
    background-color: white;
}

#new_archetype_editor {
    background-color: rgb(240, 240, 255);
    height: calc(100% - var(--TOPBARHEIGHT));
    overflow: auto;
    overflow-x: hidden;
}

#new_archetype_concept_name,
#new_archetype_keywords,
#new_archetype_id{
    width: calc(100% - 35px);
    margin-left: 10px;
    border-radius:7px;
    padding: 5px;
}


#new_archetype_class {
    width: calc(100% - 30px);
    margin-left: 10px;
    border-radius:7px;
    padding: 5px;
}

#new_archetype_purpose {
    width: calc(100% - 30px);
    height: 120px;
    margin-left: 10px;
    resize: none;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border-radius:7px;
    padding: 5px;
}

#assigned_elements_container,
#new_archetype_inclusions_container {
    margin-right: 20px;
    border-radius: 5px;
    margin-left: 10px;
    
    background-color: white;

}

#assigned_elements_container{
        height: 160px;
    overflow: auto;
}

#assigned_elements_container li {
    font-size: 12px;
    border: 1px solid lightgrey;
}

#new_archetype_inclusions_container {
 
    display: flex;
    align-items: center;
    width: 470px;
    gap: 5px;
    background-color: rgb(240, 240, 255);
    margin-bottom: 5px;
  
}

#new_archetype_inclusion_btn{
    height:30px;
    border-radius: 7px;
}

#new_archetype_listArchetypes {

    width: 380px;
    border-radius:7px;
    padding: 5px;

}

#new_archetype_inclusions {
    margin-left: 10px;
    margin-right: 20px;
    border-radius: 7px;
    border: 1px solid lightgrey;
    background-color: white;
    height: 140px;
    overflow: auto;

}

#new_archetype_inclusions_ul {
    width: calc(100% - 10px);
    border-radius:7px;
    padding: 5px;
}

#new_archetype_inclusions_ul li {
    font-size: 12px;
}

#existing_sidebar_list {
    height: calc(100% - var(--TOPBARHEIGHT));
    overflow: auto;
}

#existing_list {
    display: flex;
    height: calc(100% - 145px);
    width: calc(100% - 0px);
    justify-content: center;
    /* This centers content horizontally */

    background-color: white;
    /*border: 4px solid hotpink;*/
}

#archetype_list {
    height: 100%;
    overflow: auto;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    background-color: white;
    ;
}

#archetype_list li {
    font-size: 14px;
    font-weight: 600;
    padding-left: 15px;
}

#filter_section {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    margin-bottom: 10px;
    justify-content: left;
    /* This centers content horizontally */
}

#searchbar_section {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: left;
    /* This centers content horizontally */
    margin: 10px;
    gap: 5px;
}

#searchInput {
    width: 70%;
    font-size: 16px;
}

#N_of_N_found_sidebar {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 14px;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.75);
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
}

#N_of_N_found {
    font-weight: 600;
}


#search_history_content {
    height: 100%;
}

#search_history_list {
    height: 100%;
    width: calc(100% - 45px);
    overflow: auto;
}

.texthighlight {
    color: black;
    font-weight: 600;
    background-color: yellow;
    border-radius: 3px;
}




#glossaryContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: calc(100% - var(--TOPBARHEIGHT));
}

#glossary_mainPanel {
    padding: 32px;
    overflow-y: auto;
    height: calc(100% - 64px);
    width: calc(100% - 250px);
    background-color: rgb(240, 240, 255);
}

.glossary_sidebar {
    width: 250px;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    height: 100%;
}


.glossary_search_bar {
    padding: 5px;
    border-bottom: 1px solid #ddd;
    background: #fff;
    width: 100%;
    height: 115px;
}

.glossary_search_bar input[type="text"] {
    width: calc(100% - 25px);
    padding: 5px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 4px;
}



.search-options {
    font-size: 0.98em;
    color: #444;
    margin-bottom: 4px;
    width: 100%;
}

.search-options label {
    margin-right: 12px;
    cursor: pointer;
}

.glossary_entry_section {
    width: 100%;
    height: calc(100% - 110px - var(--TOPBARHEIGHT));
    overflow-y: auto;
}


.glossary_entry_list li {
    padding-left: 16px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}


.glossary_entry_list li.active,
.glossary_entry_list li:hover {
    background: #0080ff;
    color: white;
}

.class-title {
    font-size: 1.3em;
    margin-bottom: 8px;
    font-weight: 600;
}

.class-desc {
    margin-bottom: 16px;
    color: #444;
}

.class-inherit {
    font-style: italic;
    color: #444444;
    margin-bottom: 16px;
}

.class-url {
    margin-bottom: 24px;
}

.attributes-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.attributes-table th,
.attributes-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

.attributes-table th {
    background: #f0f0f0;
}


/* TEMPLATE PLANNER STYLES*/
.archetypeTree-node {
    margin-left: 20px;
    border-left: 1px dotted black;
    padding-left: 8px;
}

.node-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 5px;
    background-color: #eee;
    border-radius: 5px;
    padding: 2px;
    padding-top: 7px;
    padding-bottom: 7px;
    width:930px;
}

.node-controls input[type="text"], .checklisttextinput_element, .checklisttextinput_section {
    width: 180px;
    padding: 4px;
    border-radius: 7px;
    border: 1px solid darkgray;
}

.checklisttextinput_section {
    font-size: 14px;
    font-weight: 600;
}


.node-controls select, .mySelect, .mySelectTeePlan, .mySelectTeePlanAtcode {
    min-width: 90px;
    padding: 4px;
    border-radius: 7px;
    border: 1px solid darkgray;
}

.mySelect{
    width: 320px;
}

.mySelectTeePlan {
    width: 140px;

}

.mySelectTeePlanAtcode {
    width: 140px;

}



.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 2px;
}

.icon-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.uid-label {
    color: #888;
    font-size: 0.8em;
    margin-left: 8px;
}

.compatibility-warning {
    color: red;
    font-size: 0.8em;
    margin-left: 8px;
}

.archetype-class {
    color: #555;
    font-size: 0.8em;
    margin-left: 8px;
}



#template_planner {

    width: calc(100% - 15px);
    height: calc(100% - var(--TOPBARHEIGHT)- 15px);
    margin-top: 15px;
    margin-left: -20px;
}

#template_planner_container {
    background-color: white;
    height: calc(100% - var(--TOPBARHEIGHT));
    overflow: auto;
}



.tree_node_comment {
    display: none;
}




.drag-over {
    background: #d0eaff;
    border: 3px solid darkblue;
    border-radius: 5px;
}

.dragging {
    opacity: 0.5;
}


/*Style for the archetype structure*/
details {
    background: #f8faff;
    border-left: 2px solid #b3c6ff;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    margin-bottom: 0.3em;
    cursor: pointer;
    margin-left: 20px;
}

summary {
    cursor: pointer;
}

.dict-key {
    font-weight: normal;
    color: #2a3b8f;
    margin-left: 20px;
}

.dict-value {
    color: #1a7f37;
    font-family: 'Fira Mono', 'Consolas', monospace;
}

.dict-occurrences {
    font-weight: normal;
    color: darkred;
}

.dict-label {
    font-weight: bold;
    color: black;
    font-size: 15px;
}

#toggle-all-btn, .toggleSectionBtn, #toggleAllSectionsBtn, .toggleNodesBtn, #toggleAllBtn  {
    display: inline-block;
    width: 170px;
    padding: 3px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    background: #235390;
    border: solid 3px white;
    border-radius: 0.5em;
    box-shadow: 0 4px 14px rgba(79, 140, 255, 0.15), 0 1.5px 4px rgba(35, 83, 144, 0.08);
    cursor: pointer;
   
  }
  
  #toggle-all-btn:active, .toggleSectionBtn:active , #toggleAllSectionsBtn:active, .toggleNodesBtn:active, #toggleAllBtn:active {
    background: linear-gradient(90deg, #1a3a5d 0%, #235390 100%);
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 6px rgba(35, 83, 144, 0.18);
  }

  .toggleSectionBtn {
    width:100px;
  }

  #toggleAllSectionsBtn {
    width:125px;
  }



  #loading_page {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: rgba(58,58,58,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.4s;
  }
  
  .loader {
    width: 64px;
    height: 64px;
    border: 8px solid #fff;
    border-top: 8px solid #005c79;
    border-radius: 50%;
    animation: spin 1s linear infinite, glow 1.5s ease-in-out infinite alternate;
    box-shadow: 0 0 20px #00c3ff, 0 0 40px #00c3ff33;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
  }
  
  @keyframes glow {
    0% { box-shadow: 0 0 20px #91e5ff, 0 0 40px #00c3ff33;}
    100% { box-shadow: 0 0 40px #00c3ff, 0 0 80px #00c3ff66;}
  }
  
  .loading-text {
    margin-top: 24px;
    color: #fff;
    font-size: 1.3rem;
    letter-spacing: 1px;
    font-family: 'Segoe UI', Arial, sans-serif;
    text-shadow: 0 5px 8px #01415488;
    animation: pulse 1.2s infinite alternate;
  }
  
  @keyframes pulse {
    0% { opacity: 0.7;}
    100% { opacity: 1;}
  }


  /* style for the template planner doropdown*/


    .input_clear_button {
      background-color: transparent;
      border: none;
      transform: translateX(-8px) translateY(2px);
      font-size: 18px;
      width:0;
      cursor: pointer;

    }

    .combo-wrapper{
        padding:0;
        white-space: nowrap;

    }

 
    datalist {
      position: absolute;
      background-color: white;
      border: 1px solid lightgray;
      border-radius: 10px 0px 0px 10px;
      border-top: none;
      box-shadow: 0 2px 6px rgba(35, 83, 144, 0.18);
      padding: 5px;
      max-height: 10rem;
      overflow-x:hidden;
      overflow-y: auto;
      display: none;     /* we control visibility via JS */
      z-index: 100;
      box-sizing: border-box;
    }

    option {
      font-size: 14px;
      padding: 1px;
      margin-bottom: 5px;
      cursor: pointer;
      display: block;    /* so we can hide/show via display */
    }

    option:hover, option.active {
      background-color: lightblue;
    }