:root {
	--main-color-blue: rgb(25, 110, 255);
	--main-color-green: rgb(135, 181, 45);
	--main-color-yellow: rgb(212, 214, 59);
	--main-color-teal: rgb(84, 187, 176);
	--main-color-red: rgb(64, 126, 201);
    --darkest-blue: rgb(0, 82, 133);
	--darkest-grey: rgb(88, 89, 91);
	--middle-grey: rgb(147, 149, 152);
	--lightest-grey: rgb(209, 211, 212);
	--primary-light-hsl: 200, 100%, 91%;
	--primary-hsl: 200, 100%, 50%;
	--primary-dark-hsl: 200, 100%, 6%;
}

html {
    margin: 0;
    padding: 0;
}


body {
    min-height: 100vh;
    position: relative;
    padding-bottom: 12rem;
    font-family: 'Roboto';
    background-color: #FFFFFF;
    font-size: 1rem;
    line-height: 150%;
    color: #171717;
    font-weight: 400;
}

/*Fonts*/
@font-face {
    font-family: 'Roboto';
    src: url(../ext/font-roboto-1.0.0/Roboto-Regular.woff2) format('woff2'),
         url(../ext/font-roboto-1.0.0/Roboto-Regular.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url(../ext/font-roboto-1.0.0/Roboto-Regular.woff2) format('woff2'),
         url(../ext/font-roboto-1.0.0/Roboto-Regular.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url(../ext/font-roboto-1.0.0/Roboto-Regular.woff2) format('woff2'),
         url(../ext/font-roboto-1.0.0/Roboto-Regular.woff) format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url(../ext/font-roboto-1.0.0/Roboto-Regular.woff2) format('woff2'),
         url(../ext/font-roboto-1.0.0/Roboto-Regular.woff2) format('woff');
    font-weight: 100;
    font-style: normal;
}


/*Headings*/
h1 {
	font-size: 2rem;
	line-height: 1;
    color: var(--darkest-blue);
}

h2 {
	font-size: 1.625rem;
	line-height: 1.067;
    color: black;
}

h3 {
	font-size: 1.375rem;
	line-height: 1.083;
}

h4 {
	font-size: 1.125rem;
	line-height: 1.1;
}

h5 {
	font-size: 1rem;
	line-height: 1.111;
}

h6 {
	font-size: 0.75rem;
	line-height: 1.125;
}

p {
	font-size: 0.9rem;
}

a:link, a:visited, a:active {
    text-decoration: none;
}

.page-container {
	width: 80%;
	margin: 0 auto;
	padding-top: 1rem;
}

#main-div {
    margin: 0 auto;
}

/*Login*/

.login-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#login {
	overflow: hidden;
	border: 0 !important;
	border-radius: 20px !important;
	box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.img-left {
	width: 45%;
	background: url('../../assets/images/loginimg.jpg')center;
	background-size: cover;
}

.login-body {
	padding: 2rem;
}

.login-title {
	margin-bottom: 2rem;
}

.loginForm-input {
	position: relative;
}

.loginForm-input input {
	width: 100%;
	height: 45px;
	padding-left: 40px;
	margin-bottom: 20px;
	box-sizing: border-box;
	box-shadow: none;
	border: 1px solid #00000020;
	border-radius: 15px;
	outline: none;
	background: transparent;
}

.loginForm-input input:focus, .loginForm-input input:valid {
	border: 2px solid #007bff;
}

.loginForm-input input:focus::placeholder {
	color: #454b69;
}

#login-fail {
    position: relative;
    padding-left: 45px;
    box-sizing: border-box;
    border: none;
    outline: none;
}

.form-box button {
	margin-top: 10px;
	border: none;
	cursor: pointer;
	border-radius: 15px;
	background: var(--main-color-yellow);
	color: black;
	font-size: 90%;
	font-weight: 600;
	transition: 0.5s ease;
	padding: 12px;
	width: 100%;
}

.form-box button:hover {
	background: var(--main-color-green);
	transition: 0.5s ease;
}

/*Navs*/
.navbar.custom, .navbar-expand-lg {
    color: var(--darkest-blue);
    width: 100%;
}

.navbar-brand {
    background: transparent;
    color: var(--darkest-blue) !important;
    padding: 0.5rem 1rem;
}

#main-bar {
    margin-bottom: 2rem;
}

#main-bar .nav-link, #main-bar .text, #main-bar .nav-brand {
    color: #225F94;
}

#main-bar .nav-link:hover, 
#main-bar .text:hover, 
#main-bar .nav-brand:hover {
    color: var(--darkest-blue);
}

#main-bar .dropdown-menu {
    background-color: #fff;
    border: 0.5px solid var(--lightest-grey); 
}

#main-bar .dropdown-item {
    color: #171717;
}

#main-bar .dropdown-item:hover {
    background-color: var(--darkest-blue);
    color: #fff;
}

.navbar-toggler {
    border: none;
    background: transparent;
    color: var(--darkest-blue) !important;
}

.nav-link:focus, .nav-link:hover {
    color: var(--darkest-blue);
}

.dropdown-item:active, .dropdown-item:active {
    background-color: var(--darkest-blue);
    color: #fff; 
}

nav ul a, nav li a {
    color: var(--darkest-blue);
}

.navbar-one {
    background-color: var(--background-light); 
    height: 150px;
    margin: 0;
    top: 0;
    width: 100%;
    align-items: left;
    cursor: pointer;
}

#logo {
    display: inline-block:
}

#logo img {
    max-width: 100%;
    height: auto;
}

.logo {
    display: block;
    max-height: 80px;
    max-width: auto;
    margin-top: 25px;
    margin-left: 25px;
}

.nav-tabs .nav-link{
    font-family: 'Roboto';
    font-weight: 400;
}

.nav-tabs .nav-link:not(.active) {
    background-color: #fff;
}

.nav-tabs .nav-link:hover {
    background-color: var(--darkest-blue) !important;
    border-color: var(--darkest-blue)!important;
    color: #fff !important;
}
.nav-tabs .nav-link.active {
    color: var(--darkest-blue);
    background-color: #fff;
}

#tab-pill-1, #tab-pill-2 {
    padding: 10px 5px 15px 5px;
}

/* Modal Form */
.submit-fail-note {
	display: inline-block;
	color: rgb(163, 0, 0);
	border: 1px dashed rgb(163, 0, 0);
	border-radius: .25rem;
	padding: .375rem .75rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

.tooltip {
    z-index: 1050;
}

.modal {
    z-index: 1070;
}


/*Buttons*/
.btn-info, .btn-primary {
    margin: 0.1rem;
}


/*Cards*/
.card-container {
	margin-top: 8%;
	margin-left: 0 auto;
}

.card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-bottom-right-radius: 0px;
}

#c-img {
	width: 40%;
    padding-top: 5px;
}

#cr-card {
    flex-direction: row;
}

#cr-body {
    padding: .5em 1em;
}

#cr-img {
	max-width: 12em;
	height: 100%;
	border-bottom-right-radius: calc(.25rem - 1px);
    border-top-left-radius: calc(.25rem - 1px);
}


/* BEGIN status cards */

.status-card {
    margin: 10px 20px;
    flex: 1;
    padding: 10px 20px 10px;
    align-self: normal;
    text-align: center;
    align-items: center;
    padding-top: 7rem;
}

.status-card .card-title {
    font-size: 1rem;
    margin: 10px 0 20px;
}

.status-card .card-body {
    padding: 4px;
    width: 100%;
}

.time-stats {
    font-size: 0.75rem;
    margin-bottom: 10px;
    margin-top: 20px;
}


.status-card.project-status-contract             { background: url('../../assets/images/Liittymissopimus.png') 50% 1rem no-repeat; background-size: 6rem; }
.status-card.project-status-contract-electricity { background: url('../../assets/images/Myyntisopimus.png') 50% 1rem no-repeat; background-size: 6rem; }
.status-card.project-status-planning             { background: url('../../assets/images/Suunnittelutyo.png') 50% 1rem no-repeat; background-size: 6rem; }
.status-card.project-status-network-task         { background: url('../../assets/images/Verkostotyo.png') 50% 1rem no-repeat; background-size: 6rem; }
.status-card.project-status-survey               { background: url('../../assets/images/Yleistietolomake.png') 50% 1rem no-repeat; background-size: 6rem; }
.status-card.project-status-subscription-task    { background: url('../../assets/images/Liittymatyo.png') 50% 1rem no-repeat; background-size: 6rem; }
/* END status cards */

/* BEGIN front page (index) */
.front-page-card.personal-orders {
    background: url('../../assets/images/talo1.jpg') 0 50% no-repeat;
    background-size: 11rem;
    padding-left: 11rem;
}
.front-page-card.company-orders  {
    background: url('../../assets/images/kerrostalo1.jpg') 0 50% no-repeat;
    background-size: 11rem;
    padding-left: 11rem;
}
/* END front page (index) */

.col {
	float: left;
	width: 50%;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

/*Tables*/
#js-home {
    table-layout: fixed;
    width: 100%;
}

#js-home th {
    min-width: 110px;
}

.hidden {
    visibility: hidden;
    height: 0;
}

/*Footer*/
footer {
    position: absolute;
    bottom: 0;
    clear: both;
    padding-bottom: 0;
    height: 9rem;
    background-color: #EEEEEE;
    font-size: 0.9rem;
    text-decoration: none;
}

.site-footer p:last-child {
	margin-bottom: 0;
}

#foot-title, #foot-link  {
	justify-content: space-between;
	text-align: left;
    font-size: 0.9rem;
    color: var(--darkest-blue);
}

#foot-text {
	justify-content: space-between;
	text-align: left;
    font-size: 0.9rem;
    color: #171717;
}

.site-footer a:link,
.site-footer a:visited,
.site-footer a:hover,
.site-footer a:active  {
    color: var(--darkest-blue);
}

#foot-copy {
	text-align: right;
	font-size: 0.8rem;
}

@media all and (max-width: 1231px) {
    .nav-bar {
        flex-basis: auto;
        flex-wrap: wrap;
    }
}

@media all and (min-width: 992px) {
    .navbar-collapse {
        background-color: transparent !important;
    }
}
@media all and (max-width: 991px) {
    .navbar-collapse {
        justify-content: flex-start !important;
        width: 100%;
    }
    .navbar-collapse.collapsing, 
    .navbar-collapse {
        background-color: #225F94 !important; 
        padding: 0.5rem;
        width: 100%;
    }
    .navbar-collapse.collapsing .nav-link, 
    .navbar-collapse.show .nav-link {    
        color: #fff !important;
    }
    .navbar-collapse .dropdown-menu {
        background-color: #225F94 !important;
        border: none !important; 
    }
    .navbar-collapse .dropdown-menu .dropdown-item {
        color: #fff !important;
    }
    .navbar-collapse .dropdown-menu .dropdown-item:hover {
        background-color: var(--darkest-blue) !important;
    } 
}

@media all and (max-width: 800px) {
    #responsive {
        position:relative;
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
    }
}

pre {
    white-space: pre-wrap;
    background-color: #f7f7f7;
}