@charset "UTF-8";

/* ----------------------------
	-Copyright 2013, Ideaware.com All rights reserved.
	-Authors:  Ideaware - Maria Helena Barros Burchardt
*/


/* React Smart Menu
============================================================ */
.reactSmartMenu {
    position: relative;
    height: calc(100vh - 45px);
}

@media screen and (max-width: 766px) {
    .reactSmartMenu {
        height: 70px !important;
        width: 100vw;
    }
}

/* General Classes
============================================================ */
a, a:visited {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}

    a:hover {
        -webkit-transition: color linear 0.3s, background linear 0.2s;
        -moz-transition: color linear 0.3s, background linear 0.2s;
        -o-transition: color linear 0.3s, background linear 0.2s;
        -ms-transition: color linear 0.3s, background linear 0.2s;
        transition: color linear 0.3s, background linear 0.2s;
    }

.right {
    float: right !important;
}

.relative {
    position: relative;
}

    .relative:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

.clearfix {
    clear: both;
    display: block;
}

.t3 {
    top: 3px !important;
}

.jstextDecoration {
    color: White;
    cursor: default;
}

/* Fontface
============================================================ */

@font-face {
    font-family: 'bebas_neueregular';
    src: url('https://static.peoplehr.net/202506198-hotfix000000/Fonts/bebasneue-webfont-webfont.eot');
    src: url('https://static.peoplehr.net/202506198-hotfix000000/Fonts/bebasneue-webfont-webfont.eot?#iefix') format('embedded-opentype'), url('https://static.peoplehr.net/202506198-hotfix000000/Fonts/bebasneue-webfont-webfont.woff') format('woff'), url('https://static.peoplehr.net/202506198-hotfix000000/Fonts/bebasneue-webfont-webfont.ttf') format('truetype'), url('https://static.peoplehr.net/202506198-hotfix000000/Fonts/bebasneue-webfont-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'signatureregular';
    src: url('https://static.peoplehr.net/202506198-hotfix000000/Fonts/signature_regular-webfont.eot');
    src: url('https://static.peoplehr.net/202506198-hotfix000000/Fonts/signature_regular-webfont.eot?#iefix') format('embedded-opentype'), url('https://static.peoplehr.net/202506198-hotfix000000/Fonts/signature_regular-webfont.woff2') format('woff2'), url('https://static.peoplehr.net/202506198-hotfix000000/Fonts/signature_regular-webfont.woff') format('woff'), url('https://static.peoplehr.net/202506198-hotfix000000/Fonts/signature_regular-webfont.ttf') format('truetype'), url('https://static.peoplehr.net/202506198-hotfix000000/Fonts/signature_regular-webfont.svg#signatureregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Body
============================================================ */
body {
    background: #F7F8FA;
    color: #666666;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin: 0;
    position: relative;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.main-wrapper {
    height: 100vh;
    width: 100vw;
}

body.bglightgray {
    background-color: #F5F5F5;
}

/* Wrapper
============================================================ */
.single-page-container {
    height: 100vh;
    overflow-y: scroll;
}

.wrapper {
    width: 960px;
}

    .wrapper.center {
        margin: 0 auto;
    }

.wrapper580 {
    position: relative;
    width: 580px;
    padding: 40px 0;
    left: 50%;
    margin-left: -290px;
}

    .wrapper580:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

.wrapper480 {
    width: 480px;
}

.minhei700 {
    min-height: 700px;
}

.backgroundgray {
    background-color: #F5F5F5;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

/* new global order */
.page-container {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav article .";
    height: 100vh;
    grid-template-rows: auto 1fr;
    grid-template-columns: 260px 1fr;
    transition: grid-template-columns 100ms;
    width: 100%;
    overflow-y: clip;
}

.top-nav-section {
    grid-area: header;
    box-shadow: 1px 1px 15px #0000002b;
    z-index: 999999;
}

.left-nav, .loaded-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.left-nav {
    grid-area: nav;
    overflow: hidden;
    background-color: #333842;
    z-index: 99999;
}
    .left-nav nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 4px;
        overflow-y: auto;
        height: 100%;
        box-sizing: border-box;
    }

        .left-nav nav a {
            display: flex;
            color: #F6F6F6;
            font-size: 14px;
            padding: 16px;
            border-radius: 5px;
        }

        .mb54 nav {
            margin-bottom: 54px;
        }

#ucLeftSegment_smartMenus nav {
    padding-left: 0px;
    margin-left: 20px;
}
    #ucLeftSegment_smartMenus nav a {
        width: 188px;
    }

    #ucLeftSegment_smartMenus nav a.current {
        background: rgba(177, 184, 191, 1) !important;
        color: #000000 !important;
    }

        #ucLeftSegment_smartMenus nav a.current img {
            filter: brightness(0) saturate(100%);
        }

.left-nav-button-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: inherit;
}

.left-nav nav a.current {
    background: #007A7A;
}

.loaded-content {
    grid-area: article;
    overflow: hidden;
}

.options-container {
    display: flex;
    height: fit-content;
}

.content-container {
    display: flex;
    flex: 1;
    flex-direction: row;
    height: 100%;
    overflow: auto;
}

.content-container-tab-navigation {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

/* Header
============================================================ */
header.internal {
    border-bottom: 1px solid #000000;
    height: 44px;
    overflow: visible !important;
    padding: 16px 24px 0 24px;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 98%;
    z-index: 9999;
    background-color: #464c60;
}

    header.internal h1.logo {
        display: inline-block;
        float: left;
        height: 28px;
        line-height: 34px;
        margin-right: 20px;
        margin-top: 0;
    }

        header.internal h1.logo img {
            display: block;
            float: left;
            margin-right: 10px;
        }

        header.internal h1.logo a {
            color: #F6F6F6;
            font-size: 18px;
            line-height: 26px;
            text-indent: -9999;
        }

        header.internal h1.logo span {
            color: #F6F6F6;
            font-size: 18px;
            line-height: 26px;
            text-indent: -9999;
        }

header h1.logo.signuph {
    display: inline-block;
    float: left;
    height: 28px;
    line-height: 34px;
    margin-right: 20px;
}

header h1.logo.signuph {
    color: #F6F6F6;
    font-size: 18px;
}

    header h1.logo.signuph img {
        display: block;
        float: left;
        margin-right: 10px;
    }

header.internal ul.menu {
    position: absolute;
    right: 30px;
    top: 20px;
    height: 20px;
}

    header.internal ul.menu > li {
        display: block;
        float: left;
        margin-right: 14px;
        height: 20px;
    }

header.internal > ul.menu > li:last-child {
    margin-right: 0px;
}

header.internal > ul.menu > li > a {
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    line-height: 18px;
}

header.internal > ul.menu > li a span.spritesheet {
    float: left;
    margin-right: 10px;
}

header.header_signup {
    border-bottom: 1px solid #000000;
    clear: both;
    padding: 20px;
    overflow: hidden;
    height: 30px;
    background-color: #464c60;
}

    header.header_signup p {
        color: white;
        font-size: 16px;
        font-weight: bold;
        line-height: 30px;
        float: right;
    }

.blackdropdown {
    display: block;
    float: right;
    height: 22px;
    overflow: hidden;
    position: relative;
    top: -5px;
    z-index: 10000;
}

    .blackdropdown a.dropdown {
        color: #FFFFFF;
        line-height: 30px;
        margin-bottom: 5px;
        padding: 0 5px;
        text-decoration: none;
    }

        .blackdropdown a.dropdown span.icn_drop {
            background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icn_dropdown.png') no-repeat right center;
            padding-left: 16px;
        }

        .blackdropdown a.dropdown img.img {
            float: left;
            padding: 0px 2px 2px 0px;
        }

    .blackdropdown .dropoptions {
        background-color: #212328;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        text-align: left;
    }

        .blackdropdown .dropoptions a {
            color: #FFFFFF;
            display: block;
            font-size: 11px;
            line-height: 22px;
            text-decoration: none;
            padding: 0px 10px;
        }

            .blackdropdown .dropoptions a:hover {
                background-color: #3A3D41;
                text-decoration: none;
            }

    .blackdropdown:hover {
        background-color: #212328;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        display: inherit;
        padding: 0px;
        height: auto;
        padding-bottom: 10px;
    }

    .blackdropdown a.dropdown .spritesheet.icnprofile {
        position: relative;
        top: 5px;
    }

    .blackdropdown:hover a.dropdown span.icn_drop {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icn_dropdownh.png') no-repeat right center;
    }

/* Aside
============================================================ */
aside {
    top: 44px; /* IE8 and below */
    top: 61px;
    width: 100%;
    height: 100%;
    z-index: 0;
    margin: 0px;
    background-color: #333842;
}

.latestborder {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/bg.png') repeat left top;
    -webkit-box-shadow: 0 1px rgba(255,255,255,0.3) inset;
    box-shadow: 0 1px rgba(255,255,255,0.3) inset;
    top: 44px; /* IE8 and below */
    top: 61px !important;
    overflow-y: auto !important;
    width: 176px;
    z-index: 0;
    margin: 0px;
}


.latestColor {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: 0 -1px rgba(255, 255, 255, 0.3) inset;
    box-shadow: 0 -1px rgba(255, 255, 255, 0.3) inset;
}


aside nav a span.spritesheet {
    margin-right: 10px;
    position: relative;
}

/* Content
============================================================ */
.overlay {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/overlaywhite.png') repeat left top;
    cursor: default;
    height: 100%;
    min-height: 640px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999999 !important;
    zoom: 1;
}

.loading, .loadsearch {
    display: block;
}

    .loading:after, .loadsearch:after {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/loader.gif') no-repeat left top;
        content: '';
        position: absolute;
        left: 50%;
        margin-left: -17.5px;
        top: 48%;
        height: 35px;
        width: 35px;
        z-index: 9999999;
    }

.contentwhite {
    background-color: #FFFFFF;
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    border-radius: 3px;
    margin: 40px 0px;
    padding: 40px;
}

.content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}


    .content.nohidescroll:before {
        background-color: transparent;
    }

    .content.contentLeft183:before {
        left: 183px !important;
    }

    .content.notsidebar:before {
        left: 0px;
    }

    .content .load {
        position: relative;
    }

        .content .load img {
            left: 47%;
            position: absolute;
            top: 45%;
        }

    .content .panel {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        height: 100%;
        -ms-overflow-y: auto;
        overflow-y: auto;
        padding: 20px;
        width: 100%;
    }

        .content .panel.without-padding {
            padding: 0px;
        }

        .content .panel.transform {
            margin-left: 180px\9;
            -webkit-transform: translate3d(0px, 0px, 0px);
            -moz-transform: translate3d(0px, 0px, 0px);
            -o-transform: translate3d(0px, 0px, 0px);
            -ms-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
        }

        .content .panel.withoutspacing {
            overflow-x: hidden;
            padding: 111px 0px 0px;
            position: relative;
            width: 100%;
            z-index: 10;
        }

        .content .panel.withoutscroll {
            overflow: hidden;
        }

.ie9 .panel.withoutspacing {
    margin-left: -11px \0;
}
/*Hack IE9*/

.principalcontent, .hidescrollsidebar {
    background-color: #F7F8FA;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    -ms-overflow-y: scroll;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

.hidescrollsidebar {
    padding-top: 111px;
}

.r20 {
    right: 20px !important;
}

.hiringLeadModel .chzn-container-multi .chzn-choices .search-field .default,
.modaladdpipeline .chzn-container-multi .chzn-choices .search-field .default,
.vacancyModalPopup .chzn-container-multi .chzn-choices .search-field .default {
    color: #666666;
    width: 62px !important
}

.dvApplicantFilters .chzn-container-multi .chzn-choices .search-field .default {
    color: #666666;
    width: 100px !important
}

.overflow-x {
    overflow-x: scroll;
}

.pipelineInline .chzn-results {
    max-height: 120px !important;
}


/*---Hack IE10----*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .content .panel.transform {
        margin-left: 0px;
    }
}

.content.notsidebar .panel {
    background-color: #F7F8FA;
}

div.popupOptions {
    background: rgb(255,255,255); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(220,220,220,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(220,220,220,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(220,220,220,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(220,220,220,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(220,220,220,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dcdcdc',GradientType=0 ); /* IE6 */
    border-bottom: 1px solid #C1C1C1;
    height: 49px;
    position: relative;
    top: -24px;
}

div.options {
    background: rgb(255,255,255); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(220,220,220,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(220,220,220,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(220,220,220,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(220,220,220,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(220,220,220,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dcdcdc',GradientType=0 ); /* IE6 */
    border-bottom: 1px solid #C1C1C1;
    height: 49px;
    top: 61px;
    left: 159px;
    width: 100%;
    z-index: 3;
}

a.back-Employees, a.back-bulkActions {
    float: left;
    left: 18px;
    position: relative;
    top: 9px;
}

a.back-bulkActions-pop-up {
    width: 95px;
}

div.options ul.showing {
    margin: 18px 0 0 20px;
    padding-right: 10px;
    position: relative;
}

    div.options ul.showing:before {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') 0 -2542px;
        content: '';
        position: absolute;
        right: 0px;
        top: 4px;
        height: 5px;
        width: 3px;
    }

    div.options ul.showing li {
        margin-right: 10px;
    }

div.options .showing li a {
    color: #3399FF;
    margin-right: 2px;
}

    div.options .showing li a:hover {
        color: #2371C0;
    }

div.sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #4A555F;
    width: 100%;
    height: 100%;
    max-width: 170px;
    color: white;
    top: 110px;
    box-sizing: border-box;
}

    div.sidebar .nav-container {
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        height: 100px;
    }

    div.sidebar .infoemployee {
        width: inherit;
    }

        div.sidebar .infoemployee .profile-section, h6 {
            color: white !important;
        }

.pc div.sidebar {
    -webkit-box-shadow: -1px 0px #D6D6D6 inset;
    box-shadow: -1px 0px #D6D6D6 inset;
}

div.sidebar div.imgprofile {
    margin: 16px 20px 20px;
    width: 132px;
    position: relative;
}

    div.sidebar div.imgprofile img {
        max-height: 132px;
        max-width: 132px;
        margin-bottom: 15px;
    }

    div.sidebar div.imgprofile .typeuser {
        margin-bottom: 15px;
        min-height: 25px;
    }

        div.sidebar div.imgprofile .typeuser:after {
            content: "\0020";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        div.sidebar div.imgprofile .typeuser .accessuser {
            display: block;
            float: left;
            margin-right: 40px;
        }

    div.sidebar div.imgprofile p {
        color: #FFFFFF;
        font-size: 12px;
        margin-bottom: 20px;
    }

div.sidebar nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FFFFFF;
    font-size: 12px;
    padding: 10px 15px;
    min-width: 130px;
    min-height: 20px;
    border-radius: 4px;
}

div.sidebar nav {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
}

    div.sidebar nav.notborder {
        border-top: none;
    }

    div.sidebar nav a.current {
        background-color: #973060;
        box-shadow: none;
        color: #FFFFFF;
    }

    div.sidebar nav a.currentSmartMenu {
        background: rgba(177, 184, 191, 1) !important;
        color: #000000 !important;
    }

div.sidebar .asideinfo {
    padding: 40px 20px;
    width: 129px;
}

    div.sidebar .asideinfo .spritesheet {
        display: block;
        margin: 0 auto 30px auto;
    }

    div.sidebar .asideinfo p {
        margin-bottom: 10px;
    }

        div.sidebar .asideinfo p.title {
            font-size: 17px;
            font-weight: 700;
            line-height: 20px;
            margin-bottom: 10px;
            text-align: left;
        }

.sidebar-filters aside {
    display: block !important;
    justify-content: center;
    background-image: none;
    background-color: #f5f5f5;
    border-right: solid 3px #d6d6d6;
    padding: 15px;
    overflow-x: hidden;
    overflow-y: hidden;
    box-sizing: border-box;
    width: 200px;
}

    .sidebar-filters aside.scroll-y {
        overflow-y: auto;
        width: 220px;
    }

.continfo:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.continfo p a {
    color: #666666;
}

.continfo.w720 {
    width: 720px;
}

.continfo.w790 {
    width: 790px;
}

.continfo.w830 {
    width: 830px;
}

.continfo.w920 {
    width: 920px;
}
/* PWEB-688 */
.continfo.w930 {
    width: 930px;
}

.continfo.w950 {
    width: 950px;
}

.continfo.w960 {
    width: 960px;
}

.continfo.w1000 {
    width: 1001px;
}

.continfo.w1100 {
    width: 1100px;
}

.continfo.w1200 {
    width: 1200px;
}

.continfo.withpadding {
    padding: 28px 0 0 28px;
}

    .continfo.withpadding.centercontinfo {
        margin: 0 auto;
        padding: 28px 20px;
    }

.divw1100 {
    position: relative;
    width: 1100px;
}

.w903 {
    width: 903px;
}

.headerstyle2 {
    background: rgb(237,237,237); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    border: 1px solid #D0D0D0;
    color: #666666;
    font-weight: 700;
    height: 50px;
    line-height: 50px;
    text-shadow: 1px 1px #FFFFFF;
    padding-right: 15px;
}

    .headerstyle2.nbb {
        border-bottom: none;
    }

    .headerstyle2 li {
        display: block;
        float: left;
    }

        .headerstyle2 li.actbutton {
            border-right: 1px solid #D0D0D0;
            height: 50px;
        }

            .headerstyle2 li.actbutton a:not(.button) {
                display: block;
                padding: 0px 15px;
                height: 50px;
            }

            .headerstyle2 li.actbutton a.viewsearch {
                float: left;
            }

    .headerstyle2 .icnplusbig {
        top: 6px;
    }

    .headerstyle2 .icnsearch {
        float: left;
        top: 14px;
    }

    .headerstyle2 div.search {
        float: left;
    }

        .headerstyle2 div.search a.close {
            float: right;
        }

            .headerstyle2 div.search a.close .spritesheet.icnclose {
                top: 1px;
            }

    .headerstyle2 label.inline {
        line-height: 27px;
        text-align: right;
        width: auto;
    }

    .headerstyle2 > ul.options {
        float: right;
    }

        .headerstyle2 > ul.options > li {
            display: block;
            float: left;
            height: 50px;
        }

            .headerstyle2 > ul.options > li a {
                color: #666666;
            }

            .headerstyle2 > ul.options > li:last-child {
                margin-right: 0px;
            }

    .headerstyle2 > ul.buttons {
        float: left;
        margin-left: 15px;
        overflow: hidden;
    }

        .headerstyle2 > ul.buttons li {
            display: block;
            float: left;
            margin-right: 10px;
        }

    .headerstyle2 .checker {
        margin-top: 3px;
    }

.options .filters {
    float: right;
    margin-top: 7px;
}

.options.headerstyle2 {
    height: 48px;
    padding: 0;
}

    .options.headerstyle2 li.actbutton {
        border-right: 1px solid #D0D0D0;
        height: 48px;
    }

.headerstyle2 li.actbutton a:not(.button) {
    height: 48px;
}

.options.headerstyle2 .filters {
    position: absolute;
    right: 170px;
    top: -1px;
}

.conttab {
    padding-bottom: 40px;
}

.modalwin.modaltasks .conttab .form p.block, .modalwin.modaltasks .conttab .form div.block,
.modalwin.modalNonedittasks .conttab .form p.block, .modalwin.modalNonedittasks .conttab .form div.block {
    margin-bottom: 14px;
}

.modalwin.modaltasks .conttab .block > p.left {
    width: 514px;
}

.bgoptions {
    background: rgb(237,237,237); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: 1px solid #EAEAEA;
    bottom: 0;
    left: 0px;
    overflow: hidden;
    padding: 20px 0;
    position: absolute;
    width: 100%;
}

    .bgoptions > a.removeopt {
        float: left;
        margin-left: 20px;
        position: relative;
        top: 4px;
    }

    .bgoptions a {
        float: right;
        margin-right: 20px;
    }

    .bgoptions p {
        line-height: 24px;
    }

.tabcomments .seccomments {
    border-bottom: 1px dotted #999999;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

    .tabcomments .seccomments:last-child {
        margin-bottom: 0px;
    }

    .tabcomments .seccomments p {
        line-height: 17px !important;
    }

        .tabcomments .seccomments p.options {
            font-weight: 700;
            margin-top: 5px;
        }

    .tabcomments .seccomments .linkblue {
        margin: 0px 5px;
    }

.tabcomments section.messagecomments {
    background-color: #F7F7F7;
    border: 1px solid #E1E1E1;
    border-radius: 3px;
    overflow: hidden;
    padding: 10px;
}

section.messagecomments {
    background-color: #f7f7f7;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    overflow: hidden;
    padding: 10px;
}

    section.messagecomments ul.options {
        border-bottom: 1px dotted #999999;
        margin-bottom: 10px;
        overflow: hidden;
        padding-bottom: 10px;
    }

        section.messagecomments ul.options li {
            display: block;
            float: left;
            margin-right: 10px;
        }

            section.messagecomments ul.options li:last-child {
                margin-right: 0px;
            }

    section.messagecomments textarea {
        background-color: #F7F7F7;
        border: none;
        height: 50px;
        margin-bottom: 10px;
        padding: 10px;
        width: 605px;
    }

        section.messagecomments textarea:focus {
            -webkit-box-shadow: none;
            box-shadow: none;
        }

.tabcomments section.messagecomments ul.options {
    border-bottom: 1px dotted #999999;
    margin-bottom: 10px;
    overflow: hidden;
    padding-bottom: 10px;
}

    .tabcomments section.messagecomments ul.options li {
        display: block;
        float: left;
        margin-right: 10px;
    }

        .tabcomments section.messagecomments ul.options li:last-child {
            margin-right: 0px;
        }

.tabcomments section.messagecomments textarea {
    background-color: #F7F7F7;
    border: none;
    height: 50px;
    margin-bottom: 10px;
    padding: 10px;
    width: 605px;
}

    .tabcomments section.messagecomments textarea:focus {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.modalwin section {
    margin-bottom: 20px;
}

.modalwin .title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

    .modalwin .title span.color90 {
        margin-left: 10px;
    }

.guide {
    background: #F3F3F3;
    border: 1px solid #E1E1E1;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 30px;
    max-width: 816px;
    overflow: hidden;
}

.modalwin .guide {
    width: 816px;
}

    .modalwin .guide.two {
        width: 655px;
    }

    .modalwin .guide.three {
        width: 645px;
    }

    .modalwin .guide.five {
        width: 1020px;
        max-width: 1080px;
    }

    .modalwin .guide.six {
        width: 1176px;
        max-width: 1240px;
    }

.guide li {
    display: block;
    float: left;
    position: relative;
    width: 204px;
}

.guide.two li {
    width: 327px;
}

    .guide.two li > p, .guide.two li > a {
        max-width: 290px;
    }

.guide.three li {
    width: 215px;
}

.guide.six li {
    width: 196px;
}


.guide.twoBig {
    width: 100% !important;
}

    .guide.twoBig li {
        width: 50% !important;
    }

        .guide.twoBig li p {
            max-width: 100% !important;
        }


.guide.newReject {
    width: 100% !important;
}

    .guide.newReject li {
        width: 50%;
    }

        .guide.newReject li p {
            max-width: 100% !important;
        }


.guide.threeBig {
    width: 100% !important;
}

    .guide.threeBig li {
        width: 33.33% !important;
    }

        .guide.threeBig li p {
            max-width: 100% !important;
        }

.guide.fourBig {
    width: 100% !important;
}

    .guide.fourBig li {
        width: 25% !important;
    }

        .guide.fourBig li p {
            max-width: 100% !important;
        }

.guide.fiveBig {
    width: 100% !important;
}

    .guide.fiveBig li {
        width: 20% !important;
    }

        .guide.fiveBig li p {
            max-width: 100% !important;
        }

.guide.sixBig {
    max-width: 100%;
    width: 100% !important;
}

    .guide.sixBig li {
        width: 16.66% !important;
    }

        .guide.sixBig li p {
            max-width: 100% !important;
        }

.guide li:after {
    content: url('https://static.peoplehr.net/202506198-hotfix000000/Images/guide_triangle1.png');
    display: block;
    position: absolute;
    right: -20px;
    top: 0;
    z-index: 1;
}

.guide .active:after {
    content: url('https://static.peoplehr.net/202506198-hotfix000000/Images/guide_triangle2.png');
}

.guide li:last-child:after {
    content: '';
}

.guide li > p, .guide li > a {
    color: #666666;
    display: block;
    height: 50px;
    line-height: 50px;
    margin: 0 auto 0 20px;
    max-width: 184px;
    text-align: center;
}

.guide li:first-child > p, .guide li:first-child > a {
    margin: 0 auto;
    width: 204px;
}

.guide .active {
    background: #FFFFFF;
}

.guide span {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/circle_gray.png') no-repeat left top;
    color: #FFFFFF;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    padding: 0 6px;
    position: relative;
    text-align: center;
    width: 8px;
}

.guide .active span {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/circle_blue.png') no-repeat top left;
}

.login_account {
    text-align: right;
    position: absolute;
    right: 0;
    top: 44px;
}

    .login_account a {
        color: #4c83b1;
        text-decoration: underline;
        font-weight: bold;
    }

.wrapper580 .guide li {
    width: 192px;
}

    .wrapper580 .guide li.active:last-child {
        width: 193px;
    }

.wrapper580 .form div.block {
    margin-bottom: 0px;
}

.continformation:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.continformation.sso {
    text-align: center;
}

    .continformation.sso img {
        margin-bottom: 10px;
    }

    .continformation.sso h2 {
        font-size: 20px;
        line-height: 32px;
        margin-bottom: 5px;
    }

    .continformation.sso h3 {
        color: #999999;
        font-size: 18px;
        margin-bottom: 20px;
    }

    .continformation.sso a.button.bigger {
        display: inline-block;
        margin-bottom: 20px;
        width: 30%;
    }

    .continformation.sso .adminnote {
        display: block;
        font-size: 13px;
        text-align: center;
    }

        .continformation.sso .adminnote a {
            color: #4c92b8;
            text-decoration: underline;
            font-weight: 500;
        }

.six-box {
    background: rgb(238,238,238); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-8 */
    border: 1px solid #D0D0D0;
    border-radius: 5px;
    float: left;
    height: 100px;
    padding: 20px;
    margin-bottom: 10px;
    width: 242px;
}

    .six-box p:first-child label {
        font-weight: bold;
    }

.modalwin div.employee {
    background: rgba(237,237,237);
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 10px;
}

    .modalwin div.employee p.name {
        float: left;
        line-height: 32px;
        margin-right: 20px;
    }

        .modalwin div.employee p.name img {
            float: left;
            margin-right: 10px;
        }

    .modalwin div.employee .items {
        float: right;
        margin-top: 7px;
    }

.modalwin .block .border {
    background: #F3F3F3;
    border: 1px solid #E1E1E1;
    margin-left: 130px;
    width: 478px;
}

    .modalwin .block .border a {
        margin-top: 13px;
    }

.modalwin .titlebg {
    background: rgba(237,237,237);
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */
    border-bottom: 1px solid #e0e0e0;
    padding: 11px 18px;
}

.modalwin.holiday_calculator .pa20 label.inline {
    font-weight: 400;
    width: 220px;
}

.modalboldtext {
    font-size: 13px;
    font-weight: 700;
}

.modalwin.tasks ul.task {
    overflow: hidden;
}

    .modalwin.tasks ul.task li {
        background: #F3F3F3;
        border: 1px solid #CCCCCC;
        border-radius: 3px;
        float: left;
        height: 92px;
        margin-bottom: 17px;
        margin-right: 17px;
        padding: 13px;
        -webkit-transition: background linear 0.2s;
        -moz-transition: background linear 0.2s;
        -o-transition: background linear 0.2s;
        -ms-transition: background linear 0.2s;
        transition: background linear 0.2s;
        width: 231px;
    }

        .modalwin.tasks ul.task li:hover {
            background: #E7E7E7;
        }

        .modalwin.tasks ul.task li:nth-child(3n) {
            margin-right: 0;
        }

        .modalwin.tasks ul.task li a {
            color: #666;
            text-decoration: underline;
        }

        .modalwin.tasks ul.task li.customtask {
            background-color: #FFFFFF;
            border: 1px dashed #DADADA;
            border-radius: 3px;
            clear: both;
            height: 88px;
            padding: 15px 14px;
            width: 231px;
        }

.whotoalert {
    display: block;
    float: left;
    margin-bottom: 20px;
    width: 687px;
}

.form .whotoalert div.block {
    margin-bottom: 0;
}

    .form .whotoalert div.block label.radio {
        margin-right: 10px;
        min-width: 100px;
    }

.form .emailadress div.block label.radio {
    margin-right: 10px;
    min-width: 90px;
}

.alertleft {
    display: block;
    float: left;
    width: 366px;
}



p.icndone {
    color: #909090;
    font-size: 18px;
    font-weight: 700;
    position: relative;
    padding-left: 87px;
    min-height: 66px;
}

    p.icndone:after {
        content: url('https://static.peoplehr.net/202506198-hotfix000000/Images/checkmark.png');
        left: 0;
        position: absolute;
        top: 0;
    }

    p.icndone span {
        color: #3399FF;
        border-bottom: 1px solid #3399FF;
    }

    p.icndone.icndonecenter {
        line-height: 24px;
        margin: 80px auto;
        position: relative;
        text-align: center;
        width: 380px;
    }

p.icnnorecord {
    width: 72px;
    height: 72px;
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnInformation.png') center center;
    display: inline-block;
}


.modalwin.done > a {
    display: block;
    font-size: 14px;
    margin: 0 auto;
    margin-bottom: 9px;
}

.scrollupload {
    max-height: 390px;
    margin-bottom: 20px;
    -ms-overflow-y: scroll;
    overflow-y: scroll;
    padding-right: 10px;
    overflow: auto;
}

section.upload {
    background: rgb(237,237,237); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    overflow: hidden;
    padding: 20px;
    position: relative;
}

    section.upload:last-child {
        margin-bottom: 0px;
    }

section.uploadaddmore {
    border: 1px dashed #CBCBCB;
    border-radius: 4px;
    color: #666666;
    min-height: 30px;
    margin-bottom: 20px !important;
    padding: 20px 30px;
    position: relative;
}

section.upload:hover, section.secimg:hover {
    background: rgb(237,237,237); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 49%,rgba(237,237,237,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 49%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 49%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 49%,rgba(237,237,237,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 49%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}

section.uploadaddmore:hover {
    -webkit-box-shadow: inset 1px 1px 3px #F1F1F1, inset -1px -1px 3px #F1F1F1;
    box-shadow: inset 1px 1px 3px #F1F1F1, inset -1px -1px 3px #F1F1F1;
}

section.uploadaddmore a {
    color: #666666;
}

    section.uploadaddmore a:first-child {
        line-height: 30px;
    }

section.upload:after, section.uploadaddmore:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') no-repeat top left;
    background-position: 0 -542px;
    content: "";
    display: block;
    height: 23px;
    position: absolute;
    top: 35%;
    width: 12px;
}

section.upload div, section.uploadaddmore div {
    float: left;
    margin-left: 30px;
}

    section.upload div p {
        line-height: 20px !important;
    }

        section.upload div p:first-child {
            font-size: 14px;
            font-weight: 700;
        }

section.upload > ul.options {
    float: right;
    margin-left: 10px;
    position: relative;
    top: 4px;
}

    section.upload > ul.options li {
        display: block;
        float: left;
        margin-right: 10px;
    }

        section.upload > ul.options li:last-child {
            margin-right: 0px;
        }

section.upload .delete {
    position: relative;
    top: 9px;
}

section.upload p.cat {
    font-size: 13px;
    float: right;
    line-height: 40px;
}

.heading {
    border-bottom: 1px solid #EDEDED;
    margin-bottom: 24px;
    overflow: hidden;
    padding-bottom: 5px;
}

.heading-page {
    font-family: 'Roboto';
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}

    .heading-page p {
        font-size: 18px;
        font-weight: 500;
        position: relative;
        line-height: initial;
    }

.heading-tasks-page {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 22px;
}

.heading-button {
    display: flex;
    margin-left: auto;
}

.heading-titlecontainer {
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.heading-titletext {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
}

.heading p {
    padding-left: 53px;
}

    .heading p a.inline {
        cursor: pointer;
        display: inline-block;
        margin-left: 10px;
    }

    .heading p:first-child {
        font-size: 16px;
        font-weight: 700;
        position: relative;
    }

.heading-subtitle {
    font-size: 13px !important;
    font-weight: 400 !important;
}

.heading p:first-child:after {
    content: "";
    position: absolute;
    left: 0px;
}

.heading-tasks-page p:first-child:after {
    content: "";
    position: absolute;
    left: 0px;
}

.heading.employ p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') 0 -575px;
    height: 27px;
    top: 4px;
    width: 40px;
}

.heading.icndocuments p:first-child:after {
    height: 31px;
    top: 4px;
    width: 27px;
}

.heading.icnqueries p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') 0 -1495px;
    height: 31px;
    top: 4px;
    width: 24px;
}

.heading.icnfire p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') 0 -2309px;
    height: 24px;
    top: 4px;
    width: 15px;
}

.heading.icnstartitle p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/stars_training.png');
    height: 17px;
    top: 1px;
    width: 20px;
}

.heading.icnglobalthings p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') 0 -2838px;
    height: 29px;
    top: 1px;
    width: 30px;
}

.heading.icnheadingactivity p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') -77px -1461px;
    height: 31px;
    top: 1px;
    width: 20px;
}

.heading.icnheadingmissions p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') -77px -2082px;
    height: 31px;
    top: 1px;
    width: 20px;
}

.heading.icnnotification p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') -67px -1905px;
    height: 31px;
    top: 3px;
    width: 30px;
}

.heading.icnauthorization p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') -67px -2011px;
    height: 31px;
    top: 3px;
    width: 30px;
}

.heading.expense p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') -134px -1606px;
    height: 40px;
    top: 3px;
    width: 37px;
}

.header-bold {
    font-size: 16px;
    font-weight: 700;
    position: relative;
}


.heading.icnnewsfeed p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') -61px -2886px;
    height: 35px;
    width: 36px;
}

.heading.icnthanks p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') -63px -2613px;
    height: 31px;
    top: 3px;
    width: 34px;
}

.heading.icnskills p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') -71px -2685px;
    height: 26px;
    top: 3px;
    width: 27px;
}

.heading.icnsystem p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') -71px -2807px;
    height: 25px;
    top: 3px;
    width: 25px;
}

.heading.performancereview p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') -146px -598px;
    height: 26px;
    top: 3px;
    width: 25px;
}

.heading.eventaudit p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/eventaudit.png');
    height: 32px;
    width: 32px;
}

.heading.performancereview .left {
    max-width: 574px;
}

.heading.withbotton .left {
    max-width: 660px;
}

.heading.icnrecruitment p:first-child:after {
    background: url(https://static.peoplehr.net/202506198-hotfix000000/Images/icnrecruitment.png) no-repeat left top;
    height: 19px;
    top: 3px;
    width: 25px;
}

.heading.icnrecruitment .left {
    margin-right: 20px;
    max-width: 540px;
}

.heading.icnrecruitment .right {
    float: right;
    margin-top: 10px;
    max-width: 270px;
}

.heading.icnrecruitment label.inline {
    width: auto;
}

.heading.icnbenefits p:first-child:after {
    background: url(https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png) -141px -1436px;
    height: 35px;
    top: 3px;
    width: 30px;
}

.heading.accrual p:first-child:after {
    background: url(https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png) -140px -2046px;
    height: 35px;
    top: 3px;
    width: 30px;
}

/* Ripple : Start*/
.heading.icnripple p:first-child:after {
    background: url(https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png) -145px -1578px;
    height: 26px;
    top: 4px;
    left: 10px;
    width: 26px;
}
/* Ripple :End*/

section.secimg {
    background: rgb(237,237,237); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    overflow: hidden;
    padding: 20px;
    position: relative;
    margin-bottom: 20px;
    -webkit-transition: background linear 0.2s;
    -moz-transition: background linear 0.2s;
    -o-transition: background linear 0.2s;
    -ms-transition: background linear 0.2s;
    transition: background linear 0.2s;
}

    section.secimg:last-child {
        margin-bottom: 0px;
    }

    section.secimg:hover {
        background-color: #E3E3E3;
    }

    section.secimg .icn {
        position: absolute;
        left: 20px;
        top: 23%;
    }

    section.secimg .left {
        float: left;
        padding-left: 60px;
    }

        section.secimg .left a:first-child {
            color: #6C6C6C;
            display: block;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 5px;
        }

.textseldoc {
    float: right;
    margin-bottom: 20px;
    width: 270px;
}

.totalsalary {
    background-color: #EDEDED;
    border: 1px solid #CBCBCB;
    border-radius: 3px 3px 3px 3px;
    color: #838383;
    font-size: 16px;
    font-weight: 700;
    line-height: 14px;
    margin: 0 0 20px 130px;
    padding: 30px 20px;
    width: 460px;
}

ul.optionsoverview {
    overflow: hidden;
}

    ul.optionsoverview li {
        display: block;
        float: left;
        margin-right: 10px;
    }

.infoverview {
    border-bottom: 1px solid #DCDCDC;
    clear: both;
    overflow: hidden;
}

    .infoverview ul {
        display: block;
        float: left;
        margin: 0px 30px 20px 0px;
    }

        .infoverview ul:last-child {
            margin-right: 0px;
        }

        .infoverview ul li {
            line-height: 22px;
        }

section.actions {
    border-bottom: 1px solid #DCDCDC;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 20px 0px;
}

    section.actions ul li {
        background: rgb(237,237,237); /* Old browsers */
        background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        border-radius: 4px;
        border: 1px solid #D0D0D0;
        display: block;
        float: left;
        margin-right: 20px;
        padding: 10px;
        height: 80px;
        text-align: center;
        width: 203px;
    }

        section.actions ul li:hover {
            background: rgb(237,237,237); /* Old browsers */
            background: -webkit-linear-gradient(rgba(255,255,255,1) 51%,rgba(237,237,237,1) 100%);
            background: -moz-linear-gradient(rgba(255,255,255,1) 51%,rgba(237,237,237,1) 100%);
            background: -o-linear-gradient(rgba(255,255,255,1) 51%,rgba(237,237,237,1) 100%);
            background: -ms-linear-gradient(rgba(255,255,255,1) 51%,rgba(237,237,237,1) 100%);
            background: linear-gradient(rgba(255,255,255,1) 51%,rgba(237,237,237,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
            -webkit-box-shadow: 1px 1px 3px #F1F1F1, -1px -1px 3px #F1F1F1;
            box-shadow: 1px 1px 3px #F1F1F1, -1px -1px 3px #F1F1F1;
        }

        section.actions ul li:last-child {
            margin-right: 0px;
        }

        section.actions ul li p {
            color: #666666;
            font-size: 32px;
            font-weight: 500;
            line-height: 30px;
            margin-top: 12px;
            text-shadow: 1px 1px #FFFFFF;
        }

        section.actions ul li span {
            color: #999999;
            display: block;
            font-size: 16px;
            line-height: 20px;
            text-align: center;
        }

section.piechart {
    border-bottom: 1px solid #DCDCDC;
    overflow: hidden;
    margin-bottom: 20px;
}

.accessname {
    background-color: #EDEDED;
    border-radius: 3px;
    margin-bottom: 20px;
    padding: 20px;
    -webkit-transition: background 0.2s;
    -moz-transition: background 0.2s;
    -o-transition: background 0.2s;
    -ms-transition: background 0.2s;
    transition: background 0.2s;
    width: 410px;
}

    .accessname:hover {
        background-color: #D6D6D6;
    }

    .accessname p {
        line-height: 25px;
    }

.numbernoti {
    width: 26px;
    text-align: center;
    border-radius: 40%;
    color: #FFFFFF;
    display: inline-block;
    font-size: 11px;
    line-height: 20px;
    text-shadow: none;
}

    .numbernoti.nblue {
        background-color: #4D82B0;
        -webkit-box-shadow: inset 0px 2px #93B9DA;
        box-shadow: inset 0px 2px #93B9DA;
    }

    .numbernoti.nred {
        background-color: #CC3300;
        -webkit-box-shadow: inset 0px 2px #DA6C47;
        box-shadow: inset 0px 2px #DA6C47;
    }

    .numbernoti.newnred {
        background-color: #E5173D;
    }

    .numbernoti.ngreen {
        background-color: #009900;
        -webkit-box-shadow: inset 0px 2px #47B547;
        box-shadow: inset 0px 2px #47B547;
    }

    .numbernoti.ngray {
        background-color: #666666;
        -webkit-box-shadow: inset 0px 2px #919191;
        box-shadow: inset 0px 2px #919191;
    }

ul.listview {
    height: 296px;
    -ms-overflow-y: scroll;
    overflow-y: scroll;
    padding-right: 10px;
}

    ul.listview li {
        clear: both;
        margin-bottom: 10px;
        overflow: hidden;
    }

        ul.listview li div.view {
            background-color: #D9EDF7;
            border: 1px solid #BCE8F1;
            border-radius: 3px;
            float: left;
            padding-right: 10px;
            width: 160px;
        }

            ul.listview li div.view img {
                float: left;
                margin-right: 10px;
            }

            ul.listview li div.view span {
                font-size: 11px;
                font-weight: 700;
                line-height: 24px;
                height: 24px;
            }

        ul.listview li span.time {
            font-size: 11px;
            font-weight: 700;
            float: right;
            line-height: 24px;
            text-align: left;
            width: 180px;
        }

section.infotasks {
    background: rgb(237,237,237); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    border-radius: 3px;
    border: 1px solid #D0D0D0;
    margin-bottom: 10px;
    height: 30px;
    overflow: hidden;
    padding: 10px;
}

    section.infotasks:hover {
        background: rgb(237,237,237); /* Old browsers */
        background: -webkit-linear-gradient(rgba(255,255,255,1) 46%,rgba(237,237,237,1) 100%);
        background: -moz-linear-gradient(rgba(255,255,255,1) 46%,rgba(237,237,237,1) 100%);
        background: -o-linear-gradient(rgba(255,255,255,1) 46%,rgba(237,237,237,1) 100%);
        background: -ms-linear-gradient(rgba(255,255,255,1) 46%,rgba(237,237,237,1) 100%);
        background: linear-gradient(rgba(255,255,255,1) 46%,rgba(237,237,237,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    }

    section.infotasks:active {
        background: rgb(237,237,237); /* Old browsers */
        background: -webkit-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 54%);
        background: -moz-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 54%);
        background: -o-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 54%);
        background: -ms-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 54%);
        background: linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 54%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }

    section.infotasks ul {
        overflow: hidden;
        margin: 3px 0px;
    }

        section.infotasks ul li {
            display: block;
            float: left;
            margin-right: 10px;
            line-height: 22px;
        }

            section.infotasks ul li:last-child {
                margin-right: 0px;
            }

            section.infotasks ul li label {
                font-size: 13px;
                font-weight: 700;
                line-height: 18px;
                margin: 3px 0;
            }

.sparklinespie {
    float: left;
    margin-right: 10px;
}

.newfield {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    margin-bottom: 20px;
    width: 100%;
}

#ddlEmployeeListType_chzn ul.chzn-results li {
    float: none;
    width: 100%;
}

#ddlEmployeeListType_chzn .chzn-drop {
    z-index: 1000;
}

.newfield.employeeType ul.chzn-results {
    overflow-y: scroll;
}

.newfield:last-child {
    margin-bottom: 0px;
}

.newfield ul {
    overflow: hidden;
}

    .newfield ul li {
        display: block;
        float: left;
        padding: 10px;
        height: 100%;
    }

        .newfield ul li:first-child {
            width: 110px;
        }

        .newfield ul li:last-child {
            border-left: 1px solid #CCCCCC;
        }

            .newfield ul li:last-child label {
                float: left;
                margin-right: 10px;
                width: 56px;
            }

            .newfield ul li:last-child input.text {
                float: right;
            }

        .newfield ul li label {
            font-weight: 700;
            line-height: 20px;
            margin-top: 10px;
        }

.newfield div.tagsinput {
    width: 358px;
}

    .newfield div.tagsinput input {
        width: 100% !important;
    }

.deletefield, .editfield {
    margin-left: 10px;
    position: relative;
    top: 2px;
}

.editnewfield .newfield {
    margin-bottom: 20px;
}

/* Query Builder
============================================================ */
table .spritesheet.icnstart {
    display: block;
    margin: 0 auto;
}

table .tdtitle {
    float: left;
}

table.documents {
    margin-bottom: 170px;
}

.secicntitle {
    padding-left: 40px;
    position: relative;
}

    .secicntitle:after {
        content: "";
        left: 0;
        position: absolute;
    }

    .secicntitle.icnquery a.favorite {
        left: 0;
        position: absolute;
        top: 12px;
    }

.dropdownoptions.export .spritesheet {
    display: block;
    float: left;
    margin-right: 15px;
}

.styles-section {
    border-radius: 3px;
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    -ms-overflow-y: scroll;
    overflow-y: scroll;
    padding: 10px;
}

    .styles-section > div {
        background: rgb(237,237,237); /* Old browsers */
        background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
        border-radius: 3px;
        border: 1px solid #d0d0d0;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        float: left;
        height: 55px;
        margin: 0px 10px 10px 0px;
        padding: 10px;
        width: 186px;
    }

        .styles-section > div:nth-child(2n) {
            margin-right: 0px;
        }

        .styles-section > div p {
            line-height: 15px;
            margin-top: 5px;
        }

.div-check {
    padding-bottom: 20px;
}

    .div-check > div {
        float: left;
        margin-right: 10px;
        width: 148px;
    }

        .div-check > div:nth-child(3n) {
            margin-right: 0px;
        }

        .div-check > div > .check-group1, .div-check > div > .check-group2 {
            padding-left: 20px;
        }

            .div-check > div > .check-group2.disabled {
                color: #CCC;
            }

.div-choose {
    overflow: hidden;
    margin-bottom: 20px;
}

    .div-choose.h480 .step1-div1 {
        height: 478px;
    }

    .div-choose.h480 .step1-div2 {
        height: 458px;
    }

    .div-choose.remind ul {
        margin-right: 10px;
        width: 180px;
    }

        .div-choose.remind ul:last-child {
            margin-right: 0px;
        }

        .div-choose.remind ul li {
            display: block;
            line-height: 20px;
            padding: 7px 10px;
        }

    .div-choose.remind .datepicker {
        margin: 10px 0 0 34px;
    }

        .div-choose.remind .datepicker + img {
            top: 10px;
        }

    .div-choose .step1-div1, .div-choose .step1-div2 {
        border-bottom: 1px solid #EDEDED;
        border-top: 1px solid #EDEDED;
        -ms-overflow-y: scroll;
        overflow-y: scroll;
        height: 320px;
    }

    .div-choose > div.step1-div1 ul {
        display: block;
        overflow: hidden;
        width: 173px;
    }

    .div-choose > div.step1-div1 li {
        display: block;
        line-height: 20px;
        padding: 7px 10px;
        width: 153px;
    }

    .div-choose > div.step1-div2 > ul > li {
        display: block;
        float: left;
        line-height: 20px;
        margin-right: 10px;
        padding: 7px 10px;
        width: 160px;
    }

    .div-choose > div ul.hover li:hover, .div-choose > div ul.hover li.active {
        background: rgb(237,237,237); /* Old browsers */
        background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        -webkit-box-shadow: 1px 1px #EDEDED inset, -1px -1px #EDEDED inset;
        box-shadow: 1px 1px #EDEDED inset, -1px -1px #EDEDED inset;
    }
    /* PWEB-824 */

    .div-choose > div ul.hover li:active {
        background: rgb(237,237,237); /* Old browsers */
        background: -webkit-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%);
        background: -moz-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%);
        background: -ms-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%);
        background: linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }

    .div-choose .step1-div1 {
        background: #f9f9f9;
        border-right: 1px solid #EDEDED;
    }

        .div-choose .step1-div1 ul.hover li:hover {
            -webkit-box-shadow: 1px 1px #EDEDED inset, 0 -1px #EDEDED inset;
            box-shadow: 1px 1px #EDEDED inset, 0 -1px #EDEDED inset;
        }

        .div-choose .step1-div1 ul.hover li:nth-child(1):hover {
            -webkit-box-shadow: 1px 0 #EDEDED inset, 0 -1px #EDEDED inset;
            box-shadow: 1px 0 #EDEDED inset, 0 -1px #EDEDED inset;
        }

    .div-choose .step1-div2 {
        overflow-x: hidden;
    }

        .div-choose .step1-div2.pa10 {
        }

        .div-choose .step1-div2 .subareas {
            margin-bottom: 20px;
            overflow: hidden;
        }

        .div-choose .step1-div2 ul.subareas.hover li:nth-child(3n+1):hover {
            -webkit-box-shadow: 0 1px #EDEDED inset, -1px -1px #EDEDED inset;
            box-shadow: 0 1px #EDEDED inset, -1px -1px #EDEDED inset;
        }

        .div-choose .step1-div2 ul.subareas.hover li:nth-child(-n+3):hover {
            -webkit-box-shadow: 1px 0 #EDEDED inset, -1px -1px #EDEDED inset;
            box-shadow: 1px 0 #EDEDED inset, -1px -1px #EDEDED inset;
        }

        .div-choose .step1-div2 ul.subareas.hover li:nth-child(1):hover {
            -webkit-box-shadow: 0 0 #EDEDED inset, -1px -1px #EDEDED inset;
            box-shadow: 0 0 #EDEDED inset, -1px -1px #EDEDED inset;
        }

    .div-choose .step1-div1 ul.selarea li {
        padding-left: 40px;
        position: relative;
        width: 123px;
        cursor: pointer;
    }

        .div-choose .step1-div1 ul.selarea li.selfilter:after {
            background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') 0 -1833px;
            content: '';
            position: absolute;
            left: 10px;
            top: 8px;
            height: 18px;
            width: 18px;
        }

.filter {
    background-color: #F9F9F9;
    border: 1px solid #E5E5E5;
    border-radius: 3px 3px 3px 3px;
    margin-bottom: 10px;
    padding: 20px;
    position: relative;
    width: 548px;
}

    .filter .title {
        font-size: 15px;
        margin-bottom: 15px;
        width: 430px;
    }

    .filter a.removefilter {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .filter ul.inline {
        overflow: hidden;
        margin-bottom: 13px;
    }

        .filter ul.inline li {
            display: block;
            float: left;
            margin-right: 10px;
            line-height: 20px;
        }

            .filter ul.inline li label {
                font-size: 11px;
            }

            .filter ul.inline li:last-child {
                margin-right: 0px;
            }

            .filter ul.inline li.addcond {
                float: right !important;
            }

                .filter ul.inline li.addcond span {
                    top: 4px;
                    margin-right: 5px;
                }

.sectionfilter {
    background: rgb(237,237,237); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    border: 1px solid #D0D0D0;
    border-radius: 3px;
    margin-bottom: 15px;
    padding: 10px 10px 10px 40px;
    position: relative;
}

    .sectionfilter:before {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') 0 -542px;
        content: "";
        height: 23px;
        left: 15px;
        position: absolute;
        top: 31%;
        width: 12px;
    }

    .sectionfilter a.close, .fieldsoverallscore a.close {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/cross-cancel.png') no-repeat left top;
        display: block;
        float: left;
        height: 11px;
        margin-top: 15px;
        width: 11px;
    }

a.sectionfilter {
    color: #909090;
    display: block;
    font-size: 13px;
    height: 36px;
    line-height: 36px;
    width: 538px;
}

    a.sectionfilter:hover {
        background: rgb(237,237,237); /* Old browsers */
        background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    }

    a.sectionfilter:active {
        background: rgb(237,237,237); /* Old browsers */
        background: -webkit-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%);
        background: -moz-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%);
        background: -ms-linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%);
        background: linear-gradient(rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }

a.favorite {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') 0px -1861px;
    display: block;
    margin: 0 auto;
    height: 22px;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
    width: 22px;
}

    a.favorite.active {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') 0 -1766px;
    }

.showdate {
    padding-top: 5px;
}


    .showdate label.inline {
        width: 90px;
    }


.mw710 .modalwin section.cont ul.tabs.two li, .wmw710 .modalwin section.cont ul.tabs.two li {
    max-width: 322px;
    width: 322px;
}

.mw878 .modalwin section.cont ul.tabs.three li, .wmw878 .modalwin section.cont ul.tabs.three li {
    max-width: 270px;
    width: 270px;
}

.mw878 .modalwin section.cont ul.tabs.four li, .wmw878 .modalwin section.cont ul.tabs.four li {
    max-width: 200px;
    width: 200px;
}

.mw878 .modalwin section.cont ul.tabs.five li, .wmw878 .modalwin section.cont ul.tabs.five li {
    max-width: 158px;
    width: 158px;
}

.form .threefieldinline {
    margin-bottom: 30px;
}

    .form .threefieldinline:after {
        clear: both;
        content: " ";
        display: block;
        height: 0;
        visibility: hidden;
    }

    .form .threefieldinline div.inline {
        margin-right: 16px;
        max-width: 205px;
    }

.divbreaks .bggray, .addabreak {
    display: block;
    height: 40px;
    margin-bottom: 10px;
    position: relative;
    text-align: center;
}

.bggray.addabreak {
    padding: 10px 0px;
}

.addabreak > span {
    color: #666666;
    display: inline-block;
    font-weight: bold;
    line-height: 38px;
}

.divbreaks .bggray .removebreaks {
    position: absolute;
    right: 10px;
    top: 5px;
}

.divbreaks .bggray p {
    display: block;
    float: right;
    font-size: 14px;
    font-weight: bold;
    margin-right: 30px;
    margin-top: 9px;
}

.divbreaks .bggray .jspinner {
    margin-right: 10px;
}

.divbreaks .bggray div.inline {
    margin-right: 31px;
}

    .divbreaks .bggray div.inline:last-child {
        margin-right: 0px;
    }

.divbreaks .bggray label.inline {
    text-align: left;
    width: 99px;
}

.divbreaks .bggray .inline:last-child {
    margin-right: 0px;
}

.totaltime {
    float: left;
    padding-top: 10px;
    width: 512px;
}

    .totaltime .bggray {
        margin-right: 5px;
        width: 100px;
    }

    .totaltime ul.inline li > p:first-child {
        font-weight: 700;
        margin-bottom: 5px;
    }

table.tableproject {
    cursor: pointer;
}


.notfound {
    margin: 0 auto;
    text-align: center;
    padding: 10% 0px;
    height: 100%;
    width: 480px;
}

.icnnotfound {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icn_notfound.png');
    background-repeat: no-repeat;
    height: 70px;
    margin: 0 auto 20px;
    width: 70px;
}

.searchresult {
    border: 1px solid #EDEDED;
    border-top: none;
    margin-bottom: 20px;
    text-align: center;
    overflow: hidden;
    padding-top: 40px;
    position: relative;
    background-color: #FFFFFF;
}

    .searchresult div.cont {
        margin: 0 auto;
        width: 500px;
    }

        .searchresult div.cont img {
            display: block;
            margin: 0 auto 40px;
        }

        .searchresult div.cont p {
            margin-bottom: 20px
        }

            .searchresult div.cont p.title {
                font-size: 24px;
                font-weight: 700;
            }

/* Reports
============================================================ */

.listreports {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 20px;
    margin-bottom: 20px;
}

    .listreports:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .listreports > article {
        font-family: 'Roboto', sans-serif;
        height: 294px;
        width: 266px;
        overflow: hidden;
        border-radius: 18px;
        border: 1px solid #048197;
    }

        .listreports > article:hover {
            box-shadow: 1px 1px 2px #CCCCCC, -1px -1px 2px #CCCCCC;
        }

    .listreports .report-title {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #048197;
        width: 100%;
        height: 45px;
    }

        .listreports .report-title a {
            color: white;
            font-style: normal;
            font-weight: 500;
            font-size: 15px;
            line-height: 24px;
            padding: 12px;
        }

    .listreports .report-content {
        display: flex;
        position: relative;
        object-fit: cover;
        height: 100%;
    }

    .listreports .report-description-container {
        width: 84%;
    }


.task-table {
    width: auto;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(15px, 1fr) minmax(15px, 1.67fr) minmax(15px, 1fr) minmax(15px, 100px) minmax(15px, 1fr);
    border: 1px solid #D0D0D0;
}

@media only screen and (min-width : 768px) {
    .task-table-six-column {
        grid-template-columns: minmax(15px, 1fr) minmax(15px, 1.67fr) minmax(15px, 1fr) minmax(15px, 1fr) minmax(15px, 100px) minmax(15px, 1fr);
    }
}

.query-table {
    width: auto;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(15px, 1fr) minmax(15px, 1.67fr) minmax(15px, 1fr) 0.2fr 0.1fr;
    border: 1px solid #D0D0D0;
}

@media only screen and (min-width : 768px) {
    .query-table-six-column {
        grid-template-columns: minmax(15px, 1fr) minmax(15px, 1.67fr) minmax(15px, 1fr) minmax(15px, 1fr) 0.2fr 0.1fr;
    }
}

.employee-table {
    width: auto;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1.67fr) minmax(15px, 1fr) minmax(15px, 1fr) minmax(15px, 1fr);
    border: 1px solid #D0D0D0;
    min-width: 628px;
}

.employee-table:has(.payable) {
    grid-template-columns: minmax(100px, 1fr) minmax(60px, 1fr) minmax(100px, 1.67fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(50px, 1fr) minmax(100px, 0.5fr);
}

.not-payable-status {
    height: 22px;
    border-radius: 11px;
    opacity: 1;
    background-color: rgba(204, 51, 0, 1);
    color: white;
    width: 79px;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.payable-status {
    display: flex;
    width: 60px;
    border-radius: 11px;
    border: 1px solid rgba(135, 206, 202, 1);
    opacity: 1;
    background-color: rgba(203, 234, 232, 1);
    height: 22px;
    align-items: center;
    justify-content: center;
    color: #3E3E3E;
}

@media only screen and (max-width: 1300px) {
    .task-table .imgpro, .query-table .imgpro, .employee-table .imgpro {
        display: none
    }
}

table.task-table thead tr td, table.query-table thead tr td, table.employee-table thead tr td {
    background: #FFFFFF;
    border-right: none;
    padding: 10px 10px;
    line-height: 18px;
    color: #292D35;
    border-bottom: 2px solid #D0D0D0;
}

table.task-table tbody tr th, table.task-table tbody tr td, table.query-table tbody tr th, table.query-table tbody tr td, table.employee-table tbody tr th, table.employee-table tbody tr td {
    line-height: 16px;
    padding: 8px 10px;
}

.task-header, .query-header, .employee-header {
    border-left: none;
    border-right: none;
}

table.task-table thead tr td:last-of-type, table.query-table thead tr td:last-of-type {
    border-right: solid 1px #D0D0D0;
}

table.task-table thead tr td:nth-of-type(2), table.query-table thead tr td:nth-of-type(2), table.employee-table thead tr td:nth-of-type(2) {
    border-left: solid 1px #D0D0D0;
}

.dataRow:hover > td {
    cursor: pointer;
    background-color: #eafcff;
}

.display-contents {
    display: contents;
}

.display-contents-bold {
    display: contents;
    font-size: 16px;
    font-weight: 700;
}

.task-row-item, .query-row-item {
    border-style: solid;
    border-color: #D0D0D0;
    border-width: 1px 0px 1px 0px;
    word-wrap: break-word;
}

.employee-row-item {
    border-style: solid;
    border-color: #D0D0D0;
    border-width: 1px 0px 1px 0px;
    word-wrap: break-word;
    display: flex;
    justify-content: left;
    align-items: center;
    overflow: hidden;
}
.query-align-item, employee-align-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

a.imgreport {
    display: flex;
    justify-content: center;
    height: 224px;
    width: 100%;
    object-fit: cover;
}

    a.imgreport img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.listreports > article .report-description {
    height: 120px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

    .listreports > article .report-description .report-lastused {
        display: flex;
        flex-direction: column;
        font-size: 13px;
    }

        .listreports > article .report-description .report-lastused .lastused-text {
            font-weight: 700;
            color: #58595B;
        }

        .listreports > article .report-description .report-lastused .lastused-container {
            display: flex;
            margin-top: 2px;
            align-items: center;
        }

        .listreports > article .report-description .report-lastused .lastused-container-usedby {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-left: 8px;
        }

            .listreports > article .report-description .report-lastused .lastused-container-usedby p:first-child {
                font-weight: 700;
                color: #202227;
            }

        .listreports > article .report-description .report-lastused .lastused-container-durationago {
            font-weight: 400;
            color: #63717E;
        }

        .listreports > article .report-description .report-lastused .lastused-container-img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }

.viewreport {
    margin-bottom: 20px;
}

.reports-control-div {
    background-color: #63717E;
    width: 46px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .reports-control-div li a {
        display: block;
        padding: 10px;
        font-size: 20px;
        color: #fff;
        text-align: center;
    }

.create-report-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 8px 6px 8px;
    gap: 6px;
    /* Accents/Purple/PL100 - Primary */

    background: #973060;
    border-radius: 4px;
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
    background-color: #973060;
}

.create-report-div :hover {
    float: right;
    cursor: pointer;
}

.create-report-text {
    color: white;
    font-weight: 400;
    font-size: 13px;
    Line-height: 20px;
    display: inline-block;
    vertical-align: middle;
    font-feature-settings: 'tnum' on, 'lnum' on;
}

.create-report-button svg {
    fill: white;
}

.create-report-icon {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
}
/* Modal Tasks Complete
============================================================ */
.taskscomplete {
    text-align: center;
}

    .taskscomplete img.badge {
        margin-bottom: 20px;
    }

    .taskscomplete p.title {
        font-size: 22px;
        line-height: 22px;
        margin-bottom: 5px;
    }

    .taskscomplete p.blue {
        color: #3399FF;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .taskscomplete a.button {
        margin-bottom: 20px;
    }

.task-complete-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px;
}

.taskcheck {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
/* Style Error page
============================================================ */
section.sectionerror {
    background-color: #F5F5F5;
    height: 100%;
    padding-top: 10%;
    width: 100%;
}

    section.sectionerror .message {
        background-color: #FFFFFF;
        border: 1px solid #D6D6D6;
        margin: 0 auto;
        overflow: hidden;
        padding: 40px;
        width: 470px;
    }

        section.sectionerror .message span.img {
            background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icn_wrong.png') no-repeat;
            display: block;
            margin: 0 auto 40px;
            height: 72px;
            width: 72px;
        }

        section.sectionerror .message p {
            margin-bottom: 20px;
        }

            section.sectionerror .message p.title {
                color: #666666;
                font-size: 24px;
                line-height: 24px;
                text-align: center;
            }

.pl50 {
    padding-left: 50px !important;
}

.syssetting:before {
    border-radius: 100%;
    content: "";
    margin: auto;
    display: block;
    position: relative;
    height: 10px;
    margin-top: 1px;
    width: 10px;
    z-index: 1;
}

td.syssetting.green:before {
    background: rgb(102,153,0); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(102,153,0,1) 0%, rgba(102,204,51,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,153,0,1)), color-stop(100%,rgba(102,204,51,1))); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, rgba(102,153,0,1) 0%,rgba(102,204,51,1) 100%); /* Chrome10+, Safari5.1+ */
    background: -o-linear-gradient(top, rgba(102,153,0,1) 0%,rgba(102,204,51,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(102,153,0,1) 0%,rgba(102,204,51,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(102,153,0,1) 0%,rgba(102,204,51,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#669900', endColorstr='#66cc33',GradientType=0 ); /* IE6-9 */
    border: 1px solid #669900;
    box-shadow: 0px 1px #83FF3D inset;
    -webkit-box-shadow: 0px 1px #83FF3D inset;
}

td.syssetting.red:before {
    background: rgb(182,2,2); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(182,2,2,1) 0%, rgba(255,0,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(182,2,2,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, rgba(182,2,2,1) 0%,rgba(255,0,0,1) 100%); /* Chrome10+, Safari5.1+ */
    background: -o-linear-gradient(top, rgba(182,2,2,1) 0%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(182,2,2,1) 0%,rgba(255,0,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(182,2,2,1) 0%,rgba(255,0,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b60202', endColorstr='#ff0000',GradientType=0 ); /* IE6-9 */
    border: 1px solid #B60202;
    box-shadow: 0px 1px #F8BDB7 inset;
    -webkit-box-shadow: 0px 1px #F8BDB7 inset;
}
/* PageSlide
============================================================ */

.scroll-y {
    -ms-overflow-y: auto;
    overflow-y: auto;
}

/* Forms
============================================================ */

.form p.inline, .form div.inline {
    display: block;
    float: left;
    margin-right: 20px;
    position: relative;
}

    .form p.inline.nmr, .form div.inline.nmr {
        margin-right: 0px !important;
    }

    .form div.inline.w280 {
        width: 279px;
    }

.form p.block, .form div.block {
    clear: both;
    display: block;
    line-height: 24px;
    margin-bottom: 14px;
    position: relative;
}

    .form p.block:after, .form div.block:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

.form .block a.spritesheet.icntime, .form .block a.spritesheet.icntime2, .form .block a.spritesheet.icntime3 {
    float: left;
    margin-left: 10px;
    position: relative;
    top: 12px;
}

.form .block a.spritesheet.icntime9119 {
    float: right;
    margin-right: 10px;
    position: relative;
    top: 12px;
}

.form .block a.spritesheet.icnchange9119 {
    float: right;
    margin-right: 10px;
    position: relative;
    top: 12px;
}

.form .block span.spritesheet.icnchange {
    float: left;
    margin-left: 10px;
    position: relative;
    top: 12px;
}

.form .block a.spritesheet.icntime.textarea {
    top: 5px;
}

.form label.w30 {
    width: 30px;
}

.form label.w45 {
    width: 45px;
}

.form label.w50 {
    width: 50px;
}

.form label.w70 {
    width: 70px;
}

.form label.w100 {
    width: 100px;
}

.form label.w130 {
    width: 130px;
}

.form label.w249 {
    width: 249px;
}

.form label.w400 {
    width: 400px;
}

.form label.w350 {
    width: 350px;
}

label.inlineform {
    color: #666666;
    display: block;
    float: left;
    font-weight: 700;
    line-height: 17px;
    margin-right: 200px;
    margin-top: 12px;
    position: relative;
    width: 110px;
}

label.inline {
    color: #666666;
    display: block;
    float: left;
    font-weight: 700;
    line-height: 17px;
    margin-right: 20px;
    margin-top: 12px;
    position: relative;
    width: 110px;
}

label.inline1 {
    color: #666666;
    display: block;
    float: left;
    font-weight: 700;
    line-height: 17px;
    margin-right: 0px;
    margin-top: 12px;
    position: relative;
    width: 110px;
}

label.inline.lblinAcc {
    width: 124px;
}


label.block {
    color: #666666;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: 700;
    line-height: 40px;
    margin-right: 10px;
    width: 100%;
}

label.radio {
    color: #666666;
    display: block;
    font-size: 13px;
    float: left;
    margin-right: 20px;
    line-height: 40px;
}

label.widthauto {
    margin-right: 15px;
    width: auto;
}

label.width129 {
    margin-right: 15px;
    width: 129px;
}

label.width64 {
    margin-right: 15px;
    width: 64px;
}

label.width48 {
    margin-right: 15px;
    width: 48px;
}

label.radio input {
    margin-right: 10px;
}

label.check {
    color: #666666;
    display: block;
    font-size: 12px;
    line-height: 22px;
}

    label.check.inline {
        margin-top: 0;
    }

label.checkbox {
    float: left;
    line-height: 20px;
}

.minilabel {
    font-size: 10.5px;
    font-style: italic;
    font-weight: 700;
    line-height: 25px;
    margin-left: 2px;
}

input[type=email] {
    box-shadow: none;
    -webkit-box-shadow: none;
}

input.text, textarea {
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    color: #666666;
    -webkit-text-fill-color: #666666;
    font-size: 13px;
    line-height: 40px\9;
    height: 38px;
    padding: 0px 10px;
    -webkit-transition: border 0.2s;
    -moz-transition: border 0.2s;
    -o-transition: border 0.2s;
    -ms-transition: border 0.2s;
    transition: border 0.2s;
}

input.text, textarea, .textareaLookDv {
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    color: #666666;
    -webkit-text-fill-color: #666666;
    color: #666666\0/;
    font-size: 13px;
    line-height: 40px\9;
    height: 38px;
    padding: 0px 10px;
    -webkit-transition: border 0.2s;
    -moz-transition: border 0.2s;
    -o-transition: border 0.2s;
    -ms-transition: border 0.2s;
    transition: border 0.2s;
}

    input.text:focus, textarea:focus {
        border-color: rgba(82, 168, 236, 0.8);
        -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.075) inset, 0px 0px 6px rgba(82,186,236,0.6);
        box-shadow: 0px 1px 1px rgba(0,0,0,0.075) inset, 0px 0px 6px rgba(82,186,236,0.6);
        outline: 0 none;
    }

textarea, .textareaLookDv {
    height: 68px;
    line-height: 20px;
    padding: 5px;
    -webkit-resize: none;
    -moz-resize: none;
    resize: none;
    width: 490px;
}

    textarea.bg {
        background-color: transparent;
        border: none;
        height: auto;
        min-height: 60px;
        padding: 10px;
    }

.textareaLookDv {
    overflow-y: visible !important;
}


textarea.h90 {
    height: 90px;
}

textarea.h100 {
    height: 100px;
}

textarea.h135 {
    height: 135px;
}

textarea.h240 {
    height: 240px;
}

textarea.h120, .textareaLookDv.h120 {
    height: 120px;
}

textarea.w240 {
    width: 240px;
}

textarea.w260 {
    width: 260px;
}

textarea.w320 {
    width: 320px;
}

textarea.w321, .textareaLookDv.w321 {
    width: 321px;
}

textarea.w340 {
    width: 340px;
}

textarea.w370 {
    width: 358px;
}

textarea.w380 {
    width: 380px;
}

textarea.w397 {
    width: 397px;
}

textarea.w438 {
    width: 438px;
}

textarea.w480 {
    width: 480px;
}

textarea.w490 {
    width: 490px;
}

textarea.w363 {
    width: 363px;
}

textarea.w500 {
    width: 488px;
}

textarea.w580 {
    width: 570px;
}

textarea.w635 {
    width: 635px;
}

textarea.w675 {
    width: 675px;
}

textarea.bg.w600 {
    width: 605px;
}

.divAddress.w370 {
    width: 368px;
}

.divAddress.w340 {
    width: 338px;
}

input.search {
    border: 1px solid #C1C1C1;
    -webkit-box-shadow: 0px 1px 2px #D0D0D0 inset;
    box-shadow: 0px 1px 2px #D0D0D0 inset;
    border-radius: 3px;
    color: #666666;
    float: left;
    font-weight: normal;
    height: 30px;
    line-height: 30px\9;
    margin-top: 9px;
    padding: 0px 10px;
    width: 240px;
}

input.datepicker {
    width: 100px;
}

.ui-datepicker-trigger {
    margin-left: 10px;
    position: relative;
    top: 5px;
}

input.text.small {
    height: 30px;
    line-height: 30px;
}

input.text.small2 {
    height: 32px;
    line-height: 32px;
}

input.text.w30 {
    width: 30px;
    text-align: center;
}

input.text.w40 {
    width: 40px !important;
}

input.text.w50 {
    width: 50px;
}

input.text.w70 {
    width: 70px !important;
}

input.text.w63 {
    width: 63px;
}

input.text.w120 {
    width: 110px;
}

input.text.w145 {
    width: 145px;
}

input.text.w150 {
    width: 128px;
}

input.text.w157 {
    width: 157px;
}

input.text.w188 {
    width: 188px;
}

input.text.w220 {
    width: 200px;
}

input.text.w221 {
    width: 221px;
}

input.text.w240 {
    width: 240px;
}

input.text.w250 {
    width: 250px;
}

input.text.w260 {
    width: 258px;
}

input.text.w290 {
    width: 289px;
}

input.text.w200 {
    width: 200px;
}

input.text.w304 {
    width: 304px;
}

input.text.w310 {
    width: 310px;
}

input.text.w330 {
    width: 328px;
}

input.text.w344 {
    width: 344px;
}

input.text.w370 {
    width: 348px;
}

input.text.w353 {
    width: 353px;
}

input.text.w366 {
    width: 366px;
}

input.text.w425 {
    width: 425px;
}

input.text.w428 {
    width: 428px;
}

input.text.w460 {
    width: 460px;
}

input.text.w470 {
    width: 470px;
}

input.text.w480 {
    width: 480px;
}

input.text.w490 {
    width: 490px;
}

input.text.w500 {
    width: 478px;
}

input.text.w520 {
    width: 517px;
}

input.text.w580 {
    width: 558px;
}

input.text.w665 {
    width: 665px;
}

input.text.w375 {
    width: 370px;
}

input.text.w564 {
    width: 501px;
}

input.text.w446 {
    width: 446px;
}

input.text.w415 {
    width: 415px;
}




.captcha {
    height: 123px;
    width: 312px;
}

/* Style to show non-editable fields
============================================================ */
.divnoneditable {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    margin-top: 7px;
    padding: 10px;
}

    .divnoneditable.w350 {
        width: 348px;
    }

    .divnoneditable span.bold {
        margin: 0px 5px;
    }

input.non-editable, select.non-editable, textarea.non-editable, .textareaLookDv.non-editable {
    background-color: #F3F3F3;
    border-color: #CCCCCC;
    color: #666666\9;
    cursor: default;
}

    input.non-editable.datepicker + .ui-datepicker-trigger {
        display: none;
    }

input[disabled].onlyread {
    background-color: #EEEEEE;
    border-color: #DDDDDD;
    cursor: default;
}

input[readonly="readonly"]:focus {
    box-shadow: none;
    border: 1px solid #CCCCCC;
    outline: none;
}

textarea[readonly="readonly"]:focus {
    box-shadow: none;
    border: 1px solid #CCCCCC;
    outline: none;
}


.clockreadonly input.w50 {
    display: block;
    float: left;
    margin-right: 5px;
}


/* Spinner
============================================================ */
.jspinner {
    float: left;
    height: 40px;
    position: relative;
    text-align: left;
}

.twospinner .jspinner {
    margin-right: 10px;
}

.jspinner input[type=text] {
    float: left;
    height: 40px;
    padding-right: 20px;
    width: 40px;
}

.jspinner .jspins {
    display: inline-block;
    height: 40px;
    position: absolute;
    right: -1px;
    width: 22px;
}

    .jspinner .jspins .jspinup {
        background: transparent url('https://static.peoplehr.net/202506198-hotfix000000/Images/spinup.png') no-repeat;
        display: inline-block;
        height: 20px;
        position: absolute;
        top: 0;
        width: 22px;
    }

    .jspinner .jspins .jspindown {
        background: transparent url('https://static.peoplehr.net/202506198-hotfix000000/Images/spindown.png') no-repeat;
        display: inline-block;
        height: 20px;
        position: absolute;
        top: 20px;
        width: 22px;
    }

.dvScore .jspinner .jspins {
    display: inline-block;
    height: 35px;
    position: absolute;
    right: -1px;
    width: 14px;
}

    .dvScore .jspinner .jspins .jspinup {
        background: transparent url('https://static.peoplehr.net/202506198-hotfix000000/Images/spinUp.png') no-repeat;
        display: inline-block;
        height: 20px;
        position: absolute;
        top: 0;
        width: 22px;
    }

    .dvScore .jspinner .jspins .jspindown {
        background: transparent url('https://static.peoplehr.net/202506198-hotfix000000/Images/spinDown.png') no-repeat;
        display: inline-block;
        height: 20px;
        position: absolute;
        top: 20px;
        width: 22px;
    }

/* Password Strength indicator
============================================================ */
.pstrength-bar {
    border-radius: 3px;
    margin-top: 10px;
}

.pstrength-info {
    margin: 5px 0px;
}

.pstrength-minchar {
    display: none;
}

.passposition .pstrength-bar, .passposition .pstrength-info {
    margin-left: 130px;
    max-width: 77% !important;
}

/* Autocomplete, Suggestions, Tags, Filter
============================================================ */
.text-core {
    display: block;
    float: left;
}

.text-label {
    color: #666666;
    font-size: 11px;
}

.text-button {
    background: #D9EDF7 url('https://static.peoplehr.net/202506198-hotfix000000/Images/imgautocomplete.png') no-repeat left top !important;
    padding-left: 30px !important;
}

/* Tooltips
============================================================ */
.form div.divtool.toolnotright300 + span.tipyinfo {
    left: 300px;
    top: -19px;
}

    .form div.divtool.toolnotright300 + span.tipyinfo:after {
        top: 42%;
    }

    .form div.divtool.toolnotright300 + span.tipyinfo:before {
        top: 42%;
    }

.form.tool table.tooltable + span.tipyinfo.focus,
.form.tool .divtool + span.tipyinfo.focus,
.form.tool span.icnchange + span.tipyinfo.changepending.focus {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
}

span.tipyinfo {
    background-color: #FCF8E3;
    border: 2px solid #FBEED5;
    border-radius: 4px;
    color: #C09853;
    display: inline-block;
    font-size: 11px;
    line-height: 18px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    padding: 10px;
    position: absolute;
    right: 0;
    -webkit-transition: visibility 0s linear 0.3s;
    -moz-transition: visibility 0s linear 0.3s;
    -o-transition: visibility 0s linear 0.3s;
    -ms-transition: visibility 0s linear 0.3s;
    transition: visibility 0s linear 0.3s;
    top: -3px;
    visibility: hidden;
    width: 150px;
    z-index: 10;
}

    span.tipyinfo.top40 {
        top: 40px;
    }

    span.tipyinfo.bottom {
        left: 0;
    }

        span.tipyinfo.bottom.bottom40 {
            top: 40px;
        }

        span.tipyinfo.bottom.bottom60 {
            top: 60px;
        }

        span.tipyinfo.bottom.bottom110 {
            top: 110px;
        }

        span.tipyinfo.bottom.bottom140 {
            top: 140px;
        }

    span.tipyinfo.w130 {
        width: 130px;
    }

    span.tipyinfo.w220 {
        width: 220px;
    }

    span.tipyinfo.r100 {
        right: 100px;
    }

    span.tipyinfo.changepending {
        border: 1px solid #AECEEC;
        background-color: #D9EDF7;
        color: #3399CC;
        line-height: 14px;
    }

        span.tipyinfo.changepending:before {
            border-right-color: #AECEEC;
        }

        span.tipyinfo.changepending:after {
            border-right-color: #D9EDF7;
        }

    span.tipyinfo.tooltipinputbtn {
        right: -200px;
        top: -5px;
    }

    span.tipyinfo.tooltipinputbtn-short {
        right: -78px;
        top: -5px;
    }

    span.tipyinfo.popupsignup {
        right: -200px;
        top: 33px;
    }

    span.tipyinfo.popupsignup2 {
        right: -200px;
        top: 24px;
    }

    span.tipyinfo:not(.bottom):after,
    span.tipyinfo:not(.bottom):before {
        right: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    span.tipyinfo:not(.bottom):after {
        border-right-color: #FCF8E3;
        border-width: 10px;
        top: 18px;
        margin-top: -10px;
    }

    span.tipyinfo:not(.bottom):before {
        border-right-color: #FBEED5;
        border-width: 12px;
        top: 18px;
        margin-top: -12px;
    }

    span.tipyinfo.bottom:after,
    span.tipyinfo.bottom:before {
        bottom: 100%;
        left: 20%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    span.tipyinfo.bottom:after {
        border-color: rgba(252, 248, 227, 0);
        border-bottom-color: #fcf8e3;
        border-width: 10px;
        margin-left: -10px;
    }

    span.tipyinfo.bottom:before {
        border-color: rgba(251, 238, 213, 0);
        border-bottom-color: #fbeed5;
        border-width: 12px;
        margin-left: -12px;
    }

/*	Tooltip Button information	*/
.divtool + .button {
    position: relative;
}

span.tipyinfo.infobutton {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
    width: 280px;
}

    span.tipyinfo.infobutton:after, span.tipyinfo.infobutton:before {
        left: 100%;
    }

    span.tipyinfo.infobutton:after {
        border-left-color: #FCF8E3;
        border-right-color: transparent;
        border-width: 10px;
        top: 18px;
        margin-top: -10px;
    }

    span.tipyinfo.infobutton:before {
        border-left-color: #FBEED5;
        border-right-color: transparent;
        border-width: 12px;
        top: 18px;
        margin-top: -12px;
    }

.form div.divtool + span.tipyinfo.infobutton {
    right: 170px;
    bottom: 18px;
    top: auto;
}

    .form div.divtool + span.tipyinfo.infobutton:after {
        top: 44%;
    }

    .form div.divtool + span.tipyinfo.infobutton:before {
        top: 44%;
    }

ul.tabs .nosaved {
    position: relative;
}

    ul.tabs .nosaved:after {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') 0 -1736px;
        content: '';
        position: absolute;
        top: -10px;
        right: 40px;
        height: 23px;
        width: 22px;
    }

.form .error span.tipyinfo {
    display: none;
}

    .form .error span.tipyinfo.toolerror {
        background-color: #FFE3E3;
        border: 1px solid #FFAAAA;
        color: #FF7C85;
        display: block;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1px;
        visibility: visible;
        top: 0px;
    }

span.tipyinfo.toolerror:after {
    border-right-color: #FFE3E3;
}

span.tipyinfo.toolerror:before {
    border-right-color: #FFAAAA;
}

.form .error span.tipyinfo.toolerror {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9;
}

.form .error input.text, .form .error textarea, .form .error div.selector, .form .error div.chzn-container, td input.inputerror, .form .thanksComment .error, .form .error .tagsinput {
    border: 1px solid #FFAAAA;
    -webkit-box-shadow: 1px 1px 6px #FFE3E3, -1px -1px 6px #FFE3E3;
    box-shadow: 1px 1px 6px #FFE3E3, -1px -1px 6px #FFE3E3;
}

.tderror {
    background: #FCF8E3 !important;
    border: 1px solid #FBEED5;
}

.warning {
    background: #FCF8E3;
    border: 1px solid #FBEED5;
    border-radius: 4px;
    color: #BF9852;
    margin-bottom: 20px;
    padding: 10px 30px 10px 10px;
    position: relative;
}

    .warning:after, .warning:before {
        bottom: -12px;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        content: "";
        left: 10px;
        position: absolute;
    }

    .warning:after {
        border-top: 12px solid #FCF8E3;
        content: "";
    }

    .warning:before {
        border-top: 12px solid #FBEED5;
        bottom: -13px;
        content: "";
    }

    .warning .icnclose {
        position: absolute;
        right: 10px;
        top: 15px;
    }

.errorinline {
    background: #FFE3E3;
    border: 1px solid #FFAAAA;
    border-radius: 4px;
    color: #FF7C85;
    margin-bottom: 20px;
    padding: 5px 30px 5px 10px;
    position: relative;
}

    .errorinline:after, .errorinline:before {
        bottom: -12px;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        content: "";
        left: 10px;
        position: absolute;
    }

    .errorinline:after {
        border-top: 12px solid #FFE3E3;
        content: "";
    }

    .errorinline:before {
        border-top: 12px solid #FFAAAA;
        bottom: -13px;
        content: "";
    }

    .errorinline .icnclose {
        position: absolute;
        right: 10px;
        top: 15px;
    }


.kooltip .tooltip > section {
    background-color: #FFFFFF;
    border: 1px solid #CBCBCB;
    overflow: hidden;
    margin-bottom: 0px;
    padding: 14px;
}

    .kooltip .tooltip > section p {
        line-height: 20px;
    }

    .kooltip .tooltip > section.infodoc p:first-child {
        font-size: 16px;
    }

    .kooltip .tooltip > section.infodoc p:nth-child(2) {
        margin-bottom: 10px;
    }

    .kooltip .tooltip > section.infodoc ul.inline {
        margin-top: 20px;
        width: 350px;
    }

        .kooltip .tooltip > section.infodoc ul.inline li a.button {
            width: 39px;
        }

    .kooltip .tooltip > section p.tooldelete {
        border-top: 1px solid #CBCBCB;
        margin-top: 10px;
        padding-top: 10px;
    }

        .kooltip .tooltip > section p.tooldelete a {
            float: right;
        }

/* Dropdown
============================================================ */
.menudropdown li {
    height: 30px;
    line-height: 30px;
    margin: 10px;
    padding: 0 10px 0 12px;
    position: relative;
}

    .menudropdown li.hover {
        background: #FFFFFF;
        border: 1px solid #C8C8C8;
        border-bottom: none;
        position: relative;
        padding: 0px 10px;
        top: -1px;
        left: 1px;
    }

        .menudropdown li.hover:before {
            background: #FFF;
            content: '';
            display: block;
            height: 2px;
            position: absolute;
            bottom: -1px;
            left: 0px;
            width: 100%;
            z-index: 9999;
        }

@media only screen and (min-width : 768px) {
    .menudropdown li:hover {
        background: #FFFFFF;
        border: 1px solid #C8C8C8;
        border-bottom: none;
        position: relative;
        padding: 0px 10px;
        top: -1px;
        left: 1px;
    }

        .menudropdown li:hover:before {
            background: #FFF;
            content: '';
            display: block;
            height: 2px;
            position: absolute;
            bottom: -1px;
            left: 0px;
            width: 100%;
            z-index: 9999;
        }
}

.menudropdown li > a {
    height: 30px;
}

.menudropdown li a {
    display: block;
    outline: 0;
}

.dropdownoptions {
    background-color: #FFFFFF;
    border: 1px solid #C8C8C8;
    float: left;
    position: absolute;
    left: -999em; /* Hides the drop down */
    text-align: left;
    width: 380px;
    z-index: 9000;
}

    .dropdownoptions .w200 {
        width: 200px !important;
    }

    .dropdownoptions .w250 {
        width: 250px !important;
    }

    .dropdownoptions a.uncheck {
        display: block;
        float: right;
        margin-right: 10px;
    }

    .dropdownoptions nav {
        clear: both;
    }

        .dropdownoptions nav a {
            color: #666666;
            border-bottom: 1px solid #F6F6F6;
            line-height: 20px;
            padding: 8px 10px;
            position: relative;
            -webkit-transition: background linear 0.2s;
            -moz-transition: background linear 0.2s;
            -o-transition: background linear 0.2s;
            -ms-transition: background linear 0.2s;
            transition: background linear 0.2s;
        }

        .dropdownoptions nav.select a {
            padding: 8px 10px 8px 30px;
        }

            .dropdownoptions nav.select a:before {
                background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') no-repeat;
                background-position: 0 -2124px;
                content: '';
                height: 13px;
                margin-right: 8px;
                position: absolute;
                left: 10px;
                top: 11px;
                width: 12px;
            }

        .dropdownoptions nav a.check:before {
            background-position: 0 -1040px;
        }

        .dropdownoptions nav a:last-child {
            border-bottom: none;
        }

        .dropdownoptions nav a:hover {
            background-color: #F6F6F6;
            -webkit-box-shadow: inset 0px 1px #FFFFFF, inset 0px -1px #FFFFFF;
            box-shadow: inset 0px 1px #FFFFFF, inset 0px -1px #FFFFFF;
            text-shadow: 1px 1px #FFFFFF;
        }

    .dropdownoptions.w200 {
        width: 200px;
    }

    .dropdownoptions.w140 {
        width: 140px !important;
    }

.menudropdown li:hover .publicholidaytemplate {
    left: -1px;
    top: auto;
    height: 200px;
    overflow-y: scroll;
    overflow: auto;
}

.menudropdown li:hover .dropdownoptions {
    left: -1px;
    top: auto;
}

.dropdownoptions.displayleft {
    right: -999em;
}

.menudropdown li:hover .dropdownoptions.displayleft {
    right: -1px;
    top: auto;
    left: auto;
}

/* Dropdown Notifications
============================================================ */
.dropnoti li {
    height: 30px;
    padding: 0px 10px;
    position: relative;
}

    .dropnoti li:hover {
        background-color: #212328;
        -webkit-box-shadow: 1px 1px 3px #212328, -1px -1px 3px #212328;
        box-shadow: 1px 1px 3px #212328, -1px -1px 3px #212328;
        position: relative;
        padding: 0px 10px;
    }

    .dropnoti li > a {
        color: #FFF;
        height: 30px;
    }

    .dropnoti li a {
        display: block;
        outline: 0;
    }

    .dropnoti li > a span.icn_drop {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icn_dropdown.png') no-repeat right center;
        padding-left: 16px;
    }

    .dropnoti li:hover > a span.icn_drop {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icn_dropdownh.png') no-repeat right center;
    }

.optionsnoti {
    background-color: #212328;
    float: left;
    position: absolute;
    right: -999em; /* Hides the drop down */
    text-align: left;
    width: 240px;
    z-index: 9000;
}

    .optionsnoti nav a {
        color: #FFFFFF;
        border-bottom: 1px solid #4E5460;
        line-height: 20px;
        padding: 8px 10px;
        -webkit-transition: background linear 0.2s;
        -moz-transition: background linear 0.2s;
        -o-transition: background linear 0.2s;
        -ms-transition: background linear 0.2s;
        transition: background linear 0.2s;
    }

        .optionsnoti nav a.editnoti {
            background-color: #588DBB;
            box-shadow: inset 1px 1px #6BAEE8;
            -webkit-box-shadow: inset 1px 1px #6BAEE8;
            color: #FFFFFF;
            text-shadow: -1px -1px #4C7AA1;
        }

            .optionsnoti nav a.editnoti:hover {
                background-color: #66A4D9;
            }

        .optionsnoti nav a:last-child {
            border-bottom: none;
        }

        .optionsnoti nav a span {
            font-size: 10px;
            float: right;
        }

        .optionsnoti nav a:hover {
            background-color: #3A3D41;
        }

.dropnoti li:hover .optionsnoti {
    right: -1px;
    top: 30px;
}

/* Menu Dropdown Profile
======================================================= */
.dropprofile {
    list-style-type: none;
}

    .dropprofile.fix {
        position: absolute;
        right: 40px;
        top: 20px;
    }

    .dropprofile > li {
        display: block;
        float: left;
        height: 22px;
        list-style: none;
        position: relative;
    }

    .dropprofile li:last-child {
        margin-right: 0;
        border-right: 0;
    }

    .dropprofile > li:hover {
        color: #FFFFFF;
    }

    .dropprofile li a {
        color: #ffffff;
        display: block;
        font-size: 12px;
        line-height: 22px;
        padding: 0 10px;
        margin: 0;
        text-decoration: none;
    }

    .dropprofile ul {
        opacity: 0;
        position: absolute;
        right: 9999;
        top: 20px;
        width: 120px;
        display: none;
    }

    .dropprofile li:hover > ul {
        background-color: #212328;
        opacity: 1;
        z-index: 1;
    }

    .dropprofile ul li {
        height: 0;
        overflow: hidden;
        padding: 0;
    }

    .dropprofile > li:hover > ul {
        opacity: 1;
        z-index: 1;
        background-color: #212328;
        right: 0;
        display: block;
    }

    .dropprofile ul li {
        height: 0;
        overflow: hidden;
        padding: 0;
    }

    .dropprofile li:hover > ul li {
        height: 25px;
        padding: 0;
    }

    .dropprofile ul li a {
        border: none;
        margin: 0;
    }

        .dropprofile ul li a:hover {
            color: #FFFFFF;
        }

ul.dropprofileoptions li a {
    font-size: 11px;
}

    ul.dropprofileoptions li a:hover {
        background-color: #3A3D41;
        color: #FFFFFF;
        font-size: 11px;
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;
        -ms-transition: background 0.5s linear;
        transition: background 0.5s linear;
    }

.dropprofileoptions {
    background-color: #464c60 !important;
}

span.icn_drop {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icn_dropdown.png') no-repeat right center;
    display: inline-block;
    height: 6px;
    padding-left: 10px;
    width: 7px;
}

ul.noti {
    right: 9999px;
    width: 240px;
}

    ul.noti li {
        border-bottom: 1px solid #4E5460;
        height: 33px !important;
    }

        ul.noti li:last-child {
            border-bottom: none;
        }

        ul.noti li a {
            border-bottom: 1px solid #4E5460;
            color: #FFFFFF;
            line-height: 17px;
            padding: 8px 10px;
            -webkit-transition: background 0.2s linear;
            -moz-transition: background 0.2s linear;
            -o-transition: background 0.2s linear;
            -ms-transition: background 0.2s linear;
            transition: background 0.2s linear 0s;
        }

            ul.noti li a:hover {
                color: #ffffff;
                background-color: #3A3D41;
            }

        ul.noti li span {
            float: right;
            font-size: 11px;
        }

        ul.noti li a.editnoti {
            background-color: #588DBB;
            box-shadow: inset 1px 1px #6BAEE8;
            -webkit-box-shadow: inset 1px 1px #6BAEE8;
            color: #FFFFFF;
            text-shadow: -1px -1px #4C7AA1;
        }

            ul.noti li a.editnoti:hover {
                background-color: #66A4D9;
            }


/* Notifications
============================================================ */
table.style3 {
    border: 1px solid #EDEDED;
    border-top: none;
}

    table.style3 tbody tr td {
        border-bottom: 1px dotted #CCCCCC;
        padding: 20px 60px !important;
    }

        table.style3 tbody tr td p {
            line-height: 14px;
            font-size: 12px;
            position: relative;
        }

            table.style3 tbody tr td p:last-child {
                font-weight: bold;
                color: #AAAAAA;
            }

            table.style3 tbody tr td p.phone:after {
                background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png');
                background-position: -82px -1937px;
                content: "";
                height: 15px;
                left: -37px;
                position: absolute;
                top: 5px;
                width: 15px;
            }

            table.style3 tbody tr td p.money:after {
                background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png');
                background-position: -86px -1961px;
                content: "";
                height: 15px;
                left: -36px;
                position: absolute;
                top: 5px;
                width: 11px;
            }

            table.style3 tbody tr td p.document:after {
                background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png');
                background-position: -84px -1986px;
                content: "";
                height: 15px;
                left: -37px;
                position: absolute;
                top: 5px;
                width: 15px;
            }

        table.style3 tbody tr td img {
            margin-right: 13px;
        }

        table.style3 tbody tr td a {
            color: #4C92B8;
            font-weight: bold;
        }

    table.style3 tbody tr.header td {
        padding: 0 0 0 10px !important;
    }

        table.style3 tbody tr.header td:hover {
            background: none !important;
        }

    table.style3 tbody tr.header {
        background: rgb(237,237,237); /* Old browsers */
        background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        border: 1px solid #D0D0D0;
        color: #666666;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        height: 20px;
        line-height: 20px;
        text-shadow: 1px 1px #FFFFFF;
        padding-right: 15px;
        padding-left: 8px;
    }

/* Authorization
============================================================ */

.typeinput {
    border: 1px solid #CBCBCB;
    border-radius: 3px;
    padding: 10px;
    padding-bottom: 6px;
    -ms-overflow-y: scroll;
    overflow-y: scroll;
}

ul.sameholidays li {
    background-color: #D9EDF7;
    border: 1px solid #BDE8F1;
    border-radius: 3px 3px 3px 3px;
    float: left;
    font-weight: bold;
    margin-right: 5px;
    line-height: 24px;
    margin-bottom: 5px;
    padding-right: 10px;
    min-width: 125px;
}

    ul.sameholidays li img,
    ul.sameholidaysgreen li img,
    ul.sameholidaysred li img, ul.sameholidaysblue li img {
        margin-right: 7px;
    }


ul.sameholidaysgreen, ul.sameholidaysblue, ul.sameholidaysred {
    grid-template-columns: 1fr 2fr 0.5fr;
    align-items: center;
    margin-bottom: 5px;
}
    .description

{
    margin-right: 1em;
}

.status {
    text-align: end;
}

ul.sameholidaysgreen {
    background-color: #DFF0D8;
    border: 1px solid #AADFB2;
    padding: 11px;
}

ul.sameholidaysred {
    background-color: #F2DEDE;
    border: 1px solid #F2B5B0;
    float: left;
    padding: 11px;
}

ul.sameholidaysgreen li:first-child {
    background-color: #FFFFFF;
    border: 1px solid #AADFB2;
    border-radius: 3px 3px 3px 3px;
    float: left;
    margin-right: 5px;
    padding-right: 4px;
    min-width: 155px;
}

ul.sameholidaysred li:first-child {
    background-color: #FFFFFF;
    border: 1px solid #F2B5B0;
    border-radius: 3px 3px 3px 3px;
    float: left;
    margin-right: 5px;
    padding-right: 10px;
    min-width: 170px;
}

ul.sameholidaysgreen li:last-child {
    color: #7FA98A;
}

    ul.sameholidaysgreen li:last-child span {
        font-weight: bold;
    }

ul.sameholidaysred li:last-child {
    color: #AA7F7D;
}

    ul.sameholidaysred li:last-child span {
        font-weight: bold;
    }

.tooltipread {
    background-color: #F3F3F3;
    border: 1px solid #CBCBCB;
    border-radius: 3px;
    padding: 10px;
    position: relative;
    width: 160px;
}

    .tooltipread:after,
    .tooltipread:before {
        bottom: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .tooltipread:after {
        border-color: rgba(243, 243, 243, 0);
        border-bottom-color: #f3f3f3;
        border-width: 10px;
        left: 20%;
        margin-left: -10px;
    }

    .tooltipread:before {
        border-color: rgba(203, 203, 203, 0);
        border-bottom-color: #CBCBCB;
        border-width: 11px;
        left: 20%;
        margin-left: -11px;
    }


/* News Feed and Thanks section
============================================================ */
.newsfeedandthanks {
    overflow: hidden;
    margin-bottom: 40px;
}

    .newsfeedandthanks .messagecomments {
        margin-bottom: 20px;
    }

        .newsfeedandthanks .messagecomments .comment,
        .modalcomments .comment,
        .modaladdcomments .comment {
            border: 1px solid #CBCBCB;
            border-radius: 3px;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            clear: both;
            margin-bottom: 20px;
            padding: 10px;
        }

            .newsfeedandthanks .messagecomments .comment textarea,
            .modalcomments .comment textarea,
            .modaladdcomments .comment textarea {
                border: none;
                clear: both;
                height: 70px;
                padding: 0;
                width: 100%;
            }

                .newsfeedandthanks .messagecomments .comment textarea:focus,
                .modalcomments .comment textarea:focus,
                .modaladdcomments .comment textarea:focus {
                    -webkit-box-shadow: none;
                    box-shadow: none;
                }

            .newsfeedandthanks .messagecomments .comment ul.options,
            .modalcomments .comment ul.options,
            .modaladdcomments .comment ul.options {
                float: left;
                margin-bottom: 10px;
            }

                .newsfeedandthanks .messagecomments .comment ul.options li,
                .modalcomments .comment ul.options li,
                .modaladdcomments .comment ul.options li {
                    display: block;
                    float: left;
                }

                    .newsfeedandthanks .messagecomments .comment ul.options li a,
                    .modalcomments .comment ul.options li a,
                    .modaladdcomments .comment ul.options li a {
                        border-radius: 0;
                        border-right: none;
                    }

                    .newsfeed .messagecomments .comment ul.options li:first-child a,
                    .modalcomments .comment ul.options li:first-child a,
                    .modaladdcomments .comment ul.options li:first-child a {
                        border-top-left-radius: 3px;
                        border-bottom-left-radius: 3px;
                    }

                    .newsfeedandthanks .messagecomments .comment ul.options li:last-child a,
                    .modalcomments .comment ul.options li:last-child a,
                    .modaladdcomments .comment ul.options li:last-child a {
                        border-right: 1px solid #D0D0D0;
                        border-top-right-radius: 3px;
                        border-bottom-right-radius: 3px;
                    }

.messagecomments .left {
    position: relative;
    top: -7px;
}

    .messagecomments .left label.checkbox {
        display: block;
        float: none;
        margin-bottom: 5px;
    }

.newsfeedandthanks .thread {
    border-bottom: 1px dotted #999999;
    clear: both;
    margin-bottom: 20px;
    overflow: hidden;
    padding-bottom: 20px;
}

    .newsfeedandthanks .thread:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .newsfeedandthanks .thread img {
        float: left;
        margin-right: 20px;
    }

    .newsfeedandthanks .thread .mainthread {
        overflow: hidden;
    }

        .newsfeedandthanks .thread .mainthread .comments {
            background-color: #EBF9FF;
            border: 1px solid #D8F1FF;
            border-radius: 3px;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
            float: left;
            max-width: 750px;
            margin-bottom: 20px;
            padding: 8px 10px;
            position: relative;
            width: 752px;
        }

.continfo.w720 .newsfeedandthanks .thread .mainthread .comments {
    width: 640px;
}

.newsfeedandthanks .thread .mainthread .comments:after,
.newsfeedandthanks .thread .mainthread .comments:before {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.newsfeedandthanks .thread .mainthread .comments:after {
    border-color: rgba(235, 249, 255, 0);
    border-right-color: #EBF9FF;
    border-width: 10px;
    top: 20px;
    margin-top: -10px;
}

.newsfeedandthanks .thread .mainthread .comments:before {
    border-color: rgba(216, 241, 255, 0);
    border-right-color: #D8F1FF;
    border-width: 11px;
    top: 20px;
    margin-top: -11px;
}

.newsfeedandthanks .thread .comments a.underline {
    margin-left: 6px;
}

    .newsfeedandthanks .thread .comments a.underline.cantcomments {
        font-weight: 700;
    }

.newsfeedandthanks .thread .subthread {
    clear: both;
    margin-bottom: 20px;
    padding-left: 56px;
}

    .newsfeedandthanks .thread .subthread:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .newsfeedandthanks .thread .subthread:last-child {
        margin-bottom: 0;
    }

    .newsfeedandthanks .thread .subthread .comments {
        float: left;
        max-width: 710px;
    }

.continfo.w720 .newsfeedandthanks .thread .subthread .comments {
    max-width: 590px;
}

.newsfeedandthanks .thread .messagecomments {
    padding-left: 55px;
}

.comments .textcomment {
    margin-top: 4px;
    padding: 6px;
    clear: both;
}

    .comments .textcomment.goalComment {
        margin-right: 90px;
    }

.mainthread .comments .textcomments {
    border: 1px solid #EBF9FF;
}

.subthread .comments .textcomments {
    border: 1px solid #FFFFFF;
}

.comments .textcomment.textcommentedit {
    background-color: #FFFFFF;
    border-color: rgba(82, 168, 236, 0.8);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px rgba(82, 186, 236, 0.6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 6px rgba(82, 186, 236, 0.6);
    outline: 0 none;
    border-radius: 4px;
}

.comments a.btnsave, .comments a.btncancel, .comments a.btnSaveComment, .comments a.btnCancelComment {
    display: none;
}

.tooltipblue {
    background: #EBF9FF;
    border: 1px solid #D8F1FF;
    border-radius: 3px;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    color: #3385B2;
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px 10px 15px;
    line-height: 20px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px #FFFFFF;
}

    .tooltipblue > * {
        color: #3385B2 !important;
    }

    .tooltipblue a:hover {
        text-decoration: underline;
    }

    .tooltipblue:after, .tooltipblue:before {
        bottom: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .tooltipblue:after {
        border-color: rgba(235, 249, 255, 0);
        border-bottom-color: #EBF9FF;
        border-width: 10px;
        left: 20%;
        margin-left: -10px;
    }

    .tooltipblue:before {
        border-color: rgba(216, 241, 255, 0);
        border-bottom-color: #D8F1FF;
        border-width: 11px;
        left: 20%;
        margin-left: -11px;
    }

.newsfeedandthanks .actions {
    border-bottom: 1px solid #EDEDED;
    overflow: hidden;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.newsfeedandthanks .givethanks + .actions {
    border-top: 1px solid #EDEDED;
    padding-top: 30px;
}

.newsfeedandthanks .actions li {
    display: block;
    float: left;
    margin-right: 35px;
}

.continfo.w720 .newsfeedandthanks .actions li {
    margin-right: 50px;
}

.newsfeedandthanks .actions li .withborder p {
    clear: both;
    font-size: 13px;
    line-height: 20px;
    padding-left: 35px;
    position: relative;
    text-align: left;
}

.newsfeedandthanks .actions li:last-child, .continfo.w720 .newsfeedandthanks .actions li:last-child {
    margin-right: 0;
}

.newsfeedandthanks .actions li label {
    line-height: 30px;
}

.newsfeedandthanks .actions li p img {
    left: 0;
    position: absolute;
    top: 0;
}

.newsfeedandthanks .actions li .withborder, .statistics .actions li .withborder {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
    float: left;
    padding: 10px;
    text-align: center;
    width: 130px;
}

.newsfeedandthanks .actions li .withborder {
    overflow: hidden;
    padding: 15px;
    width: 300px;
}

    .newsfeedandthanks .actions li .withborder div.left {
        margin-right: 10px;
        max-width: 141px;
    }

    .newsfeedandthanks .actions li .withborder div.right {
        max-width: 140px;
        margin-top: 11px;
    }

.statistics .actions li .withborder span {
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.newsfeedandthanks .actions li .withborder span.cantthanks {
    margin-right: 10px;
}

.newsfeedandthanks .actions li .withborder span {
    display: block;
    float: left;
    font-weight: 700;
    line-height: 17px;
    text-align: left;
}

    .newsfeedandthanks .actions li .withborder span:not(.cantthanks) {
        max-width: 97px;
    }

    .newsfeedandthanks .actions li .withborder span.cantthanks, .statistics .actions li .withborder span:first-child {
        font-size: 28px;
        font-weight: normal;
        line-height: 28px;
    }

.statistics .actions li .withborder span {
    display: block;
}

    .statistics .actions li .withborder span:first-child {
        margin-top: 9px;
    }

li.popularthanks {
    width: auto !important;
}

.popularthanks i {
    display: block;
    float: left;
    font-size: 24px;
    font-style: normal;
    line-height: 24px;
    margin-right: 18px;
    position: relative;
}

    .popularthanks i:last-child {
        margin-right: 0;
    }

    .popularthanks i img {
        bottom: -28px;
        left: 50%;
        margin-left: -12.5px;
        position: absolute;
    }

.popularthanks label {
    float: none;
    width: auto;
}

.givethanks {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 20px;
}

    .givethanks .info {
        float: left;
        max-width: 90%;
    }

.continfo .givethanks .info {
    max-width: 81%;
}

.givethanks .info .title {
    font-size: 15px;
    font-weight: 700;
    text-shadow: 1px 1px #FFFFFF;
}

.givethanks a.button {
    float: right;
    font-size: 12px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
}

.badgescarousel {
    height: 213px;
    margin-bottom: 20px;
    padding: 0 41px;
    position: relative;
}

@media only screen and (min-width : 768px) {
    div.divThanksCarousel {
        width: 576px;
    }

    .badgescarousel a.thanksNext {
        left: 636px;
    }
}

.modalwin .caroufredsel_wrapper {
    min-width: 570px;
}

.badgescarousel li {
    background: rgb(237,237,237); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    border-radius: 3px;
    border: 1px solid #D0D0D0;
    display: block;
    float: left;
    margin-right: 10px;
    padding: 8px 15px;
    position: relative;
    height: 195px;
    text-align: center;
    width: 102px;
}

.modalchooseone .caroufredsel_wrapper {
    min-width: 586px;
}

.modalchooseone .badgescarousel {
    height: 100px;
    padding: 0px 32px;
}

    .modalchooseone .badgescarousel li {
        height: auto;
        padding: 0;
        text-align: center;
        width: 107px;
    }

        .modalchooseone .badgescarousel li > a {
            display: block;
            padding: 10px 15px;
        }

.badgescarousel li.active, .badgescarousel li.active .btninfo {
    background: #EBF9FF;
    border-color: rgba(82, 168, 236, 0.8);
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.075) inset, 0px 0px 6px rgba(82,186,236,0.6);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.075) inset, 0px 0px 6px rgba(82,186,236,0.6);
}

.modalchooseone .badgescarousel li > a > img {
    display: inline-block;
    vertical-align: middle;
}

.modalchooseone .badgescarousel a.prev,
.modalchooseone .badgescarousel a.next,
.modalchooseone .badgescarousel a.prev.disabled,
.modalchooseone .badgescarousel a.next.disabled {
    top: 42px;
}

.badgescarousel li .img {
    background-color: #FFFFFF;
    border: 1px solid #D0D0D0;
    display: block;
    margin-bottom: 8px;
    padding: 10px;
}

    .badgescarousel li .img img {
        display: block;
    }

.badgescarousel li p {
    line-height: 15px;
    font-weight: 700;
}


.badgescarousel li a.btninfo {
    background: rgb(237,237,237); /* Old browsers */
    background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
    background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: 1px solid #D0D0D0;
    color: #333333;
    font-weight: 700;
    height: 38px;
    line-height: 38px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.badgescarousel a.prev,
.badgescarousel a.next,
.badgescarousel a.prev.disabled,
.badgescarousel a.next.disabled {
    background: url(https://static.peoplehr.net/202506198-hotfix000000/images/spritesheet.png) no-repeat top left;
    display: block;
    position: absolute;
    top: 85px;
    height: 22px;
    width: 14px;
}

    .badgescarousel a.prev, .badgescarousel a.prev.disabled {
        left: 0px;
        background-position: 0 -1151px;
    }

    .badgescarousel a.next, .badgescarousel a.next.disabled {
        right: 0px;
        background-position: 0 -1182px;
    }

        .badgescarousel a.prev.disabled, .badgescarousel a.next.disabled {
            cursor: default;
            opacity: 0.5;
        }

        .badgescarousel a.prev span, .badgescarousel a.next span {
            display: none;
        }

.badgescarousel .badgespag {
    text-align: center;
}


.divpreview {
    overflow: hidden;
    margin-bottom: 20px;
}

    .divpreview .infoemployee {
        display: block;
        float: left;
        margin-right: 20px;
        margin-bottom: 10px;
        text-align: center;
        width: 150px;
    }

        .divpreview .infoemployee img {
            margin-bottom: 10px;
        }

    .divpreview .commentandbadges {
        overflow: hidden;
    }

        .divpreview .commentandbadges .left {
            margin-right: 20px;
            width: 100px;
        }

        .divpreview .commentandbadges .bggray {
            overflow: hidden;
        }

            .divpreview .commentandbadges .bggray .left {
                text-align: center;
            }

                .divpreview .commentandbadges .bggray .left img {
                    display: inline-block;
                    margin-bottom: 10px;
                }

                .divpreview .commentandbadges .bggray .left span {
                    display: inline-block;
                    font-weight: 700;
                }

        .divpreview .commentandbadges p.comment {
            float: left;
            width: 330px;
        }

.modalaboutbadge label.block {
    line-height: 24px;
}

.modalaboutbadge .badgeinfo {
    border-bottom: 1px solid #CBCBCB;
    overflow: hidden;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

    .modalaboutbadge .badgeinfo .img {
        background-color: #EEEEEE;
        border: 1px solid #CACAD9;
        border-radius: 3px;
        float: left;
        margin-right: 20px;
        text-align: center;
    }

        .modalaboutbadge .badgeinfo .img img {
            display: inline-block;
            padding: 15px;
            vertical-align: middle;
        }

    .modalaboutbadge .badgeinfo .left {
        width: 182px;
    }

.modalaboutbadge .skills {
    float: left;
    margin-bottom: 0;
    margin-left: 20px;
    margin-right: 0;
    max-width: 315px;
}

    .modalaboutbadge .skills p {
        margin-bottom: 10px;
    }

    .modalaboutbadge .skills ul li {
        display: inline-block;
        margin-bottom: 8px;
    }

.modalaboutbadge .statistics {
    overflow: hidden;
    text-align: center;
}

.statistics .actions {
    display: inline-block;
    overflow: hidden;
    margin-bottom: 20px;
}

    .statistics .actions li {
        display: block;
        float: left;
        margin-right: 20px;
    }

        .statistics .actions li:last-child {
            margin-right: 0;
        }

        .statistics .actions li .withborder {
            margin-right: 0;
            height: 65px;
            max-width: 120px;
        }

.statistics label {
    margin-bottom: 10px;
}

.thanksinuse.w100 {
    margin-bottom: 20px;
    width: auto !important;
}

.modalselectperson .chzn-container {
    margin-bottom: 20px;
    width: 320px !important;
}

.modalselectperson .chzn-container-multi .chzn-choices {
    max-height: 145px;
    -ms-overflow-y: scroll;
    overflow-y: scroll;
}

.modalselectperson .chzn-container .chzn-drop {
    width: 318px !important;
}

.listpersonselected {
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    padding: 10px;
    clear: both;
    overflow: hidden;
    margin: 20px 0px;
}
    /* Thanks Preview Screen - Start - Updated below css as insted od ul and li table tr td is used in development */
    .listpersonselected table tbody {
        border: 0 !important;
    }

    .listpersonselected table tr td {
        background-color: #F1F1F1;
        border-bottom: 1px solid #CCCCCC;
        border-right: 0 !important;
        font-size: 11px;
        line-height: 25px;
        -webkit-transition: background linear 0.2s;
        -moz-transition: background linear 0.2s;
        -o-transition: background linear 0.2s;
        -ms-transition: background linear 0.2s;
        transition: background linear 0.2s;
    }

        .listpersonselected table tr td:hover {
            background-color: #D9EDF7;
        }

        .listpersonselected table tr td:last-child {
            border-right: 0;
        }

    .listpersonselected table tr:last-child td {
        border-bottom: 0 !important;
    }

    .listpersonselected table tr td a {
        color: #666666;
        display: block;
        font-weight: 700;
    }

        .listpersonselected table tr td a img {
            display: block;
            float: left;
            margin-right: 10px;
        }
/* Thanks Preview Screen - End */

.choosebadge .left .block {
    margin-bottom: 5px;
}

/* Skills Section
============================================================ */
table.skill {
    margin-bottom: 20px;
}

    table.skill tr th {
        font-weight: 700;
    }

    table.skill tr td, table.skill tr th {
        text-align: center;
    }

    table.skill thead tr th:first-child {
        text-align: left;
    }

    table.skill tbody tr td:first-child {
        text-align: left;
    }

.notfound {
    background-color: #D8EDF6;
    border-top: 1px solid #A2C9D3;
    border-bottom: 1px solid #A2C9D3;
    padding: 20px 0px;
    text-align: center;
    width: 100%;
}

    .notfound p {
        color: #7A979F;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
        max-width: 400px;
        margin: 0 auto 20px;
    }

        .notfound p:last-child {
            margin-bottom: 0px;
        }

        .notfound p.title {
            font-weight: bold;
            font-size: 15px;
            margin-bottom: 20px;
            max-width: auto;
        }

    .notfound span.spritesheet {
        margin-bottom: 20px;
    }


/* Performance Reviews
============================================================ */
.reviewtitle {
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
}

.titleprincipal {
    font-weight: 700;
    margin-bottom: 40px;
    text-transform: uppercase;
    text-align: center;
}

span.activereview {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    display: inline-block;
    font-weight: 700;
    height: 21px;
    line-height: 22px;
    padding: 0px 10px;
}

    span.activereview.true {
        background-color: #DFF0D8;
        border: 1px solid #AADFB2;
    }

.optionblue {
    background-color: #E4F2F9;
    border-bottom: 1px solid #A2C9D3;
    height: 80px;
}

    .optionblue ul li {
        border-right: 1px solid #A2C9D3;
        -webkit-box-shadow: -1px 0px #FFFFFF inset;
        box-shadow: -1px 0px #FFFFFF inset;
        display: block;
        float: left;
        height: 80px;
        position: relative;
        width: 150px;
    }

        .optionblue ul li a {
            color: #3385B2;
            display: block;
            font-size: 11px;
            font-weight: 700;
            height: 73px;
            padding-top: 7px;
            text-align: center;
            text-shadow: 1px 1px #FFFFFF;
            text-transform: uppercase;
        }

            .optionblue ul li a span.spritesheet {
                display: block;
                margin: 0 auto 10px;
            }

            .optionblue ul li a.current {
                background-color: #ECF8FD;
            }

.divreview {
    margin-bottom: 40px;
    margin-top: 40px;
}

.containerperformance .divreview {
    margin-top: 0;
}
/* Added new css for performance comparison screen blank state : Start */
.containerperformance .blankstate, .containerflexibenefits .blankstate {
    background-color: #FFFFFF;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    margin: 0 auto;
    margin-top: 40px;
    padding: 40px;
    text-align: center;
    width: 430px;
}

    .containerperformance .blankstate span, .containerflexibenefits .blankstate span {
        margin-bottom: 10px;
    }

    .containerperformance .blankstate p, .containerflexibenefits .blankstate p {
        font-size: 14px;
        line-height: 22px;
        text-align: center;
        margin: 0 auto 20px;
    }

        .containerperformance .blankstate p:last-child, .containerflexibenefits .blankstate p:last-child {
            margin-bottom: 0px;
        }

.containerperformance p.title, .containerflexibenefits p.title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 20px;
    max-width: auto;
}
/* Added new css for performance comparison screen blank state : End */


.divreview ul.reviewruning,
.divreview ul.reviewfinished {
    overflow: hidden;
    margin: 0 auto;
    margin-left: 50px;
}

    .divreview ul.reviewruning > li {
        border-top: 1px solid #CCCCCC;
        display: block;
        padding: 0px 20px;
        position: relative;
        height: auto;
        min-height: 120px;
    }

    .divreview ul.reviewfinished > li {
        border-top: 1px solid #CCCCCC;
        display: block;
        min-height: 60px;
        overflow: hidden;
        padding: 0 20px 15px;
        position: relative;
    }

    .divreview ul.reviewruning > li.inforeview {
        cursor: pointer;
    }

        .divreview ul.reviewruning > li.inforeview.arrow:after,
        .divreview ul.reviewfinished > li.infopastreview.arrow:after {
            background: url("https://static.peoplehr.net/202506198-hotfix000000/images/spritesheet.png") no-repeat -91px -1345px;
            content: "";
            height: 12px;
            position: absolute;
            right: 40px;
            transition: all linear 0.2s;
            -webkit-transition: all linear 0.2s;
            -moz-transition: all linear 0.2s;
            -o-transition: all linear 0.2s;
            -ms-transition: all linear 0.2s;
            width: 6px;
        }

        .divreview ul.reviewruning > li.inforeview.arrow:after {
            top: 49%;
        }

    .divreview ul.reviewfinished > li.infopastreview.arrow:after {
        top: 45%;
    }

    .divreview ul.reviewruning > li.inforeview.arrow:hover:after,
    .divreview ul.reviewfinished > li.infopastreview.arrow:hover:after {
        right: 30px;
    }

    .divreview ul.reviewfinished > li.infopastreview .tag {
        float: left;
        margin-left: 20px;
        margin-top: 23px;
    }

    .divreview ul.reviewruning > li:last-child,
    .divreview ul.reviewfinished > li:last-child {
        border-bottom: 1px solid #CCCCCC;
    }

    .divreview ul.reviewruning > li .percent {
        background-color: #DFF0D8;
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        width: 0px;
        z-index: 0;
    }

    .divreview ul.reviewruning > li .blankpercent {
        background-color: #F3F3F3;
        position: absolute;
        left: 0px;
        top: 0px;
        height: 120px;
        width: 100%;
        z-index: 0;
    }

    .divreview ul.reviewruning > li .info {
        overflow: hidden;
        position: relative;
        padding: 20px 0px 10px 0px;
        z-index: 1;
    }

        .divreview ul.reviewruning > li .info span.spritesheet.icnreview {
            display: block;
            float: left;
            margin: 20px 30px 0px 20px;
        }

        .divreview ul.reviewruning > li .info .img {
            border-radius: 100%;
            display: block;
            float: left;
            margin: 4px 23px 0px 0px;
            overflow: hidden;
            height: 74px;
            width: 74px;
        }

            .divreview ul.reviewruning > li .info .img > img {
                max-width: 74px;
            }

    .divreview ul.reviewfinished > li span.spritesheet.icnreview2,
    .divreview ul.reviewfinished > li .img {
        display: block;
        float: left;
        margin: 10px 20px 0px 0px;
    }

    .divreview ul.reviewfinished > li span.spritesheet.icnreview2 {
        margin: 14px 22px 0 3px;
    }

    .divreview ul.reviewfinished > li .img {
        overflow: hidden;
        height: 50px;
        width: 50px;
    }

    .divreview ul.reviewfinished > li .img {
        max-width: 50px;
    }

    .divreview ul.reviewruning > li .info ul.inline {
        display: block;
        float: left;
        width: 490px;
    }

        .divreview ul.reviewruning > li .info ul.inline.numberinfo li {
            margin-bottom: 15px;
        }

        .divreview ul.reviewruning > li .info ul.inline li {
            margin-right: 10px;
        }

            .divreview ul.reviewruning > li .info ul.inline li:last-child {
                margin-right: 0px;
            }

    .divreview ul.reviewruning > li .info ul span.numbig {
        display: block;
        float: left;
        font-size: 37px;
        line-height: 37px;
    }

    .divreview ul.reviewruning > li .info ul span.icn {
        font-size: 11px;
        font-weight: 700;
        margin: 0px 6px 5px;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .divreview ul.reviewruning > li .info ul span.type {
        display: block;
        float: left;
        font-weight: 700;
        line-height: 14px;
        margin-left: 6px;
        max-width: 66px;
        padding-top: 18px;
        position: relative;
    }

    .divreview ul.reviewfinished > li {
        transition: background linear 0.2s;
        -webkit-transition: background linear 0.2s;
        -moz-transition: background linear 0.2s;
        -o-transition: background linear 0.2s;
        -ms-transition: background linear 0.2s;
    }

        .divreview ul.reviewfinished > li.infopastreview:hover {
            background-color: #F3F9FF;
        }

        .divreview ul.reviewfinished > li .reviewtitle {
            margin-top: 25px;
        }

        .divreview ul.reviewfinished > li span.complete {
            font-size: 12px;
            font-weight: normal;
            margin-left: 50px;
            margin-top: 30px;
            position: relative;
        }

            .divreview ul.reviewfinished > li span.complete:after {
                left: -29px;
                position: absolute;
                top: -4px;
            }

        .divreview ul.reviewfinished > li .reviewby {
            color: #666666;
            line-height: 19px;
            margin-top: 16px;
            width: 185px;
        }

            .divreview ul.reviewfinished > li .reviewby span {
                font-size: 14px;
                font-weight: bold;
            }

    .divreview ul.reviewruning > li.newreview {
        background-color: #F3F3F3;
        height: auto !important;
        padding: 0px;
        transition: background linear 0.2s;
        -webkit-transition: background linear 0.2s;
        -moz-transition: background linear 0.2s;
        -o-transition: background linear 0.2s;
        -ms-transition: background linear 0.2s;
    }

        .divreview ul.reviewruning > li.newreview:hover {
            background-color: #FAFAFA;
        }

        .divreview ul.reviewruning > li.newreview:active {
            background-color: #ECECEC;
        }

        .divreview ul.reviewruning > li.newreview a {
            color: #666666;
            display: block;
            font-size: 14px;
            font-weight: 700;
            height: 100%;
            line-height: 122px;
            padding: 0 20px;
            width: 100%;
        }

            .divreview ul.reviewruning > li.newreview a span.spritesheet {
                display: block;
                float: left;
                margin-right: 20px;
                margin-top: 42px;
            }

    .divreview ul.reviewruning.employeeFlexiBenefitStatus {
        margin-left: 0;
    }

ul.reviewdescription {
    border: 1px solid #D0D0D0;
    overflow: hidden;
}

    ul.reviewdescription li {
        border-bottom: 1px solid #EDEDED;
        overflow: hidden;
        padding: 20px;
    }

        ul.reviewdescription li:last-child {
            border-bottom: none;
        }

        ul.reviewdescription li img.badge {
            float: left;
            margin-right: 20px;
        }

        ul.reviewdescription li div.left {
            width: 420px;
        }

        ul.reviewdescription li .title {
            font-size: 16px;
            line-height: 20px !important;
            margin-bottom: 5px;
        }

        ul.reviewdescription li p {
            line-height: 17px !important;
        }

        ul.reviewdescription li div.right {
            width: 180px;
        }

    ul.reviewdescription div.right a.button {
        margin-bottom: 30px;
    }

    ul.reviewdescription div.right > * {
        float: right;
    }

.divreview ul.reviewruning li.backtoreview,
.divreview ul.reviewfinished li.backtoreview {
    height: 50px;
    line-height: 50px;
    padding: 0px 40px;
    position: relative;
    transition: background linear 0.2s;
    -webkit-transition: background linear 0.2s;
    -moz-transition: background linear 0.2s;
    -o-transition: background linear 0.2s;
    -ms-transition: background linear 0.2s;
}

    .divreview ul.reviewruning li.backtoreview:hover,
    .divreview ul.reviewfinished li.backtoreview:hover {
        background-color: #F6F6F6;
    }

    .divreview ul.reviewruning li.backtoreview:active,
    .divreview ul.reviewfinished li.backtoreview:active {
        background-color: #EAEAEA;
    }

    .divreview ul.reviewruning li.backtoreview a,
    .divreview ul.reviewfinished li.backtoreview a {
        color: #999999;
        display: block;
        font-weight: 700;
        font-size: 11px;
        height: 50px;
        line-height: 51px;
    }

    .divreview ul.reviewruning li.backtoreview:after,
    .divreview ul.reviewfinished li.backtoreview:after {
        background: url("https://static.peoplehr.net/202506198-hotfix000000/images/spritesheet.png") no-repeat -91px -1502px;
        content: "";
        height: 11px;
        position: absolute;
        left: 20px;
        top: 20px;
        width: 6px;
    }

.divreview ul.reviewruning li.description,
.divreview ul.reviewfinished li.description {
    border-bottom: none;
    padding: 20px;
    height: auto;
}

    .divreview ul.reviewruning li.description p,
    .divreview ul.reviewfinished li.description p {
        margin-bottom: 10px;
    }

    .divreview ul.reviewruning li.description .checkactivity,
    .divreview ul.reviewfinished li.description .checkactivity {
        font-size: 11px;
        font-weight: 700;
        line-height: 32px;
    }

        .divreview ul.reviewruning li.description .checkactivity a,
        .divreview ul.reviewfinished li.description .checkactivity a {
            color: #666666;
            text-decoration: underline;
        }

ul.reviewdescription span.activereview {
    margin-bottom: 10px;
}

table span.tag.medium {
    display: block;
    text-align: center;
}

/* Performance Segments
============================================================ */
.continternalreview .contentcarouselsegment, .continternalreview .optionstabemployee, .continternalreview ul.tabs2, .continternalreview .continfo {
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}

.contentcarouselsegment .caroufredsel {
    float: left !important;
}

.contentcarouselsegment .caroufredsel_wrapper {
    min-width: 100%;
}

.contentcarouselsegment > .overviewsegment {
    border-right: 1px solid #FFFFFF;
    display: block;
    float: left;
    line-height: 85px;
    height: 85px;
    text-align: center;
    width: 135px;
}

    .contentcarouselsegment > .overviewsegment a {
        background-color: #F39C12;
        border-radius: 0;
        -webkit-box-shadow: 0px -1px #FFFFFF inset;
        box-shadow: 0px -1px #FFFFFF inset;
        display: inline-block;
        height: 86px;
        padding: 0;
        text-align: center;
        vertical-align: middle;
        width: 100%;
    }

.continfo.overviewseg div.block {
    margin: 0 auto 20px;
    max-width: 690px;
}

.contentcarouselsegment .carouselsegment {
    overflow: hidden;
    height: 90px !important;
}

    .contentcarouselsegment .carouselsegment li {
        display: block;
        float: left;
        height: 85px;
        position: relative;
        width: 144px;
    }

a.divseg {
    -webkit-box-shadow: 0px -1px #FFFFFF inset;
    box-shadow: 0px -1px #FFFFFF inset;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffffff;
    display: block;
    font-weight: 700;
    height: 86px;
    min-height: 86px;
    padding: 7px 15px;
    text-align: left;
    -webkit-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    -o-transition: all linear 0.2s;
    -ms-transition: all linear 0.2s;
    transition: all linear 0.2s;
}

.contentcarouselsegment .carouselsegment li a.one {
    background-color: #A0D9CB;
}

.contentcarouselsegment .carouselsegment li a.two {
    background-color: #AADFB7;
}

.contentcarouselsegment .carouselsegment li a.three,
.contentcarouselsegment .carouselsegment li a.segment3 {
    background-color: #1ABC9C;
}

.contentcarouselsegment .carouselsegment li a.four {
    background-color: #F39C12;
}

.contentcarouselsegment .carouselsegment li a.five {
    background-color: #E67E22;
}

.contentcarouselsegment .carouselsegment li a.six {
    background-color: #D35400;
}

.contentcarouselsegment .carouselsegment li a.seven,
.contentcarouselsegment .carouselsegment li a.segment1 {
    background-color: #349FE5;
    border-right: 1px solid #FFFFFF;
}

.contentcarouselsegment .carouselsegment li a.eight {
    background-color: #F39C12;
}

.contentcarouselsegment .carouselsegment li a.nine,
.contentcarouselsegment .carouselsegment li a.segment2 {
    background-color: #1ABC9C;
    border-right: 1px solid #FFFFFF;
}

.contentcarouselsegment .carouselsegment li a.ten {
    background-color: #E67E22;
}

.contentcarouselsegment .carouselsegment li a span.number {
    display: block;
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 3px;
}

.contentcarouselsegment .carouselsegment li a.divseg span.number > span.spritesheet {
    margin-left: 10px;
}

.contentcarouselsegment .carouselsegment li a.divseg span {
    color: #FFFFFF;
}

a.divseg.segment1:hover, a.divseg.segment1.current {
    -webkit-box-shadow: 0px -1px #FFFFFF inset, 1px 1px 7px #1F608D inset, -1px -1px 7px #1F608D inset;
    box-shadow: 0px -1px #FFFFFF inset, 1px 1px 7px #1F608D inset, -1px -1px 7px #1F608D inset;
}

a.divseg.segment2:hover, a.divseg.segment2.current {
    -webkit-box-shadow: 0px -1px #FFFFFF inset, 1px 1px 7px #107965 inset, -1px -1px 7px #107965 inset;
    box-shadow: 0px -1px #FFFFFF inset, 1px 1px 7px #107965 inset, -1px -1px 7px #107965 inset;
}

.overviewsegment:hover a.divseg {
    -webkit-box-shadow: 0px -1px #FFFFFF inset, 1px 1px 7px #C87F0C inset, -1px -1px 7px #C87F0C inset;
    box-shadow: 0px -1px #FFFFFF inset, 1px 1px 7px #C87F0C inset, -1px -1px 7px #C87F0C inset;
}


.optionstabemployee {
    background-color: #F3F3F3;
    border-bottom: 1px solid #CCCCCC;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    height: 45px;
    overflow: hidden;
    padding: 0px 10px;
    position: relative;
}

.optionstabemployee {
    color: #333333;
    font-size: 14px;
    text-align: center;
}

    .optionstabemployee p {
        display: inline-block;
        line-height: 46px;
    }

    .optionstabemployee a.prev,
    .optionstabemployee a.next,
    .optionstabemployee a.prev.disabled,
    .optionstabemployee a.next.disabled {
        margin-top: 6px;
        padding: 0px 20px;
    }

        .optionstabemployee a.prev.disabled, .optionstabemployee a.next.disabled {
            background: rgb(153,153,153);
            background: -moz-linear-gradient(top, rgba(153,153,153,1) 0%, rgba(102,102,102,1) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,153,153,1)), color-stop(100%,rgba(102,102,102,1)));
            background: -webkit-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(102,102,102,1) 100%);
            background: -o-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(102,102,102,1) 100%);
            background: -ms-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(102,102,102,1) 100%);
            background: linear-gradient(to bottom, rgba(153,153,153,1) 0%,rgba(102,102,102,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#666666',GradientType=0 );
            border: 1px solid #6A6A6A;
            -webkit-box-shadow: inset 0px 1px #B5B5B5;
            box-shadow: inset 0px 1px #B5B5B5;
            color: #FFFFFF;
            text-shadow: -1px 1px #6A6A6A;
        }

            .optionstabemployee a.prev span, .optionstabemployee a.next span, .optionstabemployee a.prev.disabled span, .optionstabemployee a.next.disabled span {
                color: #FFFFFF;
                display: block;
                font-size: 30px;
                line-height: 30px;
                text-shadow: -1px -1px #31475C;
            }

@media all and (-webkit-min-device-pixel-ratio: 0) {
    .optionstabemployee a.prev span, .optionstabemployee a.next span, .optionstabemployee a.prev.disabled span, .optionstabemployee a.next.disabled span {
        line-height: 26px;
    }
}
/* Tabs2
============================================================ */
ul.tabs2 {
    background-color: #F3F3F3;
    border-bottom: 1px solid #CCCCCC;
    height: 45px;
    overflow: hidden;
    position: relative;
}

    ul.tabs2 > li:not(.performancebuttons) {
        border-right: 1px solid #CCCCCC;
        -webkit-box-shadow: 1px 1px #FFFFFF inset;
        box-shadow: 1px 1px #FFFFFF inset;
        display: block;
        float: left;
        line-height: 45px;
    }

    ul.tabs2 > li > a {
        color: #666666;
        display: block;
        font-weight: 700;
        padding: 0px 35px;
        text-transform: uppercase;
        text-align: center;
    }

        ul.tabs2 > li > a span.spritesheet {
            margin: 0px 5px;
        }

        ul.tabs2 > li > a:hover {
            background: rgb(107,160,206); /* Old browsers */
            background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
            -webkit-box-shadow: none;
            box-shadow: none;
            color: #FFFFFF;
            text-shadow: -1px 1px #446B8E;
            position: relative;
        }

        ul.tabs2 > li > a:active, ul.tabs2 > li > a.current {
            background: rgb(107,160,206); /* Old browsers */
            background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
            -webkit-box-shadow: none;
            box-shadow: none;
            color: #FFFFFF;
            text-shadow: -1px 1px #446B8E;
            position: relative;
        }

    ul.tabs2 > li.performancebuttons {
        position: absolute;
        right: 10px;
        top: 6px;
    }

        ul.tabs2 > li.performancebuttons ul {
            display: inline-block;
            margin-right: 0 !important;
        }

/* Tabs with numbers
============================================================ */
ul.tabnumbers {
    display: inline-block;
    margin-bottom: 10px;
}

.modalresponses ul.tabnumbers {
    margin-bottom: 15px;
}

ul.tabnumbers > li {
    display: block;
    float: left;
    margin-right: 15px;
    position: relative;
}

.modalresponses ul.tabnumbers > li {
    margin-right: 20px;
}

ul.tabnumbers > li:last-child {
    margin-right: 0;
}

ul.tabnumbers > li.complete:after {
    background: url("https://static.peoplehr.net/202506198-hotfix000000/images/spritesheet.png") repeat -157px -1046px;
    content: "";
    display: inline-block;
    height: 14px;
    left: 17px;
    position: absolute;
    top: -5px;
    width: 14px;
}

ul.tabnumbers > li > a {
    background-color: #CCCCCC;
    border: 2px solid #FFFFFF;
    border-radius: 100%;
    display: block;
    height: 39px;
    line-height: 33px;
    padding: 2px;
    width: 39px;
}

    ul.tabnumbers > li.current > a,
    ul.tabnumbers > li > a.current {
        background-color: #54A7DB;
    }

    ul.tabnumbers > li > a span {
        background-color: #CCCCCC;
        border: 3px solid #FFFFFF;
        border-radius: 100%;
        color: #FFFFFF;
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        height: 33px;
        line-height: 35px;
        vertical-align: middle;
        width: 33px;
    }

    ul.tabnumbers > li.current > a span,
    ul.tabnumbers > li > a.current span {
        background-color: #54A7DB;
    }

.modalresponses .conttab {
    padding-bottom: 0;
}

.segments {
    overflow: hidden;
    min-height: 620px;
    position: relative;
}

.titlesegment {
    color: #666666;
    font-family: 'bebas_neueregular';
    font-size: 20px;
    line-height: 29px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.modalresponses .titlesegment {
    font-size: 21px;
    line-height: 21px;
}

.titlequestion {
    color: #333333;
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    line-height: 34px;
    margin-bottom: 20px;
    max-width: 680px;
    text-shadow: 1px 1px #FFFFFF;
}

.modalresponses .titlequestion {
    font-size: 24px;
    line-height: 24px;
}

.divanswer.readonly {
    background-color: #F3F3F3 !important;
}

    .divanswer.readonly textarea {
        background-color: #F3F3F3;
    }

.contsegmentquestions {
    clear: both;
}

    .contsegmentquestions .divanswer, .modalresponses .divanswer {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 3px;
        padding: 10px 10px 0 10px;
        position: relative;
        margin: 0 auto 40px;
        height: 230px;
        width: 670px;
    }

.modalresponses .divanswer {
    height: 200px;
    width: 97%;
}

    .contsegmentquestions .divanswer textarea, .modalresponses .divanswer textarea {
        border: medium none;
        clear: both;
        height: 150px;
        margin-bottom: 10px;
        padding: 0;
        width: 100%;
    }

    .modalresponses .divanswer textarea {
        height: 130px;
    }

        .contsegmentquestions .divanswer textarea:focus, .modalresponses .divanswer textarea:focus {
            box-shadow: none;
        }

    .contsegmentquestions .divanswer .divnextquestion, .modalresponses .divanswer .divnextquestion {
        background-color: #EDEDED;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        bottom: 0;
        height: 52px;
        position: absolute;
        left: 0;
        width: 100%;
    }

        .contsegmentquestions .divanswer .divnextquestion a.button.right,
        .modalresponses .divanswer .divnextquestion a.button.right {
            margin: 10px 20px 0px 0px;
        }

        .contsegmentquestions .divanswer .divnextquestion a.button.left,
        .modalresponses .divanswer .divnextquestion a.button.left {
            margin: 10px 0px 0px 20px;
        }

.nextandprev {
    margin: 0 auto;
    max-width: 505px;
}

/*Answer Slider
============================================================*/
.contslider {
    margin: 0 auto;
    min-height: 60px;
}

    .contslider label {
        color: #666666;
        font-weight: 700;
        margin-left: -46px;
        margin-top: 17px;
        position: absolute;
        text-align: center;
        text-shadow: 1px 1px #ffffff;
        width: 100px;
    }

        .contslider label span {
            background: #fff none repeat scroll 0 0;
            border: 1px solid #ccc;
            display: none;
            font-size: 11px;
            line-height: 15px;
            -webkit-transition: all linear 0.2s;
            -moz-transition: all linear 0.2s;
            -o-transition: all linear 0.2s;
            -ms-transition: all linear 0.2s;
            transition: all linear 0.2s;
            padding: 5px;
        }

        .contslider label:hover span {
            display: block;
        }

    .contslider .ui-widget-content {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        -webkit-box-shadow: 0 1px 2px #CCCCCC inset;
        box-shadow: 0 1px 2px #CCCCCC inset;
        color: #222222;
    }

    .contslider .ui-slider-horizontal {
        border-radius: 3px;
        height: 5px;
        margin: 0;
    }

        .contslider .ui-slider-horizontal .ui-slider-range-min {
            background-color: #D8633F;
            box-shadow: none;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
            left: 0;
        }

    .contslider .ui-slider {
        display: inline-block;
        margin-right: 10px;
        max-width: 700px;
        position: relative;
        width: 94%;
        z-index: 2;
    }

    .contslider .ui-state-default, .contslider .ui-widget-content .ui-state-default, .contslider .ui-widget-header .ui-state-default {
        border-radius: 3px;
        border: none !important;
        background: #D8633F !important;
        background: -moz-linear-gradient(top,rgba(216,99,63,1) 0,rgba(216,99,63,1) 100%) !important;
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(216,99,63,1)),color-stop(100%,rgba(216,99,63,1))) !important;
        background: -webkit-linear-gradient(top,rgba(216,99,63,1) 0,rgba(216,99,63,1) 100%) !important;
        background: -o-linear-gradient(top,rgba(216,99,63,1) 0,rgba(216,99,63,1) 100%) !important;
        background: -ms-linear-gradient(top,rgba(216,99,63,1) 0,rgba(216,99,63,1) 100%) !important;
        background: linear-gradient(top,rgba(216,99,63,1) 0,rgba(216,99,63,1) 100%) !important;
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#D8633F',endColorstr='#D8633F',GradientType=0) !important
    }

.ui-state-disabled, .ui-widget-content .ui-state-disabled {
    opacity: 1 !important;
}

.contslider .ui-slider-horizontal .ui-slider-handle {
    margin-left: -6px !important;
    top: -7px;
}

.contslider .ui-slider .ui-slider-handle {
    border-radius: 100%;
    cursor: default;
    height: 20px;
    position: absolute;
    width: 20px;
    z-index: 2;
}

.modalerrorshare p {
    font-size: 17px;
    line-height: 20px;
}

    .modalerrorshare p span {
        margin-right: 10px;
        top: 6px;
    }

/* Accordeon Performance
============================================================*/
.accordeonperformance {
    border-bottom: 1px solid #C5CDCF;
}

    .accordeonperformance .accordeon {
        background-color: #E1E1E1;
        border: 1px solid #C5CDCF;
        border-bottom: none;
        color: #666666;
        font-size: 14px;
        font-weight: 600;
        text-shadow: 1px 1px #FFFFFF;
        padding: 15px 20px;
        position: relative;
        line-height: 25px;
        text-align: left;
    }

        .accordeonperformance .accordeon:after {
            background: url("../images/iconaccordeon.png") no-repeat right top;
            content: "";
            height: 10px;
            position: absolute;
            right: 20px;
            top: 20px;
            width: 18px;
        }

        .accordeonperformance .accordeon.active {
            background: rgb(107,160,206); /* Old browsers */
            background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
            border: 1px solid #4a7fad;
            border-bottom: none;
            color: #FFFFFF;
            text-shadow: -1px 1px #446B8E;
        }

            .accordeonperformance .accordeon.active:after {
                background: url('../images/iconaccordeonactive.png') no-repeat right top;
            }

    .accordeonperformance .cont_accor {
        border: 1px solid #C5CDCF;
        border-bottom: none;
        padding: 20px;
        text-align: left;
        margin-bottom: 0px !important;
    }

        .accordeonperformance .cont_accor p {
            color: #5F5F5F;
            font-size: 13.5px;
            line-height: 22px;
        }

    .accordeonperformance .contslider {
        max-width: 400px;
        min-height: 75px;
    }


/* Reviews 360
============================================================ */
.modalnewinvite .chzn-container {
    margin-bottom: 20px;
    width: 320px !important;
}

.modalnewinvite .chzn-container-multi .chzn-choices {
    max-height: 145px;
    -ms-overflow-y: scroll;
    overflow-y: scroll;
}

.modalnewinvite .chzn-container .chzn-drop {
    width: 318px !important;
}

/* ============================= Ripple : Starts ============================= */

.ripplecontainer .linkadd {
    margin-bottom: 0;
}

.ripplecontainer .create {
    position: relative;
}

    .ripplecontainer .create .eachstep {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 3px;
        margin-bottom: 15px;
        overflow: hidden;
        padding: 15px 20px;
        position: relative;
    }

        .ripplecontainer .create .eachstep.color1 {
            box-shadow: 0 3px #A9C1D9 inset;
        }

        .ripplecontainer .create .eachstep.color2 {
            box-shadow: 0 3px #4ECDC4 inset;
        }

        .ripplecontainer .create .eachstep.color3 {
            box-shadow: 0 3px #C7F464 inset;
        }

        .ripplecontainer .create .eachstep.color4 {
            box-shadow: 0 3px #FF6B6B inset;
        }

        .ripplecontainer .create .eachstep.color5 {
            box-shadow: 0 3px #C44D58 inset;
        }

        .ripplecontainer .create .eachstep.ui-sortable-helper {
            background-color: #EDFAFF;
        }

        .ripplecontainer .create .eachstep p.title {
            float: left;
            font-size: 15px;
            font-weight: bold;
            line-height: 22px;
            max-width: 600px;
        }

        .ripplecontainer .create .eachstep ul.inline {
            font-weight: bold;
            position: absolute;
            right: 10px;
            top: 20px;
        }

            .ripplecontainer .create .eachstep ul.inline a {
                color: #666666;
                font-weight: bold;
            }

                .ripplecontainer .create .eachstep ul.inline a:hover {
                    text-decoration: underline;
                }

        .ripplecontainer .create .eachstep p {
            font-size: 13px;
        }

/* ============================= Ripple : Ends ============================= */


/* Goals
============================================================ */
.divgoals .headerstyle2 {
    margin-bottom: 20px;
}

.contgoals .left.w520 {
    max-width: 520px;
    width: 100%;
}

.progress {
    background-color: #cdcdcd;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 3px #666666 inset;
    box-shadow: 1px 1px 3px #666666 inset;
    display: block;
    height: 10px;
    margin: 0 auto;
    max-width: 200px;
    width: 100%;
}

.progress2 {
    background-color: #cdcdcd;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 3px #666666 inset;
    box-shadow: 1px 1px 3px #666666 inset;
    display: block;
    float: left;
    height: 17px;
    margin: 0 auto;
    position: relative;
    width: 100px;
}

    .progress > span:not(.value),
    .progress2 > span:not(.value) {
        border-radius: 5px;
        background: rgb(107,160,206); /* Old browsers */
        background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
        display: block;
        float: left;
        height: 100%;
    }

    .progress2 span.value {
        color: #fff;
        display: block;
        font-size: 11px;
        height: 20px;
        left: 0;
        line-height: 17px;
        position: absolute;
        text-align: center;
        top: 0;
        width: 100%;
        z-index: 10;
    }

.graphgoals {
    float: left;
    height: 400px;
    margin-bottom: 70px;
    margin-left: 50px;
    position: relative;
    width: 438px;
}

    .graphgoals .axisx {
        bottom: -45px;
        font-size: 11px;
        font-weight: 600;
        left: 0;
        position: absolute;
        width: 400px;
    }

        .graphgoals .axisx > span {
            display: block;
            font-size: 15px;
            padding-top: 18px;
            text-align: center;
            width: 100%;
        }

        .graphgoals .axisx i {
            display: block;
            float: left;
            font-size: 11px;
            font-style: normal;
            font-weight: 600;
            text-align: center;
            width: 132px;
        }

    .graphgoals .axisy {
        font-size: 11px;
        font-weight: 600;
        height: 361px;
        left: -63px;
        line-height: 20px;
        padding: 20px 0;
        position: absolute;
        text-align: right;
        top: 0;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

        .graphgoals .axisy > span {
            display: block;
            font-size: 15px;
            text-align: center;
            width: 100%;
        }

        .graphgoals .axisy i {
            display: block;
            float: left;
            font-style: normal;
            text-align: center;
            width: 132px;
        }


    .graphgoals .gridlines {
        background-color: #CCCCCC;
        -webkit-box-shadow: 1px 1px #FFFFFF;
        box-shadow: 1px 1px #FFFFFF;
        display: none;
        position: absolute;
        z-index: 0;
    }

    .graphgoals .drag-item {
        cursor: move;
        position: absolute;
        line-height: 23px;
        width: 100px;
        z-index: 1;
    }

        .graphgoals .drag-item i {
            border-radius: 100%;
            background: rgb(107,160,206); /* Old browsers */
            background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
            display: block;
            float: left;
            margin-right: 5px;
            height: 20px;
            width: 20px;
            z-index: 1;
        }

    .graphgoals .grid {
        height: 402px;
        position: relative;
        width: 480px;
    }

    .graphgoals .drop-target {
        background-color: #F1F1F1;
        display: block;
        float: left;
        height: 400px;
        width: 400px;
    }

.textpgraph {
    background-color: #f3f3f3;
    border: 1px solid #cccccc;
    border-radius: 3px;
    display: block;
    float: left;
    max-width: 100%;
    overflow: hidden;
    padding: 20px;
    margin: 70px 0px;
    width: 300px;
}

    .textpgraph p.title {
        color: #666;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 10px;
    }

/* System Settings Performance and Flexible Benefits
============================================================ */
.settingsperformance_benefits {
    overflow: auto;
    padding-bottom: 40px;
}

    .settingsperformance_benefits .heading p {
        clear: both;
        float: left;
        max-width: 475px;
    }

.modalwin .settingsperformance_benefits {
    min-height: auto;
}

.settingsperformance_benefits {
    overflow: hidden;
    padding-bottom: 0px !important;
}

.contentwhite.settingsperformance_benefits .heading p {
    max-width: 100%;
}

.settingsperformance_benefits .heading ul.inline p {
    padding-left: 0;
    margin-top: 3px;
}

.settingsperformance_benefits .heading ul.inline label.checkbox {
    margin-top: 6px;
}

.fieldsoverallscore .divtool {
    width: 550px;
}

.settingsperformance .numscore {
    display: block;
    float: left;
    font-weight: bold;
    line-height: 40px;
    margin-left: 10px;
}

.settingsperformance .createsegments {
    position: relative;
}

.settingsperformance_benefits .create {
    position: relative;
}

    .settingsperformance .createsegments .eachsegment,
    .settingsperformance_benefits .create .eachsegment,
    .settingsperformance_benefits .create .eachbenefit {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 3px;
        margin-bottom: 15px;
        overflow: hidden;
        padding: 15px;
        position: relative;
    }

        .settingsperformance .createsegments .eachsegment.ui-sortable-helper,
        .settingsperformance_benefits .create .eachsegment.ui-sortable-helper,
        .settingsperformance_benefits .create .eachbenefit.ui-sortable-helper {
            background-color: #EDFAFF;
        }

        .settingsperformance .createsegments .eachsegment p.title,
        .settingsperformance_benefits .create .eachbenefit p.title {
            float: left;
            font-size: 16px;
            font-weight: bold;
            line-height: 25px;
            max-width: 600px;
        }

        .settingsperformance_benefits .create .eachsegment p.title {
            float: left;
            font-size: 15px;
            font-weight: bold;
            line-height: 25px;
            max-width: 600px;
        }

        .settingsperformance .createsegments .eachsegment p.title {
            margin-bottom: 10px;
        }

        .settingsperformance_benefits .create .eachsegment p.title {
            margin-bottom: 10px;
        }

        .settingsperformance_benefits .create .eachbenefit p.title {
            margin-bottom: 0;
        }

        .settingsperformance .createsegments .eachsegment ul.inline,
        .settingsperformance_benefits .create .eachsegment ul.inline,
        .settingsperformance_benefits .create .eachbenefit ul.inline {
            font-weight: bold;
            position: absolute;
            right: 10px;
            top: 20px;
        }

            .settingsperformance .createsegments .eachsegment ul.inline a,
            .settingsperformance_benefits .create .eachsegment ul.inline a,
            .settingsperformance_benefits .create .eachbenefit ul.inline a {
                color: #666666;
                font-weight: bold;
            }

                .settingsperformance .createsegments .eachsegment ul.inline a:hover,
                .settingsperformance_benefits .create .eachsegment ul.inline a:hover,
                .settingsperformance_benefits .create .eachbenefit ul.inline a:hover {
                    text-decoration: underline;
                }

        .settingsperformance .createsegments .eachsegment p,
        .settingsperformance_benefits .create .eachbenefit p {
            font-size: 13px;
        }


.linkadd {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    color: #666666;
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 15px;
    -webkit-transition: background linear 0.2s;
    -moz-transition: background linear 0.2s;
    -o-transition: background linear 0.2s;
    -ms-transition: background linear 0.2s;
    transition: background linear 0.2s;
    text-align: center;
}

    .linkadd:hover {
        background-color: #FDFDFD;
    }

    .linkadd:active {
        background-color: #E1E1E1;
    }

.linkaddvideo {
    margin-top: 10px !important;
    text-align: center;
    float: left;
    width: 96%;
}

.divaddquestion,
.divaddoption {
    margin-bottom: 10px;
}

    .divaddquestion .eachquestion,
    .divaddoption .eachoption {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 3px;
        min-height: 20px;
        padding: 15px;
        position: relative;
    }

    .divaddquestion.ui-sortable-helper .eachquestion,
    .divaddoption.ui-sortable-helper .eachoption {
        background-color: #EDFAFF;
    }

    .divaddquestion .eachquestion p.title,
    .divaddoption .eachoption p.title {
        font-size: 13px;
        margin-bottom: 0;
        max-width: 520px;
    }

    .divaddquestion .eachquestion ul.inline,
    .divaddoption .eachoption ul.inline {
        font-weight: bold;
        position: absolute;
        top: 20px;
        right: 10px;
    }

        .divaddquestion .eachquestion ul.inline a,
        .divaddquestion .eachquestion ul.inline a {
            color: #666666;
        }

    .divaddquestion .cont_accor,
    .divaddoption .cont_accor {
        margin: 10px 0px;
        position: relative;
    }

        .divaddquestion .cont_accor .linkadd,
        .divaddoption .cont_accor .linkadd {
            margin-bottom: 0px;
            padding: 10px;
        }

        .divaddquestion .cont_accor .removeaddquestion,
        .divaddoption .cont_accor .removeaddoption {
            position: absolute;
            right: 18px;
            top: 10px;
        }

    .divaddquestion.formaddquestion > .cont_accor,
    .divaddoption.formaddoption > .cont_accor {
        padding-top: 30px;
    }

.form.tool.fieldsoverallscore .tooldate {
    right: -130px;
}

.form.tool.fieldsoverallscore .block {
    max-width: 680px;
}

.modalbenefitoptions .bgwhite {
    margin-right: 0 !important;
    width: 470px;
}

/* 360 review
============================================================ */
.review360 > p.inline {
    font-size: 13px;
    margin-bottom: 20px;
}

.review360 .eachsegment {
    clear: both;
}

.review360 p.question {
    font-weight: 700;
    font-size: 18px !important;
    line-height: 24px;
}

.review360 .divanswer {
    background-color: #F1F1F1;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    margin: 10px 0 auto;
    overflow: hidden;
    padding: 10px;
    position: relative;
}

    .review360 .divanswer textarea {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        clear: both;
        height: 120px;
        padding: 10px;
        width: 100%;
    }

    .review360 .divanswer .contslider {
        margin: 20px auto;
        max-width: 396px;
        min-height: 50px;
    }

.review360 .eachsegment .divquestion {
    margin-bottom: 20px;
}

.review360 .message360form {
    background-color: #f1f1f1;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    clear: both;
    padding: 40px 60px;
    text-align: center;
}

    .review360 .message360form img {
        margin-bottom: 20px;
    }

    .review360 .message360form p.title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        text-shadow: -1px 1px #FFFFFF;
    }

/* ============== Recruitment added:  Start ======================== */

.contnavrecruitment {
    bottom: 0;
    height: 45px;
    position: absolute;
    text-align: center;
    max-width: 90%;
    width: 100%;
}

.navrecruitment {
    position: relative;
    display: inline-block;
}

    .navrecruitment a {
        background-color: #F3F3F3;
        border: 1px solid #CCCCCC;
        border-left: none;
        border-bottom: none;
        display: block;
        float: left;
        height: 44px;
        line-height: 44px;
        text-align: center;
        width: 44px;
    }

        .navrecruitment a.current, .navrecruitment a:hover {
            background: rgb(107,160,206); /* Old browsers */
            background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
            border: 1px solid #4C81AF;
            border-left: none;
            border-bottom: none;
            -webkit-box-shadow: -1px 0px #4C81AF;
            box-shadow: -1px 0px #4C81AF;
        }

            .navrecruitment a.current:first-child, .navrecruitment a:hover:first-child {
                border-left: none;
            }

        .navrecruitment a:first-child {
            border-top-left-radius: 3px;
            -webkit-box-shadow: -1px 0px #CCCCCC;
            box-shadow: -1px 0px #CCCCCC;
        }

        .navrecruitment a:last-child {
            border-top-right-radius: 3px;
        }

        .navrecruitment a span {
            display: inline-block;
            vertical-align: middle;
        }

.icnrec1 {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnrec1.png') no-repeat left top;
    height: 24px;
    width: 24px;
}

.navrecruitment a.current .icnrec1, .navrecruitment a:hover .icnrec1 {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnrec1w.png') no-repeat left top;
    height: 24px;
    width: 24px;
}

.icnrec2 {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnrec2.png') no-repeat left top;
    height: 24px;
    width: 20px;
}

.navrecruitment a.current .icnrec2, .navrecruitment a:hover .icnrec2 {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnrec2w.png') no-repeat left top;
    height: 24px;
    width: 20px;
}

.icnrec3 {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnrec3.png') no-repeat left top;
    height: 22px;
    width: 24px;
}

.navrecruitment a.current .icnrec3, .navrecruitment a:hover .icnrec3 {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnrec3w.png') no-repeat left top;
    height: 22px;
    width: 24px;
}

.icnrec4 {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnrec4.png') no-repeat left top;
    height: 18px;
    width: 18px;
}

.navrecruitment a.current .icnrec4, .navrecruitment a:hover .icnrec4 {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnrec4w.png') no-repeat left top;
    height: 18px;
    width: 18px;
}

section.recruitment .bggray {
    margin-bottom: 40px;
}

    section.recruitment .bggray ul.inline li {
        line-height: 20px;
    }

section.recruitment .allstates {
    margin-bottom: 100px;
}

section.recruitment .states {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-left: none;
    clear: both;
    margin-bottom: 20px;
}

section.recruitment .accordeon {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    padding: 15px 0 15px 20px;
}

    section.recruitment .accordeon.active {
        padding-bottom: 0;
    }

    section.recruitment .accordeon + .cont_accor {
        display: none;
        padding-left: 20px;
    }

    section.recruitment .accordeon.active + .cont_accor {
        display: block;
    }

.applicants:after, section.recruitment .states .cont_accor:after, section.recruitment .states:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

section.recruitment .states.green {
    border-left: 8px solid #00CC00;
}

section.recruitment .states.blue {
    border-left: 8px solid #00CCFF;
}

section.recruitment .states.orange {
    border-left: 8px solid #FF9900;
}

section.recruitment .states.red {
    border-left: 8px solid #CC3300;
}

section.recruitment .states.itemdrag {
    background-color: #D9F0F8;
}

section.recruitment .states .title {
    color: #666666;
    font-size: 16px;
    font-weight: 600;
    line-height: 17px;
    position: relative;
    text-shadow: 1px 1px #FFFFFF;
    margin-right: 15%;
}

    section.recruitment .states .title.half {
        margin-right: 50%;
    }

section.recruitment .states .addnew {
    margin-left: 10px;
    padding-left: 15px;
    position: relative;
    top: -2px;
}

    section.recruitment .states .addnew:after {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnplusblue.png') no-repeat left top;
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 10px;
        width: 10px;
    }

section.recruitment .states .pright {
    position: absolute;
    top: 15px;
    right: 0px;
}

section.recruitment .states ul.pright.inline li {
    font-weight: bold;
    margin-right: 20px;
    line-height: 20px;
}

section.recruitment .states .total {
    line-height: 15px;
    padding-right: 25px;
    position: relative;
}

    section.recruitment .states .total:after {
        background: url("https://static.peoplehr.net/202506198-hotfix000000/Images/icnperson.png") no-repeat scroll left top;
        content: '';
        width: 14px;
        position: absolute;
        right: 0;
        top: 3px;
        height: 13px;
    }

section.recruitment .states .control span,
section.recruitment .states .controlmobile {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnarrowbottom.png') no-repeat left center;
    cursor: pointer;
    display: inline-block;
    height: 8px;
    width: 12px;
}

section.recruitment .states .active .control span, section.recruitment .states .active .controlmobile {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnarrowtop.png') no-repeat left center;
}

section.recruitment .states .controlmobile {
    display: none;
    position: absolute;
    right: 0;
    top: 15px;
}

section.recruitment .applicants {
    clear: both;
    padding: 15px 0px 5px 0;
}

    section.recruitment .applicants li.nodisplay {
        float: none;
        height: 0;
        margin-bottom: 0;
        margin-right: 0;
        max-width: 100%;
        opacity: 0;
        width: 100%;
    }

    section.recruitment .applicants li {
        background-color: #d9edf7;
        border: 1px solid #bce8f1;
        border-radius: 3px;
        display: block;
        float: left;
        font-size: 11px;
        line-height: 25px;
        margin-bottom: 10px;
        margin-right: 20px;
        max-width: 377px;
        top: 0;
        left: 0;
        width: 377px;
        z-index: 1;
    }

/*----- PLIVE-1588 -----*/
.newapplicant {
    background-color: #FFE3EB !important;
    border: 1px solid #e5ccd3 !important;
}

.duplicateapplicant {
    background-color: #fde6ce !important;
    border: 1px solid #e5ccd3 !important;
}
/*----- PLIVE-1588 -----*/
section.recruitment .drop-placeholder {
    background-color: #d9edf7;
    border: 1px solid #bce8f1;
    border-radius: 3px;
    display: block;
    float: left;
    opacity: 0.3;
    margin-bottom: 10px;
    margin-right: 20px;
    max-width: 377px;
    width: 377px;
}

section.recruitment .applicants li p {
    color: #666666;
    display: block;
    font-weight: bold;
    overflow: hidden;
    padding: 0 10px;
    position: relative;
    margin-bottom: 0;
}

    section.recruitment .applicants li p span {
        display: block;
        float: left;
        line-height: 26px;
        margin-right: 10px;
    }

        section.recruitment .applicants li p span.ratings {
            width: auto !important;
        }

        section.recruitment .applicants li p span:last-child {
            margin-right: 0;
        }

        section.recruitment .applicants li p span.name {
            cursor: pointer;
            height: 26px;
            line-height: 28px;
            max-width: 165px;
            overflow: hidden;
            position: relative;
        }

    section.recruitment .applicants li p img.drag {
        cursor: move;
        display: block;
        float: left;
        margin-right: 10px;
        position: relative;
        top: 8px;
    }

aside .icnrecruitment {
    background: url("https://static.peoplehr.net/202506198-hotfix000000/Images/icnrecruitment2.png") no-repeat scroll left top;
    display: inline-block;
    height: 15px;
    margin-right: 10px;
    position: relative;
    top: 3px;
    width: 21px;
}

.overviewrecruitment {
    text-align: center;
    padding-bottom: 50px;
}

    .overviewrecruitment .continfo.w1100 {
        left: 10px;
        position: relative;
    }

    .overviewrecruitment .headoverview {
        background-color: #FFFFFF;
        padding-top: 40px;
        padding-bottom: 140px;
        position: relative;
        z-index: 2;
    }

        .overviewrecruitment .headoverview p.title {
            font-size: 38px;
            font-family: 'bebas_neueregular';
            line-height: 120%;
            margin-bottom: 20px;
        }

        .overviewrecruitment .headoverview p {
            font-size: 13px;
            max-width: 450px;
            margin: 0 auto 10px;
            line-height: 22px;
        }

    .overviewrecruitment .sectionlightblue {
        border-top: 1px solid #63CCFB;
        -webkit-box-shadow: 0px 2px #ffffff inset;
        box-shadow: 0px 2px #ffffff inset;
        position: relative;
        padding-bottom: 100px;
    }

        .overviewrecruitment .sectionlightblue > div {
            position: relative;
        }

            .overviewrecruitment .sectionlightblue:after, .overviewrecruitment .sectionlightblue > div:after {
                content: "\0020";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }

            .overviewrecruitment .sectionlightblue > div.bg {
                background-color: #EDFAFE;
                height: 470px;
            }

                .overviewrecruitment .sectionlightblue > div.bg > div.continfo {
                    position: relative;
                }

                    .overviewrecruitment .sectionlightblue > div.bg > div.continfo:before {
                        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/bgoverviewrecruitment.png') no-repeat left top;
                        content: '';
                        position: absolute;
                        left: 50%;
                        top: -212px;
                        margin-left: -212px;
                        height: 424px;
                        width: 424px;
                        z-index: 0;
                    }

    .overviewrecruitment .circle {
        background-color: #FFFFFF;
        -webkit-box-shadow: 2px 2px 3px #F1F1F1, -2px -2px 3px #F1F1F1;
        box-shadow: 2px 2px 3px #F1F1F1, -2px -2px 3px #F1F1F1;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 100%;
        font-family: 'bebas_neueregular';
    }

    .overviewrecruitment .totalvacancies {
        height: 220px;
        left: 50%;
        margin-left: -110px;
        padding: 20px 10px;
        position: absolute;
        top: -110px;
        width: 220px;
        z-index: 5;
    }

        .overviewrecruitment .totalvacancies .big,
        .overviewrecruitment .new .newapplicants .big {
            color: #999999;
            display: block;
            font-size: 76px;
            height: auto;
            margin-top: 20px;
            margin-bottom: 10px;
            line-height: 74px;
            width: auto;
        }

    .overviewrecruitment span.text,
    .overviewrecruitment .new .newapplicants span.text {
        color: #666666;
        font-size: 23px;
        position: relative;
        text-transform: uppercase;
        max-width: 180px;
        margin: 0 auto;
    }

        .overviewrecruitment span.text:after,
        .overviewrecruitment .new .newapplicants span.text:after {
            background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/lineapplicants.png') no-repeat left top;
            content: "";
            height: 3px;
            left: -27px;
            position: absolute;
            top: 11px;
            width: 20px;
        }

        .overviewrecruitment span.text:before,
        .overviewrecruitment .new .newapplicants span.text:before {
            background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/lineapplicants2.png') no-repeat left top;
            content: "";
            height: 3px;
            right: -27px;
            position: absolute;
            top: 11px;
            width: 20px;
        }

    .overviewrecruitment ul.resultapplicants {
        display: inline-block;
        margin-top: 170px;
        position: relative;
        z-index: 3;
    }

        .overviewrecruitment ul.resultapplicants li {
            display: block;
            float: left;
            margin-right: 30px;
            position: relative;
            height: 182px;
            width: 182px;
        }

            .overviewrecruitment ul.resultapplicants li.talentpool,
            .overviewrecruitment ul.resultapplicants li.rejected {
                position: relative;
                top: 80px;
            }

            .overviewrecruitment ul.resultapplicants li:last-child {
                margin-right: 0;
            }

            .overviewrecruitment ul.resultapplicants li span.big {
                display: block;
                font-size: 60px;
                height: auto;
                margin-top: 40px;
                margin-bottom: 10px;
                line-height: 47px;
                width: auto;
            }

            .overviewrecruitment ul.resultapplicants li.talentpool span.big {
                color: #FF9900;
            }

            .overviewrecruitment ul.resultapplicants li.accepted span.big {
                color: #00CC00;
            }

            .overviewrecruitment ul.resultapplicants li.rejected span.big {
                color: #CC3300;
            }

            .overviewrecruitment ul.resultapplicants li .circleinside {
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border-radius: 100%;
                margin: 5px;
                height: 172px;
                width: 172px;
            }

            .overviewrecruitment ul.resultapplicants li.talentpool .circleinside {
                border: 4px solid #FBE9CD;
            }

            .overviewrecruitment ul.resultapplicants li.accepted .circleinside {
                border: 4px solid #D6F1CC;
            }

            .overviewrecruitment ul.resultapplicants li.rejected .circleinside {
                border: 4px solid #F0D7CE;
            }

            .overviewrecruitment ul.resultapplicants li.accepted:after {
                background-color: #33ccff;
                content: "";
                height: 300px;
                left: 50%;
                margin-left: -10px;
                position: absolute;
                top: -70px;
                width: 20px;
                z-index: -1;
            }

            .overviewrecruitment ul.resultapplicants li.accepted:before {
                background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/imgapplicants.png') no-repeat left top;
                content: "";
                height: 53px;
                left: -53px;
                position: absolute;
                top: 73px;
                width: 290px;
                z-index: -1;
            }

            .overviewrecruitment ul.resultapplicants li span.icon {
                border-radius: 100%;
                display: block;
                height: 70px;
                left: 53px;
                line-height: 70px;
                position: absolute;
                text-align: center;
                top: -32px;
                width: 70px;
            }

            .overviewrecruitment ul.resultapplicants li.talentpool span.icon {
                background-color: #FF9900;
            }

                .overviewrecruitment ul.resultapplicants li.talentpool span.icon:after {
                    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icntalent.png') no-repeat left top;
                    content: "";
                    height: 28px;
                    left: 21px;
                    position: absolute;
                    top: 20px;
                    width: 28px;
                }

            .overviewrecruitment ul.resultapplicants li.accepted span.icon {
                background-color: #00CC00;
            }

                .overviewrecruitment ul.resultapplicants li.accepted span.icon:after {
                    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnaccepted.png') no-repeat center center;
                    content: "";
                    height: 30px;
                    left: 20px;
                    position: absolute;
                    top: 18px;
                    width: 32px;
                }

            .overviewrecruitment ul.resultapplicants li.rejected span.icon {
                background-color: #CC3300;
            }

                .overviewrecruitment ul.resultapplicants li.rejected span.icon:after {
                    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icnrejected.png') no-repeat center center;
                    content: "";
                    height: 30px;
                    left: 20px;
                    position: absolute;
                    top: 18px;
                    width: 32px;
                }

    .overviewrecruitment .new {
        border-top: 1px solid #CAE5FD;
        -webkit-box-shadow: 0px 1px #ffffff inset;
        box-shadow: 0px 1px #ffffff inset;
    }

        .overviewrecruitment .new > div.continfo {
            position: relative;
        }

        .overviewrecruitment .new .newapplicants {
            height: 220px;
            left: 50%;
            margin: 0 auto 0 -110px;
            padding: 20px 10px;
            position: absolute;
            top: -80px;
            width: 220px;
            z-index: 3;
        }

            .overviewrecruitment .new .newapplicants span.big {
                color: #00CCFF;
            }

        .overviewrecruitment .new p.last {
            font-family: "HelveticaNeue",Helvetica,Arial,sans-serif;
            font-size: 14px;
            padding-top: 160px;
            text-transform: uppercase;
        }

            .overviewrecruitment .new p.last span {
                display: block;
                font-size: 29px;
                font-weight: bold;
                line-height: 25px;
            }

/* ============== Recruitment added: End ======================== */

section.chartbenefit {
    border-bottom: 1px solid #CBCBCB;
    overflow: hidden;
    margin-bottom: 30px;
    padding: 10px 0px;
}

    section.chartbenefit > div {
        float: left;
        position: relative;
        margin-right: 20px;
        margin-bottom: 20px;
        width: 50%;
    }

        section.chartbenefit > div.blue {
        }

        section.chartbenefit > div div.left {
            margin: 10px 0px 0px 10px;
        }

            section.chartbenefit > div div.left p {
                font-size: 16px;
                font-weight: 700;
                margin-bottom: 5px;
            }

            section.chartbenefit > div div.left ul li {
                color: #909090;
                font-size: 12px;
                margin-bottom: 5px;
            }

                section.chartbenefit > div div.left ul li:last-child {
                    margin-bottom: 0px;
                }

                section.chartbenefit > div div.left ul li span {
                    display: block;
                    float: left;
                    height: 10px;
                    margin-right: 10px;
                }

                    section.chartbenefit > div div.left ul li span.co {
                        width: 10px;
                    }

    section.chartbenefit div.blue > div ul li:first-child span.co {
        background-color: #AECEEC;
        border: 1px solid #AECEEC;
    }

    section.chartbenefit div.blue > div ul li:last-child span.co {
        background-color: #D9EDF7;
        border: 1px solid #AECEEC;
    }

    section.chartbenefit div.blue div.bg {
        border: 10px solid #D9EDF7;
    }

    section.chartbenefit div.blue .timer > #slice > .pie {
        border: 10px solid #AECEEC;
    }

    section.chartbenefit div.bg {
        border-radius: 100%;
        float: left;
        height: 60px;
        width: 60px;
    }

/* Flexible Benefits */
.continternalbenefits .optionblue ul li a {
    padding-top: 15px;
    height: 65px;
}

.continternalbenefits .datebenefit {
    display: block;
    float: left;
    font-size: 22px;
    padding-top: 12px;
}

.continternalbenefits label.inline {
    margin-top: 0;
    line-height: 23px;
}

.continternalbenefits .divresult {
    display: block;
    float: left;
    padding: 0px 10px;
    min-width: 80px;
}

.continternalbenefits .divreview ul.reviewruning > li {
    min-height: 0 !important;
}

    .continternalbenefits .divreview ul.reviewruning > li .info {
        padding: 20px 0px;
    }

        .continternalbenefits .divreview ul.reviewruning > li .info span.spritesheet.icnreview {
            margin: 0 30px 0 20px;
        }

        .continternalbenefits .divreview ul.reviewruning > li .info ul.inline li {
            margin-bottom: 0;
        }

    .continternalbenefits .divreview ul.reviewruning > li.newreview a {
        line-height: 80px;
    }

        .continternalbenefits .divreview ul.reviewruning > li.newreview a span.spritesheet {
            margin-top: 23px;
        }

.continternalbenefits .bggray {
    padding: 10px 20px;
    text-align: center;
}

    .continternalbenefits .bggray .block {
        display: inline-block;
        margin-bottom: 5px;
    }

        .continternalbenefits .bggray .block * {
            text-align: left;
        }

    .continternalbenefits .bggray label {
        width: 135px;
    }

table.flexiblebenefits {
    cursor: pointer;
}

    table.flexiblebenefits img {
        margin-right: 10px;
    }


.modalbenefits .titles {
    float: right;
    margin-right: 180px;
}

.modalbenefits label.block.onlydesktop {
    line-height: 18px;
    text-align: center;
}

section.chartbenefit {
    overflow: hidden;
}

    section.chartbenefit .jqxChart {
        float: left;
    }

    section.chartbenefit > div {
        float: left;
        position: relative;
        margin-right: 0;
    }

        section.chartbenefit > div div.left {
            margin: 20px 0px 0px 10px;
        }

            section.chartbenefit > div div.left p {
                font-size: 16px;
                font-weight: 700;
                margin-bottom: 5px;
            }

            section.chartbenefit > div div.left ul li {
                color: #666;
                font-size: 13px;
                font-weight: 600;
                margin-bottom: 10px;
            }

                section.chartbenefit > div div.left ul li:last-child {
                    margin-bottom: 0px;
                }

                section.chartbenefit > div div.left ul li span {
                    display: block;
                    float: left;
                    height: 10px;
                    margin-right: 10px;
                    width: 120px;
                    line-height: 12px;
                }

                    section.chartbenefit > div div.left ul li span.total {
                        margin-left: 23px;
                    }

                    section.chartbenefit > div div.left ul li span.co {
                        width: 10px;
                    }

                section.chartbenefit > div div.left ul li i {
                    font-style: normal;
                }

    section.chartbenefit div.blue > div ul li span.co.one {
        background-color: #AECEEC;
        border: 1px solid #AECEEC;
    }

    section.chartbenefit div.blue > div ul li span.co.two {
        background-color: #D9EDF7;
        border: 1px solid #AECEEC;
    }

    section.chartbenefit div.pink > div ul li span.co.one {
        background-color: #f2c1c3;
        border: 1px solid #f2c1c3;
    }

    section.chartbenefit div.pink > div ul li span.co.two {
        background-color: #f2dede;
        border: 1px solid #f2c1c3;
    }

    section.chartbenefit div.blue {
    }

    section.chartbenefit .timer {
        height: 120px;
        width: 120px;
    }

        section.chartbenefit .timer > #slice {
            position: absolute;
            width: 120px;
            height: 120px;
            clip: rect(0px, 120px, 120px, 60px);
        }

            section.chartbenefit .timer > #slice.gt50 {
                clip: rect(auto, auto, auto, auto);
            }

            section.chartbenefit .timer > #slice > .pie {
                border-radius: 100%;
                clip: rect(0px, 60px, 120px, 0px);
                height: 80px;
                position: absolute;
                width: 80px;
            }

    section.chartbenefit div.blue div.bg {
        border: 20px solid #D9EDF7;
    }

    section.chartbenefit div.blue .timer > #slice > .pie {
        border: 20px solid #AECEEC;
    }

    section.chartbenefit div.bg {
        border-radius: 100%;
        float: left;
        height: 80px;
        width: 80px;
    }
/* Flexible Benefits  END*/


/* Accordeon
============================================================ */

.newsfeedandthanks .cont_accor {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    display: none;
    margin: 0;
    overflow: hidden;
}

.newsfeedandthanks .accordeon.active + .cont_accor {
    margin-bottom: 0px;
    max-height: none;
}

/* END */

/* Tags
============================================================ */
ul.tag li, span.tag, .accessuser {
    border-radius: 25px;
    color: #666666;
    display: inline-block;
    font-size: 10px;
    margin-right: 5px;
    padding: 0px 5px;
    line-height: 18px;
}

    .tag.blue li, span.tag.blue, .accessuser {
        background-color: #CEE6F0;
        border: 1px solid #B7CDD6;
    }

    .tag.greendark li, span.tag.greendark, .accessuser {
        background-color: #148484;
        color: white;
        padding: 1px 6px;
    }

    span.tag.red {
        background-color: #FBD9D9;
        border: 1px solid #DDC1C1;
    }

    span.tag.green {
        background-color: #C2F1CE;
        border: 1px solid #A1C9AC;
    }

    span.tag.greenlight {
        background-color: #DFF0D8;
        border: 1px solid #AADFB2;
    }

    span.tag.gray {
        background-color: #E7E7E7;
        border: 1px solid #B9B9B9;
    }

    span.tag.blue2 {
        background-color: #D9EDF7;
        border: 1px solid #8AA5BF;
    }

    span.tag.blueNew {
        margin-top: 7px;
        background: rgb(107,160,206); /* Old browsers */
        background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
        border: 1px solid #477DAE;
        -webkit-box-shadow: inset 0px 1px #94BADC;
        box-shadow: inset 0px 1px #94BADC;
        color: #FFFFFF;
    }

        span.tag.blueNew a {
            color: #FFFFFF;
        }

            span.tag.blueNew a:hover, span.tag.blueNew a:active, span.tag.blueNew a:focus, {
                color: #FFFFFF;
                text-decoration: none;
            }

    span.tag.bluedark {
        background-color: #CED9E3;
        border: 1px solid #8BA6C0;
    }

    span.tag.redlight {
        background-color: #FBF0E7;
        border: 1px solid #BFACA1;
    }

    span.tag.white {
        background-color: #fff;
        border: 1px solid #B9B9B9;
    }

    span.tag.medium {
        font-size: 11px;
        font-weight: 700;
        line-height: 21px;
        height: 21px;
        padding: 0px 10px;
    }

    span.tag.biggest {
        font-size: 12px;
        font-weight: normal;
        height: 24px;
        line-height: 24px;
        padding: 0 10px;
        text-shadow: none;
    }

.accessuser {
    margin-right: 0px;
    position: relative;
    text-transform: uppercase;
    top: 4px;
}

.managelistmodal ul.tag li {
    font-size: 11px;
    height: 25px;
    line-height: 25px;
    min-width: 50px;
    margin-bottom: 5px;
}

    .managelistmodal ul.tag li a.close {
        color: #ADBDC5;
        font-weight: 700;
        float: right;
        margin-right: 5px;
    }

        .managelistmodal ul.tag li a.close:hover {
            color: #97A6AE;
        }


.checkboxes {
    border: 1px solid #CBCBCB;
    border-radius: 3px;
    float: left;
    padding: 5px 5px 0 5px;
    width: 360px;
}

    .checkboxes ul.tag li {
        background-color: #EEEEEE;
        border-radius: 3px;
        border: 1px solid #DDDDDD;
        display: block;
        font-size: 11px;
        font-weight: 700;
        float: left;
        height: 24px;
        padding: 0px 5px;
        line-height: 25px;
        margin-bottom: 5px;
    }

        .checkboxes ul.tag li .checker {
            float: left;
            margin: 3px 5px 0px 0px;
        }


/* Tag Inputs
============================================================ */
div.tagsinput {
    border: 1px solid #CCC;
    background: #FFF;
    border-radius: 3px;
    padding: 5px;
    height: 100px;
    -ms-overflow-y: auto;
    overflow-y: auto;
    width: 300px;
}

    div.tagsinput span.tag {
        background-color: #D9EDF7;
        border: 1px solid #BCE8F1;
        border-radius: 3px;
        color: #666666;
        display: block;
        float: left;
        font-size: 11px;
        height: auto;
        line-height: 19px;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 3px 25px 3px 5px;
        position: relative;
    }

        div.tagsinput span.tag a {
            color: #8E9DA4;
            font-size: 11px;
            font-weight: bold;
            position: absolute;
            right: 8px;
            text-decoration: none;
            top: 3px;
        }

    div.tagsinput input {
        background: transparent;
        border: 1px solid transparent;
        color: #666666;
        outline: 0px;
        padding: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    div.tagsinput div {
        display: block;
        float: left;
    }

.tags_clear {
    clear: both;
    width: 100%;
    height: 0px;
}

.not_valid {
    background: #FBD8DB !important;
    border-radius: 3px;
    color: #90111A !important;
    height: 16px;
    line-height: 16px;
}

.tagsinputdisabled div.tagsinput {
    background-color: #F3F3F3;
}

    .tagsinputdisabled div.tagsinput span.tag {
        background-color: #FFFFFF;
        border: 1px solid #cdcdcd;
        padding-right: 5px;
    }

.tagsheightauto div.tagsinput {
    padding-bottom: 0;
}

.managelistoption div.tagsinput {
    border: none;
}

    .managelistoption div.tagsinput div:not(.tags_clear) {
        margin: 20px 0;
    }

    .managelistoption div.tagsinput div input {
        border: 1px solid #CCCCCC;
        border-radius: 3px 3px 3px 3px;
        color: #666666;
        font-size: 13px;
        height: 38px;
        line-height: 40px;
        padding: 0 10px;
        width: 548px;
    }

    .managelistoption div.tagsinput span.tag {
        max-width: 560px;
        min-width: 40px;
        word-break: break-all;
    }

        .managelistoption div.tagsinput span.tag a {
            position: absolute;
            right: 8px;
            top: 3px;
        }

.custom-wizzard-table {
    clear: both;
    max-height: 400px;
    -ms-overflow-y: scroll;
    overflow-y: auto;
    padding-right: 10px;
}

.tagsstyle2 div.tagsinput {
    padding: 5px 5px 0;
}

.tagsstyle2 label {
    margin-bottom: 20px;
}

.tagsstyle2 div.tagsinput div {
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    color: #666666;
    height: 38px;
    left: 130px;
    line-height: 40px;
    padding: 0 10px;
    position: absolute;
    top: 0;
    width: 289px;
}

    .tagsstyle2 div.tagsinput div input {
        color: #666666;
        height: 33px;
        line-height: 40px;
        background-color: #FFFFFF;
        margin: 0px;
        padding: 0px;
        width: 280px;
    }

/*Sliderbar
============================================================*/
.slider {
    overflow: hidden;
}

    .slider li {
        background: rgb(237,237,237); /* Old browsers */
        background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        border: 1px solid #D0D0D0;
        border-right: none;
        display: block;
        float: left;
        font-size: 13px;
        font-weight: 700;
        line-height: 40px;
        text-align: center;
        padding: 0px 10px;
        height: 40px;
        width: 450px;
    }

        .slider li:first-child {
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
            width: 40px; /* PWEB-671 */
        }

        .slider li:last-child {
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
            border-right: 1px solid #D0D0D0;
            text-align: left;
            width: 80px; /* PWEB-671 */
        }

        .slider li span {
            float: left;
        }

        .slider li:last-child span {
            margin-right: 5px;
        }

    .slider .ui-corner-all {
        border-radius: 4px;
    }

    .slider .ui-widget-content {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        -webkit-box-shadow: 0 1px 2px #CCCCCC inset;
        box-shadow: 0 1px 2px #CCCCCC inset;
        color: #222222;
    }

    .slider .ui-slider-horizontal {
        height: 30px;
        margin: 0 10px;
        top: 4px;
    }

.ui-slider-horizontal .ui-slider-range-min {
    background-color: #E5E5E5;
    -webkit-box-shadow: 0 1px 2px #CCCCCC inset;
    box-shadow: 0 1px 2px #CCCCCC inset;
}

.slider .ui-slider {
    display: inline-block;
    position: relative;
    margin-right: 40px;
    width: 376px;
}

    .slider .ui-slider:before {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
        border-left: none;
        box-shadow: -2px 1px 2px #CCCCCC inset;
        -webkit-box-shadow: -2px 1px 2px #CCCCCC inset;
        content: "";
        height: 30px;
        position: absolute;
        right: -32px;
        top: -1px;
        width: 35px;
    }

.slider .ui-state-default, .slider .ui-widget-content .ui-state-default, .slider .ui-widget-header .ui-state-default {
    background: rgb(107,160,206); /* Old browsers */
    background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
    border: 1px solid #4D82B0;
    border-radius: 3px;
}

.slider .ui-slider-horizontal .ui-slider-handle {
    top: 0px;
}

.slider .ui-slider .ui-slider-handle {
    cursor: default;
    height: 28px;
    position: absolute;
    width: 29px;
    z-index: 2;
}

    .slider .ui-slider .ui-slider-handle:after {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/slider.png') no-repeat center center;
        content: "";
        height: 10px;
        left: 7px;
        position: absolute;
        top: 9px;
        width: 16px;
    }

/* Select Multiple Style
============================================================ */
.asmContainer {
    display: block;
    float: left;
    position: relative;
    width: 520px;
}

    .asmContainer select.asmSelect {
        display: inline;
        opacity: 0;
        position: relative;
        height: 27px !important;
        line-height: 27px;
        margin-bottom: 10px;
        width: 143px !important;
        z-index: 10;
    }

        .asmContainer select.asmSelect option {
            padding: 3px 10px;
        }

    .asmContainer .asmOptionDisabled {
        color: #4A7FAD;
    }

    .asmContainer .asmHighlight {
        padding: 0;
        margin: 0 0 0 1em;
    }

    .asmContainer .asmList {
        position: relative;
        display: block;
        list-style: none;
        overflow: hidden;
    }

    .asmContainer .asmListItem {
        background: #D9EDF7;
        border: 1px solid #BCE8F1;
        border-radius: 4px;
        color: #666666;
        display: block !important;
        float: left;
        font-size: 11px;
        line-height: 1em;
        list-style: outside;
        margin: 0px 5px 5px 0px;
        padding-left: 0;
        padding-right: 15px;
        position: relative;
        width: auto;
    }

        .asmContainer .asmListItem:hover {
            background-color: #CBDEE6;
        }

    .asmContainer .asmListItemLabel {
        padding: 5px;
        display: block;
    }

    .asmContainer .asmListSortable .asmListItemLabel {
        cursor: move;
    }

    .asmContainer .asmListItemRemove {
        color: #666666;
        font-weight: 700;
        position: absolute;
        right: 0;
        top: 0;
        padding: 5px;
    }

    .asmContainer p.styleselmul {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/bgselectmultiple.png') no-repeat 0 0;
        cursor: default;
        top: 0;
        float: left;
        left: 0;
        height: 27px;
        line-height: 27px !important;
        text-indent: 10px;
        position: absolute;
        width: 143px;
        z-index: 1;
    }

        .asmContainer p.styleselmul.active {
            background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/bgselectmultiplepress.png') no-repeat 0 0;
        }

/* Styles of the tagedit inputsforms 
============================================================ */

.tagedit {
    margin-bottom: 20px;
}

.tagedit-list {
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    color: #666666;
    min-height: 29px;
    overflow: auto;
    padding: 0 5px 5px;
    width: 567px;
}

    .tagedit-list li.tagedit-listelement {
        float: left;
        font-size: 11px;
        line-height: 22px;
        list-style-type: none;
        margin: 5px 5px 0 0;
        padding: 0;
    }

.tagedit-listelement.tagedit-listelement-old > input {
    max-width: 543px;
}

.tagedit-list li.tagedit-listelement-new input {
    border: 0;
    height: 100%;
    padding: 2px 5px;
    width: 15px;
    background: #fff;
}

    .tagedit-list li.tagedit-listelement-new input:focus {
        outline: none;
    }

    .tagedit-list li.tagedit-listelement-new input.tagedit-input-disabled {
        display: none;
    }

.tagedit-list li.tagedit-listelement-old {
    background-color: #D9EDF7;
    border: 1px solid #BCE8F1;
    border-radius: 3px;
    padding: 0px 2px 0px 7px;
    -webkit-transition: background linear 0.2s;
    -moz-transition: background linear 0.2s;
    -o-transition: background linear 0.2s;
    -ms-transition: background linear 0.2s;
    max-width: 543px;
    transition: background linear 0.2s;
    word-break: break-all;
    width: auto !important;
}

    .tagedit-list li.tagedit-listelement-old:hover {
        background-color: #E4F7FF;
    }

    .tagedit-list li.tagedit-listelement-old a.tagedit-close,
    .tagedit-list li.tagedit-listelement-old a.tagedit-break,
    .tagedit-list li.tagedit-listelement-old a.tagedit-delete,
    .tagedit-list li.tagedit-listelement-old a.tagedit-save {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/cross.png') center center no-repeat;
        text-indent: -2000px;
        display: inline-block;
        width: 15px;
        height: 100%;
        cursor: pointer;
        margin: 0 2px 0 5px;
    }

    .tagedit-list li.tagedit-listelement-old a.tagedit-save {
        background-image: url('https://static.peoplehr.net/202506198-hotfix000000/Images/tick.png');
        margin-right: 0;
    }

    .tagedit-list li.tagedit-listelement-old a.tagedit-break {
        background-image: url('https://static.peoplehr.net/202506198-hotfix000000/Images/undo.png');
        margin-right: 0;
    }

    .tagedit-list li.tagedit-listelement-old a.tagedit-delete {
        background-image: url('https://static.peoplehr.net/202506198-hotfix000000/Images/deletetag.png');
        margin: 0 5px 0 2px;
        background-position: right center;
    }

.tagedit-list li.tagedit-listelement-edit input.tagedit-edit-input {
    border: 0;
    background: transparent;
    font-size: 11px;
    color: #666;
    padding: 0;
}

.tagedit-list li.tagedit-listelement-edit input:focus {
    outline: none;
}

.tagedit-list li.tagedit-listelement-edit a.tagedit-break {
    border: 0;
    margin-left: 0;
}

.tagedit-list li.tagedit-listelement-edit a.tagedit-close,
.tagedit-list li.tagedit-listelement-edit span {
    display: none;
}

.tagedit-list li.tagedit-listelement-deleted,
.tagedit-list li.tagedit-listelement-deleted:hover {
    padding-right: 5px;
    background-color: #FFD6D6;
    border-color: #FFB7B7;
    border-style: dashed;
}

    .tagedit-list li.tagedit-listelement-deleted span {
        text-decoration: line-through;
    }

    .tagedit-list li.tagedit-listelement-deleted a.tagedit-close {
        margin-right: 0;
    }


/* Loading - Please Wait
============================================================ */
.divwhite {
    background: #FFFFFF;
    border: 1px solid #D6D6D6;
    margin: 0 auto;
    padding: 60px 40px;
    margin-top: 15%;
    text-align: center;
    width: 470px;
}

    .divwhite.divwait img {
        margin-bottom: 40px;
    }

    .divwhite.divwait p {
        color: #666666;
        font-size: 16px;
        font-weight: 700;
    }

/* Scrollbar Style
============================================================ */
@media only screen and (min-width : 768px) {
    .pc div.sidebar .box,
    .pc div.sidebar .box .antiscroll-inner {
        width: 200px !important;
        height: 250px;
    }

    .pc aside .box,
    .pc aside .box .antiscroll-inner {
        width: 174px !important;
        height: 250px;
    }

    .pc .antiscroll-scrollbar {
        background: gray;
        background: rgba(0, 0, 0, 0.5);
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        border-radius: 7px;
        -webkit-box-shadow: 0 0 1px #fff;
        -moz-box-shadow: 0 0 1px #fff;
        box-shadow: 0 0 1px #fff;
        position: absolute;
        opacity: 0;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        -webkit-transition: linear 300ms opacity;
        -moz-transition: linear 300ms opacity;
        -o-transition: linear 300ms opacity;
    }

    .pc .antiscroll-scrollbar-shown {
        opacity: 1;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    }

    .pc .antiscroll-scrollbar-horizontal {
        height: 7px;
        margin-left: 2px;
        bottom: 2px;
        left: 0;
    }

    .pc .antiscroll-scrollbar-vertical {
        width: 7px;
        margin-top: 2px;
        right: 2px;
        top: 0;
    }

    .pc .antiscroll-inner {
        overflow-y: scroll;
        overflow-x: hidden;
    }

        .pc .antiscroll-inner::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .pc .antiscroll-inner::scrollbar {
            width: 0;
            height: 0;
        }
}

/* Work Pattern Settings
============================================================ */
.workingpatternpreview.spritesheet.icnchange {
    background-position: 0 -1063px;
    display: block;
    float: left;
    height: 16px;
    margin-left: 7px;
    margin-top: 9px;
    width: 16px;
}

.numberweek {
    font-weight: bold;
    line-height: 30px;
    padding-left: 20px;
}

.divworkingpattern {
    max-height: 380px;
    overflow-y: scroll;
    padding-right: 5px;
    overflow: auto;
}

    .divworkingpattern .week {
        background-color: #f1f1f1;
        border: 1px solid #cdcdcd;
        border-radius: 3px;
        margin-bottom: 10px;
        overflow: hidden;
        padding: 20px;
        position: relative;
    }

        .divworkingpattern .week.colorexample1 {
            background-color: #DBECC8;
            border: 1px solid #7ED321;
        }

        .divworkingpattern .week.colorexample2 {
            background-color: #F3E3C9;
            border: 1px solid #F5A623;
        }

        .divworkingpattern .week:after {
            background-color: rgba(255,255,255,0.2);
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 1;
        }

        .divworkingpattern .week .infoweek {
            overflow: hidden;
            position: relative;
            z-index: 2;
        }

        .divworkingpattern .week p.titleweek {
            color: #333;
            display: block;
            float: left;
            font-weight: 600;
            margin-bottom: 5px;
            text-shadow: 1px 1px #ffffff;
        }

    .divworkingpattern ul li {
        display: block;
        float: left;
    }

        .divworkingpattern ul li label {
            color: #333;
            font-weight: bold;
            line-height: 20px;
            margin-right: 10px;
            margin-top: 0 !important;
            text-shadow: 1px 1px #ffffff;
            width: auto;
        }

        .divworkingpattern ul li .deleteweek {
            color: #005994;
            font-weight: 600;
            font-size: 13px !important;
            line-height: 18px;
            margin-left: 20px;
        }

        .divworkingpattern ul li .picker {
            border: 1px solid #cdcdcd;
            border-radius: 3px;
            cursor: pointer;
            display: block;
            float: left;
            height: 13px;
            margin-right: 20px;
            margin-top: 1px;
            width: 13px;
        }

            .divworkingpattern ul li .picker span {
                background-color: #cdcdcd;
                border: 1px solid #ffffff;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                box-sizing: border-box;
                border-radius: 3px;
                display: block;
                height: 100%;
                width: 100%;
            }

.picker {
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    float: left;
    height: 13px;
    margin-right: 20px;
    margin-top: 1px;
    width: 13px;
}

    .picker span {
        background-color: #cdcdcd;
        border: 1px solid #ffffff;
        border-radius: 3px;
        box-sizing: border-box;
        display: block;
        height: 100%;
        width: 100%;
    }

.picker {
    cursor: pointer;
}

.divworkingpattern .week ul.days {
    clear: both;
    overflow: hidden;
    padding-top: 15px;
}

    .divworkingpattern .week ul.days li {
        display: block;
        float: left;
        margin-right: 17px;
        overflow: hidden;
        width: 66px;
    }

        .divworkingpattern .week ul.days li:last-child {
            margin-right: 0;
        }

        .divworkingpattern .week ul.days li span {
            color: #333333;
            display: block;
            font-weight: 600;
            margin-bottom: 10px;
            text-align: left;
            text-shadow: 1px 1px #ffffff;
        }

.divworkingpattern .week .days li input.text {
    border: 1px solid #d0ced1;
    border-top: none;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    height: 30px;
    padding: 0 10px;
    width: 100%;
}

.divworkingpattern .week ul.days li input.text:first-of-type {
    border-top: 1px solid #d0ced1;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.divworkingpattern .week ul.days li input.text:last-of-type {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.divworkingpattern .week ul.days li input.text:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bgoptions.relative {
    position: relative;
}

.weekmessageerror, .messageerror {
    background-color: #ffe3e3;
    border: 1px solid #ffaaaa;
    border-radius: 3px;
    clear: both;
    color: #ff7c85;
    display: block;
    padding: 10px;
    text-align: left;
}


.weekhourserror {
    border: 1px solid #FFAAAA !important;
}

.messageerror.mw600 {
    max-width: 600px;
}
/* Back to work
============================================================ */
.backtowork table.style1 thead {
    font-weight: 600;
}

    .backtowork table.style1 thead tr th {
        padding: 10px;
    }

.backtowork table.style1 div.checker {
    float: none;
}

.backtowork table.style1 .date {
    width: 115px;
}

table input.datepicker {
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    width: 70px;
}

table .ui-datepicker-trigger {
    display: block;
    float: left;
    margin-left: 5px;
    top: 7px;
}

/* Return to work Sick Absence
============================================================ */
.doctormanagersection {
    display: block;
    float: left;
    margin-top: 12px;
    width: 520px;
}

/* Buttons Style
============================================================ */
.back {
    display: flex;
    background-color: #007A7A;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 13px;
    font-family: "Roboto";
    font-weight: 400;
    position: relative;
    height: 32px;
    padding: 0px 10px 0px 11px;
    justify-content: center;
    align-items: center;
}

    .back:hover {
        cursor: pointer;
        background-color: #007a7ac7;
    }

    .back:before {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/Left-icon.svg') no-repeat;
        content: '';
        position: relative;
        left: -8px;
        height: 32px;
        width: 20px;
    }

ul.inline.buttons {
    border-top: 1px solid #EDEDED;
    padding-top: 14px;
}

    ul.inline.buttons li:last-child {
        float: right;
    }

    ul.inline.buttons a.button.w300 {
        height: 36px;
        line-height: 36px;
        width: 300px;
    }

.back-bulkActions {
    display: none;
}

.button {
    border-radius: 4px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.small {
    line-height: 22px;
    height: 22px;
    padding: 0 5px;
}

.small2 {
    font-size: 11px;
    height: 22px;
    line-height: 22px;
    padding: 0 15px;
}

.small3 {
    height: 23px;
    line-height: 24px;
    padding: 0 15px;
}

.medium {
    line-height: 30px;
    height: 30px;
    padding: 0 15px;
}

.medium2 {
    line-height: 30px;
    height: 30px;
    padding: 0 30px;
}

.height21 {
    height: 21px;
    line-height: 21px;
    padding: 0px 10px;
}

.height38 {
    height: 38px;
    line-height: 38px;
    padding: 0 10px;
}

.height50 {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
}

.big {
    height: 27px;
    line-height: 27px;
    width: 570px;
}

.buttonicn {
    height: 17px;
    line-height: 17px;
    width: 17px;
}

.button.btncenter {
    display: block;
    margin: 0 auto;
}

.button100per {
    display: block;
}

.bigger {
    height: 48px;
    line-height: 48px;
    padding: 0 26px;
    font-size: 14px;
}

.button.withicon {
    height: 28px;
    line-height: 28px;
    padding: 0px 10px;
}

    .button.withicon span {
        display: block;
        float: left;
    }

        .button.withicon span.spritesheet {
            margin-right: 10px;
        }

        .button.withicon span.text {
            padding-left: 10px;
        }

    .button.withicon.gray span.text {
        border-left: 1px solid #FFFFFF;
        box-shadow: -1px 0px #D0D0D0;
    }

    .button.withicon.gray.active span.text,
    .button.withicon.blue span.text {
        border-left: 1px solid #94BADC;
        box-shadow: -1px 0px #477DAE;
    }

.button.small > .spritesheet.icnplus {
    margin-right: 5px;
    top: 2px;
}

.button.small > .spritesheet.icnsingleemp {
    margin-right: 5px;
    top: 3px;
}

.button.small > .spritesheet.icnmulemp {
    margin-right: 5px;
    top: 2px;
}

.btn-padding-6x8 {
    padding: 6px 8px;
}

.btn-padding-8x8 {
    padding: 8px 8px;
}

.buttonicn-16 {
    height: 16px;
    width: 16px;
}

.button.greendark {
    display: flex;
    align-items: center;
    width: fit-content;
    height: fit-content;
    justify-content: center;
    gap: 6px;
    font-weight: normal;
    background-color: #007A7A;
    border: solid 1px #007A7A;
    color: #FFFFFF;
    position: initial;
    margin: initial;
    font-size: 13px;
}

.button.greendark-disabled {
    background-color: #F9F9FA;
    color: #D8DBDF;
    border: solid 1px #D8DBDF;
}

.button.clear-outlined {
    display: flex;
    align-items: center;
    width: fit-content;
    height: fit-content;
    justify-content: center;
    gap: 6px;
    font-weight: normal;
    background-color: none;
    border: solid 1px #828D98;
    color: #63717E;
    position: initial;
    margin: initial;
    font-size: 13px;
}

.button.blue {
    background: rgb(107,160,206); /* Old browsers */
    background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
    border: 1px solid #477DAE;
    -webkit-box-shadow: inset 0px 1px #94BADC;
    box-shadow: inset 0px 1px #94BADC;
    color: #FFFFFF;
    text-shadow: -1px 1px #5483AB;
}

    .button.blue:hover {
        background: rgb(117,176,232); /* Old browsers */
        background: -webkit-linear-gradient(rgba(117,176,232,1) 0%,rgba(74,127,173,1) 100%);
        background: -moz-linear-gradient(rgba(117,176,232,1) 0%,rgba(74,127,173,1) 100%);
        background: -o-linear-gradient(rgba(117,176,232,1) 0%,rgba(74,127,173,1) 100%);
        background: -ms-linear-gradient(rgba(117,176,232,1) 0%,rgba(74,127,173,1) 100%);
        background: linear-gradient(rgba(117,176,232,1) 0%,rgba(74,127,173,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75b0e8', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
    }

    .button.blue:active {
        background: rgb(74,127,173); /* Old browsers */
        background: -webkit-linear-gradient(rgba(74,127,173,1) 0%,rgba(117,176,232,1) 100%);
        background: -moz-linear-gradient(rgba(74,127,173,1) 0%,rgba(117,176,232,1) 100%);
        background: -o-linear-gradient(rgba(74,127,173,1) 0%,rgba(117,176,232,1) 100%);
        background: -ms-linear-gradient(rgba(74,127,173,1) 0%,rgba(117,176,232,1) 100%);
        background: linear-gradient(rgba(74,127,173,1) 0%,rgba(117,176,232,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a7fad', endColorstr='#75b0e8',GradientType=0 ); /* IE6-9 */
    }

.button.orange {
    background: rgb(236,158,110); /* Old browsers */
    background: -webkit-linear-gradient(rgba(236,158,110,1) 0%,rgba(153,51,0,1) 100%);
    background: -moz-linear-gradient(rgba(236,158,110,1) 0%,rgba(153,51,0,1) 100%);
    background: -o-linear-gradient(rgba(236,158,110,1) 0%,rgba(153,51,0,1) 100%);
    background: -ms-linear-gradient(rgba(236,158,110,1) 0%,rgba(153,51,0,1) 100%);
    background: linear-gradient(rgba(236,158,110,1) 0%,rgba(153,51,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec9e6e', endColorstr='#993300',GradientType=0 ); /* IE6-9 */
    border: 1px solid #B9714C;
    -webkit-box-shadow: inset 0px 1px #F1B996;
    box-shadow: inset 0px 1px #F1B996;
    color: #FFFFFF;
    text-shadow: -1px 1px #9C5C38;
}

    .button.orange:hover {
        background: rgb(234,169,131); /* Old browsers */
        background: -webkit-linear-gradient(rgba(234,169,131,1) 0%,rgba(153,51,0,1) 100%);
        background: -moz-linear-gradient(rgba(234,169,131,1) 0%,rgba(153,51,0,1) 100%);
        background: -o-linear-gradient(rgba(234,169,131,1) 0%,rgba(153,51,0,1) 100%);
        background: -ms-linear-gradient(rgba(234,169,131,1) 0%,rgba(153,51,0,1) 100%);
        background: linear-gradient(rgba(234,169,131,1) 0%,rgba(153,51,0,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaa983', endColorstr='#993300',GradientType=0 ); /* IE6-9 */
    }

    .button.orange:active {
        background: rgb(153,51,0); /* Old browsers */
        background: -webkit-linear-gradient(rgba(153,51,0,1) 0%,rgba(234,169,131,1) 100%);
        background: -moz-linear-gradient(rgba(153,51,0,1) 0%,rgba(234,169,131,1) 100%);
        background: -o-linear-gradient(rgba(153,51,0,1) 0%,rgba(234,169,131,1) 100%);
        background: -ms-linear-gradient(rgba(153,51,0,1) 0%,rgba(234,169,131,1) 100%);
        background: linear-gradient(rgba(153,51,0,1) 0%,rgba(234,169,131,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#993300', endColorstr='#eaa983',GradientType=0 ); /* IE6-9 */
    }

.button.green {
    background: rgb(51,153,0); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(51,153,0,1) 0%, rgba(43,133,0,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,153,0,1)), color-stop(100%,rgba(43,133,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(51,153,0,1) 0%,rgba(43,133,0,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(51,153,0,1) 0%,rgba(43,133,0,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(51,153,0,1) 0%,rgba(43,133,0,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(51,153,0,1) 0%,rgba(43,133,0,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#339900', endColorstr='#2b8500',GradientType=0 ); /* IE6-9 */
    border: 1px solid #2D8B00;
    -webkit-box-shadow: inset 0px 1px #6CB547;
    box-shadow: inset 0px 1px #6CB547;
    color: #FFFFFF;
    text-shadow: -1px 1px #2D8B00;
}

    .button.green:hover {
        background: rgb(90,153,56); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(90,153,56,1) 0%, rgba(43,133,0,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(90,153,56,1)), color-stop(100%,rgba(43,133,0,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(90,153,56,1) 0%,rgba(43,133,0,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(90,153,56,1) 0%,rgba(43,133,0,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(90,153,56,1) 0%,rgba(43,133,0,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(90,153,56,1) 0%,rgba(43,133,0,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a9938', endColorstr='#2b8500',GradientType=0 ); /* IE6-9 */
    }

    .button.green:active {
        background: rgb(43,133,0); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(43,133,0,1) 0%, rgba(90,153,56,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(43,133,0,1)), color-stop(100%,rgba(90,153,56,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(43,133,0,1) 0%,rgba(90,153,56,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(43,133,0,1) 0%,rgba(90,153,56,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(43,133,0,1) 0%,rgba(90,153,56,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(43,133,0,1) 0%,rgba(90,153,56,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b8500', endColorstr='#5a9938',GradientType=0 ); /* IE6-9 */
    }

.button.gray {
    background: #EDEDED; /* Old browsers */
    background: -webkit-linear-gradient(#FFF 0%, #EDEDED 100%);
    background: -moz-linear-gradient(#FFF 0%, #EDEDED 100%);
    background: -o-linear-gradient(#FFF 0%, #EDEDED 100%);
    background: -ms-linear-gradient(#FFF 0%, #EDEDED 100%);
    background: linear-gradient(#FFF 0%, #EDEDED 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
    border: 1px solid #D0D0D0;
    color: #666;
    font-size: 11px;
    text-align: center;
}

    .button.gray:hover {
        background: #EDEDED;
        background: -webkit-linear-gradient(#ffffff 50%,#ededed 100%);
        background: -moz-linear-gradient(#ffffff 50%,#ededed 100%);
        background: -o-linear-gradient(#ffffff 50%,#ededed 100%);
        background: -ms-linear-gradient(#ffffff 50%,#ededed 100%);
        background: linear-gradient(#ffffff 50%,#ededed 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
    }

    .button.gray:active {
        background: #EDEDED;
        background: -webkit-linear-gradient(#ededed 0%,#ffffff 50%);
        background: -moz-linear-gradient(#ededed 0%,#ffffff 50%);
        background: -o-linear-gradient(#ededed 0%,#ffffff 50%);
        background: -ms-linear-gradient(#ededed 0%,#ffffff 50%);
        background: linear-gradient(#ededed 0%,#ffffff 50%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
    }

.button.graydark {
    background: rgb(153,153,153);
    background: -moz-linear-gradient(top, rgba(153,153,153,1) 0%, rgba(102,102,102,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,153,153,1)), color-stop(100%,rgba(102,102,102,1)));
    background: -webkit-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(102,102,102,1) 100%);
    background: -o-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(102,102,102,1) 100%);
    background: -ms-linear-gradient(top, rgba(153,153,153,1) 0%,rgba(102,102,102,1) 100%);
    background: linear-gradient(to bottom, rgba(153,153,153,1) 0%,rgba(102,102,102,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#666666',GradientType=0 );
    border: 1px solid #6A6A6A;
    -webkit-box-shadow: inset 0px 1px #B5B5B5;
    box-shadow: inset 0px 1px #B5B5B5;
    color: #FFFFFF;
    text-shadow: -1px 1px #6A6A6A;
}

    .button.graydark:hover {
        background: rgb(127,127,127); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(127,127,127,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(127,127,127,1)), color-stop(100%,rgba(102,102,102,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(127,127,127,1) 0%,rgba(102,102,102,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(127,127,127,1) 0%,rgba(102,102,102,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(127,127,127,1) 0%,rgba(102,102,102,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(127,127,127,1) 0%,rgba(102,102,102,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
    }

    .button.graydark:active {
        background: rgb(102,102,102); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(102,102,102,1) 0%, rgba(127,127,127,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(127,127,127,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(127,127,127,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(127,127,127,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(127,127,127,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(102,102,102,1) 0%,rgba(127,127,127,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#7f7f7f',GradientType=0 ); /* IE6-9 */
    }

.button.solidblue {
    background-color: #CEE6F0;
    border: 1px solid #B7CDD6;
    font-size: 11px;
    line-height: 24px;
    text-shadow: 1px 1px #FFFFFF;
}

    .button.solidblue:hover {
        background-color: #DBF3FF;
    }

    .button.solidblue:active {
        background-color: #C0D5E0;
    }

.button.solidred {
    background-color: #F0D2CF;
    border: 1px solid #C6ADAB;
    color: #666666;
}

    .button.solidred:hover {
        background-color: #FFDFDC;
    }

    .button.solidred:active {
        background-color: #D0B6B6;
    }

    .button.solidred > span.text {
        border-right: 1px solid #C6ADAB;
        display: block;
        float: left;
        padding-right: 10px;
    }

    .button.solidred > span.spritesheet {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') no-repeat -93px -1366px;
        height: 7px;
        left: 10px;
        padding: 0 5px;
        top: 0px;
        width: 4px;
    }

.button.solidwhite {
    background-color: #FFFFFF;
    border: 1px solid #D0CED1;
    color: #666666;
}

    .button.solidwhite:hover {
        background-color: rgba(208,208,208,0.5);
        color: #666666;
    }

    .button.solidwhite:active {
        background-color: rgba(208,208,208,0.3);
        color: #666666;
    }


.arrowbutton {
    background: rgb(107,160,206); /* Old browsers */
    background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
    border: 1px solid #477DAE;
    border-radius: 3px;
    -webkit-box-shadow: inset 0px 1px #94BADC;
    box-shadow: inset 0px 1px #94BADC;
    color: #FFFFFF;
    display: inline-block;
    height: 23px;
    font-weight: 600;
    line-height: 25px;
    margin-left: 10px;
    padding: 0 10px 0 8px;
    position: relative;
    text-shadow: -1px 1px #5483AB;
}

    .arrowbutton.blue:before {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/bottomarrow.png') no-repeat;
        content: "";
        position: absolute;
        height: 27px;
        left: -10px;
        top: -2px;
        width: 11px;
    }

.buttonreminder {
    border-radius: 1px;
    height: 20px;
    line-height: 20px;
    padding-left: 7px;
    position: absolute;
    right: 50px;
    top: 20px;
}

    .buttonreminder span.num {
        background-color: #4C81AF;
        display: block;
        float: right;
        height: 20px;
        line-height: 20px;
        margin-left: 7px;
        padding: 0 10px;
    }

    .buttonreminder span.spritesheet {
        margin-right: 5px;
        top: 2px;
    }

.buttonicon {
    overflow: hidden;
}

    .buttonicon a {
        display: block;
        float: left;
    }

    .buttonicon .blue:first-child {
        border-right: 1px solid #477DAE;
        border-bottom-right-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .buttonicon .blue:last-child {
        border-left: 1px solid #94BADC;
        border-bottom-left-radius: 0 !important;
        border-top-left-radius: 0 !important;
    }

.button.sub-unsub {
    height: 23px;
    line-height: 25px;
}

.button.paid-unpaid {
    height: 23px;
    line-height: 25px;
    padding: 0 15px;
}

.bbold {
    font-weight: 700;
}

.bitalic {
    font-style: italic;
}

.bquote {
    font-family: "Courier New", Courier, mono;
    line-height: 21px;
}

table .icntbl {
    display: block;
    float: right;
    margin-left: 5px;
    margin-top: 4px;
}

.tooltiphelp {
    display: block;
    height: 20px;
    position: absolute;
    right: 30px;
    top: 60px;
    width: 22px;
}

    .tooltiphelp a {
        display: block;
        height: 20px;
        width: 22px;
    }

.refreshtooltiphelp {
    display: block;
    height: 20px;
    position: absolute;
    right: 80px;
    top: 60px;
    width: 22px;
}

    .refreshtooltiphelp a {
        display: block;
        height: 20px;
        width: 22px;
    }

/* Scroll Page
============================================================ */
@media only screen and (min-width : 768px) {
    .scrollpage {
        bottom: 20px;
        position: absolute;
        right: 20px;
        z-index: 1;
    }

        .scrollpage ul {
            overflow: hidden;
            width: 32px;
        }

        .scrollpage li {
            display: block;
            height: 32px;
            margin-bottom: 5px;
            position: relative;
            width: 32px;
        }

            .scrollpage li:last-child {
                margin-bottom: 0;
            }

            .scrollpage li a {
                background-color: #F3F3F3;
                border: 1px solid #CCCCCC;
                border-radius: 3px;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                filter: alpha(opacity=0);
                opacity: 0;
                height: 30px;
                line-height: 30px;
                position: absolute;
                left: 0;
                top: 0;
                -webkit-transition: all linear 0.2s;
                -moz-transition: all linear 0.2s;
                -o-transition: all linear 0.2s;
                -ms-transition: all linear 0.2s;
                transition: all linear 0.2s;
                text-align: center;
                width: 30px;
            }

                .scrollpage li a.scrollopacity {
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                    filter: alpha(opacity=100);
                    opacity: 1;
                }

        .scrollpage a span {
            vertical-align: middle;
        }
}

/* Style Text and Links, images and color containers
============================================================ */
p {
    line-height: 20px;
}

h3 {
    color: #FFF;
    font-size: 13px;
}

h4 {
    font-size: 22px;
    line-height: 22px;
    font-weight: bold;
}

h5 {
    color: #909090;
    font-size: 20px;
    line-height: 32px;
}

h6 {
    color: #666;
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 3px;
}

.pnf {
    margin-top: 10%;
    text-align: center;
    margin: 0 auto;
    width: 950px;
}

.light {
    font-weight: 500 !important;
}

.bold {
    font-weight: 700;
}

.size13 {
    font-size: 13px !important;
}

.titlesize13 {
    border-bottom: 1px dotted #999999;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

p.gray-tablehead {
    background-color: #EDEDED;
    border: 1px solid #DCDCDC;
    border-bottom: none;
    font-weight: bold;
    line-height: 32px !important;
    margin-bottom: 0 !important;
    padding: 5px;
    padding-left: 10px;
}

.color90, .color90 * {
    color: #909090;
    font-weight: normal;
}

.color666, .color666 * {
    color: #666666;
}

.colorRed {
    color: #FF0000 !important;
}

.colorblue {
    color: #4C92B8 !important;
    font-weight: 700;
}

.colorgreen {
    color: #009900 !important;
    font-weight: 700;
}

.underline {
    color: #666666;
    text-decoration: underline !important;
}

    .underline:hover {
        color: #333333;
    }

.textcenter {
    text-align: center;
}

.regular {
    font-weight: normal !important;
}

.italic {
    font-style: italic;
}

.black {
    color: #333333;
    font-weight: 700;
}

.bold {
    font-weight: 700;
}

.linkblue {
    color: #0099FF !important;
    font-size: 12px !important;
    text-decoration: underline;
}

    .linkblue:hover {
        color: #005994 !important;
    }

.linkred {
    color: #ff0000 !important;
    font-size: 12px !important;
    text-decoration: underline;
}

    .linkred:hover {
        color: #A84040 !important;
    }

.mt40 {
    margin-top: 40px;
}

.line24, .line24 * {
    line-height: 24px !important;
    margin-bottom: 10px;
}

.line27 {
    line-height: 27px;
}

.line60 {
    line-height: 60px;
}

.linkunderline {
    color: #666666;
    font-size: 13px;
    text-decoration: underline;
}

.linkback {
    color: #666666;
    font-size: 13px;
    float: right;
    margin-right: 15px;
    font-weight: 700;
    position: relative;
    top: 9px;
}

.linkforgot {
    color: #666666;
    font-size: 13px;
    float: right;
    margin-right: 15px;
    position: relative;
    top: 9px;
}

    .linkforgot:hover {
        text-decoration: underline;
    }

.linknotfound {
    color: #666666;
    font-size: 16px;
}

    .linknotfound:hover {
        text-decoration: underline;
    }

.notlabel {
    color: #666666;
    font-size: 12px;
    margin: 0px 0px 14px 130px;
}

a.hiperblock {
    display: block;
    height: 100%;
    line-height: 50px;
    text-align: center;
    width: 100%;
}

.cp {
    cursor: pointer;
}

.icnsort {
    cursor: move;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: lighter;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

.icntype {
    top: 3px;
    left: 15px;
}

.backtop {
    color: #666666;
    margin-bottom: 60px;
}

.bdotted {
    border-bottom: 1px dotted #CCC;
}

.addfield {
    margin-left: 130px;
    top: 5px;
}

.displayportrait {
    display: none !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mt7 {
    margin-top: 7px;
}

.mt9 {
    margin-top: 9px !important;
}

.mt3 {
    margin-top: 3px;
}

.mt-7 {
    margin-top: -7px;
}

.mt10 {
    margin-top: 10px !important;
}

.mt12 {
    margin-top: 12px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt70 {
    margin-top: 70px !important;
}

.mb0 {
    margin-bottom: 0px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb10mobile {
    margin-bottom: 0;
}

.mb15 {
    margin-bottom: 15px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb50 {
    margin-bottom: 50px;
}

.mr5 {
    margin-right: 5px !important;
}

.mr0 {
    margin-right: 0px !important;
}

.mr15 {
    margin-right: 15px;
}

.mr20 {
    margin-right: 20px !important;
}

.mr80 {
    margin-right: 80px !important;
}

.mr15 {
    margin-right: 15px !important;
}

.mr10 {
    margin-right: 10px !important;
}

.mr5 {
    margin-right: 5px !important;
}

.mr0 {
    margin-right: 0px !important;
}

.ml130 {
    margin-left: 130px !important;
}

.ml194 {
    margin-left: 198px !important;
}

.ml130 {
    margin-left: 130px !important;
}

.ml10 {
    margin-left: 10px !important;
}

.ml15 {
    margin-left: 15px !important;
}

.ml25 {
    margin-left: 25px !important;
}

.ml0 {
    margin-left: 0px !important;
}

.ml5 {
    margin-left: 5px !important;
}

.ml3 {
    margin-left: 3px !important;
}

.mt0 {
    margin-top: 0px !important;
}

.top4 {
    top: 4px !important;
}

.pa0 {
    padding: 0px !important;
}

.pr45 {
    padding-right: 45px !important;
}

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

.p40 {
    padding: 40px !important;
}

.palr10 {
    padding: 0px 10px !important;
}

.palr20 {
    padding: 0px 20px !important;
}

.patrl20 {
    padding: 20px 20px 0px 20px !important;
}

.pb20 {
    padding-bottom: 20px;
}

.pa10 {
    padding: 10px !important;
}

.pa20 {
    padding: 20px !important;
}

.pb70 {
    padding-bottom: 70px !important;
}

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

.pl20 {
    padding-left: 20px !important;
}

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

.pa20:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.pt110 {
    padding-top: 110px !important;
}

.pt90 {
    padding-top: 90px !important;
}

.pt60 {
    padding-top: 60px !important;
}

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

.divcenter {
    margin: 0 auto;
}

.w145 {
    width: 145px;
}

.w220 {
    width: 220px !important;
}

.w275 {
    width: 245px !important;
}

.w238, label.inline.w238 {
    width: 238px;
}

.w245 {
    width: 245px;
}

.w250 {
    width: 250px;
}

.w260 {
    width: 260px;
}

.w335 {
    width: 335px;
}

.w360 {
    width: 360px;
}

.w450 {
    width: 450px;
}

.w460 {
    width: 460px;
}

.w480 {
    width: 480px;
}

.w686 {
    width: 686px;
}

.w676 {
    width: 676px;
}

.divw200 {
    width: 200px !important;
}

.divw300 {
    width: 300px !important;
}

.divw390 {
    width: 390px;
}

.divw480 {
    width: 470px;
}

.divw490 {
    width: 490px !important;
}

.divw500 {
    width: 500px;
}

.divw502 {
    width: 502px;
}

.divw333 {
    width: 333px;
}

.divw348 {
    width: 348px;
}

.divw650 {
    width: 650px !important;
}

.divw630 {
    width: 630px;
}

.divw810 {
    width: 810px;
}

.divw830 {
    width: 830px;
}

.w520 {
    width: 520px;
}

.w580 {
    width: 580px;
}

.w600 {
    width: 600px;
}

.w700 {
    width: 700px;
}

.h42 {
    height: 42px;
}

.h63 {
    height: 63px;
}

.h205 {
    height: 205px;
}

.h180 {
    height: 180px;
}

.h480 {
    height: 480px !important;
}

.imgpro {
    float: left;
    margin-right: 10px;
}

.infoleft {
    display: block;
    float: left;
    line-height: 26px;
}

.ovfh {
    overflow: hidden;
}

.fullwidth {
    box-sizing: border-box;
    width: 100%;
}

ul.inline:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

ul.inline li {
    display: block;
    float: left;
}

ul.inline.mr10 li {
    margin-right: 10px;
}

    ul.inline.mr10 li:last-child {
        margin-right: 0px;
    }

ul.inline.mr20 li {
    margin-right: 20px;
}

    ul.inline.mr20 li:last-child {
        margin-right: 0px;
    }

ul.inline.w100 li {
    width: 100px;
}

ul.inline.w160 li {
    width: 160px;
}

ul.inline.w70 li {
    width: 70px;
}

ul.inline.w50 li {
    width: 50px;
}

ul.listline li {
    display: block;
    margin-bottom: 10px;
}

    ul.listline li:last-child {
        margin-bottom: 0px;
    }

.overflow-y {
    -ms-overflow-y: scroll;
    overflow-y: scroll;
    overflow: auto;
}

    .overflow-y.height150 {
        max-height: 150px;
        overflow: auto;
    }

    .overflow-y.height160 {
        max-height: 160px;
        overflow: auto;
    }

    .overflow-y.height250 {
        max-height: 250px;
        overflow: auto;
    }

    .overflow-y.height300 {
        max-height: 300px;
        overflow: auto;
    }

    .overflow-y.height350 {
        max-height: 350px;
        overflow: auto;
    }

    .overflow-y.height500 {
        max-height: 500px;
        overflow: auto;
    }

.divheight140 {
    height: 145px;
}

.divheight160 {
    height: 160px;
}

.pabright {
    position: absolute;
    right: 50px;
    top: 24px;
}

.pright {
    float: right !important;
}

.left {
    float: left !important;
}

img.imgprofile {
    float: left;
    margin-right: 10px;
}

.notdisplay {
    display: none;
}

.border {
    background-color: #F7F7F7;
    border: 1px solid #CBCBCB;
    border-radius: 4px;
    padding: 10px;
}

.line {
    background-color: #EDEDED;
    clear: both;
    display: block;
    margin-bottom: 20px;
    padding-bottom: 1px;
}

.linelight {
    background-color: #EDEDED;
}

.linedotted {
    border-bottom: 1px dotted #999999;
    clear: both;
    display: block;
    margin-bottom: 10px;
}

a.deletepicture {
    color: #3399FF;
    float: right;
    line-height: 28px;
    margin-right: 221px;
    text-decoration: underline;
}

    a.deletepicture:hover {
        color: #2675C7;
    }

.require {
    color: #F27176;
    font-size: 14px;
    margin-left: 10px;
    position: absolute;
    right: -5px;
    top: 3px;
}

.datelate {
    float: left;
    margin-left: 10px;
    top: 9px;
}

.days {
    text-align: center;
}

.scroll {
    -ms-overflow-y: auto;
    overflow-y: auto;
    padding-right: 5px;
}

    .scroll.h200 {
        max-height: 200px;
        overflow: auto;
    }

    .scroll.h400 {
        max-height: 400px;
        overflow: auto;
    }

    .scroll.h460 {
        max-height: 460px;
        overflow: auto;
    }

    .scroll.h500 {
        max-height: 500px;
        overflow: auto;
    }

.scrollmobile {
    overflow-x: hidden;
}

.bggray {
    background-color: #F3F3F3;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    padding: 10px;
}

    .bggray.bordergreen {
        border-top: 10px solid #1ABC9C;
    }

    .bggray.borderblue {
        border-top: 10px solid #3498db;
    }

    .bggray.borderorange {
        border-top: 10px solid #e67e22;
    }

.bgwhite {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    padding: 10px;
}

.onlymobile {
    display: none !important;
}

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

.icnquestioncalculate {
    display: block;
    float: left;
    margin-top: 8px;
}

.operationEntitlement {
    background-color: #f1f1f1;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    color: #666;
    font-size: 12px;
    margin-bottom: 20px;
    padding: 10px;
}

    .operationEntitlement .op {
        color: #477dae;
        font-size: 12px;
        padding: 0 10px;
    }

.varentitlement {
    font-size: 13px;
    margin-bottom: 30px;
}

    .varentitlement li {
        padding: 5px 0px;
    }

        .varentitlement li span.circle {
            background: rgb(107,160,206); /* Old browsers */
            background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
            border: 1px solid #477dae;
            border-radius: 100%;
            -webkit-box-shadow: inset 0px 1px #94BADC;
            box-shadow: inset 0px 1px #94BADC;
            color: #ffffff;
            display: block;
            float: left;
            margin-right: 10px;
            padding: 2px 6px;
            position: relative;
            top: -3px;
        }

/* Blank State
============================================================ */
.blankstate {
    background-color: #d8edf6;
    border-bottom: 1px solid #a2c9d3;
    border-top: 1px solid #a2c9d3;
    margin: 0 auto;
    min-height: 200px;
    padding: 40px;
    text-align: center;
}

    .blankstate span.spritesheet {
        margin-bottom: 20px;
    }

    .blankstate p.title {
        font-size: 15px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .blankstate p {
        color: #7a979f;
        font-size: 14px;
        line-height: 22px;
        margin: 0 auto 20px;
        max-width: 300px;
        text-align: center;
    }

/* Style Tables
============================================================ */
.wt300 {
    width: 300px !important;
}

.wt370 {
    width: 370px;
}

.wt420 {
    width: 420px;
}

.wt465 {
    width: 465px;
}

.wt500 {
    width: 500px;
}

.wt518 {
    width: 518px;
}

.wt520 {
    width: 520px;
}

.wt590 {
    width: 590px;
}

.wt700 {
    width: 700px;
}

.tcenter, .tcenter * {
    text-align: center;
}

.tright, .tright * {
    text-align: right;
}

.headerborder {
    border: 1px solid #D0D0D0;
}

.table-list-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

table tbody:hover td {
    -webkit-transition: background linear 0.2s;
    -moz-transition: background linear 0.2s;
    -o-transition: background linear 0.2s;
    -ms-transition: background linear 0.2s;
    transition: background linear 0.2s;
}

table.w100per {
    width: 100%;
}

table.trpa4 tbody tr > * {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

table.trpa12 tbody tr > * {
    padding: 12px 10px !important;
}

table {
    color: #666666;
    font-size: 12px;
    width: 100%;
    background-color: #FFFFFF;
}

    table p {
        line-height: 24px;
        word-break: normal;
    }

    table.style1 tbody tr:hover td, table.style2 tbody tr:hover td, table.style3 tbody tr td:hover {
        background-color: #EDFAFF !important;
    }

    table.style1 thead {
        border: 1px solid #DCDCDC;
        box-shadow: 0 1px #FFFFFF inset;
        -webkit-box-shadow: 0 1px #FFFFFF inset;
    }

    table.style1 tbody tr:hover td.bggray:hover {
        background-color: #F3F3F3 !important
    }

    table.style1 thead tr {
        background-color: #FFFFFF;
        padding: 5px 10px;
        color: #292D35;
    }

        table.style1 thead tr th, table.style1 thead tr td {
            padding: 5px;
        }

    table.style1 tbody {
        border: 1px solid #DCDCDC;
    }

        table.style1 tbody tr th, table.style1 tbody tr td {
            line-height: 20px;
            padding: 5px;
            cursor: pointer;
        }

#divAddQuestion table.style1 tbody tr th, #divAddQuestion table.style1 tbody tr td {
    word-wrap: unset;
    word-break: unset;
}

table.style1 tbody tr td, table.style2 tbody tr td, table.style3 tbody tr td, table.style1 tbody tr td p, table.style2 tbody tr td p, table.style3 tbody tr td p {
    word-wrap: break-word;
    word-break: break-word;
}

.noWordWrap {
    word-break: normal !important;
}



table.style1 .kooltip.pright > img {
    position: relative;
    top: 4px;
}

table.style1 tbody tr, table.style2 tbody tr, table.style3 tbody tr {
    border: 1px solid;
    border-color: #D0D0D0;
    border-right: none;
    border-left: none;
}

    table.style1 tbody tr:first-child, table.style2 tbody tr:first-child, table.style3 tbody tr:first-child {
        border-top: none;
    }

table.style2 thead tr td {
    background: #FFFFFF;
    border: 1px solid #D0D0D0;
    border-right-color: transparent;
    padding: 10px 10px;
    line-height: 18px;
    color: #292D35;
    border-bottom: 2px solid #D0D0D0;
}

    table.style2 thead tr td:last-of-type {
        border-right-color: #D0D0D0;
    }

table.style2 tbody {
    border: 1px solid #D0D0D0;
    border-top: none;
}

    table.style2 tbody tr th {
        background: #fff;
        font-size: 16px;
        font-weight: 700;
    }

    table.style2 tbody tr th, table.style2 tbody tr td {
        line-height: 16px;
        padding: 8px 10px;
    }

.drTag {
    text-align: center;
}

.categoryBadgeText {
    margin: 1px;
}

table.style2.tasks div.checker {
    float: left;
    margin-top: 2px;
}

table.style2 td.name.w160 {
    width: 160px !important;
}

table.style2 td.location {
    width: 109px;
}

table.style2 td.customListlocation {
    width: auto;
}

table.style2 td.customListdepartment {
    width: auto;
}

table.style2 td.date {
    width: 135px;
}

table.style2 td.time {
    width: 95px;
}

table.style2 td.department {
    width: 100px;
}

table.style2 td.job_title {
    width: 128px;
}

table.style2 td.employeeslist {
    width: 141px;
}

table.employees_list tbody tr:hover td,
table#tasks tr:hover > *, table.query_list tbody tr:hover td, table#tblGoalList tr:hover > *, table.tableperformancereview tbody tr:hover td {
    cursor: pointer;
}

table.autho tbody tr th {
    line-height: 25px !important;
}

table.nocolbor tr th, table.nocolbor tr td {
    border-right: none !important;
}

table.matrix thead tr td {
    border-top-color: #DCDCDC;
}

table.globalthings tbody tr td {
    cursor: pointer;
}

table.lhfix tbody tr td {
    line-height: 25px !important;
}

.hide {
    display: none;
}

div.stickyHeader {
    background: #fff;
    padding-top: 26px;
    position: fixed;
    _position: absolute;
    top: 111px;
}

.myGrid .fixedColumn {
    border-right: 1px solid #dcdcdc;
}

/* Sprites
============================================================ */
.spritesheet {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') no-repeat top left;
    display: inline-block;
    position: relative;
}

    .spritesheet.icnsystem {
        background-position: 0 0;
        width: 16px;
        height: 16px;
    }

    .spritesheet.icnprofile {
        background-position: 0 -26px;
        width: 17px;
        height: 16px;
    }

    .spritesheet.icndash {
        background-position: 0 -52px;
        width: 24px;
        height: 24px;
        top: 6px;
    }

    .spritesheet.icnemplo {
        background-position: 0 -86px;
        width: 26px;
        height: 17px;
        top: 2px;
    }

    .spritesheet.icnmydetail {
        background-position: 0 -2810px;
        width: 21px;
        height: 19px;
        top: 2px;
    }

    .spritesheet.icndocu {
        background-position: 0 -113px;
        width: 18px;
        height: 21px;
        top: 4px;
    }

    .spritesheet.icnplan {
        background-position: 0 -144px;
        width: 21px;
        height: 21px;
        top: 4px;
    }

    .spritesheet.icntask {
        background-position: 0 -175px;
        width: 21px;
        height: 21px;
        top: 5px;
    }

    .spritesheet.icnlogs {
        background-position: 0 -206px;
        width: 16px;
        height: 20px;
        top: 5px;
    }

    .spritesheet.icnrepor {
        background-position: 0 -236px;
        width: 24px;
        height: 20px;
        top: 4px;
    }

    .spritesheet.icnqueries {
        background-position: 0 -266px;
        width: 16px;
        height: 20px;
        top: 4px;
    }

    .spritesheet.icntrain {
        background-position: 0 -296px;
        width: 19px;
        height: 18px;
        top: 3px;
    }

    .spritesheet.icnappli {
        background-position: 0 -324px;
        width: 18px;
        height: 19px;
        top: 3px;
    }

    .spritesheet.icnsystem2 {
        background-position: 0 -353px;
        width: 20px;
        height: 20px;
        top: 4px;
    }

    .spritesheet.icntime, .spritesheet.icntime2, .spritesheet.icntime3, .spritesheet.icntime9119 {
        background-position: 0 -411px;
        width: 16px;
        height: 16px;
    }

    .spritesheet.icnprofile2 {
        background-position: 0 -437px;
        width: 17px;
        height: 16px;
    }

    .spritesheet.icnplusbig {
        background-position: 0 -437px;
        width: 21px;
        height: 21px;
    }

    .spritesheet.icnsearch {
        background-position: 0 -468px;
        width: 21px;
        height: 22px;
    }

    .spritesheet.icnclose {
        background-position: 0 -500px;
        width: 11px;
        height: 12px;
    }

    .spritesheet.icnclose1 {
        background-position: 0 -500px;
        width: 11px;
        height: 22px;
        margin-bottom: 10px;
    }

    .spritesheet.icnclose2 {
        background-position: 0 -522px;
        width: 10px;
        height: 10px;
        margin-right: 10px;
    }

    .spritesheet.icnupload {
        background-position: 0 -542px;
        width: 12px;
        height: 23px;
    }

    .spritesheet.employees {
        background-position: 0 -575px;
        width: 40px;
        height: 27px;
    }

    .spritesheet.arrowtop {
        background-position: 0 -612px;
        width: 6px;
        height: 6px;
        margin-left: 5px;
    }

    .spritesheet.arrowbottom {
        background-position: 0 -626px;
        width: 6px;
        height: 6px;
        margin-left: 5px;
    }

    .spritesheet.arrowright {
        background-position: 0 -640px;
        width: 4px;
        height: 6px;
    }

    .spritesheet.arrowleftcal {
        background-position: 0 -656px;
        width: 6px;
        height: 9px;
        margin: 0 4px;
    }

    .spritesheet.arrowrightcal {
        background-position: 0 -675px;
        width: 6px;
        height: 9px;
        margin: 0 4px;
    }

    .spritesheet.icnuploadbig {
        background-position: 0 -694px;
        width: 40px;
        height: 40px;
    }

    .spritesheet.sel_edit {
        background-position: 0 -744px;
        width: 39px;
        height: 47px;
    }

    .spritesheet.folder {
        background-position: 0 -801px;
        width: 18px;
        height: 14px;
        margin-right: 5px;
    }

    .spritesheet.file {
        background-position: 0 -825px;
        width: 14px;
        height: 16px;
        margin-right: 5px;
        top: 3px;
    }

    .spritesheet.icnseluser {
        background-position: 0 -851px;
        width: 69px;
        height: 64px;
    }

    .spritesheet.icnadd {
        background-position: 0 -925px;
        width: 15px;
        height: 15px;
        top: 3px
    }

    .spritesheet.icnimport {
        background-position: 0 -950px;
        width: 22px;
        height: 21px;
        top: 6px
    }

    .spritesheet.icndocu2 {
        background-position: 0 -981px;
        width: 27px;
        height: 31px;
    }

    .spritesheet.icnexport {
        background-position: 0 -1022px;
        width: 11px;
        height: 8px;
        margin-left: 5px;
    }

    .spritesheet.icncheck {
        background-position: 0 -1040px;
        width: 12px;
        height: 12px;
        margin-right: 8px;
        top: 2px;
    }

    .spritesheet.icnchange {
        background-position: 0 -1062px;
        width: 16px;
        height: 17px;
        margin-right: 8px;
    }

    .spritesheet.icncsv {
        background-position: 0 -1088px;
        width: 29px;
        height: 21px;
        top: 14px;
    }

    .spritesheet.icnemplo2 {
        background-position: 0 -1119px;
        width: 22px;
        height: 21px;
        top: 6px;
        margin-left: 5px;
    }

    .spritesheet.plannerarrowleft {
        background-position: 0 -1151px;
        width: 14px;
        height: 22px;
        top: 7px;
        left: 0;
    }

    .spritesheet.plannerarrowright {
        background-position: 0 -1182px;
        width: 14px;
        height: 22px;
        top: 7px;
        left: 0;
    }

    .spritesheet.icnother {
        background-position: 0 -1892px;
        width: 3px;
        height: 15px;
    }

    .spritesheet.icnmeetings {
        background-position: 0 -1233px;
        width: 25px;
        height: 14px;
    }

    .spritesheet.icnsick {
        background-position: 0 -1257px;
        width: 14px;
        height: 16px;
    }

    .spritesheet.icnholidays {
        background-position: 0 -1284px;
        width: 18px;
        height: 17px;
    }

    .spritesheet.icnotherleave {
        background-position: -153px -1194px;
        width: 15px;
        height: 15px;
    }

    .spritesheet.icnotherworking {
        background-position: -152px -2202px;
        width: 15px;
        height: 15px;
    }

    .spritesheet.icnlate {
        background-position: 0 -2074px;
        width: 15px;
        height: 15px;
        top: 4px;
    }

    .spritesheet.icnpubhol {
        background-position: 0 -2228px;
        width: 26px;
        height: 22px;
        top: 7px;
    }

    .spritesheet.icnmatpat {
        background-position: 0 -2257px;
        width: 14px;
        height: 16px;
        top: 1px;
    }

    .spritesheet.icntimes {
        background-position: 0 -2282px;
        width: 13px;
        height: 16px;
        top: 2px;
    }

    .spritesheet.icnarrowtop {
        background-position: 0 -1310px;
        width: 9px;
        height: 6px;
    }

    .spritesheet.icnarrowbottom {
        background-position: 0 -1326px;
        width: 9px;
        height: 6px;
    }

    .spritesheet.icnarrowleft {
        background-position: 0 -1342px;
        width: 6px;
        height: 9px;
    }

    .spritesheet.icnarrowright {
        background-position: 0 -1361px;
        width: 6px;
        height: 9px;
    }

    .spritesheet.icnbullet {
        background-position: 0 -1407px;
        width: 6px;
        height: 9px;
        margin-right: 4px;
        top: 2px;
    }

    .spritesheet.icnqueriesbig {
        background-position: 0 -1424px;
        width: 48px;
        height: 61px;
    }

    .spritesheet.icnqueriesmed {
        background-position: 0 -1495px;
        width: 24px;
        height: 31px;
    }

    .spritesheet.icnreminders {
        background-position: 0 -1536px;
        width: 11px;
        height: 11px;
    }

    .spritesheet.icnedit {
        background-position: 0 -1558px;
        width: 10px;
        height: 11px;
        margin-right: 5px;
        top: 2px;
    }

    .spritesheet.icnprint {
        background-position: 0 -1579px;
        width: 9px;
        height: 11px;
        margin-right: 5px;
        top: 2px;
    }

    .spritesheet.icnoptions {
        background-position: 0 -1601px;
        width: 11px;
        height: 12px;
        margin-right: 5px;
        top: 2px;
    }

    .spritesheet.icncount {
        background-position: 0 -1624px;
        width: 7px;
        height: 8px;
    }

    .spritesheet.icnfilter {
        background-position: 0 -1642px;
        width: 6px;
        height: 6px;
    }

    .spritesheet.icncsv2 {
        background-position: 0 -1658px;
        width: 16px;
        height: 16px;
    }

    .spritesheet.icnpdf {
        background-position: 0 -1684px;
        width: 16px;
        height: 16px;
    }

    .spritesheet.icngraphic {
        background-position: 0 -1710px;
        width: 16px;
        height: 16px;
    }

    .spritesheet.icnimportant {
        background-position: 0 -1736px;
        width: 22px;
        height: 23px;
    }

    .spritesheet.icnstart {
        background-position: 0 -1766px;
        width: 20px;
        height: 20px;
    }

    .spritesheet.icnadd2 {
        background-position: 0 -1796px;
        width: 7px;
        height: 13px;
    }

    .spritesheet.icnfilter2 {
        background-position: 0 -1820px;
        width: 16px;
        height: 16px;
    }

    .spritesheet.icnarrowbottom2 {
        background-position: 0 -1819px;
        width: 7px;
        height: 4px;
        top: -1px;
    }

    .spritesheet.icnselectarea {
        background-position: 0 -1833px;
        width: 18px;
        height: 18px;
    }

    .spritesheet.icnstardis {
        background-position: 0px -1812px;
        width: 22px;
        height: 23px;
    }

    .spritesheet.icnpointred {
        background-position: 0px -1917px;
        width: 10px;
        height: 10px;
    }

    .spritesheet.icnpointgreen {
        background-position: 0px -1937px;
        width: 10px;
        height: 10px;
    }

    .spritesheet.icnpointblue {
        background-position: 0px -1957px;
        width: 10px;
        height: 10px;
    }

    .spritesheet.icnpointyellow {
        background-position: 0px -1977px;
        width: 10px;
        height: 10px;
    }

    .spritesheet.icnleavers {
        background-position: 0px -2023px;
        width: 19px;
        height: 21px;
        top: 6px;
    }

    .spritesheet.icndatelate {
        background-position: 0px -1997px;
        width: 16px;
        height: 16px;
        top: 11px;
    }

    .spritesheet.icndate_expiry {
        background-position: 0px -2099px;
        width: 16px;
        height: 16px;
        top: 4px;
    }

    .spritesheet.icnpencil {
        background-position: 0px -2147px;
        width: 11px;
        height: 11px;
    }

    .spritesheet.icnfire {
        background-position: 0px -2167px;
        width: 15px;
        height: 24px;
    }

    .spritesheet.icnclock {
        background-position: 0px -2342px;
        width: 12px;
        height: 12px;
        top: 2px;
    }

    .spritesheet.icninterview {
        background-position: 0px -2364px;
        width: 16px;
        height: 15px;
        margin-right: 10px;
        float: left;
    }

    .spritesheet.icnmedical {
        background-position: 0px -2389px;
        width: 12px;
        height: 15px;
        margin-right: 10px;
        float: left;
    }

    .spritesheet.icnnotification {
        background-position: 0px -2414px;
        width: 20px;
        height: 14px;
        top: 7.5px;
    }

    .spritesheet.feedback {
        background-position: -118px -2175px;
        width: 48px;
        height: 51px;
        top: 2px;
    }

    .spritesheet.icnauthorization {
        background-position: 0px -2438px;
        width: 20px;
        height: 20px;
        top: 4px;
    }

    .spritesheet.icnglobalaction {
        background-position: -75px -1428px;
        width: 22px;
        height: 22px;
        top: 6px;
    }

    .spritesheet.icnorganizations {
        background-position: -78px -2487px;
        width: 19px;
        height: 21px;
        top: 6px;
    }

    .spritesheet.icnlock {
        background-position: 0px -2468px;
        width: 10px;
        height: 11px;
        margin-right: 8px;
        top: 2px;
    }

    .spritesheet.icnlockBigBlue {
        background-position: -75px -2352px;
        width: 23px;
        height: 25px;
        margin-right: 8px;
        top: 2px;
    }

    .spritesheet.icnunlock {
        background-position: 0px -2489px;
        width: 13px;
        height: 11px;
        margin-right: 8px;
        top: 2px;
    }

    .spritesheet.icnlockbig {
        background-position: 8px -2503px;
        width: 16px;
        height: 18px;
    }

    .spritesheet.icnhalflockbig {
        background-position: -147px -1849px;
        width: 16px;
        height: 18px;
    }

    .spritesheet.icnbreakarrow {
        background-position: 0px -2538px;
        width: 7px;
        height: 12px;
        margin-left: 6px;
        top: 2px;
    }

    .spritesheet.icnplussmall {
        background-position: 0px -2560px;
        width: 12px;
        height: 13px;
    }

    .spritesheet.icnsicksmallg {
        background-position: 0px -2583px;
        width: 12px;
        height: 13px;
    }

    .spritesheet.icnsicksmallw {
        background-position: 0px -2606px;
        width: 12px;
        height: 13px;
    }

    .spritesheet.icnholismallg {
        background-position: 0px -2629px;
        width: 14px;
        height: 13px;
    }

    .spritesheet.icnholismallw {
        background-position: 0px -2651px;
        width: 14px;
        height: 13px;
    }

    .spritesheet.icnmeetsmallg {
        background-position: 0px -2674px;
        width: 15px;
        height: 8px;
    }

    .spritesheet.icnmeetsmallw {
        background-position: 0px -2692px;
        width: 15px;
        height: 8px;
    }

    .spritesheet.icnsickterg {
        background-position: 0px -2710px;
        width: 9px;
        height: 18px;
    }

    .spritesheet.icnsickterw {
        background-position: 0px -2738px;
        width: 9px;
        height: 18px;
    }

    .spritesheet.icnlateg {
        background-position: 0px -2766px;
        width: 12px;
        height: 12px;
    }

    .spritesheet.icnlatew {
        background-position: 0px -2788px;
        width: 12px;
        height: 12px;
    }

    .spritesheet.icnglobalth {
        background-position: 0px -2838px;
        width: 30px;
        height: 29px;
    }

    .spritesheet.icnplus {
        background-position: 0px -2877px;
        width: 11px;
        height: 11px;
    }

    .spritesheet.icnsingleemp {
        background-position: 0px -2898px;
        width: 15px;
        height: 12px;
    }

    .spritesheet.icnmulemp {
        background-position: 0px -2920px;
        width: 18px;
        height: 10px;
    }

    .spritesheet.icnreports {
        background-position: 0px -2940px;
        width: 30px;
        height: 25px;
    }

    .spritesheet.icnnewemplob {
        background-position: -70px 0px;
        width: 25px;
        height: 26px;
    }

    .spritesheet.icnphoneb {
        background-position: -70px -36px;
        width: 25px;
        height: 25px;
    }

    .spritesheet.icntrainingb {
        background-position: -70px -71px;
        width: 26px;
        height: 10px;
    }

    .spritesheet.icnsalaryb {
        background-position: -70px -91px;
        width: 18px;
        height: 25px;
    }

    .spritesheet.icnnewdocb {
        background-position: -70px -126px;
        width: 21px;
        height: 25px;
    }

    .spritesheet.icnleaveb {
        background-position: -70px -161px;
        width: 25px;
        height: 22px;
    }

    .spritesheet.icndeleteb {
        background-position: -70px -193px;
        width: 25px;
        height: 25px;
    }

    .spritesheet.icnelevatedb {
        background-position: -70px -228px;
        width: 25px;
        height: 22px;
    }

    .spritesheet.icnsecurityb {
        background-position: -70px -260px;
        width: 25px;
        height: 25px;
    }

    .spritesheet.icnholidayb {
        background-position: -70px -295px;
        width: 25px;
        height: 25px;
    }

    .spritesheet.icnmissions {
        background-position: -86px -659px;
        width: 11px;
        height: 16px;
    }

    .spritesheet.icnnavstatus {
        background-position: -81px -843px;
        width: 16px;
        height: 16px;
    }

    .spritesheet.icnhelp {
        background-position: -75px -1173px;
        width: 22px;
        height: 22px;
    }

    .spritesheet.icnnewadmin {
        background-position: -71px -2213px;
        width: 25px;
        height: 23px;
    }

    .spritesheet.icnabsent {
        background-position: -71px -2246px;
        width: 26px;
        height: 26px;
    }

    .spritesheet.icndocname {
        background-position: -77px -2282px;
        width: 20px;
        height: 24px;
    }

    .spritesheet.icnleave {
        background-position: -72px -2316px;
        width: 25px;
        height: 26px;
    }

    .spritesheet.icnsalarynew {
        background-position: -76px -2386px;
        width: 20px;
        height: 23px;
    }

    .spritesheet.icndowngrade {
        background-position: -72px -2419px;
        width: 24px;
        height: 23px;
    }

    .spritesheet.icngear {
        background-position: -72px -2453px;
        width: 24px;
        height: 23px;
    }

    .spritesheet.icnribbonholiday {
        background-position: -78px -685px;
        width: 18px;
        height: 21px;
    }

    .spritesheet.icnribbonsalary {
        background-position: -78px -717px;
        width: 18px;
        height: 21px;
    }

    .spritesheet.icnribbondelete {
        background-position: -78px -749px;
        width: 18px;
        height: 21px;
    }

    .spritesheet.icnribbonamended {
        background-position: -78px -781px;
        width: 18px;
        height: 21px;
    }

    .spritesheet.icnribbonsecurity {
        background-position: -78px -812px;
        width: 18px;
        height: 21px;
    }

    .spritesheet.icnactivemissions {
        background-position: -71px -1205px;
        width: 28px;
        height: 40px;
    }

    .spritesheet.icnpastmissions {
        background-position: -60px -1255px;
        width: 35px;
        height: 40px;
    }

    .spritesheet.icnchecktasks {
        background-position: -87px -1305px;
        width: 10px;
        height: 8px;
        top: 2px;
    }

    .spritesheet.icnweekremaining {
        background-position: -87px -1323px;
        width: 10px;
        height: 12px;
        top: 1px;
    }

    .spritesheet.icnnewmission {
        background-position: -64px -1383px;
        width: 33px;
        height: 34px;
    }

    .spritesheet.icnheadingmission {
        background-position: -77px -1461px;
        width: 20px;
        height: 31px;
    }

    .spritesheet.icnemployeessmall {
        background-position: -77px -1522px;
        width: 20px;
        height: 11px;
    }

    .spritesheet.icnholidaysmall {
        background-position: -82px -1543px;
        width: 15px;
        height: 14px;
    }

    .spritesheet.icntagholiday {
        background-position: -82px -1636px;
        width: 15px;
        height: 14px;
    }

    .spritesheet.icntagabsent {
        background-position: -82px -1661px;
        width: 15px;
        height: 13px;
    }

    .spritesheet.icntagotherleave {
        background-position: -156px -1194px;
        width: 15px;
        height: 13px;
    }

    .spritesheet.icnblankstatemission {
        background-position: -60px -1684px;
        width: 35px;
        height: 40px;
    }

    .spritesheet.icnblankstateteam {
        background-position: -33px -1734px;
        width: 64px;
        height: 53px;
    }

    .spritesheet.icnblankstateabsences {
        background-position: -51px -1799px;
        width: 46px;
        height: 45px;
    }

    .spritesheet.icnblanktimeline {
        background-position: -67px -2213px;
        width: 35px;
        height: 40px;
    }

    .spritesheet.icnsettings {
        background-position: -78px -1876px;
        height: 20px;
        top: 7px;
        width: 20px;
    }

    .spritesheet.icnrocketmission {
        background-position: -84px -2051px;
        height: 20px;
        top: 5px !important;
        left: -2px;
        width: 13px;
    }

    .spritesheet.icncloseoverlay {
        background-position: -87px -2125px;
        height: 10px;
        width: 10px;
    }

    .spritesheet.icnnewsfeed {
        background-position: -69px -2931px;
        height: 27px;
        width: 28px;
        top: 6px;
    }

    .spritesheet.icnthanks {
        background-position: -77px -2584px;
        height: 18px;
        width: 20px;
        top: 3px;
    }

    .spritesheet.icnthanksblue {
        background-position: -74px -2654px;
        height: 20px;
        width: 23px;
        margin-right: 5px;
        top: 3px;
    }

    .spritesheet.icnstar {
        background-position: -80px -2722px;
        height: 17px;
        width: 17px;
        margin-right: 2px;
        top: 3px;
    }

    .spritesheet.icneditcomment {
        background-position: -84px -2757px;
        height: 14px;
        width: 13px;
        top: 2px;
    }

    .spritesheet.icndeletecomment {
        background-position: -86px -2782px;
        height: 13px;
        width: 11px;
        top: 1px;
    }

    .spritesheet.icnlocation {
        background-position: -88px -2842px;
        height: 11px;
        width: 8px;
        top: 1px;
    }

    .spritesheet.icnoffice {
        background-position: -84px -2864px;
        height: 12px;
        width: 12px;
        top: 1px;
    }

    .spritesheet.icnnotfoundskills {
        background-position: -115px 0px;
        height: 60px;
        width: 56px;
    }

    .spritesheet.icnperformance {
        background-position: -152px -70px;
        height: 17px;
        width: 18px;
        top: 3px;
    }

    .spritesheet.icnnavabsences {
        background-position: -81px -1125px;
        width: 16px;
        height: 14px;
    }

    .spritesheet.icnreview {
        background-position: -127px -399px;
        width: 44px;
        height: 40px;
    }

    .spritesheet.icnreview2 {
        background-position: -127px -548px;
        width: 44px;
        height: 40px;
    }

    .spritesheet.icnactivereview {
        background-position: -145px -449px;
        width: 26px;
        height: 40px;
    }

    .spritesheet.icnpastreview {
        background-position: -134px -498px;
        width: 35px;
        height: 40px;
    }

    .spritesheet.icnprint {
        background-position: -153px -634px;
        width: 18px;
        height: 18px;
    }

    .spritesheet.icnexceldownload {
        background-position: -153px -2146px;
        width: 18px;
        height: 18px;
    }

    .spritesheet.icn360 {
        background-position: -157px -662px;
        width: 13px;
        height: 14px;
    }

    .spritesheet.icnstartsmall {
        background-position: -161px -687px;
        width: 10px;
        height: 9px;
    }

    .spritesheet.icnbalance {
        background-position: -125px -707px;
        width: 46px;
        height: 46px;
    }

    .spritesheet.icnlockp {
        background-position: -127px -763px;
        width: 44px;
        height: 48px;
    }

    .spritesheet.icnmedal {
        background-position: -127px -821px;
        width: 44px;
        height: 56px;
    }

    .spritesheet.icnstartextrabig {
        background-position: -127px -887px;
        width: 44px;
        height: 43px;
    }

    .spritesheet.icncalendar {
        background-position: -127px -940px;
        width: 44px;
        height: 44px;
    }

    .spritesheet.icnpeople {
        background-position: -156px -995px;
        width: 15px;
        height: 14px;
    }

    .spritesheet.icnpeoplestar {
        background-position: -153px -1019px;
        width: 18px;
        height: 16px;
    }

    .spritesheet.icncheckgreen {
        background-position: -157px -1046px;
        width: 14px;
        height: 14px;
    }

    .spritesheet.icncheckgray {
        background-position: -157px -2088px;
        width: 14px;
        height: 14px;
    }

    .spritesheet.icncheckgbig {
        background-position: -149px -1069px;
        width: 22px;
        height: 22px;
    }

    .spritesheet.icnalert {
        background-position: -147px -1100px;
        width: 24px;
        height: 24px;
    }

    .spritesheet.icnarrowbwhite {
        background-position: -156px -1226px;
        width: 6px;
        height: 4px;
        margin-left: 8px;
        top: -1px;
    }

    .spritesheet.icnarrowtwhite {
        background-position: -164px -1226px;
        width: 6px;
        height: 4px;
        margin-left: 8px;
        top: -1px;
    }

    .spritesheet.icnmanagerstatus {
        background-position: -155px -1134px;
        width: 16px;
        height: 23px;
        top: -7px !important;
    }

    .spritesheet.icnemployeestatus {
        background-position: -155px -1166px;
        width: 16px;
        height: 16px;
    }

    .spritesheet.vacancyapplicant {
        background-position: -154px -1238px;
        width: 16px;
        height: 16px;
    }

    .spritesheet.appLink {
        background-position: -154px -1265px;
        width: 16px;
        height: 16px;
    }

    .spritesheet.icncasemanagement {
        background-position: -146px -1294px;
        width: 16px;
        height: 16px;
    }

    .spritesheet.icnbenefitblank {
        background-position: -122px -1374px;
        width: 50px;
        height: 60px;
    }

    .spritesheet.icnbenefits {
        background-position: -144px -1436px;
        width: 26px;
        height: 30px;
        top: 6px;
    }

    .spritesheet.icnD {
        background-position: -161px -1484px;
        width: 10px;
        height: 10px;
        top: 8px;
        float: right !important;
    }

    .spritesheet.icnworkflow {
        background-position: -149px -1571px;
        height: 28px;
        top: 7px;
        width: 21px;
    }

    .spritesheet.increfresh {
        background-position: 12px -1550px;
        height: 23px;
        top: -2px;
        width: 30px;
    }

    .spritesheet.icnexpenses {
        background-position: -145px -1652px;
        height: 25px;
        width: 25px;
        top: 7px;
    }

    .spritesheet.icnblankstateexpenses {
        background-position: -124px -1692px;
        height: 45px;
        width: 45px;
    }

    .spritesheet.icnaccrual {
        background-position: -147px -1849px;
        width: 16px;
        height: 18px;
    }

    .spritesheet.icndownload {
        background-position: -151px -2145px;
        width: 20px;
        height: 18px;
        top: 5px;
    }

    .spritesheet.reportpublish {
        background-position: 0px -924px;
        width: 16px;
        height: 16px;
    }

.form .error span.tipyinfo.toolerrorBlock {
    background-color: #FFE3E3;
    border: 1px solid #FFAAAA;
    color: #FF7C85;
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1px;
    visibility: visible;
}

span.tipyinfo.toolerrorBlock:after {
    border-right-color: #FFE3E3;
}

span.tipyinfo.toolerrorBlock:before {
    border-right-color: #FFAAAA;
}

.form .error span.tipyinfo.toolerrorBlock {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9;
}

.vam label, .vam input, .vam img, .vam select, .vam span, .vam strong.indianRupee, .vam strong, .vam small {
    vertical-align: middle;
}

.w100p {
    width: 100% !important;
}

.w50p {
    width: 50%;
}

.w20p {
    width: 35%;
    margin-left: 24% !important;
}

.w75p {
    width: 75%;
}

.w80p {
    width: 80%;
}

.w90p {
    width: 90%;
}

.w92p {
    width: 92%;
}

.w95p {
    width: 95%;
}

.w25 {
    width: 25px;
}

.w70 {
    width: 70px;
}

.w75 {
    width: 75px;
}

.w90 {
    width: 90px;
}

.w95 {
    width: 95px;
}

.w100 {
    width: 100px !important;
}

.w121, label.inline.w121 {
    width: 121px !important;
}

.w175, label.inline.w175 {
    width: 175px !important;
}

.w132 {
    width: 132px;
}

.w150 {
    width: 150px;
}

.w140 {
    width: 140px;
}

.w215 {
    width: 215px;
}

.w260 {
    width: 260px;
}

.w292 {
    width: 292px;
}

.w300 {
    width: 300px;
}

.w310 {
    width: 310px;
}

.w334 {
    width: 334px;
}

.w351 {
    width: 351px;
}

.w400 {
    width: 400px;
}

.divw470 {
    width: 470px;
}

.wid40 {
    width: 40px !important;
}

.wid47 {
    width: 47px !important;
}

.wid60 {
    width: 60px !important;
}

.wid70 {
    width: 45px !important;
}

.wid182 {
    width: 182px !important;
}

.wid205 {
    width: 205px !important;
}

.wid274 {
    width: 274px !important;
}

.wid280 {
    width: 280px !important;
}

.wid321 {
    width: 321px !important;
}

.wid350 {
    width: 350px !important;
}

.wid360 {
    width: 360px !important;
}

.wid590 {
    width: 590px;
}

.wid920 {
    width: 920px !important;
}

.widA {
    width: auto !important
}

.maxHgt320 {
    max-height: 320px;
    height: auto !important;
}

.minHgt50 {
    min-height: 50px;
    height: auto !important;
}

.hgt38 {
    height: 38px;
    line-height: 38px;
}

.mhh500 {
    max-height: 500px;
    height: 400px;
}

.overflowYAuto {
    overflow-y: auto !important;
}

.hgt16 {
    height: 16px !important;
}

.hgt30 {
    height: 30px !important;
}

.txtCenter {
    text-align: center;
}

.txtRht {
    text-align: right;
}

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

.linehgt20 {
    line-height: 20px !important;
}

.noEleWrap {
    padding-top: 10px;
    overflow: hidden;
}

input.text.smallInput {
    height: 18px !important;
    line-height: 18px\9 !important;
}

.marA {
    margin: 0 auto;
}

.marRN {
    margin-right: 0px !important;
}

.marR10 {
    margin-right: 10px !important;
}

.marR20 {
    margin-right: 20px !important;
}

.marLN {
    margin-left: 0px !important;
}

.marL5 {
    margin-left: 5px;
}

.marL20 {
    margin-left: 20px !important;
}

.marL15 {
    margin-left: 15px !important;
}

.marTN {
    margin-top: 0 !important;
}

.hgtN {
    height: auto !important;
}

.marT4 {
    margin-top: 4px !important;
}

.marT5 {
    margin-top: 5px !important;
}

.marT8 {
    margin-top: 8px !important;
}

.marT10 {
    margin-top: 10px !important;
}

.marT13 {
    margin-top: 13px !important;
}

.marT20 {
    margin-top: 20px !important;
}

.marT40 {
    margin-top: 40px !important;
}

.marT80 {
    margin-top: 80px !important;
}

.marT26 {
    margin-top: 26px !important;
}

.marBN {
    margin-bottom: 0px !important;
}

.marB5 {
    margin-bottom: 5px;
}

.marB6 {
    margin-bottom: 6px !important;
}

.marB7 {
    margin-bottom: 7px;
}

.marB10 {
    margin-bottom: 10px !important;
}

.padN {
    padding: 0 !important;
}

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

.padT3 {
    padding-top: 3px !important;
}

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

.padT40 {
    padding-top: 40px !important;
}

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

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

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

.padLR5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.padLR30 {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.padLR2 {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

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

.padB10p {
    padding-bottom: 10%;
}

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

.padR30 {
    padding-right: 30px !important;
}

.top5 {
    top: 5px;
}

.bdrN {
    border: none !important;
}

.fltLft {
    float: left;
}

.fltRht {
    float: right;
}

.fltN {
    float: none !important;
}

.clearfixN:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

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

.disBlck {
    display: block !important;
}

.lineHgt35 {
    line-height: 35px;
}

.overF {
    overflow: hidden;
}

.overFN {
    overflow: visible !important;
}

.posR {
    position: relative;
}

.posA {
    position: absolute;
}

.posN {
    position: static;
    top: auto;
}

.right20 {
    right: 20px;
}

.bottom5 {
    bottom: 5px;
}

.blueTxt {
    color: #3498db !important;
}

.fontB {
    font-weight: bold;
}

.form .error div.selector {
    background-image: none;
    background-color: #fff;
    border-radius: 3px;
    height: 38px;
    line-height: 38px;
}

    .form .error div.selector span {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') no-repeat right -182px;
    }

.formRhtDv {
    margin-left: 130px;
}

.form .w313 div.selector {
    width: 313px;
}

.formMarginLft {
    margin-left: 120px;
}

.boxSizing {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.commonColListWrap {
}

.commonColList {
    margin: 0 -10px;
}

    .commonColList li {
        list-style: none;
        display: inline-block;
        vertical-align: top;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box; /* Firefox, other Gecko */
        box-sizing: border-box; /* Opera/IE 8+ */
    }

        .commonColList li .commonColListIn {
            padding: 0 10px;
        }

    .commonColList.oneColList li {
        width: 100%;
    }

    .commonColList.twoColList li {
        width: 50%;
    }

    .commonColList.threeColList li {
        width: 33.33%;
    }

    .commonColList.fourColList li {
        width: 25%;
    }

.MergedDocumentTxtEditorControlListWrap {
}

    .MergedDocumentTxtEditorControlListWrap li {
        padding: 0 10px;
    }

        .MergedDocumentTxtEditorControlListWrap li:nth-of-type(1) {
            width: 64%;
        }

        .MergedDocumentTxtEditorControlListWrap li:nth-of-type(2) {
            width: 20%;
        }

        .MergedDocumentTxtEditorControlListWrap li:nth-of-type(3) {
            width: 15%;
        }

        .MergedDocumentTxtEditorControlListWrap li label {
            padding-bottom: 10px;
            display: block;
        }

        .MergedDocumentTxtEditorControlListWrap li .commonColListIn {
            padding: 10px;
            border: 1px solid #ededed;
        }

        .MergedDocumentTxtEditorControlListWrap li:nth-of-type(3) .commonColListIn {
            border: none;
        }

.rollOverList li {
}

    .rollOverList li:nth-of-type(1) {
        width: 38%;
    }

    .rollOverList li:nth-of-type(2) {
        width: 62%;
    }

.MergedDocumentTxtEditorControlList li {
    width: 25% !important;
}

    .MergedDocumentTxtEditorControlList li .commonColListIn {
        padding: 0;
        border: none;
    }

.commonColList li input:not(#tagedit-input), .commonColList li textarea, .commonColList li select, .commonColList li .selector, .commonColList li .selector select {
    width: 100% !important;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.fullWidDv input, .fullWidDv textarea, .fullWidDv select, .fullWidDv .selector, .fullWidDv .selector select {
    width: 100% !important;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.fullWidDvChzn .chzn-container, .fullWidDvChzn .chzn-container .chzn-choices, .fullWidDvChzn .chzn-container .chzn-drop {
    width: 100% !important;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

    .fullWidDvChzn .chzn-container .chzn-choices li {
        width: auto;
    }

.employeeTypeChznDv {
    margin-left: 66px;
    width: 370px;
}

.salaryDetailsList {
    width: 520px;
}

    .salaryDetailsList li:nth-of-type(1) {
        width: 40%;
    }

    .salaryDetailsList li:nth-of-type(2) {
        width: 25%;
    }

    .salaryDetailsList li:nth-of-type(3) {
        width: 35%;
    }

.accrualDurationList,
.frequencyList,
.executionDayList,
.lengthOfServiceList {
    width: 370px;
}

.lengthOfAmountList {
    width: 390px;
}

.ipAddressList {
    width: 300px;
}

.lengthOfServiceList li:nth-of-type(1) {
    width: 52%;
}

.lengthOfServiceList li:nth-of-type(2) {
    width: 20%;
}

.lengthOfServiceList li:nth-of-type(3) {
    width: 8%;
}

.lengthOfServiceList li:nth-of-type(4) {
    width: 20%;
}

.lengthOfAmountList li:nth-of-type(1) {
    width: 48%;
}

.lengthOfAmountList li:nth-of-type(2) {
    width: 22%;
}

.lengthOfAmountList li:nth-of-type(3) {
    width: 8%;
}

.lengthOfAmountList li:nth-of-type(4) {
    width: 22%;
}


.accrualDurationList li:nth-of-type(1) {
    width: 50%;
}

.accrualDurationList li:nth-of-type(2) {
    width: 15%;
}

.accrualDurationList li:nth-of-type(3) {
    width: 35%;
}

.halfdayoption .ui-datepicker-trigger {
    float: left;
}

.halfdayoption .spinnerCont {
    margin-left: 300px;
}

.ipAddressList .tagedit-list {
    width: auto;
}

    .ipAddressList .tagedit-list li.tagedit-listelement {
        width: auto;
    }


.chzn-containerApprover .chzn-results {
    max-height: 80px !important;
}

.wrapper960 {
    width: 960px;
    margin: 0 auto;
    max-width: 95%;
}

.deductionDv div.selector {
    width: 310px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

    .deductionDv div.selector select {
        width: 310px;
    }

.emailSteps {
    margin-left: 130px;
}

.emailStepsIn {
    float: left;
    width: 100%;
}

.commonColumnList {
    margin: 0 -10px;
}

    .commonColumnList li {
        list-style: none;
        float: left;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box; /* Firefox, other Gecko */
        box-sizing: border-box; /* Opera/IE 8+ */
    }

        .commonColumnList li .commonColumnListIn {
            padding: 10px;
        }

.countDv {
    border: 1px solid #cccccc;
    padding: 6px 10px;
    display: inline-block;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

.commonColumnList.twoColList li {
    width: 50%;
}

.jqxgridWrap {
    position: relative;
}

    .jqxgridWrap .slideBtn {
        position: absolute;
        width: 33px;
        left: 50%;
        margin-left: -18px;
        bottom: 0px;
        z-index: 99;
        padding: 4px 0;
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;
    }

        .jqxgridWrap .slideBtn span {
            background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet.png') no-repeat -156px -1225px;
            width: 6px;
            height: 6px;
            display: block;
            margin: 0 auto;
        }

            .jqxgridWrap .slideBtn span.topArrow {
                background-position: -164px -1225px;
            }


.authenticationList {
    margin: 50px 0;
}

    .authenticationList li {
        border-left: 1px solid #cccccc;
    }

        .authenticationList li:first-child {
            border: none;
        }

        .authenticationList li .commonColumnListIn {
            padding: 0 50px;
        }

        .authenticationList li .countDv {
            font-size: 15px;
            margin: 0 0 10px 0;
        }

        .authenticationList li input, .authenticationList li .button {
            width: 100%;
            -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
            -moz-box-sizing: border-box; /* Firefox, other Gecko */
            box-sizing: border-box; /* Opera/IE 8+ */
        }

        .authenticationList li .profileImgDv {
            overflow: hidden;
            margin: 50px auto;
            width: 150px;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
        }

            .authenticationList li .profileImgDv img {
                max-width: 100%;
                -moz-border-radius: 100%;
                -webkit-border-radius: 100%;
                border-radius: 100%;
            }

.authenticationDvFooter {
    background: #eee;
}

.fileDocDownload {
    color: #3399ff;
    cursor: pointer;
    text-decoration: underline;
    display: inline-block;
    margin: 0px 0;
    float: right;
    font-size: 12px;
    font-weight: normal;
}

.w190.error div.selector {
    width: 178px;
}

div.selector:not(.selectdisabled):not(.disabled) select {
    cursor: pointer;
}

.headingWDuplicate {
}

    .headingWDuplicate .headingLft {
        float: left;
    }

    .headingWDuplicate .headingLinkRht {
        float: right;
        margin-right: 20px;
    }

    .headingWDuplicate .headingLinkMid {
        padding: 0 250px;
        text-align: center;
    }

.heading.noOverF {
    overflow: inherit;
}

.heading.max-wid1000 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.heading.max-wid1000-auto-right {
    max-width: 1000px;
    margin-right: auto;
}

table.handCursor tbody tr:hover td, table.authorization tbody tr:hover td {
    cursor: pointer;
}

.ajaxModal {
    color: #666666;
    padding: 24px 30px;
    overflow: hidden;
}

    .ajaxModal .title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 8px;
    }

.wizardPannel {
    display: none;
}

.guide5 li {
    width: 163px;
}

.guide4 li {
    width: 204px;
}

.guide3 li {
    width: 272px;
}

    .guide3 li > p, .guide3 li > a {
        max-width: 252px;
    }

.systemAdminForm .chzn-container {
    width: 290px !important;
}

    .systemAdminForm .chzn-container .chzn-drop {
        width: 288px !important;
    }

        .systemAdminForm .chzn-container .chzn-drop .chzn-search input {
            width: 253px !important;
        }

        .systemAdminForm .chzn-container .chzn-drop .chzn-results {
            max-height: 55px;
        }

.taskInputFltLft {
    float: left;
    width: 25px;
}

table.style2 .checkboxImg {
    margin: 5px 5px 0 0;
}

.donedoc2 p.icndone.icndonecenter {
    margin: 0 auto 20px auto;
}

.timeSheetSpinner span.tipyinfo {
    right: -25px;
    width: 140px !important;
}

.totaltimeDv span.tipyinfo {
    right: -30px;
}

.taskAllTable ul.tag li, .taskAllTable span.tag, .taskAllTable .accessuser {
    height: auto;
}

.scrollTableDvWrapper {
    margin-right: 17px;
}

    .scrollTableDvWrapper .tableWrap {
        border-left: 1px solid #DCDCDC;
    }

        .scrollTableDvWrapper .tableWrap table.style1 thead {
            border-left: none;
        }

.scrollTableDv {
    overflow-y: scroll;
    max-height: 160px;
    border-left: 1px solid #DCDCDC;
    border-right: 1px solid #DCDCDC;
    border-bottom: 1px solid #DCDCDC;
    overflow: auto;
}

.scrollTableDv500 {
    overflow-y: scroll;
    max-height: 300px;
    margin-right: -17px;
    border-left: 1px solid #DCDCDC;
    border-bottom: 1px solid #DCDCDC;
    overflow: auto;
}

.scrollTableDv300 {
    overflow-y: scroll;
    max-height: 300px;
    margin-right: -17px;
    border-left: 1px solid #DCDCDC;
    border-bottom: 1px solid #DCDCDC;
    overflow: auto;
}

.scrollTableDv table.treeTable tbody, .scrollTableDv table.style1 tbody {
    border: none;
}

.scrollTableDv .doumentTemplateTable {
}

    .scrollTableDv .doumentTemplateTable div.checker {
        margin-right: 4px;
    }

.inputSmallEditable {
    padding: 0 !important;
    border: 0 !important;
    width: 73% !important;
    height: auto !important;
    line-height: 20px !important;
}

.title .inputSmallEditable {
    font-size: 17px;
    margin-top: -2px;
}

.totaltime .relative {
    float: left;
    width: 490px;
}

.bradfordFactorList {
}

    .bradfordFactorList li {
        border-left: 1px solid #DCDCDC;
    }

        .bradfordFactorList li:nth-child(odd) .col1,
        .bradfordFactorList li:nth-child(odd) .col2,
        .bradfordFactorList li:nth-child(odd) .col3,
        .bradfordFactorList li:nth-child(odd) .col4 {
            background: #f8f8f8;
        }

        .bradfordFactorList li.headList {
        }

            .bradfordFactorList li.headList .col1,
            .bradfordFactorList li.headList .col2,
            .bradfordFactorList li.headList .col3,
            .bradfordFactorList li.headList .col4 {
                background: #EDEDED !important;
                border-top: 1px solid #DCDCDC;
                border-bottom: 1px solid #DCDCDC;
                height: auto;
            }

        .bradfordFactorList li .col1 {
            width: 11%;
            float: left;
            padding: 4px 10px;
            border-right: 1px solid #DCDCDC;
            height: 40px;
        }

        .bradfordFactorList li .col2 {
            width: 12%;
            float: left;
            padding: 4px 10px;
            border-right: 1px solid #DCDCDC;
            height: 40px;
        }

        .bradfordFactorList li .col3 {
            width: 12%;
            float: left;
            padding: 4px 10px;
            border-right: 1px solid #DCDCDC;
            height: 40px;
        }

        .bradfordFactorList li .col4 {
            width: 25%;
            float: left;
            padding: 4px 10px;
            border-right: 1px solid #DCDCDC;
            height: 40px;
        }

        .bradfordFactorList li .col1 span {
            padding-top: 13px;
            display: block;
        }

        .bradfordFactorList li:last-child .col1,
        .bradfordFactorList li:last-child .col2,
        .bradfordFactorList li:last-child .col3,
        .bradfordFactorList li:last-child .col4 {
            border-bottom: 1px solid #DCDCDC;
        }

        .bradfordFactorList li:hover .col1,
        .bradfordFactorList li:hover .col2,
        .bradfordFactorList li:hover .col3,
        .bradfordFactorList li:hover .col4 {
            background-color: #EDFAFF;
            -webkit-transition: background linear 0.2s;
            -moz-transition: background linear 0.2s;
            -o-transition: background linear 0.2s;
            -ms-transition: background linear 0.2s;
            transition: background linear 0.2s;
        }

        .bradfordFactorList li .block {
            line-height: normal;
            margin-bottom: 0;
        }

.icnacessdenied {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/acessDenied.png');
    background-repeat: no-repeat;
    height: 70px;
    margin: 0 auto 20px;
    width: 70px;
}

.tagedit-customlist ul {
    background: #fff;
    width: 358px;
    overflow: auto !important;
    height: 100px;
}

    .tagedit-customlist ul li {
        height: auto !important;
    }

.customTransactionTitle {
    display: inline;
    min-width: 200px;
}

.infotasks .percentDv {
    display: inline-block;
    width: 165px;
}

.noTipyinfoError, .taskError {
    background-color: #FFE3E3 !important;
    border: 1px solid #FFAAAA !important;
    border-radius: 4px !important;
    color: #FF7C85;
    display: inline-block;
    font-size: 11px;
    line-height: 18px;
    padding: 10px;
    -webkit-transition: visibility 0s linear 0.3s;
    -moz-transition: visibility 0s linear 0.3s;
    -o-transition: visibility 0s linear 0.3s;
    -ms-transition: visibility 0s linear 0.3s;
    transition: visibility 0s linear 0.3s;
}

.noTipyinfoErrorF {
    display: block;
}

.taskError {
    display: block;
}

.queriesTable {
    overflow: scroll;
    width: 1180px;
    height: 300px;
}

    .queriesTable table {
        width: 1400px;
    }

        .queriesTable table tr th, .queriesTable table tr td {
            width: 200px;
        }

.sickComments {
}

    .sickComments ul {
        padding-left: 20px;
        list-style-type: disc;
    }

        .sickComments ul li {
        }

    .sickComments em {
        font-style: italic;
    }


.taskdivnoneditable {
    width: 310px;
    overflow: hidden;
}

.anchorNoHand {
    cursor: default;
}

.commonList {
    width: 100% !important;
}

    .commonList li {
        width: auto !important;
    }

.dottedHeading {
    border-bottom: 1px dotted #CCCCCC;
    width: 100% !important;
    padding-bottom: 12px;
}

.sliderbarDisable.slider li span.slider-background {
    position: relative;
}

.sliderbarDisable .sliderbarDisableDv {
    position: absolute;
    z-index: 3;
    left: 10px;
    top: 4px;
    right: 9px;
    bottom: -4px;
    background: rgba(243,243,243,.8);
    border-radius: 4px;
}

.workingPatTotalTime {
}

    .workingPatTotalTime li {
        float: left;
        font-size: 13px;
        font-weight: 700;
    }

        .workingPatTotalTime li:first-child {
            padding: 0 10px;
        }

        .workingPatTotalTime li:last-child {
            padding: 0 10px 0 8px;
            width: 82px;
        }


/* ResetPassword start*/
.wrapper340 {
    position: relative;
    width: 340px;
    padding: 80px 0px 40px 0;
    left: 50%;
    margin-left: -170px;
}

    .wrapper340:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

.resetPassword {
}

    .resetPassword span.tipyinfo.popupsignup {
        right: -190px;
    }

    .resetPassword input.text.w428 {
        width: 320px !important;
    }
/* ResetPassword end*/

.holidaydashAuth {
    overflow: visible !important;
    z-index: 1;
}

.inholidayAuth {
    position: absolute;
    left: 115px;
    width: 505px !important;
}

table.tabletree {
    margin-bottom: 0px;
    margin-right: 20px
}

    table.tabletree thead {
        border: 1px solid #dcdcdc
    }

        table.tabletree thead tr {
            background-color: #ededed
        }

            table.tabletree thead tr th {
                border-right: 1px solid #dcdcdc;
                padding: 4px 10px
            }

    table.tabletree tbody {
        border: 1px solid #dcdcdc
    }

        table.tabletree tbody tr th, table.tabletree tbody tr td {
            border-right: 1px solid #dcdcdc;
            padding: 4px 10px
        }

.tabletree tr td {
    line-height: 20px
}

.heading.notification p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') -38px 0;
    height: 27px;
    top: 4px;
    width: 32px;
    left: 13px;
}

.heading.authorization p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') -43px -34px;
    height: 27px;
    top: 4px;
    width: 27px;
    left: 13px;
}

.heading.system p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') -43px -103px;
    height: 27px;
    top: 4px;
    width: 27px;
    left: 13px;
}

.heading.authorisation p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') -43px -319px;
    height: 27px;
    top: 4px;
    width: 27px;
    left: 13px;
}

.heading.localization p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') -43px -349px;
    height: 27px;
    top: 4px;
    width: 27px;
    left: 13px;
}

.heading.accesstopeoplehr p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') -43px -103px;
    height: 27px;
    top: 4px;
    width: 27px;
    left: 13px;
}

.heading.eMail p:first-child:after {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') 0 -282px;
    height: 27px;
    top: 4px;
    width: 27px;
    left: 13px;
}

.header-icon {
    float: left;
    height: 32px;
    width: 32px;
}

.spritesheet.icnarrowsorttop {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') 0 -228px;
    width: 7px;
    height: 4px;
    top: -1px;
}

.spritesheet.icnarrowsortbottom {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') 0 -233px;
    width: 7px;
    height: 4px;
    top: -1px;
}

.spritesheet.icnarrowBothtb {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') 0 -227px;
    width: 7px;
    height: 10px;
    top: 1px;
}


.spritesheet.icnribbonabsences {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-y.png') 0 -254px;
    height: 21px;
    width: 18px;
}

ul.missiondescription li p a, .jsmodalactivyscream .style1 p a, .divmissions ul.missionruning li.description p a, .divmissions ul.missionfinished li.description p a, .textareaLookDv.non-editable a {
    color: #3399FF;
    cursor: pointer;
    text-decoration: underline;
}

.reasonslist {
    border-bottom: 1px solid #EDEDED;
}

    .reasonslist table.style2 tbody {
        border-bottom: 0;
    }

.categorylist {
    border-bottom: 1px solid #EDEDED;
}

    .categorylist table.style2 tbody {
        border-bottom: 0;
    }

.uploadLogo {
    margin: 5px 0 0 130px;
}

.training_slider {
    overflow: hidden;
}

    .training_slider li {
        background: rgb(237,237,237);
        background: -webkit-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -moz-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -o-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: -ms-linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%);
        background: linear-gradient(rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
        border: 1px solid #D0D0D0;
        border-right: none;
        display: block;
        float: left;
        font-size: 13px;
        font-weight: 700;
        line-height: 40px;
        text-align: center;
        padding: 0px 10px;
        height: 40px;
        width: 365px;
    }

        .training_slider li:first-child {
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        }

        .training_slider li:last-child {
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
            border-right: 1px solid #D0D0D0;
            text-align: left;
            width: 92px;
        }

        .training_slider li span {
            float: left;
        }

        .training_slider li:last-child span {
            margin-right: 5px;
        }

    .training_slider .ui-corner-all {
        border-radius: 4px;
    }

    .training_slider .ui-widget-content {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        -webkit-box-shadow: 0 1px 2px #CCCCCC inset;
        box-shadow: 0 1px 2px #CCCCCC inset;
        color: #222222;
    }

    .training_slider .ui-slider-horizontal {
        height: 30px;
        margin: 0 10px;
        top: 4px;
    }

.ui-slider-horizontal .ui-slider-range-min {
    background-color: #E5E5E5;
    -webkit-box-shadow: 0 1px 2px #CCCCCC inset;
    box-shadow: 0 1px 2px #CCCCCC inset;
}

.training_slider .ui-slider {
    display: inline-block;
    position: relative;
    margin-right: 40px;
    width: 276px;
}

    .training_slider .ui-slider:before {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
        border-left: none;
        box-shadow: -2px 1px 2px #CCCCCC inset;
        -webkit-box-shadow: -2px 1px 2px #CCCCCC inset;
        content: "";
        height: 30px;
        position: absolute;
        right: -32px;
        top: -1px;
        width: 35px;
    }

.training_slider .ui-state-default, .training_slider .ui-widget-content .ui-state-default, .training_slider .ui-widget-header .ui-state-default {
    background: rgb(107,160,206); /* Old browsers */
    background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
    background: linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
    border: 1px solid #4D82B0;
    border-radius: 3px;
}

.training_slider .ui-slider-horizontal .ui-slider-handle {
    margin-left: -0.6em;
    top: 0px;
}

.training_slider .ui-slider .ui-slider-handle {
    cursor: default;
    height: 28px;
    position: absolute;
    width: 29px;
    z-index: 2;
}

    .training_slider .ui-slider .ui-slider-handle:after {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/slider.png') no-repeat center center;
        content: "";
        height: 10px;
        left: 7px;
        position: absolute;
        top: 9px;
        width: 16px;
    }

.wrapper460 {
    position: relative;
    width: 460px;
    padding: 80px 0px 40px 0;
    left: 50%;
    margin-left: -280px;
}

    .wrapper460:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

.warningError {
    background: #FFE3E3;
    border: 1px solid #FFAAAA;
    border-radius: 4px;
    color: #FF7C85;
    margin-bottom: 20px;
    padding: 10px 30px 10px 10px;
    position: relative;
}

    .warningError:after, .warningError:before {
        bottom: -12px;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        content: "";
        left: 10px;
        position: absolute;
    }

    .warningError:after {
        border-top: 12px solid #FFE3E3;
        content: "";
    }

    .warningError:before {
        border-top: 12px solid #FFAAAA;
        bottom: -13px;
        content: "";
    }

    .warningError .icnclose {
        position: absolute;
        right: 10px;
        top: 15px;
    }

.popupMessage {
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
    margin: 0 auto;
    overflow: hidden;
    padding: 40px;
    width: 470px;
}

    .popupMessage span.img {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icn_wrong.png') no-repeat;
        display: block;
        margin: 0 auto 40px;
        height: 72px;
        width: 72px;
    }

    .popupMessage p {
        margin-bottom: 20px;
    }

        .popupMessage p.title {
            color: #666666;
            font-size: 24px;
            line-height: 24px;
            text-align: center;
        }

span.tag.yellow {
    background-color: #FFF9D6;
    border: 1px solid #FFE0AB;
}

span.tag.pink {
    background-color: #FFD8F4;
    border: 1px solid #C3A5BD;
}

ul.sameholidaysblue {
    background-color: #CEE6F0;
    border: 1px solid #AECEEC;
    padding: 11px;
}

    ul.sameholidaysblue li:first-child {
        background-color: #FFFFFF;
        border: 1px solid #AECEEC;
        border-radius: 3px 3px 3px 3px;
        float: left;
        margin-right: 5px;
        margin-bottom: 5px;
        padding-right: 10px;
        min-width: 150px;
    }

    ul.sameholidaysblue li:last-child {
        color: #879FA9;
    }

        ul.sameholidaysblue li:last-child span {
            font-weight: bold;
        }

.spritesheet.icnlockbigplannermonth {
    background-position: 18px -2501px;
    width: 40px;
    height: 30px;
}

.spritesheet.icnhalflockbigplannermonth {
    background-position: -137px -1847px;
    width: 40px;
    height: 30px;
}

.overlayLogin {
    top: 0;
    left: 0;
    zoom: 1;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: block;
    cursor: default;
    position: fixed;
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/overlaywhite.png') repeat left top;
}

.loadingLogin {
    display: block;
}

    .loadingLogin:after {
        top: 45%;
        left: 48%;
        content: '';
        width: 100%;
        height: 100%;
        z-index: 10000;
        position: absolute;
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/pleaseWait.gif') no-repeat scroll left top transparent;
    }

.loadingSALogin {
    display: block;
}

    .loadingSALogin:after {
        top: 45%;
        left: 48%;
        content: '';
        width: 100%;
        height: 100%;
        z-index: 10000;
        position: absolute;
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/adminValidation.gif') no-repeat scroll left top transparent;
    }

.waitMessageLogin {
    top: 55%;
    width: 100%;
    height: 35px;
    z-index: 10000;
    font-size: 20px;
    position: absolute;
    text-align: center;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
}

.inlineButton {
    position: relative;
    top: 10px;
}

.inlineButtonAlternate {
    position: relative;
    top: 5px;
}

.inlineLabel {
    position: relative;
    top: 15px;
    margin-left: 10px;
}

.actionbtnHold {
    margin-top: 10px;
}

    .actionbtnHold .editBtn {
        text-decoration: none;
        margin: 0 15px;
        color: #0071b2;
        font-size: 13px;
    }

        .actionbtnHold .editBtn:hover, .actionbtnHold .editBtn:active, .actionbtnHold .editBtn:focus {
            text-decoration: none;
            outline: none;
            color: #0071b2;
        }

    .actionbtnHold .deleteBtn {
        text-decoration: none;
        margin: 0 0 0 15px;
        color: #ed1f24;
        font-size: 13px;
    }

        .actionbtnHold .deleteBtn:hover, .actionbtnHold .deleteBtn:active, .actionbtnHold .deleteBtn:focus {
            text-decoration: none;
            outline: none;
            color: #ed1f24;
        }

.profileHold {
    text-align: center;
    width: 500px;
    float: left;
}

    .profileHold .profilePic {
        width: 105px;
        height: 105px;
        border-radius: 50%;
        display: inline-block;
        background-color: #f3f3f3;
    }

.style2accordeon1 .accordeon {
    background: rgb(251,251,251); /* Old browsers */
    background: -webkit-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(217,217,217,1) 100%);
    background: -moz-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(217,217,217,1) 100%);
    background: -o-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(217,217,217,1) 100%);
    background: -ms-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(217,217,217,1) 100%);
    background: linear-gradient(top, rgba(251,251,251,1) 0%,rgba(217,217,217,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#d9d9d9',GradientType=0 ); /* IE6-9 */
    border: 1px solid #D0D0D0;
    border-bottom: none;
    clear: both;
    cursor: pointer;
    font-weight: 600;
    overflow: hidden;
    padding: 15px 50px 15px 15px;
    position: relative;
}

.style2accordeon1.accordeonsmall .accordeon {
    padding: 10px 50px 10px 15px;
}

    .style2accordeon1.accordeonsmall .accordeon span.arrow {
        top: 20px;
    }

.style2accordeon1 .accordeon.active {
    border-top: medium none;
    -webkit-box-shadow: 0 1px #D0D0D0 inset, 0 2px #FFFFFF inset;
    box-shadow: 0 1px #D0D0D0 inset, 0 2px #FFFFFF inset;
    margin-bottom: 1px;
}

    .style2accordeon1 .accordeon.active,
    .style2accordeon1 .accordeon.active:hover,
    .style2accordeon1 .accordeon.active:active {
        background: rgb(107,160,206); /* Old browsers */
        background: -webkit-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: -moz-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: -o-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: -ms-linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%);
        background: linear-gradient(rgba(107,160,206,1) 0%,rgba(74,127,173,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba0ce', endColorstr='#4a7fad',GradientType=0 ); /* IE6-9 */
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #FFFFFF;
        text-shadow: -1px 1px #446B8E;
        position: relative;
    }

.style2accordeon1 .accordeon:hover {
    background: rgb(251,251,251); /* Old browsers */
    background: -webkit-linear-gradient(top, rgba(251,251,251,1) 48%,rgba(217,217,217,1) 100%);
    background: -moz-linear-gradient(top, rgba(251,251,251,1) 48%,rgba(217,217,217,1) 100%);
    background: -o-linear-gradient(top, rgba(251,251,251,1) 48%,rgba(217,217,217,1) 100%);
    background: -ms-linear-gradient(top, rgba(251,251,251,1) 48%,rgba(217,217,217,1) 100%);
    background: linear-gradient(top, rgba(251,251,251,1) 48%,rgba(217,217,217,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#d9d9d9',GradientType=0 ); /* IE6-9 */
}

.style2accordeon1 .accordeon:last-child {
    border-bottom: 1px solid #D0D0D0 !important;
}

.style2accordeon1 .accordeon p {
    display: block;
    float: left;
    font-size: 13px;
    margin-bottom: 0;
    margin-right: 10px;
    width: 130px;
}

.style2accordeon1 .accordeon span.text {
    display: block;
    float: left;
    font-weight: lighter;
    line-height: 24px;
    margin-left: 20px;
}

.style2accordeon1 .accordeon span.arrow {
    background: url(../images/icn/spritesheet.png) no-repeat top left;
    background-position: 0 -1326px;
    display: block;
    height: 6px;
    position: absolute;
    top: 24px;
    right: 20px;
    width: 9px;
}

.style2accordeon1 .accordeon.active {
    border-bottom: 1px solid #D0D0D0;
}

    .style2accordeon1 .accordeon.active span.arrow {
        background-position: -161px -1785px;
        height: 7px;
        width: 10px;
    }

.style2accordeon1 .cont_accor {
    background-color: #ffffff;
    border-bottom: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    clear: both;
    margin-bottom: 20px;
    overflow: hidden;
    padding: 20px;
}

.style2accordeon1 .settingsperformance_benefits {
    min-height: 20px !important;
    overflow: hidden;
}

.newMissionForm .divtool label.inline {
    width: 200px;
}

.subMission {
    width: 28px;
    height: 40px;
    background: rgba(0, 0, 0, 0) url("../images/icn/subscribe.png") no-repeat center center;
}

.newMission {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0) url("../images/icn/addMission.png") no-repeat center center;
}

.btnHold {
    width: 500px;
    float: left;
}

.profileHold .profilePic img {
    border-radius: 50%;
    height: 100%;
    width: 100%;
}


table.noHover tbody tr:hover td {
    background-color: transparent !important;
}


.addNewTaskAlertDropDown {
    width: 222px;
    float: left;
}

    .addNewTaskAlertDropDown .chzn-container {
        width: 222px !important;
    }

        .addNewTaskAlertDropDown .chzn-container .chzn-drop {
            width: 220px !important;
        }

    .addNewTaskAlertDropDown .chzn-container-single .chzn-search input {
        width: 87% !important;
    }

    .addNewTaskAlertDropDown .chzn-container .chzn-results {
        max-height: 100px;
    }

.tilecolour {
    height: 20px;
    margin-top: -3px;
    width: 20px;
}

section.cont ul.tabs.three li {
    max-width: inherit !important;
    width: 33.33% !important;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

section.cont ul.tabs.five li {
    max-width: inherit !important;
    width: 20% !important;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.previewphoto {
    background-color: #f1f1f1;
    border-radius: 3px;
    cursor: pointer;
    height: 120px;
    overflow: hidden;
    text-align: center;
    width: 120px;
    position: relative;
}

    .previewphoto a img {
        display: block;
    }

    .previewphoto a img {
        width: 100%;
        height: 100%;
    }

    .previewphoto .previewphotoDownload {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 2px 7px;
        background-color: rgba(255,255,255,.8);
    }

        .previewphoto .previewphotoDownload span {
        }

.imgpreview {
    border-radius: 3px;
    margin-bottom: 20px;
    text-align: center;
}

    .imgpreview.imagesignature {
        background-color: #f1f1f1;
        border: 1px solid #cdcdcd;
    }

    .imgpreview img {
        display: inline-block;
        max-width: 100%;
    }

.newsSettingLbl {
    margin-left: 130px;
}

.subdomainDv {
    border: 1px solid #cccccc;
    width: 370px;
    border-radius: 3px 3px 3px 3px;
}

    .subdomainDv input.text {
        border: none !important;
        width: 100% !important;
        padding: 0 0 0 10px;
        border-radius: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .subdomainDv label {
        float: right;
        line-height: 38px;
        padding: 0 10px 0 0;
        color: rgba(102,102,102,0.7);
    }

    .subdomainDv.focusDv {
        border-color: rgba(82, 168, 236, 0.8);
        -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.075) inset, 0px 0px 6px rgba(82,186,236,0.6);
        box-shadow: 0px 1px 1px rgba(0,0,0,0.075) inset, 0px 0px 6px rgba(82,186,236,0.6);
        outline: 0 none;
    }

    .subdomainDv.errorDv {
        border: 1px solid #FFAAAA;
        -webkit-box-shadow: 1px 1px 6px #FFE3E3, -1px -1px 6px #FFE3E3;
        box-shadow: 1px 1px 6px #FFE3E3, -1px -1px 6px #FFE3E3;
    }

.newsNotification {
    position: relative;
    left: 20px;
}

    .newsNotification:after {
        background: #cc3300;
        content: "";
        display: block;
        height: 8px;
        position: absolute;
        right: -5px;
        top: -5px;
        width: 8px;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
    }

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {


    .form .error .alwaysvisible,
    .form .error .alwaysvisible.top40 {
        display: inline-block !important;
        left: 0;
        margin-top: 20px;
        position: relative;
        right: auto;
        top: 0 !important;
    }

    .form span.tipyinfo:after,
    .form span.tipyinfo:before {
        border: none;
    }

    h4 {
        font-size: 18px;
    }

    .pt-10 {
        top: 0;
    }

    .mb10mobile {
        margin-bottom: 10px;
    }

    .mb20mobile {
        margin-bottom: 20px;
    }

    .onlymobile {
        display: block !important;
    }

    .onlydesktop {
        display: none !important;
    }

    .wrapper {
        width: 400px;
    }

    .wrapper580 {
        left: auto;
        margin-left: 0;
        width: 100%;
    }

    section.sectionerror .message {
        width: 320px;
    }

    .page header.internal {
        height: 48px;
        padding: 12px 16px 0;
    }

    header .dropprofile.fix .spnUsername {
        display: none;
    }

    header .dropprofile .icnprofile {
        margin-right: 5px;
    }

    header h1.logo.signuph {
        max-width: 290px;
        margin-top: 5px;
        margin-right: 0;
    }

        header h1.logo.signuph a {
            display: block;
            float: left;
        }

        header h1.logo.signuph img {
            display: block;
            margin-bottom: 5px;
            margin-top: 5px;
        }

    .logo.signuph > span {
        color: #FFFFFF;
        display: block;
        float: left;
        font-size: 16px;
        line-height: 16px;
        margin-left: 30px;
    }

    .logo.signuph span#spnCompanyName {
        display: none;
    }

    header.header_signup {
        height: auto;
        padding: 15px;
    }

        header.header_signup p {
            font-size: 15px;
            line-height: 37px;
            margin-bottom: 0 !important;
        }

    .page header.internal h1.logo {
        margin-right: 0;
        margin-top: 7px;
        width: auto;
    }

        .page header.internal h1.logo img {
            max-width: 90px;
        }

        .page header.internal h1.logo span, .page header.internal h1.logo > span {
            display: none;
        }

    .page aside nav a {
        clear: none;
        display: flex;
    }

    .page .content:before,
    .page .recruitment.hidescroll:before {
        background: none;
        left: auto;
        height: auto;
        width: auto;
    }

    .page section.recruitment aside,
    .page section.divorgchart aside {
        box-shadow: none;
        -webkit-box-shadow: none;
        top: 0px;
        left: 0 !important;
        padding: 0;
        width: 100%;
    }

    .page .content section.recruitment .panel,
    .page .content section.divorgchart .panel {
        overflow: hidden;
        padding: 0;
    }

    .page section.recruitment aside,
    .page section.divorgchart aside {
        background-color: #ffffff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        height: auto;
        margin: 0 auto;
        overflow: hidden;
        padding: 20px;
        top: 0 !important;
        width: 100%;
    }

        .page section.recruitment aside .form {
            width: 100%;
        }

        .page section.recruitment aside div.block,
        .page section.divorgchart aside div.block {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            clear: none;
            display: block;
            float: left;
            margin-bottom: 10px;
            padding: 0 10px;
            width: 100%;
        }

        .page section.divorgchart aside .form {
            box-sizing: border-box;
            margin: 0 auto;
            max-width: 100%;
            width: 380px;
        }

        .page section.divorgchart aside .button.small {
            margin-right: 5px;
            width: auto;
        }

    .page .content.notsidebar .panel {
        padding: 20px 15px 0;
    }

    .page div.sidebar div.imgprofile {
        margin: 10px 10px 17px;
        width: 94%;
    }

        .page div.sidebar div.imgprofile p {
            margin-bottom: 0;
        }

        .page div.sidebar div.imgprofile img {
            float: left;
            margin-right: 10px;
            max-height: 100px;
            max-width: 100px;
        }

        .page div.sidebar div.imgprofile .typeuser {
            margin-bottom: 5px;
        }

            .page div.sidebar div.imgprofile .typeuser:after {
                clear: none;
            }

    .page div.sidebar nav a#hlnDocuments, .page div.sidebar nav a#hlnPlanner {
        display: block;
    }

    .page div.sidebar nav a#contentMain_ucEmployeeLink_hlnDocuments, .page div.sidebar nav a#contentMain_ucEmployeeLink_hlnPlanner {
        display: block;
    }

    div.sidebar nav a.current:before {
        background: none;
    }

    .page div.sidebar .asideinfo {
        clear: both;
        width: 90%;
        padding-top: 0px;
    }

    .page div.sidebar nav.actions .numbernoti {
        top: 8px;
    }

    .page .content section.recruitment .continfo.p40 {
        padding: 40px 20px !important;
    }

    .page .content .panel.withoutspacing {
        padding: 0;
    }

    .page .content .continfo.withpadding {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        padding: 20px;
        width: 100% !important;
    }

    /*Reset Password*/
    #colorbox .wrapper340 {
        left: auto;
        margin-left: 0;
        padding: 45px 10px 10px;
        width: auto;
    }

    #colorbox .resetPassword input.text.w428 {
        width: 218px !important;
    }

    /*Employees List*/

    .headerstyle2 {
        margin-top: 65px;
        position: relative;
    }

    #contentMain_ucHeaderContainer_ucHeaderLeft_liAddNewEmployee {
        display: none;
    }

    .headerstyle2 > ul.options {
        background-color: #EDEDED;
        border: 1px solid #CDCDCD;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 1px 1px #FFFFFF inset, -1px -1px #FFFFFF inset;
        -webkit-box-shadow: 1px 1px #FFFFFF inset, -1px -1px #FFFFFF inset;
        float: right;
        left: auto;
        position: absolute;
        right: 0;
        top: -55px;
    }

    .headerstyle2.no-margin {
        margin: 0px !important;
    }

    .headerstyle2 > ul.options .spritesheet.icncsv {
        top: 7px;
        margin-left: 5px;
    }

    .headerstyle2 > ul.options > li {
        height: 40px;
        line-height: 40px;
    }

        .headerstyle2 > ul.options > li:last-child {
            padding-right: 10px;
        }

        .headerstyle2 > ul.options > li .menudropdown li {
            height: 30px;
            line-height: 30px;
            margin: 5px 0 5px 10px;
        }

    .headerstyle2 > ul.options .dropdownoptions {
        width: 180px;
    }

    .headerstyle2 > ul.options div.displayportrait {
        margin-left: 10px;
    }

    .headerstyle2 li.actbutton a:not(.button) {
        padding: 0px 8px;
    }

    .headerstyle2 input.search {
        width: 78px;
    }

    .headerstyle2 li.pright:last-child {
        position: absolute;
        top: -70px;
    }

    .headerstyle2 li.pright.noPosition {
        position: static;
    }

        .headerstyle2 li.pright.noPosition .comiseo-daterangepicker-triggerbutton.ui-button {
            margin-top: 5px;
            margin-left: 10px;
        }

    .headerstyle2 .hvHeaderPlus .pright:last-child {
        position: relative;
        top: auto;
    }

    .headerstyle2 .pright:last-child span.tag.biggest {
        position: relative;
        top: 10px;
    }

    .heading.task + .continfo .headerstyle2 li.pright:last-child {
        top: -60px;
    }

    .employees_list table.style2 td.name {
        width: auto;
    }

    .employees_list thead tr td.job_title, .employees_list thead tr td:nth-child(5), .employees_list thead tr td:last-child {
        display: none;
    }

    table tr th.mobileHide, table tr td.mobileHide {
        display: none;
    }


    .employees_list tr th:nth-child(4), .employees_list tbody tr td:nth-child(4),
    .employees_list tr th:last-child, .employees_list tbody tr td:last-child {
        display: none;
    }

    .employees_list .spritesheet.arrowbottom {
        display: none;
    }

    .page table.employees_list td.name, .page table.employees_list td.location, .page table.employees_list td.department {
        width: auto;
    }

    .page table.employees_list thead tr td:nth-child(3) {
        border-right-color: #DCDCDC;
    }

    /*Overview*/

    .page section.actions {
        text-align: center;
    }

        .page section.actions ul {
            display: inline-block;
        }

            .page section.actions ul li {
                float: none;
                height: auto;
                margin: 0 auto 10px;
                padding: 10px;
            }

                .page section.actions ul li:last-child {
                    margin-bottom: 0px;
                }

                .page section.actions ul li p {
                    font-size: 23px;
                    margin-top: 10px;
                    line-height: 22px;
                }

                .page section.actions ul li span {
                    margin-top: 10px;
                    line-height: 20px;
                }

    .jqplot-base-canvas {
        position: relative !important;
    }

    .jqplot-target {
        height: auto !important;
        margin: 0 auto;
    }

    .piechart table.jqplot-table-legend, .piechart table.jqplot-cursor-legend {
        left: 0 !important;
        margin-top: 0;
        position: relative !important;
        top: -27px !important;
    }

    .accessname {
        width: auto;
    }

    .custom-wizzard-table {
        padding-right: 0;
    }

        .custom-wizzard-table table thead tr td:last-child, .custom-wizzard-table table tr td:last-child {
            display: none;
        }

        .custom-wizzard-table table.customSettings .w330 div.selector {
            width: 86px;
        }

            .custom-wizzard-table table.customSettings .w330 div.selector select {
                width: 96px;
            }

    .gray-tablehead a.button {
        float: left !important;
        margin-bottom: 10px;
        margin-left: 0 !important;
    }

    #colorbox .leaverWizardForm label.inline + .noEleWrap {
        float: left;
        padding-top: 0;
    }

    /*Employees Personal*/
    .form.personal .block {
        max-width: 260px;
        position: relative;
    }

        .form.personal .block a.spritesheet.icntime {
            position: absolute;
            right: 5px;
            top: 50px;
        }

        .form.personal .block span.spritesheet.icnchange {
            position: absolute;
            right: 5px;
            top: 48px;
        }

    .form.personal table.style1 thead tr th:nth-child(2), .form.personal table.style1 tbody tr td:nth-child(2) {
        display: none;
    }

    .totalsalary {
        margin: 0 0 20px;
        width: auto;
    }

    /*Employees Employment*/
    .form.employment .block {
        max-width: 260px;
        position: relative;
    }

        .form.employment .block a.spritesheet.icntime {
            position: absolute;
            right: 5px;
            top: 50px;
        }

        .form.employment .block span.spritesheet.icnchange {
            position: absolute;
            right: 5px;
            top: 48px;
        }

    /*Autorization*/
    .searchresult div.cont {
        max-width: 260px;
        width: 100%;
    }

        .searchresult div.cont p.title {
            line-height: 24px;
        }

    table.auhtorization_list thead tr td:last-child,
    table.auhtorization_list tbody tr td:last-child,
    table.auhtorization_list tbody tr th:last-child {
        display: none;
    }

    table.auhtorization_list thead tr td:nth-child(4),
    table.auhtorization_list tbody tr th:nth-child(4),
    table.auhtorization_list tbody tr td:nth-child(4) {
        display: none;
    }

    table.style2 td.name.w160, table.style2 td.date, table.style2 td.job_title {
        width: auto;
    }

    table.auhtorization_list img {
        display: none;
    }

    #colorbox .modalwin.jsmodalholidayreq .header span.right,
    #colorbox .modalwin.jsmodalholidayreqapprove .header span.right,
    #colorbox .modalwin.jsmodalholidayreqdenied .header span.right {
        float: left !important;
        margin-bottom: 20px;
    }

    #colorbox .modalwin.jsmodalholidayreq .holidaydash,
    #colorbox .modalwin.jsmodalholidayreqapprove .holidaydash,
    #colorbox .modalwin.jsmodalholidayreqdenied .holidaydash {
        margin-right: 0 !important;
        width: 100%;
    }

        #colorbox .modalwin.jsmodalholidayreq .holidaydash .pieholiday,
        #colorbox .modalwin.jsmodalholidayreqapprove .holidaydash .pieholiday,
        #colorbox .modalwin.jsmodalholidayreqdenied .holidaydash .pieholiday {
            height: 110px;
            width: 100%;
        }

    #colorbox .modalwin.jsmodalholidayreq .pieholiday canvas,
    #colorbox .modalwin.jsmodalholidayreqapprove .pieholiday canvas,
    #colorbox .modalwin.jsmodalholidayreqdenied .pieholiday canvas {
        height: 225px !important;
        width: 100% !important;
    }

    #colorbox .modalwin .holidaydash .infoholiday > ul > li {
        display: inline-block;
        float: none;
        margin-right: 0;
    }

    #colorbox .modalwin .holidaydash .infoholiday ul > li span.fontbig {
        font-size: 50px;
    }

    #colorbox .modalwin .holidaydash .lastholiday {
        border: 1px solid #E9D1C4;
        border-bottom: none;
        width: 217px;
    }

    #colorbox .modalwin .holidaydash .inholiday {
        padding: 10px;
        height: auto;
        width: 197px !important;
    }

        #colorbox .modalwin .holidaydash .inholiday p:first-child {
            margin-top: 0px;
        }

    #colorbox .modalwin .inholidayAuth {
        clear: both;
        left: auto;
        position: relative;
        top: auto;
        width: auto;
    }

    #colorbox .modalwin.jsmodalholidayreq .tooltipread,
    #colorbox .modalwin.jsmodalholidayreqapprove .tooltipread,
    #colorbox .modalwin.jsmodalholidayreqdenied .tooltipread {
        margin-bottom: 20px;
    }

    #colorbox .modalwin.jsmodalholidayreq .form,
    #colorbox .modalwin.jsmodalholidayreqapprove .form,
    #colorbox .modalwin.jsmodalholidayreqdenied .form {
        clear: both;
    }

    .typeinput {
        width: 205px;
    }

        .typeinput ul {
            width: 100%;
        }

    ul.sameholidaysblue, ul.sameholidaysgreen, ul.sameholidaysred {
        width: 88%;
    }

    .typeinput ul.sameholidaysblue li:first-child,
    .typeinput ul.sameholidaysgreen li:first-child,
    .typeinput ul.sameholidaysred li:first-child {
        min-width: 156px !important;
    }

    #colorbox .modalwin.jsmodalholidayreq .button.medium2.blue.right,
    #colorbox .modalwin.jsmodalholidayreqapprove .button.medium2.blue.right,
    #colorbox .modalwin.jsmodalholidayreqdenied .button.medium2.blue.right {
        padding: 0px 15px;
    }

        #colorbox .modalwin.jsmodalholidayreq .button.medium2.blue.right:last-child,
        #colorbox .modalwin.jsmodalholidayreqapprove .button.medium2.blue.right:last-child,
        #colorbox .modalwin.jsmodalholidayreqdenied .button.medium2.blue.right:last-child {
            float: left !important;
            margin-right: 10px !important;
        }

    /*Loogbook*/
    .newfield ul li {
        width: 200px;
    }

        .newfield ul li:first-child {
            padding-bottom: 0;
            width: auto;
        }

        .newfield ul li:last-child {
            border-left: none;
        }

    .form .newfield input.text.w370 {
        width: 178px !important;
    }

    .tagedit-customlist ul {
        width: 93% !important;
    }

    .newfield div.tagsinput {
        width: 185px !important;
    }

    .form .newfield textarea.w370,
    .form .newfield div.w370 {
        width: 186px !important;
    }

    /*Dashboard - Status*/
    .principalcontent, .hidescrollsidebar {
        overflow-y: auto;
        width: 100%;
    }

    .page .containerdash.withpadding {
        padding: 10px 0 70px !important;
    }

    .page .principalcontent .containerdash .status {
        float: none;
        margin: 0 auto;
        width: 280px;
    }

    .taskscomplete img.badge {
        max-width: 90px;
    }

    .tooltiphelp {
        display: none;
    }

    .refreshtooltiphelp {
        display: none;
    }

    .hidescrollsidebar {
        padding-top: 0px;
    }

    .page .dashboard .options ul.badges li:not(.profile) {
        display: none;
    }

    .page .navdashboard {
        bottom: 0;
        display: inline-block;
        left: auto;
        margin-left: 0;
        position: relative;
    }

        .page .navdashboard.opt3 {
            margin-left: 0;
        }

    .page .contnavdashboard {
        text-align: center;
        width: 100%;
    }

    .principalcontent .missionsbar ul li {
        width: 50px;
    }

        .principalcontent .missionsbar ul li.btnmission {
            width: auto;
        }

            .principalcontent .missionsbar ul li.btnmission a {
                height: auto;
                line-height: 14px;
                margin-top: 7px;
                width: 140px;
            }

        .principalcontent .missionsbar ul li:not(.btnmission) a {
            height: 45px;
            text-indent: -9999px;
        }

        .principalcontent .missionsbar ul li.label {
            font-size: 10px;
            width: 135px;
        }

            .principalcontent .missionsbar ul li.label p {
                padding: 0px 0px 0px 13px;
                text-align: center;
            }

        .principalcontent .missionsbar ul li.newmission > a > span.title {
            width: auto;
        }

        .principalcontent .missionsbar ul li.newmission > a > span.spritesheet {
            top: 18px;
        }

    .containerdash .tooltipline {
        height: 74px;
        width: 160px;
    }

        .containerdash .tooltipline > div {
            width: 95px;
        }

            .containerdash .tooltipline > div p {
                line-height: 15px;
            }

        .containerdash .tooltipline .percent {
            font-size: 30px;
        }

    .page .containerdash .status > section {
        clear: both;
        position: relative;
        width: 280px;
    }

    .page .principalcontent .containerdash section.one {
        height: 231px;
        margin-bottom: 220px;
        padding: 20px 0 0;
    }

        .page .principalcontent .containerdash section.one:after {
            background: url("https://static.peoplehr.net/202506198-hotfix000000/Images/bglinesdash.png") no-repeat scroll 0 -320px transparent;
            content: "";
            height: 323px;
            position: absolute;
            right: 100px;
            top: 175px;
            transform: rotate(-38deg);
            -webkit-transform: rotate(-38deg);
            -moz-transform: rotate(-38deg);
            -o-transform: rotate(-38deg);
            -ms-transform: rotate(-38deg);
            width: 174px;
            z-index: -1;
        }

    .page .principalcontent section.one .tooltipline {
        bottom: -147px;
        right: 96px;
        top: auto !important;
    }

    .page .principalcontent .containerdash section.two {
        float: right;
        height: 280px;
        margin-bottom: 220px;
        position: relative;
        width: 205px;
    }

        .page .principalcontent .containerdash section.two:after {
            background: url("https://static.peoplehr.net/202506198-hotfix000000/Images/bglinesdash.png") no-repeat scroll 0 -320px transparent;
            content: "";
            height: 323px;
            position: absolute;
            right: 70px;
            top: 186px;
            left: auto;
            width: 166px;
            z-index: -1;
        }

    .page .principalcontent section.two .tooltipline {
        bottom: -115px;
        left: auto;
        right: 101px;
    }

    .page .principalcontent .containerdash section.three {
        margin-bottom: 230px;
        width: 280px;
    }

        .page .principalcontent .containerdash section.three:after {
            background: url("https://static.peoplehr.net/202506198-hotfix000000/Images/bglinesdash.png") no-repeat scroll 0 -320px transparent;
            content: "";
            height: 323px;
            position: absolute;
            right: 53px;
            transform: rotate(4deg);
            -webkit-transform: rotate(4deg);
            -moz-transform: rotate(4deg);
            -o-transform: rotate(4deg);
            -ms-transform: rotate(4deg);
            top: 146px;
            width: 166px;
            z-index: -1;
        }

    .page .principalcontent .containerdash section.four {
        width: 280px;
    }

        .page .principalcontent .containerdash section.four:after {
            background: url("https://static.peoplehr.net/202506198-hotfix000000/Images/bglinesdash.png") no-repeat scroll 0 -320px transparent;
            content: "";
            height: 323px;
            position: absolute;
            right: 53px;
            transform: rotate(-11deg);
            -webkit-transform: rotate(-11deg);
            -moz-transform: rotate(-11deg);
            -o-transform: rotate(-11deg);
            -ms-transform: rotate(-11deg);
            top: 86px;
            width: 166px;
            z-index: -1;
        }

        .page .principalcontent .containerdash section.four .tooltipline {
            right: 88px;
            top: -193px;
        }

        .page .principalcontent .containerdash section.four .donut.donutorange {
            right: 10px;
            top: 140px;
        }

    .page .donut.donutorange:after {
        bottom: -55px;
        right: 104px;
        top: auto;
    }

    .page.donut.donutorange:before {
        bottom: 6px;
    }

    .page .principalcontent .containerdash section.five {
        float: none;
        height: 315px;
    }

        .page .principalcontent .containerdash section.five:after {
            left: 76px;
        }

    .page .principalcontent section.five .tooltipline {
        left: auto;
        right: 70px;
    }

    .page .principalcontent .containerdash section.six {
        width: 280px;
    }

    .page .percentworkabsent {
        height: 124px;
        margin: 0 auto;
        width: 250px;
    }

        .page .percentworkabsent .pie {
            height: 125px;
            z-index: 4;
        }

            .page .percentworkabsent .pie canvas {
                width: 250px !important;
                height: auto !important;
            }

        .page .percentworkabsent .point {
            z-index: 6;
        }

            .page .percentworkabsent .point .point_left {
                left: 50px;
            }

        .page .percentworkabsent .tipbox {
            z-index: 7;
        }

            .page .percentworkabsent .tipbox.tipbox_left {
                left: 18px;
                top: 50px;
            }

        .page .percentworkabsent .point_right {
            right: 54px;
        }

        .page .percentworkabsent .tipbox.tipbox_right {
            right: 23px;
            top: 50px;
        }

        .page .percentworkabsent .tipbox p:first-child {
            font-size: 30px;
        }

    /*Dashboard*/
    .containerdash .blankstate {
        padding: 40px 20px;
        width: 200px;
    }

    .page .principalcontent .containerdash {
        width: 90%;
    }


    /*Dashboard - Timeline*/
    .conttimelineprincipal .containertimeline {
        width: 280px;
    }

    .page .containertimeline .timeline {
        left: 140px;
    }

    .page .containertimeline .infotime.now {
        left: 104px;
    }

    .page .containertimeline .infotime.yesterday {
        left: 80px;
    }

    .page .containertimeline .item {
        margin: 10px 17px 30px 15px;
        width: 107px;
    }

        .page .containertimeline .item.withborder > div {
            padding: 5px;
        }

            .page .containertimeline .item.withborder > div > div.info {
                width: 60px;
            }

        .page .containertimeline .item span.numberday {
            font-size: 20px;
        }

        .page .containertimeline .item span.day {
            font-size: 12px;
            line-height: 13px;
            padding-bottom: 10px;
            top: 0;
            width: 30px;
        }

        .page .containertimeline .item span.hour {
            left: -23px;
            position: relative;
            top: 4px;
            width: 70px;
        }

        .page .containertimeline .item p.action {
            width: auto;
        }

        .page .containertimeline .item img {
            margin-bottom: 5px;
        }

    /*Dashboard - Team*/
    .page ul.dashteams > li.infogeneral > ul > li {
        margin-right: 10px;
        margin-bottom: 10px;
        padding-right: 20px;
    }

        .page ul.dashteams > li.infogeneral > ul > li:last-child {
            margin-right: 0;
        }

    .page ul.dashteams > li.infogeneral ul > li span.fontbig {
        font-size: 30px;
        margin-right: 0;
    }

    .page ul.dashteams > li.infogeneral ul > li span.type {
        max-width: 0;
        text-indent: -9999px;
    }

    /*Dashboard - Absences*/
    .page .topabsences {
        width: 280px;
    }

        .page .topabsences ul.toplist li p {
            width: 160px;
        }

    /*Dashboard - Holiday*/
    .page .dashboard .holidaydash {
        width: 280px;
    }

        .page .dashboard .holidaydash .lastholiday {
            width: 277px;
        }

    .page .holidaydash .inholiday {
        border-top: medium none;
        padding-right: 10px;
        width: 257px;
    }

    .page .dashboard .holidaydash .requestholiday {
        width: 279px;
    }

        .page .dashboard .holidaydash .requestholiday a {
            width: auto;
        }

    .page .dashboard .holidaydash .pieholiday {
        height: 139px;
    }

        .page .dashboard .holidaydash .pieholiday canvas {
            height: auto !important;
            width: 281px !important;
        }

    .page .dashboard .holidaydash .infoholiday > ul {
        margin-bottom: 10px;
    }

    .page .dashboard .holidaydash .lastholiday {
        border: 1px solid #E9D1C4;
    }

    /*Dashboard - Missions*/
    .page .divmissions ul.missionruning, .divmissions ul.missionfinished {
        width: 280px;
    }

        .page .divmissions ul.missionruning > li {
            height: auto;
            padding: 0px 0px 0px 10px;
        }

            .page .divmissions ul.missionruning > li.backtomission {
                padding: 0px 0px 0px 40px;
            }

        .page .divmissions ul.missionruning li.description,
        .page .divmissions ul.missionfinished li.description {
            padding: 20px 0px;
        }

        .page .divmissions ul.missionruning > li.infomission.arrow:after,
        .page .divmissions ul.missionfinished > li.infopastmission.arrow:after {
            right: 0;
        }

        .page .divmissions ul.missionruning > li.infomission.arrow:hover:after,
        .page .divmissions ul.missionfinished > li.infopastmission.arrow:hover:after {
            right: 0;
        }

        .page .divmissions ul.missionruning > li .percent {
            height: 100%;
        }

        .page .divmissions ul.missionruning > li .info {
            height: auto;
        }

            .page .divmissions ul.missionruning > li .info img.badge {
                max-width: 45px;
                margin-right: 10px;
            }

            .page .divmissions ul.missionruning > li .info ul.inline {
                width: 215px;
            }

                .page .divmissions ul.missionruning > li .info ul.inline li {
                    margin-right: 0;
                }

                .page .divmissions ul.missionruning > li .info ul.inline.numberinfo {
                    margin-top: 10px;
                    width: 100%;
                }

                    .page .divmissions ul.missionruning > li .info ul.inline.numberinfo li {
                        margin-right: 5px;
                        width: 85px;
                    }

                        .page .divmissions ul.missionruning > li .info ul.inline.numberinfo li:last-child {
                            margin-right: 0px;
                        }

            .page .divmissions ul.missionruning > li .info ul span.numbig {
                float: none;
                font-size: 41px;
                line-height: 38px;
                text-align: center;
            }

            .page .divmissions ul.missionruning > li .info ul span.type {
                max-width: 100%;
                text-align: center;
                padding-top: 5px;
                width: 84%;
            }

            .page .divmissions ul.missionruning > li .info ul span.icn {
                display: block;
                margin: 0 auto 5px;
                position: relative;
            }

    #colorbox .modalwin.jsmodalactivyscream table.trpa12 tbody tr > * {
        padding: 12px 8px !important;
    }

    .modalwin ul.missiondescription {
        margin-bottom: 50px;
    }

        .modalwin ul.missiondescription li {
            padding: 10px;
        }

            .modalwin ul.missiondescription li .title {
                text-align: center;
                margin-bottom: 10px;
            }

            .modalwin ul.missiondescription li img.badge {
                display: block;
                float: none;
                margin: 0 auto 5px;
                max-width: 63px;
            }

            .modalwin ul.missiondescription li div.left {
                margin-bottom: 10px;
                width: 100% !important;
            }

            .modalwin ul.missiondescription li div.right {
                text-align: center;
                width: 100% !important;
            }

        .modalwin ul.missiondescription div.right a.button {
            float: none;
            margin-bottom: 30px;
            padding: 0 15px;
        }

    .modalwin section.cont .conttab p.submited {
        float: none;
        text-align: center;
    }

    .modalwin ul.missiondescription span.activemission {
        height: auto;
        line-height: 16px;
        padding: 2px 0px;
        text-align: center;
    }

    .modalwin ul.missiondescription div.right a.button {
        margin-bottom: 10px;
    }

    .divmissions ul.missionfinished > li {
        padding: 0px 10px;
    }

        .divmissions ul.missionfinished > li .missiontitle {
            margin-top: 10px;
            width: 189px;
        }

            .divmissions ul.missionfinished > li .missiontitle span.complete {
                margin-left: 0;
            }

                .divmissions ul.missionfinished > li .missiontitle span.complete:after {
                    content: '';
                    position: relative;
                }


    /*Tasks*/
    table.tasks img.imgpro {
        display: none;
    }

    table.tasks thead tr td:nth-child(4),
    table.tasks tbody tr td:nth-child(4) {
        display: none;
    }

    table.task-table {
        grid-template-columns: minmax(15px, 1.67fr) minmax(15px, 1.67fr) minmax(15px, 90px) minmax(15px, 1fr);
    }

    table.task-table-six-column {
        grid-template-columns: minmax(75px, 1fr) minmax(15px, 1.67fr) minmax(60px, 1fr) minmax(75px, 1fr) minmax(45px, 1fr)
    }

    table.tasks tr th, table.tasks tr td {
        padding: 8px 5px !important;
    }

    .headerstyle2 li#liAutomaticTask {
        display: none;
    }

    /*Tables*/
    table.style1 {
        clear: both;
        width: 100%;
    }

        table.style1 tbody tr th, table.style1 tbody tr td {
            padding: 5px 7px;
        }

    table .icntbl {
        display: inline-block;
        float: none;
    }

    table .spritesheet.arrowbottom {
        display: none;
    }

    /*Forms*/
    div.w580 {
        width: 100%;
    }

    .form input.text.w150 {
        width: 73px;
    }

    .form input.text.w220 {
        width: 74px !important;
    }

    .form input.text.w310 {
        width: 200px;
    }

    .form input.text.w330 {
        width: 200px;
    }

    .form input.text.w370 {
        width: 200px !important;
    }

    .form input.text.w480 {
        width: 200px;
    }

    .form input.text.w428 {
        width: 95%;
    }

    .form input.text.w366 {
        width: 90%;
    }

    .wrapper580 input.text.w580 {
        width: 95%;
    }

    .wrapper580 input.text.w460 {
        width: 295px;
    }

    .wrapper580 textarea.w580 {
        width: 388px;
    }

    .form textarea.w321 {
        width: 208px;
    }

    textarea.w310 {
        width: 310px;
    }

    .form textarea.w340 {
        width: 200px;
    }

    .form textarea.w370,
    .form div.w370 {
        width: 210px !important;
    }

    .form textarea.w500 {
        width: 210px;
    }

    .form textarea, .form .textareaLookDv {
        width: 210px;
    }

    span.tipyinfo, .tooltip {
        display: none !important;
    }

    .require {
        right: auto;
    }

    .form label.inline {
        margin-bottom: 10px;
        width: 100%;
        max-width: 200px;
    }

    .form label.w249 {
        width: auto;
    }

    .form p.inline.mr80, .form div.inline.mr80 {
        margin-right: 0px !important;
    }

    a.deletepicture {
        float: left;
        margin-right: 0;
        width: 100%;
    }

    .infogray {
        background-color: #f1f1f1;
        border: 1px solid #cdcdcd;
        border-radius: 3px;
        margin-bottom: 20px;
        overflow: hidden;
        padding: 20px;
    }




    .subdomainDv input.text.w370 {
        width: 100% !important;
    }

    .notlabel {
        margin: 0px;
    }

    .divtool.h42 {
        height: auto;
    }

    .divtool a.button.ml15 {
        margin-left: 0 !important;
    }

    p.warning {
        display: none;
    }

    p.w450 {
        width: auto;
    }

    span.tag.biggest {
        font-size: 10px;
        height: auto;
        padding: 0px 4px;
    }

    p.icndone {
        font-size: 14px;
        font-weight: 700;
        line-height: 21px;
        margin-bottom: 10px;
        text-align: left;
        width: auto !important;
    }

    .addfield {
        margin-left: 0;
    }

    section.uploadaddmore {
        padding: 15px 15px 35px 15px;
    }

    div.uploader, div.uploader input {
        width: 218px !important;
    }

        div.uploader .fullwidth {
            width: 84%;
        }

            div.uploader .fullwidth .pdrag {
                width: 160px;
            }

    section.uploadaddmore div {
        width: 90% !important;
    }

    .uploadfile.uploadaddmore div.uploader {
        width: 100% !important;
    }

    /*Modal windows*/
    #cboxClose, .boxclose .closecustom {
        right: auto;
        left: 224px;
    }

    #colorbox .button.medium {
        padding: 0px 5px;
    }

    #colorbox .ajaxModal, #colorbox .modalwin {
        padding: 20px;
    }

        #colorbox .modalwin input.text.w415 {
            width: 70%;
        }

        #colorbox .modalwin input.text.w500 {
            width: 90%;
        }

        #colorbox .modalwin input.text.w564 {
            width: 100%;
        }

        #colorbox .modalwin input.text.w353 {
            width: 32%;
        }

        #colorbox .modalwin textarea.responsive350 {
            width: 93%;
        }

        #colorbox .modalwin .guide {
            width: 99%;
        }

    .guide .active:after, .guide li:after {
        content: '';
    }

    #colorbox .modalwin .guide li {
        width: 100%;
    }

    .guide li > p, .guide li > a {
        margin-left: 20px !important;
        height: 42px;
        line-height: 42px;
        text-align: left;
        width: auto !important;
    }

    #colorbox .modalwin .heading {
        padding-right: 20px;
    }

    #colorbox .modalwin .block .border {
        float: left;
        margin-left: 0;
        width: 90%;
    }

        #colorbox .modalwin .block .border label {
            clear: both;
        }

        #colorbox .modalwin .block .border input.text.w150 {
            width: 88%;
        }

    #colorbox .modalwin.tasks ul.task {
        margin-left: 0;
    }

        #colorbox .modalwin.tasks ul.task li, #colorbox .modalwin.tasks ul.task li.customtask {
            height: auto;
            margin-left: 0;
            width: 85%;
        }

    #colorbox .modalwin .big {
        height: auto;
        line-height: 20px;
        padding: 5px 10px;
        width: 89%;
    }

    #colorbox .modalwin .title {
        max-width: 206px;
    }

        #colorbox .modalwin .title span.color90 {
            display: block;
            margin-bottom: 8px;
            margin-left: 0;
            margin-top: 5px;
        }

        #colorbox .modalwin .title + .deletefield, #colorbox .modalwin .title + .editfield {
            margin-left: 0;
            margin-right: 7px;
            position: relative;
            top: -8px;
        }

    .deletefield, .editfield {
        margin-left: 5px;
        margin-right: 0;
        position: relative;
        top: 4px;
    }

    #colorbox .modalwin.importfileinfor table thead tr td:nth-child(2),
    #colorbox .modalwin.importfileinfor table thead tr td:nth-child(3),
    #colorbox .modalwin.importfileinfor table thead tr td:nth-child(4),
    #colorbox .modalwin.importfileinfor table tbody tr td:nth-child(2),
    #colorbox .modalwin.importfileinfor table tbody tr td:nth-child(3),
    #colorbox .modalwin.importfileinfor table tbody tr td:nth-child(4) {
        display: none;
    }

    #colorbox .modalwin.importfileinfor table tbody tr td {
        max-width: 56px;
        word-wrap: break-word;
    }

    #colorbox .modalwin.importfileinfor .w140 div.selector {
        width: 65px !important;
    }

        #colorbox .modalwin.importfileinfor .w140 div.selector select {
            width: 75px !important;
        }

    #colorbox .modalwin.importfileinfor .w190 div.selector {
        width: 95px !important;
    }

        #colorbox .modalwin.importfileinfor .w190 div.selector select {
            width: 106px !important;
        }

    #colorbox .modalwin.importreview table thead tr td:nth-child(2),
    #colorbox .modalwin.importreview table thead tr td:nth-child(3),
    #colorbox .modalwin.importreview table thead tr td:nth-child(4),
    #colorbox .modalwin.importreview table tbody tr td:nth-child(2),
    #colorbox .modalwin.importreview table tbody tr td:nth-child(3),
    #colorbox .modalwin.importreview table tbody tr td:nth-child(4) {
        display: none;
    }

    p.icndone.icndonecenter {
        width: 61%;
    }

    #colorbox .modalwin.holiday_calculator .pa20 label.inline {
        width: 100%;
    }

    #colorbox table.deductionList thead tr th:last-child,
    #colorbox table.deductionList tbody tr td:last-child,
    #colorbox table.entitlementList thead tr th:last-child,
    #colorbox table.entitlementList tbody tr td:last-child {
        display: none;
    }

    #colorbox .modalwin.history table tbody tr > * {
        font-size: 11px;
        padding: 5px 3px !important;
    }

    #colorbox .modalwin > section.header .title {
        font-size: 15px;
        line-height: 21px;
        padding-right: 20px;
        width: auto;
    }

    #colorbox .modalwin.modaltasks .conttab .block > p.left {
        width: auto;
    }

    /*Colorbox*/
    #cboxOverlay + #colorbox, #cboxOverlay + #colorbox #cboxWrapper, #cboxOverlay + #cboxContent, #cboxLoadedContent,
    #cboxOverlay + #colorbox.mw400, #cboxOverlay + #colorbox.mw400 #cboxWrapper, #cboxOverlay + #colorbox.mw400 #cboxContent, #cboxOverlay + #colorbox.mw400 #cboxLoadedContent,
    #cboxOverlay + #colorbox.wmw440, #cboxOverlay + #colorbox.wmw440 #cboxWrapper, #cboxOverlay + #colorbox.wmw440 #cboxContent, #cboxOverlay + #colorbox.wmw440 #cboxLoadedContent,
    #cboxOverlay + #colorbox.wmw560, #cboxOverlay + #colorbox.wmw560 #cboxWrapper, #cboxOverlay + #colorbox.wmw560 #cboxContent, #cboxOverlay + #colorbox.wmw560 #cboxLoadedContent,
    #cboxOverlay + #colorbox.wmw525, #cboxOverlay + #colorbox.wmw525 #cboxWrapper, #cboxOverlay + #colorbox.wmw525 #cboxContent, #cboxOverlay + #colorbox.wmw525 #cboxLoadedContent,
    #cboxOverlay + #colorbox.wmw640, #cboxOverlay + #colorbox.wmw640 #cboxWrapper, #cboxOverlay + #colorbox.wmw640 #cboxContent, #cboxOverlay + #colorbox.wmw640 #cboxLoadedContent,
    #cboxOverlay + #colorbox.wmw655, #cboxOverlay + #colorbox.wmw655 #cboxWrapper, #cboxOverlay + #colorbox.wmw640 #cboxContent, #cboxOverlay + #colorbox.wmw655 #cboxLoadedContent,
    #cboxOverlay + #colorbox.wmw670, #cboxOverlay + #colorbox.wmw670 #cboxWrapper, #cboxOverlay + #colorbox.wmw670 #cboxContent, #cboxOverlay + #colorbox.wmw670 #cboxLoadedContent,
    #cboxOverlay + #colorbox.mw710, #cboxOverlay + #colorbox.mw710 #cboxWrapper, #cboxOverlay + #colorbox.mw710 #cboxContent, #cboxOverlay + #colorbox.mw710 #cboxLoadedContent,
    #cboxOverlay + #colorbox.mw770, #cboxOverlay + #colorbox.mw770 #cboxWrapper, #cboxOverlay + #colorbox.mw770 #cboxContent, #cboxOverlay + #colorbox.mw770 #cboxLoadedContent,
    #cboxOverlay + #colorbox.mw810, #cboxOverlay + #colorbox.mw810 #cboxWrapper, #cboxOverlay + #colorbox.mw810 #cboxContent, #cboxOverlay + #colorbox.mw810 #cboxLoadedContent,
    #cboxOverlay + #colorbox.mw878, #cboxOverlay + #colorbox.mw878 #cboxWrapper, #cboxOverlay + #colorbox.mw878 #cboxContent, #cboxOverlay + #colorbox.mw878 #cboxLoadedContent,
    #cboxOverlay + #colorbox.wmw878, #cboxOverlay + #colorbox.wmw878 #cboxWrapper, #cboxOverlay + #colorbox.wmw878 #cboxContent, #cboxOverlay + #colorbox.wmw878 #cboxLoadedContent,
    #cboxOverlay + #colorbox.wmw940, #cboxOverlay + #colorbox.wmw940 #cboxWrapper, #cboxOverlay + #colorbox.wmw940 #cboxContent, #cboxOverlay + #colorbox.wmw940 #cboxLoadedContent,
    #cboxOverlay + #colorbox.mw1000, #cboxOverlay + #colorbox.mw1000 #cboxWrapper, #cboxOverlay + #colorbox.mw1000 #cboxContent, #cboxOverlay + #colorbox.mw1000 #cboxLoadedContent,
    #cboxOverlay + #colorbox.mw1240, #cboxOverlay + #colorbox.mw1240 #cboxWrapper, #cboxOverlay + #colorbox.mw1240 #cboxContent, #cboxOverlay + #colorbox.mw1240 #cboxLoadedContent {
        width: 260px !important;
    }

        #cboxOverlay + #colorbox,
        #cboxOverlay + #colorbox.mw400,
        #cboxOverlay + #colorbox.wmw440,
        #cboxOverlay + #colorbox.wmw525,
        #cboxOverlay + #colorbox.wmw640,
        #cboxOverlay + #colorbox.wmw655,
        #cboxOverlay + #colorbox.wmw670,
        #cboxOverlay + #colorbox.mw710,
        #cboxOverlay + #colorbox.mw770,
        #cboxOverlay + #colorbox.mw810,
        #cboxOverlay + #colorbox.mw878,
        #cboxOverlay + #colorbox.wmw878,
        #cboxOverlay + #colorbox.wmw940,
        #cboxOverlay + #colorbox.mw1240 {
            left: 50% !important;
            margin-left: -130px !important;
        }

    #colorbox .chzn-container, #colorbox .chzn-container-multi .chzn-choices {
        width: 215px !important;
    }

        #colorbox .chzn-container .chzn-drop {
            width: 213px !important;
        }

    #colorbox .fullWidDvChzn .chzn-container, #colorbox .fullWidDvChzn .chzn-container .chzn-choices, #colorbox .fullWidDvChzn .chzn-container .chzn-drop {
        width: 100% !important;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box; /* Firefox, other Gecko */
        box-sizing: border-box; /* Opera/IE 8+ */
    }

    .employeeTypeChznDv {
        margin-left: 0;
        width: 100%;
    }

    #colorbox .modalwin .w500 div.selector {
        width: 206px !important;
    }

        #colorbox .modalwin .w500 div.selector select {
            width: 215px;
        }

    .managelistoption div.tagsinput div input {
        width: 100% !important;
    }

    /*Slider*/

    .slider li {
        border: 1px solid #CCCCCC;
        border-radius: 3px;
        margin: 2px 0px;
        width: 90% !important;
    }

    .slider .ui-slider {
        width: 125px;
    }

    .slider .ui-slider-horizontal {
        margin: 0px 9px !important;
    }

    .slider li:nth-child(2) span:last-child {
        float: right;
    }

    .slider li:last-child {
        text-align: center;
    }

        .slider li:last-child span {
            float: none;
        }

    /*Uniform*/
    .form .w200 div.selector,
    .form .w230 div.selector,
    .form .w330 div.selector {
        width: 211px;
    }

        .form .w200 div.selector select,
        .form .w230 div.selector select,
        .form .w330 div.selector select {
            width: 221px;
        }

    .form .w240 div.selector {
        width: 181px;
    }

        .form .w240 div.selector select {
            width: 191px;
        }

    .form .w310 div.selector,
    .form .w370 div.selector,
    .form .w500 div.selector {
        width: 211px;
    }

        .form .w310 div.selector select,
        .form .w370 div.selector select,
        .form .w500 div.selector select {
            width: 221px;
        }

    .selsmall.w370 div.selector {
        width: 165px;
    }

        .selsmall.w370 div.selector select {
            width: 175px;
        }



    .form .chzn-container, .form .chzn-container-multi .chzn-choices {
        width: 221px !important;
    }

        .form .chzn-container .form .chzn-drop {
            width: 219px !important;
        }

    .form .uploadblue div.uploader {
        width: 211px !important;
    }

        .form .uploadblue div.uploader input:not(.removefile) {
            width: 209px !important;
        }

    .chzn-container, .chzn-container-multi .chzn-choices {
        width: 211px !important;
    }

        .chzn-container .chzn-drop {
            width: 219px !important;
        }

    .divtool.left label.widthauto {
        float: none;
    }

    /*Employee Planner*/
    section.planner {
        width: 100%;
    }

    .bradford_factor {
        width: 185px;
    }

        .bradford_factor > div.info {
            float: left;
            max-width: 120px;
            width: 120px;
        }

        .bradford_factor p.title {
            line-height: 18px;
            margin-bottom: 5px;
        }

    .sickdays {
        width: 235px;
    }

    section.settings {
        position: relative;
        margin-top: 70px;
    }

        section.settings ul > li > div.selsmall {
            position: absolute;
            right: 0;
            top: -61px;
        }

    .settings .dropdownoptions {
        width: 170px !important;
    }

    .page section.changemonth {
        font-size: 13px;
    }

        .page section.changemonth a {
            padding: 0px 5px;
        }

    section.plannermonth div.month ul li {
        margin-right: 0;
        width: 25px;
    }

    #colorbox .modalwin section.cont ul.tabs, .page .continfo.w720 section.cont ul.tabs {
        height: auto;
        flex-direction: column;
    }

        #colorbox .modalwin section.cont ul.tabs li, .page .continfo.w720 section.cont ul.tabs li {
            border-bottom: medium none;
            border-right: 1px solid #CCCCCC;
            float: none;
            max-width: 100% !important;
            width: 100% !important;
        }

            #colorbox .modalwin section.cont ul.tabs li:last-child, .page .continfo.w720 section.cont ul.tabs li:last-child {
                border-bottom: 1px solid #CCCCCC;
            }

    .form .bggray.summary {
        width: 91%;
    }

    section.cont .bgoptions a {
        margin-right: 10px;
    }

    section.cont .bgoptions > a.removeopt {
        margin: 0px 10px;
    }

    .tabcomments .seccomments {
        padding-right: 10px;
    }

    .tabcomments section.messagecomments ul.options {
        padding-bottom: 5px;
    }

        .tabcomments section.messagecomments ul.options li {
            margin: 0px 5px 5px 0px;
        }

    .tabcomments section.messagecomments textarea {
        height: 150px;
        width: 90%;
    }

    #colorbox .modalwin section.upload:after {
        background: none;
    }

    #colorbox .modalwin section.upload div {
        float: left;
        margin-left: 0;
        width: 78%;
    }

        #colorbox .modalwin section.upload div p:first-child {
            font-size: 11px;
        }

    #colorbox .headerstyle2 {
        margin-top: 0;
    }

    .form .showdate label.inline {
        width: 30px;
    }

    #colorbox .modalwin.modalmatpat .form label.w50,
    #colorbox .modalwin.modaltimesheets .form label.w50,
    #colorbox .modalwin.modaltimesheets .form label.w50 {
        width: 100%;
    }

    .totaltime {
        width: 94%;
    }

    #colorbox .modalwin table.tableproject th:nth-child(3),
    #colorbox .modalwin table.tableproject th:nth-child(4),
    #colorbox .modalwin table.tableproject th:nth-child(5),
    #colorbox .modalwin table.tableproject td:nth-child(3),
    #colorbox .modalwin table.tableproject td:nth-child(4),
    #colorbox .modalwin table.tableproject td:nth-child(5) {
        display: none;
    }

    #colorbox .totaltime {
        width: 100%;
    }

        #colorbox .totaltime .bggray {
            margin-bottom: 10px;
        }

    #colorbox .divbreaks .bggray, .addabreak {
        height: auto;
        overflow: hidden;
    }

        #colorbox .divbreaks .bggray label.inline {
            padding-left: 5px;
            text-align: left;
        }

    #colorbox .modalwin.modalprojecttimesheets .form label.w100,
    #colorbox .modalwin.modalprojecttimesheetsreadonly .form label.w100 {
        width: 100% !important;
    }

    .divbreaks .bggray p.inline {
        clear: both;
        display: inline-block;
        float: left;
        font-size: 12px;
        margin-right: 0;
        margin-top: 10px;
        padding-left: 5px;
    }

    #colorbox .modalwin.leavehistory table thead tr td:nth-child(3),
    #colorbox .modalwin.leavehistory table thead tr td:last-child,
    #colorbox .modalwin.leavehistory table tbody tr td:nth-child(3),
    #colorbox .modalwin.leavehistory table tbody tr td:last-child {
        display: none;
    }

    /*Company Planner*/
    ul.filters .btnfilter {
        display: block;
    }

    .page .splitterContainer.pt110 {
        padding-top: 0px !important;
    }

    .page .options ul.showing {
        display: none;
    }

    .page .companyplanner .filterevents ul li img {
        display: none;
    }

    .page .options .filters {
        right: 0;
    }

        .page .options .filters li {
            display: block;
            float: left;
        }

    .page .companyplanner .filterevents ul.bgcolor li {
        width: 138px;
    }

        .page .companyplanner .filterevents ul.bgcolor li a {
            width: 119px;
        }

    .page .companyplanner .filterevents .heading {
        left: 170px !important;
        top: 30px !important;
        width: 256px !important;
    }

    .page .companyplanner .filterevents .ulemployee ul {
        width: 100% !important;
    }

    .page .companyplanner .filterevents .titlefilter > a.backtoteams {
        display: block;
    }

    .page .rightTopPane {
        border-bottom: 1px solid #D0D0D0;
        max-height: 260px !important;
        min-height: 200px;
    }

    .page .rightBottomPane {
        height: 100%;
        width: 100% !important;
    }

    .page .tablescompany {
        padding: 0 20px;
    }

        .page .tablescompany:after {
            content: "\0020";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .page .tablescompany > section.month {
            float: none;
            margin: 0 auto 20px;
            width: 100%;
        }

        .page .tablescompany table tbody tr td.lock {
            background-color: #EDEDED;
            border: 1px solid #D0D0D0;
            border-radius: 3px 3px 3px 3px;
        }

            .page .tablescompany table tbody tr td.lock span {
                border: none;
                border-radius: 0px;
            }

        .page .tablescompany table tbody tr td:not(.lock) span {
            width: 97% !important;
        }

        .page .tablescompany table tbody tr td.lock .spritesheet.icnlockbig {
            height: 34px;
        }

    .modalwin .eventsoverview section ul li span.right {
        float: left !important;
        text-align: left;
        width: auto;
    }

    /*modals company planner*/
    #colorbox .tooltipcompany {
        border: none;
        border-radius: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
        display: block !important;
        overflow: hidden;
        padding-bottom: 10px;
        position: relative;
    }

        #colorbox .tooltipcompany.w300, #colorbox .tooltipcompany.w200 {
            width: auto !important;
        }

        #colorbox .tooltipcompany.overviewevents .infotooltip > ul {
            height: 200px;
        }

    #colorbox .modalwin .eventsoverview span.tag {
        float: left;
        height: auto;
        margin-top: 10px;
        max-width: 83%;
    }

        #colorbox .modalwin .eventsoverview span.tag > span.txt {
            white-space: normal;
        }

    #colorbox .modalwin.infoevent div.block div.inline {
        margin-right: 0;
        width: 100%;
    }

    #colorbox .eventsoverview section ul li span.info {
        width: auto;
    }

    /*Queries*/
    span.count {
        margin-left: 10px;
    }

    #colorbox .modalwin .div-choose.h480 {
        height: auto !important;
    }

        #colorbox .modalwin .div-choose.h480 .step1-div1 {
            height: 202px;
            margin-bottom: 10px;
        }

    #colorbox .modalwin .div-choose .step1-div1,
    #colorbox .div-choose > div.step1-div1 ul,
    #colorbox .div-choose .step1-div2 {
        width: 100%;
    }

        #colorbox .modalwin .div-choose .step1-div1 ul.selarea li {
            width: 156px;
        }

    #colorbox .modalwin .div-choose.h480 .step1-div2 {
        height: 320px;
    }

    #colorbox .modalwin .div-choose .step1-div2.pa10 {
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 10px;
        width: 220px;
    }

    #colorbox .modalwin .filter {
        padding: 15px 10px;
        width: 183px;
    }

        #colorbox .modalwin .filter .title {
            margin-bottom: 10px;
            max-width: 180px;
        }

        #colorbox .modalwin .filter a.removefilter {
            margin-bottom: 10px;
            position: relative;
            right: 0;
            top: 0;
        }

        #colorbox .modalwin .filter .sectionfilter {
            padding: 10px 10px 0 40px;
        }

            #colorbox .modalwin .filter .sectionfilter .w190 div.selector {
                width: 120px;
            }

                #colorbox .modalwin .filter .sectionfilter .w190 div.selector select {
                    width: 130px;
                }

            #colorbox .modalwin .filter .sectionfilter input.text.w240 {
                width: 84px;
            }

    #colorbox .modalwin .sectionfilter .inline {
        margin-bottom: 10px;
    }

        #colorbox .modalwin .sectionfilter .inline:last-child {
            margin-bottom: 0px;
        }


    #colorbox .modalwin .div-choose.remind > div {
        float: none;
        width: 100%;
    }

    #colorbox .modalwin .buttonreminder {
        float: right;
        right: 0;
        margin-bottom: 10px;
        position: relative;
        top: 0;
    }

    #colorbox .modalwin .headerstyle2 {
        padding-right: 0;
    }

        #colorbox .modalwin .headerstyle2 > ul.buttons {
            margin-left: 7px;
        }

            #colorbox .modalwin .headerstyle2 > ul.buttons li {
                margin-right: 5px;
            }

                #colorbox .modalwin .headerstyle2 > ul.buttons li:last-child {
                    margin-right: 0px;
                }

                #colorbox .modalwin .headerstyle2 > ul.buttons li a.small {
                    padding: 0px 2px;
                }

    #colorbox .modalwin.queryloaded .headerstyle2 {
        margin-top: 65px;
    }

    #colorbox .modalwin.queryloaded .queriesTable {
        width: 100% !important;
    }

        #colorbox .modalwin.queryloaded .queriesTable table .tdtitle {
            width: auto;
        }

    #colorbox .modalwin a.sectionfilter {
        width: 147px;
    }

    .page .newsfeedandthanks .thread {
        width: 280px;
        margin: 0 auto 20px auto;
    }

        .page .newsfeedandthanks .thread img {
            max-width: 40px;
        }

        .page .newsfeedandthanks .thread .mainthread .comments,
        .continfo.w720 .newsfeedandthanks .thread .mainthread .comments {
            width: 200px;
        }

        .page .newsfeedandthanks .thread .subthread .comments {
            width: 163px;
        }

    .page .newsfeedandthanks .messagecomments .comment ul.options,
    #colorbox .modalwin.modalcomments .comment ul.options,
    #colorbox .modalwin.modaladdcomments .comment ul.options {
        display: none;
    }

    .page .newsfeedandthanks .actions {
        margin: 0 auto 20px;
        padding-bottom: 10px;
        text-align: center;
        width: 274px;
    }

        .page .newsfeedandthanks .actions li {
            float: none;
            margin-bottom: 10px;
            margin-right: 0;
            min-width: 0;
            width: auto;
        }

    .page .continfo.w720 .newsfeedandthanks .actions li {
        margin-right: 0;
    }

    .page .newsfeedandthanks .actions li:last-child {
        margin-bottom: 0;
    }

    .page .newsfeedandthanks .actions li .withborder {
        float: none;
        margin: 0 auto;
        width: 240px;
    }

        .page .newsfeedandthanks .actions li .withborder div.left {
            float: none !important;
            margin: 0 auto 10px;
            max-width: 200px;
        }

        .page .newsfeedandthanks .actions li .withborder div.right {
            float: none !important;
            margin: 0 auto;
            max-width: 200px;
        }

        .page .newsfeedandthanks .actions li .withborder p img {
            display: inline-block;
            float: none;
            margin-right: 10px;
            position: relative;
            top: 7px;
        }

        .page .newsfeedandthanks .actions li .withborder span {
            display: inline-block;
            float: none;
        }

    .page .actions li.popularthanks {
        padding-bottom: 30px;
    }

        .page .actions li.popularthanks label {
            margin-bottom: 10px;
        }

    .page .popularthanks i {
        display: inline-block;
        float: none;
    }

    #colorbox .modalwin .caroufredsel_wrapper {
        min-width: 0;
    }

    #colorbox .modalwin.addnewbadge div.tagsinput,
    #colorbox .modalwin.editbadge div.tagsinput {
        width: 210px !important;
    }

    #colorbox .modalwin.modalaboutbadge .badgeinfo .img {
        float: none;
        margin-right: 0;
        margin-bottom: 10px;
    }

    #colorbox .modalwin.modalaboutbadge .badgeinfo div.left {
        float: none !important;
        margin-bottom: 20px;
        text-align: center;
    }

    #colorbox .modalwin.modalaboutbadge .skills {
        margin-left: 0;
        text-align: center;
    }

    #colorbox .modalwin.modalaboutbadge .statistics .actions li {
        float: none;
        margin-bottom: 10px;
        margin-right: 0;
        overflow: hidden;
    }

    .checkboxes {
        width: 96%;
    }

    #colorbox .modalchooseone .badgescarousel {
        padding: 0 55px;
    }

    #colorbox .divpreview .infoemployee {
        display: none;
    }

    #colorbox .divpreview .commentandbadges {
        text-align: center;
    }

        #colorbox .divpreview .commentandbadges .bggray .left {
            float: none !important;
            margin: 0 auto 20px;
        }

        #colorbox .divpreview .commentandbadges p.comment {
            float: none;
            width: auto;
        }

    .page .givethanks {
        text-align: center;
    }

        .page .givethanks .info {
            float: none;
            max-width: 100%;
            margin-bottom: 10px;
            width: 100%;
        }

        .page .givethanks a.button {
            float: none;
        }

    #colorbox .modalselectperson .chzn-container-multi .chzn-choices {
        max-height: 100px;
    }

    /* Performance */
    .page .containerperformance, .bgdarkgray .containerperformance {
        padding: 20px 5px;
        max-width: 100%;
    }

    .page .review {
        display: block;
        float: none !important;
        margin: 0 auto 20px;
        width: 240px;
    }

        .page .review.absolute {
            margin-bottom: 20px;
            position: relative;
            right: auto;
            top: auto;
        }

    .review label {
        float: none;
        margin-bottom: 5px;
        text-align: center;
    }

    .page .titlewhite,
    .page .titlebigger {
        text-align: center !important;
    }

    .page .containerperformance .contentcircle {
        float: none;
        margin: 50px auto 40px;
        height: 380px;
        width: 300px;
    }

    .page .containerperformance .circlewhite {
        height: 200px;
        padding: 45px 0px;
        width: 290px;
    }

    .page .containerperformance .circleaquamarine {
        bottom: 0px;
    }

    .page .containerperformance .ribbonperformance {
        clear: both;
        margin: 0 auto 20px;
        position: relative;
        right: auto;
        top: auto;
    }

    .page .containerperformance .completereviews {
        width: 100%;
    }

    .page .containerperformance .donutdarkgray {
        float: none;
        margin: 0 auto 10px;
    }

    .page .containerperformance .completereviews .ribbon {
        border-radius: 3px;
        float: none;
        font-size: 15px;
        height: auto;
        left: auto;
        margin: 0 auto;
        padding: 15px;
    }

        .page .containerperformance .completereviews .ribbon:after {
            border: none;
        }

    .page .containerperformance table.darkgray thead tr th {
        font-size: 11px;
        line-height: 15px;
        padding: 0 5px;
    }

    .page .containerperformance table.darkgray.tableseg2 tbody tr td .img {
        display: none;
    }

    .page .containerperformance table.darkgray.tableseg2 tbody tr td span.name {
        margin-top: 0;
    }

    .page .containerperformance table.darkgray tbody tr td span.numbig {
        float: none;
        font-size: 20px;
        line-height: 20px;
        margin: 0 auto;
        text-align: left;
        padding-left: 12px;
    }

    .page .containerperformance table.darkgray tbody tr td span.type {
        padding-top: 0;
    }

    .page .containerperformance table.darkgray tbody tr td span.icn {
        margin: 0 5px 2px;
        position: relative;
    }

    .page .containerperformance table.darkgray.tableseg2 tbody tr td span.imgmanager {
        display: none;
    }

    .page .containerperformance table.darkgray.tableseg2 tbody tr td span.namemanager {
        padding-left: 0;
        padding-right: 20px;
    }

    .page .containerperformance table.darkgray.tableseg2 thead tr th:nth-child(4),
    .page .containerperformance table.darkgray.tableseg2 tbody tr td:nth-child(4) {
        display: none;
    }

    /*Performance - Reviews*/
    .page .continfo .divreview ul.reviewruning,
    .page .continfo .divreview ul.reviewfinished {
        width: 265px !important;
    }

        .page .continfo .divreview ul.reviewruning > li {
            height: auto;
            padding: 0px;
        }

            .page .continfo .divreview ul.reviewruning > li.backtoreview {
                padding: 0px 0px 0px 40px;
            }

        .page .continfo .divreview ul.reviewruning li.description,
        .page .continfo .divreview ul.reviewfinished li.description {
            padding: 20px 0px;
        }

        .page .continfo .divreview ul.reviewruning > li.inforeview.arrow:after,
        .page .continfo .divreview ul.reviewfinished > li.infopastmission.arrow:after {
            right: 0;
        }

        .page .continfo .divreview ul.reviewruning > li.inforeview.arrow:hover:after,
        .page .continfo .divreview ul.reviewfinished > li.infopastmission.arrow:hover:after {
            right: 0;
        }

        .page .continfo .divreview ul.reviewruning > li .percent {
            height: 100%;
        }

        .page .continfo .divreview ul.reviewruning > li .info {
            height: auto;
        }

            .page .continfo .divreview ul.reviewruning > li .info img.badge {
                max-width: 45px;
                margin-right: 10px;
            }

            .page .continfo .divreview ul.reviewruning > li .info .img {
                margin: 0 15px 0 5px;
                height: 50px;
                width: 50px;
            }

                .page .continfo .divreview ul.reviewruning > li .info .img > img {
                    max-width: 50px;
                }

            .page .continfo .divreview ul.reviewruning > li .info span.spritesheet.icnreview {
                margin: 0 10px 0 15px;
            }

            .page .continfo .divreview ul.reviewruning > li .info ul.inline {
                width: 180px;
            }

                .page .continfo .divreview ul.reviewruning > li .info ul.inline li {
                    margin-right: 0;
                }

                .page .continfo .divreview ul.reviewruning > li .info ul.inline.numberinfo {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    -ms-box-sizing: border-box;
                    box-sizing: border-box;
                    padding: 20px 20px 0;
                    width: 100%;
                }

                    .page .continfo .divreview ul.reviewruning > li .info ul.inline.numberinfo li {
                        margin-right: 15px;
                        width: 104px;
                    }

                        .page .continfo .divreview ul.reviewruning > li .info ul.inline.numberinfo li:last-child {
                            margin-right: 0px;
                        }

            .page .continfo .divreview ul.reviewruning > li .info ul span.numbig {
                float: none;
                font-size: 41px;
                line-height: 38px;
                text-align: center;
            }

            .page .continfo .divreview ul.reviewruning > li .info ul span.type {
                font-size: 11px;
                float: none;
                margin-left: 0;
                max-width: 100%;
                padding-top: 5px;
                text-align: center;
            }

    .page .continfo .divreview .spritesheet.icnmanagerstatus {
        top: 0 !important;
    }

    .page .continfo .divreview ul.reviewruning > li .info ul span.icn {
        display: block;
        margin: 0 auto 5px;
        position: relative;
    }

    .page .continfo .divreview ul.reviewfinished > li.infopastreview.arrow:after {
        right: 15px;
    }

    .page .continfo .divreview ul.reviewfinished > li span.complete {
        clear: both;
        margin-left: 0;
        margin-top: 14px;
        width: 100%;
    }

    .page .continfo .divreview ul.reviewfinished > li .reviewby {
        width: 98%;
    }

    .page .continfo .divreview ul.reviewfinished > li span.complete:after {
        content: '';
    }

    .page .continfo .divreview ul.reviewfinished > li.infopastreview .tag {
        margin-top: 12px;
        margin-left: 0;
    }

    .page .heading.performancereview ul.inline {
        margin-top: 10px;
    }

    .page .titlebebasneue {
        font-size: 28px;
        line-height: 28px;
    }

    .page .titlered {
        font-size: 25px;
        line-height: 25px;
    }

    .page .titlebebasneue > span {
        font-size: 45px;
        line-height: 45px;
        margin: 0 21px;
        top: 4px;
    }

    .page .sectorindustry {
        margin-bottom: 60px;
    }

        .page .sectorindustry ul.green:after {
            background: none;
        }

        .page .sectorindustry ul {
            float: none;
            margin: 0 auto !important;
            width: 300px;
        }

            .page .sectorindustry ul li {
                padding: 20px;
            }

                .page .sectorindustry ul li p {
                    max-width: 190px;
                }

    .sectorindustry ul li p.title {
        font-size: 21px;
        line-height: 21px;
        margin-top: 5px;
    }


    /*Tabs2*/
    .page ul.tabs2 {
        height: auto;
    }

        .page ul.tabs2 > li {
            border-bottom: 1px solid #CCCCCC;
            float: none;
            display: block;
        }

            .page ul.tabs2 > li:last-child {
                border-bottom: none;
            }

    /*thread*/
    .thread {
        max-width: 95%;
        margin: 0 auto 20px;
    }

        .thread .subthread {
            padding-left: 50px;
        }

            .thread .subthread img {
                left: 0;
            }

        .thread .files {
            padding-right: 0;
        }

            .thread .files li {
                margin-bottom: 5px;
            }

        .thread .attachfilebutton {
            bottom: auto;
            position: relative;
            right: auto;
        }

        .thread .files li span.filename .deleteattachment {
            opacity: 1;
        }

    .graphgoals {
        height: 200px;
        width: 310px;
    }

        .graphgoals .drop-target {
            height: 200px;
            width: 200px;
        }

        .graphgoals .grid {
            height: 202px;
            width: 280px;
        }

        .graphgoals .axisx {
            width: 200px;
        }

            .graphgoals .axisx i {
                width: 65px;
            }

        .graphgoals .axisy {
            height: 161px;
            left: -65px;
        }

            .graphgoals .axisy i {
                width: 67px;
            }

    .optionstabemployee a.prev,
    .optionstabemployee a.next,
    .optionstabemployee a.prev.disabled,
    .optionstabemployee a.next.disabled {
        padding: 0px 10px;
    }

    /*Chart Line*/
    .page .divlinechart, .page .divlinechart > div {
        height: auto;
        width: 300px;
    }

        .page .divlinechart:after {
            background: none;
        }

    /*Chart Line Dark Gray*/
    .page .performanceseg4 .contchart {
        overflow: hidden;
        width: 100%;
    }

    .page .performanceseg4 .containerperformance .contchart .chartreviews {
        float: left;
        width: 60%;
    }

    .page .performanceseg4 .containerperformance .axisxcarousel {
        clear: both;
        max-width: 260px;
    }

        .page .performanceseg4 .containerperformance .axisxcarousel .caroufredsel_wrapper {
            min-width: 260px;
            max-width: 260px;
        }

    .page .axisxcarousel .axisx li {
        width: 127px !important;
    }

    /*Tab Numbers*/
    .page ul.tabnumbers > li {
        margin-right: 3px;
    }

    .page .conttab .titlequestion {
        font-size: 20px;
        line-height: 24px;
    }

    .page .contsegmentquestions .conttab .divanswer {
        width: 93%;
        margin: 0 auto;
    }

    /*Answer Slider*/
    .contslider .ui-slider {
        width: 232px !important;
    }

    #colorbox .modalresponses ul.tabnumbers > li {
        margin-right: 0;
    }

    #colorbox ul.tabnumbers > li > a {
        height: 34px;
        line-height: 34px;
        width: 34px;
    }

        #colorbox ul.tabnumbers > li > a span {
            font-size: 16px;
            height: 26px;
            line-height: 26px;
            width: 26px;
        }

    #colorbox .modalresponses .titlequestion {
        font-size: 18px;
        line-height: 18px;
        max-width: 100%;
    }

    #colorbox .modalresponses .divanswer {
        width: 92%;
    }

    #colorbox .contslider .ui-slider {
        width: 90%;
    }

    #colorbox .modalresponses .divanswer .divnextquestion a.button.left {
        margin: 10px 0 0 10px;
    }

    #colorbox .modalresponses .divanswer .divnextquestion a.button.right {
        margin: 10px 10px 0 0;
    }

    /*System Settings Performance*/
    .page .settingsperformance .createsegments .eachsegment p.title,
    .page .settingsperformance_benefits .create .eachsegment p.title,
    .page .settingsperformance_benefits .create .eachbenefit p.title,
    .modalwin .settingsperformance_benefits .create .eachsegment p.title {
        display: block;
        max-width: 100%;
        width: 100%;
    }

    .page .settingsperformance .createsegments .eachsegment ul.inline,
    .page .settingsperformance_benefits .create .eachsegment ul.inline,
    .page .settingsperformance_benefits .create .eachbenefit ul.inline,
    .modalwin .settingsperformance_benefits .create .eachsegment ul.inline {
        float: left;
        font-weight: bold;
        margin-bottom: 10px;
        position: relative;
        right: 0;
        top: 0;
    }

    #colorbox .divaddquestion input.text.w470 {
        width: 88%;
    }

    #colorbox .divaddquestion textarea.w480 {
        width: 93%;
    }

    #colorbox .divaddquestion .w200 div.selector {
        width: 186px;
    }

        #colorbox .divaddquestion .w200 div.selector select {
            width: 196px;
        }

    #colorbox .divaddquestion .eachquestion p.title,
    #colorbox .divaddquestion .eachquestion p.title {
        max-width: 100%;
    }

    #colorbox .divaddquestion .eachquestion ul.inline,
    #colorbox .divaddoption .eachoption ul.inline {
        font-weight: bold;
        margin-top: 10px;
        position: relative;
        right: 0;
        top: 0;
    }

    page .form.tool.fieldsoverallscore .block label span.require:not(.first) {
        display: none;
    }

    .contentwhite {
        padding: 15px;
    }

        .contentwhite .review360 .divanswer .contslider .ui-slider {
            width: 182px;
        }

    #div360EmployeeList {
        -moz-box-sizing: border-box;
        padding-right: 20px;
    }

    .containerperformance .blankstate {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        width: 90%;
    }

    .reviewblankstate {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        width: 90%;
    }

    .segments {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        width: 100% !important;
    }

    /* ==========  Recruitment 08/07/2014 :  Start ================== */

    section.recruitment.center {
        margin: 0 auto;
    }

    .page section.recruitment .accordeon {
        padding: 15px 0 15px 15px;
    }

    .page section.recruitment .states .title {
        margin-bottom: 5px;
        max-width: 80%;
    }

    .page section.recruitment .states .addnew {
        display: block;
        margin-bottom: 5px;
        margin-left: 0;
        top: 0;
    }

    .heading.icnrecruitment .right {
        float: left !important;
        margin-top: 20px;
    }

    .page section.recruitment .states .pright {
        display: block;
        float: left !important;
        position: relative;
        right: 0;
        top: auto;
        width: 100%;
    }

    .page section.recruitment .states ul.pright.inline li {
        width: 100%;
    }

    .page section.recruitment .states .total {
        float: right;
        line-height: 15px;
        margin-right: 0 !important;
        text-align: right;
    }

    .page section.recruitment .states .control span {
        display: none;
    }

    .page section.recruitment .states .controlmobile {
        display: block;
    }

    .page .overviewrecruitment .continfo {
        left: auto !important;
        margin: 0 auto;
        max-width: 300px;
    }

    .page .overviewrecruitment .sectionlightblue > div.bg {
        height: auto;
    }

    .page .overviewrecruitment ul.resultapplicants li.talentpool,
    .page .overviewrecruitment ul.resultapplicants li.rejected {
        top: auto;
    }

    .page .overviewrecruitment ul.resultapplicants li {
        display: inline-block;
        float: none;
        margin-bottom: 60px;
        margin-right: 0;
    }

        .page .overviewrecruitment ul.resultapplicants li.accepted:before {
            background: none;
        }

        .page .overviewrecruitment ul.resultapplicants li.accepted:after {
            margin-left: 0;
            left: 65px;
        }

    .page .overviewrecruitment .new .newapplicants {
        top: -36px;
        position: relative;
    }

    .overviewrecruitment .new p.last {
        padding-top: 0;
    }

    .modalwin input.w300 {
        width: 195px;
    }

    .modalwin .w440 div.selector {
        width: 210px;
    }

    .divworkingpattern .week .right {
        clear: both;
        float: none !important;
    }

    .divworkingpattern .week ul.days li {
        margin-bottom: 10px;
        width: 100%;
    }

    .divworkingpattern ul li {
        display: block;
        float: none;
        margin-bottom: 5px;
        overflow: hidden;
        width: 100%;
    }

        .divworkingpattern ul li .deleteweek {
            margin-left: 0;
        }

    .backtowork table.style1 thead tr th,
    .backtowork table.style1 tbody tr td {
        padding: 10px 5px;
    }

    table input.datepicker {
        width: 30px;
    }

    .doctormanagersection {
        margin-top: 0;
        width: 100%;
    }

    .modalbenefitoptions .bgwhite {
        width: 200px;
    }

    .modalbenefits .titles {
        display: none !important;
    }

    .modalbenefits label.block.onlymobile {
        line-height: 22px;
        margin-bottom: 10px;
    }

    .page .continternalbenefits .bggray .block {
        display: block;
    }

    .page .continternalbenefits .bggray div.block > .inline {
        margin-right: 0;
        width: 100%;
    }

    .page .continternalbenefits .bggray div.block label.inline {
        margin-bottom: 0;
    }

    .page .continternalbenefits .divresult {
        padding: 0;
    }

    .page table.flexiblebenefits tr th:nth-child(2),
    .page table.flexiblebenefits tr td:nth-child(2) {
        display: none;
    }

    .whotoalert, alertleft {
        float: none;
        width: 100%;
    }

    section.chartbenefit .jqxChart {
        float: none;
        margin: 0 auto;
    }

    section.chartbenefit div.blue {
        padding-right: 0;
    }


    .commonColumnList li {
        width: 100% !important;
    }

    .authenticationList li {
        border-top: 1px solid #cccccc;
        border-left: none;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* ==========  Recruitment 08/07/2014 :  End ==================== */

    .headingWDuplicate {
    }

        .headingWDuplicate .headingLft {
            float: none;
        }

        .headingWDuplicate .headingLinkRht {
            float: none;
        }

        .headingWDuplicate .headingLinkMid {
            padding: 10px 0;
            text-align: left;
        }

    ul.tabs2 > li.performancebuttons {
        padding: 5px 0;
        position: relative;
        right: auto;
        text-align: center;
        top: auto;
    }

    .newsSettingLbl {
        margin-left: 0;
    }

    .divw630, .divw502 {
        overflow-x: scroll;
        width: 100% !important;
    }

    .divw300, .divw400 {
        width: 100% !important;
    }

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

    .ripplecontainer .create .eachstep p.title .jsnamestep {
        width: calc(100% - 120px);
        display: inline-block;
        vertical-align: top;
    }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    .wrapper {
        width: 280px;
    }

    section.sectionerror .message {
        width: 200px;
    }

    header.internal h1.logo {
        width: 220px;
    }

    header h1.logo.signuph {
        max-width: 185px;
        margin-right: 0;
    }

    .form input.text.w428 {
        width: 92%;
    }

    .wrapper580 input.text.w580 {
        width: 92%;
    }

    .wrapper580 input.text.w460 {
        width: 177px;
    }

    .wrapper580 textarea.w580 {
        width: 270px;
    }

    /*Company Planner*/
    .page .companyplanner .filterevents .heading {
        width: 165px !important;
    }

    /*Performance Seg 4*/
    .page .performanceseg4 ul.buttonsfilter {
        margin-bottom: 20px;
    }

    .page .performanceseg4 .containerperformance .contchart .chartreviews {
        width: 90%;
    }

    .page .performanceseg4 .contchart .chartreviews {
        margin-top: 75px;
    }

    .page .performanceseg4 .jqplot-base-canvas {
        height: 295px !important;
        width: 300px !important;
    }

    .page .performanceseg4 table.jqplot-table-legend {
        top: -75px !important;
        left: 0 !important;
        width: 100%;
    }

    .page .axisxcarousel .axisx li {
        margin-right: 100px;
        width: 79px !important;
    }

    .contentcarouselsegment > .overviewsegment {
        width: 128px;
    }

    .page section.recruitment.center {
        padding-right: 20px;
        max-width: 100%;
    }
}

.noTipyinfoSuccess {
    background-color: #F3FFE3 !important;
    border: 1px solid #C2FFAA !important;
    border-radius: 4px !important;
    color: #64b15c;
    display: inline-block;
    font-size: 11px;
    line-height: 18px;
    padding: 10px;
    -webkit-transition: visibility 0s linear 0.3s;
    -moz-transition: visibility 0s linear 0.3s;
    -o-transition: visibility 0s linear 0.3s;
    -ms-transition: visibility 0s linear 0.3s;
    transition: visibility 0s linear 0.3s;
}

a.plus {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/plus.png') 0 0 no-repeat;
    display: inline-block;
    height: 15px;
    width: 17px;
    margin: 7px 7px 0 0;
}

a.minus {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/minus.png') 0 0 no-repeat;
    display: inline-block;
    height: 15px;
    width: 17px;
    margin: 7px 7px 0 0;
}

/* PLIVE 221 21012014 : start
/* Display error message on Timesheet : start */
.errorinline {
    background: #FFE3E3;
    border: 1px solid #FFAAAA;
    border-radius: 4px;
    color: #FF7C85;
    margin-bottom: 20px;
    padding: 5px 30px 5px 10px;
    position: relative;
}

    .errorinline:after, .errorinline:before {
        bottom: -12px;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        content: "";
        left: 10px;
        position: absolute;
    }

    .errorinline:after {
        border-top: 12px solid #FFE3E3;
        content: "";
    }

    .errorinline:before {
        border-top: 12px solid #FFAAAA;
        bottom: -13px;
        content: "";
    }

    .errorinline .icnclose {
        position: absolute;
        right: 10px;
        top: 15px;
    }
/* Display error message on Timesheet : end */

/* Timesheet : breaks , Add more : start */

.divbreaks .bggray, .addabreak {
    display: block;
    height: 40px;
    margin-bottom: 10px;
    position: relative;
    text-align: center;
}

.bggray.addabreak {
    padding: 10px 0px;
}

.addabreak > span {
    color: #666666;
    display: inline-block;
    font-weight: bold;
    line-height: 38px;
}

.divbreaks .bggray .removebreaks {
    position: absolute;
    right: 10px;
    top: 5px;
}

.divbreaks .bggray p {
    display: block;
    float: right;
    font-size: 14px;
    font-weight: bold;
    margin-right: 30px;
    margin-top: 9px;
}

.divbreaks .bggray .jspinner {
    margin-right: 10px;
}

.divbreaks .bggray div.inline {
    margin-right: 31px;
}

    .divbreaks .bggray div.inline:last-child {
        margin-right: 0px;
    }

.divbreaks .bggray label.inline {
    text-align: left;
    width: 99px;
}

.divbreaks .bggray .inline:last-child {
    margin-right: 0px;
}

.totaltime {
    float: left;
    padding-top: 10px;
    width: 520px;
}

    .totaltime .bggray {
        margin-right: 6px;
        width: 100px;
    }

    .totaltime ul.inline li > p:first-child {
        font-weight: 700;
        margin-bottom: 5px;
    }

table.tableproject, table.cursor {
    cursor: pointer;
}

.ml0 {
    margin-left: 0px !important;
}

.pb70 {
    padding-bottom: 70px !important;
}

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

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

label.widthauto {
    margin-right: 15px;
    width: auto;
}


/*Display red exclaimation mark on break timesheet */
.spritesheet.icntimesRed {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icon-timesheet.png') no-repeat 0 0;
    height: 16px;
    top: 14px;
    width: 13px;
}

/* Project Timesheet : start */
.mw710 .modalwin section.cont ul.tabs.two li, .wmw710 .modalwin section.cont ul.tabs.two li {
    max-width: 322px;
    width: 322px;
}

.form .threefieldinline {
    margin-bottom: 30px;
}

    .form .threefieldinline:after {
        clear: both;
        content: " ";
        display: block;
        height: 0;
        visibility: hidden;
    }

    .form .threefieldinline div.inline {
        margin-right: 16px;
        max-width: 205px;
    }

.w238 {
    width: 238px !important;
}

.customFieldRequire {
    left: 100px;
    right: auto;
    top: 11px;
}


.customFieldRequireApplicantQuestion {
    right: 523px;
    top: 10px;
}

.w238 {
    width: 238px !important;
}

.listpersonselectedThanksPreview table tbody tr td {
    padding: 1px 5px !important;
}

/* text editor css start*/
.threadComments {
}

    .threadComments ul {
        padding-left: 20px;
        list-style-type: disc;
    }

        .threadComments ul li {
        }

    .threadComments em {
        font-style: italic;
    }
/* text editor css end*/

/* Add to show pointer when mouse hover on Thanks setting badge table */
table.jstablebadge tbody tr td {
    cursor: pointer;
}

/* Added to show outline error on file upload box on add new badge modal*/
.modaladdnewbadge .uploadblue div.error,
.modaladdnewbadge .uploadblue div.error.focus,
.modaladdnewbadge .uploadblue div.error.hover,
.modaladdnewbadge .uploadblue div.error:hover {
    background-image: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spriteerror.png');
    background-repeat: no-repeat;
    background-position: left -0px;
    -webkit-font-smoothing: antialiased;
}

    .modaladdnewbadge .uploadblue div.error span.filename {
        color: #FF0000 !important;
    }

/* Added to show empty state on Employee Thanks*/
.emptyState .newsfeedandthanks {
    overflow: hidden;
    margin-bottom: -10px;
}

.modaladdcomments div.error .tre-main iframe, .modalcomments div.error .tre-main iframe {
    border: 1px solid #FFAAAA;
    margin: 0px;
    padding: 0px;
    box-shadow: 1px 1px 6px #FFE3E3, -1px -1px 6px #FFE3E3;
}

/* Added to show pointer when mouse hover on Thanks Wizard Comfirm modal employee list */
table.tablePreviewEmployee tbody tr td {
    cursor: pointer;
}

/* Added to enbale/disable Send Review to all employee button on System setting Performance Review tab */
a.disabledButton {
    background: #EEEEEE !important;
    cursor: default !important;
    border: 1px solid #aaa !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    color: #aaa !important;
    text-shadow: none !important;
}

/* Added to show badge icon on add edit badge */
div.modaladdnewbadge .badgeIcon {
    border: 0 none;
    float: left;
    margin-right: 10px;
}


.modalselectperson .chzn-container-multi .chzn-choices .search-field input {
    width: 125px !important;
}

.newsfeedComment p {
    padding-bottom: 10px;
}

.newsfeedComment h5.newstitle {
    color: #000;
    font-weight: normal;
    font-size: 20px;
    line-height: 32px;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

.newsfeedComment h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.newsfeedComment h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.newsfeedComment h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color: #666666;
}

.newsfeedComment h4 {
    display: block;
    font-size: 1em;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    line-height: normal;
}

.newsfeedComment h5 {
    display: block;
    font-size: 0.83em;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color: #666666;
    line-height: normal;
}

.newsfeedComment h6 {
    display: block;
    font-size: 0.67em;
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    color: #666666;
    line-height: normal;
}

.newsfeedComment a[href] {
    color: #3400f3 !important;
    text-decoration: underline;
}

    .newsfeedComment a[href]:visited {
        color: #551a8b !important;
    }

.newsfeedComment img {
    float: none !important;
    margin-right: 0px !important;
}

/* Added to show border on top of Empty State box */
.bdrTGray {
    border-top: 1px solid #EDEDED;
}

/* Added to help message nearer the control*/
div.employeeDocumentBlock {
    width: 350px;
}

/* Added to align icon on text editor (treditor)*/
.comment .tre-separator {
    margin-top: 4px;
}

.performanceCompletionDate {
    font-size: 20px !important;
}

div.includeSalary div.checker {
    margin-top: 13px !important;
}

a.workPatternDelete {
    float: left;
    position: relative;
    top: 30px;
    cursor: pointer;
}

.workingpatternpreview.spritesheet.icnchange {
    background-position: 0 -1063px;
    width: 16px;
    height: 16px;
    margin-left: 7px;
    margin-top: 12px;
}

.padLR10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.openingBody {
    padding: 0px;
    margin: 0px;
    background: #34495E;
    background-size: cover;
}

.vacancyopeningwrapper {
    width: 470px;
    margin: 0px auto;
    z-index: 100;
    position: relative;
}

.openingfield {
    padding-bottom: 20px;
}

.vacancyopeninglabel {
    font-size: 14px;
    color: #FFF;
    line-height: 30px;
    padding-bottom: 5px;
}

.openingfield input {
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 8px;
    height: 36px;
    background: #FFF;
    width: 450px !important;
    font-size: 16px;
    color: #333333;
}

.vacancyopeningblue:hover {
    background: #2980B9;
}

.vacancyopeningblue {
    background: #3498DB;
}

.btnvacancyopening {
    color: #FFF;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    padding: 25px 59px;
    margin-right: 165px;
    margin-top: 30px;
    margin-bottom: 20px;
}


.companyvacancyopening {
    width: 470px;
    margin: 0px auto;
    margin-top: 80px;
}

.vacancynameforopening {
    font-size: 26px;
    line-height: 30px;
    color: #FFF;
    text-align: center;
    margin-top: 80px;
    padding: 0px;
    font-family: 'Open Sans', sans-serif;
}

.vacancyjobinfodesc {
    background-color: #fff;
    color: #000000;
    font-family: 'Open Sans', sans-serif !important;
}

.jobopeningsearchresult {
    border-top: 1px solid #EDEDED !important;
    color: #fff;
}

    .jobopeningsearchresult div.cont {
        margin: 0 auto;
        width: 470px !important;
    }

.jobOpeningFont {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px;
}

.oneLogin {
    margin-left: 5px;
}

input.removeInputCrossButton[type=text]::-ms-clear {
    display: none;
}

/* Added for Signature required in employee document : Start */
.graphicalSignatureWrapper {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/img_sign_area.png') repeat-x 0 0;
    border-top: 2px solid #e7e7e7;
    margin: -10px -30px 0;
}

p.graphicalSignature {
    display: table-cell;
    font-family: 'signatureregular', arial;
    font-size: 50px;
    line-height: 50px;
    vertical-align: middle;
}

.graphicalSignatureColour {
    background-color: #f7f7f7;
    border-top: 2px solid #e7e7e7;
    height: 150px;
    margin: -10px -30px 0;
}

.signatureAlignment {
    display: table;
    height: 150px;
    width: 100%;
}

.weekWorkingHours {
    margin-right: 15px;
    line-height: 18px;
}
/* Added for Signature required in employee document : End */

.authenticationDv {
    padding: 100px 0;
}

    .authenticationDv a {
        color: #4c83b1;
    }

.bdrBG {
    border-bottom: 1px solid #ddd;
}

.bdrTG {
    border-top: 1px solid #ddd;
}

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

.skiptranslate iframe {
    visibility: hidden !important
}

#google_translate_element {
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

/* Added goal management css */
.goalthread {
    clear: both;
    overflow: hidden;
}

    .goalthread .goalmainthread {
        overflow: hidden;
        position: relative;
        padding-left: 60px;
    }

    .goalthread img {
        float: left;
        height: auto;
        left: 0;
        margin-right: 0;
        max-width: 36px;
        position: absolute;
        top: 0;
    }

    .goalthread .goalmainthread .comments, .goalthread .goalprincipalthread .comments {
        background-color: #EBF9FF;
        border: 1px solid #D8F1FF;
        border-radius: 3px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        margin-bottom: 20px;
        padding: 8px 10px;
        position: relative;
        width: 100%;
    }


        .goalthread .goalmainthread .comments:before {
            border-color: rgba(216, 241, 255, 0);
            border-right-color: #D8F1FF;
            border-width: 11px;
            top: 20px;
            margin-top: -11px;
        }

        .goalthread .goalmainthread .comments:after, .goalthread .goalmainthread .comments:before {
            right: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

.goalprincipalthread .comments div.text {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    width: 97%;
}

    .goalprincipalthread .comments div.text > .left {
        margin-right: 10px;
        overflow: hidden;
        padding-top: 5px;
    }

.completationgoals {
    display: block;
    float: left;
    width: 230px;
}

    .completationgoals input {
        display: block;
        float: left;
        height: 23px;
        line-height: 23px;
        margin-right: 10px;
        width: 36px;
    }

    .completationgoals label {
        display: block;
        float: left;
        font-weight: 600;
        line-height: 25px;
    }

.goalthread .goalsubthread {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    clear: both;
    margin-bottom: 20px;
    padding-left: 110px;
    position: relative;
    width: 100%;
}

.goalsubthread img {
    left: 60px;
}

.goalthread .comments a.underline {
    margin-left: 6px;
}

.goalthread .attachfilebutton {
    bottom: 10px;
    clear: both;
    position: absolute;
    right: 10px;
}

.attachfilebutton div.uploader {
    position: relative;
    overflow: hidden;
    cursor: default;
}

.goalthread .files {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    float: left;
    overflow: hidden;
    min-height: 10px;
    padding-right: 90px;
    width: 100%;
}

    .goalthread .files li {
        background-color: #f3f3f3;
        display: block;
        float: left;
        margin-right: 5px;
        padding: 5px;
        text-align: center;
    }

        .goalthread .files li a {
            display: block;
        }

        .goalthread .files li img {
            display: inline-block;
            float: none;
            height: 60px;
            left: auto;
            margin-bottom: 5px;
            max-width: 100%;
            position: relative;
            top: auto;
            width: auto;
        }


        .goalthread .files li span.filename {
            box-sizing: border-box;
            color: #666;
            display: block;
            font-size: 10px;
            padding-right: 13px;
            position: relative;
            text-align: center;
            width: 100%;
        }

        .goalthread .files li:hover span.filename .deleteattachment {
            opacity: 1;
        }

        .goalthread .files li span.filename .deleteattachment {
            background: url('https://static.peoplehr.net/202506198-hotfix000000/images/cross.png') no-repeat left top;
            display: block;
            position: absolute;
            opacity: 0;
            top: 1px;
            right: 0;
            height: 8px;
            width: 8px;
        }

.commentError {
    opacity: 1 !important;
    position: static !important;
    float: left;
    width: 58% !important;
    margin: 10px 0 0 130px;
    visibility: visible !important;
}

/*TimesheetWeekView changes starts*/
.date-box {
    border: 1px solid #CCCCCC;
    padding: 10px;
    text-align: center;
}

    .date-box h3 {
        font-size: 16px;
        font-weight: 700;
    }

.assignTo {
    margin-top: 0px;
}

table.style4 thead {
    box-shadow: 0 1px #FFFFFF inset;
    -webkit-box-shadow: 0 1px #FFFFFF inset;
    border: none;
}

    table.style4 thead tr {
        background-color: #EDEDED;
    }

        table.style4 thead tr th,
        table.style4 thead tr td {
            border-right: none;
            padding: 5px;
            font-weight: 700;
        }

        table.style4 tbody tr th,
        table.style4 tbody tr td,
        table.style4 thead tr th,
        table.style4 thead tr td {
            border-bottom: 1px solid #DCDCDC;
            border-right: none;
            line-height: 20px;
            padding: 5px;
            cursor: default;
        }

        table.style4 thead tr th,
        table.style4 thead tr td {
            white-space: nowrap;
        }

.table-inout tbody tr td {
    cursor: default !important;
}

table.table-inout tbody tr:hover td,
table.style4 thead tr:hover th,
table.style4 tbody tr:hover td {
    background-color: transparent !important;
}

.wid140 {
    width: 140px !important;
}

.wid490 {
    width: 490px;
}

.style5 {
    width: auto;
}

.time-bottom-comments {
    white-space: nowrap;
}

.time-scroll-div {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.white-space {
    white-space: nowrap;
}
/*TimesheetWeekView changes ends*/

@media only screen and (max-width : 790px) {
    ul.tabs2 > li > a {
        padding: 0px 10px !important;
    }
}

@media only screen and (max-width : 1200px) {
    ul.tabs2 > li > a {
        padding: 0px 17px;
    }
}

@media only screen and (max-width : 1030px) {
    .page .titlebigger {
        text-align: left;
    }

    .performanceseg4 .review.absolute {
        margin-bottom: 0;
        position: relative;
        right: auto;
        top: auto;
    }

    .performace_review_settings div.left.w600 {
        padding-top: 20px;
        width: auto;
    }

    ul.tabs2 > li.performancebuttons a.button.medium {
        padding: 0px 10px;
    }

    ul.tabs2 > li.performancebuttons a.button .spritesheet.icnprint {
        display: none;
    }


    .customScreenAuthorisationRoute .chzn-container .chzn-results {
        max-height: 75px;
    }
}

@media screen and (max-width: 1280px) {
    .content .continfo.timesheet-continfo {
        width: 85%;
    }

    .wid760 {
        width: 75%;
    }
}

.ats {
    font-weight: 700;
    margin-top: 80px !important;
    margin-bottom: 30px !important;
    margin-left: 0px !important;
}

.recapemail {
    font-weight: 700;
    margin-bottom: 10px !important;
    margin-left: 0px !important;
}

.loginsinglesignon {
    color: #666666;
    display: none;
    float: left;
    font-weight: 600;
    line-height: 22px;
    margin-bottom: 10px;
}

    .loginsinglesignon i {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/images/padlock.png') no-repeat top left;
        display: block;
        float: left;
        margin-right: 5px;
        height: 20px;
        width: 15px;
    }

.managerSettingSelection td {
    padding: 10px 0px;
}

section.uploadfile .signaturerequired {
    float: none;
    margin: 0;
    position: relative;
    top: 4px;
    width: 100%;
    z-index: 10 !important;
}

    section.uploadfile .signaturerequired label.block {
        font-weight: normal;
        font-size: 12px !important;
        margin: 0;
        line-height: 21px !important;
    }

.divw30 {
    width: 50px;
}

.numbernoti.nlightblue {
    background-color: #73a1cd;
    border: 1px solid #73a1cd;
    color: #fff;
}

.tagsheightauto div.tagsinput {
    padding-bottom: 0;
}

.cur_pointer {
    cursor: pointer;
}

.w320 div.selector {
    width: 310px;
}

.ml138 {
    margin-left: 138px !important;
}

.ml262 {
    margin-left: 262px !important;
}

.borderradius9 {
    border-radius: 9px;
    line-height: 18px;
    min-width: 30px;
}

.spritesheet.icnemail {
    background-position: -155px -1800px;
    height: 12px;
    width: 16px;
}

.queryaggregatestatusbar {
    border-top: solid 0.5px;
}

.customFieldRequireAgencyName {
    right: 127px;
    top: 10px;
}

.linkPurple {
    color: #4b0082 !important;
    font-size: 12px !important;
    cursor: pointer;
}

.cursorPointer {
    cursor: pointer;
}

.displayNone {
    display: none;
}

/*tootip for error message applicant list to from date start*/

span.tipyinfo1 {
    background-color: #FCF8E3;
    border: 2px solid #FBEED5;
    border-radius: 4px;
    color: #C09853;
    display: inline-block;
    font-size: 11px;
    line-height: 18px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    padding: 10px;
    position: absolute;
    right: 0;
    -webkit-transition: visibility 0s linear 0.3s;
    -moz-transition: visibility 0s linear 0.3s;
    -o-transition: visibility 0s linear 0.3s;
    -ms-transition: visibility 0s linear 0.3s;
    transition: visibility 0s linear 0.3s;
    top: -3px;
    visibility: hidden;
    width: 150px;
    z-index: 10;
}

    span.tipyinfo1.bottom::after, span.tipyinfo1.bottom::before {
        border: medium solid transparent;
        bottom: 100%;
        content: " ";
        height: 0;
        left: 20%;
        pointer-events: none;
        position: absolute;
        width: 0;
    }

    span.tipyinfo1.bottom.bottom60 {
        top: 60px;
    }

    span.tipyinfo1.bottom {
        left: 0;
    }

        span.tipyinfo1.bottom.bottom140 {
            top: 140px;
        }

        span.tipyinfo1.bottom.bottom80 {
            top: 80px;
        }

.form .dvShowDateError span.tipyinfo1.toolerror1 {
    background-color: #FFE3E3;
    border: 1px solid #FFAAAA;
    color: #FF7C85;
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1px;
    visibility: visible;
}

span.tipyinfo1.bottom::before {
    border-color: rgba(251, 238, 213, 0) rgba(251, 238, 213, 0) #FFAAAA;
    border-width: 12px;
    margin-left: -12px;
}

span.tipyinfo1.bottom::after {
    border-color: rgba(252, 248, 227, 0) rgba(252, 248, 227, 0) #FFE3E3;
    border-width: 10px;
    margin-left: -10px;
}

.form .dvShowDateError span.tipyinfo1.toolerror1 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9;
}

.errorApplicant {
    border: 1px solid #FFAAAA !important;
    -webkit-box-shadow: 1px 1px 6px #FFE3E3, -1px -1px 6px #FFE3E3;
    box-shadow: 1px 1px 6px #FFE3E3, -1px -1px 6px #FFE3E3 !important;
}
/*tootip for error message applicant list to from date end  */

.noTipyinfoError1 {
    background-color: #FFE3E3 !important;
    border: 1px solid #FFAAAA !important;
    border-radius: 4px !important;
    color: #FF7C85;
    display: inline-block;
    font-size: 11px;
    line-height: 18px;
    padding: 10px;
    -webkit-transition: visibility 0s linear 0.3s;
    -moz-transition: visibility 0s linear 0.3s;
    -o-transition: visibility 0s linear 0.3s;
    -ms-transition: visibility 0s linear 0.3s;
    transition: visibility 0s linear 0.3s;
}

span.tipyinfo2 {
    background-color: #FCF8E3;
    border: 2px solid #FBEED5;
    border-radius: 4px;
    color: #C09853;
    display: inline-block;
    font-size: 11px;
    line-height: 18px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    padding: 10px;
    position: absolute;
    right: 0;
    -webkit-transition: visibility 0s linear 0.3s;
    -moz-transition: visibility 0s linear 0.3s;
    -o-transition: visibility 0s linear 0.3s;
    -ms-transition: visibility 0s linear 0.3s;
    transition: visibility 0s linear 0.3s;
    top: -3px;
    visibility: hidden;
    width: 150px;
    z-index: 10;
}

    span.tipyinfo2.bottom::after, span.tipyinfo2.bottom::before {
        border: medium solid transparent;
        bottom: 100%;
        content: " ";
        height: 0;
        left: 70%;
        pointer-events: none;
        position: absolute;
        width: 0;
    }

    span.tipyinfo2.bottom.bottom60 {
        top: 60px;
    }

    span.tipyinfo2.bottom {
        left: 0;
    }

        span.tipyinfo2.bottom.bottom140 {
            top: 140px;
        }

        span.tipyinfo2.bottom.bottom80 {
            top: 80px;
        }

        span.tipyinfo2.bottom.bottom45 {
            top: 45px;
        }

.form .dvShowDateError span.tipyinfo2.toolerror1 {
    background-color: #FFE3E3;
    border: 1px solid #FFAAAA;
    color: #FF7C85;
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1px;
    visibility: visible;
}



span.tipyinfo2.bottom::before {
    border-color: rgba(251, 238, 213, 0) rgba(251, 238, 213, 0) #FFAAAA;
    border-width: 12px;
    margin-left: -12px;
}

span.tipyinfo2.bottom::after {
    border-color: rgba(252, 248, 227, 0) rgba(252, 248, 227, 0) #FFE3E3;
    border-width: 10px;
    margin-left: -10px;
}

.form .dvShowDateError span.tipyinfo2.toolerror1 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9;
}


span.tipyinfo3 {
    background-color: #FCF8E3;
    border: 2px solid #FBEED5;
    border-radius: 4px;
    color: #C09853;
    display: inline-block;
    font-size: 11px;
    line-height: 18px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    padding: 10px;
    position: absolute;
    right: 0;
    -webkit-transition: visibility 0s linear 0.3s;
    -moz-transition: visibility 0s linear 0.3s;
    -o-transition: visibility 0s linear 0.3s;
    -ms-transition: visibility 0s linear 0.3s;
    transition: visibility 0s linear 0.3s;
    top: -3px;
    visibility: hidden;
    width: 150px;
    z-index: 10;
}

    span.tipyinfo3.bottom::after, span.tipyinfo3.bottom::before {
        border: medium solid transparent;
        bottom: 100%;
        content: " ";
        height: 0;
        left: 15%;
        pointer-events: none;
        position: absolute;
        width: 0;
    }

    span.tipyinfo3.bottom.bottom60 {
        top: 60px;
    }

    span.tipyinfo3.bottom {
        left: 0;
    }

        span.tipyinfo3.bottom.bottom140 {
            top: 140px;
        }

        span.tipyinfo3.bottom.bottom80 {
            top: 80px;
        }

        span.tipyinfo3.bottom.bottom45 {
            top: 45px;
        }

        span.tipyinfo3.bottom.bottom65 {
            top: 65px;
        }

.form .dvShowDateError span.tipyinfo3.toolerror1 {
    background-color: #FFE3E3;
    border: 1px solid #FFAAAA;
    color: #FF7C85;
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1px;
    visibility: visible;
}

span.tipyinfo3.bottom::before {
    border-color: rgba(251, 238, 213, 0) rgba(251, 238, 213, 0) #FFAAAA;
    border-width: 12px;
    margin-left: -12px;
}

span.tipyinfo3.bottom::after {
    border-color: rgba(252, 248, 227, 0) rgba(252, 248, 227, 0) #FFE3E3;
    border-width: 10px;
    margin-left: -10px;
}

.form .dvShowDateError span.tipyinfo3.toolerror1 {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9;
}


label.Qblock {
    color: #666666;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    margin-right: 10px;
    width: 100%;
}

contentLeft183 {
    left: 180px !important;
}

.dtintwdate .ui-datepicker-trigger {
    margin-left: 10px;
    position: relative;
    top: -1px;
}

/* Queries Chart
============================================================ */
.divquerieschart {
    border: 1px solid #f1f1f1;
    display: none;
    margin: 20px auto;
    max-width: 700px;
    height: 300px;
    width: 100%;
}

@media only screen and (max-width: 767px) {

    #dvApplicantQuestion.form .w330 div.selector {
        width: 185px;
    }

        #dvApplicantQuestion.form .w330 div.selector select {
            width: 195px;
        }

    #dvApplicantQuestion.form input.text.w310 {
        width: 174px;
    }

    #dvApplicantQuestion.form textarea, .form .textareaLookDv {
        width: 184px;
    }

    #dvApplicantQuestion.form .uploadblue div.uploader {
        width: 193px !important;
    }
}

.form::after, .form p.block::after, .form div.block::after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}

.chzn-choices .search-field .default {
    width: 62px !important;
}

.displayservertime {
    margin-right: 15px !important;
}

.siftWordWrap {
    overflow-wrap: break-word;
}

.themehoverset {
    height: auto !important;
}

    .themehoverset ul.dropprofileoptions li a:hover {
        background-color: #3a3d41 !important;
    }

.newsfeedComment ol {
    padding-left: 20px;
}

#tblExpensesList {
    border-collapse: collapse;
    empty-cells: show;
}

    #tblExpensesList tbody td {
        position: relative;
    }

.deletedExpenseStyle {
    color: Red;
    font-style: italic;
}

.errorMessageFP {
    color: #FF7C85;
    font-size: 15px;
}

.nonScrollDiv {
    padding: 0;
    margin-right: 18px;
}

.query_list.style2 td.name {
    width: 26%;
}

.query_list.style2 td.description {
    width: 45%;
}

.accrdnWid {
    margin-right: 69px !important;
    text-align: left !important;
}

.wordBreakClass {
    word-break: break-all !important;
}

.activeMissionHold, .activeMissionHold .percent {
    height: 140px !important;
}

    .activeMissionHold .info {
        height: 110px !important;
    }

        .activeMissionHold .info ul.inline {
            height: 45px;
        }

        .activeMissionHold .info img.badge {
            margin-top: 12px;
        }

.pastMissionsHold li {
    height: 80px !important;
}

    .pastMissionsHold li .missiontitle span.complete::after {
        line-height: 29px;
    }

.pastMissionsHold .pastMissions {
    margin-top: 12px !important;
    margin-right: 41px;
    width: 80%;
}

.pastMissionsHold .completeSec {
    display: inline-block;
    float: right;
}

.txtTruncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.textScroll {
    max-height: 150px;
    overflow-y: auto;
}

    .textScroll img {
        width: 420px;
    }

.taskDesc {
    max-height: 150px;
    overflow-y: auto;
}

    .taskDesc img {
        width: 100%;
    }

.displayNoneImp {
    display: none !important;
}

.btnRefresh {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/refresh-icon.png') no-repeat center center;
    width: 20px;
    height: 20px;
    top: 4px;
    display: block;
}

.dashboardUpdateTime {
    font-size: 11px;
    color: #3385B2;
    line-height: 15px;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.dllTool {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/icn/dll.png') no-repeat center center;
    width: 20px;
    height: 20px;
    top: 4px;
}

.draftCopy {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 62px;
    height: 23px;
    border: 1px solid white;
    border-radius: 4px;
    background: #034347;
    color: white;
    font-family: 'Roboto';
    font-size: 13px;
    text-align: center;
}

.activeAccess {
    color: green;
    font-weight: bold;
}

#cc_c2a {
    z-index: 1000000000 !important;
}

.fillimg {
    min-height: 100%;
    width: 150px;
    height: 150px;
}

textarea.w645 {
    width: 645px;
}

.textarea-height-logboooktraining::before {
    height: 32px !important
}

.add-more-btn {
    display: inline-block !important;
    padding: 0 10px !important;
}

.multiple-choice-brder {
    border: #CCCCCC solid 1px;
    padding: 5px;
}

.notsidebar .dashboardUpdateTime {
    margin-right: 70px;
}

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

.w215 div.selector {
    width: 215px;
}

    .w215 div.selector select {
        width: 225px;
    }

input.search::-ms-clear {
    display: none;
    width: 0;
}

.ami {
    color: blue;
    font-size: 9px;
}

.fw700 .selector {
    font-weight: 700;
}

.emp-custmulti-select .chzn-drop .chzn-results li:first-child {
    width: auto;
}

.emp-custmulti-select .chzn-drop .chzn-results li {
    float: none;
}

.emp-custmulti-select .chzn-choices li:last-child {
    border-left: 0px solid #CCCCCC;
}

.emp-custmulti-select .chzn-drop .chzn-results {
    overflow-y: auto;
    margin: 0px 0 0;
}

.spnHeighlight {
    color: #477dae;
    font-weight: bold;
}

.mr-top-5 span.toolerror {
    margin-top: 5px;
}

.w867 {
    width: 867px;
}

.mrl8 {
    margin-left: 8px !important
}

@media (min-width: 768px) and (max-width: 999px) {

    .content.notsidebar .panel {
        padding: 20px 20px 0;
    }

    #divRippleContainer.col-sm-12, #divHolidays.col-sm-12 {
        width: 100% !important;
        margin-left: 0;
    }

    .ripplecontainer .create .eachstep p.title {
        margin-top: 40px;
    }

    .notsidebar .dashboardUpdateTime {
        margin-right: 40px;
    }

    .divw630 {
        width: 480px;
    }

    #txtOtherContact {
        width: 278px !important;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    .notsidebar .dashboardUpdateTime {
        margin-right: 40px;
    }
}

.docAccess {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/tickGreen.png') no-repeat;
    padding: 2px 10px;
    position: relative;
    height: 15px;
    width: 15px;
    margin-left: 5px;
}

.docNoAccess {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/crossRed.png') no-repeat;
    padding: 2px 10px;
    position: relative;
    height: 15px;
    width: 15px;
    margin-left: 5px;
}

.minimalistic.RadMediaPlayer .rmpSeekBar {
    margin-right: 175px;
}

.minimalistic .rmpRightControlsSet .rmpProgressText {
    top: 4px;
    position: relative;
}

.minimalistic .rmpBigPlayButton {
    display: block !important;
}

.minimalistic.RadMediaPlayer .rmpTitleBar {
    display: none !important;
}

.minimalistic.RadMediaPlayer {
    visibility: visible !important;
}

.minimalistic audio {
    height: 100% !important;
    width: 100% !important;
}

.minimalistic video {
    height: 100% !important;
    width: 100% !important;
}

.bigPlayButtonHide .rmpBigPlayButton {
    display: none !important;
}

.form-errorinfo-regex {
    padding: 5px 10px !important;
    line-height: normal !important;
}

.atsSignField {
    margin: 0px !important;
}

.wh100p {
    height: 100% !important;
    width: 100% !important;
}

.applicantInputControl {
    position: relative;
    float: left;
    width: 100%;
}

.dvQTCheckboxNew div.checker {
    display: inline-block;
    position: relative;
    float: none !important;
}

.dvQTCheckboxNew label {
    display: inline-block;
    width: auto !important;
    float: none !important;
}

.dvDropDownCls .chzn-container.chzn-container-multi {
    width: 500px !important;
}

.dvDropDownCls .chzn-drop {
    width: 498px !important;
}

.addNewQuestionField .tipyinfo.toolerror {
    z-index: 11 !important;
}

#dvApplicantWizard .tipyinfo.toolerror {
    z-index: 11 !important;
}

.wid420 {
    width: 420px !important;
}

.vacanylock-icon {
    width: 10px;
    height: 10px;
    line-height: 10px;
    display: inline-block;
    margin-top: 3px;
    vertical-align: top;
}

    .vacanylock-icon img {
        height: 10px;
        width: 10px;
        vertical-align: top;
        margin-left: 18px;
    }

.applicantInputControl .uploader {
    z-index: 0 !important;
}

.applicantMandatoryMsg {
    background-color: #FFE3E3;
    border: 1px solid #FFAAAA;
    color: #FF7C85;
    padding: 5px;
    width: 200px;
}

@media (min-width: 320px) and (max-width: 767px) {

    .applicantInputControl .RadMediaPlayer.RadMediaPlayer_Default {
        width: 300px !important;
    }

    .applicantInputControl .contslider.w400 {
        width: 300px !important;
        margin-left: 28px !important;
    }

    .addNewField .RadMediaPlayer.RadMediaPlayer_Default {
        width: 220px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    textarea.w500 {
        width: 350px;
    }

    #txtOtherContact {
        width: 278px !important;
    }
}

.divSliderRangeCls {
    float: left !important;
    margin-left: 70px !important;
    margin-bottom: 40px !important;
}

.dvQTSectionHeaderCls {
    margin-bottom: 5px !important;
    margin-top: 10px !important;
}

.applicant-selector {
    background: #edecec !important;
    border-radius: 5px;
}

    .applicant-selector span {
        background: #edecec !important;
    }

@media only screen and (max-width: 767px) {

    #cboxOverlay + #colorbox.mw878, #cboxOverlay + #colorbox.mw878 #cboxWrapper, #cboxOverlay + #colorbox.mw878 #cboxContent, #cboxOverlay + #colorbox.mw878 #cboxLoadedContent.applicantClass {
        width: 340px !important;
    }

    #cboxOverlay + #colorbox.applicantColorboxClass {
        margin-left: -170px !important;
    }

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

    .dvLogbookScreenDetail {
        width: calc(100% - 40px);
    }

    .applicantColorboxClass #cboxClose {
        left: initial !important;
    }

    .applicantColorboxClass .closeLogbookPreviewScreen {
        left: initial !important;
    }

    .form label.inline.w100p {
        max-width: 100%;
        margin-right: 0;
    }

    .divControlTool .training_slider li {
        width: 215px !important;
    }

    .divControlTool .training_slider .ui-slider {
        width: 130px !important;
    }

    .divControlTool .training_slider li:last-child {
        width: 40px !important;
    }

    .ripple-add-new-grid {
        width: 230px !important;
        position: static !important;
        border-right: none !important;
    }

        .ripple-add-new-grid input.text.w218 {
            width: 90% !important;
        }

        .ripple-add-new-grid .rPad20 {
            padding: 0 !important;
        }

    .ripple-inner-content-area {
        float: left;
        width: 100%;
        border-left: none;
        padding: 20px 0px 20px 0px !important;
    }

        .ripple-inner-content-area .height200 {
            min-height: 100% !important;
        }

        .ripple-inner-content-area .dvNoFieldAdded .rPleft240 {
            padding-left: 0px !important;
        }

    #addNewFieldSegment button {
        margin-top: 10px !important;
    }

    #addNewFieldSegment #openCopyFromExist {
        float: left !important;
    }

    .questionDataTypeBlockLogbook {
        float: none !important;
        padding-left: 30px !important;
        margin-top: 10px !important;
    }

    .addNewField .custom-textarea .tagedit-list {
        width: 200px !important;
    }

    .addNewField textarea.text.w229 {
        width: 210px !important;
    }

    #colorbox .dvLogbookScreenDetail .title {
        max-width: 275px;
    }

    .checkbox-tooltip:hover .checkbox-tooltip-text {
        visibility: hidden !important;
    }
}

.dvLogbookScreenDetail .uploadblue .uploader {
    z-index: 0 !important;
}

#dvLogbookCheckbox div.checker {
    display: inline-block;
    position: relative;
    float: none !important;
}

.divControlTool {
    position: relative;
    float: left;
    width: 100%;
}

.form.tool .divControlTool span.tipyinfo.focus {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
}

.addNewField .tipyinfo.toolerror {
    z-index: 11 !important;
}

.divSliderRangeLogbookCls {
    float: left !important;
    margin-left: 70px !important;
    margin-bottom: 45px !important;
}

.dvLogbookScreenDetail .chzn-container .chzn-results {
    max-height: 110px !important;
}

.checkbox-tooltip {
    position: relative;
    display: inline;
}

    .checkbox-tooltip .checkbox-tooltip-text {
        visibility: hidden;
        width: 150px;
        background-color: #FCF8E3;
        border: 2px solid #FBEED5;
        border-radius: 4px;
        color: #C09853;
        text-align: left;
        padding: 10px;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 5;
        margin-top: 12px;
        font-weight: 400;
    }

    .checkbox-tooltip:hover .checkbox-tooltip-text {
        visibility: visible;
    }

.checkbox-tooltip-text:after,
.checkbox-tooltip-text:before {
    bottom: 100%;
    left: 90%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.checkbox-tooltip-text:after {
    border-color: rgba(252, 248, 227, 0);
    border-bottom-color: #fcf8e3;
    border-width: 10px;
    margin-left: -10px;
}

.checkbox-tooltip-text:before {
    border-color: rgba(251, 238, 213, 0);
    border-bottom-color: #FBEED5;
    border-width: 13px;
    margin-left: -13px;
}

.showInListMsg {
    background-color: #FFE3E3;
    border: 1px solid #FFAAAA;
    color: #FF7C85;
    padding: 3px;
    width: 200px;
    float: left;
}

.showInListMsg {
    background-color: #FFE3E3;
    border: 1px solid #FFAAAA;
    color: #FF7C85;
    padding: 10px;
    width: 152px;
    float: right;
    border-radius: 5px;
    position: relative;
    z-index: 11;
    margin-top: -3px;
}

    .showInListMsg:after,
    .showInListMsg:before {
        top: 20px;
        right: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .showInListMsg:after {
        border-color: rgba(255, 227, 227, 0);
        border-right-color: #FFE3E3;
        border-width: 10px;
        margin-top: -10px;
    }

    .showInListMsg:before {
        border-color: rgba(255, 170, 170, 0);
        border-right-color: #FFAAAA;
        border-width: 13px;
        margin-top: -13px;
    }

.dvLogbookScreenDetail section.header .title {
    width: 99% !important;
}

.questionTextBreak {
    word-break: break-word;
}

.dvTask {
    margin-bottom: 20px !important;
    width: 97% !important;
}

.dvLogbookScreenDetail .antiscroll-inner {
    overflow-y: visible !important;
    overflow-x: visible !important;
}

.dvLogbookScreenDetail .dashboard-scroll-div {
    border: 0px solid #E5E5E5;
    overflow: visible;
}

    .dvLogbookScreenDetail .dashboard-scroll-div .antiscroll-scrollbar-vertical {
        display: none !important;
    }

    .dvLogbookScreenDetail .dashboard-scroll-div .antiscroll-inner {
        width: 100% !important;
        margin-bottom: -40px;
    }


.img-overlay {
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: 16px;
    right: 0;
    width: 157px;
    padding: 0px 5px;
    box-sizing: border-box;
    text-align: right;
    padding-bottom: 5px;
}

    .img-overlay img {
        width: 18px;
        height: 18px;
    }

        .img-overlay img.delete {
            margin-right: 5px;
        }

.img-error {
    position: absolute;
    display: none;
    top: 45px;
    left: 20px;
    background-color: #FFE3E3;
    border: 1px solid #FFAAAA;
    color: #FF7C85;
    width: 132px;
    height: 132px;
    padding: 50px 5px;
    box-sizing: border-box;
    text-align: center;
}

.infoemployee {
    position: relative;
}

.workPatternEmpCount {
    color: #4D82B0 !important;
}

@media only screen and (max-width : 767px) {

    .img-overlay {
        top: 10px;
        width: 115px;
    }
}

label.expenseinline {
    color: #666666;
    display: block;
    float: left;
    font-weight: 700;
    line-height: 17px;
    margin-right: 20px;
    margin-top: 12px;
    position: relative;
    width: 160px;
}


.expense-line-profile {
    width: 120px !important;
    height: 42px !important;
}

    .expense-line-profile .prevNextPos {
        margin-right: 0;
    }

        .expense-line-profile .prevNextPos .jsnextbutton, .expense-line-profile .prevNextPos .jsPrevioubutton {
            margin: 0;
        }

    .expense-line-profile .medium.linkback {
        margin-right: 0 !important;
        padding: 0 10px !important;
        height: 25px;
        line-height: 25px;
        display: inline-block;
        float: none;
        cursor: pointer !important;
    }

.previousButton {
    width: 29px;
    display: inline-block;
    margin-left: 1px;
}

.nextButton {
    width: 29px;
    display: inline-block;
}

.previousImage {
    font-size: 40px;
    position: absolute;
    left: 10px;
    top: 50%;
    cursor: pointer;
}

.nextImage {
    font-size: 40px;
    position: absolute;
    right: 10px;
    top: 50%;
    cursor: pointer;
}


.form-errorinfo span.tipyinfo {
    width: 250px;
    padding: 6px 10px;
    line-height: normal;
    top: 5px;
}

    .form-errorinfo span.tipyinfo:not(.bottom):after {
        border-width: 7px;
        top: 12px;
        margin-top: -7px;
    }

    .form-errorinfo span.tipyinfo:not(.bottom):before {
        border-width: 9px;
        top: 12px;
        margin-top: -9px;
    }

.salaryerrorinfo {
    width: auto;
    margin-top: 5px;
    margin-bottom: 10px;
}

.empNameTable {
    width: 70%;
    margin: 0 auto 20px;
    border: none;
}

    .empNameTable table.tabletree td {
        border-bottom: 1px solid #dcdcdc;
    }

.font14 {
    font-size: 14px;
    color: #666666;
    margin-left: 70px;
}


.empNameTable table.tabletree {
    width: 100%;
    margin: 0 auto;
}

.font17 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
}

.spritesheet.icnstatussuccess {
    background-position: -150px -1041px;
    width: 22px;
    height: 19px;
    margin-left: 15px;
}

.spritesheet.icnstatusfail {
    background-position: 0 -2096px;
    width: 21px;
    height: 19px;
    margin-left: 21px;
}


/*Dollar icon CSS */
.spritesheet-dollar {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/dollar-icon.png') no-repeat top left;
    display: inline-block;
    position: relative;
}

    .spritesheet-dollar.icndollar {
        background-position: 0;
        width: 18px;
        height: 21px;
        position: absolute;
        top: -9px;
        left: 10px;
        background-size: 18px;
    }

/*Tooltip CSS */
.common-tooltip {
    position: relative;
    display: block;
}

    .common-tooltip .common-tooltip-text {
        visibility: hidden;
        width: 150px;
        color: #C09853;
        text-align: left;
        padding: 10px;
        border-radius: 10px;
        position: absolute;
        top: -5px;
        right: 105px;
        z-index: 2;
        background-color: #FCF8E3;
        border: 2px solid #FBEED5;
    }

    .common-tooltip .common-tooltip-text-NewStarter {
        visibility: hidden;
        width: 150px;
        color: #C09853;
        text-align: left;
        padding: 10px;
        border-radius: 10px;
        position: absolute;
        top: -5px;
        right: 185px;
        z-index: 2;
        background-color: #FCF8E3;
        border: 2px solid #FBEED5;
    }

.tooltip-right {
    left: 105%;
    width: 235px !important;
    z-index: 1000 !important;
}

.common-tooltip:hover .common-tooltip-text {
    visibility: visible;
}

.common-tooltip:hover .common-tooltip-text-NewStarter {
    visibility: visible;
}

.spritesheet.icnstatusundelivered {
    background-position: 1px -1062px;
    width: 21px;
    height: 19px;
    margin-left: 21px;
}

.divEventStatus {
    position: relative;
}

    .divEventStatus .focus {
        opacity: 1;
        z-index: 100;
        visibility: visible;
        right: -180px;
        top: -10px;
    }

    .divEventStatus .tipyinfo {
        background-color: #fff;
        border: 2px solid #ddd;
        border-radius: 4px;
        color: #666;
        right: -180px;
        top: -10px;
    }


    .divEventStatus span.tipyinfo:not(.bottom):after {
        border-right-color: #ddd;
    }

    .divEventStatus span.tipyinfo:not(.bottom):before {
        border-right-color: #ddd;
    }

.loginInfo {
    border: #bee5eb solid 1px;
    padding: 15px 10px;
    color: #0c5460;
    background-color: #d1ecf1;
    margin-bottom: 20px;
    border-radius: 4px;
}

.Wid30 {
    width: 30%;
}

.Wid10 {
    width: 10%;
}

.Wid15 {
    width: 15%;
}

.spritesheet.icnnewsfeed1 {
    top: 0px;
}

.spritesheet.icndash1 {
    top: 0;
}

/*Dashboard news and ripple icon*/

.spritesheet-an {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/spritesheet-an.png') no-repeat top left;
    display: inline-block;
    position: relative;
}

    .spritesheet-an.icnnewsfeedan {
        background-position: 0 -7px;
        width: 25px;
        height: 24px;
    }

    .spritesheet-an.icnripplean {
        background-position: -63px -5px;
        width: 21px;
        height: 22px;
    }

.navdashboard .current .spritesheet-an.icnnewsfeedan,
a:hover .spritesheet-an.icnnewsfeedan {
    background-position: 0 -37px;
    width: 26px;
    height: 24px;
}

.navdashboard .current .spritesheet-an.icnripplean,
a:hover .spritesheet-an.icnripplean {
    background-position: -63px -33px;
    width: 21px;
    height: 22px;
}

/*Dashboard news and ripple icon close*/

.welcome-header-ul li.btnMarkAsComplete a {
    color: #ffffff;
}

.view-chart-btn {
    border-radius: 5px;
}

.welcome-div,
.ripple-process-head {
    text-align: center;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

#divRippleContainer {
    margin: 0 auto;
}

#divHolidays {
    margin-top: 25px;
}

.rippleSearchresult {
    border: 1px solid #EDEDED;
    margin-bottom: 20px;
    text-align: center;
    overflow: hidden;
    padding: 20px;
    position: relative;
}

    .rippleSearchresult p {
        font-weight: 700;
        font-size: 24px;
    }

.no-active-process {
    text-align: center;
    margin-top: 100px;
}

    .no-active-process p {
        font-size: 24px;
        line-height: 30px;
        font-weight: 700;
    }

    .no-active-process .view-chart-btn {
        background: #578DBA;
        color: #fff;
        border: 0px;
        padding: 8px 20px;
        margin-top: 4px;
        transition: 0.5s ease-in-out;
        margin-top: 20px;
        font-size: 14px;
    }

        .no-active-process .view-chart-btn:hover {
            background: #578DBA;
            color: #fff;
        }

.ripple-process-grid,
.dashboard-content-view {
    margin-top: 15px !important;
}

.e-sgn-grid {
    margin: 0 auto;
}

    .e-sgn-grid .e-sign-submit {
        cursor: pointer;
    }

.e-sign-reset {
    cursor: pointer;
    margin-right: 10px;
}

.view-chart-btn {
    cursor: pointer;
}

.dashboard-scroll-div .text-center {
    text-align: center;
}


#divRippleContainer .dashboard-content-view {
    margin-bottom: 45px !important;
}

.welcome-header-ul {
    border-top: none !important;
}

.dashboard-scroll-div .border-grid {
    border-bottom: none !important;
}

.success-grid {
    margin-top: 30px !important;
}

    .success-grid .efficient-grid-details {
        text-align: center;
    }

        .success-grid .efficient-grid-details img {
            width: 140px;
            height: 140px;
            margin: 0 auto;
        }

/* Css form Integration Panel start*/
.panel-container {
    width: 1024px;
    overflow: hidden;
}

.panel-box {
    width: 230px;
    float: left;
    background: #FFFFFF;
    box-shadow: 0px 5px 15px #0000001a;
    padding: 22px;
    margin: 15px;
    border-radius: 25px;
    min-height: 175px;
    word-break: break-all;
}

    .panel-box h2 {
        color: #212121;
        font-size: 25px;
        font-weight: 700;
        line-height: 30px;
        margin: 0 0 15px 0;
    }

        .panel-box h2 img {
            margin-right: 10px;
            vertical-align: middle;
        }

    .panel-box p {
        color: #7b7b7b;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        margin-bottom: 15px;
        overflow: hidden;
        word-break: break-word;
    }

        .panel-box p img {
            margin-right: 5px;
        }

    .panel-box .panel-link {
        color: #0f77e0;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-decoration: none;
    }

        .panel-box .panel-link img {
            vertical-align: middle;
            margin-left: 5px;
        }

.panel-description {
    height: auto;
}
/* Css form Integration Panel End*/

.welcome-header-ul {
    border-top: none !important;
}

.dashboard-scroll-div .border-grid {
    border-bottom: none !important;
    width: 96% !important;
}

.success-grid {
    margin-top: 30px !important;
}

    .success-grid .efficient-grid-details {
        text-align: center;
    }

        .success-grid .efficient-grid-details img {
            width: 140px;
            height: 140px;
            margin: 0 auto;
        }

.dashboardReminderAction {
    color: #f2a974;
    margin-top: 20px;
}

.dashboardReminderHeading {
    font-size: 11px;
    color: #3385B2;
    line-height: 15px;
    font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.dashboardReminderLogo {
    text-align: center;
    height: 75px;
}

.spritesheet-integration {
    background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/integration-icon.png') no-repeat top left;
    display: inline-block;
    position: relative;
}

    .spritesheet-integration.icnintegration {
        background-position: 0 0;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 5px;
        left: 0px;
        background-size: 20px;
        margin-right: 10px;
    }

.heading.integration p:first-child:after {
    background: url(https://static.peoplehr.net/202506198-hotfix000000/Images/integration-icon-heading.png) 0px 0px;
    height: 27px;
    top: 4px;
    width: 27px;
    left: 10px;
    background-repeat: no-repeat;
    background-size: 27px;
}

.carryover_btm {
    margin-top: -16px !important;
}

.selectdisabled {
    background: #f3f3f3 !important;
    border-radius: 3px;
    background-image: none !important;
    border: 1px solid #CBCBCB;
    pointer-events: none;
}

.superannuationChoiceStateTerritorySelectdisabled {
    background: #f3f3f3 !important;
    border-radius: 3px;
    border: 1px solid #CBCBCB;
    pointer-events: none;
}

.superannuationChoiceStateTerritoryMainDiv {
    pointer-events: none;
}

.errorGuid {
    float: left;
    width: 100%;
    margin-top: 15px;
    text-align: right;
    font-size: 12px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.headingtext {
    font-size: 16px;
    font-weight: 700;
}

.tag-modal__header.bg-accent--white span.announceModalClose:after, .tag-modal__header.bg-accent--white span.announceModalClose:before {
    position: absolute;
    left: 9px;
    content: ' ';
    height: 15px;
    width: 2px;
    background-color: #4b4e52;
    content: "";
    top: 2px;
}

.tag-modal__header.bg-accent--white span.announceModalClose:after {
    transform: rotate(-45deg);
}

.tag-modal__header.bg-accent--white span.announceModalClose:before {
    transform: rotate(45deg);
}

.headeroverflow {
    overflow-wrap: break-word;
}

/* Table list header css changes upon sorting*/
.sort-arrow {
    vertical-align: middle;
    width: 12px;
    height: 12px;
    padding-bottom: 1px;
}

.bold-header {
    font-weight: bold;
}

.img-position {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.specific-position-g16 {
    gap: 16px;
}

.specific-position-g17 {
    gap: 17px;
    padding-left: 1px;
}

.specific-position-g18 {
    gap: 18px;
    padding-left: 2px;
}

.specific-position-g20 {
    gap: 20px;
    padding-left: 4px;
}

.max-height-description-text {
    max-height: 60px;
}

/* Removal of grey bar and alignment adjustments*/
.edit-profile-anchor {
    display: block;
    height: 18px;
}

.description-area {
    border: 0px;
}

.info-message {
    display: inline-flex;
    border: 1px solid;
    margin-bottom: 15px;
    padding: 7px 228px 7px 7px;
    gap: 5px;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: 10px center;
    font-weight: bold;
    border-color: #3c8cc4;
    background-color: #e4f3fb;
}

.menu-item-icon {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dynamic-box {
    display: flex;
    flex-direction: column;
}

.dynamic-news-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

.dynamic-dash-row {
    width: 100%;
}

.dynamic-dash-column {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.principal-content-flex {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
}

@media only screen and (max-width : 1220px) {

    .page-container {
        grid-template-columns: 70px 1fr;
    }

    .left-nav-button-text {
        display: none;
    }

    .img-position {
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    .col, .page {
        overflow: hidden;
    }

    .col {
        top: 0;
        bottom: 0;
    }

    .content .continfo {
        width: inherit;
    }
}

@media only screen and (max-width : 767px) {
    .page-container {
        grid-template-areas:
            "header"
            "nav"
            "article";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
    }

    .content-container {
        flex-direction: column;
    }

    .left-nav nav {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
    }

    div.sidebar {
        min-width: 100%;
        padding: 0px;
    }

    .page div.sidebar nav {
        width: 100%;
    }

    div.sidebar nav a {
        border-radius: 0px;
    }

    .sidebar-filters {
        display: flex;
        justify-content: center;
        max-height: 30%;
    }

        .sidebar-filters aside {
            width: 100%;
            border-right: none;
            border-bottom: solid 3px #d6d6d6;
        }

    .filter-form-container {
        display: flex;
        width: 80%;
        height: 100%;
        background-color: white;
        padding: 20px;
        border-radius: 15px;
        box-sizing: border-box;
        overflow: hidden;
    }

        .filter-form-container .form {
            width: 100%;
            overflow: hidden;
            overflow-y: auto;
        }
}

.cases-flex, .employee-flex {
    display: flex;
    flex-direction: column;
}

.planner-company-filters {
    min-width: fit-content;
    max-height: 260px;
}

.flex-planner-options {
    display: flex;
    justify-content: space-between;
}

.transform-zero {
    transform: translateX(0px);
}

.background-color {
    background-color: rgb(220, 244, 254)
}

div.date-input-tag4 .datepicker-fullscreen {
    position: absolute;
    top: 35px;
    left: 0px;
}

div.divtool .datepicker-fullscreen {
    position: absolute;
    top: 40px;
}

div.ddldatepicker .datepicker-fullscreen {
    position: absolute;
    top: 40px;
}

.btn-disable {
    cursor: not-allowed;
    pointer-events: none;
    background: #cccccc !important;
    border-color: #cccccc !important;
}

@media only screen and (max-width : 767px) {
    .datepicker-fullscreen {
        top: 80px;
    }
}

.documentArchive {
    width: 60px !important;
    padding-left: 8px;
    padding-right: 8px;
}

.cancelHolidayBtn {
    float: left;
    position: relative;
    display: flex;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    width: 60px;
    height: 32px;
    padding: 0px 10px 0px 11px;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    border: solid 1px #828d98;
    color: #828d98;
}

.addHolidayBtn {
    float: right;
    position: relative;
    display: flex;
    border-radius: 4px;
    width: 60px;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    height: 32px;
    padding: 0px 10px 0px 11px;
    justify-content: center;
    align-items: center;
    background-color: #007A7A;
    border: solid 1px #007A7A;
    color: #FFFFFF;
}

    .addHolidayBtn:before {
        background: url('https://static.peoplehr.net/202506198-hotfix000000/Images/Tag-Icons/plus.svg') no-repeat;
        content: '';
        position: relative;
        left: -8px;
        height: 32px;
        top: 4px;
        width: 24px;
    }

.inclcarriedover {
    margin-left: 125px !important;
}

.saveHolidayBtn {
    float: right;
    position: relative;
    display: flex;
    border-radius: 4px;
    width: 60px;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    height: 32px;
    padding: 0px 10px 0px 11px;
    justify-content: center;
    align-items: center;
    background-color: #007A7A;
    border: solid 1px #007A7A;
    color: #FFFFFF;
    margin-top: 10px;
}

.saveButtonDisabled {
    color: gray;
    pointer-events: none;
    opacity: 0.6;
}

.secondButton {
    margin-left: 38%;
}

.trialExpiredText {
    margin-top: -2%;
    margin-bottom: 3%;
}

.smart-menu-display {
    margin-top: 54px !important;
}

.smart-menu-toggle {
    align-items: center;
    height: 54px;
    display: flex;
    background-color: #292E38;
    justify-content: center;
    gap: 15px;
}

    .smart-menu-toggle input {
        margin: 0;
        height: 20px !important;
        width: 14px;
    }

    .smart-menu-toggle label {
        height: 14px;
        color: #b1b8bf;
        display: inline-flex;
        float: left;
        font-weight: 400;
        align-self: center;
        align-items: center;
        margin: 4px;
        font-size: 14px;
    }

    .smart-menu-toggle label.selected {
        color: #FFF;
    }



/*-SWITCH BUTTON-*/
    .smart-menu-toggle .switch-smart-menu {
        position: relative;
        display: inline-block;
        width: 42px;
        height: 22px;
    }

        .smart-menu-toggle .switch-smart-menu input {
            opacity: 0;
            width: 0;
            height: 0;
        }

            .smart-menu-toggle .switch-smart-menu input + .slider-smart-menu {
                background-color: #15191E;
            }

            .smart-menu-toggle .switch-smart-menu input:checked + .slider-smart-menu:before {
                -webkit-transform: translateX(18px);
                -ms-transform: translateX(18px);
                transform: translateX(18px);
            }

            .smart-menu-toggle .switch-smart-menu input:focus + .slider-smart-menu {
                box-shadow: 0 0 1px #000;
            }

            .smart-menu-toggle .switch-smart-menu input:focus + .slider-smart-menu {
                box-shadow: 0 0 1px #000;
            }

    .smart-menu-toggle .slider-smart-menu {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #15191E;
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

        .smart-menu-toggle .slider-smart-menu:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 3px;
            background-color: #FFF;
            -webkit-transition: 0.4s;
            transition: 0.4s;
            opacity: 70%;
            box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.1);
            
        }

        .smart-menu-toggle .slider-smart-menu.round-smart-men {
            border-radius: 16px;
        }

        .smart-menu-toggle .slider-smart-menu.round-smart-men:before {
            border-radius: 50%;
        }