﻿/*Required CSS*/
.custom-box-shadow {
    height : 100%;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0px 0px 4px 1px #dbdbdb;
}
    .custom-box-shadow hr {
        color: #0f263a;
        opacity: .8;
    }
    .horoscope-item-name {
        margin: 0px 0px 0px 10px;
        display: block;
        text-align: center;
    }
.score-response p {
    line-height: 1.3;
    font-size: 14px;
    text-align: justify;
    color: #4c4c4c;
}
.horoscope-item-name .item-name {
    font-family: Roboto;
    font-size: 40px;
    color: #FF850B;
    font-weight: 700;
    text-anchor: middle;
    text-shadow: 0 0 5px #cbcbcb7a;
}

.horoscope-item-name h3 {
    color: #0f263a;
    font-size: 18px;
    padding-top: 10px;
}

svg.radial-progress {
    height: auto;
    min-width : 120px;
    max-width: 120px;
    padding: 0;
    transform: rotate(-90deg);
    width: 100%;
    /* background-image: linear-gradient(-225deg, #0f263a -10%, #25ccf7 79%, #0f263a 90%); */
    border-radius: 50%;
}

.svg-container {
    position: relative;
    display: inline-block;
}

    .svg-container .score-img {
        position: absolute;
        bottom: 30px;
        left: 30px;
    }


svg.radial-progress circle {
    fill: transparent;
    stroke: #fff;
}

    svg.radial-progress circle.bar-static {
        stroke: #0f263a !important;
    }

    svg.radial-progress circle.bar--animated {
        stroke-dasharray: 219.91148575129;
        stroke: #FF850B;
        stroke-dashoffset: 219.91148575129;
        stroke-width: 4px;
        stroke-linecap: round;
    }

svg.radial-progress text {
    fill: #fafafa;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 700;
    text-anchor: middle;
    text-shadow: 0 0 5px #0000007a;
}

/*For CodePen*/




section.svg-container:nth-last-of-type(1) svg.radial-progress {
    background: linear-gradient(260deg, #ff0300, #ffc900);
}

section.svg-container:nth-last-of-type(0) svg.radial-progress {
    background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
}


.modal {
    z-index: 999999 !important;
}
#pills-tabContent-horoscope .tables {
    border: 1px solid #0f263a;
}
    #pills-tabContent-horoscope .tables table caption {
        border-bottom: 1px solid #0f263a;
    }


    /*zodiac selection box*/
.zodiac-horoscope-selectionbox {
    padding: 13px 15px;
    max-width: 300px;
    width: 90%;
    background-color: #ff850b3d;
    border: 1px solid #FF850B;
    border-radius: 0px 10px 10px 0px;
    position: absolute;
    top: 15px;
}
    .zodiac-horoscope-selectionbox .title h3 {
        font-size: 21px;
        font-family: 'Poppins';
        font-weight: 600;
        text-align: center;
        margin-bottom: 10px;
    }

@media(max-width : 991px) {
    .zodiac-horoscope-selectionbox {
        position: relative;
        top : 25px;
    }
}