/* generated 2025-07-02T14:55:55+09:00 */


/**********
 * file: 0-version.css
 *
 */

/**
 * Acsiryo 2025 public pages
 *
 */



/**********
 * file: 1-fonts.css
 *
 */

/* fonts.googleapis.com/css?family=Lato:300,400,700,900 */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);



/**********
 * file: 2-reset.css
 *
 */

body, div, span,
h1, h2, h3, h4, h5, h6, p,
a,
em, img,
small, strike, strong, sub, sup,
b, u, i,
ol, ul, li,
form, label, legend,
table, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    font-size: 1rem;
    font-family: Lato, sans-serif;
    vertical-align: baseline;
    background-color: transparent;
    background-repeat: no-repeat;
}

body, div, p, a, h1, h2, h3, h4, h5 {
    font-weight: 300;
}

input, textarea, keygen, select, button {
  font-family: Lato, sans-serif;
  font-weight: 300;
  }

a,b,u,i { font-size: inherit; }

body { line-height: 1; }
u { text-decoration: none; }
ol, ul { list-style: none; }
img { vertical-align: bottom; background-color: transparent; }
a img { border: none; }
h6 { clear: both; }
/* remember to define focus styles! */
:focus { outline: 0; }




/**********
 * file: accessibility.css
 *
 */

html.fontsize-lg {
	font-size: 18pt; /* base for 1rem; */
	}

body.contrast-hi {
	background-color: white;
	/* text is already default black */
}




/**********
 * file: accordion.css
 *
 */

div.accordion > div {
  padding: 0 0 40px;
}




/**********
 * file: buttons.css
 *
 */

button, .button {
  appearance      : none;
  background-color: black;
  border          : none;
 -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
         border-radius: 24px;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  color           : white;
  cursor          : pointer;
  display         : block;
  font-size       : 12pt;
  font-weight     : bold;
  line-height     : 1.2;
  padding         : 10px;
  text-align      : center;
  text-decoration : none;
  width           : 100%;
-webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
	}

.small-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	}

.small-buttons label {
	flex: 1 1 auto;
	width: auto !important;
	}

.very-small-buttons button, button.very-small-button {
-webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
         border-radius: 0.5em;
	font-size: 10pt;
	padding: 2px 5px;
	display: inline;
	width: fit-content;
}

button:active, button.clicked {
	/* Taisuke wanted it this way... */
	background-color:#b1b1b1;

}

button:disabled {
	pointer-events: none;
	background-color:#b1b1b1;
}

button.attention, .button.attention {
background-color: red;
}

.contrast-hi button, .contrast-hi .button {
-webkit-box-shadow: none;
    -moz-box-shadow: none;
        box-shadow: none;
	}



/**********
 * file: debug.css
 *
 */

div.debug-info { display: none; }



/**********
 * file: dev-notes.css
 *
 */

.internal-note {
	padding: 1em;
	background-color: magenta;
}



/**********
 * file: empty.css
 *
 */




/**********
 * file: footer.css
 *
 */

footer {
  border-top: 1px solid #aaa;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  height    : 90px;
  margin    : 0 auto;
  padding   : 20px 0 0;
  width     : 100%;
  }

footer .list-o-links {
  margin-bottom: 1em;
  }

footer .list-o-links ul {
  display        : flex;
  justify-content: space-between;
  margin         : 0 auto;
  max-width      : 450px;
  width          : 90%;
  }

footer .list-o-links li {
  display: block;
  flex   : 0 1 auto;
  width  : fit-content;
  }

footer .list-o-links a {
  color: black;
  text-decoration: none;
  }

.sub-footer {
  background-color: black;
  color           : white;
  font-size       : 10pt;
  padding         : 1em 0;
  text-align      : right;
  width: 100%;
	}

.sub-footer ul{
  margin   : 0 auto;
  max-width: 450px;
  width    : 90%;
  }



/**********
 * file: form-elements.css
 *
 */

select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"] {
  appearance        : none;
  -webkit-appearance: none;
  border            : none;
  border-bottom     : 1px solid black;
  background-color  : transparent;
  font-size         : 14pt;
  display           : block;
  width             : 100%;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  }

select {
  border: 1px solid black;
  padding: 3px 8px;
 -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
         border-radius: 5px;
  -webkit-appearance: menulist;
	}

input[type="submit"],
input[type="checkbox"],
input[type="radio"] { display: none }

input[type="checkbox"] + label,
input[type="radio"] + label {
 -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  -webkit-appearance: none;
  appearance        : none;
  background-color  : #ffffff;
  border            : none;
 -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
         border-radius: 5px;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  cursor : pointer;
  color             : #000000;
  display           : block;
  font-size         : 14pt;
  font-weight       : bold;
  line-height       : 1.2;
	margin-bottom     : 1em;
  padding           : 13px 21px;
  text-align        : center;
  text-decoration   : none;
  width             : 100%;
	}

input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
 -webkit-box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #d3d3d3;
  }

input[type="checkbox"].box + label {
-webkit-border-radius: 0px;
    -moz-border-radius: 0px;
         border-radius: 0px;
-webkit-box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16);
	background-color: #f0f0f0;
	border          : none;
	display         : inline-block;
	height          : 1em;
	margin-bottom   : 0;
	padding         : 0;
	position        : relative;
	width           : 1em;
	}

input[type="checkbox"].box:checked + label::after {
  background-color: black;
  content         : "";
  display         : block;
  height          : 0.6em;
  left            : 50%;
  position        : absolute;
  top             : 50%;
  transform       : translate(-50%, -50%);
  width           : 0.6em;
	}


input[type="number"] { text-align: center; }

.short-input  input[type="text"] ,
.short-input  input[type="number"],
.short-inputs input[type="text"] ,
.short-inputs input[type="number"]
{ width: 4em; display: inline-block; }

.short-input  input.short-3, .short-inputs input.short-3 { width: 3em; }
.short-input  input.short-2, .short-inputs input.short-2 { width: 2em; }

textarea {
  font-size : 1rem;
  min-height: 5em;
  padding   : 0.5em;
  width     : 100%;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
	}


.contrast-hi label {
	border: 2px solid black !important;
-webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
        box-shadow: none !important;
}

.contrast-hi input[type="checkbox"]:checked + label,
.contrast-hi input[type="radio"]:checked + label {
	background-color: black;
	color: white;

}



/**********
 * file: header.css
 *
 */

header {
  background-color: black;
  border-bottom   : 1px solid #aaa;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  color           : white;
  height          : 50px;
  padding         : 0 5%;
  position        : relative;
  z-index         : 201;
	}

header > ul {
  align-items: center;
  display    : flex;
  height     : 100%;
  margin     : 0 auto;
  max-width  : 450px;
	}

/* centering is done by adding li.spacer in the html */

header > ul li {}
header > ul li.spacer {
  flex: 1 1 auto;
	}

header ul li.logo {}
header ul li.logo a { display: inline-block; }
header ul li.logo img {
  height: 30px;
  display: inline-block;
}

header.small-header {
  height    : 50px;
  position  : fixed;
  top       : 0;
  width     : 100%;
  z-index   : 200;
  }

header.small-header .title {
  flex       : 1 1 auto;
  font-size  : 20px;
  font-weight: bold;
  text-align : center;
	}

header.small-header .icon a { display: inline-block; }

header.small-header .icon img {
  height: 31px;
  display: inline-block;
	}

header.small-header .title { text-align: center; }

body header:first-of-type {
	/* taisuke doesn't like it. He will be baaaack.... */
	display: none;
}



/**********
 * file: lists.css
 *
 */



/* dl only used inside forms &&|| lists */
dl {}
dt {
  font-weight   : bold;
  max-width     : 20em;
  }

dd {
  margin    : 0 0 2em 4em;
  max-width : 5em;
  text-align: center;
  }

dd input {
	text-align: center;
	}



/**********
 * file: main-content.css
 *
 */

body {
	min-height: 100vh;
	}

section {
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  line-height: 1.2;
  margin     : 0 auto;
  max-width  : 450px;
  min-height : calc( 100vh - 96px );
  padding-top: 80px;
  width      : 90%;
  }

section ul {
	margin-bottom: 1em;
	list-style-type: none;
	}

ul.markers {
	padding-left: 1em;
	list-style-type: disc;
	}

h1,h2,h3,h4 {
  margin-bottom: 1em;
  font-weight: bold;
	}

p {
  margin-bottom: 1em;
  font-weight: normal;
  text-align: left;
	}

.two-across {
  align-items    : baseline;
  display        : flex;
  gap            : 20px;
  margin-bottom  : 1em;
  justify-content: space-between;
  }

.two-across > p {
  flex: 0 1 50%;
  margin-bottom: 0;
	}

.two-across > p:nth-child(1) {}
.two-across > p:nth-child(2) {}

.one-across { margin-bottom: 1.5em; }

.one-across > p:nth-child(1)  { margin-bottom: 0.5em; }
.one-across > p:nth-child(2) input { height: 1.5em; }




/**********
 * file: menu.css
 *
 */

.burger {
  height  : 40px;
  position: relative;
  width   : 40px;
	}

.burger span {
  background-color: white;
  display         : block;
  height          : 2px;
  left            : 6px;
  position        : absolute;
  transition      : transform 0.3s ease, opacity 0.3s ease;
  width           : 28px;
  }

.burger span:nth-child(1) {
  transform-origin: top left;
  top: 12px;
  }

.burger span:nth-child(2) {top: 20px;}

.burger span:nth-child(3) {
  top: 28px;
  transform-origin: bottom left;
  }

.menu-open  .burger span { width: 24px; }

.menu-open  .burger span:nth-child(1) { transform: rotate(45deg); }
.menu-open  .burger span:nth-child(2) { opacity: 0; }
.menu-open  .burger span:nth-child(3) { transform: rotate(-45deg); }

.menu {
  padding-top     : calc( 50px + 30px );
  background-color: #f8f8f8;
 -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  left            : 50%;
  max-width       : 450px;
  padding-bottom  : 20px;
  padding-left    : 30px;
  padding-right   : 30px;
  position        : fixed;
  transform       : translate(-50%, -100%);
  transition      : transform 0.6s ease-in-out;
  width           : 100%;
  z-index         : 100;
  }

.menu-open .menu {
  transform       : translate(-50%, 0 );
}

.menu li {
  align-items: center;
  display    : flex;
  margin     : 0 0 1em;
	}

.menu li,
.menu li a {
  color      : #333;
  font-size  : 12pt;
  font-weight: normal;
  text-decoration: none;
	}

.menu li a:hover {
  text-decoration: underline;
	}

.menu .spacer { flex: 1 1 auto; }

.menu input[type="radio"] + label {
  font-size  : 10pt;
  font-weight: normal;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  margin     : 0 0 0 14px;
  padding    : 5px 2px;
  width      : 54px; /* so it still lines up with the accessibility button */
  }

.menu label.font-select-lg {
  font-size  : 16pt !important;
  line-height: 12pt !important;
  padding    : 5px 0 !important;
  }


#screen-cover {
  display : none;
  height  : 100vh;
  left    : 0;
  opacity : 0.5;
  position: fixed;
  top     : 0;
  width   : 100vw;
  z-index : 99;
  }

.menu-open #screen-cover {
	display: block;
	}



/**********
 * file: patient-info.css
 *
 */

.profile-pic {
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  background-position: center;
  background-size    : cover;
 -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
         border-radius: 50%;
  border             : 1px solid #333;
  }

h4.profile-pic {
	width : 100px;
	height: 100px;
	float : right;
	}

.upload-display.health_insurance_card {
	background-image: url(/assets/healthcare-sample.jpg);
}



/**********
 * file: qr-code.css
 *
 */

.qr {
	float: right;
	}



/**********
 * file: svg-graphics.css
 *
 */

path {
	stroke: black;
	}



/**********
 * file: table.css
 *
 */

/* generic table with borders and zebra */

table {
  border-collapse: separate;
  border-spacing : 0px;
 -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  margin-bottom  : 1em;
  }

table th {
  background-color: #d3d3d3;
  text-align      : left;
  }

/* can't do border-radius on <table> */
table thead th:first-child {-webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
         border-radius: 4px 0 0 0; }
table thead th:last-child {-webkit-border-radius: 0 4px 0 0;
    -moz-border-radius: 0 4px 0 0;
         border-radius: 0 4px 0 0; }
table tbody tr:last-child td:first-child {-webkit-border-radius: 0 0 0 4px;
    -moz-border-radius: 0 0 0 4px;
         border-radius: 0 0 0 4px; }
table tbody tr:last-child td:last-child  {-webkit-border-radius: 0 0 4px 0;
    -moz-border-radius: 0 0 4px 0;
         border-radius: 0 0 4px 0; }


table td,
table th {
  min-width: 3em;
  padding: 6px 1em 6px 2em;

  }

table td {
  padding: 3px 5px;
  }

table td i {
  display    : inline-block;
  font-style : normal;
  min-width  : 3em;
	}

/* zebra */
table tbody tr:nth-child(odd)  td { background-color: #f7f7f7; }
table tbody tr:nth-child(even) td { background-color: white; }

/* faux tbody padding */
table thead th:first-child {}
table thead th:last-child {}
table tbody td:first-child   { border-left  : 4px solid white; padding-left: 2em; }
table tbody td:last-child    { border-right : 4px solid white; }
table tbody tr:last-child td { border-bottom: 4px solid white; }


/* monospace font and alignment */
table.numbers td, table.numbers th {}

table.numbers td {
  padding: 3px 2em 5px 2em;
  }

table.numbers td i {
  font-family: Courier, "Courier New", monospace;
  }

table.numbers td:nth-child(2) i { text-align: right; }
table.numbers td:nth-child(3) i { text-align: left; }

table.numbers td:first-child, table.numbers th:first-child {
  text-align: left;
  }

table.numbers .composite-values td:nth-child(2) {
  padding-bottom: 0;
  padding-top   : 0;
  }

table.numbers .composite-values td:nth-child(2) i {
  padding: 5px 4px;
  }


.contrast-hi table {-webkit-box-shadow: none;
    -moz-box-shadow: none;
        box-shadow: none; }

.contrast-hi table tbody tr:nth-child(odd) td { background-color: #000000; color: white; font-weight: bold; }

.contrast-hi table tbody tr td:last-child  { border-right-color: black; }
.contrast-hi table tbody tr td:first-child { border-left-color: black; }

.contrast-hi table tbody tr:last-child td { border-bottom-color: black; }




/**********
 * file: themes.css
 *
 */

body {
  background: #f8f8f8;
	}

body.theme-white {
  background: white;
}

/* used on iframe wrappers */
.frame-tight header,
.frame-tight h2,
.frame-tight footer
{ display: none; }




/**********
 * file: typography.css
 *
 */


h1 { font-size: 3.5rem; margin-bottom: 0.6em; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.2rem; margin-bottom: 0.6em; }

h1, h2, h3 { text-align: center; }

h3 {}
h4 {}

h4::before {
  }

p.notice { color: blue; font-weight: bold; }
p.fail { color: red; }

a {
  color          : black;
  text-decoration: underline;
  font-weight    : bold;
  }






/**********
 * file: upload.css
 *
 */

div.upload { /* where we drop files */
  aspect-ratio       : 1.2;
  background-position: center 20px;
  background-repeat  : no-repeat;
  background-size    : 40px;
 -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
         border-radius: 7px;
  border             : none;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  font-size          : 10pt;
  height             : 140px;
  margin             : 0 auto 20px;
  max-width          : 240px;
  padding            : 80px 10px 20px;
  position           : relative;
  text-align         : center;
  visibility         : hidden;
	outline-offset  : -4px;
	outline-color: transparent;
  outline-style: solid;
  outline-width: 4px;
  }

/* funkiness for the desired inset-shadow border */
/* the upload box doesn't have a border, it's attached to this part */
div.upload::before {
 -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
         border-radius: 7px;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  content         : "";
  height          : 100%;
  left            : 0;
  overflow        : hidden;
  position        : absolute;
  top             : 0;
  width           : 100%;
  z-index         : -1;
  }


div.upload.square-aspect {
  aspect-ratio: 1;
  width       : 140px;
  }

div.upload.card-aspect {
	aspect-ratio: 1.58;
  width       : auto;
}


/* upload-image stroke often needs adjustment for the background */
div.upload {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMxIiBoZWlnaHQ9IjMxIiB2aWV3Qm94PSIwIDAgMzEgMzEiIGZpbGw9Im5vbmUiPiAgPGcgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQuNjgwOTkgMS41ODk4NEgyNi4zMTlDMjguMDI2MiAxLjU4OTg0IDI5LjQxMDEgMi45NzM4IDI5LjQxMDEgNC42ODA5OVYyNi4zMTlDMjkuNDEwMSAyOC4wMjYyIDI4LjAyNjIgMjkuNDEwMSAyNi4zMTkgMjkuNDEwMUg0LjY4MDk5QzIuOTczOCAyOS40MTAxIDEuNTg5ODQgMjguMDI2MiAxLjU4OTg0IDI2LjMxOVY0LjY4MDk5QzEuNTg5ODQgMi45NzM4IDIuOTczOCAxLjU4OTg0IDQuNjgwOTkgMS41ODk4NFoiIC8+PHBhdGggZD0iTTEyLjQwOTIgMTAuMDkwOEMxMi40MDkyIDExLjM3MTIgMTEuMzcxMiAxMi40MDkyIDEwLjA5MDggMTIuNDA5MkM4LjgxMDQzIDEyLjQwOTIgNy43NzI0NiAxMS4zNzEyIDcuNzcyNDYgMTAuMDkwOEM3Ljc3MjQ2IDguODEwNDMgOC44MTA0MyA3Ljc3MjQ2IDEwLjA5MDggNy43NzI0NkMxMS4zNzEyIDcuNzcyNDYgMTIuNDA5MiA4LjgxMDQzIDEyLjQwOTIgMTAuMDkwOFoiIC8+PHBhdGggZD0iTTI5LjQwOTggMjAuMTM3TDIxLjY4MiAxMi40MDkyTDQuNjgwNjYgMjkuNDEwNSIgLz48L2c+PC9zdmc+");
	}

div.upload.drop-target {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMxIiBoZWlnaHQ9IjMxIiB2aWV3Qm94PSIwIDAgMzEgMzEiIGZpbGw9Im5vbmUiPiAgPGcgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3R5bGU9Im9wYWNpdHk6IDAuMiI+PHBhdGggZD0iTTQuNjgwOTkgMS41ODk4NEgyNi4zMTlDMjguMDI2MiAxLjU4OTg0IDI5LjQxMDEgMi45NzM4IDI5LjQxMDEgNC42ODA5OVYyNi4zMTlDMjkuNDEwMSAyOC4wMjYyIDI4LjAyNjIgMjkuNDEwMSAyNi4zMTkgMjkuNDEwMUg0LjY4MDk5QzIuOTczOCAyOS40MTAxIDEuNTg5ODQgMjguMDI2MiAxLjU4OTg0IDI2LjMxOVY0LjY4MDk5QzEuNTg5ODQgMi45NzM4IDIuOTczOCAxLjU4OTg0IDQuNjgwOTkgMS41ODk4NFoiIC8+PHBhdGggZD0iTTEyLjQwOTIgMTAuMDkwOEMxMi40MDkyIDExLjM3MTIgMTEuMzcxMiAxMi40MDkyIDEwLjA5MDggMTIuNDA5MkM4LjgxMDQzIDEyLjQwOTIgNy43NzI0NiAxMS4zNzEyIDcuNzcyNDYgMTAuMDkwOEM3Ljc3MjQ2IDguODEwNDMgOC44MTA0MyA3Ljc3MjQ2IDEwLjA5MDggNy43NzI0NkMxMS4zNzEyIDcuNzcyNDYgMTIuNDA5MiA4LjgxMDQzIDEyLjQwOTIgMTAuMDkwOFoiIC8+PHBhdGggZD0iTTI5LjQwOTggMjAuMTM3TDIxLjY4MiAxMi40MDkyTDQuNjgwNjYgMjkuNDEwNSIgLz48L2c+PC9zdmc+");
	}


div.upload.upload-not-allowed {
  background-image   : url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld2JveD0iMCAwIDEwMCAxMDAiIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiIHN0cm9rZT0ibm9uZSIgZmlsbD0icmVkIj48L2NpcmNsZT48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzNSI+PC9jaXJjbGU+PHBhdGggZD0iTTI1LDI1IEw3NSw3NSI+PC9wYXRoPjwvZz4gIDwvc3ZnPg==");
	}

div.upload p {
	color: #a0a0a0;
	text-align: center;
	}

/* in-box image display */
/* assign background-image in js */
div.upload .upload-display {
  background-position: center;
  background-size    : contain;
 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
       box-sizing: border-box;
  height             : calc( 100% - 8px );
  left               : 4px;
  margin             : 0;
  position           : absolute;
  top                : 4px;
  width              : calc( 100% - 8px );
  z-index            : -1;
	}

/* status modes */
div.upload.uploading    progress { visibility: visible; }
div.upload.upload-error progress { visibility: hidden; }


/* ready ( assigned by js ) */
div.upload.upload-ready          { visibility: visible; }
div.upload              progress { visibility: hidden; }


/* drop-file */
div.upload.drop-target { outline-style   : dashed; }

/* uploading */
div.upload.uploading { pointer-events  : none; }
div.upload.uploading p { color: #ffffff; }

/* forbidden */
div.upload.upload-failed { pointer-events  : none; }






/* theming */
/* low-contrast / default */
div.upload {-webkit-box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16); }
div.upload::before { background-color: white; border : 4px solid #e1e1e1; }

div.upload.drop-target    { background-color: white; outline-color: black; }
div.upload.drop-target p  { color: #000000; }
div.upload.uploading      { background-color: transparent; outline-color: transparent; }
div.upload.uploading p    { color: #000000; }
div.upload.upload-error   { background-color: transparent; outline-color: transparent; }
div.upload.upload-error p { color: #000000; }
div.upload.upload-failed  { background-color: transparent; outline-color: transparent; }

div.upload.upload-error {
  background-image   : url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld2JveD0iMCAwIDEwMCAxMDAiIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjEwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0NSI+PC9jaXJjbGU+PHBhdGggZD0iTTIwLDIwIEw4MCw4MCI+PC9wYXRoPjwvZz4gIDwvc3ZnPg==");
	}



/* mid-contrast */
.contrast-mid div.upload {-webkit-box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16);
        box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.16); }
.contrast-mid div.upload::before { background-color: white; border : 4px solid #e1e1e1; }

.contrast-mid div.upload.drop-target    { background-color: rgba( 0,0,255,0.5); outline-color: blue; }
.contrast-mid div.upload.drop-target p  { color: #ffffff; }
.contrast-mid div.upload.uploading      { background-color: rgba( 0,128,0,0.5); outline-color: green; }
.contrast-mid div.upload.uploading p    { color: #ffffff; }
.contrast-mid div.upload.upload-error   { background-color: rgba(200, 0, 0, 0.6); outline-color: red; }
.contrast-mid div.upload.upload-error p { color: #ffffff; }
.contrast-mid div.upload.upload-failed  { background-color: rgba( 255,0,0,0.5); outline-color: red !important; }

.contrast-mid div.upload.upload-error {
  background-image   : url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld2JveD0iMCAwIDEwMCAxMDAiIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDUiPjwvY2lyY2xlPjxwYXRoIGQ9Ik0yMCwyMCBMODAsODAiPjwvcGF0aD48L2c+ICA8L3N2Zz4=");
	}

.contrast-mid div.upload.drop-target,
.contrast-mid div.upload.uploading {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMxIiBoZWlnaHQ9IjMxIiB2aWV3Qm94PSIwIDAgMzEgMzEiIGZpbGw9Im5vbmUiPiAgPGcgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQuNjgwOTkgMS41ODk4NEgyNi4zMTlDMjguMDI2MiAxLjU4OTg0IDI5LjQxMDEgMi45NzM4IDI5LjQxMDEgNC42ODA5OVYyNi4zMTlDMjkuNDEwMSAyOC4wMjYyIDI4LjAyNjIgMjkuNDEwMSAyNi4zMTkgMjkuNDEwMUg0LjY4MDk5QzIuOTczOCAyOS40MTAxIDEuNTg5ODQgMjguMDI2MiAxLjU4OTg0IDI2LjMxOVY0LjY4MDk5QzEuNTg5ODQgMi45NzM4IDIuOTczOCAxLjU4OTg0IDQuNjgwOTkgMS41ODk4NFoiIC8+PHBhdGggZD0iTTEyLjQwOTIgMTAuMDkwOEMxMi40MDkyIDExLjM3MTIgMTEuMzcxMiAxMi40MDkyIDEwLjA5MDggMTIuNDA5MkM4LjgxMDQzIDEyLjQwOTIgNy43NzI0NiAxMS4zNzEyIDcuNzcyNDYgMTAuMDkwOEM3Ljc3MjQ2IDguODEwNDMgOC44MTA0MyA3Ljc3MjQ2IDEwLjA5MDggNy43NzI0NkMxMS4zNzEyIDcuNzcyNDYgMTIuNDA5MiA4LjgxMDQzIDEyLjQwOTIgMTAuMDkwOFoiIC8+PHBhdGggZD0iTTI5LjQwOTggMjAuMTM3TDIxLjY4MiAxMi40MDkyTDQuNjgwNjYgMjkuNDEwNSIgLz48L2c+PC9zdmc+");
	}



/* high-contrast */

.contrast-hi div.upload {-webkit-box-shadow: none;
    -moz-box-shadow: none;
        box-shadow: none; }
.contrast-hi div.upload::before       { border-color: black; }
.contrast-hi div.upload.drop-target   { background-color: rgba(   0,0,255,0.8); }
.contrast-hi div.upload.uploading     { background-color: rgba(   0,128,0,0.8); }
.contrast-hi div.upload.upload-error  { background-color: rgba( 200,  0,0,0.8); }
.contrast-hi div.upload.upload-failed { background-color: rgba( 255,  0,0,0.8); }

.contrast-hi div.upload {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMxIiBoZWlnaHQ9IjMxIiB2aWV3Qm94PSIwIDAgMzEgMzEiIGZpbGw9Im5vbmUiPiAgPGcgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQuNjgwOTkgMS41ODk4NEgyNi4zMTlDMjguMDI2MiAxLjU4OTg0IDI5LjQxMDEgMi45NzM4IDI5LjQxMDEgNC42ODA5OVYyNi4zMTlDMjkuNDEwMSAyOC4wMjYyIDI4LjAyNjIgMjkuNDEwMSAyNi4zMTkgMjkuNDEwMUg0LjY4MDk5QzIuOTczOCAyOS40MTAxIDEuNTg5ODQgMjguMDI2MiAxLjU4OTg0IDI2LjMxOVY0LjY4MDk5QzEuNTg5ODQgMi45NzM4IDIuOTczOCAxLjU4OTg0IDQuNjgwOTkgMS41ODk4NFoiIC8+PHBhdGggZD0iTTEyLjQwOTIgMTAuMDkwOEMxMi40MDkyIDExLjM3MTIgMTEuMzcxMiAxMi40MDkyIDEwLjA5MDggMTIuNDA5MkM4LjgxMDQzIDEyLjQwOTIgNy43NzI0NiAxMS4zNzEyIDcuNzcyNDYgMTAuMDkwOEM3Ljc3MjQ2IDguODEwNDMgOC44MTA0MyA3Ljc3MjQ2IDEwLjA5MDggNy43NzI0NkMxMS4zNzEyIDcuNzcyNDYgMTIuNDA5MiA4LjgxMDQzIDEyLjQwOTIgMTAuMDkwOFoiIC8+PHBhdGggZD0iTTI5LjQwOTggMjAuMTM3TDIxLjY4MiAxMi40MDkyTDQuNjgwNjYgMjkuNDEwNSIgLz48L2c+PC9zdmc+");
	}

.contrast-hi div.upload.drop-target,
.contrast-hi div.upload.uploading {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMxIiBoZWlnaHQ9IjMxIiB2aWV3Qm94PSIwIDAgMzEgMzEiIGZpbGw9Im5vbmUiPiAgPGcgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQuNjgwOTkgMS41ODk4NEgyNi4zMTlDMjguMDI2MiAxLjU4OTg0IDI5LjQxMDEgMi45NzM4IDI5LjQxMDEgNC42ODA5OVYyNi4zMTlDMjkuNDEwMSAyOC4wMjYyIDI4LjAyNjIgMjkuNDEwMSAyNi4zMTkgMjkuNDEwMUg0LjY4MDk5QzIuOTczOCAyOS40MTAxIDEuNTg5ODQgMjguMDI2MiAxLjU4OTg0IDI2LjMxOVY0LjY4MDk5QzEuNTg5ODQgMi45NzM4IDIuOTczOCAxLjU4OTg0IDQuNjgwOTkgMS41ODk4NFoiIC8+PHBhdGggZD0iTTEyLjQwOTIgMTAuMDkwOEMxMi40MDkyIDExLjM3MTIgMTEuMzcxMiAxMi40MDkyIDEwLjA5MDggMTIuNDA5MkM4LjgxMDQzIDEyLjQwOTIgNy43NzI0NiAxMS4zNzEyIDcuNzcyNDYgMTAuMDkwOEM3Ljc3MjQ2IDguODEwNDMgOC44MTA0MyA3Ljc3MjQ2IDEwLjA5MDggNy43NzI0NkMxMS4zNzEyIDcuNzcyNDYgMTIuNDA5MiA4LjgxMDQzIDEyLjQwOTIgMTAuMDkwOFoiIC8+PHBhdGggZD0iTTI5LjQwOTggMjAuMTM3TDIxLjY4MiAxMi40MDkyTDQuNjgwNjYgMjkuNDEwNSIgLz48L2c+PC9zdmc+");
	}

.contrast-hi div.upload.upload-error {
  background-image   : url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld2JveD0iMCAwIDEwMCAxMDAiIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDUiPjwvY2lyY2xlPjxwYXRoIGQ9Ik0yMCwyMCBMODAsODAiPjwvcGF0aD48L2c+ICA8L3N2Zz4=");
	}

.contrast-hi div.upload.upload-not-allowed {
  background-image   : url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld2JveD0iMCAwIDEwMCAxMDAiIHdpZHRoPSIxMDBweCIgaGVpZ2h0PSIxMDBweCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiIHN0cm9rZT0ibm9uZSIgZmlsbD0icmVkIj48L2NpcmNsZT48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzNSI+PC9jaXJjbGU+PHBhdGggZD0iTTI1LDI1IEw3NSw3NSI+PC9wYXRoPjwvZz4gIDwvc3ZnPg==");
	}












/****************************/






p.uploads { /* where they end up */
  border-top : 1px solid #ddd;
  padding-top: 20px;
  text-align : center;
  clear: both;
  }

p.uploads:empty {
	display: none;
}

p.uploads i {
  background-position: top center;
  background-size    : cover;
  border             : 1px solid #ddd;
  display            : inline-block;
  margin             : 0 10px 10px 0;
  width              : 60px;
	min-height         : 60px;
	position: relative;
  }


p.uploads i img{
  display: inline-block;
  width  : 100%;
  height : auto;
  display: none;
  }

p.uploads s {
  background-color: rgb(0 0 0 / 50%);
 -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
         border-radius: 12px;
  display         : block;
  height          : 24px;
  position        : absolute;
  right           : 5px;
  top             : 5px;
  width           : 24px;
	background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;

  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDM2IDQwIiA+ICA8cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTE4LDMyYzEuMTA0LDAsMi0wLjg5NiwyLTJWMTRjMC0xLjEwNC0wLjg5Ni0yLTItMnMtMiwwLjg5Ni0yLDJ2MTZDMTYsMzEuMTA0LDE2Ljg5NiwzMiwxOCwzMnogTTM0LDRoLTZWMmMwLTEuMTA0LTAuODk2LTItMi0ySDEwQzguODk2LDAsOCwwLjg5Niw4LDJ2MkgyQzAuODk1LDQsMCw0Ljg5NiwwLDZzMC44OTUsMiwyLDJ2MjhjMCwyLjIwOSwxLjc5MSw0LDQsNGgyNGMyLjIwOSwwLDQtMS43OTEsNC00VjhjMS4xMDQsMCwyLTAuODk2LDItMlMzNS4xMDQsNCwzNCw0eiBNMzAsMzZINlY4aDI0VjM2eiBNMTIsMzJjMS4xMDQsMCwyLTAuODk2LDItMlYxNGMwLTEuMTA0LTAuODk2LTItMi0ycy0yLDAuODk2LTIsMnYxNkMxMCwzMS4xMDQsMTAuODk2LDMyLDEyLDMyeiBNMjQsMzJjMS4xMDQsMCwyLTAuODk2LDItMlYxNGMwLTEuMTA0LTAuODk2LTItMi0ycy0yLDAuODk2LTIsMnYxNkMyMiwzMS4xMDQsMjIuODk2LDMyLDI0LDMyeiIvPiAgPC9zdmc+");

  }






/**********
 * file: widgets.css
 *
 */

.clear { clear: both; } /* also use <h6> */

.hidden { display: none; }



/* === begin @media === */



/* === begin @theme === */