* {margin: 0; padding: 0}
body, textarea {font-family: Arial; font-size: 12pt; color: black; background-color: white}
img {border: none}

#header, #menubar {background-color: rgb(135,207,249); text-align: center; height: 60px}
#header table, #menubar table {width: 100%}
#header img, #menubar img {margin-top: 5px}
#tourbar {width: 90%; margin: 0 auto}
#bookingname {margin: 0 auto; height: 30px; text-align: center; color: rgb(135,207,249); font-family: Arial; font-weight: bold; overflow: hidden; text-overflow: ellipsis}

#main {margin-bottom: 100px}
#main h1 {margin: 20px auto 10px; text-align: center}
#main h2, #tourbar h2 {margin: 0 auto; text-align: center; color: rgb(135,207,249)}
#main h3 {color: rgb(135,207,249)}

.container {width: 100%; margin: 0 auto; position: absolute; z-index: 1}
.progressbar {list-style-type: none; counter-reset: step}
.progressbar li {float: left; width: 20%; position: relative; text-align: center; font-weight: bold; color: rgb(192,192,192)}
.progressbar li.active {color: black}
.progressbar li:before {content: counter(step); counter-increment: step; width: 30px; height: 30px; border: 2px solid rgb(192,192,192); display: block; margin: 0 auto 5px auto; border-radius: 50%; line-height: 30px; background-color: white; color: rgb(192,192,192); text-align: center; font-weight: bold}
.progressbar li:after {content: ''; position: absolute; width: 100%; height: 3px; background-color: rgb(151,151,151); top: 15px; left: -50%; z-index: -1}
.progressbar li:first-child:after {content: none}
.progressbar li.active:before {border-color: rgb(135,207,249); background: rgb(135,207,249); color: white}

div.inputdiv, div.wideinputdiv, div.instantsearchinputdiv, div.instantsearchwideinputdiv {width: 80%; max-width: 350px; margin: 0}
div.inputdiv, div.wideinputdiv {margin: 20px auto 0 auto}
div.wideinputdiv, div.instantsearchwideinputdiv {width: 95%}
div.inputdiv label, div.wideinputdiv label {font-size: 12pt; font-weight: bold}
.inputobject, .disabledinputobject {width: 100%; min-height: 30px; margin-bottom: 20px; font-size: 14pt; border-radius: 5px}
input:read-only {background-color: rgb(224,224,224)}
.disabledinputobject {margin-bottom: 10px; color: rgb(64,64,64); border: none; background-color: rgb(240,240,240)}
.checkboxrow {width: 100%; margin-bottom: 20px}
.checkboxrow input[type=checkbox] {min-height: 30px; font-size: 14pt; border-radius: 5px}

div.menucontainer {height: 30px; width: 100%; max-width: 350px; margin: 0 auto 20px; text-align: right}
div.button, div.specialbutton, div.invertbutton, div.disabledbutton, div.leftbutton, div.disabledleftbutton, div.centerbutton, div.rightbutton, div.disabledrightbutton, div.tourbutton, div.redbutton, div.reportbutton, div.infobutton, div.thinbutton {min-height: 30px; font-size: 14pt; color: white; background-color: rgb(135,207,249); text-align: center; padding-top: 10px; border-radius: 5px; box-shadow: 2px 2px rgb(192,192,192)}
div.button a, div.specialbutton a, div.invertbutton a, div.disabledbutton a, div.leftbutton a, div.disabledleftbutton a, div.centerbutton a, div.rightbutton a, div.disabledrightbutton a, div.tourbutton a, div.redbutton a, div.reportbutton a, div.infobutton a, div.thinbutton a {color: white; text-decoration: none; font-size: 14pt}

div.button, div.specialbutton, div.invertbutton, div.disabledbutton, div.tourbutton, div.redbutton, div.reportbutton, div.infobutton, div.thinbutton {width: 100%; max-width: 350px; margin: 0 auto 20px}
div.menucontainer div.tourbutton, div.menucontainer div.reportbutton {width: 80%}
div.menucontainer div.menunumbers {width: 17%; height: 30px; display: inline-block; text-align: right; font-size: 14pt; padding-top: 10px}
div.menucontainer div.tourbutton, div.menucontainer div.reportbutton {display: inline-block}

div.specialbutton {background-color: darkorange}
div.tourbutton {background-color: rgb(135,207,249)}
div.redbutton {background-color: rgb(220,96,96)}
div.reportbutton {background-color: rgb(0,136,158)}
div.infobutton {background-color: rgb(0,90,105)}
div.invertbutton {background-color: white}
div.invertbutton a {color: rgb(135,207,249)}
div.disabledbutton, div.disabledrightbutton, div.disabledleftbutton {background-color: rgb(240,240,240); color: silver}
div.disabledbutton a, div.disabledrightbutton a, div.disabledleftbutton a {color: silver}
div.leftbutton, div.centerbutton, div.rightbutton, div.disabledrightbutton {width: 100px}
div.leftbutton, div.disabledleftbutton {float: left}
div.centerbutton {margin-left: auto; margin-right: auto}
div.rightbutton, div.disabledrightbutton {float: right}
div.thinbutton {min-height: 20px; padding-top: 5px}

tr.grdeven, tr.grdodd, tr.grdselected {height: 40px}
tr.grdeven td, tr.grdodd td, tr.grdselected td {overflow: hidden; border-radius: 5px}
tr.grdeven td {background-color: rgb(240,240,240)}
tr.grdodd td {background-color: rgb(246,246,246)}
tr.grdselected td {background-color: rgb(135,207,249)}

p.infomessage, p.errormessage, p.warningmessage, p.pricetag {font-size: 12pt; text-align: center; margin-bottom: 20px}
p.infomessage {font-style: italic}
p.warningmessage {font-style: italic; color: orange}
p.errormessage {font-style: italic; color: red}
p.pricetag {font-weight: bold}

div.instantsearch {display: none; position: absolute; min-width: 148px; min-height: 50px; top: 0; left: 0; z-index: 500; padding: 2px; background-color: white; border: solid 1px rgb(222,222,222); overflow: hidden}
div.instantsearch ul {list-style-type: none}
div.instantsearch li {height: 30px; overflow-x: hidden}
div.instantsearch li a {font-size: 14pt; line-height: 30px}
div.instantsearch ul li a:link, div.instantsearch ul li a:visited, div.instantsearch ul li a:active {color: black; background-color: transparent}
div.instantsearch ul li a:hover {color: navy; text-decoration: none; background-color: rgb(220,229,252)}

ul#items {list-style-type: none; text-align: center}
ul#items li {display: inline-block; line-height: 30px; border: solid 1px rgb(192,210,230); background-color: rgb(240,240,240); border-radius: 5px; margin: 5px; padding: 0 5px}
ul#items li a {color: black; text-decoration: none}
ul#items li.selected {background-color: rgb(135,207,249)}

.bookingbox, .legbox, .legboxselected {margin: 10px 0; padding: 5px; border-radius: 10px; background-color: rgb(240,240,240); font-size: 12pt; box-shadow: 1px 1px rgb(192,192,192)}
.legboxselected {background-color: rgb(135,207,249)}
.bookingbox table, .legbox table, .legboxselected table {width: 100%}
.bookingbox table td, .legbox table td, .legboxselected table td {padding: 5px 0}

#divNotification {position: fixed; top: 0; left: 25%; width: 50%; height: 30px; font-size: 12pt; background-color: white; text-align: center; padding-top: 10px; border-radius: 0 0 5px 5px; box-shadow: 0px 5px 5px rgba(0,0,0,0.3); color: darkgreen}

body.wb * {font-size: 10pt}
body.wb #header {margin-bottom: 5px}
body.wb h1 {color: rgb(135,207,249); margin: 5px 0 10px 0; text-align: center; font-weight: bold}
body.wb h2 {color: rgb(135,207,249); margin-top: 10px; font-weight: bold}
body.wb .wbgridtitle {background-color: rgb(135,207,249); color: black}
body.wb .wbgridtitle, body.wb .wbgridevenrow, body.wb .wbgridoddrow {height: 40px}
body.wb .wbgridtitle th {text-align: left}
body.wb .wbgridoddrow {background-color: rgb(246,246,246)}
body.wb .wbgridevenrow {background-color: rgb(240,240,240)}
body.wb .wbgridseprow {background-color: white; height: 1px}
body.wb #wbfooter {position: fixed; bottom: 0; left: 0; width: 100%; height: 40px; background-color: rgb(135,207,249); padding-top: 10px}
body.wb #wbfooter td {text-align: center; line-height: 25px}
body.wb #wbfooter td.wbfootersep {border-right: solid 1px white}
body.wb #wbfooter td a {color: white; text-decoration: none}
body.wb td.wblabel {text-align: right; padding-right: 10px}
body.wb label {color: rgb(135,207,249)}
body.wb .wbamountbox {width: 100px; height: 30px; text-align: right; background-color: white; border-color: rgb(135,207,249); padding-right: 10px}
body.wb div.button, body.wb div.disabledbutton {min-height: 30px; font-size: 12pt; color: white; background-color: rgb(28,134,226); text-align: center; padding-top: 10px; border-radius: 5px; box-shadow: 2px 2px rgb(192,192,192)}
body.wb div.button a, body.wb div.disabledbutton a {color: white; text-decoration: none; font-size: 12pt}
body.wb .toolong {word-wrap: break-word; word-break: break-word; white-space: normal}

body.dta .tourcontainer {display: flex; overflow-x: auto; white-space: wrap; padding: 10px 20px; gap: 20px}
body.dta .tourcard {flex: 0 0 auto; width: 95%; max-width: 350px; margin: 0 auto; background-color: rgb(245,245,245); border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); overflow: hidden}
body.dta .tourheading {margin: 0 5px; text-align: center; font-size: 12pt; font-weight: bold; font-style: italic}
body.dta .tourdescription {margin: 5px; text-align: justify; font-size: 10pt}
body.dta .tourtags {margin: 10px 5px; font-size: 10pt}
body.dta span.tourtag, #divExplore li {flex: 0 0 auto; border: solid 1px rgb(192,210,230); background-color: rgb(230,235,245); border-radius: 5px; margin: 2px 5px; padding: 2px 5px; line-height: 18px; font-size: 10pt; display: inline-block}
body.dta .nodeco {text-decoration: none; color: black}
body.dta .amountbox {width: 100px; height: 30px; text-align: right; background-color: white; padding-right: 10px}