.table a { 
        text-decoration: none;
        color: #daa520;
        text-shadow: 1px 1px 0px #000;
    }

    /*.col a:hover {
        text-decoration: none;
        color: #555;
    }*/

    a { 
        text-decoration: none;
        color: #daa520;
        text-shadow: 1px 1px 0px #000;
    }

    a i { 
        color: black
    }

    a.btn {
        text-shadow: none;
    }

    .section-1-box-icon a i {
        color: #daa520;
    }

    .col-md-12 a {
        color: black;
        text-shadow: none;
    }

    body {
        color: #000000; 
        background-image: radial-gradient(circle, #959590, #8a8784, #7d7979, #6e6c6d, #606060);
    }
    thead, tbody, tfoot, tr, td, th {
        border-color: transparent;
    }
    h1 {
      font-size: 2rem; /* Ändra storleken */
      font-family: 'Open Sans', sans-serif; /* Ändra typsnittet */
    }

    h2 {
      font-size: 1.8rem;
      font-family: 'Open Sans', sans-serif;
    }

    i {
        text-shadow: 1px 1px 1px #000;
    }

    .btn i {
        text-shadow: none;
    }

    /* Basic Layout */
    .row {
        text-align: center;
        /*padding-right: 0px;
        padding-left: 0px;*/
    }
    .wrapper {
        /* Add styles if needed, e.g., max-width, margin: auto; */
        /* For now, it might be okay without specific styles if relying on Bootstrap grid */
    }

    /*.content {
        padding-top: 20px;  Add some space at the top 
        padding-bottom: 20px; /* Add some space at the bottom
    }*/

    .section-container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .top-content {
        background-image: url('/img/harddrive.jpg');
        background-size: cover; /* Make image cover the entire section */
        background-position: center center; /* Center the image */
        color: #fff; /* Set text color to white for better contrast */
        text-shadow: 1px 1px 2px black; /* Add text shadow for readability */
    }

    .footer-container {
        padding-top: 30px;
        padding-bottom: 30px;
        text-align: center;
        margin-top: 40px; /* Space above footer */
    }

    /* Dotted Divider Style */
    .divider-1 {
        border: 0;
        height: 2px;
        width: 50%;
        margin: auto;
        /*margin-bottom: 10px;*/
        background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);
        /* IE6-9 */
    }

    .row .divider-1 {
        margin-bottom: 5px
    }

    .divider-1 span {
    	display: inline-block;
    	position: relative;
    	top: -9px; /* Adjust vertical position if needed */
    	padding: 0 10px;
    	background: #fff; /* Match background or make transparent */
    	font-size: 14px;
    	font-style: italic;
    	color: #888;
    }

    /* Moved Inline Styles */
    .welcome-message strong {
        color: #daa520;
        text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
    }

    .impersonation-message i {
        color: #daa520;
    }

    .flash-message {
        font-size: 20px;
        /* color is set dynamically, keep inline for now or handle via template logic */
    }

    /* Index Page Specific Styles */
    .section-1-box {
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }

    /* --- Basic Nav Styling --- */
    .responsive-nav {
        width: 100%;
        text-align: center; /* Center nav content for large screens */
        margin-bottom: 5px;
        /*margin-top: 5px;*/
        position: relative; /* Needed for absolute positioning of dropdown & toggle */
        background-color: transparent; /* Optional: Add a background */
        /*padding: 10px 0;*/     /* Optional: Add some padding */
        line-height: 1.5;    /* Adjust for vertical alignment if needed */
    }
    
    /* --- Hamburger Button Styling (Hidden on large screens) --- */
    .menu-toggle {
        display: none; /* Hide hamburger by default (on large screens) */
        background: none;
        border: none;
        font-size: 1.5em;
        cursor: pointer;
        padding: 5px 10px;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #daa520;
        z-index: 1100; /* Ensure button is clickable above dropdown */
    }
    
    .menu-toggle:hover {
        color: #555;
    }
    
    
    /* --- Links Container & Links Styling (Large Screens - Default) --- */
    .nav-links-container {
        display: block; /* Links container visible by default */
        background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
        background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
        background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
        background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    }
    
    .nav-links {
        list-style: none;
        padding: 0;
        margin: 0;
        /* text-align: center; /* Already set on .responsive-nav */
    }
    
    .nav-links li {
        display: inline-block; /* Horizontal layout */
        /* Remove margin here, separator will handle spacing */
        margin: 0;
    }
    
    /* Add separator using ::after pseudo-element */
    .nav-links li::after {
        content: "|";
        /* Adjust spacing around the separator */
        margin-left: 15px;
        margin-right: 15px;
        /* Style the separator */
        color: #aaa;
        /* Prevent selecting/interacting with the separator */
        user-select: none;
        pointer-events: none;
    }
    
    /* Remove separator from the very last item */
    .nav-links li:last-child::after {
        content: ""; /* Hide separator */
        margin: 0;   /* Remove spacing */
    }
    
    .nav-links li a {
        white-space: nowrap;
        padding: 5px 0; /* Adjust padding as needed, spacing handled by separator */
        display: inline-block;
        vertical-align: middle; /* Align links nicely if line-height varies */
        text-decoration: none;
        color: black;
        text-shadow: none;

    }
    
    /*.nav-links li a:hover {
        text-decoration: none;
        color: #555;
    }*/
    
    .nav-links li a i {
        margin-right: 5px;
        /* color: #daa520; /* Applied inline in HTML */
    }
    
    
    /* --- Responsive Styles for Small Screens (e.g., max-width 768px) --- */
    @media (max-width: 768px) { /* Adjust breakpoint as needed */
    
        .responsive-nav {
            text-align: left; /* Align toggle button relative to container edge */
            padding: 20px 0;
        }
    
        .menu-toggle {
            display: block; /* Show hamburger button */
        }
    
        /* CRUCIAL: Hide the links container by default on small screens */
        .nav-links-container {
            display: none;
            position: absolute;
            top: 100%; /* Position below the nav bar */
            left: 0;
            right: 0; /* Make it full width */
            background-color: #707070;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            z-index: 1000; /* Below toggle, above page content */
            border-top: 1px solid #ddd; /* Optional top border */
        }
    
        /* Style to show the dropdown when active */
        .nav-links-container.show {
            display: block; /* Show the container when toggled */
        }
    
        /* Adjust list layout for vertical dropdown */
        .nav-links {
           text-align: left; /* Align text left within dropdown */
        }
    
        .nav-links li {
            display: block; /* Stack links vertically */
            margin: 0;      /* Reset margins */
            border-bottom: 1px solid #ddd; /* Separator lines */
        }
    
        /* CRUCIAL: Hide the pipe separator on small screens */
        .nav-links li::after {
            display: none;
        }
    
         .nav-links li:last-child {
            border-bottom: none; /* Remove border from last item */
        }
    
        .nav-links li a {
            display: block; /* Make links full width */
            padding: 12px 20px; /* Padding for dropdown items */
            white-space: normal; /* Allow wrapping */
            vertical-align: baseline; /* Reset vertical alignment */
        }
    
         .nav-links li a:hover {
             background-color: #999999;
             text-decoration: none;
         }
         .show-div-on-large {
            display: none;
        }
    }

    /* Bucket liting: Hide the columns with the 'show-on-large' class */
    .show-on-large {
        display: none;
    }

    /* Media Query: Show the columns when screen width is greater than 768px */
    @media (min-width: 769px) { /* Target screens wider than 768px */
        .show-on-large {
            /* Display as table cells again */
            display: table-cell;
            /* You might need to re-apply vertical-align if needed */
            vertical-align: middle; /* Or whatever aligns best with other cells */
        }
    }

    /* Optional: If you use specific alignment/styles on the TH/TD,
       you might need to ensure they are applied correctly within the media query too,
       though often just setting 'display: table-cell' is enough. */

    /* Example if alignment needs resetting specifically */
    @media (min-width: 769px) {
        th.show-on-large {
           /* text-align: right; / center; */ /* Re-apply if needed */
        }
        td.show-on-large {
           /* text-align: right; / center; */ /* Re-apply if needed */
        }
        .show-div-on-large {
            display: grid;
            vertical-align: middle;
        }
    }

    button.btn-customized {
    	/*padding: .75rem 1.5rem;*/
      margin-left: 5px; margin-right: 5px;
    	background: #daa520; border: 0; border-radius: 4px; 
    	/*font-family: 'Roboto', sans-serif;*/
    	font-size: 16px; font-weight: 400; color: black; box-shadow: none;
    }
    
    button.btn-customized:hover,
    button.btn-customized:active, 
    button.btn-customized:focus, 
    button.btn-customized:active:focus, 
    button.btn-customized.active:focus,
    button.btn.btn-primary:not(:disabled):not(.disabled):active,
    button.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
    	outline: 0; background: black; border: 0; color: #daa520; box-shadow: none;
    }
    
    /*button.btn-customized i { margin-right: 5px; }*/
    
    a.btn-customized {
    	margin-left: 5px; margin-right: 5px;/* padding: .75rem 1.5rem; */
    	background: #daa520; border: 0; border-radius: 4px; 
    	font-size: 16px; font-weight: 400; color: black; box-shadow: none;
    }

    a.btn-customized:hover,
    a.btn-customized:active, 
    a.btn-customized:focus, 
    a.btn-customized:active:focus, 
    a.btn-customized.active:focus,
    a.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active,
    a.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active:focus {
    	outline: 0; background: black; border: 0; color:  #daa520; box-shadow: none;
    }
    
    a.btn-customized:hover i,
    a.btn-customized:active i, 
    a.btn-customized:focus i, 
    a.btn-customized:active:focus i, 
    a.btn-customized.active:focus i,
    a.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active i,
    a.btn-customized.btn.btn-primary:not(:disabled):not(.disabled):active:focus i {
    	color: #daa520;
    }
    
    .table td, .table th { padding: 1px; }
    
    .spinnable {
      /* Style your element as needed */
      display: inline-block; 
      cursor: pointer;
    }
    
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    .spinnable.spinning {
      animation: spin 1s linear infinite;
    }

    /* --- Animationer --- */

/* Keyframes för att glida in från vänster */
@keyframes slideInLeft {
    from {
      transform: translateX(-100%); /* Starta helt till vänster utanför skärmen */
      opacity: 0; /* Starta osynlig */
    }
    to {
      transform: translateX(0); /* Sluta på sin normala position */
      opacity: 1; /* Bli helt synlig */
    }
  }
  
  /* Keyframes för att glida in från höger */
  @keyframes slideInRight {
    from {
      transform: translateX(100%); /* Starta helt till höger utanför skärmen */
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Keyframes för att fada in */
  @keyframes fadeIn {
    from {
      opacity: 0; /* Starta osynlig */
    }
    to {
      opacity: 1; /* Bli helt synlig */
    }
  }
  
  /* --- Klasser som applicerar animationerna --- */
  
  /* Klass för att glida in från vänster */
  .slide-in-left {
    animation-name: slideInLeft; /* Använd definierad keyframe */
    animation-duration: .25s; /* Hur lång tid animationen tar */
    animation-timing-function: ease-out; /* Hur animationen accelererar/decelererar */
    animation-play-state: paused;
    /* animation-delay: 0.5s; */ /* Valfri fördröjning innan animationen startar */
  }
  
  /* Klass för att glida in från höger */
  .slide-in-right {
    animation-name: slideInRight;
    animation-duration: .25s;
    animation-timing-function: ease-out;
    animation-play-state: paused;
  }
  
  /* Klass för att fada in */
  .fade-in {
    animation-name: fadeIn;
    animation-duration: .25s; /* Fade kan ofta vara lite långsammare */
    animation-timing-function: ease-in;
    animation-play-state: paused;
  }

  .animated {
    animation-play-state: running;
  }

  .table {
    --bs-table-bg: transparent;
  }