body {
    background-color:                   #1A1A1A;
    margin-right:                       20px;
    margin-left:                        0px;
    margin-top:                         0px;
    overflow-x:                         hidden;
    overflow-y:                         auto;
    width:                              calc(100% - 5px);
}

summary {
    margin:                             0;
    padding:                            1px;
}

#content {
  flex:                                 1;          /* fills remaining horizontal space */
  display:                              block;      /* ensure normal flow inside */
/*  height:                               auto; */
  padding-left:                         20px;
}

#dd-row-container {
    grid-column:                        1 / -1;     /* Spans across all 3 columns */
    grid-row:                           1;          /* Forces the logo to be the very first row */
    display:                            flex;
    flex-direction:                     row;
    align-items:                        center;
    gap:                                20px;
}

.footer2 {
    flex-shrink:                        0;          /* prevent compression */
    width:                              100%;       /* span full width */
}

.gradient-line2 {
  grid-area:                            line;   /* Locks it strictly to the second row slot */
  width:                                100%;
  max-width:                            100%;
  margin:                               10px auto; /* Centered, with small top/bottom breathing room */
  height:                               1px;
  background:                           linear-gradient(to right, #0072ff, #ffffff);
  border:                               none;
}

#layout {
    display:                            flex;
    flex-direction:                     column;
    height:                             100vh;
    min-height:                         0;
    width:                              100%;
} 

.main {                                                     /* your sidebar/content wrapper */
    flex:                               1;                  /* expand to fill space */
    flex-direction:                     row;
/*  flex-shrink:                        0; */
    display:                            flex;               /* keep sidebar + content side by side */
    width:                              100%;
}

.nav_bar2 {
    background-color:                   #808080;
    color:                              #E0E0E0;
    display:                            flex;
    flex-wrap:                          wrap;
    font-family:                        "Nunito Sans", sans-serif;
    font-size:                          22px;
/*    height:                             auto; */
    justify-content:                    space-between;
    margin:                             5px 5px 10px 5px;    
    overflow:                           visible;
    padding:                            5px 5px 10px 5px;
    position:                           relative;
    width:                              100%;
    z-index:                            10;
}

.nav_bar2 ul {
    color:                              #000000;
    display:                            flex;
    gap:                                10px;
/*    height:                             auto; */
    list-style:                         none;
    margin:                             0px;
    padding:                            10px 10px 0px 10px;
}

.nav_bar2 ul li a {
    color:                              #0F0F0F;
    display:                            inline-block;
    line-height:                        1.2;
    margin:                             0;
    padding:                            5px 5px; /* 10px 10px; */
    text-decoration:                    none;
    transition:                         all 0.3s ease;
}

.nav_bar2 ul li a:visited {
    color:                              #0F0F0F;
}

.nav_bar2 ul li a:hover {
    background-color:                   #909090;
    border-radius:                      8px;
    color:                              #E0E0E0; /* or your preferred hover color */
    overflow:                           visible;
}

.nav_bar2 ul li a:active {
    color:                              #0F0F0F;
}

.nav-header {
    font-family:                        "Nunito Sans", sans-serif;    
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid #303030;
    color: #8fe0ff;
}

.nav-sub li {
    font-family:                        "Nunito Sans", sans-serif;    
    margin: 6px 0;
}

.nav-sub a {
    color: #c0c0c0;
    text-decoration: none;
    padding-left: 10px;
    display: block;
    transition: color 0.15s ease;
}

.nav-sub a:hover {
    color: #ffffff;
}

.note {
    color:                             #A05050;
}

.page-header {
    background-color:                 #181818;
    border-bottom:                      1px solid #303030;
    color:                            #e0e0e0;    
/*    height:                             120px; */
    padding:                            10px;
    width:                              calc(100px - 0); 
}

.sample {
    display:                  inline;
    font-family:              "courier new";
}

#sidebar {
    background-color:                  #181818;
    border-right:                        1px solid #303030;
    bottom:                             0;    
    color:                             #E0E0E0;
    flex-shrink:                        0;
    font-family:                        "Nunito Sans", sans-serif;
    font-size:                          18px; 
    overflow-y:                         auto;
    padding:                            20px;
    top:                                230px;
    width:                              348px;
}

#sidebar a.selected {
  background-color:                  #606060;
  border-radius:                       4px;
  color:                                #101010;
  font-weight: 600;
  padding:                              3px;
}

.sidebar-section {
    margin-bottom:                      5px;
}

.sidebar-section-1 {
    margin-bottom:                      5px;
    margin-left:                        20px;
}

.sidebar-section-2 {
    margin-bottom:                      5px;
    margin-left:                        22px;
}

.sidebar-section-3 {
    margin-bottom:                      5px;
    margin-left:                        24px;
}

.sidebar-section ul {
    list-style:                         none;
    margin:                             5px;
    padding:                            0 0 0 20px; 
}

.sidebar-section ul li {
    margin:                             5px;
    padding:                            2px;
}

.sidebar-section ul li a {
    color:                              #8090A0;
    font-family:                        "Nunito Sans", sans-serif;
    text-decoration:                    none;
}

.sidebar-section ul li a:hover {
    color:                              #8090A0;
}

.sidebar-section ul li a:visited {
    color:                              #8090A0;
}

.t-bar {
    background:                         linear-gradient(90deg,rgba(96, 96, 240, 1) 0%, rgba(240, 240, 240, 1) 100%);
    border-radius:                      5px;
    color:                              #101010;
    font-family:                        "Nunito Sans", sans-serif;    
    padding:                            5px;
    width:                              100%;
}

.text-block h2 {
    color:                              #5C7AAA;
}

.text-block ul {
    margin-top:                         0px;
}