.tbl-normal { border: 1px solid #B4B4B3; border-collapse: collapse; clear: left; margin: 0 0 15px; padding: 0; text-align: left; vertical-align: top; } .tbl-normal td { background: url("/images/white-pix.png") repeat-x scroll center bottom #FCFCFC; border-bottom: 1px solid #D9D9D9; color: #363636; font-size: 14px; margin: 0; padding: 2px 5px; text-align: left; } .heading-nadi, .tbl-normal .heading-nadi, #div-birth-data .heading-nadi { background-color: #EAE9E9; font-size: 14px; font-weight: bold; padding: 5px; border-bottom: 1px solid #D9D9D9; color: #000000; } #div-birth-data { border: 1px solid #B4B4B3; margin-bottom: 5px; } #div-birth-data .heading-nadi { cursor: pointer; } input, select { width: 150px; border: 1px solid #999; padding: 0 3px; } input.small, select.small { width: 40px; text-align: right; } #div-lgn { margin-right: 5px; } div.div-chart { position: relative; width: calc(100vw - 5px); height: calc(100vw - 5px); max-width: 400px; max-height: 400px; background: url(/images/astro-chart.jpg); background-size: cover; } div.div-chart div { /*border: 1px solid #000;*/ text-align: center; line-height: 20px; font-size: 10px; position: absolute; } div.div-chart .hras_1 { top: calc(50% - 20px); left: calc(50% - 10px); width: 20px; } div.div-chart .hras_2 { top: calc(25% - 21px); left: calc(25% - 10px); width: 20px; } div.div-chart .hras_3 { top: calc(25% - 11px); left: calc(25% - 20px); width: 20px; } div.div-chart .hras_4 { top: calc(50% - 10px); left: calc(50% - 20px); width: 20px; } div.div-chart .hras_5 { top: calc(75% - 12px); left: calc(25% - 19px); width: 20px; } div.div-chart .hras_6 { top: calc(75% + 0px); left: calc(25% - 9px); width: 20px; } div.div-chart .hras_7 { top: calc(50% + 2px); left: calc(50% - 10px); width: 20px; } div.div-chart .hras_8 { top: calc(75% + 1px); left: calc(75% - 11px); width: 20px; } div.div-chart .hras_9 { top: calc(75% - 11px); left: calc(75% + 1px); width: 20px; } div.div-chart .hras_10 { top: calc(50% - 10px); left: calc(50% - 1px); width: 20px; } div.div-chart .hras_11 { top: calc(25% - 9px); left: calc(75% - 2px); width: 20px; } div.div-chart .hras_12 { top: calc(25% - 20px); left: calc(75% - 11px); width: 20px; } div.div-chart .hpl_1 { top: 10%; left: calc(50% - 50px); width: 100px; height: 100px; } div.div-chart .hpl_2 { top: 5%; left: calc(25% - 50px); width: 100px; height: 60px; } div.div-chart .hpl_3 { width: 60px; height: 100px; top: calc(17% - 2px); left: 5px; } div.div-chart .hpl_4 { top: 40%; left: 10%; width: 100px; height: 100px; } div.div-chart .hpl_5 { top: 66%; left: 0px; width: 60px; height: 100px; } div.div-chart .hpl_6 { top: calc(90% + 3px); left: calc(14% - 10px); width: 100px; height: 60px; } div.div-chart .hpl_7 { top: 75%; left: calc(40% - 15px); width: 100px; height: 100px; } div.div-chart .hpl_8 { top: 90%; left: calc(62% - 0px); width: 100px; height: 60px; } div.div-chart .hpl_9 { top: 65%; left: 84%; width: 60px; height: 100px; } div.div-chart .hpl_10 { top: 40%; left: calc(65% - 10px); width: 100px; height: 100px; } div.div-chart .hpl_11 { top: 17%; left: 84%; width: 60px; height: 100px; } div.div-chart .hpl_12 { top: 5%; left: 63%; width: 100px; height: 60px; } .tbl-dasa td { white-space: nowrap; font-size: 14px; } .tbl-dasa tr td:first-child { padding-left: 5px; } .dialog { position: absolute; /*top: 100px; left: 100px;*/ display: none; right: 8px; z-index: 100; border: 1px solid #B4B4B3; border-top: none; } #dialog-content { background: #fff url(/images/dialog-bg-new.gif) 0px -3px repeat-x; text-align: left; overflow: hidden; margin: 0; border: 5px solid #ddd; padding: 5px; float: left; } #dialog-content .dialog-heading { color: #092B46; font-size: 14px; font-weight: bold; text-align: left; height: 30px; } #dialog-content .dialog-heading div { float: right; } .horoscope-chart-nadi #tbl-main { width: 100%; } #div-dasa table tr td a { cursor: pointer; } .nadi-dosha td:first-child { overflow: hidden; } .nadi-coordinates h6 { background-color: #EAE9E9; padding: 8px; font-weight: 500; font-size: 14px; margin-bottom: 0; color: #000000; } .nadi-content ul { padding-left: 0; text-decoration: none; list-style: none; display: grid; grid-template-columns: 1fr; align-items: center; justify-content: space-between; margin-bottom: 0px; border-right: 1px solid #ddd; white-space: nowrap; } .nadi-coordinates { border-left: 1px solid #B4B4B3; background-color: #fcfcfc; border-top: 1px solid #B4B4B3; border-right: 1px solid #B4B4B3; } .nadi-status li { display: grid; justify-content: space-between; padding: 2px 7px; border-bottom: 1px solid #D9D9D9; font-size: 14px; grid-template-columns: 60px 1fr; } .nadi-content { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid #ddd; margin-bottom: 20px; } .nadi-content:last-child { border-bottom: 0px; padding-bottom: 0px; } .section-three .nadi-status { border-right: 0px; } .tbl-normal { width: 100%; } .use-account ul { list-style: none; padding-left: 0px; margin-bottom: 0; } .use-account h6 { padding: 0px 10px; } .logo-spair img { width: 130px; padding-top: 0; } .results { padding-top: 10px; } .fixed-top { padding: 2px 1rem; border-bottom: 1px solid #ddd; } .filled-details { text-align: center; } .nadi-status li label { margin-bottom: 0; color: #000000; } .nadi-status li span { color: #777; } .form.astro-form form { border: 1px solid #ddd; padding-top: 10px; background-color: #fff; } a, a:not([href]), p, .nav-link { font-size: 16px; font-weight: 300; color: #0063d1; } .tbl-dasa div { display: inline-block; } /* End Astrology Kuldli Chart */ /* Start Media Query */ @media only screen and (max-width: 1199px) { .self-tb-box { min-width: 33.333%; } .planet-tbl { display: grid; grid-template-columns: repeat(2, 1fr); } .planet-tbl td, .nadi-dosha td { margin-bottom: 30px; } .nadi-dosha { display: grid; grid-template-columns: 1fr 1fr; } .planet-tbl td:last-child { grid-column: 1/span 2; } } @media only screen and (max-width: 991px) { .horoscope-chart-nadi { padding-left: 0; padding-right: 0; } #td-plnt { padding-left: 0!important; } .login-form, .signup-form, .forgot-pass { padding: 30px 15px; } .txt-form, .signup-txt, .forgot-pass-txt { margin: 0px auto; } .top-section-chart { grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); } .container.horoscope-chart-nadi { max-width: 100%; } .planet-tbl .div-chart { max-width: calc(50vw - 15px); max-height: calc(50vw - 15px); } .nadi-dosha { display: grid; grid-template-columns: 1fr; } } @media only screen and (max-width: 767px) { .nadi-dosha { grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); } .container.horoscope-chart-nadi { padding-left: 0px; padding-right: 0px; } } @media only screen and (max-width: 575px) { nav.navbar { padding: 10px!important; text-align: center; } .account-details { width: 100%; } .nadi-content ul { grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); } .nadi-status li { grid-template-columns: 1fr 1fr; } .logo-bite a { justify-content: center; } .filled-details { padding: 5px!important; text-align: left; } .account-details { position: absolute; } .account-details { right: 0; width: 100px; } .use-account ul { text-align: left; } .nav-menu-icon { display: block; margin-top: -20px; z-index: 1; } .nav-menu-icon .fas { font-size: 22px; color: #333; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } .nav-menu-icon .fas:hover { color: #4a8cf6; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } .logo-bite { z-index: 0; } .planet-tbl td { grid-column: 1/span 2; } .planet-tbl .div-chart { margin: 0px auto; } .planet-tbl #div-lgn { margin-right: auto; } .planet-tbl .div-chart { max-width: calc(100vw - 30px); max-height: calc(100vw - 30px); } } @media only screen and (max-width: 430px) { .nadi-content { display: block; } .txt-form, .signup-txt, .forgot-pass-txt { padding: 30px 20px; } .txt-form button.yoo-form-btn, .signup-txt .form-group button.btn.yoo-form-btn, .forgot-pass-txt .yoo-form button.btn.btn-primary { width: 100%; } .twelve-box { height: 320px; width: 320px; margin: 0px auto; } .astro-chart div { font-size: 10px; } } @media only screen and (max-width: 375px) { .sv-icons svg { width: 30px; height: 30px; } .sv-icons { width: 60px; height: 60px; } .star-chart { padding-left: 5px; padding-right: 5px; } }