/***
* Datei:           schreibe-wurzel.css
* Internetsite:    https://realmath.de
* Version:         2.2
* Sprache:         Cascading Style Sheets
* Autor:           Andreas Meier
* Datum:           2022-05-22
* Letzte Änderung: 2022-06-03

***/


/* wurzeln schreiben */
.wurzel {
  display: inline-block;
  vertical-align: middle;
  border-top: 1px solid;
  border-left: 1px solid;
  transform: skew(-15deg);
  transform-origin: bottom left;
  margin: 0 5px;
  position: relative;
}

.wurzel:before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 40%;
  width: 5px;
  left: -5px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: skew(30deg);
  transform-origin: bottom right;
}

.radikand {
  display: inline-block;
  padding-left: 3px;
  transform: skew(15deg);
}

/* n-te Wurzel schreiben */
.nwurzel {
    position: relative;
    font-size: 1.6em;
    vertical-align: middle;
}
.nte-wurzel {
    position: absolute;
    top: -0.333em;
    left: 0.09em;
    font-size: 45%;
}
.nradikand {
    padding: 0.25em 0.25em;
    border-top: 1px solid black;
}

/* Brueche schreiben */
div.txtgr {
  font-size: 14px;
}
div.vortx {
  float: left;
  height: 2em;
  padding: 0.75em 0 0.75em 0;
}
div.bruc {
  float: left;
  text-align: center;
}
div.zaehl {
  border-bottom: 1px solid black;
}
div.nenn {
  border-top: 0px solid black;
}

/* Brueche schreiben im Text */
/* Beispiel: <div class="fractionnew" top="5" bottom="8"></div> */

.fractionnew {
  display: inline-block;
  font-size: 1.2em;
  padding: 0 0.2em;
  text-align: center;
  vertical-align: middle;

  &:before {
    border-bottom: 1px solid #000;
    content: attr(top);
    display: block;
    line-height: 1.3em;
    padding: 0 0.2em;
  }
  &:after {
    content: attr(bottom);
    display: block;
    line-height: 1.3em;
    padding: 0 0.2em;
  }
}




/* n-te Wurzel schreiben */
.radical {
    position: relative;
    font-size: 1.6em;
    vertical-align: middle;
}
.n-root {
    position: absolute;
    top: -0.333em;
    left: 0.333em;
    font-size: 45%;
}
.radicand {
    padding: 0.25em 0.25em;
    border-top: thin black solid;
}
/* n-te Wurzel schreiben ende */

/* slider erstellen  blau*/
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 1px;
  background: #808080;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: rgb(05, 05, 200);
  border-radius: 40px;
}

.slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: rgb(05, 05, 200);
  border-radius: 40px;
  border: none;
}

/* slider erstellen ende */

/* slider -2- erstellen violett */
.slidecontainer2 {
  width: 100%;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 1px;
  background: #808080;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: rgb(90, 05, 90);
  border-radius: 40px;
}

.slider2::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: rgb(90, 05, 90);
  border-radius: 40px;
  border: none;
}

/* slider erstellen ende */