:root {
    --TopBarHeight: 50px;
    --Gaps: 10px;
    --LeftPanelWidth: calc(25vw - 30px);
    --MiddlePanelWidth: calc(75vw - 40px);
    --PrimaryFont: Poppins;
    --ContentPadding: 10px 30px;
}

.w-10 {
    width: 10%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-100 {
    width: 100%;
}

.m-0 {
    margin: 0;
}

.mr-auto {
    margin-right: auto;
}

.text-align-center {
    text-align: center;
}

.item-align-center {
    display: flex;
    align-items: center;
}

.content-justify-end {
    display: flex;
    justify-content: flex-end;
}

.justify-space-between {
    display: flex;
    justify-content: space-between;
}

.y-scroll {
    overflow-y: scroll;
}

div.header {
    display: flex;
    width: 100%; 
    height: var(--TopBarHeight);
    border-radius: 0;
    padding: 6px 20px;
    overflow: hidden;
}

.header h1, 
.file-dropdown {
    margin: 0 0 0 10px;
    line-height: 38px;
    white-space: nowrap;
    font-size: max(1vw, 10px);
}

.file-dropdown {
    border-radius: 10px 0 0 10px;
    padding: 0 10px;
    background-color: var(--InputColor);
}

.file-dropdown select {
    font-size: max(1vw, 10px);
    border: 0;
    padding: 0;
    font-weight: bold;
    background-color: transparent;
    height: 38px;
}

.rounded-dropdown {
    border-radius: 10px;
    background-color: var(--InputColor);
}

.rounded-dropdown select {
    border: 0;
    padding: 0.5vh;
    background-color: transparent;
}

.trash {
    margin-left: min(-0.8vw, -15px);
    border-radius: 0 10px 10px 0;
}

.trash[disabled] {
    opacity: 0.2;
}

.last-modified {
    font-size: 1vw;
    line-height: 38px;
}

.last-modified br {
    display: none;
}

@media (max-width: 1000px) {
    .last-modified {
        line-height: 19px;
    }

    .last-modified br {
        display: block;
    }
}

@media (max-width: 800px) {
    .last-modified {
        display: none;
    }
}

.left-top-container {
    display: flex;
    gap: min(0.8vw, 15px);
    white-space: nowrap;
}

.right-top-container {
    display: flex;
    margin-left: auto;
    gap: min(0.8vw, 15px);
}

.right-top-container h2 {
    margin: 0 0 0 30px;
    font-weight: 400;
    font-size: max(1vw, 10px);
    line-height: 38px;
}

.header-text-container {
    display: flex;
    align-items: center;
    gap: 0.3vw;
}

div.content-panel {
    position: absolute; 
    width: 100%; 
    top: calc(var(--TopBarHeight)); 
    height: calc(100% - (var(--TopBarHeight)));
    padding: var(--ContentPadding);
    overflow: hidden;
}

div.step-panel {
    left: calc(var(--LeftPanelWidth) + 40px);
}

div#stepPanel {
    width: 15%;
}

div.step-panel.step-button-container {
    z-index: 6;
}

div.left-panel, div.step-panel, div.pdfmesh-panel {
    z-index: 7;
    width: var(--LeftPanelWidth); 
    height: calc(100% - 20px);
}

div.left-panel > div, div.step-panel > div {
    overflow-y: scroll;
    height: 100%;
}

div.left-panel .content, div.step-panel .content {
    width: 100%; 
    max-height: 100%;
    padding: 10px 10px;
}

div.left-panel .content +.content, div.step-panel .content +.content {
    margin-top: 10px;
}

div.middle-panel {
    left: calc(var(--LeftPanelWidth) + 40px); 
    width: var(--MiddlePanelWidth); 
    height: calc(100% - 20px);
    z-index:auto;
}

div.middle-panel.step-gallery-main-panel {
    width: calc(58vw - 10px);
    left: calc(var(--LeftPanelWidth) + 15% + 50px);
}

div.excel-panel {
    padding: 0;
}

div.excel-header-options {
    height: 25px;
    background-color: var(--LightBlack);
    padding: 10px;
}

div.excel-header-options p {
    display: inline;
    margin: 0;
    font-weight: bold;
}

div.popup {
    min-width: 30vw;
    max-width: 80vw;
    max-height: 85vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    padding: 0;
    overflow-y: scroll;
}

#PdfViewer .popup {
    max-width: 80vw;
    width: 100%;
    overflow-y: hidden;
}

#thumbnailPdfContainer {
    display: flex;
}

#rightPdfViewerContainer {
    display: flex;
    flex-direction: column;
    width: 20%;
    height: 70vh;
    justify-content: space-between;
}

#thumbnail-pane {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#pdfPageViewer {
    flex-grow: 1;
    overflow-y: auto;
    height: 70vh;
    margin-right: 2vw;
}

.popupSubmitButton {
    width:100%; 
    margin-top: 2vh;
}

.thumbnail {
    align-self: center;
    cursor: pointer;
    margin-bottom: 10px;
}

#FilePickerPopup .popup {
    width: 75vw;
}

.popup-header {
    display: flex;
    padding: 20px;
    border-bottom: 1px solid var(--InputColor);
}

.popup-header h1 {
    margin: 0 auto;
    padding: 0 100px;
    font-size: 2vw;
    text-align: center;
}

.popup-header .button-close {
    padding: 5px;
    position: absolute;
    right: 20px;
}

.popup-header .button-arrow {
    padding: 5px;
    position: absolute;
    left: 20px;
}

.popup-header .button-arrow img {
    height: 30px;
}

.popup-content {
    padding: 20px;
}

.popup-warning {
    display: none;
    padding: 0 20px;
    text-align: center;
    font-size: max(10px, 1vw);
}

.configured .popup-warning {
    display: block;
}

.popup-overlay {
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 0%, 0.5);
    transition: all 0.3s;
}

.popup-hide {
    display: none;
}

.popup-enforce {
    display: block !important;
}

.popup-enforce .popup-header button {
    display: none;
}

.popup-input {
    padding: 10px;
}

.popup-input + .popup-input {
    margin-top: 20px;
}

.popup-input .button-continue {
    width: 100%;
    margin-top: 10px;
    font-size: max(1vw, 10px);
    text-align: center;
    box-sizing: border-box;
}

.button-placeholder-use {
    position: absolute;
    right: 30px;
    padding: 5px;
}

.button-placeholder-leftpanel {
    position: absolute;
    right: 0px;
    padding: 5px;
}

.settings.content {
    width: 40vw;
    padding: 10px;
    margin-bottom: 10px;
}

.settings input[disabled] + label {
    opacity: 0.5;
}

div.pex-container,
div.gltf-container,
div.fbx-container,
div.inputs-container {
    background-color: var(--DarkGrayColor);
}

div.pex-container > .content-body,
div.gltf-container > .content-body,
div.fbx-container > .content-body {
    display: flex;
    flex-direction: column;
}

div.pex-container > .content-body[hidden],
div.gltf-container > .content-body[hidden],
div.fbx-container > .content-body[hidden] {
    display: none;
}

div.left-panel .pex.content {
    padding: 10px 5px;
    margin-top: 10px;
    order: 9999;
}

div.content.content-array {
    padding: 0 0 0 10px;
}

div.content.content-array .content-body {
    margin-top: 5px;
}

.gltf-container:not([hiddenstate]) .pex.content[hiddenstate],
.fbx-container:not([hiddenstate]) .pex.content[hiddenstate],
.pex-container:not([hiddenstate]) .pex.content[hiddenstate],
.gltf-container[hiddenstate],
.fbx-container[hiddenstate],
.pex-container[hiddenstate] {
    opacity: 0.3;
}

.pex.content[hiddenstate] .eye-icon,
.gltf-container[hiddenstate] > .content-header .eye-icon,
.fbx-container[hiddenstate] > .content-header .eye-icon,
.pex-container[hiddenstate] > .content-header .eye-icon,
.eye-slash-icon {
    display: none;
}

.pex.content[hiddenstate] .eye-slash-icon,
.gltf-container[hiddenstate] > .content-header .eye-slash-icon, 
.fbx-container[hiddenstate] > .content-header .eye-slash-icon, 
.pex-container[hiddenstate] > .content-header .eye-slash-icon {
    display: block;
    height: 25px;
}

.settings textarea,
.pex textarea {
    background-color: var(--LightBlack);
    width: 100%;
    border: 0;
}

.pex select {
    font-size: max(min(0.9vw, 20px), 10px);
    display: block;
    padding: 0;
    color: var(--Orange);
    border-style: solid;
    margin: 5px 0;
}

.pex select option {
    color: var(--Orange);
}

.pex .icon-mapping {
    width: 1.5vw;
    height: 0.6vw;
}

.pex h3 {
    font-size: max(0.9vw, 10px);
    padding-right: 50px;
    margin: 0;
}

.pex-view-mapped .pex:not(.pex-set) {
    display: none;
}

.pex-view-unmapped .pex-set {
    display: none;
}

.pex.pex-set .pex-new-title {
    color: var(--Orange);
    display: block;
}

.pex-new-title {
    display: none;
}

div.content h2.pex-title {
    margin: 0;
    font-size: max(0.9vw, 10px);
    padding-right: 50px;
}

div.content h3.pex-title {
    margin: 0 0 10px;
    font-size: max(0.8vw, 10px);
    font-weight: normal;
    padding-right: 50px;
}

.pex-button-background,
.pex-button-background2 {
    background-color: var(--Black);
    position: absolute;
    height: 100%;
    right: -5px;
    top: 0;
    width: 95px;
    border-radius: 5px;
}

.pex-button-background2 {
    width: 30px;
}

.gltf-content h2 {
    padding-right: 20px;
}

.gltf-content p {
    margin: 0;
}

div.left-panel .gltf-content .gltf-content {
    padding: 10px 0 0 10px;
}

.switch-context {
    margin-top: 10px;
    width: 100%;
    font-size: 1vw;
}

.swal-overlay {
    z-index: 101;
}

.swal-modal,
.swal-icon::before,
.swal-icon::after,
.swal-icon--success__hide-corners {
    background-color: var(--LightBlack);
}

.swal-footer {
    text-align: center;
}

.swal-title,
.swal-text {
    color: var(--White);
    text-align: center;
}

.swal-button-container,
.swal-button {
    width: 100%;
    margin: 0;
}

.swal-button-container + .swal-button-container {
    margin-top: 10px;
}

.swal-button {
    background-color: var(--Blue);
    box-shadow: none !important;
    color: var(--White);
}

.swal-button:not([disabled]):hover {
    background-color: var(--DarkBlue);
}

.swal-button--danger {
    background-color: var(--Orange);
}

.swal-button--danger:not([disabled]):hover {
    background-color: var(--DarkOrange);
}

.wizard-button-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.url-import-container {
    display: flex;
    align-items: center;
    gap: 10px; 
    margin-bottom: 1vh;
}

.step-gallery-left-panel-input .blue-button,
.step-gallery-left-panel-input .red-button {
    padding: 5px 10px 0 10px;
}

.step-artifacts-select-active {
    border: 5px solid var(--White);
}

.step-artifacts-active .artifact-selected {
    border: 5px solid var(--Blue) !important;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.artifact-import-collapse {
    background-color: var(--Black);
    padding: 1vw;
    border-radius: 10px;
    overflow: scroll;
}

.artifact-loaded-link {
    margin: 0.3vw;
    max-width: 100%;
}

.artifact-preview-button {
    font-size: 0.7vw;
    width: 100%;
    background-color: transparent;
    border-color: transparent;
}

.imported-artifact-files {
    overflow: auto;
}

.step-gallery-import h3 {
    margin: 0;
}

.artifact-container {
    position: relative;
    /* border: 5px solid transparent; */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    width: 20vw;
    background-color: var(--Black);
    justify-content: center;
    margin-right: 5px;
    cursor: pointer;
    height: 20vh;
    overflow: hidden;
    padding: 1vh;
    min-height:165px;
}

.form-container select {
    font-size: max(0.9vw, 10px);
    border-style: solid;
}

.artifact-img {
    margin: auto;
    height: 18vh;
    width: 14vw;
}

.preview-media-container {
    width: 80vh;
    height: auto;
}

.preview-media-container img,
.preview-media-container video {
    width: 100%;
}

.drag-area {
    background-color: var(--Black);
    border: 2px dotted var(--MidGrayColor);
    border-radius: 4px;
}