@import url(./element.css);

body{
    /* background: #F0F2F5; */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.1' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), rgba(27, 31, 48, .7);
    position: relative;
    background-attachment: fixed;
}
#el-page{
    display: grid;
    grid-template-areas: "header"
                         "."
                         "main"
                         "."
                         "footer";
    grid-gap: 2rem;
    position: relative;
    min-height: 100vh;
}

/* HEADER PAGE */
#el-header-page{
    grid-area: header;
    background-color: var(--white);
    width: 100%;
    box-shadow: 0 8px 10px rgba(0,0,0,.2);
}#el-header-page .el-content-area{
    padding: .5rem 1rem;
}#el-header-page ul{
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}#el-header-page li:not(.el-logo, #el-open-menu-phone){
    display: none;
}#el-header-page li a{
    color: var(--color);
    font-family: var(--font-text);
    font-weight: 800;
    font-size: var(--font-size-text);
    text-transform: uppercase;
    transition: var(--transition);
    text-decoration: none;
}#el-header-page li a:hover{
    color: var(--primary);
}#el-header-page .el-logo{
    margin-right: auto;
    width: 40px;
}#el-header-page #el-open-menu-phone .svg-inline--fa{
    color: var(--secondary);
}#el-header-page .el-btn{
    box-shadow: none;
}


/* MAIN PAGE */
#el-content-page{
    grid-area: main;
    width: calc(100% - 2rem);
    max-width: var(--width);
    background: var(--white);
    margin: auto;
    box-shadow: 0 8px 10px rgba(0,0,0,.2);
}
#el-content-page #el-navbar{
    display: none;
}#el-content-page #el-container-section{
    background: var(--white);
    gap: 1rem;
    margin: 0 auto;
}#el-search-job .el-grid{
    gap: 1rem;
    width: 100%;
}


#el-jobs .el-grid,
#el-cvtheques .el-grid{
    gap: 1rem;
}.el-grid-jobs{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}#el-jobs .el-grid-jobs ~ .el-btn,
#el-details .el-btn.el-apply{
    width: fit-content;
    border: 1px solid #cecece;
    color: var(--grey);
    border-radius: 5px;
    transition: var(--transition);
}#el-jobs .el-grid-jobs ~ .el-btn:hover{
    color: var(--white);
    background: var(--primary);
}#el-jobs .el-grid-jobs ~ .el-btn.el-next{
    align-self: flex-end;
}

#el-cvtheques .el-grid-cv{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 250px);
    grid-gap: 1em;
    justify-content: center;
}.el-details-mission,
.el-grid-author .el-biography{
    font-family: var(--font-text) !important;
    font-size: var(--font-size-text);
    padding: 1rem;
    border-radius: 3px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    line-height: var(--line-height);
    color: var(--grey);
}.el-grid-details{
    display: flex;
}#el-profil-demande .el-grid,
#el-details .el-grid,
#el-author .el-grid,
#el-accounts .el-grid{
    gap: 1rem;
}

#el-details .el-btn.el-apply{
    border: 1px solid var(--secondary);
    color: var(--secondary);
    transition: var(--transition);
}#el-details .el-btn.el-apply:hover{
    background: var(--secondary);
    color: var(--white);
}

.el-grid-author .el-boxImg{
    grid-area: zone1;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: var(--white);
    width: 90px;
    height: 90px;
}.el-grid-author .el-img{
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}.el-grid-author .el-name-and-sector{
    grid-area: zone2;
    font-size: var(--font-size-text);
    font-family: var(--font-text) !important;
    font-weight: 300;
    color: var(--grey);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}.el-name-and-sector .el-name{
    font-size: calc(var(--font-size-text) * 1.1);
    color: var(--secondary);
    font-weight: 800;
}.el-name-and-sector .el-sector{
    line-height: var(--line-height);
}.el-grid-author .el-biography{
    grid-area: zone3;
}.el-grid-author{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "zone1 zone2 zone2"
                         "zone3 zone3 zone3";
    align-items: center;
    grid-gap: .5rem;
}.el-grid-accounts{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1rem;
}


/* FOOTER PAGE */
#el-footer-page{
    grid-area: footer;
    font-family: var(--font-text) !important;
    font-size: var(--font-size-text);
    font-weight: 300;
    color: var(--white);
    padding: 1rem;
    background: var(--secondary);
}

.el-grid-input-controls{
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
    border: 1px solid rgba(0, 0, 0 , .15);
    border-radius: var(--border-radius);
    padding: 1em;
}.el-grid-input-controls legend{
    font-family: var(--font-text) !important;
    font-weight: 600;
    font-size: var(--font-size-text);
}#cke_content {
     width: 100%;
 }
.ts-dropdown [data-selectable].option{
    padding-left: 1.5rem;
}.optgroup-header {
     background: var(--accent) !important;
     font-weight: 600;
     color: var(--secondary);
 }.ts-wrapper {
      font-family: var(--font-text);
      font-size: var(--font-size-text);
      color: var(--grey);
  }
.el-container-competences{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.dataTable{
    font-family: var(--font-text);
    line-height: var(--line-height);
}.dataTable td{
    font-size: var(--font-size-text);
    font-weight: 300;
}#select2--container,
  .select2-container--default .select2-selection--single .select2-selection__arrow{
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    font-size: var(--font-size-text);
    font-weight: 300;
}.select2-container--default .select2-selection--single,
.select2-container,
.ts-control{
    min-height: 40px!important;
}.select2.select2-container.select2-container--default,
    #select2--container *{
    font-family: var(--font-text);
}