/*
 * A1 Telekom AG CSS styles for IKEA-DAP
 */

body {			
	font-family: Verdana,Arial,Helvetica,sans-serif;
	position: relative;
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	background-color: #efefef;
}

a, a:visited {
	color: #7ba2fd;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

form {
   	padding: 0px;
   	margin: 0px;
}

h1 {
	font-size: 32px;
	font-weight: normal;
}

h2 {
	padding: 0px;
	margin: 5px 0 10px 0;
	font-size: 14px;
	font-weight: normal;	
}
 
h3 {
	padding: 0px;
	margin: 5px 0 5px 0;
	font-size: 12px;	
	font-weight: normal;
} 

p {
  padding: 0px;
  margin: 2px 0 2px 0;	
}

/* 20170210 RS: don't know, if we can comment this out. but look at the flow-js file-selection table!
   maybe we have to set it to initial only for 
table td {
	vertical-align: top;
}
*/

#wrapper {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

#header {
	height: 100px;
	width: 100%;	
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	background-color: white;
}

#logo {
	height: 100px;
	min-width: 100px;
	margin: 0 15px;
	display: flex;
	align-items: center;
	flex: 1;
}	

#appName {
	flex: 1;
	text-align: center;
}

#user {	
	font-size: 12px;
	color: #5F5F5F;
	text-align: right;
	margin: 15px;
	display: flex;
	justify-content: space-between;
	align-self: flex-start;
	flex-direction: column;
	flex: 1;
	height: 68px;
}

#user > div {
	display: flex;
	align-content: center;
	justify-content: flex-end;
}

#user #languageDropDownRow {
	display: flex;	
}

.menu ul {
	padding: 0;
	margin: 0;
	display: flex;
	width: 100%;
    padding-left: 0;
    border-bottom: 1px solid #efefef;
}

.menu li:not(:first-child) {
    margin-left: 8px;
}

.menu li {
	list-style: none;
	min-height: 32px;
	display: flex;
  	justify-content: center;
  	align-items: center;
  	
  	-webkit-border-top-right-radius: 8px;
	-moz-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
	-webkit-border-top-left-radius: 8px;
	-moz-border-top-left-radius: 8px;
	border-top-left-radius: 8px;
	border-bottom: 4px solid white;
}

.menu li:hover {
	/*background-color: #efefef;*/
	border-bottom: 4px solid DarkOrange;
}

.menu li a {
	padding: 10px 15px 5px 15px;
	display: flex;
	justify-content: center;
  	align-items: center;
	font-size: 12px;
	color: black;
	min-height: 32px;
}

.menu li a > div {
}

.menu li a:hover {
	text-decoration: none;
}

.menu li.active {
	/* background-color: DarkOrange; */
	border-bottom: 4px solid DarkOrange;
  	display: flex;
  	justify-content: center;
  	align-items: center;
}

.menu li.active a {
	color: DarkOrange;
}

#content_wrapper {	
	background-color: white;
}

#content {
	padding: 15px;
	margin-bottom: 15px;
}

#footer {
	font-size: 10px;
	color: #999;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	line-height: 150%;
}

#footer a {
	font-size: 10px;
}

#adminMenu, #userPreferencesMenu {	
	margin: 0;
	padding: 0;
	width: calc( 100% - 8px );
	border-bottom: 1px solid #CECECE;
}

#adminPageContent, #userPreferencesContent {
	margin: 0;
	border-left: 1px solid #CECECE;
	border-right: 1px solid #CECECE;
	border-bottom: 1px solid #CECECE;
	padding: 10px;
	width: calc( 100% - 30px );
	clear: both;
}

#showBoxMenu {
	margin: 0px;
	padding: 0 0 5px 0;	
}

.success {	
	height: 40px;
	display: flex;
	align-items: center;
	color: #559902;
	background-color: #bcecb7;
	margin-bottom: 15px;	
}

.success img {
	margin: 0 10px 0 10px;
}

.searchForm td {
	padding: 2px;
}

.width100 {
	width: 100px;	
}

.width200 {
	width: 200px;	
}

.width300 {
	width: 300px;
}

.width600 {
	width: 600px;
}

.width390 {
	width: 390px;
}

.help {
	margin: 0;
	padding: 0 0 10px 0;
	color: #5F5F5F;
	width: 750px;
}

#uploadErrorMessage {
	margin: 0;
	padding: 0 0 10px 0;
}

.fileInput {
	margin-bottom: 2px;
}

#home {
		
}

#home h3 {
	font-size: 18px;
	margin-bottom: 15px;
}

#home .featureList {
	display: flex;
	justify-content: center;
	width: 100%
}

#home .featureList > a {
	/*background-color: khaki;*/
	margin: 15px 15px;	
	width: 240px;
	padding: 15px;
	text-align: center;
	display: block;
	color: black;
	border-bottom: 4px solid white;
}

#home .featureList > a:hover {
	background-color: #f5f5f5;
	text-decoration: none;
	border-bottom: 4px solid DarkOrange;
}

#home .featureList > a:hover h2 {
	/* color: DarkOrange; */	
}

#home .featureList > a:hover .featureDesc {
	color: black;	
}

#home .featureList > a > img {
	width: 32px;
	height: 32px;
	margin-bottom: 5px;
}

#home .featureDesc {
	font-size: 12px;
	color: #808080;
	line-height: 150%;
}
#home .outro {
	margin-top: 20px;	
}

.messagelabel_error {
	color: #D01E33;
    font-size: 12px;
    padding-left: 3px;
}


/* my test to change by redefineing css class
*  https://www.packtpub.com/books/content/skin-customization-jboss-richfaces-33
*/
/*
.rich-table {
    background-color: #9999ff;
    border-collapse: collapse;
    border-left: 1px solid #c4c0c9;
    border-top: 1px solid #c4c0c9;
    empty-cells: show;
}


*/

/* ==================================================================== login ==================== */

.loginScreenLayout {
	height: 97vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.loginScreenLayout #content_wrapper h1 {
	text-align: center;
}

.loginScreenLayout #content_wrapper {
	width: 250px;
}

.loginScreenLayout #content_wrapper #content {
	margin-bottom: 0;
}

.loginPanel.cssCentricDesign {
}

.loginPanel.cssCentricDesign input {
	width: 100%;
	font-size: 14px;	
}

.loginPanel.cssCentricDesign input[type='text'],
.loginPanel.cssCentricDesign input[type='password'] {	
	
	height: 24px;
	margin-top: 2px;
	margin-bottom: 15px;
}

.loginPanel.cssCentricDesign input[type='submit'] {
	background: DarkOrange;
	border: 0 none;
	color: white;
	height: 40px;
	margin-top: 16px;
	
}

.loginFailed.cssCentricDesign {
	background-color: khaki; 
	color: #D01E33;
	background-color: #eecccc;
	padding: 15px;
	margin-bottom: 15px;
}

/* ==================================================================== pageTopArea ==================== */

.pageTopArea.folderShowSpecific {
	margin-bottom: 12px;
}

.pageTopArea .pageTopMain {
	display: flex;
	justify-content: space-between;
	
}

.pageTopArea .signation {
	display: flex;
	align-items: center;
	height: 96px;
}

.pageTopArea .signation h2 {
	font-size: 32px;
}

.pageTopArea.folderShowSpecific .signation .subTitle {
	font-size: 24px;
	color: #999;
}

.pageTopArea.folderShowSpecific .signation .subTitle img {
	width: 32px;
	height: 32px;
	vertical-align: middle;
	padding-bottom: 4px;
}

.pageTopArea .signation .subHelp {
	font-size: 12px;
	color: #808080;
}

.pageTopArea .signation .signationImage {
	width: 96px;
	min-width: 96px;
	height: 96px;
	margin-right: 12px;
	vertical-align: middle;
}

.pageTopMain .mainArea {
	display: flex;
	flex-direction: column;
	margin-right: 10px;
	width: 100%;
}

.pageTopMain .mainFormElementsArea {
	margin-top: 6px;
}

.pageTopArea .actions {
	min-width: 225px;
	display: flex;
	flex-direction: column;
	justify-content: right;
}

.pageTopArea .actions > div {
	font-size: 12px;
	width: 100%;
	margin-top: 2px;
	min-height: 32px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.pageTopArea .actions > div > label {
	text-align: right;
}

#user a,
.pageTopArea .actions > div a,
#mailContactManagementForm th:last-of-type a {
	font-size: 12px;
	color: black;
	text-decoration: none;
}

.pageTopArea .actions > div img:not(.smallIcon),
#mailContactManagementForm th:last-of-type img:not(.smallIcon) {
	width: 32px;
	height: 32px;
	vertical-align: middle;
	margin-left: 6px;
}

/*#addMailContactForm img.smallIcon,
.pageTopMain .mainFormElementsArea img.smallIcon,
#mailContactManagementForm img.smallIcon,
.rich-modalpanel.cssCentricDesign img.smallIcon,*/
.cssCentricDesign img.smallIcon,
.pageTopArea.folderShowSpecific #invitedUserPanel img.smallIcon,
#uploadSwitchFormPanel img.smallIcon,
#folderListForm img.smallIcon,
.pageTopArea .actions > div img.smallIcon,
#user img.smallIcon,
.inlinedErrorMessage img.smallIcon,
.rich-message-marker > img {
	min-width: 18px;
	width: 18px;
	height: 18px;
	margin-right: 2px;
	vertical-align: middle;
}



.pageTopArea.folderShowSpecific #folderTopSecondaryInfos {
	display: flex;
	justify-content: space-between;
}

.pageTopArea.folderShowSpecific #invitedUserPanel {
	text-align: right;	
	margin-left: 20px;
}

.pageTopArea.folderShowSpecific #invitedUserPanel span.sharedWith {
	color: #bbb;
}

/* ==================================================================== sendReceiveFilesSpecific =================================== */

#sendReceiveFilesForm .pageTopArea .actions > div input[type='checkbox'] {
	width: 24px;
	height: 24px;
}

#sendReceiveFilesForm .pageTopArea .actions > div .flexRowReverseOrder {
	flex-direction: row-reverse;
}

.cssCentricDesign.sendReceiveFilesSpecific .buttonSendButtons { 
	position: relative; 
	min-height: 1px;
}

.cssCentricDesign.sendReceiveFilesSpecific .buttonSendButtons > * {
	position: absolute; 
	top: -64px; 
	right: 0;
}

.cssCentricDesign .passwordFormFragment {
	width: 100%;
	max-width: 200px;
}

.cssCentricDesign .passwordFormFragment > div:first-of-type {
	display: flex;
    justify-content: flex-start;
    align-items: center;
}

.cssCentricDesign .passwordFormFragment > div:last-of-type {
	margin-top: 3px;
}

.cssCentricDesign .passwordFormFragment > div:last-of-type > div {
	display: flex;
	flex-direction: column;
}

.cssCentricDesign .passwordFormFragment > div:last-of-type .alignItemsFlexEnd {
	align-items: flex-end;
}


.cssCentricDesign .passwordFormFragment input[type='password'] {
	width: calc( 100% - 2px );
	margin-top: 2px;
	margin-bottom: 10px;
	height: 24px;
    font-size: 14px;
}

/* ==================================================================== sendReceiveFilesForm =================================== */

#sendReceiveFilesForm.cssCentricDesign .mainFormElementsArea {
	max-width: 695px;
}

#sendReceiveFilesForm.cssCentricDesign .mainFormElementsArea span.sharedWith {
	color: #bbb;
}

#sendReceiveFilesForm.cssCentricDesign .mainFormElementsArea .ownerAsReceiver {
	margin-bottom: 15px;
}


/* ==================================================================== folderListForm & addMailContactForm =================================== */

#addMailContactForm .addMailContactRow, 
#folderListForm .createNewFolderRow,
#folderListForm .withPasswordRow {
	display:flex;
	align-items: center;
	height: 40px;
	justify-content: space-between;
	padding-left: 3px;
	background-color: #efefef;
	margin-top: 16px;
}

#folderListForm .withPasswordRow {
	justify-content: flex-start;
	margin-top: 0;
	max-width: calc(100% - 215px - 16px);
}

#folderListForm .firstLabelOfRow {
	min-width: 90px;
	display: flex;
	justify-content: flex-end;
}

#folderListForm .withPasswordRow .firstLabelOfRow {
	min-width: calc(90px -  18px - 3px);
}

#folderListForm .withPasswordRow label:last-of-type {
	white-space: nowrap;
	margin-left: 16px;
}

#addMailContactForm .addMailContactRow > div:first-of-type,
#folderListForm .createNewFolderRow > div:first-of-type {
	width: 100%;
	display: flex;
}

#addMailContactForm .addMailContactRow > div:first-of-type > div,
#folderListForm .createNewFolderRow > div:first-of-type > div {
	display:flex;
	align-items: center;
	flex: 0 1 auto;
	white-space: nowrap;
}

#addMailContactForm .addMailContactRow .rich-tool-tip,
#folderListForm .createNewFolderRow .rich-tool-tip {
	white-space: normal;
}

#addMailContactForm .addMailContactRow > div:first-of-type > div.inputInRow,
#folderListForm .createNewFolderRow > div:first-of-type > div.inputInRow {
	flex: 1 1 auto;
}

#addMailContactForm .addMailContactRow > div:first-of-type > div.inputInRow input[type='text'],
#folderListForm .createNewFolderRow > div:first-of-type > div.inputInRow input[type='text'],
#folderListForm .withPasswordRow input[type='password']{
	height: 24px;
	font-size: 14px;
	width: 100%;
	margin-left: 3px;
	margin-right: 3px;
	padding-left: 3px;
	padding-right: 3px;
}

#addMailContactForm .addMailContactRow > div:last-of-type,
#folderListForm .createNewFolderRow > div:last-of-type {
	background-color: white;
	margin-left: 10px;	
}

#addMailContactForm .errorsForRow,
#folderListForm .errorsForRow {
	min-height: 16px;
	margin-top: 4px;
	margin-bottom: 8px;
}
 



/* ==================================================================== rich-table =================================== */

#folderListForm .rich-table,
#folderShowForm .rich-table,
#mailContactManagementForm .rich-table {
	width: 100%;
    background-color: white;
    border-collapse: collapse;
}

#folderListForm .rich-table-row:hover,
#folderShowForm .rich-table-row:hover {
	background-color: #efefef;
}


#folderListForm .rich-table,
#folderListForm .rich-table-cell,
#folderListForm .rich-table-headercell,
#folderShowForm .rich-table,
#folderShowForm .rich-table-cell,
#folderShowForm .rich-table-headercell,
#mailContactManagementForm  .rich-table,
#mailContactManagementForm  .rich-table-cell,
#mailContactManagementForm  .rich-table-headercell {
	border: 0px solid white;
	font-size: 12px;
}

#folderListForm .rich-table-cell,
#folderListForm .rich-table-headercell,
#folderShowForm .rich-table-cell,
#folderShowForm .rich-table-headercell,
#mailContactManagementForm .rich-table-cell,
#mailContactManagementForm .rich-table-headercell,
#modifyUserDataForm td {	
	padding: 3px;
}

#folderListForm tbody .rich-table-cell,
#folderShowForm tbody .rich-table-cell,
#mailContactManagementForm tbody .rich-table-cell,
#folderShowForm td.rich-table-footercell,
#mailContactManagementForm td.rich-table-footercell {
	border-top: 1px solid #efefef;
	border-left: 2px solid white;
	border-bottom: 0px solid white;
	border-right: 2px solid white;
}

#folderListForm .rich-table-headercell {
	font-weight: bold;
	background-color: white;
	text-align: left;
	white-space: nowrap;
}

#folderListForm td img,
#folderShowForm td img,
#mailContactManagementForm td img,
#mailContactManagementForm th img {
	width: 32px;
	height: 32px;
	
}

#folderListForm td:first-of-type.rich-table-cell,
#folderShowForm td:first-of-type.rich-table-cell {
	min-width: 34px;
}

#folderListForm td.mainTableCell.rich-table-cell,
#folderShowForm td.mainTableCell.rich-table-cell {
	/* background-color: khaki; */
	width: 99%;
}
#folderListForm td.nowrapTableCell.rich-table-cell {
	white-space: nowrap;
}

#folderListForm td.mainTableCell.rich-table-cell > a {
	color: black;
	font-weight: bold;
	display: flex;
	align-items: center;
	min-height: 24px;
}

#folderShowForm td.mainTableCell.rich-table-cell > .downloadViaTextLink {
	display: flex;
	height: 30px;
	color: black;
	flex-direction: column;
	justify-content: space-between;
	font-size: 12px;
	padding-left: 3px;
	padding-right: 3px;
}

#folderListForm td.mainTableCell.rich-table-cell > a:hover,
#folderShowForm td.mainTableCell.rich-table-cell > .downloadViaTextLink:hover,
#folderShowForm td.rich-table-footercell > a:hover {
	text-decoration: none;
}

#folderShowForm td.mainTableCell.rich-table-cell > .downloadViaTextLink > div:first-of-type {
	display: flex;
	justify-content: space-between;
	font-weight: bold;
}

#folderShowForm td.mainTableCell.rich-table-cell > .downloadViaTextLink > div:last-of-type {
	display: flex;
	justify-content: flex-end;
	color: #999;
}

#folderShowForm td.mainTableCell.rich-table-cell > .downloadViaTextLink > div:last-of-type > span {
	margin-left: 20px;
}

#folderShowForm td.rich-table-cell.expiryColumn {
	min-width: 72px;
	text-align: center;
	vertical-align: bottom;
	color: #999;
	padding-bottom: 4px;
	line-height: 15px;
}

#folderShowForm td:last-of-type.rich-table-cell {
	min-width: 72px;
	text-align: right;
}

#folderShowForm td.rich-table-footercell > a {
	font-size: 12px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: black;
}

#folderShowForm td.rich-table-footercell img {
	padding-bottom: 4px;
	margin-right: 12px;
	vertical-align: middle;
}

/* ==================================================================== addInvitationPanelForm =================================== */

.cssCentricDesign .buildUpInvitations,
.cssCentricDesign .pseudoBuildUpInvitations {
	background-color: #efefef;
}
.cssCentricDesign .addressPickRow {
	min-height: 40px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cssCentricDesign .addressPickRow > div:first-of-type {
	flex: 1 1 auto;
}

.cssCentricDesign .addressPickRow > div:first-of-type > input {
	width: calc( 100% - 9px - 6px);
	height: 24px;
	font-size: 14px;
	margin-left: 3px;
	margin-top: 3px;
	padding-left: 5px;
	padding-right: 5px;
}

.cssCentricDesign .addressPickRow > div:last-of-type {
/*	flex: 0 1 auto; */
	flex: 1 1 auto;
	display: flex;
}

.cssCentricDesign .addressPickRow .pleasePress {
	background-color: DarkOrange;
}

.cssCentricDesign #addInvitationPanelForm {
	font-size: 12px;	
}

.cssCentricDesign #addInvitationPanelForm .spaceForErrorMessage {
	margin-bottom: 6px;
}

.cssCentricDesign .usersToInviteList {
	width: 100%;
/* 	margin: 4px 0 18px 0; */
	margin: 4px 0 4px 0;
	font-size: 12px;
	min-height: 22px;
	/* height: 88px; */
	/*overflow: auto; */
}
.cssCentricDesign .usersToInviteList .iconAllignedEmail {
/* 	margin: 3px; */
	margin: 3px 2px 1px 3px;	
	display: inline-block;
}
.cssCentricDesign .usersToInviteList .iconAllignedEmail img{
	vertical-align: middle;
	margin-left: 1px;
	margin-right: 4px;
	width: 16px;
	height: 16px;
}

/* ==================================================================== invitationMessage =================================== */

.cssCentricDesign .invitationMessageContainer {
	margin: 5px 0;
	width: 100%;
}

.cssCentricDesign .invitationMessageContainer textarea {
	width: calc( 100% - 6px - 6px );
	height: 78px;
	font-size: 14px;
	padding: 5px;
}

.cssCentricDesign .invitationMessageContainer .invitationMessageFooter {
	display: flex;
	justify-content: space-between;
}

.cssCentricDesign .invitationMessageContainer .invitationMessageError {
	display: flex;
	justify-content: space-between;
	flex: 3;
}

.cssCentricDesign .invitationMessageContainer .invitationMessageCharsLeft {
	width: 100%;
	text-align: right;
	flex: 1;
	color: #bbb;
}

.cssCentricDesign .invitationMessageContainer .invitationMessageCharsLeft input {
	border: 0px solid;
	margin-top:2px;
}

/* ==================================================================== notificationSettingsForm =================================== */

#notificationSettingsForm .twoColumns {
	display: flex;
	justify-content: space-around;
}


#notificationSettingsForm .twoColumns > div > div:first-of-type {
	font-size: 16px;
	margin: 12px 0;
}

#notificationSettingsForm .explanation {
	margin: 12px 0;
	font-size: 12px;
	color: #808080;
	line-height: 1.5;
}

/* ==================================================================== settingsPanelForm =================================== */

.cssCentricDesign #settingsPanelForm .labeledFormElement > div:first-of-type {
	margin: 3px 0;
}

.cssCentricDesign #settingsPanelForm .labeledFormElement input {
	height: 24px;
	font-size: 14px;
	margin-bottom: 10px;
}

.cssCentricDesign #settingsPanelForm .rich-inslider {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 10px;
} 

.cssCentricDesign #settingsPanelForm .labeledFormElement input.fullRowInputField {
	width: calc( 100% - 6px );
}

.cssCentricDesign #settingsPanelForm .labeledCheckbox {
	margin: 3px 0;
}


/* ==================================================================== confirmDeleteModalPanel =================================== */

.confirmDeleteModalPanel.cssCentricDesign table {
	font-size: 12px;
}
/* ==================================================================== fileUploadFormPanel & password_input =================================== */

#password_input.cssCentricDesign input,
#modifyUserDataForm.cssCentricDesign td input {
	height: 24px;
    font-size: 12px;
    padding: 0 3px;
}

/* ==================================================================== modifyUserDataForm =================================== */


#uploadSwitchFormPanel {
	display: flex;
	align-items: center;
	height: 18px;
}

#uploadSwitchFormPanel a {
	color: black;	
	margin-left: 3px;
	font-size: 12px;
}

#uploadSwitchFormPanel a:hover {
	text-decoration: none;
	color: DarkOrange;
}


/* ==================================================================== expiresPickRow =================================== */

.cssCentricDesign .expiresPickRow {
	min-width: 32px;
	margin: 3px 0;
}

.cssCentricDesign .expiresPickRow input {
	height: 24px;
    font-size: 12px;
    border: none;
    margin-left: 3px;
    outline: none;
}

.cssCentricDesign .actions > div .expiresPickRow img {
	width: 27px;
	height: 27px;
	margin-left: 3px;
	margin-right: 0px;
}

/* ==================================================================== mailContactManagementForm =================================== */


#mailContactManagementForm {
}

#mailContactManagementForm .rich-table-headercell {
	font-weight: bold;
	background-color: #efefef;
	text-align: left;
	white-space: nowrap;
}

#mailContactManagementForm th:last-of-type {
	text-align: right;
	font-weight: normal;
	
}

#mailContactManagementForm td.justIcon {
	width:36px;
	text-align: right;
}

#mailContactManagementForm input[type=text] {
	margin-top: 2px;	
}

#mailContactManagementForm input[type=text].usedAsFilter {
	outline: 2px solid DarkOrange;
	margin-right: 3px;
}

#mailContactManagementForm .selectionDisplayPanel {
	margin-top: 15px;
	display: flex;
	font-size: 12px;
}

#mailContactManagementForm .selectionDisplayPanel > div:first-of-type {
	flex: 0 1 auto;
	white-space: nowrap;
	margin-right: 15px;
}

#mailContactManagementForm .selectionDisplayPanel > div:last-of-type {
	border-bottom: 1px solid #efefef;
	flex: 1 1 auto;
}



/* ==================================================================== rich-dtascroller-table =================================== */

.cssCentricDesign .rich-dtascroller-table {
	border: 1px solid #efefef;
	margin-top: 15px;
}


.cssCentricDesign .rich-datascr-button {
	background-color: white;
	border-width: 0px;	
}

.cssCentricDesign .rich-dtascroller-table td {
	width: 36px;
	height: 28px;
	border-top: 4px solid white;
	border-bottom: 4px solid white;
	font-size: 12px;
}

.cssCentricDesign .rich-dtascroller-table td:hover {
	background-color: #efefef;
}

.cssCentricDesign .rich-dtascroller-table .rich-datascr-act {
	border-top-color: white;
	border-bottom: 4px solid DarkOrange;
} 


/* ==================================================================== cssCentricDesign =================================== */

.cssCentricDesign .rich-mpnl-header {
	color: white;
	background-color: black;
	background-image: none;
	height: 32px;
	display: flex;
	align-items: center;
	margin: 0px;
	padding: 3px 10px;
	font-size: 14px;
	font-weight: normal;
}

.cssCentricDesign .rich-mpnl-mask-div-opaque {
	opacity: 0.9;
}

.cssCentricDesign .secondaryText {
	color: #999;
}

.cssCentricDesign .flatButtonRow {
	display: flex;
	justify-content: center;
	align-items:center;
}

.cssCentricDesign .flatButtonRow.stickyToBottom {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
}

.cssCentricDesign .flatButtonRow.rightHandSide {
	display: flex;
	justify-content: right;
	align-items:center;
}

.cssCentricDesign .flatButton {
	color: white;
	font-size: 12px;
	min-width: 100px;
	height: 34px;
	padding: 3px 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #585858;
	white-space: nowrap;
}
.cssCentricDesign .flatButton:not(:first-child) {
	margin-left:4px;
}

.cssCentricDesign .flatButton:hover {
	text-decoration: none;
}

.cssCentricDesign .flatButton img {
	min-width: 32px;	
	margin: 0px 2px;
}

.cssCentricDesign .flatButton.emphasizedBackgroundColor {
	background-color: DarkOrange;
}

.cssCentricDesign .flatIconLink {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height:32px;
	padding: 4px;
	/*background-color: cyan;*/
	margin-left: 4px;
}
.cssCentricDesign .flatIconLink img {
	width: 24px;
	height:24px;	
}

/* ==================================================================== rich:suggestionbox =================================== */
/* rich:suggestionbox is inserted at the very top of the document */
/* Its possible to see a bit of the DOM structure in Firefox 52 (via Context-Menu "Inspect Element". but not so good in Chrome 57 (uncheck the display: none in ChromeDevTools id="sendReceiveFilesForm:suggestionMailContact" */

.rich-sb-ext-decor-1 {
	box-shadow: 5px 5px 10px #CCCCCC;
}
.rich-sb-ext-decor-2 {
	background-color: #efefef;
	border: 1px dashed green;
}
.rich-sb-int {
	height: 24px;
}

.rich-sb-int-sel {
	background-color: white;
	background-image: none;
	color: DarkOrange;
}
.rich-sb-cell-padding {
	min-width: 49%;
}

.rich-sb-shadow {
	display: none;
}

/* ==================================================================== misc =================================== */
/* stuff that is scattered around */
.quotaInfoFaded {
	text-align: right;
	margin-right: 230px;
	margin-top: 2px;
	color: #bbb;
	
}

.rich-message {
	vertical-align: baseline;
	color: #D01E33;
}

.rich-message-label {
	padding-left: 0;
	background-color: #eecccc;
}