/*
The jQuery UI Month Picker Version 3.0.4
https://github.com/KidSysco/jquery-ui-month-picker/

Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see
<http://www.gnu.org/licenses/gpl-3.0.txt>.
*/

.month-picker {
    display: none;
    width: 260px;
    height: auto;
    min-height: 200px;
    margin: 2px 0 0 -9px;
    padding: 15px 10px 10px 10px;
    border: 1px solid #d7d7d7;
    background-color: #fff;
    position: absolute;
    z-index: 9999;
}

.month-picker table {
    border-collapse: separate;
    border-spacing: 2px 2px;
    width: 100%;
    margin: 10px 0 auto;
    font-size: 12.5px;
}

.month-picker td {
    padding: 0px;
    height: 35px;
    text-align: center;
}

.month-picker-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 3px 8px 3px !important;
    position: relative !important;
    height: 35px !important;
    min-height: unset !important;
}

.month-picker-year-table,
.month-picker-year-table tr,
.month-picker-year-table td {
    margin: 0 !important;
    padding: 0 !important;
    border-spacing: 0 !important;
    height: 35px !important;
}

.month-picker-title {
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.month-picker-title-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
}

.month-picker-title .ui-button {
    width: auto;
    height: auto;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    background: none;
    border: none;
    box-shadow: none;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-picker-year-table a {
    border: 1px solid transparent;
}

.month-picker-year-table .ui-button {
    font-size: 1.1em;
    width: 1.5em;
    height: 1.5em;
    cursor: default;
    margin: 0;
}

.month-picker-year-table .month-picker-title {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    color: #333;
}

.month-picker-year-table .month-picker-title .ui-button {
    font-size: 1em;
    padding: .1em 0;
    width: 100%;
    font-weight: bold;
}

.month-picker-year-table .ui-button-text {
    padding: 0;
}

.month-picker-month-table td {
    height: 35px;
    text-align: center;
    padding: 2px 0;
}

.month-picker-month-table .ui-button {
    width: 4.2em;
    margin: 4px 3px; /* 월 버튼 위아래 여백 추가 */
    display: block;
    width: 60px;
    height: 30px;
    margin: 0px 3px;
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    background-color: #fff;
    border: 1px solid #d7d7d7;
    color: #333;
    text-decoration: none;
    font-size: 12px;
}

.month-picker-month-table .ui-button:hover {
    background-color: rgba(3, 144, 213, 0.08);
    text-decoration: none;
    border-color: #0390d5;
}

.month-picker-month-table .ui-button:focus {
    outline: 2px solid #222;
}

.month-picker-month-table .ui-button.ui-state-active {
    background-color: #0b7eb7;
    color: #fff;
    border-color: #0b7eb7;
}
.month-picker-month-table .ui-button.ui-state-active  .ui-button-text { color: #fff; }

.month-picker-open-button {
    height: 20px;
    width: 20px;
    vertical-align: bottom;
}

.month-picker-invalid-message {
    display: none;
    background-color: Yellow;
}

.month-picker-disabled {
    background-color: #e1e1e1;
}

/*
Prevents the button labels from maving sligtly to the left
when applying the width CSS property to the buttons.
See: .month-picker-month-table button { width: 4.3em; }
*/
.month-picker .ui-button-text {
    padding: .4em 0;
    color: #005098;
}

/*
The plugin uses buttons with a transparent background in the year-table
(aka header) in order to look consistent with jQuery UI datepicker and to
make the year title a button that blends into the heading in the default state.

The plugin does this by removing the .ui-state-default class from (in monthpicker.js)
the a tags (buttons) which also ends up removing the 1px border that it applies.

To prevent the button from resizing and moving everything around when you hover
in and out, we use a carefully constructed selector, which gets overroden by the
more specific .ui-state-hover/actove class selectors in the jquery-ui.css
that apply the visible borders that we want.

This selector applies a 1px transparent border that keeps the button
in the same size, but it doesen't hide the borders that .ui-state-hover/actove give us.
*/

/*
Sets the size of the next/previous buttons,
and makes the buttons in the heading (year-table) sligtly bigger,
and removes the pointer cursor from the buttons in the heading (year-table).
*/

/*
The buttons in the heading (year-table) are slightly shrinked, but because jQuery ui and
the .month-picker .ui-button-text rule at the top of this CSS file apply some
padding which results in the button text being moved to the bottom of
the button.

This rule removes the unnecessary padding so the text in
the jump years button will be vericaly centred.
*/

/*
Makes sure the buttons stay in the same size when swithching
to the Jump years menu.
this also ensures that the entire menu dosen't resize itself
in response to the slightly bigger buttons in the Jump years menu.
 */

.month-date-box {
    display: inline-flex;
    align-items: center;
    width: 140px;
    height: 35px;
    padding: 0 10px;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    cursor: pointer;
    background-color: #fff;
}

.month-date-box:focus-within {
    outline: 2px solid #222;
}

.month-date-box input[type="text"] {
    width: calc(100% - 23px);
    height: 33px;
    padding: 4px 0;
    border: none;
    outline: 0;
    background-color: transparent;
    cursor: pointer;
}

.month-date-box + em {
    margin: 0 5px;
}

/* Fix: jQuery UI base CSS 미포함 시 prev/next 텍스트 노출 방지 및 아이콘 대체 렌더링 */
.month-picker .ui-button-icon-primary {
    width: 16px;
    height: 16px;
    text-indent: -9999px; /* hide 'Prev'/'Next' text */
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.month-picker-previous > a .ui-button-icon-primary::before,
.month-picker-next > a .ui-button-icon-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border: solid #444;
    border-width: 0 2px 2px 0;
    display: inline-block;
    transform-origin: center;
}

.month-picker-previous > a .ui-button-icon-primary::before { /* left arrow */
    transform: translate(-50%, -50%) rotate(135deg);
}

.month-picker-next > a .ui-button-icon-primary::before { /* right arrow */
    transform: translate(-50%, -50%) rotate(-45deg);
}