body{ background: #F0F0F0; padding-left: 67px}
 h1,h2,h3, h4, h5, h6{ font-weight: normal}
 ul{ margin: 0; padding: 0px}


 .loader{    position: fixed;height: 100%;    width: 100%;    z-index: 99;top: 0;}
 .marginTop10{ margin-top:10px}
 .marginTop20{ margin-top:20px}
 .marginTop30{ margin-top:30px}
 .marginTop40{ margin-top:40px}
 .marginTop45{margin-top:45px}
 .marginTop50{ margin-top:50px} 
 .marginTop90{ margin-top:90px}
 .noPadngTpBtm{ padding-top:0px!important;padding-bottom:0px!important }
 .colorGray{ color:#969696}
 .colorWhite{ color:#fff}
 .pullRight{ float: right}
 .pullLeft{ float: left;}
 .textRight{ text-align: right}
 .clearfix,  .clearfix:after{ clear: both; content: ''; display: block}
 .noBorder{ border: 0px!important}
 button{text-transform: uppercase!important; font-weight: normal!important }

 .ui.primary.button, .ui.primary.buttons .button{ background:#0065B3; ; border: 1px solid transparent; font-weight: normal; transition: all 0.3s} 
 .ui.primary.button:hover{ background:#fff; border: 1px solid #0065B3; color: #0065B3}
 .ui.selection.dropdown, .ui.input>input{ border-radius: 2px!important}
 .ui.dropdown>.dropdown.icon:before{    content: "\e907";    font-family: 'icomoon' !important; font-size:10px;    position: relative;    top: -2px;  }
 .ui.button{ background:#777; border: 1px solid transparent; color: #fff; border-radius: 2px; transition: all 0.3s}
 .ui.button:hover{background:#fff; border: 1px solid #777;}
 [data-tooltip][data-inverted]:after, [data-inverted][data-position="right center"][data-tooltip]:before, [data-inverted][data-position~=top][data-tooltip]:before, [data-inverted][data-position="left center"][data-tooltip]:before{ background: #3B3A3A; font-size: 11px; z-index: 9;}
 input[type=text]{ border-radius: 2px!important}
 .ui.dimmer{ background-color:rgba(0, 0, 0, 0.5) }
 .hidden{    display: none!important;}
 /* .ui.dropdown:not(.button)>.default.text{    color: rgb(0, 0, 0);} */
 .ui.form textarea{ border-radius: 2px}
 .ui.attached:not(.message)+.ui.attached.segment:not(.top){    border-top: 1px solid rgba(34,36,38,.15);}
 [data-tooltip][data-inverted]:after, [data-inverted][data-position="right center"][data-tooltip]:before,[data-inverted][data-position="top center"][data-tooltip]:before,[data-inverted][data-position="left center"][data-tooltip]:before { background: #777}
 .ui.popup.inverted,  .ui.popup.inverted:before{background: #777!important}
 .ui.bottom.center.popup:before{ box-shadow:-1px -1px 0 0   #d4d4d5}
 .ui.selection.dropdown:focus{    border-color: #94ccf7;}
 
 
 .ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before{background: none!important; border: 1px solid #BDBDBD;}
 .ui.toggle.checkbox .box:hover::before, .ui.toggle.checkbox label:hover::before{   border: 1px solid #797979;}
 .ui.toggle.checkbox input:checked~.box:before, .ui.toggle.checkbox input:checked~label:before{ background: none!important; border: 1px solid #0065B3;}
 .ui.toggle.checkbox input~.box:after, .ui.toggle.checkbox input~label:after{    width: 14px; height: 14px;top: 3px;left: 4px;    background:#BDBDBD;}
 .ui.toggle.checkbox input:checked~.box:after, .ui.toggle.checkbox input:checked~label:after{background: #0065B3;}

 .leftIconMenu{ position: fixed; z-index: 99; left: 0px;top: 0; height: 100%; overflow:hidden;   background:#3B3A3A; width: 57px;  
  transition: all 0.5s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;}
 .leftIconMenu li{ display: block; list-style: none;  overflow:hidden;  }
 .leftIconMenu li a{ font-size:13px; padding: 15px 17px; display: block; color: #fff;opacity: 0.5;  }
 .leftIconMenu li i{ font-size: 22px;display: inline-block;    vertical-align: middle;  }
 .leftIconMenu li a.active{   opacity: 1;  text-shadow:0px -50px 0px  #FDBD2E }   
 .leftIconMenu li:hover a.active { color: #FDBD2E}
 
 .leftIconMenu li a .hidden{ transition: none}


 .leftIconMenu li.logo a,   .leftIconMenu li.logo i{  opacity: 1!important; white-space: nowrap; }
 .leftIconMenu li.logo a{    padding: 14px 7px 5px;}
 .leftIconMenu li.logo i span{ font-size: 35px; }
 .leftIconMenu li.logo{ margin: 0px; text-align: center;}
 /* .leftIconMenu:hover .logo i span{font-size: 45px;}   */



 .leftIconMenu li .text{  text-shadow:0px -50px 0px rgba(255, 255, 255, 1); transition:all 0.6s; transform:translateY(100%) translateZ(0); transition-delay:all 0.25s;     white-space: nowrap; }
 .leftIconMenu li:hover .text{  text-shadow:0px -40px 0px rgba(255, 255, 255, 0); transform:translateY(0%) translateZ(0); opacity: 1;}
 


 .avatar{ background: #525252; text-align: center; white-space: nowrap;   transition: all ease-in-out 0.5s; margin-top: 10px; height: 60px;overflow: hidden;transition:  height 0.15s ease-out; }
 .avatar img{ width: 40px; transition: width ease-in-out 0.2s} .leftIconMenu .avatar a{ opacity: 1!important; padding: 9px 10px;}
 .avatar a{cursor: default;} 
 /* .leftIconMenu:hover .avatar img{width: 40px}   */
  .leftIconMenu:hover  .avatar{ transition:  height 0.25s ease-in; height: 100px;   } 

 .middleNav{ position: absolute; top: 190px;overflow: hidden;  height:calc(100vh - 242px); width: 100%}
 .middleNav ul{ position: relative; overflow: auto ;}
 .middleNav:hover{overflow-y: auto;}
 
.middleNav{
    scrollbar-base-color: #3b3a3a;
    scrollbar-face-color: #525252;
    scrollbar-3dlight-color: #3b3a3a;
    scrollbar-highlight-color: #3b3a3a;
    scrollbar-track-color: #3b3a3a;
    scrollbar-arrow-color: #3b3a3a;
    scrollbar-shadow-color: #3b3a3a;
    -ms-overflow-style: -ms-autohiding-scrollbar; 
  }


 
.leftIconMenu:hover, .leftIconMenu:hover  .gotoMyHcl{  width: 220px} 
.hide{  position: relative;  opacity: 0; vertical-align: middle;  } 
.middleNav .hide{left:20px;}
.leftIconMenu:hover .hide{ opacity: 1;}


 .gotoMyHcl{  position: fixed; bottom: 0; width: 57px; background:#716e6e;    transition: all 0.5s; }  
 .gotoMyHcl i{ margin-right: 10px}

 
.breadCrumb { font-size: 13px; color: #777; margin-bottom: 0px; position: relative; z-index: 9;}
.breadCrumb .active{ font-size:18px; color: #000}
.brDvdr{ display: inline-block; padding: 0 5px;}
.breadCrumb  a{color:#777}.breadCrumb  a:hover{color:#999}


 .hidden{margin-left: 5px;  transition: all 0.5s; white-space: nowrap;opacity: 0;  display: none;  }
 

 .rightContainer{ max-width:1240px;  margin:15px auto 0 30px !important ;  min-height: calc(100vh - 43px);}
 /* .rightContainer{ -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; padding-left: 85px;     min-height: calc(100% - 43px);padding-right: 30px;  min-width: 1180px; margin-top:20px} */
 .push{-webkit-transform: translate3d(150px, 0, 0); transform: translate3d(150px, 0, 0);}

 .banner{ margin: 0; position: absolute; right: 0; top:0; z-index: 99; display: none}
 /* .banner{ position: relative; margin: 15px 0} */
.cloaseBanner{ position: absolute; right: 30px; top:30px; color: #fff; font-size: 15px; cursor: pointer;}

 .middleChip{ margin-top: 10px!important;     padding: 11px!important;}
 /* .middleChip a{ color: #222; font-size: 18px} */
 .middleChip a i{font-size: 18px; color: #222;}
 .middleChip a:hover{ color: #777}
 .middleChip .row{ padding: 7px 0!important}
 .ui.segment, .ui.raised.segment{    border-radius: .2rem; box-shadow:0px 2px 5px rgba(6, 30, 49, 0.1) }
 .label.customChip1{ background:rgba(0, 101, 179, 0.21); border-radius: 15px; font-size: 14px; color: #222; font-weight: normal;    padding: 7px 16px; }
 .middleChip p{ margin: 10px 0; line-height: 25px}
 
 .inlineIcon li{ display: inline-block; vertical-align: middle; padding: 0 10px;}

 .alertText{ text-align: right}
 .alertText span{ display: inline-block; border-radius: 12px; border:1px solid #FF8076; background: #FFDDDB; padding: 2px 6px; color: #F02919; font-size: 11px; font-style: italic;}
 
 .middleContainer{ margin-top:10px}

 .smHdr{ margin: 0; } .smHdr i{ color: #4B4B4B; font-size: 15px}
.threeCard h1{ color: #222; font-size: 35px; font-weight: normal; margin-bottom:0 }
.threeCard p{ color: #afadad; font-size: 12px; white-space: nowrap}
.threeCard{ cursor: pointer;}

.custmPadding{ padding: 0.97rem!important}
 
 /* .threeCard .column{ padding: 10px 5px!important} */
.blueIcon{ color: #5886DC; margin-right:5px; font-size: 15px}
.blueIconBg{ background: #5886DC; color: #fff; text-align: center; }
 
.greenIcon{ background: #6EC149; color: #fff; text-align: center}
.redIcon{ background: #FF6060; color: #fff;text-align: center}
.orangeIcon{ background: #FFB660; color: #fff;text-align: center}
.round{ width: 14px; height: 14px; border-radius: 100px; display:inline-block; font-size: 8px; margin-right:5px;    line-height: 15px;}
 
.highcharts-column-series rect.highcharts-point{ stroke: none!important}

.highcharts-legend{ display: none}
.legedInline li{ display: inline-block; color: #777; font-size: 12px; padding: 0 14px; vertical-align: middle}
 
.redDot{ width: 7px; height: 7px; border-radius: 100%;; display: inline-block; background: #E25B45; margin-right:2px}
.lightRedDot{ width: 7px; height: 7px; border-radius: 100%;; display: inline-block; background:#F09484; margin-right: 2px}
.greenDot{ width: 7px; height: 7px; border-radius: 100%;; display: inline-block; background: #ADC965; margin-right: 2px}
.lightGrayDot{ width: 7px; height: 7px; border-radius: 100%;; display: inline-block; background: #ccc; margin-right: 2px}
.grayDot{ width: 7px; height: 7px; border-radius: 100%;; display: inline-block; background: #999; margin-right: 2px}
.blueDot{ width: 7px; height: 7px; border-radius: 100%;; display: inline-block; background:#5E89D5; margin-right: 2px}
.lightOrangeDot{ width: 7px; height: 7px; border-radius: 100%;; display: inline-block; background:#FFBB45; margin-right: 2px}
.llOrangeDot{ width: 7px; height: 7px; border-radius: 100%;; display: inline-block; background:#F5D3AC; margin-right: 2px}
 
.marginMinus{     position: relative;    margin-top: -20px; margin-bottom: 5px}
.lineHt0{ line-height: 0px}
.borderLeft{ border-left: 1px solid #f1f1f1}
.changeView, .gridView, .changeView2, .gridView2{ margin-right: 10px; cursor: pointer} .changeView i, .gridView i{ font-size: 13px}
.graphAll{width: 100%; height: 300px; }
.graphAll2{width: 100%; height: 235px; }
 .highcharts-root text{ text-align: left}
 .subHdr{ font-size: 11px; color:#777; font-style: italic; margin-top:4px; font-weight: normal}
 
 .customSpacingridView .gridViewTable ,  .customSpacingridView .chartView  {  padding-right: 40px!important;    white-space: nowrap;}
 
 .customSpacingridView  .ui.grid.noMargin{    margin-top: -1rem!important;    margin-bottom: -1rem!important;}

 .gridViewTable thead, .gridViewTable .ui.basic td,  .gridViewTable2 thead, .gridViewTable2 .ui.basic td{ text-align: center}
.gridViewTable .ui.basic td:first-child, .gridViewTable2 .ui.basic td:first-child{ text-align: left;color: #777; font-size: 12px}
.gridViewTable thead th, .gridViewTable2 thead th  { color: #777!important; font-size: 12px}


 
 .footer{ position: relative; bottom: 0px; left: -4px;  text-align: center; background: #fff; padding:12px 0; width:100.5%;  }
 .footer img{ width: 400px;}



 /* EFFECTS */
.threeCard .segment, .hoverCard{    transition: all .15s ease-out;}
 .threeCard .segment:hover {  box-shadow: 0 30px 75px -15px rgba(50, 50, 93, 0.3), 0 25px 40px -20px rgba(0, 0, 0, 0.1); z-index: 9;-webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}
 
.threeCard .segment:before{top: 0px;  left:0px; }
.threeCard .segment:after{bottom: 0;     right:0px;}
    .threeCard .segment::before  { border: 2px solid transparent;  width: 0;  height: 0;    content: ''; position: absolute; z-index: -1;  }
    .threeCard .segment:hover::before { border-top-color: #5886DC;   transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;  }
    
    .threeCard .segment:hover::before { width: 100%;  height: 100%; }

    .hoverCard:hover{ box-shadow: 0 30px 75px -15px rgba(50, 50, 93, 0.3), 0 25px 40px -20px rgba(0, 0, 0, 0.1); z-index: 9;-webkit-transform: translateY(-5px);
      transform: translateY(-5px);}

 button{ position: relative; overflow: hidden;}
 .ripple {  width: 0;  height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transform: scale(0);  position: absolute;  opacity: 1; }
  .rippleEffect {  animation: rippleDrop .6s linear; }
  
  @keyframes rippleDrop { 100% { transform: scale(2);   opacity: 0; } }

  /*  */
 
  .fixButton{ position: sticky; background: #f0f0f0!important; position: -webkit-sticky; z-index:2;  bottom: 0px;}
  .padngtbBtm{ padding: 6px 0;}
  .tabsCustom{ position: relative; margin: 0px!important; }
  .tabsCustom.ui.text.menu  .item{border-bottom: 3px solid transparent;    padding: .92857143em 1.42857143em; margin-bottom: -1px}
  .tabsCustom.ui.text.menu  .active.item{   color: #0065B3; font-weight: normal;  border-bottom: 3px solid #0065B3;    align-items: baseline;  }
  .tabsCustom.ui.tabular.menu .dropdown .active.item {background:none; border: none}
  .tabTable th{ font-size: 11px; color: #777!important; font-weight: normal!important;}
    /* .tabTable  th{ position: sticky; background: #fff!important; position: -webkit-sticky; z-index:2;  top: 0px;  } */
    .tabTable  th:first-child{z-index: 3;}
  .tabTable ol{ padding-left: 20px}
  .tabTable li{ padding: 0 0 2px;}
  .tabTable{ font-size: 13px!important;     margin: 0px!important;}
  .tabTable td{ vertical-align: top; position: relative;}
  .tabTable td:first-child{ font-size: 12px}
  .tabTable .ui.selection.dropdown{min-width: 100%;    padding: 7px 7px;    min-height: 0px;}
  .tabTable .ui.selection.dropdown .dropdown.icon{    padding: .7em;}
  .tabTable .ui.input>input{ padding: 0.45em 0.5em;    min-height: 0px;}
  .tabTable .ui.toggle.checkbox{    margin-top: 5px;}
  .tabTable.ui.basic.table td{ vertical-align: middle}
  .borderLeftTable tr:hover,  .borderLeftTable2 tr:hover{ background: #fcfeff}
  .dashedBorder{ border: 1px dashed #D2D2D2; margin-left: 10px; padding: 4px 16px;    vertical-align: top; cursor: pointer;}
  .dashedBorder i{ color: #9e9e9e;}
  .copyHistory, .dashedBorder{ display: inline-block!important}
  .copyHistory p{ font-size: 10px; font-style: italic; color: #0065B3; margin-top:5px; position: absolute; cursor: pointer; display: none}
  .minHt{ max-height: 673px; overflow: auto;} 

  .rightMenu{ position: absolute; right: 0; top:10px }
  .rightMenu a{ display: inline-block!important; padding: 0 5px!important; vertical-align: middle;font-size: 12px}
  .rightMenu a:first-child,   .rightMenu2 .small{color: #828282!important; font-style: italic;   }
  .rightMenu2  a:first-child{color: #0065B3!important;font-style: normal;   }

  .ui.text.menu .rightMenu .active.item{ border: none}
 

  .iconFlag{ margin-left: 5px; color: #F02919; font-size: 12px}
  .marginLeft5{ margin-left: 5px}
 
  .tootltip{ cursor: pointer; font-size: 13px;    vertical-align: middle; }
  .ui.button.tooltip {background: none; padding: 5px; vertical-align: middle; color:#777; border: 0px}
  .minwdthBtn{ min-width: 100px;}
  
  .uloadModal.ui.basic.modal{background: #fff; border-radius: 4px;    width: 450px;}
  .uloadModal.ui.basic.modal>.header{ color: #2196F3; font-size: 16px; font-weight: normal; border: none;     padding: 20px 0 0 20px;}
  .uloadModal.ui.basic.modal>.close{color: #777; font-size: 12px; right: 0px; font-weight: bold}
  .uloadModal button{ margin-bottom: 15px!important}


  .dz-message{ text-align: center; border: 1px dashed #D2D2D2; padding: 4px 0; border-radius: 2px;  margin:20px;  min-height:80px; vertical-align: middle; color: #a9a9a9;font-family: 'RobotoLight';font-size: 16px; cursor: pointer;}
  .dz-message span .span{color: #2196F3;}
  .dz-message span {  top:5px; position: relative;}
  .dz-message span  p{    font-size: 26px;    margin-bottom: 5px;}

 .viewUpload{    color: #444;    padding:0 20px;}
 .dz-details{ float: left;    text-decoration: underline;}
 .dz-remove{ float: right; color: #333}
 .dz-preview{ margin-bottom:20px}
 .dz-preview:before,  .dz-preview:after{ clear: both; display: block; content: ''}

 .customMessage{ width: 500px;  z-index: 99; margin:auto;left:0; right:0;  text-align: left; background: #3b3a3a; border: 1px solid #717171;  border-radius: 4px; bottom: 112px;  padding: 19px;  position: absolute; border: 0;}
 .customMessage p{ color: #FDBD2E}
 .successIcon{ color: #FDBD2E;display: inline-block;    font-size: 30px;}
 .customMessage .icon-Close{ cursor: pointer;color: #FDBD2E;}
 .textAlignRight{ text-align: right}

 
.schedulePopup, .sendRequestPopup, .successPopup{    position: fixed;  width: 100%;  height: 100%;  top: 0px ;  left: 0px ; z-index: 9; margin: 0!important}
 
 .successPopup.ui.active.dimmer{    background-color: rgba(0, 0, 0, 0);}
 .ui.successPopup{background-color: rgba(0, 0, 0, 0);}

 /* rightSidebar */
 .widTh450{ width: 450px}
 .widTh400{ width: 400px}
 .widTh300{ width: 300px}
 .widTh335{width: 335px}
 .rihgtSidebar{ position: fixed; right: 0;   top:0; height: 100%; overflow: auto;  z-index: 9; box-shadow: 0 3px 50px rgba(0, 0, 0, 0.35); padding: 20px 25px; background: #fff; font-size: 13px}
 .rihgtSidebar input{ padding:7px!important}
 .rihgtSidebar label{ margin-bottom: 6px;    display: block; font-size: 11px; color: #777}
 .iconInput i{ position: absolute;     right: 8px;    top: 33px;}
 .rihgtSidebar .ui.radio.checkbox{ width: 100%}
 .rowBtm{ border-bottom: 1px solid #e4e3e3; padding: 10px 0 5px; cursor: pointer;}
 .rihgtSidebar .ui.checkbox label, .rihgtSidebar .ui.checkbox span{ font-size: 13px; margin-bottom: 0px}
 .closeRight{ position: absolute; right: 20px; font-size: 12px;     top: 25px; cursor: pointer}

 .delegationPop, .reqgationPop, .meetingPop{ cursor: pointer;}
 .ui.form textarea.textMessage{ border-radius: 2px; border: 1px solid #D9D9D9; padding: 10px; font-size: 13px; height: 200px;}

.delegationDiv h5{ margin-bottom:-10px}
.delegationDiv h3.marginTop50{ margin-top:35px; font-size: 1rem; margin-bottom: 15px}
 
 .ui.cusMsg{ border: 1px solid #D9D9D9; box-shadow: none; font-size: 13px; font-weight: normal;  border-radius: 2px!important;    background: #F5F5F5;}
 .cusMsg i{ font-size: 17px; margin-right: 10px}
 .multiSearch input{ margin: 0px!important; } .reqtionDiv .multiSearch input{ width: 65px!important}
 .multiSearch .dropdown:before{ content:"\e919"!important; font-family: 'icomoon' !important; font-size: 13px!important;    top: 2px!important;}  
 .multiSearch .item:before, .multiSearch.item:after{ content: ''; clear: both; width: 100%}
 .multiSearch.ui.selection.dropdown .menu>.item{ padding: 20px!important;    line-height: 1px;}
 .multiSearch .label .pullRight, .singlSearch  .text .pullRight{ display: none}
 .multiSearch.ui.multiple.dropdown>.label{ background: #E6F0F8; border: 1px solid #0065B3; border-radius: 15px; color: #0065B3; box-shadow: none;font-size: 12px; font-weight: normal}

 .multiSearch.ui.dropdown .menu{ background: #F5F5F5!important; border-radius: 2px;}
 .multiSearch.ui.selection.active.dropdown .menu .item{ border-bottom: 1px solid #E0E0E0}
 .multiSearch .delete{ font-size: 10px!important; opacity: 1!important;}

 /*  */
 .widthMiddle{ float: left;     width: 65%;} 
 .widthMiddle .pullLeft:first-child{width: 33%;}
 .widthMiddle .pullLeft{width: 22%;}
 .widthMiddle p{    white-space: nowrap;  overflow: hidden; text-overflow: ellipsis;}
 .noPdingRt{ padding-right:0px!important }
 .inlineIcon li:last-child{ padding-right: 0px}
 .middleChip .pullRight{  margin-left: auto}
 .alertRed{ color: #F02919; font-size: 11px; position: absolute;right: 14px; font-style: italic; left: 10px; margin-top:2px; line-height: 14px}

 /*  */
 .marginRt30{ margin-right: 30px}
 .noMarginTop{ margin-top:0px!important}
 .noMarginBottom{ margin-bottom:5px!important}
 .noPadding{ padding: 0px!important}
 .borderLeftTable th,  .borderLeftTable td{ padding: 12px 30px!important; vertical-align: middle}
 .approveBorder{ border-left: 3px solid #A0C33A}
 .NonapproveBorder{ border-left: 3px solid #FF2626}
 .PendingBorder{ border-left: 3px solid #999}
.borderLeftTable .textRight{ text-align: right!important}
.borderLeftTable th:first-child, .borderLeftTable td:first-child{ text-align: center!important}

/*  */
.topSection{width: calc(100% - -14px)!important;margin-left:-14px;    margin-top:-14px;    border-radius: 2px;    padding: 10px;  position: relative;}
.topSection:after{ width: 98%; height: 1px; background: #eaeaea; margin: auto; content: ''; display: block;    position: absolute;    bottom: -10px; left: 0; right: 0;}
.topSection .label.customChip1{ margin-right: 27px!important}
.borderGreenLeft{ border-left:3px solid #a4ca54!important;}
.borderRedLeft{ border-left:3px solid #E25B45!important;}

.font40{ font-size: 40px; font-family: 'RobotoLight';   padding-left: 40px!important }
.font40 span{ font-size: 12px;}
.roundGraph{ width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 100%; display: inline-block; margin-right:10px }
.redBg{ background: #E25B45; color: #fff}
.lightRedBg{ background: #F09484; color: #fff}
.greenBg{ background: #ADC965; color: #fff}
.grayBg{ background: #999; color: #fff}
.orangeBg{background: #FBC272; color: #fff}
.lightOrangeBg{background: #F5D3AC; color: #fff}

.barGraph a{ margin: 0} .barGraph i{ font-size: 16px}
.stacked-bar-graph {  height:7px; background: #eee; color:#414042;     margin-top: 14px;  -webkit-animation: w100 1s ease forwards;  animation: w100 1s ease forwards;} 
 
/*   */
@-webkit-keyframes w100 {  from { width: 0%; } to { width: 100%; }  }
@-moz-keyframes w100 {  from { width: 0%; } to { width: 100%; }  }
@-o-keyframes w100 {  from { width: 0%; } to { width: 100%; }  }
@keyframes w100 {  from { width: 0%; } to { width: 100%; }  }

.stacked-bar-graph  span {  display: inline-block;  height:100%;  box-sizing: border-box; float: left;  color: #fff; font-weight: bold;  }
   
.topText{ font-size: 12px; white-space: nowrap;   overflow: hidden; text-overflow: ellipsis;    margin-top: -22px!important;}
.topText .column{    padding-top: 0px!important;    padding-bottom: 5px!important;}

.barGraph .legedInline li{    padding: 0 5px;    margin-top: 4px;}
.barGraph .legedInline li:first-child{ padding-left:0px }

.cutmWdth{    width: 67.5%!important; padding-right: 0px!important}
.cutmWdth .ui.grid{ margin-right: 0px}
.cutmWdth .five.wide.column{ padding-right: 50px!important}

.cutmWdth2{    width: 85.5%!important;}
.cutmWdth2 .column{    padding-left: 40px!important; padding-right: 40px!important; white-space: nowrap;}

.noPaddngRt{ padding-right:0px!important }
.noPaddngLt{ padding-left:0px!important }

.samllTable.hidden{ display: none}
.samllTable{ display: inline-block}
.samllTable table{ border: 0px!important}
.samllTable table td:first-child{ text-align: center!important}
.samllTable .gridView{ position: absolute; right: 0px; cursor: pointer;}

.showMorePop{ cursor: pointer;}
.ui.special p{ margin: 5px 0; font-size: 13px}
.font11{ font-size: 11px}
.doubleBar .stacked-bar-graph{ margin-top:5px}
.doubleBar li:first-child{ padding-left: 0px;}
.doubleBar li {font-size: 14px; margin-top:5px}
.noMargin{ margin: 0px!important}
.noPaddingleftLi li:first-child{ padding-left: 0px}

/*  */
 
.vertcleRound .roundGraph{ display: block; margin: 10px  auto 15px}
.vertcleRound.marginTop20{    margin-top: 25px;}
.verticleGraph .topText, .verticleGraph  .stacked-bar-graph{ margin: 0px}
.verticleGraph .topText .column{ padding: 0px!important}
.verticleGraph .ui.grid{ margin: 0px}
.verticleGraph .legedInline { margin-bottom: 15px}
.verticleGraph .legedInline li:first-child{ padding-left: 0px}
.verticleGraph .legedInline li{ padding: 0 10px}
.verticleGraph .topText{ margin-bottom: 2px!important}
.rightPosition{ position: absolute; right:7px;     margin-top: 7px; z-index: 9;}
.rightPosition i{ font-size: 17px; color: #4B4B4B}
.samllTable th{ font-weight: normal!important}
.samllTable th, .samllTable td{ padding: 7px!important}
.samllTable .ui.table th:first-child{ color: #222;}
.samllTable .ui.table th{ color: #777}

/* FilterCheck */
.smallHdr{ color: #656565; border-bottom: 1px solid #D9D9D9; font-size: 13px; padding: 5px 0; margin: 0px 0 9px}
.multiCheck ul{ margin: 0; padding: 0; display: table; width: 100%}
.multiCheck ul li{ list-style: none; position: relative; display: table-row; cursor: pointer;  }
.multiCheck ul li span{display: table-cell; vertical-align: middle;    }
.multiCheck ul li span:after{ content: ''; display: block; height: 10px; width: 100%;}
.multiCheck .dropdown{    width: 100%;}
.multiCheck ul li:hover, .multiCheck .active{color: #0065B3; font-weight: bold}
 

.infoTable th{ background: #F5F5F5!important; border-radius: 2px!important; border: 0px!important;padding: 10px!important; color: #818181!important; font-size: 12px; font-weight: normal!important}
.infoTable td{ font-size: 13px}
.breadCrumb.icon i{ font-size: 20px; vertical-align: middle; margin-right: 10px}

.filter{color: #4A4A4A; cursor: pointer;}
.filter:hover{ color: #222;}
.filter i{ font-size: 20px}
.filter .ui.floating.label{ z-index: 1; min-width: 18px; min-height: 18px; padding: 0px!important; line-height: 16px; padding: 0!important;    font-size: 10px;}
 


/*  */
 .marginBtm30{ margin-bottom: 30px!important}
 .marginBtm20{ margin-bottom: 20px}
.displayTable{ display: table; width: 100%; }
.displayTable .cell{ display: table-cell;  padding: 0 10px; vertical-align: middle; font-size: 12px}
.displayTable .cell p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width:95%;    position: relative; } 
.displayTable .cell:first-child{ width: 100px}
.displayTable .cell:last-child{  text-align: right; padding-right:0px }
.displayTable .cell:last-child i{ color:#4A4A4A; font-size: 20px }

.activeTolltip[data-tooltip], .activeTolltip[data-position="left center"]:after, .activeTolltip[data-tooltip], .activeTolltip[data-position="right center"]:after   {    -webkit-transform: translateY(-50%) scale(1)!important;
    transform: translateY(-50%) scale(1)!important; visibility: visible}
/* .activeTolltip i{ top:6px; position: relative;} */
.activeTolltip[data-tooltip]:before{-webkit-transform: rotate(45deg) scale(1)!important;  transform: rotate(45deg) scale(1)!important; opacity: 1;visibility: visible; pointer-events: auto;top: 50%;}

.activeTolltip[data-tooltip], .activeTolltip[data-position="left center"]:hover:after, .activeTolltip[data-tooltip], .activeTolltip[data-position="right center"]:hover:after   {    -webkit-transform: translateY(0) scale(1)!important;
        transform: translateY(0) scale(1)!important; visibility: visible}

.firstPop{ padding: 14px 0; text-align: center!important; font-size: 16px!important; width: 478px!important; height: 301px;}
.firstPop img{     height: 130px;margin-bottom: 12px;    margin-top: 12px;}
.ui.modal.firstPop .close{ top:20px; right: 20px;    font-weight: bold; color: #777;    font-size: 12px;    padding: 0;    width: auto;}
.firstPop .ui.secondary.button{    color: #4A4848!important;    box-shadow: 0 0 0 1px #3B3A3A inset!important;     border-radius: 2px;}
.firstPop button{ min-width: 110px; height: 38px;    margin-right: 10px!important;}

.right.aligned .legedInline{ margin-bottom: 20px}

/* DU */
.marginTop80{ margin-top:80px}
.duDrop{ padding: 6px 0} .duDrop .menu{ margin-top: 0px!important}
.addMore{ color: #0065B3; cursor: pointer; border: 0px; margin-top:10px; padding: 0; font-size: 12px; background: none}
.addMore:focus{ outline: 0;}
.flatpickr-input{     border: 1px solid rgba(34,36,38,.15);} .flatpickr-input:focus { outline: none; border-color: #0065B3; color: #0065B3}
.datePickerArrow{ position: relative;}
.datePickerArrow:before{ position: absolute; right: 8px;    top: 12px; content: '\e907'; font-family: 'icomoon';    font-size: 10px;    color: #777;}

.rihgtSidebar .date{ width: 115px} .rihgtSidebar .time{ width: 100%}
.cusBtn .button{ padding: 8px; font-weight: normal;     margin: 0px;}
.ui.button.blueBtn{ background: rgba(0, 100, 178, 0.1); color: #0065B3; border: 1px solid #0065B3}
 .ui.button.graybtn{background: rgba(119, 119, 119, 0.1); color: #777; border: 1px solid #777}
 .lessSpace.ui.horizontal.list>.item{    margin-left: 10px;}

 .smallPop .successIcon{    font-size: 20px;}
 .smallPop  .icon-Close{    font-size: 11px;}

 .stacked-bar-graph.marginTop5{ margin-top:5px;}
 .smallGraph{ font-size: 12px}
 .smallGraph .row:first-child{    padding-bottom:0!important}
 .smallGraph li{    font-size: 13px;}

 #pie{ position: relative ; height:133px; width:162px; z-index: 9;}
 #pie .highcharts-title tspan:first-child{ font-size: 28px!important; color: #222!important; }
 #pie .highcharts-title tspan{ color: #777!important; font-size: 12px!important}
 .PIE .legedInline li{ font-size: 12px; color: #656565}
 .PIE .legedInline li span{ color:  #3B3A3A!important;} 
 
 .borderLeftTable2 th,  .borderLeftTable2 td{ padding: 12px 30px!important; vertical-align: middle}
 .borderLeftTable2 td.textRight{ text-align: right!important}
 .tabGraph .ui.attached.tabular.menu{ border: none}


.glider-slide .ui.segment{ width: 100%}
.Count{position: absolute; right: 0; top:-20px; font-size: 12px; display: block}
#number{ position: absolute; right: 23px;    top: -4px;} 
 
 
 
  .posRel{ position: relative;}

  .midlleBorder{ border-left: 1px solid #ddd; border-right: 1px solid #ddd; height: 250px;}
  .spaceTpBtm10{ padding: 10px 0}

  .lightText{ font-size: 16px;    line-height: 23px; font-family: 'RobotoLight'; text-align: center; margin: 10px 0 0    }
.cardHt .segment{ min-height: 220px}
.cardHt .smallGraph{ margin-top:20px}
.cardHt #pie{margin-top: 27px; }
.cardHt .marginTop20{ margin-top:47px;}

.font12{ font-size: 12px}
.spaceRt{ margin-right: 10px}
.space{ padding: 20px 0 0; color: #777}
.time:focus, .date:focus{ outline: 0}
.drp-buttons{ display: none!important}


.fixed{ top:0; position:fixed; width:auto!important; display:none; border:none; background: #fff!important; z-index: 9; }
.fixed th{ padding: 10px!important;    overflow: inherit!important;}


/* REPORTS */
.findReport.segment{padding: 15px 10px 20px;}
.findReport label{    color: #afadad; font-size: 13px; display: block; margin-bottom: 10px}
.findReport .ui.dropdown .notselected{ color: #afadad;}
.widthYr{ width: 180px}
.widthMonth{ width: 220px}
.repor_Accounts{ width: 296px!important} 
.repor_Accounts .ui.selection.dropdown{ min-width: 100%}
 .reportStage  .ui.button{ text-transform: capitalize!important; padding:10px 12px; margin-right: 10px}
 .reportStage  .ui.button:hover{ background: #fff;border: 1px solid #0065B3;    color: #0065B3;}
 .report_Drop .ui.selection.dropdown {    min-width: 100%;}


 .centerScreen{ text-align: center!important; vertical-align: middle; padding-top: 100px; }
 .centerScreen i{ font-size: 18rem}
 .centerScreen h3{font-size: 2rem; font-family: 'RobotoLight';  color: #0165b3; margin: 20px 0 0; padding: 0}
 .centerScreen h4{font-size: 1.5rem; font-family: 'RobotoLight';  color: #777; margin: 12px 0 0; padding: 0}

 .smallArt{position: relative;      }
 .smallArt i{    position: absolute;    left: -7px;    top: -7px;    font-size: 29px;}
 

/* Download */
.highcharts-button rect, .highcharts-button path{ cursor: pointer;}
.highcharts-menu{     border-radius: 4px; border: 1px solid #cecece!important; padding: 0px!important}
.highcharts-menu-item{font-size: 12px!important;color: #777!important;}
.highcharts-menu-item hr{    border: 1px solid #ece6e6;}
.highcharts-menu-item:hover{    background:#eee!important;}


/* 16Oct */
#content-slider{ height: auto!important;}
 .newBgWh{ background: #fff; padding: 7px 0; margin-top: -5px; position: relative; z-index: 9; box-shadow: 0px 4px 5px rgba(6, 30, 49, 0.1); border-radius: .2rem;}

.delegated{  border-bottom: 1px solid #ddd}
.delegated a{ color: #777}
.tabTable  td{border-top:2px solid rgba(34, 36, 38, 0.21)!important}



.alert{color: #ff0000!important}

/* TABLE Adjut Large Coloumn */
 
.tableLarge{ 
  position: relative;
  border: 0px;
  width: 100%;
  /* overflow-x: auto;  */
}

/* .tableLarge td:first-child{min-width: 390px;}
.tableLarge th, .tableLarge td{ min-width: 164px;} */

/* Fix Header */ 
.fixed_header td:first-child, .fixed_header th:first-child{min-width: 390px;}
.fixed_header{  table-layout: fixed;   border-collapse: collapse; } 
.fixed_header tbody{  display:block;  width: 100%; overflow: auto; height: calc(100vh - 405px); } 
.fixed_header thead tr { display: block; border-bottom: 2px solid rgba(34, 36, 38, 0.21);} 
.fixed_header th, .fixed_header td {   min-width: 200px; padding: 5px 10px; text-align: left} 
.fixed_header td { border-bottom: 2px solid rgba(34, 36, 38, 0.21)!important; border-top: 0!important }
/* Fix Header */


.copyHistory, .uploadUi{ display: table-cell!important; vertical-align: top}
.copyHistory{     padding-right: 10px; }


/* Error */
.errorInput{ border: 1px solid #f00000!important;}
.errorItem{ color:#f00000;}


/* Vinay Css */
.errorModal.ui.basic.modal {
  background: #fff;
  border-radius: 4px;
  width: 450px;
}
.errorModal.ui.basic.modal>.close {
  color: #777;
  font-size: 12px;
  right: 0px;
  font-weight: bold;
}
.errorList {
  padding: 20px 20px 20px 30px;
}
.errorList li {
  color: #F02919;
  padding: 10px;
}

.dataTables_wrapper .dataTables_paginate {
  float: right;
  text-align: right;
}
.glb-table_lenth {
  float: right;
  margin: 0px 10px 0 0;
}


table.dataTable.nowrap th{text-align:left;}
table.dataTable.nowrap th, table.dataTable.nowrap td {
  white-space: nowrap;padding:5px 15px;box-sizing: content-box;
  table-layout: fixed;
}

.tabTable.dataTable.nowrap th:first-child, .tabTable.dataTable.nowrap td:first-child{
  white-space: inherit;
}
.ui.selection.dropdown .menu{width:100%;min-width: inherit;}
table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
}
.tabTable .ui.input>input, .tabTable .ui.selection.dropdown{width: 110px;}




/* 
=========================================Supriya (Sep 21 New Module)============================
*/
/* ADMIN  */

/* .welcome */
.welcome{    width: 1233px!important;    margin-left: 63px!important;}
.welcome h3{ font-weight: bold; font-size: 25px; color: #0065B3;}
.welcome p{ color: #777;}
.welcome img{ width: 100%;}
.welcome .middleBody{padding: 35px 38px  38px;}


.mb-0{ margin-bottom: 0!important;}
.m-0{ margin: 0!important;}
.pr-0{ padding-right: 0!important;}
.p-0{ padding: 0!important;}
.text-center{text-align: center!important;}
.alignMdille{ align-items: center!important;}
.seconBtn{ padding: 10px 24px!important;    margin: 0!important;}
.A_topRow{ margin-top:12px!important;margin-bottom:12px!important; margin-right:0!important; }
.table.A_table{ border: 0!important; border-bottom: 1px solid rgba(34,36,38,.1)!important;}
.table.A_table thead th{ background: none!important; border-left: 0px!important; border-right: 0px!important; color: #283643; font-size: 13px;padding: 13px 16px; white-space: nowrap;}
.table.A_table td{ border-left: 0px!important; border-right: 0px!important; color: #3B3A3A; font-size: 13px; padding: 12px 16px;}
.table.A_table .nameElips{ max-width: 200px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.A_action a{ color: #777; font-size: 17px;}
.A_viewPop a { border-bottom: 1px solid #eee!important; padding: 8px 12px!important; line-height: 15px!important; text-transform: uppercase!important;}
.A_viewPop a:last-child{border-bottom: 0!important; margin-bottom: 0!important;}
.A_viewPop a i{ font-size: 19px; line-height: 1px; margin-right: 10px; display: inline-block; vertical-align: middle;}

/* TOPBANNER */
.topBannerSection{ color: #3B3B3B; font-size: 18px; font-weight: 600;}
.topBannerSection h3{ font-size: 30px; color: #0065B3; font-weight: bold; margin-top:5px}
.serveyList{ display: flex;}
/*.serveyList li{ padding: 0 25px; list-style: none; text-align: center; color: #283643; position: relative;}*/
  .serveyList li {
    padding: 0 16px;
    list-style: none;
    text-align: center;
    color: #283643;
    position: relative;
  }
.serveyList li.active, .serveyList li.active p{ color: #0065B3;}
.serveyList li.active:before{ display: none;}
.serveyList li:before{width: 19px;height: 7px;box-shadow: 0px 3px 6px #0000001D;border: 1px solid #FFFFFF;border-radius: 4px; content: ''; display: inline-block; position: absolute; left:16px; top:41px;    z-index: 1;}
.serveyList li .number{width: 89px;  height: 89px; line-height: 89px; border-radius: 100px; background: #F4F4F4; position: relative; font-weight: 600; display: inline-block; text-align: center;}
.serveyList li p{ color: #6A6B6B; font-size: 14px; line-height: 21px; margin-top:5px}
.border-right{ border-right: 1px solid #dedede;}

.amberBg:before{ background: #FFC107;}
.blueBg:before{ background: #77BBFF;}
.pendingBg:before{ background: #F8936E;}

.bannerImg{height: 120px; margin-bottom: -23px;}
.mlauto{ margin-left: auto;}
.note{  border-top: 1px solid #ddd;  padding: 16px 0; margin: 16px 0 0;}
.note h4{ color: #0065B3;margin: 0; padding: 0;}
.note ol{ padding-left: 15px; margin: 0;}
.note li{ padding: 7px; color: #7E7E7E;}
.ThNOne{ display: none;}

.formBorder .A_table, .formBorder td{ border: 0!important;}
.formBorder{ margin-top:30px;} 
.formBorder input, .formBorder .dropdown{border: 1px solid #ddd!important;  padding: 8px!important; background: #fff;border-radius: 5px!important;     line-height: 24px!important;    width: 100%;}
.formBorder  .ui.dropdown>.dropdown.icon{ border: 0!important;}
.formBorder .ui{ margin: 0!important;}

.pb-8{ padding-bottom: 8px!important;}



/* Navigation */
.avatar.adminMenu{ overflow: visible;}
.avatar.adminMenu .dropdown, .avatar.adminMenu .logOut{display: inline-block; color: #FDBD2E; background: none; border: 0; margin: 15px 10px 10px 0; cursor: pointer;}
.avatar.adminMenu .ui.dropdown>.dropdown.icon:before{ color: #FDBD2E;}
.avatar.adminMenu .dropdown .text{text-shadow: none; transform: none;}
.leftIconMenu:hover  .avatar.adminMenu{ height: auto;}
.adminDropNav{    height: calc(100vh - 290px);  position: static;}
.showSub{ position: relative;}
.showSub > a:after{    content: "\e907";    font-family: 'icomoon' !important;position: relative;    top:2px;right: -25px;    font-size: 10px;}
.submenu{ display: none;}
.leftIconMenu li .submenu a{ transform: none; padding: 0 0 7px 60px; text-shadow: none;}
.leftIconMenu li .submenu a:hover{ color: #fff;}
.showSub:hover .submenu{ display: block;margin-top: -8px;}
.leftIconMenu.AdminMenu:hover, .leftIconMenu.AdminMenu:hover .gotoMyHcl{width: 247px;}

/* Create Servey */
.createServey{ position: relative;}
.createServey .segment{ padding: 32px 50px 30px 70px;}
.accordion.createServey .title.ui.active .accordionArrow{    transform: rotate(-180deg);}
.accordion.createServey .title.ui .accordionArrow{    transform: rotate(0deg); font-size: 12px; color: #777;}
.createServey .title{ font-size: 24px; color: #283642;}
.createServey .menu {    display: inline-block;border-radius:  5px 5px;border: 1px solid #E0E0E0; padding: 0; overflow: hidden; background: #fff;}
.createServey  .menu  .item{ padding: 9px 16px; color: #777777;display: table-cell; cursor: pointer;}
.createServey  .menu .active.item{ background: #0065B3; font-size: 13px; color: #fff;}
.textRight{ font-size: 13px; text-align: right; color: #0065B3;}
.ui.checkbox input:checked~.box:after, .ui.checkbox input:checked~label:after{background: #0065B3; color: #fff;}
.createServey .inlineIcon{ padding: 0; margin-bottom: 16px;}
.bodySection{ margin-top:40px}

.formA{ background: #F4F4F4;border: 1px solid #EDEDED;border-radius: 5px; padding: 25px; margin-top:5px; margin-bottom:0;}
.formA.ui.form .field>label{ color: #777; font-size: 13px; font-weight: normal;}
.formA.ui.form textarea{ height: 64px; resize: none;}
.formA.ui.form input:disabled{ background: #E8E8E8; opacity: 1;}
.datePick{ position: relative;}
.datePick i{ position: absolute; right: 16px; top: 10px; font-size: 18px; color: #0065B3 ;}
.formA .seconBtn{ margin-right: 12px!important;}
.noBG{ background: none!important; border: 0!important;}
.subHeading{ color: #283642; font-size: 24px;}

.A_bordrLft{  position: relative;    padding-bottom: 30px;}
.A_bordrLft:before{height: calc(100% - 39px); width: 4px; background: #eee; content: '';  position: absolute; left: -38px; top:38px; }
.A_bordrLft.completed::after{ background: #0065B3; content: '';width: 4px; position: absolute; left: -38px; top:38px; height: 0px;	animation: move 2s forwards  }
.A_bordrLft:last-child:before{ display: none;}
/* .A_bordrLft .content.active:before {height: calc(100% + 9px); width: 4px; background: #0065B3; content: '';  position: absolute; left: -38px; top:40px; } */
@keyframes move {
	0% {
    height: 0px;
	}
  
	100% {
    height: calc(100% - 39px)
	}
}


.createServey .title{ position: relative;}
.createServey .A_bordrLft.completed .title:before{ content: '\e910';  font-family: 'IFC'; position: absolute; left:-37px;font-size: 31px;z-index: 1; color: #0065B3; top: 13px; }
.createServey .title.active:before{ content: '\e905';  font-family: 'IFC'; position: absolute; left:-37px;font-size: 27px; text-align: center; width: 32px; height: 32px; line-height: 32px; background: #fff; border-radius: 100px; border: 1px solid #0065B3; z-index: 1; color: #0065B3; top: 13px; }
.createServey  .title:before{ content: '\e906';  font-family: 'IFC'; position: absolute; left:-37px;font-size: 31px;z-index: 1; color: #ccc; top: 13px; background: #fff;line-height: 31px; }
.colorGray{ color: #777;}

.Questionnaire{ background: #fff; border: 1px solid #CCCCCC;border-radius: 5px; padding: 0 16px 16px; max-height: 288px; overflow: auto; margin-bottom: 16px;}
.Questionnaire li{ display: block; border-bottom: 1px solid #EFEFEF; padding: 10px; padding-left: 38px; position: relative; cursor: pointer;}
.Questionnaire li .span{color: #7E7E7E;  font-weight: bold; position: absolute; left: 0;}

.RemarksArea{background: #fff; border: 1px solid #CCCCCC;border-radius: 5px; padding: 16px 16px; max-height: 288px; overflow: auto; margin-bottom: 7px; color: #5c5c5c;}
.RemarksArea .two.fields{ border-bottom: 1px solid #EFEFEF; padding: 10px;  position: relative; cursor: pointer; margin: 0;}
.RemarksArea .fields{ margin: 0!important;}
.RemarksArea label.fields{ color: #777!important;}
.text-right{ text-align: right; justify-content: end;}
.cRed{ color: #ff0000;}
.tableOne{background: #fff; border: 1px solid #CCCCCC;border-radius: 5px; padding: 16px 16px;   margin-bottom: 16px; width: 100%;}
.tableOne td, .tableOne th{ padding: 5px; text-align: left;}
.tableOne td{ border-top: 1px solid #eee; color: #3B3A3A;}
.mtop{ margin-top: 24px!important;} 
.buttonArea button{ width: 100%;}
.buttonArea .ui.basic.secondary:hover{ background: #0065B3!important; color: #fff!important; border-color: #fff!important;box-shadow: none!important;}
.mb-0{ margin-bottom: 0!important;}
.tableSection{ margin-bottom: 5px!important; margin-top:17px!important}
.label{ color: #777; font-size: 13px; font-weight: normal; margin-bottom: 4px; display: block;}
.downloadB{ background: #F0F8FF; padding: 5px 10px; color: #0065B3; border: 1px solid #0065B3; font-size: 13px; text-transform:capitalize!important; border-radius: 5px; cursor: pointer; transition: all ease-in 0.3s; display: block;}
.downloadB i{ font-size: 30px!important; display: inline-block; vertical-align: middle; margin-left: 2px;}
.downloadB:hover{ background:#0065B3; color: #fff;}


/* Help */
.infoHelp{ position: fixed; right: 141px; bottom:70px; border: 0; background: none; width: 60px; height: 60px; cursor: pointer;}
.infoHelpDiv{ width: 400px; padding: 24px!important;}
.infoHelpDiv li{ padding: 4px; color: #777;}
.helpImg{    position: absolute;bottom: 20px;    left: 0;    right: 0;margin: auto;  width: 208px;  }
.infoHelpDiv ol{ margin: 0; padding: 0 0 0 13px;}
.infoHelpDiv h3{color: #0065B3;}

 
/* Upload */
.formRow .uploadStyle{ width: 100%; border: 1px solid #D8D8D8; background: #fff; border-radius: 5px; color: #999; display: flex; justify-content: space-between!important;align-items: center; cursor: pointer;  }
.formRow .iconUpload{ display: inline-block; min-width: 107px;  padding: 10px 8px; font-size: 13px; border-right: 1px solid #ccc; color: #333;  top:0; text-shadow: none;}
.formRow .iconUpload i{ margin-right: 2px; font-weight: bold; font-size: 19px; vertical-align: middle;}
.formRow .mb{ font-size: 12px;color:#999; padding-right: 12px } 
.formRow .dz-preview{ font-size: 12px; font-size: 12px;color:#999; position: absolute;right: 10px;top: 7px;  top: 52px;} 
.formRow .dz-preview .icon-delete:before{ content: "\e908"; font-family: 'IFC';  font-size: 15px; color:  #999; }
.formRow .dz-preview .dz-remove{ text-decoration: none; position: absolute;top: 1px; right:10px; }
.formRow .dz-started .mb{ display: none}
.formRow .dz-filename{ white-space: nowrap;overflow: hidden;    text-overflow: ellipsis;padding-right: 30px;text-align: right;}
.formRow .dz-message{ border: 0; padding: 0; min-height: auto; margin: 0;}
.formRow .dz-message span{ top: 0;}
.formRow .closeP i{font-size: 18px;}
 
.formRow  .dz-details{ text-decoration: none;}
.upImg{ margin-top:-38px;height: 103px; }
.p-16{ padding: 16px!important;}

.mMins{ margin-left: -10px; margin-right: -10px;}
.dFlex2{display: flex}
.dFlex2 > .field{ margin-bottom: 0!important; padding: 0 10px;}
.dFlex2 > .field .label{ color: #777!important;}
.noData{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 500px; padding: 16px; border: 1px dashed #ccc; background: #fff;}
.noData h4{ font-weight: 600; font-size: 18px; color: #777777;}
.showDataTable{ display: none;}
.dropdownMINWI .ui.selection.dropdown{ min-width: 137px;}

/* Assign */
.p-24{ padding: 24px!important;}
.assignHeading{ border-bottom: 1px solid #ddd; margin-bottom: 16px!important;}
.templateSec li{ display: inline-block; position: relative;border: 1px solid #E8E8E8;border-radius: 4px; margin:14px; min-width: 365px; padding: 7px;transition: all ease-in 0.3s;}
.templateSec li>div{ display: flex;}
.templateSec li .image{ height: 100%; width: 109px; overflow: hidden; margin-right: 16px;}
.templateSec li .image img{ width: 100%;}
.templateSec li .delete{ position: absolute; right: 10px; top: 12px; background: none; border: 0; font-size: 19px; color: #777; display: none; cursor: pointer;}
.templateSec li h4{ margin-top:5px; margin-bottom: 0;}
.templateSec li p{ color: #777;}
.dFlex{ display: flex; flex-direction: column; justify-content: space-between;}
.templateSec li .dFlex{ width: 59%;}
.templateSec li:hover{box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.07);border: 1px solid #E8E8E8; transform: scale(1.01);}
.templateSec li:hover .delete{ display: block;}
.templateSec li:hover .ui.basic.secondary.button{ background: #0065B3!important; color: #fff!important; border: 1px solid #fff!important;    box-shadow: none!important;}
.dFr{align-items: center; justify-content: flex-end; margin-top: 16px;}
.dFr input{ width: 50px!important; background: none!important; border: 0!important; min-width: auto!important;border-right: 1px solid #ddd!important; text-align: center; padding: 0;}
.dFr > div { padding: 0 10px;}
.dFr button{ background: none; border: 0; min-width: 100px; cursor: pointer;}
.dFr button:hover{ background: #0065B3; color: #fff;}
.dFr i{ font-size: 25px; margin-left: 16px; cursor: pointer; color: #777;}
.dFr i:hover{color: #0065B3;}
.borderM{ border: 1px solid #ddd; border-radius: 5px; padding: 0!important;}
.dFr .label{ margin-right: 10px;}
.dFr i.disabled{ pointer-events: none; opacity: 0.5;}
.actionTable .action{font-size: 15px;}
.actionTable .action i{ margin-right:3px; font-size: 20px;     vertical-align: middle;color: #777; display: inline-block;}
.actionTable ul li{ list-style: none; padding-left: 13px;}
.actionTable td{ vertical-align: top; border-top: 1px solid #ddd!important;}
.actionTable tr td:first-child, .actionTable th:first-child{ width: 10px!important; padding-right: 0!important;}
.actionTable th .ui.checkbox{ margin-top: 10px!important;}
.actionTable a{ color: #222;}
.formBorder .ui.dropdown>.dropdown.icon{float:right; margin-top:-7px}
.formBorder .ui.dropdown .menu{ width: 100%;}
 .ui.dropdown .menu>.item{ margin-right: 0!important;}
 .rduBtm .ui.text.menu .item{ color: #222;}
 .mr-15{ margin-right: 13px;}
 .ui.vertical.menu{    width: auto;}
 /*--------------------------------------------------------------
         Data - Table
--------------------------------------------------------------*/   
.common_table  tbody tr:hover{background: #E6F3FF;} 
.common_table  .dataTables_info{ padding-top: 0!important; color: #777!important; font-size: 12px; margin-left: 16px;}
.common_table .dataTables_paginate{ margin-bottom:10px!important; color: #222!important; font-size: 14px; border: 1px solid #ccc; height: 30px; padding: 0!important; border-radius: 4px; margin-right: 16px;}
.common_table .dataTables_wrapper .dataTables_paginate .paginate_button{    padding: 3px 14px!important;    border: 1px solid transparent;}
.common_table .dataTables_wrapper .dataTables_paginate .paginate_button.current, .common_table .dataTables_wrapper .dataTables_paginate .paginate_button:hover{    background: #E6F3FF!important; border: 1px solid #9ECCFA;    color: #222!important;}
.common_table .dataTables_wrapper .dataTables_length{float: right; margin-bottom:10px; margin-right: 11px; color: #222; font-size: 14px; position: relative}
.common_table .dataTables_wrapper .dataTables_length label{ margin: 0}
.common_table .dataTables_wrapper .dataTables_length select{padding: 6px 10px; margin: 0; border: 1px solid #ccc; border-radius: 4px; appearance: none; min-width: 60px; cursor: pointer;}  
.common_table .dataTables_length:after{content: "";   border-top: 5px solid;   border-right: 5px solid transparent;    border-left: 5px solid transparent; right: 8px;    top: 11px;   position: absolute;}
.aLeft{ display: inline-block;     border-left: 5px solid #222;  border-bottom: 5px solid transparent;  border-top: 5px solid transparent;position: relative;}
.aRight{ display: inline-block;     border-right: 5px solid #222;  border-bottom: 5px solid transparent;  border-top: 5px solid transparent;position: relative;}


/* FIX Table */
.noBorder{ border: 0!important;}
.fixTable table{ margin: 0!important; white-space: nowrap;}
.noWhiteWrap table{ white-space:normal!important;}
.fixTable table th,  .fixTable table td{  border-radius: none!important;}
.DTFC_LeftBodyWrapper, .DTFC_LeftWrapper { border-right: 1px solid #E0E0E0!important}
.DTFC_RightBodyWrapper, .DTFC_RightWrapper{ border-left: 1px solid #E0E0E0} 
.DTFC_RightHeadWrapper{ border-left: 1px solid #E0E0E0!important}
.DTFC_LeftHeadWrapper{ border-right: 1px solid #E0E0E0!important}
.dataTables_wrapper.no-footer .dataTables_scrollBody{ border: 0!important}
.fixTable table th, .fixTable table td{ min-width: 100px;}
.fixTable tr{ height: 50px;}
 
.dataTables_scrollHeadInner  .fixTable, .DTFC_LeftWrapper  .fixTable, .DTFC_RightWrapper  .fixTable{ border-bottom: 0!important}
.fixTable .hover{  background: #EDF7FF!important;}
.fixTable .ui.checkbox label{ padding-left: 2.2em;}
.fixTable .dataTables_length, .fixTable .dataTables_paginate , .fixTable .dataTables_info{ margin-top: 16px !important;}
 .mb-16{ margin-bottom: 16px;}
 .pt-0{ padding-top: 0!important;}
 .mt-0{ margin-top: 0!important;}
 .DTFC_LeftBodyLiner{ overflow: hidden;}

 .tableList { width: 100%;     border-spacing: 0;}
 .tableList th{ background: #F4F4F4; padding: 16px;border-top: 1px solid #ccc;}
 .tableList td{ border-top: 1px solid #ccc; padding: 16px;}

 .badgeNum li{ display: inline-block;border: 1px solid #CCCCCC;border-radius: 5px; padding: 10px; margin-right: 16px; position: relative; min-width: 80px; text-align: center; cursor: pointer;}
 .badgeNum li span{ display: inline-block;width: 22px; height: 22px;border: 1px solid #78C2FA; font-size: 11px; color: #78C2FA; border-radius: 100px; position: absolute; right: -12px; top: -8px; background: #fff; text-align: center;}
 .badgeNum li.active{ background: #0065B3; color: #fff;}
 /*--------------------------------------------------------------
       Common-Modal
--------------------------------------------------------------*/   
.Common-Modal{ position: relative;}
.Common-Modal.ui.modal .close{top: 10px; right: 10px;color: #777; font-size: 13px;}
.Common-Modal.ui.modal .header{ font-size: 16px; color: #0065B3;}
.middleBody{ padding: 16px;}
.middleBody .ui.form .field{ margin-bottom: 16px;}
.middleBody .ui.form .field>label{ color: #777; margin-bottom: 8px;}
.middleBody .actions{ margin-top:16px}

.alertModal{max-width: 476px; text-align: center; color: #222}
.alertModal .modal-header{ padding-bottom: 0; padding-top:0; border: 0}
.alertModal .modal-header .close{ position: relative; top:10px}
.alertBody{   min-height: 224px;     display: flex;flex-direction: column;justify-content: center; text-align: center;}
.alertBody i{ font-size: 60px;}
.alertBody img{ width: 80px}
.alertBody h2{ line-height: 27px; margin-top:20px}
.alertBody .glb-btn{ margin-top:7px; margin-bottom: 0}

#WarningModal i{ color: #E2A200}
#InfoModal i{ color: #3399FF}
 /*--------------------------------------------------------------
       Typo
--------------------------------------------------------------*/   
.hd1{ font-size: 18px; font-weight: bold}
.hd2{ font-size: 16px; font-weight: 500; }
.hd3{ font-size: 14px; font-weight: normal}

/* Checkboxes */ 
.ui.checkbox input:checked~.box:after, .ui.checkbox input:checked~label:after{content: '\e9b3';  font-family: 'IFC'; font-size: 11px;}
.ui.checkbox .box:after, .ui.checkbox label:after{width: 18px;height: 18px;}
.ui.button{ margin-right: 16px;}
.ui.button:last-child{ margin-right: 0;}
ngx-dropzone-remove-badge {
  opacity: 1 !important
}