@charset "utf-8";
/* CSS Document */

table{
	margin:2em 0.5em
}

th, td {
    font-size: 1.4em;
    border: 1px solid black;
    padding: 10px;
}

td {
    font-size: 1.2em;
    border: 1px solid black;
    padding: 10px;
	position:relative
}

/* Word count*/
textarea {
  width: 100%;
  height: 10em;
  padding: 0.2em;
  margin: 0.2em;
  box-sizing: border-box;
  border: 1px solid #B64286;
  white-space: pre-wrap;
	overflow:hidden!important;
	resize: none;
	    border-radius: 4px;
}
textarea.input4 {
  width: 100%;
  height: 30em;
  padding: 0.5em;
  margin: 0.5em;
  box-sizing: border-box;
  border: 1px solid #B64286;
	font-size: 1.2em;
  -webkit-text-fill-color:#444;
	    margin-bottom: 2em;
	    border-radius: 4px;
}
textarea.input5 {
  width: 100%;
  height: 30em;
  padding: 0.5em;
  margin: 0.5em;
  box-sizing: border-box;
  border: 1px solid #B64286;
	font-size: 1.2em;
	    border-radius: 4px;
}
#output1,#output2, #output3{
  width: 94%;
  height: 10em;
  padding: 0.2em;
  margin: 0.2em;
  box-sizing: border-box;
  /*border: 1px solid black;*/
  white-space: pre-wrap;
	    border-radius: 4px;
}
 #output5 {
  width: 95%;
  height: 27em;
  padding: 0.5em;
  margin: 0.5em;
  box-sizing: border-box;
  /*border: 1px solid black;*/
  white-space: pre-wrap;
	 font-size: 1.2em;
	     border-radius: 4px;
}
textarea {
  -webkit-text-fill-color: transparent;
  overflow: auto;
}
#output1,#output2, #output3, #output5   {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
#output1 span:last-of-type, #output2 span:last-of-type, #output3 span:last-of-type, #output5 span:last-of-type  {
  color: red;
}

input#wordCount {
    width: 40px;
    text-align: center;
}


/*Eye viewer toggle*/
.textView {
    padding: 6px;
	margin:10px 0px;
	    font-size: 17px;
}

.wrapper {
  overflow: hidden;
}

.glyphicon{font-size: 1.5em;     margin-right: 0.2em;}

.eye {    
    float: left;
    margin-right: 1.2em;
}

.eye:before {
  content:"";
  display: inline-block;
  position: relative;
  color: #620100;
  left: 3px;
}

.eye.active:before {
    color: #620100 ;
  left: 0;
  top: 0px;
  border-color: #620100 transparent transparent;
}

.eye:hover{
  cursor: pointer;  color: #000;
  
}

.content {

  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.content.show {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}


/*Media Queries*/
@media (max-width: 1200px) {
	#output5 {
  		    width: 94%;
	}
}

@media (max-width: 992px) {
	#output1,#output2, #output3 {
  		width: 91%;
		height: 17em;
	}
	#output5 {
  		width: 96%;
	}
	textarea {
  		height: 17em;
	}
}

@media (max-width: 776px) {
	#output1,#output2, #output3 {
		height: 20em;
	}
	textarea {
  		height: 20em;
	}
}

@media (max-width: 690px) {
	#output1,#output2, #output3 {
  		width: 88%;
		height: 30em;
	}
	#output5 {
  		width: 95%;
	}
	textarea {
  		height: 30em;
	}
}

@media print {
	div.break-page{page-break-after: always}
	 table {
        zoom: 1
    }
}