.btn-primary{

    --bs-btn-color: #fff!important;
    --bs-btn-bg: #494DB5!important;
    --bs-btn-border-color: #494DB5!important;
    --bs-btn-hover-color: #fff!important;
    --bs-btn-hover-bg: #494DB5!important;
    --bs-btn-hover-border-color: #494DB5!important;
    --bs-btn-focus-shadow-rgb: 49,132,253!important;
    --bs-btn-active-color: #fff!important;
    --bs-btn-active-bg: #8180DE!important;
    --bs-btn-active-border-color: #0a53be!important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)!important;
    --bs-btn-disabled-color: #fff!important;
    --bs-btn-disabled-bg: #494DB5!important;
    --bs-btn-disabled-border-color: #494DB5!important;
}


.btn-secondary{

    --bs-btn-color: #494DB5!important;
    --bs-btn-bg: #FFF!important;
    --bs-btn-border-color: #FFF!important;
    --bs-btn-hover-color: #494DB5!important;
    --bs-btn-hover-bg: #FFF!important;
    --bs-btn-hover-border-color: #FFF!important;
    --bs-btn-focus-shadow-rgb: 49,132,253!important;
    --bs-btn-active-color: #494DB5!important;
    --bs-btn-active-bg: #8180DE!important;
    --bs-btn-active-border-color: #0a53be!important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)!important;
    --bs-btn-disabled-color: #494DB5!important;
    --bs-btn-disabled-bg: #FFF!important;
    --bs-btn-disabled-border-color: #FFF!important;
}
.card-container {
            display: flex;
            overflow-x: auto; /* Use "auto" to enable horizontal scrolling */
            white-space: nowrap;
            width: 100%; /* Ensure the container takes up the full width */
        }

        .card-mini-in-deck {
            width: 20%;
            min-width: 50px;
            margin: 5px;
            transition: opacity 0.5s; /* Add a transition for smooth fading */
        }

        .card-mini-selected {
            width: 20%;
            min-width: 70px;
            margin: 5px;
            transition: opacity 0.5s; /* Add a transition for smooth fading */
        }

        .footer {
            text-align: center;
            position: fixed;
            bottom: 0;
            width: 100%;
            margin-bottom: 25px;
        }

        .picked-card {
            text-align: center;
            margin-top: 20px;
        }

        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        .fade-out {
            animation: fadeOut 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                max-width: 0px;
                min-width: 0px;
                opacity: 0;
            }
            to {
                opacity: 1;
                max-width: 70px;
                min-width: 70px;
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0.2;
            }
        }
        .main_card_selection{
        	display: unset;
        }
        .show_loading{
        	display: none;
        	text-align: center;
        	margin-top: 140px;
        }
        .show_prediction_word{
        	display: none;
        	text-align: center;
        	font-size: 2em;
        }
.hide{
    display: none;
}
.row{
    max-width: 100vw;
    overflow: hidden;
}
.login {
    min-height: 100%;
    height: 100vh!important;
    font-family: 'Mitr';
    color: #353B3C;
}
.login .header{
    font-family: 'Mitr';
    font-size: 1.5em;
    margin-top: 25px;
    font-weight: 500;
}
.login .logo{
    margin-top: 110px;
}
.login .sub-header{
    font-family: 'Mitr';
    font-weight: 300;
    color: #797979;
}
.login .login-option-area{
        width: 100vw;
    margin: 0;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    background-color: #fff;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    position: fixed;
    bottom: 0;
    height: 40vh;
    box-shadow: 2px 4px 6px #000000;
    padding-right: 25px;
}
.login .area-header{
        text-align: left;
    margin-left: 25px;
    font-weight: 500;
    margin-top: 25px;
    font-size: 1.3em;
    color: #353B3C;
}
.login .area-sub-header{
    text-align: left;
    margin-left: 25px;
    color: #797979;
    font-weight: 200;
    font-size: 14px;
}
.login .login-btn{
    margin-left: 25px;
    margin-top: 15px;
}
::placeholder{
    color: #B1B2BC!important;
}
.basic-info{
    min-height: 100vh;
    font-family: 'Mitr';
    color: #353b3c;
}
.basic-info .input-group{
    border: solid 1px #fff;
    border-radius: 6px;
}
.basic-info .input-group-text {
    background-color: #ffffff;
    border: unset;
    border-radius: unset;
}
.basic-info .form-control, .basic-info .form-control input:focus {
    border: solid 0px #fff!important;
    border-radius: unset!important;
    font-weight: 200;
}

.form-control:focus, input:focus {
  border-color: #FFFFFF00!important;
  box-shadow: inset 0 0px 0px rgba(255, 255, 255, 0), 0 0 0px rgba(255, 255, 255, 0)!important;
}

.basic-info .input-group-text{
    color: #494DB5;
}
.basic-info .area-header{
    text-align: left;
    margin-bottom: 5px;
    font-size: 0.8em;
    margin-top: 20px;
}
.basic-info .form-check{
        text-align: left;
    font-weight: 300;
    font-size: 0.8em;
    margin-top: 5px;
}

.basic-info .form-check label{
    margin-left: 3px;
    font-weight: 200;
}
.basic-info .gender-select label i{
  color: #494DB5
}

.basic-info .gender-select .btn-outline-primary{
    --bs-btn-color: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-hover-border-color: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: unset;
    --bs-btn-active-bg: #FFFFFF;
    --bs-btn-active-border-color: #494DB5;
    --bs-btn-border-width: 2px;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #0d6efd;
    --bs-gradient: none;
    font-weight: 300;
}

.basic-info .gender-select .btn{
    --bs-btn-bg: white;
    --bs-btn-border-color: #ffffff00;
    --bs-btn-border-width: 2px;
    --bs-btn-color: unset;
    font-weight: 300;
}

.basic-info .form-area{
    padding-left: 15px;
    padding-right: 15px;
}
.basic-info .header{
    padding-top: 75px;
    text-align: left;
    padding-left: 15px;
    font-size: 1.2em;
    font-weight: 500;
}
.basic-info .sub-header{
    margin-top: 10px;
    text-align: left;
    padding-left: 15px;
    font-size: 0.8em;
    font-weight: 200;
    color: #797979;
    margin-bottom: 30px;

}
.basic-info .save-option-area{
    width: 100vw;
    margin: 0;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    background-color: #E9DCFF;
    position: fixed;
    bottom: 0;
    height: 16vh;
    box-shadow: 2px 4px 6px #000000;
    padding-top: 25px;
    z-index: 100;
}

.basic-info .save-option-area .btn{
    border-radius: 25px;
    width: 80vw;
}

.your-horo{
    min-height: 100vh;
    font-family: 'Mitr';
    color: #353b3c;
    width: 100vw;
    margin: 0;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    max-width: unset!important;
    text-align: center;
}

.your-horo .horo-card-area{
    border-radius: 15px;
    background-color: #ffffff;
    width: 90%;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
    text-align: center;
    padding-bottom: 25px;
}
.your-horo .horo-card .row{
    margin: 0!important;
}

.your-horo .date-horo{
    background-image: url("../images/frame_bg1.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 15px;
    text-align: left;
    /*margin-left: 5px;*/
    /*background-size: cover;*/
}
.your-horo .date-horo .element-frame{
    padding-left: 5px;
    padding-right: 5px;
}


.your-horo .date-horo .your-day{
    font-weight: 500;
    font-size: 1em;
    color: #FF4900;
    margin-bottom: 10px;
    margin-top: 15px;
}


.your-horo .lucky-number{
    background-image: url("../images/frame_bg2.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 15px;
    text-align: center;
    /*margin-left: 5px;*/
    /*background-size: cover;*/
}



.your-horo .lucky-number .your-number-header{
    font-weight: 200;
    font-size: 0.9em;
    color: #353B3C;
    margin-bottom: 5px;
    margin-top: 15px;
}

.your-horo .lucky-number .number-value{
    font-weight: 500;
    font-size: 1.4em;
    color: #494DB5;
    margin-bottom: 10px;
    margin-top: 0px;
}



.your-horo .lucky-color{
    background-image: url("../images/frame_bg3.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 15px;
    text-align: center;
    /*margin-left: 5px;*/
    /*background-size: cover;*/
}



.your-horo .lucky-color .your-color-header{
    font-weight: 200;
    font-size: 0.9em;
    color: #353B3C;
    margin-bottom: 5px;
    margin-top: 15px;
}

.your-horo .lucky-color .color-value{
    font-weight: 500;
    font-size: 1.4em;
    color: #494DB5;
    margin-bottom: 10px;
    margin-top: 0px;
}


.your-horo .horo-card{
    margin-top: 18px;
}
.your-horo .header-topic{
    background-color: #F2D9FF;
    padding: 5px;
    position: absolute;
    width: fit-content;
    transform: rotateY(0deg) rotate(-15deg);
    border-radius: 10px;
    box-shadow: 0px 0px 1px #0000003b;
    margin-left: -10px;
}
.your-horo .summarize-horo{
    background-color: #FBF3FF;
    border-radius: 25px;
    padding-top: 30px;
    padding-right: 25px;
    padding-left: 25px;
    font-weight: 200;
    text-align: left;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.your-horo .summarize-horo .emoji-topic{
    text-align: center;
}
.your-horo .summarize-horo .emoji-topic .rounded-circle{
    display: inline-block;
      width: 50px; /* Adjust the size of the circle */
      height: 50px; /* Adjust the size of the circle */
      border-radius: 50%;
      background-color: #E9DCFF; /* Adjust the background color */
      position: relative;
      overflow: hidden;
}

.your-horo .summarize-horo .emoji-topic .rounded-circle .emoji{
    font-size: 24px; /* Adjust the size of the emoji */
      line-height: 50px; /* Should match the height of the circle */
      text-align: center;
      color: #fff; /* Adjust the color of the emoji */
}
.your-horo .horo-topic{
    margin-left: -25px;
    margin-right: -25px;
}
.your-horo .horo-topic .below-part{
    background-color: #FBF3FF;
}
.your-horo .horo-topic .below-part .horo-topic-personality .topic{
    background-image: url("../images/frame_bg4.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 15px;
    text-align: center;
    height: 32px;
    margin-bottom: 15px;
}

.your-horo .horo-topic .below-part .horo-topic-charm .topic{
    background-image: url("../images/frame_bg5.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 15px;
    text-align: center;
    height: 32px;
    margin-bottom: 15px;
}

.your-horo .horo-topic .below-part .horo-topic-looking .topic{
    background-image: url("../images/frame_bg6.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 15px;
    text-align: center;
    height: 32px;
    margin-bottom: 15px;
}

.your-horo .horo-topic .below-part .horo-topic-work .topic{
    background-image: url("../images/frame_bg7.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 15px;
    text-align: center;
    height: 32px;
    margin-bottom: 15px;
}

.your-horo .horo-topic .below-part .topic-value{
    background-color: #ffffff;
    margin-top: 5px;
    text-align: center;
    height: 30px;
    border-radius: 25px;
}
.your-horo .horo-topic .below-part .content-container{
    padding-left: 10px;
    padding-right: 10px;
    color: #494DB5;
    font-weight: 300;
    margin-bottom: 15px;
}

.horo-topic-bad-year{
    padding: 0;
    background-color: #CCBAF3;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.horo-topic-good-year{
    padding: 0;
    background-color: #CCBAF3;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.horo-topic-bad-year .row, .horo-topic-good-year .row{
    /*transform: translate(0, 50%)!important;*/
    padding-top: 12px;
}

.horo-topic-bad-year .header-topic2, .horo-topic-good-year .header-topic2{
    background-color: #F2D9FF;
    padding: 3px;
    position: absolute;
    width: fit-content;
    border-radius: 8px;
    box-shadow: 0px 0px 1px #0000003b;
    margin-left: 0px;
    margin-top: -10px;
    font-size: 12px;
}

.horo-topic-bad-year .rounded-circle, .horo-topic-good-year .rounded-circle {
      display: inline-block;
      width: 25px; /* Adjust the size of the circle */
      height: 25px; /* Adjust the size of the circle */
      border-radius: 50%;
      background-color: #ffffff; /* Adjust the background color */
      position: relative;
      overflow: hidden;
      margin-top: 5px;
    }

.horo-topic-bad-year .border, .horo-topic-good-year .border {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      border: 2px solid #fff; /* Adjust the color of the border */
      box-sizing: border-box;
      border-radius: 50%;
    }

.horo-topic-bad-year .emoji, .horo-topic-good-year .emoji {
      font-size: 10px; /* Adjust the size of the emoji */
      line-height: 25px; /* Should match the height of the circle */
      text-align: center;
      color: #fff; /* Adjust the color of the emoji */
      margin-right: 1px;
    }

.horo-topic-bad-year .percentage, .horo-topic-good-year .percentage{
    font-weight: 300;
    font-size: 0.7em;
    margin-left: 2px;
}


.your-horo .btn {
    border-radius: 25px;
    width: 80vw;
    box-shadow: 0px 2px 4px #0000004a;
}

.your-horo .seek-solution{
    margin-top: 25px;
}

.your-horo .share-btn{
    margin-top: 10px;
    margin-bottom: 60px;
}


.floating-footer-area{
    width: 100vw;
    margin: 0;
    background-color: #8180DE;
    position: fixed;
    bottom: 0;
    height: 100px;
    box-shadow: 2px 4px 6px #000000;
    padding-top: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: #FFFFFF;
    z-index: 100;
    font-family: 'Mitr'
}
.your-horo .header-row{
    margin-top: 100px;
}

.your-horo .header-row .text-header{
    margin: auto;
}

.your-horo .header-row .setting{
    padding-right: 0!important;
    text-align: right;
    margin-right: -10px;
}

.your-horo .your-horo-header{
    text-align: left;
    margin-left: 25px;
    font-weight: 500;
    font-size: 1.5em;
}





.horo-option-page {
    min-height: 100%;
    height: 100vh!important;
    font-family: 'Mitr';
    color: #353B3C;
}
.horo-option-page .header{
    font-family: 'Mitr';
    font-size: 1.5em;
    margin-top: 75px;
    font-weight: 500;
    text-align: left;
    padding-left: 5px;
}
.horo-option-page .logo{
    margin-top: 110px;
}
.horo-option-page .sub-header{
    font-family: 'Mitr';
    font-weight: 300;
    color: #797979;
    text-align: left;
    padding-left: 5px;
}
.horo-option-page .option-area{
        width: 100vw;
    margin: 0;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    background-color: #fff;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    position: fixed;
    bottom: 0;
    height: 75vh;
    box-shadow: 2px 4px 6px #000000;
    padding-right: 25px;
    padding-top: 25px;
}
.horo-option-page .area-header{
        text-align: left;
    margin-left: 25px;
    font-weight: 500;
    margin-top: 25px;
    font-size: 1.3em;
    color: #353B3C;
}
.horo-option-page .area-sub-header{
    text-align: left;
    margin-left: 25px;
    color: #797979;
    font-weight: 200;
    font-size: 14px;
}
.horo-option-page .option-btn{
    margin-left: 25px;
    margin-top: 25px;
    width: 95%;
}





.card-selection {
    min-height: 100%;
    height: 100vh!important;
    font-family: 'Mitr';
    color: #353B3C;
}
.card-selection .header{
    font-family: 'Mitr';
    font-size: 1.5em;
    margin-top: 75px;
    font-weight: 500;
    text-align: left;
    padding-left: 5px;
}
.card-selection .logo{
    margin-top: 110px;
}
.card-selection .sub-header{
    font-family: 'Mitr';
    font-weight: 300;
    color: #797979;
    text-align: left;
    padding-left: 5px;
}
.card-selection .option-area{
        width: 100vw;
    margin: 0;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    background-color: #fff;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    position: fixed;
    bottom: 0;
    height: 75vh;
    box-shadow: 2px 4px 6px #000000;
    padding-right: 25px;
    padding-top: 25px;
}
.card-selection .area-header{
        text-align: left;
    margin-left: 25px;
    font-weight: 500;
    margin-top: 25px;
    font-size: 1.3em;
    color: #353B3C;
}
.card-selection .area-sub-header{
    text-align: left;
    margin-left: 25px;
    color: #797979;
    font-weight: 200;
    font-size: 14px;
}
.card-selection .option-btn{
    margin-left: 25px;
    margin-top: 25px;
    width: 95%;
}






.bg1{
     /* The image used */
  background-image: url("../images/background.png");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg2{
     /* The image used */
  background-image: url("../images/background2.png");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bg3{
     /* The image used */
  background-image: url("../images/background3.png");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}