/* ==============Common Styles */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
   --primaryfont:'Open Sans', sans-serif;
   --secondaryfont:'PT Sans', sans-serif;
   --specialfont:'Roboto', sans-serif;
   --regular-fontWeight:400;
   --medium-fontWeight:600;
   --extra-fontWeight:900;

  --bodyBg: url(../img/bodybg.jpg) repeat;
  --textColor: #000000;
  --cardbg:#FFFFFF;
  --placeholderTextColor:#000000;
  --cardBoxShadow:0 0 10px #999;
  --cardBoxBorder:1px solid #999;

  --mainHeaderBg:#FFFFFF;
  --mainTitleTextColor:#000000;
  --formctrlBg:#FFFFFF;
  --formctrlTextColor:#000000;

  --breadcrumblockBg:#005b96;
  --breadcrumbBorder:1px solid #e0e0e0;
  --breadcrumLinkHovercolor:#51aeea;
  --breadcrumbTextColor:#FFFFFF;
  --breadcrumbTextActiveColor:#f5f5f5;
   --pageTitleTextColor:#FFFFFF;

   /*===========LeftNav=============*/
  --leftNavBg:#005b96;
  --leftNavBorder:1px solid #073c76;
  --leftNavListHoverBg:#003671;
  --leftNavListTextColor:#FFFFFF;
  /*===========Main Header=============*/
  --headerBg:#FFFFFF;
  --headerBoxShadow:0 0 7px #000;
  --mainLogoBg:#FFFFFF;
  --headerBorder: 1px solid #c5c7c7;
  --headernavbarAuthorBg:#ffffff;
  --headernavbarAuthorborder:1px solid #eaeaea;
  --headerUserProfileBg:#f7f7f7;
  --headerUserProfileBorder:3px solid #c5c5c7;
  --headernavbarDropdown:#ffffff;
  --headernavbarDropdownText:#000000 ;
  --headernavbarDropdownFooterborder:1px solid #e9e9ef;
  --headernavbarDropdownFooterText:#FFFFFF;
  --footerLinkTextColor:#031e88;
  /*===============Content area===============*/
    --contentbackground:#FFFFFF;
    --contentBorder:1px solid #c6c6c6;
    --panelgroupTopBorder:1px solid #c2c2c2;
    --panelHeadingBg:#FFFFFF;
    --panelHeadingpBorder:1px solid #c6c6c6;
    --panelIconColor:#005b96;
  /*===========Buttons=============*/
  --btnTextColor:#FFFFFF;
  --primaryBtnBg: #005b96;
  --primaryBtnTextColor:#FFFFFF;

  --secondaryBtnBg: #c23402;
  --secondaryBtnGradientBg:linear-gradient(to right,  #c23402 0%,#e82701 100%);
  --secondaryBtnTextColor:#FFFFFF;

  --blackBtnBg: #25283b;
  --blackBtnGradientBg:linear-gradient(to right,  #25283b 0%,#000000 100%);
  --blackBtnTextColor:#FFFFFF;
   /*===========Notification=============*/
   --errorMsgTextColor:#e82701;
   --successCardBg:#f0fdf6;
   --successMsgTextColor:#066b24;
   --logoutSuccessIconColor:#008000;

   --editLeaveLableTextColor:#000000 ;
   --contentFilterBoxBorder:1px dashed #ececec;
   --customTableBorder:1px solid #102161;
   --customTableColumBorder: 1px solid #ededed;
   --customTableHeaderBg:#005b96;
   --customTableHeaderTextColor:#FFFFFF;
   --customTableTextColor:#000000 ;
   --customTableTextHoverColor:#0225ab;
   --customTableEvenRowBg:#FFFFFF;
   --customTableOddRowBg:#FFFFFF;

   --formInputCntrlBg:#ffffff;
   --formInputCntrlBorder:1px solid #c2c2c2;
   --formInputCntrlTextColor:#000000 ;
   --formCheckBoxBorder:1px solid #c2c2c2;
   --formCheckBoxChecked:#005b96;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--placeholderTextColor) !important;
  opacity: 1; /* Firefox */
  }
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--placeholderTextColor);;
  }
  
::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--placeholderTextColor);; 
  }

html,
body {
  height: 100%;
}
body{
    background:var(--bodyBg);
    font-family: var(--primaryfont);
    font-size: 13px;
    color: var(--textColor);
}
@supports(--bodybg: false) {
  body {
    background:#FFFFFF var(--bodyBg);
  }
}
.card__wrapper{
  width: 100%;
  background:var(--cardbg);
  padding: 24px;
  border-radius: 4px; 
  box-shadow: var(--cardBoxShadow);
}
.vheight{
    height: 100vh;
}
.vertical--center{
display: flex;
align-items: center;
justify-content: center;
}
.text-hcenter{
    text-align: center;
}
.errormsg{
    font-size: 12px;
    color:var(--errorMsgTextColor);
    margin: 0;
}
.success_card{
  background:var(--successCardBg);
  padding: 16px 0;
  min-height: 160px;
}
.successmsg{
  font-size: 16px;
  font-weight:var(--medium-fontWeight);
  color:var(--successMsgTextColor);
  margin: 0;
}

.maintitle{
    font-family: var(--secondaryfont);
    font-size: 24px;
    color:var(--mainTitleTextColor);
    font-weight:var(--medium-fontWeight);
    margin: 0; padding:10px 0;  
}

.frmctrl{
    width: 100%;
    background: var(--formctrlBg);
    border-radius: 4px;
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    color:var(--formctrlTextColor);
}
.m-b-24{
    margin-bottom: 24px;
}
/* =========== Button Styles======== */

.btn, button{
    font-weight: var(--medium-fontWeight);
    font-size: 14px;
    color:var(--btnTextColor);
    border-radius: 4px;
    border:none;
    outline: none;
}
.btn:focus, .btn:active{
    border:none;
    outline: none;
}
.btn-dwdn{
   padding: 8px;
    margin: 0 6px;
}

.btn-sm{
    padding: 8px 16px;
}
.btn-md{
    padding: 12px 20px;
}
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus{
    background:var(--primaryBtnBg);
     color:var(--primaryBtnTextColor);
}
.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus{
  background:var(--secondaryBtnBg);
  background: var( --secondaryBtnGradientBg);
  color:var(--secondaryBtnTextColor);
}
.btn-black, .btn-black:hover, .btn-black:active, .btn-black:focus{
  background:var(--blackBtnBg);
  background: var( --blackBtnGradientBg);
  color:var(--blackBtnTextColor);
}

.btn-group{
  width: 100%;
  margin: 20px auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 4px;
}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.btn-group .btn + .btn{
  margin-left: 16px;
  border-radius: 4px;
}

.content-header{
    background: var(--breadcrumblockBg);
    width: 100%;
    padding: 14px 20px;
    margin: 14px auto;
    border-top:var(--breadcrumbBorder);
    border-bottom:var(--breadcrumbBorder);
    position: relative;
}
.page_title{
    font-family: var(--specialfont);
    font-size: 24px;
    font-weight:var(--medium-fontWeight);
    color:var(--pageTitleTextColor);
    margin:0;
    padding: 0;
}
.sub_title{
    font-family: var(--secondaryfont);
    font-size: 18px;
    font-weight:var(--medium-fontWeight);
    color:var(--textColor);
    margin:0;
    padding: 12px 15px;
}
.content-header > .breadcrumb {
    float: right;
    font: normal 13px var(--primaryfont);
    padding: 7px 5px;
    position: absolute;
    top: 15px;
    right: 10px;
    background: none;
   
  }
  .content-header > .breadcrumb > li > a {
    color:var(--breadcrumbTextColor);
    text-decoration: none;
    display: inline-block;
  }
  .content-header > .breadcrumb li:before {
    color:var(--breadcrumbTextColor);
  }
  .content-header > .breadcrumb > li.active{
    color:var(--breadcrumbTextActiveColor);
  }
  .content-header > .breadcrumb > li > a:hover{text-decoration: underline; color:var(--breadcrumLinkHovercolor)}
  
  .toggle_icon{
    position: absolute;
    right:20px;
    top:12px;
    cursor: pointer;
  }
  .toggle_icon.chpwd{ right:28px;}

  @media (max-width: 767px) {
    .content-header{
        margin: 8px auto 16px; 
    }
    .content-header > .breadcrumb {
      position: relative;
      margin:6px 0px 0;
      top: 0;
      right: 0;
      float: none;
      padding: 0px;
    }
  }
  @media screen  and (min-width:768px) and (max-width:1024px){
    .cust-table> .btn-group> .btn + .btn{margin-top:4px}
  }