@font-face {
font-family: "Great Vibes";
src: url(//topid.vn/wp-content/plugins/auto-banner/assets/fonts/Great_Vibes/GreatVibes-Regular.ttf) format("truetype");
}
@font-face {
font-family: "Open Sans";
src: url(//topid.vn/wp-content/plugins/auto-banner/assets/fonts/Open_Sans/static/OpenSans/OpenSans-Bold.ttf) format("truetype");
}
@font-face {
font-family: "Inter";
src: url(//topid.vn/wp-content/plugins/auto-banner/assets/fonts/Inter/static/Inter-Medium.ttf) format("truetype");
}
@font-face {
font-family: "Lobster";
src: url(//topid.vn/wp-content/plugins/auto-banner/assets/fonts/SVN-Lobster.ttf) format("truetype");
}
.spinner {
-webkit-animation: rotator 1.4s linear infinite;
animation: rotator 1.4s linear infinite;
}
@-webkit-keyframes rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
@keyframes rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
.path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}
@-webkit-keyframes colors {
0% {
stroke: #4285f4;
}
25% {
stroke: #de3e35;
}
50% {
stroke: #f7c223;
}
75% {
stroke: #1b9a59;
}
100% {
stroke: #4285f4;
}
}
@keyframes colors {
0% {
stroke: #4285f4;
}
25% {
stroke: #de3e35;
}
50% {
stroke: #f7c223;
}
75% {
stroke: #1b9a59;
}
100% {
stroke: #4285f4;
}
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform: rotate(450deg);
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform: rotate(450deg);
}
}
#loading {
text-align: center;
}
.avt_img { max-width: 100%;
}
.cropper-crop-box, .cropper-view-box {
border-radius: 50%;
}
.cropper-view-box {
box-shadow: 0 0 0 1px #39f;
outline: 0;
}
#containerGenerate .konvajs-content {
max-width: 100%;
height: auto !important;
}
#containerGenerate .konvajs-content canvas {
max-width: 100%;
height: auto !important;
position: relative !important;
}
#previewAvatar {
width: 200px;
margin: 20px;
}
.bold {
font-weight: bold;
}
.cropper-container.cropper-bg, #avt_img {
width: 100% !important;
height: 300px !important;
}