@charset "utf-8";
/** Signature
 * ##########################################################################################################
 *
 * ########## Handcrafted with passion by
 * ##########
 * ########## TRANS IDENT LINE GmbH
 * ########## Kaiser-Friedrich-Promenade 17
 * ########## 61348 Bad Homburg vor der Höhe
 *
 *
 *
 * ########## tymi
 * ##########
 * ########## author       vls
 * ########## editor       vls
 * ########## update       17.08.2017
 *
 * ##########################################################################################################
 */


* { margin: 0; padding: 0; outline: 0 none; border: 0 none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }




html {
    min-height: 100%;
    overflow: hidden;
}


body {
    position: relative;
    min-height: 100%;
    background-color: #164244;
    font-family: "Roboto Condensed", sans-serif;
    color: white;
}


div#wrapper_main {
    position: relative;
    width: 218px;
    height: 376px;
    margin: 0px auto;
}


div.top {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 254px;
    background-color: #191d24;
}


div.bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 122px;
    background-color: #cccccc;
}





/**
 * ##########################################################################################################
 * ########## Timer
 */


div#wrapper_timer {
    position: absolute;
    top: 193px;
    left: 48px;
    width: 119px;
    height: 119px;
}


div#timer_base {
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    width: 117px;
    height: 117px;
    border-radius: 50%;
    background-color: #13181c;
}


div#timer_pointer {
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 2;
    width: 117px;
    height: 117px;
    border-radius: 50%;
    background-color: #cccccc;
    background-image: linear-gradient(120deg, transparent 50%, #13181c 50%), linear-gradient(60deg, #13181c 50%, transparent 50%);
}


div#timer_pointer.run {
    background-color: #8c2a2a;
    animation: timer_run 60s linear infinite;
}


@keyframes timer_run {
  to {
    transform: rotate(360deg);
  }
}


div#timer_inner {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background-image: linear-gradient(to bottom right, #2e8299 0%, #17414c 100%);
    background-color: #276c80;
}


div#laufzeit {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 4;
    width: 119px;
    height: 119px;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    font-size: 36px;
    line-height: 119px;
}


div#sekunden {
    position: absolute;
    top: 81px;
    left: 0px;
    z-index: 4;
    width: 119px;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    font-size: 14px;
    color: #cccccc;
}


div#timer_outer {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
    width: 119px;
    height: 119px;
    border: 2px solid #2e3238;
    border-radius: 50%;
}





/**
 * ##########################################################################################################
 * ########## Uhrzeiten
 */


div#wrapper_uhrzeit {
    position: absolute;
    left: 11px;
    top: 318px;
    width: 194px;
}


div#startzeit, div#stoppzeit {
    position: absolute;
    top: 0px;
    width: 79px;
    text-align: center;
    color: black;
    font-family: "Open Sans Condensed", sans-serif;
    font-size: 33px;
    line-height: 22px;
    letter-spacing: 2px;
}


div#startzeit {
    left: 1px;
}

div#stoppzeit {
    right: -1px;
}


img#bis {
    position: absolute;
    left: 87px;
    top: 2px;
    width: 20px;
}





/**
 * ##########################################################################################################
 * ########## Buttons zum Verstellen der Zeit
 */


div#manipulatoren_start {
    position: absolute;
    left: 0px;
    top: 30px;
    width: 79px;
}

div#manipulatoren_stopp {
    position: absolute;
    right: 0px;
    top: 30px;
    width: 79px;
}


div.manipulator {
    position: absolute;
    width: 40px;
    height: 15px;
    font-size: 13px;
    line-height: 15px;
    text-align: center;
    background-color: #2e3642;
    border-radius: 3px 0px 0px 3px;
    cursor: pointer;

   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
    user-select: none;
}


div#button_start_plus, div#button_stopp_plus {
    right: 0px;
    transform: rotate(180deg);
}

div#button_start_minus, div#button_stopp_minus {
    left: 0px;
    border-right: 1px solid #191d24;
}






/**
 * ##########################################################################################################
 * ########## Runde Buttons groß: Start, Stopp, etc.
 */


div.button_rund_gross {
    position: absolute;
    top: 215px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-image: url(/images/buttons.png);
    background-size: 240px;
    background-color: #2e3642;
    cursor: pointer;
}


div.button_rund_rechts {
    left: 172px;
}

div.button_rund_links {
    left: 18px;
}


div#button_start {
    background-position: 0px 0px;
}

div#button_stopp {
    background-position: -24px 0px;
}

div#button_update, div#button_speichern {
    background-position: -72px 0px;
    display: none;
}






/**
 * ##########################################################################################################
 * ########## Update-Button Shadow Animation
 */


div#button_update:after {
    position: absolute;
    content: '';
    height: 26px;
    width: 26px;
    top: -1px;
    left: -1px;
    border-radius: 50%;
 
   -moz-box-shadow: 0px -7px 20px #2a8bd7;
   -webkit-box-shadow: 0px -7px 20px #2a8bd7;
    box-shadow: 0px -7px 20px #2a8bd7;
  
    animation: glow_grow 3s ease-out infinite;
}


@keyframes glow_grow {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}





/**
 * ##########################################################################################################
 * ########## Runde Buttons klein: Reset, Logout
 */


div#button_reload, div#button_logout {
    position: absolute;
    top: 19px;
    left: 51px;
    z-index: 6;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-size: 240px;
    background-image: url(/images/buttons.png);
    background-color: #28505e;
    cursor: pointer;
}


div#button_reload {
    background-position: -123px -4px;
}


div#button_logout {
    background-position: -99px -4px;
}





/**
 * ##########################################################################################################
 * ########## Runde Buttons mini: Settings, Help
 */


 div#button_settings, div#button_help {
    position: absolute;
    top: 20px;
    z-index: 6;
    width: 24px;
    height: 24px;
    background-size: 240px;
    background-image: url(/images/buttons.png);
    cursor: pointer;
}


div#button_settings {
    left: 30px;
    background-position: -192px 0px;
}


div#button_help {
    left: 68px;
    background-position: -168px 0px;
}





/**
 * ##########################################################################################################
 * ########## Selects
 */


select {
    width: 194px;
    height: 28px;
    padding-left: 3px;
    border: 1px solid #353c46;
    color: #bbbbbb;
    background-color: #191d24;
    font-family: inherit;
    font-size: 14px;

   -webkit-appearance: none;
   -moz-appearance: none;
}


select#kundenliste, select#projektliste {
    position: absolute;
    left: 11px;
}


select#kundenliste {
    top: 10px;
}

select#projektliste {
    top: 43px;
}





/**
 * ##########################################################################################################
 * ########## Tätigkeit und Meldung
 */


textarea#taetigkeit {
    position: absolute;
    top: 88px;
    left: 11px;
    width: 194px;
    height: 100px;
    font-size: 14px;
    line-height: 19px;
    background-color: transparent;
    color: #bbbbbb;
    font-family: inherit;
    resize: none;
    overflow: hidden;
}


textarea#taetigkeit:hover {
    overflow: auto;
}


div#meldung {
    position: absolute;
    top: 88px;
    left: 11px;
    width: 194px;
    height: 100px;
    font-size: 14px;
    line-height: 19px;
    background-color: #191d24;
    color: #2a8bd7;
    display: none;
}





/**
 * ##########################################################################################################
 * ########## Login
 */


div#loginscreen {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 218px;
    height: 376px;
    z-index: 7;
    background-color: #191d24;
}


.login {
    display: block;
    width: 135px;
    height: 33px;
    margin: 0px auto 5px;
    text-align: center;
    font: inherit;
    font-size: 14px;
    line-height: 34px;
    background-color: #14171d;
    border: 1px solid #2a8bd7;
    border-radius: 4px;
    color: white;
}


button#login_submit {
    margin-top: 10px;
    color: black;
    border: 0px;
    background-color: #cccccc;
    cursor: pointer;
}



img#splash {
    width: 218px;
    height: 222px;
}





/**
 * ##########################################################################################################
 * ########## Helpscreen
 */


div#helpscreen {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 218px;
    height: 376px;
    z-index: 8;
    background-color: #cccccc;
    cursor: pointer;
    display: none; 
}





/**
 * ##########################################################################################################
 * ########## Diverse
 */


.hyphens {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
    hyphens: auto;
}