@charset "utf-8";
/* =============================== COMMON ========================== */
/*
TF Green:	rgb 131 166 3	#83a603
TF Blue:	rgb 96 174 191	#60aebf

Red:		rgb 237 85 59	#ed553b
Gold:		rgb 242 177 52	#f2b134
Lt Green:	rgb 184 191 52	#b8bf34
Dk Green:	rgb 183 135 0	#538700
Blue:		rgb 0 124 156	#007c9c
Dk Blue:	rgb 38 85 115	#265573
Lt Blue:	rgb 26 148 216	#1a94d8
Lt Gray:	rgb 213 219 216	#d5dbd8
Dk Gray:	rgb 68 68 68	#444444
*/

/* =============================== COMMON ========================== */
html, * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font: 85%/130% 'Arial', Helvetica, sans-serif;
  transition: background-color 0.5s;
  min-height: 100%;
}

/* Background for legacy layout */
#bg {
  background-image: url("../images/loginscreen_nobox2.png");
  background-repeat: no-repeat;
  background-size: cover;
}

/* Legacy login page positions */
#loginlogo {
  left: 8rem;
  top: 8rem;
  position: fixed;
}

#caspioform {
  padding: 20px;
  border-radius: 5px;
  right: 10%;
  top: 20%;
  position: fixed;
  margin-right: 30px;
  background: #ffffff;
}

.copyright {
  font-size: .8rem;
  padding: 10px 30px;
}

#copyright {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

/* =============================== BOOTSTRAP TWO-COLUMN LOGIN ========================== */

.left-half {
  background-image: url("/images/loginscreen_nobox2.png");
  background-size: cover;
  background-position: center;
}

.right-half {
  background-color: white;
  overflow-y: auto;
}

.container-fluid,
.col-6 {
  padding: 0;
  margin: 0;
}

.logo-container {
  margin-top: 100px;
  z-index: 1000;
  margin-bottom: 20px;
  text-align: center;
}

/* =============================== MEDIA QUERIES ========================== */

/* Ultra-small screens (legacy fallback) */
@media (max-width: 320px) {
  #mastheadrt {
    display: none;
  }

  #caspioform {
    border-radius: 0;
    position: relative;
    background: #ffffff;
    left: 0;
    right: 0;
  }

  #copyright {
    display: none;
  }

  #loginlogo {
    width: 100%;
    height: auto;
    position: fixed;
    margin: 10px auto;
  }

  #logo, .logo {
    width: 200px;
    height: auto;
  }

  #bg {
    background-image: url("../images/loginscreen_nobox.jpg");
    background-size: 1100px;
  }

  #page-icon {
    display: none;
  }
}

/* Default desktop */
@media (min-width: 321px) {
  #mastheadrt {
    display: block;
  }
}

/* =============================== MOBILE — NEW LAYOUT ========================== */

@media (max-width: 767px) {

  /* Hide left half completely */
  .left-half {
    background-image: none !important;
    display: none !important;
  }

  /* Center Caspio DataPage */
  .right-half {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Change to `center` for vertical centering */
    padding: 20px;
    text-align: center;
  }

  .caspio-form {
    width: 100% !important;
    max-width: 400px;
    margin: 0 auto;
  }
}