/*
*  login_style.css
*
*  Copyright (c) 2023 Gabe Scott
*/

/* Global styles
------------------------------------*/
html {
    box-sizing: border-box;

    /* Page sizing trick - sourced from https://dev.to/fenok/stretching-body-to-full-viewport-height-the-missing-way-2ghd#:~:text=Sure!,grow%20even%20more%20if%20necessary. */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    /* END OF PAGE SIZING TRICK */
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    /* FINAL PART OF PAGE SIZING TRICK */
    flex-grow: 1;
    /* END OF PAGE SIZING TRICK */
    font-family: Helvetica, sans-serif, Arial;
    margin: 0;
    padding: 0;
    height: 100vh;
}
main {
    min-height: 100%;
    margin-bottom: -130px;
}
main:after {
    content: "";
    display: block;
    height: 130px;
}
.container {
    display: flex;
    flex-direction: column;
}
div#successmsg {
    height: 17px;
    margin-bottom: 33px;
    margin-top: 5px;
}
p.invalid-text {
    margin: 0 auto;
}
input:focus {
    outline: 1px solid black; 
}

input:focus {
    outline: 1px solid black; 
}

input:active {
    opacity: .8;
}
div.table-div {
    padding: 0 10px 0 10px;
    margin: 0;
    max-width: calc(338px + 28px + 28px);
    overflow: none; /* TODO: probably remove this */
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
}
table.login-table {
    table-layout:fixed;
    width:100%;
	border: #95bee6 1px solid;
	background: #d1e8ff;
	border-radius: 4px;
    width: 100%;
    padding: 28px 28px 19px;
    margin: 33px auto 25px;
}
.table-header {
	font-size: 24px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
}
label.table-header {
    cursor: pointer;
}
h1.table-header {
    margin-top: 32px;
}
label {
    width: 100%;
}
.table-row td {
	text-align: center;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.message {
	color: #FF0000;
	font-weight: bold;
	text-align: center;
	width: 100%;
}

.login-input {
    width: 100%;
    border: #676767 0.7px solid;
    padding: 10px 20px;
    border-radius: 3px;
}
/*
.btnSubmit {
	background: #2c7ac5;
	border: #d1e8ff 1px solid;
	color: #FFF;
    width: 100%;
}
*/
/*
h3 {
    color: #2ab37e;
}
*/
/*
.logout {
    margin-right: 0;
    margin-left: auto;
}
*/
#post-btn {
    background: #2c7ac5;
	border: #d1e8ff 1px solid;
	color: #FFF;
    width: 100%;
    height: 44.5px;
    font-size: 20px;
    margin-top: auto;
    margin-top: auto;
    border-radius: 5px;
    cursor: pointer;
}
#post-btn:hover {
    font-size: 21px;
    background-color: #3D7EEB;
    transition: 0.2s;
}
/*
div.demo {
	border: #2ab37e 1px solid;
	background: #d0d2a7;
	border-radius: 4px;
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 11px;
    padding-bottom: 19px;
    padding-right: 11px;
    padding-left: 11px;
}
.demo {
	font-size: 15px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 24px;
}
*/
a.text-btn {
    color: #F7F7F7;
    background-color: #3D7EEB;
    font-family: Arial;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 0px 2px 5px 0px #3d3c3cd3;
    display: block;
    width: 240px;
    height: 70px;
    font-size: 26px;
    padding-top: calc((70px/2) - (26px)/2); /*half of height minus half of font-size */
    margin: 30px auto 30px auto;
    text-align: center;
}
a.text-btn:focus {
    outline: 1px solid black; 
}

a.text-btn:hover {
    font-size: 27px;
    background-color: #3d7debec;
    padding-top: calc((70px/2) - (28px/2));
    transition: .2s;
}

/** Footer 
**---------------------------------------------------------- */

footer {
    display: block;
    height: 130px;
    
}
div.footer-container {
    width: 100%;
    height: 100%; 
    /* background-color: #f1f1f180; */
}
div.copyright-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0px auto;
}
.copyright-info>div {
    margin-right: 5px;
    margin-top: 3px;
    flex: 0 0 auto;
}
.copyright-info div:last-child {
    flex: 0 0 auto;
    color: #0e263c4a;
}
.contact-list {
    list-style-type: none;
    padding: 15px 0 0 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;    /* like right justified paper */
    align-items: center;        /* opposite axis */   
    gap: 4px;
}
.contact-list li {
    flex: 0 0 auto;
}
ul.contact-list svg:hover {
    /* fill:rgba(173, 192, 203, .8); */
    fill: rgb(15, 117, 219);
}
.contact-list a:focus, .contact-list svg:focus {
    /* outline: 0.8px dashed #d1cdcd; */
    outline: none;
}
li.go-home>a {
    margin-right: -3px;
}
svg {
    fill: rgba(173, 192, 203, .8);
}
svg.icon-svg {
    height: 30px;
    width: auto;
    margin-left: 5px;
    margin-right: 5px;
}
svg.home-svg {
    height: 26px;
    width: auto;
    margin-bottom: 3px;
}
.copyright-svg {
    height: 13px;
}
p.copyright-p {
    font-size: 11px;
}
svg.copyright-svg {
    height: 13px;
}


/** Media Queries
**---------------------------------------------------------- */

@media screen and (max-width: 310px) {
    label.table-header {
        font-size: 20px;
    }
}

@media screen and (max-width: 240px) {
    a.text-btn {
        width: 93%;
    }
    h1.table-header {
        width: 97%;
    }
}

@media screen and (max-width: 161px) {
    a.text-btn {
        height: auto;
        padding-bottom: 22px;
    }
}