/********************* GOXIT FORMS ******************/
/* form inline is one field one button*/
form.inline {width: 100%; display: flex; grid-template-columns: auto auto; align-items: center;}
form.inline input, form.inline textarea, form.inline button{display: inline-block;}
form.inline input[type="submit"] {width: max-content;}

input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select,button
{display: block; width: 100%;border:1px solid #030C38; border-radius: 13px; margin:0px 8px 0px 0;padding:10px;
  box-sizing: border-box;margin-left :0; color:#192733; -webkit-appearance: none;}
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select{background-color: #ffffff;}
input[type="radio"], input[type="checkbox"]  {accent-color: #030832;}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="password"]:focus,textarea:focus,select:focus,button:focus{outline:none; border: 2px solid #01F49F; box-shadow:0 7px 9px -7px #030832;}
input[type="text"]:disabled, input[type="email"]:disabled  {background-color: #B3C5CD;}
input[type="text"]:hover,input[type="email"]:hover,input[type="tel"]:hover,input[type="password"]:hover,select:hover,textarea:hover,button:hover{box-shadow:7px 7px 5px rgba(32,5,58,0.3), rgba(32,5,58,0.3) 7px 7px 5px;}


/********************* BUTTONS ******************/

input[type="submit"], input[type="button"] {pointer-events: auto; overflow: hidden;}
input[type="button"],input[type="submit"]{ padding-left:25px; padding-right: 25px;}



.twoevencols {display: grid; grid-template-columns:1fr;} /*contact*/
.loginform {max-width: max-content;}
.contact-panel {z-index:11;}
.CONTACT-Form {z-index:10;}
.FULL-Form {z-index:9;}
#particles-js {position:absolute; top:635px; width:100vw; z-index:4;}
#g-recaptcha-response{ z-index: -100;}

.contact-panel .lighten, .contact-panel .port-desc  { padding:40px 20px; align-items:start;}
.contact-panel {width:100%; margin:0;padding:50px 30px 80px 30px;}
.CONTACT-Form {width:100%;}


.Contact-Display {background: url(../images/banners/cat-banner3.avif) no-repeat;  box-shadow:inset 0px -15px 25px rgba(32,5,58,1); border-bottom: 1px solid #C95BE4;  background-size: auto 100%; background-position: right; background-color: #888c97; width:100%; position: absolute; top:86px; left:0px;}

  .PinkMax {width: 100% !important;; max-width: 100% !important;}
.WithIcon {padding:5px 20px 5px 5px !important;}

/*********** Form help ************/
.formhelp { display: flex; justify-items: center; grid-gap:5px; margin-top: 0; }
.formhelphide{ margin-top: -100%; transition: all 1s ease-in-out; }
.formhelpcontainer { overflow: hidden; }
.help-inner{ width:100%;display: flex; justify-items: center; color: #030C38; background-color: #ccc; border-radius: 10px;
padding: 5px 10px 5px 10px; font-weight: 400; font-size: 0.9em; justify-content:space-between;}
.tinydot {width:10px; height:10px;}
.helpspace { margin-top: 5px; }
.help-inner p {padding-right: 10px; margin-bottom: 0px;}
.swing-in {-webkit-animation: swing-in 0.45s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in 0.45s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; opacity:0;}
.swing-out {-webkit-animation: swing-out 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
	        animation: swing-out 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) both; }
  @-webkit-keyframes swing-in {
  0% {-webkit-transform: rotateX(-90deg); transform: rotateX(-90deg);-webkit-transform-origin: top;transform-origin: top; opacity: 0;}
  10% {-webkit-transform: rotateX(-80deg); transform: rotateX(-80deg)}
  20% {-webkit-transform: rotateX(-70deg); transform: rotateX(-70deg)}
  30% {-webkit-transform: rotateX(-60deg); transform: rotateX(-60deg); opacity: 0.3;}
  40% {-webkit-transform: rotateX(-50deg); transform: rotateX(-50deg)}
  50% {-webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); opacity: 0.5;}
  60% {-webkit-transform: rotateX(-30deg); transform: rotateX(-30deg)}
  70% {-webkit-transform: rotateX(-20deg); transform: rotateX(-20deg); opacity: 0.8;}
  80% {-webkit-transform: rotateX(-10deg); transform: rotateX(-10deg)}
  90% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg)}
  100% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1;}}
@keyframes swing-in {
   0% {-webkit-transform: rotateX(-90deg); transform: rotateX(-90deg);-webkit-transform-origin: top;transform-origin: top; opacity: 0;}
  10% {-webkit-transform: rotateX(-80deg); transform: rotateX(-80deg)}
  20% {-webkit-transform: rotateX(-70deg); transform: rotateX(-70deg)}
  30% {-webkit-transform: rotateX(-60deg); transform: rotateX(-60deg); opacity: 0.3;}
  40% {-webkit-transform: rotateX(-50deg); transform: rotateX(-50deg)}
  50% {-webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); opacity: 0.5;}
  60% {-webkit-transform: rotateX(-30deg); transform: rotateX(-30deg)}
  70% {-webkit-transform: rotateX(-20deg); transform: rotateX(-20deg); opacity: 0.8;}
  80% {-webkit-transform: rotateX(-10deg); transform: rotateX(-10deg)}
  90% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg)}
  100% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1;}}
@-webkit-keyframes swing-out {
  0% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1;}
  10% {-webkit-transform: rotateX(-10deg); transform: rotateX(-10deg)}
  20% {-webkit-transform: rotateX(-20deg); transform: rotateX(-20deg)}
  30% {-webkit-transform: rotateX(-30deg); transform: rotateX(-30deg); opacity: 0.8;}
  40% {-webkit-transform: rotateX(-40deg); transform: rotateX(-40deg)}
  50% {-webkit-transform: rotateX(-50deg); transform: rotateX(-50deg); opacity: 0.5;}
  60% {-webkit-transform: rotateX(-60deg); transform: rotateX(-60deg)}
  70% {-webkit-transform: rotateX(-70deg); transform: rotateX(-70deg); opacity: 0.3;}
  80% {-webkit-transform: rotateX(-80deg); transform: rotateX(-80deg)}
  90% {-webkit-transform: rotateX(-90deg); transform: rotateX(-90deg)}
  100% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg);-webkit-transform-origin: top; transform-origin: top; opacity: 0;}}
@keyframes swing-out {
  0% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1;}
  10% {-webkit-transform: rotateX(-10deg); transform: rotateX(-10deg)}
  20% {-webkit-transform: rotateX(-20deg); transform: rotateX(-20deg)}
  30% {-webkit-transform: rotateX(-30deg); transform: rotateX(-30deg); opacity: 0.8;}
  40% {-webkit-transform: rotateX(-40deg); transform: rotateX(-40deg)}
  50% {-webkit-transform: rotateX(-50deg); transform: rotateX(-50deg); opacity: 0.5;}
  60% {-webkit-transform: rotateX(-60deg); transform: rotateX(-60deg)}
  70% {-webkit-transform: rotateX(-70deg); transform: rotateX(-70deg); opacity: 0.3;}
  80% {-webkit-transform: rotateX(-80deg); transform: rotateX(-80deg)}
  90% {-webkit-transform: rotateX(-90deg); transform: rotateX(-90deg)}
  100% {-webkit-transform: rotateX(0deg); transform: rotateX(0deg);-webkit-transform-origin: top; transform-origin: top; opacity: 0;}}

  .slide-out-left {opacity:0; -webkit-animation: slide-out-left 3s ease-in 0.5s forwards; animation: slide-out-left 3s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; }
@keyframes slide-out-left {
  0% {-webkit-transform: translateX(0); transform: translateX(0) ;
    -webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-filter: blur(0);filter: blur(0); opacity: 1;}
  25% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(10px);filter: blur(10px); opacity: 1;}
  50% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(20px);filter: blur(20px); opacity: 0.8;}
  75% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(20px);filter: blur(20px); opacity: 0.4;}
  100% {-webkit-transform: translateX(-1000px);transform: translateX(-1000px) ;
    -webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-filter: blur(20px);filter: blur(20px); opacity: 0;}}
@-webkit-keyframes slide-out-left {
  0% {-webkit-transform: translateX(0); transform: translateX(0) ;
    -webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-filter: blur(20px);filter: blur(20px); opacity: 1;}
  25% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(10px);filter: blur(10px); opacity: 1;}
  50% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(20px);filter: blur(20px); opacity: 0.8;}
  75% {-webkit-transform: translateX(-250px); transform: translateX(-250px) ;
    -webkit-filter: blur(20px);filter: blur(20px); opacity: 0.4;}
  100% {-webkit-transform: translateX(-1000px);transform: translateX(-1000px);transform: translateX(0) ;
    -webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-filter: blur(20px);filter: blur(20px); opacity: 0;}}

    .roll-in-right{-webkit-animation: roll-in-right 1.5s ease-out both;animation: roll-in-right 1.5s ease-out both;}
.socials {display: flex; grid-gap:15px; position:absolute; bottom:40px; left:0px; z-index: 10000;}
@-webkit-keyframes roll-in-right {
  0% {-webkit-transform: translateX(800px) rotate(540deg); transform: translateX(800px) rotate(540deg);opacity: 0; border-radius: 100%;}
  90% {border-radius: 100%;}
  100% {-webkit-transform: translateX(0) rotate(0deg);transform: translateX(0) rotate(0deg);opacity: 1;border-radius: 25%;}}
@keyframes roll-in-right {
  0% {-webkit-transform: translateX(800px) rotate(540deg);transform: translateX(800px) rotate(540deg);opacity: 0;border-radius: 100%;}
  90% {border-radius: 100%;}
  100% {-webkit-transform: translateX(0) rotate(0deg);transform: translateX(0) rotate(0deg);opacity: 1;border-radius: 25%;}}
/*********** Form help ************/
.Contact-Display{min-height: 751px; max-height: 751px;}

.fieldcontent { min-width: 100%; max-width: 100%; margin-bottom: 10px;}
.FULL-Form, .CONTACT-Form {width:100%; justify-content: start;}
.fill { height: 100%;}

fieldset {display: flex; justify-content: right;}
.FULL-Form, .CONTACT-Form {border-radius: 0;
display: flex; flex-direction: column; justify-content: center;  min-height: max-content; }
.FULL-Form, fieldset {box-shadow:0px -4px 25px rgba(255,255,255,0.3);}
.FULL-Form {height:100%;} .CONTACT-Form {height: auto;}
.FULL-Form .PinkButton, .CONTACT-Form .PinkButton {max-width: max-content; padding: 15px 45px; font-size: 1.2em;}

.contact-panel{ display: grid; align-items: end; width: 100%; justify-content:stretch;}
.contact-panel {background: linear-gradient(90deg,rgba(77, 14, 139, 1) 20%, rgba(32, 99, 201, 0.5) 76%); }


fieldset .fieldcontent.formheader {padding:80px 15px 0px 15px; }
fieldset, .contact-panel {box-shadow:0px -4px 25px rgba(255, 255, 255, 0.5); border: none;}
fieldset .fieldcontent {padding:0px 15px 0px 15px;}
input[type="radio"] {width: 20px; height: 20px;}
input[type="checkbox"] {width: 20px; height: 20px;}
label {display: flex; grid-gap:5px; align-items: center; width: 100%;}
.labelright{ line-height: normal; display: flex; width: 100%;align-items: center; justify-content:space-between;}
fieldset {padding:40px 20px; }
.inputright
{display: flex; justify-content: flex-end;align-items: center; grid-gap:10px;}

.formitem {margin-bottom:15px; display: grid; grid-gap:5px; transition: all 0.6s ease;}
label,input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select {flex-grow:1;}
legend {font-weight: 600; font-size: 1em; padding: 0 20px;}
select{ background: url(../images/icons/Dot-Down-Select.svg ); background-position: right 10px bottom 5.5px; background-repeat: no-repeat;}

.messages {background: #081d47; background: linear-gradient(90deg, #160428 11%, #21226B 48%, #091F41 76%); border-radius: 10px; padding:10px; margin: 20px 0; border:1px solid #fff;box-shadow:7px 7px 5px rgba(32,5,58,0.3), rgba(32,5,58,0.3) 7px 7px 5px;}
.error{ display: flex; grid-gap:5px; align-content: center; font-weight: 600;  padding:10px;}
.success {color:#01F49F;}.success svg path {fill:#01F49F;}
.error{color:#C740AD;}.error svg path {fill:#C740AD;}


/**** Captcha FIXES *****/
#g-recaptcha-response{   margin: -78px 0 0 0 !important; height: 76px !important; opacity: 0;display: block !important;  position: absolute; left: 0; }
.g_recaptcha, #id_captcha {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; width:200px;}
#rc-imageselect {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; }

/* Password Toggle Styles */
.password-toggle { margin: 2px 0; display: flex; align-items: center; gap: 8px; }
.password-checkbox { display: none; }
.eye-checkbox { cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; font-size: 14px; }
.eye-icon { width: 17px;  height: 17px;  position: relative;  display: inline-block; }
.eye-icon svg { width: 100%; height: 100%; fill: #666; transition: all 0.2s ease; }
.eye-closed { display: block; }
.eye-open { display: none; }
.password-checkbox:checked + .eye-checkbox .eye-closed { display: none; }
.password-checkbox:checked + .eye-checkbox .eye-open { display: block; }
.eye-checkbox:hover .eye-icon svg { fill: #007bff; }

/* Text switching for show/hide passwords */
.show-text { display: inline; }
.hide-text { display: none; }
.password-checkbox:checked + .eye-checkbox .show-text { display: none; }
.password-checkbox:checked + .eye-checkbox .hide-text { display: inline; }
.button-container { display: flex; gap: 15px; align-items: center; }
.password-reset-button { padding: 10px 15px; display: inline-flex; align-items: center; text-decoration: none; font-size: 0.9em; font-weight: 600; }



@media (min-width: 2000px)
{
.Contact-Display {background-image: url(../images/banners/cat-banner.avif) !important; background-repeat:  no-repeat; background-size: auto !important; background-position: right !important; background-color: #888c97 !important; top:103px; }
}
@media (min-width: 1400px)
{
  .formleftlabel {grid-template-columns: max-content auto;}
  .formleftlabel label, .formleftlabel .formerror {padding: 3px 10px 3px 0;}
  fieldset {display: flex; }
}

@media (min-width: 1023px)
{
  .Contact-Display{min-height: 500px !important; max-height: 500px !important;}
}

@media (min-width: 913px)
{
  .FULL-Form {width:50% !important; top:134px !important;}/**this isnt absolute positioned any more?!*/
  .Contact-Display {top:127px !important;}
  .Contact-Display {min-height: 931px ; max-height: 931px;}
    input[type="radio"] {width: 25px ; height: 25px;}
  input[type="checkbox"] {width: 25px; height: 25px;}
   .fieldcontent { min-width: 433px; max-width: 433px;}
}

@media (min-width: 900px)
{
 /* .contact-panel{max-width:max-content; }*/
  .contact-panel {background: linear-gradient(90deg,rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 76%) !important; 
    box-shadow:0px 0px 0px rgba(0,0,0,0);}
     .contact-panel{justify-content: center;}
     .twoevencols {display: grid; grid-template-columns: 1fr 1fr;}  /*contact*/

.CONTACT-Form, .contact-panel {width:100% !important;}
  
 .FULL-Form { top:105px;}/**this isnt absolute positioned any more?!*/
  .Contact-Display {top:105px;}
}

@media (min-width: 600px)
{
  .Contact-Display {background-image: url(../images/banners/cat-banner2.avif); background-repeat:  no-repeat; background-size: auto 100%; background-position: right; background-color: #888c97; }
  .FULL-Form, .CONTACT-Form, .contact-panel {width:75%;}
}