* {
   box-sizing: border-box;
}

body {
   color: #808080;
   text-align: center;
   font-family: "Open Sans", Arial, sans-serif;
}

input, textarea, select, button {
   padding: 0.7em;
   border: none;
   color: #999;
   background-color: #eee;
   font-family: "Open Sans", Arial, sans-serif;
   border-radius: 0.5em;
}

input:focus {
   background: #F8F8FF;
}

button, input[type=submit] {
    color: #ffffff!important;
    border-width: 0px!important;
    border-color: #1f848a;
    border-radius: 20px;
    font-size: 20px;
    font-weight: 700!important;
    text-shadow: 0em 0.1em 0.1em rgba(0,0,0,0.4);
    background-color: #6b6b6b;
}

input[type=file] {
   color: #444;
}

input[type=checkbox] {
   zoom: 1.8;
}

input[type=submit].secondary {
   background-color: transparent;
   font-weight: 500!important;
   font-size: 15px;
   color: #000088!important;
}


input[type=submit]:hover {
   background-color: #f9de9f;
/*   background: #DDF;
   text-shadow: 0.1em 0.1em 0.2em #88B;
*/
}

a:hover {
   text-shadow: 0.1em 0.1em 0.1em #88B;
}

select {
   border: 1px solid #888;
   border-radius: 0.3em;
   background: #F0F0FF;
}

select:focus {
   background: #F8F8FF;
}

/* --------------------------------- TITLE --- */

.title {
   padding: 36px 0 36px;
   margin: 0 0 0.5em;
   text-align: center;
   font-family: "Open Sans";
   font-weight: 500;
   font-size: 28px;
   text-shadow: 0.1em 0.1em 0.2em #AAC;
   width: 100%;
   background: #29c4a9;
   background-image: linear-gradient(180deg,rgba(81,219,210,0.79) 0%,#29c4a9 100%);
   color: white;
}

.subtitle {
   display: inline-block;
   background: #29c4a9;
   background-image: linear-gradient(180deg,rgba(81,219,210,0.79) 0%,#29c4a9 100%);
   padding: 0.6em 2em;
   margin: 0.4em auto 0.8em auto;
   text-align: center;
   color: white;
   font-size: 20px;
   font-weight: bold;
   font-family: Geneva;
   text-shadow: 0.1em 0.1em 0.2em #AAC;
}

/* --------------------------------- MENU --- */

.menu {
   margin: auto;
   text-align: center;
}

.menu input[type=submit] {
   margin: 0.5em;
}

.menu input[type=submit].choose {
   width: initial;
   padding: 0.2em 1em 0.2em 1em;
}

/* --------------------------------- TABLE --- */

.table {
   display: table;
   border-spacing: 0 0.2em;
   margin: auto;
}

.table .row {
   display: table-row;
}

.table .head {
   display: table-cell;
   background: #29c4a9;
   background-image: linear-gradient(180deg,rgba(81,219,210,0.79) 0%,#29c4a9 100%);
   color: #FFF;
   padding: 0.5em;
}

.table .cell {
   display: table-cell;
   color: #666;
   background-color: #eee;
   text-align: left;
   padding: 0.1em 0.5em 0.1em 0.3em;
}

.table .cell:after {
   content: "\a0"; // az üresnek is legyen magassága
}


.table table {
   color: white;
   margin: 0 auto 1em auto;
   text-align: center;
}

.table td {
   color: #666;
   background-color: #eee;
   text-align: left;
   padding: 0.1em 0.5em 0.1em 0.3em;
}

.table th {
   background: #29c4a9;
   background-image: linear-gradient(180deg,rgba(81,219,210,0.79) 0%,#29c4a9 100%);
   color: #FFF;
   padding: 0.5em;
}

.table div.scrollable {
   overflow-x: auto;
   overflow-y: auto;
   max-width: 20em;
   max-height: 5em;
}

.table input[type=submit] {
   font-size: 12px;
   padding: 8px;
}


@media (max-width:30rem) {

   .table .head.opt {
      display: none;
   }

   .table .cell.opt {
      display: none;
   }

}

@media (max-width:20rem) {

   .table {
      display: block;
   }

   .table .row {
      display: block;
      margin-bottom: 0.5em;
   }

   .table .head {
      display: none;
   }

   .table .cell {
      display: block;
      padding: 0.2em;
      width: 95%;
   }

}


/* --------------------------------- FORM --- */

.form {
   color: #666;
}

.form .desc {
   text-align: center;
   max-width: 40rem;
   margin: 1.5em auto 1.5em auto;
}

.form table {
   border-radius: 0.3em;
   margin: 0 auto 1em auto;
   padding: 0.3em;
}

.form td {
   text-align: left;
   color: #666;
}

.form th {
   text-align: right;
   padding: 0.1em 0.2em 0.1em 0.5em;
/*   background: #88A;
   color: #FFF;
*/
}

.form .row {
   text-align: center;
   margin: 0.3rem auto;
}

.form .label {
   display: inline-block;
   vertical-align: middle;
   font-weight: bold;
   text-align:right;
   padding: 0.1em 0.2em 0.1em 0.5em;
   width: 30%;
}

.form .data {
   display: inline-block;
   vertical-align: middle;
   text-align: left;
   width: 60%;
}

@media (max-width:30rem) {

   .form .label {
      text-align: left;
      margin-top: 0.5em;
      width: 95%;
   }

   .form .data {
      width: 95%;
      padding: 0.1em 0.5em 0.1em 0.5em;
   }

   .form .desc {
      padding: 0.1em 0.5em 0.1em 0.5em;
   }

}

form {
   margin: 0;
}

a.make {
   display: inline-block;
   border-radius: 0.5em;
   text-decoration: none;
   font-weight: bold;
   padding: 0.5em;
   color: #444;
   background: #F0F0FF;
}

a.make:hover {
   background: #DDF;
   text-shadow: 0.1em 0.1em 0.2em #88B;
}


/* --------------------------------- SHEET --- */

.sheet table {
   margin: 0 auto 1em auto;
   text-align: center;
}

.sheet td {
   color: #666;
   background-color: #eee;
   text-align: left;
   padding: 0.1em 0.5em 0.1em 0.3em;
}

.sheet th {
   background: #29c4a9;
   background-image: linear-gradient(180deg,rgba(81,219,210,0.79) 0%,#29c4a9 100%);
   color: #FFF;
   padding: 0.5em;
   text-align: right;
   padding: 0.5em;
}

.sheet input[type=submit] {
   font-size: 12px;
   padding: 8px;
}

.sheet .row {
   text-align: center;
   margin: 0.3rem auto;
}

.sheet .label {
   display: inline-block;
   text-align: right;
   font-weight: bold;
   vertical-align: middle;
   background: #29c4a9;
   background-image: linear-gradient(180deg,rgba(81,219,210,0.79) 0%,#29c4a9 100%);
   color: #FFF;
   padding: 0.5em;
   width: 30%;
}

.sheet .data {
   display: inline-block;
   text-align: left;
   vertical-align: middle;
   color: #666;
   background-color: #eee;
   padding: 0.5em;
   width: 60%;
}

.sheet .data:after {
   content: "\a0"; // az üresnek is legyen magassága
}

@media (max-width:30rem) {

   .sheet .label {
      text-align: left;
      margin-top: 0.5em;
      width: 95%;
   }

   .sheet .data {
      width: 95%;
   }

}


/* --------------------------------- OFFICE --- */

div.office { 
   margin-left: auto;
   margin-right: auto;
}

.office .header { 
   margin: 2em 0 1em 0; 
   font-size: larger;
   font-weight: bold;
}

.office table {
   display: inline-block;
   margin: auto;
}

.office th { 
   text-align: right; 
   font-weight: bold;
} 

.office td {
   text-align: left;
}

/* --------------------------------- TABS --- */

.tabs {
   text-align: center;
   margin: 0.3em auto 0.3em auto;
}

.tab {
   display: inline-block;
}

.tab input {
   padding: 0.6em 0.6em 0.8em 0.6em; 
}

.tab.current input {
/*   font-weight: bold; */
   padding: 1em 1em 0.8em 1em; 
}

.tab input[type=submit] {
   border-radius: 0.5em 0.5em 0 0;
}

/* --------------------------------- OTHER --- */
.back {
   text-align: center;
   margin: 0.5em auto 0.5em auto;
}

.error {
   background: #FDD;
   font-weight: bold;
   text-align: center;
   margin: 0.5em auto 0.5em auto;
   width: 80%;
   padding: 0.6em;
   border-radius: 0.3em;
}

.info {
   background: #DFD;
   font-weight: bold;
   text-align: center;
   margin: 0.5em auto 0.5em auto;
   width: 80%;
   padding: 0.6em;
   border-radius: 0.3em;
}

td.text {
   background: #FFF;
   text-align: center; 
   border-radius: 0.3em;
   padding: 0.5em;
   color: #555;
   max-width: 30em;
}

.left {
   text-align: left;
}

table.foralign {
   margin: 0.1em auto;
   background: none;
}

table.foralign td, table.foralign th {
   text-align: left;
   background: none;
   color: #555;
}

button.accept {
   background: none;
   border: none;
   padding: 0.5em;
   color: blue!important;
   text-decoration: underline;
   cursor: pointer;
   font-size: normal;
   text-shadow: none;   
}

.contact {
   text-align: center;
   padding: 1em;
   margin: 1em 0;
}