body {
    overflow: hidden;
    position: relative;
    height: 100vh; /* Takes full viewport height */
    width: 100vw; /* Takes full viewport width */
}

.console {
    overflow-y: scroll;
    height: 150px;
    width: calc(100% - 32px);
    resize: vertical;
    border: 1px solid rgb(160, 160, 160);
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    padding: 5px 5px;
    z-index: 2;
}

.buttongrid {
    top: 5px;
    left: 0px;
    width: 470px;
    height: 65px;
    display: grid; /* Defines the element as a grid container */
    grid-template-columns: 65px 65px 65px 65px 65px 65px 65px 65px 65px 65px 65px;
    grid-template-rows: 65px; 
    gap: 2px; 
    padding: 2px; /* For visualization */
}

.button {
    width: 55px;
    height: 55px;
    border: none;
    border-radius: 50%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    padding: 5px 5px;
    background-color: rgb(211,227,253);
    box-shadow: 3px 3px rgb(160, 160, 160);
    z-index: 10;
}

#download {
    background: url("./SaveButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);
    padding: 5px 5px;
}

#revert {
    background: url("./UndoButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);
    padding: 5px 5px;
}

#exportOBJ {
    background: url("./OBJButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);
    padding: 5px 5px;
}

#exportSTL {
    background: url("./STLButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);
    padding: 5px 5px;
}

#clean {
    background: url("./GuideButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);
    padding: 5px 5px;
}

#info {
    background: url("./iButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);
    padding: 5px 5px;
}

#plan {
    background: url("./PlanButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);
    padding: 5px 5px;
}

#profile {
    background: url("./ProfileButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);
    padding: 5px 5px;
}

#front {
    background: url("./FrontButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);
    padding: 5px 5px;
}

.button:hover {background-color: rgb(191,207,233)}

#download:hover {
    background: url("./SaveButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
    padding: 5px 5px;
}

#revert:hover {
    background: url("./UndoButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
    padding: 5px 5px;
}

#exportOBJ:hover {
    background: url("./OBJButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
    padding: 5px 5px;
}

#exportSTL:hover {
    background: url("./STLButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
    padding: 5px 5px;
}

#clean:hover {
    background: url("./GuideButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
    padding: 5px 5px;
}

#info:hover {
    background: url("./iButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
    padding: 5px 5px;
}

#plan:hover {
    background: url("./PlanButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
    padding: 5px 5px;
}

#profile:hover {
    background: url("./ProfileButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
    padding: 5px 5px;
}

#front:hover {
    background: url("./FrontButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
    padding: 5px 5px;
}

.button:active {
    background-color: rgb(171,187,213);
    box-shadow: 1px 1px rgb(107, 107, 107);
    transform: translateX(2px) translateY(2px);
}

#download:active {
    background: url("./SaveButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
    padding: 5px 5px;
}

#revert:active {
    background: url("./UndoButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
    padding: 5px 5px;
}

#exportOBJ:active {
    background: url("./OBJButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
    padding: 5px 5px;
}

#exportSTL:active {
    background: url("./STLButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
    padding: 5px 5px;
}

#clean:active {
    background: url("./GuideButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
    padding: 5px 5px;
}

#info:active {
    background: url("./iButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
    padding: 5px 5px;
}

#plan:active {
    background: url("./PlanButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
    padding: 5px 5px;
}

#profile:active {
    background: url("./ProfileButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
    padding: 5px 5px;
}

#front:active {
    background: url("./FrontButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
    padding: 5px 5px;
}

.file-input.scripts {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    padding: 5px 5px;
    box-shadow: 3px 3px rgb(160, 160, 160);
    z-index: 20;
}

.file-input.scripts:hover {
    background-color: rgb(191,207,233);
}

.file-input.scripts:active {
    background-color: rgb(171,187,213);
    box-shadow: 1px 1px rgb(107, 107, 107);
    transform: translateX(2px) translateY(2px);
}

#jsfilebutton {
    background: url("./OpenButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);
   
}

#jsfilebutton:hover {
    background: url("./OpenButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
    
}

#jsfilebutton:active {
    background: url("./OpenButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
    
}

#pngfilebutton {
    background: url("./pngOpenButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);
    
}

#pngfilebutton:hover {
    background: url("./pngOpenButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
    
}

#pngfilebutton:active {
    background: url("./pngOpenButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
    
}

.file-input {
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.file-input > * {
    pointer-events: none;
}

.file-input > input[type="file"] { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: all;
    cursor: default;
    height: 100%;
    width: 100%;
}

.infodropdown {
    position: absolute;
    top: 75px;
    left: 320px;
    width: 150px;
    height: 100px;
    display: none;
    grid-template-columns: 150px;
    grid-template-rows: 35px 35px 35px; 
    z-index: 3;
    padding: 5px 5px;
    background-color: rgb(211,227,253);
    border: none;
    border-radius: 10px;
}

.dropdownitem {
    width: 150px;
    height: 35px;
    border: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    padding: 5px 5px;
    background-color: rgb(211,227,253);
    z-index: 3;
}

.dropdownitem:hover {

    background-color: rgb(191,207,233);

}

.dropdownitem:active {

    background-color: rgb(171,187,213);

}

#closefreeform {
    position: absolute;
    top: 300px;
    right: 300px;
    width: 25px;
    height: 25px;
    border: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    z-index: 12;

}

#minimizefreeform {
    position: absolute;
    top: 300px;
    right: 300px;
    width: 25px;
    height: 25px;
    border: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    z-index: 12;

}

#lock2D {
    position: absolute;
    top: 300px;
    right: 250px;
    width: 25px;
    height: 25px;
    border: none;
    z-index: 12;
    background: url("./pngLockButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);

}

#lock2D:hover {
    background: url("./pngLockButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
  
}

#lock2D:active {
    background: url("./pngLockButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
 
}

#unlock2D {
    position: absolute;
    top: 300px;
    right: 250px;
    width: 25px;
    height: 25px;
    border: none;
    z-index: 12;
    background: url("./pngUnlockButtonIdle.png") no-repeat center center;
    background-color: rgb(211,227,253);

}

#unlock2D:hover {
    background: url("./pngUnlockButtonHover.png") no-repeat center center;
    background-color: rgb(191,207,233);
  
}

#unlock2D:active {
    background: url("./pngUnlockButtonActive.png") no-repeat center center;
    background-color: rgb(171,187,213);
 
}

.SurfaceGuidesDialog {
    width: 300px;
    max-width: 100%;
    padding: 0;
    margin: 0;
    align-items: center;
    resize: both; /* Allows resizing horizontally and vertically */
    overflow: auto; /* Required for resize to work, also adds scrollbars if content overflows */
    background-color: white;
    position: absolute;
    top: 75px;
    left: 320px;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #888;
    border-radius: 8px;
}

.FacetNameDialog {
    width: 300px;
    max-width: 100%;
    padding: 0;
    margin: 0;
    align-items: center;
    resize: both; /* Allows resizing horizontally and vertically */
    overflow: auto; /* Required for resize to work, also adds scrollbars if content overflows */
    background-color: white;
    position: absolute;
    top: 75px;
    left: 50px;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #888;
    border-radius: 8px;
}

.FacetNamePairsDialog {
    width: 300px;
    max-width: 100%;
    padding: 0;
    margin: 0;
    align-items: center;
    resize: both; /* Allows resizing horizontally and vertically */
    overflow: auto; /* Required for resize to work, also adds scrollbars if content overflows */
    background-color: white;
    position: absolute;
    top: 550px;
    left: 50px;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #888;
    border-radius: 8px;
}

.EdgeIDTripletsDialog {
    width: 300px;
    max-width: 100%;
    padding: 0;
    margin: 0;
    align-items: center;
    resize: both; /* Allows resizing horizontally and vertically */
    overflow: auto; /* Required for resize to work, also adds scrollbars if content overflows */
    background-color: white;
    position: absolute;
    top: 550px;
    left: 50px;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid #888;
    border-radius: 8px;
}

.dialog-header {
    display: flex;
    height: 10%;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(229, 238, 255);
    border-bottom: 1px solid #eee;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.dialog-header h2 {
    margin-left: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.dialog-controls button {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  margin-left: 5px;
  padding: 10px;
  border-radius: 3px;
}

.dialog-controls button:hover {
    background-color: rgb(191,207,233);
}

.SurfaceGuides {
    resize: both; /* Allows resizing horizontally and vertically */
    overflow: auto;
    max-height: 700px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10px;
    margin-bottom: 10px;
    height: calc(85% - 20px); /* Adjust height to account for margins */
    background-color: white;
    border: 1px solid rgb(128, 128, 128);
    cursor: pointer;

}

.FacetNames {
    resize: both; /* Allows resizing horizontally and vertically */
    overflow: auto;
    max-height: 400px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10px;
    margin-bottom: 10px;
    height: calc(85% - 20px); /* Adjust height to account for margins */
    background-color: white;
    border: 1px solid rgb(128, 128, 128);
    cursor: pointer;

}

.FacetNamePairs {
    resize: both; /* Allows resizing horizontally and vertically */
    overflow: auto;
    max-height: 400px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10px;
    margin-bottom: 10px;
    height: calc(85% - 20px); /* Adjust height to account for margins */
    background-color: white;
    border: 1px solid rgb(128, 128, 128);
    cursor: pointer;

}

.EdgeIDTriplets {
    resize: both; /* Allows resizing horizontally and vertically */
    overflow: auto;
    max-height: 400px;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10px;
    margin-bottom: 10px;
    height: calc(85% - 20px); /* Adjust height to account for margins */
    background-color: white;
    border: 1px solid rgb(128, 128, 128);
    cursor: pointer;

}

.SurfaceGuidesText {
    height: 14px;
    font-size: 14px;
    margin: 0;
    padding: 2px;
    font-family: Arial, sans-serif;
    background-color: #AAAAFF;
    align-items: left;
    cursor: pointer;
    
}

.SurfaceGuidesTextUnsel {
    height: 14px;
    font-size: 14px;
    margin: 0;
    padding: 2px;
    font-family: Arial, sans-serif;
    background-color: #FFFFFF;
    align-items: left;
    cursor: pointer;
    
}

.SurfaceGuidesText:hover {
    background-color: rgb(211,227,253);

}

.SurfaceGuidesText:active {
    background-color: rgb(171,187,213);
}

.SurfaceGuidesTextUnsel:hover {
    background-color: rgb(211,227,253);

}

.SurfaceGuidesTextUnsel:active {
    background-color: rgb(171,187,213);
}

.ID {
    vertical-align: bottom; 
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    height: 22px;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid rgb(51, 51, 51);
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    background-color: rgb(255, 255, 255);
    padding: 5px 5px;
}

.PW {
    margin-left: auto;
    margin-right: auto;
}

.PW input[type="password"] {
    vertical-align: bottom; 
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    height: 22px;
    width: 150px;
    border: 2px solid rgb(51, 51, 51);
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    background-color: rgb(255, 255, 255);
    padding: 5px 5px;
}

.loginbuttongrid {
    display: grid; 
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto; 
    place-items: center;
    height: 166px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    gap: 2px; 
    padding: 2px;
    position: absolute;
    top: 50%;
    left: 50%;

}

.loginbutton {
    width: 120px;
    height: 25px;
    border: none;
    border-radius: 5%;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    background-color: rgb(142, 217, 115);
    padding: 5px 5px;
    box-shadow: 3px 3px rgb(67, 122, 47);
}

.loginbutton:hover {background-color: rgb(112, 187, 85)}

.loginbutton:active {
    background-color: rgb(82,157,55);
    box-shadow: 1px 1px rgb(41,78,27);
    transform: translateX(2px) translateY(2px);
}

.loginbutton2 {
    width: 170px;
    height: 25px;
    border: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    color: rgb(142, 217, 115);
    background-color: transparent;
    padding: 5px 5px;
}

.loginbutton2:hover {color: rgb(112, 187, 85)}

.loginbutton2:active {
    color: rgb(82,157,55);
    transform: translateX(2px) translateY(2px);
}

.loginpage {
    background: url('./background.jpg'); /* Replace with your image file name or path */
    background-size: cover; /* Ensures the image covers the entire background */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center center; /* Centers the image */
    background-attachment: fixed; /* Optional: Makes the background image fixed while scrolling */
    position: relative;
    height: 100vh; /* Takes full viewport height */
    width: 100vw; /* Takes full viewport width */    
    z-index: 10;

}