:root {
      --drp-primary: #ff385c;
      --drp-primary-light: rgba(255, 56, 92, 0.12);
      --drp-border: #ddd;
      --drp-text: #222;
      --drp-muted: #999;
      --drp-bg: #fff;
      --drp-radius: 16px;
      --drp-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
	  --grey:#666;
	  --dark-grey:#333
    }

	.dates-wrapper {
		display: flex;
		justify-content: space-between;
		width: 200px;
		align-items: center;
	}

    ::placeholder,
    .field {

      color: var(--drp-text);
	  cursor:pointer; text-align:left
    }

    .calendar-icon {
      margin-left: 10px;
      font-size: 24px;
      color: var(--grey);
    }

    .drp-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 700px;            /* 👈 control width here */
  max-width: calc(100vw - 20px);

  z-index: 9999;
  background: var(--drp-bg);
  border-radius: var(--drp-radius);
  box-shadow: var(--drp-shadow);
  padding: 16px 18px 12px;

  display: none;

  max-height: 80vh;
  overflow-y: auto;
}

   .drp-panel i.close2 {
		position: absolute;
		right: 3px;
		top: 5px;
		font-size: 22px;
		cursor: pointer;
		color: #aaa;z-index:100
	}

   .drp-panel.open {
		display: block;

	}
	
	.dch{padding:0 10px}

    /* NEW: Global header with month/year selects */
    .drp-header-global {
      display: flex;
      justify-content: space-between;
      align-items: center;
     
      margin-bottom: 10px;
    }

    .drp-header-global select:last-of-type {margin-right:30px}
    .drp-header-global select {
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid var(--drp-border);
      font-size: 12px;
      background: #fafafa;
      cursor: pointer;
	  width:42%;
    }

   .drp-calendars {
		display: flex;
		justify-content: space-between;
	} 
    

    .drp-calendar {
      width: 47%;
    }

   .drp-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}

    .drp-month-label {
      font-weight: 600;
      font-size: 14px;
    }

    .drp-nav-btn i {
     
      color:var(--grey);
		font-size:28px;
		transition:.4s !important;
    }
	
	[data-role="prev-month"]{margin-right:10px}
	
    .drp-nav-btn,
    .drp-nav-btn:hover{background:transparent !important}
    .drp-nav-btn:hover i{
      color:var(--red) !important;opacity:1 !important);
    }

    .drp-weekdays,
    .drp-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      font-size: 11px;
    }

    .drp-weekday {
      text-align: center;
      padding: 6px 0;
      color: var(--drp-muted);
      text-transform: uppercase;
    }

    .drp-day {
      position: relative;
      text-align: center;
      padding: 6px 0;
      font-size: 13px;
      cursor: pointer;
      z-index: 2;
      user-select: none;
    }

    .drp-day.disabled {
      color: #ccc;
      cursor: default;
    }

    .drp-day-inner {
      position: relative;
      z-index: 3;
      height: 28px;
      width: 28px;
      line-height: 28px;
      border-radius: 999px;
      margin: 0 auto;
      transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    }

    .drp-day:not(.disabled):hover .drp-day-inner {
      background: var(--drp-primary-light);
      transform: translateY(-1px);
    }

    .drp-day-range {
      position: absolute;
      inset: 0;
      background: var(--drp-primary-light);
      z-index: 1;
      opacity: 0;
    }

    .drp-day-start .drp-day-inner,
    .drp-day-end .drp-day-inner {
      background: var(--drp-primary);
      color: #fff;
    }

    .drp-day-single .drp-day-inner {
      background: var(--drp-primary);
      color: #fff;
    }

    .drp-day-start .drp-day-range {
      border-top-left-radius: 999px;
      border-bottom-left-radius: 999px;
    }

    .drp-day-end .drp-day-range {
      border-top-right-radius: 999px;
      border-bottom-right-radius: 999px;
    }

	#prompt{text-align:center}
    .drp-clear {background:#333;}
    .drp-footer .btn{height:40px;font-size:14px}
    .drp-footer {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      color: var(--drp-muted);
    }

 

   

   /*  .drp-apply:hover {
      background: #e02547;
      transform: translateY(-0.5px);
    }

    .drp-apply:disabled {
      background: #f1a0b0;
      cursor: default;
      transform: none;
    } */

@media (max-width: 450px) {

	.drp-panel {width:100%}
	
	.drp-calendar {
		width: 100%;
	}
	
	.drp-calendars {
		flex-direction: column;
	}
	
	.calendar-from{border-bottom:1px #333 dotted}
}