@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes popIn {
    from {
        opacity: 0;
        -webkit-transform: scale(.8);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

.rtl {
    direction: rtl
}

.pdp-dark {
    position: absolute;
    display: inline-block;
    direction: rtl;
    font-family: 'iransans-light', sans-serif;
    color: #ecf0f1;
    background-color: #2c3e50;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    z-index: 9999999999999999;
    width: 294px;
    overflow: hidden;
}

.pdp-dark ::-webkit-scrollbar {
    width: 8px;
}

.pdp-dark ::-webkit-scrollbar-track {
    background: #34495e;
}

.pdp-dark ::-webkit-scrollbar-thumb {
    background-color: #3498db;
    border-radius: 10px;
}

.pdp-dark ::selection {
    background-color: #3498db;
    color: #ffffff;
}

.pdp-dark .pdp-header {
    background-color: #34495e;
    padding: 20px 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pdp-dark .monthYear {
    text-align: center;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    flex-grow: 1;
}

.pdp-dark .monthYear:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.monthYear span {
    font-size: 14px !important;
    font-weight: 600;
}

.pdp-dark .nextArrow, .pdp-dark .prevArrow {
    cursor: pointer;
    font-size: 20px;
    padding: 0 8px;
    border-radius: 50%;
    transition: color 0.2s ease;
}

.pdp-dark .nextArrow:hover, .pdp-dark .prevArrow:hover {
    color: #3498db;
}

.pdp-dark .yearSelect, .pdp-dark .monthSelect {
    font: normal 13px 'iransans-light';
    background: #34495e;
    border: 1px solid #2c3e50;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    list-style: none;
    position: absolute;
    padding: 5px;
    width: 96%;
    left: 2%;
    text-align: center;
    z-index: 9999;
    animation: popIn 0.2s ease-out;
    -webkit-animation: popIn 0.2s ease-out;
    margin: 5px auto 0;
    border-radius: 6px;
}

.pdp-dark .yearSelect {
    overflow-y: auto;
    direction: ltr;
    max-height: 200px;
}

.pdp-dark .yearSelect li, .pdp-dark .monthSelect li {
    padding: 8px 5px;
    cursor: pointer;
    display: inline-block;
    width: 30%;
    text-align: center;
    border-radius: 4px;
    margin: 1%;
    transition: all 0.2s ease;
}

.pdp-dark .yearSelect li {
    width: 22%;
}

.pdp-dark .yearSelect li:hover, .pdp-dark .monthSelect li:hover {
    background: #3498db;
    color: #ffffff;
}

.pdp-dark .selected {
    background: #2980b9;
    color: #ffffff;
}

.pdp-dark .monthSelect li.desableMonth, .pdp-dark .monthSelect li.desableMonth:hover {
    color: #7f8c8d;
    background: transparent;
    cursor: not-allowed;
}

.pdp-dark .cell {
    display: inline-block;
    width: 13% !important;
    height: 22px !important;
    line-height: 1.4 !important;
    text-align: center;
    cursor: default;
    border-radius: 4px;
    margin: 1px;
    box-sizing: border-box;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.pdp-dark .dows {
    padding: 5px 0;
    text-align: center;
}

.pdp-dark .dow {
    font: bold 13px 'iransans-light', sans-serif;
    color: #95a5a6;
}

.pdp-dark .days {
    padding: 0 5px 5px 5px;
    text-align: center;
}

.pdp-dark .day:hover {
    background: #34495e;
    border: 1px solid #3498db;
    line-height: 33px;
}

.pdp-dark .selday, .pdp-dark .selday:hover {
    background: #e67e22;
    border: 1px solid #d35400;
    color: #ffffff;
    font-weight: bold;
    transform: scale(1.05);
    line-height: 33px;
}

.pdp-dark .today, .pdp-dark .today:hover {
    background: #3498db;
    border: 1px solid #2980b9;
    color: #ffffff;
    font-weight: bold;
    line-height: 33px;
}

.pdp-dark .friday {
    color: #e74c3c;
}

.pdp-dark .nul {
    background: transparent;
}

.pdp-dark .disday, .pdp-dark .disday:hover {
    color: #7f8c8d;
    background: transparent;
    cursor: not-allowed;
    text-decoration: line-through;
    transform: none;
    border: none;
    line-height: 35px;
}

.pdp-dark .pdp-footer {
    background: #34495e;
    text-align: center;
    padding: 8px 0;
    height: auto !important;
}

.pdp-dark .pdp-footer .goToday {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.pdp-dark .pdp-footer .goToday:hover {
    background-color: #3498db;
    color: #ffffff;
}