/********************************************************/
/* CSS file for the BotBounce form verification program */
/* Code Andrew Farr Web Design, 2021                    */
/********************************************************/

/*Declare fonts used*/
@font-face{
 font-family: Shanti;
 src: url(fonts/Shanti.ttf);
}

/*Styling for the verification container*/
.botbounce-verification-box{
 display: none; 
 position: fixed;
 z-index: 9999;
 left: 0;
 top: 0;
 width: 100%; 
 height: 100%;
 overflow: auto; 
 background-color: rgb(0,0,0); 
 background-color: rgba(0,0,0,0.4);
 font-family: Shanti;
}

.botbounce-box-content{
 background-color: #fefefe;
 margin-top: 10vh;
 margin-left: auto;
 margin-right: auto;
 padding: 20px;
 padding-right: 0px;
 border-radius: 6px;
 width: 1100px;
 display: grid;
 grid-template-rows: auto auto;
 grid-template-columns: 95% 5%;
}

/*!important declarations used so this style set will override the exisiting one while in effect*/
.botbounce-submit-box-content{
 grid-template-columns: auto 3vw !important;
 width: 31% !important;
 padding: 2vw 0 2vw 2vw !important;
}

/*Heading styles*/
.botbounce-verify-header{
 margin-bottom: 12px;
 margin-right: 8px;
 font-size: 23px;
}

.botbounce-verify-keyword{
 font-weight: bold;
}

/*Container image table is loaded into*/
.img-box{
 grid-row: 1;
 grid-column: 1;
}

/*Styles for the verification image table*/
.botbounce-img-table{
 display: grid;
 grid-template-rows: auto auto auto;
 grid-template-columns: 250px 250px 250px 250px;
 grid-gap: 21px;
}

.botbounce-img-table > img{
 border: 3px solid white;
 border-radius: 5px;
 cursor: pointer;
 max-width: 250px;
}

/*Selected image styles*/
.botbounce-select-img{
 border: 3px solid #00abc4 !important;  /*this used so that style is still applied by parser for click effect*/
}

/*Styling for the close button inside the verification box*/
.botbounce-close-box{
 cursor: pointer;
 color: #5c5c5c;
 grid-row: 1;
 grid-column: 2;
 font-size: 40px;
 position: relative;
 bottom: 18px;
}

.botbounce-close-box:hover{
 cursor: pointer;
 color: #bd0202;
}

/*Styles for the 'Check Verification' button*/
.botbounce-check-verification{
 grid-row: 2;
 grid-column: 1;
 border: 1px solid #5c5c5c;
 max-width: 65px;
 padding: 8px;
 text-align: center;
 margin-top: 15px;
 margin-left: 5px;
 border-radius: 3px;
 cursor: pointer;
 background: linear-gradient(to bottom right, #7d7d7d, #5c5c5c);
 color: #fcfcfc;
}

.botbounce-check-verification:hover{
 background: linear-gradient(to bottom right, transparent, #e3e3e3);
 color: #5c5c5c;
}

/*Styles for the 'Clear Selections' button*/
.botbounce-clear-selections{
 color: #5c5c5c;
 grid-column: 1;
 grid-row: 2;
 margin-left: 152px;
 margin-top: 24px;
 text-decoration: underline;
 cursor: pointer;
}

.botbounce-clear-selections:hover{
 text-decoration: none;
}

/*Verify results styling*/
.botbounce-verify-results{
  grid-row: 2;
  grid-column: 1;
  margin-left: 32vw;
  margin-top: 25px; 
 }

/*Style for the main text of the 'Completed' window*/
.botbounce-completed-text{
 font-size: 21px;
}

/*Style for completed verification header*/
.botbounce-verification-complete{
 font-size: 28px;
 margin-bottom: 12px;
}

/*Logo styles*/
.botbounce-logo{
 width: 200px;
 height: auto;
}

/*Styles for standard form container*/

form{
 border: 1px solid #c8c8c8;
 padding: 30px;
 padding-top: 0px;
 margin-top: 10px;
 border-radius: 12px;
 min-width: 232px;
}

input, textarea{
 display: block;
 font-family: Shanti;
 font-size: 16px;
 margin-top: 15px;
 margin-bottom: 15px;
 padding: 7px;
 border-radius: 2px;
 border: 1px solid #a6a6a6;
 width: 215px;
}

input, textarea:focus{
 border: 1px solid #a6a6a6;
 outline: none;
}

input[type="submit"], input[type="reset"]{
 margin-bottom: 15px;
 padding: 5px 9px;
 cursor: pointer;
 width: unset;
}

textarea{
 max-width: 400px;
 min-width: 200px;
 width: 30vw;
 resize: none;
 height: 130px;
 padding: 10px;
}

.form-section{
 font-weight: bold;
 font-size: 17px;
}

.basic-container .form-section, .advanced-container .form-section{
 border-bottom: 1px solid #c8c8c8;
}

.small-bold{
 font-size: 16px;
}

form > label:first-of-type{
 margin-top: 30px;
 display: block;
}

.verify-results{
 display: none;
 grid-row: 2;
 grid-column: 1;
 margin-left: 32%;
 margin-top: 20px;
 font-size: 24px;
}

.form-results{
 display: none;
}

.small-heading{
 margin-top: 10px;
 font-size: 17px;
}

.note{
 font-style: italic;
 font-size: 14px;
 display: inline-block;
 color: #5c5c5c;
 cursor: default;
}

/*Handheld device compatibility styles*/
@media(max-width: 1400px){
 .botbounce-submit-box-content{
  width: 435px !important;		/*override earlier styles*/ 
 }
}

@media(max-width: 1145px){
 .botbounce-box-content{
  width: 94%;
 }
 .botbounce-img-table{
  grid-template-columns: auto auto auto auto; 
 }
 .botbounce-img-table > img{
  width: 20.75vw;
  max-width: 250px;
  height: auto;
 }
}

@media(max-width: 1115px){
 .botbounce-box-content{
  grid-template-columns: auto; 
  grid-template-rows: auto auto auto;
 }
 .botbounce-check-verification, .botbounce-clear-selections{
  grid-row: 3; 
 }
 .botbounce-close-box{
  grid-column: 1;
  grid-row: 1;
  margin-right: 0px;
  margin-left: 90vw; 
 }
 .botbounce-submit-box-content .botbounce-close-box{ 
  grid-column: 1;
  margin-left: 400px;
  grid-row: 2;
 }
 .botbounce-verify-results{
  grid-row: 3; 
  margin-left: 400px;	/*set a fixed margin here to prevent the space from narrowing as the screen gets smaller*/
 }
 .botbounce-verification-complete{
  grid-row: 2;
  grid-column: 1; 
 }
 .botbounce-img-box{
  grid-row: 2; 
 }
 .botbounce-img-table{
  grid-row-gap: 2vw;
  grid-column-gap: 0px;
 }
 .botbounce-img-table > img{
  width: 19.75vw;
 }
 .botbounce-completed-text{
  grid-row: 3;
  grid-column: 1; 
 }
 
}

@media(max-width: 845px){
 .botbounce-close-box{
  margin-left: 89vw; 
 }
}

@media(max-width: 750px){
 .botbounce-verify-results{
  margin-left: 51vw; 
 }
}

@media(max-width: 625px){
 .botbounce-clear-selections{
  margin-left: 21vw; 
 }
}

@media(max-width: 580px){
 .botbounce-box-content{
  width: 394px; 
  grid-template-rows: auto auto auto auto;
 }
 .botbounce-img-table{
  grid-template-columns: 115px 115px 115px;
  grid-template-rows: 83px 83px 83px 83px;
  grid-gap: 12px;
 }
 .botbounce-img-table > img{
  width: 115px;
  border-width: 2px; 
 }
 .botbounce-close-box{
  margin-left: 356px; 
 }
 .botbounce-clear-selections{
  margin-left: 158px; 
 }
 .botbounce-verify-results{
  margin-left: 12px;
  grid-row: 4 
 }
}

@media(max-width: 430px){
 .botbounce-box-content{
  width: 370px;
  padding-left: 11px; 
 }
 .botbounce-verification-complete{
  font-size: 24px; 
 }
 .botbounce-completed-text{
  font-size: 19px; 
 }
 .botbounce-submit-box-content{
  width: 358px !important;		/*override earlier styles*/ 
  padding: 12px 0px 12px 12px !important;
 }
 .botbounce-submit-box-content .botbounce-close-box{
  margin-left: 324px; 
 }
 .botbounce-img-table{
  grid-gap: 5px; 
 }
 .botbounce-close-box {
  margin-left: 336px;
 }
}

@media(max-width: 388px){
 .botbounce-img-table{
  grid-template-columns: 29vw 29vw 29vw;
  grid-template-rows: auto auto auto auto;
  grid-gap: 7px; 
 }
 .botbounce-img-table > img{
  width: 29vw;
 }
 .botbounce-close-box{
  margin-left: 84vw; 
 }
 .botbounce-box-content{
  width: 90% !important; 
 }
 .botbounce-verify-header{
  font-size: 22.2px; 
 }
 .botbounce-check-verification{
  height: 28px; 
 }
 .botbounce-clear-selections{
  margin-left: 122px;
 }
 .botbounce-submit-box{
  width: 90% !important;
 }
 .botbounce-verification-complete{
  width: 88vw; 
  font-size: 20px;
 }
 .botbounce-completed-text{
  font-size: 18px; 
 }
 .botbounce-close-box{
  margin-left: 93% !important;
 }
}