/* ------------------------------------------
 Roboto - Default
------------------------------------------ */

/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'), local('Roboto-Light'),
    url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'),
    url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'), local('Roboto-Medium'),
    url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: local('Roboto Italic'), local('Roboto-Italic'),
    url('../fonts/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'), local('Roboto-Bold'),
    url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}


/* ------------------------------------------
 SVG replacements for Material Icons
 @TODO We have to move this code and SVG files to a proper place.
------------------------------------------ */

html.root-pf-chatbot .radio.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons {
    color: transparent !important;
    display: block !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
}

html:not(.root-pf-chatbot) .radio.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons {
    color: transparent !important;
    display: block !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
}
html:not(.root-pf-chatbot) div.search-main-symptom-block > .radio.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons {
    color: transparent !important;
    display: flex !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
}

.radio.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons:not(.icon--radio) {
    background-image: url('./material-icons-alternatives/Radio_Button_Unchecked.svg') !important;
}
.radio.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons.icon--radio {
  /*  background-image: url('./material-icons-alternatives/Radio_Button_Checked.svg') !important;*/
}
html.root-pf-chatbot .choose-main-symptom-popup .radio.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons.icon--radio {
    /*background-image: url('./material-icons-alternatives/Radio_Button_Checked.svg') !important;*/
}
/* Fix for Languages dropdown (in authenticated user's header) */
.account-settings .radio.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons {
    bottom: 4px;
}

html:not(.root-pf-chatbot) .checkbox.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons {
    color: transparent !important;
    display: block !important;
    content: ' ' !important;
    background-image: url('./material-icons-alternatives/Check_Box_Unchecked.svg') !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
}
html:not(.root-pf-chatbot) .checkbox.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons.icon--checkbox {
  /*  color: transparent !important;*/
    display: block !important;
    content: ' ' !important;
  /*  background-image: url('./material-icons-alternatives/Check_Box_Checked.svg') !important;*/
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
}
html:not(.root-pf-chatbot) .checkbox.no-selected-symptom.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons {
    color: transparent !important;
    display: block !important;
    content: ' ' !important;
    background-image: url('./material-icons-alternatives/Check_Box_No_Unchecked.svg') !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
}
html:not(.root-pf-chatbot) .checkbox.no-selected-symptom.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons.icon--checkbox {
    color: transparent !important;
    display: block !important;
    content: ' ' !important;
    background-image: url('./material-icons-alternatives/Check_Box_No_Checked.svg') !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
}

/** ##### DATATABLE icons (used for Assessment List) - ##### **/

/* --- Sort/Order --- */
html:not(.root-pf-chatbot) .theme--light .datatable.table th.column.sortable > i.icon.material-icons {
    color: transparent !important;
    font-size: 1px !important;
    display: block !important;
    content: ' ' !important;
    background-size: 16px 16px !important;
    height: 16px !important;
    width: 16px !important;
}
html:not(.root-pf-chatbot) .theme--light .datatable.table thead th.column.sortable.active > i.icon.material-icons {
    /*background-image: url('./material-icons-alternatives/Sort_Up_Red.svg') !important;*/
}
html:not(.root-pf-chatbot) .theme--light .datatable.table thead th.column.sortable:hover:not(.active) > i.icon.material-icons {
    background-image: url('./material-icons-alternatives/Sort_Up_Grey.svg') !important;
}

/* --- Clear Search --- */
html:not(.root-pf-chatbot) .assessment-list-table-container .assessment-list-search-criteria-row .input-group__input .input-group__append-icon {
    color: transparent !important;
    font-size: 1px !important;
    display: block !important;
    content: ' ' !important;
    background-size: 20px 20px !important;
    height: 20px !important;
    width: 20px !important;
    /*background-image: url('./material-icons-alternatives/Clear_Red.svg') !important;*/
}
/* --- Filter: calendar/date picker --- */
html:not(.root-pf-chatbot) .picker.picker--date .date-picker-header i.icon.material-icons {
    color: transparent !important;
    font-size: 1px !important;
    display: block !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
}
html:not(.root-pf-chatbot) .picker.picker--date .date-picker-header .btn--icon:first-of-type i.icon.material-icons:first-of-type {
    background-image: url('./material-icons-alternatives/Arrow_Left.svg') !important;
}
html:not(.root-pf-chatbot) .picker.picker--date .date-picker-header .btn--icon:last-of-type i.icon.material-icons {
    background-image: url('./material-icons-alternatives/Arrow_Right.svg') !important;
}

/* --- Pagination --- */
html:not(.root-pf-chatbot) .theme--light .datatable .datatable__actions .datatable__actions__range-controls button.btn.btn--icon .icon.material-icons {
    color: transparent !important;
    font-size: 1px !important;
    display: block !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
}
/* "Next Page" arrow */
html:not(.root-pf-chatbot) .theme--light .datatable .datatable__actions .datatable__actions__range-controls button.btn.btn--icon:last-of-type .icon.material-icons {
    background-image: url('./material-icons-alternatives/Arrow_Right.svg') !important;
}
html:not(.root-pf-chatbot) .theme--light .datatable .datatable__actions .datatable__actions__range-controls button.btn.btn--icon.btn--disabled:last-of-type .icon.material-icons {
    background-image: url('./material-icons-alternatives/Arrow_Right_DIsabled.svg') !important;
}
/* "Previous Page" arrow */
html:not(.root-pf-chatbot) .theme--light .datatable .datatable__actions .datatable__actions__range-controls button.btn.btn--icon:first-of-type .icon.material-icons {
    background-image: url('./material-icons-alternatives/Arrow_Left.svg') !important;
}
html:not(.root-pf-chatbot) .theme--light .datatable .datatable__actions .datatable__actions__range-controls button.btn.btn--icon.btn--disabled:first-of-type .icon.material-icons {
    background-image: url('./material-icons-alternatives/Arrow_Left_Disabled.svg') !important;
}
/* "Rows Per Page" dropdown */
html:not(.root-pf-chatbot) .theme--light .datatable .datatable__actions__select .input-group--select .input-group__input .input-group__append-icon {
    color: transparent !important;
    font-size: 1px !important;
    display: block !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    background-image: url('./material-icons-alternatives/Arrow_Drop_Down.svg') !important;
    background-position: center;
}


/** ##### DROPDOWN ARROW - ##### **/
html:not(.root-pf-chatbot) .input-group--select.select-value .icon.material-icons.input-group__append-icon,
html:not(.root-pf-chatbot) .language-option .icon.material-icons,
html:not(.root-pf-chatbot) .user-account-card .input-group .icon.material-icons {
  /*  background-image: url('./material-icons-alternatives/Arrow_Down_Red.svg') !important;*/
    background-size: 36px 36px !important;
    height: 36px !important;
    width: 36px !important;
    color: transparent !important;
   /* margin-right: 9px;*/
}

html:not(.root-pf-chatbot) .input-group--select.select-value.answer-value .icon.material-icons.input-group__append-icon,
html:not(.root-pf-chatbot) .language-option.answer-value .icon.material-icons,
html:not(.root-pf-chatbot) .translation-selector__select__input-group .icon.material-icons,
html:not(.root-pf-chatbot) .user-registration-input-field.select-option .icon.material-icons,
html:not(.root-pf-chatbot) .user-decision-container .icon.material-icons.input-group__append-icon,
html:not(.root-pf-chatbot) .vital-params-dropdown-card .input-group--select.select-value .icon.material-icons.input-group__append-icon {
    background-image: url('./material-icons-alternatives/Arrow_Down_Grey.svg') !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    color: transparent !important;
    margin-right: 9px;
}


/** ##### EXPAND/COLLAPSE PANELS -  ARROW ##### **/
html:not(.root-pf-chatbot) .symptoms-container .header__icon .icon,
html:not(.root-pf-chatbot) .scrolling-content-scoring .header__icon .icon,
html:not(.root-pf-chatbot) #expansions-list .header__icon .icon {
    background-image: url('./material-icons-alternatives/Expand.svg') !important;
    background-size: 30px 30px !important;
    height: 30px !important;
    width: 30px !important;
    color: transparent !important;
}

html:not(.root-pf-chatbot) .symptoms-container .expansion-panel__container--active .header__icon .icon,
html:not(.root-pf-chatbot) .scrolling-content-scoring .expansion-panel__container--active .header__icon .icon,
html:not(.root-pf-chatbot) #expansions-list .expansion-panel__container--active .header__icon .icon{
    background-image: url('./material-icons-alternatives/Colapse.svg') !important;
    background-size: 30px 30px !important;
    height:30px !important;
    width: 30px !important;
    color: transparent !important;
    transform: none !important;
}

html:not(.root-pf-chatbot) .general-container .expansion-panel__container .header__icon,
html:not(.root-pf-chatbot) .summary-content .expansion-panel__container .header__icon {
    border: none !important;
}


/** ##### SEARCH MAIN SYMPTOM INPUT -  SEARCH ICON ##### **/
html:not(.root-pf-chatbot) .main-symptom-container .input-searchSymptom.input-group .input-group__prepend-icon,
html:not(.root-pf-chatbot) .assessment-list-page-content .input-group .input-group__prepend-icon {
    background-image: url('./material-icons-alternatives/Search.svg') !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    color: transparent !important;
}

/** ##### SEARCH MAIN SYMPTOM INPUT -  CLEAR ICON ##### **/
html:not(.root-pf-chatbot) .main-symptom-container .input-searchSymptom.input-group .input-group__icon-clearable,
html:not(.root-pf-chatbot) .popup-scoring.sendAssessment .icon.input-group__icon-clearable,
html:not(.root-pf-chatbot) .assessment-list-page-content .input-group__icon-clearable {
    background-image: url('./material-icons-alternatives/Close_Grey.svg') !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    color: transparent !important;
    -webkit-animation: fadein 0.7s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 0.7s; /* Firefox < 16 */
    -ms-animation: fadein 0.7s; /* Internet Explorer */
    -o-animation: fadein 0.7s; /* Opera < 12.1 */
    animation: fadein 0.7s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/** ##### USER REGISTER PAGE - PASSWORD VISIBILITY ##### **/
.password-input .icon {
    background-image: url('./material-icons-alternatives/Visibility.svg') !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    color: transparent !important;
}

.password-input.password-visibility .icon {
    background-image: url('./material-icons-alternatives/Visibility_Off.svg') !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    color: transparent !important;
}

/** ##### LOGIN PAGE - CAROUSEL ##### **/
.login-container .carousel .btn--icon.carousel__controls__item {
    background-image: url('./material-icons-alternatives/Bullet_Transparency.svg') !important;
    background-size: 16px 16px !important;
    height: 16px !important;
    width: 16px !important;
    color: transparent !important;
}

.login-container .carousel .btn--icon.carousel__controls__item.carousel__controls__item--active {
    background-image: url('./material-icons-alternatives/Bullet.svg') !important;
    background-size: 16px 16px !important;
    height: 16px !important;
    width: 16px !important;
    color: transparent !important;
}

/* PRO mobile menu icon */
.header-bar-pathfinder .mobile-menu-btn .icon {
    background-image: url('./material-icons-alternatives/chatbot/Menu.svg') !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    color: transparent !important;
}


/** ###### CHATBOT only ###### **/

/* CHATBOT mobile menu icon */
html:not(.root-pf-chatbot) .header-menu .icon {
    background-image: url('./material-icons-alternatives/chatbot/Menu.svg') !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    color: transparent !important;
}

/* --- Edit answer --- */

/* Close popup, Close Edit Answer popup */
html.root-pf-chatbot i.icon.material-icons.icon-close-popup,
html.root-pf-chatbot i.icon.material-icons.close-edit-answer-icon {
    color: transparent !important;
    font-size: 1px !important;
    display: block !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    background-image: url('./material-icons-alternatives/Close_Grey.svg') !important;
}

/* Main Symptom popup */
html.root-pf-chatbot .popup-symptoms .main-symptom-search-input-container i.icon.material-icons.search-main-symptom-pf {
    color: transparent !important;
    font-size: 1px !important;
    display: block !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    /*background-image: url('./material-icons-alternatives/Search_Red.svg') !important;*/
}
/*html.root-pf-chatbot .choose-main-symptom-popup .search-main-symptom-wrapper .chatbot-search-input-main-symptom i.icon.material-icons.input-group__prepend-icon, */
html.root-pf-chatbot .choose-main-symptom-popup .search-main-symptom-wrapper i.icon.material-icons.search-main-symptom-pf {
    color: transparent !important;
    font-size: 1px !important;
    display: block !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    background-image: url('./material-icons-alternatives/Search_Red.svg') !important;
}
html.root-pf-chatbot .popup-symptoms .chatbot-search-input-main-symptom i.icon.material-icons.input-group__prepend-icon {

    /* @TODO Replace SVG file arrow with another arrow, as designed. */

    color: transparent !important;
    font-size: 1px !important;
    display: block !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    background-image: url('./material-icons-alternatives/Arrow_back.svg') !important;
}
html.root-pf-chatbot .popup-symptoms .chatbot-search-input-main-symptom i.icon.material-icons.input-group__append-icon {
    color: transparent !important;
    font-size: 1px !important;
    display: block !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
   /* background-image: url('./material-icons-alternatives/Clear_Red.svg') !important;*/
}
html.root-pf-chatbot .choose-main-symptom-popup .search-main-symptom-wrapper i.icon.material-icons.input-group__append-icon {

    display: none; /* We initially set display:none, but it will be override from javascript with display:initial only after the theme colored icon has been added to the page. This is needed in order to prevent "clear" text to be shown instead of the "X" icon. */

    color: transparent !important;
    font-size: 1px !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    /* background-image: url('./material-icons-alternatives/Clear_Red.svg') !important;*/
}
html.root-pf-chatbot .popup-symptoms .chatbot-chapters .header-chapter .close-expanded-chapter i.icon.material-icons,
html.root-pf-chatbot .popup-symptoms .chatbot-chapters .chapter-symptoms-list i.icon.material-icons.close-symptoms {
    color: transparent !important;
    font-size: 1px !important;
    display: block !important;
    content: ' ' !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    background-image: url('./material-icons-alternatives/Close_Grey.svg') !important;
}
html.root-pf-chatbot .popup-symptoms .input-group.radio .input-group__input > .icon.icon--selection-control.material-icons {
    top: 3px;
}
html.root-pf-chatbot .choose-main-symptom-popup .chapter-tree--chapter-list .chapter-list-row .icon.chapter-list-row--icon--close,
html.root-pf-chatbot .choose-main-symptom-popup .chapter-tree--chapter-list .subchapter-list-row .icon.subchapter-list-row--icon--close {
    background-image: url('./material-icons-alternatives/Close_Grey.svg') !important;
}


/* Related Symptoms */

html.root-pf-chatbot .related-symptom-list-related-symptoms .checkbox.input-group--selection-controls > .input-group__input > i.icon.icon--selection-control.material-icons:not(.icon--checkbox) {
    color: transparent !important;
    display: block;
    content: ' ' !important;
    /*background-image: url('./material-icons-alternatives/Radio_Button_Unchecked – 1.svg') !important;*/
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    top: 4px;
    position: absolute;
    opacity: 0.5;
}
html.root-pf-chatbot.theme--light .related-symptom-list-related-symptoms .checkbox.input-group--selection-controls > .input-group__input > i.icon.icon--selection-control.material-icons:not(.icon--checkbox) {
    background-image: url('./material-icons-alternatives/check_circle_Light.svg') !important;
}
html.root-pf-chatbot.theme--dark .related-symptom-list-related-symptoms .checkbox.input-group--selection-controls > .input-group__input > i.icon.icon--selection-control.material-icons:not(.icon--checkbox) {
    background-image: url('./material-icons-alternatives/check_circle_Dark.svg') !important;
}
html.root-pf-chatbot.theme--light.high--contrast .related-symptom-list-related-symptoms .checkbox.input-group--selection-controls > .input-group__input > i.icon.icon--selection-control.material-icons:not(.icon--checkbox) {
    background-image: url('./material-icons-alternatives/check_circle_HC.svg') !important;
}
html.root-pf-chatbot.theme--dark.high--contrast .related-symptom-list-related-symptoms .checkbox.input-group--selection-controls > .input-group__input > i.icon.icon--selection-control.material-icons:not(.icon--checkbox) {
    background-image: url('./material-icons-alternatives/check_circle_Dark_HC.svg') !important;
}
html.root-pf-chatbot .related-symptom-list-related-symptoms .checkbox.input-group--selection-controls > .input-group__input > i.icon.icon--selection-control.material-icons.icon--checkbox {
    color: transparent !important;
    display: block;
    content: ' ' !important;
  /*  background-image: url('./material-icons-alternatives/Radio_Button_Checked – 1.svg') !important;*/
    background-size: 22px 22px !important;
    height: 22px !important;
    width: 22px !important;
    top: 4px;
    position: absolute;
}

/* --- Chatbot - Share Assessment --- */
html.root-pf-chatbot--assessment-share .checkbox.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons {
    color: transparent !important;
    display: block !important;
    content: ' ' !important;
    background-image: url('./material-icons-alternatives/Check_Box_Unchecked.svg') !important;
    background-size: 22px 22px !important;
    height: 22px !important;
    width: 22px !important;
}
html.root-pf-chatbot--assessment-share .checkbox.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons.icon--checkbox {
    color: transparent !important;
    display: block !important;
    content: ' ' !important;
   /* background-image: url('./material-icons-alternatives/Check_Box_Checked.svg') !important;*/
    background-size: 22px 22px !important;
    height: 22px !important;
    width: 22px !important;
}
div#patient-consent-checkbox-wrapper .checkbox.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons {
    color: transparent !important;
    display: block !important;
    content: ' ' !important;
    background-image: url('./material-icons-alternatives/Check_Box_Unchecked.svg') !important;
    background-size: 22px 22px !important;
    height: 22px !important;
    width: 22px !important;
}
div#patient-consent-checkbox-wrapper .checkbox.input-group--selection-controls > .input-group__input > .icon.icon--selection-control.material-icons.icon--checkbox {
    color: transparent !important;
    display: block !important;
    content: ' ' !important;
    /* background-image: url('./material-icons-alternatives/Check_Box_Checked.svg') !important;*/
    background-size: 22px 22px !important;
    height: 22px !important;
    width: 22px !important;
}
html.root-pf-chatbot--assessment-share .assessment-share-page-btn-action.sendAssessment .icon.input-group__icon-clearable {
    background-image: url('./material-icons-alternatives/Close_Grey.svg') !important;
    background-size: 24px 24px !important;
    height: 24px !important;
    width: 24px !important;
    color: transparent !important;
    -webkit-animation: fadein 0.7s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 0.7s; /* Firefox < 16 */
    -ms-animation: fadein 0.7s; /* Internet Explorer */
    -o-animation: fadein 0.7s; /* Opera < 12.1 */
    animation: fadein 0.7s;
}


/* ------------------------------------------
 @TODO | This is not related to fonts!!!
 @TODO | WE MUST MOVE THIS CODE to a proper place!!!
 @TODO | We temporary added this code here because of some wrong configuration in webpack (that should be fixed
 @TODO | when we have time) that prevents the image files to be loaded when used in .scss files.
------------------------------------------ */
/* When the chatbot page is loading without this styling the chatbot section in the middle will not have full height.*/
/* We need this to simulate a full height chatbot section before the content is loaded.*/
html.theme--light.root-pf-chatbot body {
    background-image: url('../img/chatbot-light-theme-bg.png');
    background-repeat: repeat-y;
    background-position: top center;
}
html.root-pf-chatbot.theme--dark body {
    background-image: url('../img/chatbot-dark-theme-bg.png');
    background-repeat: repeat-y;
    background-position: top center;
}
html.root-pf-chatbot.theme--light.high--contrast body {
    background-image: url('../img/chatbot-light-high-contrast-theme-bg.png');
    background-repeat: repeat-y;
    background-position: top center;
}
html.root-pf-chatbot.theme--dark.high--contrast body {
    background-image: url('../img/chatbot-dark-high-contrast-bg.png');
    background-repeat: repeat-y;
    background-position: top center;
}