@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,600);

body {font-family: 'Poppins', sans-serif;}
:root{--page-bg: #dff1f3; --frame-border: rgba(0,0,0,.35); --teal: #49b8c6; --teal-dark: #2d93a0; --text-shadow: 0 2px 8px rgba(0,0,0,.35);}
body{background: var(--page-bg); min-height: 100vh; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}

/* Center stage wrapper */
.stage{min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem 5rem; /* extra bottom for cookie */ }
/* The big rounded “device/frame” */
.device-frame{width: min(980px, 92vw); height: min{500px, 38vw}; border-radius: 28px; border: 6px solid var(--frame-border); background: #fff; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.18);}
/* Hero area with background image */
.hero{position: relative; min-height: clamp(860px, 92vh, 1060px); background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.18) 35%, rgba(0,0,0,.10) 70%, rgba(0,0,0,.18) 100%), url("../img/backgrounds/welcome.jpg"); background-size: stretch; background-position: center; padding: clamp(18px, 2.2vw, 28px);}
.forgotpanel{position: relative; min-height: clamp(660px, 72vh, 860px); background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.18) 35%, rgba(0,0,0,.10) 70%, rgba(0,0,0,.18) 100%), url("../img/backgrounds/login.jpg"); background-size:cover;  background-position: center; padding: clamp(18px, 2.2vw, 28px);}
.registerpanel{position: relative; min-height: clamp(1020px, 102vh, 1060px); background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.18) 35%, rgba(0,0,0,.10) 70%, rgba(0,0,0,.18) 100%), url("../img/backgrounds/login.jpg"); background-size:cover;  background-position: center; padding: clamp(18px, 2.2vw, 28px);}

/* Top logo */
.brand{display: inline-flex; align-items: baseline; gap: .35rem; font-weight: 800; letter-spacing: .5px; font-size: clamp(42px, 4.4vw, 64px); line-height: 1; color: #fff; text-shadow: var(--text-shadow); user-select: none;}
.brand img {max-width: 262px;}
.brand .p{color: #79d7e2; -webkit-text-stroke: 3px #0b0b0b; text-stroke: 3px #0b0b0b; transform: skewX(-8deg); display: inline-block;}
.brand .rest{-webkit-text-stroke: 3px #0b0b0b; text-stroke: 3px #0b0b0b; display: inline-block; transform: skewX(-8deg);}

/* Left copy */
.tagline{margin-top: clamp(16px, 2vw, 26px); max-width: 520px; color: #fff; text-shadow: var(--text-shadow); margin-top: 10px;}
.tagline h2{font-size: clamp(22px, 2.3vw, 32px); font-weight: 800; margin: 0 0 .35rem;}
.tagline p{margin: 0; opacity: .95; font-size: clamp(13px, 1.2vw, 16px); font-weight: 600;}
/* Login panel overlay */
.login-panel{position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); width: min(420px, 92%); border-radius: 16px; border: 2px solid rgba(0,0,0,.65); background: rgba(255,255,255,.72); backdrop-filter: blur(6px); box-shadow: 0 18px 40px rgba(0,0,0,.25); padding: 18px 18px 16px;}
.login-panel h3{position: relative; font-weight: 900; color: #54bccc; font-size: 40px; line-height: 1.05; margin-bottom: 6px; margin-top: 0px;}
.login-panel .wave{font-size: .85em; vertical-align: middle;}
.login-panel .subhead{color: rgba(0,0,0,.62); font-weight: 700; margin-bottom: 10px; font-size: 14px;}
.login-panel .desc {font-size: 16px;opacity: 0.7;letter-spacing: 0.57px; color: black;}

.register-panel {position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: min(420px, 92%); border-radius: 16px; border: 2px solid rgba(0,0,0,.65); background: rgba(255,255,255,.72); backdrop-filter: blur(6px); box-shadow: 0 18px 40px rgba(0,0,0,.25); padding: 18px 18px 16px;}}
.register-panel h3{position: relative; font-weight: 900; color: #54bccc; font-size: 40px; line-height: 1.05; margin-bottom: 6px; margin-top: 0px;}
.register-panel .wave{font-size: .85em; vertical-align: middle;}
.register-panel .subhead{color: rgba(0,0,0,.62); font-weight: 700; margin-bottom: 10px; font-size: 14px;}
.register-panel .desc {font-size: 16px;opacity: 0.7;letter-spacing: 0.57px; color: black;}


form {margin-bottom: 20px;}
.form-label{font-weight: 800; color: rgba(0,0,0,.70); font-size: 13px;}
.form-control{border-radius: 10px; border: 2px solid rgba(0,0,0,.14); padding: .65rem .75rem; background: rgba(255,255,255,.65);}
.form-control:focus{border-color: rgba(73,184,198,.65); box-shadow: 0 0 0 .25rem rgba(73,184,198,.18); background: #fff;}
.login-actions{display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 6px; flex-wrap: wrap;}
.forgot{color: #2ea9bb; font-weight: 800; text-decoration: none; font-size: 13px;}
.forgot:hover{ text-decoration: underline; }
.btn-login{width: 100%; margin-top: 12px; background: var(--teal); border: none; border-radius: 10px; padding: .75rem 1rem; font-weight: 900; font-size: 16px; box-shadow: 0 10px 22px rgba(0,0,0,.18);}
.btn-login:hover{ background: var(--teal-dark); }
/* Footer inside frame */
.frame-footer{position: absolute; left: 0; right: 0; bottom: 8px; padding: 0 18px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; color: rgba(255,255,255,.85); text-shadow: var(--text-shadow);font-size: 12px; font-weight: 700;}
.frame-footer a{color: rgba(255,255,255,.90); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35);}
.frame-footer a:hover{border-bottom-color: rgba(255,255,255,.85);}
.errors, .success {padding: 12px;border-radius: 12px;border: 0;font-size: 15px;}
.btn-loading {position: relative;box-shadow: none;}
.btn-loading:before {display: none;}
.btn-loading:after {top: 0;right: 0;bottom: 0;left: 0;opacity: 1;width: 100%;height: 100%;padding: 0 16px;border-radius: 4px;transform: none;background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='50px' height='50px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3crect x='0' y='0' fill='none' class='bk'%3e%3c/rect%3e%3ccircle cx='50' cy='50' r='40' stroke='%23fff' fill='none' stroke-width='6' stroke-linecap='round'%3e%3canimate attributeName='stroke-dashoffset' dur='1.5s' repeatCount='indefinite' from='0' to='502'%3e%3c/animate%3e%3canimate attributeName='stroke-dasharray' dur='1.5s' repeatCount='indefinite' values='150.6 100.4;1 250;150.6 100.4'%3e%3c/animate%3e%3c/circle%3e%3c/svg%3e");background-position: center;background-repeat: no-repeat;background-size: 24px;transition: none;}
.alert{background: rgba(254,254,254,.0); !important}

/* Mobile tweaks */
@media (max-width: 576px){
  .hero{min-height: 86vh;}
  .tagline{max-width: 100%;}
  .login-panel{top: 60%; padding: 16px 14px 14px;}
  .login-panel h3{font-size: 34px;}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  * { scroll-behavior: auto !important; }
}

.pals_form_fields {position: relative;margin: 20px 0;}
.pals_form_fields > label {font-weight: 500;font-size: 16px;display: block;opacity: 0.8; color: black;}
.pals_form_fields input, .pals_form_fields textarea, .pals_form_fields select, .pals_form_fields > .bootstrap-select.btn-group > .dropdown-toggle {background-color: transparent;box-shadow: rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;border-radius: 12px;transition: background-color 240ms, box-shadow 240ms;color: #393d4a;font-weight: 400;font-size: 14px;line-height: 28px;padding: 13px;width: 100%;border: 0;outline: 0;}
.pals_form_fields input, .pals_form_fields select {height: 32px;}
.pals_form_fields textarea {resize: vertical;}
.pals_form_fields input:focus, .pals_form_fields textarea:focus, .pals_form_fields select:focus, .pals_form_fields > .bootstrap-select.btn-group > .dropdown-toggle:focus, .pals_form_fields .bootstrap-tagsinput:focus {box-shadow: rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(58, 151, 212, 0.28) 0px 0px 0px 4px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;}

.terms,.terms label,.user-image,.users-profiles{position:relative}
.terms{padding-left:22px}
.terms input[type=checkbox]{opacity:0;margin:0 0 6px 4px;display:none}
.terms label::after,.terms label::before{display:inline-block;left:0;margin-left:-20px}
.terms label{padding-left: 20px;cursor: pointer;user-select: none;font-size: 12px;opacity: 0.9; color: black;}
.terms label::before{content:"";position:absolute;width: 24px;height: 24px;top: -1px;border: 2px solid #b4b4b4;border-radius: 5px;transition:all 90ms cubic-bezier(0,0,.2,.1)}
.terms input[type=checkbox]:checked+label::before{background-color:#1e2322;border-color:#1e2322}
.terms label::after{position:absolute;width:16px;height:16px;top:0;padding-left:3px;padding-top:1px;font-size:11px;color:#555}
.terms input[type=checkbox]:checked+label::after{border:2px solid #fff;border-top:none;border-right:none;content:"";height:5px;left:7px;position:absolute;top:7px;transform:rotate(-45deg);width:10px;transition:.2s;color:#fff}


.login_signup_combo{margin:20px 0;position:relative}
.login_signup_combo .login__{display:flex;align-items:center;justify-content:center}
.login_signup_combo .login__ .btn {width: 100%;line-height: 60px;border-radius: 12px;font-size: 20px;}
.login_signup_combo .signup__ {text-align: center;margin: 15px 0 -10px;font-size: 15px;}

.login_innre {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;min-height: calc(100% - 60px);}
.login_innre:after,.login_innre:before {-webkit-box-flex: 1;box-flex: 1;-webkit-flex-grow: 1;flex-grow: 1;content: '';display: block;height: 24px}

/*Language Select*/
.lang_select_modal .modal-content {
    padding: 0;
    overflow: hidden;
}

.lang_select_modal .modal-body {
    margin: 0;
    padding: 0 15px;
    overflow: hidden;
    overflow-y: auto;
}

.lang_select_modal .row {
    display: flex;
    flex-wrap: wrap;
}

.lang_select_modal .row .col-md-4, .lang_select_modal .row .col-md-8 {
    float: none;
}

.lang_select_modal .language_info {
    height: 100%;
    position: relative;
    padding: 30px;
    background: linear-gradient(90deg, #4caf50, transparent 90%);
    overflow: hidden;
    min-height: 200px;
    width: 100%;
}

.lang_select_modal .language_info h3 {
    margin: 0 0 20px;
    color: #fff;
}

.lang_select_modal .language_info svg {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: -15px;
    height: auto;
    width: 140px;
}

.lang_select_modal ul {
    padding: 20px 20px 20px 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    background: transparent !important;
}

.lang_select_modal .language_select {
    flex: 1 1 160px;
    background: transparent !important;
    margin: 10px;
    border-radius: 7px;
}

.lang_select_modal .language_select a {
    display: block;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    line-height: 39px;
    padding: 0 15px;
    transition: background-color .1s;
    border: 1px solid #ddd;
    text-align: center;
    border-radius: 7px;
}

.lang_select_modal .language_select:hover {
    background-color: rgb(0 0 0 / 3%) !important;
}