:root {
    --fontSizeXSmall: 11px;
    --fontSizeSmall: 12px;
    --fontSizeNormal: 13px;
    --fontSizeMedium: 14px;
    --fontSizeBig: 16px;

    --colorBlack: #000;
    --colorBlackTitle: #323232;
    --colorWhite: #fff;
    --colorPrimary: #008577;
    --colorGreenMessageSeen: #3ec9ac;
    --colorGray1: #e1e3e6;
    --colorGray2: #edeef0;
    --colorGray3: #9d9ea1;
    --colorGray4: #67707a;
    --colorGray5: #fbfbfb;
    --colorGray6: #aeb7c2;
    --colorBackground: #1a2026;
    --colorForeground: #293440;
    --colorInputBackground: #384553;
    --colorInputPlaceholder: #8a98a6;
    --colorTableRowHover: #293440;;
    --colorGrayBodyBackground: #e1e3e6;
    --colorGrayLeftMenuHover: #e4e5e9;
    --colorGrayBorder: #ccc;
    --colorGrayBadgeDefault: #a6a6a6;
    --colorRedError: #dc3545;
    --colorRedGomboDraft: #b02a37;
    --colorGreenBackground: #e5f2f1;
    --colorGreenBackgroundComment: #ecf5f5;
    --colorGreenOnline: #2db12d;
    --colorGreenAvatarBackground: #008577cc;
    --colorBackgroundImageContainer: #008577cc;

    --borderRadius_1: 6px;
    --borderRadius_2: 12px;

    --containerGap: 1.3em;
    --containerPadding: 20px;

    --popupListItemPadding: 10px;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 48px 0;
    font-size: var(--fontSizeNormal);
    /*font-family: -apple-system, BlinkMacSystemFont, Roboto, "Open Sans", "Helvetica Neue", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans Cherokee", "Noto Sans Devanagari", "Noto Sans Ethiopic", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans Lao", "Noto Sans Osmanya", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", sans-serif;*/
    background-color: var(--colorBackground);
}

*:focus {
    box-shadow: none !important;
}

.navbar-fixed-top {
    background-color: var(--colorForeground);
}
.navbar-fixed-top a {
    color: var(--colorWhite);
}
.navbar-fixed-top .nav-link {
    color: var(--colorWhite);
}
.navbar-fixed-top .nav-link:hover,
.navbar-fixed-top a:hover {
    color: var(--colorWhite);
}
.nav-link, .nav-link:hover {
    color: var(--colorWhite);
}

.nav-link.active {
    color: var(--colorWhite) !important;
    background-color: var(--colorPrimary) !important;
}

.base-container {
    margin-top: 8rem;
}
.base-container-card-placeholder .loading-text {
    text-align: center;
    color: var(--colorWhite);
}

.card {
    background-color: var(--colorForeground);
}

.table tr {
    cursor: pointer;
}
.table tr:hover {
    background-color: var(--colorTableRowHover);
}
.table-card th:first-child {
    border-top-left-radius: 12px !important;
}
.table-card th:last-child {
    border-top-right-radius: 12px !important;
}

input:not(.form-check-input), select {
    border: none !important;
    color: var(--colorWhite) !important;
    background-color: var(--colorInputBackground) !important;
}

.form-check, .form-check-input, .form-check-label {
    cursor: pointer !important;
}

select, option {
    cursor: pointer;
}

::placeholder {
    color: var(--colorInputPlaceholder) !important;
    opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
    color: var(--colorInputPlaceholder);
}

.gombo_thumbnail_image {
    width: 150px;
    height: 150px;
    cursor: pointer;
}

#fullscreen-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 5000;
}

#fullscreen-image-view {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

#fullscreen-footer-btn-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1001;
}