/* 
CYCLERENT Web 4 - generic
base styles
version 2.40
date: 2025-10-25
*/

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;700&display=swap');

/* style upgrade */
body{
	--main-color: #666666;
	--main-font: 'Dosis', sans-serif;	
	--main-fontSize:14px ;	
	--main-fontWeight: 400;	
	--main-lineHeight:1.5 !important;	
	--main-small-fontSize:70%;
	--main-smaller-fontSize:80%;
	--main-larger-fontSize:125%;
	--main-large-fontSize:200%;
	--main-largest-fontSize:250%;
		
	--title-fontSize:var(--main-large-fontSize);	
	--title-fontWeight: 700;	
	
	--print-font: 'Dosis', sans-serif;	
	--print-fontSize:14px ;	
	--print-fontWeight: 400;	
	--print-lineHeight:1.5 !important;
	--print-small-fontSize:80%;
	--print-larger-fontSize:150%;
	--print-large-fontSize:var(--main-large-fontSize);
	
	--font-bold: 700;
	
	--error-color: #FF0000;
	--error-fontSize:var(--main-larger-fontSize);

	--warning-fontSize:var(--main-fontSize);
	
	--gap:15px;
	
	--logo-CR-main: url(../images/logo-CR-white-transparant.png);
	--logo-CR-mainAlt: url(../images/logo-CR-blue-transparant.png);
	--logo-CR-main-scan: url(../images/logo-CR-white-transparant-QRcode.png);
	--logo-CR-main-TEST: url(../images/logo-CR-orange-transparant-TEST.png);
	--logo-CR-main-TEST-scan: url(../images/logo-CR-orange-transparant-TEST-QRcode.png);
}
/*generic*/
body{font-family:var(--main-font);color:var(--main-color);line-height:var(--main-lineHeight);}

:focus-visible,:focus,a:focus,.btn-primairy.ficus, .btn-primairy:focus {outline-width:0;}
.close { color: #000;opacity:0.5;}
.close:focus, .close:hover { color: #FFF;opacity:1;}
.table > tbody > tr > td > label, .table > tbody > tr > th > label, .table > tfoot > tr > td > label, .table > tfoot > tr > th > label, .table > thead > tr > td > label, .table > thead > tr > th > label {width: -webkit-fill-available;}
/*environment*/
.spnProdcutionEnv{display: none;}
/* base */
.btn{width:fit-content;border-radius:5px;box-shadow:0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12),0 16px 16px rgba(0,0,0,0.12)}
.btn .buttonBody {display: flex;align-items: center;justify-content: center;}
.btn-icon {display: flex;align-items: center;column-gap: 10px;justify-content: center;}
.btn-txt-search{border-radius: 0 5px 5px 0;}
.scrSmall {display:none;}
.headerInputFiled{display:none;}
.pageMoveItem .headerInputFiled {display: block;}
.headerInputFilledLabelText,#lblHeaderBarcodeInputLabel{display:none;}
.divIssueBill #divHeaderInputFiled, .pageReservation  #divHeaderInputFiled,.pageReturnHome #divHeaderInputFiled, .pageService #divHeaderInputFiled ,.pageExtraAllReservationForSourcePartner #divHeaderInputFiled, .pageExtraAllReservation #divHeaderInputFiled ,
.pageMoveItem .headerInputFiled, .pageBillInfo .headerInputFiled  , .Scan .headerInputFiled {display: block;}
#divMenuIconLogo {padding-left:5px !important;}
.modal-footer {border: 0;}
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {color: #ccc !important;text-decoration: line-through;}
#divMessageFunctionLevel {display: none;}
/**** To remove place holder ****/
/*.form-control::-webkit-input-placeholder {color: transparent;}
.form-control:-moz-placeholder {color: transparent;}
.form-control::-moz-placeholder {color: transparent;}
.form-control:-ms-input-placeholder {color: transparent;}
*/

/*TEMP EXTRA OPTIONS -> gereserveerde items uit gezet */
#divSettingsCard {display: none;}
.task-container:hover { box-shadow: none;}
/* TEMP group bill */
#divIssueOverviewPageMenu #divBillSection {display: none;}
#divlblReturnDayTime {display: none;}
/* TEMP */
#rblInHouseItemFilter {display: none;}
/*#divPrintOptions {display: none;}*/
#divFooterDeviceID {display: none;}
#divFooterVersion {float: right;}
#divSentEmailReport {display: none;}
#divBillDetailsHistoryIcon {display: none;}
#divBillHistoryFilterRow {display: none;}
/***** to move definitive *****/
#divBillHistoryContent {margin-top: 10px;}
.streamline.timeline ul .timeline-post h3 {margin-top: 0;font-size: 12px;}
.streamline.timeline ul .timeline-post .post-container > .panel .heading {font-size: 12px;}
.streamline.timeline ul .timeline-post .post-container > .panel {padding: 10px 10px;margin-bottom: 0px;min-height: 60px;}
.divBillActionContent {margin-bottom: 5px;}
.pageBillInfo #divBillHistoryIcon {display: none;}
/*extend and return*/
/*pageHome*/
.infoText .infoTextTitle {margin-bottom: 5px;font-size: var(--main-larger-fontSize);}
.infoText {display: flex;flex: auto;flex-direction: column;align-items: flex-start;padding: 10px;color: var(--main-color);}
#divTitleReservationOverviewMenuCard .CRfont-bigger {font-size: 120% !important;}
#header #divForceSignOutButton .btn{font-size:14px !important;line-height:31px;box-shadow: none;border: 1px solid;color: #357ebd;background-color: #ffffff;border-color: #357ebd;}
#header #divForceSignOutButton .btn:hover {color: #fff;background-color: #286090;border-color: #204d74;}
.flex-60 .width-200{width:inherit;}
.menu-card:hover,.cards:hover,.card-container .card .front, .card-container .card .back, #divReturnItemCountMessage button:hover{box-shadow:0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12),0 16px 16px rgba(0,0,0,0.12);}
#spnDashIconReturn {display: flex;justify-content: center;gap: 0;color: #FFFFFF;}
#spnDashIconReturn.toLateIconShown {justify-content: flex-start;}
#spnToLateIconWithCounts {right: -40px;top: -30px;width:110px;}
#divExchangeMenucard, #divItemAvailabilityMenuCard, #divServiceTicketMenuCard, #divBillChangeMenuCard {min-height: 55px;}
.menuCard-title div:nth-child(2) {width: 90%;}
/*extend limitation*/
#divExtendStatusMsg {margin-top: 10px;}
#extendLimitation {font-weight: var(--font-bold);font-size: var(--warning-fontSize);}
#extendNotPossible {font-size: var(--error-fontSize);font-weight: var(--font-bold);color: var(--error-color);}
#ulLimitedItemsForExtend li {font-weight: var(--font-bold);}

/*billchangeRequest */
#txtBillCorrectionRemark {min-height: 200px;}
#divLanguageContent img.img-flag-round {height:14px;width:14px;margin-top:-4px;}	
/*tooltip */
.tooltip .tooltiptext {font-size:var(--main-fontSize);}
.tooltip .tooltiptext {visibility: hidden;position: absolute;width: max-content;min-width:100px;max-width: 120px;background-color: #555;color: #fff;text-align: center;padding: 5px;border-radius: 6px;z-index: 9999;opacity: 0;transition: opacity .6s;font-size: var(--main-fontSize);line-height: 1.5;font-weight: 700;}
.tooltip-info.tooltip .tooltiptext {font-family: inherit;font-weight: 400;max-width: 325px;}
/*pageIssueBill*/
#divButtonAddAdditionalPayment{display:none;}
.pageIssueBill #footer {margin-bottom:100px;}
#lblIssueDate, #divReturnDateOnly div:nth-child(2),#lblNumberOfDaysField {width:auto;min-width: 75px;}
/*.CRbuttonIssue:hover{background-color:#449d44;border-color:#398439;}*/
#divTomorrowReturnBillRow label {padding: 0 !important;}
#divAvailableItemButton .btn-warning, #divItemAvailabilityMenuCard.btn-warning {background-color: #5cb85c;}
/*pageIssueBill:return*/
#tblBillItemsForReturn tr {cursor: pointer;}
.BillNameCol {display: flex;flex-direction: row;justify-content: space-between;line-height:30px;align-items:center;}
.BillNameCol .CRIcon {color: var(--main-color);}
/*pageTemporaryBill*/
#spnPaymentMethodToPay, #spnPaymentMethodPaid {display: none;}
/* reserved items*/
#divSelectReservationTypeBlock {display:none;}
/* reservation overview */
#btnCreateBillFromReservation{ line-height:1;}
#btnCreateBillFromReservation .buttonBody  {width: 100%;display: flex;align-items: center;justify-content: space-around;}
#btnCreateBillFromReservation .buttonText{align-items:center;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;}
#btnCreateBillFromReservation .btnCreateBillFromReservation {font-size:75%;}
/*TEMP */
#ulReservationOverviewTabs {display: none !important;}
.pageReservation #divTenantLogo {display: none !important;}
#divReservationAmount {padding-bottom:5px;}
/*info panel */
button#btnTabWeatherOverview {display: none;}
#divFormRightPanelForDashboard {border: 0 solid;box-shadow: none;}
.tab {width: 80px;}
.tabcontent {width: calc(100% - 80px);}
.tab button {border: 1px solid lightgray;}
.tab button.active {border-left: 0px;border-color: #333333;}
.tab button.CRreservation {background-color: rgba(250,211,144,0.25);}
.tab button.active.CRreservation, .tab button.CRreservation:hover {background-color: rgba(250, 211, 144,1);}
.tab button.CRissueBill {background-color: rgba(16, 172, 132,0.15);}
.tab button.active.CRissueBill, .tab button.CRissueBill:hover {background-color: rgba(16, 172, 132,1);}
.tab button.CRreturn {background-color: rgba(229, 80, 57,0.15);}
.tab button.active.CRreturn, .tab button.CRreturn:hover {background-color: rgba(229, 80, 57,1);}

/*#btnChangeReservation {display: none !important;}*/
#divServiceTicketList label {padding-right: 2px !important;padding-left: 2px !important;}
/* planning*/
.Day1Col, .Day2Col, .Day3Col, .Day4Col, .Day5Col, .Day6Col, .Day7Col, .Day8Col, .Day9Col, .Day10Col, .Day11Col, .Day12Col, .Day13Col, .Day14Col, .Day15Col, .Day16Col, .Day17Col, .Day18Col, .Day19Col, .Day20Col, .Day21Col, .Day22Col, .Day23Col, .Day24Col {
    font-size: 14px;padding-top: 0px !important;padding-left: 0px !important;padding-bottom: 0px !important;padding-right: 10px !important;}
/* issue bill*/
#divInsuranceOptions label {margin-bottom: 0;}
#divInsuranceAllowInfo {display: none;margin-bottom: 5px;margin-left: 27px;}
/*bill info*/
#divPaidAmount{display:none;}
#ItemSelectGrid td.CRFItemCurrentStatus .CRreserved {font-size: 85%;}
#divOccupationPanelBody div div label, #divTodayRentedItemsChart label {color: #aaaaaa;font-weight: 400;}
#divMaxQuantityContent label {font-weight: 400;font-style: italic;}
#divHeaderMenuIcons .display-inline-block {padding-right: 5px !important;}
#divItems div.col-lg-12, #divItems div div.row div.col-lg-12 {padding-left: 0 !important;padding-right: 0 !important;}
#divAmountDetails .control-label {display: none;}
#divTotalAmountBottomBorderRow {background-color: lightblue;}
label.CRpayBilled {color: #fbbc00 !important;}
#imgLocationDropdownOptions #lblLocationName {margin-top: 10px;}
#divInternalRemarkMessage {font-style: italic;font-size: var(--main-small-fontSize);}
.dropdown {color: #333333;cursor: pointer;}
/*#divDepositRow {padding-top: 10px;}*/
#divBillItemAmountDetails #divDepositRow label.css-label {background-image: url(../../../../CR/Images/imgCheckbox_blue.png);height: 22px;}
#divDiscountOptions, #spnPackageDiscountSelection, #divPaymentOptionTable {padding-right: 0 !important;}
#divAmountToPayTopBorder3 {background-color: lightblue;}
#divAvailableAndReseredItemsNumebr ,#divAvailableAndReseredItemsNumber {padding: 0 !important;}
#btnBillDetailsPayOpenAmount {display: none;}
#btnBillDetailsPayOpenAmount .buttonText span.fa-layers {font-size: 25px;}
/*#divEmail,#divPassword{margin-left:16%;}*/
#divPassword {margin-top: 25px;}
#divForgotPasswordLink {text-align:center;float: left;width: 100%;}
#divForgotPasswordLink a {float: none !important;margin-top:10px;display:block;}
/*exchange*/
#divNewItemCalculation, #divTotalCal{margin-top: 0 !important;padding-top:10px !important;}
#divSummaryExchangeInfoModel {font-weight:700;font-size:125%;padding-top:10px !important;}
#divReturnItemPaidNotUsed, #divNewItemTotalRent {padding-bottom:10px;}
#divSummaryExchangeInfoModel{border-bottom: 1px solid #CCC;}
/* RENT - availability*/
#divAvailabilityMainContent .tab-content .BGLyellow, #divAvailabilityTabContent .BGLyellow {background-color: inherit !important;}
#divItemTypeAvailabilityFilterRow{background-color:inherit !important;padding-top:0 !important;}
#divItemTypeAvailabilityFilterRow .BGLyellow, #itemAvailability .BGLyellow {background-color: inherit !important;}
#divAvailableItemtypesForWeeklyDayBased{margin-top:10px;}
tr td.availNeg {background-color: rgba(255,0,0,1);color: #FFFFFF;}
tr td.availNull {background-color: rgba(255,0,0,0.5);color: #FFFFFF;}
tr td.availP10 {color: orange;}
tr td.availP9 {color: rgba(51,51,51, 0.6);}
#linkSelectLocation {color: red;}
/*reservation*/
#divQuantityContent{ width:37.5%;}
#divMaxQuantityContent{width:28.5%;}
.lblReservationPaymentStatus {
    width: 85%;
}
/*item overview*/
#divLocationSinceDateTimeContent, div#divLocationSinceDateTimeContent div {padding: 0 !important;}
.btnServiceTicket {min-width: 150px;}
#divItemDetailsContent #divItemImage {min-height: 150px;}
#divMoreItemDetailsContent {float:left;margin-top: -50px;width: 66.6%;}
#divMoreItemDetailsContent label {font-weight: 400 !important;}

/*pageExtraAllReservedItems*/
.pageExtraAllReservedItems #divHeaderInputFiled  {display:none;}
.pageExtraAllReservedItems #divArrivalTimeFilterForReservedItems div:nth-of-type(2) label {height: 100%;font-weight: normal;display: flex;align-items: center;}
.pageExtraAllReservedItems #divArrivalTimeFilterForReservedItems div:nth-of-type(4) label {display: none;}

/*pageReservation*/
#divOnAcocuntPaymentRow, #divAmountToPay div:first-of-type {padding: 0 !important;}
#divAmountToPay {padding-right: 15px !important;}
#divOpenAmount {display: flex;align-items: center;}
#spnDiscountRadio label, #divPackage div label {color: #337ab7;font-weight: bold;}

/* screen size 1440px - 1599px */
@media (min-width:1440px) and (max-width:1599px) {
    #divInput .col-lg-10 {width: 80%;}
    #divInput .col-lg-2 {width: 20%;}
    #txtBillDiscountAmount {width: 80px;}
    #tblBillPaymentMethod td, #tblBillPaymentMethod2 td {padding: 8px 0px;}
    input[type=radio].css-radio + label.css-label {font-size: 12px;}
    #divTotalToPayContent div.col-lg-3 {font-size: 125% !important;}
    #txtResDiscountAmount, #txtBillDiscountAmount {width: 80px;}
    #divAvailableAndReseredItemsNumebr {padding: 0 !important;}
}
/* screen size 1280px -1439 */
@media (min-width:1280px) and (max-width:1439px) {
    .panel-body {padding: 10px;}
	.CRfont-big {font-size: 150% !important;}
    .form-label-group > label {font-size: 12px;}
    .CRfont-biggest {font-size: 175% !important;}
    #divInput div.col-lg-9.col-md-9.col-sm-10.col-xs-11, #divInput div.col-lg-10.col-md-9.col-sm-10.col-xs-11 {width: 910px;}
  /*  #divInput #divDesktopMenu {width: 320px;}*/
    #divHeaderMenuIcons div.pl-15 {padding-left: 5px !important;padding-right: 5px !important;}
    #divOccupationPanelBody label {font-size: 80%;}
    #IssueBillItemListGrid .btnGrid {font-size: 90%;}
    #divDiscountButton {padding-right: 5px !important;}
    .btnDiscount {font-size: 80% !important;padding: 4px 4px !important;}
    #divDesktopSearchFilterOptions {display: none !important;}
    #divMenuIconLogo {width: 230px;}
    .headerInputFiled {width: auto;}
    #divIssueBillMain .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {padding-left: 7px !important;padding-right: 7px !important;}
    label.CRpayBilled {font-size: 90%;}
    #divArrivalDeliveryHour, #divArrivalMinute {width: 100px;}
	#divPackageContent {clear: left;width: 75%;}
	#divAmountDetails .CRfont-bigger {font-size: 110% !important;}
    #divDiscountContent div {width: 100%;padding-left: 0 !important;padding-right: 0 !important;}
    #RbtBilledPayment span {width: 100%;}
	#divDiscountButton #btnDiscount {padding: 4px 5px !important;}
    #divDiscount #divDiscountAmount {margin-top: 8px;}
    #divNewReservationDetails {padding-left: 0 !important;padding-right: 0 !important;}
    #divServiceTicketList label.CRbrokenRepair {font-size: 85%;}
    #jqgh_CurrentServiceTicketListGrid_ItemServiceIssueID {font-size: 85%}
	#txtResDiscountAmount, #txtBillDiscountAmount {width: 80px;}
    #tblBillPaymentMethod td, #tblBillPaymentMethod2 td {padding: 8px 0px;}
    input[type=radio].css-radio + label.css-label {font-size: 12px;}
    #divTotalToPayContent div.col-lg-3 {font-size: 125%;}
    #divTotalBillAmounts {font-size: 175% !important;}
    #divTotalToPayContent div.col-lg-3 {font-size: 125%;}
}
/* screen size 1024px -1279 */
@media (min-width:1024px) and (max-width:1279px) {
    .CRfont-big {
        font-size: 150% !important;
    }

    .form-label-group > label {
        font-size: 12px;
    }

    .CRfont-biggest {
        font-size: 175% !important;
    }

    #divInput div.col-lg-9.col-md-9.col-sm-10.col-xs-11, #divInput div.col-lg-10.col-md-9.col-sm-10.col-xs-11 {
        width: 700px;
    }

    #divInput #divDesktopMenu {
        width: 300px;
    }

    #divOccupationPanelBody label {
        font-size: 80%;
    }

    #IssueBillItemListGrid .btnGrid {
        font-size: 90%;
    }

    #divDiscountButton {
        padding-right: 5px !important;
    }

    .btnDiscount {
        font-size: 80% !important;
        padding: 4px 4px !important;
    }

    #divDesktopSearchFilterOptions {
        display: none !important;
    }

    #divMenuIconLogo {
        width: 230px;
    }

    .headerInputFiled {
        width: auto;
    }

    #divIssueBillMain .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

#imgRentLocationImage {
    height: inherit;
    width: auto;
    max-height: 50px;
    float: left;
}

#imgRentLocationLogo {
    height: inherit;
    width: auto;
    max-height: 50px;
    float: right;
}

#divFormRightPanelForLocation, #divLocationDepot, #divFormRightPanelForTenantLogo, #divTenantLogo {
    padding-left: 0 !important;
    padding-right: 0 !Important;
}

.card-container {
    min-width: 300px;
}

#divAddress, #divTelephone, #divPostCode, #divCity, #divRenterCountry {
    display: none;
}

/*#divInput.divIssueBill #divItemTextControls, #divInput.divReservation #divItemTextControls, #divInput.divGroupIssue #divItemTextControls, #divInput.divServiceTicket #divItemTextControls {
    display: none;
}*/
#btnGuest, #btnScanCode, #divSideIssueActionButtonBar, #divSelectProductButton {display: none;}
#divAddress, #divTelephone, #divPostCode, #divCity, #divRenterCountry {display: none;}
#divTotalBillAmounts {height: 100px !important;}
#btnTemporaryBill {display: none;}
/*#RbtBilledPayment {display: block !important;padding: 15px 0;clear: left;}*/
.form-label-group > label {color: #aaaaaa;}
#divDiscountButton {padding-right: 5px !important;}
/*#accordionReservationDetails .tenant-logo {background-size: auto;}*/
#divIssuTimeLabel {display: none;}
#spnWebuserID, #lbllocationID {color: #b2bec3;font-size: 80%;}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {border-radius: 0px;}
/* issue bill */
#pg_IssueBillItemListGridPager {background: #fce3e3 none repeat scroll 0 0;}
/* reservation */
.pageReservation .ui-state-default, .ui-widget-content .ui-state-default {background-color: rgba(250,211,144,0.25);}
/* close button modal pop */
.modal-right .modal-dialog .close {margin-right: inherit;margin-top: 0;}
button.close {border: 1px solid;border-radius: 50%;width: 25px;height: 25px;}
/* hide PIN login option */
#divCyclerentTenantLogo {display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;} 
#divQuickPinLoginButton {display: none;}
#divLocationDepot {font-weight: 80;}
#divRegistrationHelpContent {display: flex;flex-direction: column;flex-wrap: nowrap;align-items: flex-start;row-gap: 10px;}
#divRegistrationHelp ol {margin-left: -25px;}
#divPinNumPad {display: flex;flex-direction: column;flex-wrap: nowrap;row-gap: 5px;}
#divPinNumPad div {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;max-width: 100%;}
#divPinNumPad .btn {padding: 15px;}
#divPin {margin-left: 0;margin-right: 0;}
#divLoginFooter {display: flex;flex-direction: row;justify-content: space-between;flex-wrap: nowrap;align-items: center;}
/*hide service ticker filter: show only none-maintenance: service tickets */
#divServiceTicketOverviewFilterContent {display: none;}
#imgProfileMain, #imgLocationMain, #imgServiceProvider, #imgLocationMainDock, #imgProfileMainDock {max-height: 80px;height: auto;border-radius: 0;}
.task-container .task-desc {
    margin-top: 0px;
    font-size: 100%;
    line-height: inherit;
    padding: 0 10px;
    font-weight: 400;
}

#divMainServiceOverview .task-container {
    min-height: 400px;
}

    #divMainServiceOverview .task-container p.CRfont-bigger {
        height: 35px;
    }

.cardInfo {
    min-height: 75px;
}

.cardInstruction {
    min-height: 130px;
}

.pageExtraAllReservation #divInput #imgMenu {
    color: var(--main-color);
}
/* extra page */
.pageExtraAllReservation #divInput {
    background-image: url(../../../../CR/Images/CR2018-logo-blue-transparant.png);
}
/**********/
.container-fluid {
    background-color: #ffffff;
}

#linkSelectLocation {
    color: red;
}

.form-signin div.form-signin-heading {
    background: #ffffff url("../../../../CR/Images/CR2018-logo-blue-transparant.png") no-repeat scroll 50% center / 250px auto;
    height: 125px;
}

.form-control:focus {
    border-color: #e05d6f;
    box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset, 0 0 8px rgba(224, 93,11, 0.6);
}
/*
.cyclerent-logo {
    background: #ffffff url("../../../CR/Images/CR2018-logo-blue-transparant.png") no-repeat scroll 50% center / 250px auto;
    height: 40px;
    margin-top: 10px;
    background-size: auto 100%;
}
*/
.tenant-logo {background-image: inherit;background-repeat: no-repeat;background-position: center right;}
#divCyclerentTenantLogo div {background-size: contain;}
.btn-default {
    background: #337ab7 none repeat scroll 0 0;
    border-color: #337ab7;
    color: #ffffff;
}

#divWelcomBackText {
    display: none;
}
#divFooterText {
    background: inherit;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

#divLoginFooter, #divFooterTextRegister {
    font-size: 80%;
    margin-bottom: 5px;
}

#divAccessCodeBtn, #divEnterAcceessCode {
    clear: left;
    float: left;
    margin-left: 0;
    margin-top: 10px;
    text-align: center;
    width: 100%;
}

#divEnterAcceessCode {
    margin-top: 20px;
}
/* error */
#ReservationError {
    background-color: #e83f29;
    color: #ffffff;
    padding: 5px;
    margin-bottom: 3px;
}

.showInline {
    font-weight: 700;
}

/* base */

/**** To remove place holder ****/
/*.form-control::-webkit-input-placeholder {color: transparent;}
.form-control:-moz-placeholder {color: transparent;}
.form-control::-moz-placeholder {color: transparent;}
.form-control:-ms-input-placeholder {color: transparent;}
*/

/*
temp -> gereserveerde items uit gezet */
/*#divReservedItemOverviewCard {display:none;}*/

/* TEMP */
/*#divPrintOptions {display: none;}*/
#divFooterDeviceID {
    display: none;
}

#divFooterVersion {
    float: right;
}

#divSentEmailReport {
    display: none;
}

#divBillDetailsHistoryIcon {
    display: none;
}

#divBillHistoryFilterRow {
    display: none;
}
/* to move definitive */
#divBillHistoryContent {
    margin-top: 10px;
}

.streamline.timeline ul .timeline-post h3 {
    margin-top: 0;
    font-size: 12px;
}

.streamline.timeline ul .timeline-post .post-container > .panel .heading {
    font-size: 12px;
}

.streamline.timeline ul .timeline-post .post-container > .panel {
    padding: 10px 10px;
    margin-bottom: 0px;
    min-height: 60px;
}

.divBillActionContent {
    margin-bottom: 5px;
}

.pageBillInfo #divBillHistoryIcon {
    display: none;
}

/*TEMP */
#ulReservationOverviewTabs {
    display: none !important;
}

.pageReservation #divTenantLogo {
    display: none !important;
}
/*#btnChangeReservation {display: none !important;}*/
#divServiceTicketList label {
    padding-right: 2px !important;
    padding-left: 2px !important;
}

#ItemSelectGrid td.CRFItemCurrentStatus .CRreserved {
    font-size: 85%;
}

#divOccupationPanelBody div div label, #divTodayRentedItemsChart label {
    color: #aaaaaa;
    font-weight: 400;
}

#divMaxQuantityContent label {
    font-weight: 400;
    font-style: italic;
}

#divExtraReservedItemOverviewTab .cardTitle {
    font-size: 110% !important;
}

#divHeaderMenuIcons .display-inline-block {
    padding-right: 5px !important;
}

#divItems div.col-lg-12, #divItems div div.row div.col-lg-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#divAmountDetails .control-label {
    display: none;
}

#divTotalAmountBottomBorderRow {
    background-color: lightblue;
}

label.CRpayBilled {
    color: #fbbc00 !important;
}

#imgLocationDropdownOptions #lblLocationName {
    margin-top: 10px;
}

.dropdown {
    color: #333333;
}
/* #divDepositRow {padding-top: 10px;} 
#divBillItemAmountDetails #divDepositRow label.css-label {background-image: url(../../../CR/Images/imgCheckbox_blue.png);height: 22px;}*/
#divDiscountOptions, #spnPackageDiscountSelection, #divPaymentOptionTable {
    padding-right: 0 !important;
}

#divAmountToPayTopBorder3 {
    background-color: lightblue;
}

#divAvailableAndReseredItemsNumebr {
    padding: 0 !important;
}
/* screen size 1440px - 1599px */
@media (min-width:1440px) and (max-width:1599px) {
    #divInput .col-lg-10 {
        width: 80%;
    }

    #divInput .col-lg-2 {
        width: 20%;
    }

    #txtBillDiscountAmount {
        width: 80px;
    }

    #tblBillPaymentMethod td, #tblBillPaymentMethod2 td {
        padding: 8px 0px;
    }

    input[type=radio].css-radio + label.css-label {
        font-size: 12px;
    }

    #divTotalToPayContent div.col-lg-3 {
        font-size: 125% !important;
    }

    #txtResDiscountAmount, #txtBillDiscountAmount {
        width: 80px;
    }

    #divAvailableAndReseredItemsNumebr {
        padding: 0 !important;
    }
}
/* screen size 1280px -1439 */
@media (min-width:1280px) and (max-width:1439px) {
    .panel-body {
        padding: 10px;
    }

    .CRfont-big {
        font-size: 150% !important;
    }

    .form-label-group > label {
        font-size: 12px;
    }

    .CRfont-biggest {
        font-size: 175% !important;
    }

    #divInput div.col-lg-9.col-md-9.col-sm-10.col-xs-11, #divInput div.col-lg-10.col-md-9.col-sm-10.col-xs-11 {
        width: 910px;
    }

    /*#divInput #divDesktopMenu {
        width: 320px;
    }*/

    #divHeaderMenuIcons div.pl-15 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    #divOccupationPanelBody label {
        font-size: 80%;
    }

    #IssueBillItemListGrid .btnGrid {
        font-size: 90%;
    }

    #divDiscountButton {
        padding-right: 5px !important;
    }

    .btnDiscount {
        font-size: 80% !important;
        padding: 4px 4px !important;
    }

    #divDesktopSearchFilterOptions {
        display: none !important;
    }

    #divMenuIconLogo {
        width: 230px;
    }

    .headerInputFiled {
        width: auto;
    }

    #divIssueBillMain .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    label.CRpayBilled {
        font-size: 90%;
    }

    #divArrivalDeliveryHour, #divArrivalMinute {
        width: 100px;
    }

    #divPackageContent {
        clear: left;
        width: 75%;
    }

    #divAmountDetails .CRfont-bigger {
        font-size: 110% !important;
    }

    #divDiscountContent div {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #RbtBilledPayment span {
        width: 100%;
    }

    #divDiscountButton #btnDiscount {
        padding: 4px 5px !important;
    }

    #divDiscount #divDiscountAmount {
        margin-top: 8px;
    }

    #divNewReservationDetails {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #divServiceTicketList label.CRbrokenRepair {
        font-size: 85%
    }

    #jqgh_CurrentServiceTicketListGrid_ItemServiceIssueID {
        font-size: 85%
    }

    #txtResDiscountAmount, #txtBillDiscountAmount {
        width: 80px;
    }

    #tblBillPaymentMethod td, #tblBillPaymentMethod2 td {
        padding: 8px 0px;
    }

    input[type=radio].css-radio + label.css-label {
        font-size: 12px;
    }

    #divTotalToPayContent div.col-lg-3 {
        font-size: 125%;
    }

    #divTotalBillAmounts {
        font-size: 175% !important;
    }

    #divTotalToPayContent div.col-lg-3 {
        font-size: 125%;
    }
}
/* screen size 1024px -1279 */
@media (min-width:1024px) and (max-width:1279px) {
    .CRfont-big {
        font-size: 150% !important;
    }

    .form-label-group > label {
        font-size: 12px;
    }

    .CRfont-biggest {
        font-size: 175% !important;
    }

    #divInput div.col-lg-9.col-md-9.col-sm-10.col-xs-11, #divInput div.col-lg-10.col-md-9.col-sm-10.col-xs-11 {
        width: 700px;
    }

    #divInput #divDesktopMenu {
        width: 300px;
    }

    #divOccupationPanelBody label {
        font-size: 80%;
    }

    #IssueBillItemListGrid .btnGrid {
        font-size: 90%;
    }

    #divDiscountButton {
        padding-right: 5px !important;
    }

    .btnDiscount {
        font-size: 80% !important;
        padding: 4px 4px !important;
    }

    #divDesktopSearchFilterOptions {
        display: none !important;
    }
    /*#divMenuIconLogo {width: 230px;}*/
    .headerInputFiled {
        width: auto;
    }

    #divIssueBillMain .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

#imgRentLocationImage {
    height: inherit;
    width: auto;
    max-height: 50px;
    float: left;
}

#divFormRightPanelForLocation, #divLocationDepot, #divFormRightPanelForTenantLogo, #divTenantLogo {
    padding-left: 0 !important;
    padding-right: 0 !Important;
}

.card-container {
    min-width: 300px;
}

#divAddress, #divTelephone, #divPostCode, #divCity, #divRenterCountry {
    display: none;
}

/*#divInput.divIssueBill #divItemTextControls, #divInput.divReservation #divItemTextControls, #divInput.divGroupIssue #divItemTextControls, #divInput.divServiceTicket #divItemTextControls {
    display: none;
}*/

#btnGuest, #divSideIssueActionButtonBar, #divSelectProductButton {
    display: none;
}

#divAddress, #divTelephone, #divPostCode, #divCity, #divRenterCountry {
    display: none;
}

#divServiceCostRow, #divTransportCostRow {display: block !important;}
#tdBillPaymentByOtherOptions {display: none !important;}
#divTotalBillAmounts {height: 100px !important;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;}
.border-right{border-color:#CCCCCC;}
#btnTemporaryBill {display: none;}

/*#RbtBilledPayment {display: block !important;clear: left;}*/
#tdBillPaymentByPin .pinCombi, #RbtPaymentByPin .pinCombi {display: none;}

.form-label-group > label {color: #aaaaaa;}

#divDiscountButton {
    padding-right: 5px !important;
}
/*#accordionReservationDetails .tenant-logo {background-size: auto;}*/
#divIssuTimeLabel {
    display: none;
}

#spnWebuserID, #lbllocationID {
    color: #b2bec3;
    font-size: 80%;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-radius: 0px;
}
/* issue bill */
#pg_IssueBillItemListGridPager {
    background: #fce3e3 none repeat scroll 0 0;
}
/* reservation */
.pageReservation .ui-state-default, .ui-widget-content .ui-state-default {
    background-color: rgba(250,211,144,0.25);
}
/* close button modal pop */
.modal-right .modal-dialog .close {
    margin-right: inherit;
    margin-top: 0;
}
.modal .modal-dialog .close {
    margin-right: inherit;
    margin-top: 0;
}

button.close {
    border: 1px solid;
    border-radius: 50%;
    width: 25px;
    height: 25px;
}
/* hide PIN login option */
#divQuickPinLoginButton {
    display: none;
}

#divLocationDepot {
    font-weight: 80;
}
/*hide service ticker filter: show only none-maintenance: service tickets */
#divServiceTicketOverviewFilterContent {
    display: none;
}

#imgProfileMain, #imgLocationMain, #imgServiceProvider, #imgLocationMainDock, #imgProfileMainDock {
    max-height: 80px;
    height: auto;
    border-radius: 0;
}

.task-container .task-desc {
    margin-top: 0px;
    font-size: 100%;
    line-height: inherit;
    padding: 0 10px;
    font-weight: 400;
}

#divMainServiceOverview .task-container {
    min-height: 400px;
}

    #divMainServiceOverview .task-container p.CRfont-bigger {
        height: 35px;
    }

.cardInfo {
    min-height: 75px;
}

.cardInstruction {
    min-height: 130px;
}

.pageExtraAllReservation #divInput #imgMenu {
    color: var(--main-color);
}
/* extra page */
.pageExtraAllReservation #divInput {
    background-image: url(../../../../CR/Images/CR2018-logo-blue-transparant.png);
}
/**********/
.container-fluid {
    background-color: #ffffff;
}

#linkSelectLocation {
    color: red;
}

.form-signin div.form-signin-heading {
    background: #ffffff url("../../../../CR/Images/CR2018-FoT-v1.png") no-repeat scroll 50% center / 250px auto;
    height: 125px;
}

.form-control:focus {
    border-color: #e05d6f;
    box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset, 0 0 8px rgba(224, 93,11, 0.6);
}

.cyclerent-logo {
    background: #ffffff url("../../../../CR/Images/CR2018-logo-blue-transparant.png") no-repeat scroll 50% center / 250px auto;
    height: 40px;
    margin-top: 10px;
    background-size: auto 100%;
}

.btn-default {
    background: #337ab7 none repeat scroll 0 0;
    border-color: #337ab7;
    color: #ffffff;
}
#divWelcomBackText {display: none;}
.loginHeader {
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 0;
    text-transform: uppercase;
    color: #337ab7;
}
#divFooterText {
    background: inherit;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}
#divLoginFooter, #divFooterTextRegister {font-size: 75%;margin-bottom: 5px;}
#divAccessCodeBtn, #divEnterAcceessCode {
    clear: left;
    float: left;
    margin-left: 0;
    margin-top: 10px;
    text-align: center;
    width: 100%;
}

#divEnterAcceessCode {
    margin-top: 20px;
}
/* error */
#ReservationError {
    background-color: #e83f29;
    color: #ffffff;
    padding: 5px;
    margin-bottom: 3px;
}

.showInline {
    font-weight: 700;
}
/* base styles */
.CRtitle {
    font-size: 150%;
    color: #337ab7;
}

    .CRtitle div div {
        width: auto;
    }

.CRtitle-label {
    font-weight: 400;
    text-align: right;
}

.CRtitle-field {
    font-weight: 800;
    text-align: left;
    margin-left: 1%;
}

.CRsection-header {
    background: #ededed none repeat scroll 0 0;
    color: #e83f29;
    font-size: 120%;
    padding: 1% 1% 0;
    width: 98%;
}

.CRinput-row {
    background-color: #ededed;
    padding: 0 1%;
    width: 98%;
}

.CRinput-group {
    margin-bottom: 0;
}

.CRinput-label {
    font-size: 80%;
}
/* login page */
.form-signin-heading-TextLogo {
    color: #e8412c;
    font-size: 46px;
    font-weight: bold;
    display: none;
}

.sublogindiv {
    background-color: #ffffff;
    border: 1px solid #337ab7;
    border-radius: 6px;
    padding: 15px 15px;
    width: 465px;
    padding: 15px 15px 0;
}

.pageResetCyclerent .sublogindiv {
    border-color: orange;
}
#divLoginOptionsRow svg {height:20px;}
#frmLogin {margin: 0 1%;}
#divPin div.col-sm-8 {width: 100%;}
#lblPin {display: none;}
#txtPassword {height: 46px;width: 100%;text-align: center;font-size:250%;max-width:200px;}
#divLoginBtn {margin-left: 0;width: 100%;font-weight:700;padding-top:10px;margin-bottom: 10px;}
#divLoginBtn .CRbutton {width: 100%;max-width:300px;line-height:5;}
#divCyclerentTenantLogo {display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;}
#divPin div {display: flex;flex-direction: column;justify-content: center;align-items: center;flex-wrap: nowrap;}
#divPin div div {display: flex;flex-direction: row;justify-content: center;align-items: center;flex-wrap: nowrap;margin-bottom:0;}

#btnReservation {background-color: #f0ad4e;}
#btnReservationIcon {background-color: #f0ad4e;}
#btnIssueBill {background-color: #16a085;}
#btnIssueBillIcon {background-color: #16a085;}
#txtBillItem {height:34px;color: rgb(119,119,119);text-align: center;background-color:rgba(255,255,255,0.2);border-color:rgba(185,74,72,0.6);}
#txtBillItem:hover{box-shadow: 0 0 5px orange;cursor:pointer;border-color:rgba(185,74,72,1);}
#txtBillItem:focus{background-color:#FFFFFF;border-color:rgba(185,74,72,1);cursor:auto;}
#txtBillItem::placeholder{color:#ffffff;}
#BillDetailsModal .modal-dialog {width: 70% !important;}
.btn-holder {position: absolute;bottom: 0px;right: 0px;}
.btn-xs {padding: 1px 5px !important;font-size: 12px !important;line-height: 1.5 !important;border-radius: 3px !important;}
#ModalShowExchange .modal-dialog {width: 60%;}
#ModalShowExchange .modal-dialog .modal-footer .btn {width: 20%;}
#ExchangeErrorMsg .modal-dialog {width: 30%;}
#ModalItemAvailableOptions .modal-dialog {
    width: 500px;
}

#divAboutCycleRentText {
    text-align: center;
    font-weight: 400;
}

.login-wrap .error-panel {
    background-color: transparent;
    color: #e83f29 !important;
}

.error-panel {
    background-color: #e83f29;
    color: #ffffff !important;
}

.success-panel {
    background-color: #E1FFE1;
    color: #000000 !important;
}

.Item-Rented {
    background-color: #e8412c;
    color: #ffffff;
}

.Item-Available {
    background-color: #16a085;
    color: #ffffff;
}

.Item-Reserved {
    background-color: yellow !important;
    color: #000;
}

.other-color {
    background-color: #99CC00;
}

.inService {
    background-color: rgba(250,211,144,0.25);
}

#divCycleRentCopyright {
    text-align: right;
}

#tblItemOnBill, #tblBillAmounts, #tblBillItemAmounts, #tblProductOnBill {
    overflow: auto !important;
    /*table-layout: fixed;*/
}

.required-Control, a.chosen-single.requiredInputError {background-color: #FFFF99;border-bottom-color: red !important;}

/*** CSS for Menu ***/
.sidenav {
    height: 100%;
    /*width: 270px;*/
    width: 300px;
    position: fixed;
    /*z-index: 1000;*/
    z-index: 9999;
    top: 60px;
    left: 0;
    background-color: #f9f9f9;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 20px;
    -webkit-box-shadow: 4px 2px 10px 1px rgba(138,135,138,0.63);
    -moz-box-shadow: 4px 2px 10px 1px rgba(138,135,138,0.63);
    box-shadow: 4px 2px 10px 1px rgba(138,135,138,0.63);
}

    .sidenav::-webkit-scrollbar {
        width: 5px;
        background-color: rgba(138,135,138,0.63);
    }

    .sidenav::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
    }

    .sidenav::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #000;
        display: block;
        transition: 0.3s;
    }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

.hide-menu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 300px;
    height: 100%;
    -webkit-transform: translate3d(300px,0,0);
    -moz-transform: translate3d(300px,0,0);
    -o-transform: translate3d(300px,0,0);
    -ms-transform: translate3d(300px,0,0);
    transform: translate3d(300px,0,0);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.show-menu {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
/**************/
#tblIncompleteBillList tr:nth-child(even) {background-color: rgba(51, 122, 183,0.1);}
#tblIncompleteBillList tr:hover {background-color: rgb(225, 255, 225);}
#tblIncompleteBillList tr td:hover {cursor: pointer;}
#AddServiceTicketModal .modal-dialog {width: 40%;}
/******** Radio button CSS *********/
input[type=radio].css-radio {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

    input[type=radio].css-radio + label.css-label {
        padding-left: 27px;
        height: 22px;
        display: inline-block;
        line-height: 22px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 14px;
        vertical-align: middle;
        cursor: pointer;
        font-weight: normal;
    }

    input[type=radio].css-radio:checked + label.css-label {
        background-position: 0 -22px;
    }

.css-radio + label.css-label {
    background-image: url(../../../../CR/Images/imgRadioButtons1_357ebd.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/******** Checkbox CSS *********/
input[type=checkbox].css-checkbox {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

    input[type=checkbox].css-checkbox + label.css-label {
        padding-left: 25px;
        height: 22px;
        display: inline-block;
        line-height: 20px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-weight: normal;
        vertical-align: middle;
        cursor: pointer;
    }

    input[type=checkbox].css-checkbox:checked + label.css-label {
        background-position: 0 -22px;
    }

    input[type=checkbox].css-checkbox + input[type=hidden] + label.css-label {
        padding-left: 25px;
        height: 20px;
        display: inline-block;
        line-height: 20px;
        background-repeat: no-repeat;
        background-position: 0 -2px;
        font-weight: normal;
        vertical-align: middle;
        cursor: pointer;
    }

    input[type=checkbox].css-checkbox:checked + input[type=hidden] + label.css-label {
        background-position: 0 -22px;
    }

label.css-label {
    background-image: url(../../../../CR/Images/imgCheckbox_blue.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 20px;
}
/*************************************/
/* datapicker ***/

.datepicker .datepicker-switch {
    font-size: 16px;
}

.datepicker .next, .datepicker .prev {
    font-size: 25px;
}

    .datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
        color: #ffffff;
        border-radius: 0;
        transition: background-color linear 0.5s;
        background-color: rgb(0,100,0) !important;
    }

.datepicker .cw {
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
}

.datepicker .day {
    font-size: 16px;
    border: 1px solid #ccc;
    width: 40px;
    height: 40px;
}

    .datepicker .day:hover {
        color: #ffffff;
        border-radius: 0;
        transition: background-color linear 0.5s;
        background-color: rgb(0,100,0) !important;
    }

.datepicker .active {
    background-image: none !important;
    background-color: #357ebd !important;
    border-radius: 0;
}

.datepicker .disabled {
    font-size: inherit;
}

    .datepicker .disabled:hover {
        font-size: inherit;
        background-color: #fff !important;
        color: inherit;
    }
/*******/


#divPanelRentServiceTicket {
    padding-right: 0px !important;
}

#ItemBillInfoModal .modal-dialog {
    width: 83%;
}

.modal-dialog {
    margin-top: 60px;
}

#SelectNewItemForExchange .modal-dialog {
    margin-top: 30px;
}


.clockpicker .input-group-addon {
    background-color: transparent;
    width: auto;
    border: none;
    padding: 0px;
    line-height: 0px;
    display: inline-block;
    margin-top: -6px;
    font-size: 14px;
}

#modalBillAvailableOptions .modal-dialog {
    width: 500px;
}


#divErrorMessages {
    width: 100%;
    text-align: center !important;
    padding: 0 !important;
}

    #divErrorMessages .validation-summary-errors {
        background-color: red;
        color: white;
        padding: 5px 0;
    }

        #divErrorMessages .validation-summary-errors ul {
            padding: 0 5px;
            font-size: 14px;
            margin: 0;
        }

            #divErrorMessages .validation-summary-errors ul li {
                list-style: none;
                padding: 5px 0;
            }

#divOccupationChart {
    width: 99%;
}

#BillExtendModal .modal-dialog {
    /*width: 700px;*/
    width: 650px;
}

#AvailableItemsModal .modal-dialog {
    /*width: 700px;*/
    width: 1000px;
}

#divItemModeContent .btn {
    padding: 12px !important;
}

#lblExtraWorkstation {
    font-size: 36px !important;
    line-height: 1 !important;
}

#SelectBillTempProductModal .modal-dialog {
    width: 1000px;
}

.txtQty-grid {
    width: 70px;
}

#divProcessItemMain {
    padding-top: 15px;
}

/*#divItemDetails {
	padding: 15px;
}*/


.btn-menu {
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease-in-out 0s;
    border: 1px solid lightgray;
    padding: 4px;
    font-size: 24px;
	background-color:rgba(255,255,255,0.2);
}

    .btn-menu:hover {
        cursor: pointer;
        transition: all 0.2s ease-in-out 0s;
        border: 1px solid black;
    }

#IssueOverviewMenuModal .modal-dialog {
    width: 750px;
}

#divIssueOverviewPageMenu .btn {
    height: 70px !important;
    text-align: center;
    vertical-align: middle;
    line-height: 4;
    font-weight: bold;
}

#ReservationOverviewModalPopup .modal-dialog {
    width: 95%;
}

    #ReservationOverviewModalPopup .modal-dialog .modal-footer .btn {
        width: auto;
    }
/*********** Registration Help template CSS **************/
#IntroductionModal {
    z-index: 9999;
}

#divRegistrationHelp {
    float: right;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    /*border: 1px solid black;*/
    width: 370px;
    height: 100%;
    padding-right: 2px;
    overflow: auto;
    border: 1px solid #e5e5e5;
    box-shadow: 2px 2px 2px #e5e5e5;
}

    #divRegistrationHelp p {
        text-align: justify;
    }

#divCloseHelpPanel {
    float: left;
    width: 15px;
    height: 20px;
    margin-left: 2px;
}

    #divCloseHelpPanel:hover {
        cursor: pointer;
    }
/*********************************************************/
/*********************/

/*home page - small buttons*/
.CRIconSmallMenuCard {font-size: 30px;padding-left:5px;display: flex;justify-content: center;}
#divTitleExchangeMenuCard, #divTitleChangeBookingMenuCard {display: flex;flex-direction: column;align-items: center;}
#divTitleItemAvailabilityMenuCard {display: flex;justify-content: center;column-gap: 5px;align-items: center;}
#divExchangeMenucard input, #divDashChangeBookingMenuCardBody input{height: 30px;width: 85%;padding-left: 5px;padding-right: 5px;text-align: center;}
#divDashChangeBookingMenuCardBody {display: flex;flex-direction: row-reverse;justify-content: center;gap: var(--gap);padding-right: 20px;}
/* .pageIssueBill */
.pageIssueBill .panel-body {
    padding: 0;
}

/*
.divIssueBill {
    background-color: #ffffff;
    color: var(--main-color);
    border-bottom: rgba(22, 160, 133, 1) solid 1px;
}*/

.pageIssueBill .panel-group .panel-heading + .panel-collapse > .list-group, .pageIssueBill .panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: 0 solid #ddd;
}

.pageIssueBill .panel-group .panel {
    border: 0 solid #ffffff;
}

/*.form-label-group > .form-control {
	height: 40px;
}*/

.form-label-group .form-control:not(:placeholder-shown) ~ label {
    padding-top: 0px;
}

.form-control {
    border: 0 solid #ffffff;
    height: 40px; /*For floating label*/
	line-height:1.5 !important;
}

.form-control, .border-bottom-only {
    border-bottom: #777777 3px solid !important;
    border-radius: 0;
}

.btn-plus, .btn-minus {
    height: 40px !important;
    font-weight: 800;
}

.pageIssueBill .form-control, .pageIssueBill .border-bottom-only {
    border-bottom: #16a085 3px solid;
}

/*#divReservationOverview {
    display: none;
}*/

#gview_IssueBillItemListGrid .ui-state-default, #accordionIssuePageBillList {
    background-color: rgba(255, 37, 58, 0.035);
}
/*home*/
#divInput {background-image: var(--logo-CR-main);}
.Scan #divInput {background-image: var(--logo-CR-main-scan);}
.testModus #divInput {background-image: var(--logo-CR-main-TEST);}
.testModus.Scan #divInput {background-image: var(--logo-CR-main-TEST-scan);}
body .pageHome #divInput{background-image:  var(--logo-CR-mainAlt);background-color:#FFFFFF;}
body .pageHome.testModus #divInput{background-image:  var(--logo-CR-main-TEST);}
body .pageHome, .pageHome #imgMenu {color: var(--main-color);}
body .pageHome .headerInputFiled {display:none !important;}
body .pageHomeMaintenance #divInput {background-image:  var(--logo-CR-main);background-color: #FFFFFF;}
body .pageHomeMaintenance.testModus #divInput {background-image:  var(--logo-CR-main-TEST);}
body .pageHomeMaintenance, .pageHomeMaintenance #imgMenu {color: var(--main-color);}
body .pageHomeMaintenance .headerInputFiled {display: none !important;}
.MenuCardSmall {padding-bottom: 0 !important;}
.MenuCardSmall .menu-card {min-height:60px;}
#divExchangeAndService, #divDashChangeBooking {gap:15px;max-height: 300px;}
/* pop ups */
.modal-body {padding-top: 0;}
.modal-content {border-radius: 0;}
.radius-top {border-top-left-radius: 0;border-top-right-radius: 0;}
#divIssueOverviewMenuContent, #divSelectBillProductListData {padding: 0 !important;}
#divBillDetailBillStatus {margin-top: 25px;}
/* icons */
.fa-fw {vertical-align: middle;}
/* colors */

/* menu buttons */
.MBresAll {
    background-color: #FFA500;
    color: #ffffff;
}

.MBresDelivery {
    background-color: #FFA500;
    color: #16a085;
}

.MBresGroup {
    background-color: #FFA500;
    color: #99CC00;
}

.MSresAllOpenAmount {
    background-color: #FFA500;
    color: red;
}

.PMbillGroupCurrent {
    background-color: #99CC00;
    color: #ffffff;
}

#ReservationDetailsModal .modal-dialog {
    width: 50%;
}

#ReservationCommentModalPopup {
    z-index: 9999 !important;
}

    #ReservationCommentModalPopup .modal-dialog {
        width: 500px;
    }

#divRenterNameContent .txtAutoComplete {
    width: 91%;
}

#divRenterNameContent .btn-txt-search {
    width: 9%;
}

.border-selectedLanguage {
    border-radius: 50%;
    /*border: 3px solid #000000;*/
}

.txtQuantity-grid { /*width: 100% !important;*/
    width: 65px !important;
    text-align: center !important;
}

.tdDiscountAmount {
    vertical-align: bottom;
}
/*** Auto-complete textbox(Jquery) ***/
.ui-autocomplete-input {
    /*border: none;
	font-size: 14px;
	width: 300px;
	height: 24px;*/
    /*margin-bottom: 5px;
	padding-top: 2px;*/
    /*border: 1px solid #DDD !important;*/
    /*padding-top: 0px !important;*/
    /*z-index: 1511;*/
    position: relative;
}

.ui-menu .ui-menu-item a {
    font-size: 12px;
}

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1051 !important;
    float: left;
    display: none;
    min-width: 160px;
    _width: 160px;
    padding: 4px 0;
    margin: 2px 0 0 0;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    /*border-right-width: 2px;
    *border-bottom-width: 2px;*/
}

.ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;
    text-decoration: none;
}

.ui-state-hover, .ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none;
}

#imgLogoutDropdownOptions {
    overflow: unset;
}

#divIssueBill #divRenterDetails, #divItemSelectionPanel, #divItemTypeSelectionPanel, #divReservation #divReserveeDetails {
    width: 100%;
    float: left;
}

#divPanelRentBillList {
    width: 100%;
    float: left;
    padding-left: 0px !important;
}

#divIssueBill #divBillItemDetails, #divIssueBill #divCancelBillContent, #divSelectItemTypeDetails, #divCancelReservationRow {
    width: 65%;
    float: left;
}

#divIssueBill #divBillPeriodDetails, #divIssueBill #divBillAmountsDetails, #divIssueBill #divSideIssueActionButtonBar, #divReservationPeriodDetails, #divReservationAmountDetails,
#divSideReservationActionButtonBar, #divPanelRentServiceTicket {
    width: 35%;
    float: right;
}

#divPrintReservationOptionRow div.form-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 10px;
    padding-bottom: 10px;
}
.display-table {
    display: table;
}

.vertical-middle {
    display: table-cell;
    vertical-align: middle !important;
}

#tblOpenTicketDetails tr td .btn {
    width: 50%;
}

#ItemHistoryModal .modal-dialog {
    width: 70%;
}

#divExchangeInfo .modal-footer button, #ItemHistoryModal .modal-footer button {
    width: 20% !important;
}

/*#divIssueBill #divReturnDateTime, #divReservation #divReturnDateTime {
	margin-top: -80px;
}*/
#divIssueBill #divReturnDateTime {
    margin-top: -125px;
}

#divReservation #divReturnDateTime {
    margin-top: -55px;
    background-color: rgba(250,211,144,0.25);
    padding: 15px;
}

#lblNumberOfReservation {
    line-height: 40px;
    color: #b2bec3;
}

#imgLogoutDropdownOptions .media-body {
    padding-top: 30px !important;
}

    #imgLogoutDropdownOptions .media-body label {
        font-weight: 400 !important;
    }

#SpecialServiceIssuesModal .modal-dialog {
    width: 40%;
}

#ShowServiceTicketOverviewModal .modal-dialog {
    width: 35%;
}

.card {min-height: 50px !important;margin-bottom: 10px !important;cursor: auto !important;}
.card .front {padding: var(--gap) !important;}
.card .back {padding: var(--gap) !important;}
.card-container .card .row {display: flex;align-items: center;}
.card-container .card .row .text-center{display: flex !important;flex-direction: column;align-items: center;}

#ReservationOverviewModalPopup.modal-backdrop, #ItemBillInfoModal.modal-backdrop {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1039 !important;
}

#BillDetailsModal.modal-backdrop, #ReservationDetailsModal.modal-backdrop {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1040 !important;
}

#ModalBillPaymentLaterMessage.modal-backdrop {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    z-index: 1041 !important;
}

#divIssueFormPanel, #divReservationFormPanel {
    width: 65%;
    padding-right: 2px;
    float: left;
}

#divRentInfoDashboard, #divRightInfoPanel {
    width: 35%;
    float: right;
    padding-left: 2px;
}

#SearchRenterModal .modal-dialog {
    width: 865px;
}

.CRshowSmall {
    display: none;
}

.CRshowMedium {
    display: none;
}

.CRshowWide {
    display: block;
}

.overflow-auto {
    overflow: auto;
}

#ModalAddNewLocation .modal-dialog {
    width: 30%;
}

#divMobileMenu, #divMobileSearchFilterOptions {display: none;text-align:center !important;}

#divDesktopMenu, #divDesktopSearchFilterOptions {display: block;}

#ModalAddEditHolidayAddress .modal-dialog {
    width: 75%;
}

#divUploadLocationImageRow > #divLocationImage, #divUploadLocationLogoImageRow #divLocationLogoImage {
    height: 150px;
    width: 150px;
}

.noFocus:hover, .noFocus + label:hover {
    cursor: auto;
}

.file-area .file-dummy {
    border: 1px dashed #777;
}

#divGeoLocationAndRemarkPanel input.form-control {
    border-bottom: #777777 0 solid;
    box-shadow: none;
    background-color: #ffffff;
}
/***** Manage Exchange item form div's start *********/
#divOldItemNumber {
    width: 50%;
    float: left;
    padding: 0px 4px;
}

#divNewItemNumberContect {
    width: 50%;
    float: right;
    padding: 0px 4px;
}

#divOldItemDetails {
    width: 50%;
    float: left;
    padding: 0px 4px;
}

#divExchangeAmountPanel {
    width: 50%;
    float: right;
    padding: 0px 4px;
}

#divcancelExchangeItem {
    width: 50%;
    float: left;
    padding: 0px 4px;
}

#divPrintExchangeBill {
    width: 50%;
    float: right;
    padding: 0px 4px;
}
/***** Manage Exchange item form div's end *********/
#AddEditPeriodDetailsModal .modal-dialog {
    width: 500px;
}
/****Custome dropdown CSS ******/
#divLocationPickupContent .dropdown-toggle, #divLocationPickupContent .dropdown-menu {
    width: 100%;
}

#ModalEditReservationDetails .custom-dropdownList {
    position: fixed;
    top: auto;
    z-index: 9999;
    left: 5%;
    right: 0;
    margin: 0;
    padding: 0;
    width: 90% !important;
}

#divInputGroupForLocationPickup.btn-group img {
    margin-right: 10px;
}

#divLocationPickupContent .dropdown-toggle {
    padding-right: 50px;
    text-align: left;
    padding-top: 8px;
}

    #divLocationPickupContent .dropdown-toggle #spnLocationPickupIcon > svg {
        float: left !important;
        margin: 0;
    }

    #divLocationPickupContent .dropdown-toggle svg {
        margin-left: 20px;
        margin-right: -40px;
        float: right !important;
    }



#spnSelectedLocationPickup {
    padding-left: 10px;
}

#divLocationPickupContent .dropdown-menu > li {
    padding-left: 8px;
    padding-right: 8px;
}

    #divLocationPickupContent .dropdown-menu > li > div:hover {
        background: #c9e1ed;
        cursor: pointer;
    }

#divLocationPickupContent .dropdown-header {
    background: #ccc;
    font-size: 14px;
    font-weight: 700;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.noDeliveryIcon {
    padding-left: 1.25em;
}

#divReservationProcessButtons {
    min-height: 350px;
}

#divButtonCancelReservationRow {
    position: absolute;
    bottom: 0;
    max-width: 200px;
}

#divChangeReservationButtonRow {
    position: absolute;
    bottom: 90px;
    max-width: 200px;
}

#ModalShowRequiredFieldsError .modal-dialog, #ConfirmationRemoveItemModal .modal-dialog, #ConfirmationCancelBillModal .modal-dialog, #ErrorSelectPeriodModal .modal-dialog, #ConfirmLeasedItemModal .modal-dialog,
#ErrorMessageModal .modal-dialog, #ShowErrorMessagesModal .modal-dialog, #ShowSuccessMessagesModal .modal-dialog, #ModalConfirmReturnBillItem .modal-dialog, #ModalBillDetailsConfirmReturnBill .modal-dialog,
#ModalConfirmReturnBill .modal-dialog, #ItemNotAllowedModal .modal-dialog, #CRScanItemProcessErrorModal .modal-dialog, #CRScanItemsClearConfirmationModal .modal-dialog, #CRScanItemRemoveConfirmationModal .modal-dialog,
#CRScanItemsFinalProcessedSuccessModal .modal-dialog, #CRScanItemsFinalProcessConfirmationModal .modal-dialog, #CancelReservationConfirmationModal .modal-dialog, #RemoveItemTypeConfirmationModal .modal-dialog,
#ErrorPrinterModal .modal-dialog, #ModalShowItemError .modal-dialog, #ModalConfirmRemoveItem .modal-dialog, #ErrorBillPrintModal .modal-dialog, #SuccessBillPrintModal .modal-dialog, #ModalShowGroupBillError .modal-dialog,
#ConfirmationRemoveProductModal .modal-dialog, #ModalProductError .modal-dialog, #ModalInputScanError .modal-dialog, #ModalShowBillAmountError .modal-dialog, #ModalReservationAlreadyProcessed .modal-dialog,
#ModalResetCookies .modal-dialog, #ConfirmationReopenServiceIssuesModal .modal-dialog, #CancelCreatedReservationConfirmationModal .modal-dialog, #ModalErrorAddNewLocation .modal-dialog, #ModalErrorAddEditHolidayAddress .modal-dialog,
#ErrorPeriodDetailsModal .modal-dialog, #ModalPasswordChangedSuccess .modal-dialog, #AddNewPricecodeModal .modal-dialog, #ErrorPricecodeDetailsModal .modal-dialog, #ModalExchangeItemFromAnotherLocationError .modal-dialog,
#CreateBillFromReservationConfirmationModal .modal-dialog, #ConfirmationCancelBillAfterCreatedModal .modal-dialog, #TemporaryBillListFilterModal .modal-dialog {
    width: 400px;
}
/*#ModalShowRequiredFieldsError .modal-body, #ConfirmationRemoveItemModal .modal-body, #ConfirmationCancelBillModal .modal-body, #ErrorSelectPeriodModal .modal-body, #ConfirmLeasedItemModal .modal-body, #ErrorMessageModal .modal-body,
#ShowErrorMessagesModal .modal-body, #ShowSuccessMessagesModal .modal-body, #ModalConfirmReturnBillItem .modal-body, #ModalBillDetailsConfirmReturnBill .modal-body, #ModalConfirmReturnBill .modal-body, #ItemNotAllowedModal .modal-body,
#CRScanItemProcessErrorModal .modal-body, #CRScanItemsClearConfirmationModal .modal-body, #CRScanItemRemoveConfirmationModal .modal-body, #CRScanItemsFinalProcessedSuccessModal .modal-body, #CRScanItemsFinalProcessConfirmationModal .modal-body,
#CancelReservationConfirmationModal .modal-body, #RemoveItemTypeConfirmationModal .modal-body, #ErrorPrinterModal .modal-body, #ModalShowItemError .modal-body, #ModalConfirmRemoveItem .modal-body, #ErrorBillPrintModal .modal-body,
#SuccessBillPrintModal .modal-body, #ModalShowGroupBillError .modal-body, #ConfirmationRemoveProductModal .modal-body, #ModalProductError .modal-body, #ModalInputScanError .modal-body, #ModalShowBillAmountError .modal-body,
#ModalReservationAlreadyProcessed .modal-body, #ModalResetCookies .modal-body, #ConfirmationReopenServiceIssuesModal .modal-body, #CancelCreatedReservationConfirmationModal .modal-body, #ModalErrorAddNewLocation .modal-body,
#ModalErrorAddEditHolidayAddress .modal-body, #ErrorPeriodDetailsModal .modal-body, #ModalPasswordChangedSuccess .modal-body, #AddNewPricecodeModal .modal-body, #ErrorPricecodeDetailsModal .modal-body, #ModalExchangeItemFromAnotherLocationError .modal-body,
#CreateBillFromReservationConfirmationModal .modal-body, #ConfirmationCancelBillAfterCreatedModal .modal-body {
	font-size: 125% !important;
}*/
#ModalEditReservationDetails .modal-dialog {
    width: 50%;
}

#ModalEditReservationDetails .btn-txt-search {
    width: 16%;
    float: right;
    height: 40px !important;
    line-height: 2;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding: 0;
    box-shadow: none;
}

#ModalEditReservationDetails #divRenterNameContent .btn-txt-search {
    width: 9%;
}

#ModalEditReservationDetails #divReserveeDetails, #ModalEditReservationDetails #divSelectItemTypeDetails, #ModalEditReservationDetails #divCancelReservationRow, #ModalEditReservationDetails #divReservationPeriodDetails, #ModalEditReservationDetails #divReservationAmountDetails {
    width: 100%;
    float: left;
}

#MoreReserveeDetailsModal {
    z-index: 1077;
}

#ModalEditReservationDetails #divReturnDateTime {
    margin-top: -55px;
}

#lblNoReservationForToday {
    margin-top: 10px !important;
    color: #10ac84;
    font-weight: normal !important;
}

#divGenerateDayReportView {
    border: 1px solid #337ab7;
    padding: 10px !important;
}

#lblReportGenerateHeader {
    font-size: 150%;
}

#divExtendedReportCheckbox {
    float: left;
    text-align: left !important;
    margin: 10px 0;
}

.evenRow {
    background-color: #e5e5e5;
}

.oddRow {
    background-color: #fff;
}

#divExternalReference {
    display: none;
}

#tdPaymentLater {
    display: none !important;
}

#divLocationDepot #imgRentLocationImage, #divLocationDepot #lblRentLocationName {
    float: left;
}

#ModalBillHistory .modal-dialog {
    width: 50%;
}

#spnDiscountInputRemark, #lblPercentageDiscount {
    display: none;
}

div.dataTables_wrapper div.dataTables_length {
    text-align: left;
}

div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_paginate {
    text-align: right;
}

div.dataTables_wrapper div.dataTables_info {
    text-align: center;
}

.pageReservationOverview #divChangeReservationButtonRow {
    display: none;
}

.container-fluid {
    padding-left: 0px;
    padding-right: 0px;
}

#divServiceTicketList input + label {
    padding-left: 27px !important;
}

#divRenterHolidayAddressAndRoom {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#divReservationSelectionContent .dropdown-toggle {
    width: 100%;
}

#divReservationSelectionContent .dropdown-menu {
    width: 450px;
    left: -38px;
}

    #divReservationSelectionContent .dropdown-menu > li {
        padding-left: 8px;
        padding-right: 8px;
    }

        #divReservationSelectionContent .dropdown-menu > li:hover {
            cursor: pointer;
            background-color: #e5e5e5;
        }

#divReservationSelectionContent .dropdown-toggle {
    padding-right: 50px;
    text-align: left;
    padding-top: 8px;
}

    #divReservationSelectionContent .dropdown-toggle svg {
        margin-left: 20px;
        margin-right: -40px;
        float: right !important;
    }

#tblIssuedItemsOverview tbody tr {
    background-color: rgba(22,160,133,0.15) !important;
}

.btn.active {
    background-color: #449d44;
    color: white;
}

    .btn.active.focus {
        outline: none;
    }

#FilterModalForBillItemList .modal-dialog {
    width: 400px;
}

.btn-group > .btn-secondary {
    font-size: small;
    text-transform: capitalize !important;
}


.btn-group > .btn {
    min-width: 100px;
}


#ModalExportReservationOVerview .modal-dialog {
    width: 700px;
}

#divItemOverviewFilterIcon{
    width: 25%;
}

#divItemOverviewFilterInput {
    width: 70%;
}

/* Start Styles by Altus Infotech (Merged on 12-03-2022)*/

#ReservationDetailsModal .modal-dialog {
    width: 70% ;
}

#divButtonCancelReservationRow, #divChangeReservationButtonRow {
    position: relative;
    bottom: 0;
    max-width: initial;
}

#SearchHolidayAddressModal .modal-dialog {
    width: 50%;
}

#SelectBillTempItemModal .modal-dialog, #SelectNewItemForExchange .modal-dialog, #SelectBillTempItemtypeModal .modal-dialog {
    width: 50%;
}

#SelectBillTempItemModal div.dataTables_wrapper div.dataTables_info {
    text-align: left;
}

#divStartdateFilter #txtStartDate {
    width: 100% !important;
}

/* RENT - availability*/
tr td.availNeg {
    background-color: rgba(255,0,0,1);
    color: #FFFFFF;
}

tr td.availNull {
    background-color: rgba(255,0,0,0.5);
    color: #FFFFFF;
}

tr td.availP10 {
    color: orange;
}

tr td.availP9 {
    color: rgba(51,51,51, 0.6);
}

#divPanelRentBillList {
    padding-left: 5px !important;
}
/*.datatable-footer-wraper ul > li.active > a {
    background-color: #d5d5d5;
    color: var(--main-color);
    border-color: #e5e5e5;
}*/
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: #d5d5d5;
    color: var(--main-color);
    border-color: #e5e5e5;
}

.datatable-footer-wraper ul > li > a {
    color: var(--main-color);
}

#ShowItemRentalsModal .modal-dialog {
    width: 40%
}

.flex-d-row {
    flex-direction: row;
}

.flex-d-col {
    flex-direction: column;
}
.flex-d-row-reverse {
    flex-direction: row-reverse;
}

.flex-d-col-reverse {
    flex-direction: column-reverse;
}

.flex-1 {
    flex: 1;
}
.flex-2{
    flex:2;
}
.flex-3{
    flex:3;
}
.flex-4{
    flex:4;
}
.flex-5{
    flex:5;
}

.flex-auto {
    flex: auto;
}

.flex-inherit {
    flex: inherit
}

.flex-initial {
    flex: initial
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}
/*
#divcancelExchangeItem {
    bottom: 10px;
    position: absolute;
}*/
/*2022-03-07 changes for adding flex in header*/
#divMobileMenu {
    text-align: right !important;
}

/* End styles by Altus */
#divReservedItemFiltersForDesktop {
    display: flex !important;
}

#divReservedItemFiltersForMobile {
    display: none !important;
}
#SelectItemForServiceTicket .modal-dialog{width:95%;}
#divDesktopFilterForBookingTickets, #divDesktopFilterForItemOverview, #divDesktopFilterForSourcePartner {
    display: flex !important;
}

#divMobileFilterForBookingTickets, #divMobileFilterForItemOverview, #divMobileFilterForSourcePartner {
    display: none !important;
}

/*#divDashExchangeMenuCard {display: none;}*/

#divServiceIssueBarcode {display: none;}
#divFAXFieldMoreReservationModal {display: none;}
.flex-nowrap{flex-wrap:nowrap;}
.PaymentMethodToPay {display: none; }
.pmb11 .PaymentMethodToPay {display: block;}
.priceListInfoIcon {display: none;}

/* scan modus: return */
#divReturnNoCheckIconHtmlContent {background-color: var(--main-colorBack);color: var(--return-color);width: 40px;height: 40px;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size:inherit;}
#divReturnNoCheckIconHtmlContent span.fa-layers{font-size:25px;}
/*CRweb4Extra */
.CRWeb4Extra .body-content {padding: 0;width: inherit;}
.CRWeb4Extra .row.display-flex {align-items: center;column-gap: 10px;}
.CRWeb4Extra .row-removed {background-color: inherit;opacity: 0.5;}
.CRWeb4Extra .page-name {min-width: inherit;}
.CRWeb4Extra label#divPageHeaderTitle span {color: var(--attention-color);}
/*CRWX cost planning*/
.CRWeb4Extra #divItemtypeListForRentalCostPlanning label {font-weight: normal;}
.CRWeb4Extra #divItemtypeListForRentalCostPlanning div.row:nth-of-type(odd){background-color: rgba(51, 122, 183, 0.1);}
.CRWeb4Extra #divItemtypeListForRentalCostPlanning .footerRow {background-color:inherit !important;}
.CRWeb4Extra #divItemtypeListForRentalCostPlanning #lblTotalPrice{font-weight: bold;}

