/*
 * Copyright 2019 Cyrille Hantz.
 * Author: Cyrille Hantz.
 * 
 * All Rights Reserved.
 * PROHIBITED on resale.
 * NO warranty.
 */

/*Generic*/
* {
    box-sizing: border-box;
    margin:0px;
    padding:0px;
    font-family: 'Roboto', sans-serif;
    font-size: 100%;
    max-height: 999999px; /*limit the stupid android font-size boost*/
}
html {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}
table {
    border-spacing: 0px;
}
.center {
    text-align: center;
    margin: auto;
}
.left {
    text-align: left;
    margin: auto;
}
.right {
    text-align: right;
    margin: auto;
}
.top {
    vertical-align: top;
    margin: auto;
}
.middle {
    vertical-align: middle;
    margin: auto;
}
.bottom {
    vertical-align: bottom;
    margin: auto;
}
.topcenter {
    text-align: center;
    vertical-align: top;
    margin: auto;
}
.topleft {
    text-align: left;
    vertical-align: top;
    margin: auto;
}
.topright {
    text-align: right;
    vertical-align: top;
    margin: auto;
}
.middlecenter {
    text-align: center;
    vertical-align: middle;
    margin: auto;
}
.middleleft {
    text-align: left;
    vertical-align: middle;
    margin: auto;
}
.middleright {
    text-align: right;
    vertical-align: middle;
    margin: auto;
}
.bottomcenter {
    text-align: center;
    vertical-align: bottom;
    margin: auto;
}
.bottomleft {
    text-align: left;
    vertical-align: bottom;
    margin: auto;
}
.bottomright {
    text-align: right;
    vertical-align: bottom;
    margin: auto;
}
.expand {
    width: 100%;
}
.vmargin
{
    margin: 10px 0px;
}
.error {
    color: #FF0000;
    font-weight: bold;
    /*width: 100%;*/
    text-align: left;
}
.explains 
{
    line-height: 160%;
    white-space: pre-line;
}
.noPadding {
    padding: 0px;
}
h1 {
    font-size: 175%;
    font-weight: normal;
}
h2 {
    font-size: 150%;
    font-weight: normal;
}
p, .para {
    font-size: 100%;
    font-weight: normal;
    padding:10px;
}
h1, h2 {
    padding:10px;
}
ul > li {
    margin: 5px 30px;
}
ul > ul > li {
    margin: 5px 50px;
}
a {
    color: var(--textcolor-headfoot);
    text-decoration: none;
    padding: 10px;
}
a:hover, a:active {
    color: var(--textcolor-headfoot);
    text-decoration: underline;
}
main a, main a:hover, main a:active  {
    color: var(--textcolor-dark);
}

/*Main blocks*/
body {
    background-color: var(--backcolor-main);
    min-height: 100%;
}
header {
    color: var(--textcolor-headfoot);
    background-color: var(--backcolor-headfoot);
    text-align:center;
    /*height: 150px;*/
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
footer {
    padding:10px;
    color: var(--textcolor-headfoot);
    background-color: var(--backcolor-headfoot);
    text-align:center;
    /*height: 100px;*/
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
main {
    color: var(--textcolor-dark);
    margin:20px;
    padding: 100px 0px;
}

/*Header and footer*/
.tblNav {
    border-collapse: collapse;
    width: 100%;
}
.tdNav
{
    /*background-color: var(--backcolor-none);*/
}
.navIconSubmitImg {
    height: 80px;
    padding: 10px;
    opacity: 1;
}
.navIconSubmit {
    height: 94px;
    padding: 7px;
    border-radius: 50px;
    background-color: transparent;
}
.navIconSubmitSel {
    height: 94px;
    padding: 7px;
    border-radius: 50px;
    background-color: var(--navcolor-select);
    opacity: 1;
}
.logo {
    height: 100px;
    opacity: 1;
}
.logo:hover, .navIconSubmitImg:hover, .navIconSubmitSel:hover
{
    opacity: 0.8;
}

/* Tables and containers */
.contentFlexRow {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin: auto;
}
.contentFlexElt {
    flex: 1 0 auto;
}
main table {
    margin: auto;
}
.tblForm {
    border: var(--border-form);
    background-color: var(--backcolor-form);
    border-radius: 5px;
    border-collapse: separate; /*enable to have rounded radius*/
    width: 800px;
}
.tblCard {
    border: var(--border-form);
    background-color: var(--backcolor-form);
    border-radius: 5px;
    border-collapse: separate; /*enable to have rounded radius*/
    padding: 10px;
    width: 500px;
}
.tblButtons {
    border: var(--border-form);
    background-color: var(--backcolor-form);
    border-radius: 5px;
    border-collapse: separate; /*enable to have rounded radius*/
    padding: 10px;
}
.tblList {
    width: 100%;
    border-collapse: collapse;
}
.tblParagraph {
    float: left;
    border-collapse: collapse;
}
.tblMessage
{
    border: var(--border-form);
    background-color: var(--backcolor-form);
    border-radius: 5px;
    border-collapse: separate; /*enable to have rounded radius*/
    border-spacing: 0px;
    width: 100%;
}
.tblList .trData {
    background-color: transparent;
}
.tblList .trData:hover
{
    background-color: var(--backcolor-light);
}
.trTitle {
    
}
.trSearch {
    background-color: var(--backcolor-light);
}
th {
    padding: 5px 0px;
    font-weight: normal;
}
th > div, .tdTitle {
    padding: 10px;
    font-size: 150%;
}
.tblForm td {
    padding: 5px 10px;
    vertical-align: top;
}
.tblCard td {
    padding: 5px;
    /*vertical-align: middle;*/
}
.tblList td, .tblParagraph td {
    padding: 5px 10px;
    vertical-align: middle;
}
.tdName {
    text-align: right;
    font-style: italic;
    width: 30%;
}
.tdValue {
    overflow-wrap: anywhere; /*break-word*/
    text-align: left;
}
.tblList .tdValue {
    padding: 10px 0px;
}
.tdOrderBy {
    border-radius: 5px;
    background-color: transparent;
    text-align: left;
}
.tdOrderBy:hover {
    background-color: var(--backcolor-light);
    text-align: left;
}
.lblOrderBy {
    color: var(--textcolor-light);
    text-align: left;
    font-size: 150%;
    font-weight: normal;
}
.tblCard a, .tblList a {
    padding: 0px;
}

/* Inputs */
.txtInput {
    border: var(--border-input);
    background-color: var(--backcolor-input);
    border-radius: 5px;
    padding: 10px;
    width: 100%;
}
.btnSubmit {
    background-image: none;
    background-color: var(--backcolor-dark);
    color: var(--textcolor-backisdark);
    border: none;
    border-radius: 500px; /* = height / 2 */
    padding: 10px;
    width: 100%;
    opacity: 1;
}
.btnSubmitSec {
    background-image: none;
    background-color: var(--backcolor-none);
    color: var(--backcolor-dark);
    border: var(--backcolor-dark) 3px solid;
    border-radius: 500px; /* = height / 2 */
    margin: 3px;
    padding: 7px;
    width: 100%;
    opacity: 1;
}
.btnAdd {
    background-image: none;
    background-color: var(--backcolor-none);
    color: var(--backcolor-dark);
    border: none;
    border-radius: 500px; /* = height / 2 */
    height: 40px;
    /*width: 100%;*/
    padding: 0px;
    margin: 0px 10px;
    display: flex;
    flex-flow: row;
    align-content: flex-start;
    justify-content: flex-start;
    opacity: 1;
}
.iconSubmit {
    width: 40px;
    height: 40px;
    opacity: 1;
/*    border-radius: 25px;*/
}
.iconSubmitHome {
    width: 70px;
    height: 70px;
    padding: 10px;
    opacity: 1;
    /*border-radius: 35px;*/
}
.btnSubmit:hover, .btnSubmitSec:hover, .btnAdd:hover, .iconSubmit:hover, .iconSubmitHome:hover {
    opacity: 0.8;
}
.lstSelect {
    width: 100%;
    border: var(--border-input);
    background-color: var(--backcolor-input);
    border-radius: 5px;
    padding: 10px;
}
.searchTxt {
    width: 100%;
    border: var(--border-input);
    background-color: var(--backcolor-input);
    border-radius: 5px;
    padding: 10px;
}

/*Others*/
.line
{
    border: var(--backcolor-main) 1px solid;
    width: 100%;
    margin: 10px 0px;
}
.profileButton
{
    padding: 5px 10px;
}
.forgetPassword {
    text-align: center;
    vertical-align: middle;
    margin: auto;
    color: var(--backcolor-dark);
    text-decoration: none;
    padding: 10px 0px;
}
.forgetPassword:hover, .forgetPassword:active {
    color: var(--backcolor-dark);
    text-decoration: underline;
}

.g-recaptcha, .g-recaptcha *
{
    box-sizing: content-box;
}
.td-recaptcha
{
    padding: 0px 0px 20px;
}
.fb-login-button, .g-signin2
{
    padding: 10px 0px;
    margin: 0 auto;
    width: 100%;
}
.fb-login-button > div, .g-signin2 > div
{
    margin: 0 auto;
}
.fb-login-button *, .g-signin2 *
{
    box-sizing: content-box;
}