.sp-container{
max-width:1000px;
margin:auto;
font-family:Arial, sans-serif;
text-align:center;
}

.sp-title{
margin-bottom:10px;
}

.mobile-note{
font-size:13px;
color:#666;
margin-bottom:10px;
}

/* table wrapper */

.astro-table-wrapper{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
margin-bottom:20px;
}

#spTable{
min-width:720px;
border-collapse:collapse;
}

#spTable th,
#spTable td{
border:1px solid #ccc;
padding:6px;
text-align:center;
}

/* tatwa colors */

.fire{background:#ffe5e5;}
.earth{background:#e8f5e9;}
.air{background:#fff3e0;}
.water{background:#e3f2fd;}

/* INPUT BOX FIX */

#spTable input{

width:48px;
height:42px;

font-size:18px;
font-weight:600;

text-align:center;

line-height:42px;

padding:0;

border-radius:10px;
border:1px solid #d0d0d0;

background:#ffffff;
color:#222;

display:block;
margin:auto;

}

/* remove number arrows */

#spTable input::-webkit-outer-spin-button,
#spTable input::-webkit-inner-spin-button{
-webkit-appearance:none;
margin:0;
}

#spTable input[type=number]{
-moz-appearance:textfield;
}

/* sticky sign column */

#spTable td:first-child,
#spTable th:first-child{
position:sticky;
left:0;
background:#ffffff;
z-index:2;
}

/* button */

.calc-btn{
padding:12px 25px;
background:#f4b400;
border:none;
border-radius:8px;
font-weight:bold;
cursor:pointer;
margin-top:15px;
}

@media (max-width:768px){

#spTable input{

width:46px;
height:44px;

font-size:20px;

line-height:44px;

}

}
.reset-btn{
padding:12px 20px;
margin-left:10px;
background:#ddd;
border:none;
border-radius:8px;
cursor:pointer;
}

.sign-name{
font-weight:600;
}
#spTable input:focus{

border-color:#f4b400;

box-shadow:0 0 5px rgba(244,180,0,0.5);

}