@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);


/* ------------ GENERAL -----------------------------*/

body {
    font-size: 14px;
    color: #0B263B;
    font-family: 'Lato', sans-serif;
    background-color: white;
    background-size: cover;
}

body.week_tuned {
    background: #fff;
}

button, .button {
    font-family: inherit;
}
label small {
    text-transform: none !important;
}

.current {
    color: #ff0066}

/* used to highlight the current item */
.error {
    color: #ff0066;
    font-weight: bold
}

/* for error messages */
.warning {
    color: #ff0066}

/* for warning messages */
.note {
    font-style: italic
}

h1 {
    font-size: x-large;
    clear: both
}

h2 {
    font-size: large;
    clear: both
}

img {
    border: 0
}

a:link {
    color: #0B263B;
    text-decoration: none;
}

a:visited {
    color: #0B263B;
    text-decoration: none;
}

a:hover {
    color: #ff0066;
    text-decoration: underline;
}


body.week_tuned .Jaahalli td {}

body.week_tuned .Jaahalli tr.odd td {
    padding: 0;
    height: 0px;
    margin: 0;
}

body.week_tuned .Jaahalli tr.odd td.row_labels {
    visibility: hidden;
}

tr.even_row {
    background-color: #FBFBFB}

tr.odd_row {
    background-color: #F5F5F5}

td,
th {
    vertical-align: top
}

td form {
    margin: 0
}

/* Prevent IE from displaying margins around forms in tables. */

legend {
    font-weight: bold;
    font-size: large;
    font-family: Lato, sans-serif;
    color: #0B263B}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px
}

fieldset.admin {
    width: 100%;
    padding: 0 1.0em 1.0em 1.0em;
    border: 1px solid #C3CCD3}

fieldset fieldset {
    position: relative;
    clear: left;
    width: 100%;
    padding: 0;
    border: 0;
    margin: 0
}

/* inner fieldsets are invisible */
fieldset fieldset legend {
    font-size: 0
}

/* for IE: even if there is no legend text, IE allocates space  */

.naked {
    margin: 0;
    padding: 0;
    border-width: 0
}

/* Invisible tables used for internal needs */
table.naked {
    width: 100%;
    height: 100%
}

table:hover.naked {
    cursor: pointer
}

/* set cursor to pointer; if you don't it doesn't show up when show_plus_link is false */

table.admin_table {
    border-spacing: 0px;
    border-collapse: collapse;
    border-color: #C3CCD3;
    border-style: solid;
    border-top-width: 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 0
}

.admin_table th,
.admin_table td {
    vertical-align: middle;
    text-align: left;
    padding: 0.1em 0.5em 0.1em 0.5em;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 1px;
    border-style: solid;
}

.admin_table th {
    color: #000;
    background-color: #fff}

.admin_table td,
.admin_table th {
    border-color: #C3CCD3}

.admin_table th:first-child {
    border-left-color: #fff}

.admin_table td.action {
    text-align: center
}

.admin_table td.action div {
    display: inline-block
}

.admin_table td.action div div {
    display: table-cell
}

div.freeze_panes {
    float: left
}

.freeze_panes th div,
.freeze_panes td div {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden
}

.freeze_panes th div {
    height: 1.5em;
    max-height: 1.5em;
    min-height: 1.5em
}

.freeze_panes td div {
    height: 2em;
    max-height: 2em;
    min-height: 2em
}

.freeze_panes td.int div {
    width: 6em;
    text-align: right;
    padding-right: 0.5em
}

.freeze_panes td.boolean {
    text-align: center
}

.freeze_panes td.boolean div {
    display: block
}

.freeze_panes td.boolean img {
    margin-top: 3px
}

select.room_area_select {
    margin-right: 0.5em
}

.form_general select#new_area,
.form_general select#new_category {
    width: 60%;
}

/* ------------ ADMIN.PHP ---------------------------*/
form.form_admin {
    float: left;
    clear: left;
    margin: 2em 0 0 0
}

.form_admin fieldset {
    float: left;
    width: auto;
    border: 1px solid #C3CCD3;
    padding: 1em
}

.form_admin legend {
    font-size: small
}

.form_admin div {
    float: left;
    clear: left
}

.form_admin label {
    display: block;
    float: left;
    clear: left;
    width: 7.0em;
    min-height: 2.0em;
    text-align: right;
}

.form_admin input {
    display: block;
    float: left;
    clear: right;
    width: 10.5em;
    margin-top: -0.2em;
    margin-left: 1.0em;
    font-family: Lato, sans-serif;
    font-size: small;
}

.form_admin input.submit {
    margin-left: 110px;
}

.admin h2 {
    clear: left
}

div#area_form,
div#room_form {
    float: left;
    padding: 0 0 2em 1em
}

div#area_form {
    width: auto
}

div#room_form {
    width: 95%
}

div#custom_html {
    float: left;
    padding: 0 0 3em 1em
}

#area_form form {
    float: left;
    margin-right: 1em
}

#area_form label#area_label {
    display: block;
    float: left;
    font-weight: bold;
    margin-right: 1.0em
}

#areaChangeForm select {
    display: block;
    float: left;
    margin: -0.1em 1.5em 0 0
}

#areaChangeForm input {
    float: left;
    margin: -0.2em 0.5em 0 0
}

#areaChangeForm input.button {
    display: block;
    float: left;
    margin: 0 0.7em
}

div.header_columns,
div.body_columns {
    position: relative;
    float: left;
    overflow-x: scroll;
    overflow-y: hidden
}

div.header_columns {}

div.body_columns {}

.body_columns .admin_table th:first-child {
    border-left-color: #C3CCD3;
}


/* ------------ DAY/WEEK/MONTH.PHP ------------------*/

div#dwm_header {
    width: 100%;
    float: left;
    margin-top: 1.0em;
    margin-bottom: 0.5em
}

div#dwm_areas {
    float: left;
    margin-right: 2.0em
}

div#dwm_rooms {
    float: left;
    margin-right: 2.0em
}

#dwm_header h3 {
    font-size: small;
    font-weight: normal;
    text-decoration: underline;
    margin-top: 0;
    margin-bottom: 0.5em;
    padding-bottom: 0
}

#dwm_header ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
    margin-top: 0;
}

#dwm_header li {
    padding-left: 0;
    margin-left: 0
}

div#dwm {
    margin-bottom: 0.5em
}

#dwm {
    text-align: center
}

#dwm div.timezone {
    opacity: 0.8
}


div.date_nav {
    float: left;
    width: 100%;
    margin-top: 0.5em;
    margin-bottom: 25px;
    font-weight: bold
}

div.date_before {
    float: left;
    width: 33%;
    text-align: left
}

div.date_now {
    float: left;
    width: 33%;
    text-align: center
}

div.date_after {
    float: right;
    width: 33%;
    text-align: right
}

table.dwm_main {
    clear: both;
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    border-color: white;
    border-width: 0px;
    border-style: solid
}

.dwm_main td {
    border-top: 0px solid #ededed;
    border-left: 1px solid #ededed;
    border-bottom: 0;
    border-right: 0;
}

.dwm_main td:first-child {
    border-left: 0
}

.dwm_main th {
    font-size: small;
    font-weight: normal;
    vertical-align: top;
    padding: 0 2px;
    text-align: center;
    color: #000;
    background-color: #fff;
    border-left: 1px solid white;
    font-weight: bold;
}

.dwm_main th:first-child {
    border-left: 0
}

.dwm_main a {
    display: block;
    min-height: inherit
}

.dwm_main tbody a {
    padding: 0 2px
}

.dwm_main th a:link {
    color: #000;
    text-decoration: none;
    font-weight: bold
}

.dwm_main th a:visited {
    color: #000;
    text-decoration: none;
    font-weight: bold
}

.dwm_main th a:hover {
    color: #000;
    text-decoration: underline;
    font-weight: bold
}

.dwm_main#day_main th.first_last {
    width: 1%
}

.dwm_main#week_main th {
    width: 14.1%
}

.dwm_main#week_main th.first_last {
    width: 1%;
    vertical-align: bottom
}

.dwm_main#month_main th {
    width: 14.3%
}

.dwm_main#month_main td {
    border-top: 1px solid #ededed}

.dwm_main#month_main td.valid {
    background-color: #ffffff}

.dwm_main#month_main td.invalid {
    background-color: #d1d9de}

.dwm_main#month_main a {
    height: 100%;
    width: 100%;
    padding: 0 2px 0 2px
}

a.new_booking,
a.old_booking {
    display: block;
    font-size: medium;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

a.new_booking:hover {
    background: #0046BA;
}

a.old_booking:hover {
    background: #ccc;
}

.ui-datepicker .ui-datepicker-title select {
    color: #000;
}

.new_booking img {
    margin: auto;
    padding: 4px 0 2px 0
}

img.repeat_symbol {
    float: right;
    padding: 3px
}

.dwm_main#month_main img.repeat_symbol {
    padding: 2px
}

.new_booking img {display: none}
div.cell_container {
    position: relative;
    float: left;
    width: 100%;
    /* the containing div for a.new_booking and the naked table  */
    height: 100px
}

/* NOTE:  if you change the value of (min-)height, make sure you */
/* also change the value of height in mrbs-ielte6.css */
.month a.new_booking {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10
}

/* needs to be above the base, but below the date (monthday) */

.dwm_main#month_main table.naked {
    position: absolute;
    top: 0;
    left: 0;
    /* used when javascript cursor set - similar to new_booking  */
    width: 100%;
    height: 100%;
    z-index: 10
}

div.cell_header {
    position: relative;
    width: 2.0em;
    z-index: 20;
    /* needs to be above the new booking anchor */
    min-height: 20%;
    height: 20%;
    max-height: 20%;
    overflow: hidden
}

a.monthday {
    display: block;
    width: 100%;
    font-size: medium
}

/* the date in the top left corner */

div.booking_list {
    position: relative;
    z-index: 20;
    /* contains the list of bookings */
    max-height: 80%;
    font-size: x-small;
    /* needs to be above new_booking and naked table */
    overflow: auto}

.booking_list a {
    font-size: x-small
}


td.A {background-color: #ffff99}
.month div.A {float: left; max-height: 1.3em; height: 1.3em; min-height: 1.3em; overflow: hidden; background-color: #ffff99}
td.B {background-color: #99cccc}
.month div.B {float: left; max-height: 1.3em; height: 1.3em; min-height: 1.3em; overflow: hidden; background-color: #99cccc}
td.C {background-color: #ffffcd}
.month div.C {float: left; max-height: 1.3em; height: 1.3em; min-height: 1.3em; overflow: hidden; background-color: #ffffcd}
td.D {background-color: #cde6e6}
.month div.D {float: left; max-height: 1.3em; height: 1.3em; min-height: 1.3em; overflow: hidden; background-color: #cde6e6}
td.E {background-color: #6dd9c4}
.month div.E {float: left; max-height: 1.3em; height: 1.3em; min-height: 1.3em; overflow: hidden; background-color: #6dd9c4}
td.F {background-color: #82adad}
.month div.F {float: left; max-height: 1.3em; height: 1.3em; min-height: 1.3em; overflow: hidden; background-color: #82adad}
td.G {background-color: #ccffcc}
.month div.G {float: left; max-height: 1.3em; height: 1.3em; min-height: 1.3em; overflow: hidden; background-color: #ccffcc}
td.H {background-color: #d9d982}
.month div.H {float: left; max-height: 1.3em; height: 1.3em; min-height: 1.3em; overflow: hidden; background-color: #d9d982}
td.I {background-color: #99cc66}
.month div.I {float: left; max-height: 1.3em; height: 1.3em; min-height: 1.3em; overflow: hidden; background-color: #99cc66}
td.J {background-color: #e6ffe6}
.month div.J {float: left; max-height: 1.3em; height: 1.3em; min-height: 1.3em; overflow: hidden; background-color: #e6ffe6}
.dwm_main#week_main th.hidden_day,
.dwm_main#month_main th.hidden_day {
    width: 0%;
     display: none}

td.hidden_day {
    background-color: #d1d9de;
    /* hidden columns (eg weekends) in the week and month views */
    font-size: medium;
    font-weight: bold;
    border-top: 1px solid #d1d9de;
     display: none}

td.row_highlight {
    background-color: #0b45bb}

/* used for highlighting a row */
td.even_row {
    background-color: #FBFBFB}

/* even rows in the day view */
td.odd_row {
    background-color: #F5F5F5}

/* odd rows in the day view */
td.row_lab {
    background-color: #fff;
    white-space: nowrap
}

/* used for the row labels column */
.row_lab:link {
    color: #000;
    text-decoration: none;
    font-weight: normal
}

.row_lab a:visited {
    color: #000;
    text-decoration: none;
    font-weight: normal
}

.row_lab a:hover {
    color: #000;
    text-decoration: underline;
    font-weight: normal
}

td.row_lab a {
    font-weight: normal;
    color: #000;
}

.dwm_main td:hover.odd_row,
.dwm_main td:hover.even_row {
    background-color: #0b45bb;
    opacity: 0.6;
}

.dwm_main td:hover.multiple_booking.odd_row {
    background-color: #F5F5F5}

.dwm_main td:hover.multiple_booking.even_row {
    background-color: #FBFBFB}

.dwm_main tr:hover td.row_lab {
    background-color: #0b45bb;
    color: #0B263B}

.dwm_main#month_main td:hover.valid {
    background-color: #0b45bb}


td.highlight {
    background-color: #0b45bb;
    color: #0B263B}

.highlight a:link {
    font-weight: normal;
    color: #0B263B}

/* used for JavaScript highlighting  */
.highlight a:visited {
    font-weight: normal;
    color: #0B263B}

/* used for JavaScript highlighting  */
.dwm_main tbody tr:hover a:link {
    color: #0B263B}

/* used for CSS highlighting (but will also be used in JavaScript highlighting */
.dwm_main tbody tr:hover a:visited {
    color: #0B263B}

/* used for CSS highlighting (but will also be used in JavaScript highlighting */
.month .highlight a:link {
    font-weight: bold
}

.month .highlight a:visited {
    font-weight: bold
}


div.slots1 {min-height: 13px; max-height: 13px; height: 13px}
div.slots2 {min-height: 27px; max-height: 27px; height: 27px}
div.slots3 {min-height: 41px; max-height: 41px; height: 41px}
div.slots4 {min-height: 55px; max-height: 55px; height: 55px}
div.slots5 {min-height: 69px; max-height: 69px; height: 69px}
div.slots6 {min-height: 83px; max-height: 83px; height: 83px}
div.slots7 {min-height: 97px; max-height: 97px; height: 97px}
div.slots8 {min-height: 111px; max-height: 111px; height: 111px}
div.slots9 {min-height: 125px; max-height: 125px; height: 125px}
div.slots10 {min-height: 139px; max-height: 139px; height: 139px}
div.slots11 {min-height: 153px; max-height: 153px; height: 153px}
div.slots12 {min-height: 167px; max-height: 167px; height: 167px}
div.slots13 {min-height: 181px; max-height: 181px; height: 181px}
div.slots14 {min-height: 195px; max-height: 195px; height: 195px}
div.slots15 {min-height: 209px; max-height: 209px; height: 209px}
div.slots16 {min-height: 223px; max-height: 223px; height: 223px}
div.slots17 {min-height: 237px; max-height: 237px; height: 237px}
div.slots18 {min-height: 251px; max-height: 251px; height: 251px}
div.slots19 {min-height: 265px; max-height: 265px; height: 265px}
div.slots20 {min-height: 279px; max-height: 279px; height: 279px}
div.slots21 {min-height: 293px; max-height: 293px; height: 293px}
div.slots22 {min-height: 307px; max-height: 307px; height: 307px}
div.slots23 {min-height: 321px; max-height: 321px; height: 321px}
div.slots24 {min-height: 335px; max-height: 335px; height: 335px}
div.slots25 {min-height: 349px; max-height: 349px; height: 349px}
div.slots26 {min-height: 363px; max-height: 363px; height: 363px}
div.slots27 {min-height: 377px; max-height: 377px; height: 377px}
div.slots28 {min-height: 391px; max-height: 391px; height: 391px}
div.slots29 {min-height: 405px; max-height: 405px; height: 405px}
div.slots30 {min-height: 419px; max-height: 419px; height: 419px}
div.slots31 {min-height: 433px; max-height: 433px; height: 433px}
div.slots32 {min-height: 447px; max-height: 447px; height: 447px}
div.slots33 {min-height: 461px; max-height: 461px; height: 461px}
div.slots34 {min-height: 475px; max-height: 475px; height: 475px}
div.slots35 {min-height: 489px; max-height: 489px; height: 489px}
div.slots36 {min-height: 503px; max-height: 503px; height: 503px}
div.slots37 {min-height: 517px; max-height: 517px; height: 517px}
div.slots38 {min-height: 531px; max-height: 531px; height: 531px}
div.slots39 {min-height: 545px; max-height: 545px; height: 545px}
div.slots40 {min-height: 559px; max-height: 559px; height: 559px}
div.slots41 {min-height: 573px; max-height: 573px; height: 573px}
div.slots42 {min-height: 587px; max-height: 587px; height: 587px}
div.slots43 {min-height: 601px; max-height: 601px; height: 601px}
div.slots44 {min-height: 615px; max-height: 615px; height: 615px}
div.slots45 {min-height: 629px; max-height: 629px; height: 629px}
div.slots46 {min-height: 643px; max-height: 643px; height: 643px}
div.slots47 {min-height: 657px; max-height: 657px; height: 657px}
div.slots48 {min-height: 671px; max-height: 671px; height: 671px}
div.slots49 {min-height: 685px; max-height: 685px; height: 685px}
div.slots50 {min-height: 699px; max-height: 699px; height: 699px}
div.slots51 {min-height: 713px; max-height: 713px; height: 713px}
div.slots52 {min-height: 727px; max-height: 727px; height: 727px}
div.slots53 {min-height: 741px; max-height: 741px; height: 741px}
div.slots54 {min-height: 755px; max-height: 755px; height: 755px}
div.slots55 {min-height: 769px; max-height: 769px; height: 769px}
div.slots56 {min-height: 783px; max-height: 783px; height: 783px}
div.slots57 {min-height: 797px; max-height: 797px; height: 797px}
div.slots58 {min-height: 811px; max-height: 811px; height: 811px}
div.slots59 {min-height: 825px; max-height: 825px; height: 825px}
div.slots60 {min-height: 839px; max-height: 839px; height: 839px}
div.slots61 {min-height: 853px; max-height: 853px; height: 853px}
div.slots62 {min-height: 867px; max-height: 867px; height: 867px}
div.slots63 {min-height: 881px; max-height: 881px; height: 881px}
div.slots64 {min-height: 895px; max-height: 895px; height: 895px}
div.slots65 {min-height: 909px; max-height: 909px; height: 909px}
div.slots66 {min-height: 923px; max-height: 923px; height: 923px}
div.slots67 {min-height: 937px; max-height: 937px; height: 937px}
div.slots68 {min-height: 951px; max-height: 951px; height: 951px}
div.slots69 {min-height: 965px; max-height: 965px; height: 965px}
div.slots70 {min-height: 979px; max-height: 979px; height: 979px}
div.slots71 {min-height: 993px; max-height: 993px; height: 993px}
div.slots72 {min-height: 1007px; max-height: 1007px; height: 1007px}
div.slots73 {min-height: 1021px; max-height: 1021px; height: 1021px}
div.slots74 {min-height: 1035px; max-height: 1035px; height: 1035px}
div.slots75 {min-height: 1049px; max-height: 1049px; height: 1049px}
div.slots76 {min-height: 1063px; max-height: 1063px; height: 1063px}
div.slots77 {min-height: 1077px; max-height: 1077px; height: 1077px}
div.slots78 {min-height: 1091px; max-height: 1091px; height: 1091px}
div.slots79 {min-height: 1105px; max-height: 1105px; height: 1105px}
div.slots80 {min-height: 1119px; max-height: 1119px; height: 1119px}
div.slots81 {min-height: 1133px; max-height: 1133px; height: 1133px}
div.slots82 {min-height: 1147px; max-height: 1147px; height: 1147px}
div.slots83 {min-height: 1161px; max-height: 1161px; height: 1161px}
div.slots84 {min-height: 1175px; max-height: 1175px; height: 1175px}
div.slots85 {min-height: 1189px; max-height: 1189px; height: 1189px}
div.slots86 {min-height: 1203px; max-height: 1203px; height: 1203px}
div.slots87 {min-height: 1217px; max-height: 1217px; height: 1217px}
div.slots88 {min-height: 1231px; max-height: 1231px; height: 1231px}
div.slots89 {min-height: 1245px; max-height: 1245px; height: 1245px}
div.slots90 {min-height: 1259px; max-height: 1259px; height: 1259px}
div.slots91 {min-height: 1273px; max-height: 1273px; height: 1273px}
div.slots92 {min-height: 1287px; max-height: 1287px; height: 1287px}
div.slots93 {min-height: 1301px; max-height: 1301px; height: 1301px}
div.slots94 {min-height: 1315px; max-height: 1315px; height: 1315px}
div.slots95 {min-height: 1329px; max-height: 1329px; height: 1329px}
div.slots96 {min-height: 1343px; max-height: 1343px; height: 1343px}
div.slots97 {min-height: 1357px; max-height: 1357px; height: 1357px}
div.slots98 {min-height: 1371px; max-height: 1371px; height: 1371px}
div.slots99 {min-height: 1385px; max-height: 1385px; height: 1385px}
div.slots100 {min-height: 1399px; max-height: 1399px; height: 1399px}
div.slots101 {min-height: 1413px; max-height: 1413px; height: 1413px}
div.slots102 {min-height: 1427px; max-height: 1427px; height: 1427px}
div.slots103 {min-height: 1441px; max-height: 1441px; height: 1441px}
div.slots104 {min-height: 1455px; max-height: 1455px; height: 1455px}
div.slots105 {min-height: 1469px; max-height: 1469px; height: 1469px}
div.slots106 {min-height: 1483px; max-height: 1483px; height: 1483px}
div.slots107 {min-height: 1497px; max-height: 1497px; height: 1497px}
div.slots108 {min-height: 1511px; max-height: 1511px; height: 1511px}
div.slots109 {min-height: 1525px; max-height: 1525px; height: 1525px}
div.slots110 {min-height: 1539px; max-height: 1539px; height: 1539px}
div.celldiv {
    margin: 0;
}

.row_lab div.celldiv {
    overflow: visible
}

/* we want to see the content in the row label columns */
div.mini,
div.maxi {
    position: relative
}

/* establish a relative position for the absolute position to follow */
div.multiple_control {
    display: none;
    /* will be over-ridden by JavaScript if enabled */
    position: absolute;
    z-index: 20;
    width: 13px;
    text-align: center;
    padding: 0;
    border-right: 1px solid #ededed;
    background-color: #ffff22}

.mini div.multiple_control {
    /* heights for maxi are set using in-line styles */
    height: 13px;
    max-height: 13px;
    min-height: 13px
}

div:hover.multiple_control {
    cursor: pointer
}

.multiple_booking table {
    height: 100%;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse
}

.multiple_booking td {
    border-left: 0
}

/* used for toggling multiple bookings from mini to maxi size */
.maximized div.mini {
    display: none
}

.maximized div.maxi {
    display: block
}

.minimized div.mini {
    display: block
}

.minimized div.maxi {
    display: none
}

/* booking privacy status */
.private {
    opacity: 0.6;
    font-style: italic
}

/* booking approval status */
.awaiting_approval {
    opacity: 0.6
}

.awaiting_approval a:before {
    content: "Vahvistamaton varaus: "
}

/* booking confirmation status */
.tentative {
    opacity: 0.6
}

.tentative a {
    font-weight: normal
}


/* ------------ DEL.PHP -----------------------------*/
div#del_room_confirm {
    padding-bottom: 3em
}

#del_room_confirm p {
    text-align: center;
    font-size: large;
    font-weight: bold
}

div#del_room_confirm_links {
    position: relative;
    margin-left: auto;
    margin-right: auto
}

span#del_yes {
    display: block;
    position: absolute;
    right: 50%;
    margin-right: 1em;
    font-size: large
}

span#del_no {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: 1em;
    font-size: large
}

#del_room_confirm_links a:hover {
    cursor: pointer
}

/* for IE */
#del_room_confirm_links span:hover {
    text-decoration: underline
}

/* for Firefox */


/* ------------ EDIT_AREA_ROOM.PHP ------------------*/
.edit_area_room .form_general fieldset fieldset {
    padding-top: 0.5em;
    padding-bottom: 0.5em
}

.edit_area_room .form_general fieldset fieldset legend {
    font-size: small;
    font-style: italic;
    font-weight: normal
}

.edit_area_room fieldset#time_settings {
    padding: 0;
    margin: 0
}

span#private_display_caution {
    display: block;
    margin-top: 1em;
    font-style: italic;
    font-weight: normal
}

#book_ahead_periods_note span {
    display: block;
    float: left;
    width: 24em;
    margin: 0 0 1em 1em;
    font-style: italic
}

.edit_area_room .form_general textarea {
    height: 6em;
    width: 25em
}

.edit_area_room div#custom_html {
    margin-top: 8px
}

.edit_area_room #area_category {
    width: 200px;
}


/* ------------ FORM_GENERAL ------------------------*/
/*                                                   */
/*   used in EDIT_ENTRY.PHP, REPORT.PHP,             */
/*   SEARCH.PHP and EDIT_AREA_ROOM.PHP               */

form.form_general {
    margin-top: 2.0em;
    width: 100%;
    padding: 0 20px;
}

.edit_entry form.form_general {
    min-width: 37.0em
}

.report form.form_general {
    min-width: 25.0em
}

.search form.form_general {
    min-width: 21.0em
}

.edit_area_room form.form_general {
    min-width: 28.0em
}

form.form_general#logon {
    min-width: 21.0em
}

form.form_general#db_logon {
    min-width: 25.0em
}

form#edit_room {
    float: left;
    width: auto;
    margin: 0 2em 1em 1em
}

.form_general div {
    float: left;
    clear: left;
    width: 100%
}

.form_general div div {
    float: none;
    clear: none;
    width: auto
}

.form_general div.group {
    float: left
}

.form_general div.group_container {
    float: left
}

.form_general .group_container div.group {
    clear: left
}

.form_general div.group.ampm {
    width: 16em
}

.edit_area_room div.group {
    clear: none;
    width: auto
}

.edit_area_room div.group#private_override div {
    clear: left
}

.form_general fieldset {
    width: auto;
    border: 0;
    padding-top: 2.0em
}

#edit_room fieldset {
    width: 100%;
    float: left;
    padding: 0;
    margin: 0
}

#edit_room fieldset.submit_buttons {
    margin-top: 1em
}

.form_general label {
    display: block;
    float: left;
    overflow: hidden;
    min-height: 1.0em;
    width: 20%;
    text-align: right;
    padding-bottom: 0.8em;
    font-weight: bold;
}

.edit_entry .form_general label {
    max-width: 10em
}

.report .form_general label {
    max-width: 12em
}

.search .form_general label {
    max-width: 8em
}

.edit_area_room .form_general label {
    max-width: 30em;
    width: 15em
}

#logon label {
    max-width: 8em
}

#db_logon label {
    max-width: 12em
}

.form_general .group label {
    clear: none;
    width: auto;
    max-width: 100%;
    font-weight: normal;
    overflow: visible;
    text-align: left
}

.form_general input {
    display: block;
    float: left;
    margin-left: 1.0em;
    font-family: Lato, sans-serif;
    font-size: small
}

.edit_entry .form_general input {
    width: 26em
}

.report .form_general input {
    width: 12em
}

.search .form_general input {
    width: 12em
}

.edit_area_room .form_general input {
    width: 12em
}

#logon input {
    width: 12em
}

#db_logon input {
    width: 12em
}

.form_general .group input {
    clear: none;
    width: auto
}

.form_general input.date {
    width: 6em
}

.form_general input.fileInput {
    width: 26em;
    height: 45px;
}

.form_general .progress {
    clear: both;
    float: left !important;
    height: 15px;
    margin-left: 220px;
    margin-top: -22px;
    width: 497px;
}

/* font family and size needs to be the same for input and textarea as their widths are defined in ems */
.form_general textarea {
    display: block;
    float: left;
    width: 26em;
    height: 11em;
    margin-left: 1.0em;
    margin-bottom: 0.5em;
    font-family: Lato, sans-serif;
    font-size: small
}

.form_general select {
    float: left;
    margin-left: 1.0em;
    margin-right: -0.5em;
    margin-bottom: 0.5em
}

.form_general input.radio {
    margin-top: 0.1em;
    margin-right: 2px
}

.form_general input.checkbox {
    width: auto;
    margin-top: 0.2em
}

.edit_area_room .form_general input.checkbox {
    margin-left: 1.0em
}

.edit_area_room .form_general #booking_policies input.text {
    width: 2.0em
}

.form_general input.submit {
    display: block;
    width: auto;
    float: left;
    clear: left;
    margin-top: 1.0em
}

div#edit_entry_submit {
    width: 20%;
    max-width: 10em
}

div#report_submit {
    width: 20%;
    max-width: 12em
}

div#search_submit {
    width: 20%;
    max-width: 8em
}

div#logon_submit {
    width: 20%;
    max-width: 8em
}

div#db_logon_submit {
    width: 20%;
    max-width: 12em
}

#edit_entry_submit input,
#report_submit input,
#search_submit input,
#logon_submit input,
#db_logon_submit input {
    position: relative;
    left: 100%;
    width: auto
}

div#edit_area_room_submit_back {
    float: left;
    width: 15em;
    max-width: 30em
}

div#edit_area_room_submit_save {
    float: left;
    clear: none;
    width: auto
}

#edit_area_room_submit_back input {
    float: right
}

.form_general .div_dur_mins input {
    width: 4.0em
}

.form_general .div_time input {
    width: 2.0em
}

.form_general .div_time input.time_hour {
    text-align: right
}

.form_general .div_time input.time_minute {
    text-align: left;
    margin-left: 0
}

.form_general .div_time span+input {
    margin-left: 0
}

.form_general .div_time span {
    display: block;
    float: left;
    width: 0.5em;
    text-align: center
}

.form_general input#duration {
    width: 2.0em;
    text-align: right
}

.form_general select#dur_units {
    margin-right: 1.0em;
    margin-left: 0.5em
}

.form_general div#ad {
    float: left
}

.form_general #ad label {
    clear: none;
    text-align: left;
    font-weight: normal
}

.form_general input#all_day {
    width: auto;
    margin-left: 3.0em;
    margin-right: 0.5em
}

.form_general #div_rooms select,
.form_general #div_typematch select {
    float: left;
    margin-right: 2.0em
}

fieldset#rep_info {
    border-top: 1px solid #C3CCD3;
    padding-top: 0.7em
}

.form_general input#rep_num_weeks {
    width: 2.0em
}

.edit_area_room span.error_area {
    display: block;
    width: 100%;
    margin-bottom: 0.5em
}



/* ------------ EDIT_USERS.PHP ------------------*/
div#form_container {
    width: auto;
    position: relative;
    float: left
}

/* this is the containing block against which the absolute positioning works */
#form_container input.submit {
    width: auto;
    position: absolute;
    bottom: 2.0em
}

/* bring both buttons up          */
form#form_edit_users {
    width: auto;
    margin-top: 2.0em
}

#form_edit_users fieldset {
    float: left;
    width: auto
}

#form_edit_users div {
    float: left;
    clear: left;
    width: auto
}

#form_edit_users div#edit_users_input_container {
    padding-bottom: 4.0em
}

/* padding-bottom leaves room for the submit buttons. */
/* Apply it to the div because applying it to the     */
/* fieldset does not work in all browsers (eg Safari) */
#form_edit_users label {
    display: block;
    float: left;
    min-height: 2.0em;
    width: 10.0em;
    text-align: right;
}

#form_edit_users input {
    display: block;
    float: left;
    width: 10.0em;
    margin-left: 1.0em;
}

#form_edit_users select,
#form_edit_users textarea {
    margin-left: 1.0em;
}

#form_edit_users textarea {
    margin-bottom: 0.5em
}

#form_edit_users p {
    display: block;
    float: left;
    clear: left;
    padding: 0.5em 0 0.7em 0;
    margin: 0;
    width: 26em
}

#form_edit_users ul {
    clear: left
}

#form_edit_users input.submit {
    right: 2.0em
}

/* and put the OK on the right     */
#form_delete_users input.submit {
    left: 2.0em
}

/* and put the Delete on the left */
#form_edit_users input.checkbox {
    width: auto;
    margin-left: 1.0em
}

form.edit_users_error {
    width: 10em;
    margin-top: 2.0em
}

div#user_list {
    float: left;
    width: 95%;
    padding: 2em 0 2em 1em
}

form#add_new_user {
    margin-left: 1em
}



/* ------------ FUNCTIONS.INC -------------------*/
#logon_box a {
    display: block;
    width: 100%;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    position: absolute;
    right: 110px;
    top: 5px;
    width: 100%;
}

table#banner {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    background: transparent;
    border-color: white;
    border-width: 0px;
    border-style: solid
}

#banner td {
    text-align: center;
    vertical-align: middle;
    background-color: #268b69;
    background: transparent;
    border-color: white;
    border-style: solid;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0px;
    padding: 6px;
    color: #f8eb00;
    height: 80px;
}

#banner td input {
    color: #000;
}

#banner td:first-child {
    border-left-width: 0
}

#banner td#company {
    font-size: large;
    color: #f8eb00 important !;
    text-align: left;
}

#banner #company div {
    width: 100%
}

#banner a:link {
    color: #c9ae60;
    text-decoration: none;
    font-weight: normal
}

#banner a:visited {
    color: #c9ae60;
    text-decoration: none;
    font-weight: normal
}

#banner a:hover {
    color: #c9ae60;
    text-decoration: underline;
    font-weight: normal
}

#banner input.date {
    text-align: center
}

#logon_box {
    float: right;
    position: relative;
}

.banner_navigation_button {
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: block;
    background: #212121;
    border: 1px solid #666;
    border-radius: 5px;
    position: relative;
    float: right;
}

span.bar_icon {
    width: 30px;
    height: 2px;
    background: #fff;
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

span.bar_icon:nth-of-type(2) {
    top: -10px;
}

span.bar_icon:nth-of-type(3) {
    top: 10px;
}

.banner_navigation_button:hover {
    background-position: -50px 0;
}

.banner_navigation_button.active {
    background-position: -50px 0;
}

table#colour_key {
    clear: both;
    border-spacing: 0;
    border-collapse: collapse
}

#colour_key td {
    width: 7.0em;
    padding: 2px;
    font-weight: bold;
    color: #0B263B;
    border: 1px solid #ededed}

#colour_key td#row_padding {
    border-right: 0;
    border-bottom: 0
}

#header_search input {}

div#n_outstanding {
    margin-top: 0.5em
}

#banner .outstanding a {
    color: #FFF36C}



/* ------------ HELP.PHP ------------------------*/
table#version_info {
    border-spacing: 0;
    border-collapse: collapse
}

#version_info td {
    padding: 0 1.0em 0 0;
    vertical-align: bottom
}

#version_info td:first-child {
    text-align: right
}

/* ------------ MINCALS.PHP ---------------------*/
div#cals {
    float: right;
    display: none;
}

div#cal_last {
    float: left
}

div#cal_this {
    float: left;
    margin-left: 1.0em
}

div#cal_next {
    float: left;
    margin-left: 1.0em
}

table.calendar {
    border-spacing: 0;
    border-collapse: collapse
}

.calendar th {
    min-width: 2.0em;
    text-align: center;
    font-weight: normal;
    background-color: transparent;
    color: #0B263B}

.calendar td {
    text-align: center;
    font-size: x-small;
    line-height: 1;
}

.calendar th.hidden {
    background-color: #dae0e4}

.calendar td.hidden {
    background-color: #dae0e4;
    font-weight: bold
}

.calendar a.current {
    font-weight: bold;
    color: #ff0066}

td#sticky_day {
    border: 1px dotted #ff0066}

td.mincals_week_number {
    opacity: 0.5;
    font-size: 60%;
}

/* ------------ PENDING.PHP ------------------*/
table#pending_list {
    width: 100%
}

#pending_list form {
    float: left;
    margin: 0 0.5em
}

#pending_list table {
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
    border: 0
}

#pending_list td.sub_table {
    padding: 0;
    margin: 0
}

#pending_list table.minimised tbody {
    display: none
}

#pending_list table th {
    border-top: 1px solid white;
    background-color: #fff}

#pending_list td {
    border-top-width: 1px
}

#pending_list .control {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    color: #0B263B}

#pending_list th.control+th {
    border-left-width: 0
}

#pending_list td.control+td {
    border-left-width: 0
}

#pending_list table th.control {
    background-color: #FFF36C;
    cursor: default
}

#pending_list table th a {
    color: #ffffff}

#pending_list table td {
    border-color: #C3CCD3;
    background-color: #FFFCDA}

#pending_list .control {
    width: 1.2em
}

#pending_list th.header_name {
    width: 10%
}

#pending_list th.header_create {
    width: 10%
}

#pending_list th.header_area {
    width: 10%
}

#pending_list th.header_room {
    width: 10%
}

#pending_list th.header_action {
    width: 20em
}

#pending_list table th.header_start_time {
    text-transform: uppercase
}

/* ------------ REPORT.PHP ----------------------*/
.div_report h2,
#div_summary h1 {
    border-top: 2px solid #268b69;
    padding-top: 0.5em;
    margin-top: 2.0em
}

.div_report h3 {
    border-top: 1px solid #879AA8;
    padding-top: 0.5em;
    margin-bottom: 0
}

.div_report table {
    clear: both;
    width: 100%;
    margin-top: 0.5em
}

.div_report col.col1 {
    width: 11em
}

.div_report td:first-child {
    text-align: right;
    font-weight: bold
}

.div_report .createdby td,
.div_report .lastupdate td {
    font-size: x-small
}

div.report_entry_title {
    width: 100%;
    float: left;
    border-top: 1px solid #C3CCD3;
    margin-top: 0.8em
}

div.report_entry_name {
    width: 40%;
    float: left;
    font-weight: bold
}

div.report_entry_when {
    width: 60%;
    float: right;
    text-align: right
}

#div_summary table {
    border-spacing: 1px;
    border-collapse: collapse;
    border-color: #0B263B;
    border-style: solid;
    border-top-width: 1px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 1px
}

#div_summary td,
#div_summary th {
    padding: 0.1em 0.2em 0.1em 0.2em;
    border-color: #0B263B;
    border-style: solid;
    border-top-width: 0;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 0
}

#div_summary th {
    background-color: transparent;
    font-weight: bold;
    text-align: center
}

#div_summary thead tr:nth-child(2) th {
    font-weight: normal;
    font-style: italic
}

#div_summary th:first-child {
    text-align: right
}

#div_summary tfoot th {
    text-align: right
}

#div_summary td {
    text-align: right
}

#div_summary tbody td:nth-child(even),
#div_summary tfoot th:nth-child(even) {
    border-right-width: 0
}

#div_summary td:first-child {
    font-weight: bold
}

p.report_entries {
    font-weight: bold
}

.report .form_general fieldset fieldset {
    padding-top: 0.5em;
    padding-bottom: 0.5em
}

.report .form_general fieldset fieldset legend {
    font-size: small;
    font-style: italic;
    font-weight: normal
}


/* ------------ SEARCH.PHP ----------------------*/
span#search_str {
    color: #ff0066}

p#nothing_found {
    font-weight: bold
}

div#record_numbers {
    font-weight: bold
}

div#record_nav {
    font-weight: bold;
    margin-bottom: 1.0em
}

table#search_results {
    border-spacing: 1px;
    border-collapse: collapse
}

#search_results td,
#search_results th {
    border: 1px solid #0B263B;
    padding: 0.1em 0.2em 0.1em 0.2em
}

/* ------------ SITE_FAQ ------------------------*/
.help q {
    font-style: italic
}

.help dfn {
    font-style: normal;
    font-weight: bold
}

#site_faq_contents li a {
    text-decoration: underline
}

div#site_faq_body {
    margin-top: 2.0em
}

#site_faq_body h4 {
    border-top: 1px solid #C3CCD3;
    padding-top: 0.5em;
    margin-top: 0
}

#site_faq_body div {
    padding-bottom: 0.5em
}

#site_faq_body :target {
    background-color: #ffe6f0}


/* ------------ TRAILER.INC ---------------------*/
div#trailer {
    border-top: 1px solid #0B263B;
    border-bottom: 1px solid #0B263B;
    float: left;
    width: 100%;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding: 0.3em 0 0.3em 0
}

#trailer div {
    float: left;
    width: 100%
}

#trailer div.trailer_label {
    float: left;
    clear: left;
    width: 20%;
    max-width: 9.0em;
    font-weight: bold
}

#trailer div.trailer_links {
    float: left;
    width: 79%
}

/* 79 to avoid rounding problems */
.trailer_label span {
    margin-right: 1.0em
}

#trailer span.current {
    font-weight: bold
}

#trailer span.hidden {
    font-weight: normal;
    background-color: white;
    /* hack: only necessary for IE6 to prevent blurring with opacity */
    opacity: 0.5
}

/* if you change this value, change it in the IE sheets as well */
#trailer .current a {
    color: #ff0066}

div#simple_trailer {
    clear: both;
    width: 100%;
    text-align: center;
    padding-top: 1.0em;
    padding-bottom: 2.0em
}

#simple_trailer a {
    padding: 0 1.0em 0 1.0em
}


/* ------------ VIEW_ENTRY.PHP ------------------*/
.view_entry #entry td:first-child {
    text-align: right;
    font-weight: bold;
    padding-right: 1.0em
}

.view_entry div#view_entry_nav {
    margin-top: 1.0em
}

.view_entry #approve_buttons form {
    float: left;
    margin-right: 2em
}

.view_entry #approve_buttons legend {
    font-size: 0
}

.view_entry div#returl {
    margin-top: 1em
}

#approve_buttons td {
    vertical-align: middle;
    padding-top: 1em
}

#approve_buttons td#caption {
    text-align: left
}

#approve_buttons td#note {
    padding-top: 0
}

#approve_buttons td#note form {
    width: 100%
}

#approve_buttons td#note textarea {
    width: 100%;
    height: 6em
}

.view_entry #entry tr.private {
    display: none;
}

/* ---------------------  Nivalan liikuntakeskus -----------------------------*/
#banner td#company {
    padding-left: 15px;
}

#banner td.banner_menu_button {
    padding-right: 15px;
}

#banner #mrbs a {
    color: #c9ae60;
    font-size: 14px;
}

.header-logo {
    width: 200px;
    display: block;
    margin-bottom: 5px;
}

.header-logo img {
    max-width: 65%;
    height: auto;
    padding: 20px 0 4px;
}

table#banner {
    margin: 0;
}

.wrapper {
    background: #fff;
    overflow: auto;
    margin: 0 auto;
    max-width: 1280px;
}

.banner_select_area {
    text-align: left;
    padding: 6px;
    background: #ab8f3b;
    color: #f8eb00;
    padding: 6px 15px;
}

.banner_select_area::before {
    box-shadow: 0 0 7px 4px rgba(0, 0, 0, 0.2);
}

.banner_select_area a {
    color: #fff;
    font-weight: normal;
}

.banner_select_area span.current {
    color: #fff;
    text-decoration: underline;
}

.banner_select_area #dwm_areas {
    float: none;
}

.banner_select_area #dwm_areas ul li {
    margin-right: 10px;
    font-size: 14px;
}

.banner_select_area .current {
    text-decoration: underline;
    font-weight: 600;
}

.banner_select_area #dwm_rooms {
    float: none;
}

.banner_select_area #dwm_rooms ul li {
    margin-right: 10px;
    font-size: 14px;
}

.banner_select_area h3 {
    display: none;
}

.banner_select_area ul {
    list-style: none;
    display: inline-block;
    margin: 0;
}

.banner_select_area ul li {
    display: inline;
}

.banner_select_area {
    position: relative;
}

.banner_select_area .area_name {
    font-weight: bold;
    color: #0b45bb;
    font-size: 15px;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 10px;
}

/* New Dropdown Area Navigation */
.banner_select_category nav.top-bar {
    background: #c9ae60;
    color: #fff;
    height: auto;
}

.banner_select_category nav.top-bar .top-bar-section ul li {
    background: #c9ae60;
}

.banner_select_category nav.top-bar .top-bar-section ul li ul.dropdown {
    border-radius: 0 0 3px 3px;
    box-shadow: 0 0 7px 4px rgba(0, 0, 0, 0.2);
}

.banner_select_category nav.top-bar .top-bar-section ul li ul.dropdown li.active a {
    background: #0b45bb;
    text-decoration: underline;
}

.banner_select_category nav.top-bar .top-bar-section li>a {
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    background: #c9ae60;
    color: #fff;
    line-height: 44px;
}

.banner_select_category nav.top-bar .top-bar-section li>a:hover {
    background: #ab8f3b;
}

.banner_select_category nav.top-bar .top-bar-section li ul.dropdown li a {
    background: #ab8f3b;
}

.banner_select_category nav.top-bar .top-bar-section li ul.dropdown li a:hover {
    background: #0b45bb;
}

.top-bar-section ul li:hover:not(.has-form)>a {
    background: #ab8f3b;
}

#banner .navigation_dropdown {
    list-style: none;
    position: absolute;
    top: 118px;
    width: 25%;
    background: #212121;
    color: #fff;
    right: 0px;
    z-index: 999;
}

#banner .navigation_dropdown li {
    padding: 10px 0;
    color: #fff;
}

#banner .navigation_dropdown li a:link {
    color: #fff;
}

#banner .navigation_dropdown li:hover {
    background-color: #333;
    color: #fff;
}

#banner .navigation_dropdown a:hover {
    background-color: #333;
    color: #fff;
}

.logonbox_login {
    background: #212121;
    border: 1px solid #666;
    border-radius: 5px;
    width: auto;
    color: #fff !important;
    height: 50px;
}

.logonbox_login:hover {
    background-position: -110px 0px;
}

#dwm.dwm_tuned h2 {
    border: none;
    background: #c9ae60;
    color: #fff;
    margin-top: 0;
    height: 30px;
}

.dwm_main td {
    padding: 7px 7px;
    position: relative;
}

.entryTime {
    font-size: 10px;
    font-weight: 300;
    display: block;
    line-height: 1;
    padding: 5px 2px;
}

/* ADMIN PANEL */
#add_area.form_admin label {
    width: auto;
    margin-top: 7px;
}

#add_area.form_admin #area_name {
    width: auto;
    display: inline-block;
    margin: 0 0 0 10px;
}

#add_area.form_admin .submit.button {
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
}

#add_area.form_admin div {
    clear: none;
}


#add_category.form_admin label {
    width: auto;
    margin-top: 7px;
}

#add_category.form_admin #category_name {
    width: auto;
    display: inline-block;
    margin: 0 0 0 10px;
}

#add_category.form_admin .submit.button {
    width: auto;
    display: inline-block;
    margin: 0;
    padding: 10px 20px;
}

#add_category.form_admin div {
    clear: none;
}

form#add_area {
    margin-top: 65px;
}

div#area_form {
    padding-bottom: 0;
}

div.categories {
    margin: 1em 0 2em 1em;
    float: left;
    clear: left;
}

div.categories #add_category {
    margin: 0;
    width: 100%;
}

div.categories #add_category fieldset {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    width: 100%;
}

div.categories .category_list {
    margin: 10px 0;
    display: block;
    background: #f2f2f2;
    border: 1px solid #d8d8d8;
    clear: left;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

div.categories .category_list ul {
    list-style: none;
    margin: 0;
}

div.categories .category_list ul li {
    padding: 5px 15px;
    border-bottom: 1px solid #ccc;
}

div.categories .category_list ul .button {
    padding: 5px 20px;
}

span.category_name {
    font-weight: 700;
}

span.category_name input {
    width: 100px;
    display: inline-block;
    width: 120px;
    margin: 0;
}

a.delete_category {
    font-weight: normal;
    margin: 0;
}

button.edit_category {
    margin: 0;
}

.th_day {
    border-bottom: 1px solid #ededed;
}

.seperator td {
    border-top: 1px solid #B8B8B8;
}

.row_labels {
    position: relative;
}

.row_labels a {
    position: relative;
    top: -8px;
}

div.field_match_colorcode {
    display: none;
}

div.field_colorcode {
    display: none;
}

/* div.screenonly { display: none;} */
#banner a:link span {
    color: #F8EB00;
}

#banner a:visited span {
    color: #F8EB00;
}

.jaanhoito {
    position: relative;
}

.jaanhoito .celldiv {
    position: relative;
    top: 8px;
}

.jaanhoito::before {
    content: "Jäänhoito";
    position: absolute;
    z-index: 1;
    top: -8px;
    width: 100%;
    left: 0;
    margin: 0 auto;
    text-align: center;
    line-height: 1;
    font-size: 8px;
    height: 8px;
    background-color: #FFFF66;
    border-top: 1px solid #ccc;
}

.keilahalliVaraus {
    border-left-color: #d00000 !important;
}

td.booking {
    border-top: 1px solid #ccc;
    border-bottom: 0px solid #ccc;
    min-width: 120px;
}

.booking a {
    display: inline !important;
}

.sp-replacer {
    float: left !important;
    margin-left: 1em !important;
    width: 50px !important;
}

.sp-preview {
    float: left !important;
    width: 25px !important;
}

.sp-dd {
    float: left !important;
}

.area_rooms h3 {
    display: none;
}

.area_rooms #dwm_rooms {
    float: none;
}

.area_rooms .current {
    color: #0b263b;
}

.area_rooms .current:hover {
    color: #ff0066;
}

.area_rooms ul {
    list-style: none;
    margin: 0;
}

.area_rooms ul li {
    display: inline;
    margin: 0 20px;
}

a.roomUrl {
    font-size: 10px;
    margin: 0 15px;
    text-align: right;
}

.varaajanTiedot {
    float: left !important;
}


#dwm.room_area_info {
    display: none;
    text-align: left;
    width: 100%;
    padding: 20px 15px;
    float: left;
    background-color: #f5f5f5;
    font-weight: 700;
}

.room_area_info .cur_week {
    display: inline-block;
    padding-left: 6px;
    font-size: 15px;
}

.room_area_info .description {
    float: left;
}

.room_area_info .dwm_area_name h2 {
    text-transform: uppercase;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 0.5px;
    color: #000;
    margin: 0 0 10px 0;
    line-height: 1;
    font-weight: 700;
}

.room_area_info .week_print {
    padding-right: 6px;
    text-align: right;
}


.old_booking:link {
    font-size: 8px;
    font-weight: normal;
}


/*------ BULD ACTIONS ------*/
.check-entry {
    position: absolute;
    top: 10px;
    right: 10px;
}

.check-entry input {
    margin: 0;
}

.bulkActions {
    position: fixed;
    z-index: 90;
    bottom: -50px;
    right: 0;
    display: block;
    width: 450px;
    height: 50px;
    background-color: #f9f9f9;
    border: 1px #ccc solid;
    margin: 0 auto;
    padding: 15px 10px;
}

.bulkActions ul {
    list-style: none;
    font-size: 12px;
    margin: 10px 0;
    display: inline;
}

.bulkActions ul li {
    display: inline;
    margin: 0 5px;
}

.bulkActions ul li a {
    font-weight: normal;
}

.bulkActions .delete a {
    font-weight: normal;
    color: #C00000;
}

/* ---- HAITARI ---- */
.haitariWrap {
    border-bottom: 0.5px solid #133f2e;
    border-top: 0.5px solid #133f2e;
}

.haitari {
    font-size: 16px;
    cursor: pointer;
    padding: 10px 10px;
    background-color: #ededed;
}

.haitari::before {
    content: " ";
    background: url('images/haitariArrow.png') no-repeat;
    margin-right: 5px;
    width: 10px;
    height: 10px;
    display: inline-block;
}


/* ----- REPORT PAGE ------ */
#div_typematch,
.field_match_contactdetails,
.field_match_emailaddress,
.field_match_details,
.field_match_jaanhoito,
.field_match_spam_filter,
.field_match_phonenumber {
    display: none;
}

.report_page_entries h2 {
    border-top: 1px solid #268b69;
    margin-top: 2em;
    padding-top: 0.5em;
    padding-left: 1.5em;
}

.row.report_row {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.row.report_row div {}

.report_row_titles {
    font-weight: bold;
    background-color: #f2f2f2;
    padding: 5px 0;
}




.haitari.open::before {
    background-position: -10px 0;
}

/* ------ PAYMENT METHODS & NEW FORM --------*/

.totalPrice .price-label {
    font-size: 2em;
    margin-right: 10px;
}

.totalPrice .price {
    font-weight: bold;
}

.entry-submit-btn {
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
    display: block;
}

#payment-section {
    background: #eee;
    padding: 30px 15px 20px 15px;
    margin: 20px 0;
}

ul.payment-method-select {
    list-style: none;
    margin: 10px 0 20px 0;
    padding: 10px 0 20px 0px;
    border-bottom: 1px solid #ccc;
}

.payment-method-section {
    padding: 20px 0;
}

.place-entry-section .entry-submit-btn {
    float: right;
    border-bottom: 3px solid #368a55;
}

ul.payment-method-select input+label {
    display: inline-block;
}

ul.payment-method-select input:checked+label {
    font-weight: bold;
}

ul.payment-method-select input#payment_method_paytrail+label:after {
    content: "";
    display: inline-block;
    height: 25px;
    width: 25px;
    background: url("images/paytrail_logo.png");
    background-repeat: repeat;
    background-size: auto auto;
    background-size: 100%;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 25px;
}

.payment-info {
    display: none;
    position: relative;
    background: #f8f8f8;
    padding: 20px;
    font-size: 0.8em;
    margin: 0 0 10px 5px;
}

.payment-info.active {
    display: block;
}

.payment-info.active::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 0 20px;
    border-color: transparent transparent transparent #f8f8f8;
    position: absolute;
    top: -10px;
    left: 0;
}

.entry-price-section .totalPrice {
    padding: 20px 5px;
    font-size: 1.5em;
}

.successful-payment-icon {
    position: absolute;
    bottom: 5px;
    right: 10px;
    color: #fff;
}

.successful-payment-icon::after {

    content: "✓";

}

.successful-payment-icon-text {
    font-size: 0.55em;
    text-transform: uppercase;
    letter-spacing: 2px;
    vertical-align: middle;
}


/* ------ LANGUAGES --------*/
ul.lang-inline {
    list-style: none;
    margin: 0;
}

ul.lang-inline li {
    display: inline;
}


/* ------ MAIN SITE STYLING --------*/

fieldset {
    min-width: inherit !important;
}

.back-btn {
    border: none;
    background: none;
    color: #000;
    font-size: 1.3em;
    padding: 20px 0;
}

.back-btn:hover,
.back-btn:active {
    background: none;
    color: #000;
}

#mainCalendarWrap {
    float: none;
    clear: both;
}

.clear {
    float: none;
    clear: both;
}

.main-site-body-wrapper {
    margin-left: -15px;
    margin-right: -15px;
    max-width: 100%;
}

.main-site-body-wrapper .container-fluid {
    padding: 0;
}

.main-top-content,
.top-navigation-panel {
    padding: 2em 0;
    float: left;
    width: 100%;
}

.main-site-body-wrapper .row,
.main-top-content .row,
.top-navigation-panel .row {
    max-width: 100%;
    margin: 0 auto;
}

.main-content-container {
    padding-left: 15px;
    padding-right: 15px;
}

.page-title h1 a {
    color: #0046BA;
    font-weight: 400;
    font-size: 46px;
    margin-bottom: 1em;
}

.page-title h1 a:hover {
    text-decoration: none;
}

.page-title h1 {

    text-align: center;
    letter-spacing: 2px;

}

.main-top-content .area-select {
    padding: 0 20px;
}

.main-top-content .room-select {
    float: left;
    width: 100%;
    padding: 20px;
    padding-bottom: 0;
    background: #f5f5f5;
}

.main-top-content .room-select h3,
.main-top-content .room-select .area_name {
    display: none;
}

.main-top-content .room-select ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    padding: 0;
    margin: 0;

}

.main-top-content .room-select div#dwm_rooms {
    margin-right: 0;
    width: 100%;
}

.main-top-content .room-select ul li {
    margin-right: 2em;
    letter-spacing: 1px;
    margin-bottom: 20px;

}

.main-top-content .room-select ul li a .current,
.main-top-content .room-select ul li a:hover {
    color: #0046ba;
    position: relative;
    text-decoration: underline;
}

div.dropdown-select-label {
    color: #CEAE51;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 1px;
}

div.custom-dropdown-select span {
    font-size: 1.2em;
    line-height: 1;
}

div.custom-dropdown-select span::after {
    content: "\f0d7";
}

div.title-dropdown-label {
    font-weight: bold;
    margin-bottom: 5px;
}

div.custom-dropdown-select {
    min-width: 100%;
    margin-top: 0;
}

div.custom-dropdown-select .category-name {
    color: #0046ba;
    padding: 0.8em 2em 0 1em;
}

div.custom-dropdown-select div.title-dropdown-options ul.dropdown {
    margin-left: 1em;
}

div.custom-dropdown-select.selectCustom-active .title-dropdown-options ul li a:hover {
    color: #aaa;
}

div.custom-dropdown-select.selectCustom-active .title-dropdown-options ul li.active>a {
    color: #0046ba;
    position: relative;
    letter-spacing: 1px;
    text-decoration: underline;
}


div.title-dropdown-wrap {
    margin: 2em auto;
}

.date_now .collapse {
    display: block;
}

.collapse.price-row {
    display: block !important;
}

.center-content {
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 30px 80px 0 rgba(0, 0, 0, 0.1);
}

.right-content {
    text-align: center;
}

.right-content .btn-open-settings {
    color: #707070 !important;
    font-size: 2em;
    text-align: center;
    display: inline-block;
    background: #f5f5f5;
    line-height: 1;
    border-radius: 5px;
    border-color: #ccc;
}

.btn-open-settings:active,
.btn-open-settings.active,
.show>.btn-open-settings.dropdown-toggle {
    background: #707070;
    color: #f5f5f5 !important;
    border-color: #707070;
    box-shadow: none;
}

.settings-dropdown {
    width: 80px;
    float: right;
}

.settings-dropdown-menu {
    background: #222;
    color: #fff;
    padding-top: 0;
    border-radius: 0;
    border: none;
    min-width: 226px;
}

.settings-dropdown-menu a {
    cursor: pointer;
}

.settings-dropdown-menu>a {
    padding: 1.2em 1.5em;
    color: #fff;
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
}

.settings-dropdown-menu>.lang-select {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
}

.settings-dropdown-menu>.lang-select>a.flag {
    width: 10%;

}

.settings-dropdown-menu>.lang-select>a.flag img {
    width: 100%;
}

.main-datepicker {
    position: relative;
    cursor: pointer;
}

.main-datepicker #datepicker {
    box-shadow: none;
    border: 2px solid #0046BA;
    letter-spacing: 1.61px;
    color: #0046BA;
    cursor: pointer;
    font-size: 0.9em;
    border-radius: 5px;
}

.main-datepicker::after {
    content: "\f133";
    font-family: FontAwesome;
    color: #0046BA;
    position: absolute;
    top: 10px;
    right: 10px;
}

.profile-link-wrap {
    text-align: left;
    display: inline-block;
}

.profile-link-wrap .profile-link-label {
    display: block;
}

.profile-link-wrap .profile-link {
    font-weight: bold;
    color: #0046BA;
}

.bookings-awaiting-approval {
    display: block;
    text-align: right;
    padding: 20px 0 0 0;
}

.bookings-awaiting-approval a:hover {
    text-decoration: none;
    color: #ff0066;
}

.bookings-awaiting-approval .bookings-count {
    background: #ff0066;
    border-radius: 100%;
    padding: 4px;
    color: #fff;
}

.bookings-awaiting-approval .bookings-count-label {
    color: #ff0066;
}

.settings-dropdown .logonbox_login {
    padding: 1.2em 1.5em;
    color: #fff;
    display: block;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: inherit;
    white-space: nowrap;
    background: #43ac6a;
    border: 0;
    clear: both;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    border-radius: 0;
    padding-left: 3.2em;

}

.settings-dropdown form>div {
    position: relative;
}

.settings-dropdown form>div::before {
    content: "\f08b";
    font-family: FontAwesome;
    position: absolute;
    top: 1em;
    left: 1.4em;
}

.row {
    margin: 0 auto;
}

.columns select,
.columns input[type="text"],
.columns input[type="email"],
.columns label {
    min-width: 100%;
}

#div_start_date select,
#div_end_date select {
    width: auto;
}

.columns .payment-method-select label {
    width: auto;
    min-width: auto;
}

.navbar .navbar-logo-wrap .navbar-brand {
    margin-left:1.5em;
}


/* ------ RESPONSIVE ------ */
@media only screen and (max-width : 992px) {
    .main-site-body-wrapper {
        margin: 0 auto;
    }
}

@media only screen and (max-width : 767px) {
    #mainCalendarWrap {
        width: 100%;
        overflow: auto;
    }


}

@media only screen and (max-width : 640px) {
    #logon_box {
        display: none;
    }

    #banner .navigation_dropdown {
        width: 100%;
    }

    #banner td {
        padding: 0;
    }

    .header-logo {
        width: 130px;
    }

    .center-content {
        padding: 15px;
    }

    .page-title h1 a {
        font-size: 28px
    }

    div.date_after,
    div.date_before {
        line-height: 1;
    }

    div.date_before a,
    div.date_after a {
        font-size: 10px;
    }

    div.date_nav {
        position: relative;
        padding-bottom: 100px;
    }

    div.date_now {
        float: left;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50px;
    }

    .main-datepicker #datepicker {
        margin-bottom: 5px;
    }

    .entryTime {
        padding-top: 0;
    }

    .booking a {
        display: inline-block !important;
        line-height: 1;
        font-size: 0.9em;
    }

    ::-webkit-scrollbar {
        -webkit-appearance: none;
    }

    ::-webkit-scrollbar:vertical {
        width: 12px;
    }

    ::-webkit-scrollbar:horizontal {
        height: 12px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .5);
        border-radius: 10px;
        border: 2px solid #ffffff;
    }

    ::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #ffffff;
    }

    .dwm_main td {
        min-width: 100px;
    }

    .dwm_main td.row_labels {
        min-width: auto;
    }
}