:root
{
    --bg-clr:#fff;
    --txt-clr:#333;
    --bdr-clr:#ccc;
    
    --accent-clr:#086e92;

    --alert-txt-clr:#fff;
    --alert-bg-clr:#c0392b;
    --alert-bdr-clr:#8d241a;
    
    --shadow-small: 0 5px 5px 0px rgba(0,0,0,0.125);
    --shadow-large: 5px 5px 10px 0px rgba(0,0,0,0.125);
    --shadow-xl: 10px 10px 15px 0px rgba(0,0,0,0.25);
}

/*login*/

html, body,form {    width: 100%;    height: 100%;    min-height:100%; }
body{ padding: 0;      margin: 0;      background-color:var(--bg-clr);      color:var(--txt-color);      font-family: 'Rajdhani', sans-serif;}

.navbar{margin-bottom:0;min-height:unset !important;  margin-bottom:0;  border-radius:0;padding:0 1rem !important;}
.navbar img{width:6rem;height:auto;margin:-1rem 0 0 0;}
.navbar .form-group{padding-top: .75rem;}

article {display: flex;  align-items: center;    justify-content: center;    flex-grow: 1;}

header, article, footer {    flex-shrink: 0;}

a{color:var(--txt-clr);text-decoration:none;}
a:hover{color:var(--txt-clr);text-decoration:none;}

header {padding:0;width:100%; }
header img{ float:left; margin:1rem 2rem; height:auto;width:5rem;}
header select{max-width:10rem; float:right; margin:1rem 2rem; display:block;}

article{display:flex;align-content:center;justify-content:center;}
article .article-row{max-width:96%;width:24rem;}

table{width:100%;  padding: 0;background-color:var(--bg-clr);border:1px solid var(--bdr-clr);}
tbody,tr,td{display:block;padding: 1rem;}
.login-form {  clear:both;}
.login-form  .login-form-text{color:var(--txt-clr);margin:1rem 0 2rem 0;display:none;}
.login-form label{display:inline-block;padding:0;font-weight:100;margin:0 0 0.5rem 0;float:left}

.validation-msg {background-color:var(--alert-bg-clr);
                color:var(--alert-txt-clr);
                font-size:0.85rem;
                padding:0.25rem 0.5rem;
                border:solid 1px var(--alert-bdr-clr);
                margin-bottom:0.25rem;
                border-radius:0.25rem;
}

.form-group{margin:0 0 2rem 0;font-size: 1.15rem;}

.login-text-control{
                    border: solid 1px var(--txt-clr);
                    background-color: var(--bg-clr); 
                    color: var(--txt-clr);
                    padding:0.25rem 0.5rem;                    
                    margin:0 0 0 0;
                    font-size:1.25rem;
                    width:100%;
}

.btn-login{width:100%;margin-bottom:1em;padding:0.85rem;background-color:var(--txt-clr);border: #000 0 solid;color:var(--bg-clr);border-radius:0.25rem;font-size:1.25rem;}
.btn-login:hover{      cursor:pointer  ;}


main {position:relative;    min-height: 100%;	height:100vh;	position:relative;	display: grid;  justify-content: center;
  align-content: center;
 
  font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
  text-align: center;
  /* img size is 50x50 */
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
  -webkit-animation: bg-scrolling-reverse 0.92s infinite;
  /* Safari 4+ */
  -moz-animation: bg-scrolling-reverse 0.92s infinite;
  /* Fx 5+ */
  -o-animation: bg-scrolling-reverse 0.92s infinite;
  /* Opera 12+ */
  animation: bg-scrolling-reverse 0.92s infinite;
  /* IE 10+ */
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}



/* Cool infinite background scrolling animation.
 * Twitter: @kootoopas
 */
/* Exo thin font from Google. */
@import url(https://fonts.googleapis.com/css?family=Exo:100);
/* Background data (Original source: https://subtlepatterns.com/grid-me/) */
/* Animations */
@-webkit-keyframes bg-scrolling-reverse {
  100% {
	background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling-reverse {
  100% {
	background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling-reverse {
  100% {
	background-position: 50px 50px;
  }
}
@keyframes bg-scrolling-reverse {
  100% {
	background-position: 50px 50px;
  }
}
@-webkit-keyframes bg-scrolling {
  0% {
	background-position: 50px 50px;
  }
}
@-moz-keyframes bg-scrolling {
  0% {
	background-position: 50px 50px;
  }
}
@-o-keyframes bg-scrolling {
  0% {
	background-position: 50px 50px;
  }
}
@keyframes bg-scrolling {
  0% {
	background-position: 50px 50px;
  }
}

 






@media screen and (max-width:320px) {
    html{font-size: 10px;}
}

@media screen and (min-width: 320px) and (max-width:480px) {
    html {font-size: 11px;}

        
}

@media screen and (min-width: 480px) and (max-width:768px) {
    html {font-size: 12px;}

}

@media screen and  (min-width: 768px) and (max-width:1024px)
{  
        html{font-size: 13px;}

}

@media screen and (min-width: 1024px) and (max-width:1200px)
{  
        html {font-size: 14px;}

}

@media screen and (min-width: 1200px) and (max-width:1920px)
{  
 html {font-size: 15px;}

}

@media screen and (min-width: 1920px) 
{  
    html {font-size: 15px;}
}