@charset "utf-8";

@scope(dialog.login-form){
    :scope,*{box-sizing:border-box;}
    :scope{padding:0;border:3px solid #00529b;width:800px;height:600px;border-radius:10px;overflow:hidden;box-shadow:0 0 5em #0000003f;font:400 16px/1.4 sans-serif;position:absolute;top:50px;z-index:999;}
    :scope{display:flex;padding:0;}
    .sidebar{flex:0 0 30%;background:#add6de;background-image:url(https://cdn1.e-polish.eu/mailing/e-polish.png),linear-gradient(30deg,#00529b7f,transparent);background-repeat:no-repeat;background-position:top 20px center,0 0;}
    .main{flex:0 0 70%;position:relative;}
    .main>section{position:relative;width:100%;height:100%;overflow:hidden auto;padding:20px;}
    .main>section:not(.active){display:none;}

    form{transition:filter .3s;}
    form.form-saving{cursor:wait;filter:contrast(0.5) brightness(1.3);}
    form.form-saving *{pointer-events:none;}

    button:enabled{cursor:pointer;}
    button:disabled{cursor:not-allowed;}
    h5{text-align:center;margin:0.8em 0 1em;font:700 28px/1.4 sans-serif;}
    fieldset{border:none;margin:0;padding:0;}
    fieldset.col-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 20px;}
    fieldset.col-2 input.text{margin-bottom:0;}
    button.link{display:inline;border:none;background:none;padding:0;margin:0;color:#00529b;text-decoration:underline;}
    .message:not(:empty){display:block;border-top:2px solid #c62a00;border-bottom:2px solid #c62a00;color:#c62a00;padding:1em 0.5em;margin:2em 0;background:#f9e9e5;white-space:pre-wrap;}
    .message.message-info:not(:empty){border-top-color:#3c763d;border-bottom-color:#3c763d;color:#3c763d;background-color:#dff0d8;}
    p.footer{margin:2em 0 0;text-align:center;}

    button.top-right{position:absolute;z-index:2;right:5px;top:5px;padding:0;margin:0;width:40px;height:40px;border:none;line-height:40px;font-size:40px;color:#777;transition:color .3s;background:#ffffff9f;border-radius:50%;}
    button.top-right:is(:hover,:focus){color:#000;}
    p.hr{display:flex;text-align:center;margin:0 0 1em;color:#777;gap:1em;}
    p.hr::before,p.hr::after{content:"";display:block;flex-grow:1;border-bottom:1px solid #aaa;height:0.6em;}
    label.required>span::after{content:"*";color:#c62a00;margin:0 0 0 .5ex;}

    input.text{display:block;width:100%;padding:0.5em 2em;margin:0 0 1em;border-radius:3px;border:1px solid #aaa;}
    input.text:focus{outline:none;border-color:#000;}
    button[name="sso-login"]{display:block;width:100%;border:none;padding:0.5em 2em;margin:0 0 1em;}

    div.buttons{margin:0 0 1em;}
    div.buttons.buttons-single>*{display:block;margin:0 auto;}
    div.buttons.buttons-line{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
    .button{border:1px solid #00529b;background:none;color:#00529b;width:200px;max-width:100%;padding:0.5em 2em;}
    .button.button-main{background:#00529b;border:none;color:#fff;}
    .button:disabled{border-color:#bbb;color:#888;background-color:#eee;}
    .button.button-main:disabled{background-color:#aaa;color:#eee;}

    button[name="set-page"][value="create-account"]{width:100%;background:none;border:1px dotted #ccc;padding:0.5em;line-height:1.4;}
    button[name="set-page"][value="create-account"] strong{font-size:120%;color:#00529b;}
}

@media (max-width: 767px) {
    @scope(dialog.login-form){
        :scope{border:none;border-radius:0;box-shadow:none;margin:0;position:absolute;inset:0;width:100%;height:100vh;}
        :scope{flex-direction:column;overflow:hidden auto;}
        .sidebar{flex:0 0 90px;}
        .main{flex:1 0 auto;}
        .main>section{overflow:hidden;}
    }
}