datetime-picker-reactjs/dist/index.css

React js DateTime Picker

._xPKHQ {
  display: flex;
  flex-direction: row;
  padding: 4px;
  border-style: none none solid none;
  border-width: 1px;
  border-color: rgba(127, 127, 127, 0.1);
}
._3ld4B {
  flex-grow: 1;
  width: 36px;
  line-height: 36px;
  box-sizing: border-box;
  text-align: center;
  height: 36px;
  position: relative;
  font-weight: bold;
  font-size: 11px;
}
._2FJZg {
  padding: 4px;
}

._2qDvD {
  display: flex;
  flex-direction: row;
}

._21Nhg {
  flex-grow: 1;
  height: 32px;
  width: 36px;
  margin: 3px 0px;
  line-height: 32px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
._3VtWb {
  flex-grow: 1;
  height: 32px;
  width: 36px;
  margin: 3px 0px;
  line-height: 32px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

._3VtWb:hover {
  background-color: rgba(200, 245, 245, 0.3);
}

._1WKQ5 {
  background-color: rgba(200, 245, 245, 0.6);
  font-weight: bold;
}

._2Kbai {
  background-color: rgba(255, 251, 204, 0.6);
}

._1ZB4M {
  cursor: default;
  border: transparent;
}

._1ZB4M:hover {
  background-color: transparent;
}
._1Bb2N {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
}
._1-7Gf {
  display: flex;
  cursor: pointer;
  min-height: 1em;
  outline: 0;
  border: none;
  vertical-align: baseline;
  background: #e0e1e2 none;
  color: rgba(0,0,0,.6);
  margin: 0 .25em 0 0;
  font-weight: 700;
  line-height: 1em;
  border-radius: .28571429rem;
}
._zymfx {
  display: flex;
  min-height: 1em;
  outline: 0;
  border: none;
  background: #e0e1e2 none;
  color: rgba(0,0,0,.6);
  margin: 0 .25em 0 0;
  font-weight: 700;
  line-height: 1em;
  text-decoration: none;
  border-radius: .28571429rem;
}
._2PllU {
  cursor: pointer;
  min-height: 1em;
  outline: 0;
  background: #e0e1e2 none;
  color: rgba(0,0,0,.6);
  padding: 0.485714em 1em .48571429em;
  font-weight: 700;
  line-height: 1em;
  text-decoration: none;
  border-radius: .28571429rem;
  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
}
._xl0Wt {
  flex-shrink: 0;
  font-weight: bold;
}
._1wb_d {
  display: flex;
  align-items: center;
  padding-bottom: 0;
  width: 100%;
}

._6pSwz {
  display: flex;
  flex: 1;
}

._373hA > ._6pSwz > ._2-SKR > ._RjmkV {
  top: 90%;
  opacity: 1;
  visibility: visible;
  border: 1px solid #85b7d9;
  border-top: none;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

._373hA ._2JnCh > input {
  border-color: #85b7d9;
}

._2-SKR {
  flex: 1;
  position: relative;
}

._2JnCh {
  display: flex;
  align-items: center;
  padding: 0;
}

._2JnCh > input {
  margin: 0;
  max-width: 100%;
  text-align: left;
  line-height: 1.21428571em;
  padding:.67857143em 1em;
  background:#fff;
  border:1px solid rgba(34,36,38,.15);
  color:rgba(0,0,0,.87);
  border-radius:.28571429rem;
  transition:box-shadow .1s ease,border-color .1s ease;
  box-shadow: none;
  width: 100%;
  outline: none;
}

._2JnCh > input:focus {
  border: 1px solid #85b7d9; 
}

._RjmkV {
  max-width: 100%;
  width: 98%;
  visibility: visible;
  opacity: 0;
  border-radius: 0.2rem;
  background-color: #fffefe;
  box-shadow: none;
  transform: none;
  display: flex;
  justify-content: space-between;
  z-index: 10;
  position: absolute;
}

._RjmkV ul {
  top: 0;
  overflow-y: auto;
  padding: 0 1.0rem;
  max-height: 100px;
  list-style: none;
  width: 100%;
}

._RjmkV > ul > li {
  border-top: 1px solid #fafafa;
  outline: none;
}

._RjmkV > ul > li > a {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  line-height: 1em;
  color: rgba(0,0,0,.87);
  padding: .78571429rem 1.14285714rem!important;
  text-transform: none;
  font-weight: 400;
  text-decoration: none;
}

._RjmkV > ul > li > a:hover {
  background-color: rgba(0,0,0,.03)
}
._idw__ {
  border-style: solid none none none;
  border-width: 1px;
  border-color: rgba(127, 127, 127, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 10px;
}
._2nYnj {
  flex: 1;
  padding: 2px;
}
._3k1pV {
  flex: 1;
  padding: 2px;
}
._1O80y {
  flex-grow: 0;
  flex-shrink: 0;
  padding: 2px 8px;
}
._29w51 {
  position: relative;
  font-weight: 400;
  color:rgba(0,0,0,.87);
  font-style: normal;
  display:inline-flex;
  font-size: 11px;
}
._29w51 > input {
  margin: 0;
  max-width: 100%;
  text-align: left;
  line-height: 1.21428571em;
  padding:.67857143em 1em;
  background:#fff;
  border:1px solid rgba(34,36,38,.15);
  color:rgba(0,0,0,.87);
  border-radius:.28571429rem;
  transition:box-shadow .1s ease,border-color .1s ease;
  box-shadow: none;
  margin-bottom: 10px;
}
._29w51 > input::-webkit-input-placeholder{color:rgba(191,191,191,.87)}
._1iexG {
  position: absolute !important;
  top: 10px !important;
  right: 5px !important;
  font-size: 14px !important;
}

._2VQuT {
  display: none;
  position: absolute;
  top: 0;
  right :0;
  min-width:-webkit-min-content;
  min-width:-moz-min-content;
  min-width:min-content;
  z-index:1900;
  border:1px solid #d4d4d5;
  line-height:1.4285em;
  background:#fff;
  padding:.833em 1em;
  font-weight:400;
  font-style:normal;
  color:rgba(0,0,0,.87);
  border-radius:.28571429rem;
  box-shadow:0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.15);
  right:0;top:100%;margin-top:.5em;
  margin: 0 0 .71428571em;
  margin-right: 0;
  font-size: 11px;
}
._2VQuT:before {
  top:-.30714286em;
  left:auto;
  right:1em;
  bottom:auto;
  margin-left:0;
  box-shadow:-1px -1px 0 0 #bababc;
}
._2VQuT:before {
  position:absolute;
  content:'';
  width:.71428571em;
  height:.71428571em;
  background:#fff;
  transform:rotate(45deg);
  z-index:2;
}
._2VQuT:after {transform:scale(0)!important
}
._2VQuT input {
  font-size: 11px;
}
._1XA6L {
  display: block;
}