/*
CYCLERENT Web 4
base styles
version 2.07
date: 2020-07-28
*/
/***** Responsive for minimum 480 and maximum 639 (For Small Mobile View)*****/
@media (min-width:480px) and (max-width:639px) {
	body {
		overflow: auto !important;
	}
	.scrStd {display:none;}
	.scrSmall {display:block;}
	#divIssueBillMain .col-xs-12 {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	#divReservationMain .col-xs-12 {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	#divRenterHolidayAddressAndRoom.col-xs-12, #divCardButtons.col-xs-12, #divIssueDate.col-xs-12, #divReturnDateOnly.col-xs-12, #divNewReservationDetails.col-xs-12, #divReserveeDetails {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	#divPaymentOptionTable, #divPaymentOptionTable2 {
		padding-left: 5px !important;
	}

	#trBillAdditionalPayment1 > div, #trBillAdditionalPayment2 > div, #tblBillPaymentMethod > div, #tblBillPaymentMethod2 > div {
		width: 50%;
	}

	.lbl {
		text-align: left;
	}

	.ui-dialog {
		width: 93% !important;
	}

	#divInput {
		font-size: 22px;
	}

	#btnPlusQuantity, #btnMinusQuantity, .btn-plus, .btn-minus {
		padding-left: 10px !important;
		padding-right: 10px !important;
		height: 40px !important;
	}

	#BillDetailsModal .modal-dialog {
		width: 98% !important;
	}

	.btn-holder {
		position: relative;
		bottom: 0px;
		right: 0px;
		margin-top: 10px;
	}

	#ModalShowExchange .modal-dialog {
		width: 98%;
	}

		#ModalShowExchange .modal-dialog .modal-footer .btn {
			width: 100%;
		}

	#ExchangeErrorMsg .modal-dialog {
		width: 80%;
	}

	#ModalItemAvailableOptions .modal-dialog {
		width: 98%;
	}

	.sublogindiv {
		width: 97%;
		/*height: 470px;*/
	}
	#divLoginBody #divEmail, #divLoginBody #divPassword{margin-left: 15px;} /*#divLoginBody #divEmail label, #divLoginBody #divPassword label */
	#divLoginFooter {
		text-align: center !important;
	}

	#divCycleRentCopyright {
		text-align: center;
	}

	.label-text {
		display: none;
	}

	.panel-body {
		padding: 5px;
	}
	/*** CSS for Menu ***/
	.sidenav {
		padding-top: 15px;
	}

		.sidenav a {
			font-size: 18px;
		}
	/*******************/
	#AddServiceTicketModal .modal-dialog {
		width: 98%;
	}

	#divPanelRentBillList {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	#divPanelRentServiceTicket {
		padding-right: 0px !important;
		padding-left: 0px !important;
	}

	#ItemBillInfoModal .modal-dialog {
		width: 98%;
	}

	#divIssueBill #divReturnDateTime {
		text-align: center !important;
		margin-top: -150px;
		float: right;
	}

	#divReservation #divReturnDateTime {
		text-align: center !important;
		margin-top: -133px;
		float: right;
	}

	.btn-standard {
		min-width: inherit;
	}

	#imgMRMenuDropdownOptions .panel-group .panel {
		padding: 2px;
	}

	#imgMRMenuDropdownOptions {
		overflow: auto;
	}

	.CRbuttonIssue, .CRbutton, .CRbuttonCancel {
		width: 100% !important;
	}

	.modal .modal-dialog .CRbutton, .modal .modal-dialog .CRbuttonCancel {
		width: 40% !important;
	}

	#BillExtendModal .modal-dialog {
		width: auto;
	}

	#AvailableItemsModal .modal-dialog {
		width: 99%;
	}

	#divItemModeContent .btn {
		padding: 8px;
	}

	#lblExtraWorkstation {
		font-size: 30px !important;
		line-height: 1 !important;
	}

	#SelectBillTempProductModal .modal-dialog {
		width: 90%;
	}

	.btn-menu {
		cursor: pointer;
		border-radius: 3px;
		transition: all 0.2s ease-in-out 0s;
		border: 1px solid lightgray;
		padding: 6px 0px;
		font-size: 12px;
	}

		.btn-menu:hover {
			cursor: pointer;
			transition: all 0.2s ease-in-out 0s;
			border: 1px solid black;
		}

	#IssueOverviewMenuModal .modal-dialog {
		width: 93%;
	}

	#divIssueOverviewPageMenu .btn {
		height: 55px !important;
		text-align: center;
		vertical-align: middle;
		line-height: 4;
		font-weight: bold;
	}

	#ReservationOverviewModalPopup .modal-dialog {
		width: 99%;
	}

	#ReservationDetailsModal .modal-dialog {
		width: 99%;
	}

	#ReservationCommentModalPopup {
		z-index: 9999 !important;
	}

		#ReservationCommentModalPopup .modal-dialog {
			width: 99%;
		}

	#ReservationOverviewModalPopup .modal-dialog .modal-footer .btn {
		width: 100%;
	}

	.input-btn-group .txtAutoComplete {
		width: 84% !important;
	}

	.overflow-auto {
		overflow: auto;
	}

	.btn-txt-search {
		width: 16% !important;
	}

	.txtQuantity-grid { /*width: 100% !important;*/
		width: 60px !important;
	}

	select {
		-webkit-appearance: none;
	}

	#divIssueBill #divRenterDetails, #divIssueBill #divBillItemDetails, #divIssueBill #divCancelBillContent, #divReservation #divReserveeDetails, #divSelectItemTypeDetails, #divCancelReservationRow, #divPanelRentBillList {
		width: 100%;
		float: none;
	}

	#divIssueBill #divBillPeriodDetails, #divIssueBill #divBillAmountsDetails, #divIssueBill #divSideIssueActionButtonBar, #divReservationPeriodDetails, #divReservationAmountDetails, #divSideReservationActionButtonBar, #divPanelRentServiceTicket {
		width: 100%;
		float: none;
	}

	#tblOpenTicketDetails tr td .btn {
		width: 100%;
	}

	#ItemHistoryModal .modal-dialog {
		width: 99%;
	}

	#divExchangeInfo .modal-footer button, #ItemHistoryModal .modal-footer button {
		width: 40% !important;
	}

	#SpecialServiceIssuesModal .modal-dialog {
		width: 99%;
	}

	.dockMenu-Label {
		vertical-align: super;
	}

	#ShowServiceTicketOverviewModal .modal-dialog {
		width: 99%;
	}

	#divIssueFormPanel, #divItemSelectionPanel, #divItemTypeSelectionPanel, #divReservationFormPanel {
		width: 100%;
	}

	#divRentInfoDashboard {
		width: 100%;
	}

	#SearchRenterModal .modal-dialog {
		width: 99%;
	}

	.CRshowSmall {
		display: block !important;
	}

	.CRshowWide {
		display: none;
	}

	.CRshowMedium {
		display: none;
	}
	/********** Registration Help *************/
	#divRegistrationHelp {
		clear: both;
		position: relative;
		top: auto;
		right: auto;
		background-color: #fff;
		/*border: 1px solid black;*/
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	/*****************************************/
	/****** Paggination CSS Start ********/
	.pagination > li > a, .pagination > li > span {
		padding: 6px 12px;
		font-size: 14px;
		line-height: 1.3333333;
	}
	/****** Paggination CSS End ********/
	#ModalAddNewLocation .modal-dialog {
		width: 99%;
	}

	#divMobileMenu, #divMobileSearchFilterOptions {
		display: block;
	}

	#divDesktopMenu, #divDesktopSearchFilterOptions {
		display: none;
	}

	#ModalAddEditHolidayAddress .modal-dialog {
		width: 98%;
	}
	/***** Manage Exchange item form div's start *********/
	#divOldItemNumber {
		width: 100%;
		float: left;
		padding: 0px 4px;
	}

	#divNewItemNumberContect {
		width: 100%;
		float: right;
		padding: 0px 4px;
	}

	#divOldItemDetails {
		width: 100%;
		float: left;
		padding: 0px 4px;
	}

	#divExchangeAmountPanel {
		width: 100%;
		float: right;
		padding: 0px 4px;
	}

	#divcancelExchangeItem {
		width: 100%;
		float: left;
		padding: 0px 4px;
	}

	#divPrintExchangeBill, #divServiceTicketForExchangedItem {
		width: 100%;
		float: right;
		padding: 0px 4px;
	}
	/***** Manage Exchange item form div's end *********/
	#AddEditPeriodDetailsModal .modal-dialog {
		width: 99%;
	}

	/**** Set #tblReservationOVerviewForBill columns width for IssueBill page  *****/

	#tblReservationOVerviewForBill #th-width-BtnCreateBill {
		width: 80px;
	}

	#tblReservationOVerviewForBill #th-width-ReservationID, .CRFReservationID {
		width: 150px;
		padding-right: 15px !important;
	}

	#tblReservationOVerviewForBill #th-width-ReservationtypeCode {
		width: 200px;
	}

	#tblReservationOVerviewForBill #th-width-ReservationArrivalDateTime {
		width: 250px;
	}

	#tblReservationOVerviewForBill #th-width-LocationCode {
		width: 250px;
	}

	#tblReservationOVerviewForBill #th-width-IsGroup {
		width: 70px;
	}

	#tblReservationOVerviewForBill #th-width-BillName {
		width: 350px;
	}

	#tblReservationOVerviewForBill #th-width-HolidayaddressName {
		width: 450px;
	}

	#tblReservationOVerviewForBill #th-width-ReservationReturnDate {
		width: 200px;
	}

	#tblReservationOVerviewForBill #th-width-NumberOfItems {
		width: 150px;
	}

	#tblReservationOVerviewForBill #th-width-PaymentStatusText {
		width: 200px;
	}

	#tblReservationOVerviewForBill #th-width-IsDelivery {
		width: 120px;
	}

	#tblReservationOVerviewForBill #th-width-IsLuggage {
		width: 70px;
	}

	#tblReservationOVerviewForBill #th-width-IsPackage {
		width: 70px;
	}

	#tblReservationOVerviewForBill #th-width-IsReservationRemark {
		width: 70px;
	}

	#tblReservationOVerviewForBill #th-width-SourcePartnerCode {
		width: 150px;
	}

	#tblReservationOVerviewForBill #th-width-Details {
		width: 70px;
	}

	.CRfont-big {
		font-size: 140% !important;
	}

	#divReservationProcessButtons {
		min-height: auto;
	}

	#divButtonCancelReservationRow {
		position: relative;
		bottom: 0;
		max-width: 100%;
	}

	#divChangeReservationButtonRow {
		position: relative;
		bottom: 0px;
		max-width: 100%;
	}

	#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, #ItemDetailModal .modal-dialog {
		width: 99%;
	}

	#ModalEditReservationDetails .modal-dialog {
		width: 99%;
	}

	#ModalEditReservationDetails .custom-dropdownList {
		position: absolute;
		top: auto;
		z-index: 9999;
		left: 0%;
		right: 0;
		margin: 0;
		padding: 0;
		width: 100% !important;
	}

	#ModalEditReservationDetails #divReturnDateTime {
		margin-top: auto;
	}

	#lblNoReservationForToday {
		margin-top: auto;
	}

	#divReservedItemsTable {
		overflow: auto;
	}

	#itemtypeReserved {
		width: 350px;
	}
    .dataTables_length > select {
        height: 40px !important;
        -webkit-appearance: menulist-button !important;
    }
	#ModalRegisterOpenAmountForBill .modal-dialog {
		width: 93%;
	}
    #tblTemporaryBillsOverview_info {
        text-align: center;
    }

    #divTemporaryBillOverviewHeader {
        display: none;
    }

    #divBilllInfoHeader, #divItemOverviewHeader {
        display: none;
    }
    #divTemporaryBillSelectedItemsContent.col-xs-12 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    #divBillDetails label {
        margin-bottom: 0px;
    }
    #divLocationDepot {
        display: none;
    }

    .headerInputFiled {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
	#ModalExportReservationOVerview .modal-dialog {
		width: auto;
	}

	.DatatableFilterIcon {
		width: 20%;
	}

	.DatatableFilterInput {
		width: 75%;
	}

	/* Start Styles by Altus Infotech (Merged on 12-03-2022)*/

	#SelectBillTempItemModal .modal-dialog, #SelectBillTempItemtypeModal .modal-dialog {
		width: 99%;
	}
	#SelectNewItemForExchange .modal-dialog{
		width: 94%;
	}
	#divPanelHeaderForIssueBill, #divRenterDetailsFormControls, #divBillPeriodFormControls, #divBillAmounts, #divItemSelectionPanel, #divItemTypeSelectionPanel, #divItemsOnBill, #divCancellBillControls, #divPanelRentBillList {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.pageReservation #divReservationMain #divInsuranceRow #divInsuranceAmount {
		padding-right: 15px !important;
	}

	#txtFilterServiceTicketGrid {
		width: 160px !important;
	}

	#ShowItemRentalsModal .modal-dialog {
		width: auto
	}
	/*this classes for flex */
	.flex-xs-100 {
		flex: 100%
	}

	.flex-xs-50 {
		flex: 49%
	}

	.flex-xs-25 {
		flex: 25%
	}

	.flex-d-xs {
		flex-direction: column;
	}

	.sm-d-col {
		flex-direction: column;
	}
	/* end flex classes*/
	/*01-03-2022 start design home screen*/
	.menu-card {
		width: 100%;
	}

	#divDashboardMenuCardRow {
		max-width: 100%;
	}

	#divcancelExchangeItem {
		bottom: 0px;
		position: relative;
	}

	#divRentAndReturn {
		flex-direction: column;
	}
	#divItemAndServiceTicket {
		flex-direction: column;
	}

	#divDashRentMenuCard, #divDashReturnMenuCard, #divDashReservationMenuCard {
		width: auto;
		max-width: 100%
	}
	#divDashItemMenuCard, .pageHomeMaintenance #divDashServiceTicketMenuCard {
		width: auto;
		max-width: 100%
	}

	.tooltip-info.tooltip .tooltip-bottom {
		top: 135%;
		left: auto;
		margin-left: 0px;
		right: -20%;
		margin-right: 0px;
		width: 975%;
	}

	.tooltip-info.tooltip .tooltiptext.tooltip-bottom::after {
		/*right: 10px !important;*/
		left: auto !important;
		right: 5%;
	}

	#divDashboardMenuCards {
		flex-direction: column;
	}

	#divExchangeAndService, #divDashChangeBooking, #divDashboardBooking {
		flex-direction: row;
	}

	#divDashChangeBooking {
		flex: 2;
	}

	#divDashReservation {
		max-width: 70%;
	}

	#divDashChangeBooking.MenuCardSmall {
		max-width: 80%;
	}

	#divDashChangeBooking {
		align-content: space-around;
	}

	#imgMenu {
		max-width: fit-content;
	}

	#divDesktopFilterDataForBookingTicket #divresEventFilter, #divDesktopFilterDataForBookingTicket #divArrivalPeriodFilter,
	#divDesktopFilterDataForBookingTicket #divCustomPeriodSettingsForBookingTickets, #divDesktopFilterDataForBookingTicket #divArrivalTimePeriodFilter,
	#divDesktopFilterDataForBookingTicket #divStatusFilter {
		max-width: 47%;
	}

	#divMainExtraOptionsOverview .cards {
		max-width: 47%;
	}
/*
	#divReservationLeftFilter .ResOverviewFilter {
		min-width: 47%;
		max-width: 47%;
	}*/

	#divReservationOVerviewForSourcePartnerGridFilter #divReservationRightFilters {
		max-width: 100%
	}

	#divReservationLeftFilter {
		max-width: 100%;
	}

	#divOpenTasksFilter {
		grid-row-gap: 10px;
	}

	/* End styles by Altus */
	/* by Altus Infotech 31-03-2022*/
	#divHeaderExportSearchFilterForReservationOverview {
		max-width: 100%;
	}

	#divReservedItemOVerviewGridFilter #divSelectArrivalTimeBlock, #divReservedItemOVerviewGridFilter #divArrivalTimeFilterBlock,
	#divReservedItemOVerviewGridFilter #divSelectLocationBlock, #divReservedItemOVerviewGridFilter #divItemTypeListBlock,
	#divReservedItemOVerviewGridFilter #divSelectReservationTypeBlock, #divReservedItemOVerviewGridFilter #divPhaseFilterBlock {
		min-width: 47%;
		margin-bottom: 5px;
	}
	#divForceSignOutButton #btnForcedSignOut.btn {
		font-size:70% !important;
		padding: 4px 8px !important;
		margin-top: -5px;
	}
	/*2022-05-03 */
	#divNewItemNumberTxt, #divOldItemNumberTxt {
		max-width: 55%;
	}
	#divNewItemControlFild, #divOldItemControlFild {
		max-width: 100%;
	}
	#divNewItemTypeFild, #divOldItemTypeBillName {
		max-width: 100%;
	}
	#divReservedItemFiltersForDesktop {
		display: none !important;
	}

	#divReservedItemFiltersForMobile {
		display: inline-block !important;
	}
	#divDesktopFilterForBookingTickets, #divDesktopFilterForItemOverview, #divDesktopFilterForSourcePartner, #divDesktopFilterForTask {
		display: none !important;
	}

	#divMobileFilterForBookingTickets, #divMobileFilterForItemOverview, #divMobileFilterForSourcePartner, #divMobileFilterForTask {
		display: inline-block !important;
	}
	#divPeriodDatesControls {
		width: 80%;
	}
	.fd-xs-col {
		flex-direction: column !important;
	}

	.fd-xs-row {
		flex-direction: row !important;
	}
}