/****************************************************************************
 * Element based style settings (defaults)
 */


* {
	box-sizing:border-box;
}

html {
  font-family: arial; /*sans-serif;*/
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body {
	position: relative;
	background-color: #E8E8E8; /*#D8D8D8;*/
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
canvas,
progress {
  display: inline-block;
  vertical-align: baseline;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
  text-decoration: none;
}
a:active,
a:hover,
a:focus {
  outline: 0;
  text-decoration: none;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
form, p {
	margin: 0;
	border: 0;
	padding: 0;
}
h1 {
  margin: 0;
  font-size: 2em;
}
mark {
  color: #000;
  background: #ff0;
}
small {
  font-size: 80%;
}
smaller {
  font-size: 60%;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -.5em;
}
sub {
  bottom: -.25em;
}
img {
  border: 0;
  margin: 0;
  padding: 0;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  padding: 0;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;  
  font: inherit;
  color: inherit;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
/*  cursor: pointer; */
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input {
  line-height: inherit;
  background: #F0F0F0;
  color: #000;
  border: none;
  border-top: 0.1vmin solid #E0E0E0;
  cursor: pointer;
}
input:focus {
	border-top: 0.1vmin solid #42B3E5;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  padding: .35em .625em .75em;
  margin: 0;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}

/****************************************************************************
 * General element styles
 */

.full-width {
	width: 100%;
}

.half-width {
	width: 50%;
}

.quart-width {
	width: 25%;
}

.quint-width {
	width: 20%;
}

.top-margin-5 {
	margin-top: 5%;
}

.top-margin-1 {
	margin-top: 1%;
}

.top-margin-06 {
	margin-top: 0.6%;
}

.wrap-blue {
	width: 100%;
	height: 100%;
}

.hdr-blue {
	background: #3156A3;
	color: #F0F0F0;
	border-radius: 0.4vmin;
	width: 100%;
	padding-left: 3%;
}

.cont-blue {
	width: 100%;
	height: 85%;
}

.anna-logo {
	width: 100%;
	height: 100%;
    background: url(/anna3webservice/img/ANNA_logo_250911_RGB.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.login-logo {
	float: left;
	height: 60%;
	width: 50%;
	padding: 5% 5% 3% 3%;
}

.input-frame {
	float: right;
	height: 100%;
	width: 50%;
	padding: 3%;
	padding-left: 5%;
	display: flex;
	flex-direction:	column;
	row-gap: 1%;
}
.input-frame-menu-left {
	float: left;
	height: 80%;
	width: 20%;
	display: flex;
	flex-direction:	column;
	row-gap: 1%;
	background-color: #E8E8E8;
}
.input-frame-left {
	float: left;
	height: 100%;
	width: 50%;
	padding: 3%;
	padding-left: 5%;
}

.full-input-frame {
	height: 100%;
	width: 100%;
	padding: 3%;
	/* padding-left: 5%; */
	overflow: auto;
	text-align: justify;
}

.error-string {
	color:red;
	font-size: 75%;
	padding: 5% 5% 5% 5%;
}

.anna-banner {
	background: #FFFFFF;
	width: 100%;
	height: 12.5%;
}

.banner-logo {
	float: left;
	padding: 1%;
	width: 15%;
	height: 100%;
}

.banner-btn-set {
	padding-top: 2.5%;
	padding-right: 2.5%;
	float: right;
	display: flex;
	flex-direction: row;
	column-gap: 1%;
	width: 45%;
	justify-content: flex-end;
}

.banner-btn-set label,
.banner-btn-set a {
	width: 12vmin;
}

.btn-box-bottom {
	margin-left: 5%;
	margin-top: 1%;
}

.hor-btn-set {
	padding-inline: 4%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	column-gap: 1%;
	align-items: flex-start;
}

.hor-elem-set {
	display: flex;
	flex-direction: row;
	column-gap: 1%;
	align-items: baseline;
}

.ver-btn-set {
	padding-inline: 4%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	row-gap: 2%;
	height: 100%;
}

/****************************************************************************
 * Text button classes (default)
 */

.txt-btn {
  display: inline-block;
  margin-bottom: 0;
  padding: 0.2em 0.4em;  
  font-size: 1em;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 0.2vmin solid transparent;
  border-radius: 0.4vmin;
}
.txt-btn:focus,
.txt-btn:active:focus,
.txt-btn.active:focus,
.txt-btn.focus,
.txt-btn:active.focus,
.txt-btn.active.focus {
  outline: thin dotted;
  outline: 0.5vmin auto -webkit-focus-ring-color;
  outline-offset: -0.2vmin;
}
.txt-btn:hover,
.txt-btn:focus,
.txt-btn.focus {
  color: #333;
  text-decoration: none;
}
.txt-btn:active,
.txt-btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 0.3vmin 0.5vmin rgba(0, 0, 0, .125);
          box-shadow: inset 0 0.3vmin 0.5vmin rgba(0, 0, 0, .125);
}
.txt-btn.disabled,
.txt-btn[disabled],
fieldset[disabled] .txt-btn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}
a.txt-btn.disabled,
fieldset[disabled] a.txt-btn {
  pointer-events: none;
}

/************************ TEXT BUTTONS ******************/

/***** STANDARD *****/
.txt-btn-std {
  color: #FFF;
  background-color: #3156A3;
  border: none; /* border-color: #0384CE;*/
}
.txt-btn-std:focus,
.txt-btn-std.focus {
  color: #FFF;
  background-color: #42B3E5;
  border-color: #0384CE;
}
.txt-btn-std:hover {
  color: #FFF;
  background-color: #42B3E5;
  border-color: #0384CE;
}
.txt-btn-std:active,
.txt-btn-std.active,
.open > .dropdown-toggle.txt-btn-std {
  color: #FFF;
  background-color: #42B3E5;
  border-color: #0384CE;
}
.txt-btn-std:active:hover,
.txt-btn-std.active:hover,
.open > .dropdown-toggle.txt-btn-std:hover,
.txt-btn-std:active:focus,
.txt-btn-std.active:focus,
.open > .dropdown-toggle.txt-btn-std:focus,
.txt-btn-std:active.focus,
.txt-btn-std.active.focus,
.open > .dropdown-toggle.txt-btn-std.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.txt-btn-std:active,
.txt-btn-std.active,
.open > .dropdown-toggle.txt-btn-std {
  background-image: none;
}
.txt-btn-std.disabled,
.txt-btn-std[disabled],
fieldset[disabled] .txt-btn-std,
.txt-btn-std.disabled:hover,
.txt-btn-std[disabled]:hover,
fieldset[disabled] .txt-btn-std:hover,
.txt-btn-std.disabled:focus,
.txt-btn-std[disabled]:focus,
fieldset[disabled] .txt-btn-std:focus,
.txt-btn-std.disabled.focus,
.txt-btn-std[disabled].focus,
fieldset[disabled] .txt-btn-std.focus,
.txt-btn-std.disabled:active,
.txt-btn-std[disabled]:active,
fieldset[disabled] .txt-btn-std:active,
.txt-btn-std.disabled.active,
.txt-btn-std[disabled].active,
fieldset[disabled] .txt-btn-std.active {
  color: #300
  background-color: #DEDEDE;
  border-color: #B6B6B6;
}
.txt-btn-std .badge {
  color: #fff;
  background-color: #333;
}

/***** MODAL WINDOW *****/
.txt-btn-modal {
  display: inline-block;
  margin-bottom: 0;
  padding: 0.2em 1em;
  font-size: 1.2em;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  background-color: #3156A3;
  color: #FFF;
  border: 0.2vmin solid transparent;
  border-radius: 0.4vmin;
}
.txt-btn-modal:focus,
.txt-btn-modal.focus {
  color: #FFF;
  background-color: #42B3E5;
  border-color: #0384CE;
}
.txt-btn-modal:hover {
  color: #FFF;
  background-color: #42B3E5;
  border-color: #0384CE;
}
.txt-btn-modal:active,
.txt-btn-modal.active,
.open > .dropdown-toggle.txt-btn-modal {
  color: #FFF;
  background-color: #42B3E5;
  border-color: #0384CE;
}
.txt-btn-modal:active:hover,
.txt-btn-modal.active:hover,
.open > .dropdown-toggle.txt-btn-modal:hover,
.txt-btn-modal:active:focus,
.txt-btn-modal.active:focus,
.open > .dropdown-toggle.txt-btn-modal:focus,
.txt-btn-modal:active.focus,
.txt-btn-modal.active.focus,
.open > .dropdown-toggle.txt-btn-modal.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.txt-btn-modal:active,
.txt-btn-modal.active,
.open > .dropdown-toggle.txt-btn-modal {
  background-image: none;
}
.txt-btn-modal.disabled,
.txt-btn-modal[disabled],
fieldset[disabled] .txt-btn-modal,
.txt-btn-modal.disabled:hover,
.txt-btn-modal[disabled]:hover,
fieldset[disabled] .txt-btn-modal:hover,
.txt-btn-modal.disabled:focus,
.txt-btn-modal[disabled]:focus,
fieldset[disabled] .txt-btn-modal:focus,
.txt-btn-modal.disabled.focus,
.txt-btn-modal[disabled].focus,
fieldset[disabled] .txt-btn-modal.focus,
.txt-btn-modal.disabled:active,
.txt-btn-modal[disabled]:active,
fieldset[disabled] .txt-btn-modal:active,
.txt-btn-modal.disabled.active,
.txt-btn-modal[disabled].active,
fieldset[disabled] .txt-btn-modal.active {
  color: #300
  background-color: #DEDEDE;
  border-color: #B6B6B6;
}
.txt-btn-modal .badge {
  color: #fff;
  background-color: #333;
}


/****************************************************************************
 * buttons referring to documents
 */
.txt-btn-doc {
  color: #000;
  background-color: #EAEBFF;
  border: none; /* border-color: #D8D6FF;*/
}
.txt-btn-doc:focus,
.txt-btn-doc.focus {
  color: #FFF;
  background-color: #42B3E5;
  border-color: #0384CE;
}
.txt-btn-doc:hover {
  color: #FFF;
  background-color: #42B3E5;
  border-color: #0384CE;
}
.txt-btn-doc:active,
.txt-btn-doc.active,
.open > .dropdown-toggle.txt-btn-doc {
  color: #FFF;
  background-color: #42B3E5;
  border-color: #0384CE;
}
.txt-btn-doc:active:hover,
.txt-btn-doc.active:hover,
.open > .dropdown-toggle.txt-btn-doc:hover,
.txt-btn-doc:active:focus,
.txt-btn-doc.active:focus,
.open > .dropdown-toggle.txt-btn-doc:focus,
.txt-btn-doc:active.focus,
.txt-btn-doc.active.focus,
.open > .dropdown-toggle.txt-btn-doc.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.txt-btn-doc:active,
.txt-btn-doc.active,
.open > .dropdown-toggle.txt-btn-doc {
  background-image: none;
}
.txt-btn-doc.disabled,
.txt-btn-doc[disabled],
fieldset[disabled] .txt-btn-doc,
.txt-btn-doc.disabled:hover,
.txt-btn-doc[disabled]:hover,
fieldset[disabled] .txt-btn-doc:hover,
.txt-btn-doc.disabled:focus,
.txt-btn-doc[disabled]:focus,
fieldset[disabled] .txt-btn-doc:focus,
.txt-btn-doc.disabled.focus,
.txt-btn-doc[disabled].focus,
fieldset[disabled] .txt-btn-doc.focus,
.txt-btn-doc.disabled:active,
.txt-btn-doc[disabled]:active,
fieldset[disabled] .txt-btn-doc:active,
.txt-btn-doc.disabled.active,
.txt-btn-doc[disabled].active,
fieldset[disabled] .txt-btn-doc.active {
  color: #300
  background-color: #DEDEDE;
  border-color: #B6B6B6;
}
.txt-btn-doc .badge {
  color: #fff;
  background-color: #333;
}

/*---------------------------------------*/

.txt-btn-doc-warn {
  color: #000;
  background-color: #FFEBEA;
  border-color: #FFD6D8;
}
.txt-btn-doc-warn:focus,
.txt-btn-doc-warn.focus {
  color: #FFF;
  background-color: #E5B342;
  border-color: #CE8403;
}
.txt-btn-doc-warn:hover {
  color: #FFF;
  background-color: #E5B342;
  border-color: #CE8403;
}
.txt-btn-doc-warn:active,
.txt-btn-doc-warn.active,
.open > .dropdown-toggle.txt-btn-doc-warn {
  color: #FFF;
  background-color: #E5B342;
  border-color: #CE8403;
}
.txt-btn-doc-warn:active:hover,
.txt-btn-doc-warn.active:hover,
.open > .dropdown-toggle.txt-btn-doc-warn:hover,
.txt-btn-doc-warn:active:focus,
.txt-btn-doc-warn.active:focus,
.open > .dropdown-toggle.txt-btn-doc-warn:focus,
.txt-btn-doc-warn:active.focus,
.txt-btn-doc-warn.active.focus,
.open > .dropdown-toggle.txt-btn-doc-warn.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.txt-btn-doc-warn:active,
.txt-btn-doc-warn.active,
.open > .dropdown-toggle.txt-btn-doc-warn {
  background-image: none;
}
.txt-btn-doc-warn.disabled,
.txt-btn-doc-warn[disabled],
fieldset[disabled] .txt-btn-doc-warn,
.txt-btn-doc-warn.disabled:hover,
.txt-btn-doc-warn[disabled]:hover,
fieldset[disabled] .txt-btn-doc-warn:hover,
.txt-btn-doc-warn.disabled:focus,
.txt-btn-doc-warn[disabled]:focus,
fieldset[disabled] .txt-btn-doc-warn:focus,
.txt-btn-doc-warn.disabled.focus,
.txt-btn-doc-warn[disabled].focus,
fieldset[disabled] .txt-btn-doc-warn.focus,
.txt-btn-doc-warn.disabled:active,
.txt-btn-doc-warn[disabled]:active,
fieldset[disabled] .txt-btn-doc-warn:active,
.txt-btn-doc-warn.disabled.active,
.txt-btn-doc-warn[disabled].active,
fieldset[disabled] .txt-btn-doc-warn.active {
  color: #300
  background-color: #DEDEDE;
  border-color: #B6B6B6;
}
.txt-btn-doc-warn .badge {
  color: #fff;
  background-color: #333;
}


/****************************************************************************
 * SUBMIT BUTTONS
 */
 
.txt-btn-submit {
  color: #FFF;
  background-color: #3156A3;
  border: none; /*-color: #0384CE;*/
}
.txt-btn-submit:focus,
.txt-btn-submit.focus {
  color: #FFF;
  background-color: #95CC29;
  border-color: #90B824;
}
.txt-btn-submit:hover {
  color: #FFF;
  background-color: #95CC29;
  border-color: #90B824;
}
.txt-btn-submit:active,
.txt-btn-submit.active,
.open > .dropdown-toggle.txt-btn-submit {
  color: #FFF;
  background-color: #42B3E5;
  border-color: #0384CE;
}
.txt-btn-submit:active:hover,
.txt-btn-submit.active:hover,
.open > .dropdown-toggle.txt-btn-submit:hover,
.txt-btn-submit:active:focus,
.txt-btn-submit.active:focus,
.open > .dropdown-toggle.txt-btn-submit:focus,
.txt-btn-submit:active.focus,
.txt-btn-submit.active.focus,
.open > .dropdown-toggle.txt-btn-submit.focus {
  color: #333;
  background-color: #95CC29;
  border-color: #90B824;
}
.txt-btn-submit:active,
.txt-btn-submit.active,
.open > .dropdown-toggle.txt-btn-submit {
  background-image: none;
}
.txt-btn-submit.disabled,
.txt-btn-submit[disabled],
fieldset[disabled] .txt-btn-submit,
.txt-btn-submit.disabled:hover,
.txt-btn-submit[disabled]:hover,
fieldset[disabled] .txt-btn-submit:hover,
.txt-btn-submit.disabled:focus,
.txt-btn-submit[disabled]:focus,
fieldset[disabled] .txt-btn-submit:focus,
.txt-btn-submit.disabled.focus,
.txt-btn-submit[disabled].focus,
fieldset[disabled] .txt-btn-submit.focus,
.txt-btn-submit.disabled:active,
.txt-btn-submit[disabled]:active,
fieldset[disabled] .txt-btn-submit:active,
.txt-btn-submit.disabled.active,
.txt-btn-submit[disabled].active,
fieldset[disabled] .txt-btn-submit.active {
  color: #300
  background-color: #DEDEDE;
  border-color: #B6B6B6;
}
.txt-btn-submit .badge {
  color: #fff;
  background-color: #333;
}


/****** GREEN ******/
.txt-btn-green {
  color: #030;
  background-color: #0f0;
  border-color: #0c0;
}
.txt-btn-green:focus,
.txt-btn-green.focus {
  color: #030;
  background-color: #00e600;
  border-color: #008c00;
}
.txt-btn-green:hover {
  color: #030;
  background-color: #00e600;
  border-color: #00ad00;
}
.txt-btn-green:active,
.txt-btn-green.active,
.open > .dropdown-toggle.txt-btn-green {
  color: #030;
  background-color: #00e600;
  border-color: #00ad00;
}
.txt-btn-green:active:hover,
.txt-btn-green.active:hover,
.open > .dropdown-toggle.txt-btn-green:hover,
.txt-btn-green:active:focus,
.txt-btn-green.active:focus,
.open > .dropdown-toggle.txt-btn-green:focus,
.txt-btn-green:active.focus,
.txt-btn-green.active.focus,
.open > .dropdown-toggle.txt-btn-green.focus {
  color: #030;
  background-color: #00d400;
  border-color: #008c00;
}
.txt-btn-green:active,
.txt-btn-green.active,
.open > .dropdown-toggle.txt-btn-green {
  background-image: none;
}
.txt-btn-green.disabled,
.txt-btn-green[disabled],
fieldset[disabled] .txt-btn-green,
.txt-btn-green.disabled:hover,
.txt-btn-green[disabled]:hover,
fieldset[disabled] .txt-btn-green:hover,
.txt-btn-green.disabled:focus,
.txt-btn-green[disabled]:focus,
fieldset[disabled] .txt-btn-green:focus,
.txt-btn-green.disabled.focus,
.txt-btn-green[disabled].focus,
fieldset[disabled] .txt-btn-green.focus,
.txt-btn-green.disabled:active,
.txt-btn-green[disabled]:active,
fieldset[disabled] .txt-btn-green:active,
.txt-btn-green.disabled.active,
.txt-btn-green[disabled].active,
fieldset[disabled] .txt-btn-green.active {
  background-color: #0f0;
  border-color: #0c0;
}
.txt-btn-green .badge {
  color: #0f0;
  background-color: #030;
}



/***** YELLOW *****/
/***** OFF *****/
.txt-btn-off {
  color: #300;
  background-color: #DEDEDE;
  border-color: #B6B6B6;
}
.txt-btn-off:focus,
.txt-btn-off.focus {
  color: #300;
  background-color: #DBDBDB;
  border-color: #B6B6B6;
}
.txt-btn-off:hover {
  color: #300;
  background-color: #DBDBDB;
  border-color: #B6B6B6;
}
.txt-btn-off:active,
.txt-btn-off.active,
.open > .dropdown-toggle.txt-btn-off {
  color: #300;
  background-color: #D0D0D0;
  border-color: #B6B6B6;
}
.txt-btn-off:active:hover,
.txt-btn-off.active:hover,
.open > .dropdown-toggle.txt-btn-off:hover,
.txt-btn-off:active:focus,
.txt-btn-off.active:focus,
.open > .dropdown-toggle.txt-btn-off:focus,
.txt-btn-off:active.focus,
.txt-btn-off.active.focus,
.open > .dropdown-toggle.txt-btn-off.focus {
  color: #300;
  background-color: #DBDBDB;
  border-color: #B6B6B6;
}
.txt-btn-off:active,
.txt-btn-off.active,
.open > .dropdown-toggle.txt-btn-off {
  background-image: none;
}
.txt-btn-off.disabled,
.txt-btn-off[disabled],
fieldset[disabled] .txt-btn-off,
.txt-btn-off.disabled:hover,
.txt-btn-off[disabled]:hover,
fieldset[disabled] .txt-btn-off:hover,
.txt-btn-off.disabled:focus,
.txt-btn-off[disabled]:focus,
fieldset[disabled] .txt-btn-off:focus,
.txt-btn-off.disabled.focus,
.txt-btn-off[disabled].focus,
fieldset[disabled] .txt-btn-off.focus,
.txt-btn-off.disabled:active,
.txt-btn-off[disabled]:active,
fieldset[disabled] .txt-btn-off:active,
.txt-btn-off.disabled.active,
.txt-btn-off[disabled].active,
fieldset[disabled] .txt-btn-off.active {
  background-color: #DEDEDE;
  border-color: #B6B6B6;
}


.txt-btn-menu {
  color: #787878;
  background-color: transparent;
  border:none;
  text-align: left;
  font-size: 1.0em;
  width: 80%;
  margin: 0 auto;
}
.txt-btn-menu:focus,
.txt-btn-menu.focus {
  color: #030;
  background-color: #DEDEDE;
  border-color: none;
}
.txt-btn-menu:hover {
  color: #030;
  background-color: #DEDEDE;
  border-color: none;
}

/*************** END SECTION TEXT BUTTONS *************/

/*************** SINGLE BUTTON FORM WRAPPER ***********/

.frm-btn-wrp {
	display: inline-block;
	width: 20%;
}

.image {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
/*  cursor: pointer; */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.badge {
  background-color: red;
  color: white;
  padding: 0.4% 0.8%;
  text-align: center;
  border-radius: 5px;
}

.button-badge {
    background-color: #3156A3;
    color: white;
    padding: 0.4% 0.8%;
    text-align: center;
    border-radius: 3px;
}

.ico-btn {
  pointer-events: auto;
  display: inline-block;
  padding: 0;
  margin-bottom: 0;
  font-size: 1.4em;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 0.2vmin solid transparent;
  border-radius: 0.4vmin;
}
.ico-btn:focus,
.ico-btn:active:focus,
.ico-btn.active:focus,
.ico-btn.focus,
.ico-btn:active.focus,
.ico-btn.active.focus {
  outline: thin dotted;
  outline: 0.5vmin auto -webkit-focus-ring-color;
  outline-offset: -0.2vmin;
}
.ico-btn:hover,
.ico-btn:focus,
.ico-btn.focus {
  color: #333;
  text-decoration: none;
}
.ico-btn:active,
.ico-btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 0.3vmin 0.5vmin rgba(0, 0, 0, .125);
          box-shadow: inset 0 0.3vmin 0.5vmin rgba(0, 0, 0, .125);
}
.ico-btn.disabled,
.ico-btn[disabled],
fieldset[disabled] .ico-btn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}
a.ico-btn.disabled,
fieldset[disabled] a.ico-btn {
  pointer-events: none;
}

.ico-btn-red {
  color: #d00;
}
.ico-btn-red:focus,
.ico-btn-red:active:focus,
.ico-btn-red.active:focus,
.ico-btn-red.focus,
.ico-btn-red:active.focus,
.ico-btn-red.active.focus {
  color: #f00;
  outline: thin dotted;
  outline: 0.5vmin auto -webkit-focus-ring-color;
  outline-offset: -0.2vmin;
}
.ico-btn-red:hover,
.ico-btn-red:focus,
.ico-btn-red.focus {
  color: #f00;
  text-decoration: none;
}
.ico-btn-red:active,
.ico-btn-red.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 0.3vmin 0.5vmin rgba(255, 0, 0, .125);
          box-shadow: inset 0 0.3vmin 0.5vmin rgba(255, 0, 0, .125);
}
.ico-btn-red.disabled,
.ico-btn-red[disabled],
fieldset[disabled] .ico-btn-red {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}
a.ico-btn-red.disabled,
fieldset[disabled] a.ico-btn-red {
  pointer-events: none;
}

.ico-btn-yellow {
  color: #dd0;
}
.ico-btn-yellow:focus,
.ico-btn-yellow:active:focus,
.ico-btn-yellow.active:focus,
.ico-btn-yellow.focus,
.ico-btn-yellow:active.focus,
.ico-btn-yellow.active.focus {
  color: #ff0;
  outline: thin dotted;
  outline: 0.5vmin auto -webkit-focus-ring-color;
  outline-offset: -0.2vmin;
}
.ico-btn-yellow:hover,
.ico-btn-yellow:focus,
.ico-btn-yellow.focus {
  color: #ff0;
  text-decoration: none;
}
.ico-btn-yellow:active,
.ico-btn-yellow.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 0.3vmin 0.5vmin rgba(255, 255, 0, .125);
          box-shadow: inset 0 0.3vmin 0.5vmin rgba(255, 255, 0, .125);
}
.ico-btn-yellow.disabled,
.ico-btn-yellow[disabled],
fieldset[disabled] .ico-btn-yellow {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}
a.ico-btn-yellow.disabled,
fieldset[disabled] a.ico-btn-yellow {
  pointer-events: none;
}

.ico-btn-green {
  color: #0d0;
}
.ico-btn-green:focus,
.ico-btn-green:active:focus,
.ico-btn-green.active:focus,
.ico-btn-green.focus,
.ico-btn-green:active.focus,
.ico-btn-green.active.focus {
  color: #0f0;
  outline: thin dotted;
  outline: 0.5vmin auto -webkit-focus-ring-color;
  outline-offset: -0.2vmin;
}
.ico-btn-green:hover,
.ico-btn-green:focus,
.ico-btn-green.focus {
  color: #0f0;
  text-decoration: none;
}
.ico-btn-green:active,
.ico-btn-green.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 0.3vmin 0.5vmin rgba(0, 255, 0, .125);
          box-shadow: inset 0 0.3vmin 0.5vmin rgba(0, 255, 0, .125);
}
.ico-btn-green.disabled,
.ico-btn-green[disabled],
fieldset[disabled] .ico-btn-green {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}
a.ico-btn-green.disabled,
fieldset[disabled] a.ico-btn-green {
  pointer-events: none;
}

-------------
.image-std {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.image-std:focus,
.image-std.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.image-std:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.image-std:active,
.image-std.active,
.open > .dropdown-toggle.image-std {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.image-std:active:hover,
.image-std.active:hover,
.image-std:active:focus,
.image-std.active:focus,
.image-std:active.focus,
.image-std.active.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.image-std:active,
.image-std.active {
  background-image: none;
}


/**
 * Style for a style-able select
 * Use this class for a div element wrapping the actual select
 */

.styled-select {
	/* change overall style only here */
	border-radius: 0.4vmin;
	cursor: pointer;
	
	/* if background color shall be transparent
	 * .select:after.background-color should be set
	 * to something opaque, otherwise underlying
	 * select text might become visible
	 */
/*	background-color: #FFF;*/
	
	/* don't change this! */
	position: relative;
}
.styled-select:after {
	/* change the button background color here */
	background-color: inherit;
	/* change the button content color here */
	color: inherit;
	/* change the button spacer appearance here */
	border-color: inherit;
	border-right: inherit;
	
	/* this is the button icon and the necessary transform */
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
	font-family: "typicons";
	font-size: 1em;
	font-weight: normal;
	content: '\e0a8';
	/* adjust icon position here if really needed */
	margin-left: 0;		/* rot180� -> right side */
	padding-left: 0;	/* rot180� -> right side */
	padding-right: 0;	/* rot180� -> left side */
	padding-top: 0;		/* rot180� -> bottom side - push icon up a bit */

	/* don't change the following stuff */
    pointer-events: none; /* important so that clicks can pass to select element! */	
	position: absolute;
	right: 0;
	top: 0;
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}

.styled-select select {
	/* change the background of the select-text here,
	 * but only if it shall be different from the
	 * general color defined in .select.background-color
	 */
	background-color: inherit;
	cursor: pointer;

	/* don't touch below for style customization */
	border-radius: inherit;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: 1;
/*	font-size: 1.4em;*/
	font-size: 1em;
	padding: 0;
	margin: 0;
	border: 0;
	width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
/* needed to get rid of the drop down button in IE */
.styled-select select::-ms-expand{
    display: none;
}

.styled-select select::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/******************************************************************************
 * Styled checkbox and radio buttons
*/
input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
	width     : 2em;
	margin    : 0;
	padding   : 0;
	border	  : 0;
	font-size : 1em;
	opacity   : 0;
}
input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
	display      : inline-block;
	margin-left  : -2em;
	line-height  : 1.5em;
}
input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
	display          : inline-block;
	width            : 0.875em;
	height           : 0.875em;
	margin           : 0.25em 0.5em 0.25em 0.25em;
	border           : 0.0625em solid #E0E0E0;
	border-radius    : 0.25em;
	background       : #F0F0F0;
	vertical-align   : bottom;
}
input[type=checkbox]:not(old):checked + label > span:before{
	font-family: "typicons";
	content     : '\e11e';
	display     : block;
/*	width       : 1em; */
	color       : #0d0;
	font-size   : 1.7em;
	line-height : 0.2em;
	text-align  : center;
/*	text-shadow : 0 0 0.0714em rgb(115,153,77);*/
/*	font-weight : bold; */
}
input[type=radio]:not(old):checked + label > span > span{
	display          : block;
	width            : 0.5em;
	height           : 0.5em;
	margin           : 0.125em;
	border           : 0.0625em solid rgb(115,153,77);
	border-radius    : 0.125em;
	background       : rgb(153,204,102);
}


/**
 * Style for image pane and image pane elements
 * 
 * Image pane is a container to take image elements. Each image element consists
 * of an upper region with a delete button and possibly other functional elements
 * and an image frame with constant aspect ration 1:1. The image is scaled so that
 * its maximum will fit the frame size (respectively width or height or both). The
 * image will be additionally centered within the frame.
 */

.img-pane-ico-btn {
  padding: 0;
  font-size: 1.4em;
  line-height: 1;		/* to be tested */
  font-weight: normal;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  border: 0.2vmin solid transparent;
  border-radius: 50%;
}


.img-pane {
  width: 100%;
/* was originally these values, but fixed it to standard size.
  min-height: 25%;
  height: auto;

  height: 20%;
*/
  display: block;
  margin: 0;
  background-image: none;
  background-color: #FFFFFF;

  box-sizing:border-box;
  border: none; /*0.2vmin solid;
  border-color: #3156A3;*/
  border-radius: 0.4vmin;
  padding-top: 0.8%;
  padding-left: 0.8%;
}

.drag-over {
  background-color: #F0F0F0;
  border-color: #3156A3;
}

.img-pane-el-ofrm {
	/* width MUST be given in % */
	width: 9.8%; /* change this and padding-top to get larger image elements within the pane */
	padding-top: calc(9.8% + 0.98%); /* account for .img-pane-ico-btn::font-size */
	display: inline-block;
	white-space: nowrap;
	position: relative;
	border: none;
	border-radius: 0.4vmin;
	background-color: #3156A3;
	background-image: none;
	box-sizing:border-box;
	border: 0.2vmin solid;
	border-color: #42B3E5;
	margin-left: 0.1%;
}

.img-pane-el {
	cursor: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: inline-block;
	border-radius: 0.4vmin;
}

.img-pane-el-ofrm-active {
	background-color: #42B3E5;
}

/* this is to make drop down lists work in Chrome and IE */
.img-pane-el-ofrm.img-pane-el-ofrm-active div div select {
	background-color: #42B3E5;
}
/* this is to make drop down lists work in Chrome and IE */
.img-pane-el-ofrm div div select {
	background-color: #3156A3;
}

/* select element within the image pane */
.img-pane-el>.styled-select {
/*	background-color: #3156A3; */
	border: 0;
	font-weight: bold;
	width: 33%;
	float: left;
	height: 0.98%;
	color: #FFFFFF;
}

/* changes the option entry of a "real" select element */
.img-pane-el select .used {
	color: #E31E2D;
}

.img-pane-el .ico-btn-red {
	position: absolute;
	top: 0;
	right: 1%;
	font-size: 1.4em;
	line-height: 1;
}
.img-pane-el .ico-btn-green {
	position: absolute;
	top: 0;
	right: 1%;
	font-size: 1.4em;
	line-height: 1;
}

.img-pane-el-frm {
	cursor: default;
	position: relative;
	width: 100%;
/*	padding-top: 95%; */
	padding-top: 85%;
	background-color: #303030;
	border-radius: 0 0 0.4vmin 0.4vmin;
}

.img-pane-el-cont {
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.img-frm {
  position: absolute;
  width: 100%;
  height: 100%;
}

.img-frm img {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:transparent;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}


/*****************************************************************
 *
 * Style for image modal window and image modal window elements
 *
 * Image modal window is a container to take DICOM image elements. Each image element
 * consists of an image frame with constant aspect ration 1:1. The image is scaled so that
 * its maximum will fit the frame size (respectively width or height or both). The
 * image will be additionally centered within the frame.
 */

.img-modal-win-el-ofrm {
	/* width MUST be given in % */
	width: 45%; /* change this and padding-top to get larger image elements within the pane */
	display: inline-block;
	white-space: nowrap;
	position: relative;
	background-color: lightgray;
	background-image: none;
	box-sizing:border-box;
	border: 0.5vmin solid;
	border-radius: 0.4vmin;
	border-color: transparent;
	margin-left: 2%;
}

.img-modal-win-el-ofrm-active {
	background-color: #42B3E5;
}

.img-modal-win-el-ofrm-inactive {
	background-color: lightgray;
}


/*****************************************************************
 *
 * Style for a custom alert box. Since there can be only one
 * IDs are used instead of classes.
 *
 */
#alert-box-cont {
	background-color:rgba(0, 0, 0, 0.3);
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:10000;
/* 	background-image:url(tp.png); required by MSIE to prevent actions on lower z-index elements */
}

#alert-box {
	position:relative;
	min-width:50%;
	min-height:10%;
	margin-top:5%;
	border: 0.2vmin solid #3156A3;
	border-radius: 0.4vmin;
	background-color:#fff;
}

#alert-box-cont > #alert-box {
	position:fixed;
	left: 25%;
	top: 5%;
}

#alert-box h1 {
	margin:0;
/*	font:bold 0.9em verdana,arial; */
	font-weight:bold;
	font-size: 0.9em;
	background-color:#3156A3;
	color:#FFF;
	border-bottom:0.1vmin solid #000;
	padding: 0.2vmin 0 0.2vmin 0.5vmin;
}

#alert-box p {
	width: 80%;
	font:0.7em verdana,arial;
	min-height: 5vmin;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2%;
	text-align: justify;
}

#alert-box .alert-box-btn {
	display:block;
	position:relative;
	margin:0.5vmin auto;
	padding:0.7vmin;
	border:0 none;
	min-width:20%;
	max-width:35%;
	font:0.7em verdana,arial;
	text-transform:uppercase;
	text-align:center;
	color:#FFF;
	background-color:#3156A3;
	border-radius: 0.3vmin;
	text-decoration:none;
}

/*****************************************************************
 *
 * Style for a custom confirm box. Since there can be only one
 * IDs are used instead of classes.
 *
 */
#confirm-box-cont {
	background-color:rgba(0, 0, 0, 0.3);
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:10000;
/* 	background-image:url(tp.png); required by MSIE to prevent actions on lower z-index elements */
}

#confirm-box {
	position:relative;
	min-width: 50%;
	min-height: 10%;
	margin-top: 5%;
	border:0.1vmin solid #3156A3;
	border-radius: 0.4vmin;
	background-color:#fff;
}

#confirm-box-cont > #confirm-box {
	position:fixed;
}

#confirm-box h1 {
	margin:0;
/*	font:bold 0.9em verdana,arial; */
	font-weight:bold;
	font-size: 0.9em;
	background-color:#3156A3;
	color:#FFF;
	border-bottom:0.1vmin solid #000;
	padding:0.2vmin 0 0.2vmin 0.5vmin;
}

#confirm-box p {
	width: 80%;
	font:0.7em verdana,arial;
	min-height: 5vmin;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2%;
	text-align: justify;
}

#confirm-box .button-box {
	text-align: center;
}

#confirm-box .confirm-box-btn {
	display:inline-table;
	position:relative;
	margin:0.5vmin;
	padding:0.7vmin;
	border:0 none;
	min-width:20%;
	max-width:35%;
	font:0.7em verdana,arial;
	text-transform:uppercase;
	text-align:center;
	color:#FFF;
	background-color:#3156A3;
	border-radius: 0.3vmin;
	text-decoration:none;
}

/*********************************************************
 * LOGIN FRAME
 */

.full-bkg,
.login-frm {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	padding: 0;
	margin: 0;
	background-image: url(/anna3webservice/img/bg-folder_AI-CT-15.png);
	background-size: cover;
	background-color: #D8D8D8;
	box-sizing:border-box;
	border: 0.2vmin solid;
	border-color: #d0d0d0;
	border-radius: 0.4vmin;
}

.full-bkg label,
.login-frm label {
	display: inline-block;
}

.full-bkg input,
.login-frm input {
	width: 100%;	
	display: inline-block;
}

.login-form, .chpwd-form,
.bad-user-form {
	margin-left: auto;
	margin-right: auto;
	margin-top: 10%;
	width: 35%;
	display: block;
	border: none; /*0.2vmin solid;
	border-color: #D0D0D0;*/
	border-radius: 0.4vmin;
	height: 35%;
	background: #FFFFFF;
}

.chpwd-form {
	height: 40%;
}

.std-lbl {
	width: 35%;
	height: auto;
	font-size: 1.4em;
}

.small-lbl {
/*	width: 35%; */
	height: auto;
	font-size: 0.8em;
}

.big-txt {
	font-size: 1.4em;
}

.huge-txt {
	font-size: 7.4em;
}

/*********************************************************
 * List patients
 */

 .panel-tool {
 	position: absolute;
 	top: 20%;
 	bottom: 0;
 	right: 20%;
 	left: 0;
    width: 23%;
 }

 .panel-tool .btn-pane {
 	position: absolute;
 	background: #E9E9E985;
 	margin-left: 0%;
 	width: 100%;
 	height: 100%;
 	box-sizing:border-box;
 	border: none; /*0.2vmin solid #3156A3;*/
 	border-radius: 0.4vmin;
 }

 .margin-5 {
 	margin-top: 5%;
 	margin-left: 5%;
 }
 
 .displ-inl-blk {
 	display: inline-block;
 }
 
 .patient-record-frame,
 .examinations-frame {
 	margin-left: 25%;
 	margin-right: auto;
 	border: none; /* 0.2vmin solid;
	border-color: #d0d0d0;*/
	border-radius: 0.4vmin;
 	background: #FFFFFF;
 	width: 73%;
 	height: 78%;
	margin-top: 1%;
}

.exam-list {
 	margin-left: 5%;
 	margin-top: 2%;
 	margin-bottom: 0%;
 	width: 90%;
 	height: 100%;
 	overflow: auto;
 	overflow-x: hidden;
 	overflow-y: auto;
 	border: 0.2vmin solid;
	border-color: transparent;
	border-radius: 0.4vmin;
}

 .patient-list {
 	margin-left: 5%;
 	margin-top: 1%;
 	margin-bottom: 0%;
 	width: 90%;
 	height: 92%;
 	overflow: auto;
 	overflow-x: hidden;
 	overflow-y: auto;
 	border: 0.2vmin solid;
	border-color: transparent;
	border-radius: 0.4vmin;
}

 .szd-lbl {
 	width: 100%;
 }

.create-precord-form,
.create-exam-form {
 	margin-top: 5%;
 	margin-left: auto;
 	margin-right: auto;
 	width: 40%;
 	height: 45%;
 	border: none; /*0.2vmin solid;
	border-color: #d0d0d0;*/
	border-radius: 0.4vmin;
	background: #FFFFFF;
}

.delete-sign {
    font-family: typicons;
	color: red;
	text-align: right;
	width: 100%;
	font-size: 5vmin;
	line-height: 1;
}

.search-box {
	width: 90%;
	display: inline-block;
	border: 0.1vmin solid;
    border-color: #d0d0d0;
    border-radius: 0.4vmin;
    margin-top: 1%;
	margin-left: 5%;
}

/*********************************************************
 * List patients (examination selector for re-ordering
 */

 .margin-5 {
 	margin-top: 5%;
 	margin-left: 5%;
 }
 
 .displ-inl-blk {
 	display: inline-block;
 }
 
 .examinations-imagelist-frame {
 	margin-left: 24%;
 	margin-right: auto;
 	border: 0.2vmin solid;
	border-color: #d0d0d0;
	border-radius: 0.4vmin;
 	background: #FFFFFF;
 	width: 75%;
 	height: 75%;
	margin-top: 2%;
}

.exam-image-list {
 	margin-left: 1%;
 	margin-top: 2%;
 	margin-bottom: 0%;
 	width: 98%;
 	height: 100%;
 	overflow: auto;
 	overflow-x: hidden;
 	overflow-y: auto;
 	border: 0.2vmin solid;
	border-color: transparent;
	border-radius: 0.4vmin;
}










/*********************************************************
 * Histology report
 */

.findings-tool {
	width: 100%;
	height: 100%;
}

.histo-bkg {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	padding: 0;
	margin: 0;
	background-image: none;
	background-color: #E8E8E8; /*#FFFFFF;*/
	box-sizing:border-box;
	border: none; /*0.2vmin solid;
	border-color: #3156A3;*/
	border-radius: 0.4vmin;
}

.histo-img-frm {
	margin: 1% 0.5% 0.5% 1%;
	height: 87%;
	width: 30%;
 	border: none; /* 0.2vmin solid;
	border-color: #3156A3;*/
	border-radius: 0.4vmin;
	display: inline-block;
	float: left;
	background-color: #FFFFFF;
}
.histo-dat-frm {
	margin: 1% 1% 0.5% 0.5%;
	height: 87%;
	width: 67%;
 	border: none; /*0.2vmin solid;
	border-color: #3156A3;*/
	border-radius: 0.4vmin;
	display: inline-block;
	float: left;
	overflow: hidden;
	background-color: #FFFFFF;
}
.histo-trus-img-frm {
	margin: 0.1% 0.1% 3.8% 0.1%;
	width: 100%;
	height: 36%;
	display: block;
 	border: 0.2vmin solid;
	border-color: #3156A3;
	border-radius: 0.4vmin;
	background-color: #303030;
}

.histo-shot-img-frm-l {
	margin: 0.1%;
	width: 49%;
	height: 20%;
	display: inline-block;
 	border: 0.2vmin solid;
	border-color: #3156A3;
	border-radius: 0.4vmin;
	background-color: #303030;
	margin-top: 1%;
	float: left;
}
.histo-shot-img-frm-r {
	margin: 0.1%;
	width: 49%;
	height: 20%;
	display: inline-block;
 	border: 0.2vmin solid;
	border-color: #3156A3;
	border-radius: 0.4vmin;
	background-color: #303030;
	margin-top: 1%;
	float: right;
}

.histo-elem-active {
	border: 0.4vmin solid #42B3E5 !important;
}

.histo-shot-img-frm-l img,
.histo-shot-img-frm-r img {
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:transparent;
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: auto;
	pointer-events: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.histo-dat-entry {
	margin-bottom: 0.7%;
	width: 100%;
	height: 15.9%;
	display: block;
	border: none; /*0.2vmin solid;
	border-color: #3156A3;*/
	border-radius: 0.4vmin;
	background-color: #F8F8F8; /*#FFFFFF;*/
}

.histo-btn-pane-left {
	width: 30%;
	margin-left: 1%;
	margin-right: 1%;
	padding: 1%;
	height: 9%;
	border: none; /*0.2vmin solid;
	border-color: #3156A3;*/
	border-radius: 0.4vmin;
	background: transparent;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
}

.histo-btn-pane-left .info {
  display: inline-block;
  margin-bottom: 0;
  padding: 0.2em 0.4em;  
  font-size: 1.4em;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 0.2vmin solid transparent;
  border-radius: 0.4vmin;
}

.histo-btn-pane-right {
	width: 67%;
	margin-right: 0%;
	height: 9%;
	padding: 1%;
	border: none;
	border-radius: 0.4vmin;
	background: transparent;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	column-gap: 3%;
}

.shot-num {
	width: 10%;
	height: 100%;
	display: inline-block;
	position: relative;
}
.shot-num h1 {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}

.input-wrapper {
	width: 40%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
}
.chk-wrapper {
	margin: 2% 2% 2% -1%;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.gleason-sel {
	margin-left: 1%;
	margin-right: 5%;
	vertical-align: middle;
	width: 25%;
	display: inline-block;
}

.shot-data {
	width: 110%;
	height: 100%;
	display: inline-block;
	position: relative;
	vertical-align: top;
}

.shot-data label {
	vertical-align: middle;
}

.gleason-score {
	line-height: 1.3;
	font-size: 1.4em;
	padding: 0;
	margin: 0;
	border: 0;
}

.histo-select {
	width: 100%;
	background: #F0F0F0;
	border-top: 0.1vmin solid #E0E0E0;
}
.histo-lbl {
	margin-top: 1%;
	display: block;
}
.histo-input {
	width: 15%;
}

.lbl-size {
	width: 40%;
	display: inline-block;
}
.histo-trus-cvs {
	width: 100%;
	height: 100%;
}

.clear-both {
	clear: both;
}

/*********************************************************
 * DRAWING TOOL
 */
 
.drawing-tool-frm {
	position: relative;
	width: 100%;
/*
	min-height: 25%;
	height: auto;
*/	
	height: 80%;
	display: block;
	padding: 0;
/*	padding-top: 50%; */
	margin: 0;
	background-image: none;
	background-color: #E8E8E8; /* #FFFFFF; */
	box-sizing:border-box;
	border: none; /*0.2vmin solid;
	border-color: #3156A3;*/
	border-radius: 0.4vmin;
}

.drawing-tool {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

.drawing-tool .btn-pane {
	position: absolute;
	background: #FFFFFF;
	width: 23%;
	height: 98%;
	margin-top: 0.5%;
	margin-left: 1%;
	box-sizing:border-box;
	border: none; /*0.2vmin solid #3156A3;*/
	border-radius: 0.4vmin;
}
.fix-width-btn {
	width: 80%;
	margin: 0 auto;
	font-size: 1.4em;
}
.fix-width-btn-20 {
	width: 19%;
	margin: 0 auto;
	font-size: 1.4em;
}
.fix-width-btn-25 {
	width: 25%;
	font-size: 1.4em;
}
.fix-width-btn-30 {
	width: 30%;
	font-size: 1.4em;
}
.fix-width-20 {
	width: 20%;
}
.fix-width-30 {
	width: 30%;
}
.fix-width-100 {
	width: 100%;
}

.grey-btn {
    background-color: #D1D1D1;
    color: #383838;
    width: 100%;
	margin: 0 auto;
	font-size: 1.4em;
	text-align: left;
}

.transparent-btn {
    background-color: transparent;
    color: #383838;
    width: 100%;
	margin: 0 auto;
	font-size: 1.4em;
	text-align: left;
}

.transparent-btn-85 {
    background-color: transparent;
    color: #383838;
    width: 85%;
	margin: 0 auto;
	font-size: 1.4em;
	text-align: left;
}

.side-btn {
    width: 100%;
	margin: 0 auto;
	font-size: 1.4em;
}

.side-btn-85 {
    width: 85%;
	margin: 0 auto;
	font-size: 1.4em;
}

.side-btn-70 {
    width: 70%;
	font-size: 1.2em;
}

.hor-spacer {
	height: 1%;
}
.btn-pane-cont {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
}

.btn-pane-title {
	position: relative;
	width: 100%;
	height: 5%;
	/*margin: 0 0 0 3%;
	border: 0.2vmin solid #D8D8D8;*/
	border-radius: 0.3vmin;
	font-size: 1.3em;
	text-align:left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #3156A3; /*#B7B7B7*/
    color: #F3F3F3;
}

.btn-pane-checkbox {
	position: relative;
	width: 90%;
	height: 14%;
	top:0%;
	margin: 0 auto;
	font-size: 1.4em;
	text-align:left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #383838;
}

.drawing-tool .drawing-tool-display {
	background: #777;
	float: right;
	width: 76%;
	height: 98%;
	max-width: 100%;
	margin-top: 0.5%;
	margin-right: 1%;
	border: none;/*0.2vmin solid #3156A3;*/
	border-radius: 0.4vmin;
	box-sizing: border-box;
	background: transparent url("/anna3webservice/img/bg-folder_AI-CT-15.png") repeat scroll 0% 0%;
}
.drawing-tool .drawing-tool-canvas {
	width: 100%;
	height: 100%;
	border: 0.2vmin transparent;
	border-radius: 0.4vmin;
	box-sizing: border-box;
}
.drawing-tool .drawing-tool-button {
	position:absolute;
    left:60%;
    top:1%;
    color: #70af70;
    background: transparent;
    cursor: pointer;
}

.warning-sign {
    font-family: typicons;
    width: 4.8vmin;
    height: 4.5vmin;
    font-size: 5.0vmin;
    position: absolute;
    z-index: 1000;
    background-color: rgba(255,0,0,0.5);
    border-radius: 50%;
    text-align: center;
    line-height: 0.75;
	color: red;
}

/*************************************************************
 * Style for shot image Assign Tool
 */
 
 .assign-tool-frm {
	position: relative;
	width: 100%;
	min-height: 25%;
	height: 100%;
	display: block;
	margin: 0;
	background-image: none;
	background-color: #E8E8E8; /*#FFFFFF;*/
	border: none; /*0.2vmin solid;
	border-color: #3156A3;*/
	border-radius: 0.4vmin;
	box-sizing: border-box;
}

.assign-tool-frm-active {
	background-color: #42B3E5 !important;
}

.assign-btn-pane {
	margin: 1%;
	border: none; /* 0.2vmin solid;
	border-color: #3156A3;*/
	border-radius: 0.4vmin;
	padding: 1%;
	display: flex;
	justify-content: space-evenly;
}

.img-preview-frm {
	position: relative;
/*	width: 98%; */
/*	padding-top: calc(8% + 24px); */
	padding-top: 10%;
	margin: 1%;
	border-radius: 0.4vmin;
}

.img-preview-cont {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	text-align: center;
	border: none; /*0.2vmin solid;
	border-color: #3156A3;*/
	border-radius: 0.4vmin;
	background-color: #FFFFFF;
}

.thumb-ofrm {
	font-size: 100%;
	width: 8%;
/*	padding-top: calc(8% + 16px); + 16px account for button elements */
	padding-top: 9%;
	display: inline-block;
	white-space: nowrap;
	position: relative;
	border: 0.2vmin solid;
	border-radius: 0.4vmin;
	border-color: #3156A3;
	margin: 0.5% 0.1%;
	box-sizing: border-box;
	background: #3156A3;
	color: #FFFFFF;
}
.thumb {
	pointer-events:none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: inline-block;
	margin: 0;
	padding: 0;
	text-align: left;
	border: none;
}

.thumb-ok {
	border-color: #D0D0D0;
}
.thumb-done {
	border-color: #00FF00;
}
.thumb-warn {
	border-color: #FF0000;
}
.thumb-light {
	border-color: #5050FF;
}


.thumb .ico-btn-red {
	pointer-events: auto;
	float: right;
}

.thumb .slice-text {
	pointer-events:none;
	float: left;
	font-weight: bold;
	font-size: 100%;
	margin-left: 0.5vmin;
}

.thumb-frm {
	pointer-events:none;
	position: relative;
	width: 100%;
	padding-top: 88%;
	background-color: #303030;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	border-bottom-right-radius: 0.4vmin;
	border-bottom-left-radius: 0.4vmin;
}

.thumb-cont {
	pointer-events:none;
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.thumb-img-frm {
	pointer-events:none;
	position: absolute;
	width: 100%;
	height: 100%;
}

.thumb-img-frm img {
	pointer-events:none;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:transparent;
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: auto;
}

.display-frm-left {
	float: left;
	background-color: #303030;
	width: 48.5%;
	height: 100%;
	margin-left: 1%;
	border-radius: 0.4vmin;
}
.display-frm-right {
	float: right;
	background-color: #303030;
	width: 48.5%;
	height: 100%;
	margin-right: 1%;
	border-radius: 0.4vmin;
}

.display-frm-left-bp {
	float: left;
	background-color: #303030;
	width: 46.5%;
	height: 100%;
	margin-left: 1%;
	border-radius: 0.4vmin;
}
.display-frm-right-bp {
	float: right;
	background-color: #303030;
	width: 46.5%;
	height: 100%;
	margin-right: 1%;
	border-radius: 0.4vmin;
}

.alpha-slider-frame-bp {
	width: 5%;
	height: 100%;
	display: inline-block;
	margin: 0;
}

.alpha-buttons-frame-bp {
	width: 5%;
	height: 100%;
	border: none; /*0.1vmin solid black;*/
	display: inline-block;
	margin: 0;
}

.alpha-button {
	font-family: "typicons";
	font-size: 1em;
	font-weight: normal;
	width: 90%;
	height: 20%;
	display: block;
	margin: auto;
	background-color: #3156A3;
	border-color: #42B3E5;
	color: #FFFFFF;
	text-align: center;
	line-hight: 220%;
}

.alpha-button-dark-green {
	font-family: "typicons";
	font-size: 1em;
	font-weight: normal;
	width: 90%;
	height: 20%;
	display: block;
	margin: auto;
	background-color: #008800;
	border-color: #036903;
	color: #FFFFFF;
	text-align: center;
	line-hight: 220%;
}

.alpha-button-red {
	font-family: "typicons";
	font-size: 1em;
	font-weight: normal;
	width: 90%;
	height: 20%;
	display: block;
	margin: auto;
	background-color: #a74545;
	border-color: #8d2b2b;
	color: #FFFFFF;
	text-align: center;
	line-hight: 220%;
}

.display-frm-holder {
	position: relative;
	width: 100%;
	padding-top: 31%;
}
.display-frm-cont {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.zoom-image-frm {
	width: 95%;
	height: 95%;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: 100;
	border: 0.2vmin transparent;
	border-radius: 0.4vmin;
	background-color: #303030;
}

.zoom-image {
	height: 100%;
	pointer-events: none;
	position: absolute;
	display: block;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

/*************************************************************
 * Style for Slider custom control
 */
.slider-ctrl-hor {
	position: relative;
	width: 100%;
	height: 3vmin;
	border: 0.2vmin solid;
	border-color: #3156A3;
	border-radius: 0.4vmin;
	background-color: #FFFFFF;
	
	/* don't change below */
	display: inline-block;
	padding: 0;
}
.slider-ctrl-ver {
	position: relative;
	height: 100%;
	width: 50%;
	border: 0.2vmin solid;
	border-color: #3156A3;
	border-radius: 0.4vmin;
	background-color: #FFFFFF;
	margin: auto;
	
	/* don't change below */
	display: block;
	padding: 0;
}

.slider-ctrl-hor .slider-btn {
	width: 6%;
	height: 86%;
	color: #FFFFFF;
	border: 0.2vmin solid;
	border-color: #42B3E5;
	border-radius: 0.4vmin;
	background-color: #3156A3;
}
.slider-ctrl-ver .slider-btn {
	height: 6%;
	width: 86%;
	color: #707070;
	border: 0.2vmin solid;
	border-color: #42B3E5;
	border-radius: 0.4vmin;
	background-color: #3156A3;
}
.slider-ctrl-hor .slider-btn::focus,
.slider-ctrl-ver .slider-btn::focus {
	background-color: #42B3E5;
}

.slider-ctrl-hor .slide-line {
	width: 90%;
	height: 0.2vmin;
	background-color: #3156A3;

	/* don't change below */
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: auto;
}
.slider-ctrl-ver .slide-line {
	height: 90%;
	width: 0.2vmin;
	background-color: #3156A3;

	/* don't change below */
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: auto;
}


/*****************************************************************
 *	Style for sliding checkbox
 */
.sliding-select {
	width: 8vmin;
	height: 2.6vmin;
	background: #333;
	margin: 0 auto;

	border-radius: 0.4vmin;
	position: relative;

/*	-webkit-box-shadow: inset 0 0.1vmin 0.1vmin rgba(0,0,0,0.5), 0 0.1vmin 0 rgba(255,255,255,0.2);
	-moz-box-shadow: inset 0 0.1vmin 0.1vmin rgba(0,0,0,0.5), 0 0.1vmin 0 rgba(255,255,255,0.2);
	box-shadow: inset 0 0.1vmin 0.1vmin rgba(0,0,0,0.5), 0 0.1vmin 0 rgba(255,255,255,0.2);
*/
}

.sliding-select:after {
	content: 'OFF';
	font: 1.2vmin/2.6vmin Arial, sans-serif;
	color: #bf0000;
	position: absolute;
	right: 1vmin;
	z-index: 0;
	font-weight: bold;
	text-shadow: 0.1vmin 0.1vmin 0.1vmin rgba(255,255,255,.15);
}

.sliding-select:before {
	content: 'ON';
	font: 1.2vmin/2.6vmin Arial, sans-serif;
	color: #00bf00;
	position: absolute;
	left: 1vmin;
	z-index: 0;
	font-weight: bold;
}

.sliding-select label {
	display: block;
	width: 3.4vmin;
	height: 2.0vmin;

	border-radius: 0.4vmin;

/*	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
	-ms-transition: all .4s ease;
	transition: all .4s ease;
*/	cursor: pointer;
	position: absolute;
	top: 0.3vmin;
	left: 0.3vmin;
	z-index: 1;

	-webkit-box-shadow: 0 0.2vmin 0.5vmin 0 rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0.2vmin 0.5vmin 0 rgba(0,0,0,0.3);
	box-shadow: 0 0.2vmin 0.5vmin 0 rgba(0,0,0,0.3);
	background: #fcfff4;

/*	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
*/
}

.sliding-select input[type=checkbox]:checked + label {
	left: 4.3vmin;
}

/*****************************************************************
 * Styles for Date selector
 */
 
.dateselect-wrapper {
    display: inline-block;
    position: relative;
}

.dateselect-calendar {
/*	font-family: 'Trebuchet MS', Tahoma, Verdana, Arial, sans-serif; */
	font-size: 1.2vmin; /* 12 px */
	background-color: #F0F0F0;
	color: #000;
	border: 0.2vmin solid #E0E0E0;
	-moz-border-radius: 0.4vmin;
	-webkit-border-radius: 0.4vmin;
	border-radius: 0.4vmin;
	padding: 0.2vmin;
	display: none;
	position: absolute;
    top: 100%;
	left: 0;
	z-index: 100;
}

.open .dateselect-calendar {
    display: block;
}

.dateselect-calendar .dateselect-months,
.dateselect-calendar .dateselect-years {
	background-color: #42B3E5;
	border: 0.2vmin solid #42B3E5;
	-moz-border-radius: 0.4vmin;
	-webkit-border-radius: 0.4vmin;
	border-radius: 0.4vmin;
	color: #FFFFFF;
	padding: 0.2vmin;
	text-align: center;
    font-size: 120%;
}

.dateselect-calendar .dateselect-prev-month,
.dateselect-calendar .dateselect-next-month,
.dateselect-calendar .dateselect-prev-year,
.dateselect-calendar .dateselect-next-year,
.dateselect-calendar .dateselect-prev-10year,
.dateselect-calendar .dateselect-next-10year {
	color: #FFFFFF;
	text-decoration: none;
	padding: 0 .4em;
	-moz-border-radius: 0.4vmin;
	-webkit-border-radius: 0.4vmin;
	border-radius: 0.4vmin;
	cursor: pointer;
}

.dateselect-calendar .dateselect-prev-month,
.dateselect-calendar .dateselect-prev-year,
.dateselect-calendar .dateselect-prev-10year {
	float: left;
}

.dateselect-calendar .dateselect-next-month,
.dateselect-calendar .dateselect-next-year,
.dateselect-calendar .dateselect-next-10year {
	float: right;
}

.dateselect-calendar .dateselect-current-month {
	padding: 0 .5em;
}

.dateselect-calendar .dateselect-prev-month:hover,
.dateselect-calendar .dateselect-next-month:hover,
.dateselect-calendar .dateselect-prev-year:hover,
.dateselect-calendar .dateselect-next-year:hover,
.dateselect-calendar .dateselect-prev-10year:hover,
.dateselect-calendar .dateselect-next-10year:hover {
	background-color: #47B8F0;
	color: #FFF;
}

.dateselect-calendar table {
	border-collapse: collapse;
	padding: 0;
	width: 100%;
}

.dateselect-calendar thead {
/*    font-size: 90%; */
}

.dateselect-calendar th,
.dateselect-calendar td {
    width: 14.2%;
}

.dateselect-calendar th {
	text-align: center;
    padding: 0.5vmin;
}

.dateselect-calendar td {
	text-align: center;
	padding: 0.1vmin;
}

.dateselect-calendar .dateselect-day {
	display: block;
	color: #000;
	background-color: #CCC;
	border: 0.2vmin solid #CCC;
	padding: 0.5vmin;
	cursor: pointer;
}

.dateselect-calendar .dateselect-day:hover {
	color: #FFF;
	background-color: #42B3E5;
	border: 0.2vmin solid #42B3E5;
}

.dateselect-calendar .today .dateselect-day {
	background-color: #fff0A5;
	border: 0.2vmin solid #fed22f;
	color: #363636;
}

.dateselect-calendar .selected .dateselect-day {
	background-color: #42B3E5;
	color: #FFF;
}

.dateselect-calendar .disabled .dateselect-day,
.dateselect-calendar .disabled .dateselect-day:hover {
    background-color: #a0a0a0;
    border: 0.2vmin dotted #d0d0d0;
    color: #000;
    cursor: default;
}

.calendar-icon {
	cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 3.5vmin;
    height: 3.5vmin;
    background: url(/anna3webservice/img/calendar.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	margin-top: -15%;
}

/*****************************************************************
 *	Styles for examination main panel
 */

.exam-btn-pane {
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	height: 50%;
	border: none; /*0.2vmin solid;
	border-color: #d0d0d0;*/
	border-radius: 0.4vmin;
	background: #FFFFFF;
}

.btn-col-red {
	background-color: #FFAAAA;
}

.btn-col-green {
	background-color: #AAFFAA;
}

.btn-col-dark-red {
	background-color: #880000;
}

.btn-col-dark-green {
	background-color: #008800;
}

/*****************************************************************
 *	General styles
 */
 
 .framed-content {
	width: 100%;
	height: 100%;
 }
 
 .error {
 	color: #FF0000;
	font-size: 60%;
 }
 
 .width-50p {
 	width: 50%;
 }
 
/****************************************************************
 * Style for Home page, help page and contact page
 */
.home-content-frame {
	width: 40%;
	height: 40%;
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	border: none; /*0.2vmin solid #3156A3;*/
	border-radius: 0.4vmin;
}

.help-content-frame {
	width: 80%;
	height: 80%; /*60%;*/
	margin-top: 0.2%; /*5%;*/
	margin-left: 20%; /* auto;*/
	margin-right: auto;
	background-color: #FFFFFF;
	border: none; 0.2vmin solid #3156A3;
	border-radius: 0.4vmin;
}

.contact-content-frame {
	width: 80%;
	height: 80%;
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	border: none; /* 0.2vmin solid #3156A3;*/
	border-radius: 0.4vmin;
}


/****************************************************************
 * Status icon images
 */
  
.status0 {
/*	background-image: url("/anna3webservice/img/state0t.png");*/
	background: url("/anna3webservice/img/Status0.gif");
	background-repeat: no-repeat;
	background-position: 100% 0%;
	background-size: contain;
	width: 5%;
	float: right;
	padding: 2%;
	margin: 1%;
}
.status1 {
/*	background: url("/anna3webservice/img/state1t.png"); */
	background: url("/anna3webservice/img/Status1.png");
	background-repeat: no-repeat;
	background-position: 100% 0%;
	background-size: contain;
	width: 5%;
	float: right;
	padding: 2%;
	margin: 1%;
}
.status2 {
/*	background: url("/anna3webservice/img/state2t.png");*/
    background: url("/anna3webservice/img/Status2.gif");
	background-repeat: no-repeat;
	background-position: 100% 0%;
	background-size: contain;
	width: 5%;
	float: right;
	padding: 2%;
	margin: 1%;
}
.status4 {
/*	background-image: url("/anna3webservice/img/state4t.png");*/
	background-image: url("/anna3webservice/img/Status4.png");
	background-repeat: no-repeat;
	background-position: 100% 0%;
	background-size: contain;
	width: 5%;
	float: right;
	padding: 2%;
	margin: 1%;
}

.refresh {
	background: url("/anna3webservice/img/refresh.png");
	background-repeat: no-repeat;
	background-position: 50% 0%;
	background-size: contain;
	width: 5%;
	float: right;
	padding: 2%;
	margin: 1%;
}

.refresh-exam {
	background: url("/anna3webservice/img/refresh.png");
	background-repeat: no-repeat;
	background-size: contain;
	padding: 1.5%;
	margin-right: 1%;
}

.search-icon {
	background-image: url("/anna3webservice/img/search.png");
	background-repeat: no-repeat;
	background-size: contain;
	padding-left: 3%;
}

/***************************************************************************
 * Manager styles
 */
 
 .registered-urologists-frame {
 	margin-left: auto;
 	margin-right: auto;
 	border: none; /*0.2vmin solid;
	border-color: #d0d0d0;*/
	border-radius: 0.4vmin;
 	background: #FFFFFF;
 	width: 50%;
 	height: 74%;
	margin-top: 2%;
}

.urologist-list,
.manager-list {
 	margin-left: 5%;
 	margin-top: 2%;
 	margin-bottom: 0%;
 	width: 90%;
 	height: 92%;
 	overflow: auto;
 	border: 0.2vmin solid;
	border-color: transparent;
	border-radius: 0.4vmin;
}

.create-urologist-form,
.edit-urologist-form,
.create-manager-form {
 	margin-left: auto;
 	margin-right: auto;
 	border: none; /*0.2vmin solid;
	border-color: #d0d0d0;*/
	border-radius: 0.4vmin;
 	background: #FFFFFF;
 	width: 50%;
 	height: 65%;
	margin-top: 5%;
}

.view-urologist-form,
.view-manager-form {
 	margin-left: auto;
 	margin-right: auto;
 	border: none; /*0.2vmin solid;
	border-color: #d0d0d0;*/
	border-radius: 0.4vmin;
 	background: #FFFFFF;
 	width: 50%;
 	height: 50%;
	margin-top: 5%;
}

/***************************************************************************
 * Report input for PDF
 */

 .report-input-frame-pdf {
 	margin-left: auto;
 	margin-right: auto;
 	border: none; /* 0.2vmin solid;
	border-color: #d0d0d0;*/
	border-radius: 0.4vmin;
 	background: #FFFFFF;
 	width: 50%;
 	height: 65%;
	margin-top: 5%;
}

 .report-input-frame {
 	margin-left: 31.5%;
 	margin-right: auto;
 	border: none; /* 0.2vmin solid;
	border-color: #d0d0d0;*/
	border-radius: 0.4vmin;
 	background: #FFFFFF;
 	width: 60%;
 	height: 65%;
	margin-top: 5%;
}

.comment-area {
	box-sizing: border-box;
	resize: none;
 	margin-left: auto;
 	margin-right: auto;
 	border: 0.2vmin solid;
	border-color: #d0d0d0;
	border-radius: 0.4vmin;
 	background: #FFFFFF;
 	width: 100%;
 	height: 90%;
}

.referral-comment-area {
	box-sizing: border-box;
	resize: none;
 	margin-left: auto;
 	margin-right: auto;
 	border: 0.2vmin solid;
	border-color: #d0d0d0;
	border-radius: 0.4vmin;
 	background: #FFFFFF;
 	width: 100%;
 	height: 100%;
}

.acc-referral-comment-area {
	box-sizing: border-box;
	resize: none;
 	margin-left: auto;
 	margin-right: auto;
 	border: 0.2vmin solid;
	border-color: #d0d0d0;
	border-radius: 0.4vmin;
 	background: #FFFFFF;
 	width: 100%;
 	height: 83%;
}

.exam-comment-form {
	position: relative;
	width: 100%;
	height: 80%;
}

/***********************
 * Progress Bar
 */
.progress-bar-frame {
	background-color:rgba(0, 0, 0, 0.3);
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:10000;
/* 	background-image:url(tp.png); required by MSIE to prevent actions on lower z-index elements */
}
.progress-bar-content {
 	margin-left: auto;
 	margin-right: auto;
	width: 50%;
	height: 5%;
	color: #FFF;
	background-color: #FFF;
	border-color: #0384CE;
	border-radius: 0.4vmin;
}			
.progress-bar-title {
	box-sizing: border-box;
	width: 100%;
	height: 85%;
	background-color: #3156A3;
	font-size: 1.2em;
	text-align: center;
	border-radius: 0.4vh 0.4vh 0px 0px;
}			
.progress-bar-border {
	width: 100%;
	height: 15%;
}			
.progress-bar-bar {
	width: 0%;
	height:100%;
	border-radius: 0 0 0.4vmin 0.4vmin;
	background-color: #42B3E5;
}

/*************************************************************
 *	Style for manager reports
 */
.reporting-content-frame {
	width: 95%;
	height: 75%;
	margin-top: 1%;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	border: none; /* 0.2vmin solid #3156A3;*/
	border-radius: 0.4vmin;
}

.data-region {
 	margin: auto;
 	width: 90%;
 	height: 90%;
/* 	border: 0.2vmin solid;
	border-color: transparent;
	border-radius: 0.4vmin;
*/
}

.numero-3digit {
	text-align: right;
	padding-right: 30%
}

.date-input {
	width: 20%;
	margin-left: 5%;
	display: inline-block;
}

.ok-sign {
    font-family: typicons;
	color: green;
	text-align: center;
	width: 100%;
}
.fail-sign {
    font-family: typicons;
	color: red;
	text-align: center;
	width: 100%;
}

/**************************************************************
 * Styles for a scrollable table
 */
 
.fixed-table-container {
	width: 100%;
	height: 100%;
	border: 0.1% solid black;
	margin: 1% auto;
	background-color: white;
	/* above is decorative or flexible */
	position: relative; /* could be absolute or relative */
	padding-top: 4%; /* height of header */
}

.fixed-table-container-inner {
	overflow-x: hidden;
	overflow-y: auto;
	height: 100%;
}

.header-background {
	background-color: #D5ECFF;
	height: 10%; /* height of header */
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
}

.scroll-table {
	background-color: white;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
.scroll-table tr:nth-child(even) {
	background: #EEE;
}

.th-inner {
	position: absolute;
	top: 0;
	line-height: 2; /* height of header */
	text-align: left;
/*	border-left: 0.1% solid black; */
	padding-left: 1%;
	margin-left: -1%;
}
.first .th-inner {
	border-left: none;
	padding-left: 1%;
}

/* for hidden header hack to calculate widths of dynamic content */

.hidden-head {
	min-width: 100%; /* enough width to show all header text, or bad things happen */
}

.hidden-header .th-inner {
	position: static;
	overflow-y: hidden;
	height: 0;
	white-space: nowrap;
	padding-right: 1%;
}



/********************************************************
 * Styles for image conversion
 */

.image-conversion-frame {
	width: 75%;
	height: 68%;
	background: white;
	margin-top: 1%;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	border: 0.2vmin solid #3156A3;
	border-radius: 0.4vmin;
}

.download-link-frame {
	width: 100%;
	height: 100%;
	overflow: auto;
}

/********************************************************
 * Style for switch toogle button
 */

  .switch {
    position: absolute;
    /*top: 0;
    left: 0;*/
    width: 70%;
    height: 7%;
    text-align: center;
    margin: -1% 0 0 15%;
    background: #D8D8D8; /*conic-gradient( #00bc9c 0deg 180deg, #eb4f37 180deg 360deg);
    transition: all 0.2s ease;*/
    border-radius: 1.5vmin;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 1.4em;
  }
  input[type=radio_switch] {
    display: none;
  }
  .switch label {
    cursor: pointer;
    color: rgba(0,0,0,0.2);
    /*width: 20%;*/
    padding: 5% 5% 0% 5%;
    line-height: 100%;
    /*transition: all 0.2s ease;*/
  }
  label[for=cap_fix] {
    position: absolute;
    left: 0%;
    height: 100%;
  }
  label[for=pz_fix] {
    position: absolute;
    /*right: 0%;*/
    left: 53%;
    height: 100%;
  }
  label[for=none] {
      position: absolute;
      right: 0%;
   }

  #cap_fix:checked ~ .switch {
    background: conic-gradient( #D8D8D8 0deg 180deg, #eb4f37 180deg 360deg);
  }
  #pz_fix:checked ~ .switch {
    background: conic-gradient( #00bc9c 0deg 180deg, #D8D8D8 180deg 360deg);
  }
  #none:checked ~ .switch {
    background: #D8D8D8;
  }

  #pz_fix:checked ~ .switch span {
    background: #fff;
    margin-left: -8px;
  }
  #pz_fix:checked ~ .switch span:after {
    background: #fff;
    height: 10%;
    margin-top: -8px;
    margin-left: 8px;
  }
  #cap_fix:checked ~ .switch label[for=cap_fix] {
    color: #fff;
  }
  #pz_fix:checked ~ .switch label[for=pz_fix] {
    color: #fff;
  }
  #none:checked ~ .switch label[for=none] {
    color: rgba(0,0,0,0.2);
  }

/********************************************************
 * Style for modal window
 */

 #modal {
   position: fixed;
   font-family: typicons;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.8);
   z-index: 99999;
   height: 100%;
   width: 100%;
 }
 .modal-content {
   position: absolute;
   background: #F9F9F9;
   width: 70%;
   height: 61.8vw;
   padding: 2%;
   border-color: transparent;
   border-radius: 0.4vmin;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
 }
 .modal-content::backdrop {
   background: rgba(0, 0, 0, 0.8);
 }