/* modal box  */
.modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 30vh; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
}
    
/* Modal Content */
.modal-content {
      background-color: #fefefe;
      background-color: rgba(99, 179, 245, 0.9);
      margin: auto;
      padding: 1rem;
      border: 1px solid #888;
      border-radius: 0.75rem;
      width: 70%;
}
    
/* The Close Button */
.close {
      color: rgb(247, 15, 15);
      float: right;
      font-size: 28px;
      font-weight: bold;
}
    
.close:hover,
.close:focus {
      color: rgb(245, 242, 79);
      text-decoration: none;
      cursor: pointer;
}

.colmnDisp  {
      -moz-column-count: 2;
      -moz-column-gap: 2rem;
      -webkit-column-count: 2;
      -webkit-column-gap: 2rem;
        column-count: 2;
      column-gap: 2rem;
}

.divDisp  {
      break-inside: avoid-column;
}


/**      end of modal  ***/    

.incSize  {
      font-size:x-large;
}

.hicolor  {
      background-color: rgb(155, 235, 221);
}

.hicolor:hover   {
      background-color: rgb(182, 182, 247);
      cursor: pointer;
}

.gurpurb  {
      background-color: rgb(213, 247, 193);
}

.label_cls  {
      font-size: 1.6rem;
      color: black;
      padding: 0.6rem 2rem 0.6rem 2rem;
}


.pb_date  {
      text-align: left;
      margin-left: 0.5rem;
      color: rgb(106, 19, 245);
}

.common_date  {
      text-align: right;
      margin-right: 0.5rem;
      color: rgb(247, 5, 247);
}

.date_table  {
      font-size: 1.2rem;
      font-weight: 700;
      width: 100%;
}

.hdr_line {
      background-color: rgb(194, 192, 191);
      width: 70%;
      margin: 0 auto auto 0;
      margin-left: auto;
      margin-right: auto;
}

.left_yr  {
      font-size: 1rem;
      font-weight: 600;
      color: rgb(106, 19, 245);
      padding-left: 0.25rem;
      text-align: left;
}

.right_yr  {
      font-size: 1rem;
      font-weight: 600;
      color: rgb(106, 19, 245);
      padding-right: 0.25rem;
      text-align: right;

}


.hdr_disp  {
      font-size: 2rem;
      font-weight: 900;
      color: rgb(106, 19, 245);
      text-align: center;
}

.month_table th  {
      font-weight: 900;
      color: rgb(106, 19, 245);
}

.month_table  {
      background-color: rgb(194, 192, 191);
      border: 1px solid white;
      border-collapse: collapse;
      margin: 0 auto auto 0;
      text-align: center;
      font-size: 1.5rem;
      width: 70%;
      margin-left: auto;
      margin-right: auto;
}

.month_table tr th {
      color: rgb(106, 19, 245);
      font-weight: 700;
      border: 1px solid white;
      border-collapse: collapse;
      padding: 0;
}

.month_table td  {
      border: 1px solid white;
      border-collapse: collapse;
      padding: 0;
      word-spacing: -16px;
      letter-spacing: -1px;
}

.ruti_table  {
      background-color: rgb(201, 178, 207);
      border: 3px solid green;
      border-collapse: collapse;
      margin: 0 auto auto 0;
      text-align: center;
      font-size: 1.5rem;
      margin-left: auto;
      margin-right: auto;      
}

.ruti_table td  {
      border: 1px solid green;
      border-collapse: collapse;
      padding: 5px;
      font-weight: 700;
}

.ruti_table tr th {
      color: rgb(106, 19, 245);
      font-weight: 700;
      border: 1px solid green;
      border-collapse: collapse;
      padding: 10px;
}

.ruti_caption   {
      font-size: 1.8rem;
      font-weight: 700;
      color: darkblue;
}

.tr_bsnt  {
      background-color: lightgoldenrodyellow;
}

.tr_greekhm   {
      background-color: mistyrose;
}

.tr_brs    {
      background-color: beige;
}

.tr_srd     {
      background-color: lightcyan;
}

.tr_sisiar   {
      background-color: rgb(201, 203, 238);
}

.tr_himkr   {
      background-color: rgb(194, 229, 235);
}

.td_rut  {
      font-size: 1.75rem;
}

.td_rut:hover  {
      background-color: white;
      cursor: pointer;
}

.td_mm  {
      color: #000;
}

.td_mm:hover  {
      background-color: white;
      cursor: pointer;
}

.date_main  {
      text-align: center;
      font-size: 2rem;
      color: rgb(106, 19, 245);
}
.date_sec  {
      text-align: right;
      font-size: 1rem;
      color: rgb(247, 38, 48);
}

.cal_info  {
      font-size: 2rem;
      font-weight: 700;
      padding-top: 4vh;
      padding-bottom: 0.05vh;
}

.cal_div  {
      width: 70%;
      margin: 10px auto;
}

.cal_para  {
      display: block;

      text-align: center;
      font-size: 1.5rem;
      color: rgb(160, 40, 120);
}

.hi_lite  {
      font-weight: 700;
      color: aqua;
}

@media only screen and (max-width: 900px) {
      .modal {
            padding-top: 20vh;
      }

      .hdr_line  {
            width: 74%;
      }

      .cal_div  {
            width: 75%;
            margin-left: auto;
            margin-right: auto;
      }

      .month_table  {
            width: 74%;
      }

      .month_table td  {
            word-spacing: -10px;
            letter-spacing: -1px;
      }

      .downloadBtn  {
            width: 11rem;
            height: 3.6rem;
            margin: 1.7rem;
      }

      #cal_year  {
            font-size: 1.9rem;
            padding: 1rem 2rem 1rem 2rem;
      }

      .ruti_table  {
            table-layout: auto;
            font-size: 1.0rem;
            width: 70%;
      }

      .ruti_table th  {
            font-size: 1.0rem;
      }

      .ruti_table td   {
            font-size: 1.0rem;
            margin: 0px;
            padding: 1px;
      }

      .cal_para   {
            font-size: 1.0rem;
            width: 70%;
            margin: 0px;
      }


}

@media only screen and (max-width: 768px) {
      .modal {
            padding-top: 10vh;
      }

      .modal-content  {
            width: 90%;
      }

      .left_yr  {
            font-size: 0.8rem;
      }
      .right_yr  {
            font-size: 0.8rem;
      }
      .hdr_disp   {
            font-size: 1.5rem;
      }
      .hdr_disp  {
            font-size: 1.5rem;
      }

      .month_table  {
            font-size: 1.4rem;
            width: 85%;
      }

      .cal_div  {
            width: 80%;
            font-size: 0.7rem;
            margin-left: auto;
            margin-right: auto;
      }

      .hdr_line  {
            width: 85%;
      }

      .month_table td  {
            word-spacing: -2px;
            /* letter-spacing: -1px; */
      }

      .ruti_table  {
            table-layout: auto;
            font-size: 1.2rem;
            width: 80%;
      }

      .ruti_table th  {
            font-size: 1.2rem;
      }

      .ruti_table td   {
            font-size: 1.2rem;
            margin: 0px;
            padding: 1px;
      }

      .cal_para   {
            font-size: 1.4rem;
            width: 80%;
            margin: 0px;
      }

      .ruti_caption  {
            font-size: 1.4rem;
      }

      .date_main   {
            font-size: 1.4rem;
      }
      .date_sec  {
            font-size: 0.7rem;
      }

      .downloadBtn  {
            width: 9rem;
            height: 3rem;
            margin: 1.5rem;
      }

      #cal_year  {
            font-size: 1.5rem;
            padding: 1rem 1.8rem 1rem 1.8rem;
      }

      .div_pb  {
            font-size: 1rem;
      }
      
      .div_com  {
            font-size: 1rem;
      }
      
      .label_cls  {
            font-size: 1.1rem;
      }

}


@media only screen and (max-width: 640px) {
      .modal {
            padding-top: 10vh;
      }

      .hdr_line  {
            width: 80%;
      }
      .left_yr  {
            font-size: 0.7rem;
      }
      .right_yr  {
            font-size: 0.7rem;
      }
      .hdr_disp   {
            font-size: 1.1rem;
      }
      .hdr_disp  {
            font-size: 1.1rem;
      }

      .month_table  {
            font-size: 1rem;
            width: 80%;
      }

      .month_table td  {
            word-spacing: -1px;
            /* letter-spacing: -1px; */
      }

      .ruti_table  {
            table-layout: auto;
            font-size: 1.0rem;
            width: 90%;
      }

      .ruti_table th  {
            font-size: 0.8rem;
      }

      .ruti_table td   {
            font-size: 0.8rem;
            margin: 0px;
            padding: 1px;
      }

      .cal_para   {
            font-size: 1.1rem;
            width: 90%;
            margin: 0px;
      }

      .ruti_caption  {
            font-size: 1.0rem;
      }

      .cal_div  {
            width: 90%;
            font-size: 1.2rem;
            margin-left: auto;
            margin-right: auto;
      }

      .date_main   {
            font-size: 1rem;
      }

      .date_sec  {
            font-size: 0.7rem;
      }

      .downloadBtn  {
            width: 9rem;
            height: 3.75rem;
            margin: 1.3rem;
      }

      #cal_year  {
            font-size: 1.2rem;
            padding: 0.8rem 1.4rem 0.8rem 1.4rem;
      }

      .modal-content {
            font-size: 0.8rem;
            width: 94%;
            padding: 0.5rem;
      }

      .div_pb  {
            font-size: 0.8rem;
      }
      
      .div_com  {
            font-size: 0.8rem;
      }
      
      .label_cls  {
            font-size: 1rem;
      }

}

@media only screen and (max-width: 420px) {
      .modal {
            padding-top: 10vh;
      }

      .left_yr  {
            font-size: 0.6rem;
            padding-left: 0.1;
      }
      .right_yr  {
            font-size: 0.6rem;
            padding-right: 0.1rem;
      }
      .hdr_disp   {
            font-size: 0.8rem;
      }
      .hdr_disp  {
            font-size: 1.0rem;
      }

      .hdr_line  {
            width: 100%;
      }

      .month_table  {
            background-color: rgb(221, 218, 217);
            font-size: 0.8rem;
            width: 100%;
            margin: 0px;
      }

      .ruti_table  {
            table-layout: auto;
            font-size: 0.8rem;
            width: 100%;
      }

      .month_table th  {
            font-size: 0.6rem;
      }

      .month_table td  {
            word-spacing: 1px;
            /* letter-spacing: -1px; */
      }

      .cal_div  {
            width: 100%;
            font-size: 0.7rem;
            margin-left: 0;
            margin-right: 0;
      }

      .ruti_table th  {
            font-size: 0.7rem;
      }

      .ruti_table td   {
            font-size: 0.7rem;
            margin: 0px;
            padding: 1px;
      }

      .cal_para   {
            font-size: 0.8rem;
            width: 100%;
            margin: 0px;
      }

      .ruti_caption  {
            font-size: 0.9rem;
      }

      .date_main   {
            font-size: 0.75rem;
      }

      .date_sec  {
            font-size: 0.55rem;
      }

      .downloadBtn  {
            font-size: 1rem;
            width: 7rem;
            height: 2.5rem;
            margin: 1.1rem;
      }
      #cal_year  {
            font-size: 0.8rem;
            padding: 0.8rem 1rem 0.8rem 1rem;
      }

      .modal-content {
            font-size: 0.7rem;
            width: 94%;
            padding: 0.3rem;
      }

      .div_pb  {
            font-size: 0.5rem;
      }
      
      .div_com  {
            font-size: 0.5rem;
      }
      
      .label_cls  {
            font-size: 0.9rem;
      }
}