/* ################################################################## */
/* ################################################################## */
/* ################################################################## */
/* alapok */

* {
  box-sizing: border-box;
}


body {
  margin: 5px;
  font-family: Helvetica,Arial,Verdana,sans-serif;
/*  font-size: 0.9em; */
  font-size: 0.8em; 
  background-color: #fff8dc;
}

/* hogy mindehol egyforma legyen a betűméret. ez láccik a legjobbnak */
input, select,button, td, th, div {
    font-family: inherit;
    font-size: inherit;
    
}

/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/* balmenu */
/* Style the side navigation ez bal frame <div> */
.bm {
  height: 100%;
  width: 10%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  /*background-color: #111;*/
  overflow-x: hidden;
}

/* ez a fő frame <div> */
.content_bm {
  margin-left: 10%;
  padding: 10px;
  padding-left: 10px;
  overflow: auto;
}

/* Equal width table cell <table> bal menu*/
.table_bm {
  width: auto;
  margin-left: auto; margin-right: auto; 
  border-collapse: separate;
   table-layout: fixed;
}

/* ezt a <td> button class-a */
.td_bm {
 width: 150px;
 text-align: center; 
/* padding: 5px; */
 padding: 3px; 
 border: 1px solid black; 
 border-radius: 10px 10px 10px 10px; 
 background-color: silver; 
/* cursor: hand; */
 cursor: grab; 
 color: black;
}

/* ezt a <td> button class-a ha sorban, no wrap, sorvegi button, nincs rögzitett szélesség*/
.td_bm_nr {
 /*width: 150px;*/
 text-align: center; 
/* padding: 5px; */
 padding: 3px; 
 background-color: silver; 
 cursor: grab; 
 color: black;
 white-space: nowrap;
 border: 1px solid black; 
 border-radius: 10px 10px 10px 10px; 
}

/* ez a button ami balra mutat */
.td_bm_left {
 border: 1px solid black; 
 border-radius: 10px 0px 0px 10px;
}

/* ez a button ami jobbra mutat */
.td_bm_right {
 border: 1px solid black; 
 border-radius: 0px 10px 10px 0px;
}

/* a sorvegi button nem olyan kerek */
.td_bm_sorba {
 padding: 1px;
 border: 1px solid black; 
 border-radius: 3px;
}


/* ezt a <td> button onmouseover() class-a */
.td_bm:hover {
  background-color: #f44336;
  color: white;
}

.td_bm_nr:hover {
  background-color: #f44336;
  color: white;
}


/* ezt a <td> class-a feliratnál bal menu */
.felirat_bm {
 width: 150px;
 background-color: white;
 text-align: center;
 padding: 5px; 
 border: 1px solid black; 
 }

/* ez a gombok közé <tr class="uressor_bm" ></tr> */
.uressor_bm {
height: 8px;
}


/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/* fentmenu */

/* ez a fő frame fent_menunél */
.content_fm {
  padding: 10px;
  padding-left: 10px;
  overflow: auto;
}

/* ez a fent menu table */
.table_fm {
  width: auto;
  margin-left: auto; margin-right: auto; 
  border-collapse: separate;
  table-layout: auto;
}

/* fent menu felirat */
.felirat_fm {
 /* ezt igy kell <td colspan=20; class="felirat_fm" >*/
 background-color:white;
 text-align: center;
 padding: 5px; 
 border: 1px solid black; 
 }

/* ez a gombok közé spac fent menu <td class="ures_fm"></td> */
.ures_fm {
width: 8px;
}
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/*  általános */

/* az óra div-je */
.stopper {
  margin-left: auto; margin-right: auto; 
  text-align: center;
  white-space: pre;
 /* max-width: 300px;*/
 /* max-width: 40%;*/
 /*  font-family: 'Lucida Console',Helvetica,Arial,Verdana,sans-serif;*/
  /* font-family: 'Courier New';*/
  /* font-size: 0.9em; */
  }

/* általános tábla mindenhez */
.tbl_cll {
  /*max-width: 100%;*/
  /*width: auto;*/
  margin-left: auto; margin-right: auto; 
  border-collapse: collapse;
 /*table-layout: auto;*/
 /*table-layout: fixed;*/
}

/* cella szoveges alap*/
.bal{
 padding: 3px; 
 white-space: nowrap;
 text-align: left;
}

/* cim szoveges alap*/
.cim{
 padding: 3px; 
 white-space: normal;
 text-align: center;
 cursor: grab; 
}


/* cella szoveges alap nincs hover ez a buttonnak a td-je*/
.bal_nh{
 /*padding: 5px; ez nem kap paddingot mert ebbe jön bele a button ez csak arra való */
 white-space: nowrap;
 text-align: left;
}

/* cella szoveges border*/
.brdr {
 border: 1px solid black; 
}

/* cella szoveges center*/
.cntr{
 text-align: center;
 }

/* cella szoveges jobb*/
.jobb{
 text-align: right;
 }

/* checkbox cim*/
.chk_th{
text-align: center; 
vertical-align: middle; 
word-wrap: break-word;
}

/* checkbox td*/
/* ezt nem lehet hover-ni mert akkor mindig olyan lesz */
.chk_td{
text-align: center; 
vertical-align: middle; 
}


/* ez akkor minden td bal-ra szines ha ra megy az eger */
.bal:hover {background-color: coral;}
/* ez akkor minden cimre szines ha ra megy az eger */
.cim:hover {background-color: coral;}
.chk_th:hover {background-color: coral;}


/* ez akkor kikakpcsolja a hovert */
.no-hover {
  pointer-events: none;
}

/* ################################################################## */
/* eddig kell */
/* ################################################################## */
/* ################################################################## */


div.border {
  border-style: solid;
  border-color: red green blue yellow;
  border-width: 20px;
  border-radius: 12px;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
  text-align: center;
  padding: 5px;
  /* outline: 5px solid yellow;*/
  outline: 20px solid yellow;
  outline-offset: 15px;
}
p.egy {
  text-shadow: 0 0 3px #FF0000;
   font-family: Arial, Helvetica, sans-serif;
   text-align: center;
}
input.egy {
  text-shadow: 0 0 3px #FF0000;
   font-family: Arial, Helvetica, sans-serif;
}

th.l, td.l {
/*  padding: 8px;*/
  padding: 1px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

td.l:hover {background-color: coral;}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #04AA6D;
}

.button1:hover {
  background-color: #04AA6D;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.button3 {
 width: 150px;
 text-align: center; 
 padding: 5px; 
 border: 1px solid black; 
 border-radius: 10px 10px 10px 10px; 
 background-color:silver; 
 cursor: grab; 
 text-align: center; 
 color: black;
}

.button3:hover {
  background-color: #f44336;
  color: white;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}