/*
 * 
 * @copyright Copyright 2018 davewest
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: Testimonials_Manager.php v2.0 11-14-2018 davewest $
 */

* {
  box-sizing: border-box;
}

.pseudolink {color:rgba(0,148,0,1);font-weight:bold;font-size:1.5em;}
.logo2{margin-top:5px;font-size:2vw;position:relative;text-align:center;line-height:2px;}
.logo2 img {width: 40vw;height: 30vh;}

/** Wrapper background image or color is sized on the fly by css and not script. 
 *  Images grater in hight then width is suggessed.  
 *  In a html5 broswer, the colors used creates a bulls eye effect. Search for gradients for other types.
 *  Comment out the line you don't wish to use.
 */
.tm-wrapper{
	background-image: url(../images/background_ice.jpg);background-size:100% 100%;background-repeat:no-repeat;
	/*background-image: radial-gradient(circle, rgba(255,255,255,0.5) 35%, rgba(114,159,207,0.5) 66%, rgba(24,72,129,1) 100%);*/
	
	border:solid 1px rgba(24,72,129,1); 
	margin-top:18px;
	margin-right:auto;
	margin-bottom:0px;
	margin-left:auto;
	padding-top:0px;
	padding-right:0px;
	padding-bottom:0px;
	padding-left:0px;
	-webkit-box-shadow:2px 0px 20px rgba(24,72,129,1);;
	-moz-box-shadow:2px 0px 20px rgba(24,72,129,1);;
	-o-box-shadow:2px 0px 20px rgba(24,72,129,1);;
	box-shadow:2px 0px 20px rgba(24,72,129,1);;	
	width:98%;
	border-collapse:collapse;
}

/* hide spam bot lines */
#email-pot, .email-pot {position:absolute; visibility:hidden; display:none;} 

.main_box {margin: 20px;}
.questionarea{margin-top:20px;margin-bottom:20px;text-align:center;}
.questiontitle h2{padding:0px 20px;}
.qtext2{font-size:14px;color: rgb(0,0,0);font-family:arial, helvetica, sans-serif;}
.inputLabel {max-width: 70px !important;}
.feedbackLabel {max-width: 90px !important;}

/* taggle switch */
.switch-field {font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;padding: 40px;}
.switch-footer {font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;padding: 10px 10px 15px 25px;}
.switch-title {margin-bottom: 6px;}
.switch-field input[type="radio"], .switch-field input[type="checkbox"] {position: absolute !important;clip: rect(0, 0, 0, 0);height: 1px;width: 1px;border: 0;overflow: hidden;}
.switch-field label {display: inline-block;
width:100%;
background-color: rgba(228,228,228,0.7);
color: rgba(0, 0, 0, 0.9);
font-size: 14px;
font-weight: normal;
text-align: left;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgb(0, 0, 0);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition:all 0.1s ease-in-out;
-moz-transition:all 0.1s ease-in-out;
-ms-transition:all 0.1s ease-in-out;
-o-transition:all 0.1s ease-in-out;
transition:all 0.1s ease-in-out;
}
.switch-field label:hover {cursor: pointer;background: rgba(247,245,31,0.7); }
.switch-field input:checked + label {
       -moz-box-shadow: 0px 1px 0px 0px rgb(247,31,31);
	-webkit-box-shadow: 0px 1px 0px 0px rgb(247,31,31);
	box-shadow: 0px 1px 0px 0px rgb(247,31,31); 
	background: rgb(247,31,31); 
        background: linear-gradient(0deg, rgba(247,31,31,0.7) 5%, rgba(125,3,3,0.7) 100%);
        -webkit-border-radius: 5;
        -moz-border-radius: 5;
        border-radius: 5px;
        color: #fff;
        border:1px solid rgb(0,0,0);
       text-decoration: none;
       -webkit-box-shadow: none;
       box-shadow: none;
}
 .switch-field label:first-of-type {border-radius: 4px 0 0 4px;}
.switch-field label:last-of-type {border-radius: 0 4px 4px 0;} 

/**star rating **/
.masterdog {position:relative;padding: 15px}
.starspace {padding: 10px;}
.rating { float:left;} 
.rating:not(:checked) > input {position:absolute;top:-9999px;clip:rect(0,0,0,0);}
.rating:not(:checked) > label {float:right;width:1.3em;padding:0 .3em;overflow:hidden;white-space:nowrap;cursor:pointer;font-size:3em;line-height:1.2;color:rgba(224,224,224,1);}
.rating:not(:checked) > label:before {font-family: FontAwesome;content: "\f005"; text-shadow: 0px 0px 2px rgb(246,4,4), 0px 0px 2px rgb(246,4,4);}
.rating > input:checked ~ label {color: rgba(239,41,41,1);}
.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: rgba(245,121,0,1);}
.rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label {color: rgba(114,159,207,1);}
[id^="tooltip-"] {-webkit-transition: .4s;transition: .4s;}
[id^="show_me-"] {opacity: 0;}
#remove_me {opacity: 1;}
#tooltip-1:hover ~ #show_me-1 {opacity: 1;}
#tooltip-1:hover ~ #remove_me {opacity: 0;}
#tooltip-2:hover ~ #show_me-2 {opacity: 1;}
#tooltip-2:hover ~ #remove_me {opacity: 0;}
#tooltip-3:hover ~ #show_me-3 {opacity: 1;}
#tooltip-3:hover ~ #remove_me {opacity: 0;}
#tooltip-4:hover ~ #show_me-4 {opacity: 1;}
#tooltip-4:hover ~ #remove_me {opacity: 0;}
#tooltip-5:hover ~ #show_me-5 {opacity: 1;} 
#tooltip-5:hover ~ #remove_me {opacity: 0;}
.rating span {transition: opacity 1s;position:absolute;top:14px;left:260px;font-size:2.5em;line-height:2;color:rgb(0,0,0);} 

/** radio hide with labels **/
.boxcontainer {max-width: 500px;margin: 0 auto;}
.reveal-if-active {
  background-color: rgba(114, 159, 207, 0.5);
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  transition: 0.5s;
}
 .reveal {
  background-color: rgba(255, 255, 255, 0.5);  /*114, 159, 107*/
  border:solid 1px #000;  
  max-height: 3650px; 
  box-sizing: border-box;
  padding: 0px;
 } 
input[type="radio"]:checked ~ .reveal-if-active, input[type="checkbox"]:checked ~ .reveal-if-active {
  opacity: 1;
 max-height: 3650px; 
  padding: 10px 20px;
 -webkit-transform: scale(1);
  transform: scale(1);
  overflow: visible;
} 


.resizeField
{
   height:auto;
   display:block;
   resize:vertical-auto; /* enables vertical height due to size of contained text */
   width:100%;
   box-sizing:border-box;
}

/******* Floating labels **************/
input[type="email"], input[type="text"], textarea {
width: 100%;
margin: 0 0;
}

.go-up > div {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
} 
.go-up input, .go-up textarea {
  width: 100%;
  border: 2px solid rgb(24,72,129);
  background: rgba(255,255,255,0.2);
  position: relative;
 /* left: 0; */
  z-index: 1;
  padding: 16px 12px;
  outline: 0;
}
input:valid + .label, textarea:valid + .label {
  color: rgba(24,72,129,0.9);
  font-size: 90%;
  padding: 1px 6px;
}

input:focus + .label, textarea:focus + .label {
  color: rgba(24,72,129,0.9);
  font-size: 90%;
  padding: 1px 6px;
  z-index: 2;
  transition: 0.1s;
}
.label {
  transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
  position: absolute;
  color: rgba(0,0,0,1);
  padding: 7px 6px;

}

.label {
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.go-up:input:focus + .label, .go-up:textarea:focus + .label {
  bottom: 100%;
  margin-bottom: -16px;
}

/** required Thumbs up and down images **/
input:required:invalid, select:required:invalid, textarea:required:invalid, input:focus:invalid, select:focus:invalid, textarea:focus:invalid {
    background-image: url(../images/icons/tm-required.png);
    background-position: right top;
    background-size: 15px 15px;
    background-repeat: no-repeat;
    -moz-box-shadow: none;
    z-index: 3;
  }
input:required:valid, select:required:valid, textarea:required:valid  {
    background-image: url(../images/icons/tm-success.png); 
    background-position: right top;
    background-size: 15px 15px;
    background-repeat: no-repeat;
    z-index: 3;
  }
  
select {background: url(../images/bc_cat_pointer_down.gif) no-repeat #fff 254px 18px;}  

/******** slider ********/
.slidecontainer {
    width: 75%; /* Width of the outside container */
}

/* The slider itself */
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 1px;
    border-radius: 5px;  
    background: #d3d3d3;  
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #cc0000;
    cursor: pointer;   
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

/* file upload button */

.box label {border:none;width:50%;}


.js .inputfile {width: 0.1px;height: 0.1px; opacity: 0;overflow: hidden;position: absolute; z-index: -1;}
.inputfile + label {max-width: 80%;font-size: 1.25rem;font-weight: 700;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;display: inline-block; overflow: hidden; padding: 0.625rem 1.25rem;}
input[type="file"] { display: none;border:none;}
.inputfile:focus + label, .inputfile.has-focus + label {outline: 1px dotted #000;outline: -webkit-focus-ring-color auto 5px;}
.inputfile + label svg {width: 1em; height: 1em;vertical-align: middle;fill: currentColor;margin-top: -0.25em;margin-right: 0.25em;}
.inputfile-4 + label {color: #d3394c;}
.inputfile-4:focus + label, .inputfile-4.has-focus + label, .inputfile-4 + label:hover { color: #722040;}
.inputfile-4 + label figure {width: 100px;height: 100px;border-radius: 50%;background-color: #d3394c;display: block;padding: 20px;margin: 0 auto 10px;}
.inputfile-4:focus + label figure, .inputfile-4.has-focus + label figure, .inputfile-4 + label:hover figure {background-color: #722040;}
.inputfile-4 + label svg {width: 100%; height: 100%; fill: #f1e5e6;}	


/*** avatars ****/
.avatars {
  width:100%;
  font-family:sans-serif;
  margin:10% auto;
  text-align:center;
  height:auto;
}

#divCircle {
 width: 195px;
 height: 195px;
 border-radius:200px;
 position: relative;
 overflow:hidden;
 top:-10px;
 left:-10px;
 opacity:0;
 margin: -60px;
 -webkit-transition:opacity 0s 0s;
} /**/
		
#divCircle img{
 position: absolute;
 width: 50px;
 height: 50px;
 background:orange;
 border-radius:60px;
 border:2px #000 solid;
 -webkit-transition:all 0.4s;
}

#divCircle img:hover {
 border:2px #333 solid;
 width: 55px;
 height: 55px;
}
		
#middleBubble {
 text-align:center;
 vertical-align:top;
 color: #252525; /*#6d6e71*/
 height:60px;		
 width: 60px;	
 position: absolute;
 text-align:center;
}
		
#middleBubble img {
  top:0px !important;
  left:0px !important;
}
	
.mainImg {
  width:60px;
  position:absolute;
  margin: -60px;
}

.mainImg img {
  width:60px;
  border-width:0px;
  border-style:solid;
  border-color:rgba(0,0,0,0);
  border-radius:600px;
  overflow:hidden;
  -webkit-transition:all 0.5s;
  margin:60px 0 0 60px;
}

.avatarList {
  margin:0px -60px;
  display:inline-block;
/*  border:1px black solid; */
  width:60px;
  height:60px;
  background:orange;
  border-radius:60px;
}

.avatarList.expand .mainImg img {
 /* border-color:rgba(0,0,0,1);  background color expanded */
      border-width:60px;
     margin:0;
       box-sizing: none;
}

#divCircle.expand {
  display:block;
  opacity:1;
  -webkit-transition:opacity 0.5s 0.4s;
}

/* file upload button */
.btn-file {font-size:1em;text-align:center;}
.box {text-align:center;}
.box-preview {text-align:center;max-width: 60%;border:2px solid rgba(0,0,0,0.5);display:inline-block;overflow: hidden;}
.upfile {width: 0.1px;height: 0.1px; opacity: 0;overflow: hidden;position: absolute; z-index: -1;}
.upfile + label {max-width: 60%;font-size: 1.25rem;font-weight: 700;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;display: inline-block; overflow: hidden; padding: 0.625rem 1.25rem;}
input[type="file"] { display: none;}
.upfile:focus + label, .upfile.has-focus + label {outline: 1px dotted #000;outline: -webkit-focus-ring-color auto 5px;}
.upfile + label svg {width: 1em; height: 1em;vertical-align: middle;fill: currentColor;margin-top: -0.25em;margin-right: 0.25em;}

.upfile-1 + label {
    color: #f1e5e6;
    background-color: #d3394c;
}
.upfile-1:focus + label,
.upfile-1.has-focus + label,
.upfile-1 + label:hover {
    background-color: #722040;
}

#file-reset {cursor: pointer;}

/*round image*/
img.rounded {
  object-fit: cover;
  border-radius: 50%;
  height: 60px;
  width: 60px;
}

@media (max-width:610px){
  .rating:not(:checked) > label {width:1.1em;padding:0 .0em;font-size:3em;} 
  .rating span {position:absolute;top:14px;left:185px;font-size:2em;}
  .box label {width:100%;}
  .main_box {margin: 1px;}
  .switch-field {padding: 30px 0px 0px 10px;}
  .btn-file {font-size:.8em;}
  .box-preview {max-width: 90%;}
  .upfile + label {max-width: 90%;}
}