body {
    font-family: "Montserrat";
    text-align: center;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat-Bold";
  }

.fill {
  width: 100%;
  position: relative;
}

.vertCenter{
  align-items: middle;
}
.landing {
  height: 100%;
}

  p {
    color: #031c30;
  }

  /* Headings */
  .big-heading {
    font-family: "Montserrat-Black";
    font-size: 3.5rem;
    line-height: 1;
  }
  .medium-heading {
    font-family: "Montserrat-Black";
    font-size: 2rem;
    line-height: 1;
    color: #d3e9fc;
  }

  .section-heading {
    font-size: 3rem;
    line-height: 1.5;
    color: #02111e;
  }

  /* Containers */

  .container-fluid{
    padding: 7% 15%;
    padding-right: 3%;
  }


  /* Sections */
  /* .colored-section {
    background-color: #1A8FF1;
    color: #fff;
  } */
  .colored-section {
    background-color: #1A8FF1;
    color: #fff;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.25);
    /*Shadoweffect*/border-radius: 10px;
    /*Optional: adds rounded corners */;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    
}


  .white-section {
    background-color: #f8fbff;
  }

  /* Navigation Bar */

  .navbar {
    position: relative;
    padding-top: 0 ;
    padding-right: 0 ;
    padding-bottom: .5rem;
    padding-left: 0;
  }

  .navbar-brand {
    font-family: "Ubuntu";
    font-size: 4rem;
    font-weight: bold;
    padding-left: 1%;
    background-color: #1A8FF1;
    border-width: 0;
    background-color: transparent !important;
  }

  .nav-item {
    padding: 0 18px;
  }

  /* .nav-link {
    font-size: 1.2rem;
    font-family: "Montserrat-Light";
    background-color: #1A8FF1;
    border: 0;
    padding:5px;
    color: rgba(255,255,255,.75);
  }

  .nav-link:hover {
    background-color: #C7E6FB;
    color: #1A8FF1;
  } */

  .nav-link {
    font-size: 1.2rem;
    font-family: "Montserrat-Light";
    background-color: #1A8FF1;
    border: 0;
    padding: 5px;
    color: rgba(255, 255, 255, .75);
    background-color: transparent !important;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    background: none;
    color: #fff;
}

.nav-link:hover {
    background-color: #C7E6FB;
    color: #1A8FF1;
}


/* Adjust the form's appearance for better integration into the background */
#loginForm {
  background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
  padding: 20px;
  border-radius: 8px; /* Rounded corners */
}

/* Ensure the form inputs and buttons fit well within the new form style */
#loginForm .form-control, #loginForm .btn {
  border-radius: 4px;
  /* color: #1A8FF1; Brand color for the text */
  /* font-weight: bold; Bold text for better readability */
  text-shadow: none; 
}

/* Optional: Add a slight border to the form fields for better visibility */
#loginForm .form-control {
  border: 1px solid #ddd;
}




  .nav:hover {
    background-color: #C7E6FB;
    color: #1A8FF1;
  }

  /* Buttons */
  .download-button {
    margin: 5% 3% 5% 0;
  }

  .download-button:hover {
    background-color: #1A8FF1;
    color: #fff;
  }

  /* Title Section */
  #title {
    background-color: #1A8FF1;
    color: #fff;
    text-align: left;
  }

  #title .container-fluid {
    padding: 3% 15% 7%;
  }

  /* Title Image */
  .title-image {
    width: 60%;
    transform: rotate(25deg);
    position: absolute;
    right: 30%;
  }

  /* Features Section */
  #features {
    position: relative;
    text-align: left;
    padding-top: 4%;
    padding-bottom: 4%;
  }

  .carousel-item {
    padding-top:8%;
    padding-bottom: 8%;
  }




  .feature-title {
    font-size: 1.5rem;
    color: #02111e;
  }

  .feature-box {
    padding: 4.5%;
  }

  .icon {
    color: #1A8FF1;
    margin-bottom: 1rem;
  }

  .icon:hover {
    color: #1A8FF1;
  }

  /* Testimonial Section */

  #testimonials {
    background-color: #1A8FF1;
  }

  .testimonial-text {
    font-size: 3rem;
    line-height: 1.5;
  }

  .testimonial-image {
    width: 10%;
    border-radius: 100%;
    margin: 20px;
  }

  #pricing-info {
    background-color: #1A8FF1;
    background-image: url('images/dalleCarroselBackground.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
  }
  
  #pricing-info {
    background-color: #1A8FF1;
    position: relative;
    z-index: 1;
    height: 100vh; /* Set the height to full viewport height */
  }
  
  #pricing-info .container {
    height: 100%;
  }
  
  #pricing-info .row {
    justify-content: center;
    height: 100%;
  }
  
  #pricing-info .col-12 {
    display: flex;
    flex-direction: column;
    justify-content: center; /* This will center the content vertically */
    align-items: center; /* This will center the content horizontally */
  }
  
  
  #pricing-info .section-heading {
    color: #000; /* Change the color to something more readable against the background */
    text-shadow: 2px 2px 4px #ffffff; /* Optional text shadow to make the text stand out */
  }
  
  #pricing-info .copy-description {
    color: #000; /* Change the color to something more readable against the background */
    text-shadow: 1px 1px 3px #ffffff; /* Optional text shadow to make the text stand out */
  }
  

  .readable-card {
    background: #ffffff; /* Solid white background for the card */
    color: #000000; /* Black text for readability */
    margin: 0 auto; /* Center the card */
    max-width: 40rem; /* Maximum width of the card */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow to the card */
    border-radius: 0.5rem; /* Rounded corners for the card */
    padding: 2rem; /* Spacing inside the card */
  }
  
  .readable-card h1 {
    color: #333333; /* Dark color for the H1 heading for visibility */
    margin-bottom: 1rem; /* Spacing after the H1 title */
  }
  
  .readable-card .section-heading,
  .readable-card .copy-description {
    color: #000000; /* Black text for other elements */
  }
  
  #black{
    color: #000000;
  }
  



  #press {
    background-color: #1A8FF1;
    padding-bottom: 3%;
  }

  .press-logo {
    width: 15%;
    margin: 20px 20px 50px;
  }

  /* Pricing Section */
  #pricing {
    padding: 100px;
  }

  .price-text {
    font-size: 3rem;
    line-height: 1.5;
  }

  .pricing-column {
    padding: 3% 2%;
  }

  .extraTop {
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 1%;
  }

  .card-header{
    background-color: #C7E6FB;
    text-align: center;
  }

  /* .button {
    background-color: #1A8FF1;
    color: #fff;
  } */

  .button-red {
    background-color: #e5700e;
    color: #fff;
  }
  .button-red:hover {
    background-color: #e5ccc9;
    color: #fff;
  }

  /* .button:hover {
    background-color: #C7E6FB;
  } */

  /* .button {
    background-color: #1A8FF1;
    color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow */
    /* transition: all 0.3s; 
} */

/* .button:hover {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* Optional: Changes shadow on hover */
/* } */ 



.button {
  background: linear-gradient(to bottom, #a3cfe2 0%, #6a9fb5 100%);
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  background: linear-gradient(to bottom, #7ca8be 0%, #527b8c 100%);
}


  .freeOffer{
    text-align: left;
  }

  .social-icon {
    margin: 20px 10px;
  }

  @media (max-width: 1028px) {

    #title {
      text-align: center;
    }

    .title-image {
      position: static;
      transform: rotate(0);
    }
  }

  .full{
    padding-left: 2%;
    padding-right: 2%;
  }

  .objectAttributes-L{
    border: #031c30;
    text-align: left;
  }
  .objectAttributes-R{
    border: #031c30;
    text-align: right;
  }

  .objectAttributes-C{
    text-align: center;
    font-weight: bolder;
    font-family: 'Times New Roman', Times, serif;
  }

  .searchBar{
    margin-left: 1%;
    margin-bottom: .5%;
  }

  .tables{
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
  }

  .searchButton{
    padding-left: 1%;
    padding-right:1%;
  }

  .extraBottom{
    padding-bottom: 1%;
  }

  .leftAlign{
    text-align: left;
    padding-left: 0;
  }

  .lowPadding{
    padding-top: 1%;
    padding-bottom: 1%;
  }

  .bottom{
    padding-bottom: 1%;
  }
  .pageEnd{
    padding-bottom: 2%;
  }

  .tab-buttons{
    align-items: center;
  }

.today{
  padding-top: 6%;
  padding-bottom: 6%;
}

.no-padding{
  padding:5px;
}

  .headers{
    background-color: #C7E6FB;
  }

  .search{
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
  }

.form-group{
  text-align: left;
}


.fonts{
  font-family:  Arial, sans-serif;
}

.white{
  color:#fff
}

.form-row{
  padding-left: 0;
}

.form-row-alternate{
  padding-left:15px;
}

table {
  margin: 20px auto; /* This will add a top and bottom margin of 20px and auto margin on the sides, centering the table if it's a block-level element. */
  width: 95%; /* This will make the table 95% of its container's width, thereby leaving some space on the sides. */
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 8px 12px;
  text-align: left;
}

#usersTable tr:hover {
  background-color: #f5f5f5; /* Light gray */
  cursor: pointer;
}

#contactsTable tr:hover {
  background-color: #f5f5f5; /* Light gray */
  cursor: pointer;
}

.titleTable{
  border: none;
  border-width: 0;
}

.titleTable tr, .titleTable td, .titleTable th {
  border: none;
  border-collapse: collapse;
  border-color: transparent;
  border-width: 0;
}

.paddingRight {
  margin: 20px;
}



*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-family: sans-serif;
  box-sizing: border-box;
  outline: none;
  overflow: auto;
}

body {
  margin: 0;
  background-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

p {
  margin: 0;
}

.container {
  width: 100%;
  max-width: 600px;
  margin: auto;
  padding: 20px 0;

  
}

.wrapper {
  width: '90%';
  align-self: 'center';
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 0;
  background-color: #208AEC;
}

.header_logo {
  height: 55px;
  margin-bottom: 20px;
  object-fit: contain;
}

.header_text_bold {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: bold;
}

.header_text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}

.flex_row {
  display: flex;
}

.flex_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form_wrapper {
  margin-top: 20px;
  margin-bottom: 10px;
}

.form_heading {
  margin-bottom: 10px;
}

.form {
  padding-bottom: 25px;
  margin: 25px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.form_input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 15px;
  background-color: #e6e6e6;
  border: 1px solid #ccc;
  border-radius: 999px;
  margin-bottom: 20px;
  font-size: 16px;
}

.form_button {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 15px;
  background-color: #208AEC;
  border: 1px solid #208AEC;
  border-radius: 999px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.form_hint {
  display: block;
  margin-top: 20px;
  color: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  text-align: center;
  text-decoration-color: rgba(0, 0, 0, 0.4);
}

.card_element_wrapper {
  padding: 13px 15px;
  margin-bottom: 20px;
  background-color: #e6e6e6;
  border: 1px solid #ccc;
  border-radius: 999px;
}

/* checkout for checkout */

#title {
  background-image: url('images/dalleBackground.png'); /* Link to your background image */
  background-size: cover; /* Cover the entire area */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-position: center center; /* Center the image in the section */
}

#customSection {
  background-image: url("images/dalleCustomBackground.png"); /* Path to the new background image */
  background-size: cover; /* Ensure it covers the entire section */
  background-repeat: no-repeat; /* The image should not repeat */
  background-position: center center; /* Center the image in the section */
  
}



.big-heading, .medium-heading, .btn, .nav-link {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


.feature-box {
  margin-bottom: 40px; /* Space between feature rows */
}

.feature-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}

.feature-text-card {
  background-color: #f8f9fa; /* Light background for the text card */
  padding: 20px;
  border-radius: 10px; /* Rounded corners for the card */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for the card */
  text-align: center;
}

@media (max-width: 992px) {
  .feature-text-card {
    text-align: left;
  }
}


#testimonials {
  background-image: url('images/dalleCarroselBackground.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.testimonial-text {
  color: #ffffff; 
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); 
}


#testimonials {
  background-image: url('images/dalleCarroselBackground.png'); /* Replace with your image path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#testimonial-carousel .carousel-inner {
  position: relative;
}

#testimonial-carousel .carousel-item {
  min-height: 600px; /* Adjust based on your content */
  justify-content: center;
  align-items: center;
}

#testimonial-carousel .testimonial-card {
  background: rgba(255, 255, 255, 0.8); /* Card background */
  border-radius: 10px; /* Rounded corners for card */
  padding: 20px;
  margin: 0 auto; /* Center the card in the slide */
  max-width: 70%; /* Control the width of cards */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Box shadow for depth */
  text-align: center;
   /* Position relative to align the card in the carousel-item */
   position: absolute; /* Absolute position within the relative container */
   top: 50%; /* Position the top edge of the card in the middle of the item */
   left: 50%; /* Position the left edge of the card in the middle of the item */
   transform: translate(-50%, -50%); /* Offset the card to be truly centered */
   width: 70%;




}

#testimonial-carousel .testimonial-text {
  color: #000; /* Text color */
  text-shadow: none; /* Clear text shadow for better readability on card */
}

.carousel-indicators li {
  background-color: #fff; /* More visible indicators */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(100%); /* Invert icons for better visibility */
}


#cta {
  background-image: url('images/dalleCarroselBackground.png');
  background-size: cover; /* Ensure it covers the whole section */
  background-position: center; /* Center the image in the section */
  background-repeat: no-repeat; /* Prevent the image from repeating */
}

#what-is-crm {
  background-color: #f8fbff;
  padding: 40px 0;
  text-align: center;
}

#what-is-crm .container {
  max-width: 1200px;
  margin: auto;
}

#what-is-crm .crm-text {
  padding-right: 15px;
}

#what-is-crm .section-heading {
  font-family: "Montserrat-Bold";
  font-size: 2.5rem;
  color: #02111e;
  margin-bottom: 20px;
}

#what-is-crm .crm-description {
  font-family: "Montserrat";
  font-size: 1.2rem;
  color: #031c30;
  line-height: 1.6;
}

#what-is-crm .crm-image img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

#what-is-crm .crm-image img:hover {
  transform: scale(1.05); /* Slightly enlarge the image on hover */
}

.crm-text-card {
  background-color: #fff; /* Card background color */
  padding: 20px; /* Padding inside the card */
  border-radius: 10px; /* Rounded corners for the card */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  margin: 10px 0; /* Margin around the card */
}

.section-heading {
  font-family: "Montserrat-Bold";
  font-size: 2.5rem;
  color: #02111e;
  margin-bottom: 15px; /* Space below the heading */
}

.crm-description {
  font-family: "Montserrat";
  font-size: 1.2rem;
  color: #031c30;
  line-height: 1.6; /* Line height for better readability */
}

#checkout-and-portal-button {
  background: linear-gradient(to bottom, #a3cfe2 0%, #6a9fb5 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

#checkout-and-portal-button:hover {
  background: linear-gradient(to bottom, #7ca8be 0%, #527b8c 100%);
}


#footer {
  padding: 20px;
  text-align: center;
}

#footer a {
  color: #6a9fb5; /* Adjust the color to match your design */
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
}

#footer p {
  margin: 5px 0;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.product {
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 20px;
}

.product svg {
  margin-right: 10px;
}

.description h3,
.description h5 {
  margin: 0;
  padding: 0;
}


#oneDayButton, #sevenDaysButton, #lastMonthButton {
  transition: background-color 0.3s ease; /* Smooth transition for the hover effect */
  border-radius: 15px; /* Rounded corners */
  padding: 10px 20px; /* Adjust padding as needed */
  border: none; /* Remove border for a softer look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth (optional) */
  background-color: #a3cfe2;
}



#oneDayButton:hover, #sevenDaysButton:hover, #lastMonthButton:hover {
  background-color: white; /* Example hover color */
  color: #1A8FF1; /* Example text color */
  cursor: pointer; /* Changes the cursor to indicate the element is clickable */
}

.active-button {
background-color: white; /* Example active color */
color: #1A8FF1;
}

#dateRangeSubmit:hover{
  background-color: rgb(43, 168, 187);
}

#copy {
   /* Adjust the color as needed */
   background-image: url('images/dalleBackground.png'); /* Link to your background image */
   background-size: cover; /* Cover the entire area */
   background-repeat: no-repeat; /* Do not repeat the image */
   background-position: center center;

}

.section-heading {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.copy-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #ECF0F1; /* Adjust for readability */
  
}


.card {
  background: #ffffff; /* White background */
  border: none; /* No borders */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  margin-bottom: 2rem; /* Space below each card */
}

.card-body {
  padding: 2rem; /* Padding inside the card */
}

.section-heading {
  color: #333; /* Dark color for headings */
  margin-bottom: 1rem; /* Space below the heading */
}

.copy-description {
  color: #666; /* Lighter text color for the description */
  line-height: 1.6; /* Line height for better readability */
}

.row-equal-height > [class*='col-'] {
  display: flex;
  flex: 1;
}

.row-equal-height .card {
  flex: 1;
}



/* Add any additional styles for your page here */

.title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px; /* Adjust the padding as necessary */
}

.title-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-container {
  display: flex;
  align-items: center;
}

/* Style for the switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-right: 10px; /* Space between the toggle and label */
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


.settings-btn {
  background-color: #f0f0f0;
  color: #333;
  border: none;
  margin-bottom: 10px;
  position: relative;
  transition: all 0.3s ease;
}

.settings-btn:hover {
  background-color: #e0e0e0;
  color: #000;
}

.settings-group {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.note {
  text-align: center;
  color: #888;
  font-style: italic;
}

/* Icons from Font Awesome */
.fas {
  margin-right: 10px;
}

#userTable tbody tr:hover {
  background-color: #d9edf7; /* Light blue color for hover */
  cursor: pointer; /* Changes the cursor to indicate the row is clickable */
}



.hoverable tbody tr:hover {
  background-color: #d9edf7; /* Light blue color for hover */
  cursor: pointer; /* Changes the cursor to indicate the row is clickable */
}

#neboe-mission-section {
  background-color: #ffffff; /* Assuming the white-section is meant to be white */
  padding: 40px; /* Increases padding */
  margin: 20px auto; /* Adds some space around the section */
  max-width: 800px; /* Or whatever maximum width you prefer */
  border-radius: 8px; /* Optional: rounds the corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow to lift the box off the page */
  border: 1px solid #eaeaea; /* Optional: adds a subtle border */
}

#neboe-mission-title, #neboe-subtitle {
  text-align: center; /* Center-aligns the titles */
}

#neboe-mission-section .copy-description {
  color: #495057;
  line-height: 1.6;
  margin-bottom: 1em;
  text-align: justify; /* Justifies the paragraph text for better readability */
}

/* Responsive design for smaller devices like tablets and mobile phones */
@media (max-width: 768px) {
  #neboe-mission-section {
      padding: 15px;
      max-width: 90%; /* Takes up more of the screen on smaller devices */
  }
  #neboe-mission-section .copy-description {
      text-align: left; /* Avoids justified text on small screens which can look uneven */
  }
}




.scheduling-center-title {
  font-size: 2.5rem;
  color: #007bff;
  text-align: center;
  margin-bottom: 1rem;
}
.organization-management-label {
  font-size: 1.5rem;
  color: #343a40;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.getting-started-label {
  font-size: 1.5rem;
  color: #343a40;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}



.delete-btn {
  background-color: red; /* Makes the button red */
  color: white; /* Text color set to white for better readability */
  border: none; /* Removes the default border */
  padding: 5px 10px; /* Adds some padding around the text */
  border-radius: 5px; /* Optional: Rounds the corners of the button */
  cursor: pointer; /* Changes the cursor to a pointer on hover */
}

td .delete-btn {
  display: block; /* Makes the button a block element */
  width: 100%; /* Ensures the button fills the table cell */
  text-align: center; /* Centers the text inside the button */
}

td {
  text-align: center; /* Centers the button within the table cell */
  vertical-align: middle; /* Adjusts vertical alignment for aesthetics */
}



.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 days for each week */
  gap: 10px; /* Space between days */
  margin-bottom: 20px; /* Space between weeks */
}
.day {
  border: 1px solid #ccc; /* Border around each day */
  padding: 10px; /* Padding inside each day */
  min-height: 100px; /* Minimum height for each day */
  background-color: #f9f9f9; /* Light background color */
  display: flex;
  flex-direction: column;
}
.day-content {
  flex: 1; /* Allows day content to expand within the container */
}

.centerschedule {
  text-align: center; /* Centers the text or inline-elements inside the div */
  width: 100%; /* Adjust the width as needed */
  padding: 40px; /* Just for better visibility */
  border: 1px solid #ccc; /* Just for better visibility */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Just for aesthetics */
  /* display: flex;  */
  justify-content: center; /* Center the content horizontally */
  align-items: center; 
  
}

.currentscheduletitle{
  text-align: center;
  align-items: center;
}

.form-group {
  display: flex;
  align-items: center; /* This aligns items vertically in the center */
  justify-content: space-between; /* This distributes space between and around content items */
}
.form-group label {
  flex-grow: 0;
  margin-right: 10px; /* Adds some space between the label and the input */
}
.form-control {
  flex-grow: 1; /* Allows the input to grow and fill the space */
  margin-right: 10px; /* Adds some space between the input and the button */
}
.remove-btn {
  flex-grow: 0; /* Prevents the button from growing, keeping its original size */
}


.time-selection, .days-of-week {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  margin-bottom: 10px;
}

.day-btn {
  margin-right: 5px;
}

.time-selection .form-check-inline {
  margin-right: 5px;
}
.remove-btn {
  display: none; /* Hidden by default, show based on your JS logic */
}

.welcome-card {
  font-family: 'Arial', sans-serif;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.welcome-card h3 {
  color: #333;
  font-size: 18px;
  text-align: center;
}

.pricing-highlight {
  color: #007bff;
  font-weight: bold;
}


#companyForm .form-control {
  width: 100%; /* This makes input fields take the full width of their parent container */
  max-width: 500px; /* Adjust this value to suit your design */
  box-sizing: border-box; /* Ensures padding and border are included in the total width and height */
}

/* Adjust the select box to match the input fields if needed */
#companyForm select.form-control {
  width: 100%; /* Match width of input fields */
  max-width: 500px; /* Ensure select box is not wider than the input fields */
}

.form-group {
  display: flex; /* Enables flexbox */
  margin-bottom: 10px; /* Adjust as needed for spacing */
}

.form-group label {
  width: 180px; /* Adjust based on your longest label */
  flex-shrink: 0; /* Prevents the label from shrinking */
  margin-right: 20px; /* Adjust spacing between label and input */
}

.form-group .form-control {
  flex-grow: 1; /* Allows the input to take up the remaining space */
}

/* Adjustments for select box if necessary */
.form-group select.form-control {
  width: auto; /* Allows the select box to grow with the container */
}

#addDepartmentButton {
  margin-left: 10px; /* This adds 10px margin to the left of the "Add Department" button */
}

#copyButton {
  margin-left: 10px;
  margin-bottom: 10px; /* This adds 10px margin to the left of the "Add Department" button */
}


/* 
<div class="row">
<div class="form-row align-items-center mb-3">
    <div class="col-auto">
        <label for="startHour" class="sr-only">Hour</label>
        <select class="form-control" id="startHour">
            <!-- Option values go from 1 to 12 for hours -->
        </select>
    </div>
    <div class="col-auto">
        <label for="startMinutes" class="sr-only">Minutes</label>
        <input type="text" class="form-control" id="startMinutes" placeholder="00-59">
    </div>
    <div class="col-auto">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="amPmSelection" id="amSelection" value="AM" checked>
            <label class="form-check-label" for="amSelection">AM</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="amPmSelection" id="pmSelection" value="PM">
            <label class="form-check-label" for="pmSelection">PM</label>
        </div>
    </div>

    <div class="col-md-10">
        <label for="days">Days:</label>
        <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-outline-primary">Sun</button>
            <button type="button" class="btn btn-outline-primary">Mon</button>
            <button type="button" class="btn btn-outline-primary">Tue</button>
            <button type="button" class="btn btn-outline-primary">Wed</button>
            <button type="button" class="btn btn-outline-primary">Thu</button>
            <button type="button" class="btn btn-outline-primary">Fri</button>
            <button type="button" class="btn btn-outline-primary">Sat</button>
        </div>
        <button type="button" class="btn btn-secondary ml-2">Add Unique start time each day</button>
    </div>
</div>
</div> */

/* 
<div class="row align-items-center mb-3">

                <label class="col-form-label">Days of the Week</label>
                <div class="col-4 d-flex">
                    <label for="days" class="sr-only">Days</label>
                    <div class="btn-group" role="group" aria-label="Day buttons">
                        <button type="button" class="btn btn-outline-primary">Sun</button>
                        <button type="button" class="btn btn-outline-primary">Mon</button>
                        <button type="button" class="btn btn-outline-primary">Tue</button>
                        <button type="button" class="btn btn-outline-primary">Wed</button>
                        <button type="button" class="btn btn-outline-primary">Thu</button>
                        <button type="button" class="btn btn-outline-primary">Fri</button>
                        <button type="button" class="btn btn-outline-primary">Sat</button>
                        <button type="button" class="btn btn-outline-primary">All</button>
                    </div>
                </div>
                <label class="col-form-label">Start Time:</label>
                <div class="col-auto">
                    
                    <label for="startHour" class="sr-only">Hour</label>
                    <select class="form-control" id="startHour">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                </div>
                <div class="col-auto">
                    <select class="form-control" id="startMinutes">
                        
                    </select>
                </div>
                <div class="col-auto">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="amPmSelection" id="amSelection" value="AM" checked>
                        <label class="form-check-label" for="amSelection">AM</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="amPmSelection" id="pmSelection" value="PM">
                        <label class="form-check-label" for="pmSelection">PM</label>
                    </div>
                </div> */


/* 
                <div class="col-12">
                <label class="col-form-label">Start Time:</label>
              </div>
              <div class="col-auto">
                <select class="form-control" id="startHour">
                  <!-- Hour options -->
                </select>
              </div>
              <div class="col-auto">
                <select class="form-control" id="startMinutes">
                  <!-- Minute options -->
                </select>
              </div>
              <div class="col-auto">
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="amPmSelection" id="amSelection" value="AM" checked>
                  <label class="form-check-label" for="amSelection">AM</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="amPmSelection" id="pmSelection" value="PM">
                  <label class="form-check-label" for="pmSelection">PM</label>
                </div>
              </div>
            </div> */