html,
body {
  margin:0;
  padding:0;
  height:100%;
}
body {
  font-family: Century Gothic, Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  background: #ffffff;
}
body > div.body {
  min-height: 100%;
  position: relative;
}
.link { 
  cursor: pointer;
}
.underline {
   text-decoration: underline;
}
.strike {
   text-decoration: line-through;
}
.drag {
  cursor: move;
}
.center {
  text-align: center;
}
.shablon, .hidden {
  display: none;
}
.left { float: left;}
.right { float: right;}
.cb {
  clear: both;
}
.number {
  text-align: right;
}
h1,h2,h3,h4,h5,h6{
  font-size: 1em;
  margin: 0;
  padding: 0;
  font-weight: normal;
}
.big {
  font-size: 1.4em;
}

/*general classes*/
/*general select list*/
div.box {background-color: #fff;}
div.box > label {
  display: block; 
  color: #fff;
  background-color: #7DCEFD;
  font-size: 1.6em;
  padding: 0.318em 1em;
}
div.box > div, div.box > form {
  padding: 1em;
  display: block;
}


table {
  border-collapse: collapse;
  width: 100%;
}
table, table > thead > tr > td, table > tbody > tr > td { vertical-align: top; }
table > thead > tr > th {
  font-weight: normal;
  color: DarkSlateGray;
  background-color: Gainsboro;
  text-align: left;
}
table > thead > tr > th[data-field] {
  cursor: pointer;
}
table > thead > tr > th.[data-order-type]:after{
  dispaly: inline-block;
  margin-left: 1em;
}
table > thead > tr > th[data-order-type=ASC]:after {
  content: "▲";
  color: green;
}
table > thead > tr > th[data-order-type=DESC]:after {
  content : "▼";
  color: red;
}


table.lists {
  border-spacing: 0.2em;
}
table.lists > thead > tr > th, table.lists, table.lists > tbody > tr > td {
  border: 1px solid grey;
  padding: 0.2em;
}
table.lists > tbody > tr {
  cursor: pointer;
}
table.lists > tbody > tr:hover {
  background-color: LightSteelBlue;
}
table.lists > tbody > tr.selected, table.lists > tbody > tr.selected:hover {
  background-color: PowderBlue;
}


textarea,  select, input[type=text], input[type=password], input[type=number], input[type=email] {
  border: 1px solid grey;
  /*background-color: Ivory;*/
  font-family: Century Gothic, Tahoma, Verdana, Arial, Helvetica, sans-serif;
  /*font-style: italic;*/
  font-size: 1.1em;
  box-sizing: border-box;
}
textarea:disabled,  select:disabled, input[type=text]:disabled, input[type=password]:disabled {
  border: 1px solid #eee;
  background-color: #ddd;
}
[class~=ctl] {display: inline-block;}
input[type=button], input[type=submit], input[type=reset], button, [class~=ctl], .nav {
  border: 0;
  margin: 0;
  background-color: Chocolate;
  padding: 0.3em 1em;
  color: #fff;
  font-weght: normal;
  cursor: pointer;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, [class~=ctl]:hover, .nav:hover {
  background-color: SaddleBrown;
} 


div[position=main] {display: none;}


div.fog, div.fog_without_loader {
  position: absolute;
  top: 0; bottom: 0; left:0; right: 0;
  background-color: Silver;
  opacity:0.8;
  z-index: 1000;
}
div.fog:after{
  content: "";
  background-image: url(images/ajax-loader.gif);
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  z-index: 999;
}
 
.popup > .fog{ position: fixed; z-index: -1;}
.popup > .fog:after{display: none;}
.popup {
  display: none;
  position: fixed;
  /*width: 30em;*/
  /*height: 22.5em;*/
  top: 10%;
  /*left: 50%;
  margin-left: -15em;
  */
  left: 0; right: 0;
  vertical-align: middle;
  z-index: 1000;
}
.popup > div.outer {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}
.popup > div.outer > div.inner {
  padding: 5em 4.1em;
  background-color: #fff;
  position: relative;
  /*position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;*/
}
.popup > div.outer > div.inner > div.close {
  background-color: #4b4f5a;
  color: #fff;
  cursor: pointer;
  font-size: 2em;
  height: 1em;
  line-height: 1em;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  width: 1em;
  z-index: 1;
}
.popup > div.outer > div.inner > div.close:hover {
  color: #7dcefd;
}



details, summary { display: block; border: 1px solid #666; padding: 1em; }
/* Apply a pointer cursor and style the background upon hover to indicate <summary> is a clickable element. */
/* These styles can be applied regardless of whether the fallback is needed */
summary { cursor: pointer; }
summary:hover, summary:focus { background: #ddd; }

/* The following styles are not really needed, since the jQuery script takes care of hiding/displaying the elements. */
/* However, we’re still gonna use CSS as well to prevent FOUC in browsers that understand these selectors. */
/* Remember: by default (and probably most of the time), the contents of the <details> element are hidden. */
.no-details details > * { display: none; }
/* This doesn’t work very well in Firefox 3.6.x */
/* .no-details details[open] > * { display: block; } */
/* The following doesn’t toggle correctly in WebKit:
.no-details details > summary:before { content: '► '; }
.no-details details[open] > summary:before { content: '▼ '; }
*/
/* And yes, it should really be ::before, but that doesn’t work in IE8 */
.no-details details > summary:before { float: left; width: 20px; content: '► '; }
.no-details details.open > summary:before { content: '▼ '; }
/* For IE6 and IE7, who don’t support generated content, you could use padding-left + a background image instead */
/* I really couldn’t be bothered though. */
/*
.no-details details > summary { padding-left: 20px; background: url(img/arrow-sprite.png) no-repeat 0 0; }
.no-details details.open > summary { background-position: 0 -20px; }
*/
/* Make sure summary remains visible */
.no-details details summary { display: block; }



ul.tabs {
  display: block;
  margin: 0 0 0 1em;
  padding: 0;
}
ul.tabs > li {
  background-color: Lavender;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  margin: 0 0 0 0.6em;
  padding: 0.5em;
}
ul.tabs > li.selected {
  background-color: LightSteelBlue;
}
div.tab {
  background-color: LightSteelBlue;
  padding: 1em;
}


.flash {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;
}

@-webkit-keyframes flash {
    0% { background-color: none; }
    50% { background-color: OrangeRed; }
    100% { background-color: none; }
}

@-moz-keyframes flash {
    0% { background-color: none; }
    50% { background-color: OrangeRed; }
    100% { background-color: none; }
}

@-ms-keyframes flash {
    0% { background-color: none; }
    50% { background-color: OrangeRed; }
    100% { background-color: none; }
}


h1 {
  border-bottom: 1px solid darkred;
  font-size: 2em;
  margin: 0.5em 0;
}
h2 {
  /*border-bottom: 1px solid darkred;*/
  font-size: 1.4em;
  margin: 0.5em 0;
}
h3 {
  font-size: 1.2em;
  margin: 0.5em 0 0.2em 0;
}


div[data-tag=nosokomeia] ul[data-table] { 
  padding: 0; 
  margin: 1em 0 0 0;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}


div[data-tag=nosokomeia] ul[data-table] > li[data-id] {
  margin: 0 1em 1em 0;
  background-color: #fff;
  padding: 1em;
  cursor: pointer;
  display: block;
  width: 20%;
}
div[data-tag=nosokomeia] ul[data-table] > li[data-id]:hover { background-color: Linen; }
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div {}
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=id] {float: right; color: darkgrey;}
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=default_tmimata_ids],
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=coordinates],
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=region_id] {display: none;}
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=nosokomeio_name] {display: block; font-size: 1.4em; font-weight: bold;} 
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=nosokomeio_long_name] {display: block; font-size: 1.2em;} 
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=nosokomeio_address] {font-style: italic;}
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=nosokomeio_phone],
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=dimos],
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=nomos] {display: inline-block;}
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=dimos]:before {content: " [";}
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=nomos]:after {content: "]";}

div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=dimos_nosokomeiou],
div[data-tag=nosokomeia] ul[data-table] > li[data-id] > div[data-field=nomos_nosokomeiou] {display: inline-block;}









div[data-tag=nosokomeia] form[name=nosokomeio] {display: none;}
div[data-tag=nosokomeia] form[name=nosokomeio] > label {display: block; margin: 1em;}
div[data-tag=nosokomeia] form[name=nosokomeio] > label > span { display: inline-block; min-width: 10em; vertical-align: top;}
div[data-tag=nosokomeia] form[name=nosokomeio] > label > input {width: 40em;}
div[data-tag=nosokomeia] form[name=nosokomeio] > label > textarea {width: 40em; height: 3em;}
div[data-tag=nosokomeia] form[name=nosokomeio] ul[data-value=default_tmimata_ids] {
  padding: 0; 
  margin: 1em 0;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  width: 60em;  
}

div[data-tag=nosokomeia] form[name=nosokomeio] ul[data-value=default_tmimata_ids] > li[data-id] {
  margin-bottom: 0.3em;
  display: block;
  width: 20em;
}
div[data-tag=nosokomeia] form[name=nosokomeio] ul[data-value=default_tmimata_ids] > li[data-id]:hover { background-color: Linen; }
div[data-tag=nosokomeia] form[name=nosokomeio] ul[data-value=default_tmimata_ids] > li[data-id].checked > label { background-color: Lime; }






div[data-tag=nosokomeia] form[name=region] {display: none;}
div[data-tag=nosokomeia] form[name=region] > label {display: block; margin: 1em;}
div[data-tag=nosokomeia] form[name=region] > label > span { display: inline-block; min-width: 5em;}
div[data-tag=tmimata] ul[data-table] { 
  padding: 0; 
  margin: 1em 0 0 0;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}

div[data-tag=tmimata] ul[data-table] > li[data-id] { 
  display: block; 
  border: 1px solid darkgrey; 
  padding: 1em; 
  margin: 0 1em 1em 0;
  background-color: Ivory;
  cursor: pointer;
  width: 20%;
}
div[data-tag=tmimata] ul[data-table] > li[data-id]:hover { background-color: Linen; }
div[data-tag=tmimata] ul[data-table] > li[data-id] > div {}
div[data-tag=tmimata] ul[data-table] > li[data-id] > div[data-field=id] {float: right; color: darkgrey;}
div[data-tag=tmimata] ul[data-table] > li[data-id] > div[data-field=tmhma_name], 
div[data-tag=tmimata] ul[data-table] > li[data-id] > div[data-field=tmhma_short_name] {display: inline-block;}
div[data-tag=tmimata] ul[data-table] > li[data-id] > div[data-field=tmhma_short_name] {font-style: italic;}
div[data-tag=tmimata] ul[data-table] > li[data-id] > div[data-field=tmhma_short_name]:before {content: " [";}
div[data-tag=tmimata] ul[data-table] > li[data-id] > div[data-field=tmhma_short_name]:after {content: "]";}

div[data-tag=tmimata] ul[data-table] > li[data-id] > div[data-field=tmhma_description] {display: block;}

div[data-tag=tmimata] form[name=tmima] {display: none;}

div[data-tag=tmimata] form[name=tmima] {}
div[data-tag=tmimata] form[name=tmima] > label {display: block; margin: 1em;}
div[data-tag=tmimata] form[name=tmima] > label > span { display: inline-block; min-width: 10em;}
.saturnate[data-nomos=Θεσσαλονίκης] {background-color: #ADFF2F;}
.saturnate[data-nomos=Αττικής] {background-color: #FFAD2F;}
.saturnate[data-nomos=Πειραιά] {background-color: #2FADFF;}


div[data-tag=efimeries] {}
div[data-tag=efimeries] div.view.body { background-color: Azure; padding: 1em;}
div[data-tag=efimeries] div.view.ctl { background-color: Gainsboro; color: #333; margin: 0 0 0 1em;}
div[data-tag=efimeries] div.view.ctl:hover { background-color: Honeydew}
div[data-tag=efimeries] div.view.ctl.selected { background-color: Azure;}


div[data-tag=efimeries] form[name=efimeries] {display: none;}
div[data-tag=efimeries] form[name=efimeries] label[for=nosokomeio_id] > span,
div[data-tag=efimeries] form[name=efimeries] label[for=tmimata_id] > span,
div[data-tag=efimeries] form[name=efimeries] section label > span {font-weight: bold;}

div[data-tag=efimeries] form[name=efimeries] div[data-for-mode] {
  margin-bottom: 1em;
}

div[data-tag=efimeries] form[name=efimeries] div[data-for-mode] ul {
  padding: 0; 
  margin: 0;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
  width: 60em;  
}

div[data-tag=efimeries] form[name=efimeries] div[data-for-mode] ul li[data-id] {
  display: block;
  width: 20em;
}
div[data-tag=efimeries] form[name=efimeries] div[data-for-mode] ul li[data-id].checked > label{
  background-color: Lime;
}
div[data-tag=efimeries] form[name=efimeries] div[data-for-mode] ul.emphasize {
  background-color: LemonChiffon;
}

div[data-tag=efimeries] form[name=efimeries] div[data-time-range-schema=true] {margin: 0.5em 0;}
div[data-tag=efimeries] form[name=efimeries] div[data-time-range-schema=true] > ul {margin: 0; padding: 0;}
div[data-tag=efimeries] form[name=efimeries] div[data-time-range-schema=true] > ul > li{
  display: inline-block;
  cursor: pointer; 
  margin-right: 1em; 
  padding: 0.2em; 
  background-color: MistyRose;
  border: 1px solid Gainsboro;
}
div[data-tag=efimeries] form[name=efimeries] div[data-time-range-schema=true] > ul > li:hover{ background-color: Orange;}
div[data-tag=efimeries] form[name=efimeries] div[data-time-range-schema=true] > ul > li.selected{background-color: Coral;}

div[data-tag=efimeries] form[name=efimeries] [data-check-action]{
  display: inline-block;
  cursor: pointer; 
  font-size: 0.7em;
  margin-right: 1em; 
  padding: 0.2em; 
  background-color: MistyRose;
  border: 1px solid Gainsboro;
}
div[data-tag=efimeries] form[name=efimeries] [data-check-action]:hover{
  background-color: Orange;
}


div[data-tag=efimeries] form[name=efimeries_criteria]{margin: 1em 0; font-size: 1.2em;}
div[data-tag=efimeries] form[name=efimeries_criteria].by_tmimata label[for=region_nomos_criteria] {display: none;}
div[data-tag=efimeries] form[name=efimeries_criteria] input[name=date_stamp]  {width: 6em; padding: 0.1em; font-size: 1.2em;}

div[data-tag=efimeries] div[data-result=efimeries] {}
div[data-tag=efimeries] div[data-result=efimeries] > div[data-nosokomeio_id],
div[data-tag=efimeries] div[data-result=efimeries] > div[data-tmimata_id] {
  margin-top: 1em;
  padding: 1em;
  border: 1px solid Gainsboro;
  background-color: Cornsilk;  
}
div[data-tag=efimeries] div[data-result=efimeries] > div:hover { background-color: Tan;}

div[data-tag=efimeries] div[data-result=efimeries] > div h2 { font-weight: bold;}

div[data-tag=efimeries] div[data-result=efimeries] > div div.oraria {
  padding: 0; 
  margin: 0;
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-wrap: wrap; /* Safari */
}
div[data-tag=efimeries] div[data-result=efimeries] > div div.oraria > div.orario {
  padding: 1em; 
  margin: 0 1em 1em 0;
  background-color: LightCyan;
  border: 1px solid Tan;
}
div[data-tag=efimeries] div[data-result=efimeries] > div div.oraria > div.orario h3 >[data-name=apo],
div[data-tag=efimeries] div[data-result=efimeries] > div div.oraria > div.orario h3 >[data-name=ews] {font-weight: bold;}
div[data-tag=efimeries] div[data-result=efimeries] > div div.oraria > div.orario h3 >[data-name=ews] > span {color: red;}

div[data-tag=efimeries] div[data-result=efimeries] > div ul {
  margin: 0 0 1em 0;
  padding: 0;
}
div[data-tag=efimeries] div[data-result=efimeries] > div ul > li[data-id] { display: block;}