/* ============================================================
 * AmFIRST REIT — consolidated inline-style bundle
 * Extracted from index.php to comply with strict
 * Content-Security-Policy (no 'unsafe-inline', no 'unsafe-hashes').
 * Loaded once via <link href="assets/css/inline.css" rel="stylesheet">
 * in header.php.
 * ============================================================ */

/* 1. .welcometext — homepage hero caption (was: <style> in index.php) */
.welcometext {
  font-size: 2.5rem;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .welcometext {
    font-size: 1rem;
    line-height: 1.1;
    margin-bottom: 0;
  }
}

/* 2. .carousel-img-full — used on every carousel <img> (was: style="width:100%") */
.carousel-img-full {
  width: 100%;
}

/* 3. .news-excerpt — grey excerpt text under each news card (was: style="color:#444444") */
.news-excerpt {
  color: #444444;
}

/* 4. .asset-portfolio-section — dark Asset Portfolio section (was: <section style="background: #282828;">) */
.asset-portfolio-section {
  background: #282828;
}

/* 5. .map-embed — Google Maps iframe (was: style="border:0;") */
.map-embed {
  border: 0;
}

/* 6. Navbar responsive rules — moved from <style> in footer.php (CSP-safe) */
@media (min-width: 992px) {
  #navbar {
    position: relative !important;
    background: transparent !important;
  }
  #navbar ul {
    align-items: center;
  }
  .mobile-nav-toggle {
    display: none !important;
  }
}

@media (max-width: 991px) {
  #navbar ul {
    display: none;
    flex-direction: column;
  }
  .mobile-nav-toggle {
    display: block !important;
  }
}

/* 7. Stock-info mobile/desktop views — moved from <style> in stock-info-corp.php */
.mobileview { display: block; }
.webview { display: none; }

@media (min-width: 1199px) {
  .mobileview { display: none; }
  .webview { display: block; }
}

.mobileview .sco {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
}

.mobileview .scos h1 {
  margin-bottom: 0;
  color: #c00e19;
  font-size: 50px;
  font-weight: 600;
}

.mobileview .sco h1 {
  margin-bottom: 0;
  color: #c00e19;
  font-size: 40px;
  font-weight: 600;
  text-align: center;
}

.mobileview .sco p {
  margin-bottom: 0;
  color: #000000;
  font-size: 20px;
  font-weight: 600;
}

.circle-bg {
  background: rgba(255, 255, 255, 0.3);
  padding: 20px;
  border-radius: 50%;
  height: 365px;
  width: 365px;
}

/* 8. Stock row min-height — was style="min-height: 400px;" */
.stock-row-web {
  min-height: 400px;
}

/* 9. Mobile stock price block — was style="max-width: 240px; margin: auto;" */
.stock-mobile-price {
  max-width: 240px;
  margin: auto;
}

/* 10. Mobile stock stats block — was style="max-width: 430px; margin: auto;" */
.stock-mobile-stats {
  max-width: 430px;
  margin: auto;
}

/* 11. Board-of-directors page styles (was: <style> in board-of-directors.php) */
.btn-custom-red {
  background-color: #bd0f18;
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  font-weight: 500;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.btn-custom-red:hover {
  background-color: #990c13;
  color: #ffffff;
}
.img-mx306 {
  max-width: 306px;
}
.min-hr {
  min-height: 110px;
}
@media (max-width: 1400px) {
  .min-hr {
    min-height: 140px;
  }
}

/* 12. Board-of-directors card text — was style="font-weight: 400;" */
.bod-card-text {
  font-weight: 400;
}

/* 13. Board-of-directors no-break spans — was style="white-space: nowrap;" */
.bod-nowrap {
  white-space: nowrap;
}
.textt-s{
  color: red; 
  font-weight: bold; 
  text-align: center;
}
/* ============================================================
 * SHARED UTILITY CLASSES — extracted from multiple pages
 * ============================================================ */

/* 14. .form-card — used by leasing.php, customer_care.php, customer-care.php, investor-enquiry.php, investors-enquiry.php */
.form-card {
  border: 2px solid #ced4da;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 20px;
}

/* 15. .form-title-red — red bold form heading (size 20px) used by leasing/customer_care/customer-care/investor-enquiry/corporate-directory */
.form-title-red {
  color: red;
  font-weight: bold;
  font-size: 20px;
}

/* 16. .form-title-red-sm — red bold form heading (no font-size) used by corporate-governance */
.form-title-red-sm {
  color: red;
  font-weight: bold;
}

/* 17. .form-title-red-center — red bold centered form heading used by senior-management */
.form-title-red-center {
  color: red;
  font-weight: bold;
  text-align: center;
}

/* 18. .contact-info-nowrap — was style="white-space: nowrap;" for phone numbers */
.contact-info-nowrap {
  white-space: nowrap;
}

/* 19. .body-justify — was style="width: 100%; line-height: 18px; text-align: justify; padding-top: 30px;" */
.body-justify {
  width: 100%;
  line-height: 18px;
  text-align: justify;
  padding-top: 30px;
}

/* 20. .body-justify-full — variant with min-height: 100% */
.body-justify-full {
  width: 100%;
  line-height: 18px;
  text-align: justify;
  padding-top: 30px;
  height: 100%;
}

/* 21. .row-red-border — was style="border-bottom: 1px solid #BF272D;" */
.row-red-border {
  border-bottom: 1px solid #BF272D;
}

/* 22. .row-orange-border — was style="border-bottom: 1px solid #F5911E;" */
.row-orange-border {
  border-bottom: 1px solid #F5911E;
}

/* 23. .row-grey-border — was style="border-bottom: 1px solid #e0e0e0;" */
.row-grey-border {
  border-bottom: 1px solid #e0e0e0;
}

/* 24. .th-left — was style="text-align: left;" on <th> elements */
.th-left {
  text-align: left;
}

/* 25. .arial-input — was style="width: 250px; font-family: Arial; font-size: 12px;" */
.arial-input {
  width: 250px;
  font-family: Arial;
  font-size: 12px;
}

/* 26. .arial-input-wide — was style="width: 690px; font-family: Arial; font-size: 12px;" for textarea */
.arial-input-wide {
  width: 690px;
  font-family: Arial;
  font-size: 12px;
}

/* 27. .arial-submit — was style="font-family: Arial; font-size: 12px;" on submit/reset */
.arial-submit {
  font-family: Arial;
  font-size: 12px;
}

/* 28. .list-square — was style="list-style-type: square;" on <ul> */
.list-square {
  list-style-type: square;
}

/* 29. .list-circle — was style="list-style-type: circle;" on <ul> */
.list-circle {
  list-style-type: circle;
}

/* 30. .sitemap-link — was style="text-decoration: none; color: #666666;" */
.sitemap-link {
  text-decoration: none;
  color: #666666;
}

/* 31. .sitemap-link-red — was style="text-decoration: none; color: #C1272D;" */
.sitemap-link-red {
  text-decoration: none;
  color: #C1272D;
}

/* 32. .hr-red — was <hr style="color: #C1272D;" /> (note: color doesn't apply to <hr>, but kept for consistency) */
.hr-red {
  color: #C1272D;
}

/* 33. .menu-active — was style="color: #BF272D;" (PHP-toggled current-page indicator) */
.menu-active {
  color: #BF272D;
}

/* 34. .min-h-650 — was style="min-height: 650px;" */
.min-h-650 {
  min-height: 650px;
}

/* 35. .anim-slide-up — was style="visibility: visible; animation-delay: 0.3s; animation-name: slideInUp;" */
.anim-slide-up {
  visibility: visible;
  animation-delay: 0.3s;
  animation-name: slideInUp;
}

/* 36. .anim-bounce-up — was style="visibility: visible;  animation-name: bounceInUp ;" (note: extra space in original) */
.anim-bounce-up {
  visibility: visible;
  animation-name: bounceInUp;
}

/* 37. .anim-bounce-up-delay — was style="min-height:72px;visibility: visible; animation-delay: 0.5s; animation-name: bounceInUp ;" */
.anim-bounce-up-delay {
  min-height: 72px;
  visibility: visible;
  animation-delay: 0.5s;
  animation-name: bounceInUp;
}

/* 38. .max-h-239 — was style="max-height:239px;" on images */
.max-h-239 {
  max-height: 239px;
}

/* 39. .mb-100-mh-300 — was style="margin-bottom:100px;min-height:300px;" */
.mb-100-mh-300 {
  margin-bottom: 100px;
  min-height: 300px;
}

/* 40. .min-h-100-no-radius — was style="min-height:100px; border-radius:0;" */
.min-h-100-no-radius {
  min-height: 100px;
  border-radius: 0;
}

/* 41. .row-bottom-border-default — was style="border-bottom: 1px solid;" (no color — kept as-is for legacy) */
.row-bottom-border-default {
  border-bottom: 1px solid;
}

/* 42. .iframe-full — was style="width: 100%;background: url(...);background-size: cover;min-height: 700px;display: flex;position: relative;width: calc(100% - var(--padding)* 2);" used on property hero <section> */
.iframe-full {
  width: 100%;
  background-position: top center;
  background-size: cover;
  min-height: 700px;
  display: flex;
  position: relative;
}

/* 43. .img-full — was style="width:100%;" on images */
.img-full {
  width: 100%;
}

/* 44. .biz-title — was style="text-decoration: underline #337ab7;" */
.biz-title {
  text-decoration: underline #337ab7;
}

/* 45. .biz-red — was style="color:#C00000;" */
.biz-red {
  color: #C00000;
}

/* 46. .biz-btn-img — was style="width:100%;max-width:550px;margin:auto;margin-bottom:30px" (note: no trailing ;) */
.biz-btn-img {
  width: 100%;
  max-width: 550px;
  margin: auto;
  margin-bottom: 30px;
}

/* 47. .biz-second-img — was style="width:100%;max-width:1000px;margin:auto;margin-bottom:30px" (no trailing ;) */
.biz-second-img {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  margin-bottom: 30px;
}

/* 48. .biz-col-justify — was style="width:100%;text-align:justify;" */
.biz-col-justify {
  width: 100%;
  text-align: justify;
}

/* 49. .hidden-default — was style="display: none;" on <option> */
.hidden-default {
  display: none;
}

/* 50. .bg-ir-banner — was style="background-image: url('img/ir-banner.png')" */
.bg-ir-banner {
  background-image: url('img/ir-banner.png');
}

/* 51. .pt-0 — was style="padding-top: 0px;" */
.pt-0 {
  padding-top: 0px;
}

/* 52. .modal-title-black — was style="color:#000;font-weight:bold;" */
.modal-title-black {
  color: #000;
  font-weight: bold;
}

/* 53. .modal-title-center — was style="text-align:center" */
.modal-title-center {
  text-align: center;
}

/* 54. .modal-qr-img — was style="max-width: 120px;" */
.modal-qr-img {
  max-width: 120px;
}

/* 55. .modal-pad-left — was style="padding-left:15px" (no trailing ;) */
.modal-pad-left {
  padding-left: 15px;
}

/* 56. .modal-text-sm — was style="font-size:14px" (no trailing ;) */
.modal-text-sm {
  font-size: 14px;
}

/* 57. .slider-container — was style="margin: auto; position: relative; top: 0px; left: 0px; width: 1349px; height: 471px;" */
.slider-container {
  margin: auto;
  position: relative;
  top: 0px;
  left: 0px;
  width: 1349px;
  height: 471px;
}

/* 58. .slider-slides — was style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 1349px; height: 471px;" */
.slider-slides {
  cursor: move;
  position: absolute;
  overflow: hidden;
  left: 0px;
  top: 0px;
  width: 1349px;
  height: 471px;
}

/* 59. .menu-sidebar — was style="width: 245px; height: 415px;" */
.menu-sidebar-contact {
  width: 245px;
  height: 415px;
}

/* 60. .menu-sidebar-properties — was style="width: 235px; height: 600px;" */
.menu-sidebar-properties {
  width: 235px;
  height: 600px;
}

/* 61. .disclaimer-body — was style="margin: 0; overflow-x:hidden; overflow-y:hidden;" */
.disclaimer-body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* 62. .disclaimer-p — was style="padding-left: 10px; padding-right: 10px;" */
.disclaimer-p {
  padding-left: 10px;
  padding-right: 10px;
}

/* 63. .script-body — was style="background:#111; color:white; font-family:sans-serif; padding:2rem;" */
.script-body {
  background: #111;
  color: white;
  font-family: sans-serif;
  padding: 2rem;
}

/* 64. .popout-main — was style="padding: 20px;" */
.popout-main {
  padding: 20px;
}

/* 65. .cg-charter-link — was style="color: #BF272D;" on charter link */
.cg-charter-link {
  color: #BF272D;
}

/* 66. .form — used by leasing/customer_care/customer-care/investor-enquiry/investors-enquiry form container */
.form {
  border: 2px solid #ced4da;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 20px;
}

/* 67. .cgTable and related — was <style> in corporate_governance.php */
.cgTable {
  width: 100%;
  max-width: 500px;
  border: 2px solid #f2f2f2;
  margin-bottom: 20px;
  height: 165px;
}
.cgTable td {
  padding: 20px;
  color: #000;
}
.cgTable td:first-child {
  width: 90px;
}
.cgTable td:last-child {
  width: 80px;
}
.fisrtImgCg {
  max-width: 80px;
}
.secondImgCg {
  max-width: 40px;
}

/* 68. .property-page p — was <style>p{text-align:justify}</style> in property pages */
/* Apply p{text-align:justify} globally to all paragraphs, similar to the original <style> in property pages */
p {
  text-align: justify;
}

/* 69. .contents, .title-top, .postform — was <style> in biz-club.php */
section { padding: 60px 0; }
.biz-club-page .contents { max-width: 1000px; margin: auto; border-bottom: 30px solid #C00000; }
.biz-club-page .text-center { text-align: center; }
.biz-club-page .title-top h2 { color: #000; font-size: 30px; margin-bottom: 0px; margin-top: 10px; font-weight: bold; }
.biz-club-page .title-top h1 { color: #C00000; font-size: 30px; margin-bottom: 10px; margin-top: 5px; font-weight: bold; }
.biz-club-page .contents p { font-size: 16px; }
.biz-club-page .postform {
  max-width: 550px;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* 70. .form-row, .button-red, h5 inside .biz-club-form-page */
.biz-club-form-page .contents { max-width: 1000px; margin: auto; }
.biz-club-form-page .text-center { text-align: center; }
.biz-club-form-page .title-top h2 { color: #000; font-size: 30px; margin-bottom: 0px; margin-top: 10px; }
.biz-club-form-page .title-top h1 { color: #C00000; font-size: 30px; margin-bottom: 10px; margin-top: 5px; }
.biz-club-form-page .contents p { font-size: 16px; }
.biz-club-form-page .form-row { margin-bottom: 30px; }
.biz-club-form-page .button-red {
  color: white;
  background: #C00000;
  font-size: 16px;
  padding: 8px 30px;
  border: 0;
  margin-bottom: 30px;
}
.biz-club-form-page h5 { font-size: 20px; }
.biz-club-form-page .mt-4 { margin-top: 30px; }

/* 71. .calendar-width — was <div style="width:885px;"> in financial_calendar.php */
.calendar-width {
  width: 885px;
}

/* 72. .box-alert — was <style> in investors.php */
.box-alert {
  background: rgba(191, 39, 45, 0.9);
  padding: 5px 15px;
  width: 700px;
  margin-top: 30px;
}
.box-alert p {
  color: white;
  text-align: center;
  font-size: 14px;
}

/* 73. #imgbag — was <style> in menu_properties.php */
#imgbag {
  background: url(images/tab_selected_03.png) no-repeat;
  display: none;
  width: 256px;
}

/* 74. Modal/popup styles (was <style> in main_popup.php family) */
.modal {
  position: fixed;
  z-index: 999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.8);
}
a sup {
  display: inline-block;
  text-decoration: none;
}
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 30px;
  border: 1px solid #888;
  width: 100%;
  max-width: 1000px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
}
@keyframes animatetop {
  from { top: -300px; opacity: 0; }
  to { top: 0; opacity: 1; }
}
.close {
  color: #000;
  opacity: 1;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover, .close:focus {
  color: #000;
  opacity: 1;
  text-decoration: none;
  cursor: pointer;
}
.modal-header {
  padding: 2px 16px;
  color: white;
}
.modal-body {
  padding: 30px;
}
.modal-footer {
  padding: 2px 16px;
  color: white;
}
.slideshow {
  z-index: -999999;
}
.bannerTable {
  width: 100%;
  max-width: 800px;
  margin: auto;
}
.bannerTable td {
  color: #000;
  font-size: 14px;
  padding: 10px;
  vertical-align: top;
  line-height: 1.5;
}
.bannerTable td span {
  font-size: 16px;
}

/* Modal extra styles (used by main_popup-location etc.) */
.modal-callout-box {
  padding: 15px;
  color: white;
  margin-top: 0;
  background: #333;
  border-radius: 15px;
}
.modal-link-black { color: #000; }
.modal-doc-link {
  border-bottom: 1px solid #000;
  font-size: 14px;
}
.modal-link-underline {
  color: #000;
  text-decoration: underline;
}
.modal-section-title {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 0.5em;
}
.modal-section-title-sm {
  text-align: center;
  margin-bottom: 0;
}
.modal-text-white-bold {
  color: white;
  font-weight: bold;
}
.modal-body-justify {
  text-align: left;
  max-width: 480px;
  margin: auto;
  padding-top: 0.5em;
  text-align: justify;
}
.modal-label-black-bold {
  color: #000;
  font-weight: bold;
  font-size: 16px;
}
.modal-body-center {
  max-width: 480px;
  margin: auto;
}
.modal-row-pad {
  padding: 10px 0;
}
.modal-label-bold {
  color: #000;
  font-weight: bold;
  margin: 0;
  font-size: 16px;
}
.modal-qr-small {
  width: 80px;
  margin-bottom: 15px;
}
.modal-section-title-bg {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 0.5em;
  background: #fff;
}

/* 75. #buorg and related — was <style> in script.html */
#buorg {
  font-family: sans-serif !important;
  font-size: 14px !important;
  background-color: #ffcc00 !important;
  color: #000 !important;
  padding: 10px !important;
  text-align: center !important;
  z-index: 99999 !important;
}
#buorg a, #buorg button {
  font-weight: bold;
  margin-left: 10px;
  text-decoration: underline;
  color: #000;
  background: #000;
  color: #fff;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#buorg button.close {
  background: transparent;
  color: #000;
  font-weight: bold;
}

/* 76. body { margin: 0; } — was <style> in stockChartv2.php */
body {
  margin: 0;
}


@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../../fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations'),
       url('../../fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('../../fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations'),
       url('../../fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
}

/* 77. Legacy property page layout (was: inline styles in mydin.php, prima_9.php, etc.) */
.legacy-prop-outer {
  border: 0px solid black;
  float: left;
  width: 700px;
}
.legacy-prop-map-wrap {
  width: 663px;
  float: left;
  padding: 15px;
}
.legacy-prop-body-justify {
  width: 100%;
  line-height: 18px;
  text-align: justify;
  padding-top: 30px;
  height: 100%;
}
.legacy-prop-map-frame {
  padding: 10px;
  border: 1px solid #A4A4A4;
  border-radius: 2px;
  height: 450px;
}
.legacy-prop-map-frame-500 { height: 500px; }
.legacy-prop-map-frame-400 { height: 400px; }
.legacy-prop-map-frame-610 { height: 610px; }
.legacy-prop-col-50 {
  width: 50%;
  float: left;
}
.legacy-prop-col-44 {
  width: 44%;
  float: right;
}
.legacy-prop-col-50-right {
  width: 50%;
  float: right;
}
.legacy-prop-content-2 {
  float: left;
  padding: 15px;
  padding-top: 30px;
}
.legacy-prop-content-2-simple {
  padding: 15px;
}
.legacy-prop-content-3 {
  width: 693px;
  height: 450px;
}
.legacy-prop-content-3-pad {
  padding: 10px;
}
.legacy-prop-footer {
  text-align: right;
  padding-right: 5px;
}
.map-link-blue {
  color: #0000FF;
  text-align: left;
}