.widget_calendar table { position: relative; width: 100%; font-size: 15px; border: none; caption { font-weight: bold; text-transform: uppercase; text-align: center; margin-bottom: 5px; border-bottom: 1px solid #d7dee5; } thead th, tbody td { text-align: center; padding: 9px 0; border: none; } tbody { #today { color: #fff; background: var(--paletteColor1); border-radius: 2px; a { color: inherit; background: inherit; &:after { background: currentColor; } } } td { position: relative; a { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 2px; background: rgba(215, 222, 229, 0.2); transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955), background 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955); &:after { position: absolute; bottom: 7px; content: ''; width: 3px; height: 3px; // background: $primary; background: var(--paletteColor1); border-radius: 100%; transition: background 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } &:hover { color: #fff; // background: $primary; background: var(--paletteColor1); &:after { background: #fff; } } } } } tfoot { position: absolute; top: 0; width: 100%; font-size: 14px; font-weight: 500; text-transform: uppercase; tr { display: flex; justify-content: space-between; width: 100%; } td { // padding: 0; border: none; } } }