/* ------------------------------------------------------------------------------------- */
/* -- Move these classes into DevExpress Webland Theme as soon as they seem finalized -- */
/* ------------------------------------------------------------------------------------- */

/* TODO: Define naming style of classes, or is this fine? 
   CSS Class prefix = wl (for Webland) 
*/

/* Help Icon at top */

.wlHelpIconOuterDiv {
    position: relative;
    width: 100%;
}

.wlHelpIconInnerDiv {
    position: absolute;
    z-index: 1;
    top: 45px;
    right: 0px;
}

.wlHelpIconInnerDivVariant {
    position: absolute;
    z-index: 1;
    top: -4px;
    right: 0px;
}

/* DevExpress Popup Dialog Title Background Theme Fix */

.dxpc-header {
    background-color: #00ABE5 !important;
}


/* Overview Table at top of Page (e.g. CloudOffice Number of Accounts, DistributionLists, ...) */

.wlOverviewTable td {
    height: 35px;
    border: 1px solid #dfdfdf;
}

.wlOverviewTableFirstColumn {
    padding-left: 12px;
}

.wlOverviewFont {
    font-family: "Open Sans";
}

.wlOverviewTitleTopRow {
    color: black;
    font-size: 14px;
    font-weight: bold;
}

.wlOverviewTitleRow {
    font-size: 14px;
    font-weight: normal;
}

/* Menu Left Domain Info / E-Mail PW Styles */

.wlMenuLeftFontSettingsFirstColumn {
    text-align: left;
    padding-left: 10px;
    font-size: 16px;
    font-family: 'Open Sans';
}

.wlMenuLeftCaption {
    color: #666666;
    background-color: #EFEFEF;
    font-size: 15px;
    font-weight: bold;
}

.wlMenuLeftDescription {
    color: #666666;
    background-color: white;
    font-size: 14px;
    font-weight: bold;
}

.wlMenuLeftContent {
    color: #666666;
    background-color: white;
    font-size: 14px;
    font-weight: normal;
}

.wlEMailSpanButtonOK {
    float: left;
    text-align: center;
    width: 70px;
    height: 24px;
    font-size: 13px;
    padding-top:5px;
    background-color: #00ABE5;
    font-weight: bold;
    color: white;
    border: 1px solid #00ABE5;
    cursor: pointer;
}

.wlEMailSpanButtonCancel {
    float: right;
    text-align: center;
    width: 100px;
    height: 24px;
    font-size: 13px;
    padding-top: 5px;
    background-color: #00ABE5;
    font-weight: bold;
    color: white;
    border: 1px solid #00ABE5;
    cursor: pointer;
}

input[type=password].wlEMailBoxPassword {
    width: 78%;
    height: 28px;
    padding-left: 10px;
    color: #484848;
    border: 1px solid #DCDCDC;
    padding-right: 32px;
}

input[type=text].wlEMailBoxPassword {
    width: 78%;
    height: 28px;
    padding-left: 10px;
    color: #484848;
    border: 1px solid #DCDCDC;
    padding-right: 32px;
}

/*    input[type=password].wlEMailBoxPassword:focus {
        border: 1px solid red !important;
    }

    input[type=password].wlEMailBoxPassword:hover {
        border: 1px solid red !important;
    }
*/
input[type=password].wlEMailBoxPassword::placeholder {
    color: #bdbdbd;
}

/* Simple styling classes */
.wlEmptyTdSpacer {
    width: 24px;
}

.wlFontBold {
    font-weight: bold !important;
}

.wlFontBlack {
    color: black;
}

.wlFontLightGray {
    color: #666666;
}

.wlWhiteBackground {
    background-color: white;
}

.wlGreyGridViewHeader {
    background-color: #eeeeee;
}

.wlCenterDiv {
    text-align: center;
}

.wlWeblandBlue {
    color: #00ABE5;
}

a.wlWeblandBlue:link {
    color: #00ABE5;
}

a.wlWeblandBlue:visited {
    color: #00ABE5;
}

a.wlWeblandBlue:hover {
    color: #666666;
}

a.wlWeblandBlue:active {
    color: #00ABE5;
}

.wlMarginAuto {
    margin: auto;
}

.wlBorderNone {
    border: none;
}

.wlTextAlignCenter {
    text-align: center;
}

.wlWidth600 {
    width: 600px;
}

.wlNoBorderLeft {
    border-left-width: 0px !important;
}

.wlNoBorderRight {
    border-right-width: 0px !important;
}

.wlNoBorderTop {
    border-top-width: 0px !important;
}

.wlNoBorderBottom {
    border-bottom-width: 0px !important;
}

/* Required to remove padding on right side in nested dX:LayoutGroups/dx:LayoutItems */

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

/* Eye Symbol in Password Field */
/* Overload top and left in page specific CSS in order to place password eye symbol correctly as it depends on input field width */
/* Only used on SSH Page, don't use, this has been proven to be inadequate */

.wlPasswordShowHide {
    position: relative
}

    .wlPasswordShowHide .wlPasswordText {
        position: absolute;
        top: 0%;
        left: 0px;
        z-index: 1;
        cursor: pointer;
    }

/* Eye Symbol in Password Field, newer more flexible implementation */
/* Overload top and left in page specific CSS in order to place password eye symbol correctly as it depends on input field width */

.wlPasswordIconBase {
    position: absolute;
    z-index: 1;
    cursor: pointer;
    top: 0px;
    left: 0px;
}

/* Font Sizes */

.wlGridviewHeader {
    font-size: 14px;
    font-weight: bold;
}

.wlPageHeader {
    font-size: 16px;
}

.wlSmallDescription {
    font-size: 11px;
    font-weight: normal;
}

.wlSmallDescriptionPadding3 {
    font-size: 11px;
    font-weight: normal;
    padding-left: 3px;
}


.wlSmallErrorText {
    font-size: 11px;
    font-weight: bold;
    color: red;
}

/* Webland Custom CSS Code already incorporated in Theme File */

/*.dxeExampleText_wlcustom {
    color: #969696;
    cursor: default;
    font-size: 12px;
}
*/