:root {
	--color-1: #FD9698;
	--color-2: #B3FF9E;
	--color-3: #F6DA46;
	--color-4: #A8DEFF;
	--btn-bg-color-1: #FD969733;
	--btn-bg-color-2: #B3FF9E33;
	--btn-bg-color-3: #F6DA4633;
	--btn-bg-color-4: #A8DEFF33;


	/*Purple colors from the visual plan*/
	--color-purple-main-1: #302E70; /*secondary*/
	--color-purple-main-2: #5D67AB; 
	--color-purple-1: #5F6CCB; /*primary*/
	--color-purple-2: #4F5BB4;
	--color-purple-3: #A7ADD8;
	--color-purple-4: #C4C8E6;
	--color-purple-5: #DDE0F6;

	--mdb-form-control-border-color: var(--color-purple-4);
}


/*Jenny test*/
body{
	font-family: 'Merriweather Sans', sans-serif;
	font-weight: 300;


}

.mainContainer{
	/*background-image: url("../images/bg1.jpg");*/

	/*testi 3.3*/
	

}

.liWrapper{
	
	width: 120px;
}

#profileMenuButton{
	background-image: url("../images/dummy.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}


.logoContainer{
	background-color: #dddada;
}


#logo{
	max-height:  60px;
}


.nav-secondary { /*devContent*/
	top: 120px;
	position: absolute;
	padding: 0;
	padding-left: 12px;
	background-color: #FBFBFB;
	box-shadow: none; 

	z-index: 60;
	
}
/*
#mainHeader{

	max-height: 200px;
	background-color: rebeccapurple;
}
*/



/**20.1 UUDEN DATAN TESTI*/

.colour_info{
	background-color: #302E70;
	color:white;
}

.colour_light{
	/*background-color: white;*/
}

.card.bulletin { /*eli newsCard (tai oikeammin bulletin)?*/
	min-height: 200px;
	max-height: 280px;


}


.card.bulletin img{
	width: 40px;
	height: 40px; 
	position: absolute;
	right: 5px;
	top: 5px;


}


.card.bulletin .critical{
	min-height: 200px;
}


.card.critical .card-title{
	color: rgb(248, 213, 13);
}


.card.critical img{

	width: 60px;
	height: 60px; 
	
	left: 50px;
	top: 50px;


}

/**UUDEN DATAN TESTI END*/





/********************************/
/****** -firstCol- CONTENT*******/

.taskIconElec{
	background-image: url("../images/elec.png");
	background-repeat: no-repeat;
	width: 40px;
	height: 40px; 
}

.taskIconOther{
	background-image: url("../images/right.png");
	background-repeat: no-repeat;
	width: 40px;
	height: 40px; 
}


/*on calendar, add this to frontpage if this works*/
.taskIcon{ /*basic, add some other img?*/
	background-image: url("../images/task40.png");
	background-repeat: no-repeat;
	background-size: cover;
	width: 40px;
	height: 40px; 
	
}
.ReservationRent{
	background-image: url("../images/house40.png");
}

.ReservationOther{
	background-image: url("../images/build40.png");
}

.taskDate{
 min-width: 75px;
}

.taskDivs {

}




.taskDivs h5{

	font-family: 'Merriweather Sans', sans-serif;
	font-weight: 100;
	font-size: 18px;


}

.toggled{
	background-color: var(--color-purple-1) !important;
	color: white;
}

.toggled:hover{
	background-color: var(--color-purple-2);
	color: white;
}




/*********************************/
/******* -secondCol- CONTENT *****/

.firstCol .secondCol .thirdCol h4{
	font-size: 25pt;
}





/*
.isFirstCard{
	

	background-repeat: no-repeat;
	background-position: center left 50px 10px;


}
*/



/*
.newsCard{

	background-repeat: no-repeat;
	background-position: top 7px right 7px ;
	background-color: white;
	background-size: 40px 40px;

	min-height: 280px;
}


.isFirstCard.newsCard{
	background-position: left 40px top 30px;
	background-size: 4rem;


	min-height: 150px;
	max-height: 180px;

}

.newsCard.toolsIcon{
	background-image: url("../images/tools.png");
	
	
}



.newsCard.isBlue{
	background-color: #302E70;
	
}
.newsCard.isBlue .card-title{
	color: #F8D03D;
}

.newsCard.isBlue .card-text{
	color: #EBEBEB;
}




*/



/********************************/
/********thirdCol content********/

.thirdCol{
	background-color: rgba(48, 46, 112, 0.6);
	
}

.houseCard{


}

.houseIcon{
	background-image: url("../images/house.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
	position: absolute;
	right: 5px;
	top:5px


}








/*INTRO*/


body#intro {
	height: 100vh;
	position: relative;
	background-blend-mode: multiply;

	background-image: url("/images/bg3.jpg");
	
}

/*Now body has all bgs (earlier it was container-fluid), but check how to modify the height of every view (if no container-fluid, the content does not always have enough space */
body{
	background-image: url("/images/bg2.jpg") !important;
	background-repeat: no-repeat;       
 	background-size: cover;             
	background-position: center center;


	/*min-height: 140vh;*/
}










/*käytössä mm. profile, profile/edit    3.3 tarkista, ettei käytössä enää*/
.userProfileContainer{
		height: 140vh;
		background-image: url("/images/bg2.jpg") !important;
		
}

/*mitään muuta keinoa osua kaikkiin vs. kirjoittaa yksittäisiin elementteihin class?*/
.dataContainer p{ /*entinen profileDataContainer,*/
	color: black;

}

.dataContainer span{
	/*width: 49%;*/

}


.fa-circle-question{
	color: #F8D03D !important;
	height: 35px !important;
	width: 35px !important;
}



.carousel-control-prev,
.carousel-control-next{
	width: 60px;
}


/*Muuta myöhemmin koskemaan vain niin montaa elementtiä kuin niitä on*/
.hoverGrid:hover > [class^="g-col-"]{
	background-color:  #302E7077 !important; /**/

	border-color: var(--color-purple-main-1) !important;
	
/*add padding/margin/something else*/

}




.apartmentCard{
	background-color: var(--color-purple-5);
	border-color: var(--color-purple-3) !important;
}

.hoverGrid:hover .apartmentCard{
	border-color: var(--color-purple-main-1) !important;
}

.apartmentCardIcon{
	width: 60px;
	height: 60px;

	background-image: url("/images/home70.png") !important;
	background-repeat: no-repeat;
	background-position: center;
}

.itmpointer{
	position: absolute;
	right: -23px;
}


.carousel-control-prev-icon,
.carousel-control-next-icon{
	opacity: 0;
}

/*muuta nuoli-ikoni*/
.hoverGrid:hover .carousel-control-next-icon,
.hoverGrid:hover .carousel-control-prev-icon
{
	
	opacity: 1;
}




.carousel-control-prev,
.carousel-control-next{
	width: 60px;
}

.helpButtonDiv{
	height: 25px;
	width: 25px;

}

.form-notch > *{
	border-width: 2px !important;

}












/*calendar*/


.errorMessage{
	
}

.hidden{
	display:none;
}






/************Jenny test end**************/







/*

@font-face {
	font-family: 'Catamaran';
	src: url('../vendor/fonts/Catamaran-VariableFont_wght.ttf') format('truetype-variations');
	font-weight: 1 999;
}

body {
  background-color: rgb(72, 74, 180);

}


#mainHeader .btn{
	color: black !important;
}


body#intro {
	height: 100vh;
	position: relative;
  background-image: url('/images/v2-bg-lock.jpg'), linear-gradient(to right, rgba(51, 51, 51, 1), rgba(51,51,51,1) 50%, rgba(183, 39, 45, 1));
  
  
	background-blend-mode: multiply;
}

main {
	padding-bottom: 53px;
}

#intro #logo {
	max-height: 60px;
}

#intro header {
	height: auto;
}

.bg h1,
.bg h2,
.bg h3,
.bg h4,
.bg h5,
.bg h6 {
	color: #5b5b5b;
}

.bg {
	--mdb-body-bg: white;
	background-color: var(--mdb-body-bg);
}

.bg-black .breadcrumb-item:before {
	color: rgba(255,255,255, 0.5)!important;
}
.bg-black .breadcrumb-item a {
	color: rgba(255,255,255, 1)!important;
}
.bg-black .breadcrumb-item.active {
	color: rgba(2555,255,255, 0.75);
}

.bg-black .legalize a {
	color: rgba(255,255,255,0.77);
}

header {
	height: 120px;
}

#logo {
	max-height: 30px;
	width: auto;
}

.btn-menu {
	color: white;
}

.btn-menu.show,
.btn-menu:hover {
	color: white;
	background-color: rgba(255,255,255,0.1);
}

.bg-black .dropdown-item {
	color: white;
}

/*

#main-nav > .nav-item > .btn-group > a {
	color: #9f9f9f;
	border-color: #9f9f9f;
	border-width: 2px;
	border-style: solid;
	border-left-style: none;
	border-right-style: none;
	min-width: 200px;
	position: relative;
	height: 38px;
}
#main-nav > .nav-item > .btn-group > a:first-of-type {
	border-left-style: solid;
}
#main-nav > .nav-item > .btn-group > a:last-of-type {
	border-right-style: solid;
}
#main-nav > .nav-item > .btn-group > a.dropdown-toggle {
	min-width: unset;
}

#main-nav > .nav-item > .btn-group > a:before {
	content:" ";
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	width: 0%;
	background-color: white;
	transition: width 0.2s ease-in;
	opacity:0.2;
}

#main-nav > .nav-item > .btn-group > a:hover:before {
	width: 100%;
	transition: width 0.2s ease-out;
}

/*
.dropdown-hover+.dropdown-menu:hover,
.dropdown-hover:hover+.dropdown-menu {
	display: block;
}

.dropdown-hover+.dropdown-toggle:active {
	pointer-events: none;
}




#main-nav > li {
	margin: 0;
	background-color: #AAAAAA;
	box-shadow: inset -2px -2px 2px 2px #777;
	border: thin solid #999999;
}

#main-nav .nav-item a:hover {
	color: white;
}

#main-nav .btn-group {
	height: 70px;
}
#main-nav .btn {
	padding-left: 1vw;
	padding-right: 1vw;
}
*/
/*
#main-nav .dropdown-toggle-split {
	width: 25px;
	border-left: thin solid #999;
}

.btn-home {
}

.btn-home i {
	color: var(--color-1);
}
#main-nav .nav-item .btn-home a:before {
	background-color:var(--color-1);
}

.btn-organization i {
	color: var(--color-2);
}
#main-nav .nav-item .btn-organization a:before {
	background-color:var(--color-2);
}


.btn-permissions i {
	color: var(--mdb-warning);
}
#main-nav .nav-item .btn-permissions a:before {
	background-color:var(--mdb-warning);
}


.btn-forms i {
	color: var(--mdb-info);
}

.btn-debug i {
	color: red;
}
.btn-toggle-split.btn-debug {
	margin-top: 25px;
}

#main-nav .nav-item .btn-forms a:before {

	background-color:var(--mdb-info);
}

*/

/************ LOGIN SCREEN ********************/
.lang-positioning {
	position: absolute;
	top: 1em;
	right: 1em;
	z-index:99;
}


#intro {
}

.bg-image.bg-lock {
  background-image: linear-gradient(to right, rgba(51, 51, 51, 1), rgba(51,51,51,1) 50%, rgba(183, 39, 45, 1));/*,  url('/images/v2-bg-lock.jpg');*/
}

.color-1 {
	color: var(--color-1);
}

.color-2 {
	color: var(--color-2);
}

.color-3 {
	color: var(--color-3);
}

.color-4 {
	color: var(--color-4);
}

#intro .mask {
	top:120px;
}
.msg-box {
	padding: 20px;
	margin-bottom: 30px;
/*	box-shadow: 1px 1px 5px rgba(0,0,0,0.25);*/
}

.alert-primary,
.alert-warning,
.alert-danger {
	color: #1e1e1e;
}

.alert-primary {
	background-color: var(--mdb-info-bg-subtle);
}

.select-option:hover .select-option-text {
	color: white!important;
}


#main-nav .dropdown-toggle {
	padding-bottom: 15px;
}

#main-nav .dropdown-toggle:after {
	position: absolute;
	bottom: 5px;
	height:7px;
	left: 50%;
	transform: translateX(-50%);
}

/*
.dropdown-toggle.debug::after {
	border-left: solid thin red;
	color: red;
	content: "\f188";
	font-family: "FontAwesome";
	border: none;
	margin-top: 12px;
}*/

/* MDB customization that isn't available in custom variables */
/*
.card-header {
	border-bottom-color: var(--mdb-primary);
}
	*/

#main-content > .card > .card-body {
	padding: 0;
}

/*
#main-content > .card > .card-body > section {
	border-bottom: thin solid var(--mdb-primary);
}
	*/

	/*
.card-body .card-header,
.card-body .card {
	background-color: var(--mdb-body-bg);
}
*/


#chartArea {
	min-height: 500px;
}

/* Info sidebar styles */
@keyframes flashBg {
	  0% { background-color: color-mix(in srgb, yellow 0%,   transparent 100%); }
 	 20% { background-color: color-mix(in srgb, yellow 100%, transparent   0%); }
	100% { background-color: color-mix(in srgb, yellow 20%,  transparent  80%); }
}

.highlighted-info-section {
	animation: flashBg 3s ease-in-out forwards;



}

.grid {
	gap: 1rem;
}

/*
.card-header .modifiedDate {
	opacity: 0.8;
	line-height: 1;

}*/

.google-visualization-orgchart-node {
	background-color: none!important;
	padding:0!important;
	border: 2px solid transparent!important;
}
.chartNode {
	background-color: var(--btn-bg-color-4);
	padding: 2px;
}
.chartNode.originNode {
	background-color: var(--btn-bg-color-1);
}
.chartNode.parentNode {
	background-color: var(--btn-bg-color-2);
}
.chartNode.childNode {
	background-color: var(--btn-bg-color-3);
}
.google-visualization-orgchart-nodesel {
	background-color: none!important;
	border-color: var(--mdb-primary)!important;
}
/*
.google-visualization-orgchart-node {
	background-color: var(--btn-bg-color-4)!important;
}

.google-visualization-orgchart-nodesel {
	border-color: var(--mdb-primary)!important;
	background-color: var(--btn-bg-color-3)!important;
}*/

/*
#chartArea {
	margin-top: 20px;
}

.organization-chart-table {
	margin:auto;
	padding: 20px;
}

.organization-chart-node {

	background-color: var(--mdb-secondary);
	color: white;
}

.organization-chart-lines-top div {
	background-color: var(--mdb-primary);
}
.organization-chart-line {
    height: 20px;
    border-right: 1px solid var(--mdb-primary);
    border-top: 1px solid var(--mdb-primary);
}*/


.dates {
	text-align: right;
}
.dates .label {
	width: 75px;
	display: inline-block;
	text-align: left;
}