/* 
PPI Quote Tool CSS File

---- Table of Contents ----

(HOW TO USE: Highlight the name of the section you are looking for and ctrl + f to find it in the code)

1: Root & General
	1a: Root Variables
	1b: General
    1b-a: Body

2: Section Guide
  2a: Background
  2b: Buttons
  2c: Progress Line

3: Back/Next Buttons
  3a: Bar
  3b: Buttons

4: Materials Page
  4a: Flex
  4b: Images
  4c: Overlay
  4d: Selected/Checked

5: Header Bar
  5a: Grey
  5b: White Bar and Logo



*/







@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Roboto&family=Work+Sans&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800;900&display=swap");


/* ---------------------------------------- 1: Root & General ----------------------------------------*/
    

/* -------------------- 1a: Root Variables --------------------*/

:root {

    --ppi-color-white-boxes: #ffffff;
    --ppi-color-main-text: #323232;
    --ppi-color-box-border: #BFBFBF;
    --ppi-color-cta: #B70020;
    --ppi-color-dark-grey: #757575;
    --ppi-color-mid-grey: #cccccc;
    --ppi-color-secondary: #2A8EB9;
    --ppi-color-background: #F3F3F3;

    --ppi-font-header-font: 'Montserrat';
    --ppi-font-text-font: 'Lato';

    --ppi-font-size-base-desktop: 16px;

    --ppi-font-weight-bold: 700;
}


/* -------------------- 1b: General --------------------*/

   
/* ---------- 1b-a: Body ----------*/

* {
  padding: 0;
  margin: 0;
}

html, body, .modal-background {
  min-height: 100% !important;
  height: 100%;

}

body {
  background-color: #f2f2f2 !important;
}



.bodyCont {
  border: none !important;
}



.hidden {
  display: none !important;
}

.center > p {
  text-align: center;
  padding-top: 20px;
}

.bodyInnerFullWidth {
  height: 100vh !important;
  background-color: #f2f2f2;
  font-family: "Roboto" !important;
  text-align: left !important;
}

.bodyInnerFullWidth-2 {
  height: 100vh !important;
  font-family: "Roboto" !important;
  text-align: left !important;
}

.background-box {
  background-color: white;
  width: 95%;
  max-width: 1500px;
  padding: 0px 0px 50px 0px;
  margin: auto;
  margin-top: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 25px;
}

/* ---------------------------------------- 2: Section Guide ----------------------------------------*/
    

/* -------------------- 2a: Background --------------------*/


.section-flex {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 75px;
  background-color: #f2f2f2;
}

/* -------------------- 2b: Buttons --------------------*/

.section-btns {
  grid-column: 1/2;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  margin: 0px 80px 0px 80px;
  z-index: 3;
}

.section-btn {
  display: inline;
  border: 2px solid #cccccc;
  background-color: #ffffff;
  width: 70%;
  text-align: center;
  margin: 10px;
  padding: 10px;
  border-radius: 20px;
  color: #cccccc !important;
  align-self: center;
  justify-self: center;
  text-decoration: none;
}



.selected {
  border: 2px solid #b70020;
  background-color: #b70020;
  color: #ffffff !important;
}

.past {
  border: 2px solid #b70020;
  color: #b70020 !important;
}



.section-btn-mobile {
  display: none;
}

/* -------------------- 2c: Progress Line --------------------*/

.section-line {
  height: 2px;
  width: 100%;
  background-color: #cccccc;
  grid-column: 1/6;
  grid-row: 1/2;
  align-self: center;
  z-index: 1;
}

.section-line-20 {
  width: 15%;
  background-color: #b70020;
  z-index: 2;
}

.section-line-40 {
  width: 33%;
  background-color: #b70020;
  z-index: 2;
}

.section-line-60 {
  width: 50%;
  background-color: #b70020;
  z-index: 2;
}

.section-line-80 {
  width: 67%;
  background-color: #b70020;
  z-index: 2;

}

.section-line-100 {
  width: 85%;
  background-color: #b70020;
  z-index: 2;

}


/* ---------------------------------------- 3: Back/Next Buttons ----------------------------------------*/
    

/* -------------------- 3a: Bar --------------------*/

.nav-btns {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-top: solid 2px #dcdcdc;
  height: 75px;
  z-index: 10;
  gap: 32px;

}

/* -------------------- 3a: Buttons --------------------*/

.next-btn {
  position: relative;
  height: 45px;
  width: 400px;
  border-radius: 20px;
  font-size: 20px;
  text-align: center;
  color: white;
  background-color: #b70020;
  border: solid 2px #b70020;
  font-family: "Roboto";

}

.next-btn:hover {
  cursor: pointer;
  background-color: #323232;
  border: solid 2px #323232;
}

.back-btn {
  position: relative;
  height: 45px;
  width: 400px;
  border-radius: 20px;
  font-size: 20px;
  text-align: center;
  color: #b70020;
  background-color: #ffffff;
  border: solid 2px #b70020;
  font-family: "Roboto";
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;

}

.back-btn:hover {
  cursor: pointer;
  border: solid 2px #323232;
  color: #323232 !important;
}


.next-btn-dim {
  position: absolute;
  right: 2%;
  margin: 90px 20px 50px 20px;
  padding: 8px 40px;
  border-radius: 20px;
  font-size: 30px;
  text-align: center;
  color: white;
  background-color: #b70020;
  border: solid 2px #b70020;
  font-family: "Roboto";

}

.next-btn-dim-2 {
  position: absolute;
  right: 2%;
  margin: 20px 20px 50px 20px;
  padding: 8px 40px;
  border-radius: 20px;
  font-size: 30px;
  text-align: center;
  color: white;
  background-color: #b70020;
  border: solid 2px #b70020;
  font-family: "Roboto";

}

.next-btn-dim:hover {
  cursor: pointer;
  background-color: #323232;
  border: solid 2px #323232;
  font-family: "Roboto";

}

.next-btn-dim-2:hover {
  cursor: pointer;
  background-color: #323232;
  border: solid 2px #323232;
  font-family: "Roboto";

}

.back-btn-dim {
  position: absolute;
  left: 2%;
  text-decoration: none;
  margin: 90px 20px 50px 20px;
  padding: 8px 40px;
  border-radius: 20px;
  font-size: 30px;
  text-align: center;
  color: #b70020 !important;
  background-color: #f2f2f2;
  border: solid 2px #b70020;
  font-family: "Roboto";
}

.back-btn-dim-2 {
  position: absolute;
  left: 2%;
  text-decoration: none;
  margin: 20px 20px 50px 20px;
  padding: 8px 40px;
  border-radius: 20px;
  font-size: 30px;
  text-align: center;
  color: #b70020 !important;
  background-color: #f2f2f2;
  border: solid 2px #b70020;
  font-family: "Roboto";

}

.back-btn-dim:hover {
  cursor: pointer;
  border: solid 2px #323232;
  font-family: "Roboto";
  color: #323232 !important;

}

.back-btn-dim-2:hover {
  cursor: pointer;
  border: solid 2px #323232;
  font-family: "Roboto";
  color: #323232 !important;

}



/* ---------------------------------------- 4: Materials Page ----------------------------------------*/
    

/* -------------------- 4a: Flex --------------------*/

.materials-group-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px 30px;
  gap: 0px;

}

.material-single-flex {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 195px;
  padding: 0px;
  margin: 12px;
  gap: 10px 0px;
  text-align: center;
}


/* -------------------- 4b: Images --------------------*/

.label_item {
  opacity: 1;
}

.label_item img {
  width: 195px;
  height: 213px
}

/* -------------------- 4c: Overlay --------------------*/

.material-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 195px;
  height: 213px;
  background-color: #323232cc;
  backdrop-filter: blur(3px);
  z-index: 5;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
}

.material-overlay:hover {
  opacity: 1;
}

.material-overlay-small {
  font-size: 14px !important;
  color: #ffffff !important;
  padding: 7px 14px;
}

.material-overlay-big {
  font-size: 16px !important;
  color: #ffffff !important;
  padding: 7px 5px;
}


/* -------------------- 4d: Selected/Checked --------------------*/

.radio_item:checked + label > img {
  opacity: 0.3;
}

.radio_item:checked + label {
  border-bottom: solid 2px #b70020;
}

.radio_item + label {
  border-bottom: solid 2px #ffffff;
}



/* ---------------------------------------- 5: Header Bar ----------------------------------------*/
    

/* -------------------- 5a: Grey --------------------*/

.site-header {
    border-bottom: solid 4px #b70020;
    background-color: white;
}

.header-grey-bar {
    height: 35px;
    background-color: #eeeeee;
    display: flex;
    flex-direction: row;
    justify-content: right;
    padding-right: 75px;
    gap: 50px;
    text-align: right;
    align-items: center;
}

.header-grey-bar-list {
    margin: 0px;
    width: 100% !important;
}

.header-grey-bar-items {
    padding: 0px 0px 0px 60px;
    font-family: 'Roboto';
}

.header-grey-bar-list a {
    font-size: 13px;
    color: black !important;
    text-decoration: none;
}

/* -------------------- 5b: White Bar and Logo --------------------*/

.header-logo-bar {
    margin-top: 10px;
    margin-bottom: 5px;
}

.header-logo-bar {
    height: 100px;
    width: calc(100% - 75px);
    margin-top: 10px;
    margin-left: 75px;
    margin-right: 200px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}










.submit-messages > p {

  text-align: left;

  padding: 0px 30px 20px 30px !important;

  color: red !important;

}

.modal-background {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  margin: 0px;

  background-color: #a3a3a349;

  backdrop-filter: blur(3px);

  z-index: 5;

}

.modal-box {

  position: fixed;

  top: 30%;

  left: 30%;

  width: 40%;

  height: 40%;

  background-color: #ffffff;

  z-index: 20;

  font-size: 30px;

  display: flex;

  flex-direction: column;

  align-content: center;

  justify-content: center;

  text-align: center;

  padding: 30px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  border-radius: 25px;

}

.modal-flex {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-items: center;

  text-align: center;

  gap: 30px;

}



.yes-btn {

  margin: 10px 10px 10px 10px;

  padding: 8px 40px;

  border-radius: 20px;

  font-size: 25px;

  text-align: center;

  color: white;

  background-color: #b70020;

  border: solid 2px #b70020;

  font-family: "Roboto";

}



.yes-btn:hover {

  background-color: #323232;

  border: solid 2px #323232;

  cursor: pointer;

}



.no-btn {

  margin: 10px 10px 10px 10px;

  padding: 8px 40px;

  border-radius: 20px;

  font-size: 25px;

  text-align: center;

  color: #b70020;

  background-color: transparent;

  border: solid 2px #b70020;

  font-family: "Roboto";

}

.no-btn:hover {

  color: #323232;

  border: solid 2px #323232;

  cursor: pointer;

}







.background-box-2 {

  background-color: white;
  width: 95%;
  max-width: 1500px;
  padding: 0px 0px 30px 0px;
  margin: auto;
  margin-top: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 25px;

}

.background-box-final {

  background-color: white;

  width: 100%;
  max-width: 1500px;

  padding: 0px 0px 10px 0px;

  margin: auto;

  margin-bottom: 30px;

  border-radius: 25px;

}

h2 {

  font-size: 42px !important;

  padding: 40px 60px 0px 60px;

  font-weight: 500 !important;

  color: #323232 !important;

}

p {

  font-size: 20px !important;

  padding: 0px 60px 10px 60px;

  color: #323232 !important;

}



.radio_item {

  display: none !important;

}

.radio_item-2 {

  display: none !important;

}

.radio_item-3 {

  display: none !important;

}



.label_item-2 img {

  width: 150px;

  height: 110px;

}

.label_item-3 {

  border: solid 1.5px #a3a3a3;

  color: #a3a3a3;

  padding: 10px;

  width: 150px;

  text-align: center;

  margin: 10px;

  background-color: #ffffff;

}

.label_item-4 {

  margin-left: 5px;

}

.quantity {

  display: grid;

  grid-template-columns: 1fr;

  grid-template-rows: 1fr;

  align-content: center;

  justify-items: center;

}

.quantity img {

  max-width: 90%;

  max-height: 300px;

  min-height: 190px;

  align-self: center;

  justify-self: center;

  margin: 20px;

}

.quantitydropdown {

  padding-top: 20px;

  text-align: center;

}

.quantitydropdown select {

  padding: 5px;

  text-align: center;

}



.radio_item-2:checked + label {

  opacity: 0.8;

  filter: brightness(0.5);

}

.dimension-photo-flex {

  display: flex;

  flex-direction: row;

  align-content: center;

  justify-items: center;

  flex-wrap: wrap;

  width: 90%;

}

.dimension-photo-box {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-items: center;

  background-color: #ffffff;

  padding: 50px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  border-radius: 25px;

  height: 322px;

  width: 470px;

  margin: 20px;

}



.dimension-photo {

  border: solid 0 #dcdcdc;

  background: url();

  background-repeat: no-repeat;

  width: 273px;

  height: 322px;

  display: inline-block;

  margin: auto;

  margin: 20px;

}



.dimension-name-flex {

  display: flex;

  flex-direction: row;

  align-content: center;

  justify-content: center;

  width: 100%;

}

.dimension-name-box {

  display: flex;

  flex-direction: column;

  align-items: center;

  background-color: #ffffff;

  padding: 0px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  border-radius: 25px;

  height: 100%;

  width: 40%;

  margin: 20px 0px 10px 0px;

}

.dimension-name-box > input {

  border: none;

  height: 30px;

  font-size: 20px;

  width: 90%;

  margin: 5px 0px;

  text-align: center;

  font-family: "Roboto";

  justify-self: center;

  align-self: center;

}

.dimension-name-box > input:focus {

  outline: none;

}



.delete-box {

  margin: 10px 0px 10px 0px;

}

.standard-radio:after {

  width: 15px;

  height: 15px;

  border-radius: 15px;

  top: -2px;

  left: -1px;

  position: relative;

  background-color: #d1d3d1;

  content: "";

  display: inline-block;

  visibility: visible;

  border: 2px solid white;

  cursor: pointer;

}

.standard-radio:checked:after {

  width: 15px;

  height: 15px;

  border-radius: 15px;

  top: -2px;

  left: -1px;

  position: relative;

  background-color: #b70020;

  content: "";

  display: inline-block;

  visibility: visible;

  border: 2px solid white;

  cursor: pointer;

}

.radio_item-3:checked + label {

  border: solid 1.5px #b70020;

  color: #b70020;

}



.radio_item-3:checked + #hide-this {

  display: none;

}



label {

  cursor: pointer;

}







.bottom-space {

  background-color: none;

  color: none;

  width: 100%;

  height: 100px;

}



.bottom-space-2 {

  background-color: none;

  color: none;

  width: 100%;

  height: 180px;

}



.layout-group-flex {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  align-content: center;

  justify-content: center;

  margin: 30px 30px;

  gap: 80px 30px;

}

.layout-single-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: 1fr 70px;

  gap: 0px 20px;

  padding: 0px;

  align-content: center;

  justify-content: center;

}

.layout-single-grid img {

  padding: 0px;

}

.left {

  grid-row: 1/2;

  grid-column: 1/2;

}

.right {

  grid-row: 1/2;

  grid-column: 2/3;

}

.bottom {

  grid-row: 2/3;

  grid-column: 1/3;

  align-self: center;

  text-align: center;

  padding: 10px;

  margin-top: 30px;

  font-size: 20px;

}

.bottom p{

  font-size: 14px !important;

  padding: 10px 0px;

}

.dimension-btn-flex {

  display: flex;

  flex-direction: row;

  margin: 15px 30px 0px 30px;

  justify-content: center;

}

.dimension-btn {

  border: solid 1.5px #323232;

  color: #323232;

  padding: 10px;

  width: 275px;

  text-align: center;

  margin: 10px;

}

.dimension-btn:hover {

  cursor: pointer;

  border: solid 1.5px #b70020;

  color: #b70020;

}

.submit-page-grid {

  display: flex;

  flex-direction: row-reverse;

  width: 97%;

  margin: 20px;

  padding-bottom: 100px;

}

.submit-background-l {

  width: 50%;

  margin: 10px 30px 0px 30px;

  height: 100%;

  display: flex;

  flex-direction: column;

}

.submit-background-box-l {

  width: 95%;
  max-width: 1500px;

  background-color: white;

  padding: 30px 20px 50px 20px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  border-radius: 25px;

  height: 100%;

}

.submit-background-r {

  display: flex;

  flex-direction: column;

  width: 50%;

}

.submit-background-box-r {

  width: 98%;

  height: 100%;
  max-width: 1500px;

  background-color: white;

  padding: 0px 0px 0px 0px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  border-radius: 25px;

  justify-self: center;

  display: flex;

  flex-direction: column;

  margin: 10px 0px 0px 10px;

  gap: 0px;

}

.add-another {

  color: #b70020;

  text-decoration: none;

  font-size: 20px;

  justify-self: end;

  align-self: end;

  margin: 0px 40px 10px 0px;

}

.add-another:hover {

  color: #323232;

}

.submit-background-box-r img {

  max-width: 90%;

  max-height: 300px;

  align-self: center;

  justify-self: center;

  grid-column: 1/3;

  grid-row: 1/2;

}

.material-log {

  grid-column: 1/2;

  align-self: flex-start;

  font-size: 18px;

  margin: 10px 20px 20px 25px;

}

.room-log {

  grid-column: 1/2;

  grid-row: 1/2;

  align-self: flex-start;

  font-size: 25px;

  margin: 20px 20px 10px 25px;

}

.empty-request {

  text-align: center;

  font-size: 25px;

}

.symbols {

  align-self: flex-end;

  justify-self: end;

  margin: 0px 10px 20px 10px;

  display: flex;

  gap: 20px;

  font-size: 20px;

  color: #b70020;

  width: 140px;

}

.edit-delete-btn {

  gap: 20px;

  font-size: 20px;

  color: #b70020;

  background-color: #ffffff;

  border: none;

  font-family: "Roboto";

  align-self: flex-end;

  justify-self: flex-end;

}

.edit-delete-btn:hover {

  color: #323232;

  cursor: pointer;

}

.add-another-flex {

  display: flex;

  flex-direction: row;

  align-content: flex-end;

  justify-content: flex-end;

  margin-right: 0px;

}

.add-another-btn {

  gap: 20px;

  font-size: 20px;

  color: #b70020;

  background-color: none;

  border: none;

  font-family: "Roboto";

  border: solid 1.5px #b70020;

  padding: 8px 20px;

  border-radius: 12px;

}

.add-another-btn:hover {

  color: #323232;

  cursor: pointer;

  border: solid 1.5px #323232;

}

.submit-h2 {

  font-size: 42px;

  padding: 20px 60px 10px 20px;

  margin-bottom: 10px;

  font-weight: 500;

}

.submit-h2-2 {

  font-size: 42px;

  padding: 30px 60px 10px 40px;

  margin-bottom: 10px;

  font-weight: 500;

}

.submit-p {

  font-size: 20px;

  padding: 0px 60px;

}

#notes {

  font-family: "roboto";

  resize: none;

  background-color: #f2f2f2;

  border: none;

  width: 80%;

  padding: 20px 20px;

  height: 195px;

}



.field {

  font-family: "roboto";

  resize: none;

  background-color: #f2f2f2;

  border: none;

  padding: 10px 15px;

  font-size: 16px;

  width: 85%;

}

.submit-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: 1fr 1fr 1fr 1fr;

  justify-content: start;

  align-content: flex-start;

  padding: 0px 20px;

  grid-gap: 20px 30px;

  margin-left: 10px;

}



.firstname {

  grid-column: 1/2;

  grid-row: 1/2;

}

.lastname {

  grid-column: 2/3;

  grid-row: 1/2;

}

.projectname {

  grid-column: 1/3;

  grid-row: 2/3;

  width: 109%;

}

.phonenumber {

  grid-column: 1/2;

  grid-row: 3/4;

}

.email {

  grid-column: 1/3;

  grid-row: 4/5;

  width: 109%;

}



.submit-grid-2 {

  display: flex;

  justify-content: center;

  align-content: center;

}

.submit-btn {

  width: 450px;

  height: 65px;

  border-radius: 20px;

  padding: 10px;

  font-size: 30px;

  text-align: center;

  color: white;

  background-color: #b70020;

  border: solid 2px #b70020;

  font-family: "Roboto";

  justify-self: flex-end;

  align-self: flex-end;

  margin: 20px 0px 50px 0px;

}



.submit-btn:hover {

  cursor: pointer;

  background-color: #323232;

  border: solid 2px #323232;

  font-family: "Roboto";

}

.submit-btn-sending {

  width: 450px;

  height: 65px;

  border-radius: 20px;

  padding: 10px;

  font-size: 30px;

  text-align: center;

  color: white;

  background-color: #888;

  border: solid 2px #888;

  font-family: "Roboto";

  justify-self: flex-end;

  align-self: flex-end;

  margin: 20px 0px 50px 0px;

}

.submit-btn-cover {

  width: 100%;

  height: 100%;

  background-color: #8d8d8d50;

  position: absolute;

  z-index: 5;

  top: 0;

  left: 0;

  backdrop-filter: blur(5px);

  display: flex;

  justify-content: center;

  align-items: center;

}

.submit-btn-loader {

  border: 16px solid #f3f3f3; /* Light grey */

  border-top: 16px solid #b70020; /* Red */

  border-radius: 50%;

  width: 7%;

  aspect-ratio: 1/1;

  animation: spin 2s linear infinite;

  z-index: 5;

}

@keyframes spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

.new-screen-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: 3fr;

  grid-gap: 0px 20px;

  margin-top: 30px;

}

.screen-grid {

  /* display: grid;

  grid-template-columns: 1fr 2fr;

  grid-template-rows: 3fr;

  grid-gap: 0px 20px;

  margin-top: 30px; */

  grid-column: 1/2;

}

.screen-grid-2 {

  grid-column: 2/3;

  grid-row: 1/2;

  display: grid;

  grid-template-columns: 1fr;

  grid-template-rows: 1fr;

  margin-top: 30px;

  margin-left: 60px;

}

.screen-grid > div {

  margin-left: 60px;

}

.screen-size-grid {

  display: grid;

  grid-template-columns: 60px 60px 60px 60px 60px 60px;

  grid-gap: 10px 30px;

}

.screen-size-grid-L {

  grid-column: 1/2;

}

.screen-size-grid-R {

  grid-column: 2/3;

}

.how-many-screens {

  grid-column: 1/2;

  grid-row: 1/2;

  margin-top: 40px;

}

.what-size-screens {

  grid-column: 1/2;

  grid-row: 2/3;

  font-size: 16px;

}

.what-size-screens > div {

  padding: 5px;

}

.what-type-screens {

  grid-column: 2/3;

  grid-row: 1/3;

  margin-right: 60px;

}



.screen-type-flex {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

}

.single-type {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 20px;

}

.screen-btn-flex {

  display: flex;

  flex-direction: row;

  margin: 15px 0px 40px 60px;

}

.screen-btn {

  border: solid 1.5px #a3a3a3;

  color: #a3a3a3;

  padding: 10px;

  width: 150px;

  text-align: center;

  margin: 10px;

  background-color: #ffffff;

}

.screen-btn:hover {

  border: solid 1.5px #b70020;

  color: #b70020;

  cursor: pointer;

}

.screen-btn-selected {

  border: solid 1.5px #b70020;

  color: #b70020;

  cursor: pointer;

}

.in-screen-grid-p {

  font-size: 20px;

  padding: 0px 0px;

}

.screen-quantity {

  width: 100px;

  margin: 15px 0px 20px 3px;

}

.screen-size-box {

  margin-top: 15px;

}



.final-group-flex {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  align-content: center;

  justify-content: center;

  margin: 30px 30px;

  gap: 100px;

}

.final-single-flex {

  display: flex;

  flex-direction: column;

  width: 250px;

  padding: 0px;

  margin: 10px;

  gap: 0px 0px;

  text-align: center;

}

.final-single-flex img {

  width: 200px;

  height: 200px;

  align-self: center;

}

.red-final-btn {

  margin: 30px 0px 0px 0px;

  padding: 8px 30px;

  border-radius: 20px;

  font-size: 18px;

  text-align: center;

  color: white;

  background-color: #b70020;

  border: solid 2px #b70020;

  font-family: "Roboto";

}

.final-label {

  font-size: 20px;

  margin: 0px;

  padding: 0px;

}



.red-final-btn:hover {

  background-color: #323232;

  border: solid 2px #323232;

  cursor: pointer;

}

.screen-text-box {

  width: 98%;

  background-color: white;

  padding: 0px 0px 0px 0px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  border-radius: 25px;

  justify-self: center;

  display: flex;

  justify-self: center;

  align-self: center;

  flex-direction: column;

  margin: 15px 0px 15px 10px;

  padding: 15px 0px 15px 0px;

  gap: 0px;

}

.empty-text-box {

  width: 90%;

  background-color: white;

  padding: 0px 0px 0px 0px;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  border-radius: 25px;

  justify-self: center;

  display: flex;

  justify-content: center;

  flex-direction: column;

  margin: 15px 0px 15px 35px;

  padding: 15px 0px 15px 0px;

  gap: 0px;

}

.screen-text-box > p {

  font-size: 18px;

  align-self: start;

  padding: 0px 30px 20px 60px;

}

.material-symbol-flex {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

}

/* __________________________________________DIMENSIONS__________________________________________ */



/* _______________________________________________________________________________________________Right Alcove____________________________________________________________________________________ */



.alRightdepth1 {

  top: 43%;

  left: 428px;

}

.alRighttopwidth1 {

  top: 5px;

  left: 43%;

}

.RAoneUnitSpacer1alRight1 {

  top: 310px;

  left: 285px;

}

#RAoneUnitImageToSwap1alRight1 {

  top: 215px;

  left: 295px;

  width: 75px;

}



/* _______________________________________________________________________________________________Left Alcove____________________________________________________________________________________ */



.alLeftdepth1 {

  top: 43%;

  left: 10px;

}

.alLefttopwidth1 {

  top: 5px;

  left: 48%;

}

.LAoneUnitSpacer1alLeft1 {

  top: 310px;

  left: 115px;

}

#LAoneUnitImageToSwap1alLeft1 {

  top: 215px;

  left: 131px;

  width: 75px;

}



/* __________________________________________MEDIA_______________________________________________ */



@media screen and (max-width: 1150px) {

  .dimension-name-box {

    width: 55%;

  }

  .submit-h2 {

    font-size: 42px;

    padding: 0px 0px 10px 25px;

    margin-bottom: 10px;

    margin-top: 30px;

    font-weight: 500;

  }

  .submit-h2-2 {

    font-size: 42px;

    padding: 30px 0px 10px 40px;

    margin-bottom: 10px;

    font-weight: 500;

  }

  .submit-page-grid {

    display: flex;

    flex-direction: column-reverse;

    width: 100%;

    margin: 0px;

    justify-content: center;

    align-content: center;

  }

  .submit-background-l {

    width: 93%;

    align-self: center;

    justify-self: center;

  }

  .submit-background-box-l {

    width: 100%;

    max-width: 1500px;

    background-color: white;

    padding: 0px 0px 50px 0px;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    border-radius: 25px;

    align-self: center;

    justify-self: center;

  }

  .submit-background-r {

    display: flex;

    flex-direction: column;

    width: 100%;

    align-items: center;

    justify-items: center;

    align-self: center;

  }

  .submit-background-box-r {

    width: 100%;

    max-width: 1500px;

    height: 100%;

    background-color: white;

    padding: 0px 0px 0px 0px;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    border-radius: 25px;

    justify-self: center;

    align-self: center;

    display: flex;

    flex-direction: column;

    margin: 15px 0px 15px 0px;

    gap: 0px;

  }

  .delete-box {

    margin: 10px 0px 10px 0px;

    justify-self: center;

    align-self: center;

    width: 93%;

  }

  .add-another-flex {

    align-content: center;

    justify-content: center;

    margin: 30px 0px 10px 0px;

  }

  .submit-h2-2 {

    font-size: 42px;

    padding: 30px 0px 0px 0px;

    margin-bottom: 0px;

    margin-top: 20px;

    font-weight: 500;

  }

  .submit-grid {

    display: grid;

    grid-template-columns: 1fr;

    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;

    justify-content: start;

    align-content: flex-start;

    padding: 0px 20px;

    grid-gap: 20px 0px;

    margin-left: 10px;

  }

  .submit-photo-flex {

    display: flex;

    flex-direction: row;

    align-content: center;

    justify-content: center;

    width: 100%;

    overflow: auto;

  }

  .submit-photo-box {

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: #ffffff;

    padding: 0px;

    border-radius: 25px;

    height: 350px;

    margin: 20px 0px;

    width: 500px;

    overflow: auto;

  }



  .submit-photo {

    background: url() no-repeat;

    background-repeat: no-repeat;

    height: 100%;

    display: inline;

    margin: auto;

    padding: 0px;

    overflow: visible;

    overflow-y: hidden;

  }



  .firstname {

    grid-column: 1/2;

    grid-row: 1/2;

    width: 80%;

  }

  .lastname {

    grid-column: 1/2;

    grid-row: 2/3;

    width: 80%;

  }

  .projectname {

    grid-column: 1/2;

    grid-row: 3/4;

    width: 100%;

  }

  .phonenumber {

    grid-column: 1/2;

    grid-row: 4/5;

    width: 60%;

  }

  .email {

    grid-column: 1/2;

    grid-row: 6/7;

    width: 100%;

  }

  .zipcode {

    grid-column: 1/2;

    grid-row: 5/6;

    width: 60%;

  }

  .submit-btn {

    justify-self: center;

    align-self: center;

    width: 340px;

    font-size: 25px;

    margin: 20px 0px;

  }

}

@media screen and (max-width: 750px) {

  .quantity img {

    max-width: 90%;

    max-height: 200px;

    min-height: 150px;

    align-self: center;

    justify-self: center;

  }

  .dimension-name-box {

    width: 86%;

  }

  .dimension-name-box > input {

    font-size: 18px;

  }

  .background-box {

    width: 95%;
    max-width: 1500px;

  }

  .background-box-2 {

    width: 95%;
    max-width: 1500px;

  }

  .section-btns {

    margin: 0px 20px 0px 20px;

  }

  .section-btn {

    display: none;

  }

  .section-btn-mobile {

    display: inline;

    border: 2px solid #b70020;

    background-color: #f2f2f2;

    width: 20px;

    height: 20px;

    text-align: center;

    margin: 10px;

    padding: 10px;

    border-radius: 50%;

    color: #b70020 !important;

    align-self: center;

    justify-self: center;

    text-decoration: none;

  }



  .selected {

    border: 2px solid #b70020;

    background-color: #b70020;

    color: #ffffff !important;

  }

  .hover:hover {

    cursor: pointer;

  }

  .label_item img {

    width: 150px;

    height: 170px;

  }



  .material-single-flex {

    display: flex;

    flex-direction: column;

    width: 150px;

    padding: 0px;

    margin: 0px;

    gap: 10px 0px;

    text-align: center;

  }

  .next-btn {

    position: relative;

    right: 0%;

    margin: 15px 2.5% 50px 10px;

  }

  .back-btn {

    position: relative;

    left: 0%;

    margin: 15px 10px 50px 2.5%;

  }



  .next-btn-dim {

    position: relative;

    right: 0%;

    margin: 160px 10px 50px 10px;

  }

  .back-btn-dim {

    position: relative;

    left: 0%;

    margin: 160px 10px 50px 10px;

  }

  .dimension-btn-flex {

    display: flex;

    flex-direction: column;

    margin: 10px 30px 0px 30px;

    justify-self: center;

    align-self: center;

  }

  .dimension-btn {

    justify-self: center;

    align-self: center;

  }

  .materials-group-flex {

    margin: 30px 10px;

    gap: 30px;

  }



  h2 {

    font-size: 42px;

    padding: 60px 30px 10px 30px;

    margin-bottom: 10px;

  }



  .screen-text-box {

    width: 95%;

    height: 50%;

    background-color: white;

    padding: 0px 0px 0px 0px;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    border-radius: 25px;

    justify-self: center;

    display: flex;

    justify-content: center;

    flex-direction: column;

    margin: 15px 0px 15px 0px;

    gap: 0px;

  }

  p {

    font-size: 20px;

    padding: 0px 30px;

  }

  .layout-group-flex {

    gap: 70px 30px;

  }

  .layout-single-grid {

    gap: 20px 40px;

  }

  .screen-btn-flex {

    margin: 30px 0px 40px 20px;

  }

  .screen-grid {

    display: grid;

    grid-template-columns: 1fr;

    grid-template-rows: 0.1fr 0.1fr 3fr;

    grid-gap: 40px;

    margin-top: 30px;

  }

  .how-many-screens {

    grid-column: 1/2;

    grid-row: 1/2;

    margin-right: 60px;

  }

  .what-size-screens {

    grid-column: 1/2;

    grid-row: 2/3;

    font-size: 16px;

    margin-right: 60px;

  }

  .what-type-screens {

    grid-column: 1/2;

    grid-row: 3/4;

    margin-right: 60px;

  }

  .screen-quantity {

    width: 100px;

    margin: 20px 0px 0px 3px;

  }

  .single-type {

    margin: 20px 19px 20px 0px;

  }

}