div.ns-calendar table {
    border:none;
    transition:all .5s ease 0s;
}
div.ns-calendar table th, div.ns-calendar table td {
    text-align: center;
    border:none !important;
}
div.ns-calendar table td {
    padding:0;
    background: transparent !important;
}
div.ns-calendar span {
    display: inline-block;
    padding:calc(var(--padding-y) * 1.5);
    cursor:pointer;
    transition:color .2s;
}
div.ns-calendar span::before {
    background-color: var(--color1);
    width: calc( var(--font-size) * 2.5 );
    height: calc( var(--font-size) * 2.5 );
    top:50%;
    left:50%;
    content:'';
    position: absolute;
    transform:translate(-50%, -50%);
    opacity:0;
    transition:opacity .2s;
    border-radius:50%;
    z-index:-1;
}
div.ns-calendar span.selected::before {
    background-color: var(--color2);
    opacity:1;
}
div.ns-calendar span:hover,
div.ns-calendar span.selected {
    color:#fff;
}
div.ns-calendar span:hover::before {
    opacity:1;
}
div.ns-calendar span.dis {
    opacity:.5;
    user-select: none;
    pointer-events: none;
}
div.ns-calendar th {
    text-transform:lowercase;
    user-select: none;
}
div.ns-calendar th:first-letter {
    text-transform: uppercase;
}
/* anim */
div.ns-calendar table.new {
    position: absolute;
    top:0px;
    left:0px;
}
div.ns-calendar table.ns-calendar-month th, 
div.ns-calendar table.ns-calendar-month td {
    width:calc(100% / 7);
}
div.ns-calendar > cal-container {
    overflow: hidden;
    display: block;
}
/* nav */
div.ns-calendar > cal-nav {
    padding:0 0 calc(var(--padding-y) * 1)  calc(var(--padding-y) * 1.5);
    display: flex;
    justify-content: space-between;
}
div.ns-calendar > cal-nav > * {
    align-self: center;
}
div.ns-calendar cal-title {
    user-select: none;
    cursor: pointer;
    transition:color .2s;
}
div.ns-calendar cal-title:hover {
    color:var(--color1);
}
div.ns-calendar cal-title.disabled {
    pointer-events: none;
    cursor: default;
}
/* months view */
div.ns-calendar cal-months,
div.ns-calendar cal-years {
    display: flex;
    position: absolute;
    top:0px;
    left:0px;
    background-color: #fff;
    width:100%;
    height:100%;
    overflow: hidden;
}
div.ns-calendar cal-months:empty,
div.ns-calendar cal-years:empty {
    display:none;
}
div.ns-calendar cal-months table.new,
div.ns-calendar cal-years table.new {
    height:100%;
}
div.ns-calendar cal-months span,
div.ns-calendar cal-years span {
    display: inline-block;
    padding:calc( var(--padding-y) * 1.5 );
}
div.ns-calendar cal-months td,
div.ns-calendar cal-years td {
    width:calc(100% / 3);
}
div.ns-calendar cal-months td:first-child,
div.ns-calendar cal-years td:first-child {
    text-align: left;
}
div.ns-calendar cal-months td:last-child,
div.ns-calendar cal-years td:last-child {
    text-align: right;
}
div.ns-calendar cal-months td:nth-child(2),
div.ns-calendar cal-years td:nth-child(2) {
    text-align: center;
}
div.ns-calendar cal-months span::before,
div.ns-calendar cal-years span::before {
    display:none;
}
div.ns-calendar cal-months span:hover,
div.ns-calendar cal-years span:hover {
    color:var(--color1);
}
div.ns-calendar cal-months span::after {
    content:'.';
}
div.ns-calendar cal-months span:first-letter {
    text-transform: uppercase;
}