@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap');

body{
    font-family:"Nunito";
    background-color:#F5F6FA;
}

.twoCol h2{
	text-align: left;
}

.twoCol h2 a{
	color:#31216B;
	font-weight: 700;
	text-decoration: none;
	border-bottom: none;
	font-size: 20px;
}

.twoCol p{
	text-align:left;;
}

.twoCol h2 a:hover{
	color:#1EBBF0;
}

.brand img{    
	border-radius: 4px;
    width: 190px;
}


.twoCol .collection {
	border-radius: 8px;
    border:none;
    box-shadow: 0px 4px 12px rgba(39, 116, 139, 0.2);
}

#searchBar button .icon-search{
    display: block;
    color:#fff;
}

#searchBar button{
	background-color: #FFAB00;
	border:none;
    top:0px!important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

#searchBar button:hover{
    background: #f7b500;
}

#searchBar .search-query{
    border-radius: 8px;
}

#searchBar button span{
    text-shadow: none;
    border: none;
    padding: 0 0px 0px 10px;
    font-weight: 500;
    text-decoration: none!important;
    font-size: 16px;
    font-family: "Nunito";
}

input.search-query{
	box-shadow: none;
}

.twoCol .popArticles a{
	font-weight: 500;
}

.twoCol .popArticles li:last-child{
	margin-bottom: 0px;
}

#searchBar .search-query{
	font-size: 16px;
}

.navbar .nav>li>a{
	padding: 22px 15px;
}

.navbar .nav>li.active>a{
	color:#fff;
}

#fullArticle .title{
	color:#31216B;
    font-size: 32px;
    line-height: 40px;
    font-weight: 800;
}

#fullArticle h4{
	color:#31216B;
}

#fullArticle p{
    font-size: 16px;
     line-height: 26px;
     font-weight: 400;
     color:#3D2A80!important;

}

#fullArticle ol{
    margin-left:15px;
}

#fullArticle a strong,
#fullArticle li a strong{
    color:#1ebbf0!important;
}


#fullArticle strong,
#fullArticle li strong{
    color:#3D2A80!important;
}

#fullArticle li{
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color:#3D2A80!important;
}


#fullArticle .admin-edit{
	display: block;
    padding: 16px 0px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    min-width: 250px;
    width: 250px;
    box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2);
    text-align: center;
    max-width: 100%;
    background: #fb9f00;
    border: none;
    color: #ffffff;
}

#fullArticle .admin-edit:hover{
	color: #ffffff;
    background: #f7b500;
}

p{
	line-height: 24px!important;
    font-weight: 400;
    color: #50585f!important;
	font-size: 14px;
}

.contentWrapper{
    border: none;
    min-height: inherit;
	border-radius: 8px;
    border:none;
    box-shadow:none;
    padding:0px 0px 50px;
    background-color:transparent;
    border-bottom: 1px solid rgba(61, 42, 128, 0.1)!important;
}

#fullArticle{
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid rgba(61, 42, 128, 0.1)!important;
    padding:20px;
    min-height: inherit;
    box-shadow: none;
    background-color:#fff;
}

#fullArticle hr {
    border-top: 1px solid #e2e2e2;
	margin:30px auto;
}


#fullArticle h4 br{
	display: none;
}

.articleFoot p, .articleFoot time {
    font-family: inherit;
    font-style: normal;
}


#sidebar form .search-query{
	border-radius:4px;
}

#sidebar form .search-query:focus{
	border-color:#D0D0D0;
	box-shadow: none;
}

#sidebar h3{
	color: #31216B;
    text-transform: none;
    font-size: 20px;
    font-weight: 800;
}

#sidebar .nav-list a{
	color: #31216B;
	font-size: 14px;
    text-transform: none;
    font-weight: 500;
}

#sidebar .nav-list .active a{
	color: #1EBBF0;
    font-size: 14px;
    text-transform: none;
    font-weight: 500;
}

#sidebar .nav-list a .icon-arrow{
	display: inline-block;
}

#sidebar .nav-list a .icon-arrow:before{
	color: #31216B;
}

#sidebar .nav-list .active a .icon-arrow:before{
	color: #1EBBF0;
}

#sidebar .nav-list .active a:hover{
	color: #31216B;
    font-size: 14px;
    text-transform: none;
    font-weight: 500;
}

.contentWrapper h1,
#categoryHead h1{
	font-weight: 600;
	color: #31216B;
}

#fullArticle h3,
#fullArticle h2,
#sidebar .nav-list .active a:hover i:before{
	color: #31216B;
}


#fullArticle h2{
font-weight: 800;
font-size: 24px;
line-height: 32px;
}

#categoryHead .sort select{
	font-size: 14px;
    line-height: 18px;
    height: 40px;
	outline:0!important;
}

.related h3,
.articleRatings-question{
    font-weight: 800;
    font-size: 24px;
    line-height: 32px;
    color: #31216B;
    text-transform: none;
}

.related{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    min-height: 60px;
    padding: 12px 20px;
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: none;
    font-size: 14px;
    color: #fff;
    margin-top:50px;
    border: 1px solid rgba(61, 42, 128, 0.1);
}
.articleRatings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 12px 20px;
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: none;
    font-size: 14px;
    color: #fff;
    margin-top:50px;
    border: 1px solid rgba(61, 42, 128, 0.1);
}

.articleFoot {
    margin-top: 20px;
}

.rating-face{
	fill: #31216b;
}

input[type=text]:focus{
	box-shadow: none;
	border-color:#D0D0D0;
}

.container-fluid>.row-fluid{
	height: calc(100vh - 120px);
}

.container-fluid>.twoCol.row-fluid{
	height: calc(100vh - 300px);
}

footer p{
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

footer{
  padding-top:40px;
}

footer p{
    margin:0px 0px;
    padding:20px 0px;
}


footer p a,
footer.center p{
	text-align: center;
	font-size:12px;
}

footer p a,
footer.center p,
footer.center p a{
	color:#605C6F;
    font-size: 14px;
}

footer p a:hover,
footer.center p a:hover{
	color:#1EBBF0;
}

/****Home page***/

#contentArea .collection-category{
    margin-bottom: 40px;
}

#contentArea .collection-category h2 a{
   font-size: 24px;
   line-height:32px;
   font-weight: 800;
}

#contentArea .collection-category h2 a{
    color:#3D2A80;
}

.category-list .category{
    padding:0px;
    border: 1px solid rgba(61, 42, 128, 0.1);
}

#contentArea .collection-category .category-list{
    margin:0px -10px;
    display: flex;
    flex-wrap:wrap;
}

#contentArea .collection-category .category-list>a{
    width:calc(100%/3 - 22px);
    margin:0px 10px 20px;
    border-radius: 12px;
    background-color: #fff;
}

#contentArea .collection-category .category-list h3{
   border-top-right-radius: 12px;
   border-top-left-radius: 12px;
   margin:0px 0px 20px;
   padding: 12px 20px;
   font-size: 18px;
   font-weight: 700;
   position: relative;
   text-align: center;
   border-bottom: 1px solid rgba(61, 42, 128, 0.1);
}

#contentArea .collection-category .category-list h3:before{
    content: '';
    position: absolute;
    left: 20px;
    top: 12px;
    height: 20px;
    width: 20px;
    background-position: center center;
    background-repeat: no-repeat;
}

#contentArea .collection-category:nth-child(2) .category-list h3{
    background-color: #DFDEFF;
    color:#5D5CFF;
  }

 
  #contentArea .collection-category:nth-child(3) .category-list h3{
    background-color: #C5EDEC;
    color:#00A0AF;
  }

 

  #contentArea .collection-category:nth-child(4) .category-list h3{
    background-color: #FDDECF;
    color:#F45C0F;
  }

  #contentArea .collection-category:nth-child(5) .category-list h3{
    background-color: #FFEBED;
    color:#E32D34;
  }


  #contentArea .collection-category .category-list p{
    margin:0px;
    padding:0px 20px 20px;
    color:#605C6F;
    font-size:16px;
    line-height: 24px;
  }

  #contentArea .collection-category .category-list p.article-count{
    color:#1EBBF0!important;
  }

  #docsSearch{
    background-color:#31216b;
    background-image:url('https://www.aihr.com/wp-content/uploads/Mask-group-3.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size:cover;
    padding:140px 0px 100px;
    margin-bottom:100px;
  }

  #docsSearch form{
    padding:0px;
    position: relative;
  }

  #docsSearch form:before{
    content:'How can we help?';
    color:#fff;
    font-size:40px;
    line-height: 52px;
    font-weight: 800;
    position:absolute;
    left:0px;
    right:0px;
    top:-120px;
  }

  #searchBar button{
    text-shadow: none;
  }

  .navbar .nav .active .caret{
    display:none;
  }

  .search-query{
    color:#3D2A7F!important;
  }

  .search-query::-webkit-input-placeholder { /* Edge */
    color: rgba(61, 42, 127, 0.5);
    opacity:1;
  }
  
  .search-query:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(61, 42, 127, 0.5);
    opacity:1;
  }
  
 .search-query::placeholder {
    color: rgba(61, 42, 127, 0.5);
    opacity:1;
  }

  #serp-dd {
    top: 52px;
    border-radius: 8px;
}

#serp-dd ul li a{
    color:#3D2A7F!important;
}

.navbar .nav a{
    font-size:14px;
}

  @media only screen and (max-width: 768px) {

    #docsSearch {
        padding: 100px 0px 50px;
        margin-bottom:40px;
    }

    .navbar .btn-navbar {
        top: 10px;
        right: -10px;
    }

    .navbar .btn-navbar .icon-bar {
        background: #fff;
    }

    #contentArea .collection-category .category-list>a {
        width: calc(50% - 22px);
    }

    .collection-category h2{
        text-align: left;

    }

    #searchBar {
        padding: 1.5em 0;
        width: calc(100% - 40px);
    }

     footer {
       padding-top: 0px;
     }

  }

  @media only screen and (max-width: 480px) {

    #docsSearch {
        padding: 80px 0px 50px;
    }

    #contentArea .collection-category .category-list>a {
        width: calc(100% - 22px);
    }

    #contentArea .collection-category {
        margin-bottom: 20px;
    }

    #docsSearch form:before {
        font-size: 30px;
        line-height: 42px;
    }

    #docsSearch form:after {
        top: -60px;
        line-height: 22px;
    }

    #docsSearch form:before {
        top: -85px;
    }

    #searchBar button span {
        text-indent: 0;
    }

  }

  @media only screen and (max-width: 360px) {

    #docsSearch form:before {
        font-size: 26px;
        line-height: 38px;
    }

  }


  /****FAQ page***/

  #sidebar form .search-query:focus,
  #sidebar form .search-query{
    border:1px solid #3D2A80;
    border-radius: 8px;
    background-color: transparent;
    height: 44px;
  }

  #sidebar #searchBar button .icon-search {
    color: rgba(61, 42, 127, 0.5);
}

 #sidebar form .search-query{ 
    padding-left:40px;
    padding-right:10px;
    font-size:14px;
 }


 #sidebar form .search-query::-webkit-input-placeholder { /* Edge */
    color: rgba(61, 42, 127, 0.5);
    opacity:1;
  }
  
  #sidebar form .search-query:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(61, 42, 127, 0.5);
    opacity:1;
  }
  
  #sidebar form .search-query::placeholder {
    color: rgba(61, 42, 127, 0.5);
    opacity:1;
  }

 #sidebar form button {
    right: inherit;
    left: 12px;
    top: 2px!important;
 }

 #sidebar .nav-list li>a:hover,
 #sidebar .nav-list li>a{
  color:#31216B!important;
  font-size:18px!important;
  line-height: 28px;
 }

 #sidebar .nav-list a{
    display: flex;
    align-items: center;
    justify-content: space-between;
 }

 #sidebar .nav-list a{
    padding:6px 0px;
 }

 #sidebar .nav-list a i{
    margin-top:-3px;
 }

 #sidebar .nav-list a i:before{
    color:#31216B!important;
    font-size: 20px;
    line-height: 1;
 }



 #main-content{
    background:none;
 }

 .contentWrapper h1, #categoryHead h1{
    font-size: 32px;
    line-height: 40px;
    font-weight: 800;
 }

 #categoryHead .sort {
    top: 0px;
}

#categoryHead .sort select{
    border: 1px solid #3D2A80;
    border-radius: 8px;
    height: 40px;
    width: 160px;
    color:#3D2A80;
}

.contentWrapper p.descrip{
    color:#605C6F;
    font-size: 16px;
    line-height: 24px;
}

.related ul li a span,
.articleList a>span{
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    position: relative;
    padding-left:0px;
    color:#1ebbf0;
}


.contentWrapper.withRelated{
    padding-bottom: 50px;
    min-height: inherit;;
}

.related ul li a i,
.articleList a i{
    display:none;
}

.articleList {
    margin: 0 0 0px;
}


.articleList li:first-child{
   margin-top:10px;
}

.articleList li:last-child{
    margin-bottom:10px;
}

#fullArticle .printArticle{
  display: none;
}

#fullArticle .printArticle i{
  color:#1ebbf0;
  font-size: 24px;
}



@media only screen and (max-width: 768px) {
    #main-content {
        margin: 30px 0px 0px;
    }

    #sidebar .nav-list a {
        justify-content: flex-start;
    }
}

.articleFoot .icon-contact{
    display:none;
}

.articleFoot p.help{
    position: relative;
    padding-left: 70px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    line-height: 20px!important;
    color:#3D2A80!important;
    margin:0px;
    
}
.articleFoot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top:50px;
}

.articleFoot time.lu{
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: rgba(61, 42, 127, 0.5);
    margin:0px;
}

.articleFoot p.help a{
    font-weight: 600;
    color:#1EBBF0!important;
    padding-left:5px;
    border:none!important;
}

.articleFoot p.help:before{
content: '';
position: absolute;
left: 0px;
top: 0px;
height: 54px;
width: 54px;
background-position: center center;
background-repeat: no-repeat;
background-image:url('https://www.aihr.com/wp-content/uploads/Group-15.svg');
}

@media only screen and (max-width: 768px) {

    .articleFoot,
    .articleRatings{
       margin-top:30px;
    }

    .contentWrapper{
      padding-bottom:30px;
    }

    #sidebar{
        margin-top:30px;
    }

}

@media only screen and (max-width: 480px) {

  .articleFoot{
    flex-direction: column;
    align-items: flex-start;
  }

  .articleFoot time.lu{
    margin-top:20px;
  }

  .articleRatings-question {
    font-size: 20px;
    line-height: 28px;
  }

}


.articleList{
    padding-top:80px;
}

.articleList{
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid rgba(61, 42, 128, 0.1)!important;
    padding: 20px 20px 20px;
    min-height: inherit;
    box-shadow: none;
    background-color: #fff;
}

@media only screen and (max-width: 1000px) {

    #categoryHead {
        display: flex;
        flex-direction: column;
    }

    #categoryHead .sort {
        position: relative;
        right: 0;
    }

 
    #categoryHead h1 {
        margin-right: 0px;
    }
}

@media only screen and (max-width: 768px) {
.contentWrapper.withRelated{
    padding-bottom: 30px;
}

.related h3{
    padding:0px;
}

.related{
  margin-top:30px;
}

}
@media only screen and (max-width: 600px) {

    #fullArticle .title,
    .contentWrapper h1, #categoryHead h1 {
        font-size: 26px;
        line-height: 32px;
    }

    .contentWrapper p.descrip {
        font-size: 14px;
    }

    .related ul {
        margin-left: 20px;
    }

}

#fullArticle blockquote{
    background-color: #fff;
    border-color: #1EBBF0;
}
#fullArticle .callout-blue{
    background-color: #e9faff;
    border-color: #1EBBF0;
}

#fullArticle .callout-green{
    background-color: #ccfbff;
    border-color: #00a0af;
}

#fullArticle .callout-red{
    background-color: #ffeaed;
    border-color: #e32d34;
}

#fullArticle .callout-yellow{
    background-color: #fff7e6;
    border-color: #ffab00;
}

div>a{
    font-size:16px;
}

#docsSearch h1{
    color: #fff;
    font-size: 18px;
    line-height: 28px;
    font-weight: 100;
    margin: 0px 0px 40px;
}


@media only screen and (max-width: 480px) {

    .contentWrapper p.descrip {
        margin-bottom: 10px;
    }
    
    #searchBar {
        text-align: center;
    }
    
    #searchBar .search-query{
        margin-right: 0px;
    }
    

#docsSearch h1{
    margin: 0px 0px 20px;
    font-size: 16px;
    line-height: 24px;
}

}

@media only screen and (max-width: 379px) {

    #docsSearch form:before {
        top: -115px;
    }

}

.contentWrapper p{
    margin-top:0px;
}
.articleRatings-question {
    font-weight: 600;
}

.rateAction{
    width:40px;
    height:40px;
}

.rating-face {
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.articleRatings-actions {
    width: 90px;
}

footer {
    display: none;
}