/*live*/

/*used on article 115002238729 to hide and define the text for the Ban Appeal form modal */
.hides {
	display: none;
}

/*defines the size of the check on the successful ticket submission banner*/
.notification-icon::before {
	font-size: 1.3rem;
}

/*increases the size, colour and positioning of the successful ticket submission banner*/
.notification-notice {
	background-color: #83AB50;
	color: #ECEDEE;
	top: 15%;
	width: 90%;
	margin: 0 auto;
	font-size: 1.875rem;
	display: inline-block;
	position: fixed;
	color: #ECEDEE;
	z-index: 5000;
	font-size: 1.875rem;
	left: 50%;
	margin-left: -45%;
	border: 1px solid rgba(7, 24, 32, 0.25);
	border-radius: 0.1875rem;
}

/*defines the size of the check on the successful ticket submission banner*/
.notification-dismiss::before {
	color: #ECEDEE;
	font-size: 1.3rem;
}

/*modal start*/

/* The Modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    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 */
}

/* Modal Content/Box */
.modal-content {
	z-index: 1006;
	border: 0;
	background-color: #ECEDEE;
	border-radius: 0.1875rem;
	background: #1C2C34;
	box-shadow: 0 0.1875rem 0.1875rem 0 #071820, inset 0 0.0625rem 0.0625rem 0 rgba(145, 181, 197, 0.75);
	padding: 1.25rem;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	position: absolute;
	top: 50%;
	width: 80%;
}

/*Modal Border*/
.modal-content:before {
    box-shadow: 0 0.0625rem 0.125rem 0 rgba(145, 181, 197, 0.75), inset 0 0.1875rem 0.1875rem 0 #071820;
    content: '';
    height: calc(100% - 0.875rem);
    left: 7px;
    left: 0.4375rem;
    pointer-events: none;
    position: absolute;
    top: 7px;
    top: 0.4375rem;
    width: calc(100% - 0.875rem);
}

/*modal for smaller screens*/
@media screen and (max-width: 450px){
	.modal-content {
		height: 80%;
		width: 100%;
		top: 50%;
		left: 50%;
		overflow-x: hidden;
		overflow-y: auto;
	}
  
	.modal-content-2 {
		overflow-y: auto;
		max-height: calc(100% - 0.875rem);
	}
  
	#confirmationbutton {
		float: left;
		width: 85% !important;
	}	
}


/* The Close Button */
.close {
    color: #FFCB05;
    float: right;
    font-size: 2em;
    font-weight: bold;
  	position: absolute;
  	top: -45px;
  	right: -20px;
}

.close:hover,
.close:focus {
    color: #ffe06b;
    text-decoration: none;
    cursor: pointer;
}

#confirmationbutton {
	width: 50% !important;
	max-width: 85%;
	-webkit-appearance: button;
	position: absolute;
	bottom: 0;
	right: 20px;
	margin-left: 200px;
	margin-right: 25px;
	margin-top: 69px;
	display: inline-block;
	text-align: center;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	-webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
	vertical-align: middle;
	border: 1px solid transparent;
	border-radius: 0;
	padding: 0.85em 1em;
	margin: 0 0 16px 0;
	margin: 0 0 1rem 0;
	font-size: 18px;
	font-size: 1.125rem;
	background-color: #FFCB05;
	color: #071820;
	font-family: "cinzel", "Times", "Times New Roman", serif;
	font-weight: bold;
	text-shadow: 0 2px 2px rgba(236, 237, 238, 0.75);
	text-shadow: 0 0.125rem 0.125rem rgba(236, 237, 238, 0.75);
	text-decoration: none;
	border: none;
	-webkit-transition: color 0.25s ease-out, -webkit-filter 0.25s ease-out;
	transition: color 0.25s ease-out, -webkit-filter 0.25s ease-out;
	transition: filter 0.25s ease-out, color 0.25s ease-out;
	transition: filter 0.25s ease-out, color 0.25s ease-out, -webkit-filter 0.25s ease-out;
	background: -webkit-linear-gradient(top, #FFCB05 0%, #ED761A 100%);
	background: linear-gradient(-180deg, #FFCB05 0%, #ED761A 100%);
	box-shadow: 0 0.1875rem 0.1875rem 0 #071820, inset 0 0.0625rem 0.1875rem 0 #ECEDEE, inset 0 0.125rem 0.125rem 0 rgba(236, 237, 238, 0.75);
	text-shadow: 0 1px 1px #EFDA96;
	text-shadow: 0 0.0625rem 0.0625rem #EFDA96;
}

/*modal end*/

/*wrapper for page content, central section for large screens*/
@media screen and (min-width: 64em) {
	div.container {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.6666666667%;
		flex: 0 0 66.6666666667%;
		padding-left: 0.625rem;
		padding-right: 0.625rem;
		max-width: 66.6666666667%;
		margin: 0 auto;
	}
}
/*wrapper for page content, full width for smaller screens*/
div.container {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    padding-left: 10px;
    padding-left: 0.625rem;
    padding-right: 10px;
    padding-right: 0.625rem;
    min-width: initial;
	margin: 0 auto;
}
/*adding a little space under captcha*/
#rc-imageselect, .g-recaptcha {
	padding-bottom: 10px;
	padding-bottom: 0.625rem;
}
/*reduce captcha on narrower screens*/
@media screen and (max-width: 400px){
	#rc-imageselect, .g-recaptcha {
		transform:scale(0.77);
		-webkit-transform:scale(0.77);
		transform-origin:0 0;
		-webkit-transform-origin:0 0;
	}
}
/*reduce captcha on really small screens*/
@media screen and (max-width: 333px){
	#rc-imageselect, .g-recaptcha {
		transform:scale(0.67);
		-webkit-transform:scale(0.67);
		transform-origin:0 0;
		-webkit-transform-origin:0 0;
	}
}


/*submit button*/
input[name="commit"] {
    display: inline-block;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
    transition: background-color 0.25s ease-out, color 0.25s ease-out;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 0;
    padding: 0.85em 1em;
    margin: 0 0 16px 0;
    margin: 0 0 1rem 0;
    font-size: 18px;
    font-size: 1.125rem;
    background-color: #FFCB05;
    color: #071820;
    color: #071820;
    font-family: "cinzel", "Times", "Times New Roman", serif;
    font-weight: bold;
    text-shadow: 0 2px 2px rgba(236, 237, 238, 0.75);
    text-shadow: 0 0.125rem 0.125rem rgba(236, 237, 238, 0.75);
    text-decoration: none;
    border: none;
    -webkit-transition: color 0.25s ease-out, -webkit-filter 0.25s ease-out;
    transition: color 0.25s ease-out, -webkit-filter 0.25s ease-out;
    transition: filter 0.25s ease-out, color 0.25s ease-out;
    transition: filter 0.25s ease-out, color 0.25s ease-out, -webkit-filter 0.25s ease-out;
    background: -webkit-linear-gradient(top, #FFCB05 0%, #ED761A 100%);
    background: linear-gradient(-180deg, #FFCB05 0%, #ED761A 100%);
    box-shadow: 0 0.1875rem 0.1875rem 0 #071820, inset 0 0.0625rem 0.1875rem 0 #ECEDEE, inset 0 0.125rem 0.125rem 0 rgba(236, 237, 238, 0.75);
    text-shadow: 0 1px 1px #EFDA96;
    text-shadow: 0 0.0625rem 0.0625rem #EFDA96;
}

/*manage required fields on Zendesk forms - invalid field formatting*/
input:required:invalid:not([type="checkbox"]):not([type="submit"]), input:focus:invalid:not([type="checkbox"]):not([type="submit"]), textarea:required:invalid, .date, .required-dropdown-false {
  border: 1px solid #990000 !important;
}

/*manage required fields on Zendesk forms - valid field formatting*/
input:required:valid:not([type="checkbox"]):not([type="submit"]), textarea:required:valid, .picker, .required-dropdown-true {
  border: 1px solid #007700 !important;
}

/* resizes all descriptors for form fields */
.form-field p {
  font-size: 0.8125rem;
  font-style: italic;
}

.form-boxed input, .form-boxed textarea {
  margin: 0 0 0 0 !important;
}

/* improves consistancy of spaces on the upload box for attachments */
#upload-dropzone {
  margin-bottom: 1rem;
}


/* 'pika' is the set of inbuilt classes for the date picker provided by zendesk*/
/* the default pika does not fit the formatting colours / styles. This brings it a little more in line */

.pika-table td, .pika-table th {
  height: 2rem !important;
  color: blue;
}

body .pika-label {
  display: inline-block;
  text-align: center;
  line-height: 1;
  border: 1px solid #071820;
  border-radius: 2px;
  margin: 0px 2px;
}

body .pika-label:hover {
  border: 1px solid #FFCB05;
  background-color: #071820;
  color: #FFCB05;
}

body .pika-button:hover {
  font-weight: 800;
  border: 2px solid #FFCB05;
}

/* properly formats dropdown displays */
.form-field .nesty-input {
  background-color: #071820;
  color: white;
  height: 2.4375rem;
  line-height: 2.4375rem;
  box-shadow: 0 0.0625rem 0.125rem 0 rgba(145,181,197,0.75);
  border-radius: .1875rem;
  border: 0px solid black;
}

/* reduces the height on the file dropzone to not be extortionate */
.form-field .upload-dropzone input[type="file"] {
  height: 50px;
}

/* makes upload links visable on the background */
.upload-item .upload-link {
    color: #aaa;
}

/*makes description for form description smaller and italic*/
.request_description p {
  font-size: 0.8125rem;
  font-style: italic;
}
/*makes description for form subject smaller and italic*/
#request_subject_hint {
  font-size: 0.8125rem;
  font-style: italic;
}

/*Adds spacing around the form*/
.form {
	margin-top: 25px;
	margin-bottom: 25px;
}

/*request form box outline and wrapper*/
.form-boxed {
    background: #1C2C34;
    box-shadow: 0 0.1875rem 0.1875rem 0 #071820, inset 0 0.0625rem 0.0625rem 0 rgba(145, 181, 197, 0.75);
    padding: 20px;
    padding: 1.25rem;
    position: relative;
    padding: 40px;
    padding: 2.5rem;
}
/*additional colour inside request form box*/
.form-boxed:before {
    box-shadow: 0 0.0625rem 0.125rem 0 rgba(145, 181, 197, 0.75), inset 0 0.1875rem 0.1875rem 0 #071820;
    content: '';
    height: calc(100% - 0.875rem);
    left: 7px;
    left: 0.4375rem;
    pointer-events: none;
    position: absolute;
    top: 7px;
    top: 0.4375rem;
    width: calc(100% - 0.875rem);
}

/* start of added !!! */

.form-field::not[.boolean] {
  height: 101px;
  margin-bottom: 20px;
}

/* zendesk forms already do not support browsers not running JS, with additions of conditional field and hidden field JS this covers the forms so they are hidden during load or with JS disabled, without applying display:none; to the fields */
.form-cover {
  position: absolute;
  height: 94%;
  width: 94%;
  background-color: #1C2C34;
  z-index: 5;
  left: 3%;
  top: 3%;
}

.form-cover > div {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 6;
  left: 50%;
}

/* adds a simple loader to the form cover */
.form-cover > div > div:nth-child(1) {
  position: absolute;
  background-color: #FFCB05;
  height: 10px;
  width: 10px;
  bottom:0px;
  animation-name: colourWarp;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  border-radius: 50%;
  opacity: 0.0;
}

.form-cover > div > div:nth-child(2) {
  position: absolute;
  background-color: #FFCB05;
  height: 10px;
  width: 10px;
  left:15px;
  bottom:0px;
  animation-name: colourWarp;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  border-radius: 50%;
  opacity: 0.0;
  animation-delay: 1s;
}

.form-cover > div > div:nth-child(3) {
  position: absolute;
  background-color: #FFCB05;
  height: 10px;
  width: 10px;
  left:30px;
  bottom:0px;
  animation-name: colourWarp;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  border-radius: 50%;
  opacity: 0.0;
  animation-delay: 2s;
}

.form-cover > p {
  animation-name: textFade;
  animation-duration: 5s;
  text-align: center;
  color: #FFCB05;
  font-size: 0.8125rem;
  font-style: italic;
  z-index: 10;
  position: absolute;
  width: 100%;
}


.request_custom_fields_360000334845, #request_custom_fields_360000363005, #request_custom_fields_360000362985, .request_custom_fields_28063589, .request_custom_fields_360000770057, #request_custom_fields_360000747258 {
  display: none !important;
}

#request_custom_fields_360000277589, #request_custom_fields_360000281965 {
  display: none;
}

.request_custom_fields_360000364205 > a, .request_custom_fields_360000360569 > a {
  margin-bottom: 30px;
}

/* small buttons to allow the addition or removal of lines via JS */
.addNameLine, .addEmailLine {
  text-rendering: optimizeLegibility;
  background-color: #FFCB05;
  color: black;
  height: 40px;
  width: 40px;
  margin-left: 1rem;
  border-radius: 4px !important;
  border: 1px solid #071822;
}

.deleteNameLine, .deleteEmailLine {
  text-rendering: optimizeLegibility;
  background-color: #FFCB05;
  color: black;
  height: 40px;
  width: 40px;
  margin-left: 1rem;
  border-radius: 4px !important;
  border: 1px solid #071822;
}

/* .now is given to custom line fields that must be collected and transfered to form at form submit */
.now[type='text'], .now[type='email']{
  min-width: 12rem;
  max-width: 70%;
  position: relative;
  float: left;
}

/* removes the add line button from the last line in the limited to 5 section */
#emailAddress4 > .addEmailLine, #characterName4 > .addNameLine {
  display: none;
}

#emailAddress4 > .deleteEmailLine, #characterName4 > .deleteNameLine {
  margin-left: 72px;
}

/* scales the custom single line fields for smaller screens */
@media only screen and (max-width: 500px) and (min-width: 320px) {
  .addNameLine {
    height: 40px;
    width: 40px;
    margin-left: 0.5rem;
  }

  .deleteNameLine {
    margin-left: 0.5rem;
  }

  .now[type='text'], .now[type='email']{
    min-width: 5rem;
    max-width: 50%;
    position: relative;
    float: left;
  }
  
  #emailAddress4 > .deleteEmailLine, #characterName4 > .deleteNameLine {
    margin-left: 3.5rem;
  }
}
/* scales the custom single line fields for smaller screens - a better fit for very narrow screens */
@media only screen and (max-width: 319px) {
  .addNameLine {
    height: 35px;
    width: 35px;
    margin-left: 0.2rem;
    margin-bottom: 5px;
  }

  .deleteNameLine {
    height: 35px;
    width: 35px;
    margin-left: 0.2rem;
    margin-bottom: 5px;
  }

  .now[type='text'], .now[type='email']{
    min-width: 5rem;
    max-width: 50%;
    position: relative;
    float: left;
  }
  
  #emailAddress4 > .deleteEmailLine, #characterName4 > .deleteNameLine {
    margin-left: 2.5rem;
  }
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.fa.fa-loader:before {
  content: '\f1ce';
}

.fa.fa-loader {
  position: absolute;
  animation-name: loader;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: rotate(0deg);
  left: 2.4rem;
}


@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* loader on over the form */
@keyframes colourWarp {
  0% {
    opacity: 0.0;
  }
  25% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
  75% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes textFade {
  0% {
    opacity: 0.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1;
  }
}

/*standfirsts and error-solution text boxes*/
/* basic stand first */
.support-article__body aside {
  text-align: center;
  box-shadow: 0 0.0625rem 0.125rem 0 rgba(145, 181, 197, 0.75); 
  padding: 20px; 
  background-color: #071820;
  margin: 10px 0px;
  border-radius: 0.1875rem;
}

/* enhanced stand first */
.support-article__body .article-block-yellow {
  border: 1px solid rgba(255, 203, 5, 0.7);
}

/* error message summary */
.support-article__body .article-block-red {
  text-align: center;
  box-shadow: 0 0.0625rem 0.125rem 0 rgba(145, 181, 197, 0.75); 
  padding: 5px; 
  background-color: rgba(218, 34, 46, 0.2); 
  border: 1px solid #DA222E;
}

/* solution summary */
.support-article__body .article-block-green {
  text-align: center;
  box-shadow: 0 0.0625rem 0.125rem 0 rgba(145, 181, 197, 0.75);
  padding: 5px; 
  background-color: rgba(34, 218, 46, 0.1); 
  border: 1px solid #22d84f;
}

/* change line height for article text */
.support-article__body p {
  line-height: 1.9rem;
}

/* add CSS for ghost button classes */
.button-ghost {
  font-family: "cinzel", "Times", "Times New Roman", serif;
  font-weight: bold;
  display: inline-block;
  border: 2px solid;
  border-radius: 4px;
  padding: 5px 20px;
  margin: 5px;
  -webkit-transition: border-color 0.5s, color 0.5s, background-color 0.5s; /* Safari */
  transition: border-color 0.5s, color 0.5s, background-color 0.5s;
  background: none;
  min-width: 100px;
  text-align: center;
}

.button-ghost:hover {
  color: #12222A;
}

.button-ghost-blue {
  border-color: #28A9E0;
  color: #28A9E0;
}

.button-ghost-blue:hover {
  background-color: #28A9E0;
}

.button-ghost-white {
  border-color: white;
  color: white;
}

.button-ghost-white:hover {
  background-color: white;
}

.button-ghost-yellow {
  border-color: #FFCB05;
  color: #FFCB05;
}

.button-ghost-yellow:hover {
  background-color: #FFCB05;
}

.button-ghost-brown {
  border-color: #998862;
  color: #998862;
}

.button-ghost-brown:hover {
  background-color: #998862;
}

.button-ghost-green {
  border-color: #83AB50;
  color: #83AB50;
}

.button-ghost-green:hover {
  background-color: #83AB50;
}

.button-ghost-orange {
  border-color: #FFA105;
  color: #FFA105;
}

.button-ghost-orange:hover {
  background-color: #FFA105;
}

/* adds class for rounded version of gradient button to fit them with the ghost buttons */
.button-gradient-orange {
  font-family: "cinzel", "Times", "Times New Roman", serif;
  font-weight: bold;
  display: inline-block;
  border-radius: 4px;
  padding: 7px 22px;
  margin: 5px;
  -webkit-transition: border-color 0.5s, color 0.5s, background-color 0.5s, box-shadow 0.5s, filter 0.5s; /* Safari */
  transition: border-color 0.5s, color 0.5s, background-color 0.5s, box-shadow 0.5s, filter 0.5s;
  background: linear-gradient(-180deg, #FFCB05 0%, #ED761A 100%);
  min-width: 100px;
  text-align: center;
  color: #12222A;
  box-shadow: 0.2rem 0.2rem 0.525rem 0 rgba(0, 0, 0, 0.9);
}

.button-gradient-orange:hover {
  filter: brightness(1.3);
  color: black;
  box-shadow: none;
}

/* adds image borders */
.support-article__body img {
  background: #071820;
  box-shadow: 0 0 0.1875rem 0 #91B5C5, inset 0 0.0625rem 0.25rem 0 #071820;
}

/*adds classes for formatting of large and medium font awesome icons prepended to links based on classes*/
a.big-fa {
  position: relative;
  width: 130px;
  display: inline-block;
  text-align: center;
  font-family: "MuseoSans","Arial",sans-serif,Helvetica,Roboto,Arial,sans-serif;
  margin-top: 75px;
}

a.big-fa:before {
  top: -70px;
  position: absolute;
  padding: 0px;
  font-family: FontAwesome;
  width: 80%;
  left: 10%;
}

.big-fa:before {
  font-size: 70px !important;
}

a.med-fa {
  position: relative;
  width: 130px;
  display: inline-block;
  text-align: center;
  font-family: "MuseoSans","Arial",sans-serif,Helvetica,Roboto,Arial,sans-serif;
  margin-top: 75px;
}

a.med-fa:before {
  top: -65px;
  position: absolute;
  padding: 0px;
  font-family: FontAwesome;
  width: 80%;
  left: 10%;
} 

.med-fa:before {
  font-size: 50px !important;
}

.fa.fa-cloud:before {
  content: '\f0c2';
}

.fa.fa-windows:before {
  content: '\f17a';
}

.fa.fa-apple:before {
  content: '\f179';
}

.fa.fa-linux:before {
  content: '\f17c';
}

.fa.fa-mobile:before {
  content: '\f10b';
}

img.round-border {
  border-radius: 50%;
}

.fa > h1, .fa > h2, .fa > h3, .fa > h4, .fa > p, .fa > span, .fa > a {
  padding-left: 20px;
  display: inline;
}

/* styling for '401 errors' */
.error-column {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px;
}

/* stepflow wizard */
#tiers > p {
	display: none;
}
#tiers > .activeQuestion {
	display: block;
}
#tiers > .activeAnswer {
	display: inline-block;
  border: 2px solid #28A9E0;
  border-radius: 4px;
  color: #28A9E0;
	cursor: pointer; 
  font-family: "cinzel", "Times", "Times New Roman", serif;
  font-weight: bold;
  padding: 5px 20px;
  margin: 5px;
  -webkit-transition: border-color 0.5s, color 0.5s, background-color 0.5s; /* Safari */
  transition: border-color 0.5s, color 0.5s, background-color 0.5s;
  background: none;
  min-width: 100px;
  text-align: center;
}
#tiers {
	text-align:center;
}
#tiers > .goUp {
	float: left;
	font-size: small;
	width: 100%;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}
#tiers > .activeAnswer:hover {
  color: #12222A;
  background-color: #28A9E0;
}

.set .lineDown:nth-child(5) .addEmailLine {
  visibility:hidden
}