.self-calendar-table,
.self-calendar-table table {
    width: 100%;
}
.self-calendar-table thead {
    text-align:center;
}

.self-calendar-table tbody tr {
    height:37px; 
    max-height:160px; 
}

.self-calendar-table table td {
    border-color: #d8e2e7;
    border-style: solid;
    border-width: 1px;
    width:14.28%;
    padding: 0;
    vertical-align: top;
}

.self-calendar-table table tbody td > div:before {             
    content: attr(data-d);  
    margin-top: 2%;
    display: block;
    text-align: right;
    margin-right: 2%;
    color: grey;     
    font-size:14px; 
}
.self-calendar-table td.disabled > div:before {             
    color:#d8e2e7;
}
.self-calendar-table td.enabled {
    background-color: var(--azul1);
    cursor: pointer;
}
.self-calendar-table td.enabled > div:before {
    color: white;
}
.self-calendar-table td.today {
    background-color: #d8e2e7;    
}
.self-calendar-table td.today > div:before {
    color:#666;
}

.self-calendar-table td.active {
    background-color: var(--azul2);
    cursor: pointer;
}
.self-calendar-table td.active > div:after { position: relative; content: '\e9a4';
    font-size: 2rem;
    left: 0px;
    position: relative;
    top: 0px;
    line-height: 0;font-family:boxicons!important; color:#fff}
.self-calendar-table td.active > div:before {
    color:white;
}


.dots-8 {
  width: 48px;
  height: 48px;
  --c:radial-gradient(farthest-side,currentColor 90%,#0000);
  background:
    var(--c) 0    0,
    var(--c) 100% 0,
    var(--c) 100% 100%,
    var(--c) 0    100%;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  animation:d8 .5s infinite; 
}

@keyframes d8 {
  100% {background-position: 100% 0,100% 100%,0 100%,0 0}
}