body{
    background-image: url('background/bg.png');
    background-position: center top;
    /* background-repeat: no-repeat; */
    background-size: cover;
}

.fortune-icon{
    padding: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px 25px;
}

.fortune-icon-home{
    background-image: url('icons/home.png');
}
.fortune-icon-home.active{
    background-image: url('icons/home_active.png');
}

.fortune-icon-game{
    background-image: url('icons/extra_game.png');
}
.fortune-icon-game.active{
    background-image: url('icons/extra_game_active.png');
}

.fortune-icon-history{
    background-image: url('icons/history.png');
}
.fortune-icon-history.active{
    background-image: url('icons/history_active.png');
}
.fortune-icon-user{
    background-image: url('icons/user.png');
}
.fortune-icon-user.active{
    background-image: url('icons/user_active.png');
}

.fortune-icon-video{
    background-image: url('icons/film.png');
}

.bottom-nav{
    height: 76px !important;
    background: #8D25BC;
}

.bottom-nav a{
    text-decoration: none;
    color: #ffffff;
}

.bottom-nav a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.bottom-nav .button .label {
    margin-top:10px !important;
}

.bg-light-purple{
    background-color:#8D25BC;
    color: #fff;
}

.card {
    display: block;
    position: relative;
    font-size: 0.875rem;
    width: calc(100% - 1rem);
    margin: 8px auto;
    border-radius: 10px;
    border: 0px solid #dfdfdf !important;
    background-color: #ffffff;
}

.card-content-title{
    background: #f2f2f2 !important;
    border-radius: 10px 10px 0 0 !important;
}

.info-title{
    color: #6e29b3;
}

.no-padding{
    padding:0px !important;
}

.horoscope-left{
    background-color: #45267e;
    background: rgb(69,38,126);
    background: linear-gradient(90deg, rgb(145, 80, 240) 0%, rgba(253, 98, 236, 0.75) 100%);
    text-align: center;
    color: white!important;
    box-shadow: 1px 2px 8px #373535;
    border-radius: 4px!important;
}

.zodiac-right{
    background-color: #45267e;
    background: transparent;
    text-align: center;
    color: white;
    box-shadow: 1px 2px 8px #373535;
    border: 1px solid #ddd !important;
    border-radius: 4px!important;
}

.text-center{
    text-align: center !important;
}

.lucky-color{
    width:30px;
    height:30px;
    border-radius: 50%;
}

.lucky-number{
    color: white;
    margin: 0px !important;
}

.bg-green{
    background: #69ff30 !important;
    margin-left: 45px;
}

.title-zodiac{
    color: white;
    margin-top: 15px;
    text-align: center;
    margin-bottom: 15px !important;
    font-weight: 600;
    font-size: 20px;
}


.fortune-line {
    border: 0;
    height: 0.02rem !important;
    background-color: #fdfdfd82 !important;
    width: 95% !important;
}

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

.range-info{
    display: flex;
}

.icon-heart{
    padding: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url('icons/heart.png');
}

.icon-heart-null{
    padding: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url('icons/heart-1.png');
}

.icon-carrier{
    padding: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url('icons/briefcase.png');
}

.icon-carrier-null{
    padding: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url('icons/briefcase-1.png');
}

.icon-money{
    padding: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url('icons/coin.png');
}

.icon-money-null{
    padding: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url('icons/coin-1.png');
}

.icon-health{
    padding: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url('icons/health.png');
}

.icon-health-null{
    padding: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url('icons/coin-1.png');
}

.button-select-date {
    background: #f823a5 !important;
    border-radius: 20px !important;
    width: 100%;
    color:#fff!important;
}

.history-date-active {
    background: #9e73f6;
    border-radius: 0 0 10px 10px;
    color: white;
}

.history-date-nonactive {
    background: #f5f5f5;
    border-radius: 0 0 10px 10px;
    color: #333;
}


.history-year-active {
    background: #9e73f6;
    border-radius: 0 0 10px 10px;
    color: white;
}

.history-year-nonactive {
    background: #f5f5f5;
    border-radius: 0 0 10px 10px;
    color: #333;
}


.zodiac-text {
    color: #fff!important;
}

.zodiac-text h5 {
    margin-bottom: 0px;
}

.zodiac-text p {
    margin-top: 0px;
    font-size: 10px;
}

.horoscope-left a, .horoscope-left a:active, .horoscope-left a:hover,
a.zodiac-right, a.zodiac-right:active, a.zodiac-right:hover,
.zodiac-text a, .zodiac-text a:active, .zodiac-text a:hover{
    color: #fff!important;
    text-decoration: none;
}

.zodiac-choose {
    background-color: #fff;
    border-radius: 12px;
    color: red;
    z-index: 1;
}

.zodiac-choose-slide {
    background-color: #130534;
    overflow-x: scroll;
}

.zodiac-choose-slide ul, .zodiac-choose-slide .group-list.horizontal > li + li {
    border-color: transparent;
}

.button {
    height: auto;
}

.zodiac-percent {
    z-index: 1;
}

.zodiac-percent p {
    background-color: #FD2E61;
    color: #fff;
    width: 60px;
    height: 60px;
    font-size: 20px;
    padding-top: 13px;
    border-radius: 500px;
    border: 1px solid #fff;
}

.zodiac-result {
    background-color: #fff;
    border-radius: 8px;
    font-size: 14px;
}

.button-edit {
    background-color: #794CFA;
    color: #fff;
    border-radius: 500px;
}

.login-container {
    background-color: #fff;
    border-radius: 6px;
}

.login-container form {
    width: 100%;
}

.login-container form input {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: #C9C9C9;
}

.signup {
    color: #fff;
}

.signup a {
    color: red;
    text-decoration: underline;
}

.popup-container {
    width: 96%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #B83AF3;
    color: #fff;
    border-radius: 16px;
}

.confirm-btn {
    width: 100%;
    background-color: #330E86;
    color: #fff;
}

.confirm2-btn {
    width: 100%;
    background-color: #B83AF3;
    color: #fff;
    opacity: .5
}

.camera-container {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    background-image: url(background/video-sample.png)!important;
    background-size: cover;
    background-position: top center;
    min-height: 100vh;
}

.user-camera {
    position: absolute;
    bottom: 180px;
    right: 20px;
}

.camera-nav {
    position: absolute;
    bottom: 0;

}

.camera-nav-2 {
    background-color: #000;
    position: absolute;
    bottom: 0;
}

.date-scroll ul li {
    margin:0 16px 0 0!important;
    border-left: 0!important;
}


.overlay {
    background:rgba(0, 0, 0, 0.8)!important;
}

.profile-teller {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}


.pt-10 {
    padding-top: 10px !important;
}

.profilepic {
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    height: 32px;
    width: 32px;
    object-fit: contain;
}


#profile {
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 5px;
    background: none;
    height: 100px;
    width: 100px;
    object-fit: contain;
}


.fortune-tarot-card-selected {
    width: 83%;
    border: 2px solid;
    box-shadow: 2px 3px 8px #c31fff;
    border-radius: 10px;
}

.fortune-image-result{
     border: 2px solid;
    box-shadow: 2px 3px 8px #c31fff;
    border-radius: 10px;
}


.popup-bell{
    position: fixed;
    width: 250px;
    background: #242424e3;
    border-radius: 5px;
    bottom: 100px;
    color: white;
    padding: 0px 0px 0px 20px;
    right: 15px;
    margin-right: 10px;
    text-align: center;
    font-size: 14px;
    z-index: 99000;
}
.popup-bell .icon-bell{
    background: #f70045;
    border-radius: 0px 5px 5px 0px;
}