body {
    background:  url("https://palveluverkko.fi/tuntilappu/tausta.jpg") no-repeat center center fixed #ffffff; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.center{
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}
/*.card{
    border: 2px solid #cd5c5c;
}*/
button:hover, input[type=submit]{
    cursor: pointer;
}
.logoutbtn{
    margin-right: 40vh; 
    margin-top: -9vh;
    position: sticky;
}
.logoutbtn a{
    color: #fff;
}
.logoutbtn a:hover{
    color: #cecece;
    text-decoration: none;
}
.logoutbtn:hover{
    background: #025AA5 !important;
    color: #cecece;
    cursor: pointer;
}
.datafield:empty:before {
    content: 'Tyhjä';
}
.select-style {
    border: 1px solid #ccc;
    width: auto;
    border-radius: 3px;
    overflow: hidden;
    background: #fff  no-repeat 90% 50%;
}
.select-style select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

.select-style select:focus {
    outline: none;
}
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    .logoutbtn{
        margin-right: 0;
        margin-top: -28vh;
        margin-bottom: 30vh;
    }
    .responsive-table-beautiful table {width:100%;}
    .responsive-table-beautiful thead {display: none;}
    .responsive-table-beautiful tr:nth-of-type(2n) {background-color: inherit;}
    .responsive-table-beautiful tbody td {display: block;  text-align:center;}
    .responsive-table-beautiful tbody td:before { content: attr(data-th); display: block; text-align:center;  
    }
    .responsive-table-ugly table, thead, tbody, th, td, tr { display: block; }
    .responsive-table-ugly td, .responsive-table-ugly th{ padding-left: 65% !important; padding: 0; padding-bottom: 5px; }
    .responsive-table-ugly thead tr { position: absolute; top: -9999px;     left: -9999px; }
    .responsive-table-ugly tr { border-bottom: 1px solid #ccc; }
    .responsive-table-ugly td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; }
    .responsive-table-ugly td:before { position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; }
    .responsive-table-ugly td:nth-of-type(1):before { content: "Työmatka alku/loppu"; }
    .responsive-table-ugly td:nth-of-type(2):before { content: "Päivä ja työaika"; }
    .responsive-table-ugly td:nth-of-type(3):before { content: "Selvitys tehdystä työstä"; }
    .responsive-table-ugly td:nth-of-type(4):before { content: "Yöpyminen"; }
    .responsive-table-ugly td:nth-of-type(5):before { content: "Paikkakunta ja ajokilometrit"; }
    .responsive-table-ugly td:nth-of-type(6):before { content: "Päiväraha"; }
    .responsive-table-ugly td:nth-of-type(7):before { content: "Tunnit"; }
    .responsive-table-ugly td:nth-of-type(8):before { content: "Työntekijä"; }
    .responsive-table-ugly td:nth-of-type(9):before { content: "Tilikausi"; }

    .users-table td:nth-of-type(1):before { content: "Etunimi"; }
    .users-table td:nth-of-type(2):before { content: "Sukunimi"; }
    .users-table td:nth-of-type(3):before { content: "Sähköposti"; }
    .users-table td:nth-of-type(4):before { content: "Puhelin"; 
}