body {
    background: #353535;
    font-family: 'Roboto', serif;
}

.result {
    background-color: #f6f6f6;
    border: 1px solid #dddddd;
    list-style: none;
}

@media print {
    i {
        opacity: 0;
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .date {
        font-size: 20px;
    }

    .check {
        opacity: 100%;
    }

    .disable-on-print {
        opacity: 0;
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .green-bg {
        background: #22ab37;
        background: -moz-linear-gradient(top, #22ab37 0%, #278f36 100%);
        background: -webkit-linear-gradient(top, #22ab37 0%,#278f36 100%);
        background: linear-gradient(to bottom, #22ab37 0%,#278f36 100%);
    }

    .red-bg {
        background: #FFFFFF;
        border: #000000;
    }

    .yellow-bg {
        background: #e2e311;
        background: -moz-linear-gradient(top, #e2e311 0%, #a0a111 100%);
        background: -webkit-linear-gradient(top, #e2e311 0%,#a0a111 100%);
        background: linear-gradient(to bottom, #e2e311 0%,#a0a111 100%);
    }

    .grey-bg {
        background: #b1b1c4;
        background: -moz-linear-gradient(top, #b1b1c4 0%, #88889a 100%);
        background: -webkit-linear-gradient(top, #b1b1c4 0%,#88889a 100%);
        background: linear-gradient(to bottom, #b1b1c4 0%,#88889a 100%);
    }

    .header-text {
        font-size: 300%;
        color: #FFFFFF;
        font-weight: bold;
        text-align: center;
    }

    .big-text {
        font-size: 26px;
        color: #000000;
    }

}

@media screen {
    .check {
        opacity: 0;
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .print-info {
        text-align: center;
    }

    .disable-on-screen {
        opacity: 0;
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .green-bg {
        background: #22ab37;
        background: -moz-linear-gradient(top, #22ab37 0%, #278f36 100%);
        background: -webkit-linear-gradient(top, #22ab37 0%,#278f36 100%);
        background: linear-gradient(to bottom, #22ab37 0%,#278f36 100%);
    }

    .red-bg {
        background: #ee2c24;
        background: -moz-linear-gradient(top, #ee2c24 0%, #a41a13 100%);
        background: -webkit-linear-gradient(top, #ee2c24 0%,#a41a13 100%);
        background: linear-gradient(to bottom, #ee2c24 0%,#a41a13 100%);
    }

    .yellow-bg {
        background: #e2e311;
        background: -moz-linear-gradient(top, #e2e311 0%, #a0a111 100%);
        background: -webkit-linear-gradient(top, #e2e311 0%,#a0a111 100%);
        background: linear-gradient(to bottom, #e2e311 0%,#a0a111 100%);
    }

    .grey-bg {
        background: #b1b1c4;
        background: -moz-linear-gradient(top, #b1b1c4 0%, #88889a 100%);
        background: -webkit-linear-gradient(top, #b1b1c4 0%,#88889a 100%);
        background: linear-gradient(to bottom, #b1b1c4 0%,#88889a 100%);
    }

    .header-text {
        font-size: 300%;
        color: #FFFFFF;
        font-weight: bold;
        text-align: center;
    }
    .big-text {
        font-size: 26px;
    }
}

.checkbox-print {
    border: 3px solid #000000;
    padding: 15px;
    -moz-box-sizing: border-box;
    flex: auto;
}

.edit-info {
    cursor: pointer;
}

.hide-input {
    opacity: 0;
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.btn-inactive {
    background: #353535;
    padding: 5px;
    color: white;
    cursor: pointer;
}

.btn-active {
    background: #ee2c24;
    padding: 5px;
    color: white;
    cursor: pointer;
}

.hide {
    opacity: 0;
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.edit-name {
    cursor: pointer;
    font-size: 17px;
}

.button-info {
    color: #181818;
}

.button-name {
    color: #181818;
}