*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

/* Declaring global variables -------------------------------------------------------------------------------*/
:root {
    --bgcolor: #ececec;
    --lightgray: lightgray ; /* d9d9d9; */
    --green: green;
    --white: white;
    --darkblue: darkblue;
    --darkgray: darkgray;
    
    --fonts2: Georgia, sans-serif, Verdana, Tahoma;
}

/* The above are important for reset ----------------------------------------------------------------------- */

html, body
{
    height: 95%;
    background-color: var(--bgcolor); 
    color: #424949 ;
    font-family: Arial;
    font-size: 16px;
}

/* Sandard codes for quick referencing --------------------------------------------------------------------- */
.font-white { color: white; }
.font-black { color: black; }
.font-yellow { color: yellow; }
.font-brown { color: brown; }

.bg-red { background-color: red; }
.bg-white { background-color: white; }
.bg-black { background-color: black; }
.bg-orange { background-color: orange; }
.bg-green { background-color: green; }
.bg-purple { background-color: purple; }
.bg-cyan { background-color: cyan; }
.bg-yellow { background-color: yellow; }
.bg-darkred { background-color: #981e20; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.padding-20px { padding:20px }

.padding-left-20prct { padding-left: 20%; }
.padding-top-60prct { padding-top: 60%; }

.padding-vertical-10px { padding: 10px 0; }

.padding-top-90px {padding: 90px 15px; }
.padding-bottom-20px {padding-bottom: 20px; }

.center-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}

.center-hor-div {
    margin-left: auto;
    margin-right: auto;
}

.align-bottom-div {
    margin-top: auto;   /* needs flex */
}

/* Common to many pages ----------------------------------------------------------------------- */

.topbar {
    width: 100%;
    display: inline-flex;
    justify-content: space-evenly;
    /*display: flex;
    flex-wrap: wrap;*/
    min-height: 50px;
    background-color: #214874;
    line-height: 50px;
    overflow: hidden;
}

.navbar {
    width: 100%;
    min-height: 40px;
    background-color: #042d59; /* darkgray; */
    color: white;
    text-align: center;
    line-height: 40px;
    overflow: hidden;
}

.bar-frame {
    width: 100%;
    /*display: flex;
    flex-wrap: wrap;
    justify-content: center; */
    display: inline-flex;
    justify-content: space-evenly;
    overflow: hidden;
}