:root {
    /* Schwarz und Grau */
    --white: #ffffff;
    --dirtywhite: #fcfcfc;
    --almostwhite: #f9f9f9;
    --slightgrey: #f0f0f0;
    --lightgrey: #cccccc;
    --solidgrey: #aaaaaa;
    --grey: #999999;
    --darkgrey: #333333;
    --black: #000000;
  
    /* Rot */
    --lightred: #ffcccc;
    --salmon: #ff9999;
    --coral: #ff6666;
    --cardinal: #ff5080;
    --tomato: #ff3333;
    --red: #ff0000;
    --crimson: #dc143c;
    --darkred: #8b0000;
  
    /* Orange */
    --peachpuff: #ffdab9;
    --lightorange: #ffcc99;
    --darkorange: #ff8c00;
    --orange: #ffa500;
    --orangered: #ff4500;
  
    /* Gelb */
    --lightyellow: #ffffe0;
    --lemonchiffon: #fffacd;
    --lightgoldenrodyellow: #fafad2;
    --yellow: #ffff00;
    --gold: #ffd700;
    --darkgoldenrod: #b8860b;
  
    /* Grün */
    --honeydew: #f0fff0;
    --palegreen: #98fb98;
    --lightgreen: #90ee90;
    --lightteal: #c5f7f4;
    --mediumspringgreen: #00fa9a;
    --lime: #00ff00;
    --limegreen: #32cd32;
    --green: #008000;
    --darkgreen: #006400;
    --forestgreen: #228b22;
    --teal: #03C496;
  
    /* Blau */
    --aliceblue: #f0f8ff;
    --lightcyan: #e0ffff;
    --powderblue: #d7e6ec;;
    --lightblue: #add8e6;
    --skyblue: #87ceeb;
    --deepskyblue: #46b9df;
    --dodgerblue: #1e90ff;
    --cornflowerblue: #6495ed;
    --steelblue: #4682b4;
    --royalblue: #4169e1;
    --blue: #0000ff;
    --mediumblue: #0000cd;
    --deepblue: #0055CC;
    --darkblue: #00008b;
    --navy: #000080;
    --deepnavy: #00448b;
  
    /* Violett */
    --lavender: #eFedfF;
    --thistle: #d8bfd8;
    --purple: #6C63FF;
    --violet: #ee82ee;
    --orchid: #da70d6;
    --magenta: #ff00ff;
    --mediumorchid: #ba55d3;
    --darkorchid: #a95ecc;
    --darkviolet: #9400d3;
  
    /* Braun */
    --cornsilk: #fff8dc;
    --blanchedalmond: #ffebcd;
    --bisque: #ffe4c4;
    --navajowhite: #ffdead;
    --burlywood: #deb887;
    --tan: #d2b48c;
    --rosybrown: #bc8f8f;
    --sandybrown: #f4a460;
    --goldenrod: #daa520;
    --peru: #cd853f;
    --chocolate: #d2691e;
    --saddlebrown: #8b4513;
    --sienna: #a0522d;
    --brown: #a52a2a;
    --maroon: #800000;
  
    /* Pastell */
    --pastel-pink: #ffd1dc;
    --pastel-orange: #ffab91;
    --pastel-yellow: #ffebcd;
    --pastel-green: #c1e1c1;
    --pastel-blue: #aec6cf;
    --pastel-purple: #d4a5a5;
  }
  

  .whitebg{
      background: var(--white);
  }
  .bluebg{
      background: var(--shirtoo-blue);
  }
  .navybg{
      background: var(--shirtoo-navy);
  }
  .blackbg{
      background: var(--black);
  }

  .maintext{
    color: var(--text-color) !important;
  }

  .primary-text{
    color: var(--primary-color) !important;
  }
  
  .purpletext{
      color: var(--darkorchid) !important;
  }

  .deepskyblue{
    color: var(--deepskyblue) !important;
  }
  
  .lightgreen{
    color: var(--lightgreen) !important;
  }
  
  .salmon{
    color: var(--salmon) !important;
  }
 
  .solidgrey{
    color: var(--solidgrey) !important;
  }
  
  .fakelink{
      color: var(--shirtoo-blue);
      opacity: 0.9;
  }
  
  .fakelink:hover{
      opacity: 1;
      text-decoration: underline;
      cursor: pointer;
  }
  
.floatright{ 
    float:right;
}

.floatleft{
    float:left;
}

.clearboth{
    clear: both;
}

.textleft{ 
    text-align: left;
}

.textright{ 
    text-align: right;
}

.noclick:hover{
    cursor: not-allowed !important;
}

.w100{
    width: 100% !important;
}

.vmiddle{
    vertical-align: middle !important;
}

.vtop{
    vertical-align: top !important;
}

.vbottom{
    vertical-align: bottom !important;
}

.vbaseline{
    vertical-align: baseline !important;
}

.vsub{
    vertical-align: sub !important;
}

.vsuper{
    vertical-align: super !important;
}

.whitetext{
    color: #fff !important;
}

.blacktext{
    color: #333 !important;
}

.redborder{
    border: 1px solid #f30 !important;
}

.orangeborder{
    border: 1px solid #f70 !important;
}

.nowrap{
    white-space: nowrap !important;
}

.wrap{
    white-space: normal !important;
}

.uppercase{
    text-transform: uppercase;
}
.lowercase{
    text-transform: lowercase;
}
.capitalize{
    text-transform: capitalize;
}

.hoverlink:hover{
    text-decoration: underline !important;
    cursor: pointer !important;
}

.radius3{
    border-radius: 3px !important;
}

.radius5{
    border-radius: 5px !important;
}

.radius10{
    border-radius: 10px !important;
}

.radius100{
    border-radius: 100% !important;
}

.mauto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.hauto {
    height: auto !important;
    min-height: 0px  !important;
}

.wauto {
    width: auto !important;
    min-width: 0px !important;
}

.zero {
    margin: 0px !important;
    padding: 0px !important;
}
.marzero {
    margin: 0px !important;
}
.padzero {
    padding: 0px !important;
}

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

.padq {
    padding: 0.25rem !important;
}

.padh {
    padding: 0.5rem !important;
}

.pad1 {
    padding: 1rem !important;
}
.pad1q {
    padding: 1.25rem !important;
}
.pad1h {
    padding: 1.5rem !important;
}
.pad2 {
    padding: 2rem !important;
}


.marq {
    margin: 0.25rem !important;
}

.marh {
    margin: 0.5rem !important;
}

.mar1 {
    margin: 1rem !important;
}
.mar1q {
    margin: 1.25rem !important;
}
.mar1h {
    margin: 1.5rem !important;
}
.mar2 {
    margin: 2rem !important;
}


.mtsub1 {
    margin-top: -1rem !important;
}

.mtsubh {
    margin-top: -0.5rem !important;
}

.mtsubq {
    margin-top: -0.25rem !important;
}

.mtq {
    margin-top: 0.25rem !important;
}
.mth {
    margin-top: 0.5rem !important;
}
.mt1 {
    margin-top: 1rem !important;
}
.mt1q {
    margin-top: 1.25rem !important;
}
.mt1h {
    margin-top: 1.5rem !important;
}
.mt2 {
    margin-top: 2rem !important;
}
.mt3 {
    margin-top: 3rem !important;
}
.mt4 {
    margin-top: 4rem !important;
}

.mt5 {
    margin-top: 5rem !important;
}

.mlq {
    margin-left: 0.25rem !important;
}
.mlh {
    margin-left: 0.5rem !important;
}
.ml1 {
    margin-left: 1rem !important;
}
.ml1q {
    margin-left: 1.25rem !important;
}
.ml1h {
    margin-left: 1.5rem !important;
}
.ml2 {
    margin-left: 2rem !important;
}
.ml3 {
    margin-left: 3rem !important;
}
.ml4 {
    margin-left: 4rem !important;
}


.mrq {
    margin-right: 0.25rem !important;
}
.mrh {
    margin-right: 0.5rem !important;
}
.mr1 {
    margin-right: 1rem !important;
}
.mr1q {
    margin-right: 1.25rem !important;
}
.mr1h {
    margin-right: 1.5rem !important;
}
.mr2 {
    margin-right: 2rem !important;
}
.mr3 {
    margin-right: 3rem !important;
}
.mr4 {
    margin-right: 4rem !important;
}

.mbq {
    margin-bottom: 0.25rem !important;
}
.mbh {
    margin-bottom: 0.5rem !important;
}
.mb1 {
    margin-bottom: 1rem !important;
}
.mb1q {
    margin-bottom: 1.25rem !important;
}
.mb1h {
    margin-bottom: 1.5rem !important;
}
.mb2 {
    margin-bottom: 2rem !important;
}
.mb3 {
    margin-bottom: 3rem !important;
}
.mb4 {
    margin-bottom: 4rem !important;
}
.mb5 {
    margin-bottom: 5rem !important;
}

.nobg{
    background: none !important;
}

.minh1 {
    min-height: 1rem;
}
.minh2 {
    min-height: 2rem;
}
.minh3 {
    min-height: 3rem;
}
.minh4 {
    min-height: 4rem;
}
.minh5 {
    min-height: 5rem;
}

.nonselectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.fontsize6 {
    font-size: 0.6rem !important;
}

.fontsize6h {
    font-size: 0.65rem !important;
}
.fontsize7 {
    font-size: 0.7rem !important;
}
.fontsize7h {
    font-size: 0.75rem !important;
}
.fontsize8 {
    font-size: 0.8rem !important;
}
.fontsize8h {
    font-size: 0.85rem !important;
}
.fontsize9 {
    font-size: 0.9rem !important;
}
.fontsize9h {
    font-size: 0.95rem !important;
}
.fontsize10 {
    font-size: 1rem !important;
}
.fontsize10h {
    font-size: 1.05rem !important;
}
.fontsize11 {
    font-size: 1.1rem !important;
}
.fontsize11h {
    font-size: 1.15rem !important;
}
.fontsize12 {
    font-size: 1.2rem !important;
}
.fontsize12h {
    font-size: 1.25rem !important;
}
.fontsize13 {
    font-size: 1.3rem !important;
}
.fontsize14 {
    font-size: 1.4rem !important;
}
.fontsize15 {
    font-size: 1.5rem !important;
}
.fontsize16 {
    font-size: 1.6rem !important;
}

.fontsize18 {
    font-size: 1.8rem !important;
}
.fontsize20 {
    font-size: 2rem !important;
}
.fontsize22 {
    font-size: 2.2rem !important;
}
.fontsize24 {
    font-size: 2.4rem !important;
}
.fontsize25 {
    font-size: 2.5rem !important;
}
.fontsize26 {
    font-size: 2.6rem !important;
}
.fontsize28 {
    font-size: 2.8rem !important;
}
.fontsize30 {
    font-size: 3rem !important;
}
.fontsize32 {
    font-size: 3.2rem !important;
}
.fontsize34 {
    font-size: 3.4rem !important;
}
.fontsize36 {
    font-size: 3.6rem !important;
}
.fontsize38 {
    font-size: 3.8rem !important;
}
.fontsize40 {
    font-size: 4rem !important;
}

.line50{
    line-height:50% !important;
}
.line60{
    line-height:60% !important;
}
.line70{
    line-height:70% !important;
}
.line80{
    line-height:80% !important;
}
.line90{
    line-height:90% !important;
}
.line100{
    line-height:100% !important;
}
.line110{
    line-height:110% !important;
}
.line120{
    line-height:120% !important;
}
.line130{
    line-height:130% !important;
}
.line140{
    line-height:140% !important;
}
.line150{
    line-height:150% !important;
}

.opac95, .opac95H {
    opacity: 95% !important;
}

.opac90, .opac90H {
    opacity: 90% !important;
}

.opac80, .opac80H {
    opacity: 80% !important;
}

.opac70, .opac70H {
    opacity: 70% !important;
}

.opac60, .opac60H {
    opacity: 60% !important;
}

.opac50, .opac50H {
    opacity: 50% !important;
}

.opac40, .opac40H {
    opacity: 40% !important;
}

.opac30, .opac30H {
    opacity: 30% !important;
}

.opac20, .opac20H {
    opacity: 20% !important;
}

.opac10, .opac10H {
    opacity: 10% !important;
}

.opac0 {
    opacity: 0%;
}

.opac95H:hover, .opac90H:hover, .opac80H:hover, .opac70H:hover, .opac60H:hover, .opac50H:hover, .opac40H:hover, .opac30H:hover, .opac20H:hover, .opac10H:hover {
    opacity: 100% !important;
    cursor: pointer;
}

.disblock{
    display: block !important;
}

.disinlineblock{
    display: inline-block !important;
}

.distable{
    display: table !important;
}

.disinlinetable{
    display: inline-table !important;
}

.disnone{
    display: none !important;
}

.bold {
    font-weight: bold;
}

.normaltext {
    font-weight: normal;
}

.lighter {
    font-weight: lighter;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.nolink{
    text-decoration: none !important;
}

.pointer {
    cursor: pointer !important;
}

.nopointer {
    cursor: default !important;
}

.pos-rel {
    position: relative !important;
}

.pos-abs {
    position: absolute !important;
}

.pos-fix{
    position: fixed !important;
}
.pos-static{
    position: static !important;
}

.noborder{
    border: none !important;
}
.border-bottom1{
    border-bottom: 1px solid rgba(100,100,100,0.5);
}
.border-top1{
    border-top: 1px solid rgba(100,100,100,0.5);
}
.border-bottom2{
    border-bottom: 2px solidr gba(100,100,100,0.5);
}
.border-top2{
    border-top: 2px solid rgba(100,100,100,0.5);
}
.border1{
    border: 1px solid rgba(100,100,100,0.5);
}
.border2{
    border: 2px solid rgba(100,100,100,0.5);
}

.max1 {
    max-width: 1rem !important;
}
.max1q {
    max-width: 1.25rem !important;
}
.max1h {
    max-width: 1.5rem !important;
}
.max2 {
    max-width: 2rem !important;
}
.max2h {
    max-width: 2.5rem !important;
}
.max3 {
    max-width: 3rem !important;
}
.max4 {
    max-width: 4rem !important;
}
.max5 {
    max-width: 5rem !important;
}
.max6 {
    max-width: 6rem !important;
}
.max7 {
    max-width: 7rem !important;
}
.max8 {
    max-width: 8rem !important;
}
.max9 {
    max-width: 9rem !important;
}
.max10 {
    max-width: 10rem !important;
}
.max12 {
    max-width: 12rem !important;
}
.max14 {
    max-width: 14rem !important;
}
.max15 {
    max-width: 15rem !important;
}
.max16 {
    max-width: 16rem !important;
}
.max18 {
    max-width: 18rem !important;
}

.max20 {
    max-width: 20rem !important;
}

.max30 {
    max-width: 30rem !important;
}

.max40 {
    max-width: 40rem !important;
}

.max50 {
    max-width: 50rem !important;
}

.max60 {
    max-width: 60rem !important;
}

.max70 {
    max-width: 70rem !important;
}

.max80 {
    max-width: 80rem !important;
}

.max90 {
    max-width: 90rem !important;
}

.greentext{
    color: #009900 !important;
}

.tealtext{
    color: #33CC99 !important;
}

.navytext{
    color: var(--shirtoo-navy)!important;
}

.bluetext{
    color: var(--primary-color)!important;
}

.redtext{
    color: #de0000 !important;
}

.orangetext{
    color: #ff7000 !important;
}

.orangehover:hover{
    color: #ff7000 !important;
}

.blacktext{
    color: #000000 !important;
}
.graytext{
    color: #999999 !important;
}

.whitetext{
    color: #ffffff !important;
}

.shadowed{
    box-shadow: 2px 2px 5px -1px rgba(100,100,100,0.5);
}

.pos-opt{
    position: absolute;
    bottom: 0px;
    right: 0px;
}


@media (max-width: 767px) {
    .center-xs {
      text-align: center !important;
      float:none;
      clear:both;
      margin-left: auto !important;
      margin-right: auto !important;
      width: 100%;
      max-width: 45rem;
    }
    .right-xs {
      text-align: right !important;
    }

    .left-xs {
      text-align: left !important;
    }

  
  }