/* @font-face {
  font-family: "inter";
  src: url("fonts/static/Inter-Thin.ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "inter";
  src: url("fonts/static/Inter-Regular.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "inter";
  src: url("fonts/static/Inter-SemiBold.ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "inter";
  src: url("fonts/static/Inter-Bold.ttf");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "inter";
  src: url("fonts/static/Inter-ExtraBold.ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "inter";
  src: url("fonts/static/Inter-Black.ttf");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
} */
html,
body {
  font-family: 'Roboto', sans-serif;
}
main {
  /* min-height: 1542px; */
}
main{
  padding-top: 16px !important;
  padding-bottom: 40px;
}
button:disabled {
  cursor: default !important;
}
.a-logo:hover{
  cursor: pointer;
}

.color-primary{
  color: #0F53FA;
}
.opacity-0{
  opacity: 0;
}
#email-verify-container {
    padding: 32px 40px;
    gap: 24px;
    width: 440px;
    height: 310px;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    border-radius: 12px;
    margin: auto;
    margin-top: 64px;
    text-align: center;
    margin-bottom: 32px;
}
#email-verify-container .title{
  font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    text-align: center;
    color: #101828;
    margin-top: 24px;
}
#email-verify-container .sub-text{
  font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #475467;
    margin-top: 12px;
}

#email-verify-container .button-container .continue-btn{
  margin-top: 24px;
    height: 44px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    padding: 0;
    width: 100%;
}
.btn-primary {
  align-items: center;
  padding: 16px 28px;
  gap: 12px;

  width: 215px;
  height: 60px;

  background: #0f53fa;
  border: 1px solid #0f53fa;
  /* Shadow/xs */

  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
  color: #ffffff;
}
.btn-primary:disabled {
  background: rgba(15, 83, 250, 0.5);
  border: none;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}
.btn-primary-outline {
  padding: 16px 28px;
  gap: 12px;
  height: 60px;
  border: 1px solid #0f53fa;
  filter: drop-shadow(0px 1px 2px rgba(16, 24, 40, 0.05));
  border-radius: 8px;
  color: #0f53fa;
}
.btn-primary-outline:hover {
  background: #0f53fa;
  color: #fff;
}
.btn-cancel-outline {
  padding: 10px 16px;
  gap: 8px;
  height: 40px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px rgb(16 24 40 / 5%);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #344054;
}
.btn-cancel-outline:hover {
  background: #d0d5dd;
}

.btn-outline-light{
  background: #FFFFFF;
  border: 1px solid #D0D5DD;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
}
.btn-outline-light:hover{
  background: #F9FAFB;
  border: 1px solid #D0D5DD;
}
.btn-danger{
  background: #D92D20;
  border: 1px solid #B42318;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
  padding: 10px 18px;
  gap: 8px;
}

.btn-transparent{
  background: none;
  border: none;
}

.btn-transparent:hover, .btn-transparent:focus{
  background: none;
  border: none;
}

.request-access-btb,
.signup-btn {
  align-items: center;
  padding: 10px 16px;
  gap: 8px;
  width: 214px;
  height: 44px;
  /* background: #0f53fa;
  border: 1px solid #0f53fa; */
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;

  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  /* color: #ffffff; */
}
.signup-btn{
  width: auto;
}
.request-access-btb:hover,
.signup-btn:hover {
  /* color: #ffffff;
  background: hsl(223, 89%, 48%); */
}
.flowPage .background-float-header-home, .homepage .background-float-header{
  display: none !important;
}
.background-float-header, .background-float-header-home {
  background: #f9fafb;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 840px;
}
.background-float-header-home{
  height: 960px;
}
header {
  background: #f9fafb;
  border-bottom: 1px solid #f2f4f7;
  padding-top: 18px;
  padding-bottom: 18px;
}
header #navbarNav {
  position: relative;
}

header .login-sign-up-container {
  position: absolute;
  right: 0;
}
.container-fluid {
  padding-left: 7.5%;
  padding-right: 7.5%;
}
header ul.navbar-nav, header ul.nav-tabs {
  padding-left: 24px;
}
header ul.navbar-nav li, header ul.nav-tabs li {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #475467;
  padding-left: 16px;
  padding-right: 16px;
}

header .login-btn{
  height: 44px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #475467;
  margin-right: 12px;
}

header .login-btn:hover{
  color: #344054;
}

#header-playground-tab li a{
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #475467;
  padding-left: 16px;
  padding-right: 16px;
  border: 0;
}
#header-playground-tab{
 border: 0;
}
#header-playground-tab li a.active{
  border: 0;
  background-color: transparent;
  color: #101828;
}
#header-playground-tab li a:hover{
  border: 0;
  border-bottom: 0;
  background-color: transparent;
  color: #101828;
}

.beta-badge{
    background: #ECFDF3;
    border-radius: 16px;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #027A48;
    display: inline-block;
    width: 43px;
    height: 22px;
    padding: 2px 8px;
    margin-left: 6px;
}
.fixed-header {
  background: #ffffff;
}
.hero-cycle-container {
  position: absolute;
  bottom: -20px;
  z-index: 2;
}
.hero-cycle-container img{
  width: 67px;
  height: 67px;
}
.hero-card-container {
  margin-top: -18px;
}
.hero-card-container .card-title{
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 38px;
  color: #101828;
 
}
.hero-card-container .card-sub-title{
  margin-top: 16px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  margin-bottom: 8px;
}
.hero-card-container .card-text{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #000000;
}
.card-link-container{
  margin-top: 12px;
  text-align: center;
}
.card-link-container .card-link{
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #0F53FA;
}
.card-link-container .card-link:hover, .card-link-container .card-link-carret:hover{
  cursor: pointer;
}

.header-section h1.header-text {
  font-style: normal;
  font-weight: 600;
  font-size: 59px;
  line-height: 72px;
  letter-spacing: -0.02em;
  color: #101828;
}
.header-section .sub-header-text {
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #475467;
  margin-top: 24px;
}
.header-section .header-figma-container {
  margin-top: 24px;
}
.header-section .header-figma-container span {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #475467;
}
.header-section .header-figma-container img {
  margin-right: 16px;
}

main .request-access-btb {
  align-items: center;
  padding: 16px 28px;
  gap: 12px;
  width: 241px;
  height: 60px;
  background: #0f53fa;
  border: 1px solid #0f53fa;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
}


.header-section .header-cta-container {
  margin-top: 48px;
}
.upload-images{
  height: 60px;

  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;

  padding: 16px 28px;
}
.upload-images:focus{
  box-shadow: none;
}
.upload-images::after{
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: -3.5px;
    border-top: unset;
    border-right: unset;
    border-bottom: unset;
    border-left: unset;
}
.dropdown .dropdown-menu{
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  border-radius: 8px;
  margin-top: 4px;
  padding: 6px;
}
.dropdown .dropdown-menu .dropdown-item{
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #344054;
  padding: 16px;
}
.dropdown .dropdown-menu .dropdown-item:hover{
  cursor: pointer;
}
.dropdown .dropdown-menu .dropdown-item:hover{
  background: #F9FAFB;
  border-radius: 6px;
}
.dropdown .dropdown-menu .dropdown-item:first-child{
  padding-top: 12px;
  padding-bottom: 11px;
}
.dropdown .dropdown-menu .dropdown-item:nth-child(2){
  padding-top: 11px;
  padding-bottom: 12px;
}
.dropdown .dropdown-menu .dropdown-item img{
  margin-right: 8px;
  width: 24px;
  height: 24px;
}
.dropdown{
  display: inline-block;
}
.dropdown:first-child{
  margin-right: 8px;
}
.dropdown:nth-child(2){
  margin-left: 8px;
}


.btn-primary.dropdown-toggle::after{
  content: url('/assets/images/chevron-down-white.svg');
}
.btn-cancel-outline.dropdown-toggle::after{
  content: url('/assets/images/chevron-down-dark.svg');
}
.dropdown.show > .btn-primary.dropdown-toggle::after{
  content: url('/assets/images/chevron-up-white.svg');
}
.dropdown.show > .btn-cancel-outline.dropdown-toggle::after{
  content: url('/assets/images/chevron-up-dark.svg');
}
.header-section .left-content-container {
  align-self: center;
}
.header-section .left-content-container{
  padding-right: 45px;
}
.header-section .right-content-container{
  padding-left: 45px;
}
.header-section .right-content-container .placeholder-content {
  /* height: 556px; */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.header-section .right-content-container .placeholder-content img {
  margin: auto;
}
.how-it-works-section {
  margin-top: 192px;
}
.how-it-works-section .section-title {
  text-align: center;
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #101828;
}

.how-it-works-section .section-sub-text {
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #475467;
  margin-top: 20px;
}
.how-it-works-section .card-title{
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 38px;
  color: #101828;
}
.how-it-works-section .card-sub-title{
  margin-top: 16px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
}
.how-it-works-section .card-text{
  margin-top: 8px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #000000;
}
.section-text-container {
  padding-left: 25%;
  padding-right: 25%;
}
.sub-section {
  margin-top: 123px;
  width: 100%;
}

.how-it-works-section .upload-icon img {
  height: 48px;
  height: 48px;
}

.how-it-works-section .sub-section .sub-section-title {
  font-style: normal;
  font-weight: 600;
  font-size: 30px;
  line-height: 38px;
  color: #101828;
  margin-top: 24px;
}
.how-it-works-section .sub-section .sub-section-sub-text {
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #475467;
  margin-top: 16px;
}
.how-it-works-section .left-content-container {
  align-self: center;
}
.how-it-works-section .right-content-container img {
  width: 100%;
}

.how-it-works-section .sub-section .card,
.header-section .card {
  align-items: flex-start;
  padding: 40px;
  gap: 16px;
  /* height: 136px; */
  background: #ffffff;
  border: 1px solid #f5f6f6;
  box-shadow: 0px 15px 20px rgba(5, 5, 5, 0.05);
  border-radius: 16px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}
.how-it-works-section .sub-section .left-content-container.padded-r {
  padding-right: 60px;
}
.how-it-works-section .sub-section .left-content-container .card {
  margin-top: 16px;
}
.how-it-works-section .sub-section .card .card-text,
.header-section .card .card-text {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: #000000;
}

.how-it-works-section .sub-section .right-content-container .upload-icon img {
  height: 48px;
  width: 48px;
}
.how-it-works-section .sub-section .right-content-container {
  align-self: center;
}
.how-it-works-section
  .sub-section
  .right-content-container.companies-container
  img:not(:first-child) {
  margin-top: 32px;
}
.how-it-works-section
  .sub-section
  .right-content-container.companies-container
  img {
  width: auto;
}
.faq-section .section-title {
  text-align: center;
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #101828;
}

.section.faq-section {
  margin-top: 123px;
  width: 100%;
}

.faq-section .card .faq-title {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #101828;
}

.faq-section .card .card-body {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #475467;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.faq-section #faqSection {
  margin-top: 64px;
}

.faq-section .card .btn-header-link {
  width: 90%;
  text-align: left;
  padding: 0;
}

.faq-section .section-text-container {
  padding-left: 20%;
  padding-right: 20%;
}
.faq-section .card {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #eaecf0 !important;
  background: transparent;
}
.faq-section .card:last-child {
  border-bottom: 0 !important;
}
.faq-section .card .card-header {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 0;
  position: relative;
}

.faq-section .card .card-header .btn-header-link.collapsed:after {
  content: url(../images/accordion-plus.svg?v=1);
}

.faq-section .card .card-header .btn-header-link:after {
  content: url(../images/accordion-minus.svg);
  position: absolute;
  right: 0;
  top: 36%;
}

.cta-box-section {
  background: #ffffff;
  border: 1px solid #f5f6f6;
  box-shadow: 0px 15px 20px rgb(5 5 5 / 5%);
  border-radius: 16px;
  margin-top: 123px;
  text-align: center;
  padding-top: 94px;
  padding-bottom: 94px;
  padding-left: 224px;
  padding-right: 224px;
}

.cta-box-section .cta-text {
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #101828;
  margin-bottom: 40px;
}

.cta-box-section .request-access-btb {
  padding: 16px 28px;
  gap: 12px;
  width: 241px;
  height: 60px;
  background: #0f53fa;
  border: 1px solid #0f53fa;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
}

.cta-box-section .request-access-btb:hover {
  background: hsl(223, 89%, 48%);
}

footer {
  background: #000000;
  padding-top: 64px;
  padding-bottom: 64px;
}
footer {
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #eaecf0;
 
}
footer .footer-text {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #eaecf0;
  margin-top: 16px;
}

footer .privacy-terms {
  list-style: none;
  padding-left: 0;
}
footer .privacy-terms li {
  display: inline-block;
  margin-right: 32px;
}
footer .privacy-terms li a {
  color: #eaecf0;
}
footer .divider {
  border-top: 1px solid #475467;
  width: 100%z;
  margin-top: 64px;
  margin-bottom: 32px;
}

footer .copy-text {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #d0d5dd;
}
.footer-title{
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 20px;
    color: #FFFFFF;
}
.footer-logo a:hover{
  text-decoration: none;
}
.footer-logo img{
  margin-right: 8px;
  margin-top: -4px;
}
.background-float-faq {
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: -1;
}
.background-float-cta-box {
  background: #f9fafb;
  height: 110%;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: -1;
}
.header-section .card {
  padding: 24px;
}
.header-section .card:not(:first-child) {
  margin-top: 16px;
}

/** Product Page **/

#create-jira-ticket-btn, #create-requirements-btn{
    width: auto;
    height: 60px;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
}
#create-jira-ticket-btn{
  margin-left: 16px;
}
.header-cta-container-product {
  padding: 32px;
  /* height: 213.3px; */
  background: #ffffff;
  border: 1px solid #f5f6f6;
  box-shadow: 0px 15px 20px rgb(5 5 5 / 5%);
  border-radius: 16px;
  text-align: center;
  max-width: 558px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

.or-container{
  border-bottom: 2px solid #EAECF0;
  margin-top: 16px;
  margin-bottom: 16px;
}

.or-text{
  width: 55px;
    height: 20px;
    margin: auto;
    margin-bottom: -12px;
    background: #ffffff;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #98A2B3;
}

.figma-form-container .input {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.figma-form-container .frame-891 {
  align-items: flex-start;
  display: flex;
  gap: 6px;
  width: fit-content;
}

.figma-form-container .desktop-8 .frame-1 {
  display: flex;
  position: relative;
}

.figma-form-container .info-circle-1 {
  /* height: 20px;
  min-width: 20px; */
  position: relative;
}

.figma-form-container .figma-seeklogocom-1 {
  height: 20px;
  min-width: 13.34px;
  position: relative;
}

.figma-form-container .label {
  color: #344053;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.figma-form-container .input-1 {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--white22);
  border: 1px solid;
  border-color: var(--mischka);
  border-radius: 8px;
  box-shadow: 0px 1px 2px 
#1018280d;
  display: flex;
  position: relative;
  background: #FFFFFF;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
}

.figma-form-container .text-input {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 8px;
  overflow: hidden;
  padding: 8px 8px 8px 12px;
  position: relative;
  height: 52px;
}

.figma-form-container .text-4 {
  color: 
#667084;
  flex: 1;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-s2);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  white-space: nowrap;
}

.figma-form-container .button-3 {
  padding: 8px 14px;
  gap: 8px;
  height: 36px;
  width: 174px;
  background: #0F53FA;
  border: 1px solid #0F53FA;
 
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.figma-form-container .button-3 img{
  margin-right: 10px;
}
.figma-form-container .desktop-8 .button-4 {
  align-items: center;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: fit-content;
}

.figma-form-container .text-5 {

  font-weight: 600;
  letter-spacing: 0;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.figma-form-container .upload-01 {
  height: 20px;
  min-width: 20px;
  position: relative;
}


#figmaUrl, #figmaUrlImproveExistingTicket{
  border: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #000;
  box-shadow: none;
}

#figmaUrl::placeholder, #figmaUrlImproveExistingTicket::placeholder{
  color: #667085;
}
#figmaUrl:focus, #figmaUrl:active, #figmaUrl:hover, #figmaUrlImproveExistingTicket:focus, #figmaUrlImproveExistingTicket:active, #figmaUrlImproveExistingTicket:hover{
  outline: none;
  
}

#figmaUrl{
  margin-top: 0;
}


.sidebar .figma-form-container{
  margin-top: 24x
}

.sidebar .figma-form-container .label{
  font-size: 14px;
  line-height: 28px;
  color: #344054;
}

.figma-text-title, .figma-text-title-improve-existing-ticket{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #475467;
  margin-bottom: 16px;
  margin-top: 24px;
}
.progress-text-container{
  margin-bottom: 10px;
}
.progress-text-container .title{
  font-style: normal;
  font-weight: 600;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #344054 !important;
  margin-bottom: 0;
}
.close-btn{
  border: 0;
  background: none;
  width: 20px;
  height: 20px;
  padding: 0;
}
.close-btn img{
  width: 20px;
  height: 20px;
}
.figma-uploading-progress-container .progress-wrapper, .figma-uploading-progress-container-improve-existing-ticket .progress-wrapper {
  position: relative;
}
.figma-uploading-progress-container .progress, .figma-uploading-progress-container-improve-existing-ticket .progress{
  width: 90%;
  height: 8px;
  background: #EAECF0;
}
.figma-uploading-progress-container .progress .progress-bar, .figma-uploading-progress-container-improve-existing-ticket .progress .progress-bar{
  height: 8px;
  border-radius: 4px;
  background: #0F53FA;
}
.figma-uploading-progress-container .progress-text, .figma-uploading-progress-container-improve-existing-ticket .progress-text{
  font-weight: 600;
  font-size: 14px;
  line-height: 10px;
  /* identical to box height, or 143% */

  display: flex;
  align-items: center;

  /* Gray/700 */

  color: #344054;
  position: absolute;
  right: 0;
  bottom: 0;
}






.btn-primary img {
  margin-right: 15px;
}
.header-cta-container-product .label-text,
.cta-container-product .label-text {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  align-items: center;
  text-align: center;
  color: #b1b1b1;
  text-align: center;
  margin-top: 16px;
}
.supported-text {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 30px;
  color: #475467;
  margin-top: 16px;
}
.upload-process-loader {
  width: 100%;
  height: 640px;
  background: #eaedf1;
  position: relative;
  z-index: 5;
  margin-top: 100px;
}
.upload-process-loader .loader {
  position: relative;
  height: 100%;
}
.upload-process-loader .loader img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border: none;
}

.tasks-section .section-title {
  font-style: normal;
  font-weight: 600;
  font-size: 30px;
  line-height: 38px;
  color: #101828;
}
.tasks-section {
  min-height: 620px;
}

.tasks-section .request-optimize-tickets-container p{
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #0F53FA;
    margin-bottom: 8px;
}
.tasks-section .request-optimize-tickets-container .request-optimize-tickets-btn{
    width: 100%;
    height: 48px;
    font-size: 16px;
}
.user-story {
  padding: 32px;
  gap: 32px;
  width: 100%;
  min-height: 120px;
  border: 1px solid #eaecf0;
  filter: drop-shadow(0px 15px 20px rgba(5, 5, 5, 0.05));
  border-radius: 6px;
  margin-top: 24px;
}
.user-story .story-text {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 28px;
  color: #000000;
}
.copy-story {
  cursor: pointer;
}
.more-buttons-container {
  margin-top: 48px;
  text-align: center;
  z-index: 9;
  margin: auto;
}
.more-buttons-container .btn:first-child {
  margin-right: 16px;
}
.more-buttons-container .upload-images:hover svg > path {
  stroke: #ffffff;
}

/** Ratings components **/
.homepage .rate-experience-wrapper {
  display: none !important;
}
.rate-experience-wrapper {
  margin-top: 64px;
}

.rate-experience-container .text {
  width: 197px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #475467;
  margin: auto;
}
.rate-form-container {
  margin-top: 20px;
}
.thumbs-container {
  display: block;
  margin: auto;
  width: fit-content;
}
.thumbs-container .thumb:first-child {
  margin-right: 18px;
}
.thumbs-container .thumb {
  cursor: pointer;
  display: inline;
}
.text-area-container {
  margin-top: 28px;
}
.text-area-container label {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #344054;
}
.text-area-container textarea {
  width: 100%;
  padding: 12px 14px;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #d0d5dd;
  box-shadow: 0px 1px 2px rgb(16 24 40 / 5%);
  border-radius: 8px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
}
*:focus {
  outline: none;
}
.submit-container {
  margin-top: 16px;
  text-align: right;
}
.submit-container .btn {
  width: 80px;
  height: 40px;
  padding: 10px 16px;
  gap: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.rate-experience-wrapper{
  position: relative;
  z-index: 9;
}
/** Modal Component **/

#signupModal .modal-body, #upgradeModal .modal-body{
  padding: 24px;
}
#signupModal .icon-container, #upgradeModal .modal-body {
  text-align: center;
}

#signupModal .text-title-contianer, #upgradeModal .text-title-contianer{
  margin-top: 32px;
  margin-bottom: 32px;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: #000000;
  text-align: center;
}
#signupModal .button-container button, #upgradeModal .button-container button{
  width: 100%;
}

#signupModal .close, #upgradeModal .close{
  position: absolute;
    right: 32px;
    top: 32px;
}

#signupModal .text-container, #upgradeModal .text-container{
  margin-top: 16px;
  text-align: center;
  margin-bottom: 20px;
}


#signupModal .button-container .google-btn{
  height: 44px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #344054;
}
#signupModal .button-container .google-btn img{
  margin-right: 12px;
}
#signupModal .text-container .title, #upgradeModal .text-container .title{
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: #101828;
  margin-bottom: 4px;
}
#signupModal .text-container .sub-title{
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #475467;
}

#signupModal .separator{
    border-bottom: 1px solid #D0D5DD;
    width: 100%;
    text-align: center;
    margin-top: 32px;
    margin-bottom: 32px;
}
#signupModal .separator .or{
    width: 48px;
    background: #ffffff;
    margin-bottom: -10px;
    margin: auto;
    margin-bottom: -13px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #667085;
}
#signupModal .form-container{
  position: relative;
}
#signupModal .form-container label{
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #344054;
  margin-bottom: 6px;
}
#signupModal .form-container input.form-control{
  height: 44px;
  background: #FFFFFF;
  border: 1px solid #D0D5DD;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
}
#signupModal .password-container{
  margin-top: 20px;
}
#signupModal .button-container{
  margin-top: 32px;
}
#signupModal .footer-text-container{
  text-align: center;
  margin-top: 12px;
}
#signupModal .footer-text-container .footer-text{
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #475467;
}
#signupModal .footer-text-container .footer-link-text{
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #0F53FA;
}
#signupModal .footer-text-container .footer-link-text:hover{
  cursor: pointer;
}

.error-message{
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #F04438;
  margin-top: 6px;
}
input.error{
  border: 1px solid #FDA29B !important;
}

.error-icon{
  position: absolute;
  right: 15px;
  bottom: 15px;
  display: none;
}
.error-icon.show{
  display: block;
}
/** user widget **/
.nav-float-right-container{
  position: absolute;
  right: 0;
  display: flex;
}
.user-nav-widget {
  display: flex;
}
.user-nav-widget__avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-right: 8px;
}
.user-nav-widget__name span {
  font-weight: 600;
  font-size: 16px;
  line-height: 44px;
  color: #000000;
}

#dropdownMenuButtonUserNav.dropdown-toggle::after{
  display: none;
}
#dropdownMenuButtonUserNav:active, #dropdownMenuButtonUserNav:focus{
  outline: none;
  box-shadow: none;
}
.user-nav-widget-dropdown .dropdown-menu a img{
  margin-right: 12px;
}
.user-nav-widget-dropdown .dropdown-menu a.dropdown-item{
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #344054;
}
.user-nav-widget-dropdown.dropdown:hover .dropdown-menu {
  /* display: block; */
}
.rate-form-container .form-container {
  display: none;
}
.thank-you-message {
  padding: 16px;
  gap: 12px;
  width: 100%;
  background: #fcfcfd;
  border: 1px solid #d0d5dd;
  border-radius: 12px;
  margin-top: 28px;
}
.title-text-container {
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #101828;
  margin-top: 12px;
  margin-bottom: 4px;
}

.frame-779 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.frame-820 {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  position: relative;
  width: fit-content;
}

.rectangle-11 {
  height: 85px;
  min-width: 127.5px;
  position: relative;
}

.rectangle {
  height: 85px;
  width: 127.5px;
  object-fit: cover;
  position: relative;
  border-radius: 8px;
}

.valign-text-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.no-image-try-one-of-these {
  color: var(--black);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-s2);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 20px;
  margin-top: -1px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.no-images-container{
  margin-top: 16px;
}
.no-images-container .title{
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #000000;
  margin-bottom: 8px;
}
.no-images-container .rectangle:hover{
  cursor: pointer;
  opacity: 0.8;
}
/** toast **/
#toast {
  position: fixed;
  right: 20px;
  top: 5%;
  z-index: 1051;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: none;
}
#toast .toast-content{
  padding: 16px;
  gap: 12px;
  width: 470px;
  height: auto !important;
   /*background: #f6fef9;
  border: 1px solid #6ce9a6;
  border-radius: 12px;*/

  border-radius: 12px;
  border: 1px solid var(--gray-100, #F2F4F7);
  background: var(--base-white, #FFF);

  /* Shadow/lg */
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  display: flex;
  min-height: 80px;
}

#toast .toast-content.success{
  background: #F6FEF9;
  border: 1px solid #6CE9A6;
  color: #027A48;
}

#toast .toast-body-content{
  display: grid;
  width: 350px;
}
#toast .toast-header {
  display: block !important;
  padding: unset !important;
    color: unset !important;
    background-color: unset !important;
    background-clip: unset !important;
    border-bottom: unset !important;
    border-top-left-radius: unset !important;
    border-top-right-radius: unset !important;
}
#toast .toast-body{
  padding: unset !important;
}
.close-toast {
  border: 0;
  background: none;
  float: right;
  position: absolute;
  right: 0;
  top:10px;
}
.ticket-copy-container{
  width: 90%;
}
/* progress bar **/
.generating-next-ticket-container{
  box-shadow: 0px 15px 20px rgba(5, 5, 5, 0.05);
}
.text-icon-container{
  display: flex;
}
.text-icon-container .title{
  font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #101828;
}
.text-icon-container .sub-title{
  font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #475467;
}
.text-icon-container .icon-container{
  margin-right: 24px;
}
.completed-view .text-icon-container .text-container{
  align-self: center;
}
.progress-bar-container {
  display: flex;
}
.generating-next-ticket-container .progress-wrapper{
  width: 100%;
}
.progress-bar-container .progress{
  
}
.progress-bar-container .completed{
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-self: end;
  color: #344054;
  margin-bottom: -6px;
    margin-left: 12px;
}
.progress-bar-text {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: #101828;
  margin-top: 16px;
  margin-bottom: 16px;
}
.progress-bar-subtext {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #475467;
}
.progress-bar-container .progress {
  margin-top: 30px;
  height: 8px;
  border-radius: 4px;
}
.progress-bar-container .progress .progress-bar {
  background: #0f53fa;
}
.progress-wrap {
  position: relative;
}
.progress-wrap .percent {
  position: absolute;
  right: -50px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  color: #344054;
  top: -7px;
}
.completed-view{
  padding: 32px;
  margin-bottom: 24px;
}
.completed-view .card-body{
  padding: 0;
}
.completed-view .text-icon-container{
  position: relative;
}
.close-icon-container{
  position: absolute;
    right: 0;
    bottom: 18px;
    cursor: pointer;
}

/* error message component **/
.error-message-container {
  align-items: center;
  padding: 0px;
  border-radius: 12px;
  margin: auto;
  text-align: center;
  margin-top: 0;
  position: relative;
  z-index: 9;
}
.error-message-text {
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: #101828;
  margin-top: 16px;
  margin-bottom: 16px;
}
.error-message-subtext {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #475467;
  text-align: left;
  max-width: 670px;
  margin: auto;
}
.error-message-go-back-container .btn-primary{
  margin-top: 32px;
  padding: 16px 28px;
  gap: 12px;
  width: 164px;
  height: 60px;
  background: #0F53FA;
  border: 1px solid #0F53FA;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
}

.faq-email{
  color: #0F53FA;
}

/* testimonials section */
.testimonials-section .section-title{
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #101828;
  text-align: center;
}
.testimonials-section{
  margin-top: 195px;
}

.testimonial-card{
  height: 210px;
  padding: 40px 32px;
  background: #FFFFFF;
  border: 1px solid #F5F6F6;
  /* shadow */

  box-shadow: 0px 15px 20px rgba(5, 5, 5, 0.05);
  border-radius: 8px;
}

.testimonial-card .testimonial-card-text{
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  display: flex;
  align-items: center;
  color: #120036;
}
.testimonial-card .testimonial-card-author{
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  display: flex;
  align-items: center;
  color: #120036;
}
.testimonial-card .testimonial-card-author-position{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  display: flex;
  align-items: center;
  color: #120036;
}
.testimonial-card-profile-container{
  display: inline-block;
    width: 100%;
}

.testimonial-card-profile{
  display: inline-block;
}
.testimonial-card-profile img{
  margin-top: -25px;
    margin-right: 12px;
}
.author-profile-wrapper{
  display: inline-block;
    margin-top: 16px;
}
.testimonials-section .sub-section{
  margin-top: 64px;
}


/* trusted by section */
.section.trusted-by-section{
  margin-top: 160px;
}
.section.trusted-by-section .section-title-small{
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #475467;
}

.section.trusted-by-section .sub-section{
  margin-top: 0;
}
.section.trusted-by-section .logo-container{
  margin-top: 32px;
}
.section.trusted-by-section .logo-container img{
  width: 100%;
}
/* round image */
.testimonial-card-profile img{
  border-radius: 50%;
  width: 40px;
  height: 40px;
  object-fit: cover;
}
.section.trusted-by-section .logo-container.mobile{
  display: none;
}
.section.trusted-by-section .logo-container ul{
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.section.trusted-by-section .logo-container ul li{
  display: inline-block;
}
.section.trusted-by-section .logo-container ul li:not(:last-child){
  margin-right: 32px;
}
.section.trusted-by-section .logo-container.desktop-2 ul li:not(:last-child){
  margin-right: 67px;
}
/* metrics section */
.metrics-section .section-title{
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    text-align: center;
    letter-spacing: -0.02em;
    color: #101828;
    text-align: center;
}
.metrics-section .section-text-container{
    padding-left: 15%;
    padding-right: 15%;
}
.metrics-section{
  margin-top: 96px;
}
.metrics-section .sub-section{
  margin-top: 64px;
}
.metrics-section .card{
  text-align: center;
    padding: 40px 32px;
    background: #FFFFFF;
    border: 1px solid #F5F6F6;
    box-shadow: 0px 15px 20px rgba(5, 5, 5, 0.05);
    border-radius: 8px;
    height: 435px;
}

.metrics-section .card img{
  height: 37px;
  width: 55px;
  margin: auto;
  margin-bottom: 0;
  margin-top: 0;
}

.metrics-section .card .title{
  font-style: normal;
  font-weight: 700;
  font-size: 57px;
  line-height: 55px;
  display: flex;
  align-items: center;
  color: #101828;
  text-align: center;
  margin: auto;
  margin-top: 2px;
  margin-bottom: 16px;
}
.metrics-section .card .sub-title{
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #101828;
  text-align: center;
  margin-bottom: 16px;
}


.metrics-section .card .description{
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #475467;
  text-align: center;
}

.go-back-btn {
  height: 60px;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #1D2939;
}

/* extended modal compoment */
.modal-content{
  border-radius: 12px;
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}

#request-optimize-modal .modal-body{
  padding: 24px;
  display: flex;
}

#request-optimize-modal .modal-body button.close{
    position: absolute;
    right: 14px;
    border: 0;
    background: none;
}
#request-optimize-modal .modal-body button.close:active{
  border: 0;
  outline: 0;
  background: none;
}
#request-optimize-modal .modal-body .icon-container{
  margin-right: 16px;
}
#request-optimize-modal .modal-body .text-container .title{
  font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #101828;
}
#request-optimize-modal .modal-body .text-container .sub-title{
  font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #475467;
}
#request-optimize-modal .modal-footer{
  border-top: 0;
  padding: 0 24px 24px 24px;
}
#request-optimize-modal .modal-footer .cancel-optimize-btn{
  align-items: center;
    padding: 10px 18px;
    gap: 8px;
    width: 90px;
    height: 44px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #344054;
}

#request-optimize-modal .modal-footer #request-optimize-tickets-btn{
  padding: 10px 18px;
    gap: 8px;
    width: 238px;
    height: 44px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
}



#add-sample-tickets-modal .modal-header{
  padding: 24px;
  display: flex;
}
#add-sample-tickets-modal .modal-header .icon-container{
  border: 1px solid #EAECF0;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 10px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 10px;
}
#add-sample-tickets-modal .modal-header button.close{
    position: absolute;
    right: 14px;
    border: 0;
    background: none;
}
#add-sample-tickets-modal .modal-header button.close:active{
  border: 0;
  outline: 0;
  background: none;
}
#add-sample-tickets-modal .modal-header .icon-container{
  margin-right: 16px;
}
#add-sample-tickets-modal .modal-header .text-container .title{
  font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #101828;
}
#add-sample-tickets-modal .modal-header .text-container .sub-title{
  font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #475467;
}#add-sample-tickets-modal .modal-body{
  padding: 24px; 
}
#add-sample-tickets-modal .modal-footer{
  padding: 24px 24px 24px 24px;
}
#add-sample-tickets-modal .modal-footer .cancel-add-sample-btn{
  align-items: center;
    padding: 10px 18px;
    gap: 8px;
    width: 90px;
    height: 44px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #344054;
}

#add-sample-tickets-modal .modal-footer #upload-sample-tickets-btn{
  padding: 10px 18px;
    gap: 8px;
    width: 158px;
    height: 44px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
}

#add-sample-tickets-modal .modal-dialog{
  max-width: 640px;
}

#add-sample-tickets-modal .sample-ticket-container .title{
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
}

#add-sample-tickets-modal .sample-ticket-container textarea{
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid #98A2B3;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
  color: #101828;
}

#add-sample-tickets-modal .sample-ticket-container .ticket-row:not(:last-child){
  margin-bottom: 24px;
}

#add-sample-tickets-modal .add-ticket-btn{
  border: none;
  background: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #000000;
  margin-top: 8px;
}
#add-sample-tickets-modal .add-ticket-btn:hover{
  text-decoration: underline;
}
#add-sample-tickets-modal .add-ticket-btn:active, #add-sample-tickets-modal .add-ticket-btn:focus{
  border: none;
  outline: none;
  background: none;
}


#add-sample-tickets-modal .remove-sample-ticket{
  float:right;
  cursor: pointer;
}

#add-sample-tickets-modal .remove-sample-ticket:hover > svg > path{
  fill: #0F53FA;
}

.sidebar-sample-ticket-info-container{
  margin-bottom: 16px;
}

.sidebar-sample-ticket-info-container img.vector-icon{
  margin-right: 10px
}

.sidebar-sample-ticket-info-container span{
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: #000000;
}

.sidebar-sample-ticket-info-container .sidebar-delete-sample-tickets{
  float: right;
  border: 0;
  background: 0;
  padding: 0;
}
.sidebar-sample-ticket-info-container .sidebar-delete-sample-tickets:focus, .sidebar-sample-ticket-info-container .sidebar-delete-sample-tickets:active{
  border: 0;
  outline: 0;
  background: 0;
}

#how-to-improve-tickets-btn {
  height: auto;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
}

#how-to-improve-tickets-btn:hover svg > path {
  stroke: #fff;
}

.convert-to-ticket:not(.edit-mode):hover,
.inline-item:not(.edit-mode):hover {
  cursor: pointer;
}

.convert-to-ticket, .action-item-ticket, .inline-item{
  display: flex;
  position: relative;
}
.convert-to-ticket .bullet, .convert-to-ticket .text{
  display: inline-block;
}
.convert-to-ticket .text, .inline-item .text{
  max-width: 100%;
  position: relative;
}


.convert-to-ticket-btn img{
  margin-right: 12px;
}
.convert-to-ticket-btn button{
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #344054;

}
.convert-to-ticket-btn:hover, .convert-to-ticket-btn:focus, .convert-to-ticket-btn:active{
  border: 0;
  outline: 0;
  background: none;
}

.convert-to-ticket:not(.edit-mode):hover > .convert-to-ticket-btn-container > .convert-to-ticket-btn{
  display: inline-block;
}
.acceptance-criteria-btn-container, .add-more-details-btn-container{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: -32px;
  border-radius: 8px;
  border: 1px solid #EAECF0;
  background: var(--whiite, #FFF);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  height: 32px;
}

.acceptance-criteria-btn-container button, .add-more-details-btn-container button{
  border: 0;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 22px !important;
  width: 52px;
}
.acceptance-criteria-btn-container button:focus, .acceptance-criteria-btn-container button:active, .add-more-details-btn-container button:focus, .add-more-details-btn-container button:active{
  border: 0;
  outline: 0;
  background: none;
}
.acceptance-criteria-btn-container button:nth-child(2), .add-more-details-btn-container button:nth-child(2){
  border-left: 1px solid #EAECF0;
  border-right: 1px solid #EAECF0;
}
.acceptance-criteria-btn-container button:hover > svg path, .add-more-details-btn-container button:hover > svg path{
  stroke: #101828;
}

.a-criteria.edit-mode, .a-detail.edit-mode{
  display: flex;
  padding: 8px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--border, #EAECF0);
}
.a-criteria .a-criteria-a-btn-container, .a-detail .add-more-details-a-btn-container {
  display: flex;
  justify-content: center; /* This centers the buttons horizontally */
  align-items: center; /* This centers the buttons vertically, if needed */
}

.a-criteria .a-criteria-a-btn-container .save-btn,
.a-criteria .a-criteria-a-btn-container .cancel-btn, 
.a-detail .add-more-details-a-btn-container .save-btn, 
.a-detail .add-more-details-a-btn-container .cancel-btn{
  margin: 4px; /* Add margin for spacing between buttons */
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
  height: 32px !important;
  width: auto;
}

.add-more-details, .add-more-details-saved{
  padding: 8px;
}
.add-more-details:not(.edit-mode):hover{
  cursor: pointer;
  border-radius: 8px;
    background: #F9FAFB;
  }
  
  .add-more-details, .action-item-ticket, .add-more-details-saved{
  display: flex;
  position: relative;
  }
  .add-more-details .bullet, .add-more-details .text{
  display: inline-block;
  }
  .add-more-details .text{
  max-width: 90%;
  width: 90%;
  position: relative;
  }
  

  .add-more-details-btn:hover, .add-more-details-btn:focus, .add-more-details-btn:active{
  border: 0;
  outline: 0;
  background: none;
  }
  
  .add-more-details:not(.edit-mode):hover > .add-more-details-btn-container > .add-more-details-btn{
  display: inline-block;
  }


#update-improve-tickets-tooltip-overlay, #req-update-improve-tickets-tooltip-overlay, .upload-images-tooltip-overlay, .upload-figma-tooltip-overlay{
    height: 52px;
    position: absolute;
    width: 100%;
    z-index: 998;
    left: 0;
}

.how-to-improve-tickets-btn-container{
  position: absolute;
    right: 0; 
}

.tasks-section .row-main{
  position: relative;
}
#shared-section-tab-component{
  padding-left: 10%;
  padding-right: 10%;
}
/* Empty State */
.empty-state .text-icon-container{
  text-align: center;
  display: block;
}
.empty-state .text-icon-container .icon-container{
  margin-right: 0;
  margin-bottom: 24px;
}

.custom-tooltip {
  margin-top: -4px;
}

.share-story{
  float: right;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  color: #1D2939;
}

.share-story img{
  margin-right: 14px;
}

#share-ticket-requirement-modal .modal-body{
  padding: 24px;
}
#share-ticket-requirement-modal .modal-body .title{
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #101828;
  margin-bottom: 4px;
}
#share-ticket-requirement-modal .modal-body .sub-title{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #475467;
}
#share-ticket-requirement-modal .modal-body .form-inline{
  margin-top: 20px;
  margin-bottom: 20px;
}
#share-ticket-requirement-modal .modal-footer{
  background: #F9FAFB;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}
#shareButton{
  width: 68px;
  height: 44px;
  padding: 10px 14px;
}
#shareInput{
  height: 44px;
  background: #FFFFFF;
  border: 1px solid #D0D5DD;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
}
#shareInput::placeholder{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #667085;
}
.list-following-users-container .list-title{
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: #101828;
}
.list-following-users{
  padding-left: 0;
  list-style: none;
}
.list-following-users li{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #475467;
  margin-top: 8px;
}
.flex-grow-1{
  flex-grow: 1;
}
#sharePermissionDropdown{
  background: none;
  border: none;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #344054;
  width: 196px;
  text-align: left;
}
#sharePermissionDropdown:hover, #sharePermissionDropdown:focus, #sharePermissionDropdown:active{
  background: #F2F4F7;
  border-radius: 8px;
}
#sharePermissionDropdown:focus{
  outline: none;
  box-shadow: none;
}
.dropdown #sharePermissionDropdown::after{
  content: url(../images/carret-down-sm.svg);
}
.dropdown.show #sharePermissionDropdown::after{
  content: url(../images/carret-up-sm.svg);
}
.dropdown #sharePermissionDropdown::after{
  border: 0;
  position: absolute;
  right: 8px;
}
.share-permision-dropdown-container .dropdown-menu{
    width: 269px;
    left: 18px;
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    border-radius: 8px;
}
.share-permision-dropdown-container .dropdown-menu .dropdown-item{
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #344054;
  cursor: pointer;
}
.copy-link-btn{
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #101828;
  padding: 4px 6px;
}
.copy-link-btn img{
  margin-right: 6px;
  margin-top: -3px;
}
.copy-link-btn:hover{
  background: #F2F4F7;
  border-radius: 8px; 
 
}

.cta-button-no-images-container{
  width: max-content;
}

/* circle progress bar */
.progress-ring__circle {
  transition: 0.35s stroke-dashoffset;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.progress-container {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin-right: 4px;
}
.progress-container:hover{
  cursor: pointer;
}
.progress-label {
  position: absolute;
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  top: 13px;
}


/* figma tutorial modal */
#figma-tutorial-modal, #jira-tutorial-modal{
  z-index: 1111;
}
#figma-tutorial-modal .modal-body, #jira-tutorial-modal .modal-body{
  padding: 24px;
}
#figma-tutorial-modal .title, #jira-tutorial-modal .title{
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #101828;
}
#figma-tutorial-modal .sub-title, #jira-tutorial-modal .sub-title{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #475467;
}

#figma-tutorial-modal .steps-container, #jira-tutorial-modal .steps-container{
  margin-top: 16px;
}
#figma-tutorial-modal .steps-container .image video, #jira-tutorial-modal .steps-container .image video{
  width: 100%;
}
#figma-tutorial-modal .steps-container .title, #jira-tutorial-modal .steps-container .title{
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #101828;
  margin-bottom: 8px;
}
#figma-tutorial-modal .steps-container .sub-title, #jira-tutorial-modal .steps-container .sub-title{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #475467;
  margin-bottom: 16px;
}


/* figma select images modal */
#figma-select-images-modal .modal-body{
  padding: 24px;
}
#figma-select-images-modal .title{
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #101828;
}
#figma-select-images-modal .sub-title{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #475467;
}

#figma-select-images-modal .modal-footer .btn{
    height: 44px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    padding: 10px 18px;
}

.figma-images-container{
  margin-top: 60px !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: center center;
}

#canvasModal .modal-footer .btn{
  height: 44px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding: 10px 18px;
}
.modal-full {
  min-width: 100%;
  margin: 0;
}

.modal-full .modal-content {
  min-height: 100vh;
  width: 100%;
}

.flowPage.ticketMode .figma-tool-tip .arrow{
  left: 140px !important;; 
}
.custom-modal .modal-body{
  padding: 24px;
}
.custom-modal .modal-body .main-title{
  align-self: stretch;
  color: var(--gray-900, #101828);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; 
}
.custom-modal .modal-body .title{
  color: var(--Text-main, #101828);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; 
}
.custom-modal .modal-body .sub-title{
  align-self: stretch;
  color: var(--gray-600, #475467);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  margin-top: 6px;
}

.custom-modal .modal-body .sub-title-sm{
  margin-top: 6px;
  align-self: stretch;
  color: var(--sub-text, #475467);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 150% */
  margin-bottom: 16px;
}

.custom-modal .modal-body .input-container{
  margin-top: 32px;
}
.custom-modal .modal-body .input-container .input-section{
  margin-top: 24px;
}

.custom-modal .modal-body textarea.sample-ticket{
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    color: #101828;
    font-size: 12px;
    line-height: 18px;
}

.custom-modal .modal-body textarea.sample-ticket::placeholder{
  color: #667085;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}

.custom-modal .modal-body  #add-ticket-btn, .custom-modal .modal-body #req-add-ticket-btn{
  height: 40px;
  width: 100%;
  margin-top: 8px;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #344054;
}

.custom-modal .modal-body  .sample-ticket-container textarea:not(:first-child){
  margin-top: 16px;
}

.custom-modal .modal-body .button-container{
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.custom-modal .modal-body .button-container button{
  height: 44px;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  flex: 1;
  padding: 10px 18px;
}
.custom-modal .modal-body .select2-container{
  display: flex;
  padding: 10px 14px;
  align-items: center;
  gap: 8px;
  align-self: stretch;

  border-radius: 8px;
  border: 1px solid #D0D5DD;
  background: var(--base-white, #FFF);
  /* Shadow/xs */
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);

}

.custom-modal .modal-body .select2-container .iso-code, .select2-results__option--selectable .iso-code{
  color: var(--neutral-n-300, #7F87B3);
  margin-left: 8px;
}

.custom-modal .modal-body .select2-container .select2-selection{
  border: 0;
}

.custom-modal .modal-body .select2-container .selection{
  width: 100%;
}


.custom-modal#deleteDataModal .ul-delete-info{
  display: flex;
  padding: 4px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  list-style: none;
}
.custom-modal#deleteDataModal .ul-delete-info li{
  display: flex;
  align-items: center;
  gap: 8px;
}

/*[START-MAN-GEN-JERALD-2023-11-23]*/
.custom-modal#settingsModal .card .card-body{
  padding: 14px;
}
.custom-modal#settingsModal .card .card-body .card-title{
  color: var(--Text-main, #101828);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
}
.custom-modal#settingsModal .card .card-body .card-text{
  color: var(--gray-600, #475467);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}
.custom-modal#settingsModal .card .card-body .card-text a{
  color: var(--Primary, #0F53FA);
}
.custom-modal#settingsModal .card .card-body .settings-connect{
  width: 100%;
}
.custom-modal#settingsModal .card .card-body .action-button-container{
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.custom-modal#settingsModal .card .card-body .action-button-container button:first-child{
  flex: 1;
}
.custom-modal#settingsModal .card .card-body .action-button-container button:last-child{
  padding: 10px;
}
/*[END-MAN-GEN]*/

.select2-container--open .select2-dropdown--below{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid #D0D5DD;
  border-top: 1px solid #D0D5DD !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}

.select2-dropdown .select2-results, .select2-dropdown .select2-search{
  width: 100%;
}

.select2-dropdown .select2-results .select2-results__options li {
  padding-right: 14px;
  padding-left: 14px;
}
.select2-dropdown .select2-search input{
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    background: var(--base-white, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    padding-left: 14px;
}
.select2-selection__arrow b{
  display: none;
}
.select2-selection__arrow::after{
  content: url(../images/carret-down-sm.svg);
}
.select2-container--open .select2-selection__arrow::after{
  content: url(../images/carret-up-sm.svg);
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
  top: 11px !important;
}

.select2-container--default .select2-results__option--selected{
  background: #F9FAFB !important;
  color: #131520 !important;
  border-radius: 8px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: #F9FAFB !important;
  color: #131520 !important;
  border-radius: 8px;
}

.custom-alert {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid #D0D5DD;
  background: #F2F4F7;
}
.custom-alert .text-container {
  flex: 1; /* Allow the text container to take up the available space */
}
.custom-alert .text-container p{
  color: #344054;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
  margin-bottom: 0;
}
.custom-alert .text-container p.show-settings-modal{
  color: #0F53FA;
  margin-top: 12px;
}
.custom-alert .text-container p.show-settings-modal:hover{
  cursor: pointer;
}
.custom-alert .close{
  height: 36px;
  width: 36px;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 8px;
  right: 8px;
}
.custom-alert .close:hover{
  border-radius: 8px;
  background: #F9FAFB;
}
.custom-alert .close img{
  width: 20px;
  height: 20px;
}
#nav-header .a-logo img.mobile{
  display: none;
}
/* @media 4k screen */
@media screen and (min-width: 3840px) {
  html, main, body.flowPage{
    height: 100%;
  }
}
@media screen and (max-width: 1883px) {
  .header-section h1.header-text{
    font-size: 58px;
  }
}
@media screen and (max-width: 1873px) {
  .background-float-header, .background-float-header-home {
    height: 960px;
  }

  .ticketMode:not(.homepage) .background-float-header-home{
    height: 840px;
   }
  
}
@media screen and (max-width: 1855px) {
  .header-section h1.header-text br {
    display: none;
  } 
  .header-section h1.header-text{
    font-size: 56px;
  }
}
@media screen and (max-width: 1800px) {
  .header-section h1.header-text{
    font-size: 54px;
  }
}
@media screen and (max-width: 1735px) {
  .header-section h1.header-text{
    font-size: 52px;
  }
  .background-float-header, .background-float-header-home {
    height: 980px;
  }
}
@media screen and (max-width: 1675px) {
  .header-section h1.header-text{
    font-size: 46px;
  }
}
@media screen and (max-width: 1600px) {
  .container-fluid {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media screen and (max-width: 1500px) {
  .header-section h1.header-text{
    font-size: 42px;
  }
}
@media screen and (max-width: 1380px) {
  .header-section h1.header-text{
    font-size: 38px;
  }
  .md-hide{
    display: none;
  }
}
@media screen and (max-width: 1412px) {
  .section.trusted-by-section .logo-container ul li{
    margin-top: 32px;
  }
}
@media screen and (max-width: 1255px) {
  .header-section h1.header-text{
    font-size: 34px;
    line-height: 46px;
  }
}
@media screen and (max-width: 1216px) {
  .background-float-header, .background-float-header-home {
    height: 930px;
  }

  .container-fluid {
    padding-left: 40px;
    padding-right: 40px;
  }

  header ul.navbar-nav li, header ul.nav-tabs li {
    padding-left: 8px;
    padding-right: 8px;
  }

  #nav-header .a-logo img.mobile{
    display: block;
  }
  #nav-header .a-logo img.desktop{
    display: none;
  }
}
@media screen and (max-width: 1158px) {
  .background-float-header, .background-float-header-home {
    height: 980px;
  }

  footer .privacy-terms li {
    display: block;
    margin-bottom: 12px;
  }

  
  
}
@media screen and (max-width: 1133px) {
  .header-section h1.header-text{
    font-size: 30px;
    line-height: 46px;
  }
}
@media screen and (max-width: 1056px) {
  .background-float-header, .background-float-header-home {
    height: 1020px;
  }
}
@media screen and (max-width: 1025px) {
  .header-section h1.header-text{
    font-size: 28px;
    line-height: 46px;
  }
}
@media screen and (max-width: 991px) {
  .md-hide{
    display: block;
  }
  #nav-header .a-logo img.mobile{
    display: none;
  }
  #nav-header .a-logo img.desktop{
    display: block;
  }

  .section .row{
    margin-left: 0;
    margin-right: 0;
  }
}
@media screen and (max-width: 786px) {
  .section.trusted-by-section .logo-container.desktop{
    display: none;
  }
  .section.trusted-by-section .logo-container.mobile{
    display: block;
  }
}
/* mobile view */
@media screen and (max-width: 647px) {
  #pricingMain .row{
    margin-left: 0;
    margin-right: 0;
  }
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
  header .login-sign-up-container{
    position: unset;
    text-align: right;
  }
  .mobile-view {
    display: block !important;
  }
  .desktop-view {
    display: none;
  }
  main {
    margin-top: 24px;
  }
  .header-section .left-content-container{
    padding-right: 15px;
  }
  .header-section .right-content-container{
    padding-left: 15px;
  }
  .header-section h1.header-text {
    font-size: 42px;
    line-height: 52px;
  }
  .header-section h1.header-text br {
    display: none;
  } 
  .container-fluid.main {
    padding-top: 0 !important;
  }
  .flowPage .container-fluid.main {
    padding-top: 40px !important;
    margin-top: 0;
  }
  .header-section .sub-header-text {
    font-size: 14px;
    line-height: 22px;
  }
  .header-section .sub-header-text br {
    display: none;
  }
  .header-section .header-figma-container span {
    font-size: 14px;
  }
  .header-section .header-cta-container {
    text-align: center;
  }
  .header-cta-container-mobile {
    display: block !important;
  }
  .header-cta-container-desktop {
    /* display: none; */
  }
  .section.header-section .right-content-container {
    margin-top: 38px;
  }
  .how-it-works-section {
    margin-top: 100px;
  }
  .section-text-container {
    padding-left: 15px;
    padding-right: 15px;
  }
  .sub-section {
    margin-top: 50px;
  }
  .how-it-works-section .upload-icon {
    text-align: center;
  }
  .how-it-works-section .sub-section .sub-section-title {
    text-align: center;
  }
  .how-it-works-section .sub-section .right-content-container {
    margin-top: 24px;
  }
  .how-it-works-section .sub-section .left-content-container.padded-r {
    padding-right: 15px;
  }
  .how-it-works-section .sub-section .card,
  .header-section .card {
    padding: 22px;
    /* height: 184px; */
  }
  .how-it-works-section .sub-section .left-content-container .card:first-child {
    margin-top: 24px;
  }
  .section.faq-section {
    margin-top: 100px;
  }
  .faq-section .section-text-container {
    padding-left: 15px;
    padding-right: 15px;
  }
  .cta-box-section .cta-text {
    font-size: 22px;
    line-height: 33px;
    margin-bottom: 22px;
  }
  .cta-box-section .cta-text br {
    display: none;
  }
  .cta-box-section {
    padding: 20px;
  }
  footer {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  footer .privacy-terms li {
    display: block;
  }
  footer .privacy-terms li:first-child {
    margin-bottom: 16px;
  }
  .footer-email {
    text-align: left;
  }
  .hero-card-container .card {
    height: auto;
  }
  .hero-card-container .card .card-text {
    font-size: 12px;
  }
  .background-float-header, .background-float-header-home {
    height: 760px;
  }
  .background-float-header.product-float {
    height: 1580px;
  }
  header ul.navbar-nav {
    padding-left: 0;
  }
  header ul.navbar-nav li {
    padding-left: 0;
  }
  header .request-access-btb {
    position: unset;
    margin-top: 16px;
  }
  .supported-mobile{
    display: block !important;
  }
  .supported-desktop{
    display: none;
  }
  .user-nav-widget{
    position: relative;
    margin-top: 12px;
  }
  .progress-bar-container{
    width: auto;
  }
  .tasks-section{
    /* margin-top: 50px; */
    padding-left: 14px;
    padding-right: 14px;
  }
  .user-story{
    padding: 16px;
  }
  #toast{
    top: 12%;
  }
  #toast .toast-header{
    width: 188px;
  }
  .more-buttons-container .upload-images{
    margin-right: 0 !important;
    margin-bottom: 24px;
  }
  .more-buttons-container .upload-images, .more-buttons-container .copy-all-tasks{
    width: 100%
  }
  .faq-section .card .btn-header-link{
    width: 90%;
  }

  .cta-box-section{
    padding: 20px;
  }
  .testimonials-section {
    margin-top: 100px;
  }
  .testimonial-card {
      margin-bottom: 24px;
  }
  .metrics-section .card {
    margin-bottom: 24px;
  }
  .tasks-container.accordion .card, .saved-tasks-container.accordion .card, .req-tasks-container.accordion .card, .req-saved-tasks-container.accordion .card{
    padding: 18px !important;
  }
  
  .editor-footer .save-tasks{
    width: 100%;
    margin-bottom: 12px;
  }
  .editor-footer .cancel-changes{
    width: 100%;
  }
  .metrics-section .card{
    height: auto;
  }

  .tasks-container.accordion .card .card-header .btn-header-link .task-title, .saved-tasks-container.accordion .card .card-header .btn-header-link .task-title, .req-tasks-container.accordion .card .card-header .btn-header-link .task-title, .req-saved-tasks-container.accordion .card .card-header .btn-header-link .task-title {
    width: 85% !important;
  }

  .delete-confirm-container{
    margin-top: 12px;
    width: 100% !important;
    display: block;
  }

  .delete-confirm-container button{
    display: inline;
  }

  #zoomInModal button.close {
    right: 8px !important;
    top: 8px !important;
    z-index: 9;
    border: 1px #fff solid;
    border-radius: 50%;
  }

  .tasks-section .left-cont, .tasks-section .right-cont{
    padding-left: 15px;
    padding-right: 15px;
  }

  .tasks-section .right-cont{
    margin-top: 24px;
  }

  .container-fluid.main.sidebar-mode{
    padding-left: 16px;
    padding-right: 16px;
  }

  .sidebar.sidebar-collapse{
    width: 0 !important;
  }

  .expand-collapse-container.sidebar-toggle-collapse {
    right: -60px !important;
  }

  .sidebar{
    z-index: 98 !important;
  }

  .sidebar.sidebar-collapse .sidenav .text-content, .sidebar.sidebar-collapse #dz-add-image-container, .sidebar.sidebar-collapse .dz-image .zoom-in, .sidebar.sidebar-collapse .dz-text-input-container, .sidebar.sidebar-collapse .dz-image {
    display: none !important;
  }

  .how-to-improve-tickets-btn-container{
    position: relative !important;
    padding-left: 0;
    text-align: center !important;
  }
  #goodExampleModal .btn-container .col-md-6:first-child{
    margin-bottom: 12px;
  }
  #goodExampleModal .btn-container .col-md-6{
    padding-right: 0;
    padding-left: 0;
  }

  #tickets-tab li.nav-item .nav-link, #requirements-tab li.nav-item .nav-link{
    padding: 0.5rem 0.5rem;
  }

  .dropdown {
    display: block;
  }
  .dropdown .upload-images {
    width: 100%;
  }
  .dropdown:first-child {
    margin-bottom: 16px;
    margin-right: 0;
  }
  .dropdown:nth-child(2){
    margin-left: 0;
  }

  .copy-tasks{
    /* width: 100% !important;
    margin-bottom: 16px; */
  }
  .share-story{
    margin-right: 0 !important;
  }
  .delete-confirm-container{
    margin-bottom: 16px;
  }
  #shareInput{
    width: auto;
  }
  .copy-link-btn{
    margin-top: -8px;
  }
  .shared-tickets-container.details-mode, .details-page-access-message-container, #shared-section-tab-component{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  header #navbarNav.navbar-collapse.show{
    height: 300px;
  }

  #nav-header #header-playground-tab{
    padding-left: 0;
    display: block;
  }
  #nav-header #header-playground-tab .nav-item, #nav-header #header-playground-tab .nav-item a, #nav-header .dropdown.user-nav-widget-dropdown #dropdownMenuButtonUserNav{
    padding-left: 0;
  }
  #nav-header .dropdown.user-nav-widget-dropdown{
    right: unset;
    left: 0;
  }

  .frame-820{
    display: block;
  }
  .frame-820 .rectangle{
    width: 46%;
  }
  .frame-820 .rectangle:first-child{
    margin-right: 6px;
    margin-bottom: 6px;
  }
  .frame-820 .rectangle:nth-child(2){
    margin-left: 6px;
    margin-bottom: 6px;
  }
  .frame-820 .rectangle:nth-child(3){
    margin-right: 6px;
    margin-top: 6px;
  }
  .frame-820 .rectangle:nth-child(4){
    margin-left: 6px;
    margin-top: 6px;
  }

  .cta-button-no-images-container{
    width: unset;
  }

  #figmaUrlBtn .upload-01{
    display: none;
  }

  .card-task-container .card{
    width: 90%;
  }
}
@media screen and (max-width: 520px) {
  .header-section h1.header-text {
    font-size: 38px;
    line-height: 52px;
}
  .header-section .left-content-container {
    padding-right: 15px;
}
  .background-float-header, .background-float-header-home {
    height: 760px;
  }
  .cta-box-section{
    padding: 20px;
  }
  #toast .toast-header {
    width: 188px;
  }
  .header-section .sub-header-text {
    font-size: 14px;
    line-height: 22px;
  }
}


@media screen and (max-width: 420px) {
  .section.trusted-by-section {
    margin-top: 111px;
}
  .background-float-header, .background-float-header-home {
    height: 1140px;
  }

  .editor .toolbar button {
    margin-right: 14px !important;
  }
}

@media screen and (max-width: 400px) {
  .background-float-header, .background-float-header-home {
    height: 1560px;
  }
  .cta-box-section{
    padding: 20px;
  }

  .testimonial-card{
    padding: 20px 16px;
  }

  .background-float-header, .background-float-header-home {
    height: 1140px;
  }

  .ticketMode .background-float-header-home {
    height: 640px;
  }

  .background-float-faq{
    height: 738px;
  }

  .share-story{
    font-size: 0;
  }
  .share-story img{
    margin-right: 0;
  }
}

@media screen and (max-width: 360px) {
  .background-float-header, .background-float-header-home {
    height: 760px;
  }
}



/* new css */
.tasks-container.accordion .card:hover, .tasks-container.accordion .card, .req-tasks-container.accordion .card:hover, .req-tasks-container.accordion .card, .shared-tickets-container.accordion .card:hover, .shared-tickets-container.accordion .card, .shared-requirements-container.accordion .card:hover, .shared-requirements-container.accordion .card{
  cursor: default;
}
.tasks-container.accordion .card, .saved-tasks-container.accordion .card, .req-tasks-container.accordion .card, .req-saved-tasks-container.accordion .card, .shared-tickets-container.accordion .card, .shared-requirements-container.accordion .card{
    padding: 32px;
    gap: 24px;
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: 0px 15px 20px rgba(5, 5, 5, 0.05);
    border-radius: 6px;
}
.tasks-container.accordion .card, .saved-tasks-container.accordion .card, .req-tasks-container.accordion .card, .req-saved-tasks-container.accordion .card, .shared-tickets-container.accordion .card, .shared-requirements-container.accordion .card{
  margin-bottom: 24px;
  cursor: default;
}
.tasks-container.accordion .card .card-header, .saved-tasks-container.accordion .card .card-header, .req-tasks-container.accordion .card .card-header, .req-saved-tasks-container.accordion .card .card-header, .shared-tickets-container.accordion .card .card-header, .shared-requirements-container.accordion .card .card-header{
    padding: 0;
    background: none;
    border-bottom: none;
}

.tasks-container.accordion .card .card-header .task-title, .saved-tasks-container.accordion .card .card-header .task-title, .req-tasks-container.accordion .card .card-header .task-title, .req-saved-tasks-container.accordion .card .card-header .task-title, .shared-tickets-container.accordion .card .card-header .task-title, .shared-requirements-container.accordion .card .card-header .task-title{
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 38px;
  color: #101828;
}
.tasks-section .section-sub-title{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #475467;
  margin-top: 8px;
  margin-bottom: 24px;
}
.tasks-container.accordion .card .card-header .btn-header-link, .saved-tasks-container.accordion .card .card-header .btn-header-link, .req-tasks-container.accordion .card .card-header .btn-header-link, .req-saved-tasks-container.accordion .card .card-header .btn-header-link, .shared-tickets-container.accordion .card .card-header .btn-header-link, .shared-requirements-container.accordion .card .card-header .btn-header-link{
  padding: 0;
  position: relative;
  text-align: left;
  width: 100%;
  cursor: text;
  user-select: text;

}
.tasks-container.accordion .card .card-header .btn-header-link .task-title, .saved-tasks-container.accordion .card .card-header .btn-header-link .task-title, .req-tasks-container.accordion .card .card-header .btn-header-link .task-title, .req-saved-tasks-container.accordion .card .card-header .btn-header-link .task-title, .shared-tickets-container.accordion .card .card-header .btn-header-link .task-title, .shared-requirements-container.accordion .card .card-header .btn-header-link .task-title{
  width: 100%;
  padding-right: 5%;
}
.tasks-container.accordion .card .card-body, .saved-tasks-container.accordion .card .card-body, .req-tasks-container.accordion .card .card-body, .req-saved-tasks-container.accordion .card .card-body, .shared-tickets-container.accordion .card .card-body, .shared-requirements-container.accordion .card .card-body{
    padding: 0;
}
.tasks-container .card .card-header .carret-container, .saved-tasks-container .card .card-header .carret-container, .req-tasks-container .card .card-header .carret-container, .req-saved-tasks-container .card .card-header .carret-container, .shared-tickets-container .card .card-header .carret-container, .shared-requirements-container .card .card-header .carret-container{
  cursor: pointer;
}
.tasks-container .card .card-header .carret-container.collapsed:after, .saved-tasks-container .card .card-header .carret-container.collapsed:after, .req-tasks-container .card .card-header .carret-container.collapsed:after, .req-saved-tasks-container .card .card-header .carret-container.collapsed:after, .shared-tickets-container .card .card-header .carret-container.collapsed:after, .shared-requirements-container .card .card-header .carret-container.collapsed:after{
  content: url(../images/carret-down.svg);
  position: absolute;
  right: 0;
  top: 24%;
}
.tasks-container .card .card-header .carret-container:after, .saved-tasks-container .card .card-header .carret-container:after, .req-tasks-container .card .card-header .carret-container:after, .req-saved-tasks-container .card .card-header .carret-container:after, .shared-tickets-container .card .card-header .carret-container:after, .shared-requirements-container .card .card-header .carret-container:after {
  content: url(../images/carret-up.svg);
  position: absolute;
  right: 0;
  top: 24%;
}

.tasks-container .card .card-footer, .saved-tasks-container .card .card-footer, .req-tasks-container .card .card-footer, .req-saved-tasks-container .card .card-footer, .shared-tickets-container .card .card-footer, .shared-requirements-container .card .card-footer{
  padding: 0;
  background: no-repeat;
  border-top: none;
  margin-top: 24px;
}
.tasks-container .card .card-footer .btn.copy-tasks, .saved-tasks-container .card .card-footer .btn.copy-tasks, .req-tasks-container .card .card-footer .btn.copy-tasks, .req-saved-tasks-container .card .card-footer .btn.copy-tasks, .shared-tickets-container .card .card-footer .btn.copy-tasks, .shared-requirements-container .card .card-footer .btn.copy-tasks{
    width: auto;
    padding: 12px 16px;
}

.more-buttons-container .upload-images{
    padding: 16px 28px;
    width: auto;
    height: 60px;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #1D2939;
}

.task-title[data-toggle=collapse]{
  cursor: pointer;
}


.shared-by-container{
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: #475467;
}
.shared-by-container .shared-by-text{
    font-weight: 600;
    color: #000000;
}
.shared-by-container.details-mode{
  position: relative;
  margin-bottom: 16px;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #475467;
}
.shared-tickets-container.details-mode, .details-page-access-message-container{
  padding-left: 10%;
  padding-right: 10%;
}
.details-page-access-message-container .card{
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  /* shadow */

  box-shadow: 0px 15px 20px rgba(5, 5, 5, 0.05);
  border-radius: 6px;
  padding: 32px;
}
.details-page-access-message-container .button-container{
  margin-top: 24px;
}
.details-page-access-message-container .button-container button{
  width: 240px;
  height: 52px;
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  color: #FFFFFF;
  padding: 12px 16px;
}
.details-page-access-message-container .button-container button img{
  margin-right: 12px;
  margin-top: -4px;
}
/* single image promp modal */
#singleImagePromptModal button.close{
    position: absolute;
    right: -35px;
    top: 0;
}

#singleImagePromptModal .modal-body{
    padding: 0;
    width: 100% !important;
    height: 510px !important;
    max-height: 510px;
    overflow: hidden;
    position: relative;
    border-radius: 6px 6px 0px 0px;
}
#singleImagePromptModal .modal-content{
  border-radius: 10px 10px 0px 0px;
}
#singleImagePromptModal .modal-body img.main-image{
  width: 100%;
  height: auto;
}
#singleImagePromptModal .modal-form-container{
  width: 100%;
    margin-bottom: 32px;
}

#singleImagePromptModal .modal-form-container .form-label{
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
}

#singleImagePromptModal .modal-form-container #focus-part{
  padding: 12px 14px;
  gap: 8px;
  height: 48px;
  background: #FFFFFF;
  border: 1px solid #D0D5DD;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
  margin-top: 12px;
}

#singleImagePromptModal .modal-form-container #focus-part::placeholder{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;  
  color: #667085;
}

#singleImagePromptModal .modal-footer{
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 16px;
  padding-bottom: 32px;
}

#singleImagePromptModal .cancel-prompt-modal{
  height: 44px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;

  color: #344054;
  padding: 10px 18px;
}

#singleImagePromptModal .continue-prompt-modal{
  height: 44px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding: 10px 18px;
}

.save-delete-btn-container .save-btn, .save-delete-btn-container .delete-btn{
  padding: 8px;
  background: #FFFFFF;
  border: 1px solid #EAECF0;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: block;
}
.save-delete-btn-container .delete-btn{
  margin-top: 8px;
}
.save-delete-btn-container .save-btn:hover, .save-delete-btn-container .delete-btn:hover{
  border: 1px solid #D0D5DD;
}

.save-btn.saved{
  background: #D1FADF;
  border: 1px solid #D1FADF;
}

.save-btn.saved > svg > path {
  stroke: #039855;
}

.save-delete-btn-container .save-delete-btn:focus, .save-delete-btn-container .save-delete-btn:active{
  outline: none;
}

.card-task-container, .req-card-task-container{
  padding-left: 48px;
  margin-left: -48px;
  position: relative;
}
.req-card-task-container, .req-saved-tasks-container{
  margin-right: 57px !important;
}
.save-delete-btn-container{
  left: -3px;
  position: absolute;
  display: none;
}

.card-task-container:hover, .req-card-task-container:hover{
  cursor: pointer;
}

.card-task-container:hover > .save-delete-btn-container, .req-card-task-container:hover > .save-delete-btn-container{
  display: block;
}

#tickets-tab-content, #requirements-tab-content, #shared-tab-content{
  width: 100%;
}
#tickets-tab, #requirements-tab, #shared-tab{
  z-index: 9;
  border-bottom: none;
  gap: 12px;
}
#tickets-tab li.nav-item .nav-link:hover, #requirements-tab li.nav-item .nav-link:hover, #shared-tab li.nav-item .nav-link:hover{
  background: none !important;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid transparent;
}
#tickets-tab li.nav-item .nav-link, #requirements-tab li.nav-item .nav-link, #shared-tab li.nav-item .nav-link{
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #667085;
  padding: 0 4px 12px 4px;
  background: none !important;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid transparent;
}

#tickets-tab li.nav-item .nav-link.active, #requirements-tab li.nav-item .nav-link.active, #shared-tab li.nav-item .nav-link.active{
    background: none;
    border: none;
    border-bottom: 2px solid #0440D2;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #0440D2;
}



/** news letter section **/
.news-letter-section{
  margin-top: 192px;
}
.news-letter-section .section-text-container{
  padding-left: 10%;
  padding-right: 10%;
}
.news-letter-section .section-title {
  text-align: center;
  font-style: normal;
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
  letter-spacing: -0.02em;
  color: #101828;
}

.news-letter-section .section-sub-text {
  text-align: center;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #475467;
  margin-top: 20px;
}

.news-letter-section .sub-section{
  margin-top: 40px;
}

#subscribe-email{
  padding: 12px 14px;
  width: 360px;
  height: 48px;
  background: #FFFFFF;
  border: 1px solid #98A2B3;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
}

.news-letter-section .form-section{
  text-align: center;
}
.news-letter-section .section-img{
  text-align: center;
  margin-bottom: 28px;
}

#subscribe-btn{
  display: inline-block;
    width: 119px;
    height: 48px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin-left: 16px;
}

#subscribe-email{
    display: inline-block;
    padding: 12px 14px;
    width: 360px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #98A2B3;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
}


@media screen and (max-width: 640px) {

  #subscribe-btn, #subscribe-email{
    width: 100%;
    margin-left: 0;
    margin-bottom: 12px;
  }

  .news-letter-section .section-text-container {
    padding-left: 5%;
    padding-right: 5%;
  }

  #singleImagePromptModal .continue-prompt-modal, #singleImagePromptModal .cancel-prompt-modal{
    width: 100%;
  }
  #singleImagePromptModal button.close {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
}
}

/* preview image modal */
#zoomInModal .modal-content{
  border-radius: 10px 10px 10px 10px;
}
#zoomInModal .modal-body{
  padding: 0;
  border-radius: 6px 6px 0px 0px;
}
#zoomInModal .main-image{
  width: 100%;
  border-radius: 6px 6px 0px 0px;
}

#zoomInModal .modal-footer{
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: #101828;
  justify-content: start;
  padding: 12px 24px;
  border-radius: 0 0 6px 6px;
}

#zoomInModal button.close{
  position: absolute;
  right: -35px;
  top: 0;
}

/* delete confirm modal */
#confirm-delete .modal-dialog, #confirm-save .modal-dialog, #unsave-screens .modal-dialog, #delete-modal .modal-dialog {
  max-width: 400px;
}
#confirm-delete .modal-dialog .modal-content, #confirm-save .modal-dialog .modal-content, #unsave-screens .modal-dialog .modal-content, #delete-modal .modal-dialog .modal-content{
  padding: 24px;
  box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  border-radius: 12px;
}
#confirm-delete .modal-dialog .modal-header, #confirm-save .modal-dialog .modal-header, #unsave-screens .modal-dialog .modal-header, #delete-modal .modal-dialog .modal-header{
  padding: 0;
  border-bottom: 0;
}
#confirm-delete .modal-dialog .modal-header button, #confirm-save .modal-dialog .modal-header button, #unsave-screens .modal-dialog .modal-header button, #delete-modal .modal-dialog .modal-header button{
  border: 0;
  background: none;
  padding: 0;
}
#confirm-delete .modal-dialog .modal-header button:focus, #confirm-delete .modal-dialog .modal-header button:active, #confirm-save .modal-dialog .modal-header button:focus, #confirm-save .modal-dialog .modal-header button:active, #unsave-screens .modal-dialog .modal-header button:focus, #unsave-screens .modal-dialog .modal-header button:active, #delete-modal .modal-dialog .modal-header button:focus, #delete-modal .modal-dialog .modal-header button:active{
  outline: none;
  border: 0;
}
#confirm-delete .modal-dialog .modal-body, #confirm-save .modal-dialog .modal-body, #unsave-screens .modal-dialog .modal-body, #delete-modal .modal-dialog .modal-body{
  padding: 0;
  margin-top: 16px;
  margin-bottom: 32px;
}
#confirm-delete .modal-dialog .modal-body .title, #confirm-save .modal-dialog .modal-body .title, #unsave-screens .modal-dialog .modal-body .title, #delete-modal .modal-dialog .modal-body .title{
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #101828;
}
#confirm-delete .modal-dialog .modal-body .sub-title, #confirm-save .modal-dialog .modal-body .sub-title, #unsave-screens .modal-dialog .modal-body .sub-title, #delete-modal .modal-dialog .modal-body .sub-title{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #475467;
}
#confirm-delete .modal-dialog .modal-footer, #confirm-save .modal-dialog .modal-footer, #unsave-screens .modal-dialog .modal-footer, #delete-modal .modal-dialog .modal-footer{
  border-top: 0;
  padding: 0;
  justify-content: unset;
}
#confirm-delete .modal-dialog .modal-footer .btn-container, #confirm-save .modal-dialog .modal-footer .btn-container, #unsave-screens .modal-dialog .modal-footer .btn-container, #delete-modal .modal-dialog .modal-footer .btn-container{
  width: 50%;
  display: inline-block;
  margin: 0;
}
#confirm-delete .modal-dialog .modal-footer .btn-container button, #confirm-save .modal-dialog .modal-footer .btn-container button, #unsave-screens .modal-dialog .modal-footer .btn-container button, #delete-modal .modal-dialog .modal-footer .btn-container button{
  width: 100%;
  height: 44px;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}
#confirm-delete .modal-dialog .modal-footer .btn-container:first-child, #confirm-save .modal-dialog .modal-footer .btn-container:first-child, #unsave-screens .modal-dialog .modal-footer .btn-container:first-child, #delete-modal .modal-dialog .modal-footer .btn-container:first-child{
  padding-right: 6px;
}
#confirm-delete .modal-dialog .modal-footer .btn-container:last-child, #confirm-save .modal-dialog .modal-footer .btn-container:last-child, #unsave-screens .modal-dialog .modal-footer .btn-container:last-child, #delete-modal .modal-dialog .modal-footer .btn-container:last-child{
  padding-left: 6px;
}
#confirm-save-button{
  padding: 8px 16px;
}

#unsave-screens .modal-header{
  display: block;
  text-align: right;
}
#unsave-screens .modal-body{
  margin-top: 0 !important;
}
#unsave-screens .modal-body .close-modal, #unsave-screens .modal-body .close-modal:focus, #unsave-screens .modal-body .close-modal:active{
  background: none;
  border: none;
  outline: none;
  position: absolute;
  right: 0;
  top: -4px;
}
#unsave-screens .modal-footer{
  display: block;
  text-align: right;
}
#unsave-screens .modal-footer .btn-container{
  width: auto !important;
}
#unsave-screens .modal-footer .btn-container .btn{
  padding: 10px 18px;
  width: fit-content;
}
#unsave-screens .modal-dialog{
  margin-top: 120px;
}
/* new css */
.guidelines-container ul{
  padding-left: 0;
  list-style: none;
  margin-top: 24px;
}
.guidelines-container ul li div.guideline-text{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #101828;
  margin-bottom: 16px;
}

.guidelines-container ul li div{
  display: inline-block;

}
.guidelines-container ul li div.guideline-image{
  margin-right: 10px;
}

.tooltip-custom{
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    opacity: 0;
}

.tooltip-custom .arrow {
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.4rem;
}

.tooltip-custom .arrow::before {
  position: absolute;
  content: "";
  background: none;
  border-style: solid;
  color: transparent;
}
.tooltip-inner{
  max-width: 360px;
}

.figma-learn-more{
  color: #739BFC;
}
.figma-learn-more:hover, .info-circle-1:hover{
  cursor: pointer;
}


.nav-float-right-container .dropdown-menu{
  min-width: 200px;
}

/** Billing Styles **/
.planContainer {
  padding-bottom: 12px;
}
.planContainer .title{
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #475467;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.planContainer .renewBadge{
  border-radius: 16px;
  padding: 2px 8px 2px 8px;
  background: #F9FAFB;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: #101828;
}
.planContainer .price{
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: #101828;
}

.planContainer .text{
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: #475467;
}

.planFeatures .title{
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: #0B0D13;
  padding-top: 12px;
  padding-bottom: 12px;
}

.planFeatures ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Gap between list items */
}

.planFeatures ul li{
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #475467;
  display: flex;
  align-items: center;
  gap: 8px; /* Gap between image and text */
}

.planAction{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.planAction button{
  height: 48px;
  padding: 12px;
  flex: 1;
}

.dangerModal .modal-dialog .modal-content{
  padding: 24px;
  box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px 
}
.dangerModal .modal-dialog .modal-body .title{
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #101828;
}
.dangerModal .modal-dialog .modal-body .sub-title{
  font-size: 14px;
}
.dangerModal .modal-dialog .modal-header button{
  border: 0;
  background: none;
  padding: 0;
}

.dangerModal .modal-dialog .modal-header{
  padding: 0;
  border-bottom: 0;
}

.dangerModal .modal-dialog .modal-body{
  padding: 0;
  margin-top: 16px;
  margin-bottom: 32px;
}

.dangerModal .modal-dialog .modal-footer .btn-container button{
  width: 100%;
  height: 44px !important;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}

.dangerModal .modal-dialog .modal-footer{
  border-top: 0;
  padding: 0;
}

.dangerModal .modal-footer{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.dangerModal .modal-footer .btn-container{
  flex: 1;
}

@media screen and (max-width: 1228px) {
  header ul.navbar-nav li, header ul.nav-tabs li {
    padding-left: 0;
    padding-right: 0;
  }
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
  border-top-color: #101828 !important;
}

.btn-cancel-outline:hover{
  background: #fff !important;
  border-color: #98A2B3 !important;
}
.btn-primary:hover{
  background: #0440D2 !important;
  border-color: #0440D2 !important;
}

/* Fix for preventing hiding elements with prevent-hiding class */
.prevent-hiding.d-none {
  display: block !important;
}

div#upload-prd-file-elem.d-none {
  display: block !important;
}

#dz-add-file-container.d-none {
  display: block !important;
}

/* End fix */