.bg {
  position: relative;

}
body {
  background-color: #ffffff;

}
.Section{
  padding: 10px 30px 10px 10px;
}
.chatbotBlock {
  background-color: #19333e;
  position: absolute;
  right: 0;
  bottom:0;
  width: 55px;
  height: 55px;
  border-radius: 100%;
  z-index: 999;
}
.chatbotBlock figure {
  text-align: center;
  display: block;
}
.chatbotBlock figure img {
  margin-top: 6px;
}
header {
  background: #00cdff;
  clear: both;
  overflow: hidden;
  padding: 5px 0;
}
.profileBlock{
  padding: 0px;
}
.profileBlock a{
  display: inline-block;

  margin-right:15px;

}
.profile{
  display: inline-block;
  text-align: left;
  width:75%;
  color: #ffffff;
  font-family: robotolight;
}
.profile_name{
  font-size:15px;
  float: left;
}
.profile_title{
  font-size:13px;
  float: left;
  opacity: 0.9;
}

.togelBlock {
  padding-top: 10px;
}

.heading h1 {
  text-align: center;
  color: #fff;
  font-size: 32px;
  margin-top:0px;
  font-family:robotoregular;
}

.listd {

  display: block;
  padding: 15px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border .2s ease-in-out;
}
.cardthirumph {

  display: block;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #FFFFFF;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border .2s ease-in-out;
  box-shadow: 1px 1px 2px 1px rgb(206, 201, 201);
}

.expDiv{
  border: 1px solid #4e4949;
  background-color: #fff;
}

.nameDiv {
  margin-right: 180px;
}
.jobId {
  margin: -8px 46px 0px 0px;
}
.line{
  margin-top: 0px;
  margin-bottom: 0px;
  border: 0;
  border-top: 1px solid #eee;
}
.skill {
  margin: 26px 245px 10px 4px;
  text-transform: lowercase;
}

.year {
  margin: -28px 0px -1px 210px;
}

/*.btn-lists {
  background-color: rgb(255, 255, 255);
  width: 24%;
  height: 44px;
  border-radius: 25px;
  margin: 0 0 20px 0px;
}*/
.btn-text button{
  background-color: rgb(255, 255, 255);
  width: 25%;
  height: 44px;
  border-radius: 25px;
  border: 1px solid;
  margin: 0 0 20px 0px;
}
.btn-text button.active{
  background-color: rgb(0,204,255);
  color: #fff;
  border:1px solid #00ccff;
}
.btn-text button span.active{
  color: #fff;
}
.btn-text button{
  padding:0px;
  width: 21%;

}
.btn-text button:focus{
  outline-color: transparent;

}

.btn-text {
  color: #9aadc8;
  padding: 0 3px 0px 0px;
}
.btn-lists:focus{
  outline-color: transparent;
}

.selected {

}


.buttons{
  background-color: #0d1641;
  color: #5cc4ca;
}


.form-at {
  background-color: white;
}
// .container-fluid{
//   background-color: #FAFAFA;
// }
.container-full{
  background-color: #F4F8F9;
  position: absolute;
  bottom: 0px;
  height: 100%;
  width:100%;
}
.candidateContainer{
  background-color: #FFFFFF;
}
/*
 button:hover {
  background:rgb(9, 9, 64);
}
*/
.fNm input{
  color: #3F4F5F;
  font-family: Roboto;
  font-size: 17px;
}
.example-full-width input{
  color: #3F4F5F;
  font-family: Roboto;
  font-size: 17px;
}
.fNm input.error{
  border-bottom:2px solid orangered;
  margin-bottom:-7px;
  color: orangered;
}

.example-full-width input.error{
  border-bottom:2px solid orangered;
  margin-bottom:-7px;
}
#matSelectlocation,
#matSelectexp,
#matSelectprimaryskill,
#matSelectExp{
  display: inline-block;
  margin-bottom:28px;
  width:69%;
}

.redline{
  border-bottom:2px solid red;

}
.alert-Err {
  color: #f30808;
  background-color: #ffffff;
}
.alert-success {
  color: #2c9e3c;
  background-color: #ffffff;
}

.clearBtn {
  margin: 22px 7px -5px 3px;
}



.reject{
  margin: 2px 164px -7px -19px;
  color:red;
  font-size: small;
  width: auto;
}

.approve {
  margin: -19px 0px 12px 140px;
  color: green;
  font-size: small;
  width: auto;
}

.shape {
  border: 2px solid #e2dbdb;
  padding: 6px 0px;
  background: #fffcfc;
  width: 5%;
  border-radius: 45px;
  margin: 3px -14px -21px 4px;

}

.shDiv {
  background-color: beige;
  height: fit-content;
}
.min{
  min-height: 170px;
}

.listBtn {
  padding: 14px 37px 0px 62px;
}


.btnSearch{
  color: #0cdabd;
  background-color: #191c82;
  border-radius: 24px;
}
.searchBtn{
  margin: 21px -91px 0px -9px;
  width: 117%;
}

.textBox{
  border-radius: 24px;
  margin: 0 0 0 10px;
}


.add-on .input-group-btn > .btn {

  border-left-width:0;left:-2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}


.btnWidth {

  width: 48%;
}

.fNm {
  width: 34%;
  padding-bottom: 20px;
}

.lNm {

}



/*side menu csss */

.nav-side-menu {
  overflow: auto;
  font-family: verdana;
  font-size: 12px;
  font-weight: 200;
  background-color: #ffffff;;
  position: static;
  /* top: 98px; */
  width: 228px;
  height: 100%;
  color: #ffffff;
  padding: 0px 15px 26px 17px;
}
.nav-side-menu .brand {
  background-color: #45cdfc;
  line-height: 41px;
  display: block;
  text-align: center;
  font-size: 14px;
}
.nav-side-menu .toggle-btn {
  display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 35px;
  cursor: pointer;
  /*
    .collapsed{
       .arrow:before{
                 font-family: FontAwesome;
                 content: "\f053";
                 display: inline-block;
                 padding-left:10px;
                 padding-right: 10px;
                 vertical-align: middle;
                 float:right;
            }
     }
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  border-left: 3px solid #d19b3d;
  background-color: #ffffff;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
  color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  background-color: #ffffff;
  border: none;
  line-height: 28px;
  border-bottom: 1px solid #23282e;
  margin-left: 0px;
  border-left: 3px solid #eceaea;
  border-right: 3px solid #eceaea;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  background-color: #ffffff;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
  font-family: FontAwesome;
  content: "\f105";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}
.nav-side-menu li {
  padding-left: 0px;
  border-left: 3px solid rgba(181, 172, 172, 0.26);
  border-bottom: 1px solid #cfdfe4;
  border-right: 3px solid rgba(181, 172, 172, 0.26);

}
.nav-side-menu li a {
  text-decoration: none;
  color: #130752;
}
.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}
.nav-side-menu li:hover {
  border-left: 3px solid #46cdfc;
  background-color: #ffffff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: static;
    right: 10px;
    top: 10px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #ffffff;
    color: #000;
    width: 40px;
    text-align: right;
  }
  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
}
@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
  #main {
    width:calc(100% - 300px);
    float: right;
  }
}

.subMenulist {

  border-left: 3px solid #eceaea;
  border-right: 3px solid #eceaea;
}


.slet {
  text-align: left
}

.example-form {
  width: 100%;
  font-size: smaller;
  margin-top: 20px;
}

.example-full-width {
  width: 69%;
  margin-left: 0px;
  padding-bottom: 28px;
}
.mat-select{

  margin-left: 0px;
  width:100%;
  text-align: left;
}
.mat-select.error div{
  border-bottom:2px solid red;
  color:red;
}
.containDiv {
  background-color: #FFFFFF;
  width: 97%;
  box-shadow: 0 3px 81px 0 rgba(49,48,118,0.07);
}

.button-row {
  margin: 31px 0 39px 59%;
}

.button-rowBack {
  margin: 31px 0 39px 59%;
}

.mdButton {
  background-color: #043660;
  border: 1px solid #043660;
  border-radius: 5px;
  height: 30px;
  width: 120px;
  line-height: 10px;
}

.uploadDiv {
  padding: 61px;
  max-width: 550px;
  margin: 20px auto 40px;
  border: 1px dashed #ccc;
  border-radius: 8px;
}

.uploadImg {
  margin: 0 0px 19px 0px;
}


.uploadText {
  height: 28px;
  width: 351px;
  color: #204D72;
  font-family: Roboto;
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  text-align: center;
}

.uploadText2 {
  margin: 29px auto 0 auto;
  height: 24px;
  width: 320px;
  color: #204D72;
  font-family: Roboto;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
}
.uploadName {
  margin: 29px 0px 0 291px;
  height: 24px;
  width: 320px;
  color: rgba(32, 77, 114, 0.68);
  font-family: Roboto;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}


.lableBtn {
  line-height: 27px;
  color: #41c7f7;
}


.textBtn {
  height: 14px;
  width: 37px;
  color: #00CCFF;
  font-family: Roboto;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  margin-top: -171px;
}
.textBtn a{
  color: #00CCFF;
}
.backImg {
  margin: -12px 0 10px 23px;
}
.listofProf{
  text-align: left;
  color: #043660;
  font-family: robotobold;
  padding-left:15px;
}
._Indicators{
  display: inline-block;
  float: left;
  color: #000;
}
._Indicator {
  display: inline-block;
  height: 25px;
  width:25px;
  border: 1px solid #E7E7E7;
  box-shadow: 0 2px 5px 2px rgba(37,37,80,0.08);
}
._Indicators div{
  display: inline-block;
  height: 1px;
  width:30px;
  border:1px solid #CCCCCC;
}


mat-toolbar {
  background: #00CCFF;
  opacity: 100%;
  color: #FFFFFF;
  font-weight: normal;
}


/* slider */

.slider {
  
  padding: 20px 0;

  .slide_header {
    display: inline-block;
    width: 156px;
    font-family: roboto;
    font-size: 14px;
    line-height: 16px;
    color: #000; 
    height: 50px;

    .indicator {
      height: 25px;
      width: 25px;
      border: 1px solid #E7E7E7;
      background-color: #FFFFFF;
      border-radius: 100%;
      margin: auto;
      margin-bottom: 8px;
      position: relative;
    }

    .indicator::after {
      color: #fff;
      transition: .4s all ease-in;
    }
    
    &.inProgress .indicator {
      box-shadow: 0 2px 5px 2px rgba(37,37,80,0.08);

      &::after {
        content: '';
        background: #00CCFF;
        position: absolute;
        top: 25%;
        bottom: 25%;
        left: 25%;
        right: 25%;
        border-radius: 100%;
      }
    }

    &.completed .indicator::after {
      content: 'check';
      background: #00CCFF;
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: -1px;
      right: -1px;
      border-radius: 100%;
      font-family: 'Material Icons';
      color: #FFF;
      line-height: 25px;
    }

    &.completed + .separator {
      border-color: #00CCFF;
    }
  }

  .separator {
    display: inline-block;
    border: 1px solid #E7E7E7;
    margin: 0 -73px 31px -73px;
    width: 156px;
  }
}

/* End of slider */

// make the form fields more managable with bootstrap
mat-form-field {
  // display: block;
  width: 100%;
}

mat-select {
  padding-top: 17px;
}

:host {
  display: block;

  ::ng-deep {
    // hide mat-horizontal-stepper headers
    .mat-horizontal-stepper-header-container {
      display: none;
    }

    .mat-horizontal-content-container {
      padding-top: 1px;
    }

    .mat-horizontal-stepper-content {
      padding: 0 24px 0 24px;
    }
  }

  mat-horizontal-stepper {
    background: none;
  }

  .noPadding {
    padding: 0;
  }

  button[mat-button] {
    
    &.default {
      background: transparent;
      color: #262628;
      border: 2px solid #262628;
      border-radius: 2px;
    }
    
    &.warning {
      background: #FF787F;
      color: #fff;
      border-radius: 2px;
    }
    
    &.success {
      background: #8BCA4A;
      color: #fff;
      border-radius: 2px;
    }
  }

  .marginTopMd {
    margin-top: 20px;
  }

  .mat-form-field {
    background: #FAFAFA;
    margin-bottom: 10px;
    border-radius: 2px;
    padding: 20px 20px 0 20px;
    border: 1px solid #F1F1F1;
    width: 100%;

    .mat-form-field-wrapper {
      height: 82px;
    }
  }
  
  ::ng-deep .mat-input-placeholder-wrapper {
    &, .mat-form-field-placeholder {
      overflow: visible;
    }

    span.mat-placeholder-required.mat-form-field-required-marker {
      // float: left;
      position: absolute;
      left: -10px;
      top: -10px;
    }
  }
  .profilePic {
    border: 1px solid #ccc;
    background: #FAFAFA;
    border: 1px solid #F1F1F1;
    border-radius: 3px;
    height: 217px;
    line-height: 215px;
    margin-bottom: 10px;

    input {
      display: none;
    }

    mat-icon {
      color: #AEAEAE;
      height: 70px;
      line-height: 217px;
      font-size: 120px;
      width: 100%;
    }

    img {
      height: auto;
      border-radius: 100%;
      width: 100%;
      max-width: 215px;
      max-height: 215px;
    }
  }
}

// custom column sizes to match the design
@media (min-width: 992px) {
  :host {
    .col-md-custom-40 {
      width: 40%;
    }
    .col-md-custom-60 {
      width: 60%;
    }
  }
}