:root {
    --main-Color: black;
    --main-MouseoverColor: #050091;
    --main-Background: white;
    --main-Lettercolor: #050091;
}
.profilecol4 p, .ProfileTable p, .ProfileTab {
    color: var(--main-Lettercolor);
}
.uk-tab > li > a {
    text-shadow: none !important;
    color: var(--main-Lettercolor);
}
.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-Lettercolor);
    font-family: verdana !important;
    margin-top: 5px;
    font-weight: bolder;
}

.countUpMe {
    color: var(--main-Lettercolor ) !important;
    padding-top: 7px;
    float: left;
    font-size: medium;
}
ul.inbox-nav.inbox-divider li {
    height: 68px !important;
    width: 123px !important;
}
.menu_section span {
    color: var(--main-Lettercolor) !important;
}

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

    .menu_section li:hover span {
        background-color: var(--main-MouseoverColor);
        color: var(--main-Background) !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-Lettercolor) !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-Lettercolor) !important;
    font-weight: 600;
}
.ProfileDetails {
    color: var(--main-Color) !important;
}
.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-Lettercolor) !important;
        background-color: var(--main-Background) !important
    }

    .notification .badge {
        position: absolute;
        top: -10px;
        right: -10px;
        padding: 5px 10px;
        border-radius: 50%;
        background: var(--main-MouseoverColor);
        font-size: 8px;
        color: var(--main-Background);
    }
.loginpanhead {
    border-style:solid;
    border-width:0.2px;
    border-color:var(--main-MouseoverColor);
    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-Background) !important;
}
.PayslipCaption {
    background-color: white !important;
    color: var(--main-Lettercolor);
    font-size: 13.5px;
    height: 37px !important;
    font-weight: 100 !important;
    font-family: verdana !important;
}
.Tablebutton {
    background-color: var(--main-MouseoverColor);
}

.buttonGridFill {
    background-color: var(--main-MouseoverColor);
    color: #ffffff;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #861746;
    float: right;
    margin-top:5px;
}

    .buttonGridFill:hover {
        color: var(--main-Lettercolor);
        background-color: #fff;
        border-color: var(--main-MouseoverColor);
        border-style: groove;
    }
.buttonbottom {
    background-color: var(--main-MouseoverColor);
    color: var(--main-Background) !important;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #861746;
}

    .buttonbottom:hover {
        color: var(--main-Lettercolor);
        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;
}
.sidebar_logo a:hover {
    background-color: white !important;
}
.Guardrow {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    height: 33px;
    background-color: var(--main-Background) !important;
    color: var(--main-MouseoverColor) !important;
}

.Guardrow>td:hover {
        border: 1px solid rgba(0, 0, 0, 0.12);
        cursor: pointer;
        background-color: var(--main-MouseoverColor) !important;
        color: var(--main-Background) !important;
    }

    .Guardrow td {
        padding-left: 10px;
    }
.DocumentHeadingWithBg {
    background-color: var(--main-MouseoverColor) !important;
    color: var(--main-Background) !important;
    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;
}
.GuardSubIconMain {
    background-color: var(--main-MouseoverColor) !important;
    margin-bottom:10px;
    border-radius:3px;
}
.GuardSubIcon {
    width: 25% !important;
    float: left;
    padding: 1px 1px 1px 1px;
    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, ListViewListth tr th td tr {
    background-color: var(--main-Background);
}

.NavigateIcon {
    background-color:aqua;
}
.panel.panel-custom.styletag:hover * {
    color: var(--main-Lettercolor) !important;
}

ul.inbox-nav.inbox-divider li a:hover {
    color: var(--main-Lettercolor) !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: 1px solid rgba(0,0,0,0.2) !important;
}

.HtmlSELECTClass {
    min-width: 99.5% !important;
    max-width: 99.5% !important;
    height: 27px;
    margin-left: 3px;
    margin-top: 3px;
    background-color: white !important;
    border-width: 1px !important;
    border: 0.1px solid #c8c9ce;
    padding-left: 5px;
}

.RightOptionToolbarClass ul {
    list-style: none;
}

.dxeTextBox_DevEx, .dxeButtonEdit_DevEx, .dxeIRadioButton_DevEx, .dxeRadioButtonList_DevEx, .dxeCheckBoxList_DevEx, .dxeMemo_DevEx, dxeEditArea_DevEx dxeEditAreaSys {
    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: 98.5% !important;
    border: 1px solid rgba(0,0,0,0.2) !important;
    padding: 0px 0px !important;
    margin-left: 13px;
    padding-left:5px !important;
}

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

input:read-only.dxeEditArea_DevEx, input[type="password"].dxeEditArea_DevEx {
    color: var(--main-MouseoverColor) !important;
    font-weight: 500;
    border-style: none;
}

.dxeButtonEditSys td.dxic, .dxeTextBoxSys td.dxic {
    overflow: inherit !important;
}
.dxeButtonEditSys {
  width:100%  !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;
}
.panel.panel-custom.styletag {
     width: 100% !important;
     height: 100% !important;
    
}


.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    background-color: var(--main-MouseoverColor);
    color: var(--main-Background) !important;
}
a {
    color: var(--main-Lettercolor) !important;
}
.mailicon {
    color: var(--main-Background ) !important;
    background-color: var(--main-MouseoverColor) !important;
}
.uk-tab > li > a:hover,
.uk-tab > li > a:focus,
a .focus, a:hover, a:focus {
    color: var(--main-Background ) !important;
    background-color: var(--main-MouseoverColor ) !important;
    border-bottom-color: var(--main-MouseoverColor ) !important;
}
.Policy tr, td, th {
    color: var(--main-Lettercolor ) !important;
}
.CandidateHead {
    background-color: var(--main-MouseoverColor ) !important;
    color: var(--main-Background ) !important;
    padding-top: 5px;
    padding-bottom: 5px;
    
}

.InterviewEmployeeDiv {
    color: var(--main-MouseoverColor ) !important;
    background-color: var(--main-Background ) !important;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.InterviewEmployeeDiv table,tr,td{
    background-color:transparent !important;
}
    .InterviewEmployeeDiv:hover, .InterviewEmployeeDiv:hover font {
        color: var(--main-Background ) !important;
        background-color: var(--main-MouseoverColor ) !important;
    }
.ListRefreshSelect {
    float: left;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}
/*      Punch in Punch out Form    Style*/
#Punchinout {
    padding: 10px 80px 80px 80px;
    padding-bottom: 130PX !important;

}
#Punchinout button {
        margin-top: 10px;
        width: 100%;
        padding: 5px 5px 5px 5px;
        font-weight: 700;
}
#ShowTime {
    background-color: black;
    color: white;
    padding: 5px 5px 5px 5px;
    width:480px;
    height:60px;
    font-size:26px;
    margin-left:80px;
    font-weight:900;
    margin-top: 30px;
    text-align:center;
}
#MapDisplay {
   font-size:18px;
   font-weight:500;
   text-align:center;
}
@media only screen and (max-device-width : 640px) {
    .profilecol4 {
        width: 100% !important;
    }
    #Punchinout button {
      width:98%;
      margin-bottom:30px;
    }
    #Punchinout {
        padding:0px 0px 0px 0px;
    }
    #canvas {
        margin-left: 11%;
    }
    #ShowTime {
        width: 100%;
        margin-left: 0px;
    }
    .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;
    }
    .Seconpan {
        width: 100% !important;
    }

    .Seconpans {
        width: 100% !important;
    }

    #DutyRoasterDiv {
        width: 100% !important;
    }

    .option1subrow {
        width: 100% !important;
        float: left;
    }

    #pcProcedure_PW-1 {
        width: 80% !important;
        left: 10% !important;
        top: 10% !important;
    }
}

.option1subrow {
    width: 50%;
    float: left;
}

.option1row {
    width: 80% !important;
    margin-left: 10%;
    float: left;
}

#pcProcedure_PW-1 {
    width: 500px !important;
}

#gdvProcedures {
    width: 100% !important;
}
dxeMemoEditArea_DevEx dxeMemoEditAreaSys {
  width:90px !important;

}

.TopBoxMsg {
    color: #978662;
    font-size: 20px;
    margin-top: 10px;
    margin-right: 5px;
    background-color: white
}

    .TopBoxMsg:hover {
        color: white;
        font-size: 20px;
        margin-top: 10px;
        background-color: #978662;
        padding-top: 5px;
        padding: 5px
    }