.marketing-cash-amount {
  width: 100%;
  text-align: center;
  color: #404040;
}

  /*-------------------------- choose_ad_type.html --------------------------*/

.menu-options-container {
  margin: auto;
  margin-top: 75px;
  width: 50%;
}

.menu-options-container h1 {
  font-family: Google Sans,Roboto,Arial,sans-serif;
  line-height: 1.75rem;
  font-size: 1.6rem;
  letter-spacing: 0;
  font-weight: 400;
  color: #202124;
  text-align: center;
  margin-bottom: 50px;
}

.menu-options-container button {
  font-family: Google Sans,Roboto,Arial,sans-serif;
  width: 100%;
  margin: 0 0 25px 0;
  background-color: transparent;
  border: 2px solid #dadce0;
  border-radius: 4px;
  color: #202124;
  padding: 25px 0px 25px 15px;
  font-size: 16px;
  font-weight: 400;
  opacity: 0.9;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  display: block;
  text-align: left;
}

.menu-options-container button:hover {
  background-color: #eee;
}

  /*------------------------ ad_approval.html -----------------------------*/

#approve-btn {
  padding: 10px 34px;
  border: 1px solid green;
  border-radius: 3px;
  font-family: sans-serif;
  margin: 8px 0 0 0;
  background-color: green;
  color: white;
  font-size: 16px;
}

#disapprove-btn {
  padding: 10px 34px;
  border: 1px solid red;
  border-radius: 3px;
  font-family: sans-serif;
  margin: 8px 0 0 0;
  background-color: #d10000;
  color: white;
  font-size: 16px;
}

#approve-btn:hover {
  background-color: darkgreen;
}

#disapprove-btn:hover {
  background-color: darkred;
}


/*------------ analytics.html, ad_analytics.html, refund_details.html -----------------*/

.canvas-holder {
  display: inline-block;
  width: 45%;
  margin-top: 50px;
}

.data-canvas {
  display: inline-block;
  width: 100%;
}

#data-container {
  width: 95%;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 100px;
  padding: 0 0 30px 0;
  text-align: center;
   font-family: Google Sans,Roboto,Arial,sans-serif;
/*   background-color: red;*/
}

#data-title {
  width: 100%;
}

#data-title h1 {
  font-size: 24px;
  font-weight: 500;
  color: #6c6c6c;
  text-align: center;
}

.data-holder {
  width: 20%;
/*  height: 50px;*/

  display: inline-block;
  border-radius: 10px;
  box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.2);
  background-color: white;
  padding: 0 0 10px 0;
  margin: 20px 0 0 30px;
  vertical-align: top;
}

.data-subject {
  width: 85%;
  height: 30px;
  margin: auto;
  margin-top: 15px;
}

.data-subject p {
  margin: 0;
  padding: 0;
  float: left;
  color: #868686;
}

.data-subject span {
  cursor: pointer;
}

#data {
  width: 85%;
  height: 30px;
  margin: auto;
  word-break: break-word;
}

#data p {
  margin: 0;
  padding: 0;
  float: left;
  color: #595959;
  font-weight: 600;
  font-size: 17px;
}

div#reason {
  height: 200px;
  width: 40%;
  display: block;
}

div#reason p {
  margin: 10px 0 0 0;
}

/*---------------------------- ad_checkout.html ---------------------------------*/

.checkout-container {
  width: 85%;
  background-color: white;
  border: 1px solid #eee;
  margin: auto;
  margin-top: 120px;
  margin-bottom: 50px;
  padding: 0px 32px 30px 38px;
  border-radius: 4px;
  box-shadow: 2px 3px 6px 1px rgba(0,0,0,0.2);
  overflow: hidden;
  z-index: 1;
}

.checkout-container.ppc {
  margin-bottom: 150px;
}

.checkout-ad-holder {
  float: right;
  width: 50%;
  margin-top: 40px;
}

.checkout-ad-holder video {
  height: 270px;
  width: 100%;
  object-fit: contain;
  background-color: black;
}

#checkout-ad-title h1 {
  font-family: sans-serif;
  font-size: 24px;
  padding: 0;
  font-weight: normal;
  margin: 8px 0 0 0;
}

#checkout-ad-date p {
  font-family: sans-serif;
  padding: 0;
  font-weight: normal;
  margin: 8px 0 0 0;
  font-size: 15px;
}

.checkout-pay-holder {
  width: 45%;
  margin-top: 40px;
}

/*.checkout-pay-holder.video-ad {
  width: 45%;
}

.checkout-pay-holder.ppc-ad {
  width: 45%;
}*/

#checkout-ad-cost {
  margin: 0;
  padding: 0;
}

#checkout-ad-cost h1 {
  font-family: sans-serif;
  font-size: 23px;
  font-weight: normal;
  text-align: center;
}

#checkout-ad-cost hr {
  margin: 0;
  padding: 0;
}

#paypal-btns {
  width: 100%;
  margin-top: 20px;
}

.pay-with-credit-container {
  width: 100%;
}

.pay-with-credit-btn {
  font-family: sans-serif;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(to bottom, #f0f0f0, #dcdcdc);
  color: #333;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  margin: 20px 0 0 0;
}

.pay-with-credit-btn:hover {
  background: linear-gradient(to bottom, #e0e0e0, #c8c8c8);
  transform: translateY(-1px);
}

.pay-with-credit-btn:active {
  background: linear-gradient(to bottom, #c8c8c8, #b0b0b0);
  transform: translateY(0);
}


.checkout-ad-cost {
  font-family: sans-serif;
  width: 100%;
  text-align: center;
  padding: 20px;
/*  background: #f9f9f9;*/
  border-radius: 10px;
/*  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/
  margin-bottom: 20px;
}

.checkout-ad-cost h1 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.total-cash-credit {
  font-size: 16px;
  font-weight: 500;
  color: #666;
}

.apply-credit {
  font-size: 15px;
  font-weight: 600;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 5px;
  color: #444;
}

.credit-input {
  padding: 10px;
  font-size: 16px;
  width: 120px;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  background-color: #fff;
}

/*hr {
  margin-top: 25px;
  border: none;
  border-top: 1px solid #e0e0e0;
}*/



  /*--------------------- universal form page styling  ----------------------*/


/*used for both form & form2*/
#form-submit {
   font-size: 31px;
   cursor: pointer;
   color: #333333;
   margin-top: 12px;
}

#form-btn-submit {
  background: transparent;
  border: none;
  padding: 0 0 0 1px;
  margin: 0;
  overflow: visible;
/*  margin-top: 12px;*/
}
/*---*/

.form-container {
  width: 40%;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 15px 35px 50px 35px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background-color: white;
  font-family: Google Sans,Roboto,Arial,sans-serif;
  font-size: 1.0em;
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 6px 6px 0px rgba(0,0,0.1,0.2);
}

.form-container hr {
  margin: 0;
}

.form-container span#error {
  color: #bc0000;
}

.form-container p#file-size-msg {
  color: #484040;
  margin-bottom: 26px;
}

.form-container p#form-footnote {
  font-family: sans-serif;
  font-size: 1em;
  font-weight: normal;
  margin-top: 10px;
  text-align: center;
}

.form-container p#cost-calculator {
  font-family: sans-serif;
  font-size: 17px;
  font-weight: normal;
  margin-top: 30px;
  margin-bottom: 24px;
}

.form-container label.file {
  position: relative;
  display: block;
  width: 20%;
  font-size: 60%;
  text-align: center;
  text-transform: uppercase;
  border: 2px dashed #ccc;
  margin: 0px;
  padding: 5px 40px;
  color: #979595;
  cursor: pointer;
  margin-top: 8px;
}

.form-container label.file:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.form-container label.file:active,
.form-container label.file.focus {
    border-color: #09f;
}

.form-container input[type=text], .form-container input[type=email], 
.form-container input[type=password], .form-container input[type=url], 
.form-container select, .form-container textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  font-size: 15px;
}

.form-container input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  outline: 0;
  border: 1px solid red;
}

.form-container input[type=number] {
  width: 80px;
  padding: 7px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  font-size: 15px;
}

.form-container textarea {
  height: 200px;
  font-size: 16px;
}

.form-container input[type=submit] {
  background-color: black;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: 10px;
}

.form-container input[type]:focus, .form-container select:focus, 
.form-container textarea:focus {
  border: 1px solid black;
  outline: none;
}


  /*------- universal form page styling for certain input file types -------*/


.right {
  float: right;
  clear: both;
}

.left {
  float: left;
  clear: both;
}

.form-submit-btn {
  font-size: 15px;
  border-radius: 5px;
  padding: 12px 21px;
  border: none;
  font-weight: 500;
  background-color: #6c146c;
  background-color: #1e1e1e;
  color: white;
  cursor: pointer;
  margin-top: 25px;
}

.form-submit-btn.red {
  background-color: #a10303;
}

.form4-container {
  width: 80%;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 100px;
  font-family: 'Inter', sans-serif;
  color: #536387;
}

.form4-container.restore-password {
  width: 70%;
}

.form4-container input, .form4-container select {
  width: 100%;
  padding: 13px 15px;
  border-radius: 5px;
  margin-top: 8px;
  border: 1px solid #dde3ec;
  background: #ffffff;
  font-weight: 500;
  font-size: 14px;
  outline: none;
  resize: none;
}

.form4-container textarea {
  width: 100%;
  padding: 20px 15px 80px 15px;
  border-radius: 5px;
  margin-top: 8px;
  border: 1px solid #dde3ec;
  background: #ffffff;
  font-weight: 500;
  font-size: 14px;
  outline: none;
  resize: none;
}

.form4-container h3 { 
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  color: #07074d;
}


  /*------- universal form page styling for certain input file types -------*/

#form2-container {
  width: 40%;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 50px;
  padding: 15px 35px 80px 35px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background-color: white;
  font-family: sans-serif;
  font-size: 1.0em;
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 6px 6px 0px rgba(0,0,0.1,0.2);
}

#form2-container hr {
  margin: 0;
}


#form2-container p#file-size-msg {
  color: #484040;
  margin-bottom: 26px;
}

#form2-container p#form-footnote {
  font-family: sans-serif;
  font-size: 1.0em;
  font-weight: normal;
  margin-top: 10px;
  text-align: center;
}

#form2-container p#cost-calculator {
  font-family: sans-serif;
  font-size: 17px;
  font-weight: normal;
  margin-top: 30px;
  margin-bottom: 24px;
}

#form2-container input[type=text], #form2-container input[type=email], 
#form2-container select, #form2-container textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  font-size: 15px;
}

#form2-container input[type=number] {
  width: 80px;
  padding: 7px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  font-size: 15px;
}

#form2-container input[type=date] {
  margin-top: 8px;
}

#form2-container textarea {
  height: 200px;
  font-size: 16px;
}

#form2-container input[type=submit] {
  background-color: black;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: 10px;
}

#form2-container input[type]:focus, #form2-container select:focus, 
#form2-container textarea:focus {
  border: 1px solid black;
  outline: none;
}






@media (min-width: 699px) {
  .form-container {
    margin-top: 100px;
  }

  .form-container.appeal {
    margin-top: 50px;
  }

  /*-------------------------- choose_ad_type.html --------------------------*/

  .menu-options-container {
    margin-bottom: 50px;
  }

  .menu-options-container.fixed-header-margin-top {
    margin-top: 110px;
  }

}

/* media queries for desktops */
@media (min-width: 1700px) {


/*-------------------------------- ad_analytics.html --------------------------------*/


.data-holder {
  width: 18.5%;
  margin: 0 20px 20px 0;
  /*height: 125px;
  display: inline-block;
  box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.2);
  margin: 0 20px 20px 0;
  background-color: white;*/
}


}




@media (min-device-width: 768px) and (max-device-height: 1200px) and (orientation:portrait) {

  /*-------------------------- choose_ad_type.html --------------------------*/

  .menu-options-container {
    width: 70%;
  }


}

@media (min-width: 768px) and (max-height: 800px) and (orientation:landscape)  {
  


}





/* media queries for ipads & tablets Portrait and Landscape */
@media (min-width: 700px) and (max-width: 1200px) { 

  /*------------------------ ad_analytics.html -----------------------------*/

.data-holder {
  width: 22%;
/*  height: 90px;*/
  display: inline-block;
  box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.2);
  margin: 0 20px 20px 0px;
  background-color: white;
}



}





















/* media queries for ipads & tablets Portrait and Landscape */
@media (min-width: 700px) and (max-width: 1050px) {

  /*--------------------- ad_checkout.html ------------------------------*/

.checkout-ad-holder video {
  height: 190px;
  width: 100%;
  object-fit: contain;
  background-color: black;
}

  /*------------------------ ad_analytics.html -----------------------------*/

.data-holder {
  width: 26%;
/*  height: 85px;*/
  display: inline-block;
  box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.2);
  margin: 0 20px 20px 0px;
  background-color: white;
}

  /*--------------------- universal form page styling  ----------------------*/

.form-container {
  width: 450px;
}

  /*--------------------- universal form page styling  ----------------------*/

#form2-container {
  width: 450px;
}



}  /* end of tablets*/
























/*---------- the media queries for my phone devices 100% Zoom ---------------*/


@media (max-width: 699px) { 

.marketing-cash-amount {
  font-size: 3.7vw;
}

    /*------------------------- choose_ad_type.html -----------------------------*/

.menu-options-container {
  width: 90%;
  margin-top: 50px;
}

.menu-options-container h1 {
  font-size: 5.5vw;
  margin-bottom: 40px;
}

.menu-options-container button {
  padding: 18px 0px 18px 15px;
  font-size: 3.5vw;
}




  /*------------------------ ad_analytics.html ---------------------------*/

.canvas-holder {
  width: 100%;
}

.data-canvas {

}

#data-container {
  /*background-color: red;*/
}

#data-title {
  width: 100%;
  margin: 0 0 30px 0;
}

#data-title h1 {
/*  font-size: 20px;*/
  font-size: 4.5vw;
  font-weight: 600;
  color: #6c6c6c;
  margin: 0 0 0 5px;
}

.data-holder {
  width: 98%;
/*  height: 105px;*/
  display: inline-block;
  box-shadow: 2px 4px 6px 2px rgba(0,0,0,0.2);
  margin: 0 20px 20px 0;
  background-color: white;
}

.data-subject {
  width: 85%;
  height: 30px;
  margin: auto;
  margin-top: 20px;
}

.data-subject p {
  margin: 0;
  padding: 0;
  float: left;
  color: #868686;
  font-size: 4.1vw;
}

#data {
  width: 85%;
  height: 30px;
  margin: auto;
}

#data p {
  margin: 0;
  padding: 0;
  float: left;
  color: #595959;
  font-weight: 600;
  font-size: 4.5vw;
}

div#reason {
  display: inline-block;
  height: 200px;
  width: 98%;
}

  /*--------------------- ad_checkout.html ------------------------------*/

.checkout-container {
  width: 90%;
  background-color: white;
  border: 1px solid #eee;
  margin: auto;
  margin-top: 60px;
  margin-bottom: 50px;
  /*padding: 0px 32px 120px 38px;*/
  padding: 0 0 50px 0;
  border-radius: 4px;
  box-shadow: 2px 3px 6px 1px rgba(0,0,0,0.2);
  overflow: hidden;
  z-index: 1;
}

.checkout-ad-holder {
  /*float: right;*/
  float: none;
  width: 85%;
  margin: auto;
  margin-top: 30px;
}

.checkout-ad-holder video {
  height: 200px;
  width: 100%;
  object-fit: contain;
  background-color: black;
}

#checkout-ad-title h1 {
  font-family: sans-serif;
  font-size: 4.5vw;
  padding: 0;
  font-weight: normal;
  margin: 8px 0 0 0;
}

#checkout-ad-date p {
  font-family: sans-serif;
  padding: 0;
  font-weight: normal;
  margin: 4px 0 0 0;
  font-size: 3vw;
}

.checkout-pay-holder {
  width: 90%;
  margin: auto;
  margin-top: 40px;
}

#checkout-ad-cost h1 {
  font-family: sans-serif;
  font-size: 5vw;
  padding: 0;
  font-weight: normal;
  text-align: center;
}

#paypal-btns {
  width: 100%;
  margin-top: 20px;
}

  /*------- universal form page styling for certain input file types -------*/

.form-submit-btn {
  font-size: 3.2vw;
  padding: 12px 16px;
}

.form4-container {
  width: 85%;
}

.form4-container input {
  width: 90%;
  padding: 13px 15px;
  font-size: 3.2vw;
}

.form4-container textarea {
  width: 90%;
  padding: 15px 15px 80px 15px;
  font-size: 3.2vw;
}

.form4-container h3 { 
  font-size: 6.3vw;
}

  /*--------------------- universal form page styling  ----------------------*/
/*used for both form & form2*/
#form-submit {
   font-size: 7.5vw;
   margin-top: 10px;
   cursor: pointer;
}
/*---*/

.form-container {
  width: 80%;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 60px;
  padding: 15px 24px 60px 24px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background-color: white;
  font-family: sans-serif;
  font-size: 3.6vw;
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 6px 6px 0px rgba(0,0,0.1,0.2);
}

.form-container p#cost-calculator {
  font-size: 3.8vw;
}

.form-container label.file {
  position: relative;
  display: block;
  width: 35%;
  font-size: 60%;
  text-align: center;
  text-transform: uppercase;
  border: 2px dashed #ccc;
  margin: 0px;
  padding: 5px 25px;
  color: #979595;
  cursor: pointer;
  margin-top: 8px;
}

.form-container input[type=text], .form-container input[type=email], 
.form-container input[type=url], .form-container select, .form-container textarea,
.form-container input[type=number], .form-container input[type=password] {
  font-size: 3.1vw;
  padding: 8px;
}

.form-container textarea {
  height: 150px;
}



  /*--------------------- universal form page styling  ----------------------*/

#form2-container {
  width: 80%;
  margin: auto;
  margin-top: 40px;
  padding: 15px 24px 60px 24px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background-color: white;
  font-family: sans-serif;
  font-size: 3.7vw;
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 6px 6px 0px rgba(0,0,0.1,0.2);
}

#form2-container p#cost-calculator {
/*  font-size: 15px;*/
/*  font-size: 50px;*/
}

#form2-container input[type=text], #form2-container input[type=email], 
#form2-container select, #form2-container textarea {
  padding: 9px;
  font-size: 3.1vw;
}

#form2-container input[type=submit] {
  font-size: 2.8vw;
}


  /*------------------------ ad_approval.html -----------------------------*/

#approve-btn {
  padding: 8px 24px;
  border: 1px solid green;
  border-radius: 3px;
  font-family: sans-serif;
  margin: 8px 0 0 0;
  background-color: green;
  color: white;
  font-size: 3vw;
}

#disapprove-btn {
  padding: 8px 24px;
  border: 1px solid red;
  border-radius: 3px;
  font-family: sans-serif;
  margin: 8px 0 0 0;
  background-color: #d10000;
  color: white;
  font-size: 3vw;
}

}


















/*----- the media queries for my smaller phone devies 115% Zoom--------*/


@media (max-width: 400px) { 


  /*--------------------- ad_analytics.html ------------------------------*/
.data-holder {
/*  height: 90px;*/
}



  /*--------------------- ad_checkout.html ------------------------------*/

.checkout-ad-holder video {
  height: 170px;
  width: 100%;
  object-fit: contain;
  background-color: black;
}

  /*--------------------- universal form page styling  ----------------------*/

/*used for both form & form2*/
#form-submit {
   margin-top: 8px;
   cursor: pointer;
}
/*---*/

.form-container {
  width: 80%;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 90px;
  padding: 10px 20px 50px 20px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background-color: white;
  font-family: sans-serif;
/*  font-size: 0.8em;*/
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 6px 6px 0px rgba(0,0,0.1,0.2);
}

.form-container label.file {
  position: relative;
  display: block;
  width: 35%;
/*  font-size: 60%;*/
  text-align: center;
  text-transform: uppercase;
  border: 2px dashed #ccc;
  margin: 0px;
  padding: 5px 25px;
  color: #979595;
  cursor: pointer;
  margin-top: 8px;
}



  /*--------------------- universal form page styling  ----------------------*/

#form2-container {
  width: 80%;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 80px;
  padding: 15px 20px 50px 20px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background-color: white;
  font-family: sans-serif;
/*  font-size: 0.9em;*/
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 6px 6px 0px rgba(0,0,0.1,0.2);
}

#form2-container input[type=text], #form2-container input[type=email], 
#form2-container select, #form2-container textarea {
  padding: 8px;
/*  font-size: 12px;*/
}


}