/* defaults */

    .date-picker, .date-picker * {
    	margin: 0;
    	padding: 0;
    	box-sizing: border-box;
    	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    }
    
    .date-picker button {
    	border: none;
    	background-color: transparent !important;
    }
    
    .date-picker button:focus {
    	outline: none;
    }

/* end of defaults */

/* container */

    .date-picker {
    	position: relative;
    	width: 100%;
    	user-select: none;
    	overflow: hidden;
    }

/* end of container */

/* input */

    .date-picker-input {
        position: absolute;
        top: -100%;
        z-index: -99;
    }

/* end of input */

/* arrow */

    .date-picker-arrow {
        padding: 0 10px;
        transition: color 0.6s ease, fill 0.6s ease;
        background-color: transparent;
        border: none;
    }
    
    .date-picker-arrow svg {
    	width: 24px;
        height: 24px;
        fill: #000;
        transition: fill 0.6s ease;
    }
    
    .date-picker-arrow:hover svg, .date-picker-arrow:focus svg {
    	fill: #4484f4;
    }

/* end of arrow */

/* calendar */

    .date-picker-calendar {
    	padding: 0 20px 0 0;
    	width: 100%;
    	height: 100%;
    	transition: height 0.6s ease;
    }
    
    .display-date-picker-calendar {
    	display: block;
    }

/* end of calendar */

/* controls */

    .date-picker-controls {
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	padding-left: 15px;
    }
    
    .date-picker-controls .arrow {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	cursor: pointer;
    	background-color: transparent;
    	font-weight: bold;
    }
    
    .date-picker-month-and-year-controls, .date-picker-previous-and-next-arrow-controls {
    	display: flex;
    }
    
    .date-picker-month-controls, .date-picker-year-controls {
    	position: relative;
    }
    
    .date-picker-month-controls-text, .date-picker-year-controls-text {
    	display: block;
    	text-align: center;
    	margin: 0;
    	height: 45px;
    	line-height: 45px;
    	font-size: 16px;
    	font-weight: 600;
    	cursor: pointer;
    	transition: opacity 0.6s, color 0.6s;
    	color: #000 !important;
    }
    
    .date-picker-month-controls-text:hover, .date-picker-year-controls-text:hover, .date-picker-month-controls-text:focus, .date-picker-year-controls-text:focus {
        opacity: 0.6;
        color: #4484f4 !important;
    }
    
    .date-picker-month-controls-text {
    	margin-right: 10px;
    }
    
    .date-picker-year-controls-text {
    	width: 50px;
    }

/* end of controls */

/* month and year options */

    /* container */
    
        .date-picker-month-options, .date-picker-year-options {
        	position: absolute;
        	top: 2px;
        	left: 0;
        	background-color: #fff;
        	overflow: hidden;
        	overflow-y: auto;
        	border-radius: 0 0 4px 4px;
        	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
        	z-index: 2;
        	height: 200px;
        }
        
        .date-picker-month-options::-webkit-scrollbar, .date-picker-year-options::-webkit-scrollbar {
            width: 10px;
        }
            
            
        .date-picker-month-options::-webkit-scrollbar-track, .date-picker-year-options::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 90px;
        }
             
            
        .date-picker-month-options::-webkit-scrollbar-thumb, .date-picker-year-options::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 90px;
            transition: background 0.6s
        }
            
            
        .date-picker-month-options::-webkit-scrollbar-thumb:hover, .date-picker-year-options::-webkit-scrollbar-thumb:hover {
            background: #555; 
        }        
        
        .date-picker-month-options.date-picker-hide, .date-picker-year-options.date-picker-hide {
        	display: none;
        }
        
        .date-picker-month-options {
        	width: 110px;	
        }
        
        .date-picker-year-options {
        	width: 70px;
        }
    
    /* end of container */
    
    .date-picker-month-option, .date-picker-year-option {
    	display: block;
    	padding: 14px 16px;
    	font-size: 16px;
    	line-height: 22px;
    	color: #666 !important;
    	cursor: pointer;
    	transition: color 0.6s ease, opacity 0.6s ease;
    	width: 100%;
    	text-align: left;
    }
    
    .date-picker-month-option:hover, .date-picker-year-option:hover, .date-picker-month-option:focus, .date-picker-year-option:focus {
    	color: #4484f4 !important;
    }
    
    .date-picker-month-option.date-picker-selected, 
    .date-picker-month-option.date-picker-selected:hover,
    .date-picker-year-option.date-picker-selected, 
    .date-picker-year-option.date-picker-selected:hover {
    	background-color: #4484f4;
    	color: #fff;
    	font-weight: 500;
    }
    
    .date-picker-year-option.date-picker-selected:focus, .date-picker-month-option.date-picker-selected:focus {
        opacity: 0.6;
    }

/* end of month and year options */

/* days and weekdays */

    .date-picker-days,  .date-picker-weekdays {
    	display: grid;
    	grid-template-columns: repeat(7, 1fr);
    	grid-row-gap: 5px;
    }
    
    .date-picker-day, .date-picker-weekday { 
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	padding: 10px 5px;
    	text-align: center;
    	vertical-align: middle;
    	font-size: 16px;
    	width: 40px;
    	height: 40px;
    	line-height: 40px;
    	margin: auto;
    }
    
    .date-picker-weekday {
    	font-weight: 600;
    	color: #000;
    }
    
    .date-picker-day {
    	background-color: transparent;
    	border-radius: 50%;
    	transition: background-color 0.6s ease, color 0.6s ease, box-shadow 0.6s ease;
    	color: #666 !important;
    	border: none;
    	cursor: default;
    }
    
    .date-picker-day.date-picker-hasDay {
    	cursor: pointer;
    }
    
    .date-picker-day.date-picker-hasDay:hover, .date-picker-day.date-picker-hasDay:focus {
    	background-color: #eee !important;
    }
    
    .date-picker-day.date-picker-selected,
    .date-picker .date-picker-day.date-picker-selected.date-picker-today,
    .date-picker-day.date-picker-selected:hover {
    	background-color: #4484f4 !important;
    	color: #fff !important;
    	box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.3);
    	font-weight: 500;
    }
    
    .date-picker-day.date-picker-selected:focus, .date-picker .date-picker-day.date-picker-selected.date-picker-today:focus {
        box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.6);
    }
    
    .date-picker-day.date-picker-today {
    	color: #8099fd !important;
    	font-weight: 500;
    }
    
    .date-picker-day.date-picker-disable, .date-picker-day.date-picker-disable:hover, .date-picker-day.date-picker-disable:focus {
    	opacity: 0.4;
    	background-color: #fff !important;
    	cursor: default;
    }

/* end of days and weekdays */

/* loader */

    .date-picker-loader-container {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        background-color: rgba(255,255,255,0.7);
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .date-picker-loader-container.date-picker-hide {
        display: none;
    }
    
    .date-picker-loader {
        width: 30px;
        height: 30px;
        cursor: default;
        border-radius: 50%;
        position: relative;
        margin: auto;
        border: 3px #4484f4 solid;
        border-right-color: transparent;
        -webkit-animation: date-picker-spin 2s linear infinite;
        -moz-animation: date-picker-spin 2s linear infinite;
        animation: date-picker-spin 2s linear infinite; 
    }

/* end of loader */

/* read-only overlay */

    .date-picker-readonly-overlay {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        background-color: rgba(255,255,255,0.7);
        z-index: 11;    
    }

/* end of read-only overlay */

/* alert */

    .date-picker-alert-overlay {
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 12;
        transition: ease 0.6s top;
        background-color: #fff;
        background-color: rgba(255,255,255,0.7);
    }
    
    .date-picker-alert-overlay.date-picker-hide {
        display: none;
    }
    
    .date-picker-alert-overlay-inner {
        text-align: left;
        background-color: #fff;
        box-shadow: rgba(0, 0, 0, 0.3) 0 1px 4px -1px;
        padding: 20px;
        width: 80%;
        border-radius: 4px;
        margin: 25% auto auto auto; 
    
    }
    
    .date-picker-alert-overlay-inner p {
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        opacity: 0.7;
        line-height: 200%;
        color: #666;
    }
    
    .date-picker-alert-overlay-inner.date-picker-animate {
      position: relative;
      -webkit-animation-name: date-picker-animatebottom;
      -webkit-animation-duration: 1s;
      -moz-animation-name: date-picker-animatebottom;
      -moz-animation-duration: 1s;
      animation-name: date-picker-animatebottom;
      animation-duration: 1s
    }

/* end of alert */

/* time slot */

    /* wrapper */
    
        .date-picker-time-slots {
            text-align: left;
            margin-top: 10px;
            max-height: 100%;
            overflow: hidden;
        }
        
        .date-picker-time-slots.date-picker-hide {
            margin-top: 0;
            max-height: 0;
        }
    
    /* end of wrapper */
    
    /* wrapper title */
    
        .date-picker-time-slots-label {
            text-align: left;
            font-size: 14px;
            font-weight: 500;
            color: #222;
            margin-left: 15px;
        }
    
    /* end of wrapper title */
    
    /* container */
    
        .date-picker-time-slots-inner {
            padding: 10px 0 5px 25px;
        }
    
    /* end of container */
    
    .date-picker-time-slots-inner .date-picker-time-slot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin: 10px 0;
        padding: 20px 15px;
        border-radius: 4px;
        overflow: hidden;
        background-color: #f1f3f4 !important;
        color: #222 !important;
        font-size: 14px;
        text-align: left;
        cursor: pointer;
        font-weight: 500;
    }
    
    .date-picker-time-slots-inner .date-picker-time-slot.date-picker-hide {
        display: none;
    }
    
    .date-picker-time-slot-icon {
        font-size: 22px;
        background-color: #4484f4;
        opacity: 0.2;
        min-width: 20px;
        height: 20px;
        color: #fff;
        border-radius: 50%;
        transition: opacity ease 0.6s, box-shadow ease 0.6s;
    }
    
    .date-picker-time-slot:hover .date-picker-time-slot-icon, 
    .date-picker-time-slot.date-picker-selected .date-picker-time-slot-icon,
    .date-picker-time-slot:focus .date-picker-time-slot-icon {
        opacity: 1;
        box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.3);
    }
    
    .date-picker-time-slot-text {
        width: 100%;
        margin-left: 15px;
        opacity: 0.6;
        transition: opacity ease 0.6s;
    }
    
    .date-picker-time-slot:hover .date-picker-time-slot-text, 
    .date-picker-time-slot.date-picker-selected .date-picker-time-slot-text,
    .date-picker-time-slot:focus .date-picker-time-slot-text {
        opacity: 1;
    }
    
    .date-picker-time-slots .date-picker-time-slots-load-more {
        text-align: center;
        display: inline-block;
        font-size: 14px;
        background-color: #fff !important;
        padding: 5px 10px;
        font-weight: 500;
        cursor: pointer;
        border: 1px #ddd solid;
        margin-left: 25px;
        border-radius: 4px;
        transition: background-color 0.6s ease;
        color: #000 !important;
    }
    
    .date-picker-time-slots .date-picker-time-slots-load-more:hover, .date-picker-time-slots .date-picker-time-slots-load-more:focus {
        background-color: #f1f3f4 !important;
    }
    
    .date-picker-time-slots .date-picker-time-slots-load-more.date-picker-disabled, 
    .date-picker-time-slots .date-picker-time-slots-load-more.date-picker-disabled:hover, 
    .date-picker-time-slots .date-picker-time-slots-load-more.date-picker-disabled:focus {
        background-color: #fff !important;
        cursor: default;
        opacity: 0.6;
    }

/* end of time slot */

/* animations */

    /* spin */
    
        @-webkit-keyframes date-picker-spin {
          0% { -webkit-transform: rotate(0deg); }
          100% { -webkit-transform: rotate(360deg); }
        }
        
        @keyframes date-picker-spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
    
    /* end of spin */
    
    /* animate bottom */
    
        @-webkit-keyframes date-picker-animatebottom {
          from { bottom:-100px; } 
          to { bottom:0; }
        }
        
        @keyframes date-picker-animatebottom { 
          from{ bottom:-100px; } 
          to{ bottom:0; }
        }
    
    /* end of animate bottom */

/* end of animations */