/* 
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

 html,
 body {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
 }
 
 ul {
     margin: 0;
     padding: 0;
 }
 
 .ms-welcome__header {
    padding: 10px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
 }

 .ms-welcome__main {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
    padding: 10px 20px;
 }
 
 .ms-welcome__main > h2 {
     width: 100%;
     text-align: center;
 }
 
 .ms-welcome__features {
     list-style-type: none;
     margin-top: 10px;
 }

 .ms-firstrun-instructionstep__header {
   padding-left: 20px;
 }

 .ms-firstrun-instructionstep__welcome-body {
   padding-left: 20px;
 }

 .ms-firstrun-instructionstep__list {
   padding-left: 20px;
 }
 
 .ms-welcome__features.ms-List .ms-ListItem {
     padding-left: 20px;
     padding-bottom: 10px;
     display: -webkit-flex;
     display: flex;
 }
 
 .ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
     margin-right: 10px;
 }
 
 .ms-welcome__action.ms-Button--hero {
     margin-top: 30px;
 }
 
.ms-Button.ms-Button--hero .ms-Button-label {
  color: #0078d7;
}

.ms-Button.ms-Button--hero:hover .ms-Button-label,
.ms-Button.ms-Button--hero:focus .ms-Button-label{
  color: #005a9e;
  cursor: pointer;
}

.dark-background {
  background-color: #3d3d3d;
}

.light-background {
  background-color: #efefef;
}

.on-dark-background {
  color: white;
}

.on-light-background {
  color: #3d3d3d;
}

.icon-button-color-on-dark sl-icon-button::part(base) {
  color: white;
}

.icon-button-color-on-dark sl-icon-button::part(base):hover,
.icon-button-color-on-dark sl-icon-button::part(base):focus {
  color: rgb(209, 209, 209);
}

.icon-button-color-on-dark sl-icon-button::part(base):active {
  color: white;
}

.icon-button-color-on-light sl-icon-button::part(base) {
  color: #3d3d3d;
}

.icon-button-color-on-light sl-icon-button::part(base):hover,
.icon-button-color-on-light sl-icon-button::part(base):focus {
  color: rgb(118, 118, 118)
}

.icon-button-color-on-light sl-icon-button::part(base):active {
  color: #3d3d3d;
}

.icon-button-color-red sl-icon-button::part(base) {
  color: #9b2323;
}

.icon-button-color-red sl-icon-button::part(base):hover,
.icon-button-color-red sl-icon-button::part(base):focus {
  color: rgb(224, 16, 16)
}

.icon-button-color-red sl-icon-button::part(base):active {
  color: #9b2323;
}

.intro-tracker-link-on-dark {
  color: white;
  cursor: pointer;
}

.intro-tracker-link-on-dark:hover {
  color: rgb(209, 209, 209);
}

.intro-tracker-header {
  font-family: var(--sl-font-sans);
  font-size: var(--sl-font-size-large);
}

.intro-tracker-body {
  font-family: var(--sl-font-sans);
  font-size: var(--sl-font-size-small);
}

sl-button[variant="default"]::part(base):hover {
  background-color: #3d3d3d;
  border-color: white;
  color: white;
}

sl-button[variant="warning"]::part(base) {
  background-color: #912e2e;
  border-color: white;
  color: white;
}

sl-button[variant="warning"]::part(base):hover {
  background-color: #6d2424;
}


b {
    font-weight: bold;
}

.custom-combobox {
  display: flex;
  align-items: center;
}

.combobox-input {
  flex: 1;
  margin-right: 1rem;
}

.combobox-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.combobox-list-item {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  background-color: #eee;
}

.combobox-list-item span {
  flex: 1;
}

.combobox-list-item button {
  margin-left: 0.5rem;
  padding: 0.25rem;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.combobox-list-item button:hover {
  background-color: #ddd;
}

.error-message {
  font-size: x-small;
  color: #6d2424;
}

.success-message {
  font-size: medium;
  color: #246d2b;
}

.search-result-list-item-container {
  display: inline-flex;
  width: 100%;
}

.search-result-list-item-image-container {
  margin-right: 5px;
}

.search-result-list-image {
  width: 100px;
  height: 100px;
}

.search-result-list-item-details-container {
  font-size: small;
  margin-left: 5px;
}

.search-result-list-item-title {
  color: black;
  text-decoration: underline;
  text-decoration-color: #5aba48;
  cursor: pointer;
}

.search-result-list-item-title:hover {
  text-decoration: underline;
  text-decoration-color: #030feb;
}

.search-result-list-item-subtitle {
  text-decoration: underline;
  text-decoration-color: #5aba48;
}

.duplicate-list-item-container {
  display: inline-flex;
  width: 100%;
  cursor: pointer;
}

.duplicate-list-item-container:hover {
  background-color: #5353535d;
}

.intro-header {
  background-image: url("../../assets/addin-banner.webp");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100px;
  display: grid;
  align-items: center;
}


.duplicate-list-item-image-container {
  margin-right: 5px;
}

.duplicate-list-image {
  width: 100px;
  height: 100px;
}

.duplicate-list-item-details-container {
  font-size: small;
  margin-left: 5px;
}