@charset "utf-8";

/* CSS Document */

@font-face {
    font-family: 'Helvetica Neue';
    src: url('fonts/HelveticaNeue.eot');
    src: url('fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'), url('fonts/HelveticaNeue.woff') format('woff'), url('fonts/HelveticaNeue.ttf') format('truetype'), url('fonts/HelveticaNeue.svg#HelveticaNeue') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* MATERIAL ICONS */

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MaterialIcons-Regular.eot);
    /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(fonts/MaterialIcons-Regular.woff2) format('woff2'), url(fonts/MaterialIcons-Regular.woff) format('woff'), url(fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

::-webkit-input-placeholder {
    color: #d8d8d8;
}

::-moz-placeholder {
    color: #d8d8d8;
}

:-ms-input-placeholder {
    color: #d8d8d8;
}

:-moz-placeholder {
    color: #d8d8d8;
}

textarea:focus,
input:focus {
    outline: none;
}

*:focus {
    outline: none;
}

textarea {
    resize: none;
}

* {
    -webkit-tap-highlight-color: transparent;
}

ul {
    padding: 0;
}


/* START OF LOGIN PAGE CSS */

#error_msg {
    color: red;
    font-size: 12px;
    padding: 10px 0;
}

#login_form {
    width: 100%;
    min-height: 150px;
    margin: auto;
}

#login_content {
    width: 100%;
    top: 100px;
    position: relative;
}

#login_form label {
    font-size: 14px;
    margin: 10px 2px 2px 2px;
    font-weight: bold;
}

#login_form input {
    font-size: 14px;
}

#login_form button {
    width: 100%;
}


/* END OF LOGIN PAGE CSS */


/* START OF MENU BAR CSS */

.menuContainer {
    width: 100%;
    height: 45px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    float: left;
    -webkit-box-shadow: 0 4px 20px 0 #ECECEC;
    -moz-box-shadow: 0 4px 20px 0 #ECECEC;
    box-shadow: 0 4px 20px 0 #ECECEC;
}

.menuContainer .menuLeftContent {
    width: auto;
    float: left;
    height: 100%;
}

.menuContainer .menuLeftContent ul {
    padding: 0;
    width: auto;
    height: 100%;
    margin: 0;
}

.menuContainer .menuRightContent {
    width: auto;
    float: right;
    height: 100%;
}

.menuContainer .menuRightContent ul {
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
}

.menuContainer .menuLeftContent ul li {
    list-style: none;
    float: left;
    padding: 5px 10px 0;
}

.menuContainer .menuRightContent ul li {
    list-style: none;
    list-style-type: none;
    border-left: solid 1px #ffffff;
    float: right;
    height: 100%;
}

.menuContainer .menuRightContent ul li:last-child {
    border: 0 !important;
}

.menuContainer .menuRightContent ul li .rightMenu.first {
    padding: 12px 15px;
    position: relative;
}

.menuContainer .menuRightContent ul li .rightMenu.first p {
    cursor: pointer;
}

#lBtn {
    margin-left: 8px;
}

.menuContainer .menuRightContent ul li .rightMenu {
    padding: 5px 5px;
}

.menuContainer .menuRightContent ul li .rightMenu.hierarchyMenu {
    padding: 12px 10px 0;
}

.menuContainer .menuRightContent ul li .rightMenu p {
    cursor: pointer;
    margin: 0;
    float: left;
}

#pName {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    padding: 7px 5px 0 5px;
    float: left;
}

.menuContainer .menuRightContent ul li .rightMenu.hierarchyMenu p {
    cursor: pointer;
    font-size: 11px;
    font-family: "Helvetica Neue", sans-serif;
    width: auto;
    max-width: 110px;
    padding: 1px 5px;
    clear: both;
    float: left;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* To fix bootstrap issue 
p{
	margin: 0 !important;	
}*/


/** {
    -webkit-box-sizing: unset !important;
    box-sizing: unset !important;
}*/

.h2,
h2 {
    font-size: 100% !important;
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit !important;
    font-weight: normal !important;
    line-height: normal !important;
    color: inherit !important;
}

.menuContainer .menuRightContent ul li:last-child .rightMenu.first {
    position: relative;
}

#nCountContainer {
    background-color: #d0021b;
    border: solid 1px #d0021b;
    border-radius: 15px;
    position: absolute;
    right: 6px;
    top: 2px;
}

#nCountContainer p {
    padding: 0 5px;
    font-size: 12px;
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
}

.menuContainer .menuLeftContent ul li#homeMenu {
    padding: 0 20px 0 50px !important;
}

.menuContainer .menuLeftContent ul li .menuList {
    padding: 2px 0;
    width: auto;
    height: auto;
    min-height: 40.5px;
    cursor: pointer;
    position: relative;
}

.menuContainer .menuLeftContent ul li .menuList a p {
    margin: 11px 0;
}

.menuContainer .menuLeftContent ul li .menuList.active aside {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: block;
    margin-bottom: 1px;
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    padding: 0;
    border: 2px solid #26D5AB;
}

.menuContainer .menuLeftContent ul li .menuList aside {
    display: none;
}

.menuContainer .menuLeftContent ul li .menuList.first {
    padding: 0 5px;
}

.menuContainer .menuLeftContent ul li .icon {
    float: left;
    width: auto;
    padding: 6px 5px 0 2px;
}

.menuContainer .menuLeftContent ul li .menuText {
    padding: 7px 5px 4px 0;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    width: auto;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFFFFF;
}

#search_manual .ui-autocomplete.ui-widget input.ui-inputtext {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    line-height: 16px;
    background: #ffffff;
    border: 0;
    position: absolute;
    left: 0px;
    top: -13px;
    padding: 0px 0 0 10px;
    box-shadow: none;
    text-align: left;
    border-radius: 2px;
    height: 30px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


/* END OF MENU BAR CSS */


/* START OF BODY CONTAINER CSS */

.linen_body {
    color: rgba(0, 0, 0, .87);
    background: #f5f5f5;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: "Helvetica Neue", sans-serif;
    height: auto;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    /*overflow-y: hidden;*/
    z-index: 999999;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-width: 900px;
}

.linenContainer {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 999999;
    overflow-x: hidden;
    /*overflow-y: hidden;*/
}

.linenMainContainer {
    margin: 0 auto;
    width: 100%;
    height: auto;
    min-height: 94vh;
    float: left;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    display: block;
}


/* END OF BODY CONTAINER CSS */


/* START OF LANDING PAGE CSS */

.whiteBG {
    background: #ffffff;
}

.linenMainContent {
    width: 90%;
    margin: 100px auto 0;
    padding-bottom: 75px;
}

.welcomeMsgContainer {
    width: auto;
    height: auto;
    text-align: center;
    list-style-type: none;
}

.welcomeMsgContainer li {
    margin: 0 0 0 38px;
    width: 100%;
    height: auto;
    display: inline-block;
}

.welcomeMsgContainer li:last-child {
    margin: 0;
}

.welcomeMsgContainer li p#welcomeMsg {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 35px;
    color: #4A4A4A;
    text-shadow: 1px 1px 1px rgba(0, 35, 24, 0.29);
    font-weight: bold;
    margin: 0;
    text-align: left !important;
    width: 100%;
    /*white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;*/
}

@-moz-document url-prefix() {
    .welcomeMsgContainer li {
        margin: 0 9px 0 0;
        width: 221px;
    }
}

.welcomeMsgContainer li aside#welcomeMsgAside {
    width: 45px;
    margin-top: 35px;
    background: #000000;
    border: 1px solid #000000;
}

.menu_links {
    width: auto;
    height: auto;
    margin: 7% auto;
    text-align: center;
    list-style-type: none;
}

.menu_links li {
    margin: 60px 15px 10px 0;
    width: 215px;
    height: 233px;
    display: inline-block;
}

.menu_links li:last-child {
    margin: 60px 0 10px 0;
}

#hierarchyBG,
#accountBG,
#creditingBG,
#planningBG,
#siteBG,
#rulesBG,#quotaBG {
    height: 216px;
    width: 185px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 7px 10px 8px 0 rgba(166, 166, 166, 0.16);
}


/*#hierarchyBG:hover, #accountBG:hover, #creditingBG:hover, #planningBG:hover, #siteBG:hover,#hierarchyBG.hover, #accountBG.hover, #creditingBG.hover, #planningBG.hover, #siteBG.hover{
	box-shadow: 0 24px 24px 0 rgba(155,155,155,0.3), 0 0 24px 0 rgba(155,155,155,0.22);
}*/

#hierarchyBG:hover,
#creditingBG:hover,
#hierarchyBG.hover,
#creditingBG.hover,
#accountBG.hover,
#rulesBG:hover,
#rulesBG.hover,#quotaBG:hover,#quotaBG.hover,#planningBG:hover,#planningBG.hover,#siteBG:hover,#siteBG.hover {
    box-shadow: 0 24px 24px 0 rgba(155, 155, 155, 0.3), 0 0 24px 0 rgba(155, 155, 155, 0.22);
}

#hierarchyBG {
    background: url(../images/hierarchy_tile.svg) no-repeat;
}

#accountBG {
    background: url(../images/account_tile.svg) no-repeat;
}

#quotaBG {
    background: url(../images/quota_tile.png) no-repeat;
}
#creditingBG {
    background: url(../images/crediting_tile2.png) no-repeat;
}
#rulesBG{
    background: url(../images/rules_tile.png) no-repeat;
}

#planningBG {
    background: url(../images/planning_tile.png) no-repeat;
}

#siteBG {
    background: url(../images/site_tile.svg) no-repeat;
}


#planningBG.inactive,
#siteBG.inactive,
#creditingBG.inactive,
#hierarchyBG.inactive,
#rulesBG.inactive
#accountBG.inactive,#quotaBG.inactive {
    opacity: 0.3;
    cursor: default;
}

#linen_footer {
    position: relative;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

#linen_footer ul {
    list-style-type: none;
    padding: 40px 50px;
    margin: 0;
    padding: 0;
}

#linen_footer ul li {
    list-style: none;
    float: right;
    width: auto;
    padding: 5px 15px;
}

#linen_footer ul li p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 10px;
    cursor: pointer;
    margin: 0;
}


/* END OF LANDING PAGE CSS */


/* START OF LEFT SIDE MENU BAR AND RIGHT SIDE CONTAINER CSS */

.leftSideMenuContainer,
.admin_leftSideMenuContainer {
    background: #ffffff;
    float: left;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    outline: 0;
    box-sizing: border-box;
    overflow-y: auto;
    transform: translate3d(0px, 0px, 0px);
    visibility: visible;
    -webkit-box-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.08), 0 0 16px 0 rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.08), 0 0 16px 0 rgba(0, 0, 0, 0.06);
    box-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.08), 0 0 16px 0 rgba(0, 0, 0, 0.06);
}

.leftSideMenuContainer.expanded,
.admin_leftSideMenuContainer.expanded {
    /*width: 17.8%;*/
    width: 257px;
}

.leftSideMenuContainer.collapsed,
.admin_leftSideMenuContainer.collapsed {
    /*width: 5.4%;*/
    width: 77px;
}

.sideBarNavigation {
    float: right;
    width: auto;
    height: auto;
}

.leftSideMenuContainer.expanded .sideBarNavigation #minus {
    width: 12px;
    height: 4px;
    margin: 10px 15px 0 !important;
    padding: 5px;
    cursor: pointer;
}
.leftSideMenuContainer.expanded .sideBarNavigation #minus.hImg {
    background: url(../images/HierarchyImages/menuMinimize.png) no-repeat;
}
.leftSideMenuContainer.expanded .sideBarNavigation #minus.scImg {
    background: url(../images/Crediting/orangeIcons/collapse.png) no-repeat;
}
.leftSideMenuContainer.expanded .sideBarNavigation #minus.qImg {
    background: url(../images/QuotaImages/collapse.png) no-repeat;
}

.leftSideMenuContainer.collapsed .sideBarNavigation #plus {
    width: 12px;
    height: 12px;
    margin: 7px 10px 0 !important;
    cursor: pointer;
}
.leftSideMenuContainer.collapsed .sideBarNavigation #plus.hImg {
    background: url(../images/HierarchyImages/menuMaximize.png) no-repeat;
}
.leftSideMenuContainer.collapsed .sideBarNavigation #plus.scImg {
    background: url(../images/Crediting/orangeIcons/expand.png) no-repeat;
}
.leftSideMenuContainer.collapsed .sideBarNavigation #plus.qImg {
    background: url(../images/QuotaImages/expand.png) no-repeat;
}
.leftSideMenuContainer.expanded .sideBarNavigation #minus,
.leftSideMenuContainer.collapsed .sideBarNavigation #plus,
.leftSideMenuContainer.expanded .side_hierarchy_logo #logoExpanded,
.leftSideMenuContainer.collapsed .side_hierarchy_logo #logoCollapsed,
.leftSideMenuContainer.expanded .sideMenuName,
.admin_leftSideMenuContainer.expanded .sideBarNavigation #minus,
.admin_leftSideMenuContainer.collapsed .sideBarNavigation #plus,
.admin_leftSideMenuContainer.expanded .side_admin_logo #logoExpanded,
.admin_leftSideMenuContainer.collapsed .side_admin_logo #logoCollapsed,
.admin_leftSideMenuContainer.expanded .sideMenuName,
.leftSideMenuContainer.expanded .side_quota_logo #logoExpanded,
.leftSideMenuContainer.collapsed .side_quota_logo #logoCollapsed {
    display: block;
}

.leftSideMenuContainer.collapsed .sideBarNavigation #minus,
.leftSideMenuContainer.expanded .sideBarNavigation #plus,
.leftSideMenuContainer.collapsed .side_hierarchy_logo #logoExpanded,
.leftSideMenuContainer.expanded .side_hierarchy_logo #logoCollapsed,
.leftSideMenuContainer.collapsed .sideMenuName,
.admin_leftSideMenuContainer.collapsed .sideBarNavigation #minus,
.admin_leftSideMenuContainer.expanded .sideBarNavigation #plus,
.admin_leftSideMenuContainer.collapsed .side_admin_logo #logoExpanded,
.admin_leftSideMenuContainer.expanded .side_admin_logo #logoCollapsed,
.admin_leftSideMenuContainer.collapsed .sideMenuName,
.leftSideMenuContainer.collapsed .side_quota_logo #logoExpanded,
.leftSideMenuContainer.expanded .side_quota_logo #logoCollapsed{
    display: none;
}

.leftSideMenuContainer.expanded .side_hierarchy_logo,
.admin_leftSideMenuContainer.expanded .side_admin_logo, .leftSideMenuContainer.expanded .side_quota_logo {
    height: 100px;
}

.leftSideMenuContainer.collapsed .side_hierarchy_logo,
.admin_leftSideMenuContainer.collapsed .side_admin_logo, .leftSideMenuContainer.collapsed .side_quota_logo  {
    height: 125px;
}
.side_hierarchy_logo, .side_quota_logo {
    clear: both;
    width: auto;
    margin: 0;
}
.side_hierarchy_logo{
    border-bottom: 2px solid #bce1cf;
}
.side_hierarchy_logo.scImg{
    border-bottom: 2px solid #f37a2969 !important;
}

.side_quota_logo {
    border-bottom: 2px solid #2e8bdb;
}

.side_hierarchy_logo div img,
.side_admin_logo div img,
.side_quota_logo div img {
    float: left;
    padding: 20px 7px 5px 17px;
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

.side_hierarchy_logo div p#fullText,
.side_hierarchy_logo div p#initial,.side_quota_logo div p#fullText,
.side_quota_logo div p#initial {
    font-size: 28px;
    font-family: "Helvetica Neue", sans-serif;
    float: left;
    font-weight: bold;
}
.side_hierarchy_logo div p#fullText,
.side_hierarchy_logo div p#initial{
    color: #22B24B;
}
.side_quota_logo div p#fullText,
.side_quota_logo div p#initial {
    color: #2e8bdb;
}

.side_hierarchy_logo div p#fullText,
.side_admin_logo div p#fullText,
.side_quota_logo div p#fullText {
    padding: 20px 5px;
}

.side_hierarchy_logo div p#initial,
.side_admin_logo div p#initial,
.side_quota_logo div p#initial {
    padding: 5px 25px;
}

.leftSideMenuContent,
.admin_leftSideMenuContent {
    position: relative;
    height: auto;
    width: auto;
}

.switchContainer {
    position: absolute;
    left: 15px;
    width: auto;
    height: auto;
    margin-top: -12px;
}

.leftSideMenuContent ul,
.admin_leftSideMenuContent ul {
    list-style: none;
    margin: 0 0 55px;
    padding: 0;
}

.leftSideMenuContent ul li,
.admin_leftSideMenuContent ul li {
    list-style: none;
    margin: 5px auto;
    width: 100%;
    height: 35px;
    cursor: pointer;
}

.leftSideMenuContainer .leftSideMenuContent ul li div,
.admin_leftSideMenuContainer .admin_leftSideMenuContent ul li div {
    width: 100%;
    height: 100%;
    padding: 3px 0;
    position: relative;
    cursor: pointer;
}

.leftSideMenuContainer .leftSideMenuContent ul li div a,
.admin_leftSideMenuContainer .admin_leftSideMenuContent ul li div a {
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
}

.leftSideMenuContainer .leftSideMenuContent ul li div .sideMenuIcon,
.admin_leftSideMenuContainer .admin_leftSideMenuContent ul li div .sideMenuIcon {
    margin: 2px 5px 2px 20px;
    float: left;
}

.leftSideMenuContainer .leftSideMenuContent ul li div .sideMenuName,
.admin_leftSideMenuContainer .admin_leftSideMenuContent ul li div .sideMenuName {
    padding: 6px 2px 5px 10px;
    float: left;
    color: #4A4A4A;
    font-size: 16px;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 600;
    opacity: 0.5;
    width: 175px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leftSideMenuContainer .leftSideMenuContent ul li.active div .sideMenuName {
    color: #22B24B;
    opacity: 1;
}

.leftSideMenuContainer .leftSideMenuContent ul li.sc_active div .sideMenuName {
    color: #F37A29;
    opacity: 1;
}

.leftSideMenuContainer .leftSideMenuContent ul li.quota_active div .sideMenuName {
    color: #2e8bdb;
    opacity: 1;
}

#CountContainer {
    position: absolute;
    right: 10px;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    padding: 0;
    background-color: #dd5f43;
    border: solid 1px #dd5f43;
}

#CountContainer p {
    padding: 0;
    font-size: 10px;
    margin: 0;
    text-align: center;
    font-family: "Helvetica Neue", sans-serif;
    color: #ffffff;
}

.leftSideMenuContainer .leftSideMenuContent ul li.active {
    border-right: 5px solid #22B24B;
}
.leftSideMenuContainer .leftSideMenuContent ul li.sc_active {
    border-right: 5px solid #F37A29;
}

.leftSideMenuContainer .leftSideMenuContent ul li.quota_active {
    border-right: 5px solid #2e8bdb;
}

.leftSideMenuContainer .leftSideMenuContent ul li.active #CountContainer {
    margin-right: -5px;
}

.rightContainer {
    float: left;
    height: auto;
    position: relative;
    z-index: 1;
    /*overflow: auto;*/
    box-sizing: border-box;
    min-height: 94vh;
}

.rightContainer.expanded {
    width: 93.7%;
    margin-left: 97px;
    margin-right: 0;
}

.rightContainer.collapsed {
    width: 84%;
    margin-left: 277px;
    margin-right: 0;
}


/* END OF LEFT SIDE MENU BAR AND RIGHT SIDE CONTAINER CSS */


/* START OF HIERARCHY LANDING PAGE CSS */

.calendarContainer {
    float: left;
    width: 67%;
    height: auto;
    margin-top: 15px;
    background: #ffffff;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 11px 0 rgba(80, 141, 202, 0.13), 6px 3px 9px 0 rgba(117, 165, 177, 0.08);
    -moz-box-shadow: 0 0 11px 0 rgba(80, 141, 202, 0.13), 6px 3px 9px 0 rgba(117, 165, 177, 0.08);
    box-shadow: 0 0 11px 0 rgba(80, 141, 202, 0.13), 6px 3px 9px 0 rgba(117, 165, 177, 0.08);
}

.rightSideContainer {
    float: right;
    width: 30%;
    height: auto;
    margin-left: 20px;
}

.progressContainer,
.eventContainer {
    float: left;
    width: 100%;
    margin-top: 15px;
    border: 0.25px solid #508DCA;
    background: #ffffff;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 11px 0 rgba(80, 141, 202, 0.13), 6px 3px 9px 0 rgba(117, 165, 177, 0.08);
    -moz-box-shadow: 0 0 11px 0 rgba(80, 141, 202, 0.13), 6px 3px 9px 0 rgba(117, 165, 177, 0.08);
    box-shadow: 0 0 11px 0 rgba(80, 141, 202, 0.13), 6px 3px 9px 0 rgba(117, 165, 177, 0.08);
}

.calendarHeader,
.progressHeader,
.eventHeader {
    width: 100%;
    margin: 5px auto;
    height: 35px;
    border-bottom: 1px solid #dadada;
}

.eventHistoryHeader {
    width: 100%;
    margin: 5px auto;
    height: 55px;
    border-bottom: 1px solid #dadada;
}

.calendarHeader p,
.progressHeader p,
.eventHeader p {
    float: left;
    width: auto;
    color: #4A4A4A;
    font-size: 18px;
    padding: 3px 15px 0;
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: bold;
}

.eventHistoryHeader p {
    float: left;
    width: auto;
    color: #000000;
    font-size: 14px;
    padding: 8px 15px 0 15px;
    margin: 0 30px;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: bold;
    max-width: 125px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendarSearchContainer {
    float: right;
    border-radius: 8px;
    height: 25px;
    width: 30%;
    -webkit-box-shadow: inset 0 1px 3px 0 rgba(80, 141, 202, 0.88);
    -moz-box-shadow: inset 0 1px 3px 0 rgba(80, 141, 202, 0.88);
    box-shadow: inset 0 1px 3px 0 rgba(80, 141, 202, 0.88);
    margin: 0 15px;
    opacity: 1.25;
}

.progressMoreContainer {
    float: right;
    border-radius: 15px;
    height: auto;
    width: 16.4%;
    margin: 5px 15px;
}

.progressMoreEventContainer {
    float: right;
    border-radius: 15px;
    height: auto;
    width: 16.4%;
    margin: 5px 15px;
}

.progressMoreContainer p {
    color: #303131;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    cursor: pointer;
    margin: 0;
}

.progressMoreEventContainer p {
    /*color: #000000;*/
    color: dodgerblue;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    cursor: pointer;
    margin: -35px 0 0 0;
    font-weight: normal;
}

.progressShowEventContainer label {
    color: #000000;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    cursor: pointer;
    margin: 5px 12px;
    font-weight: normal;
}

.calendarSearchContainer input#search {
    border: none;
    padding: 1px 10px;
    font-size: 14px;
    color: #555;
    background-color: #fff;
    border-radius: 4px;
    display: block;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    margin: 2px 2px;
    height: 20px;
    width: 98%;
    background-image: url("../images/HierarchyImages/calendarSearch.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    text-align: center;
}

.calendarSearchContainer input#search:focus {
    background-image: none;
}

.calendarSearchContainer .dropdown.open .dropdown-menu {
    min-width: 214px !important;
    padding: 0 0 !important;
}

.calendarArea,
.progressArea,
.eventsArea {
    width: 100%;
    height: auto;
    float: left;
    margin-top: -5px;
}

.progressArea {
    width: 90%;
}

.progressArea {
    margin: 0 15px;
}

.progressArea p {
    margin: 5px 0;
    color: #303131;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    margin: 0;
}

.progressAreaContent {
    width: 100%;
    margin: 0;
}

.eventsArea ul {
    width: 100%;
    list-style-type: none;
    height: 376px;
    overflow: hidden;
    padding: 0;
    /*max-height: 440px;*/
}

.eventsArea ul:hover {
    overflow: auto;
}

.eventsArea ul::-webkit-scrollbar {
    height: 3px;
    width: 5px;
    background: #fff;
}

.eventsArea ul::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 6px;
}

.eventsArea ul::-webkit-scrollbar-corner {
    background: #fff;
}

.eventsArea ul li {
    list-style-type: none;
    width: 100%;
    float: left;
}

.eventsList {
    margin: 0 15px 5px;
    border-bottom: 1px solid rgba(80, 141, 202, 0.3);
    height: 72px;
}

.eventsArea ul li:last-child .eventsList {
    border-bottom: 0;
}

.event_date {
    margin: 6px 0;
    background: #22b24b;
    width: 50px;
    height: 50px;
    float: left;
}

.event_date .event_months {
    color: #ffffff;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    width: auto;
    margin: 0;
    padding: 7px 13px 0;
}

.event_date .event_day {
    color: #ffffff;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 24px;
    width: auto;
    margin: -8px 0 0 !important;
    padding: 0 10px;
}

.eventDetails {
    margin: 6px 15px;
    float: left;
    width: auto;
}

.eventDetails .eventTitle {
    color: #4A4A4A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    width: 100%;
    margin: 0;
    padding-bottom: 5px;
    font-weight: bold;
}

.eventDetails .eventDesc {
    color: #303131;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    width: 100%;
    padding-bottom: 5px;
}

#progress .ui-progressbar {
    margin: 5px 0;
    position: relative;
    overflow: visible;
    height: 11px;
    text-align: left;
}

#progress .ui-progressbar-determinate .ui-progressbar-value {
    height: 100%;
    width: 0%;
    position: absolute;
    display: none;
    border: 0 none;
}

#progress .ui-progressbar-determinate .ui-progressbar-value-animate {
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}

#progress .ui-progressbar-determinate .ui-progressbar-label {
    text-align: center;
    height: 100%;
    width: 100%;
    position: absolute;
    display: none;
    font-weight: normal;
}

#progress .ui-progressbar-indeterminate {
    height: .5em;
}

#progress .ui-progressbar-indeterminate .ui-progressbar-value {
    border: 0 none;
}

#progress .ui-progressbar-indeterminate .ui-progressbar-value::before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: ui-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: ui-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

#progress .ui-progressbar-indeterminate .ui-progressbar-value::after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: ui-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: ui-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

@-webkit-keyframes ui-progressbar-indeterminate-anim {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes ui-progressbar-indeterminate-anim {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@-webkit-keyframes ui-progressbar-indeterminate-anim-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}

@keyframes ui-progressbar-indeterminate-anim-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}

#progress .ui-progress-spinner {
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    display: inline-block;
}

#progress .ui-progress-spinner::before {
    content: '';
    display: block;
    padding-top: 100%;
}

#progress .ui-progress-spinner-svg {
    animation: ui-progress-spinner-rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#progress .ui-progress-spinner-circle {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: ui-progress-spinner-dash 1.5s ease-in-out infinite, ui-progress-spinner-color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@keyframes ui-progress-spinner-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes ui-progress-spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes ui-progress-spinner-color {
    100%,
    0% {
        stroke: #d62d20;
    }
    40% {
        stroke: #0057e7;
    }
    66% {
        stroke: #008744;
    }
    80%,
    90% {
        stroke: #ffa700;
    }
}

#progress {
    padding: 5px;
    width: 80%;
}

#progress .ui-corner-all {
    border-radius: 10px !important;
}

#progress .ui-progressbar {
    height: 11px !important;
}

#progress .ui-progressbar .ui-progressbar-value {
    background: #508DCA !important;
    opacity: 0.5 !important;
}

#progress .ui-widget-content {
    border: 1px solid #efeeee !important;
    background: #efeeee !important;
    color: #222222 !important;
    border-radius: 10px !important;
}

#progress .ui-progressbar-label {
    color: #303131 !important;
    font-size: 14px;
    font-family: "Helvetica Neue", sans-serif !important;
    text-align: right !important;
    width: auto !important;
    margin-top: -20px;
    position: relative !important;
    display: block !important;
}

.calendarArea .fc-event,
.calendarArea .fc-event .fc-event-dot {
    background: #e7e7e7 !important;
}

.calendarArea .fc-event {
    border: 1px solid #e7e7e7 !important;
    border-radius: 3px !important;
}

.calendarArea .fc-title,
.calendarArea .fc-time {
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 10px !important;
    color: #4A4A4A !important;
    font-weight: bold;
}

.calendarArea .ui-widget-content {
    border: 0 !important;
    color: #000000 !important;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
}

.calendarArea .fc-row {
    border-top: 1px solid rgba(80, 141, 202, 0.3) !important;
    border-bottom: 0.5px solid rgba(80, 141, 202, 0.3) !important;
    height: 85px !important;
}

.calendarArea .fc-head {
    border-top: 1px solid rgba(80, 141, 202, 0.3) !important;
    border-bottom: 0 solid rgba(80, 141, 202, 0.3) !important;
    border-left: 0 solid rgba(80, 141, 202, 0.3) !important;
    border-right: 0 solid rgba(80, 141, 202, 0.3) !important;
}

.calendarArea .fc-row.ui-widget-header {
    border-bottom: 0 !important;
    border-top: 0.5px solid rgba(80, 141, 202, 0.3) !important;
}

.calendarArea .fc-day {
    border-left: 1px solid rgba(80, 141, 202, 0.3) !important;
    border-right: 1px solid rgba(80, 141, 202, 0.3) !important;
    width: 100px !important;
}

.calendarArea .fc td {
    vertical-align: middle !important;
}

.calendarArea .fc th {
    border-style: none !important;
    border-width: 0 !important;
    vertical-align: middle !important;
}

.calendarArea .fc-head .ui-widget-header {
    background: none !important;
    height: 41px !important;
    border: none !important;
}

.calendarArea th.fc-day-header {
    font-family: "Helvetica Neue", sans-serif !important;
    color: #4A4A4A !important;
    font-size: 12px !important;
    text-align: center !important;
    width: 104px !important;
}

.calendarArea .fc td.fc-today {
    border-style: none !important;
}

.calendarArea .fc-prev-button {
    margin: 0px 120px 0px 5px !important;
    border: none !important;
    background: transparent !important;
    color: #000000 !important;
}

.calendarArea .fc-next-button {
    margin: 0px 25px 0px 120px !important;
    border: none !important;
    background: transparent !important;
    color: #000000 !important;
}

.calendarArea .fc-toolbar.fc-header-toolbar {
    position: relative;
}

.calendarArea .fc-toolbar .fc-center {
    position: absolute;
    top: 7px;
    left: 110px;
}

.calendarArea .fc-today-button {
    float: left !important;
    padding: 0 25px !important;
    border-radius: 2px !important;
    border: 1px solid #5091CF !important;
    background: #5091CF !important;
    color: #ffffff !important;
    text-transform: capitalize;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 12px !important;
    text-align: center;
}

.calendarArea .fc-month-button {
    border: 1px solid #EFEEEE !important;
    background: #EFEEEE !important;
    color: #000000 !important;
    margin-right: 1px !important;
    padding: 0 25px !important;
    text-transform: capitalize;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 12px !important;
    text-align: center;
}

.calendarArea .fc-agendaWeek-button {
    border: 1px solid #EFEEEE !important;
    background: #EFEEEE !important;
    color: #000000 !important;
    margin-right: 1px !important;
    padding: 0 25px !important;
    text-transform: capitalize;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 12px !important;
}

.calendarArea .fc-agendaDay-button {
    border-top: 1px solid #EFEEEE !important;
    border-bottom: 1px solid #EFEEEE !important;
    border-right: 1px solid #EFEEEE !important;
    border-left: 1px solid #b2bec9 !important;
    background: #EFEEEE !important;
    color: #000000 !important;
    margin-right: 1px !important;
    padding: 0 25px !important;
    text-transform: capitalize;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 12px !important;
}

.calendarArea .fc-month-button:focus,
.calendarArea .fc-agendaWeek-button:focus,
.calendarArea .fc-agendaDay-button:focus {
    border: 1px solid #5091CF !important;
    background: #5091CF !important;
    color: #ffffff !important;
}

.calendarArea .fc .fc-toolbar>*>* {
    margin-left: 0 !important;
}

.calendarArea .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1em !important;
    margin-top: 1em !important;
}

.calendarArea .fc-day-grid-container {
    overflow: hidden !important;
    height: auto !important;
}

.calendarArea .fc th {
    border-width: 0 !important;
}

.calendarArea .fc-day-number {
    float: left !important;
    font-family: "Helvetica Neue", sans-serif !important;
    color: #4A4A4A !important;
    font-size: 14px !important;
    padding: 5px 10px 0 !important;
}

.calendarArea td.fc-more-cell {
    font-family: "Helvetica Neue", sans-serif !important;
    color: #000000 !important;
    font-size: 10px !important;
    font-weight: bold !important;
    width: auto;
    position: absolute;
    top: 5px;
    right: 2px;
}

.calendarArea .ui-state-highlight {
    background: #e8eef4 !important;
    border-style: none !important;
    border-width: 0 !important;
}

.calenderArea .fc-center h2 {
    color: #000000 !important;
    font-family: "Helvetica Neue", sans-serif !important;
    font-weight: bold !;
    font-size: 14px !important;
}

.calenderArea .fc .fc-toolbar .fc-prev-button .ui-icon-circle-triangle-w {
    margin-top: .3em !important;
    background: url(../images/HierarchyImages/calendarLeftArrow.svg) no-repeat !important;
    width: 9px !important;
    height: 17px !important;
    display: inline-block !important;
    font: normal normal normal 14px/1 FontAwesome !important;
    font-size: inherit !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-indent: 0px !important;
    text-align: center !important;
}

.calenderArea .fc .fc-toolbar .fc-prev-button .ui-icon-circle-triangle-w:before {
    content: none !important;
}

.calenderArea .fc .fc-toolbar .fc-next-button .ui-icon-circle-triangle-e {
    margin-top: .3em !important;
    background: url(../images/HierarchyImages/calendarRightArrow.svg) no-repeat !important;
    width: 9px !important;
    height: 17px !important;
    display: inline-block !important;
    font: normal normal normal 14px/1 FontAwesome !important;
    font-size: inherit !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-indent: 0px !important;
    text-align: center !important;
}

.calenderArea .fc .fc-toolbar .fc-next-button .ui-icon-circle-triangle-e:before {
    content: none !important;
}

.calendarArea .fc-toolbar .fc-center h2 {
    color: #4A4A4A !important;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.calendarArea .fc-month-button.ui-button.ui-state-default.ui-corner-left.ui-state-active {
    color: rgb(255, 255, 255) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgb(80, 145, 207) !important;
    border-image: initial !important;
    background: rgb(80, 145, 207) !important;
}

.hidden {
    display: none;
}


/* END OF HIERARCHY LANDING PAGE CSS */


/* START OF MANAGE VIEW HIERARCHY AND MANAGE EDIT HIERARCHY PAGE CSS */

.typesContainer {
    float: left;
    height: auto;
    width: 21%;
    margin-top: 14px;
    margin-right: 18px;
}

.typesHeader {
    width: 25%;
    height: auto;
    float: left;
}

.typesHeader p {
    float: left;
    width: 100%;
    color: #000000;
    font-size: 24px;
    padding: 8px 3px 1px;
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: bold;
}

.typesSubHeader {
    float: left;
    width: 100%;
    height: auto;
}

.typesSubHeader p {
    float: left;
    margin: 0;
}

.typesSubHeader p a {
    float: left;
    width: auto;
    color: #4A4A4A;
    font-size: 14px;
    padding: 0 3px 8px;
    font-family: "Helvetica Neue", sans-serif;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.4;
    font-weight: normal;
}

.typesSubHeader p a.typesSubActiveHeader {
    font-family: "Helvetica Neue", sans-serif !important;
    font-weight: bold !important;
    cursor: default !important;
}

.typesMainContainer {
    float: left;
    height: auto;
    width: 50%;
    margin-top: 28px;
    margin-right: 18px;
}

.typesMainContainer a.typesMainActiveHeader {
    font-size: 18px;
    font-family: "Helvetica Neue", sans-serif !important;
    font-weight: bold !important;
    color: #000000;
}

.typeContainer {
    float: left;
    width: 100%;
    height: auto;
    margin-left: 1px;
    border: 1px solid rgba;
}

.typesListArea {
    width: 100%;
    height: auto;
    border-radius: 2px;
    /* -webkit-box-shadow: 0px 0px 2px 0px rgba(80,141,202,0.88);
	-moz-box-shadow: 0px 0px 2px 0px rgba(80,141,202,0.88);
	box-shadow: 0px 0px 2px 0px rgba(80,141,202,0.88); */
    border: 1px solid rgba(109, 102, 96, 0.3);
}

#hTypeContainer {
    height: 595px;
}

.typesListArea ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.typesListArea ul li #listHeader {
    background-color: #787572;
    border-bottom: 1px solid rgba(80, 141, 202, 0.3);
    height: 40px;
}

.typesListArea ul li .typeText {
    padding: 10px 20px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    width: 100%;
    color: #6D6660 !important;
    font-weight: 500;
}

.typesListArea ul li .typeChooseText {
    padding: 10px 10px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    width: 100%;
    color: #ffffff;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.typesListArea ul li:first-child .typeText {
    color: #6D6660 !important;
}

.typesListArea ul li .typesList.active,
.typesListArea ul li:hover .typesList {
    background-color: #ededed;
}

.typesListArea ul li .typesList.default {
    background-color: #ededed !important;
}

.typesListArea ul li {
    list-style-type: none;
    width: 100%;
    float: left;
    height: 40px;
}

.typesListArea ul li.hierarchyStatusList {
    margin-top: 12px;
}

.typesList {
    border: 0.5px solid rgba(109, 102, 96, 0.5);
    background-color: #ffffff;
    height: 41px;
    cursor: pointer;
}

.detailTypeContainer,
.detailTypeVersionContainer {
    float: left;
    margin: 0;
    height: auto;
}

.rightContainer.expanded .view_detailTypeContainer {
    width: 100%;
}

.rightContainer.collapsed .view_detailTypeContainer {
    width: 100%;
}

.rightContainer.expanded .detailTypeContainer,.rightContainer.collapsed .detailTypeContainer {
    width: 77%;
}

.example-sidenav-content{
    min-height: 600px;
    width: 85%;
    position: relative;
}

.example-sidenav-content.expanded{
    width: 100% !important;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .rightContainer.expanded .detailTypeContainer,
    .rightContainer.collapsed .detailTypeContainer {
        width: 75%;
    }
}

.rightContainer.expanded .detailTypeVersionContainer {
    width: 100%;
}

.rightContainer.collapsed .detailTypeVersionContainer {
    width: 100%;
}

.detailTypesListArea,
.detailTypesViewListArea {
    width: auto;
    height: auto;
}

.detailTypesListArea ul,
.detailTypesViewListArea ul {
    padding: 0;
    margin: 1px;
}

.detailTypesListArea ul li {
    width: 260px;
    list-style-type: none;
    height: 200px;
    float: left;
    margin: 14px 10px 0 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1px;
    /* -webkit-box-shadow: 0px 0px 2px 0px rgba(80,141,202,0.88);
	-moz-box-shadow: 0px 0px 2px 0px rgba(80,141,202,0.88); */
    /* box-shadow: 0px 0px 2px 0px rgba(80,141,202,0.88); */
    border: 1px solid #DFDDDD;
    position: relative;
}

.detailTypesViewListArea ul li {
    width: 260px;
    list-style-type: none;
    height: 200px;
    float: left;
    margin: 14px 10px 0 0;
    background: #ffffff;
    border-radius: 1px;
    /* -webkit-box-shadow: 0px 0px 2px 0px rgba(80,141,202,0.88);
	-moz-box-shadow: 0px 0px 2px 0px rgba(80,141,202,0.88);
	box-shadow: 0px 0px 2px 0px rgba(80,141,202,0.88); */
    border: 1px solid #DFDDDD;
    position: relative;
}

.detailTypesListArea ul li .detailTypeText,
.detailTypesViewListArea ul li .detailTypeText {
    padding: 12px 4px 12px 12px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    margin: 0;
    width: 45%;
    color: #000000;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detailTypesListArea ul li .detailTypeViewText,
.detailTypesViewListArea ul li .detailTypeViewText {
    padding: 12px 4px 12px 12px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    margin: 0;
    width: 90%;
    color: #000000;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detailTypesList .detailTypeHierarchy {
    padding: 12px 77px 12px 12px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    margin: 0;
    width: 100%;
    height: 23px;
    color: #000000;
    background-color: #f5f5f5;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detailTypesList .detailTypeViewHierarchy {
    padding: 12px 77px 12px 12px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    margin: 0;
    width: 100%;
    height: 44px;
    color: #000000;
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detailTypesList .detailTypeSubTextHierarchy {
    padding: 3px 0px 0px 12px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 10px;
    float: left;
    margin: 0;
    width: 100%;
    height: 21px;
    color: #9b9b9b;
    background-color: rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* .template_growl_msg1 .ui-growl.ui-widget {
    top: 205px !important;
    margin-top: 150px !important;
    width: 17em !important;
    left: 1100px !important;
    margin-left: -1004px !important;
    position: absolute !important;
} */

.rightContainer.collapsed .detailTypesListArea ul li {
    width: 260px;
    height: 210px;
    position: relative;
}

.rightContainer.expanded .detailTypesListArea ul li {
    height: 210px;
}

.rightContainer.collapsed .detailTypesViewListArea ul li {
    width: 260px;
    height: 204px;
    position: relative;
}

.rightContainer.expanded .detailTypesViewListArea ul li {
    height: 204px;
}

.detailTypesListArea ul li .detailTypeSubText,
.detailTypesViewListArea ul li .detailTypeSubText {
    padding: 0 60px 0px 12px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 10px;
    float: left;
    margin: 0;
    width: 100%;
    color: #9B9B9B;
}

.detailTypesListArea ul li .publishList {
    padding: 8px 0 0px 12px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 10px;
    float: right;
    margin-right: 10px;
    width: auto;
    color: #9B9B9B;
    text-decoration: underline;
    cursor: pointer;
}

.detailTypesListArea ul li .detailTypesList.active,
.detailTypesViewListArea ul li .detailTypesList.active {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.detailTypesListArea ul li,
.detailTypesViewListArea ul li {
    list-style-type: none;
    float: left;
    cursor: pointer;
}

.detailTypesList {
    margin: 0;
    /* border-bottom: 1px solid rgba(80,141,202,0.3); */
    height: 45px;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.manageViewTree,
.manageEditTree {
    height: 78%;
    margin: 0 auto;
    width: 100%;
    display: none;
}

.manageVersionViewTree {
    height: 77%;
    margin: 0 auto;
    width: 100%;
    display: none;
}

.manageViewHierachyTree {
    height: 174px;
    margin: 0 auto;
    width: 100%;
    display: none;
}

.detailTypesList .detailTypeImage {
    background: url(../images/HierarchyImages/delete_grey.svg) no-repeat;
    position: absolute;
    width: 30px;
    height: 23px;
    right: 26.5px;
    top: 12px;
    cursor: pointer;
    background-size: 18px 20px;
}

.detailTypesList .editdetailTypeImage,
.detailTypesList .editHierarchyNameImage {
    background: url(../images/HierarchyImages/Edit.svg) no-repeat;
    position: absolute;
    width: 30px;
    height: 23px;
    top: 9px;
    cursor: pointer;
    background-size: 28px 28px;
}

.detailTypesList .editdetailTypeImage {
    left: 165px;
}

.detailTypesList .editHierarchyNameImage {
    right: 0;
}

.detailTypesList .lockdetailTypeImage {
    background: url(../images/HierarchyImages/lockIcon.svg) no-repeat;
    position: absolute;
    width: 30px;
    height: 23px;
    left: 232px;
    top: 12px;
    cursor: pointer;
    background-size: 23px 20px;
}

.detailTypesList .unlockdetailTypeImage {
    background: url(../images/HierarchyImages/unlock.svg) no-repeat;
    position: absolute;
    width: 30px;
    height: 23px;
    left: 232px;
    top: 12px;
    cursor: pointer;
    background-size: 23px 20px;
}

.detailTypesLoadArea {
    width: 100%;
    height: 50px;
    float: left;
    margin: 15px 0 0;
    /* background: #e8eef4; */
    /* border-radius: 1px; */
    /* position: absolute; */
    left: 50%;
}

.detailTypesLoadArea .detailTypeLoadText {
    position: absolute;
    /* padding: 7px 5px 4px 20px; */
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
    /* position: relative; */
    transform: translate(-50%, -50%);
    left: 50%;
    /* bottom: -17px; */
    margin: 25px;
    /* width: auto;*/
    color: #508DCA;
}

.rightSideTypeMenuContainer {
    background: #eeeeee;
    opacity: 0.5;
    /* height: 40px;
    right: 46px;
    top: 31px; */
    -webkit-box-shadow: 10px 10px 16px 0px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 10px 10px 16px 0px rgba(0, 0, 0, 0.08);
    box-shadow: 10px 10px 16px 0px rgba(0, 0, 0, 0.08);
    /* width: 95px; */
    position: relative;
    border-bottom: 1px solid rgba(80, 141, 202, 0.3);
    border-left: 1px solid rgba(80, 141, 202, 0.3);
}

#menuExpanded {
    margin: 5px 10px;
    width: auto;
    height: auto;
}

#menuExpanded ol {
    width: auto;
    height: auto;
}

#menuExpanded ol .typeMenulist {
    list-style-type: none;
    padding: 5px 0;
    float: left;
    width: 100% !important;
    height: auto !important;
    position: relative;
    margin: 0;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background: none;
}

#menuExpanded ol .typeMenulist p {
    font-size: 9px;
    font-family: "Helvetica Neue", sans-serif;
    text-align: center;
    margin: 0;
    font-weight: bold;
}

.statusesContainer {
    float: left;
    height: auto;
    width: 19.015%;
    margin-top: 14px;
    margin-right: 18px;
}

.statusContainer {
    float: left;
    width: 100%;
    height: auto;
    margin-left: 1px;
}

.statusesListArea {
    width: 100%;
    height: auto;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(80, 141, 202, 0.88);
    -moz-box-shadow: 0px 0px 2px 0px rgba(80, 141, 202, 0.88);
    box-shadow: 0px 0px 2px 0px rgba(80, 141, 202, 0.88);
}

.statusesListArea ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.statusesListArea ul li #listHeader {
    background-color: #787572;
    border-bottom: 1px solid rgba(80, 141, 202, 0.3);
    height: 40px;
}

.statusesListArea ul li .typeText {
    padding: 10px 20px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    width: auto;
    color: #6D6660 !important;
    font-weight: 500;
}

.statusesListArea ul li .typeChooseText {
    padding: 10px 14px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    width: auto;
    color: #ffffff;
    font-weight: bold;
}

.statusesListArea ul li:first-child .typeText {
    color: #6D6660 !important;
}

.statusesListArea ul li .typesList.active,
.statusesListArea ul li:hover .typesList {
    background-color: whitesmoke;
}

.statusesListArea ul li .typesList.default {
    background-color: white !important;
}

.statusesListArea ul li {
    list-style-type: none;
    width: 100%;
    float: left;
    height: 40px;
}


/* END OF MANAGE VIEW HIERARCHY AND MANAGE EDIT HIERARCHY PAGE CSS */


/* START OF VIEW HIERARCHY PAGE CSS */

.v_hover {
    cursor: default;
}


/* END OF VIEW HIERARCHY PAGE CSS */


/* START OF EDIT HIERARCHY PAGE CSS */

.select_tags {
    float: left;
    width: 100%;
    margin: 5px -4px;
}

.view_detailTypeContainer.expanded.max_window .htContainer .typeSearchContainer .select_tags {
    width: 0% !important;
}

.view_detailTypeContainer.expanded.max_window .htContainer .typeSearchContainer #duplicatecount {
    width: 50% !important;
    margin-top: 10px !important;
}

.view_detailTypeContainer.expanded.max_window .htContainer .typeSearchContainer .searchOption .searchView {
    width: 15% !important;
    margin-top: 35px !important;
}

.view_detailTypeContainer.expanded.max_window .htContainer .typeSearchContainer #view_search_container {
    width: 45% !important;
    margin-top: 35px !important;
}

.view_detailTypeContainer.expanded.max_window .htContainer .typeSearchContainer #view_search_container .search_input_container {
    width: 95% !important;
}

.searchView {
    height: 35px;
    width: 35%;
    border: 1px solid #dadada;
    border-radius: 2px;
    background-color: #FFFFFF;
    margin-top: 50px;
    margin-right: 10px;
    float: left;
}

#search_container,
#search_container_agent, .searchEdit {
    height: 35px;
    width: 100%;
    border: 1px solid #dadada;
    border-radius: 2px;
    background-color: #FFFFFF;
    margin-top: 42px;
}

.typesContainer.expanded.max_window {
    width: 60% !important;
}

.typesContainer.expanded.max_window .typeContainer #search_container, .typesContainer.expanded.max_window .typeContainer #search_container_agent {
    margin-top: 45px !important;
    width: 72% !important;
    float: left !important;
}

.typesContainer.expanded.max_window .typeContainer#search {
    margin-left: 10px !important;
    height: 35px !important;
}

.typesContainer.expanded.max_window {
    display: block !important;
}

#view_search_container {
    width: 100%;
    height: auto;
    margin-top: 50px;
}

.detailTypeContainer.expanded .htContainer {
    margin-top: 65px !important;
}

#viewNodeSearch, #viewAgentSearch {
    width: 50%;
    float: left;
}

#view_search_container .search_input_container {
    width: 80%;
    height: 35px;
    float: left;
    border: 1px solid #dadada;
    border-radius: 2px;
    background-color: #FFFFFF;
    /* box-shadow: inset 0 1px 4px 0 rgba(80,141,202,0.27); */
    margin: 0 5px 0 0;
}

#view_search_container .search_submit_container {
    width: 18.2%;
    float: left;
    height: 35px;
}

.typeSearchContainer {
    margin: 12px 0 0;
    width: 100%;
    float: left;
    height: auto;
}

#search_node .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 90% !important;
    height: 28px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background: #ffffff;
    border: 0;
    position: absolute;
    left: 0px;
    top: -10px;
    padding: 0px 0 0 10px;
    box-shadow: none;
    text-align: center;
    /*background-image: url("../images/HierarchyImages/search.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;*/
}

#search_node .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    height: auto !important;
    width: 100% !important;
    top: 22px !important;
    max-height: 266px !important;
    margin-left: 0px !important;
    border-radius: 0px !important;
}

#search_rule_territory .ui-autocomplete.ui-widget input.ui-inputtext {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    line-height: 16px;
    background: #ffffff;
    border: 0;
    position: absolute;
    left: 0px;
    top: -13px;
    padding: 0px 0 0 10px;
    box-shadow: none;
    text-align: left;
    border-radius: 2px;
    height: 30px;
    width: 100%;
    /*background-image: url("../images/Crediting/searchAgent.png");*/
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#search_rule_agent .ui-autocomplete.ui-widget input.ui-inputtext {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    line-height: 16px;
    background: #ffffff;
    border: 0;
    position: absolute;
    left: 0px;
    top: -13px;
    padding: 0px 0 0 10px;
    box-shadow: none;
    text-align: left;
    border-radius: 2px;
    height: 30px;
    width: 100%;
    background-image: url("../images/Crediting/searchAgent.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#search_transaction .ui-autocomplete.ui-widget input.ui-inputtext {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    line-height: 16px;
    background: #ffffff;
    border: 0;
    position: absolute;
    left: 0px;
    top: -13px;
    padding: 0px 0 0 10px;
    box-shadow: none;
    text-align: left;
    border-radius: 2px;
    height: 30px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#search_rule_territory .ui-autocomplete.ui-widget input.ui-inputtext:focus {
    background-image: none;
}

#search_rule_agent .ui-autocomplete.ui-widget input.ui-inputtext:focus {
    background-image: none;
}


/* div.ng-star-inserted{
	font-size: 36px;
} */
#search_rule_territory .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    border-radius: 0 !important;
    height: auto !important;
    width: 100% !important;
    top: 20px !important;
    max-height: 250px !important;
    margin-left: 0px !important;
}

#search_rule_agent .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    border-radius: 0 !important;
    height: auto !important;
    width: 100% !important;
    top: 20px !important;
    max-height: 250px !important;
    margin-left: 0px !important;
}

.rule_agent_cancel_btn {
    outline: none;
    border: 0;
    cursor: pointer !important;
    padding: 0;
    margin-right: 5px;
    margin-top: -35px;
    float: right;
    width: 100px;
    height: 35px;
    background-color: #508dca;
    color: #FFF;
    font-weight: 400;
    letter-spacing: 1px;
}

#agent_search_container {
    height: 35px;
    width: 85%;
    border: 1px solid #caddef;
    border-radius: 2px;
    background-color: #FFFFFF;
}

.searchRuleAgentContainer {
    margin: 20px 0 75px;
}

.agent_searchbox_submit {
    background: url(../images/HierarchyImages/search.svg) no-repeat;
    width: 18px;
    height: 18px;
    outline: none;
    border: 0;
    cursor: default !important;
    padding: 0;
    position: absolute;
    margin-top: -12px;
    margin-right: 25px;
}

.searchbox_submit {
    background: url(../images/HierarchyImages/search.svg) no-repeat;
    width: 18px;
    height: 18px;
    outline: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    position: absolute;
    margin-left: 50px;
    margin-top: 15px;
}

.ui-autocomplete-items {
    list-style: none !important;
    padding: 0 1px !important;
    margin: 0 !important;
    display: block !important;
    float: left !important;
    width: 100% !important;
}

.ui-autocomplete-items .ui-autocomplete-list-item {
    margin: 0 !important;
    padding: 10px 8px !important;
    zoom: 1 !important;
    float: left !important;
    clear: left !important;
    width: 100% !important;
    height: auto !important;
    color: #999999 !important;
    font-size: 14px !important;
    font-family: "Helvetica Neue", sans-serif !important;
    cursor: pointer !important;
}

.ui-autocomplete-items .ui-autocomplete-list-item.ui-state-highlight {
    color: #333333 !important;
}

.ui-autocomplete-items .ui-autocomplete-list-item.ui-state-highlight,
.ui-autocomplete-items .ui-autocomplete-list-item.ui-state-active {
    background: #f3f3f3 !important;
    width: 100% !important;
    margin-left: 0px !important;
}

#duplicatecount {
    width: 100%;
    height: 30px;
    float: left;
}

.typesContainer.expanded.max_window .typeContainer #duplicatecount, .typesContainer.expanded.max_window .typeContainer #duplicatecountagent {
    margin: 10px 4px !important;
}

.typesContainer.expanded.max_window .typeContainer .select_tags {
    width: 0% !important;
}

#duplicatecount p {
    width: 99%;
    max-width: 99%;
    /*float: left;*/
    margin: 0 1px 5px 1px;
    color: #508DCA;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    /*white-space: nowrap;*/
    overflow: hidden;
    /*text-overflow: ellipsis; */
}

.error_div {
    height: 20px;
}

.hierarchyEventContainer {
    height: 449px;
    float: left;
    margin-left: 1px;
    margin-top: 25px;
    /* min-height: 490px;
	max-height: 502px; */
    /*overflow: scroll;*/
    width: 100%;
    background: #ffffff;
    border-radius: 2px;
    /* -webkit-box-shadow: 0px 0px 2px 0px rgba(80,141,202,0.88);
	-moz-box-shadow: 0px 0px 2px 0px rgba(80,141,202,0.88); */
    box-shadow: 0px 0px 2px 0px #dadada;
    border: 1px solid #dadada;
}

.dialog_box,
.editDialog_box {
    /*top: 300px !important;
	width: 17.3em !important;
	position: absolute !important;
	background-color: #FFB300;
  	border-color: #FFB300;*/
    background-color: #56524F;
    border-color: #F5F5F5;
    height: 100%;
    margin: 0px auto;
    width: 100%;
    top: 0;
    position: absolute;
    text-align: center;
    color: #ffffff;
    opacity: 0.9;
}

.dialog_msg,
.editDialog_msg {
    margin-top: 55px;
    color: white;
    font-size: 16px;
    line-height: 19px;
}

.dialog_box1 {
    background-color: #ffffff;
    color: #000;
    width: 86px;
    height: 36px;
    border-radius: 2px;
    fill: solid;
}

.editDialog {
    float: left;
    margin-left: 28px;
    width: 78%;
    color: #000;
}

.editDialog_box1 {
    background-color: #ffffff;
    color: #000;
    width: 86px;
    height: 36px;
    border-radius: 2px;
    margin-top: 14px;
    margin-left: 28px;
    float: left;
    fill: solid;
}

.dialog_box2 {
    background-color: #ffffff;
    color: #000;
    width: 86px;
    height: 36px;
    margin: 10px;
    border-radius: 2px;
    padding-left: 5px;
    fill: solid;
}

.editDialog_box2 {
    background-color: #ffffff;
    color: #000;
    width: 86px;
    height: 36px;
    margin: 14px;
    border-radius: 2px;
    padding-left: 5px;
    fill: solid;
}

.dialog_content,
.editDialog_content {
    padding: 10px 20px;
    width: 100%;
    height: 100%;
}

.dialog_box3,
.editDialog_box3 {
    float: right;
    cursor: pointer;
    width: auto;
    padding: 5px 15px;
    font-size: 14px;
    font-family: "Helvetica Neue", sans-serif;
}

.dialog_box p,
.editDialog_box p {
    color: white;
}


/*.dialog_box1{
	color:#56524F;
	margin-left: 57px;
	width:60px;
	margin-right: 25px;
	background-color: #ffffff;
	border:none;
}

.dialog_box2{
	color:#56524F;
	/* margin-left: 57px; 
	width:60px;
	/* margin-right: 25px; 
	background-color: #ffffff;
	border:none;
}*/

.dialog_confirmation,
.editDialog_confirmation {
    font-size: 14px;
    font-family: "Helvetica Neue", sans-serif;
}

.hierarchyEventHeader {
    float: left;
    width: 100%;
    border-bottom: 1px solid rgba(80, 141, 202, 0.3);
}

.hierarchyEventHeader p {
    color: #000000;
    font-size: 14px;
    font-family: "Helvetica Neue", sans-serif;
    width: 105px;
    max-width: 105px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    margin: 10px 12px;
    font-weight: bold;
}

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

.hierarchyEventsList #eventlist div {
    width: 100%;
    min-height: 100px;
    height: auto;
    margin: 8px auto;
}

.hierarchyEventsList #eventlist div aside#borderLine {
    border-bottom: 1px solid rgba(80, 141, 202, 0.3);
    float: left;
    width: 100%;
}

.hierarchyEventsList #eventlist div:last-child aside#borderLine {
    border-bottom: none !important;
}

.hierarchyEventsList #eventlist div p#img {
    height: 19px;
    width: 21px;
    margin: 15px 0 0;
    float: left;
    background: url(../images/HierarchyImages/timer.svg) no-repeat;
}

.hierarchyEventsList #eventlist div p {
    margin: 10px 7px;
    color: #000000;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    width: 78%;
    float: left;
    line-height: 15px;
    height: 75px;
}

.hierarchyEventsList #eventlist div:first-child p {
    font-weight: bold;
}

.hierarchyEventsList #eventlist div:last-child {
    border-bottom: 0;
}

.htContainer {
    width: 60%;
    height: auto;
    float: left;
    margin-right: 18px;
}

.htViewContainer {
    width: 100%;
    height: 545px;
    float: left;
    border-radius: 2px;
    background-color: #FFFFFF;
    position: relative;
    border: 1px solid rgba(183, 183, 182, 0.3);
    ;
    /* box-shadow: 0 0 11px 0 rgba(80,141,202,0.13), 6px 3px 9px 0 rgba(117,165,177,0.08);
	-webkit-box-shadow: 0 0 11px 0 rgba(80,141,202,0.13), 6px 3px 9px 0 rgba(117,165,177,0.08);
	-moz-box-shadow: 0 0 11px 0 rgba(80,141,202,0.13), 6px 3px 9px 0 rgba(117,165,177,0.08);*/
}

.htViewContainer.hvc_margin {
    margin: 15px 0;
    height: 626px;
}

.view_detailTypeContainer.expanded.max_window .htViewContainer,
.detailTypeContainer.expanded.max_window .htViewContainer.hvc_margin {
    height: 93.5vh !important;
}

.editHierarchyStatus {
    width: 62%;
    height: auto;
}

.editHierarchyStatus p {
    color: #181818;
    font-size: 18px;
    font-family: "Helvetica Neue", sans-serif;
    margin: -13px -15px;
    float: right;
    font-weight: bold;
}

.viewHierarchyStatus {
    float: left;
    margin: 2px 15px;
}

.viewHierarchyStatus p {
    width: auto;
    margin: 15px 5px 0;
    opacity: 0.4;
    color: #4A4A4A;
    float: left;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: normal;
}

.buttonsContainer {
    width: 100%;
    margin: 0;
    height: 40px;
    position: relative;
    border-bottom: 1px solid #dadada;
}

.left_side_buttons,
.right_side_buttons {
    width: auto;
    height: 100%;
}

.left_side_buttons {
    float: left;
}

.right_side_buttons {
    float: right;
}

.buttonsGroup {
    float: right;
    margin-top: 10px;
    margin-bottom: -10px;
    width: 100%;
}

.detailTypeContainer.expanded.max_window .htContainer .buttonsGroup {
    margin-top: -60px !important;
    width: 45% !important;
}

.view_left_side_buttons,
.view_right_side_buttons {
    width: auto;
    height: 100%;
    float: right;
    margin-top: 0px;
}

#zoom_out,
#zoom_search,
#zoom_percentage,
#zoom_in,
#undo,
#redo,
#max,
#min,
#hierarchy_save,
#confirm_button,
#hierarchy_saveasnew {
    float: left;
}

#zoom_out,
#zoom_in,
#undo,
#redo,
#max,
#min,
#hierarchy_save,
#confirm_button,
#hierarchy_saveasnew {
    cursor: pointer;
}

#zoom_out {
    margin: 8px 12px;
    background: url(../images/HierarchyImages/zoomOut.svg) no-repeat;
    height: 23px;
    width: 23px;
    cursor: pointer;
}

#zoom_search {
    background: url(../images/HierarchyImages/zoomIcon.svg) no-repeat;
    height: 18px;
    width: 18px;
    margin: 10px 4px 10px 6px;
}

#zoom_percentage {
    color: #000000;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 10px;
    margin: 13px 6px 13px 2px;
}

#zoom_in {
    margin: 8px 12px;
    background: url(../images/HierarchyImages/zoomIn.svg) no-repeat;
    height: 23px;
    width: 23px;
}

#undo {
    background: url(../images/HierarchyImages/undo.svg) no-repeat;
    height: 23px;
    width: 23px;
    margin: 8px 15px 8px 10px;
}

#redo {
    background: url(../images/HierarchyImages/redo.svg) no-repeat;
    height: 23px;
    width: 23px;
    margin: 8px 15px 8px 10px;
}

#max {
    background: url(../images/HierarchyImages/maximize.svg) no-repeat;
    height: 23px;
    width: 23px;
    margin: 8px 15px 8px 10px;
}

#min {
    background: url(../images/HierarchyImages/minimize.svg) no-repeat;
    height: 23px;
    width: 23px;
    margin: 8px 15px 8px 10px;
}

.maximize_window {
    width: 35%;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.maximize_window p {
    width: auto;
    color: #181818;
    font-size: 18px;
    font-family: "Helvetica Neue", sans-serif;
    margin: 8px 20px;
    text-align: center;
    font-weight: bold;
}

#hierarchy_save,
#confirm_button {
    width: 26%;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508DCA;
    color: #ffffff;
    text-align: center;
    padding: 8px;
    font-weight: bold;
    border-radius: 2px 2px 2px 2px;
    margin: 4px 0 0 10px;
    max-width: 115px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: right;
}

#hierarchy_saveasnew {
    width: 26%;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508DCA;
    color: #ffffff;
    text-align: center;
    padding: 8px;
    font-weight: bold;
    border-radius: 2px 2px 2px 2px;
    margin: 0 0 0 10px;
    height: 32px;
    margin-top: 4px;
    max-width: 115px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float:right;
}


#confirm_button {
    padding: 8px;
}

@media screen and (max-width: 1225px) {
    #hierarchy_save {
        padding: 11px 20px;
    }
}

.htViewContainer #loading-container,
.htViewContainer.hvc_margin #loading-container,
#loadingSaveContainer {
    width: 100%;
    background: url(../images/ajax-loader.gif) 50% 50% #f5f5f5 no-repeat;
    margin: 5px auto;
    position: absolute;
    top: 41px;
    left: 0;
    right: 0;
}

#loadingSaveContainer {
    margin: 40px 0;
}

#bread_crumbs {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    margin: 12px 10px;
    color: #000000;
    width: 95%;
    max-width: 95%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#view_bread_crumbs {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    margin: 14px 12px;
    color: #000000;
    width: 60%;
    max-width: 60%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    z-index: 1;
    text-overflow: ellipsis;
}

.view_detailTypeContainer.expanded.max_window #view_bread_crumbs {
    width: 33% !important;
    max-width: 33% !important;
}

.htViewContainer #tree-container,
.htViewContainer.hvc_margin #tree-container {
    width: 100%;
    margin: 5px auto;
    position: relative;
    overflow: hidden;
}

.htViewContainer #tree-container,
.htViewContainer #loading-container,
#loadingSaveContainer {
    /*height: 495px;
	min-height: 495px;*/
    height: 91%;
}


/*.htViewContainer.hvc_margin #tree-container, .htViewContainer.hvc_margin #loading-container{
	min-height: 495px;
	height: 495px;
}
*/

.htViewContainer.hvc_margin #tree-container,
.htViewContainer.hvc_margin #loading-container {
    /*height: 504px;*/
    height: 85%;
    margin-top: 40px;
}

.node,
.s_node,
.v_node {
    cursor: pointer;
}

.node circle,
.s_node circle,
.v_node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}

.node text,
.s_node text,
.v_node text {
    font: 10px sans-serif;
}

.found {
    fill: #ff4136;
    stroke: #ff4136;
}

.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}

.overlay {
    width: 100%;
    background-color: #f5f5f5;
}

.templink {
    fill: none;
    stroke: red;
    stroke-width: 3px;
}

.ghostCircle.show {
    display: block;
}

.ghostCircle,
.activeDrag .ghostCircle {
    display: none;
}

#grid line {
    stroke-width: 1.5;
    stroke: #ffffff;
}

.tick text {
    font-size: 15px;
    fill: red;
}

.hover {
    cursor: pointer;
}

.snapshotContainer {
    min-height: 230px;
    height: auto;
    width: 37%;
    border: 1px solid rgba(183, 183, 182, 0.3);
    border-radius: 2px;
    background-color: #FFFFFF;
    margin: 15px 0;
    float: left;
}

.snapshotHeader {
    height: 40px;
    width: 100%;
    border-bottom: 1px solid rgba(183, 183, 182, 0.3);
    ;
}

.snapshotHeader p {
    color: #000000;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding-top: 12px;
}

.carousel-inner {
    height: 55px !important;
}

.item {
    padding-top: 0px !important;
    padding-left: 35px !important;
}

.carousel slide {
    background-color: transparent !important;
    height: 55px !important;
}

.carouselUserName {
    margin-top: -42px !important;
    margin-left: 55px !important;
    color: #000000 !important;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.carouselJobTitle {
    margin-top: 5px !important;
    margin-left: 55px !important;
    color: #000000 !important;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
}

.imgCircle {
    height: 45px !important;
    width: 45px !important;
    border-radius: 50px !important;
    margin-top: -6px !important;
    margin-left: -8px !important;
}

#treeSnapshot {
    height: 200px;
    width: 100%;
    min-height: 150px;
    overflow: hidden;
}

.nodeContainer {
    height: 355px;
    width: 37%;
    margin-top: 5px;
    background: #ffffff;
    border: 1px solid rgba(183, 183, 182, 0.3);
    float: left;
}

.tabHeader {
    width: 100%;
    height: auto;
    margin: 0;
    float: left;
}

.tabHeader ul {
    list-style: none;
    padding: 0;
}

.tabHeader ul li {
    height: 35px;
    width: 25%;
    float: left;
    cursor: pointer;
    background-color: #F1F1F1;
}

.tabHeader ul li p {
    color: #000000;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    text-align: center;
    margin: 0;
    padding: 10px 5px;
    max-width: 82px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabHeader ul li.active {
    background-color: #ffffff;
    cursor: default;
}

.tabHeader ul li.active p {
    font-weight: bold;
}

.tabHeader ul li p.viewPage {
    max-width: 125px !important;
    text-align: left !important;
}

#disabledbutton {
    background: #ffffff;
    cursor: default;
    height: 300px;
}

.tabBody {
    height: 290px;
    width: 100%;
    float: left;
}

.perfectScrollbar {
    height: 270px;
}

.agentPerfectScrollbar {
    height: 235px;
}

.historyPerfectScrollbar {
    height: 282px;
}

.viewHierarchyDisabled {
    height: 315px !important;
}

.tabBody .detailsContainer .ul .li {
    list-style: none;
    margin: 0 !important;
}

.tabBody .detailsContainer .ul .li .attributeContainer {
    margin-left: 10px;
    margin-top: 1px;
    float: left;
    width: 46%;
    height: 40px;
    padding: 5px;
    color: #5A5A5A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
}

.attributeContainer p {
    margin: 0 !important;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabBody .detailsContainer .ul .li .attributeValueContainer {
    height: 40px;
    width: 46%;
    float: left;
    margin-top: 8px;
}

.tabBody .detailsContainer .ul .li .attributeValueContainer input {
    width: 100%;
    height: 20px;
    border: none;
    border-radius: 2px;
    line-height: normal !important;
    background-color: rgba(120, 117, 114, 0.05);
    cursor: pointer;
}

.tabBody .detailsContainer .ul .li .attributeValueContainer select.nodeTypeDropDown {
    width: 100%;
    height: 24px;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    background-color: rgba(120, 117, 114, 0.05);
}

.tabBody .detailsContainer .ul .li .attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-inputtext {
    width: 100%;
    height: 24px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #757574;
}

.tabBody .detailsContainer .agent_details #emp .ul .li .attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-inputtext.ui-widget.ui-state-default {
    opacity: unset;
    color: #222222;
}

.tabBody .detailsContainer .agent_details #emp .ul .li .attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-inputtext {
    width: 100%;
    height: 24px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    /*color: #757574;*/
}

.tabBody .detailsContainer .ul .li .attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-calendar-button {
    height: inherit !important;
}

p-calendar.commonInputTextbox .ui-calendar .ui-inputtext:focus {
    border: 0.5px solid #757574;
    box-sizing: border-box;
    box-shadow: inset 0px 1px 4px rgba(117, 117, 116, 0.268342);
    border-radius: 2px
}

p-calendar.commonInputTextbox .ui-calendar .ui-inputtext {
    border: 0.5px solid #757574;
    border-radius: 3px;
    width: 100% !important;
}

p-calendar.commonInputTextbox .ui-calendar button.ui-datepicker-trigger,
p-calendar.commonInputTextbox .ui-calendar button.ui-datepicker-trigger:hover,
p-calendar.commonInputTextbox .ui-calendar button.ui-datepicker-trigger:focus,
p-calendar.commonInputTextboxPA .ui-calendar button.ui-datepicker-trigger,
p-calendar.commonInputTextboxPA .ui-calendar button.ui-datepicker-trigger:hover,
p-calendar.commonInputTextboxPA .ui-calendar button.ui-datepicker-trigger:focus {
    border: none !important;
    background: url(../images/calendar.svg) no-repeat 50% 50% !important;
    width: 20px;
    height: 28px;
    position: absolute;
    right: 3px;
}

p-calendar.commonInputTextboxPA .ui-calendar button.ui-datepicker-trigger,
p-calendar.commonInputTextboxPA .ui-calendar button.ui-datepicker-trigger:hover,
p-calendar.commonInputTextboxPA .ui-calendar button.ui-datepicker-trigger:focus {
    top: 3px;
}

.attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-datepicker.ui-widget .ui-datepicker-calendar thead tr th {
    padding: 0px !important;
    line-height: 22px !important;
}

.attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-datepicker.ui-widget .ui-datepicker-calendar tbody tr td a {
    line-height: 5px !important;
}

.attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-default.ui-state-active {
    background-color: #508DCA;
    border-radius: 50%;
    height: 16px;
    width: 18px;
    padding: 6px 0px 5px;
    left: 0;
    right: 0;
    margin: 1px auto;
    /*position: absolute;*/
    color: #ffffff;
}


/*.attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-datepicker-calendar td:not(.ui-state-disabled) a:hover, .attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-highlight{*/


/*border-radius: 50%;
    height: 15px;
    width: 18px;
    left: 0;
    right: 0;
    margin: 1px auto;
    padding: 7px 3px !important;
    position: absolute;
    color: #212121;
}*/

.attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-datepicker.ui-widget .ui-datepicker-header a:hover {
    border-color: #E8EEF4;
    background: #E8EEF4;
}

#search_agent .ui-autocomplete.ui-widget input.ui-inputtext {
    height: 25px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    line-height: 16px;
    background-color: rgba(120, 117, 114, 0.05);
    border: 0;
    position: absolute;
    left: 10px;
    top: -16px;
    padding: 0px 0 0 10px;
    box-shadow: none;
    text-align: center;
    border: none;
    border-radius: 2px;
}

#search_agent .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    border-radius: 0 !important;
    height: auto !important;
    width: 100% !important;
    top: 9px !important;
    max-height: 250px !important;
    margin-left: 10px !important;
}

.attributeValueContainer .searchbox_submit {
    background: url(../images/HierarchyImages/search.svg) no-repeat;
    width: 18px !important;
    height: 18px !important;
    border: 0 !important;
    cursor: pointer;
    padding: 0;
    position: absolute;
    margin-left: -16px;
    margin-top: 3px;
}

.attributeValueContainer #error_msg {
    color: red;
    margin: 0px;
    width: 100%;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 10px;
    padding: 0 !important;
    line-height: 12px;
}

.tabButtons {
    margin: 5px;
    height: 34px;
    float: right;
    margin-right: 25px;
    text-align: end
}

.tabButtons .cancelButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    /* background-color: #4a4a4a; */
    /* color: #ffffff; */
    padding: 8px 44px;
    text-align: center;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    float: left;
    margin: 0 0 0 10px;
    /* opacity: 0.5; */
    background-color: rgba(86, 82, 79, 0.1);
    color: #56524f
}

.tabButtons .saveButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508DCA;
    color: #ffffff;
    padding: 8px 44px;
    text-align: center;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    float: left;
    margin: 0 0 0 10px;
}

.node_error_msg {
    color: red;
    width: 100%;
    margin: 0px 10px;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: normal;
    font-size: 12px;
}

.typesHeader.collapsed,
.typesSubHeader.collapsed,
.typesContainer.collapsed,
.detailTypeContainer.collapsed .snapshotContainer,
.detailTypeContainer.collapsed .nodeContainer,
.detailTypeContainer.collapsed .editHierarchyStatus,.detailTypeContainer.collapsed .gridButtons{
    display: block;
}

.typesHeader.expanded,
.typesSubHeader.expanded,
.typesContainer.expanded,
.detailTypeContainer.expanded .snapshotContainer,
.detailTypeContainer.expanded .nodeContainer,
.detailTypeContainer.expanded .editHierarchyStatus,.detailTypeContainer.expanded .gridButtons {
    display: none;
}

.typesHeader.collapsed,
.typesSubHeader.collapsed,
.typesContainer.collapsed,
.detailTypeVersionContainer.collapsed .snapshotContainer,
.detailTypeVersionContainer.collapsed .nodeContainer,
.detailTypeVersionContainer.collapsed .editHierarchyStatus {
    display: block;
}

.typesHeader.expanded,
.typesSubHeader.expanded,
.typesContainer.expanded,
.detailTypeVersionContainer.expanded .snapshotContainer,
.detailTypeVersionContainer.expanded .nodeContainer,
.detailTypeVersionContainer.expanded .editHierarchyStatus {
    display: none;
}

.typesHeader.collapsed,
.viewHierarchyStatus.collapsed,
.typesSubHeader.collapsed,
.typesContainer.collapsed,
.view_detailTypeContainer.collapsed .snapshotContainer,
.view_detailTypeContainer.collapsed .nodeContainer,
.view_detailTypeContainer.collapsed .htContainer .typeSearchContainer {
    display: block;
}

.typesHeader.expanded,
.viewHierarchyStatus.expanded,
.typesSubHeader.expanded,
.typesContainer.expanded,
.view_detailTypeContainer.expanded .snapshotContainer,
.view_detailTypeContainer.expanded .nodeContainer {
    display: none;
}

.detailTypeContainer.expanded .htContainer,
.detailTypeVersionContainer.expanded .htContainer,
.view_detailTypeContainer.expanded .htContainer {
    width: 96%;
    margin: 0 1%;
}

.rightContainer.collapsed.max_window {
    width: 83%;
    margin: 0 0 0 257px;
}

.rightContainer.expanded.max_window {
    width: 94.3%;
    margin: 0 0 0 77px;
}

.detailTypeContainer.max_window,
.view_detailTypeContainer.max_window {
    width: 100% !important;
    margin: 0;
    height: 100%;
}

.htContainer.max_window {
    width: 100% !important;
}

.detailTypeContainer.max_window .htViewContainer.hvc_margin #tree-container,
.detailTypeContainer.max_window .htViewContainer.hvc_margin #loading-container {
    height: 82% !important;
}

.detailTypeContainer.max_window .htViewContainer #tree-container,
.detailTypeContainer.max_window .htViewContainer.hvc_margin #loading-container {
    height: 87% !important;
}

.rightContainer.expanded .detailTypeContainer .htContainer,
.rightContainer.expanded .view_detailTypeContainer .htContainer {
    width: 61%;
}

@media screen and (min-width: 1000px) and (max-width: 1050px) {
    #view_bread_crumbs {
        width: 30%;
        max-width: 30%;
    }
    #view_search_container .search_input_container {
        width: 70%;
    }
    #view_search_container .search_submit_container {
        width: 28.2%;
    }
}

@media screen and (min-width: 1051px) and (max-width: 1135px) {
    #view_bread_crumbs {
        width: 35%;
        max-width: 35%;
    }
    #view_search_container .search_input_container {
        width: 73%;
    }
    #view_search_container .search_submit_container {
        width: 25.2%;
    }
}

@media screen and (min-width: 1135px) and (max-width: 1201px) {
    #view_bread_crumbs {
        width: 40%;
        max-width: 40%;
    }
    #view_search_container .search_input_container {
        width: 75%;
    }
    #view_search_container .search_submit_container {
        width: 23.2%;
    }
}

@media screen and (min-width: 1202px) and (max-width: 1260px) {
    #view_bread_crumbs {
        width: 45%;
        max-width: 45%;
    }
    #view_search_container .search_input_container {
        width: 80%;
    }
    #view_search_container .search_submit_container {
        width: 18.2%;
    }
}


/* END OF EDIT HIERARCHY PAGE CSS */


/* START OF CREATE HIERARCHY PAGE CSS */

.firstContainer,
.secondContainer,
.thirdContainer {
    width: 100%;
    height: auto;
    float: left;
}


/*.firstContainer, .secondContainer{
	 border-bottom: 1px solid rgba(80,141,202,0.3);
} */

.firstContainer .firstContainerquestions,
.secondContainer .secondContainerquestions,
.thirdContainer .thirdContainerquestions {
    width: 35%;
    float: left;
    margin: 20px 0 15px;
}

.firstContainer .firstContainerquestions p,
.secondContainer .secondContainerquestions p,
.thirdContainer .thirdContainerquestions p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #4a4a4a;
    font-weight: bold;
}

.firstContainer .firstContaineroptions,
.secondContainer .secondContaineroptions,
.thirdContainer .thirdContaineroptions {
    width: 37%;
    float: left;
    margin: 15px 0;
}

.secondCreateContainer .secondContainer {
    border-bottom: 0;
}

.firstContainer .firstContaineroptions input,
.secondContainer .secondContaineroptions input,
.thirdContainer .thirdContaineroptions input {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #757574;
    box-shadow: inset 0px 1px 4px rgba(117, 117, 116, 0.26834);
    padding-left: 5px;
}

p-calendar.commonInputTextbox {
    width: 100%;
    border: 0;
}

p-calendar.commonInputTextbox .ui-calendar {
    width: 100%;
}

.firstCreateContainer .fourthContainer {
    margin-left: 5px;
}

.firstCreateContainer .fourthContainer h5 {
    color: red;
    margin-bottom: 20px;
    margin-left: 5px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
}

.secondCreateContainer .addButton {
    width: auto;
    height: auto;
    float: left;
}

.addButton {
    width: auto;
    height: auto;
    float: left;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508dca;
    color: #ffffff;
    padding: 10px 0;
    text-align: center;
    border-radius: 3px;
    width: 125px;
    font-weight: bold;
    cursor: pointer;
    margin: 3px 0;
    height: 36px;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.secondCreateContainer .addButton .createButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508dca;
    color: #ffffff;
    padding: 6px 0;
    text-align: center;
    border-radius: 3px;
    width: 125px;
    font-weight: bold;
    cursor: pointer;
    margin: 5px 0;
}

#attr_cancel {
    background-color: rgba(86, 82, 79, 0.1);
    color: #56524f;
    margin-left: 20px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    padding: 8px 0px;
    text-align: center;
    border-radius: 3px;
    width: 125px;
    font-weight: bold;
    cursor: pointer;
    float: right;
    margin-right: 30px;
    margin-top: 4px;
}

.secondCreateContainer .secondContainer .saveButton .createButton,
.firstMetricsContainer .saveButton .createButton {
    background-color: #508dca;
    color: white;
    margin-left: 20px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    padding: 8px 0px;
    text-align: center;
    border-radius: 3px;
    width: 125px;
    font-weight: bold;
    cursor: pointer;
    float: right;
    margin-right: 5px;
    margin-top: 4px;
}

.firstContaineroptions .checkboxContainer {
    width: 100%;
    float: left;
    margin: 5px 1px;
}

.firstContaineroptions .checkboxContainer label {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px !important;
    color: #4A4A4A;
    float: left;
    width: auto;
    margin: 0 0 5px !important;
    font-weight: normal !important;
    display: block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.firstContaineroptions .checkboxContainer.active label {
    font-weight: 600 !important;
}

perfect-scrollbar.ps-show-active>.ps.ps--active-y>.ps-overlay:not(.ps-at-bottom) .ps-indicator-bottom,
perfect-scrollbar.ps-show-active>.ps.ps--active-y>.ps-overlay:not(.ps-at-top) .ps-indicator-top {
    opacity: 0 !important;
}

.firstContaineroptions .checkboxContainer label input[type=radio] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 0 !important;
}

.firstContaineroptions .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 19px;
    width: 19px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #757574;
    margin: 0;
}

.firstContaineroptions .checkboxContainer label:hover input~.checkmark {
    background-color: #ffffff;
}

.firstContaineroptions .checkboxContainer label input:checked~.checkmark {
    background-color: #ffffff;
}

.firstContaineroptions .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.firstContaineroptions .checkboxContainer label input:checked~.checkmark:after {
    display: block;
}

.firstContaineroptions .checkboxContainer label .checkmark:after {
    top: 6px;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #757574;
}

.fourthCreateContainer ul {
    list-style-type: none;
    float: left;
    padding: 0;
    margin: 0;
    width: 100%;
}

.fourthCreateContainer ul li {
    width: 100%;
    height: 54px;
    padding: 16px 20px;
}

.fourthCreateContainer ul li a {
    text-decoration: none !important;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #4A4A4A;
    cursor: pointer;
    font-weight: bold;
    opacity: 0.5;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.fourthCreateContainer {
    width: 22%;
    float: left;
    border: 1px solid #b7b7b6;
    height: 55px;
    margin-bottom: 22px;
}

.fifthCreateContainer {
    width: 76%;
    float: left;
    margin-left: 30px;
}

.fifthCreateContainer .saveButton {
    height: 40px;
    width: 100%;
    margin-top: 55px;
    margin-bottom: 20px;
}

#date_note {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    color: #b7b7b6;
    font-weight: bold;
    float: left;
    margin-top: 14px;
}


/* .buttonsGroup .createButton{
	 width: 60%;
} */

.fifthCreateContainer .saveButton #createButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508dca;
    color: #ffffff;
    height: 35px;
    text-align: center;
    border-radius: 3px;
    width: 100px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 0px;
    float: left;
}

.fifthCreateContainer .saveButton .fa.fa-spinner.fa-spin {
    float: left;
    color: #b7b7b6;
    font-size: 22px;
    margin: 6px 18px;
    display: none;
}

.nextButton .fa.fa-spinner.fa-spin {
    float: right;
    color: #b7b7b6;
    font-size: 22px;
    margin: 6px -60px;
    display: none;
}
.template_growl_msg.ui-growl, .registerGrowl.ui-growl{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: auto !important;
}

.template_growl_msg.ui-growl.ui-widget .ui-growl-item-container.ui-state-highlight.ui-growl-message-error,.registerGrowl.ui-growl.ui-widget .ui-growl-item-container.ui-state-highlight.ui-growl-message-error {
    background-color: #D5333A;
    background-image: url(../images/HierarchyImages/errorMsg.svg);
    background-repeat: no-repeat;
    background-position-x: 4%;
    background-position-y: 50%;
}

.template_growl_msg.ui-growl.ui-widget .ui-growl-item-container.ui-state-highlight.ui-growl-message-warn,.registerGrowl.ui-growl.ui-widget .ui-growl-item-container.ui-state-highlight.ui-growl-message-warn {
    background-color: #F5A623;
    background-image: url(../images/HierarchyImages/warningMsg.svg);
    background-repeat: no-repeat;
    background-position-x: 3.5%;
    background-position-y: 50%;
}

.template_growl_msg.ui-growl.ui-widget .ui-growl-item-container.ui-state-highlight.ui-growl-message-success,.registerGrowl.ui-growl.ui-widget .ui-growl-item-container.ui-state-highlight.ui-growl-message-success {
    background-color: #27D5A3;
    background-image: url(../images/HierarchyImages/completeMsg.svg);
    background-repeat: no-repeat;
    background-position-x: 3%;
    background-position-y: 50%;
}

.ui-growl-title {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    font-family: "Helvetica Neue", sans-serif;
}

.template_growl_msg .ui-growl-message,.registerGrowl .ui-growl-message {
    padding: 10px 10px 0.25em 4px !important;
}

#focusAfterSave {
    border: none;
    background-color: transparent;
    cursor: auto;
    color: transparent;
    width: 0px;
    height: 0px;
}

.nextButton {
    float: right;
    /* margin-top: -15px; */
}

.createHierarchyStepper.mat-stepper-horizontal,
.employeeStepper.mat-stepper-horizontal,
.metricsStepper.mat-stepper-horizontal,
.optimizerStepper.mat-stepper-horizontal {
    background: #ffffff !important;
}

.createHierarchyStepper .mat-horizontal-content-container,
.employeeStepper .mat-horizontal-content-container,
.metricsStepper .mat-horizontal-content-container,
.optimizerStepper .mat-horizontal-content-container {
    padding: 0 0 24px 0 !important;
    border: none;
    overflow: unset !important;
}

.createHierarchyStepper .mat-step-header,
.employeeStepper .mat-step-header,
.metricsStepper .mat-step-header,
.optimizerStepper .mat-step-header{
    padding: 0 10px;
}

.createHierarchyStepper .mat-step-header .mat-step-icon,
.employeeStepper .mat-step-header .mat-step-icon,
.metricsStepper .mat-step-header .mat-step-icon,
.optimizerStepper .mat-step-header .mat-step-icon{
    background-color: #508DCA;
    color: #ffffff;
}

.createHierarchyStepper .mat-step-header .mat-step-icon-not-touched,
.employeeStepper .mat-step-header .mat-step-icon-not-touched,
.metricsStepper .mat-step-header .mat-step-icon-not-touched,
.optimizerStepper .mat-step-header .mat-step-icon-not-touched {
    background-color: #9B9B9B;
    color: #ffffff;
}

.createHierarchyStepper .mat-step-header:hover,
.employeeStepper .mat-step-header:hover,
.metricsStepper .mat-step-header:hover,
.optimizerStepper .mat-step-header:hover{
    background-color: rgba(0, 0, 0, 0.04);
}


/*.createHierarchyStepper .mat-horizontal-content-container{
	width: 97%;
	height: 58%;
	padding: 24px 24px !important;
	background: #ffffff;
	border: 1px solid #caddef;
}*/

.createHierarchyStepper.mat-stepper-horizontal, .employeeStepper.mat-stepper-horizontal, .metricsStepper.mat-stepper-horizontal, .optimizerStepper.mat-stepper-horizontal{
    width: 100%;
    min-height: 500px;
    height: auto;
}

.createHierarchyStepper .mat-horizontal-stepper-header-container,
.employeeStepper .mat-horizontal-stepper-header-container,
.metricsStepper .mat-horizontal-stepper-header-container,
.optimizerStepper .mat-horizontal-stepper-header-container {
    white-space: nowrap;
    display: flex;
    align-items: center;
    width: 100%;
    height: 72px;
}

.createHierarchyStepper .mat-step-label .mat-step-text-label,
.createHierarchyStepper .mat-step-label.mat-step-label-active .mat-step-text-label,
.employeeStepper .mat-step-label .mat-step-text-label,
.employeeStepper .mat-step-label.mat-step-label-active .mat-step-text-label,
.metricsStepper .mat-step-label.mat-step-label-active .mat-step-text-label,
.metricsStepper .mat-step-label .mat-step-text-label,
.optimizerStepper .mat-step-label .mat-step-text-label,
.optimizerStepper .mat-step-label.mat-step-label-active .mat-step-text-label {
    min-width: 50px !important;
    color: #56524F !important;
    font-size: 14px !important;
    font-family: "Helvetica Neue", sans-serif!important;
}

.handsontable {
    overflow: hidden;
    width: 100%;
}

.ht_clone_top.handsontable {
    display: none !important;
}

.ht_clone_left.handsontable {
    display: none !important;
}

.ht_clone_top_left_corner.handsontable {
    display: none !important;
}

.ht_master.handsontable {
    height: auto !important;
    width: 98% !important;
}

textarea#HandsontableCopyPaste {
    position: fixed!important;
    bottom: 100%!important;
    right: 100%!important;
    outline: 0 none!important;
}

.ht_master,
.ht_clone_left,
.ht_clone_top,
.ht_clone_bottom {
    overflow: hidden;
}

.ht_master .wtHolder {
    width: 100% !important;
    height: auto !important;
}

.handsontable .wtHider {
    position: relative !important;
    height: auto !important;
}

.handsontable .wtSpreader {
    position: relative;
    width: 0;
    height: auto;
}

.handsontable table.htCore {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    border-width: 0;
    table-layout: fixed;
    width: 0;
    outline-width: 0;
    max-width: none;
    max-height: none;
}

.handsontable col {
    width: 50px;
}

.handsontable col.rowHeader {
    width: 50px;
}

.ht_master:not(.innerBorderTop) thead tr:last-child th,
.ht_master:not(.innerBorderTop)~.handsontable thead tr:last-child th,
.ht_master:not(.innerBorderTop) thead tr.lastChild th,
.ht_master:not(.innerBorderTop)~.handsontable thead tr.lastChild th {
    border-bottom-width: 0;
}

.handsontable tr:first-child th,
.handsontable tr:first-child td {
    border-top: 1px solid #508DCA !important;
}

.handsontable th:first-child,
.handsontable th:nth-child(2),
.handsontable td:first-of-type,
.handsontable .htNoFrame+th,
.handsontable .htNoFrame+td {
    border-left: 1px solid #508DCA !important;
}

.handsontable thead th {
    padding: 0;
}

.handsontable th {
    /*background-color: #f3f3f3 !important;
	color: #222;
	text-align: center;
	font-weight: normal;
	white-space: nowrap !important;*/
    background-color: transparent !important;
    color: #222 !important;
    text-align: center !important;
    font-weight: normal !important;
    white-space: nowrap !important;
}

.handsontable th,
.handsontable td {
    border-top-width: 0;
    border-left-width: 0;
    border-right: 1px solid #508DCA !important;
    border-bottom: 1px solid #508DCA !important;
    height: 22px;
    empty-cells: show;
    line-height: 21px;
    padding: 0 4px 0 4px;
    background-color: #FFF;
    vertical-align: top;
    overflow: hidden;
    outline-width: 0;
    white-space: pre-line;
    background-clip: padding-box;
}

.handsontable thead th .relative {
    padding: 2px 4px;
}

.handsontable .relative {
    position: relative;
}

.handsontable .wtBorder {
    position: absolute;
    font-size: 0;
}

.handsontable .wtBorder.corner {
    font-size: 0;
    cursor: crosshair;
}

.ht_clone_top {
    z-index: 101;
}

.ht_clone_top .wtHolder,
.ht_clone_bottom .wtHolder {
    overflow-x: auto;
    overflow-y: hidden;
}

.handsontable .handsontable.ht_clone_top .wtHider {
    padding: 0 0 5px 0;
}

.ht_clone_left {
    z-index: 102;
}

.ht_clone_left .wtHolder {
    overflow-x: hidden;
    overflow-y: auto;
}

.handsontable th:last-child {
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
}

.ht_clone_top_left_corner,
.ht_clone_bottom_left_corner {
    z-index: 103;
}

.ht_master:not(.innerBorderLeft):not(.emptyColumns)~.handsontable tbody tr th,
.ht_master:not(.innerBorderLeft):not(.emptyColumns)~.handsontable:not(.ht_clone_top) thead tr th:first-child {
    border-right-width: 0;
}

.handsontable tbody th.ht__highlight,
.handsontable thead th.ht__highlight {
    /*background-color: #dcdcdc !important;*/
    background-color: #508DCA !important;
    color: #ffffff !important;
}

.handsontable td.area {
    background: -moz-linear-gradient(top, rgba(181, 209, 255, 0.34) 0%, rgba(181, 209, 255, 0.34) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(181, 209, 255, 0.34)), color-stop(100%, rgba(181, 209, 255, 0.34)));
    background: -webkit-linear-gradient(top, rgba(181, 209, 255, 0.34) 0%, rgba(181, 209, 255, 0.34) 100%);
    background: -o-linear-gradient(top, rgba(181, 209, 255, 0.34) 0%, rgba(181, 209, 255, 0.34) 100%);
    background: -ms-linear-gradient(top, rgba(181, 209, 255, 0.34) 0%, rgba(181, 209, 255, 0.34) 100%);
    background: linear-gradient(to bottom, rgba(181, 209, 255, 0.34) 0%, rgba(181, 209, 255, 0.34) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#57b5d1ff', endColorstr='#57b5d1ff', GradientType=0);
    background-color: #fff;
}

.handsontable.ht__selection--columns thead th.ht__highlight,
.handsontable.ht__selection--rows tbody th.ht__highlight {
    /*background-color: #8eb0e7 !important;*/
    background-color: #508DCA !important;
    color: #000;
}

.handsontable input,
.handsontable textarea {
    min-height: initial;
}

.handsontableInputHolder {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

.handsontableInput {
    border: none;
    outline-width: 0;
    margin: 0;
    padding: 1px 5px 0 5px;
    font-family: inherit;
    line-height: 21px;
    font-size: inherit;
    box-shadow: 0 0 0 2px #5292F7 inset;
    resize: none;
    display: inline-block;
    color: #000;
    border-radius: 0;
    background-color: #FFF !important;
}

.handsontable table,
.handsontable tbody,
.handsontable thead,
.handsontable td,
.handsontable th,
.handsontable input,
.handsontable textarea,
.handsontable div {
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

.container:before,
.container:after {
    display: none !important;
}


/* END OF CREATE HIERARCHY PAGE CSS */


/* START OF COMPARE HIERARCHY PAGE CSS */

.CompareSideHeader {
    background-color: #757574;
    border-bottom: 1px solid rgba(183, 183, 182, 0.3);
    height: 40px;
    width: 100%;
    float: left;
}

.CompareSideHeader .typeText {
    padding: 10px 20px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    width: auto;
    color: #6D6660 !important;
    font-weight: 500;
}

.CompareSideHeader .typeChooseText {
    padding: 10px 14px;
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    width: 80%;
    color: #ffffff;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.CompareSideHeader .typeSearch {
    background: url("../images/HierarchyImages/compareHierarchySearch.svg");
    width: 18px;
    height: 19px;
    margin: 9px 7px 0 0;
    float: right;
    cursor: pointer;
}

#hversions {
    height: 76%;
    width: 100%;
    background-color: #FFFFFF;
}

.globalCompareSearch {
    width: 100%;
    height: 40px;
    margin: 15px 0;
    border: 1px solid rgba(183, 183, 182, 0.3);
    /* background-color: #FFFFFF; */
    /* box-shadow: inset 0 1px 4px 0 rgba(80,141,202,0.23);
	-webkit-box-shadow: inset 0 1px 4px 0 rgba(80,141,202,0.23);
	-moz-box-shadow: inset 0 1px 4px 0 rgba(80,141,202,0.23); */
    position: relative;
    /* background: rgba(86, 82, 79, 0.1); */
    border-radius: 2px
}

.compare_searchbox_submit {
    /*background: url(../images/HierarchyImages/compareSearch.svg) no-repeat;
  	width: 50px;
	  height: 40px;*/
    background: white;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    border: 0;
    margin: 8px auto;
    position: absolute;
    right: 0;
    left: 0;
    font-size: 12px !important;
    color: #4A4A4A !important;
    background: #ffffff !important;
}

#compare_node .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 674px !important;
    height: 20px !important;
    -webkit-appearance: none !important;
    font-size: 12px !important;
    color: #4A4A4A !important;
    background: #ffffff !important;
    outline: none !important;
    border: 0 !important;
    vertical-align: middle !important;
    padding: 0px 0px 0px 295px !important;
    position: absolute !important;
    left: 10px !important;
    top: -3px !important;
    box-shadow: none !important;
    margin-left: 42px !important;
}

#compare_node .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute;
    background: #fefcfc !important;
    cursor: default;
    border: 1px solid #e7e4e4 !important;
    border-radius: none !important;
    height: auto !important;
    filter: progid: DXImageTransform.Microsoft.Shadow(color=#333333, Direction=90, Strength=10), progid: DXImageTransform.Microsoft.Shadow(color=#333333, Direction=270, Strength=10);
    width: 221px !important;
    top: 27px !important;
    max-height: 267px !important;
    border-radius: 0px;
    left: 300px !important;
}

.compareContainer {
    width: 100%;
    height: 400px;
    position: relative;
    float: left;
    /* box-shadow: 0 0 11px 0 rgba(80,141,202,0.13), 6px 3px 9px 0 rgba(117,165,177,0.08);
	-webkit-box-shadow:0 0 11px 0 rgba(80,141,202,0.13), 6px 3px 9px 0 rgba(117,165,177,0.08);
	-moz-box-shadow:0 0 11px 0 rgba(80,141,202,0.13), 6px 3px 9px 0 rgba(117,165,177,0.08); */
}

.leftCompareContainer {
    width: 48%;
    height: 542px;
    float: left;
    border: 1px solid rgba(183, 183, 182, 0.3);
    border-radius: 2px;
}

.rightContainer.collapsed .leftCompareContainer {
    width: 48%;
    /* height: 100%;
	float: left;
	border: 1px solid #B7B7B6; */
}

.rightContainer.collapsed .rightCompareContainer {
    width: 48%;
    margin-left: 30px;
    /* height: 100%;
	float: left;
	border: 1px solid #B7B7B6; */
}

.rightCompareContainer {
    width: 48%;
    height: 542px;
    float: left;
    border: 1px solid rgba(183, 183, 182, 0.3);
    ;
    border-radius: 2px;
    margin-left: 35px;
}

.searchHeaderContainer {
    width: 100%;
    height: 40px;
    background-color: #ffffff;
}

.searchHeaderContainer .header {
    width: 50%;
    height: 100%;
    /* border-right: 0.25px solid #caddef; */
    float: left;
}

.searchHeaderContainer .versionSearchContainer {
    width: 43%;
    height: 100%;
    float: left;
    position: relative;
    border-left: 1px solid rgba(183, 183, 182, 0.3);
    /* border-color: rgba(86, 82, 79, 0.1) */
    /* background-color: rgba(86, 82, 79, 0.1); */
}

.searchHeaderContainer .versionSearchContainer aside {
    box-sizing: border-box;
    padding: 10px 0;
    border: 1px solid rgba(183, 183, 182, 0.3);
    opacity: 0.33;
    margin: 9px 12px;
    float: right;
}

.searchHeaderContainer .closeVersion {
    width: 7%;
    height: 100%;
    float: left;
    /* background-color: rgba(86, 82, 79, 0.1); */
}

.globalCompareSearch .closeVersion,
.typeContainer .closeVersion,
.typeSearchContainer .closeVersion {
    width: 7%;
    height: 100%;
    float: right;
    /* background-color: rgba(86, 82, 79, 0.1); */
}

.searchHeaderContainer .closeVersion aside {
    background: url(../images/HierarchyImages/closing.png) no-repeat;
    width: 13px;
    height: 14px;
    margin: 13px 0;
    cursor: pointer;
    /* background: rgba(86, 82, 79, 0.1); */
}

.globalCompareSearch .closeVersion aside {
    background: url(../images/HierarchyImages/closing.png) no-repeat;
    width: 13px;
    height: 14px;
    margin: 13px 24px;
    cursor: pointer;
}

.typeContainer .closeVersion aside,
.typeSearchContainer .closeVersion aside {
    background: url(../images/HierarchyImages/closing.png) no-repeat;
    width: 13px;
    height: 14px;
    margin: -8px -4px;
    position: relative;
    cursor: pointer;
    /* background: rgba(86, 82, 79, 0.1); */
}

.searchHeaderContainer .header p {
    margin: 0;
    color: #000000;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
    float: left;
    padding: 10px 0 10px 15px;
    width: 98%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.compareTreeConatainer {
    width: 100%;
    height: 355px;
    position: relative;
    box-sizing: border-box;
    border-top: 1px solid rgba(183, 183, 182, 0.3);
    background-color: #ffffff;
}

.versionSearchContainer .compare_sb_left_submit,
.versionSearchContainer .compare_sb_right_submit {
    /*background: url(../images/HierarchyImages/searching.png) no-repeat;
	width: 18px;
	height: 19px;*/
    background: #ffffff;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    border: 0;
    margin: 15px 10px;
    float: right;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    top: -12px;
    color: #4A4A4A !important;
    text-align: center;
}

#compare_node_version_1 .ui-autocomplete.ui-widget input.ui-inputtext,
#compare_node_version_2 .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 127px;
    height: 40px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background: #ffffff;
    border: 0;
    position: absolute;
    left: 0px;
    top: -12px;
    padding: 0px 0 0 10px;
    box-shadow: none;
    text-align: center;
    color: #4A4A4A !important;
}

#compare_node_version_1 .ui-autocomplete.ui-widget div.ui-autocomplete-panel,
#compare_node_version_2 .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute;
    background: #fefcfc !important;
    cursor: default;
    border: 1px solid #e7e4e4 !important;
    border-radius: none !important;
    height: auto !important;
    filter: progid: DXImageTransform.Microsoft.Shadow(color=#333333, Direction=90, Strength=10), progid: DXImageTransform.Microsoft.Shadow(color=#333333, Direction=270, Strength=10);
    width: 212px !important;
    top: 29px !important;
    max-height: 267px !important;
    margin-left: -1px;
    border-radius: 0px;
}

#treeDiagram1,
#treeDiagram2 {
    height: 495px;
    width: 99%;
    position: absolute;
    margin: 2px;
}

.leftCompareTree.ui-state-highlight,
.rightCompareTree.ui-state-highlight {
    border-color: #508dca !important;
    background: #508dca !important;
    color: #ffffff !important;
    height: 500px !important;
    width: 100% !important;
}

#loading-container_1,
#loading-container_2 {
    width: 100%;
    height: 495px;
    position: absolute;
    background: url(../images/ajax-loader.gif) 50% 50% #f5f5f5 no-repeat;
}

#userProfileImage {
    border-radius: 50%;
}

#userImg {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    font-size: 15px;
    color: black;
    text-align: center;
    line-height: 38px;
    font-weight: bold;
    font-family: 'Helvetica Neue', sans-serif;
}

#loader_drop_1,
#loader_drop_2 {
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: #F5F5F5;
    mix-blend-mode: normal;
    opacity: 0.8;
    border: 1px dashed #D6D4D2;
    box-sizing: border-box;
    border-radius: 2px;
    width: initial;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.leftCompareTree,
.rightCompareTree {
    width: 100%;
    height: 495px;
    position: relative;
    float: left;
}

#grid_1 line,
#grid_2 line,
#grid_3 line {
    stroke-width: 1.5;
    stroke: #ffffff;
}


/* END OF COMPARE HIERARCHY PAGE CSS */


/* START OF CREATE TEAM PAGE CSS */

p.yetToCome {
    font-size: 50px;
    text-align: center;
    margin-top: 120px;
}

p.teamTableValues {
    width: auto;
    max-width: 99%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #000000;
}

p.teamNonEmpTableValues {
    width: 74.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teamSearchContainer {
    width: 100%;
    height: auto;
    float: left;
    margin: 20px 0;
}

.globalTeamSearch {
    width: 79%;
    height: 35px;
    border: 1px solid #508DCA;
    border-radius: 2px;
    background-color: #FFFFFF;
    float: left;
    box-shadow: inset 0 1px 4px 0 rgba(80, 141, 202, 0.23);
    -webkit-box-shadow: inset 0 1px 4px 0 rgba(80, 141, 202, 0.23);
    -moz-box-shadow: inset 0 1px 4px 0 rgba(80, 141, 202, 0.23);
    position: relative;
}

.globalTeamSearch .ui-autocomplete {
    width: 100% !important;
}

#team_node .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 100% !important;
    height: 33px !important;
    -webkit-appearance: none !important;
    opacity: 0.6;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    outline: none !important;
    border: 0 !important;
    vertical-align: middle !important;
    padding: 0 12px !important;
    box-shadow: none !important;
    background-image: url(../images/HierarchyImages/compareSearch.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#team_node .ui-autocomplete.ui-widget input.ui-inputtext:focus {
    background-image: none;
}

#team_node .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    border-radius: 0 !important;
    height: auto !important;
    max-height: 250px !important;
    margin-top: 1px;
}

.submitTeamContainer {
    width: 17.65%;
    height: auto;
    float: left;
    margin: 0 0 0 30px;
}

.submitTeamContainer .submitTeamButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508DCA;
    height: 35px;
    color: #ffffff;
    padding: 10px 75px;
    text-align: center;
    border-radius: 2px;
    width: auto;
    float: left;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
}

.teamFilterContainer {
    height: auto;
    float: left;
    margin: 0 0 20px;
}

.rightContainer.collapsed .teamFilterContainer {
    width: 100%;
}

.rightContainer.expanded .teamFilterContainer {
    width: 97%;
}

.teamFilterContainer p {
    float: left;
    color: #4A4A4A;
    font-family: "Helvetica Neue";
    font-size: 14px;
    padding: 3px 20px 0 0;
    margin: 0;
}

.teamFilterContainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
}

.teamFilterContainer ul li {
    margin: 0 10px 10px 10px;
    float: left;
    height: 25px;
}

.teamFilterContainer ul li.active {
    border: 1px solid #508DCA;
    border-radius: 2px;
}

.teamFilterContainer ul li.inactive {
    border: 1px solid #AEAEAE;
    border-radius: 2px;
}

.teamFilterContainer ul li p {
    text-align: center;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    padding: 3px 20px;
    margin: 0;
}

.teamFilterContainer ul li.active p {
    color: #508DCA;
}

.teamFilterContainer ul li.inactive p {
    color: #AEAEAE;
}

.viewSwitchContainer {
    float: right;
    margin: 0 5px;
    height: 25px;
    width: 30px
}

.viewSwitchContainer img {
    cursor: pointer;
    margin: 2px 0;
    padding: 0;
}

.teamResultContainer {
    width: 99%;
    height: auto;
    margin: 5px 0 20px;
    float: left;
}

.teamResultContainer ul {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.teamResultContainer ul li {
    height: 212px;
    width: 290px;
    border-radius: 2px;
    background-color: #FFFFFF;
    box-shadow: 0 0 11px 0 rgba(80, 141, 202, 0.13), 6px 3px 9px 0 rgba(117, 165, 177, 0.08);
    margin: 0 20px 15px 0;
    float: left;
}

.teamResultContainer ul.pagination li {
    float: none !important;
}

.teamResultContainer ul li .teamDataDetails {
    width: 100%;
    height: 100%;
}

.teamResultContainer ul li .teamDataDetails .teamDetailHeader {
    height: 65px;
    width: 100%;
    border: 0 solid #508DCA;
    border-radius: 2px 2px 0 0;
    background-color: #E8EEF4;
    box-shadow: 7px 10px 8px 0 rgba(117, 165, 177, 0.08);
}

.teamResultContainer ul li .teamDataDetails .teamDetailHeader .leftHeader {
    padding: 5px 5px 5px 15px;
    float: left;
    width: 87%;
}

.teamResultContainer ul li .teamDataDetails .teamDetailHeader .rightHeader {
    padding: 5px;
    float: left;
    width: 13%;
    height: 100%;
}

.teamResultContainer ul li .teamDataDetails .teamDetailHeader .rightHeader img {
    margin: 5px 0;
}

.teamResultContainer ul li .teamDataDetails .teamDetailHeader .leftHeader p.teamName {
    width: 100%;
    padding: 2px 0;
    margin: 0 0 3px 0;
    color: #000000;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teamResultContainer ul li .teamDataDetails .teamDetailHeader .leftHeader p.teamDetails {
    width: 100%;
    padding: 2px 0;
    margin: 0 0 3px 0;
    color: #9B9B9B;
    font-family: Helvetica;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teamDescriptionContainer {
    background-color: #ffffff;
    padding: 15px 20px;
    width: 100%;
    height: auto;
    min-height: 112px;
}

.teamDescriptionContainer .teamDesc {
    margin: 0 auto 10px;
    width: 100%;
}

.teamDescriptionContainer .teamDesc p {
    color: #9B9B9B;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 10px;
    line-height: 12px;
    width: 100%;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teamDescriptionContainer .teamImages {
    width: 100%;
    margin: 5px auto;
    float: left;
}

.teamDescriptionContainer .teamImages ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.teamDescriptionContainer .teamImages ol li {
    float: left;
    width: auto;
    height: auto;
    margin: 0 -7px;
    border-radius: 0;
    box-shadow: none;
    background-color: inherit;
}

.teamDescriptionContainer .teamImages ol li div {
    width: 40px;
    height: 40px;
    float: left;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    background-color: #FFFFFF;
}

.teamDescriptionContainer .teamImages ol li div img {
    width: 100%;
    height: 100%;
    float: left;
    border-radius: 50%;
}

.teamDescriptionContainer .teamImages ol li div p {
    margin: 12px auto;
    color: #A2A1A3;
    font-family: Helvetica;
    font-size: 12px;
    text-align: center;
}

p.edit.teamImages.agent.name {
    margin: -35px auto;
}

.teamFooter {
    width: 100%;
    height: 35px;
    background-color: #E8EEF4;
    border-top: 0.25px solid #E8EEF4;
}

.teamFooter .teamEditContainer {
    width: 100%;
    height: 100%;
}

.teamFooter .teamEditContainer img {
    cursor: pointer;
    width: 16px;
    height: 15px;
    margin: 10px 137px;
}

.teamTable,
.teamEditTable,
.teamEditNodeTable,
.governanceTable {
    width: 100%;
    background-color: #ffffff;
    table-layout: fixed;
}

.teamTable div tbody,
.teamEditTable div tbody,
.teamEditNodeTable div tbody,
.governanceTable div tbody {
    width: 100% !important;
    position: relative;
    float: left;
}

.teamTable .perfectScrollbarViewTeam.ps-show-active .ps-content tbody,
.teamEditTable .perfectScrollbarEditTeam.ps-show-active .ps-content tbody,
.teamEditNodeTable .perfectScrollbarEditTeamNode.ps-show-active .ps-content tbody {
    width: 100% !important;
    display: block !important;
}

.teamTableHeader,
.teamEditTableHeader,
.teamEditNodeTableHeader,
.governanceTableHeader {
    background: #ffffff;
    float: left;
    padding: 9px 12px;
}

.teamRowHeading th:last-child,
.teamNonEmpRowHeading th:last-child,
.teamViewRowHeading th:last-child,
.teamViewNonEmpRowHeading th:last-child,
.teamEditRowHeading th:last-child,
.teamEditNodeRowHeading th:last-child,
.governanceRowHeading th:last-child {
    border-right: 1px solid #f4f4f4;
}

.teamTableValue,
.teamEditTableValue,
.teamEditNodeTableValue,
.governanceTableValue {
    padding: 10px 12px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
}

.teamTableHeader,
.teamTableValue,
.governanceTableHeader,
.governanceTableValue {
    border-collapse: collapse;
    text-align: left;
    border-bottom: 1px solid #508DCA;
    border-top: none;
    border-left: none;
    border-right: none;
    vertical-align: middle;
    float: left;
    width: 16.66%;
    display: inline-flex;
    min-height: 55px;
}

.teamEditTableHeader,
.teamEditTableValue,
.governanceTableHeader,
.governanceTableValue {
    border-collapse: collapse;
    text-align: left;
    border-bottom: 1px solid #508DCA;
    border-top: none;
    border-left: none;
    border-right: none;
    vertical-align: middle;
    float: left;
    width: 14.28%;
    display: inline-flex;
    min-height: 44px;
}

.teamEditNodeTableHeader,
.teamEditNodeTableValue {
    border-collapse: collapse;
    text-align: left;
    border-bottom: 1px solid #508DCA;
    border-top: none;
    border-left: none;
    border-right: none;
    vertical-align: middle;
    float: left;
    width: 14.28%;
    display: inline-flex;
    min-height: 44px;
}

.teamEditTableHeader.team_edit,
.teamEditNodeTableHeader.team_edit {
    padding: 9.4px 12px !important;
}

.teamTableValue ul,
.teamEditTableValue ul,
.governanceTableValue ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 150px;
    min-height: 25px;
}

.teamTableValue ul li,
.teamEditTableValue ul li,
.governanceTableValue ul li {
    float: left;
    width: auto;
    height: auto;
    margin: 0 -4px;
    border-radius: 0;
    box-shadow: none;
    background-color: inherit;
}

.teamTableValue ul li div,
.teamEditTableValue ul li div {
    width: 25px;
    height: 25px;
    float: left;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    background-color: #FFFFFF;
}

.teamTableValue ul li div img,
.teamEditTableValue ul li div img {
    width: 100%;
    height: 100%;
    float: left;
    border-radius: 50%;
}

.teamTableValue ul li div p,
.teamEditTableValue ul li div p {
    margin: 3px auto;
    color: #A2A1A3;
    font-family: Helvetica;
    font-size: 12px;
    text-align: center;
}

.teamTableValue.teamColumnResult {
    padding: 10.7px 12px !important;
}

.teamEditTableValue.teamColumnResult {
    padding: 9.3px 12px !important;
}


/*.teamEditNodeTableValue.teamEditNodeColumnResult{
	padding: 10.3px 12px !important;
}*/

.teamTableValue.teamMemberResult,
.teamEditNodeTableValue.teamMemberResult,
.teamEditTableValue.teamMemberResult {
    padding: 6px 12px !important;
}

.imgStatusCircleTeam,
.imgStatusCircleEditTeam,
.imgStatusCircleEditTeamNode {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin: 5px 9px 0 0;
    float: left;
}

p.teamTableValues.teamStatus,
p.teamEditTableValues.teamEditStatus,
p.teamEditNodeTableValues.teamEditNodeStatus {
    width: 80% !important;
    margin: -1px 0 0 0 !important;
    float: left;
}

.teamEditTableValue.teamEditColumnResult,
.teamEditNodeTableValue.teamEditColumnResult {
    padding: 10.3px 12px;
}

#teamEditShareTable .teamEditTableValue.teamEditColumnResult,
#teamEditSplitTable .teamEditTableValue.teamEditColumnResult {
    padding: 2.3px 12px !important;
}

#teamEditShareTable .teamEditTableValue.teamEditColumnResult {
    padding: 1.3px 12px !important;
}

#teamEditShareTable .teamEditTableHeader,
#teamEditShareTable .teamEditTableValue {
    width: 14.285% !important;
}

.governanceTableValue,
.governanceTableHeader {
    width: 25%;
}

.teamRowHeading,
.teamEditRowHeading,
.teamEditNodeRowHeading,
.teamRowValue,
.teamEditRowValue,
.teamEditNodeRowValue {
    background: #ffffff;
    float: left;
    width: 100%;
}

.teamViewRowHeading,
.teamViewRowValue {
    background: #ffffff;
    float: left;
    width: 100%;
}

.teamTable .perfectScrollbarViewTeam.ps-show-active .ps-content tbody tr,
.teamEditTable .perfectScrollbarEditTeam.ps-show-active .ps-content tbody tr,
.teamEditNodeTable .perfectScrollbarEditTeamNode.ps-show-active .ps-content tbody tr {
    width: 100% !important;
    display: inline-table !important;
}

.teamNonEmpRowHeading {
    background: #e6e6e6;
    float: left;
    width: 95%;
}

.teamViewNonEmpRowHeading {
    background: #e6e6e6;
    float: left;
    width: 83%;
}

.perfectScrollbarEditTeam,
.perfectScrollbarEditNonEmpTeam,
.perfectScrollbarViewTeam,
.perfectScrollbarViewNonEmpTeam,
.perfectScrollbarEditTeam,
.perfectScrollbarEditTeamNode {
    height: 55%;
}


/*.teamColumnResult{
	background: #dce8f4;
}

.teamColumnResults{
 	background: #ffffff;
 }*/

.typesTeamListArea {
    width: 100%;
    max-height: 98%;
    /*min-height: 30.9%;*/
    background: #ffffff;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(80, 141, 202, 0.88);
    -moz-box-shadow: 0px 0px 2px 0px rgba(80, 141, 202, 0.88);
    box-shadow: 0px 0px 2px 0px rgba(80, 141, 202, 0.88);
}

.typesTeamListArea ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.typesTeamListArea ul li #listHeader {
    background-color: #787572;
    margin: 0 0px 0px;
    border-bottom: 1px solid rgba(80, 141, 202, 0.3);
    height: 40px;
}

.typesTeamListArea ul li .typeText {
    padding: 14px 5px 4px 20px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    width: auto;
    font-weight: 500;
}

.typesTeamListArea ul li .typeChooseText {
    padding: 14px 5px 4px 20px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    width: auto;
    color: #ffffff;
    margin: 0;
    font-weight: bold;
}

.typesTeamListArea ul li:first-child .typeText {
    color: #6D6660 !important;
}

.typesTeamListArea ul li .typesList.active,
.typesTeamListArea ul li:hover .typesList {
    background-color: whitesmoke;
}

.typesTeamListArea ul li .typesList.default {
    background-color: white !important;
}

.typesTeamListArea ul li {
    list-style-type: none;
    width: 100%;
    float: left;
}

.header p {
    width: auto;
    font-family: "Helvetica Neue", sans-serif;
    margin: 8px 15px 5px 0;
    font-size: 14px;
    float: left;
    padding: 5px;
    cursor: pointer;
}

.header p.active {
    font-family: "Helvetica Neue", sans-serif;
    border-bottom: 5px solid #22b24b;
    font-weight: bold;
}

.teamTableHeader p,
.teamEditTableHeader p,
.teamEditNodeTableHeader p,
.governanceTableHeader p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #000000;
    width: 95%;
    float: left;
    max-width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 5px 0 0;
}

.teamTableHeader aside,
.teamEditTableHeader aside,
.teamEditNodeTableHeader aside {
    margin: 7px 5px;
    background: url(../images/HierarchyImages/selectOpen.png) no-repeat;
    height: 7px;
    width: 10px;
    float: left;
    border: 0;
    cursor: pointer;
}

.teamTableHeader aside.active,
.teamEditTableHeader aside.active,
.teamEditNodeTableHeader aside.active {
    background: url(../images/HierarchyImages/selectClose.png) no-repeat;
}


/*.teamTableHeader aside.active, .teamEditTableHeader aside.active, .teamEditNodeTableHeader aside.active{
  background: none;
}*/

.createTeamArea {
    float: left;
    height: auto;
    width: 100%;
    background: white;
    margin: 14px 0 10px;
    border: 1px solid rgba(80, 141, 202, 0.3);
}

.createTeamFormArea {
    padding: 20px;
    width: auto;
    height: auto;
    float: left;
}

.firstTeamContainer .questions,
.secondTeamContainer .questions,
.thirdTeamContainer .questions {
    width: 35%;
    float: left;
    margin: 20px 0 15px;
}

.firstTeamContainer .questions p,
.secondTeamContainer .questions p,
.thirdTeamContainer .questions p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
    font-weight: bold;
}

.firstTeamContainer .options,
.secondTeamContainer .options,
.thirdTeamContainer .options {
    width: 37%;
    float: left;
    margin: 15px 0;
}

.firstTeamContainer .options input,
.secondTeamContainer .options input,
.thirdTeamContainer .options input {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
}

.firstTeamContainer,
.secondTeamContainer,
.thirdTeamContainer {
    width: 100%;
    height: auto;
    float: left;
}

.firstTeamContainer,
.secondTeamContainer {
    border-bottom: 1px solid rgba(80, 141, 202, 0.3);
}

.perfectScrollbarEditTeam,
.perfectScrollbarEditNonEmpTeam,
.perfectScrollbarViewTeam,
.perfectScrollbarViewNonEmpTeam {
    height: 55%;
}

perfect-scrollbar.perfectScrollbarViewTeam,
perfect-scrollbar.perfectScrollbarEditTeam,
perfect-scrollbar.perfectScrollbarViewNonEmpTeam,
perfect-scrollbar.perfectScrollbarEditTeamNode {
    width: 100% !important;
}

#teamEditIcon,
#teamEditCheckbox {
    cursor: pointer;
}

.cancelTeamContainer,
.saveTeamContainer {
    height: auto;
    float: right;
    margin: 0 10px 10px;
}

.cancelTeamContainer .cancelTeamButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #dd5f43;
    color: #ffffff;
    padding: 10px 45px;
    text-align: center;
    border-radius: 2px;
    width: auto;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
}

.saveTeamContainer .saveTeamButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508dca;
    color: #ffffff;
    padding: 10px 47px;
    text-align: center;
    border-radius: 2px;
    width: auto;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
}

.checkboxContainer {
    width: 100%;
    float: left;
    margin: 5px 0;
}

.checkboxContainer label {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px !important;
    color: #4A4A4A;
    float: left;
    width: auto;
    margin: 0 0 5px !important;
    font-weight: normal !important;
    display: block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkboxContainer.active label,
.checkboxContainer.default label {
    font-weight: 600 !important;
}

.checkboxContainer input[type=radio] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 0 !important;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 19px;
    width: 19px;
    background-color: #ffffff;
    border-radius: 50%;
    /* box-shadow: 0 0 0 1px rgba(80, 141, 206, 0.295); */
    margin: 0;
}

.checkboxContainer label:hover input~.checkmark {
    background-color: #ffffff;
}

.checkboxContainer label input:checked~.checkmark {
    background-color: #ffffff;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkboxContainer label input:checked~.checkmark:after {
    display: block;
}

.checkboxContainer label .checkmark:after {
    top: 6px;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #508dce;
}

input.commonInputTextbox:focus {
    border: 1px solid #757574;
    /* color: #629fe6; */
    -webkit-text-fill-color: #39393a;
}

input.commonInputTextbox {
    border: 0.5px solid #757574;
    border-radius: 3px;
    height: 28px;
    width: 100%;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
}

textarea.commonInputTextbox:focus {
    border: 2px solid #629fe6;
    color: #629fe6;
    -webkit-text-fill-color: #39393a;
}

textarea.commonInputTextbox {
    border: 2px solid #caddef;
    border-radius: 3px;
    height: 50px;
    width: 100%;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
}

select.nodeTypeDropDown:focus {
    border: 2px solid #629fe6;
    color: #629fe6;
    -webkit-text-fill-color: #39393a;
}

select.nodeTypeDropDown {
    border: 0.5px solid #757574;
    border-radius: 3px;
    height: 28px;
    width: 100%;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
    background-color: #ffffff;
}

select.nodeTypeDropDown option {
    font-family: "Helvetica Neue", serif !important;
    font-size: 14px !important;
    color: #39393a;
}

select.nodeTypeDropDown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/HierarchyImages/selectOpen.png);
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 50%;
}

.teamFilterContainer .filter {
    cursor: pointer;
}

.editMode {
    width: 100%;
    height: auto;
    float: left;
    margin: 20px 0;
}

p.teamEditTableValues,
p.governanceTableValues {
    width: 90%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #000000;
}

p.teamEditNodeTableValues {
    width: 90%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #000000;
}

.peopleAssignmentTableValue.peopleAssignmentColumnResults img,
.teamEditTableValue.teamEditColumnResults img,
p.teamEditTableValues img,
p.teamEditNodeTableValues img,
.teamEditNodeTableValue.teamEditNodeColumnResults img {
    cursor: pointer;
}

.teamNameHeader {
    color: #4A4A4A;
    font-family: "Helvetica Neue";
    font-size: 18px;
    font-weight: bold;
    float: left;
    margin: 5px 0 10px;
    width: 100%;
}

.teamHeader {
    color: #4A4A4A;
    font-family: "Helvetica Neue";
    font-size: 18px;
    float: left;
    margin: 10px 0 14px 0;
}

.teamDetailContainer {
    width: 100%;
    height: auto;
    float: left;
    background: #ffffff;
    box-shadow: 0 0 11px 0 rgba(80, 141, 202, 0.13), 6px 3px 9px 0 rgba(117, 165, 177, 0.08);
    min-height: 200px;
}

.teamDetailContent {
    padding: 20px;
    width: 100%;
    height: 250px;
    float: left;
}

.teamDetail {
    width: 30%;
    height: auto;
    margin: 0 20px 20px 0;
    float: left;
    min-height: 60px;
}

.teamDetail label {
    opacity: 0.5;
    color: #4A4A4A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    float: left;
}

.teamDetail .teamInputContainer {
    height: 35px;
    width: 75.931%;
    background-color: #FFFFFF;
    float: left;
}

.teamDetail .teamInputContainer input {
    color: #4A4A4A;
    font-family: "Helvetica Neue";
    font-size: 14px;
    line-height: 16px;
    width: 100%;
    margin: 0 2px 0 0;
    float: left;
    height: 32px;
    padding: 0 5px;
    border: 2px solid #caddef;
    border-radius: 3px;
}

.teamDetail .teamInputContainer input#teamInputContainerEdit {
    background: url(../images/HierarchyImages/Edit.svg) right no-repeat;
    background-position-x: 96%;
    padding-right: 34px;
}

.teamDetail p {
    float: left;
    color: #4A4A4A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    margin: 0;
}

.teamDetail p.teamDetailP {
    width: 100%;
    height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teamInputContainer p-calendar.commonInputTextbox .ui-calendar button.ui-datepicker-trigger,
.teamInputContainer button.ui-datepicker-trigger:hover,
.teamInputContainer button.ui-datepicker-trigger:focus {
    top: 2px;
}

.editTeamRelativePosition {
    position: relative;
    float: left;
    height: auto;
    width: 100%;
}

.addEditMemberContainer,
.addEditNodeAssignmentContainer {
    position: relative;
    float: left;
}

.addMemberContainer,
.addNodeAssignmentContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #ffffff;
    z-index: 999999;
}

.addMemberContent {
    width: auto;
    height: auto;
    min-height: 410px;
    padding: 25px 35px;
}


/* END OF CREATE TEAM PAGE CSS */

#view_search_node .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 90% !important;
    height: 28px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background: #ffffff;
    border: 0;
    position: absolute;
    left: 0px;
    top: -10px;
    padding: 0px 0 0 10px;
    box-shadow: none;
    text-align: left;
    /* background-image: url("../images/HierarchyImages/search.svg"); */
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#view_search_node .ui-autocomplete.ui-widget input.ui-inputtext:focus {
    background-image: none;
}

#view_search_node .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    height: auto !important;
    width: 100% !important;
    top: 22px !important;
    max-height: 266px !important;
    margin-left: 0 !important;
    border-radius: 0px !important;
}

#view_search_agent .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 90% !important;
    height: 28px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background: #ffffff;
    border: 0;
    position: absolute;
    left: 0px;
    top: -10px;
    padding: 0px 0 0 10px;
    box-shadow: none;
    text-align: left;
    /* background-image: url("../images/HierarchyImages/search.svg"); */
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#view_search_agent .ui-autocomplete.ui-widget input.ui-inputtext:focus {
    background-image: none;
}

#view_search_agent .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    height: auto !important;
    width: 100% !important;
    top: 22px !important;
    max-height: 266px !important;
    margin-left: 0 !important;
    border-radius: 0px !important;
}

.search_submit_container .view_searchbox_submit {
    cursor: pointer;
    color: #ffffff;
    font-family: "Helvetica Neue";
    font-size: 12px;
    font-weight: bold;
    background: #508DCA;
    padding: 9px 35px;
    margin: 0;
    float: left;
    width: 100%;
    text-align: center;
    border-radius: 2px;
}

.view_detailTypeContainer {
    margin: 0;
    height: auto;
    float: left;
    width: 100%;
}

.view_detailTypeContainer.collapsed .nodeContainer {
    height: 354px;
}

#disabledbutton .attributeContainer p {
    margin: 0 !important;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.6;
    color: #9B9B9B;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
}

#disabledbutton .attributeValueContainer p {
    width: 100%;
    color: #4A4A4A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

img.warningIcon {
    margin: 10px 0 0;
    float: left;
}

img.warningsIcon {
    margin: -3px 5px 0;
}

.typesListArea1 {
    width: 100%;
    min-height: 150px;
    height: auto;
    float: left;
    background: #ffffff;
    border-radius: 1px;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(80, 141, 202, 0.88);
    -moz-box-shadow: 0px 0px 2px 0px rgba(80, 141, 202, 0.88);
    box-shadow: 0px 0px 2px 0px rgba(80, 141, 202, 0.88);
    position: relative;
}

img.comapreWarningsIcon {
    margin: -3px 10px 0;
}

.compareDetailListContainer ul li:last-child {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.compareDetailListContainer ul li {
    width: 100%;
    list-style-type: none;
    height: 171px;
    border-bottom: 1px solid rgba(80, 141, 202, 0.3);
    background: #ffffff;
}

.compareVersionDetailsListArea div.dragVersionContainer {
    border-bottom: 1px solid rgba(80, 141, 202, 0.3);
    height: 35px;
    background-color: #e8eef4;
    padding: 4px 0 0 10px;
}

.compareVersionDetailsListArea div.dragVersionContainer p.draggableVersionName {
    width: 100px;
    float: left;
    margin: 3px 0 0 0;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #000000;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.comapreHierarchyImage {
    width: 100%;
    height: 130px;
    /*padding: 10px;
	margin-top: -10px;
	/*background-image: url(../images/HierarchyImages/compareVersionImage.png);*/
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.compareBackArrow {
    height: 14px;
    width: 16px;
    background-image: url(../images/HierarchyImages/compareBackArrow.png);
    float: left;
    margin: 6px;
    margin-top: 12px;
    margin-right: -5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

#search_hType_container #search_node .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 100% !important;
    height: 35px;
    top: -12px;
    padding: 0px;
    /*border: 1px solid rgba(80,141,202,0.3);*/
}

#search_hType_container #search_node .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    height: auto !important;
    width: 100% !important;
    top: 26px !important;
    max-height: 200px !important;
    margin-left: 0px !important;
    border-radius: 0px !important;
}

perfect-scrollbar.comparePerfectScrollbar {
    height: 550px;
}

perfect-scrollbar.comparePerfectScrollbar .ps__rail-y .ps__thumb-y,
perfect-scrollbar.comparePerfectScrollbar .ps__rail-y:focus>.ps__thumb-y {
    background-color: #508dca !important;
    width: 4px !important;
    right: 0;
}

perfect-scrollbar.comparePerfectScrollbar>.ps.ps--active-y>.ps__rail-y,
perfect-scrollbar.comparePerfectScrollbar>.ps.ps--active-y>.ps__rail-y:hover {
    width: 4px !important;
    background-color: #ffffff !important;
}


/* START OF CREATE PEOPLE ASSIGNMENT PAGE CSS */

aside.firstAsidePeopleAssignment {
    width: 100%;
    float: left;
    margin-top: 4px;
    border: 1px solid #898989;
    opacity: 0.3;
}

aside.secondAsidePeopleAssignment {
    width: 100%;
    float: left;
    margin-bottom: 5px;
    border: 1px solid #898989;
    opacity: 0.3;
}

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

.peopleAssignmentHeader li {
    width: auto;
    margin: 0 40px -1px 0;
    float: left;
    padding: 8px 5px 5px;
    cursor: pointer;
}

.peopleAssignmentHeader li p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #A2A1A3;
    font-weight: bold;
    margin: 5px 0 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.peopleAssignmentHeader li.active {
    border-bottom: 5px solid #22b24b;
}

.peopleAssignmentHeader li.active p {
    color: #4A4A4A;
}

.peopleAssignmentcontainer {
    width: 100%;
    height: auto;
    float: left;
    margin: 25px 0;
}

.createPeopleAssignmentArea {
    width: 100%;
    float: left;
    background-color: #ffffff;
    margin: 0 0 25px;
    min-height: 410px;
    box-shadow: 0 0 11px 0 rgba(80, 141, 202, 0.13), 6px 3px 9px 0 rgba(117, 165, 177, 0.08);
}

.addEditNodeAssignmentContainer .createPeopleAssignmentArea {
    margin: 0 0 130px;
}

.createPeopleAssignmentFormArea {
    padding: 20px;
}

.formPeopleAssignmentContainer {
    width: 100%;
    height: auto;
    float: left;
}

.formPeopleAssignmentContainer .questions {
    width: 35%;
    float: left;
    margin: 20px 0;
}

.formPeopleAssignmentContainer .questions p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
    font-weight: bold;
    margin: 0;
}

.formPeopleAssignmentContainer .options {
    margin: 20px 0;
    float: left;
    width: 35%;
    position: relative;
}

.formPeopleAssignmentContainer .options .commonInputTextboxPA .ui-calendar input {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
}

.formPeopleAssignmentContainer .assignmentSearchOption {
    float: left;
    position: relative;
    width: 15%;
}

.formPeopleAssignmentContainer .options .dropdown.open,
.formPeopleAssignmentContainer .options .dropdown.open ul.dropdown-menu {
    width: 100% !important;
}

.formPeopleAssignmentContainer .options .commonInputTextboxPA .ui-calendar {
    width: 100%;
}

.cancelPeopleAssignmentContainer {
    height: auto;
    float: right;
    margin: 0 10px;
}

.cancelPeopleAssignmentButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #dd5f43;
    color: #ffffff;
    padding: 10px 45px;
    text-align: center;
    border-radius: 2px;
    width: auto;
    font-weight: bold;
    cursor: pointer;
    margin: 0 0 25px;
}

.savePeopleAssignmentContainer {
    height: auto;
    float: right;
}

.savePeopleAssignmentButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #27D5A3;
    color: #ffffff;
    padding: 10px 47px;
    text-align: center;
    border-radius: 2px;
    width: auto;
    font-weight: bold;
    cursor: pointer;
    margin: 0 0 25px;
}

input.commonInputTextboxPA {
    border: 2px solid #caddef;
    border-radius: 2px;
    height: 35px;
    width: 100%;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #4A4A4A;
    padding: 0 20px;
}

input.commonInputTextboxPA:focus {
    border: 2px solid #629fe6;
    color: #629fe6;
    -webkit-text-fill-color: #39393a;
}

select.commonInputTextboxPA:focus {
    border: 2px solid #629fe6;
    color: #629fe6;
    -webkit-text-fill-color: #39393a;
}

select.commonInputTextboxPA {
    border: 2px solid #caddef;
    border-radius: 3px;
    height: 35px;
    width: 100%;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 20px;
    background: #ffffff url(../images/HierarchyImages/selectOpen.png) no-repeat 95% 50%;
}

select.commonInputTextboxPA option {
    font-family: "Helvetica Neue", serif !important;
    font-size: 14px !important;
    color: #39393a;
}

p-calendar.commonInputTextboxPA .ui-calendar .ui-inputtext:focus {
    box-shadow: none !important;
    border: 2px solid #629fe6 !important;
}

p-calendar.commonInputTextboxPA .ui-calendar .ui-inputtext {
    border: 2px solid #caddef;
    border-radius: 3px;
    width: 100%;
    height: 35px;
    padding: 0 20px;
    margin: 3px 0 0;
}

.peopleAssignmentTableValue,
.peopleAssignmentColumnResults .ui-datepicker {
    top: 40px !important;
}

.peopleAssignmentTableHeader,
.peopleAssignmentTableValue {
    border-collapse: collapse;
    text-align: left;
    border-bottom: 1px solid #508DCA;
    border-top: none;
    border-left: none;
    border-right: none;
    float: left;
    width: 15.66%;
    display: inline-flex;
    vertical-align: middle;
    min-height: 44px;
}

.peopleAssignmentTableHeader.editColumn,
.peopleAssignmentTableValue.editColumn {
    width: 6%;
}

.peopleAssignmentTableValue div {
    min-height: 20px;
    width: 100%;
    float: left;
}

.peopleAssignmentTableHeader.editColumn {
    padding: 18.5px 12px;
}

.peopleAssignmentTable {
    width: 100%;
    table-layout: fixed;
}

.peopleAssignmentTable .perfectScrollbarEditPeopleAssignment.ps-show-active .ps-content tbody {
    width: 100% !important;
    display: block !important;
}

.peopleAssignmentTable .perfectScrollbarEditPeopleAssignment.ps-show-active .ps-content tbody tr {
    width: 100% !important;
    display: inline-table !important;
}

.peopleAssignmentTableHeader p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #000000;
    width: auto;
    float: left;
    text-align: left;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 5px 0 0;
}

p.peopleAssignmentTableValues {
    width: 98%;
    max-width: 100%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #000000;
    text-align: left;
    padding: 8px 12px;
}

p.peopleAssignmentTableValues.peopleSubrole {
    white-space: unset !important;
    padding: 0px 8px !important;
}

p.peopleAssignmentTableValues.peopleStatus {
    width: 80% !important;
    margin: 0 0 0 0 !important;
    float: left;
}

.peopleAssignmentTableHeader {
    padding: 18px 12px;
}

.peopleAssignmentColumnResult {
    padding: 0 12px !important;
}

.peopleAssignmentTableValue {
    padding: 0.1px 12px;
}

.peopleAssignmentRowHeading {
    background: #ffffff;
    float: left;
    width: 100%;
}

.peopleAssignmentViewRowHeading {
    background: #e6e6e6;
    float: left;
    width: 100%;
}

.perfectScrollbarEditPeopleAssignment {
    height: 55%;
}

perfect-scrollbar.perfectScrollbarEditPeopleAssignment {
    width: 100% !important;
}


/*.peopleAssignmentColumnResult{
	background: #dce8f4;
}

.peopleAssignmentColumnResults{
 	background: #ffffff;
 }
*/

.peopleAssignmentTableHeader aside {
    margin: 7px 5px;
    background: url('../images/HierarchyImages/selectOpen.png') no-repeat;
    height: 7px;
    width: 10px;
    float: left;
    border: 0;
    cursor: pointer;
}

.peopleAssignmentTableHeader aside.active {
    background: url('../images/HierarchyImages/selectClose.png') no-repeat;
}

.peopleDetails {
    width: 100%;
    float: left;
    height: auto;
}

.peopleDetails .empImage {
    width: 25%;
    float: left;
    margin: 0 5px 0 0;
}

.peopleDetails .empDetails {
    width: 71%;
    float: left;
}

#teamEditShareTable .teamEditTableValue.teamEditColumnResult .peopleDetails .empDetails {
    margin: 9px 0;
}

.imgCirclePeopleAssignment,
.imgCircleTeamEdit {
    height: 35px;
    width: 35px;
    border-radius: 50%;
}

.imgStatusCirclePeopleAssignment {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin: 13px 5px;
    float: left;
}

.gStatus {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin: 0 5px 0 0;
    float: left;
}

.peopleAssignmentTableSubValues {
    color: #9B9B9B;
    font-family: "Helvetica Neue";
    font-size: 12px;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    text-align: left;
}

.commonInputTextboxPASelect {
    border: 1px solid #caddef;
    border-radius: 3px;
    height: 35px;
    padding: 0 10px;
    width: 100%;
    float: left;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    color: #ffffff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #508DCA url(../images/HierarchyImages/selectPA.png) no-repeat 95% 50%;
}

.commonInputTextboxPASelect option {
    font-family: "Helvetica Neue", serif !important;
    font-size: 14px !important;
    color: #39393a;
    background-color: #ffffff;
}

.globalPeopleAssignmentSearch {
    width: 70.6%;
    height: 35px;
    border: 1px solid #508DCA;
    border-radius: 2px;
    background-color: #FFFFFF;
    float: left;
    box-shadow: inset 0 1px 4px 0 rgba(80, 141, 202, 0.23);
    -webkit-box-shadow: inset 0 1px 4px 0 rgba(80, 141, 202, 0.23);
    -moz-box-shadow: inset 0 1px 4px 0 rgba(80, 141, 202, 0.23);
    position: relative;
}

.globalPeopleAssignmentSearch .ui-autocomplete {
    width: 100% !important;
}

#peopleAssignment_node .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 100% !important;
    height: 33px !important;
    -webkit-appearance: none !important;
    font-size: 12px !important;
    color: #000000 !important;
    background-color: #ffffff !important;
    outline: none !important;
    border: 0 !important;
    vertical-align: middle !important;
    padding: 0 12px !important;
    box-shadow: none !important;
    background-image: url(../images/HierarchyImages/compareSearch.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#peopleAssignment_node .ui-autocomplete.ui-widget input.ui-inputtext:focus {
    background-image: none;
}

#peopleAssignment_node .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    border-radius: 0 !important;
    height: auto !important;
    max-height: 250px !important;
    margin-top: 1px;
}

.submitPeopleAssignmentContainer {
    width: 12%;
    height: auto;
    float: left;
    margin: 0 0 0 25px;
}

.submitPeopleAssignmentContainer .submitPeopleAssignmentButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508DCA;
    height: 35px;
    color: #ffffff;
    padding: 10px 45px;
    text-align: center;
    border-radius: 2px;
    width: auto;
    float: left;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
}

.submitToAddPeopleAssignmentButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508DCA;
    height: 35px;
    color: #ffffff;
    padding: 10px 20px;
    text-align: center;
    border-radius: 2px;
    width: auto;
    float: left;
    font-weight: bold;
    cursor: pointer;
    margin: 0 0 14px;
}

.submitToShowResultAndAddPeopleAssignmentContainer {
    width: 100%;
    height: auto;
    float: left;
    margin: 25px 0 0;
}

.toShowResultPeopleAssignment {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #4A4A4A;
    width: auto;
    float: left;
    font-weight: bold;
    margin: 10px 0;
}

.submitToAddPeopleAssignmentContainer {
    height: auto;
    float: right;
    width: auto;
}

.peopleAssignment_template_growl_msg .ui-growl.ui-widget {
    top: 145px !important;
    margin-top: -135px !important;
    width: 32em !important;
    position: absolute !important;
}

.peopleAssignment_template_growl_msg .ui-growl.ui-widget .ui-growl-item-container.ui-state-highlight.ui-growl-message-error {
    background-color: #D5333A;
    background-image: url(../images/HierarchyImages/errorMsg.svg);
    background-repeat: no-repeat;
    background-position-x: 4%;
    background-position-y: 50%;
}

.peopleAssignment_template_growl_msg .ui-growl.ui-widget .ui-growl-item-container.ui-state-highlight.ui-corner-all.ui-shadow.ui-growl-message-success {
    background-color: #27D5A3;
    background-image: url(../images/HierarchyImages/completeMsg.svg);
    background-repeat: no-repeat;
    background-position-x: 4%;
    background-position-y: 50%;
}

.ui-growl-image.fa.fa-2x.fa-check,
.ui-growl-image.fa.fa-2x.fa-close {
    display: none;
}

.peopleAssignment_template_growl_msg .ui-growl-message {
    padding: 10px 0px 0.25em 10px !important;
}

.importOptionPA {
    margin-top: 20px;
}

.importOptionPA p {
    color: #4A4A4A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.showHotResult {
    color: #4A4A4A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
}

.rightContainer.expanded .peopleAssignmentcontainer .savePeopleAssignmentUploadContainer {
    height: auto;
    float: right;
}

.rightContainer.collapsed .peopleAssignmentcontainer .savePeopleAssignmentUploadContainer {
    height: auto;
    float: right;
    margin: 0 5px;
}

.savePeopleAssignmentUploadButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #27D5A3;
    color: #ffffff;
    padding: 10px 47px;
    text-align: center;
    border-radius: 2px;
    width: auto;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
    margin-top: 25px;
}

.downloadFilePA {
    background: url(../images/HierarchyImages/downloadIcon.png) no-repeat;
    float: right;
    width: 31px;
    height: 31px;
    margin-bottom: 8px;
    margin-right: 20px;
    cursor: pointer;
}

a#chooseFile {
    font-size: 20px;
}

.templateFiles,
.importFiles {
    width: 95%;
}


/* END OF CREATE PEOPLE ASSIGNMENT PAGE CSS */

.firstCreateContainer {
    /* width: 100%; */
    min-height: 450px;
    padding: 15px 20px !important;
    background: #ffffff;
    border: 0.5px solid #dadada;
    margin-left: 15px;
    margin-right: 5px
    /* box-shadow: 7px 3px 8px 0 rgba(117,165,177,0.08); */
}

.reportsContainer {
    width: 95%;
    min-height: 600px;
    padding: 15px 20px !important;
    background: #ffffff;
    border: 1px solid rgba(86, 82, 79, 0.1);
    margin-bottom: 20px;
    margin-left: 5px;
    margin-top: 118px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    /* box-shadow: 7px 3px 8px 0 rgba(117,165,177,0.08); */
}

.secondCreateContainer .leftside {
    /* width: 48%; */
    height: 385px;
    background-color: #ffffff;
    float: left;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    /* border: 1px solid rgba(80,141,202,0.3); */
    box-shadow: 0 0 11px 0 #eeeeee, 6px 3px 9px 0 #eeeeee;
    background: #FFFFFF;
    mix-blend-mode: normal;
    /* opacity: 0.5; */
    border: 0.5px solid #bababa;
    /* box-sizing: border-box; */
    border-radius: 2px;
    margin-top: 10px;
}

.secondCreateContainer .rightside {
    /* width: 48%; */
    height: 385px;
    background-color: #ffffff;
    float: right;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border: 0.5px solid #bababa;
    box-shadow: 0 0 11px 0 #eeeeee, 6px 3px 9px 0 #eeeeee;
    margin-top: 5px;
}

.leftsideHeader,
.rightsideHeader {
    width: 100%;
    height: 38px;
    /* background-color: #E8EEF4; */
    background: rgba(86, 82, 79, 0.7);
    border-bottom: 1px solid rgba(80, 141, 202, 0.3);
    box-shadow: 7px 3px 8px 0 rgba(117, 165, 177, 0.08);
}

.leftsideHeader p,
.rightsideHeader p {
    margin: 0;
    padding: 9px 15px;
    color: white;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.leftsideDetails,
.rightsideDetails {
    height: 345px;
}

.leftsideDetails ul,
.rightsideDetails ul {
    list-style-type: none;
    margin: 14px;
    padding: 0;
}

.leftsideDetails ul li,
.rightsideDetails ul li {
    width: 98%;
    height: 38px;
    margin: 5px;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 2px;
    /* border: 1px solid #caddef;	 */
    border: 0.5px solid #bababa;
    box-shadow: 7px 3px 8px 0 #eeeeee;
}

.leftsideDetails ul li p,
.rightsideDetails ul li p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    max-width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.leftsideDetails .perfectScrollbar,
.rightsideDetails .perfectScrollbar {
    height: 340px;
}

.edit_details perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:hover,
.add_details perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:hover,
.agent_details perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:hover,
.leftsideDetails perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:hover,
.rightsideDetails perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:hover {
    width: 10px !important;
}

.edit_details perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:focus>.ps__thumb-y,
.edit_details perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:hover>.ps__thumb-y,
.add_details perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:focus>.ps__thumb-y,
.add_details perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:hover>.ps__thumb-y,
.agent_details perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:focus>.ps__thumb-y,
.agent_details perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:hover>.ps__thumb-y,
.leftsideDetails perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:focus>.ps__thumb-y,
.leftsideDetails perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:hover>.ps__thumb-y,
.rightsideDetails perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:focus>.ps__thumb-y,
.rightsideDetails perfect-scrollbar>.ps.ps--active-y>.ps__rail-y:hover>.ps__thumb-y {
    width: 6px !important;
}

.leftsideDetails .firstContainerquestions {
    width: 175px;
    height: 24px;
    float: left;
    margin: 10px 10px 0 10px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
    font-weight: bold;
}

.leftsideDetails .firstContaineroptions {
    width: 230px;
    height: auto;
    margin: 9px;
    float: left;
}

.firstCreateContainer .secondContainer .secondContaineroptions li input.commonInputTextbox,
.leftsideDetails .firstContaineroptions input.commonInputTextbox {
    border: 1px solid #757574;
    box-shadow: 7px 3px 8px 0 rgba(117, 165, 177, 0.08);
    border-radius: 3px;
    height: 28px;
    width: 200px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
}

.importOption {
    margin-left: 250px;
    margin-top: 30px;
}

.importOption p {
    color: #4A4A4A;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: bold;
}

.templateFile,
.importFile,
.previousVersionFile {
    margin-top: 30px;
}

.sixthCreateContainer {
    width: 78%;
    margin-left: 225px;
    margin-top: 150px;
}

.thirdCreateContainer {
    width: 100%;
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    background: #ffffff;
    border: 0.5px solid #b7b7b6;
    box-shadow: 7px 3px 8px 0 #eeeeee;
}

.customFileUpload {
    border: 1px solid #caddef;
    border-radius: 0 2px 2px 0;
    background-color: #508DCA;
    padding: 0px 20px;
    cursor: pointer;
    margin: -4px;
}

input[type="file"] {
    display: none !important;
}

.customFileUpload p.chooseFile {
    color: #FFFFFF;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 11px;
    padding-top: 8px;
}

.chosenFileName {
    border: 1px solid #caddef;
    box-shadow: 7px 3px 8px 0 rgba(117, 165, 177, 0.08);
    width: 195px;
    height: 34px;
    border-radius: 2px 0 0 2px;
    color: #4A4A4A;
    font-family: "Helvetica Neue";
    font-size: 14px;
    padding: 10px;
}

input.chosenFileName[disabled] {
    cursor: default;
    background-color: #ffffff;
}

.fourthCreateContainer ul li.active {
    border-left: 6px solid #9e9e9e;
}

.fourthCreateContainer ul li.active a {
    color: #b7b7b6;
    opacity: 1;
}

.attributeCloseButton {
    height: 14px;
    width: 13px;
    background-image: url(../images/HierarchyImages/close.png);
    background-repeat: no-repeat;
    margin-top: -26px;
    margin-right: 22px;
    float: right;
    cursor: pointer;
}

.fileError p {
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: bold;
    color: red;
    margin-top: 10px;
}


/*.downloadFile {
	background: url(../images/HierarchyImages/downloadIcon.png) no-repeat;
	float: right;
	width: 31px;
	height: 31px;
	margin-top: 8px;
	margin-bottom: 8px;
	margin-right: 20px;
	cursor: pointer;
}*/

#createSearchHierarchyContainer .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    height: auto !important;
    width: 87% !important;
    top: -83px !important;
    min-width: 87% !important;
    margin-left: 31px !important;
    border-radius: 0px !important;
}

#createSearchHierarchyContainer .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 205px;
    height: 35px;
    margin-top: -220px;
    margin-left: 30px;
    padding: 0 12px;
    border: 1px solid rgba(80, 141, 202, 0.3);
}

#createSearchVersionContainer .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    height: auto !important;
    width: 41.5% !important;
    top: -100px !important;
    min-width: 41.5%;
    margin-left: 286px !important;
    border-radius: 0px !important;
}

#createSearchVersionContainer .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 205px;
    height: 35px;
    margin-top: -254px;
    margin-left: 285px;
    padding: 0 12px;
    border: 1px solid rgba(80, 141, 202, 0.3);
}

.hierarchyDetails .previewHierarchyCreateContainer ul li,
.tableDetails .previewHierarchyCreateContainer ul li {
    float: left;
    list-style-type: none;
    width: 225px;
    height: 30px;
    margin-top: 10px;
    margin-left: 45px;
    padding: 5px 18px;
    border-left: 5px solid #508DCA;
}

.attributeDetails .previewHierarchyCreateContainer ul li {
    float: left;
    list-style-type: none;
    width: 100%;
    height: 30px;
    margin-left: 45px;
    padding: 5px 18px;
    border-left: 5px solid #508DCA;
}

.attrContainer {
    padding: 15px 55px;
    height: 65px;
    float: left;
}

.previewHierarchyCreateContainer ul li a {
    opacity: 0.6;
    color: #9B9B9B;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
}

.hierarchyDetails .previewHierarchyCreateContainer ul li p {
    color: #4A4A4A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 15px 2px;
}

.attributeDetails .previewHierarchyCreateContainer p {
    width: 106px;
    height: 35px;
    float: left;
    margin-left: 10px;
    color: #4A4A4A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 7px 10px;
    border: 1px solid #caddef;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.hierarchyDetails {
    width: 100%;
    height: 100px;
    margin-top: 15px;
}

.summaryDetails {
    margin: 20px 45px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 20px;
    font-weight: bold;
}

.attributeDetails {
    width: 90%;
    overflow: hidden;
}

.tableDetails {
    width: 100%;
    height: auto;
    clear: left;
}

#row-border-mys {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

#tableid {
    background-color: white !important;
    border: 1px solid #D9D9D8 !important;
}

#brToZeid {
    width: 25% !important;
}

#brToZeCat, #brToZePriLab {
    width: 19% !important;
}

#brToZePri {
    width: 16% !important;
}

#brToZeStDt, #brToZeEnDt {
    width: 22% !important;
}

.buttonClass {
    margin-left: 15px !important;
}

#pointC {
    cursor: pointer;
    color: #6E6761;
}

#tableContentid {
    color: #6E6761;
}

.coverage_exp table tbody tr td.tableContent {
    word-break: break-word;
}

#pdleft {
    padding-left: 25px !important;
}

#leftPad {
    padding-left: 10px !important;
}

.pdbotm {
    padding-bottom: 50px !important
}

#marTop {
    margin-top: 15px;
}

.pointer {
    cursor: pointer !important;
}

.curClass {
    cursor: pointer !important;
    float: right !important;
}

.paddin {
    padding: 15px !important;
}

#minheight {
    min-height: 400px !important;
}

.font {
    font-size: 14px !important;
    border-top: none !important;
}

.submit {
    margin-top: 50px !important;
}

#kendoStyle {
    width: 100px !important;
}

#width100 {
    width: 100%;
}

#floatR {
    float: right !important;
}

#buttonsStyle {
    background-color: #508dca;
    color: #FFF;
    font-weight: 400;
    letter-spacing: 1px;
    width: 160px;
    margin-left: 5px;
}

#modeStyle {
    width: 198px;
    margin-left: 0px;
    padding: 20px;
}

.previewTable {
    padding: 56px 42px;
}

.seventhCreateContainer {
    width: 100%;
    height: auto;
    background: #ffffff;
    border: 1px solid #caddef;
    box-shadow: 7px 3px 8px 0 rgba(117, 165, 177, 0.08);
}

a#moreAttrDetails {
    color: #508DCA !important;
    margin-left: 100px;
    opacity: 1;
    font-size: 12px;
    cursor: pointer;
}

.attrDelete {
    background: url(../../assets/images/HierarchyImages/delete.svg) no-repeat;
    float: right;
    width: 16px;
    height: 17px;
    margin: -28px 8px;
}

.hierarchyErrorMsg {
    color: red;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
}

p.teamTableValue.teamMemberResult.agent.name,
p.teamEditTableValue.teamMemberResult.agent.name,
p.edit.teamImages.agent.name,
p.view.teamImages.agent.name {
    opacity: 0;
}

.teamTableValue.teamMemberResult ul li:hover p.teamTableValue.teamMemberResult.agent.name,
.teamEditTableValue.teamMemberResult ul li:hover p.teamEditTableValue.teamMemberResult.agent.name {
    opacity: 1;
    cursor: pointer;
    font-size: 10px;
    font-family: "Helvetica Neue", sans-serif;
    color: #000000;
    width: auto;
    margin-left: -10px;
    margin-top: -60px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.teamImages ol li:hover p.edit.teamImages.agent.name,
.teamImages ol li:hover p.view.teamImages.agent.name {
    opacity: 1;
    cursor: pointer;
    font-size: 10px;
    font-family: "Helvetica Neue", sans-serif;
    color: #000000;
    width: auto;
    margin-top: -50px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.peopleAssignmentTableValuesDropDown {
    display: block;
    width: 100%;
    padding: 8px 0;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #000000;
    background-color: #fff;
    border: 0px solid #fff;
    border-radius: 4px;
    text-align: left;
}

.peopleDetails .empDetails p {
    padding: 0;
}

#templateFile p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 16px;
    color: #b7b7b6;
    font-weight: bold;
    float: left;
    margin: 4px;
}

.downloadFile {
    background: url(../images/HierarchyImages/downloadIcon.png) no-repeat;
    width: 31px;
    height: 31px;
    margin-bottom: 20px;
    margin-left: 200px;
    cursor: pointer;
}

@media screen and (min-height: 2200px) {
    .firstCreateContainer {
        min-height: 450px;
    }
}

@media screen and (min-width: 1809px) {
    #attr_cancel {
        margin-top: 75px;
    }
}

@media screen and (min-width: 1560px) {
    .fourthCreateContainer {
        width: 22%;
    }
    .fifthCreateContainer {
        width: 80%;
    }
}

@media screen and (min-width: 1001px) and (max-width: 1101px) {
    .fourthCreateContainer {
        width: 32%;
    }
    .fifthCreateContainer {
        width: 66%;
    }
}

@media screen and (min-width: 1101px) and (max-width: 1201px) {
    .fourthCreateContainer {
        width: 28%;
    }
    .fifthCreateContainer {
        width: 70%;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1301px) {
    .fourthCreateContainer {
        width: 26%;
    }
    .fifthCreateContainer {
        width: 72%;
    }
}

@media screen and (min-width: 1301px) and (max-width: 1351px) {
    .fourthCreateContainer {
        width: 23%;
    }
    .fifthCreateContainer {
        width: 75%;
    }
}

@media screen and (max-width: 768px) {
    .rightContainer.collapsed {
        width: 70%;
    }
    .rightContainer.expanded {
        width: 70%;
    }
    .teamDetail {
        width: 40%;
    }
    .teamDetailContainer {
        min-height: 330px
    }
    .teamEditTableHeader,
    .teamEditTableValue,
    .governanceTableHeader,
    .governanceTableValue {
        min-height: 40px;
    }
    .teamTableHeader p,
    .teamEditTableHeader p,
    .teamEditNodeTableHeader p,
    .governanceTableHeader p {
        width: 80%;
        max-width: 80%;
        font-size: 12px;
    }
    .peopleDetails .empImage {
        width: 55%;
    }
    .peopleDetails .empDetails {
        width: 35%;
    }
    p.teamEditTableValues,
    p.governanceTableValues {
        font-size: 12px;
    }
    .peopleAssignmentHeader li {
        margin: 0 20px -1px 0px;
        width: 20%;
    }
    .peopleAssignmentHeader.teamMenu li {
        width: 15%;
    }
    .globalPeopleAssignmentSearch {
        width: 70%;
    }
    .submitPeopleAssignmentContainer {
        width: auto;
        margin: 0 0 0 1px;
    }
    .submitPeopleAssignmentContainer .submitPeopleAssignmentButton {
        padding: 10px 10px;
    }
    .submitToAddPeopleAssignmentButton {
        padding: 10px 5px;
    }
    p.peopleAssignmentTableValues.peopleSubrole {
        white-space: nowrap !important;
        padding: 8px 4px !important;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 15.66%;
    }
    .peopleAssignmentTableHeader {
        padding: 18px 2px;
    }
    .peopleAssignmentTableHeader p {
        font-size: 12px;
        width: 75%;
        max-width: 75%;
    }
    .peopleAssignmentTableHeader.editColumn {
        padding: 20px 0px;
    }
    .peopleAssignmentColumnResult {
        padding: 1px 5px !important;
    }
    .peopleAssignmentTableValue {
        padding: 0.1px 2px;
    }
    .formPeopleAssignmentContainer,
    .submitToShowResultAndAddPeopleAssignmentContainer,
    .createPeopleAssignmentArea {
        width: 98%;
    }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
    .linenMainContent {
        width: 100%;
    }
    .calendarArea .fc-prev-button {
        margin: 0px 5px 0px 0px !important;
    }
    .calendarArea .fc-next-button {
        margin: 0px 5px 0px 5px !important;
    }
    .calendarArea .fc-toolbar .fc-center {
        left: 10px;
        top: 5px;
    }
    .rightContainer.collapsed {
        width: 75.5%;
    }
    .rightContainer.expanded {
        width: 75.5%;
    }
    .calendarArea .fc-row {
        height: 20px !important;
    }
    .calendarArea .fc-day {
        width: 20px !important;
    }
    .calendarArea th.fc-day-header {
        width: 20px !important;
    }
    .teamDetail {
        width: 45%;
    }
    .teamDetailContainer {
        min-height: 300px
    }
    .teamEditTableHeader,
    .teamEditTableValue,
    .governanceTableHeader,
    .governanceTableValue {
        min-height: 40px;
    }
    .teamTableHeader p,
    .teamEditTableHeader p,
    .teamEditNodeTableHeader p,
    .governanceTableHeader p {
        width: 80%;
        max-width: 80%;
        font-size: 12px;
    }
    .peopleDetails .empImage {
        width: 55%;
    }
    .peopleDetails .empDetails {
        width: 35%;
    }
    p.teamEditTableValues,
    p.governanceTableValues {
        font-size: 12px;
    }
    .peopleAssignmentHeader li {
        margin: 0 20px -1px 0px;
        width: 20%;
    }
    .peopleAssignmentHeader.teamMenu li {
        width: 15%;
    }
    .globalPeopleAssignmentSearch {
        width: 70%;
    }
    .submitPeopleAssignmentContainer {
        width: auto;
        margin: 0 0 0 1px;
    }
    .submitPeopleAssignmentContainer .submitPeopleAssignmentButton {
        padding: 10px 10px;
    }
    .submitToAddPeopleAssignmentButton {
        padding: 10px 5px;
    }
    p.peopleAssignmentTableValues.peopleSubrole {
        white-space: nowrap !important;
        padding: 8px 4px !important;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 15.66%;
    }
    .peopleAssignmentTableHeader {
        padding: 18px 2px;
    }
    .peopleAssignmentTableHeader p {
        font-size: 12px;
        width: 75%;
        max-width: 75%;
    }
    .peopleAssignmentTableHeader.editColumn {
        padding: 20px 0px;
    }
    .peopleAssignmentColumnResult {
        padding: 1px 5px !important;
    }
    .peopleAssignmentTableValue {
        padding: 0.1px 2px;
    }
    .formPeopleAssignmentContainer,
    .submitToShowResultAndAddPeopleAssignmentContainer,
    .createPeopleAssignmentArea {
        width: 98%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1000px) {
    .linenMainContent {
        width: 95%;
    }
    .calendarArea .fc-prev-button {
        margin: 0px 20px 0px 0px !important;
    }
    .calendarArea .fc-next-button {
        margin: 0px 10px 0px 20px !important;
    }
    .calendarArea .fc-toolbar .fc-center {
        left: 20px;
        top: 5px;
    }
    .rightContainer.collapsed {
        width: 90%;
    }
    .rightContainer.expanded {
        width: 90%;
    }
    .calendarArea .fc-row {
        height: 30px !important;
    }
    .calendarArea .fc-day {
        width: 30px !important;
    }
    .calendarArea th.fc-day-header {
        width: 30px !important;
    }
    .teamDetail {
        width: 45%;
    }
    .teamDetailContainer {
        min-height: 300px
    }
    .teamEditTableHeader,
    .teamEditTableValue,
    .governanceTableHeader,
    .governanceTableValue {
        min-height: 40px;
    }
    .teamTableHeader p,
    .teamEditTableHeader p,
    .teamEditNodeTableHeader p,
    .governanceTableHeader p {
        width: 80%;
        max-width: 80%;
        font-size: 12px;
    }
    .peopleDetails .empImage {
        width: 45%;
    }
    .peopleDetails .empDetails {
        width: 45%;
    }
    p.teamEditTableValues,
    p.governanceTableValues {
        font-size: 12px;
    }
    .peopleAssignmentHeader li {
        margin: 0 20px -1px 0px;
        width: 20%;
    }
    .peopleAssignmentHeader.teamMenu li {
        width: 15%;
    }
    .globalPeopleAssignmentSearch {
        width: 70%;
    }
    .submitPeopleAssignmentContainer {
        width: auto;
        margin: 0 0 0 1px;
    }
    .submitPeopleAssignmentContainer .submitPeopleAssignmentButton {
        padding: 10px 10px;
    }
    .submitToAddPeopleAssignmentButton {
        padding: 10px 5px;
    }
    p.peopleAssignmentTableValues.peopleSubrole {
        white-space: nowrap !important;
        padding: 8px 4px !important;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 15.66%;
    }
    .peopleAssignmentTableHeader {
        padding: 18px 2px;
    }
    .peopleAssignmentTableHeader p {
        font-size: 12px;
        width: 75%;
        max-width: 75%;
    }
    .peopleAssignmentTableHeader.editColumn {
        padding: 20px 0px;
    }
    .peopleAssignmentColumnResult {
        padding: 1px 5px !important;
    }
    .peopleAssignmentTableValue {
        padding: 0.1px 2px;
    }
    .formPeopleAssignmentContainer,
    .submitToShowResultAndAddPeopleAssignmentContainer,
    .createPeopleAssignmentArea {
        width: 98%;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1100px) {
    .rightContainer.collapsed {
        width: 91%;
    }
    .rightContainer.expanded {
        width: 91%;
    }
    p.peopleAssignmentTableValues.peopleSubrole {
        white-space: nowrap !important;
        padding: 8px 4px !important;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 15.66%;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1200px) {
    .rightContainer.collapsed {
        width: 92%;
    }
    .rightContainer.expanded {
        width: 92%;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 15.66%;
        min-height: 62px;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1200px) {
    .linenMainContent {
        width: 100%;
    }
    .menuContainer .menuLeftContent ul li#homeMenu {
        padding: 0 20px 40px !important;
    }
    .calendarArea .fc-prev-button {
        margin: 0px 40px 0px 5px !important;
    }
    .calendarArea .fc-next-button {
        margin: 0px 15px 0px 40px !important;
    }
    .calendarArea .fc-toolbar .fc-center {
        left: 30px;
        top: 5px;
    }
    .calendarArea .fc-row {
        height: 60px !important;
    }
    .calendarArea .fc-day {
        width: 60px !important;
    }
    .calendarArea th.fc-day-header {
        width: 60px !important;
    }
    .teamEditTableHeader,
    .teamEditTableValue,
    .governanceTableHeader,
    .governanceTableValue {
        min-height: 40px;
    }
    .teamTableHeader p,
    .teamEditTableHeader p,
    .teamEditNodeTableHeader p,
    .governanceTableHeader p {
        width: 80%;
        max-width: 80%;
        font-size: 12px;
    }
    .peopleDetails .empImage {
        width: 35%;
    }
    .peopleDetails .empDetails {
        width: 55%;
    }
    p.teamEditTableValues,
    p.governanceTableValues {
        font-size: 12px;
    }
    .globalPeopleAssignmentSearch {
        width: 75%;
    }
    .submitPeopleAssignmentContainer {
        width: auto;
        margin: 0 0 0 1px;
    }
    .submitPeopleAssignmentContainer .submitPeopleAssignmentButton {
        padding: 10px 10px;
    }
    .submitToAddPeopleAssignmentButton {
        padding: 10px 5px;
    }
    .peopleAssignmentTableHeader {
        padding: 18px 2px;
    }
    .peopleAssignmentTableHeader p {
        font-size: 12px;
        width: 75%;
        max-width: 75%;
    }
    .peopleAssignmentTableHeader.editColumn {
        padding: 20px 0px;
    }
    .peopleAssignmentColumnResult {
        padding: 1px 5px !important;
    }
    .peopleAssignmentTableValue {
        padding: 0.1px 2px;
    }
    .formPeopleAssignmentContainer,
    .submitToShowResultAndAddPeopleAssignmentContainer,
    .createPeopleAssignmentArea {
        width: 98%;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1350px) {
    .linenMainContent {
        width: 90%;
    }
    .calendarArea .fc-prev-button {
        margin: 0px 40px 0px 5px !important;
    }
    .calendarArea .fc-next-button {
        margin: 0px 15px 0px 40px !important;
    }
    .calendarArea .fc-toolbar .fc-center {
        left: 30px;
        top: 5px;
    }
    .calendarArea .fc-row {
        height: 60px !important;
    }
    .calendarArea .fc-day {
        width: 60px !important;
    }
    .calendarArea th.fc-day-header {
        width: 60px !important;
    }
    .rightContainer.collapsed {
        width: 92%;
    }
    .rightContainer.expanded {
        width: 92%;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 15.66%;
        min-height: 62px;
    }
    .globalPeopleAssignmentSearch {
        width: 67.6%;
    }
    .formPeopleAssignmentContainer,
    .submitToShowResultAndAddPeopleAssignmentContainer,
    .createPeopleAssignmentArea {
        width: 98%;
    }
    .peopleDetails .empImage {
        width: 27%;
    }
    .peopleDetails .empDetails {
        width: 68%;
    }
}

@media screen and (min-width: 1350px) and (max-width: 1450px) {
    .rightContainer.collapsed {
        width: 93%;
    }
    .rightContainer.expanded {
        width: 93%;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1366px) {
    .typesListArea ul li .typeChooseText {
        padding: 11px 7px !important;
    }
}

@media screen and (max-width: 1000px) {
    #hierarchy_save,
    #confirm_button,
    #hierarchy_saveasnew {
        max-width: 60px;
        padding: 8px;
    }
    .rightContainer.collapsed .htContainer {
        width: 55%;
    }
    .eventHistoryHeader p {
        max-width: 80px;
    }
    #zoom_out,
    #zoom_in {
        margin: 8px 5px;
    }
    #zoom_search {
        margin: 10px 0;
    }
    #zoom_percentage {
        margin: 13px 0px;
    }
    #undo,
    #redo,
    #max,
    #min {
        margin: 8px 5px;
    }
    .snapshotContainer,
    .nodeContainer {
        width: 25%;
    }
    .globalTeamSearch {
        width: 80%;
    }
    .submitTeamContainer {
        width: auto;
        margin: 0 0 0 5px;
    }
    .submitTeamContainer .submitTeamButton {
        padding: 10px 25px;
    }
    .rightContainer.collapsed .teamFilterContainer {
        width: 95%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1001px) {
    #matHorizontalStepperContent,
    .createTeamArea {
        width: 85%;
    }
    .globalCompareSearch,
    .compareContainer {
        width: 84%;
    }
}

@media screen and (min-width: 1001px) and (max-width: 1101px) {
    #matHorizontalStepperContent,
    .createTeamArea {
        width: 90%;
    }
    .globalCompareSearch,
    .compareContainer {
        width: 89%;
    }
}

@media screen and (min-width: 1101px) and (max-width: 1201px) {
    #matHorizontalStepperContent,
    .createTeamArea {
        width: 93%;
    }
    .compareContainer {
        width: 92%;
    }
    .globalCompareSearch {
        width: 87%;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1401px) {
    #matHorizontalStepperContent,
    .createTeamArea {
        width: 95.5%;
    }
    .globalCompareSearch,
    .compareContainer {
        width: 94.5%;
    }
}

@media screen and (min-width: 1401px) {
    #matHorizontalStepperContent,
    .createTeamArea {
        width: 98%;
    }
    .globalCompareSearch,
    .compareContainer {
        width: 97%;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1101px) {
    #hierarchy_save,
    #confirm_button,
    #hierarchy_saveasnew {
        max-width: 80px;
        padding: 8px;
    }
    .rightContainer.collapsed .htContainer {
        width: 55%;
    }
    .eventHistoryHeader p {
        max-width: 80px;
    }
    #zoom_out,
    #zoom_in {
        margin: 8px 5px;
    }
    #zoom_search {
        margin: 10px 0;
    }
    #zoom_percentage {
        margin: 13px 0px;
    }
    #undo,
    #redo,
    #max,
    #min {
        margin: 8px 5px;
    }
    .snapshotContainer,
    .nodeContainer {
        width: 28%;
    }
    .globalTeamSearch {
        width: 75%;
    }
    .submitTeamContainer {
        width: auto;
        margin: 0 0 0 10px;
    }
    .submitTeamContainer .submitTeamButton {
        padding: 10px 25px;
    }
    .rightContainer.collapsed .teamFilterContainer {
        width: 88%;
    }
}

@media screen and (min-width: 1101px) and (max-width: 1201px) {
    #hierarchy_save,
    #confirm_button,
    #hierarchy_saveasnew {
        max-width: 90px;
        padding: 8px;
    }
    .rightContainer.collapsed .htContainer {
        width: 62%;
    }
    .eventHistoryHeader p {
        max-width: 106px;
    }
    #zoom_out,
    #zoom_in {
        margin: 8px 10px;
    }
    #zoom_search {
        margin: 10px 5px;
    }
    #zoom_percentage {
        margin: 13px 5px;
    }
    #undo,
    #redo,
    #max,
    #min {
        margin: 8px 10px;
    }
    .snapshotContainer,
    .nodeContainer {
        width: 28%;
    }
    .submitTeamContainer {
        width: auto;
        margin: 0 0 0 10px;
    }
    .submitTeamContainer .submitTeamButton {
        padding: 10px 25px;
    }
    .globalTeamSearch {
        width: 87%;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1320px) {
    #hierarchy_save,
    #confirm_button,
    #hierarchy_saveasnew {
        max-width: 120px;
        padding: 8px;
    }
    .rightContainer.collapsed .htContainer {
        width: 64%;
    }
    .eventHistoryHeader p {
        max-width: 120px;
    }
    #zoom_out,
    #zoom_in {
        margin: 8px 10px;
    }
    #zoom_search {
        margin: 10px 5px;
    }
    #zoom_percentage {
        margin: 13px 5px;
    }
    #undo,
    #redo,
    #max,
    #min {
        margin: 8px 10px;
    }
    .snapshotContainer,
    .nodeContainer {
        width: 30%;
    }
    .globalTeamSearch {
        width: 70%;
    }
}

@media screen and (min-width: 1840px) and (max-width: 1930px) {
    .leftsideDetails .firstContaineroptions {
        margin: 10px 58px !important;
    }
}

@media screen and (min-width: 2200px) and (max-width: 2560px) {
    .leftsideDetails .firstContaineroptions {
        margin: 10px 182px !important;
    }
}

@media screen and (min-width: 900px) and (max-width: 1320px) {
    .leftsideDetails .firstContainerquestions {
        height: 1px !important;
        margin: 10px 10px !important;
    }
}

.teamDetail .teamInputContainer .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-active {
    left: 4px;
    top: 3px;
}

.teamDetail .teamInputContainer .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-highlight {
    left: 4px;
    top: 3px;
}

.teamDetail .options .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-active {
    left: 8px;
    top: 3px;
}

.teamDetail .options .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-highlight {
    left: 8px;
    top: 3px;
}

.attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-default.ui-state-active {
    left: 0;
    top: 0;
}

.attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-default.ui-state-highlight {
    left: 1px;
    top: 1px;
    height: 16px;
    width: 20px;
    margin: 1px auto;
    border-radius: 50%;
    padding: 6px 0px 5px;
}

.peopleAssignmentTableValue.peopleAssignmentColumnResults .ui-datepicker .ui-datepicker-title {
    margin: 0 0.3em;
}

.peopleAssignmentTableValue.peopleAssignmentColumnResults .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-active {
    height: 15px;
    width: 15px;
    padding: 1px 1px;
}

@-moz-document url-prefix() {
    .peopleAssignmentTableValue.peopleAssignmentColumnResults .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-active {
        left: 0px;
        top: 0px;
    }
}

.peopleAssignmentTableValue.peopleAssignmentColumnResults .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-highlight {
    height: 15px;
    width: 15px;
    padding: 1px 1px;
}

@-moz-document url-prefix() {
    .peopleAssignmentTableValue.peopleAssignmentColumnResults .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-highlight {
        left: 0px;
        top: 0px;
    }
}

.peopleAssignmentTableValue.peopleAssignmentColumnResults .ui-datepicker.ui-widget .ui-datepicker-calendar td a {
    padding: 1px;
}

.peopleAssignmentTableValue.peopleAssignmentColumnResults .ui-datepicker.ui-widget .ui-datepicker-calendar thead th {
    font-size: 55%;
}

@-moz-document url-prefix() {
    .attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-default.ui-state-active {
        left: 6px;
        top: 0px;
    }
    .attributeValueContainer p-calendar.commonInputTextbox .ui-calendar .ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-default.ui-state-highlight {
        left: 1px;
        top: 0px;
        height: 15px;
        width: 15px;
        margin: 1px auto;
    }
}

ul {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-inline-start: 0 !important;
}

@media screen and (max-width: 900px) {
    .secondCreateContainer .leftside {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 900px) {
    .secondCreateContainer .rightside {
        width: 100%;
    }
}

@media screen and (min-width: 900px) {
    .secondCreateContainer .leftside {
        width: 48%;
        /* height:auto; */
        margin: 5px !important;
    }
}


/* @media screen and (max-width: 720px){

	.secondCreateContainer .leftside{ */


/* width:48%; */


/* height:auto; */


/* margin:5px */


/* }
	
} */

@media screen and (min-width: 900px) {
    .secondCreateContainer .rightside {
        width: 48%;
    }
}

@media screen and (min-width:900px) and (max-width:1040px) {
    .leftsideDetails .firstContainerquestions {
        margin: 10px 10px !important;
    }
}

@media screen and (max-width: 800px) {
    .htContainer {
        width: 100% !important;
    }
    .hierarchyEventContainer {
        width: 100% !important;
    }
    .snapshotContainer {
        width: 100% !important;
    }
    .nodeContainer {
        width: 100%!important;
    }
}

@media screen and (max-width:900px) {
    .leftsideDetails .firstContaineroptions {
        margin: 10px 0 !important;
    }
}

#compare_tooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; */
}

#compare_tooltip .tooltiptext {
    visibility: hidden;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -60px;
}

#compare_tooltip:hover .tooltiptext {
    visibility: visible;
}

#save_node_btn {
    background-color: #508DCA;
    color: white;
    margin-left: 20px;
    margin-right: -25px;
    cursor: pointer;
}

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

.employeeHeader li {
    width: auto;
    margin: 0 40px -1px 0;
    float: left;
    padding: 8px 5px 5px;
    cursor: pointer;
}

.employeeHeader li p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #A2A1A3;
    font-weight: bold;
    margin: 5px 0 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employeeHeader li.active {
    border-bottom: 5px solid #22b24b;
}

.employeeHeader li.active p {
    color: #4A4A4A;
}

hr.employeeHRTop {
    margin-top: 0px;
    margin-bottom: -2px;
    width: 85%;
    border-width: thin;
    float: left;
    border-color: black;
}

hr.employeeHRBottom {
    margin-top: 43px;
    width: 85%;
    border-width: thin;
    float: left;
    border-color: black;
    margin-left: -218px;
}

input.employeeAttrShowCheck {
    float: right;
    width: 16px;
    height: 17px;
    margin: -28px 60px !important;
    cursor: pointer;
}

.employeecontainer,
.metricsContainer {
    width: 100%;
    height: auto;
    float: left;
    /* margin:-12px 0; */
}

.employeeeditcontainer {
    width: 100%;
    height: auto;
    float: left;
    /*margin:25px 0;*/
}

.secondEmployeeContainer .secondContainer {
    border-bottom: 0;
}

.secondEmployeeContainer .addButton {
    width: auto;
    height: auto;
    float: left;
}

.secondEmployeeContainer .addButton .createButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508dca;
    color: #ffffff;
    padding: 6px 0;
    text-align: center;
    border-radius: 3px;
    width: 125px;
    font-weight: bold;
    cursor: pointer;
    margin: 5px 0;
}

.secondEmployeeContainer .secondContainer .saveButton .createButton {
    background-color: #508dca;
    color: white;
    margin-left: 20px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    padding: 8px 0px;
    text-align: center;
    border-radius: 3px;
    width: 125px;
    font-weight: bold;
    cursor: pointer;
    float: right;
    margin-right: 5px;
    margin-top: 4px;
}

.fifthEmployeeContainer .saveButton #createButton, .bulkQuotaUploadContainer .saveButton #createButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508dca;
    color: #ffffff;
    height: 35px;
    text-align: center;
    border-radius: 3px;
    width: 100px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 0px;
    float: left;
}

.fifthEmployeeContainer .saveButton .fa.fa-spinner.fa-spin, .bulkQuotaUploadContainer .saveButton .fa.fa-spinner.fa-spin {
    float: left;
    color: #b7b7b6;
    font-size: 22px;
    margin: 6px 18px;
    display: none;
}

.saveEmpolyeeButton .createButton {
    background-color: #508dca;
    color: white;
    margin-left: 20px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    padding: 8px 0px;
    text-align: center;
    border-radius: 3px;
    width: 125px;
    font-weight: bold;
    cursor: pointer;
    float: right;
    margin-right: 5px;
    margin-top: 4px;
}

.secondEmployeeContainer .leftside,
.firstMetricsContainer .leftside {
    /* width: 48%; */
    height: 400px;
    background-color: #ffffff;
    float: left;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    /* border: 1px solid rgba(80,141,202,0.3); */
    box-shadow: 0 0 11px 0 #eeeeee, 6px 3px 9px 0 #eeeeee;
    background: #FFFFFF;
    mix-blend-mode: normal;
    /* opacity: 0.5; */
    border: 0.5px solid #bababa;
    /* box-sizing: border-box; */
    border-radius: 2px;
    margin-top: 10px;
}

.secondEmployeeContainer .rightside,
.firstMetricsContainer .rightside {
    /* width: 48%; */
    height: 400px;
    background-color: #ffffff;
    float: right;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border: 0.5px solid #bababa;
    box-shadow: 0 0 11px 0 #eeeeee, 6px 3px 9px 0 #eeeeee;
    margin-top: 5px;
}

@media screen and (max-width: 900px) {
    .secondEmployeeContainer .leftside,
    .firstMetricsContainer .leftside {
        width: 100%;
        /*height:auto;*/
    }
}

@media screen and (max-width: 900px) {
    .secondEmployeeContainer .rightside,
    .firstMetricsContainer .rightside {
        width: 100%;
    }
}

@media screen and (min-width: 900px) {
    .secondEmployeeContainer .leftside,
    .firstMetricsContainer .leftside {
        width: 48%;
        margin: 5px !important;
    }
}

@media screen and (min-width: 900px) {
    .secondEmployeeContainer .rightside,
    .firstMetricsContainer .rightside {
        width: 48%;
    }
}

span.editable {
    float: right;
    margin: 0 60px 0 0;
}

.thirdEmployeeContainer {
    width: 100%;
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    background: #ffffff;
    border: 0.5px solid #b7b7b6;
    box-shadow: 7px 3px 8px 0 #eeeeee;
}

.fifthEmployeeContainer {
    width: 74%;
    float: left;
    margin-left: 30px;
}

.firstMetricsContainer .leftsideDetails .firstContainerquestions {
    width: 160px;
    height: 24px;
    float: left;
    margin: 18px -5px 0 5px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
    font-weight: bold;
}

.firstMetricsContainer .leftsideDetails .firstContaineroptions {
    width: 230px;
    height: auto;
    /*margin: 15px 35px;*/
    margin: 16px 0 0 0;
    float: left;
}

.thirdMetricsContainer {
    width: 74%;
    height: 400px;
    float: left;
    margin-left: 30px;
}

.fifthEmployeeContainer .saveButton {
    height: 40px;
    width: 100%;
    margin-top: 70px;
    margin-bottom: 30px;
}

.fifthEmployeeContainer .saveButton .createButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508dca;
    color: #ffffff;
    padding: 10px 20px;
    text-align: center;
    border-radius: 3px;
    width: 100px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 0px;
}

@media screen and (min-width: 1560px) {
    .fifthEmployeeContainer,
    .thirdMetricsContainer {
        width: 78%;
    }
}

@media screen and (min-width: 1001px) and (max-width: 1101px) {
    .fifthEmployeeContainer,
    .thirdMetricsContainer {
        width: 64%;
    }
}

@media screen and (min-width: 1101px) and (max-width: 1201px) {
    .fifthEmployeeContainer,
    .thirdMetricsContainer {
        width: 68%;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1301px) {
    .fifthEmployeeContainer,
    .thirdMetricsContainer {
        width: 70%;
    }
}

@media screen and (min-width: 1301px) and (max-width: 1351px) {
    .fifthEmployeeContainer,
    .thirdMetricsContainer {
        width: 73%;
    }
}

.summaryDetails {
    margin: 20px 45px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 20px;
    font-weight: bold;
}

.createEmployeeArea {
    width: 100%;
    float: left;
    background-color: #ffffff;
    margin: 0 0 25px;
    min-height: 410px;
    box-shadow: 0 0 11px 0 rgba(80, 141, 202, 0.13), 6px 3px 9px 0 rgba(117, 165, 177, 0.08);
}

.addEditNodeAssignmentContainer .createEmployeeArea {
    margin: 0 0 130px;
}

@media screen and (max-width: 768px) {
    .rightContainer.collapsed {
        width: 70%;
    }
    .rightContainer.expanded {
        width: 70%;
    }
    .teamDetail {
        width: 40%;
    }
    .teamDetailContainer {
        min-height: 330px
    }
    .teamEditTableHeader,
    .teamEditTableValue,
    .governanceTableHeader,
    .governanceTableValue {
        min-height: 40px;
    }
    .teamTableHeader p,
    .teamEditTableHeader p,
    .teamEditNodeTableHeader p,
    .governanceTableHeader p {
        width: 80%;
        max-width: 80%;
        font-size: 12px;
    }
    .peopleDetails .empImage {
        width: 55%;
    }
    .peopleDetails .empDetails {
        width: 35%;
    }
    p.teamEditTableValues,
    p.governanceTableValues {
        font-size: 12px;
    }
    .peopleAssignmentHeader li {
        margin: 0 20px -1px 0px;
        width: 20%;
    }
    .peopleAssignmentHeader.teamMenu li {
        width: 15%;
    }
    .globalPeopleAssignmentSearch {
        width: 70%;
    }
    .submitPeopleAssignmentContainer {
        width: auto;
        margin: 0 0 0 1px;
    }
    .submitPeopleAssignmentContainer .submitPeopleAssignmentButton {
        padding: 10px 10px;
    }
    .submitToAddPeopleAssignmentButton {
        padding: 10px 5px;
    }
    p.peopleAssignmentTableValues.peopleSubrole {
        white-space: nowrap !important;
        padding: 8px 4px !important;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 21.5%;
    }
    .peopleAssignmentTableHeader {
        padding: 18px 2px;
    }
    .peopleAssignmentTableHeader p {
        font-size: 12px;
        width: 75%;
        max-width: 75%;
    }
    .peopleAssignmentTableHeader.editColumn {
        padding: 20px 0px;
    }
    .peopleAssignmentColumnResult {
        padding: 1px 5px !important;
    }
    .peopleAssignmentTableValue {
        padding: 0.1px 2px;
    }
    .formPeopleAssignmentContainer,
    .submitToShowResultAndAddPeopleAssignmentContainer,
    .createEmployeeArea {
        width: 98%;
    }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
    .linenMainContent {
        width: 100%;
    }
    .calendarArea .fc-prev-button {
        margin: 0px 5px 0px 0px !important;
    }
    .calendarArea .fc-next-button {
        margin: 0px 5px 0px 5px !important;
    }
    .calendarArea .fc-toolbar .fc-center {
        left: 10px;
        top: 5px;
    }
    .rightContainer.collapsed {
        width: 75.5%;
    }
    .rightContainer.expanded {
        width: 75.5%;
    }
    .calendarArea .fc-row {
        height: 20px !important;
    }
    .calendarArea .fc-day {
        width: 20px !important;
    }
    .calendarArea th.fc-day-header {
        width: 20px !important;
    }
    .teamDetail {
        width: 45%;
    }
    .teamDetailContainer {
        min-height: 300px
    }
    .teamEditTableHeader,
    .teamEditTableValue,
    .governanceTableHeader,
    .governanceTableValue {
        min-height: 40px;
    }
    .teamTableHeader p,
    .teamEditTableHeader p,
    .teamEditNodeTableHeader p,
    .governanceTableHeader p {
        width: 80%;
        max-width: 80%;
        font-size: 12px;
    }
    .peopleDetails .empImage {
        width: 55%;
    }
    .peopleDetails .empDetails {
        width: 35%;
    }
    p.teamEditTableValues,
    p.governanceTableValues {
        font-size: 12px;
    }
    .peopleAssignmentHeader li {
        margin: 0 20px -1px 0px;
        width: 20%;
    }
    .peopleAssignmentHeader.teamMenu li {
        width: 15%;
    }
    .globalPeopleAssignmentSearch {
        width: 70%;
    }
    .submitPeopleAssignmentContainer {
        width: auto;
        margin: 0 0 0 1px;
    }
    .submitPeopleAssignmentContainer .submitPeopleAssignmentButton {
        padding: 10px 10px;
    }
    .submitToAddPeopleAssignmentButton {
        padding: 10px 5px;
    }
    p.peopleAssignmentTableValues.peopleSubrole {
        white-space: nowrap !important;
        padding: 8px 4px !important;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 21.5%;
    }
    .peopleAssignmentTableHeader {
        padding: 18px 2px;
    }
    .peopleAssignmentTableHeader p {
        font-size: 12px;
        width: 75%;
        max-width: 75%;
    }
    .peopleAssignmentTableHeader.editColumn {
        padding: 20px 0px;
    }
    .peopleAssignmentColumnResult {
        padding: 1px 5px !important;
    }
    .peopleAssignmentTableValue {
        padding: 0.1px 2px;
    }
    .formPeopleAssignmentContainer,
    .submitToShowResultAndAddPeopleAssignmentContainer,
    .createEmployeeArea {
        width: 98%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1000px) {
    .linenMainContent {
        width: 95%;
    }
    .calendarArea .fc-prev-button {
        margin: 0px 20px 0px 0px !important;
    }
    .calendarArea .fc-next-button {
        margin: 0px 10px 0px 20px !important;
    }
    .calendarArea .fc-toolbar .fc-center {
        left: 20px;
        top: 5px;
    }
    .rightContainer.collapsed {
        width: 90%;
    }
    .rightContainer.expanded {
        width: 90%;
    }
    .calendarArea .fc-row {
        height: 30px !important;
    }
    .calendarArea .fc-day {
        width: 30px !important;
    }
    .calendarArea th.fc-day-header {
        width: 30px !important;
    }
    .teamDetail {
        width: 45%;
    }
    .teamDetailContainer {
        min-height: 300px
    }
    .teamEditTableHeader,
    .teamEditTableValue,
    .governanceTableHeader,
    .governanceTableValue {
        min-height: 40px;
    }
    .teamTableHeader p,
    .teamEditTableHeader p,
    .teamEditNodeTableHeader p,
    .governanceTableHeader p {
        width: 80%;
        max-width: 80%;
        font-size: 12px;
    }
    .peopleDetails .empImage {
        width: 45%;
    }
    .peopleDetails .empDetails {
        width: 45%;
    }
    p.teamEditTableValues,
    p.governanceTableValues {
        font-size: 12px;
    }
    .peopleAssignmentHeader li {
        margin: 0 20px -1px 0px;
        width: 20%;
    }
    .peopleAssignmentHeader.teamMenu li {
        width: 15%;
    }
    .globalPeopleAssignmentSearch {
        width: 70%;
    }
    .submitPeopleAssignmentContainer {
        width: auto;
        margin: 0 0 0 1px;
    }
    .submitPeopleAssignmentContainer .submitPeopleAssignmentButton {
        padding: 10px 10px;
    }
    .submitToAddPeopleAssignmentButton {
        padding: 10px 5px;
    }
    p.peopleAssignmentTableValues.peopleSubrole {
        white-space: nowrap !important;
        padding: 8px 4px !important;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 21.5%;
    }
    .peopleAssignmentTableHeader {
        padding: 18px 2px;
    }
    .peopleAssignmentTableHeader p {
        font-size: 12px;
        width: 75%;
        max-width: 75%;
    }
    .peopleAssignmentTableHeader.editColumn {
        padding: 20px 0px;
    }
    .peopleAssignmentColumnResult {
        padding: 1px 5px !important;
    }
    .peopleAssignmentTableValue {
        padding: 0.1px 2px;
    }
    .formPeopleAssignmentContainer,
    .submitToShowResultAndAddPeopleAssignmentContainer,
    .createEmployeeArea {
        width: 98%;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1100px) {
    .rightContainer.collapsed {
        width: 91%;
    }
    .rightContainer.expanded {
        width: 91%;
    }
    p.peopleAssignmentTableValues.peopleSubrole {
        white-space: nowrap !important;
        padding: 8px 4px !important;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 21.5%;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1200px) {
    .rightContainer.collapsed {
        width: 92%;
    }
    .rightContainer.expanded {
        width: 92%;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 21.5%;
        min-height: 62px;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1200px) {
    .linenMainContent {
        width: 100%;
    }
    .menuContainer .menuLeftContent ul li#homeMenu {
        padding: 0 20px 40px !important;
    }
    .calendarArea .fc-prev-button {
        margin: 0px 40px 0px 5px !important;
    }
    .calendarArea .fc-next-button {
        margin: 0px 15px 0px 40px !important;
    }
    .calendarArea .fc-toolbar .fc-center {
        left: 30px;
        top: 5px;
    }
    .calendarArea .fc-row {
        height: 60px !important;
    }
    .calendarArea .fc-day {
        width: 60px !important;
    }
    .calendarArea th.fc-day-header {
        width: 60px !important;
    }
    .teamEditTableHeader,
    .teamEditTableValue,
    .governanceTableHeader,
    .governanceTableValue {
        min-height: 40px;
    }
    .teamTableHeader p,
    .teamEditTableHeader p,
    .teamEditNodeTableHeader p,
    .governanceTableHeader p {
        width: 80%;
        max-width: 80%;
        font-size: 12px;
    }
    .peopleDetails .empImage {
        width: 35%;
    }
    .peopleDetails .empDetails {
        width: 55%;
    }
    p.teamEditTableValues,
    p.governanceTableValues {
        font-size: 12px;
    }
    .globalPeopleAssignmentSearch {
        width: 75%;
    }
    .submitPeopleAssignmentContainer {
        width: auto;
        margin: 0 0 0 1px;
    }
    .submitPeopleAssignmentContainer .submitPeopleAssignmentButton {
        padding: 10px 10px;
    }
    .submitToAddPeopleAssignmentButton {
        padding: 10px 5px;
    }
    .peopleAssignmentTableHeader {
        padding: 18px 2px;
    }
    .peopleAssignmentTableHeader p {
        font-size: 12px;
        width: 75%;
        max-width: 75%;
    }
    .peopleAssignmentTableHeader.editColumn {
        padding: 20px 0px;
    }
    .peopleAssignmentColumnResult {
        padding: 1px 5px !important;
    }
    .peopleAssignmentTableValue {
        padding: 0.1px 2px;
    }
    .formPeopleAssignmentContainer,
    .submitToShowResultAndAddPeopleAssignmentContainer,
    .createEmployeeArea {
        width: 98%;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1350px) {
    .linenMainContent {
        width: 90%;
    }
    .calendarArea .fc-prev-button {
        margin: 0px 40px 0px 5px !important;
    }
    .calendarArea .fc-next-button {
        margin: 0px 15px 0px 40px !important;
    }
    .calendarArea .fc-toolbar .fc-center {
        left: 30px;
        top: 5px;
    }
    .calendarArea .fc-row {
        height: 60px !important;
    }
    .calendarArea .fc-day {
        width: 60px !important;
    }
    .calendarArea th.fc-day-header {
        width: 60px !important;
    }
    .rightContainer.collapsed {
        width: 92%;
    }
    .rightContainer.expanded {
        width: 92%;
    }
    .peopleAssignmentTableHeader,
    .peopleAssignmentTableValue {
        width: 21.5%;
        min-height: 62px;
    }
    .globalPeopleAssignmentSearch {
        width: 67.6%;
    }
    .formPeopleAssignmentContainer,
    .submitToShowResultAndAddPeopleAssignmentContainer,
    .createEmployeeArea {
        width: 98%;
    }
    .peopleDetails .empImage {
        width: 27%;
    }
    .peopleDetails .empDetails {
        width: 68%;
    }
}

.employeeTable {
    width: 100%;
    table-layout: fixed;
}

.employeeRowHeading {
    background: #ffffff;
    float: left;
    width: 100%;
}

.employeeTableHeader,
.employeeTableValue {
    border-collapse: collapse;
    text-align: left;
    border-bottom: 1px solid #ddd;
    border-top: none;
    border-left: none;
    border-right: none;
    float: left;
    width: 21.5%;
    display: inline-flex;
    vertical-align: middle;
    min-height: 44px;
}

.employeeTableHeader.editColumn,
.employeeTableValue.editColumn {
    width: 7%;
}

.employeeTableValue div {
    min-height: 20px;
    width: 100%;
    float: left;
}

.employeeTableHeader.editColumn {
    padding: 18px 8px;
}

.employeeTable {
    width: 100%;
    table-layout: fixed;
}

.employeeTableHeader p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #000000;
    width: auto;
    float: left;
    text-align: left;
    max-width: 98%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 5px 0 0;
}

p.employeeTableValues {
    width: 98%;
    max-width: 100%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #000000;
    text-align: left;
    padding: 8px 49px;
}

.employeeTableHeader {
    padding: 18px 50px;
}

.employeeColumnResult {
    padding: 0 12px !important;
}

.employeeTableValue {
    padding: 0.1px 7px;
}

.employeeTableHeader aside {
    margin: 7px 5px;
    background: url('../images/HierarchyImages/selectOpen.png') no-repeat;
    height: 7px;
    width: 10px;
    float: left;
    border: 0;
    cursor: pointer;
}

.employeeTableHeader aside.active {
    background: url('../images/HierarchyImages/selectClose.png') no-repeat;
}

.employee_template_growl_msg .ui-growl.ui-widget {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: auto !important;

}

.employee_template_growl_msg .ui-growl.ui-widget .ui-growl-item-container.ui-state-highlight.ui-growl-message-error {
    background-color: #D5333A;
    background-image: url(../images/HierarchyImages/errorMsg.svg);
    background-repeat: no-repeat;
    background-position-x: 4%;
    background-position-y: 50%;
}

.employee_template_growl_msg .ui-growl.ui-widget .ui-growl-item-container.ui-state-highlight.ui-corner-all.ui-shadow.ui-growl-message-success {
    background-color: #27D5A3;
    background-image: url(../images/HierarchyImages/completeMsg.svg);
    background-repeat: no-repeat;
    background-position-x: 4%;
    background-position-y: 50%;
}

.employee_template_growl_msg .ui-growl-message {
    padding: 10px 0px 0.25em 10px !important;
}

.createEmployeeFormArea {
    padding: 20px;
}

.formEmployeeContainer {
    width: 100%;
    height: auto;
    float: left;
}

.formEmployeeContainer .questions {
    width: 35%;
    float: left;
    margin: 10px 0;
}

.formEmployeeContainer .questions p {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
    font-weight: bold;
    margin: 0;
}

.formEmployeeContainer .options {
    margin: 10px 0;
    float: left;
    width: 35%;
    position: relative;
}

.formEmployeeContainer .options .dropdown.open,
.formEmployeeContainer .options .dropdown.open ul.dropdown-menu {
    width: 100% !important;
}

.firstContaineroptions .checkboxContaineredit {
    width: 100%;
    float: left;
    margin: 5px 1px;
}

.firstContaineroptions .checkboxContaineredit label {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px !important;
    color: #4A4A4A;
    float: left;
    width: auto;
    margin: 0 0 5px !important;
    font-weight: normal !important;
    display: block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.firstContaineroptions .checkboxContaineredit.active label {
    font-weight: 600 !important;
}

.firstContaineroptions .checkboxContaineredit label input[type=radio] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 0 !important;
}

.firstContaineroptions .checkboxContaineredit label:hover input~.checkmarkedit {
    background-color: #ffffff;
}

.firstContaineroptions .checkboxContaineredit label input:checked~.checkmarkedit {
    background-color: #ffffff;
}

.firstContaineroptions .checkboxContaineredit label input:checked~.checkmarkedit:after {
    display: block;
}

.firstContaineroptions .checkboxContaineredit label .checkmarkedit:after {
    top: 6px;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #757574;
}

.checkboxContaineredit label:hover input~.checkmarkedit {
    background-color: #ffffff;
}

.checkboxContaineredit label input:checked~.checkmarkedit {
    background-color: #ffffff;
}

.checkboxContaineredit label input:checked~.checkmarkedit:after {
    display: block;
}

.checkboxContaineredit label .checkmarkedit:after {
    top: 6px;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #508dce;
}

.firstContaineroptions .checkmarkedit {
    position: absolute;
    top: 0;
    left: 0;
    height: 19px;
    width: 19px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #757574;
    margin: 0;
}

.firstContaineroptions .checkmarkedit:after {
    content: "";
    position: absolute;
    display: none;
}

.checkmarkedit {
    position: absolute;
    top: 0;
    left: 0;
    height: 19px;
    width: 19px;
    background-color: #ffffff;
    border-radius: 50%;
    /* box-shadow: 0 0 0 1px rgba(80, 141, 206, 0.295); */
    margin: 0;
}

.checkmarkedit:after {
    content: "";
    position: absolute;
    display: none;
}

.fifthCreateContainer .saveButton .createButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508dca;
    color: #ffffff;
    padding: 10px 20px;
    text-align: center;
    border-radius: 3px;
    width: 100px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 0px;
}


/* ADMIN PAGE CSS CODE STARTING FROM HERE*/

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-left: 16px
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    width: 46px;
    height: 28px;
    left: -15px;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 5px;
    bottom: 6px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.adminLinkActive {
    border-bottom: 5px solid #000;
    font-weight: bold;
    font-size: 14px;
    padding-bottom: 8px;
    color: #000;
    font-family: Helvetica !important;
}

p#admin {
    width: 32px;
    height: 36px;
    margin-top: 5px;
}

.admin-link {
    color: #A2A1A3;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 10px;
    font-family: Helvetica !important;
}

#adminContainer {
    min-height: 395px;
    padding: 15px 20px !important;
    background: #ffffff;
}

.admin_leftSideMenuContainer.expanded .sideBarNavigation #minus {
    background: url(../images/Admin_Minus_Icon.svg) no-repeat;
    width: 12px;
    height: 4px;
    margin: 10px 15px 0 !important;
    padding: 5px;
    cursor: pointer;
}

.admin_leftSideMenuContainer.collapsed .sideBarNavigation #plus {
    background: url(../images/Admin_Plus_Icon.svg) no-repeat;
    width: 12px;
    height: 12px;
    margin: 7px 10px 0 !important;
    cursor: pointer;
}

.side_admin_logo {
    clear: both;
    width: auto;
    margin: 0;
    border-bottom: 2px solid #000;
}

.side_admin_logo div p#fullText,
.side_admin_logo div p#initial {
    color: #000;
    font-size: 28px;
    font-family: "Helvetica Neue", sans-serif;
    float: left;
    font-weight: bold;
}

.admin_leftSideMenuContent ul li.active div .sideMenuName {
    color: #000;
    opacity: 1;
}

.admin_leftSideMenuContainer .admin_leftSideMenuContent ul li.active {
    border-right: 5px solid #000;
}

#editCancelButton,
#admin_roleBackButton {
    background-color: rgba(86, 82, 79, 0.1);
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    padding: 10px 44px;
    text-align: center;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    color: #56524f;
    width: auto;
    height: 38px;
    border: none;
}

#editSaveButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508DCA;
    color: #ffffff;
    padding: 10px 44px;
    text-align: center;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    width: auto;
    height: 38px;
}

#editSaveAndNewButton {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background-color: #508DCA;
    color: #ffffff;
    padding: 10px 22px;
    text-align: center;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    width: auto;
    height: 38px;
}

#userDetailsContainer {
    color: #000;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding-top: 10px;
}

.form-control {
    cursor: pointer;
}

#userDetailsValueContainer,
#detailsValueContainer {
    color: #5A5A5A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
}

#reportsAttributeContainer {
    color: #5A5A5A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: none !important;
    display: inline-block;
    margin-left: -15px;
    width: 212px;
    margin-right: 32px;
}

#reportsAttributeContainer .multiselect-dropdown .dropdown-btn {
    display: inline-block;
    border: none !important;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .42) !important;
    width: 100%;
    padding: 6px 0px;
    font-weight: 400;
    line-height: 1.52857143;
    cursor: pointer;
}

#reportsAttributeContainer .multiselect-dropdown .dropdown-list {
    position: absolute;
    width: 100%;
    z-index: 9999;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 5px #ccc;
    padding: 0;
    margin: 0;
}

#userDetailsValueContainer #role #reportsAttributeContainer .multiselect-dropdown .dropdown-list {
    position: absolute;
    padding-top: 6px;
    margin-top: 0px;
    width: 100%;
    z-index: 9999;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 5px #ccc;
}

#info_icon {
    margin-top: 8px;
    color: grey;
    cursor: pointer;
    margin-left: 10px;
}

.info_icon {
    margin-top: 8px;
    color: grey;
    cursor: pointer;
    margin-left: 24px;
}

.subscribeInfoIcon {
    margin-left: 60px;
    margin-top: 8px;
    color: grey;
    cursor: pointer;
}

#status_name,
#subscribe_name {
    float: right;
    color: #5A5A5A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    transform: translate(44px, -16px);
    position: absolute;
}

.adminSortUp,
.adminSortDown,
.adminUnsort {
    font-size: 18px !important;
    position: relative !important;
    float: right !important;
    margin-top: -5px !important;
    margin-left: 5px !important;
    margin-bottom: 0 !important;
}

#userDetailsTableContainer {
    color: #000;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding-top: 10px;
    width: 21%;
}

#userDetailsValueContainer #reportsAttributeContainer .multiselect-dropdown .dropdown-list {
    padding-top: 1px;
    margin-top: 0px;
    box-shadow: none;
}

#userDetailsValueContainer .multiselect-dropdown .dropdown-btn .dropdown-up {
    border-bottom: 10px solid #508DCA;
    border-width: 5px 5px 5px 5px;
}

#userDetailsValueContainer .multiselect-dropdown .dropdown-btn .dropdown-down {
    border-top: 10px solid #508DCA;
    border-width: 5px 5px 5px 5px;
}

#dropdownCont .multiselect-dropdown .dropdown-btn .dropdown-up {
    border-bottom: 10px solid #757575;
    border-width: 5px 5px 5px 5px;
}

#dropdownCont .multiselect-dropdown .dropdown-btn .dropdown-down {
    border-top: 10px solid #757575;
    border-width: 5px 5px 5px 5px;
}

#dropdownCont .multiselect-item-checkbox input[type=checkbox]:checked+div:before {
    background: #508dca !important;
}

#dropdownCont .multiselect-item-checkbox input[type=checkbox]+div:before {
    border: 2px solid #508dca !important;
    color: #508DCA !important;
}

.reportPerfectScrollbar div.ps{
    width: 95%;
}

.scReportPerfectScrollbar div.ps{
    width: 98%;
}

#dropdownCont .multiselect-dropdown .dropdown-btn .selected-item {
    border: 1px solid #508dca !important;
    background: #508dca !important;
    width: 70%;
    height: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dropdownCont .multiselect-dropdown .dropdown-btn .selected-item a {
    float: right;
}

.admin_searchContainer {
    height: 35px;
    width: 100%;
    border: 1px solid #dadada;
    border-radius: 2px;
    margin-left: 35px;
}

#admin_search .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 100%;
    height: 28px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background: #ffffff;
    border: 0;
    position: relative;
    left: 0px;
    top: 3px;
    box-shadow: none;
    text-align: center;
    cursor: pointer;
}

#admin_search .ui-autocomplete.ui-widget .ui-autocomplete-panel {
    position: absolute !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    height: auto !important;
    width: 100% !important;
    top: 34px !important;
    max-height: 266px !important;
    margin-left: 0px !important;
    border-radius: 0px !important;
}

.admin_searchContainer .ui-autocomplete {
    width: 100% !important;
}

#search_hType_container .ui-autocomplete {
    width: 100% !important;
}

div#admin_searchClose {
    background: url(../images/HierarchyImages/closing.png) no-repeat;
    margin: -18px -11px;
    float: right;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.admin_searchContainer aside {
    box-sizing: border-box;
    padding: 10px 0;
    border: 1px solid rgba(183, 183, 182, 0.3);
    opacity: 0.99;
    margin: -23px 26px;
    float: right;
}

#buttonContainer .fa.fa-spinner.fa-spin {
    float: right;
    color: #b7b7b6;
    font-size: 22px;
    margin: 8px -30px;
    display: none;
}

.admin_typeContainer {
    float: left;
    width: 100%;
    height: auto;
    margin-left: 15px;
    border: 1px solid rgba;
}

.admin_typesContainer {
    float: left;
    height: auto;
    width: 19.015%;
    margin-top: 20px;
    margin-right: 40px;
}

img.viewVersionStatusIcon {
    float: right;
}

input.employeeCommonInputTextbox:focus {
    border: none;
    /* color: #629fe6; */
    -webkit-text-fill-color: #39393a;
}

input.employeeCommonInputTextbox {
    border: none;
    border-radius: 2px;
    height: 28px;
    width: 100%;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
    cursor: pointer !important;
    background-color: rgba(120, 117, 114, 0.05);
}

select.employeeCommonInputTextbox:focus {
    border: none;
    color: #629fe6;
    -webkit-text-fill-color: #39393a;
}

select.employeeCommonInputTextbox {
    border: none;
    border-radius: 2px;
    height: 28px;
    width: 100%;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #39393a;
    cursor: pointer !important;
    background-color: rgba(120, 117, 114, 0.05);
}

select.employeeCommonInputTextbox option {
    font-family: "Helvetica Neue", serif !important;
    font-size: 14px !important;
    color: #39393a;
}

select.employeeCommonInputTextbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/HierarchyImages/selectOpen.png);
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 50%;
}

p-calendar.employeeCommonInputTextbox .ui-calendar .ui-inputtext:focus {
    border: none;
    box-sizing: border-box;
    box-shadow: inset 0px 1px 4px rgba(117, 117, 116, 0.268342);
    border-radius: 2px;
}

p-calendar.employeeCommonInputTextbox .ui-calendar .ui-inputtext {
    height: 35px;
    width: 100% !important;
    cursor: pointer !important;
    color: #555555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

p-calendar.employeeCommonInputTextbox .ui-calendar button.ui-datepicker-trigger,
p-calendar.employeeCommonInputTextbox .ui-calendar button.ui-datepicker-trigger:hover,
p-calendar.employeeCommonInputTextbox .ui-calendar button.ui-datepicker-trigger:focus,
p-calendar.employeeCommonInputTextbox .ui-calendar button.ui-datepicker-trigger:hover,
p-calendar.employeeCommonInputTextbox .ui-calendar button.ui-datepicker-trigger:focus {
    border: none !important;
    background: url(../images/calendar.svg) no-repeat 50% 50% !important;
    width: 20px;
    height: 28px;
    position: absolute;
    right: 3px;
}

p-calendar.employeeCommonInputTextbox {
    width: 100%;
    border: 0;
}

p-calendar.employeeCommonInputTextbox .ui-calendar {
    width: 100%;
}

p-calendar.employeeCommonInputTextbox .ui-datepicker{
	width: 100%;
}

p-calendar.employeeCommonInputTextbox .ui-calendar .ui-datepicker table {
    font-size: 0.7em !important;
}

#search_container .ui-autocomplete.ui-widget .ui-autocomplete-loader,
#search_container_agent .ui-autocomplete.ui-widget .ui-autocomplete-loader,
#view_search_container .ui-autocomplete.ui-widget .ui-autocomplete-loader,
#compare_node_version_1 .ui-autocomplete.ui-widget .ui-autocomplete-loader,
#compare_node_version_2 .ui-autocomplete.ui-widget .ui-autocomplete-loader,
#compare_node .ui-autocomplete.ui-widget .ui-autocomplete-loader,
.employee_searchContainer .ui-autocomplete.ui-widget .ui-autocomplete-loader {
    display: none !important;
}

.admin_searchContainer .ui-autocomplete.ui-widget .ui-autocomplete-loader {
    display: none !important;
}

.employee_searchContainer {
    height: 35px;
    width: 45%;
    border: 1px solid #dadada;
    border-radius: 2px;
    margin-left: 35px;
    margin-right: 35px;
    margin-bottom: 35px;
    float: left;
}

#employee_search {
    width: 50%;
}

#employee_search .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 100%;
    height: 28px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background: #ffffff;
    border: 0;
    position: relative;
    left: 0px;
    top: 3px;
    box-shadow: none;
    text-align: center;
    cursor: pointer;
}

#employee_search .ui-autocomplete.ui-widget .ui-autocomplete-panel {
    position: absolute !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    height: auto !important;
    width: 100% !important;
    top: 34px !important;
    max-height: 266px !important;
    margin-left: 0px !important;
    border-radius: 0px !important;
}

.employee_searchContainer .ui-autocomplete {
    width: 100% !important;
}

div#employee_searchClose {
    background: url(../images/HierarchyImages/closing.png) no-repeat;
    margin: -18px -11px;
    float: right;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.employee_searchContainer aside {
    box-sizing: border-box;
    padding: 10px 0;
    border: 1px solid rgba(183, 183, 182, 0.3);
    opacity: 0.99;
    margin: -23px 26px;
    float: right;
}

@media screen and (min-height: 1080px) {
    .secondEmployeeContainer .leftside,
    .secondEmployeeContainer .rightside,
    .firstMetricsContainer .leftside,
    .firstMetricsContainer .rightside {
        height: 480px !important;
    }
}

#tooltip {
    position: relative;
    display: inline-block;
}

#tooltip .tooltiptext {
    visibility: hidden;
    width: auto;
    bottom: 14%;
    right: 42px;
    background-color: rgba(120, 117, 114);
    color: white;
    border-radius: 2px;
    padding-left: 5px;
    position: absolute;
    z-index: 1;
}

#tooltip:hover .tooltiptext {
    visibility: visible;
}

.searchHeaderContainer #search_hType_container .closeVersion aside {
    background: url(../images/HierarchyImages/closing.png) no-repeat;
    width: 13px;
    height: 14px;
    margin: -7px -1px;
    cursor: pointer;
}


/*NEW label css*/

#newTag {
    background: url(../images/HierarchyImages/newTagIcon.svg) no-repeat;
    float: left;
    height: 22px;
    margin-top: 13px !important;
    padding: 1px;
    margin-left: -6px;
    width: 40px;
}

.mat-select-search-inner {
    top: 0;
    width: 100%;
    border-bottom: 1px solid #cccccc;
    background: white;
    z-index: 100;
    padding: 10px;
}

.mat-select-search-input {
    padding: 10px;
    box-sizing: border-box;
}

.hr_space {
    margin: 0;
    padding: 3px;
    border-width: 1px;
}

.mat-select-search-panel {
    /* allow absolute positioning relative to outer options container */
    transform: none !important;
    position: sticky !important;
    max-height: 350px;
}

.mat-select-search-clear {
    position: absolute !important;
    right: 0;
    top: 0px;
}

.mat-select-search-panel .mat-checkbox label {
    margin-bottom: 0px !important;
    margin-left: 6px !important;
}

.mat-select-search-panel .mat-checkbox-layout label {
    margin-bottom: 0px !important;
}

.mat-select-search-panel .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #3f51b5 !important;
}

.coverage .left_indent {
    margin-left: 20px;
}

.coverage .icon_position_end {
    text-align: end
}

.coverage .base_coverage_rule_set {
    border: 1px solid #ccc;
    /* border-style: solid;
	border-width: 1px; */
    position: relative;
    clear: both;
    display: flex;
}

.coverage .coverage_rule_set {
    /*margin-left: -10px;*/
    margin-top: 10px;
    border: 1px solid #ccc;
    /* border-style: solid;
	border-width: 1px; */
    position: relative;
    clear: both;
    display: flex;
}

.coverage .subseq_coverage_rule_set {
    /*margin-left: -10px;*/
    margin-top: 10px;
    border: 1px solid #ccc;
    /* border-style: solid;
	border-width: 1px; */
    position: relative;
    clear: both;
    display: flex;
}

.coverage .base_coverage_rule {
    margin-left: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    /* border-style: solid;
	border-width: 1px; */
    position: relative;
    clear: both;
    display: flex;
}

.coverage .userExp {
    padding: 15px;
    margin-bottom: 10px
}

.coverage .coverage_rule_set::before,
.coverage .coverage_rule_set::after {
    content: '';
    left: -12px;
    border-color: #ccc;
    border-style: solid;
    width: 9px;
    height: 25px;
    position: absolute;
}

.coverage .coverage_rule_set::before {
    top: -2px;
    border-width: 0 0 2px 2px;
}

.coverage .coverage_rule_set::after {
    border-width: 0 0 0 2px;
    top: 50%;
}

.coverage .base_coverage_rule::before,
.coverage .base_coverage_rule::after {
    content: '';
    left: -12px;
    border-color: #ccc;
    border-style: solid;
    width: 9px;
    height: 35px;
    position: absolute;
}

.coverage .base_coverage_rule::before {
    top: -5px;
    border-width: 0 0 2px 2px;
}

.coverage .base_coverage_rule::after {
    border-width: 0 0 0 2px;
    top: 50%;
}

.coverage .coverage_exp {
    margin-top: 10px;
    margin-left: -15px;
}

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

.coverage .coverage_footer {
    margin-bottom: 30px;
}

.coverage .coverage_buttons {
    float: right;
    margin-right: -32px;
    text-align: right;
}

.coverage .coverage_buttons p {
    margin-top: 15px;
    color: red;
}

.custom_error_msg {
    margin-bottom: 15px;
    color: red;
    float: right;
}

.coverage .coverage_button {
    margin-top: 10px;
    background-color: #508dca;
    color: #FFF;
    font-weight: 400;
    letter-spacing: 1px;
    width: 75px;
    float: right;
    height: 35px;
    margin-right: 10px;
}

.coverage .coverage_button_back {
    margin-top: 10px;
    background-color: #508dca;
    color: #FFF;
    font-weight: 400;
    letter-spacing: 1px;
    width: 50px;
    float: right;
    height: 35px;
    margin-right: 10px;
    margin-left: 10px;
}

.coverage .coverage_button_save_exit {
    margin-top: 10px;
    background-color: #508dca;
    color: #FFF;
    font-weight: 400;
    letter-spacing: 1px;
    width: 130px;
    float: right;
    height: 35px;
}

.coverage .coverage_buttons .btn:hover,
.btn:focus,
.btn.focus {
    color: #FFF !important;
    text-decoration: none;
}

.coverage .ruleSetBackround {
    background: rgba(179, 65, 93, .1)!important;
}


/*Timestamp css*/

.hierarchyEventsList #eventlist div span#timestamp {
    margin: 5px 0px;
    color: grey;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    width: 45%;
    line-height: 15px;
    height: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hierarchyEventsList #eventlist div:first-child span#timestamp p#user {
    font-weight: normal !important;
}

.hierarchyEventsList #eventlist div p#user {
    margin: 5px 10px 5px 0px;
    color: grey;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    width: 45%;
    float: left;
    line-height: 15px;
    height: 25px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cdk-drag-placeholder {
    opacity: 0;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.rightsideDetails ul.cdk-drop-list-dragging li:not(.cdk-drag-placeholder) {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-preview {
    width: 98%;
    height: 38px;
    margin: 5px;
    padding: 8px 15px;
    border-radius: 2px;
    border: 0.5px solid #bababa;
    box-shadow: 7px 3px 8px 0 #eeeeee;
    list-style: none;
}

.disabled {
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.5;
}

.coverage .clear_all {
    float: right;
    margin-right: 15px;
    cursor: pointer;
}

.add_coverage_button_edit {
    width: 135px!important;
    float: right !important;
}

.add_coverage_button_view {
    width: 135px!important;
    float: right !important;
    margin-top: 20px;
}

.coverage_error_highlight {
    border: 2px solid red !important;
}

#confirmedImageView {
    position: absolute;
    width: 30px;
    height: 23px;
    left: 165px;
    top: 12px;
    cursor: pointer;
    background-size: 23px 20px;
}

#publishContainer {
    padding: 5px 0 0 12px;
    width: 95%;
}

#createSaveButton {
    background-color: #508DCA;
    color: white;
    cursor: pointer;
}

.downoladReport {
    width: 80%;
    cursor: pointer;
}

.my-tooltip {
    word-break: break-word;
}

.breakWord {
    word-break: break-word;
}

.coverage_legend {
    text-align: center;
    padding-right: 15%;
}

.k-stat-title-color-box,
h5 {
    display: inline-block;
    vertical-align: middle;
    margin: 5px 0;
    padding-right: 25px;
}

.k-stat-title-color-box {
    width: 25px;
    height: 25px;
    border-radius: 25px;
}

.mapboxgl-popup-content {
    padding: 5px 10px 5px !important;
}

.mapboxgl-popup-close-button {
    right: -4px !important;
    top: -5px !important;
}

.createContainer {
    width: 100%;
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    background: #ffffff;
    border: 0.5px solid #b7b7b6;
    box-shadow: 7px 3px 8px 0 #eeeeee;
    margin-bottom: 18px;
    width: 79% !important;
    margin-left: 14px;
}


/* Search agent edit css*/

#search_agent_node .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 90% !important;
    height: 28px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background: #ffffff;
    border: 0;
    position: absolute;
    left: 0px;
    top: -10px;
    padding: 0px 0 0 10px;
    box-shadow: none;
    text-align: center;
    /*background-image: url("../images/HierarchyImages/search.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;*/
}

#search_agent_node .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    height: auto !important;
    width: 100% !important;
    top: 22px !important;
    max-height: 266px !important;
    margin-left: 0px !important;
    border-radius: 0px !important;
}

#search_hType_container #search_agent_node .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 100% !important;
    height: 35px;
    top: -12px;
    padding: 0px;
    /*border: 1px solid rgba(80,141,202,0.3);*/
}

#search_hType_container #search_agent_node .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    height: auto !important;
    width: 100% !important;
    top: 26px !important;
    max-height: 200px !important;
    margin-left: 0px !important;
    border-radius: 0px !important;
}


/* Edit search css*/

.typesContainer.expanded.max_window .searchEdit {
    margin-right: 10px;
    width: 30% !important;
    margin-top: 45px;
    float: left;
}

.searchEdit option {
    font-size: 14px !important;
    font-family: "Helvetica Neue", sans-serif !important;
    cursor: pointer !important;
}

#duplicatecountagent {
    width: 100%;
    height: 30px;
    float: left;
    color: #508DCA !important;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    line-height: normal !important;
    /* white-space: nowrap ; */
    overflow: hidden !important;
    text-overflow: ellipsis;
}

#duplicatecountagent p {
    width: 99%;
    max-width: 99%;
    /*float: left;*/
    margin: 0 1px 5px 1px;
    color: #508DCA;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    /*white-space: nowrap;*/
    overflow: hidden;
    /*text-overflow: ellipsis; */
}


/* View search agent css*/

#view_agent_search_container {
    width: 100%;
    height: auto;
    margin-top: 11px;
}

#view_agent_search_container .search_agent_input_container {
    width: 80%;
    height: 35px;
    float: left;
    border: 1px solid #dadada;
    border-radius: 2px;
    background-color: #FFFFFF;
    /* box-shadow: inset 0 1px 4px 0 rgba(80,141,202,0.27); */
    margin: 0 5px 0 0;
}

#view_search_agent .ui-autocomplete.ui-widget input.ui-inputtext {
    width: 90% !important;
    height: 28px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    background: #ffffff;
    border: 0;
    position: absolute;
    left: 0px;
    top: -10px;
    padding: 0px 0 0 10px;
    box-shadow: none;
    text-align: left;
    /* background-image: url("../images/HierarchyImages/search.svg"); */
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#view_search_agent .ui-autocomplete.ui-widget input.ui-inputtext:focus {
    background-image: none;
}

#view_search_agent .ui-autocomplete.ui-widget div.ui-autocomplete-panel {
    position: absolute !important;
    background: #ffffff !important;
    cursor: default !important;
    border: 1px solid #caddef !important;
    height: auto !important;
    width: 100% !important;
    top: 22px !important;
    max-height: 266px !important;
    margin-left: 0 !important;
    border-radius: 0px !important;
}

.view_detailTypeContainer.expanded.max_window .htContainer .typeSearchContainer #duplicatecountagent {
    width: 50% !important;
    margin-top: 10px !important;
}

.typesContainer.expanded.max_window .typeContainer #nodeSearch, .typesContainer.expanded.max_window .typeContainer #agentSearch {
    width: 68%;
    float: left;
}

/* cockpit chart CSS */
.pie_chart_Cockpit{
    margin-top: 20px; 
    height: 620px;
}

/* optimizer categories css */

#total{
    font-weight: bold;
    margin-top: 15px;
    padding-top: 4px; 
    margin-left: 15px;
}
 
#total_input_categories{
    margin-top: 15px;  
    width: 68px;
    left: -15px;
}

@media screen and (min-width: 1000px) and (max-width: 1050px) {
    #view_bread_crumbs {
        width: 30%;
        max-width: 30%;
    }
    #view_agent_search_container .search_agent_input_container {
        width: 70%;
    }
    #view_agent_search_container .search_submit_container {
        width: 28.2%;
    }
}

@media screen and (min-width: 1051px) and (max-width: 1135px) {
    #view_bread_crumbs {
        width: 35%;
        max-width: 35%;
    }
    #view_agent_search_container .search_agent_input_container {
        width: 73%;
    }
    #view_agent_search_container .search_submit_container {
        width: 25.2%;
    }
}

@media screen and (min-width: 1135px) and (max-width: 1201px) {
    #view_bread_crumbs {
        width: 40%;
        max-width: 40%;
    }
    #view_agent_search_container .search_agent_input_container {
        width: 75%;
    }
    #view_agent_search_container .search_submit_container {
        width: 23.2%;
    }
}

@media screen and (min-width: 1202px) and (max-width: 1260px) {
    #view_bread_crumbs {
        width: 45%;
        max-width: 45%;
    }
    #view_agent_search_container .search_agent_input_container {
        width: 80%;
    }
    #view_agent_search_container .search_submit_container {
        width: 18.2%;
    }
}

.view_detailTypeContainer.expanded.max_window .htContainer .typeSearchContainer #view_agent_search_container {
    width: 45% !important;
    margin-top: 35px !important;   
}

.view_detailTypeContainer.expanded.max_window .htContainer .typeSearchContainer #view_agent_search_container .search_agent_input_container {
    width: 100% !important;
}

.view_detailTypeContainer.expanded.max_window .htContainer .search {
    margin-top: 4px;
}

.searchOption {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    color: #000000;
}

input[type="button"],
#button {
    outline: 0 !important;
}

input[type="button"]::-moz-focus-inner,
#button::-moz-focus-inner {
    border: 0 !important;
    outline: 0 !important;
}

.ui-sidebar-mask {
    z-index: -999999 !important;
}

.ui-widget-overlay {
    background: #fff !important;
}

.ui-sidebar {
    overflow: hidden;
}

.ui-sidebar-close {
    margin-top: 8px !important;
}

.coverage_overlay .ui-sidebar-right {
    width: 40em !important;
    top: 50px !important;
}

.coverage_overlay .mat-checkbox-layout {
    white-space: normal !important;
}

.coverage_overlay .mat-checkbox-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coverage_overlay .mat-form-field-appearance-legacy .mat-form-field-wrapper {
    padding-bottom: 0.3em !important;
}

.coverage_overlay .mat-option {
    max-width: 50% !important;
    width: 50% !important;
    float: left !important;
}

.speech-bubble {
    position: relative;
    background: #00aabb;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: .3em;
    padding: 5px;
    display: inline-block;
    top: 5px;
}


/* enable absolute positioning */

.coverage_overlay .inner-addon {
    position: relative;
    top: 3px;
    border: 1px solid #dadada;
}

.coverage_overlay .right-addon input {
    padding: 10px 10px;
    height: 40px;
}

.coverage_overlay .search-box {
    height: 30px !important;
    background: #f5f5f5;
}

.coverage_overlay .header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    color: black;
}

.coverage_overlay .apply-icon {
    position: absolute;
    top: 3px;
    right: 0;
    cursor: pointer;
    width: 22px;
    height: 22px;
}

.coverage_overlay .close-icon {
    float: right;
    position: relative;
    top: -12px;
    left: 70px;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.coverage_overlay .body {
    position: relative;
    margin-top: 30px;
    max-height: 800px;
    overflow: auto;
    padding-bottom: 80px;
    padding-bottom: 80px;
    height: inherit;
}

.mat-tooltip {
    font-size: 12px !important;
}

.coverage_overlay .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #3f51b5 !important;
}

.view_detailTypeContainer.collapsed #confirm_button.downloadButton,
.detailTypeContainer.collapsed #confirm_button.downloadButton {
    background: url(../images/HierarchyImages/reportDownload.svg) no-repeat !important;
    background-size: 29px 29px !important;
    float: right !important;
    height: 29px !important;
    width: 29px !important;
    margin: 6px 15px !important;
}

.view_detailTypeContainer.expanded #confirm_button.downloadButton,
.detailTypeContainer.expanded #confirm_button.downloadButton {
    background: url(../images/HierarchyImages/reportDownload.svg) no-repeat !important;
    background-size: 29px 29px !important;
    float: right !important;
    height: 29px !important;
    width: 29px !important;
    margin: 6px 15px 6px 15px !important;
}


/* CSS for calendar - year and month navigator */

.ui-datepicker select.ui-datepicker-month {
    margin-right: 1.25em !important;
}

.tabBody .detailsContainer .ul .li .attributeValueContainer select.nodeTypeDropDown {
    height: 20px !important;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: .125em 0;
    vertical-align: middle;
    width: 40% !important;
}

.ui-datepicker select.ui-datepicker-month {
    width: 47% !important;
}q

#userDetailsValueContainer .dropdown-list {
    margin-top: 0 !important;
}

/*horizontal scroll fix*/

.attributeValueContainer .ui-datepicker {
    left: -120px !important;
    top: auto !important;
}

#detailsValueContainer {
    padding: 0 !important;
}

.cdk-overlay-pane {
    /* background-color: transparent !important;
    min-width: 325px !important; */
    transform: translateX(0px) translateY(26px) !important;
}

.mat-select-panel {
    min-width: 100% !important;
}

.daFont {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: bold;
    float: left;
    margin-bottom: 24px;
}

.templateFile #choose_file {
    display: block !important;
}

::ng-deep .createHierarchyStepper .mat-step-header .mat-step-icon {
    background-color: grey !important;
}

::ng-deep .createHierarchyStepper .mat-step-header .mat-step-icon-selected {
    background-color: #508DCA !important;
}

::ng-deep .createHierarchyStepper .mat-step-label.mat-step-label-active .mat-step-text-label {
    color: grey !important;
}

.uploadButton {
    float: right;
    margin-top: 15px;
}

.versionTable {
    margin-top: 25px;
    margin-bottom: 20px;
}

#matHeader {
    border-top: 1px solid #ddd !important;
}

.mat-expansion-panel {
    box-shadow: none !important;
    border: 1px solid #ddd;
    border-top: none !important;
}

#matHeader .mat-expansion-panel-header {
    height: 35px !important;
    color: #000 !important;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    cursor: default !important;
}

.mat-expansion-panel-header {
    color: #5A5A5A !important;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
    height: 35px !important;
}

.eventHistory th{
    color: #000 !important;
    font-family: "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.eventHistory {
    color: #5A5A5A;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
}

#optimizerNote {
    float: left;
    margin-top: 10px;
    color: red;
    font-size: 14px;
    font-family: 'Helvetica Neue', sans-serif;
}

.admin_typeContainer .typesListArea ul li .typeText {
    padding: 10px 15px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 14px;
    float: left;
    width: 100%;
    color: #6D6660 !important;
    font-weight: 500;
}

#infiniteScroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#infiniteScroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 3px grey; 
    border-radius: 6px;
}
 
#infiniteScroll::-webkit-scrollbar-thumb {
    background-color: #aaa; 
    border-radius: 6px;
}


.selectFilter {
    height: 30px;
    width: 95%;
    border: 1px solid #dadada;
    border-radius: 2px;
}

.manufacturerFilter {
    float: left;
    width: 20%;
    margin-top: -5px;
    margin-bottom: 15px;
}

.messageContainer {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.filterResultEmpty {
    color: red;
    font-size: 14px;
    font-family: 'Helvetica Neue', sans-serif;
}

.selectOption {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 12px;
    color: #000000;
    margin-bottom: 25px;
}

.selectVersion {
    height: 35px;
    width: 25%;
    border: 1px solid #dadada;
    border-radius: 2px;
    background-color: #FFFFFF;
    margin-top: 42px;
}

.exceptionDiv {
    float: right;
    padding: 8px;
}

.exceptionFilter {
    width: 20%;
    float: left;
    margin-bottom: 20px;
    caret-color: transparent !important;
}

.exceptionFilter .multiselect-dropdown .dropdown-btn {
    border: 1px solid #dadada !important;
}

.exceptionFilter .multiselect-dropdown .dropdown-list {
    border: 1px solid #dadada !important;
    margin-top: 0;
    box-shadow: none;
}

.exceptionInput {
    border: none !important;
    box-shadow: none !important;
}

#exceptionSave {
    color: white;
    float: right;
    background-color: #508DCA;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-right: 10px;
}

#exceptionInfiniteScroll {
    max-height: 298px;
    overflow-x: auto;
    margin-bottom: 20px;
}

#exceptionInfiniteScroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#exceptionInfiniteScroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 3px grey; 
    border-radius: 6px;
}

.exceptionTable th{
    position: sticky;
    top: -1px;
    background: white;
}
 
#exceptionInfiniteScroll::-webkit-scrollbar-thumb {
    background-color: #aaa; 
    border-radius: 6px;
}

#attrError {
    color: red; 
    padding-left: 5px;
    padding-top: 5px;
    margin-bottom: 0px;
}

#rulePage .mat-horizontal-content-container {
    padding: 0 0 24px 24px !important;
}

.ruleNameDisplay {
    margin-bottom: -30px;
}

.rowContainer {
    width: 100%;
    height: 50px;
}

.adminPageContainer {
    width: 20%;
    float: left;
    margin-top: 10px;
}

.pageContainer {
    width: 25%;
    float: left;
    font-size: 18px;
    border-radius: 5px;
    cursor: default;
    caret-color: transparent;
}

.lastPageContainer {
    width: 39%;
    float: left;
    font-size: 18px;
    border-radius: 5px;
    cursor: default;
    caret-color: transparent;
}

.labelText {
    width: 140px;
    height: 35px;
    padding-top: 6px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    background-color: #337ab7;
    color: #fff;
    border-radius: 5px;
}

.lastLabelText {
    width: 140px;
    height: 42px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    background-color: #337ab7;
    color: #fff;
    border-radius: 5px;
}

.arrowContainer {
    width: 18%;
    float: right;
    margin-top: -46px;
    margin-left: 20px;
    margin-right: 14px;
}

.lastArrowContainer {
    width: 18%;
    float: right;
    margin-top: -48px;
    margin-left: 10px;
    margin-right: 14px;
}

.r1 {
    width: 30px;
    margin-top: -18px;
    margin-right: 25px;
    border-top: 2px solid #337ab7;
}

.r2 {
    width: 784px;
    float: right;
    margin-top: 0px;
    margin-right: 55px;
    border-top: 2px solid #337ab7;
}

.r3 {
    width: 30px;
    margin-top: -18px;
    margin-right: 25px;
    border-top: 2px solid orangered;
}

.r4 {
    width: 68%;
    float: right;
    margin-top: 0px;
    margin-right: 55px;
    border-top: 2px solid orangered;
}

.r5 {
    width: 485px;
    float: right;
    margin-top: 0px;
    margin-right: 73px;
    border-top: 2px solid green;
}

.v1 {
    height: 50px;
    float: right;
    margin-top: -22px;
    margin-right: 25px;
    border-left: 2px solid #337ab7;
}

.v2 {
    height: 40px;
    float: left;
    margin-top: -20px;
    margin-left: -27px;
    border-left: 2px solid #337ab7;
}

.v3 {
    height: 42px;
    float: right;
    margin-top: -22px;
    margin-right: 25px;
    border-left: 2px solid orangered;
}

.v4 {
    height: 64px;
    float: left;
    margin-top: 8px;
    margin-left: 65px;
    border-left: 2px solid green;
}

.v5 {
    height: 42px;
    float: left;
    margin-top: -16px;
    margin-left: -27px;
    border-left: 2px solid green;
}

.subContainer1 {
    width: 54%;
    font-size: 12px;
    margin-top: -17px;
    margin-left: 16px;
}

.subContainer2 {
    width: 38%;
    font-size: 12px;
    margin-top: -17px;
    margin-left: 130px;
}

.subContainer3 {
    width: 18%;
    font-size: 12px;
    float: left;
    margin-top: -10px;
    margin-left: -28px;
    text-align: center;
}

.frontArrow {
    float: left;
    margin-top: -2px;
    margin-left: -30px;
}

.upArrow {
    float: right;
    margin-top: -27px;
    margin-right: -12px;
}

.lastFrontArrow {
    float: left;
    margin-top: 4px;
    margin-left: -30px;
}

div.blueArrow:after {
    content:' \27A1';
    font-size: 40px;
    color:#337ab7;
}

div.greenArrow:after {
    content:' \27A1';
    font-size: 40px;
    color: green;
}

div.orangeArrow:after {
    content:' \27A1';
    font-size: 40px;
    color: orangered;
}

.frontArrow h2:after {
    content: ' \279D';
    font-size: 30px;
    color: #337ab7;
    display: inline-block;
    transform: rotate(0deg);
}

.upArrow h2:after {
    content: ' \279D';
    font-size: 26px;
    color: orangered;
    display: inline-block;
    transform: rotate(-90deg);
}

.lastFrontArrow h2:after {
    content: ' \279D';
    font-size: 30px;
    color: green;
    display: inline-block;
    transform: rotate(0deg);
}

#lookupListBtn {
    background-color: #508dca;
    color: #FFF;
    font-weight: 400;
    letter-spacing: 1px;
    width: 160px;
    height: 35px;
    background-image: none;
}

#accountLevel tbody tr td, #nodeLevel tbody tr td, 
#allocation tbody tr td, 
#territoryQuota tbody tr td, #accountQuota tbody tr td,
#accountUpload tbody tr td, #employeeUpload tbody tr td {
    max-width: 100% !important;
    padding: 0px !important;
    border-bottom: 1px solid #6563;
    text-align: center;
}

#nodeAccount tbody tr td, #nodeAccountDetails tbody tr td,
#accountRequest tbody tr td, #accountReview tbody tr td,
#accountTreeList tbody tr td {
    max-width: 100% !important;
    padding: 0px 0px 0px 5px !important;
    border-bottom: 1px solid #6563;
}

#accountLevel .k-grid-table, #nodeLevel .k-grid-table, 
#allocation .k-grid-table, 
#territoryQuota .k-grid-table, #accountQuota .k-grid-table {
    width: 100% !important;
}

#allocation tbody td.k-state-selected, #allocation tbody tr.k-state-selected>td,
#allocation tbody tr.selectedRow {
    background-color: #CADDEF !important;
}

#territoryQuota thead tr th:first-child, #accountQuota thead tr th:first-child,
#accountUpload thead tr th:first-child, #employeeUpload thead tr th:first-child {
    max-width: 4px !important;
}

#accountQuota tbody tr td.k-command-cell:first-child {
    max-width: 4px !important;
    padding: 0px 7px 0px 7px !important;
}

#territoryQuota tbody tr td.k-command-cell:first-child {
    max-width: 4px !important;
    padding: 0px 6px 0px 4px !important;
}

.k-grid-norecords {
    max-width: 100% !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}

#accountUpload tbody tr td.k-command-cell:first-child, #employeeUpload tbody tr td.k-command-cell:first-child {
    max-width: 4px !important;
    padding: 0px 7px 1px 12px !important;
}

#clearFilter {
    color: #656565;
    margin-top: 10px;
    float: right;
    text-decoration: underline !important;
}

#uploadQuotaDropdown {
    margin-left: -10px;
    padding-bottom: 40px;
}

#bulkQuotaUpload {
    float: left;
}

.bulkQuotaUploadContainer {
    margin-top: -30px;
}

#fileQuotaInput {
    display: block !important;
    margin-top: 15px;
}

.bulkQuotaUploadContainer .saveButton {
    height: 40px;
    width: 100%;
    margin-top: 45px;
}

#allocationContainer {
    margin-bottom: 8px;
    padding-left: 1px;
    margin-top: 10px;
    font-weight: bold;
}

#allocationContainer1 {
    margin-bottom: -8px;
    margin-top: 50px;
}

#accountLevel, #nodeLevel, #allocation, #territoryQuota, #accountQuota {
    width: 100%;
    margin-top: 20px;
}

#accountLevel tbody tr td div input, #nodeLevel tbody tr td div input, 
#allocation tbody tr td div input, 
#territoryQuota tbody tr td div input, #accountQuota tbody tr td div input,
#accountUpload tbody tr td input, #employeeUpload tbody tr td input {
    padding: 5px 5px 5px 10px !important;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: none;
    margin-top: 0px;
    width: 100%;
    height: 25px;
}

#nodeAccount tbody tr td.k-command-cell, #nodeAccountDetails tbody tr td.k-command-cell,
#accountRequest tbody tr td.k-command-cell, #accountReview tbody tr td.k-command-cell,
#accountTreeList tbody tr td.k-command-cell {
    padding: 3px 5px 3px 10px !important;
    height: 10px !important;
}

#accountTreeList tbody tr td button, #nodeAccountDetails tbody tr td button {
    width: 18px;
    height: 18px;
}

#accountLevel tbody tr td div p, #nodeLevel tbody tr td div p, 
#allocation tbody tr td div p, 
#territoryQuota tbody tr td div p, #accountQuota tbody tr td div p {
    padding: 3px 5px 5px 10px !important;
    margin-bottom: 0px;
    width: 100%;
    height: 25px;
}

#accountLevel tbody tr td div .k-dropdown .k-dropdown-wrap, #nodeLevel tbody tr td div .k-dropdown .k-dropdown-wrap,
#allocation tbody tr td div .k-dropdown .k-dropdown-wrap, 
#territoryQuota tbody tr td div .k-dropdown .k-dropdown-wrap, #accountQuota tbody tr td div .k-dropdown .k-dropdown-wrap {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    height: 25px;
}

#lookup_download {
    background: url(../images/HierarchyImages/reportDownload.svg) no-repeat;
    background-size: 29px 29px;
    float: left;
    height: 29px;
    width: 29px;
    margin: 30px 0px 0px 25px;
}

.scaleLabel {
    width: 576px;
    height: 20px;
    margin-top: -20px;
}

.scaleLabelHigh {
    width: 92%;
}

.scaleLabelLow {
    width: 5%;
    float: right;
    margin-top: -20px;
}

#quotaTypeTextArea {
    border: 0.5px solid #508DCA !important;
    box-shadow: none !important;
    height: 24px;
    color: #000;
    letter-spacing: 0.5px;
    font-size: 15px;
}

#quotaTypeCheckbox {
    height: 25px;
    margin-left: 12px;
}

#quotaTypeIcon {
    margin-top: 6px;
    margin-left: 4px;
}

#quotaTypeSave {
    width: 39%;
    float: right;
    margin-top: 25px;
}

.createManageQuotaStepper .mat-horizontal-stepper-header-container {
    white-space: nowrap;
    display: flex;
    align-items: center;
    width: 80%;
    height: 72px;
}

.createManageQuotaStepper .mat-step-header{
    padding: 0 24px;
}

.createManageQuotaStepper .mat-horizontal-content-container {
    overflow: hidden;
    padding: 0;
}

#manageQuota {
    margin-top: 25px;
    padding-left: 0;
    padding-right: 0;
}

#createManageQuotaDropdown .multiselect-dropdown .dropdown-btn .dropdown-down {
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

#createManageQuotaDropdown .multiselect-dropdown .dropdown-btn .dropdown-up {
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

#createManageQuotaDropdown .multiselect-dropdown .dropdown-btn {
    padding: 6px 1px 6px 15px;
}

#createManageQuotaDropdown .multiselect-dropdown .dropdown-btn:focus {
    outline-style: none;
    box-shadow: none;
    border-color: #508DCA;
}

#createManageQuotaDropdown .multiselect-dropdown .dropdown-list {
    position: relative;
    margin-top: 0;
    box-shadow: none;
}

#manageQuotaLabel {
    margin-top: 8px;
}

#manageQuotaDiv {
    margin-top: 35px;
}

#manageQuotaBtn {
    background-color:#508DCA;
    color:white;
    margin: 30px 15px 0 0;
    float: right;
}

#manageQuotaError {
    color: red;
    margin-top: 8px;
    margin-left: -12px;
}
.selectUploadTypeMarg {
    margin-top: 20px;
    margin-left: 5px;
}

#manageQuotaErrorList {
    margin-top: 20px;
    margin-left: 15px;
}

#manageQuotaErrorList table {
    width: 62%;
}

#manageQuotaErrorList table tr th {
    color: red;
}

.noBordr{
    border:none !important;
}

#quotaAllowedCheckbox {
    height: 25px;
    /* margin-left: 77px; */
}

#quotaSummaryDiv {
    margin-top: 35px;
    margin-bottom: 35px;
}
.contentClass{
    margin:20px;
}