html {
 width: 100%;
 --rounded-post: 8px;
 --rounded-element: 4px;
 --zpanel-background: rgb(255, 255, 255);
 --zwhite: rgb(255, 255, 255);
 --znoninvert-white: rgb(255, 255, 255);
 --zblack: rgb(15, 20, 25);
 --zblue: #368bc0;
 --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;
 --zhover2: #f0f0f0;
 --border-color: #d7d7d7;
}

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;
 --zhover2: #383838;
 --border-color: #424242;
}

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;
}

.alert {
 z-index: 1051 !important;
 top: 41px !important;
 border-radius: var(--rounded-post) !important;
 max-width: 400px !important;
}

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

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

.miw93 {
 min-width: 93px;
}

.bc170191201 {
 background-color: rgb(170, 191, 201) !important;
}

.mytable-striped tbody tr {
 transition: background-color 0.25s ease-in-out;
}

.mytable-striped tbody tr:nth-of-type(odd) {
 background-color: var(--zgray);
}

.cr {
 color: #d73a3a;
}

.b {
 font-weight: bold;
}

.pr {
 position: relative;
}

.fs0 {
 flex-shrink: 0;
}

.g {
 color: var(--zdark-gray);
}

.p25 {
 padding: 25px;
}

.mt3 {
 margin-top: 3px;
}

.mt5 {
 margin-top: 5px;
}

.mt10 {
 margin-top: 10px;
}

.mt15 {
 margin-top: 15px;
}

.mt20 {
 margin-top: 20px;
}

.mt30 {
 margin-top: 30px;
}

.mt40 {
 margin-top: 40px;
}

.mb15 {
 margin-bottom: 15px;
}

.dfb {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
}

.dfc {
 display: flex;
 align-items: center;
 justify-content: center;
}

.fs18 {
 font-size: 18px;
}

.bcp {
 background-color: #ef6c83;
}

.bclb {
 background-color: #0088e1;
}

.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%;
}

.z1l {
 width: 100%;
}

.z1r {
 width: 100%;
}

.z2 {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 15px;
}

.z3 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
}

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

.z5 {
 font-size: 20px;
 text-align: center;
 margin-bottom: 10px;
}

.z6 {
 font-size: 19px;
 font-weight: bold;
}

.z7 {
 margin-bottom: 15px;
 border-radius: 6px;
 color: var(--znoninvert-white);
 background-color: var(--ztag);
 padding: 7px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 user-select: none;
}

.z8 {
 padding: 0px 10px;
 border-radius: 4px;
 font-weight: bold;
}

.z9 {
 font-size: 12px;
 padding-right: 10px;
 min-height: 220px;
 max-height: 220px;
 overflow: auto;
}

.z10 {
 min-height: 220px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}

.z11 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 max-height: 750px;
 overflow: auto;
 padding-right: 10px;
}

.z12 {
 border: 1px solid var(--zgray);
 border-radius: 0.75rem;
 padding: 15px;
 transition: background-color 0.1s ease-in;
 cursor: pointer;
}

.z13 {
 display: inline-block;
 margin-bottom: 10px;
 border-radius: 6px;
 color: var(--znoninvert-white);
 background-color: var(--ztag);
 padding: 8px;
 cursor: default;
}

.z14 {
 margin-bottom: 20px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.z15 {
 font-size: 12px;
 padding-right: 10px;
 max-height: 150px;
 overflow: auto;
}

.z16 {
 padding: 0px 10px;
 display: flex;
 align-items: center;
 gap: 5px;
}

.z17 {
 width: 7px;
 height: 7px;
 border-radius: 3px;
 background-color: red;
 cursor: pointer;
 flex-shrink: 0;
}

.z18 {
 font-size: 20px;
 cursor: pointer;
 color: red;
}

.z19 {
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-bottom: 1px solid var(--zgray);
 padding: 9px 0px;
 margin-bottom: 20px;
 gap: 10px;
}

.z20 {
 border: 1px solid var(--zgray);
 border-radius: 8px;
 padding: 4px 8px;
 outline: none;
 width: 180px;
}

.z21 {
 font-size: 18px;
 font-weight: bold;
}

.z22 {
 background-color: var(--zpanel-background);
 color: var(--zblack) !important;
}

.z23 {
 font-size: 12px;
 font-style: italic;
}

.z24 {
 margin-bottom: 20px;
 border: 1px solid var(--zgray);
 border-radius: 7px;
 padding: 15px;
}

.z25 {
 position: fixed;
 z-index: 9999;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: var(--zlightbox);
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
}

.z26 {
 max-width: 320px;
 max-height: 430px;
 overflow: auto;
 background-color: var(--zpanel-background);
 border-radius: var(--rounded-post);
 box-shadow: rgba(1, 1, 1, 0.7) 0px 0px 17px;
}

.z27 {
 display: flex;
 justify-content: end;
 align-items: center;
}

.z28 {
 padding: 5px;
 cursor: pointer;
}

.z29 {
 padding: 0px 25px 25px 25px;
}

.z30 {
 font-size: 14px;
 font-style: italic;
}

.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;
}

.z35 {
 color: red;
 font-size: 14px;
 display: none;
}

.z36 {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

.a37 {
 flex-grow: 1;
 width: 100%;
}

.z38 {
 /* padding: 5px; */
 cursor: pointer;
 transition: background-color 0.2s ease;
 border-radius: 9999px;
 width: 40px;
 height: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
 /* text-align: center; */
}

.z38:active {
 background-color: var(--gray);
}

.z39 {
 vertical-align: text-bottom;
 border: 0.25em solid currentColor;
 border-right-color: transparent;
 border-radius: 50%;
 animation: spinner-border .75s linear infinite;
 width: 20px;
 height: 20px;
 border-width: 0.15em;
 margin-left: 5px;
 opacity: 0;
 transition: opacity 0.5s ease;
}

.z49 {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.z50 {
 margin-top: 5px;
 border: 1px solid var(--border-color);
 border-radius: 7px;
 padding: 5px;
}

.z51 {
 display: block;
 width: 100%;
 border: 0px;
 font-size: 18px;
 outline: none;
 background-color: unset;
 color: unset;
}

.z52 {
 margin-top: 10px;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 30px;
}

.z53 {
 padding: 6px 10px;
 font-weight: bold;
 font-size: 16px;
 border-radius: var(--rounded-element);
 width: 74px;
 cursor: pointer;
 user-select: none;
 color: #4a81c5;
}

.z54 {
 padding: 6px 10px;
 font-size: 16px;
 color: gray;
 width: 74px;
 user-select: none;
}

.z55 {
 display: inline-block;
 border-radius: 4px;
 padding: 3px;
 cursor: pointer;
}

.z56 {
 max-height: 310px;
 overflow: auto;
 padding: 10px;
 font-size: 18px;
}

.z57 {
 position: absolute;
 bottom: 4px;
 right: 4px;
 display: flex;
 justify-content: right;
 align-items: center;
}

.z58 {
 border-radius: 4px;
 padding: 4px;
 cursor: pointer;
}

.z58:hover {
 background-color: var(--zhover2);
}

.z58:active {
 background-color: var(--border-color);
}

.z59 {
 position: relative;
 border: 1px solid var(--border-color);
 border-radius: 7px !important;
 height: 350px;
}

.z60 {
 position: absolute;
 right: 40px;
 bottom: 40px;
 padding: 20px;
 border-radius: 8px;
 box-shadow: 0 1px 15px rgba(83, 83, 83, 0.13), 0 1px 6px rgba(101, 101, 101, 0.16);
 max-width: 200px;
 font-size: 14px;
 background-color: var(--zpanel-background);
}

.z61 {
 font-size: 14px;
 display: flex;
 align-items: center;
 gap: 6px;
 margin: 4px 0px 0px 0px !important;
 cursor: pointer;
}

.z62 {
 border: none;
 margin-bottom: 2px;
}

.z63 {
 transition: opacity 2s ease-out;
}

.z64 {
 font-size: 20px;
 cursor: pointer;
}

.z66 {
 margin-top: 15px;
 display: flex;
 justify-content: space-between;
 border-radius: var(--rounded-post);
}

.z67 {
 cursor: pointer;
 font-size: 18px;
}

.z68 {
 max-width: 500px;
}

.z69 {
 margin-top: 15px;
 max-height: 500px;
 overflow: auto;
}

.z70 {
 color: var(--zblue);
 cursor: pointer;
}

.z71 {
 min-width: 165px;
}

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

@media (min-width:500px) {
 .z26 {
  max-width: 450px;
 }

 .z36 {
  flex-wrap: nowrap;
  gap: 8px;
 }
}

@media (min-width:950px) {
 .z2 {
  gap: 0px;
 }

 .z1l {
  width: 52%;
 }

 .z1r {
  width: 47%;
 }

 .z9 {
  font-size: 14px;
 }

 .z26 {
  max-width: 700px;
  max-height: 830px;
 }
}

@media (min-width:1150px) {

 .z2 {
  gap: 0px;
 }

 .z1l {
  width: 65%;
 }

 .z1r {
  width: 34%;
 }

 .z9 {
  font-size: 16px;
 }

 .z11 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
 }
}

@media (hover: hover) {
 .z12:hover {
  background-color: var(--zhover);
 }

 .z38:hover {
  background-color: var(--zhover);
 }

 .z53:hover {
  background-color: var(--zhover2);
 }
}