:root {
--main-color: #F5832A;
}
a,a:link, a:visited,a:hover,a:active
{
color: var(--main-color, #F5832A) ;
}
a.btn, a.btn:link,.btn:visited, a.btn:hover, a.btn:active
{
color: white !important ;
}
.btn-link
{
color: var(--main-color, #F5832A) !important ;
}
.mobileMenuHolder
{
}
.pgMainSelectBoxMobile
{
cursor:pointer;
border-radius:8px;
background-color:transparent;
background-color:white;
width:300px;
max-width:100%;
margin:20px auto 40px auto;
box-shadow:20px 20px 30px gray;
overflow:hidden;
background-color:#eee;
}
.pgMainSelectBoxMobile.selected
{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color:white;
border-left: 1px solid var(--main-color, #F5832A);
border-right: 1px solid var(--main-color, #F5832A);
border-top: 1px solid var(--main-color, #F5832A);
}
.pgMainSelectBoxMobileDecide
{
font-size: 18px;
width:300px;
max-width:100%;
margin:40px auto;
}
.pgMainSelectBoxMobile .gray
{
opacity: 0.5;
}
.pgMainSelectBoxMobile .header
{
font-weight:bold;
font-size: 18px;
padding:20px 15px 15px 15px;
text-align:center;
}
.pgMainSelectBoxMobile.selected .header
{
font-weight:bold;
font-size: 18px;
background-color:white;
padding:20px 15px 15px 15px;
text-align:center;
}
.pgMainSelectBoxMobile .text
{
font-size: 14px;
background-color:white;
padding:0px 15px 10px 15px;
}
.pgMainSelectBoxMobile .button
{
font-weight:bold;
font-size: 25px;
text-align:center;
padding:15px;
color:white;
background-color:#F5832A;
background-color: var(--main-color, #F5832A);
}
.mSearchLinkDiv
{
font-size:18px;padding-top:6px;padding-bottom:6px;
}
.mSearchLink:visited,.mSearchLink:hover,.mSearchLink:active,.mSearchLink:link
{
}
.login-colorgraph
{
background-color:#F5832A !important;
height:2px;
}
.btn-warning
{
background-color:#F5832A !important;
}
.mainBg
{
background-color:#F7F7F7;
}
#divDesktopWelcome..mainBgImage
{
background: url(https://cdn.hsystemcontent.com/images/66808.jpg);
background-repeat: no-repeat;
background-size: auto;
height:400px;
background-position: center;
box-shadow:20px 20px 50px gray;
border:1px solid #F5832A;
padding-top:100px;
text-align:center;
border-radius:5px;
}
.mainBgImageWelcome
{
border:1px solid #F5832A;
border-radius:5px;
background-color:white;
font-size:40px;
font-weight:bold;
display:inline-block;
padding:20px;
margin-bottom:40px;
color: #F5832A;
}
.inputAndBotton
{
max-width:300px;
text-align:center;
margin: 0 auto;
}
.inputAndBotton .inputAndBotton_Input
{
border:0;
background-color:#EEE;
max-width:600px;
font-size: 25px;
border-radius:5px;
}
.inputAndBotton .inputAndBotton_Button
{
border-radius:5px;
font-weight:bold;
font-size: 25px;
text-align:center;
padding:25px;
color:white;
background-color:#F5832A;
background-color: var(--main-color, #F5832A);
border:0;
}
.bigError
{
margin-top:50px;
color:red;
font-size: 20px;
}
.bigFormError
{
font-weight:bold;
font-size: 28px;
text-align:center;
padding:20px 0px;
color:red;
}
.errorMessage
{
padding:25px;
color:red;
font-size: 24px;
vertical-align:middle;
font-weight:bold;
/* text-shadow: 10px 10px 20px red; */
}
.errorDesc{
color:gray;
font-size: 14px;
margin-top:20px;
}
.fixedLoadingSpacing
{
height: 65px;
padding-top:20px;
}
.fixedLoadingSpacingMobile
{
height: 35px;
padding-top:10px;
}
#divReserveObjectTimePriceDetails
{
min-height:100px;
}
#divLoadingSpot
{
height: 40px;
}
.extraDateContent
{
min-height:30px;
padding-top:15px;
}
.loader {
width: 8px;
height: 40px;
border-radius: 4px;
display: block;
margin: 20px auto;
position: relative;
background: currentColor;
color: var(--main-color, #F5832A);
box-sizing: border-box;
animation: animloader 0.3s 0.3s linear infinite alternate;
}
.loader::after, .loader::before {
content: '';
width: 8px;
height: 40px;
border-radius: 4px;
background: currentColor;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20px;
box-sizing: border-box;
animation: animloader 0.3s 0.45s linear infinite alternate;
}
.loader::before {
left: -20px;
animation-delay: 0s;
}
@keyframes animloader {
0% { height: 48px}
100% { height: 4px}
}
.loadermini {
width: 8px;
height: 10px;
border-radius: 4px;
display: block;
margin: 7px auto;
position: relative;
background: currentColor;
color: var(--main-color, #F5832A);
box-sizing: border-box;
animation: miniloader 0.3s 0.3s linear infinite alternate;
}
.loadermini::after, .loadermini::before {
content: '';
width: 8px;
height: 10px;
border-radius: 4px;
background: currentColor;
position: absolute;
top: 50%;
transform: translateY(-70%);
left: 10px;
box-sizing: border-box;
animation: miniloader 0.3s 0.45s linear infinite alternate;
}
.loadermini::before {
left: -10px;
animation-delay: 0s;
}
@keyframes miniloader {
0% { height: 22px}
100% { height: 4px}
}
.btn-selected
{
border-color:#F5832A !important;
background-color:#F5832A !important;
}
.btn-notselected
{
border-color:#F5832A !important;
border:1px solid gray !important;
}
.btn-success
{
border-color:#F5832A !important;
background-color:#F5832A !important;
width:100%;
text-align:center;
}
.pgMainHeader
{
margin-top:30px;
font-weight:bold;
font-size: 32px;
text-align:center;
padding:20px;
}
.pgMainHeader.mobile
{
margin-top:20px;
font-weight:bold;
font-size: 26px;
text-align:center;
padding:10px;
}
#divSearchModeButtonHolder .pgMainHeader.mobile
{
margin-top:-10px;
}
.pgMainHeaderNoMargin
{
font-weight:bold;
font-size: 32px;
text-align:center;
padding:20px;
}
.pgMainHeaderNoMargin
{
font-weight:bold;
font-size: 32px;
text-align:center;
padding:20px;
}
#divMapContentSingleSpot.desktop
{
background-color: #EEE;
border:1px solid #EEE;
border-radius:5px;
overflow:hidden;
}
#divMapContentSingleSpot.mobile
{
background-color: #EEE;
border:0;
border-radius:0px;
overflow:hidden;
}
.pgMainSelectBox
{
cursor:pointer;
border-radius:5px;
background-color:transparent;
text-align:center;
width:300px;
max-width:100%;
}
.pgMainSelectBoxInner
{
border-radius: 5px;
box-shadow:20px 20px 30px gray;
overflow:hidden;
}
.pgMainSelectBox.selected .pgMainSelectBoxInner
{
border: 1px solid var(--main-color, #F5832A);
}
.pgMainSelectBox .gray
{
opacity: 0.5;
}
.pgMainSelectBox .header
{
font-weight:bold;
font-size: 18px;
background-color:#EEE;
padding:15px 15px 15px 15px;
}
.pgMainSelectBox.selected .header
{
background-color:white;
}
.pgMainSelectBox .text
{
font-size: 14px;
background-color:#EEE;
padding:15px;
}
.pgMainSelectBox .button
{
font-weight:bold;
font-size: 25px;
text-align:center;
padding:25px;
color:white;
background-color:#F5832A;
background-color: var(--main-color, #F5832A);
}
.pgMainSelectBox .arrow-down-holder {
display:none;
}
.pgMainSelectBox.selected .arrow-down-holder {
display:block;
}
.pgMainSelectBox.selected
{
border-radius:5px;
cursor:pointer;
width:300px;
max-width:100%;
}
.pgMainSelectBox.selected .button
{
font-weight:bold;
font-size: 25px;
text-align:center;
padding:25px;
color:white;
background-color:#F5832A;
background-color: var(--main-color);
}
.arrow-down-holder {
margin-top:40px;
text-align:center;
}
.arrow-down-holder-selectedSpot {
text-align:center;
}
.arrow-down {
width: 40px;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid var(--main-color, #F5832A);
display:inline-block;
}
.arrow-down-holder-mini {
text-align:center;
}
.arrow-down-mini {
width: 20px;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #F5832A;
}
.arrow-up-holder {
margin-top:40px;
text-align:center;
}
.arrow-up-holder-mini {
text-align:center;
}
.arrow-up {
width: 40px;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid var(--main-color, #F5832A);
display:inline-block;
}
.arrow-up {
width: 40px;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid var(--main-color, #F5832A);
display:inline-block;
}
.pgheaderLineBox
{
margin:0px;
padding:0px;
}
.pgheaderLineBox.borderRight
{
border-right:1px solid #F7F7F7;
}
.pgheaderLineBox .header
{
border-bottom:5px solid var(--main-color, #F5832A);;;
padding:0px;
font-size: 20px;
font-weight:bold;
padding:15px;
}
.pgheaderLineBox .text
{
padding:20px;
}
.mapBoxHeader
{
font-size: 20px;
padding:15px;
}
.rowCorners
{
margin-top:60px;
border-radius:5px;
background-color:white;
box-shadow:20px 20px 50px gray;
border:1px solid #EEE;
}
.rowCorners.mobile
{
box-shadow:none ;
border:0;
box-shadow:10px 10px 30px gray;
margin:0px 0px;
}
#divSelectedObject, .rowCorners.mobile
{
margin-bottom:50px;
}
@media (max-width: 350px) {
#divSearchDatesAndSettings .rowCorners.mobile, #divSelectedObject, .rowCorners.mobile {
margin-top:0px;
box-shadow:none ;
border:0;
margin:0px 0px;
}
.row{
margin-top:0px;
box-shadow:none ;
border:0;
margin:0px -15px;
}
#divLayout5BaseDiv .container {
padding:0;
}
#divMobileSearchResult
{
margin:0px 10px;
}
#divMobileSearchResultContent
{
padding:0;
}
.subHeaderWithArrowTableContent
{
padding:0px 10px;
}
}
.selectedSpot
{
margin-top:60px;
}
.selectedSpot .content
{
padding:15px;
}
.subLabel
{
font-weight:bold;
padding:10px;
color:black;
background-color:#F5832A;
border-radius: 4px;
background-color: rgba(246,143,64,0.4);
margin-bottom:10px;
margin-top:10px;
}
.subLabel2
{
font-weight:bold;
padding:10px;
color:black;
background-color:#EAEFBD;
border-radius: 4px;
margin-bottom:10px;
margin-top:10px;
font-size:18px;
}
.external-link-holder
{
float:right;
display:inline-block !important;
width: auto !important;
}
.external-link
{
display:inline-block ;
background-color:#EAEFBD;
padding:5px;
border-radius:3px;
color:black !important ;
width: auto !important;
margin:10px;
}
#divObjectMessage img
{
max-width:100%;
max-height:200px;
}
#divObjectMessage h4,#divObjectMessage h3
{
font-weight:600;
}
.dataRow
{
background-color:#F7F7F7 !important;
border-bottom:1px solid #EEE !important;
}
.dataRowTableHolder{
padding:3px;
background-color:#F7F7F7 !important;
border:1px solid #EEE !important;
border-radius: 4px;
overflow:hidden;
}
.warningSpotDiv{
background-color:#F7F7F7;
border:1px solid #EEE;
}
.xTable
{
width:100%;
}
.xTable td {
width: 1px;
padding:5px;
}
.xTable td {
width: 1px;
padding:5px;
}
.xTable tr {
border-bottom:1px solid #EEE;
}
.xTable tr:last-child {
border-bottom:none;
}
.xTable td:last-child { width: 100%; }
.xTable td:first-child { padding-right:10px; white-space: nowrap; }
.highChar
{
background-color:#F5832A;
padding:3px 10px;
border:1px solid gray !important;
border-radius: 4px;
color:white;
margin-right:10px;
}
.subHeaderWithArrow
{
border-radius:5px;
background-color:white;
box-shadow:20px 20px 50px gray;
border:1px solid #F5832A;
}
.subHeaderWithArrow .button
{
font-weight:bold;
font-size: 18px;
padding:5px;
color:white;
background-color:#F5832A;
}
.miniMap
{
border:1px solid #EEE;
}
.triangle-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #A20021;
box-shadow: 0 12px 21px -2px red;
}
.subHeaderWithArrowTable
{
border-radius:5px;
background-color:white;
box-shadow:20px 20px 50px gray;
border:1px solid #90be6d;;
overflow:hidden;
}
.subHeaderWithArrowTable.mobile
{
box-shadow:10px 10px 10px gray;
}
.subHeaderWithArrowTable.desktop
{
box-shadow:20px 20px 50px gray;
}
.subHeaderWithArrowTable.gray
{
border:1px solid #EEE !important;
}
.subHeaderWithArrowTable{
}
.subHeaderWithArrowTable .arrow-down-mini {
width: 20px;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #F5832A;
}
.grayBack
{
background-color:#F7F7F7 !important;
}
.greenFade
{
background-color:#ECF4E7 !important;
}
.subHeaderWithArrowTable .tablerow
{
margin-top:0 !important;
border-bottom:1px solid #EEE !important;
}
.subHeaderWithArrowTable .lasttablerow
{
padding-bottom: 0px !important;
}
.subHeaderWithArrowTable .spacingrow
{
padding:20px 0px;
}
.subHeaderWithArrowTable .header
{
font-weight:bold;
font-size: 18px;
border:none !important;
padding:5px;
color:white;
background-color:#90be6d;;
}
.subHeaderWithArrowTable.gray .header
{
color:black;
background-color:#EEEEEE !important;
border-bottom:5px solid gray !important;
}
.subHeaderWithArrowTable.gray .arrow-down-mini {
width: 20px;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #EEEEEE!important;
}
.subHeaderWithArrowTable .subHeaderWithArrowTableContent
{
padding:0px 20px;
padding-bottom:20px;
}
.selectedMapAreaInfo
{
margin-top:10px;
padding:9px;
border-radius:6px;
background-color:#ecf4e7;
border:1px solid var(--main-color, #F5832A);
font-size:14px;width:200px;
}
.areaClickHolder
{
background-color: white;
border-radius:5px;
border:1px solid #F5832A;
overflow:hidden;
}
.acNotAvailable
{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
.areaClickHolder .acH
{
font-weight:bold;
font-size: 14px;
padding:10px;
color:white;
background-color: var(--main-color, #F5832A);;
}
.areaClickHolder.mobile .acH
{
font-size: 14px;
padding:10px;
color:white;
background-color: var(--main-color, #F5832A);;
}
.areaClickHolder .acC
{
font-size: 14px;
background-color: white;
padding:10px;
}
.areaClickHolder .acBottom
{
background-color: white;
height:20px;
min-width:150px;
}
.areaClickHolder.acNotAvailable .acBottom
{
display:none;
}
.areaClickHolder .acLeft
{
padding:5px 10px;
font-weight:bold;
font-size: 14px;
width:140px;
float:left;
}
.areaClickHolder .acRight
{
width:30px;
height:30px;
float:right;
padding-right:10px;
background: url(https://cdn.hsystemcontent.com/images/66785.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-color: var(--main-color, #F5832A);;
background-position:5px 5px;;;
}
#divBadgeHolder
{
background-color: #ECF4E7;
border-radius:5px;
padding:5px;
}
.divBadgeContent
{
border-radius:5px;
padding:5px;
}
.spotBadge
{
display:inline-block;font-weight:bold;border-radius:5px;padding:12px;font-size:25px; border:2px solid black; color:white;
}
.spotBadge.Smal
{
display:inline-block;font-weight:bold;border-radius:5px;padding:8px;font-size:18px; border:2px solid black; color:white;
}
.badgeMark
{
width:40px;border-radius:50%;border:1px solid black; padding:8px 15px;font-size:32px;height:30px;margin-top:15px;font-weight:bold;
content: '✖';
}
.available .spotBadge, .available .badgeMark
{
background-color:#90BE6D;
}
.red .spotBadge, .red .badgeMark
{
background-color:#A20021;
}
.unknown .spotBadge, .unknown .badgeMark
{
background-color:var(--main-color, #F5832A);
}
.unknown .badgeMark
{
padding:8px 18px;
}
.badgeMarkHolder
{
margin-top:10px;
float:right;
}
.spotBadge.big
{
font-size:25px;
}
.spotBadge.available
{
background-color:#90BE6D !important;
}
.spotBadge.notavailable
{
background-color:#A20021;
}
.cbRow {
font-weight: 700;
font-size: 18px;
margin-bottom:20px;
vertical-align: top;
cursor:pointer;
}
.cbMark {
display: inline-block;
height: 31px;
width: 30px;
border: 1px solid black;
padding: 0px 10px 10px 5px;
font-size: 20px;
font-weight: bold;
background-color: white;
border-radius: 3px;
vertical-align: top;
}
.cbMarkSelected {
background-color: var(--main-color, #F5832A);
}
.buttonCheckBoxText {
height: 30px;
display: inline-block;
padding: 2px 10px;
vertical-align: top;
}
.cbIcon {
padding-left: 10px;
height: 30px;
}