/* image crope section   */
.modal{ left:0; right:0; margin:0 auto;}
.modal-backdrop {
    z-index: 109990 !important;
}
.modal {
    z-index: 110000 !important;
}
#firstImageUploadModel .profileimg-plug{margin:0 0 auto;text-align: center;max-width:100%;}
#firstImageUploadModel .plucgin-clodebtn{overflow:hidden;float:left;width:96%;background-color:#fff;}
#firstImageUploadModel .side-images{overflow-y:scroll;overflow-x:hidden;max-height:32em;}
#firstImageUploadModel .side-images .sideimg-box{padding-top:10px; cursor:pointer;}
#firstImageUploadModel .profileimg-plug .cropit-preview{margin: 0 auto;width:100%;}
#firstImageUploadModel .profileimg-plug .image-editor button{
    transition: all 0.3s ease-out 0s;
}
#firstImageUploadModel .plucgin-clodebtn button{
	background-color: #0084ff;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    padding: 5px 13px;
    transition: all 0.3s ease-out 0s;}
#firstImageUploadModel .profileimg-plug .image-editor .rotat-btn{
	display: block;
    float: left;
    text-align: center;
    width: 100%;
}
#firstImageUploadModel .plucgin-clodebtn button:hover, #firstImageUploadModel .profileimg-plug .image-editor button:hover{background-color:rgba(0, 132, 255, 0.07) !important;}
#firstImageUploadModel .profileimg-plug .image-editor {overflow:hidden;}
#firstImageUploadModel .profileimg-plug .image-editor .cropit-preview {
	background-color: #f8f8f8;
	background-size: cover;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-top: 0px;
	width: 400px;
	height: 400px;
}
#firstImageUploadModel .profileimg-plug .image-editor .cropit-preview-image-container {cursor: move;}
#firstImageUploadModel .file-input-wrapper {display: inline-block;overflow-y: hidden;}
#firstImageUploadModel .file-input-wrapper .file-input-button {
    background: none repeat scroll 0 0 #0084ff;
    border: 1px solid #0084ff;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 400;
    height: 30px;
    line-height: 15px;
    margin-top: 2px;
	margin-bottom:0px;
    padding-top: 7px;
    text-align: center;
    transition: color 500ms ease 0s, background-color 500ms ease 0s;
    width: 140px;
}
#firstImageUploadModel .file-input-wrapper input {display: none;text-align: center;width: 100%;}
#firstImageUploadModel .modal-header{padding: 5px;}
#firstImageUploadModel .modal-body{padding: 5px;overflow:hidden; max-height:700px;}
#firstImageUploadModel .modal-footer{padding: 5px 10px; margin-top:0px;}
#firstImageUploadModel.modal {overflow-x: hidden;overflow-y: scroll;max-height: auto;top: 10px;}
#firstImageUploadModel .image-editor img { max-width:inherit!important;}

#secondImageUploadModel .profileimg-plug{margin:0 0 auto;text-align: center;max-width:100%;}
#secondImageUploadModel .plucgin-clodebtn{overflow:hidden;float:left;width:96%;background-color:#fff;}
#secondImageUploadModel .side-images{overflow-y:scroll;overflow-x:hidden;max-height:32em;}
#secondImageUploadModel .side-images .sideimg-box{padding-top:10px; cursor:pointer;}
#secondImageUploadModel .profileimg-plug .cropit-preview{margin: 0 auto;width:100%;}
#secondImageUploadModel .profileimg-plug .image-editor button{
	background-color: #0084ff;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin: 0 auto 0px;
    padding: 2px 9px;
    transition: all 0.3s ease-out 0s;
}
#secondImageUploadModel .plucgin-clodebtn button{
	background-color: #0084ff;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    padding: 5px 13px;
    transition: all 0.3s ease-out 0s;}
#secondImageUploadModel .profileimg-plug .image-editor .rotat-btn{
	display: block;
    float: left;
    text-align: center;
    width: 100%;
}
#secondImageUploadModel .plucgin-clodebtn button:hover, #secondImageUploadModel .profileimg-plug .image-editor button:hover{background-color:rgba(0, 132, 255, 0.07) !important;}
#secondImageUploadModel .profileimg-plug .image-editor {overflow:hidden;}
#secondImageUploadModel .profileimg-plug .image-editor .cropit-preview {
	background-color: #f8f8f8;
	background-size: cover;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-top: 0px;
	width: 400px;
	height: 400px;
}
#secondImageUploadModel .profileimg-plug .image-editor .cropit-preview-image-container {cursor: move;}
#secondImageUploadModel .file-input-wrapper {display: inline-block;overflow-y: hidden;}
#secondImageUploadModel .file-input-wrapper .file-input-button {
    background: none repeat scroll 0 0 #0084ff;
    border: 1px solid #0084ff;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 400;
    height: 30px;
    line-height: 15px;
    margin-top: 2px;
	margin-bottom:0px;
    padding-top: 7px;
    text-align: center;
    transition: color 500ms ease 0s, background-color 500ms ease 0s;
    width: 140px;
}
#secondImageUploadModel .file-input-wrapper input {display: none;text-align: center;width: 100%;}
#secondImageUploadModel .modal-header{padding: 5px;}
#secondImageUploadModel .modal-body{padding: 5px;overflow:hidden; max-height:700px;}
#secondImageUploadModel .modal-footer{padding: 5px 10px; margin-top:0px;}
#secondImageUploadModel.modal {overflow-x: hidden;overflow-y: scroll;max-height: auto;top: 10px;}
#secondImageUploadModel .image-editor img { max-width:inherit!important;}


#prodImageUploadModel .profileimg-plug{margin:0 0 auto;text-align: center;max-width:100%;}
#prodImageUploadModel .plucgin-clodebtn{overflow:hidden;float:left;width:96%;background-color:#fff;}
#prodImageUploadModel .side-images{overflow-y:scroll;overflow-x:hidden;max-height:32em;}
#prodImageUploadModel .side-images .sideimg-box{padding-top:10px; cursor:pointer;}
#prodImageUploadModel .profileimg-plug .cropit-preview{margin: 0 auto;width:100%;}
#prodImageUploadModel .plucgin-clodebtn button{
    background-color: #0084ff;
    border: medium none;
    border-radius: 3px;
    color: #fff;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    padding: 5px 13px;
    transition: all 0.3s ease-out 0s;}
#prodImageUploadModel .profileimg-plug .image-editor .rotat-btn{
    display: block;
    text-align: center;
    width: 60%;
    margin: 0 auto;
}
#prodImageUploadModel .plucgin-clodebtn button:hover, #prodImageUploadModel .profileimg-plug .image-editor button:hover{background-color:rgba(0, 132, 255, 0.07) !important;}
#prodImageUploadModel .profileimg-plug .image-editor {overflow:hidden;}
#prodImageUploadModel .profileimg-plug .image-editor .cropit-preview {
    background-color: #f8f8f8;
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 0px;
    width: 402px;
    height: 402px;
}
#prodImageUploadModel .profileimg-plug .image-editor .cropit-preview-image-container {cursor: move;}
#prodImageUploadModel .file-input-wrapper {display: inline-block;overflow-y: hidden;}
#prodImageUploadModel .file-input-wrapper .file-input-button {
    background: none repeat scroll 0 0 #0084ff;
    border: 1px solid #0084ff;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 400;
    height: 30px;
    line-height: 15px;
    margin-top: 2px;
    margin-bottom:0px;
    padding-top: 7px;
    text-align: center;
    transition: color 500ms ease 0s, background-color 500ms ease 0s;
    width: 140px;
}
#prodImageUploadModel .file-input-wrapper input {display: none;text-align: center;width: 100%;}
#prodImageUploadModel .modal-header{padding: 5px;}
#prodImageUploadModel .modal-body{padding: 5px;overflow:hidden; max-height:700px;}
#prodImageUploadModel .modal-footer{padding: 5px 10px; margin-top:0px;}
#prodImageUploadModel.modal {overflow-x: hidden; overflow-y: scroll;max-height: auto;top: 10px;}
#prodImageUploadModel .image-editor img { max-width:inherit!important;}

#recoverform {display:none;}
span.required, span.help-inline, .error {color:red;}
.success {color:green;}
label.error {float:left;}
.form-group.error .checkbox, .form-group.error .radio, .form-group.error input, .form-group.error select, .form-group.error textarea {
    color: #b94a48!important;
}
span.btn, span.btn:hover { color:#ffffff;font-size: 14px; }

fieldset {
    border: 2px solid #49CCED;
    margin: 0 0 10px 22px;
    padding: 10px;
    width: 96%;
}
legend {
    border-bottom: 1px solid #49CCED;
}
.bg_dine h3 {
    font-size: 15px;
    color: #333;
    letter-spacing: 0.5px;
    font-weight: 500;
    margin: 10px 0;
}
.row.bg_dine {
    border-bottom: 1px solid #49cced;
}
.dice_h{padding:0;}
.bg_module .dice h4 {

    font-size: 14px;
    color: #333;
    letter-spacing: 0.4px;
    margin: 5px 0;
    padding: 5px 0;
}
.bg_module .dice, .bg_module .dice_single {

    border-bottom: 1px solid #49cced;
    height: 35px;
padding: 5px;

}
.row.bg_module {
    margin-bottom: 20px;
}
.dice_single .check_lable input{
    vertical-align: middle;
}
.dice_single .check_lable span{
    vertical-align: middle;
    display: inline-block;
}
.sidebar .nav .nav > li > a.active {
    font-weight: bold;
}
.browseimageclass {
    left: 0;
    margin: 7px 0 0 15px;
    position: absolute;
    z-index: -1;
}
.panel-heading .add_btn {padding:6px 10px !important;}


.modal-dialog .modal-header > button {
    width: 30px;
    height: 30px;
    font-size: 20px;
    color: #fff;
    opacity: 1;
    position: absolute;
    right: 0;
    top: 0;
    background: #7275f9;
    line-height: 30px;
    z-index: 999;
    padding: 0;
    display: block;
    margin: 0;
    font-weight: 400;
    text-shadow: none;
    border-radius: 30px 30px 30px 0;
}
.modal-dialog .modal-header h4 center {
    text-align: center;
    font-weight: 100;
    letter-spacing: 1px;
    font-size: 16px;
    padding-left: 15px;
    margin: 0 !important;
	    padding: 10px 0;
}
.modal-dialog  .modal-header h4 {
    margin-top: 5px;
    margin-bottom: 0;
}
.modal-dialog .modal-header {
    padding: 0 !important;
    background: #fff;
    border: 0;
}
.modal-dialog .modal-footer {
    padding: 7px 10px;
    margin-top: 0px;
    background: #7275f9;
    border: 0;
    padding-right: 30px;
}
.modal-dialog .modal-footer button {
    border: 0;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: #000;
    background: #ffffff;
    text-shadow: none;
    border-radius: 3px;
    min-width: 79px;
    padding: 5px 0;
    transition: 600ms all;
}
.modal-dialog .profileimg-plug .image-editor button {
    color: #3d3d3e  !important;
    background-color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    transition: all 0.3s ease-out 0s;
    border: 2px solid #7275f9;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50px;
    box-shadow: 1px 1px 10px rgba(51, 51, 51, 0.62);
    margin: 5px;
}
.file-input-wrapper span{line-height:12px !important;}
.rotat-btn br{display:none;}
.cropit-image-zoom-input{
  -webkit-appearance: none;
  height: 10px;
  border-radius: 5px;
  background: #d7dcdf;
  outline: none;
  padding: 0;
  margin: 0;
      width: 60% !important;
    margin: 0 auto;
}
.cropit-image-zoom-input::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  transition: background .15s ease-in-out;
}
.cropit-image-zoom-input::-webkit-slider-thumb:hover {
  background: #1abc9c;
}
.cropit-image-zoom-input:active::-webkit-slider-thumb {
  background: #1abc9c;
}
.cropit-image-zoom-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  transition: background .15s ease-in-out;
}
.cropit-image-zoom-input::-moz-range-thumb:hover {
  background: #1abc9c;
}
.cropit-image-zoom-input:active::-moz-range-thumb {
  background: #1abc9c;
}
.cropit-image-zoom-input:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}
.status-success {color:green;}
.status-danger {color:red;}
form span.btn-primary, form span.btn-primary:hover, form span.btn-primary:focus,form span.btn-primary:visited,form span.btn-primary:active {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #333 !important;
    box-shadow: none;
} 

@media (min-width: 768px) {
  #Data_Form > .row:nth-of-type(1) > .col-md-12 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  #Data_Form > .row:nth-of-type(1) > .col-md-12 > .col-md-4:first-child {
    display: none;
  }

  #Data_Form > .row:nth-of-type(1) > .col-md-12 > .col-md-4,
  #Data_Form > .row:nth-of-type(1) > .col-md-12 > .col-md-2,
  #Data_Form > .row:nth-of-type(1) > .col-md-12 > .col-md-1 {
    width: auto;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  #Data_Form > .row:nth-of-type(1) > .col-md-12 input[type="text"] {
    width: 320px;
  }

  #Data_Form > .row:nth-of-type(1) > .col-md-12 .btn {
    min-width: 120px;
  }

  #Data_Form > .row:nth-of-type(1) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  #Data_Form > .row:nth-of-type(1) .search-ryt {
    float: none;
  }

  #Data_Form > .row:nth-of-type(1) input.add_btn {
    float: none !important;
    min-width: 135px;
  }

  #Data_Form > .row:nth-of-type(2) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 20px;
    margin-top: 10px;
  }

  #Data_Form > .row:nth-of-type(2) > .col-md-6:first-child {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    float: none;
    padding-left: 0;
    padding-right: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
  }

  #Data_Form > .row:nth-of-type(2) > .col-md-6:last-child {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  #Data_Form > .row:nth-of-type(2) br {
    display: none;
  }

  #Data_Form > .row:nth-of-type(2) .add_btn_center {
    float: none !important;
    margin: 0;
    width: 312px;
    max-width: 312px;
    text-align: center;
  }

  #Data_Form > .row:nth-of-type(2) h2 {
    float: none !important;
    margin: 0;
    line-height: 1.4;
    text-align: center;
  }

  #Data_Form > .row:nth-of-type(2) > .col-md-4 {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  #Data_Form > .row:nth-of-type(2) > .col-md-4:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #Data_Form > .row:nth-of-type(2) > .col-md-4:first-child,
  #Data_Form > .row:nth-of-type(2) > .col-md-4:last-child {
    display: none;
  }

  #Data_Form > .row:nth-of-type(2) > .col-md-4 strong {
    display: inline-block;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
  }

  #Data_Form .select2.select2-container.select2-container--default.select2-container--below {
    width: 200px !important;
  }
}

@media (max-width: 992px) {
  #Data_Form > .row:nth-of-type(1) > .col-md-12 {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #Data_Form > .row:nth-of-type(1) > .col-md-12 > .col-md-4:first-child {
    display: none !important;
  }

  #Data_Form > .row:nth-of-type(1) > .col-md-12 > .col-md-4,
  #Data_Form > .row:nth-of-type(1) > .col-md-12 > .col-md-2,
  #Data_Form > .row:nth-of-type(1) > .col-md-12 > .col-md-1,
  #Data_Form > .row:nth-of-type(1) > .col-md-12 > .col-sm-4,
  #Data_Form > .row:nth-of-type(1) > .col-md-12 > .col-xs-4 {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 0 10px !important;
  }

  #Data_Form > .row:nth-of-type(1) > .col-md-12 input[type="text"],
  #Data_Form > .row:nth-of-type(1) > .col-md-12 .btn,
  #Data_Form > .row:nth-of-type(1) > .col-md-12 input[type="submit"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  #Data_Form > .row:nth-of-type(1) > .col-md-12 .form-btn,
  #Data_Form > .row:nth-of-type(1) > .col-md-12 .add_btn {
    width: 100% !important;
  }

  #Data_Form > .row:nth-of-type(2) {
    display: block !important;
    margin-top: 2px !important;
  }

  #Data_Form > .row:nth-of-type(2) > .col-md-4,
  #Data_Form > .row:nth-of-type(2) > .col-sm-4,
  #Data_Form > .row:nth-of-type(2) > .col-xs-4 {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  #Data_Form > .row:nth-of-type(2) > .col-md-4:first-child,
  #Data_Form > .row:nth-of-type(2) > .col-md-4:last-child,
  #Data_Form > .row:nth-of-type(2) > .col-xs-4:first-child,
  #Data_Form > .row:nth-of-type(2) > .col-xs-4:last-child {
    display: none !important;
  }

  #Data_Form fieldset {
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    border: 0 !important;
  }

  #Data_Form fieldset .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #Data_Form fieldset .col-md-2,
  #Data_Form fieldset .col-md-3,
  #Data_Form fieldset .col-md-4,
  #Data_Form fieldset .col-md-5,
  #Data_Form fieldset .col-md-6,
  #Data_Form fieldset .col-md-12,
  #Data_Form fieldset .col-sm-2,
  #Data_Form fieldset .col-sm-3,
  #Data_Form fieldset .col-sm-4,
  #Data_Form fieldset .col-sm-5,
  #Data_Form fieldset .col-sm-6,
  #Data_Form fieldset .col-sm-12,
  #Data_Form fieldset .col-xs-2,
  #Data_Form fieldset .col-xs-3,
  #Data_Form fieldset .col-xs-4,
  #Data_Form fieldset .col-xs-5,
  #Data_Form fieldset .col-xs-6,
  #Data_Form fieldset .col-xs-12 {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 8px !important;
    text-align: left !important;
  }

  #Data_Form fieldset [style*="text-align: center"],
  #Data_Form fieldset [style*="text-align:center"] {
    text-align: left !important;
  }
}

#calendar {
  max-width: 1100px;
  margin: 0 auto;
}

#calendar .fc-highlight {
  background: green !important;
}

#calendar .fc-daygrid-day-number {
  pointer-events: none;
}

.swal-title-lg {
  font-size: 28px !important;
}

.swal-popup-lg .swal2-html-container {
  font-size: 20px !important;
}

.select2-container {
  z-index: 9999 !important;
}

#ReservationModal .col-sm-12,
#ReservationModalEdit .col-sm-12,
#LabelRoomModal .col-sm-12,
#bulkprintreservation .col-sm-12 {
  position: inherit;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .panel-heading .row {
    margin-left: -6px;
    margin-right: -6px;
  }

  .panel-heading .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 10px;
  }

  .panel-heading .form-btn {
    width: 100% !important;
    max-width: 100%;
    min-height: 42px;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .panel-heading.row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .panel-heading .row {
    margin-left: 0;
    margin-right: 0;
  }

  .panel-heading .row > .col-xs-6,
  .panel-heading .row > .col-sm-6,
  .panel-heading .row > .col-md-2 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 10px;
  }

  .panel-heading .form-btn {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-height: 42px;
    margin: 0;
    white-space: normal;
  }

  #calendar {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #calendar .fc {
    min-width: 720px;
  }

  #calendar .fc-header-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  #calendar .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 5px;
  }

  #calendar .fc-toolbar-title {
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
  }

  #calendar .fc-button {
    padding: 6px 9px;
    font-size: 12px;
  }

  #calendar .fc-col-header-cell-cushion {
    font-size: 12px;
  }

  #calendar .fc-daygrid-day-number {
    font-size: 11px;
  }

  #calendar .fc-daygrid-event,
  #calendar .fc-event,
  #calendar .fc-event-title,
  #calendar .fc-event-main {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  #calendar .fc-daygrid-event {
    padding: 1px 2px;
    margin-top: 1px;
  }

  #CalendarData {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #CalendarData .panel.panel-headline {
    padding: 10px 0;
  }

  #CalendarData .panel-heading.row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #CalendarData .panel-title {
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 8px;
  }

  #CalendarData .dash {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #CalendarData .dash table {
    min-width: 1120px;
    table-layout: auto;
    margin-bottom: 12px;
  }

  #CalendarData .dash th,
  #CalendarData .dash td {
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.25;
    vertical-align: top;
    white-space: nowrap;
  }

  #CalendarData .dash th:nth-child(5),
  #CalendarData .dash td:nth-child(5),
  #CalendarData .dash th:nth-child(6),
  #CalendarData .dash td:nth-child(6),
  #CalendarData .dash th:nth-child(7),
  #CalendarData .dash td:nth-child(7),
  #CalendarData .dash th:nth-child(11),
  #CalendarData .dash td:nth-child(11) {
    min-width: 120px;
    white-space: normal;
  }

  #CalendarData .dash .btn {
    padding: 5px 8px;
    font-size: 12px;
    white-space: normal;
  }

  #ReservationModal .modal-dialog,
  #ReservationModalEdit .modal-dialog,
  #DetailsModal .modal-dialog,
  #LabelRoomModal .modal-dialog,
  #bulkprintreservation .modal-dialog {
    width: auto;
    margin: 10px;
  }

  #ReservationModal .modal-body,
  #ReservationModalEdit .modal-body,
  #DetailsModal .modal-body,
  #LabelRoomModal .modal-body,
  #bulkprintreservation .modal-body {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }

  #LabelRoomModal .col-xs-12,
  #LabelRoomModal .col-sm-12,
  #LabelRoomModal .col-md-6,
  #LabelRoomModal .col-md-12,
  #bulkprintreservation .col-xs-3,
  #bulkprintreservation .col-xs-4,
  #bulkprintreservation .col-sm-3,
  #bulkprintreservation .col-sm-4,
  #bulkprintreservation .col-md-3,
  #bulkprintreservation .col-md-4 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  #LabelRoomModal input,
  #LabelRoomModal select,
  #bulkprintreservation input,
  #bulkprintreservation select {
    width: 100% !important;
    max-width: 100%;
    min-height: 38px;
    margin-bottom: 10px;
    font-size: 16px;
  }

  #LabelRoomModal .modal-footer .btn,
  #bulkprintreservation .modal-footer .btn {
    width: 100%;
    margin: 5px 0;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  body .main .main-content {
    padding: 10px 0;
  }

  body .main .container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }

  body .panel.panel-headline {
    padding: 10px 14px;
    overflow-x: hidden;
  }

  #Data_Form .row {
    margin-left: 0;
    margin-right: 0;
  }

  #Data_Form .col-xs-1,
  #Data_Form .col-xs-2,
  #Data_Form .col-xs-3,
  #Data_Form .col-xs-4,
  #Data_Form .col-xs-5,
  #Data_Form .col-xs-6,
  #Data_Form .col-xs-7,
  #Data_Form .col-xs-8,
  #Data_Form .col-xs-9,
  #Data_Form .col-xs-10,
  #Data_Form .col-xs-11,
  #Data_Form .col-xs-12,
  #AddPaymentForm .col-xs-1,
  #AddPaymentForm .col-xs-2,
  #AddPaymentForm .col-xs-3,
  #AddPaymentForm .col-xs-4,
  #AddPaymentForm .col-xs-5,
  #AddPaymentForm .col-xs-6,
  #AddPaymentForm .col-xs-7,
  #AddPaymentForm .col-xs-8,
  #AddPaymentForm .col-xs-9,
  #AddPaymentForm .col-xs-10,
  #AddPaymentForm .col-xs-11,
  #AddPaymentForm .col-xs-12 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  #Data_Form input[type="text"],
  #Data_Form select,
  #Data_Form .btn,
  #Data_Form input[type="submit"],
  #AddPaymentForm input,
  #AddPaymentForm select {
    width: 100% !important;
    max-width: 100%;
    min-height: 38px;
    margin-bottom: 10px;
    font-size: 16px;
  }

  #Data_Form .add_btn,
  #Data_Form .add_btn_center {
    float: none !important;
    display: block;
    text-align: center;
    white-space: normal;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #Data_Form a.add_btn_center {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  #Data_Form input.add_btn {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #Data_Form .row:nth-of-type(2) {
    margin-top: 4px;
  }

  #Data_Form .row:nth-of-type(2) br {
    display: none;
  }

  #Data_Form h2 {
    float: none !important;
    margin: 8px 0 14px;
    font-size: 18px;
    line-height: 1.3;
    text-align: left;
  }

  #Data_Form fieldset {
    min-width: 0;
    padding: 0;
    margin: 0 0 14px;
    border: 0;
  }

  #Data_Form legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0 0 8px;
    margin: 0 0 12px;
    border-bottom: 1px solid #d9d9d9;
    white-space: normal;
    line-height: 1.3;
  }

  #Data_Form .search-ryt,
  #Data_Form .search-center,
  #Data_Form .search-left {
    text-align: left;
    margin-bottom: 8px;
    line-height: 1.45;
  }

  #Data_Form .dash {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #Data_Form .dash table {
    min-width: 980px;
    margin-bottom: 10px;
  }

  #Data_Form .dash th,
  #Data_Form .dash td {
    white-space: nowrap;
    vertical-align: top;
  }

  #Data_Form .dash td:nth-child(3),
  #Data_Form .dash td:nth-child(6),
  #Data_Form .dash td:nth-child(8) {
    min-width: 150px;
    white-space: normal;
  }

  #Data_Form .pagi .col-xs-6 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }

  #Data_Form .pagi-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #Data_Form > .row:nth-of-type(1) > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
  }

  #Data_Form > .row:nth-of-type(1) > .col-md-12 > .col-xs-4,
  #Data_Form > .row:nth-of-type(2) > .col-xs-4 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  #Data_Form > .row:nth-of-type(2) > .col-xs-4:first-child,
  #Data_Form > .row:nth-of-type(2) > .col-xs-4:last-child {
    display: none;
  }

  #Data_Form > .row:nth-of-type(2) strong {
    display: block;
    margin: 4px 0 12px;
    text-align: center !important;
  }

  #Data_Form .dash > .col-md-7,
  #Data_Form .dash > .col-md-5,
  #Data_Form .dash > .row > .col-md-4,
  #Data_Form .dash > .row > .col-md-5 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
    min-height: 0 !important;
  }

  #Data_Form .dash h2 {
    font-size: 18px;
    margin: 12px 0 8px;
  }

  .modal-dialog {
    width: auto;
    margin: 10px;
  }

  /* jQuery sets an inline px width (data-width) on open; !important is required to win over it */
  #myViewDetailsModal .modal-dialog,
  #myViewSubDetailsModal .modal-dialog {
    width: 94% !important;
    max-width: 94% !important;
    margin: 10px auto;
  }

  #myViewDetailsModal table.border-none td,
  #myViewSubDetailsModal table.border-none td {
    display: block;
    width: 100% !important;
    padding: 4px 0;
    word-break: break-word;
  }

  #myViewDetailsModal table.border-none td strong,
  #myViewSubDetailsModal table.border-none td strong {
    font-size: 12px;
  }

  #myViewDetailsModal table.border-none td textarea,
  #myViewSubDetailsModal table.border-none td textarea {
    width: 100%;
    max-width: 100%;
  }

  #myViewDetailsModal .modal-body table.table-bordered,
  #myViewSubDetailsModal .modal-body table.table-bordered {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  #myViewDetailsModal .modal-body table td img,
  #myViewSubDetailsModal .modal-body table td img {
    width: 70px;
    height: auto;
  }

  /* Customeridentityproof document preview ships with inline width="500" height="400"; the
     .image-wrapper class makes this more specific than the generic 70px thumbnail rule above */
  #myViewDetailsModal .modal-body .image-wrapper,
  #myViewSubDetailsModal .modal-body .image-wrapper {
    display: block;
    width: 100%;
  }

  #myViewDetailsModal .modal-body .image-wrapper img,
  #myViewSubDetailsModal .modal-body .image-wrapper img {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    display: block;
  }

  #myViewDetailsModal .modal-body .image-wrapper .delete-image,
  #myViewSubDetailsModal .modal-body .image-wrapper .delete-image {
    top: 4px;
    right: 4px;
  }

  #myViewDetailsModal .modal-body .image-wrapper > a,
  #myViewSubDetailsModal .modal-body .image-wrapper > a {
    position: absolute;
    top: 4px;
    left: 4px;
    background: #315bc2;
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
  }

  /* Print link ships with inline margin-left:50%/width:10%, which clips it on narrow screens */
  #myViewDetailsModal #url_btn,
  #myViewSubDetailsModal #url_btn {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 160px;
    display: block !important;
    text-align: center;
    box-sizing: border-box;
  }

  #myViewDetailsModal .modal-body > div.row,
  #myViewSubDetailsModal .modal-body > div.row {
    text-align: center;
  }

  /* owner/log/logdetails popup: same jQuery-forced inline px width (data-width="800") issue */
  #LogDetailsModal .modal-dialog {
    width: 94% !important;
    max-width: 94% !important;
    margin: 10px auto;
  }

  #LogDetailsModal .modal-body .col-md-6 {
    width: 100%;
    float: none;
  }

  #LogDetailsModal .modal-body div {
    word-break: break-word;
  }

  .modal-body {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }

  .modal-footer {
    padding: 10px;
  }

  #AddPaymentForm .btn {
    width: 100%;
    margin: 5px 0;
    white-space: normal;
  }

  .ui-datepicker {
    z-index: 9999 !important;
    max-width: calc(100vw - 20px);
  }

  /* View Summary Details header: title + Back/Add An Advance/Food Service/Extend Stay/
     Other Services/Discount/Check-Out are all float:right buttons that overlap the title
     on narrow screens. Scoped via the page's distinctive inline z-index so it doesn't
     touch other panel-heading buttons across the app. */
  .panel-heading[style*="z-index: 99999"] {
    overflow: visible;
  }

  .panel-heading[style*="z-index: 99999"] h3.panel-title.tab {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.3;
  }

  .panel-heading[style*="z-index: 99999"] > a.btn {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 8px;
    text-align: center;
    box-sizing: border-box;
    white-space: normal;
  }

  .panel-heading[style*="z-index: 99999"] .col-md-12 {
    width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
    clear: both;
  }

  .panel-heading[style*="z-index: 99999"] .col-md-12 a.btn {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    text-align: center;
    box-sizing: border-box;
  }

  /* Checked-Out Customers (vendor/guestcheckoutlist): header title + Back button float
     and overlap, and the Search/Reset buttons use inline position:relative;top:25px (to
     align with inputs in the desktop row) which breaks once fields stack on mobile.
     Scoped via the page's distinctive form action so it doesn't touch other list pages. */
  .panel-headline:has(form[action*="guestcheckoutlist"]) .panel-heading.row {
    margin-left: 0;
    margin-right: 0;
  }

  .panel-headline:has(form[action*="guestcheckoutlist"]) .panel-heading.row h3.panel-title {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 10px;
    font-size: 18px;
  }

  .panel-headline:has(form[action*="guestcheckoutlist"]) .panel-heading.row a.btn {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 8px;
    text-align: center;
    box-sizing: border-box;
  }

  form[action*="guestcheckoutlist"] .row.dash > div[class*="col-"] {
    width: 100%;
    float: none;
    margin-bottom: 10px;
  }

  form[action*="guestcheckoutlist"] .row.dash .btn {
    position: static !important;
    top: auto !important;
    display: block;
    width: 100%;
    margin: 5px 0;
  }
}

@media screen and (max-width: 768px) {
  .dash {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dash table.table {
    min-width: max-content;
    margin-bottom: 0;
  }

  .dash table th,
  .dash table td {
    white-space: nowrap;
  }
}