@charset "iso-8859-15";
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 23, 2015 */
@font-face {
    font-family: 'comfortaaregular';
    src: url('Comfortaa-webfont.eot');
    src: url('Comfortaa-webfont.eot?#iefix') format('embedded-opentype'),
        url('Comfortaa-webfont.woff2') format('woff2'),
        url('Comfortaa-webfont.woff') format('woff'),
        url('Comfortaa-webfont.ttf') format('truetype'),
        url('Comfortaa-webfont.svg#comfortaaregular') format('svg');
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.3em;
}

/* CSS Document */
html {
    height: 90%;
    width: 99%;
    max-height: 99%;
    /*font-family: comfortaaregular; */
}
body {
    width:99%;
    height:99%;
    font-family: Arial, Helvetica, sans-serif;

    font-size:12px;
    /*background-color:#d7e1e6;
    background-image:url(../img/bg.jpg);*/
    background-repeat:no-repeat;
    background-position:left top;
    color:#000066;
}
h4 {
    font-size: 12px;
}

/*Login Definition*/
#logindiv1 {
    position: relative;
    width: 900px;
    left: 52%;
    margin-left: -450px; /* -(width/2) */
    margin-top:30px;
    height: 450px ;
    top: 0px;
    z-index:5;
    text-align:left;
    padding: 0px;
    background-image: url(../img/login.png);
    background-repeat: no-repeat;
    /*border: solid 1px black;*/
}
#logindiv2 {
    margin: 0px;
    position: relative;
    width:400px;
    height: 30px ;
    top: 95px;
    left: 180px;
    z-index:5;
    text-align:left;
    padding: 0px;
}
#logindiv3 {
    margin: 0px;
    position: relative;
    width:400px;
    height: 30px ;
    top: 143px;
    left: 180px;
    z-index:5;
    text-align:left;
    padding: 0px;
}
#logindiv4 {
    margin: 0px;
    position: relative;
    width:200px;
    height: 50px ;
    top: 180px;
    left: 485px;
    z-index:5;
    text-align:left;
    padding: 0px;
}
#logindiv5 {
    visibility: hidden; /**/
    margin: 0px;
    position: relative;
    width:210px;
    height: 30px ;
    top: 240px;
    left: 164px;
    z-index:5;
    text-align:left;
    padding: 0px;
    border: solid 1px black;
}
#logindiv6 {
    margin: 0px;
    position: relative;
    width:300px;
    height: 30px ;
    top: -210px;
    left: 165px;
    z-index:5;
    color: #fe7c76;
    font-size: 12px;
}
.inputFiled {
    width: 300px;
    border: 0px;
    line-height: 30px;
    height: 30px;
    background-color: transparent;
}
#login {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    border: 1px;
    background: url(../img/LoginButton1.png);
    background-repeat: no-repeat;
    cursor: pointer;
}
#login:hover {
    border: none;
    background: url(../img/LoginButton2.png);
    background-repeat: no-repeat;
}
#fehlermeldung {
    position: absolute;
    top: 50px;
    left: 300px;
    width: 70%;
}
/*Form Definition*/
input {
    margin-bottom: 4px;
    color:#000066;

}
input[type="submit"] {
    font-family: Arial, Helvetica, sans-serif;
    font-weight:  bold;  
    color:#000066;
    
}
textArea, select {
    color:#000066;
}
#rand {
    border: #0349be solid 1px;
    padding: 10px;
    width: 300px;
}
form.cmxform fieldset {
    width: 650px;
    border: none;
    padding-left: 20px;
    border-top: 1px solid #2b5784;
    background-color: #eaeef5;
    border-radius: 12px 12px 0 0;
}

form.cmxform legend {
    font-size: 14px;
    font-weight: bold;
}
form.cmxform li {
    line-height: 20px;
}
form.cmxform INPUT, form.cmxform select {
    padding: 2px;

}
form.cmxform select#status {
    background: #ffffff;
    color: #000000;
}
.requiredNotice {
    width: 850px;
    border: 0px solid black;
    text-align: right;
    /*padding-left: 20px;*/
    margin-top: 5px;
}
.submitti {
    width: 120px;
    text-align: center;
    float: left;
}
.submitti2 {
    width: 120px;
    text-align: center;
    float: left;
    margin-left: 40px;
}
.submitti3 {
    width: 120px;
    text-align: center;
    float: right;
}
.submittiFest {
    left: 1000px;
    position: fixed;
    top: 250px;
}
.submittiFest2 {
    left: 1000px;
    position: fixed;
    top: 350px;
}
.submittiFest3 {
    left: 1000px;
    position: fixed;
    top: 400px;
}
.ergebnis {
    position: absolute;
    top: 200px;
    left: 180px;
}
.ergebnisS {
    position: absolute;
    top: 40px;
    right: 30px;
}
.ergebnisKunde {
    position: absolute;
    top: 200px;
    left: 180px;
}
.ergebnisRouter {
    position: absolute;
    top: 215px;
    left: 180px;
}
.ergebnisF {
    position: absolute;
    top: 200px;
    left: 180px;
    color: #ff0000;
}
.ergebnisKundeF {
    position: absolute;
    top: 200px;
    left: 180px;
    color: #ff0000;
}
.ergebnisRouterF {
    position: absolute;
    top: 215px;
    left: 180px;
    color: #ff0000;
}
.ergebnisPW {
    position: absolute;
    top: 200px;
    left: 340px;
}
.ergebnisstoer {
    position: absolute;
    top: 150px;
    left: 180px;
    text-align: center;
}
.ergebnisstoerF {
    position: absolute;
    top: 150px;
    left: 180px;
    color: #ff0000;
    text-align: center;
}
/* allgemeine */
h2 {
    text-transform: uppercase;
}
.hgwhite {
    background-color: #ffffff;/**/
}
.error {
    color: #ff0000;
    padding: 10px;
    font-size: 12px;
    border:1px solid #ff0000;
}
label.error {
    color: #ff0000;
    padding:4px 10px;
    border: 0px;
}
.arrow {
    position:absolute;
    width:7px;
    height:8px;
    margin: 4px 0 0 2px;
    background:url('../img/nav_arrow.png') no-repeat left -8px;
}
.installshowhide:hover {
    cursor: pointer;
    text-decoration: underline;
}
var {
    font-style: normal;
}
a img {
    border: 0px;
    text-decoration: none;
}
.readonly {
    background-color: #e7ebeb;

}
#big {
    font-weight: bolder;
    font-size: 14px;
}
#clean {
    float: right;
    margin-right: 20px;
    cursor: pointer;
    border: 0px;
}
#groesser {
    font-weight: bolder;
}

#clean:hover {
    /*border: 1px #a5a3c0 solid;*/
    border-top: 1px #a5a3c0 solid;
    border-right: 1px #a5a3c0 solid;
    border-left: 1px #a5a3c0 solid;
}
.tooltip1 {
    position: relative;
    text-decoration: none;
}
.tooltip1:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    padding: 2px 15px;
    opacity: 0;
    white-space: nowrap;
    background: #eaeef5;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.tooltip1:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0%;
    left: 50%;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.tooltip1:hover:after {
    bottom: 100%;
}
.tooltip1:hover:before {
    bottom: 70%;
}
.tooltip1:hover:after, .tooltip1:hover:before {
    opacity: 1;
}
/*label weite zuweisen*/
#labelstyle {
    display: inline-block;
    width: 250px;
}
#hideSearch:hover {
    text-decoration: underline;
}
#labelstyle2 {
    display: inline-block;
    width: 110px;
}
/*input Felder breite*/
input[type="text"]{
    width: 300px;
}
input[type="email"]{
    width: 300px;
}
input[type="number"]{
    width: 300px;
}

input.paginate_input {
    width: 100px;
}
/* select option wurde auf Weite 305 festgelegt jetzt genauso gross wie input feld */
.selectklein{
    width: 305px;
}
#example_paginate > .paginate_input {
    width: 100px;
}
/* buttons fuer individuelle Mail */
input[type="button"]#button{
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: scale(1.25);
    margin: 5px 5px;
    width: 20px;
    height: 20px; 
    line-height: 1.00;
    font-size: 10px;
    text-align: center;
    padding: 0;
    color: #2B5784;

    border-radius: 100px;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e3e3e3));
    background-image: -moz-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e3e3e3));
    cursor: pointer;

    &.active {
        color: #2B5784;
        cursor: pointer;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e3e3), color-stop(100%,#f4f4f4));
        background-image: -moz-gradient(linear, left top, left bottom, color-stop(0%,#e3e3e3), color-stop(100%,#f4f4f4));
    }
}
/* button individuell */
input[type="button"]#addButton{
    display: inline-block;
    vertical-align: middle;
    margin: 15px 0px;
    width: auto;
    height: auto;
    line-height: 1.00;
    font-size: 14px;
    text-align: center;
    padding: .5em;
    color: #2B5784;

    text-decoration: none;
    cursor: pointer;

    &.active {
        color: #2B5784;
        cursor: pointer;
    }
}
/* Horizontale Linie */
hr {color: #000066;}
/* suchen in Sperrliste Formatierung Button */
#sperrsuche {
    float: right;
    cursor: pointer;
}
#sperrerg {
    display: block;
    float: right;
    padding: 5px;
    border: 1px solid black;
    margin-bottom: 10px;
}
/* image als Button sichtbar machen wenn man mit der Maus drueber faehrt */
#imagebutton {
    -webkit-animation: penmove 3s infinite linear;
    -moz-animation: penmove 3s infinite linear;
    -o-animation: penmove 3s infinite linear;
    animation: penmove 3s infinite linear;

}
/* externe Stoereingabe textarea soll genauso gross sein wie das normale input-Feld */
.extarea {
    width: 300px;
    height: 35px;
}

/* DataTables Formatierung*/
#example tr.odd.row_selected {
    background-color: #b0b0b0;
    color: black;
}
#example tr.even.row_selected {
    background-color: #b0b0b0;
    color: black;
}
/*th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
    display: none;
}*/
#abschneiden {
    white-space: nowrap;
}
#showGruppen {
    width: 500px;
    border: 1px solid #a5a3c0;
}
#showGruppen  fieldset {
    border: none;
    padding-left: 20px;
    border-top: 1px solid #2b5784;
    background-color: #eaeef5;
}



#kartenVerbrauch {
    width: 100%;
    /*margin: 0 auto;
    clear: both;
    border-collapse: separate;
    border-spacing: 0;*/
}
#kartenVerbrauch thead th,
#kartenVerbrauch tfoot th {
    font-weight: bold;
}
#kartenVerbrauch thead th,
#kartenVerbrauch thead td {
    padding: 10px 18px;
    border-bottom: 1px solid #2b5784;
}

#kartenVerbrauch tbody th,
#kartenVerbrauch tbody td {
    padding: 8px 10px;
}
#kartenVerbrauch.row-border tbody th, #kartenVerbrauch.row-border tbody td, #kartenVerbrauch tbody th {
    border-top: 1px solid #ddd;
}
#kartenVerbrauch tbody th,
#kartenVerbrauch tbody td {
    padding: 4px;
    text-align: left;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
#underline {
    padding: 10px 18px;
    border-bottom: 1px solid #2b5784;
}
#m2mstatistik {
    width: 650px;
    border: none;
    padding-left: 20px;
    margin-left: 43px;
    margin-top: 32px;
    border-top: 1px solid #2b5784;
    background-color: #eaeef5;
    border-radius: 12px 12px 0 0;
}
#m2mstatistik legend {
    font-size: 14px;
    font-weight: bold;
}

/* kbestellm2mA Formatierung der 3Divs damit sie rechts orientiert bleiben,
aber der Text links untereinander bleibt */
.gruppenzuordnen {
    width: 400px;
    clear: both;
    float: right;
    text-align: left;
    margin-right: -50px;
}
/*pfeil, damit man bemerkt,dass das Volumen unten angezeigt wird */
#pfeil {
    margin-right: 170px;
    display: flex;
    margin: 0 auto;
}

/* cbestellbearbeiten Pfeile zum Springen von oben nach unten */
.pfeil {
    float: right;
    left: 1148px;
    top: 10px;
}
#ende {
    float: right;
    left: 1148px;
    top: 10px;
}
.fest {
    left: 1100px;
    position: fixed;
    top: 10px;
}
.festsave {
    left: 1000px;
    position: fixed;
    top: 250px;
}
li.mail2:hover {    
    background-color: #ffffcc;
}
/*cookie Darstellung */
#eu_cookiebox {
    display: block;
    z-index: 100;
    position: fixed;
    bottom: 0px;
    width: 100%;
    left: 0px;
    right: 0px;
    min-height: 30px;
    padding: 5px;
    font-size: 13px;
    font-weight: bold;
    color: #555;
    background: #fff;

    box-shadow: 0px 0px 5px 0px grey;
    text-align: center;


}
.cookieText {
    padding-left: 100px;
    margin-right: 20px;
}
.cookieOK {
    margin-right: 50px;
}


/*Typing Loader*/
.typing_loader{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 2s linear infinite alternate;
    -moz-animation: Typing 2s linear infinite alternate;
    -ms-animation: Typing 2s linear infinite alternate;
    animation: typing 2s linear infinite alternate;
    margin: 12px ; /* Not necessary- its only for layouting*/
    position: relative;
    left: -12px;
}
@-webkit-keyframes typing{
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(43,84,132,0.2),
            24px 0px 0px 0px rgba(43,84,132,0.2);
    }
    25%{
        background-color: rgba(43,84,132, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(43,84,132,2),
            24px 0px 0px 0px rgba(43,84,132,0.2);
    }
    75%{ background-color: rgba(43,84,132, 0.4);
         box-shadow: 12px 0px 0px 0px rgba(43,84,132,0.2),
             24px 0px 0px 0px rgba(43,84,132,1);
    }
}

@-moz-keyframes typing {
    0,% {
        background-color: rgba(43,84,132, 1);
        box-shadow: 12px 0px 0px 0px rgba(43,84,132,0.2),
            24px 0px 0px 0px rgba(43,84,132,0.2);
    }
    25% {
        background-color: rgba(43,84,132, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(43,84,132,2),
            24px 0px 0px 0px rgba(43,84,132,0.2);
    }
    75% { background-color: rgba(43,84,132, 0.4);
          box-shadow: 12px 0px 0px 0px rgba(43,84,132,0.2),
              24px 0px 0px 0px rgba(43,84,132,1);
    }
}

@keyframes typing{
    0%{
        background-color: rgba(43,84,132, 1);
        box-shadow: 12px 0px 0px 0px rgba(43,84,132,0.2),
            24px 0px 0px 0px rgba(43,84,132,0.2);
    }
    25%{
        background-color: rgba(43,84,132, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(43,84,132,2),
            24px 0px 0px 0px rgba(43,84,132,0.2);
    }
    75%{ background-color: rgba(43,84,132, 0.4);
         box-shadow: 12px 0px 0px 0px rgba(43,84,132,0.2),
             24px 0px 0px 0px rgba(43,84,132,1);
    }
}

@keyframes penmove {
    //from { transform:rotate(0deg);}
    //to { transform:rotate(359deg);}
    0%  {  transform:rotate(0deg);}
    50% { transform:rotate(90deg);}
    100% { transform:rotate(0deg); }
}
@-webkit-keyframes penmove {
    0%  { -webkit-transform:rotate(0deg); }
    50% { -webkit-transform:rotate(90deg);}
    100% { -webkit-transform:rotate(0deg); }
}
@-ms-keyframes penmove {
    0%  { -ms-transform:rotate(0deg); }
    50% { -ms-transform:rotate(90deg);}
    100% { -ms-transform:rotate(0deg);}
}

/* darstellen von kleine divs in Farbe, bei den Stoerungen abarbeiten*/
.square-box{
    position: relative;
    width: 17px;
    height: 17px;
    overflow: hidden;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}
.square-content div {
    display: table;
    width: 100%;
    height: 100%;
}
.square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: black;
}
.d {
    background: lightgreen;
}
.i1 {
    background: lightblue;
}
.i2 {
    background: #ebc9f7;
}
.se {
    background: lightpink;
}
.scccpInfo {
    color: #000000;
    background-color: rgb(236,255,0);
}

/* CORONA Banner */
.corona {
    display: block;
    position: absolute;
    background: white;
    border: 1px solid red;
    
    width: 400px;
    text-align: left;
    /*padding-left: 20px;*/
    margin-top: 30px;
    margin-left: 400px;
    padding: 5px;
    z-index: 101;
    
}

/* Ende CORONA Banner */

/* Info Banner bei Anmeldung */
.infobanner {
    width: 200px;
    clear: both;
    float: right;
    text-align: center;
    margin-right: 20px;
    margin-top: 15px;
    padding: 0.9em;
    position: relative;
    border-top: 2px solid #2b5784;
    /*border-bottom: 1px solid #2b5784;*/
    box-shadow: 5px 5px 10px  #ddd;
    font-size: 14px;
}


@media only screen and (max-width: 767px){
    .infobanner{ width: 250px; }
}
/* Info Banner bei Bestellung FTTH */
.infobanner2 {
    width: 400px;
    clear: both;
    float: right;
    text-align: center;
    margin-right: 20px;
    margin-top: 15px;
    padding: 0.9em;
    position: relative;
    border-top: 4px solid #b71c1c;
    border-left: 1px solid #b71c1c;
    border-right: 1px solid #b71c1c;
    border-bottom: 1px solid #b71c1c;
    box-shadow: 5px 5px 10px  #ddd;
    font-size: 14px;
}
/* Ende Info Banner */

/* CC SC Info */
#cc_popup {
    width: 70%;
    background: white;
    box-shadow: 1px 1px 5px grey;
    border-radius: 3px;
    border: 1px grey solid;
    padding: 5px 10px 5px 10px;
    margin-top: 5px;
}
#cc_text {
    width: 300px;
}
#sc_popup {
    width: 70%;
    background: white;
    box-shadow: 1px 1px 5px grey;
    border-radius: 3px;
    border: 1px grey solid;
    padding: 5px 10px 5px 10px;
    margin-top: 5px;
}
#sc_text {
    width: 300px;
}
/*popup fenster mir featherlight*/
#scccp_iframe {
    padding: 5px 10px 5px 10px;
    width: 90%;
}

/*Darstellung der Services bei den Stoerungen*/

.scccp {
    background: pink;
    border:1px red dotted;
    float: left;
}

.red {
    color: red;
}

.btn-my-normal{background-color:#fff;color: #2b5784;border:1px solid #2b5784; }
.btn-my-normal:hover{background-color:#ddd;color: #2b5784;border:1px solid #2b5784;}
.btn-my-update{background-color:#fff;color: #2b5784;border:1px solid #2b5784; }
.btn-my-update:hover{background-color:#ddd;color: #2b5784;border:1px solid #2b5784;}
.btn-my-loesch{background-color:#fff;color: #2b5784;border:1px solid #ff0000; }
.btn-my-loesch:hover{background-color:#ddd;color: #2b5784;border:1px solid #ff0000;}
.schrift{font-size: 12px; font-style: normal;font-weight: normal;  }
input[type="submit"].schrift{font-size: 12px; font-style: normal;font-weight: normal; }

/*Firmennamen aendern divs ausrichten wie bei einer Tabelle*/
.spalte1 {
    float: left;
    width: 32%;
    margin-right: 2%;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0px;

}
.spalte2 {
    float: left;
    width: 32%;
    margin-right: 2%;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}