:root { font-size: calc(1rem + 0.25vw); }
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/*html, body { overflow-y:auto; height:100%;  }*/
/*html, body:not(.dimmed) { overflow-y:auto; }*/

html, body { font-family:"Roboto",sans-serif; }

body { line-height: 1.5; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { text-decoration:none; outline: none; cursor: pointer; }
menu { list-style: none; margin: 0; padding: 0; }
aside, menu, footer, .noselect {
   user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}
data { display:none; }

/* Media Onlys */
:is(.desktop) :is(.mo,.to,.mof,.tof,.moi,.toi),
:is(.tablet) :is(.mo,.do,.mof,.dof,.moi,.doi),
:is(.mobile) :is(.to,.do,.tof,.dof,.toi,.doi),
.desktop .dskhide { display:none; }

.desktop .mo, .tablet .mo, .desktop .to, .mobile .to, .tablet .do, .mobile .do, 
.desktop .moi, .tablet .moi, .desktop .toi, .mobile .to, .tablet .do, .mobile .do, 
.desktop .mof, .tablet .mof, .desktop .tof, .mobile .tof, .tablet .dof, .mobile .dof,
.desktop .dskhide { display:none; }

.mobile .mo, .tablet .to, .desktop .do { display:block; }
.mobile .moi, .tablet .toi, .desktop .doi { display:initial; }
.mobile .mof, .tablet .tof, .desktop .dof { display:flex; }
.none { display: none; }
.hidden { visibility: hidden; }

/* Colors */
.blue { color:var(--blue); }
.white { color:var(--white); }

/*------------
   Confetti
--------------*/
canvas.confetti {
  top: 0;
  position: fixed;
  z-index: 30000;
  pointer-events: none;
}

/* ----~~~~  Display ~~~~---- */
.ib { display:inline-block; }
.ripple { position:relative; }

/*-------------------
   Margin/Padding
---------------------*/

.tb30 { padding-top:30px; border-top:1px solid silver !important; }

.mc { margin:0 auto; }
.mobile .mmc { margin:0 auto; }
.tablet .tmc { margin:0 auto; }
.mic { margin-inline:auto !important; }

.mt10  { margin-top:10px !important; }
.mt20  { margin-top:20px !important; }
.mt30  { margin-top:30px !important; }
.mt40  { margin-top:40px !important; }
.mt60  { margin-top:60px !important; }
.mt80  { margin-top:80px !important; }
.mt100  { margin-top:100px !important; }

.mr10  { margin-right:10px !important; }
.mr20  { margin-right:20px !important; }
.mrm20  { margin-right:-20px !important; }
.mr40  { margin-right:40px !important; }
.ml10  { margin-left:10px !important; }
.ml20  { margin-left:20px !important; }
.ml40  { margin-left:40px !important; }
.mrau  { margin-right:auto !important; }
.mlau  { margin-left:auto !important; }

.mb0  { margin-bottom:0 !important; }
.mb10 { margin-bottom:10px !important; }
.mb14 { margin-bottom:14px !important; }
.mb20 { margin-bottom:20px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }
.mb80 { margin-bottom:80px !important; }
.mb100 { margin-bottom:100px !important; }
.mb200 { margin-bottom:200px !important; }

.mobile .mmb20 { margin-bottom:20px !important; }

.p0    { padding:0; }
.pt5   { padding-top:5px; }
.pt10  { padding-top:10px; }
.pt20  { padding-top:20px; }
.pt40  { padding-top:40px; }

.pr10  { padding-right:10px; }
.pr20  { padding-right:20px; }
.pl10  { padding-left:10px; }
.pl20  { padding-left:20px; }

.pbl30   { padding-block:30px; }
.pi20    { padding-inline:20px; }
.pi30    { padding-inline:30px; }
.pi40    { padding-inline:40px; }

.mobile .mpl20 { padding-left:20px; display:inline-block; }

.br-tb { border-top:1px solid var(--blue); }

/*----------
   Generic
------------*/
body:not(.desktop) .br, .mobile :is(.mbr,mbr) { content: "\a"; white-space: pre; display: block; }
body:not(.mobile) :is(.mbr,mbr)  { display:none; }


.rel { position: relative; }
.tac, .mobile .mtac { text-align:center; }
.tab, .mobile .mtab { text-wrap:balance; }
body:not(.desktop) .mt-tar { text-align:right !important; }
body:not(.desktop) .mt-tac { text-align:center !important; }
body:not(.desktop) .mt-tal { text-align:left !important; }

.absmid { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.absx { position: absolute !important; left: 50%; transform: translateX(-50%); }
.absy { position: absolute !important; top: 50%; transform: translateY(-50%); }
.center { margin-inline:auto; }

.fltr { float:right; }
.fltl { float:left; }
.elip { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/*-------------
   Font Size 
---------------*/

.small { font-size:1em;  }
.fs-tiny { font-size:0.7em; }
.ucase { text-transform:uppercase; }

/*-----------------
   Link Animation 
-------------------*/

a.aa-w {
   color:var(--white);
   position: relative;
}

a.aa-w::after {
   position: absolute;
   border-top: 1px solid var(--blue);
   left:50%;
   bottom: -4px;
   width: 100%;
   color: var(--blue);
   content: "";
   opacity: 0;
   transition: bottom .2s ease-in-out, opacity .2s ease-in-out;
   transform: translateX(-50%);
} 

@media (hover: hover) { 
   a.aa-w:not(.loadingb):focus,
   a.aa-w:not(.loadingb):hover { 
      color:var(--blue);
      transition: color .3s ease-in-out;
   }
   a.aa-w:not(.loadingb):focus:after,
   a.aa-w:not(.loadingb):hover:after {
      border-color: var(--blue);
      bottom:0;
      opacity: 1;
   }
   a.aa-w.b2:not(.loadingb):focus:after,
   a.aa-w.b2:not(.loadingb):hover:after {
      bottom:-2px;
   }
}

.aa-list a { position:relative; transition: color .2s ease-in-out; }
.aa-list a:before {
   font-family: 'kui' !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: absolute;
   left:-24px;
   opacity: 0;
   content: "\e905";
   color:var(--blue);
   transition: left .2s ease-in-out, opacity .2s ease-in-out;

}

@media (hover: hover) { 
   .aa-list a:hover { color:var(--blue); }
   .aa-list a:hover:before { left:-14px; opacity: 1; }
   .aa-list a:focus { color:var(--blue); }
   .aa-list a:focus:before { left:-14px; opacity: 1; }
}

/*-----------------
   Css Tooltips 
-------------------*/

a[data-title]:hover:after {
   background: rgba(0,0,0,.8);
   color: #fff;
   border-radius:3px;
   top: -37px;
   content: attr(data-title);
   left: 50%;
   padding: 5px 15px;
   position: absolute;
   z-index: 98;
   width: max-content;
   transform: translateX(-50%);
}

a[data-title]:hover span:before {
   border: solid;
   border-color: rgba(0,0,0,.8) transparent;
   border-width: 5px 5px 0 5px;
   top: -6px;
   content: "";
   left: 50%;
   position: absolute;
   z-index: 99;
   transform: translateX(-50%);
}

.dark a[data-title]:hover:after { background: rgba(255,255,255,.7); color: #000; }
.dark a[data-title]:hover span:before { border-color: rgba(255,255,255,.7) transparent; }


/*-------
   Flex 
---------*/

.flex { display: flex; flex-wrap: wrap; }
.flex-rev { flex-direction: column-reverse; }
.mobile .mflex-rev { flex-direction: column-reverse; }

.flex-col { display:flex; flex-direction:column; flex-wrap: wrap; }
.flex-between { display:flex; justify-content:space-between; flex-wrap: wrap; }
.flex-around { display: flex; justify-content: space-around; }
.flex-center { display:flex; justify-content:center; gap:20px; flex-wrap: wrap; }
.flex-left { display: flex; justify-content: flex-start; }
.flex-right { display: flex; justify-content: flex-end; }
.flex-middle { display: flex; align-items: center; }
.flex-bottom { display: flex; align-items: flex-end; }
.gap5  { gap:5px; }
.gap10 { gap:10px; }
.gap14 { gap:14px; }
.gap20 { gap:20px; }
.mobile .mbreak, .tablet .mbreak { flex-basis: 100%; height: 0; }


/*---------------
   Common Width 
-----------------*/

.desktop .dw75p { width:75%; margin-inline: auto; }
.tablet .tw75p { width:75%; margin-inline: auto; }

.w25p { width:25% !important; }
.w33p { width:33% !important; }
.w50p { width:50% !important; }
.w75p { width:75% !important; }
.w90p { width: 90% !important; }
.w100p { width: 100% !important; }

.w40 { width: 40px !important; }
.w50 { width: 50px !important; }
.w60 { width: 60px !important; }
.w80 { width: 80px !important; }
.w90 { width: 90px !important; }
.w100 { width: 100px !important; }
.w120 { width: 120px !important; }
.w150 { width: 150px !important; }
.w180 { width: 180px !important; }
.w200 { width: 200px !important; }
.w220 { width: 220px !important; }
.w250 { width: 250px !important; }
.w300 { width: 300px !important; }

.tablet .tw100p { width: 100% !important; }
.tablet .tw95p { width: 95% !important; }
.tablet .tw90p { width: 90% !important; }
.tablet .tw80p { width: 80% !important; }
.tablet .tw75p { width: 75% !important; }
.tablet .tw50p { width: 50% !important; }

.mobile .mw100p { width: 100% !important; }
.mobile .mw95p { width: 95% !important; }
.mobile .mw90p { width: 90% !important; }
.mobile .mw80p { width: 80% !important; }
.mobile .mw75p { width: 75% !important; }
.mobile .mw50p { width: 50% !important; }

.r10 { right:10px !important; }
.r20 { right:20px !important; }

/*---------------
    Dividers
-----------------*/

.hr {
   border-top: 1px solid rgba(0,0,0,.1);
   margin-top: 30px;
   width: 100%;
}

.divider {
   height: 30px;
   border-top: 1px solid rgba(255,255,255,.1);
   margin-top: 30px;
   width: 100%;
}

/*---------------
    SVG Icons
-----------------*/
.svg { position:relative; }
.svg:before { 
   content: "";
   background-color: white;
   width:100%; height:100%;
   mask-size: 14px;
   -webkit-mask-size: 14px;
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-position: center;
   -webkit-mask-position: center;
   display: block;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
   mask-image: url(/img/svg/pixel.svg);
}
.svg.left20:before { left:20px; }
.svg.pl20 { padding-left:20px; }
.svg.m16:before { mask-size:16px; }
.svg.m14:before { mask-size:14px; }
.svg.m12:before { mask-size:12px; }
.svg.m10:before { mask-size:10px; }
.svg.m8:before { mask-size:8px; }
.svg.hover:hover:before { background-color: lightgreen; }
.svg.del:hover:before { background-color: #d84d4f; }

.svg.k:before  { mask-image: url(/img/svg/kb.svg); -webkit-mask-image: url(/img/svg/kb.svg); }

.svg.caret-down:before  { mask-image: url(/img/svg/caret-down.svg); -webkit-mask-image: url(/img/svg/caret-down.svg); }
.svg.chev-up:before     { mask-image: url(/img/svg/chevup.svg); -webkit-mask-image: url(/img/svg/chevup.svg); background-color: #d5d5d6; }
.svg.chk:before         { mask-image: url(/img/svg/chk.svg); -webkit-mask-image: url(/img/svg/chk.svg); }
.svg.edit:before        { mask-image: url(/img/svg/pencil-lt.svg); -webkit-mask-image: url(/img/svg/pencil-lt.svg); }
.svg.music:before       { mask-image: url(/img/svg/music.svg); -webkit-mask-image: url(/img/svg/music.svg); }
.svg.plus:before        { mask-image: url(/img/svg/plus.svg); -webkit-mask-image: url(/img/svg/plus.svg); }
.svg.sync:before        { mask-image: url(/img/svg/rotate.svg); -webkit-mask-image: url(/img/svg/rotate.svg); }
.svg.ang-right:before   { mask-image: url(/img/svg/angle-right-b.svg); -webkit-mask-image: url(/img/svg/angle-right-b.svg); }
.svg.del:before { 
   mask-image: url(/img/svg/circle-x.svg); 
   -webkit-mask-image: url(/img/svg/circle-x.svg); 
   content: "";
   mask-size: 18px; 
   -webkit-mask-size: 18px; 
   height: 18px; width: 18px; background-color: #595959; }

/* Social */
.svg.s-st:before  { mask-image: url(/img/svg/st.svg);  -webkit-mask-image: url(/img/svg/st.svg);   mask-size:36px !important; -webkit-mask-size:36px !important; }
.svg.s-pp:before  { mask-image: url(/img/svg/pp.svg);  -webkit-mask-image: url(/img/svg/pp.svg);   mask-size:18px !important; -webkit-mask-size:18px !important; } 
.svg.s-ig:before  { mask-image: url(/img/svg/ig.svg);  -webkit-mask-image: url(/img/svg/ig.svg);   mask-size:22px !important; -webkit-mask-size:22px !important; }
.svg.s-yt:before  { mask-image: url(/img/svg/yt.svg);  -webkit-mask-image: url(/img/svg/yt.svg);   mask-size:30px !important; -webkit-mask-size:30px !important; }
.svg.s-fb:before  { mask-image: url(/img/svg/fb.svg);  -webkit-mask-image: url(/img/svg/fb.svg);   mask-size:14px !important; -webkit-mask-size:14px !important; }
.svg.s-fbc:before { mask-image: url(/img/svg/fbc.svg); -webkit-mask-image: url(/img/svg/fbc.svg);  mask-size:14px !important; -webkit-mask-size:14px !important; }
.svg.s-vm:before  { mask-image: url(/img/svg/vm.svg);  -webkit-mask-image: url(/img/svg/vm.svg);   mask-size:14px !important; -webkit-mask-size:14px !important; }
.svg.s-tw:before  { mask-image: url(/img/svg/tw.svg);  -webkit-mask-image: url(/img/svg/tw.svg);   mask-size:14px !important; -webkit-mask-size:14px !important; }

/* Admin */
.svg.page:before { mask-image: url(/img/svg/page.svg);  -webkit-mask-image: url(/img/svg/page.svg); mask-size:10px !important; -webkit-mask-size:10px !important; }
.svg.trash:before { mask-image: url(/img/svg/trash.svg);  -webkit-mask-image: url(/img/svg/trash.svg); }
.svg.file-plus:before { mask-image: url(/img/svg/file-plus.svg);  -webkit-mask-image: url(/img/svg/file-plus.svg); }

/*-----------------------
   Buttons 
---------------------------*/

.abtn {
   background: var(--blue);
   padding: 4px 10px;
   color: white;
   border-radius: 3px;
   transition: all .3s ease-in-out;
}
@media (hover: hover) { 
   .abtn:hover, .abtn:active { box-shadow: 0px 0px 0px 3px #A8C1F9; color:white !important; text-shadow:1px 1px 0 rgba(0,0,0,.25); }
   .abtn.gray:hover, .abtn.gray:active { color:black !important; box-shadow: 0px 0px 0px 3px #95969755; color:white; text-shadow:1px 1px 0 rgba(0,0,0,.25); }
   .abtn.gray.hover_prime:hover, .abtn.gray.hover_prime:active {  color:white !important; background: var(--blue); box-shadow: 0px 0px 0px 3px #A8C1F9; color:white; text-shadow:1px 1px 0 rgba(0,0,0,.25); }
}

.abtn.gray {
   background-color: #959697; 
   text-shadow: 1px 1px 2px rgba(0,0,0,.6);
}


.btn {
   user-select: none;
   -webkit-user-select: none;
   outline: none !important;
   color: var(--white);
   height: 38px;
   font-size: 14px;
   line-height: 37px;
   border-radius: 5px;
   border: 0;
   text-align: center;
   display: block;
   cursor: pointer;
   position: relative;
   transition: background-color .2s ease-in-out;
}
.btn.error:after {
   content: "\f00d";
   color: red;
   font-weight: bold;
   font-size: 16px;
   text-shadow: 1px 1px 0 rgba(255,255,255,.2);
}

.btn.none { display:none; }

.btn.h40 { height: 40px; }
.btn.w40 { width: 40px; }
.btn.dw { width: 160px; }
.btn.dh { height: 40px; line-height: 100%; padding: 1px 0 0 0; }
.btn.round { border-radius:20px; }
.btn-max { width:max-content; }
.ui.form .field .btn { height:40px; line-height:39px; }

.btn-primary {
  color: white;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
  background: linear-gradient(180deg,#06f,#003fff);
  transition: background .3s ease-in-out, color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.btn-primary:is(:focus,:active) { box-shadow: 0 0 0 5px rgba(0,0,0,.18); background: linear-gradient(180deg,#2993ff,#003fff); }
@media (hover: hover) { .btn-primary:hover { box-shadow: 0 0 0 5px rgba(0,0,0,.15); }}

.btn-orange {
  color: white;
  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(56,19,0,1) 13%, rgba(229,102,0,1) 100%);
  transition: background .3s ease-in-out, color .3s ease-in-out, box-shadow .25s ease-in-out;
}
.btn-orange:is(:focus,:active) { box-shadow: 0 0 0 5px rgba(223, 87, 1, .35); }
@media (hover: hover) { .btn-orange:hover { box-shadow: 0 0 0 5px rgba(223, 87, 1, .35); }}

.btn-red { 
/*   background: rgb(2,0,36); background: rgb(2,0,36); background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(84,12,8,1) 50%, rgba(97,15,10,1) 100%); */
   background: rgb(154,0,0); background: linear-gradient(0deg, rgba(154,0,0,1) 0%, rgba(93,0,0,1) 52%);
   transition: background .3s ease-in-out, color .3s ease-in-out, box-shadow .25s ease-in-out;
}
.btn-red:is(:focus,:active) { box-shadow: 0 0 0 5px rgba(0,0,0,.15); }
@media (hover: hover) { .btn-red:hover { box-shadow: 0 0 0 5px rgba(0,0,0,.15); }}


.btn-sml { font-size: 1.1em; }

.btn-blue { background-color: var(--blue); text-shadow: 1px 1px 0 rgba(0,0,0,.5); }

/*.btn-lgray { background-color: #959697; text-shadow: 1px 1px 2px rgba(0,0,0,.6); }
.btn-lgray:focus, .btn-light-gray:focus { box-shadow: 0 0 0 5px rgba(0,0,0,.15); }
*/

.btn-darkgray {
   background: rgb(94,94,94);
   background: linear-gradient(0deg, rgba(94,94,94,1) 0%, rgba(119,119,119,1) 52%);
   text-shadow: 1px 1px 2px rgba(0,0,0,.6);
   transition: box-shadow .3s ease-in-out;
}
.btn-darkgray:is(:focus,:hover) { box-shadow: 0 0 0 5px rgba(0,0,0,.18); }

.btn-gray { background-color: #999ca4; text-shadow: 1px 1px 2px rgba(0,0,0,.6); }
.btn-gray:focus, .btn-light-gray:focus { box-shadow: 0 0 0 5px rgba(0,0,0,.15); }
.dark .btn-gray, .dark .subToggle { background-color: #3b3b40; }
.dark .btn-gray:focus { box-shadow: 0 0 0 5px #28282c; }
.btn-light-gray { background-color: #dededf; color: gray; }
@media (hover: hover) { 
   .btn-gray:hover            { background-color: #707171; }
   .btn-light-gray:hover      { background-color: #b8b9be; color: white; }
   .dark .btn-gray:hover,
   .dark .subToggle:hover     { background-color: #4d4d54; }
   .dark .btn-red-hover:hover { background-color: #d84d4f !important; color: rgba(255,255,255,1) !important; }
}

.dark .btn.pressed { background-color: rgba(0,0,0,.2) !important; box-shadow: inset 0 0 4px rgba(255,255,255,.5); }

.btn.clr { 
   padding-inline: 10px;
   transition: all .25s ease-in-out;
   color: white;
   text-shadow: 1px 1px 3px rgb(0, 0, 0);
   letter-spacing: .5px;
   background: rgba(0,0,0,.15);
}

.btn.clr:where(:focus, :hover) { 
   background: rgba(0,0,0,.5);
   text-shadow: none;
}

.btn.sml { height: 30px; line-height: 29px; }

.btn-clr-blk {
   background-color: var(--black);
   border: 2px solid var(--white);
   border-radius: 30px;
   transition: border-color .2s ease-in-out;
   height: unset;
}

.btn-blue:active { background-color: var(--blue-active); }
.btn-blue:focus { background-color: var(--blue-dark); }

@media (hover: hover) { 
   .btn-hv-blue:hover, .btn-hv-blue:focus { border-color: var(--blue); }
   .btn-blue:hover, .btn-blue:focus { background-color: var(--blue-dark); }
   .btn-blue:active:hover, .btn-blue:active:focus { background-color: var(--blue-active); }
}

/*-----------------------
   Button Menu
---------------------------*/

/********************/
/*     Sub-Menu     */
/********************/

.submenuBtn { position: relative; }
.submenuBtn button { padding-right:40px; }
.submenuBtn button:has(.kft) { padding-right: 60px; }

.submenuBtn a {
   display: block;
   background: #a9a9a9;
   height: 38px;
   width: 38px;
   position: absolute;
   top: 0;
   right: 0;
   border-radius: 0 5px 5px 0;
}
.subToggle:before {
   content: "\f0d7"; 
   color: #d9d9d9;;
   font-weight: 900;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}
.submenuBtn button i {
   margin-right: 5px;
   height: 36px;
   float: left;
   width: 20px;
/*   margin-left: 10px;*/
}
@media (hover: hover) { 
   .submenuBtn a:hover { background-color: #707171; } 
}

.submenu {
   background-color: #262626;
   border-radius: 5px;
   min-width: max-content;
   margin-bottom: 20px;
   box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
   padding: 4px;
   position: absolute;
   z-index: 5000;
   display: none;
}
.submenu .sub_divider {
   border-bottom: 1px solid rgba(255,255,255,.07);
   margin-bottom: 6px;
   padding-top: 5px;
}
.submenu a {
   display: block;
   height: 38px;
   line-height: 39px;
   color: #d9d9d9;
   transition: all .2s ease-in-out;
   padding-inline: 15px;
   border-radius: 5px;
   text-align: left;
}
.submenu a i { 
   margin-right: 10px; 
   width: 20px;
   height: inherit;
   float: left;
}
@media (hover: hover) { 
   .dark .submenu:not(.contextmenu) a:hover { color:lightgreen; }
   .submenu a:hover { 
      color: var(--blue); 
      text-shadow: 1px 1px 1px rgba(0,0,0,.35);
      background-color: rgba(0,0,0,.65);
   }
}


/*--------------------
   Loading Animation 
----------------------*/

.loading i, .loadingb i { opacity: 0; }
.loading, .loadingb {
   color: transparent !important;
   text-shadow: none !important;
}

.loadingb:before, 
.loading:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  margin: -0.64285714em 0em 0em -0.64285714em;
  width: 1.28571429em;
  height: 1.28571429em;
  -webkit-animation: button-spin 0.6s linear;
  animation: button-spin 0.6s linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  border-radius: 500rem;
  border-color: #FFFFFF transparent transparent;
  border-style: solid;
  border-width: 0.2em;
  -webkit-box-shadow: 0px 0px 0px 1px transparent;
  box-shadow: 0px 0px 0px 1px transparent;
}

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

.spin {
   animation-name: spin;
   animation-duration: 2.5s;
   animation-iteration-count: infinite;
   animation-timing-function: linear; 
}
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/***********************/
/*     UX Elements     */
/***********************/

.ux-radio .ux-item { 
   padding-left: 24px;
   cursor: pointer;
   font-size: 16px;
   min-height: 30px;
   line-height: 30px;
   margin: 4px 0 4px 24px;
   position: relative;
   width:90%;
 }
.ux-radio .ux-item.radio:before {
   font-family: 'kui' !important;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e93b";
   position: absolute;
   color: var(--blue); 
   left: 0; 
   font-size: 16px;
}
.ux-radio .ux-item.radio.selected::before { content: "\e93a"; }
.ux-radio .ux-item input[type=radio] { display: none; }
.ux-radio .ux-item i.delete { 
   width:40px; 
   position: absolute; 
   top: 50%; 
   transform: translateY(-50%); 
   right: 0; 
   color: #676767; 
   transition: color .3s ease-in-out; 
}

@media (hover: hover) { 
   .ux-radio .ux-item i.delete:hover { color:#9f3a38; } 
   .ux-radio .ux-item:hover { color:rgba(0,0,0,.9); }
   .ux-radio .ux-item.radio.selected:hover::before, 
   .ux-radio .ux-item.radio:not(.selected):hover::before { color:#0e267f; }
}

/*-----------------
   Pulse Animation 
-------------------*/

@-webkit-keyframes pulse-grow { to { -webkit-transform: scale(1.2); transform: scale(1.2); } }
@keyframes pulse-grow { to { -webkit-transform: scale(1.2); transform: scale(1.2); } }
.pulse-grow i {
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transform: perspective(1px) translateZ(0);
  -webkit-transform: perspective(1px) translateZ(0);
}
.pulse-grow:hover i, .pulse-grow:focus i, .pulse-grow:active i {
   animation: pulse-grow 0.4s linear infinite alternate;
    -webkit-animation: pulse-grow 0.4s linear infinite alternate;
}

@keyframes flip { 
   0% { transform: rotateY(0); }
   50% { transform: rotateY(90deg); }
   100% { transform: rotateY(0); }
}