/*      This is the CSS for the green submit buttons */
@media screen and (max-width: 1000px) {
  .toprtcorner {
          display: none;
      }
  } 

.green-button{
    color: #efe8d9;
    background-color:"" ;
    border-color:"";
    background-color: #006d10;
    border: none;
    color: white;
    
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    font-family:"Optima", sans-serif;
    font-size: 20px;
    margin: 4px 2px;
    border-radius: 20px;
    width: 500px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
  .orange-button{
    color: #efe8d9;
    background-color:"" ;
    border-color:"";
    background-color: #fa8a00;
    border: none;
    color: white;
    
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    font-family:"Optima", sans-serif;
    font-size: 20px;
    margin: 4px 2px;
    border-radius: 20px;
    width: 500px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
  .red-button{
    color: #efe8d9;
    background-color:"" ;
    border-color:"";
    background-color: #e00000;
    border: none;
    color: white;
    
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    font-family:"Optima", sans-serif;
    font-size: 20px;
    margin: 4px 2px;
    border-radius: 20px;
    width: 500px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
    .lgreen-button{
      color: #efe8d9;
      background-color:"" ;
      border-color:"";
      background-color: #006d10;
      border: none;
      color: white;
      padding: 40px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-family:"Optima", sans-serif;
      font-size: 20px;
      margin: 4px 2px;
      border-radius: 20px;
      width: 375px;
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    
  }/*      END CSS for the green submit buttons */
  
  .lorange-button{
    color: #efe8d9;
    background-color:"" ;
    border-color:"";
    background-color: #fa8a00;
    border: none;
    color: white;
    padding: 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family:"Optima", sans-serif;
    font-size: 20px;
    margin: 4px 2px;
    border-radius: 20px;
    width: 375px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  
}/*      END CSS for the green submit buttons */

.lred-button{
  color: #efe8d9;
  background-color:"" ;
  border-color:"";
  background-color: #e00000;
  border: none;
  color: white;
  padding: 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family:"Optima", sans-serif;
  font-size: 20px;
  margin: 4px 2px;
  border-radius: 20px;
  width: 375px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}/*      END CSS for the green submit buttons */

  /*  This is to center the logo only */
  .CfLogo
{
  margin-top: 150px;
  margin-bottom: 50px;
}/*  END center the logo only */

/* Additional style if the image is present */
.has-image .CfLogo {
  margin-top: 20px; /* Reduced margin if there's an image */
}
.image-box img {
  max-width: 225px; /* 75% of the original 300px width */
  max-height: 225px; /* 75% of the original 300px height */
  margin-bottom: 20px;
}



  /*  Index page center the logo only */
  .CenteredLogo {
    display: flex;
    justify-content: center; /* Horizontally centers the logo */
    width: 100%; /* Ensure the container takes the full width */
    margin: 0 auto; /* Center the container itself */
}
/* This is to change the back color on every page when using body */
body
{
  background-color: #fff7e6;
  font-family:"Optima", sans-serif;
}/* END change the back color on every page when using body */

/* This changes the text when using "placeholder" in input field areas */
::placeholder
{
  font-family:"Optima", sans-serif;
  font-size: large;
  padding: 0px -11px;
}/* END change the text when using "placeholder" in input field areas */

/* This will change all these input fields to look the same with rounded corners and shadow effect */
input[type=insearch] {

    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.19);
    border-color:rgba(0,0,0,0.14);
    font-family:"Optima", sans-serif;
    width:350px;
  }/* END change all these input fields to look the same with rounded corners and shadow effect */

  /* This is to make a field with a SIZE 233 PIXELS - which is 1/3 of 700 pixels */
   

  /*Label for input 233 */
.labelfield233 {
    display:inline-block;
        padding: 0px 20px;
        margin: 0px 0;
        box-sizing: border-box;
        text-align: left;
        border-color:rgba(0,0,0,0.14);
        font-family:"Optima", sans-serif;
        width:233px;
        font-weight: bold;
      }/* END Label for input 233  */


  /*Label for input 350 */
  .labelfield350 {
display:inline-block;
    padding: 0px 20px;
    margin: 0px 0;
    box-sizing: border-box;
    text-align: left;
    border-color:rgba(0,0,0,0.14);
    font-family:"Optima", sans-serif;
    width:350px;
    font-weight: bold;
  }/* END Label for input 350  */

  .labelfield466 {
    display:inline-block;
        padding: 0px 20px;
        margin: 0px 0;
        box-sizing: border-box;
        text-align: left;
        border-color:rgba(0,0,0,0.14);
        font-family:"Optima", sans-serif;
        width:466px;
        font-weight: bold;
      }/* END Label for input 466  */

  /*Label for input 700 */
  .labelfield700 {
    display:inline-block;
        padding: 0px 20px;
        margin: 0px 0;
        box-sizing: border-box;
        text-align: left;
        border-color:rgba(0,0,0,0.14);
        font-family:"Optima", sans-serif;
        width:700px;
        font-weight: bold;
      }/* END Label for input 700  */
      
      /******************************************************************/
      /* These 2 input field is for the search page since it is smaller */
      .sinputf100 {

        padding: 8px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border-radius: 20px;
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.19);
        border-color:rgba(0,0,0,0.14);
        font-family:"Optima", sans-serif;
        width:100px;
      } /* END make a field with a SIZE 233 PIXELS  */
       /* This is to make a field with a SIZE 350 PIXELS  */ 
       .sinputf350 {
    
        padding: 8px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border-radius: 20px;
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.19);
        border-color:rgba(0,0,0,0.14);
        font-family:"Optima", sans-serif;
        width:350px;
        font-size: 16px; /* Adjust the size as needed */

      }/* END make a field with a SIZE 350 PIXELS  */   

      /* End search page small input fields */
      /******************************************************************/

      .inputfield233 {

        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border-radius: 20px;
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.19);
        border-color:rgba(0,0,0,0.14);
        font-family:"Optima", sans-serif;
        width:233px;
      } /* END make a field with a SIZE 233 PIXELS  */
     
     /* This is to make a field with a SIZE 350 PIXELS  */ 
      .inputfield350 {
    
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border-radius: 20px;
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.19);
        border-color:rgba(0,0,0,0.14);
        font-family:"Optima", sans-serif;
        width:350px;
      }/* END make a field with a SIZE 350 PIXELS  */      
  /* This is to make a field with a SIZE 466 PIXELS - which is 1/3 of 700 pixels */
  .inputfield466 {

    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.19);
    border-color:rgba(0,0,0,0.14);
    font-family:"Optima", sans-serif;
    width:466px;
  } /* END make a field with a SIZE 466 PIXELS  */

  /* This is to make a field with a SIZE 700 PIXELS  */  
   .inputfield700 {

    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.19);
    border-color:rgba(0,0,0,0.14);
    font-family:"Optima", sans-serif;
    width:700px;
  }/* END make a field with a SIZE 700 PIXELS  */  

  /* This is to change the font where ever you want to */
  .sfont{
  font-family:"Optima", sans-serif;
  font-size: 20px;
  } /* END change the font where ever you want to */
  .ssfont{
    font-family:"Optima", sans-serif;
    font-size: 16px;
    font-weight: bold;

    } /* END change the font where ever you want to */

    .stfont{
     
      font-size: 30pt;
      font-weight: bold;
  
      } /* END change the font where ever you want to */

  /* Edit location page image placeholder adjustment */

  .imglink {

    
    margin: 8px 0;
    margin-top:25px;
    bottom: 0;
    vertical-align: bottom;
       
  }

  .logob{
    align-items: center; /* centers items vertically */
    display: block;
  }

  /* END location page image placeholder adjustment */

  /*******************************************************/
  /*This is the LEFT dropdown button with all of its controls */
  /*******************************************************/


  /* The container <div> - needed to position the dropdown content */
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: block;
  margin-bottom: 5px; /* adds a 5px gap below the image */


}

/* Dropdown Content (Initially Hidden) */
.dropdown-content {
  visibility: hidden; /* Use visibility instead of display to enable animations */
  position: absolute;
  background-color: #006d10;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 20px;
  font-family: "Optima", sans-serif;
  font-size: 16px;
  font-weight: bold;
  opacity: 0; /* Start fully transparent */
  transform: translateX(-30px); /* Start slightly off to the left */
  transition: all 0.4s ease; /* Smooth animation for sliding and fading */
}
.invisible {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .dropdown-content a {
      font-size: 1.2em;
      font-weight: bold;
  }
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #019417;
}

/* Show the dropdown menu with sliding effect */
.dropdown:hover .dropdown-content {
  visibility: visible; /* Make it visible */
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Slide into place */
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

 /********************************************************************/
  /*This is the END of the dropdown button with all of its controls */
  /*******************************************************************/


  

/* Margins used for DIVS */

  .div25left{

    margin-left:25px;
  }

  .div25right{

    margin-right:25px;
  }

  .div25top{

    margin-top:25px;
  }

  .div50top{

    margin-top:50px;
  }

  .div25bottom{

    margin-bottom:25px;
  }/* End Margins used for DIVS */
/* This is for the logged in user at top right */
  .toprtcorner{
    
    position: absolute;
    top: 0px;
    right:10px; 
  }/* End logged in user at top right */

  .rdiv {
    float: right;

  }

  .topltcorner{
    
    position: absolute;
    top: 10px;
    left:10px; 
    
  }/* End logged in user at top left */
  /* This is to edit the font for the add new location pages */
  .stepr{
    font-family:"Optima", sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: rgb(255, 0, 0);
    
  }
  .stepb{
    font-family:"Optima", sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: rgb(0, 0, 0);
    
  }
  
  
  
  
  /* End edit the font for the add new location pages */



  /* top padding for steps */
  .d8t{

    padding-top: 8px;
  }

  .d25t{

    padding-top: 12px;
  }/* End top padding for steps */
  
  .clogo{

    vertical-align:middle;

  }



/********************************************************/
/********************************************************/
/* Checkbox css to make circles for material checkboxes */


.label-checkbox{
    color: white;
    font-family:"Optima", sans-serif;
    font-size: 16px;
    
  }
  .checkbox-wrapper-24 .checkbox {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
  }

  .checkbox-wrapper-24 label {
    display: inline-block;
    color: #333;
    cursor: pointer;
    position: relative;
  }

  /*changed width and height from 25 to 10*/
  .checkbox-wrapper-24 label span {
    display: inline-block;
    position: relative;
    background-color: transparent;
    width: 10px;
    height: 10px;
    transform-origin: center;
    border: 2px solid #333;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
    transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
  }
  /*changed height from 2 to 0*/
  .checkbox-wrapper-24 label span:before {
    content: "";
    width: 0px;
    height: 0px;
    border-radius: 2px;
    background: #333;
    /*position: absolute;*/
    position: relative;
    transform: rotate(45deg);
    top: 13px;
    left: 9px;
    transition: width 50ms ease 50ms;
    transform-origin: 0% 0%;
  }
  .checkbox-wrapper-24 label span:after {
    content: "";
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: #333;
    /*position: absolute;*/
    position: relative;
    transform: rotate(305deg);
    top: 16px;
    left: 10px;
    transition: width 50ms ease;
    transform-origin: 0% 0%;
  }
  /*
  .checkbox-wrapper-24 label:hover span:before {
    width: 5px;
    transition: width 100ms ease;
  }
  
  .checkbox-wrapper-24 label:hover span:after {
    width: 10px;
    transition: width 150ms ease 100ms;
  }
*/
  .checkbox-wrapper-24 input[type=checkbox] {
    display: none;
  }
  .checkbox-wrapper-24 input[type=checkbox]:checked + label span {
    background-color: #333;
    transform: scale(1.25);
  }
  .checkbox-wrapper-24 input[type=checkbox]:checked + label span:after {
    width: 10px;
    background: #efe8d9;
    transition: width 150ms ease 100ms;
  }
  .checkbox-wrapper-24 input[type=checkbox]:checked + label span:before {
    width: 5px;
    background: #efe8d9;
    transition: width 150ms ease 100ms;
  }
  .checkbox-wrapper-24 input[type=checkbox]:checked + label:hover span {
    background-color: #333;
    transform: scale(1.25);
  }
  .checkbox-wrapper-24 input[type=checkbox]:checked + label:hover span:after {
    width: 10px;
    background: #efe8d9;
    transition: width 150ms ease 100ms;
  }
  .checkbox-wrapper-24 input[type=checkbox]:checked + label:hover span:before {
    width: 5px;
    background: #efe8d9;
    transition: width 150ms ease 100ms;
  }/* END Checkbox css to make circles for material checkboxes */
  /***************************************************************************/
  /***************************************************************************/
  .cboxwidth{
    width: 250px;
    
  }
  .cboxrowh{
    height: 30px;
  }
  .cboxroww{
    width:1700px;
  }
/* This is to make the text area expand */
  .textareaElement {
    width: 300px;
    min-height: 17px;
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
  }/* END make the text area expand */


  /*************************************************/
  /* This is for the style of the FILE UPLOAD area */


  /* default boilerplate to center input */

  /* file upload button */
/*END style for the FILE UPLOAD area */
/*************************************/

/*bootstrap div trying *********************************************************************/
.big-box,
.mini-box {
    background-color: #10BCFF;
    color: white;
    text-align: center;
    margin: 2px;
    font-size: 16pt;
}
.big-box {
    height: 65px;
    line-height: 65px;
}
.mini-box {
    height: 30px;
    line-height: 30px;
}

/*bootstrap div trying *********************************************************************/

/* this is the color of the directions area */
.mapbox-directions-instructions-wrapper{

  background-color:#fff7e6 !important;
  color: #000000 !important;
  font-weight: bold !important;
  height:450px !important;
  font-family:"Optima", sans-serif !important;
}
.li{

  background-color:#fff7e6 !important;
  color: #000000 !important;
  font-weight: bold !important;
  font-family:"Optima", sans-serif !important;
}
.mapbox-directions-step{

  background-color:#ffffff !important;
  color: #000000 !important;
  font-weight: bold !important;
  text-align: left;
  font-family:"Optima", sans-serif !important;
 
  
}
/*this is the color of the mileage area */
.directions-control.directions-control-directions .mapbox-directions-component{
  background: #006d10 !important;
  margin: 7px 0 0;
  font-weight:bold !important;
  font-size: 18pt !important;
  color: #fff;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  overflow-x: hidden;
}
.mapbox-directions-route-summary {
  position: relative;
  z-index: 1;
  width: 100%;
  background-color: rgb(255, 0, 191) !important;
  color: #ffffff !important;
  padding: 5px 10px;
  font-size: 15px;
  line-height: 28px;
}
.label.mapbox-form-label{
  background:rgb(0, 255, 76) !important;

}
/*this is "A" color in the directions for Mapbox */
.mapbox-directions-origin .mapbox-form-label{

  background-color: #000000 !important;
}
/* this is "B" color in the directions for Mapbox */
.mapbox-form-label{
  background-color: #000000 !important;

}
.mapbox-directions-step:hover {
  color:#000000 !important;
}
.mapbox-directions-route-summary span{
  color: #ffffff !important;

  font-weight:bold !important;
}
span.directions-icon.directions-icon-depart{

  color:#000000 !important;
  background-color: #000000 !important;

}
div.mapbox-directions-step-distance{
  color:#000000 !important;
 

  
}
.directions-icon-right{

  color:#000000 !important;
  background-color: #000000 !important;

}
.directions-icon-left{

  color:#000000 !important;
  background-color: #000000 !important;

}

.rdiv {
  float: right;

}