/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/

.mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.mud-expand-panel .mud-expand-panel-content {
    padding-bottom: 6px !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
}

.icon-sprite-wrapper {
    width: 32px;
    height: 32px;
    overflow: hidden; /* Cache les parties en dehors des 32x32 pixels */
    display: inline-block;
}

.icon-sprite {
    width: auto; /* Permet à l'image de garder sa taille naturelle pour que le positionnement fonctionne */
    height: auto;
    max-width: none;
}


.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

.diagram-container {
    width: 100%;
    height: 600px;
    border: none;
}

.item-node-title {
    background-color: dodgerblue;
}

.tag-node-title {
    background-color: grey;
}

.recipe-node-title {
    background-color: darkgreen;
}

.eco-node {
    padding: 20px;
    color: white;
}

.rectangle-input .mud-input {
    height: 25px;
    width: 100px;
}

.rectangle-input .mud-input-slot {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.flex-no-grow {
    flex: 0 1 auto !important;
}

.square-input .mud-input {
    height: 35px;
    width: 55px;
}

.rectangle-input input.mud-input-root-outlined, .square-input input.mud-input-root-outlined {
    padding-top: 6px !important;
    padding-bottom: 7px !important;
}

.rectangle-input input.mud-input-root-filled, .square-input input.mud-input-root-filled {
    padding-top: 6px !important;
    padding-bottom: 7px !important;
}

.rectangle-input input.mud-input-root {
    padding-inline-start: 6px !important;
}

.auto-complete-input input.mud-input-root {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.select-dense .mud-input-slot {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
}

.select-dense.very-dense .mud-input-slot {
    padding: 6px 3px 7px 6px !important;
}

.select-dense.very-dense .mud-input {
    padding-right: 0 !important;
}

.mud-table-head .mud-table-row .mud-table-cell {
    background-color: #303038 !important;
}

.mud-table-container-no-overflow-y > .mud-table-container {
    overflow-y: hidden !important;
}

.dense-checkbox .mud-button-root {
    padding: 4px;
}

.hack-validation .mud-input-control-helper-container {
    position: absolute;
    bottom: -25px;
}

.small-adornment .mud-input-adorned-end {
    padding-right: 1px !important;
}

.small-adornment .mud-input-adornment-icon-button {
    padding: 7px !important;
    margin-right: -6px !important;
}

.small-adornment .mud-input-root-adorned-end {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.small-adornment .mud-icon-root {
    font-size: 1.25rem !important;
}

.small-adornment.small-adornment-with-spin .mud-input-adornment-end {
    margin-right: 16px !important;
}

.no-wrap-select .mud-input-slot {
    white-space: wrap !important;
}

.recipe-table .mud-table-row > :first-child {
    max-width: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
    left: 12px;
}

.border-l-1 {
    border-left: 1px solid var(--mud-palette-table-lines) !important;
}

.border-r-1 {
    border-right: 1px solid var(--mud-palette-table-lines) !important;
}

.release ul {
    padding-left: 16px !important;
    list-style: disc !important;
}

.margin-select-container .mud-select {
    flex: 0;
    background-color: #45454e !important;
}

.margin-select .mud-input {
    padding-right: 0 !important;
}

.margin-select .mud-input-slot {
    padding: 3px 3px 3px 6px !important;
    width: 61px !important;
}

.margin-select .mud-input-outlined-border {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.margin-price .mud-input-outlined-border {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left-width: 0 !important;
}

.mud-list .mud-list-item.mud-list-item-dense {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.small-text-field .mud-input-slot {
    padding-top: 4px !important;
    padding-bottom: 5px !important;
    font-size: .875rem !important;
}

.tooltip-text {
    text-decoration: underline dotted 0.09rem;
}

.server-select .mud-input-label {
    background-color: var(--mud-palette-appbar-background) !important;
}

.copy-server-select .mud-input-label {
    background-color: var(--mud-palette-background) !important;
}

.max-price .mud-input-numeric-spin button:first-child{
    visibility: hidden;
}

.min-price .mud-input-numeric-spin button:nth-child(2) {
    visibility: hidden;
}

.app-bar .mud-toolbar {
    padding-left: 4px;
}

.mud-list .mud-selected-item.mud-primary-text {
    color: inherit!important;
}

.no-talent {
    filter: grayscale(100%);
}

.no-talent:hover, .has-talent:hover {
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.55)!important;
}

.has-talent {
    box-shadow: 0 0 6px rgba(255, 255, 0, 0.75) !important;
}

.no-pluginmodule {
    filter: grayscale(100%);
}

.no-pluginmodule:hover, .has-pluginmodule:hover {
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.55)!important;
}

.has-pluginmodule {
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.75) !important;
}

.grey-filter {
    filter: grayscale(100%);
}

#custom-reconnect {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background-color: #222;
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

.text-shadow-black {
    text-shadow: 1px 0 0 #000,
                 0 1px 0 #000,
                 -1px 0 0 #000,
                 0 -1px 0 #000
}