div#calendar {
    padding: 0px;
    width: 288px;
    font-family: Helvetica, "Times New Roman", Times, serif;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
}
   
  div#calendar div.box {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    background-color: #787878;
  }

  div#calendar div.header {
    line-height: 40px;
    vertical-align: middle;
    position: absolute;
    left: -127px;
    top: 0px;
    width: 582px;
    height: 40px;
    text-align: center;
}
   
  div#calendar div.header a.prev,div#calendar div.header a.next{ 
      position:absolute;
      top:0px;   
      height: 17px;
      display:block;
      cursor:pointer;
      text-decoration:none;
      color:#FFF;
  }
   
  div#calendar div.header span.title{
      color:#FFF;
      font-size:18px;
  }
   
   
  div#calendar div.header a.prev{
      left:0px;
  }
   
  div#calendar div.header a.next{
      right:0px;
  }
   
   
   
   
  /*******************************Calendar Content Cells*********************************/
  div#calendar div.box-content{
      border:1px solid #787878 ;
      /* border-radius: 8px; */
    }
   
   
   
  div#calendar ul.label{
      float:left;
      margin: 0px;
      padding: 0px;
      margin-top:5px;
      margin-left: 5px;
  }
   
  div#calendar ul.label li {
    margin: 0px;
    padding: 0px;
    margin-right: 5px;
    float: left;
    list-style-type: none;
    width: 35px;
    height: 35px;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    color: #000;
    font-size: 15px;
    background-color: transparent;
    font-family: "Lato", sans-serif !important;
}
   
   
  div#calendar ul.dates{
      float:left;
      margin: 0px;
      padding: 0px;
      margin-left: 5px;
      margin-bottom: 5px;
  }
   
  /** overall width = width+padding-right**/
  div#calendar ul.dates li {
    margin: 0px;
    padding: 0px;
    padding-top: 6px;
    margin-right: 5px;
    margin-top: 5px;
    vertical-align: middle;
    float: left;
    list-style-type: none;
    width: 35px;
    height: 35px;
    font-size: 15px;
    color: #000;
    text-align: center;
    border-radius: 50px;
    font-family: "Lato", sans-serif !important;
}

div#calendar ul.dates li:hover {
  background-color: #ddd;
}
   
  :focus{
      outline:none;
  }
   
  div.clear{
      clear:both;
  }     


  div.teste {
	display: flex;
  }

  div.eventos-section {
    margin-top: auto;
    margin-bottom: auto;
    padding: 0px;
  }

  div.calendar-item {
    margin: 3rem 0;
  }

  div.calendar-item h3 {
    display:flex;
    color: #000;
    font-family: "Lato", sans-serif !important;
    padding-left: 10vw;
  }

  main.calendar section.content-section {
    background-color: #ffffff;
  }

  .feriados,
  .eventos,
  .dias-letivos {
    font-size: 1.2rem;
    color: #000;
    margin: 0px;
    padding-top: 10px;
    /* padding-bottom: 10px; */
    vertical-align: baseline;
  }

a.itemLegenda {
  margin:-1px 10px !important;
  font-size:14px !important;
  display:block;
  overflow:hidden;
  float:left;
  line-height:20px;
  color: black !important;
  cursor: pointer;
}

a.itemLegenda:hover {

  text-decoration: underline !important;
}

  .feriados {
    background-color: #f2dede;
    font-weight: bold;
  }

  .eventos {
    background-color: #a1d1ff;
    font-weight: bold;
    color: white;
  }

  .eventos-section h5 {
      font-size: 1.1rem;
  }

  h5.datas {
    padding: 0px;
    margin: 0px;
    text-align: right;
    font-family: "Lato", sans-serif !important;
  } 


  .marcado1 {
    border: 1px solid red;
  }

  .marcado2 {
    border: 1px solid #0053a1 !important;
  }

.start2 {
    background-color: lightgray;
  }

.mask {

  background-color: white !important;

}

.boxLegenda{
  /* float:right; */
  margin-bottom:20px;
  display: flex;
}
.boxLegenda .itemLegenda{
  margin:0 6px;
  font-size:12px !important;
  display:block;
  overflow:hidden;
  float:left;
  line-height:20px;
  color: black !important;
}
.boxLegenda .itemLegenda .legFeriado,
.boxLegenda .itemLegenda .legDestaque{
  display:block;
  width:20px;
  height:20px;
  float:left;
  margin-right:5px;
}
  .boxLegenda .itemLegenda .legFeriado {
      background-color: #f2dede;
      border: solid 2px #f2dede;
      border-radius: 10px;
      border: solid 2px #c15d5d !important;
  }

      body.high-contrast .boxLegenda .itemLegenda .legFeriado {
      background-color: black !important;
      color: white !important;
      border-color: white !important
    }

  .boxLegenda .itemLegenda .legDestaque {
      background-color: #a1d1ff;
      border: solid 2px #0053a1;
      border-radius: 10px;
  }

  .year {
    color:black;
    font-weight: 1000;
    /* margin: 3rem 0; */
    margin-top: 3rem;
    justify-content: left!important;
    display: flex!important;
  }
  

  @media screen and (max-width:1400px) {
    .col-md-3 {
      flex: 0 0 auto;
      width: 30%;
  }
  }

  @media screen and (max-width:1200px) {
    .col-md-3 {
      flex: 0 0 auto;
      width: 35%;
  }
  }

  @media screen and (max-width:950px) {
    .col-md-3 {
      flex: 0 0 auto;
      width: 40%;
  }
  }

  @media screen and (max-width:840px) {
    .col-md-3 {
      flex: 0 0 auto;
      width: 45%;
  }
  }

  @media screen and (max-width:768px) {
    .col-md-3 {
      flex: 0 0 auto;
      width: 100%;
  }
  }

  @media print {
    header {
      display:none !important;
        height: 0px !important;
      position: absolute !important;
    }

    footer.blue{
      background-color:white !important;
      display: none !important;
    }

    body {
      background-color: white !important;
    }

    .whatsapp-button {
      display: none !important;
    }

    .hashtag-style {
      display:none !important;
        height: 0px !important;
      position: absolute !important;
      visibility: hidden !important;

    }

    #printable, #printable * {
      visibility: visible;
    }
    #printable {
      position: fixed;
      left: 0;
      top: 0;
    }
  }

  .calendar-header {

    justify-content: center;
    display: flex;
    padding-left: 9vw;
    flex-direction: column
}

.d-flex {
  display: flex!important;
  justify-content: center;
}

@media only screen and (max-width:768px) {

  div.calendar-item h3 {
    padding-left: 0vw;
    justify-content: center;
  }

  .calendar-header {

    justify-content: center;
    display: flex;
    padding-left: 0vw;
    align-items: center;
    flex-direction: column
}

}

@media (min-width: 992px) {
.container, .container-lg, .container-md, .container-sm {
    max-width: 880px !important;
}
}

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 1015px !important;
  }
  }


@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1213px !important;
}
}