/*
// filename:  customize-display-of-icons.css
//
// Copyright 2022 Tehama Inc. and its affiliates or licensors
//
// description:  This stylesheet provides styling for the following elements:
//
//                 - the icons that are displayed before and after article names:
//                   - reference/library icon (all styling for this is found in this stylesheet)
//                   - promoted/star icon  (supplementary styling for the existing 'icon-star' class found in style.css)
//                   - internal/lock icon  (supplementary styling for the existing 'icon-lock' class found in style.css)
//
//                 - the legend that describes the icons that is displayed at the bottom of the home_page:
//                   - div that hold the legend (text-align to the right of the page)
//                   - reference/library icon and text description and following comma
//                   - promoted/star icon and text description and following comma
//                   - internal/lock icon and text description
//
//                 - the 'Display Settings' dropdown menu that is displayed in the page header:
//                   - reference/library icon (all styling for this is found in
//
//               Include the stylesheet in the header.hbs template as follows:
//
//                     <link href="{{asset 'customize-display-of-icons-style.css'}}" rel="stylesheet" type="text/css" />
//
//               The header.hbs template is part of every Help Center page, so this css is available on every page.
//
//
*/



/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* Colours:  These colours are copied from the values in the theme.                                            */

:root {
    --brand_color: rgba(12, 24, 202, 1);
    --brand_text_color: rgba(255, 255, 255, 1);
    --link_color: rgba(12, 24, 202, 1);
    --text_color: rgba(1, 22, 39, 1);
}

/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* CSS for the reference/library icon (an svg that shows an open book, like the unicode character \1F4D6) that */
/* is inserted in front of the names of all the articles that have label "TehamaLibrary".                      */

/* This sets the basics of the icon.  It also ensures the pointer is always the default. */
.tehama-class-icon-library {
    color: var(--brand_color);
    font-size: 18px;
    cursor: default;
    height: 20px;
    width: 20px;
    vertical-align: middle;
}

/* This alters the height of the icon when in the following table (subscriptions). */
.subscriptions-table .tehama-class-icon-library {
    height: 24px;
}

/* This sets the display value of the icon to none, effectively hiding it. */
.tehama-class-icon-library-hidden {
    display: none;
}

[dir=ltr] .subscriptions-table .tehama-class-icon-library {
    margin-right: 5px;
}

[dir=ltr] .recent-articles .tehama-class-icon-library {
    margin-right: 5px;
}

[dir=rtl] .recent-articles .tehama-class-icon-library {
    margin-left: 5px;
}

[dir=ltr] .related-articles .tehama-class-icon-library {
    margin-right: 5px;
}

[dir=rtl] .related-articles .tehama-class-icon-library {
    margin-left: 5px;
}

[dir=ltr] .search-results-list .tehama-class-icon-library {
    margin-right: 5px;
}

[dir=rtl] .search-results-list .tehama-class-icon-library {
    margin-left: 5px;
}

[dir=ltr] .profile-activity-list .tehama-class-icon-library {
    margin-right: 5px;
}

[dir=rtl] .profile-activity-list .tehama-class-icon-library {
    margin-left: 5px;
}

[dir=ltr] .profile-contribution-list .tehama-class-icon-library {
    margin-right: 5px;
}

[dir=rtl] .profile-contribution-list .tehama-class-icon-library {
    margin-left: 5px;
}

[dir=ltr] .article-sidebar .tehama-class-icon-library {
    margin-right: 5px;
}

[dir=rtl] .article-sidebar .tehama-class-icon-library {
    margin-left: 5px;
}

[dir=ltr] .article-title .tehama-class-icon-library {
    margin-right: 5px;
}

[dir=rtl] .article-title .tehama-class-icon-library {
    margin-left: 5px;
}


/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* CSS for the promoted/star icon (an svg that shows a star, similar to, but not exactly like the unicode      */
/* character \2605) that is inserted in front of the names of all the articles  that are marked as "Promoted". */

/* Defined in the theme's style.css stylesheet:
    This sets the content, the size and the colour of the icon to place before any element with this class.
    .icon-star {
      color: $brand_color;
      font-size: 18px;
    }
*/

/* Override it here. */
.icon-star {
    color: var(--brand_color);
    font-size: 18px;
}

/* This sets the display value of the icon to none, effectively hiding it. */
.icon-star-hidden {
    display: none;
}

[dir=ltr] .subscriptions-table .icon-star {
    margin-right: 5px;
}

[dir=ltr] .recent-articles .icon-star {
    margin-right: 5px;
}

[dir=rtl] .recent-articles .icon-star {
    margin-left: 5px;
}

[dir=ltr] .related-articles .icon-star {
    margin-right: 5px;
}

[dir=rtl] .related-articles .icon-star {
    margin-left: 5px;
}

[dir=ltr] .search-results-list .icon-star {
    margin-right: 5px;
}

[dir=rtl] .search-results-list .icon-star {
    margin-left: 5px;
}

[dir=ltr] .profile-activity-list .icon-star {
    margin-right: 5px;
}

[dir=rtl] .profile-activity-list .icon-star {
    margin-left: 5px;
}

[dir=ltr] .profile-contribution-list .icon-star {
    margin-right: 5px;
}

[dir=rtl] .profile-contribution-list .icon-star {
    margin-left: 5px;
}

[dir=ltr] .article-sidebar .icon-star {
    margin-right: 5px;
}

[dir=rtl] .article-sidebar .icon-star {
    margin-left: 5px;
}

[dir=ltr] .article-title .icon-star {
    margin-right: 5px;
}

[dir=rtl] .article-title .icon-star {
    margin-left: 5px;
}


/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* CSS for the hidden/lock icon (an svg that shows a lock, similar to, but not exactly like the unicode        */
/* character \1F512) that is inserted after the names of all the articles that are marked as only available to */
/* agents and managers.                                                                                        */

/* Provide it with colour here. */
.icon-lock {
    color: var(--text_color);
}

[dir=rtl] .subscriptions-table .icon-lock {
    margin-right: 5px;
}

[dir=ltr] .recent-articles .icon-lock {
    margin-left: 5px;
}

[dir=rtl] .recent-articles .icon-lock {
    margin-right: 5px;
}

[dir=ltr] .related-articles .icon-lock {
    margin-left: 5px;
}

[dir=rtl] .related-articles .icon-lock {
    margin-right: 5px;
}

[dir=ltr] .search-results-list .icon-lock {
    margin-left: 5px;
}

[dir=rtl] .search-results-list .icon-lock {
    margin-right: 5px;
}

[dir=ltr] .profile-activity-list .icon-lock {
    margin-left: 5px;
}

[dir=rtl] .profile-activity-list .icon-lock {
    margin-right: 5px;
}

[dir=ltr] .profile-contribution-list .icon-lock {
    margin-left: 5px;
}

[dir=rtl] .profile-contribution-list .icon-lock {
    margin-right: 5px;
}

[dir=ltr] .article-sidebar .icon-lock {
    vertical-align: baseline;
}

[dir=ltr] .article-sidebar .icon-lock {
    margin-left: 5px;
}

[dir=rtl] .article-sidebar .icon-lock {
    margin-right: 5px;
}

/* Override the setting for "left" that is in the style.css file. (It is set to -5px, which we don't need since */
/* we commented out the whitespace in the article_page.hbs between the title and the lock svg. */
.article-title .icon-lock {
    left: 0;
}

[dir=ltr] .article-title .icon-lock {
    margin-left: 5px;
}

[dir=rtl] .article-title .icon-lock {
    margin-right: 5px;
}

/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* CSS for the text in the legend on the home page that describes the reference/library (open book - \1F4D6)   */
/* icon (that is inserted in front of the names of all the articles that have label "TehamaLibrary".           */

/* This sets the display of any element with this class to be inline-block. */
.tehama-class-library-text {
    display: inline-block;
}

/* This sets the display of any element with this class to be none - effectively hiding it. */
.tehama-class-library-text-hidden {
    display: none;
}

/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* CSS for the text in the legend on the home page that describes the promoted/star (star - \1F4D6) icon (that */
/* is inserted in front of the names of all the articles that are marked as "Promoted").                       */

/* This sets the display of any element with this class to be inline-block. */
.tehama-class-promoted-text {
    display: inline-block;
}

/* This sets the display of any element with this class to be none - effectively hiding it. */
.tehama-class-promoted-text-hidden {
    display: none;
}

/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* CSS for the text in the legend on the home page that describes the internal/lock (lock - \1F512) icon (that */
/* is inserted in front of the names of all the articles that are visible only to agents and managers.         */

/* This sets the display of any element with this class to be inline-block. */
.tehama-class-agent-or-manager {
    display: inline-block;
}

/* This sets the display of any element with this class to be none - effectively hiding it. */
.tehama-class-agent-or-manager-hidden {
    display: none;
}

/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* CSS for the comma that comes after the text in the legend on the home page that describes the reference/-   */
/* library (open book - \1F4D6) icon (that is inserted in front of the names of all the articles that have     */
/* label "TehamaLibrary".           */

/* This sets the display of any element with this class to be inline-block. */
.tehama-class-comma-after-library {
    display: inline-block;
}

/* This sets the display of any element with this class to be none - effectively hiding it. */
.tehama-class-comma-after-library-hidden {
    display: none;
}

/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* CSS for the comma that comes after the text in the legend on the home page that describes the promoted/star */
/* (star - \1F4D6) icon (that is inserted in front of the names of all the articles that are marked as         */
/* "Promoted").                                                                                                */

/* This sets the display of any element with this class to be inline-block. */
.tehama-class-comma-after-promoted {
    display: inline-block;
}

/* This sets the display of any element with this class to be none - effectively hiding it. */
.tehama-class-comma-after-promoted-hidden {
    display: none;
}

/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* CSS for the div element that contains the legend that describes the icons on the home page.                 */

/* This aligns the text to the right for every element with this class. */
div.tehama-class-icon-legend {
    text-align: right;
}

/*-------------------------------------------------------------------------------------------------------------*/
/*                                                                                                             */
/* CSS for the 'Display Settings' dropdown menu (gear wheel - &#9881;) that is inserted in the header of each  */
/* page, to the left of the user-info dropdown, among other things.                                            */

/*---------------------------------------------*/
/* .tehama-class-display-settings              */
/*    -                                        */

.tehama-class-display-settings {
    display: inline-block;
    position: relative;
}

[dir="rtl"] .tehama-class-display-settings {
    top: 9px;
}

.tehama-class-display-settings:hover,
.tehama-class-display-settings:focus,
.tehama-class-display-settings:active {
    box-shadow: 0 0 5px var(--brand_color);
}

.tehama-class-display-settings::after {
    color: var(--link_color);
    padding-right: 15px;
}

[dir="rtl"] .tehama-class-display-settings::after {
    padding-left: 15px;
    padding-right: 0;
}

/*-------------------------------------------------*/
/* .tehama-class-display-settings-dropdown-toggle  */
/*    -                                            */

.tehama-class-display-settings-dropdown-toggle {
    cursor: pointer;
    background: none;
    border: 0 solid var(--brand_color);
    color: var(--brand_color);
    display: inline-block;
    border-radius: 4px;
    font-size: 12px;
    line-height: 2.34;
    margin: 0;
    padding: 0 20px;
    text-align: center;
    user-select: none;
    transition: background-color .12s ease-in-out, border-color .12s ease-in-out, color .15s ease-in-out;
    white-space: nowrap;
    width: 100%;
    -webkit-touch-callout: none;
}

[dir=rtl] .tehama-class-display-settings-dropdown-toggle {
    float: right;
}

[dir=rtl] .tehama-class-display-settings-dropdown-toggle::after {
    padding-right: 5px;
}

/* When we upgrade our theme to Copenhagen v2.0, replace the content and font-family lines with the following, since */
/* the entypo font is being removed in v2.0:                                                                         */
/*     content: "\2304";                                                                                             */
/*     transform: scale(1.5, 1.0)                                                                                    */
.tehama-class-display-settings-dropdown-toggle::after {
    color: inherit;
    content: "\2304";
    transform: scale(1.5, 1.0);
    display: none;
}

@media (min-width: 768px) {
    .tehama-class-display-settings-dropdown-toggle::after {
        display: inline-block;
        vertical-align:middle;
    }
}

.tehama-class-display-settings-dropdown-toggle:hover,
.tehama-class-display-settings-dropdown-toggle:focus,
.tehama-class-display-settings-dropdown-toggle:active {
    box-shadow: 0 0 5px var(--brand_color);
}

/*---------------------------------------------*/
/* .tehama-class-display-settings-dropdown     */
/*    -                                        */


.tehama-class-display-settings-dropdown {
    background:#fff;
    border:1px solid #d8d8d8;
    border-radius:3px;
    box-shadow:0 1px 5px rgba(0,0,0,.1);
    display:none;
    font-size:14px;
    font-style:normal;
    font-weight:normal;
    margin-top: 7px;
    min-width:260px;
    padding:10px 0;
    position:absolute;
    text-align:left;
    z-index:1000;
    left:auto;
    right:0;
}

[dir=rtl] .tehama-class-display-settings-dropdown {
    top:30px;
    left:0;
    right:auto;
    text-align:right;
    min-width:280px;
}

.tehama-class-display-settings-dropdown[aria-expanded=true] {
    display:block
}

.tehama-class-display-settings-dropdown::before,
.tehama-class-display-settings-dropdown::after {
    content:"";
    display:inline-block;
    position:absolute
}

.tehama-class-display-settings-dropdown::before {
    top:-7px;
    border-right:7px solid transparent;
    border-bottom:7px solid #d8d8d8;
    border-left:7px solid transparent;
    left:auto;
    right:9px;
}

.tehama-class-display-settings-dropdown::after {
    top:-6px;
    border-right:6px solid transparent;
    border-bottom:6px solid #fff;
    border-left:6px solid transparent;
    left:auto;
    right:9px;
}

[dir=rtl] .tehama-class-display-settings-dropdown::before {
    left:9px;
    right:auto;
}

[dir=rtl] .tehama-class-display-settings-dropdown::after {
    left:10px;
    right:auto
}

/*------------------------------------------------------*/
/* .tehama-class-display-settings-dropdown-list         */
/*    -                                                */

.tehama-class-display-settings-dropdown-list {
    padding-right: 15px;
}

/*---------------------------------------------------------------*/
/* .tehama-class-display-settings-dropdown-list-item             */
/*    -                                                          */

[dir="rtl"] .tehama-class-display-settings-dropdown-list-item {
    text-align: right;
}

.tehama-class-display-settings-dropdown-list-item {
    color:#333;
    cursor:pointer;
    display:block;
    padding: 7px 10px 7px 20px;
    white-space:nowrap;
    background-color:transparent;
    border:0;
    -webkit-appearance:none;
    line-height:inherit;
    width:100%;
    text-align:left
}

.tehama-class-display-settings-dropdown-list-item:hover,
.tehama-class-display-settings-dropdown-list-item:focus {
    background:#f3f3f3;
    text-decoration:none;
    color:#333
}

/*---------------------------------------------------------------*/
/* .tehama-class-display-settings-dropdown-list-item-checkbox    */
/*    -                                                          */

.tehama-class-display-settings-dropdown-list-item-checkbox {
    margin-left: 10px;
    margin-right: 0;
}

.tehama-class-display-settings-dropdown-list-item-checkbox:focus,
.tehama-class-display-settings-dropdown-list-item-checkbox:hover {
    outline: 2px solid var(--brand_color);
}

[dir=rtl] .tehama-class-display-settings-dropdown-list-item-checkbox {
    float: right;
    transform: translateY(4px);
}

/*---------------------------------------------------------------*/
/* .tehama-class-display-settings-dropdown-list-item-icon        */
/*    -                                                          */


[dir=rtl] .tehama-class-display-settings-dropdown-list-item-icon {
    float: right;
}


/*----------------------------------------------------------------*/
/* .tehama-class-display-settings-dropdown-toggle-gear-wheel-icon */
/*    -                                                           */


.tehama-class-display-settings-dropdown-toggle-gear-wheel-icon {
    display: inline-block;
    text-align: center;
}

[dir=rtl] .tehama-class-display-settings-dropdown-toggle-gear-wheel-icon {
    float: right;
}

/*---------------------------------------------*/
/* .tehama-id-display-settings-...             */
/*    -                                        */

#tehama-id-display-settings-list-item-reference-icon {
    color: var(--brand_color);
    font-size: 15px;
    margin-left: 5px;
    margin-right: 5px;
}

#tehama-id-display-settings-list-item-promoted-icon {
    color: var(--brand_color);
    font-size: 10px;
    margin-left: 5px;
    margin-right: 2px;
    padding: 3px;
}