/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 12.12.2016, 15:34:17
    Author     : Krzysztof Skubacz
*/

input[type=text].ng-invalid,
input[type=email].ng-invalid,
input[type=date].ng-invalid,
textarea.ng-invalid{
  border-left:solid 3px #900;
}
input[type=text].ng-valid,
input[type=email].ng-valid,
input[type=date].ng-valid,
textarea.ng-valid{
  border-left:solid 3px #090;
}

/*.noteanimation {
	transition: all linear 5s;
	max-height: 300px;
	width: 100%;
	position: relative;
	top: 0;
}

.noteanimation.ng-hide {
	height: auto;
    max-height: 0;
	top: 0;
}*/

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(2px, 2px) rotate(20deg);
  }
  20% {
    -webkit-transform: translate(-4px, -4px) rotate(-20deg);
  }
  40% {
    -webkit-transform: translate(2px, 2px) rotate(20deg);
  }
  60% {
    -webkit-transform: translate(-2px, 2px) rotate(-20deg);
  }
  80% {
    -webkit-transform: translate(4px, -4px) rotate(20deg);
  }
  100% {
    -webkit-transform: translate(-2px, 2px) rotate(-20deg);
  }
}
.shake {
  -webkit-animation-name: shake;
  -webkit-animation-duration: 0.6s;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  animation-duration: 0.6;
}

/* animate only enter and define no global noteanimation class to avoid diplay error while reentering list */
.noteanimation.ng-enter {
	transition: 1s linear all;
	-webkit-transition: 1s linear all;
	opacity: 0;
}

.noteanimation.ng-enter.ng-enter-active {
	transition: 1s linear all;
	-webkit-transition: 1s linear all;
	opacity: 1;
}

.ui-content{
	-webkit-overflow-scrolling: touch;
	/*padding: 0px !important;*/
}

md-toast.error .md-toast-content{
  background-color: red !important
}

.span-calendar .md-calendar-date-selection-indicator {
	width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
	border: 2px solid green;
}

.loading{
	display:    block;
	position:   fixed;
	z-index:    1000;
	top:        0;
	left:       0;
	height:     100%;
	width:      100%;
	background: black
		url('../lib/jquery/images/ajax-loader.gif') 
		50% 50% 
		no-repeat;
}
.ui-li-thumb.loading{
	z-index: 10;
}

#study #main-content, #study #study-search-list, #appointment-content, #releaseStudy-content, #downloaderControl-content, #userControl-content{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/* keine Zwischenräume beim Button grid */
.ui-grid-c [class*=ui-block-]>.ui-btn, .ui-grid-c [class*=ui-block-]>.ui-select,  .ui-grid-c [class*=ui-block-]>.ui-checkbox,  .ui-grid-c [class*=ui-block-]>.ui-radio,  .ui-grid-c [class*=ui-block-]>button.ui-btn-inline,  .ui-grid-c [class*=ui-block-]>button.ui-btn-icon-notext
{
	margin:0px;
}
/* eigene Icons für Buttons */

.ui-icon-qr:after {
	background-image: url("../images/qr_icon.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -20px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-1x1:after {
	background-image: url("../images/icon-layout-1x1.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -20px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-length:after {
	background-image: url("../images/icon-draw-distance.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-ellipticalRoi:after {
	background-image: url("../images/icon-draw-circle.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-angle:after {
	background-image: url("../images/icon-draw-angle.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-arrowAnnotate:after {
	background-image: url("../images/icon-draw-arrow.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-probe:after {
	background-image: url("../images/icon-draw-point.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-rectangleRoi:after {
	background-image: url("../images/icon-draw-rectange.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-cobangle:after {
	background-image: url("../images/icon-draw-cobangle.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-3dcursor:after {
	background-image: url("../images/icon-3dcursor.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-clear-painting:after {
	background-image: url("../images/icon-clear-painting.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-reset-all:after {
	background-image: url("../images/icon-reset-all.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-invert:after {
	background-image: url("../images/icon-invert.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-crosshair:after {
	background-image: url("../images/icon-3d-cursor.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-print:after {
	background-image: url("../images/icon-print.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-save:after {
	background-image: url("../images/icon-save.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-header:after {
	background-image: url("../images/icon-header.png");
	border-radius: 0px !important;
	/* Make your icon fit 
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.ui-icon-cineloop:after {
	background-image: url("../images/icon-cineloop.png");
	border-radius: 0px !important;
	/* Make your icon fit
	background-size: 20px;*/
	margin: -28px !important;
	width: 55px !important;
	height: 55px !important;
	background-size: 50px;
}
.orientationMarker{
	color: #FFD119;
	font-size: x-small;
}

.orientationMarker:first-letter {
	font-size: 1.7em;          
	text-transform: uppercase;
	letter-spacing: 5px;
}


.scrollContainer{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.no-border{
	border: none !important;
}

/* study view customer css*/
#main-content{
	
}

#official-message{	
	text-shadow: none;
}
#accesscode-message{	
	text-shadow: none;
}

hr{
	border-color: #000;
	background-color: black;
}

.viewport-button-group {
	background: black;
	border-radius: 0px 0px 10px 10px
}

/* Style for Resolution button */
.viewport-button {
	background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

/* Button Style für QR Code Button */
.fileinput-button {
  position: relative;
  overflow: hidden;
  float: left;
  margin-right: 4px;
}
.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  transform: translate(-300px, 0) scale(4);
  font-size: 23px;
  direction: ltr;
  cursor: pointer;
}

#study-search-form a{
	color: darkgrey  !important;	
}
#study-search-form a.selected{
	color: white !important;	
}

.ui-collapsible-heading-toggle {
    text-align: center !important;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  font-weight: bold;
  text-align: center !important;
}

:where([autocomplete=one-time-code]) {
  --otp-digits: 6;
  --otp-ls: 31px;
  --otp-gap: 0.95;

  /* private consts */
  --_otp-bgsz: calc(var(--otp-ls) + 11px);
  --_otp-digit: 0;

  all: unset;
  background: 
  linear-gradient(90deg, 
    var(--otp-bg, #BBB) calc(var(--otp-gap) * var(--otp-ls)),
    transparent 0),
    linear-gradient(90deg, 
    var(--otp-bg, #EEE) calc(var(--otp-gap) * var(--otp-ls)),
    transparent 0
  ) !important;
  background-position: calc(var(--_otp-digit) * var(--_otp-bgsz)) 0, 0 0;
  background-repeat: no-repeat, repeat-x;
  background-size: var(--_otp-bgsz) 100% !important;
  caret-color: var(--otp-cc, #222);
  caret-shape: block;
  clip-path: inset(0% calc(var(--otp-ls) / 1.25) 0% 0%);
  font-family: ui-monospace, monospace !important;
  font-size: var(--otp-fz, 1.4em) !important;
  inline-size: calc(var(--otp-digits) * var(--_otp-bgsz) + 1ch);
  letter-spacing: var(--otp-ls);
  padding-block: var(--otp-pb, 1ch);
  padding-inline-start: calc(((var(--otp-ls) - 1ch) / 2) * var(--otp-gap));
}

#toggle-password {
	cursor: pointer;
	height: 40px; /* Höhe anpassen */
	width: 50px; /* Breite anpassen */
}