@import url("myGatePlugins.css");
@import url("myGateComponents.css");
@import url("myGateIcons.css");
@import url("loading-pane.css");
@font-face {
    font-family: 'Stc-Font-light';
    src: url("../../Fonts/STC-Light.eot");
    src: url("../../Fonts/STC-Light.eot?#iefix") format("embedded-opentype"), url("../../Fonts/STC-Light.woff") format("woff"), url("../../Fonts/STC-Light.ttf") format("truetype"), url("../../Fonts/STC-Light.svg") format("svg");
}
@font-face {
    font-family: 'Stc-Font-regular';
    src: url("../../Fonts/STC-Regular.eot");
    src: url("../../Fonts/STC-Regular.eot?#iefix") format("embedded-opentype"), url("../../Fonts/STC-Regular.woff") format("woff"), url("../../Fonts/STC-Regular.ttf") format("truetype"), url("../../Fonts/STC-Regular.svg") format("svg");
}
@font-face {
    font-family: 'Stc-Font-bold';
    src: url("../../Fonts/STC-Bold.eot");
    src: url("../../Fonts/STC-Bold.eot?#iefix") format("embedded-opentype"), url("../../Fonts/STC-Bold.woff") format("woff"), url("../../Fonts/STC-Bold.ttf") format("truetype"), url("../../Fonts/STC-Bold.svg") format("svg");
}
.portlet-title {
    display: none;
}
.newclass {
    min-height: 274px;
}
.nwclass {
    min-height: 274px;
    overflow: hidden;
}

.alert {
    padding: 5px 15px;
    margin-bottom: 20px;
    margin-top: 10px;
}
.msgoverlaykud {
    position: absolute;
    z-index: 1;
    padding: 8px;
    opacity: 0.9;
    margin: -24px;
    font-size: 15px;
    width: 100%;
    margin-top: -55px;
}
.msgoverlay {
    position: absolute;
    z-index: 1;
    padding: 8px;
    opacity: 0.9;
    margin: -26px;
    font-size: 15px;
    width: 100%;
}
.msgoverlayteam {
    z-index: 999999;
    padding: 8px;
    opacity: 0.9;
    font-size: 15px;
    width: 100%;
}
.alert-success {
    color: #467F12;
    background-color: #DBF0B7;
    border-color: #DBF0B7;
}
.alert-info {
    color: #004990;
    background-color: #B5E1F7;
    border-color: #B5E1F7;
}
.alert-warning {
    color: #1c252c;
    background-color: #ffdd40;
    border-color: #ffdd40;
}
.alert-danger {
    color: #D3000F;
    background-color: #ffafbf;
    border-color: #ffafbf;
}
.overlay {
    font-size: 28px;
    border-radius: 10px;
    text-align: center;
    color: #ffffff;
    margin-top: -110px;
    z-index: 999999;
    padding: 25px;
    height: 100%;
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
}
.no-border-bottom {
    border-bottom: 0px;
}
.badge-stc-lrg {
    min-width: 10px;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    font-size: 16px;
    padding: 13px 2px;
}
.bl1 {
    border-right: 1px solid #e8e8e8;
}
.br1 {
    border-left: 1px solid #e8e8e8;
}
.employee-img {
    border: 1px solid #eeeeee;
}
.height-fixed{height: 10px;}
.circle-for-attand{    width: 15px;    height: 15px;    padding-top: 1px;}
.grey .btn-border,
.grey .btn-drop {
    background-color: #F8F6F2 !important;
    border: 1px solid #ffffff;
    border-right: 1px #F8F6F2;
    border-radius: 5px;
}
#dashboardCalendar .fc-row.fc-widget-header {
    border: none;
}
.size-17 {
    font-size: 17px !important;
}
.size-15 {
    font-size: 15px !important;
}
body {
    background: #F2F4F8;
}
.cursar {
    cursor: pointer;
}
.employee-details .list-unstyled li:first-child {
    font-family: Stc-Font-bold;
}
.bold{
	font-weight: bold;
}
input[type=checkbox]:checked {
    /* margin-top: 20px; */
}
.employee-details2 .list-unstyled {
    margin-left: 0px;
}
.badge-only {
    margin-left: 0px !important;
}
.jqplot-xaxis-tick {
    /*top: 0px;
	right: 5px;
	direction:rtl;
	vertical-align: top;
	white-space: nowrap;
	
	max-width: 70px;
	*/
}
.loadingsmall {
    margin-left: 114px;
}
.jqplot-xaxis {
    direction: ltr;
}
.label.head.ng.txtlimit {
    height: 30px;
}
.scrollbar-dynamic {
    max-height: 300px;
    overflow: auto;
}
.profilewidth {
    width: 885px !important;
    margin-right: -29px;
}
#popupvischck {
    text-decoration: none;
    color: #111111;
}
}
.loader_img {
    width: 100%;
    position: absolute;
    height: 51px;
    overflow: hidden;
    z-index: 999;
    background: white;
}
.btn-danger-el+div {
    dispaly: none !important;
}
.stc-profile-designation .month-year {
    left: 0px !important;
    /*over riding masoods css*/
}
.stc-profile-designation .stc-stats .stc-btn-default {
    padding: 0 6px !important;
    /*over riding masoods css*/
}
.progress-bar-vertical {
    width: 10px !important;
    min-height: 42px !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-left: 3px;
    float: right;
}
.stc-btn {
    padding: 10px 0px 0px 0px !important;
    margin: 10px 0px 0px 0px !important;
}
.stc-btn.team{
    position: absolute;
    bottom: 41px;
    transform: translate(-50%, 0%);
    left: 50%;
}
.mediakudos {
    margin: 0px auto;
    padding-top: 30px;
    padding-right: 25px;
}
.height-37 {
    height: 37px !important;
}
.kudos-icon1 {
    margin-top: 10px;
}
.tablrit {
    display: table-cell;
    padding: 0px;
    border-right: none;
}
.margin-0 {
    margin: 8px 0px 0px 0px !important;
}
.padding-left-0 {
    padding-right: 0px !important;
}
.padding-left-10 {
    padding-right: 0px;
}
.margin-left-10 {
    margin-right: 10px;
}
.margin-left-m10 {
    margin-right: -10px;
}
.padding-top-5 {
    padding-top: 5px;
}
.padding-top-0 {
    padding-top: 0px;
}
.padding-bottom-5 {
    padding-bottom: 5px;
}
.border-radius-5 {
    border-radius: 5px !important;
}
.border-radius-left-5 {
    border-radius: 0px 5px 5px 0px !important;
}
.border-radius-right-5 {
    border-radius: 5px 0px 0px 5px !important;
}
.left-m10 {
    right: -10px !important;
}
.padding-left-20 {
    padding-right: 20px;
}
.padding-lr-15 {
    padding: 15px 0px;
}
.padding-lr-m0 {
    padding-right: 0px;
    padding-left: 0px;
}
.padding-lr-m15 {
    padding-right: -15px !important;
    padding-left: -15px !important;
}
.margin-bottom-30 {
    margin-bottom: 30px;
}
.margin-top-m10 {
    margin-top: -10px !important;
}
.margin-top-m20 {
    margin-top: -20px;
}
.margin-top-m30 {
    margin-top: -30px;
}
.margin-lr-0 {
    margin-right: 0px;
    margin-left: 0px;
}
.margin-lr-m10 {
    margin-right: -10px !important;
    margin-left: -10px !important;
}
.margin-lr-m15 {
    margin-right: -15px !important;
    margin-left: -15px !important;
}
.margin-top-5 {
    margin-top: 5px;
}
.padding-top-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}
.padding-tb-20 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.padding-bottom-m30 {
    padding-bottom: -30px !important;
}
.margin-top-30 {
    margin-top: 30px;
}
.border-grey {
    border: 1px solid #ccc !important;
}
.height-30 {
    height: 30px;
}
.chartsatt {
    height: 300px;
    /*padding-right: 15px;
    padding-left: 15px;*/
}
.btnspad {
    padding: 4px 12px;
}
.form-control {
    font-family: STC-Regular;
}

.med .btn-drop {
    padding: 4px 9px !important;
}
.lrg .btn-drop {
    font-family: STC-Regular;
}
.table-stc>thead>tr>th {
    font-family: STC-Regular;
}
.med .btn-drop {
    border-right: 1px solid #ebf1f6 !important;
}
.stc-my-team-employee-col-1 .main-badge-stc {
    bottom: 0%;
    border: 2px solid #ffffff;
}
.table-stc>thead>tr>th {
    box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, .04);
    font-size: 13.5px;
    letter-spacing: 0.5px;
}
.stc-my-team-employee-col-1 .main-badge-stc {
    right: -6px;
    bottom: 5px;
    width: 27px;
    height: 27px;
}
.stc-my-team-employee-row .img-circle {
    height: 48px;
    width: 48px;
    border: 1px solid #dddddd;
    margin-left: 5px;
}
.stc-my-team-employee-row {
    margin-left: -15px !important;
}
.my-team-attendance-row {} .modal-dialog {
    max-height: 350px;
}
.modal-body-kud {
    position: relative;
    overflow-y: auto;
    /*max-height: 400px;*/
    
    padding: 15px;
}
.employee-details2 .list-unstyled li {
    white-space: nowrap;
    width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.employee-details .list-unstyled li {
    white-space: nowrap;
    /* width: 115px; */
    
    overflow: hidden;
    text-overflow: ellipsis;
}
.employee-details .badge-stc {
    margin-top: -5px;
}
.scrolcontrol {
    height: 181px;
    overflow-x: hidden;
    overflow-y: auto;
}
.skills {
    max-height: 150px;
    overflow-x: hidden;
}
.benefits-list .item-img img {
    border-radius: 5px !important;
}
.fa-pencil-square {
    margin-left: 5px;
}
/*calender componenet override*/

.popover-inner .popover-content h4 {
    display: inline;
    font-weight: bold;
    border-left: #EBF1F6 solid 1px;
    padding: 0 12px 0px 10px;
    margin-left: 18px;
}
.popover .popover-inner .popover-content h5 {
    display: inline;
}
.popover-content h5 {
    /* text-align: center;  i made this to enhance the look -mostafa*/
}
.vacationpading {
    padding-right: 15px;
    padding-bottom: 10px;
    padding-top: 10px;
}
.stc-pill .btn.active:last-child:after {
    border-width: 14px;
    border-color: #4F008C;
    right: -20px;
    height: 100%;
}
/*attendance*/

.stc-attendance {
    font-size: 39px;
    color: #03DC4D;
    font-weight: bold;
    margin-top: 44px !important;
    text-align: center;
}
.stc-attendance p {
    font-size: 18px;
    color: #8e9aa0;
    font-family: STC-Regular;
}
.weeks {
    display: inline-block;
    color: #8e9aa0;
    position: absolute;
    top: 42px;
    width: 10px;
    font-size: 12px;
    font-family: Stc-Font-bold;
}
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .weeks {
        margin-right: -10px;
    }
    #BigEventContainer .dropdown {
        margin-top: 0 !important
    }
}
.stc-attendance,
.stc-attendance-progress {
    /* margin: 30px 0; */
}
.stc-events button {
    color: #8e9aa0;
    font-size: 14px;
}
.size-13 {
    font-size: 13px;
}
.stc-objective {
    margin: 5px 0;
}
.right-border {
    border-left: 1px solid #f5f1f6;
}
.left-border {
    border-right: 1px solid #f5f1f6;
}
.top-border {
    border-top: 1px solid #f5f1f6;
}
.bottom-border {
    border-bottom: 1px solid #f5f1f6;
}
.full-border {
    border: 1px solid #f5f1f6;
}
.margin-hr {
    margin-right: -20px;
    margin-left: -20px;
    margin-top: 0px;
    margin-bottom: 0px;
}
.center-me {
    height: 50%;
    float: none !important;
    margin: 0 auto;
    text-align: center;
}
.userInformationApp {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #f5f1f6
}
.userInformationApp h3 {
    display: inline-block;
    width: 100%;
    float: none
}
.userInformationApp img {
    margin: 10px 0;
    width: 150px;
    height: 150px;
    border: 1px solid #f5f1f6;
    padding: 2px
}
.userInformationApp ul {
    padding: 0 0px;
    margin: 10px 15px 0px 0px;
}
.userInformationApp li {
    list-style: none;
    display: inline-block;
    width: 100%;
    margin-bottom: -5px;
    text-align: right;
}
.userInformationApp li span {
    display: inline-block;
    vertical-align: text-top
}
.userInformationApp label {
    margin-bottom: 2px;
    font-size: 13px;
}
.userInformationApp div {
    margin-bottom: 5px;
    /*min-height: 180px;*/
    
    padding: 0px;
}
/*.userInformationApp .is-table-row div:nth-child(2),
.userInformationApp .is-table-row div:nth-child(3) {
    border-right: 1px solid #f5f1f6
}
*/

.userInformationApp .social {
    margin: 2px 0;
    display: inline-block;
    width: 100%;
    padding: 0
}
.userInformationApp .social li {
    float: right;
    list-style: none
}
.userInformationApp .social .fa {
    color: #4F008C;
    margin: 5px;
    font-size: 22px
}
.userInformationApp .border-right {} @media only screen and (max-width: 768px) {
    .is-table-row {
        display: block
    }
    .is-table-row [class*=col-] {
        display: block;
        float: right;
        min-height: auto
    }
    .userInformationApp span {
        /*  display: inline-block */
    }
    .userInformationApp img {
        margin: 10px auto;
        width: 120px;
        height: 120px;
        min-width: 120px;
        min-height: 110px
    }
    .userInformationApp .social {
        margin: 0 auto
    }
    .userInformationApp .is-table-row div:nth-child(2) span {
        /* display: inline-block;
        width: 100%*/
    }
    .userInformationApp .is-table-row div:nth-child(2) {
        border-bottom: 0 solid #f5f1f6;
        border-left: 0
    }
    .userInformationApp .is-table-row div:nth-child(3),
    .userInformationApp .is-table-row div:nth-child(4) {
        border-top: 0px solid #f5f1f6;
        border-left: 0;
        padding-top: 10px
    }
    .userInformationApp .is-table-row div:nth-child(3) {
        border-left: 0px solid #f5f1f6
    }
    .userInformationApp .is-table-row div:nth-child(1),
    .userInformationApp .is-table-row div:nth-child(2) {
        text-align: center
    }
}
@media only screen and (max-width: 450px) {
    .userInformationApp .social {
        width: 115px
    }
    .userInformationApp .social .fa {
        font-size: 30px
    }
}
.portlet>.title {} .fc-unthemed thead,
.fc-head-container.fc-widget-header {
    border: none !important;
}
.dashboard-calendar .fc-left {
    position: absolute;
    top: -5px;
    right: 100px;
}
.dashboard-calendar .fc-left .fc-state-active {
    border: 1px solid #ff375e;
    color: #ff375e;
    outline: none;
}
.position-relative {
    position: relative;
}
.item-type-move .item-info .headline,
.item-type-move .item-info .date {
    width: 100%;
    position: absolute;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    padding: 0 20px;
}
.item-type-move .item-info .headline {
    font-size: 35px;
    top: 5px;
    margin-top: -13px;
    text-shadow: -2px 2px #000;
}
.margin-left-m15 {
    margin-right: -15px;
}
.txtlimiteml {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 120px;
}
.txtlimit {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 170px;
    height: 25px;
}
.txtlimit50 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 120px;
}
.txtlimitsub {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 220px;
}
.txtfavlimit {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;
}
.txtkudoslimit {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100px;
}
.stc-gauge {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.stc-gauge canvas {
    margin: 0 auto;
    display: block !important;
}
.stc-gauge .gauge-icon {
    position: absolute;
    top: 51px;
    font-size: 48px;
    left: 50%;
    transform: translateX(-50%);
}
.stc-gauge .sad-icon {
    position: absolute;
    top: 50px;
    font-size: 65px;
    left: 50%;
    transform: translateX(-50%);
}
.stc-gauge .gauge-number {
    position: absolute;
    top: 120px;
    font-size: 38px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0px;
}
.stc-gauge .gauge-label {
    position: absolute;
    top: 150px;
    font-size: 15px;
    left: 50%;
    transform: translateX(-50%);
}
.text-muted.gauge-label {
	font-size: 15px;
    text-align: center;
    padding: 0;
    margin-top: -5px;
    margin-bottom: -10px;
}
.stc-gauge .gauge-icon.punctiality-icon {
    top: 65px;
    font-size: 45px;
}
.counterKudo span {
    top: -12px;
}
.counterKudo span {
    font-size: 27px;
    color: #8e9aa0;
    position: relative;
    right: 2px;
    padding-top: 10px;
}
.last-kudo {
    color: #8e9aa0;
    font-size: 12px;
}
.kudo-thumb {
    margin: 0;
    font-size: 100px;
    /*position: absolute;
    top: -30px;
    font-size: 130px;
    left: 50px;*/
}
.obj-item {
    padding: 7px;
    border-radius: 5px;
    margin-left: 0px;
    width: 100%;
}
.skill-item {
    padding: 2px 5px;
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
}
.border-radius {
    border-radius: 6px;
}
[class^="mygate-icon-"],
[class*=" mygate-icon-"] {
    vertical-align: middle;
}
.no-underline {
    text-decoration: none !important;
}
.componenet-header {
    margin-bottom: 10px;
    margin-top: 0px;
}
.display-inline-block {
    display: inline-block;
}
.favorite-item {
    margin-bottom: 15px;
    padding-right: 15px;
    opacity: 1;
    position:relative;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}
.remove-favorite{
	    position: absolute;
    left: 0;
    
    display: none;
}
.favorite-item:hover .remove-favorite{
	display: block;
}
.modal-body .nano{
	height: 70vh;
}
#insurance-limits.date{
	top: 45px !important
}
.favorite-item.deleted {
    opacity: 0;
}
.favorite-item a {
    font-size: 14px;
}
.favorite-item i {
  
}
.kudos-component .stc-progress-bar {
    margin: 59px 0;
}
.display-inline-block {
    display: inline-block;
}
.stc-objective .progress {
    height: 15px;
}
[class^="mygate-icon-"] * {
    font-family: 'mygate-icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.stc-black {
    color: #212121;
}
p.timing {
    color: #5d5d5d;
    font-size: 12px;
    margin-bottom: 2px;
    margin-top: -5px;
}
.reminder-item {
    margin-bottom: 5px;
}
.reminder-item .media-left {
    padding-left: 10px;
}
.stc-btn-default {
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
}
.stc-employee {
    border: 1px solid #e1e1e0;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
}
.stc-employee .employee-image {
    width: 70px;
}
.stc-employee .sub-employees-list {
    margin-top: 10px;
}
.stc-employee .sub-employees-list>div {
    width: 28%;
    float: right;
    margin-left: 5%;
    margin-bottom: 7px;
}
.stc-employee .weeks {
    top: auto !important;
    bottom: 35px;
}
.stc-employee .employee-gauge {
    display: inline-block;
    position: relative;
    margin-right: 10px;
}
.stc-employee .employee-gauge canvas {
    margin: 0 auto;
    display: block !important;
}
.stc-employee .employee-gauge .gauge-precentage {
    position: absolute;
    top: 17px;
    transform: translateX(-50%);
    right: 50%;
}
.stc-employee .employee-indicators {
    margin-top: 15px;
}
.stc-employee .employee-kudo {
    position: absolute;
    left: 25px;
    top: 10px;
}
.stc-employee .employee-kudo i {
    font-size: 22px;
    vertical-align: bottom;
    margin-right: 5px;
}
.stc-pill {
    border: 1px solid #4F008C;
    border-radius: 5px;
}
.stc-pill .btn {
    border: none;
    color: #4F008C;
}
.stc-pill .btn:first-child {
    /* margin-right: 20px; */
}
.stc-pill .btn.active {
    box-shadow: none;
    background: #4F008C !important;
    color: white;
}
/* .stc-pill .btn.active:after {
	width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px;
    border-color: #4F008C;
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
} */

.dropdown-button-container i {
    font-size: 20px;
    vertical-align: bottom;
}
.status-pane {
    background: #4F008C;
    color: white;
    display: inline-block;
    width: 100%;
    padding-left: 10px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 4px;
    border-radius: 5px;
    margin-bottom: 20px;
    min-height: 75px;
}
.status-pane>div:first-child {
    font-size: 14px;
}
.status-pane>div:last-child,
.status-pane .total-minutes {
    font-size: 30px;
}

.attendance-summary-label {
    font-size: 9px;
}
.attendance-summary-number {
    display: inline-block;
    font-size: 20px;
}
.dropdown-menu>li>a {
    font-size: 14px;
    padding: 7px 15px;
}
.panelgrey-bg {
    background: white !important;
}
.margin-right-20 {
    margin-left: 20px;
}
.btn-default:hover {
    background: white !important;
}
.title.portlet-topper {
    /*display: none;*/
    /* please dont change for admin use**/
}
.no-border {
    border: none !important;
}
#dashboardCalendar .fc-left .fc-button-group {
    display: none !important;
}
.fc-icon-right-single-arrow:after {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f0d9";
    top: -41%;
    font-size: 26px;
}
.fc-icon-left-single-arrow:after {
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f0da";
    top: -41%;
    font-size: 26px;
}
#dashboardCalendar .fc-day-header.fc-widget-header {
    border-right-width: 0;
    border-color: transparent !important;
    text-align: right;
    padding-right: 15px;
    font-weight: 400;
}
.inline-dropdown {
    padding-top: 3px;
    padding-right: 5px;
}
.counterKudo span {
    position: relative !important;
    display: block;
    font-weight: normal;
}
.kudos-component .stc-progress-bar {
    margin: 35px 0;
}
.display-table-cell {
    display: table-cell;
    width: 1000px;
}
.counterKudo {
    position: relative;
    /*top: 20px;*/
}
.counterKudo {
    color: #5D5D5D;
    font-weight: 700;
    font-size: 62px;
}
.kudo-thumb {
    text-align: left;
    padding-left: 20px;
}
.kudos-icon {
    margin-top: 40px;
}
.my-timeline-item {
    padding: 10px;
    border-radius: 7px;
    position: relative;
    width: 80%;
    margin-right: 25px;
    margin-bottom: 9px;
    background-color: #f3f3f1;
}
.my-timeline-item:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(225, 225, 224, 0);
    border-left-color: #f3f3f1;
    border-width: 7px;
    margin-top: -8px;
}
.my-timeline-item:before {
    left: 104.5%;
    top: 50%;
    display: inline-block;
    content: " ";
    height: 12px;
    width: 12px;
    margin-top: -7px;
    /* margin-left: -27px; */
    
    border-radius: 50%;
    position: absolute;
    background: #C3C3C3;
}
.my-timeline-item .media-right {
    vertical-align: middle;
}
.my-timeline-item:first-child .media:after {
    /*right: 106.5%;
				    top: 50%;
				    content: " ";
				    height: 35px;
				    width: 3px;
				    position: absolute;
				    display: inline-block;
				    background: #e1e1e0;
				     border-width: 9px; 
				    margin-top: -35px;*/
}
.my-timeline-item:first-child .media:before {
    /* right: 105%;
			    top: 50%;
			    content: " ";
			    height: 3px;
			    width: 15px;
			    position: absolute;
			    display: inline-block;
			    background: #e1e1e0;
			    border-width: 9px; 
			    margin-top: -35px;*/
}
.my-timeline-item .media:after {
    left: 106.2%;
    top: 50%;
    content: " ";
    height: 87px;
    width: 3px;
    position: absolute;
    display: inline-block;
    background: #C3C3C3;
    /* border-width: 9px; */
    
    margin-top: -86px;
}
.my-timeline-container {
    height: 150px;
    overflow: hidden;
    position: relative;
    right: -4px;
}
.timeline-controls,
.stc-objective-controls {
    position: absolute;
    left: -7px;
    top: 55%;
    transform: translateY(-50%);
    z-index: 10;
    text-align: center;
}
.timeline-controls a,
.stc-objective-controls a {
    font-size: 13px !important;
}
.timeline-controls i,
.stc-objective-controls i {
    font-size: 27px;
    display: block;
    cursor: pointer;
}
.timeline-controls i.has-more,
.stc-objective-controls i.has-more {
    color: #3b6795
}
.mytimeline-control-container,
.stc-objective {
    position: relative;
}
.my-timeline-item:last-child {
    margin-bottom: 0 !important;
}
.stc-objective .obj-item {
    width: 90%
}
.stc-objective .obj-item div {
    padding-left: 0;
    padding-right: 5px;
}
.stc-objective .obj-item div .fa {
    margin-top: 5px;
}
.progress-bar-vertical {
    zoom: 1
}
.bg-gray {
    background-color: #f3f3f1;
}
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
}
.col-xs-15 {
    width: 20%;
    float: right;
}

.col-xs-18,
.col-sm-18,
.col-md-18,
.col-lg-18 {
    position: relative;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
}

@media ( min-width: 768px) {
	.col-md-18 {
    width: 12.5%;
    float: right;
}
    .col-sm-15 {
        width: 20%;
        float: right;
    }
    .stc-profile-designation { margin-right:-8px;}
}
@media ( min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: right;
    }
    .stc-profile-designation .stc-fb-like {
    	top:70px;	
    	    text-align: left;
    position:absolute; 
    left: 10px;
    top: 5px;
    }
}
@media ( min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: right;
    }
}
/* entire container, keeps perspective */

.flip-container {
    perspective: 1000px;
    transform-style: preserve-3d;
}
/*  UPDATED! flip the pane when hovered */
.front,
.back,
.flipper {
    width: 100%;
    height: 100%;
    min-height: 75px;
    position: relative;
}
.flipper .back{
    position: absolute;
    top: 0;
    left: 0;
    }
    .flipper .back .status-pane {
    transition: opacity 0.13s linear;
    opacity: 0;
}
.flipper:hover .back .status-pane {
    opacity: 1;
}
/* hide back of pane during swap */

/* 
	Some vertical flip updates 
*/

.vertical.flip-container {
    position: relative;
}
.vertical .back {
    transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
    transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
    transform: rotateX(180deg);
}
/*reminder style*/

.reminder-icon {
    font-size: 18px !important;
}
.strikethrough {
    display: inline-block;
    position: relative;
}
.strikethrough:after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    margin-top: -0.5em;
    background: black;
    transform-origin: center right;
    animation: strikethrough 1s 0.5s cubic-bezier(.55, 0, .1, 1) 1;
    transition: transform 0.5s cubic-bezier(.55, 0, .1, 1);
}
/* Little hover effect */

.strikethrough:hover:after {
    transform: scaleX(0);
    transform-origin: center left;
}
/* Keyframes for initial animation */

@ keyframes strikethrough {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}
.show-this-on-hover {
    display: none;
}
.show-on-hover:hover .show-this-on-hover {
    display: block !important;
}
.cursor-pointer {
    cursor: pointer;
}
.position-relative {
    position: relative;
}
.portlet-action-container {
    position: absolute;
    top: 0;
    left: 5px;
    font-size: 14px;
}
.portlet-action-container .contents,
.portlet-action-container .contents .inner-form {
    display: inline-block;
}
.portlet-action-container .contents {
    white-space: nowrap;
}
.portlet-action-container .contents .inner-form {
    width: 0%;
    overflow: hidden;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
    float: left;
}
.portlet-action-container .contents .inner-form.expanded {
    width: 100%;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, .5);
    border-radius: 3px;
    border: 4px solid #fff;
}
#Kudosform .contents,
#Kudosform .contents .inner-form {
    display: inline-block;
}
#Kudosform .contents {
    white-space: nowrap;
}
#Kudosform .contents .inner-form {
    width: 0%;
    overflow: hidden;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
    float: right;
}
#Kudosform .contents .inner-form.expanded {
    width: 100%;
}
#Kudosform .inline-add-form {
    background: white;
    position: absolute;
    top: 3px;
    right: 100px;
    width: 50%;
    display: inline;
}
/*
@keyframes animate-width {
    from {width: 0;}
    to {width: 100%;}
}*/

.animate-width {
    animation-name: animate-width;
    width: 0;
    animation-duration: 0.5s;
}
.benefits-list .item {
    margin-bottom: 10px;
    margin-left: 5px;
}
.btn-pink-bordered-pf {
    background-color: transparent;
    color: #ffffff;
    font-weight: bold;
    font-family: "Stc-Font-regular";
    border: 1px solid #ff375e;
    line-height: 1.3;
}
.btn-pink-bordered-pf:hover,
.btn-pink-bordered-pf:focus {
    background-color: #ff375e;
    color: #ffffff;
}
.no-margin {
    margin: 0 !important
}
.gauge-notification {
    /*display: inline-block;*/
    
    width: 100%;
    /*min-height: 20px;*/
    
    margin-top: 15px;
}
.btn-default:hover {
    background-color: #4F008C !important;
    color: #fff;
}
.inline-add-form {
    background: white;
    position: relative;
    top: -12px;
    width: 100%;
    display: inline-block;
}
.inline-add-form input[type='text'] {
    border-width: 0 0 3px 0 !important;
    box-shadow: none;
    width: 145px !important;
}
.add-form-icon {
    font-size: 18px;
}
/*calendar style*/

.btn.btn-calendar,
.btn.btn-calendar:hover,
.input-group-btn .btn.btn-calendar {
    padding: 0 !important;
    border: none;
    background: none !important;
    color: #4F008C !important;
    font-size: 20px;
    font-size: 20px;
    left: 7px;
    position: absolute;
    z-index: 10;
}
.objective-details {
    height: 160px !important;
}
.uib-day button,
.uib-month button,
.uib-year button {
    min-width: 100%;
    background-color: #eee !important;
    border: 1px solid #fff;
    border-radius: 0;
}
.uib-daypicker tr:nth-child(2) th {
    background-color: #4F008C;
    color: #fff;
    border: 1px solid #fff;
    margin-top: 12px !important;
    position: relative;
}
.uib-daypicker tr:nth-child(1) th button {
    border-radius: 0;
}
.uib-daypicker .btn-info.active {
    background-image: none;
    color: white !important;
    background: #ff375e !important;
}
.uib-daypicker .btn-default.active {
    border-color: #ff375e;
}
tr th .uib-left {
    border: none !important;
}
tr th .uib-left i {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
}
tr th .uib-left i::before {
    content: "\f053";
}
tr th .uib-right {
    border: none !important;
}
tr th .uib-right i {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
}
tr th .uib-right i::before {
    content: "\f054";
}
/*calendar style*/

.no-underline {
    text-decoration: none !important;
}
.comment-item {
    /* border-bottom: 1px solid #eee;*/
    
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.comment-item:last-child {
    border: 0;
    margin-bottom: 0;
}
.comment-item h4 {
    font-size: 18px !important;
}
.comment-item .media .img-circle {
    width: 100px;
    height: 100px;
    border: 1px solid #f3f3f1;
    padding: 3px;
    background: #fff;
    max-width: inherit
}
* {
    outline: none !important
}
.who-kudo-icon {
    font-size: 36px;
    margin-left: 5px;
}
.portlet-status {
    font-size: 28px;
}
.stc-objective .progress-bar {
    border-radius: 7px;
}
.progress {
    border-radius: 7px;
}
.fc-event {
    border-radius: 15px;
    padding-right: 5px;
    padding-top:2px;
    border: none;
}
.fc-row .fc-content-skeleton tbody td {
    padding: 10px 0;
}
.fc-event[event-type="personal"] {
    background-color: #11b46e;
}
.fc-event[event-type="stc"]{
    background-color: #a236ee;
}
.fc-event[event-type="outlook"] {
    background-color: #0982c1;
}
.fc-event[event-type="3"] {
    background-color: #ff6a39;
}
.fc-event[event-type="4"] {
    background-color: transparent;
    padding-right: 15px;
}
.fc-event[event-type="4"] .fc-content {
    display: inline-block;
    color: #414142;
}
.fc-event[event-type="4"]:before {
    content: '';
    background: #0982c1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: text-top;
    margin-left: 7px;
}
.popover {
    max-width: 325px !important;
    box-shadow: 0px 3px 7px rgba(33, 71, 111, .2);
}
.size-25 {
    font-size: 25px !important;
}
.close-popover {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 18px;
    margin: 0 !important;
}
.create-event-dropdown {
    width: 100px;
    display: inline-block;
}
input[type=radio].css-checkbox+label.css-label {
    white-space: pre;
}
.userInformationApp {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #f5f1f6
}
.userInformationApp h3 {
    display: inline-block;
    width: 100%;
    float: none
}
.userInformationApp img {
    margin: 10px 0;
    width: 120px;
    height: 120px;
    border: 1px solid #f5f1f6;
    padding: 2px
}
.userInformationApp ul {
    padding: 0 0px;
    margin: 10px 15px 0px 0px;
}
.userInformationApp li {
    list-style: none;
    display: inline-block;
    width: 100%;
    margin-bottom: -5px;
    text-align: right;
}
.userInformationApp li span {
    display: inline-block;
    vertical-align: text-top
}
.userInformationApp label {
    margin-bottom: 2px;
}
.userInformationApp div {
    margin-bottom: 5px;
    /*min-height: 180px;*/
    
    padding: 0px;
}
/*.userInformationApp .is-table-row div:nth-child(2),
.userInformationApp .is-table-row div:nth-child(3) {
    border-right: 1px solid #f5f1f6
}
*/

.userInformationApp .social {
    margin: 2px 0;
    display: inline-block;
    width: 100%;
    padding: 0
}
.userInformationApp .social li {
    float: right;
    list-style: none
}
.userInformationApp .social .fa {
    color: #4F008C;
    margin: 5px;
    font-size: 22px
}
.userInformationApp .border-right {} @media only screen and (max-width: 768px) {
    .is-table-row {
        display: block
    }
    .is-table-row [class*=col-] {
        display: block;
        float: right;
        min-height: auto
    }
    .userInformationApp span {
        /*  display: inline-block */
    }
    .userInformationApp img {
        margin: 10px auto;
        width: 150px;
        height: 150px;
        min-width: 120px;
        min-height: 110px
    }
    .userInformationApp .social {
        margin: 0 auto
    }
    .userInformationApp .is-table-row div:nth-child(2) span {
        /* display: inline-block;
        width: 100%*/
    }
    .userInformationApp .is-table-row div:nth-child(2) {
        border-bottom: 0 solid #f5f1f6;
        border-left: 0
    }
    .userInformationApp .is-table-row div:nth-child(3),
    .userInformationApp .is-table-row div:nth-child(4) {
        border-top: 1px solid #f5f1f6;
        border-left: 0;
        padding-top: 10px
    }
    .userInformationApp .is-table-row div:nth-child(3) {
        border-left: 0px solid #f5f1f6
    }
    .userInformationApp .is-table-row div:nth-child(1),
    .userInformationApp .is-table-row div:nth-child(2) {
        text-align: center;
        margin: auto;
    }
}
@media only screen and (max-width: 450px) {
    .userInformationApp .social {
        width: 115px
    }
    .userInformationApp .social .fa {
        font-size: 30px
    }
}
.benefits-list .newinsurance p {
    margin: 0 0 0px;
    font-family: 'Stc-Font-bold' !important;
    color: rgba(22, 23, 18, 0.75);
    text-rendering: optimizeLegibility;
}
.benefits-list .newinsurance {
    font-size: 18px;
    top: 15px;
    z-index: 100;
    padding: 45px 30px 10px 10px;
    position: absolute;
    width: 100%;
}
.benefits-list .newinsurance .lbl {
    font-family: 'Stc-Font-bold' !important;
    font-size: 13px;
    padding: 0px;
}
.benefits-list .newinsurance span.big {
    font-family: 'Stc-Font-bold' !important;
    font-size: 18px;
    padding: 0px;
}
/* a.offer.ng-binding.ng-scope:after {
	content: "\f0a9";
	padding-left: 5%;
	text-decoration: none;
	font-family: FontAwesome;
} */

a.offer {
    margin-right: 12px;
    display: block;
    color: #fff;
    text-decoration: none;
}
a.offer:hover {
    color: #ff375e;
    text-decoration: none;
}
/* arrow box for the kudos counter on-click of the Give kudos function */

.arrow_box {
    display: inline-block;
    position: relative;
    background: #fff;
    border: 1px solid #ccc;
    padding: 4px 8px !important;
    border-radius: 3px;
    margin-right: 5px;
}
.arrow_box:after,
.arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}
.arrow_box:before {
    border-color: rgba(204, 204, 204, 0);
    border-left-color: #ccc;
    border-width: 7px;
    margin-top: -7px;
}
.button-bottom {
    position: absolute;
    bottom: 10px;
    width: 100%;
    right: 0;
}
.vacation-day-container {
    padding-bottom: 40px;
}
.empty-state-icon {
    font-size: 80px !important;
    margin: 20px;
}
.empty-state-text {
    color: #808080 !important;
}
.kudo-container {
    margin: 25px auto !important;
}
.item.item-type-move:hover .item-hover {
    opacity: 1;
}
.benefits-list .item-type-move .item-info .date {
    top: 59px !important;
}
.benefits-list .item-type-move .item-info .date {
    margin-right: 12px;
}
#dropdownMenu1:focus,
#dropdownMenu1:hover,
#dropdownMenu1:visited,
#dropdownMenu1:active {
    color: #fff;
}
.open>#select-date.dropdown-menu {
    display: block;
    height: 180px;
    overflow-y: scroll;
}
#payslip-body p {
    color: #d4d4d4;
    margin-bottom: 0px;
}
#payslip-body h3 {
    margin-top: 5px;
}
#total-earnings .name,
#total-earnings .amount {
    font-size: 20px;
    margin-top: 10px;
}
#total-deductions .name,
#total-deductions .amount {
    font-size: 20px;
    margin-top: 10px;
}
.portlet-title {} div#phoneType-icon {
    font-size: 22px;
    margin-top: -7px;
}
#Kudosform a.mygate-icon-delete.cursor-pointer:hover {
    text-decoration: none !important;
    opacity: 0.7;
}
.mygate-icon-delete{
	text-decoration: none !important;
}
.fadein-show-hide {
    opacity: 1;
    -webkit-transition: opacity linear 0.2s;
    transition: opacity linear 0.2s;
}
.fadein-show-hide.ng-hide {
    opacity: 0;
}
#header {
    opacity: 0.7;
}
button#EventView-dropdown {
    font-size: 18px;
    margin-top: -3px;
    font-weight: 500;
}
.popover.top {
    border-bottom: 4px solid #d5d5d5;
}
.popover.top>.arrow {
    border-top-color: #d5d5d5;
    border-top-color: #d5d5d5;
}
.popover.top>.arrow:after {
    border-top-color: #d5d5d5;
}
.popover.bottom {
    border-top: 4px solid #d5d5d5;
}
.whiteBg+div .arrow:after {
    border-top-color: #d5d5d5 !important;
}

.popover.bottom>.arrow {
    border-bottom-color: #d5d5d5;
    border-bottom-color: #d5d5d5;
}
.popover.bottom>.arrow:after {
    border-bottom-color: #d5d5d5;
}
.popover.top[event-type="personal"] {
    border-bottom: 4px solid #11b46e;
}
.popover.top[event-type="personal"]>.arrow {
    border-top-color: #11b46e;
    border-top-color: #11b46e;
}
.popover.top[event-type="personal"]>.arrow:after {
    border-top-color: #11b46e;
}
.popover.bottom[event-type="personal"] {
    border-top: 4px solid #11b46e;
}
.popover.bottom[event-type="personal"]>.arrow {
    border-bottom-color: #11b46e;
    border-bottom-color: #11b46e;
}
.popover.bottom[event-type="personal"]>.arrow:after {
    border-bottom-color: #11b46e;
}
.popover.top[event-type="stc"] {
    border-bottom: 4px solid #a236ee;
}
.popover.top[event-type="stc"]>.arrow {
    border-top-color: #a236ee;
    border-top-color: #a236ee;
}
.popover.top[event-type="stc"]>.arrow:after {
    border-top-color: #a236ee;
}
.popover.bottom[event-type="stc"] {
    border-top: 4px solid #a236ee;
}
.popover.bottom[event-type="stc"]>.arrow {
    border-bottom-color: #a236ee;
    border-bottom-color: #a236ee;
}
.popover.bottom[event-type="stc"]>.arrow:after {
    border-bottom-color: #a236ee;
}
.popover[event-type="personal"] span.fa,
.popover[event-type="personal"] .Event-Type {
    color: #11b46e;
}
.popover[event-type="outlook"] span.fa,
.popover[event-type="outlook"] .Event-Type {
    color: #037fc0;
}
.popover[event-type="HR"] span.fa,
.popover[event-type="HR"] .Event-Type {
    color: #ff6a39;
}
.popover[event-type="stc"] span.fa,
.popover[event-type="stc"] .Event-Type {
    color: #a236ee;
}
.ellepsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reminderset {
    height: 230px;
    overflow-y: auto;
    overflow-x: hidden;
}
div.charlimit {
    display: inherit;
}
.wall-chart-day {
    width: 18px !important;
    padding: 0px
}
.my-wall-chart-attendance-day {
    width: 18px !important;
    display: inline-block;
    text-align: center;
    float: right;
    font-size: 12px;
}
.my-wall-chart-attendance-day.Friday,
.my-wall-chart-attendance-day.Saturday {
    opacity: 0.5;
}
.الجمعة,
.السبت{
	opacity: 0.5;
}
.wall-chart-attendance-day.Friday,
.wall-chart-attendance-day.Saturday {
    opacity: 0.5;
}
.wall-chart-day-myatt {
    width: 18px !important;
    display: inline-block;
    text-align: center;
    float: right;
}
.wall-chart-attendance-day {
    width: 18px !important;
    height: 18px !important;
    display: inline-block;
    text-align: center;
    float: right;
    font-size: 12px;
    padding: 0px;
}
.heightlimit {
    height: 181px;
    overflow-y: auto;
    overflow-x: hidden;
}
#creatEvent-popover input[type='radio'] {
    display: none;
}
#creatEvent-popover input[type='radio']+span {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    outline: none;
    box-shadow: 0 0 2px 0px gray inset;
    display: inline-block;
    vertical-align: middle;
}
#creatEvent-popover input[type='radio'][id='STC']+span {
    border: 1px solid #a236ee;
}
#creatEvent-popover input[type='radio'][id='outlook']+span {
    border: 1px solid #3b6795;
}
#creatEvent-popover input[type='radio'][id='Personal']+span {
    border: 1px solid #11b46e;
}
#creatEvent-popover input[type='radio'][id='Business']+span {
    border: 1px solid #11b46e;
}
#creatEvent-popover input[type='radio'][id='Other']+span {
    border: 1px solid #414142;
}
#creatEvent-popover input[type='radio'][id='STC']:hover+span {
    box-shadow: 0 0 2px 0px #11b46e inset;
}
#creatEvent-popover input[type='radio'][id='outlook']:hover+span {
    box-shadow: 0 0 2px 0px #3b6795 inset;
}
#creatEvent-popover input[type='radio'][id='Personal']:hover+span {
    box-shadow: 0 0 2px 0px #a236ee inset;
}
#creatEvent-popover input[type='radio'][id='Business']:hover+span {
    box-shadow: 0 0 2px 0px #11b46e inset;
}
#creatEvent-popover input[type='radio'][id='Other']:hover+span {
    box-shadow: 0 0 2px 0px #414142 inset;
}
#creatEvent-popover input[type='radio']+span:before {
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    margin: 20% auto;
    border-radius: 50%;
}
#creatEvent-popover input[type='radio'][id='STC']:checked+span:before {
    background: #a236ee;
}
#creatEvent-popover input[type='radio'][id='outlook']:checked+span:before {
    background: #3b6795;
}
#creatEvent-popover input[type='radio'][id='Personal']:checked+span:before {
    background: #11b46e;
}
#creatEvent-popover input[type='radio'][id='Business']:checked+span:before {
    background: #11b46e;
}
#creatEvent-popover input[type='radio'][id='Other']:checked+span:before {
    background: #414142;
}
#duration.create-event-dropdown {
    /*  width: 50px;*/
}
.new-event {
    color: #68DBF0;
}
.pagiclr li a {
    color: #1d252d !important;
}
#dataWorkSheet {} #dataWorkSheet>.table-stc {
    height: 100%;
}
.legend1 {
    margin-right: 436px;
}
.datatable {
    height: 282px;
}
.legend1,
.legend2,
.legend3 {
    font-family: 'Stc-Font-bold';
    width: 7% !important;
}
.latenam {
    width: 70%;
}
.stc-yellow-bg {
    background-color: #ffde5d;
    border: 0;
    border-radius: 8.5px;
}
.stc-orange-bg {
    background-color: #faba84;
    border: 0;
    border-radius: 8.5px;
}
.stc-red-bg {
    background-color: #ff6a39;
    border: 0;
    border-radius: 8.5px;
}
.stc-gray-bg {
    background-color: #a6c4cf;
    border: 0;
    border-radius: 8.5px;
}
.stc-gray-bg+div {
    border-bottom: 4px solid #a6c4cf !important;
}
.stc-yellow-bg+div {
    border-bottom: 4px solid #ffde5d !important;
}
.stc-orange-bg+div {
    border-bottom: 4px solid #faba84 !important;
}
.stc-red-bg+div {
    border-bottom: 4px solid #ff6a39 !important;
}
.stc-yellow-bg+div.top>.arrow {
    bottom: -11px;
    right: 50%;
    margin-right: -11px;
    border-top-color: #ffde5d;
    border-bottom-width: 0;
}
.stc-red-bg+div.top>.arrow {
    bottom: -11px;
    right: 50%;
    margin-right: -11px;
    border-top-color: #ff6a39;
    border-bottom-width: 0;
}
.stc-orange-bg+div.top>.arrow {
    bottom: -11px;
    right: 50%;
    margin-right: -11px;
    border-top-color: #faba84;
    border-bottom-width: 0;
}
.stc-gray-bg+div.top>.arrow {
    bottom: -11px;
    right: 50%;
    margin-right: -11px;
    border-top-color: #a6c4cf;
    border-bottom-width: 0;
}
.popover.top>.arrow:after .border-top-color .popover.top>.arrow:after .stc-orange-bg+div.top>.arrow {
    border-left-color: #ffde5d !important;
}
/* .stc-red-bg+div>.arrow{        border-right-color: red !important;} */

.stc-gray-bg+div>.arrow {
    border-left-color: #a6c4cf !important;
}
.stc-yellow-bg+div>.arrow:after {
    border-top-color: #ffde5d !important;
    border-width: 0px;
}
.stc-orange-bg+div>.arrow:after {
    border-left-color: #faba84 !important;
    border-width: 0px;
}
.stc-red-bg+div>.arrow:after {
    border-left-color: #ff6a39 !important;
    border-width: 0px;
}
.stc-gray-bg+div>.arrow:after {
    border-left-color: #a6c4cf !important;
    border-width: 0px;
}
.btn-danger+div {
    display: none !important;
}
.btn-danger-el {
    border: 0;
    background: none;
}
/*.nodataavail{    font-size: 4em;  
				margin-top: 10%;}*/

.blankdata {
    width: 30%;
}

#reminderDate {
    width: 105px !important;
}
.event.sick {
    background-color: #ff6a39;
    color: #fff;
}
.event.requested {
    background-color: #1bcdd8;
    color: #fff;
}
.event.planned {
    background-color: #ffde5d;
    color: #fff;
}
#event-errorMessage {
    position: absolute;
    bottom: 20px;
    right: 0;
    left: 0;
    background-color: rgba(230, 230, 230, 0.65);
    z-index: 1;
}
.mb-20 {
    margin-bottom: 20px;
}
.wall-chart-day {
    color: #414142;
    cursor: pointer;
}
.wall-chart-day.Friday,
.wall-chart-day.Saturday {
    opacity: 0.5;
}
.day.today.wall-chart-day {
    color: #ff375e;
}
.wall-chart-day:hover {
    text-decoration: none;
    color: #414142;
    opacity: 0.9;
}
.event {
    color: #fff !Important;
}
.day.adjacent-month.next-month.wall-chart-day {
    opacity: 0;
    pointer-events: none;
}
.day.adjacent-month.last-month.wall-chart-day {
    opacity: 0;
    pointer-events: none;
}
.singleDayEvents {
    border-radius: 8.5px;
}
.borderleft {
    border-bottom-right-radius: 8.5px;
    border-top-right-radius: 8.5px;
}
.borderright {
    border-bottom-left-radius: 8.5px;
    border-top-left-radius: 8.5px;
}
.day.event.annual.wall-chart-day {
    background-color: #00c48c;
}
.day.event.annual.wall-chart-day+div {
    border-bottom: 4px solid #00c48c;
}
.day.event.planned.wall-chart-day+div {
    border-bottom: 4px solid #ffde5d;
}
.day.event.planned.wall-chart-day+div .arrow,.day.event.planned.wall-chart-day+div .arrow:after {
    border-top-color: #ffde5d;
}
.day.event.annual.wall-chart-day+div .arrow {
    border-top-color: #00c48c;
}
.day.event.annual.wall-chart-day+div .arrow:after {
    border-top-color: #00c48c;
}
.day.event.requested.wall-chart-day {
    background-color: #1bcdd8;
}
.day.event.requested.wall-chart-day+div {
    border-bottom: 4px solid #1bcdd8;
}
.day.event.requested.wall-chart-day+div .arrow {
    border-top-color: #1bcdd8;
}
.day.event.requested.wall-chart-day+div .arrow:after {
    border-top-color: #1bcdd8;
}
.day.event.half-day.wall-chart-day {
    background-color: #a54ee1;
}
.day.event.half-day.wall-chart-day+div {
    border-bottom: 4px solid #a54ee1;
}
.day.event.half-day.wall-chart-day+div .arrow {
    border-top-color: #a54ee1;
}
.day.event.half-day.wall-chart-day+div .arrow:after {
    border-top-color: #a54ee1;
}
.day.event.sick-leave.wall-chart-day {
    background-color: #ff6a39;
}
.day.event.sick-leave.wall-chart-day+div {
    border-bottom: 4px solid #ff6a39;
}
.day.event.sick-leave.wall-chart-day+div .arrow {
    border-top-color: #ff6a39;
}
.day.event.sick-leave.wall-chart-day+div .arrow:after {
    border-top-color: #ff6a39;
}
.day.event.other.wall-chart-day {
    background-color: #3b6795;
}
.day.event.other.wall-chart-day+div {
    border-bottom: 4px solid #3b6795;
}
.day.event.other.wall-chart-day+div .arrow {
    border-top-color: #3b6795;
}
.day.event.other.wall-chart-day+div .arrow:after {
    border-top-color: #3b6795;
}
#vacationTypeLable {
    text-transform: capitalize;
}
.remove-padding-left {
    padding-right: 0px;
}
.ACCEPTED {
    color: #11b46e;
}
.PENDING {
    color: #1bcdd8;
}
.margin-right-5 {
    margin-left: 5px;
}
.margin-bottom-5 {
    margin-bottom: 5px;
}
.loader_img {
    width: 100%;
    position: absolute;
    height: 51px;
    overflow: hidden;
    z-index: 999;
    background: white;
}
.btn-danger-el+div {
    dispaly: none !important;
}
.witdh_td {
    width: 50%;
    position: relative;
    height: 20px;
}
.wall-chart-day-myatt.Friday,
.wall-chart-day-myatt.Saturday,
.wall-chart-attendance-day.Friday,
.wall-chart-attendance-day.Saturday {
    opacity: 0.5;
}
.common {
    padding-right: 0px !important;
}
.hide {
    display: none !important;
}
.button_notification {
    background-color: #ff375e;
    text-align: center;
    border-radius: 10px;
    color: white;
    padding: 3px;
    font-size: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
}
/* ############# need to check all below in RTL CSS -mostafa -kamran
########################################################################################################
########################################################################################################
########################################################################################################*/

#nav-side {
   /*  color: #712CB1;
    padding-right: 5px;
    padding-left: 5px; */
    margin-top: -5px;
    margin-left: -30px;
}
#nav-sidebar {
   /*  color: #712CB1;
    padding-right: 5px;
    padding-left: 5px; */
    margin-top: -5px;
    margin-left: -30px;
}
.navp {
    padding-left: 30px;
}
.padd-15 {
    padding-right: 15px;
    padding-left: 15px;
}
.accordion {
    width: 100%;
    background-color: #fff;
    margin-right: -15px;
    margin-left: -20px;
    padding-left: 10px;
    padding-right: 10px;
}
.accordion-toggle {
    cursor: pointer;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}
.accordion-toggle>i {
    padding-left: 10px;
}
.accordion-toggle:hover {
    background-color: #ff375e;
    margin-right: -15px !important;
    margin-left: -15px;
    padding-right: 15px;
    padding-left: 15px !important;
    color:#fff;
}
.accordion-toggle:hover:before {
    margin-left: 15px;
}
.accordion-toggle:hover:after {
    margin-left: 15px;
}
.accordion-toggle.active:after {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 0;
    height: 0;
    border-bottom: 5px solid #FF375E;
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid rgba(0, 0, 0, 0);
}
.accordion-toggle:before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 0;
    height: 0;
    border-top: 5px solid #fff;
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid rgba(0, 0, 0, 0);
}
.accordion-toggle.active:before {
    display: none;
}
.accordion-toggle:active {
    background-color: #ffffff;
    margin-left: -15px;
    margin-right: -15px;
    padding-right: 15px;
}
.accordion-content {
    display: none;
    background-color: transparent;
    margin-right: -15px;
    color: #fff;
    margin-left: -15px;
    padding-bottom: 5px;
    box-shadow: none;
    padding-left: 15px;
    padding-right: 15px;
}
.accordion-toggle.active {
    color: #FF375E;
    background-color: #ffffff;
    margin-left: -15px;
    margin-right: -15px;
}
.accordion-toggle.active:after {
    margin-left: 15px;
}
.accordion-toggle.active:hover {
    margin-right: -15px !important;
}
h5.accordion-toggle.active {
    padding-right: 15px !important;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .12);
}
.accordion-toggle.active>.accordion-content {
    background-color: #ffffff !important;
}
/** The Magic **/

.btn-breadcrumb .btn:not (:last-child):after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid white;
    position: absolute;
    top: 50%;
    margin-top: -17px;
    right: 100%;
    z-index: 3;
}
.btn-breadcrumb .btn:not (:last-child):before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid rgb(173, 173, 173);
    position: absolute;
    top: 50%;
    margin-top: -17px;
    margin-right: 1px;
    right: 100%;
    z-index: 3;
}
/** The Spacing **/

.btn-breadcrumb .btn {
    padding: 6px 24px 6px 12px;
}
.btn-breadcrumb .btn:first-child {
    padding: 6px 10px 6px 6px;
    margin-left: 1px;
}
.btn-breadcrumb .btn:last-child {
    padding: 6px 24px 6px 18px;
    margin-right: 0px;
}
/** Default button **/

.btn-group > .btn:first-child:not (:last-child):not ( .dropdown-toggle) {
    background-color: #fff;
}
.btn-breadcrumb .btn.btn-default:not (:last-child):after {
    border-right: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not (:last-child):before {
    border-right: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not (:last-child):after {
    border-right: 10px solid #FF375E;
}
.btn-breadcrumb .btn.btn-default:hover:not (:last-child):before {
    border-right: 10px solid #adadad;
}
/** Primary button **/

.btn-breadcrumb .btn.btn-primary:not (:last-child):after {
    border-right: 10px solid #428bca;
}
.btn-breadcrumb .btn.btn-primary:not (:last-child):before {
    border-right: 10px solid #357ebd;
}
.btn-breadcrumb .btn.btn-primary:hover:not (:last-child):after {
    border-right: 10px solid #3276b1;
}
.btn-breadcrumb .btn.btn-primary:hover:not (:last-child):before {
    border-right: 10px solid #285e8e;
}
/** Success button **/

.btn-breadcrumb .btn.btn-success:not (:last-child):after {
    border-right: 10px solid #00c48c;
}
.btn-breadcrumb .btn.btn-success:not (:last-child):before {
    border-right: 10px solid #4cae4c;
}
.btn-breadcrumb .btn.btn-success:hover:not (:last-child):after {
    border-right: 10px solid #47a447;
}
.btn-breadcrumb .btn.btn-success:hover:not (:last-child):before {
    border-right: 10px solid #398439;
}
/** Danger button **/

.btn-breadcrumb .btn.btn-danger:not (:last-child):after {
    border-right: 10px solid #FF375E;
}
.btn-breadcrumb .btn.btn-danger:not (:last-child):before {
    border-right: 10px solid #d43f3a;
}
.btn-breadcrumb .btn.btn-danger:hover:not (:last-child):after {
    border-right: 10px solid #d2322d;
}
.btn-breadcrumb .btn.btn-danger:hover:not (:last-child):before {
    border-right: 10px solid #ac2925;
}
/** Warning button **/

.btn-breadcrumb .btn.btn-warning:not (:last-child):after {
    border-right: 10px solid #f0ad4e;
}
.btn-breadcrumb .btn.btn-warning:not (:last-child):before {
    border-right: 10px solid #FF375E;
}
.btn-breadcrumb .btn.btn-warning:hover:not (:last-child):after {
    border-right: 10px solid #ed9c28;
}
.btn-breadcrumb .btn.btn-warning:hover:not (:last-child):before {
    border-right: 10px solid #d58512;
}
/** Info button **/

.btn-breadcrumb .btn.btn-info:not (:last-child):after {
    border-right: 10px solid #5bc0de;
}
.btn-breadcrumb .btn.btn-info:not (:last-child):before {
    border-right: 10px solid #46b8da;
}
.btn-breadcrumb .btn.btn-info:hover:not (:last-child):after {
    border-right: 10px solid #39b3d7;
}
.btn-breadcrumb .btn.btn-info:hover:not (:last-child):before {
    border-right: 10px solid #269abc;
}
#textdiv {
	border: none !important;
    min-width: 150px;
    position: relative;
    max-width: 320px;      
    max-width: 276px;   
}
.fade {
    opacity: 0;
}
#textdiv>.arrow {
    border-width: 11px;
}
#textdiv>.arrow,
#textdiv>.arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-right-color: transparent;
    border-style: solid;
    border-left-color: transparent;
    border-bottom-color: transparent;
    top: 44px;
}

.stc-profile-designation h3 {
    font-family: stc-font-regular;
    font-size: 18px;
    color: #146ea3
}
.stc-profile-designation p {
    font-family: stc-font-regular;
    font-size: 13px;
    color: #aaa
}
.stc-profile-designation ul li {
    font-family: stc-font-regular;
    font-size: 12px;
    color: #146ea3
}
.stc-profile-designation p.last_promo {
    font-family: Stc-Font-bold;
    font-size: 12px;
    color: #000
}
.stc-profile-designation .punctuality {
    font-family: stc-font-regular;
    font-size: 10px;
    color: #000
}
.stc-profile-designation .punctuality span {
    font-family: stc-font-regular;
    font-size: 10px;
    color: #aaa
}
.month-year p {
    font-family: stc-font-regular;
    font-size: 13px;
    color: #aaa
}
.stc-emp-panel .stc-profile-img img {
    border-radius: 50%;
    background-clip: padding-box;
    border: 1px solid #aaa;
    width: 79px;
    height: 79px;
}
.stc-profile-designation h3 span.mail-link {
    position: absolute;
    top: -3px;
    display: inline-block
}
.stc-emp-panel {
    min-height: 150px;
}
.fc-unthemed .fc-today {
    background: transparent;
}
.my-timeline-container {
    height: 225px;
}
.timeline-controls {
    left: -10px;
}
.fc-day-header.fc-widget-header[style*="font-weight"] {
    color: #FF375E !important;
}
.fc-button.fc-state-default {
    color: #146ea3 !important;
}
i.mygate-icon-smiley.gauge-icon {
    opacity: 0.9;
}
.stc-gauge img.sad-icon {
    opacity: 0.7;
}
.text-muted {
    color: #8e9aa0;
}
button.btn.btn-border.dropdown-toggle.no-border.stc-light-blue.inline-dropdown.ng-binding {
    margin-top: -3px;
    padding-left: 0;
}
.margin-bottom-10 {
    margin-bottom: 10px;
}
.stc-objective {
    height: 150px;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}
.textcontainer {
    padding: 20px 20px 10px;
}
.redfill {
    border: .08em solid #F44336 !important;
}
.yellowfill {
    border: .08em solid #ff6a39 !important;
}
.greenfill {
    border: .08em solid #00c48c !important;
}
.forcecss {
    position: absolute;
    top: -38%;
    right: 59%;
}
.parentPopups a.annuall {
    background-color: #00c48c;
}
.parentPopups a.requested {
    background-color: #1bcdd8;
}
.parentPopups a.sick-leave {
    background-color: #ff6a39;
}
.parentPopups a.half-day {
    background-color: #a54ee1;
}
.parentPopups a.other {
    background-color: #ffd76a;
}
.benefits-list .item-type-move .item-hover .mask {
    border-radius: 5px;
}
.mt20 {
    margin-top: 20px;
}
.acceptload {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    right: 0px;
    top: 0px;
    z-index: 999;
    margin-top: 0px;
}
.acceptload .loadersmallaccept {
    margin: 0px !important;
    margin-right: -36px !important;
    margin-top: -21px !important;
}
.ownpopup h5 {
    width: 178px;
}
/* .nano {
	height: 150px !important;
} */

.nano .nano-content {
    padding: 10px;
}
.nano .nano-pane {
    background: transparent !important;
}
.nano .nano-slider {
    background: #666;
}
.fc-row .fc-content-skeleton tbody td {
    padding: 4px 0;
}
.textlimit {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 95%;
}
.mt0 {
    margin-top: 0px
}
.pr20 {
    padding-left: 20px;
}
.list-skills-level {
    margin: 0px;
}
.list-skills-level img {
    width: 25px;
    height: 25px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.list-skills-level {
    margin: 0px;
}
.userInformationApp img {
    border: 2px solid #FF375E;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
.list-skills-level img {
    width: 25px;
    height: 25px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}
.userInformationApp img {
    border: 2px solid #FF375E;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
.removePadding {
    padding: 0px !important;
}
.removeMargin {
    margin: 0px !important;
}
.headerTabs {
    margin-bottom: 30px;
}
.headerTabs .pull-up>h1 {
    margin: 0px;
    margin-top: 5px
}
.badge-only {
    min-width: 18px;
    min-height: 18px;
    border-radius: 4px;
}
.sml {
    font-size: 12px !important;
}
.achievements-sections .sml{
	font-size: 11px !important;
}
.achievements-sections{
	min-height: 140px;
}
.achievements-sections h4{
	line-height: 25px;
}
 .achievements-sections  img{
    max-height: 85px;
    }
    .checkbox-text{
    	position: static !important;
    	width: 215px;
    }
      .one-line-checkbox{
    	width: auto !important;
    	margin-right: 5px;
    }
    .punctuality-dropdown button{
    	    padding-right: 5px !important;
    }
.size-16 {
    font-size: 16px;
    letter-spacing: 0.5px;
}
.wide-btn {
    padding-right: 25px;
    padding-left: 25px;
}
#UserCalendar .fc-prev-button,
#UserCalendar .fc-next-button {
    background-color: #fff;
    color: #ff375e !important;
    border: 1px solid #ff375e;
    background-image: none;
    padding-right: 15px;
    padding-left: 15px;
}
#UserCalendar .fc-today-button {
    color: #ff375e !important;
    padding-right: 25px;
    padding-left: 25px;
}
.btn-pink-bordered.active {
    background-color: #ff375e;
    color: #fff;
}
.pagination>li>a,
.pagination>li>span {
    padding: 0 6px;
    font-family: Stc-Font-regular;
    font-size: 12px;
    color: #146ea3
}
.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
    border: 0px;
}
.pagination>li:first-child>a:before {
    content: ' < '
}
.pagination>li:last-child>a:after {
    content: ' > '
}
.edorsingUser {
    width: 18px;
    height: 18px;
}
.profileImg {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1px solid #cbcbcb;
    display: inline-block;
    position: relative;
    /*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);*/
}
.text-left {
    text-align: right;
}
.userImg {
    border-radius: 50%;
    /* border: 1px solid #FF375E; */
    
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    margin: 0 2px;
}
.edorslink>span {
    -webkit-transition: opacity linear 0.2s;
    transition: opacity linear 0.2s;
    opacity: 0;
    font-size: 12px;
}
.va {
    vertical-align: middle;
}
.edorslink:hover {
    color: #969696;
    text-decoration: none;
}
.edorslink:hover>span {
    opacity: 1;
}
.pink-icon {
    color: #ff375e;
}
.inline-more {
    display: inline-block;
    margin-right: 10px;
}
.height-250 {
    min-height: 250px;
}
@keyframes strike {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
.done-line {
    position: relative;
}
.done-line:after {
    content: ' ';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: black;
    animation-name: strike;
    animation-duration: 0.7s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.hijriDate {
    float: left;
    opacity: 0.5;
}
.hijriTitle {
    opacity: 0.3;
    margin-top: 5px;
}
.noBorders {
    border-style: none !important;
    text-align: right !important;
}
.fc-basic-view .fc-day-number {
    padding: 0 6px !important;
    text-align: right;
}
.userKudosImg {
    margin: 0 auto;
    margin-bottom: 10px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid #acacac;
}
.badgImg {
    margin-bottom: 10px;
    width: 63px;
    height: 63px;
}
.Kudos-comment-TimeStap {
    text-align: left;
    opacity: 0.3;
}
.offer span.stc-icon {
    font-size: 18px;
}
.my-comment-item {
    padding: 5px;
    border-radius: 7px;
    position: relative;
    width: 80%;
    margin-right: 25px;
    margin-bottom: 9px;
    background-color: #f3f3f1;
}
.my-comment-item:before {
    left: 50%;
    top: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(225, 225, 224, 0);
    border-bottom-color: #f3f3f1;
    border-width: 7px;
    margin-top: -14px;
}
.my-comment-item .media:after {
    left: 106.2%;
    top: 50%;
    content: " ";
    height: 87px;
    width: 3px;
    position: absolute;
    display: inline-block;
    background: #C3C3C3;
    /* border-width: 9px; */
    
    margin-top: -86px;
}
.profileTheamHeaderImg {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    border: 1px solid #cbcbcb;
}
/* .half-day {
	background-color: #a54ee1;
}

.sick-leave {
	background-color: #ff6a39;
}

.other {
	background-color: #ffd76a;
} */

.rowdata {
    height: auto;
    width: 502px;
    margin-top: 45px;
}
.noAchievement {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: 0.3;
}
.icone-Link:hover {
    text-decoration: none;
}
.purple-theader {
    background-color: #712CB1;
    color: #fff;
}
#Loan-modal-dialog {
    width: 65vw;
}
#career-modal-dialog .my-timeline-item {
    width: auto;
}
#career-modal-dialog .my-timeline-item:before {
    left: 105%;
}
#career-modal-dialog .modal-body {
    padding: 0 10px;
    padding-bottom: 1px;
}
#career-modal-dialog .my-timeline-item.first {
    background: #4F008C;
    color: #fff;
}
#career-modal-dialog .my-timeline-item.first h5{
	color: white;
}
#career-modal-dialog .my-timeline-item.first .media:after {
    background: transparent;
}
#career-modal-dialog .my-timeline-item .media:after {
    opacity: 0.5;
}
#career-modal-dialog .my-timeline-item.first:before {
    background: #4F008C;
}
.my-timeline-item:before {
    z-index: 1;
}
#career-modal-dialog .my-timeline-item.first:after {
    border-left-color: #4F008C;
}
#career-modal-dialog .career-Container {
    /*height: 80vh;*/
    
    overflow: scroll;
    padding: 20px 40px;
}
.career-modal-container {
    height: auto !important;
    padding: 0 !important;
}
.on-site {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    padding: 2px 6.5px;
    background-color: #FF375E;
    color: #fff;
}

.portlet-status{
	display:inline-block !important;
	width: 25px;
    height: 25px;
    border-radius: 50%;
    background-size:cover !important;
}
.leave-on-leave{
    background: url('/portal/myGate/images/vacation-icons/leave-on-leave.png') top left no-repeat;
}
.leave-flight{
    background: url('/portal/myGate/images/vacation-icons/flight.png') top left no-repeat;
}
.leave-hajj{
    background: url('/portal/myGate/images/vacation-icons/leave-hajj.png') top left no-repeat;
}
.leave-mariage{
    background: url('/portal/myGate/images/vacation-icons/leave-mariage.png') top left no-repeat;
}
.leave-not-avaiable{
    background: url('/portal/myGate/images/vacation-icons/leave-not-avaiable.png') top left no-repeat;
}
.leave-sick{
    background: url('/portal/myGate/images/vacation-icons/leave-sick.png') top left no-repeat;
}
.leave-training{
    background: url('/portal/myGate/images/vacation-icons/leave-training.png') top left no-repeat;
}

.on-site:before {
    font-family: 'FontAwesome';
    content: "\f1ad";
    font-size: 14px;
}
[dir="rtl"] .pull-right {
    float: left !important;
}
[dir="rtl"] .pull-left {
    float: right !important;
}
[dir="rtl"] .mediakudos .media-body {
    text-align: center;
    padding-top: 15px;
}
[dir="rtl"] .fc-prev-button,
[dir="rtl"] .fc-next-button {
    transform: scaleX(-1);
}
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    [dir="rtl"] .filterEvent {
        transform: none !important;
    }
}
div#historyDropdownList {
    float: right;
}
.profileTheamHeaderImg {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    border: 1px solid #cbcbcb;
}
.purple {
    color: #4F008C;
}
.popover.top[event-type="HR"] {
    border-bottom: 4px solid #ff6a39;
}
.popover.top[event-type="HR"]>.arrow {
    border-top-color: #ff6a39;
    border-top-color: #ff6a39;
}
.popover.top[event-type="HR"]>.arrow:after {
    border-top-color: #ff6a39;
}
.popover.bottom[event-type="HR"] {
    border-top: 4px solid #ff6a39;
}
.popover.bottom[event-type="HR"]>.arrow {
    border-bottom-color: #ff6a39;
    border-bottom-color: #ff6a39;
}
.popover.bottom[event-type="HR"]>.arrow:after {
    border-bottom-color: #ff6a39;
}
.popover[event-type="HR"] span.fa,
.popover[event-type="HR"] .Event-Type {
    color: #ff6a39;
}
#creatEvent-popover input[type='radio'][id='HR'] {
    border: 1px solid #ff6a39;
}
#creatEvent-popover input[type='radio'][id='HR']:checked:before {
    background: #ff6a39;
}
#creatEvent-popover input[type='radio'][id='HR']:hover {
    box-shadow: 0 0 2px 0px #ff6a39 inset;
}
#creatEvent-popover input[type='radio'][id='HR'] {
    border: 1px solid #ff6a39;
}
.fc-event[event-type="HR"] {
    background-color: #ff6a39;
}
.tableHead th {
    width: 24%
}
.loader_img_realtive {
    width: 100%;
    position: relative;
    height: 51px;
    overflow: hidden;
    z-index: 999;
    background: white;
    display: none;
}
#loader {
    display: block;
    position: relative;
    right: 41%;
    top: 50%;
    width: 70px;
    height: 70px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #4F008C;
    -webkit-animation: spin 1.5s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    
    animation: spin 1.5s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}
.counterKudo {
    top: 6px;
}
.attandec-fixed{min-width:171px; }
.invalid {
    border: 1px solid #ff375e !important;
}
.cursordef {
    height: 106px;
    position: absolute;
    width: 100%;
    background: transparent;
    cursor: not-allowed;
    display: none;
    z-index: 9999;
}
.badSkill {
    color: red;
}
.modal-body-kud {
    position: relative;
    overflow-y: auto;
    height: 60vh;
    padding: 0px;
}
.modal-body-kud .nano {
    height: 60vh !important;
}
.stopScroll {
    overflow: hidden;
}
h6.earn-title {
    padding: 10px;
    text-align: center;
    color: #3f51b5;
    font-size: 18px;
    border-bottom: 2px solid;
}
h6.deduct-title {
    padding: 10px;
    text-align: center;
    color: #ff6a39;
    font-size: 18px;
    border-bottom: 2px solid;
}
.newinsurance .lbl:not([class*="col-"]),
.newinsurance .big:not([class*="col-"]) {
    float: right;
}
.team-equal-heights {
    min-height: 302px;
}
.stc-profile-designation .mail-link ul li:last-child a {
    color: #146ea3;
}
/** The Magic **/

.btn-breadcrumb .btn:not(:last-child):after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid white;
    position: absolute;
    top: 50%;
    margin-top: -17px;
    right: 100%;
    z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid rgb(173, 173, 173);
    position: absolute;
    top: 50%;
    margin-top: -17px;
    margin-right: 1px;
    right: 100%;
    z-index: 3;
}
/** The Spacing **/

.btn-breadcrumb .btn {
    padding: 6px 24px 6px 12px;
}
.btn-breadcrumb .btn:first-child {
    padding: 6px 10px 6px 6px;
}
.btn-breadcrumb .btn:last-child {
    padding: 6px 24px 6px 18px;
}
/** Default button **/

.btn-breadcrumb .btn.btn-default:not(:last-child):after {
    border-right: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
    border-right: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
    border-right: 10px solid #4F008C;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
    border-right: 10px solid #adadad;
}
.pop-sms.popover {
    border: 1px solid #ff375e;
    border: 1px solid #ff375e;
    box-shadow: -5px 10px 10px rgba(33, 71, 111, 0.2);
}
.pop-sms.popover.right {
    margin-right: 10px;
    border-right: 1px solid #ff375e;
}
.pop-sms {
    min-width: 302px;
}
.pop-sms i.close-popover {
	margin-top: 0!important;
}
.pop-sms.right > .arrow {
    border-left-color: #ff375e;
        border-left-width: 10px;
}
.sms-right-way{
top: 0px; right: -10px;
}
.pop-sms.right > .arrow:after {
    border-left-color: #ff375e;
}
.pop-sms.right {
    border-right: 4px solid #ff375e;
}
.pop-sms.top > .arrow {
    right: 20%;
}
.pop-sms.right > .arrow {
    top: 20px !important;
}
.pop-sms h4 {
    font-weight: bold;
    margin: -2px 5px 3px 2px;
}
.pop-sms .col-md-6 {
    padding-right: 0px;
}
textarea[name=foo] {
    resize: none;
}
.pop-sms .popover-content {
    padding: 15px 10px;
}
.pop-sms .popover-content hr {
    margin-right: -14px;
    margin-left: -10px;
    margin-top: 2px;
    margin-bottom: 15px;
}
.stc-profile-designation h3 span.mail-link {
    top: 0px;
        margin: 2px 5px;
}
.idty {
    cursor: pointer;
}
.btn-danger-el {
    cursor: default!important;
}
#globalSerachresult {
	position: relative;
}
#globalSerachresult .ui-menu .ui-menu-item {
    font-size: 0.8em;
}
.dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    float: left;
    text-align: right;
}
.fbclass .stc-profile-img {
    height: 80px;
    width: 80px;
    background: #f6f7f8;
    border-radius: 0px;
    border: 1px solid #f6f7f8;
}
.fbclass .div:empty {
    background: #f6f7f8;
}
.fbclass a.ng-binding {
    background: #f6f7f8;
    color: #f6f7f8!important;
}
.fbclass label.head.ng.txtlimit.ng-binding {
    background: #f6f7f8;
    color: #f6f7f8!important;
}
.fbclass p.txtlimitsub.ng-binding {
    background: #f6f7f8;
    color: #f6f7f8!important;
}
.fbclass .stc-profile-designation ul li {
    background: #f6f7f8;
    color: #f6f7f8!important;
}
.fbclass p.last_promo.ng-scope {
    background: #f6f7f8;
    color: #f6f7f8!important;
}
.fbclass .stc-profile-designation span.promo_date {
    background: #f6f7f8;
    color: #f6f7f8!important;
}
.stc-my-team-employee-col-1 .main-badge-stc {
    padding-top: 1px;
    right: -6px;
    bottom: 5px;
    width: 27px;
    height: 27px;
    font-size: 10px;
}
.employee-details .badge-stc {
    padding: 0px;
    width: 13px;
    height: 13px;
}
button#EventView-dropdown {
    margin-top: -3px;
    padding: 0px;
    padding-bottom: 0px;
}
.stc-logo-brand img {
    height: 35px;
}
.stcMainHeader {
    height: 55px;
}
.stcMainHeader #MainMenu {
    margin: 0px 10px;
}
p.stc-title-service {
    display: inline-block;
    color: #4f008c;
    font-size: 24px;
    font-weight: bold;
    margin-top: -7px !important;
}
.stcMainHeader #MainMenu a {
    color: #4F008C;
    text-transform: inherit;
    font-size: 16px;
    text-decoration: none;
    font-weight: 200;
    padding-bottom: 10px;
    margin-top: 5px;
}
.stcMainHeader #MainMenu a.active {
    border-bottom: 3px solid #4F008C;
    font-weight: 700;
    margin-top: -3px
}

.stcMainHeader .navbar-form {
    margin: 0px;
    padding: 0;
    text-align: left;
    margin-bottom: -5px;
}
.action-btn {
    display: inline-block;
    padding: 0 5px;
    vertical-align: top;
    margin-top: 15px;
}
.search-bar {
    display: inline-block;
    padding: 0 5px;
    vertical-align: top;
    margin-top: 12px;
}
.profileTheamHeaderImg {
    display: inline-block;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    border: 1px solid #cbcbcb;
}
.main-menu {
    display: inline-block;
}
.action-btn .fa {
    font-size: 21px;
}
.languageButton .portlet-body a {
    width: 21px !important;
    height: 21px;
    background: url(../images/lang.png) no-repeat center center;
    background-size: contain;
    display: inline-block;
    margin-top: 3px;
}
.language-button {
	width: 32px;
    margin-top: -4px;
}
.language-button img{
	width: 100%
}
.user-btn {
    display: inline-block;
    padding: 0 5px;
    vertical-align: top;
    margin-top: 10px;
}
.searchSet .form-control {
    width: 100% !important;
    border-color: #D8D8D8;
    box-shadow: none;
    font-size: 14px;
    margin-bottom: 0;
    border-radius: 5px;
}
.search-bar .searchSet input[type='text'] {
    width: 150px !important
}
.user-btn button#MyArea {
    background: transparent;
    border: none;
    padding: 0px;
}
#MyArea .caret {
    margin-right: 7px;
    vertical-align: text-top;
    border-top-color: #a1a1a1;
}
#sub-navigation #navbar a {
    color: #FF375E !Important;
}
#notificationSpan {
    background-color: #FF375E;
    color: #fff;
    border-radius: 5px;
    padding: 2px 4px;
    display: block;
    position: absolute;
    top: -4px;
    left: -10px;
    cursor: pointer;
    height: 16px;
    min-width: 16px;
    text-align: center;
    line-height: 12px;
    z-index: 1;
    font-size: 10px !important;
    border: 1px solid #fff;
    font-family: Stc-Font-regular;
}
.teamEmpImg {
    width: 80px;
    height: 80px;
    ;
    background-size: cover;
    border-radius: 50%;
    border: 1px solid #ddd;
}
.dashbord-component .nano {
    height: 150px;
}
.MyArea {
    border-radius: 5px !important;
    border-top: 4px solid #4F008C !important;
    background-color: #ffffff !important;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3) !important;
    position: absolute !important;
    border-bottom: 1px solid #4F008C !important;
    border-left: 1px solid #4F008C !important;
    border-right: 1px solid #4F008C !important;
}
.list5 li:hover {
    background-color: transparent;
}
.list5 li:hover a {
    background-color: transparent;
    color: #4F008C;
}
.LogOut>a> .fa {
    color: #ff375e;
    font-size: 16px;
}
.margin-top-40 {
    margin-top: 40px;
}

.AppSwitcher .Item {
    border: none;
}
.AppSwitcher .Item:hover {
    border: none;
    opacity: .7;
    transform: scale(1.1);
}
.stc-msg-team .dropdown-menu{
	padding-left: 0;
    padding-right: 0;
}
.stcMainHeader #MainMenu a:hover {
    background: transparent;
    font-weight: 700;
}
.kudos-component h4 {
    margin-top: 0px;
}
.stc-light-blue {
    color: #1F78E0 !important;
}
.margin-top-15 {
    margin-top: 15px;
}
.margin-top-20 {
    margin-top: 20px;
}

#dataTeamAttTrendChart,
#dataTeamAttBarChart,
#dataTrend {
    direction: ltr;
}

.LogOut>a> .fa {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}
 
.pop-smsemp.popover {
    border: 1px solid #ff375e;
    border: 1px solid #ff375e;
    box-shadow: -5px 10px 10px rgba(33, 71, 111, 0.2);
}
.pop-smsemp.popover.right {
    margin-right: 10px;
    border-right: 1px solid #ff375e;
}
.pop-smsemp {
    min-width: 302px;
}
.pop-smsemp.right > .arrow {
    border-left-color: #ff375e;
    border-left-color: #ff375e;
}
.pop-smsemp.right > .arrow:after {
    border-left-color: #ff375e;
}
.pop-smsemp.right {
    border-right: 4px solid #ff375e;
}
.pop-smsemp.top > .arrow {
    right: 20%;
}
.pop-smsemp.right > .arrow {
    top: 20px !important;
}
.pop-smsemp h4 {
    font-weight: bold;
    margin: -2px 5px 3px 2px;
}
.pop-smsemp .col-md-6 {
    padding-right: 0px;
}
textarea[name=fooemp] {
    resize: none;
}
.pop-smsemp .popover-content {
    padding: 10px 15px 15px 10px;
}
.pop-smsemp .popover-content hr {
    margin-right: -14px;
    margin-left: -10px;
    margin-top: 2px;
    margin-bottom: 15px;
}
.close-popoveremp {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 18px;
     margin: 0 !important;
}
.suggestion-item .img-circle {
    width: 40px;
    height: 40px;
    border: 1px solid #dddddd;
}
tags-input .autocomplete .suggestion-item.selected {
    color: #fff;
    background-color: #ff375e;
}
.suggestion-item.selected h5 small {
    color: rgba(255, 255, 255, 0.3);
}
tags-input .tags.focused {
    outline: none;
    -webkit-box-shadow: 0 0 3px 1px rgba(218, 63, 123, 0.4);
    -moz-box-shadow: 0 0 3px 1px rgba(218, 63, 123, 0.4);
    box-shadow: 0 0 3px 1px rgba(218, 63, 123, 0.4);
}
tags-input .tags .tag-item {
    margin: 2px;
    padding: 0 5px;
    display: inline-block;
    float: right;
    font: 12px 'Stc-Font-regular', sans-serif;
    height: 20px;
    line-height: 20px;
    border: none;
    border-radius: 3px;
    background-color: #FF375E;
    color: #fff;
}
tags-input .tags .tag-item .remove-button {
    color: #ffffff;
}
#sub-navigation li.active {
    font-weight: 700;
}
#sub-navigation #navbar a:hover,
#sub-navigation #navbar a:visited,
#sub-navigation #navbar a:active,
#sub-navigation #navbar a:focus {
    background-color: transparent;
    font-weight: 700;
}
a.home-link {
    padding: 6px !important;
}
a.home-link i {
    font-size: 24px;
}
body {
    font-family: Stc-Font-regular !Important;
    font-size: 14px;
    line-height: 1.428571429;
    color: #414142;
}
.Notification {
    background-color: #fff !important;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    width: 350px;
    overflow-y: auto;
    position: absolute;
    border-radius: 5px;
    border: 1px solid #7c0e86 !important;
}
.Notification .item {
    margin: 0px 3px;
    border-bottom: solid 1px #dadada;
    position: relative;
    display: inline-block;
    width: 98%;
    cursor: pointer;
    padding-bottom: 7px;
    padding-top: 7px;
    text-align: right;
}
.Notification div.item:first-child {
    border-bottom: none;
}
.Notification .title {
    color: #4F008C;
}
.Notification .ViewAll {
    background-color: #4F008C;
}
.ViewAll a {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    display: block;
}
.sub-text {
    color: #b7b7b7;
    font-size: 12px;
}
tags-input .autocomplete .suggestion-list {
    max-height: 290px;
}
.navbar-nav>li>a {
    padding-top: 12px;
    padding-bottom: 12px;
}
.navbar {
    min-height: 45px;
}
.badge-stc-violet {
    background-color: #d49bd8;
}
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {
    border-radius: 5px;
}
.table-stc>tbody>tr.active>td {
    background-color: rgb(212, 188, 218);
}
.empDetailsCard {
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
    border: 2px solid rgb(212, 188, 218)
}
/* ######################################### */
/* not added to arabic after this line  */
/* ######################################### */

.stc-emp-panel:hover,
.stc-emp-panel:focus {
    border: 1px solid #ff375e;
    box-shadow: inset 0px 0px 9px 0px #ffd0e2;
}
.stc-panel-selected {
    border: 1px solid #ff375e;
    box-shadow: inset 0px 0px 4px 0px #ffd0e2;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #fff;
    background-size: 1200px 250px;
    position: relative;
}
.btn-pink-bordered a:focus,
.btn-pink-bordered a:hover {
    color: #ffffff;
    text-decoration: none;
}
.btn-pink-bordered > a:focus,
.btn-pink-bordered > a:hover {
    color: #ffffff;
    text-decoration: none;
}
@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }
    100% {
        background-position: 468px 0
    }
}
/* BackToTop button css */

#scroll {
    position: fixed;
    left: 10px;
    bottom: 10px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    text-indent: -9999px;
    z-index: 999999;
    color: #FF375E;
    border: 1px solid #FF375E;
    padding: 6px 12px;
    border-radius: 4px;
}
#scroll span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #ff375e;
}
#scroll span:hover {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #ff375e;
}
#scroll span.active {
    color: #fff;
}
.c100:after {
    background-color: #ffffff!important;
}
.c100:hover>span {
    width: 3.33em;
    line-height: 3.33em;
    font-size: .3em;
}
.c100 .bar,
.c100.p51 .fill,
.c100.p52 .fill,
.c100.p53 .fill,
.c100.p54 .fill,
.c100.p55 .fill,
.c100.p56 .fill,
.c100.p57 .fill,
.c100.p58 .fill,
.c100.p59 .fill,
.c100.p60 .fill,
.c100.p61 .fill,
.c100.p62 .fill,
.c100.p63 .fill,
.c100.p64 .fill,
.c100.p65 .fill,
.c100.p66 .fill,
.c100.p67 .fill,
.c100.p68 .fill,
.c100.p69 .fill,
.c100.p70 .fill,
.c100.p71 .fill,
.c100.p72 .fill,
.c100.p73 .fill,
.c100.p74 .fill,
.c100.p75 .fill,
.c100.p76 .fill,
.c100.p77 .fill,
.c100.p78 .fill,
.c100.p79 .fill,
.c100.p80 .fill,
.c100.p81 .fill,
.c100.p82 .fill,
.c100.p83 .fill,
.c100.p84 .fill,
.c100.p85 .fill,
.c100.p86 .fill,
.c100.p87 .fill,
.c100.p88 .fill,
.c100.p89 .fill,
.c100.p90 .fill,
.c100.p91 .fill,
.c100.p92 .fill,
.c100.p93 .fill,
.c100.p94 .fill,
.c100.p95 .fill,
.c100.p96 .fill,
.c100.p97 .fill,
.c100.p98 .fill,
.c100.p99 .fill,
.c100.p100 .fill,
.pie {
    border: .08em solid #5FB017;
}
/*-------------------------------*/
/*       Hamburger-Cross         */
/*-------------------------------*/

button.hamburger.is-open {
    display: none;
}
.hamburger {
    position: fixed;
    top: 10px;
    z-index: 999;
    display: block;
    width: 32px;
    height: 30px;
    margin-left: 5px;
    padding: 15px;
    background: #fff;
    border: 5px solid #fff;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
    outline: none;
}
.hamburger.is-closed:before {
    content: '';
    display: block;
    width: 100px;
    font-size: 14px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
    opacity: 1;
    display: block;
    -webkit-transform: translate3d(-100px, 0, 0);
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
    position: absolute;
    left: 100;
    height: 4px;
    width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
    background-color: #4F008C;
}
.hamburger.is-closed .hamb-top {
    top: 4px;
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
    top: 50%;
    margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
    bottom: 4px;
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
    top: 0;
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
    bottom: 0;
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
    background-color: #4F008C;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
    top: 50%;
    margin-top: -2px;
}
.hamburger.is-open .hamb-top {
    -webkit-transform: rotate(45deg);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open .hamb-middle {
    display: none;
}
.hamburger.is-open .hamb-bottom {
    -webkit-transform: rotate(-45deg);
    -webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open:before {
    content: '';
    display: block;
    width: 100px;
    font-size: 14px;
    color: #fff;
    line-height: 32px;
    text-align: center;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
    opacity: 1;
    display: block;
    -webkit-transform: translate3d(-100px, 0, 0);
    -webkit-transition: all .35s ease-in-out;
}
/*-------------------------------*/
/*            Overlay            */
/*-------------------------------*/

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 1;
}
#sub-navigation > .container > .navbar.navbar-inverse {
    background-color: #fff;
    border-color: #ffffff;
}
.navbar-inverse .navbar-nav>li>a {
    color: #FF375E !Important;
    padding-top: 11px;
    padding-bottom: 8px;
    text-decoration: none !important;
    font-size: 16px;
    font-family: stc-font-regular;
}
.navbar-inverse .navbag-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
    background-color: #ffffff;
    border-color: #ffffff;
}
#sub-navigation li.active>a {
    background-color: #ffffff;
    border-color: #ffffff;
}
.is-closed {
    display: none;
}
#sub-navigation > .container > .navbar-fixed-top {
    top: -1px;
    border-width: 0 0 1px;
    position: absolute;
    right: auto;
    left: auto;
    z-index: 1030;
}
.navbar-fixed-top {} .formobile {
    display: none!important;
}
/* Custom, iPhone Retina */
@media only screen and (max-width: 320px) {
    .adustheight {
        height: 100%!important;
    }
    #notification-btn {
        display: none;
    }
    .stc-logo-brand img {
        height: 30px;
        margin-top: 5px;
    }
    .stc-logo-brand {
        padding-top: 10px;
        padding-left: 10px
    }
    .Notification {
        margin-left: -130px!important;
        width: 300px!important;
    }
    .btnspad {
        padding: 4px 4px!important;
    }
}
/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
	.txtmob { overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    max-width: 140px;
	    height: 25px;}
    .benefits-list .newinsurance span.big {
        font-family: 'Stc-Font-bold' !important;
        font-size: 12px;
        padding: 0px;
    }
    .benefits-list .newinsurance {
        font-size: 11px;
        top: 30px;
        z-index: 100;
        padding: 5px 10px 10px 30px;
        position: absolute;
        width: 100%;
    }
    .benefits-list .item-type-move .item-info .date {
        top: 35px !important;
        overflow: scroll;
    }
    .cta_btns {
        left: 10px;
    }
    .benefits-list .item-type-move .item-info {
        width: 293px!important;
        height: 114px!important;
        float: none;
    }
    .headline {
        font-size: 14px;
    }
    .profilewidth {
        width: 100% !important;
        margin-right: -20px;
    }
    #Kudosform .inline-add-form {
        top: -46px;
    }
    #Kudosform {
        margin-top: 0px!important;
    }
   
    .formobile {
        display: block!important;
    }
    .adustheight {
        height: 100%!important;
    }
    .main-menu {
        display: none;
    }
    .mobnod,
    .search-bar,
    .mbfix {
        display: none;
    }
    .container-fluid {} .stc-logo-brand {
        padding-top: 10px;
        padding-left: 10px
    }
   
    a.home-link {} .mbfix {} .padding-left-0 {
        padding-right: 10px !important;
    }
    
    .uib-datepicker-popup {
        max-width: 250px;
        right: 110px!important;
    }
    .Notification {
        margin-left: -130px!important;
        width: 300px!important;
    }
    .margin-top-20 {
        margin-top: 20px;
        margin-right: -15px;
        margin-left: -15px;
    }
    .margin-top-30 {
        margin-top: 20px;
        margin-right: 0px;
        margin-left: -15px;
    }
    .mbbtnfix {
        margin: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .med {
        margin: 10px -5px 10px -15px;
    }
    .mobtabfix {
        margin-top: 10px;
        margin-right: -5px;
        margin-left: -1px;
    }
    #BigEventContainer .dropdown {
        margin-top: 5px!important;
    }
    .MyArea {
        right: -216px !important;
    }
    .min-width,
    .popup-min-width {
        width: 160px;
        min-width: auto!important;
    }
    .benefits-list .item-hover,
    .benefits-list .item-hover .mask,
    .benefits-list .item-img {
        width: 293px!important;
        height: 114px!important;
        float: none;
    }
    .benefits-list .item-img img {
        width: 293px!important;
        height: 114px!important;
        float: none;
    }
    .benefits-list .item {
        width: 293px!important;
        height: 114px!important;
        float: none;
    }
}
@media screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)
{ 
	 .benefits-list .newinsurance span.big {
        font-family: 'Stc-Font-bold' !important;
        font-size: 12px;
        padding: 0px;
    }
    .benefits-list .newinsurance {
        font-size: 11px;
        top: 30px;
        z-index: 100;
        padding: 5px 10px 10px 30px;
        position: absolute;
        width: 100%;
    }
    .benefits-list .item-type-move .item-info .date {
        top: 35px !important;
        overflow: scroll;
    }
    .cta_btns {
        right: 10px;
    }
    .benefits-list .item-type-move .item-info {
        width: 253px!important;
        height: 104px!important;
        float: none;
    }
    .headline {
        font-size: 14px;
    }
    .profilewidth {
        margin-right: -20px;
    }
    .cta_btns {
        left: 10px;
    }
    .benefits-list .item-hover,
    .benefits-list .item-hover .mask,
    .benefits-list .item-img {
        width: 300px;
        height: 116px;
    }
    .benefits-list .item-img img {
        width: 300px;
        height: 116px;
    }
    .benefits-list .item {
        width: 300px;
        height: 116px;
    }
}
/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .benefits-list .newinsurance span.big {
        font-family: 'Stc-Font-bold' !important;
        font-size: 12px;
        padding: 0px;
    }
    .benefits-list .newinsurance {
        font-size: 11px;
        top: 30px;
        z-index: 100;
        padding: 5px 10px 10px 30px;
        position: absolute;
        width: 100%;
    }
    .benefits-list .item-type-move .item-info .date {
        top: 35px !important;
        overflow: scroll;
    }
    .cta_btns {
        right: 10px;
    }
    .benefits-list .item-type-move .item-info {
        width: 340px!important;
        height: 130px!important;
        float: none;
    }
    .headline {
        font-size: 14px;
    }
    .profilewidth {
        margin-left: -20px;
    }
    .benefits-list .item-hover,
    .benefits-list .item-hover .mask,
    .benefits-list .item-img {
        width: 350px;
        height: 135px;
    }
    .benefits-list .item-img img {
        width: 350px;
        height: 135px;
    }
    .benefits-list .item {
        width: 350px;
        height: 135px;
    }
    .mobm20 {
        margin-bottom: 10px!important;
        padding-right: 1px!important;
        padding-left: 1px!important;
        margin-right: -15px;
        margin-left: -15px;
    }
    .teamicomob {
        margin-top: -18px;
        margin-left: 30px;
    }
    .profilewidth {
    width: 725px !important;
}
}
/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
   
        
    .stc-profile-designation .stc-fb-like span {top:70px;}
}
/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {	 
    .benefits-list .newinsurance span.big {
        font-family: 'Stc-Font-bold' !important;
        font-size: 12px;
        padding: 0px;
    }
    .benefits-list .newinsurance {
        font-size: 11px;
        top: 30px;
        z-index: 100;
        padding: 5px 10px 10px 30px;
        position: absolute;
        width: 100%;
    }
    .benefits-list .item-type-move .item-info .date {
        top: 35px !important;
        overflow: scroll;
    }
    .cta_btns {
        right: 10px;
    }
    .benefits-list .item-type-move .item-info {
        width: 293px!important;
        height: 114px!important;
        float: none;
    }
    .headline {
        font-size: 14px;
    }
   .profilewidth {
       width: 585px !important;
      
    }
    .cta_btns {
        left: 10px;
    }
    .benefits-list .item-hover,
    .benefits-list .item-hover .mask,
    .benefits-list .item-img {
        width: 350px;
        height: 135px;
    }
    .benefits-list .item-img img {
        width: 350px;
        height: 135px;
    }
    .benefits-list .item {
        width: 350px;
        height: 135px;
    }
    .userInformationApp img {
        min-width: 20px;
        min-height: 20px
    }
    .mobm20 {
        margin-bottom: 10px!important;
        padding-right: 1px!important;
        padding-left: 1px!important;
        margin-right: -15px;
        margin-left: -15px;
    }
    .teamicomob {
        margin-top: -18px;
        margin-left: 30px;
    }
    
    .formobile {
        display: block!important;
    }
    .adustheight {
        height: 100%!important;
    }
    .mobnod,
    .search-bar,
    .mbfix {
        display: none;
    }
    .nav>li>a {
        padding: 10px 12px;
    }
    
    .navbar-right {
        float: none;
    }
   
    .stc-logo-brand {
        padding-right: 90px
    }
    .is-closed {
        display: block;
    }
    .navbar {
        min-height: 0px;
    }
    #sub-navigation > .container > .navbar-fixed-top {
        top: 0;
        box-shadow: inset 6px 4px 20px 0px rgba(0, 0, 0, 0.5);
        border-width: 0 0 1px;
        position: fixed;
        right: 0;
        left: 0;
        z-index: 1030;
    }
    #sub-navigation li.active>a {
        background-color: #000000;
        border-color: #ffffff;
    }
    button.hamburger.is-open {
        display: block;
    }
    .navbar-nav>li {
        float: none;
    }
    #sub-navigation > .container > .navbar.navbar-inverse {
        background-color: #565656;
        border-color: #565656;
    }
    .stc-progress-circle {
    	max-width: 8em;
    }
    li.formobsub.active>a {
        padding-right: 30px;
    }
    li.formobsub>a {
        padding-right: 30px;
    }
    li.formobsub>a:before {
        font-family: 'FontAwesome';
        content: "\f0d9";
        color: #ffffff;
        margin: 0 -15px 0 10px;
    }
    .Notification {
        background-color: #fff !important;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
        z-index: 10000;
        width: 290px;
        overflow-y: auto;
        position: absolute;
        border-radius: 5px;
        right: -190px;
        border: 1px solid #7c0e86 !important;
    }
    .mb-mobil {
        width: 250px!important;
    }
    .Notification {
        margin-left: -150px!important;
        width: 300px!important;
    }
    .width80 {
        width: 100px!important;
        height: 50%;
        float: none !important;
        margin: 0 auto;
        text-align: center;
    }
    .width70 {
       
    }
    /*-------------------------------*/
    /*           Wrappers            */
    /*-------------------------------*/
    
    #wrapper {
        padding-left: 0;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    #wrapper.toggled {
        padding-right: 220px;
    }
    #sidebar-wrapper {
        z-index: 1000;
        left: 140px;
        width: 0;
        height: 100%;
        margin-right: 0px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #565656;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    #sidebar-wrapper::-webkit-scrollbar {
        display: none;
    }
    #wrapper.toggled #sidebar-wrapper {
        width: 220px;
    }
    #page-content-wrapper {
        width: 100%;
    }
    #wrapper.toggled #page-content-wrapper {
        position: absolute;
        margin-right: -11px;
    }
    /*-------------------------------*/
    /*     Sidebar nav styles        */
    /*-------------------------------*/
    
    .sidebar-nav {
        position: absolute;
        top: 0;
        width: 220px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .sidebar-nav li {
        position: relative;
        line-height: 20px;
        display: inline-block;
        width: 100%;
    }
    .sidebar-nav li:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        height: 100%;
        width: 3px;
        background-color: #1c1c1c;
        -webkit-transition: width .2s ease-in;
        -moz-transition: width .2s ease-in;
        -ms-transition: width .2s ease-in;
        transition: width .2s ease-in;
    }
    .sidebar-nav li:hover:before,
    .sidebar-nav li.open:hover:before {
        width: 100%;
        -webkit-transition: width .2s ease-in;
        -moz-transition: width .2s ease-in;
        -ms-transition: width .2s ease-in;
        transition: width .2s ease-in;
    }
    .sidebar-nav li a {
        display: block;
        color: #ddd;
        text-decoration: none;
        padding: 10px 15px 10px 30px;
    }
    .sidebar-nav li a:hover,
    .sidebar-nav li a:active,
    .sidebar-nav li a:focus,
    .sidebar-nav li.open a:hover,
    .sidebar-nav li.open a:active,
    .sidebar-nav li.open a:focus {
        color: #fff;
        text-decoration: none;
        background-color: transparent;
    }
    .sidebar-nav > .sidebar-brand {
        height: 65px;
        font-size: 20px;
        line-height: 44px;
    }
    .sidebar-nav .dropdown-menu {
        position: relative;
        width: 100%;
        padding: 0;
        margin: 0;
        border-radius: 0;
        border: none;
        background-color: #222;
        box-shadow: none;
    }
    .navbar-nav {
        margin: 0px;
    }
    .navbar-inverse .navbar-nav>li>a {
        color: #ffffff!important;
    }
    .navbar-inverse .navbar-nav>.active>a,
    .navbar-inverse .navbar-nav>.active>a:focus,
    .navbar-inverse .navbar-nav>.active>a:hover {
        background-color: #000;
        border-color: #ffffff;
    }
    .navbar-inverse .navbar-nav>li>a:focus,
    .navbar-inverse .navbar-nav>li>a:hover {
        background-color: #000;
        border-color: #ffffff;
    }
}
/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
   
}
/* calendar tab */
/* added to have all calendar cells clickable after page scroll */

.myCalendar {
    overflow: auto;
    overflow-x: hidden;
}
#BigEventContainer .dropdown {
    margin-top: -7px;
    margin-right: 5px;
}
#creatEvent-popover {
    min-width: 300px;
}
.jqplot-highlighter-tooltip {
    z-index: 999999!important;
}
.float-right {
    float: left;
}
.stc-up {
    color: #00c48c;
}
.stc-down {
    color: #ff6a39;
}
.stc-same {
    color: #3b6795;
}
.uib-datepicker-popup {
    max-width: 250px;
    right: 630px;
}
.color-indicator.red {
    color: #FF375E;
}
.color-indicator.yellow {
    color: #ffde5d;
}
.color-indicator.green {
    color: #04dd4b;
}
.stc-profile-designation .month-year p {
    line-height: 18px!important;
}
.jqplot-xaxis-tick {} .ar-rtl {
    direction: rtl;
}
.loader_img {
    height: 55px;
}
.whiteBg {
    background: white;
}
.white {
    border: 2px solid white;
    border-radius: 10px;
}
.yellowborder {
    border: 2px solid #ffde5d;
    border-radius: 10px;
}
.orangeborder {
    border: 2px solid #faba84;
    border-radius: 10px;
}
.redborder {
    border: 2px solid #ff6a39;
    border-radius: 10px;
}
.redborder+div.top>.arrow,
.yellowborder+div.top>.arrow,
.orangeborder+div.top>.arrow,
,
.whiteBg+div.top>.arrow {
    left: 50%
}
.latenessLabel {
    margin: 0px;
    width: 55px;
    padding: 2px 0px 2px 7px;
    margin-right: 8px;
    text-align: left;
}
.shortnessLabel {
    margin: 0px;
    width: 55px;
    padding: 2px;
    margin-right: 5px;
    text-align: left;
}
.objective-text {
    position: relative;
    width: 100%;
}
.objective-text span {
    max-width: 100%;
    display: inline-block;
    position: relative;
}
.objective-text:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0;
    height: 100%;
    width: 5%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 101%);
}
.ltr {
    direction: ltr;
}
.fa-arrow-right {
    transform: scale(-1) !important;
}
.mb-mobil {
    width: 240px!important;
}
.min-width,
.popup-min-width {
    min-width: 298px;
}
.anchorWidth {
    min-width: 200px;
    max-width: 200px;
    text-align: center;
}
.width80 {
    width: 100%;
    height: 50%;
    float: none !important;
    margin: 0 auto;
    text-align: center;
}
.col-1 {
    width: 10%;
    float: right;
}
.col-10 {
    width: 70%;
    float: right;
}
.col-1 {
    width: 10%;
    float: right;
}

#globalSerachresult .ui-autocomplete {
    height: 146px;
    overflow: hidden;
    overflow-y: auto;
}
.zindex {
    z-index: 99999!important;
}
.mobwid {
    width: 250px!important;
}
.compareDone {
/*     background: #ff375e!important; */
    color: white !important;
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
.ar-mov {
    margin-right: -40px;
}
.uib-datepicker-popup .uib-button-bar {
    display: none;
}
.uib-datepicker-popup {
    width: 100%;
}
.uib-datepicker .btn {
    transform: scale(-1);
}
.user-basic-info-container {
    padding-right: 15px !important;
}
.teamattendanceloading {
    margin-top: 26px !important;
    margin-bottom: 69px !important;
}
.teamattendanceloading #loader {
    right: 46% !important;
}
.vacation-rejection-popup {
    right: -200px;
    display: none;
}
.scrollable-modal {
    position: relative;
    overflow-y: auto;
    height: 60vh;
    padding: 0px;
}
#Kudosform {
}
#Kudosform .contents {
    
    background: white;
    padding: 4px;
    border-radius: 3px;
    margin: -3px;
    z-index: 999999;
}

.team-date-month  {
	padding: 0;
	position: relative !important;
	float: right;
}

.team-date-month p {
	margin: 0;
}
.dropdown-menu>.active>a{
	    background-color: #ff375e;
}
input[type=checkbox] {
    height: 15px;
    width: 15px;
    vertical-align: middle;
    margin: 0 .4em .4em 0;
    border: 1px solid #007dc6;
    -webkit-appearance: none;
    -webkit-transition: box-shadow .2s;
    border-radius: 2px;
    cursor: pointer;
}
.empListcheck {
    position: absolute;
    top: 20px;
    right: -15px;
    margin: 0 !important;
}
.empListcheck label{
	padding: 0 !important;
	margin: 0 !important;
}
.whiteBg+div.top>.arrow,.whiteBg+div>.top>.arrow {
	bottom: -11px;
	left: 50%;
	margin-left: -11px;
	border-top-color: grey;
	border-bottom-width: 0;
}
.whiteBg+div {
    border-bottom: 4px solid grey !important;
}
.jqplot-title{
	    text-align: right !important;
    top: -10px !important;
}
#canvasDraw .jqplot-title{
	padding-right: 12px;
	top: -5px !important;
}

.abcent{background-color: #d49bd8;
    border: 0;
    border-radius: 8.5px;padding-top: 0px;}
.justify{background-color:#00c48c;
    border: 0;
    border-radius: 8.5px;padding-top: 2px;}
.requseted{background-color:#1bcdd8;
    border: 0;
    border-radius: 8.5px;padding-top: 2px;}
.abcent+div{
    border-bottom: 4px solid #d49bd8 !important;
}
.requseted+div{
    border-bottom: 4px solid #1bcdd8 !important;
}
.justify+div{
    border-bottom: 4px solid #00c48c !important;
}
.abcent+div.top>.arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #d49bd8;
    border-bottom-width: 0;
}
.requseted+div.top>.arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #1bcdd8;
    border-bottom-width: 0;
}
.prevent-line-break{
	white-space: nowrap;
	cursor: default;
}
.justify+div.top>.arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #00c48c;
    border-bottom-width: 0;
}
.abcent+div>.arrow:after {
    border-top-color: #d49bd8 !important;
    border-width: 0px;
}
.requseted+div>.arrow:after {
    border-top-color: #1bcdd8 !important;
    border-width: 0px;
}
.justify+div>.arrow:after {
    border-top-color: #00c48c !important;
    border-width: 0px;
}
.spinner{display: none;}
.totallateandshotness{float: left;width:37px; text-align: center;}
.totallateandshotness div:first-child {font-size: 22px; font-weight: bold;float: left;    margin-bottom: -9px;}
.popupdivider{margin: 5px; border-right: 1px solid gray; height: 30px; float: left; opacity: .5;}
.separatorCustomize{margin-bottom: 5px !important; padding: 0px !important;}
.highlight-today {
	font-weight: 700;
	color: #FF375E;	
}
.next-month+.popover,
.last-month+.popover {
    display: none !important;
}
.event-day-header {
	width: 100%;	
	font-weight: 700;
    color: #ff375e;
}
.event-day-gregorian {
	width : 45%;
	float: left;
	text-align: left;
}
.event-day-hijri {
	width : 45%;
	float: right;
	text-align: right;
}

.date.small, .hijriDate.small {
	font-size : 10px;
}
.my-team-summary-error-message {
    margin-right: -5px;
    margin-left: -15px;
}
.rescueheight {
    height: 19px;
    overflow: hidden;
}
.popup-min-width hr {
    margin-left: -7px !important;
    margin-right: -21px !important;
    margin-bottom: 12px !important;
}
.jqplot-highlighter-fiexed{    font-size: 10px !important;
    display: inline !important;}
.teamemail{font-family: stc-font-regular;
    font-size: 12px;
    color: #146ea3;}
    .loader-parent-fixed .spinner-image{    top: 81px !important;left:10px;}  
    .gauge-label-margin-fixed{margin-top: 6px;}
/* *****************************Responsive fixes*****************************     */
.margin-top-m15{margin-top:-30px; }
.pos-controll{    width: 48%;    float: left;  overflow:hidden;  height: 89px;}
.position_relative{ position: relative !important; margin-bottom: 69px; }
.position_apprisalbtnrltv{ position: relative !important; margin-bottom: 78px; }
.marginboth{    margin-bottom: 31px;    margin-top: 63px;}
.marginapprisalbtn{    margin-bottom: 31px;  margin-top: 43px;}
.date{overflow: hidden !important; }
.pos-mobility{position: relative !important;margin-bottom:58px;}
.item-hover .item-info{overflow-x:hidden !important; overflow-y:auto !important;  }
.float-right{float: left};

/*********************** Responsive Design *************************/

/* ipad pro and medium devices other */
@media only screen and (max-width : 1360px) and (min-width : 1024px) {
	.back .status-pane>div,.back .status-pane>section{font-size: 12px !important;}
	h3{font-size: 14px !important;}
	#insurance-limits.date { top: 24px !important;}
}
/*ipad both orentation common css*/
@media only screen and (max-width : 1024px) and (min-width : 768px) {
	
	.txtlimit {    margin-right: 3px;}
	.stc-profile-designation h3 span.mail-link{position: inherit;}
	.stc-profile-designation .mail-link button{margin-bottom: 10px;}
	.pos-mobility{position: relative !important;margin-bottom:26px;}
	    .marginapprisalbtn {
    margin-bottom: 2px;
    margin-top: -9px;
}
  .marginboth{    margin-bottom: 10px;
    margin-top: 31px;}
    .pos-controll{overflow:hidden;  height: 56px;} 
    
	
 }
 /*ipad portrait orentation  css*/
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
	.employee-details .list-unstyled li {
			    white-space: nowrap;
			    width: 55%;
			    overflow: hidden;
			    /* text-overflow: ellipsis; */
			}
	.marginshift{    margin-left: -28px;}
    .paddingshift{padding-left: 8px;}
    .stc-profile-designation .stc-fb-like { top: -5px;}
	
}
/*ipad landscap orentation  css*/

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { .progressrmove1{    width: 94px;    padding-right: 0px;}
.txtlimit { margin-right: 45px;}
}
/* iphon5-6-6s and other android phone landscape mode */
@media only screen and (max-width : 767px) and (min-width : 481px) {  
.stc-profile-designation .stc-fb-like label{float: left;    margin: 6px -12px;} 
}
/* Small Devices, Tablets */
    @media only screen and (max-width : 768px) and (min-width : 481px) {   
 
    .stc-profile-designation .mail-link button{margin-bottom: 10px;}
    .pos-mobility{position: relative !important;margin-bottom:26px;}
        .marginapprisalbtn {
    margin-bottom: 2px;
    margin-top: -9px;
}
    .marginboth{    margin-bottom: 2px;
    margin-top: 10px;}
    #insurance-limits.date {
    top: 24px !important;}
    	h3{font-size: 15px !important;}
		.employee-details2 .list-unstyled li{
			    width: 80%;
		}
		.my-wall-chart-attendance-day{
	  		width: 3.5%;
	  	}
	  	.navbar-nav.cmn-tile-nav{
	  	width: 100%;
	  	}
	  	.smalldevFontsize{
		   font-size: 16px !important;
		}
		.col-md-15:first-child div{padding-left: 4px;}
		#dataSummary div,#dataTeamAttSummary div{width:100%}
		.pos-controll{overflow:hidden;  height: 56px;} 
	  	
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
    .stc-profile-designation .stc-fb-like {
    top: -4px;
}
       .smallscreencss{    margin-top: 6px;
    margin-bottom: 5px;}
    .benefits-list{padding-left: 19px;}
    .margin-top-m15{margin-top:-15px; }
    .badge-smallscrn-alignment {    margin-right: 17px !important;}
    .position_apprisalbtnrltv{position: relative !important;margin-bottom:38px;}
    #dataSummary div,#dataTeamAttSummary div{width:100%}
    .stc-profile-designation .mail-link button{margin-bottom: 10px;}
    .pos-mobility{position: relative !important;margin-bottom:26px;}
    .marginapprisalbtn {
    margin-bottom: 2px;
    margin-top: -9px;
}
    .marginboth{    margin-bottom:0px;
    margin-top: 0px;}
    .pos-controll{overflow:hidden;  height: 56px;} 
    #insurance-limits.date {
    top: 24px !important;}
     h3{font-size: 15px !important;}
	.employee-details2 .list-unstyled li{
		    width: 80%;
		}
	.btn-block-xs-only {
	    display: block;
	    width: 100%;
	    margin-bottom: 10px;
	  }
	  .rescueheight{
	  	overflow: visible;
	  }
	  .my-wall-chart-attendance-day{
	  		    width: 17px !important;
	  		        height: 26px;
	  	}
	  
	  .med{margin:10px -3px 10px -5px}
	  .small_dev_margin0{margin-right: 0px;}

    }



div[role="main"] .inner
{
	padding-top:30px;
	
}

div[role="complimentary"] .inner
{
	padding:0px;

}


.inboxTaskNotification-btn .dropdown-panel {
	width:300px;
	}
	
	#sub-navigation
{
	z-index:0;
}

.show-more
{
	padding-top:10px;
	padding-bottom:10px;
}

#notifi-mob-btn+.dropdown-panel
{
	position: absolute;
    width: 100%;
    transform: translateX(0%);
    top: 50px;
}


#app-items-panel img
{
	    filter: invert() grayscale(1);
}


.position_apprisalbtnrltv p.txtlimit {
	height: 20px;
	margin: 0;
}

.text-center.no-loan {
	line-height: 169px;	

}

.custom-dropdown .dropdown-toggle .caret {
    margin-right: 0px;
}



.team-summary .no-link {
	cursor: default;
}
.palnned-vacation-badge{
	font-size: 20px !important;
	vertical-align: bottom;
}
.request-vacation-popover{
	    min-width: 260px;
    text-align: center;
}

.vacation-types-dropdown .dropdown-menu>.active>a,
.vacation-types-dropdown .dropdown-menu>.active>a:focus,
.vacation-types-dropdown .dropdown-menu>.active>a:hover{
    background-color: transparent !important;
    color: #333 !important;
}

.vacation-types-dropdown li > a:hover{
	color: white !important;
    background: #ff375e !important;
}
.removePadding {
    padding: 0px;
}
.removeMargin {
    margin: 0px;
} 
.truncate-text{
	 width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-team-attendance-row div.col-sm-9 {
    padding-left: 0px;
    padding-right: 8px;
}
.padding-added-fixed{padding-right: 7px;}
.padding-left-fixed{padding-right: 0px;}
.padding-smallrect-fixed{padding-left: 5px;    padding-right: 15px;}
.padding-left-team-fixed{    padding: 25px 8px 25px 14px;}

/*****************************New Profile Benefit Style*************************/
.profile-details-row .col-md-6:nth-child(2n){
	padding-right: 7px;
}
.profile-details-row .col-md-6:nth-child(2n+1){
	padding-left: 7px;
}
.profile-details-contianer{
	border-radius: 10px;
    height: 170px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    position: relative;
    margin-bottom: 15px;
}
.profile-details-contianer.salary{
	background-image: url(/portal/myGate/images/1.jpg)
}

.profile-details-contianer.insurance{
	background-image: url(/portal/myGate/images/2.jpg)
}

.profile-details-contianer.loan{
	background-image: url(/portal/myGate/images/3.jpg)
}

.profile-details-contianer.career{
	background-image: url(/portal/myGate/images/4.jpg)
}
.profile-details-contianer.mobility{
	background-image: url(/portal/myGate/images/5.jpg)
}
.profile-details-contianer.school{
	background-image: url(/portal/myGate/images/6.jpg)
}
.profile-details-contianer.offers{
	background-image: url(/portal/myGate/images/7.jpg)
}
.profile-details-contianer.performance{
	background-image: url(/portal/myGate/images/8.jpg)
}

.profile-details-contianer header{
	color: #f2f4f8;
    padding: 0 15px !important;
    font-size: 35px;
    z-index: 9;
    position: relative;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}
.profile-details-contianer:after{
	content:'';
	width: 100%;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 15px;
    background: #4F008C;
    opacity:0.8;
    height: 0;
    transition:height 0.1s linear;
    will-change: transform;
    transform: translateZ(0);
}
.profile-details-contianer:hover:after{
	height: 100%;
}
.profile-details-contianer summary{
	display: none;
	z-index: 9;
	position: relative;
	padding: 0px 15px !important;
	color: white;
	    position: absolute;
    width: 100%;
    top: 48px;
}
.profile-details-contianer summary p{
	margin-bottom: 3px;
}
.profile-details-contianer summary h3{
	margin-top: 10px;
	color: white;
}
.profile-details-contianer:hover summary{
	display: block;
}
.profile-details-contianer .profile-action{
	position: absolute;
	left: 15px;
	bottom: 15px;
	display: none;
	z-index: 10;
}
.profile-details-contianer:hover  .profile-action{
	display: block
}

.profile-details-contianer .profile-details-seperator{
margin: 0px;
    margin-bottom: 9px;
    opacity: 0.2;
    /* margin-right: 15px; */
    margin-top: 3px;
    }

       
     @media only screen and (max-width : 768px) and (min-width : 481px) {
	     .employee-details .list-unstyled li {
			    white-space: nowrap;
			    width: 55%;
			    overflow: hidden;
			    /* text-overflow: ellipsis; */
			}
	     .profile-details-contianer summary,
	     .profile-details-contianer .profile-action
	     {
	     	display: block
	     }
	     .profile-details-contianer:after{
	     height: 100%;
	     }
     }
     @media only screen and (max-width : 481px) {
     .employee-details .list-unstyled li {
			    white-space: nowrap;
			    width: 55%;
			    overflow: hidden;
			    /* text-overflow: ellipsis; */
			}
     	.profile-details-row .col-md-6{
	     	padding-left: 15px !important;
	     	padding-right: 15px !important;
	     }
	     .profile-details-contianer summary,
	     .profile-details-contianer .profile-action
	     {
	     	display: block
	     }
	      .profile-details-contianer:after{
	     height: 100%;
	     }
     }
    
    .expand-left-right-fix
    {
    margin-left:-25px;
    margin-right:-25px;
    }
    
    .expand-left-right-10-fix
    {
    margin-left:-10px;
    margin-right:-10px;
    }
    
    .info
{
	padding-top:10px;
}

 .info img {
    float: right;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    border: 1px solid #c2c2c2;
    margin-left: 5px;
}

.info .desc {
    float: right;
    width: 160px;
    padding-top: 6px;
    margin-right: 13px;
}

.info .desc .MyAreaName {
    text-align: right;
    padding-bottom: 3px;
    color: #FF375E;
    text-transform: uppercase;
}
.info .desc .MyAreaDetail {
    color: #888;
}
    
.mobility-modal-container th {
	white-space: nowrap;	
}

.profile-details-contianer.mobility .profile-action.report-btn-fix {
	left: 92px;
}

.profile-details-contianer.school .report-btn-fix {
	left: 116px;	
}

.school-fees-modal-dialog-fix {
	width: 900px;

}

span.mail-link.linknew {
    margin-right: 10px;
}

span.mail-link.linknew .dropdown-menu{
	z-index:999

}

.empty-state-cta-icon{
	font-size:22px !important;
	color: rgb(113, 44, 129);
	vertical-align: middle;
}

.sub-employees-list{
	margin-top: 15px;
}
.sub-employees-list img{
	    margin-bottom: 10px;
    border: 1px solid #d5d5d5;
    height: 25px;
    width: 83%;
    display: inline-block;
}
.more-team-items{
	line-height: 25px;

}

div#objectives {
    transition: all 0.3s linear;
}
.extra-small-text{
	font-size: 10px;
}
.fc-event-container.details-fix .fc-event {
    background: transparent;
    text-align: left;
}

.fc-event-container.details-fix .fc-time {
    display: none
}

.fc-event-container.details-fix a{
	margin-top: -6px;
}


.fc-row .fc-content-skeleton tbody td{
    padding: 1px 0;
}

.fc-title.caret {
 	border-top: 7px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    color: #aaa;
}


/****************** Search New Design ****************************/


#globalSerachresult ul{
	    position: absolute;
    top: -12px;
    right: 15px;
    width: 100%;
    border: 1px solid #d5d5d5;
    margin: 0;
    list-style: none;
    background: white;
    width: 270px;
    z-index: 9999;
}

#globalSerachresult ul li.search-header{
	    color: #FF375E;
    padding: 5px 10px;
    border-bottom: 1px solid #d5d5d5;
    background: rgba(213, 213, 213, 0.1);
}


#globalSerachresult ul li{
	    border-bottom: 1px solid #d5d5d5;
}
#globalSerachresult ul li:last-child{
	border-bottom: none;
}

#globalSerachresult ul li a{
    padding: 5px 10px;
    display: inline-block;
    }
    #globalSerachresult ul li a:hover{
    	text-decoration: none;
    	background: rgba(213, 213, 213, 0.05)
    }
    
    #globalSerachresult .media-object{
        width: 45px;
        height: 45px;
    }
    .stc-red-yarMontView .btn:first-child{    border-bottom-left-radius: 0px;    padding: 4px 21px 7px 25px;}
.stc-red-yarMontView .btn:last-child{    border-bottom-right-radius: 0px;    padding: 4px 21px 7px 25px;}
.stc-red-yarMontView .btn:last-child:hover,.stc-red-yarMontView .btn:first-child:hover{    background-color: #ff375e!important;border-color: #ff375e;}
.stc-red-yarMontView .btn.active{    border-color: #ff375e;}
.stc-red-yarMontView .btn.active{box-shadow: none;
    background: #ff375e!important;
    color: white;}
.stc-filters{border: none;}
.text-center{text-align:center; }
.border-top{border-top: 1px solid #e8e8e8;}
.yearlyview{ width: 10px !important; padding: 0px !important; height: 10px !important;}
.spaceless{width:0px !important;}
.cursor-pointer{cursor: pointer;}
.years-slider{display: inline-flex; width: 180px;overflow: hidden;}
.years { margin-left: 14px;color: #e8e8e8;}
.years.active{    font-weight: bolder; font-size: 16px; margin-top: -3px;color: #000;}
.slider-container{float: right; padding-right: 23px; margin-top: 10px;}
.disable{color:lightgray;cursor: default;}
.check-modified{color:#ff375e;}
.width-reset{width:8.02% !important;}
.btn-pink-bordered:hover .check-modified{color:#fff;}
.padding-reset { padding: 4px 2px 0px 2px !important; border-left: 1px solid #e8e8e8; min-height: 76px; width: 8.335% !important; max-height: 76px;}
.padding-right-left-reset{padding-left:2px !important; }
.padding-bottom-reset{padding-bottom:0px !important; }
.currentMonthHeader{font-size:18px; }
.hover-color:hover{background:#e8e8e8;borde-radius:5px; }
.yearlyview.multiDayEvents {width: 7px !important;}
.yearlyLoader{height: 74px;    margin-left: 2px;}.yearlyLoader-smallloading{    margin-top: 93px;}
.hover-color:FIRST-CHILD {border-left: 1px solid #e8e8e8;}

/* job description begin */
	
.jobDescription li.active {
	text-decoration: none;
	border-bottom: 3px solid #FF375E;
}

.jobDescription li  {
  	text-decoration: none;
	list-style: none;
	border: none;
	margin-bottom: 12px;
}
.jobDescription .nav-tabs>li>a:hover {
    color: #FF375E !important;
    background: none;
    border-bottom: 3px solid #FF375E;
}

.jobDescription .nav-tabs>li.active>a:focus, .jobDescription .nav-tabs>li.active>a:hover {
	border : none;
}
 
.jobDescription .nav-tabs>li>a {
	border : none;
	color: #aaa !important;
}

.jobDescription .nav-tabs>li.active>a {
	border : none;
	color: #FF375E !important;
}

.jobDescription .nav-tabs>li {
	margin-bottom: -2px;
}

.jobDescription .nav-tabs {
	margin: 0 30px;	
}

.jobDescription .tab-container ul li:before {
	font-family: 'FontAwesome';
    content: "\f0c8";
    margin: 2px -20px 0 5px;
    color: #ffdd40;
    float: right;
    font-size: 13px;
    
    
}
.competencies-container .progress span{
	    font-size: 11px;
    display: inline-block;
    top: -3px;
    position: relative;
}
.jobDescription .tab-container ul li span{
	float: right;
}

.role-resp-keywords-container {	
	vertical-align: top;	
}

.role-resp-keywords-container .keyword {
	background: #eee;
    border: 1px solid #eee;
    text-decoration: underline;
    border-radius: 7px;
    white-space: nowrap;
    line-height: 3em;
    padding: 0.3em 0.7em;
    margin-right: 10px;
}

.tab-container.competencies {
	padding: 0 40px;	
}

.tab-container.competencies .progress-bar {
	background-color: #4F008C;	
	border-radius: 10px;
} 

.tab-container.competencies .progress {
	background-color: #eee;	
	border-radius: 10px;
	height: 14px;
}

.competencies .competencies-container {
	padding: 16px 0px;
}



/* .competencies .competencies-container .row [class*=col-"] {
	padding: 0;
} */

.tech-competency-container {
	text-align: center;
	margin-bottom: 22px;
}

.tech-competency-code {
	color: #FF375E;
	font-size: 38px;
    font-weight: bold;
    text-align: center;
    height: 40px;
}

.tech-competency-desc {
	font-size: 14px;         
}

h2.role-qualification-header {
	color: #4F008C;
	margin-left: 7px;
    font-size: 23px;
}

.typical-experience-desc {
	padding: 0px 10px 0 39px;
}
.work-conditions-container {
	margin: 0;
	padding : 65px 10px 60px 10px;
}
.work-conditions-title {
	margin-top: 20px;
	font-size: 19px;
    font-weight: bolder;
    text-align: center;
}
.work-conditions-img {
	margin: 20px 0;
    text-align: center;
}
.work-conditions-desc {	  
	 text-align: center;	
}

button#job-type-dropdown {
	color: #FF375E;
}

.competencies .competencies-container .first-col-nopad{
	padding: 0;
}	

@media ( max-width: 768px) {
	.jobDescription .nav-tabs {
		border: none;
	}	
	.jobDescription .tab-content {
		margin-top: -25px;
	}	
	.role-resp-container {
		padding: 0;
		margin: 0;
	}
	.role-resp-container ul{
		margin-right: 50px;
	}
	.role-resp-container .row {
		padding: 0;
		margin: 0;
	}
	.role-resp-desc-container {
		padding: 10px 0;
	}
	.tab-container.competencies {
		padding: 0 10px;	
	}
}

@media (min-width: 768px) {
	#job-desc-modal-dialog.modal-dialog {
		width: 87%;
	}	
}

@media (min-width: 769px) {
	/* rules for ipad and iphone6
	} */
	.role-resp-container {
		margin: 0;
	}	
	.tab-container ul {
		margin: 1em 3em;
	}
	.role-resp-desc-container li{
		margin-bottom: 10px;
	}
	.role-resp-desc-container li span {
		padding-left: 0px;
	    display: inline-block;
	    vertical-align: top;
	}	
	.role-qualification-container {
		margin: 20px 30px;
	}
	h2.role-qualification-header {		
		margin-left: 17px;
	}	
	.competencies .competencies-container .second-col-space{
		padding: 0 0 0 60px;
	}	
}
.competency-pill{
	background: #f3f3f1;
	border-radius: 5px;
	display: inline-block;
	padding: 0px 20px;
	float: right;
	margin-left: 20px;
	margin-top: 20px;
}
.reminder-delete{
position:absolute;
left:0;
top:0;
opacity:0;
transition:all .2s linear;
}
.reminder-item:hover .reminder-delete{
	opacity:1;
}
.media-body{position:relative;}
/* job description end */