@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('../fonts/opensans-light-webfont.eot?') format('eot'), url('../fonts/opensans-light-webfont.woff2') format('woff2'), url('../fonts/opensans-light-webfont.woff') format('woff'), url('../fonts/opensans-light-webfont.ttf') format('truetype');
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('../fonts/opensans-regular-webfont.eot?') format('eot'), url('../fonts/opensans-regular-webfont.woff2') format('woff2'), url('../fonts/opensans-regular-webfont.woff') format('woff'), url('../fonts/opensans-regular-webfont.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('../fonts/opensans-semibold-webfont.eot?') format('eot'), url('../fonts/opensans-semibold-webfont.woff2') format('woff2'), url('../fonts/opensans-semibold-webfont.woff') format('woff'), url('../fonts/opensans-semibold-webfont.ttf') format('truetype');
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('../fonts/opensans-bold-webfont.eot?') format('eot'), url('../fonts/opensans-bold-webfont.woff2') format('woff2'), url('../fonts/opensans-bold-webfont.woff') format('woff'), url('../fonts/opensans-bold-webfont.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('../fonts/opensans-extrabold-webfont.eot?') format('eot'), url('../fonts/opensans-extrabold-webfont.woff2') format('woff2'), url('../fonts/opensans-extrabold-webfont.woff') format('woff'), url('../fonts/opensans-extrabold-webfont.ttf') format('truetype');
    font-style: normal;
    font-weight: 800;
}

html {
    background: #fff;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', Arial, Helvetica, Verdana, sans-serif;
    font-size: 13px;
    line-height: 26px;
    color: #777580;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: default;
    background-color: #f3f3f3;
    overflow-x: hidden;
}

.container 
{
    width: 100%;
}
/** HEADERS **/
/*
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 500;
	line-height: 1.15em;
	color: #333;
	margin: 0px 0px 20px 0px;
	padding: 0px;
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 22px;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 14px;
}

*/
/** OTHER BASE STUFF **/
/*
hr {
	height: 1px;
	border: 0px;
	background: #E8E8E8;
}

p {
	margin: 15px 0;
	font-size: 13px;
	line-height: 26px;
	overflow: hidden;
}

a,
a:active,
a:focus {
	text-decoration: none;
}

a:hover {
	color: #3b354b;
	text-decoration: none;
}
    */

/** General Styles and Bootstrap Overrides **/

.user-menu .img-circle {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

.dropdown-menu {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-color: #eee;
}

.btn:focus {
    outline: none;
}

.btn.btn-flat {
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-width: 1px;
}

.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.btn-default {
    color: #333 !important;
    background-color: #e6e6e6 !important;
    border-color: #adadad !important;
}

.btn-default {
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd;
}

.btn {
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
}

/* Top Navigation */

.navbar-top .logo {
    position: absolute;
    left: 0;
    top: 150px;
    width: 450px;
    height: auto;
    padding: 25px;
    background: rgba(255, 255, 255, 0.8);
}

.navbar-top .branding-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.navbar-top .branding-logo a.branding {
    width: 150px;
    padding-top: 12px !important;
}

.navbar-top {
    margin-left: 0;
    background-color: #007dc3;
}

    .navbar-top .navbar-brand a {
        transition: all ease-in-out .3s;
    }

        .navbar-top .navbar-brand a:hover {
            opacity: 0.7;
        }

    .navbar-top .navbar-left {
        float: left;
    }

    .navbar-top .navbar-header {
        background-color: #142434;
    }

    .navbar-top .navbar-toggle {
        margin-top: 6px;
        margin-bottom: auto;
        border-color: #999;
        outline: none;
        color: #333;
        background-color: #fff;
    }

        .navbar-top .navbar-toggle:active,
        .navbar-top .navbar-toggle:focus,
        .navbar-top .navbar-toggle:hover {
            background-color: #fff;
        }

    /*
.navbar-top .nav-top {
	margin-left: 15px;
}*/

    .navbar-top > .nav-top > .nav > li {
        display: inline-block;
        float: left;
    }

    .navbar-top > .nav-top > ul.navbar-right > li {
        margin-right: 5px;
    }

        .navbar-top > .nav-top > ul.navbar-right > li:last-child {
            margin-right: 0;
        }

    .navbar-top > .nav-top > .nav > li > a {
        height: 50px;
        padding-top: 15px;
        color: #fff;
        background-color: transparent;
    }

        .navbar-top > .nav-top > .nav > li > a:hover,
        .navbar-top > .nav-top > .nav > li > a:focus {
            color: #fff;
            background-color: #142434;
        }

    .navbar-top .dropdown-messages {
        left: 0;
        min-width: 280px;
        border-color: #8bd0c2;
    }

    .navbar-top .dropdown-alerts {
        left: -160px;
        min-width: 280px;
        border: 1px solid #eee;
    }

    .navbar-top .dropdown-tasks {
        left: -119px;
        min-width: 280px;
        border-color: #94c0dc;
    }

    .navbar-top .dropdown-user {
        left: -80px;
        margin: 0;
        min-width: 200px;
    }

    .navbar-top .dropdown-scroll {
        margin: 0;
        padding: 0;
    }

        .navbar-top .dropdown-scroll .dropdown-header {
            padding: 15px 10px;
        }

            .navbar-top .dropdown-scroll .dropdown-header:active,
            .navbar-top .dropdown-scroll .dropdown-header:focus,
            .navbar-top .dropdown-scroll .dropdown-header:hover {
                color: inherit;
                background: inherit;
            }

        .navbar-top .dropdown-scroll li {
            margin: 0;
            border-bottom: 1px solid #ccc;
            background: #fff;
        }

            .navbar-top .dropdown-scroll li:last-child {
                border-bottom: none;
            }

            .navbar-top .dropdown-scroll li a {
                display: block;
                padding: 10px;
            }

                .navbar-top .dropdown-scroll li a:hover {
                    text-decoration: none;
                    background-color: inherit;
                }

        .navbar-top .dropdown-scroll .dropdown-footer {
            display: block;
            border-top: 1px solid #ccc;
            border-bottom: none;
            text-align: center;
            font-size: 12px;
            line-height: 1.428571429;
        }

        .navbar-top .dropdown-scroll p {
            margin: 0;
        }

        .navbar-top .dropdown-scroll li a,
        .navbar-top .dropdown-scroll li a:hover,
        .navbar-top .dropdown-messages li a:hover,
        .navbar-top .dropdown-alerts li a:hover,
        .navbar-top .dropdown-tasks li a:hover {
            color: #333;
        }

    .navbar-top .messages-link,
    .navbar-top .messages-link:hover,
    .navbar-top .messages-link:focus,
    .navbar-top .dropdown-messages .dropdown-header,
    .navbar-top .dropdown-messages .dropdown-header:hover,
    .navbar-top .dropdown-messages .dropdown-footer,
    .navbar-top .dropdown-messages .dropdown-footer a,
    .navbar-top .dropdown-messages .dropdown-footer a:hover {
        color: #fff;
        background: #16a085 !important;
    }


    /*.navbar-top .alerts-link, */

    .navbar-top .dropdown-alerts .dropdown-header,
    .navbar-top .dropdown-alerts .dropdown-header:hover,
    .navbar-top .dropdown-alerts .dropdown-footer,
    .navbar-top .dropdown-alerts .dropdown-footer a,
    .navbar-top .dropdown-alerts .dropdown-footer a:hover {
        color: #fff;
        background: #007dc3 !important;
    }

    .navbar-top .alert-icon {
        width: 25px;
        margin-right: 5px;
        text-align: center;
        color: #fff;
    }

    .navbar-top .tasks-link,
    .navbar-top .dropdown-tasks .dropdown-header,
    .navbar-top .dropdown-tasks .dropdown-header:hover,
    .navbar-top .dropdown-tasks .dropdown-footer,
    .navbar-top .dropdown-tasks .dropdown-footer a,
    .navbar-top .dropdown-tasks .dropdown-footer a:hover {
        color: #fff;
        background: #2980b9 !important;
    }

    .navbar-top .dropdown-tasks .progress {
        height: 10px;
        margin-bottom: 5px;
        border-radius: 0;
    }

    .navbar-top .number {
        position: absolute;
        bottom: 25px;
        left: 3px;
        width: 20px;
        height: 20px;
        padding-right: 1px;
        border-radius: 50%;
        text-align: center;
        font-size: 11px;
        line-height: 20px;
        background-color: #2c3e50;
    }

.navbar-default .navbar-nav > li > a {
    color: #fff;
}

/* User Menu */

.user.user-menu p {
    line-height: 20px;
    font-size: 12px;
    vertical-align: top;
    margin: 0;
    padding: 0;
    display: inline-block;
    float: left;
}

    .user.user-menu p.empname {
        max-width: 96px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.user.user-menu {
    max-width: 352px;
}

    .user.user-menu > .dropdown-menu,
    .user.user-menu > .dropdown-menu > .user-body {
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

        .user.user-menu > .dropdown-menu > li.user-header {
            height: 175px;
            padding: 10px;
            text-align: center;
            z-index: 9999999;
        }

            .user.user-menu > .dropdown-menu > li.user-header > img {
                z-index: 5;
                height: 90px;
                width: 90px;
                border: 3px solid;
                border-color: transparent;
                border-color: rgba(255, 255, 255, 0.2);
            }

            .user.user-menu > .dropdown-menu > li.user-header > p {
                z-index: 5;
                color: #fff;
                color: rgba(255, 255, 255, 0.8);
                font-size: 14px;
                margin: 10px 0 10px;
                float: none;
            }

                .user.user-menu > .dropdown-menu > li.user-header > p > small {
                    display: block;
                    font-size: 12px;
                }

                    .user.user-menu > .dropdown-menu > li.user-header > p > small > a {
                        color: #fff;
                    }

        .user.user-menu > .dropdown-menu > .user-body {
            padding: 1px 15px;
            border-bottom: 1px solid #f4f4f4;
            border-top: 1px solid #dddddd;
        }

            .user.user-menu > .dropdown-menu > .user-body:before,
            .user.user-menu > .dropdown-menu > .user-body:after {
                content: " ";
                display: table;
            }

            .user.user-menu > .dropdown-menu > .user-body:after {
                clear: both;
            }

            .user.user-menu > .dropdown-menu > .user-body a {
                color: #444 !important;
                font-size: 12px;
            }



        .user.user-menu > .dropdown-menu > .user-footer {
            background-color: #eee;
            padding: 10px;
        }

            .user.user-menu > .dropdown-menu > .user-footer:before,
            .user.user-menu > .dropdown-menu > .user-footer:after {
                content: " ";
                display: table;
            }

            .user.user-menu > .dropdown-menu > .user-footer:after {
                clear: both;
            }

            .user.user-menu > .dropdown-menu > .user-footer .btn-default {
                color: #666666;
            }

    .user.user-menu .user-image {
        float: left;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-right: 10px;
        margin-top: -2px;
    }

li.user.user-menu .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    z-index: 999999;
}

.user.user-menu > .dropdown-menu {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding: 1px 0 0 0;
    border-top-width: 0;
    width: 280px;
}

li.user.user-menu > .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

li.user.user-menu .open > .dropdown-menu {
    display: block;
    border-radius: 0;
}

.user-menu > .dropdown-menu > .user-footer .btn-default {
    color: #666666;
}

.user-menu .user-body .change-role {
    padding: 2px 10px;
    text-align: center;
    background: #144982;
    color: #eee;
}

.user-menu .user-body .role {
    padding: 5px 0;
    margin-left: 5px;
    margin-right: 5px;
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

    .user-menu .user-body .role span {
        color: #00c08b;
        font-size: 15px;
    }

li.user-header {
    background-color: #007dc3;
}

.user-menu .open > a {
    background: transparent;
}

/** Home Image **/

.home-img {
    position: relative;
    display: block;
    background: url(/imgs/header.jpg) no-repeat center bottom scroll;
    margin-bottom: 0px;
    max-height: 280px;
    min-height: 280px;
    border-bottom: 2px solid #fff;
}

.home-imge {
    position: relative;
    display: block;
    background: url(/imgs/headere.jpg) no-repeat center bottom scroll;
    margin-bottom: 0px;
    max-height: 280px;
    min-height: 280px;
    border-bottom: 2px solid #fff;
}

span.title {
    position: absolute;
    bottom: 0;
    padding: 6px;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #fff;
    text-align: center;
}

/**  SLIDER  **/

.slider1 img {
    display: block;
    width: 240px;
    height: 160px;
}

.slides {
    width: 100%;
    border-bottom: 0px #000 solid;
}

.slides-top {
    overflow: hidden;
    float: left;
    width: 240px;
    height: 160px;
}

.square {
    padding: 0px;
    margin: 0px;
    position: relative;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    opacity: 1;
    overflow: hidden;
}

    .square:before {
        width: 100%;
        height: 100%;
        position: absolute;
        content: "";
        font-size: 40px;
        color: #FFFFFF;
        opacity: 0;
        top: 50%;
        text-align: center;
        margin-top: -10px;
    }

    .square:hover:before {
        opacity: 1;
    }

    .square img {
        width: 100%;
        height: auto;
    }

    .square:hover img {
        opacity: 0.5;
        filter: alpha(opacity=50);
        /* For IE8 and earlier */
    }

/* Portlet Content */

.info-box {
    display: block;
    min-height: 80px;
    background: #fff;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    margin-bottom: 15px;
}

    .info-box small {
        font-size: 14px;
    }

    .info-box .progress {
        background: rgba(0, 0, 0, 0.2);
        margin: 5px 0;
        height: 2px;
    }

        .info-box .progress,
        .info-box .progress .progress-bar {
            border-radius: 0;
        }

            .info-box .progress .progress-bar {
                background: #fff;
            }

.info-box-icon {
    border-top-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 2px;
    display: block;
    float: left;
    height: 80px;
    width: 60px;
    text-align: center;
    font-size: 30px;
    background: rgba(0, 0, 0, 0.1);
}

    .info-box-icon i {
        line-height: 80px;
    }

.info-box-icon {
    vertical-align: middle;
}

    .info-box-icon > img {
        max-width: 100%;
    }

.info-box-content {
    padding: 5px 10px;
    margin-left: 60px;
}

.info-box-number {
    display: block;
    font-weight: bold;
    font-size: 18px;
}

.progress-description,
.info-box-text {
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.info-box-more {
    display: block;
}

.progress-description {
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    line-height: 20px;
}

.bg-red,
.bg-yellow,
.bg-aqua,
.bg-blue,
.bg-light-blue,
.bg-green,
.bg-navy,
.bg-teal,
.bg-olive,
.bg-lime,
.bg-orange,
.bg-fuchsia,
.bg-purple,
.bg-maroon,
.bg-black {
    color: #fff !important;
}

.bg-gray {
    color: #000;
    background-color: #d2d6de !important;
}

.bg-black {
    background-color: #111111 !important;
}

.bg-red {
    background-color: #d2ab50 !important;
}

.bg-yellow {
    background-color: #007dc3 !important;
}

.bg-aqua {
    background-color: #00c0ef !important;
}

.bg-blue {
    background-color: #0073b7 !important;
}

.bg-light-blue {
    background-color: #3c8dbc !important;
}

.bg-green {
    background-color: #35b390 !important;
}

.bg-navy {
    background-color: #001f3f !important;
}

.bg-teal {
    background-color: #39cccc !important;
}

.bg-olive {
    background-color: #3d9970 !important;
}

.bg-lime {
    background-color: #01ff70 !important;
}

.bg-orange {
    background-color: #ff851b !important;
}

.bg-fuchsia {
    background-color: #f012be !important;
}

.bg-purple {
    background-color: #605ca8 !important;
}

.bg-maroon {
    background-color: #d81b60 !important;
}

.pending-tasks {
    margin-top: 20px;
}

.box.box-primary {
    border-top-color: #3c8dbc;
}

.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
}

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

    .box-header::before,
    .box-body::before,
    .box-footer::before,
    .box-header::after,
    .box-body::after,
    .box-footer::after {
        content: " ";
        display: table;
    }

.todo-list {
    margin: 0;
    padding: 0px 0px;
    list-style: none;
    overflow: auto;
}

    .todo-list > li {
        border-radius: 2px;
        padding: 10px;
        background: #f4f4f4;
        margin-bottom: 2px;
        color: #444;
        min-width: 250px;
    }

    .todo-list .handle {
        display: inline-block;
        cursor: move;
        margin: 0 5px;
    }

    .todo-list > li > input[type="checkbox"] {
        margin: 0 10px 0 5px;
    }

    .todo-list > li .text {
        display: inline-block;
        margin-left: 5px;
        width: 400px;
    }

    .todo-list > li .label {
        margin-left: 10px;
        font-size: 9px;
    }

    .todo-list > li .tools {
        display: none;
        float: right;
        color: #dd4b39;
    }

        .todo-list > li .tools > .fa,
        .todo-list > li .tools > .glyphicon,
        .todo-list > li .tools > .ion {
            margin-right: 5px;
            cursor: pointer;
        }

        .todo-list > li .tools > .fa,
        .todo-list > li .tools > .glyphicon,
        .todo-list > li .tools > .ion {
            margin-right: 5px;
            cursor: pointer;
        }

.no-border {
    border: 0px !important;
}

.box-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #f4f4f4;
    padding: 10px;
    background-color: #fff;
}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion {
    margin-right: 5px;
}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion,
.box-header .box-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
    color: #333;
}

.todo-list > li .tools {
    display: none;
    float: right;
    color: #dd4b39;
}

.todo-list > li:hover .tools {
    display: inline-block;
}

.dashboard-demo-table {
    overflow: auto;
    border: none;
}

.btn-green {
    border-color: #15987e;
    color: #fff;
    background-color: #16a085;
}

.btn-danger {
   /* border-color: #15987e; */
    color: #fff;
    background-color: #d15b47;
}

/*
table.table {
	clear: both;
	margin-bottom: 6px !important;
	max-width: none !important;
}
    */

.panel-default {
    border-color: #ddd;
}

.smart-form {
    margin: 0;
    outline: 0;
    color: #666;
    position: relative;
}

.panel-body {
    padding: 10px;
}

.status .who {
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

    .status .who img {
        float: left;
        height: 40px;
        margin-right: 10px;
        width: 40px;
    }

img.offline {
    border-left-color: #ddd !important;
}

img.away,
img.busy,
img.offline,
img.online {
    border-left: 3px solid #fff;
}

.status .who .name {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
}

    .status .who .name b {
        color: #007dc3;
    }

.status .who .from {
    font-size: 12px;
    opacity: .7;
}

.status .image {
    padding: 20px;
}

.smart-form {
    color: #666;
}

.status.vote .comments {
    padding: 0 !important;
}

.status .comments {
    border-top: 1px solid rgba(0, 0, 0, .07);
    font-size: 13px;
    padding: 0 20px;
}

    .status .comments li {
        border-bottom: 1px solid rgba(0, 0, 0, .07);
        display: block;
        position: relative;
    }

.smart-form .checkbox:last-child,
.smart-form .radio:last-child {
    margin-bottom: 0;
}

.smart-form .checkbox,
.smart-form .radio {
    margin-bottom: 4px;
    padding-left: 25px;
    line-height: 25px;
    color: #404040;
    cursor: pointer;
    font-size: 13px;
}

.smart-form .button,
.smart-form .checkbox,
.smart-form .input,
.smart-form .radio,
.smart-form .select,
.smart-form .textarea,
.smart-form .toggle {
    position: relative;
    display: block;
    font-weight: 400;
}

    .smart-form .checkbox input,
    .smart-form .radio input {
        position: absolute;
        left: -9999px;
    }

    .smart-form .checkbox i,
    .smart-form .icon-append,
    .smart-form .icon-prepend,
    .smart-form .input input,
    .smart-form .radio i,
    .smart-form .select select,
    .smart-form .textarea textarea,
    .smart-form .toggle i {
        border-color: #BDBDBD;
        transition: border-color .3s;
        -o-transition: border-color .3s;
        -ms-transition: border-color .3s;
        -moz-transition: border-color .3s;
        -webkit-transition: border-color .3s;
    }

    .smart-form .radio i {
        border-radius: 50%;
        box-sizing: content-box;
        -moz-box-sizing: content-box;
    }

    .smart-form .checkbox i,
    .smart-form .radio i {
        position: absolute;
        top: 3px;
        left: 0;
        display: block;
        width: 17px;
        height: 17px;
        outline: 0;
        border-width: 1px;
        border-style: solid;
        background: #FFF;
    }

    .smart-form .radio input + i::after {
        background-color: #3276B1;
    }

    .smart-form .radio input + i::after {
        content: '';
        top: 4px;
        left: 4px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

    .smart-form .checkbox input + i::after,
    .smart-form .radio input + i::after {
        position: absolute;
        opacity: 0;
        transition: opacity .1s;
        -o-transition: opacity .1s;
        -ms-transition: opacity .1s;
        -moz-transition: opacity .1s;
        -webkit-transition: opacity .1s;
    }

.status .links {
    border-top: 1px solid rgba(0, 0, 0, .07);
    margin: 0;
    padding: 15px 20px;
    background: #fafafa;
}

    .status .links li {
        display: inline;
        padding-right: 20px;
    }

.smart-form .checkbox:active i,
.smart-form .radio:active i,
.smart-form .toggle:active i {
    background: #F0F0F0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
}

.smart-form .checkbox input:checked + i::after,
.smart-form .radio input:checked + i::after {
    opacity: 1;
}

.smart-form .radio input + i::after {
    background-color: #3276B1;
}

.smart-form .radio input + i::after {
    content: '';
    top: 4px;
    left: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.smart-form .checkbox input + i::after,
.smart-form .radio input + i::after {
    position: absolute;
    opacity: 0;
    transition: opacity .1s;
    -o-transition: opacity .1s;
    -ms-transition: opacity .1s;
    -moz-transition: opacity .1s;
    -webkit-transition: opacity .1s;
}

.btn-xs {
    padding: 1px 5px;
}

.box.box-red {
    border-top-color: #dd4b39;
}

.box.box-green {
    border-top-color: #008548;
}

.box.box-orange {
    border-top-color: #d2ab50;
}

.box.box-yellow {
    border-top-color: #eacf52;
}

.box.box-cyan {
    border-top-color: #1968b3;
}

.box.box-magenta {
    border-top-color: #df6c4f;
}

.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 5px 0.05px rgba(0, 0, 0, 0.2);
}

.box-header.with-border {
    border-bottom: 1px solid #f4f4f4;
}

.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion,
.box-header .box-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
}

.box-header > .box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 1;
}

.box-tools > a {
    position: relative;
    vertical-align: middle;
    display: inline-block;
}

.box-tools > a > .label {
        vertical-align: top;
}

.callout.callout-danger,
.alert-danger1,
.alert-error,
.label-danger,
.modal-danger .modal-body {
    background-color: #dd4b39 !important;
}

.btn-box-tool {
    padding: 5px;
    font-size: 12px;
    background: transparent;
    box-shadow: none !important;
    color: #97a0b3;
}

.list-unstyled,
.users-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.users-list > li {

    margin: 0 10px;
    display: inline-block;
}
.users-list > li > .wrap-img {
    border-radius: 50%;
    background: #eee;
    overflow: hidden;
    width: 60px;
    height: 60px;
    display: inline-block;
}

.users-list > li .wrap-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.users-list-name {
    font-weight: 600;
    color: #444;
    max-width: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.users-list-name,
.users-list-date {
    display: block;
}

.users-list-date {
    color: #999;
    font-size: 12px;
}

.users-list-name,
.users-list-date {
    display: block;
}

.content {
    margin-top: 20px;
}

.products-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-list-in-box > .item {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid #f4f4f4;
}

.products-list > .item {
    border-radius: 3px;
    padding: 10px 0;
    background: #fff;
}

.products-list .product-img {
    float: left;
}

.products-list .product-info {
    margin-left: 60px;
}

.products-list .product-title {
    font-weight: 600;
}

.products-list .product-description {
    display: block;
    color: #999;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ad {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 75px;
    width: auto;
    height: auto;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.8);
}

    .ad strong {
        font-size: 16px;
    }
    
.ad1 {
    position: absolute;
    z-index: 10;
    left: 0;
    top: 75px;
    width: auto;
    height: auto;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.8);
}
.ad1 
{
   font-size: 16px;
}
    .ad1 strong {
        font-size: 25px;
    }

.table-grey {
    border: 0 none;
    table-layout: fixed;
}

    .table-grey > tbody > tr {
        background-color: #f4f4f4;
    }

    .table-grey > tbody td {
        border: 2px solid #fff;
        border-left: none;
        border-right: none;
        border-top: none !important;
        padding: 10px !important;
        min-width: 40% !important;
        /*new style*/
        white-space: normal;
        word-wrap: break-word;
    }

.margin-5 {
    margin-top: 5px;
}

.margin-15 {
    margin-top: 15px;
}

.btn, a:link, button {
    -webkit-tap-highlight-color: rgba(169, 3, 41, .5);
}

.btn {
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05);
    -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .05);
}

.btn-lg {
    padding: 10px 16px;
}

.btn-kb {
    margin-bottom: 4px;
    background: #f4f4f4 !important;
    border: none;
}

.status .links li a {
    font-size: 14px;
}

.employee-month .employee-image {
    background-color: #fff;
    width: 20%;
    overflow: hidden;
    position: relative;
    float: left;
    text-align: center;
}

.employee-month .employee-text {
    padding-left: 15px;
    position: relative;
    float: right;
    width: 80%;
    padding-bottom: 20px;
}

    .employee-month .employee-text h4 {
        color: #333;
    }

.calendar1 {
    background: #fff;
    padding: 0 10px;
}

.kalendar {
    margin-bottom: 10px;
}

.footer-end {
    border-bottom: 5px solid #007dc3;
}
/*Exitinterview Form*/
.int_qa_group {
    margin: 0 auto;
    width: 100%;
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 20px;
}
    .int_qa_group h4 {
        margin-bottom: 20px;
        padding: 10px;
        color: #eee;
        background: #176195;
    }
.QName {
    margin-bottom: 0 !important;
    font-weight: 600;
}

@media (max-width: 767px) {
    .profile-header {
        padding: 10px !important;
    }

        .profile-header .progress-text {
            display: none;
        }

    .navbar-fixed-top {
       /* position: absolute;*/
    }

    .navbar {
        z-index: 1000;
        width: 100%;
    }

        .navbar a div {
            color: #333;
        }

        .navbar a i {
            display: none;
        }

    .spacev {
        padding-top: 0;
        position: relative;
    }

    .spacevh {
        padding-top: 190px;
        position: relative;
    }

    .navbar-default .navbar-nav > li > a {
        border-top: 1px solid #999 !important;
        color: #555;
        background-color: #e7e7e7;
    }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:focus,
    .navbar-default .navbar-nav > .active > a:hover {
        background-color: #007dc3;
    }

        .navbar-default .navbar-nav > .active > a div,
        .navbar-default .navbar-nav > .active > a:focus div,
        .navbar-default .navbar-nav > .active > a:hover div {
            color: #ddd !important;
        }

    .page-menu {
        padding-top: 50px;
    }

    .table-responsive > .table > tbody > tr > td {
        white-space: normal;
    }

    .btn-3a {
        Padding: 10px 30px 10px 20px;
    }
}

/*.page-menu #sticky { 
	padding-top: 50px;
}*/

@media(min-width:768px) and (max-width:1199px) {
    .colorNav > ul > li > a > .fa {
        display: none;
    }
    .colorNav > ul > li > a > .fad {
        display: none;
    }
    .colorNav > ul > li > a {
        height: 54px !important;
    }

    .spacev {
        padding-top: 195px;
    }

    .spacevh {
        padding-top: 150px;
        position: relative;
    }

    .page-menu #sticky {
        height: auto !important;
    }
}

@media(min-width:1200px) {
    .spacev {
        padding-top: 190px;
        position: relative;
    }

    .spacevh {
        padding-top: 158px;
        position: relative;
    }
}

@media (max-width:479px) {
    .todo-list > li .text {
        width: 130px;
    }
}

@media (max-width: 479px) {
    .employee-month .employee-image {
        display: block;
        width: 100%;
        padding: 10px;
        text-align: center;
    }

    .employee-month .employee-text {
        display: block;
        width: 100%;
        text-align: center;
    }

    .page-menu {
        padding-top: 50px;
    }

    .user-menu p.empname {
        display: none;
    }

    .user-menu {
        max-width: 150px;
    }

    .user-menu p.empname {
        max-width: 120px;
    }


    .box-header .box-title,
    .box-header .box-title-sm {
        margin-top: 25px;
    }

    .btn-group {
        min-width: 290px;
    }
}

@media(min-width:480px) {
    .navbar-top .navbar-header {
        /*width: 100px;*/
        float: left;
        margin-right: 0;
        background-color: transparent;
    }

    .navbar-top {
        z-index: 1030;
        top: 0;
        right: 0;
        left: 0;
        max-height: 50px;
        border-radius: 0;
    }
}

@media(min-width:768px) {
    .navbar-fixed-top {
        position: fixed !important;
    }

    .navbar-top .navbar-header {
        width: 220px;
        background-color: transparent;
    }

    .navbar-top .navbar-left {
        display: inherit;
    }

    .navbar-top #sidebar-toggle {
        display: inline-block;
    }

    .navbar-top .nav-top {
        margin-right: 15px;
        text-align: inherit;
    }

    .navbar-top .dropdown-user {
        left: inherit;
        min-width: inherit;
    }

    .navbar-top .dropdown-messages,
    .navbar-top .dropdown-alerts,
    .navbar-top .dropdown-tasks {
        left: inherit;
        width: 300px;
    }

    .navbar-top .dropdown-scroll li a:hover {
        text-decoration: none;
    }

    .navbar-top .dropdown-messages li a:hover {
        background-color: #e8f6f3;
    }

    .navbar-top .dropdown-alerts li a:hover {
        background-color: #fef5e8;
    }

    .navbar-top .dropdown-tasks li a:hover {
        background-color: #eaf3f8;
    }

    .navbar-top .name {
        display: inherit;
        float: left;
        margin-right: 5px;
    }
}

@media (max-width: 991px) {
    .user-menu > .dropdown-menu > .user-body a {
        background: #fff !important;
        color: #444 !important;
    }
}

@media(min-width:480px) and (max-width:767px) {
    .hidden-small {
        display: none !important;
    }
}

@media(min-width:480px) and (max-width:991px) {
    .profile-summary-1 p,
    .profile-summary-2 p {
        text-align: left !important;
        margin-bottom: 0 !important;
    }

    .profile-information-pane p {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
    }
}

@media(max-width:480px) {
    .hidden-small {
        display: inline-block !important;
    }
}

@media(max-width:480px) {
    .profile-summary-1 p {
        margin-bottom: 0 !important;
    }
}
/*
@media (max-width: 767px) {
 	.user-menu .user-image {
		float: left;
		margin-right: 10px;
		margin-top: -8px;
		line-height: 10px;
		width: 36px;
		height: 36px;
	} 
}
*/
@media (max-width: 767px) {
    .navbar-right {
        float: right;
    }
}

@media (max-width: 767px) {
    .branding-logo {
        display: none !important;
    }

    li.user-menu .dropdown-menu {
        right: 0;
    }

    .navbar-top .dropdown-alerts {
        right: 0;
    }

    #sticky {
        position: absolute !important;
    }
}
/*
@media (min-width:480px) and (max-width: 767px) {
	.user-menu .user-image {
		width: 36px;
		height: 36px;
	}
}*/

@media (min-width: 768px) {

    .colorNav a i {
        position: relative;
        display: inline-block;
        padding: 0.6em;
        width: 44px;
        border-radius: 50%;
        box-shadow: 0 0 0 30px transparent;
        background: rgba(255,255,255,0.1);
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition: box-shadow .6s ease-in-out;
        -moz-transition: box-shadow .6s ease-in-out;
        -o-transition: box-shadow .6s ease-in-out;
        -ms-transition: box-shadow .6s ease-in-out;
        transition: box-shadow .6s ease-in-out;
    }

    /* Animate the box-shadow to create the effect */
    .colorNav a:hover i,
    .colorNav a:active i,
    .colorNav a:focus i {
        box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
        -webkit-transition: box-shadow .4s ease-in-out;
        -moz-transition: box-shadow .4s ease-in-out;
        -o-transition: box-shadow .4s ease-in-out;
        -ms-transition: box-shadow .4s ease-in-out;
        transition: box-shadow .4s ease-in-out;
    }

    .dullpink > a {
        background: #df6c4f !important;
    }

    .tblue > a {
        background: #1968b3 !important;
    }

    .tgreen > a {
        background: #008548 !important;
    }

    .torange > a {
        background: #d2ab50 !important;
    }

    .colorNav > ul {
        font-size: 0;
    }

        .colorNav > ul > li {
            /* will style only the top level li */
            list-style: none;
            display: inline-block;
            line-height: 0;
            margin: 0;
            padding: 0;
            position: relative;
            min-width: 96px;
            margin-bottom: 2px;
            vertical-align: top;
            float: none;
        }

    .colorNav ul li {
        background: #333;
        color: #fff;
    }

    .colorNav > ul > li > a {
        color: inherit;
        text-decoration: none !important;
        font-size: 20px;
        padding: 12px 8px;
        height: 98px;
        width: 96px;
        -webkit-transition: color .5s, background .5s, height .5s;
        -moz-transition: color .5s, background .5s, height .5s;
        -o-transition: color .5s, background .5s, height .5s;
        -ms-transition: color .5s, background .5s, height .5s;
        transition: color .5s, background .5s, height .5s;
    }

        .colorNav > ul > li > a:hover,
        .colorNav > ul > li > a:active,
        .colorNav > ul > li > a:focus {
            height: 110px;
            border-bottom: 2px solid #555;
        }

    .colorNav li ul {
        position: absolute;
        list-style: none;
        text-align: center;
        min-width: 180px;
        width: auto;
        left: 50%;
        margin-left: -90px;
        top: 70px;
        font: bold 12px 'Open Sans Condensed', sans-serif;
        /* This is important for the show/hide CSS animation */
        max-height: 0px;
        overflow: hidden;
        -webkit-transition: max-height 0.4s linear;
        -moz-transition: max-height 0.4s linear;
        transition: max-height 0.4s linear;
        background: none;
        border: none;
        box-shadow: none;
    }

        .colorNav li ul li {
            background-color: #313131;
        }

            .colorNav li ul li a {
                padding: 12px;
                color: #fff !important;
                text-decoration: none !important;
                display: block;
            }

            .colorNav li ul li:nth-child(odd) {
                /* zebra stripes */
                background-color: #363636;
            }

            .colorNav li ul li:hover {
                background-color: #444 !important;
            }

            .colorNav li ul li:first-child {
                margin-top: 25px;
                position: relative;
            }

                .colorNav li ul li:first-child:before {
                    /* the pointer tip */
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    border: 5px solid transparent;
                    border-bottom-color: #313131;
                    left: 50%;
                    top: -10px;
                    margin-left: -5px;
                }

            .colorNav li ul li:last-child {
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
            }
    /* This will trigger the CSS */
    /* transition animation on hover */
    .colorNav li:hover ul {
        max-height: 600px;
        /* Increase when adding more dropdown items */
    }

    .colorNav li.green {
        background-color: #008548;
        color: #127a5d;
    }

    .colorNav li.red {
        background-color: #df6c4f;
        color: #aa2a52;
    }

    .colorNav li.blue {
        background-color: #1968b3;
        color: #2884a2;
    }

    .colorNav li.yellow {
        background-color: #d2ab50;
        color: #ab8426;
    }

    .colorNav li.purple {
        background-color: #3dadb8;
        color: #9f3c85;
    }

    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus {
        background-color: #444;
    }

    .page-menu #sticky {
        background: #d7e0e1;
        /* background: rgba(0,0,0,0.3); */
        z-index: 999;
        position: relative;
        padding: 0;
        height: 122px;
        border-bottom: 2px solid #fff;
    }

    #secondary-nav {
        width: auto;
    }

    .is-sticky #sticky {
        background: #d7e0e1;
        /* background: rgba(0,0,0,0.3); */
        height: 124px;
        border-bottom: 2px solid #fff;
    }

    .navbar {
        width: 100%;
        z-index: 1000;
        text-align: center;
        position: relative;
        margin-bottom: 0px;
        background: transparent;
        line-height: 0px;
        border-radius: 0px;
        border: 0px solid transparent;
    }

        .navbar .nav {
            background: transparent;
            list-style: none;
            display: inline-block;
            border: 0px solid;
            padding: 12px;
            text-align: center;
            margin: 0px;
            float: none;
        }

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover {
        color: #fff;
        background-color: #3dadb8;
        background-color: rgba(61, 173, 184, 1);
    }

    .colorNav li div {
        font-size: 12px;
        line-height: 15px;
    }

    .colorNav > ul > li > a:hover {
        color: #eee !important;
    }

    .colorNav > ul > li > a:focus {
        color: #555 !important;
        background: #e7e7e7 !important;
    }

    .page-menu {
        padding-top: 50px;
    }
}

.profile {
}

.wrapper {
    background: #f3f3f3;
}

.profile-header {
    background-color: #007dc3;
    color: #fff;
    padding: 30px;
    position: relative;
}

.profile-information {
    padding: 20px 0;
}

.image-profile {
    width: 200px;
    padding: 40px;
}

.profile-header p {
    text-align: left;
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0;
}

.profile-header span {
    display: inline-block;
}

.profile-header h2 {
    font-size: 24px;
    color: #fff;
}

    .profile-header h2 span {
        font-weight: 100;
    }

.profile-header h2,
.profile-header h4 {
    margin: 0;
}

.profile-header .profile-photo {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
}

.profile-summary-1 {
    font-weight: bold;
}

    .profile-summary-1 a, .profile-summary-2 a {
        color: #fff;
        text-decoration: none;
    }

.profile-summary-2 p {
    font-size: 12px;
}

.button {
    padding: 5px;
    border: 1px solid #efefef;
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.profile-information-pane {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

    .profile-information-pane p {
        margin: 6px 0;
    }

.timeline {
    position: relative;
}

    .timeline .timeline-bar {
        content: '';
        width: 4px;
        opacity: 1;
        margin-left: -2px;
        position: absolute;
        left: 50%;
        top: 0;
        height: 100%;
    }

    .timeline .timeline-inner {
        position: relative;
    }

.timeline-box {
    width: 50%;
    color: #757575;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 25px;
    position: relative;
}

    .timeline-box:last-child {
        margin-bottom: 0;
    }

    .timeline-box h3 {
        color: #414141;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.1;
        text-align: center;
        margin-bottom: 20px;
    }

    .timeline-box h4 {
        color: #878787;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.1;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 30px;
    }

    .timeline-box .timeline-title > .box-tools {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .timeline-box .timeline-title {
        padding: 8px 18px;
        background: #337ab7;
        margin-bottom: 5px;
    }

        .timeline-box .timeline-title .date {
            font-size: 16px;
            font-weight: 700;
            display: inline-block;
            background: #337ab7;
            line-height: 1;
            color: #fff;
            text-align: left;
        }


.timeline-box-compact .date, .timeline-box-compact h3, .timeline-box-compact h4 {
    text-align: left;
}

    .timeline-box-compact .date span {
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        display: inline-block;
        position: relative;
        padding: 5px 8px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

        .timeline-box-compact .date span:before {
            content: '';
            width: 0;
            height: 0;
            top: 100%;
            left: 5px;
            display: block;
            position: absolute;
            border-style: solid;
            border-width: 0 0 8px 8px;
            border-color: transparent;
        }

.timeline-box-inner {
    padding: 20px 5%;
    position: relative;
}

.timeline-box-left .dot,
.timeline-box-right .dot {
    top: 8px;
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    border: 2px solid #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.timeline-box-left .arrow,
.timeline-box-right .arrow {
    top: 60px;
    width: 12px;
    height: 41px;
    display: block;
    position: absolute;
}

    .timeline-box-left .arrow:before,
    .timeline-box-right .arrow:before {
        width: 0;
        height: 0;
        content: '';
        display: block;
    }

.timeline-box-left {
    float: left;
    clear: left;
}

    .timeline-box-left .timeline-box-inner {
        border-right: 35px solid #d5e2f0;
    }

        .timeline-box-left .timeline-box-inner .arrow {
            right: -12px;
            background-position: -18px 0;
        }

            .timeline-box-left .timeline-box-inner .arrow:before {
                margin-right: 2px;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-left: 10px solid #d5e2f0;
            }

    .timeline-box-left .dot {
        right: 0px;
        margin-right: -4px;
    }

.timeline-box-right {
    float: right;
    clear: right;
}

    .timeline-box-right .timeline-box-inner {
        border-left: 35px solid #d5e2f0;
    }

        .timeline-box-right .timeline-box-inner .arrow {
            left: -12px;
            background-position: 0 0;
        }

            .timeline-box-right .timeline-box-inner .arrow:before {
                margin-left: 2px;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-right: 10px solid #d5e2f0;
            }

    .timeline-box-right .dot {
        left: 0px;
        margin-left: -4px;
    }

@media (max-width: 600px) {
    .timeline-bar {
        display: none;
    }

    .timeline-box {
        width: 100%;
        float: none;
        top: 0 !important;
        margin-bottom: 25px !important;
        margin-left: 0;
        margin-right: 0;
    }

        .timeline-box .timeline-box-inner {
            margin-left: 0;
            margin-right: 0;
        }

            .timeline-box .timeline-box-inner .arrow {
                display: none;
            }

        .timeline-box .dot {
            display: none;
        }
}

.timeline-box-inner {
    border-color: #d5e2f0;
}

.timeline-box-inner {
    background-color: #d5e2f0;
}

.timeline-bar {
    top: 80px;
    height: 668px;
}

.timeline-bar, .timeline-box .dot {
    background-color: #337ab7;
    z-index: 1;
}

.timeline-box-right .dot {
    left: 0px;
    margin-left: -4px;
}

.timeline-box p {
    margin: 0;
    border-bottom: 1px solid #fff;
    font-size: 1.5rem;
    white-space: normal !important;
}


.section-box {
    padding: 0 10px 0 10px;
    position: relative;
}

.ref-slider {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ref-slider li {
        margin: 0;
        padding: 0;
    }

.ref-slider-nav {
    position: absolute;
    right: 10px;
    top: 20px;
    background: #fff;
}

    .ref-slider-nav .slider-prev,
    .ref-slider-nav .slider-next {
        display: inline-block;
        width: 48px;
        height: 48px;
        margin-left: 8px;
    }

        .ref-slider-nav .slider-prev .fa,
        .ref-slider-nav .slider-next .fa {
            color: #3e4452;
            font-size: 20px;
            line-height: 48px;
            display: inline-block;
            vertical-align: middle;
        }

        .ref-slider-nav .slider-prev a,
        .ref-slider-nav .slider-next a {
            width: 100%;
            height: 100%;
            display: block;
            text-align: center;
            border: 1px solid #d7dbde;
            -webkit-transition: box-shadow 0.3s ease-out;
            -moz-transition: box-shadow 0.3s ease-out;
            transition: box-shadow 0.3s ease-out;
        }

            .ref-slider-nav .slider-prev a:hover,
            .ref-slider-nav .slider-next a:hover {
                border: 1px solid #bfc7cc;
            }

.ref-box {
    padding: 0 0 30px 0;
}

    .ref-box .person-speech {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.4;
        position: relative;
    }

        .ref-box .person-speech p {
            background-color: #f4f4f4;
            border: 2px solid #fff;
            margin: 0;
            line-height: 1.42857143;
            padding: 10px !important;
        }

            .ref-box .person-speech p:last-child {
                margin-bottom: 0;
            }

    .ref-box .person-info, .ref-box .header-info {
        padding-top: 15px;
        padding-bottom: 17px;
        margin-bottom: 15px;
        border-bottom: 1px solid #dddad9;
    }

    .ref-box .person-img {
        width: 53px;
        float: left;
        display: block;
        margin-right: 22px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .ref-box .person-name-title, .ref-box .header-name-title {
        padding-top: 10px;
    }

    .ref-box .person-name, .ref-box .header-name {
        color: #757575;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.1;
        display: block;
        margin-bottom: 3px;
    }

    .ref-box .person-title, .ref-box .header-title {
        color: #a6a6a6;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .ref-box .person-speech, .ref-box .row-entry {
        margin-top: 20px;
    }

        .ref-box .person-speech p {
            margin: 0;
        }

@media (max-width: 767px) {
    .ref-box {
        padding: 10px 0 10px 10px;
    }

        .ref-box .person-speech:before {
            left: -43px;
        }
}

@media (max-width: 480px) {
    .section-references .section-box {
        padding-right: 25px;
    }

    .ref-box {
        padding-top: 25px;
        padding-left: 0;
    }

        .ref-box .person-img {
            margin-right: 10px;
        }

        .ref-box .person-name {
            font-size: 15px;
        }

        .ref-box .ref-box .person-title {
            font-size: 11px;
        }

        .ref-box .person-speech {
            text-align: left;
        }

            .ref-box .person-speech:before {
                font-size: 15px;
                left: 50%;
                top: -20px;
            }
}

span.active-member {
    background: #5cb85c;
    color: #fff;
    display: inline;
    padding: 2px 8px 3px;
    font-size: 10px;
    font-weight: bold !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: bottom;
    border-radius: .25em;
    margin-left: 10px;
}

span.inactive-member {
    background: #000000;
    color: #fff;
    display: inline;
    padding: 2px 8px 3px;
    font-size: 10px;
    font-weight: bold !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: bottom;
    border-radius: .25em;
    margin-left: 10px;
}

.profile-header .progress {
    background: rgba(0, 0, 0, 0.2);
    margin: 5px 0;
    height: 2px;
}

.profile-header .progress-text {
    text-align: right;
    color: #fff;
    font-size: 28px;
    margin-top: -30px;
}

    .profile-header .progress-text span {
        font-size: 14px;
    }

p.bold {
    font-weight: bold;
}

.profile-header .progress,
.profile-header .progress .progress-bar {
    border-radius: 0;
}

    .profile-header .progress .progress-bar {
        background: #fff;
    }

.menu-label {
    font-size: 18px;
    display: inline-block;
}

.tagfield {
    white-space: normal;
}

    .tagfield .tag {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        display: inline-block;
        color: #fff;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        white-space: normal;
        margin: -1px 5px 5px 0;
        height: auto;
        vertical-align: top;
    }

        .tagfield .tag.expert {
            background-color: #16a085;
        }

        .tagfield .tag.intermediate {
            background-color: #d2ab50;
        }

        .tagfield .tag.basic {
            background-color: #337ab7;
        }


        .tagfield .tag .tag-label {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 1px 8px;
            vertical-align: top;
        }



.scrollDownArrow {
    display: none;
    width: 200px;
    height: 40px;
    bottom: 0px;
    left: 50%;
    margin-left: -100px;
    position: fixed;
}

    .scrollDownArrow .fa {
        color: #3e4452;
        font-size: 20px;
        line-height: 40px;
        display: inline-block;
        vertical-align: middle;
    }

    .scrollDownArrow a {
        width: 100%;
        height: 100%;
        display: block;
        text-align: center;
        border: 1px solid #d7dbde;
        background: rgba(255,255,255,0.8);
        opacity: 0.8;
        -webkit-transition: box-shadow 0.3s ease-out;
        -moz-transition: box-shadow 0.3s ease-out;
        transition: box-shadow 0.3s ease-out;
    }

        .scrollDownArrow a:hover {
            border: 1px solid #bfc7cc;
        }

@media(min-width:1200px) {
    .is-sticky #sticky {
        height: 72px !important;
    }

    .is-sticky .colorNav > ul > li > a div {
        display: none;
        visibility: hidden;
    }

    .is-sticky .colorNav > ul > li > a {
        height: auto;
        width: auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        .is-sticky .colorNav > ul > li > a i {
            font-size: 16px;
            width: 35px;
        }

    .is-sticky .colorNav li ul li:first-child {
        margin-top: 10px;
    }
}

@media(max-width:1199px) {
    .colorNav li ul li:first-child {
        margin-top: 10px;
    }
}

/*   
input, button {
  outline: none;
  border: none;
}

label {
  font-weight: bold;
  color: #777580;
  font-size: 14px;
}
        */

.custom__input {
    display: inline-block;
    width: 100%;
    border: none;
    outline: none;
    /* height: 100%; */
    padding-left: 0.5rem;
    font-size: 1.5rem;
    background: transparent;
    color: rgba(0, 0, 0, 0.2);
    vertical-align: bottom;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.06+100 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.06) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.06) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#0f000000',GradientType=0 ); /* IE6-9 */
    border-radius: 2px 2px 0px 0px;
    -moz-border-radius: 2px 2px 0px 0px;
    -webkit-border-radius: 2px 2px 0px 0px;
}

    .custom__input:active, .custom__input:focus {
        border-bottom: 2px solid #007dc3;
        background: transparent;
    }

.custom__textarea {
    display: inline-block;
    width: 100%;
    height: 40px;
    min-height: 40px;
    min-width: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0.5rem;
    font-size: 1.5rem;
    background: transparent;
    color: rgba(0, 0, 0, 0.2);
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

    .custom__textarea:active, .custom__textarea:focus {
        border-bottom: 2px solid #007dc3;
        background: transparent;
    }

.custom__check {
    position: relative;
    width: 100%;
    padding: 10%;
    height: auto;
}

.squaredFour {
    width: 18px;
    position: relative;
    display: inline-block;
    margin-right: 3px;
    /*margin-left: 10px;*/
    border: 1px solid #333;
    vertical-align: middle;
    line-height: 12px;
}

    .squaredFour span {
        width: 15px;
        height: 15px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: #fcfff4;
    }

        .squaredFour span:after {
            content: '';
            width: 8px;
            height: 5px;
            position: absolute;
            top: 2px;
            left: 2px;
            border: 3px solid #3276B1;
            border-top: none;
            border-right: none;
            box-sizing: content-box;
            background: transparent;
            opacity: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

    .squaredFour label:hover::after {
        opacity: 0.5;
    }

    .squaredFour input[type=checkbox] {
        visibility: hidden;
        margin: 2px 0 0;
    }

        .squaredFour input[type=checkbox]:checked + span:after {
            opacity: 1;
        }

/* Button 3 */

.btn-3 {
    background: #47a3da;
    color: #fff !important;
}

    .btn-3:hover, btn-3:active, btn-3:focus {
        background: #3490c7;
        color: #fff !important;
    }

    .btn-3:after {
        content: '';
        position: absolute;
        z-index: -1;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    /* Pseudo elements for icons */
    .btn-3:before {
        font-family: 'FontAwesome';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        position: relative;
        -webkit-font-smoothing: antialiased;
    }

    .btn-3:active {
        background: #2684bd;
    }

    .btn-3:before {
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        line-height: 2.5;
        font-size: 140%;
        width: 60px;
    }

/* Button 3a */
.btn-3a {
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    padding: 15px 30px 15px 90px;
    border: none;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    .btn-3a.small {
        padding: 10px 10px 10px 50px;
        background: #2CC185;
        font-size: 12px;
    }

.small:before {
    line-height: 2.3;
    width: 40px;
}

.btn-3a.default {
    padding: 5px 7px 5px 40px;
    font-size: 10px;
}

.default:before {
    line-height: 2.3;
    width: 30px;
}

.btn-3.green {
    background: #2CC185 !important;
}

.btn-3.blue {
    background: #47a3da !important;
}

.btn-3.grey {
    background: #f0f0f0 !important;
    color: #333 !important;
}

.btn-3a:before {
    background: rgba(0,0,0,0.1);
}

.btn-3b {
}

.btn-3b .caret {
    height: 6px;
    font-size: 14px;
}

.btn-group .dropdown-menu > li > a:hover {
    background: #47a3da;
    color: #fff;
}

.footer {
    padding-top: 20px;
    padding-bottom: 20px;
    background: #334667;
    margin-top: 30px;
}


.form-group .radio:last-child {
    margin-bottom: 0;
}

.form-group .radio {
    margin-bottom: 4px;
    padding-left: 25px;
    line-height: 25px;
    color: #404040;
    cursor: pointer;
    font-size: 13px;
    margin-right: 10px;
}

.form-group .radio {
    position: relative;
    display: inline-block;
    font-weight: 400;
}

    .form-group .radio input {
        position: absolute;
        left: -9999px;
    }

    .form-group .radio i {
        border-color: #BDBDBD;
        transition: border-color .3s;
        -o-transition: border-color .3s;
        -ms-transition: border-color .3s;
        -moz-transition: border-color .3s;
        -webkit-transition: border-color .3s;
    }

    .form-group .radio i {
        border-radius: 50%;
        box-sizing: content-box;
        -moz-box-sizing: content-box;
    }

    .form-group .radio i {
        position: absolute;
        top: 3px;
        left: 0;
        display: block;
        width: 17px;
        height: 17px;
        outline: 0;
        border-width: 1px;
        border-style: solid;
        background: #FFF;
    }

    .form-group .radio input + i::after {
        background-color: #3276B1;
    }

    .form-group .radio input + i::after {
        content: '';
        top: 4px;
        left: 4px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

    .form-group .radio input + i::after {
        position: absolute;
        opacity: 0;
        transition: opacity .1s;
        -o-transition: opacity .1s;
        -ms-transition: opacity .1s;
        -moz-transition: opacity .1s;
        -webkit-transition: opacity .1s;
    }

    .form-group .checkbox:active i,
    .form-group .radio:active i,
    .form-group .toggle:active i {
        background: #F0F0F0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
    }

    .form-group .checkbox input:checked + i::after,
    .form-group .radio input:checked + i::after {
        opacity: 1;
    }

    .form-group .radio input + i::after {
        background-color: #3276B1;
    }

    .form-group .radio input + i::after {
        content: '';
        top: 4px;
        left: 4px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

    .form-group .checkbox input + i::after,
    .form-group .radio input + i::after {
        position: absolute;
        opacity: 0;
        transition: opacity .1s;
        -o-transition: opacity .1s;
        -ms-transition: opacity .1s;
        -moz-transition: opacity .1s;
        -webkit-transition: opacity .1s;
    }

.home > a > i, .search > a > i {
    color: #fff;
    line-height: 50px;
    padding: 0;
    font-size: 18px;
    vertical-align: middle;
}

.home > a, .search > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

.btn-group .dropdown-menu {
    background: #ddd;
    z-index: 99;
}

.breadcrumb {
    margin-bottom: 0px;
}

    .breadcrumb a {
        color: #007dc3;
    }

.navbar-brand {
    padding: 5px 15px;
}

    .navbar-brand img {
        max-height: 100%;
        width: auto;
    }

.table-data {
}

    .table-data th {
        background: #ddd;
        color: #555;
        border-color: #ccc !important;
    }
.table-data tr.inheader {
    background-color: rgba(0, 125, 195, 0.4);
}
.table-data tr.inheader td {
    font-weight: bold;
}
.table-tools {
    margin-top: 20px;
    margin-bottom: 20px;
}

.icon-button {
    background: #47a3da;
    height: 30px;
    display: inline-block;
    color: #fff;
    padding: 0 10px;
    vertical-align: top;
    line-height: 30px;
}

    .icon-button:hover,
    .icon-button:active,
    .icon-button:focus,
    .icon-button:visited {
        color: #fff;
    }

.quick-search {
    text-align: right;
}

.icons-filter-sort {
    float: right;
}

@media (max-width: 991px) {
    .icons-filter-sort {
        float: none;
        margin: 10px 0;
        text-align: center;
    }

    .quick-search {
        text-align: center;
    }
}

select.custom {
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    overflow: hidden;
    height: 28px;
    width: auto;
    color: #7b95ba;
    font-size: 14px;
}

    select.custom:active, select.custom:focus {
        border-bottom: 2px solid #007dc3;
    }

.filter-table-row, .sort-table-row {
    margin-bottom: 20px;
}

.close-table-filter,
.close-table-filter:hover,
.close-table-filter:active,
.close-table-filter:focus,
.close-table-filter:visited {
    background: #47a3da;
    padding: 5px 10px;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    vertical-align: bottom;
}

.icon-function {
    margin: 0 5px;
}

body.modal-open {
    /*padding-right: 0 !important;*/
    overflow: hidden;
}

#accordion .panel-heading {
    padding: 0;
}

#accordion .panel-title > a {
    display: block;
    padding: 1.2em 1.6em;
    outline: none;
    font-weight: bold;
    text-decoration: none;
    background: #47a3da;
    color: #fff;
}

    #accordion .panel-title > a.collapsed {
        background: #e6e6e6;
        color: #333;
    }

.panel-buttons {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

.panel-buttons-right {
    list-style-type: none;
    float: right;
}

    .panel-buttons-right li {
        float: left;
        margin-left: 20px;
    }

        .panel-buttons-right li a {
            font-size: 13px;
            color: #333;
        }

.detail-functions {
    font-size: 14px;
    border-radius: 2px;
    padding: 10px;
    background: #f4f4f4;
    margin-bottom: 2px;
    color: #444;
}

.icons-functions {
    float: right;
}

.label-number {
    width: 20px;
    height: 20px;
    padding-right: 1px;
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    line-height: 20px;
    background-color: #2c3e50;
    display: inline-block;
    color: #fff;
    margin-left: 10px;
    vertical-align: middle;
}

#accordion .panel {
    box-shadow: none;
    border: none;
}

.wrapper-page {
   min-height: 800px;
}

.header-container {
    background: rgba(40,44,42,0.1);
    text-align: center;
    position: relative;
    overflow: visible;
    margin: 0;
    margin-bottom: 20px;
    padding: 4px;
}

    .header-container .header-title {
        font-weight: 600;
        font-size: 14px;
        display: inline-block;
        padding: 1.2em 1.6em;
        font-size: 16px;
        width: 60%;
        list-style: none;
        text-transform: uppercase;
        position: relative;
        background-color: #47a3da;
        color: #fff;
        text-align: left;
        float: left;
        line-height: 1.15em;
    }

        .header-container .header-title.full {
            width: 100%;
        }

    .header-container .header-buttons {
        float: right;
        width: 40%;
    }

@media (max-width: 1199px) {
    .header-container .header-title {
        width: 50%;
    }

    .header-container .header-buttons {
        width: 50%;
    }
}

.header-container .header-buttons ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

    .header-container .header-buttons ul li {
        list-style: none;
        position: relative;
        width: 99%;
        padding: 0;
        margin: 0;
        margin-left: 1%;
        float: left;
    }

        .header-container .header-buttons ul li a {
            font-weight: 600;
            font-size: 14px;
            display: block;
            padding: 1.2em 1.6em;
            text-transform: uppercase;
            position: relative;
            background-color: #47a3da;
            font-size: 16px;
            color: #fff;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 1.15em;
            text-align: left;
        }

.tab-button {
    font-weight: 600;
    font-size: 14px;
    display: block;
    padding: 3em 1em;
    position: relative;
    background-color: #47a3da;
    font-size: 16px;
    color: rgba(0,0,0,0.5);
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.15em;
    text-align: left;
    border-top: 3px solid #327298;
    margin-bottom: 20px;
}

    .tab-button span {
        display: block;
        font-size: 12px;
        white-space: normal;
        color: #eee;
        margin-top: 8px;
    }

@media (max-width: 992px) {
    .tab-button {
        padding: 1em 1em;
    }
}

@media (min-width: 1200px) {

    .tab-button span {
        max-width: 160px;
    }

    .tab-button::before {
        content: "\f02d";
        font: normal normal normal 54px/56px FontAwesome;
        position: absolute;
        top: 50%;
        margin-top: -28px;
        right: 10px;
        color: rgba(0,0,0,0.3);
    }
}

@media (max-width: 1199px) {
    .box-header .box-title.sm {
        margin-top: 15px;
    }
}

.box-header .box-title.sm {
    font-size: 14px;
}

.box-header .box-title.sm2 {
    font-size: 14px;
}

.label-number.blue {
    background: #47a3da;
}


.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -12px;
        border-left-color: #333;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

@media (max-width: 767px) {
    .margin-xs {
        margin-bottom: 20px;
    }
}

@media (max-width: 991px) {
    .margin-sm {
        margin-bottom: 20px;
    }
}

.kra-initials {
    padding-top: 15px;
}

    .kra-initials h6 {
        margin-bottom: 10px;
        font-size: 13px;
    }

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

hr.less {
    margin: 10px 0;
}

hr.dark {
    background: #ccc;
    height: 3px;
}

.kudos .who {
    margin-bottom: 10px;
}

.kudos .tag {
    margin-bottom: 10px;
}

.kudos .comment {
    margin-bottom: 10px;
}

.kudos .buttons {
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    padding-bottom: 10px;
}

.kudos .who .chosen-container {
    margin-left: 10px;
}

.kudos .who .col-50 {
    width: 50%;
    float: left;
}

.kudos-note p {
    margin: 0 0 5px;
    line-height: 18px;
    vertical-align: top;
}

.stars {
    margin-top: 10px;
}

.text-indent {
    margin-left: 30px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}

.text-indent1 {
    margin-left: 50px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}

.text-indent2 {
    margin-left: 70px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}

.text-indent3 {
    margin-left: 90px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}

.text-indent4 {
    margin-left: 110px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}

.text-indent5 {
    margin-left: 120px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}

.text-indent6 {
    margin-left: 130px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}

.text-indent7 {
    margin-left: 150px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}

.text-indent8 {
    margin-left: 170px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}

.text-indent9 {
    margin-left: 200px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}

.text-indent10 {
    margin-left: 220px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}

.text-indent11 {
    margin-left: 230px;
    margin-top: 10px;
    border-left: 1px solid #337ab7;
    padding-left: 10px;
}




.kudos-chart .heading h6 {
    margin: 0 0 10px;
}

.card-container {
    background: #eee;
}


.card {
    background: #fefefe;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

.card {
    margin-top: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    border-radius: 2px;
    background-clip: padding-box;
    position: relative;
}

    .card span.card-title {
        color: #fff;
        font-size: 24px;
        font-weight: 300;
        text-transform: uppercase;
    }

    .card .card-image {
        position: relative;
        overflow: hidden;
    }

        .card .card-image img {
            border-radius: 2px 2px 0 0;
            background-clip: padding-box;
            position: relative;
            z-index: -1;
        }

        .card .card-image span.card-title {
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 16px;
        }

    .card .card-content {
        padding: 16px;
        border-radius: 0 0 2px 2px;
        background-clip: padding-box;
        box-sizing: border-box;
    }

        .card .card-content p {
            margin: 0;
            color: inherit;
        }

        .card .card-content span.card-title {
            line-height: 48px;
        }

        .card .card-content h4 span {
            font-size: 12px;
            cursor: pointer;
        }

    .card .card-action {
        border-top: 1px solid rgba(160, 160, 160, 0.2);
        padding: 16px;
    }

        .card .card-action a {
            color: #ffab40;
            margin-right: 16px;
            transition: color 0.3s ease;
            text-transform: uppercase;
        }

            .card .card-action a:hover {
                color: #ffd8a6;
                text-decoration: none;
            }

.card .card-content .card-title {
    font-size: 18px;
    text-align: left;
    color: #176195;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.instant-feedback-rating {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 3px 5px 5px;
    margin: 4px 0;
    background: rgba(0,0,0,.02);
}

    .instant-feedback-rating small {
        color: #999;
    }

        .instant-feedback-rating small span {
            color: #555;
        }

        .instant-feedback-rating small em {
            color: #47a3da;
            font-style: normal;
        }

/*.assessment {
	margin: 10px 0;
}*/

.assessment .image {
    float: left;
    margin-right: 10px;
    width: 45px;
}

.assessment .text {
    font-size: 13px;
    line-height: 20px;
    margin: 0;
    margin-bottom: 5px;
    text-align: left;
}

    .assessment .text.alt {
        margin-bottom: 5px;
    }



.assessment .text span {
    color: #47a3da;
}

.assessment .text em {
    color: #555;
    font-style: normal;
}

.assessment .box-left {
}

.assessment .box-right {
    float: right;
}

    .assessment .box-right small {
        display: block;
        line-height: 16px;
    }

.card .highlights {
    background: rgba(0,0,0,.04);
    padding: 5px;
    margin-bottom: 10px;
}

    .card .highlights ul {
        margin: 0;
    }

        .card .highlights ul li {
            margin: 0;
            padding: 0;
            line-height: 18px;
        }

.card .comments {
}

.rate-yourself {
    text-align: left;
}

    .rate-yourself span {
        display: inline-block;
    }

        .rate-yourself span.text {
            display: inline-block;
            vertical-align: top;
        }

.assessment .icons-left {
    float: left;
}

.assessment .icons-right a {
    margin-left: 5px;
}

.assessment .icons-right {
    float: right;
}

.assessment-box {
    background: rgba(0,0,0,.02);
    padding: 15px;
    border-top: 1px solid #ddd;
}

.progress {
    margin-bottom: 5px;
}

.progress-container .text {
    font-size: 12px;
    text-align: center;
}

.assessment-box a.history {
}

.assessment .reply {
    padding-top: 10px;
}

    .assessment .reply .border {
        border-left: 2px solid #999;
    }

        .assessment .reply .border img {
            margin-left: 8px;
        }

.app-launcher {
    border: 1px solid #eee;
    -webkit-transition: height .2s ease-in-out;
    transition: height .2s ease-in-out;
    margin-top: 0;
    padding: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-width: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}


.apps {
    position: relative;
    min-height: 196px;
    overflow-y: auto;
    overflow-x: hidden;
    width: auto;
    height: auto;
}

.launcher .button {
    cursor: pointer;
    width: 32px;
    margin: 0 auto;
}

.apps > ul {
    background: #fff;
    margin: 0;
    padding: 10px;
    min-width: 314px;
    overflow: hidden;
    list-style: none;
}

    .apps > ul > li {
        margin: 5px;
        display: inline-block;
        float: left;
    }

    .apps > ul li a {
        float: left;
        height: 64px;
        width: 88px;
        height: auto;
        color: black;
        padding: 12px 0;
        text-align: center;
        display: block;
    }

    .apps > ul li p {
        font-size: 12px;
        line-height: 14px;
    }

    .apps > ul > li a {
        color: #fff;
    }

.apps .dropdown-submenu > a::after {
    display: none;
}

.apps li.green a, .drawer-menu li.green > a {
    background-color: #008548;
}

.apps li.red a, .drawer-menu li.red > a {
    background-color: #df6c4f;
}

.apps li.blue a, .drawer-menu li.blue > a {
    background-color: #1968b3;
}

.apps li.yellow a, .drawer-menu li.yellow > a {
    background-color: #d2ab50;
}

.apps li.purple a, .drawer-menu li.purple > a {
    background-color: #3dadb8;
}

.apps li a i {
    border-radius: 50%;
    padding: 0.8rem;
    width: 44px;
    box-shadow: 0 0 0 30px transparent;
    background: rgba(255,255,255,0.1);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: box-shadow .6s ease-in-out;
    -moz-transition: box-shadow .6s ease-in-out;
    -o-transition: box-shadow .6s ease-in-out;
    -ms-transition: box-shadow .6s ease-in-out;
    transition: box-shadow .6s ease-in-out;
}

/* Animate the box-shadow to create the effect */
.apps li a:hover i,
.apps li a:active i,
.apps li a:focus i {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
    -webkit-transition: box-shadow .4s ease-in-out;
    -moz-transition: box-shadow .4s ease-in-out;
    -o-transition: box-shadow .4s ease-in-out;
    -ms-transition: box-shadow .4s ease-in-out;
    transition: box-shadow .4s ease-in-out;
}


.main-menu {
    background: #eee;
}

    .main-menu > li {
        background: #fff;
        margin: 0;
        padding: 0;
        width: 250px;
        overflow: hidden;
        list-style: none;
        position: relative;
    }

        .main-menu > li a {
            padding: 0 10px;
            display: block;
        }

        .main-menu > li > a {
            display: inline-block;
        }


    .main-menu > ul > li {
    }

    .main-menu ul {
        list-style: none;
        margin: 0 !important;
        padding: 0;
        position: relative;
        left: 0 !important;
        background: #eee;
    }

    .main-menu > li > ul > li > ul > li {
        float: none;
        height: auto;
        width: 250px;
        color: black;
        padding: 0;
        margin: 0;
        text-align: left;
        list-style: none;
        display: block;
    }

        .main-menu > li > ul > li > ul > li > a {
            padding: 5px 32px;
        }

            .main-menu > li > ul > li > ul > li > a:hover {
                background: #337ab7;
                color: #fff;
            }

    .main-menu ul li p {
        display: inline-block;
        color: #333;
        margin: 0;
        padding: 0;
        margin-left: 10px;
    }

    .main-menu .dropdown-submenu > a::after {
        display: none;
    }

#main-menu > li > a > i {
    color: #fff;
    line-height: 50px;
    padding: 0;
    vertical-align: middle;
    font-size: 20px;
}

#main-menu > li > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

.main-menu > li > ul > li > a:hover {
    background: #334667;
}

    .main-menu > li > ul > li > a:hover i, .main-menu > li > ul > li > a:hover p {
        color: #fff !important;
    }

@media (max-width: 479px) {
    .home {
        display: none !important;
    }

    .navbar-top .navbar-header {
        float: left;
        background-color: transparent;
    }

    .user.user-menu .user-image {
        margin: 0;
    }
}


.navbar-toggle {
    position: relative;
    float: left;
    padding: 9px 10px;
    margin-top: 8px;
    margin-left: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.mobile-menu-dropdown {
    left: -220px;
    width: 300px;
}

.mobile-menu-dropdown1 {
    left: -270px;
    width: 310px;
}

.navbar-top .dropdown-alerts-mobile {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .navbar-top .dropdown-alerts-mobile .dropdown-header {
        color: #fff;
        background: #007dc3 !important;
        padding: 15px 10px;
    }

    .navbar-top .dropdown-alerts-mobile li {
        margin: 0;
        border-bottom: 1px solid #ccc;
        background: #fff;
    }

        .navbar-top .dropdown-alerts-mobile li a {
            display: block;
            padding: 10px;
            color: #333;
        }

            .navbar-top .dropdown-alerts-mobile li a:hover {
                background-color: #fef5e8;
            }

        .navbar-top .dropdown-alerts-mobile li:last-child {
            border-bottom: none;
        }

    .navbar-top .dropdown-alerts-mobile .dropdown-footer {
        display: block;
        border-top: 1px solid #ccc;
        border-bottom: none;
        text-align: center;
        font-size: 12px;
        line-height: 1.428571429;
        margin: 0;
    }

    .navbar-top .dropdown-alerts-mobile li.dropdown-footer a {
        display: block;
        padding: 10px;
        color: #fff;
        background: #007dc3 !important;
    }

.mobile-user {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .mobile-user > li.user-header {
        height: 175px;
        padding: 10px;
        text-align: center;
        z-index: 9999999;
    }

        .mobile-user > li.user-header > img {
            z-index: 5;
            height: 90px;
            width: 90px;
            border: 3px solid;
            border-color: transparent;
            border-color: rgba(255, 255, 255, 0.2);
        }

        .mobile-user > li.user-header > p {
            z-index: 5;
            color: #fff;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            margin: 10px 0 10px;
            float: none;
        }

    .mobile-user p {
        line-height: 20px;
        font-size: 12px;
        vertical-align: top;
        margin: 0;
        padding: 0;
        display: inline-block;
        float: left;
    }

    .mobile-user > li.user-header > p > small {
        display: block;
        font-size: 12px;
    }

        .mobile-user > li.user-header > p > small > a {
            color: #fff;
        }

    .mobile-user > .user-body {
        padding: 1px 15px;
        border-bottom: 1px solid #f4f4f4;
        border-top: 1px solid #dddddd;
    }

.mobile-user, .mobile-nav > .user-body {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

    .mobile-user .user-body .change-role {
        padding: 2px 10px;
        text-align: center;
        background: #144982;
        color: #eee;
        display: block;
    }

    .mobile-user .user-body .role {
        padding: 5px 0;
        margin-left: 5px;
        margin-right: 5px;
        background: #fff;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    .mobile-user > .user-footer {
        background-color: #eee;
        padding: 10px;
    }

        .mobile-user > .user-footer::before, .mobile-user > .user-footer::after {
            content: " ";
            display: table;
        }

        .mobile-user > .user-footer::after {
            clear: both;
        }

.input {
    display: inline-block;
    width: 100%;
    /* height: 100%; */
    padding-left: 0.1rem;
    font-size: 1.5rem;
    background: transparent;
    color: #0A397E;
    outline: none;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    font-weight: normal;
}

.OutputLabel {
    display: inline-block;
    width: 100%;
    padding-left: 0.1rem;
    font-size: 1.5rem;
    background: transparent;
    color: #0A397E;
    outline: none;
    border: none;
    font-weight: normal;
}

.OutputLabelBold {
    display: inline-block;
    width: 100%;
    padding-left: 0.1rem;
    background: transparent;
    color: #0A397E;
    outline: none;
    border: none;
    font-weight: bolder;
    color: #478fca !important;
}

.input:active, .input:focus {
    border-bottom: 2px solid #007dc3;
}

.calendarinput {
    display: inline-block;
    width: 92%;
    /* height: 100%; */
    padding-left: 0.1rem;
    font-size: 1.5rem;
    background: transparent;
    color: #0A397E;
    outline: none;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    font-weight: normal;
}

    .calendarinput:active, .calendarinput:focus {
        border-bottom: 2px solid #007dc3;
    }

.labeldiv {
    font-weight: bold;
    color: #777580;
    font-size: 14px;
}



.radionew {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-left: 0.1rem;
    background: transparent;
    color: #0A397E;
    outline: none;
    border: none;
    font-weight: normal;
    margin-top: 10px;
}

    .radionew input {
        width: 17px;
        height: 17px;
    }

    .radionew label {
        padding-left: 10px;
        padding-right: 10px;
        margin-right: 10px;
        color: #404040;
        font-size: 13px;
        font-weight: normal;
    }

.cstext {
    font-family: verdana,ms sans serif, arial;
    font-size: 11px;
    text-align: center;
    line-height: 2em;
}

.tagfield .tag.tag-blue {
    background-color: #337ab7;
}

.tagfield .tag.tag-yellow {
    background-color: #d2ab50;
}

.tagfield .tag.tag-green {
    background-color: #16a085;
}

.tagfield .tag.tag-orange {
    background-color: #FF7518;
}

.tagfield .tag.tag-red {
    background-color: #ff4444;
}

@media only screen and (max-width: 768px) {
    .btn-3a {
        Padding: 10px 30px 10px 20px;
    }
}

.row1 {
    background: white;
}

.row2 {
    background: #ebf4fb;
}

.favcolor {
    color: green;
}



.noticount {
    color: #fff;
    background-color: #0073b7;
    min-width: 10px;
    padding: 3px 8px;
    /*font-size: 12px;*/
    border-radius: 10px;
}

.tabs-wrapper {
    margin-bottom: 20px !important;
    background: #fff;
    border-top: 3px solid #eacf52;
}

ul.tabs-list {
    margin: 0px;
    padding: 0px;
}

ul.tabs-list {
    text-align: left;
    position: relative;
    overflow: visible;
    padding: 10px;
    border-bottom: 1px solid #f4f4f4;
}

.tabs-list li {
    font-weight: normal;
    font-size: 14px;
    display: inline-block;
    margin: 0 20px 0 0;
    list-style: none;
    cursor: pointer;
    position: relative;
}

    .tabs-list li a {
        color: #777580;
    }

    .tabs-list li i {
        font-size: 18px;
    }

    .tabs-list li.active a {
        color: #47a3da;
    }

.tabs-container {
    padding: 15px;
    background-color: #fff;
}

a,
a:active,
a:focus {
    text-decoration: none;
}

    a:hover {
        color: #3b354b;
        text-decoration: none;
    }


.custom__input2 {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-left: 0.5rem;
    font-size: 1.3rem;
    background: transparent;
    vertical-align: bottom;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    color: #333;
}

    .custom__input2:active, .custom__input2:focus {
        border-bottom: 2px solid #007dc3;
        background: transparent;
    }

.custom__textarea2 {
    display: inline-block;
    width: 100%;
    min-height: 30px;
    min-width: 100%;
    max-width: 100%;
    max-height: auto;
    padding: 0.5rem;
    font-size: 1.28rem;
    background: transparent;
    border: none;
    color: #333;
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

    .custom__textarea2:active, .custom__textarea2:focus {
        border-bottom: 2px solid #007dc3;
        background: transparent;
    }

.custom__check {
    position: relative;
    width: 100%;
    padding: 10%;
    height: auto;
}

/** HEADERS **/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    line-height: 1.15em;
    color: #333;
    margin: 0px 0px 20px 0px;
    padding: 0px;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}


/** OTHER BASE STUFF **/

hr {
    height: 1px;
    border: 0px;
    background: #E8E8E8;
}

.tabs-wrapper {
    margin-bottom: 20px !important;
    background: #fff;
    border-top: 3px solid #eacf52;
}

ul.tabs-list {
    margin: 0px;
    padding: 0px;
}

ul.tabs-list {
    text-align: left;
    position: relative;
    overflow: visible;
    padding: 10px;
    border-bottom: 1px solid #f4f4f4;
}

.tabs-list li {
    font-weight: normal;
    font-size: 14px;
    display: inline-block;
    margin: 0 20px 0 0;
    list-style: none;
    cursor: pointer;
    position: relative;
}

    .tabs-list li a {
        color: #777580;
    }

    .tabs-list li i {
        font-size: 18px;
    }

    .tabs-list li.active a {
        color: #47a3da;
    }

.tabs-container {
    padding: 15px;
    background-color: #fff;
}

@media (max-width: 479px) {
    .pull-xs-left {
        float: left;
    }

    .pull-xs-right {
        float: right;
    }
}

@media (min-width: 480px) {
    .pull-sm-left {
        float: left;
    }

    .pull-sm-right {
        float: right;
    }

    .float-line {
        float: left;
        margin-right: 25px !important;
    }
}

@media (min-width: 992px) {
    .pull-md-left {
        float: left;
    }

    .pull-md-right {
        float: right;
    }
}

@media (min-width: 1200px) {
    .pull-lg-left {
        float: left;
    }

    .pull-lg-right {
        float: right;
    }
}

.active .clickopen {
    display: inline;
}

.active .clickclose {
    display: none;
}

.inactive .clickopen {
    display: none;
}

.inactive .clickclose {
    display: inline;
}

.col-container {
    width: 100%;
    position: relative;
}

.col-image {
    width: 40px;
    height: 40px;
    position: absolute;
}

.col-info {
    width: 100%;
    padding-left: 50px;
}


@media (max-width: 479px) {
    .tabs-container {
        padding: 0;
    }
}

.collapseall, .expandall {
    cursor: pointer;
}

.empnamefill {
    background: #eee;
    padding: 4px 8px;
    color: #333;
    border-radius: 4px;
    margin-left: 30px;
}

table.sortable thead {
    background-color: #eee;
    color: #666666;
    font-weight: bold;
    cursor: default;
}

.disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: default;
}

.divrowlabel > div div {
    padding: 10px;
    word-wrap: break-word;
}

.divrowlabel > div {
    background-color: #f4f4f4;
    background: linear-gradient(180deg,#f4f4f4 95%,#fff 5%);
    background-clip: content-box;
}

@media only screen and (max-width: 500px) {
    .divrowlabel > div div {
        padding: 10px !important;
        word-wrap: break-word;
        border: 2px solid #fff;
        border-left: none;
        border-right: none;
        border-top: none !important;
        background-color: #f4f4f4;
    }
}

.divrowlbl > div {
    background-color: #f4f4f4;
    border-top: none !important;
    padding: 7px !important;
    padding-right: -37px;
    border-bottom: 3px solid #fff;
    margin-right: -17px;
    margin-left: 5px;
    border-left: 12px solid #fff;
    border-right: 12px solid #fff;
}

.divLbl > div > div {
    padding: 7px !important;
    border: 2px solid #fff;
    border-left: none;
    border-right: none;
    border-top: none !important;
    background-color: #f4f4f4;
}

a.fc-more {
    margin: 1px 3px;
    font-size: .85em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.fc-unthemed .fc-popover {
    border-width: 1px;
    border-style: solid;
    left: 10% !important;
    right: 90% !important;
}

.fc-popover .fc-header .fc-title {
    margin: 0 2px;
    font-weight: bold;
}

.cellBg {
    background: #000;
    color: #fff;
}

.fc-bgevent, .fc-highlight {
    opacity: 0.8 !important;
    filter: alpha(opacity=30);
}

.fc-row .fc-bgevent-skeleton td, .fc-row .fc-highlight-skeleton td {
    border-color: #ddd !important;
}

.Amsform-control {
    display: block;
    width: 100%;
    height: 30px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}



/*newly added for profile view*/
/* Responsive Tables Elite */
@media only screen and (max-width: 767px) {

    /* Force table to not be like tables anymore */
    .rte table,
    .rte thead,
    .rte tbody,
    .rte th,
    .rte td,
    .rte tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        .rte thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .rte tr {
        border: 1px solid #ccc;
    }

    .rte td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50% !important;
        white-space: normal;
    }

        .rte td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            font-weight: bold;
        }

        /*
	Label the data
	*/
        .rte td:before {
            content: attr(data-title);
        }
}

.profile-summary-col table {
    max-width: 100%;
}

    .profile-summary-col table td {
        padding-right: 15px;
        vertical-align: top;
    }

@media only screen and (max-width: 991px) {
    .profile-summary-col table td {
        display: block;
    }
}

.p-summary-data p {
    font-size: 12px;
}

#secondary-nav {
    display: block;
    position: relative;
    width: auto;
    background: #d7e0e1;
    text-align: center;
    padding: 0 2em;
    margin: 0;
    text-transform: capitalize;
}

    #secondary-nav > ul.nav-tabs {
        display: inline-block;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        /* first level menu items */
        #secondary-nav > ul.nav-tabs > li {
            display: inline-block;
            position: relative;
            float: none;
        }

            #secondary-nav > ul.nav-tabs > li.active {
                background: #007dc3;
            }

                #secondary-nav > ul.nav-tabs > li.active a {
                    color: #fff;
                }

            #secondary-nav > ul.nav-tabs > li > a {
                line-height: 3em;
                padding: 0 2.9em;
                font-size: 1.2em;
                display: block;
                color: #444;
                border: none;
            }


    #secondary-nav > .nav-tabs > li.active > a,
    #secondary-nav > .nav-tabs > li.active > a:focus,
    #secondary-nav > .nav-tabs > li.active > a:hover {
        background-color: transparent;
    }

    #secondary-nav > .nav > li > a:focus,
    #secondary-nav > .nav > li > a:hover {
        background-color: transparent;
    }

    #secondary-nav > ul > li > a:hover,
    #secondary-nav > ul > li > a:active {
        color: #111;
        border-color: transparent;
    }

#content-profile.tab-content > .tab-pane {
    display: block;
    height: 0;
    overflow: hidden;
}

#content-profile.tab-content > .active {
    height: auto;
}

@media only screen and (max-width: 480px) {
    .ref-slider-nav {
        background: transparent;
    }

    .ref-box {
        padding-top: 15px;
    }

    .ref-slider-nav {
        top: 0px;
    }

        .ref-slider-nav .slider-prev,
        .ref-slider-nav .slider-next {
            display: inline-block;
            width: auto;
            height: auto;
            margin: 0 0 0 15px;
        }

            .ref-slider-nav .slider-prev a,
            .ref-slider-nav .slider-next a,
            .ref-slider-nav .slider-prev a:hover,
            .ref-slider-nav .slider-next a:hover,
            .ref-slider-nav .slider-prev a:focus,
            .ref-slider-nav .slider-next a:focus,
            .ref-slider-nav .slider-prev a:active,
            .ref-slider-nav .slider-next a:active {
                border: 0 none;
            }
}

/* NEW STYLE FOR PROFILE 8-FEB-16*/
.view-info ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.view-info li {
    padding: 0;
    margin: 0;
    list-style: none;
    margin-right: 20px;
    margin-bottom: 20px;
    white-space: normal;
    word-wrap: break-word;
}

    .view-info li em {
        padding: 0 15px 0 0;
        line-height: 18px;
        font-size: 14px;
        color: #6b6b6b;
        font-weight: bold;
        font-style: normal;
    }

    .view-info li span {
        display: block;
        padding: 0 15px 0 0;
        line-height: 18px;
        font-size: 13px;
        color: #484848;
        font-weight: 400;
    }



/*Timeline v2
------------------------------------*/
.timeline-v2 {
    padding: 0;
    list-style: none;
    position: relative;
}
    /* The line */
    .timeline-v2 > li {
        position: relative;
    }

    .timeline-v2:before {
        top: 0;
        bottom: 0;
        left: 32%;
        width: 4px;
        content: '';
        background: #f3f3f3;
        position: absolute;
        margin-left: -14px;
    }
    /* The date/time */
    .timeline-v2 > li .cbp_tmtime {
        width: 35%;
        display: block;
        position: absolute;
        padding-right: 80px;
    }

    .timeline-v2 > li .cbp_tmlabel a {
        display: inline-block;
        float: right;
    }

        .timeline-v2 > li .cbp_tmlabel a .label {
            display: inline-block;
            font-size: 12px;
            vertical-align: middle;
        }

    .timeline-v2 > li .cbp_tmtime span {
        top: 9px;
        display: block;
        text-align: right;
        position: relative;
    }

        .timeline-v2 > li .cbp_tmtime span.normal {
            color: #6b6b6b;
            font-size: 14px;
            line-height: 0.9;
        }

        .timeline-v2 > li .cbp_tmtime span.bold {
            color: #6b6b6b;
            font-size: 18px;
            font-weight: normal;
        }
    /* Right content */
    .timeline-v2 > li .cbp_tmlabel {
        color: #fff;
        padding: 10px 20px 20px;
        background: #f3f3f3;
        line-height: 1.4;
        clear: both;
        position: relative;
        /*border-radius: 5px;*/
        margin: 0 0 40px 35%;
    }
        /*
.timeline-v2 > li .cbp_tmlabel img.big-thumb {
	width: 100%;
}
*/
        .timeline-v2 > li .cbp_tmlabel li {
            padding: 0;
        }
        /*
.timeline-v2 > li .cbp_tmlabel img.small-thumb {
	width: 111px;
	height: auto;
}
*/
        .timeline-v2 > li .cbp_tmlabel h2 {
            margin-top: 0px;
            font-size: 18px;
            padding: 0 0 5px;
            margin-bottom: 10px;
            text-transform: capitalize;
            border-bottom: 1px solid #ddd;
            color: #6b6b6b;
            white-space: normal;
        }

        .timeline-v2 > li .cbp_tmlabel p {
            color: #6b6b6b;
            margin: 0;
            margin-right: 30px;
            white-space: normal;
            word-wrap: normal;
            margin-bottom: 10px;
            font-size: 13px;
            line-height: 18px;
        }

            .timeline-v2 > li .cbp_tmlabel p strong {
                font-weight: bold;
                display: block;
                font-size: 14px;
            }

        .timeline-v2 > li .cbp_tmlabel .col_1_3 {
            float: left;
            width: 33.33333%;
        }

@media only screen and (max-width: 767px) {
    .timeline-v2 > li .cbp_tmlabel .col_1_3 {
        float: none;
        width: 100%;
    }
}

.timeline-v2 > li .cbp_tmlabel .text-left {
    float: left;
}
/* The triangle */
.timeline-v2 > li .cbp_tmlabel:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: #f3f3f3;
    border-width: 10px;
    top: 18px;
}
/* The icons */
.timeline-v2 > li .cbp_tmicon {
    top: 22px;
    left: 32%;
    width: 10px;
    height: 10px;
    position: absolute;
    background: #007dc3;
    margin: 0 0 0 -17px;
    box-shadow: 0 0 0 4px #f3f3f3;
    -webkit-font-smoothing: antialiased;
}
/* Example Media Queries */
@media screen and (max-width: 65.375em) {
    .timeline-v2 > li .cbp_tmtime span:last-child {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 47.2em) {
    .timeline-v2:before {
        display: none;
    }

    .timeline-v2 > li .cbp_tmtime {
        width: 100%;
        position: relative;
        padding: 0 0 20px 0;
    }

        .timeline-v2 > li .cbp_tmtime span {
            text-align: left;
        }

    .timeline-v2 > li .cbp_tmlabel {
        padding: 1em;
        font-weight: 400;
        margin: 0 0 30px 0;
    }

        .timeline-v2 > li .cbp_tmlabel:after {
            left: 20px;
            top: -20px;
            right: auto;
            border-bottom-color: #f3f3f3;
            border-right-color: transparent;
        }

    .timeline-v2 > li .cbp_tmicon {
        left: auto;
        float: right;
        position: relative;
        margin: -55px 5px 0 0px;
    }
}
/*timeline-v2 within tab-v2 issue issue fix*/
.timeline-v2 > li .cbp_tmlabel.equal-height-column {
    height: auto !important;
}

.rounded-x {
    border-radius: 50% !important;
}

.profile .timeline-v2 > li .cbp_tmlabel {
    background: #eee;
}

.data-view-title {
    background-color: #fff;
    padding: 10px;
    font-size: 15px;
    font-weight: normal;
    border-bottom: 1px solid #ddd;
}

table.table-format {
    width: 100%;
}

    table.table-format th {
        padding-right: 20px;
        font-size: 14px;
    }

    table.table-format td {
        font-size: 14px;
    }

table.table-format {
    margin-right: 20px;
    margin-bottom: 20px;
}

.border-right-white {
    border-right: 2px solid #fff;
}

.print-icon {
    float: right;
    color: #fff;
    font-size: 14px;
}

.btn-group.right-align .dropdown-menu {
    left: auto;
    right: 0;
}

.alternate-box .row:nth-child(odd) {
    background: #f3f3f3;
    margin-bottom: 20px;
}

.alternate-box .row:nth-child(even) {
    background: #f9f9f9;
    margin-bottom: 20px;
}

.alternate-box p {
    margin: 0;
    padding: 0;
}

.alternate-box {
    margin-left: 15px;
    margin-right: 15px;
}
/*new style added on 3/3/17*/
.usr-image {
    width: 45px;
    height: 45px;
    position: absolute;
}

.qa-section {
    margin-bottom: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    padding: 15px;
    display: block;
}

.usr-qa {
    width: auto;
    margin-left: 60px;
}

    .usr-qa .name {
        color: #007dc3;
        margin-bottom: 15px;
    }

        .usr-qa .name span {
            color: #444;
        }

.answer {
    min-height: 60px;
}

/*Formula Editor*/
.custom__input {
    display: inline-block;
    width: 100%;
    /* height: 100%; */
    padding-left: 0.5rem;
    font-size: 1.3rem;
    background: transparent;
    vertical-align: bottom;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    color: #333;
}

    .custom__input:hover, .custom__input:active, .custom__input:focus {
        border-bottom: 2px solid #007dc3;
        background: transparent;
    }

.custom__textarea {
    display: inline-block;
    width: 100%;
    min-height: 30px;
    min-width: 100%;
    max-width: 100%;
    max-height: auto;
    padding: 0.5rem;
    font-size: 1.28rem;
    background: transparent;
    border: none;
    color: #333;
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

    .custom__textarea:hover, .custom__textarea:active, .custom__textarea:focus {
        border-bottom: 2px solid #007dc3;
        background: transparent;
    }

.accordion-toggle {
    position: relative;
}

    .accordion-toggle::before,
    .accordion-toggle::after {
        /* content: '';*/
        display: block;
        position: absolute;
        top: 7px;
        width: 12px;
        height: 4px;
        margin-top: -2px;
        background-color: #337ab7;
        -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transition: all 0.25s;
        transition: all 0.25s;
    }

    .accordion-toggle::before {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0;
    }

    .accordion-toggle.collapsed::before {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
    }

    .accordion-toggle.collapsed::after {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
/*style added for pms 10-Apr-16*/
/* Button 4 */
.btn-4 {
    background: #47a3da;
    color: #fff !important;
}

    .btn-4:hover,
    btn-4:active,
    btn-4:focus {
        background: #3490c7;
        color: #fff !important;
    }

    .btn-4:after {
        content: '';
        position: absolute;
        z-index: -1;
    }
    /* Pseudo elements for icons */
    .btn-4:before {
        font-family: 'FontAwesome';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        position: relative;
        -webkit-font-smoothing: antialiased;
    }

    .btn-4:active {
        background: #2684bd;
    }

    .btn-4:before {
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        line-height: 2.5;
        font-size: 140%;
        width: 60px;
    }

.btn-4 {
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    padding: 15px 30px 15px 90px;
    border: none;
    font-family: inherit;
    font-size: 14px;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    margin: 2px 0;
}

    .btn-4.btn-2x {
        padding: 10px 10px 10px 50px;
        background: #2CC185;
        font-size: 12px;
    }

        .btn-4.btn-2x:before {
            line-height: 2.3;
            width: 40px;
        }

    .btn-4.btn-1x {
        padding: 5px 7px 5px 40px;
        font-size: 10px;
    }

        .btn-4.btn-1x:before {
            line-height: 2.3;
            width: 30px;
        }

    .btn-4.green {
        background: #2CC185 !important;
    }

    .btn-4.blue {
        background: #47a3da !important;
    }

    .btn-4.grey {
        background: #f0f0f0 !important;
        color: #333 !important;
    }

    .btn-4:before {
        background: rgba(0,0,0,0.1);
    }

.button-holder {
	display: inline-block;
}

.buttons-left, .buttons-right {
	text-align: center;
}

@media (max-width: 767px) {
    .text-xs-left {
        text-align: left;
    }

    .text-xs-right {
        text-align: right;
    }

    .text-xs-center {
        text-align: center;
    }

    .text-xs-justify {
        text-align: justify;
    }
}

@media (min-width: 768px) {
    .text-sm-left {
        text-align: left;
    }

    .text-sm-right {
        text-align: right;
    }

    .text-sm-center {
        text-align: center;
    }

    .text-sm-justify {
        text-align: justify;
    }

    .border-sm-left {
        border-left: 1px solid #ccc;
    }
}

@media (min-width: 992px) {
    .text-md-left {
        text-align: left;
    }

    .text-md-right {
        text-align: right;
    }

    .text-md-center {
        text-align: center;
    }

    .text-md-justify {
        text-align: justify;
    }
}

@media (min-width: 1200px) {
    .text-lg-left {
        text-align: left;
    }

    .text-lg-right {
        text-align: right;
    }

    .text-lg-center {
        text-align: center;
    }

    .text-lg-justify {
        text-align: justify;
    }
}

.label-margin {
    margin-top: 30px;
}

.greeting-card-box {
    display: inline-block;
    margin: 0 10px;
}

p.labeltext {
    font-size: 14px;
    line-height: 20px;
    color: #333;
    font-weight: normal;
}

    p.labeltext span.label-number {
        vertical-align: bottom;
        margin: 0;
    }

.greeting-images {
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    text-align: center;
}

.event-banner {
    border-top: 1px solid #ccc;
    margin-top: 10px;
}

ul.side-navigation {
    background: #eee;
    height: 100%;
    list-style: none;
    padding: 0;
    border: 1px solid #eee;
}

    ul.side-navigation li {
        list-style: none;
        border-bottom: 1px solid #ccc;
    }

        ul.side-navigation li.active {
            background: #fff;
        }

        ul.side-navigation li a {
            color: #333;
            padding: 10px 20px;
            display: inline-block;
        }

.assessment .text-line {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 10px;
    line-height: 20px;
    text-align: justify;
}

    .assessment .text-line span {
        color: #47a3da;
    }

    .assessment .text-line em {
        color: #555;
        font-style: normal;
    }
    /*style added on 27/5/17*/
    .assessment .text-line span.color-white {
	    color: #fff;
	}

.right-desc {
    width: auto;
    margin-left: 60px;
    position: relative;
    min-height: 50px;
}

.kra-comments {
    border-top: 1px solid #ddd;
    margin-bottom: 10px;
    padding-top: 10px;
}

@media only screen and (max-width: 767px) {
    .kra-comments {
        margin-top: 10px;
    }
}

.kra-comments .text {
    font-size: 12px;
    line-height: 16px;
    margin: 0;
}

    .kra-comments .text span {
        color: #47a3da;
    }

    .kra-comments .text em {
        color: #555;
        font-style: normal;
    }

.border-card {
    box-shadow: none;
    border: 1px solid #ccc;
}

.info-box-content-ni {
    padding: 5px 10px;
}

.red-border {
    border-color: #ff851b;
}

.green-border {
    border-color: #00a65a;
}

.resp-tabs-list li span.pending {
    color: #ffcf27;
    font-weight: 600;
}

.resp-tabs-list li span.green {
    color: #00a65a;
}

.goal {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 10px;
}

h3.title span {
    color: #47a3da;
}

/*h3.title {
    padding: 10px 15px;
    background: #eee;
}*/

@media only screen and (max-width: 479px) {
    .usr-image {
        position: relative;
        width: 100%;
        height: auto;
        text-align: center;
        margin-bottom: 5px;
    }

        .usr-image img {
            display: inline;
            width: 60px;
            height: auto;
        }

    .kiosk-details {
        margin-left: 0;
    }

    .right-desc {
        margin-left: 0;
    }
}

.text-line .badge {
    color: #fff !important;
}


@media (max-width: 767px) {
    .text-xs-left {
        text-align: left;
    }

    .text-xs-right {
        text-align: right;
    }

    .text-xs-center {
        text-align: center;
    }

    .text-xs-justify {
        text-align: justify;
    }
}

@media (min-width: 768px) {
    .text-sm-left {
        text-align: left;
    }

    .text-sm-right {
        text-align: right;
    }

    .text-sm-center {
        text-align: center;
    }

    .text-sm-justify {
        text-align: justify;
    }
}

@media (min-width: 992px) {
    .text-md-left {
        text-align: left;
    }

    .text-md-right {
        text-align: right;
    }

    .text-md-center {
        text-align: center;
    }

    .text-md-justify {
        text-align: justify;
    }
}

@media (min-width: 1200px) {
    .text-lg-left {
        text-align: left;
    }

    .text-lg-right {
        text-align: right;
    }

    .text-lg-center {
        text-align: center;
    }

    .text-lg-justify {
        text-align: justify;
    }
}

@media (min-width: 480px) {
    /** Pull left xs **/
    .pull-left-xs-m {
        float: left;
    }

    /** Pull right xs **/
    .pull-right-xs-m {
        float: right;
    }
}


@media (max-width: 767px) {
  /** Pull left xs **/
  .pull-left-xs {
    float: left;
  }

  /** Pull right xs **/
  .pull-right-xs {
    float: right;
  }
}

@media (min-width: 768px) {
    /** Pull left sm **/
    .pull-left-sm {
        float: left;
    }

    /** Pull right sm **/
    .pull-right-sm {
        float: right;
    }
}

@media (min-width: 992px) {
    /** Pull left **/
    .pull-left-md {
        float: left;
    }

    /** Pull right **/
    .pull-right-md {
        float: right;
    }
}

@media (min-width: 1200px) {
    /** Pull left **/
    .pull-left-lg {
        float: left;
    }

    /** Pull right **/
    .pull-right-lg {
        float: right;
    }
}

.mc {
    margin-left: auto;
    margin-right: auto;
}

.mt-0 {
    margin-top: 0;
}

.mr-0 {
    margin-right: 0;
}

.mb-0 {
    margin-bottom: 0;
}

.ml-0 {
    margin-left: 0;
}

.pt-0 {
    padding-top: 0;
}

.pr-0 {
    padding-right: 0;
}

.pb-0 {
    padding-bottom: 0;
}

.pl-0 {
    padding-left: 0;
}

@media (max-width: 767px) {
    .mc-sm {
        margin-right: auto;
        margin-left: auto;
    }

    .mt-xs {
        margin-top: 4px;
    }

    .mr-xs {
        margin-right: 4px;
    }

    .mb-xs {
        margin-bottom: 4px;
    }

    .ml-xs {
        margin-left: 4px;
    }

    .mt-sm {
        margin-top: 8px;
    }

    .mr-sm {
        margin-right: 8px;
    }

    .mb-sm {
        margin-bottom: 8px;
    }

    .ml-sm {
        margin-left: 8px;
    }

    .mt-md {
        margin-top: 11px;
    }

    .mr-md {
        margin-right: 11px;
    }

    .mb-md {
        margin-bottom: 11px;
    }

    .ml-md {
        margin-left: 11px;
    }

    .mt-lg {
        margin-top: 23px;
    }

    .mr-lg {
        margin-right: 23px;
    }

    .mb-lg {
        margin-bottom: 23px;
    }

    .ml-lg {
        margin-left: 23px;
    }

    .mt-xl {
        margin-top: 38px;
    }

    .mr-xl {
        margin-right: 38px;
    }

    .mb-xl {
        margin-bottom: 38px;
    }

    .ml-xl {
        margin-left: 38px;
    }

    .pt-xs {
        padding-top: 4px;
    }

    .pr-xs {
        padding-right: 4px;
    }

    .pb-xs {
        padding-bottom: 4px;
    }

    .pl-xs {
        padding-left: 4px;
    }

    .pt-sm {
        padding-top: 8px;
    }

    .pr-sm {
        padding-right: 8px;
    }

    .pb-sm {
        padding-bottom: 8px;
    }

    .pl-sm {
        padding-left: 8px;
    }

    .pt-md {
        padding-top: 11px;
    }

    .pr-md {
        padding-right: 11px;
    }

    .pb-md {
        padding-bottom: 11px;
    }

    .pl-md {
        padding-left: 11px;
    }

    .pt-lg {
        padding-top: 23px;
    }

    .pr-lg {
        padding-right: 23px;
    }

    .pb-lg {
        padding-bottom: 23px;
    }

    .pl-lg {
        padding-left: 23px;
    }

    .pt-xl {
        padding-top: 38px;
    }

    .pr-xl {
        padding-right: 38px;
    }

    .pb-xl {
        padding-bottom: 38px;
    }

    .pl-xl {
        padding-left: 38px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .mc-md {
        margin-right: auto;
        margin-left: auto;
    }

    .mt-xs {
        margin-top: 4px;
    }

    .mr-xs {
        margin-right: 4px;
    }

    .mb-xs {
        margin-bottom: 4px;
    }

    .ml-xs {
        margin-left: 4px;
    }

    .mt-sm {
        margin-top: 8px;
    }

    .mr-sm {
        margin-right: 8px;
    }

    .mb-sm {
        margin-bottom: 8px;
    }

    .ml-sm {
        margin-left: 8px;
    }

    .mt-md {
        margin-top: 11px;
    }

    .mr-md {
        margin-right: 11px;
    }

    .mb-md {
        margin-bottom: 11px;
    }

    .ml-md {
        margin-left: 11px;
    }

    .mt-lg {
        margin-top: 23px;
    }

    .mr-lg {
        margin-right: 23px;
    }

    .mb-lg {
        margin-bottom: 23px;
    }

    .ml-lg {
        margin-left: 23px;
    }

    .mt-xl {
        margin-top: 38px;
    }

    .mr-xl {
        margin-right: 38px;
    }

    .mb-xl {
        margin-bottom: 38px;
    }

    .ml-xl {
        margin-left: 38px;
    }

    .pt-xs {
        padding-top: 4px;
    }

    .pr-xs {
        padding-right: 4px;
    }

    .pb-xs {
        padding-bottom: 4px;
    }

    .pl-xs {
        padding-left: 4px;
    }

    .pt-sm {
        padding-top: 8px;
    }

    .pr-sm {
        padding-right: 8px;
    }

    .pb-sm {
        padding-bottom: 8px;
    }

    .pl-sm {
        padding-left: 8px;
    }

    .pt-md {
        padding-top: 11px;
    }

    .pr-md {
        padding-right: 11px;
    }

    .pb-md {
        padding-bottom: 11px;
    }

    .pl-md {
        padding-left: 11px;
    }

    .pt-lg {
        padding-top: 23px;
    }

    .pr-lg {
        padding-right: 23px;
    }

    .pb-lg {
        padding-bottom: 23px;
    }

    .pl-lg {
        padding-left: 23px;
    }

    .pt-xl {
        padding-top: 38px;
    }

    .pr-xl {
        padding-right: 38px;
    }

    .pb-xl {
        padding-bottom: 38px;
    }

    .pl-xl {
        padding-left: 38px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .mc-lg {
        margin-right: auto;
        margin-left: auto;
    }

    .mt-xs {
        margin-top: 5px;
    }

    .mr-xs {
        margin-right: 5px;
    }

    .mb-xs {
        margin-bottom: 5px;
    }

    .ml-xs {
        margin-left: 5px;
    }

    .mt-sm {
        margin-top: 10px;
    }

    .mr-sm {
        margin-right: 10px;
    }

    .mb-sm {
        margin-bottom: 10px;
    }

    .ml-sm {
        margin-left: 10px;
    }

    .mt-md {
        margin-top: 15px;
    }

    .mr-md {
        margin-right: 15px;
    }

    .mb-md {
        margin-bottom: 15px;
    }

    .ml-md {
        margin-left: 15px;
    }

    .mt-lg {
        margin-top: 30px;
    }

    .mr-lg {
        margin-right: 30px;
    }

    .mb-lg {
        margin-bottom: 30px;
    }

    .ml-lg {
        margin-left: 30px;
    }

    .mt-xl {
        margin-top: 50px;
    }

    .mr-xl {
        margin-right: 50px;
    }

    .mb-xl {
        margin-bottom: 50px;
    }

    .ml-xl {
        margin-left: 50px;
    }

    .pt-xs {
        padding-top: 5px;
    }

    .pr-xs {
        padding-right: 5px;
    }

    .pb-xs {
        padding-bottom: 5px;
    }

    .pl-xs {
        padding-left: 5px;
    }

    .pt-sm {
        padding-top: 10px;
    }

    .pr-sm {
        padding-right: 10px;
    }

    .pb-sm {
        padding-bottom: 10px;
    }

    .pl-sm {
        padding-left: 10px;
    }

    .pt-md {
        padding-top: 15px;
    }

    .pr-md {
        padding-right: 15px;
    }

    .pb-md {
        padding-bottom: 15px;
    }

    .pl-md {
        padding-left: 15px;
    }

    .pt-lg {
        padding-top: 30px;
    }

    .pr-lg {
        padding-right: 30px;
    }

    .pb-lg {
        padding-bottom: 30px;
    }

    .pl-lg {
        padding-left: 30px;
    }

    .pt-xl {
        padding-top: 50px;
    }

    .pr-xl {
        padding-right: 50px;
    }

    .pb-xl {
        padding-bottom: 50px;
    }

    .pl-xl {
        padding-left: 50px;
    }
}

@media (min-width: 1200px) {
    .mc-xl {
        margin-right: auto;
        margin-left: auto;
    }

    .mt-xs {
        margin-top: 8px;
    }

    .mr-xs {
        margin-right: 8px;
    }

    .mb-xs {
        margin-bottom: 8px;
    }

    .ml-xs {
        margin-left: 8px;
    }

    .mt-sm {
        margin-top: 15px;
    }

    .mr-sm {
        margin-right: 15px;
    }

    .mb-sm {
        margin-bottom: 15px;
    }

    .ml-sm {
        margin-left: 15px;
    }

    .mt-md {
        margin-top: 23px;
    }

    .mr-md {
        margin-right: 23px;
    }

    .mb-md {
        margin-bottom: 23px;
    }

    .ml-md {
        margin-left: 23px;
    }

    .mt-lg {
        margin-top: 45px;
    }

    .mr-lg {
        margin-right: 45px;
    }

    .mb-lg {
        margin-bottom: 45px;
    }

    .ml-lg {
        margin-left: 45px;
    }

    .mt-xl {
        margin-top: 75px;
    }

    .mr-xl {
        margin-right: 75px;
    }

    .mb-xl {
        margin-bottom: 75px;
    }

    .ml-xl {
        margin-left: 75px;
    }

    .pt-xs {
        padding-top: 8px;
    }

    .pr-xs {
        padding-right: 8px;
    }

    .pb-xs {
        padding-bottom: 8px;
    }

    .pl-xs {
        padding-left: 8px;
    }

    .pt-sm {
        padding-top: 15px;
    }

    .pr-sm {
        padding-right: 15px;
    }

    .pb-sm {
        padding-bottom: 15px;
    }

    .pl-sm {
        padding-left: 15px;
    }

    .pt-md {
        padding-top: 23px;
    }

    .pr-md {
        padding-right: 23px;
    }

    .pb-md {
        padding-bottom: 23px;
    }

    .pl-md {
        padding-left: 23px;
    }

    .pt-lg {
        padding-top: 45px;
    }

    .pr-lg {
        padding-right: 45px;
    }

    .pb-lg {
        padding-bottom: 45px;
    }

    .pl-lg {
        padding-left: 45px;
    }

    .pt-xl {
        padding-top: 75px;
    }

    .pr-xl {
        padding-right: 75px;
    }

    .pb-xl {
        padding-bottom: 75px;
    }

    .pl-xl {
        padding-left: 75px;
    }
}

.card-approve {
    color: green;
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 18px;
    z-index: 99999;
}

.card-sendback {
    color: #ffb43e;
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 18px;
    z-index: 99999;
}

.p-link {
    cursor: pointer;
}

.goal-desc {
    width: auto;
    margin-right: 40px;
    position: relative;
}

.goal-arrow-open {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 0;
}

.close-card {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
    color: #333;
    z-index: 99;
}

.fg-primary {
    color: #428bca !important;
}

.fg-success {
    color: #5cb85c !important;
}

.fg-info {
    color: #37accf !important;
}

.fg-warning {
    color: #d9912b !important;
}

.fg-danger {
    color: #d9534f !important;
}

.fg-white {
    color: #fff !important;
}


.bold {
    font-weight: bold;
}


.stats-box {
    text-align: left;
    margin-bottom: 20px;
    background: #37accf;
    border-radius: 3px;
    overflow: auto;
}

    .stats-box .stats-box-content {
        min-width: 100px;
        padding: 0 20px;
        margin: 10px 0;
        border-right: 1px solid #fff;
        display: inline-block;
    }

        .stats-box .stats-box-content:last-child {
            border: 0;
        }

        .stats-box .stats-box-content .stats-meaning {
            font-size: 14px;
            text-align: left;
            color: #fff;
            line-height: 17px;
        }

        .stats-box .stats-box-content .stats-value {
            font-size: 18px;
            font-weight: bold;
            text-align: left;
            color: #fff;
            line-height: 20px;
        }

@media only screen and (max-width: 767px) {
    .stats-box .stats-box-content {
        display: block;
        border: 0;
        margin: 8px 0;
        padding: 0 40px;
    }

        .stats-box .stats-box-content .stats-meaning,
        .stats-box .stats-box-content .stats-value {
            display: inline-block;
            margin-right: 10px;
        }
}

close-card {
    width: 40px;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
    color: #333;
    z-index: 99;
}
/*New Emp Pop Design*/
.buttons-bottom {
    text-align: left;
}

    .buttons-bottom .btn {
        margin-bottom: 10px;
    }

.edit-section-button {
    margin-top: 10px;
}

.employee-label h6.top {
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .buttons-bottom {
        text-align: right;
    }

        .buttons-bottom .btn {
            margin-bottom: 0;
        }

    .employee-label {
        float: left;
    }

    .employee-list-button {
        float: right;
    }

    .btn-group.right-align .dropdown-menu {
        left: auto;
        right: 0;
    }

    .edit-section-button {
        float: right;
        margin-top: 0;
    }

    .employee-label h6.top {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 479px) {
    .no-margin-top {
        margin-top: 0 !important;
    }

    h6.box-subtitle {
        margin-top: 20px;
    }
}

@media only screen and (min-width: 768px) {
    .pull-right-sm {
        float: right !important;
    }
}

.btn-green {
    border-color: #15987e;
    color: #fff;
    background-color: #16a085;
}

.btn-red {
    border-color: #dd4b39;
    color: #fff;
    background-color: #dd4b39;
}

.btn-blue {
    border-color: #0073b7;
    color: #fff;
    background-color: #0073b7;
}

.btn-green.active,
.btn-green.focus,
.btn-green:active,
.btn-green:focus,
.btn-green:hover {
    background-color: #15987e;
    color: #fff;
}

.btn-blue.active,
.btn-blue.focus,
.btn-blue:active,
.btn-blue:focus,
.btn-blue:hover {
    background-color: #0073b7;
    color: #fff;
}

.btn-red.active,
.btn-red.focus,
.btn-red:active,
.btn-red:focus,
.btn-red:hover {
    background-color: #dd4b39;
    color: #fff;
}

.custom__textarea {
    display: inline-block;
    width: 100%;
    min-height: 30px;
    min-width: 100%;
    max-width: 100%;
    max-height: auto;
    padding: 0.5rem;
    font-size: 1.28rem;
    background: transparent;
    outline: none;
    border: none;
    color: #333;
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

    .custom__textarea:hover, .custom__textarea:active, .custom__textarea:focus {
        border-bottom: 2px solid #007dc3;
        background: transparent;
    }

.custom__select {
    width: 100%;
    border: none;
    box-shadow: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    background-color: inherit;
    padding-right: 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #333;
    background: url(../img/arrowdown.png) no-repeat 100% 50%;
}
    

    
}

    .custom__select select {
        width: 100%;
        border: none;
        font-weight: normal;
        box-shadow: none;
        border-bottom: 2px solid rgba(0, 0, 0, 0.2);
        background-color: transparent;
        background-image: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

        .custom__select select:focus,
        .custom__select select:active,
        .custom__select select:hover {
            outline: none;
            border-bottom: 2px solid #007dc3;
        }

        .custom__select select option {
            padding: 4px 8px;
        }

.summaryinfo {
    padding: 10px;
    margin-bottom: 20px;
}

.number-label {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    background: #777;
    text-align: center;
    vertical-align: middle;
    margin-top: 15px;
    display: inline-block;
    font-weight: bold;
}

.row-input .row-label {
    margin: 0;
    background-color: #f3f3f3;
    padding: 10px;
    text-align: right;
}

    .row-input .row-label p {
        margin: 0;
    }

.row-input .row {
    margin-bottom: 10px;
}

.row-input .number-cont {
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .row-input .row-label {
        text-align: left;
    }

    .row-input .number-cont {
        text-align: left;
    }

        .row-input .number-cont .number-label {
            margin-bottom: 10px;
        }
}

/* New */

.leave-card {
	min-height: 300px;
}

.leave-card h5 {
	text-align: center;
	color: #0073b7;
}

.card-leave h5 {
	color: #0073b7;
}

.card-leave-info {
	padding: 5px 0;
	position: relative;
	display: block;
	text-align: center;
	color: #999;
	background: #fcfcfc;
	border: 2px solid #f3f3f3;
	margin-bottom: 3px;
}

.card-leave-info div {
	font-size: 16px;
	margin-right: 5px;
	display: inline-block;
	font-weight: 500;
}

.card-leave-info span {
	font-size: 12px;
	display: inline-block;
	text-transform: capitalize;
}

.card-leave-row {
	border: 1px solid rgba(220,220,220,0.4);
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	padding: 5px;
	margin-bottom: 10px;
	height: 65px;
}

.card-leave-status div {
	font-size: 20px;
	width: 35%;
	margin-right: 5%;
	float: left;
	height: 100%;
	padding: 8px 0;
}

.card-leave-status span {
	font-size: 11px;
	line-height: 14px;
	white-space: normal;
	text-align: left;
	word-wrap: break-word;
	text-transform: capitalize;
	display: table-cell;
	vertical-align: middle;
	width: 60%;
}

.card-leave-status.left {
	border-right: 1px solid rgba(220,220,220,0.4);
}

.apply-leave-button {
	width: 100%;
	padding: 5px 0;
	background: #333;
	color: #fff;
	text-align: center;
	display: inline-block;
}

.card-leave-status {
	width: 50%;
	float: left;
	height: 100%;
	display: table;
	padding: 5px;
}

.card-leave-avail {
	text-align: center;
	margin: 10px 0;
	line-height: 30px;
	border: 1px solid rgba(220,220,220,0.4);
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	padding: 5px;
	margin-bottom: 10px;
	background: #f6f6f6;
}

.card-leave-avail span {
	font-size: 20px;
	line-height: 30px;
	vertical-align: baseline;
	display: inline-block;
}

.card-leave-last {
	text-align: center;
	margin: 10px 0 0;
	border: 1px solid rgba(220,220,220,0.4);
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	padding: 5px;
	font-size: 0;
}

.card-leave-last span {
	display: block;
	line-height: 16px;
	font-size: 12px;
}

.card-leave-last div {
	display: inline-block;
	vertical-align: middle;
	border-right: 1px solid rgba(220,220,220,0.4);
	padding-right: 8px;
}

.card-leave-last em {
	display: inline-block;
	vertical-align: middle;
	line-height: 16px;
	font-style: normal;
	margin-left: 8px;
	font-size: 14px;
}


ul.side-navigation {
	background: #eee;
	height: 100%;
	list-style: none;
	padding: 0;
	border: 1px solid #eee;
}

ul.side-navigation li {
	list-style: none;
	border-bottom: 1px solid #ccc;
}

ul.side-navigation li.active {
	background: #fff;
}

ul.side-navigation li a {
	color: #333;
	padding: 10px 20px;
	display: inline-block;
}


.icons-functions {
    float: right;
}


.inline {
	display: inline !important;
}

.inline-block {
	display: inline-block !important;
}

.calendar-title {
	font-size: 18px;
	text-align: left;
	color: #176195;
	padding-bottom: 5px;
	margin-bottom: 15px;
}

.profile-intro h6.bottom {
	margin: 0;
}

/*.int_qa_group h6 {
	font-weight: 600;
	color: #666;
}

.int_qa_group {
	margin: 0 auto;
	width: 60%;
	border: 1px solid #ccc;
	padding: 15px;
	margin-bottom: 20px;
}

.int_qa_group h4 {
	margin-bottom: 20px;
	padding: 10px;
	color: #eee;
	background: #176195;
}*/


.stats-box {
	text-align: left;
	margin-bottom: 20px;
	background: #37accf;
	border-radius: 3px;
	overflow: auto;
}

.stats-box .stats-box-content {
	min-width: 100px;
	padding: 0 20px;
	margin: 10px 0;
	border-right: 1px solid #fff;
	display: inline-block;	
}

.stats-box  .stats-box-content:last-child {
	border: 0;
}

.stats-box .stats-box-content .stats-meaning {
	font-size: 14px;
	text-align: left;
	color: #fff;
	line-height: 17px;
}

.stats-box .stats-box-content .stats-value {
	font-size: 18px;
	font-weight: bold;
	text-align: left;
	color: #fff;
	line-height: 20px;
}

@media only screen and (max-width: 767px) {
	.stats-box .stats-box-content {
		display: block;
		border: 0;
		margin: 8px 0;
		padding: 0 40px;
	}
	.stats-box .stats-box-content .stats-meaning,
	.stats-box .stats-box-content .stats-value  {
		display: inline-block;
		margin-right: 10px;
		
	}
}


td.details-control {
    background: url('../resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../resources/details_close.png') no-repeat center center;
}

tr.group,
tr.group:hover {
    font-weight:bold;
}
.btn btn-danger dropdown-toggle {
    padding-right: 8px;
    padding-left: 8px;
}

@media only screen and (min-width: 480px) {
	.buttons-left {
		float: left !important;
	}
	.buttons-right {
		float: right !important;
	}
}
/*New Radio Design === Vinoth*/
.radio {
    padding-left: 20px;
}
.radio label {
    display: inline-block;
    position: relative;
    padding-left: 5px;
    padding-right: 37px;
    font-size: 13px;
    font-weight: normal;
}
.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 19px;
    height: 19px;
    left: 0;
    margin-left: -20px;
    border-width: 1px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out;
}
.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 9px;
    height: 9px;
    left: 5px;
    top: 5px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #3276B1;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"] {
    opacity: 0;
}
.radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}
.radio input[type="radio"]:disabled + label {
    opacity: 0.65;
}
.radio input[type="radio"]:disabled + label::before {
    cursor: not-allowed;
}
.radio.radio-inline {
    margin-top: 0;
}
span.active-member, span.stag {
	background: #5cb85c;
	color: #fff !important;
	display: inline-block;
	padding: 2px 8px 3px;
	font-size: 10px;
	line-height: 16px;
	font-weight: bold !important;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	border-radius: .25em;
	-webkit-border-radius: .25em;
	-moz-border-radius: .25em;
	margin-left: 10px;
}
.usr-qa .attach {
    float: right;
    cursor: pointer;
}
.attach .dropdown-menu {
    min-width: auto;
    left: auto;
    right: 0;
}
.progress-description a
{
    color:#fff;
}
.fileUpload {
    position: relative;
    overflow: hidden;
}
.fileUpload input.upload {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    margin: 0px;
    padding: 0px;
    filter: alpha(opacity=0);
}

.fileUpload span {
		max-width: 100%;
		overflow: hidden;
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
.dxgvControl, .dxgvDisabled {
    border: 1px Solid #ddd;
    font-family: 'Open Sans', Arial, Helvetica, Verdana, sans-serif;
    font-size: 13px;
    background-color: white;
    color: Black;
    cursor: default;
}
.dxgvHeader {
    cursor: pointer;
    white-space: nowrap;
    padding: 4px 6px 5px;
    border: 1px Solid rgb(204, 204, 204) !important;
    background: rgb(221, 221, 221);
    overflow: hidden;
    font-weight: normal;
    text-align: left;
}
ul.resp-tabs-list {
	text-align: left;
	position: relative;
	overflow: visible;
	padding: 10px;
	border-bottom: 1px solid #f4f4f4;
}
#resp-tabs {		
	margin-bottom: 20px !important;		
	background: #fff;		
	border-top: 3px solid #eacf52;		
}	
ul.resp-tabs-list, p {
    margin: 0px;
    padding: 0px;
}
.resp-tabs-list li {
    font-weight: normal;
    font-size: 14px;
    display: inline-block;
    margin: 0 20px 0 0;
    list-style: none;
    cursor: pointer;
    position: relative;
}
.resp-tab-active {
	color: #47a3da;
}
.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

/* Reimbursement Design  */

.fixed-panel {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	z-index: 99;
}

.card.reverse {
	background-color: #334667;
}

.card.reverse h5, .card.reverse td, .card.reverse p {
	color: #fff;
}

.alert-default {
    color: #333;
    background-color: rgba(0,125,195,0.05);
    border-color: rgba(0,125,195,0.1);
}
.w-100 {
    width: 100% !important;
}
.button-holder button {
    background-color: transparent;
    padding: 0;
    border: 0;
}

.custom__textareabig {
    display: inline-block;
    width: 100%;
    height: 80px;
    min-height: 40px;
    min-width: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 0.5rem;
    font-size: 1.5rem;
    background: transparent;
    color: #333;
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}



 .custom__textareabig:hover, .custom__textareabig:active, .custom__textareabig:focus {
        border-bottom: 2px solid #007dc3;
        background: transparent;
    }
.bootstrapWizard {
    display: block;
    list-style: none;
    padding: 0;
    position: relative;
    width: 100%
}
.bootstrapWizard a:active,
.bootstrapWizard a:focus,
.bootstrapWizard a:hover {
    text-decoration: none
}
.bootstrapWizard li {
    display: block;
    float: left;
    width: 25%;
    text-align: center;
    padding-left: 0
}
.bootstrapWizard li:before {
    border-top: 3px solid #55606E;
    content: "";
    display: block;
    font-size: 0;
    overflow: hidden;
    position: relative;
    top: 11px;
    right: 1px;
    width: 100%;
    z-index: 1
}
.bootstrapWizard li:first-child:before {
    left: 50%;
    max-width: 50%
}
.bootstrapWizard li:last-child:before {
    max-width: 50%;
    width: 50%
}
.bootstrapWizard li.complete .step {
    background: #0aa66e;
    padding: 1px 6px;
    border: 3px solid #55606E
}
.bootstrapWizard li .step i {
    font-size: 10px;
    font-weight: 400;
    position: relative;
    top: -1.5px
}
.bootstrapWizard li .step {
    background: #B2B5B9;
    color: #fff;
    display: inline;
    font-size: 15px;
    font-weight: 700;
    padding: 7px 13px;
    border: 3px solid transparent;
    border-radius: 50%;
    line-height: normal;
    position: relative;
    text-align: center;
    z-index: 2;
    transition: all .1s linear 0s
}
.bootstrapWizard li.active .step,
.bootstrapWizard li.active.complete .step {
    background: #0091d9;
    color: #fff;
    font-weight: 700;
    padding: 7px 13px;
    font-size: 15px;
    border-radius: 50%;
    border: 3px solid #55606E
}
.bootstrapWizard li.active .title,
.bootstrapWizard li.complete .title {
    color: #2B3D53
}
.bootstrapWizard li .title {
    color: #bfbfbf;
    display: block;
    font-size: 13px;
    line-height: 15px;
    max-width: 100%;
    position: relative;
    table-layout: fixed;
    text-align: center;
    top: 20px;
    word-wrap: break-word;
    z-index: 104
}
.wizard-actions {
    display: block;
    list-style: none;
    padding: 0;
    position: relative;
    width: 100%
}
.wizard-actions li {
    display: inline
}
.tab-content.transparent {
    background-color: transparent
}




17-10-2017 - update by Ashwin

.profile-bottom-buttons a {
    background: #eee;
    display: block;
    padding: 10px;
    color: #333;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 15px;
}

.valign-bottom {
    vertical-align: bottom !important;
}

.valign-top {
    vertical-align: top !important;
}

.mobile-block-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f4f4f4;
    text-align: center;
    margin-top: 10px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    position: relative;
}

.mobile-block-menu li {
    width: 33.333%;
    height: 120px;
    float: left;
    border: 1px solid #ddd;
    border-right: none;
    border-bottom: none;
    position: relative;
}

.mobile-block-menu li.col-2 {
    width: 50%;
}

.mobile-block-menu li a {
    width: 100%;
    height: 100%;
    padding: 30px 15px;
    display: block;
    position: relative;
    color: #333;
}

.mobile-block-menu li a:hover,
.mobile-block-menu li a:active,
.mobile-block-menu li a:focus {
    background: rgba(0,0,0,0.08);
}

.mobile-block-menu li .menu-icon {
    font-size: 28px;
    line-height: 30px;
}

.mobile-block-menu li .menu-text {
    font-size: 12px;
    line-height: 16px;
    margin-top: 10px;
}

.mobile-tile-menu {
    padding: 5px;
    margin: 0;
    text-align: center;
    background: transparent;
    width: 100%;
}

.mobile-tile-menu .tiles {
    clear: left;
    overflow: hidden;
    margin-bottom: 5px;
}

.mobile-tile-menu .tiles .tile {
    width: 33.333%;
    height: 110px;
    padding-right: 5px;
    float: left;
    position: relative;
    background: transparent;
}

.mobile-tile-menu .tiles .tile:last-child {
    padding: 0;
}
.mobile-tile-menu .tiles.tiles-2 .tile {
    width: 50%;
}

.mobile-tile-menu .tiles.tiles-1 .tile {
    width: 100%;
}


.mobile-tile-menu .tile a {
    display: block;
    text-align: center;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    padding: 25px 15px;
}

.mobile-tile-menu .tile .menu-icon {
    font-size: 30px;
    line-height: 30px;
    color: #fff;
}

.mobile-tile-menu .tile .menu-text {
    font-size: 12px;
    line-height: 16px;
    margin-top: 12px;
    color: #fff;
}

.mobile-tile-menu .tile.c1 a {
    background: #2FAF49;
}

.mobile-tile-menu .tile.c2 a {
    background: #007ABC;
}

.mobile-tile-menu .tile.c3 a {
    background: #8E4690;
}

.mobile-tile-menu .tile.c4 a {
    background: #B0BC43;
}

.mobile-tile-menu .tile.c5 a {
    background: #F13640;
}

.mobile-tile-menu .tile a:hover,
.mobile-tile-menu .tile a:active,
.mobile-tile-menu .tile a:focus {
    opacity: 0.7;
}


.rec-status-indicators {
    width: 100%;
    position: relative;
    text-align: center;
}

.rec-status-indicators .status-row {
    position: relative;
    width: auto;
    overflow: hidden;
    display: inline-block;
}

.rec-status-indicators .status {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    position: relative;
    display: inline-block;
    margin: 0 30px 15px;
    padding: 10px;
    float: left;
}

.rec-status-indicators .status:after {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.2);
}

.rec-status-indicators .status:hover,
.rec-status-indicators .status:active,
.rec-status-indicators .status:focus {
    text-decoration: none;
}

.rec-status-indicators .status:hover:after {
    background-color: rgba(0,0,0,0.3);
}

.rec-status-indicators .status .title {
    margin-top: 20%;
    position: relative;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 15px;
}

.rec-status-indicators .status .title span {
    display: block;
}

.rec-status-indicators .status .title span img {
    max-width: 60px;
}

.rec-status-indicators .status .status-label {
    position: absolute;
    top: 10px;
    right: 0;
}

.rec-status-indicators .status.one {
    background-color: #F25041;
}

.rec-status-indicators .status.two {
    background-color: #12C1E9;
}

.rec-status-indicators .status.three {
    background-color: #E1D215;
}

.rec-status-indicators .status.four {
    background-color: #DD2562;
}

.rec-status-indicators .status.five {
    background-color: #64BD4E;
}

.rec-status-indicators .status.six {
    background-color: #F02637;
}

.rec-status-indicators .status.seven {
    background-color: #8E871D;
}

.rec-status-indicators .status.eight {
    background-color: #22532D;
}

@media only screen and (max-width: 991px) {
   .rec-status-indicators .status-row {
        width: 440px;
   }
}

@media only screen and (max-width: 510px) {
   .rec-status-indicators .status-row {
        width: 302px;
   }
   .rec-status-indicators .status {
       width: 130px;
       height: 130px;
       margin: 0 10px 10px;
   }
}


@media only screen and (max-width: 380px) {
   .rec-status-indicators .status-row {
        width: 150px;
   }
}

.static_mobile_footer {
	display: none;
}

@media only screen and (max-width: 767px) {
	.static_mobile_footer {
		position: fixed;
		background-color: #fff;
		border-top: 1px solid #ddd;
        left:0;
        bottom: 0;
        right: 0;
		width: 100%;
		display: block;
		text-align: center;
		z-index: 999999;
	}
	
	.static_mobile_footer > ul {
		margin: 0;
		padding: 0;
		display: inline-block;
        position: relative;
	}
	
	.static_mobile_footer > ul > li {
		display: inline-block;
		margin: 0;
		padding:0;
		
	}
		
	.static_mobile_footer > ul > li:last-child {
		border-right: none;
	}
	
	.static_mobile_footer > ul > li > a {
		display: inline-block;
		padding: 5px 10px;
		font-size: 24px;
        line-height: 30px;
        color: #777;
	}

    .static_mobile_footer > ul > li.dropup.open a {
        color: #007dc3;
    }

    .static_mobile_footer > ul > li > a > span {
        font-size: 1.1rem;
        line-height: 1.4rem;
        display: block;
    }
	
	.scrollDownArrow {
		display: none !important;
	}

}

.static_mobile_footer .dropdown-menu {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 50px;
    padding: 0;
    margin: 0;
    border: none;
}

.static_mobile_footer .dropdown-alerts-mobile {
	list-style: none;
	padding: 0;
	margin: 0;
}

.static_mobile_footer .dropdown-alerts-mobile .dropdown-header {
    color: #fff;
    background-color: #007dc3 !important;
	padding: 15px 10px;
}

.static_mobile_footer .dropdown-alerts-mobile li {
    margin: 0;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    font-size: 13px;
}

.static_mobile_footer .dropdown-alerts-mobile li a {
    display: block;
    padding: 10px;
     color: #333;
}

.static_mobile_footer .dropdown-alerts-mobile li a:hover {
    background-color: #fef5e8;
}

.static_mobile_footer .dropdown-alerts-mobile li:last-child {
    border-bottom: none;
}

.static_mobile_footer .dropdown-alerts-mobile .dropdown-footer {
    display: block;
    border-top: 1px solid #ccc;
    border-bottom: none;
    text-align: center;
    font-size: 12px;
    line-height: 1.428571429;
    margin: 0;
}

.static_mobile_footer .dropdown-alerts-mobile li.dropdown-footer a {
    display: block;
    padding: 10px;
    color: #fff;
    background-color: #007dc3 !important;
}

.print-only {
	display: none;
}

.disable-only {
    pointer-events: none;
    cursor: no-drop;
}

.editablecolumn {
    background-color:#ffffcc;                   
}
.readonly {
    background-color:#111fcc; 
   white-space: nowrap !important;                       
}

.legendbox {
    width: 25px;
    height: 15px;
    position: relative;
    border: 1px solid #888;
    display: inline-block;
}

.legend-horizontal {
    margin: 0;
    padding: 0;
    text-align: right;
}

.legend-horizontal li {
    display: inline-block;
    margin-left: 15px;
    font-size: 12px;
}

.dt-buttons button
{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    float:left;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #337ab7;
}


/* Chatbot supporting css start */

.navbaricons > li > a > img,
.home > a > img,
.search > a > img {
    padding: 0;
    height: 20px;
    margin-top: 15px;
    display: inline-block;
    vertical-align: middle;
}

.chatbot {
    position: relative;
    height: 100%;
}

.chatbot .chatbot-history {
    padding: 10px;
    border-bottom: 1px solid white;
    overflow-y: scroll;
    height: calc(100% - 30px);
    position: relative;
}

.chatbot .chatbot-history ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.chatbot .chatbot-history .message-data {
    margin-bottom: 15px;
}
.chatbot .chatbot-history .message-data-time {
    color: #a8aab1;
    padding-left: 6px;
}
.chatbot .chatbot-history .message {
    color: white;
    padding: 8px 10px;
    line-height: 26px;
    font-size: 14px;
    border-radius: 7px;
    margin-bottom: 20px; 
    position: relative;
}
.chatbot .chatbot-history .message:after {
    bottom: 100%;
    left: 10px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #47a3da;
    border-width: 10px;
    margin-left: -10px;
}
.chatbot .chatbot-history .my-message {
    background: #47a3da;
    border-top-left-radius: 0;
}
.chatbot .chatbot-history .my-messagee:after {
    border-bottom-color: #47a3da;
}
.chatbot .chatbot-history .bot-message {
    background: #5cb85c;
    border-top-right-radius: 0;
}
.chatbot .chatbot-history .bot-message:after {
    border-bottom-color: #5cb85c;
    right: 0;
    left: auto;
}
.chatbot .chatbot-message input {
    width: calc(100% - 40px);
    height: 30px;
    border: none;
    border: 1px solid #ccc;
    padding: 3px;
    font: 14px/22px "Lato", Arial, sans-serif;
    resize: none;
    border-radius: 0;
}
.chatbot .chatbot-message input:hover {
    border-color: #888;
}
.chatbot .chatbot-message .ask {
    float: right;
    width: 40px;
    height: 30px;
    line-height: 30px;
    color: #333;
    border: 1px solid #ccc;
    font-size: 12px;
    cursor: pointer;
    background-color: #ddd;
    text-align: center;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.chatbot .chatbot-message .ask:active {
    background-color: #ccc;
}

.bot, .me {
    margin-right: 3px;
    font-size: 10px;
}

.bot {
    color: #5cb85c;
}

.me {
    color: #47a3da;
}
 .bot-message table, .bot-message table th, .bot-message table td 
{
border: 1px solid white;
 border-collapse:collapse
}
.newitem::after {
  content: " ";
  background: transparent url('/imgs/newitem.png') no-repeat center center scroll;
  background-size: contain;
  width: 25px;
  height: 10px;
  position: absolute;
  top: 10px;
  right: 0px;
}
.icontbar > a > i {
	color: #fff;
	line-height: 50px;
	padding: 0;
	font-size: 18px;
	vertical-align: middle;
}

.icontbar > a
 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
}

/* Chatbot supporting css end */
/* New Switch Design */
.onoffswitch-container{
    margin-top:4px;
    margin-left:7px;
    display:inline-block
}
.onoffswitch{
    position:relative;
    width:50px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    margin-top:3px;
    margin-bottom:3px;
    margin-left:5px;
    display:inline-block;
    vertical-align:middle
}
.onoffswitch-checkbox{
    display:none
}
.onoffswitch-label{
    display:block;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #626262;
    border-radius:50px;
    border-color:#adadad #b3b3b3 #9e9e9e;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box
}
.onoffswitch-inner{
    width:200%;
    margin-left:-100%;
    display:block
}
.onoffswitch-inner:after,.onoffswitch-inner:before{
    float:left;
    width:50%;
    height:15px;
    padding:0;
    line-height:15px;
    font-size:10px;
    font-family:Trebuchet,Arial,sans-serif;
    font-weight:700;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.onoffswitch-inner:before{
    content:attr(data-swchon-text);
    text-shadow:0 -1px 0 #333;
    padding-left:7px;
    background-color:#3276b1;
    color:#fff;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.05);
    text-align:left
}
.onoffswitch-inner:after{
    content:attr(data-swchoff-text);
    padding-right:7px;
    text-shadow:0 -1px 0 #fff;
    background-color:#fff;
    color:#555;
    text-align:right;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05)
}
.onoffswitch-switch{
    width:19px;
    height:19px;
    margin:-2px;
    background:#fff;
    border:1px solid #9a9a9a;
    border-radius:50px;
    position:absolute;
    top:0;
    bottom:0;
    right:32px;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    background-color:#f4f4f4;
    background-image:-moz-linear-gradient(top,#fff,#eee);
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#eee));
    background-image:-webkit-linear-gradient(top,#fff,#eee);
    background-image:-o-linear-gradient(top,#fff,#eee);
    background-image:linear-gradient(to bottom,#fff,#eee);
    background-repeat:repeat-x;
    -webkit-box-shadow:1px 1px 4px 0 rgba(0,0,0,.3);
    box-shadow:1px 1px 4px 0 rgba(0,0,0,.3)
}
.onoffswitch-checkbox+.onoffswitch-label .onoffswitch-switch:before,.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch:before{
    content:"\f00d";
    color:#a90329;
    display:block;
    text-align:center;
    line-height:19px;
    font-size:10px;
    text-shadow:0 -1px 0 #fff;
    font-weight:700;
    font-family:FontAwesome
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch:before{
    content:"\f00c";
    color:#57889c
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner{
    margin-left:0;
    display:block
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch{
    right:0
}
.onoffswitch-switch:hover{
    background-color:#eee
}
.onoffswitch-switch:active{
    background-color:#eee;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05)
}
.onoffswitch-checkbox:checked:disabled+.onoffswitch-label .onoffswitch-inner:before,.onoffswitch-checkbox:disabled+.onoffswitch-label .onoffswitch-inner:after{
    text-shadow:0 1px 0 #fff;
    background:#bfbfbf;
    color:#333
}
.onoffswitch-checkbox:checked:disabled+.onoffswitch-label .onoffswitch-switch,.onoffswitch-checkbox:disabled+.onoffswitch-label .onoffswitch-switch{
    background-color:#f4f4f4;
    background-image:-moz-linear-gradient(top,#bfbfbf,#f4f4f4);
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#bfbfbf),to(#f4f4f4));
    background-image:-webkit-linear-gradient(top,#bfbfbf,#f4f4f4);
    background-image:-o-linear-gradient(top,#bfbfbf,#f4f4f4);
    background-image:linear-gradient(to bottom,#bfbfbf,#f4f4f4);
    box-shadow:none!important
}
.onoffswitch-checkbox:checked:disabled+.onoffswitch-label .onoffswitch-label,.onoffswitch-checkbox:disabled+.onoffswitch-label{
    border-color:#ababab #999 #878787!important
}
.onoffswitch-checkbox:checked+.onoffswitch-label{
    border-color:#3276b1 #2a6395 #255681
}
.onoffswitch+span,.onoffswitch-title{
    display:inline-block;
    vertical-align:middle;
    margin-top:-5px
}


/* Form Table */

.form-table {
    border: 1px solid #ddd;
}

.form-table tr td {
    padding: 10px;
    vertical-align: top;
}

.form-table tr:nth-child(2n+1) td {
    padding-bottom: 5px;
}

.form-table tr:nth-child(2n+2) td {
    padding-top: 5px;
}


.form-table tr:nth-child(4n+1) {
   background-color: #f2f2f2;
}

.form-table tr:nth-child(4n+2) {
    background-color: #f2f2f2;
}

.search-employee-container {
    width: 50%;
    margin: 0 auto;
    margin-top: 40px;
}

.search-employee {
    width: 100%;
    padding: 20px;
    border: 1px solid #ccc;
    border-top-color: #1968b3;
    border-top-width: 2px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}

.search-button input {
    margin-top: 0;
    float: right;
}

.advanced-search {
    text-align: right;
    font-size: 12px;
}

.search-title {
    color: #777;
    font-weight: 600;
    margin-bottom: 10px;
}


.recent-search-history {
    width: 50%;
    margin: 0 auto;
    margin-top: 30px;
}

.recent-search-history h5 {
    font-weight: normal;
    text-align: center;
    color: #47a3da;
}

.recent-search-history ul {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}

.recent-search-history ul li {
    display: inline-block;
    margin-top: 5px;
}

.recent-search-history ul li a {
   display: block;
   padding: 12px;
   background-color: #fefefe;
   max-width: 200px;
   box-shadow: 0 1px 5px 0.05px rgba(0, 0, 0, 0.2);
   border-radius: 9px;
   color: #888;
   margin: 0 4px;
}

.recent-search-history ul li a:hover {
    color: #eee;
    background: #47a3da;
}

.recent-search-history ul li a:active {
    color: #eee;
    background: #47a3da;
    box-shadow: 0 -1px 5px 0.05px rgba(0, 0, 0, 0.2);
}

.recent-search-history ul li a .empnamesearch  {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
    font-size: 10px;
    line-height: 14px;
}

.recent-search-history ul li a .empid  {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

@media (max-width:767px) {
    .search-employee-container {
       width: 100%;
    }

    .recent-search-history {
        width: 100%;
    }
}

@media (max-width:479px) {
    .search-button {
       margin-top: 15px;
    }
}
.popover {
    min-width: 220px;
    padding: 12px;
    text-align: center;
}

.popover.reverse {
    background-color: #334667;
    color: #fff;
}

.popover.reverse.bottom .arrow:after {
    content: '';
    border-bottom-color: #334667 !important;
}

.popover.reverse.top .arrow:after {
    content: '';
    border-top-color: #334667 !important;
}

.scontbar > a > i {
	color: #fff;
	line-height: 20px;
	padding: 0;
	font-size: 18px;
}

.link-image {
    height: 15px;
    border-radius: 50%;
    vertical-align: middle;
}
.card .card-header {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.card .card-header h2 {
    font-size: 16px;
    margin-bottom: 0;
}

.card .card-header h2 span {
    font-weight: normal;
    font-size: 10px;
    color: #666;
}


.card .card-header h4 {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 0;
}


.card .card-body {
    padding: 10px;
}
.img-circle-PMS
{
    background: #ddd;
    width: 50px;
    height: 55px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    background-position: -5px -5px;
    background-size: 40px;
    background-repeat: no-repeat
    }