@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@import url('icons.css');


@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'),
    url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(../fonts/MaterialIcons-Regular.woff) format('woff'),
    url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

@font-face {
  font-family: 'Framework7 Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Framework7Icons-Regular.woff2') format('woff2'),
    url('../fonts/Framework7Icons-Regular.woff') format('woff'),
    url('../fonts/Framework7Icons-Regular.ttf') format('truetype');
}

.f7-icons {
  font-family: 'Framework7 Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 28px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: 'liga';
  -moz-font-feature-settings: 'liga=1';
  -moz-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  text-align: center;
}

/*colors*/

.info-text-color{
	color:#696969!important;
}

/*icons*/
.info-card .card-header {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: start;
    position: relative;
}


.swipe-handler:after {
    content: '';
    width: 36px;
    height: 6px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -18px;
    margin-top: -3px;
    border-radius: 3px;
    background: #666;
}

.ios .icon-back {
    left: -2px!important;
}

/*swipeouts*/
.ios .swipeout-actions-right a{
	height:calc(100% - 12px)!important;
}
.ios .swipeout-actions-right a.swipeout-close {
	min-width: 100px; 
	text-align: center;
	width:auto!important;
}

.ios .swipeout-active .swipeout-content, 
.ios .swipeout-opened .swipeout-content {
	background-color:var(--f7-list-strong-bg-color)!important;
}
.ios .swipeout-active,
.ios .swipeout-opened {
	background-color:var(--f7-swipeout-active-bg-color)!important;
}
.ios {
    --f7-swipeout-button-border-radius: 14px;
}

/*texteditor*/
.text-editor-card{
	overflow: hidden;
}
.text-editor-card .text-editor {
	border:unset;
	margin:0;
}

.text-editor-card button.text-editor-button {
    width: auto!important;
    min-width: var(--f7-text-editor-button-size)!important;
}
.text-editor-card button.text-editor-button{
	border: 1px solid #eee;
	padding: 4px;
	font-weight: bold;
	border-radius: 8px;
}


	/* CSS Klassen für die App-Steuerung */
	html.hideinfotext .info-card{
		display: none !important;
	}

	html.monochrom {
		filter: grayscale(100%);
	}
	
	/* Verhindert das Markieren von Texten und Bildern in der gesamten App */
*,
*::before,
*::after {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Standard */
    -webkit-touch-callout: none; /* Verhindert das Kontextmenü bei langem Drücken auf iOS */
	-webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
}
a {
    -webkit-touch-callout: none; /* Verhindert das Kontextmenü */
}

input,
textarea,
select,
.selectable,
[contenteditable],
[contenteditable] * {
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.page-content {
    width: calc(100vw + 20px) !important;
    padding-right: 20px !important;
}