:root {
  --viewport-height: 100vh; /* Full viewport height */
  --header-height: 60px; /* Height of the header */
  --divAreaStRow-height: 155px; /* Height of .divAreaStRow */
}

html,
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

/* .atsvr {
  width: 1920px;
  height: 950px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
} */

.atsvr {
  max-width: 1920px;
  height: var(--viewport-height); /* Use the variable */
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


/* Row Layout Viewer */
/* .atsvr .rowLytvr {
  display: flex;
  margin-top: 0px;
} */

.rowLytvr {
  display: flex;
  width: 100%;
  height: calc(var(--viewport-height) - var(--header-height) - var(--divAreaStRow-height)); /* Use variables */
  position: relative;
  /* background-color: #006653; */
}

/* Master Layout Column */
.atsvr .divMstLyt {
  width: 30%; /* 30% of the parent container */
  border-right: 1px solid #e8e8e8;
  padding-right: 1%; /* Adjust padding relative to width */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 1%;
  position: relative;
  height: 100%; /* Full height */
  
}

/* .atsvr .imgMstLyt {
  width: 100%;  Ensures the image fits inside the container 
  height: auto;
} */


.atsvr .imgMstLyt {
  /* width: auto;  
  max-height: 90%; */
  width: 100%;
  height: auto;
}

/* Layout Maps Display Column (Right Side) */
.atsvr .divLytMapsDisp {
  width: 70%; /* 70% of the parent container */
  display: flex;
  flex-direction: column;
  padding-left: 2%;
  position: relative;
  height: 100%; /* Full height */
}

.atsvr .divLytSelectArea {
  width: 100%;
  height: 91%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.atsvr .imgLytShapes {
  max-width: 100%;
  max-height: 100%;
}


.atsvr .divLytDespText {
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically center the content */
  width: 100%; /* Full width */
  margin-bottom: 2px;
  position: absolute;
  bottom: 0;
  
}

.atsvr .divLytTitle {
  flex: 0 0 70%; /* Take up 70% of the width */
  display: flex;
  align-items: center; /* Vertically center the text */
  padding-right: 15px; /* Add some spacing between columns */
}

.atsvr .divLytTitle span {
  color: #ff5c28;
  margin-right: 10px;
  font-weight: bolder;
}

.atsvr .divLytOpts {
  flex: 0 0 30%; /* Take up 30% of the width */
  display: flex;
  justify-content: flex-end; /* Align content to the right */
  align-items: center; /* Vertically center the content */
}

.atsvr .divLytButtons {
  display: flex;
  gap: 10px; /* Add spacing between buttons */
}

.atsvr .divLytCompass {
  /*margin-left: 35px; 
  margin-right: 30px;*/
  padding-left: 20px;
  padding-right: 40px;
}



/* Area Statement Row */
/* .atsvr .divAreaStRow {
  margin-top: 5px;
  display: flex;
  border-top: solid 1px #e8e8e8;
} */

/* Start area stment row css */

.divAreaStRow {
  position: relative; /* Ensure relative positioning for absolute elements inside */
  overflow-y: auto; /* Allow vertical scroll */
  overflow-x: hidden; /* No horizontal scroll */
  min-height: var(--divAreaStRow-height);
  max-height: var(--divAreaStRow-height); /* Limit height */
  background-color: #FAF5F3;
  padding: 0px;
}

.atsvr .divStDetails {
  width: 100%;
  padding-right: 1%;
  padding-left: 1%;
}

/* Start loader css  */
#divProcLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.8); /* Light transparent background */
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  background-color: white;
  padding: 20px 30px;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Subtle drop shadow */
}

#loaderImage {
  max-width: 30vw; /* Responsive */
  max-height: 30vh;
  object-fit: contain;
}

p {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
/* Ends loader css  */


/* .atsvr .shapemark {
  fill: rgba(254, 234, 227, 0.3); 
  stroke: rgba(244, 146, 114, 0.4); 
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.3s, stroke 0.3s;
} */

.atsvr .shapemark {
  /* fill: rgba(0, 128, 0, 0.5); 
  stroke: rgba(0, 100, 0, 0.8); */

  /*18-feb-2024 client asked to no color */
  /*fill: rgba(254, 234, 227, 0.2); 
  stroke: #f8c8b9; 
  stroke-width: 2;*/

  /*fill: rgba(254, 234, 227, 0); */

   fill: rgba(254, 234, 227, 0); 

    
    pointer-events: all; /* Ensure SVG polygons can be hovered */
    cursor: none; /* Hide the default cursor */


}



.atsvr .shapemark:hover,
.atsvr .shapemark.active {

  /*18-feb-2024 client asked to no color */
  /*fill: rgba(254, 234, 227, 0.5); 
  stroke: #f49272; 
  stroke-width: 3;*/

  /* fill: rgba(254, 234, 227, 0);  */

}

/* Subunit icon */
@keyframes fadePulse {
  50% { opacity: 0.6; transform: scale(1.1); }
  100% { opacity: 0.4; transform: scale(1); }
}

.subunit-icon {
  width: 16px;
  height: 16px;
  background: #ff5c28;
  color: black;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ff5c28;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  animation: fadePulse 1s infinite ease-in-out; /* Reduced from 2s to 1s */
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out; /* Slightly faster transitions */
  margin: 0 auto;
}

/* Move up slightly and change colors on hover */
.subunit-icon:hover {
  background: #ff5c28;
  color: white;
  opacity: 1; /* Fully visible on hover */
  transform: translateY(-3px); /* Slight lift effect */
}

/* Restore opacity after hover */
.subunit-icon:not(:hover) {
  opacity: 0.4;
}





/* Subunit menu */
.subunit-menu-container {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  padding: 5px;
  border-radius: 5px;
}

.subunit-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.subunit-menu li {
  padding: 5px 10px;
  cursor: pointer;
}

#divCompass {
  display: inline-block;
}

.compass-container {
  width: 45px;
  height: 45px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compass-arrow {
  width: 45px; /* Adjust size as needed */
  height: 45px; /* Adjust size as needed */
}

.atsvr .lvbtn {
  font-size: 12px;
  text-decoration: none;
  color: #ff5c28; /* Orange color */
  border-radius: 25px;
  padding: 10px;
  border: 1px solid #d0d0d0; /* Border color */
  margin-left: 10px;
  transition: background-color 0.3s ease, color 0.3s ease; /* Add transition for smooth effect */
}

.atsvr .lvbtn:hover {
  background-color: #006653; /* Mouse over color */
  color: #fff; /* Change text color to white on hover */
}

/* Header Row */
/* .atsvr .headerRow {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 5px;
} */


.atsvr .headerRow {
  height: 60px; /* Fixed height */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px; /* Add padding for aesthetics */
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0; /* Prevent shrinking */
}

#pagePlans, #page3dView, #pageVirtualTour {
  flex-grow: 1; /* Allow this div to grow */
  display: flex;
  flex-direction: column; /* Stack children vertically */
  overflow: hidden; /* Prevent overflow */
}

#pagePlans {
  flex-grow: 1; /* Allow this div to grow */
  display: flex;
  flex-direction: column; /* Stack children vertically */
}

/* Start header row css */

.atsvr .headerRow .logo {
  width: 265px;
  height: 50px;
  display: inline-block;
}

.atsvr #imgPrj {
  height: inherit;
}

.atsvr .headerRow .links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-right: 30px;
}

.atsvr .headerRow .links a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  gap: 5px;
}

.atsvr .headerRow .links a img {
  height: 20px; /* Adjust size as needed */
  width: auto;
}

/* Navigation Dot */
.atsvr .headerRow .navDot {
  width: 6px;
  height: 6px;
  background-color: #d0d0d0;
  border-radius: 50%;
}

/* Project Menu */
.atsvr .armlv-prjmenu {
  position: relative;
  display: inline-block;
}

.atsvr .armlv-prjmenu .menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #d0d0d0;
  border-radius: 5px;
  list-style: none;
  padding: 5px 0;
  min-width: 150px;
  display: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.atsvr .armlv-prjmenu .menu-dropdown.active {
  display: block;
}

.atsvr .armlv-prjmenu .menu-dropdown li {
  padding: 8px 15px;
}

.atsvr .armlv-prjmenu .menu-dropdown li a {
  text-decoration: none;
  color: #333;
  display: block;
}

.atsvr .armlv-prjmenu .menu-dropdown li:hover {
  background: #f5f5f5;
}

body.blackpagebg .atsvr .headerRow .links a img {
  filter: brightness(0) invert(1); /* Invert colors to make icons white */
}

/* Ends header row css */


.atsvr .lvrpage {
  display: none; /* Initially hidden */
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.atsvr .lvrpage.slide-up {
  opacity: 1;
  transform: translateY(0);
}

/* Center the Virtual Tour Button */
.atsvr .div3dVirtualTourLaunch {
  flex-grow: 1; /* Allow this to grow to take space */
  display: flex;
  justify-content: center; /* Center horizontally */
}


.atsvr #pageVirtualTour {
  height: 100vh;
  overflow: hidden; /* Prevent scrollbars if content exceeds */
}

.atsvr .ifrmvtour {
  width: 100%;
  height: 100%; /* 100% height to fill the parent container */
  border: none; /* Remove borders */
}

.atsvr #iframeLoader {
  display: none; /* Hidden by default */
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #333; /* Loader text color */
  z-index: 1000; /* Ensure loader is above other content */
}




/* .atsvr .divstright {
  padding-top: 20px;;
  text-align: right;
}

.atsvr .divstrightLine1 {
  font-size: 12px;
}

.atsvr .divstrightLine2 {
  font-size: 16px;
  font-weight: bold;
} */


/* Layout floor in name */


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#divAreaStmtText {
  opacity: 0; /* Start transparent */
  text-align: center;
}



.divLayoutInName
{
  position: absolute; /* Position relative to .divMstLyt */
  bottom: 5px; /* Adjust as needed */
  
  padding-top: 5px;
  padding-bottom: 1px;
  font-weight: normal;
  font-size: larger;
  color: #000;
  text-transform: capitalize;
  z-index: 10;
  width: 100%;
  text-align: center;
}


.leftTopCap
{
  position: absolute; /* Position relative to .divMstLyt */
  top: 10px; /* Adjust as needed */
  
  padding-top: 1px;
  padding-bottom: 3px;
  font-weight: normal;
  font-size: larger;
  color: #000;
  text-transform: capitalize;
  z-index: 10;
  width: 100%;
  text-align: center;
}

.rightTopCap
{
  position: absolute; /* Position relative to .divMstLyt */
  top: 10px; /* Adjust as needed */
  
  padding: 5px;
  font-weight: normal;
  font-size: larger;
  color: #000;
  text-transform: capitalize;
  z-index: 10;
  width: 100%;
  text-align: left;
}


/* Start the virtual tour div page */

.atsvr #page3dView {

  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height)); /* Full height minus header */
}

/* 3D Photo */
.atsvr .div3dPhoto {
  flex-grow: 1; /* Take up remaining space */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Prevent image from overflowing */
  position: relative; /* For absolute positioning of the image */
}

.atsvr .div3dPhoto img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the image */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* Maintain aspect ratio */
}

/* Bottom Row: Virtual Tour & Right Section */
.atsvr .div3dBottomRow {
  position: absolute;
  bottom: 0;
  right: 10px;
  padding: 20px;
  z-index: 10; /* Ensure it's above the image */

}

/* Ends the virtual tour div page */



/* Eye icon cursor */
#cursorEye {
  position: absolute;
  width: 48px; /* Increased size */
  height: 48px; /* Increased size */
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  color: #d45a3a; /* Darker color */
  z-index: 9999;
  cursor: none; /* Hide the default cursor */
  opacity: 0; /* Hidden by default */
}

/* Show the eye icon on hover */
.atsvr .shapemark:hover ~ #cursorEye {
  opacity: 1;
}




.btn-clear-selected {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 5000;
  width: 24px;
  height: 24px;
  background-color: #FF5C28;
  color: white;
  border: none;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.btn-clear-selected:hover {
  background-color: #e04e20;
}



/* Improved Table Styling */
.areastmtcap {
  width: 100%;
  padding: 3px 0;
  color: #FF5C28; /* Keep your color */
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: bold;
  text-align: center;
  z-index: 10; /* Ensure it stays on top */
  background-color: #FAF5F3; /* Match background for better visibility */
}

.custom-area-statement-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2px; /* Ensure caption doesn't overlap */
  font-size: clamp(10px, 1vw, 14px); /* Responsive font size */
  table-layout: fixed; /* Ensures proper column width */
  border: 1px solid #E8E8E8; /* Ensures a full border around the table */
}

.custom-area-statement-table th,
.custom-area-statement-table td {
  padding: clamp(5px, 0.4vw, 5px); /* Responsive padding */
  font-size: clamp(10px, 0.9vw, 13px); /* Responsive font size */
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words if needed */
  overflow-wrap: break-word; /* Ensure content fits */
  text-align: left;
  border: 1px solid #E8E8E8; /* Ensure all cells have a 1px border */
  vertical-align: middle; /* Align text vertically */
}

.custom-area-statement-table th {
  font-size: clamp(10px, 0.9vw, 11px); /* Responsive font size */
  color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
  border-top: 1px solid #E8E8E8; /* Ensure the top border is consistent */
}



.custom-area-statement-table th:first-child,
.custom-area-statement-table td:first-child {
  width: 20%;
}

/* Ensure div inside <th> doesn't break layout */
.custom-area-statement-table th .stminsize {
  display: block; /* Keeps it below the text */
  font-size: 10px; /* Adjust as needed */
  white-space: nowrap; /* Prevents breaking in multiple lines */
}


/* Ends area stment row css */

.atsvr .divInfoSelSeries {
  color: rgba(0, 0, 0, 0.5);
  font-size: large;
  
height: var(--divAreaStRow-height);
  /* Center vertically */
  display: grid;
  align-items: center;
  
}

/* 12-sep-2025 */
/* #imgLtyCompass{
    transform: rotate(90deg);
} */