.transparent { background-color: transparent; }

.ground { background-color: var(--ground); }

/* Shadows */
.shadow { box-shadow:2px 2px 4px var(--light); }

.shadow-lg-st { box-shadow:2px 2px 4px var(--light); }
.shadow-lg-st:hover { box-shadow:2px 2px 4px var(--strong); }

.shadow-hover {}
.shadow-hover:hover { box-shadow:2px 2px 4px var(--light); }

.shadow-st { box-shadow:2px 2px 4px var(--strong); }

.shadow-st-hover {}
.shadow-st-hover:hover { box-shadow:2px 2px 4px var(--strong); }

.text-shadow-nn-lg { transition: text-shadow 0.3s ease; }
.text-shadow-nn-lg:hover { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); }

.text-shadow {text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);}

/* Borders */
.noborder { border: none; outline:none; }

.border { border: 1px var(--light) solid; }
.border-2 { border: 2px var(--light) solid; }

.border-st { border: 1px var(--strong) solid; }
.border-st-2 { border: 2px var(--strong) solid; }

.border-lg-st { border: 1px var(--light) solid; }
.border-lg-st:hover { border: 1px var(--strong) solid; }

.border-lg-st-2 { border: 2px var(--light) solid; }
.border-lg-st-2:hover { border: 2px var(--strong) solid; }

.border-explicit { border: 1px solid var(--strong); }
.border-explicit-2 { border: 2px solid var(--strong); }
.border-explicit-3 { border: 3px solid var(--strong); }

.border-top { border-top: 1px solid var(--light); border-left: none; border-right: none; border-bottom: none; outline:none; }
.border-top-2 { border-top: 2px solid var(--light); border-left: none; border-right: none; border-bottom: none; outline:none; }
.border-left { border-top: none; border-left: 1px solid var(--light); border-right: none; border-bottom: none; outline:none; }
.border-left-2 { border-top: none; border-left: 2px solid var(--light); border-right: none; border-bottom: none; outline:none; }
.border-right { border-top: none; border-left: none; border-right: 1px solid var(--light); border-bottom: none; outline:none; }
.border-right-2 { border-top: none; border-left: none; border-right: 2px solid var(--light); border-bottom: none; outline:none; }
.border-bottom { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid var(--light); outline:none; }
.border-bottom-st { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid var(--strong); outline:none; }
.border-bottom-2 { border-top: none; border-left: none; border-right: none; border-bottom: 2px solid var(--light); outline:none; }

.border-bottom-lg-st { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid var(--light); outline:none; }
.border-bottom-lg-st:hover { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid var(--strong); outline:none; }
.border-bottom-lg-st:focus { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid var(--strong); outline:none; }

.border-red { border: 1px "#ff3232" solid; }

.nofocus {} .nofocus:focus { outline: none; }

.underline {
	margin: auto; border-bottom: 1px solid var(--light);
	padding-bottom: 5px; margin-bottom: 7px;
}

.underline-explicit {
	margin: auto; border-bottom: 1px solid var(--strong);
	padding-bottom: 5px; margin-bottom: 7px;
}

.underline-link {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.underline-link:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.underline-link:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.radius-1 { border-radius: 1px; }
.radius-2 { border-radius: 2px; }
.radius-3 { border-radius: 3px; }
.radius-4 { border-radius: 4px; }
.radius-5 { border-radius: 5px; }
.radius-6 { border-radius: 6px; }
.radius-7 { border-radius: 7px; }
.radius-8 { border-radius: 8px; }
.radius-9 { border-radius: 9px; }
.radius-10 { border-radius: 10px; }
.radius-15 { border-radius: 15px; }
.radius-20 { border-radius: 20px; }
.radius-25 { border-radius: 25px; }
.radius-30 { border-radius: 30px; }
.radius-35 { border-radius: 35px; }
.radius-40 { border-radius: 40px; }
.radius-45 { border-radius: 45px; }
.radius-50 { border-radius: 50px; }
.radius-60 { border-radius: 60px; }
.radius-70 { border-radius: 70px; }
.radius-80 { border-radius: 80px; }
.radius-90 { border-radius: 90px; }
.radius-100 { border-radius: 100px; }

.radius-top-5 { border-radius: 5px 5px 0px 0px; }
.radius-top-10 { border-radius: 10px 10px 0px 0px; }
.radius-top-15 { border-radius: 15px 15px 0px 0px; }
.radius-top-20 { border-radius: 20px 20px 0px 0px; }
.radius-top-25 { border-radius: 25px 25px 0px 0px; }
.radius-top-30 { border-radius: 30px 30px 0px 0px; }
.radius-top-35 { border-radius: 35px 35px 0px 0px; }
.radius-top-40 { border-radius: 40px 40px 0px 0px; }
.radius-top-45 { border-radius: 45px 45px 0px 0px; }
.radius-top-50 { border-radius: 50px 50px 0px 0px; }

.radius-bottom-5 { border-radius: 0px 0px 5px 5px; }
.radius-bottom-10 { border-radius: 0px 0px 10px 10px; }
.radius-bottom-15 { border-radius: 0px 0px 15px 15px; }
.radius-bottom-20 { border-radius: 0px 0px 20px 20px; }
.radius-bottom-25 { border-radius: 0px 0px 25px 25px; }
.radius-bottom-30 { border-radius: 0px 0px 30px 30px; }
.radius-bottom-35 { border-radius: 0px 0px 35px 35px; }
.radius-bottom-40 { border-radius: 0px 0px 40px 40px; }
.radius-bottom-45 { border-radius: 0px 0px 45px 45px; }
.radius-bottom-50 { border-radius: 0px 0px 50px 50px; }

/* Opacity */
.opacity-01 { opacity: 0.1; }
.opacity-02 { opacity: 0.2; }
.opacity-03 { opacity: 0.3; }
.opacity-04 { opacity: 0.4; }
.opacity-05 { opacity: 0.5; }
.opacity-06 { opacity: 0.6; }
.opacity-07 { opacity: 0.7; }
.opacity-08 { opacity: 0.8; }
.opacity-09 { opacity: 0.9; }
.opacity-10 { opacity: 1.0; }

.opacity-in-01 { transition: all 0.3s ease 0s; opacity: 1.0; }
.opacity-in-01:hover { transition: all 0.3s ease 0s; opacity: 0.1; }
.opacity-in-02 { transition: all 0.3s ease 0s; opacity: 1.0; }
.opacity-in-02:hover { transition: all 0.3s ease 0s; opacity: 0.2; }
.opacity-in-03 { transition: all 0.3s ease 0s; opacity: 1.0; }
.opacity-in-03:hover { transition: all 0.3s ease 0s; opacity: 0.3; }
.opacity-in-04 { transition: all 0.3s ease 0s; opacity: 1.0; }
.opacity-in-04:hover { transition: all 0.3s ease 0s; opacity: 0.4; }
.opacity-in-05 { transition: all 0.3s ease 0s; opacity: 1.0; }
.opacity-in-05:hover { transition: all 0.3s ease 0s; opacity: 0.5; }
.opacity-in-06 { transition: all 0.3s ease 0s; opacity: 1.0; }
.opacity-in-06:hover { transition: all 0.3s ease 0s; opacity: 0.6; }
.opacity-in-07 { transition: all 0.3s ease 0s; opacity: 1.0; }
.opacity-in-07:hover { transition: all 0.3s ease 0s; opacity: 0.7; }
.opacity-in-08 { transition: all 0.3s ease 0s; opacity: 1.0; }
.opacity-in-08:hover { transition: all 0.3s ease 0s; opacity: 0.8; }
.opacity-in-09 { transition: all 0.3s ease 0s; opacity: 1.0; }
.opacity-in-09:hover { transition: all 0.3s ease 0s; opacity: 0.9; }

.opacity-out-01 { opacity: 0.1; }
.opacity-out-01:hover { opacity: 1.0; }
.opacity-out-02 { opacity: 0.2; }
.opacity-out-02:hover { opacity: 1.0; }
.opacity-out-03 { opacity: 0.3; }
.opacity-out-03:hover { opacity: 1.0; }
.opacity-out-04 { opacity: 0.4; }
.opacity-out-04:hover { opacity: 1.0; }
.opacity-out-05 { opacity: 0.5; }
.opacity-out-05:hover { opacity: 1.0; }
.opacity-out-06 { opacity: 0.6; }
.opacity-out-06:hover { opacity: 1.0; }
.opacity-out-07 { opacity: 0.7; }
.opacity-out-07:hover { opacity: 1.0; }
.opacity-out-08 { opacity: 0.8; }
.opacity-out-08:hover { opacity: 1.0; }
.opacity-out-09 { opacity: 0.9; }
.opacity-out-09:hover { opacity: 1.0; }

.transition-01-01 { transition: all 0.1s ease 0s; } .transition-01-01:hover { transition: all 0.1s ease 0s; }
.transition-02-01 { transition: all 0.2s ease 0s; } .transition-02-01:hover { transition: all 0.1s ease 0s; }
.transition-03-01 { transition: all 0.3s ease 0s; } .transition-03-01:hover { transition: all 0.1s ease 0s; }
.transition-04-01 { transition: all 0.4s ease 0s; } .transition-04-01:hover { transition: all 0.1s ease 0s; }

.transition-01-02 { transition: all 0.1s ease 0s; } .transition-01-02:hover { transition: all 0.2s ease 0s; }
.transition-02-02 { transition: all 0.2s ease 0s; } .transition-02-02:hover { transition: all 0.2s ease 0s; }
.transition-03-02 { transition: all 0.3s ease 0s; } .transition-03-02:hover { transition: all 0.2s ease 0s; }
.transition-04-02 { transition: all 0.4s ease 0s; } .transition-04-02:hover { transition: all 0.2s ease 0s; }

.transition-01-03 { transition: all 0.1s ease 0s; } .transition-01-03:hover { transition: all 0.3s ease 0s; }
.transition-02-03 { transition: all 0.2s ease 0s; } .transition-02-03:hover { transition: all 0.3s ease 0s; }
.transition-03-03 { transition: all 0.3s ease 0s; } .transition-03-03:hover { transition: all 0.3s ease 0s; }
.transition-04-03 { transition: all 0.4s ease 0s; } .transition-04-03:hover { transition: all 0.3s ease 0s; }

.transition-01-04 { transition: all 0.1s ease 0s; } .transition-01-04:hover { transition: all 0.4s ease 0s; }
.transition-02-04 { transition: all 0.2s ease 0s; } .transition-02-04:hover { transition: all 0.4s ease 0s; }
.transition-03-04 { transition: all 0.3s ease 0s; } .transition-03-04:hover { transition: all 0.4s ease 0s; }
.transition-04-04 { transition: all 0.4s ease 0s; } .transition-04-04:hover { transition: all 0.4s ease 0s; }

.transp { background-color: transparent; }
.rgb000 { background-color: #000; }
.rgb111 { background-color: #111; }
.rgb222 { background-color: #222; }
.rgb333 { background-color: #333; }
.rgb444 { background-color: #444; }
.rgb555 { background-color: #555; }
.rgb666 { background-color: #666; }
.rgb777 { background-color: #777; }
.rgb888 { background-color: #888; }
.rgb999 { background-color: #999; }
.rgbfff { background-color: #fff; }
.rgbf0f0f0 { background-color: #f0f0f0; }

.bg { background-color: var(--background); }
.bg-ground { background-color: var(--ground); }
.bg-light { background-color: var(--light); }
.bg-solid { background-color: var(--solid); }
.bg-disabled { background-color: var(--disabled); }
.bg-strong { background-color: var(--strong); color: #fff; }
.bg-color { background-color: var(--color); }
.bg-red { background-color: #ff3232; color: #fff; }
.bg-purple { background-color: #643296; color: #fff; }
.bg-blue { background-color: #3232ff; color: #fff; }
.bg-orange { background-color: #ff9632; color: #fff; }
.bg-green { background-color: #10913c; color: #fff; }

.color-bg { color: var(--background); }
.color-ground { color: var(--ground); }
.color-light { color: var(--light); }
.color-solid { color: var(--solid); }
.color-disabled { color: var(--disabled); }
.color-strong { color: var(--strong); }
.color-color { color: var(--color); }
.color-blue { color: #245ae5 }
.color-red { color: #ff3232 }
.color-green { color: #10913c }