.admin_authentification_centrale {
    background:#fff;position:absolute; left:50%;top:50%;margin:0 auto;transform:translateY(-50%) translateX(-50%);width:100%;max-width:320px;min-height:310px;border:1px solid #bbb;box-shadow:0 0 4px 1px #ababab;
}
.admin_authentification_centrale #form_Authentification {
    background:url(../images/login_logo.jpg) 50% 1%  no-repeat;padding:60px 15px 0px 15px;box-sizing:border-box;
}
.admin_authentification_centrale #form_Authentification a {font-size:11px;}
/*.admin_authentification_centrale #form_Authentification span {display:block;margin-top:5px;font-size:10px;text-align:center;}*/
.admin_authentification_centrale #form_Authentification h2 {display:block;text-align:center;font-size:23px;color:#999;margin:0px 0px 20px 0px;}

.admin_authentification_centrale #form_Authentification .field { margin-bottom:20px;}
.admin_authentification_centrale #form_Authentification .label { font-size:20px;display:block;float:left;line-height:32px;;width:40px;color:#999;}
.admin_authentification_centrale #form_Authentification .input { display:block;float:left;width:calc( 100% - 50px);}
.admin_authentification_centrale #form_Authentification .input input { border-radius:0;border:0;border-bottom:1px solid #000;color:#ccc; }
.loginbtn {
  margin:0px 20px 20px 20px;
}
.bouton.login { background:#4B5A7B;color:#fff;display:block;width:100%;box-sizing:border-box;}
/*
.admin_authentification_centrale #form_Authentification label {color:#d5d5d5;float:none;}
.admin_authentification_centrale #form_Authentification input {font-size:15px;border:1px solid #a5a5a5;width:150px;margin:0px auto 10px auto;display:block;}
*/

.bloc_authentification {background:#ffffff;padding:10px 5px;display:inline-block;vertical-align:top;}
.bloc_authentification .avatar {display:block;height:60px;width:auto;margin:0 10px 0 0;float:left;border:1px solid #ccc;border-radius:50px;}
.bloc_authentification span {font-size:16px;font-weight:bold;color:#384e6a;}
.bloc_authentification a {color:#01a1ff;}

@media screen and (min-width: 1px) and (max-width: 800px){
	.bloc_authentification {width: 200px;padding:0 2%;display: inline-block;font-size:14px;}
}

@media screen and (min-width: 1px) and (max-width: 640px){
	.bloc_authentification {width:50%;padding:0;text-align:left;}
}

img.header-logo
{
    width: 100%;
    margin-bottom: 20px;
}

#login.bloc-login
{
    width: 40%;
    margin: auto;
    margin-top: 20px;
}

#login .container
{
    width: 100%;
    text-align: center;
    background: url('/canevas/svor/admin/images/login-header.jpg') top center no-repeat;
    background-size: 100% auto;
    border-radius: 10px 10px 0px 0px;
    background-position: 0px -60px;
}
#login .container .header
{
    line-height: 120px;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    background: rgba(98, 114, 124, 0.9);
    border-radius: 10px 10px 0px 0px;
}
#login .container .content
{
    background: #fff;
    padding: 20px;
    border-radius: 0px 0px 10px 10px;
}
#login .container .content .input
{
    padding: 5px 20px;
    margin: auto;
}
#login .container .content .input > input
{
    width: 100%;
    line-height: 25px;
    border: none;
    border-bottom: 1px solid #dcdcdc;
    margin-top: 5px;
    margin-bottom: 5px;
}
#login .row
{
    display: flex;
    margin-top: 5px;
    margin-bottom: 5px;
}
#login .col-50
{
    width: calc(50% - 5px);
    /*border: 1px solid #000;*/
    min-height: 10px;
    padding: 5px 20px;
}
#login .align-left
{
    text-align: left;
}
#login .align-right
{
    text-align: right;
}
#login .col-100
{
    width: calc(100% - 5px);
    /*border: 1px solid #000;*/
    min-height: 10px;
    margin: auto;
}
#login .bouton.login
{
    background: #ff0000;
    color: #fff;
    border-radius: 15px;
    line-height: 30px;
    width: auto;
    font-size: 12px;
}
#login a
{
    color: #999;
}

#login .erreur
{
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
    width: calc(80%);
    margin: auto;
    padding: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    border-radius: 4px;
    border: 1px solid transparent

}
@media screen and (min-width: 1px) and (max-width: 430px)
{
    #login.bloc-login
    {
        width: 100%;
    }
    #login .container .content
    {
        padding: 0px;
        margin-top: -5px;
    }
    #login .col-50,
    #login .container .content .input
    {
        padding: 5px 10px;
    }
}
@media screen and (min-width: 431px) and (max-width: 1000px)
{
    #login.bloc-login
    {
        width: 370px;
    }
}

nav.verticalTabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    color: #6C5D5D;
    width: 100%;
    font-size:14px;
}
nav.verticalTabs a i{
    padding-right: 5px;
}

nav.verticalTabs a {
    position: relative;
    padding: 10px;
    text-align: left;
    width: 92%;
    cursor: pointer;
    border-radius: 10px;
    padding-left: 20px;
    margin-top: 10px;
    font-size:14px;
}

nav.verticalTabs a:hover,
nav.verticalTabs a.selected {
    background: #000;
    color: #FFF;
}

.tabsVertical .content {
    padding: 10px;
    position: relative;
    color: #6C5D5D;
    transition: opacity 0.1s linear 0s;
    display: none;
}

.tabsVertical .content.visible {
    display: block;
    min-height: 500px;
}

.tabsVertical .content p { padding-bottom: 2px;}

.tabsVertical .content p:last-of-type { padding-bottom: 0px; }

select.verticalTabs{ display: none; }
div.selectStyled{ display: none !important; }

@media screen and (min-width: 1px) and (max-width: 840px){
    nav.verticalTabs { display: none; }
    select.verticalTabs { display: inline-block;font-size:14px !important;
        margin: 4px !important;
        padding: 0 !important;}
    div.selectStyled { display: flex !important;font-size: 14px; }
}




:root{
    /* Spider‑VO gradient tokens (modifiable) */
    --svo-1:#F36C21;  /* orange */
    --svo-2:#E91E63;  /* magenta */
    --svo-3:#7B1FA2;  /* violet */
    --text:#0f1115;
    --muted:#6b7280;
    --bg:#ffffff;
    --login-border:rgba(0,0,0,.08);
    --radius:18px;
    --shadow:0 10px 28px rgba(2,6,23,.08), 0 2px 10px rgba(2,6,23,.06);
    --ring: rgba(233,30,99,.25);
}
.loginform  *{box-sizing:border-box}
/*html,body{height:100%}*/
.loginform body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.loginform a{color:inherit}
.loginform .grid{min-height:100svh;text-align:left;display:grid;grid-template-columns:minmax(440px, 1.05fr) minmax(420px, 560px)}
@media (max-width: 980px){
    .loginform .grid{grid-template-columns:1fr}

}

.loginform .hero{position:relative;display:flex;flex-direction:column;justify-content:center;padding:64px 6vw;color:#fff;overflow:hidden}
.loginform .hero .logo_svo { height:auto;width:240px;margin-bottom:20px;}
.loginform .hero::before{content:"";position:absolute;inset:0;
    background: linear-gradient(135deg,var(--svo-1) 0%, var(--svo-2) 48%, var(--svo-3) 100%);}
.loginform .hero::after{content:"";position:absolute;inset:-20% -12% -12% -20%;
    background:
            conic-gradient(from 0deg at 25% 25%, rgba(255,255,255,.20), transparent 42%),
            conic-gradient(from 140deg at 78% 70%, rgba(255,255,255,.16), transparent 52%);
    filter: blur(48px) saturate(140%); mix-blend-mode: soft-light;
    animation: swirl 28s linear infinite;
}
@keyframes swirl{to{transform: rotate(360deg)}}
.loginform .hero > *{position:relative;z-index:1;}
.loginform .badge{display:inline-block;font-size:11px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);backdrop-filter: .loginform blur(6px);text-align: left;color: unset}
.loginform .title{margin:10px 0 6px;padding:0;color:unset;text-transform:none;font-size:32px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.loginform .sub{max-width:620px;color:rgba(255,255,255,.94);line-height:1.6;margin:0 0 24px;font-size: initial}
.loginform .cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0}
.loginform .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 18px;border-radius:14px;border:1px solid rgba(255,255,255,.35);font-weight:700;text-decoration:none}
.loginform .btn-primary{background:#111;color:#fff;border-color:#111;font-size: initial}
.loginform .btn-ghost{background:rgba(255,255,255,.16);color:#fff;font-size: initial}
.loginform .note{margin-top:12px;font-size:12px;color:rgba(255,255,255,.92)}
.loginform .copyright{position:absolute;left:6vw;bottom:24px;opacity:.9;font-size:12px}

/* ===== Right auth panel ===== */
.loginform .panel{display:flex;align-items:center;justify-content:center;background:#fff}
.loginform .card{width:min(92%,520px);text-align:left;box-shadow:var(--shadow);border:1px solid var(--border);border-radius:20px;padding:36px;background:#fff}
.loginform .brand-mini{font-weight:800;margin:0 0 12px}
.loginform .card header{display:flex;align-items:center;gap:12px;margin-bottom:2px;min-height:unset;border:none;background:none;}
.loginform .lock{display:inline-grid;place-items:center;width:34px;height:34px;}
.loginform .lock img{display:inline-block;width:34px;height:34px;}
.loginform h2{font-size:26px;margin:0}
.loginform .lead{margin:8px 0 18px;color:var(--muted);font-size:initial}

.loginform form{display:grid;gap:16px}
.loginform .field{display:grid;gap:6px;margin: 0;}
.loginform label{font-size:13px;color:#111}
.control{position:relative}
.loginform input:-webkit-autofill,
.loginform input:-webkit-autofill:hover,
.loginform input:-webkit-autofill:focus,
.loginform input:-webkit-autofill:active {
    background:none !important;
    transition: background-color 5000000s ease-in-out 0s;
}
.loginform .input{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height:48px;padding:0 42px 0 12px;border-radius:12px;border:1px solid var(--login-border);outline:none}
.loginform .input::placeholder{color:#9aa3b2}
.loginform .input:focus{box-shadow:0 0 0 6px var(--ring);border-color:#d0d3dc}


.loginform .toggle-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;width:36px;height:36px;border-radius:10px}
.loginform .toggle-eye:hover{background:#f1f5f9}

.loginform .row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.loginform .remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.loginform .remember input{width:16px;height:16px}

.loginform .btn-primary-dark{height:50px;border-radius:12px;border:1px solid #111;background:#111;color:#fff;font-weight:800;cursor:pointer}
.loginform .btn-primary-dark:hover{filter:brightness(1.04)}

.loginform a.link { text-decoration: underline}
.loginform .links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;}
.loginform .links a{font-size:13px;text-decoration: underline}

.loginform .footer{margin-top:16px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.loginform .lang{display:flex;gap:8px;align-items:center}
.loginform select{height:40px;border-radius:12px;background:#fff;color:var(--text);border:1px solid var(--border);padding:0 10px}