/*
CYCLERENT Web 4
base styles
version 2.30C3
date: 2025-07-23
*/

/***** Responsive for minimum 320 and maximum 479 (For Small Mobile View)*****/
@media (min-width:320px) and (max-width:479px) {
	body{
		--gap:10px;
	}
    body {overflow: auto !important;}	
	.scrStd {display:none;}
	.scrSmall {display:block;}
	#divPageName {font-size:80%;}
    #divIssueBillMain .col-xs-12 {padding-left: 5px !important;padding-right: 5px !important;}
    #divReservationMain .col-xs-12 {padding-left: 5px !important;padding-right: 5px !important;}
    #divReservationMain .col-xs-12.remove-padding-left {padding-right: 0px !important;}
    #divReservationMain .col-xs-12.remove-padding-left {padding-left: 0px !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%;}
    #divInput {font-size: 25px;}
    .lbl {
        text-align: left;
    }

    .col-xs-6, .col-xs-12 {
        padding: 0px !important;
    }

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

    #divInput {
        font-size: 19px;
    }

    #divUserInfoPanel {
        max-width: 285px;
    }

    #btnExchange, #btnReturnItem {
        font-size: 12px;
    }

    #header .btn {
        line-height: 26px;
    }

    .btn {
        padding: 4px 15px /*!important;*/
        font-size: 12px !important;
    }
	.CRbuttonFinal {padding:25px 15px;}

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

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

    #divServiceTicket .btn {
        width: 100%;
    }

    .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: 480px;*/
    }

    #divFooterTextRegister {
        text-align: center !important;
    }

    #divLoginFooter {
        text-align: center !important;
    }

    #divCycleRentCopyright {
        text-align: center;
    }

    .label-text {
        display: none;
    }

    .panel-body {
        padding: 5px;
    }


    #tblItemOnBill, #tblBillAmounts, #tblBillItemAmounts, #divBillAmountsTable, #tblProductOnBill {
        overflow: auto !important;
        display: block;
    }

        #tblItemOnBill .th-item-count {
            width: 50px !important;
        }

        #tblItemOnBill .th-item-number {
            width: 80px !important;
        }

        #tblItemOnBill .th-item-type {
            width: 120px !important;
        }

        #tblItemOnBill .th-item-price, #tblBillAmounts .td-bill-itemAmount, #tblBillItemAmounts .td-bill-itemAmount {
            width: 50px !important;
        }

        #tblItemOnBill .th-item-insurance, #tblBillAmounts .td-bill-insurance, #tblBillItemAmounts .td-bill-insurance {
            width: 50px !important;
        }

        #tblItemOnBill .th-item-action, #tblBillAmounts .td-bill-CancelButton, #tblBillItemAmounts .td-bill-CancelButton {
            width: 50px !important;
        }

        #tblBillAmounts .td-bill-totalLabel, #tblBillItemAmounts .td-bill-totalLabel {
            width: 250px !important; /* width of #tblItemOnBill table first 3 columns*/
        }

    #tblBillPaymentMethod tr td, #tblBillPaymentMethod2 tr td {
        display: flex;
        width: 100%;
        border: none;
    }
    /*** 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%;
    }

    .clockpicker .input-group-addon {
        background-color: transparent;
        width: auto;
        border: none;
        padding: 0px;
        line-height: 0px;
        display: inline-block;
        margin-top: -5px;
        font-size: 12px;
    }

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

        #modalBillAvailableOptions .modal-dialog .btn {
            width: 100%;
            margin-bottom: 5px;
        }

    #divIssueBill #divReturnDateTime {text-align: center !important;margin-top: -150px;float: right;}
	#divIssueBill #divReturnDateTimeContent.CRfont-biggest {font-size: 150% !important;}
	#divIssueBill #btnSelectItem {padding-top: 15px !important;padding-bottom: 15px !important;}
	#divIssueBill input#txtItem {height:60px;}
    #divReservation #divReturnDateTime {
        text-align: center !important;
        margin-top: -133px;
        float: right;
    }
	#divIssueBill  #divDuration {width:100%;}
    #divSelectedItems {overflow: auto;}
    .btn-standard {min-width: inherit;}
	#SearchHolidayAddressModal .modal-dialog {width: 50%;}
	
    #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;}
    .modal-stack:before {height: auto;}
    #divFormRightPanelForDashboard {display: none;}
    #BillExtendModal .modal-dialog {width: auto;}

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

    #divItemModeContent .btn {
        padding: 8px;
    }

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

    .overflow-auto {
        overflow: auto;
    }

    #divTempReservedItemList, #divReservedItemTypes {
        overflow: auto;
    }

    #divRentedItemList {
        width: 650px;
    }

    #divReservedItemType {
        width: 500px;
    }

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

    .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;
    }

    .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;}
    .CRshowMedium {display: none;}
    .CRshowWide {display: none;}
	/* issue bill*/
	#divReturnDateTime.CRfont-biggest{font-size:125% !important;}
	#trBillPaymentMethod2 >div {width:inherit;}
	
	/* login*/
	#divPinNumPad button {min-width: 87px;}
	.loginPage  #container {margin-top:0;}
	.sublogindiv .tenant-logo{height:40px;}
	#divLoginBody #divEmail, #divLoginBody #divPassword,#divLoginBody #divEmail label, #divLoginBody #divPassword label{margin-left: 15px;}
    /********** 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: 5px 8px;
        font-size: 12px;
        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: 95%;
    }

    #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: 100%;
    }

    .dataTables_length select {
        height: 34px !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;
    }
    #divInternalRemarkMessage{
        display: none;
    }

    .DatatableFilterIcon {
        width: 20%;
    }

    .DatatableFilterInput {
        width: 75%;
    }

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

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

    #tblSelectBillItemList_filter.dataTables_filter, #tblHolidayAddressList_filter.dataTables_filter, #tblAllReservationOverviewForExtra_filter.dataTables_filter {
        margin-top: 5px;
    }

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

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

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

    .xs-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,#divReservationOverviewMenuCard {
        width: auto;
        max-width: 100%
    }
    #divDashItemMenuCard, .pageHomeMaintenance #divDashServiceTicketMenuCard {
        width: auto;
        max-width: 100%;
    }

    #divDashExchangeMenuCard, .pageHome #divDashServiceTicketMenuCard {
        width: 45%;
		min-width: 50%;
        /*max-width:46%;*/
    }

    /*#divDashExchangeMenuCard, .pageHome #divDashServiceTicketMenuCard {
        min-width: auto;
    }
*/
	.tooltip-info.tooltip .tooltip-bottom {top: 135%;left: auto;margin-left: 0px;right: -20%;margin-right: 0px;width: 300px;}
    .tooltip-info.tooltip .tooltiptext.tooltip-bottom::after {left: auto !important;right: 5%;}

    #divReservationMenuActionRow .tooltip-info.tooltip .tooltiptext {
        top: -525%;
    }

    #divReservationMenuActionRow .tooltip-info.tooltip .tooltiptext.tooltip-bottom::after {
        bottom: -5%;
    }

    #divDashboardMenuCards, #divDashboardBooking {
        flex-direction: column;
    }

    #divExchangeAndService, #divDashChangeBooking {flex-direction: row;gap: var(--gap);max-height: inherit;}

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

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

    /*#divFilterContent {
        width: 100%
    }*/

    #divMainExtraOptionsOverview {
        flex-direction: column;
    }

    #divMainExtraOptionsOverview .cards {
        max-width: 100%;
    }

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

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

 /*   #divReservationLeftFilter .ResOverviewFilter {
        min-width: 100%;
        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: 100%;
        margin-bottom: 5px;
    }
    #divForceSignOutButton #btnForcedSignOut.btn {
        padding: 4px 4px !important;
        margin-top: -5px;
    }
    /*2022-05-03 */
    #divNewItemNumberTxt, #divOldItemNumberTxt {
        max-width: 48%;
    }
    #divNewItemControlFild, #divOldItemControlFild {
        max-width: 100%;
    }
    #divNewItemTypeFild, #divOldItemTypeBillName {
        max-width: 100%;
    }
    #divReservedItemFiltersForDesktop {
        display: none !important;
    }

    #divReservedItemFiltersForMobile {
        display: inline-block !important;
    }
    #divItemNumberContent #divItemNumberInput {
        padding-left:10px !important;
    }
    .xs-p0{
        padding:0px !important;
    }
    #txtExchangeItemNumber{
        width : 150px;
    }
    #SelectItemForServiceTicket .modal-dialog{
        width : 90%;
    }
    #divDesktopFilterForBookingTickets, #divDesktopFilterForItemOverview, #divDesktopFilterForSourcePartner, #divDesktopFilterForTask {
        display: none !important;
    }
    #divMobileFilterForBookingTickets, #divMobileFilterForItemOverview, #divMobileFilterForSourcePartner, #divMobileFilterForTask {
        display: inline-block !important;
    }
    #divPeriodDatesControls {
        width: 100%;
    }
    .fd-xs-col {
        flex-direction: column !important;
    }

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