html {
    font-family: "Verdana", serif;
    font-size: 18px;
}

.radio label {
    font-family: "Verdana", serif;
    font-size: 18px;
}

div {
    font-size: 16px;
}

.bodoheadercontainer {
    background-image: url("img/background.png");
}

.lagis-gwt-error-area {
	background-color: #fdf8de !important;
	border-top: 1px solid !important;
	border-left: 1px solid !important;
	border-right: 1px solid !important;
	border-bottom: 1px solid !important;
	border-color: #eda128 !important;
	padding: 5px 15px 10px 15px !important;
}

.label2 {
    font-size: 25px;
}

.lagis-gwt-radiobox input {
	height: 1em;
	width: 1em;
}

.lagis-gwt-radiobox label {
	display: inline-table !important;
	margin-right: 20px !important;
	
	overflow-wrap: break-word !important;
	word-wrap: break-word !important;
	white-space: -moz-normal !important;
	white-space: normal !important;
}

.detailform_label label {
    font: normal 16px "Verdana" !important;
    white-space: normal !important;
}

.detailform_input input {
    font-size: 16px;
    height: 17px;
}

.detailform_area textarea {
    font-size: 16px;
}

.detailform_area_3rows {
    height: 3em !important;
}

.detailform_area_3rows textarea {
    font-size: 16px;
    height: 3em !important;
}

.detailform_div div {
    font-size: 16px;
    height: 17px;
}

.detailform_button .x-btn-text {
    font-size: 16px;
}

.gridheader {
    font-size: 16px;
}

.button div {
    font-size: 16px;
}

.verifiedButton div {
    font-size: 16px;
    background-color: #A5DF00;
}

.verifiedButton td {
    background-image: none;
}

.duallist div {
    font-size: 16px;
}

.toolbar div {
    font-size: 16px;
    font-weight: bold;
}

.toolbar_bodo {
    border: none !important;
    overlay: true;
    background: none !important;
    background-color: #f9ec41 !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

.toolbar_ding {
    border: none !important;
    overlay: true;
    background: none !important;
    background-color: #0094a4 !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

.toolbar_naldo {
    border: none !important;
    overlay: true;
    background: none !important;
    background-color: #c6d401 !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

.footer_bodo {
    background: none;
    background-color: #676767 !important;
    color: white;
}

.footer_ding {
    background: none;
    background-color: #b3ced1 !important;
    color: black;
}

.toolbar_bodo div {
    font-size: 16px;
    font-weight: bold;
}

.toolbar_ding div {
    font-size: 16px;
    font-weight: bold;
}

.combolist select, option {
    font-size: 16px;
}

.editor textarea {
    font-size: 16px;
}

.login_welcome {
    font-size: 24px;
    font-weight: bold;
    font-decoration: underline;
}

.wizard_header {
    font-size: 22px;
    font-weight: bold;
    text-align: left;
}

.wizard_header label {
    font-size: 22px;
    font-weight: bold;
    text-align: left;
}

.radio_header {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

.radio_header label {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

/* date picker */
.gwt-DatePicker {
    border: 1px solid #ccc;
    border-top: 1px solid #999;
    cursor: default;
}

.gwt-DatePicker td, .datePickerMonthSelector td:focus {
    outline: none;
}

.datePickerMonthSelector td:focus {
    outline: none;
}

.datePickerDays {
    width: 100%;
    background: white;
}

.datePickerDay, .datePickerWeekdayLabel, .datePickerWeekendLabel {
    font-size: 85%;
    text-align: center;
    padding: 4px;
    outline: none;
    font-weight: bold;
    color: #333;
    border-right: 1px solid #EDEDED;
    border-bottom: 1px solid #EDEDED;
}

.datePickerWeekdayLabel, .datePickerWeekendLabel {
    background: #fff;
    padding: 0px 4px 2px;
    cursor: default;
    color: #666;
    font-size: 70%;
    font-weight: normal;
}

.datePickerDay {
    padding: 4px 7px;
    cursor: hand;
    cursor: pointer;
}

.datePickerDayIsWeekend {
    background: #f7f7f7;
}

.datePickerDayIsFiller {
    color: #999;
    font-weight: normal;
}

.datePickerDayIsValue {
    background: #d7dfe8;
}

.datePickerDayIsDisabled {
    color: #AAAAAA;
    font-style: italic;
}

.datePickerDayIsHighlighted {
    background: #F0E68C;
}

.datePickerDayIsValueAndHighlighted {
    background: #d7dfe8;
}

.datePickerDayIsToday {
    padding: 3px;
    color: #fff;
    background: url(images/hborder.png) repeat-x 0px -2607px;
}

.datePickerMonthSelector {
    width: 100%;
    padding: 1px 0 5px 0;
    background: #fff;
}

.datePickerPreviousButton, .datePickerNextButton,
.datePickerPreviousYearButton, .datePickerNextYearButton {
    font-size: 120%;
    line-height: 1em;
    color: #3a6aad;
    cursor: hand;
    cursor: pointer;
    font-weight: bold;
    padding: 0px 4px;
    outline: none;
}

td.datePickerMonth, td.datePickerYear {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 100%;
    font-weight: bold;
    color: #333;
}

.gwt-DateBox {
    padding: 5px 4px;
    border: 1px solid #ccc;
    border-top: 1px solid #999;
    font-size: 100%;
}

.gwt-DateBox input {
    width: 8em;
}

.dateBoxFormatError {
    background: #ffcccc;
}

.dateBoxPopup {

}

.error-msg {
    color: #dd0000;
    font-weight: bold;
}

.slf_orderdetails_container {
	display: flex;
	flex-direction: row;
	line-height: 1.5;
	margin: 20px 0px; 
}

.slf_orderdetails_container_left {
	display: flex;
	align-items: stretch;
	
	margin-bottom: 15px;
}

.slf_orderdetails_container_left span {
	flex-basis: 250px;
	min-width: 250px;
}

.slf_orderdetails_container_img span {
	flex-basis: 120px;
	visibility: hidden;
}

.slf_orderdetails_container_img {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding-left: 30px;
}

.slf_orderdetails_container_img img {
    align-self: flex-start;
    margin: 0px 10px 0px 10px;
}

/* ------------------------------------------------------------
   Eye-Able launcher icon customization (CSS-only)
   - No JS needed. Targets common Eye-Able button patterns.
   - If your widget uses different selectors, add them to the list below.
   - To use your own icon file, replace --eye-able-icon with url('img/your-icon.svg').
   ------------------------------------------------------------ */
 :root {
    /* Default: inline SVG eye icon (white). Replace with your own file URL if desired. */
    --eye-able-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23ffffff' d='M32 12C18 12 7 24 4 32c3 8 14 20 28 20s25-12 28-20c-3-8-14-20-28-20zm0 34c-7.7 0-14-6.3-14-14s6.3-14 14-14 14 6.3 14 14-6.3 14-14 14zm0-22a8 8 0 100 16 8 8 0 000-16z'/%3E%3C/svg%3E");
    --eye-able-size: 52px;          /* button size */
    --eye-able-bg: #0094a4;         /* background circle color (DING brand) */
    --eye-able-bg-hover: #007d8b;   /* hover color */
    --eye-able-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Likely selectors for the Eye-Able launcher button */
button[aria-label*="Eye-Able" i],
a[aria-label*="Eye-Able" i],
div[id^="eyeAble"][role="button"],
button[id*="eyeable" i],
.ea-launcher,
#eyeAbleWidgetButton,
.eyeAbleWidgetButton,
.eyeable-start-button {
    width: var(--eye-able-size) !important;
    height: var(--eye-able-size) !important;
    min-width: var(--eye-able-size) !important;
    min-height: var(--eye-able-size) !important;
    border-radius: 50% !important;
    background: var(--eye-able-bg) center/60% no-repeat !important;
    background-image: var(--eye-able-icon) !important; /* custom icon */
    box-shadow: var(--eye-able-shadow) !important;
    border: none !important;
    color: transparent !important; /* hide any text label inside */
    overflow: hidden !important;
}

/* Hover/Focus state */
button[aria-label*="Eye-Able" i]:hover,
a[aria-label*="Eye-Able" i]:hover,
div[id^="eyeAble"][role="button"]:hover,
button[id*="eyeable" i]:hover,
.ea-launcher:hover,
#eyeAbleWidgetButton:hover,
.eyeAbleWidgetButton:hover,
.eyeable-start-button:hover,
button[aria-label*="Eye-Able" i]:focus,
a[aria-label*="Eye-Able" i]:focus,
div[id^="eyeAble"][role="button"]:focus,
button[id*="eyeable" i]:focus,
.ea-launcher:focus,
#eyeAbleWidgetButton:focus,
.eyeAbleWidgetButton:focus,
.eyeable-start-button:focus {
    background-color: var(--eye-able-bg-hover) !important;
    outline: none !important;
}

/* Hide default inner images/SVGs to ensure only our icon is visible */
button[aria-label*="Eye-Able" i] img,
a[aria-label*="Eye-Able" i] img,
div[id^="eyeAble"][role="button"] img,
button[id*="eyeable" i] img,
.ea-launcher img,
#eyeAbleWidgetButton img,
.eyeAbleWidgetButton img,
.eyeable-start-button img,
button[aria-label*="Eye-Able" i] svg,
a[aria-label*="Eye-Able" i] svg,
div[id^="eyeAble"][role="button"] svg,
button[id*="eyeable" i] svg,
.ea-launcher svg,
#eyeAbleWidgetButton svg,
.eyeAbleWidgetButton svg,
.eyeable-start-button svg {
    display: none !important;
}

/* Optional: size variants the widget might add */
.eyeAbleWidgetButton.small,
.ea-launcher.small {
    --eye-able-size: 44px;
}
.eyeAbleWidgetButton.large,
.ea-launcher.large {
    --eye-able-size: 60px;
}

/* How to replace the icon with your file (uncomment and adjust):
   :root { --eye-able-icon: url('img/eye-able-custom.svg'); }
*/