@charset "utf-8";

  /* CSS Document 

 Copyright 2020 Jewish Federation of Cleveland

 Volunteer portal pop up window stylesheet

*/

  

   

  /* Old pop up code*/

  

  .mainResponse {

  position: fixed; /* Stay in place */

  z-index: 1200; /* Sit on top */

  padding-top: 30px; /* Location of the box */

  padding-left:25%;  padding-right: 25%;

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  /*background-color: rgb(0,0,0);  Fallback color */

  /*background-color: rgba(0,0,0,0.4);  Black w/ opacity */

}

  

  .responseCnt {

  background-color: #fefefe;

  margin-top: 100px;

  padding: 10px;

  border: 1px solid #888;

  width: 100%;

  border-radius:25px;  

}

  

  .finalTxt {

    

  font-size:1.25em;

  font-weight:500;

  color:#f06f60; 

  text-align:center;

    

}

  

  

 close {

  color: #aaaaaa;

  float: right;

  font-size: 28px;

  font-weight: bold;

}



.close:hover,

.close:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}



@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 1024px) 

  and (-webkit-min-device-pixel-ratio: 1) {

    .mainResponse{

    z-index: 1200; /* Sit on top */

    padding-top: 10px; 

    padding-left:18%;  

    position: fixed;

  }

    

  .responseCnt {

    margin-top: 0px;

    width: 63%;

  }

 



}

  

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

  

  .mainResponse{

    z-index: 1200; /* Sit on top */

    padding-top: 10px; 

    padding-left:0;  

    position: fixed;

  }

    

  .responseCnt {

    margin-top: 0px;

    width: 93%;

  }

    

  .tagline {

    font-size:85%;

    margin-bottom: 30px;

    } 

}

  /*Popup form styles*/ 

  

 .smart-forms .ui-slider .ui-slider-range, .smart-forms .progress>button[type="button"]:hover, .smart-forms .progress>button[type="button"], .smart-forms .progress-bar>.bar {

  background-size: 16px 16px;

  background-image: -webkit-linear-gradient(top left, transparent, transparent 25%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.3));

  background-image: -moz-linear-gradient(top left, transparent, transparent 25%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.3));

  background-image: -o-linear-gradient(top left, transparent, transparent 25%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.3));

  background-image: linear-gradient(to bottom right, transparent, transparent 25%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0.3))

	}

  

input[type=text] {

  font-family:inherit;

  font-size: inherit;

  padding:10px;

  border:1px solid #ddd;

  box-shadow:0 0 15px 4px rgba(0,0,0,0.06);

  clear:both;

}

textarea {

  font-family:inherit;

  font-size: inherit;

  width:100%;

  resize: vertical;

  padding:10px;

  border:1px solid #ddd;

  box-shadow:4px 4px 10px rgba(0,0,0,0.06);

  height:80px;

}

/* container */

label {

  position: relative; /* to contain absolute elements */

  padding-left:10px; /* free space for custom checkbox */

  cursor: pointer;

}

/* hide default checkbox  */

label input[type=checkbox] {

  position: absolute; /* prevent taking any space */

  /* cross-browser hidingg */

  opactiy: 0;

  width:0; 

  height:0;

}

/* custom checkbox */

label span {

  position: absolute;

  /* position to the free space in <label> */

  top:0;

  left:0;

  width:20px; 

  height:20px;

  background-color: #fff;

  border:1px solid #ddd;

  transition: .3s background-color; /* slight transition */

}

/* the check icon */

label span:after {

  content: "";

  position: absolute;

  display: none;

  

  /* check icon */

  left: 6px;

  top: 2px;

  width: 4px;

  height: 10px;



  border: solid white;

  border-width: 0 3px 3px 0;

  transform: rotate(45deg);

}

label:hover span {

  background-color: #ccc;

}



 



/**** Here's the trick ***/

label input:checked ~ span {

  background-color: #2eaadc;

}

label input:checked ~ span:after {

  display:block;

}

        

/* hide default radio button  */

label input[type=radio] {

  position: absolute; /* prevent taking any space */

  /* cross-browser hidingg */

  opactiy: 0;

  width:0; 

  height:0;

}

/* custom radio button */

.radiogroup label span {

  position: absolute;

/* position to the free space in <label> */

  top:0;

  left:0;

  width:20px; 

  height:20px;

  background-color: #fff;

  border:1px solid #ddd;

  border-radius: 50%;

  transition: .3s background-color; /* slight transition */

}

/* the check icon */

.radiogroup label span:after {

  content: "";

  position: absolute;

  display: none;

  

/* middle */

  top:50%;

  left:50%;

  transform: translate(-50%,-50%);

  background-color:#fff;

  width:8px;

  height:8px;

  border-radius:50%;

}

.radiogroup label:hover span {

  background-color: #ccc;

}



 



/**** Here's the trick ***/

.radiogroup label input:checked ~ span {

  background-color: #2eaadc;

}

.radiogroup label input:checked ~ span:after {

  display:block;

}

        

select {

  font-family:inherit;

  font-size: inherit;

  width: 100%;

  padding:10px;

  border-radius:0px;

  border:1px solid #ddd;

  box-shadow:4px 4px 10px rgba(0,0,0,0.06);

}

        

button {

  font-family:inherit;

  font-size: inherit;

  /* remove default behavior */

  appearance:none;

  -webkit-appearance:none;

  /* usual styles */

  padding:15px;

  border:none;

  background-color:#f06f60;

  color:#fff;

  font-weight:600;

  border-radius:5px;

  width:100%;

}