/* #Font-Face ================================================== */ @font-face { font-family: 'AbrilDisplayBl-Italic'; src: url('../fonts/AbrilDisplayBl-Italic.eot'); /* IE9 Compat Modes */ src: url('../fonts/AbrilDisplayBl-Italic.eot?#iefix') format('embedded-opentype'), url('../fonts/AbrilDisplayBl-Italic.woff2') format('woff2'), url('../fonts/AbrilDisplayBl-Italic.woff') format('woff'), url('../fonts/AbrilDisplayBl-Italic.otf') format('truetype'), url('../fonts/AbrilDisplayBl-Italic.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'AkzidenzGroteskBE-Md'; src: url('../fonts/AkzidenzGroteskBE-Md.eot'); /* IE9 Compat Modes */ src: url('../fonts/AkzidenzGroteskBE-Md.eot?#iefix') format('embedded-opentype'), url('../fonts/AkzidenzGroteskBE-Md.woff2') format('woff2'), url('../fonts/AkzidenzGroteskBE-Md.woff') format('woff'), url('../fonts/AkzidenzGroteskBE-Md.ttf') format('truetype'), url('../fonts/AkzidenzGroteskBE-Md.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Belgika-5th'; src: url('../fonts/Belgika-5th.eot'); src: url('../fonts/Belgika-5th.eot?iefix') format('embedded-opentype'), url('../fonts/Belgika-5th.woff2') format('woff2'), url('../fonts/Belgika-5th.woff') format('woff'), url('../fonts/Belgika-5th.ttf') format('truetype'), url('../fonts/Belgika-5th.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Belgika-8th'; src: url('../fonts/Belgika-8th.eot'); src: url('../fonts/Belgika-8th.eot?iefix') format('embedded-opentype'), url('../fonts/Belgika-8th.woff2') format('woff2'), url('../fonts/Belgika-8th.woff') format('woff'), url('../fonts/Belgika-8th.ttf') format('truetype'), url('../fonts/Belgika-8th.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaStd-Book'; src: url('../fonts/FuturaStd-Book.eot'); src: url('../fonts/FuturaStd-Book.eot?iefix') format('embedded-opentype'), url('../fonts/FuturaStd-Book.woff2') format('woff2'), url('../fonts/FuturaStd-Book.woff') format('woff'), url('../fonts/FuturaStd-Book.ttf') format('truetype'), url('../fonts/FuturaStd-Book.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaStd-CondensedBold'; src: url('../fonts/FuturaStd-CondensedBold.eot'); src: url('../fonts/FuturaStd-CondensedBold.eot?iefix') format('embedded-opentype'), url('../fonts/FuturaStd-CondensedBold.woff2') format('woff2'), url('../fonts/FuturaStd-CondensedBold.woff') format('woff'), url('../fonts/FuturaStd-CondensedBold.ttf') format('truetype'), url('../fonts/FuturaStd-CondensedBold.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaStd-Heavy'; src: url('../fonts/FuturaStd-Heavy.eot'); src: url('../fonts/FuturaStd-Heavy.eot?iefix') format('embedded-opentype'), url('../fonts/FuturaStd-Heavy.woff2') format('woff2'), url('../fonts/FuturaStd-Heavy.woff') format('woff'), url('../fonts/FuturaStd-Heavy.ttf') format('truetype'), url('../fonts/FuturaStd-Heavy.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaStd-Light'; src: url('../fonts/FuturaStd-Light.eot'); src: url('../fonts/FuturaStd-Light.eot?iefix') format('embedded-opentype'), url('../fonts/FuturaStd-Light.woff2') format('woff2'), url('../fonts/FuturaStd-Light.woff') format('woff'), url('../fonts/FuturaStd-Light.ttf') format('truetype'), url('../fonts/FuturaStd-Light.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaStd-Medium'; src: url('../fonts/FuturaStd-Medium.eot'); src: url('../fonts/FuturaStd-Medium.eot?iefix') format('embedded-opentype'), url('../fonts/FuturaStd-Medium.woff2') format('woff2'), url('../fonts/FuturaStd-Medium.woff') format('woff'), url('../fonts/FuturaStd-Medium.ttf') format('truetype'), url('../fonts/FuturaStd-Medium.svg') format('svg'); font-weight: normal; font-style: normal; } .ck-editor__editable {min-height: 320px;} body {font-family: "FuturaStd-Book"; background-image: url("../images/background-navbanner.png"); color:rgb(168,1,35)} main, #chatroom {background-color: rgb(255,151,67); color: rgb(168,1,35);} h1, h2, h3 {text-transform: uppercase;} h1 {font-size: 1.6em!important;} h2, .h2 {font-size: 1.2em!important;} h3, .h3 {font-size: 1.2em!important;} @media (min-width:480px) { h1 {font-size: 2em!important;} h2, .h2 {font-size: 1.4em!important;} h3, .h3 {font-size: 1.2em!important;} } @media (min-width:768px) { h1 {font-size: 2.4em!important;} h2, .h2 {font-size: 1.5em!important;} h3, .h3 {font-size: 1.4em!important;} } ::-moz-selection { /* Code for Firefox */ color: #fff; background: rgb(251, 74, 5); } ::selection { color: #fff; background: rgb(251, 74, 5); } main p a, main p a:link, main p a:visited, main p a:focus {color: rgb(168,1,35); text-decoration: underline;} main p a:hover {color: #fff;} #app {display: flex; min-height: 100vh; flex-direction: column; background-image: linear-gradient(360deg, rgb(175,0,35,1) 10px, rgba(211,62,22,0) 49%), radial-gradient(at 50% 10%, rgb(175,0,35,0.7) 10px, rgba(211,62,22,0) 35%);} .modal-content {background-color: rgb(255,151,67); color: rgb(168,1,35);} .modal-header {border-bottom: 1px solid rgba(168,1,35,0.5); background-color:rgb(168,1,35); color:#fff;} .modal-header .close {color: #fff;} .modal-footer {border-top: 1px solid rgba(168,1,35,0.5);} .btn-primary, main a.btn-primary, main a.btn-primary:link, main a.btn-primary:visited {color: #fff; background-color: rgb(168,1,35); border-color: rgb(168,1,35); text-decoration:none;} .btn-primary:hover, main a.btn-primary:hover, .btn-primary:focus, main a.btn-primary:focus, .btn-primary:active, main a.btn-primary:active {background-color: rgb(143, 11, 38)!important; border-color: rgb(168,1,35)!important; outline: none; box-shadow: 0 0 0 4px rgba(168,1,35,0.4); text-decoration:none;} .modal-content .btn-secondary, .modal-content .btn-secondary:link, .modal-content .btn-secondary:focus, .modal-content .btn-secondary:active, .btn-secondary, .btn-secondary:link, .btn-secondary:focus, .btn-secondary:active {color: #fff!important; background-color: rgb(241, 102, 1)!important; border-color: rgb(241, 102, 1)!important;} .modal-content .btn-secondary:hover, .btn-secondary:hover {background-color: rgb(241, 35, 1); border-color: rgb(241, 35, 1);} .fullwidth {width:100%;} #profile-main .alert-success {color: #fff; background-color: rgb(168,1,35); border-color: rgb(168,1,35);} a {outline: 0;} .btn-xs {padding: .1rem .3rem .2rem; font-size:.875rem; line-height: 1; border-radius:.2rem;} hr {border-top: 1px solid rgba(168, 1, 35, 0.4)!important;} .add-file-container {text-align:center; text-transform:uppercase; color:rgb(168,1,35); max-width:100px; line-height: 1em; margin: 0 auto; display: inline-block;} .add-file {margin: 0 auto; margin-bottom: 6px; border-radius:90%; background-color:rgb(168,1,35); color:#fff; font-size:3em; font-family:'FuturaStd-Heavy'; width:70px; height:70px; display:flex; justify-content:center; align-items: center; line-height:.7em; } .add-file span {line-height:.6em; height:40px; } .add-file-container:hover {color:rgb(255,255,255); text-decoration:none;} .add-file-container:hover .add-file {background-color:#fff; color:rgb(168,1,35);} /* FORMS ================================================== */ /* Couleur des textes, fonds et bordures des éléments de base */ input, input.form-control, input.form-control-sm, select, select.form-control, select.form-control-sm, textarea, textarea.form-control {background-color: rgba(255, 167, 96, 1); border: 0; border-bottom-color: currentcolor; border-bottom-style: none; border-bottom-width: 0px; border-bottom: 1px solid rgb(168,1,35); color: rgb(168,1,35); text-align: left;} select, select.form-control, select.form-control-sm, textarea, textarea.form-control {background-color: rgba(255, 167, 96, 1) !important; color: rgb(168,1,35) !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-bottom:5px;} select, select.form-control, select.form-control-sm { background: url("../images/select-arrow-down.png") rgba(255, 167, 96, 1) no-repeat 98.5% !important; /* !important used for overriding all other customisations */ background: url("../images/select-arrow-down.png") rgba(255, 167, 96, 1) no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */ } /* Couleur des textes des placeholder */ ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff!important; opacity: 1; /* Firefox */} :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff;} ::-ms-input-placeholder { /* Microsoft Edge */ color: #fff;} /* Comportement sur Focus et Hover */ input.form-control:focus, select.form-control:focus, select.form-control-sm:focus, textarea:focus, textarea.form-control:focus {outline: none; box-shadow: 0 0 0 4px rgba(168,1,35,0.4);} select.form-control:focus, select.form-control-sm:focus {border-bottom: none; background: url("../images/select-arrow-down-bold.png") rgba(243, 127, 34, 0.87) no-repeat 98.5% !important; /* !important used for overriding all other customisations */ background: url("../images/select-arrow-down-bold.png") rgba(243, 127, 34, 0.87) no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */ } input.form-control:focus-within, select.form-control:focus-within, select.form-control-sm:focus-within {background: rgba(243, 127, 34, 0.87); border-bottom:none!important; color: rgb(168,1,35);} select option, select.form-control option, select.form-control-sm option {background: rgba(243, 127, 34, 1); } .form-select-holder { } select option:hover, select.form-control option:hover {background: rgba(243, 127, 34, 1)} label.form-birthdate {margin-bottom: 3px;} .dropdown-item.active {background-color: red;} input: required {box-shadow: none !important; -webkit-box-shadow: none !important;} .form-group .text-muted {color: rgb(168, 1, 35) !important;} .custom-radio .custom-control-label::before, .custom-checkbox .custom-control-label::before {background-color: rgb(168,1,35);} .custom-radio .custom-control-input:checked ~ .custom-control-label::before, .custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-color: rgb(168,1,35); /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */ background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E); border-radius: 50%; } .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {background-color: rgb(168,1,35); box-shadow:0!important; -webkit-box-shadow:0!important; outline: none;} .custom-radio .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 2px #fff, 0 0 0 0.2rem rgba(255, 123, 255, 0.25); } /* Shadow displayed around the element */ .custom-radio .custom-control-input ~ .custom-control-label::before {box-shadow: 0 0 0 2px rgb(168,1,35), 0 0 0 0.2rem rgba(0, 0, 0, 0); } @media (min-width: 768px) { select {margin-bottom:0;} } /* partie commune */ input[type=range] { outline: none; } /* Slider - curseur - Firefox */ input[type=range]::-moz-range-thumb { background: rgb(168,1,35)!important; /* sert pour couleur de référence, via currentColor, pour le curseur */ } /* Slider - curseur - Chrome */ input[type=range]::-webkit-slider-thumb { background: rgb(168,1,35)!important; /* pris en compte sur Webkit only */ } /* Slider - curseur - IE, Egde */ input[type=range]::-ms-thumb { background: rgb(168,1,35)!important; } /* FORMS SIGNIN - REGISTER - LOGIN */ .form-group {margin-bottom: .5rem!important;} form.form-signin, .form-signin { width:100%; max-width:330px; padding:15px; margin:auto; background-color: rgb(255,151,67); color: rgb(168,1,35);} form.form-signin small, .form-signin small {line-height:1.2rem; display:inline-block;} form.form-signin a, .form-signin a {color: rgb(168,1,35); text-decoration:underline;} form.form-signin a:hover, .form-signin a:hover {color: rgb(255,255,255); text-decoration:underline;} form.form-signin h1, .form-signin h1 {text-transform:inherit; text-align:center;} form.form-signin .button-link, .form-signin .button-link {text-align: center; width: 100%; display: inline-block; color: rgb(168,1,35); } form.form-signin .button-link:hover, .form-signin .button-link:hover {color: rgb(255,255,255); } form.form-signin .form-control, .form-signin .form-control {text-align:center; } .form-signin p {line-height:1em;} .form-signin p.small {line-height:1.4em;} .form-signin-footer {text-align: center; color: rgb(255,151,67)} .form-signin-footer a {color: rgb(255,151,67)} .form-signin-footer a:hover {color: rgb(255,255,255); text-decoration:none;} .account-form-container {margin-top: 4.8rem; position: relative; top: 0px;} @media (min-width: 992px) { .account-form-container {top: -115px; margin-top: 3rem;} } /* NAVBAR ================================================== */ .navbar {background-image: linear-gradient(180deg, rgba(175, 0, 35) 10px, rgba(211,62,22,0) 89%); align-items: flex-start; padding: 0;} .navbar-nav {display: inline-flex; flex-direction: row;} .navbar-dark .navbar-nav .nav-link {color: rgba(255,255,255,0.7); text-align:center;} .navbar-dark .navbar-nav .nav-link:hover .dashboard-item-label {color: rgba(255,255,255,1);} .navbar-dark .navbar-toggler {color: rgba(255,255,255,.5); border:none;} .navbar-dark .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");} .bg-darkred {background-color: rgb(175, 0, 35);} .navbar.bg-back-office {height:auto;} ul.language-selector li a {color: rgba(217,68,31,1);} ul.language-selector li a.selected, ul.language-selector li a:hover {color: rgba(255,255,255,1); text-decoration:none;} #navbarHeader a.header-link {color: rgba(255,255,255,0.7); font-size:.9em;} #navbarHeader a.header-link:hover {color: rgba(249,181,126,1); text-decoration:none;} #navbarHeader ul {margin:0; padding-right:0;} #navbarHeader ul li {padding-right:10px; } #navbarHeader ul li:last-child {padding-right:0px;} #navbarSupportedContent {padding-top: 14px; text-align:center;} #navbarMessage {color: #fff; text-align: center; padding: 1em;} #navbarMessage a, #navbarMessage a:link, #navbarMessage a:active, #navbarMessage a:focus, #navbarMessage a:visited {color:rgb(255,151,67)!important;} #navbarMessage a:hover {text-decoration:underline;} #navbar-dashboard {color:#fff; position:relative; justify-content:center; flex-flow: column wrap;} #navbar-dashboard::before, #navbar-dashboard::after {content: ''; width:100%; order: 1;} .navbar-dashboard-item:nth-child(n + 4) {order: 1;} .navbar-expand-lg.navbar-dark .navbar-nav .nav-link {padding-right: 0; padding-left: 0; margin-right: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position:relative;} .navbar-expand-lg.navbar-dark.bg-back-office .navbar-nav .nav-link {font-size:.9em;} .navbar-expand-lg.navbar-dark .navbar-nav .nav-item:last-child .nav-link {margin-right:0; } .navbar-dashboard-item {position:relative; height:40px; display:flex; justify-content:center; align-items:center; margin:2px 0; background-color:rgba(255,255,255,0.2);} .navbar-dashboard-item a {color: rgba(255,255,255,0.7);} .navbar-expand-lg.navbar-dark.bg-back-office .navbar-dashboard-item a {font-size:.9em;} .navbar-dashboard-item a:hover {color: rgba(255,255,255,1); text-decoration:none;} .dashboard-item-badge {position:absolute; left:50%; transform: translateX(-50%); top:18%; font-size:.8rem; z-index: 1;} .badge-dashboard {color:#fff; background-color:transparent;} .dashboard-item-picto {position:absolute; left:10px; } .dashboard-item-picto.picto-profil {z-index:99;} .picto-search img {height:38px; position:relative; top:0; left:0; } .navbar-dark .navbar-nav .nav-link:hover .picto-search img {height:44px; position:relative; top:-1px; left:-3px; } .picto-online img {height:38px; position:relative; top:-2px; left:0; } .navbar-dark .navbar-nav .nav-link:hover .picto-online img {height:44px; position:relative; top:-1px; left:-3px; } .picto-events img {height:33px; position:relative; top:0px; left:-7px; } .navbar-dark .navbar-nav .nav-link:hover .picto-events img {height:39px; position:relative; top:-1px; left:-11px; } .picto-home img {height:24px; position:relative; top:0px; left:-4px; } .navbar-dark .navbar-nav .nav-link:hover .picto-home img {height:30px; position:relative; top:0px; left:-8px; } .picto-likes img {height:46px; position:relative; top:-8px; left:5px;} .navbar-dashboard-item a:hover .picto-likes img {height:54px; position:relative; top:-13px; left:3px; } .picto-visites img {height:38px; position:relative; top:-1px; left:0; } .navbar-dashboard-item a:hover .picto-visites img {height:50px; position:relative; top:-7px; left:-8px; } .picto-messages img {height:33px; position:relative; top:0px; left:0px; } .navbar-dashboard-item a:hover .picto-messages img {height:39px; position:relative; top:-1px; left:-3px; } .picto-profil img {height:38px; position:relative; top:-2px; left:0; } .picto-admin img {height:34px; position:relative; top:1px; left:0; } .navbar-dashboard-item a:hover .picto-admin img {height:38px; position:relative; top:-1px; left:-3px; } .picto-register img {height:30px; position:relative; top:1px; left:0; } .navbar-dashboard-item a:hover .picto-register img {height:36px; position:relative; top:0px; left:-3px; } .picto-login img {height:34px; position:relative; top:2px; left:0; } .navbar-dashboard-item a:hover .picto-login img {height:43px; position:relative; top:-1px; left:1px; } .navbar-expand-lg.navbar-dark .navbar-nav .nav-link:hover {background-color:#a70123; } #navbarSupportedContent .navbar-nav .nav-item { line-height:1em; display:flex; justify-content:center; align-items:center; height:40px; margin:2px 0; background-color: rgba(255,255,255,0.2); } .dashboard-item-label {font-size:.9rem; position:relative; top:-2px; } .dashboard-item-label {color:rgba(255,255,255,0.7);} #navbar-dashboard-profile-menu {position:absolute; left:0; top:30px; font-size:.9rem; background-color:#a70123; color:#fff; width:100%; z-index:10; box-shadow:0px 2px 3px 0 rgba(0, 0, 0, 0.49); border-radius:0; } #navbar-dashboard-profile-menu ul {margin:0; padding:5px 10px 10px; list-style:none;} #navbar-dashboard-profile-menu a {color:rgba(255,255,255,0.7); padding:4px; display:inline-block; } #navbar-dashboard-profile-menu a:hover {color:rgba(255,255,255,1); } .hide {display:none;} .navbar-dashboard-item:nth-child(4):hover .hide, .navbar-dashboard-item.back:hover .hide, #navbar-dashboard-profile-menu:hover {display:block;} .navbar-dashboard-item:nth-child(4):hover, .navbar-dashboard-item.back:hover {background-color:#a70123; } .navbar-dashboard-item:nth-child(4):hover .dashboard-item-label {color:rgba(255,255,255,1);} .navbar-dashboard-item a {width:100%; height:100%; display:flex; justify-content:center; align-items:center;} .navbar-dashboard-item a:hover {background-color: #a70123;} .navbar-dashboard-item a:hover .dashboard-item-label {color:rgba(255,255,255,1); text-decoration:none;} .active .dashboard-item-label {color: rgba(255,255,255,1); text-decoration:none; font-family: "FuturaStd-Heavy"; line-height: 1.8em;} #navbar-profil .dashboard-item-label a.showpointer:hover {background-color: #a70123; width:100%; display:inline-block;} #navbar-profil:hover {margin-bottom:68px;} #brand-logo {width:90px; height:60px; overflow:hidden;} #brand-logo.public-website {width:220px; height:220px;} .button-link {text-transform: uppercase; color:rgb(168,1,35); background-image:url(../images/button-link-bottom.png); background-repeat: repeat-x; background-position: center bottom; padding-bottom:6px; cursor: pointer;} .button-link:hover {color: rgb(255,255,255); text-decoration: none; } .button-link.light {color: rgb(255,151,67); } .button-link.light:hover {color: rgb(255,255,255); } .navbar .container {align-items:flex-start!important;} .navbar-brand { position: relative; left: 50%; transform: translateX(-50%); top: 4px;} .navbar-dark .navbar-toggler {margin-top:40px;} @media (min-width: 576px) { #navbar-dashboard::before, #navbar-dashboard::after {content: ''; width:auto; order: 1;} } @media (min-width: 768px) { .navbar-brand {position: relative; top:4px;} } @media (min-width: 992px) { #navbarHeader {display:flex;} #brand-logo {width:120px; height:123px; overflow:hidden;} .navbar {height:200px; align-items: flex-start!important;} .navbar.authentificated {height:140px;} #navbarSupportedContent {justify-content: space-between;} .navbar-dashboard-item {display:inline-block; margin:0 0 0 30px; background-color:transparent; height:100%;} .navbar.authentificated .navbar-dashboard-item:first-child {margin-left:0; } .navbar-brand {position: absolute; left: 50%; transform: translateX(-50%); top: -12px;} .dashboard-item-picto {width:60px; height:38px; text-align:center; margin:0 auto; display:inline-block; position:relative; left:0;} .dashboard-item-picto img {transition: all .1s ease-in-out; } #navbar-dashboard {color:#fff; position:relative; justify-content:center; flex-flow: row wrap;} .navbar-expand-lg.navbar-dark .navbar-nav .nav-link {padding-right:0; padding-left:0; margin-right:30px; display:inline-block; height:auto } .navbar-expand-lg.navbar-dark .navbar-nav .nav-link:hover {background-color:transparent; } #navbarSupportedContent .navbar-nav .nav-item { height:40px; margin:0; background-color:transparent } .navbar-dashboard-item a {display:inline-block;} .navbar-dashboard-item a:hover {background-color:transparent; } #navbar-dashboard-profile-menu {position:absolute; right:0; left: unset; top:55px; font-size:.9rem; background-color:#a70123; color:#fff; min-width:180px; z-index:10; box-shadow:0px 2px 3px 0 rgba(0, 0, 0, 0.49); border-radius: 15px 0 15px 15px; } #navbar-profil:hover {margin-bottom:0px;} .picto-search img {height:38px; position:relative; top:0; left:0; } .picto-online img {height:38px; position:relative; top:-2px; left:0; } .picto-events img {height:33px; position:relative; top:4px; left:1px; } .picto-home img {height:30px; position:relative; top:4px; left:0; } .picto-likes img {height:46px; position:relative; top:-8px; left:5px;} .picto-visites img {height:38px; position:relative; top:-1px; left:0; } .picto-messages img {height:38px; position:relative; top:0; left:5px; } .picto-profil img {height:38px; position:relative; top:-2px; left:0; } .picto-admin img {height:34px; position:relative; top:2px; left:0; } .picto-register img {height:34px; position:relative; top:2px; left:0; } .picto-login img {height:34px; position:relative; top:2px; left:0; } .navbar-dark .navbar-nav .nav-link:hover .picto-search img {height:52px; position:relative; top:-6px; left:1px; } .navbar-dark .navbar-nav .nav-link:hover .picto-online img {height:47px; position:relative; top:-6px; left:1px; } .navbar-dark .navbar-nav .nav-link:hover .picto-events img {height:42px; position:relative; top:-1px; left:-3px; } .navbar-dark .navbar-nav .nav-link:hover .picto-home img {height:38px; position:relative; top:1px; left:-8px; } .navbar-dashboard-item a:hover .picto-likes img {height:54px; position:relative; top:-13px; left:3px; } .navbar-dashboard-item a:hover .picto-visites img {height:50px; position:relative; top:-7px; left:-8px; } .navbar-dashboard-item a:hover .picto-messages img {height:48px; position:relative; top:-6px; left:5px; } .navbar-dashboard-item a:hover .picto-admin img {height:43px; position:relative; top:-1px; left:1px; } .navbar-dashboard-item a:hover .picto-register img {height:43px; position:relative; top:-1px; left:1px; } .navbar-dashboard-item a:hover .picto-login img {height:43px; position:relative; top:-1px; left:1px; } } @media (min-width: 1200px) { .navbar {height:200px; align-items: flex-start!important;} .navbar.authentificated {height:140px;} #navbarHeader ul {padding-right:.5rem;} #navbarSupportedContent {justify-content: space-between;} } #home-splash-header {width:100%; display: inline-block; color: #fff; } #home-splash-header h1 {padding-top: 1rem; padding-bottom: 1rem; margin-bottom: 0; color: #fff; font-size:1em; font-family: 'AbrilDisplayBl-Italic'; text-transform: none} .bg-principe-block {background-color: #bd1d30; background-image:url("../images/bkg-cardio-carousel.jpg"); color: rgb(255,151,67); background-position:left center; background-repeat:no-repeat;} .bg-principe-block a { color: rgb(255,151,67);} .bg-principe-block a:hover { color: rgb(255,255,255); text-decoration: none;} .bg-dark-block {background-color: rgb(255, 182, 122) !important;} .bg-back-office {background-color: #df0639 !important;} .bg-banner-form {background-color: #ff8730 !important;} .bg-form-block {background-color: #ff8730 !important;} .blockcol-picture {height:200px;} .blockcol-picture img {width:100%; height:100%; object-fit:cover;} .blockcol-data {padding: 1rem .6rem;} .principe-A, .principe-B, .principe-C, .principe-D {background-color: rgb(255,151,67); color: rgb(168,1,35);} .principe-A, .principe-B {flex-direction: column-reverse;} .principe-C {flex-direction: column;} .principe-D {background: url('../images/principe-D-bkg.jpg');} .principe-A h2, .principe-B h2, .principe-C h2, .principe-D h2 {font-size: 1.3rem;} .principe-A a, .principe-B a, .principe-C a, .principe-D a {color: rgb(175, 0, 35); text-decoration: underline;} .principe-A a:hover, .principe-B a:hover, .principe-C a:hover, .principe-D a:hover {color:#fff; } @media (min-width: 768px) { .principe-A, .principe-C {flex-direction:row;} .principe-B {flex-direction:row-reverse;} } footer {padding-top: 1rem; padding-bottom: 3rem; color: rgba(217,68,31,1); background-image: linear-gradient(360deg, rgb(175,0,35,1) 10px, rgba(211,62,22,0) 89%);} footer p {margin-bottom: .25rem;} #footer-legal ul, #footer-legal ul li {margin:0; padding:0; list-style:none; flex-direction:column; font-size: .8rem;} footer a, footer a:active, footer a:focus, footer a:visited {color: rgba(217,68,31,1);} footer a:hover {color:#fff; text-decoration: none;} #footer-links span {font-size: 150%; margin-right:8px;} @media (min-width: 768px) { #footer-legal ul {flex-direction: row;} #footer-legal ul li {margin-right:10px;} } /* Page d'accueil utilisateurs connectés - carousel provisoire */ #carouselNewsubscribers, #carouselNewLocalsubscribers, #carouselOnlineSubscribers {width: 100%;} .carousel-slider h2 {text-align: center; width:100%; margin:1rem 0;} .carousel-item {height:250px; width:100%;} .carousel-grid {width:90%; display:flex; justify-content:center; margin:0 auto;} .carousel-grid .carousel-grid-item {width:20%; display:flex; justify-content:center; text-align:center;} .carousel-grid-item .card {background-color:transparent; border:none;} .carousel-grid-item h5.card-title {margin-bottom: .1rem; text-transform: uppercase; font-size: 1em;} .carousel-grid-item .card-text {line-height:1em;} .carousel-grid-item .online {position:absolute; top:-20px; right:-10px; font-size:1.5rem; z-index:10; width:40px; height:40px; filter: invert(10%) sepia(54%) saturate(5665%) hue-rotate(337deg) brightness(78%) contrast(155%)} .bg-principe-block .carousel-grid-item .online {filter: none;} .carousel-grid-item .card-picture {display:inline-block; margin:0 auto; width:140px; height:140px; position:relative; border:0; overflow:hidden; border-radius:90%;} .carousel-grid-item .card-picture img {object-fit:cover; background-position:top; width:100%; height:100%;} .carousel-control-prev, .carousel-control-next{ width: 5%; opacity: 1 /* align-items: flex-end; Aligns it at the bottom */} .carousel-control-prev-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");} .carousel-control-next-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");} /* Page recherche */ #search-filters-summary h2 {display: inline-block; margin-right: 20px; color:#fff;} #search-filters-summary h4 {text-transform:uppercase; font-size: 1.1em; margin-bottom: 20px; } #search-filters-summary a:hover {color:#fff;} #search-filters-summary-inner {flex-direction:column;} #search-filters-buttons {width:100%;} .tag-pills {border-radius:15px; background-color:rgb(217, 15, 15); color:rgb(255,151,67); display:inline-block; padding:2px 10px 4px 12px; margin:0 6px 9px 0; font-size:0.8rem; position:relative;} .tag-pills span {margin-left:5px;} .tag-pills a:hover, .tag-pills:hover {color:#fff; background-color:rgb(175,0,35);} .tag-pills a {color:rgb(255,151,67)} #search-more-filters {} #search-filters-settings-container {position:relative;} #search-filters-settings {background-color:rgb(255,151,67); position:absolute; top:0; left:0; right:0; z-index: 10; box-shadow: 0px 2px 10px 0 rgb(168, 1, 35);} #search-filters-settings-nav.nav-pills .nav-link {border-radius:0; text-align:center; color:rgb(168,1,35); padding:0; width: 20%; text-transform: uppercase; border-bottom: 3px solid rgb(168,1,35);} #search-filters-settings-nav.nav-pills .nav-link:hover {color:#fff;} #search-filters-settings-nav.nav-pills .nav-link:hover img {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(100%) contrast(300%);} #search-filters-settings-nav.nav-pills .nav-link.active, #search-filters-settings-nav.nav-pills .show > .nav-link {color:rgb(255,255,255); background-color:transparent; font-weight: 600; text-align:center; border-bottom: 4px dotted #fff;padding-bottom:1em;} #search-filters-settings-nav.nav-pills .nav-link.active img, #search-filters-settings-nav.nav-pills .show > .nav-link img {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(100%) contrast(300%);} #search-filters-settings-nav.nav-pills .nav-link .search-nav-label {visibility:hidden;} #search-filters-settings-nav .search-nav-logo {font-size: 2rem; height: 42px; width: 42px; margin: 0 auto; align-content: baseline; display: flex;} #search-filters-settings-nav .search-nav-logo img {border-style: none; width: 100%; height: 100%; object-fit:contain; align-self:flex-end;} #search-filters-settings-inner label {padding-right: 1em;} #search-filters-settings-forms {padding: 1em 0 2em 0;} #search-filters-settings-form-1, #search-filters-settings-form-2, #search-filters-settings-form-3, #search-filters-settings-form-4, #search-filters-settings-form-5, #online-search-filters-settings {flex-direction:column;} #search-filters-settings-form-1 .settings-form-col, #search-filters-settings-form-2 .settings-form-col, #search-filters-settings-form-3 .settings-form-col, #search-filters-settings-form-4 .settings-form-col, #search-filters-settings-form-4 .settings-form-col.w50, #search-filters-settings-form-5 .settings-form-col {width:100%; padding-right:0;} #online-search-filters-settings .settings-form-col {width:100%; padding-left:0; padding-right:0;} #search-filters-submit {text-align:center;} #search-filters-settings-hair, #search-filters-settings-eyes, #search-filters-settings-shape {flex-wrap:wrap;} #search-filters-settings-hair .custom-control, #search-filters-settings-eyes .custom-control, #search-filters-settings-shape .custom-control {width:50%;} #search-filters-settings-smoke .custom-control, #search-filters-settings-drink .custom-control, #search-filters-settings-gotchildren .custom-control, #search-filters-settings-wantchildren .custom-control, #search-filters-settings-commitment .custom-control, #search-filters-settings-wedding .custom-control, #search-filters-settings-status .custom-control, #search-filters-settings-everydaylife .custom-control, #search-filters-settings-levelofstudies .custom-control, #search-filters-settings-churchgoer .custom-control{width:100%;} input#distance {border-bottom:0;} @media (min-width: 350px) { #search-filters-settings-nav.nav-pills .nav-link .search-nav-label { visibility:visible; } } .profiles-grid { display:flex; text-align:center; flex-wrap:wrap; justify-content:flex-start; width:100%;} .profiles-grid .grid-item {width:100%; display:flex; justify-content:center; text-align:center; flex-direction:column;} .profiles-grid .grid-item h5.card-title {margin-bottom: .1rem; text-transform: uppercase; font-size: 1em;} .profiles-grid .grid-item .online {position: absolute; top: -20px; right: -10px; font-size: 1.5rem; z-index: 9; width: 40px; height: 40px; filter: invert(10%) sepia(54%) saturate(5665%) hue-rotate(337deg) brightness(78%) contrast(155%);} #search-results.main-search .profiles-grid .grid-item .online {filter:none;} .profiles-grid .grid-item .card-picture {display:inline-block; margin:0 auto; width:140px; height:140px; position:relative; border:0; overflow:hidden; border-radius:90%;} .profiles-grid .grid-item .card-picture img {object-fit:cover; background-position:top; width:100%; height:100%;} .profiles-grid .grid-item .card {background-color:transparent; border:none;} #search-results h3 {text-align: center; width: 100%;} .form-conjunction {display:inline-block; padding:0 10px; } label .online {display:inline-block;} .field-label {font-weight:600;} .form-control {height:32px; padding:0 4px; font-size:1rem;} select.form-control {padding:0 28px 0 8px; } #search-filters-settings-nav.nav-pills .nav-link {font-size: .6em; line-height: 1em;} #search-filters-settings-forms .form-control, #online-search-filters-settings .form-control { background: url("../images/select-arrow-down.png") rgba(255, 167, 96, 1) no-repeat 98.5% !important; background: url("../images/select-arrow-down.png") rgba(255, 167, 96, 1) no-repeat calc(100% - 10px) !important; cursor: pointer; height: 26px; padding: 0 28px 0 8px; font-size: .9rem; } #search-filters-settings-forms .form-control.open, #online-search-filters-settings .form-control.open { background: url("../images/select-arrow-up.png") rgba(255, 167, 96, 1) no-repeat 98.5% !important; background: url("../images/select-arrow-up.png") rgba(255, 167, 96, 1) no-repeat calc(100% - 10px) !important; } #search-filters-settings-forms #inputPseudo.form-control {background: rgba(255, 167, 96, 1)!important;} @media (min-width: 480px) { .profiles-grid .grid-item {width:50%; flex-direction:row;} #search-filters-settings-nav.nav-pills .nav-link { font-size:.7em; line-height:1em;} } @media (min-width: 768px) { #search-filters-summary-inner {flex-direction:row;} #search-filters-settings-inner label {font-size: .9rem;} #search-filters-buttons {width:80%;} #search-more-filters {width:20%; text-align:right; justify-content:flex-end;} #search-filters-settings-form-1, #search-filters-settings-form-2, #search-filters-settings-form-3, #search-filters-settings-form-4, #search-filters-settings-form-5, #online-search-filters-settings {flex-direction:row; width: 100%; flex-flow:wrap;} #search-filters-settings-form-1 .settings-form-col, #search-filters-settings-form-2 .settings-form-col, #search-filters-settings-form-3 .settings-form-col, #search-filters-settings-form-4 .settings-form-col, #search-filters-settings-form-5 .settings-form-col {width:50%; padding-right:20px;} #search-filters-settings-form-4 .settings-form-col.w50 {width:50%; padding-right:20px;} #online-search-filters-settings .settings-form-col {width:33%; padding:0 20px;} .profiles-grid {flex-direction:row;} .profiles-grid .grid-item {width:33.33%;} #search-filters-settings-nav.nav-pills .nav-link {font-size: .8em; line-height: 2em;} } @media (min-width: 992px) { .profiles-grid .grid-item {width:20%;} #search-filters-settings-form-1 .settings-form-col, #search-filters-settings-form-2 .settings-form-col, #search-filters-settings-form-3 .settings-form-col, #search-filters-settings-form-4 .settings-form-col, #search-filters-settings-form-5 .settings-form-col {width:25%; padding-right:20px;} #search-filters-settings-inner label {font-size: 1rem;} #search-filters-settings-nav.nav-pills .nav-link {font-size: 1em;} } /* Page profil */ a.back-link {color:#fff;} a.back-link span {margin-right:10px;} a.back-link:hover {color:#333; text-decoration:none;} #profile-side-column {top:20px;} #profile-action-buttons-trigger a {color:#6c757d} #profile-action-buttons-data {background-color:#fafafa; padding:4px 12px 8px; border:1px solid #ccc; position:relative; top:-8px; font-size:.8rem;} #profile-picture-gallery-thumbnails img {padding-right:8px; width:25%;} #profile-picture-gallery-thumbnails img:last-child {padding-right:0;} #profile-picture-action-buttons {flex-direction:row; justify-content: center;} #profile-picture-action-buttons a {margin-top:10px;} .btn-social {width:80px; text-align: center;} .btn-social img {width: 100%; height: 40px;} a.btn-social {color: rgb(168,1,35)} a.btn-social:hover {color: rgb(255,255,255); text-decoration:none;} a.btn-social:hover img {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(100%) contrast(300%);} #profile-action-buttons {position:absolute; right:15px; display:flex;} #profile-action-buttons-trigger {display:flex; justify-content:flex-end;} .profile-action-button {width: 30px; height: 30px; display: inline-block; position: relative; padding: 0; margin-left: 15px;} .profile-action-button:hover img {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(100%) contrast(300%);} #profile-headline {font-size:1.5rem; color:rgb(168,1,35); line-height:1rem; padding:0; margin:0 0 30px;} #profile-common-points-headline-picto span {font-size:3.5rem; line-height:1rem;} #profile-common-points-headline-picto span.overlap {color:#6c757d; position:relative; left:-20px;} #profile-common-points-headline h3 {margin:0;} #profile-common-points-data .list-label, #profile-common-points-data .list-value {color:#fff;} #profile-settings-inner {width:100%} span.data-toggle-close {display:inline-block;} span.data-toggle-open {display:none;} .collapsed span.data-toggle-close {display:none;} .collapsed span.data-toggle-open {display:inline-block;} .list-item {display:flex; margin:0 0 1.7rem 0;} /*.list-item::before {display:block; margin:.4375rem 1rem 0 0; -webkit-border-radius: 50%; border-radius: 50%; background: #6c757d; width: .5rem; height: .5rem; content: '';}*/ .list-item-content {display:flex; flex-direction:column; overflow-wrap:break-word; word-wrap:break-word;} .list-label {color: rgb(168,1,35); font-family: "FuturaStd-Heavy";} .list-value {color: rgb(168,1,35); overflow-wrap: break-word; word-wrap: break-word;} @media (min-width: 996px) { #profile-side-column {top: -20px;} #profile-picture-action-buttons {justify-content: space-around;} } @media (min-width: 1200px) { #profile-side-column {top: -40px;} } /* Grille Events */ .events-grid .grid-item {width:100%; display:flex;} .events-grid .card-body-row {display:flex; flex-direction:column;} .events-grid .card-body-row .card-body-left, .events-grid .card-body-row .card-body-right {width:100%; justify-content:flex-start; text-align:left; } .events-grid .card-body-row:first-child {margin-bottom:1rem; flex-direction:column-reverse;} .events-grid { display:flex; flex-wrap:wrap; justify-content:flex-start; width:100%; flex-direction:column;} .events-grid .grid-item {width:100%; } .events-grid .grid-item h2.card-title {margin-bottom: .1rem;} .events-grid .grid-item .event-category {position:absolute; top:12px; left:12px; font-size:1.5rem; background-color:#fff; padding:5px; border-radius:50%; width:50px; height:50px; text-align: center;} .events-grid .grid-item .card-picture {height:240px; width:100%; display:inline-block; overflow:hidden; position:relative;} .events-grid .grid-item .card-picture img {object-fit:cover; background-position:top; width:100%; height:100%;} .events-grid .grid-item .card-body {background-color: rgb(255,151,67);border: 2px solid #ff6225;} .events-grid .grid-item .card-body h2, .events-grid .grid-item .card-body h3 {color: #ffffff; text-align:left;} .events-grid .grid-item .card-body h2 {font-size:1.6em;} .events-grid .grid-item .card-body h3 {font-size:1.2em;} .events-grid .grid-item .card {width:96%; margin: 0 auto; margin-bottom: 2em; border:0;} @media (min-width: 768px) { .events-grid {flex-direction:row; align-content:stretch;} .events-grid .grid-item {width:50%;} .events-grid .card-body-row {flex-direction:column;} .events-grid .card-body-row .card-body-left, .events-grid .card-body-row .card-body-right {width:100%; justify-content:flex-start; text-align:left; } .events-grid .grid-item .card-body h2 {font-size:1.8em;} .events-grid .grid-item .card-body h3 {font-size:1.2em;} } @media (min-width: 992px) { .events-grid .card-body-row, .events-grid .card-body-row:first-child {display:flex; width:100%; flex-direction:row;} .events-grid .card-body-row .card-body-left {justify-content:flex-start; text-align:left; width:70%;} .events-grid .card-body-row .card-body-right {justify-content:flex-end; text-align:right; width:30%;} .events-grid .grid-item .card-body h2 {font-size:2em;} .events-grid .grid-item .card-body h3 {font-size:1.4em;} } /* Page Event (détail) */ #event-date-header {display:flex; justify-content:center;} #event-date-header-category {font-size:2.2rem; background-color:#343a40; color:#fff; padding:5px; border-radius:50%; width:70px; height:70px; text-align: center; margin-right:20px;} /* Page d'edition de son profil */ #profile-picture-gallery-main-picture {position:relative; width:100%; padding-top:100%; overflow:hidden; border-radius:90%;} #profile-picture-gallery-main-picture .picture-item {text-align:center; background-color:#e5e5e5; position:absolute; top:0; height: 100%; width: 100%;} #profile-picture-gallery-main-picture .picture-item img {width: 100%; height: 100%; object-fit: cover;} #profile-picture-gallery-main-picture .picture-item .profile-picture-status {font-size:3rem;} #profile-picture-gallery-main-picture .picture-item span.default {font-size:10em; padding:10px 0;} #profile-pictures-thumbnails {flex-wrap:wrap;} #profile-pictures-thumbnails .picture-item {margin:0 8px 8px 0; width:180px; height:180px; position:relative; border:0; overflow:hidden; border-radius: 90%;} #profile-pictures-thumbnails .picture-item img {width:100%; height:100%; object-fit:cover;} .profile-picture-status {position:absolute; top:8px; left:8px; font-size:1.5rem; line-height:1rem; color:#fff;} .profile-picture-delete {position:absolute; bottom:10px; right:40%; font-size:1.2rem; color:#000; color:#6c757d;} .profile-picture-delete a {color: #fff; padding: 3px; background-color: rgba(0, 0, 0, 0.2); width:30px; height:30px; border-radius:90%; text-align:center; display:inline-flex; justify-content:center; align-items:center;} .profile-picture-delete a:hover {color:#000; background-color: rgba(255, 255, 255, 0.6);} #profile-settings #search-filters-settings-forms {padding:2em; margin-bottom:1em; background-color:rgb(255, 182, 122); border-top:0;} #profile-view #profile-settings #search-filters-settings-forms {background-color:rgb(255, 163, 88);} #profile-settings #search-filters-settings-nav.nav-pills .nav-link {width: 25%; padding-top: 10px; border-bottom: 3px solid rgb(168,1,35);} #profile-settings #search-filters-settings-nav.nav-pills .nav-link.active, #profile-settings #search-filters-settings-nav.nav-pills .show > .nav-link {background-color:rgb(255, 182, 122); border-bottom:0;} #profile-view #profile-settings #search-filters-settings-nav.nav-pills .nav-link.active, #profile-settings #search-filters-settings-nav.nav-pills .show > .nav-link {background-color:rgb(255, 163, 88); } #profile-settings #search-filters-settings-nav.nav-pills .nav-link.active img, #profile-settings #search-filters-settings-nav.nav-pills .nav-link:hover img {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(100%) contrast(300%);} #search-filters-settings-forms.tab-content > .active {display:block;} @media (min-width: 768px) { #profile-picture-gallery-main-picture .picture-item .profile-picture-status {font-size:1.5rem;} } @media (min-width: 992px) { #profile-picture-gallery-main-picture .picture-item .profile-picture-status {font-size:3rem;} } /* Page Messages */ #chatroom-left-column {border-right:0;} chatroom-right-column {background-color:#fff;} #chatroom-profiles-header {padding:12px 12px 24px 12px; background-color:rgb(255, 151, 67); border-top-left-radius:15px; border-top-right-radius:15px;} #chatroom-profiles-header h2 {font-size:1.3rem; line-height:1.0; padding-top:4px;} .chatroom-profile {background-color: rgb(255, 167, 96); padding:12px; border-bottom: 3px dotted rgb(168,1,35); color:rgb(168,1,35);} .chatroom-profile:hover {background-color:#ff8730; border-bottom: 3px solid #ff8730; color:#fff; text-decoration:none;} .chatroom-profile.active, .chatroom-profile.active:hover {background-color:rgb(168,1,35); border-bottom: 3px solid rgb(168,1,35); color:#fff; text-decoration:none;} .chatroom-profile-status {font-size:.8rem; display:flex; justify-content:center; align-items:center; padding: 0 5px 0 0; min-width:16px;} .chatroom-profile-picture {font-size:3.5rem; display:flex; justify-content:center; align-items:center; width:55px; height:45px; min-width: 45px; } .chatroom-profile-picture img {width:100%; height:100%; object-fit:cover; background-position:top; border-radius:50%; } .chatroom-profile-data {display:flex; width:100%; flex-direction:column; align-self:center; padding: 0 0 0 8px;} .chatroom-profile-header {display:flex; width:100%; flex-direction:row; justify-content: space-between; padding-bottom:5px;} .chatroom-profile-pseudo {display:flex; justify-content:flex-start; line-height:1rem; font-weight:700; font-size:1.1rem; } .chatroom-profile-pseudo .badge {margin-left:10px;} .chatroom-profile-lastactivity {display:flex; justify-content:flex-end; font-size:.8rem; line-height:1rem;} .chatroom-profile-message-summary {font-size:.8rem; line-height:1rem;} #chatroom-profiles-footer {padding:12px; background-color:rgb(255, 151, 67); border-bottom-left-radius:15px; border-bottom-right-radius:15px; min-height:40px;} #chatroom-discussion-header {padding:0 0 12px 0; border-bottom: 3px dotted rgb(168,1,35); margin-bottom: 10px;} #chatroom-discussion-header h2 {font-size:1.3rem; line-height:1.0; padding-top:4px; font-weight:700; color:#212529;} #chatroom-discussion-header h2 a {color:rgb(168,1,35);} #chatroom-discussion-header h2 a:hover {color:#fff; text-decoration:none;} .chatroom-discussion-header-picture {display:flex; justify-content:center; align-items:center; width:55px; height:55px; overflow:hidden; } .chatroom-discussion-header-picture img {width:100%; height:100%; object-fit:cover; background-position:top; border-radius:50%; } .chatroom-discussion-header-pseudo {align-items:center; display:flex; margin-left:16px;} #chatroom-discussion-flow {height:auto; max-height:560px; overflow-y:auto; overflow-x:hidden; display: flex; flex-direction: column; } @media (min-width: 768px) { #chatroom-discussion-flow {height:560px;} } /* Scrollbar */ /* Works on Firefox */ * {scrollbar-width: thin; scrollbar-color: rgb(168,1,35) rgb(254, 200, 156);} /* Works on Chrome, Edge, and Safari */ *::-webkit-scrollbar {width: 12px;} *::-webkit-scrollbar-track {background: rgb(255,151,67);} *::-webkit-scrollbar-thumb {background-color: rgb(254, 200, 156); border-radius: 20px; border: 3px solid rgb(255,151,67);} .chatroom-discussion-flow-item-text {margin-bottom:2em; width: 80%;} .chatroom-discussion-flow-day-divider {border-bottom: 1px solid rgb(168,1,35); width:100%; display:inline-block; text-align: center; margin-bottom:2em;} .chatroom-discussion-flow-day-divider span {color:rgb(168,1,35); font-size:.8rem; line-height:1.1rem; background-color:rgb(255, 151, 67); position:relative; top:10px; padding:0 10px;} .chatroom-discussion-flow-item.recipient {display:flex;} .chatroom-discussion-flow-item-picture {display:flex; justify-content:center; align-items:center; width:35px; height:35px; overflow:hidden; margin-right: 10px; } .chatroom-discussion-flow-item-picture img {width:100%; height:100%; object-fit:cover; background-position:top; border-radius:50%; } .flow-time {font-size:.8rem; line-height:1.1rem; margin:0 2px 2px 2px; color:rgb(168,1,35);} .flow-phylactere {padding:8px 12px 10px; border-radius:10px; background-color:rgb(255, 167, 96); font-size:.9rem; line-height:1.1rem; margin-bottom:2px; display:inline-block; } .sender .flow-phylactere {background-color:rgb(255, 167, 96);} .sender .chatroom-discussion-flow-item-text {display:inline-flex; flex-direction:column; align-items:flex-end; width:78%; margin-left:20%; text-align:right;} #chatroom-discussion-text-controls {margin:1.4em 0;} #chatroom-discussion-text-smileys-grid {padding:20px; border-radius: 10px 10px 0 0; background-color:rgb(255, 167, 96); font-size:1.2em;} #chatroom-discussion-text-smileys-grid a:hover {text-decoration:none;} #chatroom-discussion-text-editor {padding:20px; border-radius: 10px; background-color:rgb(255, 167, 96);; font-size: .9rem; line-height: 1.1rem; margin: 10px 0 2px 0; display: inline-block; width: 100%; } #chatroom-discussion-text-editor textarea, #chatroom-discussion-text-editor div[contenteditable] {border:0; background-color:rgba(255,255,255,0.3);} #chatroom-discussion-text-editor textarea:focus, #chatroom-discussion-text-editor div[contenteditable]:focus {outline: none; box-shadow: 0 0 0 4px rgba(168,1,35,0.4);} #chatroom-discussion-text-editor.flatcorners {border-radius: 0 0 10px 10px;} #chatroom-discussion-text-editor .form-control { background-color: transparent; border: 0; font-size:.9rem;} #chat-buttons-bar { display:flex; justify-content:flex-end; margin-top:.5em;} .chat-button {font-size:1.3rem; color:rgb(168, 1, 35); padding:0 5px; margin-right: 10px; position:relative;} .chat-button:last-child {margin-right: 0px;} .chat-button:hover {color:#fff;} #smiley-close {position: absolute; background-color: #f5f5f5; visibility: hidden;} a.chat-button[aria-expanded="true"] #smiley-close {visibility: visible; } @media (min-width: 768px) { #chatroom-left-column {border-right:1px solid rgb(168, 1, 35);} #chatroom-profiles-header {border-top-left-radius:15px; border-top-right-radius:0;} #chatroom-profiles-footer {border-bottom-left-radius:15px; border-bottom-right-radius:0; } } /* Page Back office profils */ #back-profile-search h2 {display: inline-block; margin-right: 20px; color:#fff;} #back-profile-search a {color:#fff;} #back-profile-search a:hover {color:#fff;} #back-search-results {width:100%;} #back-search-results .profile-picture-status {font-size:2.4em;} #back-search-filters-settings-form .form-group {margin-right: 1em;} /* Page Back office demandes d'inscriptions */ table.subscribers-list {width:100%;} table.subscribers-list td, table.subscribers-list th {border-bottom:1px solid #000; padding:8px 2px;} tr.subscriber-entry td {} #accordion {width:95%; margin:0 auto;} #accordion a.btn-link:hover {cursor:pointer; text-decoration:none;} #accordion .card {border-radius: 0;} #accordion .card-body {background-color: rgba(227, 227, 227, 0.41);} #accordion .card-body .subscriber-item-email a {color:rgb(168,1,35);} #accordion .card-header {color:rgb(168,1,35); border: 1px solid rgba(13, 13, 13, 0.2); background-color: rgba(0,0,0,0.125); padding:10px 30px;} #accordion .card.subscriber-item {background:transparent; margin-bottom: 15px;} #accordion .card-header.open {background-color: rgba(175,0,35,0.7); color: #fff;} #accordion .card-header:hover {cursor: pointer; text-decoration: none; background-color: rgba(175,0,35,1); color: #fff;} #accordion .card-header[aria-expanded="true"] {background-color:rgb(102, 96, 96); border-bottom:1px solid rgb(149, 141, 141); color:#fff;} .subscriber-list-header, .subscriber-item, .subscriber-item-header, .subscriber-item-main {width:100%;} .subscriber-list-header {margin-bottom:15px; padding: 0 20px; display:none;} .subscriber-item-header {display:flex; flex-direction:column;} .subscriber-item-date, .subscriber-item-name, .subscriber-item-contact-pref, .subscriber-item-status, .subscriber-item-header-toggle {width:100%} .subscriber-item-header-toggle {text-align: right} .subscriber-item-main {display:flex; flex-wrap:wrap; } .subscriber-item-main-column {width:100%; padding:10px;} .subscriber-item-main-fullwidth {width:100%; padding: 15px 0 0; text-align: right; border-top: 1px solid rgb(168,1,35); margin-top: 5px;} .subscriber-item-main-fullwidth .btn {margin:0 0 20px 0; width:100%;} .subscriber-item-label {font-weight:600;} .subscriber-item-main .form-control {padding:0 4px; font-size:.9rem;} .subscriber-item-main select.form-control {height:26px;} @media (min-width: 768px) { #accordion {width:100%;} .subscriber-item-header {display:flex; flex-direction:row;} .subscriber-list-header {display:flex;} .subscriber-item-main-column {width: 33.3333%; padding: 10px;} .subscriber-item-date, .subscriber-item-name, .subscriber-item-contact-pref, .subscriber-item-status, .subscriber-item-header-toggle {width:25%} .subscriber-item-main-fullwidth .btn {margin-left:10px; width:auto;} #accordion .card-header {color:rgb(168,1,35); border: 1px solid rgba(13, 13, 13, 0.2); background-color: rgba(0,0,0,0.125); padding:10px 20px;} } /* Page Back office contenus - Liste */ .content-list {width:100%;} .content-list-item {width:100%; display:flex; border-bottom:1px solid rgba(0,0,0,0.125); padding:10px 0;} .content-list-item-name {width:75%; } .content-list-item-name a{color:rgb(168,1,35);} .content-list-item-name a:hover{color:#fff; text-decoration:none;} .content-list-item-buttons {width:25%; display:flex; justify-content:flex-end;} .content-list-item-buttons a {font-size:1.2em; color:#333} .content-list-item-buttons a:last-child {margin-left:50px;} /* Page Back office contenus - Blocks */ .block-list {width:100%;} .block-list-item { width:100%; display:flex; border:1px solid rgba(13, 13, 13, 0.2); background-color:rgba(0,0,0,0.125); padding:10px 20px; justify-content:space-between; margin-bottom:15px;} .block-list-item-position-buttons {width:8%} .block-list-item-position-buttons a {font-size:1.2em; color:#333} .block-list-item-position-buttons a:first-child {margin-right:20px;} .block-list-item-position-buttons a:hover {color:#000} .block-list-item-principe {width:20%} .block-list-item-name {width:62%; font-weight:600;} .block-list-item-buttons {display:flex; justify-content:flex-end;} .block-list-item-buttons a {font-size:1.2em; color:#333} .block-list-item-buttons a:last-child {margin-left:50px;} .block-list-item-buttons a:hover {color:#000} /* Page Back office contenus - Blocks pages events */ #page-event-edit .field-label {font-weight:500; font-size:1.5em;} /* Page Back office Validation */ .user-id {width:100%; display:flex; align-items:center; margin-bottom: 2em;} .user-id .user-id-picture { display:inline-block; width:140px; height:140px; position:relative; border:0; overflow:hidden; border-radius:90%;} .user-id .user-id-picture img {object-fit: cover; background-position: top; width:100%; height:100%;} .user-id .user-id-body {padding-left:10px;} .user-id .user-id-body a {color:rgb(168,1,35);} .user-id .user-id-body a:hover {color:#fff; text-decoration: none;} .user-validation-group {width:100%; margin: 0 0 4em 0; padding-bottom:2em; border-bottom: 2px solid rgb(211, 62, 22);} .pictures-validation-form {width:100%;} .user-validation-group .profiles-grid {border: 1px solid rgba(13, 13, 13, 0.2); background-color: rgba(0,0,0,0.125); padding: 1em 0 0 0; margin-bottom: 2em;} .btn-validation {margin:1em 0;} /* Page Back office Ban and Block */ .banandblock {margin:1em 0 3em 0;} .banandblock-list {margin:1em 0 1.5em 0;} .banandblock-list-item {display:flex; padding: 10px; align-items:center;} .banandblock-list-item:nth-child(odd){background-color: rgba(0,0,0,0.125); } .banandblock-list-item.header {font-family: "FuturaStd-Heavy"; } .list-profile { width:20%; min-width:400px; display:flex; align-items:center;} .list-profile .list-profile-picture { display:inline-block; width:65px; height:65px; position:relative; border:0; overflow:hidden; border-radius:90%;} .list-profile .list-profile-picture img {object-fit: cover; background-position: top; width:100%; height:100%;} .list-profile-body {padding-left:10px;} .list-profile-body a {color:rgb(168,1,35);} .list-profile-body a:hover {color:#fff; text-decoration: none;} .list-date {width:10%; min-width: 100px;} .list-abstract {width:50%;} .list-action {width:20%; text-align: right;} .buttons-validation-form {text-align: right;} .showpointer {cursor: pointer;}