/* 
 * Copyright (C) Sigmagine, SARL - All Rights Reserved - < contact [at] sigmagine.com >
 * This file is part of Fineaty project
 * Unauthorized copying, reuse or modification of this file, partial or total, by any means, is strictly prohibited
 * Developed by Samuel Tranchet since June 2008
 */


/* 
ROUGE ELEGANCIA : var(--main-button-color);
ROUGE ELEGANCIA : rgba(157,1,44,0.1);
FONT COLOR      : #787878;
YELLOW  : rgb(249,239,58);
*/



@font-face {
    font-family : "icofont";
    src         : url('../fonts/icofont.ttf') format('truetype');
    font-weight : normal;
    font-style  : normal;
}

@font-face {
    font-family: "CocogoosePro";
    src: url('../fonts/CocogoosePro-Light.otf');
    font-weight : 100;
    font-style  : normal;
}

@font-face {
    font-family: "CocogoosePro";
    src: url('../fonts/CocogoosePro-Semilight.otf');
    font-weight : 300;
    font-style  : normal;
}

@font-face {
    font-family: "CocogoosePro";
    src: url('../fonts/CocogoosePro-Regular.otf');
    font-weight : normal;
    font-style  : normal;
}

@font-face {
    font-family: "Larken";
    src: url('../fonts/Larken-Regular.otf');
    font-weight : normal;
    font-style  : normal;
}

@font-face {
    font-family: "Larken";
    src: url('../fonts/Larken-Light.otf');
    font-weight : lighter;
    font-style  : normal;
}

@font-face {
    font-family: "Larken";
    src: url('../fonts/Larken-Italic.otf');
    font-weight : normal;
    font-style  : italic;
}

@font-face {
    font-family: "Larken";
    src: url('../fonts/Larken-BoldItalic.otf');
    font-weight : bold;
    font-style  : italic;
}

:root{
    --elegancia-skin    : #eacec7;
    --elegancia-red     : #bd3833;
    --elegancia-yellow  : #f0b323;
    --elegancia-green   : #555025;
    --elegancia-blue    : #94b7bb;
    --elegancia-orange  : #fa4616;
    --elegancia-purple  : #a5b0e3;
    --elegancia-gold    : #c2a84D;

    --state-blue  : rgba(61, 162, 230, 1);
    --state-red   : rgba(252, 100, 132, 1);
    --state-green : rgba(82, 192, 191, 1);
    --state-orange: rgba(253, 159, 79, 1);
    --state-purple: rgba(151, 103, 248, 1);
    --state-yellow: rgba(254, 205, 102, 1);
    --state-grey  : rgba(201, 203, 207, 1);

    --transparency: 0.2;

    --main-bg-color     : #f7f2ee;
    --main-border-color : #000000;
    --main-border-width : 0.5px;
    --main-bt-color     : #fa4616;
    --main-bt-color-hv  : #f7f2ee;
    --main-info         : #c1c1c1;
    --main-font-color   : #000000;
    --main-th-color     : #aaaaaa;
    --main-row-gap      : 50px;
    --main-column-gap   : 50px;
    --main-tb-bd-color  : #f7f2ee;
    --main-table-hover  : rgb(253,236,231);
    --main-table-section: #FFD37E;
    --main-font-family  : museo-sans, sans-serif;
    --main-title-font   : "CocogoosePro", sans-serif;
    --main-info-font    : "Larken", sans-serif;

    --secondary-bg-color: rgb(253,251,250);

    --fc-today-bg-color             : var(--secondary-bg-color);
    --fc-button-bg-color            : transparent;
    --fc-button-border-color        : var(--main-bt-color);
    --fc-button-text-color          : var(--main-bt-color);
    --fc-button-hover-bg-color      : var(--main-table-hover);
    --fc-button-hover-border-color  : var(--main-bt-color);
    --fc-button-active-bg-color     : var(--main-bt-color);
    --fc-button-active-border-color : var(--main-bt-color);
}

html,body{
    font-family     : arial, sans-serif;
    background-color: var(--main-bg-color);
    font-size       : 14px;
    margin          : 0px;
    padding         : 0px;
    height          : 100%;
    color           : var(--main-font-color);
    font-weight     : 100;
    font-family     : var(--main-font-family);
    letter-spacing  : 0.5px;
}

body{
    background-repeat   : no-repeat;
    background-position : center top;
}


input,select,textarea{
    width           : 100%;
    margin          : 3px 0px;
    padding         : 10px 20px;
    border          : var(--main-border-width) solid var(--main-bt-color);
    background-color: transparent;
}

textarea,
table.formTable .formField.formFieldTextArea{
    resize      : vertical;
    min-height  : 50px;
}

select{
    background-image    : url("../images/blackarrowdown.png");
    background-repeat   : no-repeat;
    background-position : right center;
    -webkit-appearance  : none;
    -moz-appearance     : none;
    appearance          : none;
    padding-right       : 30px;
}

iframe{
    border      : none;
    width       : 100%;
    height      : 100%;
}

a,a:visited{
    color           : var(--main-bt-color);
    text-decoration : none;
}

a.asButton,a.asButton:visited{
    color: var(--main-font-color);
}

a.asGridButton{
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

a.asGridButton > span{
    height: 100%;
}

h1, h2, h3, h4{
    font-family: var(--main-title-font);
    letter-spacing: 1px;
}

h1{
    font-size       : 40px;
    text-transform  : uppercase;
    font-weight     : 300;
}

h2{
    font-size       : 20px;
    text-transform  : uppercase;
    margin-left     : 15px;
    margin-bottom   : 30px;
    margin-top      : 70px;
    font-weight     : 700;
}

h3{
    font-size       : 16px;
    font-weight     : 700;
    text-transform  : uppercase;
}

h4{
    font-size       : 10px;
    padding-bottom  : 10px;
    margin-bottom   : 10px;
    border-bottom   : var(--main-border-width) solid var(--main-border-color);
    font-weight     : 300;
}

h5{
    padding-bottom  : 5px;
    border-bottom   : var(--main-border-width) solid var(--main-border-color);
}

label{
    display         : block;
    font-size       : 10px;
    font-weight     : 400;
    text-transform  : uppercase;
    color           : var(--main-th-color);
    padding-left    : 0px;
}

label.inlineClass{
    display: inline-block;
}

hr{
    border      : none;
    border-top  : 1px solid #cccccc;
    margin      : 15px 0px;
}

summary {
    list-style: none;
}

summary:hover{
    cursor: pointer;
}

details > summary { 
    color: var(--main-font-color);
    clear: right;
}

details[open] > summary { 
    color: var(--main-bt-color);
}

details > summary::before { 
    content     : "\002B"; 
    margin-right: 10px;
    font-size   : 9px;
}

details[open] > summary::before { 
    content     : "\2212"; 
    margin-right: 10px;
    font-size   : 9px;
}

details.hideMarker > summary::before { 
    content: none; 
}

details.hideMarker[open] > summary::before { 
    content: none
}

button, .fineatyButton, .fineatyButton:visited,
.formImage .fineatyThumbImage{
    font-family     : var(--main-font-family);
    padding         : 15px;
    font-size       : 14px;
    background      : none;
    color           : var(--main-bt-color);
    border          : var(--main-border-width) solid var(--main-bt-color);
    font-weight     : 100;
}

.formImage .formFieldFileUploadInfos,
.formImage .formFieldFileUploadFileList{
    display: none;
}

.formLink.fineatyLink{
    font-family     : var(--main-font-family);
    width           : 200px;
    padding         : 12px 20px;
    display         : inline-block;
    color           : var(--main-bt-color);
    margin-top      : 15px;
    overflow        : hidden;
}

.formLink.fineatyLink.fineatyButton{
    border: var(--main-border-width) solid var(--main-bt-color);
}

button:hover, .fineatyButton:hover,
.formImage .fineatyThumbImage:hover{
    cursor      : pointer;
    background  : var(--main-bt-color);
    color       : var(--main-bt-color-hv);
}

.flatButton{
    border          : var(--main-border-width) solid var(--main-bt-color);
    padding         : 3px;
    text-transform  : uppercase;
    font-size       : 9px;
}

.flatButton:hover{
    background-color: var(--main-bt-color);
    color           : #ffffff;
}

/*.iconButton, .iconButton:hover{
    font-size   : 12px;
    padding     : 5px;
}*/

.formFieldCheckboxOption input, .formFieldRadioOption input {
    width: inherit;
}

.miniButton, .miniButton:hover,
.formLink.fineatyLink.miniButton{
    font-size       : 10px;
    padding         : 5px 15px;
    text-transform  : uppercase;
    width           : auto;
}

.microButton{
    font-size       : 8px;
    padding         : 3px;
    text-transform  : uppercase;
    width           : auto;
}

.fineatyAlert{
    border-width: 1px;
    border-style: solid;
}

.filterTitle{
    font-family     : var(--main-font-family);
    text-transform  : uppercase;
    font-size       : 12px;
    font-weight     : 900;
    margin-bottom   : -15px;
    text-align      : center;
    color           : var(--main-bt-color);
    border-bottom   : var(--main-border-width) solid var(--main-bt-color);
}

#siteTitle{
    font-size   : 42px;
    font-weight : 100;
    margin      : 30px 0 0 0;
}

#siteSubtitle{
    font-size   : 14px;
    font-weight : 100;
    margin      :  0;
}

#content{
    background-color: #fff;
    padding-bottom  : 20px;
    margin-bottom   : 10px;
    padding         : 10px;
}

#pageSubtitle{
    margin      : 0px 0px 15px 30px;
    font-size   : 13px;
}

#itemPath{
    margin      : 0px 0px 15px 0px;
    font-size   : 10px;
}

#pageDescription{
    padding         : 10px;
    background-color: #eeeeee;
    margin          : 0px 0px 15px 0px;
}

.collectionItem{
    float       :left;
    text-align  :center;
}

.collectionItemTitle{
    overflow:hidden;
    width   : 120px;
    height  : 50px;
}

th{
    font-size       : 10px;
    text-transform  : uppercase;
    font-weight     : 400;
    padding         : 15px 5px;
    color           : var(--main-th-color);
}

.formTable td{
    border-color: #81969f;
    padding     : 0px;
    text-align  : center;
}

.formTable + .formLinkdiv .formLink{
    width       : auto;
    padding     : 5px 10px;
    border      : none;
    font-size   : 10px;
}

.formTable + .formLinkdiv .formLink.fineatyButton{
    border: var(--main-border-width) solid var(--main-bt-color);
}

.formTable .formLink, .formTable .formLink:hover{
    width           : auto;
    font-size       : 8px;
    padding         : 3px 10px;
    text-transform  : uppercase;
    margin-top      : 0px;
}

.formLinkdiv{
    text-align: center;
}

table.formTable td{
    vertical-align: middle;
}

.hideField{
    display: none;
}

.stateYes{
    color: var(--state-green);
}

.stateNo{
    color: var(--state-red);
}

.stateWait{
    color: var(--state-orange);
}

.divAsLink{
    position: relative;
    cursor  : pointer;
}

.divAsLink a.divLink{
    display: inline;
}

.divAsLink a.divLink span{
    position: absolute;
    top     : 0;
    left    : 0;
    height  : 100%;
    width   : 100%;
}

li > *{
    vertical-align: top;
}

.tableStyle{
    width           : 100%;
    font-size       : 11px;
    border-collapse : collapse;
}

.tableStyle th{
    border-bottom: 1px solid var(--main-tb-bd-color);
}

.tableStyle tbody tr:hover,
.tbodyStyle:hover{
    background-color: var(--main-table-hover);
}

.tbodyStyle:hover tr{
    background-color: transparent;
}

.tableStyle .secondHover:hover{
    background-color: #C8D3DE;
}

.tableStyle .formTable tbody tr:hover{
    background-color: transparent;
}

.tableStyle td{
    padding         : 10px 4px;
    border-bottom   : 1px solid var(--main-tb-bd-color);
}

.tableStyle td.exclusiveIcon{
    padding  : 0px 4px;
    font-size: 20px;
}

.iconCell{
    padding  : 0px;  
    font-size: 16px;
}

.iconCell a{
    margin: 0px 2px;
}

.trOrder:hover{
    cursor  : pointer;
    color   : var(--main-bt-color);
}

/*.tableStyle tr:last-child td {
    border-bottom: 0;
}*/

.progressBar-container{
    width: 100%;
}

.progressBar-empty{
    height          : 5px;
    background-color: #cccccc;
    border-radius   : 0px;
}

.progressBar-progression{
    height          : 100%;
    background-color: var(--state-blue);
    border-radius   : 0px;
    transition      : width 0.5s;
}

.progressBar-progression.complete{
    background-color: var(--state-green);
}



.tableHeaderContainer{
    text-align      : center;
    padding         : 15px 0px;
    background-color: #eeeeee;
    color           : var(--main-th-color);
    font-size       : 12px;
    border-bottom   : var(--main-border-width) solid #cccccc;
}

.tableHeaderContainer{
    font-weight: 700;
}

.tableRowContainer{
    background-color: transparent;
    border-bottom: var(--main-border-width) solid #cccccc;
}

.tableRowContainer:hover{
    background-color: #DCE9F5;
    /*z-index: 1000;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16), -3px -3px 6px rgba(0,0,0,0.16);*/
}

.tableRow{
    text-align  : center;
    padding     : 10px 4px;
}

.accordion,
.accordion-header{
    cursor: pointer;
}

.accordion-content{
    overflow    : hidden;
    min-height  : 0px !important;
    max-height  : 0;
    transition  : max-height 0.2s ease-out;
}

.tableRowAccordion-content{
    margin-top      : 15px;
    padding         : 20px;
    font-weight     : 400;
    background-color: var(--main-table-hover);
    display:block;
}

.tableRowAccordion-content label{
    margin-bottom: 15px;
}

.accordion:after,
.accordion-header:after{
    content    : "\002B";
    float      : right;
    margin-right: 15px;
}

.accordion.active:after,
.accordion-header.active:after{
    content: "\2212";
}

.accordion.clearAfter:after,
.accordion.clearAfter.active:after,
.accordion-header.clearAfter:after,
.accordion-header.clearAfter.active:after{
    content    : "";
    float      : none;
    margin-right: 0px;
}

.JobIntegrationPlanCard summary{
    font-size       : 8px;
    text-transform  : uppercase;
    margin          : 10px 0px 0px;
    padding         : 5px 15px;
    background-color: var(--main-bg-color);
}

.JobIntegrationPlanCard details > div{
    border-left     : 1px solid var(--main-bg-color);
    border-right    : 1px solid var(--main-bg-color);
    border-bottom   : 1px solid var(--main-bg-color);
}

.marginBottom15{
    margin-bottom: 15px;
}

.marginBottom20{
    margin-bottom: 20px;
}

.marginBottom30{
    margin-bottom: 30px;
}

.marginTop15{
    margin-top: 15px;
}

.marginTop20{
    margin-top: 20px;
}

.marginTop30{
    margin-top: 30px;
}




.filters{
    text-align: center;
    padding: 15px 0px;
    margin-bottom: 10px;
}

.filters button{
    margin: 5px 5px;
}

.filters .mixitup-control-active{
    color: var(--main-bt-color);
}

.filters .borderButton.mixitup-control-active{
    border: 1px solid var(--main-bt-color);
}

.buttonContainer{
    margin-bottom: 30px;
}

.buttonContainer > *{
    margin-right: 10px;
    margin-bottom: 10px;
}

.form-container{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-auto-rows          : min-content;
    grid-row-gap            : 15px;
    padding                 : 15px 30px;
    border                  : 1px solid var(--main-bt-color);
    border-radius           : 12px;
}

.formImage{
    position    : relative;
    text-align  : center;
    margin      : 3px 0px;
}

.formImage .fineatyThumbImage{
    margin-bottom: 20px;
}

.formImage:hover .fineatyThumbImage{
    opacity: 0.6;
}

.formImage input[type="file"]:hover{
    cursor: pointer;
}

.formImage input[type="file"]{
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    margin  : 0px;
    opacity : 0;
}

.formImage label{
    margin: 5px 0px;
}

.formProfile .fineatyThumbImage{
    padding             : 0px;
    border-radius       : 75px;
    background-size     : cover !important;
    background-repeat   : no-repeat;
}

.cardContainer-profileForm{
    background-color: #eee;
    padding         : 15px;
    border-radius   : 12px;
    box-shadow      : inset 3px 3px 6px rgba(0,0,0,0.16);
    margin-bottom   : 15px;
}

.formFieldFileProgress{
    width : 100%;
    height: 5px;
    margin: 0px;
}

.formFieldFileProgressBar{
    background-color: var(--main-info);
}

.fineatyAlert{
    overflow: hidden;
}

.module-container{
    padding: 25px;
}

.grid-solo{
    display                 : grid;
    grid-template-columns   : 1fr;
    row-gap                 : var(--main-row-gap);
}

.grid-twoFold{
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-threeFold{
    display                 : grid;
    grid-template-columns   : repeat(3, 1fr);
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-fourFold{
    display                 : grid;
    grid-template-columns   : repeat(4, 1fr);
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-fiveFold{
    display                 : grid;
    grid-template-columns   : repeat(5, 1fr);
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-300px-1fr{
    display                 : grid;
    grid-template-columns   : 300px 1fr;
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-1fr-2fr{
    display                 : grid;
    grid-template-columns   : 1fr 2fr;
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.grid-2fr-1fr{
    display                 : grid;
    grid-template-columns   : 2fr 1fr;
    column-gap              : var(--main-column-gap);
    row-gap                 : var(--main-row-gap);
}

.tabs{
    margin-right: -0.5px;
}

.tabs button.tabSection{
    text-transform: uppercase;
}

.tabs .tabSection .formFieldRadioOption,
.tabs .tabSectionContainer{
    margin-bottom   : 0px;
    margin-left     : -0.5px;
}

.tabs .tabSection .formFieldRadioOption input{
    display: none;
}

.tabs .tabSection .formFieldRadioOption label,
.tabs button.tabSection{
    border      : var(--main-border-width) solid var(--main-border-color);
    font-size   : 10px;
    padding     : 10px;
    text-align  : center;
    width       : 100%;
    margin-top  : 20px;
    font-family : var(--main-title-font);
    font-weight : 300;
    color       : var(--main-font-color);
}

.tabs .tabSection .formFieldRadioOption label:hover,
.tabs button.tabSection:hover{
    background-color: transparent;
    color           : var(--main-bt-color);
    margin-top      : 15px;
    padding-bottom  : 15px;
}

.tabs .tabSection .formFieldRadioOption input:checked ~ label,
.tabs button.tabSection.active{
    color           : var(--main-bt-color);
    border-top      : var(--main-border-width) solid var(--main-border-color);
    border-bottom   : none;
    box-shadow      : none;
    margin-top      : 0px;
    padding-bottom  : 30px;
}

.AcademicianSpace .tabs button.tabSection{
    border-color: var(--main-bt-color);
}

details.filters > summary::before{
    content: none;
}

.filters,
.formFieldMultiCheckbox .buttonCheckbox{
    text-align: left;
}

.formFieldMultiCheckbox .buttonCheckbox .formFieldCheckboxOption label{
    padding: 0px;
}

.card-container .tabs{
    margin      : 0px -20px;
    margin-right: -20.5px;
}

.tabs.pageMainTabs{
    margin      : 0px -50px;
    margin-right: -50.5px;
}

.tabs.tabsPopup{
    margin      : 0px -10px;
    margin-right: -10.5px;
}

.AcademicianSpace .tabs.pageMainTabs{
    margin      : 0px -20px;
    margin-right: -20.5px;
}

.card-container .tabs .tabSection .formFieldRadioOption label{
    background-color: var(--secondary-bg-color);
}

.card-container .tabs .tabSection .formFieldRadioOption input:checked ~ label{
}

.sectionInfo{
    text-align      : left;
    padding         : 15px;
    background-color: var(--main-bg-color);
}

.sectionInfo-title{
    margin-bottom   : 5px;
    border-bottom   : 1px solid var(--main-th-color);
    font-size       : 8px;
}



.tooltip-container {
    position: relative;
}
  
.tooltip-container .tooltip-content {
    display: none;
    position: absolute;
    margin-top: 10px;
    left: calc(50% - 150px);
    width: 300px;
    padding: 10px;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.16);
    font-size: 10px;
    font-family: var(--main-font-family);
    text-transform: none;
    font-weight: 300;
    z-index: 1000;
}

.tooltip-container .tooltip-content:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #FFFFFF transparent;
    top: -20px;
    left: calc(50% - 10px);
}

.tooltip-container:hover .tooltip-content {
    display: block;
}

.tooltip-title{
    border-bottom: 1px solid var(--main-th-color);
    padding-bottom: 5px;
    margin-bottom: 10px;
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){
    
    .grid-fourFold,
    .grid-fiveFold{
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-threeFold{
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-threeFold.integrationPlanManager{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    
    .grid-threeFold,
    .grid-fourFold,
    .grid-fiveFold{
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-300px-1fr,
    .grid-1fr-2fr,
    .grid-2fr-1fr{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    
    .module-container{
        padding: 0px;
    }
    
    .grid-twoFold,
    .grid-threeFold,
    .grid-fourFold,
    .grid-fiveFold,
    .grid-300px-1fr,
    .grid-1fr-2fr,
    .grid-2fr-1fr{
        grid-template-columns: 1fr;
    }
}



/*.card-container .formTable{
    background-color: #eee;
    padding         : 15px;
    border-radius   : 12px;
    box-shadow      : inset 3px 3px 6px rgba(0,0,0,0.16);
}*/











/* ICONS */

.icons{
    font-family : 'icofont', serif;
    font-style  : normal;
    font-weight : normal !important;
}

.icon-float{
    float: left;
}

.icon-addDate::before{
    content: "";
}

.icon-archeryTarget::before{
    content: "";
}

.icon-archive::before{
    content: "";
}

.icon-at::before{
    content: "";
}

.icon-atom::before{
    content: "";
}

.icon-auctionHammer::before{
    content: "";
}

.icon-award::before{
    content: "";
}

.icon-balance::before{
    content: "";
}

.icon-balanceMan::before{
    content: "";
}

.icon-barChartCorner::before{
    content: "";
}

.icon-barChartCurve::before{
    content: "";
}

.icon-bathrobe::before{
    content: "";
}

.icon-bed::before{
    content: "";
}

.icon-bell::before{
    content: "";
}

.icon-bookmark::before{
    content: "";
}

.icon-bookTurnPages::before{
    content: "";
}

.icon-buffer::before{
    content: "";
}

.icon-buildings::before{
    content: "";
}

.icon-calculBoard::before{
    content: "";
}

.icon-calendar::before{
    content: "";
}

.icon-camera::before{
    content: "";
}

.icon-cantSee::before{
    content: "";
}

.icon-cart::before{
    content: "";
}

.icon-certificate::before{
    content: "";
}

.icon-check::before{
    content: "";
}

.icon-checkLight::before{
    content: "";
}

.icon-checkListNotepad::before{
    content:"";
}

.icon-chefHat::before{
    content: "";
}

.icon-cinemaCamera::before{
    content: "";
}

.icon-computerOperator::before{
    content: "";
}

.icon-crop::before{
    content: "";
}

.icon-diary::before{
    content: "";
}

.icon-document::before{
    content: "";
}

.icon-dollarBag::before{
    content: "";
}

.icon-dollarCurrency::before{
    content: "";
}

.icon-done::before{
    content: "";
}

.icon-download:before{
    content: "";
}

.icon-ducplicate::before{
    content: "";
}

.icon-error::before{
    content: "";
}

.icon-errorLight::before{
    content: "";
}

.icon-edit::before{
    content: "";
}

.icon-emergencyLogo::before{
    content: "";
}

.icon-euroCurrency::before{
    content: "";
}

.icon-excel::before{
    content: "";
}

.icon-exchange::before{
    content: "";
}

.icon-fillingStar::before{
    content: "";
}

.icon-filter::before{
    content: "";
}

.icon-flag::before{
    content: "";
}

.icon-flowchart::before{
    content: "";
}

.icon-flowchartProfile::before{
    content: "";
}

.icon-folder::before{
    content: "";
}

.icon-forbidden::before{
    content: "";
}

.icon-forkKnife::before{
    content: "";
}

.icon-glassCocktail::before{
    content: "";
}

.icon-hammer::before{
    content: "";
}

.icon-hammer2::before{
    content: "";
}

.icon-happy::before{
    content: "";
}

.icon-history::before{
    content: "";
}

.icon-home::before{
    content: "";
}

.icon-idCard::before{
    content: "";
}

.icon-indianLine::before{
    content: "";
}

.icon-info::before{
    content: "";
}

.icon-inProgress::before{
    content: "";
}

.icon-internetClic::before{
    content: "";
}

.icon-invisible::before{
    content: "";
}

.icon-itinerary::before{
    content: "";
}

.icon-light::before{
    content: "";
}

.icon-link:before{
    content: "";
}

.icon-linkedDocument::before{
    content: "";
}

.icon-lock::before{
    content: "";
}

.icon-locked::before{
    content: "";
}

.icon-logout::before{
    content: "";
}

.icon-mail::before{
    content: "";
}

.icon-mailSended::before{
    content: "";
}

.icon-manifyingProfile::before{
    content: "";
}

.icon-map::before{
    content: "";
}

.icon-menu::before{
    content: "";
}

.icon-message::before{
    content: "";
}

.icon-minus::before{
    content: "";
}

.icon-money::before{
    content: "";
}

.icon-moneyBag::before{
    content: "";
}

.icon-newspaper:before{
    content: "";
}

.icon-night::before{
    content: "";
}

.icon-oldPhone::before{
    content: "";
}

.icon-oldPhone2::before{
    content: "";
}

.icon-oneWayStreet::before{
    content: "";
}

.icon-orderAsc::before{
    content: "";
}

.icon-orderDesc::before{
    content: "";
}

.icon-pause::before{
    content: "";
}

.icon-pen::before{
    content: "";
}

.icon-phone::before{
    content: "";
}

.icon-picture:before{
    content: "";
}

.icon-pieChart::before{
    content: "";
}

.icon-piece::before{
    content: "";
}

.icon-pin::before{
    content: "";
}

.icon-play::before{
    content: "";
}

.icon-playCircle::before{
    content: "";
}

.icon-plus::before{
    content: "";
}

.icon-present::before{
    content: "";
}

.icon-print::before{
    content: "";
}

.icon-priority::before{
    content: "";
}

.icon-profile::before{
    content: "";
}

.icon-profileThumb::before{
    content: "";
}

.icon-qrCode::before{
    content: "";
}

.icon-refresh::before{
    content: "";
}

.icon-resize::before{
    content: "";
}

.icon-restaurantTable::before{
    content: "";
}

.icon-return::before{
    content: "";
}

.icon-sailingBoat::before{
    content: "";
}

.icon-save::before{
    content: "";
}

.icon-screw::before{
    content: "";
}

.icon-sealedLips::before{
    content: "";
}

.icon-search::before{
    content: "";
}

.icon-select::before{
    content: "";
}

.icon-send::before{
    content: "";
}

.icon-signed::before{
    content: "";
}

.icon-square::before{
    content: "";
}

.icon-star::before{
    content: "";
}

.icon-start::before{
    content: "";
}

.icon-stop::before{
    content: "";
}

.icon-stopCircle::before{
    content: "";
}

.icon-stopHand::before{
    content: "";
}

.icon-substitute::before{
    content: "";
}

.icon-support:before{
    content: "";
}

.icon-swap::before{
    content: "";
}

.icon-swimmer::before{
    content: "";
}

.icon-tag::before{
    content: "";
}

.icon-tagText::before{
    content: "";
}

.icon-thumbDown::before{
    content: "";
}

.icon-thumbUp::before{
    content: "";
}

.icon-ticket::before{
    content: "";
}

.icon-timer::before{
    content: "";
}

.icon-transparent::before{
    content: "";
}

.icon-trash::before{
    content: "";
}

.icon-traveler::before{
    content: "";
}

.icon-unhappy::before{
    content: "";
}

.icon-unlocked::before{
    content: "";
}

.icon-updateDocument::before{
    content: "";
}

.icon-visible::before{
    content: "";
}

.icon-warning::before{
    content: "";
}

.icon-wrenchSrewdriver::before{
    content: "";
}

.icon-writtenMessage::before{
    content: "";
}

.icon-writingMessage::before{
    content: "";
}




.icon-groom::before{
    content: "";
}
.icon-trioShapeFullBody::before{
    content: "";
}
.icon-suitShape::before{
    content: "";
}
.icon-trioShapeFullBodyPerspective::before{
    content: "";
}
.icon-butler::before{
    content: "";
}
.icon-searchFile::before{
    content: "";
}
.icon-searchFolder::before{
    content: "";
}
.icon-instagram::before{
    content: "";
}
.icon-borderLessSmiley::before{
    content: "";
}
.icon-bigAttachedCase::before{
    content: "";
}
.icon-attachedCase::before{
    content: "";
}
.icon-photoCameraCorner::before{
    content: "";
}
.icon-wineGlass::before{
    content: "";
}
.icon-openMail::before{
    content: "";
}
.icon-callOperator::before{
    content: "";
}
.icon-suitcase::before{
    content: "";
}
.icon-plateCutlery::before{
    content: "";
}
.icon-magicWand::before{
    content: "";
}
.icon-megaphone::before{
    content: "";
}
.icon-beardBrush::before{
    content: "";
}
.icon-painterPalette::before{
    content: "";
}
.icon-pestle::before{
    content: "";
}
.icon-recycle::before{
    content: "";
}
.icon-tools::before{
    content: "";
}
.icon-refreshVertical::before{
    content: "";
}
.icon-listQuestionMessage::before{
    content: "";
}














/* PAGE FRAME */

#structure-frame{
    display                 : grid;
    grid-template-columns   : 200px 1fr;
    grid-template-rows      : 100px calc(100vh - 100px);
    grid-template-areas     : 
      'header header'
      'menu container';
    min-height: 100%;
}

#structureFrame-header{
    grid-area   : header;
    position    : static;
    top         : 0;
    z-index     : 1000;
}

#structureFrame-menu{
    grid-area: menu;
}

#structureFrame-container{
    grid-area: container;
    overflow: auto;
    /*background-image: url("../images/back4.jpg");
    background-repeat: no-repeat;
    background-size: cover;*/
}
    
#pageContent{
    padding-left    : 50px;
    padding-right   : 50px;
    padding-bottom  : 50px;
    min-height      : 100%;    
}

.pageTitleLess{
    padding-top: 50px;
}

/*.MyIntegration #structure-frame{
    grid-template-columns   : 70px 1fr;
    grid-template-rows      : 100px auto;
}*/

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){}

@media (min-width: 768px) and (max-width: 1023px) {
    
    #pageContent{
        padding-left    : 10px;
        padding-right   : 10px;
        padding-bottom  : 30px;
    }

    .pageTitleLess{
        padding-top: 30px;
    }

    #structure-frame{
        grid-template-columns   : 70px 1fr;
        grid-template-rows      : 100px auto;
    }
    
    #structureFrame-header{
      position: sticky;
    }
}

@media (max-width: 767px) {
    
    #pageContent{
        padding-left    : 10px;
        padding-right   : 10px;
        padding-bottom  : 30px;
    }

    .pageTitleLess{
        padding-top: 30px;
    }

    #structure-frame{
        grid-template-columns   : 70px 1fr;
        grid-template-rows      : 100px auto;
    }
    
    #structureFrame-header{
      position: sticky;
    }
    
}










/* HEADER */

#header{
    background-color        : var(--main-bg-color);
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    height                  : 100px;
    border-bottom           : var(--main-border-width) solid var(--main-border-color);
}

#header a:not(.colorLink){
    color: var(--main-font-color);
}

#logo{
    align-self  : center;
    margin-left : 50px;
}

.site-title{
    font-family : var(--main-font-family);
    font-weight : 900;
    font-size   : 35px;
}

.site-subtitle{
    font-weight: 100;
}

.logoMargin{
    padding-top: 12px;
}

#userSession{
    align-self              : center;
    justify-self            : end;
    padding-left            : 50px;
    padding-right           : 50px;
    display                 : grid;
    grid-template-columns   : 1fr auto;
    align-items             : center;
    column-gap              : 20px;
}

#userNotifications{
    font-size   : 25px;
    color       : var(--elegancia-skin);
}

.MyNotificationsModulePopUp.fineatyPopUp{
    margin-top: 100px;
    /*background-color: var(--secondary-bg-color);*/
}

.MyNotificationsModulePopUp .fineatyPopUpHeader{
    background-color: var(--elegancia-skin);
    color: var(--main-font-color);
    display: none;
}

.MyNotificationsModulePopUp .fineatyPopUpTitle{
    text-transform: uppercase;
}

.login-profile{
    display                 : grid;
    grid-template-columns   : 1fr auto;
    grid-template-rows      : 1fr 1fr;
    grid-template-areas     : 
      'profileThumb profileName'
      'profileThumb profileRole';
    
    column-gap  : 20px;
    height      : 100%;
    
}

.loginProfile-thumb{
    grid-area   : profileThumb;
    text-align  : right;
}

.loginProfile-name{
    grid-area   : profileName;
    align-self  : end;
    font-family : var(--main-font-family);
    font-weight : 300;
    font-size   : 20px;
}

.loginProfile-role{
    grid-area   : profileRole;
    font-family : var(--main-font-family);
    font-weight : 900;
    font-size   : 14px;
    margin-top  : 2px;
}

.loginProfileThumb-tag{
    border-radius   : 28px;
    overflow        : hidden;
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){}

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

@media (max-width: 767px) {
    
    #header{
        grid-template-columns: auto 120px;
    }

    #userSession{
        padding-left    : 10px;
        padding-right   : 10px;
        padding-top     : 22px;
    }
    
    #logo{
        margin-left: 10px;
    }

    .loginProfile-name{
        display: none;
    }

    .loginProfile-role{
        display: none;
    }
}










/* MENU */

#menu{
    background-color: var(--main-bg-color);
    height          : 100%;
    padding-top     : 20px;
    padding-right   : 10px;
    font-size       : 10px;
    font-weight     : 100;
    border-right    : var(--main-border-width) solid var(--main-border-color);
}

.menu{
    display                 : grid;
    grid-template-columns   : 5px 50px auto;
    height                  : 50px;
    color                   : var(--main-font-color);
    font-weight             : 100;
}

.menu-borderLeft{
    background-color: transparent;
}

.menu-picto{
    font-size   : 18px;
    height      : 50px;
    padding     : 14px 0px 10px 15px;
}

.menu-title{
    align-self  : center;
    font-family : var(--main-title-font);
}

.menu.active,
.menu:hover{
    box-shadow: 0px 0px 0px 1px var(--main-bt-color);
}

.menu.active .menu-borderLeft{
    background-color: var(--main-bt-color);
}

.menu.active{
    align-self  : center;
    font-weight : 300;
    color       : var(--main-bt-color);
}

.supportButton{
    text-align      : center;
    width           : 30px;
    height          : 30px;
    position        :fixed;
    bottom          :15px;
    right           :10px;
    z-index         :10000;
    padding         :5px;
    border-radius   :20px;
    background-color:rgba(255,255,255,0.9);
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    font-size       : 16px;
}

/*.MyIntegration .menu-title{
    display: none;
}*/

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){}

@media (max-width: 1023px) {

    .menu-title{
        display: none;
    }
}

@media (max-width: 767px) {

    .menu-title{
        display: none;
    }
}










/* CARDS */

.hoverLine:hover{
    background-color: var(--main-table-hover);
}










/* CARDS */

.card-container{
    padding         : 15px 20px 20px;
    overflow        : hidden;
    font-size       : 12px;
    background-color: var(--secondary-bg-color);
}

.cardContainer-titleBanner{
    font-size       : 10px;
    text-transform  : uppercase;
    font-weight     : 300;
    margin          : -15px 0px 20px;
    padding         : 15px 0px 10px;
    font-family     : var(--main-title-font);
    position        : relative;
    color           : var(--main-font-color);
    border-bottom   : var(--main-border-width) solid var(--main-border-color);
}

.cardContainer-thumbBanner{
    margin                  : -15px -20px 20px;
    height                  : 160px;
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-template-rows      : 1fr;
    align-items             : end;
    justify-items           : right;
    padding-right           : 15px;
    padding-bottom          : 15px;
    box-shadow              : 0px 3px 6px rgba(0,0,0,0.16);
    background-repeat       : no-repeat;
    /*background-size         : contain;*/
    background-size         : cover;
    background-position     : center;
}

.cardContainerThumbBanner-title{
    font-family     : var(--main-font-family);
    font-weight     : 700;
    font-size       : 14px;
    text-transform  : uppercase;
    color           : #ffffff;
    text-shadow     : 1px 1px 1px rgba(0,0,0,0.32);
}

.cardContainerTitleBanner-gridAction{
    display                 : grid;
    grid-template-columns   : 1fr auto;
    column-gap              : 15px;
}

.cardContainerTitleBannerGridAction-action{
    text-align: right;
    align-self: center;
}

.cardContainerTitleBannerGridAction-tools{
    display                 : grid;
    grid-template-columns   : repeat(4,1fr);
    column-gap              : 10px;
}

.cardContainer-subtitleBanner{
    font-size       : 9px;
    font-weight     : 800;
    color           : var(--main-info);
}

.cardContainer-subtitleBanner.subtitleGrid{
    display                 : grid;
    grid-template-columns   : auto 1fr;
    column-gap              : 10px;
    row-gap                 : 10px;
}

.cardContainerSubtitleBanner-label{
    text-transform: uppercase;
    font-weight: 500;
}

.cardContainerSubtitleBanner-value{
    color: #aaaaaa;
}

.cardContainer-section{
    margin: 15px 0px 30px;
}

.cardContainerSection-title{
    text-transform  : uppercase;
    font-size       : 10px;
    margin          : 10px 0px 10px;
    padding         : 10px 0px;
    border-bottom   : var(--main-border-width) solid var(--main-border-color);
    color           : var(--main-font-color);
    font-weight     : 500;
    font-family     : var(--main-title-font);
}

.cardContainerDetailSection-title{
    text-transform  : uppercase;
    font-size       : 12px;
    margin          : 10px 0px 10px;
    padding         : 10px 10px;
    color           : var(--main-info);
    font-weight     : 900;
    font-family     : var(--main-font-family);
    border-bottom   : 2px solid var(--main-info);
}

/*.cardContainerSection-title .cardContainerTitleBannerGridAction-action{
    padding-right: 10px;
}*/

.cardContainer-deleteTicket{
    position    : absolute;
    font-size   : 12px;
    top         : 17px;
    right       : 10px;
}

.tableCard{
    margin-bottom   : 30px;
    overflow-x      : auto;
    background-color: var(--secondary-bg-color);
}

.tableCard-extented{
}

.tableCard .tableStyle,
.tableBorderLess{
    border          : none;
    border-bottom   : var(--main-border-width) solid #eeeeee;
    /*box-shadow: 0px -3px 0px #81969f;*/
}

.cardLine-gridAction{
    display                 : grid;
    grid-template-columns   : 1fr 50px;
    column-gap              : 15px;
    padding                 : 10px 10px;
    align-items             : center;
    border-bottom: 1px solid var(--main-bg-color);
}

.cardLineGridAction-action{
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    column-gap              : 5px;
    padding-right           : 5px;
    text-align              : right;
    font-size: 10px;
}

.cardLine-gridAction .cardContainer-subtitleBanner{
    font-size   : 8px;
    font-weight : 300;
    color       : var(--main-th-color);
    font-family : var(--main-title-font);
    margin-top  : 5px;
}

.profileCardMyInfos-container{
    display                 : grid;
    grid-template-columns   : auto 1fr;
    column-gap              : 20px;
}

.profileCardMyInfosContainer-thumb .fineatyThumbImage{
    border-radius   : 28px;
    overflow        : hidden;
}

.profileCardMyInfosContainerInfos-name{
    font-weight     : 500;
    font-size       : 18px;
    text-transform  : uppercase;
    margin-bottom   : 15px;
    font-family     : var(--main-title-font);
}

.profileCardMyInfosContainerInfos-job{
    font-weight     : 300;
    font-size       : 9px;
    margin-bottom   : 10px;
}

.profileCardMyInfosContainerInfos{
    display                 : grid;
    grid-template-columns   : auto 1fr;
    column-gap              : 10px;
    font-size               : 11px;
    margin-bottom           : 5px;
    align-items             : center;
}

.profileCardMyInfosEmergencyContainerContactsInfos{
    display                 : grid;
    grid-template-columns   : auto 1fr;
    column-gap              : 10px;
    font-size               : 11px;
    align-items             : center;
}

.profileCardMyInfosEmergencyContainerContacts-infos{
    padding         : 20px;
    background-color: var(--main-bg-color);
}

.profileCardMyInfosContainer-infos .icons,
.profileCardMyInfosEmergencyContainerContacts-infos .icons{
    font-size: 14px;
}

.showCareerButton,
.showCareerButton > span{
    width: 100%;
    color: var(--main-font-color);
}

.showCareerButton:not(.organizationStaff-container .showCareerButton, .LibraryCollaborators .showCareerButton){
    background-color: var(--main-bg-color);
}

.showCareerButton:hover{
    background-color: var(--main-table-hover);
}

.showCareerButton .profileCard-container:hover{
    background-color: var(--main-table-hover);
}

.profileCard-container{
    display                 : grid;
    grid-template-columns   : auto 1fr;
    grid-row                : 1;
    column-gap              : 15px;
    padding                 : 15px;
    background-color        : var(--main-bg-color);
    /*align-items             : center;*/
    position                : relative;
}

.profileCard-container .referentFlag{
    position    : absolute;
    top         : -3px;
    right       : 10px;
    color       : var(--main-bt-color);
    font-size   : 18px;
}

.profileCardContainer-thumb .fineatyThumbImage{
    border-radius   : 28px;
    overflow        : hidden;
}

.profileCarrerContainer-thumb .fineatyThumbImage{
    border-radius   : 60px;
    overflow        : hidden;
}

.profileCardContainerInfos-name{
    font-weight : 300;
    font-size   : 16px;
    font-family : var(--main-title-font);
}

.profileCardContainerInfos-jobType{
    font-size       : 6px;
    text-transform  : uppercase;
    color           : var(--main-info);
    font-family     : var(--main-title-font);
    font-weight     : 300;
    margin-top      : 3px;
    margin-bottom   : 3px;
}

.profileCardContainerInfos-job{
    font-size       : 8px;
    text-transform  : uppercase;
    color           : var(--main-th-color);
    font-weight     : bolder;
    margin-top      : 3px;
    margin-bottom   : 10px;
}

.profileCardContainer-infos{
    overflow: hidden;
}

.profileCardContainerInfos{
    display                 : grid;
    grid-template-columns   : auto 1fr;
    column-gap              : 5px;
    font-size               : 11px;
    margin-bottom           : 5px;
    /*align-items             : center;*/
}

.profileCardContainerInfos .icons{
    font-size: 13px;
}







.organizationCardContainer{
    display                 : grid;
    grid-template-columns   : 1fr 200px;
    grid-gap                : 20px;
    transition              : all 0.5s;
    position                : relative;
    padding-top             : 15px;
    height                  : 100%;
    max-height              : 100%;
}

.organizationStaff-container{
    display                 : grid;
    grid-template-columns   : repeat(4, 1fr);
}

.organizationCard-container, 
.collaboratorCard-container{
    display                 : grid;
    grid-template-columns   : 1;
    grid-row                : auto 1fr;
    row-gap                 : 15px;
    padding                 : 15px;
    position                : relative;
    text-align              : center;
}

.organizationCardContainer-thumb .fineatyThumbImage,
.collaboratorCardContainer-thumb .fineatyThumbImage{
    border-radius   : 60px;
    overflow        : hidden;
}

.organizationCardContainerInfos-name,
.collaboratorCardContainerInfos-name{
    font-weight : 300;
    font-size   : 14px;
    font-family : var(--main-title-font);
}

.collaboratorCardContainerInfos-name{
    font-size: 14px;
}

.organizationCardContainerInfos-jobType,
.collaboratorCardContainerInfos-jobType{
    font-size       : 6px;
    text-transform  : uppercase;
    color           : var(--main-info);
    font-family     : var(--main-title-font);
    font-weight     : 300;
    margin-top      : 3px;
    margin-bottom   : 3px;
}

.organizationCardContainerInfos-mail,
.collaboratorCardContainerInfos-mail{
    font-size: 8px;
}

.collaboratorCardContainerInfos-mail{
    margin-bottom: 10px;
}

.showCareerButton:hover .organizationCardContainerInfos-name,
.showCareerButton:hover .collaboratorCardContainerInfos-name{
    color: var(--main-bt-color);
}

.organizationCardContainerInfos-job{
    font-size       : 8px;
    text-transform  : uppercase;
    color           : var(--main-th-color);
    font-weight     : bolder;
    margin-top      : 3px;
    margin-bottom   : 5px;
}

.collaboratorCardContainerInfos-job{
    font-size       : 8px;
    text-transform  : uppercase;
    color           : #777777;
    font-weight     : bolder;
    margin-top      : 3px;
    margin-bottom   : 3px;
}

.organizationCardContainer-infos,
.collaboratorCardContainer-infos{
    overflow: hidden;
}

.organizationCardContainerInfos,
.collaboratorCardContainerInfos{
    font-size: 11px;
}

.organizationCardContainerInfos .icons{
    font-size: 13px;
}

.collaborator-card .showCareerButton,
.organization-card .showCareerButton{
    height: 100%;
}

.myJob-container{
    display                 : grid;
    grid-template-columns   : 1fr auto;
    column-gap              : 20px;
}

.myJobContainerInfos-title{
    font-family     : var(--main-title-font);
    font-size       : 14px;
    text-transform  : uppercase;
    font-weight     : 300;
}

.myJobContainerInfos-organization{
    font-size       : 8px;
    text-transform  : uppercase;
    color           : var(--main-th-color);
    font-weight     : bolder;
}

.iconButton{
    display                 : grid;
    grid-template-columns   : 1fr;
    align-items             : center;
    text-align              : center;
    height                  : 50px;
    width                   : 50px;
    border-radius           : 25px;
    font-size               : 20px;
    box-shadow              : inset 0px 0px 0px 1px var(--main-bt-color);
    color                   : var(--main-bt-color);
}

.iconButton:hover:not(.emptyDoc){
    cursor: pointer;
}

.emptyDoc{
    color: var(--main-font-color);
    box-shadow: none;
}

.popInfo{
    font-style: italic;
}

.career{
    padding-top: 30px;
}

.career-container{
    background-color: var(--main-bg-color);
    padding         : 20px;
}

.career-container .cardContainerSection-title{
    background-color: var(--main-bg-color);
    padding-top     : 0px;
    margin-top      : 0px;
}

.careerContainer-period{
    text-transform  : uppercase;
    font-size       : 8px;
    color           : var(--main-th-color);
    margin-top      : -8px;
    margin-bottom   : 10px;
    font-weight     : 500;
}

.careerContainerPeriod-content{
    position: relative;
}

.careerContainerPeriodContent-dot{
    height          : 8px;
    width           : 8px;
    border-radius   : 4px;
    border          : 1px solid var(--main-font-color);
    background-color: #ffffff;
    position        : absolute;
    top             : calc(50% - 4px);;
    right           : -15px;
}

.careerContainer-jobCard{
    background-color: #ffffff;
    border-radius   : 12px;
    border          : var(--main-border-width) solid var(--main-font-color);
    overflow        : hidden;
    margin          : 5px;
}

.careerContainerJobCard-title{
    background-color: var(--main-font-color);
    padding         : 10px;
    color           : #ffffff;
    font-family     : var(--main-font-family);
    font-weight     : 700;
    text-transform  : uppercase;
}

.isMain .careerContainerJobCard-title{
    background-color: var(--main-info);
}

.careerContainerJobCard-infos{
    display                 : grid;
    grid-template-columns   : 30px 1fr;
    column-gap              : 5px;
    row-gap                 : 5px;
    align-items             : center;
}

.careerContainerJobCardInfos-icon{
    font-size   : 14px;
    text-align  : center;
    color: var(--main-th-color);
}

.careerContainerJobCardInfos-title{
    font-size: 10px;
}

.organization-documents{
    display                 : grid;
    grid-template-columns   : repeat(3, 1fr);
    text-align              : center;
}

.organizationDocuments-docContainer{
    display                 : grid;
    grid-template-columns   : 1fr;
    align-items             : center;
    text-align              : center;
}

.organizationDocumentsDocContainer-icon{
    margin: auto;
}

.organizationDocumentsDocContainer-title{
    padding         : 10px 5px 0px;
    font-family     : var(--main-font-family);
    font-weight     : 900;
    text-transform  : uppercase;
    font-size       : 10px;
    min-height      : 45px;
}

.ShowOrganizationDocumentModulePopUp,
.ShowSkillDocumentsModulePopUp,
.ShowJobCardModulePopUp,
.ShowBenefitCardModulePopUp,
.AcademicianSkillHistoryModulePopUp,
.AcademicianFormEndReviewModulePopUp,
.ShowIntegrationReportsModulePopUp,
.ShowDomainsProgressionModulePopUp,
.ShowAcademicianCalendarModulePopUp,
.ShowSkillQuizzAverageModulePopUp,
.ShowBenefitUsesModulePopUp,
.ShowQuizzAverageModulePopUp,
.ShowIntegrationPlanQuizzesModulePopUp{
    width   : 80%;
    height  : 80%;
}

.ShowSkillCardModulePopUp{
    width   : 100%;
    height  : 100%;
}

.IntegrationPlanMultiSelectorToolsModulePopUp{
    width   : 60%;
    height  : 80%;
}

.AcademicianFormEndReviewModulePopUp .reviewAssessment-questionContainer,
.AcademicianFormEndReview .reviewAssessment-questionContainer,
.ShowIntegrationReport .reviewAssessment-questionContainer,
.ShowIntegrationPlanQuizzes .reviewAssessment-questionContainer{
    padding: 20px;
    background-color: var(--secondary-bg-color);
}

.integrationReportFrom-container{
    margin: 15px;
    text-align: center;
}

.integrationReportFrom{
    font-family: var(--main-title-font);
    font-weight: 300;
    text-transform: uppercase;
    font-size: 10px;
}

.ShowOrganizationDocument,
.ShowSkillDocuments{
    height: 100%;
}

.showDocPopUp .tableCard{
    margin-bottom: 0px;
}

.profileCardMyInfos-emergencyContainer{
    display                 : grid;
    grid-template-columns   : 56px 1fr;
    column-gap              : 20px;
    padding                 : 15px 0px;
}

.profileCardMyInfosEmergencyContainer-thumb{
    align-self  : center;
    text-align  : center;
    font-size   : 20px;
}

.profileCardMyInfosEmergencyContainerContactsInfos-name{
    font-family     : var(--main-title-font);
    text-transform  : uppercase;
    font-size       : 12px;
    font-weight     : 300;
}

.floatRight{
    float: right;
}

.toolFloatRight{
    float       : right;
    margin-left : 10px;
}

.cardContainerSection-title.error{
    background-color: #f8dada;
}

.tabs .radioTabs{
    display         : grid;
    grid-auto-flow  : column;
}

@media (min-width: 1280px){

    .organizationStaff-container{
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) and (max-width: 1279px){
    
    .organizationStaff-container{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1023px) {
    .showDocPopUp{
        grid-template-columns: 1fr;
    }
    
    .organizationStaff-container{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    .cardContainerSection-title{
        margin: 10px -15px 10px;
    }

    .tableCard-extented{
        margin: 0px -15px;
    }

    .ShowOrganizationDocumentModulePopUp,
    .ShowSkillDocumentsModulePopUp,
    .ShowJobCardModulePopUp,
    .ShowBenefitCardModulePopUp,
    .AcademicianSkillHistoryModulePopUp,
    .AcademicianFormEndReviewModulePopUp,
    .ShowIntegrationReportsModulePopUp,
    .IntegrationPlanMultiSelectorToolsModulePopUp,
    .ShowDomainsProgressionModulePopUp,
    .ShowAcademicianCalendarModulePopUp,
    .ShowSkillQuizzAverageModulePopUp,
    .ShowBenefitUsesModulePopUp,
    .ShowQuizzAverageModulePopUp,
    .ShowIntegrationPlanQuizzesModulePopUp,
    .ShowSkillCardModulePopUp{
        width   : 100%;
        height  : 100%;
    }
    
    .organizationStaff-container{
        grid-template-columns: 1fr;
    }
}










/* MY INFOS */

@media (min-width: 1480px){}

@media (min-width: 1224px) and (max-width: 1479px){
    
    .AcademicianSpace .MyInfos .grid-threeFold{
        grid-template-columns   : repeat(2, 1fr);
    }
}

@media (max-width: 1223px) {
    
    .AcademicianSpace .MyInfos .grid-threeFold{
        grid-template-columns   : 1fr;
    }
}










/* MY ORGANIZATION */

.organization-staff{
    display                 : grid;
    /*grid-template-columns   : repeat(2, 1fr);*/
    grid-template-columns   : 1fr;
    grid-gap                : 20px;
}

.AcademicianSpace .organization-staff{
    grid-template-columns: 1fr;
}

.showHideContainer{
    position: relative;
}

.showHideButton{
    position        : absolute;
    bottom          : -20px;
    right           : 0;
    border          : none;
    background-color: var(--secondary-bg-color);
    width           : 100%;
    opacity         : 0.9;
}

.showHideButton:hover{
    width: 100%;
}

.showHideButton.hideAll{
    display: none;
}

/*@media (min-width: 1600px){

    .organization-staff{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) and (max-width: 1599px){

    .organization-staff{
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    .organization-staff{
        grid-template-columns: 1fr;
    }
}

@media (min-width: 570px) and (max-width: 767px) {

    .organization-staff{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 569px) {

    .organization-staff{
        grid-template-columns: 1fr;
    }
}*/

@media (max-width: 1156px) {

    .AcademicianSpace .MyOrganization .grid-twoFold{
        grid-template-columns: 1fr;
    }
}










/* SHOW QUIZZES */

.quizzFormTabs .tabs{
    margin: 0px -50px;
}

.quizz-container{
    background-color: var(--secondary-bg-color);
    overflow        : hidden;
}

.quizz-container summary{
    padding: 20px;
}

.quizz-container summary:hover{
    color: var(--main-bt-color);
}

.quizzContainerHeaderContainer-title{
    font-family: var(--main-title-font);

}

.quizzContainer-subtitle{
    font-size       : 10px;
    text-transform  : none;
    margin-top      : 5px;
    margin-left     : 21px;
    font-weight     : 300;
}

.quizzContainerHeader-container{
    display                 : grid;
    grid-template-columns   : 1fr auto;
    column-gap              : 5px;
    row-gap                 : 10px;
}

.quizzContainerHeaderContainer-tools{
    display                 : grid;
    grid-template-columns   : repeat(6, 1fr);
    column-gap              : 10px;
    font-size               : 10px;
}

.quizz-content{
    padding: 20px;
}

.quizzDeadLines{
    display                 : grid;
    grid-template-columns   : 1fr;
    grid-gap                : 15px;
}

.quizzDeadLine{
    text-align      : left;
    padding         : 10px;
    background-color: #ffffff;
    border          : var(--main-border-width) solid #cccccc;
}

.quizzQuestion-tools{
    display                 : grid;
    grid-template-columns   : auto 12px 12px 12px;
    column-gap              : 10px;
    font-size               : 10px;
}

.quizzDeadLine-tools{
    display                 : grid;
    grid-template-columns   : auto 12px;
    column-gap              : 10px;
    font-size               : 10px;
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){}

@media (max-width: 1023px) {

    .quizzFormTabs .tabs{
        margin: 0px -10px;
    }

    .quizzContainerHeader-container{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {

    .quizzFormTabs .tabs{
        margin: 0px -10px;
    }

    .quizzContainerHeader-container{
        grid-template-columns: 1fr;
    }
}










/* SUPERVISION BOARD */

.supervisionProfileCardContainer-titleBanner{
    display                 : grid;
    grid-template-columns   : auto 1fr;
    column-gap              : 20px;
    font-size               : 14px;
    text-transform          : uppercase;
    font-weight             : 700;
    margin                  : -15px 0px 1px;
    padding                 : 15px 0px;
    border-bottom           : 1px solid var(--main-border-color);
    font-family             : var(--main-font-family);
}

.supervisionProfileCardContainer-thumb .fineatyThumbImage{
    border-radius   : 28px;
    overflow        : hidden;
    border          : 1px solid var(--main-bt-color);
}

.supervisionProfileCardContainerInfos-job{
    font-size   : 10px;
    font-weight : 300;
    margin-top  : 5px;
}

.supervisionProfileCardContainerInfosJob-job{
    text-transform: none;
}

.supervisionProfileCardContainerInfosJob-hotel{
    color       : var(--main-font-color);
    font-weight : 900;
    margin-top  : 2px;
}

.supervisionProfileCardMyInfos-academicianSpace{
    padding     : 20px 0px;
    text-align  : center;
}

.supervisionProfileCardMyInfos-missions{
    background-color: #eeeeee;
    margin          : 0px -20px -15px -20px;
    padding         : 15px 20px;
}

.activityDateLabel{
    font-size: 7px;
}

.supervisionSkill{
    margin: 10px 0px;
}

.supervisionSkill:hover summary{
    color: var(--main-bt-color);
}

.supervisionSkill-title{
    font-family: var(--main-title-font);
}

details.supervisionBoard-groupList > summary::before { 
    font-size: 14px;
}

details.supervisionBoard-groupList[open] > summary::before { 
    font-size: 14px;
}

.academicianSkills-info{
    padding         : 15px;
    border-bottom   : 1px solid var(--main-bg-color);
}

.supervisionSkill-title.validate .title{
    margin-right: auto;
}

.supervisionSkill-title.validate .detail{
    font-size       : 8px;
    color           : var(--main-info);
    text-transform  : uppercase;
}

.supervisionSkill-title.validate .date{
    width: 50px;
}

.supervisionSkill-title.validate .assessor{
    width: 200px;
}

details[open] .supervisionSkill-title.validate .detail{
    color: var(--main-bt-color);
}

.supervisionBoard-academicianRow .fineatyButton.listButton.supervisionLink{
    padding: 0px;
    border : none;
}

.supervisionBoard-academicianRow{
    display                 : grid;
    grid-template-columns   : auto 230px 1fr 1fr 1fr 60px 60px;
    column-gap              : 5px;
    text-align              : center;
    align-items             : center;
    padding                 : 7px 5px;
    border-bottom           : 1px solid var(--main-tb-bd-color);
}

.supervisionBoard-academicianRow:hover{
    background-color: var(--main-table-hover);
}

.supervisionBoard-toolJobLabel{
    font-weight:300;
    font-size:  8px;
    margin-top: 3px;
    cursor:     pointer;
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){}

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

@media (max-width: 767px) {

}






/* REORDER */

.organizeItems .fineatyForm{
    text-align: center;
}

.organizeItems .formTable.children{
    width : 100%;
    margin: 10px 0px;
}

.organizeItems .ui-sortable-placeholder{
    border: 1px var(--main-bt-color) dashed;
}

.organizeItems .ui-sortable .itemName{
    background-color: var(--secondary-bg-color);
    color           : var(--main-bt-color);
    padding         : 10px;
    font-size       : 14px;
    font-weight     : 300;
    text-align      : center;
    min-width       : 300px;
}

.organizeItems .ui-sortable-helper,
.organizeItems .ui-sortable-helper .itemName{
    background-color: var(--main-bt-color);
    opacity         : 0.7;
    color           : #ffffff;
}

.organizeItems table.formTable .formField{
    height: auto;
}










/* HOMES */

.Home h1{
    display: none;
}

.Home h1.displayHomeTitle{
    display: block;
}

td.interventionMaxWidth{
    max-width: 400px;
}

.homeHotel-title{
    height      : 50px;
    font-family : var(--main-font-family);
    font-weight : 900;
    font-size   : 20px;
    margin-left : 20px;
    padding-left: 20px;
    border-left : 2px solid #787878;
}

.hotelBanner{
    height              : 150px;
    background-repeat   : no-repeat;
    background-size     : 100% auto;
    background-position : center;
    margin-bottom       : 15px;
    position            : relative;
    border-radius       : 12px;
    box-shadow          : 3px 3px 6px rgba(0,0,0,0.16);
}

.hotelBanner-title{
    position        : absolute;
    bottom          : 15px;
    right           : 20px;
    color           : #ffffff;
    font-size       : 16px;
    font-weight     : 900;
    text-transform  : uppercase;
    text-shadow     : 3px 3px 6px rgba(0,0,0,0.16);
}

.alertFlags .icons{
    width           : 21px;
    height          : 21px;
    font-size       : 14px;
    margin          : 0px 2px;
    background-color: #FF0000;
    color           : #ffffff;
    padding         : 2px;
    border-radius   : 11px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
}










/* MASTER ADMIN */

.masterAdmin-buttonContainer{
    position: relative;
}

.masterAdmin-buttonContainer:hover h3{
    color: var(--main-bt-color);
}

.masterAdminButtonContainer-button{
    display                 : grid;
    grid-template-columns   : 1fr;
    align-items             : center;
    text-align              : center;
    background-color        : var(--secondary-bg-color);
    padding                 : 15px 20px 20px;
    overflow                : hidden;
    font-size               : 10px;
    height                  : 100%;
    font-weight             : 100;
    font-family             : var(--main-title-font);
}

.masterAdmin-buttonContainer:hover .masterAdminButtonContainer-button{
    box-shadow: inset 0px 0px 0px 1px var(--main-bt-color);
}

.masterAdminButtonContainer-button h3{
    font-weight : 300;
    font-size   : 10px;
    font-family : var(--main-title-font);
}










/* LIBRARY */

.library-buttonContainer{
    position: relative;
}

.library-buttonContainer:hover h3,
.library-buttonContainer:hover .libraryButtonContainer-icon{
    color: var(--main-bt-color);
}

.libraryButtonContainer-icon{
    text-align  : center;
    font-size   : 30px;
    margin      : 10px 0px;
}

.libraryButtonContainer-button{
    display                 : grid;
    grid-template-columns   : 1fr;
    align-items             : center;
    text-align              : center;
    background-color        : var(--secondary-bg-color);
    padding                 : 15px 20px 20px;
    overflow                : hidden;
    font-size               : 10px;
    height                  : 100%;
    font-weight             : 100;
    font-family             : var(--main-title-font);
}

.library-buttonContainer:hover .libraryButtonContainer-button{
    box-shadow: inset 0px 0px 0px 1px var(--main-bt-color);
}

.libraryButtonContainer-button h3{
    font-weight : 300;
    font-size   : 10px;
    font-family : var(--main-title-font);
}

.skillButton{
    position: relative;
    overflow: visible;
}

.skillButton .acquiredFlag{
    font-size: 18px;
    position : absolute;
    left     : calc(50% - 9px);
    bottom   : 5px;
}

.skillButton .tagIcon{
    background-color: #ffffff;
}

.skillButton .tagIcons{
    position: absolute;
    right   : -15px;
    top     : -15px;
}

.ShowSkillCard .documentsContainer{
    padding: 15px 0px;
}

.asGridButton .library-buttonContainer{
    height: 100%;
}

.ShowSkillCard{
    height: 100%;
}

.ShowSkillCard p{
    font-weight: 500;
}

.skillCardGrid{
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
}













/* MY INTEGRATION */

.integrationPlan-header{
    font-family             : var(--main-title-font);
    display                 : grid;
    grid-template-columns   : 3fr 1fr 1fr 1fr;
    align-items             : center;
    margin-bottom           : 50px;
    padding                 : 20px;
    background-color        : var(--secondary-bg-color);
}

.integrationPlanHeader-title{
    font-family: var(--main-font-family);
}

.integrationPlanHeaderTitle-name{
    font-size       : 8px;
    text-transform  : uppercase;
    color           : var(--main-th-color);
    font-weight: 400;
}

.integrationPlanHeaderTitle-job{
    font-size       : 25px;
    text-transform  : uppercase;
    font-weight     : 700;
}

.integrationPlanHeaderTitle-period{
    font-weight     : 500;
    text-transform  : none;
    font-size       : 12px;
    font-weight     : 100;
}

.integrationPlan-header .donutChart{
    font-size   : 18px;
    font-family : var(--main-title-font);
    font-weight : 500;
    text-align  : center;
}

.integrationPlan-header .donutChart label{
    font-size   : 8px;
    color       : var(--main-th-color);
    font-family : var(--main-title-font);
    font-weight : 100;
    text-align  : center;
    margin-bottom: 5px;
}

.integrationPlan-deadLine{
    margin-bottom: 50px;
}

.integrationPlanDeadLine-header{
    display                 : grid;
    grid-template-columns   : auto 1fr auto;
    grid-template-areas     : 'academicianStat titleDeadLine assessorStat';
    column-gap              : 10px;
    align-items             : center;
    font-family             : var(--main-title-font);
    border-bottom           : var(--main-border-width) solid var(--main-border-color);
    padding                 : 15px 0px;
    margin-bottom           : 20px;
    font-weight             : 500;
    text-transform          : uppercase;
    list-style-type         : none;
}

.integrationPlanDeadLine-header .academicianStat{
    grid-area: academicianStat;
}

.integrationPlanDeadLine-header .titleDeadLine{
    grid-area: titleDeadLine;
}

.integrationPlanDeadLine-header .assessorStat{
    grid-area: assessorStat;
}

.integrationPlanDeadLine-header .donutChart{
    font-size   : 8px;
    color       : var(--main-th-color);
    font-family : var(--main-title-font);
    font-weight : 100;
    text-align  : center;
}

.integrationPlanDeadLineHeader-label{
    font-weight     : 300;
    font-size       : 8px;
    text-transform  : none;
    color           : var(--main-th-color);
    text-transform  : uppercase;
}

.integrationPlanDeadLineHeader-duration{
    font-weight     : 200;
    font-size       : 7px;
    text-transform  : none;
    color           : var(--main-th-color);
    margin-top      : 2px;
}

.integrationPlanDeadLine-header:hover{
    color: var(--main-bt-color);
}

details > .integrationPlanDeadLine-header::before,
details > .integrationPlanDeadLine-header::-webkit-details-marker { 
    content     : none; 
    margin-right: 0px;
}

details[open] > .integrationPlanDeadLine-header::before,
details[open] > .integrationPlanDeadLine-header::-webkit-details-marker { 
    content     : none; 
    margin-right: 0px;
}

details[open] > .integrationPlanDeadLine-header{
    border-bottom: var(--main-border-width) solid var(--main-bt-color);
}

.integrationPlan-domain[open],
.domainProgression[open]{
    border: var(--main-border-width) solid var(--main-bt-color);
}

.integrationPlanDomain-header{
    background-color: var(--secondary-bg-color);
    padding         : 20px;
    font-weight     : 300;
}

.integrationPlanHeader-progression .donutChart{
    color: var(--main-font-color);
}

.domainProgression-header{
    background-color: var(--secondary-bg-color);
    padding         : 10px;
    font-weight     : 700;
    text-transform  : uppercase;
}

.integrationPlanDomain-header:hover,
.domainProgression-header:hover{
    color: var(--main-bt-color);
}

.domainProgression-header .donutChart{  
    font-size   : 8px;
    color       : var(--main-th-color);
    font-family : var(--main-title-font);
    font-weight : 500;
    text-align  : center;
    margin-right: 20px;
}

.integrationPlan-step{
    display                 : grid;
    grid-template-columns   : 40px 1fr 40px;
    align-items             : center;
    column-gap              : 15px;
}

.integrationPlanStep-container{
    display                 : grid;
    grid-template-columns   : auto 1fr auto;
    column-gap              : 20px;
    align-items             : center;
    text-align              : center;
    background-color        : var(--main-bg-color);
    padding                 : 15px;
    border                  : var(--main-border-width) solid var(--secondary-bg-color);
}

.integrationPlanStep-container:hover{
    background-color: var(--main-table-hover);
}

.integrationPlanStep-isDone{
    text-align: center;
}

.integrationPlanStep-isDone a{
    display         : block;
    font-size       : 6px;
    cursor          : pointer;
    margin-top      : 20px;
    text-transform  : uppercase;
}

.integrationPlanStepContainer-note{
    color: var(--main-th-color);
}

.integrationPlanStepContainer-note label{
    font-size       : 8px;
    margin-bottom   : 15px;
}

.integrationPlanStepContainer-note .icons{
    font-size: 20px;
}

.integrationPlanStepContainer-note .icons.tickButton{
    font-size: 10px;
}

.integrationPlanStepContainerNote-question{
    font-weight     : normal;
    font-size       : 9px;
    color           : var(--main-th-color);
    margin-bottom   : 2px;
}

.integrationPlanStepContainerInfos-isDeadLineLocked{
    font-size       : 8px;
    text-transform  : uppercase;
    font-weight     : 100;
    margin-bottom   : 5px;
}

.integrationPlanStepContainerInfos-title{
    font-family     : var(--main-title-font);
    font-size       : 16px;
    text-transform  : uppercase;
    font-weight     : 500;
    margin-bottom   : 5px;
}

.integrationPlanStepContainerInfos-description{
    border-top  : var(--main-border-width) solid var(--main-th-color);
    padding-top : 15px;
    margin-top  : 15px;
    font-size   : 10px;
    font-weight : 300;
    color       : var(--main-th-color);
}

.integrationPlanStepContainerInfos-detailsDescription{
    background-color: #ffffff;
    padding         : 15px;
    margin          : 15px;
    font-size       : 10px;
    font-weight     : 100;
    color           : var(--main-font-color);
    text-transform  : none;
}

.integrationPlanStepContainerInfos-detailsDescription label{
    font-size       : 8px;
    font-weight     : 200;
    padding-bottom  : 5px;
    margin-bottom   : 10px;
    border-bottom   : 1px solid var(--main-th-color);
}

.targetStep:not(.ShowReviewQuizz){
    border: var(--main-border-width) solid var(--main-bt-color);
}

.integrationPlanStepContainerInfos-description label{
    font-size   : 8px;
    font-weight : 200;
}

.integrationPlanStepContainerInfos-details{
    color           : var(--main-th-color);
    font-size       : 8px;
    text-transform  : uppercase;
    font-weight     : 200;
}

.integrationPlanStepContainerInfosDetails-detail{
    margin: 0px 30px;
}

.integrationPlanHeader-progression{
    display                 : grid;
    grid-template-columns   : auto 1fr;
    column-gap              : 10px;
    align-items             : center;
}

.integrationPlanHeaderValues-label{
    display                 : grid;
    grid-template-columns   : 1fr;
    align-items             : center;
    font-size               : 10px;
    text-transform          : uppercase;
    margin-right            : 10px;
    text-align              : right;
}

.integrationPlanHeader-progression .integrationPlanHeaderValues-label{
    height                  : 40px;
    text-align              : left;
}





.integrationPlan{
    display                 : grid;
    grid-template-columns   : 300px 1fr;
    grid-template-rows      : 100px calc(100vh - 200px);
    grid-template-areas     : 
      'ipHeader ipHeader'
      'ipSteps ipContainer';
    height                  : 100%;
    transition              : all 0.5s;
}

.integrationPlanHeaderTitle-hiddenSteps{
    position: absolute;
    bottom  : 0px;
    left    : 15px;
    color   : #aaaaaa;
    cursor  : pointer;
}

.integrationPlanHeader-datas{
    display                 : grid;
    grid-template-columns   : auto 1fr;
}

.integrationPlanHeader-datas .canvas-label{
    display                 : grid;
    grid-template-columns   : 1fr;
    align-items             : center;
    height                  : 40px;
}

.integrationPlanHeader-datas .canvasLabel-title{
    font-size       : 10px;
    text-transform  : uppercase;
    font-family     : Arial, Helvetica, sans-serif;
    padding-top     : 7px;
    margin-left     : 10px;
}

.integrationPlanHeader-values{
    display                 : grid;
    grid-template-columns   : 1fr auto;
}

.integrationPlanHeaderValues-quizzes{
    display                 : grid;
    grid-template-columns   : 1fr;
    align-items             : center;
    height                  : 40px;
    font-size               : 20px;
    font-weight             : 900;
    font-family             : var(--main-font-family);
    color                   : var(--state-green);
}

.integrationPlanHeaderValues-unit{
    font-size               : 10px;
    font-weight             : 900;
    font-family             : var(--main-font-family);
    color                   : var(--main-th-color);
}

.integrationPlan-steps{
    grid-area       : ipSteps;
    height          : 100%;
    overflow-y      : scroll;
    background-color: #ffffff;
    border-right    : 1px solid #cccccc;
}

.integrationPlanSteps-deadLine{
    padding                 : 20px;
    text-transform          : uppercase;
    align-items             : center;
    display                 : grid;
    grid-template-columns   : auto 100px;
    grid-gap                : 15px;
}

.integrationPlanSteps-deadLine.assignation{
    grid-template-columns   : 1fr auto;
}

.integrationPlanStepsDeadLine-title{
    font-size   : 11px;
    font-weight : 900;
}

.integrationPlanSteps-deadLine.accordion::after,
.integrationPlanSteps-deadLine.accordion.active::after,
.integrationPlanSteps-deadLine.accordion-header::after,
.integrationPlanSteps-deadLine.accordion-header.active::after{
    content     : none;
    margin-right: 0px;
    float       : none;
}

.integrationPlanSteps-skills{
    font-family     : var(--main-font-family);
    border-bottom   : 1px solid #cccccc;
    border-top      : 1px solid #cccccc;
}

.integrationPlan-supervision{
    border: 15px solid var(--state-red);
    grid-template-rows      : 100px calc(100vh - 230px);
}

.integrationPlan-academicianSpace{
    border: 1px solid #cccccc;
}

/*.integrationPlanStepsSkills-skill{
    position: relative;
}

.integrationPlanStepsSkills-skill .icons{
    position: absolute;
    top: 9px;
    left: 9px;
}*/

.integrationPlanStepsSkills-quizz{
    align-items     : center;
    border-bottom   : 1px solid #cccccc;
}

li.valid{
    margin-left     : 10px;
    list-style-type : "  ";
}

li.invalid{
    margin-left     : 10px;
    list-style-type : "  ";
}

li.inProgress{
    margin-left     : 10px;
    list-style-type : "  ";
}

li.valid::marker{
    font-family : 'icofont', serif;
    color       : var(--state-green);
}

li.invalid::marker{
    font-family : 'icofont', serif;
    color       : var(--state-red);
}

li.inProgress::marker{
    font-family : 'icofont', serif;
    color       : #f0b323;
}

.integrationPlan-steps .radioButton .formFieldRadioOption label{
    text-align      : left;
    text-transform  : none;
    font-size       : 10px;
    padding         : 10px 10px 10px 20px;
    font-family     : var(--main-font-family);
    font-weight     : 500;
    border          : none;
    background-color: #ffffff;
    color           : var(--main-font-color);
    box-shadow      : none;
    margin          : 0px;
    width           : 100%;
}

.integrationPlan-steps .integrationPlanStepsSkills-quizz.radioButton .formFieldRadioOption label{
    padding         : 10px 20px;
    text-transform  : uppercase;
    font-weight     : 900;
    font-family     : arial, sans-serif;
    font-size       : 8px;
    text-align      : center;
}

.integrationPlan-steps .radioButton .formFieldRadioOption{
  margin-bottom: 0px;
}

.integrationPlan-steps .radioButton .formFieldRadioOption input{
    display: none;
}

.integrationPlan-steps .radioButton .formFieldRadioOption input:checked ~ label{
    border          : none;
    font-weight     : 900;
    color           : var(--main-font-color);
    background-color: var(--main-table-hover);
}

.integrationPlan-steps .radioButton .formFieldRadioOption label:hover{
    background-color: var(--main-table-hover);
    color           : var(--main-font-color);
    cursor          : pointer;
}

.integrationPlan-container{
    grid-area       : ipContainer;
    height          : 100%;
    overflow-y      : scroll;
    background-color: #ffffff;
}

.integrationPlanStep-selected{
    box-sizing: border-box;
    border: var(--main-border-width) solid var(--main-bt-color);
}

.dateAssessmentContainer{
    margin-top: 15px;
    border-top: var(--main-border-width) solid var(--main-bt-color);
    padding   : 15px 0px 0px;
}













/* REVIEW STRUCTURE */

.reviewStructureSkill-toolsContainer{
    display                 : grid;
    grid-template-columns   : 1fr auto auto auto;
    column-gap              : 20px;
    align-items             : center;
    margin-bottom           : 30px;
}

.reviewStructureSkill-title{
    font-family     : var(--main-title-font);
    font-size       : 14px;
    text-transform  : uppercase;
    font-weight     : 100;
    text-align      : center;
}

.reviewStructureSkill-description{
    font-family : var(--main-info-font);
    margin-top  : 20px;
}

.reviewStructureSkill-skill{
    background-color: var(--state-grey);
}

.reviewStructureSkill-question{
    font-family: var(--main-info-font);
}

.reviewStructureSkill-title .toolFloatRight{
    font-size: 12px;
}

.reviewStructureSkill-model{
    background-color: transparent;
    border          : var(--main-border-width) solid var(--main-bt-color);
}

.reviewStructureSkill-model.hide{
    opacity: 0.3;
}













/* MY SKILLS */

.mySkills-skill{
    padding: 10px 0px;
}

.mySkillsSkill-label{
    color           : var(--main-th-color);
    font-size       : 6px;
    font-weight     : 700;
    text-transform  : uppercase;
    margin-bottom   : 3px;
}

.mySkillsSkill-title{
    font-family     : var(--main-title-font);
    text-transform  : uppercase;
    font-weight     : 300;
    margin          : 3px 0px 5px;
}

.mySkillsSkillInfos-value{
    font-size   : 11px;
    font-weight : 300;
}

.mySkillsSkill-tools{
    font-size: 16px;
}

.tagPicto{
    display         : grid;
    align-items     : center;
    text-align      : center;
    width           : 30px;
    height          : 30px;
    border-radius   : 15px;
    font-size       : 14px;
    color           : var(--main-th-color);
    border          : 1px solid var(--main-th-color);
}

.tagButton .tagPicto{
    width           : 50px;
    height          : 50px;
    border-radius   : 30px;
    font-size       : 25px;
}

.mySkills-header{
    display                 : grid;
    grid-template-columns   : 260px 1fr;
    grid-gap                : 20px;
    margin-bottom           : 50px;
    padding                 : 15px 20px 20px;
    background-color        : var(--secondary-bg-color);
}

.mySkillsHeader-tags{
    padding         : 0px 20px 20px;
    background-color: var(--main-bg-color);
}

.mySkillsHeaderTags-container{
    height          : calc(100% - 43px);
    display         : flex;
    flex-direction  : column;
}

.mySkillsHeaderTagsContainer-title{
    flex                    : auto;
    text-align              : center;
    display                 : grid;
    grid-template-columns   : 1fr;
    align-content           : center;
    font-family             : var(--main-info-font);
    font-size               : 18px;
    min-height              : 100%;
}

.mySkills-reviews,
.mySkills-integrationPlans{
    margin-bottom   : 50px;
    padding         : 15px 20px 20px;
    background-color: var(--secondary-bg-color);
}

.mySkillsReviews-lastReview{
    display                 : grid;
    grid-template-columns   : 180px 1fr;
    grid-gap                : 20px;
}

.pastReviews-container{
    display                 : grid;
    grid-template-columns   : 120px 1fr;
    height                  : 100%;
    max-height              : 100%;
    margin                  : 40px 0px 10px;
}

.pastReviews-preview{
    border  : var(--main-border-width) solid var(--main-bt-color);
    padding : 20px;
    background-color: var(--main-bg-color);
}

.pastReviews-header{
    display                 : grid;
    grid-template-columns   : 1fr auto;
    grid-gap                : 20px;
    margin-bottom           : 30px;
}

.pastReviews-jobTitle{
    text-transform  : uppercase;
    font-size       : 16px;
    font-weight     : 700;
}

.pastReviews-organizationTitle{  
    font-size       : 8px;
    text-transform  : uppercase;
    color           : var(--main-th-color);
    font-weight     : bolder;
    margin-bottom   : 10px;
}













/* SHOW JOB REVIEW */

.ShowJobReview details[open] > summary {
    color: var(--main-font-color);
}

.ShowJobReview details[open] > summary > h3 {
    color: var(--main-bt-color);
}

.jobReviewProgressionState-container{
    display                 : grid;
    grid-template-columns   : repeat(4, 1fr);
    align-items             : end;
    margin-bottom           : 50px;
}

.jobReview-step{
    text-align  : center;
    position    : relative;
}

.jobReviewStep-title{
    text-transform  : uppercase;
    font-size       : 8px;
    font-weight     : 700;
    margin-bottom   : 5px;
    height          : 20px;
}

.jobReviewStep-title.inProgress{
    font-size   : 12px;
    font-weight : 900;
}

.jobReviewStep-dot{
    position        : absolute;
    width           : 10px;
    height          : 10px;
    border-radius   : 5px;
    background-color: var(--main-bt-color);
    bottom          : -5px;
    left            : calc(50% - 5px);
}

.jobReviewStep-dot.inProgress{
    width           : 20px;
    height          : 20px;
    border-radius   : 10px;
    bottom          : -10px;
    left            : calc(50% - 10px);
}

/*.jobReviewStep{
    width           : 100px;
    background-color: var(--secondary-bg-color);
    font-size       : 8px;
    font-weight     : 700;
    text-transform  : uppercase;
    color           : var(--main-th-color);
    text-align      : center;
    padding         : 10px 0px;
}

.jobReviewStep.inProgress{
    background-color: rgba(253, 159, 79, 0.3);
    color           : var(--state-orange);
    border          : var(--main-border-width) solid var(--state-orange);
}

.jobReviewStep.done{
    background-color: rgba(82, 192, 191, 0.3);
    color           : var(--state-green);
    border          : var(--main-border-width) solid var(--state-green);
}*/

.jobReviewStep-link{
    height          : 1px;
    background-color: var(--main-bt-color);
}

/*.jobReviewStep-link{
    height          : 3px;
    background-color: var(--secondary-bg-color);
}

.jobReviewStep-link.inProgress{
    background-color: rgba(253, 159, 79, 0.3);
    color           : var(--state-orange);
}

.jobReviewStep-link.done{
    background-color: rgba(82, 192, 191, 0.3);
    color           : var(--state-green);
}*/

.jobReview-header{
    display                 : grid;
    grid-template-columns   : 1fr auto 1fr;
    grid-gap                : 20px;
    margin-bottom           : 20px;
}

.jobReview-header .userLabel{
    margin-bottom: 10px;
}

.jobReview-subHeader{
    text-align      : center;
    margin-bottom   : 50px;
}

.jobReviewHeader-jobTitle{
    font-family     : var(--main-title-font);
    font-size       : 25px;
    font-weight     : 300;
    text-transform  : uppercase;
}

.jobReviewHeader-startDate{
    font-size: 10px;
}

.jobReviewHeader-explanation{
    font-family: var(--main-info-font);
    margin-top: 20px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.jobReviewForm .formFieldRadioOption{
    margin-bottom: 0px;
}

.jobReviewForm details{
    margin-bottom: 20px;
}

.jobReviewForm details.skillDomain{
    margin-bottom: 0px;
    background-color: var(--main-bg-color);
    padding: 10px;
}

.jobReviewForm details.skillDomain summary:hover,
.jobReviewForm details.skillDomain[open] summary{
    color: var(--main-bt-color);
}

.jobReviewForm .formFieldRadioOption label{
    font-size: 8px;
}

.jobReviewForm textarea{
    background-color: var(--secondary-bg-color);
}

.jobReview-formTitle{
    text-transform  : uppercase;
    font-family     : var(--main-title-font);
    font-weight     : 300;
    font-size       : 9px;
    margin-bottom   : 5px;
}

.jobReviewSkillForm-section{
    display                 : grid;
    grid-template-columns   : 160px 1fr;
    grid-gap                : 20px;
    background-color        : var(--main-bg-color);
    padding                 : 20px;
}

.jobReviewQuestionForm-section{
    background-color: var(--main-bg-color);
    padding         : 20px;
}

.prepareJobSkillContainer{
    background-color: var(--main-info);
}

.jobReview-formResult{
    font-family : var(--main-info-font);
    font-style  : italic;
    color       : var(--main-th-color);
}

.jobReview-formResult.value{
    color: var(--main-bt-color);
}

.jobReviewActionsContainer{
    position             : fixed;
    bottom               : 5px;
    left                 : calc(50% + 200px);
    transform            : translate(calc(-50% - 100px));
    z-index              : 800;
    padding              : 10px;
    display              : grid;
    grid-template-columns: auto 1fr;
    column-gap           : 20px;
}

.jobReviewActionsContainer.soloButton{
    display              : grid;
    grid-template-columns: 1fr;
}

.jobReviewActionsContainer > div{
    background-color     : var(--secondary-bg-color);
    box-shadow           : 3px 3px 6px rgba(0,0,0,0.16);
}

.jobReviewActionsContainer a.formLink.fineatyLink{
    padding : 15px;
    overflow:inherit;
    margin  : 0px;
    width   : auto;
}

.ShowJobReview .checkboxButton .formFieldCheckboxOption label{
    text-align      : center;
    font-size       : 14px;
    padding         : 15px;
    text-transform  : none;
    font-family     : var(--main-font-family);
    border          : var(--main-border-width) solid var(--main-bt-color);
    font-weight     : 100;
    color           : var(--main-bt-color);
    margin          : 0px;
    display         : inline-block;
    background-color: var(--secondary-bg-color);
    white-space     : nowrap;
}

.ShowJobReview .checkboxButton .formFieldCheckboxOption {
  margin-bottom: 0px;
}

.ShowJobReview .checkboxButton .formFieldCheckboxOption input{
    display: none;
}

.ShowJobReview .checkboxButton .formFieldCheckboxOption input:checked ~ label{
    color           : var(--secondary-bg-color);
    background-color: var(--main-bt-color);
}

.ShowJobReview .checkboxButton .formFieldCheckboxOption label:hover{
    color           : var(--secondary-bg-color);
    background-color: var(--main-bt-color);
    cursor: pointer;
}

.ShowJobReview .skillFilters{
    display: grid;
    grid-template-columns: auto auto auto;
}















/* SHOW REVIEW ASSESSMENT */

.ShowReviewAssessment{
    min-height          : 100%;
    display             : grid;
    grid-template-rows  : 1fr;
}

.reviewAssessment{
    min-height          : 100%;
    padding             : 0px 20px;
    display             : grid;
    grid-template-rows  : auto 1fr;
}

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

.reviewAssessmentSkill-header{
    text-align              : left;
    color                   : var(--main-font-color);
    display                 : grid;
    grid-template-columns   : 250px 1fr 250px;
    grid-gap                : 15px;
    margin-bottom           : 20px;
}

.reviewAssessmentSkill-domain{
    font-size       : 8px;
    text-transform  : uppercase;
    font-weight     : bold;
    color           : var(--main-font-color);
}

.reviewAssessmentSkill-title{
    font-size       : 16px;
    text-transform  : uppercase;
    font-weight     : 900;
    font-family     : var(--main-font-family);
    margin-bottom   : 5px;
}

.ShowReviewQuizz .reviewAssessmentSkill-title{
    margin-top: 50px;
}

.reviewAssessmentSkill-learningPlace{
    font-size       : 10px;
    text-transform  : uppercase;
    font-weight     : bold;
    color           : var(--main-font-color);
    margin-bottom   : 15px;
}

.reviewAssessmentSkill-description{
    font-size       : 11px;
    font-family     : var(--main-font-family);
    color           : var(--main-font-color);
    font-weight     : 300;
}

.reviewAssessmentSkillHeader-datas{
    display                 : grid;
    grid-template-columns   : 1fr auto;
    column-gap              : 10px;
    row-gap                 : 5px;
    align-items             : center;
}

.reviewAssessmentSkillHeader-datas span{
    font-family     : var(--main-font-family);
    font-size       : 12px;
    font-weight     : 700;
    color           : var(--main-font-color);
}

.reviewAssessmentQuestionContainer-title{
    text-transform  : uppercase;
    font-size       : 20px;
    font-weight     : 900;
    margin-bottom   : 30px;
    font-family     : var(--main-font-family);
    color           : var(--main-font-color);
}

.reviewAssessmentQuestionContainer-question{
    font-size       : 14px;
    margin-bottom   : 10px;
}

.assessmentCheckBoxButton{
    text-align: center;
}

.assessmentRadioButton .formFieldRadioOption label:hover,
.assessmentCheckBoxButton .formFieldCheckboxOption label:hover{
    cursor  : pointer;
    background-color: var(--main-table-hover);
}

.questionsNav .assessmentRadioButton .formFieldRadioOption label:hover{
    background-color: #eeeeee;
}

.assessmentRadioButton .formFieldRadioOption label,
.assessmentCheckBoxButton .formFieldCheckboxOption label{
    display         : inline-block;
    border          : var(--main-border-width) solid var(--main-bt-color);
    background-color: transparent;
    color           : var(--main-bt-color);
    font-size       : 10px;
    padding         : 10px;
    font-weight     : 700;
    margin          : 0px 3px;
    min-width       : 34px;
}

.questionsNav .formFieldRadioOption label{
    border          : 1px solid #cccccc;
    padding         : 4px;
    min-width       : auto;
    border-radius   : 5px;
}

.unhappyValuediv,
.assessmentValuediv{
    margin-top: 20px;
}

.unhappyValuediv{
    margin-bottom: 30px;
}

.unhappyValue{
    margin-top: 5px;
}

.assessmentRadioButton .formFieldRadioOption input,
.assessmentCheckBoxButton .formFieldCheckboxOption input{
    display: none;
}

.assessmentRadioButton .formFieldRadioOption input:checked ~ label,
.assessmentCheckBoxButton .formFieldCheckboxOption input:checked ~ label{
    color           : var(--main-bg-color);
    background-color: var(--main-bt-color);
}

.questionsNav .assessmentRadioButton .formFieldRadioOption input:checked ~ label{
    background-color: #cccccc;
}

.unhappyCommentDiv{
    margin-top: 20px;
}

.unhappyCommentDiv label{
    margin-bottom: 5px;
}

.reviewAssessment-skillContainer{
    background-color: var(--main-bg-color);
    margin          : 0px -20px;
    padding         : 20px;
    border-top      : 1px solid #cccccc;
    color           : var(--main-font-color);
}

.reviewAssessmentSkillContainer-header{
    display                 : grid;
    grid-template-columns   : 1fr auto;
    grid-gap                : 15px;
    margin-bottom           : 50px;
}

.reviewAssessmentSkillContainer-domain{
    font-size       : 8px;
    text-transform  : uppercase;
    font-weight     : bold;
    color           : var(--main-font-color);
}

.reviewAssessmentSkillContainer-title{
    font-size       : 16px;
    text-transform  : uppercase;
    font-weight     : 900;
    font-family     : var(--main-font-family);
    margin-bottom   : 5px;
}

.reviewAssessmentSkillContainer-learningPlace{
    font-size       : 10px;
    text-transform  : uppercase;
    font-weight     : bold;
    color           : var(--main-font-color);
    margin-bottom   : 15px;
}

.reviewAssessmentSkillContainer-description{
    font-size       : 12px;
    font-family     : var(--main-font-family);
    color           : var(--main-font-color);
    margin-left     : 15px;
    padding-left    : 5px;
    border-left     : 1px solid #cccccc;
}

.reviewAssessmentSkillContainerHeader-datas{
    display                 : grid;
    grid-template-columns   : 1fr auto;
    column-gap              : 10px;
    row-gap                 : 5px;
    align-items             : center;
}

.reviewAssessmentSkillContainerHeader-datas span{
    font-family     : var(--main-font-family);
    font-size       : 12px;
    font-weight     : 700;
    color           : var(--main-font-color);
}

.reviewAssessmentSkillContainer-titleSection{
    text-align      : center;
    font-family     : var(--main-font-family);
    font-weight     : 700;
    text-transform  : uppercase;
    color           : #aaaaaa;
    margin-bottom   : 20px;
    border-bottom   : 1px solid #cccccc;
    padding-bottom  : 5px;
}

.reviewAssessmentSkillContainer-documents{
    display                 : grid;
    grid-template-columns   : 1fr 200px;
    grid-gap                : 20px;
    position                : relative;
    transition              : all 0.5s;
}

.reviewAssessment-skillContainer iframe{
    height: calc(100vh - 240px);
    border: 1px solid #cccccc;
}

.integrationPlan-supervision .reviewAssessment-skillContainer iframe{
    height: calc(100vh - 270px);
}

.reviewAssessmentSkillContainerDocuments-list{
    background-color: #ffffff;
    height          : 100%;
    border          : 1px solid #cccccc;
    overflow        : hidden;
}

.reviewAssessmentSkillContainerDocumentsList-hidden{
    position: absolute;
    top     : -18px;
    right   : -18px;
    color   : #aaaaaa;
    cursor  : pointer;
}

.reviewAssessment-skillContainer .listButton{
    width           : 100%;
    margin-top      : -1px;
    box-shadow      : none;
    font-size       : 10px;
    font-weight     : 500;
    border          : none;
    border-bottom   : 1px solid #cccccc;
    border-top      : 1px solid #cccccc;
    text-align      : center;
}

.reviewAssessment-skillContainer .fineatyButton.listButton:hover{
    color: var(--main-bg-color);
}

.reviewAssessment-skillContainer .listButton.active{
    color           : var(--main-bg-color);
    background-color: var(--main-table-hover);
}

.noPreviewContainer{
    background-color: #e4e4e4;
    border          : 1px solid #cccccc;
    padding         : 20px;
}

.noPreviewContainer-message{
    margin-bottom   : 30px;
    color           : var(--main-font-color);
}

.integrationPlan-deadLine .reviewAssessment-questionContainer{
    background-color: var(--secondary-bg-color);
    padding: 20px;
}

.ShowReviewAssessment textarea{
    box-shadow  : none;
    border      : 1px solid #cccccc;
    max-width   : 500px;
}

.reviewQuizzAnswer{
    margin: 50px 0px;
}

.reviewQuizzAnswer-label{
    font-family     : arial, sans-serif;
    font-size       : 8px;
    font-weight     : lighter;
    text-transform  : uppercase;
    color           : #aaaaaa;
    margin          : 0px 15px;
}

.questionsNav{
    margin-top: 30px;
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){

    .reviewAssessmentSkill-header{
        grid-template-columns   : 100px 1fr 100px;
    }

    .reviewAssessmentSkillHeader-datas{
        grid-template-columns   : 1fr;
        text-align              : right;
    }
}

@media (max-width: 1023px) {

    .reviewAssessmentSkill-header{
        grid-template-columns   : 100px 1fr 100px;
    }

    .reviewAssessmentSkillHeader-datas{
        grid-template-columns   : 1fr;
        text-align              : right;
    }
    
}

@media (max-width: 767px) {

}









/* SEARCH FORM */

.searchForm{
    width   : 300px;
    margin  : 15px 0px;
    display : inline-block;
}

.searchForm.rightFloat{
    float       : right;
    margin      : 0px;
    margin-top  : 8px;
}

.searchForm.rightFloatTitle{
    float       : right;
    margin      : 0px;
    margin-top  : -12px;
}

.searchPattern{
    font-family : 'icofont', sans-serif;
    text-align  : right;
}

.filtersContainer .searchPattern,
.searchPattern.textAlignLeft{
    text-align: left;
}

@media (min-width: 1280px){}

@media (min-width: 1024px) and (max-width: 1279px){
}

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

@media (max-width: 767px) {
    
    .searchForm{
        width: 100%;
        margin-bottom: 15px;
    }
}










/* MANAGE ACCOUNTS */

.cardAddButton-container{
    position: relative;
}

.cardAddButton-container:hover h3{
    color: var(--main-bt-color);
}

.cardAddButton-container .card-container{
    height: 100%;
}

.miniButton.cardAddButton{
    position        : absolute;
    width           : 24px;
    height          : 24px;
    top             : -12px;
    right           : -12px;
    padding         : 0px;
    border-radius   : 12px;
}










/* NOTIFICATIONS */

.notificationBubble{
    position        : absolute;
    top             : -10px;
    right           : -10px;
    color           : #ffffff;
    font-size       : 11px;
    background-color: var(--elegancia-red);
    border-radius   : 10px;
    overflow        : hidden;
    height          : 20px;
    min-width       : 20px;
    text-align      : center;
    padding         : 3px 6px 0px;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
}

.notificationBubble.icons{
    top             : -15px;
    right           : -15px;
    color           : var(--main-bt-color);
    font-size       : 16px;
    background-color: #ffffff;
    border-radius   : 15px;
    height          : 30px;
    min-width       : 30px;
    padding         : 6px;
}

.notifPreviews{
    display                 : grid;
    grid-template-columns   : 1fr;
    row-gap                 : 10px;
}

.notifPreview-container{
    display                 : grid;
    grid-template-columns   : 30px 300px;
    background-color        : var(--secondary-bg-color);
    padding                 : 10px 5px 10px 0px;
    align-items             : center;
    border                  : var(--main-border-width) solid var(--secondary-bg-color);
}

a .notifPreview-container{
    color: var(--main-font-color);
}

.notifPreview-container:hover{
    cursor: pointer;
    border: var(--main-border-width) solid var(--main-bt-color);
}

.notifPreview-unread{
    text-align: center;
}

.notifPreview-unreadIndicator{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--elegancia-red);
}

.notifPreview-title{
    text-transform  : uppercase;
    font-family     : var(--main-title-font);
    font-size       : 12px;
    font-weight     : 700;
}

.notifPreview-contact{  
    font-weight     : 400;
    text-transform  : uppercase;
    color           : var(--main-th-color);
    font-size       : 8px;
    margin-bottom   : 5px;
}

.notifPreview-content{
    overflow            : hidden;
    text-overflow       : ellipsis;
    display             : -webkit-box;
    -webkit-line-clamp  : 2;
    -webkit-box-orient  : vertical;
    font-size           : 10px;
    color               : var(--main-th-color);
}

.notificationForm{
    background-color: var(--secondary-bg-color);
    margin-top      : 20px;
    padding         : 20px;
    text-align      : center;
    border          : var(--main-border-width) solid var(--main-bt-color);
}

.EditStartDateAssessment .formLinkdiv{
    display: inline;
}











/* BENEFIT CARD */

.benefitCard-title{
    font-family     : var(--main-title-font);
    font-size       : 20px;
    font-weight     : 700;
    text-transform  : uppercase;
    text-align      : center;
    margin-bottom   : 30px;
}

.benefitCard-thumb{
    margin: -10px -10px 30px;
}

.benefitCard-qrcode{
    text-align: center;
}

.benefitCard-container{
    display                 : grid;
    grid-template-columns   : 1fr 1fr;
    grid-gap                : 20px;
    align-items             : center;
}

.benefitCard-container .tableCard{
    margin-bottom: 0px;
}

.benefit-academicianThumb{
    text-align  : center;
    margin      : 15px 0px;
}

.benefit-academicianThumb img{
    border-radius: 50px;
    overflow: hidden;
}

.benefit-academicianTitle{
    font-family: var(--main-title-font);
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    margin-bottom: 30px;
}

@media (max-width: 767px) {
    
    .benefitCard-container{
        grid-template-columns: 1fr;
    }
}











/* POP UP */

.fineatyPopUp {
    background-color: var(--main-bg-color);
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.32);
}

.defaultPopUp {
}

.fineatyPopUpHeader{
    background-color: var(--main-bt-color);
    color           : var(--main-bg-color);
    padding         : 5px 0px;
}

.fineatyPopUpClose a{
    background-image    : url(../images/exit.png);
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : 20px;
    filter              : invert(99%) sepia(3%) saturate(2223%) hue-rotate(29deg) brightness(117%) contrast(91%);
    color               : rgba(0,0,0,0) !important;
}

.formFieldCheckboxOption span:not(.icons, .addedText),
.formFieldCheckboxOption label{
    display: none;
}

.formFieldMultiCheckboxdiv .formFieldCheckboxOption label {
    font-size   : 10px;
    font-weight : normal;
    display     : inline;
    padding-left: 10px;
}

.forbiddenCreateAccount{
    display: none;
}

/*.remembermediv{
    display: none;
}

.LoginModulePopUp,
.fineatyPopUp .Login{
    color: #f5f5f5;
}*/

.buttonCheckbox{
    text-align: center;
}

.buttonCheckbox .formFieldCheckboxOption label:hover{
    cursor  : pointer;
    color   : var(--main-bt-color);
}

.buttonCheckbox .formFieldCheckboxOption label{
    display         : inline-block;
    border-radius   : 0px;
    font-size       : 10px;
    padding         : 0px;
    font-weight     : 400;
    color           : var(--main-th-color);
}

.buttonRadio .formFieldRadioOption label::before{
    /*content     : "\25CE";*/
    content     : "\25CB";
    font-size   : 14px;
    margin-right: 5px;
    font-weight : lighter;
    color       : var(--main-bt-color);
}

.colorRadio,
.iconRadio{
    display: inline-block;
}

.iconRadio .formFieldRadioOption label{
    font-size   : 14px;
    text-align  : center;
    display     : grid;
    align-items : center;
}

.colorRadio .colorLabel{
    width           : 30px;
    height          : 30px;
    border-radius   : 15px;
}

.colorRadio .formFieldRadioOption input,
.iconRadio .formFieldRadioOption input{
    display: none;
}

.colorRadio .formFieldRadioOption label{
    height          : 40px;
    width           : 40px;
    padding         : 4px;
    border-radius   : 20px;
    margin          : 5px;
    border          : 1px solid transparent;
}

.colorRadio .formFieldRadioOption label:hover{
    border: 1px solid var(--main-bt-color);
}

.colorRadio .formFieldRadioOption input:checked ~ label{
    border: 1px solid var(--main-bt-color);
}

.iconRadio .formFieldRadioOption label{
    height          : 30px;
    width           : 30px;
    padding         : 5px;
    border-radius   : 15px;
    margin          : 5px;
    border          : 1px solid var(--main-th-color);
}

.iconRadio .formFieldRadioOption label:hover{
    border  : 1px solid var(--main-bt-color);
    color   : var(--main-bt-color);
}

.iconRadio .formFieldRadioOption input:checked ~ label{
    border  : 1px solid var(--main-bt-color);
    color   : var(--main-bt-color);
}





.buttonCheckbox .formFieldCheckboxOption label::before{
    content     : "\2610";
    font-size   : 14px;
    margin-right: 5px;
    font-weight : lighter;
    color       : var(--main-bt-color);
}

.integrationPlanStep-isDone.buttonCheckbox .formFieldCheckboxOption label::before{
    font-size: 20px;
}

.buttonRadio .formFieldRadioOption label:hover,
.buttonCheckbox .formFieldCheckboxOption label:hover{
    color       : var(--main-bt-color);
}

.buttonRadio .formFieldRadioOption input,
.buttonCheckbox .formFieldCheckboxOption input{
    display: none;
}

.buttonRadio .formFieldRadioOption input:checked ~ label,
.buttonCheckbox .formFieldCheckboxOption input:checked ~ label{
    color: var(--main-bt-color);
}

.buttonRadio .formFieldRadioOption input:checked ~ label:before{
    /*content: "\25CE";*/
    content: "\25CF";
}

.buttonCheckbox .formFieldCheckboxOption input:checked ~ label:before{
    content: "\2611";
}

.fullScreenPopup{
    height: 100%;
}

.cardLine{
    border-bottom: 1px solid var(--main-bg-color);
}








.filters .iconRadioValue .formFieldRadioOption input{
    display: none;
}

.filters .iconRadioValue .formFieldRadioOption .icons{
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    border          : var(--main-border-width) solid var(--main-bt-color);
    background-color: #ffffff;
    color           : var(--main-bt-color);
    min-width       : 30px;
    height          : 30px;
    font-size       : 15px;
    border-radius   : 15px;
    padding         : 5px 3px 0px;
    margin          : 0px 3px;
}

.filters .iconRadioValue .formFieldRadioOption input:checked ~ label .icons{
    background-color: var(--main-bt-color);
    color           : #ffffff;
}









/* CALENDAR */

.ShowAcademicianCalendar{
    height: 100%;
}

#calendar a{
    color: var(--main-font-color);
}

.fc .fc-button{
    border-radius: 0px;
    border-width : var(--main-border-width);
    font-family  : var(--main-font-family);
    font-weight  : 100;
}

.fc .fc-button-primary{
    border          : var(--main-border-width) solid var(--main-bt-color);
    background-color: transparent;
}

.fc .fc-button-primary:disabled,
.fc .fc-button-primary:disabled:hover {
    background-color: transparent;
    border-color    : var(--state-grey);
    color           : var(--state-grey);
    cursor          : default;
}

.fc .fc-button-primary:not(:disabled).fc-button-active, 
.fc .fc-button-primary:not(:disabled):active {
    color : var(--secondary-bg-color);
    cursor: default;
}

.fc-col-header-cell{
    background-color: var(--secondary-bg-color);
    font-family     : var(--main-title-font);
}

.fc-daygrid-day-number{
    font-family: var(--main-info-font);
}

#calendar .fc-day-today a.fc-daygrid-day-number{
    color: var(--main-bt-color);
}

.fc-list-event-title,
.fc-event-title{
    font-weight: 500;
}

/*.fc-event-title .fc-sticky{
    font-weight: 700;
}*/









/* STATISTICS */

.globalStatContainer{
    border       : var(--main-border-width) solid var(--main-border-color);
    padding      : 10px;
    margin-bottom: 20px;
}

.globalStatContainer-description{
    font-family   : var(--main-info-font);
    border-bottom : var(--main-border-width) solid var(--main-border-color);
    padding-bottom: 12px;
}

.lateInProgress .statDonut{
    background-color: rgba(252, 100, 132, var(--transparency));
    color: var(--state-red);
    font-weight:700;
    border-radius: 50%;
}

.statChart .donutChart{
    color: var(--main-font-color);
}









/*.deadLine{
    background-color: #eee;
    border-radius   : 12px;
    box-shadow      : inset 3px 3px 6px rgba(0,0,0,0.16);
    margin-bottom   : 15px;
    overflow        : hidden;
}

.deadLine-title{
    box-shadow      : inset 3px 3px 6px rgba(0,0,0,0.16);
    background-color: #fff;
    text-transform  : uppercase;
    padding         : 15px 15px 10px;
    border-bottom   : 1px solid #cccccc;
}

.deadLine-zone{
    min-height: 30px;
}

.toolAndMethod{
    border-radius   : 12px;
    background-color: #ffffff;
    box-shadow      : 3px 3px 6px rgba(0,0,0,0.16);
    text-align      : center;
    padding         : 15px;
}*/



.displayHide{
    opacity: 0.5;
}








.tableRowGreen {
  background-color: #bae0bc;
}

.tableRowOrange {
  background-color: #ffe3bf;
}

.tableRowRed {
  background-color: #f7d2cd;
}

.tableRowBlue {
  background-color: #B5D8F7;
}

.tableRowYellow {
  background-color: #F4F9B1;
}

.tableRowGrey {
  background-color: #dddddd;
}

.lightStyle{
    text-shadow : 1px 1px 2px rgba(0,0,0,0.16);
    color       :#FFC159;
}

.noMargin{
    margin: 0px;
}

.marginBottom20{
    margin-bottom: 20px;
}

.marginBottom30{
    margin-bottom: 30px;
}

.marginBottom50{
    margin-bottom: 50px;
}

.marginBottom70{
    margin-bottom: 70px;
}

.marginAuto{
    margin-left : auto;
    margin-right: auto;
}

.verticalMargin15{
    margin: 15px 0px;
}



.selectAccountShowAccount{
    display: none;
}






.formSelectorsAsButton .formFieldMultiCheckbox{
    margin: 15px 0px;
}

.radioButton .formFieldRadioOption label,
.checkboxButton .formFieldCheckboxOption label{
    text-align      : center;
    font-size       : 10px;
    padding         : 10px;
    text-transform  : uppercase;
    font-family     : var(--main-font-family);
    border          : var(--main-border-width) solid var(--main-bt-color);
    font-weight     : 500;
    color           : var(--main-th-color);
    margin          : 3px;
    display         : inline-block;
}

.radioButton-extend,
.radioButton-extend .formFieldRadioOption label,
.checkboxButton-extend,
.checkboxButton-extend .formFieldCheckboxOption label{
    width: 100%;
}

.radioButton .formFieldRadioOption,
.checkboxButton .formFieldCheckboxOption {
  margin-bottom: 0px;
}

.radioButton .formFieldRadioOption input,
.checkboxButton .formFieldCheckboxOption input{
    display: none;
}

.radioButton .formFieldRadioOption input:checked ~ label,
.checkboxButton .formFieldCheckboxOption input:checked ~ label{
    border  : var(--main-border-width) solid var(--main-bt-color);
    color   : var(--main-bt-color);
}

.radioButton .formFieldRadioOption label:hover,
.checkboxButton .formFieldCheckboxOption label:hover{
    color: var(--main-bt-color);
    cursor: pointer;
}





.documentsContainer{
    display                 : grid;
    grid-template-columns   : 1fr 200px;
    grid-gap                : 20px;
    transition              : all 0.5s;
    position                : relative;
    padding                 : 15px;
    height                  : 100%;
    max-height              : 100%;
}

.documentList,
.spacesList{
    background-color: var(--secondary-bg-color);
    height          : 100%;
    max-height      : 100%;
    overflow-y      : scroll;
}

.filtersList{
    height      : 100%;
    max-height  : 100%;
    overflow-y  : scroll;
}

.documentList-title{
    background-color: var(--main-bg-color);
    font-family     : var(--main-title-font);
    text-transform  : uppercase;
    text-align      : center;
    padding         : 20px 0px 10px;
    color           : var(--main-th-color);
}

.ShowOrganizationDocument iframe,
.ShowOrganizationDocument,
.ShowOrganizationDocumentModulePopUp .fineatyPopUpBottomRow,
.ShowOrganizationDocumentModulePopUp .fineatyPopUpContent{
    overflow: hidden;
}

.listButton,
.fineatyButton.listButton{
    width           : 100%;
    margin-top      : -1px;
    font-size       : 10px;
    font-weight     : 500;
    border          : none;
    border-bottom   : 1px solid var(--main-bg-color);
    border-top      : 1px solid var(--main-bg-color);
    text-align      : center;
    color           : var(--main-font-color);
}

.fineatyButton.listButton:hover{
    color: var(--main-bt-color);
    background-color: transparent;
}

.listButton.active,
.listButton.active:hover{
    color           : var(--secondary-bg-color);
    background-color: var(--main-bt-color);
}

.documentList-hidden{
    position: absolute;
    top     : 0px;
    right   : 0px;
    color   : #aaaaaa;
    cursor  : pointer;
}

.filtersContainer{
    display                 : grid;
    grid-template-columns   : 0px 1fr;
    transition              : all 0.5s;
    position                : relative;
    height                  : 100%;
    max-height              : 100%;
}

.spacesContainer{
    display                 : grid;
    grid-template-columns   : 200px 1fr;
    grid-gap                : 20px;
    transition              : all 0.5s;
    position                : relative;
    height                  : 100%;
    max-height              : 100%;
}

.space-preview{
    border  : var(--main-border-width) solid var(--main-bt-color);
    padding : 20px;
}

.spacesContainer .fineatyButton.listButton{
    text-transform  : none;
    text-align      : left;
}

.spacesContainer .documentList-hidden{
    left: 0px;
    top: -20px;
}

.filtersContainer .filterButton{
    position: absolute;
    left    : 0px;
    top     : -28px;
}

.filtersContainer .filtersForm{
    background-color: rgba(253,251,250,0.5);
    padding         : 20px 15px;
    margin-right    : 5px;
}

.filtersOpenClose{
    display              :grid;
    grid-template-columns:repeat(2, 1fr);
    text-align           :center;
}





.myOrganization-title{
    font-family     : var(--main-title-font);
    letter-spacing  : 1px;
    font-size       : 20px;
    text-transform  : uppercase;
    margin-bottom   : 30px;
    font-weight     : 700;
}







.academicianStatChart{
    text-align: center;
}

.academicianStatChart.iconChart .donutChart{
    font-size: 40px;
}

.academicianStatChart label{
    margin-bottom: 10px;
}

.academicianStatChart p{
    font-family : var(--main-info-font);
    font-style  : italic;
    max-width   : 250px;
    margin-left : auto;
    margin-right: auto;
    font-size   : 12px;
}







.statChart{
    text-align: center;
}

.statChart .donutChart.statDonut{
    font-size: 20px;
    font-weight: 100;
}

.statChart .donutChart.statLittleDonut{
    font-size: 10px;
    font-weight: 100;
}

.iconVisibleFontSize{
    font-size: 14px;
}




.fineatyLink .icon-happy,
.fineatyLink .icon-unhappy{
    color: var(--main-th-color);
}

.fineatyLink .icon-happy:hover{
    color: var(--state-green);
}

.fineatyLink .icon-unhappy:hover,
.fineatyLink .icon-unhappy.isAnswered{
    color: var(--state-red);
}




.noPadding{
    padding: 0px;
}

.noMargin{
    margin: 0px;
}

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

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

.align-left{
    text-align: left;
}




.isMain{
    border: var(--main-border-width) solid var(--main-bt-color);
}

.gridGap20{
    grid-gap: 20px;
}

.gridNoGap{
    grid-gap: 0px;
}

.green, a.green:visited{
    color: var(--state-green);
}

.blue, a.blue:visited{
    color: var(--state-blue);
}

.red, a.red:visited{
    color: var(--state-red);
}

.yellow, a.yellow:visited{
    color: var(--state-yellow);
}

.purple, a.purple:visited{
    color: var(--state-purple);
}

.grey, a.grey:visited{
    color: var(--state-grey);
}

.orange, a.orange:visited{
    color: var(--state-orange);
}



.greenBackground{
    background-color: rgba(82, 192, 191, 1);
}

.blueBackground{
    background-color: rgba(61, 162, 230, 1);
}

.redBackground{
    background-color: rgba(252, 100, 132, 1);
}

.yellowBackground{
    background-color: rgba(254, 205, 102, 1);
}

.purpleBackground{
    background-color: rgba(151, 103, 248, 1);
}

.greyBackground{
    background-color: rgba(201, 203, 207, 1);
}

.orangeBackground{
    background-color: rgba(253, 159, 79, 1);
}



.greenBackgroundTransparency{
    background-color: rgba(82, 192, 191, var(--transparency));
    color: var(--state-green);
    font-family: var(--main-title-font);
}

.blueBackgroundTransparency{
    background-color: rgba(61, 162, 230, var(--transparency));
    color: var(--state-blue);
    font-family: var(--main-title-font);
}

.redBackgroundTransparency{
    background-color: rgba(252, 100, 132, var(--transparency));
    color: var(--state-red);
    font-family: var(--main-title-font);
}

.yellowBackgroundTransparency{
    background-color: rgba(254, 205, 102, var(--transparency));
    color: var(--state-yellow);
    font-family: var(--main-title-font);
}

.purpleBackgroundTransparency{
    background-color: rgba(151, 103, 248, var(--transparency));
    color: var(--state-purple);
    font-family: var(--main-title-font);
}

.greyBackgroundTransparency{
    background-color: rgba(201, 203, 207, var(--transparency));
    color: var(--state-grey);
    font-family: var(--main-title-font);
}

.orangeBackgroundTransparency{
    background-color: rgba(253, 159, 79, var(--transparency));
    color: var(--state-orange);
    font-family: var(--main-title-font);
}



.eleganciaSkin, a.eleganciaSkin:visited{
    color: var(--elegancia-skin);
}

.eleganciaRed, a.eleganciaRed:visited{
    color: var(--elegancia-red);
}

.eleganciaYellow, a.eleganciaYellow:visited{
    color: var(--elegancia-yellow);
}

.eleganciaGreen, a.eleganciaGreen:visited{
    color: var(--elegancia-green);
}

.eleganciaBlue, a.eleganciaBlue:visited{
    color: var(--elegancia-blue);
}

.eleganciaOrange, a.eleganciaOrange:visited{
    color: var(--elegancia-orange);
}

.eleganciaPurple, a.eleganciaPurple:visited{
    color: var(--elegancia-purple);
}

.eleganciaGold, a.eleganciaGold:visited{
    color: var(--elegancia-gold);
}



.infoFont{
    font-family: var(--main-info-font);
}

.infoFontItalic{
    font-family : var(--main-info-font);
    font-style  : italic;
}

.asLabel{
    color: var(--main-th-color);
}



.thColor{
    color: var(--main-th-color);
}

.donutChart{
    width           : var(--donutSize);
    aspect-ratio    : 1;
    position        : relative;
    display         : inline-grid;
    place-content   : center;
    font-size       : 25px;
    font-weight     : bold;
    font-family     : var(--main-title-font);
}

.donutChart:before{
    content         : "";
    position        : absolute;
    border-radius   : 50%;
    inset           : 0;
    border          : var(--main-border-width) solid var(--state-grey);
    background      : conic-gradient(var(--donutColor) calc(var(--donutPercent)*1%),#0000 0);
    -webkit-mask    : radial-gradient(farthest-side,#0000 calc(99% - var(--donutWeight)),#000 calc(100% - var(--donutWeight)));
            mask    : radial-gradient(farthest-side,#0000 calc(99% - var(--donutWeight)),#000 calc(100% - var(--donutWeight)));
}

.donutChart.duoDonut:before{
    content         : "";
    position        : absolute;
    border-radius   : 50%;
    inset           : 0;
    border          : var(--main-border-width) solid var(--state-grey);
    background      : conic-gradient(
        var(--state-orange) calc(var(--value1)*1%), 
        var(--state-green) calc(var(--value1)*1%) calc(var(--value1)*1% + var(--value2)*1%),
        #0000 0
    );
    -webkit-mask    : radial-gradient(farthest-side,#0000 calc(99% - var(--donutWeight)),#000 calc(100% - var(--donutWeight)));
            mask    : radial-gradient(farthest-side,#0000 calc(99% - var(--donutWeight)),#000 calc(100% - var(--donutWeight)));
} 

.donutChart.trioDonut:before{
    content         : "";
    position        : absolute;
    border-radius   : 50%;
    inset           : 0;
    border          : var(--main-border-width) solid var(--state-grey);
    background      : conic-gradient(
        var(--state-orange) calc(var(--value1)*1%), 
        var(--state-green) calc(var(--value1)*1%) calc(var(--value1)*1% + var(--value2)*1%), 
        #eeeeee calc(var(--value1)*1% + var(--value2)*1%) calc(var(--value1)*1% + var(--value2)*1% + var(--value3)*1%),
        #0000 0
    );
    -webkit-mask    : radial-gradient(farthest-side,#0000 calc(99% - var(--donutWeight)),#000 calc(100% - var(--donutWeight)));
            mask    : radial-gradient(farthest-side,#0000 calc(99% - var(--donutWeight)),#000 calc(100% - var(--donutWeight)));
}   

.titleFont{
    font-family: var(--main-title-font);
}

.mySkillsDonutFontWeight{
    font-weight: 100;
}

.donutLabel{
    padding: 0px 5px;
}

.mediumIconButton{
    font-size: 15px;
}

.bigIconButton{
    font-size: 30px;
}

.forceShow{
    display: inherit !important;
}

/*.donutChart:before {
background:
    radial-gradient(farthest-side,var(--donutColor) 98%,#0000) top/var(--donutWeight) var(--donutWeight) no-repeat,
    conic-gradient(var(--donutColor) calc(var(--donutPercent)*1%),#0000 0);
}

.donutChart:after {
content: "";
position: absolute;
border-radius: 50%;
inset: calc(50% - var(--donutWeight)/2);
background: var(--donutColor);
transform: rotate(calc(var(--donutPercent)*3.6deg)) translateY(calc(50% - var(--donutSize)/2));
}*/











/* DATE TIME INPUT */

.ui-datepicker {
    padding: .5em .5em;
}

.ui-widget {
    font-size: 14px;
}

.ui-widget.ui-widget-content {
    border: var(--main-border-width) solid var(--main-bt-color);
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br,
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl,
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr,
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{
    border-radius: 0px;
}

.ui-widget-content {
    border      : none;
    background  : var(--secondary-bg-color);
    color       : var(--main-font-color);
}

.ui-widget {
    font-family: var(--main-font-family);
}

.ui-widget-header {
    border          : 0px;
    border-bottom   : var(--main-border-width) solid var(--main-border-color);
    background      : none;
    color           : var(--main-font-color);
    font-weight     : bold;
}

.ui-widget-header a {
    color       : var(--main-bt-color);
    text-align  : center;
    padding-top : 5px;
}

.ui-widget-header .ui-icon{
    background: none;
}

.ui-icon,
.ui-datepicker .ui-icon{
    text-indent: initial;
}

.ui-datepicker .ui-datepicker-prev span.ui-icon-circle-triangle-w,
.ui-datepicker .ui-datepicker-next span.ui-icon-circle-triangle-e{
    display: none;
}

.ui-datepicker .ui-datepicker-prev:before {
    font-family : Arial, Helvetica, sans-serif;
    content     : '\2B60';
}

.ui-datepicker .ui-datepicker-next:before {
    font-family : Arial, Helvetica, sans-serif;
    content     : '\2B62';
}

.ui_tpicker_time{
    font-weight : 700;
    text-align  : right;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border      : none;
    background  : var(--main-bg-color);
    font-weight : bold;
    color       : var(--main-font-color);
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border      : none;
    background  : var(--main-table-hover);
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border      : none;
    background  : var(--main-bg-color);
    font-weight : bold;
    color       : var(--main-bt-color);
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, a.ui-button:hover, .ui-button:hover, .ui-button.ui-state-hover:hover {
    background  : var(--main-table-hover);
    color       : var(--main-bt-color);
}

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
    opacity: 1;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    font-family     : var(--main-font-family);
    font-size       : 10px;
    padding         : 5px 15px;
    text-transform  : uppercase;
    background      : none;
    color           : var(--main-bt-color);
    border          : var(--main-border-width) solid var(--main-bt-color);
    font-weight     : 100;
}

.ui-datepicker-buttonpane .ui-widget-content .ui-state-hover, .ui-datepicker-buttonpane .ui-state-hover:hover {
    background  : var(--main-bt-color);
    color       : var(--main-bt-color-hv);
}

.ui-state-hover.ui-datepicker-next-hover,
.ui-state-hover.ui-datepicker-prev-hover{
    text-align  : center;
    padding-top : 5px;
    border      : none;
    cursor      : pointer;
    background  : none;
}

.itemRating{
    background-image: url(../images/ratingStars.png);
}

.itemRatingMini{
    background-image: url(../images/ratingStarsMini.png);
}




.multiSelectorButton{
    width                : 50px;
    height               : 50px;
    border-radius        : 25px;
    margin-left          : 13px;
    /*margin-top           : 165px;*/
    color                : var(--secondary-bg-color);
    text-align           : center;
    position             : fixed;
    z-index              : 800;
    background-color     : var(--main-bt-color);
    display              : grid;
    grid-template-columns: 1fr;
    padding              : 0px;
    top                  : 50%;
    box-shadow           : 3px 3px 6px rgba(0,0,0,0.16);
}

.multiSelectorButton:hover{
    opacity: 1;
}

.multiSelectorButton a,
.multiSelectorButton a:visited{
    color: var(--secondary-bg-color);
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

.toolContainer{
    margin-top: 30px;
    padding: 0px 20px;
}
.absoluteButton{
    position: absolute;
    top: 5px;
    left: 5px;
}