/**

 * Table of Contents

 * 

 * 1.0 - General

 *

 * 2.0 - Custom Classes

 *   2.1 - Checkbox

 *   2.2 - Headings

 *

 * 3.0 - Header

 *   3.1 Header - Banner

 *

 * 4.0 - Landing Page

 *   4.1 - Signup Form

 *   4.2 - Information

 *   4.3 - Pricing

 *

 * 5.0 - Pricing Page

 *   5.1 - Plans 

 *   5.2 - Feature

 *

 * 6.0 - Dashboard Page

 *   6.1 - Header

 *   6.2 - Links

 *   6.3 - Candidates

 *   

 *

 * 7.0 - Media Queries

 *   7.1 - 1200px

 *   7.2 - 1000px

 *   7.3 - 800px

 *   7.4 - 650px

 *   7.5 - 500px

 *

 */



/**

 * 1.0 - General

 */



 * {

   margin: 0;

   padding: 0;

}



html, body {

   overflow-x: hidden;

}



:root {

   --esl: #2fb052;

   --esl-blue: #004aba;

   --esl-light: #6abc6f;

   --esl-text: #1e1e1e;

   --esl-text--light: #939393;

   --esl-grey: #606060;

   --esl-light-grey: #ccc;

   --esl-sec-bg: #f5f5f5;

   --arial: 'Arial';

   --blueberry: 'Blueberry Sans';

}



p {

   color: var(--esl-text);

   line-height: 1.5 !important;

}



a {

   text-decoration: none !important;

}



/**

 * 2.0 - Custom Classes

 */



.--container {

   width: 90vw !important;

   display: flex;

   flex-direction: column;

   justify-content: center;

   align-items: center;

   margin: 0 auto !important;

}





/* Flex */

.--flex {

   display: flex ;

}



.--flex-col {

   flex-direction: column;

}



.--align-center {

   align-items: center !important;

}



.--align-start {

   align-items: flex-start !important;

}



.--justify-between {

   justify-content: space-between !important;

}



.--justify-center {

   justify-content: center !important;

}



.--justify-end {

   justify-content: flex-end !important;

}





/* Width */

.--w-full {

   width: 100% !important;

}



/* Dash */

.dash {

   display: block;

   width: 4rem;

   height: 5px;

   background-color: white;

   margin: 2rem auto;

}



/**

 * 2.1 - Custom Classes - Checkbox

 */



 input.--checkbox {

   -webkit-appearance: none;

   -moz-appearance: none;

   -ms-appearance: none;

   -o-appearance: none;

   appearance: none;

   position: relative;

   height: 20px !important;

   width: 40px !important;

   transition: all 0.15s ease-out 0s;

   color: #fff;

   cursor: pointer;

   position: relative;

   z-index: 1000;

   transition: .3s;

   padding: 0 !important;

}



input.--checkbox:checked {

   background: var(--esl);

   border-color: var(--esl) !important;

}





input.--checkbox:checked::before {

   width: 18px;

   height: 18px;

   display: flex;

   font-size: 10px;

   font-weight: 700;

   position: absolute;

   align-items: center;

   justify-content: center;

   content: '\f00c';

   font-family: 'Font Awesome 6 Free';

}



/**

 * 2.2 - Custom Classes - Headings

 */



.--sec-heading {

   font-size: 40px;

   text-align: center;

   font-weight: 700;

   color: var(--esl-text);

   margin-bottom: 10px;

   text-align: center;

}



.--sec-subhead {

   font-size: 26px;

   text-align: center;

   font-weight: 500;

   color: var(--esl-text);

   text-align: center;

}



/**

 * 3.0 - Header

 */



#esl-header {

   padding: 1rem 0;

   flex-direction: row !important;

}



.esl-header--logo img {

   width: 10rem;

}



.esl-header--menu {

   margin-right: 3rem;

}



.esl-header--menu a {

   font-size: 18px;

   color: var(--esl-text);

   text-transform: capitalize;

}



.esl-header--menu a:first-child {

   margin-right: 10px;

}



.esl-header--btn a {

   font-size: 18px;

   padding: 7px 10px;

   border: 1px solid var(--esl) !important;

   color: var(--esl) !important;

   border-radius: 10px;

}



.esl-header--btn a:hover {

   border-color: var(--esl-text) !important;

   color: var(--esl-text) !important;

}



/**

 * 3.1 Header - Banner

 */



#esl-banner {
   background-size: cover !important;

   background-position: center !important;

   padding: 12rem 0 !important;

}



#esl-banner h2 {

   font-size: 28px;

   color: white;

   font-family: var(--blueberry);

   font-weight: 300;

   text-align: center;

}



#esl-banner h1 {

   font-family: var(--blueberry);

   font-size: 60px;

   font-weight: 700;

   color: white;

   text-align: center;

}



/**

 * 4.0 - Landing Page

 */



#esl-body section {

   padding: 4rem 0;

}



/**

 * 4.1 Body - Signup Form

 */



 /* Signup form description */

.esl-signup--desc {

   font-family: var(--arial);

   font-size: 29px;

   text-align: center;

   width: 50%;

   margin: 0 auto;

}



/* Signup form */

.esl-signup--form {

   margin-top: 5rem;

   margin-bottom: 3rem;

}



.esl-signup--form form {

   padding: 3rem 2rem;

   border-top: 5px solid var(--esl);

   border: 1px solid var(--esl-light-grey);

   border-top: 7px solid var(--esl);

   width: 60%;

   margin: 0 auto;

}



.esl-signup--form form input, .esl-signup--form form select, .esl-signup--form form button {

   font-family: var(--blueberry);

   font-size: 16px;

   padding: 12px 10px;

   border: 1px solid var(--esl-light-grey) !important;

   margin: 15px 0;

   width: 100%; 

     box-sizing: border-box !important;

     -webkit-box-sizing:border-box;

     -moz-box-sizing: border-box;

}



.form--name input:first-child, .form--job input:first-child {

   margin-right: 20px;

}



.esl-signup--form form input::placeholder {

   font-weight: 500;

}



.esl-signup--form form input:focus {

   outline: none !important;

}



/* Job inputs */

.esl-signup--form .form--job #job_title {

   flex: 70%;

}



.esl-signup--form .form--job #num_jobs {

   flex: 30%;

}



/* Agree checkbox */

.esl-signup--form form .form--agree {

   margin-top: 1rem;

}



.esl-signup--form form .form--agree input {

   margin-top: 0;

}



.esl-signup--form form .form--agree p {

   margin-left: 10px;

}



/* Submit button */

.esl-signup--form form .form--submit {

   margin-top: 2.5rem;

}



.esl-signup--form form .form--submit button {

   width: 60%;

   font-family: var(--blueberry);

   font-weight: 500; 

   letter-spacing: .5px;

   background-color: var(--esl);

   background: #2fb052;

   color: white;

   border: none !important;

   margin: 0 auto;

   cursor: pointer;

}



/* Signup - Signout Button */

.esl-signup--out {

   font-size: 22px;

   text-align: center !important;

}



.esl-signup--out a {

   color: var(--esl-blue) !important;

}



/**

 * 4.2 Body - Information

 */



#esl-info {

   background-color: var(--esl-sec-bg);

}



/* Content */

.info-content--right,

.info-content--left {

   width: 50% !important;

}



.esl-info--content {

   margin-top: 3rem;

}



.esl-info--content .info {

   margin-bottom: 2rem;

}



.esl-info--content .info:first-child h2 {

   margin-bottom: 2rem;

   color: var(--esl);

}



.esl-info--content h2 {

   font-size: 24px;

   color: var(--esl-text);

   font-weight: 500;

   margin: 10px 0;

}



.esl-info--content p {

   font-size: 20px;

   color: var(--esl-text--light);

   font-weight: 100;

   line-height: 1.5;

}



/* Images */

.info-content--right {

   margin-left: 4rem;

   background-image: url('images/esl-ss--circle.svg');

   background-repeat: no-repeat;

   background-position: center;

   background-size: contain;

}



.info-content--right img {

   box-shadow: 0px 13px 13px 0px rgba(27, 92, 39, 0.16);

   width: 90%;

}



/**

 * 4.3 Body - Pricing

 */

#esl-pricing {

   background-color: var(--esl-light);

   padding: 8rem 0 !important;

}



#esl-pricing h2 {

   font-size: 28px;

   color: white;

   font-family: var(--blueberry);

   font-weight: 300;

   text-align: center;

}



#esl-pricing h1 {

   font-family: var(--blueberry);

   font-size: 50px;

   font-weight: 700;

   color: white;

   text-align: center;

}



.esl-pricing--btn {

   font-family: var(--blueberry);

   font-size: 18px;

   font-weight: 500;

   color: var(--esl-light);

   background-color: white;

   margin-top: 2rem;

   padding: 13px 30px;

}



/**

 * 5.0  - Pricing Page

 */



/**

 * 5.1  Pricing Page - Plans

 */

#esl-plans {

   background-color: var(--esl-sec-bg);

}



.esl-plans--pricing {

   margin-top: 3rem;

   width: 55rem;

}



.pricing--col {

   padding: 2rem 4rem;

   padding-bottom: 3rem;

   background-color: white;

   border: 1px solid var(--esl-light-grey);

   width: 50%;

   margin: 30px;

   text-align: center;

   height: auto;

}



.pricing--col h2 {

   font-family: var(--blueberry);

   font-size: 30px;

   font-weight: 500;

   color: var(--esl-text);

}



.pricing--col h3 {

   font-size: 20px;

   font-weight: 500;

   color: var(--esl-text--light);

}



.pricing--col p {

   color: var(--esl-grey);

   padding-top: 4rem;

}



.pricing--col .pricing-col--btn {

   font-family: var(--blueberry);

   font-size: 14px;

   font-weight: 500;

   color: white;

   background-color: var(--esl);

   padding: 15px 25px;

   text-transform: capitalize;
   display: inline-block;

}



.pricing--col .contact-btn {

   border: 1px solid var(--esl-light-grey);

   background-color: transparent !important;

   color: var(--esl);
   display: inline-block;
   margin-top: 40px;

}



/**

 * 5.2  Pricing Page - Features

 */

#esl-features {

   background-color: #FCFCFC;

}



.esl-features--table {

   margin-top: 3rem;

   width: 100%;

}



.esl-features--table table {

   font-family: var(--arial);

   border-collapse: collapse;

   width: 100%;

}



.esl-features--table table h2 {

   font-family: var(--blueberry);

   font-size: 26px;

   font-weight: 500;

   color: var(--esl-text);

   text-align: center;

}



.esl-features--table table h3 {

   font-size: 18px;

   font-weight: 500;

   color: var(--esl-text--light);

   text-align: center;

}



.esl-features--table table td, .esl-features--table table th {

   border: 1px solid #e4d3d3;

   text-align: left;

   padding: 10px;

   font-size: 18px;

   color: var(--esl-text--light);

   font-weight: 500;

}



.esl-features--table table tr th:not(.esl-features--table table tr th:first-child) {

   text-align: center !important;

}



.esl-features--table table img {

   width: 1.5rem;

}



/**

 * 6.0 - Dashboard Page

 */



.dashboard-body {

   background-image: url('images/white-texture.png') !important;

}



/**

 * 6.1 Dashboard Page - Header

 */

.dashboard-header {

   background-color: #f0f0f0 ;

   padding: 10px 0 !important;

}



.dashboard-header .--container {

   flex-direction: row !important;

   justify-content: space-between;

}



/* Logo */

.dashboard-header .esl-header--logo img{

   width: 8rem;

}



/* Hamburger */

.esl-header--logo, .esl-header--hamburger {

   margin-right: 4rem;

}



.esl-header--logo, .esl-header--hamburger a {

   font-size: 24px;

   color: var(--esl-text);

}



/* Search group */

.esl-header--search .search--group input {

   padding: 15px;

   border: 1px solid #A3A3A3;

   border-right: 0;

   border-top-left-radius: 50px;

   border-bottom-left-radius: 50px;

   font-family: var(--blueberry);

   font-size: 16px;

   font-weight: 400;

   width: 20rem;

}



.esl-header--search .search--group input:focus {

   outline: none !important;

}



.esl-header--search .search--group a {

   padding: 10px 20px 10px 0;

   border: 1px solid #A3A3A3;

   background-color: white;

   border-left: 0;

   border-top-right-radius: 50px;

   border-bottom-right-radius: 50px;

}



/* Dashboard header menu */

.dashboard-header .esl-header--menu a {

   font-size: 28px;

   margin-left: 40px;

   position: relative;

   color: var(--esl-text);

}



.dashboard-header .esl-header--menu a span.unread-dot {

   display: block;

   width: 12px;

   height: 12px;

   border-radius: 100%;

   background-color: var(--esl-blue);

   border: 3px solid var(--esl-light-grey);

   box-shadow: 0 0 0px 5px rgba(0,0,0,.1);

   position: absolute;

   top: -4px;

   right: -4px;

}



/* Profile Picture */

.esl-header--profile #profile-picture {

   width: 40px;

   height: 40px;

   background: white;

   border-radius: 100%;

   margin-right: 25px;

}



.esl-header--profile #settings {

   font-size: 24px;

   color: var(--esl-text);

}



/**

 * 6.2 Dashboard Page - Links

 */

#esl-dashboard--links {

   padding-bottom: 0 !important;

}



#esl-dashboard--links .--container {

   width: 70vw !important;

}



.links--inner {

   display: grid;

   grid-template-columns: auto auto auto;

}



.links--col {

   background-color: white;

   border: 1px solid var(--esl-light-grey);

   padding: 20px;

   margin: 15px;

}



.links--col:hover {

   background-color: #f1f1f1;

}



.links--col .links-img {

   width: 2rem !important;

}



.links--col .links-title {

   font-family: var(--blueberry);

   font-size: 22px;

   font-weight: 500;

   color: var(--esl-grey);

   margin-top: 1rem;

   margin-bottom: 5px;

}



.links--col .links-desc {

   font-family: var(--blueberry);

   font-weight: 300;

   color: #A3A3A3 !important;

   width: 250px;

}



.links--col .links-count {

   font-family: var(--blueberry);

   font-size: 22px;

   font-weight: 500;

   color: var(--esl);

   margin-top: 1rem;

}



/**

 * 6.3 Dashboard Page - Candidates

 */

#esl-dashboard--candidates .--container {

   width: 900px !important;

}



/* Dashboard candidates heading */

#esl-dashboard--candidates .--sec-heading {

   font-family: var(--blueberry);

   font-size: 26px;

   font-weight: 500;

   color: var(--esl-grey);

   border-bottom: 1px solid var(--esl-grey);

   padding-bottom: 10px;

   align-items: baseline;

}



#esl-dashboard--candidates .--sec-heading img {

   width: 20px;

   margin-right: 1rem;

}



/* Dashboard candidates action area */

.dashboard-candidates--action {

   margin-top: 1rem;

   width: 100%;

}



.dashboard-candidates--action h1 {

   font-family: var(--blueberry);

   font-weight: 500;

   font-size: 24px;

   color: var(--esl-grey);

}



.dashboard-candidates--action button {

   font-family: var(--blueberry);

   font-weight: 200;

   font-size: 20px;

   background: white !important;

   border: 1px solid var(--esl-blue);

   color: var(--esl-blue) !important;

   padding: 10px 10px;

   cursor: pointer;

}



.dashboard-candidates--action button span {

   margin: 0 15px;

}



/* Dashboard candidates table */

.dashboard-candidates--table {

   margin-top: 3rem;

   width: 100%;

   overflow-x: auto !important;

}



.dashboard-candidates--table table {

   font-family: var(--blueberry);

   border-collapse: collapse;

   width: 100%;

   border: 1px solid #f0f0f0;

}



.dashboard-candidates--table table thead {

   background-color: #f0f0f0;

}



.dashboard-candidates--table thead th {

   font-weight: 500 !important;

   color: var(--esl-grey) !important;

   text-align: center;

}



.dashboard-candidates--table thead th#table_id {

   width: 90px;

}



.dashboard-candidates--table thead th#table_person {

   width: 250px;

   text-align: center;

}



.dashboard-candidates--table tbody {

   background-color: white;

}



.dashboard-candidates--table tbody th:nth-child(2) {

   text-align: center;

   color: var(--esl-grey);

}



.dashboard-candidates--table table td, .dashboard-candidates--table table th {

   border-bottom: 1px solid #f0f0f0;

   text-align: left;

   padding: 15px;

   font-size: 18px;

   color: var(--esl-text--light);

   font-weight: 400;

}





/**

 * 7.0 - Media Queries

 */



/**

 * 7.1 Media Queries - 1000px

 */



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



   /* Header */

   .dashboard-header .--container {

      flex-direction: column !important;

   }

   .header--right {

      margin-top: 2rem !important;

   }



   /* Font size */

   #esl-banner h2 {

      font-size: 20px;

   }

   

   /* ESL Information Section */

   .esl-info--content {

      flex-direction: column !important;

   }

   .info-content--right,

   .info-content--left {

      width: 100% !important;

   }

   .info-content--right {

      margin: 0 !important;

   }

   .info-content--right img {

      width: 100%;

   }



    /* Signup Form */

   .esl-signup--desc {

      width: 80%;

   }



   /* Pricing Page - Plans */

   .esl-plans--pricing {

      flex-direction: column !important;

      align-items: center !important;

      width: 100%;

   }



   .pricing--col {

      width: 20rem !important;

   }

   

   /* Dashboard Page - Links */

   .links-desc {

      width: 200px !important;

   }

   

   #esl-dashboard--candidates .--container {

      width: 80vw !important;

   }





}



/**

 * 7.3 Media Queries - 840px

 */



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

   /* Dashboard Page - Links */

   .links-desc {

      width: 150px !important;

   }



   #esl-dashboard--candidates .--container {

      width: 70vw !important;

   }



   .dashboard-candidates--table thead th#table_person {

      width: 150px;

   }

}



/**

 * 7.3 Media Queries - 800px

 */



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



   #esl-header {

      flex-direction: column !important;

   }



   .header--right {

      margin-top: 1rem;

   }



   /* Font size */

   #esl-banner h2, #esl-pricing h2, .--sec-subhead {

      font-size: 20px !important;

   }



   #esl-banner h1, #esl-pricing h1, .--sec-heading {

      font-size: 40px !important;

   }





   /* Signup Form */

   .esl-signup--form form {

      width: 60vw !important;

   }



   .esl-signup--desc {

      width: 100% !important;

   }

   

}



/**

 * 7.4 Media Queries - 700px

 */



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



   /* Header */

   .header--left {

      flex-direction: column;

   }

   .logo-left {

      margin-bottom: 1.5rem;

      justify-content: space-between !important;

      width: 100%;

   }

   .esl-header--logo, .esl-header--hamburger {

      margin-right: 0;

   }

   .search--group {

      justify-content: center;

   }

   .esl-header--search input {

      width: 80% !important;

   }



   .links--inner {

      grid-template-columns: auto;

   }

   .links-desc {

      width: 80vw !important;

   }

   #esl-dashboard--candidates .--container {

      width: 80vw !important;

   }

   .dashboard-candidates--table thead th {

      width: auto !important;

   }

}



/**

 * 7.5 Media Queries - 650px

 */

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

   /* Header */

   .esl-header--menu:not(.dashboard-header .esl-header--menu) {

      flex-direction: column !important;

   }



   /* Signup Form */

   .esl-signup--form form div:not(.form--agree) {

      flex-direction: column !important;

   }

   .esl-signup--form form .form--submit button {

      width: 100%;

   }

}





/**

 * 7.6 Media Queries - 500px

 */

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

   /* Font size */

   #esl-banner h2, #esl-pricing h2, .--sec-subhead {

      font-size: 20px !important;

   }



   #esl-banner h1, #esl-pricing h1, .--sec-heading {

      font-size: 35px !important;

   }



   /* Pricing Page - Plans */

   .pricing--col {

      width: 50% !important;

   }



   .pricing--col p {

      padding-top: 2rem !important;

   }



   .dashboard-candidates--action {

      flex-direction: column !important;

   }



   .dashboard-candidates--action h1 {

      margin-bottom: 2rem;

   }

}
.cust_1st_list {
   list-style-type: none;
   margin: 0;
   padding: 0;
}
ul.cust_1st_list li:last-child a {

   font-size: 18px;

   padding: 7px 10px;

   border: 1px solid var(--esl) !important;

   color: var(--esl) !important;

   border-radius: 10px;
   margin-left: 40px;

}



ul.cust_1st_list li:last-child a:hover {

   border-color: var(--esl-text) !important;

   color: var(--esl-text) !important;

}


input[type="checkbox"]:checked:after, input[type="radio"]:checked:after {
   color: #fff !important;
}