button::after, button:before {
    position:absolute;
    content:'';
}
button {
	cursor:pointer;
    white-space: nowrap;
}
button.ns-button span {
    pointer-events: none;
}
/* BUTTON BASE */
button.ns-button {
    display: inline-block;
    border-radius: var(--button-border-radius);
    border:1px solid transparent;
    padding:var(--button-padding-y) var(--button-padding-x) var(--button-padding-y) var(--button-padding-x-iconed);
    line-height: var(--line-height);
    z-index: 1;
}
button.ns-button,
button.ns-button > span,
button.ns-button::after {
    color:var(--button-font-color);
    transition:all .3s;
}
button.ns-button > span {
    color:inherit;
}
button.ns-button::after {
    font-weight:200;
    font-size:24px;
    content:attr(icon);
    top:50%;
    left:var(--button-icon-left);
    transform:translateY(-50%);
}
button.ns-button::before {
    position: absolute;
    top:-1px;
    left:-1px;
    opacity:0;
    width:calc(100% + 2px);
    height:calc(100% + 2px);
    transform:scale(0);
    /*filter:blur(3px);*/
    content:'';
    background-color: var(--button-color-base-hover);
    border-radius:50%;
    /*animation-name: btn-hover-out;
    animation-duration:.3s;
    animation-timing-function: ease-out;*/
    transition:all .3s ease 0s;
    z-index: -1;
}
/* ALTERNATE VERSIONS */
/* inactive */
button.ns-button.inactive,
button.ns-button.disabled {
	cursor: default;
	pointer-events: none;
}
button.ns-button.inactive > span,
button.ns-button.inactive::after,
button.ns-button.disabled > span,
button.ns-button.disabled::after {
    opacity:.5;
}
/* outlined + transparent */
button.ns-button.outlined,
button.ns-button.transparent {
    background: transparent !important;
}
button.ns-button.transparent,
button.ns-button.transparent.small {
    padding:0 0 0 var(--button-padding-transparent-x);
}
button.ns-button.transparent::before {
    display:none;
}
button.ns-button.transparent::after,
button.ns-button.transparent.small::after {
    left:0;
}
/* only icon */
button.ns-button.only-icon {
    line-height: 0;
    font-size:0;
}
button.ns-button.only-icon > span {
    display:none;
}
button.ns-button.only-icon {
    padding:var(--button-padding-only-icon);
    border-radius:var(--button-border-radius-only-icon);
}
button.ns-button.only-icon::after {
    left:50% !important;
    transform:translate(-50%,-50%);
}
/* small-round */
button.ns-button.small-round {
    border-radius:var(--button-border-radius-only-icon);
}
/* small */
button.ns-button.small {
    padding:var(--button-padding-small-y) var(--button-padding-small-x) var(--button-padding-small-y) var(--button-padding-small-x-iconed);
}
button.ns-button.small::after {
    left:var(--button-icon-small-left);
    transform:translateY(-50%) scale(1) !important;
}
button.ns-button.small.only-icon {
    padding:var(--button-padding-small-only-icon);
}
button.ns-button.small.only-icon::after {
    transform:translate(-50%, -50%) scale(1) !important;
}
/* reverse */
button.ns-button.reverse {
    padding:var(--button-padding-y) var(--button-padding-x-iconed) var(--button-padding-y) var(--button-padding-x);
}
button.ns-button.reverse::after {
    left:auto;
    right:var(--button-icon-left);
}
button.ns-button.reverse.small {
    padding:var(--button-padding-small-y) var(--button-padding-small-x-iconed) var(--button-padding-small-y) var(--button-padding-small-x);
}
button.ns-button.reverse.small::after {
    left:auto;
    right:var(--button-icon-small-left);
}
button.ns-button.reverse.transparent,
button.ns-button.reverse.transparent.small {
    padding:0 var(--button-padding-transparent-x) 0 0;
}
button.ns-button.reverse.transparent::after,
button.ns-button.reverse.transparent.small::after {
    left:auto;
    right:0;
}
/* input */
button.ns-button.input {
    z-index: 3;
	border:1px solid var(--border-color) !important;
	border-radius:var(--border-radius);
}
button.ns-button.input > span {
    color:var(--text-color) !important;
}
button.ns-button.input::after {
	color:var(--border-color) !important;
}
button.ns-button.input:hover {
	border:1px solid var(--button-color-base) !important;
}
button.ns-button.input:hover > span {
    color:var(--button-color-base) !important;
}
button.ns-button.input:hover::after {
	color:var(--button-color-base) !important;
}
/* HOVER, FOCUS EFFECT */
button.ns-button:hover::before,
button.ns-button:focus::before {
    /*animation-name: btn-hover;
    animation-duration:.3s;
    animation-fill-mode:both;
    animation-timing-function: ease-out;*/
    transform:scale(1);
    opacity:1;
    border-radius:inherit; /*var(--button-border-radius);*/
}
button.ns-button.only-icon:hover::before,
button.ns-button.only-icon:focus::before,
button.ns-button.small-round:hover::before,
button.ns-button.small-round:focus::before {
    border-radius:inherit; /*var(--button-border-radius-only-icon);*/
}
button.ns-button.outlined:hover::before,
button.ns-button.outlined:focus::before {
    opacity:.1;
}
button.ns-button:hover::after,
button.ns-button:focus::after {
    transform:translateY(-50%) scale(1.25);
}
button.ns-button.only-icon:hover::after,
button.ns-button.only-icon:focus::after {
    transform:translate(-50%,-50%) scale(1.5);
}
button.ns-button.transparent:hover,
button.ns-button.transparent:focus,
button.ns-button.transparent:hover::after,
button.ns-button.transparent:focus::after {
    color:var(--text-color) !important;
}
/* COLORS */
/* base */
button.ns-button.inactive 
{ color:var(--button-font-color-inactive); }

button.ns-button 
{ background-color: var(--button-color-base); }
button.ns-button.outlined.inactive,
button.ns-button.transparent.inactive 
{ color:var(--button-font-color-base-inactive); }
button.ns-button::before 
{ background-color: var(--button-color-base-hover); }
button.ns-button.outlined 
{ border:1px solid var(--button-color-base); }
button.ns-button.outlined, 
button.ns-button.transparent,
button.ns-button.outlined::after,
button.ns-button.transparent::after 
{ color:var(--button-color-base); }
button.ns-button.outlined:hover::after, 
button.ns-button.outlined:hover
{ color:var(--button-color-base-hover); }
button.ns-button.outlined:hover
{ border:1px solid var(--button-color-base-hover); }
/* green */
button.ns-button.green
{ background-color: var(--button-color-green); }
button.ns-button.green.outlined.inactive,
button.ns-button.green.transparent.inactive  
{ color:var(--button-font-color-green-inactive); }
button.ns-button.green::before 
{ background-color: var(--button-color-green-hover); }
button.ns-button.green.outlined 
{ border:1px solid var(--button-color-green); }
button.ns-button.green.outlined, 
button.ns-button.green.transparent,
button.ns-button.green.outlined::after,
button.ns-button.green.transparent::after 
{ color:var(--button-color-green); }
button.ns-button.green.outlined:hover::after, 
button.ns-button.green.outlined:hover 
{ color:var(--button-color-green-hover); }
button.ns-button.green.outlined:hover
{ border:1px solid var(--button-color-green-hover); }
/* red */ 
button.ns-button.red
{ background-color: var(--button-color-red); }
button.ns-button.red.outlined.inactive,
button.ns-button.red.transparent.inactive 
{ color:var(--button-font-color-red-inactive); }
button.ns-button.red::before 
{ background-color: var(--button-color-red-hover); }
button.ns-button.red.outlined 
{ border:1px solid var(--button-color-red); }
button.ns-button.red.outlined, 
button.ns-button.red.transparent,
button.ns-button.red.outlined::after,
button.ns-button.red.transparent::after 
{ color:var(--button-color-red); }
button.ns-button.red.outlined:hover::after, 
button.ns-button.red.outlined:hover 
{ color:var(--button-color-red-hover); }
button.ns-button.red.outlined:hover
{ border:1px solid var(--button-color-red-hover); }
/* gray */ 
button.ns-button.gray
{ background-color: var(--button-color-gray); }
button.ns-button.gray.outlined.inactive,
button.ns-button.gray.transparent.inactive  
{ color:var(--button-font-color-gray-inactive); }
button.ns-button.gray::before 
{ background-color: var(--button-color-gray-hover); }
button.ns-button.gray.outlined 
{ border:1px solid var(--button-color-gray); }
button.ns-button.gray.outlined, 
button.ns-button.gray.transparent,
button.ns-button.gray.outlined::after,
button.ns-button.gray.transparent::after 
{ color:var(--button-color-gray); }
button.ns-button.gray.outlined:hover::after, 
button.ns-button.gray.outlined:hover 
{ color:var(--button-color-gray-hover); }
button.ns-button.gray.outlined:hover
{ border:1px solid var(--button-color-gray-hover); }
/* yellow */ 
button.ns-button.yellow
{ background-color: var(--button-color-yellow); }
button.ns-button.yellow.outlined.inactive,
button.ns-button.yellow.transparent.inactive  
{ color:var(--button-font-color-yellow-inactive); }
button.ns-button.yellow::before 
{ background-color: var(--button-color-yellow-hover); }
button.ns-button.yellow.outlined 
{ border:1px solid var(--button-color-yellow); }
button.ns-button.yellow.outlined, 
button.ns-button.yellow.transparent,
button.ns-button.yellow.outlined::after,
button.ns-button.yellow.transparent::after 
{ color:var(--button-color-yellow); }
button.ns-button.yellow.outlined:hover::after, 
button.ns-button.yellow.outlined:hover 
{ color:var(--button-color-yellow-hover); }
button.ns-button.yellow.outlined:hover
{ border:1px solid var(--button-color-yellow-hover); }
/* input-color */ 
button.ns-button.input-color
{ background-color: var(--button-color-input-color); }
button.ns-button.input-color.outlined.inactive,
button.ns-button.input-color.transparent.inactive  
{ color:var(--button-font-color-input-color-inactive); }
button.ns-button.input-color::before 
{ background-color: var(--button-color-input-color-hover); }
button.ns-button.input-color.outlined 
{ border:1px solid var(--button-color-input-color); }
button.ns-button.input-color.outlined, 
button.ns-button.input-color.transparent,
button.ns-button.input-color.outlined::after,
button.ns-button.input-color.transparent::after 
{ color:var(--button-color-input-color); }
button.ns-button.input-color.outlined:hover::after, 
button.ns-button.input-color.outlined:hover
{ color:var(--button-color-input-color-hover); }
button.ns-button.input-color.outlined:hover
{ border:1px solid var(--button-color-input-color-hover); }

/* UNIQUE */
button.ns-button.add::after
{ font-weight: 200; }
button.ns-button.apply::after
{ font-weight: 300; }
button.ns-button[icon="refresh"]::after,
button.ns-button[icon="search"]::after
{ font-weight:300; }
button.ns-button[icon="edit_square"]::after 
{ margin-top:-2px; }

/* MULTIPLE */
button.ns-button.multiple {
    z-index: 200;
}
button.ns-button > ul {
    position: absolute;
    bottom:0px;
    left:0px;
    background-color: var(--button-dropdown-bg-color);
    transform:translateY(100%) scaleY(0);
    transform-origin: 0 0;
    border-radius: var(--button-dropdown-radius);
    box-shadow: 0px 3px 7px #0000003F;
    text-align: left;
    list-style-type: none;
    z-index: 2;
    width:max-content;
    overflow: hidden;
    padding:var(--button-padding-y) 0;
    opacity:0;
    visibility: hidden;
    transition:all .3s ease 0s;
}
button.ns-button:focus > ul {
    opacity:1;
    visibility: visible;
    transform:translateY(100%) scaleY(1);
}
button.ns-button > ul > li {
    padding:var(--button-padding-y) var(--button-padding-x);
    transition:all .3s;
    color:var(--text-color);
    pointer-events: all;
}
button.ns-button > ul > li:hover {
    background-color:var(--button-color-base-hover);
    color:var(--button-font-color);
}
button.ns-button.small > ul {
    padding:var(--button-padding-small-y) 0;
}
button.ns-button.small > ul > li {
    padding:var(--button-padding-small-y) var(--button-padding-small-x);
}

/* BUTTON ALIGNMENT */
/* default */
div.button {
	text-align: center;
}
div.buttons button {
	margin-left:2em;
}
div.buttons button:first-child {
	margin-left: 0;
}
div.buttons {
	white-space: nowrap;
	overflow: hidden;
	padding-bottom:2px;
}
div.buttons button {
	float:left;
}
div.buttons button:first-child {
	float:left !important;
}
div.buttons button:last-child {
	float:right;
}
/* specified by css */
div.buttons.no-float button, div.buttons.center button { float:none !important; }
div.buttons.left, div.button.left { text-align: left; }
div.buttons.center, div.button.center { text-align: center; }
div.buttons.right, div.button.right { text-align: right; }

/* LIST BUTTONS */
ul.buttons {
	list-style-type: none;
	overflow: hidden;
	width:100%;
	padding-bottom:2px;
}
ul.buttons > li {
	float:left;
	display: block;
	margin-right: 2em;
}
ul.buttons > li:last-child {
	float:right;
	margin-right: 0;
}

/* animation */
/*@keyframes btn-hover {
    0% {
        transform:scaleX(0) scaleY(0);
    }
    33.33% {
        transform:scaleX(.25) scaleY(.8);
    }
    66.66% {
        transform:scaleX(.75) scaleY(1);
    }
    100% {
        transform:scaleX(1) scaleY(1);
    }
}
@keyframes btn-hover-out {
    0% {
        transform:scale(1);
    }
    100% {
        transform:scale(0);
    }
}*/