.outgrow_wrapper {
  background: url("../../images/Frame\ 778.png");
  /* height: 100%; */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
a:focus,
a:active {
    outline: none;
}
.outgrow_inner_wrapper{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  h1{
    font-family: 'Ubuntu';
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: center;
  }
}

  .select-field{
    width: 650px!important;
    height: 52px!important;
    max-width: 650px!important;
    max-height: 52px!important;
    position: relative;
    border-color:#0000001A!important;
    padding: 20px;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #0000001A;
    border-left: 0;
    gap: 10px;
    box-shadow: none;
  option{
    padding-left: 25px; /* Adjust this value based on your icon size */
    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><rect width='32' height='32' rx='16' fill='%23FB5F66' fill-opacity='0.1'/><rect x='0.5' y='0.5' width='31' height='31' rx='15.5' stroke='%23FB5F66' stroke-opacity='0.1'/><path d='M12.9988 24C11.7915 23.9992 10.6252 23.562 9.71514 22.769C8.80507 21.9759 8.21265 20.8806 8.0472 19.6852C7.88175 18.4897 8.15444 17.2748 8.81494 16.2646C9.47544 15.2544 10.4792 14.5171 11.641 14.1887C12.4854 13.947 13.3792 13.9359 14.2293 14.1567L19.5035 8.88601C19.7835 8.6042 20.1167 8.38077 20.4837 8.22868C20.8508 8.07658 21.2444 7.99886 21.6417 8.00001C22.267 8.00054 22.8665 8.24907 23.3087 8.69104C23.7508 9.13301 23.9995 9.7323 24 10.3573C24.001 10.7545 23.9233 11.148 23.7713 11.515C23.6192 11.8819 23.3959 12.2152 23.1143 12.4953L22.6661 12.9433C22.4153 13.1923 22.0765 13.3324 21.7231 13.3333H20.6653V14C20.6653 14.3536 20.5248 14.6928 20.2746 14.9428C20.0245 15.1929 19.6852 15.3333 19.3314 15.3333H18.6645V16.3907C18.665 16.5658 18.6307 16.7393 18.5636 16.9012C18.4965 17.063 18.3979 17.2099 18.2737 17.3333L17.8401 17.7667C18.0622 18.6161 18.0514 19.5096 17.8088 20.3533C17.5358 21.3147 16.982 22.1727 16.2182 22.8175C15.4545 23.4623 14.5156 23.8645 13.5217 23.9727C13.348 23.9907 13.1735 23.9998 12.9988 24ZM12.9988 15.3333C12.316 15.3327 11.6465 15.5226 11.0658 15.8816C10.485 16.2406 10.0161 16.7546 9.71171 17.3656C9.40733 17.9766 9.27961 18.6604 9.34294 19.34C9.40626 20.0197 9.65811 20.6681 10.0701 21.2124C10.4822 21.7567 11.038 22.1753 11.6751 22.4209C12.3122 22.6666 13.0052 22.7296 13.6762 22.6029C14.3472 22.4762 14.9694 22.1648 15.473 21.7038C15.9765 21.2428 16.3413 20.6504 16.5263 19.9933C16.7344 19.271 16.711 18.5017 16.4596 17.7933C16.4185 17.675 16.4117 17.5476 16.4397 17.4255C16.4678 17.3035 16.5297 17.1918 16.6183 17.1033L17.3306 16.3907V15.3333C17.3306 14.9797 17.4711 14.6406 17.7213 14.3905C17.9714 14.1405 18.3107 14 18.6645 14H19.3314V13.3333C19.3314 12.9797 19.472 12.6406 19.7221 12.3905C19.9723 12.1405 20.3115 12 20.6653 12H21.7231L22.1712 11.552C22.3286 11.3954 22.4534 11.2093 22.5383 11.0042C22.6233 10.7991 22.6667 10.5793 22.6661 10.3573C22.6659 10.0859 22.558 9.82568 22.3661 9.6337C22.1742 9.44172 21.9139 9.3337 21.6424 9.33334C21.4202 9.3328 21.2001 9.3763 20.9948 9.46132C20.7896 9.54634 20.6032 9.6712 20.4465 9.82868L14.8903 15.382C14.8016 15.4706 14.6898 15.5324 14.5675 15.5604C14.4453 15.5883 14.3177 15.5812 14.1993 15.54C13.8126 15.4039 13.4056 15.334 12.9955 15.3333H12.9988ZM11.3282 20C11.3282 20.1319 11.3673 20.2608 11.4406 20.3704C11.5138 20.48 11.618 20.5655 11.7399 20.6159C11.8617 20.6664 11.9958 20.6796 12.1252 20.6539C12.2546 20.6281 12.3734 20.5646 12.4667 20.4714C12.56 20.3782 12.6235 20.2594 12.6492 20.1301C12.675 20.0007 12.6618 19.8667 12.6113 19.7449C12.5608 19.6231 12.4753 19.5189 12.3656 19.4457C12.256 19.3724 12.127 19.3333 11.9951 19.3333C11.8182 19.3333 11.6486 19.4036 11.5235 19.5286C11.3984 19.6536 11.3282 19.8232 11.3282 20Z' fill='%23FB5F66'/></svg>");
    background-repeat: no-repeat;
    background-position: left center;
    max-height: 52px!important;
    border-color:#0000001A!important;
  }
  }
  .select-field::before {
    content: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><rect width='32' height='32' rx='16' fill='%23FB5F66' fill-opacity='0.1'/><rect x='0.5' y='0.5' width='31' height='31' rx='15.5' stroke='%23FB5F66' stroke-opacity='0.1'/><path d='M12.9988 24C11.7915 23.9992 10.6252 23.562 9.71514 22.769C8.80507 21.9759 8.21265 20.8806 8.0472 19.6852C7.88175 18.4897 8.15444 17.2748 8.81494 16.2646C9.47544 15.2544 10.4792 14.5171 11.641 14.1887C12.4854 13.947 13.3792 13.9359 14.2293 14.1567L19.5035 8.88601C19.7835 8.6042 20.1167 8.38077 20.4837 8.22868C20.8508 8.07658 21.2444 7.99886 21.6417 8.00001C22.267 8.00054 22.8665 8.24907 23.3087 8.69104C23.7508 9.13301 23.9995 9.7323 24 10.3573C24.001 10.7545 23.9233 11.148 23.7713 11.515C23.6192 11.8819 23.3959 12.2152 23.1143 12.4953L22.6661 12.9433C22.4153 13.1923 22.0765 13.3324 21.7231 13.3333H20.6653V14C20.6653 14.3536 20.5248 14.6928 20.2746 14.9428C20.0245 15.1929 19.6852 15.3333 19.3314 15.3333H18.6645V16.3907C18.665 16.5658 18.6307 16.7393 18.5636 16.9012C18.4965 17.063 18.3979 17.2099 18.2737 17.3333L17.8401 17.7667C18.0622 18.6161 18.0514 19.5096 17.8088 20.3533C17.5358 21.3147 16.982 22.1727 16.2182 22.8175C15.4545 23.4623 14.5156 23.8645 13.5217 23.9727C13.348 23.9907 13.1735 23.9998 12.9988 24ZM12.9988 15.3333C12.316 15.3327 11.6465 15.5226 11.0658 15.8816C10.485 16.2406 10.0161 16.7546 9.71171 17.3656C9.40733 17.9766 9.27961 18.6604 9.34294 19.34C9.40626 20.0197 9.65811 20.6681 10.0701 21.2124C10.4822 21.7567 11.038 22.1753 11.6751 22.4209C12.3122 22.6666 13.0052 22.7296 13.6762 22.6029C14.3472 22.4762 14.9694 22.1648 15.473 21.7038C15.9765 21.2428 16.3413 20.6504 16.5263 19.9933C16.7344 19.271 16.711 18.5017 16.4596 17.7933C16.4185 17.675 16.4117 17.5476 16.4397 17.4255C16.4678 17.3035 16.5297 17.1918 16.6183 17.1033L17.3306 16.3907V15.3333C17.3306 14.9797 17.4711 14.6406 17.7213 14.3905C17.9714 14.1405 18.3107 14 18.6645 14H19.3314V13.3333C19.3314 12.9797 19.472 12.6406 19.7221 12.3905C19.9723 12.1405 20.3115 12 20.6653 12H21.7231L22.1712 11.552C22.3286 11.3954 22.4534 11.2093 22.5383 11.0042C22.6233 10.7991 22.6667 10.5793 22.6661 10.3573C22.6659 10.0859 22.558 9.82568 22.3661 9.6337C22.1742 9.44172 21.9139 9.3337 21.6424 9.33334C21.4202 9.3328 21.2001 9.3763 20.9948 9.46132C20.7896 9.54634 20.6032 9.6712 20.4465 9.82868L14.8903 15.382C14.8016 15.4706 14.6898 15.5324 14.5675 15.5604C14.4453 15.5883 14.3177 15.5812 14.1993 15.54C13.8126 15.4039 13.4056 15.334 12.9955 15.3333H12.9988ZM11.3282 20C11.3282 20.1319 11.3673 20.2608 11.4406 20.3704C11.5138 20.48 11.618 20.5655 11.7399 20.6159C11.8617 20.6664 11.9958 20.6796 12.1252 20.6539C12.2546 20.6281 12.3734 20.5646 12.4667 20.4714C12.56 20.3782 12.6235 20.2594 12.6492 20.1301C12.675 20.0007 12.6618 19.8667 12.6113 19.7449C12.5608 19.6231 12.4753 19.5189 12.3656 19.4457C12.256 19.3724 12.127 19.3333 11.9951 19.3333C11.8182 19.3333 11.6486 19.4036 11.5235 19.5286C11.3984 19.6536 11.3282 19.8232 11.3282 20Z' fill='%23FB5F66'/></svg>");
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
}
  .select-field:focus,.select-field:hover, .option-field{
    box-shadow: 0 0 0 1px #FB5F66!important;
color: #666666!important;
  }
  .select-field:active{
    border: 1px solid #FB5F66;
    color: #666666;
    box-shadow: none;
  }
  .empty-api-collection{
    width: 650px!important;
    height: 328px!important;
    max-width: 650px!important;
    max-height: 328px!important;
    border-radius: 6px;
    gap: 15px;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img{
        max-width: 100%; /* Ensure the image does not exceed the container width */
        max-height: 100%; /* Ensure the image does not exceed the container height */
    }
  }
.outgrow-border-button{
  border-radius: 4px;
  background-color: #FAFAFA;
  border: solid 1px #FB5F66;
  color: #FB5F66;
  padding: 7px 10px 7px 10px;
  Gap: 7px;
  display: flex;
  align-items: center;
}
#dLabel {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
  border: solid 1px #cccccc;
  text-align: left;
  padding: 7.5px 15px;
  color: #ccc;
  letter-spacing: 0.7px;
  margin-top: 25px;
}

.caret {
  float: right;
  margin-top: 9px;
  display: block;
}

.dropdown-menu {
  width: 100%;
  padding: 0;
  margin: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown button:hover,
.dropdown button:focus {
  border: none;
  outline: 0;
}

.dropdown.open button#dLabel {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.23);
  border: solid 1px #666;
  border-bottom: none;
}

.dropdown.open ul {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.23);
  border: solid 1px #666;
  border-top: none;
  height: 200px;
  overflow-y: scroll;
}

.dropdown-menu li {
  line-height: 1.5;
  letter-spacing: 0.7px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  padding: 7.5px 15px;
  border-top: solid 1px #f3f3f3;
}

.dropdown-menu li:hover {
  background-color: #ccc;
}
/* Add your button styles here */

.popup {
  width: 900px; 
   overflow: auto;
  height: 372px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1;
  flex-direction: column;
  justify-content: space-between;
}
.popup1 {
  width: 600px; 
   overflow: auto;
  /* height: 75vh; */
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 1;
  flex-direction: column;
  justify-content: space-between;
}
.popup-content {
  height: 167px;
  display: flex;
  flex-direction: column;
  /* align-items: center;
  justify-content: center;
  text-align: center; */
  gap:10px;
  padding: 20px 30px 20px 30px;
  label{
  font-size: 13px;
  }
}
.popup-content input{

padding: 20px 30px 20px 30px;
padding: 15px;
border-radius: 6px;
border: 1px solid #0000001A;
gap: 10px;
background-color: #F6F6F6;
font-size: 14px;
line-height: 16px;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#222222CC; /* Adjust the opacity as needed */
  z-index: 1;
}
.popup_inner_wrapper{
  height: 30px;
  padding: 20px 30px 20px 30px;
  border-radius: 10px 10px 0px 0px;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #0000001A;
  border-left: 0;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap:10px;
  .binding{
    display: flex;
    align-items: center;
    gap:10px;
  }
  h2{
    font-size: 18px;
    font-weight: 400;
  }
}
.popup-footer{
  /* height: 62px; */
  background-color: #F6F6F6;
  padding: 20px 30px 20px 30px;
  align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 0px 0px 10px 10px;
}
.popup-footer input{
  width: 85px;
  height: 32px;
  border-radius: 4px;
  gap: 10px;
  opacity: 0.7;
  background-color: #FB5F66;
  font-size: 14px;
  font-weight:400;
    align-content: center;
    line-height: 16.09px;
color:white;
    border-color: #FB5F66;
}

#additionalBlock{
  width: 100%;
  height:100%;
  margin-top: 50px;
  background-color: white;
}

#menu {
  /* background-color: #333; */
  overflow: hidden;
display: flex;
justify-content: center;
  color: #666666;
  background-color: white;
  padding-top: 40px;
}

#menu a {
  float: left;
  color: #666666;
  text-align: center;
  padding: 14px 16px;
  height: 2rem;
  text-decoration: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #0000001A;
  border-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:8px;
  svg{
    fill: #666666;
  }
}

#menu a:hover {
  background-color: #FB5F660D;
  color: #FB5F66;
border-top: 0!important;
border-right: 0;
border-bottom: 2px solid #FB5F66;
border-left: 0;
box-shadow: none;
svg{
  fill: #FB5F66;
}
}
#menu .active {
  background-color: #FB5F660D!important ;
  color: #FB5F66!important ;
border-top: 0!important ;
border-right: 0!important ;
border-bottom: 2px solid #FB5F66!important ;
border-left: 0!important ;
box-shadow: none;
svg{
  fill: #FB5F66;
}
}
#content {
  padding: 20px;
  background: white;
  h2{
    font-size: 22px;
    font-weight: 500;
  }
}

.hidden {
  display: none;
}
.outer-list{
  display: flex;
  justify-content: center;
}
#calculator-list,#Calculator-list, #Assessment-list, #eCom-list, #Quiz-list, #Chatbot-list, #Giveaway-list, #Survey-list, #Form-list ,#Poll-list{
  display: flex;
  flex-wrap: wrap; 
  width: 80%;
}
.outgrow-calc-card{
  width: 268px;
  height: 228px;
  background: white;
  border-radius: 10px;
  flex-grow: 0;
  flex-basis: calc(25% - 2%); /* Adjust the width based on your needs */
  margin: 1%; /* Add margin for spacing between elements */
  box-sizing: border-box;
  box-shadow: 4px 3px 17px 0px #00000017;
  img{
    width: 100%;
    height: 160.8px;
    border-radius: 10px 10px 0px 0px;
  }
  p{
    padding: 15px 10px 15px 10px;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: left;

  }
}
#popupContent {
  height: 85%;
  display: flex;
flex-direction: column;
}
.horizontal-menu {
  height: 40px;
  display: flex;
  margin-bottom: 20px;
  /* justify-content: space-between; */
}

.horizontal-menu a {
  padding: 10px 20px;
  color: #666666;
  text-align: center;
  height: 2rem;
  text-decoration: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #0000001A;
  border-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:8px;
  svg{
    fill: #666666;
  }
}
.horizontal-menu a:hover {
  background-color: #FB5F660D !important;
  color: #FB5F66 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 2px solid #FB5F66 !important;
  border-left: 0 !important;
  box-shadow: none;

  /* If there is an SVG inside the anchor, you might need a different approach */
  /* Example assuming the SVG is a direct child of the anchor */
  > svg {
      fill: #FB5F66;
  }
}
.horizontal-menu a.active {
  background-color: #FB5F660D !important;
  color: #FB5F66 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 2px solid #FB5F66 !important;
  border-left: 0 !important;
  box-shadow: none;

  /* If there is an SVG inside the anchor, you might need a different approach */
  /* Example assuming the SVG is a direct child of the anchor */
  > svg {
      fill: #FB5F66;
  }
}

.menu-wrapper{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#222222CC;
  z-index: 1;
    justify-content: center;
    align-items: center;
}

#extra_option{
width: 40%;
height: 250px;
display: flex;
overflow: auto;
}

#shortcode_text{
      width: 100%;
      border: 1px solid #e8ecee;
      background: #f6f8f9;
      white-space: pre-wrap;
      padding: 15px;
      margin-bottom: 17px!important;
      margin-top: 20px!important;
      color: #444;
      display: flex;
      /* align-items: center; */
      justify-content: center;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle-switch input {
  display: none;
}

.toggle-switch label {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 20px;
  background-color: #ccc;
  border-radius: 34px;
  cursor: pointer;
}

.toggle-switch input:checked + label {
  background-color: #FB5F66;
  ;
}

.toggle-switch label:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch input:checked + label:after {
  transform: translateX(26px);
}

#extra_option {
  margin-top: 20px;
}
.popup_mode_block ul li input[type=radio] {
  position: absolute;
  left: -99999px;
}
.popup_mode_block ul li.active {
  border: 1px solid #3e9adc!important;
}
a.bot-circle.left + .og-chat-box-outer .og-chat-box {
  left: 30px !important;
  right: inherit;
}