body {
	position:relative;
	font-family: 'Roboto', sans-serif;
}

footer {
	background-color: #586b7a;
	color:#fff;
	font-weight:bold;
	position:absolute;
	bottom:0;
	width:100%;
	padding:1rem;
}

header {
	background-color: #586b7a;
	margin-bottom:1rem;
}

header .top-bar{
	background:none;
}

a {
	color: #586b7a;
}

a:hover {
	color: #262f36;
}

a:hover .fas {
	transform: rotate(-20deg) scale(2);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}

h1 {
	text-transform: uppercase;
	padding-top:1rem;
}

h1 a{
	font-size: 4rem;
	font-weight:bold;
	color:#fff;
	/*font-family: 'MedievalSharp', cursive;*/
}

h1:hover a{
	color: #f6d365;
}

h1:hover .fas {
	transform: rotate(-20deg);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}

h2 {
	font-size: 2.5rem;
color: #586b7a;
text-align: center;
font-weight: bold;
}

.main {
	min-height: 85.1vh;
	padding-bottom: 5rem;
}

.proofs {
	font-size: 1.25rem;
	margin-bottom:5rem;
	margin-top:1rem;
}

.proofs a{
	padding:1rem;
}

.proofs .grid-x {
	padding-bottom: 0.9375rem;
}

.proofs .grid-x:nth-child(odd)
{
	background-color: #FFF;
}
.proofs .grid-x:nth-child(even)
{
	background-color: #d4dce3;
}

.section-sortable {
	padding:4rem 0;
}

.section {
	margin:1rem auto;
	border: 1px solid #586b7a;
	padding: 1rem;
}

textarea::placeholder,input::placeholder {
	color:#586b7a;
}


.action-bar .button, button.button {
	background: #586b7a;
	color:#fff;
	padding:1rem;
	font-size:1rem;
	min-width: 2rem;
	margin:1rem;
	font-weight:bold;
	min-width: 200px;
}

.action-bar .button:hover, button.button:hover {
	background-image: -webkit-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: -o-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.action-bar .button:hover .fas,.action-bar .button:hover .far, button.button:hover .far,button.button:hover .fas {
	transform: rotate(-20deg) scale(2);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}


.add-block {
	font-size:9rem;
	background-color:#586b7a;
	color:#FFF;
	cursor:pointer;
	margin-top:-2rem;
}

.add-block:hover {
	color:#fff;
	/*background-image: -webkit-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: -o-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);*/
}

.add-block:hover .fas {
	transform: rotate(-20deg);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}

.add-section {
	padding-left:0;
	padding-right:0;
}

.add-section .grid-x .cell{
	margin-bottom:2rem;
	background-color:#586b7a;
	font-size:9rem;
	color:#FFF;
	cursor:pointer;
}

.add-section:hover .grid-x .cell {
	color:#fff;
	/*background-image: -webkit-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: -o-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);*/
}

.add-section:hover .fas{
	transform: rotate(-20deg);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}


.reference-templates{
	display:none;
}


.proof-block {
	background-color: #fff;
	border: 1px solid #586b7a;
	padding:1rem;
	margin-bottom:2rem;
}

.proof-block .handle{
	background: #586b7a;
	color: #fff;
	padding: 0 .5rem;
	margin-bottom: .5rem;
	font-size:1.5rem;
	display:inline-block;
	margin-top:-1rem;
	float:left;
}

.proof-block .handle:hover {
	background-image: -webkit-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: -o-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.proof-block .handle:hover .fas{
	transform: rotate(-20deg);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}

.proof-block .x-button{
	color:#fff;
	background:#586b7a;
	padding: 0 .5rem;
	margin-bottom: .5rem;
	font-size:1.5rem;
	display:inline-block;
	float: right;
	margin-top: -1rem;
}

.proof-block .x-button:hover{
	background-image: -webkit-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: -o-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.proof-block .x-button:hover .fas{
	transform: rotate(-20deg);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}

.section .handle{
	background: #586b7a;
	color: #fff;
	padding: 0 .5rem;
	margin-bottom: .5rem;
	font-size:1.5rem;
	display:inline-block;
	margin-top:-1rem;
	float:left;
}

.section .handle:hover {
	background-image: -webkit-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: -o-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.section .handle:hover .fas{
	transform: rotate(-20deg);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}

.section .x-button{
	color:#fff;
	background:#586b7a;
	padding: 0 .5rem;
	margin-bottom: .5rem;
	font-size:1.5rem;
	display:inline-block;
	float: right;
	margin-top: -1rem;
}

.section .x-button:hover{
	background-image: -webkit-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: -o-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.section .x-button:hover .fas{
	transform: rotate(-20deg) scale(2);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}

.size-container {
	clear:both;
	width:100%;
}

.size-container select,.size-container input[type=text] {
	display:inline-block;
	width:49%;
}

.proof-block textarea {
	height: 7rem;
}

.fas:hover,i:hover {
	transform: rotate(-20deg);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}

@-moz-keyframes spin { 50% { -moz-transform: rotate(20deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotate(20deg); } }
@keyframes spin { 50% { -webkit-transform: rotate(20deg); transform:rotate(20deg); } }


.top-bar, .top-bar ul {
	background-color: #586b7a;
}

.button {
	background: #fff;
	color:#586b7a;
	padding:1rem;
	font-size:1.25rem;
	min-width: 2rem;
	margin-right:1rem;
	font-weight:bold;
	min-width: 150px;
}

.button:hover {
	background-image: -webkit-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: -o-linear-gradient(left, #f6d365 0%, #fda085 51%, #f6d365 100%);
	background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.button:hover .fas,.button:hover .fab{
	transform: rotate(-20deg);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}

.login {
	width:100%;
	height:100%;
	 background: linear-gradient(255deg, #c3bf25, #25c347, #b425c3, #c32b7a, #2b49c3, #c32b2b);
	background-size: 1200% 1200%;

	-webkit-animation: RotatingGradient 31s ease infinite;
	-moz-animation: RotatingGradient 31s ease infinite;
	-o-animation: RotatingGradient 31s ease infinite;
	animation: RotatingGradient 31s ease infinite;
}

@-webkit-keyframes RotatingGradient {
    0%{background-position:0% 33%}
    50%{background-position:100% 68%}
    100%{background-position:0% 33%}
}
@-moz-keyframes RotatingGradient {
    0%{background-position:0% 33%}
    50%{background-position:100% 68%}
    100%{background-position:0% 33%}
}
@-o-keyframes RotatingGradient {
    0%{background-position:0% 33%}
    50%{background-position:100% 68%}
    100%{background-position:0% 33%}
}
@keyframes RotatingGradient {
    0%{background-position:0% 33%}
    50%{background-position:100% 68%}
    100%{background-position:0% 33%}
}

.login-container {
	color:#FFF;
	font-weight:bold;
}

.login-container h1 {
	font-size: 4rem;
	font-weight:bold;
	color:#fff;
	font-family: 'MedievalSharp', cursive;
}

.login-container h1 i {
	transform: rotate(-20deg) scale(1.5);
	-webkit-animation:spin 1s linear infinite;
	-moz-animation:spin 1s linear infinite;
	animation:spin 1s linear infinite;
}

.login-container .button {
	background-color:;
}

.login-container input {
	padding:1rem;
	width: 20%;
	display:inline;
}

.login-container .grid-x {
	min-height:100vh;
}

/**** Kristin's styles added 10/2022 ****/

.fas fa-dragon {
	display:none;
}

h1.site-heading {
	width: 250px;
	height: 55px;
	background: url(http://proofs.kalensolutions.com/assets/img/KALEN-LOGO-WHITE_proofs.png);
	text-indent: -9999px;
	margin:.5em;
}

.button {
	background: none;
	border-left: 5px solid #586b7a;
	color: #fff;
	text-transform: uppercase;
	border-radius: 10px;
}

.button:hover {
	background: #fff;
	color: #586b7a;
	border-left: 5px solid #9b9b9b;
	border-radius: 10px;
}

.login-container .login-heading {
	width:515px;
	height:54px;
	background: url(/assets/img/Login_heading.png);
	text-indent: -9999px;
	margin: 0 auto 0.5em auto;
}

.login-container .button {
    background-color: #fff;
    color: #586b7a;
}

.login-container .button:hover {
	background: #586b7a;
	color:#fff;
}

input[type='text'], select {
	border-radius:5px;
}

.input_content {
	border-radius:5px;
}

.section .x-button:hover   {
	background-image: none;
	background-image: none;
	background-image: none;
	background: #fff;
	color: #586b7a;
}

.section .handle:hover {
	background-image: none;
	background-image: none;
	background-image: none;
	background: #fff;
	color: #586b7a;
}
}

.add-block:hover {
	background-image: none;
	background-image: none;
	background-image: none;
	background: #fff;
	color: #586b7a;
}