/* css reset minified */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, hgroup, menu, nav, output, ruby, summary, time, mark, audio, video {
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    margin: 0;
    padding: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: none
    }

table {
    border-collapse: collapse;
    border-spacing: 0
}

/*html { font-family: 'Raleway', sans-serif !important; }*/


header {
    margin: 0 auto;
    width: 100%;
    background-color: #000;
    clear: both;
    display: block;
    position: fixed;
    height: clamp(4em, 10vh, 10em); /* min 4em, preferito 10vh, max 10em */
}

a.logoclick span {
    display: none;
}

a.logoclick {
    width: clamp(29em, 20em, 21em); /* min 20em, preferito 20em, max 21em */
    height: clamp(6em, 14vh, 12em); /* min 6em, preferito 14vh, max 12em */
    position: relative;
    top: -15px;
    background: url(App_Themes/Default/images/Avantune_white&orange.png) center top no-repeat;
    background-size: contain;
    display: block;
    float: left;
}

section {
    overflow-x: hidden;
    overflow-y: scroll; /* permette lo scroll verticale */
    scrollbar-width: none;
}

section::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.loginForm
#login-form {
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    max-width: 300px;
    width: 100%;
}

.form-container {
    padding: 20px;
    margin: 20px;
    background-color: #ECECEC;
    box-shadow: 0px 0px 15px #003e7d;
}

    .form-container label,
    .form-container a,
    .form-container a:hover {
        color: #003E7D;
    }

#container {
    margin: 0 auto;
    width: 96%;
    max-width: 1024px;
}


#login-header {
    margin-top: 25px;
    text-align: center;
    margin-bottom: 10px;
}

#login-title {
    text-align: center;
}

#left {
    float: left;
    width: 48%;
    padding: 1%;
}

#right {
    float: right;
    width: 48%;
    padding: 1%;
}

body {
    background-repeat: repeat; /* oppure no-repeat */
    background-size: cover;
    background-position: 0 0; /* inizio in alto a sinistra */
}

.hidden {
    visibility: hidden;
}

.formElem {
    margin-bottom: 12px;
}

/* single elems */
.company-logo {
    background: transparent url('App_Themes/Default/Images/genialcloud_logo_login_w.png') no-repeat center center;
    height: 11em;
}

/* Quando lo spazio diventa piccolo, uso contain */
@media (max-width: 995px) {
    .company-logo {
        background-size: contain;
        margin: 1em;
    }
}

.login-logo {
    position: absolute;
    right: 8px;
    bottom: 52px;
}

#lblLoginHeader {
    font-weight: bold;
    font-size: 20px;
    color: #003E7D;
}

.lblPortal {
    font-weight: bold;
    font-size: 35px;
    color: #003E7D;
}

#btnSubmit {
    width: 100%;
    margin-top: 22px;
    display: block;
    width: calc(100% - 36px);
    margin-left: 36px;
    border-radius: 10px;
}

.imgLoading {
    width: 16px;
    height: 16px;
    display: none;
    background: transparent url('./Images/loader.gif') center;
}

.default {
    height: 400px;
    background: transparent url('./images/default.png') no-repeat center;
}

#msgBox {
    height: 46px;
}

.msgBoxContainer {
    height: 32px;
}

.msgTxt {
    color: #F00;
    font-size: 100%;
    position: relative;
    top: 25%;
    display: inline-block;
}


.pageTitle {
    display: block;
    margin: 10px 0px;
    padding: 0px;
    font-size: 24px;
    font-weight: bold;
    color: #f28c00;
}

/* App layout */
.appContainer {
    padding-right: 50px;
}

    .appContainer h1 {
        font-size: 110%;
    }

    .appContainer .desc {
        margin-top: 20px;
        font-size: 90%;
        text-align: justify;
        color: #222;
    }

    .appContainer .price {
        margin-top: 20px;
        font-size: 90%;
        color: #666;
        font-weight: bold;
    }

/* forgotPassword.aspx */

#innerContainer {
    padding: 10px;
}

.msgPass {
    display: block;
    margin-top: 10px;
    padding: 10px;
    background-color: #FAEEB8;
    color: #C8191D;
}

.form-area {
    border-radius: 10px
}

.container {
    margin: 20vh auto 0;
    padding: 0 10px;
    width: 100%;
    max-width: 1024px !important;
}

.margin-bottom-sm {
    margin-bottom: 5px;
}

select#cboLang {
    margin-bottom: 0;
    height: 34px;
    width: 100%;
    padding: 6px 8px;
}

#remember span {
    color: whitesmoke;
    font-weight: normal;
    font-size: .90em;
    vertical-align: text-top !important;
}

#chkRemember {
    margin-top: 20px;
}

.trust-device label {
    float: right;
}

#lblTrustedDeviceExpirationMsg {
    color: #649ed5;
    font-size: 11px;
    float: right;
    clear: right;
    margin-top: -5px;
}

#loginBottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#remember {
    width: 100%;
}

a#lnkForgotPass {
    padding-top: 22px;
    font-size: .90em;
    line-height: 1em;
    float: right;
}

#forgotPwd {
    width: 100%;
    float: right;
}

.loginMain {
    height: calc(100vh - 60px);
}

.newAccount {
    margin-top: 10px;
    text-align: center;
}

.world i {
    /*background: transparent url('App_Themes/Default/Images/world_white_24.png') no-repeat center;*/
    /*padding-left: 4px !important;
    padding-right: 4px !important;*/
    width: 32px;
    font-size: 20px;
}

.user i {
    /*background: transparent url('App_Themes/Default/Images/user_white_24.png') no-repeat center;*/
    /*padding-left: 4px !important;
    padding-right: 4px !important;*/
    width: 32px;
    font-size: 20px;
}

.password i {
    /*background: transparent url('App_Themes/Default/Images/key_white_24.png') no-repeat center;*/
    /*padding-left: 4px !important;
    padding-right: 4px !important;*/
    width: 32px;
    font-size: 20px;
}


.btn-all {
    width: 100%;
    color: #ffffff;
    margin-top: 3px;
}

.btn-facebook {
    background: #305c99;
}

.btn-google:hover {
    background: #b22222;
    color: #ffffff !important;
}

.btn-facebook:hover {
    background: #2b4db1;
    color: #ffffff !important;
}

.btn-twitter:hover {
    background: #007bb6;
    color: #ffffff !important;
}

.btn-twitter {
    background: #00cdff;
}

.btn-google {
    background: #d24228;
}

.btn-linkedin {
    background: #007bb6;
}

.btn-linkedin:hover {
    background: #1f759d;
    color: #ffffff !important;
}

.btn-live {
    background: #0072c6;
}

.btn-live:hover {
    background: #1b348e;
    color: #ffffff !important;
}

#btnOTPSubmit, #btnCancel {
    margin-top: 20px;
    width: 180px;
}

/* Background */
.imgBack {
    z-index: -2;
    height: 100%;
    background-size: contain;
    width: 100%;
    position: absolute;
}

.imgFront {
    z-index: -1;
    height: 100%;
    background-size: contain;
    width: 100%;
    position: absolute;
}

canvas {
    z-index: -2;
    position: absolute;
}

/* Glass */
.container.glass {
    backdrop-filter: url(#liquidGlass);
    -webkit-backdrop-filter: url(#liquidGlass);
}

.container.glass {
    --radius: 22px; 
    --tint: rgba(255 255 255 / .04); /* tinta centrale (senza distorsione) */
    --stroke: rgba(255 255 255 / .25);
    position: relative;
    border-radius: var(--radius);
    background: var(--tint);
    border: 1px solid var(--stroke);
    box-shadow: inset 0 .5px 0 rgba(255 255 255 / .35), 0 8px 30px rgba(0 0 0 / .25);
    isolation: isolate; 
    padding-bottom: 1em;
}

/* L’anello distorto ai bordi */
.container.glass::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    padding: var(--edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; /* Safari/Chrome */
    mask-composite: exclude; /* Firefox (quando supportato) */
}

.container.glass::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(135deg, rgba(255 255 255 / .10) 0%, rgba(255 255 255 / .04) 35%, rgba(255 255 255 / .02) 60%, rgba(0 0 0 / .06) 100%);
}

/* Contenuto sopra */
.container.glass > .content {
    position: relative;
    z-index: 2;
}

/* Fallback: se backdrop-filter non è supportato, togli l’anello */
@supports not (backdrop-filter: blur(1px)) {
    .container.glass::before {
        display: none;
    }
}

/* Glass Controls */
.a-glass {
    color: whitesmoke;
}

.form-control-glass {
    display: block;
    width: 100%;
    position: relative;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: black;
    --tint: rgba(255 255 255 / 0.5);
    background-color: var(--tint);
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control-glass:focus {
    border-radius: 10px;
    border-color: #f39521;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(243, 149, 33, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(243, 149, 33, 0.6);
}

.input-group-addon-glass {
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #fff;
    text-align: center;
    background-color: #ffffff00;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    display: table-cell;
}

.btn-primary-glass {
    color: #fff;
    background: #fc4c028f;
    border: 1px solid rgba(233, 77, 15, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(233, 77, 15, 0.25);
    border-radius: 12px;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.btn-primary-glass:hover {
    background: rgba(233, 77, 15, 0.5);
    box-shadow: 0 6px 25px rgba(233, 77, 15, 0.4);
    transform: translateY(-2px);
    font-weight: bold;
    color: white !important;
}