/* @media (max-width:1920px) and (min-width:1601px){
    .page_content {
        padding: 0px 23rem;
    }
}
@media (max-width:1600px) and (min-width:1400px){
    .page_content {
        padding: 0px 14rem;
    }
} */
@media (max-width:1199px){
    .dropdown_table .label {
        padding-right: 15px;
    }
    #showMoon svg {
        width: 50px;
    }
    .arrow {
        right: 30px;
    }
    .calendar_2024 , .calendar_2025{
        display: none !important;
    }
    .calendar_2022{
        display: block;
    }
    .calendar_inner{
        width: 48%;
    }
    .col_center_side{
        border: 0 !important;
    }
    .slide_three{
        display: block !important;
    }
    .col_left_side , .col_center_side {
       width: 25%;
       margin: unset;
       padding: 0;
    }
    .col_right_side{
        padding: 0;
    }
    .selectInner select {
        width: 63%;
    }
}
@media (max-width:969px){
    /* .page_content{
        padding: 0 3rem;
    } */
    .selectInner select {
        width: 76%;
    }
    .month_title{
        padding-right: 4px;
    }
}
@media (max-width:905px){
    .col_right_side {
        width: 35%;
    }
    .getPhase{
        padding: 12px 56px;
    }
    .resetPhase{
        padding: 12px 46px;
    }
    .selectInner select {
        width: 74%;
    }
}
@media (max-width:789px){
    .main_row_grid{
        display: flex;
        flex-wrap: wrap;
    }
    .col_left_side {
        width: 50%;
    }
    .col_right_side {
        width: 100%;
        padding-top: 50px;
    }
    .moon_title{
        text-align: center;
    }
    .col_center_side {
        width: 48%;
        margin: 0 auto;
        border-right: 0;
    }
    .calendar_inner{
        width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 20px 0px;
    }
    .main_calendar{
        display: block;
    }
    .moon_calendar {
        justify-content: center;
        display: flex;
        padding: 20px 0px;
    }
    .moon_title{
        font-size: 18px;
    }
    .moon_content h2{
        padding: 20px 0px;
    }
    .moon-content-col-title h2{
        padding: 20px 0px;
    }
    
    
    div#month_list ,  div#day_list  ,  div#year_list  {
        width: 80%;
    }
}
@media (max-width:601px){
    .dropdown_table .label{
        width: 20% !important;
        flex-shrink: 0;
    }
}
@media (max-width:575px){
    .main_row_grid{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 0 !important;
    }
    .col_left_side {
        width: 100%;
        order: 2;
    }
    .col_right_side {
        width: 100%;
        order: 3;
        padding: 0 !important;
        position: relative;
        top: -70px;
    }
    .col_center_side {
        width: 100%;
        order: 1;
        margin: 0 auto;
    }
    .col_left_side{
        position: relative;
        top: -170px;
    }
    #moonphase_container{
        z-index: -1;
    }
    .mainCaluclate{
        padding-top: 30px !important;
    }
    /* #showMoon div{
        padding: 25px !important;
        text-align: center;
    }
    .moon_circle{
        width: 30%;
        height: 30%;
    } */
    /* #fond img {
        width: 88% !important;
    } */
    div#month_list ,  div#day_list  ,  div#year_list  {
        width: 100%;
    }
}
@media (max-width:480px){
    .main_row_grid{
        width: 100% !important;
    }
    .main_calendar{
        width: 100% !important;
    }
    /* .page_content{
        padding: 0 2rem;
    } */
    .col_left_side {
        top: -130px;
    }
}
@media (max-width:375px){
    .col_left_side {
        position: relative;
        top: -100px;
    }
    .col_right_side {
        position: relative;
        /* top: -50px; */
    }
    /* .banner_img{
        display: none;
    } */
    .banner_img{
        display: block;
        background: url('https://www.erwinsattler.com/wp-content/uploads/2022/09/mobile_banner.png') !important;
        width: 100% !important;
    }
    .banner_img::after {
        padding-bottom: 0px;
    }
    /* .mobile_img::after{
        content: '';
        display: block;
        padding-bottom: 24%;
    } */
    .moon_content{
        display: none;
    }
    .main_select {
        width: 100%;
        text-align: center;
    }
    .mainCaluclate {
        text-align: center;
    }
    .moon_title {
        color: #CC9900;
        border-bottom: 1px solid #000;
    }
    .selectInner select {
        width: 50%;
    }
    .calculate_button{
        padding: 0 !important;
    }
    .reset_button{
        padding: 0 !important;
    }
    .calculate_button a.btn{
        display: block;
    }
    .reset_button a{
        display: block;
    }
    .moon_content h2{
        padding: 30px 0px;
    }
    
    .moon-content-col-title h2{
        padding: 30px 0px;
    }
}
@media (max-width:320px){
    .col_left_side {
        top: -80px;
    }
    .col_right_side {
        top: -50px;
    }
}