react-weblineindia-date-picker/dist/index.css

ReactJS based Custom Datepicker component to select date.

._FEqZ5 {
    position: relative;
    display: inline-block;
}

._FEqZ5 ._BBqEO {
    position: absolute;
    height: 100%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    width: 2em;
    border-left: 0 none;
}

._FEqZ5 ._BBqEO:enabled:hover,
._FEqZ5 ._BBqEO:focus {
    border-left: 0 none;
}

._FEqZ5 ._bMWAJ {
    min-width: 100%;
}

/* Fluid */
._2-SEM ._FEqZ5 {
    width: 100%;
}

._2-SEM ._BBqEO {
    width: 2em;
}

._2-SEM ._17Ent button {
    width: auto;
}

._2-SEM ._FEqZ5._3_C0H ._10eAo {
    width: calc(100% - 2em);
}

/* Datepicker */
._bMWAJ {
	width: auto;
	padding: .2em;
	display: none;
    position: absolute;
}

._bMWAJ._37pKp {
    display: inline-block;
    position: static;
}

._bMWAJ ._3GORf {
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}

/* Header */
._bMWAJ ._3VTu4 {
	position: relative;
	padding: .5em 0;
}
._bMWAJ ._2M4uH,
._bMWAJ ._1AWyU {
	position: absolute;
	top: .5em;
	width: 1.8em;
    height: 1.8em;
    cursor: pointer;
}

._bMWAJ ._2M4uH {
	left: .125em;
}
._bMWAJ ._1AWyU {
	right: .125em;
}

._bMWAJ ._2M4uH span,
._bMWAJ ._1AWyU span {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
    margin-top: -.5em;
    margin-left: -.5em;
}

._bMWAJ ._3PWBO {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
._bMWAJ ._3PWBO select {
	font-size: 1em;
	margin: .125em 0;
    vertical-align: middle;
}
._bMWAJ select._1G0fZ {
    margin-right: .25em;
}
._bMWAJ span._1eUF2 {
	margin-left: .25em;
}

/* Multiple Month DatePicker */
._BT3iS ._3GORf {
    display: table-cell;
    border-left-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    border-right-width: 1px;
}

/* DatePicker Table */
._bMWAJ table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
._bMWAJ th {
	padding: .5em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
._bMWAJ td {
	border: 0;
	padding: 0;
}
._bMWAJ td > span,
._bMWAJ td > a {
	display: block;
	padding: .5em;
	text-align: right;
	text-decoration: none;
}

._bMWAJ td a {
    cursor: pointer;
}

._bMWAJ ._17Ent,
._bMWAJ ._AcVE6 {
	padding: .5em;
}

._bMWAJ ._17Ent:after {
    content: "";
    display: table;
    clear: both;
}

._bMWAJ ._17Ent > button:last-child {
    float: right;
}

._FEqZ5._3_C0H input {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* Month Picker */
._1yhKs ._3bunm {
    width: 33.3%;
    display: inline-block;
    text-align: center;
    padding: .5em;
    cursor: pointer;
}

._3AYtQ select._1eUF2 {
    width: auto;
}

/* Time Picker */
._2t68- {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: .5em 0;
}

._2t68- > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: .5em;
    min-width: 1.5em;
}

._2t68- > ._337ot,
._2t68- > ._1gqCd,
._2t68- > ._6Dyte {
    margin-left: 0;
}

._2t68- > ._3krjc {
    margin-left: 0px;
    min-width: .75em;
}

._2t68- > ._3krjc ._17ERI {
    visibility: hidden;
    display: block;
}

._2t68- > ._3krjc ._17ERI:last-child {
    margin-top: .3em;
}

._2t68- > div button {
    display: block;
    cursor: pointer;
}

._2t68- > div button:last-child {
    margin-top: .3em;
}

input[type=text]::-ms-clear {
    display: none;
}

/* Touch UI */
._19zMu,
._FEqZ5 ._19zMu {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 80vw;
    transform: translate(-50%, -50%);
}

._19zMu._bMWAJ th {
	padding: 2em 0;
}
._19zMu._bMWAJ td {
	padding: 0;
}
._19zMu._bMWAJ td span,
._19zMu._bMWAJ td a {
	padding: 2em 0;
}

._19zMu ._2t68- {
    padding: 1em 0;
}

._19zMu ._2t68- > div a {
    font-size: 2em;
}

._1HGaX {
    position: fixed;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 40em) {
    ._BT3iS {
        width: 17em;
        overflow: auto;
    }

    ._19zMu._bMWAJ th {
        padding: 1em 0;
    }

    ._19zMu._bMWAJ td span,
    ._19zMu._bMWAJ td a {
        padding: 1em 0;
    }
}