.julkaisijaMuokkaa {
    grid-area: julkaisijaMuokkaa;
    font-size: 0.8em;
    margin-top: 0px;
    padding: 5px;
    background-image: rgba(256, 256, 256, 0)  !important;
}

.hetkiMuokkaa {
    grid-area: hetkiMuokkaa;
    padding: 5px;
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: -101px;
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); 
}

.keskella {
    grid-area: keskella;
 /*   background-image: rgba(256, 256, 256, 0)  !important; */
}

.ohje {
    grid-area: ohje;
}

.muokattavaotsikko {
    grid-area: muokattavaotsikko;
    margin: 3px; 
    padding: 4px 4px; line-height: 20px;
    font-size: 1.1em;
}

.muokattavalinkki {
    grid-area: muokattavalinkki;
    margin: 3px; 
    padding: 4px 4px; line-height: 16px;
    font-size: 1.1em;
}

.muokattavalinkkiteksti {
    grid-area: muokattavalinkkiteksti;
    margin: 3px; 
    padding: 4px 4px; line-height: 16px;
    font-size: 1.1em;
}

.labelOtsikko {
    grid-area: labelOtsikko;
}

.labelLinkki {
    grid-area: labelLinkki;
    padding-top: 5px;
}

.labelLinkkiteksti {
    grid-area: labelLinkkiteksti;
    padding-top: 5px;
}

.muokkaaNappula {
    grid-area: muokkaaNappula;
    border: 1px solid #003865;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 2px;
    padding: 5px;
    width: 100%;
/* tumma theme    
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); */
/*    background-image: linear-gradient(rgba(256, 256, 256, 0.8), rgba(175, 219, 255, 0.2)); */
/* vaalea theme 
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5)); */
}

.lahetaNappula {
    grid-area: lahetaNappula;
    border: 1px solid #003865;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 2px;
    padding: 5px;
    width: 100%;
/* tumma theme    
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); 
    background-image: linear-gradient(rgba(256, 256, 256, 0.8), rgba(175, 219, 255, 0.2)); */ 
/* vaalea theme 
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5));
*/
}

.valitseNappula {
    grid-area: valitseNappula;
    border: 1px solid #003865;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 0px;
    padding: 3px;
    width: 100%;
/* tumma theme    
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); 
    background-image: linear-gradient(rgba(256, 256, 256, 0.8), rgba(175, 219, 255, 0.2)); */
/* vaalea theme 
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5));
*/
}

.uploadNappula {
    grid-area: uploadNappula;
    border: 1px solid #003865;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 0px;
    padding: 0px;
    width: 100%;

/* tumma theme    
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); 
    background-image: linear-gradient(rgba(256, 256, 256, 0.8), rgba(175, 219, 255, 0.2)); */
/* vaalea theme 
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5));
*/
}

.showNappula {
    grid-area: showNappula;
    border: 1px solid #003865;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 0px;
    padding: 0px;
    width: 100%;

/* tumma theme    
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); 
    background-image: linear-gradient(rgba(256, 256, 256, 0.8), rgba(175, 219, 255, 0.2)); */
/* vaalea theme 
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5));
*/
}

.groupValinta {
    grid-area: groupValinta;
}

.otsikkoMuokkaa {
    grid-area: otsikkoMuokkaa;
    display: grid;
    margin-left: 0px;
    margin-right: 0px;
    grid-template-columns: 100px auto;
    grid-template-areas: 
        "labelOtsikko muokattavaotsikko"  
        "labelLinkki muokattavalinkki"
        "labelLinkkiteksti muokattavalinkkiteksti"
        "ohje ohje";
    padding: 10px;
    font-size: 1.1em;
    padding-top: 7px;
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); 
}

.juttu {
    display: grid;
    margin-left: 0px;
    margin-right: 0px;
    grid-template-columns: 180px auto;
    grid-template-areas: 
        "hetkiMuokkaa       otsikkoMuokkaa"  
        "keskella           otsikkoMuokkaa"  
        "julkaisijaMuokkaa  otsikkoMuokkaa"
        "body               body"
        "nakyvyys           nakyvyys";   
}

.juttuweb {
    display: grid;
    margin-left: 0px;
    margin-right: 0px;
    grid-template-columns: 180px auto;
    grid-template-areas: 
        "hetkiMuokkaa       otsikkoMuokkaa"  
        "keskella           otsikkoMuokkaa"  
        "body               body"
        "nakyvyys           nakyvyys";   
}

.linkkialue {
   border: 1px solid #003865;
/*   border-radius: 5px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
   margin-left: 20px;
   padding: 10px;
   display: grid;
   grid-template-columns: auto 70px;
   grid-template-areas: 
        "linkkiosoite muokkaaNappula";
}

.linkkiosoite {
    grid-area:linkkiosoite;
}

html {
  font-family: Verdana, sans-serif;
}

/* Style the input fields 
input {
  padding: 10px;
  width: 100%;
  font-size: 0.8em;
  font-family: Verdana, sans-serif;
  border: 1px solid #aaaaaa;
}
*/
.uploadform {
  width: 100%;
  background: #fff;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid black;
}

.body li {
    display: list-item !important;
    border: none;
    box-shadow: none;
    list-style-type: disc !important;
}

/*
.uploadform ol {
  padding-left: 0;
}

.uploadform .preview ol li {
  background: #eee;
  display: flex;
  margin-top: 0px;
  margin-bottom: 5px;
  list-style-type: none; 
}
*/

.uploadform p {
  background: #eee;
  display: flex;
  margin-top: 0px;
  margin-bottom: 0px;
  list-style-type: none; 
  padding-left: 0px;
/*  border: 1px solid black; */
}

.uploadinput {
    position: absolute;
    opacity: 0;
    left: -245px;
    top: -350px;
    width: 1px;
    height: 1px;
    background-color: red;
}

.uploadinputfile {
    position: absolute;
    opacity: 0;
    left: -245px;
    top: -350px;
    width: 1px;
    height: 1px;
    background-color: red;
}

.preview {
    grid-area: preview;
}

.rekisteroityneetOtsikko {
    grid-area: rekisteroityneetOtsikko;
    width: 100%;
}

.rekisteroityneetRaahaa {
    grid-area: rekisteroityneetRaahaa;
}

.rekisteroityneet {
    grid-area: rekisteroityneet;
    width: 100%;
    height: 200px;
}

.previewFile {
    grid-area: previewFile;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 200px 1fr 30px;
    grid-template-areas:
        "rekisteroityneetOtsikko"
        "rekisteroityneet"
        "rekisteroityneetRaahaa";
}

.valitse {  
    grid-area: valitse;
    display: grid;
    grid-template-columns: auto; 
    grid-template-areas: 
        "valitseNappula";              
}

.tyhjaaryhma {
    grid-area: tyhjaaryhma;
}

/* radiogroup */
/* The containerChoice */
.containerChoice {
    position: relative;
/*    width: 180px; */
    padding-left: 22px;
    margin-top: 12px;
    margin-bottom: 2px;
    height: 32px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.leveys230px {
    width: 260px;
}

.leveys260px {
    width: 260px;
    margin-top: 12px;
    margin-left: 10px;
}

.leveys100px {
    width: 100px;
    margin: 0px;
}

/* Hide the browser's default radio button */
.containerChoice input {
    position: absolute;
    width: 1px;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom check button */
.checkmark{
    position: absolute;
    top: 0;
    left: 0;
    height: 19px;
    width: 19px;
    background-color: #fff;
}

/* Create a custom check button */
.checkmarkDisabled{
    position: absolute;
    top: 0;
    left: 0;
    height: 19px;
    width: 19px;
    background-color: #fff;
}

/* Create a custom radio button */
.radiomark{
    position: absolute;
    top: 0;
    left: 0;
    height: 19px;
    width: 19px;
    background-color: #fff;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.containerChoice:hover input ~ .checkmark, .containerChoice:hover input ~ .radiomark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.containerChoice input:checked ~ .checkmark, .containerChoice input:checked ~ .radiomark {
    background-color: #003865; /* #2196F3; */
}

.containerChoice input:checked ~ .checkmarkDisabled {
    background-color: #1094ff; /* #2196F3; */
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after, .checkmarkDisabled:after, .radiomark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.containerChoice input:checked ~ .checkmark:after, .containerChoice input:checked ~ .radiomark:after, .containerChoice input:checked ~ .checkmarkDisabled:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.containerChoice .radiomark:after {
 	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* Style the checkmark/indicator */
.containerChoice .checkmark:after, .containerChoice .checkmarkDisabled:after {
  left: 7px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.kohdesivu {
    grid-area: kohdesivu;
    width: 100%;
    display: grid;
    grid-template-columns: 150px auto ; 
    grid-template-areas: 
        "valintaotsikko sarakkeetChoice";           
}

.nakyvyysaika {
    grid-area: nakyvyysaika;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 150px auto ; 
    grid-template-areas: 
        "valintaotsikko valintaosio";           
}

.julkaisuaika {
    grid-area: julkaisuaika;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 150px auto ; 
    grid-template-areas: 
        "valintaotsikko valintaosio";           
}

.valinnat {
    grid-area: valinnat;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 150px auto ; 
    grid-template-areas: 
        "valintaotsikko valintaosio";           
}

.julkisuus {
    grid-area: julkisuus;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 150px auto ; 
    grid-template-areas: 
        "valintaotsikko valintaosio";           
}

.containerAikaLarge {
    margin-top: 0px;
    margin-right: 0px;
    max-width: 180px;
    max-height: 46px;
    font-size: 1.4em;
}

.containerAika {
    margin-top: 10px;
    margin-right: 0px;
    max-width: 100px;
    max-height: 26px;
    font-size: 0.8em;
}

.containerOnline {
    grid-area: containerOnline;
    margin-top: 10px;
    margin-right: 0px;
    max-width: 250px;
    max-height: 26px;
    font-size: 0.8em;
}

.nakyvyys {
    grid-area: nakyvyys;
    display: grid;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    grid-template-areas: 
        "kohdesivu"
        "nakyvyysaika"  
        "julkaisuaika"
        "valinnat"
        "julkisuus";       
}

.valintaotsikko {
    padding: 5px;
    margin-bottom: 0px;
    grid-area: valintaotsikko;
    font-size: 1.2em;
    padding-top: 7px;
    min-width: 160px;
/*    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); */
}

.valintaosio {
    grid-area: valintaosio;
    display: flow;
    padding: 5px;
    padding-left: 10px;
}

.nappulaPaneeli {
    display: grid;
    margin-left: 5px;
    margin-right: 5px;
   grid-template-columns: 1fr;
   grid-column-gap: 10px;
   grid-template-areas: 
        "muokkaaNappula"
        "lahetaNappula";   
}

.lukumaaraPaneeli {
    grid-area: lukumaaraPaneeli;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    grid-template-areas: 
        "paivitalukumaaraNappula ilmoitaNappula";   
}

.paivitalukumaaraNappula {
    grid-area: paivitalukumaaraNappula;
    border: 1px solid #003865;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 2px;
    padding: 5px;
    width: 100%;
/* tumma theme    
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); */
/*    background-image: linear-gradient(rgba(256, 256, 256, 0.8), rgba(175, 219, 255, 0.2)); */
/* vaalea theme 
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5)); */
}
              
.ilmoitaNappula {
    grid-area: ilmoitaNappula;
    border: 1px solid #003865;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 2px;
    padding: 5px;
    width: 100%;
/* tumma theme    
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); */
/*    background-image: linear-gradient(rgba(256, 256, 256, 0.8), rgba(175, 219, 255, 0.2)); */
/* vaalea theme 
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(175, 219, 255, 0.5)); */
}
              
.uploadPaneeli {
    grid-area: uploadPaneeli;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: 35px auto; 
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-areas: 
        "valitse"       
        "preview"
        "uploadNappula";              
}

.karttalatausPaneeli {
    grid-area: karttalatausPaneeli;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 35px auto; 
    grid-column-gap: 0px;
    grid-row-gap: 10px;
    grid-template-areas: 
        "kartanlataus ratojentiedot tulostustiedot";              
}

.underlinelinkoff {
    text-decoration: none;    
}

.uploadPaneeliFile {
    grid-area: uploadPaneeli;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: 75px auto 30px 30px 30px 30px; 
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-areas: 
        "valitse"   
        "previewFile"
        "uploadNappula"
        "tyhjaaryhma"
        "groupValinta"
        "showNappula";              
}

.sarakkeetChoice {
  width: 100%;
  min-height: 100px;
  margin: 0 0;
  display: grid;
  grid-template-columns: 1fr;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
.e { grid-area: e; }
.f { grid-area: f; }
.g { grid-area: g; }
.h { grid-area: h; }
.i { grid-area: i; }
.j { grid-area: j; }

.sarakegridChoice {
  display: grid;
  grid-template-columns: 6fr 6fr;
  grid-template-rows: 35px 35px 35px 35px 35px;
  grid-template-areas: "a b"
                       "c d"
                       "e f"
                       "g h"
                       "i j";
  grid-gap: 2px;
  align-items: center;
  padding-left: 10px;    
}

/* testataan näytön koko -> luodaan suuremmalle näytölle 2 saraketta */
@media (min-width:641px) {
    .uploadPaneeli {
        grid-area: uploadPaneeli;
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 35px auto; 
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-areas: 
            "valitse uploadNappula"
            "preview preview";    
    }
    .uploadPaneeliFile {
        grid-area: uploadPaneeliFile;
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 75px auto 30px 30px; 
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-areas: 
            "valitse uploadNappula"       
            "previewFile previewFile"            
            "tyhjaaryhma groupValinta"
            "showNappula showNappula";              
    }
    .previewFile {
        grid-area: previewFile;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 180px 1fr 30px;
        grid-template-areas:
            "rekisteroityneetOtsikko"
            "rekisteroityneet"
            "rekisteroityneetRaahaa";
    }
    .nappulaPaneeli {
        display: grid;
        margin-left: 5px;
        margin-right: 5px;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 10px;
        grid-template-areas: 
            "muokkaaNappula lahetaNappula";   
    }
    .sarakegridChoice {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 35px 35px 35px 35px;
        grid-template-areas: "a b c"
                             "d e f"
                             "g h i"
                             "j j j";
        grid-gap: 2px;
        align-items: center;
        padding-left: 10px;    
    }
}

@media (min-width:860px) {
    .uploadPaneeliFile {
        grid-area: uploadPaneeliFile;
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: 2fr 1fr 1fr; 
        grid-template-rows: 75px auto 30px; 
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-areas: 
            "valitse uploadNappula uploadNappula"       
            "previewFile previewFile previewFile"             
            "tyhjaaryhma groupValinta showNappula";              
    }
    .previewFile {
        grid-area: previewFile;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 120px 1fr 30px;
        grid-template-areas:
            "rekisteroityneetOtsikko"
            "rekisteroityneet"
            "rekisteroityneetRaahaa";
    }
    .sarakegridChoice {
        display: grid;
        grid-template-columns: 6fr 6fr 6fr 6fr 4fr;
        grid-template-rows: 35px 35px;
        grid-template-areas: "a b c d e"
                             "f g h i j";
        grid-gap: 2px;
        align-items: center;
        padding-left: 10px;    
    }
}

.sarakkeet {
  width: 100%;
  column-width: 160px;
  max-width: 600px;
  margin: 0 0;
}
.sarakegrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 35px;
  grid-gap: 2px;
  align-items: center;
  padding-left: 10px;
}

.sarakkeet2 {
  width: 100%;
  column-width: 240px;
  max-width: 600px;
  margin: 0 0;
}
.sarakegrid2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 40px;
  grid-gap: 0px;
  align-items: center;
  padding-left: 10px;
}

/* kilpailuMuokkaaImpl */

.uploadinput, .uploadinputkisa {
    position: absolute;
    left: -1000;
    width: 1px;
    opacity: 0;
    cursor: pointer;
}

.jlaatikko_container {
    margin-top: -10px;
}

.jlaatikko_radioleveys {
     width: 100px !important;
}

.jlaatikko_radioleveys_large {
     width: 100% !important;
}


.jlaatikko_containerAika {
    width: 100px;
    max-height: 26px;
    font-size: 0.8em;
}

.jlaatikko_containerLinkki {
    margin-top: 8px;
    max-height: 26px;
    font-size: 0.8em;  
}

.dummy {
    grid-area: dummy;
}

.jlaatikko_filename {
    grid-area: jlaatikko_filename;
    margin-left: 20px;
}

.jlaatikko_button {
    grid-area: jlaatikko_button;
    width:30px;
    height:30px;
}

.jlaatikkovalinta {
     width: 140px !important;
}

.jlaatikkovalinta_tiedosto {
    grid-area: jlaatikkovalinta_tiedosto;
    position: relative;
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 105px 120px 1fr 50px; 
    grid-template-areas:
        "jlaatikkovalinta valitseNappula jlaatikko_filename jlaatikko_button";        
}

.jlaatikkovalinta_infosivu {
    grid-area: jlaatikkovalinta_infosivu;
    position: relative;
    width: 98%;
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-areas:
        "jlaatikko_radioleveys";        
}

.jlaatikkovalinta_linkki {
    grid-area: jlaatikkovalinta_linkki;
    position: relative;
    width: 98%;
    display: grid;
    grid-template-columns: 120px 1fr; 
    grid-template-areas:
        "jlaatikko_radioleveys jlaatikko_containerLinkki";        
}

.jlaatikkovalinta_linkki_1 {
    grid-area: jlaatikkovalinta_linkki_1;
    position: relative;
    width: 98%;
    display: grid;
    grid-template-columns: 95px 120px 1fr; 
    grid-template-areas:
        "jlaatikko_radioleveys jlaatikko_kaytossa jlaatikko_containerLinkki";        
}

.jlaatikkovalinta_linkki_2 {
    grid-area: jlaatikkovalinta_linkki_2;
    position: relative;
    width: 98%;
    display: grid;
    grid-template-columns: 95px 120px 1fr; 
    grid-template-areas:
        "dummy jlaatikko_kaytossa jlaatikko_containerLinkki";        
}

.jlaatikko_data_perus {
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    grid-template-areas:
        "jlaatikkovalinta_tiedosto" 
        "jlaatikkovalinta_linkki"    
        "jlaatikkovalinta_infosivu";    
}

jlaatikko_data {
    display: grid;
    grid-template-rows: auto auto;
    align-items: center;
    grid-template-areas:
        "jlaatikkovalinta_tiedosto" 
        "jlaatikkovalinta_linkki_1"    
        "jlaatikkovalinta_linkki_2";    
}

.jlaatikko_valinta_aika {
    grid-area: jlaatikko_valinta_aika;
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    grid-template-areas:
        "containerChoice containerAika";    
}

.jlaatikko_julkaisu {
    grid-area: jlaatikko_julkaisu;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 100px auto; 
    grid-template-rows: auto; 
    grid-template-areas:
        "containerChoice jlaatikko_valinta_aika"
        "containerOnline containerOnline";    
}

.jlaatikko_vasen {
    grid-area: jlaatikko_vasen;
    position: relative;
    width: 100%;
    padding-left: 10px;
    display: grid;
    grid-template-rows: 1fr; 
}

.jlaatikko_vasen_1 {
    grid-area: jlaatikko_vasen;
    position: relative;
    width: 100%;
    padding-top: 10px;
    padding-left: 10px;
    display: grid;
    grid-template-rows: 1fr 2fr; 
}

.jlaatikko_oikea {
    grid-area: jlaatikko_oikea;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-rows: auto auto; 
    grid-template-areas:
        "jlaatikko_julkaisu"
        "jlaatikko_data";
}

.jlaatikot_ilmoittautuneet {
    grid-area: jlaatikot_ilmoittautuneet;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 130px auto; 
    grid-template-areas:
        "jlaatikko_vasen jlaatikko_oikea";
}

.jlaatikko_otsikko {
    grid-area: jlaatikko_otsikko;
    padding-left: 20px;
}

.jlaatikko_kaytossa {
    grid-area: jlaatikko_kaytossa;
}

.jlaatikot {
    grid-area: jlaatikot;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 130px auto; 
    grid-template-areas:
        "jlaatikko_otsikko jlaatikko_otsikko"
        "jlaatikko_vasen jlaatikko_oikea";
}

.ilmoittautuneet {
    grid-area: ilmoittautuneet;
}

.kilpailukutsu {
    grid-area: kilpailukutsu;
}

.kilpailuohjeet {
    grid-area: kilpailuohjeet;
}

.tulokset {
    grid-area: tulokset;
 }

.jlaatikot_kaikki {
    grid-area: valinnat;
    position: relative;
    width: 100%;
    display: grid;
    grid-row-gap: 10px;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas: 
        "ilmoittautuneet"
        "lahtoajat"
        "kilpailukutsu"
        "kilpailuohjeet"
        "tulokset"
        "nappulaPaneeli";           
}

.kilpailuaika {
    grid-area: hetkiMuokkaa;
    padding: 5px;
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: -46px;
    background-image: linear-gradient(rgba(256, 256, 256, 0.5), rgba(0, 64, 114, 0.5)); 
}