/******* GREDI PERUSPALVELU GUI4 01/2023 ******/

/****

  Define the customer specific colors and styles here

  ****/

:root {
  --color-primary: #408ba8;
  --color-primary-dark: #36758c;
  --color-primary-darker: #186d8a;
  --color-primary-darkest: #0069b3;

  --color-white: white;
  --color-gray: #777;
  --color-gray-dark: #ddd;
  --color-black: black;

  --font-family: Mona Sans, sans-serif;
}

/****

  You can add fonts needed in the login page and the admin-UI here

  ****/

@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/monasans/v3/o-0mIpQmx24alC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A-9a6VLYyWtZ3rI.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Mona Sans';
  font-style: bold;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/monasans/v3/o-0mIpQmx24alC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyAaBO9a6VLYyWtZ3rI.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/**** 

  Here you can overwrite some of the most common styles of the login and registration page

  ****/

#loginWrapper,
.emailFormWrapper,
.loginwrapper,
#registration-page,
#app {
  /* Background color */
  --color-background: var(--color-white);

  /* Background image of the registration page */
  --backgroud-image-registration: url('resource.do?type=5');
  /* Background color of the registration form */
  --backgroud-color-registration: var(--color-background);

  /* Color of the help texts */
  --color-text: var(--color-black);
  /* Color of the error message */
  --color-error: var(--color-black);
  /* Color of the registration form texts */
  --color-registration: var(--color-text);

  /* Form elements */
  --color-field-background: transparent;
  --color-field: var(--color-gray);
  --color-field-border: var(--color-black);

  /* Submit button */
  --color-submit-background: var(--color-black);
  --color-submit: var(--color-white);
  --color-submit-background-hover: var(--color-submit);
  --color-submit-hover: var(--color-submit-background);

  /* Links */
  --color-link: var(--color-black);

  /* Registration app bar */
  --registration-app-bar-background: ;
  --registration-app-bar-color: ;
  --registration-app-bar-logo: ;

  /* Registration form */
  --font-family-registration: var(--font-family);
  --color-registration-field-background: var(--color-field-background);
  --color-registration-field: var(--color-field);
  --color-registration-field-border: var(--color-field-border);
}

/****

  There shouldn't be need to make any changes after this point (hopefully)

  ****/

/*** Registration page in the new UI ***/

/* Apply custom registration style variables */
#app-bar {
  background-image: linear-gradient(
    var(--registration-app-bar-background),
    var(--registration-app-bar-background)
  );
}
#app-bar > * {
  color: var(--registration-app-bar-color);
}
#app-bar img {
  content: var(--registration-app-bar-logo);
}
#registration-content {
  background-image: var(--backgroud-image-registration);
}
#registration-page,
#registration-page h3,
#registration-page h6,
:where(#registration-page) .MuiInputLabel-root,
#registration-page input,
#registration-page textarea,
#registration-page .MuiSelect-select {
  color: var(--color-registration);
  font-family: var(--font-family-registration);
}
#registration-page input,
#registration-page textarea,
#registration-page .MuiSelect-select {
  color: var(--color-registration-field);
}
#registration-content .MuiInputBase-root,
#registration-content .MuiSelect-select {
  background-color: var(--color-registration-field-background);
}
:where(#registration-content) .MuiInputBase-root fieldset {
  border-color: var(--color-registration-field-border, revert);
}
#registration-content .card {
  background-color: var(--backgroud-color-registration);
}

/* Make the registration background scrollable */
#registration-page {
  overflow-y: auto;
}
#registration-content {
  background-size: cover;
  background-position: center center;
  overflow-y: visible;
}

/* NOTE: These are copied from the hard coded values in the login page */
/* Transform registration input fields to look similar to login fields */
#registration-content fieldset {
  border: none;
}
#registration-content input,
#registration-content textarea,
#registration-content .MuiSelect-select {
  border: 0 none;
  border-bottom: 1px solid var(--color-registration-field-border);
  border-radius: 0;
  font-size: 16px;
  height: auto;
  padding: 8px 0;
}
#registration-content .Mui-focused .MuiSelect-select,
#registration-content input:focus,
#registration-content textarea:focus {
  outline: revert;
}
#registration-page .MuiInputLabel-root,
#registration-page .MuiInputLabel-root h6 {
  width: 100%;
  font-size: 15px;
  font-weight: normal;
  text-transform: lowercase;
  color: var(--color-registration);
}

/* NOTE: These are copied from the hard coded values in the login page */
/* Style the registration buttons to match the login buttons */
#registration-page .submit-wrapper button {
  display: inline-block;
  background-color: var(--color-submit-background);
  border: 2px solid var(--color-submit-background);
  font-family: var(--font-family);
  color: var(--color-submit);
  font-size: 16px;
  padding: 4px;
  min-width: 200px;
  text-transform: lowercase;
  text-align: center;
  border-radius: 0;
}
#registration-page .submit-wrapper button:hover,
#registration-page .submit-wrapper button:focus {
  background-color: var(--color-submit-background-hover);
  color: var(--color-submit-hover);
  text-decoration: none;
  box-shadow: none;
}

/*** Frontpage of the admin-UI ***/

/* Reposition the search bar in the frontpage under the logo */
#frontpage #extTopbarSearch {
  position: absolute;
  left: calc((1000px - 370px) / 2);
  right: unset;
  top: 138px;
}
#extTopbarSearch .react-app .search-view {
  margin: 2px 10px 0 0;
}

/* Reposition and center the frontpage logo */
#frontpage #logo {
  top: 40px;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
}

/* Hide the fugly background of the frontpage top bar */
#frontpage #top-bar,
#frontpage #video-area,
#frontpage video {
  background-color: transparent !important;
}

/* Define the width of the containers of the frontpage */
#frontpage .content-area {
  min-width: 1000px; /* This needed to overwrite the default min-width */
  width: 1000px;
}

/* Hide the quick links */
#frontpage #quick-links {
  display: none !important;
}

/* Remove top padding from the card container */
#frontpage div#bodybox div#gui3frontpageContent {
  padding-top: 0px;
}

/* Style the link-cards */
#frontpage #main-content-layout-3x1 .box-content,
#frontpage #main-content-layout-2x2 .box-content,
#frontpage #main-content-layout-3x2 .box-content,
#frontpage #main-content-layout-3x3 .box-content,
#frontpage #main-content-layout-4x4 .box-content {
  border: none;
  background-color: #fff;
  padding: 25px;
  line-height: 28px;
  border-radius: 3px;
  font-family: 'Mona Sans', Arial, Helvetica, sans-serif !important;
}
/* Define the spacing between cards */
#frontpage #main-content-layout-3x1,
#frontpage #main-content-layout-2x2,
#frontpage #main-content-layout-3x2,
#frontpage #main-content-layout-3x3,
#frontpage #main-content-layout-4x4 {
  border-spacing: 10px !important;
}
/* Style links in the cards */
#frontpage #main-content-layout-3x1 .box-content a,
#frontpage #main-content-layout-2x2 .box-content a,
#frontpage #main-content-layout-3x2 .box-content a,
#frontpage #main-content-layout-3x3 .box-content a,
#frontpage #main-content-layout-4x4 .box-content a {
  color: var(--color-primary-darkest);
}
/* Style the card headings */
#frontpage #main-content-layout-3x1 .box-content h2,
#frontpage #main-content-layout-2x2 .box-content h2,
#frontpage #main-content-layout-3x2 .box-content h2,
#frontpage #main-content-layout-3x3 .box-content h2,
#frontpage #main-content-layout-4x4 .box-content h2 {
  font-size: 16px;
  font-weight: bold;
  font-family: 'Mona Sans', Arial, Helvetica, sans-serif !important;
}

/*** General admin-UI fixes ***/

/* Frontpage and top bar are white so the "advanced" search button should be black */
#extTopbarSearchContent .react-app .search-view .button-toggle {
  color: #212121;
}
#extTopbarSearchContent .react-app .search-view .arrow-down {
  border-top-color: #212121;
}

/* Define the size of the top bar logo */
div#logoArea img {
  height: 45px;
  top: 6px;
  left: 30px;
}

/* Hide unnecessary buttons-elements */
#indesignParameters,
#orderSelectAddress,
p#materialID,
#pageHelp,
#langBr,
#messageBarPanel,
#msg_info_line {
  display: none !important;
}

/* Hide old multiple upload and show new multiple upload */
#btnMultipleUploadMeta2 {
  display: inline !important;
}
#btnMultipleUploadMeta {
  display: none !important;
}

/* Hide/position buttons in commenting layout */
#saveChanges {
  display: none;
}
#commentDisapproveAlt {
  display: inline;
}
#commentSaveHelp {
  text-align: center !important;
}

/* Hide personal address in cart sending since it's not allowed */
body#sendCartBody option[value='0'] {
  display: none;
}

/* Pretty sure this does nothing */
#servicesList tr * {
  vertical-align: top;
}
/* Hannen muutokset */
#loginLogo {
    width: 250px;
    padding: 0;
}

input[type="submit"], #loginWrapper .link-btn {
    background-color: #00593e;
    border: 2px solid #00593e;
    text-transform: none;
}

input[type="submit"]:hover, #loginWrapper .link-btn {
background-color: white;
  color: #00593e;
}

#frontpage #logo {
  top: 10px;
  height: 100px;
}

#loginText h2 {
font-weight: 700;
font-family: Mona Sans, Arial, Helvetica, sans-serif !important;
line-height: 2.5 !important;

}

#loginWrapper {
font-family: Mona Sans, Arial, sans-serif;
font-style: 400;
font-weight: normal;
}

div#loginText#loginText, .login-instruction {
  line-height: 2;
}

#linkBar a {
    text-transform: none;
}

.loginField > label {
    text-transform: none;
}