@import url("https://use.typekit.net/naf6gjb.css");
.optimize-quality {
  image-rendering: optimizequality;
}

.no-border {
  border: 0 none !important;
}

.position-relative {
  position: relative;
}

.text-uppercase, #mainMenuPanel {
  text-transform: uppercase;
}

.noWrap {
  white-space: nowrap;
}

.bold {
  font-weight: bold;
}

.small {
  font-size: 80%;
}

.w-100 {
  width: 100%;
}

@media screen and (max-width: 640px) {
  .w-sm-100 {
    width: 100% !important;
  }
}
.tableAutoWidth table {
  width: auto;
}
@media screen and (max-width: 640px) {
  .tableAutoWidth table {
    width: 100%;
  }
}

.animate {
  -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
}

.headerText {
  display: block;
  color: #636363;
  font-size: 16px;
  font-weight: bold;
}

.captionText {
  padding: 35px 0;
  display: block;
  color: #636363;
  font-size: 16px;
  font-weight: bold;
}

.wizard {
  margin-left: 20px;
}

.unitName {
  display: inline-block;
  margin-left: 5px;
}

.exchangeRateName {
  display: inline-block;
  width: 64px;
}

.separatorLine {
  padding-top: 20px;
  border-top: 1px solid #636363;
  margin-top: 10px;
}

.bg-grey {
  background-color: #e8e8e8;
}

.underline, .ui-panelgrid .ui-panelgrid-cell.underline {
  border-bottom: 1px solid #636363;
}

img.img-responsive {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 640px) {
  table.table-responsive td {
    display: block;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/***************************************************************************************************/
/** MARGIN *****************************************************************************************/
/***************************************************************************************************/
.margin-0 {
  margin: 0 !important;
}

.margin-left-auto {
  margin-left: auto !important;
}

.margin {
  margin: 0.5em !important;
}

.margin-right {
  margin-right: 0.5em !important;
}

.margin-left {
  margin-left: 0.5em !important;
}

.margin-top {
  margin-top: 0.5em !important;
}

.margin-bottom {
  margin-bottom: 0.5em !important;
}

.margin-2 {
  margin: 1em !important;
}

.margin-right-2 {
  margin-right: 1em !important;
}

.margin-left-2 {
  margin-left: 1em !important;
}

.margin-top-2 {
  margin-top: 1em !important;
}

.margin-bottom-2 {
  margin-bottom: 1em !important;
}

.spacerLeft_basic {
  margin-left: 10px;
}

.spacerRight_basic {
  margin-right: 10px;
}

.spacerTop_basic {
  margin-top: 10px;
}

.spacerBottom_basic {
  margin-bottom: 10px;
}

/***************************************************************************************************/
/** PADDING *****************************************************************************************/
/***************************************************************************************************/
.padding-0 {
  padding: 0 !important;
}

.padding-right-0 {
  padding-right: 0 !important;
}

.padding-left-0 {
  padding-left: 0 !important;
}

.padding-top-0 {
  padding-top: 0 !important;
}

.padding-bottom-0 {
  padding-bottom: 0 !important;
}

.padding {
  padding: 0.5em !important;
}

.padding-right {
  padding-right: 0.5em !important;
}

.padding-left {
  padding-left: 0.5em !important;
}

.padding-top {
  padding-top: 0.5em !important;
}

.padding-bottom {
  padding-bottom: 0.5em !important;
}

.padding-2 {
  padding: 1em !important;
}

.padding-right-2 {
  padding-right: 1em !important;
}

.padding-left-2 {
  padding-left: 1em !important;
}

.padding-top-2 {
  padding-top: 1em !important;
}

.padding-bottom-2 {
  padding-bottom: 1em !important;
}

.pl-1 {
  padding-left: 10px !important;
}

.pr-1 {
  padding-right: 10px !important;
}

.pt-1 {
  padding-top: 10px !important;
}

.pb-1 {
  padding-bottom: 10px !important;
}

/***************************************************************************************************/
/** DISPLAY ***************************************************************************************/
/***************************************************************************************************/
.displayNone {
  display: none !important;
}

.inlineBlock {
  display: inline-block !important;
}

.displayToLgMode {
  display: none !important;
}

.displayFromLgMode {
  display: block !important;
}

.displayToMobileMode {
  display: none !important;
}

.displayFromMobileMode {
  display: block !important;
}

.displayInTableToMobileMode {
  display: none !important;
}

.displayInTableFromMobileMode {
  display: table-cell !important;
}

.displayToTabletMode {
  display: none !important;
}

.displayFromTabletMode {
  display: block !important;
}

@media screen and (max-width: 1025px) {
  .displayToLgMode {
    display: block !important;
  }

  .displayFromLgMode {
    display: none !important;
  }

  .displayToTabletMode {
    display: block !important;
  }

  .displayFromTabletMode {
    display: none !important;
  }
}
@media screen and (max-width: 640px) {
  .displayToMobileMode {
    display: block !important;
  }

  .displayFromMobileMode {
    display: none !important;
  }

  .displayInTableToMobileMode {
    display: table-cell !important;
  }

  .displayInTableFromMobileMode {
    display: none !important;
  }
}
/***************************************************************************************************/
/** TEXT-ALIGN ***************************************************************************************/
/***************************************************************************************************/
.right {
  text-align: right !important;
}

.left {
  text-align: left !important;
}

.center {
  text-align: center !important;
}

/***************************************************************************************************/
/** FLOAT ***************************************************************************************/
/***************************************************************************************************/
.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.clearBoth {
  clear: both;
}

@media screen and (max-width: 640px) {
  .floatLeftOnMobile {
    float: left;
  }
}
/***************************************************************************************************/
/** COMMON *****************************************************************************************/
/***************************************************************************************************/
* {
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: droid-sans, sans-serif;
  font-size: 13.2px;
  color: black;
  height: 100%;
  background-color: #e8e8e8;
}

img {
  border: 0;
  image-rendering: -webkit-optimize-contrast;
}

a {
  color: black;
  text-decoration: none;
}
a:hover, a.activated_link {
  color: #636363;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  outline-color: black;
  color: black;
  border: 1px solid #636363;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  background: none;
}

.ui-widget {
  font-size: 13.2px;
  font-family: droid-sans, sans-serif;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: droid-sans, sans-serif;
}

.ui-widget-content {
  color: black;
  border: none;
}

/***************************************************************************************************/
/** OUTPUT LABEL ***********************************************************************************/
/***************************************************************************************************/
.outputLabel {
  padding: 6px 20px 6px 0;
}

/***************************************************************************************************/
/** PANEL ******************************************************************************************/
/***************************************************************************************************/
.panelOK, .panelFAIL, .panelINFO {
  display: block;
  margin: 5px;
  padding: 10px;
  border-width: 1px;
  border-style: solid;
  color: black;
}

.panelOK {
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.panelFAIL {
  background-color: #f2dede;
  border-color: #ebccd1;
}

.panelINFO {
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.textOK {
  color: #3c763d;
}

.textFAIL {
  color: #a94442;
}

.textINFO {
  color: #31708f;
}

/***************************************************************************************************/
/** UI-PANELGRID **********************************************************************************/
/***************************************************************************************************/
.ui-panelgrid .ui-widget-content {
  background: none;
}
.ui-panelgrid .ui-widget-content.ui-dialog {
  background: #fff;
}
.ui-panelgrid .ui-panelgrid-cell {
  border: none;
  padding: 6px 0;
}
.ui-panelgrid .ui-grid-responsive .ui-grid-row {
  border: none;
}

.detailColumnLabel, .ui-panelgrid .ui-panelgrid-cell.detailColumnLabel {
  padding-right: 20px;
  padding-left: 5px;
}
.detailColumnLabel:first-child, .ui-panelgrid .ui-panelgrid-cell.detailColumnLabel:first-child {
  padding-left: 0;
}
.detailColumnLabel.noPadding, .ui-panelgrid .ui-panelgrid-cell.detailColumnLabel.noPadding {
  padding-right: 0;
}

.detailColumnSubLabel, .ui-panelgrid .ui-panelgrid-cell.detailColumnSubLabel {
  padding-right: 20px;
  font-weight: bold;
  color: black;
}

.detailColumnValueSeparator {
  padding-top: 4px;
}

/***************************************************************************************************/
/** UI-ICON **********************************************************************************/
/***************************************************************************************************/
.ui-state-default .ui-icon,
.ui-widget-header .ui-icon {
  background-image: url("../javax.faces.resource/images/ui-icons_ffffff_256x240.png.jsf?ln=primefaces-aristo");
  filter: brightness(0);
}

/***************************************************************************************************/
/** UI-DATEPICKER **********************************************************************************/
/***************************************************************************************************/
.ui-datepicker {
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
  border-radius: 0;
  padding: 0;
}
.ui-datepicker .ui-datepicker-header {
  background: #ffda6d;
  border: 0;
}
.ui-datepicker .ui-datepicker-header a.ui-state-hover > .ui-icon,
.ui-datepicker .ui-datepicker-header a.ui-state-focus > .ui-icon {
  filter: none;
}
.ui-datepicker .ui-datepicker-calendar {
  border-right: 3px solid white;
  border-left: 3px solid white;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-default {
  color: black;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-hover {
  color: #636363;
}
.ui-datepicker .ui-datepicker-current-day .ui-state-highlight,
.ui-datepicker .ui-datepicker-current-day .ui-state-default {
  background-color: #ffda6d;
}
.ui-datepicker .ui-datepicker-buttonpane button {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  padding-top: 3px;
  padding-bottom: 3px;
  background: none;
  background-color: #ffda6d;
  border-radius: 0;
  border: 0;
  text-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  font-size: 13.2px;
  color: black;
  padding-left: 13px;
  padding-right: 13px;
}
.ui-datepicker .ui-datepicker-buttonpane button span {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  color: black;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover {
  background: none;
  background-color: #636363;
  border-radius: 0;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: white;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover span {
  color: white;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover > .ui-icon {
  filter: none;
}
.ui-datepicker .ui-datepicker-title select {
  border: 1px solid #ffda6d;
}

/***************************************************************************************************/
/** UI-RADIOBUTTON ********************************************************************************/
/***************************************************************************************************/
.ui-radiobutton .ui-radiobutton-box,
.ui-chkbox .ui-chkbox-box {
  background: 0;
}
.ui-radiobutton .ui-radiobutton-box.ui-state-hover,
.ui-chkbox .ui-chkbox-box.ui-state-hover {
  background: #ffda6d;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  background: none;
  background-color: #ffda6d;
  box-shadow: none;
}

/***************************************************************************************************/
/** UI-SPINNER-BUTTON ******************************************************************************/
/***************************************************************************************************/
.ui-spinner-button {
  height: auto;
}

/***************************************************************************************************/
/** UI-CHECKBOX ************************************************************************************/
/***************************************************************************************************/
.ui-chkbox .ui-chkbox-box {
  border-radius: 0;
}

/***************************************************************************************************/
/** UI-AUTOCOMPLETE ********************************************************************************/
/***************************************************************************************************/
.ui-autocomplete-panel {
  border-radius: 0;
}
.ui-autocomplete-panel .ui-autocomplete-list {
  background-color: #ffda6d;
  border-radius: 0;
}
.ui-autocomplete-panel .ui-autocomplete-item {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  padding-top: 3px;
  padding-bottom: 3px;
  background: none;
  background-color: #ffda6d;
  border-radius: 0;
  border: 0;
  text-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  font-size: 13.2px;
  color: black;
  margin: 0;
  border-bottom: 1px solid black !important;
}
.ui-autocomplete-panel .ui-autocomplete-item span {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  color: black;
}
.ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight, .ui-autocomplete-panel .ui-autocomplete-item.ui-state-hover {
  background: none;
  background-color: #636363;
  border-radius: 0;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: white;
  cursor: pointer;
}
.ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight span, .ui-autocomplete-panel .ui-autocomplete-item.ui-state-hover span {
  color: white;
}
.ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight > .ui-icon, .ui-autocomplete-panel .ui-autocomplete-item.ui-state-hover > .ui-icon {
  filter: none;
}

input[type=text].ui-autocomplete-input {
  width: calc(200px - 2.4em);
}
input[type=text].ui-autocomplete-input.ui-autocomplete-dd-input {
  padding-right: calc(4px + 2.4em);
}
@media screen and (max-width: 800px) {
  input[type=text].ui-autocomplete-input {
    width: calc(180px - 2.4em);
  }
}
@media screen and (max-width: 640px) {
  input[type=text].ui-autocomplete-input {
    width: calc(200px - 2.4em);
  }
}

/***************************************************************************************************/
/** UI-SELECTONEMENU *****************************************************************************/
/***************************************************************************************************/
.ui-selectonemenu-panel {
  border-radius: 0;
}
.ui-selectonemenu-panel .ui-selectonemenu-list {
  background-color: #ffda6d;
  border-radius: 0;
}
.ui-selectonemenu-panel .ui-selectonemenu-item {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  padding-top: 3px;
  padding-bottom: 3px;
  background: none;
  background-color: #ffda6d;
  border-radius: 0;
  border: 0;
  text-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  font-size: 13.2px;
  color: black;
  margin: 0;
  border-bottom: 1px solid black !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-item span {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  color: black;
}
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight, .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-hover {
  background: none;
  background-color: #636363;
  border-radius: 0;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: white;
  cursor: pointer;
}
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight span, .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-hover span {
  color: white;
}
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight > .ui-icon, .ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-hover > .ui-icon {
  filter: none;
}

.ui-selectonemenu {
  padding-right: calc(2.4em + 5px);
  min-width: calc(-2.4em + 205px) !important;
  border-radius: 0;
  border: 0 !important;
}
.ui-selectonemenu .ui-selectonemenu-trigger {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  padding-top: 3px;
  padding-bottom: 3px;
  background: none;
  background-color: #ffda6d;
  border-radius: 0;
  border: 0;
  text-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  font-size: 13.2px;
  color: black;
  border: 0 !important;
  width: 2.4em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-selectonemenu .ui-selectonemenu-trigger span {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  color: black;
}
.ui-selectonemenu .ui-selectonemenu-trigger.ui-state-hover, .ui-selectonemenu .ui-selectonemenu-trigger.ui-state-focus {
  background: none;
  background-color: #636363;
  border-radius: 0;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: white;
  cursor: pointer;
}
.ui-selectonemenu .ui-selectonemenu-trigger.ui-state-hover span, .ui-selectonemenu .ui-selectonemenu-trigger.ui-state-focus span {
  color: white;
}
.ui-selectonemenu .ui-selectonemenu-trigger.ui-state-hover > .ui-icon, .ui-selectonemenu .ui-selectonemenu-trigger.ui-state-focus > .ui-icon {
  filter: none;
}
.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
  margin-top: 0;
}
.ui-selectonemenu.ui-state-focus .ui-inputfield {
  border-color: #ffda6d;
  box-shadow: inset 0 0 0 1px #a88a4a;
}
@media screen and (max-width: 800px) {
  .ui-selectonemenu {
    min-width: calc(-2.4em + 185px) !important;
  }
}
@media screen and (max-width: 640px) {
  .ui-selectonemenu {
    min-width: calc(-2.4em + 205px) !important;
  }
}

/***************************************************************************************************/
/** UI-INPUT **************************************************************************************/
/***************************************************************************************************/
.ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
  box-shadow: none;
  border-radius: 0px;
  border: 1px solid #636363;
}
.ui-inputfield.ui-state-focus, .ui-widget-content .ui-inputfield.ui-state-focus, .ui-widget-header .ui-inputfield.ui-state-focus {
  border-color: #ffda6d;
  box-shadow: inset 0 0 0 1px #a88a4a;
}

input.ui-inputfield:read-only, .ui-widget-content input.ui-inputfield:read-only, .ui-widget-header input.ui-inputfield:read-only {
  background-color: #e8e8e8;
}

input[type=text], input[type=password], input[type=text].longInputText, textarea {
  width: 200px;
}
@media screen and (max-width: 800px) {
  input[type=text], input[type=password], input[type=text].longInputText, textarea {
    width: 180px;
  }
}
@media screen and (max-width: 640px) {
  input[type=text], input[type=password], input[type=text].longInputText, textarea {
    width: 200px;
  }
  input[type=text].w-sm-100, input[type=password].w-sm-100, input[type=text].longInputText.w-sm-100, textarea.w-sm-100 {
    width: calc(100% - 10px) !important;
  }
}

input[type=text].shortestInputText {
  width: 41px;
}

input[type=text].shortInputText {
  width: 50px;
}

input[type=text].mediumInputText {
  width: 90px;
}

input[type=text].longInputText {
  width: 400px;
}

/***************************************************************************************************/
/** UI-BUTTON **************************************************************************************/
/***************************************************************************************************/
.ui-button {
  margin: 0 2px 2px 0;
  cursor: pointer;
}
.ui-button.ui-state-default {
  padding: 3px 10px;
}

.ui-button-text-icon-left .ui-button-text,
.ui-button-text-only .ui-button-text {
  padding-top: 8px;
  padding-bottom: 8px;
}

.ui-button.ui-state-default,
.ui-widget-content .ui-button.ui-state-default,
.ui-widget-header .ui-button.ui-state-default {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  padding-top: 3px;
  padding-bottom: 3px;
  background: none;
  background-color: #ffda6d;
  border-radius: 0;
  border: 0;
  text-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  font-size: 13.2px;
  color: black;
}
.ui-button.ui-state-default span,
.ui-widget-content .ui-button.ui-state-default span,
.ui-widget-header .ui-button.ui-state-default span {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  color: black;
}

.ui-commandlink.ui-widget.button.ui-button.ui-state-default:hover,
.ui-commandlink.ui-widget.button.ui-button.ui-state-default:focus,
.ui-button.ui-state-hover,
.ui-widget-content .ui-button.ui-state-hover,
.ui-button.ui-state-focus,
.ui-widget-content .ui-button.ui-state-focus {
  background: none;
  background-color: #636363;
  border-radius: 0;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: white;
  cursor: pointer;
}
.ui-commandlink.ui-widget.button.ui-button.ui-state-default:hover span,
.ui-commandlink.ui-widget.button.ui-button.ui-state-default:focus span,
.ui-button.ui-state-hover span,
.ui-widget-content .ui-button.ui-state-hover span,
.ui-button.ui-state-focus span,
.ui-widget-content .ui-button.ui-state-focus span {
  color: white;
}
.ui-commandlink.ui-widget.button.ui-button.ui-state-default:hover > .ui-icon,
.ui-commandlink.ui-widget.button.ui-button.ui-state-default:focus > .ui-icon,
.ui-button.ui-state-hover > .ui-icon,
.ui-widget-content .ui-button.ui-state-hover > .ui-icon,
.ui-button.ui-state-focus > .ui-icon,
.ui-widget-content .ui-button.ui-state-focus > .ui-icon {
  filter: none;
}

.btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

.ui-spinner-button.ui-spinner-up.ui-corner-tr.ui-button.ui-widget.ui-state-default.ui-button-text-only,
.ui-spinner-button.ui-spinner-down.ui-corner-br.ui-button.ui-widget.ui-state-default.ui-button-text-only {
  padding: 1px 0px !important;
}

/***************************************************************************************************/
/** UI-DATATABLE *************************************************************************************/
/***************************************************************************************************/
.ui-datatable {
  border: 0;
  margin-bottom: 15px;
}
.ui-datatable table {
  table-layout: auto;
}
.ui-datatable table thead th,
.ui-datatable table tbody td,
.ui-datatable table tfoot td,
.ui-datatable table tfoot th {
  padding-top: 13px;
  padding-bottom: 13px;
}
.ui-datatable table thead tr th.ui-state-default {
  background: none;
  border: none;
  border-bottom: 1px solid #ffda6d;
  text-align: left;
  text-shadow: none;
}
.ui-datatable table tbody tr.ui-datatable-odd {
  background-color: white;
}
.ui-datatable table tbody tr.ui-state-hover, .ui-datatable table tbody tr.ui-state-highlight {
  background: none;
  border: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #e8e8e8;
}
.ui-datatable table tbody tr td {
  border: none;
  border-bottom: 1px solid #636363;
}
.ui-datatable table tbody tr td.selectControl {
  width: 16px;
}
.ui-datatable table tbody tr td.editControl {
  width: 37px;
  padding-top: 5px;
  padding-bottom: 3px;
}
.ui-datatable table tbody tr td span.ui-column-title {
  font-weight: bold;
}
.ui-datatable table tfoot tr td.ui-state-default {
  background: none;
  border: none;
  border-bottom: 1px solid #636363;
}
.ui-datatable .ui-paginator {
  background: none;
  background-color: #e8e8e8;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #636363;
}
.ui-datatable .ui-paginator a, .ui-datatable .ui-paginator select {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  padding-top: 3px;
  padding-bottom: 3px;
  background: none;
  background-color: #ffda6d;
  border-radius: 0;
  border: 0;
  text-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  font-size: 13.2px;
  color: black;
  padding-left: 15px;
  padding-right: 15px;
}
.ui-datatable .ui-paginator a span, .ui-datatable .ui-paginator select span {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  color: black;
}
.ui-datatable .ui-paginator a.ui-state-default, .ui-datatable .ui-paginator select.ui-state-default {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.ui-datatable .ui-paginator a.ui-state-active, .ui-datatable .ui-paginator a:hover, .ui-datatable .ui-paginator select.ui-state-active, .ui-datatable .ui-paginator select:hover {
  background: none;
  background-color: #636363;
  border-radius: 0;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: white;
  cursor: pointer;
}
.ui-datatable .ui-paginator a.ui-state-active span, .ui-datatable .ui-paginator a:hover span, .ui-datatable .ui-paginator select.ui-state-active span, .ui-datatable .ui-paginator select:hover span {
  color: white;
}
.ui-datatable .ui-paginator a.ui-state-active > .ui-icon, .ui-datatable .ui-paginator a:hover > .ui-icon, .ui-datatable .ui-paginator select.ui-state-active > .ui-icon, .ui-datatable .ui-paginator select:hover > .ui-icon {
  filter: none;
}
.ui-datatable .ui-datatable-footer {
  background: none;
  background-color: #e8e8e8;
  border: none;
  border-radius: 0;
}

/**Client form disabled boxs**/
#clientBoxs.disabled {
  opacity: 0.8;
  cursor: no-drop;
}
#clientBoxs.disabled input, #clientBoxs.disabled button {
  opacity: 0.8;
  cursor: no-drop;
}

@media screen and (max-width: 640px) {
  .ui-datatable table {
    table-layout: fixed;
  }

  .dataTable .right, .dataTable .center {
    text-align: left !important;
  }
}
/***************************************************************************************************/
/** UI-TABS ****************************************************************************************/
/***************************************************************************************************/
.ui-tabs .ui-tabs-nav {
  background: none;
  background-color: #e8e8e8;
}
.ui-tabs .ui-tabs-nav li {
  background: none;
  box-shadow: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected, .ui-tabs .ui-tabs-nav li.ui-state-hover {
  background-color: #a88a4a;
  border: 1px solid black;
  -moz-box-shadow: 0 0 4px black;
  -webkit-box-shadow: 0 0 4px black;
  box-shadow: 0 0 4px black;
  border-bottom: 0;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-hover a {
  color: white;
  text-shadow: none;
}
.ui-tabs .ui-tabs-panel {
  border: 1px solid #ddd;
}

/***************************************************************************************************/
/** UI-PICKLIST ************************************************************************************/
/***************************************************************************************************/
.ui-picklist .ui-widget-content {
  border: 1px solid #e8e8e8;
}
.ui-picklist .ui-picklist-list .ui-picklist-item.ui-state-hover, .ui-picklist .ui-picklist-list .ui-picklist-item.ui-state-highlight {
  background: none;
  background-color: #a88a4a;
  border: 1px solid black;
  -moz-box-shadow: 0 0 4px black;
  -webkit-box-shadow: 0 0 4px black;
  box-shadow: 0 0 4px black;
  color: white;
}

.clientDataTableLikePickList {
  border-radius: 5px;
  border-color: #e8e8e8;
  width: 100%;
}
.clientDataTableLikePickList .ui-datatable-footer {
  background: none;
}
.clientDataTableLikePickList .ui-widget-header {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/***************************************************************************************************/
/** UI-TOOLTIP *************************************************************************************/
/***************************************************************************************************/
.ui-tooltip .ui-tooltip-text {
  background-color: #ffda6d;
  color: black;
  border-radius: 0;
}

.ui-tooltip-bottom .ui-tooltip-arrow {
  left: 10px;
}

.panel-tooltipCancel {
  display: inline-block;
  margin-left: 5px;
}

.tooltipIconCancel {
  background-image: url("../img/info_cancel.png");
  width: 16px;
  height: 16px;
  display: inline-block;
}

.infoPanel {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  padding-top: 3px;
  padding-bottom: 3px;
  background: none;
  background-color: #ffda6d;
  border-radius: 0;
  border: 0;
  text-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  font-size: 13.2px;
  color: black;
  height: 21.25px;
  width: 27.25px;
  line-height: 20px;
  vertical-align: top;
  color: black;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  font-size: 16px !important;
  margin-left: 10px;
}
.infoPanel span {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  color: black;
}
@media screen and (max-width: 640px) {
  .infoPanel {
    margin-left: 0px;
  }
}
.infoPanel:hover {
  background: none;
  background-color: #636363;
  border-radius: 0;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: white;
  cursor: pointer;
  cursor: help;
}
.infoPanel:hover span {
  color: white;
}
.infoPanel:hover > .ui-icon {
  filter: none;
}

/***************************************************************************************************/
/** CALENDAR-CLIENT ********************************************************************************/
/***************************************************************************************************/
.filterClientPanel .calendar-client-panel {
  width: auto;
}
.filterClientPanel .calendar-client-panel .calendar-client-content {
  border: 1px solid black;
  padding: 10px;
  width: 110px;
}
.filterClientPanel .calendar-client-panel .calendar-client-content input {
  margin-left: 5px;
  width: 70px !important;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.filterClientPanel .calendar-client-panel .calendar-client-content input:hover, .filterClientPanel .calendar-client-panel .calendar-client-content input:focus {
  box-shadow: none;
}
.filterClientPanel #reportFilterPanel {
  width: auto;
}

/* TRIANGLE */
.triangle-right-color {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent black;
  display: inline-block;
}

@media screen and (max-width: 640px) {
  .filterClientPanel .calendar-client-panel {
    width: 50%;
    max-width: none;
  }
  .filterClientPanel .calendar-client-panel .calendar-client-content {
    width: initial;
  }
  .filterClientPanel #reportFilterPanel {
    margin-left: 0 !important;
    margin-top: 1em !important;
    width: 100%;
  }
  .filterClientPanel #reportFilterPanel #reportBtn {
    width: 100%;
    max-width: none;
  }
}
/***************************************************************************************************/
/** DATATABLE-CLIENT ********************************************************************************/
/***************************************************************************************************/
.ui-grid .ui-grid-row .active,
.ui-grid .ui-grid-row .inactive {
  border-style: double;
  border-width: 5px;
  border-radius: 8px;
  padding: 8px;
}
.ui-grid .ui-grid-row .active {
  border-color: #32CD32;
  /* LimeGreen */
}
.ui-grid .ui-grid-row .inactive {
  border-color: #FF0000;
  /* Red */
}

/***************************************************************************************************/
/** LOADER *****************************************************************************************/
/***************************************************************************************************/
.loader-text {
  margin-left: 10px;
}

/***************************************************************************************************/
/** PROGRESSBAR ***************************************************************************************/
/***************************************************************************************************/
.ui-progressbar .ui-widget-header {
  background: #cbbd85 -moz-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  background: #cbbd85;
  background: #cbbd85 linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  background: #cbbd85 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)));
}

/***************************************************************************************************/
/** PASSWORD *****************************************************************************************/
/***************************************************************************************************/
.ui-password-panel {
  text-shadow: none;
  background: none;
  background-color: #ffda6d;
  color: black;
  border-radius: 0;
  border: 0;
}

#page {
  position: relative;
  min-height: 100%;
  max-width: 1200px;
  margin: auto;
  background-color: white;
}
@media screen and (min-width: 1200px) {
  #page.admin_page {
    width: 90%;
    min-width: 1200px;
    max-width: none;
  }
}

/***************************************************************************************************/
/** HEADER *****************************************************************************************/
/***************************************************************************************************/
#headerPanel {
  background: #484848;
  background: radial-gradient(circle, #484848 0%, #282828 100%);
  padding: 0px 90px;
}
#headerPanel #headerTitle {
  margin: 80px 0 35px 0px;
}
#headerPanel #headerTitle .headerTitle_main {
  color: #e8e8e8;
  font-weight: bold;
  margin: 0 10px 0 0;
  font-size: 28px;
}
#headerPanel #headerTitle .headerTitle_sub {
  color: #ffda6d;
  margin: 0 10px 0 0;
  font-size: 20px;
}
#headerPanel #authenticationPanel {
  color: #e8e8e8;
  margin-bottom: 25px;
}
#headerPanel #authenticationPanel #logoutButtonPanel a#logoutButton {
  display: block;
  height: 20px;
  text-decoration: none;
  color: #ffda6d;
  padding: 5px 15px;
  border: 1px solid #ffda6d;
  margin-top: 2px;
  margin-left: 15px;
  background: linear-gradient(to right, #ffda6d, #ffda6d);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size 0.7s 0s, color 0.7s 0s;
}
#headerPanel #authenticationPanel #logoutButtonPanel a#logoutButton:hover {
  background-size: 100% 100%;
  color: black;
}
#headerPanel #authenticationPanel #localePanel {
  margin-left: 5px;
}
#headerPanel #authenticationPanel #localePanel a {
  float: left;
}
#headerPanel #authenticationPanel #localePanel a.flag {
  padding-left: 5px;
}
#headerPanel .headerLogoPanel .headerLogo,
#headerPanel .headerLogoPanel .headerLogoRight {
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: bottom;
}
#headerPanel .headerLogoPanel .headerLogo {
  background-image: url("../img/DVAG-Header-logo-gold-rand.png");
  image-rendering: -webkit-optimize-contrast;
  max-width: 198px;
  height: calc(100% - 15px);
  margin-left: -35px;
}
#headerPanel .headerLogoPanel .headerLogoRight {
  background-image: url("../img/DVAG_Mein_Goldportal_Familie_Header.png");
  image-rendering: -webkit-optimize-contrast;
  height: calc(100% + 51px);
  margin: -50px -90px 0px -90px;
}
#headerPanel #mobileMenuControlButton {
  cursor: pointer;
  width: 35px;
  margin: auto;
  padding: 10px;
}
#headerPanel #mobileMenuControlButton:hover .bar1, #headerPanel #mobileMenuControlButton:hover .bar2, #headerPanel #mobileMenuControlButton:hover .bar3 {
  background-color: #a88a4a;
}

#headerBottomPanel {
  background-color: #ffda6d;
  height: 10px;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #ffda6d;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
  opacity: 0;
}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

@media screen and (max-width: 1025px) {
  #headerPanel {
    padding: 0 10px;
  }
  #headerPanel .headerLogoPanel .headerLogo {
    margin-right: 20px;
  }
  #headerPanel .headerLogoPanel .headerLogoRight {
    margin: -50px -10px 0px -90px;
  }
}
@media screen and (max-width: 800px) {
  #headerPanel .headerLogoPanel .headerLogo {
    width: 164px;
    height: 103px;
    margin: 25px 0px 15px -70px;
  }
}
@media screen and (max-width: 640px) {
  #headerPanel #headerTitle {
    margin: 10px 0;
  }
  #headerPanel .headerLogoPanel {
    margin-left: auto;
    margin-right: auto;
  }
  #headerPanel .headerLogoPanel .headerLogo {
    margin: 25px 0 15px 0;
  }
  #headerPanel #authenticationPanel {
    padding-top: 25px;
  }
  #headerPanel #authenticationPanel #logoutButtonPanel,
#headerPanel #authenticationPanel .authenticated {
    display: none;
  }
}
@media screen and (min-width: 641px) {
  #headerPanel #mobileMenuControlPanel {
    display: none;
  }
}
/***************************************************************************************************/
/** MAIN MENU **************************************************************************************/
/***************************************************************************************************/
#mainMenuPanel {
  color: #636363;
  display: block;
}
#mainMenuPanel #mainMenu {
  background: 0;
  background-color: transparent;
  padding: 7.5px 77px;
  border-bottom: 1px solid #636363;
  border-radius: 0px;
  width: calc(100% - 154px);
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem {
  border: 0;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  display: inline;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link {
  border: 0;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  display: inline;
  background: none;
  text-shadow: none;
  box-shadow: none;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link .ui-menuitem-text {
  color: #636363;
  border: 0;
  margin: 0;
  float: none;
  width: auto;
  display: inline-block;
  font-size: 16px;
  padding: 7.5px 13px 7.5px 13px;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link .ui-menuitem-text:after {
  transition: all ease-in-out 0.3s;
  background: none repeat scroll 0 0 #ffda6d;
  content: "";
  display: block;
  height: 2px;
  width: 0;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link.ui-state-highlight .ui-menuitem-text {
  color: #636363;
  font-weight: bold;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link.ui-state-hover .ui-menuitem-text {
  color: #ffda6d;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link.ui-state-hover .ui-menuitem-text:after {
  width: 100%;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a.mainMenuItemForMobile {
  display: none;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a#mobileMenuItem_flag_de {
  background-image: url("../img/flag_de.png");
  background-repeat: no-repeat;
  background-position: 15px;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a#mobileMenuItem_flag_cs {
  background-image: url("../img/flag_cs.png");
  background-repeat: no-repeat;
  background-position: 15px;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a#logoutButtonMobile {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  padding-top: 3px;
  padding-bottom: 3px;
  background: none;
  background-color: #ffda6d;
  border-radius: 0;
  border: 0;
  text-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-weight: normal;
  font-size: 13.2px;
  color: black;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a#logoutButtonMobile span {
  -webkit-transition: background-color 200ms ease-out;
  -moz-transition: background-color 200ms ease-out;
  -o-transition: background-color 200ms ease-out;
  transition: background-color 200ms ease-out;
  -webkit-transition: color 200ms ease-out;
  -moz-transition: color 200ms ease-out;
  -o-transition: color 200ms ease-out;
  transition: color 200ms ease-out;
  color: black;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a#logoutButtonMobile:hover {
  background: none;
  background-color: #636363;
  border-radius: 0;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: white;
  cursor: pointer;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a#logoutButtonMobile:hover span {
  color: white;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a#logoutButtonMobile:hover > .ui-icon {
  filter: none;
}
#mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a#logoutButtonMobile .ui-menuitem-text:after {
  background-color: white;
}

/* NOTICE */
.notice-number {
  border-color: #ffda6d;
  background-color: #ffda6d;
  color: #636363;
  border-radius: 56px;
  font-size: 13.2px;
  display: inline-block;
  text-align: center;
  line-height: 10px;
  width: 10px;
  padding: 2px;
  position: relative;
  bottom: 1px;
  margin-left: 2px;
}

@media screen and (max-width: 1025px) {
  #mainMenuPanel #mainMenu {
    padding: 7.5px 0;
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  #mainMenuPanel {
    display: none;
  }
  #mainMenuPanel #mainMenu {
    padding-left: 10px;
    padding-right: 10px;
    width: calc(100% - 20px);
  }
  #mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem {
    text-align: center;
  }
  #mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link {
    display: block;
    border-top: 1px solid #fff;
    border-radius: 0;
  }
  #mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link .ui-menuitem-text {
    margin: 10px 10px 10px 10px;
  }
  #mainMenuPanel #mainMenu ul.ui-menu-list li.ui-menuitem .mainMenuItemForMobile {
    display: block;
  }
}
/***************************************************************************************************/
/** CAPTION ****************************************************************************************/
/***************************************************************************************************/
#captionPanel #captionTitlePanel {
  padding: 35px 0;
}
#captionPanel #captionTitlePanel #captionText {
  display: block;
  color: #636363;
  font-size: 16px;
  font-weight: bold;
  padding: 0 90px;
}
#captionPanel #captionTitlePanel #captionSubText,
#captionPanel #captionTitlePanel #captionTextAdditional {
  display: block;
  color: black;
  padding: 0 90px;
}

@media screen and (max-width: 1025px) {
  #captionPanel #captionTitlePanel #captionText,
#captionPanel #captionTitlePanel #captionSubText,
#captionPanel #captionTitlePanel #captionTextAdditional {
    padding: 0 10px;
  }
}
/***************************************************************************************************/
/** BODY (SUB MENU, CONTENT) ***********************************************************************/
/***************************************************************************************************/
#bodyPanel {
  padding: 0 90px 50px 90px;
}
#bodyPanel #subMenuPanel #subMenu {
  background-color: #e8e8e8;
  background-image: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0 0 10px 0;
  width: 100%;
}
#bodyPanel #subMenuPanel #subMenu ul.ui-menu-list {
  text-align: left;
}
#bodyPanel #subMenuPanel #subMenu ul.ui-menu-list li.ui-menuitem {
  border: 0;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  display: inline;
}
#bodyPanel #subMenuPanel #subMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link {
  border: 0;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  background: none;
  text-shadow: none;
  box-shadow: none;
  display: block;
  background-color: #e8e8e8;
  border-top: 1px solid white;
  border-radius: 0;
}
#bodyPanel #subMenuPanel #subMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link .ui-menuitem-text {
  border: 0;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  display: inline-block;
  font-size: 13.2px;
  font-weight: bold;
  padding: 0 3px;
  margin: 10px 10px 10px 10px;
  color: #636363;
}
#bodyPanel #subMenuPanel #subMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link.ui-state-highlight .ui-menuitem-text {
  color: #a88a4a;
  border-bottom: 4px solid #a88a4a;
}
#bodyPanel #subMenuPanel #subMenu ul.ui-menu-list li.ui-menuitem a.ui-menuitem-link.ui-state-hover .ui-menuitem-text {
  color: #a88a4a;
}
#bodyPanel #subMenuPanel .imagebox img {
  width: 100%;
  margin: 0 auto;
  display: block;
  padding-top: 10px;
}
#bodyPanel #contentPanel #contentBorderPanel {
  margin-left: 20px;
}
#bodyPanel #contentPanel #contentBorderPanel .legendPanel {
  background-color: #f6f6f6;
  padding: 5px 10px 10px 10px;
  border-bottom: 1px solid;
}
#bodyPanel #contentPanel #contentBorderPanel .legendPanel .textCenterTop {
  position: relative;
  top: -3px;
}
#bodyPanel #contentPanel #contentBorderPanel .filterPanel {
  background-color: #e8e8e8;
  margin-bottom: 20px;
  padding: 10px;
}
#bodyPanel #contentPanel #contentBorderPanel .filterPanel .ui-widget-content {
  background: none;
}

.subCaptionPanel {
  color: #a88a4a;
  font-weight: bold;
  background-color: #e8e8e8;
  border-top: 2px solid #a88a4a;
  padding: 10px;
  margin-bottom: 10px;
}

.subPanel {
  margin: 10px 0;
}

.buttonPanel {
  padding-top: 10px;
  margin-top: 10px;
}

.buttonRightPanel {
  padding: 10px 0;
  float: right;
}

.buttonLeftPanel {
  padding: 10px 0;
  float: left;
}

@media screen and (max-width: 1025px) {
  #bodyPanel {
    padding-left: 10px;
    padding-right: 10px;
  }
  #bodyPanel #contentPanel #contentBorderPanel {
    margin-left: 10px;
  }
  #bodyPanel #contentPanel #contentBorderPanel .filterPanel {
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 640px) {
  #bodyPanel #subMenuPanel #subMenu {
    padding: 0;
  }
  #bodyPanel #subMenuPanel #subMenu ul.ui-menu-list {
    text-align: center;
  }
  #bodyPanel #subMenuPanel .imagebox img {
    width: 100px;
    margin: 10px;
    padding: 0;
    display: inline;
  }
  #bodyPanel #contentPanel #contentBorderPanel {
    margin-top: 10px;
    margin-left: 0;
  }
  #bodyPanel #contentPanel #contentBorderPanel .listPanel .center,
#bodyPanel #contentPanel #contentBorderPanel .listPanel .right {
    text-align: left !important;
  }
  #bodyPanel #contentPanel #contentBorderPanel .listPanel .displayInTableToMobileMode.right {
    text-align: right !important;
  }
}
/***************************************************************************************************/
/** FOOTER *****************************************************************************************/
/***************************************************************************************************/
#footerBottomPanel {
  display: none;
  width: 100%;
}

#footerPanel {
  background-color: #e8e8e8;
}
#footerPanel #footerPartWrapper {
  padding: 0 90px;
}
#footerPanel #footerPartWrapper #footerPart {
  border-bottom: 2px solid #636363;
}
#footerPanel #footerPartWrapper #footerPart div,
#footerPanel #footerPartWrapper #footerPart #footerServicePart,
#footerPanel #footerPartWrapper #footerPart #footerInfoPart,
#footerPanel #footerPartWrapper #footerPart #footerServiceLogoPart {
  margin-top: auto;
  margin-bottom: auto;
}
#footerPanel #footerPartWrapper #footerPart #footerServicePart {
  padding: 20px 0;
}
#footerPanel #footerPartWrapper #footerPart #footerServicePart > div {
  display: inline-block;
  float: right;
}
#footerPanel #footerPartWrapper #footerPart #footerServicePart #serviceTitle {
  font-size: 20px;
}
#footerPanel #footerPartWrapper #footerPart #footerServiceLogoPart {
  padding: 30px 20px;
}
#footerPanel #footerPartWrapper #footerPart #footerServiceLogoPart #footerLogoInServicePart {
  max-width: 300px;
}
#footerPanel #footerPartWrapper #footerPart #footerInfoPart {
  padding: 20px 120px 20px 0;
}
#footerPanel #footerPartWrapper #footerPart #footerInfoPart #footerInfoLogoPart #footerLogoInInfoPart {
  max-width: 250px;
  margin: 10px 0;
}
#footerPanel #footerBar {
  padding: 10px 90px;
  justify-content: center;
}

@media screen and (min-width: 1026px) {
  #footerPanel #footerPartWrapper #footerPart #footerServiceLogoPart {
    text-align: center;
  }
}
@media screen and (max-width: 1025px) {
  #footerPanel {
    padding-top: 0;
  }
  #footerPanel #footerPartWrapper {
    padding: 0 10px;
  }
  #footerPanel #footerPartWrapper #footerPart #footerServicePart,
#footerPanel #footerPartWrapper #footerPart #footerInfoPart,
#footerPanel #footerPartWrapper #footerPart #footerServiceLogoPart {
    padding: 30px 0;
  }
  #footerPanel #footerPartWrapper #footerPart #footerServicePart > div {
    float: none;
  }
  #footerPanel #footerPartWrapper #footerPart #footerServiceLogoPart #footerLogoInServicePart {
    max-width: 250px;
  }
  #footerPanel #footerBar {
    padding: 10px 10px;
  }
}
@media screen and (max-width: 640px) {
  #footerPanel #footerPartWrapper #footerPart {
    text-align: center;
  }
  #footerPanel #footerPartWrapper #footerPart #footerServicePart,
#footerPanel #footerPartWrapper #footerPart #footerInfoPart,
#footerPanel #footerPartWrapper #footerPart #footerServiceLogoPart {
    padding: 40px 0;
  }
  #footerPanel #footerPartWrapper #footerPart #footerServiceLogoPart #footerLogoInServicePart {
    max-width: 300px;
  }
  #footerPanel #footerPartWrapper #footerPart #footerInfoPart #footerInfoLogoPart #footerLogoInInfoPart {
    max-width: 200px;
  }
}
/***************************************************************************************************/
/** CONTENT (CLIENT WELCOME) **************************************************************************/
/***************************************************************************************************/
#contentClientWelcome #statusPanel {
  padding-bottom: 20px;
}
#contentClientWelcome #statusPanel .statusEquation {
  height: 180px;
  line-height: 180px;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #moreAmountInfoPanel #moreAmountInfoLogo {
  width: 180px;
  height: 180px;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct {
  width: 200px;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorProductBgWrapper, #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorProductBgWrapper #statusIndicatorProductBg, #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorProductBgWrapper #statusIndicatorProductBgCover {
  width: 160px;
  height: 160px;
}
#contentClientWelcome #statusPanel .amount {
  font-size: 20px;
}
#contentClientWelcome #statusPanel .statusEquation {
  font-size: 36px;
  margin-bottom: 2px;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #moreAmountInfoPanel {
  margin: 0 auto;
  float: left;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #moreAmountInfoPanel #moreAmountInfoLogo {
  background-image: url("../img/client_indicator_scale_50_more_bg_triple.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: -webkit-optimize-contrast;
  margin: 0 auto;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #moreAmountInfoPanel #moreAmountInfoLabel {
  margin-top: 20px;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #moreAmountInfoPlus {
  margin: 0 0 47px 20px;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel {
  float: left;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct {
  margin: 0 auto;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorProductBgWrapper {
  margin: 20px 0 0 20px;
  position: relative;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorProductBgWrapper #statusIndicatorProductBgCover {
  background-color: rgba(255, 255, 180, 0.6);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  position: absolute;
  top: 0;
  left: 0;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorDynamicArrowPanel {
  position: relative;
  top: -20px;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorDynamicArrowPanel #middleArrowPanel {
  margin: 0 20px 0 20px;
  height: 19.5px;
  border-bottom: 1px solid #636363;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorDynamicArrowPanel #leftArrowPanel {
  float: left;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #636363;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorDynamicArrowPanel #rightArrowPanel {
  float: right;
  margin-top: -20.5px;
  border-width: 20px 20px 20px 0;
  border-color: transparent #636363 transparent transparent;
}
#contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct .amount {
  margin-top: -20px;
}
#contentClientWelcome #statusPanel #statusInfoPanel #statusInfoAmount {
  float: left;
}
#contentClientWelcome #statusPanel #statusInfoPanel #statusInfoEqual {
  margin: 0 20px 47px 0;
}
#contentClientWelcome #infoPaymentsText {
  padding: 50px 0 0.5em 0;
}
#contentClientWelcome #infoPaymentsTable {
  float: left;
}

@media screen and (max-width: 640px) {
  #contentClientWelcome #statusPanel .statusEquation {
    height: 100% !important;
    line-height: 36px !important;
  }
  #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #moreAmountInfoPlus {
    margin: 20px 0 0 0;
  }
  #contentClientWelcome #statusPanel #statusInfoPanel #statusInfoEqual {
    margin: 20px 0;
  }
  #contentClientWelcome #statusPanel #statusInfoPanel #statusInfoAmount {
    text-align: center;
  }
}
@media screen and (max-width: 390px) {
  #contentClientWelcome #statusPanel .statusEquation {
    height: 150px;
    line-height: 150px;
  }
  #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #moreAmountInfoPanel #moreAmountInfoLogo {
    width: 150px;
    height: 150px;
  }
  #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct {
    width: 170px;
  }
  #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorProductBgWrapper, #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorProductBgWrapper #statusIndicatorProductBg, #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorProductBgWrapper #statusIndicatorProductBgCover {
    width: 130px;
    height: 130px;
  }
}
@media screen and (max-width: 340px) {
  #contentClientWelcome #statusPanel .statusEquation {
    height: 100px;
    line-height: 100px;
  }
  #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #moreAmountInfoPanel #moreAmountInfoLogo {
    width: 100px;
    height: 100px;
  }
  #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct {
    width: 120px;
  }
  #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorProductBgWrapper, #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorProductBgWrapper #statusIndicatorProductBg, #contentClientWelcome #statusPanel #statusAmountIndicatorPanel #statusIndicatorProductDynamicPanel #statusIndicatorProduct #statusIndicatorProductBgWrapper #statusIndicatorProductBgCover {
    width: 80px;
    height: 80px;
  }
}
/***************************************************************************************************/
/** GOLD BALANCE STATISTICS ************************************************************************/
/***************************************************************************************************/
.saldoRow {
  border-bottom: 1px solid #636363 !important;
}
@media screen and (max-width: 640px) {
  .saldoRow {
    border-bottom: none !important;
  }
}

.saldoColumn {
  float: left;
  text-align: left;
  margin: 0 10px 10px 0;
}

.saldoColumnLabel {
  font-weight: bold;
}

.saldoColumnValue {
  margin-top: 10px;
}

/***************************************************************************************************/
/** COMMON *****************************************************************************************/
/***************************************************************************************************/
.common {
  padding-top: 10px;
}
.common.withNumber {
  padding-left: 25px;
}
.common .email-space {
  width: 300px;
}

.commonPanel .highlight {
  color: #800000;
}
.commonPanel h3 {
  font-weight: bold;
  font-size: 15px;
  margin-top: 25px;
}

.vopHeader, .vopHeaderTop {
  font-weight: bold;
}

.vopHeader {
  font-size: 15px;
  margin-top: 25px;
}
.vopHeader:first-child {
  margin-top: 0;
}
.vopHeader .numberBlock {
  width: 25px;
  display: inline-block;
}

.vopHeaderTop {
  font-size: 20px;
}

.vopVersionSmall {
  font-size: 10px;
  margin-top: 25px;
}

@media screen and (max-width: 640px) {
  .vopHeader .numberBlock,
.vopHeader .numberTextBlock {
    display: table-cell;
  }
  .vopHeader .numberTextBlock {
    width: calc(100% - 30px);
  }

  .common .email-space {
    width: 100%;
  }
}
/***************************************************************************************************/
/** CLIENT PERSONAL DATA WITH PASS *****************************************************************/
/***************************************************************************************************/
.halfContentSeparatorLeft-lg {
  border-right: 1px solid #636363;
  padding-right: 10px;
}

.halfContentSeparatorRight-lg {
  padding-left: 10px;
}

.personal_data_password_change_panel {
  margin-top: 174px;
}
.personal_data_password_change_panel input {
  width: calc(100% - 10px);
}

.detailRow_separatorLine {
  margin: 10px 0;
  border-top: 1px solid #636363;
}

@media screen and (max-width: 1025px) {
  .halfContentSeparatorLeft-lg {
    border: none;
    border-bottom: 1px solid #636363;
    padding-right: 0;
    padding-bottom: 10px;
  }

  .halfContentSeparatorRight-lg {
    padding-left: 0;
    padding-top: 10px;
  }

  .personal_data_password_change_panel {
    margin-top: 0;
  }
  .personal_data_password_change_panel input {
    width: 200px;
  }
}
@media screen and (max-width: 640px) {
  .detailRow_separatorLine {
    margin: 10px 0 2px 0;
  }
}

/*# sourceMappingURL=styles.css.map */