#header{z-index:9999;position:fixed;position:fixed;padding:0;left:0;-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;top:0;background:#f8f8f9}
body #header{padding:10px 0;background:#ddeefe}
body #header.fixed{box-shadow:-1px 1px 5px #00000040;background:#fff!important;top:0}
#topmenu li.deeper>a:after,.ukvext_det:after{line-height:1;-webkit-font-smoothing:antialiased;font-family:FontAwesome}
#topmenu,.f-right,.float-right,.pull-right{float:right}
.head_divinner{margin:0 30px}
#headerright{margin-left:150px;text-align:right}
#mainmenu{background:url(../images/menu_bg.png);width:100%;float:left;padding:0;z-index:999}
#bottominner,#footerinner,#innermenu{width:980px;margin:0 auto}
#logo{float:left;width:180px;padding:0}
#logo img,#mob_buydemo:hover>ul,#topmenu li.deeper:hover>ul.nav-child{display:block}
#topmenu ul{margin:10px 0 0}
#mob_buydemo ul>li,#topmenu li{float:left;margin-left:1px;text-align:left;background:0 0;position:relative}
#mob_buydemo ul>li>a,#topmenu ul li a{color:#333;display:block;line-height:21px;padding:5px 15px;font-size:16px;font-weight:400;margin:12px 10px;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;border:1px solid transparent}
#topmenu li.menu_trial.active a{background:#6d9f00}
#bottom h3,#topmenu ul li.menu_trial,#topmenu ul li.menu_trial:hover,body.landing_home #header{background:0 0}
#mob_buydemo ul,#topmenu ul li ul{width:100%;float:left;background:#fff}
#mob_buydemo ul>li,#topmenu ul li li{width:100%;margin:0}
#mob_buydemo ul>li>a,#topmenu ul li li a{margin:0;float:none;display:block;border:0;border-bottom:1px solid #ddd;padding:10px 30px}
#topmenu ul li li a.active,#topmenu ul li li a:hover{border:0;border-bottom:1px solid #ddd;background:#f5f5f5}
#topmenu ul li a.startfree{background-color:#30C56F;color:#fff;padding:5px 20px;border-radius:5px;font-weight:500;font-size:14px;margin-top:10px;margin-right:3px;box-shadow:0 8px 24px 0 #0F8AE71A}
div#mob_buydemo>a.login-btn{background-color:#fff !important;color:#188de8 !important;padding:7px 15px;border-radius:30px;border:2px solid #188de8;margin-top:10px;margin-right:3px;font-size:14px}
#topmenu ul li a.login-btn{background-color:#fed203;color:#000;padding:5px 20px;border-radius:5px;font-weight:500;font-size:14px;border:2px solid #fed203;margin-top:10px;margin-right:3px}
#topmenu li.deeper>a:after{content:"\f107";position:absolute;border:0;top:50%;margin:-7px 0 0 5px}
#mob_buydemo ul,#topmenu li.deeper>ul{display:none;position:absolute;min-width:170px;left:0;top:60px;-webkit-transition:.3s;-moz-transition:.3s;transition:.3s;box-shadow:0 2px 2px 0 #0000000d 0 3px 1px -2px #00000014 0 1px 5px 0 #00000014}
#headerleft{float:left}
.span10,.tooltip-inner{width:100%}
.pull-left,.royalSlider>*{float:left}
.divinner{max-width:1200px}
/* .features-hrms #header{position:fixed} */
div#mob_buydemo>a {
    background: #30C56F;
    color: #fff;
    padding: 7px 15px;
    font-weight: 500;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px /* </rhea> */;
}
div#mob_buydemo>a.login-btn {
    background-color: #fff;
    color: #188de8;
    padding: 7px 15px;
    border-radius: 30px;
    border: 2px solid #188de8;
    margin-top: 10px;
    margin-right: 3px;
    font-size: 14px;
}
#mob_buydemo {
    float: right;
    margin-top: 20px;
    position: relative;
}

   @media screen and (max-width:900px) {
        #logo img {
            max-height: 53px;
            max-width: 135px
        }
        #mob_buydemo ul>li>a,
        #topmenu ul li a {
            padding: 5px;
            margin: 12px 0
        }
        #topmenu ul {
            margin: -5px 0 0
        }
        #topmenu ul li a.startfree,
        #topmenu ul li a.login-btn {
            padding: 5px 10px;
            font-size: 13px
        }
        #headerright {
            margin-left: 100px;
            text-align: right
        }
    }

  @media screen and (max-width:768px) {
    #header{
            padding: 0
            
        }
     #logo {
            padding: 5px 0;
            width: auto
        }
        #logo img {
            max-height: 35px
        }
        #topmenu ul li a {
            margin: 5px 10px;
            padding: 3px 10px;
            font-size: 13px;
            font-weight: 500
        }
          #header {
            width: 100%
        }
  }
@media screen and (max-width:600px) {
        #topmenu ul li a:hover,
        #topmenu ul li li a.active,
        #topmenu ul li li a:hover {
            background: rgba(0, 0, 0, .15)
        }
        #logo {
            padding: 10px
        }
}
@media screen and (max-width:480px) { 
    #headerright {
            margin-left: 100px
        }
}
 @media screen and (max-width:768px) {
        #mob_buydemo ul>li>a,
        #topmenu ul li a {
            padding: 5px;
            margin: 12px 0
        }
    }
@media screen and (max-width:1024px) {
        #mob_buydemo ul>li>a,
        #topmenu ul li a {
            padding: 5px 10px;
            margin: 12px 0;
            font-size: 14px
        }
   
    }
@media screen and (min-width:600px) and (max-width:900px) { 
    .caselanding #mob_buydemo ul>li>a,
        .caselanding #topmenu ul li a {
            margin: 10px 0
        }
}
  @media screen and (min-width:340px) and (max-width:600px) {
       
        #topmenu ul {
            margin: 10px 0 0
        }
    }
  #topmenu li.deeper>ul {
        top: 50px;
        min-width: 245px;
    }
  @media screen and (max-width:768px) { 
   
        #topmenu li.deeper>ul.submenu {
            padding-left: 0px;
            background: rgb(255 255 255 / 73%);
            margin-top: 0;
        }
        #topmenu ul.submenu li {
            list-style: none;
        }
        #topmenu li.deeper>a:after {
            display: none
        }
        .mob-flex-wrap {
            flex-wrap: wrap;
        }
        .hide-in-desktop {
            display: block;
        }
        .hide-in-mob {
            display: none;
        }
        .show-in-mob {
            display: block;
        }
        .show-in-mob-flex {
            display: flex;
        }
         #topmenu li.deeper>ul {
            top: 0;
            min-width: none;
        }
  } 
  @media (max-width: 1024px) { 
        #headerleft {
        width: 100%;
        position: fixed;
        z-index: 9;
        left: 0;
        background: #f8f8f9;
    }
  }
  @media screen and (min-width: 320px) and (max-width: 400px) {
    #logo img {
        max-width: 110px;
    }
}

/* ============================================================
   MENU-RELATED CSS MOVED FROM template.css
   ============================================================ */

body.free_trial.devcommunity #logo img.whitelogo {
        max-width: 200px
    }


#header {
        z-index: 9999;
        position: fixed
    }


#header, #mainmenu {
        position: fixed
    }


#topmenu li.deeper>a:after {
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        font-family: FontAwesome
    }


#headerleft {
        float: left
    }


#topmenu {
        float: right
    }


 #mob_buydemo, .head_divider, .mobnav-subarrow, body.free_trial #headerright, body.free_trial #logo img.blacklogo, body.free_trial #mob_buydemo, body.free_trial #mobnav-btn, body.landing-hrms-content #header {
        display: none
    }


#header {
        padding: 0;
        left: 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        top: 0px;
        background: #f8f8f9
    }


body #header {
        padding: 10px 0;
        background: #ddeefe
    }


body.contactpage #header, body.landing_home #header {
        background: #fff
    }


body #header.fixed {
        box-shadow: -1px 1px 5px #00000040;
        background: #fff !important;
        top: 0;
    }


.head_divinner {
        margin: 0 30px
    }


#headerright {
        margin-left: 150px;
        text-align: right
    }


#mainmenu {
        background: url(../images/menu_bg.png);
        width: 100%;
        float: left;
        padding: 0;
        z-index: 999
    }


#innermenu {
        width: 980px;
        margin: 0 auto
    }


#logo {
        float: left;
        width: 180px
    }


#logo img, #mob_buydemo:hover>ul, #topmenu li.deeper:hover>ul.nav-child, body.free_trial #logo img.whitelogo {
        display: block
    }


#topmenu ul {
        margin: 0px 0 0
    }


#mob_buydemo ul>li,
    #topmenu li {
        float: left;
        margin-left: 1px;
        text-align: left;
        background: 0 0;
        position: relative
    }


#mob_buydemo ul>li>a,
    #topmenu ul li a {
        color: #333;
        display: block;
        line-height: 21px;
        padding: 5px 15px;
        font-size: 16px;
        font-weight: 400;
        margin: 12px 10px;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border: 1px solid transparent
    }


#topmenu li.menu_trial.active a {
        background: #6d9f00
    }


#topmenu ul li.menu_trial, #topmenu ul li.menu_trial:hover, body.landing_home #header {
        background: 0 0
    }


#mob_buydemo ul,
    #topmenu ul li ul {
        width: 100%;
        float: left;
        background: #fff
    }


#mob_buydemo ul>li,
    #topmenu ul li li {
        width: 100%;
        margin: 0
    }


#mob_buydemo ul>li>a,
    #topmenu ul li li a {
        margin: 0;
        float: none;
        display: block;
        border: 0;
        border-bottom: 1px solid #ddd;
        padding: 10px 30px
    }


#topmenu ul li li a.active,
    #topmenu ul li li a:hover {
        border: 0;
        border-bottom: 1px solid #ddd;
        background: #f5f5f5
    }


#topmenu ul li a.startfree {
        background-color: #30C56F;
        color: #fff;
        padding: 5px 20px;
        border-radius: 5px;
        font-weight: 500;
        font-size: 14px;
        /* border: 2px solid #188de8; */
        margin-top: 10px;
        margin-right: 3px;
        box-shadow: 0px 8px 24px 0px #0F8AE71A;
    }


div#mob_buydemo>a.login-btn {
            background-color: #fff;
            color: #188de8;
            padding: 7px 15px;
            border-radius: 30px;
            border: 2px solid #188de8;
            margin-top: 10px;
            margin-right: 3px;
            font-size: 14px;
        }


#topmenu ul li a.login-btn {
        background-color: #fed203;
        color: #000;
        padding: 5px 20px;
        border-radius: 5px;
        font-weight: 500;
        font-size: 14px;
        border: 2px solid #fed203;
        margin-top: 10px;
        margin-right: 3px
    }


#topmenu li.deeper>a:after {
        content: "\f107";
        position: absolute;
        border: 0;
        top: 50%;
        margin: -7px 0 0 5px
    }


#mob_buydemo ul,
    #topmenu li.deeper>ul {
        display: none;
        position: absolute;
        min-width: 170px;
        left: 0;
        top: 60px;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        transition: .3s;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05), 0 3px 1px -2px rgba(0, 0, 0, .08), 0 1px 5px 0 rgba(0, 0, 0, .08)
    }


#mob_buydemo ul {
        top: 30px;
        min-width: 120px;
        left: -45px
    }


body.free_trial #header.fixed {
        background: 0 0 !important
    }


body.free_trial.devcommunity #headerleft #logo {
        max-width: 560px;
        background: url(../images/pattern.png) rgba(255, 255, 255, .9);
        margin: 0 auto -10px
    }


#topmenu ul li a.startfree:hover {
        border: 2px solid #188de8;
        background: #fff;
        color: #188de8
    }


#topmenu .nav-child li a {
        padding: 10px
    }


body.free_trial #header {
        background: 0 0;
        text-align: center;
        position: relative
    }


body.free_trial #logo {
        float: none;
        text-align: center;
        width: 100%;
        padding: 20px 0
    }


body.free_trial #logo img {
        text-align: center;
        margin: 0 auto
    }


#mobnav-btn a {
        display: block
    }


#mobnav-btn {
        display: none;
        float: right;
        cursor: pointer
    }


#mobnav-btn a {
        padding: 15px;
        cursor: pointer;
        margin-top: 5px
    }


#mobnav-btn a:after {
        font-family: FontAwesome;
        content: "\f0c9"
    }


#mob_buydemo {
        float: right;
        margin-top: 20px;
        position: relative
    }


div#mob_buydemo>a {
        background: #30C56F;
        color: #fff;
        padding: 7px 15px;
        font-weight: 500;
        /* <rhea> changed radius */
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px
        /* </rhea> */
    }


body.free_trial #headerleft {
        float: none;
        text-align: center;
        max-width: 560px;
        margin: 0 auto -10px;
        background: url(../images/pattern.png) rgba(255, 255, 255, .9)
    }


@media screen and (max-width:1140px) {
.head_divinner {
            margin: 0 20px
        }
}


@media screen and (max-width:768px) {
#header {
            padding: 0
        }
#logo {
            padding: 10px 0;
            width: auto
        }
#logo img {
            max-height: 35px
        }
#topmenu ul li a {
            margin: 5px 10px;
            padding: 3px 10px;
            font-size: 13px;
            font-weight: 500
        }
#header {
            width: 100%
        }
}


@media screen and (max-width:600px) {
#topmenu ul li a:hover,
        #topmenu ul li li a.active,
        #topmenu ul li li a:hover {
            background: rgba(0, 0, 0, .15)
        }
#logo {
            padding: 10px 0;
        }
}


@media screen and (max-width:480px) {
.head_divinner {
            margin: 0 10px
        }
#headerright {
            margin-left: 100px
        }
}


@media screen and (max-width:900px) {
#logo img {
            max-height: 53px;
            max-width: 135px
        }
#mob_buydemo ul>li>a,
        #topmenu ul li a {
            padding: 5px;
            margin: 12px 0
        }
#topmenu ul {
            margin: -5px 0 0
        }
#topmenu ul li a.startfree,
        #topmenu ul li a.login-btn {
            padding: 5px 10px;
            font-size: 13px
        }
#headerright {
            margin-left: 100px;
            text-align: right
        }
}


@media screen and (max-width:1024px) {
#mob_buydemo ul>li>a,
        #topmenu ul li a {
            padding: 5px 10px;
            margin: 12px 0;
            font-size: 14px
        }
}


@media screen and (max-width:768px) {
#mob_buydemo ul>li>a,
        #topmenu ul li a {
            padding: 5px;
            margin: 12px 0
        }
}


body.caselanding #header {
        background: #ddeefe00
    }


.caselanding #mob_buydemo ul>li>a {
        margin: 12px 5px
    }


@media screen and (min-width:600px) and (max-width:900px) {
.caselanding #mob_buydemo ul>li>a,
        .caselanding #topmenu ul li a {
            margin: 10px 0
        }
.whitepaperlanding #topmenu ul li a {
            margin: 12px 0
        }
}


@media screen and (min-width:320px) and (max-width:400px) {
#logo img {
            max-width: 110px;
        }
#mobnav-btn a {
            padding: 15px 10px;
        }
}


@media screen and (max-width:600px) {
body.free_trial #header {
            background: url(../images/pattern.png) rgba(255, 255, 255, .9)
        }
body.free_trial #headerleft {
            margin: -5px auto
        }
}


@media screen and (min-width:340px) and (max-width:600px) {
#topmenu ul {
            margin: 10px 0 0
        }
}


#topmenu li.deeper>ul {
        top: 50px;
        min-width: 245px;
    }


.pricing-page #header {
        background-color: #fff;
    }


.free_trial #header {
        display: none;
    }


.landing_home #header {
        box-shadow: 0px 12px 28px 0px rgba(0, 0, 0, 0.1);
    }


@media screen and (max-width:768px) {
#topmenu li.deeper>ul.submenu {
            padding-left: 0px;
            background: rgb(255 255 255 / 73%);
            margin-top: 0;
        }
#topmenu ul.submenu li {
            list-style: none;
        }
#topmenu li.deeper>a:after {
            display: none
        }
.head_divinner {
            margin: 0 22px;
        }
#mobnav-btn a {
            margin-right: 5px;
        }
#logo {
            margin-left: 5px;
        }
#topmenu li.deeper>ul {
            top: 0;
            min-width: none;
        }
}


.quick-links-page #header {
        display: none !important;
    }


.subscribe-page #header {
        background-color: #fff;
    }


div#mob_buydemo>a.login-btn {padding: 5px 15px;}


@media screen and (max-width:767px) {
div#mob_buydemo>a.login-btn {margin-left:7px}
}


@media (max-width: 1024px) {
#topmenu .ukv-mega .ukv-mega-grid .ukv-mega-item .ukv-mega-card {display: flex; gap: 5px;}
#topmenu .ukv-menu-item.has-mega .ukv-mega-grid {display:none}
#topmenu .ukv-menu-item.has-mega.active .ukv-mega-grid {display:block}
#topmenu .ukv-menu-item.has-mega.active .ukv-mega-grid a {background:#fff;border-bottom:1px solid #ddd}
#topmenu .menu-note {display: none;}
#topmenu .ukv-mega-grid .ukv-mega-icon img {width: 20px; margin-right: 7px;}
#mob_buydemo,#mobnav-btn,#mobnav-btn a {display:block;color:#333}
#mobnav-btn{padding: 0;}
body #header,body.mainhome #header {padding:0}
#headerleft {width:100%;position:fixed;z-index:9;left:0;background: #ddeefe;} /*<rhea>*/
body.free_trial #headerleft {position:relative;background:0 0}
#topmenu {float:right;margin-top:50px;width:100%}
#mob_buydemo ul>li>a,#headerright #topmenu ul li a {padding:12px 15px;margin:0}
#headerright {width:210px;margin:0 -240px 0 0;position:fixed;right:0;background:#dcedfd;height:100%;z-index:8;overflow-y:auto;-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out;box-shadow:0 0 15px #333}
#topmenu ul>li a {line-height:25px;font-size:14px;margin:5px 15px;font-weight:500}
#topmenu ul li {float:none;width:100%;margin:0;list-style:square;color:#fff;border-bottom:1px solid #888}
#topmenu ul li a,#topmenu ul li a.active {margin:0;padding:10px;float:none;border:0}
#topmenu ul li a:hover {-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s;transition:.3s}
#topmenu ul li li a {padding:0 10px;border:0}
#topmenu li.deeper>ul {display:block;position:relative;top:0;box-shadow:none;float:none;padding-left:30px;padding-right:10px;background:#0000004d}
#mob_buydemo>ul.nav-child, #topmenu li.item-183, #topmenu li.item-373, #topmenu ul li a.startfree, #topmenu ul li a.login-btn {display:none}
#topmenu li.deeper>a:after {top:0;margin:14px 0 0 7px}
}

@media (min-width: 1025px) {
#headerleft {float: none;flex: 0 0 auto;}
#headerright {float: none;margin-left: 0;flex: 1;display: flex;justify-content: flex-end;align-items: center;}
#header .divinner{max-width:100%; margin:0 auto; display:flex; gap:30px;}
}
/* <rhea> fix header overflow at 1025-1200px */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    #topmenu {
        overflow: hidden;
    }
}