.background_image {
    /* color: var(--chakra-colors-gray-800); */
    /* background-repeat: ;
    background-attachment: ;
    background-origin: ;
    background-clip: ;
    background-color: ; */
    transition-property: background-color;
    transition-duration: var(--chakra-transition-duration-normal);
    line-height: var(--chakra-lineHeights-base);
    background-image: url('../img/background-body-admin.05c0b5b9.png');
    background-size: cover;
}
.password-eye{
    /* color: #1b3a62 !important; */
}

.top_pannel {
    padding-bottom: 40px;
}

.input-form-style{
    background-color: #1b3a62 !important;
    color: white !important;
}

input::placeholder {
    color: white !important; /* Light gray or any color you want */
}

.chunk-card
{
    border: 1px solid #1b3a62;
    border-radius: 10px;
    padding: 12px;
    margin-top: 10px;
}
.btn-orange{
    background-color: rgb(210, 103, 34) !important;
}

.betaTagDiv
{
    background-color: #1b3a62;
    width: 150px;
    margin: auto;
    text-align: center;
    transform: rotate(45deg);
    position: relative;
    left: 37px;
    top: -27px;
}

/*.mainDivClass*/
/*{*/
/*    margin-left: 15px !important;*/
/*}*/
.betaTag
{
    color: white;
    font-size: x-large;
    font-weight: bold;
    margin: auto;
}

.humanop-version
{
    border: 2px solid #1b3a62;
    padding: 11px 3px 10px 3px !important;
    border-radius: 9px;

}

@media (min-width: 360px) and (max-width: 528px) {
    .betaTagDiv {
        background-color: #1b3a62;
        width: 232px;
        margin: auto;
        text-align: center;
        transform: rotate(45deg);
        position: relative;
        left: 41px;
        top: -30px;
    }
}

@media (min-width: 320px) and (max-width: 360px) {
    .betaTagDiv {
        background-color: #1b3a62;
        width: 232px;
        margin: auto;
        text-align: center;
        transform: rotate(45deg);
        position: relative;
        left: 34px;
        top: -61px;
    }
}

.user-pannel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.features-card {
    flex-direction: column;
}

#suggestion_text_box {
    width: 100%;
    /* height: auto; */
    color: white;
    border-radius: 10px;
    margin: 10px 0;
}

.prompt-suggestion {
    background-color: rgb(18, 20, 57);
    /* padding: 20px 10px; */
}

 .prompt-text, .responsive-text {
    /* font-size: small; */
}
.card{
    height:auto;
    text-wrap: wrap;
    word-wrap: break-word;


}

.sign-out-btn {
    background-color: #1b3a62;
}

.navbar > .container-fluid {
    display: flex;
    flex-direction: row-reverse;

}

#nav-toggle {
    background-color: #1b3a62;
    border-radius: 0 8px 8px 0 !important;
}

#nav-toggle-icon {
    color: #ffffff !important;
    font-size: 25px;
}

.modal-close-btn {
    background: #1B3A62;
    border: none;
    color: white;
    font-weight: bold;
    font-size: x-large;
    float:right;
    border-radius: 3px;
    padding: 0px 10px 1px 10px;
}

.primaryColor{
    color: #1b3a62;
}

.slider-padding {
    padding: 10px 80px 10px 80px;
    text-align: justify;
    color: white;
}

video.slider-padding {
    width: 100% !important;
    height: auto !important;
}

p.slider-padding {
    padding-bottom: 0px;

}

ul.slider-padding {
    text-align: start;
}

@media (max-width: 575px) {
    .slider-padding {
        padding: 10px 0;

    }

    img.carousel-image {
        min-width: 200px;
        height: 70px;
    }

    p.slider-padding {
        padding: 0;

    }

    img.ult-img {
        min-width: 200px;
        height: 70px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .slider-padding {
        padding: 10px 50px;
    }
}

.form-check-input:checked[type="checkbox"] {
    background-image: linear-gradient(310deg, #1B3A62 0%, #1B3A62 100%);
}

.greenBox
{
    background-color: green !important;
}
.redBox
{
    background-color: red !important;
}
.lightGreenBox
{
    background-color: yellow !important;
    color: black !important;
    font-weight: bold !important;
}
.border-green
{
    border: 2px solid green !important;
}
.sidenav:hover {
    transition: none !important;
    transform: none !important;
}

.sidenav-header:hover {
    transition: none !important;
    transform: none !important;
}

aside:hover {
    transition: none !important;
    transform: none !important;
}

.modal-body {

}

.modal-body video {
    width: 100%;
    height: auto;
}

.modal-content {
    margin-top: 100px;
}

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

.remove-scrollbar::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}
#remove-scrollbar-nav {
    overflow: scroll;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

#remove-scrollbar-nav::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

#chatbox-content {
    /* height: 20px; */

}

/**/
.animated-number {
    opacity: 0;                  /* Initially hidden */
    position: relative;           /* To allow left/right movement */
    font-size: 2rem;              /* Example font size */
    animation: moveLeftRight 2s ease-in-out 5;  /* Loop movement */
    transition: opacity 1s ease;  /* Smooth fade-in effect */
    animation-play-state: paused; /* Initially paused */
    pointer-events: none;         /* Disable pointer events (optional) */
  }

  /* Delay fade-in after 3s */
  .animated-number.fade-in {
    opacity: 1;
    transition-delay: 3s;
    animation-play-state: running; /* Start movement after fade-in */
  }

  /* Keyframes for left-right movement */
  @keyframes moveLeftRight {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }
  }

  /* Keyframes for disappearing after 5 seconds */
  @keyframes disappear {
    0%, 90% { opacity: 1; } /* Stay visible until near the end */
    100% { opacity: 0; }    /* Fade out at the end */
  }

  .animated-number.disappear {
    animation: disappear 2s ease forwards;
    animation-delay: none; /* Disappear after the total delay and movement (3s + 5s) */
  }

  .total-points{
    font-size: 40px;
  }

/**/


@media (max-width: 575px) {
    /* .avatar-icon{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    } */
    .fs-15px {
        font-size: 15px;
    }

    .fs-13px {
        font-size: 13px;
    }

    .fs-10px {
        font-size: 10px;
    }

    .fs-7px {
        font-size: 7px;
    }

    .fs-5px {
        font-size: 5px !important;
    }

    .fs-3px {
        font-size: 3px;
    }

    .fs-2px {
        font-size: 2px;
    }

    #suggestion_text_box {
        /* display: none !important; */

    }

    .navbar > .container-fluid {
        flex-direction: row;
    }

    .main-post-section button {

        font-size: 7px;
        font-weight: 900;
        padding: 10px 10px;
    }

    .d1 .d2 {

        width: 100%;
    }
    .card{
        height:auto !important;
    }
     .prompt-text{
        font-size: 7px !important;
    }
     .responsive-text{
        font-size: 12px !important;
    }


}

/* tablet view */
@media (min-width: 576px) and (max-width: 767px) {
    .features-card {
        flex-direction: row;
        justify-content: end;
    }
    .fs-5px {
        font-size: 5px !important;
    }
    .fs-7px {
        font-size: 7px !important;
    }
    .card{
        height:auto;
    }
     .prompt-text{
        font-size: 10px !important;
    }
     .responsive-text{
        font-size: 13px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .features-card {
        flex-direction: row;
        justify-content: space-around;

    }
    .fs-7px {
        font-size: 7px !important;
    }
    .card{
        height:auto;
    }
     .prompt-text {
        font-size: 10px !important;
    }
      .responsive-text{
        font-size: 15px !important;
    }

}

@media (min-width: 360px) and (max-width: 991px) {

    .connectionDev
    {
        width: 100%;
        margin-top: 5px;

    }

    .connectionBtn
    {
        width: 100%;
    }

}

@media (min-width: 360px) and (max-width: 767px) {

    .searchInput
    {
        margin-top: 30px !important;
    }

}

@media (min-width: 992px)  {
    .card{
        height:auto;
    }
    .fs-12px {
        font-size: 12px;
    }


    .fs-7px {
        font-size: 7px;
    }

     .prompt-text {
        font-size: 13px !important;
    }
     .responsive-text {
        font-size: 13px !important;
    }


}


.daily-tip-card{
    background: #8BB1AB !important;
    border-radius: 0 !important;
}
.library-card{
    background: #2E9CA8 !important;
    border-radius: 0 !important;
}
.core-state-card{
    background:  #F6BA81 !important;
    border-radius: 0 !important;
}
.help-challenge-card{
    background: #0f1535 !important;
    border-radius: 0 !important;

}
.optimization-strategy-card{
    background: #1C365E !important;
    border-radius: 0 !important;
}
input:focus,
textarea:focus,
select:focus {
    border-color: #1C365E !important; /* Custom border color (e.g., tomato) */
    box-shadow: none !important; /* Ensure the default box-shadow is removed, if not desired */
}
.podcast-card{
    background:  #FFFFFF !important;
    border-radius: 0 !important;
}

.body-background{
    background:  #eaf3ff;
}
/*.assessment-intro-background{*/
/*    background:  #1C365E !important;*/
/*}*/
.left-nav-background{
    background: linear-gradient(to bottom, #1C365E 85%, #90a2bd) !important;
}

.text-light-grey{
    color: lightgrey !important;
}
.left-nav-blue-color{
    background: #F3DEBA !important;
}

.left-nav-blue-light-color{
    background: #2C4C7E !important;
}

.optimization-strategy-card > div > h3{
    color:white !important;
    border-radius: 0 !important;
}

.pricing-freemium-card{
    background: #8BB1AB !important;
}

::placeholder {
    color: #0f1535 !important;
}

::-ms-input-placeholder { /* Edge 12-18 */
    color: #0f1535 !important;
}

.pricing-core-card{
    background: #F6BA81 !important;
}

.pricing-premium-card{
    background: #0f1535 !important;
}

.background-none{
    background:none !important;
}

.setting-box-background{
    /*background: #eaf3ff !important;*/
    border: 2px solid #1b3a62 !important;
}

.custom-text-dark{
    color: #193862 !important;
}

.text-color-blue{
    color: #1c365e !important;
}

.rainbow-border-assessment-intro-btn {
    display: inline-block;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    background-image: linear-gradient(#1C365E, #1C365E), linear-gradient(90deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    background-clip: padding-box, border-box;
    background-origin: border-box;
    cursor: pointer;
    transition-property: background-image;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 0;
}

.rainbow-border-assessment-intro-btn:hover {
    animation: changeAssessmentIntroGradient 0.3s linear infinite alternate;
    color: white;
}

@keyframes changeAssessmentIntroGradient {
    from {
        background-image: linear-gradient(#1C365E, #1C365E), linear-gradient(90deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    }

    to {
        background-image: linear-gradient(#1C365E, #1C365E), linear-gradient(135deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    }
}



.rainbow-border-user-nav-btn {
    display: inline-block;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: bold;
    color: black !important;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    background-image: linear-gradient(#F3DEBA, #F3DEBA), linear-gradient(90deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    background-clip: padding-box, border-box;
    background-origin: border-box;
    cursor: pointer;
    transition-property: background-image;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 0;
}

@media screen and (min-width: 360px) and (max-width: 446px) {

    .navButtonResponsive
    {
        width: 100%;
    }
}

@media screen and (min-width: 439px) and (max-width: 1460px) {

    .btnMarginAdd
    {
        margin-left: 10px;
    }
}

.rainbow-border-user-nav-btn:hover {
    animation: changeUserNavGradient 0.3s linear infinite alternate;
    color: black !important;
}

@keyframes changeUserNavGradient {
    from {
        background-image: linear-gradient(#F3DEBA, #F3DEBA), linear-gradient(90deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    }

    to {
        background-image: linear-gradient(#F3DEBA, #F3DEBA), linear-gradient(135deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    }
}


.rainbow-border-user-connect-btn {
    display: inline-block;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: bold;
    color: black !important;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    background-image: linear-gradient(#F6BA81,#F6BA81), linear-gradient(90deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    background-clip: padding-box, border-box;
    background-origin: border-box;
    cursor: pointer;
    transition-property: background-image;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 0;
}

.rainbow-border-user-connect-btn:hover {
    animation: changeUserConnectGradient 0.3s linear infinite alternate;
    color: black !important;
}

@keyframes changeUserConnectGradient {
    from {
        background-image: linear-gradient(#F6BA81,#F6BA81), linear-gradient(90deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    }

    to {
        background-image: linear-gradient(#F6BA81,#F6BA81), linear-gradient(135deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    }
}


.rainbow-border-help-box {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: white !important;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    background-image: linear-gradient(#0f1535, #0f1535), linear-gradient(90deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    background-clip: padding-box, border-box;
    background-origin: border-box;
    cursor: pointer;
    transition-property: background-image;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 0;
}

.rainbow-border-help-box:hover {
    animation: changeHelpBoxGradient 0.3s linear infinite alternate;
    color: white !important;
}

@keyframes changeHelpBoxGradient {
    from {
        background-image: linear-gradient(#0f1535, #0f1535), linear-gradient(90deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    }

    to {
        background-image: linear-gradient(#0f1535, #0f1535), linear-gradient(135deg, rgb(146, 11, 11), orange, yellow, rgb(22, 200, 22), rgb(0, 238, 255), rgb(26, 58, 222), rgb(4, 19, 113));
    }
}

textarea::placeholder{
    color: black !important;
}

/*dashboard page media query*/
@media screen and (min-width: 300px) and (max-width: 1000px) {

    .card{
        margin: 20px;
    }

    .hai_chat_title_div{
        padding: 20px;
    }

    .haichat_form_div{
        padding: 20px;
    }
}

/*.new-orange-button{*/
/*    background-color: #1b3a62;*/
/*    padding: 10px 20px 10px 20px;*/
/*    border-radius: 8px;*/
/*    color: white;*/
/*    border-color: transparent;*/
/*    cursor: pointer;*/
/*    font-weight: 800;*/
/*}*/

/*.new-orange-button:hover{*/
/*    color: white;*/
/*}*/





/* ck editor custom classes for size */

.text-tiny{
    font-size: 0.5rem !important;
}
.text-small{
    font-size: 0.75rem !important;
}
.text-default{
    font-size: 1rem !important;
}
.text-big{
    font-size: 1.5rem !important;
}
.text-huge{
    font-size: 2rem !important;
}