@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display&family=Dela+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  font-family: "Open Sans",Helvetica, "Roboto",Arial,sans-serif;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header{
  padding-inline: 25px;
  color: white;
  background-color: #a80d1e;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
#logo{
  font-family: 'Big Shoulders Display', cursive;
  font-size: 50px;
}
#headerGroup{
  display: inline-flex;
}

/* search form */
#searchField {
  background: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 50px;
  font-size: 15px;
  height: 35px;
  width: 300px;
  padding-left: 35px;
  box-sizing: border-box;
  outline: none;
}

/* svg for search icon and its stylings */
#searchFieldLabel {
  position: relative;
  display: inline-block; /* Ensures the label wraps its contents */
}
#searchFieldLabel::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 12 12' fill-rule='evenodd'%3E%3Cpath fill='%23959595' d='M11.407,10.421,8.818,7.832a4.276,4.276,0,1,0-.985.985l2.589,2.589a.7.7,0,0,0,.985-.985ZM2.355,5.352a3,3,0,1,1,3,3,3,3,0,0,1-3-3Z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none; /* Allows clicks to pass through to the input */
}

#searchBtn{
  margin-left: 10px;
  padding: 5px 10px;
  height: 35px;
  border-radius: 50px;
  font-size: 20px;
  font-weight: bold;
  color: #a80d1e;
  background-color: #fff;
}

/*********************** 'search_result.php' stylings ************************/
#searchTableWrapper{
  margin: 50px;
}

/*** Custom count columns stylings ***/
/* Common stylings for all count columns */
.countCols{
  color: #fefefe; 
  border-top:  1px solid #fd3148;
  border-right: 5px solid #fd3148;
  outline: 5px solid #fd3148;
  outline-offset: -5px;
}
/* Background color for 'Boxes_count' column */
.countColsBgColor1{
  background-color: #fd3148;
}
/* Background color for 'Received_boxes_count' column */
.countColsBgColor2{
  background-color: #34b1eb;
}
/* Background color for 'Delivery_boxes_count' column */
.countColsBgColor3{
  background-color: #16cc6b;
}
/************************************ End ************************************/

/* 'detail' and 'missingItems' buttons styling */
.detailbtn, .missingItemsBtn{
  color: #fff;
	background:#a80d1e;
  font-family: "Open Sans",Helvetica, "Roboto",Arial,sans-serif;
	padding: 7px 10px;
  margin-left: 10px;
	border-radius: 50px;
	border: none;
}

.toOptionBigBtn{
  font-size: 25px;
  font-weight:bold;
  background: #a80d1e;
  color: #fff;
  padding: 10px 15px;
  border-radius: 50px;
  border: none;
  margin: 10px;
}

/* Style overides for '#itemAdd' */
#itemAdd{
  font-size: 15px;
  margin-left:unset;
}

/* options page */
#welcomeText{
  padding-top: 10px;
  text-align: center;
  color: #a80d1e;
}
.admin_options_container{
  text-align: center;
}
.options_container{
  text-align: center;
  padding: 120px 30px;
}
.admin_options_container button,.options_container button{
  padding: 30px;
  margin: 15px;
  width: 40%;
  font-size: 35px;
  font-weight: bold;
  border: none;
  border-radius: 20px;
  background: #a80d1e;
  color: white;
}
.admin_options_container button:hover, .options_container button:hover{
  opacity: unset;
}
/* add an arrow for option buttons */
.admin_options_container button span, .options_container button span{
  cursor: pointer;
  display: inline-block;
  position: relative;
  /* transition for all styling changes is perform smoothly over .5 second */
  transition: 0.5s;
}
.admin_options_container button span:after, .options_container button span:after{
  /* content attr displayed after every matched span element */
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.admin_options_container button:hover span, .options_container button:hover span{
  padding-right: 25px;
}
.admin_options_container button:hover span:after, .options_container button:hover span:after{
  opacity: 1;
  right: 0;
}

#installsitebtn{
  background-color: #34b1eb;
}

#dataWrapperContainer{
  text-align: center;
  padding: 0 100px;
}
#dataWrapper{
  text-align: left;
}
#moreDetail{
  padding-top: 15px;
  text-align: left;
}
#toOption, .marginLeft20 {
  margin-left: 20px;
}

/* notice */
.notice{
  color: #a80d1e;
}
/******** delivery extras - delivery.php *******/
.deliEventListItemWrapper, .deliEventListItemCompletedWrapper{
  display: inline-block;
  margin: 5px;
  padding: 5px;
  border: 3px solid lightgray;
  border-radius: 10px;
}
.deliEventListItemCompletedWrapper{
  background-color: #16cc6b;
  border-color: #16cc6b;
}
#splitScreenContainer {
  display: flex;
  /* flex-direction: row; */
}
#leftScreen {
  height: 800px;
  display: block;
  width: 70%;
  overflow-y: scroll;
}
#rightScreen {
  height: auto;
  display: block;
  width: 30%;
  position: relative;
}
/* Note input fields for delivery scanning - 'itemStatus' div */
.deliveryItemNote{
  padding: 3px;
  /* margin: unset; */
  font-size: 15px;
}
/* tables */
table{
  width: 100%;
}
table, td{
  border: 1px solid #000;
  border-collapse: collapse;
}
th, td{
  padding: 5px;
  font-family: 'Bebas Neue', cursive;
  font-size: 25px;
}
th{
  color: white;
  background-color:#a80d1e;
  letter-spacing: 1px;
}
tr:nth-child(even){
  background-color: #fff;
}
tr:nth-child(odd){
  background-color: #ddd;
}

.boxInfo{
  width: 95%;
}
#boxDataContainer{
  text-align: center;
  padding: 0 400px;
}
#boxData{
  text-align: left;
  margin-bottom: 15px;
  width: max-content;
}
#adminUnloadTr{
  background-color: #fff;
}
.dataColumn{
  border: none;
}


/* scan value wrapper */
.scanValueWrapper{
  text-align: center;
}
.scanValueWrapper2{
  text-align: center;
  position: absolute;
  width: 565px;
  top: 30%;
  transform: translateY(-50%);
}
.scanValueForm{
  border-radius: 50px;
  border: 3px solid lightgray;
  margin:20px;
  position: relative;
}
#scanValueBox{
  font-size: 25px;
  padding: 0 20px;
  height: 40px;
  width: 280px;
  border-radius: 50px;
  outline: none;
}

#validCode{
  font-family: 'Roboto', sans-serif;
  color:#16cc6b;
  font-size:30px;
  text-align:center;
}
#errorMessage, #invalidCode{
  font-family: 'Roboto', sans-serif;
  color:#a80d1e;
  font-size:30px;
  text-align:center;
}

/******************* 'admin_container_status.php' stylings *******************/
#missingItemsTableTitle{
  text-align: center;
  background-color: #a80d1e;
  color: #fefefe;
  margin: 20px 450px 20px 450px;
  border-radius: 10px;
}
#missingItemsTable{
  margin-bottom: 10px;
}
#missingItemsTable th{
  text-align: left;
}
#incomingContainers{
  margin-top: 20px;
  overflow-x: auto;
  white-space: nowrap;
}
#contStatTable th {
  border: 1px solid #000;
}
/* Container status update modal ATA/ATD inputs */
.redText, .redLabel{
  color: #a80d1e;
}
/************************************ End ************************************/


/********************* Calendar relate elements stylings *********************/
/*** Style for calendar on pages ***/
.calendar {
  width: 85%;
  margin: 20px auto;
}
/*** Style for 'delivery.php' calendar ***/
.deliveryCalendar{
  width: unset;
  margin: 10px;
}
/************************************ End ************************************/

.panelContainer{
  padding: 15px 15px 0 15px;
}
/* Custom modal styling - 'admin_calendar.php' */
#eventCreationModalContent {
  padding: 0 0 20px 0;
  background-color: #fff;
}

.tabButtonContainer button{
  width: 33.33%;
  border: 1px solid #a80d1e;
  outline: none;
  cursor: pointer;
  padding: 10px;
  background-color: #fff;
  color: #a80d1e;
  font-weight: bold;
  font-size: 20px;
}
.tabButtonContainer button:hover{
  background-color: #ddd;
}

/* date range picker styling */
.daterangepicker{
  z-index: 10; /* Sit on top */
}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  font-size: 20px;
  min-width:unset;
  border-radius:unset;  
}
.daterangepicker select{
  all: revert;
}
.daterangepicker .drp-buttons .btn {
  width: unset;
  font-size: 17px;
}

/* The Close Button */
.close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* to properly display google's places api inside a modal */
.pac-container { 
  z-index: 7; 
}

/*** TEST - Modals title refactor ***/
#eventHeader, #eventHeaderEdit, #orderStatusEventHeader, #eventListTitle{
  font-weight: bold;
  font-size: 30px;
  margin: 35px 0 15px 0;
}
/*** TEST ENDS ***/

/* styling and attributes for the print */
@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
    transform: scale(1);
    zoom: 110%;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

input[type=checkbox] {
  transform: scale(1.25);
}


/* pre_install_measure stylings */
.project_select{
  margin-top: 10px;
  text-align: center;
  top: 0;
  background-color: white;
}
.project_select form{
  padding: 10px;
  border-radius: 50px;
  border: 3px solid lightgray;
  margin:20px;
}
.project_select input{
  font-weight: bold;
  font-size: 16px;
  background: lightgray;
  color: rgb(104, 104, 104);
  padding: 7px 0;
  margin: 3px 0;
  border-radius: 50px;
  border: none;
  width: 320px;
}
/* measurementChooseProject */
#measurementChooseProject{
  font-size: 25px;
  padding: 3px 10px;
  background: unset;
  color: unset;
  border-radius: 50px;
  border: 1px solid lightgray;
}
#measureInputHeader{
  border: none;
  margin: unset;
  padding: 0 0 15px 0;
  font-weight: bold;
  font-size: 30px;
}
#measureInputHeader:focus{
  outline: none;
}
#measureDisplayHeader{
  border: none;
  margin: unset;
  padding: 0 0 15px 0;
  font-weight: bold;
  font-size: 30px;
}
#measureDisplayHeader:focus{
  outline: none;
}

.modalForm .displayAttributes{
  margin: 8px 0;
  width: 100%;
  border: unset;
}
.modalForm .displayAttributes:focus{
  outline: none;
}
/* separate different measurement section */
.measurementSection{
  border: 3px solid lightgrey;
  padding: 5px;
}

/* measurement table report modal */
/* generate report table button*/
#generateTableReport{
  font-weight: bold;
  font-size: 20px;
  background: #34b1eb;
  color: #fff;
  padding: 15px 0;
  margin: unset;
  margin-top: 30px;
  border-radius: 15px;
  border: none;
  width: 320px;
}

/******************* 'project_purchase_order.php', 'project_purchase_order_detail.php' stylings *******************/
#projectsContainerDiv{
  margin-top: 55px;
}

#purchase_order_table, #projectQuotationSummaryTable{
  margin-top: 10px;
  text-align: left;
}
#PO_amount, #quotationEditAmount{
  font-weight: bold;
  font-size: 17px;
  color: #fefefe;
  background-color: #b3505c;
  border-radius: 15px;
  border: none;
}
#projectName, .floorNumber, .quotationSummaryPDF, .headerTag{
  font-weight: bold;
  font-size: 20px;
  color: rgb(94, 94, 94);
  background-color: #ccc;
  padding: 13px;
  margin: 0 0 10px 0;
  border-radius: 15px;
}

.floorNumber{
  font-size: 18px;
  padding: 5px 20px;
}

.quotationSummaryPDF{
  width:70px;
  margin-left: 10px;
  color: #fefefe;
  background-color: #16cc6b;
}
#summationAmountCell{
  padding: 5px;
  margin: unset;
  background-color: #b3505c;
  border-radius: 15px;
}
.vmargin40{
  margin: 40px 10px;
}

/*** action menu stylings for 'projectBtnDiv' ***/
.projectBtnActionMenu {
  display: flex;
  position: absolute;
  right: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.projectBtnDiv:hover .projectBtnActionMenu {
  opacity: 1;
}
.actionMenuEdit, .actionMenuDelete {
  font-size: 20px;
  font-weight: bold;
  padding: 9px;
  border-radius: 10px;
  color: #fff;
}
/************************************ End ************************************/

/*************** 'project_purchase_order_detail.php' stylings ****************/
/* Dynamic table special symbols */
.specialSym{
  font-size: 20px;
  display: inline;
}
.detail td{
  margin: unset;
  padding: 0 5px;
}
.detail td input[type=text]{
  width: 250px;
}
.detail td[readonly]{
  background-color: #eeeeee;
}

#actionCol input{
  font-size: 15px;
  padding: 5px; 
  margin: unset;
}

/*** quotation detail edit table stylings ***/
.detailEdit .itemPriceEdit{
  width: 100px;
}
.detailEdit .itemDiscountEdit{
  width: 60px;
}
.detailEdit .itemSubTotalEdit{
  width: 200px;
}
/************************************ End ************************************/

/*************** 'project_delivery_detail_status.php' stylings ***************/
.dot {
  height: 49px;
  width: 25px;
  border-radius: 15px;
  display: inline-block;
  margin: 0 10px 0 30px;
}
#chartBox {
  height: 400px;
  padding: 20px;
}

.colsWrapper, .colsWrapperType2{
  height: 40px;
  line-height: 40px;
  margin: 0 0 10px 0; 
  border:2px solid #a80d1e; 
  border-radius: 15px;
}
.colsWrapperType2{
  border-color: #ccc;
}
/* Column stylings */
.unitCol, .unitColType2, .countCols2, .NACol{
  display: inline-block;
  text-align: center;
  font-weight: bold;
  color: #fefefe;
  height: 100%;
  border-radius: 12px;
  width: 25%;
}
.unitCol, .unitColType2{
  border-radius: 12px 0 0 12px;
}
.unitColType2, .NACol{
  color: #5e5e5e;
}
.NACol{
  width: 75%;
}
/************************************ End ************************************/

/******************** 'installation status' pages stylings *******************/
/*** 'installation_status' page ***/
.contractorMargin {
  margin-top: unset !important;
}

/*** 'installation_status_unit' page ***/
.sectionStatusTag{
  width: 15%;
  border-right: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  border-radius: 15px 0;
}
.sectionStatusTagMini{
  border-bottom: unset;
  border-radius: unset;
}

.sectionTag{
  border-radius: 12px 0 0 0;
}
.sectionTagMini{
  border-radius: 12px 0 0 12px;
}

/* Dropdown element to select installation status */
.sectionStat {
  margin: -6px;
  padding: 5px;
  border-radius: 3px 3px 10px 3px;
  border: 1px solid #ccc;
  font-size: inherit;
}
.sectionStatMini{
    border-radius: 3px 3px 3px 3px;
}

/* PhotoSwipe supporting stylings */
.pswp-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.installationImage {
  width: 270px;
  height: 200px;
  margin: 10px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.installationImage:hover {
  transform: scale(1.02);
}

.imageContainer {
    position: relative;
    display: inline-block;
    margin: 5px;
}
.deleteImageBtn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.deleteImageBtn:hover {
    background-color: rgba(255, 0, 0, 0.9);
}

.uploadSection {
  padding: 10px;
  background: #ccc;
  border-radius: 8px;
  margin: 10px 20px;
}
.commentBox {
  width: 98%;
  min-height: 50px;
  padding: 10px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  border-radius: 6px;
  resize: vertical;
}
.fileInput {
  padding: 10px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
}
/************************************ End ************************************/

/******************** 'service_order_detail.php' stylings ********************/
.floorBtn.expanded{
  height: auto;
}
.floorBtn.expanded .floorBtnTitle{
  padding: 10px;
  margin: -10px -10px 0 -10px;
  color: #fff;
  background-color: #a80d1e;
  border-radius: 8px 8px 0 0;
}
.floorBtn.expanded .unitBtnsWrapper{
  display: block;
}

/*** Part select toggle switch ***/
#typeToggleSwitch {
  position: relative;
  display: inline-block;
  width: 134px;
  height: 30px;
}
#switchSlider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #0075FF;
  border-radius: 20px;
  transition: 0.4s;
}
#switchSlider:before {
  position: absolute;
  content: "Panel";
  padding: 0 5px;
  left: 5px;
  bottom: 5px;
  background-color: white;
  line-height: 20px;
  border-radius: 15px;
  transition: 0.4s;
}
#switchCheckbox:checked + #switchSlider:before {
  content: "Cabinet";
  transform: translateX(55px);
}

/*** Marker.js image section ***/
#markerJSImageContainer { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}
.markerJSImageWrapperDiv{
  width: 50%;
  position: relative;
}

/************************************ Ends ***********************************/

/****************** 'installation_status_floor.php' stylings *****************/
#projectGenInfoTable {
  width: 30%;
}
#projectGenInfoTable td[contenteditable="true"] {
  font-family: unset; 
  font-size: 18px;
}
/************************************ Ends ***********************************/

/************************************************* General Stylings **************************************************/
.invisible{
  display: none;
}

.center{
  text-align: center;
}
.left{
  text-align: left;
}
.right{
  text-align: right;
}
.floatLeft{
  float: left;
}
.floatRight{
  float: right;
}
.displayBlock{
  display: block;
}
.maxWidth100{
  max-width: 100%;
}
.size16{
  font-size: 16px;
}
.size20{
  font-size: 20px;
}
.bold{
  font-weight: bold;
}
/* Stop text from wrapping to the next line */
.nowrap{
  white-space:nowrap;
}

/*** Margin stylings ***/
.horizontalCenter{
  margin: 0 auto;
}
.marginHorizontal15{
  margin-inline: 15px;
}

.marginTop10{
  margin-top: 10px;
}
.marginTop70{
  margin-top: 70px;
}
.marginBottom10{
  margin-bottom: 10px;
}
/* Invert */
.invMargin10{
  margin: -10px;
}
.invMarginLeft11{
  margin-left: -11px;
}

/*** Padding stylings ***/
.padding10{
  padding: 10px;
}
.padding11{
  padding: 11px;
}
.padding13{
  padding: 13px;
}

.borderRad15{
  border-radius: 15px;
}

/*** Colored text ***/
.greenTxt{
  color: #16cc6b;
}
.blueTxt{
  color: #34b1eb;
}
.darkGrayTxt{
  color: #5e5e5e;
}
/* For text/statuses */
.redStatTxt{
  color: #a80d1e;
}
.blueStatTxt{
  color: #00B3FF;  
}
.greenStatTxt{
  color: #26B021;  
}
.orangeStatTxt{
  color: #f99806;  
}
/*** Colored background ***/
.genWhiteBackground{
  background-color: #fff;
}
.genGrayBackground{
  background-color: #ccc;
}
.genPinkBackground{
  background-color: #e59a9a;
}
.genRedBackground{
  background-color: #a80d1e;
}
.genBlueBackground{
  background-color: #34b1eb;  
}
.genGreenBackground{
  background-color: #16cc6b;  
}
/* Opacity: 0.8 */
.opaRedBg {
  background-color: rgba(168, 13, 30, 0.8);
}
.opaBlueBg {
  background-color: rgba(52, 177, 235, 0.8);
}
.opaGreenBg {
  background-color: rgba(22, 204, 107, 0.8);
}
.grayBorder{
  margin: 10px;
  padding: 10px;
  border: 3px solid lightgray;
  border-radius: 15px;
}

/* Override default stylings for 'button', 'select' and other elements */
button, select, input[type=button], input[type=submit]{
  cursor: pointer;
  border: none;
}
button:hover {
  opacity: 0.8;
}
select:focus{
  outline: none;
}

/* Pointer --- To do: Replace other obsolete stylings with this */
.pointer{
  cursor: pointer;
}

/*** Med rounded white btn red txt ***/
#logoutbtn, #itemAdd{
  padding: 5px 10px;
  margin-left: 30px;
  background: white;
  color: #a80d1e;
  border-radius: 50px;
  font-size: 20px;
  font-weight: bold;
}
#logoutbtn {
  text-decoration: none;
}
/***** General button stylings ******/
.genRedBtn, .genGreenBtn, .genBlueBtn{
  padding: 5px 15px;
  font-size: 18px;
  font-weight: bold;
  color: #fefefe;
  border-radius: 15px;
}
/** Red button **/
.genRedBtn{
  background-color: #a80d1e;
}
/** Green button **/
.genGreenBtn{
  background-color: #16cc6b;  
}
/** Blue button **/
.genBlueBtn{
  background-color: #34b1eb;
}

/* Number tag */
.numTag{
  padding: 6px 20px;
  font-size: 25px;
  color: #fff;
  background-color:#a80d1e;
  border-radius: 8px 10px 10px 8px;
}
.divBtnTxt {
  flex: 1;
}

/** 
* Bordered button
*
* 3 variants:
* 1. .borderBtn1 - for small buttons
* 2. .borderBtn2 - for large buttons
* 3. .borderBtn3 - for div buttons
*/
.borderBtn1,
.borderBtn2,
.borderBtn3 {
  border-style: solid;
  border-radius: 15px;
}
.borderBtn1 {
  padding: 10px;
  border-width: 3px;
}
.borderBtn2,
.borderBtn3 {
  margin-block: 5px;
  border-width: 5px; 
  text-transform: uppercase;
}
.borderBtn3 {
  display: flex;
  position: relative;
  align-items: center;
}
/* Unsetting width styling of element */
.oriWidth{
  width: unset;
}

/*** Navigation ribbon ***/
/* Containing div for navigation buttons */
.navMenu{
  position: sticky;
  top: 0;
  z-index: 6;
}
/* Navigation button */
.navBtn{
  font-size: 15px;
  position: relative;
  width: 90px;
  height: 30px;
  margin: 5px 0 5px 25px;
}
/* Pseudo-element on .navBtn */
.navBtn::after, .navBtn::before{
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
}
/* triangle on left side of element */
.navBtn::after{
  left: 0;
  border-right: 15px solid #fff;
  border-top: 15px solid #a80d1e;
  border-bottom: 15px solid #a80d1e;
}
/* triangle on right side of element */
.navBtn::before{
  right: 0;
  border-right: 15px solid #a80d1e;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.invMarginLeft5{
  margin-left: -5px;
}

/*** Used on login/signup forms ***/
.credentialForm{
  padding: 30px;
  margin: 30px;
  border: 3px solid #f1f1f1;
}
.credentialFormBtn{
  background-color: #a80d1e;
  color: white;
  padding: 10px;
  margin: 8px 0;
  width: 100%;
}

/* Style to split div into columns */
.divToCols{
  column-count: 5;
}

/*** Styles for 'select' elements ***/
/* Styles for round and black 'select' elements */
.roundBlackSelect{
  font-size: 25px;
  padding: 2px 5px;
  color: lightgray;
  background: black;
  border-radius: 50px;
}
/* Styles for square bordered 'select' elements */
.squareBorderSelect{
  font-size: 25px;
  display: block;
  border: 1px solid lightgray;
}

/***** Stylings for modal/content *****/
.modal {
  position: fixed;
  z-index: 7; /* Sit on top */
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modalContent {
  margin: 10% auto;
  padding: 20px;
  width: 80%;
  background-color: #fff;
}

/***** General styling for form elements on modals *****/
/* label elements */
.modalForm label{
  font-weight: bold;
}
/*** input field elements ***/
/* Apply to all input elements */
.modalForm input{
  padding: 5px 2px;
}
/* Only apply to text input elements */
.formTextInput{
  width: 100%;
  margin: 8px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* Apply to reference field of edit modals */
.editModalReference {
  text-align: center;
  font-size: 20px;
  font-family: Calibri;
  border: none;  
  outline: none;
}
/*** Applied on custom forms for pages: [project_purchase_order_detail, work_order_detail] ***/
.customFormTable tr{
  all: revert;
}
.customFormTable td{
  border: 1px solid #000000;
  font-family: Calibri;
}
/*** Copyright ***/
.copyright{
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 5px;
  margin-bottom: auto;
}
/*********************************************** General Stylings Ends ***********************************************/


/*********************************************************** Mobile Device Stylings (Size: tablet) ***********************************************************/
@media only screen and (max-width:1100px) and (min-width:451px){
  /*** General tablet stylings ***/
  *{
    font-size: 20px;
  }
  /* Split div into columns */
  .divToCols{
    column-count: 3;
  }
  #searchField{
    font-size: 10px;
    width: 200px;
  }
  
  /* options page */
  .options_container button, .admin_options_container button{
    padding: 20px;
    font-size: 25px;
  }

  /* table dataform */
  #dataWrapperContainer{
    text-align: center;
    padding: 0;
  }
  th, td{
    font-size: 25px;
  }
  /* tablet styling for missing items table */
  #missingItemsTableTitle{
    margin: 30px 10px 15px 10px;
    padding: 5px;
  }

  /* scan form */
  #boxDataContainer{
    text-align: center;
    padding: 0;
  }
  #boxData{
    margin: 0 30px;
    margin-bottom: 20px;
  }
  .boxInfo th, td{
    font-size: 25px;
  }

  #detailDescription{
    width: 800px;
    /* white-space:pre; */
  }

  /* pre install measurement styling */
  /* project units's input buttons */
  .project_select input{
    font-size: 10px;
    padding: 7px 0;
    margin: 3px 0;
    width: 160px;
  }
  
  #generateTableReport{
    font-size: 15px;
    width: 250px;
  }
  /*** delivery.php page ***/
  /* 'leftScreen' div */
  #leftScreen{
    height: unset;
    width: 60%;
  }
  /* #deliveryCalendarWrapper button,h2,td,th,span,.fc-title{
    font-size: 13px;
  } */
  /* 'rightScreen' div */
  #rightScreen{
    width: 40%;
  }
  .scanValueWrapper2{
    width: unset;
  }
  .scanValueWrapper2 form{
    margin: 10px;
  }
  .scanValueWrapper2 #scanValueBox{
    font-size: 13px;
    height: 25px;
    width: 180px;
    padding: 5px;
    margin: unset;
  }
  /* 'bottomScreen' div elements */
  .manualInputBtn{
    font-size: 13px;
  }
}
/********************************************************* Mobile Device Stylings (Size: tablet) Ends ********************************************************/


/************************************************************ Mobile Device Stylings (Size: phone) ***********************************************************/
@media only screen and (max-width:485px) and (min-width:200px){
  /*** General mobile stylings ***/
  *{
    font-size: 15px;
  }
  /* Revert the style to the default */
  .divToCols{
    column-count: initial;
  }

  #logo{
    font-size: 15px;
  }

  #searchField{
    font-size: 10px;
    height: 25px;
    width: 120px;
    padding-left: 25px;
  }
  #searchFieldLabel::before {
    left: 7px;
    width: 15px;
    height: 15px;
  }
  #searchBtn{
    height: 25px;
    font-size: 10px;
  }
  #logoutbtn{
    font-size: 10px;
    margin-left: 10px;
    /* padding: 8.5px 10px; */
  }

  /** toOptionBigBtn **/
  .toOptionBigBtn{
    width: unset;
    font-size: 10px;
  }

  /* options page */
  .admin_options_container button, .options_container button{
    padding: 15px;
    font-size: 15px;
    width: 70%;
    border-radius: 5px;
  }

  select{
    font-size: 15px;
  }

  /* table dataform */
  #dataWrapperContainer{
    text-align: center;
    padding: 0;
  }
  #dataWrapper{
    padding-right: 15px;
  }
  th, td{
    font-size: 10px;
  }

  #missingItemsTableTitle{
    margin: 30px 5px 10px 5px;
  }

  /* 'detail' and 'missingItems' buttons styling */
  .detailbtn, .missingItemsBtn{
    padding: 1px 5px;
    margin-left: unset;
    font-size: 10px;
  }
  /****** Navigation button ******/
  .navBtn{
    font-size: 10px;
    width: 130px;
    height: 20px;
  }
  /* triangle on left side of element */
  .navBtn::after{
    border-top: 10px solid #a80d1e;
    border-bottom: 10px solid #a80d1e;
  }
  /* triangle on right side of element */
  .navBtn::before{
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }

  /* scan form */
  #scanValueBox{
    font-size: 15px;
    height: 25px;
    width: 200px;
  }
  
  #boxDataContainer{
    text-align: center;
    padding: 0;
  }
  #boxData{
    margin: 12px 5px 45px 5px;
    width: auto;
  }
  .boxInfo{
    width: 100%;
  }
  .boxInfo td, .boxInfo th{
    font-size: 10px;
  }

  .scanValueWrapper h2{
    margin: 15px;
  }

  /********* admin_calendar.php page **********/
  #detailDescription{
    width: 250px;
  }
  #eventHeader,#eventHeaderEdit,#orderStatusEventHeader, #eventListTitle{
    font-size: 20px;
  }
  /* detail form buttons */
  .genGreenBtn, .genBlueBtn, .genRedBtn{
    font-size: 10px;
    /* padding: 5px; ~ for container track btn on admin_container_status.php */
  }

  /********* pre install measurement styling *********/
  /* measurementChooseProject */
  #measurementChooseProject{
    font-size: 15px;
    padding: 2px 5px;
  }
  /* project units's input buttons */
  .project_select input{
    font-size: 5px;
    padding: 7px 0;
    margin: 3px 0;
    width: 80px;
  }
  #generateTableReport{
    font-size: 10px;
    width: 180px;
    padding: 8px 0;
  }

  #measureInputHeader{
    font-size: 20px;
  }
  #measureDisplayHeader{
    font-size: 20px;
  }
  /* report table */
  #projectReportTable #measurementReportTable th,td{
    font-size: 5px;
  }

  /*********** project_purchase_order.php ***********/
  .borderBtn1{
    font-size: 10px;
  }
  .borderBtn2{
    font-size: 15px;
  }
  #projectName{
    font-size: 15px;
    padding: 5px;
  }
  #summationAmountCell{
    font-size: 10px;
  }
  /*********** project_purchase_order_detail.php ***********/
  #purchaseOrderTableWrappingDiv{
    margin-top: 50px;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  /*********** delivery.php ***********/
  #splitScreenContainer{
    display: block;
  } 
  /* 'leftScreen' div */
  #leftScreen {
    height: unset;
    width: unset;
  }
  /* 'rightScreen' div */
  #rightScreen {
    width: 100%;
  }
  .scanValueWrapper2{
    width: unset;
    position: unset;
    transform: unset;
  }
  #itemStatus td,span{
    font-size: 10px;
  }
  .manualInputBtn{
    padding: 3px;
    font-weight: unset;
  }

  /*************** service_order_detail.php **************/
  .markerJSImageWrapperDiv {
    width: 100%;
  }
}
/********************************************************* Mobile Device Stylings (Size: phone) Ends *********************************************************/