@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px');

body {
    font-family: 'Roboto', sans-serif;
    background-color: rgb(240,240,240);
}

h1, h2, h3 {
    font-family: 'Slabo 27px', serif;
}

h1 {
    font-size:38px;
}

.structure,
.container .container__element,
.container--regular .container__element {
    font-size: 18px;
}

.display-text-large {
    font-size: 22px;
}

.display-text-slim {
    font-size:16px;
}

.display-text-large h1,
h1.display-text-large {
    font-size:42px;
}

.display-text-large h2,
h2.display-text-large {
    font-size:38px;
}

.display-error {
    color:rgb(186,20,20);
}

.display-success {
    color:rgb(56,160,0);
}

.display-warning {
    color:rgb(224,123,8);
}

.display-disable {
    color:rgb(150,150,150);
}

p {
    line-height: 160%;
}

.content_block {
    margin:0px 15px;
}

.content_block li {
    line-height: 160%;
}

.structure__page {
    background-color: white;
}

@media (max-width:768px) {
    .structure,
    .container .container__element,
    .container--regular .container__element {
        font-size: 16px;
    }

    h1 {
        font-size:34px;
    }

    .display-text-large {
        font-size: 20px;
    }

    .display-text-slim {
        font-size:14px;
    }
}

@media (max-width:550px) {
    h1 {
        font-size:30px;
    }

    .display-text-large {
        font-size: 18px;
    }
}

/*
 *  HEADER SITE
 */

.structure__header {
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    z-index:1500;
    background-color: rgb(80,80,80);
    transition: background-color .2s;
    border-bottom:1px solid rgb(110,110,110);
    color:white;
}

/*
.structure__header--scrolltop {
    background-color: transparent;
}
*/

.structure__header__content {
    padding:15px 25px;
}

.structure__header__menu__element {

}

li.structure__header__element--large-padding {
    padding:0px 15px;
}

.structure__header__menu__item {
    display:block;
    padding:10px;
    font-size:28px;
    color:white;
    text-decoration:none;
    opacity:0.5;
    transition:opacity 0.2s;
}

.structure__header__menu__item:hover {
    opacity: 0.7;
}

.structure__header__menu__item > * {
    display:inline-block;
    vertical-align: middle;
}

.structure__header__menu__label {
    margin-left:15px;
}

.structure__header__menu__separator {
    border-right:1px solid rgba(0,0,0,0.1);
    margin-left:10px;
    margin-right:10px;
    height:35px;
    display:block;
}

.structure__header__menu__icon {
    width:45px;
    height:45px;
    font-size:0px;
    white-space: nowrap;
    overflow: hidden;
}

.structure__header__menu__icon > * {
    transition: margin-left 0.2s;
}

.burger_menu__icon--opened > *:first-child {
    margin-left:-45px;
}

.structure__header__menu__image {
    max-width:100%;
    display: inline-block;
}

/*
.structure__header--scrolltop:not(.structure__header--menu-opened) .structure__header__menu__item {
    color:white;
}

.structure__header--scrolltop:not(.structure__header--menu-opened) .structure__header__menu__image {
    filter:invert(100%);
}

.structure__header--scrolltop:not(.structure__header--menu-opened) .structure__header__menu__separator {
    border-color:rgba(255,255,255,0.2);
}
*/

.structure__header__menu--member {
    position:absolute;
    top:15px;
    right:25px;
}

.structure__header__logo {
    position: absolute;
    top:10px;
    right:20px;
    height:75px;
}

.structure__header__logo__image {
    max-height:100%;
    display:block;
}

.structure__header__title {
    font-family: 'Slabo 27px', Serif;
    font-size:24px;
    margin-left:20px;
}

@media (max-width:1024px) {
    .structure__header__content {
        padding:10px 20px;
    }

    .structure__header__menu__item {
        font-size:22px;
        padding:8px;
    }

    .structure__header__menu__label {
        margin-left:10px;
    }

    .structure__header__menu__icon {
        width:38px;
        height:38px;
    }

    .burger_menu__icon--opened > *:first-child {
        margin-left:-38px;
    }

    .structure__header__menu__separator {
        height:28px;
    }

    .structure__header__logo {
        height:54px;
    }

    .structure__header__menu--member {
        top:10px;
        font-size:14px;
    }
}

@media (max-width:768px) {
    .structure__header__logo {
        margin-left:0px;
        left:auto;
        right:15px;
        height:36px;
    }

    .structure__header__title {
        font-size:20px;
    }

    .structure__header__content {
        padding:8px 10px;
    }

    .structure__header__menu__item {
        font-size:18px;
        padding:5px;
    }

    .structure__header__menu__icon {
        width:30px;
        height:30px;
    }

    .structure__header__menu__label {
        margin-left:6px;
    }

    .structure__header__menu__separator {
        height:20px;
    }

    .burger_menu__icon--opened > *:first-child {
        margin-left:-30px;
    }
}

@media (max-width:550px) {
    .structure__header__title {
        display: none;
    }
}

/*
 * MAIN MENU
 */

.global_menu {
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    background-color:white;
    width:350px;
    padding:20px;
    padding-top:120px;
    transition:left 0.3s;
    z-index:1100;
}

.global_menu--closed {
    left:-350px;
}

.structure__menu__item {
    color:rgba(0,0,0,0.5);
    font-size:24px;
    text-decoration: none;
    transition: color 0.2s;
}

.structure__menu__item:hover {
    color:rgba(0,0,0,0.7);
}

.structure__menu__item.active {
    background-color:rgb(186,20,20);
    color:rgba(255,255,255,1);
}

.structure__menu__element .structure__menu__menu .structure__menu__item {
    padding-left:25px;
    font-size:18px;
}

.structure__menu__element .structure__menu__menu .structure__menu__item.active {
    background-color: transparent;
    color:rgb(186,20,20);
}

.menu_layer {
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    background-color:rgba(0,0,0,0.5);
    opacity: 1;
    transition: opacity 0.2s;
    z-index: 1000;
}

.menu_layer--closed {
    display: none;
    opacity: 0;
}

@media (max-width:1024px) {
    .global_menu {
        padding-top:100px;
    }

    .structure__menu__item {
        font-size:20px;
    }
}

@media (max-width:768px) {
    .global_menu {
        padding-top:66px;
    }

    .structure__menu__item {
        font-size:18px;
    }

    .structure__menu__element .structure__menu__menu .structure__menu__item {
        font-size:16px;
    }
}

@media (max-width:550px) {
    .global_menu {
        right:0px;
        width:auto;
        opacity: 1;
        transition: opacity .2s;
        display: block;
    }

    .global_menu.global_menu--closed {
        left:0px;
        opacity:0;
        display: none;
    }
}

/*
 * PAGE CONFIG
 */

.structure__page__content {
    padding:10px;
}

.structure__page__content > *:first-child {
    padding-top:95px;
}

@media(max-width:1024px) {
    .structure__page__content > *:first-child {
        padding-top:74px;
    }
}

@media (max-width:768px) {
    .structure__page__content > *:first-child {
        padding-top:56px;
    }
}

/*
 * FORMS
 */

.form {

}

.form--slim {
    max-width:450px;
    width:100%;
    margin:auto;
}

.form__row {
    margin:20px 0px;
}

.form__row > * {
    display:block;
    margin:8px 0px;
}

.form__row.radio .radio {
    padding:8px;
    white-space: nowrap;
    overflow: hidden;
}

.form__row.radio .radio:hover {
    background-color: rgb(245,245,245);
}

.form__row.radio .radio > * {
    display:inline-block;
    vertical-align: top;
    white-space: normal;
}

.form__element,
.form__element.medium-editor-element {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    padding:7px;
    box-sizing: border-box;
}

.form__element[type=text],
.form__element[type=date],
.form__element[type=datetime],
.form__element[type=password],
textarea.form__element,
.form__element.medium-editor-element {
    width:100%;
    border:2px solid rgb(225,225,225);
    border-radius: 3px;
    transition: border-color .15s;
}

.form__element[type=text],
.form__element[type=date],
.form__element[type=datetime],
.form__element[type=password] {
    max-width: 350px;
}

.form__element[type=text]:hover,
.form__element[type=date]:hover,
.form__element[type=datetime]:hover,
.form__element[type=password]:hover,
textarea.form__element:hover,
.form__element.medium-editor-element:hover {
    border-color:rgb(205,205,205);
}

.form__element[type=text]:focus,
.form__element[type=date]:focus,
.form__element[type=datetime]:focus,
.form__element[type=password]:focus,
textarea.form__element:focus,
.form__element.medium-editor-element:focus {
    border-color:rgb(186,20,20);
}

.form__element--full,
.form__element--full[type=text],
.form__element--full[type=date],
.form__element--full[type=datetime],
.form__element--full[type=password] {
    max-width: 100%;
    width:100%;
}

.form__element--error {
    background-color:#ffdfdd;
}

.form__error {
    font-size:16px;
    color:#ef2417;
}

textarea.form__element {
    height:250px;
}

.form__element.medium-editor-element {
    min-height:250px;
}

.form__element--code {
    background-color: rgb(20,20,20);
    color:rgb(200,200,200);
    font-family: monospace;
}

.medium-editor-element blockquote {
  font-size:18px;
  margin:20px 0px;
  color:rgb(186,20,20);
  text-align:center;
}

/*
 * BUTTONS
 */

.buttons_group {
    margin:15px 0px;
}

.buttons_group .button:last-child {
    margin-right:0px;
}

.button {
    padding:8px 10px;
    display: inline-block;
    border-radius: 8px;
    border:2px solid rgb(20,20,20);
    color:rgb(20,20,20);
    text-decoration: none;
    transition: border-color .2s, color .2s;
    margin:10px;
    margin-left:0px;
    cursor: pointer;
    background-color: transparent;
    font-size:18px;
}

.button:hover {
    color:rgb(186, 20, 20);
    border-color:rgb(186, 20, 20);
}

.button--large {
    padding:12px 18px;
    font-size: 20px;
}

.button--main,
.button[type=submit] {
    background-color:rgb(186, 20, 20);
    border-color:rgb(186, 20, 20);
    color:white;
    transition: background-color .2s;
}

.button--main:hover,
.button[type=submit]:hover {
    background-color: white;
    color:rgb(186, 20, 20);
}

.button--full {
    max-width: 100%;
    width:100%;
    box-sizing: border-box;
    text-align: center;
}

.button--light {
    border-color:rgb(200,200,200);
    background-color:rgb(200,200,200);
    color:rgb(50,50,50);
}

.button--validate,
.button[type=submit].button--validate {
    background: rgb(26,147,0);
    color:white;
    border-color: rgb(26,147,0);
}

.button--validate:hover,
.button[type=submit].button--validate:hover {
    background: white;
    color:rgb(26,147,0);
    border-color: rgb(26,147,0);
}

@media (max-width:768px) {
    .button {
        font-size:16px;
    }

    .button--large {
        font-size:18px;
    }
}

@media (max-width:550px) {
    .button--large {
        padding:10px 12px;
    }
}

/*
 * SECTIONS (for bounding box)
 */

.section_overview {
    padding:50px 0px;
}

/*
 * TOOLS
 */

.full-height {
    box-sizing: border-box;
    /* tools.js */
}

.center-vertical {
    /* tools.js */
}

.separator {
    margin-top:25px;
    margin-bottom:25px;
}

.empty {
    height:200px;
}

@media (max-height:680px) {
    .empty {
        height:150px;
    }
}

@media (max-height:450px) {
    .empty {
        height:100px;
    }
}

.clear-bg {
    background-color:white;
}

.gradient {
    width:100%;
    height:200px;
    display:block;
}

@media (max-height:680px) {
    .gradient {
        height:150px;
    }
}

@media (max-height:450px) {
    .gradient {
        height:100px;
    }
}

.profile-image {
    width:180px;
    height:180px;
    margin:15px auto;
    border-radius: 50%;
    overflow: hidden;
}

.profile-image img {
    width:100%;
}

.separator {
    margin:20px auto;
    width:100%;
    max-width: 400px;
}

.separator--light {
    border-bottom:2px solid rgb(238,238,238);
}

.message {
    padding:10px;
    margin:15px 0px;
    font-size:16px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
    background-color:rgb(249,249,249);
    color:rgba(0,0,0,0.8);
}

.message.warning,
.flag--warning {
    background-color: rgb(255, 208, 114);
    color:rgba(0,0,0,0.8);
}

.message.warning a {
    color:rgba(0,0,0,0.8);
}

.message.error,
.flag--error {
    background-color:rgb(186,20,20);
    color:white;
}

.message.error a {
    color:white;
}

.message.success,
.flag--success {
    background-color: rgb(184, 255, 140);
    color:rgba(0,0,0,0.8);
}

.message.information {
    background-color: rgb(209, 245, 255);
    color:rgba(0,0,0,0.8);
}

@media (max-width:550px) {
    .message {
        font-size:15px;
    }
}

.flag {
    padding:5px;
    margin:3px 5px;
    display: inline-block;
    border-radius: 4px;
    font-size:16px;
    vertical-align: middle;
}

.flag--disable {
    background-color: rgb(200,200,200);
    color:rgba(0,0,0,0.7);
}

.flag--default {
    background-color:rgb(127, 129, 135);
    color:white;
}

.flag--small {
    font-size:14px;
    margin:0px 5px;
    padding:3px 5px;
}

@media (max-width:768px) {
    .flag--small {
        font-size:12px;
    }
}

@media (max-width:550px) {
    .flag {
        font-size:14px;
        padding:3px;
        margin:2px;
    }

    .flag--small {
        font-size:12px;
        padding:2px 3px;
        margin:0px 2px;
    }
}

.subscription_flag {
    border-radius: 5px;
    padding:8px 10px;
    background-color:rgb(225, 255, 188);
    color:rgba(0,0,0,0.6);
    display:inline-block;
}

.subscription_flag--error {
    background-color: rgb(255, 196, 188);
}

.columns {
    display:grid;
}

.columns--2 {
    grid-template-columns: 50% 50%;
}

.column {

}

.column--1 {
    grid-column:1;
}

.column--2 {
    grid-column:2;
}

@media(max-width:600px) {
    .columns--2 {
        grid-template-columns: 100%;
    }

    .columns--2 .column--2 {
        grid-column:1;
    }
}

.member_section {
    border:1px solid rgb(230,230,230);
    padding:10px;
    border-bottom:0px;
}

/*
 * LOGIN FORM
 */

.login_form_container {
    width:100%;
    max-width:450px;
    margin:auto;
}

.login_form_content {
    margin:10px;
}

.login_form__title {
    text-align: center;
}

.login_form__row .form__element[type=text],
.login_form__row .form__element[type=password] {
    max-width: 100% !important;
}

.login_form__password_lost {
    text-align: center;
    color:rgb(150,150,150);
    padding:5px;
    font-size:14px;
}

/*
 * FOOTER
 */

.footer_element {
    margin:20px 0px;
    text-align: center;
}

.footer_logo__image {
    display: block;
    margin:auto;
    max-width:200px;
    width:100%;
    opacity: 0.3;
}

@media (max-width:550px) {
    .footer_logo__image {
        max-width:100px;
    }
}

.structure__footer .structure__menu__element {
    display: inline-block;
}

.structure__footer .structure__menu__item {
    font-size:14px;
}

.structure__footer .structure__menu__item.active {
    background-color:transparent;
    color:rgb(0,0,0,0.7);
}

.structure__footer .structure__menu__element .structure__menu__menu {
    display: none;
}


/*
 * ARTICLE
 */

.article {
    padding:15px;
    margin:10px;
    background-color:white;
    border-radius: 5px;
    border:1px solid rgb(240,240,240);
    text-decoration: none;
    display: block;
    color:rgb(40,40,40);
    transition: border-color .15s;
}

.article:hover {
    border-color:rgb(230,230,230);
}

.article__title {
    margin:15px 0px;
}

a .article__title,
a.article__title,
.article__title a {
    color:rgb(40,40,40);
    text-decoration: none;
}

@media(max-width:768px) {
    .article {
        padding:10px;
        margin:8px;
    }
}

@media(max-width:550px) {
    .article {
        padding:8px;
        margin:6px;
    }
}

/*
 * TABLE
 */

.table {
    border-collapse: collapse;
    margin:15px 0px;
}

.table--full {
    width:100%;
}

.table td,
.table th {
    border:1px solid rgb(220,220,220);
    padding:10px;
}

.table th {
    background-color: rgb(245,245,245);
}

.table_structure {
    overflow: auto;
    width:100%;
}

@media (max-width:768px) {
    .table td,
    .table th {
        padding:8px;
    }
}

@media (max-width:550px) {
    .table td,
    .table th {
        padding:6px;
    }
}

table.tablesorter thead tr .header {
	background-image: url(table/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}

table.tablesorter thead tr .header:hover {
	background-color: rgb(230,230,230);
}

table.tablesorter thead tr .headerSortUp {
	background-image: url(table/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(table/desc.gif);
}

table.tablesorter thead tr .headerSortDown,
table.tablesorter thead tr .headerSortUp {
  background-color: rgb(235,235,235);
  color:rgb(20,150,220);
}

.row-success {
  background-color:rgb(96, 178, 28);
  color:white;
}

.row-error {
  background-color:rgb(244, 107, 66);
  color:white;
}

.row-warning {
  background-color:rgb(255, 169, 58);
  color:white;
}

.cell-error {
    color:rgb(244, 107, 66);
}

.cell-success {
    color:rgb(96, 178, 28);
}

.cell-warning {
    color:rgb(255, 169, 58);
}

/*
 * ARIANE
 */

.ariane {
    margin:15px 0px;
}

.ariane__menu {
    margin:0px;
    padding:0px;
}

.ariane__element {
    display:inline-block;
    list-style-type: none;
    vertical-align: middle;
    margin-right:10px;
}

.ariane__item {
    display:block;
    text-decoration: none;
    color:rgb(150,150,150);
    padding:5px;
    font-size:20px;
}

.ariane__item:hover {
    color:rgb(110,110,110);
}

.ariane__element:first-child .ariane__item {
    padding-left:0px;
}

.ariane__item:after {
    content: '/';
    padding:0px;
    padding-left:15px;
    color:rgb(220,220,220);
}

.ariane__element:last-child .ariane__item:after {
    content:'';
    padding:0px;
}

.ariane__title {
    margin:0px;
}

/*
 * DATA ROW
 */

.data_row {
    border-bottom:1px solid rgb(235,235,235);
    position: relative;
    padding:8px 0px;
}

.data_row--block > * {
    display:block;
}

.data_row:first-child {
    border-top:1px solid rgb(235,235,235);
}

.data_row--no-separator,
.data_row--no-separator:first-child {
    border:0;
}

.data_row__label {
    text-align:left;
}

.data_row__value {
    position: absolute;
    top:8px;
    right:8px;
    font-weight: bold;
}


.data_row--block .data_row__value {
    position:relative;
    top:0px;
    left:0px;
}

.section {
    margin:15px 0px;
}