@font-face {
  font-family: "RobotoMono";
  src: url("RobotoMono-SemiBold.ttf");
}

/* body {
  font-family: "RobotoMono";
} */

/* Start custom style */

/* Reset default margins and paddings for all elements */
body, h1, h2, h3, p, ul, li {
  margin: 0;
  padding: 0;
  font-family: "RobotoMono";
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f2f2f2; /* Background color for the entire page: Light Gray */
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Align header items on the same row with space between them */
  background-color: #fff; /* Header background color: White */
  padding: 10px 20px;
  height: 10vh; /* Set header height to 10% of the viewport height */
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Align logo and header text on the same row with space between them */
  flex: 1; /* Allow the header container to expand and take all available space */
}

header img {
  max-height: 60px; /* Adjust the logo height as needed */
  margin-right: 20px; /* Add some spacing between the logo and the heading */
}

header h1 {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #007bff; /* Header text color: Blue */
}

header p {
  font-size: 1.2rem;
  color: #007bff; /* Header text color: Blue */
}

/* Add styles for the navigation bar */
.header-container nav {
  display: flex;
  align-items: center;
}

.header-container nav ul {
  list-style: none;
  display: flex;
}

.header-container nav ul li {
  margin-left: 20px;
}

.header-container nav ul li a {
  color: #666; /* Navigation bar link text color: Dark Gray */
  text-decoration: none;
  font-size: 1.2rem;
}

.header-container nav ul li a:hover {
  text-decoration: underline;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0; /* Add some padding for separation */
  height: 85vh; /* Set main section height to 85% of the viewport height */
  background-color: #d6e9ff; /* Main section background color: Subtle Blue */
}

main .container {
  display: flex;
  justify-content: space-between; /* Arrange containers with space in between */
  align-items: center; /* Vertically center items */
  flex-wrap: wrap; /* Wrap the containers when screen size is small */
}

main .hero-container {
  text-align: center;
  margin-bottom: 30px;
  margin-left: 1em;
  flex-basis: 50%; /* Set the width to 50% of the available space */
}

main .hero-container img {
  max-width: 100%;
}

main .cta-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-basis: 45%; /* Set the width to 45% of the available space */
}

main .main-text {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333; /* Text color: Dark Gray */
}

main .cta-button {
  display: block;
  width: 200px;
  margin-top: 10px;
  padding: 15px 30px;
  background-color: #66c068; /* Primary color: Muted Green */
  color: #fff; /* Button text color: White */
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1.2rem;
}

main .cta-button:hover {
  background-color: #4d944a; /* Slightly darker shade of green on hover */
}

footer {
  background-color: #666; /* Footer background color: Dark Gray */
  text-align: center;
  padding: 20px 0;
  color: #fff; /* Footer text color: White */
}

footer nav ul {
  list-style: none;
  padding: 0;
}

footer nav ul li {
  display: inline-block;
  margin-right: 10px;
}

footer nav ul li a {
  color: #fff; /* Footer links text color: White */
  text-decoration: none;
  font-size: 1rem;
}

footer nav ul li a:hover {
  text-decoration: underline;
}


/* End custom style */

.linkDark {
  color: #36b936;
}

.linkLight {
  color: #1f6a1f;
}

#timeLabel {
  margin-right: 1em;
}

#themeLabel {
  margin-right: 1em;
}

#secondsLabel {
  margin-right: 1em;
}

#clockLabel {
  margin-right: 1em;
}

#container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 1em;
}

#mainDisplay {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 1em;
}

#toggleContainer {
  display: flex;
  flex-direction: row;
  margin-left: auto;
}

.toggle {
  display: flex;
  justify-content: right;
  margin-right: 1em;
}

#utcTime {
    font-size: 7em;
}

#utcLabel {
    font-size: 3em;
}

#searchBar {
  display: contents;
}

#emailBox.show {
  display: block;
}

#titleBox.show {
  display: block;
}

.baseInputField {
  margin-top: 2em;
  width: 20em;
  border-width: 0.2em;
  border-style: solid;
  border-radius: 0.5em;
  outline: none;  
  display: none;

  padding: 10px;
  font-size: 1.1em;
}

.baseInputField::placeholder {
  font-family: "RobotoMono";
  font-size: 1.0em;
  opacity: 100%;
  text-indent: 0.1em;
}

#baseInputField.show {
  display: block;
}

.inputField {
    border-style: solid;
    border-width: 0.15em;
    border-color: #53000f;
}

#descriptionBox {
  width: 100%;
  resize: vertical;
}

#descriptionBox.show {
  display: block;
}

.actionButton {
  background-color: transparent;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.scheduleButton {
  border: 2px solid #194616;
  color: #313d40;
  box-shadow: 0 2px 4px #0f44158f;
  background-color: transparent;
  padding: 10px 20px;
  font-size: 1.0em;
}

.hero-container {
  font-size: 3em;
}

.demoScheduleButton {
  border: 2px solid #194616;
  color: #313d40;
  box-shadow: 0 2px 4px #0f44158f;
  background-color: transparent;
  padding: 10px 20px;
  font-size: 1.0em;
  margin-top: 1em;
  margin-left: 5em;
}

#demoScheduleButtonId.hide {
  display: none;
}

.demoSection {
  border: #aba9c3;
  padding: 3em;
  border-style: solid;
}

.homeCTAButton {
  margin-left: 3em;
}

#meetingSection {
  margin-top: 1em;
}

#meetingOptions {
  margin-bottom: 0.5em;
  font-size: 2em;
  text-align: center;
}

#meetingConfirmation {
  align-items: center;
  display: flex;
  justify-content: center;
}

.meetingTime {
  border-bottom: #023002;
  border-bottom-style: solid;
}

#createMeetingButton {
  margin-right: 1em;
}

.createMeetingButtonLight {
  border: 2px solid #020330;
  color: #000000;
  box-shadow: 0 2px 4px #0000008f;
}

.createMeetingButtonDark {
  border: 2px solid #6997d3;
  color: #A6CED8;
  box-shadow: 0 2px 4px #f3efef8f;
}
#signinButton {
  display: none;
}

#signinButton.show {
  opacity: 1;
  display: flex;
}

#logoutButton {
  background-color: #072B34;
  color: white;
  padding: 0.7em;
  border: 0.2em solid #51b3cb;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.syncButton {
  /* background-color: #072B34;
  color: white; */
  padding: 0.7em;
  border: 0.2em solid #5f8d99;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

#syncButton {
  display:none;
}

#syncButton.show {
  opacity: 1;
  display: flex;
}

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: transparent;
}

.spinner {
  border: 4px solid rgb(255 255 255 / 0%);
  border-top-color: #2B7789;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  animation: spin 1s linear infinite;
}

#spinnerId.hide {
  display: none;
}

.demoSpinner {
  border: 4px solid rgb(255 255 255 / 0%);
  border-top-color: #2B7789;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  animation: spin 1s linear infinite;
  /* margin-left: 5em; */
}

#demoSpinnerId {
  display: none;
}

#demoSpinnerId.show {
  display: flex;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#scheduleButton {
  display:none;
}

#scheduleButton.show {
  opacity: 1;
  display: block;
}

.profile-picture {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.profile-picture img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.profile-picture .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  z-index: 1;
}
.profile-picture .dropdown button {
  display: block;
  margin-bottom: 5px;
}

#dropdown {
  display: none;
}

.navbar {
  /* background-color: #0D384B; */
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  display: inline;
  margin-right: 10px;
}

.navbar a {
  text-decoration: none;
  padding: 5px 10px;
  color: #fff;
  border-bottom: 2px solid transparent;
}

.navbar a:hover {
  /* background-color: #0D7BBF; */
  border-bottom-color: #fff;
}

.pricing-table {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.pricing-card {
  border-style: solid;
  background-color: transparent;
  border-radius: 5px;
  border-color: aqua;
  border-width: 0.1em;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 0 10px;
  flex: 1;
  max-width: 300px;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  justify-items: center;
  align-items: center;
}

.pricing-card h3 {
  color: #fff;
  margin-top: 0;
}

.pricing-card .price {
  font-size: 24px;
  color: #fff;
  margin: 10px 0;
}

.pricing-card .features {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: left;
  color: #fff;
}

.pricing-card .features li {
  margin-bottom: 10px;
}

.pricing-card .feature-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.pricing-card .feature-cell span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.pricing-card .cta-button {
  display: block;
  background-color: #0c5a24;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.pricing-card .cta-button:hover {
  background-color: #555;
}

.pricingHeader {
  display: block;
}
#emptyMeetingToast {
  align-items: center;
  background-color: transparent;
  border-color: #c977c8;
  border-style: solid;
  color: #c977c8;
  margin-top: 1em;
  padding: 10px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display:none;
}

#emptyMeetingToast.show {
  opacity: 1;
  display: block;
}

#toast {
  align-items: center;
  background-color: transparent;
  border-color: #3d5274;
  border-style: solid;
  color: #3d5274;
  margin-top: 1em;
  padding: 10px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display:none;
}

#toast.show {
  opacity: 1;
  display: block;
}

#errorToast {
  align-items: center;
  background-color: transparent;
  border-color: #e28388;
  border-style: solid;
  color: #d62b39;
  margin-top: 1em;
  padding: 10px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display:none;
}

#errorToast.show {
  opacity: 1;
  display: block;
}

#buttons {
  display: flex;
  margin-top: 1em;
  justify-content: center;
}


/* Carve advanced scheduling */
.collapsible {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
}

#collapsible.hide {
  display: none;
}

.collapsible-toggle {
  display: none;
}

.collapsible-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.collapsible-line {
  flex-grow: 1;
  border: none;
  border-top: 1px solid #ccc;
  margin: 0;
}

.collapsible-label {
  padding: 0 10px;
  font-size: 1.2em;
}

.collapsible-icon::before {
  content: "\25BC"; /* Unicode for down arrow */
  transition: transform 0.3s ease-in-out;
}

.collapsible-toggle:checked ~ .collapsible-header .collapsible-icon::before {
  transform: rotate(180deg);
  content: "\25B2"; /* Unicode for up arrow */
}

.collapsible-toggle:checked ~ .collapsible-content {
  max-height: 500px; /* Adjust as needed */
  transition: max-height 0.3s ease-in-out;
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* padding: 2em; */
  /* background-color: #f9f9f9; */
  /* padding: 10px; */
}

.field {
  margin-bottom: 1em;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

select {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}