/*


#58bbb8
#FFAC1D

#cceed4
#eecbc2

*/


/* !Windows Phone 8 */

@-ms-viewport {
  width: 100%;
  height: device-height;
}

@viewport {
  width: 100%;
  height: device-height;
}

/* Font */

@font-face {
  font-family: notoregular;
  src: url('font/NotoSans-Regular.ttf');
}

@font-face {
  font-family: notobold;
  src: url('font/NotoSans-Bold.ttf');
}

/*********************** Native Look *******************/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -moz-touch-callout: none;
  -ms-touch-callout: none;
  touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
  -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
  outline: none !important;
}

/***** Arabisch   */
#pageContainer {
  direction: rtl;
}

/******************* inputs ********************/

input,
select {
  -webkit-user-select: auto !important;
  -khtml-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
  -webkit-appearance: none;
  border: 0;
}

input[type="password"] {
  -webkit-border-radius: 10vh;
  border-radius: 10vh;
  border: none;
  text-align: center;
}

input[type="checkbox"] {
  display:none;
}



input[type="checkbox"] + label {
}

input[type="checkbox"] + label span {
  display:inline-block;
  width:5vw;
  height:5vw;
  margin: 0vw 5vw 0 0;
  vertical-align:middle;
  background:url(images/unchecked.svg) left top no-repeat;
  cursor:pointer;
}

input[type="checkbox"]:checked + label span {
  background:url(images/checked.svg) left top no-repeat;
}



textarea {
  
  padding: 2vh;
  width: 100%;
  height: 20vh;
  /* margin: 0 2.5vh 2.5vh 2.5vh;  */
  
  resize: none;

}

input[type="text"],
textarea {
  /* allow copy-paste */
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  box-shadow: inset 0 3px 5px 0 rgba(0,0,0,0.1);
  border: 1px solid #58bbb8;
  margin-top: 2vw;
  margin-bottom: 2vw;
  border-radius: 1vh;
  background-color: rgb(250, 250, 250);
}

input[type="text"] {
  width: 100%;
  height: 5vh;
  border-radius: 10vh;
  padding-left: 5vw;
  padding-right: 10vw;
  padding-top: 2vh;
  padding-bottom: 2vh;

  background-image: url(images/textcursor.svg);
  background-repeat: no-repeat;
  background-position: 84vw center;
  background-size: auto 4vw;

}

select {
  -webkit-appearance: none; 
  -moz-appearance: none;
  appearance: none;
  background-color: rgb(250, 250, 250);

  background-image: url(images/select.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 90%;

  border-radius: 1vh;
  border: 1px solid #58bbb8;
  width: 100%;
  padding: 2vw;

  margin-top: 2vh;
}

/******************* Default ********************/

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-highlight: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
  /* For some Androids */
  width: 100%;
  height: 100%;
  font-family: notoregular;
  background-color: #fff;
  background-attachment: fixed;
  background-size: cover;
  font-size: 85%;
  color: #444;
}

h1,
h3 {
  margin: 0;
  font-size: 100%;
  font-weight: 700;
  font-family: notobold;
}

h2,
h4,
h5,
h6 {
  margin: 0;
  font-size: 100%;
  font-weight: 400;
  font-family: notobold;
}

ul,
li {
  list-style: none;
}

button {
  width: 100%;
  background-color: transparent;
  border: none;
  font-size: 100%;
  font-weight: 400;
}

.scrollable-y {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

.scrollable-x {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}


.hidden {
  display: none;
}

/************ Generale Page Setup *******************************/

nav {
  padding: 0 2vh 0 2vh;
  position: fixed;
  z-index: 99999;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

nav img {
  height: 5vh;
  min-width: 0;
}

nav .icon {
  margin-left: 2rem;
}

.cover {
  background-size: cover;
}

.required {
  border: 1px solid red !important;
}

/************ Sanadak App Styles  Grid and Global Stypes *******************************/

.color1 {
  background-color: orange;
}


.bkgr {
  background-image: url(images/san_background1.png);
  background-size: cover;
}
.bkgr_glow {
  background-image: url(images/san_background2.png);
  background-size: cover;
}


.bkgr-black {
  background-color: #000000;
}

.trees {
  background-image: url(images/san_trees.png);
  background-size: 100% auto;
  background-repeat: repeat-y;
}

/*///////////// Sanadak Typo ////////////////////////*/

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

.text-white {
  color: white;
}

.text-green {
  color: #58bbb8;

}

.text-bold {
  font-weight: 700;
}

.text-italic {
  font-style: italic;
}

.text-regular {
  font-weight: 400;
}

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

/************************** Textseiten ******************/

.content {
  background-color: #fff;
  padding: 2vw;
  /*
  -webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1);
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1);
  -webkit-border-radius: 1vh;
  border-radius: 1vh;
  */
  margin: 5vw 2vw 2vw 2vw;
}

.content.border {
  border: 0.2vh solid #6bd4a5;
  border-radius: 1vw;
}

.contentshadow {
  background-color: #fff;
  padding: 2vw;
  /* margin: 2vw; */
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1);
  border-radius: 1vw;
  min-height: 7vh;
}

.line1 {
  border-top: 0.1vh solid #6bd4a5; /*#58bbb8*/
}

.icon-logo {
  height: 100%;
  width: 100%;
  background-image: url(./images/sanadak_logo.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 40%;
}

/************************** Leaf ******************/

.leaf {
  background-image: url(./images/leaf.svg);
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-position: center center;
}


/************************** Button ******************/



.button1 {
  /* rund auf blaunen Fond */
  border: 0.5vh solid white;
  border-radius: 20vw;
  color: white;
  font-size: 150%;
}

.button2 {
  /* rund auf weißem Fond */
  border: 0.5vh solid #58bbb8;
  border-radius: 20vw;
  color: #58bbb8;
  font-size: 150%;
}

.button3 {
  /* in der Seitennavigation */
  border-bottom: 0.1vh solid #fff;
  color: #fff;
  font-size: 100%;
  text-align: left;
  font-weight: 400;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.button4 {
  /* für Link im Content mit Chevron - grün */
  border-bottom: 0.2vh solid #58bbb8;
  color: #58bbb8;
  font-size: 100%;
  text-align: right;
  background: url(images/chevron_ae_58bbb8.svg) no-repeat center left;
  background-size: auto 1rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-right: 0.5rem;
  padding-left: 1.3rem;
}

.button5 {
  /* für Link im Content mit Chevron - weiß */
  border-bottom: 0.2vh solid #ffffff;
  color: #ffffff;
  font-size: 100%;
  text-align: right;
  background: url(images/chevron_ae_fff.svg) no-repeat center left;
  background-size: auto 1rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-right: 0.5rem;
  padding-left: 1.3rem;
}

.button6 {
  /* buttons für Standard page-index */
  background-color: white;
  color: #444;
  text-align: center;
  background-repeat: no-repeat;
  width: calc(84vw/3);
  height: calc(84vw/2.5);
  padding: 2vw;
  display: table-cell;
  vertical-align: bottom;
  text-align: center;
  padding-bottom: 10px;
}

.btn-inline {
  text-decoration: underline;
  display: inline-block;
  width: auto;
}




.page.bereichsuebersicht .button6 {
  width: calc(84vw/2);
  height: calc(84vw/2);
}

.page.bereichsuebersicht .button6>img {
  height: 20vw;
  margin-bottom: 2vw;
}

.page.bereichsuebersicht .button-mini img {
  /* nur eingesetzt auf der Bereichsübersicht, damit die unteren Icons kleiner sind */
  height: 15vw;
  opacity: 0.75;
}


.button6>img {
  height: 10vw;
  margin-bottom: 2vw;
}

.button6>span {
  display: block;
}

/************************** Examplebox ******************/

.cycle-pager {
  width: 100%;
  text-align: center;
}

.exampleslider {
  background-color: #eee;
  color: #000;
  border-bottom: 1px solid #ccc;

  margin-top: 5vh;
}

.exampleslide {
  width: 100vw;
  padding: 2vh;
  padding-right: 4vh;
  padding-left: 4vh;
}

/************************** Infoslider ******************/

.infoslider {
  background-color: #eee;
  color: #000;
  border-bottom: 1px solid #ccc;

  margin-top: 5vh;
}

.infoslide {
  width: 100vw;
  padding: 2vh;
  padding-right: 4vh;
  padding-left: 4vh;
}

.infoslide .icons {
  display: flex;
  justify-content: space-between;
}

.infoslide .icon1 {
  flex: 1;
}

.infoslide .icon2 {
  flex: 1;
}

/************************** Cycle ******************/

.cycle-pager {
  font-size: 200%;
}

.cycle-pager-active {
  color: #58bbb8;
}


/************************** Radio - Input ******************/

.radio-list {
  margin: 0 2vh 2vw 2vh;
}

.radio-list .trigger {
  background-image: url(images/radio.svg);
  background-repeat: no-repeat;
  background-position: 97% center;
  background-size: auto 5vw;
  padding: 2vw 10vw 2vw 5vw;
  margin-bottom: 2vh;
  border: 0.25vw solid #ddd;
  border-radius: 5vw;
  background-color: white;
}

.radio-list .trigger.active {
  background-image: url(images/radio_checked.svg);
  background-color: #58bbb8;
  color: white;
  box-shadow: 0 3px 5px 0 rgba(0,0,0,0.1);
}

.radio-list-mini {
  display: flex;
  flex-wrap: wrap;
}
.radio-list-mini .trigger {
  min-width: 20vw;
  max-width: 20vw;
  background-position: 80% center;
  margin-left: 1.8vh;
  padding: 1.5vw 5vw 1.5vw 5vw;
  background-image: none;
  text-align: center;
}
.radio-list-mini .trigger.active {
  background-image: none;
}

.radio-list p {
  display: flex;
  justify-content: center;
  flex-direction: column;
}






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

.headline-icon {
  background-position: center top;
  background-size: auto 90%;
  background-repeat: no-repeat;
  height: 5vh;
  padding-right:5vh;
}



/************************** Baum *************************************/

.plugin_baum_output {
  background-position: center center;
  background-size: auto 80%;
  background-repeat: no-repeat;
  /* background-color: white; */
}

.plugin_baum_output.baum-0,
.plugin_baum_output.baum-1,
.plugin_baum_output.baum-2 {
  background-image: url(images/baum1.svg);
}

.plugin_baum_output.baum-3,
.plugin_baum_output.baum-4,
.plugin_baum_output.baum-5 {
  background-image: url(images/baum2.svg);
}

.plugin_baum_output.baum-6,
.plugin_baum_output.baum-7,
.plugin_baum_output.baum-8 {
  background-image: url(images/baum3.svg);
}

.plugin_baum_output.baum-9,
.plugin_baum_output.baum-10,
.plugin_baum_output.baum-11 {
  background-image: url(images/baum4.svg);
}

.plugin_baum_output.baum-12,
.plugin_baum_output.baum-13,
.plugin_baum_output.baum-14 {
  background-image: url(images/baum5.svg);
}

.plugin_baum_output.baum-15,
.plugin_baum_output.baum-16,
.plugin_baum_output.baum-17 {
  background-image: url(images/baum6.svg);
}

.plugin_baum_output.baum-18,
.plugin_baum_output.baum-19,
.plugin_baum_output.baum-20 {
  background-image: url(images/baum7.svg);
}

.plugin_baum_output.baum-21,
.plugin_baum_output.baum-22,
.plugin_baum_output.baum-23 {
  background-image: url(images/baum8.svg);
}

.plugin_baum_output.baum-24,
.plugin_baum_output.baum-25,
.plugin_baum_output.baum-26 {
  background-image: url(images/baum9.svg);
}

.plugin_baum_output.baum-27,
.plugin_baum_output.baum-28,
.plugin_baum_output.baum-29 {
  background-image: url(images/baum10.svg);
}

.plugin_baum_output.baum-30,
.plugin_baum_output.baum-31,
.plugin_baum_output.baum-32 {
  background-image: url(images/baum11.svg);
}

.plugin_baum_output.baum-33,
.plugin_baum_output.baum-34,
.plugin_baum_output.baum-35,
.plugin_baum_output.baum-36 {
  background-image: url(images/baum12.svg);
}

.plugin_baum_output.baum-37,
.plugin_baum_output.baum-38,
.plugin_baum_output.baum-39 {
  background-image: url(images/baum13.svg);
}

.plugin_baum_output.baum-40,
.plugin_baum_output.baum-41,
.plugin_baum_output.baum-42 {
  background-image: url(images/baum14.svg);
}

.plugin_baum_output.baum-43,
.plugin_baum_output.baum-44,
.plugin_baum_output.baum-45 {
  background-image: url(images/baum15.svg);
}

.plugin_baum_output.baum-46,
.plugin_baum_output.baum-47,
.plugin_baum_output.baum-48 {
  background-image: url(images/baum16.svg);
}

.plugin_baum_output.baum-49,
.plugin_baum_output.baum-50,
.plugin_baum_output.baum-51 {
  background-image: url(images/baum17.svg);
}

.plugin_baum_output.baum-full {
  background-image: url(images/baum18.svg);
}







.icon-delete {
  background-position: center center;
  background-size: 70% auto;
  background-repeat: no-repeat;
  background-image: url(images/rubbish.svg);
}

.icon-delete2 {
  background-position: center center;
  background-size: 70% auto;
  background-repeat: no-repeat;
  background-image: url(images/rubbish2.svg);
}

.button4.sticky {
  background-image: url(images/reload-arrow.svg);
}








.impressgerman {
  direction: ltr;
}