.admin-bug-report{
	position: fixed;
	right: 5px;
    bottom: 15px;
	z-index: 9999999;

	h2 {
		font-size: 30px;
		text-align: center;
		margin-top: 20px;
		margin-bottom: 10px;
		font-weight: 500;
		line-height: 1.1;
	}

	.btn {
		display: inline-block;
		margin-bottom: 0;
		font-weight: 400;
		padding: 6px 12px;
		text-align: center;
		white-space: nowrap;
		vertical-align: middle;
		cursor: pointer;
		touch-action: manipulation;
		user-select: none;
		border: 1px solid transparent;
		border-radius: 4px;

		&:hover,
		&:focus,
		&:active {
			text-decoration: none;
			outline: 0;
		}

		&.toggle-report-button {
			color: #fff;
			width: 40px;
			height: 40px;
			padding: 5px 8px;
			font-size: 12px;
			line-height: 1.33;
			border-radius: 25px;
			border-color: #28a4c9;
			background-image: linear-gradient( to bottom, #5bc0de 0,#2aabd2 100% );
			text-shadow: 0 -1px 0 rgba( 0, 0, 0, .2 );
			box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 1px 1px rgba( 0, 0, 0, .075 );	
			
			&:hover,
			&:focus,
			&:active {
				background-color: #2aabd2;
				border-color: #269abc;
			}
			
			span {
				font-size: 1.0rem;
			}
		}
	}

	.toggle-container {
		position: absolute;
		z-index: 1000;
		display: none;
		padding: 5px 0;
		margin: 2px 0 0;
		font-size: 14px;
		text-align: left;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid rgba( 0, 0, 0, .15 );
		border-radius: 4px;
		box-shadow: 0 6px 12px rgba( 0, 0, 0, .175 );
		top: auto;
		right: 0;
		bottom: 100%;
		left: auto;
		margin-bottom: 10px;
		width: 290px;
		height: 320px;
		padding-right: 15px;
    	padding-left: 15px;
		
		.btn {
			&.submit-report-button {
				color: #fff;
				background-color: #5bc0de;
				text-shadow: 0 -1px 0 rgba( 0, 0, 0, .2 );
				box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 1px 1px rgba( 0, 0, 0, .075 );
				background-image: linear-gradient( to bottom, #5bc0de 0, #2aabd2 100% );
				background-repeat: repeat-x;
				border-color: #28a4c9;
				display: block;
				width: 100%;	
				
				&:hover,
				&:focus,
				&:active {
					background-color: #2aabd2;
					border-color: #269abc;
				}
			}
		}

		.invalid-settings {
			h2 {
				font-size: 1.5em;
				margin-bottom: 1.2em;
			}

			p {
				text-align: center;
			}
		}

		.report { 				
			display: none;

			&.is-open {
				display: block;
			}	
			
			.close {
				position: absolute;
				top: 5px;
				right: 10px;
				opacity: 0.6;
				cursor: pointer;
				color: #444;
				border: none;
				
				&:hover {  
					opacity: 1;
				}
			}
		
			textarea {
				height: 180px !important; 
				display: block;
				width: 100%;
				padding: 6px 12px;
				font-size: 14px;
				line-height: 1.42857143;
				color: #555;
				background-color: #fff;
				background-image: none;
				border: 1px solid #ccc;
				border-radius: 4px;
				box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 );
				transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
				overflow: auto;
			}
			
			.screenshot { 
				position: relative; 
				float: right;
				top: -24px; 
				right: 10px; 
				opacity: 0.6;
				cursor: pointer;
				
				&:hover {  
					opacity: 1;
				}
			}
		}

		.processing,
		.results {
			text-align: center;
			display: none;
			
			&.is-open {
				display: block;
			}

			p {
				height: 190px;
			}
		}

		.processing {
			h2 {
				margin-top: 118px;
			}	

			#ellipsis-wave {
				position: relative;
				text-align: center;
				width: 100px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 35px;

				span {
					display: inline-block;
					width: 12px;
					height: 12px;
					border-radius: 50%;
					margin-right: 3px;
					background: #303131;
					animation: wave 1.3s linear infinite;

					&:nth-of-type( 2 ) {
						animation-delay: -1.1s;
					} 
					
					&:nth-of-type( 3 ) {
						animation-delay: -0.9s;
					} 
				}
			}
			
			@keyframes wave {
				0%, 40%, 60% {
					transform: initial;
				}
			
				15% {
					transform: translateY( -10px );
				}
			}
		}

		.results {				
			.success { 
				display: none;

				&.is-open {
					display: block;
				}

				button {
					color: #fff;
					background-color: #5cb85c;
					border-color: #4cae4c;
					text-shadow: 0 -1px 0 rgba( 0, 0, 0, .2 );
					box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 1px 1px rgba( 0, 0, 0, .075 );
					background-image: linear-gradient( to bottom, #5cb85c 0 ,#419641 100% );
					background-repeat: repeat-x;
					border-color: #3e8f3e;
					display: block;
					width: 100%;	
					
					&:hover,
					&:focus,
					&:active {
						color: #fff;
						background-color: #449d44;
						border-color: #398439;
						background-color: #419641;
						background-position: 0 -15px;
					}
				}
			}
			
			.failed { 
				display: none;

				&.is-open {
					display: block;
				}

				button {
					color: #fff;
					background-color: #d9534f;
					border-color: #d43f3a;
					text-shadow: 0 -1px 0 rgba( 0, 0, 0, .2 );
					box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 1px 1px rgba( 0, 0, 0, .075 );
					background-image: linear-gradient( to bottom, #d9534f 0, #c12e2a 100% );
					background-repeat: repeat-x;
					border-color: #b92c28;
					display: block;
					width: 100%;	
					
					&:hover,
					&:focus,
					&:active {
						color: #fff;
						background-color: #c9302c;
						border-color: #ac2925;
						background-color: #c12e2a;
						background-position: 0 -15px;
					}
				}
			}
		}
	}
			
	.is-open {
		display: block;
	}
}

.settings_page_admin_bug_report {
	.wrap {
		h2 {
			margin-top: 1.5em;
		}
		
		input[type='text'],
		input[type='hidden'],
		input[type='password'],
		input[type='number'],
		input[type='email'],
		input[type='tel'],
		input[type='url'],
		input[type='search'],
		input[type='range'],
		input[type='date'],
		input[type='datetime'],
		input[type='datetime-local'],
		input[type='month'],
		input[type='week'],
		input[type='time'],	
		select,
		textarea {
			width: 300px;
		}

		.helper {
			margin-left: 25px;
		}

		.description {
			font-style: italic;
		}    

		.spinner {
			float: none;
			height: 25px;
			margin: 0;
			margin-left: 20px;
		}

		button + .helper {
			font-weight: 600;
			font-style: normal;

			.results {
				visibility: hidden;
				font-size: 1.1rem;
				line-height: 1.7rem;

				&.is-active {
					visibility: visible;
				}

				&.success {
					color: #0B0;
				}

				&.failure {
					color: #B00;
				}

				.dashicons {
					font-size: 2.0rem;
					line-height: 2.0rem;
				}

				.text {
					margin-left: 15px;
				}
			}
		}
	}
}