:root {
    --main-Color: black;
    --main-MouseoverColor: #fd9c02;
    --main-Background: white;
}
.NavigateIcon {
    background-color: #499898;
    color: black;
    width: 0px;
    height: 0px !important;
    overflow: hidden;
}
.loginformtextbutton:hover, a.button:hover {
    color: #fff !important;
    background-color: var(--main-MouseoverColor) !important;
    border: 1px solid var(--main-Color);
    border-top-color: var(--main-Color);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: var(--main-Color);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: var(--main-Color);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: var(--main-Color);
    border-left-style: solid;
    border-left-width: 1px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
}

.loginformtextbutton, a.button {
    width: 37%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    background-color: var(--main-Background);
    color: black;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid var(--main-Color);
}
.UserNameSmall {
    font-size: 14px;
    color: var(--main-Color);
    font-family: verdana !important;
    margin-top: 5px;
    font-weight: bolder;
}

.countUpMe {
    color: var(--main-Color);
    padding-top: 7px;
    font-size: medium;
}

.menu_section span {
    color: var(--main-Color) !important;
}

.menu_section li:hover {
    background-color: var(--main-MouseoverColor);
    color: white;
}

    .menu_section li:hover span {
        background-color: var(--main-MouseoverColor);
        color: white !important;
    }
.menu_icon i {
    color: var(--main-Color) !important;
}

.menu_section li:hover i {
    color: white !important;
}
.guardFontStyle {
    font-size: 12px;
    color: var(--main-Color) !important
}

.guardSubFontStyle {
    color: var(--main-Color) !important
}
.material-icons {
    color: var(--main-Color);
    margin-top: -3px;
}
.CalenderCaption {
    color: var(--main-Color) !important;
    font-size: 12px !important
}
.uk-tab > li.uk-active > a {
    background: var(--main-MouseoverColor) !important;
    color: white !important;
}
.TopIconLogo {
    width: 40px;
    height: 40px;
    border-radius: 24px;
    float: left;
}
.NewHeadInfor {
    width: 100%;
    text-align: right;
    color: var(--main-Color) !important;
    padding-right: 10px;
    padding-top: 5px;
    font-family: "verdana" !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    height: 32px;
}

.subnewsh1 {
    font-size: 16px;
    width: 100%;
    background-color: var(--main-MouseoverColor);
    color: white;
    text-align: center;
    margin-top: 0px;
}
.ProfileCaptionHeading {
    color: var(--main-Color) !important;
    font-weight:600;
}
.IconClass {
    font-size: 21px;
    color: var(--main-Color) !important;
}
.uk-icon-ellipsis-v {
    color: var(--main-Color) !important;
    padding-top: 22px;
}
.notification {
    background: TRANSPARENT;
    color: var(--main-Color) !important;
    text-decoration: none;
    FONT-SIZE: 24PX;
    padding: 0px 14px;
    MARGIN-TOP: 10PX;
    MARGIN-RIGHT: 16PX;
    position: relative;
    float: left;
    display: inline-block;
    border-radius: 2px;
}
    .notification:hover {
        color: var(--main-MouseoverColor) !important;
    }

    .notification .badge {
        position: absolute;
        top: -10px;
        right: -10px;
        padding: 5px 10px;
        border-radius: 50%;
        background: var(--main-MouseoverColor);
        font-size: 8px;
        color: white;
    }
.loginpanhead {
    border-style: groove;
    width: 22%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 120px;
    padding-top: 10px;
    padding-bottom: 20px;
    height: auto;
    border-radius: 10px;
    background-color:white;
}
.uk-dropdown > ul > li > a:hover {
    color: var(--main-MouseoverColor) !important;
}
.PayslipCaption {
    background-color: white !important;
    color: var(--main-MouseoverColor);
    font-size: 13.5px;
    height: 37px !important;
    font-weight: 100 !important;
    font-family: verdana !important;
}
.Tablebutton {
    background-color: var(--main-MouseoverColor);
}
.buttonbottom {
    background-color:var(--main-MouseoverColor);
    color: #ffffff;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #861746;
}

    .buttonbottom:hover {
        color: var(--main-MouseoverColor);
        background-color: #fff;
        border-color: var(--main-MouseoverColor);
        border-style:groove;
    }

.topguardImage {
    height: 65px !important;
    background-color: var(--main-MouseoverColor);
}
.profilecol4 {
 width:50%;
}
.StatusForm {
    margin-left:20px;
    width:80% !important;

}
.panel-heading {
    font-size:12px;
    font-family:Tahoma;
}
.DocumentHeadingWithBg {
    background-color: var(--main-MouseoverColor);
    color: var(--main-Background);
    width: 100%;
    padding-bottom: 5px;
    padding-left: 15px;
    font-weight: 900;
    font-size:12px;
    padding-top:5px;
}
.TopBarIcons {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
}
.AttachTab {
  width:530px;
  padding-left:10px;
  padding-right:10px;
}
.GuardSubIcon {
    width: 35px !important;
    float: left;
    padding-top: 11px;
    padding: 3px 3px 3px 3px;
    margin-right: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    text-align: center;
    margin-left: 20px;
    font-size: 12px !important;
    color: var(--main-Background ) !important;
    background-color: var(--main-MouseoverColor) !important;
}
    .GuardSubIcon:hover {
        background-color: var(--main-Background ) !important;
        color: var(--main-MouseoverColor) !important;
    }
.ListViewListth {
    background-color: var(--main-MouseoverColor);
    color: var(--main-Background);
}
.NavigateIcon {
    background-color:aqua;
}
.panel.panel-custom.styletag:hover * {
    color: var(--main-MouseoverColor) !important;
}

ul.inbox-nav.inbox-divider li a:hover {
    color: var(--main-MouseoverColor) !important;
    width: 100%;
    text-align: center;
}

.HtmlDateClass {
    min-width: 99.5% !important;
    max-width: 99.5% !important;
    height: 27px;
    margin-left: 3px;
    background-color: white !important;
    border-width: 1px !important;
}

.HtmlSELECTClass {
    min-width: 99.5% !important;
    max-width: 99.5% !important;
    height: 27px;
    margin-left: 3px;
    background-color: white !important;
    border-width: 1px !important;
}

.RightOptionToolbarClass ul {
    list-style: none;
}

.dxeTextBox_DevEx, .dxeButtonEdit_DevEx, .dxeIRadioButton_DevEx, .dxeRadioButtonList_DevEx, .dxeCheckBoxList_DevEx, .dxeMemo_DevEx {
    color: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    border-width: 0px !important;
    border-style: none !important;
    height: auto !important;
    width: 100% !important;
    border-width: 0px !important;
}

input[type="text"].dxeEditArea_DevEx, input[type="password"].dxeEditArea_DevEx {
    color: #000000 !important;
    background-color: #FFFFFF !important;
    width: 99.5% !important;
    height: 15px !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    padding: 5px 10px !important;
}

.dxeMemoSys textarea {
    color: #000000 !important;
    background-color: #FFFFFF !important;
    width: 100% !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    padding: 0px 0px !important;
    margin-left: 3px;
}

.dxeEditArea_DevEx dxeEditAreaSys {
    margin-left: 0 !important;
}

input:read-only.dxeEditArea_DevEx, input[type="password"].dxeEditArea_DevEx {
    color: #a91d59 !important;
    font-weight: 550;
    border-style: none;
    width: 96% !important;
}

.dxeButtonEditSys td.dxic, .dxeTextBoxSys td.dxic {
    overflow: inherit !important;
}

.dxeButtonEditSys .dxeButton, .dxeButtonEditSys .dxeButtonLeft {
    background-color: transparent !important;
}

.dxeTextBox_DevEx {
    font-family: 'Open Sans', sans-serif;
}

.dxeTextBoxSys, .dxeMemoSys {
    border-collapse: inherit !important;
}

.control-label {
    font-size: 11px !important;
}

.dxeTokenText_DevEx {
    color: black;
}

.dxeTokenBoxInput_DevEx {
    height: auto !important;
}

body {
    font-size: 12px !important;
}

.HtmlDateClass {
    margin-bottom: 3px;
    border-width: 1px !important;
    margin-top: 3px;
}

.dxeTextBoxSys dxeTextBox_DevEx form-control input-sm dxeTextBoxDefaultWidthSys {
    margin-left: -10px;
}

.form-control {
    margin-left: -10px;
    width: 101% !important;
}
@media only screen and (max-device-width : 640px) {
    .profilecol4 {
        width: 100% !important;
    }
    .loginpanhead {
      width:98% !important;
    }
    .TopIconLogo {
        width: 0px !important;
        height: 0px !important;
        border-radius: 0px !important;
        float: left;
    }
    #page_content_inner {
        padding-left:2px !important;
        padding-right:2px !important;
    }
    .stepwizard-step {
      margin-left:auto;
      margin-right:auto;
      width:100%;
      text-align:center;
    }
    .StatusForm {
        margin-left: auto;
        margin-right:auto;
        width:100% !important;
    }
    .NavigateIcon {
        width: 32px;
        height: 0px !important;
        overflow: visible;
    }
}