:root {
    --primary-color: rgb(255 242 0 / 1);
    --secondary-color: #fbd100;
    --main-bg: #fff200;
    --main-text: #222;
    --nav-hover: #ffe600;
    --nav-active: #fff799;
    --box-bg: #fffbe0;
    --shadow: 0 2px 8px rgba(0,0,0,0.07);
    --navbar-bg: #fff;
    --icon-color: #50627d;
    --page-background: rgb(255 242 0 / 1);
    --button-color: rgb(255 242 0 / 1);
    --row-hover: #FFC600;
    --bg-success: #5cb85c;
    --bg-danger: #d9534f;
    --bg-warning: #f0ad4e;
    --bg-info: #5bc0de;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: Prompt, sans-serif;
    margin: 0;
    /*background: var(--page-background);*/
    color: var(--main-text);
}

/* For WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px; /* Width of vertical scrollbar */
    height: 4px; /* Height of horizontal scrollbar */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded edges */
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Darker color when hovering */
    }

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
    border-radius: 4px;
}

    /* Optional: Style for scrollbar track on hover */
    ::-webkit-scrollbar-track:hover {
        background: #e1e1e1;
    }

.c-pointer {
    cursor: pointer;
}

.font-bold {
    font-weight: 600;
}

.text-black {
    color: black!important;
}

.dflex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dflex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    display: flex;
    background: url(../img/openapi-bg.png) no-repeat;
    z-index: -1;
    background-size: cover;
}

.page-header {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #fff807 !important;
    position: fixed;
    z-index: 100;
    background: url(../img/bee-net.svg) ;
    background-size: contain;
    background-repeat: repeat;
}

.page-header .page-logo img {
    height: 70px;
}

.page-hemburger img {
    display: none;
    width: 0px;
    cursor: pointer;
}

.page-logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.page-user-name {
    margin-left: 20px;
}

.page-user-name span {
    font-size: 26px;
    font-weight: 600;
}

.page-menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-menu-container ul {
    display: flex;
    margin: 0px 20px 0px 20px;
}

.page-menu-container ul li {
    list-style: none;
    width: 150px;
    text-align: center;
    cursor: pointer;
}

.page-menu-container ul li:hover {
    font-weight: 600;
}

.page-menu-text {
    flex: 4;
}

.page-menu-button {
    flex: 1;
    padding: 0px 10px;
}

.page-menu-button button {
    width: 80px;
    height: 30px;
    border: 1px solid #e1d8d8;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 2px;
    margin-right: 2px;
}

.page-mobile-login {
    display: none;
}


.page-content {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
}

.page-content-image {
    margin-bottom: 2px;
    border-bottom: 2px solid white;
}

.page-content-image img {
    width: 100%;
}

.page-topic {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-topic span {
    font-size: 20px;
    font-weight: 600;
}