html {
 width: 100%;
 --rounded-post: 8px;
 --rounded-element: 3px;
 --zpanel-background: rgb(255, 255, 255);
 --zwhite: rgb(255, 255, 255);
 --znoninvert-white: rgb(255, 255, 255);
 --zblack: rgb(15, 20, 25);
 --zgray: rgb(225, 224, 224);
 --zdark-gray: rgb(108, 117, 125);
 --zlightbox: rgba(0, 0, 0, .4);
 --ztag: #3b4045;
 --zdark-gray: rgb(108, 117, 125);
 --zhover: #f6f6f6;
}

html.invert {
 --zpanel-background: #232223;
 --zwhite: rgb(15, 20, 25);
 --zblack: rgba(217, 217, 217, 1.00);
 --zgray: rgb(48, 48, 48);
 --zdark-gray: rgb(130, 140, 150);
 --zlightbox-9: rgba(67, 57, 57, 0.9);
 --zhover: #1c1c1c;
}

body {
 overflow-x: hidden !important;
}

body.show-spinner>main {
 overflow: hidden !important;
}

/* Hide everything under body tag */
body.show-spinner>* {
 opacity: 0;
}

/* Spinner */
body.show-spinner::after {
 content: " ";
 display: inline-block;
 width: 30px;
 height: 30px;
 border: 2px solid rgba(0, 0, 0, 0.2);
 border-radius: 50%;
 border-top-color: rgba(0, 0, 0, 0.3);
 animation: spin 1s ease-in-out infinite;
 -webkit-animation: spin 1s ease-in-out infinite;
 left: calc(50% - 15px);
 top: calc(50% - 15px);
 position: fixed;
 z-index: 1;
}

@keyframes spin {
 to {
  transform: rotate(360deg);
 }
}

@-webkit-keyframes spin {
 to {
  -webkit-transform: rotate(360deg);
 }
}

::-webkit-scrollbar {
 width: 6px;
 /* for vertical scrollbars */
 height: 6px;
 /* for horizontal scrollbars */
}

::-webkit-scrollbar-track {
 background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
 background: rgba(0, 0, 0, 0.5);
}

label {
 margin-bottom: 0px;
}

.mt10 {
 margin-top: 10px;
}

.mt20 {
 margin-top: 20px;
}

.mt40 {
 margin-top: 40px;
}

.fg1 {
 flex-grow: 1;
}

.z1 {
 border-radius: 0.75rem;
 background: var(--zpanel-background);
 box-shadow: 0 1px 15px rgb(0 0 0 / 4%), 0 1px 6px rgb(0 0 0 / 4%);
 padding: 15px;
 width: 100%;
}

.z2 {
 transform: scale(1.3);
 margin-inline-end: 5px;
}

.z3 {
 margin-top: 40px;
 border: 1px solid var(--zgray);
 border-radius: var(--rounded-post);
 padding: 25px;
 flex-grow: 1;
}

.z4 {
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 40px 0px 10px 0px;
}

.z5 {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 10px;
}

.z6 {
 cursor: pointer;
 color: red;
}

.z7 {
 min-width: 100px;
}

.z8 {
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}

.z31 {
 font-weight: bold;
 color: var(--zdark-gray);
}

.z32 {
 margin-top: 20px;
 font-weight: bold;
 color: var(--zdark-gray);
}

.z33 {
 /* input */
 display: block;
 width: 100%;
 border: 1px solid var(--zgray);
 border-radius: var(--rounded-post);
 height: 40px;
 padding: 0px 10px;
 background-color: var(--zwhite);
 color: var(--zblack);
 outline: none;
}

.z34 {
 /* input */
 display: block;
 width: 100%;
 border: 1px solid var(--zgray);
 border-radius: var(--rounded-post);
 height: 40px;
 padding: 0px 10px;
 background-color: var(--zwhite);
 color: var(--zblack);
 outline: none;
 min-height: 150px;
}

.z35 {
 /* input */
 display: block;
 width: 70px;
 border: 1px solid var(--zgray);
 border-radius: var(--rounded-post);
 height: 40px;
 padding: 0px 10px;
 background-color: var(--zwhite);
 color: var(--zblack);
 outline: none;
 text-align: center;
}

@media (min-width:320px) {}

@media (min-width:500px) {}

@media (min-width:950px) {}

@media (min-width:1150px) {}

@media (hover: hover) {}