/*only screen and (max-device-heigth: 480px) {
    elementbox {min-height: 400px;}
} 
only screen and (max-device-heigth: 480px) {
    form {min-height: 400px;}
} */

body, html {
    margin: 0;
    padding: 0;
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    background-color: #242424;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

h1{
    width: 80%; 
    font-size: 20pt; 
    margin: 5px 0 0px 14px; 
}


.container {
        display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-width: 320px;
    width: 100%;    
    max-height: 460px; 
    margin-bottom: 0;
    margin-left: auto; 
    margin-right: auto; 
    /*position:absolute;*/
    top:0;
    /*left:50%;*/
    z-index: 1;
    margin-bottom: 0;
    margin-left: auto; 
    margin-right: auto; 
    text-align: center;
    background: url('../img/Hintergrundbild_APP.png') no-repeat center center;
    /*background-size: cover;*/
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    background-size: cover;
}

.icon {
    position: absolute;
    top: 50%;
    left: 14%;
    transform: translateY(-50%);
    width: 17px; /* Größe des Icons */
    height: 20px;
    filter: brightness(2) contrast(2); /* Nur Helligkeit und Kontrast des Icons anpassen */
}

.header {
    display: flex;
        margin: 0;
    
    align-items: center; /* Zentriert das Logo vertikal */
    width: 320px;      
    height: 120px;/*94px; new header*/
    margin-left: auto;
    margin-right: auto;
    background: white;
    background-color: #404040;
    margin-bottom: 40px;
    width: 100%;
    

}

.spacer {
    flex-grow: 1; /* Nimmt den gesamten linken Platz ein */
    max-width: 20px;
}

.telebutler-logo {
    max-width: 140px;
    height: auto; /* Höhe automatisch anpassen */
    /*margin-right: 20px;  WURDE */
}
.titel_welcome {
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
        font-size: 2.5em; /* Größe anpassen, falls nötig */
    margin-top: -20px; /* Oberer Abstand verringern und zentrieren */
      
     /*margin-bottom: 22px;*/
     text-align: center;
      display: inline-block;
    max-width: 80%; /* Maximale Breite des Headers */
    font-weight: 300;
    margin-left: 32px;
}

.login-form {
    
    border-radius: 10px;
    flex: 0; /* Lässt die Höhe unverändert */
    position: relative;
    top: 22%; /* Verschiebt die Form nach unten ins obere Drittel */
    /*top: calc((100vh - 200px) /2);
    left: calc((100vw - 300px)/2);*/
    /*top: calc((50vh - 140%) / 2);*/
    
}

.login-form h1 {
    font-size: 2.5em; /* Größe anpassen, falls nötig */
    margin-top: -20px; /* Oberer Abstand verringern und zentrieren */
     /*margin-bottom: 5%;*/
     padding-right: 20px;
     text-align: center;
      display: inline-block;
    max-width: 80%; /* Maximale Breite des Headers */
    font-weight: 300;
}
.login-form .telebutler-logo {

     margin-bottom: 5%;
    padding-left: 10px;
    margin-top: 20px;

}

.input-group {
    margin-bottom: 15px;
}

.cadec-logo {
    width: 80px; /* Breite des Logos anpassen */
    height: auto; /* Höhe automatisch anpassen */
   
    
    
}

.footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    height: 70px;
    justify-content: flex-end; /* Rechte Ausrichtung */
    padding: 15px 0px;
}



@media (max-width: 950px) { /*Tablet 1200 Air -> 1400 Pro*/
    .container {
        min-width: 100vw;
        min-height: 100vh;
        background-size: cover;
    }
    .footer {
        padding: 75px 20px; /* Logo klebt nicht am Rand */
    }
    .icon {
        left: 12%
    }
    .login-form h1 {
        margin-bottom: 0%;
    }
    .login-form .telebutler-logo {
        margin-bottom: 17%;
    }
    
}


@media (max-height: 450px) { /*Tablet 1200 Air -> 1400 Pro*/
    .login-form {
        top: 10%;
    }
        .login-form h1 {
        margin-bottom: 0%;
    }
        .login-form .telebutler-logo {
        margin-bottom: 5%;
    }

    
}

@media (min-width: 1020px) {
    .login-form {
        top:22%;
        /*top: calc((50vh - 125%) / 2);*/
    }
    
    .header {
    height: 70px;/*94px; new header*/

}

.cadec-logo {
    padding-bottom: 10px;
    
}
}
@media (max-height: 361px) {
     .login-form {
        top:10%;
    }
    
    .header {
    height: 70px;/*94px; new header*/

}

.cadec-logo {
    padding-top: 4px;
    
}
}





/*input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}*/

.input-container {
    position: relative; /* Für die absolute Positionierung der Icons */
    width: 100%; /* Container-Breite festlegen */
}

input[type="text"],
input[type="password"] {
    width: 80%;
    height: 32px; /*kann gelöscht werden falls orginal besser*/
    font-size: 1em;
    padding: 10px 10px 10px 40px;
    /*padding: 10px;*/
    border: 2px solid white; /* Weißer Rahmen */
    
    border-radius: 5px;
    
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.3); /* Leicht transparente Hintergrundfarbe */
    color: #242424; /* Leicht transparente Schriftfarbe */
}

input[type="text"]::placeholder,
input[type="password"]::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Leicht transparente Platzhalterfarbe */
}

input[type="text"]:focus,
input[type="password"]:focus {
    background-color: #85CFB4; /* Hellblauer Hintergrund, wenn ausgewählt */
    outline: none; /* Entfernt den Standardrahmen bei Fokus */
}

input[type="text"]:hover,
input[type="password"]:hover {
    background-color: #85CFB4; 
    outline: none; 
}

input[type="text"]:autofill,
input[type="password"]:autofill {
        background-color: #85CFB4; /* Hellblauer Hintergrund, wenn ausgewählt */
    outline: none; /* Entfernt den Standardrahmen bei Fokus */
    -webkit-box-shadow: 0 0 0px 1000px #85CFB4 inset; /* Fix für Chrome, um Hintergrundfarbe zu überschreiben */
    transition: background-color 5000s ease-in-out 0s; /* Verzögerung, damit die Hintergrundfarbe bleibt */
}



input.username {
    background-image: url('../img/User.png');
    background-repeat: no-repeat;
    background-position: 10px center; /* Position icon to the left */
    background-size: 20px 20px; /* Adjust size of the icon */
    filter: brightness(0.5) contrast(1.5);
}

/* Style for the password input with eye icon */
input.password {
    background-image: url('../img/Key.png');
    background-repeat: no-repeat;
    background-position: 10px center; /* Position icon to the left */
    background-size: 20px 20px; /* Adjust size of the icon */
}

button {
    width: 40%;
    padding: 5px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
        font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    background-color: #85CFB4;
    color: #FFFFFF;
    cursor: pointer;
    margin-top: 12px;
}

button:hover {
    background-color: #85cfb4eb
}




.social-icons img {
    width: 30px;
    margin: 0 5px;
}

p{ 
    margin-top: 10px; 
    margin-bottom: 0; 
}

tbody{
    font-size: 12pt;
}

table {
    border-spacing: 12px;
    -webkit-border-horizontal-spacing: 12px;
    -webkit-border-vertical-spacing: 8px;
    font-weight: bold;
}

td{ 
    width: 90px; 
    height: 90px; 
    text-align: center; 
    vertical-align: top; 
    background: none; 
    color: white; 
    background-repeat: no-repeat; 
    font-size:9.5pt;
}


.toolbar{
    margin: 0;
    padding: 0;
    max-width: 400px;
    width: 100%;        
    height: 60px;/*94px; new header*/
    margin-left: auto;
    margin-right: auto;
    background: white;
    border-bottom: 1px solid #E0E0E0;
}

.logoHeader{
    float:left;
    width:80%;
}

.imgHeader{
    height: 93px;
    display: block;
    /*float: left;*/
    margin-left: 20px;
}
.spquitHeader{
font-size:24px;
line-height:94px;
margin-left:auto;
margin-right:auto;
color: #597a75;
}
.quitHeader{
    width:15%;
    height: 94px;
    float:left;
    display: flex;
}

.box1{
    width: 21%;
    height: 60px;
    margin-left: 0;
    margin-top: 0; 
    float: left;
}
.boxback{
    width: 21%;
    height: 60px;
    margin-left: 0;
    margin-top: 0; 
    float: left;
    background-image: url(../img/back_.png);
    background-repeat:no-repeat;
}

.boxedit{
    width: 21%;
    height: 60px;
    margin-left: 0;
    margin-top: 0; 
    float: left;
    background-image: url(../img/edit.png);
    background-repeat:no-repeat;
}

.box2{ 
    width: 58%;
    height: 60px; 
    float: left;
    line-height: 1.3;
}

.boxhistory{
    width: 21%;
    height: 60px;
    margin-left: 0;
    margin-top: 0; 
    float: left;
    background-image: url(../img/history.png);
    background-repeat:no-repeat;
}

.boxweather{
    width: 21%;
    height: 60px;
    margin-left: 0;
    margin-top: 0; 
    float: left;
    /*background-image: url(../img/history.png);*/
    /* background-repeat:no-repeat;*/
}
.imgWeather{
    /* width: 100%; */
    width: 94%;
    MARGIN-TOP: -7px;
    margin-left: -2px;
}

.textWeatherBox{
    width: 70px;
    height: 10px;
    margin-left: 0;
    margin-top: 0; 
    float: left;
}
.textWeather{
    color: rgb(111,111,111);
    line-height: 10px;
    height: 10px;
    width: 100%;
    font-size: 10px;
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* text-align: center; */
    display: inline;
    float: left;
    margin-top: 7px;
    padding-left: 17px;
}
.login{
    margin: 0; 
    padding: 15px 0 3px 11%;
    color: white; 
    font-size: 16pt;
}
.title1{ 
    margin-right: auto;
    margin-left: auto;
    text-align:center;
    /*width: 170px;*/
    height: 20px;
    color: rgb(111,111,111);
    padding: 0;
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 24px;
    font-weight: bold;
}
.title2{ 
    margin-right: auto;
    margin-left: auto;
    text-align:center;
    /*width: 170px;*/
    height: 20px;
    color: rgb(111,111,111);
    padding: 0;
    margin-top: 11px;
    margin-bottom: 0px;
    font-size: 14px;
}


.bild{
    margin-top: 10px; 
    margin-left: 0;
}

.row > label { 
    position: absolute; 
    margin: 0 0 0 14px; 
    line-height: 40px; 
}
.row > p { 
    position: absolute; 
    margin: 0 0 0 220px; 
    line-height: 40px; 
}
.row > p.left { 
    position: absolute; 
    margin: 0 0 0 40px; 
}
.row > p.right { 
    position: absolute; 
    margin: 0 0 0 180px; 
}

.pwait{
    margin-top: 0px; 
    margin-bottom: 0;    
}
.wait{
    margin-top: 0px; 
    margin-left: 35px; 
}

div.content { 
    /*border: 4px solid #909090;*/ 
    max-width: 400px;
    width: 100%;        
    background: #000066; 
}

div.row { 
    position: relative; 
    height: 40px; 
    background: #000066; 
}

div.bright { 
    background: #000080;
}

div.gradient { 
    background-image: -webkit-gradient(linear,left top,left bottom,from(#003),to(#009)); 
    height: 460px; 
}

div#dynamic { 
    max-width: 400px;
    width: 100%;    
    margin-left: auto; 
    margin-right:auto; 
    background: #000055; 
}
div.list { 
    max-width: 400px;
    width: 100%;    
    margin:0; 
    padding: 12px 0 12px 0px; 
    font-size: 16pt; 
    background-color: #000055; 
    border-bottom: 1px solid #E0E0E0; 
}

.link{ 
    display: block; 
    margin: -8px 0 -8px 0px; 
    padding: 7px 32px 7px 10px; 
    color: white; 
    text-decoration: none; 
    background: url(../img/arrow.png) no-repeat right center; 
}

.form { 
    max-width: 400px;
    width: 100%;    
    min-height: 508px; 
    margin-left: auto; 
    margin-right: auto;
    background: #003; 
    background-image: -webkit-gradient(linear,left top,left bottom,from(#003),to(#009));

}

input{
    display: block; 
    font-size: 16pt; 
    width: 80%; 
    padding: 0; 
    margin: 0; 
    height: 44px; 
    margin-left: auto; 
    margin-right: auto;
} 

input[type="submit"] {

    width: 60%; 
    margin-top: 40px;
} 

.anzeige{ 
    max-width: 400px;
    width: 100%;    
    height: 400px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 0px; 
    background-image: -webkit-gradient(linear,left top,left bottom,from(#003),to(#009)); 
}

.anzeigeP{ 
    padding: 150px 0 20px 0; 
    margin: 0px; 
    width: 290px;
    margin-left: auto;
    margin-right: auto;
    font-size: 2rem;
}
.anzeigePDB{ 
    padding: 10px 0 20px 0; 
    margin: 0px; 
    width: 290px;
    margin-left: auto;
    margin-right: auto;
    font-size: 2rem;
}

.loginfeld1{
    -webkit-border-radius: 10px;
}
.loginfeld2{
    -webkit-border-radius: 15px;
}

div.soll { 
    border-bottom: 1px solid #E0E0E0; 
}


.infobild { 
    max-width: 400px;
    width: 100%;    
    height: 460px; 
    margin-bottom: 0;
    margin-left: -160px; 
    position:absolute;top:0;left:50%; 
    z-index: 2;
}
.loginscreen { 
    max-width: 400px;
    width: 100%;    
    height: 460px; 
    margin-bottom: 0;
    margin-left: auto; 
    margin-right: auto; 
    /*position:absolute;*/
    top:0;
    /*left:50%;*/
    z-index: 1;
}


/** */
/*NEW ***********************************************************************************************/
/** */
/*Background*/
.backcolor{

    background: black;

    /*background: #555;
    background-image: linear-gradient(top, #ddd 0%, #555 100%);
    background-image: -o-linear-gradient(top, #ddd 0%, #555 100%);
    background-image: -moz-linear-gradient(top, #ddd 0%, #555 100%);
    background-image: -webkit-linear-gradient(top, #ddd 0%, #555 100%);
    background-image: -ms-linear-gradient(top, #ddd 0%, #555 100%);

    background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.00, #ddd),
    color-stop(1.00, #555)
);*/

}


/*grund hülle*/
.elementbox{
    max-width: 400px;
    width: 100%;    
    min-height: 508px; 
    background: #003;
    padding-top: 9px;
    margin-left: auto; 
    margin-right: auto;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#003),to(#009));
}

.El12CaseCl6,.El13CaseCl6,.El14CaseCl6,.El15CaseCl6,.El17CaseCl6,.El30CaseCl6{
    display:inline-block;
    padding: 1px 0%;
    margin: 0;
    border: 0;
    width: 100%;
    height: 84px;/*88*/
    margin-right: 0;
    margin-left: 0;
}

.El20CaseCl6{
    /*display:inline-block;*/
    padding: 1px 0%;
    margin: 0;
    border: 0;
    width: 100%;
    height: 36px;/*34*/
    margin-right: 0;
    margin-left: 0;
}
.El16CaseCl6{
    display:inline-block;
    padding: 1px 0%;
    margin: 0;
    border: 0;
    width: 100%;
    height: 142px;
    margin-right: 0;
    margin-left: 0;
}
.El10CaseCl6{
    display:inline-block;
    padding: 40px 0 0 0;
    margin: 0;
    border: 0;
    width: 100%;
    height: 54px;
    margin-right: 0;
    margin-left: 0;
}

.El12ElementCl6,.El13ElementCl6,.El30ElementCl6,.El14ElementCl6,.El10ElementCl6,.El15ElementCl6,.El16ElementCl6,.El17ElementCl6,.El20ElementCl6{
    float: left;
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;

    /*border-bottom-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;*/
}

.El12TitelCl6,.El13TitelCl6,.El30TitelCl6,.El15TitelCl6,.El16TitelCl6,.El17TitelCl6{
    text-align: left;
    float: left;
    width:100%;
    font: 20px "Helvetica Neue", Helvetica;
    text-shadow: rgba(255, 255, 255, .2) 0 1px 1px;
    color: white;
    padding-top: 0px;
    height: 34px;

    border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px 10px;
}
.El14TitelCl6{
    text-align: left;
    float: left;
    width:67%;
    font: 20px "Helvetica Neue", Helvetica;
    /*text-shadow: rgba(255, 255, 255, .2) 0 1px 1px;*/
    color: white;
    padding-top: 0px;
    height: 34px;

    border-top-left-radius: 10px 10px;
}
.El14TitelCl6{
    text-align: left;
    float: left;
    width:67%;
    font: 20px "Helvetica Neue", Helvetica;
    /*text-shadow: rgba(255, 255, 255, .2) 0 1px 1px;*/
    color: white;
    padding-top: 0px;
    height: 34px;
}
.El14Titel2Cl6 {
    text-align: center;
    float: left;
    width: 33%;
    font: 20px "Helvetica Neue", Helvetica;
    text-shadow: rgba(255, 255, 255, .2) 0 1px 1px;
    color: white;
    padding-top: 0px;
    height: 34px;
    border-top-right-radius: 10px 10px;

}
.El14TitelInfoCl6{
    text-align: left;
    float: left;
    font: 16px "Helvetica Neue", Helvetica;
    text-shadow: rgba(255, 255, 255, .2) 0 0px 0px;
    color: white;
    padding-top: 0px;
    padding-left: 10px;
}

.El12SpTitelCl6,.El13SpTitelCl6,.El30SpTitelCl6,.El14SpTitelCl6,.El15SpTitelCl6,.El16SpTitelCl6,.El17SpTitelCl6{
    line-height: 34px;
    padding-left: 14px;
}
.El14SpTitelInfoCl6{
    line-height: 34px;
    padding-left: 0px;
}

.El14SpValueCl6,.El14SpValue2Cl6{ 
    width:214px;
    font: 20px "Helvetica Neue", Helvetica;/*16*/
    /*font-weight: bold;*/
    color: white;
    padding-top: 0px;
    line-height: 34px;/*45*/
}
.El14SpValue2Cl6{
    padding-left: 6px;
}

.El12CaseButtonCl6{
    float: left;
    width: 50%;
    height: 54px;
}
.El13CaseButtonCl6,.El14CaseButtonCl6{
    float: left;
    width: 33%;
    height: 54px;
}
.El30CaseButtonCl6{
    float: left;
    width: 25%;
    height: 54px;
}
.El18CaseButtonCl6{
    float: left;
    width: 50%;
    height: 54px;
    padding-left: 25%;
}
.El10CaseButtonCl6,.El16CaseButtonCl6{
    float: left;
    width:33%;
    height: 54px;
}
.El10CaseTimeCl6{
    float: left;
    width: 66%;
    height: 54px;
}
.El10TimeCl6{
    text-align: left;
    float: left;
    width:70%;
    font: 16px "Helvetica Neue", Helvetica;
    color: white;
    padding-top: 0px;
    height: 27px;
}
.El10TimeTitleCl6{
    text-align: left;
    float: left;
    width:30%;
    font: 16px "Helvetica Neue", Helvetica;
    color: white;
    padding-top: 0px;
    height: 27px;
}
.El10SpTimeCl6{
    line-height: 27px;
    /*padding-left: 10px;*/
}
.El16CaseButton2Cl6{
    float: left;
    width: 50%;
    height: 54px;
}
.El15CaseButtonCl6{
    float: left;
    width: 100%;
    height: 54px;
}
.El17CaseButtonCl6{
    float: left;
    width: 25%;
    height: 54px;
}

.El12ButtonCl6,.El13ButtonCl6,.El30ButtonCl6,.El14ButtonCl6,.El10ButtonCl6,.El15ButtonCl6,.El16ButtonCl6,.El16Button2Cl6,.El17ButtonCl6{
    padding: 0;
    margin: 8px 5% 5px 5%;
}

.whiteButtonSmall{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    /*font-weight: bold;*/
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/whiteButtonSmall.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/whiteButton.png) 0 12 0 12;*/
}

.smallfont{
    font-size: 14px;
}

.clearButtonSmall{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    /*font-weight: bold;*/
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/clearButtonSmall.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/whiteButton.png) 0 12 0 12;*/
}

.yellowEl14ButtonCl6,.yellowEl13ButtonCl6,.yellowEl12ButtonCl6{
    text-align: center;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #fcfc64;
    /*background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FDFD53), to(#A2A239));
    background: -webkit-linear-gradient(#FDFD53, #A2A239);
    background: -moz-linear-gradient(#FDFD53, #A2A239);
    background: -ms-linear-gradient(#FDFD53, #A2A239);
    background: -o-linear-gradient(#FDFD53, #A2A239);
    background: linear-gradient(#FDFD53, #A2A239);*/

    padding: 0;
    margin: 8px 8% 5px 8%;

}
.orangeEl14ButtonCl6,.orangeEl13ButtonCl6,.orangeEl12ButtonCl6{
    text-align: center;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #E4A061;
    /*background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FDFD53), to(#A2A239));
    background: -webkit-linear-gradient(#FDFD53, #A2A239);
    background: -moz-linear-gradient(#FDFD53, #A2A239);
    background: -ms-linear-gradient(#FDFD53, #A2A239);
    background: -o-linear-gradient(#FDFD53, #A2A239);
    background: linear-gradient(#FDFD53, #A2A239);*/

    padding: 0;
    margin: 8px 8% 5px 8%;

}

.blueEl14ButtonCl6,.blueEl13ButtonCl6,.blueEl12ButtonCl6,.blueEl10ButtonCl6{
    text-align: center; 
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #89a6f7;
    /*background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4270f1), to(#081EB5));
    background: -webkit-linear-gradient(#4270f1, #081EB5);
    background: -moz-linear-gradient(#4270f1, #081EB5);
    background: -ms-linear-gradient(#4270f1, #081EB5);
    background: -o-linear-gradient(#4270f1, #081EB5);
    background: linear-gradient(#4270f1, #081EB5);*/

    padding: 0;
    margin: 8px 8% 5px 8%;

}

.clearEl14ButtonCl6{
    text-align: center;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #65676d;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#65676d), to(#242424));
    background: -webkit-linear-gradient(#65676d, #242424);
    background: -moz-linear-gradient(#65676d, #242424);
    background: -ms-linear-gradient(#65676d, #242424);
    background: -o-linear-gradient(#65676d, #242424);
    background: linear-gradient(#65676d, #242424);

    padding: 0;
    margin: 8px 8% 5px 12%;

}

.whiteEl13ButtonCl6,.whiteEl12ButtonCl6,.whiteEl10ButtonCl6{
    text-align: center;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #E4E5E7;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E4E5E7), to(#868686));
    background: -webkit-linear-gradient(#E4E5E7, #868686);
    background: -moz-linear-gradient(#E4E5E7, #868686);
    background: -ms-linear-gradient(#E4E5E7, #868686);
    background: -o-linear-gradient(#E4E5E7, #868686);
    background: linear-gradient(#E4E5E7, #868686);

    padding: 0;
    margin: 8px 8% 5px 8%;

}

.css3button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 15px 10px;
    background: -moz-linear-gradient(
        top,
        #21222e 0%,
        #000000);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#21222e),
        to(#000000));
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #382b38;
    -moz-box-shadow:
        0px 1px 3px rgba(45,50,82,0.5),
        inset 0px 0px 1px rgba(255,255,255,0.7);
    -webkit-box-shadow:
        0px 1px 3px rgba(45,50,82,0.5),
        inset 0px 0px 1px rgba(255,255,255,0.7);
    box-shadow:
        0px 1px 3px rgba(45,50,82,0.5),
        inset 0px 0px 1px rgba(255,255,255,0.7);
    text-shadow:
        0px -1px 0px rgba(000,000,000,0.4),
        0px 1px 0px rgba(255,255,255,0.3);
}

.cssbtnclass {
    font-size:16px;
    font-family:Arial;
    font-weight:normal;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #ffaa22;
    padding:9px 18px;
    text-decoration:none;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffec64), color-stop(100%, #ffab23) );
    background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
    background:-ms-linear-gradient( top, #ffec64 5%, #ffab23 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
    background-color:#ffec64;
    color:#333333;
    display:inline-block;
    -webkit-box-shadow:inset 1px 1px 0px 0px #fff6af;
    -moz-box-shadow:inset 1px 1px 0px 0px #fff6af;
    box-shadow:inset 1px 1px 0px 0px #fff6af;
}.css_btn_class:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffab23), color-stop(100%, #ffec64) );
    background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
    background:-ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
    background-color:#ffab23;
}.css_btn_class:active {
    position:relative;
    top:1px;
}


.whiteButtonLarge{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    /*font-weight: bold;*/
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/whiteButtonLarge.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/whiteButton.png) 0 12 0 12;*/
}
.whiteButtonBig{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/whiteButtonBig.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/whiteButton.png) 0 12 0 12;*/
}
.blueButton{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(img/whiteButton.png);*/
    -webkit-border-image: url(../img/blueButton.png) 0 12 0 12;
}
.redButtonLarge{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/redButtonLarge.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/redButton.png) 0 12 0 12;*/
}
.redButtonSmall{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/redButtonSmall.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/redButton.png) 0 12 0 12;*/
}
.redButtonMin{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/redButtonMin.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/redButton.png) 0 12 0 12;*/
}
.redButtonBig{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/redButtonBig.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/whiteButton.png) 0 12 0 12;*/
}
.greenButtonLarge{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /* background-image: url(../img/greenButtonLarge.png);
     background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/redButton.png) 0 12 0 12;*/
}
.greenButtonSmall,.greenButtonSmallY{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/greenButtonSmall.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/redButton.png) 0 12 0 12;*/
}
.blueButtonSmallY{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/blueButtonSmall.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/redButton.png) 0 12 0 12;*/
}
.greenButtonMin{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/greenButtonMin.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/redButton.png) 0 12 0 12;*/
}
.greenButtonBig{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/greenButtonBig.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/greenButton.png) 0 12 0 12;*/
}
.yellowButtonLarge{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/yellowButtonLarge.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/yellowButton.png) 0 12 0 12;*/
}
.yellowButtonSmall{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    /*font-weight: bold;*/
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/yellowButtonSmall.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/yellowButton.png) 0 12 0 12;*/
}
.yellowButtonBig{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/yellowButtonBig.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/yellowButton.png) 0 12 0 12;*/
}
.blueButtonLarge{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/blueButtonLarge.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/blueButton.png) 0 12 0 12;*/
}
.blueButtonSmall{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    /*background-image: url(../img/blueButtonSmall.png);
    background-repeat:no-repeat;*/
    /*-webkit-border-image: url(../img/blueButton.png) 0 12 0 12;*/
}
.blueButtonBig{
    border-width: 0 12px;
    color: black;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    text-decoration: inherit;
    text-shadow: rgba(255, 255, 255, 0.7) 0;

    background-image: url(../img/blueButtonBig.png);
    background-repeat:no-repeat;
    /*-webkit-border-image: url(../img/blueButton.png) 0 12 0 12;*/
}

/*Navigationsbar*/
.navbar{
    margin: 0;
    padding: 0;
    max-width: 400px;
    width: 100%;    
    height: 33px;
    margin-left: auto;
    margin-right: auto;
    /*background: #E0E0E0;*/
    /*border-bottom: 1px solid #E0E0E0;*/


}
.tab-nav{
    float: left;
    width: 78px;  
    height: 33px;
    border: 1px solid #000;
}

.icon-nav{
    height: 33px;
    width: 78px;
    /*background-repeat:no-repeat;*/
    text-align:center;
    color: black;
    padding: 0;
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 16px;
    font-weight: bold;

}
.icon-nav1{
    /*background-image: url(../img/back.png);*/
}
.icon-nav2{
    /*background-image: url(../img/save.png);*/
}
.icon-nav3{
    /*background-image: url(../img/setting.png);*/
}
.icon-nav4{
    /*background-image: url(../img/reset.png);*/
}

.color-nav{
    background: #E0E0E0;
    /*background-image: url(../img/reset.png);*/
    /*background-image: -webkit-gradient(linear,left top,left bottom,from(#AA8EA),to(#94B2E0));*/
    background: -moz-linear-gradient(center bottom,#FAFEFF 30%,#B2B6BD 65%);
    /*background: -webkit-gradient(linear,left bottom,left top,color-stop(0.3,#0B5CE2),color-stop(0.65,#2678FF));*/
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0.3,#FAFEFF),color-stop(0.65,#B2B6BD));
    background: -moz-linear-gradient(center bottom,#FAFEFF 30%,#B2B6BD 65%);
}
.color-nav-n{
    background: #E0E0E0;
}

.settingCaseButton {
    float: left;
    width: 70px;
    height: 54px;
}
.imgSetting {
    width: 38px;
    margin-left: 85px;
    margin-top: 7px;/*11px*/
    /*border: 1px solid rgb(111,111,111);*/
}

.El10SettingButtonCl6{
    float: left;
    width: 50%;
    height: 54px;
}
.El10CaseTimeSCl6{
    float: left;
    width: 50%;
    height: 54px;
}        


.ElCaseBack{float: left;width: 21%;height: 60px;margin-left: 0;margin-top: 0;line-height: 1.3;}
.ElCaseBackPos{margin: 14px 8% 14px 8%;}
.whiteButtonBack{color: rgb(46, 46, 46);text-shadow: 0 0px 0 #f3f3f3;}


.black{ 
    color: black;
}
.white{ 
    color: white;
}
.backblack{ 
    background: black;
}
.backdefault{ 
    background: black;
}
.backwhite{ 
    background: white;
}
.backorange{ 
    background: orange;
}
.backred{ 
    background: red;
}

.imgClButton2{
    width: 11px;
}