/*
CYCLERENT Web 4
base styles
version 2.07
date: 2020-07-28
*/
/***** Responsive for 319px (For Small Mobile View)*****/
@media (min-width:0px) and (max-width:319px) {
    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;
        padding-right: 5px;
    }


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

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

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

    #divInput {
        font-size: 19px;
    }

    #divUserInfoPanel {
        max-width: 285px;
    }

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

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

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

    .btn-xs {
        padding: 1px 5px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        border-radius: 3px !important;
    }

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

    .tenant-logo {
        height: 30px;
    }

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

    #divCycleRentCopyright {
        text-align: center;
    }

    .label-text {
        display: none;
    }

    .panel-body {
        padding: 5px;
    }

    #tblItemOnBill, #tblBillAmounts, #tblBillItemAmounts, #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: 150px !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%;
    }

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

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

    #divSelectedItems {
        overflow: auto;
    }

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

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

    #imgMRMenuDropdownOptions {
        overflow: auto;
    }

    .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: 26px !important;
        line-height: 1 !important;
    }

    #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: 70px !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;
    }

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

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

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

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

    #divInternalRemarkMessage {
        display: none;
    }

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

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

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

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

    #divDeshRentMenuCard, #divDeshReturnMenuCard, #divDeshReservationMenuCard {
        width: auto;
        max-width: 100%
    }

    #divDeshExchangeMenuCard, #divDeshServiceTicketMenuCard {
        width: 45%;
        /*max-width:46%;*/
    }

    #divDeshExchangeMenuCard, #divDeshServiceTicketMenuCard {
        min-width: auto;
    }

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

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

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

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

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

    #divFilterContent {
        width: 100%
    }

    #divMainExtraOptionsOverview {
        flex-direction: column;
    }

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

    #divReservationOVerviewForSourcePartnerGridFilter {
        flex-direction: column;
    }

    #divReservationOVerviewForSourcePartnerGridFilter #divReservationRightFilters {
        max-width: 100%
    }
    #divReservationLeftFilter {
        max-width: 100%;
    }
 /*   #divReservationLeftFilter .ResOverviewFilter {
        min-width: 100%;
        max-width: 100%;
    }*/
    #divOpenTasksFilter {
        grid-row-gap: 10px;
    }

    /* End styles by Altus */
    /*2022-05-03*/
    #divNewItemNumberTxt, #divOldItemNumberTxt {
        max-width: 70%;
    }

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