// keesy.css

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}


/* Dit werkt voor de pull-down maar geen reload */
html {
    height  : 100%;
    overflow: hidden;
    overflow: hidden;
    position: relative;
}

body {
    height  : 100%;
    overflow: auto;
    position: relative;
}
/* einde */

/* https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals */
span,
input,
textarea,
mat-label {
   -webkit-font-feature-settings: "lnum" !important;
   -moz-font-feature-settings: "lnum" !important;
   font-feature-settings: "lnum" !important;
}

/* Dit is toegevoegd om de bounce tegen te gaan op iPhone PWA modus */
@media screen and (max-width: 768px) {

   html {
       position: fixed;
       width: 100vw;
       max-width: 1024px;
   }

   body {
       overflow: hidden;
       width: 100vw;
       position: fixed;
   }
}
/* einde */

body {
    max-width: 1024px;
    margin: 0 auto !important;  
    font-family: Raleway, Roboto, sans-serif !important;
    background: lightgray;
}

.mat-button-ripple {
    display: none !important;
}
 
.mat-option .mat-option-ripple {
   display: none;
}

.cdk-overlay-container {
  left: unset !important;
  max-width: 1024px;
}

/*
.cdk-overlay-container {
    position: absolute !important;
    min-height: 300px;
}
*/

.osd-form {
    width: 100%;
}

.form-body {
    overflow-x: hidden;
    outline:0;
    scrollbar-width: thin;
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;  
    scrollbar-color: lightgray #eee;    
}

#OCP-ZAAK .form-body,
#OCP-DOCUMENTEN_PORTAAL .form-body {
   background: white;
}

#OSD_DCO-UPLOADEN .form-body {
   background: white;
}

.mat-form-field-label {
   transform: translateY(-.59375em) scale(1) !important;
   width: 100% !important;
}

.ocp-page-card-body {
    background: #fff;
    /*min-height: 100%;*/
}

.ocp-zaak-body,
.ocp-body {
    padding: 0 20px;
    background: #262626;
    flex-grow: 1;
    height: 100%;
}

#OCP-BERICHTEN .form-footer {
   position: relative;
   bottom: 0px;
   left: 0px;   
}

#OCP-PORTAAL .form-container{
    background: #262626;
}

.ocp-aanvraagformulier osd-form-cell#AVR_BTN_LOGIN button,
.ocp-aanvraagformulier osd-form-cell#PTR_BTN_LOGIN button {
   background: var(--keesy-color) !important; /*#DA6D00; */
   font-weight: 600;
   height: 70px;
   padding-left: 6px;
}

.ocp-aanvraagformulier osd-form-cell#AVR_BTN_LOGIN button img,
.ocp-aanvraagformulier osd-form-cell#PTR_BTN_LOGIN button img {
  margin-right: 10px;
}

.mat-form-field {
    width: 100% !important;
}

.form-body .mat-button-toggle-group-appearance-standard,
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
    border: none !important;
    display: flex !important;
    align-items: start;
}

.mat-button-toggle-group-appearance-standard .material-icons:hover {
    background: none!important;
}

mat-button-toggle:hover .mat-button-toggle-focus-overlay {
    display: none;
}

.ocp-show-320-plus {
    display: none !important;
}


/*buttons that hide documenten section*/

.osd-toggle-label,
.osd-toggle-label-selected,
.osd-toggle-label-not-selected,
.osd-toggle-button,
.osd-toggle-button-selected,
.osd-toggle-button-not-selected {
    display: none;
    white-space: normal;
}

.osd-toggle-button-label .osd-toggle-label {
    display: block;
}

.osd-toggle-button-label-selected .osd-toggle-label-selected {
    display: block;
}

.osd-toggle-button-label-not-selected .osd-toggle-label-not-selected {
    display: block;
}

.osd-toggle-button-button .osd-toggle-button {
    display: block;
}

.osd-toggle-button-button-selected .osd-toggle-button-selected {
    display: block;
}

.osd-toggle-button-button-not-selected .osd-toggle-button-not-selected {
    display: block;
}

.osd-column-button-label {
    display: none;
}
.osd-column-header-label {
    display: none;
}

th .osd-column-header-label {
    display: block;
}

td button .osd-column-button-label {
    display: block;
}


/*fixed(sticky) buttons BTN_PHOTO and BTN_DOCUMENTEN*/

.ocp-btn a,
.ocp-btn button {
    box-shadow: 0 10px 20px rgb(0 0 0 / 8%), 0 6px 6px rgb(0 0 0 / 10%)!important;
    font-family: Raleway;
}

.ocp-absolute-pos button{
    position: fixed;
}

/*
.ocp-add-photo-btn,
.ocp-add-document-btn{
        position: fixed;
}
.ocp-add-photo-btn button {
    position: fixed;
    bottom: 160px;
}

.ocp-add-document-btn button{
    position: fixed;
    bottom: 100px;
}
*/

.ocp-btn-icon {
    vertical-align: middle;
    margin-right: 10px;
    font-size: 20px;
}
   
/*
.ocp-add-photo-btn .ocp-btn-icon,
 .ocp-add-photo-btn .mat-button-wrapper {
    vertical-align: middle;
}

.ocp-add-document-btn button .ocp-btn-icon{
    margin-right: 18px!important;
}

.ocp-btn button .ocp-btn-icon,
.ocp-btn button .ocp-btn-icon {
    font-size: 20px!important;
}
*/

/*remove focus after clicking on element and get back to the page*/

/*.cdk-focused.cdk-program-focused {
    display: none;
}
*/
/* start HEADER component - used for the screens: homepage,taken, berichten, overzicht, documenten,contacten ; */

.ocp-header {
    width: 100%;
    background: #262626!important;
    padding: 20px 20px 10px 20px;
    min-height: 55px;
    align-items: center;
}

.ocp-header-back-btn {
   min-width: 60px;
}

.ocp-header-back-btn button span.mat-button-wrapper span {
   max-width: 70px;
   text-overflow: ellipsis;
   overflow: hidden;
   display: inline-block;
}

.ocp-header-title span {
    font-size: 17px;
    font-weight: 500;
    color: var(--keesy-color);
    display: block;
    display: flex;
    justify-content: center;
    white-space: nowrap;
    display: block;
    width: calc( 100vw - 200px);
    max-width: calc( 768px - 200px);
    overflow: hidden;
    text-overflow: ellipsis;
    margin:0 auto;
    /*margin-top: 5px;*/
}

.ocp-header-title-icon {
    color: var(--keesy-color);
    font-size: 25px;
    margin-right: 10px;
    vertical-align: sub;
    margin-top: 1px;
}

.ocp-burger-menu {
    background: transparent;
    box-shadow: none;
    color: #fff;
    /* align-items: center; */
    /* position: absolute; */
    padding-right: 10px;
    min-width:60px;
    text-align: right;
}

.ocp-burger-menu i {
   vertical-align: top;
}

.ocp-home .ocp-header-back-btn,
.ocp-home .ocp-burger-menu {
   min-width: 40px;
}

.ocp-home .ocp-header-title span {
    width: calc( 100vw - 180px);
    max-width: calc( 768px - 180px);
}

div#OCP-DOCUMENT_SELECTIE .ocp-header-back-btn,
div#OCP-DOCUMENT_SELECTIE .ocp-burger-menu {
    min-width:50px;
}

div#OCP-DOCUMENT_SELECTIE .ocp-header-title span {
    width: calc( 100vw - 140px);
    max-width: calc( 768px - 140px);
}

.ocp-burger-menu button {
    height: auto;
    width: auto;
    padding: 0;
    margin: 0;
    line-height: initial;
    box-shadow: none!important;
    min-width: auto;
    background: none;
    color: var(--keesy-color);
}

/* override styles */

#OCP-DOCUMENT_SELECTIE .ocp-header-back-btn button .mat-button-wrapper span,
#OCP-BERICHT_MET_BIJLAGEN .ocp-header-back-btn button .mat-button-wrapper span {
    padding-left: 3px;
}

/*end override styles for header comp*/

/*end HEADER component*/


/* dropdown menu component */

/*style for the dropdown menu to stay inside the grid*/

.mat-button-focus-overlay {
    display: none;
}

/*
.cdk-overlay-container {
    max-width: 1024px;
    margin: 0 auto;
    left: inherit !important;
}
*/

.menu-top-right footer button.modal-dialog-button {
    margin: 0 !important;
    display: flex;
    width: 100%;
}

.menu-top-right footer button .mat-button-wrapper i {
    margin-right: 14px;
    font-size: 20px !important;
    color: #999A99;
    width: 20px;
}

.menu-top-right footer button .modal-dialog-button-name {
    display: flex;
    align-items: center;
}

.menu-top-right footer button .modal-dialog-button-name {
    color: #000;
}

.modal-dialog-button-name {
   font-family: Raleway;
   font-weight: 400 !important;
}

[cdkfocusinitial="true"] .modal-dialog-button-name {
   font-weight: 600 !important;
}


.menu-top-right footer button.modal-dialog-button {
    border-radius: 0;
    border: none !important;
    border-bottom: 1px solid #D9D9D9 !important;
    padding: 8px 14px 12px 14px !important;
    line-height: normal !important;
}

.menu-top-right footer button.modal-dialog-button:last-child {
    border-bottom: none !important;
}

.menu-top-right footer button.modal-dialog-button:last-of-type {
    border: none !important;
}

.menu-top-right .mat-dialog-container {
    padding: 0 !important;
    width: auto !important;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 16%);
    border-radius: 10px 0px 10px 10px;
}

.menu-top-right {
    min-width: auto !important;
    min-height: auto !important;
    margin-top: 62px !important;
    margin-right: 20px !important;
}

.menu-top-right footer .mat-raised-button:not([class*=mat-elevation-z]) {
    box-shadow: none !important;
}


/* end dropdown menu component */


/* start FOOTER component*/

.ocp-tab-btn button {
    box-shadow: none;
    background: transparent;
    color: #999A99;
    margin-bottom: 0 !important;
    box-shadow: none!important;
}

.ocp-tab-btn button i {
    font-size: 40px;
}

.form-footer {
    display: block !important;
    background: #262626;
}
.ocp-zaak-footer {
    margin: 0;
    padding: 10px 5px 0px 5px;
    margin-bottom: 0 !important;
    background: linear-gradient(180deg, #5A5B5A, 37%, #343433);
    display: block!important;
    border-top: 1px solid var(--keesy-color);
}

.ocp-zaak-footer div {
    place-content: space-around!important;
}

.ocp-tab-btn button span {
    display: flex;
    flex-direction: column;
}


/*active button footer*/

.ocp-tab-btn button.mat-focus-indicator.mat-raised-button.mat-button-base.mat-basic.mat-button-disabled,
.ocp-tab-btn .selected {
    color: var(--keesy-color) !important;
}

.ocp-tab-btn button.mat-raised-button {
    background: transparent !important;
    box-shadow: none !important;
    color: #999A99;
}

.ocp-tab-btn .mat-button-wrapper span.ocp-tab-btn-icon-badge {
    color: #000;
    left: initial;
    right: 5px;
    width: 20px; 
    height: 20px;
    font-size: 10px;
}


/* end FOOTER component*/


/* badge */

.ocp-card-action-icon-badge,
.ocp-tab-btn-icon-badge {
    line-height: 1.7;
    position: absolute;
    margin-left: -5px;
    padding: 0.5px;
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 15px;
    font-size: 9px;
    text-align: center;
    background: var(--keesy-color);
    z-index: 1;
    font-weight: 600;
}


/* end yellow badge */


/* end general styles*/


/*1. START HOMEPAGE STYLES*/


/* card table styles */

.ocp-card {
    width: 100%;
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex: 1 0 auto;
}

.ocp-card:first-of-type {
    margin-top: 10px;
}

.ocp-card-body {
    padding: 10px 0 0 12px;
}

.ocp-card-table {
    width: 100%;
    border-spacing: 0;
}

.ocp-card-table tbody {
    width: 100%;
}

.ocp-card-table td {
    padding: 0;
}

.ocp-card-title {
    font-size: 15px;
    font-weight: 500;
}

.ocp-header-back-btn button .mat-button-wrapper span {
    display: flex;
    align-items: center;
    font-size: 13px;
}

.ocp-header-title {
    text-align: center;
    margin-right: 0px!important;
    flex: 1 1 auto !important;
}

.ocp-header-back-btn button {
    background: transparent;
    color: #999A99;
    box-shadow: none!important;
    /*margin-bottom: 0 !important;
    padding-left: 0!important;*/
    padding-left: 5px !important;
    padding-right: 0!important;
    min-width: unset;
}

.ocp-header-back-btn button .mat-button-wrapper span i {
    font-size: 15px;
    padding-right: 2px;
    justify-content: left;
}

.ocp-card-table {
    border-radius: 10px 10px 0px 0px;
}

.ocp-card-table tr {
    line-height: 24px;
}

.ocp-card-table td {
    line-height: 20px;
}

.ocp-card-header .ocp-card-table  tr{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ocp-card-header .ocp-card-table {
  padding: 12px;
}

.ocp-color-selected .ocp-card-table {
    background: var(--keesy-color);
}
.ocp-color-not-selected .ocp-card-table {
    background: var(--keesy-color);
    /* background: #D3D3D3; */
}
.ocp-card-body .ocp-card-table {
    display: flex;
}

.ocp-card-action-btn button {
    border-radius: 10px;
    width: 100%;
    margin: 0;
    position: relative;
    display: flex;
    box-shadow: none!important;
    padding: 0px 0px 5px 12px;
}

.ocp-card-btn button {
    width: 100%;
    padding: 0;
    box-shadow: none!important;
    border-radius: 10px;
}

.ocp-background-yellow {
    background: var(--keesy-color) !important;
}

#OCP-SELECTEER_GEBRUIKER osd-form-cell#_GEBRUIKER button {
    background: transparent;
    font-weight: 500;
}

#OCP-SELECTEER_GEBRUIKER osd-form-cell#_GEBRUIKER .ocp-card-btn {
    padding-left: 10px;
    padding-right: 10px;
}

#OCP-SELECTEER_GEBRUIKER osd-form-cell#_GEBRUIKER .ocp-card-btn i {
    padding-right: 10px;
}

#OCP-SELECTEER_GEBRUIKER .ocp-font-size-17 button {
    font-size: 17px !important;
}

#OCP-SELECTEER_GEBRUIKER #_GEBRUIKER {
   max-width: 340px;
   align-self: center;
   width: 100%;
   margin-top: 10px;
}

.ocp-selecteer-persoon-btn-icon-badge {
   line-height: 0.8;
   position: absolute;
   margin-left: 4px;
   padding: 2px;
   content: "";
   width: 15px;
   height: 15px;
   border-radius: 15px;
   font-size: 15px;
   text-align: center;
   background: #ba0606;
   z-index: 1;
   top: 2px;
   font-size: 40px;
   color: white;
}

.ocp-width-unset-btn button {
   width: unset !important;
}

#OCP-SELECTEER_PERSOON osd-form-cell#_VOLMACHTGEVER button {
    background: transparent;
    font-weight: 500;
    line-height: unset;
    margin: 7px 0;
    white-space: normal;
}

#OCP-SELECTEER_PERSOON osd-form-cell#_VOLMACHTGEVER button {
    background: transparent;
    font-weight: 500;
}

#OCP-SELECTEER_PERSOON osd-form-cell#_VOLMACHTGEVER .ocp-align-left button {
    text-align: left;
    margin-left: 10px;
}

#OCP-SELECTEER_PERSOON osd-form-cell#_VOLMACHTGEVER .ocp-card-btn {
    padding-left: 10px;
    padding-right: 10px;
}

#OCP-SELECTEER_PERSOON osd-form-cell#_VOLMACHTGEVER .ocp-card-btn i {
    padding-right: 10px;
}

#OCP-SELECTEER_PERSOON .ocp-font-size-17 button {
    font-size: 17px !important;
}

#OCP-SELECTEER_PERSOON #BTN_IKZELF {
    margin-top: 10px;
}

#OCP-SELECTEER_PERSOON #BTN_IKZELF button {
    background: var(--keesy-color);
    font-size: 17px !important;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
}

#OCP-SELECTEER_PERSOON #BTN_IKZELF,
#OCP-SELECTEER_PERSOON #_VOLMACHTGEVER {
   max-width: 340px;
   align-self: center;
   width: 100%;
}

.ocp-home .ocp-card-btn button {
    padding-bottom: 10px;
}

.ocp-card-body-label.ocp-align-left {
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    padding-right: 5px;
    vertical-align: baseline;
}

.ocp-card-body-value.ocp-align-left {
    white-space: normal;
    word-break: break-word;
    text-align: left;
    line-height: 24px;
    padding-right: 10px;
}

.header .header-description {
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
}

.ocp-card-detail.ocp-align-left {
    font-size: 13px;
    white-space: normal;
    font-weight: 300;
    text-align: left;
}

.ocp-card-detail.ocp-align-right {
    font-size: 13px;
    font-weight: 300;
    line-height: 24px;
    text-align: right;
    min-width: 80px;
}

.ocp-card-action-icon {
    font-size: 20px;
    width: 25px;
}

.ocp-card-action-label {
    margin-left: 15px;
    font-size: 15px;
    top: 0px;
    position: relative;
    font-weight: 500;
}


/* homepage footer button  */

.ocp-footer-xl-btn {
    width: 100%;
}

.ocp-footer-xl-btn button {
    width: 100%;
    display: block;
    position: relative;
    background: var(--keesy-color);
    padding: 10px;
    font-family: Raleway;
    font-size: 15px;
    font-weight: 500;
    max-width: 340px;
    margin: auto;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
    border-radius: 10px;
}


/*end homepage footer button*/


/*END HOMEPAGE */


/*2.START TAKEN styles*/


/* main background Taken*/

.ocp-taak-card {
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(192.0, 195.0, 192.0, 0.7);
}
.ocp-zaak-header{
    /*padding-bottom: 0!important;*/
    width: 100%;
    background: #262626!important;
    min-height: 65px;
    align-items: center;
    padding: 20px 20px 0px 20px;
}

.ocp-taak-icon {
	font-size: 30px !important;
}

.ocp-taak-open-icon {
	--fa-primary-color: #000000;
	--fa-secondary-color: var(--keesy-color);
	--fa-secondary-opacity: 1.0;
	font-size: 30px !important;
}

.ocp-taak-done-icon {
	font-size: 24px !important;
   color: green;
   margin-left: 5px;
   margin-right: 16px !important;
}

.ocp-taak-label {
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc( 100vw - 110px );    
}

.ocp-taak-card button {
    border-radius: 0!important;
    width: 100%;
    box-shadow: none!important;
}

.ocp-page-card-header {
    background: var(--keesy-color);
    color: #000;
    padding: 10px;
    margin: 10px 0px 0px;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #707070;
}
.ocp-card-id.ocp-align-right {
    float: right;
    font-weight: 500;
    font-size: 13px;
    min-width: 70px;
    text-align: right;
}

.ocp-taak-card button {
    padding: 0;
}

.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-new,
.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-rejected,
.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-obsolete,
.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-done {
    padding: 20px 10px 20px 10px!important;
}

.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-new i,
.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-rejected i,
.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-obsolete i,
.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-done i {
    margin-right: 12px;
    font-size: 20px;
}

.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-new,
.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-rejected,
.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-done {
    background: #fff;
}

.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-obsolete {
    background: #EEEEEE;
}

.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-obsolete i {
    color: #999A99;
}

.ocp-taak-card button .mat-button-wrapper div,
.ocp-taak-card button .mat-button-wrapper div.ocp-taak-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: normal;
}

.ocp-taak-open-icon i {
    color: #000!important;
    font-size: 12px!important;
}

.ocp-taak-card button .mat-button-wrapper div.wrapper-status.grey-zone {
    background: #EEEEEE;
}

button .mat-button-wrapper div.wrapper-status div {
    display: flex;
    align-items: center;
}


/*END TAKEN */


/*3.START Berichten  */

.ocp-berichten-card-body {
    padding: 0 10px;
}

.ocp-berichten-card-link button {
    box-shadow: none;
    text-align: center;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 0px;
    text-shadow: 0 3px 6px rgb(0 0 0 / 16%);
    box-shadow: none!important;
    font-size: 14px;
    line-height: 24px;
}

.message {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.ocp-berichten-date {
    text-align: center;
    margin-top: 15px;
    align-self: normal;
    font-size: 11px;
}

.ocp-berichten,
.ocp-berichten-new {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ocp-berichten-new > .ocp-berichten-in,
.ocp-berichten-new > .ocp-berichten-out {
    background: var(--keesy-color) !important;
}

.ocp-berichten-in {
    display: block;
    border: solid #999A99 1px;
    border-radius: 7px;
    padding: 10px 15px 15px 15px;
    margin: 8px 0px;
    background: #eee;
    line-height: 20px;
    width: 90%;
    margin-right: calc( 10vw ) !important;
    left: 0;
    font-size: 15px;
    line-height: 20px;
    color: #343433;
    font-weight: 400;
    position: relative;
    box-sizing: border-box;
}

.ocp-berichten-out {
    border: solid #999A99 1px;
    border-radius: 7px;
    padding: 10px 15px 15px 15px;
    background: rgb(153 154 153 / 50%);
    line-height: 30px;
    width: 90%;
    margin-left: calc( 10vw ) !important;
    color: #343433;
    font-weight: 400;
    position: relative;
    margin: 8px 0px;
    align-self: flex-end;
    box-sizing: border-box;
    line-height: 20px;
    font-size: 15px;
}

.ocp-berichten-sender {
    font-size: 13px;
    font-weight: 700;
}

.ocp-berichten-time {
    position: absolute;
    right: 15px;
    bottom: 0;
    font-size: 10px;
    color: #343433;
    font-weight: 400;
}

.message-sender {
    font-size: 13px;
    color: #343433;
    font-weight: 400;
}

.ocp-document-thumbnail {
    max-width: 250px;
    width: fit-content;
    object-fit: cover;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 5px;
    border: 2px solid #999A99;
    line-height: 25px;
    height: 100px;
    margin: 10px 0px;
    display: block;

}
.ocp-document-thumbnail img {
    height: 100px;
    width: 100%;
    object-fit: cover;
}
.ocp-berichten .ocp-document-thumbnail{
    display: inline-block;
    font-size: 9px;
    font-weight: 400;
    line-height: 12px;
}

.ocp-page-card-footer {
    display: flex !important;
    align-items: center !important;
    flex: auto !important;
    box-sizing: unset !important;
    margin: 10px;
}

.ocp-berichten .ocp-page-card-footer {
     margin-left: 0px;
     margin-right: 0px;
}

.ocp-page-card-footer div {
    flex-flow: row !important;
}


.ocp-berichten .form-footer {
    width: 100%;
    border-top: 1px solid var(--keesy-color);
    border-bottom: 1px solid var(--keesy-color);
}

.ocp-berichten osd-form-cell#BTN_RECORD,
.ocp-berichten osd-form-cell#BTN_THUMBS_UP,
.ocp-berichten osd-form-cell#BTN_PASTE,
.ocp-berichten osd-form-cell#BTN_BIJLAGEN,
.ocp-berichten osd-form-cell#BTN_SEND {
   justify-content: end;
   margin-bottom: 2px !important;
   padding: 0 !important;
}

.ocp-berichten osd-form-cell#BTN_RECORD.osd-button:focus-within,
.ocp-berichten osd-form-cell#BTN_THUMBS_UP.osd-button:focus-within,
.ocp-berichten osd-form-cell#BTN_PASTE.osd-button:focus-within,
.ocp-berichten osd-form-cell#BTN_BIJLAGEN.osd-button:focus-within,
.ocp-berichten osd-form-cell#BTN_SEND.osd-button:focus-within {
   border: none !important;
}


.ocp-berichten osd-form-cell#BTN_RECORD osd-form-question,
.ocp-berichten osd-form-cell#BTN_THUMBS_UP osd-form-question,
.ocp-berichten osd-form-cell#BTN_PASTE osd-form-question,
.ocp-berichten osd-form-cell#BTN_BIJLAGEN osd-form-question,
.ocp-berichten osd-form-cell#BTN_SEND osd-form-question {
  flex: 0 0 auto !important;
}

#OCP-BERICHT_MET_BIJLAGEN .ocp-page-card-footer {
     margin-left: 0px;
}

.ocp-berichten osd-form-cell#NIEUW_BERICHT textarea,
#OCP-BERICHT_MET_BIJLAGEN osd-form-cell#NIEUW_BERICHT textarea {
   font-size: 15px;
   min-height: 22px;
   max-height: 120px;
   height: 22px;
   line-height: 22px; 
   margin: 0px;   
}

#OCP-BERICHT_MET_BIJLAGEN osd-form-cell#NIEUW_BERICHT {
   margin-left: 15px;
}

#OCP-BERICHT_MET_BIJLAGEN osd-form-cell#BTN_SEND {
   justify-content: end;
   margin-bottom: 2px !important;
}

#OCP-BERICHT_MET_BIJLAGEN osd-form-cell#BTN_SEND osd-form-question {
  flex: 0 0 auto !important;
}

.ocp-page-card-footer-textarea mat-form-field {
    width: 100%;
}

.ocp-page-card-footer-textarea .mat-form-field-infix {
    width: auto;
    border-top:0px!important;
}

.ocp-page-card-footer-btn button {
    background: #000;
    border-radius: 32px;
    height: 32px;
    width: 32px;
    min-width: auto;
    /* margin-bottom: 10px; */
}

.ocp-berichten osd-form-cell#BTN_SEND button > span > span,
#OCP-BERICHT_MET_BIJLAGEN osd-form-cell#BTN_SEND button > span > span {
    padding-top: 2px; 
    padding-right: 3px; 
}

.ocp-page-card-footer-btn span.mat-button-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--keesy-color);
    font-size: 15px;
    transform: translate(-50%, -50%);
}

.ocp-page-card-footer-textarea .mat-form-field-wrapper,
.ocp-page-card-footer-textarea .mat-form-field-infix {
    padding: 0!important;
}

.ocp-page-card-footer-textarea .mat-form-field-label-wrapper {
    display: none;
}

.ocp-page-card-footer-textarea {
    /* width: 100%; */
    flex: 1 1 auto !important;
    background: #f6f6f6;
    border-radius: 7px;
    font-size: 13px;
    display: block;
    position: relative;
    padding: 5px 10px!important;
    margin-left: 10px;
    margin-right: 10px;
}

.ocp-page-card-footer-textarea .mat-form-field-underline,
.ocp-page-card-footer-textarea .mat-form-field-subscript-wrapper {
    display: none;
}

.ocp-page-card-footer-textarea .mat-form-field-appearance-fill .mat-form-field-flex {
    margin: 0;
    padding: 0;
    background: transparent;
}

/*background white fort empty berichten form-body */
.ocp-berichten .form-body{
    background: #fff;
}


/*END Berichten  */


/*4.START Overzicht  */

.ocp-page-card-tab-header {
    width: 100%;
}

.ocp-afspraak-card-body {
   background: white;
   /* background: #eee; */
}

.ocp-afspraak-download-icon {
   padding: 5px;
   margin-left: 10px;
   font-size: 16px;
   width: 16px;
   text-align: center;
   color: black;
}

.ocp-afspraak-download-icon.fa-arrow-down-to-line {
   font-size: 20px;
}

.mat-button-toggle-appearance-standard {
    background: transparent!important;
}

.mat-button-toggle-standalone,
.mat-button-toggle-group {
    display: flex!important;
    justify-content: flex-start;
}

.ocp-more-less-icon {
    color: #000;
    background: transparent!important;
}


/*icon parent positioned relative*/

.osd-toggle-button-label span.ocp-afspraak-label.osd-toggle-label {
    position: relative;
}

.ocp-afspraak-icon {
    font-size: 20px;
}

.ocp-afspraak-download {
   text-align: right;
}

.ocp-gebeurtenis-header div{
       display: initial!important;
}

.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
    line-height: normal !important;
    padding: 0!important;
    margin-right: 20px;
}

td .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
    margin-right: unset;
}

.ocp-gebeurtenis-card {
    margin-bottom: 6px !important;
    background: #fff;
    padding-right: 7px !important;
}

.ocp-gebeurtenis-table .text{
    white-space: normal;
    word-break: break-word;  
}

.ocp-gebeurtenis-table td:first-of-type{
    width: 1%;  
}


.ocp-afspraak-card-body .label {
    white-space: normal;
    position: relative;
    display: flex;
    align-items: flex-start;
}

.ocp-afspraak-label,
.osd-toggle-label-selected {
    font-size: 13px;
}

.ocp-afspraak-detail-value {
    font-weight: 500;
}

.ocp-afspraak-card-body .osd-toggle-label-selected{
font-size: 13px;
}
.ocp-afspraak-label .text,
.ocp-afspraak-detail-value,
.ocp-afspraak-table .text{
    white-space: normal;
    word-break: break-word;  
}

.ocp-afspraak-icon {
    font-size: 20px;
    margin-left: 5px;
    color: var(--keesy-color);
    width: unset;
}

td.ocp-afspraak-icon {
   width: 47px;
}

.ocp-afspraak-card-body .osd-toggle-label-selected tr:nth-child(3) td{
      padding-top:15px;
}

.text,
.osd-toggle-label-selected {
    font-weight: 300;
}

.text span:first-of-type {
    margin-left: 0px!important;
    font-weight: 500;
}

.ocp-afspraak-card-body .mat-button-toggle-group .mat-button-toggle {
    margin-top: 10px;
}

.ocp-afspraak-card-body .mat-button-toggle-group .mat-button-toggle {
    margin-top: 10px;
}

.ocp-afspraak-card-body .label .icon {
    margin-top: 10px;
}

.ocp-oude-afspraak {
   color: gray;
}

.ocp-gebeurtenis-today {
    text-align: center;
    font-size: 11px;
    margin-left: 14px;
}

.ocp-gebeurtenis-today::before {
    content: "";
    width: calc( (50% - 100px) - 20px);
    height: 2px;
    top: 10px;
    opacity: 0.5;
    left: 12px;
    background: #999A99;
    position: absolute;
}

.ocp-gebeurtenis-today::after {
    content: "";
    width: calc( (50% - 100px) - 20px);
    height: 2px;
    top: 10px;
    right: 10px;
    background: #999A99;
    opacity: 0.5;
    position: absolute;
}

@media screen and (min-width: 320px) and (max-width: 374px) {
   
   #OCP-DOCUMENT_SELECTIE .ocp-secondary-body {
      padding: 20px 10px;
   }

   #OCP-DOCUMENT_SELECTIE osd-form-cell#DOCUMENTEN mat-checkbox {
      margin-right: 5px;
   }
    
    .ocp-gebeurtenis-today::before {
        content: "";
        height: 2px;
        top: 7px;
        opacity: 0.5;
        left: 10px;
        background: #999A99;
        position: absolute;
    }
    .ocp-gebeurtenis-today::after {
        content: "";
        height: 2px;
        top: 7px;
        right: 10px;
        background: #999A99;
        opacity: 0.5;
        position: absolute;
    }
}

span.event-aligned-center {
    display: flex;
    align-items: center;
}

.ocp-gebeurtenis-desc {
    /* margin-left: 14px; */
    vertical-align: text-bottom;
    line-height: 20px;
    white-space: normal;
}

.ocp-gebeurtenis-label {
    font-size: 13px;
    line-height: 16px;
    width: 100%;
}

.ocp-gebeurtenis-date {
    /* margin-left: 43px; */
    font-size: 10px;
    line-height: 16px;
}

div#OCP-GEBEURTENISSEN .osd-toggle-button-label {
    width: 100%;
}

.mat-button-toggle {
    line-height: 0;
    position: initial!important;
}

.ocp-gebeurtenis-timeline {
    padding: 0px 0px 0 15px;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px !important;
}

.ocp-gebeurtenis-timeline::before {
    content: "";
    width: 1px;
    height: calc(100% - 40px);
    top: 18px;
    left: 26px;
    background: var(--keesy-color);
    position: absolute;
}

.ocp-page-card-body .ocp-gebeurtenis-card .ocp-gebeurtenis-icon {
    color: var(--keesy-color);
    background: #fff;
    font-size: 18px;
}

.ocp-gebeurtenis-icon {
    color: var(--keesy-color);
    background: #fff;
    font-size: 18px;
    width: 25px;
    margin-right: 10px;
}

.ocp-afspraak-card .ocp-afspraak-card-body {
    border-bottom: 1px solid rgba(192.0, 195.0, 192.0, 0.7);
}

/*.ocp-afspraak-card:last-of-type .ocp-afspraak-card-body {
    border-bottom: 2px solid var(--keesy-color)!important; 
}
*/

.ocp-afspraak-card-body .mat-button-toggle-group {
    border-radius: 0;
    padding: 15px 12px;
    display: flex;
    align-items: flex-start;
}

span.label p {
    font-size: 13px;
    margin: 6px 0px!important;
    word-break: break-word;
}

/*
.ocp-afspraak-detail-value:last-of-type {
    font-weight: 400;
    display: inline-block;
    margin-top: 10px;
}
*/

.mat-button-toggle-group-appearance-standard,
.mat-button-toggle-standalone.mat-button-toggle-appearance-standard {
    border: none !important;
}

.mat-button-toggle-checked {
    background-color: transparent !important;
}

.ocp-gebeurtenis-extra-info {
margin-top: 5px;
font-weight: 400;
white-space: normal;
word-break: break-word;
/* margin-left: 40px; */
}

/*.ocp-afspraak-table{
    width: 100%;
}*/


/*END OVERZICHT PAGE */


/*5.START Documenten    */




.mat-select-value-text,
.mat-select-min-line{
    font-size: 13px;
}
.ocp-document-card-body span {
    width: 100%;
    line-height: 20px;
    font-size: 13px;
    white-space: normal;
    margin-right: 10px;
}

.ocp-document-info-label {
    width: 110px;
    vertical-align: top;
}

.ocp-page-card-body .ocp-page-card-body-text {
    padding: 10px;
}

.ocp-header-cmb .mat-form-field-flex{
    background-color: #eee!important;
    border-radius: 0!important;
}

.ocp-document-card-body .label-when-selected {
    margin-left: -1px!important;
    line-height: 24px;
}

.ocp-header-cmb .mat-form-field-appearance-fill .mat-form-field-flex {
    padding: 0px!important;
}

.ocp-page-card-tab-header mat-form-field .mat-form-field-wrapper {
    padding-bottom: 0px;
}

.ocp-page-card-tab-header .ocp-header-cmb mat-form-field .mat-form-field-wrapper .mat-form-field-underline {
    display: none !important;
}

.ocp-header-cmb mat-select {
    background: #fff;
    border-radius: 3px;
    line-height: unset;
    padding: 5px!important;
}

.ocp-header-cmb .mat-select-arrow-wrapper {
    transform: none !important;
}

.ocp-header-cmb .mat-select-trigger {
    height: 20px !important;
}

.ocp-header-cmb .mat-select-value {
    vertical-align: middle;
    line-height: normal;
}

.ocp-document-card {
    padding: 0 20px 0 0;
    /*padding: 20px 0px 20px 20px;*/
    border-bottom: 1px solid rgba(192.0, 195.0, 192.0, 0.7);
    margin: 0!important;
    display: flex;
    flex: 1 0 auto;
}

div#OCP-DOCUMENTEN #_BODY .ocp-document-card {
   padding: 0 20px;
}

.ocp-document-card > div:first-of-type{
        padding-top: 20px;
}

/*END Documenten   */


/*6.START Contacten  */

/*.ocp-contacten{
    height: 100%;
}*/
.ocp-contact-photo {
    position: relative;
    display: block;
    height: 100px;
    object-fit: cover;
    /*
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border: solid 1px #999A99; */
    border-radius: 5px;
}

.ocp-contact-card {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(192.0, 195.0, 192.0, 0.7);
    margin: 0 !important;
    background: #fff;
}

.ocp-contact-detail,
.ocp-contact-name {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}

.ocp-contact-name-text,
.ocp-contact-toegang-name {
   font-weight: 500;
   font-size: 15px;
}

.ocp-contact-functie {
   font-size: 13px;
   font-weight: 400;
}

.ocp-contact-detail,
.ocp-contact-detail a,
.ocp-contact-detail-text {
    text-decoration: none;
    color: #343433;
    font-size: 15px;
    font-weight: 400;
}

.ocp-contact-name-icon,
.ocp-contact-detail-icon {
    font-size: 15px;
    color: var(--keesy-color);
    padding-right: 3px;
}

.ocp-contact-name-icon {
   display: none;
}

.ocp-contact-detail i {
   margin-right: 10px;
}

.contact-person .material-icons,
.contact-phone .material-icons,
.contact-email .material-icons,
.contact-extrainfo .material-icons {
    color: var(--keesy-color);
    font-size: 20px;
    top: 5px;
    position: relative;
}

.contact-name span:nth-child(2),
.contact-extrainfo span:nth-child(2) {
    margin-left: 5px;
    line-height: 20px;
}

.ocp-page-card-body-text {
    padding: 15px 0px;
}


/*END Contacten  */


/*7.START Taak  uitvoren   */

.ocp-secondary-header {
    padding: 0px;
    background: #EEEEEE;
    margin: 0!important;
    width: 100%;
    border-bottom: 1px solid var(--keesy-color);
}

.ocp-secondary-header-title {
    font-size: 15px;
    font-weight: 500;
    padding: 15px;
}

.ocp-secondary-body {
    padding: 20px;
    /*margin-top: 20px;*/
    background: #fff;
    font-size: 15px;
    flex-grow: 1;
}

.ocp-secondary-body osd-form-cell:last-of-type {
   margin-bottom: 15px;
}

.ocp-label {
    /*padding: 0px 20px 0px 20px;*/
    /*font-weight: 300;*/
}

/*
.ocp-secondary-body .ocp-label {
    font-size: 13px;
    margin-bottom: 20px!important;
}

.ocp-toelichting-cons,
.ocp-taak-omschrijving {
    font-size: 13px;
}
*/

.ocp-textarea .mat-form-field-flex {
    background: transparent;
    border: 1px solid #707070;
    border-radius: 10px;
}

.ocp-textarea .mat-form-field-wrapper {
    padding-bottom: 0!important;
}

.ocp-textarea .mat-form-field-appearance-fill .mat-form-field-flex {
    border-radius: 10px;
    background: #fff;
}

.ocp-textarea .mat-form-field {
    box-sizing: border-box;
    padding: 20px;
}

.ocp-textarea textarea.mat-input-element {
    padding: 0 0 20px 0!important;
    font-style: italic;
}

.ocp-textarea .mat-form-field-infix {
    padding: 0!important;
    border: 0!important;
}

.ocp-textarea .mat-form-field-underline {
    display: none;
}

/* THIS NEEDS CHANGING*/
#OSD_DCO-UPLOADEN #BIJLAGEN {
    margin-top: 0!important;
}

.ocp-footer-btn button {
    background: var(--keesy-color);
    border-radius: 10px;
    /* margin: 16px 40px 0px 0px;*/
    box-shadow: 0 10px 20px rgb(0 0 0 / 8%), 0 6px 6px rgb(0 0 0 / 10%)!important;
}
.ocp-checkbox {
    padding-left: 20px;
}

.ocp-checkbox .mat-checkbox-label {
    font-weight: 300;
    line-height: 18px;
    font-size: 13px;
}

.ocp-checkbox .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.ocp-checkbox .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #fff !important;
    border: 2px solid #000 !important;
}

.ocp-checkbox .mat-checkbox-checkmark {
    fill: #000!important;
}

.ocp-checkbox .mat-checkbox-checkmark-path {
    stroke: #000!important;
}

.ocp-checkbox .mat-checkbox-checkmark-path {
    stroke-width: 5 !important;
}

/*END Taak  uitvoren  */


/*9.START Document toevoegen  */

.ocp-document-card-body {
    width: 100%;
}
/*preview img */

span.osd-upload-add-btn,
span.osd-upload-file-icon,
span.osd-upload-delete-btn,
span.osd-upload-cancel-btn,
span.osd-upload-file-thumbnail {
    display: none;
}

div.osd-upload-file-icon span.osd-upload-file-icon,
div.osd-upload-delete-btn span.osd-upload-delete-btn,
div.osd-upload-cancel-btn span.osd-upload-cancel-btn,
div.osd-upload-file-thumbnail span.osd-upload-file-thumbnail {
    display: block;
}

button.osd-upload-add-btn span.osd-upload-add-btn,
#OCP-BERICHT_MET_BIJLAGEN osd-form-cell#BTN_SHOW_FORM\#OCP\#DOCUMENT_SELECTIE span.mat-button-wrapper > span,
#OCP-BERICHT_MET_BIJLAGEN osd-form-cell#BTN_SELECTEER_OMGEVING span.mat-button-wrapper > span,
#OSD_DCO-UPLOADEN osd-form-cell#BTN_DOCUMENT span.mat-button-wrapper > span {
   display: flex;
   align-items: center;
   line-height: 26px;
}

button.osd-upload-add-btn span.osd-upload-add-btn span,
#OCP-BERICHT_MET_BIJLAGEN osd-form-cell#BTN_SHOW_FORM\#OCP\#DOCUMENT_SELECTIE span.mat-button-wrapper > span span,
#OCP-BERICHT_MET_BIJLAGEN osd-form-cell#BTN_SELECTEER_OMGEVING span.mat-button-wrapper > span span,
#OSD_DCO-UPLOADEN osd-form-cell#BTN_DOCUMENT span.mat-button-wrapper > span span {
   line-height: 18px;
   margin-top: 8px;
   margin-bottom: 8px;
   white-space: normal;
   text-align: left;
}

#OCP-BERICHT_MET_BIJLAGEN #BIJLAGEN button#BIJLAGEN {
   min-height: 40px;
}

#OCP-BERICHT_MET_BIJLAGEN #BTN_SELECTEER_OMGEVING button,
#BTN_SHOW_FORM\#OCP\#DOCUMENT_SELECTIE button {
   text-align: left;
}

#OCP-BERICHT_MET_BIJLAGEN #BTN_SELECTEER_OMGEVING button i,
#BTN_SHOW_FORM\#OCP\#DOCUMENT_SELECTIE button i {
   width: 20px;
   text-align: center;
}

.upload {
    max-width: 400px;
    width: 100%;
    font-size: 13px;
}

.upload .files-list {
   display: flex;
   flex-direction: column;
}

.upload .files-list .single-file {
    /*position: relative;*/
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.osd-upload-file-info {
   max-width: 220px;
}

@media only screen and (max-width: 340px) {
   .osd-upload-file-info {
      max-width: 200px;
   }
}

.osd-upload-file-thumbnail {
   width: 100%;
}

/*
.upload .files-list .single-file .name {
    word-break: break-all;
    padding: 0;
}

.upload .files-list .single-file .delete {
    position: absolute;
    top: 94px;
    right: 30px;
}
*/

/*end preview img*/

.ocp-header-cmb{
        margin-bottom: 0!important;
}
.ocp-header-cmb .mat-form-field-wrapper {
    padding-bottom: 0!important;
}

#OCP-DOCUMENT_SELECTIE .mat-form-field-wrapper {
    padding-bottom: 0!important;
}
/*END Document toevoegen  */


/*10.START Biljage versturen  */

.single-file > .osd-upload-info-document-name {
    margin-top: 10px;
    white-space: normal;
    word-break: break-word;
    font-size: 13px;
    margin-right: 20px;
    max-width: 210px;
}

.ocp-attachment-icon {
   margin-top: 5px;
   font-size: 25px;
   cursor: pointer;
}

.ocp-attachment-icon.fa-file-alt {
   margin-right: 10px;
}

.ocp-attachment-icon.fa-times {
   margin-left: 10px;
}

.osd-upload-delete-btn .ocp-attachment-icon {
   font-size: 20px;
}

.osd-upload-file-size {
   margin-left: 10px;
}

.osd-upload-dropzone {
    display: none;
}

.upload .files-list .single-file {
    margin-left: 20px;
    margin-bottom: 20px;
}


/*END Biljage versturen  */


/*11.START Nieuwe aanvraag  */

.ocp-link-btn button {
    background: transparent;
    box-shadow: none!important;
    color: #000;
    border: none!important;
    font-family: Raleway;
    font-weight: 400;
    /* padding-left: 0px;
    padding-right: 0px; */
}

/*
.ocp-link-btn {
    padding: 16px 0px 42px 60px;
}
*/

.ocp-btn a,
.ocp-btn button {
    background: #EEEEEE;
    box-shadow: none;
    border: 1px solid var(--keesy-color);
    margin-bottom: 0!important;
    border-radius: 10px;
    /*
    padding: 5px;
    width: 270px;*/
    font-weight: 400;
    width: 100%;
    box-shadow: 0 10px 20px rgb(0 0 0 / 8%), 0 6px 6px rgb(0 0 0 / 10%);
}

.ocp-btn button span {
    font-size: 13px;
}

.ocp-secondary-footer {
   background: #EEEEEE;
   padding: 10px 20px 10px 20px;
	border-top: 1px solid var(--keesy-color);
}

.ocp-btn .ocp-document-thumbnail a {
    box-shadow: none;
    background: white;
    border: none;
    margin: 0!important;
    padding: 0px;
    display: block;
    height: 0px;
}

/*END Nieuwe aanvraag  */


/*12.START Archief     */


/*no code needed - reusable code from homepage*/


/*END  Archief    */


/*13.START Instellingen */


.ocp-textfield {
   /* margin-bottom: 18px!important;
    padding:0 20px;*/
/*   padding-bottom: 10px;*/
}

.ocp-textfield input {
   padding-top: 8px;
}

.ocp-secondary-body .ocp-field-label {
    /*padding: 16px 0px 0 20px;*/
}

.ocp-textfield .mat-form-field-underline {
    display: none;
}

.ocp-textfield .mat-form-field {
    width: 100%!important;
}

.ocp-textfield .mat-form-field-wrapper {
    padding-bottom: 0!important;
}

.ocp-textfield .mat-form-field-appearance-fill .mat-form-field-infix {
    padding: 0!important;
}

.ocp-textfield .mat-form-field-appearance-fill .mat-form-field-flex {
    padding: 10px 10px 10px 10px;
    border: 1px solid #C1C1C1;
    box-shadow: 0 1px 6px rgb(0 0 0 / 15%), 0 3px 6px rgb(0 0 0 / 10%);
    border-radius: 10px;
}

.ocp-hr hr {
    border-top: 1px solid gainsboro;
    margin-bottom: 0!important;
}

.ocp-field-label {
    margin-bottom: 10px!important;
    color: #000!important;
}

.ocp-link-label-btn button {
    margin-bottom: 0;
    width: 100%;
    padding: 0!important;
    box-shadow: none!important;
    border-top: 1px solid #999A99;
    border-bottom: 1px solid #999A99;
    border-radius: 0!important;
}

.ocp-link-label-btn-icon {
    font-weight: bold;
    width: auto;
    margin-right: 30px;
    margin-left: 30px;
}

.ocp-link-label-btn button span {
    display: flex!important;
    align-items: center!important;
    flex: auto!important;
    justify-content: center!important;
    color: #000!important;
    font-weight: 500!important;
    padding: 5px 0px;
    width: auto;
}


/*toggle btn*/

.osd-toggle-button-not-selected .ocp-toggle-btn-icon {
    color: #d6d6d6;
}

.osd-toggle-button-selected .ocp-toggle-btn-icon {
    color: var(--keesy-color);
}

.ocp-toggle-btn{
    padding-left: 20px;
}
.ocp-toggle-btn-icon {
    font-size: 30px;
    padding-top: 10px;
}


.ocp-secondary-body .osd-toggle-label-selected,
.ocp-secondary-body .osd-toggle-label-not-selected {
        font-size: 13px;
        margin-top: 10px;
        margin-right: 20px;
}
.osd-toggle-label-selected,
.osd-toggle-label-not-selected {
    font-weight: 300;
    white-space: normal;
}

.ocp-toggle-btn .mat-button-toggle-group {
    display: flex!important;
    flex-direction: column-reverse;
    align-items: flex-end;
    padding: 0!important;
    /*float:right;*/
}


/*end toggle btn*/


/*END Instellingen  */



/*MEDIA SCREENS*/

@media screen and (min-width: 375px) {
    .ocp-show-320-plus {
        display: block !important;
    }
    .ocp-hide-320-plus {
        display: none !important;
    }
    
}

@media screen and (max-width: 767px) {
    .ocp-add-photo-btn .ocp-centered button, 
    .ocp-add-document-btn .ocp-centered button{
        width: 90%;
    }
    
    .ocp-centered button {
        margin: 0  auto;
        display: block;
    }
    
    /*
    .ocp-link-btn {
       margin: 0 auto!important; 
        padding: 16px 0;
    }
    */
    
    /* media queries FOOTER component */
    .ocp-tab-btn button i {
        font-size: 24px;
    }
    .ocp-tab-btn button {
        padding: 0;
    }
    .ocp-tab-btn button span {
        font-size: 12px;
    }
    .ocp-footer {
        margin: 0 auto;
        padding: 0 20px 0 20px;
    }
    .ocp-zaak-footer div {
        place-content: space-around!important;
        flex-flow: nowrap!important;
    }
    /* end media queries FOOTER component*/

    .ocp-header-cmb span.mat-form-field-label-wrapper .mat-form-field-label{
        margin-left: 20px;
    }
    
/*    
    .ocp-absolute-pos,
    #BTN_PHOTO button,  
    #BTN_SHOW_FORM\#OCP\#DOCUMENT_SELECTIE button,
    #BTN_DOCUMENT button 
    {
     left:20px;   
    }
*/

    .ocp-field-label-wrapper > div{
        flex-flow: column wrap!important
    }
    .ocp-toggle-btn .mat-button-toggle-group{
        align-items: flex-start;
    }
    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{
        margin-right: 0!important;
    }
}

@media screen and (min-width: 768px) {
    .ocp-add-photo-btn, 
    .ocp-add-document-btn {
        margin-left: 20px;
    }
}

/**OVERRIDES**/

.ocp-afspraak-card-body .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
    margin-right: 0!important;
}

.ocp-rtl {
    direction: rtl;
}
 
/*background class before loading the data - added from js*/
.white-bg {
    background: #fff;
    margin: 0 20px;
}
.padding-0 {
    padding: 0!important;
}
.ocp-bold {
    font-weight: 500;
}


/* general for multiple pages */

div#OCP-TOEGANGSCODE div#PG-GEBRUIKERSNAAM .ocp-header-title span,
div#OCP-TOEGANGSCODE div#PG-TOEGANGSCODE .ocp-header-title span,
div#OCP-TOEGANGSCODE div#PG-TOEGANGSCODE_BEVESTIGING .ocp-header-title span {
   overflow: visible;
}

div#OCP-TOEGANGSCODE osd-form-cell#GEBRUIKERSNAAM .mat-form-field-flex {
   box-shadow: none !important;
}

div#OCP-TOEGANGSCODE osd-form-cell#GEBRUIKERSNAAM mat-error {
   margin-top: 13px;
}

div#OCP-TOEGANGSCODE osd-form-cell#GEBRUIKERSNAAM .mat-form-field-subscript-wrapper {
  font-size: 80%;
}

.ocp-toegangscode-body {
    padding: 20px;
    /*margin-top: 20px;*/
    background: #262626;
    height: 100%;
}


.ocp-margin-top-10 {
   margin-top: 10px;
}

.ocp-margin-top-20 {
   margin-top: 20px;
}

.ocp-margin-top-30 {
   margin-top: 30px;
}

.ocp-margin-left-10 {
   margin-left: 10px;
}

.ocp-margin-left-20 {
   margin-left: 20px;
}

.ocp-margin-right-10 {
   margin-right: 10px;
}

.ocp-margin-right-20 {
   margin-right: 20px;
}

.ocp-margin-bottom-10 {
   margin-bottom: 10px;
}

.ocp-margin-bottom-20 {
   margin-bottom: 20px;
}




p:first-of-type {
   margin-top: 5px;
}

.ocp-large {
   width: calc( min( 80vw, ( 0.8 * 768px ), 300px ) );
}

.ocp-small {
   width: 30%;
   max-width: 150px;
}

.ocp-body {
    font-size: 13px;
}

.ocp-body .ocp-label {
   color: white;
}

.ocp-yellow-btn a,
.ocp-yellow-btn button {
   color: black;
   background-color: var(--keesy-color);
}   

.mat-form-field-label-wrapper:empty {
   display: none;
}

.ocp-textfield-without-label .mat-form-field-infix,
.ocp-textarea-without-label .mat-form-field-infix {
   border-top: 0px;
}

.ocp-textfield-without-label input,
.ocp-textarea-without-label input {
   padding-top: 5px;
}

.ocp-form-footer {
   padding: 10px 20px 10px 20px;
	border-top: 1px solid var(--keesy-color);
   background: #262626;
}

button i.fa-chevron-right {
   margin-left: 5px;
}

.ocp-link-btn.ocp-yellow button span {
    color: var(--keesy-color);
}

.ocp-form-body .ocp-label {
   margin-left: 5px;
   color: white;
}

.ocp-toegangscode-body {
   font-size: 15px;
}   

.ocp-form-body .ocp-textfield, 
.ocp-form-body .ocp-textarea,
.ocp-form-body .ocp-cmb,
.ocp-form-body .ocp-radio-btn,
.ocp-form-body .ocp-vertical-radio-btn {
   color: black;
   background: white;
}

.ocp-form-body .ocp-textfield .mat-form-field-flex,
.ocp-form-body .ocp-textarea .mat-form-field-flex {
   border-radius: 0px;
}

.ocp-form-body .ocp-cmb .mat-form-field-wrapper {
   padding-bottom: 0px;
}

.ocp-form-body .ocp-cmb .mat-form-field-underline {
   display:none
}

.ocp-form-body {
   padding: 20px;
   background: #262626;
   flex-grow: 1;
   font-size: 15px;
   height: 100%;
}

.ocp-form-body .ocp-radio-btn,
.ocp-form-body .ocp-vertical-radio-btn {
   padding: 10px;
}

.ocp-form-body .ocp-radio-btn .mat-radio-button {
   padding: 10px 30px 10px 10px;   
}

div#OSD_EMV-VERIFIEER .ocp-textfield,
div#OSD_TNV-VERIFIEER .ocp-textfield {
   max-width: 300px;
}

@media screen and (min-width: 768px) {
   div#OSD_EMV-VERIFIEER .ocp-textfield,
   div#OSD_TNV-VERIFIEER .ocp-textfield {
      max-width: 400px;
   }
}

div#OSD_EMV-VERIFIEER .ocp-btn button span,
div#OSD_TNV-VERIFIEER .ocp-btn button span {
   font-size: 14px !important;
   font-weight: 600 !important;
}

.ocp-secondary-body .ocp-btn {
   max-width: 300px;
}

@media screen and (min-width: 768px) {
   .ocp-secondary-body .ocp-btn {
      max-width: 400px;
   }
}

.ocp-berichten-date:empty {
   display: none;
}

#OCP-DOCUMENT_SELECTIE .ocp-secondary-body {
   padding-top: 0px;
}

#OCP-DOCUMENT_SELECTIE .form-body {
   background: white;
   scrollbar-color: lightgray white;
}

#OCP-PORTAAL #PG-SELECTEER_GEBRUIKER [id$="BTN_VERWIJDER"] button {
   padding-right: 10px;
}

#OCP-PORTAAL #BTN_SHOW_FORM\#OCP\#SELECTEER_OMGEVING button {
   padding-top: 0px !important;
   padding-bottom: 0px !important;
}

#OCP-PORTAAL #BTN_SHOW_FORM\#OCP\#START_AANVRAAG button {
   padding-top: 0px !important;
   padding-bottom: 0px !important;
}

.ocp-home ::-webkit-scrollbar {
  width: 8px;
  background: #262626;
}

::-webkit-scrollbar-thumb {
  background: gray;
  border-radius: 5px;
}

.ocp-font-size-13 {
   font-size: 15px;
}

.ocp-font-size-14 {
   font-size: 15px;
}

.ocp-font-size-15 {
   font-size: 15px;
}

.ocp-font-size-16 {
   font-size: 16px;
}

.ocp-font-size-17 {
   font-size: 17px;
}

.ocp-fat {
   font-weight: 700;
}

.osd-form .mat-form-field,
.osd-form .mat-radio-button, 
.osd-form .mat-select,
.osd-form .mat-checkbox {
        font-family: Raleway;
}

#PG-PINCODE_LOGIN #_BODY {
   flex: 1 0 630px;
}

.ocp-width-200 {
   min-width: 200px;
}

.ocp-width-300 {
   min-width: 300px;
}

.ocp-width-400 {
   min-width: 400px;
}

.ocp-width-500 {
   min-width: 500px;
}

.ocp-width-600 {
   min-width: 600px;
}

.ocp-width-700 {
   min-width: 700px;
}

.ocp-instellingen-body {
    padding: 0 10px 0 10px;
    background: #fff;
    font-size: 15px;
    flex-grow: 1;
}

.ocp-instelling {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}
   
.ocp-instelling-name {
   font-weight: 400;
   margin-right: 20px;
}

.ocp-instelling-value-and-icon {
   display: flex;
   justify-content: end;
   flex-direction: row;
   flex: 0 0 auto;
   align-items: center;
}

.ocp-instelling-value {
   font-weight: 500;
   text-overflow: ellipsis;
   overflow: hidden;
   max-width: calc( 100vw - 55px);
}

.ocp-instelling-open-icon {
    color: #000!important;
    font-size: 12px!important;
}

.ocp-instelling-card {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(192.0, 195.0, 192.0, 0.7);
}

.ocp-instelling-card button {
    padding: 0 10px 0 10px;
    border-radius: 0!important;
    width: 100%;
    box-shadow: none!important;
    line-height: 30px;
}

.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-done {
    padding: 20px 10px 20px 10px!important;
}

.ocp-taak-card button .mat-button-wrapper .ocp-taak-status-done i {
    margin-right: 12px;
    font-size: 20px;
}

.ocp-taak-card button .mat-button-wrapper div,
.ocp-taak-card button .mat-button-wrapper div.ocp-taak-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: normal;
}

#OCP-INSTELLINGEN .form-body {
   background: white;
}

#OCP-INSTELLINGEN .ocp-header-title span {
    width: calc( 100vw - 150px);
    max-width: calc( 768px - 150x);
}

#OCP-INSTELLINGEN .ocp-header-back-btn osd-form-button {
   display: flex;
}

#OCP-INSTELLINGEN .ocp-header-back-btn,
#OCP-INSTELLINGEN .ocp-burger-menu {
   min-width: unset;
   width: 50px;
}

#OCP-INSTELLINGEN .ocp-header-back-btn button span,
#OCP-INSTELLINGEN .ocp-burger-menu button span {
   text-overflow: ellipsis;
   overflow: hidden;
   display: block;
   width: 50px;
  text-align: left;
}
}

#OCP-INSTELLINGEN .mat-form-field-infix {
    border-top:0px!important;
}

#OCP-INSTELLINGEN .mat-form-field-subscript-wrapper {
   position: relative;
   padding: 0 5px 10px 10px;
   font-size: 100%;
}
 
#OCP-INSTELLINGEN .ocp-vertical-radio-btn mat-error {
   margin-left: 10px;
   margin-top: 10px;
   margin-right: 10px;
   font-weight: 500;
   display: flex;
}

#OCP-INSTELLINGEN .fa-exclamation {
   margin-right: 5px;
}
 
#OCP-INSTELLINGEN #CODE {
   max-width: 300px;
}
/* end */

/* OSD */

.osd-scroll-y {
   scrollbar-width: thin;
   overflow-y: auto;
   height: 100%;
}

.osd-scroll-y > div {
   height: 100%;
}

.osd-height-100pct {
   height: 100%;
}

.osd-max-height-100pct,
osd-form-cell.osd-max-height-100pct > osd-form-question {
    max-height: 100%;
}
 
osd-form-cell.osd-max-height-100pct osd-form-question > div {
    height: 100%;
}
 
osd-form-cell.osd-max-height-100pct osd-form-table {
   max-height: 100%;
   display: flex;
}
 
osd-form-cell.osd-max-height-100pct osd-form-table > div.form-table {
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin; 
}
 
.osd-height-30pct {
    height: 30%;
}
 
osd-form-cell.osd-height-100pct > div {
    height: 100%;
}

.osd-width-100pct {
   width: 100%;
}

.osd-width-100pct-important {
   width: 100% !important;
}

.osd-max-width-100pct {
   max-width: 100%;
}

.osd-no-border {
    border: none;
}

.osd-no-border > button {
    border: none;
}

.osd-background-transparent {
    background-color: transparent;
}

.osd-background-color-gray {
    background-color: gray;
}

table {
    width: 100%;
    border-collapse: separate;
  }
  
.mat-cell {
  padding: 0px 8px 0px 8px;
}

.form-table {
  border: 1px solid lightgrey;
  margin-bottom: 30px;
}

.form-table-no-rows {
  /*height: 60px;*/
  width: 100%;
  border-bottom: 1px solid #E0E0E0;
}

th.string > div, th.button > div {
  padding-left: 7px;
}

th.date > div, th.datetime > div {
  padding-left: 9px;
}

th.button > div,
th.boolean > div,
th.toggle > div {
justify-content: center;
}

th.boolean .mat-sort-header-content {
    padding-left: 18px;
}

td.button,
td.boolean,
td.toggle{
    text-align: center;
}

th.integer > div, 
th.float > div, 
th.amount > div {
  justify-content: right;
}

th.integer, 
th.float, 
th.amount {
    padding-right: 9px;
}

td.integer, 
td.float, 
td.amount {
  text-align: right;
}

th.boolean {
  width: 80px;
}

th.button,
th.toggle {
    width: 120px;
  }
  
th.float, th.amount {
  width: 120px;
}

th.integer {
  width: 100px;
}

th.date {
  width: 120px;
}

th.datetime {
  width: 180px;
}

tr.selected {
  background-color: #F5F5F5;
}

tr:focus {
  border: 2px solid lightgrey;
}

.material-icons {
  margin-top: 4px;
}

osd-form-table button {
  height: 32px;
  vertical-align: middle;
  min-width: 50px;
}

osd-form-table input {
  padding: 5px;
  margin-left: -5px;
  font-size: 14px;
}

.mat-paginator-sticky {
  bottom: 0px;
  position: sticky;
  z-index: 10;
}

.osd-background-transparent {
    background-color: transparent;
}

.osd-background-color-gray {
   background-color: gray;
}

tr.osd-background-color-gray {
   background-color: gray;
}

.osd-panel-table tr.selected {
    background-color: transparent;
}

.osd-panel-table tr.selected.osd-background-color-gray {
    background-color: gray;
}

/* MvE 15-1-2022 this tells the flex not to increase height above parent size. */
/* AnVi 28-2-2022 this fixes in many cases the full collapse of cells */

.form-container {
    min-height: 1px;
}

.modal-dialog-body .form-container {
    height: unset;
}

.osd-flex-1-1-auto {
    flex: 1 1 auto
}

a .ocp-afspraak-icon {
    color: black;
    margin-right: 0px;
    margin-left: 20px;    
}

.ocp-taak-open-icon .fa-chevron-right {
    margin-bottom: 6px;
    vertical-align: middle;
    font-size: 16px !important;
}

/* Hide tinyMCE status text */
.tox-statusbar__text-container {
    display: none !important;
}

div.tox-statusbar div.osd-text-error-status {
    color: red;
}

tr.osd-row-follows-family-row .ocp-berichten-date,
tr.osd-row-follows-family-row .kmp-berichten-date {
    display: none;
}

/*
tr.osd-row-highlight > td {
        border-top: solid 2px red;
        border-bottom: solid 2px red;
}

tr.osd-row-highlight > td:last-of-type {
    border-right: solid 2px red;
}
*/

div#KMP-ZAAK_BERICHTEN .form-table {
    margin-bottom: 0px;
    border: none;
}

div#KMP-ZAAK_BERICHTEN .form-table td {
    border: none;
}

osd-form-cell#_MESSAGES > div > osd-form-cell::nth-child(2) .form-table {
    border-top: 0px;
}

.toast-container {
    position: absolute !important;
}

.toast-warning {
    width: 350px !important;
    background-color: #bd362f !important;
}

/* roboto-300 - latin-ext_latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
         url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin-ext_latin */
@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 400;
 src: url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-300italic - latin-ext_latin */
@font-face {
 font-family: 'Roboto';
 font-style: italic;
 font-weight: 300;
 src: url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300italic.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300italic.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-italic - latin-ext_latin */
@font-face {
 font-family: 'Roboto';
 font-style: italic;
 font-weight: 400;
 src: url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin-ext_latin */
@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 500;
 src: url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500italic - latin-ext_latin */
@font-face {
 font-family: 'Roboto';
 font-style: italic;
 font-weight: 500;
 src: url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500italic.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500italic.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin-ext_latin */
@font-face {
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 700;
 src: url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700italic - latin-ext_latin */
@font-face {
 font-family: 'Roboto';
 font-style: italic;
 font-weight: 700;
 src: url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/roboto-v29-latin-ext_latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* raleway-300 - latin */
@font-face {
 font-family: 'Raleway';
 font-style: normal;
 font-weight: 300;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-300.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-300.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-500 - latin */
@font-face {
 font-family: 'Raleway';
 font-style: normal;
 font-weight: 500;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-500.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-500.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-500.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-regular - latin */
@font-face {
 font-family: 'Raleway';
 font-style: normal;
 font-weight: 400;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-regular.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-600 - latin */
@font-face {
 font-family: 'Raleway';
 font-style: normal;
 font-weight: 600;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-600.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-600.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-600.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-700 - latin */
@font-face {
 font-family: 'Raleway';
 font-style: normal;
 font-weight: 700;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-700.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-700.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-900 - latin */
@font-face {
 font-family: 'Raleway';
 font-style: normal;
 font-weight: 900;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-900.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-900.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-900.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-800 - latin */
@font-face {
 font-family: 'Raleway';
 font-style: normal;
 font-weight: 800;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-800.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-800.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-800.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-300italic - latin */
@font-face {
 font-family: 'Raleway';
 font-style: italic;
 font-weight: 300;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-300italic.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-300italic.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-300italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-italic - latin */
@font-face {
 font-family: 'Raleway';
 font-style: italic;
 font-weight: 400;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-italic.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-italic.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-500italic - latin */
@font-face {
 font-family: 'Raleway';
 font-style: italic;
 font-weight: 500;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-500italic.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-500italic.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-500italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-600italic - latin */
@font-face {
 font-family: 'Raleway';
 font-style: italic;
 font-weight: 600;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-600italic.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-600italic.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-600italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-700italic - latin */
@font-face {
 font-family: 'Raleway';
 font-style: italic;
 font-weight: 700;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-700italic.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-700italic.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-700italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-800italic - latin */
@font-face {
 font-family: 'Raleway';
 font-style: italic;
 font-weight: 800;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-800italic.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-800italic.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-800italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-900italic - latin */
@font-face {
 font-family: 'Raleway';
 font-style: italic;
 font-weight: 900;
 src: url('../assets_3rdparty/fonts/raleway-v22-latin-900italic.eot'); /* IE9 Compat Modes */
 src: local(''),
      url('../assets_3rdparty/fonts/raleway-v22-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../assets_3rdparty/fonts/raleway-v22-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-900italic.woff') format('woff'), /* Modern Browsers */
      url('../assets_3rdparty/fonts/raleway-v22-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
      url('../assets_3rdparty/fonts/raleway-v22-latin-900italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

.ocp-rtl {
   direction: rtl;
}

button {
  touch-action: manipulation;
}

.ocp-white-background {
  background-color: #FFFFFF;
}   

.ocp-zaak > .form-body {
  border-left: 20px solid #262626;
  border-right: 20px solid #262626;
}

mat-spinner circle {
  stroke: #999A99 !important;
}

.ocp-berichten .form-footer {
   border-bottom: 0px solid var(--keesy-color);
}

/*
.ocp-document-thumbnail img {
  background-image: url( "../assets/thumbnail.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 100px;
  object-fit: fill;
  background-size: 50px auto;
  background-repeat: no-repeat;
  min-width: 50px;
  width: auto;
  max-width: 250px;
}
  
#OCP-BERICHTEN 
*/
.ocp-document-thumbnail img {
  background-image: url( "../assets/thumbnail.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 100px;
  object-fit: fill;
  background-size: 70px auto;
  background-repeat: no-repeat;
  min-width: 70px;
  width: auto;
  max-width: 250px;
  border-radius: 3px;
}
  
#OCP-BERICHTEN a.ocp-document-thumbnail {
  margin-right: 145px;
}

@media only screen and (max-width: 374px) {
    #OCP-BERICHTEN .ocp-document-thumbnail img {
      max-width: 215px;
    }
}

osd-form-cell:empty {
  display: none;
}

.ocp-page-card-body-text {
  font-size: 13px;
}

span, td {
  word-break: break-word;
}

osd-form-upload .error {
  display: block;
  color:   red;
}

/*
.ocp-footer-btn button {
   margin-bottom: 16px;
}
*/

/* Dialog */
.mat-dialog-container {
   background-color: #EEEEEE !important;
   border-radius: 10px !important;
   border: 2px solid var(--keesy-color);
   overflow: visible !important;
   max-width: 500px;
}

.modal-dialog-title {
   text-align: center !important;
   font-weight: bold !important;
   margin-bottom: 20px !important;
}

.modal-dialog-footer {
   margin-top: 20px;
  display: flex;
  justify-content: center;
   border-top: #999999 1px solid;
}

.modal-dialog-footer, .modal-dialog-button {
   font-weight: 300 !important;	
}


.modal-dialog-footer button:first-child {
  margin-right: auto;
}

.modal-dialog-footer button:last-child {
  margin-left: auto;
}

.modal-dialog-button {
  background: transparent !important;
  box-shadow: none !important;
   padding: 0px !important;
}

[cdkfocusinitial="true"] {
   font-weight: 500 !important;
}

[cdkfocusinitial="true"] .mat-dialog-button-name {
   font-weight: 600 !important;
}

.menu-top-right .modal-dialog-footer {
   flex-direction: column;
   margin-top: 0px;
   border-top: none;
}

.menu-top-right .mat-dialog-container {
   border: none;
}

.ocp-top-menu-label {
   font-weight: 500 !important;
}

/* Welkom */
.ocp-keesy-logo {
  max-width: 150px;
  display: block;
  margin: 10px auto 10px auto;
  max-height: 70px;
}

.ocp-gemeente-logo {
  max-width: 250px;
  display: block;
  margin: 10px auto 10px auto;
  max-height: 70px;
}

#PG-SELECTEER_GEBRUIKER .ocp-link-btn {
   padding: 0;
}


/* DigiD button */
.ocp-digid-btn button.mat-raised-button {
   background: transparent !important;
   box-shadow: none !important;
   padding: 0px;
}

.ocp-digid-btn {
   padding: 5px;
   width: 100%;
   max-width: 340px;
   margin: 0 auto;
   /* background-color: #E17000; */
   background-color: var(--keesy-color);   
   border-radius: 10px;
   display: flex;
   flex-direction: row;
}

.ocp-background-digid-green {
   background-color: #E17000 !important;
}

.ocp-digid-btn-img {
   height: 60px;
   margin-right: 20px;
   vertical-align: middle;
}

.ocp-digid-btn-text {
   color: black;
   vertical-align: middle;
   font-weight: 600;
   font-size: 16px;
}

/* Toegangscode */
#OCP-INLOGGEN_PINCODE {
   #BTN_ANDERE_GEBRUIKER {
      padding: 0px !important;
   }
}

#BTN_TOEGANGSCODE_VERGETEN {
   padding: 0px !important;
}

.pincode-digits {
   margin: 0 auto !important;
   text-align: center;
}

.pincode-digit {
   font-size: 60px;
   color: var(--keesy-color);
  height: 30px;
  width: 25px;
  display: inline-block;
}

.pincode-digit:not(:first-child) {
   margin-left: 10px;
}

.numeric-keyboard {
   position: absolute;
  bottom: 0;
   left: 50%;
  transform: translate(-50%, 0);
  width: 100vw;
  max-width: 428px;
  color: black;
  background-color: transparent;
  z-index: 99;
}

/*
#PG-TOEGANGSCODE .numeric-keyboard {
   left: 50%;
   transform: translate(-50%, 0);
}
*/
.numeric-keyboard table {
   width: 100%;
   /*max-width: 1024px;*/
   margin: 5px auto;
}

.numeric-keyboard table td {
   width: 33%;
}

.numeric-keyboard .mat-raised-button {
   
   background-color: #777;
   font-size: 1.5em;
   width: 100%;
   height: 52px;
}

.pincode-digits .mat-error {
   display: block;
}

.numeric-keyboard button .mat-ripple {
   display: none;
}

.mat-form-field-subscript-wrapper {
   display: block;
}

.ocp-yellow, .ocp-yellow span {
   color: var(--keesy-color) !important;
}

.ocp-grey {
   color: #999A99;
}

.ocp-center {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

.ocp-align-middle {
   text-align: center;
}

.ocp-mandatory {
   color: red !important;
}

.ocp-header {
  padding: 15px 12px 15px 12px;
}   

#OCP-PORTAAL .ocp-header {
  padding: 15px 12px 5px 12px;
}

.ocp-zaak-header {
  padding-top: 15px;
  padding-left: 12px;
  padding-right: 12px;
}

.ocp-zaak .form-body {
  border-left-width: 12px;
  border-right-width: 12px;
}

@media (max-width: 320px) {

  .ocp-zaak-footer {
     padding-left: 0px;
     padding-right: 0px;
     padding-bottom: 0px;
  }

  #PG-PINCODE_LOGIN .ocp-header {
     padding: 15px 12px 0px 12px;
     min-height: unset;
  }   

  .ocp-body, .ocp-footer {
     padding: 0 12px;
  }
  
  .ocp-card:first-of-type {
     margin-top: 0px;
  }

  .ocp-page-card-header {
     margin: 10px 0px 0px;
  }
  
  .ocp-card {
     margin-bottom: 20px !important;
  }
  
  /*
  .ocp-header-title span {
     height: 26px;
  }
  */
  
  .ocp-header-title-icon {
      font-size: 22px;
  }

   .pincode-digit {
       font-size: 40px;
       color: var(--keesy-color);
   }
}

.ocp-vertical-radio-btn {
   font-weight: 300;
}

.ocp-vertical-radio-btn mat-radio-button {
   display: block;
   margin-top: 10px;
   margin-left: 10px;
}

.osd-form button {
  font-family: Raleway;
}

/*
@media only screen and (max-height: 569px) {
   #PG-PINCODE_LOGIN #_HEADER {
       display: none !important;
   }

   .ocp-gemeente-logo {
       width: calc(100vw / 3);
       max-width: 250px;
       display: block;
       margin: 10px auto 0px auto;
   }

   .pincode-digit {
       font-size: 40px;
       color: var(--keesy-color);
   }
}
*/

.osd-margin-auto {
   margin: auto;
}

.osd-no-border-btn button {
  box-shadow: none !important;
  background: transparent;
  font-size: 16px;
}

 .osd-background-white {
   background: white;
 }
 
.osd-align-middle {
   text-align: center;
}

.osd-align-left {
   text-align: left;
}

.osd-align-right {
   text-align: right;
}

#OSD_DCO-UPLOADEN osd-form-cell#TGL_HIST_TMP {
   font-weight: 600;
}

#OSD_DCO-UPLOADEN osd-form-cell#TGL_HIST_TMP i {
   margin-left: 10px;
   margin-right: 10px;
}

.ocp-dco-toelichting-client {
   font-family: Raleway;
   font-size: 15px;
   font-weight: 400;
   padding-left: 2px;
}

.ocp-dco-datum {
   font-family: Raleway;
   font-size: 13px;
   font-weight: 300;
   padding-left: 2px;
}

.ocp-dco-toelichting-cons {
   font-family: Raleway;
   font-size: 15px;
   font-weight: 600;
   margin-top: 10px;
   display: block;
}

#OSD_DCO-UPLOADEN osd-form-cell#TBL_DOCS {
   border-top: 1px solid #0000001f;
}

#OSD_DCO-UPLOADEN osd-form-cell#TBL_DOCS .form-table {
   border: none;
   margin-bottom: 10px;
}

#OSD_DCO-UPLOADEN osd-form-cell#TBL_DOCS tr.selected {
    background-color: transparent;    
}

#OSD_DCO-UPLOADEN osd-form-cell#TBL_DOCS tr.mat-row table {
   margin-bottom: 10px;
}   

#OSD_DCO-UPLOADEN .ocp-document-thumbnail {
   margin-bottom: 0px;
   display: inline-block;
}

#OSD_DCO-UPLOADEN osd-form-cell#LBL_DOCUMENT_VERGETEN span div:first-of-type {
   font-weight: 600;
}

#OCP-INLOGGEN_PINCODE osd-form-cell#BTN_ANDERE_GEBRUIKER button,
#OCP-INLOGGEN_PINCODE osd-form-cell#BTN_TOEGANGSCODE_VERGETEN button {
   font-size: 14px;
   line-height: 22px;
}

#OCP-INLOGGEN_PINCODE osd-form-cell#BTN_ANDERE_GEBRUIKER {
  position: absolute;
  bottom: 285px;
  width: 100%;
  left: 0;
}

#OCP-INLOGGEN_PINCODE osd-form-cell#BTN_TOEGANGSCODE_VERGETEN {
  position: absolute;
  bottom: 260px;
  width: 100%;
  left: 0;
}

#OCP-INLOGGEN_PINCODE osd-form-cell#LBL_BODY_WELKOM {
   font-size: 22px;
}

#OCP-INLOGGEN_PINCODE osd-form-cell#TOEGANGSCODE {
   margin-top: 0px;
}

#OCP-INLOGGEN_PINCODE osd-form-cell#TOEGANGSCODE mat-label {
   display: none;
}

#OCP-INLOGGEN_SMS osd-form-cell#TELEFOONNUMMER,
#OCP-INLOGGEN_SMS osd-form-cell#SMS_CODE {
   font-size: 20px;
   border-radius: 4px;
}

#OCP-INLOGGEN_SMS osd-form-cell#TELEFOONNUMMER .mat-form-field-flex,
#OCP-INLOGGEN_SMS osd-form-cell#SMS_CODE .mat-form-field-flex {
   padding-top: 2px;
   padding-bottom: 3px;
   border-radius:4px;
}

#OCP-INLOGGEN_SMS .ocp-footer-btn button {
  border-radius: 4px;
}

#OCP-INLOGGEN_SMS_GEBDATUM osd-form-cell#GEBDATUM {
   font-size: 20px;
   border-radius: 4px;
}

#OCP-INLOGGEN_SMS_GEBDATUM osd-form-cell#GEBDATUM .mat-form-field-flex {
   padding-top: 2px;
   padding-bottom: 7px;
   border-radius:4px;
}

#OCP-INLOGGEN_SMS_GEBDATUM osd-form-cell#GEBDATUM .mat-form-field-suffix {
   display: none;
}

#OCP-INLOGGEN_SMS_GEBDATUM .ocp-footer-btn button {
  border-radius: 4px;
}


#OCP-INSTELLINGEN .ocp-textfield .mat-form-field-infix {
   border-top-width: 0px;
}

#OCP-INSTELLINGEN .ocp-textfield input {
  padding-top: 4px;
}

#OCP-TOEGANGSCODE osd-form-cell#GEBRUIKERSNAAM {
   border-radius: 4px;
}

#OCP-TOEGANGSCODE osd-form-cell#GEBRUIKERSNAAM .mat-form-field-flex {
   padding-top: 2px;
   padding-bottom: 7px;
   border-radius:4px;
}

#OCP-TOEGANGSCODE #PG-TOEGANGSCODE osd-form-cell#LBL_GEBRUIKERSNAAM {
   font-size: 22px;
}

#OCP-TOEGANGSCODE #PG-TOEGANGSCODE osd-form-cell#LBL_GEBRUIKERSNAAM,
#OCP-TOEGANGSCODE #PG-TOEGANGSCODE osd-form-cell#LBL_TOEGANGSCODE_BEVESTIGING,
#OCP-TOEGANGSCODE #PG-TOEGANGSCODE osd-form-cell#LBL_TOEGANGSCODE,
#OCP-TOEGANGSCODE #PG-TOEGANGSCODE osd-form-cell#LBL_TOEGANGSCODE_BEVESTIGING {
   margin-bottom: 20px !important;
}

@media only screen and (max-height: 530px) {
   #OCP-INLOGGEN_PINCODE .numeric-keyboard .mat-raised-button {
      height: 40px;
   }
   
   #OCP-INLOGGEN_PINCODE osd-form-cell#BTN_ANDERE_GEBRUIKER {
     position: absolute;
     bottom: 230px;
     width: 100%;
     left: 0;
   }

   #OCP-INLOGGEN_PINCODE osd-form-cell#BTN_TOEGANGSCODE_VERGETEN {
     position: absolute;
     bottom: 205px;
     width: 100%;
     left: 0;
   }
}

/*   
#OCP-TAKEN .form-container,
#OCP-BERICHTEN .form-container,
#OCP-GEBEURTENISSEN .form-container,
#OCP-DOCUMENTEN .form-container,
#OCP-CONTACTEN .form-container {
   height: calc( 100vh - 223px );
}
*/

.osd-gray {
   color: gray;
}

.ocp-slash-icon {
    font-size: 20px;
    width: unset;
}

.osd-strikethrough {
   text-decoration: line-through;
}

.ocp-afspraak-icon-without-extra-info {
   /* margin-right: 34px; */
}

#OCP-CONTACTEN_MACHTIGING_TOEVOEGEN mat-radio-button {
   margin-top: 10px;
}

#OCP-CONTACTEN_MACHTIGING_TOEVOEGEN mat-radio-button:first-of-type {
   margin-right: 10px;
}

#OCP-CONTACTEN_MACHTIGING_TOEVOEGEN #LBL_TITEL span {
   width: unset;
}

#OCP-CONTACTEN_MACHTIGING_TOEVOEGEN #BTN_BACK,
#OCP-CONTACTEN_MACHTIGING_TOEVOEGEN #LBL_DUMMY {
   width: 80px;
}

#OCP-CONTACTEN_MACHTIGING_TOEVOEGEN mat-radio-button {
   width: 100%;
}

#OCP-CONTACTEN #_HEADER {
   height: 50px;
   border-bottom: 1px solid gray;
   background: #eee;
}



#OCP-CONTACTEN #BTN_MACHTIGING_TOEVOEGEN {
  flex: 1 1 auto !important;
}

/* Element | https://development.keesy.nl/KeesyForms/ */

#OCP-CONTACTEN #BTN_MACHTIGING_TOEVOEGEN button,
#OCP-CONTACTEN #BTN_MACHTIGING_TOEVOEGEN osd-form-button,
#OCP-CONTACTEN #BTN_MACHTIGING_TOEVOEGEN button span {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}

#OCP-CONTACTEN #BTN_MACHTIGING_TOEVOEGEN button {
   font-size: 14px;
   font-weight: 500;
}

#OCP-CONTACTEN #BTN_MACHTIGING_TOEVOEGEN button i.fa-user-plus {
   margin-right: 10px;
}

#OCP-CONTACTEN #BTN_MACHTIGING_TOEVOEGEN button .ocp-taak-open-icon {
   flex: 0 0 auto;
   margin-top: 3px;
}

#OCP-CONTACTEN #BTN_MACHTIGING_TOEVOEGEN .mat-button-focus-overlay { 
   background-color: transparent!important; 
}

#OCP-CONTACTEN .ocp-contact-toegang-icon {
   font-size: 28px;
   color: var(--keesy-color);
   margin-right: 10px;
}

#OCP-CONTACTEN .ocp-contact-toegang-name {
   font-size: 15px;
}

#OCP-CONTACTEN .ocp-contact-toegang {
   font-size: 13px;
}

#OCP-CONTACTEN i.fa-trash {
   font-size: 16px;
}

#OCP-CONTACTEN  i.fa-info-circle {
   font-size: 28px;
   margin-right: 10px;
}

#OCP-CONTACTEN #_MACHTIGING button {
   margin-left: 0px;
   margin-right: 0px;
   min-width: unset;
   padding-left: 5px;
   padding-right: 5px;
}

#OCP-CONTACTEN #_MACHTIGING osd-form-cell {
   flex: 0 1 auto !important;
}

#OCP-PORTAAL .ocp-burger-menu,
#OCP-PORTAAL .ocp-header-back-btn {
   min-width: 70px;
}

#OCP-PORTAAL .ocp-header-back-btn button span.mat-button-wrapper span {
   max-width: 70px;
   text-overflow: ellipsis;
   overflow: hidden;
   display: inline-block;
}

#OCP-PORTAAL .ocp-header-title span {
  width: calc( 100vw - 200px);
}

@media screen and (max-width: 374px) {
   #OCP-PORTAAL .ocp-header-title span i {
     display: none;
   }

   #OCP-ZAAK .ocp-header-title span i {
     display: none;
   }
}

#OCP-PORTAAL #BTN_MENU_HOME {
   padding-right: 0px;
}

#OCP-PORTAAL #BTN_MENU_HOME button {
   width: 70px;
   height: 35px;
   padding-right: 10px;
   text-align: right;
}

#OCP-ZAAK #BTN_MENU_HOME button {
   width: 50px;
   height: 35px;
   text-align: right;
}

#OCP-PORTAAL .ocp-card-table {
   display: flex;
}

#OCP-PORTAAL .ocp-card-title {
   white-space: normal;
   text-align: left;
}

#OCP-PORTAAL .ocp-card-header {
   display: flex;
}

#OCP-INSTALLEREN img {
   margin-bottom: 20px;
   opacity: 0.7;
   border: solid 1px black;
   padding: 3px;
   border-radius: 4px;
   max-width: min( calc( 100% - 10px ),400px);
}

#OCP-INSTALLEREN #_BODY {
   display: block !important;
}

#OCP-INSTALLEREN .form-body {
   background: white;
}

#OCP-START_AANVRAAG osd-form-cell#_AANVRAAG_SOORT {
   width: 300px;
}

#OCP-START_AANVRAAG osd-form-cell#_AANVRAAG_SOORT button span {
   font-size: 14px;
   font-weight: 500;
}
   
#OCP-START_AANVRAAG osd-form-cell#_AANVRAAG_SOORT a {
   text-decoration: none;
   color: black;
   font-size: 14px;
   font-weight: 500;
}

#OCP-SELECTEER_OMGEVING osd-form-cell#_OMGEVING {
   margin-top: 30px;
}

#OCP-SELECTEER_OMGEVING osd-form-cell#_OMGEVING button {
   font-size: 14px;
   font-weight: 500;
   //width: 300px;
   line-height: 24px;
   padding-top: 5px;
   padding-bottom: 5px;
}
   
#OCP-SELECTEER_OMGEVING osd-form-cell#_OMGEVING button span {
   font-size: 14px;
   font-weight: 500;
   white-space: normal;
}
   
#OCP-SELECTEER_OMGEVING osd-form-cell#_OMGEVING a {
   text-decoration: none;
   color: black;
   font-size: 14px;
   font-weight: 500;
}

span.mat-placeholder-required {
   color: red !important;
   margin-right: 5px;
}



.score-stars {
   margin-top: 5px;
   outline: 0;
}

.score-stars > span {
   width: 20px;
   height: 20px;
   display: inline-block;
   margin: 2px 3px;
}

.score-stars span.selected {
   background-image: url("../assets/star-yellow.svg");
   background-repeat: no-repeat;
}

.score-stars span.not-selected {
   background-image: url("../assets/star-white.svg");
   background-repeat: no-repeat;
}

.ocp-aanvraagformulier osd-form-cell#_HEADER {
   flex: 1 1 auto;
}


.ocp-aanvraagformulier .form-header,
.ocp-aanvraagformulier .form-body {
   background: #262626;
}

.ocp-aanvraagformulier osd-form-cell.osd-text,
.ocp-aanvraagformulier osd-form-cell.osd-textarea,
.ocp-aanvraagformulier osd-form-cell.osd-checkbox,
.ocp-aanvraagformulier osd-form-cell.osd-combobox,
.ocp-aanvraagformulier osd-form-cell.osd-radiogroup,
.ocp-aanvraagformulier osd-form-cell.osd-score,
.ocp-aanvraagformulier osd-form-cell.osd-date {
   background: white;
   border-radius: 4px;
}

.ocp-aanvraagformulier osd-form-cell.osd-score {
   padding: 10px;
}
   
.ocp-aanvraagformulier osd-form-cell.osd-label,
.ocp-aanvraagformulier osd-form-cell.osd-text,
.ocp-aanvraagformulier osd-form-cell.osd-textarea,
.ocp-aanvraagformulier osd-form-cell.osd-checkbox,
.ocp-aanvraagformulier osd-form-cell.osd-combobox,
.ocp-aanvraagformulier osd-form-cell.osd-radiogroup,
.ocp-aanvraagformulier osd-form-cell.osd-score,
.ocp-aanvraagformulier osd-form-cell.osd-date,
.ocp-aanvraagformulier osd-form-cell.osd-button {
   font-size: 15px;
}

.ocp-aanvraagformulier osd-form-cell.osd-textarea textarea {
   line-height: 24px;
}

.ocp-aanvraagformulier osd-form-cell.osd-score.disabled,
.ocp-aanvraagformulier osd-form-cell.osd-checkbox osd-form-question.disabled,
.ocp-aanvraagformulier osd-form-cell.osd-radiogroup osd-form-question.disabled,
.ocp-aanvraagformulier osd-form-question.disabled .mat-form-field-flex {
    background-color: lightgray !important;
    border-radius: 4px;
}

.ocp-aanvraagformulier osd-form-question.disabled .mat-form-field-flex input div,
.ocp-aanvraagformulier osd-form-question.disabled .mat-form-field-flex textarea div,
.ocp-aanvraagformulier osd-form-question.disabled .mat-form-field-flex .mat-select-min-line,
.ocp-aanvraagformulier osd-form-question.disabled mat-checkbox div,
.ocp-aanvraagformulier osd-form-question.disabled mat-radio-button div,
.ocp-aanvraagformulier osd-form-question.disabled .mat-form-field-flex input,
.ocp-aanvraagformulier osd-form-question.disabled .mat-form-field-flex textarea,
.ocp-aanvraagformulier osd-form-question.disabled .mat-form-field-flex .mat-select-min-line,
.ocp-aanvraagformulier osd-form-question.disabled mat-checkbox .mat-checkbox-label span,
.ocp-aanvraagformulier osd-form-question.disabled mat-radio-button .mat-radio-label-content span {
   opacity: 1;
   color: black;
 }

.ocp-aanvraagformulier osd-form-cell.osd-button button.mat-button-disabled {
   background: white !important;
}
   
.ocp-aanvraagformulier osd-form-cell.osd-label {
   color: white;
}

.ocp-aanvraagformulier osd-form-cell.osd-label {
   color: white;
}

.ocp-aanvraagformulier .osd-focus span,
.ocp-aanvraagformulier .osd-focus mat-label,
.ocp-aanvraagformulier mat-label.osd-focus {
    color: #3f51b5;
}

.ocp-aanvraagformulier .osd-error-status span,
.ocp-aanvraagformulier .osd-error-status mat-label,
.ocp-aanvraagformulier mat-label.osd-error-status  {
   color: #f44336;
}

.mat-error span {
   color: #f44336 !important;
}

.ocp-aanvraagformulier .mat-form-field-label mat-label {
   white-space: normal;
   line-height: 18px;
}

.ocp-aanvraagformulier .mat-form-field-infix {
   padding: 8px 0 !important;
}

.ocp-aanvraagformulier .mat-form-field-appearance-fill .mat-form-field-flex {
   background: white !important;
}

.ocp-aanvraagformulier .mat-input-element {
   font-weight: 600;
}

.ocp-aanvraagformulier osd-form-cell.osd-text mat-form-field:not(.mat-form-field-invalid) .mat-form-field-wrapper,
.ocp-aanvraagformulier osd-form-cell.osd-textarea mat-form-field:not(.mat-form-field-invalid) .mat-form-field-wrapper,
.ocp-aanvraagformulier osd-form-cell.osd-date mat-form-field:not(.mat-form-field-invalid) .mat-form-field-wrapper,
.ocp-aanvraagformulier osd-form-cell.osd-combobox mat-form-field:not(.mat-form-field-invalid) .mat-form-field-wrapper {
   padding-bottom: 0px;
}

.ocp-aanvraagformulier osd-form-cell.osd-text mat-form-field:not(.mat-form-field-invalid) .mat-form-field-underline,
.ocp-aanvraagformulier osd-form-cell.osd-textarea mat-form-field:not(.mat-form-field-invalid) .mat-form-field-underline,
.ocp-aanvraagformulier osd-form-cell.osd-date mat-form-field:not(.mat-form-field-invalid) .mat-form-field-underline,
.ocp-aanvraagformulier osd-form-cell.osd-combobox mat-form-field:not(.mat-form-field-invalid) .mat-form-field-underline {
   bottom: 2px;
}

.ocp-aanvraagformulier osd-form-cell.osd-text mat-form-field.mat-form-field-invalid .mat-form-field-subscript-wrapper,
.ocp-aanvraagformulier osd-form-cell.osd-textarea mat-form-field.mat-form-field-invalid .mat-form-field-subscript-wrapper,
.ocp-aanvraagformulier osd-form-cell.osd-date mat-form-field.mat-form-field-invalid .mat-form-field-subscript-wrapper,
.ocp-aanvraagformulier osd-form-cell.osd-combobox mat-form-field.mat-form-field-invalid .mat-form-field-subscript-wrapper {
   font-size: 12px;
   margin-top: 5px;
}

.ocp-aanvraagformulier osd-form-cell.osd-combobox .mat-select-value-text,
.ocp-aanvraagformulier osd-form-cell.osd-combobox .mat-select-min-line {
   font-size: 15px;
}

.ocp-aanvraagformulier osd-form-cell.osd-combobox .mat-select-min-line {
   font-weight: 600;
}

.ocp-aanvraagformulier mat-checkbox span,
.ocp-aanvraagformulier mat-radio-button span {
   white-space: normal;
}

.ocp-aanvraagformulier mat-checkbox span.mat-checkbox-label {
   line-height: normal !important;
   padding-top: 4px;
}


.ocp-aanvraagformulier mat-checkbox.mat-checkbox-checked span,
.ocp-aanvraagformulier mat-radio-button.mat-radio-checked span {
   font-weight: 600;
}

.ocp-aanvraagformulier span.mat-checkbox-inner-container {
    margin-top: 5px;
}

.ocp-aanvraagformulier mat-radio-button label.mat-radio-label {
    align-items: start; 
}
.ocp-aanvraagformulier osd-form-cell.osd-checkbox osd-form-question,
.ocp-aanvraagformulier osd-form-cell.osd-radiogroup osd-form-question {
   padding: 10px;
}

.ocp-aanvraagformulier osd-form-cell.osd-checkbox mat-error {
   margin-top: 3px;
}

.ocp-aanvraagformulier osd-form-cell.osd-radiogroup mat-radio-button {
   margin-top: 8px;
   margin-left: 5px;
   display: block;
}
 
.ocp-aanvraagformulier osd-form-cell.osd-radiogroup mat-checkbox {
   margin-top: 5px;
   margin-left: 5px;
   display: block;
}
 
.ocp-aanvraagformulier osd-form-cell.osd-radiogroup mat-error {
   margin-top: 5px;
   margin-left: 5px;
}

.ocp-aanvraagformulier osd-form-cell.osd-progressbar .mat-progress-bar-buffer {
  background-color: gray;
}

.ocp-aanvraagformulier osd-form-cell.osd-progressbar .mat-progress-bar-fill::after {
  background-color: var(--keesy-color);
}

.ocp-aanvraagformulier .form-body {
   padding: 10px 20px 10px 20px;
}
 
.ocp-aanvraagformulier osd-form-cell#BTN_NAVIGATION_MENU osd-form-button {
   display: flex;
}

.ocp-aanvraagformulier osd-form-cell#BTN_NAVIGATION_MENU button {
   margin-left: 2px;
   margin-right: 2px;
   background-color: var(--keesy-color);
   padding-left: 20px;
   padding-right: 10px;   
   font-weight: 600;
   flex: 1 1 auto;
   border-radius: 10px;
}

.ocp-aanvraagformulier osd-form-cell#BTN_NAVIGATION_MENU button > span > span {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.ocp-aanvraagformulier osd-form-cell#BTN_NAVIGATION_MENU button i {
   font-size: 24px;
   padding-bottom: 3px;
   vertical-align: middle;
   --fa-primary-color: white;
   --fa-primary-opacity: 1.0;
   --fa-secondary-color: black;
   --fa-secondary-opacity: 1.0;
}

.ocp-aanvraagformulier osd-form-cell#_BROWSE_BUTTONS {
   flex: 0 0 auto !important;
   margin-bottom: 5px;
}

.ocp-aanvraagformulier osd-form-cell#BTN_VALIDATE_PAGE {
   margin-left: auto;
}

.ocp-aanvraagformulier osd-form-cell#BTN_BACK button .mat-button-wrapper span {
    display: flex;
    align-items: center;
    font-size: 13px;
}

.ocp-aanvraagformulier osd-form-cell#BTN_BACK button,
.ocp-aanvraagformulier osd-form-cell#BTN_MENU button {
    background: transparent;
    box-shadow: none!important;
    width: 50px;
    height: 35px;
    min-width: unset;
    line-height: unset;
}

.ocp-aanvraagformulier osd-form-cell#BTN_BACK button {
    color: #999A99;
    text-align: left;
    padding: 0 0 0 5px !important;
}

.ocp-aanvraagformulier osd-form-cell#BTN_BACK button i {
    padding-right: 2px;
}

.ocp-aanvraagformulier osd-form-cell#BTN_MENU button {
    color: var(--keesy-color);
    padding: 0 10px 0 0 !important;
    text-align: right;
}

.ocp-aanvraagformulier osd-form-cell#BTN_MENU button i {
   vertical-align: text-top;
}

.ocp-aanvraagformulier osd-form-cell#LBL_TITLE span {
    font-size: 15px;
    font-weight: 500;
    color: var(--keesy-color);
    justify-content: center;
    white-space: nowrap;
    display: block;
    //width: calc( 100vw - 160px);
    max-width: calc( 768px - 160px);
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.ocp-aanvraagformulier osd-form-cell#_HEADER {
   margin: 0px 0 5px 0;
}

.ocp-aanvraagformulier osd-form-cell#_HEADER_BUTTONS {
    margin: 10px 15px 5px 15px !important;
}
   
.ocp-aanvraagformulier osd-form-cell#BTN_MENU osd-form-question.disabled button,
.ocp-aanvraagformulier osd-form-cell#BTN_BACK osd-form-question.disabled button,
.ocp-aanvraagformulier osd-form-cell#PREVIOUS_PAGE osd-form-question.disabled button,
.ocp-aanvraagformulier osd-form-cell#BTN_PREVIOUS_PAGE osd-form-question.disabled button,
.ocp-aanvraagformulier osd-form-cell#BTN_SUBMIT osd-form-question.disabled button {
    opacity: 0;
}

.ocp-aanvraagformulier osd-form-cell#BTN_TERUG button,
.ocp-aanvraagformulier osd-form-cell#BTN_WIJZIGEN button,
.ocp-aanvraagformulier osd-form-cell#BTN_PREVIOUS_PAGE button,
.ocp-aanvraagformulier osd-form-cell#BTN_NEXT_PAGE button,
.ocp-aanvraagformulier osd-form-cell#PREVIOUS_PAGE button,
.ocp-aanvraagformulier osd-form-cell#BTN_VALIDATE_PAGE button,
.ocp-aanvraagformulier osd-form-cell#BTN_SUBMIT button {
   box-shadow: none!important;
   color: black;
   width: 100px;
   height: 36px;
   font-weight: 600;
   line-height: unset;
   min-width: unset;
}

.ocp-aanvraagformulier osd-form-cell#BTN_TERUG button,
.ocp-aanvraagformulier osd-form-cell#BTN_PREVIOUS_PAGE button,
.ocp-aanvraagformulier osd-form-cell#PREVIOUS_PAGE button {
   border-radius: 10px 0 0 10px;
   padding: 0 16px 0 10px;
}

.ocp-aanvraagformulier osd-form-cell#BTN_NEXT_PAGE button,
.ocp-aanvraagformulier osd-form-cell#BTN_VALIDATE_PAGE button,
.ocp-aanvraagformulier osd-form-cell#BTN_SUBMIT button {
   border-radius: 0 10px 10px 0;
   padding: 0 10px 0 16px;
}


.ocp-aanvraagformulier osd-form-cell#BTN_TERUG button > span > span,
.ocp-aanvraagformulier osd-form-cell#BTN_PREVIOUS_PAGE button > span > span,
.ocp-aanvraagformulier osd-form-cell#BTN_NEXT_PAGE button > span > span,
.ocp-aanvraagformulier osd-form-cell#PREVIOUS_PAGE button > span > span,
.ocp-aanvraagformulier osd-form-cell#BTN_VALIDATE_PAGE button > span > span,
.ocp-aanvraagformulier osd-form-cell#BTN_SUBMIT button > span > span {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.ocp-aanvraagformulier osd-form-cell#BTN_TERUG button,
.ocp-aanvraagformulier osd-form-cell#PREVIOUS_PAGE button,
.ocp-aanvraagformulier osd-form-cell#BTN_VALIDATE_PAGE button,
.ocp-aanvraagformulier osd-form-cell#BTN_SUBMIT button {
   width: 130px;
}

@media screen and (min-width: 768px) {
   .ocp-aanvraagformulier osd-form-cell#BTN_PREVIOUS_PAGE button,
   .ocp-aanvraagformulier osd-form-cell#BTN_NEXT_PAGE button {
      width: 130px;
   }
}

.ocp-aanvraagformulier osd-form-cell#BTN_TERUG button i,
.ocp-aanvraagformulier osd-form-cell#BTN_PREVIOUS_PAGE button i,
.ocp-aanvraagformulier osd-form-cell#BTN_NEXT_PAGE button i,
.ocp-aanvraagformulier osd-form-cell#PREVIOUS_PAGE button i,
.ocp-aanvraagformulier osd-form-cell#BTN_VALIDATE_PAGE button i,
.ocp-aanvraagformulier osd-form-cell#BTN_SUBMIT button i {
   font-size: 24px;
   vertical-align: middle;
   --fa-primary-color: white;
   --fa-primary-opacity: 1.0;
   --fa-secondary-color: black;
   --fa-secondary-opacity: 1.0;
}

.ocp-aanvraagformulier osd-form-cell#BTN_SUBMIT button i {
   font-size: 22px;
}

.ocp-aanvraagformulier osd-form-cell#PREVIOUS_PAGE button {
   background-color: #777;
}

.ocp-aanvraagformulier osd-form-cell#BTN_TERUG button,
.ocp-aanvraagformulier osd-form-cell#BTN_WIJZIGEN button,
.ocp-aanvraagformulier osd-form-cell#BTN_PREVIOUS_PAGE button,
.ocp-aanvraagformulier osd-form-cell#BTN_NEXT_PAGE button,
.ocp-aanvraagformulier osd-form-cell#BTN_VALIDATE_PAGE button,
.ocp-aanvraagformulier osd-form-cell#BTN_SUBMIT button {
   background-color: var(--keesy-color);
}

.ocp-aanvraagformulier osd-form-cell#BTN_WIJZIGEN button {
   width: 60px;
   padding: 0 !important;
   text-align: center;
   border-radius: 0;
}

.ocp-aanvraagformulier a,
.ocp-aanvraagformulier a:visited {
   text-decoration: underline;
   color: var(--keesy-color);
}

.ocp-aanvraagformulier .osd-button button {
   background: var(--keesy-color);
}

.ocp-aanvraagformulier mat-label p {
   margin-top: 12px;
   margin-bottom: 5px;
}

@media screen and (min-width: 420px) {
   .ocp-aanvraagformulier osd-form-cell#BTN_WIJZIGEN button {
      width: 150px;
   }
}

.ocp-aanvraagformulier mat-radio-button:last-of-type {
   padding-bottom: 5px;
}

.ocp-aanvraagformulier osd-form-cell#_FOOTER {
   border-top: 1px solid #666;
   padding: 8px 0 0 0;
   margin: 10px 20px 10px 20px;
}

/*
.ocp-aanvraagformulier osd-form-cell#_FOOTER:before {
   margin: 20
}
*/

.ocp-aanvraagformulier .mat-form-field-label {
   color: #000 !important;
}

.ocp-aanvraagformulier .mat-form-field.mat-focused .mat-form-field-label,
.ocp-aanvraagformulier .mat-form-field.mat-focused input,
.ocp-aanvraagformulier osd-form-radiogroup.osd-focus span.mat-radio-label-content {
   color: #3f51b5 !important;
}

.ocp-aanvraagformulier mat-datepicker-toggle button:focus {
   color: #3f51b5;
}

.ocp-aanvraagformulier img.digid-logo {
   width:   40px; 
   height:  40px;
}

.ocp-aanvraagformulier ul,
.ocp-aanvraagformulier ol {
   margin-top: 5px;
   margin-bottom: 5px;
}

.ocp-aanvraagformulier osd-form-question.disabled .mat-form-field.mat-focused input,
.ocp-aanvraagformulier osd-form-question.disabled .mat-form-field.mat-focused .mat-form-field-label {
   color: black !important;
}

.ocp-aanvraagformulier osd-form-question.disabled .mat-form-field.mat-focused .mat-form-field-ripple {
   opacity: 0;
}
   
.ocp-aanvraagformulier mat-error {
   font-size: 15px;
   margin-top: 2px;
}

.ocp-aanvraagformulier h4 {
   margin-bottom: 5px;
}

.ocp-aanvraagformulier h4:first-child {
   margin-top: 0px;
}

.ocp-aanvraagformulier p {
   margin-top: 0px;
}

.osd-lightgreen {
   color: lightgreen;
}

.ocp-aanvraagformulier i.menu-button-in-text {
   margin: 0 5px;
   color: var(--keesy-color);
}

.osd-list-item-delete-btn {
    padding: 10px 20px;
    cursor: pointer;
 }
 
.ocp-aanvraagformulier li.osd-selected {
    font-weight: 700;
    padding: 5px 0;
}

.ocp-aanvraagformulier #BTN_NAVIGATION_MENU i.fa-circle-caret-down {
   padding-left: 10px;
}

.ocp-aanvraagformulier #BTN_NAVIGATION_MENU span.ocp-navigation-page-group-title {
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Inhoudsopgave menu */
div.menu-top {
   margin-top: 20px !important;
}

div.menu-top mat-dialog-container {
   background-color: #262626 !important;
   color: var(--keesy-color);
}

div.menu-top .modal-dialog-footer {
   flex-direction: column;
   align-items: start;
   flex: 0 0 auto;
   max-width: 100%;
   border-top: none;
   margin-top: 0px;
}

div.menu-top .modal-dialog-body {
   text-align: center;
   font-weight: 700;
   color: var(--keesy-color);
   border-bottom: #999999 1px solid;
   padding-bottom: 20px;
   width: 100%;   
}

div.menu-top .modal-dialog-footer button {
   text-align: center;
   margin-left: 0px;
   margin-right: auto;
   font-weight: 500 !important;
   color: var(--keesy-color);
   /* display: block; */
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
   text-align: left;
   flex: 0 0 auto;
   line-height: 28px;
}

div.menu-top .modal-dialog-footer button span.prefix-suffix-space {
   width: 20px;
   display: inline-block;
   font-size: 12px;
}

div.menu-top osd-modal-dialog {
   display: flex;
   align-items: center;
   flex-direction: column;
}


div.menu-top .modal-dialog-footer button.mat-button-disabled {
   color: gray;
}

div.menu-top .modal-dialog-footer button:first-of-type {
   margin-top: 10px;
}
/* Einde Inhoudsopgave menu */

.cdk-overlay-pane {
  position: fixed !important;
  max-width: min( 80vw, calc( 0.8 * 1024px ) ) !important;
}

#OSD_DCO-UPLOADEN #_BODY {
   padding: 20px 0 0 0 !important;
}

#OSD_DCO-UPLOADEN #_BODY_INNER_BODY {
   padding: 0px 20px 0 20px;
}

#OSD_DCO-UPLOADEN #_KNOPPEN {
   margin-bottom: 0px !important;
}

#OSD_DCO-UPLOADEN #_KNOPPEN > div {
   flex: 1 1 auto !important;
}

#OSD_DCO-UPLOADEN #SUBMIT {
   margin-bottom: 0px !important;
}

osd-form-selectfield input.osd-input-combo-edit {
   width: calc( 100% - 30px );
}

osd-form-selectfield i.fa-caret-down {
   padding: 2px 10px 2px 10px;
   cursor: pointer;
}

osd-modal-dialog .form-body {
   overflow-y: hidden;
}

div.cdk-overlay-pane.OCP-ZAAK a,
div.cdk-overlay-pane.OCP-PORTAAL a {
   text-decoration: none;
   color: unset;   
   font-weight: 500;
}   

#OSD_BAS_IKV-IKV .osd-attachment {
   background: white;
   border-radius: 4px;
}

#OSD_BAS_IKV-IKV .osd-attachment button {
   box-shadow: none;
}

#OSD_BAS_IKV-IKV .osd-attachment osd-form-question {
   margin-top: 5px;
   margin-bottom: 5px;
}

#OSD_BAS_IKV-START_IKV .ikv-att-title {
   margin-top: 20px;
   font-weight: 600;
}

#OSD_BAS_IKV-START_IKV .ikv-att-title:first-of-type {
   margin-top: 0px;
}

#OSD_BAS_IKV-START_IKV .ikv-att-thumbnails:empty {
   margin-top: 10px;
}

#OSD_BAS_IKV-START_IKV .ikv-att-thumbnails .ocp-document-thumbnail {
   display: inline-block;
}

.ocp-border-radius-10 {
   border-radius: 10px !important;
}

#OSD_LGM-LEGITIMEREN mat-checkbox#BEVESTIG_TMP.mat-checkbox-disabled span,
#OSD_TTK-UITVOEREN mat-checkbox#BEVESTIG_TMP.mat-checkbox-disabled span {
   color: black;
}

.osd-row-column-pointer-cursor {
   cursor: pointer;
}

#OCP-DIGID_LOGIN {
   .ocp-header span {
      font-weight: 600 !important;
      color: #fccf0f;
   }

   .ocp-form-footer button {
      font-weight: 700;
      background: #fccf0f;
   }
}