/*
CYCLERENT Web 4
base styles
version 2.07
date: 2020-07-28
*/
/***** Responsive for minimum 640 and maximum 1023 (For Small Mobile View)*****/
@media (min-width:640px) and (max-width:1023px) {

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

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

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

    #divNewReservationDetails.col-xs-12, #divReserveeDetails {
        padding-left: 0px;
        padding-right: 0px;
    }

    #divInput {
        font-size: 25px;
    }

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

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

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

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

    .sublogindiv {
        width: 465px;
        /*height: 450px;*/
    }

    #divCycleRentCopyright {
        text-align: right;
    }

    .label-text {
        display: none;
    }

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

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

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

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

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

    .modal-dialog {
        margin-top: 60px;
    }

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

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

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

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

    #imgMRMenuDropdownOptions {
        overflow: auto;
    }

    #BillExtendModal .modal-dialog {
        width: 600px;
    }

    #AvailableItemsModal .modal-dialog {
        width: 600px;
    }

    #divItemModeContent .btn {
        padding: 8px;
    }

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

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

    #divOccupationChartPanel {
        display: none;
    }

    #IssueOverviewMenuModal .modal-dialog {
        width: 750px;
    }

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

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

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

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

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

    #ReservationDetailsModal .modal-dialog {
        width: 99%;
    }
	/* login */
	#divLoginBody #divEmail, #divLoginBody #divPassword{margin-left: 40px;} /* ,#divLoginBody #divEmail label, #divLoginBody #divPassword label*/
    /*************** Registration Help **********************/
    #divRegistrationHelp {
        clear: both;
        position: relative;
        top: auto;
        right: auto;
        background-color: #fff;
        /*border: 1px solid black;*/
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    /**********************************************/

    /** added  for basic format -> issuePage example**/
    /*.pageIssueBill #mainContent {
		padding: 0px 0px;
	}*/

    .pageIssueBill #divRenterDetails {
        padding: 0 !important;
    }

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

    .remove-padding-right {
        padding-right: 0px !important;
    }

    .remove-padding-left {
        padding-left: 0px !important;
    }

    .pageIssueBill .btn {
        padding: 0 5px;
    }

    #divFormRightPanelForDashboard {
        /*width: 96%;*/
        width: 100%;
    }

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

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



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

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

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

    .overflow-auto {
        overflow: auto;
    }

    select {
        -webkit-appearance: none;
    }

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

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

    #divCancelBillContent {
        width: 50%;
        float: left;
    }

    #divSideIssueActionButtonBar {
        width: 50%;
        float: right;
    }

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

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

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

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

    #divRentInfoDashboard {
        width: 100%;
    }

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


    .CRshowMedium {
        display: block !important;
    }

    .CRshowSmall {
        display: none;
    }

    .CRshowWide {
        display: none;
    }
    /****** 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: 75%;
    }

    #divMobileMenu, #divMobileSearchFilterOptions {
        display: block;
    }

    #divDesktopMenu, #divDesktopSearchFilterOptions {
        display: none;
    }

    .ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    select + .floating-label {
        padding-left: 5px !important;
    }

    #ModalAddEditHolidayAddress .modal-dialog {
        width: 75%;
    }
    /***** 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: 500px;
    }
    /**** 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;
    }

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

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

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

    .dataTables_length > select {
        height: 40px !important;
        -webkit-appearance: menulist-button !important;
    }

    #ModalRegisterOpenAmountForBill .modal-dialog {
        width: 35%;
    }
    /*#tblTemporaryBillsOverview_info {
        text-align: center;
    }*/
    #divIssueBill #divReturnDateTime {
        text-align: center !important;
        margin-top: -150px;
        float: right;
    }

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

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

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

    #SelectBillTempItemModal .modal-dialog, #SelectBillTempItemtypeModal .modal-dialog {
        width: 99%;
    }
    #SelectNewItemForExchange .modal-dialog{
        width:70%;
    }
    #tblHolidayAddressList_filter.dataTables_filter {
        margin-top: 5px;
        margin-right: 15px;
    }

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

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

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

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

    #divDashboardMenuCards {
        flex-direction: column;
    }

    #divDashboardBooking {
        flex-direction: row;
    }

    #divExchangeAndService {
        flex-direction: row;
        justify-content: flex-end;
    }

    #divDashChangeBookingMenuCard {
        max-width: 25%;
    }

    #divDashReservationMenuCard {
        max-width: 60%;
    }

    #divDashExchangeMenuCard, .pageHome #divDashServiceTicketMenuCard {
        min-width: auto;
    }

    #divDashboardMenuCardRow {
        max-width: 100%;
    }

    .tooltip-info.tooltip .tooltip-bottom {
        top: 135%;
        left: -285%;
        margin-left: -100px;
    }

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

    #divReturnMenuActionRow .tooltip-info.tooltip .tooltip-bottom {
        top: 135%;
        left: auto;
        margin-left: 0px;
        right: -120%;
    }

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

    .MenuCardSmall {
        max-width: 20%;
    }

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

    #divDashChangeBooking {
        align-content: flex-end;
        flex: 2;
    }

    #divDashReservation {
        flex: 6;
        /* max-width: 60%;*/
        justify-content: flex-end;
    }

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

    /*#divreservationDateFilter {
        flex-direction: inherit;
    }*/

    #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:60% !important;
        padding: 4px 12px !important;
        margin-top: -5px;
    }
    /*2022-05-03 */
    #divNewItemNumberTxt, #divOldItemNumberTxt {
        max-width: 55%;
    }
    #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: 50%;
    }
    .fd-sm-col {
        flex-direction: column !important;
    }

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