/*KITTY ADDED - for template_simple.jsp - create account process */
/* Hide google recaptcha badge */
.grecaptcha-badge { visibility: hidden; }
@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-static {
    display: inline-block;
  }
  .form-inline .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .form-inline .input-group .input-group-addon,
  .form-inline .input-group .input-group-btn,
  .form-inline .input-group .form-control {
    width: auto;
  }
  .form-inline .input-group > .form-control {
    width: 100%;
  }
  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio label,
  .form-inline .checkbox label {
    padding-left: 0;
  }
  .form-inline .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.alert-dismissable,
.alert-dismissible {
  padding-right: 32px;
}
.header {padding:25px 20px 20px 20px; color:#a1a1a4; font-weight:bold; font-size:18px; line-height:36px;}
.header h1 {font-size:18px;margin:0;line-height:36px;}
@media (max-width: 420px) {.header, .header h1 {font-size:14px;}}
.step_bar {margin-bottom: 20px;margin-top: 5px;width:100%;}
.footer {
    background: rgb(246, 246, 246);
	background: -moz-linear-gradient(90deg, rgb(246, 246, 246) 0%, rgb(255, 255, 255) 100%);
	background: -webkit-linear-gradient(90deg, rgb(255,255,255) 0%, rgb(246,246,246) 100%);
	background: -o-linear-gradient(90deg, rgb(246, 246, 246) 0%, rgb(255, 255, 255) 100%);
	background: -ms-linear-gradient(90deg, rgb(246, 246, 246) 0%, rgb(255, 255, 255) 100%);
	background: linear-gradient(180deg, rgb(246, 246, 246) 0%, rgb(255, 255, 255) 100%);
    width: 100%;
    padding: 60px 0;
    margin-top: 40px;
    border-top: 3px solid #eaeaea;
    color: #555;
    font-size: 12px;
    line-height: 120%;
    text-align:center;
}
.footer a {color: #555;}
.footer #kitco-branding {display: flex; flex-direction: column; gap: 10px;}
.footer #recaptcha-attribution {text-align: center;}
.container, .oldie .container {
  width: 400px;
  margin-right: auto;
  margin-left: auto;
  padding-left:0;
  padding-right:0;
}
@media (max-width: 420px) {
  .container {
    width: 320px;
  }
}

.footer .container {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex-wrap: wrap;
}
.footer .container:before, .footer .container:after {display: none;}
@media (min-width: 480px) {
	.footer #kitco-branding {width: 396px; flex-direction: row; gap: 0px;justify-content: space-between;margin: 0 auto;}
}

@media (min-width: 768px) {
	.footer .container {
		width: max-content;
	}
}


  	.form-acct-opening {border:1px solid #dcdcdc; padding:20px;}
  	.form-acct-opening-footer {border:1px solid #dcdcdc; border-top:0;padding:15px 20px; font-size:16px; color: #000;}
  	.form-acct-opening-footer a {color: #000; text-decoration: underline;display:inline-block;}
  	.form-acct-opening .col-xs-1, .form-acct-opening .col-xs-2, .form-acct-opening .col-xs-3, .form-acct-opening .col-xs-4, 
  	.form-acct-opening .col-xs-5, .form-acct-opening .col-xs-6, .form-acct-opening .col-xs-7, .form-acct-opening .col-xs-8, 
  	.form-acct-opening .col-xs-9, .form-acct-opening .col-xs-10, .form-acct-opening .col-xs-11 {padding:0;}
  	.form-acct-opening .col-xs-1.left, .form-acct-opening .col-xs-2.left, .form-acct-opening .col-xs-3.left, .form-acct-opening .col-xs-4.left, 
  	.form-acct-opening .col-xs-5.left, .form-acct-opening .col-xs-6.left, .form-acct-opening .col-xs-7.left, .form-acct-opening .col-xs-8.left, 
  	.form-acct-opening .col-xs-9.left, .form-acct-opening .col-xs-10.left, .form-acct-opening .col-xs-11.left {padding-right:5px;}
  	.form-acct-opening .col-xs-1.right, .form-acct-opening .col-xs-2.right, .form-acct-opening .col-xs-3.right, .form-acct-opening .col-xs-4.right, 
  	.form-acct-opening .col-xs-5.right, .form-acct-opening .col-xs-6.right, .form-acct-opening .col-xs-7.right, .form-acct-opening .col-xs-8.right, 
  	.form-acct-opening .col-xs-9.right, .form-acct-opening .col-xs-10.right, .form-acct-opening .col-xs-11.right {padding-left:5px;}
  	.form-acct-opening .col-xs-5.left {padding-right:5px;}
  	.form-acct-opening .col-xs-7.right {padding-left:5px;}
  	::-webkit-input-placeholder {font-style: italic;}
:-moz-placeholder { /* Firefox 18- */font-style: italic;}
::-moz-placeholder {  /* Firefox 19+ */font-style: italic;}
:-ms-input-placeholder { font-style: italic;}

/*Step 1*/
#selectAcctType {width:100%;text-align:center;}
#selectAcctTypeList {width:100%;}
.showHide {width: 55px;color: #000 !important;}
.hintPwd {margin-right:0.6em; color: #28a900;}
@media (max-width: 420px) {.hintPwd {display:block;}}
.hintPwd.failed {color: #0680cd;}
/*Other account type*/
.other-acct-types .span-label{display:inline-block; width:70px;float:left;}
.other-acct-types p {overflow:hidden;}
.span-multi-rows {display:inline-block; float:left;}
a.pdf {background: transparent url("/images/icon_pdf.gif") no-repeat scroll 0 5px;
 				padding: 3px 0 0 18px;cursor:pointer;}
 				
 		/*Step 2*/
 		#helpBlockDOB {margin-bottom:0;}
 		#dob-month-day .select2-container--bootstrap {width:100% !important;}
 		.has-error .form-group.no-ui .form-control{border:1px solid #cccccc;}

/*General styles (out of Boostrap)*/
button.dropdown-toggle .text {float:left;}
button.dropdown-toggle .caret {float:right;margin-top:5px;}
/*buttons with spinner*/
.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;
  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

.has-spinner.active {cursor:progress;}
.has-spinner.active .spinner {opacity: 1;width: auto; /* This doesn't work, just fix for unkown width elements */}
.has-spinner.btn-mini.active .spinner {width: 10px;}
.has-spinner.btn-small.active .spinner {width: 13px;}
.has-spinner.btn.active .spinner {width: 16px;}
.has-spinner.btn-large.active .spinner {width: 19px;}
@-webkit-keyframes spinnerRotate
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(360deg);}
}
.icon-spin {    
	-webkit-animation-name: spinnerRotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinnerRotate;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinnerRotate;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;}

.checkbox label{font-size:12px; color: #333333; line-height:1.25em;}
label a.forgot-link {font-size: 14px; color: #0680cd;float:right;line-height:1.67em;}
label a.icon-info{font-size: 12px; color: #a9a8a8;}
label .sub-label {font-size: 12px; color: #a9a8a8;}
.hint-block {font-size:11px; color: #a9a8a8; line-height:1.25em;}
.form-group.has-shared-help-block {margin-bottom: 5px;}
.form-group.no-btm-margin, .form-group.no-btm-margin .help-block {margin-bottom: 0px;}
.glyphicon-info-sign::before {content: url("/images/icon-info.gif");}
.has-success #glyphiconOtherOccupation {display:none !important;}
.heading-message {color: #0680cd; font-size: 16ppx; font-weight:bold;margin-bottom:20px;}
#fg-security-q .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {overflow:hidden; width:89%;}
@media (max-width: 420px) {
	#fg-security-q .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {overflow:hidden; width:79%;}
}
#helpBlockDOB {display:none;margin-top:5px;}

/*Step 3*/
#fg-country .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, 
#fg-state-province .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice 
{overflow:hidden; width:75%;}
@media (max-width: 420px) {
#fg-country .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, 
#fg-state-province .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {width: 60%;}
}

/*stand-alone login & create new pwd - forgot pwd page*/
#login-form #group-pwd .form-control-feedback, #pwd-input-container .form-control-feedback {right: 65px;}
#login-form .sub-label-div {font-size: 13px; line-height: 1.2em; margin-bottom: 8px;}
#login-form .has-feedback label ~ .form-control-feedback {top: 50px;}
.eac-sugg {color: #ccc;}



/* Customized radio and checkbox */
.checkbox input[type=checkbox], .radio input[type=radio] {display: none;}
.checkbox label, .radio label {cursor: pointer;position: relative;}
.form-inline .checkbox label, .form-inline .radio label{padding-left:20px;line-height: 1em;margin-left: 30px;margin-right:26px;}
@media (max-width: 420px) {
	.form-inline .checkbox label, .form-inline .radio label{margin-left: 20px;margin-right:10px;}
}
.checkbox label:before, .radio label:before {content:"";width:14px; height:14px; position:absolute; left:0; top:0;background: #fff url("/images/chkbox-radio.gif") no-repeat;}
.checkbox label:before {background-position: 0 -16px;}
.radio label:before {background-position: -15px -16px;}
input[type=radio]:checked + label:before { background-position: -15px 0;}
input[type=checkbox]:checked + label:before {background-position: 0 0;}
.form-group.multi-col {clear:both;margin-bottom: 18px;}

/*CUSTOMIZE IN BOOTSTRAP IF POSSIBLE*/
.dropdown button {padding: 6px 8px;}
label {font-size: 16px;font-weight:normal;margin-bottom: 3px;}
label.full-width {width:100%;}
.radio label {font-size: 14px;}
.caret {border-top: 12px dashed #949494;
		  border-top: 12px solid \9;
		  border-right: 8px solid transparent;
		  border-left: 8px solid transparent;}
.help-block {font-size: 13px; line-height: 1.25em;}
.form-control {padding: 6px 8px;}
.form-group {margin-bottom: 18px;}
.btn-primary, .btn-primary:hover {background: rgb(9, 93, 178);
	background: -moz-linear-gradient(90deg, rgb(8,128,205) 0%, rgb(0,56,149) 100%);
	background: -webkit-linear-gradient(90deg, rgb(0,56,149) 0%, rgb(8,128,205) 100%);
	background: -o-linear-gradient(90deg, rgb(8,128,205) 0%, rgb(0,56,149) 100%);
	background: -ms-linear-gradient(90deg, rgb(8,128,205) 0%, rgb(0,56,149) 100%);
	background: linear-gradient(180deg, rgb(8,128,205) 0%, rgb(0,56,149) 100%);border:0;}
.btn-lg, .btn-group-lg > .btn {font-size: 16px;line-height:1em; font-weight:bold;margin: 15px 0;}
h4 {font-size: 16px;font-weight:bold;margin-bottom: 25px;}
.alert h4 {margin:0;}
h5 {font-weight:bold; font-size:14px;margin-bottom: 0;}
.tooltip {margin-top: 10px;}
.tooltip.bottom {margin-top:1px;}
.tooltip-inner {background: #fff;color: #000;text-align:left;max-width:250px;border: 1px solid #0680cd;padding: 13px;}
.tooltip > .tooltip-arrow, .tooltip > .tooltip-arrow::after {
    border-color: transparent;
    border-style: solid;
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}
.tooltip > .tooltip-arrow {
    border-width: 11px;
}
..tooltip.bottom > .tooltip-arrow {
    border-bottom-color: rgba(6, 128, 205, 0.25);
    border-top-width: 0;
    left: 50%;
    margin-left: -11px;
    top: -11px;
}
*::after, *::before {
    box-sizing: border-box;
}
.tooltip> .tooltip-arrow, .tooltip > .tooltip-arrow::after {
    border-color: transparent;
    border-style: solid;
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}
.tooltip.bottom .tooltip-arrow {border-bottom-color: #0680cd;border-width: 0 7px 6px;}
.tooltip > .tooltip-arrow::after {
    border-width: 10px;
    content: "";
}
.tooltip.bottom > .tooltip-arrow::after {
    border-bottom-color: #fff;
    border-top-width: 0;
    content: " ";
    margin-left: -10px;
    top: 1px;
}
.form-control-feedback {
    display: none;
}
.has-error .form-control-feedback {
    display: block;
}
.has-error .form-group.no-ui .form-control:focus {
	border-color: #66afe9;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}