body {
    font-family: Open Sans, Helvetica, serif;
}

.grey {
    background-color: #fafafa !important;
}

.content-wrapper {
    flex: 1;
    /* If the body is set to display: flex with a min-height: 100vh, content will fill page to prevent extra space below footer */
}

#header {
    -ms-flex-direction: row;
    -ms-flex-align: center;
    -ms-flex-wrap: nowrap;
    -webkit-box-align: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 64px;
    line-height: 32px;
}

#header .desktop a {
    font-family: Open Sans, Helvetica, serif !important;
    font-size: 14px;
    border: 0;
    font-weight: 600 !important;
    top: 0;
}

#header .desktop a:hover {
    color: #aaa !important;
    background-color: transparent !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#header-inner {
    -ms-flex-align: center;
    -ms-flex-direction: row;
    -ms-flex-pack: end;
    -ms-flex-wrap: nowrap;
    -webkit-box-align: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: end;
    align-items: center;
    background: #03080b;
    border-bottom: none;
    clear: both;
    color: #c0bdd0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 64px;
    justify-content: flex-start;
    line-height: unset;
    max-width: none;
    min-height: 64px;
    padding: 0 1.25rem 0 0;
    position: relative;
    width: 100%;
}

#header-inner .pull-right {
    float: left;
    flex: 1;
}

#left-logo {
    width: 200px;
}

@media only screen and (max-width: 1024px) {
    #left-logo {
        width: 150px;
    }
}

#header-logo {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    top: 0;
    padding: 0 0 0 30px;
    left: 0;
    -webkit-box-align: end;
    align-items: flex-end;
    height: 100%;
    width: 200px;
    -webkit-box-pack: center;
    justify-content: center;
}

#header-image img {
    height: 28px;
    vertical-align: middle;
    box-sizing: border-box;
}

div#sub_nav-wrap {
    height: 40px;
}

#sub_nav {
    margin: 64px auto;
}

nav #sub_nav>li li {
    line-height: 28px;
}

nav #sub_nav>li {
    line-height: 39px;
}

form[action="tickets.php"] .attached.input {
    position: absolute;
}

@media only screen and (max-width: 760px) {
    form[action="tickets.php"] .action-button.advanced-search.gray-light2 {
        top: 72px;
    }

    form[action="tickets.php"] .attached.input {
        display: none;
    }
}

#basic_search {
    background-color: #f0f2f5;
}

#landing_page {
    background-color: #f0f2f5;
    margin: 0 auto;
    width: 100%;
    display: block;
    padding: 0;
}

#landing_page h1 {
    background-color: #5fa624;
    background-image: url("/assets/bg/header-bga.png");
    margin: 0 auto;
    width: 100%;
    display: block;
    text-align: center;
    color: white;
    padding-top: 36px;
    font-size: 42px;
    font-weight: 400;
}

#landing_page h3 {
    background-color: #5fa624;
    background-image: url("/assets/bg/header-bga.png");
    margin: 0 auto;
    width: 100%;
    display: block;
    text-align: center;
    color: white;
    padding-top: 24px;
    font-size: 18px;
    font-weight: 400;
}

#landing-search {
    background-color: #5fa624;
    background-image: url("/assets/bg/header-bga.png");
    padding: 32px 0;
    max-width: none;
}

#landing-search-inner {
    max-width: 700px;
    display: block;
    margin: 0 auto;
}

.searchArea .inputDiv {
    border-color: rgb(130, 130, 130);
    border-radius: 3px !important;
    position: relative;
}

.searchArea input.search {
    border-radius: 0px !important;
    font-size: 14px;
    color: #333 !important;
    font-family: Open Sans, Helvetica, serif !important;
}

.searchArea .inputDiv::before {
    position: absolute;
    right: 14px;
    top: 12px;
    color: #333;
    font-family: "FontAwesome";
    content: "\f002";
}


.chatButton {
    background-color: white;
    color: black;
    border: 4px solid #4CAF50;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
}



input {
    font-family: Open Sans, Helvetica, serif !important;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    font-family: Open Sans, Helvetica, serif !important;
    font-size: 14px;
}

::-moz-placeholder {
    /* Firefox 19+ */
    font-family: Open Sans, Helvetica, serif !important;
    font-size: 14px;
}

:-ms-input-placeholder {
    /* IE 10+ */
    font-family: Open Sans, Helvetica, serif !important;
    font-size: 14px;
}

:-moz-placeholder {
    /* Firefox 18- */
    font-family: Open Sans, Helvetica, serif !important;
    font-size: 14px;
}

body.client-side {
    background-color: #fafafa;
}

.client-side h1 {
    background-color: #fafafa;
}

.client-side #content {
    border: none;
    margin: 0 auto !important;
    background-color: #fafafa !important;
    border-radius: 0;
}

#index-top {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

#index-top-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 950px;
    text-align: center;
    padding: 6px;
}

.client-side .whitebox,
.client-side #content.whitebox {
    box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    background-color: #fff !important;
    padding: 16px 24px !important;
    border: 1px solid #e1e4e6;
}

.client-side .whitebox.extra-padding,
.client-side #content.whitebox.extra-padding {
    padding: 16px 40px !important;
}

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

    .client-side .whitebox.extra-padding,
    .client-side #content.whitebox.extra-padding {
        padding: 16px 10px !important;
    }
}

.client-side .whitebox h1 {
    background-color: #fff !important;
    margin-bottom: 0;
}

.index-top-box {
    background: #fff;
    width: 295px;
    margin: 8px;
    height: 200px;
    border: 1px solid #e1e4e6;
    box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
}

.index-top-box:hover {
    background: #eee;
    cursor: pointer;
}

#index-top i {
    color: #333 !important;
    font-size: 40px;
    margin-top: 20px;
    margin-left: -20px;
}

.index-top-box .title {
    padding-top: 12px;
    font-weight: 600;
    font-size: 20px;
}

.index-top-box .sub {
    font-size: 14px;
    width: 80%;
    margin: 0 auto;
}

@media screen and (max-width: 700px) {
    #landing_page {
        margin-bottom: 0 !important;
    }

    #landing_page h1 {
        margin: 0 auto !important;
    }
}

#knowledge_base_products,
#knowledge_base {
    text-align: center;
    margin: 8px auto;
}

#knowledge_base_products h1,
#knowledge_base h1 {
    font-weight: 600;
    font-size: 26px;
    margin-bottom: 24px;
    color: #333;
}

#knowledge_base_products .products,
#knowledge_base .products {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

#knowledge_base_products .products .products-box,
#knowledge_base .products .products-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 950px;
    text-align: left;
}

#knowledge_base_products .products .product,
#knowledge_base .products .product {
    width: 450px;
    display: flex;
    margin: 0 8px 16px 8px;
    min-height: 60px;
}

#knowledge_base_products .products .product {
    min-width: 60%;
    width: 60%;
}

#knowledge_base_products .products .product .product-info {
    padding-left: 16px;
}

#knowledge_base_products .products .product div,
#knowledge_base .products .product div {
    display: inline-block;
}

#knowledge_base_products .products .product div .title,
#knowledge_base .products .product div .title {
    font-size: 16px;
    font-weight: 900;
    display: block;
}

#knowledge_base_products .products .product div .desc,
#knowledge_base .products .product div .desc {
    font-size: 14px;
    display: block;
}

#knowledge_base_products .products .product div a,
#knowledge_base .products .product div a {
    color: #5fa624;
    line-height: 22px;
}

#knowledge_base_products .products .product div .title a,
#knowledge_base .products .product div .title a {
    text-decoration: none !important;
    color: #183247;
}

#knowledge_base_products .products .product div a:hover,
#knowledge_base .products .product div a:hover {
    text-decoration: underline !important;
}

#knowledge_base_products img {
    float: none;
    background-color: #5fa624;
    padding: 5px;
    color: #fff;
    border-radius: 3px;
    display: block;
    max-width: 40px;
    margin: auto;
}

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

    #knowledge_base_products .products .product,
    #knowledge_base .products .product {
        width: 300px;
    }
}

.pagination a {
    margin: 5px;
    border: 1px solid black;
}

.page-direction {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.darkmode #content .homepage-knowledgebase #search-kb .search-header h1,
.darkmode #content.search-results #search-kb .search-header h1,
.darkmode #content.article-category #search-kb .search-header h1 {
    color: #03080b !important;
}

.search-results {
    padding: 16px 0;
}

.search-results h2,
.search-results .header {
    font-size: 20px !important;
    color: #475260 !important;
    font-weight: 600 !important;
}

.breadcrumbs {
    margin: 0 0 32px 0;
    font-size: 14px !important;
}

.breadcrumbs a {
    text-decoration: none !important;
    color: #5fa624 !important;
    font-size: 14px;
    border-bottom: none;
    font-weight: 600;
}

.breadcrumbs a:hover {
    text-decoration: underline !important;
}

.search-results .main-box {
    display: flex;
    flex-flow: row wrap;
}

.search-results .main-box .span4 {
    flex: 1 1 0;
}

.search-results .main-box .span4 a {
    text-decoration: none !important;
    color: #5fa624 !important;
    font-size: 15px;
    line-height: 30px;
    border-bottom: none;
}

.search-results .main-box .span4 a:hover {
    text-decoration: underline !important;
}

.search-results .main-box .span8 {
    flex: 4 1 0;
}

.search-results .header {
    font-size: 16px !important;
    margin-bottom: 8px;
}

.search-results li {
    padding: 16px !important;
    color: #333 !important;
    background-color: white;
    margin-top: 16px !important;
    box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
}

.search-results #faq ol {
    font-size: 13px;
}

.search-results #faq a {
    text-decoration: none !important;
    color: #5fa624 !important;
    border-bottom: none;
}

.search-results #faq a:hover {
    text-decoration: underline !important;
}

.search-results #faq b {
    color: #333 !important;
    font-weight: 900 !important;
}

.search-results #faq .details {
    color: #929292 !important;
    margin-top: 8px;
    display: block;
}

.search-results #faq .details i,
.breadcrumbs i {
    font-size: 10px;
    height: 10px;
    width: 10px;
    color: #aaa !important;
    margin-left: 5px;
}

.article-category {
    min-height: 650px;
}

.search-results #faq .details a {
    margin: 0;
    display: inline;
}

@media screen and (max-width: 600px) {
    .search-results .main-box .span4 {
        display: none;
    }

    .article-row .article-list .article-box .article {
        min-width: 300px !important;
    }
}

[data-pagination],
[data-pagination] *,
[data-pagination] *:before,
[data-pagination] *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: auto;
}

[data-pagination] {
    font-size: 8pt;
    line-height: 1;
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    -webkit-text-size-adjust: 100%;
    margin: 0 auto 56px;
    transition: font-size 0.2s ease-in-out;
}

[data-pagination] ul {
    list-style-type: none;
    display: inline;
    font-size: 100%;
    margin: 0;
    padding: 0.5em;
}

[data-pagination] ul li {
    display: inline-block;
    font-size: 100%;
    width: auto;
    border-radius: 3px;
}

[data-pagination]>a {
    font-size: 140%;
}

[data-pagination] a,
[data-pagination] i {
    color: #5fa624 !important;
    font-size: 14px;
    padding: 0.5em;
    line-height: 26px;
}

[data-pagination] li.current a {
    color: white;
}

[data-pagination] a:focus,
[data-pagination] a:hover,
[data-pagination] i:focus,
[data-pagination] i:hover {
    color: #aaa !important;
}

[data-pagination] li.current {
    background: #5fa624;
    color: white !important;
}

/* Disabled & Hidden Styles */
[data-pagination] .disabled,
[data-pagination] [hidden],
[data-pagination] [disabled] {
    opacity: 0.5;
    pointer-events: none;
}

@media (min-width: 350px) {
    [data-pagination] {
        font-size: 10pt;
    }
}

@media (min-width: 500px) {
    [data-pagination] {
        font-size: 12pt;
    }
}

@media (min-width: 700px) {
    [data-pagination] {
        font-size: 14pt;
    }

    .announcements .announcement {
        padding: 24px 0 24px 0;
        border-bottom: 1px solid #ddd;
        position: relative;
        max-width: none !important;
        margin: 0 !important;
    }
}

@media (min-width: 900px) {
    [data-pagination] {
        font-size: 16pt;
    }
}

.article-row {
    padding: 0;
    margin-bottom: 56px;
}

.article-row h1 {
    color: #333;
    font-size: 30px;
    margin-bottom: 24px;
}

.article-row .article-list {
    width: 100%;
    display: flex;
}

.article-row .article-list .article-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 100%;
    min-width: 100%;
    text-align: left;
}

.article-row .article-list .article-box .article {
    margin: 40px 0 0;
    min-height: 60px;
    width: 45%;
    min-width: 45%;
}

.article-row .article-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 16px !important;
}

.article-row .article-title a {
    color: #333;
}

.article-row .article-title a:hover {
    text-decoration: underline !important;
}

.article-row .article-list .article-box .article ul {
    margin: 0;
    padding: 0 0 0 16px;
    display: block;
    font-size: 15px;
}

.article-row .article-list .article-box .article ul li {
    padding: 0 16px 16px 0;
}

.article-row .article-list .article-box .article ul a {
    text-decoration: none !important;
    color: #5fa624 !important;
    border-bottom: none;
}

.article-row .article-list .article-box .article ul a:hover {
    text-decoration: underline !important;
}

#wide-content {
    padding: 32px 72px 72px 72px;
    width: 100%;
    float: right;
    background: white;
}

@media (max-width: 700px) {
    #wide-content {
        float: none;
        padding: 16px;
    }

    #article-page .side {
        display: none;
    }
}

#article-page {
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
    display: flex;
}

#article-page .side {
    background: #fafafa;
    min-width: 300px;
    max-width: 300px;
    padding-top: 32px;
    padding-bottom: 32px;
    border: 1px solid #e1e4e6;
    box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
}

#article-page a {
    text-decoration: none !important;
    color: #5fa624 !important;
    border-bottom: none;
}

#article-page a:hover {
    text-decoration: underline !important;
}

#article-page .side ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    color: #333;
}

#article-page .side ul li {
    padding: 8px 24px;
}

#article-page .side ul li a {
    color: #333 !important;
}

.client-side #faq ol li a {
    padding-left: 0;
}

#article-page .side h2 {
    font-size: 15px;
    font-weight: 600;
    padding-left: 24px;
    padding-bottom: 8px;
    color: #333;
}

#article-page .side .inputDiv {
    margin: 0 24px;
    border-color: rgb(216, 216, 216);
}

#article-page .side .hide {
    display: none;
}

#general-feedback-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: fixed;
    right: 0;
    top: 40%;
    max-height: 50%;
    max-width: 550px;
    box-shadow: 0 0 5px 1px lightgrey;
    background: white;
    overflow-y: scroll;
    font-size: 0.8em;
    z-index: 99;
}

#general-feedback-form>* {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 1em;
}

#general-feedback-close {
    position: absolute;
    left: 0;
    color: #5fa624 !important;
    padding: 0.7em;
}

#general-feedback-close:hover {
    cursor: pointer;
}

#general-feedback-form p {
    width: 100%;
    margin-bottom: 0.7em;
}

#resolved div {
    max-width: 14.25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#general-feedback-textarea {
    width: 100%;
}

#completed div {
    width: 100%;
}

#completed input[type="radio"] {
    display: none;
}

#completed label {
    background: rgb(228, 228, 228);
    border-radius: 5px;
    padding: 0.5em 0;
    margin: 0.2em 0;
}

#completed label:hover {
    background: lightgrey;
}

#completed input[type="radio"]:checked+label {
    background: rgb(189, 189, 189);
}

#general-feedback-button {
    border: .5px solid #8c9aac;
    color: white;
    background: #5fa624;
    width: fit-content;
    margin-bottom: 1em;
}

#general-feedback-button:hover {
    opacity: 0.85;
}

#feedback-form {
    padding-top: 1em;
    display: flex;
    flex-direction: column;
}

#feedback-form.hide {
    display: none;
}

#feedback-form>* {
    margin-top: 1em;
}

.feedback-textarea {
    resize: none;
    border-radius: 3px;
    min-height: 3em;
    outline: none;
    font-size: 14px;
    width: 50%;
    max-width: 400px;
    padding: 0.5em;
}

#feedback-button {
    border: .5px solid #8c9aac;
    color: white;
    background: #5fa624;
    width: fit-content;
}

#feedback-button:hover {
    opacity: 0.85;
}

.hide {
    display: none !important;
}

.rating-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: fixed;
    right: 0;
    top: 50%;
    max-width: 68px;
    box-shadow: 0 0 5px 1px lightgrey;
    background: white;
}

.rating-widget-hide {
    -webkit-animation: smoothHide 2s ease-in 0 forwards;
    animation: smoothHide 2s ease-in 0 forwards;
    animation-fill-mode: forwards;
}

@media (max-width: 700px) {
    .rating-widget {
        display: none;
    }
}

.rating-widget>* {
    padding: 0.3rem;
}

.rating-option {
    font-size: 2em;
    height: fit-content;
    width: fit-content;
}

#rating-good {
    color: #5fa624 !important;
}

#rating-neutral {
    color: grey !important;
}

#rating-bad {
    color: rgba(255, 0, 0, 0.747) !important;
}

#rating-close {
    color: grey !important;
}

.rating-option:hover,
#rating-close:hover {
    cursor: pointer;
    opacity: 0.8;
}

#rating-text {
    font-size: 12px;
}

#imported .article-title {
    color: #333;
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 8px;
}

#imported .updated {
    color: #333;
    font-size: 14px;
}

#imported .bleed {
    margin-top: 16px !important;
    margin-bottom: 64px;
}

#imported .thread-body p {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

#imported .thread-body {
    font-size: 14px;
}

#imported section header {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
}

#imported section.attach a {
    font-size: 15px;
    margin-bottom: 10px;
}

#imported section.attach i {
    color: #333 !important;
}

#imported section.attach .box-attach {
    vertical-align: middle;
    display: flex;
}

#content.openticket {
    max-width: 600px;
    margin-top: 40px !important;
    display: flex;
    justify-content: center;
    color: #333 !important;
    flex-direction: column;
    margin-bottom: 64px !important;
}

#content.openticket a {
    color: #5fa624 !important;
}

#content.openticket a:hover {
    text-decoration: underline !important;
}

.client-side.tickets-page h1 {
    color: #333;
}

.client-side .whitebox.search {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 24px 0 32px;
    padding: 0 !important;
}

.client-side .whitebox .search-input:before {
    position: absolute;
    left: 14px;
    top: 14px;
    font-size: 16px;
    color: #ccc;
    font-family: "FontAwesome";
    content: "\f002";
}

.client-side .whitebox .search-input {
    flex: 4 1 auto;
    position: relative;
}

.client-side .whitebox .ticket-status-box:before {
    content: "";
    position: absolute;
    background-color: #eee;
    width: 2px;
    height: 60%;
    bottom: 8px;
    right: -12px;
}

.client-side .whitebox .ticket-status-box {
    flex: 1 1 auto;
    margin-right: 12px;
    position: relative;
}

#content .search select {
    padding-left: 8px !important;
    text-indent: 0px !important;
    width: 100%;
    height: 40px !important;
    color: #333 !important;
    font-size: 14px !important;
    border: 0 !important;
}

#content .search select:focus,
#content .search input:focus {
    border: 0 !important;
    outline-width: 0 !important;
}

#content .search input {
    width: 100% !important;
    height: 40px !important;
    text-indent: 45px !important;
    padding: 0 !important;
    margin-left: 0 !important;
    border: 0 !important;
}

#content.openticket h1 {
    text-align: center;
    color: #333 !important;
    font-size: 33px;
    font-weight: 300;
    margin-bottom: 12px;
    margin-top: 24px;
}

#content.openticket .ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
}

#content.openticket .ticket-header h1 {
    margin-top: 0px;
}

#content.openticket .ticket-header .action-button {
    background: #fff;
    padding: 6px 16px;
    box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
}

#content.openticket .ticket-header .action-button:hover {
    border: 1px solid #ccc;
    box-shadow: 0 0 1px #ccc;
    -webkit-box-shadow: 0 0 1px #ccc;
}

#content.openticket .ticket-header .action-button:before {
    background-color: #5fa624 !important;
}

#content.openticket .ticket-header .action-button>i {
    fill: #555 !important;
    color: #555 !important;
    width: 14px;
    margin-right: 0;
}

#content.openticket .ticket-header .action-button:hover>i {
    fill: #5fa624 !important;
    color: #5fa624 !important;
}

#content.openticket .ticket-header .action-dropdown {
    display: none;
    width: fit-content;
    position: absolute;
    z-index: 10;
    margin-top: 8px;
}

#content.openticket .ticket-header .action-dropdown ul {
    text-align: left;
    font-size: 0.95em;
    min-width: 140px;
    list-style: none;
    background: #FFF;
    border: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
    overflow: visible;
    padding: 4px 0;
    margin: 0;
}

#content.openticket .ticket-header .action-dropdown ul li {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 18px;
    font-size: 14px;
}

#content.openticket .ticket-header .action-dropdown ul li>a {
    display: flex;
    align-items: center;
    line-height: 30px;
    color: #555 !important;
    text-decoration: none !important;
    padding: 3px 10px;
    white-space: nowrap;
}

#content.openticket .ticket-header .action-dropdown ul li>a:hover,
#content.openticket .ticket-header .action-dropdown ul li.active>a:hover {
    /* background-color: #08C; */
    /* color: #FFF !important; */
    background-color: #e0e6d8;
    color: #5fa624 !important;
    cursor: pointer;
}

#content.openticket .ticket-header .action-dropdown ul li a:hover>i {
    /* color: #fff !important;
    fill: #fff !important; */
    color: #5fa624 !important;
    fill: #5fa624 !important;
}

#content.openticket .ticket-header .action-dropdown ul li a>i {
    background-position: 0 0 !important;
    width: 16px !important;
    height: 16px !important;
    top: 0px;
    font-size: 16px;
    background-repeat: no-repeat !important;
    margin: 0 10px 0 0;
    color: #555 !important;
    fill: #555 !important;
}

#content.openticket p,
#content.openticket .subtitle {
    text-align: center;
    font-size: 14px;
    color: #333;
    line-height: 26px;
    font-weight: 400;
    margin: 0 auto;
    margin-top: 8px;
    max-width: 600px;
}

#content.openticket .subtitle {
    margin-bottom: 30px;
}

#content.openticket .form-header {
    display: none;
}

#content.openticket td input,
#content.openticket input#username,
#content.openticket td select,
#content.openticket #open-text input {
    width: 100% !important;
    height: 50px !important;
    text-indent: 8px !important;
    padding: 0 !important;
    margin-left: 0 !important;
}

#content.openticket td select {
    padding-left: 8px !important;
    text-indent: 0px !important;
}

#content.openticket #open-text {
    padding: 0 16px;
}

#content.openticket select {
    width: 100%;
    height: 50px !important;
    color: #333 !important;
    font-size: 14px !important;
}

#content.openticket label,
#content.openticket label span.required {
    font-size: 15px;
    font-weight: 600;
}

#content.openticket .article-help {
    font-size: 20px;
    font-weight: 400;
}

@media only screen and (max-width: 760px) {
    #content.openticket .article-help {
        font-size: 14px;
    }
}

#content.openticket ul {
    padding-left: 22px;
    margin-top: 8px;
    margin-bottom: 40px;
}

#content.openticket ul li {
    padding: 4px 0;
}

#content.openticket .register-message {
    text-align: center;
    margin-top: 32px;
    font-size: 14px;
}

#content.login h1,
#content.login div {
    color: #333 !important;
}

#content.openticket a.signin {
    padding: 0;
    border: none;
    top: 0;
    background-color: transparent !important;
}

.header-user {
    color: white;
    font-size: 13px;
}

#content.openticket .questions-box ul li a {
    font-size: 15px;
}

f #content.openticket .hide {
    display: none !important;
}

#content.openticket #open-ticket-wizard {
    margin-top: 32px;
    margin-bottom: 40px;
}

#content.openticket .wizard-button {
    background-color: #03080b !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    text-transform: capitalize;
    color: #ffffff;
    border: medium none;
    left: 0;
    right: 0;
    bottom: 40px;
    width: fit-content;
    font-size: 16px;
    text-align: center;
    padding: 8px 24px;
    display: block;
    border-radius: 5px;
    letter-spacing: 0px;
}

#content.openticket .wizard-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

#content.openticket .wizard-button.prev {
    background-color: #eaeaea !important;
    color: #333;
}

#content.openticket .step-footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.messages {
    width: 100%;
    margin: 0 auto;
}

#msg_error {
    animation: none !important;
    border-right-width: 1px;
    border-radius: 2px;
    font-size: 17px !important;
}

#msg_notice {
    animation: none !important;
    border-right-width: 1px;
    border-radius: 2px;
    font-size: 17px !important;
}

#msg_warning {
    animation: none !important;
    border-right-width: 1px;
    border-radius: 2px;
}

a[href="pwreset.php"] {
    text-align: left !important;
    padding-top: 0 !important;
    display: inline !important;
    width: auto !important;
    margin-top: 0 !important;
}

.client-side form h3 {
    color: #333;
    font-size: 20px;
    font-weight: 600;
    margin: 24px 0 16px 0;
}

.client-side label {
    display: block;
}

.client-side button[type="submit"],
.client-side input[type="submit"],
.client-side .primary.button {
    color: white !important;
    font-weight: 600;
}

.client-side button[type="submit"]:hover,
input[type="submit"]:hover,
.primary.button:hover {
    color: white !important;
    font-weight: 600;
}

.client-side #content.openticket form input[name="24e77080ca6b04"],
.client-side #content.openticket form input[name="c104976555094f"],
.client-side #content.openticket form input[name="9a50185468bda5"] {
    width: 66% !important;
}

.client-side #content.openticket form .action-button {
    font-size: 15px;
    font-family: Open Sans, Helvetica, serif !important;
}

.client-side #content.openticket form input[name="24e77080ca6b04-ext"],
.client-side #content.openticket form input[name="c104976555094f-ext"],
.client-side #content.openticket form input[name="9a50185468bda5-ext"] {
    width: 15% !important;
}

.client-side .error {
    color: #d62705 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.client-side .message-page-title {
    margin-top: 64px;
    margin-bottom: 16px;
}

.client-side .min-height {
    min-height: 500px;
}

.client-side #overlay {
    background: #000 !important;
    opacity: 0.2 !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 2000;
}

.client-side .title-margin-bottom {
    margin-bottom: 32px !important;
}

form#ticketForm tr.client-deets td {
    padding: 10px 0;
}

.client-side .redactor-styles {
    width: 100%;
}

.client-side .redactor-styles p {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 1em !important;
    max-width: none !important;
}

.client-side .redactor-statusbar {
    margin: 0 !important;
}

.client-side #content.openticket .redactor-toolbar a.redactor-button-active {
    background: rgb(240, 240, 240);
}

.client-side #content.openticket .redactor-toolbar a {
    color: rgba(0, 0, 0, 0.85) !important;
    margin-bottom: 0 !important;
}

.client-side #content.openticket .redactor-toolbar a:hover {
    text-decoration: none !important;
}

.client-side #content.openticket .redactor-toolbar i {
    color: rgba(0, 0, 0, 0.85) !important;
    margin-bottom: 0 !important;
    display: inline !important;
}

.client-side #content.openticket .questions-box ul li a {
    font-weight: 400;
}

.client-side #content.openticket ul.questions {
    padding-left: 22px;
    margin-top: 0;
    margin-bottom: 0;
}

.client-side.pwreset-page form[action="pwreset.php"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    padding: 0 !important;
    margin-top: 32px !important;
}

#ticketTable,
#chatTable {
    border: none;
    width: 100%;
}

#ticketTable th,
#chatTable th {
    background-color: #fff;
    text-transform: uppercase;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 2px solid #eee;
}

#ticketTable tr:hover td,
#chatTable tr:hover td {
    background: #fff !important;
}

#ticketTable tr td,
#chatTable tr td{
    background-color: #fff;
    border-bottom: 2px solid #eee;
    padding: 12px px;
}

#ticketTable tr:nth-child(odd) td,
#chatTable tr:nth-child(odd) td {
    background-color: #fff;
}

#ticketTable a,
#ticketTable .link,
#chatTable a,
#chatTable .link {
    color: #333;
    background: transparent !important;
    font-size: 14px !important;
}

#ticketTable tr td,
#ticketTable tr td b,
#chatTable tr td,
#chatTable tr td b {
    font-size: 14px !important;
    color: #3b4450 !important;
}

#ticketTable th:first-child,
#chatTable th:first-child,
#chatTable td:first-child {
    padding-left: 34px;
}

.client-side a.Icon.phoneTicket,
.client-side a.Icon.webTicket {
    border: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #333 !important;
    border: none;
    background-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button i {
    font-size: 12px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button i,
.dataTables_wrapper .dataTables_paginate .paginate_button a {
    color: #333 !important;
}

.dataTables_wrapper .dataTables_paginate {
    margin-right: 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 8px;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    cursor: hand;
    color: #333 !important;
    border: none;
}

.dataTables_wrapper .dataTables_info {
    font-size: 13px;
    float: right;
    padding-top: 19px;
    clear: none;
    margin-right: 5px;
}

.client-side .whitebox.table {
    padding: 0 !important;
    padding-bottom: 8px !important;
    border: 1px solid #e1e4e6;
}

.badge.awaiting-agent-reply,
.badge.open {
    color: #fff;
    background-color: #1e73be;
}

.badge.awaiting-your-reply {
    color: #fff;
    background-color: #f0ad4e;
}

.badge.closed {
    color: #fff;
    background-color: #5cb85c;
}

#ticketTable .view-button:hover,
#chatTable .view-button:hover {
    background: #c9cdd0;
}

#ticketTable .view-button,
#chatTable .view-button {
    margin: 0px !important;
    box-shadow: none;
    -webkit-box-shadow: none;
    padding: 5px 20px !important;
    color: #515d6d;
    border: initial !important;
    background: #dcdfe2;
    letter-spacing: 1px;
    font-weight: 700;
}

.badge {
    display: inline-block;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 2px;
}

.no-tickets-message {
    margin: 80px auto;
    width: 100%;
    text-align: center;
}

.sorting {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATAgMAAAAPPt5fAAAACVBMVEUAAADIyMjl5eVIBBP/AAAAAXRSTlMAQObYZgAAAClJREFUCNdjwAYEwGQKiGDsBJFsTA5AUoJhAqZaiDhEDVg9RC/MHEwAANsMA91AQfd/AAAAAElFTkSuQmCC) no-repeat center right !important;
}

.sorting_asc {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATAQMAAABInqSPAAAABlBMVEUAAABVVVUT3Vn+AAAAAXRSTlMAQObYZgAAAB1JREFUCNdjwAkcgPgBAwPjBwYG5h8MDOx/GAgBAKRJBBCQbHkwAAAAAElFTkSuQmCC) no-repeat center right !important;
}

.sorting_desc {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATAQMAAABInqSPAAAABlBMVEUAAABVVVUT3Vn+AAAAAXRSTlMAQObYZgAAABxJREFUCNdjIATY/zAwMP9gYGD8AOQ8AGIHnEoBkNkEEEbbutQAAAAASUVORK5CYII=) no-repeat center right !important;
}

.sorting_asc_disabled {
    background: url("../img/datatables/sort_asc_disabled.png") no-repeat center right !important;
}

.sorting_desc_disabled {
    background: url("../img/datatables/sort_desc_disabled.png") no-repeat center right !important;
}

.client-side.tickets-page #content.openticket {
    max-width: calc(1264px - 2%);
    margin-top: 0 !important;
}

.client-side.tickets-page #content.openticket h3 {
    margin: 8px 0 16px 2px;
}

.client-side.tickets-page #content.openticket h1 {
    text-align: left;
    margin-bottom: 0;
}

.client-side .ticket-details {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    margin-bottom: 24px;
    margin-top: 8px;
}

.client-side .ticket-details>div {
    flex: 1 1 auto;
    font-size: 17px;
}

.client-side .ticket-details>div>div {
    margin: 8px 0;
}

.client-side .ticket-details>div span.title {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    width: 125px;
}

.client-side.tickets-page #content.openticket form .redactor-box.redactor-styles-on .redactor-toolbar.redactor-toolbar {
    padding: 4px 4px 0 4px;
}

.client-side.tickets-page #content.openticket .thread-entry.message .header time,
.client-side.tickets-page #content.openticket .thread-entry.response .header time {
    float: right;
}

.client-side.tickets-page #content.openticket .thread-entry.message .header:before {
    border-right-color: #f0ad4e;
}

.client-side.tickets-page #content.openticket .thread-entry.response .header:before {
    border-left-color: #1e73be;
}

.client-side.tickets-page #content.openticket .thread-entry p {
    text-align: left;
    margin: initial !important;
    max-width: none;
}

.client-side.tickets-page #content.openticket .thread-entry.message .header,
.client-side.tickets-page #content.openticket .thread-entry.message .header b {
    color: white !important;
    background: #f0ad4e !important;
    font-size: 15px !important;
}

.client-side.tickets-page #content.openticket .thread-entry.response .header,
.client-side.tickets-page #content.openticket .thread-entry.response .header b {
    color: white !important;
    background: #1e73be !important;
    font-size: 15px !important;
}

.client-side.tickets-page #content.openticket form {
    background: white;
}

.client-side.tickets-page #content.openticket .thread-event .description {
    font-size: 14px;
}

.client-side .thread-body h1 {
    background-color: #fff;
}

.client-side .company-login {
    font-size: 17px;
    font-weight: 600;
    margin: 16px 0;
    display: block;
}

.client-side .company-login>a:nth-child(1) {
    font-weight: 500;
}

.client-side.account-page h1,
.client-side.pwreset-page h1 {
    margin: 0;
}

.client-side.account-page div.error a strong {
    font-size: 13px !important;
}

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

    .client-side input[value="Create Ticket"],
    .client-side input[value="Cancel"] {
        padding: 9px 30px !important;
    }
}

.staff-side h2 {
    color: #444;
}

.staff-side #content {
    margin: 24px auto;
}

.staff-side table.table th {
    color: #444;
}

.staff-side form[action="kb.php"] .attached.input,
.staff-side form[action="orgs.php"] .attached.input,
.staff-side form[action="users.php"] .attached.input,
.staff-side form[action="tasks.php"] .attached.input,
.staff-side form[action="tickets.php"] .attached.input {
    position: absolute;
    top: 71px;
    right: calc(1% + 5px) !important;
}

.staff-side table.list {
    box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    margin: 8px 0 8px 0;
}

.staff-side table.list thead th:first-child a.desc {
    height: auto !important;
}

.staff-side table.list thead th,
.staff-side table.list thead th a {
    color: #333;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 0 8px 10px;
    height: auto;
}

table td.checkbox {
    padding: 0 !important;
}

.staff-side .dataTables_wrapper .dataTables_filter {
    float: none;
    margin-left: 0;
}

.staff-side .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0;
    box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    border-radius: 2px;
    height: 40px;
}

.staff-side table.list.dataTable thead th,
.staff-side table.list.dataTable thead th a {
    color: #333;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px !important;
    height: auto;
}

.staff-side #nav.pull-right {
    top: 19px;
    position: static;
}

.staff-side .pull-left.flush-left h2 a {
    color: #444;
}

.staff-side .pull-left.flush-left h2 a:hover {
    color: #666;
}

.staff-side table.list,
.staff-side #ticketTable {
    border-radius: 2px;
}

.staff-side .configureQ i.icon-fixed-width.icon-pencil {
    background-position: 3px 2px;
}

.staff-side .action-dropdown ul li>a,
.staff-side .noclick-dropdown ul li>a {
    display: flex;
}

.staff-side .button.action-button:hover {
    border: 0.5px solid #8c9aac !important;
}

.staff-side .sticky.bar.fixed .button.action-button:hover {
    border: 0.5px solid #fff !important;
}

.staff-side .sticky.bar.fixed .icon-hand-right,
.staff-side .sticky.bar.fixed .icon-hand-right::before {
    color: white !important;
    fill: white !important;
}

.staff-side .sticky.bar.fixed .action-button a i:before,
.staff-side .sticky.bar.fixed .action-button a i,
.staff-side .sticky.bar.fixed .action-button a
.staff-side .sticky.bar.fixed .action-button span {
    color: white !important;
}

.staff-side .action-button {
    box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
}

.staff-side table.list thead th:a {
    border: none;
    border-radius: 0;
}

.staff-side table.list td:first-child,
.staff-side table.list td,
.staff-side table.list td a {
    font-size: 12px !important;
}

.staff-side form#users-list table.list td,
.staff-side table.list td {
    border-bottom: 2px solid #eee !important;
    color: #444;
    border-radius: 0;
}

.staff-side table.list tfoot td {
    border: none !important;
}

.staff-side table.list th {
    border-bottom: 2px solid #eee !important;
    border-radius: 0;
}

.staff-side table.list .osta_helptopic {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 150px;
}

.staff-side table.list tbody tr:hover td {
    background-color: #fafafa;
}

.staff-side.tickets-page .redactor-box.redactor-styles-on .redactor-toolbar.redactor-toolbar {
    padding: 0;
}

.staff-side.tickets-page .thread-entry.message .header:before,
.staff-side.tickets-page .thread-entry.message .header:after {
    border-left-color: #f0ad4e;
}

.staff-side.tickets-page .thread-entry.response .header:before {
    border-right-color: #1e73be;
}

.staff-side.tickets-page .thread-entry.note .header:before,
.staff-side.tickets-page .thread-entry.note .header:after {
    border-right-color: #868686;
}

.staff-side.tickets-page .thread-entry::before {
    border-top: 0px solid #f3f3f5;
}

.staff-side.tickets-page #response_options>form {
    border-top: 0.5px solid #cfd4d6;
}

.staff-side .thread-preview-entry.response .header,
.staff-side.tickets-page .thread-entry.response .header,
.staff-side.tickets-page .thread-entry.response .header b {
    color: white !important;
    background: #1e73be !important;
    font-size: 15px !important;
}

.staff-side .thread-preview-entry .header .thread-name span:first-child,
.staff-side .thread-preview-entry.collapsed.response .header .thread-name span:first-child {
    color: white !important;
}

.staff-side .thread-preview-entry .header .thread-name span {
    font-size: 14px !important;
}

.staff-side .thread-preview-entry .header time,
.staff-side.tickets-page .thread-entry .header time {
    color: white;
    margin-right: 8px;
}

.staff-side .thread-preview-entry.system .header time,
.staff-side.tickets-page .thread-entry.system .header time {
    color: #505050;
    margin-right: 8px;
}

.staff-side .thread-preview-entry.message .header,
.staff-side.tickets-page .thread-entry.message .header,
.staff-side.tickets-page .thread-entry.message .header b {
    color: white !important;
    background: #f0ad4e !important;
    font-size: 15px !important;
}

.staff-side .thread-preview-entry.note .header,
.staff-side.tickets-page .thread-entry.note .header,
.staff-side.tickets-page .thread-entry.note .header b {
    color: white !important;
    background: #868686 !important;
    font-size: 15px !important;
}

.staff-side.tickets-page .thread-entry .muted-button {
    border: 0.5px solid rgba(255, 255, 255, 0.21);
}

.staff-side.tickets-page .thread-entry i.icon-caret-down::before {
    right: -3px;
    top: 1px;
    content: "\f0d7";
}

.staff-side.tickets-page i.icon-caret-down[class^="icon-"]::before {
    color: #fff !important;
}

.staff-side.tickets-page .thread-event .description {
    font-size: 14px;
}

.staff-side .redactor-styles {
    width: 100%;
}

.staff-side .redactor-styles p {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 1em !important;
}

.staff-side .redactor-statusbar {
    margin: 0 !important;
}

.staff-side .redactor-toolbar a.redactor-button-active {
    background: rgb(240, 240, 240);
}

.staff-side .redactor-toolbar a {
    color: rgba(0, 0, 0, 0.85) !important;
    margin-bottom: 0 !important;
}

.staff-side .redactor-toolbar a:hover {
    text-decoration: none !important;
}

.staff-side .redactor-toolbar i {
    color: rgba(0, 0, 0, 0.85) !important;
    margin-bottom: 0 !important;
    display: inline !important;
}

.staff-side .redactor-box.redactor-styles-on {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px !important;
}

.staff-side .redactor-box {
    border-radius: 2px !important;
}

.staff-side.tickets-page .tixTitle h3 {
    margin: 8px 0 16px 2px;
    font-size: 21px;
    font-weight: normal;
}

.staff-side.tickets-page #content.tickets .sticky.bar.fixed .flush-left h2.tickettitle a {
    color: white !important;
}

.staff-side.tickets-page #content.tickets .flush-left h2.tickettitle a {
    color: #333 !important;
    font-size: 33px;
    font-weight: 300;
}

.staff-side .whitebox {
    box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    background-color: #fff !important;
    padding: 8px 16px !important;
    border: 1px solid #e1e4e6;
    border-radius: 1px;
}

.staff-side #response_options>form {
    border-radius: 6px;
}

.staff-side .whitebox.ticket_info th {
    color: #444 !important;
    font-weight: 600;
}

.staff-side .whitebox.ticket_info tr td i {
    top: 5px;
}

.staff-side .whitebox.ticket_info tr td {
    padding: 3px 8px !important;
}

.staff-side table.ticket_info.custom-data td,
.staff-side table.ticket_info.custom-data th {
    border: none;
    padding: 4px !important;
    font-size: 13px;
}

.staff-side .overdueTicket-container {
    left: -20px;
}

.staff-side.tickets-page #tasks table.list th {
    padding: 8px 0 8px 10px !important;
}

.staff-side #tasks a.green.button.action-button.ticket-task-action {
    padding: 6px 16px !important;
}

.staff-side form[action="tasks.php"] table.list td {
    text-align: left;
}

.staff-side form[action="tasks.php"] table.list th {
    width: auto !important;
}

.client-side.tickets-page i.icon-upload,
.client-side.open-page i.icon-upload,
.staff-side.tickets-page i.icon-upload {
    top: 4px;
}

.staff-side #header-inner {
    padding: 0 !important;
}

.staff-side #canned-box .select2 {
    font-size: 13px !important;
    font-family: "MS Shell Dlg 2", Open Sans, Helvetica, serif !important;
}

.staff-side.tickets-page .select2-container,
.staff-side.tickets-page .select2-search__field {
    font-size: 13px !important;
    font-family: "MS Shell Dlg 2", Open Sans, Helvetica, serif !important;
}

/* .staff-side #ccs .select2-selection input.select2-search__field {
    height: 0;
  }
  .staff-side #ccs .select2-selection li {
    padding: 4px;
    margin-bottom: 2px;
  }
  .staff-side #ccs .select2-selection {
    border: 0.5px solid #cacaca !important;
    width: \;
  } */

.staff-side #mycollabs .select2 {
    margin-right: 10px !important;
}

.staff-side #mycollabs .select2-selection__choice {
    padding: 2px 5px;
}

.staff-side #mycollabs .select2-selection--multiple {
    padding: 0 5px;
}

.staff-side #mycollabs .select2-container--classic.select2-container--open .select2-selection--multiple,
.staff-side.tickets-page .select2-selection.select2-selection--multiple,
.staff-side.tickets-page .select2-dropdown.select2-dropdown--below {
    border-color: #bfbfbf !important;
}

.staff-side #mycollabs ul.select2-selection__rendered {
    padding: 0;
}

.staff-side #mycollabs .select2-search__field {
    margin: 0;
    height: 24px;
    padding-left: 0;
    margin-top: 5px;
}

.staff-side #manage_collaborators table td {
    padding: 8px 0;
}

.staff-side #manage_collaborators label.inline.checkbox {
    margin-top: 3px;
    vertical-align: top;
}

.staff-side #manage_collaborators img.avatar {
    margin-right: 8px;
    margin-top: 3px;
    vertical-align: top;
}

@-webkit-keyframes loader {
    0% {
        width: 0;
    }

    20% {
        width: 10%;
    }

    25% {
        width: 24%;
    }

    43% {
        width: 41%;
    }

    56% {
        width: 50%;
    }

    66% {
        width: 52%;
    }

    71% {
        width: 60%;
    }

    75% {
        width: 76%;
    }

    94% {
        width: 86%;
    }

    100% {
        width: 100%;
    }
}

@keyframes loader {
    0% {
        width: 0;
    }

    20% {
        width: 10%;
    }

    25% {
        width: 24%;
    }

    43% {
        width: 41%;
    }

    56% {
        width: 50%;
    }

    66% {
        width: 52%;
    }

    71% {
        width: 60%;
    }

    75% {
        width: 76%;
    }

    94% {
        width: 86%;
    }

    100% {
        width: 100%;
    }
}

.summary-progress-bar {
    border-radius: 60px;
    overflow: hidden;
    width: 100%;
}

.summary-progress-bar span {
    display: block;
}

.summary-bar {
    background: rgba(0, 0, 0, 0.075);
}

.summary-progress {
    -webkit-animation: loader 10s ease;
    animation: loader 10s ease;
    background: #75b800;
    color: #fff;
    padding: 5px;
    width: 0;
}

.summary-progress-bar {
    left: 50%;
    max-width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
    position: relative;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

#content.openticket .no-related {
    display: block;
    font-weight: 400;
    font-size: 15px;
    margin-top: 16px;
    color: red;
}

#content.openticket .didnt-help input {
    padding: 0 24px !important;
    margin-top: 24px !important;
}

#content.openticket .lang-warning {
    color: red;
}

.active-collabs {
    display: inline-block;
    margin: 5px;
}

.client-side.tickets-page .icon-group {
    display: block;
    float: left;
}

.staff-side .company-info-table {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    position: relative;
    padding: 0 !important;
    margin-bottom: 10px;
}

.staff-side .company-info-table .action-button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 8px !important;
}

.staff-side .company-info-table>div {
    width: 100%;
    padding: 8px 32px 24px;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    box-sizing: border-box;
}

.staff-side .company-info {
    margin-top: 16px;
    max-width: 20%;
    width: 20%;
    flex: 1 1 auto;
}

.staff-side .company-info-info {
    display: block;
    bottom: 10px;
    right: 10px;
    position: absolute;
}

.staff-side .company-info-box {
    padding: 0 16px 16px 16px;
}

.staff-side .company-info-box .company-info {
    max-width: 100%;
    width: 100%;
}

.staff-side .company-info-title {
    font-weight: 600;
    font-size: 13px;
}

.staff-side .company-info-details {
    font-size: 13px;
}

@media screen and (max-width: 800px) {
    .staff-side .company-info {
        max-width: 50%;
        width: 50%;
    }
}

.staff-side .alerts-container {
    margin-bottom: 8px;
}

.staff-side .company-alert {
    color: white;
    padding: 8px 16px;
    border-radius: 2px;
    margin-bottom: 4px;
}

.staff-side .company-alert.danger {
    background-color: #f2dede;
    border: 1px solid #eed3d7;
    border-left: 5px solid #b94a48;
    color: #b94a48 !important;
}

.staff-side .company-alert.danger a {
    color: #b94a48 !important;
}

.staff-side .company-alert.info {
    background-color: #d9edf7;
    border: 1px solid #bce8f1;
    border-left: 5px solid #3a87ad;
    color: #3a87ad !important;
}

.staff-side .company-alert.info a {
    color: #3a87ad !important;
}

.staff-side .company-alert a:hover {
    text-decoration: underline !important;
}

.staff-side .company-label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: normal;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}

.client-side .thread-body pre,
.staff-side .thread-body pre {
    font-size: 13px;
}

.staff-side .company-label.info {
    background-color: rgb(104, 163, 213);
}

.staff-side .company-label.success {
    background-color: #5cb85c;
}

.staff-side .company-label.danger {
    background-color: #d9534f;
}

.staff-side .company-label.default {
    background-color: #aaa;
}

.staff-side .company-label.orange {
    background-color: #eea236;
}

.client-side #ticketThread .action-button.show-images,
.staff-side #ticketThread .white.button.action-button.show-images {
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.21);
    border: 0.5px solid rgba(255, 255, 255, 0.21);
    box-shadow: none;
    -webkit-box-shadow: none;
    font-size: 13px;
    letter-spacing: 0px;
    color: white !important;
}

.client-side #ticketThread .action-button.show-images {
    line-height: 21px;
    top: -4px;
    margin-left: 8px;
}

.client-side #ticketThread .action-button .icon-picture {
    top: 1px !important;
}

.client-side #ticketThread .action-button .icon-picture,
.staff-side #ticketThread .white.button.action-button .icon-picture {
    color: white !important;
    fill: white !important;
}

.staff-side #ticket-preview_container #threadPreview .thread-info {
    width: 100%;
}

.staff-side #ticket-preview_container .ticket_info th {
    vertical-align: top;
}

.staff-side #ticket-preview_container #threadPreview .thread-info .thread-name span:nth-child(2) {
    float: right;
}

.staff-side #ticket-preview_container .ticket_info tr td {
    padding: 1px 8px !important;
}

#knowledge_base .products {
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

#knowledge_base .products .products-box-2 {
    text-align: left;
    width: 50%;
}


#knowledge_base .products .products-box-2 ul {
    margin-top: 0;
    color: #333;
    list-style: square;
    padding: 0 0 0 18px;
}

#knowledge_base .products .products-box-2 ul li {
    margin: 8px 0;
    font-size: 15px;
}

#knowledge_base .products .products-box-2 h3 {
    color: #333;
    font-weight: 600;
    margin-top: 0;
    width: 100%;
    font-size: 18px;
    text-align: left;
}

.client-side #top-viewed a,
.client-side #most-recommended a {
    font-size: 14px !important;
    color: #5fa624 !important;
}

.client-side #top-viewed a:hover,
.client-side #most-recommended a:hover {
    text-decoration: underline !important;
}

@media screen and (max-width: 400px) {
    #knowledge_base_products .main-product.whitebox .image {
        margin-left: 8px;
    }

    #knowledge_base_products .main-product.whitebox {
        padding: 16px 0 !important;
    }
}

@media screen and (max-width: 800px) {
    #knowledge_base .products .products-box-2 {
        width: 100%;
    }

    #webinars_base .webinars-column .webinar-box-2 {
        width: 100%;
    }
}

ul.subcategory-list {
    padding: 0 !important;
    list-style: none;
}

ul.subcategory-list i.icon-folder-open-alt,
ul.subcategory-list i.icon-folder-open-alt:before {
    color: #333 !important;
    fill: #333 !important;
}

.jb-overflowmenu-menu-primary div.customQ-dropdown {
    top: 40px;
    left: 0;
}

.staff-side.tickets-page table.list th:first-child,
.staff-side.index-page table.list th:first-child {
    background-position: center;
}


.staff-side .dataTables_wrapper .dataTables_paginate {
    float: left;
    font-size: 12px;
}

.staff-side .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 0;
    padding: 0;
    margin-left: 0;
    border: none;
    border-radius: 0;
}

.staff-side .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: none !important;
    font-weight: bold;
    border: none !important;
}

.staff-side .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #333 !important;
    border: none;
    background: none;
    font-weight: bold;
}

.staff-side .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 0;
    padding: 0 5px;
    margin-left: 0;
}

.staff-side .paginate_button.previous {
    margin-right: 5px;
}

.staff-side .paginate_button.next {
    margin-left: 5px;
}

.staff-side .dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: none;
    box-shadow: none;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.staff-side table.list.queue.tickets tfoot td:first-child {
    padding-left: 18px;
}

.staff-side #new-reply-icon,
.staff-side #long-thread-icon {
    float: right;
}

.staff-side table.list.queue.tickets th.osta_priority {
    padding: 0 !important;
}

.staff-side table.list .icon-lock {
    top: 0 !important;
}

.staff-side td.with-select {
    padding: 0 7px !important;
}

.tickets .select2-125 .select2.select2-container.select2-container--default {
    width: 125px !important;
}

.tickets .select2-125 .form_table .select2.select2-container.select2-container--default {
    width: 125px !important;
}

.tickets .select2-125 .form_table .select2-container--default .select2-selection--multiple {
    width: 125px;
}

.tickets .select2-200 .select2.select2-container.select2-container--default {
    width: 200px !important;
}

.tickets .select2-200 .form_table .select2.select2-container.select2-container--default {
    width: 200px !important;
}

.tickets .select2-200 .form_table .select2-container--default .select2-selection--multiple {
    width: 200px;
}


.staff-side .no-border .select2-container--default .select2-selection--single {
    height: auto;
    border: none;
    font-family: "Open Sans", Helvetica;
    font-size: 14px;
}

.staff-side .no-border .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
}

.staff-side .no-border .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #128dbe;
    line-height: 18px;
}

.staff-side .no-border .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 14px;
}


.w3-ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.w3-ul li {
    padding: 8px 16px;
    border-bottom: 1px solid #ddd
}

.w3-ul li:last-child {
    border-bottom: none
}

.w3-tooltip,
.w3-display-container {
    position: relative
}

.w3-tooltip .w3-text {
    display: none
}

.w3-tooltip:hover .w3-text {
    display: inline-block
}

.w3-ripple:active {
    opacity: 0.5
}

.w3-ripple {
    transition: opacity 0s
}

.w3-sidebar {
    height: 100%;
    width: 300px;
    background-color: #fff;
    position: fixed !important;
    z-index: 1;
    overflow: auto;
    top: 0
}

.w3-bar-block .w3-dropdown-hover,
.w3-bar-block .w3-dropdown-click {
    width: 100%
}

.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,
.w3-bar-block .w3-dropdown-click .w3-dropdown-content {
    min-width: 100%
}

.w3-bar-block .w3-dropdown-hover .w3-button,
.w3-bar-block .w3-dropdown-click .w3-button {
    width: 100%;
    text-align: left;
    padding: 8px 16px
}

.w3-main,
#main {
    transition: margin-left .4s
}

.w3-modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4)
}

.w3-modal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px
}

.w3-bar {
    width: 100%;
    overflow: hidden
}

.w3-center .w3-bar {
    display: inline-block;
    width: auto
}

.w3-bar .w3-bar-item {
    padding: 8px 16px;
    float: left;
    width: auto;
    border: none;
    display: block;
    outline: 0
}

.w3-bar .w3-dropdown-hover,
.w3-bar .w3-dropdown-click {
    position: static;
    float: left
}

.w3-bar .w3-button {
    white-space: normal
}

.w3-bar-block .w3-bar-item {
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0
}

.w3-bar-block.w3-center .w3-bar-item {
    text-align: center
}

.w3-block {
    display: block;
    width: 100%
}

.w3-responsive {
    display: block;
    overflow-x: auto
}

.w3-display-topleft {
    position: absolute;
    left: 0;
    top: 0
}

.w3-display-topright {
    position: absolute;
    right: 0;
    top: 0
}

.w3-display-bottomleft {
    position: absolute;
    left: 0;
    bottom: 0
}

.w3-display-bottomright {
    position: absolute;
    right: 0;
    bottom: 0
}

.w3-display-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.w3-display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%)
}

.w3-display-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%)
}

.w3-display-topmiddle {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}

.w3-display-bottommiddle {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%)
}

.w3-display-container:hover .w3-display-hover {
    display: block
}

.w3-display-container:hover span.w3-display-hover {
    display: inline-block
}

.w3-display-hover {
    display: none
}

.w3-display-position {
    position: absolute
}

.w3-row-padding,
.w3-row-padding>.w3-half,
.w3-row-padding>.w3-third,
.w3-row-padding>.w3-twothird,
.w3-row-padding>.w3-threequarter,
.w3-row-padding>.w3-quarter,
.w3-row-padding>.w3-col {
    padding: 0 8px
}

.w3-container,
.w3-panel {
    padding: 0.01em 16px
}

.w3-panel {
    margin-top: 16px;
    margin-bottom: 16px
}

.w3-code,
.w3-codespan {
    font-family: Consolas, "courier new";
    font-size: 16px
}

.w3-code {
    width: auto;
    background-color: #fff;
    padding: 8px 12px;
    border-left: 4px solid #4CAF50;
    word-wrap: break-word
}

.w3-codespan {
    color: crimson;
    background-color: #f1f1f1;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 110%
}

.w3-card,
.w3-card-2 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
}

.w3-card-4,
.w3-hover-shadow:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19)
}

.w3-spin {
    animation: w3-spin 2s infinite linear
}

@keyframes w3-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(359deg)
    }
}

.w3-animate-fading {
    animation: fading 10s infinite
}

@keyframes fading {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.w3-animate-opacity {
    animation: opac 0.8s
}

@keyframes opac {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.w3-animate-top {
    position: relative;
    animation: animatetop 0.4s
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.w3-animate-left {
    position: relative;
    animation: animateleft 0.4s
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

.w3-animate-right {
    position: relative;
    animation: animateright 0.4s
}

@keyframes animateright {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

.w3-animate-bottom {
    position: relative;
    animation: animatebottom 0.4s
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

.w3-animate-zoom {
    animation: animatezoom 0.6s
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.w3-animate-input {
    transition: width 0.4s ease-in-out
}

.w3-animate-input:focus {
    width: 100% !important
}

.w3-opacity,
.w3-hover-opacity:hover {
    opacity: 0.60
}

.w3-opacity-off,
.w3-hover-opacity-off:hover {
    opacity: 1
}

.w3-opacity-max {
    opacity: 0.25
}

.w3-opacity-min {
    opacity: 0.75
}

.w3-greyscale-max,
.w3-grayscale-max,
.w3-hover-greyscale:hover,
.w3-hover-grayscale:hover {
    filter: grayscale(100%)
}

.w3-greyscale,
.w3-grayscale {
    filter: grayscale(75%)
}

.w3-greyscale-min,
.w3-grayscale-min {
    filter: grayscale(50%)
}

.w3-sepia {
    filter: sepia(75%)
}

.w3-sepia-max,
.w3-hover-sepia:hover {
    filter: sepia(100%)
}

.w3-sepia-min {
    filter: sepia(50%)
}

.w3-tiny {
    font-size: 10px !important
}

.w3-small {
    font-size: 12px !important
}

.w3-medium {
    font-size: 15px !important
}

.w3-large {
    font-size: 18px !important
}

.w3-xlarge {
    font-size: 24px !important
}

.w3-xxlarge {
    font-size: 36px !important
}

.w3-xxxlarge {
    font-size: 48px !important
}

.w3-jumbo {
    font-size: 64px !important
}

.w3-left-align {
    text-align: left !important
}

.w3-right-align {
    text-align: right !important
}

.w3-justify {
    text-align: justify !important
}

.w3-center {
    text-align: center !important
}

.w3-border-0 {
    border: 0 !important
}

.w3-border {
    border: 1px solid #ccc !important
}

.w3-border-top {
    border-top: 1px solid #ccc !important
}

.w3-border-bottom {
    border-bottom: 1px solid #ccc !important
}

.w3-border-left {
    border-left: 1px solid #ccc !important
}

.w3-border-right {
    border-right: 1px solid #ccc !important
}

.w3-topbar {
    border-top: 6px solid #ccc !important
}

.w3-bottombar {
    border-bottom: 6px solid #ccc !important
}

.w3-leftbar {
    border-left: 6px solid #ccc !important
}

.w3-rightbar {
    border-right: 6px solid #ccc !important
}

.w3-section,
.w3-code {
    margin-top: 16px !important;
    margin-bottom: 16px !important
}

.w3-margin {
    margin: 16px !important
}

.w3-margin-top {
    margin-top: 16px !important
}

.w3-margin-bottom {
    margin-bottom: 16px !important
}

.w3-margin-left {
    margin-left: 16px !important
}

.w3-margin-right {
    margin-right: 16px !important
}

.w3-padding-small {
    padding: 4px 8px !important
}

.w3-padding {
    padding: 8px 16px !important
}

.w3-padding-large {
    padding: 12px 24px !important
}

.w3-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important
}

.w3-padding-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important
}

.w3-padding-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important
}

.w3-padding-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important
}

.w3-padding-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important
}

.w3-left {
    float: left !important
}

.w3-right {
    float: right !important
}

.w3-button:hover {
    color: #000 !important;
    background-color: #ccc !important
}

.w3-transparent,
.w3-hover-none:hover {
    background-color: transparent !important
}

.w3-hover-none:hover {
    box-shadow: none !important
}

.w3-ticket-timeline {
    display: block;
    padding: 16px 16px 8px 16px;
    font-size: 13px;
    color: #aaa;
}

.w3-ticket {
    padding: 8px 16px;
}

.w3-ticket:hover {
    background-color: #efefef;
    cursor: pointer;
}

.w3-ticket-subject {
    font-weight: 600;
    display: block;
}

.w3-ticket-number {
    font-weight: 600;
    font-size: 13px;
    display: block;
}

.w3-ticket-created {
    display: block;
    color: #7d7c7c;
    font-size: 12px;
}

.w3-ticket-status {
    display: block;
    color: #7d7c7c;
    font-size: 12px;
}


.main-menu {
    position: relative;
    background-color: #fff;
}

.main-menu a {
    color: #03080b;
    margin-left: 16px;
    line-height: 36px;
    position: static;
    display: inline-block;
    font-size: 16px;
}

.main-menu a.active {
    border-bottom: .1875rem solid #03080b;
}

.announcements {
    max-width: 950px;
    display: flex;
    margin: 0 auto;
    min-height: 300px;
    flex-direction: column;
}

.announcements .announcement {
    padding: 24px 0 24px 24px;
    border-bottom: 1px solid #ddd;
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}

.announcements .announcement .title {
    font-weight: 600;
    font-size: 19px;
}

.announcements .announcement .date {
    font-size: 13px;
    padding: 5px 0;
}

.announcements .announcement .snippet {
    font-size: 16px;
}

.announcements .announcement .link {
    margin-top: 5px;
    display: block;
    font-size: 16px;
}

.announcements .announcement .link a {
    color: #5fa624;
}

.announcements .announcement .text {
    padding-left: 32px;
}

.bullet {
    border-left: .125rem solid #5fa624;
    margin: .25rem -2rem .25rem -1.1875rem;
    min-width: 2.1875rem;
    padding-left: .875rem;
}

.popular-searches {
    margin-top: 5px;
    color: white;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
}

#footer-landing-search-inner .popular-searches {
    text-align: left;
}

.popular-searches a {
    color: white;
}

#open-live-chat-button {
    background-color: rgb(6, 161, 22);
    color: white;
}

.chat-mode-offline {
    height: 10px;
    width: 10px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
}

.chat-mode-online {
    height: 10px;
    width: 10px;
    background-color: green;
    border-radius: 50%;
    display: inline-block;
}

/* ======================================================= 
  Webinars 
  ======================================================= */

#event-name {
    margin-bottom: 20px;
}

/* Styling to be put on webinar images when we add those. Also needs editing */
/* #event-image-container {
    height: 500px;
    background-color: #000;
    margin-bottom: 30px;
  } */

#event-details-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-bottom: 20px;
    justify-content: space-between;
}

#event-details-container p {
    margin-bottom: 20px;
}

.event-description {
    margin: 0px 20px 0px 0px;
}

.sign-up-container,
.webinar-box-container,
.past-webinar-tile,
.recording-container {
    background-color: white;
    border-radius: 3px;
    border: 1px solid rgb(230, 230, 230);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
    padding: 30px;
    min-width: 300px;
    width: 300px;
}

.sign-up-container,
.webinar-box-container h3,
.past-webinar-tile h3 {
    color: black;
}

#sign-up-table td {
    padding: 10px 0px 10px 0px;
    font-size: 16px;
}

#sign-up-table .icon {
    width: 50px;
}

#calendar,
#clock,
#envelope {
    fill: #696969 !important;
    color: #696969 !important;
}

.sign-up-disclaimer {
    font-size: 12px;
}

#event-sign-up-button,
#confirm-sign-up-button,
#event-sign-up-button-sign-in {
    background-color: rgb(6, 161, 22);
    color: white;
    margin: 20px 0px 20px 0px;
    height: 50px;
    width: 100%;
}

#event-sign-up-button:hover,
#confirm-sign-up-button:hover,
#event-sign-up-button-sign-in:hover {
    background-color: rgb(6, 131, 22);
}

#event-sign-up-button:disabled,
#confirm-sign-up-button:disabled,
#event-sign-up-button-sign-in:disabled {
    background-color: #888888;
    color: white;
    margin: 20px 0px 20px 0px;
    height: 50px;
}

#event-sign-up-button:disabled:hover,
#confirm-sign-up-button:disabled:hover,
#event-sign-up-button-sign-in:disabled:hover {
    background-color: #888888;
    cursor: default;
}

#meeting-link-container {
    margin: 10px 0px 10px 0px;
    padding: 10px 0px 10px 0px;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}

#meeting-link-container h4 {
    font-size: 18px;
    font-weight: 400;
    color: #696969;
}

#meeting-link-wrapper {
    padding: 5px 0px 5px 0px;
    overflow-x: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 16px;
}

#meeting-link {
    color: rgb(6, 161, 22) !important;
    font-weight: 400;
}

#meeting-link:hover {
    text-decoration: underline !important;
}

a#event-sign-up-sign-in-link:hover {
    background: none !important;
    color: unset !important;
}

/* Confirmation & Success Modals */
.modal-overlay {
    display: none;
}

.modal-overlay.shown {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0px;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.modal-overlay .modal-title {
    display: inline-block;
    width: 100%;
    text-align: center;
}

#confirmation-modal,
#success-modal {
    background-color: white;
    max-width: 500px;
    width: 90vw;
}

#success-modal,
#confirmation-modal {
    display: none;
}

#success-modal.shown,
#confirmation-modal.shown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#confirmation-modal.shown .close,
#success-modal.shown .close {
    display: inline-block;
    background-color: #ffddb9;
    width: 30px;
    height: 30px;
    line-height: 0;
    margin: 16px;
    padding: 0px;
    border-radius: 10%;
}

#confirmation-modal.shown .close i,
#success-modal.shown .close i {
    top: 0;
    right: 0;
}

#confirmation-modal.shown .close i::before,
#success-modal.shown .close i::before {
    content: url('../../icons/close.svg');
    height: 30px;
    width: 30px;
    display: inline-block;
}

#modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#modal-content .summary-information {
    padding: 0px 32px 32px 32px;
}

#modal-content .summary-information p {
    margin: 16px 0px 16px 0px;
}

.emphasize-text {
    color: #5fa624;
    font-weight: 600;
}

#sign-up-form {
    width: 100%;
    min-width: fit-content;
}

#sign-up-form {
    margin-top: 8px;
}

#sign-up-form .sign-up-text-input {
    margin-top: 8px !important;
    height: 40px !important;
}

#privacy-link {
    color: #5fa624;
}

#privacy-link:hover {
    text-decoration: underline !important;
}

#event-page-tags-container {
    height: 30px;
    display: flex;
}

#event-page-tags-container .webinar-box-container-tag {
    max-width: 100px;
}

@media screen and (max-width: 800px) {
    #event-details-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .event-description {
        margin: 0px 0px 20px 0px;
    }

    .sign-up-container,
    .recording-container {
        min-width: 0px;
    }
}

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

    .sign-up-container,
    .recording-container {
        padding: 10px;
        width: 85vw;
    }
}

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

    #success-modal.shown,
    #confirmation-modal.shown {
        max-height: 95vh;
        overflow-y: scroll;
    }
}

/*Webinar landing page*/

#webinars_base,
.past-webinar-container {
    grid-column: 2;
    text-align: center;
    margin: 8px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
}

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

    #webinars_base,
    .past-webinar-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    #webinars_base,
    .past-webinar-container {
        grid-template-columns: repeat(2, 1fr);
    }

    #basic-trainings-search {
        width: 800px !important;
    }
}

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

    #webinars_base,
    .past-webinar-container {
        display: flex;
        flex-direction: column;
    }
}

#custom_period_div {
    flex-direction: column;
    align-items: center;
}

#custom_period_div label span {
    display: inline-block;
    width: 40px;
}

#custom_period_div input {
    padding-left: 6px;
}

.webinar-box-container:hover,
.past-webinar-tile:hover {
    background: #eee;
    cursor: pointer;
}

.webinar-box-container,
.past-webinar-tile {
    margin: 10px;
    overflow-y: hidden;
    /* text-align: center;  */
    text-align: left;
    /* height: 175px; */
    width: 350px;
    padding: 30px;
}

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

    #webinars_base {
        margin: 0px !important;
    }

    .webinar-box-container,
    .past-webinar-tile {
        width: auto !important;
        min-width: 0px !important;
        margin: 10px 0px 10px 0px !important;
        padding: 10px;
        height: auto;
    }
}

.webinar-box-container-text,
.past-webinar-tile-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    font-size: 15px;
    height: 100px;
    margin-bottom: 10px;
}

.webinar-box-container-content {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.webinar-box-container-content>.details,
.past-webinar-tile>.details {
    color: #929292;
    font-size: 13px;
}

.webinar-tag-container {
    height: 30px;
    display: flex;
    text-align: center;
}

.webinar-box-container-tag {
    border-radius: 0.25em;
    color: #ffffff;
    font-size: 75%;
    width: 30%;
    background-color: #8ec28e;

    margin: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
}

.webinar-box-container-tag:hover {
    background-color: #6d976d;
    cursor: pointer;
}

@media screen and (max-width: 420px) {
    .webinar-tag-container {
        flex-wrap: wrap;
        height: auto;
    }

    .webinar-box-container-tag {
        width: 100px;
    }
}

.no-results {
    display: flex;
    justify-content: center;
    font-size: 27px;
    width: 100%;
    text-align: center;
    padding: 30px 0 30px 0;
}

#webinars-past {
    display: flex;
    flex-direction: column;
}

/* Events dropdown + searchbar */
#basic-trainings-search {
    height: 44px !important;
    outline: none;
    padding: 0 0 4px 11px !important;
    width: 780px !important;
    margin-left: 17px !important;
}

#webinar_category {
    height: 44px !important;
    outline: none;
    padding: 0 0 4px 11px !important;
}

#webinars-past .input-wrapper::after {
    position: relative;
    right: 35px;
    color: #333;
    font-family: "FontAwesome";
    content: "\f002";
    background-color: white;
}

@media screen and (max-width: 880px) {
    #basic-trainings-search {
        width: 380px !important;
    }
}

@media screen and (max-width: 440px) {
    #basic-trainings-search {
        width: 80vw !important;
    }
}

@media screen and (max-width: 330px) {
    #basic-trainings-search {
        width: 75vw !important;
    }
}

/* Trainings and Events Info Page */

.trainings-and-events-info-page,
.trainings-and-events-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.recording-status {
    padding: 0.5em;
    border-radius: 3px;
    color: white;
    width: fit-content;
}

.available {
    background: rgb(95, 166, 36);
}

.coming-soon {
    background: grey;
}

#event-recording-container {
    position: relative;
    margin: auto;
    width: 85%;
    height: 0;
    padding-bottom: 56.25%;
    /* force 16:9 aspect ratio */
}

#recording {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.event-recording-message a {
    color: rgb(95, 166, 36);
    padding: 0;
    top: 0;
}

.event-recording-message a:hover {
    background: transparent !important;
    color: rgb(95, 166, 36) !important;
}

#calendar-btn-container {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
}

#add-to-calendar-button {
    background-color: white !important;
    color: #696969 !important;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 15px 10px 15px;
    width: 100%;
    box-shadow: 0 0 4px #cccccc;
    letter-spacing: 1.2px;
}

#add-to-calendar-button i {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

#add-to-calendar-button:hover {
    background-color: #f5f5f5 !important;
    box-shadow: 0 0 2px #cccccc;
}

/* ======================================================= 
  CSAT Survey 
  ======================================================= */
#csat-header-container {
    margin-top: 12px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}

#csat-header {
    padding: 20px;
}

#csat-header h1 {
    font-size: 36px;
    background-color: white;
}

#csat-header #header-msg {
    padding: 20px 0px 10px 0px;
}

#csat-header .required,
#csat-form .required,
#site-flip-form .required {
    color: #d93025;
    font-size: 14px;
    font-weight: 400;
}

.input-row.survey {
    margin-top: 12px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 20px;
    height: 200px;
}

#csat-header-container span {
    height: 12px;
    width: 100%;
    background-color: #5fa624;
    background-image: url("/assets/bg/header-bga.png");
    margin: 0 auto;
    display: block;
    text-align: center;
}

.radio-fieldset-container,
.input-row input[type="text"],
.input-row textarea {
    margin-top: 8px;
}

#csat-form #submit-container {
    padding: 20px 0px 20px 0px;
    display: flex;
    justify-content: space-between;
}

#csat-form #submit-container input {
    height: 50px;
    width: 150px;
}

@media screen and (max-width: 400px) {
    #csat-form #submit-container input {
        width: 45%;
    }
}

#csat-form-submit {
    background-color: #5fa624;
}

#csat-form-submit:hover {
    background-color: rgb(6, 131, 22);
}

#csat-form-submit:disabled {
    background-color: #888888;
    color: white;
}

#csat-form-submit:disabled:hover {
    background-color: #888888;
    cursor: default;
}

/* Text Fields */
#csat-form .input-row input[type="text"],
#csat-form .input-row textarea {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 2px solid #696969 !important;
    border-radius: 0px !important;
    font-size: 16px;
}

#csat-form .input-row input[type="text"]:focus,
#csat-form .input-row textarea:focus {
    outline: none;
}

#csat-form .input-row .textarea-wrapper {
    display: flex;
}

#csat-form .input-row textarea {
    resize: none;
    height: auto;
    width: 100%;
    overflow-y: visible;
}

.details-input.hidden {
    display: none;
}

/* Custom Radio Buttons / Checkboxes */
.radio-fieldset-container.linear {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
}

.radio-fieldset-container.linear.emoticon-range {
    padding-top: 12px;
}

@media screen and (max-width: 560px) {
    .radio-fieldset-container.linear {
        flex-wrap: wrap;
    }
}

.radio-wrapper,
.checkbox-wrapper {
    display: flex !important;
    position: relative;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

    .radio-wrapper,
    .checkbox-wrapper {
        display: grid !important;
        grid-template-columns: 22px 1fr;
    }
}

.radio-wrapper.linear {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

.radio-wrapper.linear .radio-btn-label {
    margin: 0px 0px 6px 0px;
}

.radio-wrapper input,
.checkbox-wrapper input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radio-btn-styled,
.checkbox-styled {
    height: 16px;
    width: 16px;
    background-color: white;
    border: 3px solid #696969;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radio-btn-styled {
    border-radius: 50%;
}

.radio-btn-label,
.checkbox-label {
    margin-left: 12px;
}

.radio-wrapper:hover input~.radio-btn-styled,
.checkbox-wrapper:hover input~.checkbox-styled {
    background-color: #eee;
}

.radio-wrapper input:checked~.radio-btn-styled,
.checkbox-wrapper input:checked~.checkbox-styled {
    background-color: white;
    border: 3px solid #5fa624;
}

.radio-wrapper input:checked~.radio-btn-label {
    color: #5fa624;
}

.radio-btn-styled:after,
.checkbox-styled:after {
    content: "";
    height: 0px;
    width: 0px;
}

.radio-wrapper input:checked~.radio-btn-styled:after {
    width: 10px;
    height: 10px;
    transition: all 0.1s;
}

.radio-wrapper .radio-btn-styled:after {
    border-radius: 50%;
    background-color: #5fa624;
}

.checkbox-wrapper input:checked~.checkbox-styled:after {
    transition: all 0.1s;
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #5fa624;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Emoticon options */

.emoticon-option-wrapper {
    display: flex;
    flex-direction: column;
}

.emoticon-option-wrapper i {
    height: 100px !important;
    width: 100px !important;
    background-size: 100px 100px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.emoticon-option-wrapper i::before {
    fill: #696969 !important;
    color: #696969 !important;
}

/* very-unsatisfied */
.emoticon-option-wrapper:hover input~i.very-unsatisfied::before,
.emoticon-option-wrapper input:checked~i.very-unsatisfied::before,
.emoticon-option-wrapper:hover input~.radio-btn-label.very-unsatisfied,
.emoticon-option-wrapper input:checked~.radio-btn-label.very-unsatisfied {
    fill: #d93025 !important;
    color: #d93025 !important;
}

/* unsatisfied */
.emoticon-option-wrapper:hover input~i.unsatisfied::before,
.emoticon-option-wrapper input:checked~i.unsatisfied::before,
.emoticon-option-wrapper:hover input~.radio-btn-label.unsatisfied,
.emoticon-option-wrapper input:checked~.radio-btn-label.unsatisfied {
    fill: #EC8013 !important;
    color: #EC8013 !important;
}

/* neutral */
.emoticon-option-wrapper:hover input~i.neutral::before,
.emoticon-option-wrapper input:checked~i.neutral::before,
.emoticon-option-wrapper:hover input~.radio-btn-label.neutral,
.emoticon-option-wrapper input:checked~.radio-btn-label.neutral {
    fill: #ffd000 !important;
    color: #ffd000 !important;
}

/* satisfied */
.emoticon-option-wrapper:hover input~i.satisfied::before,
.emoticon-option-wrapper input:checked~i.satisfied::before,
.emoticon-option-wrapper:hover input~.radio-btn-label.satisfied,
.emoticon-option-wrapper input:checked~.radio-btn-label.satisfied {
    fill: #94B418 !important;
    color: #94B418 !important;
}

/* very-unsatisfied */
.emoticon-option-wrapper:hover input~i.very-satisfied::before,
.emoticon-option-wrapper input:checked~i.very-satisfied::before,
.emoticon-option-wrapper:hover input~.radio-btn-label.very-satisfied,
.emoticon-option-wrapper input:checked~.radio-btn-label.very-satisfied {
    fill: #5fa624 !important;
    color: #5fa624 !important;
}

.emoticon-option-wrapper input:checked~i.very-unsatisfied::before,
.emoticon-option-wrapper input:checked~i.unsatisfied::before,
.emoticon-option-wrapper input:checked~i.neutral::before,
.emoticon-option-wrapper input:checked~i.satisfied::before,
.emoticon-option-wrapper input:checked~i.very-satisfied::before {
    font-weight: 700;
}

/* CSAT Success Message */
#csat-success-container {
    margin-top: 12px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 30px;
}

#csat-success-container h1 {
    font-size: 36px;
    background-color: white;
    margin-bottom: 20px;
}

/* ======================================================= 
  Client-Side Modals
  ======================================================= */

.client-side .modal.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}

.client-side .modal.fade.in {
    opacity: 1;
}

.client-side .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.client-side .modal .modal-flex.center {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.client-side .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000;
}

.client-side .modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0;
}

.client-side .modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.client-side .modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}



.client-side .modal .modal-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0px;
}

.client-side .modal .modal-title h2 {
    font-weight: 300 !important;
}

.client-side .modal .modal-title h2,
.client-side .modal-footer .action-button {
    font-family: "Oswald", "Open Sans", Helvetica, serif !important;
    text-transform: uppercase;
}

.client-side .modal button.close {
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
    padding: 0;
    margin-top: -2px;
    min-height: 32px;
    min-width: 32px;
    font-size: 21px;
    line-height: 1;
    font-weight: bold;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    background: transparent;
    border: 0;
    filter: alpha(opacity=30);
    opacity: 0.3;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.client-side .modal button.close:hover {
    filter: alpha(opacity=40);
    opacity: 0.4;
    background-color: #999;
}

.client-side .modal button.close svg {
    height: 28px;
    width: 28px;
}

.client-side .modal-open {
    overflow: hidden;
}

.client-side .modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}

.client-side .modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

.client-side .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

.client-side .modal-content {
    position: relative;
    background-color: #ffffff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    outline: 0;
}

.client-side .modal-body {
    position: relative;
    padding: 15px;
}

.client-side .modal-header {
    padding: 15px;
    color: #000000 !important;
}

.client-side .modal-subtitle {
    padding: 10px 0 !important;
    font-size: 16px;
}

.client-side .modal-title {
    margin: 0;
    line-height: 1.42857143;
}

.client-side .modal form .form-errors {
    padding: 10px !important;
    margin-top: 5px;
    background: #fee;
    color: #c33;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.client-side .modal form .form-errors svg {
    height: 15px !important;
    width: 15px !important;
    margin-right: 5px;
    fill: #c33;
    color: #c33;
}

.client-side .modal form .form-errors.hidden {
    display: none;
}

.client-side .modal form .modal-inputs,
.client-side .modal form .form-errors {
    padding: 15px;
}

.client-side .modal form .input-grp {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
}

.client-side .modal form .input-grp .grp-label {
    font-weight: 800;
    font-size: 14px;
    color: #696969;
}

.client-side .modal form select,
.client-side .modal form input {
    margin: 3px 0px !important;
    min-height: 38px !important;
    box-sizing: border-box;
}

.client-side .modal form select,
.client-side .modal form input[type="text"],
.client-side .modal form input[name="username"],
.client-side .modal form input[name="username_confirm"],
.client-side .modal form input[name="password"],
.client-side .modal form input[name="password_confirm"] {
    width: auto !important;
    margin-bottom: 12px !important;
    border: 1px solid #dddddd !important;
}

.client-side .modal-footer {
    padding: 15px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

.client-side #modal-result .modal-footer,
.client-side #modal-result .modal-header {
    border-bottom: none;
    border-top: none;
}

.client-side .modal-footer .action-button,
.client-side .modal-footer .action-button:hover {
    font-weight: 600;
    font-size: 16px;
    min-width: 100px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 2px;
}

.client-side .modal-footer .action-button[name="submit"],
.client-side .modal-footer .action-button[name="done"] {
    background: #5fa624;
    color: #fff !important;
}

.client-side .modal-footer .action-button[name="submit"]:before,
.client-side .modal-footer .action-button[name="done"]:before {
    background: none !important;
}

.client-side .modal-footer .action-button[name="submit"]:hover,
.client-side .modal-footer .action-button[name="done"]:hover {
    background: #376611;
}

.client-side .modal-footer .action-button[name="cancel"] {
    color: #000000 !important;
}

.client-side .modal-footer .action-button[name="cancel"]:before {
    background: transparent !important;
}

.client-side .modal-footer .action-button[name="cancel"]:hover {
    background: #bbbec1 !important;
}

.client-side .modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

@media (min-width: 768px) {
    .client-side .modal-dialog {
        width: 600px;
        margin: 30px auto;
    }

    .client-side .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

    .client-side .modal-sm {
        width: 300px;
    }
}

@media (min-width: 992px) {
    .client-side .modal-lg {
        width: 900px;
    }
}

.no-scroll {
    height: 100vh !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
}

.no-scroll::-webkit-scrollbar {
    display: none !important;
}

.page-stack {
    display: none;
    height: 100%;
    width: 100%;
    background-color: #fafafa;
    position: fixed !important;
    z-index: 1;
    overflow: auto;
    top: 0;
}

.page-stack.in {
    display: block;
    position: relative;
    animation: slideIn 0.5s forwards;
}

.page-stack-backdrop {
    display: none;
}

.page-stack-backdrop.in {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 25;
}

.page-stack.partial {
    width: fit-content;
}

@keyframes slideIn {
    from {
      right: -100%;
    }
    to {
      right: 0;
    }
  }
  
  @keyframes slideOut {
    from {
      right: 0;
    }
    to {
      right: -100%;
    }
  }

@keyframes animateright {
    from {
        right: -100vw;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

/* ======================================================= 
Get In Touch Page
======================================================= */

.client-side #content.get-help {
    padding: 16px 40px;
    display: flex;
    justify-content: center;
    color: #333 !important;
    flex-direction: column;
    margin-top: 64px !important;
    margin-bottom: 64px !important;
}

#content .title h1 {
    font-weight: 400;
    color: #03080b !important;
    margin-bottom: 12px;
    font-size: 2.12rem;
    line-height: 2.5rem;
}

#content .title p {
    font-family: "Open Sans", Helvetica, serif !important;
    font-size: 18px !important;
    line-height: 1.7;
    margin-bottom: 1rem;
}

#content.get-help h2 {
    font-family: "Oswald", "Open Sans", Helvetica, serif !important;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    font-weight: 300 !important;
    color: #03080b !important;
    margin-bottom: 12px;
    font-size: 1.62rem;
    line-height: 2.5rem;
}

#content.get-help p {
    font-weight: 300;
}

#content.get-help a {
    color: #5fa624 !important;
}
  
#content.get-help a:hover {
    text-decoration: underline !important;
}

#content.get-help .whitebox {
    display: grid;
    grid-template-columns: 2fr 1px 1fr;
    padding: 0px !important;
    margin-bottom: 1.87rem;
}

#content.get-help .divider {
    background-color: rgba(0,0,0,.12);
}

#content.get-help .whitebox .option-desc,
#content.get-help .whitebox .option-action {
    padding: 32px 48px;
}

#content.get-help .whitebox .option-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#content.get-help .whitebox .action-button {
    font-weight: 600;
    font-size: 16px;
    min-width: 150px;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px;
    letter-spacing: -0.25px;
    font-weight: 100;
    border: none;
    border-radius: 2px;
    font-family: "Oswald", "Open Sans", Helvetica, serif !important;
    text-transform: uppercase;
    background: #5fa624;
    color: #fff !important;
}

#content.get-help .whitebox .action-button:hover:before {
    background: none !important;
}

#content.get-help .whitebox .action-button:hover {
    background: #66b327;
}

#content.get-help .whitebox .action-button.secondary {
    background: #03080b;
}

#content.get-help .whitebox .action-button.secondary:hover {
    background: #0d212d;
}

#content.get-help .whitebox .action-button.disabled {
    background: #dcdfe2;
    color: #515d6d;
}

#content.get-help .whitebox .action-button.disabled:hover {
    background: #dcdfe2;
}

#content.get-help .status-label {
    display: block;
    max-width: fit-content;
    padding: 0.6em 0.8em;
    margin-bottom: 6px;
    font-size: 75%;
    font-weight: 300;
    line-height: 1;
    color: #000;
    text-align: center;
    border-radius: 2px;
}

#content.get-help .status-label.good {
    background-color: #dfedd3;
    border-left: 5px solid #5fa624;
}
#content.get-help .status-label.neutral {
    background-color: #fcf6d7;
    border-left: 5px solid #eed236;
}
#content.get-help .status-label.poor {
    background-color: #fcecd7;
    border-left: 5px solid #eea136;
}
#content.get-help .status-label.danger {
    background-color: #f2dede;
    border-left: 5px solid #b94a48;
}
#content.get-help .status-label.system {
    background-color: #e7e7e7;
    border-left: 5px solid #aaaaaa;
}
#content.get-help .whitebox i.warn {
    margin-right: 5px;
}
#content.get-help .whitebox i.warn:before {
    color: #eed236 !important;
    fill: #eed236 !important;
}

@media only screen and (max-width: 760px) {
    .client-side #content.get-help {
        padding: 16px 20px !important;
    }

    #content.get-help .whitebox {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr 1px 100px !important;
    }

    #content.get-help .whitebox .option-desc {
        padding-bottom: 16px !important;
    }

    #content.get-help .whitebox .option-action {
        padding-top: 16px !important;
    }
}

@media only screen and (max-width: 340px) {
    .client-side #content.get-help {
        padding: 8px 10px !important;
    }

    #content.get-help .whitebox .option-desc {
        padding: 16px 20px !important;
    }

    #content.get-help .whitebox .option-action {
        padding-top: 16px !important;
    }
}

/* ======================================================= 
Client-side Tickets Page
======================================================= */
.client-side.tickets-page .tickets-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.client-side.tickets-page #submit-new {
    font-size: 16px;
    min-width: 150px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    letter-spacing: -0.25px;
    font-weight: 100;
    border: none;
    border-radius: 3px;
    font-family: "Oswald", "Open Sans", Helvetica, serif !important;
    text-transform: uppercase;
    background: #5fa624;
    color: #fff !important;
}

.client-side.tickets-page #submit-new:hover:before {
    background: none !important;
}

.client-side.tickets-page #submit-new:hover {
    background: #66b327;
}

.client-side.tickets-page #submit-new i::before {
    color: #fff !important;
    fill: #fff !important;
}

/* ======================================================= 
  Multi-Step Components
======================================================= */

.multistep .step {
    display: none;
}

.multistep .step.active-step {
    display: block;
}

.multistep .step .step-content {
    padding: 0 15px;
}

/* ======================================================= 
Chat Transcripts
======================================================= */

#content.chattranscript {
    padding: 64px !important;
}

.chattranscript .header {
    line-height: initial;
    margin: 24px 0 24px 0;
}

.chattranscript .header h1.title {
    color: #333 !important;
    font-size: 33px;
    font-weight: 300 !important;
}

.chattranscript .header span {
    display: block;
    margin-top: 16px;
    font-size: 21px;
    color: #777;
}

@media screen and (max-width: 768px) {
    #content.chattranscript {
        padding: 32px !important;
    }
}

.chat-trx {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 24px;

    /* box-shadow: 0 0 2px #ccc;
    border: 1px solid #e1e4e6;
    border-radius: 1px; */
}

.chat-trx .msg-series {
    display: flex;
    margin: 12px 4px;
}

.chat-trx .msg-series .messages {
    display: flex;
    flex-direction: column;
    padding: 0 12px 0 12px;
}

.chat-trx .msg-series .avatar {
    height: 40px;
    width: 40px;
    font-size: 12px;
    margin-top: 20px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
}

.chat-trx .msg-series .avatar.user {
    background-color: #696969;
    color: #fff;
    display: none;
}

.chat-trx .msg-series .avatar.staff {
    background-color: #696969;
    color: #fff;
    display: none;
}

.chat-trx .msg-series .avatar.system {
    display: none;
}

@media screen and (max-width: 768px) {
    .chat-trx .msg-series .avatar.user,
    .chat-trx .msg-series .avatar.staff {
        display: none;
    }
}

.chat-trx .msg-series .messages .name {
    font-size: 12px;
    font-weight: bold;
    padding: 0 4px 0 4px;
}

.chat-trx .entry {
    display: flex;
    flex-direction: column;
    padding: 4px;
    max-width: 70%;
}

@media screen and (max-width: 500px) {
    .chat-trx .entry {
        max-width: 100%;
    }
}

.chat-trx .entry.system {
    padding: 0;
}

.chat-trx .msg-series.user {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

.chat-trx .messages.user {
    align-items: flex-end;
}

.chat-trx .msg-series.staff {
    justify-content: flex-start;
}

.chat-trx .messages.staff {
    align-items: flex-start;
}

.chat-trx .messages.system {
    align-items: center;
}

.chat-trx .entry .bubble {
    width: fit-content;
    padding: 8px 16px;
    border-radius: 2px;
    font-size: 16px;
    cursor: default;
}

.chat-trx .entry .bubble.user {
    background-color: #eff2f7;
    color: #696969;
    text-align: right;
}

.chat-trx .entry .bubble.staff {
    background-color: #8ec28e;
    color: #fff;
    text-align: left;
}

.chat-trx .entry .bubble.system {
    background-color: #fff;
    color: #696969;
    text-align: center;
    font-size: 14px;
    padding: 8px 0 0 0;
}

.chat-trx .entry .bubble .message {
    word-break: break-word;
}

.chat-trx .msg-series .timestamp {
    font-size: 12px;
    color: #a7a9ad;
    padding: 0 4px 0 4px;
}

.chat-trx .msg-series .timestamp.system {
    padding-top:4px;
}

/* ======================================================= 
Staff Reminders & Scheduled Responses
======================================================= */

.active-reminders,
.current-scheduled-responses {
    padding: 12px 12px 6px 12px;
}

.active-reminders,
.active-reminder .rows,
.current-scheduled-responses,
.current-scheduled-responses .rows {
    display: flex;
    flex-direction: column;
}

.active-reminders .header,
.active-reminders .rows .active-reminder {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
}

.current-scheduled-responses .header,
.current-scheduled-responses .rows .scheduled-response {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr;
    grid-template-rows: auto;
}

.current-scheduled-responses .rows .scheduled-response .view-full {
    grid-row: 2;
    grid-column: 1 / 6;
    display: flex;
    flex-direction: column;
}

.active-reminders .header,
.current-scheduled-responses .header {
    background-color: #f2f2f2;
}

.active-reminders .header span,
.current-scheduled-responses .header span {
    font-weight: bold;
    font-size: 13px;
    color: #777;
}

.active-reminders .rows .active-reminder,
.active-reminders .header, 
.current-scheduled-responses .rows .scheduled-response,
.current-scheduled-responses .header {
    border-bottom: 1px solid #f2f2f2;
    padding: 6px 0;
}

.active-reminders .rows .active-reminder div.data-item,
.current-scheduled-responses .rows .scheduled-response div.data-item {
    display: flex;
    align-items: center;
}

.active-reminders .rows .active-reminder .delete_reminder,
.current-scheduled-responses .rows .scheduled-response .delete_scheduled_response,
.current-scheduled-responses .rows .scheduled-response .edit_scheduled_response {
    background-color: #fff;
    border: none;
}

.current-scheduled-responses .scheduled-response button.view_full_response {
    background-color: #fff;
    border: none;
}

.active-reminders .rows .active-reminder .delete_reminder:hover,
.current-scheduled-responses .rows .scheduled-response .delete_scheduled_response:hover,
.current-scheduled-responses .rows .scheduled-response .edit_scheduled_response:hover {
    background-color: #f2f2f2;
}


.current-scheduled-responses .scheduled-response .full_response {
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
    -o-transition: .5s ease;
    transition: .5s ease;
    display: none;
    height: 0;
}

.current-scheduled-responses .scheduled-response .full_response.open {
    display: block;
    height: fit-content;
    padding: 16px;
    background-color: #fbfbfb;
    border: 1px solid #f2f2f2;
}

button#open-reminder-scheduler {
    border: none;
    font-weight: 600;
    color: #5fa624;
    background-color: #d0e9c6;
    margin: 8px;
}

button#open-reminder-scheduler:hover {
    color: #3b4450;
    background-color: #ccd1d6;
}

/* ======================================================= 
  CSAT Question Animations

/*  animation to slide in from the right */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

/* animation to slide out to the right */
@keyframes slideOutToRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

/* animation to slide in from the left */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

/* animation to slide out to the left */
@keyframes slideOutToLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.slide-out-right {
    animation: slideOutToRight .3s ease-in-out;
}

.slide-in-right {
    animation: slideInFromRight .3s ease-in-out;
}

.slide-out-left {
    animation: slideOutToLeft .3s ease-in-out;
}

.slide-in-left {
    animation: slideInFromLeft .3s ease-in-out;
}

/* ======================================================= 
  CSAT Question Error Animations

/*  animation to bounce on the right on error */
@keyframes bounceRight {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(10%);
    }

    100% {
        transform: translateX(0%);
    }
}

/* bounce on left on error */

@keyframes bounceLeft {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(0%);
    }
}

/* shake on error */ 

@keyframes shake {
    0% {
        transform: translateX(0%);
    }

    25% {
        transform: translateX(5%);
    }

    50% {
        transform: translateX(-5%);
    }

    100% {
        transform: translateX(0%);
    }
}

.bounce-right {
    animation: bounceRight .5s ease-in-out;
}

.bounce-left {
    animation: bounceLeft .5s ease-in-out;
}

.shake {
    animation: shake .3s ease-in-out;
}

/* ======================================================= 
  CSAT Question Progress Bar */

  .progress-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    width: 0;
    height: 20px;
    background-color: #5fa624;
    transition: width .6s ease-in-out;
}

/* ======================================================= 
  CSAT Stars/Circled Numbers */

  .circle-num {
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #5fa624;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    line-height: 120px;
    text-align: center;
    margin: 0 5px;
  }

.circle-num.hovered {
    background-color: #5fa624;
    color: #ffffff;
  }

.label-value {
    width: 14.2%;
    height: 100%;
    text-align: center;
    position: relative;
    line-height: 60px;
    font-size: 26px;
}

.label-value i {
    color: #bfbfbf !important;
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-300%, -10%);
}

  .anim-box{
    width: 14.2%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }