@charset "UTF-8";
/*
 Theme Name:   MDM
 Theme URI:    https://assets.huhtamaki.com
 Author:	   Huhtamaki Digital Team
 Description:  UX & UI Container to support master data management UX & UI requirements for product data network
 Template:     generatepress
 Version:      1.2
*/


/*****
	site wide styling 
	
****/
.site, .site-content{
	width:100%;
	height:100vh;
		
}	
.site-content{
	padding:40px 0 0 0;
}
.grid-container{
	max-width:100vw;
	padding: 0 5%;
	background-color: #F8F8F8 !important;
}


.mdm-charts table, .mdm-charts td, .mdm-charts th{
	border: 0;
	margin: 24px 0;
}


.wrap-mdm-piechart{
	width: 40%;
}

.wrap-mdm-trendchart{
	width: 60%;
}




.piechart,.trendchart{
	height:500px !important;;
	padding:1em;
	background: #FFFFFF;
	border-radius: 8px;
	
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
}
#piechart, #trendchart{
	width:100%;
	height:100%;
}

.header-image{
	width:150px !important;
}



/**
							login form and password reminder 
**/
#login{
	width:100vw;
	height:100vw;
	background-image: url('images/databackground.jpg');
	padding: 0;
}
#login h1{
background: #ffffff;
    background-image: url(images/logo.svg);
    background-repeat: no-repeat;
    height: 100px;
    background-size: 200px auto;
    text-align: right;
    width: 100vw;
    background-position: 2% 36px;
}

.login{
	
	width:100vw;
	height: auto;
}
#login h1 a {
 background-image: url('images/product_mdm_iq_small_logo.png');
    background-size: 200px auto;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100px;
    background-position: 98% 50%;
    color: transparent;
}
#backtoblog{
	display:none;
}
#login-message{
	display:none;
}
#loginform{
	width: 30%;
    margin: 10% auto;
    border-radius: 12px;
	
	height: 20%;
    padding: 48px;
}
#loginform p.submit{
	text-align:center;
}
#loginform .input,#loginform .password-input{
	border-radius: 8px;
    border-color: #8c8f94;
    background: white;
	font-weight: 100;
	font-size: medium;
}
#loginform {
	font-weight: 500;
}
#login form p{
	font-weight: 500;
    
	margin-bottom: 0;
}
#password-reset-link{
	margin: 0 0 0 30%;
}
#lostpasswordform{
	width: 30%;
    margin: 5% auto;
    border-radius: 12px;
    height: 20%;
    padding: 48px;
}
#lostpasswordform p.submit{
	text-align: center;
}

.login .message, .login .notice, .login .success{
	border-left: none;
    box-shadow: none;
    margin: 10% 10% 0 10%;
}

#login form p.submit {
    margin: 24px;
    padding: 0;
}

.login .button-primary{
	width: 90%;
    padding: 4px 24px;
    float: none;
}


.login #nav{
	display: none;
}
#login .notice p{
	display:none;
}
#login .notice{
	display:none;
}

/**
	widget that renders product iQ logo to the right of the site logo

**/

.wrap-iq{
	float: right;
    width: 120px;
    margin: 10px 0 0 0;
	background-image: url('images/product_mdm_iq_small_logo.png');
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 120px;
    height: 40px;
	
}
/****
	Welcome Page
***/
#wrap-welcome{
	width:100vw;
	height:100vw;
	background-image: url('images/databackground.jpg');
	background-repeat: no-repeat;
	padding: 0;
	position: absolute;
    top: 100px;
    left: 0;
}	

.wrap-welcome-content{
	opacity: .8;
    background: white;
    position: absolute;
    top: 200px;
    width: 40%;
    left: 30%;
    padding: 5%;
    border-radius: 24px;
}

.wrap-welcome-content h1{
position: relative;
    left: -10px;
    background-image: url('images/product_mdm_iq_small_logo.png');
    background-repeat: no-repeat;
    background-position: 100% 40%;
    background-size: 50%;
    padding: 10% 0 10% 0;
}

.welcome-panel{
	padding-bottom: 10%;
}

.wrap-welcome-button a{
	background-color: #4082D2 !important;
}













/* ISEEK FOOTER CSS */
.site-footer {
  background-color: #00286e;
}
.site-footer .footer-widgets-container {
  padding: 10px 15px 10px 15px;
}
.site-footer .menu-item a {
  text-decoration: none;
  font-size: 22px;
}
.site-footer .menu-item a:hover, .site-footer .menu-item a:focus, .site-footer .menu-item a:active {
  text-decoration: underline;
}
.site-footer .site-info .inside-site-info .copyright-bar {
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.site-footer .site-info .inside-site-info .copyright-bar .menu {
  margin: 0;
  padding: 0;
  margin-right: 45px;
  list-style-type: none;
  gap: 15px;
}
.site-footer .site-info .inside-site-info .copyright-bar .menu .menu-item {
  margin: 0;
}
.site-footer .site-info .inside-site-info .copyright-bar .menu .menu-item a {
  font-size: 18px;
  font-weight: 300;
}
.site-footer .site-info .inside-site-info .copyright-bar .social {
  display: flex;
  gap: 32px;
  align-items: center;
}
.site-footer .site-info .inside-site-info .copyright-bar .social a {
  height: 66px;
  width: 66px;
  border-radius: 50%;
  background-color: #2d4986;
  display: flex;
  justify-content: center;
  align-items: center;
}
.site-footer .site-info .inside-site-info .copyright-bar .social a svg {
  width: auto;
  height: 25px;
}
@media (min-width: 768px) {
  .site-footer {
    padding: 80px 0 80px 0;
  }
  .site-footer .footer-widgets-container {
    padding: 0;
  }
  .site-footer .footer-widgets-container aside:first-child {
    margin-bottom: 75px;
  }
  .site-footer .menu {
    display: flex;
  }
  .site-footer .menu .menu-item {
    margin-bottom: 0;
    margin-right: 20px;
  }
  .site-footer .site-info {
    margin-top: 100px;
  }
}

.mdm-help{
	color: #477FC1;
}

/***************************** context help *********************************/
.mdm-context{
	float:right;
	color: #000;
	cursor:pointer;
}
#overlay {
	display: none;
    width: 100vw;
	height:100vh;
    position: absolute;
    top: 0;
    left: 0;
    
    opacity: .9;	
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	  
	    background-color: #e8e8e8;
}
#helpcontent{
	padding: 5% 36px;
	border-radius: 24px;
    background: white;
	background-color: #ffffff;
	display: flex;
    flex-direction: column;
    justify-content: center;
	position:absolute;
	top: 25%;
	left: 30%;
	width: 40%;
}

.mdmHelpTitle{
	background: white;
    color: #00286E;
	
	
	font-size: 1.2em;
	font-weight: 700; 
}
.mdmHelpTitle span{
	margin-left: 24px;
}
.wrapNarrative{
	line-height: 1.5em;
	text-align:left;
	padding:24px;
	
}

.wrapNarrative ul{
	margin: 24px;
    line-height: 1.5em;
}

.helpNavigation{
	display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 48px 0 0 0;
}

.scrolltable{
	overflow-x: auto;
}

}