@font-face {
	font-family: "Marianne-light";
	src: url('/assets/fonts/Marianne-Light.woff')
}
@font-face {
	font-family: "Marianne-regular";
	src: url('/assets/fonts/Marianne-Regular.woff')
}
@font-face {
	font-family: "Marianne-medium";
	src: url('/assets/fonts/Marianne-Medium.woff')
}

.FGPrimary  { color: #1E1E1E }
.FGSecondary { color: #172b4d }
.FGPurple   { color: #5e72e4; }
.FGOrange   { color: #fb6340; }
.FGBlueLight { color: #11cdef; }
.FGPink     { color: #f3a4b5; }
.FGGray     { color: #55637b; }
.FGGrayLight{ color: #a8acb2; }
.FGSilver   { color: silver; }
.FGGreen    { color: #2dce89; }
.FGRed      { color: #f5365c; }
.FGGold     { color: #f3d741 }
.FGWhite    { color: white; }
.FGBlack    { color: black; }
.BGPrimary      { background-color: #11cdef; }
.BGSecondary    { background-color: #172b4d; }
.BGBlueLight    { background-color: #11cdef; }
.BGPurple       { background-color: #5e72e4; }
.BGOrange       { background-color: #fb6340; }
.BGGreen        { background-color: #2dce89; }
.BGRed          { background-color: #f5365c; }
.BGRedHover:hover  { background-color: #e53256; }
.BGRedDark      { background-color: #c0392b !important; }
.BGPink         { background-color: #f3a4b5; }
.BGWhite        { background-color: white;   }
.BGGrayLight    { background-color: #f9f9f9 !important; } /* #0D1F2D */
.BGGray         { background-color: gray;    }
.BGGold         { background-color: #f3d741; }

.GradientPurple { background: linear-gradient(87deg, #5e72e4, #825ee4) }
.GradientOrange { background: linear-gradient(87deg, #fb6340, #fbb140) }
.GradientGreen  { background: linear-gradient(87deg, #2dce89, #2dcecc) }
.GradientGreenHover:hover  { background: linear-gradient(87deg, #28b97a, #2bc5c2) }
.GradientRed    { background: linear-gradient(87deg, #f5365c, #f56036) }
.GradientPink   { background: linear-gradient(87deg, #e55070, #f3a4b5) }

.FILLPrimary { fill: #11cdef; }
.FILLSecondary { fill: #172b4d; }

.BGHover:hover   { opacity: 0.8; }
.pointer         { cursor: pointer; }
.noDecoration    { text-decoration: none !important; }
.noPointer       { cursor: default; }
.noBorder        { border: 0px solid white !important; }
.br              { white-space: pre-line; } /* Replace \n by <br */
.lineThrough     { text-decoration: line-through;  }
.radiusTop5      { border-radius: 5px  5px  0   0; }
.radiusTopLeft5  { border-radius: 5px   0   0   0; }
.radiusTopRight5 { border-radius: 0     5px 0   0; }
.radiusTop10     { border-radius: 10px 10px 0   0; }

.blink1-5
{
    animation: blink 1.5s;
    animation-iteration-count: infinite;
}
.blink1-3
{
    animation: blink 1.3s;
    animation-iteration-count: infinite;
}
@keyframes blink { 50% { opacity: 0; }  }

body
{
    padding: 0px;
    margin: 0px;
}

#app
{
    margin: 0px;
    background: white;
    font-family: 'Marianne-regular'; 
    font-weight: 500;
    font-size: 17px;
}

h1
{
    line-height: 48px;
    font-family: 'Marianne-medium';
    letter-spacing: -1px;
}
h2
{
    letter-spacing: -1px;   
}

#pageLeft
{
    width: 250px;
    position: fixed;
}

#pageMain
{
    #margin-left: 250px;
    margin-left: 80px;
}
.pageMainWidth
{
    #width: calc(100% - 250px);
    width: calc(100% - 160px);
}
#pageMainContent
{
    height: calc(100% - 75px);
    max-width: 1920px;
    margin: auto;
    margin-top: 90px;
    overflow: auto;
}

.blockElement
{
    padding: 15px;
}
.block
{
    background-color: white;
    color: rgba(0, 0, 0, .8);
    min-width: 100px;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
    transition-duration: 0.3s;
}
.blockHover:hover
{
    box-shadow: 0 15px 2rem 0 rgba(136,152,170, 0.35);
    cursor: pointer;
}
.blockTitle
{
    height: 55px;
    line-height: 55px;
    border-bottom: 1px solid #e2e2e2;
    font-weight: 500;
    margin-bottom: 15px;
    margin-top: -15px;
    font-size: 19px;
}
.blocSubTitle
{
    color: silver;
    text-transform: uppercase;
    font-size: 15px;
    margin-bottom: 15px;
}
.blockComment
{
    font-size: 14px;
    font-style: italic;
    color: white;
    background-color: #11cdef;
    padding: 5px;
    border-radius: 5px;
}
.blockComment i
{
    height: 18px;
    width: 18px;
    line-height: 18px;
    text-align: center;
}

.inputBlock
{
    height: 40px;
    margin-bottom: 15px;
}
.inputBlock i
{
    height: 40px;
    line-height: 40px;
    width: 34px;
    border: 1px solid silver;
    border-right: 0px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: block;
    float: left;
}
.inputBlock span
{
    height: 40px;
    line-height: 40px;
    border: 1px solid silver;
    border-right: 0px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: block;
    float: left;
}
.inputBlock input, .inputBlock select, .inputBlock textarea
{
    height: 40px;
    width: calc(100% - 35px);
    border: 1px solid silver;
    border-left: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: gray;
    display: block;
    padding-left: 5px;
    float: left;
}
.inputBlock input:focus
{
    outline: none;
}
.inputTitle
{
    color: gray;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.inputTable
{
    display: block;
}
.inputTable thead
{
    display: block;
    border-top: 1px solid #ebeaea;
    border-bottom: 1px solid #ebeaea;
    color: #525f7f;
    background-color: #f6f9fc;
    height: 40px;
    padding-left: 15px;
}
.inputTable tbody tr
{
    border-bottom: 1px solid #ebeaea;
    color: #525f7f;
    min-height: 50px;
    line-height: 50px;
    padding-left: 15px;
}

.blockStats
{
    min-height: 115px;
    height: fit-content;
}
.blockStats .title
{
    font-size: 14px;
}
.blockStats .value
{
    font-size: 22px;
    color: black;
}
.blockStats i
{
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: 105px;
    text-align: center;
    color: white;
    font-size: 25px;
}

.projectBackground
{
    #background-image: url(https://images.unsplash.com/photo-1549317143-32f46e4ac78e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1491&q=80);
    background-size: cover;
    background-position:  bottom;
    background-color: rgba(235, 235, 235, 0.87);
    height: 300px;
    border-radius: 8px;
}