/* Calendar Datepicker Form*/
.datepicker thead th{
  padding:10px;
}

.datepicker .next{
  background: url(/tcp/NBTC_TCP/media/Source/icon/arrow-right.svg);
  background-repeat: no-repeat;
  filter: invert(100%) sepia(100%) saturate(27%) hue-rotate(183deg) brightness(105%) contrast(100%);
  background-size: 18px;
  background-position: center;
}

.datepicker .prev{
  background: url(/tcp/NBTC_TCP/media/Source/icon/arrow-left.svg);
  background-repeat: no-repeat;
  filter: invert(100%) sepia(100%) saturate(27%) hue-rotate(183deg) brightness(105%) contrast(100%);
  background-size: 18px;
  background-position: center;
}

.datepicker thead tr:first-child{
  background:#0072CE;
  color:white;
}

.datepicker thead tr:last-child{
  background:#EDF1F2;
  color:#B51B24;
}

.datepicker tr:nth-child(n+1) td{
  border: 2px solid #F7F7F7;
}

.datepicker tbody td{
  padding-right: 14px;
  padding-left: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
}

.datepicker th.datepicker-switch{
  width:initial!important;
  pointer-events: none;
  font-size:18px;
}

.datepicker {
  padding: 4px !important;
}

.datepicker th {
  padding: 7px;
}

.datepicker td {
  padding: 5px;
}

.datepicker td, .datepicker th{
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-border-radius: initial!important;
  -moz-border-radius: initial!important;
  border-radius: 4px;
  border: none;
}

.datepicker .prev:hover{
  background: url(/tcp/NBTC_TCP/media/Source/icon/arrow-left.svg);
  background-repeat: no-repeat;
  filter: invert(100%) sepia(100%) saturate(27%) hue-rotate(183deg) brightness(105%) contrast(100%);
  background-size: 18px;
  background-position: center;
}

/* Calendar - Form */
.btn-default {
  display: none;
}

.datetime-ui-state-default,
.datetime-ui-widget-content .datetime-ui-state-default,
.datetime-ui-widget-header .datetime-ui-state-default {
  border-color: transparent !important;
  background: none !important;
  color: black !important;
}

.datetime-ui-state-active,
.datetime-ui-widget-content .datetime-ui-state-active,
.datetime-ui-widget-header .datetime-ui-state-active {
  color: white !important;
  background: #0072CE !important;
  color: white !important;
}

.datetime-ui-datepicker td {
  padding: 5px !important;
  border: intial !important;
}

.datetime-ui-datepicker-calendar thead tr {
  background: #EDF1F2 !important;
  color: #B51B24 !important;
}

.datetime-ui-datepicker-header {
  position: relative;
  border: initial !important;
  padding-top: 5px !important;
  padding-buttom: 5px !important;
}

.datetime-ui-datepicker {
  padding: initial !important;
}

.datetime-ui-widget-header {
  background: #0072CE !important;
  border-radius: var(--bs-border-radius) !important;
}

.datetime-ui-widget-content {
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow) !important;
  background: white !important;
  border: initial !important;
}

.action-buttons {
  display: flex;
  justify-content: center;
  padding-bottom: 7px;
}

.datetime-ui-datepicker .datetime-ui-datepicker-title {
  display: flex !important;
  margin: 0 2.3em !important;
  line-height: 1.8em !important;
  text-align: center !important;
}

.datetime-ui-datepicker-next-hover {
  background: url('https://site-assets.fontawesome.com/releases/v6.5.1/svgs/solid/caret-right.svg') !important;
  background-repeat: no-repeat !important;
  filter: invert(100%) sepia(100%) saturate(27%) hue-rotate(183deg) brightness(105%) contrast(100%);
  right: 6px !important;
  top: 9px !important;
}

.datetime-ui-datepicker-prev-hover {
  background: url('https://site-assets.fontawesome.com/releases/v6.5.1/svgs/solid/caret-right.svg') !important;
  background-repeat: no-repeat !important;
  filter: invert(100%) sepia(100%) saturate(27%) hue-rotate(183deg) brightness(105%) contrast(100%);
  transform: rotate(180deg);
  right: 6px !important;
  top: 9px !important;
}

.datetime-ui-datepicker-next {
  background: url('https://site-assets.fontawesome.com/releases/v6.5.1/svgs/solid/caret-right.svg');
  background-repeat: no-repeat;
  filter: invert(100%) sepia(100%) saturate(27%) hue-rotate(183deg) brightness(105%) contrast(100%);
  filter: white;
  right: 6px !important;
  top: 9px !important;
}

.datetime-ui-datepicker-prev {
  background: url('https://site-assets.fontawesome.com/releases/v6.5.1/svgs/solid/caret-right.svg');
  background-repeat: no-repeat;
  filter: invert(100%) sepia(100%) saturate(27%) hue-rotate(183deg) brightness(105%) contrast(100%);
  transform: rotate(180deg);
  filter: white;
  left: 6px !important;
  top: 9px !important;
}

.datetime-ui-datepicker .datetime-ui-datepicker-title {
  justify-content: center !important;
}

/* Calendar - Form */

.icon-only {
  position: absolute;
  z-index: 10;
  top: 129px;
  left: 18px;
  padding: 20px 148px;
}

.calendar-action {
  position: absolute;
  top: 64px;
  left: 330px;
}

/*mini popup*/
.fn-delete-line a {
  color: #626262;
  text-decoration: none;
}

.fa-icon-dot-mini {
  font-size: 8px;
  vertical-align: middle;
}

.fn-button-red:hover {
  background: var(--color-meridian-red);
  color: white;
}

.fn-button-red {
  background: var(--color-meridian-red);
  color: white;
}

.fn-text-info-mini {
  color: #626262;
  font-weight: 500;
  font-size: 14px;
}

.img-calendar-mini {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}

.time-border {
  background: #24AA18;
  border-radius: 5px;
  color: white;
}

.fn-close {
  width: 80%;
}

.fn-block-mini {
  max-width: 350px;
  width: 100%;
}

.fn-head-mini {
  color: #D3D3D3;
}

/* scroll page */
.fn-details-blockmini {
  overflow: auto;
  height: 200px;
}

.fn-calendar-dotmini {
  width: 4px;
  height: 4px;
  margin: 2px;
  border-radius: 25px;
}

/*StyleTable*/
.Calendar tr:first-child a {
  color: white !important;
  text-decoration: none;
}

.Calendar table td {
  width: 1%;
  padding: .5rem;
  vertical-align: top;
}

.Calendar table {
  border-width: 0px !important;
  border-style: solid !important;
  border-collapse: collapse !important;
  width: 100%;
}

.Calendar tbody td {
  text-align: center;
  padding: 8px 10px;
  font-weight: bold;
  font-size: 18px;
}

.Calendar tr:nth-child(n+2) td {
  border: 2px solid #F7F7F7;
}

.Calendar tbody td[colspan="7"] {
  padding: 0px;
  background-color: #0072CE !important;
  color: white;
}

.Calendar tbody th {
  background-color: #EDF1F2;
  color: #B51B24;
  text-align: center;
  padding: 7px;
  font-size: 17px;
  font-weight: bold;
}

@media (min-width: 1200px) {
  
  .fn-position-calendar {
    right: 0px;
    bottom: 25px;
    z-index: 1055;
  }
  
  .fn-calendar-popup {
    width: 80%;
  }
  
  .fn-block-popup {
    max-height: 620px;
    max-width: 500px;
  }
  
  .fn-position-detail {
    right: 10px;
    bottom: 25px;
    z-index: 1100;
  }
  
}

@media (min-width: 992px) {
  .fn-position-calendar {
    right: -30px;
    bottom: 25px;
    z-index: 1055;
  }
  
  .fn-calendar-popup {
    width: 70%;
  }
  
  .fn-block-popup {
    max-height: 620px;
    max-width: 500px;
  }
  
  .fn-position-detail {
    right: 10px;
    bottom: 25px;
    z-index: 1100;
  }
}

@media (min-width: 768px) {
  .fn-position-calendar {
    right: -38px;
    bottom: 25px;
    z-index: 1055;
  }
  
  .fn-calendar-popup {
    width: 65%;
  }
  
  .fn-block-popup {
    max-height: 620px;
    max-width: 500px;
  }
  
  .fn-position-detail {
    right: 10px;
    bottom: 25px;
    z-index: 1100;
  }
  
}

@media (min-width: 576px) {
  .fn-position-calendar {
    right: -38px;
    bottom: 25px;
    z-index: 1055;
  }
  
  .fn-calendar-popup {
    width: 65%;
  }
  
  .fn-block-popup {
    max-height: 620px;
    max-width: 500px;
  }
  
  .fn-position-detail {
    right: 10px;
    bottom: 25px;
    z-index: 1100;
  }
  
}

@media (min-width: 360px) {
  .fn-position-calendar {
    right: -25px;
    bottom: 25px;
    z-index: 1055;
  }
  
  .fn-calendar-popup {
    width: 65%;
  }
  
  .fn-block-popup {
    max-height: 620px;
    max-width: 500px;
  }
  
  .fn-position-detail {
    right: 10px;
    bottom: 25px;
    z-index: 1100;
  }
  
}

.fn-head-detail {
  background-color: #F8F0F1;
  color: #B51B24;
  border: solid 1px #c1c1c1;
}

/* Calendar Page Full*/

/* Size-Dot */
.fa-sm-dot {
  font-size: 15px;
}

.fa-md-dot {
  font-size: 25px;
}

.fa-lg-dot {
  font-size: 35px;
}

.fa-icon-dot {
  font-size: 10px;
  vertical-align: middle;
}

.fn-event-items {
  font-size: 20px;
}

.fn-details-block {
  border: solid 1px #c1c1c1;
}


.block-type {
  border-radius: 10px;
  border: solid 1px #d7ddde;
  background-color: #fff;
  color: #16487C;
}



.btn-all {
  color: white;
  border-radius: 10px;
  border: solid 1px #d7ddde;
  background-color: #b51b24;
}

.btn-all:hover {
  color: white;
  border-radius: 10px;
  border: solid 1px #d7ddde;
  background-color: #b51b24;
}

.fn-text-info {
  color: #626262;
  font-weight: 500;
}

.fn-box-time {
  padding: 3px 5px;
  border-radius: 5px;
  background-color: #24aa18;
  display: inline-block;
}

.fn-card-detail {
  max-width: 930px;
  width: 100%;
  padding: 0 0 29px;
  border: solid 1px #c1c1c1;
}

.title-calendar {
  font-size: 35px;
}

.title-calendarmini {
  font-size: 24px;
}

.img-calendar {
  width: 45px;
  height: 45px;
  margin-right: 20px;
}

.head-calendar {
  color: #0D4177;
}

.head-calendarmini {
  color: #d6d6d6;
}

.fn-dot-block {
  width: 13%;
  left: 30%;
}

.fn-calendar tr:first-child a {
  color: white !important;
  text-decoration: none;
  cursor: pointer;
}


.OtherMonth .DayNumberTextLink {
  color: #A7A7A8 !important;
  text-decoration: none;
}

.ThisMonth .DayNumberTextLink {
  color: black !important;
  text-decoration: none;
}

.Today {
  background: #0072CE !important;
}

.ThisMonth .have-event {
  color: #0072CE !important;
}

.Today .DayNumberTextLink {
  color: white !important;
}

.fn-group-dot {
  right: 210px;
}

.fn-calendar-dot {
  width: 10px;
  height: 10px;
  margin: 2px;
  border-radius: 25px;
}

.fn-calendar tbody td {
  padding: 28px;
  font-weight: bold;
  font-size: 28px;
}

.fn-calendar tr:nth-child(n+2) td {
  border: 2px solid #F7F7F7;
}

.fn-calendar tbody td[colspan="7"] {
  padding: 0px;
  background-color: #0072CE !important;
  color: white;
}

.fn-calendar tbody th {
  background-color: #EDF1F2;
  color: #B51B24;
  text-align: center;
  padding: 10px;
  font-size: 28px;
  font-weight: bold;
}

.fn-calendar table {
  border-width: 0px !important;
}

.card-calendar {
  max-width: 930px;
  width: 100%;
  padding: 17px 27.7px 30px 27.7px;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.16);
  background-color: #fff;
}

@media (max-width: 400px) {
  .card-calendar {
    width: 930px;
    width: 100%;
    padding: 17px 27.7px 30px 27.7px;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.16);
    background-color: #fff;
  }
}