/*/  _____ __     __ _   _            __  __  _____  _______  _____
	|  __ \\ \   / /| \ | |    /\    |  \/  ||_   _||__   __||  ___|
	| |  | |\ \_/ / |  \| |   /  \   | \  / |  | |     | |   | |__
	| |  | | \   /  | . ` |  / /\ \  | |\/| |  | |     | |   |  __|
	| |__| |  | |   | |\  | / ____ \ | |  | | _| |_    | |   | |___
	|_____/   |_|   |_| \_|/_/    \_\|_|  |_||_____|   |_|   |_____| AG | ASW – www.dynamite.ch ////////////////////////////////
/*/

/*/ BASE STYLES //////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

    *,
    *:after,
    *:before {
        box-sizing: border-box;
    }

    button {
        border: 0;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
    }

    #app,
    #app .page,
    #app .logo,
    #app .body {
        top: 0;
        left: 0;
        width: 100%;
        display: block;
        position: absolute;
    }

    #app {
        height: 100%;
        color: #FFFFFF;
        font-size: 12pt;
        overflow-x: hidden;
        overflow-y: hidden;
        background: #FFFFFF;
    }

    #app .body {
        padding: 10px;
        margin-top: 70px;
        max-height: 400px;
        position: relative;
    }

    #app .logo {
        height: 70px;
        padding: 10px 10px 0;
        background: url('../svg/zdft_logo.svg') no-repeat;
        background-position: 10px 10px;
        background-size: 120px auto;
    }

    .no-svg #app .logo {
        background: url('../img/zdft_logo.png') no-repeat;
        background-position: 10px 10px;
        background-size: 120px auto;
    }

    #intro {
        background: url('../svg/zdft_logo.svg') no-repeat;
        background-position: 50% 50%;
        background-size: 160px auto;
    }

    .no-svg #intro {
        background: url('../img/zdft_logo.png') no-repeat;
        background-position: 50% 50%;
        background-size: 160px auto;
    }

/*/ PAGE STYLES //////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

    .page {
        opacity: 0;
        min-height: 100%;
        background: #4CB2D0;
        -webkit-transform: translateX(-100%);
           -moz-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
             -o-transform: translateX(-100%);
                transform: translateX(-100%);
    }

    .page.fade {
        -webkit-transition: opacity 250ms ease-in-out;
           -moz-transition: opacity 250ms ease-in-out;
            -ms-transition: opacity 250ms ease-in-out;
             -o-transition: opacity 250ms ease-in-out;
                transition: opacity 250ms ease-in-out;
    }

    .page.slide {
        -webkit-transition: -webkit-transform 250ms ease-in-out;
           -moz-transition:    -moz-transform 250ms ease-in-out;
            -ms-transition:     -ms-transform 250ms ease-in-out;
             -o-transition:      -o-transform 250ms ease-in-out;
                transition:         transform 250ms ease-in-out;
    }

    .page.fade.show,
    .page.slide.show {
        opacity: 1;
        z-index: 9999;
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
    }

    .page.fade.hide,
    .page.slide.hide {
        opacity: 0;
        z-index: 9998;
        -webkit-transform: translateX(100%);
           -moz-transform: translateX(100%);
            -ms-transform: translateX(100%);
             -o-transform: translateX(100%);
                transform: translateX(100%);
    }

    .page.fade.hide {
        -webkit-transition: opacity 250ms ease-in-out, -webkit-transform 0ms ease-in-out 250ms;
           -moz-transition: opacity 250ms ease-in-out,    -moz-transform 0ms ease-in-out 250ms;
            -ms-transition: opacity 250ms ease-in-out,     -ms-transform 0ms ease-in-out 250ms;
             -o-transition: opacity 250ms ease-in-out,      -o-transform 0ms ease-in-out 250ms;
                transition: opacity 250ms ease-in-out,         transform 0ms ease-in-out 250ms;
    }

    .page.slide.hide {
        -webkit-transition: -webkit-transform 250ms ease-in-out, opacity 0ms ease-in-out 250ms;
           -moz-transition:    -moz-transform 250ms ease-in-out, opacity 0ms ease-in-out 250ms;
            -ms-transition:     -ms-transform 250ms ease-in-out, opacity 0ms ease-in-out 250ms;
             -o-transition:      -o-transform 250ms ease-in-out, opacity 0ms ease-in-out 250ms;
                transition:         transform 250ms ease-in-out, opacity 0ms ease-in-out 250ms;
    }
    
    #app.dark .page{
		background: #29343A;
	}

/*/ PAGE CONTENT STYLES //////////////////////////////////////////////////////////////////////////////////////////////////////*/

    .page .content {
        opacity: 0;
        margin: 10px;
        display: block;
        overflow: hidden;
        max-width: 280px;
        min-height: 100px;
        position: absolute;
        background: #FFFFFF;
        top: calc(50% - 10px);
        left: calc(50% - 10px);
        width: calc(100% - 20px);
        box-shadow: 0 0 20px rgba(41,52,58,0.3);
        -webkit-transform: translate(-50%, -50%);
           -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
             -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        -webkit-transition: opacity 250ms ease-in-out;
           -moz-transition: opacity 250ms ease-in-out;
            -ms-transition: opacity 250ms ease-in-out;
             -o-transition: opacity 250ms ease-in-out;
                transition: opacity 250ms ease-in-out;
    }

    .page.show .content {
        opacity: 1;
    }

    .page .title {
        width: 100%;
        margin: 5px 0;
        display: block;
        color: #4CB2D0;
        font-size: 24pt;
        font-weight: 300;
        padding: 0 0 5px;
        border-bottom: 1px solid #4CB2D0;
    }

    .page .options {
        display: table;
        margin: 0 -5px;
        width: calc(100% + 10px);
    }

    .page .triggers {
        border-top: 1px solid #8FC9E1;
        border-bottom: 1px solid #8FC9E1;
    }

    .page .loading,
    .page .running,
    .page .waiting,
    .page .waiting .msg,
    .page .running .msg {
        display: block;
        position: absolute;
    }

    .page .running,
    .page .waiting,
    .page .loading {
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        -webkit-transform: translateX(-100%);
           -moz-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
             -o-transform: translateX(-100%);
                transform: translateX(-100%);
        -webkit-transition: opacity 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
           -moz-transition: opacity 250ms ease-in-out,    -moz-transform 250ms ease-in-out;
            -ms-transition: opacity 250ms ease-in-out,     -ms-transform 250ms ease-in-out;
             -o-transition: opacity 250ms ease-in-out,      -o-transform 250ms ease-in-out;
                transition: opacity 250ms ease-in-out,         transform 250ms ease-in-out;
    }

    .page .loading {
        background: #FFFFFF url('../img/loading.gif') no-repeat;
        background-position: 50% 50%;
        background-size: 80px auto;
    }

    .page .waiting,
    .page .running {
        background: #FFFFFF;
    }

    .page .waiting .msg,
    .page .running .msg {
        top: 50%;
        left: 50%;
        width: 60%;
        font-weight: 300;
        text-align: center;
        -webkit-transform: translate(-50%,-50%);
           -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
             -o-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
    }

    .page .waiting .txt,
    .page .running .txt {
        color: #29343A;
    }

    .page .waiting .tit,
    .page .running .tit {
        display: block;
        color: #4CB2D0;
        font-size: 18pt;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #4CB2D0;
    }

    .page .waiting.show,
    .page .running.show,
    .page .loading.show {
        opacity: 1;
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
            -ms-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
    }

/*/ ACTION BUTTONS STYLES ////////////////////////////////////////////////////////////////////////////////////////////////////*/

    .vote,
    .action {
        color: #FFFFFF;
        cursor: pointer;
        position: relative;
        -webkit-transition: background 250ms ease-in-out;
           -moz-transition: background 250ms ease-in-out;
            -ms-transition: background 250ms ease-in-out;
             -o-transition: background 250ms ease-in-out;
                transition: background 250ms ease-in-out;
    }

    .vote {
        border: 0;
        margin: 5px;
        height: 45px;
        padding: 10px;
        font-size: 14pt;
        font-weight: 700;
        background: #8FC9E1;
        display: table-cell;
        width: calc(50% - 10px);
    }

    /*
    .vote[value="e"] {
        left: 50%;
        -webkit-transform: translateX(-50%);
           -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
             -o-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    */

    .vote:active,
    .no-touchevents .vote:hover {
        background: #4CB2D0;
    }

    .vote.done {
        background: #29343A;
    }

    .action {
        width: 100%;
        height: 40px;
        display: block;
        margin-top: 5px;
        font-size: 12pt;
        font-weight: 300;
        background: #29343A;
        text-transform: uppercase;
    }

    .action:active,
    .no-touchevents .action:hover {
        background: #4CB2D0;
    }

    .action[disabled],
    .action[disabled]:active,
    .no-touchevents .action[disabled]:hover {
        cursor: default;
        background: #29343A;
    }

    .triggers .action {
        left: 50%;
        width: 160px;
        height: 160px;
        margin-top: 30px;
        margin-bottom: 30px;
        border-radius: 50%;
        position: relative;
        -webkit-transform: translateX(-50%);
           -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
             -o-transform: translateX(-50%);
                transform: translateX(-50%);
    }

    .triggers .action[disabled] {
        display: none;
    }

    .triggers .action[value="chart"] span {
        z-index: 1;
        position: relative;
    }

    .triggers .action[value="chart"]:before {
        top: 50%;
        left: 50%;
        z-index: 0;
        width: 100%;
        height: 100%;
        content: ' ';
        display: block;
        position: absolute;
        border-radius: 50%;
        background: #4CB2D0;
        -webkit-animation: pulse 1.5s ease infinite;
				animation: pulse 1.5s ease infinite;
    }

    .triggers .action[value="chart"]:active:before,
    .triggers .action[value="chart"][disabled]:before,
    .no-touchevents .triggers .action[value="chart"]:hover:before {
        opacity: 0;
        -webkit-animation: none;
				animation: none;
        -webkit-transform: translate(-50%, -50%) scale(0);
           -moz-transform: translate(-50%, -50%) scale(0);
            -ms-transform: translate(-50%, -50%) scale(0);
             -o-transform: translate(-50%, -50%) scale(0);
                transform: translate(-50%, -50%) scale(0);
    }

/*/ RESULTS PAGE STYLES //////////////////////////////////////////////////////////////////////////////////////////////////////*/

    .results {
        width: 100%;
    }

    .results,
    .results .bar,
    .results .date
    .results .date {
        display: block;
    }

    .results .bar,
    .results .date {
        width: 100%;
        color: #29343A;
    }

    .results .bar {
        margin: 10px 0;
        display: table;
    }

    .results .date {
        font-size: 9pt;
        padding-top: 5px;
        margin-bottom: 10px;
        padding-bottom: 5px;
        text-align: center;
        border-top: 1px solid #4CB2D0;
        border-bottom: 1px solid #4CB2D0;
    }

    .results .label {
        font-weight: 700;
    }

    .results .date span {
        color: #4CB2D0;
        font-weight: 500;
    }

    .results .bar span {
        display: table-cell;
    }

    .results .bar span:nth-child(2),
    .results .bar span:nth-child(3) {
        color: #4CB2D0;
        font-weight: 300;
        text-align: right;
    }

    .results .bar span:nth-child(1) {
        width: 20%;
    }

    .results .bar span:nth-child(2) {
        width: 30%;
    }

    .results .bar span:nth-child(3) {
        width: 50%;
    }

/*/ CSS ANIMATIONS ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

    @keyframes pulse {
	    0% {
            opacity: 0;
            -webkit-transform: translate(-50%, -50%) scale(0);
               -moz-transform: translate(-50%, -50%) scale(0);
                -ms-transform: translate(-50%, -50%) scale(0);
                 -o-transform: translate(-50%, -50%) scale(0);
                    transform: translate(-50%, -50%) scale(0);
		}
	    66% {
            opacity: 1;
            -webkit-transform: translate(-50%, -50%) scale(1);
               -moz-transform: translate(-50%, -50%) scale(1);
                -ms-transform: translate(-50%, -50%) scale(1);
                 -o-transform: translate(-50%, -50%) scale(1);
                    transform: translate(-50%, -50%) scale(1);
		}
		100% {
            opacity: 0;
            -webkit-transform: translate(-50%, -50%) scale(1);
               -moz-transform: translate(-50%, -50%) scale(1);
                -ms-transform: translate(-50%, -50%) scale(1);
                 -o-transform: translate(-50%, -50%) scale(1);
                    transform: translate(-50%, -50%) scale(1);
		}
	}

	@-webkit-keyframes pulse {
	    0% {
            opacity: 0;
            -webkit-transform: translate(-50%, -50%) scale(0);
               -moz-transform: translate(-50%, -50%) scale(0);
                -ms-transform: translate(-50%, -50%) scale(0);
                 -o-transform: translate(-50%, -50%) scale(0);
                    transform: translate(-50%, -50%) scale(0);
		}
	    66% {
            opacity: 1;
            -webkit-transform: translate(-50%, -50%) scale(1);
               -moz-transform: translate(-50%, -50%) scale(1);
                -ms-transform: translate(-50%, -50%) scale(1);
                 -o-transform: translate(-50%, -50%) scale(1);
                    transform: translate(-50%, -50%) scale(1);
		}
		100% {
            opacity: 0;
            -webkit-transform: translate(-50%, -50%) scale(1);
               -moz-transform: translate(-50%, -50%) scale(1);
                -ms-transform: translate(-50%, -50%) scale(1);
                 -o-transform: translate(-50%, -50%) scale(1);
                    transform: translate(-50%, -50%) scale(1);
		}
	}

/*/ MEDIA QUERIES ////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

    @media all and (min-height: 768px) {

        .page .content {
            -webkit-transform: translate(-50%, -50%) scale(2);
               -moz-transform: translate(-50%, -50%) scale(2);
                -ms-transform: translate(-50%, -50%) scale(2);
                 -o-transform: translate(-50%, -50%) scale(2);
                    transform: translate(-50%, -50%) scale(2);
        }

    }

    @media all and (min-height: 640px) {

        .page .content {
            -webkit-transform: translate(-50%, -50%) scale(1.5);
               -moz-transform: translate(-50%, -50%) scale(1.5);
                -ms-transform: translate(-50%, -50%) scale(1.5);
                 -o-transform: translate(-50%, -50%) scale(1.5);
                    transform: translate(-50%, -50%) scale(1.5);
        }

    }

/*/ END OF CSS FILE //////////////////////////////////////////////////////////////////////////////////////////////////////////*/