/* ppqstyle.css */

:root {
  --blue: #0000FF;
  --white: #ffffff; 
  --grey: #AAA;
  --darkblue: #448;
  --currcolor:#00FF00; 
  --edgediv:4%;
  --blankdiv:12%;
  --overlayheight:90%;
  --overlaybrightness:1;
  --overlaycontrast:1;
  --qpscale:.5;
/*  --stdfontsize:calc(14px+2vw);  */
  --stdfontsize:8px+1.0vh;
  --optionsfontsize:18px;
  --imagedivwidth:400px;
  --imagescale:1;
  --draghandlebottomrightopacity:1;
  --draghandlebottomleftopacity:1;
  --draghandleupperrightopacity:1;
  --draghandleupperleftopacity:1;
  --questiondivisionwidth:12%;
  --selectionsdivisionwidth:12%;
  --optionsdivisionwidth:12%;
  --controlsdivisionwidth:20%;
  --optionsdivisionheight:90vh;
  --loginwidth:33%;
  --loginleft:33%;
  --loginright:33%;
  --logintop:25%;
  --milestoneswidth:60%;
  --indextableswidth:60%;
  --buttonopacity:0.5;
  --leftupdpadding:15vw;
  --rightupdpadding:25vw;
  --noteswidth:35vw;  
  --updtableleftwidth:30%;
  --mainheadermargin:23vw;
  --mainheadervisibility:hidden;
  --searchheadervisibility:hidden;
  --menulocation:21vw;
  --menulocation2:0vw;
}

.centered {
  text-align:center;
}

.header-row-emb {
   display: flex;
   margin: 0 auto;
   width: 97%;
   padding: 0px;
   }


#upper_left {

/*
width: 200px; height: 200px;
position: absolute;
top: 1%; left: 1%;
background-image: url("./images/yourcompanylogo.png");
background-repeat: no-repeat;
background-size: 80%;
font-size: 1.6vw;
*/

/*
position: absolute;
top: 0%; left: 0%;
width: 24px;  height: 80vh;
background-image: url("./images/LeftEdgeBlue.png");
background-repeat: no-repeat;
background-size: 100%;
*/

}

#upper_right {
position: absolute;


top: 2%; right: 1%;
width: 180px; height: 100px; 
background-image: url("./images/CPQuick2.png");  


/*
top: 0%; right: 0%;
width: 204px;  height: 80vh;
background-image: url("./images/CPQuick3.png");
*/

background-repeat: no-repeat;
background-size: 100%;
}

#lower_right {
width: 180px; height: 38px;
position: absolute;
bottom: 1%; right: 1%;
background-image: url("./images/Powered-By-AWS.png");
background-repeat: no-repeat;
background-size: 100%;
}

#lower_left {
width: 180px; height: 38px;
position: absolute;
bottom: 0%; left: 1%;
background-image: url("./images/Powered-By-AWS.png");
background-repeat: no-repeat;
background-size: 100%;
}

.pupconfig-row{
  display: fixed;
  justify-content: left;
  text-align:left;
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: var(--stdfontsize);
  width: 100%;
}

.Questions {
  float: left;
  width: var(--questiondivisionwidth);
  padding: 4px;
  text-align:left;
  vertical-align:top;
  border-style: single;
  cursor: pointer;
  justify-content:left;
}
.OptionsSelected {
  float: left;
  width: var(--selectionsdivisionwidth);
  padding: 4px;
  text-align:left;
  justify-content:left;
  vertical-align:top;
  border-style: single;
  cursor: pointer;
}
.OptionsToSelect {
  font-size: var(--optionsfontsize);
  float: left;
  height: var(--optionsdivisionheight);
  overflow:auto;
  width: var(--optionsdivisionwidth);
  padding: 4px;
  text-align:left;
  justify-content:left;
  vertical-align:top;
  border-style: single;
  cursor: pointer;
 -moz-user-select: -moz-none;
 -khtml-user-select: none;
 -webkit-user-select: none;
}
.Controls {
  float: left;
  width: var(--controlsdivisionwidth);
  padding: 4px;
  text-align:left;
  justify-content:left;
  vertical-align:top;
  border-style: single;
}

.Modal {
  display: none;
  position: fixed; 
  padding-top: 30px;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%; 
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.ResultsModalContent {
  position: relative; 
  background-color: white;
  margin: auto; 
  width: 75%; 
  height: 75%; 
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 1.4s;
  animation-name: animatetop;
  animation-duration: 1.4s

  padding: 4px;
  text-align:left;
  justify-content:left;
  vertical-align:top;
  border-style: single;
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: var(--stdfontsize);
}

.Results {
  float: left;
  width: 100%;
  padding: 4px;
  text-align:left;
  justify-content:left;
  vertical-align:top;
  border-style: single;
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: var(--stdfontsize);
}
.EdgeSpace {
  float: left;
  width: var(--edgediv);
  padding: 4px;
  text-align:left;
  justify-content:left;
  vertical-align:top;
  border-style: single;
}
.ResultSpace {
  float: left;
  width: var(--blankdiv);
  padding: 4px;
  text-align:left;
  justify-content:left;
  vertical-align:top;
  border-style: single;
}
.Image {
  float: left;
  width: var(--imagedivwidth);
  padding: 4px;
  text-align:center;
  vertical-align:top;
  border-style: single;
  -moz-transform:scale(var(--imagescale));
  -webkit-transform:scale(var(--imagescale));
  transform:scale(var(--imagescale));
  transform-origin:top left;
  justify-content:left;
}

.OverlayContent {
  position: relative; 
  background-color: white;
  padding: 10px;
  margin: auto; 
  width: 90%; 
  height: var(--overlayheight);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 1.4s;
  animation-name: animatetop;
  animation-duration: 1.4s
}

.CustomersModalContent {
  position: relative; 
  background-color: white;
  padding: 10px;
  margin: auto; 
  width: 50%; 
  height: 90%;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 1.4s;
  animation-name: animatetop;
  animation-duration: 1.4s
}

.CustomerTop {
  float: left; 
  width: 100%;
  height: 5%;  
  padding: 0px;
  text-align:left;
  justify-content:left;
  vertical-align:top;
  border-style: single;
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: var(--stdfontsize);
}
.CustAddrList {
  height: 60%;
  overflow:auto;
  width: 95%;
  padding: 0px;
  text-align:left;
  justify-content:left;
<!--  vertical-align:top; -->
  border-style: single;
  cursor: pointer;
}
.CustAddrEntry {
  float: left;
  padding: 4px;
  text-align:left;
  justify-content:left;
  vertical-align:top;
  border-style: single;
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: var(--stdfontsize);
}

.greyscale {filter: opacity(0.75) drop-shadow(0 0 0 var(--currcolor)); } 

table { padding-left : 10px; }

td {
  text-align:left; 
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: var(--stdfontsize);
  padding-right : 20px;
}

th {
  text-align:left; 
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: var(--stdfontsize);
  padding-right : 30px;
}

.ControlButton {
  cursor: pointer;
}

.GuidedSellingButton {
  cursor: pointer;
  text-align:center; 
  justify-content:center;
  width:14vw;
  border-radius:2em;
  box-sizing: border-box;
  padding:0.3em 1.2em;
  margin:0 0.3em 0.3em 0;
  text-decoration:none;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  color:#FFFFFF;
  background-color:#3085b6;
  text-align:center;
  transition: all 0.2s;
}
.GuidedSellingButton:hover{
  background-color:#4eb5f1;
  background-color:#4095c6;
}


.CreateButton {
  padding-left : 20px;
  padding-right : 20px;
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: 16px;
  cursor: pointer;
}

.CustAddrButton {
  padding-left : 0x;
  padding-right : 0px;
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: var(--stdfontsize);
  border-style: none;
  cursor: pointer;
  background-color:#FFFFFF;
}

.ChooseImageButton {
  text-align:center; 
  font-size: 18px;
  cursor: pointer;
 -moz-user-select: -moz-none;
 -khtml-user-select: none;
 -webkit-user-select: none;
}

.ChooseImageButton  a {
  color: #FF0000;
}

.ChooseImageButton  a:hover {
  color: #AAAAAA;
}


.SelectedOverlayImage {
  z-index: -1;
}

.greyscaleoverlay {
   filter: opacity(0.75) drop-shadow(0 0 0 var(--currcolor)) brightness(var(--overlaybrightness)) contrast(var(--overlaycontrast)); 
} 

.normaloverlay {
      filter: brightness(var(--overlaybrightness)) contrast(var(--overlaycontrast));
      cursor: pointer;
}

.normalimage {
      filter: brightness(var(--overlaybrightness)) contrast(var(--overlaycontrast));
}

.draghandlebottomright {
      filter: opacity(var(--draghandlebottomrightopacity));
}

.draghandlebottomleft {
      filter: opacity(var(--draghandlebottomleftopacity));
}

.draghandleupperright {
      filter: opacity(var(--draghandleupperrightopacity));
}

.draghandleupperleft {
      filter: opacity(var(--draghandleupperleftopacity));
}

.ImageDownloadContent {
  position: relative; 
  background-color: white;
  padding: 0px;
  margin: auto; 
  width: 100%; 
  height: 95%;
  overflow:auto;
}

.QuickPickContent {
  position: relative; 
  background-color: white;
  padding: 0px;
  margin: auto; 
  width: 98%; 
  height: 95%;
  overflow:auto;
}

.QuickPickLabel {
  cursor: pointer;
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: 18px;
  font-style: bold;
  text-align: center;
  cursor: pointer;
  -moz-transform:scale(var(--qpscale));
  -webkit-transform:scale(var(--qpscale));
  transform:scale(var(--qpscale));
}

.QuickPickImage {
  cursor: pointer;
  -moz-transform:scale(var(--qpscale));
  -webkit-transform:scale(var(--qpscale));
  transform:scale(var(--qpscale));
  transform-origin:top left;
}

.QuickPickImageGS {
  cursor: pointer;
  filter: opacity(0.75) drop-shadow(0 0 0 var(--currcolor)) ;
  -moz-transform:scale(var(--qpscale));
  -webkit-transform:scale(var(--qpscale));
  transform:scale(var(--qpscale));
  transform-origin:top left;

}

.iframearea {
  display: block;
  width: 100%;  /* RESPONSIVE WIDTH */
  max-width: 400px;
  height: 300px;
  overflow: auto;  /* EDIT TO hidden FOR NO SCROLLBAR */
  border: #999999 1px solid;
  margin: 0px;
  padding: 0px;
  }

.Maintain1 {
  float: left;
  width: var(--selectionsdivisionwidth);
  padding: 4px;
  text-align:left;
  justify-content:left;
  vertical-align:top;
  border-style: single;
  cursor: pointer;
}
.MaintainInput{
  height: 75vh;
  width: 95vw;
  font-family:  Consolas,Droid Sans Mono, Courier New,sans-serif; 
  font-size: 16px;
}

.tab-row {
<!--  height: 5vw;  -->
}

.TabButton {
  cursor: pointer;
  background-image: url("./TabBack.png");
  border:none;
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: 18px;
}

.TabButtonActive {
  cursor: pointer;
  background-image: url("./TabBackBlue.png");
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: 18px;
  border:none;
}

.TabButtonChanged {
  cursor: pointer;
  background-image: url("./TabBackRed.png");
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: 18px;
  border:none;
}

.TabButtonChangedActive {
  cursor: pointer;
  background-image: url("./TabBackRedBlue.png");
  font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
  font-size: 18px;
  border:none;
}

.TabButton:hover {
  background-image: url("./TabBackGrey.png");
//  background-color: #777; 
}


.arrow1 {
  animation: slide1 1s ease-in-out infinite;
}

@keyframes slide1 {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, 10px);
  }
}


/* html:before, html:after {   */

/*
html:before {
    content: "";
    position: fixed;
    background: var(--darkblue);
    left: 0;
    right: 0;
    height: 18px;
}
*/

html:before {
    top: 0;
}
html:after {
    bottom: 0;
}
/*
html {	
    border-left: 12px solid var(--grey);
    border-right: 12px solid var(--grey);  
}
*/



body {font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; }
/*
form {border: 3px solid #f1f1f1;}
*/

/* input[type=text], input[type=password], input[type=select] { */
inputXXX  {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 24px;
}

select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #046DAA;
  border-radius: 10vw;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: calc(20px + 0.1vh);
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
/*  margin: 24px 0 12px 0;  */

  margin: 1.0vh 0 0.5vh 0;

}

img.avatar {
  width: 40%;
  border-radius: 10%;
}

.container {
  padding: 16px;
}

.container2 {
  padding: 16px;
  font-size: calc(14px + 0.5vh);
}

.contfield {
  font-size: calc(8px + 0.5vh);
  width: 98%; 
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
/*  font-size: 24px;  */
}

span.psw {
  float: right;
  padding-top: 16px;
}

span.new {
  float: left;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  span.new {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

.search-header-row {
   display: flex; 
   margin-left: var(--mainheadermargin); 
   width: 50%;
/*   padding-top: 5vh; */
   padding-bottom: 3vh;  
        font-size: calc(24px + 0.6vh);

}

.search-header-row > div {
        margin: auto;
/*        text-align: center;  */
        padding: 0px;
        font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
	font-style: bold;
        font-size: calc(24px + 0.6vh);
 }


.index-header-row {
   visibility: var(--mainheadervisibility);
   display: flex; 
/*   margin: 0 auto;   */
   margin-left: var(--mainheadermargin);
   width: 50%;
   padding-top: 5vh;
/*   padding-bottom: 3vh; */
/*   height:20vh; */

}

.index-header-row > div {
        margin: auto;
/*        text-align: center;  */
        padding: 0px;
        font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
	font-style: bold;
        font-size: calc(24px + 0.6vh);
 }



.header-row {
   display: flex;
   margin: 0 auto;
   width: 97%;
   padding-top: 10vh;
   height:60px;
   }

.header-row > div {
        margin: auto;
        text-align: center;
        padding: 0px;
        font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
	font-style: bold;
        font-size: calc(24px + 0.6vh);
 }
 
.sub-header-row {
  display: flex;
  margin:auto;
  width: var(--loginwidth);

}

.sub-header-row > div {
        margin: auto;
        text-align: center;
        padding: 10px;
        font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
	font-style: bold;
        font-size: calc(14px + 0.6vh);
 }


.login {
  display: flex;
  margin:auto;
  width: var(--loginwidth);
  padding: 3vh;
  text-align:left;
  vertical-align:middle;
  border-style: none;
  position: absolute;
  top: var(--logintop);
  left: var(--loginleft);
  right: var(--loginright);
  font-size: calc(20px + 0.1vh);
}

.milestones-form {
    display: flex;
    justify-content: center;
    font-size: calc(20px + 0.1vh);
}

.milestones-container {
    display: flex;
    flex-wrap: wrap;
    padding: 16px;
}

.milestones-item {

    margin-right: 2vw;
  }


.milestones {
    resize: none;
  }

.label {
    display: block;
    text-align: center;
    margin-bottom: 5px;
}

.offer-container { 
/*  padding: 16px; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


.addoffer {
  display: flex;
  margin:0 auto;
  width: var(--loginwidth);
  padding: 0vh;
  text-align:left;
/*  vertical-align:middle; */
  border-style: none;
/*  position: absolute; */
  top: var(--logintop);
  left: var(--loginleft);
  right: var(--loginright);
  font-size: calc(20px + 0.1vh);
}

.offer-left-group,
.offer-right-group {
  flex: 1 1 45%;
}

.addoffer-header-row {
   display: flex;
   margin: 0;
   width: 97%;
   padding-top: 5vh;
}

.addoffer-header-row > div {
        margin: auto;
        text-align: center;
        padding-bottom: 5vh;
        font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
	font-style: bold;
        font-size: calc(24px + 0.6vh);
 }

.addprop {
  display: flex;
  margin:auto;
  width: var(--loginwidth);
  padding: 0vh;
  text-align:left;
  vertical-align:middle;
  border-style: none;
  position: absolute;
  top: var(--logintop);
  left: var(--loginleft);
  right: var(--loginright);
  font-size: calc(20px + 0.1vh);
}

.addprop-header-row {
   display: flex;
   margin: 0 auto;
   width: 97%;
   padding-top: 5vh;
/*   height:20vh; */
   }

.addprop-header-row > div {
        margin: auto;
        text-align: center;
        padding: 0px;
        font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
	font-style: bold;
        font-size: calc(24px + 0.6vh);
 }

.index-sub-header-row {
/*  display: flex; */
  margin:20px;
  width: var(--loginwidth);

}

.table-spacer-row {
  margin: 8vh;
}

	
.index-sub-header-row > div {
        margin: auto;
        text-align: left;
        padding-left: 10vw;
        font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
	font-style: bold;
        font-size: calc(16px + 0.6vh);
	height: 10vh;
 }

.offers-sub-header-row {
  margin:20px;
  width: var(--loginwidth);
}

.offers-table-header {
  height: 10vh;
}

.offers-table-left >th:first-child {
  width: 30vw;
}

#offers-table th:first-child {
  width: 500px; /* Set the desired width here */
}

.listingstable {
    border-collapse: collapse;
    width: var(--indextableswidth); 
    margin-left: auto;
    margin-right: 0;

  }

.listingstable th {
    text-align: right; 
    white-space: nowrap;
    padding-right: 10px;
}


.rotate {
    transform: rotate(-40deg);
    max-width: 2em;
    padding: 0px;
    font-size: calc(6px + 0.4vw);
}

.rotateoffer {
    transform: rotate(-45deg);
    max-width: 9em;
    padding: 0px;
    font-size: calc(6px + 0.4vw);
}

.listingstable td {
    padding: 0px;
    width: 10px;
}

.table-wrapper {
    display: flex;
    flex-direction: column;
    align-items: left;
    margin-left: 5vw;
}
  
.table-wrapper table {
    margin-left: 0;
    margin-right: auto;
    align-items: left;
    padding: 0px;
    width: 10px;
}

.table-wrapper th {
    text-align: right; 
    white-space: nowrap;
    padding-right: 0.8vw;
}

.table-wrapper td {
    padding: 0px;
}

.tablespacer {
	height: 10vh;
}

.table-label {
    writing-mode: horizontal-lr;  
    text-align: left;
    margin-right: 10px;
    font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
    font-style: bold;
    font-size: calc(16px + 0.6vh);
}
  
.update-container {
    padding-left:var(--leftupdpadding);
    padding-right:var(--rightupdpadding);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 20px;
    font-family:  Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
    font-size: var(--stdfontsize);
}
    
.h2 {
    font-size: calc(16px + 0.6vh);
}

.h3 {
   font-size: var(--stdfontsize);  
}

.h4 {
   font-size: var(--stdfontsize);  
   hidden:true;
}

 .update-tbl-left {
      width: var(--updtableleftwidth);

}

 .update-text-elements {
      display: flex;
      flex-direction: column;
}
    
 .update-textarea {
      width: var(--noteswidth);
      height: 5vw;
      margin-top: 10px;
 }

 .update-forwarding {
      width: var(--noteswidth);
      height: 3vw;
      margin-top: 10px;
 }
    
 .update-milestones {
      display: flex;
      flex-direction: column;
	 padding-left: 2vw;
     /* width: 40vw;  */
}

.update-milestone input[type="checkbox"] {
      margin-right: 5px;
    
 }
    
 .update-milestone-item {
      display: flex;
      align-items: left;
      margin-bottom: 5px;
      width: 30vw;

 }
    
.update-milestone-item input[type="checkbox"] {
      margin-right: 5px;
 }


  .invisible-form {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }

.custom-input {
    border: none;
    background-color: transparent;
    padding: 2px;
    font-size: var(--stdfontsize);
    cursor: text;
  }

.disabled {
    opacity: var(--buttonopacity) ;
    cursor: not-allowed;
}

.offer-form {
	margin: 0px;
	padding: 0px;

}


.navbar {
/*  background-color: #333;
  color: #fff; */
/*  padding: 10px;  */
  display: flex;
  align-items: center;
  margin-left: 18vw;
}

.adspace {
  position: absolute;
  top: 10vh;
  left: 0.3vw;
  align-items: left;
  width: 250px;       /* Width of the box */
  height: 20vh;      /* Height of the box */
  border: 1px dashed black; /* Border thickness and color */
  margin: 0px;       /* Optional: space around the box */

}

.tobepaid {
  position: absolute;
  top: 2vh;
  right: 2vw;
}

.potential {
  position: absolute;
  top: 5vh;
  right: 2vw;

}

.hamburger {
  font-size: calc(24px + 2vh);
  cursor: pointer;
  margin-right: 10px;
  position: relative; 
  left: var(--menulocation2);


/*  padding: 5px; */
  background-color: transparent;
}

.menu {
  display: none;
  position: absolute;
  left: var(--menulocation);
  height: 0px;
/*  background-color: #333;  */
}

.menu a {
  color: #000; 
  display: block;
  padding: 3px; 
  text-decoration: none;
}

.menu a:hover {
 background-color: #BBB;  
color: #fff;
}

.eyeball {
  font-family: "Arial Unicode MS", sans-serif;
  margin-left: -30px; 
  cursor: pointer;
}

.rptmenu {
  display: block;
/*  position: absolute;
  left: 21vw; 
  height: 0px; */
/*  background-color: #333;  */
}

.rptmenu a {
  color: #000; 
  display: block;
  padding: 3px; 
  text-decoration: none;
}

.rptmenu a:hover {
 background-color: #BBB;  
color: #fff;
}