/* main HTML Elements */
/* Alain G */
html {
    height: 100%;
    margin: 0 auto;
    background-color: lightgray;
}

body {
    margin: 0;
    background-color: aliceblue;
    color: #1e4f8c;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    min-height:  100vh;

    overflow-x: hidden;
    position: relative;
}
img {
    max-width: 100%;
    height: auto;
}

ul li {
    list-style-type: none;
    text-align: left;
}

h1 {
    font-size: 2.75rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.33em;
}

h5 {
    font-size: .83em;
}

h6 {
    font-size: .67em;
}

h1, h2, h3, h4, h5, h6 {
        color: #d96833;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 300;
        line-height: 140%;
        text-align: center;

    }

p {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 300;
    line-height: 1.5rem ;
}

p:first-child {
       padding-top: 0;
       margin-top: 0;
   }

p:last-child {
    padding-bottom: 1rem;
}

li {
    /* 16px */
}

li {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem; /* 16px */
    line-height: 1.5rem ;
}

/* End of css tab styles */

.input-field label,
.select-field label {
    font-weight: 300;
    color: black;
}

.content {
    grid-area: content;
    background-color: aliceblue;
}

.table-th th {
    font-family: 'Roboto Condensed', sans-serif;
    color: #d96833;

}

.table-td  {
    font-family: 'Roboto Condensed', sans-serif;
    color: #1e4f8c;

}

.two-columns, .one-column {
    margin-left: 5%;
    margin-right: 5%;
}

.rich-text ul li {
    list-style-type: circle !important;
    text-align: left;
    line-height: 140%;
}

div.header {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: none;
}


.author {
    text-align: center;
    font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
}

.content {
    background-color: aliceblue;

}

div.profile-form h5 {
    font-size: 20px;
    line-height: 140% !important;
    padding-bottom: 10px;
}

hr {
    border: none;
    border-bottom: 1px solid #1565C0;
    margin-bottom: 1rem;
    border-color: #d96833;
}

.rich-text hr {
    border: none;
    border-bottom: 1px dashed #1565C0;
    margin-bottom: 1rem;
    border-color: #d96833;
}

.rich-text ul li {
    list-style-type: circle !important;
    text-align: left;
    line-height: 180%;
}

.temoignages {
    display: flex;
    flex-direction: column;
    background-color: beige;
    padding: 40px;
    padding-bottom: 10px;
    border-radius: 25px;
    margin-bottom: 40px;

    box-shadow: 3px 3px grey;
    color: black;
}

.formulaire {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.formations {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.formations-detail {
    width: 600px;
    margin-left: auto;
    margin-right: 10px;
}

div.g-recaptcha {
    margin-left: auto;
    margin-right: auto;
}


.leftsidebar p {
    margin-top: 1rem;
}


/* Navigation, Menu */

div.nav-wrapper {
    background-color: #ee6e73 !important;
}

.navbar-nav a {
    padding: 20px;
    font-size: 13px;
}

.dropdown-trigger {
    padding-top: 10px;
}

.sidenav li > a {
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5rem;
    padding-top: 0px;
    padding-bottom: 0px;
}

.standard-page {
        margin-left: auto;
        margin-right: auto;
    }

.auth-space {
    width: 600px;
    margin: auto;
    padding-top: 40px;
}

/* For Two-column layout with left sidebar */
.bodycontent {
    margin-right: 20px;
}

@media (max-width: 600px) {

     .two-columns {
         columns: 1;
         column-gap: 40px;
         -webkit-columns: 1;
         -moz-columns: 1;
     }

    .separation {
        grid-area: separation;
    }

    .practitioner_list_info {
        grid-area: practitioner_list_info;
    }
    .ville {
        grid-area: ville;

    }
    .header {
        grid-area: header;
        display: grid;
        background-color: aliceblue;
        grid-template-columns: 1fr;
        grid-template-areas: "htp-logo";
        padding: 10px;
    }

    .profile-picture {
        grid-area: profile-picture;
        background-color: aliceblue;
        text-align: center;
    }

    .profile-picture img {
        display: block;
    }

    .profile {
        display: grid;
        grid-area: profile;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "profile-picture";
    }

     .profile-list {
         display: grid;
         align-items: center;
         justify-items: center;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr 40px;
         grid-area: profile-list;
         grid-gap: 2rem;
         grid-template-areas: "profile-picture practitioner_list_info"
                              "separation separation"

     }
}
@media (max-width: 768px) {

    .standard-page {
        margin-left: auto;
        margin-right: auto;
    }
     .two-columns {
         columns: 1;
         column-gap: 10px;
         -webkit-columns: 1;
         -moz-columns: 1;
     }

    .separation {
        grid-area: separation;
    }

    .practitioner_list_info {
        grid-area: practitioner_list_info;
    }
    .ville {
        grid-area: ville;

    }
    .header {
        grid-area: header;
        display: grid;
        background-color: aliceblue;
        grid-template-columns: 1fr;
        grid-template-areas: "htp-logo";
        border: 0;
    }

    .profile-picture {
        grid-area: profile-picture;
        background-color: aliceblue;
        text-align: center;
    }

    .profile-picture img {
        display: block;
    }

    .profile {
        display: grid;
        grid-area: profile;
        padding: 20px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "profile-picture";
    }

     .profile-list {
         display: grid;
         align-items: center;
         justify-items: center;
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 1fr 40px ;
         grid-area: profile-list;
         grid-gap: 2rem;
         grid-template-areas: "profile-picture practitioner_list_info"
                              "separation separation"

     }
}

@media (min-width: 769px) {

    /* block for blog summary */
    .center-block {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .standard-page {
        max-width: 1080px;
        margin-left: 15%;
        margin-right: 15%;
    }

    h1 {
    font-size: 2.5rem;
    line-height: 120%;
    margin: 0;
}
    h2 {
    font-size: 2rem;
    line-height: 120%;
    margin: 0;
}

    h3 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 120%;
}

     .two-columns {
         columns: 2 22em;
         column-gap: 40px;
         -webkit-columns: 2 22em;
         -moz-columns: 2 22em;
         -webkit-column-rule: 1px solid lightgrey;
         -moz-column-rule: 1px solid lightgrey;
          column-rule: 1px solid lightgrey;
         padding-top: 1rem;
         padding-bottom: 2rem;
     }

    div.rich-text > p:first-child {
        padding-top: 0;
        margin-top: 0;
    }

    div.two-columns p {
        widows: 2;
        orphans: 2;
    }
    .one-column {
        column-fill: balance;
        margin-right: 5%;
    }

    .practitioner_list_info {
        grid-area: practitioner_list_info;
    }

    .profile-text {
        grid-area: profile-text;
    }

    .profile-text :first-child {
        padding-top: 0;
        margin-top: 0;
        padding-top: 0;
    }

    .separation {
        grid-area: separation;
    }

    .header   {
        grid-area: header;
        display: grid;
        background-color: aliceblue;
        /* border: 2px solid #d96833; */
        grid-template-columns: 1fr;
        grid-template-areas: "htp-logo";
        padding-top: .5rem;
        padding-bottom: .2rem
    }
    .profile-picture {
        grid-area: profile-picture;
        background-color: aliceblue;
        text-align: center;
    }

    .profile {
        display: grid;
        margin-top: 5rem;
        grid-area: profile;
        grid-column-gap: 1rem;
        grid-template-columns: 1fr 200px minmax(200px, 400px) 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: ". profile-picture profile-text .";
    }

    .profile-list {
        display: grid;
        grid-area: profile-list;
        align-items: center;
        justify-items: center;
        margin-bottom: 4rem;
        grid-template-columns: 1fr minmax(200px, 200px) minmax(200px, 300px) 1fr;
        grid-template-rows: 1fr 20px;
        grid-template-areas: '. profile-picture  practitioner_list_info .'
                             '. separation separation .'


     }

    .practitioner-picture-name {
        font-size: 1.5rem;
        text-align: center;
        color: #d96833;
    }
}

/* Breadcrumbs */
.breadcrumbs-grid {
    grid-area: breadcrumbs-grid;
    background-color: aliceblue;
    text-align: right;
    padding-top: 5px;
    padding-right: 20px;
}

.breadcrumb-container {
    background-color: aliceblue;
    width: 100%;
    height: 100%;
    text-align: left;
    margin-bottom: 20px;
}

div.row.breadcrumb-container {
    padding: 0;
    margin: 0;
    background-color: aliceblue;
}

.breadcrumb {
    background-color: aliceblue;
    color: #1e4f8c;
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    margin: 0;
    height: 50px;
}

.breadcrumb a, .breadcrumb .active {
    color: #1e4f8c;
}

.breadcrumb .active {
    font-weight: bold;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: lightblue;
    text-decoration: none;
}

.breadcrumb > li + li:before {
    content: "\00BB";
}

ol.breadcrumb li {
    display: inline-block;
}

.wide-menu-items {
    width: 200px !important;
}

/* Added to customize BareryDemo Blog */

.blog-index-paragraph p {
    text-align: left;
    padding: 0 2rem;
}


/* From Wagtail BakeryDemo */


/* Pagination navigation */
nav[role=pagination] {
    margin-top: 50px;
    text-align: center;
}


/* Blog list view */
.blog-tags > li {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: -6px;
    padding: 4px 18px;
    text-transform: uppercase;
}

.blog-tags > li:first-child {
    margin-left: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.blog-tags > li:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.blog-list {
    margin-top: 10px;
}

.blog-list li {
    list-style: none;
}

.blog-list-item:hover img {
    opacity: 0.3;
}

.blog-list-item img {
    margin-top: 30px;
}

.blog-list-item a {
    color:#1e4f8c;
}

.blog-list a {
    color: #1e4f8c;
    text-decoration: none;
}

.blog-list-title {
    text-decoration: none;
    padding-top:0;
    padding-bottom: 1rem;
    margin-top: 1.6rem;
    margin-bottom: 0;
}

.blog-list-summary {
    margin-top:0;
    padding:0;
}

.blog-list-summary p {
    text-align: left;
    padding-left: 2rem;
    padding-right: 2rem;
}