:root{
  --primary: #111c2d;
  --ocean: #51B3D1;
  --green: #217d27;
  --purple: #733ee4;
  --btn-bg:#733ee4;
  --body-bg:#f5f3ef;
  --body_alter: #F1EFE9;
  --dark-gray: #626373;
  --eybrow: rgba(17, 28, 45, 0.5);
  --sub-heading: rgba(17, 28, 45, 0.72); 
  --button-outline: rgba(17, 28, 45, 0.8);
  --light: rgba(17, 28, 45, 0.5);
  --text: rgba(17, 28, 45, 0.56);
  --toast: rgba(255,255,255,0.5);
  --toast-text: rgba(17, 28, 45, 0.64); 
  --stroke: rgba(17, 28, 45, 0.08); 
  --border-color: #d1d1d0;
  --pre-footer-top: #f1efe9;
  --form-stroke: rgba(17, 28, 45, 0.24); 
  --form-bg: #fff;
  --form-text: #000;
  --toggle-bg: rgba(17, 28, 45, 0.04);
  --toggle-stroke: rgba(17, 28, 45, 0.08);
  --toggle-icon-bg: #fff;
  --toggle-icon-text: #111C2D;
  --benchmark-stroke: rgba(17, 28, 45, 0.16);
}

.dark-mode{
  --primary: #F5F3EF;
  --ocean: #51B3D1;
  --green: #7ADC81;
  --purple: #946BEA;
  --btn-bg:#733ee4;
  --body-bg:#111C2D;
  --body_alter: #0e1523;
  --dark-gray: #cfcfcf;
  --eybrow: rgba(245, 243, 239, 0.5);
  --sub-heading: rgba(245, 243, 239, 0.72); 
  --button-outline: rgba(245, 243, 239, 0.8);
  --light: rgba(245, 243, 239, 0.5);
  --text: rgba(245, 243, 239, 0.56);
  --toast: rgba(245, 243, 239, 0.04);
  --toast-text: rgba(245, 243, 239, 0.64);
  --stroke: rgba(245, 243, 239, 0.08); 
  --border-color: rgba(245, 243, 239, 0.16);
  --pre-footer-top: #0E1725;
  --form-stroke: rgba(245, 243, 239, 0.24); 
  --form-bg: #111C2D;
  --form-text: #fff;
  --toggle-bg: rgba(245, 243, 239, 0.08);
  --toggle-stroke: rgba(245, 243, 239, 0.16);
  --toggle-icon-bg: #0E1725;
  --toggle-icon-text: #fff;
  --benchmark-stroke: rgba(245, 243, 239, 0.16);
}
.dark-mode .banner-logo{
  filter:brightness(0) invert(1);
}

#cs-content>:is(.x-section, div),
.x-bar{
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

body:not(.dark-mode){  
  .logo-light,
  .light-mode-icon{
    display:block !important;
  }
  .logo-dark,
  .dark-mode-icon{
    display:none !important;
  }
  .hide-on-light{
    display:none !important;
  }
}

body.dark-mode{
  .logo-dark,
  .dark-mode-icon{
    display:block !important;
  }
  .logo-light,
  .light-mode-icon{
    display:none !important;
  }
  .hide-on-dark{
    display:none !important;
  }
  .bg_invert{
    &>.x-bg{
      filter:invert(1);
    }
  }
  .invert_on_dark {
    filter: invert(1);
	}
}
body{
  background-color: var(--body-bg);
}

*{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.primary-cta-button{
  background-image: radial-gradient(88.72% 473.39% at 97.18% 0%, #84CEFF, #3EA2F9);
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #14194D;
  &:hover{
    color: #14194D;
  }
}
.gsap_anim {
    transition: .3s linear all !important;
}	



/* css for inline form submit */

.form_content.form_submitted form {
    border: none;
    background: transparent;
}

.confirmation_dialog {
    text-align: center !important;
    width: 100% !important;
    color: var(--primary);
  	* {
        text-align: center !important;
        padding: 0 !important;
    }
    .confirm_icon {
      width: 46px;
      margin-left: auto !important;
      margin-right: auto !important;
      margin-bottom: 10px !important;
  	}
    .confirm_icon svg {
      width: 100%;
      height: auto;
  	}
		.confirm_content {
        color: var(--primary);
      	h2 {
            color: var(--primary);
            font-size: 24px;
            margin: 0 0 12px;
            font-weight: normal;
        }
       p {
            color: var(--text);
            font-size: 14px;
        }
    }
}



.hubspot-form{
  --hs_form_border: rgba(17, 28, 45, 0.16);
  --hs_color_primary: #111C2D;
  --hs_color_body: #F5F3EF;
  --hs_color_text: rgba(17, 28, 45, 0.72);
  --hs_text_dark: rgba(17, 28, 45, 0.80);
  --hs_hover_btn: #A0AFEE;
  --hs_hover_btn_text: #111C2D;
  --hs_submit: #733ee4;
	--hs_submit_color: #fff;
  form {
      margin: 0 0 1.313em;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
  }
  .hs-form-field {
      flex-basis: 100%;
  }
  .hs-form-field {
    margin-bottom: 16px;
    label{
      font-size: 12px;
      line-height: 1.3333;
      font-weight: 500;
      font-family: "Geist", sans-serif;
      color: var(--hs_color_primary);
      margin-bottom: 8px;
      &.hs-error-msg {
          margin-top: 4px;
          opacity: .72;
          font-weight: normal !important;
      }
    }
  }
  input:not(:is([type="button"],[type="radio"],[type="checkbox"])) {
      height: 48px;
      box-shadow: none !important;
      border: 1px solid var(--hs_form_border) !important;
      border-radius: 8px !important;
      background: var(--hs_color_body) !important;
      color: var(--hs_color_primary) !important;
      padding: 0 16px !important;
    	outline:none;
    	margin:0 !important;
  }
  select{
      height: 48px;
      box-shadow: none !important;
      border: 1px solid var(--hs_form_border) !important;
    	border-radius:8px !important;
      background-color:var(--hs_color_body) !important;
      background-image: url('data:image/svg+xml,<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.666626 0.666687L4.66663 4.66669L8.66663 0.666687" stroke="%23111C2D" stroke-opacity="0.8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
      color: var(--hs_color_primary) !important;
      background-repeat: no-repeat;
      background-position: right 20px center;
      background-size: 12px;
      -webkit-appearance: none;
      outline:none;
    	white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 44px 0 16px !important;
    	outline:none;
    	margin:0 !important;
      option{
					color: var(--hs_color_body) !important;
      }
    }
    textarea{
			height: 120px;
      box-shadow: none !important;
      border: 1px solid var(--hs_form_border) !important;
      border-radius: 8px !important;
      background: var(--hs_color_body) !important;
      color: var(--hs_color_primary) !important;
      padding: 16px !important;
    	outline:none;
    	margin:0 !important;
    }
  	legend.hs-field-desc {
        font-size: 10px;
        color: var(--hs_color_primary);
        font-style: italic;
        border: none;
        margin-bottom: 8px;
        opacity: .56;
    }
  	ul.inputs-list {
        list-style: none;
        margin-left: 0;
      	padding: 0;
      	li.hs-form-booleancheckbox>label {
            display: flex;
            gap: 6px;
          gap: 6px;
    			align-items: flex-start;
          .hs-input[type="checkbox"] {
              margin: 0.2em 0;
              width: 1em;
              height: 1em;
            	flex-shrink:0;
          }
        }
    }
  
  	input[type="button"], input[type="button"]:hover,
    input[type="submit"], input[type="submit"]:hover{
        height: 48px !important;
        padding: 0 24px !important;
        text-shadow: none !important;
        border-radius: 100px !important;
        font-size: 14px !important;
        line-height: 48px !important;
        font-weight: 500 !important;
        font-family: "Geist", sans-serif !important;
        color: var(--hs_submit_color) !important;
        background: var(--hs_submit) !important;
        border: none !important;
      	margin: 0 !important;
      	text-shadow:none !important;
      	min-width: 180px;
      &:hover{
       /* background: var(--hs_hover_btn) !important;
        color: var(--hs_hover_btn_text) !important; */
        
      }
    }
  
    .ds_succcess_msg {
        min-height: 360px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-top:88px;
      .success_img{
        img {
            width: 96px;
            height: 96px;
            object-fit: contain;
        }
        &.w_48{
          img{
            width: 48px;
            height: 48px;
          }
        }
       }

      .success_msg{
        margin-bottom:88px;
        max-width: 480px;
        h4 {
            margin-top: 24px;
            font-size: 16px;
            font-weight: 300;
            color: var(--hs_color_primary);
            letter-spacing: 0px;
            font-family: "Geist", sans-serif;
            margin-bottom: 8px;
        }
        p {
            font-size: 14px;
            font-weight: 400;
            color: var(--hs_color_text);
            font-family: "Geist", sans-serif;
            &:last-child{
              margin-bottom:0;
            }
            a{
                color:var(--hs_color_primary);
                text-decoration:underline !important;
            }
        }
      }
      .succss_reload_page{
        width:100%;
        a.s_reload {
            border: 1px solid var(--gf-text-dark);
            color: var(--gf-text-dark);
            display: block;
            width: 100%;
            font-size: 14px;
            font-weight: 400;
            font-family: "Geist", sans-serif;
            left: -0.02em;
            padding: 12px 24px;
            line-height: 20px;
            border-radius: 100px;
        }
      }
    }
  
  @media(min-width:600px){
    .hs_firstname, 
    .hs_lastname,
    .hs_web_presence,
    .hs_company{
        flex-basis: calc(50% - 10px);
    }
  }
  
  &.dark{
   
    --hs_form_border: rgba(245, 245, 239, 0.16);
    --hs_color_primary: #F5F3EF;
    --hs_color_body: #111C2D;
    --hs_color_text: rgba(245, 245, 239, 0.72);
    --hs_text_dark: rgba(245, 245, 239, 0.80);
    --hs_hover_btn: #A0AFEE;
    --hs_hover_btn_text: #111C2D;
     select{
       background-image: url('data:image/svg+xml,<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.666626 0.666687L4.66663 4.66669L8.66663 0.666687" stroke="%23F5F3EF" stroke-opacity="0.8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/></svg>') !important;
    }
  }
}
body.dark-mode{
  .hubspot-form{
     --hs_form_border: rgba(245, 245, 239, 0.16);
    --hs_color_primary: #F5F3EF;
    --hs_color_body: #111C2D;
    --hs_color_text: rgba(245, 245, 239, 0.72);
    --hs_text_dark: rgba(245, 245, 239, 0.80);
    --hs_hover_btn: #A0AFEE;
    --hs_hover_btn_text: #111C2D;
    --hs_submit: #733ee4;
    --hs_submit_color: #fff;
  }
}

.hubspot-form-inline {
  form{
    display: flex;
    align-items: center;
    margin: 0;
    flex-wrap: nowrap;
    width: 100% !important;
    border: 1px solid var(--form-stroke);
    background: var(--form-bg);
    padding: 4px;
    border-radius: 100px;
    .hs-error-msgs {
        position: absolute;
        color: var(--form-text) !important;
        width: 100%;
        padding: 0;
        margin: 8px 0 0;
        list-style: none;
        opacity: .56;
        font-size: 12px;
    }

    .hs-form-field {
        flex-basis: 100%;
      &>label{
        display:none !important;
      }
    }
    .hs_submit.hs-submit {
        flex-shrink: 0;
    }
    input[type="email"] {
        width: 100% !important;
        border: none;
        background: transparent;
        color: var(--form-text) !important;
        height: 46px;
        line-height: 44px;
        font-size: 16px;
        letter-spacing: 0;
        outline: none !important;
        padding: 0 16px;
    }
    input.hs-button {
        background: var(--btn-bg) !important;
        color: #fff !important;
        height: 48px !important;
        width: 128px;
        font-size: 14px !important;
        letter-spacing: -0.01;
        outline: none !important;
        line-height: 48px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 100px !important;
        font-weight: 500 !important;
        font-family: "Geist", sans-serif !important;
    }
  }
  @media (max-width: 600px){
    form{
      flex-direction: column;
      border-radius: 20px;
      .hs-form-field,
      .hs_submit.hs-submit{
            width: 100%;
      }
      input.hs-button {
          width: 100% !important;
      }
      .hs-error-msgs {
            position: relative;
      }
    }
  }
}



body {
  .snorkel_archive_wrap {
    .snorkel_listing_filters {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      flex-wrap: wrap;
      gap: 24px;

      .filter_wrapper {
        display: flex;
        flex-wrap: wrap;
        column-gap: 8px;
        row-gap: 8px;
      }

      .filter_title {
        font-weight: 300;
        font-size: 32px;
        line-height: 1.12;
        letter-spacing: -0.02em;
        color: var(--card_title);
      }

      .search_item {
        display: flex;
        align-items: center;
        border:.5px solid var(--form-stroke);
        border-radius: 8px;
        overflow: hidden;
        padding: 0;
        position: relative;
        background-color: var(--pre-footer-top);

        svg {
          width: 16px;
          height: auto;
          display: block;
          position: absolute;
          left: 16px;
          top: 50%;
          transform: translateY(-50%);
          color: var(--primary);
        }

        input {
          background: transparent;
          margin: 0;
          height: 46px;
          width: 320px;
          position: relative;
          padding: 0 16px 0 40px;
          border: none;
          outline: none;
          font-size: 14px;
          font-weight: 500;
          color: var(--primary);
          box-shadow: none;
        }
      }

      select {
        background: var(--card_bg);
        border: .5px solid var(--form-stroke);
        height: 48px;
        line-height: 48px;
        padding: 0 40px 0 16px;
        border-radius: 8px;
        -webkit-appearance: none;
        background-image: url('data:image/svg+xml,<svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5L4.5 4.5L8.5 0.5" stroke="%23111C2D" stroke-opacity="0.72" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        background-repeat: no-repeat;
        background-position: right 15px center;
        outline: none;
        box-shadow: none;
        margin: 0;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: var(--card_title);
      }

      .filter_dorpdown {
        position: relative;
        display: flex;
        align-items: center;
        height: 48px;
        background: transparent;
        border: .5px solid var(--form-stroke);
        padding: 0 16px;
        border-radius: 8px;
        cursor: pointer;

        .current_filter {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 500;
          font-size: 14px;
          line-height: 20px;
          color: var(--primary);
          gap: 12px;

          .current_selected {
            color: var(--sub-heading);
          }
        }

        .filter_menu {
          position: absolute;
          background: var(--form-bg);
          border: 0.5px solid var(--stroke);
          box-shadow: 0px 4px 8px -2px var(--dropdown_shadow), 0px 2px 4px -1px var(--dropdown_shadow);
          border-radius: 8px;
          padding: 8px;
          top: calc(100% + 8px);
          width: calc(100% + 16px);
          min-width: 240px;
          z-index: 9;
          left: -8px;
          display: none;
          max-height: 250px;
          overflow: auto;

          &::-webkit-scrollbar {
            width: 5px;
            height: 5px;
          }

          &::-webkit-scrollbar-thumb {
            background: var(--card_border);
            border-radius: 3px
          }

          &.dd-right {
            left: auto;
            right: -8px;
          }
        }

        &.active {
          .filter_menu {
            display: block;
          }
        }

        .filter_menu input[type="checkbox"],
        .filter_menu input[type="radio"] {
          display: none;
        }

        .filter_menu {
          input[type="checkbox"] {
            &+label {
              display: flex;
              align-items: center;
              gap: 8px;
              cursor: pointer;
              padding: 10px 8px;
              border-radius: 4px;
              transition: .2s linear;
              font-weight: 500;
              font-size: 14px;
              line-height: 20px;
              color: var(--sub-heading);

              &:hover {
                background-color: var(--body-bg);
              }

              .label-indicator {
                display: flex;
                border: 1px solid var(--card_border);
                width: 16px;
                height: 16px;
                border-radius: 4px;
                flex-shrink: 0;
                align-items: center;
                justify-content: center;

                svg {
                  opacity: 0;
                }
              }
            }

            &:checked+label {
              margin: 0;

              /*background-color: var(--card_bg); */
              .label-indicator {
                background: #5E5AD1;
                border-color: #5E5AD1;

                svg {
                  opacity: 1;
                }
              }

            }
          }

          input[type="radio"] {
            &+label {
              display: flex;
              align-items: center;
              justify-content: space-between;
              cursor: pointer;
              padding: 10px 8px;
              border-radius: 4px;
              transition: .2s linear;
              font-weight: 500;
              font-size: 14px;
              line-height: 20px;
              color: var(--sub-heading);

              &:hover {
                background-color: var(--body-bg);
              }

              .label-indicator {
                display: flex;

                width: 16px;
                height: 16px;
                flex-shrink: 0;
                align-items: center;
                justify-content: center;

                svg {
                  opacity: 0;
                }
              }
            }

            &:checked+label {
              margin: 0;
              background-color: var(--toggle-bg);
              color: var(--primary);
              .label-indicator {
                svg {
                  opacity: 1;
                }
              }

            }
          }

        }

      }

    }

  

    .snorkel_archive_pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 40px;
      flex-wrap: wrap;

      .page-numbers {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        min-width: 40px;
        color: var(--sub-heading);
        border: 1px solid var(--form-stroke);
        line-height: 1.2;
        font-weight: 500;
        font-size: 14px;

        svg {
          width: 10px;
          height: auto;
          color: inherit;
          fill: currentColor;
        }

        &.current {
          color: var(--primary);
          border: 1px solid var(--primary);
        }
      }
    }

    .snorkel_post_loop {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      border-left: 0.5px solid var(--benchmark-stroke);
      border-top: 0.5px solid var(--benchmark-stroke);
      .benchmark-cell {
        padding: 40px;
        border-right: 0.5px solid var(--benchmark-stroke);
        border-bottom: 0.5px solid var(--benchmark-stroke);
        color: var(--primary);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        a.link-overlay {
          position: absolute;
          inset: 0;
          opacity: 0;
        }
        .benchmark-title {
            font-size: 24px;
            line-height: 1.17;
            letter-spacing: -0.02em;
            margin-bottom: 16px;
        }
        .desccription {
            font-size: 16px;
            line-height: 1.5;
            opacity: .72;
        }
        .company{
          font-size: 12px; 
          line-height: 16px;
          opacity: .56;
        }
        .benchmark-logo{
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 16px;
          img {
              width: 180px;
              height: 48px;
              object-fit: contain;
              object-position: left center;
          }
        }
        .pill-logo{
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 10px;
          border-radius: 9999px;
          background: linear-gradient(90deg, #733EE4 0%, #51B3D1 100%);
          &:before {
            content: "";
            position: absolute;
            inset: 1px;
            border-radius: 9999px;
            background: var(--body-bg);
          }
          .pill-text {
            font-family: 'Geist Mono', 'geist-mono', monospace;
            font-weight: 500;
            font-size: 16px;
            line-height: 1;
            background: linear-gradient(90deg, #733EE4 0%, #51B3D1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent;
            position: relative;
          }
        }
      }
      &[data-current-count="0"]{
        border: none;
      }
      @media(max-width:640px){
        .benchmark-cell {
          padding: 24px;
        }
      }
    }

    

    @media (max-width: 767px) {
      .snorkel_listing_filters {
        .filter_title {
          font-size: 28px;
        }
      }
    }

    @media (max-width: 639px) {
      .snorkel_listing_filters {
        .filter_wrapper {
          width: 100%;
          flex-direction: column;
        }
        .filter_title{
          width: 100%;
        }
      }
    }
  }
}