/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License:none (public domain)
*/
@import url("fonts.css");
/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
	margin:0;
	padding:0;
	border:0;
  text-decoration: none;
	/* font:inherit; */
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
button, .button {outline: none;border: none;}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
table{border-collapse:separate;	border-spacing:1px;}
span {display: inline-block;}

/* BORDER FIX */

html{box-sizing:border-box;font-size: 62.5%;}
*, *:before, *:after{box-sizing:inherit;}


/* VARIABLES */

:root {
  /* COLORS */

  --black: rgb(26, 26, 26);
  --white: rgb(255, 255, 255);
  --white-background: rgb(238, 238, 238);
  --blue: rgb(11, 37, 61);
  --blue-40: rgb(6, 26, 44);
  --gray: rgb(97, 97, 97);
  --light-gray: rgb(207, 207, 207);
  --k-light: rgb(251, 255, 0);
  --k-light-20: rgb(168, 171, 0);
  --theme-red: rgb(161, 56, 87);
  --border-red: rgb(212 176 190);
  --lighter-red: rgb(255 244 247);
  --theme-blue: rgb(0, 135, 212);
  --theme-pink: rgb(214, 48, 98);
  --border-blue: rgb(192 211 221);
  --lighter-blue: rgb(244, 255, 255);
  --theme-green: rgb(79 128 0);
  --border-green: rgb(195 205 178);
  --lighter-green: rgb(249, 255, 244);

  /* DIMENSIONS */
  --header-height: 4.5rem;
  --header-background: var(--blue);
  --header-foreground: var(--k-light);
  --logo-height: 2.75rem;
  --nav-height: 4rem;
  --nav-foreground: #1b1b1b;
  --footer-height: 4.5rem;
  --footer-background: var(--black);
  --footer-foreground: rgb(197, 197, 197);
  --body-padding: 0rem;
  --font-sans-serifs: "Monte Sans","Peru","Quicksand", sans-serif;
  --monospace-font: "Cascadia","Consolas", monospace;
  --link-color: rgb(0, 156, 197);
  --link-color-hover: var(--k-light-20);
  --link-color-dark-hover: var(--k-light);

  /* TYPOGRAPHY */
  --light: 200;
  --regular: 400;
  --bold: 600;
  --body-font-size: 1.4rem;

  /* MEASUREMENTS */  
  --app-min-width: 115rem;
  --dock-width: 28rem;
  --content-margin-right: 28rem;
  --content-margin-left: 10rem;
  --input-field-width: 17.5rem;
  --input-field-width-W15: 17.5rem;
  --input-field-width-W10: 10rem;
  --input-field-width-W75: 7.5rem;
  --input-field-width-W50: 5rem;
  --input-graphic-width: 2.5rem;
  --sidebar-max-width: 28rem;
  --sidebar-width: 20vw;
  --input-graphic-width: 3.5rem;

  /* PADDING */
  --card-padding: 1rem;

}

* {
  font-family: var(--font-sans-serifs);
  font-weight: 400;
  font-size: 1.4rem;
  user-select: none;
  transition: background 0.2s ease-in-out, opacity 0.2s ease-in-out, border 0.2s ease-in-out, border-radius 0.2s ease-in-out;
}

a {
  color: unset;
}

a.link {
  color: var(--link-color);
}

a.link:hover {
  color: var(--link-color-hover);
}

h1, h2, h3 {
  font-weight: 900;
  font-size: 1.4rem;
}

h1 {
  text-transform: uppercase;
}

hr {
  margin: 2rem 0;
}

.em-text {
  font-weight: bold;
  display: inline;
}

.hide {
  display: none;
}

.mono {
  font-family: "Ubuntu Mono";
}

.gray, .gray * {
  color: gray;
}

.bold, .bold * {
  font-weight: bold !important;
}

.italic, .italic * {
  font-style: italic !important;
}

h2.section-head {
  /* text-transform: uppercase; */
  color: gray;
  /* text-align: center; */
  margin: 1.5rem 0;
}

body {
  padding: 2rem 0rem 3rem;
}

.empty-div {
  display: flex;
  justify-content: center;
  padding: 5rem 0;
  border: 0.1rem solid lightgray;
}

div#header {
  position: sticky;
  top: 0;
  padding: 0 1.75rem;
  background: white;
  display: flex;
  justify-content: space-between;
  height: 4.75rem;
  /* border-bottom: 0.1rem solid lightgray; */
  align-items: center;
  z-index: 1;
}

div#logo_wrapper {
  display: inline-flex;
  align-items: center;
}

div#logo_wrapper img {
  height: 2.5rem;
  width: auto;
}

.button {
  font-weight: 700;
  padding: 0.65rem 1.25rem;
  color: white;
  background: black;
  display: block;
  width: fit-content;
  text-align: center;
  border-radius: 50px;
  min-width: 10rem;
  cursor: pointer;
}

.button:hover {
  opacity: 0.75;
}

.button.full {
  width: 100%;
}

.button.colored {
  background: #006080;
}

.button.stroked {
  border: 0.1rem solid;
  background: transparent;
  color: black;
}

.button.stroked.colored {
  color: #00526d;
}

.app-logo {
  display: flex;
  align-items: center;
}

.app-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 1.25rem;
  margin: 1.25rem 0;
  align-items: center;
}

.app-link a {
  font-weight: 400;
}

.external-link {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

.external-link .graphic {
  background: gray;
  height: 1.6rem;
  width: 1.6rem;
  mask-image: url("../_assets/_graphics/icons/A_ic-link-external.svg");
  mask-size: 100% auto;
  mask-position: center center;
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-link-external.svg");
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center center;
}

.app-logo img {
  height: 3.25rem;
}

div#main {
  /* padding: 0 1rem; */
  min-height: calc(100vh - 26.5rem);
}

#main > .section {
  margin: 1.5rem 0;
}

.app-name {
  font-weight: 100;
  padding: 0.35rem 0;
  text-transform: uppercase;
}

.app-line {
  color: var(--gray);
}

.web-samples {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 1.25rem;
}

.slider-wrapper {
  position: relative;
}

.nav-btn {
  position: absolute;
  top: 40%;
  background: black;
  height: 1.8rem;
  width: 1.8rem;
  mask-size: 100% auto;
  mask-position: center center;
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center center;
}

.nav-btn.prev-btn {
  left: 0;
  mask-image: url("../_assets/_graphics/icons/A_ic-arrow-left.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-arrow-left.svg");
}

.nav-btn.next-btn {
  right: 0;
  mask-image: url("../_assets/_graphics/icons/A_ic-arrow-right.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-arrow-right.svg");
}

.slide.testimony p {
  color: gray;
  font-size: 1.75rem;
  width: 20rem;
  text-align: center;
  margin: 0 auto;
  line-height: 1.5;
}

.quotes {
  height: 2rem;
  width: 2rem;
  margin: 1rem auto;
  background: black;
  mask-size: 100% auto;
  mask-position: center center;
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center center;
}

.quotes.open {
  mask-image: url("../_assets/_graphics/icons/A_ic-ldquo.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-ldquo.svg");
}

.quotes.close {
  mask-image: url("../_assets/_graphics/icons/A_ic-rdquo.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-rdquo.svg");
}

.testimony-author {
  text-align: center;
}

.testimony-author .name {
  text-transform: uppercase;
  font-weight: 900;
}

div#footer {
  text-align: center;
  margin: 1.75rem 0;
  padding: 0;
  /* border-top: 0.1rem solid lightgray; */
}

.footer-item {
  margin: 0.5rem 0rem;
}

.footer-item, .footer-item * {
  color: black;
  font-weight: 900;
}

/* TEXT FIELDS */

input[type="text"],
input[type="date"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="color"],
input[type="website"],
input[type="email"],
textarea,
select {
  background: white;
  border: 1px solid rgba(197, 197, 197, 0);
  width: 100%;
  padding: 0.75rem 1.75rem;
  box-shadow: 0px 0px 5px 0px #c3c3c3;
  border-radius: 50px;
}

select {
  border-right: 1.25rem solid transparent;
}

textarea {
  border-radius: 0.5rem;
  height: 12.5rem;
  resize: none;
}

option {
  padding: 5px;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="color"]:focus,
input[type="website"]:focus,
input[type="email"]:focus,
.widget-container.has-graphic > .input-field.focused,
.widget-container.has-graphic > .input-field:focus-within,
textarea:focus,
select:focus {
  border-color: rgb(0, 161, 201);
  outline: 3px solid rgb(205, 255, 158);
}

input[type="submit"] {
  width: 100%;
  margin: 2rem 0;
  padding: 0.85rem 0;
  border-radius: 50px;
  /* background: black; */
  color: white;
  cursor: pointer;
}

input[type="submit"]:hover {
  opacity: 0.75;
}

input[type="submit"].disabled {
  background: #b6b6b6;
  color: #474747;
  cursor: default;
}

input[type="submit"].disabled:hover {
  opacity: 1;
}

input.invalid {
  border-color: #ff0062;
  background: #fff9f6;
  color: #7b395a;
}

label {
  cursor: pointer;
}

.required label {
  padding-right: 1.45rem;
  background-image: url("../_assets/_graphics/icons/A_ic-asterisk-red.svg");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 0.85rem auto;
}

.input-label {
  padding: 0.7rem 0.75rem;
}

.input-label label {
  font-weight: 600;
}

.widget-container {
  margin: 1.25rem 0;
}

.contact {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  padding: 0.35rem 0;
}

.contact-content {
  font-weight: 600;
}

.contact .graphic {
  background: black;
  height: 2rem;
  width: 2rem;
  mask-size: 100% auto;
  mask-position: center center;
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center center;
}

.contact.phone .graphic {
  mask-image: url("../_assets/_graphics/icons/A_ic-phone-2.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-phone-2.svg");
}

.contact.email .graphic {
  mask-image: url("../_assets/_graphics/icons/A_ic-at.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-at.svg");
}

.contact.address .graphic {
  mask-image: url("../_assets/_graphics/icons/A_ic-location-2.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-location-2.svg");
}

/* MENUS */

.cta_wrapper {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.cta .btn {
  background: black;
  height: 2.25rem;
  width: 2.25rem;
  mask-size: 100% auto;
  mask-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  cursor: pointer;
}

.cta.menu .btn {
  mask-image: url("../_assets/_graphics/icons/A_ic-menu.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-menu.svg");
}

.cta.account .btn {
  mask-image: url("../_assets/_graphics/icons/A_ic-user-account-50.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-user-account-50.svg");
}

.content.menu a {
  display: block;
  padding: 0.75rem 2rem;
  color: black;
  /* font-weight: bold; */
  white-space: nowrap;
}

.content.menu a:hover {
  background: #ececec;
}

.content.account {
  padding: 1.75rem;
}

.content.account .profile {
  position: relative;
  min-height: 7.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 0.1rem solid lightgray;
}

.content.account .profile .agent-id {
  position: absolute;
  font-weight: 900;
}

.content.account .profile .image {
  margin: 1.25rem auto;
  height: 4rem;
  width: 4rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  box-shadow: 0 0px 0.5rem 0 lightgray;
}

.content.account .profile .names {
  margin: 1.25rem 0;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.content.menu .links {
  padding: 0;
}

.block-link {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 0;
}

.block-link .graphic {
  display: flex;
  background: rgb(173, 173, 173);
  height: 1.5rem;
  width: 1.5rem;
  mask-image: url("../_assets/_graphics/icons/A_ic-link-external.svg");
  mask-size: 100% auto;
  mask-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-link-external.svg");
  -webkit-mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
}

.block-link.nav-link .graphic {
  background: black;
  height: 2.0rem;
  width: 2.0rem;
}

.block-link.nav-link.signout .graphic {
  mask-image: url("../_assets/_graphics/icons/A_ic-signout.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-signout.svg");
}

.block-link.nav-link.change-pwd .graphic {
  mask-image: url("../_assets/_graphics/icons/A_ic-change-password.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-change-password.svg");
}

.block-link.nav-link.account .graphic {
  mask-image: url("../_assets/_graphics/icons/A_ic-dashboard-2.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-dashboard-2.svg");
}

.block-link.nav-link .text {
  color: black;
  white-space: nowrap;
  font-weight: bold;
}

/* LOGIN */

.form-wrapper {
  width: fit-content;
  margin: 2.5rem auto;
}

form.main-form {
  width: 22.5rem;
  margin: 1.25rem auto;
}

h1.main-head {
  margin: 1.25rem 0;
  text-transform: uppercase;
  font-weight: bold;
}

/* POPUPS */

#bkgr_screen,
#popup_box {
  z-index: 1;
}

#bkgr_screen {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #e3e3e3c7;
  cursor: pointer;
}

#popup_box {
  position: absolute;
  top: 2.5rem;
  right: 1rem;
  width: fit-content;
}

#popup_box > div {
  background: white;
  /* padding: 1.75rem 0; */
  border-radius: 0.5rem 0rem 0.5rem 0.5rem;
  box-shadow: 0 0 0.5rem 0 lightgray;
  z-index: 1;
}

.content.menu ul {
  padding: 1.75rem 0;
}

/* PROFILE */

.widget .label {
  font-weight: bold;
  margin: 1rem 0;
}

.widget .value {
  background: whitesmoke;
  padding: 0rem 1rem;
  height: 4rem;
}

.value .data {
  font-weight: bold;
}

.widget .value.copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.value.copy .copy-btn {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 5rem;
  display: flex;
  align-items: center;
  background: #FFF;
  justify-content: center;
}

.value.copy .copy-btn .graphic {
  background: gray;
  height: 75.5%;
  width: 75.5%;
  mask-image: url("../_assets/_graphics/icons/A_ic-clipboard.svg");
  mask-size: 75% auto;
  mask-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-clipboard.svg");
  -webkit-mask-size: 75% auto;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
}

.value.copy .copy-btn.copied .graphic {
  background: rgb(92, 117, 0);
  mask-image: url("../_assets/_graphics/icons/A_ic-success.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-success.svg");
}

.note.placeholder {
  font-weight: bold;
  text-align: center;
  padding: 2.5rem 0;
  border: 0.1rem solid lightgray;
}

/* TABLES */

div.table-wrapper {
  max-width: 100%;
  overflow: auto;
}

div.table-wrapper table {
  min-width: 100%;
  border-spacing: 0rem;
}

th, td {
  padding: 0.75rem 0.75rem;
  text-align: left;
  white-space: nowrap;
}

thead th {
  /* background: whitesmoke; */
  border-top: 0.1rem solid black;
  border-bottom: 0.2rem solid black;
  font-weight: bold;
}

tfoot td {  
  border-top: 0.1rem solid lightgray;
}

/* table.data tbody * {
  font-family: "Ubuntu Mono", Consolas;
} */

/* AGENT PROFILES */

.ap-wrapper .profile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 0.1rem solid lightgray;
}

.ap-wrapper .profile:first-child {
  border-top: 0.1rem solid lightgray;
}

.ap-wrapper .names {
  /* text-transform: uppercase; */
  font-weight: 900;
  margin-bottom: 0.25rem;
}

.links-wrapper {
  padding: 1rem;
}

/* CHECKBOXES */

input[type="checkbox"].checkbox-improved {
  width: 0rem;
  height: 0rem;
  opacity: 0;
  position: absolute;
  /* display: none; */
}

.checkbox-field, 
.radio-field {
  display: flex;
  /* align-items: center; */
  margin: 1.75rem 0rem 1rem;
  width: fit-content;
  max-width: 29rem;
}

.checkbox-field.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: unset;
}

.checkbox-field.consent .check-label {
  white-space: normal;
}

.checkbox-field.consent .check-btn {
  padding-top: 0rem;
}

div.check-btn, div.radio-btn {
  display: flex;
  height: 1.5rem;
  align-items: center;
}

div.check-btn label {
  position: relative;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  border: 0.2rem solid gray;
  transform: scale(0.85);
}

label span.box {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  display: inline-block;
  height: .7rem;
  width: .7rem;
  /* border-radius: 0.2rem; */
  transition: background-color 0.2s ease-in-out;
}

.tick label span.box {
  top: 0rem;
  left: 0.1rem;
  display: inline-block;
  height: 1rem;
  width: 1rem;
  /* border-radius: 0.2rem; */
  transition: background-color 0.2s ease-in-out;
}

input[type="checkbox"].checkbox-improved:checked + label {
  border-color: var(--link-color);
}

input[type="checkbox"].checkbox-improved:checked + label span.box {
  background-color: var(--link-color);
  border: none;
  /* background-image: url("../_assets/_graphics/icons/A_ic-settings.svg");
  background-repeat: no-repeat;
  background-size: auto 0.9rem;
  background-position: center center; */
}

.dark input[type="checkbox"].checkbox-improved:checked + label {
  border-color: var(--gray);
}

.dark input[type="checkbox"].checkbox-improved:checked + label span.box {
  background-color: var(--gray);
  border: none;
  /* background-image: url("../_assets/_graphics/icons/A_ic-settings.svg");
  background-repeat: no-repeat;
  background-size: auto 0.9rem;
  background-position: center center; */
}

.tick input[type="checkbox"].checkbox-improved:checked + label span.box {
  mask-image: url("../_assets/_graphics/icons/A_ic-okay.svg");
  mask-repeat: no-repeat;
  mask-size: 1.35rem auto;
  mask-position: center center;
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-okay.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 1.35rem auto;
  -webkit-mask-position: center center;
}

.inactive input[type="checkbox"].checkbox-improved:checked + label {
  border-color: var(--light-gray);
}

.inactive input[type="checkbox"].checkbox-improved:checked + label span.box {
  background-color: var(--light-gray);
}

.inactive label {
  color: var(--gray);
}

.checkbox-options-container, 
.radio-options-container {
  padding: 0rem 1.25rem;
}

.horizontal .checkbox-options-container, 
.horizontal .radio-options-container {
  padding: 0 0.75rem;
  display: flex;
  /* justify-content: space-between; */
  column-gap: 1.5rem;
}

.check-label, .radio-label {
  padding: 0rem .75rem;
  position: relative;
  /* white-space: nowrap; */
  top: -0.2rem;
}

/* RADIO BUTTONS */


input[type="radio"].radio-improved {
  width: 0;
  height: 0;
  opacity: 0;
  display: none;
}

/* div.radio-btn {
  display: inline-block;
  margin: 0 0.5rem;
} */

div.radio-btn label {
  position: relative;
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
}

label span.radio-box {
  position: absolute;
  top: 0rem;
  left: 0rem;
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  border: 0.2rem solid gray;
  transition: background-color 0.2s ease-in-out;
}

label span.radio-content {
  position: absolute;
  top: .4rem;
  left: .4rem;
  display: inline-block;
  height: .8rem;
  width: .8rem;
  border-radius: 50%;
  background-color: unset;
  transition: background-color 0.2s ease-in-out;
}

input[type="radio"].radio-improved:checked + label span.radio-box {
  border: 0.2rem solid var(--link-color);
}

input[type="radio"].radio-improved:checked + label span.radio-content {
  background-color: var(--link-color);
}

/* PAYMENT UI */

div#user_auth {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 0.25rem;
  align-items: center;
}

div#user_auth .graphic {
  width: 1.75rem;
  height: 1.75rem;
  background-position: center center;
  background-repeat: no-repeat;
}

div#user_auth.academi .graphic {
  background-image: url("../_assets/_graphics/logos/A_academi.svg");
}

div#user_auth.kellogg .graphic {
  background-image: url("../_assets/_graphics/logos/A_kellogg.svg");
}

div#user_auth .alias {
  color: gray;
  font-size: smaller;
}

#mm_g_wrapper > div {
  padding: 0.25rem 1.4rem;
  margin: 0;
}

#mm_g_wrapper .block-link {
  gap: 0.5rem;
}

#mm_g_wrapper .block-link .graphic {
  mask-image: url("../_assets/_graphics/icons/A_ic-tailed-back-arrow-left.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-tailed-back-arrow-left.svg");
}

#mm_g_wrapper .block-link > a.link {
  font-weight: var(--bold);
}

.mm-g .radio-field {
  align-items: center;
  gap: 1rem;
}

.mm-g .radio-field img {
  display: block;
}

/* #number.UG-tel-field {
  background-image: url("../_assets/_graphics/icons/A_ic-256.svg");
  background-repeat: no-repeat;
  background-position: left 1.5rem center;
  background-size: 3.25rem auto;
  padding-left: 5.25rem;
} */

/* PROGRESS UI */

div#progress_wrapper {
  /* display: none; */
  background: white;
  padding: 5rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

div#progress_wrapper > * {
  text-align: center;
}

div#progress_wrapper .status > * {
  display: block;
  margin: 2.5rem 0;
}

div#progress_wrapper .status.count-down .graphic {
  margin: 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  background-image: url("../_assets/_graphics/images/A_loading-dots.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

div#progress_wrapper .status.count-down.loading .graphic {  
  animation: rotate-step 1s steps(8, end) infinite;
}

div#progress_wrapper .status.count-down .timer {
  font-size: larger;
  color: #a31465;
  font-weight: bold;
}

div#progress_wrapper .status.failed .graphic {
  width: 6.5rem;
  height: 6.5rem;
  background: lightgray;
  margin: 2.5rem auto;
  mask-image: url("../_assets/_graphics/images/A_failure.svg");
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  mask-position: center center;
  -webkit-mask-image: url("../_assets/_graphics/images/A_failure.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center center;
}

div#progress_wrapper .status.failed .note {
  /* font-size: larger; */
  font-weight: bold;
  color: #a31465;
}

div#progress_wrapper .status.success .graphic {
  width: 6.5rem;
  height: 6.5rem;
  background: lightgray;
  margin: 2.5rem auto;
  mask-image: url("../_assets/_graphics/images/A_success.svg");
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  mask-position: center center;
  -webkit-mask-image: url("../_assets/_graphics/images/A_success.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center center;
}

div#progress_wrapper .status.success .note {
  /* font-size: larger; */
  font-weight: bold;
  color: #59a314;
}

.wrapper {
  border-top: 0.1rem solid lightgray;
  padding: 1rem 0rem;
  margin: 0 1.75rem 2rem;
}

/* STATS */

.app-stats .head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.app-id {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.app-id img {
  display: block;
}

.app-id .name {
  text-transform: uppercase;
  color: gray;
  font-size: smaller;
  font-weight: 300;
}

.stats-container {
  padding: 0 2.5rem;
}

.stat {
  margin: 2rem 0;
  text-align: center;
}

.stat .label {
  color: #1b1b1b;
  padding: 1.5rem 0 1.75rem;
  font-weight: 600;
}

.stat .value {
  padding: 2.5rem 0;
  border: 0.2rem dashed rgb(211 219 96);
  font-size: x-large;
  font-family: var(--monospace-font);
  font-weight: 900;
  color: rgb(145 145 145);
}

/* USER PROFILE */

.stat-section {
  margin: 1.5rem 0;
}

.alias-display {
  margin: 0.75rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.alias-display.kellogg .graphic {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../_assets/_graphics/logos/A_kellogg.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.alias-display .text {
  color: gray;
  font-size: 1.1rem;
}

.profile-pic {
  margin: 2rem auto;
  width: fit-content;
  /* padding: 1rem 0; */
}

.profile-pic .img {
  width: fit-content;
  margin: 1rem auto;
  /* box-shadow: 0 0 0rem 0 #b5b5b5; */
  border-radius: 50%;
  overflow: hidden;
}

.profile-pic .img img {
  display: block;
  /* margin: 2rem 0 1rem; */
  /* height: auto; */
  /* width: auto; */
}

.profile-pic .info {
  text-align: center;
  margin: 1rem auto;
  width: fit-content;
}

.profile-pic .info .names {
  text-transform: uppercase;
  font-weight: 900;
}

.profile-pic .info .other {
  color: gray;
}

.user-info .item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

.user-info .item .graphic {
  margin-left: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  background: black;
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center center;
}

.user-info .telephone .graphic {  
  mask-image: url("../_assets/_graphics/icons/A_ic-phone-ring.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-phone-ring.svg");
}

.user-info .email .graphic {  
  mask-image: url("../_assets/_graphics/icons/A_ic-at.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-at.svg");
}

.user-info .date-time .graphic {  
  mask-image: url("../_assets/_graphics/icons/A_ic-calendar.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-calendar.svg");
}

.user-info .item .label {
  font-weight: 600;
  padding: 0.25rem 0;
}

.stat-section.user-links {
  padding-left: 3rem;
}

.user-wallet {
  position: relative;
}

.user-wallet .entry {
  margin: 1rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
}

.user-wallet .entry * {
  color: gray;
}

.user-wallet .entry .label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  margin-left: 1rem;
}

.user-wallet .entry .label .pad {
  height: 0.5rem;
  /* border-bottom: 0.1rem solid lightgray; */
}

.user-wallet .entry .value {
  font-weight: 900;
  text-align: right;
}

.user-wallet .entry.cdt .value {
  color: #ff488e;
}

.user-wallet .entry.ugx .value {
  color: #00d3d5;
}

.block-link.floating-link {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
}

.block-link.add .graphic {
  mask-image: url("../_assets/_graphics/icons/A_ic-add.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-add.svg");
}

.retractable {
  margin: 1.5rem 0;
}

.retractable .head {
  /* border-top: 0.1rem solid lightgray; */
  border-bottom: 0.1rem solid lightgray;
  padding: 1rem;
  padding-left: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  cursor: pointer;
  /* box-shadow: 0 0 5px 0px #c7c7c7; */
}

.retractable .head .graphic {
  width: 1.75rem;
  height: 1.75rem;
  background: black;
  mask-image: url("../_assets/_graphics/icons/A_ic-arrow-down.svg");
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  mask-position: center center;
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-arrow-down.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center center;
}

.retractable.expanded .head .graphic {
  background: gray;
  mask-image: url("../_assets/_graphics/icons/A_ic-arrow-up.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-arrow-up.svg");
}

.retractable .content {
  display: none;
  padding: 1rem;
  margin: 0.5rem 0.25rem 0;
  background: #fbfbfb;
}

.retractable.expanded .content {
  display: block;
}

.retractable .content .item {
  margin: 0 0 1rem;
}

.retractable .content .item > div {
  padding: 0.5rem 0;
}

.retractable .content .item .meta,
#users_container .card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.retractable .content .item .meta .alias,
#users_container .card .meta .alias {
  color: var(--gray);
}

/* USERS */

div#users_container {
  padding: 0rem;
  /* background: #f7f7f7; */
}

div#users_container .card {
  background: white;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem 1rem 1rem;
  margin: 1.75rem 0;
  /* background: #eff1e5; */
  /* border: 0.1rem solid #d5d5d5; */
  /* border-radius: 0.5rem; */
  box-shadow: 0 0 0.25rem 0 lightgray;
  border: 0.2rem solid transparent;
}

div#users_container .card:hover {
  box-shadow: unset;
  border-color: #edec9f;
  border-radius: 0.75rem;
}

div#users_container .card img {
  display: block;
}

div#users_container .card .names {
  font-weight: 600;
}

div#users_container .card .info > * {
  margin: 0.5rem 0;
}

#users_container .card .meta * {
  font-size: smaller;
}

/* SEARCH */

div#search_field {
  margin: 1.5rem 0;
}

.no-results {
  display: flex;
  height: 10rem;
  align-items: center;
  justify-content: center;
  background: aliceblue;
  font-size: large;
}

/* POPUPs */

.popup-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffffad;
  z-index: 1;
}

.popup-box {
  background: white;
  padding: 1.5rem;
  box-shadow: 0 1px 4px 0px rgb(196, 196, 196);
}

#deposit_success .popup-box {
  width: 100vw;
  max-width: 33rem;
  margin: 2.5rem auto;
  border-radius: 0.5rem;
}

#deposit_success .popup-box * {
  text-align: center;
}

#deposit_success .content {
  margin: 2.5rem;
}

#deposit_success .content p {
  margin: 1.75rem 1rem;
  color: gray;
}

.btn-container {
  padding: 1.75rem;
}

#deposit_success .popup-box button {
  margin: 0 auto;
  cursor: pointer;
}

.success.graphic.large {
  margin: 2rem auto;
  width: 5rem;
  height: 5rem;
  background: rgb(121, 165, 0);
  mask-image: url("../_assets/_graphics/icons/A_ic-success.svg");
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  mask-position: center center;
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-success.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center center;
}

/* TRANSACTIONS */

.tnx-wrapper {
  padding: 1rem 0;
}

.deposit-card {
  padding: 0.75rem 1.25rem;
  border: 0.1rem solid lightgray;
  margin: 1rem auto;
}

.deposit-card .level {
  display: flex;
  justify-content: space-between;
  margin: 0.65rem 0;
  align-items: center;
}

.deposit-card .level:last-child {
  margin-top: 0.75rem;
}

.deposit-card.pending .amount {
  color: #b30044;
}

.deposit-card.approved .amount {
  color: #000000;
}

.deposit-card .meta {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.deposit-card .meta .options {
  position: relative;
}

.deposit-card .meta .options .list {
  display: none;
  position: absolute;
  top: -1rem;
  left: 1rem;
}

.deposit-card .datetime,
.deposit-card .meta .status .text,
.deposit-card .button {
  font-size: smaller;
  text-transform: capitalize;
}

.deposit-card .meta .status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.deposit-card .meta .options .graphic,
.deposit-card .meta .status .graphic {
  width: 1.75rem;
  height: 1.75rem;
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center center;
}

.deposit-card .meta .options .graphic {
  background-color: #a1a1a1;
  mask-image: url("../_assets/_graphics/icons/A_ic-menu-hidden.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-menu-hidden.svg");
}

.deposit-card.pending .status .graphic {  
  background: rgb(168, 0, 50);
  mask-image: url("../_assets/_graphics/icons/A_ic-history.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-history.svg");
}

.deposit-card.approved .status .graphic {  
  height: 1.5rem;
  width: 1.5rem;
  background: rgb(151 148 0);
  mask-image: url("../_assets/_graphics/icons/A_ic-success.svg");
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-success.svg");
}

.deposit-card .button {
  padding: 0.7rem 1.75rem;
  min-width: 10rem;
  border-radius: 3rem;
  border: 0.1rem solid transparent;
}

.deposit-card .button.approve {  
  color: black;
  background-color: #e7e300;
}

.deposit-card .button.reverse {  
  color: black;
  background-color: #e78b0000;
  border-color: #df005d;
}

.deposit-card.pending .button.reverse {
  display: none;
}

.deposit-card.approved .button.approve {
  display: none;
}

/* SAMPLES */

.worksheet-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 5%;
}

.worksheet-card {
  width: 47.5%;
  padding: 5%;
  border: 0.1rem solid lightgray;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.worksheet-card .graphic {
  height: 5rem;
  width: 5rem;
  background: rgb(116, 0, 44);
  mask-image: url("../_assets/_graphics/icons/A_ic-file-pdf-2.svg");
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  mask-position: center center;
  -webkit-mask-image: url("../_assets/_graphics/icons/A_ic-file-pdf-2.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  -webkit-mask-position: center center;
}

/* ANIMATIONS */

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






















@media screen and (min-width: 600px) {
  html {
    background: #eeeeee;
  }
  body {
    background: #FFF;
    min-width: 30rem;
    width: 33rem;
    max-width: 35rem;
    margin: 1.25rem auto;
  }
}