/*
Brings apllication.css to KidsKonnect base style
*/
@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

:root {
  --header-logo-url: "";
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-primary: "Ubuntu", var(--font-family-sans-serif);
  --font-family-secondary: var(--font-family-primary);
  --font-family-secondary-letter-spacing: normal;
  --main-background-color: RGBA(var(--text-rgb-color), 0.05);
  --main-header-background: var(--primary-color);
  --main-header-user-background: var(--primary-shade-color);
  --main-header-background-contrast-color: var(--primary-contrast-color);
  --main-header-menu-background-color: #fff;
  --main-header-menu-font-family: var(--font-family-secondary);
  --main-header-menu-font-family-letter-spacing: var(--font-family-secondary-letter-spacing);
  --dropdown-menu-color: var(--hyperlink-color);
  --dropdown-menu-background-color: #fff;
  --dropdown-menu-hover-background-color: var(--secondary-color);
  --dropdown-menu-hover-color: var(--secondary-contrast-color);
  --page-content-background-color: #fff;
  --sidebar-panel-background-color: #fff;
  --sidebar-header-font-color: var(--text-color);
  --sidebar-action-color: var(--primary-color);
  --sidebar-action-color-hover: var(--secondary-color);
  --sidebar-head-font-family: var(--font-family-secondary);
  --sidebar-head-font-family-letter-spacing: var(--font-family-secondary-letter-spacing);
  --sidebar-help-background-color: var(--secondary-color);
  --sidebar-help-color: var(--secondary-contrast-color);
  --sidebar-help-action-color: var(--hyperlink-color);
  --sidebar-help-action-color-hover: var(--hyperlink-color-hover);
  --box-shadow: 0px 0px 5px 0px RGBA(var(--text-rgb-color), 0.05);
  --modal-header-font-family: var(--font-family-secondary);
  --hyperlink-color: var(--text-color);
  --hyperlink-color-hover: var(--primary-color);
  --text-color: #333;
  --text-rgb-color: 51, 51, 51;
  --text-contrast-color: #FFFFFF;
  --text-contrast-rgb-color: 255, 255, 255;
  --text-shade-color: #2d2d2d;
  --text-tint-color: #474747;
  --text-5-color: whitesmoke;
  --text-10-color: #ebebeb;
  --text-15-color: #e0e0e0;
  --text-20-color: #d6d6d6;
  --muted-color: #a6a6a6;
  --secondary-color: var(--primary-color);
  --secondary-rgb-color: var(--primary-rgb-color);
  --secondary-contrast-color: var(--primary-contrast-color);
  --secondary-contrast-rgb-color: var(--primary-contrast-rgb-color);
  --secondary-shade-color: var(--primary-shade-color);
  --secondary-tint-color: var(--primary-tint-color);
  --danger-color: #dc3545;
  --danger-contrast-color: #fff;
  --danger-shade-color: #c82333;
  --succes-color: #98dd7c;
  --succes-contrast-color: #3c763d;
  --succes-shade-color: #83db60;
  --warning-color: #ffdf81;
  --warning-contrast-color: #8a6d3b;
  --warning-shade-color: #ffdb70;
  --default-horizontal-jsf-header-logo-height: 68px;
  --default-horizontal-jsf-header-logo-width: 300px;
  --default-horizontal-jsf-header-logo-left: 12px;
  --default-horizontal-jsf-header-logo-top: 16px;
  --default-horizontal-jsf-header-logo-background-position: left;
  --default-horizontal-jsf-header-logo-z-index: unset;
  --default-horizontal-jsf-header-logo-after-content: none;
  --default-vertical-jsf-header-logo-height: 128px;
  --default-vertical-jsf-header-logo-width: 143px;
  --default-vertical-jsf-header-logo-left: 28px;
  --default-vertical-jsf-header-logo-top: -26px;
  --default-vertical-jsf-header-logo-background-position: center;
  --default-vertical-jsf-header-logo-z-index: 1;
  --default-vertical-jsf-header-logo-after-content: " ";
  --default-center-jsf-header-logo-width: 175px;
  --default-center-jsf-header-logo-background-position: center;
}

body {
  font-family: var(--font-family-primary);
  background-color: var(--main-background-color);
  color: var(--text-color);
}

body:before {
  content: "";
  display: block;
  width: 100%;
  height: 40px;
  background: var(--main-header-background);
}

.rich-page {
  background-color: transparent;
}

.rich-page:before {
  content: "";
  display: block;
  width: 100%;
  height: 100px;
  top: 40px;
  left: 0;
  position: absolute;
  background: var(--main-header-menu-background-color);
}

@media (min-width: 768px) and (max-width: 1024px) {

  body:before,
  .rich-page:before {
    width: 126vw;
  }
}

.rich-page-header {
  height: 100px;
  margin: 0;
  position: relative;
}

.rich-page-header:before {
  content: "";
  position: absolute;
  background: var(--header-logo-url);
  background-size: contain;
  background-repeat: no-repeat;
  height: var(--jsf-header-logo-height);
  width: var(--jsf-header-logo-width);
  left: var(--jsf-header-logo-left);
  top: var(--jsf-header-logo-top);
  background-position: var(--jsf-header-logo-background-position);
  z-index: var(--jsf-header-logo-z-index);
}

.rich-page-header:after {
  content: var(--jsf-header-logo-after-content);
  width: 175px;
  height: 160px;
  background: white;
  position: absolute;
  top: -40px;
  left: 12px;
  box-shadow: var(--box-shadow);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 0;
}

.top-header-tr-application-top {
  position: relative;
  display: block;
  height: 40px;
}

.top-header-tr-application-top .login-data {
  position: relative;
  top: -40px;
  padding: 0 15px;
  height: 40px;
  background: var(--main-header-user-background);
  color: var(--main-header-background-contrast-color);
  width: auto !important;
}

.top-header-tr-application-top .login-data .vertical-divider {
  display: none;
}

.top-header-tr-application-top .header-loader {
  position: relative;
  top: -40px;
  width: 170px;
  text-align: left !important;
}

.top-header-text,
a.top-header-text {
  font-family: var(--font-family-primary);
  font-size: 13px;
  color: var(--main-header-background-contrast-color);
  padding-right: 0;
}

a.top-header-text {
  color: var(--main-header-background-contrast-color);
  width: 135px;
  top: 1em;
  position: absolute;
  left: -150px;
  padding-right: 15px;
}

a.top-header-text:hover {
  text-decoration: underline;
}

.rich-page-content {
  min-height: 75%;
  margin-top: 45px;
}

.rich-page-main,
.rich-page-subheader,
.rich-page-content,
.rich-page-footer {
  background-color: transparent;
}

.main-content-container {
  background: var(--page-content-background-color);
  min-height: 500px;
  border-radius: 5px;
  box-shadow: var(--box-shadow);
  display: inline-block;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.rich-page-footer-content {
  font-family: var(--font-family-primary);
}

.main-menu {
  background: none;
  border: none;
  height: 50px;
  margin-top: -17px;
}

.main-menu-item-home:hover {
  background: none;
  padding: 0;
}

.rich-toolbar-item,
.main-menu-item,
.kocon-main-menu-item,
.main-menu-item:hover {
  margin: 0;
  padding: 0;
  border: none;
}

.rich-toolbar-item:first-child {
  width: 100%;
}

.main-menu-item,
.main-menu-item-home .main-menu-item-text,
.main-menu-item-text,
.rich-toolbar-item {
  color: inherit;
  font-size: 18px;
  font-weight: bold;
}

.main-menu-item-class {
  background: none;
  padding: 0;
  color: inherit;
  font: inherit !important;
  /** important = Kocon fix */
}

.rich-toolbar-item>.kocon-main-menu-item,
.main-menu-item,
.main-menu-item:hover,
#toolbarHome {
  padding: 0;
  height: 50px;
  /* gelijk aan height van .main-menu-item */
  line-height: 50px;
  background: none;
  font-family: var(--main-header-menu-font-family);
  letter-spacing: var(--main-header-menu-font-family-letter-spacing);
  color: var(--hyperlink-color);
}

.rich-toolbar-item>.kocon-main-menu-item:hover,
.main-menu-item:hover,
.main-menu-item:hover:hover,
#toolbarHome:hover {
  color: var(--hyperlink-color-hover);
  font-size: inherit;
}

#toolbarHome .rich-menu-item-icon {
  display: none;
}

#toolbarHome .rich-menu-item-label {
  font-size: inherit;
}

#toolbarHome .main-menu-item-class {
  top: 2px;
}

#toolbarHome {
  padding-left: 25px;
  padding-right: 25px;
}

.main-menu-item .main-menu-item-label-grid {
  padding: 0 35px 5px 15px;
}

.main-menu-item .rich-menu-list-border {
  background: none;
  background-color: var(--dropdown-menu-background-color);
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
  border-radius: 5px;
}

.main-menu-item .rich-menu-list-bg {
  padding-top: 5px;
  padding-bottom: 5px;
  border: none;
  background: none;
}

.main-menu-item .main-menu-subitem {
  border: none;
  background: none;
  padding: 0 20px;
  height: 1.8em;
  line-height: 1.8em;
  color: var(--dropdown-menu-color);
  font-family: var(--font-family-primary);
  letter-spacing: normal;
}

.main-menu-item .main-menu-subitem:hover {
  color: var(--dropdown-menu-hover-color);
  background: var(--dropdown-menu-hover-background-color);
}

.main-menu-item .rich-menu-item-icon,
.main-menu-item .rich-menu-group-icon {
  display: none;
}

.sidebar-panel {
  background-color: var(--sidebar-panel-background-color);
  border-radius: 5px;
  box-shadow: var(--box-shadow);
  margin-bottom: 30px;
}

.sidebar-panel.help {
  background-color: var(--sidebar-help-background-color);
  color: var(--sidebar-help-color);
}

.sidebar-panel.help .sidebar-panel-header-text,
.sidebar-panel.help .sidebar-panel-help-text {
  color: var(--sidebar-help-color);
}

.sidebar-panel.help a {
  color: var(--sidebar-help-action-color);
}

.sidebar-panel.help a:hover {
  color: var(--sidebar-help-action-color-hover);
}

.sidebar-panel .sidebar-panel-header-text {
  padding: 10px 0;
  color: var(--sidebar-header-font-color);
  font-size: 18px !important;
  text-align: left;
  font-weight: bold !important;
  font-family: var(--sidebar-head-font-family) !important;
  letter-spacing: var(--sidebar-head-font-family-letter-spacing);
}

/*KLANT-FONT AANPASSEN*/
.sidebar-panel-help-text,
.input-data-column-data,
.output-data-value,
.cms-content-item p,
.help-value,
.rich-tab-header,
.rich-table,
.text-block,
.rich-page-main .rich-menu-item-label,
.rich-page-main .rich-label-text-decor,
.rich-panel-body,
input,
.text {
  font-family: var(--font-family-primary) !important;
  font-size: 12px;
  color: var(--text-color);
}

.input-data-column-label,
.sidebar-panel-option-label,
.sidebar-panel-option-input,
.sidebar-panel-option-text,
.datatable-header-text,
.datatable-column-header {
  font-family: var(--font-family-primary) !important;
  font-size: 12px;
  color: var(--text-color);
}

.input-data-column-title,
.page-title,
.help-column-title {
  font-family: var(--font-family-primary) !important;
  font-weight: normal !important;
  color: var(--text-color);
  font-size: 20px !important;
}

.input-data-column-subtitle,
.help-column-subtitle {
  font-family: var(--font-family-primary) !important;
  color: var(--text-color);
  font-weight: normal !important;
  font-size: 16px !important;
}

.rich-table-cell,
.drop-down-menu-label {
  color: var(--text-color);
}

.table-row-data-inactive .rich-table-cell,
.table-row-data-inactive {
  color: var(--muted-color);
}

.modal-panel-header {
  color: var(--primary-contrast-color);
  font-family: var(--modal-header-font-family) !important;
  font-size: 18px !important;
  font-weight: bold !important;
  background: var(--primary-color);
  border: none;
}

.modal-panel-header img {
  display: none;
}

.about_customer_logo {
  background-image: var(--header-logo-url);
  width: 250px;
  height: 150px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.dashboard-container {
  background-color: transparent;
}

.button,
.button.large {
  color: var(--text-color);
  background: none;
  background-color: var(--text-5-color);
  border: 0.45px solid var(--text-15-color);
  border-radius: 5px;
}

.button.focus,
.button.large.focus {
  background-image: none;
}

.button.focus {
  color: var(--primary-contrast-color);
  background: none;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.button-mouse-over,
.button-mouse-down {
  color: var(--secondary-contrast-color);
  background: none;
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  border-radius: 5px;
}

.button-mouse-over.large,
.button-mouse-down.large {
  background-image: none;
}

.datatable-header-left,
.datatable-header-right,
.datatable-header-text {
  color: var(--text-color);
  font-size: 14px;
  background-image: none;
}

.photo-button-next {
  background-color: var(--secondary-color);
  background-image: url(img/button_next_transparent.png) !important;
}

.photo-button-previous {
  background-color: var(--secondary-color);
  background-image: url(img/button_previous_transparent.png) !important;
}

.journal-cover>div {
  background-color: transparent !important;
}

.journal-cover:before {
  content: ' ';
  background-image: url(journal-cover-background.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: -2px 0;
  position: absolute;
  margin-top: -2px;
  margin-left: -1px;
  height: 564px;
  width: 948px;
}

.journal-left-page-title {
  top: 40px;
  left: 58px;
}

.journal-right-page-title {
  top: 40px;
  left: 32px;
}

.journal-left-page-content {
  left: 58px;
}

.journal-right-page-content {
  left: 32px;
}

.journal-left-page-content,
.journal-right-page-content {
  top: 84px;
}

.journal-cover {
  background-image: none;
  background-color: var(--primary-color);
}

.journal-cover>div {
  background-color: transparent !important;
}

.journal-cover:before {
  content: ' ';
  background-image: url(img/journal-cover-background.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: -2px 0;
  position: absolute;
  margin-top: -2px;
  margin-left: -1px;
  height: 564px;
  width: 948px;
}

.journal-left-page {
  background: transparent url("img/journal-left-paper.png") no-repeat;
  right: 2px !important;
  top: 5px !important;
}

.journal-right-page {
  background: transparent url("img/journal-right-paper.png") no-repeat;
  left: -3px !important;
  top: 5px !important;
}

.journal-previous-button,
.journal-next-button {
  top: 485px;
}

.journal-title,
.journal-subtitle {
  margin-left: 5px;
}

.journal-single-paper {
  background-image: url("img/journal-single-paper.png");
  background-color: var(--primary-color);
  background-repeat: no-repeat;
  margin-bottom: 19px;
  height: 542px !important;
  width: 442px !important;
}

.journal-single-paper:before {
  content: ' ';
  background-image: url("img/journal-single-background.png");
  background-color: transparent;
  background-repeat: no-repeat;
  position: absolute;
  margin-top: -2px;
  margin-left: -2px;
  height: 564px;
  width: 472px;
}

.sidebar-panel-option-button,
.sidebar-panel-option-button-mouse-over,
.sidebar-panel-option-button-mouse-down {
  background-image: none;
  background-color: transparent;
  text-align: left;
  font-size: 13px;
  border: 0;
  padding: 0 0 6px 0;
  height: auto;
}

.sidebar-panel-option-button {
  color: var(--sidebar-action-color);
}

.sidebar-panel-option-button-mouse-over {
  color: var(--sidebar-action-color-hover);
  text-decoration: underline;
  outline: none;
}

.sidebar-panel-option-button-mouse-down {
  color: var(--sidebar-action-color-hover);
  text-decoration: underline;
  outline: none;
}

.top-header-left,
.top-header-center,
.top-header-right,
.pre-footer-center {
  background: none;
}

.rich-page-subheader,
.rich-page-content,
.pre-footer-left,
.pre-footer-right {
  border: none;
}

.sidebar-panel-header-left,
.sidebar-panel-header-text,
.sidebar-panel-header-right,
.sidebar-panel-option-left,
.sidebar-panel-option-right,
.sidebar-panel-footer-left,
.sidebar-panel-footer-center,
.sidebar-panel-footer-right {
  background: none;
}

.sidebar-panel-header-text {
  padding: 0;
  font-weight: normal;
  font-family: inherit;
}

#application-dashboard .rich-page-content {
  padding-top: 1px;
}

.datatable-footer-left-large,
.datatable-footer-right-large,
.datatable-footer-center-large {
  background: none;
}

.breadcrumbs {
  display: none;
}

.rich-page-subheader {
  height: 0;
}

.footer-center,
.footer-left,
.footer-right {
  background: none;
}

.rich-menu-list-strut {
  display: none;
}

.datatable-column-header {
  background-color: #EFEFEF;
}

.child-profile-photo-container {
  width: 100px;
}

.main-menu-item .rich-label-text-decor {
  font-weight: inherit;
}

#viewJournalForm>.rich-panel {
  border: 1px solid #C4C0B9 !important;
}

body,
table td,
select {
  font-family: inherit !important;
}

.modal-panel-header td {
  font: inherit !important;
}

.main-menu-item-class.kocon-main-menu-item {
  font: inherit !important;
}

.sidebar-panel-header-text {
  font: inherit !important;
}

.kocon-main-menu-item>.rich-menu-item-label {
  font-size: inherit;
}

.button.danger {
  color: var(--primary-contrast-color);
  background: none;
  background-color: var(--danger-color);
  border-color: var(--danger-color);
  float: left;
}