#calendar {
  overflow: hidden;
  width: 100%;
}

#calendar div.box {
  position: relative;
  top: 0;
  left: 3px;
  height: 40px;
  width: calc(100% - 6px);
  background-color: #06364A;
}

#calendar div.header {
  line-height: 40px;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  text-align: center;
}

#selected li {
  background: #f1f1f1;
  padding: 5px 10px;
  margin: 0;
  border-bottom: 3px solid white;
}

#calendar div.header a.next,
#calendar div.header a.prev {
  transition: .3s ease all;
  position: absolute;
  top: 0;
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: #FFFFFF;
  background: #06364a;
  height: 100%;
  width: 40px;
}

#calendar div.header a.next:focus,
#calendar div.header a.prev:focus,
#calendar div.header a.next:hover,
#calendar div.header a.prev:hover {
  background: #042532;
}

#calendar div.header .title {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: bold;
}

#calendar div.header a.prev {
  left: 0;
}

#calendar div.header a.next {
  right: 0;
}

#calendar ul.days {
  float: left;
  margin: 6px 0 0 0;
  padding: 0;
  width: 100%;
}

#calendar ul.days li {
  margin: 0 3px;
  padding: 0;
  float: left;
  list-style-type: none;
  width: calc(100% / 7 - 6px);
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  font-size: 15px;
  background-color: #06364A;
  color: white;
}

#calendar ul.dates {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
}

#calendar ul.dates li {
  margin: 0 3px;
  padding: 0;
  margin-top: 6px;
  line-height: 50px;
  vertical-align: middle;
  float: left;
  list-style-type: none;
  width: calc(100% / 7 - 6px);
  height: 50px;
  font-size: 15px;
  background-color: #eee;
  color: #06364A;
  text-align: center;
}

body.wp-admin #calendar ul.dates li {
  cursor: pointer;
}

body.wp-admin #calendar ul.dates li.selected {
  box-shadow: inset 0 0 0 3px #06364A;
  font-weight: bold;
}

.end {
  background: rgba(247, 104, 101, 0.6) !important;
}

.change0 {
  background: rgba(17, 154, 27, 0.6) !important;
}

.change1 {
  background: rgba(0, 101, 140, 0.6) !important;
}

.change2 {
  background: rgba(255, 202, 69, 0.6) !important;
}

.change3 {
  background: rgba(191, 85, 236, 0.6) !important;
}

.change4 {
  background: rgba(121, 85, 72, 0.6) !important;
}

.change5 {
  background: rgba(80, 227, 194, 0.6) !important;
}

.change6 {
  background: rgba(240, 147, 43, 0.6) !important;
}

.change7 {
  background: rgba(247, 104, 101, 0.6) !important;
}

.change8 {
  background: rgba(94, 53, 177, 0.6) !important;
}

.change9 {
  background: rgba(13, 195, 255, 0.6) !important;
}


.mask {
  background: #eee !important;
  cursor: none;
}

#calendar.front .today {
  box-shadow: inset 0 0 0 3px #06364A;
  font-weight: bold;
}

.content-box {
  max-width: 862px;
  background: white;
  padding: 30px;
  border: 1px solid #eee;
  margin: 0;
}

#legenda {
  width: 100%;
  max-width: 520px;
  background: white;
  padding: 30px 30px 25px;
  border: 1px solid #eee;
  margin: 0 0 0 30px;
}

#legenda .legenda-item {
  position: relative;
  padding-left: 60px;
  margin-bottom: 5px;
  line-height: 25px;
  height: 25px;
  width: 200px;
  float: left;
}

#legenda .legenda-item .legenda-color {
  position: absolute;
  width: 50px;
  height: 25px;
  top: 0;
  left: 0;
}

#legenda .legenda_text {
  font-family: Helvetica;
  font-size: 12px;
  width: calc(50% - 60px);
  line-height: 25px;
  float: left;
}

:focus {
  outline: none;
}

div.clear {
  clear: both;
}

.content #data {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  align-items: flex-start;
  /* justify-content: space-between; */
  padding: 30px 0px;
}

.content #data #calendar_form {
  padding: 30px 30px 25px;
  border: 1px solid #eee;
  background: white;
  border-radius: 3px;
  width: 250px;
}

.content #data #calendar_form #times {
  display: block;
  margin: 10px 0 20px;
}

.content #data #calendar_form #times input {
  z-index: 1;
  position: relative;
  margin-right: 10px;
  vertical-align: text-bottom;
}

.content #data #calendar_form #times span {
  margin-bottom: 10px;
  display: block;
}

.content #data #calendar_form #times .time-block {
  width: 24px;
  height: 24px;
  left: -4px;
  top: -4px;
  z-index: 0;
  margin: 0;
  position: absolute;
  vertical-align: middle;
}

.content #data #calendar_form .input-row {
  margin-bottom: 10px;
  display: block;
}

.content #data #calendar_form #times .input-row label {
  position: relative;
  margin-left: 4px;
}

.content #data #calendar_form .input-row label, .content #data #calendar_form .input-row input[type="text"], .content #data #calendar_form .input-row input[type="number"] {
  width: 100%;
}

@media (max-width: 300px) {

  div#calendar ul.dates li,
  div#calendar ul.label li {
    height: 30px;
    line-height: 30px;
  }
}

#calendar-wrapper #calendar {
  transition: opacity .5s ease;
}

#calendar-wrapper.loading {
  position: relative;
}

#calendar-wrapper.loading:after {
  content: '';
  background-image: url('../images/loader.svg');
  font-weight: 700;
  font-size: 20px;
  color: #03364b;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%);
  background-size: cover;
  width: 30px;
  height: 30px;
  animation: spin 1.5s linear infinite;
}

#calendar-wrapper.loading #calendar {
  transition: opacity .5s ease;
  opacity: 0.5;
}

#calendar .disabled {
  pointer-events: none;
  cursor: default;
}

#legenda.front {
  float: left;
  max-width: 100%;
  margin: 30px 0;
}

#calendar.front ul.dates li {
  cursor: default;
}

.content .alert {
  padding: 5px 10px;
  border-radius: 3px;
  display: block;
}

.content .alert.error {
  color: darkred;
  background: #ffe8e8;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}