/*   cryptostatus      $versie="v.1.0"; */
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif; }
        body {
            margin: 0;
            width:100%;
            display: flex; /* Make the body a flex container */
            min-height: 100vh; /* Ensure body takes full viewport height */
            flex-direction: column; /* Stack them vertically */
            height: 100vh; /* Make body take full viewport height */
            overflow: auto; /* Prevent body scrollbars */
            padding-top: 0px; /* Space for the fixed header */
        }

        .left-frame {
        flex: 0.7; /* Allows it to grow and shrink, taking available space */
            background-color: #ffffff;
            padding: 20px;
            box-sizing: border-box; /* Include padding in element's total width */
            overflow-y: auto; /* Add scroll if content exceeds height */
        }

        .right-frame {
            flex: 3; /* 3 keer groter d an left frame */
            background-color: #ffffff;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
        }
        .space {
            margin-top:0px;
        }

        /* Optional: Basic styling for content within frames */
        .left-frame h2, .right-frame h2 {
            margin-top: 0;
        }
        .topbar {
            height:auto!important;
            overflow: hidden;
/*            background-color: #333;   */
            position: fixed;/*relative; /*fixed;*/
            margin-top: 0;
            width: 100%;
        }
        .subtopbar {
            height:auto!important;
            overflow: hidden;
            position: fixed;/*relative; /*fixed;*/
            margin-top: 120px;
            width: 100%;
        }
        .bottombar {
            position: fixed;
            bottom: 0;
            width: 100%;
            font-size:0.8em;
        }

        div.scroll {
            width:50%;
            height:750px;
            overflow:scroll;
            overflow-x: auto; /* Hide horizontal scrollbar */
            float: left;
        }

        input[type='radio'] {
            accent-color: red;
         }
        .zoom:hover {
            transform: scale(1.5);
        }
        a:visited{
            color:red;
        }
        span:hover {
            color:red;
        }

.top-frame-wrapper {
    height:200px; /* Fixed height for the top frame */
    width: 100%;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scrollbar */
    /* Remove white-space: nowrap here, as it's better on the content element */
    border-bottom: 1px solid #ccc;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.top-frame-content {
    display: flex; /* Use flexbox for horizontal arrangement of items */
    /* white-space: nowrap; // This was a common approach, but can be tricky with flex.
                            // Better to let flex handle stretching naturally. */
    height: 100%; /* Take full height of the wrapper */
    align-items: center; /* Vertically center the items */
    padding: 0 10px; /* Add some padding */

    /* ***** THE KEY ADDITION FOR HORIZONTAL SCROLLING WITH FLEX ITEMS ***** */
    /* Ensure the content naturally extends beyond the wrapper's width */
    /* We achieve this by letting the flex items determine the width,
       and preventing the flex container from shrinking them. */
    min-width: fit-content; /* This is crucial. It tells the flex container to be at least
                               as wide as its content, preventing shrinking. */
}

.horizontal-item {
    flex-shrink: 0; /* Prevent items from shrinking */
    width: 150px; /* Fixed width for each item */
    height: 60px; /* Fixed height for each item */
    background-color: #e0e0e0;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #bbb;
    border-radius: 5px;
}

div.scrollmenu {
    overflow: auto;
    overflow-x: auto; /* Hide horizontal scrollbar */
    white-space: nowrap;
}

/* Container for the text boxes */
        .flex-container {
            display: flex; /* Enable Flexbox */
            flex-direction: row; /* Arrange items in a row */
            flex-wrap: nowrap; /* Prevent wrapping to the next line */
            overflow-x: auto; /* Enable horizontal scrolling if content overflows */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS devices */

            /* Positioning and styling for the fixed header */
            position: fixed; /* Make the container fixed at the top */
            top: 50px;  /* */
            left: 0;
            right: 0;
            padding: 0em; /* Padding around the text boxes */
            background-color: #ffffff; /* White background */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Subtle shadow */
            z-index: 1000; /* Ensure it stays on top of other content */
            border-bottom: 1px solid #e2e8f0; /* Light border at the bottom */
        }

        /* Style for individual text input boxes */
        .text-box {
            min-width: 160px; /* Minimum width for each text box */
            height: 44px; /* Fixed height for consistency */
            margin-right: 0.75rem; /* Space between text boxes */
            padding: 0.75rem 1rem; /* Padding inside the text boxes */
            border: 1px solid #cbd5e0; /* Light gray border */
            border-radius: 0.5rem; /* Rounded corners */
            outline: none; /* Remove default focus outline */
            font-size: 1rem; /* Standard font size */
            color: #4a5568; /* Text color inside input */
            background-color: #ffffff; /* White background for input */
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transition for focus effect */
            flex-shrink: 0; /* Prevent text boxes from shrinking */
        }

        /* Remove margin from the last text box to prevent extra space */
        .text-box:last-child {
            margin-right: 0;
        }

        .text-box:focus {
            border-color: #4f46e5; /* Indigo-600 border on focus */
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25); /* Subtle shadow on focus (indigo-500 with alpha) */
        }

        /* Custom scrollbar for Webkit browsers (Chrome, Safari) */
        .flex-container::-webkit-scrollbar {
            height: 10px; /* Height of the horizontal scrollbar */
        }
        .flex-container::-webkit-scrollbar-track {
            background: #f1f5f9; /* Track color (light gray) */
            border-radius: 10px;
        }
        .flex-container::-webkit-scrollbar-thumb {
            background-color: #94a3b8; /* Thumb color (slate-400) */
            border-radius: 10px;
            border: 20px solid #f1f5f9; /* Padding around thumb */
        }
        /* Custom scrollbar for Firefox */
        .flex-container {
            scrollbar-width: auto; /* "auto" or "thin" */
            scrollbar-color: #94a3b8 #f1f5f9; /* thumb and track color */

        }

/* Example content below the fixed header */

        .content {
            margin-top:220px!important;
            padding: 0rem;
            max-width: 96%;
            margin: 0 auto;
            line-height: 1.6;
            color: #4b5563; /* Gray-700 */
        }
        .content h1 {
            font-size: 2.25rem; /* text-4xl */
            font-weight: 700; /* font-bold */
            margin-bottom: 1rem;
            color: #1e293b; /* Slate-900 */
        }
        .content p {
            margin-bottom: 0rem;
        }
/* former content */
    .content-frame {
        flex-grow: 1; /* Allow content frame to take up remaining space */
        overflow-y: auto; /* Enable vertical scrolling */
        overflow-x: hidden; /* Hide horizontal scrollbar */
        padding: 20px;
        box-sizing: border-box;
        background-color: #f9f9f9;
    }

    .content-frame p {
        margin-bottom: 15px;
        line-height: 1.6;
    }

        .placeholder-box {
            height: 1200px; /* Make the page scrollable */
            background-color: #f0f4f8; /* Light blue-gray */
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #94a3b8; /* Slate-400 */
            text-align: center;
            margin-top: 2rem;
            padding: 2rem;
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
        }
/*  css voor rss order  */
        .container {
            background-color: #ffffff;
            padding: 0px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            width: 100%;
/*            max-width: 600px; */
            margin-bottom: 20px;
            margin-left:0px;
            margin-right:0px;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 25px;
            font-size: 1.8em;
        }
        #rss-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #rss-list li {
            background-color: #ecf0f1;
            border: 1px solid #ddd;
            margin-bottom: 8px;
            padding: 12px 15px;
            cursor: grab;
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-left: 5px solid #3498db;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        #rss-list li:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }
        #rss-list li.sortable-ghost { /* Stijl voor het element tijdens slepen */
            opacity: 0.4;
            background-color: #cce7f5;
        }
        button {
            background-color: #22C55E; /* Groene kleur */
            color: white;
            padding: 2px 2px;
            border: none;
            border-radius: 8px;
            border-left: 5px solid #3498db;
            cursor: pointer;
            font-size: 1.0em;
            font-weight: normal;
            margin-top: 0px;
            margin-right:3px;
            box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        button:hover {
            background-color: #218838;
            transform: translateY(-2px);
        }
        .message-box {
            text-align: center;
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            font-weight: bold;
            display: none; /* Standaard verborgen */
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .message-box.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .message-box.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .message-box.show {
            display: block;
            opacity: 1;
        }