@CHARSET "UTF-8";

* {margin: 0px; padding: 0px;}

body {
background-color: #1f1f1f;
}

html {
position: relative;
min-height: 100%;
}

/*body {padding-top: 50px; margin-bottom: 60px;}*/

.nav-list_item > div {
display: none;
}

.clearfix {
clear: both;
}

.spacer {
padding-top: 50px;
}

.float-right {
text-align: right;
}

/* My Inventory */
.folders li {
margin-left: -20px;
}

.folders ul {
margin-left: -20px;
}

li.folders {
list-style-type: none;
}

ul.folders {
margin-bottom: 0px;
}

/*.item {text-align: right}*/
.folders .item {
padding-left: 0px;
margin-left: 20px;
}

.folders .subitem {
padding-left: 0px;
margin-left: 20px;
}

/*
#menu ul li:hover > ul { left: 200px; -webkit-transition: left 200ms ease-in; -moz-transition: left 200ms ease-in; -ms-transition: left 200ms ease-in; transition: left 200ms ease-in; }
*/

/* My Inventory (old) */
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}

.list-group.list-group-root .list-group {
margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
padding-left: 45px;
}

.list-group-item .glyphicon {
margin-right: 5px;
}
/**/

.img-valign {
vertical-align: middle;
margin-bottom: 0.5em;
}

img.img-rotate {
border-radius: 50%;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}

img.img-rotate:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

hr.divider {
margin-top: 10px;
margin-bottom: 10px;
clear: both;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.15), rgba(0,0,0,0));
}

/*
ol, ul {list-style: none;}
.rotate {
-moz-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}

.rotate.down {
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
*/

.panel-body {
background-color: #0a3a4d;
/* background-color: #7c7c7c; */
}

/* Dropdown menu animation */
.dropdown .dropdown-menu {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
max-height: 0;
display: block;
overflow: hidden;
opacity: 0;
}

.dropdown-menu .dropdown-login {
min-width: 250px !important;
}

.dropdown-login {
margin-bottom: 5px;
}

.dropdown.open .dropdown-menu {
max-height: 250px;
/*border-color: #eee;*/
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
}

.panel-login > .panel-heading {
/*
color: #00415d;
background-color: #fff;
border-color: #fff;
*/
text-align: center;
}

.panel-login > .panel-heading a {
text-decoration: none;

/*
color: #555;
font-weight: bold;
font-size: 15px;
*/
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;

}

.panel-login > .panel-body {}

.panel-login > .panel-heading a.active {
/*
color: #555;
font-size: 18px;
*/
}

.panel-login > .panel-heading hr {
/*
margin-top: 10px;
margin-bottom: 0px;
clear: both;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
*/
}

.panel-login input:hover,
.panel-login input:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-color: #111111;
}

.panel-body dl {
padding: 0px !important;
margin: 0px !important;
}

/* Caroussel */

/*
.carousel-inner {;}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
max-height: 300px;
}
*/

.full-screen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}

/*footer*/
.container .text-muted {
margin: 15px 0;
}

.footer {
/*position: relative;*/
/*bottom: 0px;*/
/*height: 60px;*/
background-color: #0a3a4d;
/* background-color: #F5F5F5;*/
}

/* fade in all page */
@keyframes fadein {
from {opacity: 0.0;}
to {opacity: 1.0;}
}

.content {
animation: fadein 0.5s;
}

.modal-header {
background: #0a3a4d;
/*padding:9px 15px;*/
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

/*.modal-content {overflow:hidden;}*/
.modal-footer {
background: #0a3a4d;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

/*
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #f1f1f1;
background-image: url("../img/slides/Sans-titre-1.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index:-1;
}
*/

/*BUTTON YESNO*/
.input-group > .btn {
min-width: 50px;
margin-left: -1px;
}

.btn-group.btn-group-yesno {
width: 220px;
max-width: 100%;
}

.btn-group.btn-group-yesno > .btn {
width: 50%;
min-width: 40px;
padding: 2px 0px;
}

.header {
background-color: #0a3a4d;
}

.footer {
background-color: #0a3a4d;
}

.bb {
border-color: black;
}

.panel {
background-color: #0a3a4d;
border-color: black;
border-width: 4px;
}

.navbar-default .navbar-nav > li > a {
color: #FFFFFF;
}

.text {
color: #FFFFFF;
}

.navbar-default .navbar-brand {
color: #FFFFFF;
}

.logo {
border: 5px #0a3a4d solid;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}

.panel-body img.logo,
.panel-body .logo,
.text-box img,
.logoWrap img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}

.text-box {
text-align: center;
}

.text-box ul {
display: inline-block;
text-align: left;
}

/* H4OS 1.3.40 professional registration / character picker
 * Critical layout is repeated inline in template.php so stale browser/proxy
 * CSS can never turn Character photos into full-page stacked images again.
 */
.register-experience {
    --h4os-bg: #07111f;
    --h4os-panel: #0c1b2f;
    --h4os-panel-2: #112743;
    --h4os-border: rgba(255,255,255,.13);
    --h4os-text: #f7fbff;
    --h4os-muted: #9fb3c8;
    --h4os-accent: #36c5f0;
    --h4os-accent-2: #7c5cff;
    --h4os-success: #4ed59a;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 30px;
    color: var(--h4os-text);
}
.register-hero { padding: 18px 20px 22px; text-align: center; }
.register-grid-logo {
    display: block; width: auto; height: auto; max-width: min(300px, 78vw);
    max-height: 105px; margin: 0 auto 14px; object-fit: contain;
}
.register-eyebrow,.character-roster-kicker,.character-stage-label {
    color: #62d8ff; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}
.register-hero h1 {
    margin: 5px 0 7px; color: #fff; font-size: clamp(34px, 5vw, 58px); font-weight: 900;
    line-height: .95; letter-spacing: -.035em; text-transform: uppercase;
    text-shadow: 0 8px 26px rgba(54,197,240,.18);
}
.register-hero p { max-width: 720px; margin: 0 auto; color: #b9c9d9; font-size: 16px; }
.register-fallback-note {
    margin: 0 0 16px; padding: 13px 16px; border: 1px solid rgba(98,216,255,.28);
    border-radius: 12px; background: rgba(54,197,240,.09); color: #dff7ff; text-align: center;
}
.character-picker-shell {
    display: grid !important; grid-template-columns: minmax(0, 1.62fr) minmax(255px, .78fr) !important;
    align-items: stretch; gap: 16px; width: 100%; margin: 0 0 20px;
}
.character-stage-wrap,.character-roster-wrap { min-width: 0; }
.character-stage,.character-roster-wrap,.registration-details-card,.registration-success-shell {
    border: 1px solid var(--h4os-border); border-radius: 20px;
    background: radial-gradient(circle at 50% 5%, rgba(54,197,240,.15), transparent 42%),
                linear-gradient(145deg, rgba(17,39,67,.96), rgba(7,17,31,.98));
    box-shadow: 0 20px 55px rgba(0,0,0,.28);
}
.character-stage {
    position: relative; display: flex; min-height: 590px; height: 100%; padding: 20px 22px 22px;
    overflow: hidden; flex-direction: column; align-items: center; text-align: center;
}
.character-stage:before {
    content: ""; position: absolute; inset: auto -20% -42% -20%; height: 65%; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(124,92,255,.34), rgba(54,197,240,.10) 45%, transparent 70%);
    pointer-events: none;
}
.character-preview-frame {
    position: relative; z-index: 1; display: flex; width: 100%; height: 390px; max-width: 720px;
    margin: 10px auto 7px; padding: 12px 18px 28px; overflow: hidden; align-items: center; justify-content: center;
    border-radius: 16px; background: radial-gradient(circle at 50% 44%, rgba(54,197,240,.11), transparent 58%);
}
.character-preview-frame:after {
    content: ""; position: absolute; z-index: 1; left: 50%; bottom: 9px; width: min(310px, 58%); height: 25px;
    transform: translateX(-50%); border: 2px solid rgba(98,216,255,.60); border-radius: 50%;
    box-shadow: 0 0 30px rgba(54,197,240,.58), inset 0 0 22px rgba(54,197,240,.28);
}
.character-preview-frame img,.register-experience #characterPreviewImage {
    position: relative; z-index: 2; display: block !important; width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 12px; object-fit: contain !important; object-position: center center;
    filter: drop-shadow(0 18px 22px rgba(0,0,0,.34));
}
.character-stage h2 { position: relative; z-index: 2; margin: 7px 0 3px; color: #fff; font-size: 29px; font-weight: 900; }
.character-preview-description { position: relative; z-index: 2; max-width: 560px; margin: 0 auto 14px; color: var(--h4os-muted); }
.btn-character-select,.btn-register-primary,.viewer-add-button {
    position: relative; z-index: 2; border: 0; border-radius: 10px;
    background: linear-gradient(135deg, #24bce9, #7657f8); color: #fff !important; font-weight: 800;
    letter-spacing: .02em; box-shadow: 0 10px 25px rgba(54,197,240,.18);
}
.btn-character-select { padding: 12px 26px; }
.btn-character-select:hover,.btn-character-select:focus,.btn-register-primary:hover,.btn-register-primary:focus,.viewer-add-button:hover,.viewer-add-button:focus {
    color: #fff; transform: translateY(-1px); filter: brightness(1.08);
}
.character-selected-status { position: relative; z-index: 2; margin-top: 9px; color: #91a7bd; font-size: 12px; font-weight: 700; }
.character-selected-status.is-selected { color: var(--h4os-success); }
.character-roster-wrap {
    display: flex; min-height: 590px; max-height: 590px; padding: 16px; flex-direction: column; overflow: hidden;
}
.character-roster-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.character-roster-heading h3 { margin: 2px 0 0; color: #fff; font-size: 21px; font-weight: 900; }
.character-roster-controls { display: flex; gap: 6px; }
.character-roster-arrow {
    width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
    background: rgba(255,255,255,.06); color: #fff; font-size: 24px; line-height: 28px;
}
.character-roster-arrow:hover,.character-roster-arrow:focus { border-color: rgba(54,197,240,.45); background: rgba(54,197,240,.18); color: #fff; }
.character-roster {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 152px;
    flex: 1 1 auto; gap: 9px; width: 100%; min-height: 0; max-height: none; padding: 1px 3px 1px 1px;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth;
}
.character-card,.register-experience button.character-card {
    position: relative; display: flex !important; width: 100% !important; height: 152px !important; min-width: 0 !important;
    min-height: 0 !important; max-width: 100% !important; max-height: 152px !important; margin: 0 !important; padding: 0 !important;
    overflow: hidden !important; flex-direction: column; border: 2px solid rgba(255,255,255,.10); border-radius: 12px;
    background: rgba(255,255,255,.045); color: #fff; text-align: left; appearance: none; -webkit-appearance: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.character-card:hover,.character-card.is-preview { transform: translateY(-2px); border-color: rgba(98,216,255,.58); background: rgba(54,197,240,.08); }
.character-card.is-selected { border-color: var(--h4os-success); box-shadow: 0 0 0 2px rgba(78,213,154,.12); }
.character-card-image {
    display: flex !important; width: 100% !important; height: 116px !important; min-height: 116px !important; overflow: hidden !important;
    align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.18));
}
.character-card-image img,.register-experience .character-card img {
    display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 116px !important;
    margin: 0 !important; padding: 4px !important; border: 0 !important; object-fit: contain !important; object-position: center center;
}
.character-card-name {
    display: block; width: 100%; height: 34px; padding: 8px 8px 9px; overflow: hidden; color: #edf7ff;
    font-size: 12px; font-weight: 800; line-height: 17px; text-overflow: ellipsis; white-space: nowrap;
}
.character-card-check {
    position: absolute; top: 7px; right: 7px; display: none; width: 23px; height: 23px; border-radius: 50%;
    background: var(--h4os-success); color: #07111f; font-size: 11px; line-height: 23px; text-align: center;
}
.character-card.is-selected .character-card-check { display: block; }
.character-roster-help { flex: 0 0 auto; margin: 10px 0 0; color: #91a7bd; font-size: 11px; }
.registration-details-card { padding: 24px; }
.registration-details-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; padding-bottom: 15px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.09); }
.registration-details-heading h2 { margin: 3px 0 0; color: #fff; font-size: 25px; font-weight: 800; }
.registration-details-card .text-muted,.registration-details-card label { color: #bdd0e2; }
.registration-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 15px; }
.registration-field-wide { grid-column: 1 / -1; }
.register-field .form-control,.register-field .input-group-addon { min-height: 44px; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.07); color: #fff; }
.register-field .form-control::placeholder { color: #8196aa; }
.register-field .form-control:focus { border-color: #36c5f0; box-shadow: 0 0 0 2px rgba(54,197,240,.12); }
.registration-consent { margin: 8px 0 18px; padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,.04); }
.registration-check { display: flex; align-items: flex-start; gap: 9px; margin: 7px 0; font-weight: 500; }
.registration-check input { margin-top: 3px; }
.registration-check a { color: #62d8ff; }
.btn-register-primary,.btn-register-secondary { padding: 13px 18px; font-size: 16px; }
.btn-register-secondary { border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.07); color: #dcecff !important; }
.register-inline-error { margin-bottom: 12px; padding: 10px 13px; border: 1px solid rgba(255,101,121,.45); border-radius: 8px; background: rgba(255,101,121,.11); color: #ffd9de; text-align: center; }
/* Post-registration welcome screen */
.registration-success-shell { max-width: 930px; margin: 15px auto 25px; padding: 34px; text-align: center; }
.registration-success-logo { display: block; width: auto; height: auto; max-width: 340px; max-height: 140px; margin: 0 auto 18px; object-fit: contain; }
.registration-success-check { display: inline-flex; width: 72px; height: 72px; margin-bottom: 13px; align-items: center; justify-content: center; border: 2px solid rgba(78,213,154,.62); border-radius: 50%; background: rgba(78,213,154,.12); color: #66e6ab; font-size: 32px; box-shadow: 0 0 30px rgba(78,213,154,.18); }
.registration-success-shell h1 { margin: 3px 0 10px; color: #fff; font-size: clamp(30px, 4vw, 48px); font-weight: 800; }
.registration-success-lead { max-width: 700px; margin: 0 auto 24px; color: #b9cadb; font-size: 17px; }
.grid-login-card { max-width: 700px; margin: 0 auto 18px; padding: 20px; border: 1px solid rgba(98,216,255,.25); border-radius: 14px; background: rgba(54,197,240,.07); }
.grid-login-card h3 { margin-top: 0; color: #fff; font-weight: 800; }
.grid-login-uri { display: block; margin: 12px 0 16px; padding: 11px 13px; overflow-wrap: anywhere; border-radius: 8px; background: rgba(0,0,0,.3); color: #8fe5ff; font-family: Menlo, Monaco, Consolas, monospace; font-size: 14px; }
.viewer-add-button { display: inline-block; width: 100%; max-width: 500px; padding: 15px 18px; font-size: 17px; }
.registration-success-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.registration-success-actions .btn { border-radius: 9px; }
.registration-success-tip { max-width: 700px; margin: 17px auto 0; color: #8fa4b8; font-size: 12px; }
@media (max-width: 860px) {
    .character-picker-shell { grid-template-columns: minmax(0, 1.55fr) minmax(220px, .72fr) !important; }
    .character-roster { grid-template-columns: 1fr !important; }
}
@media (max-width: 680px) {
    .register-experience { margin-left: -8px; margin-right: -8px; }
    .character-picker-shell { grid-template-columns: 1fr !important; }
    .character-stage,.character-roster-wrap,.registration-details-card,.registration-success-shell { border-radius: 14px; }
    .character-stage { min-height: auto; }
    .character-preview-frame { height: 315px; }
    .character-roster-wrap { min-height: auto; max-height: none; }
    .character-roster { display: flex !important; max-height: none; padding-bottom: 7px; overflow-x: auto; overflow-y: hidden; }
    .character-card,.register-experience button.character-card { flex: 0 0 150px; width: 150px !important; height: 150px !important; }
    .registration-fields-grid { grid-template-columns: 1fr; }
    .registration-field-wide { grid-column: auto; }
    .registration-details-heading { align-items: flex-start; flex-direction: column; }
    .registration-success-shell { padding: 24px 16px; }
}