/* Color pallette chosen from https://coolors.co/54494b-7e8287-9da39a-b98389-db2955 */

@import url('https://fonts.googleapis.com/css?family=Inter:100,200,300,400,400i,500,700');
/* */

body {
    background: #fbfbfc;
}
/* Home Page Title */

#docsSearch h1 {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin-top: .4em;
    font-family: "Inter", sans-serif;
    color: #333333;
    padding: 10px;
}
.navbar .nav li {
    display: inline-block;
    float: none;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    /*letter-spacing: .1em;*/
}

.navbar .nav>li>a{
    padding: 11px 10px 11px;
}
 
.navbar .nav li a, .navbar .icon-private-w {
    font-size: 14px;
    font-weight: 500;
    color: #6e6e6e;
}

.navbar .nav li a:hover, .navbar .nav li a:focus, .navbar .nav .active a, .navbar .nav .active a:hover, .navbar .nav .active a:focus {
    font-weight: 500;
}

/* Header Size */

a.brand > img {
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    height: 70px;
    margin-top:15px;
    margin-left: 15px;
    width: auto;
}

.navbar .navbar-inner {
    /* background: #ffffff; */
    height: 100px;
}
.navbar .navbar-inner .container-fluid {
    padding: 0;
    height: 100px;
}
.navbar .brand {
    float: left;
    display: block;
    padding: 0px;
    margin-left: -20px;
    font-size: 20px;
    font-weight: 200;
    color: #777;
    text-shadow: 0 1px 0 #fff;
}
/* Home Page Search Bar Background */

#docsSearch {
    background: url(https://allantra.com/wp-content/uploads/2024/09/bg-allantra-1.jpg) no-repeat center 100% / cover transparent;
    border-top: 1px solid #dadada;
    padding: 1.5em 0;
    margin:0!important;
}
/* Search Input Box */

input.search-query {
    padding-right: 14px;
    padding-right: 4px \9;
    padding-left: 14px;
    padding-left: 4px \9;
    margin-bottom: 0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-family: "Inter",
    sans-serif;
    font-weight: 100;
    letter-spacing: 1px;
}

/* Section Category container */
.collection-category {
    background: linear-gradient(to right, transparent, rgba(0,0,0,.35), transparent) bottom/100% 1px no-repeat;
    padding-bottom: 6em;

}

/* Home Page Category Title*/

.category-list h3 {
    color: #333333;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
    font-family: "Inter", sans-serif;
}

/* Category Styles */

.category-list .category p {
    color: #7e8287;
    font-family: "Inter", sans-serif;
    font-weight: 100;
    font-size: 15px;
    letter-spacing: 0.25px;
}
.category-list .category {
    background-color: #fff;
    background-position: top 20px center !important;
    background-repeat: no-repeat !important;
    background-size: 125px auto !important;
    border-color: #ebebeb;
    border-radius: 15px;
    box-shadow: 0 7px 4px -5px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    min-height: 183px;
    padding: 155px 20px 15px;
    position: relative;
    width: 31.5%;
    transition: all 0.2s;
}
.category-list .category:hover {
    text-decoration: none;
    background: #f6f6f6;
}



.collection-category h2 {
    font-weight: 600!important;
    margin: 2em 0 20px!important;
    text-align: center;
    padding-left: 0%;
    font-family: "Inter", sans-serif;
    /* text-transform: uppercase; */
    color: #333333;
    font-size: 32px;
    letter-spacing: 1px;
}

.collection-category h2 a {
    color: #333333;
}

.collection-category .category-list {
    margin: 0 0 4em;
    text-align: center;
}



/* Home Page Link Style */

#serp-dd .result a, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a span, .category-list .category .article-count, .category-list .category .article-count, .contentWrapper a {
    font-weight: 500;
    letter-spacing: .25px;
    color: #38006a;
    margin-top: 15px;
    text-transform: capitalize;
    text-decoration: none;
    font-family: "Inter",
    sans-serif;
    font-weight: 500;
}
#serp-dd .result a:hover, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count, .contentWrapper a {
    font-weight: 500;
    letter-spacing: .25px;
    color: #38006a;
    margin-top: 15px;
    text-transform: capitalize;
    /* text-decoration: underline; */
    font-family: "Inter",
    sans-serif;
    font-weight: 500;
}
/* Home Page Search Button */

#searchBar button {
    color: #fff;
    background: #38006a;
    border-radius: 0 5px 5px 0;
    border: 1px solid #ebebeb;
    font-size: 18px;
    padding: 0 1.5em;
    height: 50px;
    position: absolute;
}
#searchBar button:hover {
    color: #38006a;
    background: #DBD1E6;
    border: 1px solid #ebebeb;
}
input, button, select, textarea {
    font-family: "Inter",
    sans-serif,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
}


/* Category Images */

/*
  Here is where you determine the images to be used just above each section of your Help Scout main page.
  You have to create one #category-xxx CSS selector for each separate category in your Help Scout collection.
  To get your category xxx number, simply visit the relevant category in your Help Scout docs and
  check the URL bar for the 3 digit category number.

  Then you have to specify an image located on a shared server somewhere on the internet that can
  serve up the images so Help Scout can display them.
*/


/* Getting Started (use your actual category names here in the comment to make it easier */

/* REGISTRAR - Start Here - Registrar Basics */
#category-181 {
    background-image: url(https://allantra.com/wp-content/uploads/2026/01/icon-h-starthere.svg);
}

/* Registrar - Assigning & Managing Training */
#category-180 {
  background-image: url(https://allantra.com/wp-content/uploads/2026/01/icon-h-checklist.svg);
}

/* Registrar - Documents & Training Materials */
#category-179 {
  background-image: url(https://allantra.com/wp-content/uploads/2026/01/icon-h-files.svg);
}

/* Registrar - System Settings */
#category-178 {
  background-image: url(https://allantra.com/wp-content/uploads/2026/01/icon-h-system.svg);
}

/* Registrar - Privacy, Compliance & IT */
#category-177 {
  background-image: url(https://allantra.com/wp-content/uploads/2026/01/icon-h-privacy.svg);
}

/* TRAINING DEVELOPER - Training Developer Basics*/
#category-297 {
  background-image: url(https://allantra.com/wp-content/uploads/2025/06/icon-memos-system-1.svg);
}

/* Training Developer - Building Training Modules*/
#category-162 {
  background-image: url(https://allantra.com/wp-content/uploads/2025/06/icon-content-editor.svg);
}

/* Training Developer - Publish & Maintain Training Content*/
#category-174 {
  background-image: url(https://allantra.com/wp-content/uploads/2025/06/icon-docu-manage-1.svg);
}

/* Training Developer - Create Exams & Competency*/
#category-176 {
  background-image: url(https://allantra.com/wp-content/uploads/2025/06/icon-exams.svg);
}

/* Training Developer - Question Bank Mastery */
#category-175 {
  background-image: url(https://allantra.com/wp-content/uploads/2026/01/icon-h-questionbank.svg);
}

/* Training Developer - Survey, Certificates & SCORM*/
#category-298 {
  background-image: url(https://allantra.com/wp-content/uploads/2025/06/icon-records-1.svg);
}

/* MANAGER - Manager Quick Guide */
#category-300 {
  background-image: url(https://allantra.com/wp-content/uploads/2026/01/icon-h-manager.svg);
}

/* INSTRUCTOR - Instructor Basics */
#category-301 {
  background-image: url(https://allantra.com/wp-content/uploads/2026/01/icon-h-instructor.svg);
}

/* COMMUNICATIONS - Working With Memos */
#category-302 {
  background-image: url(https://allantra.com/wp-content/uploads/2025/06/icon-automated-notifs1.svg);
}

/* SAFETY MANAGER - Safety Reports Basics */
#category-195 {
  background-image: url(https://allantra.com/wp-content/uploads/2026/01/icon-h-safety.svg);
}

/* Safety Manager - Manage & Close Safety Reports */
#category-303 {
  background-image: url(https://allantra.com/wp-content/uploads/2025/06/icon-safety-reports-1.svg);
}
/* etc... keep going and add one CSS ID selector for each category. */



/* Side Bar Styles */

#sidebar .nav-list a {
    display: inline-block;
    color: #4333d6;
    font-size: 14px;
    padding: 6px 15px 6px 0;
    line-height: 20px;
    margin-left: 0;
    font-family: "Inter",
    sans-serif;
    font-weight: 300;
}
#sidebar .nav-list .active a, #sidebar .nav-list .active a:hover, #sidebar .nav-list .active a:focus {
    font-weight: 600;
    color: #38006a;
    background: 0 0;
    text-shadow: none;
}
#sidebar h3 {
    text-transform: uppercase;
    font-size: 16px;
    color: #7e8287;
    font-weight: 400;
    margin-bottom: 4px;
    font-family: "Inter",
    sans-serif;
    letter-spacing: 2px;
}
/* Article Styles */

#main-content {
    background: none;
    float: right;
    margin-bottom: 2em;
    padding: 32px 0 0 28px;
}

#fullArticle img {
    display: block;
    margin: 1em 0 2em;
    padding: 4px;
    border-radius: 4px;
    box-sizing: border-box;
}

#fullArticle .title, .contentWrapper h1 {
    margin: 0 30px .5em 0;
    font-family: "Inter",
    sans-serif;
    color: #333333;
    font-weight: 700;
}
#fullArticle .printArticle {
    position: absolute;
    right: 46px;
    top: 40px;
}
#fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table {
    color: #1d1d1b;
    font-family: "Inter",
    sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .01em;
}
#categoryHead .sort select {
    width: 150px;
    height: 24px;
    margin: 0;
    line-height: 24px;
    font-size: 13px;
    color: #7e8287;
    font-family: "Inter",
    sans-serif;
    font-weight: 300;
}
/* Style this one if you want bolded article text to have a different color */

#fullArticle strong {
    color: #1d1d1b;
}
#fullArticle h2 {
    font-size: 24px;
    font-family: "Inter",
    sans-serif;
    font-weight: 600;
    color: #38006a;
}
#fullArticle h3 {
    font-size: 20px;
    font-family: "Inter",
    sans-serif;
    font-weight: 600;
    color: #38006a;
}
#fullArticle h4 {
    font-size: 16px;
    font-family: "Inter",
    sans-serif;
    font-weight: 400;
    color: #7e8287;
    font-style: italic;
}
.contentWrapper p {
    margin-top: -4px;
    word-wrap: break-word;
    font-family: "Inter",
    sans-serif;
    color: #7e8287;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: .01em;
}

/* Article Footers */

.articleFoot p, .articleFoot time {
    color: #7e8287;
    display: inline-block;
    font-family: "Inter",
    sans-serif;
    font-weight: 300;
    font-style: italic;
}

/* Page Footers */

footer p {
    margin: 3em 0!important;
}

footer p a {
    color: #7e8287;
    font-family: "Inter",
    sans-serif;
    font-weight: 300;
}


/* Contact Modal */

#contactModal h2, .abuse h2 {
    background: #fff;
    margin: 0;
    padding: 11px 0 10px 18px;
    font-size: 22px;
    border-bottom: 1px solid #ccc;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-family: "Inter",
    sans-serif;
    color: #58A4B0;
    font-weight: 300;
}
#contactModal .control-label {
    width: 110px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #7e8287;
}

.btn {
    color: #fff;
    background: #38006a;
    border-radius: 5px;
    border: 1px solid #44068C;
    font-size: 14px;
    padding: .5em;
    text-shadow:none!important;
    /* height: 50px; */
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #fff;
    background: #8fa7c2;
  border: 1px solid #9da39a;
}

#search-query .btn:hover {
    color: #fff;
    background: #8fa7c2;
    border-radius: 5px;
    border: 1px solid #9da39a;
    font-size: 18px;
    padding: 0 1.5em;
    height: 50px;
}



.category-list {
    text-align: center;
    /* HOMEPAGE + COLLECTION PAGES: make category tiles equal-height, max 3 per row, centered */
   display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;  /* centers the last row */
  align-items: stretch !important;     /* equal heights per row */
  gap: var(--tile-gap) !important;

  margin: 0 !important;
  padding: 0 !important;
}

/*FROM CHATGPT*/

/* Each tile item (li usually) */
.category-list > li{
  list-style: none !important;
  margin: 0 !important;

  /* KEY: do NOT allow tiles to grow/stretch to fill the row */
  flex: 0 0 min(var(--tile-max), calc((100% - (2 * var(--tile-gap))) / 3)) !important;
  box-sizing: border-box !important;

  display: flex !important; /* helps child fill height */
}

/* Make the clickable card fill the tile and keep equal height */
.category-list > li > a{
  width: 100% !important;
  height: 100% !important;
  min-height: var(--tile-minh) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important; /* keeps "Articles" near bottom */
  box-sizing: border-box !important;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .category-list > li{
    flex-basis: calc((100% - var(--tile-gap)) / 2) !important; /* 2 per row */
  }
}

@media (max-width: 620px){
  .category-list > li{
    flex-basis: 100% !important; /* 1 per row */
    max-width: 520px !important;
  }
}

/* END CHATGPT*/

/* Fix for making homepage category gallery go smoothly from 3 to 2 to 1 column */

@media screen and (max-width: 1105px) {
    section.category-list .category {
        width: 48.2%;
    }
}
@media screen and (max-width: 760px) {
    section.category-list .category {
        box-sizing: border-box;
        margin: 0 0 20px;
        padding: 120px 20px 15px;
        width: 100%;
    }
}
/* RESPONSIVE */

@media (max-width: 768px) {
    .navbar .btn-navbar {
        margin-top: 16px;
        right: -10px;
    }
    .related {
        padding: 30px 25px 25px;
    }
    .related ul {
        margin-left: 0;
    }
    .related h3 {
        padding-left: 0;
    }
    .related ul>li a {
        margin-left: 0;
    }
}
@media (max-width: 480px) {
    #searchBar button {
        color: transparent;
        text-shadow: 0;
        background: transparent;
        border-radius: 0 5px 5px 0;
        border: 0;
        font-size: 18px;
        padding: 0 1.5em;
        height: 50px;
        position: absolute;
    }
    #searchBar button .icon-search {
        display: block;
        text-shadow: none;
        margin-top: 15px;
    }
    #searchBar button:hover .icon-search:hover {
        display: block;
        text-shadow: none;
        margin-top: 15px;
        background-color: transparent;
    }
}
@media (max-width: 480px) {
    #fullArticle .title, .contentWrapper h1 {
        font-size: 24px;
    }
    #fullArticle h2 {
        font-size: 20px;
    }
}


/* Collection Titles  */
.collection-category h2 a {
    color: #54494b;
}

.collection-category h2 {
    font-weight: 400;
    margin: 0 0 20px;
    padding-left: .65%;
    font-family: "Inter",
    sans-serif;
    text-align: center;
}

/* Article Dates */
.articleFoot time.lu {
    display: none;
}

/* Admin Edit */
#fullArticle .admin-edit {
    color: #ffffff;
}