Your IP : 216.73.216.79
/*!
* Vuesax v4.0.1-alpha.24 🖖 (https://lusaxweb.github.io/vuesax/)
* Forged by Luis Daniel Rovira
* Released under the MIT License.
* Donate: https://www.patreon.com/bePatron?c=1567892
* © 2019, Lusaxweb. (https://lusaxweb.net)
*/
.vs-button {
--vs-color: "";
--vs-color-rotate: var(--vs-primary);
--vs-color-darken: var(--vs-primary);
--vs-button-padding: 8px 12px;
--vs-button-margin: 5px;
--vs-button-border-radius: 12px;
--vs-button-text-color: #fff;
}
.vs-button {
border: 0px;
margin: var(--vs-button-margin);
border-radius: var(--vs-button-border-radius);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 1;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0px;
outline: none;
font-size: 0.8rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.vs-button.vs-component-dark.vs-button--transparent {
color: rgba(var(--vs-text), 1) !important;
}
.vs-button--fff:focus {
color: #1e1e1e !important;
}
.vs-button__content {
padding: var(--vs-button-padding);
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-button--active-disabled {
pointer-events: none;
opacity: 0.6;
}
.vs-button:disabled {
pointer-events: none;
opacity: 0.35;
}
.vs-button.vs-button--animate:not(.vs-button--animate-inactive) .vs-button__content i {
font-size: 1.15rem;
}
.vs-button.vs-button--animate:not(.vs-button--animate-inactive):hover .vs-button__content {
-webkit-transform: translate(-100%);
transform: translate(-100%);
}
.vs-button.vs-button--animate:not(.vs-button--animate-inactive):hover .vs-button__animate {
-webkit-transform: translate(0%);
transform: translate(0%);
}
.vs-button.vs-button--animate:not(.vs-button--animate-inactive).vs-button--animate-vertical:hover .vs-button__content {
-webkit-transform: translate(0, -100%) !important;
transform: translate(0, -100%) !important;
opacity: 0;
}
.vs-button.vs-button--animate:not(.vs-button--animate-inactive).vs-button--animate-vertical:hover .vs-button__animate {
-webkit-transform: translate(0%) !important;
transform: translate(0%) !important;
}
.vs-button.vs-button--animate:not(.vs-button--animate-inactive).vs-button--animate-scale:hover .vs-button__content {
-webkit-transform: scale(1.4) !important;
transform: scale(1.4) !important;
opacity: 0;
}
.vs-button.vs-button--animate:not(.vs-button--animate-inactive).vs-button--animate-scale:hover .vs-button__animate {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.vs-button.vs-button--animate:not(.vs-button--animate-inactive).vs-button--animate-rotate:hover .vs-button__content {
-webkit-transform: rotate(180deg) !important;
transform: rotate(180deg) !important;
opacity: 0;
}
.vs-button.vs-button--animate:not(.vs-button--animate-inactive).vs-button--animate-rotate:hover .vs-button__animate {
opacity: 1;
-webkit-transform: rotate(0);
transform: rotate(0);
}
.vs-button.vs-button--animate:not(.vs-button--animate-inactive) .vs-button__content {
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.vs-button__animate {
position: absolute;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0px;
left: 0px;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
-webkit-transform: translate(100%);
transform: translate(100%);
pointer-events: none;
}
.vs-button__animate--vertical {
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
}
.vs-button__animate--scale {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
.vs-button__animate--rotate {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0;
}
.vs-button--block {
width: 100%;
display: block;
}
.vs-button--upload:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(var(--vs-color), 0.4);
top: 0px;
left: 0px;
z-index: 1200;
-webkit-animation: btnupload 0.7s ease infinite;
animation: btnupload 0.7s ease infinite;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.vs-button--loading {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vs-button .vs-button__loading {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: rgba(var(--vs-color), 0.8);
border-radius: inherit;
}
.vs-button .vs-button__loading:after {
content: "";
width: 17px;
height: 17px;
border: 2px dotted rgba(255, 255, 255, 0.6);
border-top: 2px solid rgba(255, 255, 255, 0);
border-bottom: 2px solid rgba(255, 255, 255, 0);
border-right: 2px solid rgba(255, 255, 255, 0);
border-radius: 50%;
position: absolute;
-webkit-animation: btnload 0.6s linear infinite;
animation: btnload 0.6s linear infinite;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.vs-button .vs-button__loading:before {
position: absolute;
content: "";
width: 17px;
height: 17px;
border: 2px solid white;
border-top: 2px solid rgba(255, 255, 255, 0);
border-bottom: 2px solid rgba(255, 255, 255, 0);
border-right: 2px solid rgba(255, 255, 255, 0);
border-radius: 50%;
-webkit-animation: btnload 0.6s ease infinite;
animation: btnload 0.6s ease infinite;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.vs-button--size-xl {
border-radius: 20px;
}
.vs-button--size-xl .vs-button__content {
padding: 15px 20px;
font-size: 1.1rem;
}
.vs-button--size-large {
font-size: 1rem;
border-radius: 15px;
}
.vs-button--size-large .vs-button__content {
padding: 10px 15px;
}
.vs-button--size-small {
font-size: 0.75rem;
border-radius: 9px;
}
.vs-button--size-small .vs-button__content {
padding: 5px 10px;
}
.vs-button--size-mini {
font-size: 0.6rem;
border-radius: 7px;
}
.vs-button--size-mini .vs-button__content {
padding: 3px 8px;
}
.vs-button--circle {
border-radius: 25px;
}
.vs-button--square {
border-radius: 0px;
}
.vs-button--icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-button--icon .vs-button__content {
padding: 8px 8px;
}
.vs-button--icon i {
font-size: 1.15rem;
}
.vs-button--default {
background: rgba(var(--vs-color), 1);
color: #fff;
}
.vs-button--default.vs-button--active {
-webkit-box-shadow: 0px 10px 20px -10px rgba(var(--vs-color), 1);
box-shadow: 0px 10px 20px -10px rgba(var(--vs-color), 1);
-webkit-transform: translate(0, -3px);
transform: translate(0, -3px);
}
.vs-button--default:hover {
-webkit-box-shadow: 0px 10px 20px -10px rgba(var(--vs-color), 1);
box-shadow: 0px 10px 20px -10px rgba(var(--vs-color), 1);
-webkit-transform: translate(0, -3px);
transform: translate(0, -3px);
}
.vs-button--flat {
background: rgba(var(--vs-color), 0.15);
color: rgba(var(--vs-color), 1);
}
.vs-button--flat.vs-button--dark {
color: rgba(var(--vs-text), 1);
}
.vs-button--flat:hover {
background: rgba(var(--vs-color), 0.25);
}
.vs-button--flat:focus {
color: #fff;
background: rgba(var(--vs-color), 1);
-webkit-transition: all 0.25s ease, background 0.25s ease 0.25s;
transition: all 0.25s ease, background 0.25s ease 0.25s;
}
.vs-button--flat.vs-button--active {
background: rgba(var(--vs-color), 1);
color: #fff;
}
.vs-button--floating {
background: rgba(var(--vs-color), 1);
color: #fff;
-webkit-box-shadow: 0px 8px 20px -6px rgba(var(--vs-color), 1);
box-shadow: 0px 8px 20px -6px rgba(var(--vs-color), 1);
-webkit-transform: translate(0, -3px);
transform: translate(0, -3px);
}
.vs-button--floating:hover {
-webkit-box-shadow: 0px 8px 20px -6px rgba(var(--vs-color), 1);
box-shadow: 0px 8px 20px -6px rgba(var(--vs-color), 1);
-webkit-transform: translate(0, -6px);
transform: translate(0, -6px);
}
.vs-button--floating:focus {
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
}
.vs-button--floating.vs-button--active {
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
}
.vs-button--border {
background: rgba(var(--vs-color), 0);
color: rgba(var(--vs-color), 1);
}
.vs-button--border:before {
content: "";
border: 2px solid rgba(var(--vs-color), 1);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: inherit;
background: transparent;
pointer-events: none;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.vs-button--border:hover:before {
border: 2px solid rgba(var(--vs-color), 0.5);
}
.vs-button--border:focus {
color: #fff;
background: rgba(var(--vs-color), 1);
}
.vs-button--border.vs-button--active {
background: rgba(var(--vs-color), 1);
color: #fff;
}
.vs-button--gradient {
background: rgba(var(--vs-color), 1);
color: #fff;
overflow: hidden;
}
.vs-button--gradient.vs-button--primary::before, .vs-button--gradient.vs-button--success::before {
-webkit-filter: hue-rotate(40deg);
filter: hue-rotate(40deg);
}
.vs-button--gradient::before {
content: "";
background: linear-gradient(30deg, rgba(var(--vs-color), 0) 33%, rgba(var(--vs-color), 1) 100%);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: inherit;
pointer-events: none;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: -1;
-webkit-filter: hue-rotate(-40deg);
filter: hue-rotate(-40deg);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.vs-button--gradient:hover {
-webkit-transform: translate(0, -3px);
transform: translate(0, -3px);
-webkit-box-shadow: 0px 10px 20px -10px rgba(var(--vs-color), 0.7);
box-shadow: 0px 10px 20px -10px rgba(var(--vs-color), 0.7);
}
.vs-button--gradient:hover::before {
opacity: 0;
}
.vs-button--gradient.vs-button--active {
-webkit-transform: translate(0, -3px);
transform: translate(0, -3px);
-webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.35);
box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.35);
}
.vs-button--relief {
background: rgba(var(--vs-color), 1);
color: #fff;
overflow: hidden;
-webkit-transform: translate(0) scale(1, 1);
transform: translate(0) scale(1, 1);
}
.vs-button--relief .vs-button__content {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-button--relief.vs-button--icon.vs-button--active {
height: auto;
}
.vs-button--relief::before {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: calc(100% - 3px);
border-radius: inherit;
pointer-events: none;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: -1;
-webkit-filter: contrast(2) grayscale(0.4);
filter: contrast(2) grayscale(0.4);
border-bottom: 3px solid rgba(var(--vs-color), 1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.vs-button--relief:active {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
.vs-button--relief:active .vs-button__content {
padding-bottom: 6px;
}
.vs-button--relief:active::before {
border-bottom: 0px solid rgba(var(--vs-color), 1);
}
.vs-button--relief.vs-button--active {
-webkit-transform: translate(0, 1px);
transform: translate(0, 1px);
}
.vs-button--relief.vs-button--active .vs-button__content {
padding-bottom: 6px;
}
.vs-button--relief.vs-button--active::before {
border-bottom: 0px solid rgba(var(--vs-color), 1);
}
.vs-button--transparent {
background: transparent;
color: rgba(var(--vs-color), 1);
overflow: hidden;
}
.vs-button--transparent::before {
content: "";
background: rgba(var(--vs-color), 0.1);
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: inherit;
pointer-events: none;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
z-index: -1;
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.vs-button--transparent:active:not(.vs-button--active)::before {
-webkit-transform: scale(0.9) !important;
transform: scale(0.9) !important;
}
.vs-button--transparent:hover::before {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.vs-button--transparent.vs-button--active::before {
background: rgba(var(--vs-color), 0.2);
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.vs-button--shadow {
background: rgba(var(--vs-background), 1);
color: rgba(var(--vs-text), 1);
overflow: hidden;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-button--shadow:active:not(.vs-button--active) {
-webkit-transform: translate(0, -1px);
transform: translate(0, -1px);
-webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, var(--vs-shadow-opacity)) !important;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, var(--vs-shadow-opacity)) !important;
}
.vs-button--shadow:hover {
-webkit-transform: translate(0, -3px);
transform: translate(0, -3px);
-webkit-box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-button--shadow.vs-button--active {
-webkit-transform: translate(0, -3px);
transform: translate(0, -3px);
-webkit-box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 8px 25px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
@-webkit-keyframes btnload {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes btnload {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes btnupload {
0% {
-webkit-transform: translate(0, 110%);
transform: translate(0, 110%);
}
100% {
-webkit-transform: translate(0, -110%);
transform: translate(0, -110%);
}
}
@keyframes btnupload {
0% {
-webkit-transform: translate(0, 110%);
transform: translate(0, 110%);
}
100% {
-webkit-transform: translate(0, -110%);
transform: translate(0, -110%);
}
}
.vs-ripple-content {
--vs-color: inherit;
width: 100px;
height: 100px;
position: absolute;
width: 100%;
pointer-events: none;
overflow: hidden;
height: 100%;
top: 0px;
right: 0px;
border-radius: inherit;
z-index: -1;
}
.vs-ripple-content .vs-ripple {
width: 0px;
height: 0px;
border-radius: 50%;
opacity: 0;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
background: radial-gradient(circle, rgba(var(--vs-color), 0.05), rgba(var(--vs-color), 0.6));
}
.vs-ripple-content .vs-ripple--solid {
background: rgba(var(--vs-color), 1);
opacity: 1;
}
.vs-ripple-content .vs-ripple-invert {
width: 0px;
height: 0px;
border-radius: 50%;
opacity: 0;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
background-image: radial-gradient(circle, rgba(var(--vs-color), 0.5), rgba(var(--vs-color), 0));
}
.vs-ripple-content .vs-ripple-cut-1 {
width: 0px;
height: 0px;
opacity: 0;
position: absolute;
-webkit-transform: translate(-100%, -50%) skew(20deg);
transform: translate(-100%, -50%) skew(20deg);
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0)));
background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
}
.vs-ripple-content .vs-ripple-cut-2 {
width: 0px;
height: 0px;
opacity: 0;
position: absolute;
-webkit-transform: translate(0%, -50%) skew(20deg);
transform: translate(0%, -50%) skew(20deg);
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0)));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
}
.vs-button-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-button-group .vs-button {
margin: 0px;
}
.vs-button-group .vs-button:not(:last-of-type):not(:first-of-type) {
border-radius: 0px;
border: 0px;
}
.vs-button-group .vs-button:not(:last-of-type):not(:first-of-type).vs-button--border:before {
border-left: 0px;
width: 100%;
}
.vs-button-group .vs-button:not(:last-of-type):not(:first-of-type).vs-button--border + .vs-button--border:not(:last-of-type):before {
border-right: 0px;
width: calc(100%);
}
.vs-button-group .vs-button:last-of-type {
border-radius: 0px 12px 12px 0px;
}
.vs-button-group .vs-button:first-of-type {
border-radius: 12px 0px 0px 12px;
}
.vs-alert {
--vs-color: var(--vs-primary);
}
.vs-alert {
background: rgba(var(--vs-color), 0.1);
color: rgba(var(--vs-color), 1);
width: 100%;
padding: 0px 20px;
border-radius: 0px 12px 12px 0px;
position: relative;
font-size: 0.9rem;
z-index: 10;
-webkit-transition: height 0.25s ease;
transition: height 0.25s ease;
overflow: hidden;
}
.vs-alert::-moz-selection {
background: rgba(var(--vs-color), 0.15);
}
.vs-alert::selection {
background: rgba(var(--vs-color), 0.15);
}
.vs-alert *::-moz-selection {
background: rgba(var(--vs-color), 0.15);
}
.vs-alert *::selection {
background: rgba(var(--vs-color), 0.15);
}
.vs-alert b {
font-weight: 600;
}
.vs-alert a {
color: inherit !important;
text-decoration: underline;
}
.vs-alert a:hover {
opacity: 0.6;
}
.vs-alert::after {
content: "";
background: rgba(var(--vs-color), 1);
left: 0px;
top: 0px;
width: 2px;
height: 100%;
position: absolute;
}
.vs-alert--solid {
background: rgba(var(--vs-color), 1);
color: #fff;
}
.vs-alert--solid .vs-alert__icon i {
color: #fff;
}
.vs-alert--solid .vs-alert__icon svg {
fill: #fff;
}
.vs-alert--solid .vs-alert__close {
color: #fff;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
}
.vs-alert--solid .vs-alert__close:hover {
-webkit-transform: translate(0, -2px);
transform: translate(0, -2px);
-webkit-box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.15);
}
.vs-alert--solid .vs-alert__close svg {
fill: #fff;
}
.vs-alert--solid::after {
background: rgba(255, 255, 255, 0.4);
}
.vs-alert--border {
background: transparent;
}
.vs-alert--border::before {
border: 1px solid rgba(var(--vs-color), 1);
border-left: 0px;
width: calc(100% - 2px);
content: "";
position: absolute;
height: calc(100% - 2px);
top: 0px;
left: 0px;
z-index: -1;
border-radius: inherit;
}
.vs-alert--shadow {
background: transparent;
-webkit-box-shadow: 0px 4px 15px 0px rgba(var(--vs-color), 0.12);
box-shadow: 0px 4px 15px 0px rgba(var(--vs-color), 0.12);
}
.vs-alert--gradient {
background: rgba(var(--vs-color), 1);
color: #fff;
border-radius: 12px;
}
.vs-alert--gradient .vs-alert__icon i {
color: #fff;
}
.vs-alert--gradient .vs-alert__icon svg {
fill: #fff;
}
.vs-alert--gradient .vs-alert__close {
color: #fff;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
}
.vs-alert--gradient .vs-alert__close:hover {
-webkit-transform: translate(0, -2px);
transform: translate(0, -2px);
-webkit-box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.15);
}
.vs-alert--gradient .vs-alert__close svg {
fill: #fff;
}
.vs-alert--gradient::after {
display: none;
}
.vs-alert--gradient::before {
background: linear-gradient(30deg, rgba(var(--vs-color), 0) 33%, rgba(var(--vs-color), 1) 100%);
-webkit-filter: hue-rotate(-50deg);
filter: hue-rotate(-50deg);
width: 100%;
content: "";
position: absolute;
height: 100%;
top: 0px;
left: 0px;
z-index: -1;
border-radius: inherit;
}
.vs-alert--flat {
background: rgba(0, 0, 0, 0.03);
}
.vs-alert--relief {
background: rgba(var(--vs-color), 1);
color: #fff;
border-radius: 12px;
-webkit-box-shadow: 6px 6px 0px 0px rgba(var(--vs-color), 0.3);
box-shadow: 6px 6px 0px 0px rgba(var(--vs-color), 0.3);
}
.vs-alert--relief .vs-alert__icon i {
color: #fff;
}
.vs-alert--relief .vs-alert__icon svg {
fill: #fff;
}
.vs-alert--relief .vs-alert__close {
color: #fff;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15);
}
.vs-alert--relief .vs-alert__close:hover {
-webkit-transform: translate(0, -2px);
transform: translate(0, -2px);
background: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.15);
}
.vs-alert--relief .vs-alert__close svg {
fill: #fff;
}
.vs-alert--relief::after {
display: none;
}
.vs-alert__title {
font-weight: 600;
font-size: 1rem;
padding: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.vs-alert__title--clickHidden {
cursor: pointer;
padding-right: 0px;
}
.vs-alert__title ~ .vs-alert__content .vs-alert__content__text {
padding-top: 0px;
}
.vs-alert__content {
-webkit-transition: height 0.25s ease;
transition: height 0.25s ease;
overflow: hidden;
}
.vs-alert__content__text {
padding: 15px 15px;
padding-top: 20px;
padding-bottom: 20px;
}
.vs-alert__close {
position: absolute;
top: 9px;
right: 6px;
background: transparent;
border: 0px;
color: rgba(var(--vs-color), 1);
width: 30px;
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 0.3);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 0.3);
border-radius: 10px;
padding: 0px;
}
.vs-alert__close:hover {
-webkit-transform: translate(0, -2px);
transform: translate(0, -2px);
-webkit-box-shadow: 0px 5px 18px 0px rgba(var(--vs-color), 0.3);
box-shadow: 0px 5px 18px 0px rgba(var(--vs-color), 0.3);
}
.vs-alert__close svg {
fill: rgba(var(--vs-color), 1);
}
.vs-alert__footer {
position: relative;
width: 100%;
padding: 10px 15px;
padding-top: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.vs-alert__icon {
position: absolute;
width: 50px;
height: 100%;
left: 0px;
top: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-left: 2px;
}
.vs-alert__icon i {
font-size: 1.3rem;
color: rgba(var(--vs-color), 1);
}
.vs-alert__icon svg {
width: 24px;
height: 24px;
fill: rgba(var(--vs-color), 1);
}
.vs-alert__icon ~ .vs-alert__footer {
padding-left: 35px;
}
.vs-alert__icon ~ .vs-alert__content {
padding-left: 20px;
}
.vs-alert__icon ~ .vs-alert__title {
padding-left: 35px;
}
.vs-alert__progress {
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
height: 2px;
background: rgba(var(--vs-color), 0.2);
}
.vs-alert__progress__bar {
width: 30%;
left: 0px;
position: relative;
height: 100%;
background: rgba(var(--vs-color), 1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-alert__pagination {
position: relative;
padding: 0px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-bottom: 10px;
}
.vs-alert__pagination span {
font-size: 0.8rem;
margin: 0px 8px;
min-width: 28px;
text-align: center;
}
.vs-alert__pagination button {
border: 0px;
background: transparent;
color: rgba(var(--vs-color), 1);
padding: 0px 7px;
font-size: 1rem;
background: rgba(var(--vs-color), 0.1);
border-radius: 8px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-alert__pagination button:hover {
background: rgba(var(--vs-color), 1);
color: #fff;
}
.vs-icon-close {
width: 30px;
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-icon-close:before {
background: rgba(var(--vs-color), 1);
content: "";
position: absolute;
width: 16px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
height: 2px;
border-radius: 2px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.vs-icon-close:after {
background: rgba(var(--vs-color), 1);
content: "";
position: absolute;
width: 16px;
height: 2px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 2px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.vs-icon-close.vs-icon-hover-less:hover:after {
width: 12px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.vs-icon-close.vs-icon-hover-less:hover:before {
width: 12px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.vs-icon-plus {
width: 30px;
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
cursor: pointer;
}
.vs-icon-plus:before {
background: rgba(var(--vs-color), 1);
content: "";
position: absolute;
width: 14px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
height: 2px;
border-radius: 2px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.vs-icon-plus:after {
background: rgba(var(--vs-color), 1);
content: "";
position: absolute;
width: 14px;
height: 2px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
border-radius: 2px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.vs-icon-plus:hover:not(.less) {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.vs-icon-plus.less:hover {
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.vs-icon-plus.less:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.vs-icon-check {
width: 23px;
height: 23px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
border-radius: inherit;
}
.vs-icon-check span {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
display: block;
position: relative;
width: 8px;
height: 13px;
margin-top: -4px;
}
.vs-icon-check span .line1 {
background: transparent;
content: "";
position: absolute;
height: 2px;
border-radius: 2px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
border-radius: 5px;
z-index: 100;
width: 8px;
bottom: 0px;
}
.vs-icon-check span .line1:after {
content: "";
position: absolute;
width: 0%;
height: 2px;
background: #fff;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
border-radius: 5px 0px 0px 5px;
}
.vs-icon-check span .line2 {
bottom: 0px;
right: 0rem;
z-index: 100;
border-radius: 5px;
background: transparent;
content: "";
position: absolute;
height: 13px;
border-radius: 5px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 2px;
}
.vs-icon-check span .line2:after {
content: "";
position: absolute;
width: 2px;
height: 0%;
background: #fff;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
bottom: 0px;
border-radius: 5px 5px 0px 0px;
}
.vs-icon-check.active:before {
width: 8px;
}
.vs-icon-check.active:after {
width: 4px;
}
.vs-icon-check.indeterminate span {
-webkit-transform: rotate(0);
transform: rotate(0);
height: auto;
margin: 0px;
width: auto;
}
.vs-icon-check.indeterminate span:after {
position: relative;
content: "";
width: 10px;
height: 2px;
background: #fff;
display: block;
}
.vs-icon-check.indeterminate span .line1 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 0px;
right: -1px;
opacity: 0;
display: none;
}
.vs-icon-check.indeterminate span .line2 {
right: 0px !important;
bottom: -0.14rem !important;
-webkit-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
-webkit-transition: all 0.25s ease !important;
transition: all 0.25s ease !important;
height: 11px !important;
display: none;
}
.vs-icon-arrow {
pointer-events: none;
width: 7px;
height: 7px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-transform-origin: center;
transform-origin: center;
}
.vs-icon-arrow:after {
content: "";
width: 100%;
height: 1px;
background: rgba(var(--vs-text), 1);
position: absolute;
display: block;
top: 0px;
}
.vs-icon-arrow:before {
top: 0px;
content: "";
width: 1px;
height: 100%;
background: rgba(var(--vs-text), 1);
position: absolute;
display: block;
}
.vs-input-parent {
--vs-color: var(--vs-primary);
}
.vs-input-parent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: center;
align-self: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
}
.vs-input-parent.square .vs-input-content {
border-radius: 0px !important;
}
.vs-input-parent.textWhite .vs-input {
color: #fff;
}
.vs-input-parent.transparent .vs-input {
background: transparent !important;
}
.vs-input-parent.block {
width: 100%;
}
.vs-input-parent.block .vs-input {
width: 100%;
}
.vs-input-parent--has-label {
margin-top: 20px !important;
}
.vs-input-parent--state-success .vs-input {
background: rgba(var(--vs-success), 0.1) !important;
color: rgba(var(--vs-success), 1);
}
.vs-input-parent--state-success .vs-input__label {
color: rgba(var(--vs-success), 1);
}
.vs-input-parent--state-success .vs-input__icon {
color: rgba(var(--vs-success), 1);
background: rgba(var(--vs-success), 0.1);
-webkit-box-shadow: -15px 10px 10px -10px rgba(var(--vs-success), 0.1);
box-shadow: -15px 10px 10px -10px rgba(var(--vs-success), 0.1);
}
.vs-input-parent--state-danger .vs-input {
background: rgba(var(--vs-danger), 0.1) !important;
color: rgba(var(--vs-danger), 1);
}
.vs-input-parent--state-danger .vs-input__label {
color: rgba(var(--vs-danger), 1);
}
.vs-input-parent--state-danger .vs-input__icon {
color: rgba(var(--vs-danger), 1);
background: rgba(var(--vs-danger), 0.1);
-webkit-box-shadow: -15px 10px 10px -10px rgba(var(--vs-danger), 0.1);
box-shadow: -15px 10px 10px -10px rgba(var(--vs-danger), 0.1);
}
.vs-input-parent--state-warn .vs-input {
background: rgba(var(--vs-warn), 0.1) !important;
color: rgba(var(--vs-warn), 1);
}
.vs-input-parent--state-warn .vs-input__label {
color: rgba(var(--vs-warn), 1);
}
.vs-input-parent--state-warn .vs-input__icon {
color: rgba(var(--vs-warn), 1);
background: rgba(var(--vs-warn), 0.1);
-webkit-box-shadow: -15px 10px 10px -10px rgba(var(--vs-warn), 0.1);
box-shadow: -15px 10px 10px -10px rgba(var(--vs-warn), 0.1);
}
.vs-input-parent--state-dark .vs-input {
background: rgba(var(--vs-dark), 0.1) !important;
color: rgba(var(--vs-dark), 1);
}
.vs-input-parent--state-dark .vs-input__label {
color: rgba(var(--vs-dark), 1);
}
.vs-input-parent--state-dark .vs-input__icon {
color: rgba(var(--vs-dark), 1);
background: rgba(var(--vs-dark), 0.1);
-webkit-box-shadow: -15px 10px 10px -10px rgba(var(--vs-dark), 0.1);
box-shadow: -15px 10px 10px -10px rgba(var(--vs-dark), 0.1);
}
.vs-input-parent--state-primary .vs-input {
background: rgba(var(--vs-primary), 0.1) !important;
color: rgba(var(--vs-primary), 1);
}
.vs-input-parent--state-primary .vs-input__label {
color: rgba(var(--vs-primary), 1);
}
.vs-input-parent--state-primary .vs-input__icon {
color: rgba(var(--vs-primary), 1);
background: rgba(var(--vs-primary), 0.1);
-webkit-box-shadow: -15px 10px 10px -10px rgba(var(--vs-primary), 0.1);
box-shadow: -15px 10px 10px -10px rgba(var(--vs-primary), 0.1);
}
.vs-input-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
position: relative;
border-radius: 12px;
}
.vs-input-content + .vs-input__message {
padding-top: 2px;
}
.vs-input-content--has-color .vs-input:focus {
border-bottom: 2px solid rgba(var(--vs-color), 1);
}
.vs-input-content--has-color .vs-input:focus ~ .vs-input__icon {
color: rgba(var(--vs-color), 1);
}
.vs-input-content--has-color .vs-input:focus ~ .vs-input__label {
color: rgba(var(--vs-color), 1);
}
.vs-input-content--has-color .vs-input:focus ~ .vs-input__label--placeholder {
color: rgba(var(--vs-color), 1);
}
.vs-input {
border: 2px solid transparent;
background: rgba(var(--vs-gray-2), 1);
color: rgba(var(--vs-text), 1);
padding: 7px 13px;
border-radius: inherit;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
padding-left: 10px;
width: 200px;
}
.vs-input:focus {
background: rgba(var(--vs-gray-3), 1);
padding-left: 15px;
}
.vs-input:focus.vs-input--has-icon:not(.vs-input--has-icon--after) {
padding-left: 40px;
}
.vs-input:focus.vs-input--has-icon:not(.vs-input--has-icon--after) ~ .vs-input__icon {
-webkit-box-shadow: 15px 10px 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 15px 10px 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-input:focus.vs-input--has-icon:not(.vs-input--has-icon--after) ~ .vs-input__label:not(.vs-input__label--placeholder):not(.vs-input__label--label) {
left: 44px;
}
.vs-input:focus ~ .vs-input__icon {
-webkit-box-shadow: -15px 10px 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: -15px 10px 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
background: rgba(var(--vs-gray-1), 1);
}
.vs-input:focus ~ .vs-input__icon--after {
-webkit-transform: translate(6px, -6px);
transform: translate(6px, -6px);
}
.vs-input:focus ~ .vs-input__label:not(.vs-input__label--placeholder):not(.vs-input__label--label) {
opacity: 0;
left: 20px;
}
.vs-input:focus ~ .vs-input__label--placeholder {
opacity: 1;
visibility: visible;
pointer-events: auto;
-webkit-transform: translate(-3%, -77%);
transform: translate(-3%, -77%);
font-size: 0.75rem;
}
.vs-input__label {
position: absolute;
left: 13px;
font-size: 0.8rem;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
cursor: text;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
opacity: 0.4;
}
.vs-input__label--hidden {
opacity: 0;
visibility: hidden;
}
.vs-input__label--hidden.vs-input__label--placeholder {
opacity: 1;
visibility: visible;
pointer-events: auto;
-webkit-transform: translate(-3px, -80%);
transform: translate(-3px, -80%);
font-size: 0.75rem;
}
.vs-input__label--label {
opacity: 1;
visibility: visible;
pointer-events: auto;
-webkit-transform: translate(-2px, -77%);
transform: translate(-2px, -77%);
font-size: 0.75rem;
}
.vs-input--has-icon {
padding-left: 38px;
}
.vs-input--has-icon ~ .vs-input__label {
left: 44px;
}
.vs-input--has-icon--after {
padding-left: 7px;
padding-right: 38px;
}
.vs-input--has-icon--after ~ .vs-input__label {
left: 13px;
}
.vs-input--has-icon--after.vs-input__label--label {
-webkit-transform: translate(calc(-3px - 22px), -80%) !important;
transform: translate(calc(-3px - 22px), -80%) !important;
}
.vs-input--has-icon:focus--has-icon--after ~ .vs-input__label {
left: 44px;
}
.vs-input--has-icon:focus--has-icon--after ~ .vs-input__label--placeholder {
-webkit-transform: translate(calc(-3px - 22px), -80%) !important;
transform: translate(calc(-3px - 22px), -80%) !important;
}
.vs-input--has-icon:focus--has-icon--after ~ .vs-input__label {
left: 44px;
}
.vs-input__icon {
position: absolute;
right: auto;
width: 36px;
height: 36px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-shadow: 12px 0px 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 12px 0px 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
border-radius: inherit;
background: rgba(var(--vs-gray-2), 1);
pointer-events: none;
left: 0px;
}
.vs-input__icon--after {
left: auto;
right: 0px;
-webkit-box-shadow: -12px 0px 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: -12px 0px 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-input__icon--click {
pointer-events: auto !important;
cursor: pointer;
}
.vs-input__icon--click:hover {
-webkit-box-shadow: -15px 10px 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: -15px 10px 10px -10px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
background: rgba(var(--vs-gray-1), 1);
}
.vs-input__icon--click:hover.vs-input__icon--after {
-webkit-transform: translate(6px, -6px);
transform: translate(6px, -6px);
}
.vs-input__message {
font-size: 0.7rem;
position: relative;
padding: 0px 7px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
overflow: hidden;
}
.vs-input__message--success {
color: rgba(var(--vs-success), 1);
}
.vs-input__message--danger {
color: rgba(var(--vs-danger), 1);
}
.vs-input__message--warn {
color: rgba(var(--vs-warn), 1);
}
.vs-input__message--dark {
color: rgba(var(--vs-dark), 1);
}
.vs-input__message--primary {
color: rgba(var(--vs-primary), 1);
}
.vs-input__progress {
width: 95%;
left: 2.5%;
position: relative;
height: 2px;
background: rgba(var(--vs-gray-2), 1);
margin-top: 5px;
overflow: hidden;
border-radius: 5px;
}
.vs-input__progress--danger .vs-input__progress__bar {
background: rgba(var(--vs-danger), 1);
}
.vs-input__progress--warn .vs-input__progress__bar {
background: rgba(var(--vs-warn), 1);
}
.vs-input__progress--success .vs-input__progress__bar {
background: rgba(var(--vs-success), 1);
}
.vs-input__progress__bar {
width: 32%;
height: 2px;
max-width: 100%;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
border-radius: 5px;
}
.vs-input__loading {
position: absolute;
width: 22px;
height: 22px;
right: 7px;
pointer-events: none;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: inherit;
cursor: default;
}
.vs-input__loading:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(var(--vs-primary), 1);
border-radius: inherit;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
-webkit-animation: rotateInputLoading 0.8s ease infinite;
animation: rotateInputLoading 0.8s ease infinite;
top: 0px;
content: "";
}
.vs-input__loading:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0px;
position: absolute;
width: 100%;
height: 100%;
border: 2px dashed rgba(var(--vs-primary), 1);
border-radius: inherit;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
-webkit-animation: rotateInputLoading 0.8s linear infinite;
animation: rotateInputLoading 0.8s linear infinite;
opacity: 0.2;
content: "";
}
.vs-input-parent--border .vs-input__icon {
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.vs-input-parent--border .vs-input-content {
border-radius: 0px;
}
.vs-input-parent--border .vs-input-content .vs-input__affects {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
pointer-events: none;
}
.vs-input-parent--border .vs-input-content .vs-input__affects__1 {
border-bottom: 2px solid rgba(var(--vs-gray-3), 1);
width: 100%;
height: 2px;
position: absolute;
bottom: 0px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-input-parent--border .vs-input-content .vs-input__affects__2 {
border-bottom: 2px solid rgba(var(--vs-color), 1);
width: 0%;
height: 2px;
position: absolute;
bottom: 0px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
.vs-input-parent--border .vs-input-content .vs-input {
background: transparent;
border-radius: 0px;
}
.vs-input-parent--border .vs-input-content .vs-input:focus ~ .vs-input__affects .vs-input__affects__2 {
width: 100%;
}
.vs-input-parent--shadow .vs-input__icon {
background: transparent;
z-index: 100;
}
.vs-input-parent--shadow .vs-input-content .vs-input__affects {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
border-radius: inherit;
pointer-events: none;
z-index: 10;
}
.vs-input-parent--shadow .vs-input-content .vs-input__affects__1 {
-webkit-box-shadow: 0px 6px 25px -6px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 6px 25px -6px rgba(0, 0, 0, var(--vs-shadow-opacity));
width: 100%;
height: 100%;
position: absolute;
top: 0px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
z-index: 200;
border-radius: inherit;
}
.vs-input-parent--shadow .vs-input-content .vs-input {
background: transparent;
border-radius: 0px;
border: 2px solid transparent;
}
.vs-input-parent--shadow .vs-input-content .vs-input:focus {
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);
}
.vs-input-parent--shadow .vs-input-content .vs-input:focus ~ .vs-input__icon {
background: rgba(var(--vs-background), 1) !important;
opacity: 1;
-webkit-box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, var(--vs-shadow-opacity)) !important;
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, var(--vs-shadow-opacity)) !important;
}
.vs-input-parent--shadow .vs-input-content .vs-input:focus ~ .vs-input__affects .vs-input__affects__1 {
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
@-webkit-keyframes rotateInputLoading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotateInputLoading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.vs-checkbox-content {
--vs-color: var(--vs-primary);
}
.vs-checkbox-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.vs-checkbox-con {
width: 23px;
height: 23px;
border-radius: 9px;
position: relative;
z-index: 1;
}
.vs-checkbox-mask {
border-radius: 32%;
width: 100%;
height: 100%;
position: absolute;
z-index: 50;
cursor: pointer;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
z-index: -1;
box-sizing: border-box;
}
.vs-checkbox-mask i:not(.vs-icon-check) {
opacity: 0;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
color: #fff;
font-size: 1.1em;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.vs-checkbox-mask:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(var(--vs-color), 1);
-webkit-transform: scale(0.5);
transform: scale(0.5);
border-radius: inherit;
opacity: 0;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
z-index: -1;
}
.vs-checkbox-mask:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: inherit;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
z-index: -1;
border: 2px solid rgba(var(--vs-gray-4), 1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.vs-checkbox-mask .vs-icon-check {
opacity: 0;
z-index: 200;
}
.vs-checkbox {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
opacity: 0;
z-index: 100;
cursor: pointer;
}
.vs-checkbox:disabled {
opacity: 0;
pointer-events: none;
}
.vs-checkbox:active ~ .vs-checkbox-mask {
background: rgba(var(--vs-gray-4), 1) !important;
}
.vs-checkbox:hover ~ .vs-checkbox-mask {
background: rgba(var(--vs-gray-3), 1);
}
.vs-checkbox:hover ~ .vs-checkbox-mask:before {
border: 2px solid rgba(var(--vs-gray-4), 0);
}
.vs-checkbox:checked:hover ~ .vs-checkbox-mask {
-webkit-box-shadow: 0px 3px 15px 0px rgba(var(--vs-color), 0.35);
box-shadow: 0px 3px 15px 0px rgba(var(--vs-color), 0.35);
}
.vs-checkbox:checked ~ .vs-checkbox-mask {
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 0.35);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 0.35);
}
.vs-checkbox:checked ~ .vs-checkbox-mask i:not(.vs-icon-check) {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.25s ease 0.15s;
transition: all 0.25s ease 0.15s;
}
.vs-checkbox:checked ~ .vs-checkbox-mask .vs-icon-check {
opacity: 1;
}
.vs-checkbox:checked ~ .vs-checkbox-mask .vs-icon-check span .line1:after {
width: 100%;
-webkit-transition: all 0.25s ease 0.1s;
transition: all 0.25s ease 0.1s;
}
.vs-checkbox:checked ~ .vs-checkbox-mask .vs-icon-check span .line2:after {
-webkit-transition: all 0.2s ease 0.3s;
transition: all 0.2s ease 0.3s;
height: 100%;
}
.vs-checkbox:checked ~ .vs-checkbox-mask:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.vs-checkbox:checked ~ .vs-checkbox-mask:before {
opacity: 0;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.vs-checkbox-label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
padding: 7px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 0.9rem;
}
.vs-checkbox-label:before {
position: absolute;
width: 0px;
height: 2px;
background: rgba(var(--vs-text), 0.6);
content: "";
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-checkbox--disabled {
pointer-events: none;
}
.vs-checkbox--disabled .vs-checkbox-label {
opacity: 0.5;
}
.vs-checkbox--disabled .vs-checkbox-mask {
opacity: 0.6;
background: transparent !important;
}
.vs-checkbox--checked .lineThrough {
opacity: 0.4;
}
.vs-checkbox--checked .lineThrough:before {
width: calc(100% - 10px);
}
.vs-checkbox--loading {
pointer-events: none;
}
.vs-checkbox--loading.vs-checkbox--checked .vs-checkbox-mask {
background: transparent !important;
}
.vs-checkbox--loading.vs-checkbox--checked .vs-checkbox-mask:before {
border-radius: 50%;
border: 2px solid rgba(var(--vs-color), 1) !important;
border-top: 2px solid transparent !important;
-webkit-animation: rotateCheckboxLoading 0.6s linear infinite;
animation: rotateCheckboxLoading 0.6s linear infinite;
opacity: 1 !important;
}
.vs-checkbox--loading.vs-checkbox--checked .vs-checkbox-mask:after {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.vs-checkbox--loading .vs-checkbox-mask {
background: transparent !important;
}
.vs-checkbox--loading .vs-checkbox-mask:before {
border-radius: 50%;
border: 2px solid rgba(var(--vs-gray-4), 1) !important;
border-top: 2px solid transparent !important;
-webkit-animation: rotateCheckboxLoading 0.6s linear infinite;
animation: rotateCheckboxLoading 0.6s linear infinite;
}
@-webkit-keyframes rotateCheckboxLoading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotateCheckboxLoading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.vs-checkbox--label-before .vs-checkbox-label {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.vs-switch {
--vs-color: var(--vs-primary);
}
@-webkit-keyframes rotateSwitch {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotateSwitch {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.vs-switch {
color: #fff;
padding: 5px;
border-radius: 20px;
min-width: 48px;
height: 28px;
border: 0px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: rgba(var(--vs-gray-3), 1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
overflow: hidden;
}
.vs-switch--icon .vs-switch__input:checked ~ .vs-switch__circle {
color: #fff !important;
}
.vs-switch--icon .vs-switch__circle {
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.vs-switch--icon .vs-switch__circle i {
opacity: 1;
font-size: 1.3rem;
}
.vs-switch--indeterminate .vs-switch__input {
pointer-events: none;
}
.vs-switch--indeterminate .vs-switch__circle {
left: 50% !important;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
.vs-switch--square {
border-radius: 5px;
}
.vs-switch--square .vs-switch__background {
border-radius: 5px !important;
}
.vs-switch--square .vs-switch__circle {
border-radius: 5px !important;
}
.vs-switch:after {
-webkit-transition: all 0s ease 0s;
transition: all 0s ease 0s;
opacity: 0;
visibility: hidden;
content: "";
position: absolute;
width: calc(100% - 8px);
height: calc(100% - 8px);
border: 3px dashed rgba(var(--vs-color), 1);
z-index: 200;
border-radius: 50%;
border-top: 3px solid transparent;
border-right: 3px solid transparent;
-webkit-animation: rotateSwitch 0.6s linear infinite 0.25s;
animation: rotateSwitch 0.6s linear infinite 0.25s;
pointer-events: none;
}
.vs-switch:before {
pointer-events: none;
-webkit-transition: all 0s ease 0s;
transition: all 0s ease 0s;
opacity: 0;
visibility: hidden;
content: "";
position: absolute;
width: calc(100% - 8px);
height: calc(100% - 8px);
border: 3px solid rgba(var(--vs-color), 1);
z-index: 200;
border-radius: 50%;
border-top: 3px solid transparent;
border-right: 3px solid transparent;
-webkit-animation: rotateSwitch 0.6s ease infinite 0.25s;
animation: rotateSwitch 0.6s ease infinite 0.25s;
}
.vs-switch--loading {
width: 28px !important;
min-width: 28px !important;
pointer-events: none;
border-radius: 20px !important;
}
.vs-switch--loading .vs-switch__circle {
border-radius: 50% !important;
}
.vs-switch--loading .vs-switch__background {
opacity: 0 !important;
}
.vs-switch--loading:after {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.25s ease 0.3s;
transition: all 0.25s ease 0.3s;
}
.vs-switch--loading:before {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.25s ease 0.3s;
transition: all 0.25s ease 0.3s;
}
.vs-switch:hover {
background: rgba(var(--vs-gray-4), 1);
}
.vs-switch:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.vs-switch__background {
width: 100%;
height: auto;
position: absolute;
background: rgba(var(--vs-color), 1);
border-radius: inherit;
z-index: 2;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
-webkit-transform: scale(1);
transform: scale(1);
left: -100%;
border-radius: 50%;
padding-bottom: 100%;
}
.vs-switch__text {
font-size: 0.7rem;
padding: 5px;
padding-left: 25px;
-webkit-transition: all 0.25s ease 0.05s;
transition: all 0.25s ease 0.05s;
color: rgba(var(--vs-text), 1);
z-index: 9;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
overflow: hidden;
white-space: nowrap;
}
.vs-switch__text.on {
-webkit-transform: translate(-100%);
transform: translate(-100%);
position: absolute;
opacity: 0;
}
.vs-switch__text i {
font-size: 1rem;
opacity: 0.7;
}
.vs-switch__circle {
width: 20px;
height: 20px;
background: rgba(var(--vs-background), 1);
border-radius: 20px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
position: absolute;
z-index: 10;
left: 4px;
color: rgba(var(--vs-text), 1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-switch__circle i {
font-size: 0.8rem;
}
.vs-switch__input {
position: absolute;
width: 100%;
opacity: 0 !important;
height: 100%;
border-radius: inherit;
z-index: 100;
top: 0px;
left: 0px;
margin: 0px;
cursor: pointer;
}
.vs-switch__input:active:checked ~ .vs-switch__circle {
left: calc(100% - 30px);
}
.vs-switch__input:active ~ .vs-switch__circle {
width: 25px;
}
.vs-switch__input:checked ~ .vs-switch__background {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
width: 100%;
padding-bottom: 100%;
left: 0px;
border-radius: 50%;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-switch__input:checked ~ .vs-switch__text {
padding-left: 5px;
padding-right: 25px;
color: #fff;
}
.vs-switch__input:checked ~ .vs-switch__text i {
opacity: 1;
}
.vs-switch__input:checked ~ .vs-switch__text.on {
-webkit-transform: translate(0);
transform: translate(0);
position: relative;
opacity: 1;
}
.vs-switch__input:checked ~ .vs-switch__text.off {
-webkit-transform: translate(100%);
transform: translate(100%);
position: absolute;
opacity: 0;
}
.vs-switch__input:checked ~ .vs-switch__circle {
left: calc(100% - 24px);
-webkit-box-shadow: -5px 0px 25px 0px rgba(var(--vs-background), 0.6);
box-shadow: -5px 0px 25px 0px rgba(var(--vs-background), 0.6);
color: rgba(var(--vs-color), 1);
}
.vs-select {
--vs-color: var(--vs-primary);
}
.vs-select__options .vs-checkbox-content {
--vs-color: inherit;
}
.vs-select-enter-active {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select-enter {
opacity: 0;
-webkit-transform: translate(0, -10px);
transform: translate(0, -10px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-select-enter:after {
opacity: 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-select-leave-active {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select-leave-to {
opacity: 0;
-webkit-transform: translate(0, -10px);
transform: translate(0, -10px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-select-leave-to.top {
-webkit-transform: translate(0, 10px) !important;
transform: translate(0, 10px) !important;
}
.vs-select-leave-to:after {
opacity: 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-select-content {
width: 100%;
max-width: 200px;
}
.vs-select-content.block.block {
max-width: 100%;
}
.vs-select {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 38px;
width: 100%;
}
.vs-select--state-success .vs-select__input {
background: rgba(var(--vs-success), 0.05);
color: rgba(var(--vs-success), 1);
}
.vs-select--state-success .vs-select__input:hover {
color: rgba(var(--vs-text), 1);
}
.vs-select--state-success .vs-select__chips {
background: rgba(var(--vs-success), 0.05);
color: rgba(var(--vs-success), 1);
}
.vs-select--state-success .vs-select__chips:hover:after {
opacity: 0;
}
.vs-select--state-success .vs-select__chips:after {
width: calc(100% - 4px);
height: calc(100% - 4px);
content: "";
position: absolute;
top: 0px;
left: 0px;
border: 2px solid rgba(var(--vs-success), 0.5);
border-radius: inherit;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select--state-success .vs-select__label {
color: rgba(var(--vs-success), 1);
}
.vs-select--state-success .vs-select__icon {
color: rgba(var(--vs-success), 1);
background: rgba(var(--vs-success), 0.1);
-webkit-box-shadow: -15px 10px 10px -10px rgba(var(--vs-success), 0.1);
box-shadow: -15px 10px 10px -10px rgba(var(--vs-success), 0.1);
}
.vs-select--state-success .vs-icon-arrow:after {
background: rgba(var(--vs-success), 1);
}
.vs-select--state-success .vs-icon-arrow:before {
background: rgba(var(--vs-success), 1);
}
.vs-select--state-danger .vs-select__input {
background: rgba(var(--vs-danger), 0.05);
color: rgba(var(--vs-danger), 1);
}
.vs-select--state-danger .vs-select__input:hover {
color: rgba(var(--vs-text), 1);
}
.vs-select--state-danger .vs-select__chips {
background: rgba(var(--vs-danger), 0.05);
color: rgba(var(--vs-danger), 1);
}
.vs-select--state-danger .vs-select__chips:hover:after {
opacity: 0;
}
.vs-select--state-danger .vs-select__chips:after {
width: calc(100% - 4px);
height: calc(100% - 4px);
content: "";
position: absolute;
top: 0px;
left: 0px;
border: 2px solid rgba(var(--vs-danger), 0.5);
border-radius: inherit;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select--state-danger .vs-select__label {
color: rgba(var(--vs-danger), 1);
}
.vs-select--state-danger .vs-select__icon {
color: rgba(var(--vs-danger), 1);
background: rgba(var(--vs-danger), 0.1);
-webkit-box-shadow: -15px 10px 10px -10px rgba(var(--vs-danger), 0.1);
box-shadow: -15px 10px 10px -10px rgba(var(--vs-danger), 0.1);
}
.vs-select--state-danger .vs-icon-arrow:after {
background: rgba(var(--vs-danger), 1);
}
.vs-select--state-danger .vs-icon-arrow:before {
background: rgba(var(--vs-danger), 1);
}
.vs-select--state-warn .vs-select__input {
background: rgba(var(--vs-warn), 0.05);
color: rgba(var(--vs-warn), 1);
}
.vs-select--state-warn .vs-select__input:hover {
color: rgba(var(--vs-text), 1);
}
.vs-select--state-warn .vs-select__chips {
background: rgba(var(--vs-warn), 0.05);
color: rgba(var(--vs-warn), 1);
}
.vs-select--state-warn .vs-select__chips:hover:after {
opacity: 0;
}
.vs-select--state-warn .vs-select__chips:after {
width: calc(100% - 4px);
height: calc(100% - 4px);
content: "";
position: absolute;
top: 0px;
left: 0px;
border: 2px solid rgba(var(--vs-warn), 0.5);
border-radius: inherit;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select--state-warn .vs-select__label {
color: rgba(var(--vs-warn), 1);
}
.vs-select--state-warn .vs-select__icon {
color: rgba(var(--vs-warn), 1);
background: rgba(var(--vs-warn), 0.1);
-webkit-box-shadow: -15px 10px 10px -10px rgba(var(--vs-warn), 0.1);
box-shadow: -15px 10px 10px -10px rgba(var(--vs-warn), 0.1);
}
.vs-select--state-warn .vs-icon-arrow:after {
background: rgba(var(--vs-warn), 1);
}
.vs-select--state-warn .vs-icon-arrow:before {
background: rgba(var(--vs-warn), 1);
}
.vs-select--state-dark .vs-select__input {
background: rgba(var(--vs-dark), 0.05);
color: rgba(var(--vs-dark), 1);
}
.vs-select--state-dark .vs-select__input:hover {
color: rgba(var(--vs-text), 1);
}
.vs-select--state-dark .vs-select__chips {
background: rgba(var(--vs-dark), 0.05);
color: rgba(var(--vs-dark), 1);
}
.vs-select--state-dark .vs-select__chips:hover:after {
opacity: 0;
}
.vs-select--state-dark .vs-select__chips:after {
width: calc(100% - 4px);
height: calc(100% - 4px);
content: "";
position: absolute;
top: 0px;
left: 0px;
border: 2px solid rgba(var(--vs-dark), 0.5);
border-radius: inherit;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select--state-dark .vs-select__label {
color: rgba(var(--vs-dark), 1);
}
.vs-select--state-dark .vs-select__icon {
color: rgba(var(--vs-dark), 1);
background: rgba(var(--vs-dark), 0.1);
-webkit-box-shadow: -15px 10px 10px -10px rgba(var(--vs-dark), 0.1);
box-shadow: -15px 10px 10px -10px rgba(var(--vs-dark), 0.1);
}
.vs-select--state-dark .vs-icon-arrow:after {
background: rgba(var(--vs-dark), 1);
}
.vs-select--state-dark .vs-icon-arrow:before {
background: rgba(var(--vs-dark), 1);
}
.vs-select--state-primary .vs-select__input {
background: rgba(var(--vs-primary), 0.05);
color: rgba(var(--vs-primary), 1);
}
.vs-select--state-primary .vs-select__input:hover {
color: rgba(var(--vs-text), 1);
}
.vs-select--state-primary .vs-select__chips {
background: rgba(var(--vs-primary), 0.05);
color: rgba(var(--vs-primary), 1);
}
.vs-select--state-primary .vs-select__chips:hover:after {
opacity: 0;
}
.vs-select--state-primary .vs-select__chips:after {
width: calc(100% - 4px);
height: calc(100% - 4px);
content: "";
position: absolute;
top: 0px;
left: 0px;
border: 2px solid rgba(var(--vs-primary), 0.5);
border-radius: inherit;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select--state-primary .vs-select__label {
color: rgba(var(--vs-primary), 1);
}
.vs-select--state-primary .vs-select__icon {
color: rgba(var(--vs-primary), 1);
background: rgba(var(--vs-primary), 0.1);
-webkit-box-shadow: -15px 10px 10px -10px rgba(var(--vs-primary), 0.1);
box-shadow: -15px 10px 10px -10px rgba(var(--vs-primary), 0.1);
}
.vs-select--state-primary .vs-icon-arrow:after {
background: rgba(var(--vs-primary), 1);
}
.vs-select--state-primary .vs-icon-arrow:before {
background: rgba(var(--vs-primary), 1);
}
.vs-select.loading {
pointer-events: none;
}
.vs-select.loading *:not(.vs-select__loading):not(.vs-select__label) {
opacity: 0.6;
}
.vs-select.loading .vs-select__label {
pointer-events: none !important;
}
.vs-select.top.activeOptions .vs-select__input, .vs-select.top.activeOptions .vs-select__chips {
border-radius: 0px 0px 12px 12px !important;
-webkit-box-shadow: 0px -5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity)) !important;
box-shadow: 0px -5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity)) !important;
}
.vs-select--disabled {
opacity: 0.6;
pointer-events: none;
}
.vs-select--disabled label {
pointer-events: none;
}
.vs-select .vs-icon-arrow {
z-index: 600;
position: absolute;
right: 15px;
margin-top: -2px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
pointer-events: auto;
cursor: pointer;
}
.vs-select.activeOptions .vs-icon-arrow {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -2px !important;
}
.vs-select.activeOptions .vs-select__input {
border-radius: 12px 12px 0px 0px;
background: rgba(var(--vs-background), 1);
-webkit-box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transform: translate(0, -4px);
transform: translate(0, -4px);
-webkit-transition: all 0.25s ease, height 0s;
transition: all 0.25s ease, height 0s;
border: 2px solid transparent;
color: rgba(var(--vs-text), 1);
}
.vs-select.activeOptions .vs-select__chips {
border-radius: 12px 12px 0px 0px;
background: rgba(var(--vs-background), 1);
-webkit-box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transform: translate(0, -4px);
transform: translate(0, -4px);
-webkit-transition: all 0.25s ease, height 0s;
transition: all 0.25s ease, height 0s;
}
.vs-select.activeOptions .vs-select__chips:after {
opacity: 0;
}
.vs-select.activeOptions .vs-select__label--placeholder {
opacity: 1;
visibility: visible;
pointer-events: auto;
-webkit-transform: translate(-3%, -28px) !important;
transform: translate(-3%, -28px) !important;
font-size: 0.75rem;
margin-top: 0px !important;
}
.vs-select.activeOptions .vs-select__label {
margin-top: -4px;
}
.vs-select__input {
opacity: 1;
background: transparent;
padding: 7px 13px;
border: 2px solid transparent;
border-radius: 12px;
cursor: pointer;
-webkit-transition: all 0.25s ease, height 0s;
transition: all 0.25s ease, height 0s;
background: rgba(var(--vs-gray-2), 1);
color: rgba(var(--vs-text), 1);
min-height: 38px;
padding-right: 30px;
width: 100%;
}
.vs-select__input.multiple {
color: transparent;
background: transparent;
pointer-events: none;
}
.vs-select__input.simple {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vs-select__input:focus {
border-radius: 12px 12px 0px 0px;
background: rgba(var(--vs-background), 1);
-webkit-box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transform: translate(0, -4px);
transform: translate(0, -4px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select__input:focus ~ .vs-select__label--placeholder {
opacity: 1;
visibility: visible;
pointer-events: auto;
-webkit-transform: translate(-3%, -28px) !important;
transform: translate(-3%, -28px) !important;
font-size: 0.75rem;
margin-top: 0px !important;
}
.vs-select__input:hover {
background: rgba(var(--vs-background), 1);
-webkit-box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transform: translate(0, -4px);
transform: translate(0, -4px);
}
.vs-select__input:hover ~ .vs-select__label {
margin-top: -4px;
}
.vs-select__input:hover ~ .vs-icon-arrow {
margin-top: -6px;
}
.vs-select__chips {
width: 100%;
height: auto;
position: absolute;
left: 0px;
background: rgba(var(--vs-gray-2), 1);
z-index: 300;
border-radius: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: 0px;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 5px;
min-height: 38px;
-webkit-transition: all 0.25s ease, height 0s;
transition: all 0.25s ease, height 0s;
padding-right: 26px;
}
.vs-select__chips:focus {
border-radius: 12px 12px 0px 0px;
background: rgba(var(--vs-background), 1);
-webkit-box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transform: translate(0, -4px);
transform: translate(0, -4px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select__chips:hover {
background: rgba(var(--vs-background), 1);
-webkit-box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transform: translate(0, -4px);
transform: translate(0, -4px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select__chips:hover ~ .vs-icon-arrow {
margin-top: -6px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select__chips__input {
width: auto;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
max-width: 100%;
position: relative;
min-width: 0px;
border: 0px solid transparent;
background: transparent;
margin: 2px 3px;
min-width: 30px;
}
.vs-select__chips__input::-webkit-input-placeholder {
color: rgba(var(--vs-text), 0.4);
}
.vs-select__chips__input::-moz-placeholder {
color: rgba(var(--vs-text), 0.4);
}
.vs-select__chips__input:-ms-input-placeholder {
color: rgba(var(--vs-text), 0.4);
}
.vs-select__chips__input::-ms-input-placeholder {
color: rgba(var(--vs-text), 0.4);
}
.vs-select__chips__input::placeholder {
color: rgba(var(--vs-text), 0.4);
}
.vs-select__chips__chip {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
position: relative;
background: rgba(var(--vs-background), 1);
border-radius: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0px 6px;
margin: 2px 3px;
padding-right: 10px;
font-size: 0.84rem;
border: 2px solid rgba(var(--vs-gray-2), 1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: rgba(var(--vs-text), 1);
}
.vs-select__chips__chip.isCollapse {
padding-right: 6px !important;
}
.vs-select__chips__chip__close {
position: absolute;
top: -4px;
right: -4px;
width: 15px;
height: 15px;
background: rgba(var(--vs-gray-4), 1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
font-size: 0.75rem;
cursor: pointer;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select__chips__chip__close:hover {
background: rgba(var(--vs-danger), 1);
}
.vs-select__chips__chip__close:hover .vs-icon-close {
--vs-color: var(--vs-background);
}
.vs-select__chips__chip__close:hover .vs-icon-close:after {
width: 12px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.vs-select__chips__chip__close:hover .vs-icon-close:before {
width: 12px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.vs-select__chips__chip__close .vs-icon-close {
--vs-color: var(--vs-text);
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.vs-select__options {
--vs-color: var(--vs-primary);
position: absolute;
z-index: 99999;
background: rgba(var(--vs-background), 1);
padding: 5px;
border-radius: 0px 0px 12px 12px;
overflow: hidden;
-webkit-box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-select__options.top {
border-radius: 12px 12px 0px 0px;
-webkit-box-shadow: 0px -10px 20px -5px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px -10px 20px -5px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-select__options.top:after {
top: auto;
bottom: -10px;
}
.vs-select__options:after {
content: "";
position: absolute;
top: -10px;
width: 80%;
margin-left: 10%;
left: 0px;
height: 10px;
background: rgba(var(--vs-background), 1);
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
z-index: 200;
-webkit-transition: all 0.25s ease 0.05s;
transition: all 0.25s ease 0.05s;
opacity: 1;
}
.vs-select__options__content {
max-height: 200px;
overflow: auto;
height: auto;
z-index: 100;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
position: relative;
scroll-behavior: smooth;
}
.vs-select__options__content__not-data {
font-size: 0.8rem;
text-align: center;
padding: 6px 10px;
}
.vs-select__options__content::-webkit-scrollbar {
width: 5px;
height: 5px;
display: block;
background: transparent;
}
.vs-select__options__content::-webkit-scrollbar-thumb {
background: rgba(var(--vs-gray-3), 1);
border-radius: 5px;
}
.vs-select__label {
position: absolute;
left: 14px;
font-size: 0.8rem;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
cursor: text;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
opacity: 0.4;
z-index: 500;
}
.vs-select__label--hidden {
opacity: 0;
visibility: hidden;
}
.vs-select__label--hidden.vs-select__label--placeholder {
opacity: 1;
visibility: visible;
pointer-events: auto;
-webkit-transform: translate(-3%, -28px) !important;
transform: translate(-3%, -28px) !important;
font-size: 0.75rem;
margin-top: 0px !important;
}
.vs-select__label--label {
opacity: 1;
visibility: visible;
pointer-events: auto;
-webkit-transform: translate(-3%, -28px) !important;
transform: translate(-3%, -28px) !important;
font-size: 0.75rem;
margin-top: 0px !important;
}
.vs-select__loading {
position: absolute;
width: 22px;
height: 22px;
right: 7px;
pointer-events: none;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: inherit;
cursor: default;
z-index: 600;
}
.vs-select__loading:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(var(--vs-primary), 1);
border-radius: inherit;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
-webkit-animation: rotateInputLoading 0.8s ease infinite;
animation: rotateInputLoading 0.8s ease infinite;
top: 0px;
content: "";
}
.vs-select__loading:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0px;
position: absolute;
width: 100%;
height: 100%;
border: 2px dashed rgba(var(--vs-primary), 1);
border-radius: inherit;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
-webkit-animation: rotateInputLoading 0.8s linear infinite;
animation: rotateInputLoading 0.8s linear infinite;
opacity: 0.2;
content: "";
}
.vs-select__loading ~ .vs-icon-arrow {
opacity: 0 !important;
}
.vs-select__message {
font-size: 0.7rem;
position: relative;
padding: 0px 7px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
overflow: hidden;
}
.vs-select__message--success {
color: rgba(var(--vs-success), 1);
}
.vs-select__message--danger {
color: rgba(var(--vs-danger), 1);
}
.vs-select__message--warn {
color: rgba(var(--vs-warn), 1);
}
.vs-select__message--dark {
color: rgba(var(--vs-dark), 1);
}
.vs-select__message--primary {
color: rgba(var(--vs-primary), 1);
}
.vs-darken .vs-select__options.isColorDark {
--vs-color: 0, 0, 0 !important;
}
.vs-darken .vs-select__options.isColorDark .vs-select__option:hover {
background: rgba(var(--vs-color), 0.2);
color: rgba(var(--vs-text), 1);
}
.vs-darken .vs-select__options.isColorDark .activeOption {
color: rgba(var(--vs-text), 1);
background: rgba(var(--vs-color), 0.6);
}
.vs-select__option {
border: 0px;
width: 100%;
padding: 6px 10px;
text-align: left;
background: transparent;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
color: rgba(var(--vs-text), 1);
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
margin: 2px 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: cneter;
-ms-flex-align: cneter;
align-items: cneter;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
overflow: hidden;
opacity: 1;
visibility: visible;
max-height: 40px;
}
.vs-select__option.hiddenOption {
opacity: 0;
visibility: hidden;
max-height: 0px;
padding-top: 0px;
padding-bottom: 0px;
border: 0px;
margin: 0px;
}
.vs-select__option.isMultiple {
padding: 0px;
padding-left: 5px;
}
.vs-select__option.isMultiple .vs-select__option-group {
padding-left: 0px;
}
.vs-select__option.isMultiple.isHover {
background: rgba(var(--vs-gray-2), 1) !important;
}
.vs-select__option.isMultiple:disabled .vs-checkbox-content {
pointer-events: none;
}
.vs-select__option.isMultiple:hover {
padding-left: 5px !important;
}
.vs-select__option.isMultiple .vs-checkbox-content {
width: 100%;
pointer-events: none;
}
.vs-select__option.isMultiple .vs-checkbox-content .vs-checkbox-con {
-webkit-transform: scale(0.85);
transform: scale(0.85);
}
.vs-select__option.isMultiple .vs-checkbox-content .vs-checkbox-label {
width: calc(100% - 23px);
text-align: left;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.vs-select__option.isMultiple.activeOption {
pointer-events: auto !important;
}
.vs-select__option.isHover {
background: rgba(var(--vs-gray-2), 1);
}
.vs-select__option.activeOption {
background: rgba(var(--vs-color), 0.05);
color: rgba(var(--vs-color), 1);
pointer-events: none;
}
.vs-select__option:hover:not(:disabled) {
color: rgba(var(--vs-color), 1);
padding-left: 14px;
}
.vs-select__option-group {
padding-left: 10px;
border-bottom: 2px solid rgba(var(--vs-gray-1), 1);
position: relative;
overflow: hidden;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-select__option-group:last-child {
border: 0px;
}
.vs-select__option-group.hiddenOptionGroup {
border-bottom: 0px solid rgba(var(--vs-gray-1), 1);
}
.vs-select__option-group.hiddenOptionGroup h5 {
padding: 0px;
max-height: 0px;
}
.vs-select__option-group h5 {
max-height: 28px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
opacity: 0.5;
margin: 0px;
padding: 0px;
padding: 7px 0px;
font-size: 0.7rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
}
.vs-select__option-group h5 * {
pointer-events: none;
}
.vs-avatar-content {
--vs-color: var(--vs-gray-2);
--vs-badge: var(--vs-primary);
}
.vs-avatar-content {
border-radius: 35%;
z-index: 1;
width: 44px;
height: 44px;
position: relative;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vs-avatar-content.vs-change-color-badge .vs-avatar__badge .vs-avatar__points__point {
background: rgba(var(--vs-background), 1);
}
.vs-avatar-content.vs-change-color:hover .vs-avatar {
-webkit-box-shadow: inset 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 0px 40px 0px rgba(0, 0, 0, 0.1);
}
.vs-avatar-content:hover .vs-avatar {
-webkit-box-shadow: inset 0px 0px 40px 0px rgba(0, 0, 0, 0.04);
box-shadow: inset 0px 0px 40px 0px rgba(0, 0, 0, 0.04);
}
.vs-avatar-content:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.vs-avatar-content--size.history:after {
top: -2px !important;
}
.vs-avatar-content--hasIcons {
margin-right: 20px;
}
.vs-avatar-content--hidden {
display: none;
}
.vs-avatar-content--circle {
border-radius: 50% !important;
}
.vs-avatar-content--circle .vs-avatar__badge {
right: -2px;
bottom: -2px;
}
.vs-avatar-content--circle .vs-avatar__badge.top-right {
top: -2px;
bottom: auto;
}
.vs-avatar-content--circle .vs-avatar__badge.top-left {
top: -2px;
left: -2px;
bottom: auto;
right: auto;
}
.vs-avatar-content--circle .vs-avatar__badge.bottom-left {
left: -2px;
right: auto;
}
.vs-avatar-content--square {
border-radius: 0% !important;
}
.vs-avatar-content.history--gradient:after {
background-image: linear-gradient(40deg, #f99b4a 0%, #df376b 74%, #c52d91 74%) !important;
}
.vs-avatar-content.history .vs-avatar {
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 2px solid rgba(var(--vs-background), 1);
margin: 2px;
}
.vs-avatar-content.history:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border-radius: inherit;
background-color: #FFE53B;
z-index: -1;
background: rgba(var(--vs-color), 1);
}
.vs-avatar-content.vs-component--is-color .vs-avatar {
color: rgba(var(--vs-background), 1);
}
.vs-avatar-content.vs-component--is-color .vs-avatar__points .vs-avatar__points__point {
background: rgba(var(--vs-background), 1);
}
.vs-avatar {
background: rgba(var(--vs-color), 1);
color: #fff;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: rgba(var(--vs-text), 1);
border-radius: inherit;
width: 100%;
height: 100%;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.05);
box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.05);
}
.vs-avatar i {
font-size: 1.4rem;
}
.vs-avatar img {
width: 100%;
height: auto;
display: block;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
border-radius: inherit;
}
.vs-avatar__loading {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.5);
z-index: 100;
height: 100%;
border-radius: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-avatar__loading__animate {
height: 60%;
width: 60%;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
.vs-avatar__loading__animate:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius: inherit;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
-webkit-animation: rotateInputLoading 0.8s ease infinite;
animation: rotateInputLoading 0.8s ease infinite;
top: 0px;
content: "";
}
.vs-avatar__loading__animate:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0px;
position: absolute;
width: 100%;
height: 100%;
border: 2px dashed #fff;
border-radius: inherit;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
-webkit-animation: rotateInputLoading 0.8s linear infinite;
animation: rotateInputLoading 0.8s linear infinite;
opacity: 0.2;
content: "";
}
.vs-avatar--letter--3 {
font-size: 0.9rem;
}
.vs-avatar--letter--4 {
font-size: 0.8rem;
}
.vs-avatar--letter--5 {
font-size: 0.7rem;
}
.vs-avatar--letter--6 {
font-size: 0.6rem;
}
.vs-avatar__badge {
position: absolute;
width: 13px;
height: 13px;
background: rgba(var(--vs-badge), 1);
border-radius: 50%;
border: 2px solid rgba(var(--vs-background), 1) !important;
right: -4px;
bottom: -4px;
font-size: 0.6rem;
font-weight: bold;
z-index: 200;
color: rgba(var(--vs-text), 1);
}
.vs-avatar__badge.isSlot, .vs-avatar__badge.writing {
width: auto;
height: auto;
border-radius: 7px;
min-width: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: rgba(var(--vs-background), 1);
line-height: 0.9rem;
padding: 0px 3px;
min-height: 18px;
}
.vs-avatar__badge.top-right {
top: -4px;
bottom: auto;
}
.vs-avatar__badge.top-left {
top: -4px;
left: -4px;
bottom: auto;
right: auto;
}
.vs-avatar__badge.bottom-left {
left: -4px;
right: auto;
}
.vs-avatar__points {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-avatar__points__point {
width: 5px;
height: 5px;
background: rgba(var(--vs-text), 1);
margin: 0px 2px;
border-radius: 50%;
}
.vs-avatar__points__point:nth-child(1) {
-webkit-animation: point 1.2s ease infinite;
animation: point 1.2s ease infinite;
}
.vs-avatar__points__point:nth-child(2) {
-webkit-animation: point 1.2s ease infinite 0.4s;
animation: point 1.2s ease infinite 0.4s;
}
.vs-avatar__points__point:nth-child(3) {
-webkit-animation: point 1.2s ease infinite 0.8s;
animation: point 1.2s ease infinite 0.8s;
}
.vs-avatar__latest {
background: rgba(0, 0, 0, 0.5);
top: 0px;
left: 0px;
width: 100%;
height: 100%;
position: absolute;
z-index: 300;
border-radius: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
font-weight: 600;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vs-avatar__icons {
position: absolute;
width: auto;
height: auto;
min-height: 90%;
background: rgba(var(--vs-gray-3), 1);
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
right: -20px;
padding: 3px;
padding-left: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
z-index: -1;
border-radius: 5px 5px 5px 5px;
font-size: 1rem;
}
.vs-avatar__icons i {
cursor: pointer;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-avatar__icons i:hover {
opacity: 0.7;
}
@-webkit-keyframes point {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
opacity: 1;
}
}
@keyframes point {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
opacity: 1;
}
}
.vs-avatar__group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-left: 18px;
}
.vs-avatar__group.float {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding-left: 0px;
}
.vs-avatar__group.float .vs-avatar-content {
position: relative;
z-index: 2;
border: 3px solid vs-color("background");
margin: 0px;
}
.vs-avatar__group:not(.float) .vs-avatar-content {
margin-left: -18px;
position: relative;
z-index: 2;
}
.vs-avatar__group:not(.float) .vs-avatar-content:hover .vs-avatar {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
.vs-avatar__group:not(.float) .vs-avatar-content:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
.vs-avatar__group:not(.float) .vs-avatar-content .vs-avatar__latest {
width: calc(100% - 6px);
height: calc(100% - 6px);
margin: 3px;
}
.vs-avatar__group:not(.float) .vs-avatar-content:not(.vs-change-color) .vs-avatar {
background: vs-color("background");
}
.vs-avatar__group:not(.float) .vs-avatar-content img {
width: calc(100% - 6px);
}
.vs-avatar__group:not(.float) .vs-avatar-content:hover:not(.vs-avatar-content--hasIcons) {
-webkit-transform: translate(-10px);
transform: translate(-10px);
}
.vs-avatar__group:not(.float) .vs-avatar-content:hover:not(.vs-avatar-content--hasIcons) .vs-avatar {
-webkit-transform: scale(1);
transform: scale(1);
}
.vs-avatar__group:not(.float) .vs-avatar-content--hasIcons {
margin-right: 0px;
}
.vs-avatar__group:not(.float) .vs-avatar-content--hasIcons:hover {
-webkit-transform: translate(-34px) !important;
transform: translate(-34px) !important;
}
.vs-radio-content {
--vs-color: var(--vs-primary);
}
.vs-radio-content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-radio-content.active .vs-radio__effect__icon {
opacity: 0;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.vs-radio-content.active .vs-radio__effect:after {
border: 7px solid rgba(var(--vs-color), 1);
-webkit-box-shadow: 0px 3px 12px 0px rgba(var(--vs-color), 0.3);
box-shadow: 0px 3px 12px 0px rgba(var(--vs-color), 0.3);
}
.vs-radio-content:not(.active) .vs-radio input:hover ~ .vs-radio__effect .vs-radio__effect__icon {
opacity: 0.7;
}
.vs-radio-content:not(.active) .vs-radio input:hover ~ .vs-radio__effect::after {
border: 2px solid rgba(var(--vs-text), 0.2);
}
.vs-radio-content.loading {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vs-radio-content.loading .vs-radio__effect:after {
opacity: 0.1;
}
.vs-radio-content.loading .vs-radio__effect__loading {
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
}
.vs-radio-content.loading .vs-radio__effect__loading:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
border: 2px solid rgba(var(--vs-text), 0.4);
border-top: 2px solid rgba(var(--vs-text), 0);
border-left: 2px solid rgba(var(--vs-text), 0);
border-bottom: 2px solid rgba(var(--vs-text), 0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: block;
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 0.4);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 0.4);
-webkit-animation: loadingRadio 0.6s ease infinite;
animation: loadingRadio 0.6s ease infinite;
}
.vs-radio-content.loading .vs-radio__effect__loading:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
border: 2px dashed rgba(var(--vs-text), 0.4);
border-top: 2px solid rgba(var(--vs-text), 0);
border-left: 2px solid rgba(var(--vs-text), 0);
border-bottom: 2px solid rgba(var(--vs-text), 0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: block;
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 0.4);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 0.4);
-webkit-animation: loadingRadio 0.6s linear infinite;
animation: loadingRadio 0.6s linear infinite;
}
.vs-radio-content label {
cursor: pointer;
}
.vs-radio-content.disabled {
opacity: 0.5;
pointer-events: none;
}
.vs-radio-content.disabled .vs-radio__effect {
background: rgba(var(--vs-gray-3), 1);
}
.vs-radio-content.disabled label {
pointer-events: none;
}
.vs-radio {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
margin: 0px;
padding: 0px;
border-radius: 50%;
position: relative;
z-index: 10;
}
.vs-radio__label {
margin: 0px 6px;
}
.vs-radio__effect {
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
left: 0px;
top: 0px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 10;
}
.vs-radio__effect__icon {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-radio__effect__icon i {
font-size: 0.75rem;
}
.vs-radio__effect:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
border: 2px solid rgba(var(--vs-text), 0.4);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: block;
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 0.4);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 0.4);
}
.vs-radio input {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
position: relative;
z-index: 100;
opacity: 0;
cursor: pointer;
}
.vs-radio input:active ~ .vs-radio__effect:after {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
@-webkit-keyframes loadingRadio {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadingRadio {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.vs-tooltip {
--vs-color: var(--vs-text);
}
.vs-tooltip-enter-active, .vs-tooltip-leave-active {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-tooltip-enter, .vs-tooltip-leave-to {
opacity: 0;
}
.vs-tooltip-enter.top, .vs-tooltip-leave-to.top {
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.vs-tooltip-enter.bottom, .vs-tooltip-leave-to.bottom {
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
.vs-tooltip-enter.left, .vs-tooltip-leave-to.left {
-webkit-transform: translate(5px);
transform: translate(5px);
}
.vs-tooltip-enter.right, .vs-tooltip-leave-to.right {
-webkit-transform: translate(-5px);
transform: translate(-5px);
}
.darken .vs-tooltip {
--vs-color: var(--vs-gray-3);
color: #fff;
}
.darken .vs-tooltip:not(.vs-change-color) {
color: #fff !important;
}
.vs-tooltip {
background: rgba(var(--vs-color), 1);
color: rgba(var(--vs-background), 1);
position: absolute;
z-index: 1000000;
text-align: center;
padding: 5px 10px;
border-radius: 12px;
font-size: 0.85rem;
max-width: 350px;
min-width: 30px;
min-height: 30px;
}
.vs-tooltip.loading {
color: rgba(var(--vs-background), 0.2);
}
.vs-tooltip.loading * {
opacity: 0.5;
pointer-events: none;
}
.vs-tooltip__loading {
width: 22px;
height: 22px;
position: absolute;
display: block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
opacity: 1 !important;
}
.vs-tooltip__loading:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
border: 2px solid rgba(var(--vs-background), 1);
border-top: 2px solid rgba(var(--vs-background), 0);
border-left: 2px solid rgba(var(--vs-background), 0);
border-bottom: 2px solid rgba(var(--vs-background), 0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: block;
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
-webkit-animation: loadingTooltip 0.6s ease infinite;
animation: loadingTooltip 0.6s ease infinite;
}
.vs-tooltip__loading:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
border: 2px dashed rgba(var(--vs-background), 1);
border-top: 2px solid rgba(var(--vs-background), 0);
border-left: 2px solid rgba(var(--vs-background), 0);
border-bottom: 2px solid rgba(var(--vs-background), 0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: block;
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
-webkit-animation: loadingTooltip 0.6s linear infinite;
animation: loadingTooltip 0.6s linear infinite;
}
.vs-tooltip.borderThick {
background: rgba(var(--vs-background), 1);
color: rgba(var(--vs-color), 1);
-webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-tooltip.borderThick.top {
border-bottom: 4px solid rgba(var(--vs-color), 1);
}
.vs-tooltip.borderThick.top:after {
bottom: -7px;
}
.vs-tooltip.borderThick.left {
border-right: 4px solid rgba(var(--vs-color), 1);
}
.vs-tooltip.borderThick.left:after {
right: -7px;
}
.vs-tooltip.borderThick.right {
border-left: 4px solid rgba(var(--vs-color), 1);
}
.vs-tooltip.borderThick.right:after {
left: -7px;
}
.vs-tooltip.borderThick.bottom {
border-top: 4px solid rgba(var(--vs-color), 1);
}
.vs-tooltip.borderThick.bottom:after {
top: -7px;
}
.vs-tooltip.borderThick:before {
width: 100%;
height: 100%;
z-index: -1;
background: inherit;
border-radius: inherit;
top: 0px;
left: 0px;
content: "";
position: absolute;
}
.vs-tooltip.borderThick:after {
background: rgba(var(--vs-color), 1) !important;
}
.vs-tooltip.border {
background: rgba(var(--vs-background), 1);
color: rgba(var(--vs-color), 1);
border: 2px solid rgba(var(--vs-color), 1);
}
.vs-tooltip.border:before {
width: 100%;
height: 100%;
z-index: -1;
background: inherit;
border-radius: inherit;
top: 0px;
left: 0px;
content: "";
position: absolute;
}
.vs-tooltip.border:after {
border: 2px solid rgba(var(--vs-color), 1);
width: 12px !important;
height: 12px !important;
}
.vs-tooltip.circle {
border-radius: 20px;
}
.vs-tooltip.square {
border-radius: 0px;
}
.vs-tooltip.notArrow:after {
display: none;
}
.vs-tooltip.shadow {
background: rgba(var(--vs-background), 1);
color: rgba(var(--vs-color), 1);
-webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-tooltip.shadow:before {
width: 100%;
height: 100%;
z-index: -1;
background: inherit;
border-radius: inherit;
top: 0px;
left: 0px;
content: "";
position: absolute;
}
.vs-tooltip.shadow:after {
-webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-tooltip.isDark {
--vs-color: var(--vs-gray-3);
color: #fff;
}
.vs-tooltip.top:after {
content: "";
position: absolute;
bottom: -3px;
background: inherit;
width: 10px;
height: 10px;
left: 50%;
-webkit-transform: translate(-50%) rotate(45deg);
transform: translate(-50%) rotate(45deg);
z-index: -2;
border-radius: 0px 0px 2px 0px;
}
.vs-tooltip.bottom:after {
content: "";
position: absolute;
top: -3px;
background: inherit;
width: 10px;
height: 10px;
left: 50%;
-webkit-transform: translate(-50%) rotate(45deg);
transform: translate(-50%) rotate(45deg);
z-index: -2;
border-radius: 2px 0px 0px 0px;
}
.vs-tooltip.left:after {
content: "";
position: absolute;
right: -3px;
background: inherit;
width: 10px;
height: 10px;
top: 50%;
-webkit-transform: translate(0, -50%) rotate(45deg);
transform: translate(0, -50%) rotate(45deg);
z-index: -2;
border-radius: 0px 2px 0px 0px;
}
.vs-tooltip.right:after {
content: "";
position: absolute;
left: -3px;
background: inherit;
width: 10px;
height: 10px;
top: 50%;
-webkit-transform: translate(0, -50%) rotate(45deg);
transform: translate(0, -50%) rotate(45deg);
z-index: -2;
border-radius: 0px 0px 0px 2px;
}
@-webkit-keyframes loadingTooltip {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadingTooltip {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.vs-dialog-content {
--vs-color: var(--vs-primary);
}
.vs-dialog-enter-active {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-dialog-enter-active .vs-dialog:not(.vs-dialog--fullScreen) {
-webkit-animation: rebound 0.4s;
animation: rebound 0.4s;
}
.vs-dialog-leave-active {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.vs-dialog-leave-active .vs-dialog {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.vs-dialog-enter, .vs-dialog-leave-to {
opacity: 0;
}
.vs-dialog-enter .vs-dialog, .vs-dialog-leave-to .vs-dialog {
-webkit-transform: scale(0.7);
transform: scale(0.7);
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-dialog-enter .vs-dialog--fullScreen, .vs-dialog-leave-to .vs-dialog--fullScreen {
-webkit-transform: translate(0, 8%) !important;
transform: translate(0, 8%) !important;
}
@-webkit-keyframes rebound {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
40% {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
80% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rebound {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
40% {
-webkit-transform: scale(1.08);
transform: scale(1.08);
}
80% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes reboundClick {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
80% {
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes reboundClick {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
80% {
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.vs-dialog-content {
background: rgba(0, 0, 0, var(--vs-background-opacity));
position: fixed;
left: 0px;
top: 0px;
z-index: var(--vs-zindex-2);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
padding-top: 80px;
padding-bottom: 80px;
}
.vs-dialog-content.fullScreen {
padding: 0px;
overflow: hidden;
}
.vs-dialog-content.blur {
-webkit-backdrop-filter: saturate(180%) blur(15px);
backdrop-filter: saturate(180%) blur(15px);
}
.vs-dialog {
background: rgba(var(--vs-background), 1);
color: rgba(var(--vs-text), 1);
position: relative;
min-width: 400px;
border-radius: var(--vs-radius);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
max-width: 800px;
margin: auto;
}
.vs-dialog--notCenter .vs-dialog__header {
display: block;
}
.vs-dialog__loading {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
border-radius: inherit;
background: rgba(var(--vs-background), 0.8);
z-index: 100;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-dialog__loading:after {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: inherit;
border: 2px solid rgba(var(--vs-color), 1);
border-top: 2px solid rgba(var(--vs-color), 0);
border-left: 2px solid rgba(var(--vs-color), 0);
border-bottom: 2px solid rgba(var(--vs-color), 0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: block;
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
-webkit-animation: loadingDialog 0.6s ease infinite;
animation: loadingDialog 0.6s ease infinite;
}
.vs-dialog__loading:before {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: inherit;
border: 2px dashed rgba(var(--vs-color), 1);
border-top: 2px solid rgba(var(--vs-color), 0);
border-left: 2px solid rgba(var(--vs-color), 0);
border-bottom: 2px solid rgba(var(--vs-color), 0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: block;
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
-webkit-animation: loadingDialog 0.6s linear infinite;
animation: loadingDialog 0.6s linear infinite;
}
.vs-dialog--scroll .vs-dialog__content {
max-height: calc(80vh - 200px);
overflow: auto;
}
.vs-dialog--autoWidth {
width: auto !important;
min-width: auto !important;
max-width: auto !important;
}
.vs-dialog--square {
border-radius: 0px;
}
.vs-dialog--square .vs-dialog__close {
border-radius: 0px;
}
.vs-dialog--notPadding .vs-dialog__footer {
padding: 0px;
}
.vs-dialog--notPadding .vs-dialog__content {
padding: 0px;
margin-bottom: 0px !important;
}
.vs-dialog--notPadding .vs-dialog__header {
padding: 0px;
}
.vs-dialog--rebound {
-webkit-animation: reboundClick 0.3s !important;
animation: reboundClick 0.3s !important;
}
.vs-dialog--fullScreen {
width: calc(100% - 30px) !important;
height: calc(100% - 30px) !important;
max-width: none !important;
max-height: none !important;
}
.vs-dialog__footer {
padding: 10px 16px;
padding-top: 0px;
}
.vs-dialog__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 10px 16px;
}
.vs-dialog__content {
padding: 10px 16px;
width: 100%;
position: relative;
border-radius: inherit;
}
.vs-dialog__content.notFooter {
margin-bottom: 20px;
}
.vs-dialog__close {
--vs-color: var(--vs-text);
position: absolute;
top: -6px;
right: -6px;
padding: 0px;
margin: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: inherit;
border-radius: 12px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
z-index: 200;
border: 0px;
}
.vs-dialog__close i {
width: 34px;
height: 34px;
opacity: 0.7;
}
.vs-dialog__close i:after {
width: 14px;
}
.vs-dialog__close i:before {
width: 14px;
}
.vs-dialog__close:hover {
-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
.vs-dialog__close:hover i {
opacity: 1;
}
@-webkit-keyframes loadingDialog {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadingDialog {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@media (max-width: 600px) {
.vs-dialog {
min-width: calc(100vw - 20px);
max-width: calc(100vw - 20px);
margin: auto 10px;
}
}
.vs-pagination-content {
--vs-color: var(--vs-primary);
}
.vs-pagination-content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: center;
align-self: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-pagination-content.notMargin .vs-pagination__dotted {
background: rgba(var(--vs-gray-3), 1);
margin: 0px;
}
.vs-pagination-content.notMargin .vs-pagination__arrow {
margin: 0px !important;
border-radius: 0px;
}
.vs-pagination-content.notMargin .vs-pagination__arrow:first-of-type {
border-radius: 12px 0px 0px 12px;
}
.vs-pagination-content.notMargin .vs-pagination__arrow:last-of-type {
border-radius: 0px 12px 12px 0px;
}
.vs-pagination-content.notMargin .vs-pagination__button {
border-radius: 0px;
margin: 0px !important;
}
.vs-pagination-content.disabled {
opacity: 0.5;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vs-pagination-content.square .vs-pagination__active {
border-radius: 0px;
}
.vs-pagination-content.square .vs-pagination__button {
border-radius: 0px;
}
.vs-pagination-content.square .vs-pagination__arrow {
border-radius: 0px;
}
.vs-pagination-content.circle .vs-pagination__active {
border-radius: 50%;
}
.vs-pagination-content.circle .vs-pagination__button {
border-radius: 50%;
}
.vs-pagination-content.circle .vs-pagination__arrow {
border-radius: 50%;
}
.vs-pagination-content.buttonsDotted .vs-pagination__arrow {
width: 15px;
height: 12px;
min-width: 15px;
padding: 0px;
background: transparent;
}
.vs-pagination-content.buttonsDotted .vs-pagination__arrow i {
width: 6px;
height: 6px;
}
.vs-pagination-content.buttonsDotted .vs-pagination__arrow i:before {
width: 1px;
}
.vs-pagination-content.buttonsDotted .vs-pagination__arrow i:after {
height: 1px;
}
.vs-pagination-content.buttonsDotted .vs-pagination__dotted {
width: 12px;
height: 12px;
font-size: 0.9rem;
letter-spacing: 1px;
}
.vs-pagination-content.buttonsDotted .vs-pagination__button {
width: 12px;
height: 12px;
}
.vs-pagination-content.buttonsDotted .vs-pagination__button.active {
-webkit-transform: scale(1);
transform: scale(1);
}
.vs-pagination-content.buttonsDotted .vs-pagination__active {
width: 12px;
height: 12px;
-webkit-box-shadow: 0px 2px 10px 0px rgba(var(--vs-color), 0.4);
box-shadow: 0px 2px 10px 0px rgba(var(--vs-color), 0.4);
-webkit-transform: scale(1);
transform: scale(1);
}
.vs-pagination-content.buttonsDotted .vs-pagination__active.move {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.vs-pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: center;
align-self: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
.vs-pagination__progress {
width: calc(100% - 16px);
height: 3px;
background: rgba(var(--vs-gray-3), 1);
position: absolute;
bottom: -8px;
border-radius: 10px;
}
.vs-pagination__progress .progress {
width: 0px;
background: rgba(var(--vs-color), 1);
height: 100%;
position: relative;
border-radius: inherit;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
max-width: 100%;
}
.vs-pagination__slot {
min-height: 36px;
min-width: 36px;
position: relative;
display: block;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-pagination__arrow {
position: relative;
width: auto;
height: 36px;
min-width: 36px;
border-radius: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0px 2px;
background: rgba(var(--vs-gray-3), 1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
border: 0px;
}
.vs-pagination__arrow:disabled {
opacity: 0.4;
pointer-events: none;
}
.vs-pagination__arrow:hover {
background: rgba(var(--vs-gray-4), 1);
}
.vs-pagination__arrow i {
width: 10px;
height: 10px;
position: relative;
display: block;
margin-left: 4px;
-webkit-transform: rotate(-45deg) scale(0.8);
transform: rotate(-45deg) scale(0.8);
}
.vs-pagination__arrow i:before {
width: 2px;
}
.vs-pagination__arrow i:after {
height: 2px;
}
.vs-pagination__arrow.next i {
margin-left: -4px;
-webkit-transform: rotate(135deg) scale(0.8);
transform: rotate(135deg) scale(0.8);
}
.vs-pagination__active {
position: absolute;
left: 50%;
top: 0px;
width: 36px;
height: 36px;
background: rgba(var(--vs-color), 1);
border-radius: 12px;
z-index: 100;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 0.9rem;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
color: #fff;
-webkit-box-shadow: 0px 5px 20px 0px rgba(var(--vs-color), 0.3);
box-shadow: 0px 5px 20px 0px rgba(var(--vs-color), 0.3);
cursor: default;
}
.vs-pagination__active.move {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.vs-pagination__dotted {
width: 36px;
height: 36px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 1.4rem;
letter-spacing: 2px;
margin: 0px 2px;
cursor: pointer;
}
.vs-pagination__dotted:hover span.dotted {
opacity: 0;
margin-left: -1px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-pagination__dotted:hover .con-arrows {
opacity: 1;
margin-left: -1px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-pagination__dotted.next:hover span.dotted {
opacity: 0;
margin-left: 1px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-pagination__dotted.next:hover .con-arrows {
opacity: 1;
margin-left: 1px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-pagination__dotted span.dotted {
margin-right: -2px;
text-align: center;
}
.vs-pagination__dotted.next .con-arrows {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
margin-left: -5px;
}
.vs-pagination__dotted .con-arrows {
width: 10px;
height: 10px;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: 5px;
opacity: 0;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.vs-pagination__dotted .con-arrows i {
width: 10px;
height: 10px;
position: relative;
display: block;
-webkit-transform: rotate(-45deg) scale(0.8);
transform: rotate(-45deg) scale(0.8);
}
.vs-pagination__dotted .con-arrows i:before {
width: 2px;
}
.vs-pagination__dotted .con-arrows i:after {
height: 2px;
}
.vs-pagination__dotted .con-arrows i:last-child {
position: absolute;
top: 0px;
margin-left: 6px;
}
.vs-pagination__button {
width: 36px;
height: 36px;
border-radius: 12px;
padding: 0px;
background: rgba(var(--vs-gray-3), 1);
margin: 0px 2px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 0.9rem;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
color: rgba(var(--vs-text), 1);
position: relative;
border: 0px;
}
.vs-pagination__button.loading {
border-radius: 50%;
opacity: 0.5;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vs-pagination__button.loading:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(var(--vs-color), 1);
border-top: 2px solid rgba(var(--vs-background), 0);
border-left: 2px solid rgba(var(--vs-background), 0);
border-bottom: 2px solid rgba(var(--vs-background), 0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: block;
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
-webkit-animation: loadingPagination 0.6s ease infinite;
animation: loadingPagination 0.6s ease infinite;
}
.vs-pagination__button.loading:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px dashed rgba(var(--vs-color), 1);
border-top: 2px solid rgba(var(--vs-background), 0);
border-left: 2px solid rgba(var(--vs-background), 0);
border-bottom: 2px solid rgba(var(--vs-background), 0);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: block;
-webkit-box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
box-shadow: 0px 0px 0px 0px rgba(var(--vs-color), 1);
-webkit-animation: loadingPagination 0.6s linear infinite;
animation: loadingPagination 0.6s linear infinite;
}
.vs-pagination__button.disabled {
opacity: 0.4;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.vs-pagination__button:hover {
background: rgba(var(--vs-gray-4), 1);
}
.vs-pagination__button:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
@-webkit-keyframes loadingPagination {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadingPagination {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.vs-table-content {
--vs-color: var(--vs-primary);
}
.vs-table-content {
width: 100%;
border-radius: 16px;
}
.vs-table {
width: 100%;
font-size: 0.9rem;
margin: 0px;
overflow: auto;
}
.vs-table table {
margin: 0px;
border-collapse: collapse;
width: 100%;
min-width: 500px;
border: 0px;
}
.vs-table.striped .vs-table__tr:nth-child(2n) {
background: rgba(var(--vs-gray-1), 1) !important;
}
.vs-table_not-found {
display: none;
padding: 20px;
text-align: center;
width: 100%;
}
.vs-table_not-found tr {
text-align: center;
}
.vs-table_not-found tr td {
padding: 20px;
border: 0px;
}
.vs-table__tbody:empty {
display: none;
background: #000;
}
.vs-table__tbody:empty ~ .vs-table_not-found {
display: table-row-group;
}
.vs-table.isSelectedValue tr {
cursor: pointer;
}
.vs-table__footer {
padding: 8px 10px;
background: rgba(var(--vs-gray-2), 1);
border-radius: 0px 0px 14px 14px;
}
.vs-table__header {
width: 100%;
padding: 10px;
background: rgba(var(--vs-gray-2), 1);
border-radius: 14px 14px 0px 0px;
}
.vs-table__header ~ .vs-table .vs-table__th:first-child {
border-radius: 0px;
}
.vs-table__header ~ .vs-table .vs-table__th:last-child {
border-radius: 0px;
}
.vs-table__thead {
width: 100%;
}
.vs-table__thead .vs-table__th {
background: rgba(var(--vs-gray-2), 1);
}
.vs-table__thead .vs-table__th:first-child {
border-radius: 14px 0px 0px 0px;
}
.vs-table__thead .vs-table__th:last-child {
border-radius: 0px 14px 0px 0px;
}
.isMultipleSelected .vs-table__tr .vs-table__td {
border-radius: 0px !important;
}
.vs-table__tr {
padding: 5px;
border: 0px;
}
.vs-table__tr.expand {
cursor: pointer;
}
.vs-table__tr.vs-change-color .vs-table__td {
background: rgba(var(--vs-color), 0.1) !important;
color: rgba(var(--vs-color), 1) !important;
}
.vs-table__tr.vs-change-color .vs-table__td:hover {
background: rgba(var(--vs-color), 0.2) !important;
}
.vs-table__tr:first-of-type .vs-table__td:last-child {
border-radius: 0px 0px 15px 0px;
}
.vs-table__tr:first-of-type .vs-table__td:first-child {
border-radius: 0px 0px 0px 15px;
}
.vs-table__tr.isExpand:first-of-type .vs-table__td {
background: rgba(var(--vs-gray-1), 1) !important;
border-radius: 0px;
}
.vs-table__tr.isExpand:not(:first-of-type) .vs-table__td {
background: rgba(var(--vs-gray-1), 1) !important;
}
.vs-table__tr.isExpand:not(:first-of-type) .vs-table__td:last-child {
border-radius: 0px 15px 0px 0px;
}
.vs-table__tr.isExpand:not(:first-of-type) .vs-table__td:first-child {
border-radius: 15px 0px 0px 0px;
}
.vs-table__tr.isExpand:not(:first-of-type) + .vs-table__tr__expand td {
border-radius: 0px 0px 15px 15px !important;
}
.vs-table__tr.selected .vs-table__td {
background: rgba(var(--vs-color), 0.1) !important;
color: rgba(var(--vs-color), 1) !important;
}
.vs-table__tr .vs-table__td {
background: rgba(var(--vs-bg), 0.1);
color: rgba(var(--vs-bg), 1);
}
.vs-table__tr.vs-change-color:hover .vs-table__td {
background: rgba(var(--vs-color), 0.2) !important;
}
.vs-table__tr:hover .vs-table__td {
background: rgba(var(--vs-gray-1), 1);
}
.vs-table__tr__expand {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
border: 0px;
}
.vs-table__tr__expand td {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
padding: 0px;
background: rgba(var(--vs-gray-1), 1) !important;
border: 0px;
}
.vs-table__tr__expand td .vs-table__expand__td__content {
overflow: hidden;
display: block;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-table__tr__expand td .vs-table__expand__td__content__sub {
padding: 10px 15px;
z-index: 1;
position: relative;
}
.fade-expand-enter-active, .fade-expand-leave-active {
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.fade-expand-enter, .fade-expand-leave-to {
opacity: 0;
}
.fade-expand-enter td .vs-table__expand__td__content, .fade-expand-leave-to td .vs-table__expand__td__content {
height: 0px !important;
}
.vs-table__th {
padding: 10px 12px;
text-align: left;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
font-size: 0.8rem;
border: 0px;
}
.vs-table__th.sort .vs-table__th__content {
pointer-events: none;
}
.vs-table__th.sort:hover {
background: rgba(var(--vs-gray-3), 1);
}
.vs-table__th[data-sort-type=asc] .icon-sort-2 {
margin-top: -7px;
-webkit-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
}
.vs-table__th[data-sort-type=asc] .icon-sort-1 {
margin-top: -1px;
-webkit-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
}
.vs-table__th[data-sort-type=desc] .icon-sort-2 {
margin-top: -7px;
}
.vs-table__th[data-sort-type=desc] .icon-sort-1 {
margin-top: -1px;
-webkit-transform: rotate(-135deg) !important;
transform: rotate(-135deg) !important;
}
.vs-table__th__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-table__th__content__icons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 7px;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.vs-table__th__content .vs-icon-arrow {
position: relative;
display: block;
}
.vs-table__th__content .vs-icon-arrow.icon-sort-1 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.vs-table__th__content .vs-icon-arrow.icon-sort-2 {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.vs-table__td {
padding: 10px 12px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
font-size: 0.8rem;
border: 0px;
}
.vs-table__td:last-child {
border-radius: 0px 15px 15px 0px;
}
.vs-table__td:first-child {
border-radius: 15px 0px 0px 15px;
}
.vs-table__td.isCheckbox {
width: 23px;
}
.vs-table__td.isEdit {
text-decoration: underline;
cursor: pointer;
}
.vs-navbar-content {
--vs-color: var(--vs-background);
}
.vs-navbar-content {
width: 100%;
position: absolute;
z-index: 9000;
top: 0px;
left: 0px;
width: 100%;
border-radius: 0px 0px 15px 15px;
background: rgba(var(--vs-color), 1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
color: rgba(var(--vs-text), 1);
}
.vs-navbar-content.paddingScroll:not(.paddingScrollActive) {
padding-top: 20px;
padding-bottom: 20px;
}
.vs-navbar-content.paddingScroll:not(.paddingScrollActive) .vs-navbar__group__items {
margin-bottom: -30px;
}
.vs-navbar-content.vsNavbarSquare {
border-radius: 0px;
}
.vs-navbar-content.textWhite {
color: #fff;
}
.vs-navbar-content.textWhite .vs-navbar__line {
background: #fff;
}
.vs-navbar-content.textWhite .vs-navbar__item:before {
background: #fff;
}
.vs-navbar-content.fixed {
position: fixed !important;
}
.vs-navbar-content.shadow, .vs-navbar-content.shadowActive {
-webkit-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-navbar-content.hidden {
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.vs-navbar {
width: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0px 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 44px;
}
.vs-navbar__left {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.vs-navbar__right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.vs-navbar__center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-navbar__line {
position: absolute;
left: 0px;
bottom: 0px;
width: 100px;
background: rgba(var(--vs-text), 1);
height: 3px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-navbar__line.notTransition {
-webkit-transition: none !important;
transition: none !important;
}
.vs-navbar__item {
padding: 10px 15px;
margin: 0px;
border: 0px;
background: transparent;
font-size: 0.85rem;
opacity: 0.7;
-webkit-transition: all 0.25s ease, color 0s;
transition: all 0.25s ease, color 0s;
font-weight: bold;
color: inherit;
}
.vs-navbar__item.active {
opacity: 1;
}
.vs-navbar__item:hover {
opacity: 1;
}
.vs-navbar__group {
position: relative;
}
.vs-navbar__group:hover .vs-navbar__group__item {
opacity: 1;
}
.vs-navbar__group:hover .vs-navbar__group__items {
opacity: 1;
visibility: visible;
-webkit-transform: translate(0, 100%);
transform: translate(0, 100%);
}
.vs-navbar__group__item {
padding: 10px 15px;
background: transparent;
color: inherit;
font-weight: bold;
-webkit-transition: all 0.25s ease, color 0s;
transition: all 0.25s ease, color 0s;
opacity: 0.7;
border: 0px;
}
.vs-navbar__group__items {
position: absolute;
bottom: 0px;
left: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: -12px;
-webkit-transform: translate(0, 90%);
transform: translate(0, 90%);
background: rgba(var(--vs-color), 1);
border-radius: 5px 18px 18px 18px;
padding: 10px;
min-width: 160px;
opacity: 0;
-webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
color: inherit;
visibility: hidden;
}
.vs-navbar__group__items:after {
content: "";
left: 0px;
top: -13px;
background: transparent;
width: 100%;
height: 14px;
position: absolute;
z-index: -1;
}
.vs-navbar__group__items .vs-navbar__item {
text-align: left;
width: 100%;
position: relative;
padding: 5px 10px;
}
.vs-navbar__group__items .vs-navbar__item:before {
content: "";
left: 0px;
top: 0px;
width: 4px;
height: 4px;
background: rgba(var(--vs-text), 1);
position: absolute;
border-radius: 50%;
top: calc(50% - 2px);
opacity: 0;
-webkit-transform: translate(-10px);
transform: translate(-10px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-navbar__group__items .vs-navbar__item.active:before {
opacity: 1;
-webkit-transform: translate(0px);
transform: translate(0px);
}
.vs-sidebar-content {
--vs-color: var(--vs-primary);
}
@-webkit-keyframes delayOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes delayOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.vs-sidebar-content {
position: fixed;
left: 0px;
top: 0px;
width: calc(100% - 50px);
max-width: 260px;
height: 100vh;
border-radius: 0px 30px 30px 0px;
color: rgba(var(--vs-text), 1);
-webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
z-index: 21000;
background: rgba(var(--vs-background), 1);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-transform: translate(-110%);
transform: translate(-110%);
}
.vs-sidebar-content.right {
left: auto;
right: 0px;
-webkit-transform: translate(110%);
transform: translate(110%);
}
.vs-sidebar-content.right.open {
-webkit-transform: translate(0);
transform: translate(0);
}
.vs-sidebar-content.right.reduce .vs-sidebar__item:hover .vs-sidebar__item__text-tooltip {
opacity: 1;
left: auto !important;
right: 60px !important;
}
.vs-sidebar-content.absolute {
position: absolute !important;
z-index: 9001;
height: 100%;
}
.vs-sidebar-content.relative {
position: relative !important;
z-index: 9001;
height: 100%;
}
.vs-sidebar-content.textWhite .vs-sidebar__group__content:after {
background: rgba(255, 255, 255, 0.4);
}
.vs-sidebar-content.textWhite .vs-sidebar__item:after {
background: #fff !important;
}
.vs-sidebar-content.textWhite .vs-sidebar__item.active {
color: #fff !important;
}
.vs-sidebar-content.notShadow {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.vs-sidebar-content.square {
border-radius: 0px;
}
.vs-sidebar-content.notLineActive .vs-sidebar .vs-sidebar__item:after {
display: none;
}
.vs-sidebar-content.open {
-webkit-transform: translate(0%);
transform: translate(0%);
}
.vs-sidebar-content.reduce .vs-sidebar__footer {
padding: 10px 0px;
}
.vs-sidebar-content.reduce .vs-sidebar__header .vs-avatar-content {
width: 44px !important;
height: 44px !important;
}
.vs-sidebar-content.reduce .vs-sidebar__logo img {
width: 80%;
}
.vs-sidebar-content.reduce .vs-sidebar__item {
padding-left: 16px !important;
min-height: 47px;
}
.vs-sidebar-content.reduce .vs-sidebar__item:not(.hasIcon) .vs-sidebar__item__text {
font-size: 0.5rem;
}
.vs-sidebar-content.reduce .vs-sidebar__item.hasIcon .vs-sidebar__item__text {
-webkit-transform: translate(-10px);
transform: translate(-10px);
margin-left: -50px;
}
.vs-sidebar-content.reduce .vs-sidebar__item__arrow {
position: absolute;
left: 36px;
top: 10px;
-webkit-animation: delayOpacity 0.6s ease;
animation: delayOpacity 0.6s ease;
width: 5px;
height: 5px;
}
.vs-sidebar-content.reduce .vs-sidebar__item:hover .vs-sidebar__item__text-tooltip {
opacity: 1;
left: 60px;
}
.vs-sidebar-content.reduce .vs-sidebar__item.hasIcon {
padding: 0px !important;
}
.vs-sidebar-content.reduce .vs-sidebar__item.hasIcon:after {
left: -6px;
}
.vs-sidebar-content .vs-sidebar__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
padding: 25px 0px;
min-height: 80px;
}
.vs-sidebar-content .vs-sidebar__logo img {
max-width: 120px;
max-height: 35px;
}
.vs-sidebar-content .vs-sidebar {
overflow-x: hidden;
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.vs-sidebar-content .vs-sidebar::-webkit-scrollbar {
width: 0px;
}
.vs-sidebar-content .vs-sidebar__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
padding: 10px;
}
.vs-sidebar-content .vs-sidebar__footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-self: flex-start;
width: 100%;
padding: 10px;
}
.vs-sidebar__item {
width: 100%;
padding: 14px 16px;
padding-top: 15px;
text-align: left;
background: transparent;
font-size: 1rem;
font-weight: bold;
opacity: 0.7;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
position: relative;
color: rgba(var(--vs-text), 1);
border: 0px;
}
.vs-sidebar__item.hasIcon {
padding: 0px;
}
.vs-sidebar__item.hasIcon.active {
padding-left: 8px;
}
.vs-sidebar__item.hasIcon:hover {
padding-left: 8px;
opacity: 1;
}
.vs-sidebar__item:after {
content: "";
position: absolute;
left: -4px;
top: 0px;
width: 10px;
height: 100%;
background: rgba(var(--vs-color), 1);
border-radius: 0px 20px 20px 0px;
-webkit-transform: translate(-6px);
transform: translate(-6px);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
z-index: 60;
}
.vs-sidebar__item.active:not(.hasIcon) {
padding-left: 25px;
}
.vs-sidebar__item.active {
opacity: 1;
color: rgba(var(--vs-color), 1);
}
.vs-sidebar__item.active:after {
-webkit-transform: translate(0px);
transform: translate(0px);
}
.vs-sidebar__item__icon {
min-width: 50px;
height: 47px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 1.2rem;
z-index: 50;
background: rgba(var(--vs-background), 1);
}
.vs-sidebar__item:hover:not(.hasIcon) {
opacity: 1;
padding-left: 25px;
}
.vs-sidebar__item__text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
z-index: 10;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
font-size: 0.9rem;
}
.vs-sidebar__item__arrow {
width: 7px;
height: 7px;
position: relative;
justify-self: flex-end;
margin-left: auto;
margin-right: 15px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-transform: rotate(-135deg) !important;
transform: rotate(-135deg) !important;
z-index: 80;
}
.vs-sidebar__item__arrow .vs-icon-arrow:before {
width: 2px;
}
.vs-sidebar__item__arrow .vs-icon-arrow:after {
height: 2px;
}
.vs-sidebar__item__text-tooltip {
position: fixed;
left: 50px;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
font-size: 0.85rem;
white-space: nowrap;
}
.vs-sidebar__group {
padding: 0px;
width: 100%;
min-width: 260px;
position: relative;
}
.vs-sidebar__group.open .vs-sidebar__group__content:after {
-webkit-transform: translate(0);
transform: translate(0);
opacity: 1;
}
.vs-sidebar__group.open > .vs-sidebar__group__header .vs-sidebar__item {
opacity: 1;
}
.vs-sidebar__group.open > .vs-sidebar__group__header .vs-sidebar__item__arrow {
-webkit-transform: rotate(45deg) !important;
transform: rotate(45deg) !important;
}
.vs-sidebar__group__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-sidebar__group__content {
overflow: hidden;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
position: relative;
}
.vs-sidebar__group__content:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
background: rgba(var(--vs-color), 0.3);
width: 4px;
height: 100%;
opacity: 0;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-transform: translate(-100%);
transform: translate(-100%);
border-radius: 0px 10px 10px 0px;
z-index: 60;
}
.vs-sidebar__group__content .vs-sidebar__item {
background: rgba(var(--vs-background), 1);
}
.vs-sidebar__group > .vs-sidebar__group__header .vs-sidebar__item:hover {
padding-left: 0px;
}
.vs-card-content {
--vs-color: var(--vs-primary);
}
.vs-card-content.type-5 .vs-card {
-webkit-box-shadow: none;
box-shadow: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.vs-card-content.type-5 .vs-card:hover .vs-card__interactions {
bottom: 50px;
}
.vs-card-content.type-5 .vs-card:hover .vs-card__text {
-webkit-transform: translate(0);
transform: translate(0);
opacity: 1;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
}
.vs-card-content.type-5 .vs-card:hover .vs-card__img {
border-radius: 6px 40px 6px 40px;
}
.vs-card-content.type-5 .vs-card:hover .vs-card__img img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.vs-card-content.type-5 .vs-card__img {
border-radius: 6px 20px 6px 20px;
}
.vs-card-content.type-5 .vs-card__interactions {
bottom: 6px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
z-index: 20;
}
.vs-card-content.type-5 .vs-card__text {
background: rgba(var(--vs-background), 1);
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
border-radius: 6px 20px 6px 20px;
margin-top: -50px;
z-index: 10;
position: relative;
width: calc(100% - 30px);
padding-top: 10px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-transform: translate(0, 25px);
transform: translate(0, 25px);
opacity: 0;
}
.vs-card-content.type-4 .vs-card {
-webkit-box-shadow: none;
box-shadow: none;
max-width: 300px;
}
.vs-card-content.type-4 .vs-card:hover {
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
.vs-card-content.type-4 .vs-card:hover .vs-card__img img {
-webkit-transform: scale(1);
transform: scale(1);
}
.vs-card-content.type-4 .vs-card:hover .vs-card__text {
padding-top: 15px;
padding-bottom: 25px;
}
.vs-card-content.type-4 .vs-card__img {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-height: 600px;
}
.vs-card-content.type-4 .vs-card__img img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.vs-card-content.type-4 .vs-card__interactions {
top: 0px;
bottom: auto;
}
.vs-card-content.type-4 .vs-card__text {
background: rgba(var(--vs-background), 0.8);
position: absolute;
bottom: 0px;
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border-radius: 0px 0px 20px 20px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-card-content.type-4 .vs-card__text p {
opacity: 1;
}
.vs-card-content.type-3 .vs-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 400px;
}
.vs-card-content.type-3 .vs-card:hover {
-webkit-transform: scale(1.04);
transform: scale(1.04);
}
.vs-card-content.type-3 .vs-card__img img {
min-width: 200px;
}
.vs-card-content.type-3 .vs-card__text {
padding-top: 15px;
}
.vs-card-content.type-3 .vs-card__title h2, .vs-card-content.type-3 .vs-card__title h3, .vs-card-content.type-3 .vs-card__title h4, .vs-card-content.type-3 .vs-card__title h5, .vs-card-content.type-3 .vs-card__title h6 {
padding: 0px;
}
.vs-card-content.type-2 .vs-card {
-webkit-box-shadow: none;
box-shadow: none;
overflow: hidden;
}
.vs-card-content.type-2 .vs-card:hover {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
.vs-card-content.type-2 .vs-card:hover .vs-card__img img {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
.vs-card-content.type-2 .vs-card:hover .vs-card__text {
-webkit-transform: translate(0);
transform: translate(0);
opacity: 1;
color: #fff;
}
.vs-card-content.type-2 .vs-card__interactions {
right: 0px;
top: 0px;
left: auto;
bottom: auto;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.vs-card-content.type-2 .vs-card__title {
position: relative;
color: inherit;
padding: 0px;
}
.vs-card-content.type-2 .vs-card__title h2, .vs-card-content.type-2 .vs-card__title h3, .vs-card-content.type-2 .vs-card__title h4, .vs-card-content.type-2 .vs-card__title h5, .vs-card-content.type-2 .vs-card__title h6 {
padding: 0px;
padding-bottom: 5px;
}
.vs-card-content.type-2 .vs-card__text {
position: absolute;
bottom: 0px;
background: rgba(var(--vs-background), 0.9);
padding-top: 30px;
border-radiu: 0px 0px 20px 20px;
background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.5)));
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
color: transparent;
font-size: 0.9rem;
-webkit-transform: translate(0, 45%);
transform: translate(0, 45%);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-card-content.type-2 .vs-card__text p {
opacity: 1;
}
.vs-card-content.type-1 .vs-card:hover {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.vs-card-content.type-1 .vs-card:hover .vs-card__img img {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
.vs-card {
background: rgba(var(--vs-background), 1);
color: rgba(var(--vs-text), 1);
width: 100%;
max-width: 350px;
-webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
border-radius: 20px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
cursor: pointer;
position: relative;
}
.vs-card__text {
font-size: 0.85rem;
padding: 0px 15px;
padding-bottom: 15px;
}
.vs-card__text p {
font-size: inherit;
margin: 0px;
opacity: 0.8;
}
.vs-card__title {
padding-top: 10px;
padding-bottom: 5px;
}
.vs-card__title h2, .vs-card__title h3, .vs-card__title h4, .vs-card__title h5, .vs-card__title h6 {
padding: 0px;
margin: 0px;
font-size: 1.1rem;
}
.vs-card__interactions {
position: absolute;
bottom: 0px;
padding: 5px 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
left: 0px;
}
.vs-card__img {
position: relative;
max-height: 250px;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 20px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-card__img img {
width: 100%;
border-radius: 20px;
display: block;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-card__group {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.vs-card__group-space {
min-width: 20px;
position: relative;
height: 20px;
}
.vs-card__group .vs-card__group-cards {
position: relative;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
overflow: hidden;
overflow-x: auto;
scroll-behavior: smooth;
padding-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
}
.vs-card__group .vs-card__group-cards .vs-card-content {
min-width: 350px;
margin-left: 20px;
}
.vs-card__group .vs-card__group-prev {
z-index: 2;
position: relative;
left: 0px;
width: 50px;
height: 50px;
min-width: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: transparent;
border: 0px;
}
.vs-card__group .vs-card__group-prev .vs-icon-arrow {
width: 15px;
height: 15px;
display: block;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.vs-card__group .vs-card__group-prev .vs-icon-arrow:before {
width: 2px;
}
.vs-card__group .vs-card__group-prev .vs-icon-arrow:after {
height: 2px;
}
.vs-card__group .vs-card__group-next {
border: 0px;
z-index: 2;
position: relative;
left: 0px;
width: 50px;
height: 50px;
min-width: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: transparent;
}
.vs-card__group .vs-card__group-next .vs-icon-arrow {
width: 15px;
height: 15px;
display: block;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.vs-card__group .vs-card__group-next .vs-icon-arrow:before {
width: 2px;
}
.vs-card__group .vs-card__group-next .vs-icon-arrow:after {
height: 2px;
}
.loading-enter-active, .loading-leave-active {
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.loading-enter, .loading-leave-to {
opacity: 0;
}
.vs-loading {
--vs-color: var(--vs-primary);
--vs-background: 255,255,255;
--vs-opacity: .6;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: rgba(var(--vs-background), var(--vs-opacity));
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
padding: 20px;
border-radius: inherit;
}
.vs-loading--target {
position: absolute;
}
.vs-loading__load {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.vs-loading__load__text {
font-size: 0.75em;
margin: 7px;
font-weight: bold;
color: rgba(var(--vs-color), 1);
}
.vs-loading__load__percent {
position: relative;
font-size: 0.65rem;
font-weight: bold;
color: rgba(var(--vs-color), 1);
margin-top: 1px;
z-index: 200;
}
.vs-loading__load__animation {
width: 40px;
height: 40px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-loading__progress {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
height: 4px;
background: rgba(var(--vs-color), 0.2);
}
.vs-loading__progress__bar {
background: rgba(var(--vs-color), 1);
height: 100%;
position: relative;
border-radius: 0px 10px 10px 0px;
}
.vs-loading--default .vs-loading__load__animation {
border-radius: 50%;
}
.vs-loading--default .vs-loading__load__animation__1 {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid rgba(var(--vs-color), 1);
border-radius: inherit;
border-top: 3px solid transparent;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
-webkit-animation: rotate 0.8s ease infinite;
animation: rotate 0.8s ease infinite;
top: 0px;
}
.vs-loading--default .vs-loading__load__animation__2 {
top: 0px;
position: absolute;
width: 100%;
height: 100%;
border: 3px dashed rgba(var(--vs-color), 1);
border-radius: inherit;
border-top: 3px solid transparent;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
-webkit-animation: rotate 0.8s linear infinite;
animation: rotate 0.8s linear infinite;
opacity: 0.2;
}
.vs-loading--default .vs-loading__load__animation__3 {
display: none;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.vs-loading--waves .vs-loading__load__animation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-loading--waves .vs-loading__load__animation__1 {
width: 0px;
background: transparent;
height: 0px;
position: absolute;
-webkit-animation: waves 0.7s ease infinite;
animation: waves 0.7s ease infinite;
-webkit-box-shadow: 0px 0px 10px 0px rgba(var(--vs-color), 0.5);
box-shadow: 0px 0px 10px 0px rgba(var(--vs-color), 0.5);
border-radius: 50%;
}
.vs-loading--waves .vs-loading__load__animation__2 {
width: 0px;
background: transparent;
height: 0px;
position: absolute;
-webkit-animation: waves 1.4s linear infinite;
animation: waves 1.4s linear infinite;
-webkit-box-shadow: 0px 0px 10px 0px rgba(var(--vs-color), 0.5);
box-shadow: 0px 0px 10px 0px rgba(var(--vs-color), 0.5);
border-radius: 50%;
}
.vs-loading--waves .vs-loading__load__animation__3 {
width: 0px;
background: transparent;
height: 0px;
position: absolute;
-webkit-animation: waves 1.75s ease infinite;
animation: waves 1.75s ease infinite;
-webkit-box-shadow: 0px 0px 10px 0px rgba(var(--vs-color), 0.5);
box-shadow: 0px 0px 10px 0px rgba(var(--vs-color), 0.5);
border-radius: 50%;
}
@-webkit-keyframes waves {
0% {
width: 0px;
height: 0px;
}
100% {
height: 50px;
width: 50px;
opacity: 0;
}
}
@keyframes waves {
0% {
width: 0px;
height: 0px;
}
100% {
height: 50px;
width: 50px;
opacity: 0;
}
}
.vs-loading--corners .vs-loading__load__animation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-loading--corners .vs-loading__load__animation__1 {
width: 100%;
background: transparent;
height: 100%;
position: absolute;
-webkit-animation: corners 1s ease infinite;
animation: corners 1s ease infinite;
border-radius: 50%;
border: 2px solid rgba(var(--vs-color), 1);
}
.vs-loading--corners .vs-loading__load__animation__2 {
display: none;
}
.vs-loading--corners .vs-loading__load__animation__3 {
display: none;
}
@-webkit-keyframes corners {
0% {
border-radius: 50%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
border-radius: 50% 50% 50% 15%;
}
50% {
border-radius: 50% 50% 15% 30%;
}
75% {
border-radius: 50% 15% 30% 30%;
}
100% {
border-radius: 50%;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
}
@keyframes corners {
0% {
border-radius: 50%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
border-radius: 50% 50% 50% 15%;
}
50% {
border-radius: 50% 50% 15% 30%;
}
75% {
border-radius: 50% 15% 30% 30%;
}
100% {
border-radius: 50%;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
}
.vs-loading--border .vs-loading__load__animation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
}
.vs-loading--border .vs-loading__load__animation__1 {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid rgba(var(--vs-color), 1);
border-radius: inherit;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
-webkit-animation: rotate 1s linear infinite;
animation: rotate 1s linear infinite;
top: 0px;
}
.vs-loading--border .vs-loading__load__animation__2 {
top: 0px;
position: absolute;
width: 100%;
height: 100%;
border: 1px dashed rgba(var(--vs-color), 1);
border-radius: inherit;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
-webkit-animation: rotate 1s linear infinite 0.2s;
animation: rotate 1s linear infinite 0.2s;
}
.vs-loading--border .vs-loading__load__animation__3 {
top: 0px;
position: absolute;
width: 100%;
height: 100%;
border: 1px dashed rgba(var(--vs-color), 1);
border-radius: inherit;
-webkit-animation: rotate 1s linear infinite 0.4s;
animation: rotate 1s linear infinite 0.4s;
opacity: 0.2;
}
.vs-loading--points .vs-loading__load__percent {
position: absolute;
top: -10px;
}
.vs-loading--points .vs-loading__load__animation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: auto;
}
.vs-loading--points .vs-loading__load__animation__1 {
width: 8px;
height: 8px;
background: rgba(var(--vs-color), 1);
border-radius: 50%;
margin: 3px;
-webkit-animation: points 0.75s ease infinite;
animation: points 0.75s ease infinite;
}
.vs-loading--points .vs-loading__load__animation__2 {
width: 8px;
height: 8px;
background: rgba(var(--vs-color), 1);
border-radius: 50%;
margin: 3px;
-webkit-animation: points 0.75s ease infinite 0.25s;
animation: points 0.75s ease infinite 0.25s;
}
.vs-loading--points .vs-loading__load__animation__3 {
width: 8px;
height: 8px;
background: rgba(var(--vs-color), 1);
border-radius: 50%;
margin: 3px;
-webkit-animation: points 0.75s ease infinite 0.5s;
animation: points 0.75s ease infinite 0.5s;
}
@-webkit-keyframes points {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes points {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
.vs-loading--square .vs-loading__load__animation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-loading--square .vs-loading__load__animation__1 {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(var(--vs-color), 1);
border-radius: inherit;
-webkit-animation: rotateSquare 4s ease infinite;
animation: rotateSquare 4s ease infinite;
top: 0px;
}
.vs-loading--square .vs-loading__load__animation__2 {
top: 0px;
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(var(--vs-color), 1);
border-radius: inherit;
animation: rotateSquare 4s ease infinite reverse;
background: rgba(var(--vs-background), 1);
}
.vs-loading--square .vs-loading__load__animation__3 {
display: none;
}
@-webkit-keyframes rotateSquare {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes rotateSquare {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.vs-loading--gradient .vs-loading__load__animation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 60px;
height: 60px;
}
.vs-loading--gradient .vs-loading__load__animation__1 {
position: absolute;
width: 100%;
height: 100%;
border: 0px;
border-radius: inherit;
-webkit-animation: rotate 1s linear infinite;
animation: rotate 1s linear infinite;
top: 0px;
background: -webkit-gradient(linear, left bottom, left top, color-stop(33%, rgba(var(--vs-background), 0)), to(rgba(var(--vs-color), 1)));
background: linear-gradient(0deg, rgba(var(--vs-background), 0) 33%, rgba(var(--vs-color), 1) 100%);
border-radius: 50%;
}
.vs-loading--gradient .vs-loading__load__animation__2 {
top: 2px;
position: absolute;
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 0px;
border-radius: inherit;
background: rgba(var(--vs-background), 1);
border-radius: 50%;
}
.vs-loading--gradient .vs-loading__load__animation__3 {
display: none;
}
.vs-loading--rectangle .vs-loading__load__percent {
position: absolute;
bottom: -2px;
}
.vs-loading--rectangle .vs-loading__load__animation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-loading--rectangle .vs-loading__load__animation__1 {
position: absolute;
width: 15px;
height: 15px;
border: 0px;
border-radius: inherit;
-webkit-animation: rectangle 1s ease infinite;
animation: rectangle 1s ease infinite;
background: rgba(var(--vs-color), 1);
}
.vs-loading--rectangle .vs-loading__load__animation__2 {
position: absolute;
width: 15px;
height: 15px;
border: 0px;
border-radius: inherit;
-webkit-animation: rectangle 1s ease-out infinite;
animation: rectangle 1s ease-out infinite;
background: rgba(var(--vs-color), 0.2);
}
.vs-loading--rectangle .vs-loading__load__animation__3 {
display: none;
}
@-webkit-keyframes rectangle {
0% {
-webkit-transform: translate(-50px);
transform: translate(-50px);
}
50% {
-webkit-transform: translate(50px);
transform: translate(50px);
}
100% {
-webkit-transform: translate(-50px);
transform: translate(-50px);
}
}
@keyframes rectangle {
0% {
-webkit-transform: translate(-50px);
transform: translate(-50px);
}
50% {
-webkit-transform: translate(50px);
transform: translate(50px);
}
100% {
-webkit-transform: translate(-50px);
transform: translate(-50px);
}
}
.vs-loading--circles .vs-loading__load__animation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 60px;
height: 60px;
}
.vs-loading--circles .vs-loading__load__animation__1 {
position: absolute;
width: 40px;
height: 40px;
-webkit-animation: rotate 1s ease infinite;
animation: rotate 1s ease infinite;
border-radius: 50%;
border: 2px solid rgba(var(--vs-color), 1);
border-top: 3px solid transparent;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.vs-loading--circles .vs-loading__load__animation__2 {
position: absolute;
width: 50px;
height: 50px;
-webkit-animation: rotate 1s ease-in-out infinite;
animation: rotate 1s ease-in-out infinite;
border-radius: 50%;
border: 2px dashed rgba(var(--vs-color), 1);
border-top: 3px solid transparent;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.vs-loading--circles .vs-loading__load__animation__3 {
position: absolute;
width: 60px;
height: 60px;
animation: rotate 1s linear infinite reverse;
border-radius: 50%;
border: 2px solid rgba(var(--vs-color), 1);
border-top: 3px solid transparent;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}
.vs-loading--square-rotate .vs-loading__load__percent {
position: absolute;
bottom: 30px;
}
.vs-loading--square-rotate .vs-loading__load__animation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 60px;
height: 60px;
}
.vs-loading--square-rotate .vs-loading__load__animation__1 {
position: absolute;
width: 25px;
height: 25px;
-webkit-animation: squareRotate 3s ease infinite;
animation: squareRotate 3s ease infinite;
background: rgba(var(--vs-color), 1);
}
.vs-loading--square-rotate .vs-loading__load__animation__2 {
display: none;
}
.vs-loading--square-rotate .vs-loading__load__animation__3 {
display: none;
}
@-webkit-keyframes squareRotate {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
25% {
-webkit-transform: rotateX(180deg) rotateY(0deg);
transform: rotateX(180deg) rotateY(0deg);
}
50% {
-webkit-transform: rotateX(180deg) rotateY(180deg);
transform: rotateX(180deg) rotateY(180deg);
}
75% {
-webkit-transform: rotateX(0deg) rotateY(180deg);
transform: rotateX(0deg) rotateY(180deg);
}
100% {
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
}
@keyframes squareRotate {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
25% {
-webkit-transform: rotateX(180deg) rotateY(0deg);
transform: rotateX(180deg) rotateY(0deg);
}
50% {
-webkit-transform: rotateX(180deg) rotateY(180deg);
transform: rotateX(180deg) rotateY(180deg);
}
75% {
-webkit-transform: rotateX(0deg) rotateY(180deg);
transform: rotateX(0deg) rotateY(180deg);
}
100% {
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
}
.vs-loading--scale .vs-loading__load__percent {
position: absolute;
bottom: 40px;
}
.vs-loading--scale .vs-loading__load__animation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: cneter;
-ms-flex-align: cneter;
align-items: cneter;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 40px;
height: 40px;
}
.vs-loading--scale .vs-loading__load__animation__1 {
position: relative;
width: 5px;
height: 5px;
background: rgba(var(--vs-color), 1);
margin: 3px;
-webkit-animation: scale 0.8s ease infinite;
animation: scale 0.8s ease infinite;
border-radius: 5px;
}
.vs-loading--scale .vs-loading__load__animation__2 {
position: relative;
width: 5px;
height: 5px;
background: rgba(var(--vs-color), 1);
margin: 3px;
-webkit-animation: scale 0.8s ease infinite 0.2s;
animation: scale 0.8s ease infinite 0.2s;
border-radius: 5px;
}
.vs-loading--scale .vs-loading__load__animation__3 {
position: relative;
width: 5px;
height: 5px;
background: rgba(var(--vs-color), 1);
margin: 3px;
-webkit-animation: scale 0.8s ease infinite 0.4s;
animation: scale 0.8s ease infinite 0.4s;
border-radius: 5px;
}
@-webkit-keyframes scale {
0% {
height: 5px;
}
50% {
height: 25px;
}
0% {
height: 5px;
}
}
@keyframes scale {
0% {
height: 5px;
}
50% {
height: 25px;
}
0% {
height: 5px;
}
}
.notification-enter-active {
-webkit-transition: all 0.3s ease 0.05s, margin 0.25s ease, -webkit-transform 0.3s ease, -webkit-clip-path 8s ease 0.8s;
transition: all 0.3s ease 0.05s, margin 0.25s ease, -webkit-transform 0.3s ease, -webkit-clip-path 8s ease 0.8s;
transition: all 0.3s ease 0.05s, transform 0.3s ease, margin 0.25s ease, clip-path 8s ease 0.8s;
transition: all 0.3s ease 0.05s, transform 0.3s ease, margin 0.25s ease, clip-path 8s ease 0.8s, -webkit-transform 0.3s ease, -webkit-clip-path 8s ease 0.8s;
}
.notification-leave-to {
max-height: 0px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
opacity: 0 !important;
-webkit-clip-path: circle(0% at 80% 35%) !important;
clip-path: circle(0% at 80% 35%) !important;
}
.notification-enter {
-webkit-transform: translate(25%);
transform: translate(25%);
-webkit-clip-path: circle(0% at 80% 35%) !important;
clip-path: circle(0% at 80% 35%) !important;
}
.notification-enter .vs-notification__content {
opacity: 0;
-webkit-transform: translate(10%);
transform: translate(10%);
}
.vs-notification-parent {
position: fixed;
right: 0px;
bottom: 0px;
z-index: 200000;
-webkit-transition: all 25s ease;
transition: all 25s ease;
padding: 10px 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.vs-notification-parent--top-right {
bottom: auto;
top: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.vs-notification-parent--top-center {
bottom: auto;
top: 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
left: 50%;
right: auto;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
.vs-notification-parent--top-center .vs-notification--sticky {
margin: 3px 20px;
border-radius: 20px;
}
.vs-notification-parent--top-center .vs-notification--sticky:last-child {
border-radius: 0px 0px 20px 20px;
margin-top: -10px;
}
.vs-notification-parent--top-center .vs-notification {
-webkit-clip-path: circle(120% at 50% 0%);
clip-path: circle(120% at 50% 0%);
-webkit-transition: all 0.25s ease, max-height 0.25s ease, -webkit-transform 0.3s ease, -webkit-clip-path 0.5s ease 0.1s;
transition: all 0.25s ease, max-height 0.25s ease, -webkit-transform 0.3s ease, -webkit-clip-path 0.5s ease 0.1s;
transition: all 0.25s ease, transform 0.3s ease, max-height 0.25s ease, clip-path 0.5s ease 0.1s;
transition: all 0.25s ease, transform 0.3s ease, max-height 0.25s ease, clip-path 0.5s ease 0.1s, -webkit-transform 0.3s ease, -webkit-clip-path 0.5s ease 0.1s;
}
.vs-notification-parent--top-center .vs-notification.vs-notification--border {
border: 3px solid transparent;
border-top: 3px solid rgba(var(--vs-border), 1);
}
.vs-notification-parent--top-center .notification-enter {
-webkit-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-clip-path: circle(0% at 50% 0%) !important;
clip-path: circle(0% at 50% 0%) !important;
}
.vs-notification-parent--top-center .notification-enter .vs-notification__content {
opacity: 0;
-webkit-transform: translate(0, -10%);
transform: translate(0, -10%);
}
.vs-notification-parent--bottom-center {
left: 50%;
right: auto;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
.vs-notification-parent--bottom-center .vs-notification--sticky {
margin: 3px 20px;
border-radius: 20px;
}
.vs-notification-parent--bottom-center .vs-notification--sticky:last-child {
border-radius: 20px 20px 0px 0px;
margin-bottom: -10px;
}
.vs-notification-parent--bottom-center .vs-notification {
-webkit-clip-path: circle(120% at 50% 100%);
clip-path: circle(120% at 50% 100%);
-webkit-transition: all 0.25s ease, max-height 0.25s ease, -webkit-transform 0.3s ease, -webkit-clip-path 0.5s ease 0.1s;
transition: all 0.25s ease, max-height 0.25s ease, -webkit-transform 0.3s ease, -webkit-clip-path 0.5s ease 0.1s;
transition: all 0.25s ease, transform 0.3s ease, max-height 0.25s ease, clip-path 0.5s ease 0.1s;
transition: all 0.25s ease, transform 0.3s ease, max-height 0.25s ease, clip-path 0.5s ease 0.1s, -webkit-transform 0.3s ease, -webkit-clip-path 0.5s ease 0.1s;
}
.vs-notification-parent--bottom-center .vs-notification.vs-notification--border {
border: 3px solid transparent;
border-bottom: 3px solid rgba(var(--vs-border), 1);
}
.vs-notification-parent--bottom-center .notification-enter {
-webkit-transform: translate(0, 25%);
transform: translate(0, 25%);
-webkit-clip-path: circle(0% at 50% 100%) !important;
clip-path: circle(0% at 50% 100%) !important;
}
.vs-notification-parent--bottom-center .notification-enter .vs-notification__content {
opacity: 0;
-webkit-transform: translate(0, 10%);
transform: translate(0, 10%);
}
.vs-notification-parent--top-left {
bottom: auto;
top: 0px;
left: 0px;
right: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.vs-notification-parent--top-left .vs-notification--sticky {
margin-left: 0px;
border-radius: 0px 20px 20px 0px;
}
.vs-notification-parent--top-left .vs-notification {
-webkit-clip-path: circle(145% at 0% 50%);
clip-path: circle(145% at 0% 50%);
}
.vs-notification-parent--top-left .vs-notification.vs-notification--border {
border: 3px solid transparent;
border-left: 3px solid rgba(var(--vs-border), 1);
}
.vs-notification-parent--top-left .notification-enter {
-webkit-transform: translate(-25%);
transform: translate(-25%);
-webkit-clip-path: circle(0% at 20% 35%) !important;
clip-path: circle(0% at 20% 35%) !important;
}
.vs-notification-parent--top-left .notification-enter .vs-notification__content {
opacity: 0;
-webkit-transform: translate(-10%);
transform: translate(-10%);
}
.vs-notification-parent--bottom-left {
left: 0px;
right: auto;
}
.vs-notification-parent--bottom-left .vs-notification--sticky {
margin-left: 0px;
border-radius: 0px 20px 20px 0px;
}
.vs-notification-parent--bottom-left .vs-notification {
-webkit-clip-path: circle(145% at 0% 50%);
clip-path: circle(145% at 0% 50%);
}
.vs-notification-parent--bottom-left .vs-notification.vs-notification--border {
border: 3px solid transparent;
border-left: 3px solid rgba(var(--vs-border), 1);
}
.vs-notification-parent--bottom-left .notification-enter {
-webkit-transform: translate(-25%);
transform: translate(-25%);
-webkit-clip-path: circle(0% at 20% 35%) !important;
clip-path: circle(0% at 20% 35%) !important;
}
.vs-notification-parent--bottom-left .notification-enter .vs-notification__content {
opacity: 0;
-webkit-transform: translate(-10%);
transform: translate(-10%);
}
.vs-notification {
--vs-color: var(--vs-background);
--vs-border: var(--vs-background);
--vs-opacity: .6;
position: relative;
max-width: 340px;
width: 100%;
height: auto;
border-radius: 20px;
-webkit-box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, var(--vs-shadow-opacity));
overflow: hidden;
-webkit-clip-path: circle(145% at 100% 50%);
clip-path: circle(145% at 100% 50%);
background: rgba(var(--vs-color), 1);
color: rgba(var(--vs-text), 1);
margin: 3px 10px;
-webkit-transition: all 0.25s ease, max-height 0.25s ease, -webkit-transform 0.3s ease 0.1s, -webkit-clip-path 0.5s ease 0.1s;
transition: all 0.25s ease, max-height 0.25s ease, -webkit-transform 0.3s ease 0.1s, -webkit-clip-path 0.5s ease 0.1s;
transition: all 0.25s ease, transform 0.3s ease 0.1s, max-height 0.25s ease, clip-path 0.5s ease 0.1s;
transition: all 0.25s ease, transform 0.3s ease 0.1s, max-height 0.25s ease, clip-path 0.5s ease 0.1s, -webkit-transform 0.3s ease 0.1s, -webkit-clip-path 0.5s ease 0.1s;
}
.vs-notification:hover:not(.vs-notification--flat) {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);
}
.vs-notification--notPadding {
padding: 0px !important;
}
.vs-notification.vs-notification--icon {
padding-left: 50px !important;
}
.vs-notification.vs-notification--loading {
width: 100px !important;
max-height: 100px !important;
min-height: 100px !important;
padding: 0px !important;
padding-left: 0px !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-notification--width-auto {
width: auto;
max-width: none;
}
.vs-notification--width-all {
max-width: calc(100vw - 50px);
width: calc(100vw - 50px);
}
.vs-notification--square {
border-radius: 0px !important;
}
.vs-notification--sticky {
margin-right: 0px;
margin-bottom: 0px;
border-radius: 20px 0px 0px 20px;
}
.vs-notification--flat {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
background: rgba(var(--vs-background), 1);
color: rgba(var(--vs-color), 1) !important;
}
.vs-notification--flat:hover::after {
background: rgba(var(--vs-color), 0.15);
}
.vs-notification--flat .vs-notification__progress {
background: rgba(var(--vs-color), 1);
}
.vs-notification--flat .vs-notification__close {
--vs-color: inherit;
}
.vs-notification--flat .vs-notification__content {
color: rgba(var(--vs-color), 1) !important;
}
.vs-notification--flat.vs-notification--border {
border: 0px solid transparent !important;
border-right: 3px solid rgba(var(--vs-border), 1) !important;
}
.vs-notification--flat:after {
content: "";
background: rgba(var(--vs-color), 0.1);
width: 100%;
height: 100%;
border-radius: inherit;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-notification.vs-notification--onClick {
cursor: pointer;
}
.vs-notification.vs-notification--color:not(.vs-notification--flat) {
color: #fff;
}
.vs-notification.vs-notification--color:not(.vs-notification--flat) .vs-notification__progress {
background: #fff;
}
.vs-notification.vs-notification--color:not(.vs-notification--flat) .vs-notification__close {
--vs-color: 255,255,255;
}
.vs-notification.vs-notification--color:not(.vs-notification--flat) .vs-notification__loading:after {
border: 2px solid #fff;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
.vs-notification.vs-notification--color:not(.vs-notification--flat) .vs-notification__loading:before {
border: 2px dashed #fff;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
.vs-notification.vs-notification--border {
border: 3px solid transparent;
border-right: 3px solid rgba(var(--vs-border), 1);
}
.vs-notification__progress {
width: 0%;
height: 3px;
background: rgba(var(--vs-text), 1);
position: absolute;
bottom: 0px;
left: 0px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.vs-notification__loading {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
}
.vs-notification__loading:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(var(--vs-text), 1);
border-radius: inherit;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
-webkit-animation: loadingNoti 0.8s ease infinite;
animation: loadingNoti 0.8s ease infinite;
top: 0px;
content: "";
}
.vs-notification__loading:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0px;
position: absolute;
width: 100%;
height: 100%;
border: 2px dashed rgba(var(--vs-text), 1);
border-radius: inherit;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
-webkit-animation: loadingNoti 0.8s linear infinite;
animation: loadingNoti 0.8s linear infinite;
opacity: 0.2;
content: "";
}
.vs-notification__close {
--vs-color: var(--vs-text);
position: absolute;
border: 0px;
background: transparent;
top: 2px;
right: 2px;
-webkit-transform: scale(0.75);
transform: scale(0.75);
padding: 0px;
}
.vs-notification__icon {
position: absolute;
top: calc(50% - 22px);
background: transparent;
width: 45px;
height: 45px;
left: 2px;
border-radius: 0px 35% 35% 0px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.vs-notification__icon i {
font-size: 1.2rem;
}
.vs-notification__content {
position: relative;
width: auto;
height: auto;
-webkit-transition: all 0.25s ease 0.2s;
transition: all 0.25s ease 0.2s;
opacity: 1;
}
.vs-notification__content__text {
width: 100%;
}
.vs-notification__content__text p {
margin: 0px;
padding: 0px;
font-size: 0.75rem;
line-height: 1rem;
}
.vs-notification__content__header {
width: 100%;
margin: 0px;
padding: 0px;
padding-bottom: 6px;
}
.vs-notification__content__header h4 {
width: 100%;
margin: 0px;
padding: 0px;
font-size: 0.9rem;
}
.darken .vs-notification--dark {
color: #fff !important;
}
.darken .vs-notification--dark .vs-notification__close {
--vs-color: 255,255,255 !important;
}
.darken .vs-notification--dark h4 {
color: #fff !important;
}
.darken .vs-notification--dark p {
color: #fff !important;
}
@-webkit-keyframes loadingNoti {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadingNoti {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes progressNoti {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@keyframes progressNoti {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@media (max-width: 600px) {
.vs-notification {
margin: 3px 0px !important;
border-radius: 0px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
.vs-notification:hover {
-webkit-transform: translate(0) !important;
transform: translate(0) !important;
}
.vs-notification:last-child {
margin-bottom: 0px !important;
}
.vs-notification-parent {
padding: 0px;
width: 100% !important;
max-width: 100% !important;
}
.vs-notification-parent .vs-notification--sticky {
margin-bottom: 0px !important;
}
.vs-notification-parent.vs-notification-parent--top-center .vs-notification:last-child {
margin-bottom: 3px;
margin-top: 0px !important;
}
}
.vs-row {
width: 100%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.vs-col {
width: 100%;
position: relative;
}
.vs-col--w-1 {
width: 8.33%;
}
.vs-col--w-2 {
width: 16.66%;
}
.vs-col--w-3 {
width: 25%;
}
.vs-col--w-4 {
width: 33.33%;
}
.vs-col--w-5 {
width: 41.66%;
}
.vs-col--w-6 {
width: 50%;
}
.vs-col--w-7 {
width: 58.33%;
}
.vs-col--w-8 {
width: 66.66%;
}
.vs-col--w-9 {
width: 75%;
}
.vs-col--w-10 {
width: 83.33%;
}
.vs-col--w-11 {
width: 91.66%;
}
.vs-col--w-12 {
width: 100%;
}
.vs-col--offset-1 {
margin-left: 8.33%;
}
.vs-col--offset-2 {
margin-left: 16.66%;
}
.vs-col--offset-3 {
margin-left: 25%;
}
.vs-col--offset-4 {
margin-left: 33.33%;
}
.vs-col--offset-5 {
margin-left: 41.66%;
}
.vs-col--offset-6 {
margin-left: 50%;
}
.vs-col--offset-7 {
margin-left: 58.33%;
}
.vs-col--offset-8 {
margin-left: 66.66%;
}
.vs-col--offset-9 {
margin-left: 75%;
}
.vs-col--offset-10 {
margin-left: 83.33%;
}
.vs-col--offset-11 {
margin-left: 91.66%;
}
.vs-col--offset-12 {
margin-left: 100%;
}
.vs-col--lg-1 {
width: 8.33%;
}
.vs-col--lg-2 {
width: 16.66%;
}
.vs-col--lg-3 {
width: 25%;
}
.vs-col--lg-4 {
width: 33.33%;
}
.vs-col--lg-5 {
width: 41.66%;
}
.vs-col--lg-6 {
width: 50%;
}
.vs-col--lg-7 {
width: 58.33%;
}
.vs-col--lg-8 {
width: 66.66%;
}
.vs-col--lg-9 {
width: 75%;
}
.vs-col--lg-10 {
width: 83.33%;
}
.vs-col--lg-11 {
width: 91.66%;
}
.vs-col--lg-12 {
width: 100%;
}
@media (max-width: 900px) {
.vs-col--sm-1 {
width: 8.33%;
}
.vs-col--sm-2 {
width: 16.66%;
}
.vs-col--sm-3 {
width: 25%;
}
.vs-col--sm-4 {
width: 33.33%;
}
.vs-col--sm-5 {
width: 41.66%;
}
.vs-col--sm-6 {
width: 50%;
}
.vs-col--sm-7 {
width: 58.33%;
}
.vs-col--sm-8 {
width: 66.66%;
}
.vs-col--sm-9 {
width: 75%;
}
.vs-col--sm-10 {
width: 83.33%;
}
.vs-col--sm-11 {
width: 91.66%;
}
.vs-col--sm-12 {
width: 100%;
}
}
@media (max-width: 600px) {
.vs-col--xs-1 {
width: 8.33%;
}
.vs-col--xs-2 {
width: 16.66%;
}
.vs-col--xs-3 {
width: 25%;
}
.vs-col--xs-4 {
width: 33.33%;
}
.vs-col--xs-5 {
width: 41.66%;
}
.vs-col--xs-6 {
width: 50%;
}
.vs-col--xs-7 {
width: 58.33%;
}
.vs-col--xs-8 {
width: 66.66%;
}
.vs-col--xs-9 {
width: 75%;
}
.vs-col--xs-10 {
width: 83.33%;
}
.vs-col--xs-11 {
width: 91.66%;
}
.vs-col--xs-12 {
width: 100%;
}
}
:root {
--vs-primary: 25, 91, 255;
--vs-warn: 255, 186, 0;
--vs-danger: 255,71,87;
--vs-success: 70,201,58;
--vs-dark: 30,30,30;
--vs-light: 244,247,248;
--vs-color: 17,18,20;
--vs-facebook: 59, 89, 153;
--vs-twitter: 29, 161, 242;
--vs-youtube: 255, 0, 0;
--vs-pinterest: 189, 8, 28;
--vs-linkedin: 0, 119, 181;
--vs-snapchat: 255, 252, 0;
--vs-whatsapp: 37, 211, 102;
--vs-tumblr: 54, 70, 93;
--vs-reddit: 255, 69, 0;
--vs-spotify: 30, 215, 96;
--vs-amazon: 255, 153, 0;
--vs-medium: 2, 184, 117;
--vs-vimeo: 26, 183, 234;
--vs-skype: 0, 175, 240;
--vs-dribbble: 234, 76, 137;
--vs-slack: 74, 21, 75;
--vs-yahoo: 67, 2, 151;
--vs-twitch: 100, 65, 164;
--vs-discord: 114, 137, 218;
--vs-telegram: 0, 136, 204;
--vs-google-plus: 219, 68, 55;
--vs-messenger: 0, 132, 255;
--vs-background: 255, 255, 255;
--vs-text: 44, 62, 80;
--vs-gray-1: 249, 252, 253;
--vs-gray-2: 244, 247, 248;
--vs-gray-3: 240, 243, 244;
--vs-gray-4: 230, 233, 234;
}
[class*="--primary"] {
--vs-color: var(--vs-primary);
}
[class*="--default"] {
--vs-color: var(--vs-primary);
}
[class*="--danger"] {
--vs-color: var(--vs-danger);
}
[class*="--success"] {
--vs-color: var(--vs-success);
}
[class*="--dark"] {
--vs-color: var(--vs-dark);
}
[class*="--warn"] {
--vs-color: var(--vs-warn);
}
:root {
--vs-shadow-opacity: .05;
--vs-radius: 20px;
--vs-zindex-1: 100000;
--vs-zindex-2: 99000;
--vs-zindex-3: 98000;
--vs-zindex-4: 97000;
--vs-background-opacity: .2;
}
[vs-theme=dark] {
--vs-background: 30, 32, 35;
--vs-text: 255, 255, 255;
--vs-gray-1: 24, 25, 28;
--vs-gray-2: 20, 20, 23;
--vs-gray-3: 15, 16, 19;
--vs-gray-4: 10, 11, 14;
--vs-shadow-opacity: .3;
--vs-dark: 0, 0, 0;
--vs-background-opacity: .6;
}
[vs-theme=dark] .vs-pagination-content.vs-component-dark .vs-pagination__active {
--vs-color: 255, 255, 255;
color: rgba(var(--vs-gray-3), 1);
}
[vs-theme=dark] .vs-button.vs-component-dark.vs-button--transparent {
color: rgba(var(--vs-text), 1) !important;
}
[vs-theme=dark] .vs-button.vs-component-dark.vs-button--transparent:hover:before {
background: rgba(var(--vs-color), 0.2);
}
[vs-theme=dark] .vs-button.vs-component-dark.vs-button--transparent.vs-button--active:before {
background: rgba(var(--vs-color), var(--vs-background-opacity));
}
[vs-theme=dark] .vs-ripple, [vs-theme=dark] .vs-ripple-invert, [vs-theme=dark] .vs-ripple-content {
--vs-color: 0,0,0;
}
[vs-theme=dark] .vs-loading {
--vs-background: 0, 0, 0;
}
[vs-theme=dark] .vs-input-parent--state-dark {
--vs-dark: 255, 255, 255 !important;
}
[vs-theme=dark] .vs-input-parent--state-dark .vs-input {
background: #000 !important;
}
[vs-theme=dark] .vs-component-dark {
--vs-color: 0, 0, 0 !important;
}
[vs-theme=dark] .vs-component-dark .vs-avatar {
color: #fff !important;
}
[vs-theme=dark] .vs-component-dark.vs-alert {
--vs-color: 0, 0, 0 !important;
background: rgba(var(--vs-color), 1) !important;
color: rgba(var(--vs-text), 1) !important;
}
button {
cursor: pointer;
outline: none;
}
[disabled] {
opacity: 0.6;
}
input {
outline: none;
}
input, textarea, button, select, a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
[class*=vs-] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
list-style: none;
}
.vs-ripple-content {
--vs-color: inherit;
width: 100px;
height: 100px;
position: absolute;
width: 100%;
pointer-events: none;
overflow: hidden;
height: 100%;
top: 0px;
right: 0px;
border-radius: inherit;
z-index: -1;
}
.vs-ripple-content .vs-ripple {
width: 0px;
height: 0px;
border-radius: 50%;
opacity: 0;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
background: radial-gradient(circle, rgba(var(--vs-color), 0.05), rgba(var(--vs-color), 0.6));
}
.vs-ripple-content .vs-ripple--solid {
background: rgba(var(--vs-color), 1);
opacity: 1;
}
.vs-ripple-content .vs-ripple-invert {
width: 0px;
height: 0px;
border-radius: 50%;
opacity: 0;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
background-image: radial-gradient(circle, rgba(var(--vs-color), 0.5), rgba(var(--vs-color), 0));
}
.vs-ripple-content .vs-ripple-cut-1 {
width: 0px;
height: 0px;
opacity: 0;
position: absolute;
-webkit-transform: translate(-100%, -50%) skew(20deg);
transform: translate(-100%, -50%) skew(20deg);
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0)));
background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
}
.vs-ripple-content .vs-ripple-cut-2 {
width: 0px;
height: 0px;
opacity: 0;
position: absolute;
-webkit-transform: translate(0%, -50%) skew(20deg);
transform: translate(0%, -50%) skew(20deg);
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0)));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
}
.vs-remove-transition *, .vs-remove-transition *:after, .vs-remove-transition *:before {
-webkit-transition: all 0s !important;
transition: all 0s !important;
}