.txt-1{
    margin-bottom: 10px; 
    padding: 0px;
    font-size: 18px;
    text-align: center;
}


.txt-2{
    padding: 0px;
    font-size: 20px;
    text-align: center;
}

.badge-r{
    margin-left:135px; 
    top:70px; 
    position: relative;
}


.bg-xx-s-r{
    margin-bottom: 20px;
    border: 3px solid #FF3C9890;
    padding: 80px 10px 10px 10px;
    border-radius: var(--radius-2xl);
    background-color: #FBE8F2;
}

.bg-xy-s-r{
    margin-bottom: 20px;
    border: 3px solid #FF7A0090;
    padding: 80px 10px 10px 10px;
    border-radius: var(--radius-2xl);
    background-color: #FFF4E6;
}

.bg-yx-s-r{
    margin-bottom: 20px;
    border: 3px solid #0192AF90;
    padding: 80px 10px 10px 10px;
    border-radius: var(--radius-2xl);
    background-color: #03E2F050;
}

.bg-yy-s-r{
    margin-bottom: 20px;
    border: 3px solid #6B00F590;
    padding: 80px 10px 10px 10px;
    border-radius: var(--radius-2xl);
    background-color: #F0E5FE;
}



.md\:grid-cols-4{

    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.div-button{
        text-align: center;
        border-color: var(--border);
        background-color: var(--background);
        cursor: pointer;
    }
.div-button:hover{
        text-align: center;
        border-color: var(--primary);
        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
        color: var(--primary);
        cursor: pointer;
    }
.div-button-pink{
        text-align: center;
        cursor: pointer;
        border-color: var(--primary);
        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
        color: var(--primary);
    }

.invite-input-txt{
    width: 100%;
    margin-bottom: 26px ;
    margin-top: 5px;
    text-align: left;
    border-color: var(--border);
    background-color: var(--background);
    outline: none;    
}
.invite-input-txt:focus{
    border: 2px solid #ff3c98 !important;
}


.invite-button-purple{
    margin-top:10px;
    padding: 10px 20px;
    cursor: pointer;
    color: #6B00F5;
    background-color: #F0E5FE;
}

.invite-button-purple:hover{
    margin-top:10px;
    padding: 10px 20px;
    cursor: pointer;
    color: #F0E5FE;
    background-color: #6B00F5;
}

.invite-button-teal{
    margin-top:10px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #CCFDFE;
    color: #297273;
}

.invite-button-teal:hover{
    margin-top:10px;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #297273;
    color: #CCFDFE;
}


.invite-button-purple-2{
    margin-top:10px;
    padding: 5px 15px;
    cursor: pointer;
    color: #6B00F5;
    background-color: #F0E5FE;
}

.invite-button-purple-2:hover{
    margin-top:10px;
    padding: 5px 15px;
    cursor: pointer;
    color: #F0E5FE;
    background-color: #6B00F5;
}


.invite-button-teal-2{
    margin-top:10px;
    padding: 5px 15px;
    cursor: pointer;
    background-color: #CCFDFE;
    color: #297273;
}

.invite-button-teal-2:hover{
    margin-top:10px;
    padding: 5px 15px;
    cursor: pointer;
    background-color: #297273;
    color: #CCFDFE;
}



.alert-success{
    background: #CCFDFE;
    border: 2px solid #297273;
    border-radius: 20px;
    padding: 10px;
    color: #297273;
    font-weight: 500;
    margin-bottom: 10px;
}

.alert-danger{
    background: color-mix(in oklab, var(--primary) 10%, transparent);
    border: 2px solid var(--primary);
    border-radius: 20px;
    padding: 10px;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 10px;
}




/* Base dialog container */
.ui-dialog {
    background: #ffffff;
    border: 1px solid hsl(250, 10%, 90%);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(64, 34, 134, 0.15);
    padding: 0;
    font-family: 'Inter', 'Nunito Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    color: hsl(250, 10%, 15%);
}

/* Title bar */
.ui-dialog-titlebar {
    background: hsl(260, 84%, 58%);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    padding-left: 0px !important;
    border-radius: 12px 12px 0 0;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Title text */
.ui-dialog-title {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: Space Grotesk,ui-sans-serif,system-ui,sans-serif;
}

/* Close button — always visible */
.ui-dialog-titlebar-close {
    /*background: transparent;*/
    border: none;
    color: #fff; /* Always visible */
    font-size: 1.2rem;
    opacity: 1; /* Ensure visibility */
    transition: color 0.2s ease;

    margin-right: 8px !important;
}
.ui-dialog-titlebar-close:hover {
    color: hsl(260, 84%, 70%);
}

/* Content */
.ui-dialog-content {
    padding: 1rem !important;
    font-size: 0.95rem;
    line-height: 1.5;
    color: hsl(250, 10%, 25%);
    font-family: Plus Jakarta Sans,ui-sans-serif,system-ui,sans-serif;
}

/* Button pane */
.ui-dialog-buttonpane {
    background: hsl(260, 30%, 96%);
    border-top: 1px solid hsl(250, 10%, 90%);
    padding: 0.75rem 1rem;
    border-radius: 0 0 12px 12px;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;

}

/* Buttons */
.ui-dialog-buttonpane button {
    background: hsl(260, 84%, 58%);
    color: #fff;
    border: 1px solid #763AEE;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    /*transition: background 0.2s ease;*/
    font-family: inherit;
}
.ui-dialog-buttonpane button:hover {
    background: hsl(260, 84%, 70%);
    color: #FFF;
    font-weight: 500;
}
.ui-dialog-buttonpane button:disabled {
    background: hsl(250, 10%, 80%);
    cursor: not-allowed;
}

















.xy_slider-wraper {
       width: 100%;
       min-height: 200px;
       position: relative;
   }
   .mter {
      height: 130px;
      margin-top: 30px;
   }
   .slider_liner {
       /*position:absolute;*/
       top: 0; bottom: 0; left: 0; right: 0;
       margin: auto;
       height: 40px; /*requires explicit height*/
       display: flex;
       align-items: center;
   }
   
    .left-div {
       width: 50%;
       height: 25px;
       display: flex;
       align-items: center;
       justify-content: right;
    }
    .right-div {
       width: 50%;
       height: 25px;
       display: flex;
       align-items: center;
    }
    .element_slider {
       width: 100%;
       position: absolute;
       z-index: 4;
       height: 30px;
       display: flex;
       align-items: center;
    }
    .result_x {
       width: 22px;
       height:22px;
       border-radius: 100%;
       margin-right: -10px;
       background: #6b00f5;
       position: relative;
       -webkit-box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
   -moz-box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
   box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
    }
    
    .result_y {
       width: 22px;
       height: 22px;
       background: #ff3c98;
       /*border: #ff3c98 1px solid;*/
       border-radius: 100%;
       margin-left: -10px;
       -webkit-box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
   -moz-box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
   box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
    }
    .persona {
       position: absolute;
       width: 20px;
       height: 0px;
       margin-top: -30px;
       z-index: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       top: -10px;
    }
   .persona p {
       font-size: 1rem;
       font-weight: 600;
   }
    .persona img {
       width: 34px;
       max-width: 34px;
    }
    .slider_red {
       width: 212px;
       height: 10px;
       background-color: #6b00f5;
    border-top: #6b00f5 1px solid;
    border-bottom: #6b00f5 1px solid;
       -webkit-box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
   -moz-box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
   box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
    }
    .slider_blue {
      width: 52px;
      height: 10px;
      background-color:#ff3c98;

    border-top: #ff3c98 1px solid;
    border-bottom: #ff3c98 1px solid;
        -webkit-box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
        -moz-box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
        box-shadow: 2px 2px 5px 0px rgba(179,179,179,1);
   }
   .line_w {
      width: 100%;
      border-top: 1px solid #6b00f5;
      border-bottom: 1px solid #6b00f5;
      border-left: 1px solid #6b00f5;
      display: flex;
      align-items:center;
      justify-content: flex-end;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      height: 10px
   }
   .line_x {
      width: 100%;
      border-top: 1px solid #ff3c98 ;
      border-bottom: 1px solid #ff3c98 ;
      border-right: 1px solid #ff3c98 ;
      display: flex;
      align-items:center;
      justify-content: flex-start;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      height: 10px
   }

   .spacers {
      padding: 5px;
   }


   .h3_class{
         margin-left:10%;
         width: 80%;
         float: left;
         font-size: 20px;
         margin-bottom: 30px;
         margin-top: 40px;
   }


   .slider-text{
        position: relative; 
        top: 110px;
   }

   .slider-text-2{
        position: relative; 
        top: 100px;
   }

    .question_div{

    }

    .grid-cols-2-always{

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    @media (max-width: 768px) {

        .slider-text{

            top: 135px;
       }

       .slider-text-2{

            top: 130px;
       }

        .question_div{
            padding: 10px;
            height: 89px;
        }
        
        .grid-cols-2-always{

            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

    }