
#yogacontent #idktob_div{
        display:none;
    }
#yogacontent .tooltip-container {
  display: none;
}
@media (max-width: 600px) {
    #yogacontent #idktob_div{
        display:block;
    }
}
   #yogacontent #tob_calc {
        display: none;
        color:black;
    }

    #yogacontent .circle-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        /* size of circle */
        height: 18px;
        background-color: #dedede;
        /* circle background color */
        color: black;
        /* icon/text color */
        border-radius: 50%;
        /* makes it a circle */
        font-size: 15px;
        font-family: Arial, sans-serif;
        font-weight: bold;
        text-align: center;
    }

    #yogacontent .circle-icon-popup {
        margin-left: 2%;
    }

    #yogacontent .circle-icon-close {
        background-color: #fed051;
        float: right;
    }

    #yogacontent .starselect {
        background: #dedede;
        clear: both;
        width: 100%;
        height: auto;
        display: inline-block;
        padding: 2%;
        margin-top: 2%;
        border-radius: 5px;
    }

    #yogacontent .starselect select {
        width: 98%;
        border: none;
        background: #fff url(https://images.clickastro.com/ca/mvcimages/free-horoscope-landing/cpc/down-arrow_grey.png) no-repeat;
        background-position: calc(100% - 0.75rem) center !important;
        appearance: none !important;
        background-size: 12px;
        height: auto;
        line-height: 1.4em;
    }

    #yogacontent .birthtimedata {
        clear: both;
        padding-top: 1%;
    }

    /* .birthtime {
        color: black;
        font-size: 13px;
        font-family: Roboto, sans-serif;
        margin-top: 1%;
        clear: both;
    } */

    #yogacontent .result_birth_time {
        font-weight: bold;
    }

    #yogacontent .resultdiv {
        border-bottom: 1px solid darkgrey;
    }

    #yogacontent .result_btn_div {
        padding-top: 2%;
        text-align: center;
        width: 100%;
    }

    #yogacontent .result_btn_div div {
        border: 1px solid #bcbcbc;
        width: 45%;
        margin: 1%;
        box-shadow: 5px 5px 4px #cbcbcb;
        padding: 2%;
        border-radius: 6px;
        font-weight: 700;
        color: #363636;
        opacity: 0.9;
        font-family: 'Roboto', sans-serif;
        font-size: 13px;
        float: left;
        margin-left: 2%;
        margin-right: 2%;
    }

    #yogacontent .result_btn_div div.cancelbtnidk {
        background-color: #fff !important;
    }

    #yogacontent .result_btn_div div.usetimebtn {
        background-color: #ffcc3f !important;
    }

    #yogacontent div.staroptions label,
    #yogacontent div.timeoptions label,
    #yogacontent div.quarteroptions label {
        position: relative;
        width: 93%;
        background: #fff;
        color:black;
    }

    #yogacontent div.staroptions label::after,
    #yogacontent div.timeoptions label::after,
    #yogacontent div.quarteroptions label::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 3%;
        width: 95%;
        border-bottom: 1.5px solid lightgrey;
    }

    .overlay-idk {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(1, 1, 20, .78);
        transition: opacity .4s ease-out;
        visibility: hidden;
        opacity: 0;
        z-index: 1200;
    }

    .show-pop {
        visibility: visible;
        opacity: 1;
    }

     .tooltip-box {
        position: relative;
        background-color: white;
        color: #333;
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
        max-width: 400px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        border: 1px solid #ccc;
        margin: 2%;
        top: 40%;
    }

     .tooltip-box h4 {
        margin-top: 0;
        margin-bottom: 8px;
        font-size: 15px;
        font-weight: bold;
    }

     .tooltip-close {
        position: absolute;
        top: 10px;
        right: 12px;
        cursor: pointer;
        font-weight: bold;
        color: black;
        font-size: 18px;
    }

     .tooltip-close:hover {
        color: #000;
    }

    #yogacontent .no-border-after {
        border-radius: 0px 0px 6px 6px;
    }

    #yogacontent .no-border-after::after {
        border-bottom: unset !important;
    }

    #yogacontent .select-box-quarter {
        display: flex;
        align-items: center;
    }

    #yogacontent .select-box-quarter span.img {
        width: 10%;
    }

    #yogacontent #idktob_div {
        width: 70%;
        float: right;
        margin-left: 3%;
        color: black;
        font-size: 13px;
        text-decoration: underline;
        font-family: 'Roboto', sans-serif;
    }

    #yogacontent .custom-select {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    #yogacontent .select-box-star,
    #yogacontent .select-box-time,
    #yogacontent .select-box-quarter {
        padding: 10px;
        border: none;
        background: #fff url(https://images.clickastro.com/ca/mvcimages/free-horoscope-landing/cpc/down-arrow_grey.png) no-repeat;
        background-position: calc(100% - 0.75rem) center !important;
        appearance: none !important;
        background-size: 12px;
        height: auto;
        line-height: 1.4em;
        margin: 1%;
        box-shadow: 5px 5px 4px #cbcbcb;
        border-radius: 6px;
        color: black;
        font-size: 14px;
        font-family: Roboto, sans-serif;
    }

    #yogacontent .staroptions input[type="radio"],
    #yogacontent .timeoptions input[type="radio"],
    #yogacontent .quarteroptions input[type="radio"] {
        display: block;
        float: right;
        height: 15px !important;
        margin-right: 0 !important;
        width: unset !important;
        box-shadow: unset;
    }

     #yogacontent .staroptions input[type="radio"]::after,
    #yogacontent .timeoptions input[type="radio"]::after,
    #yogacontent .quarteroptions input[type="radio"]::after {
         width:0px !important;
        border:none !important;
    }

    #yogacontent .staroptions,
    #yogacontent .timeoptions,
    #yogacontent .quarteroptions {
        display: none;
        /*position: absolute;*/
        width: 98%;
        border: 1px solid #aaa;
        background: #fff;
        z-index: 1000;
        margin-left: 1%;
    }

    #yogacontent .staroptions label,
    #yogacontent .timeoptions label,
    #yogacontent .quarteroptions label {
        display: flex;
        align-items: center;
        padding: 10px;
        cursor: pointer;
         color:black;
    }

    #yogacontent .staroptions label span.img,
    .timeoptions label span.img {
        width: 0%;
    }

    #yogacontent .staroptions label span.textfrm,
    #yogacontent .timeoptions label span.textfrm {
        width: 90%;
         color:black;
         bottom:0px !important;
    }

    #yogacontent .staroptions label span.radio,
    #yogacontent .timeoptions label span.radio {
        width: 10%;
    }

    #yogacontent .quarteroptions label span.img {
        width: 10%;
    }

    #yogacontent .quarteroptions label span.textfrm {
        width: 90%;
        color:black;
         bottom:0px !important;
    }

    #yogacontent .quarteroptions label span.radio {
        width: 10%;
    }

    #yogacontent .staroptions input[type="radio"],
    #yogacontent .timeoptions input[type="radio"],
    #yogacontent .quarteroptions input[type="radio"] {
        margin-right: 10px;
    }

