@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque&display=swap');

/* CSS */
.ui.borderless.fixed.menu::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}

/**Compare flows modaL*/

.compare-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFFFFF;
  z-index: 1000;
  overflow-y: hidden;
  overflow-x: hidden;
  padding: 20px;
  border-radius: 20px;
 
}

/* Default desktop styles */
.compare-modal.width-height {
  width: 40vw;
  height: 55vh;
}

/**Compare flows modaL*/

.ui.borderless.fixed.menu {
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none;  /* For Internet Explorer and Edge */
}


.filters-container {
  display: flex;
  align-items: center;
  padding: 0px;
  gap: 10px; /* Space between buttons */
}

.filters-container::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}

.filters-container {
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none;  /* For Internet Explorer and Edge */
}


.suggestion-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  overflow-y: auto;
  width: 300px; /* Adjust width as necessary */
}

.suggestion-list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.suggestion-list li:last-child {
  border-bottom: none;
}

.suggestion-list::-webkit-scrollbar {
  width: 5px; /* Reduce the scrollbar width */
}

.suggestion-list::-webkit-scrollbar-track {
  background: #f1f1f1; /* Optional: Change the track background */
}

.suggestion-list::-webkit-scrollbar-thumb {
  background: #888; /* Optional: Change the thumb color */
  
}

.suggestion-list::-webkit-scrollbar-thumb:hover {
  background: #555; /* Optional: Change the thumb color when hovered */
}

/* For Firefox */
.suggestion-list {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: #888 #f1f1f1; /* thumb and track color */
}




.masthead h1.ui.header {
      margin-top: 1em;
      margin-bottom: 0em;   
      font-size: 4em;
      font-weight: normal;
}

.landingpage-meeako-logo{
    margin-top: 15vh;
}


.ui.image.extra-mini {
  width: 25px;
  height: auto; /* maintains the aspect ratio */
  margin: 0;
}

.ui.image.extra-extra-mini {
  width: 20px;
  height: auto; /* maintains the aspect ratio */
  margin: 0;
}

.full-height-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Use 100% of the viewport height */
}

.content-container {
  flex: 1; /* This allows the content to expand and take available space, pushing the footer down */
}

 .footer.segment {
      padding: 5em 0em;
}

 p {
      font-size: 1.2em;
    }

/*  to blur the images or apps for public users*/
.blurred {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}


.btt {
  position: fixed;
  right: 20px; 
  bottom: 20px; 
  z-index: 999; 
}

.navbar-wrapper {
    padding: 1em 2em 1em 2em;

}

.ui.vertical.stripe {   
      padding: 2em 2em 2em 2em;
    }


.top-section-searchbar-component{
     margin-top: 3em; 
}


.header-search-bar {
  margin: 0 auto;
}

.flow-details-header-center-items{
    margin: auto;
      display: flex;
      justify-content: center;
  align-items: center;
}

.top-section{
     margin-top: 10vh; 
    padding: 2em 2em 0em 2em;
}

.right-left-spacing{
     padding: 0em 2em 0em 2em;
}


.underlined {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.icon.back-button{
    font-size: 2em;
    margin-right: 50px;
}

.slick-prev:before, .slick-next:before {
  color: #607080 !important;
}

/*Parent div of the entire search bar */
.search-bar-container{
     display:inline-block; /*treats all the child divs as inline block*/
     flex-direction: column; /*arranges all the child div as column i.e. one below the other*/
     text-align: left;
     margin: auto;
    

/*      position: relative; takes the default positioning of static*/
}

.search-bar-container-app{
     display:inline-block; /*treats all the child divs as inline block*/
     flex-direction: column; /*arranges all the child div as column i.e. one below the other*/
     text-align: left;
     margin: auto;
     

/*      position: relative; takes the default positioning of static*/
}

.search-bar-container-flow{
     display:inline-block; /*treats all the child divs as inline block*/
     flex-direction: column; /*arranges all the child div as column i.e. one below the other*/
     text-align: left;
     margin: auto;
     left: 8em;

/*      position: relative; takes the default positioning of static*/
}

.search-bar-container-screen{
     display:inline-block; /*treats all the child divs as inline block*/
     flex-direction: column; /*arranges all the child div as column i.e. one below the other*/
     text-align: left;
     margin: auto;
     left: 19em;

/*      position: relative; takes the default positioning of static*/
}

.search-bar {
    width: 400px; /*width of the search bar */
/*     height: 50px;*/
}

.search-bar-for-flows-dropdown {
    width: 250px; /*width of the search bar */
/*     height: 50px;*/
}


.overflow-hidden {
   overflow: hidden;
}

.small-search-bar {
   margin-bottom: 1em;  
   width: 100%;    
}

.search-result-list {
     width: 100%; /* takes the full width of the sibliing search bar class*/
     background-color: white;
     box-shadow: 0px 0px 8px #ddd;
     border-radius: 5px;
     z-index: 9999;
     position: absolute;
     max-height: 200px; 
     overflow-x: scroll;

}


/* text color of search result */
.search-result-list .item{
    color: black;
    padding: 10px 20px;
}
/* hover effect when search result item is hovered on */
.search-result-list .item:hover{
     background-color: #efefef;     
}

/*************REQUEST CONTENT FORM****************/
.wrapper {  
     margin-top: 5em;
      margin-bottom: 0em;
}



/*************REQUEST CONTENT FORM****************/


/***************************/
/* for search bar within the header */
.ui.fixed.menu .search-result-list .item {
    color: black;
    padding: 10px 20px;
    display: flex;
    flex-direction: row; /* Change this to row */
    align-items: center; /* Ensure items are vertically centered */
    justify-content: flex-start; /* Align items to the start of the container */
}

/* hover effect when search result item is hovered on */
.ui.fixed.menu .search-result-list .item:hover{
     background-color: #efefef;     
}

/***************************/
/**************WEB APP IMAGES FOR FLOWS*************/

.webapp-flows-horizontal-scrollable-list-container {
    overflow-x: hidden;
    white-space: nowrap;
    /*background-color: #f9f9f9;*/
    background-color: #efefef;
    transition: overflow-x 1s ease-in-out;
}

/*reduced the height of the scroll bar*/
.webapp-flows-horizontal-scrollable-list-container::-webkit-scrollbar {
    height: 4px;

}


/*display the horizontal scroll bar only on hover*/
.webapp-flows-horizontal-scrollable-list-container:hover {
  overflow-x: scroll;
  
}

.web-list {
  display: flex;

}

.web-list li {
  margin-right: 1em;
  list-style-type: none;
  /*margin-left: -40px;*/

}
/*remove the space between list and first li element*/
.web-list li:first-child {
  margin-left: -40px;
} 

.web-list li img {
   border: 1px solid  #ddd;
   /*border-radius: 10px;*/
    max-height: 50vh
}



.web-list li .flow-details-page-webapp-images {
     max-height: 75vh
}

/***************************/




/**************IOS APP IMAGES FOR FLOWS*************/

.iosapp-flows-horizontal-scrollable-list-container {
    overflow-x: hidden;
    white-space: nowrap;
   background-color: #efefef;
    transition: overflow-x 1s ease-in-out;
}

/*reduced the height of the scroll bar*/
.iosapp-flows-horizontal-scrollable-list-container::-webkit-scrollbar {
    height: 4px;

}


/*display the horizontal scroll bar only on hover*/
.iosapp-flows-horizontal-scrollable-list-container:hover {
  overflow-x: scroll;
  
}

.ios-list {
  display: flex;

}

.ios-list li {
  margin-right: 1em;
  list-style-type: none;
  /*margin-left: -40px;*/

}
/*remove the space between list and first li element*/
.ios-list li:first-child {
  margin-left: -40px;
}

.ios-list li img {
 border: 1px solid  #ddd;
     border-radius: 25px; 
     max-height: 60vh ;
}



.ios-list li .flow-details-page-webapp-images {
     max-height: 75vh
}


.compare-flow-list li .compare-flows-page-images {
  max-height: 45vh
}

.compare-flow-list {
  display: flex;

}

.compare-flow-list li {
  margin-right: 1em;
  list-style-type: none;
  /*margin-left: -40px;*/

}
/*remove the space between list and first li element*/
.compare-flow-list li:first-child {
  margin-left: -40px;
}

.compare-flow-list li img {
 border: 1px solid  #ddd;
     border-radius: 18px; 
     max-height: 60vh ;
}


.iosapp-flows-horizontal-scrollable-list-container {
    position: relative;
}

.iosapp-flows-horizontal-scrollable-list-container:hover .overlay {
    display: flex;
}

.overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
    justify-content: center;
    align-items: center;
    color: white; /* Bright text color */
    transition: display 0.5s ease;
}
/***************************/

/************PRODUCT INSIGHT HORIZONTAL BUTTONS***************/


.product-insight-horizontal-scrollable-list-container {
    overflow-x: hidden;
    white-space: nowrap;
     overflow-x: auto;
    transition: overflow-x 1s ease-in-out;
}

/*reduced the height of the scroll bar*/
.product-insight-horizontal-scrollable-list-container::-webkit-scrollbar {
    display: none;

}


.ui.product-insight-container{   
      padding: 2em 2em 0em 2em;
    }

/***************************/


.webapps-images{
     border: 1px solid  #ddd;
     border-radius: 10px;
     
}

.iosapps-images{
     border: 1px solid  #ddd;
     border-radius: 25px; 
     max-height: 60vh ;    
 
}

.slider-items {
    margin-right: 0.25em ;
}



.test {
    width: 100%;
   max-height: 220px;
}

.screens-flows-container{
    margin-top: 0.5em;
}


.screens-flows-rows{
    margin-bottom: 1.5em;
}


/************TO HAVE SPACE BETWEEN ROWS OF WEB APP***************/
.doubling.stackable.four.column.row > .column{
  margin-bottom: 3em;
}

/************TO HAVE SPACE BETWEEN ROWS OF IOS APP***************/
.doubling.stackable.five.column.row > .column{
  margin-bottom: 3em;
}

/************CLEAN LANDING PAGE***************/
.landingpage-tags {
    margin: 2em 6em 2em 6em;
}

p.landingpage-tags{
    font-size: 2em;
}
/************CLEAN LANDING PAGE***************/
/************ERROR PAGE***************/

.error-page {
  margin-top: 30vh
 
}

/**********ERROR PAGE ****************/

/**********INFO PAGE ****************/

.info-page {
  margin-top: 10vh
 
}

/**********INFO PAGE ****************/



/**********SMALL SCREENS ****************/

/* Extra small (mobile phones) */
@media only screen and (max-width: 480px) {
  /* CSS styles for extra small screens */

  .userflow-filter-left-coloum {
        display: none;
    }


  .ui.mini.image {
        max-width: 7%;
    }

    .iosapps-images{
     border: 1px solid  #ddd;
     border-radius: 25px; 
    }

     .web-list li img {
        max-height: 30vh;
    }

     .search-bar {
     width: 100%;
    }

    /*hiding menu bar login and create free a count */
    #menu-bar { display: none; }

     p {
        font-size: 1em;
     }
    /************CLEAN LANDING PAGE***************/
    .landingpage-tags {
        margin: 1em 1em 1em 1em;
    }

    p.landingpage-tags{
        font-size: 1.5em;
    }

    #extra-mini-logo-nav-bar{
        display: none;
    }

    .compare-modal.width-height {
      width: 80vw;
      height: 90vh;
    }

    /************CLEAN LANDING PAGE***************/

    /* hiding Apps menu item in small screens */
   /* .apps-menu-item {
      display: none;
  }*/

}

/* Small (iPads and tablets) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
  /* CSS styles for small screens */

 

   /*.ui.fixed.menu {
        display: none !important;
      }*/
      .secondary.pointing.menu .item,
      .secondary.pointing.menu .menu {
        display: none;
      }
      .secondary.pointing.menu .toc.item {
        display: block;
      }
      .masthead.segment {
        min-height: 350px;
      }
      .masthead h2 {
        margin-top: 0.5em;
        font-size: 1.5em;
      }


     /* .search-bar {
     width: 100%;
    }*/
     .side-search {
        display: none !important;
    }

    .ui.mini.image {
        max-width: 5%;
    }

    .web-list li img {
        max-height: 50vh;
    }

    p {
      font-size: 1.1em;
    }

    .iosapps-images{
     border: 1px solid  #ddd;
     border-radius: 30px; 

    }

   .web-list li .flow-details-page-webapp-images{
     max-height: 400px;
}

    /*hiding menu bar login and create free a count */
      #menu-bar { display: none; }

      #sidebar-meeako-nav-item{
            display: none;
        }

        .compare-modal.width-height {
          width: 70vw;
          height: 80vh;
        }


}

/* Medium (laptops and small screens) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* CSS styles for medium screens */

        #sidebar { display: none; }

        #sidebar-meeako-nav-item{
            display: none;
        }

        .compare-modal.width-height {
          width: 60vw;
          height: 62vh;
        }

}

/* Large (large screens and desktops) */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
  /* CSS styles for large screens */
  #sidebar { display: none; }

   #sidebar-meeako-nav-item{
            display: none;
        }


  .compare-modal.width-height {
    width: 50vw;
    height: 62vh;
  }

}

/* Extra large (TV and extra large screens) */
@media only screen and (min-width: 1201px) {
  /* CSS styles for extra large screens */
  #sidebar { display: none; }

   #sidebar-meeako-nav-item{
            display: none;
        }
        
}