:root {
    /*title*/
    --h1-title-font-size: 40px;
    --h1-title-color: #484848;

	/* subtitle */
    --h2-title-font-size: 24px;
    --h2-title-color: #484848;

    /*form*/
    --container-width: 1008px;
    
    /*welcome message*/
    --welcome-message-font-size: 24px;
    --welcome-message-color: #484848;

    /* menu */
    --menu-item-font-size: 16px;
    --menu-item-color: #484848;
  
    /*action button*/    
    --action-button-background: #189896;
    --action-button-color: #FFFFFF;
    --action-button-hover-background: #333333;
    --action-button-hover-color: #FFFFFF;

    /*protocol*/
    --protocol-font-size: 18px;
    --protocol-color: #189896;

    /* form description */
    --form-description-color: #000;
    --form-description-font-size: 16px;
    
    /*label*/
    --question-label-font-size: 14px;
    --question-label-color: #999999;

    /*input*/
    --input-font-size: 14px;
    --input-color: #555;       

    /*search filter*/
    --filter-font-size: 13px;
    --filter-font-color: 13px;

    /* table */
    --table-header-color: #189896;
    --table-header-font-size: 14px;

    --table-body-font-size: 12px;
    --table-body-color: #999;

    --table-paginator-background: #189896;
    --table-paginator-color: #fff;
    --table-paginator-font-size: 14px;
    
    /*header*/
    --header-margin-bottom: 15px;
    --header-background-color: #FFFFFF;
 
    /*footer*/
    --footer-margin-top: 15px;
}

body {
	background-color: #ebeeef!important;
}

.h1-title {
    font-size: var(--h1-title-font-size);
    color: var(--h1-title-color);
    font-family: 'Open Sans Bold';
}

.h2-title {
    font-size: var(--h2-title-font-size);
    color: var(--h2-title-color);
    font-family: 'Open Sans Bold';
}

.welcome-message {
    font-size: var(--welcome-message-font-size);
    color: var(--welcome-message-color);
}

.menu-item {
    font-size: var(--menu-item-font-size);
    color: var(--menu-item-color);
}

.action-button {
    background-color: var(--action-button-background);
    color: var(--action-button-color);
}

.action-button:hover {
    background-color: var(--action-button-hover-background)!important;
    color: var(--action-button-hover-color)!important;
}

.protocol-color, .protocol {
    color: var(--protocol-color)!important;
}

.protocol {
    font-size: var(--protocol-font-size);
}

.form-description {
    font-size: var(--form-description-font-size);
    color: var(--form-description-color);
}

.question-label {
    font-size: var(--question-label-font-size)!important;
    color: var(--question-label-color)!important;
}

.input {
    font-size: var(--input-font-size);
    color: var(--input-color);
}

/* table component */
.mat-header-cell,
.mat-sort-header {
    color: var(--table-header-color);
    font-size: var(--table-header-font-size);
}

.mat-cell {
    font-size: var(--table-body-font-size);
    color: var(--table-body-color);
}

.ui-paginator.ui-paginator-bottom,
.mat-paginator {
    background-color: var(--table-paginator-background);
    font-size: var(--table-paginator-font-size);
}

.header {
	min-height: 10px;
	padding: 10px;
	background-color: var(--header-background-color);
	margin-bottom: var(--header-margin-bottom);
}


.form-container{
	min-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
}

.footer {
	width: 100%;
	min-height: 10px;
	background-color: var(--header-background-color);
	margin-top: var(--footer-margin-top);
}