.custom-date-picker{position:relative;display:inline-block;font-family:Arial,sans-serif;width:100%}.date-input-wrapper{position:relative}.date-input{width:100%;padding:10px 40px 10px 10px;border:1px solid #999;border-radius:6px;font-size:16px;cursor:pointer;transition:border-color .3s,box-shadow .3s}.date-input:focus{outline:none;box-shadow:0 4px 8px rgba(0,123,255,.3)}.calendar-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:20px;color:#153969;cursor:pointer}.calendar{position:absolute;top:100%;left:0;width:100%;max-width:320px;border:1px solid #ddd;border-radius:6px;background-color:#fff;box-shadow:0 4px 8px rgba(0,0,0,.2);z-index:1000;overflow:hidden}.calendar-header{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #ddd;background-color:#f8f9fa;font-size:16px;color:#333}.calendar-nav-button{color:#153969;border:none;font-size:15px;background:#d1cfcf;cursor:pointer;transition:color .3s;padding:5px;border-radius:50px}.calendar-nav-button:hover{background-color:#153969;color:#fff}.calendar-month-year{font-weight:400;color:#153969}.calendar-body{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;padding:5px}.calendar-day,.calendar-month,.calendar-year{text-align:center;padding:10px;cursor:pointer;font-size:12px;color:#153969}.calendar-day:hover,.calendar-month:hover,.calendar-year:hover{background-color:#153969;color:#fff}.calendar-day:hover{border-radius:50px}.calendar-day.selected,.calendar-month.selected,.calendar-year.selected{background-color:#153969;color:#fff}.calendar-day.empty{background-color:transparent;cursor:default}.calendar-back-button{display:block;width:100%;padding:10px;background:none;border:none;color:#153969;cursor:pointer;font-size:16px;text-align:center;transition:color .3s}.calendar-back-button:hover{color:#153969}.month-view,.year-view{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;padding:10px}.month-view .calendar-month,.year-view .calendar-year{text-align:center;padding:10px;font-size:12px!important;cursor:pointer;transition:background-color .3s,color .3s}.month-view .calendar-month.selected,.month-view .calendar-month:hover,.year-view .calendar-year.selected,.year-view .calendar-year:hover{background-color:#153969;color:#fff;border-radius:10px}.arrow{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #153969;transform:rotate(45deg);margin-top:-15px}