/* ===== Fonts ===== */
@font-face {font-family: "TeleNeoOffice-Thin"; src: url("../fonts/TeleNeoOffice-Thin.ttf");}
@font-face {font-family: "TeleNeoOffice-Regular"; src: url("../fonts/TeleNeoOffice-Regular.ttf");}
@font-face {font-family: "TeleNeoOffice-Medium"; src: url("../fonts/TeleNeoOffice-Medium.ttf");}
@font-face {font-family: "TeleNeoOffice-Bold"; src: url("../fonts/TeleNeoOffice-Bold.ttf");}

/* ===== Common ===== */
:root {
    --x-verse-main: #0693e3;
    --x-verse-main-hovered: #0471b0;
    --x-verse-main-pressed: #034469;
    --x-verse-white: #ffffff;
    --x-verse-black: #242426;
    --x-verse-ui-bg: #f7f7f8;
    --x-verse-font-light: "TeleNeoOffice-Thin";
    --x-verse-font-regular: "TeleNeoOffice-Regular";
    --x-verse-font-medium: "TeleNeoOffice-Medium";
    --x-verse-font-bold: "TeleNeoOffice-Bold";
    --x-verse-group-icon: url("https://holograms.azureedge.net.voluverse.com/Images/Logo/Logo_BoxedWhite_128.png");
}

body {margin-top: 4rem; margin-bottom: 6rem ;overflow-x: hidden; color: var(--x-verse-black); background-color: var(--x-verse-white); font-family: var(--x-verse-font-regular), Helvetica, Arial, sans-serif;}
p {margin: 0;}

.x-verse-group-icon{content: var(--x-verse-group-icon);}

.close {border: none; background-color: transparent;}

.card {background-color: var(--x-verse-ui-bg); border: none; border-radius: 10px;}

.xv-navbar {color: var(--x-verse-white); background-color: var(--x-verse-main)}
.xv-nav-button {display: flex; align-items: center; justify-content: center;  height: 100%; padding: 12px 24px; color: var(--x-verse-white); background-color: transparent; font-family: var(--x-verse-font-medium); text-transform: uppercase; line-height: 1; letter-spacing: 2px; text-align: center; user-select: none; cursor: pointer;}
.xv-nav-button:hover {background-color: var(--x-verse-main-hovered); ; color: var(--x-verse-white); border-radius: 5px;}
.xv-nav-button:focus, .xv-nav-button:active, .xv-nav-button.disbaled {color: var(--x-verse-white); background-color: transparent;}

.xv-long-text {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.xv-link {color: var(--x-verse-black); text-decoration: none;}
.xv-link:hover {color: var(--x-verse-main-hovered);}

.xv-footer-main {background-color: var(--x-verse-black);}
.xv-footer-link {color: var(--x-verse-white); text-decoration: none;}
.xv-footer-link:hover {color: var(--x-verse-main-hovered);}

.xv-table { min-height: 100px; max-height: 80vh;}

.xv-button {display: flex; align-items: center; justify-content: center; height: 100%; padding: 12px 24px; border: 2px solid var(--x-verse-main); color: var(--x-verse-main); background-color: transparent; font-family: var(--x-verse-font-medium); text-transform: uppercase; line-height: 1; letter-spacing: 2px; text-align: center; user-select: none; cursor: pointer;}
.xv-button:hover {background-color: var(--x-verse-main-hovered); border: 2px solid var(--x-verse-main-hovered); color: var(--x-verse-white);}
.xv-button:focus, .xv-button:active {outline: none ; box-shadow: none; background-color: var(--x-verse-main-hovered); border: 2px solid var(--x-verse-main-hovered); color: var(--x-verse-white);}
.xv-button.disabled {cursor: not-allowed; border: 2px solid var(--bs-gray-500); color: var(--bs-gray-500); background-color: var(--bs-gray-800);}
.xv-button.disabled:hover {background-color: var(--bs-gray-800);}

.xv-home-menu {color: var(--x-verse-main); font-size: 1.5rem; font-family: var(--x-verse-font-medium);}

.xv-heading{font-family: var(--x-verse-font-medium);}
.xv-th {color: var(--x-verse-main); font-size: 1.1rem; font-family: var(--x-verse-font-medium);}

.xv-delete {background-color: transparent; display: inline; border: none;}
.xv-delete:hover {color: var(--x-verse-main); background-color: transparent;}
.xv-delete:focus, .xv-delete:active, .xv-delete.disbaled {background-color: transparent;}

.xv-form-select {border: 1px solid #ced4da;}
.xv-form-select:focus{border: 1px solid var(--x-verse-main); box-shadow: none;}

.xv-object-prop {border: none}

.xv-group-img{
    max-width: 100%;
    height: 65px;
    display: block;
    padding: 5px;
    border-radius: 3px;
    background-color: var(--x-verse-main);
}

.container.horizontal {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;
    margin-bottom: 10px;
}

.container.horizontal > * {
    margin-right: 10px;
}

.xv-canvas {display: block; margin-right: auto; margin-left: auto; width: 100%; }
.xv-map {height: 40vh; border: 1px solid var(--x-verse-main); border-radius: 5px;}

.xv-glt-viewer {width: 100%; height: 400px;}
.xv-web-viewer {width: 100%; height: 400px;}

.xv-filter-settings {width: 32%;}

.row-no-margin {
    margin-right: 0;
    margin-left: 0;
}

#audioPlayerContainer {
    width: 100%;
}

#audioPlayerContainer audio {
    width: 100% !important;
    height: 50px !important;
}

/* ===== Media Queries ===== */
@media (max-width: 254px) {
    body {margin-top: 20rem;}
}
@media (min-width: 254px) {
    body {margin-top: 16rem; margin-bottom: 10rem;}
}
@media (min-width: 336px) {
    body {margin-top: 12rem; margin-bottom: 6rem;}
}
@media (min-width: 371px) {
    body {margin-top: 8rem;}
}
@media (min-width: 634px) {
    body {margin-top: 5rem;}
}