.measurements-title-div {
    padding: 0.6em;
    background-color: var(--extra-dark-grey);
    font-size: 0.6em;     
    text-align: left;
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
}

.measurements-separator {
    border-bottom: 1px solid var(--grey-transparent);
    margin-top: 0.7em;
}

.measurements-panel-div {
    padding-left: 0.5em;
    padding-bottom: 0.5em;
    padding-top: 0.2em;
    background-color: var(--extra-dark-grey);
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: flex-start;
    border-bottom-left-radius: 0.3em;
    border-bottom-right-radius: 0.3em;
}

.measurements-global-element {
    display: flex;;
    align-items: center;   
    font-size: 0.7em; 
}

.measurements-color-text {
    margin-right: 1em;
    font-size: 0.8em;
    line-height: 1em;
}

.measurements-color-div {
    width: 2.95em;
    height: 1.1em;
    border-radius: 5em;
    cursor: pointer;
}

.measurements-list-div {
    background-color: var(--extra-dark-grey);
    margin-top: 1em;
    border-radius: 0.2em;
}

.measurements-empty-text {
    font-style: italic;
    font-size: 0.6em;
}

.measurements-color-row-div {
    width: 0.6em;
    height: 0.6em;
    border-radius: 10em;
    margin-top: 0.2em;
}

.measurements-row-div {
    font-size: 0.6em;
    display: grid;
    align-items: center;
    grid-template-columns: 1.5em 2em 32% 42% 1.5em;
    gap: 0.5em;
    padding: 0.2em;
    text-align: left;
    transition: background-color .2s;
}

.measurements-row-div:hover {
    cursor: pointer;
    background-color: #212427;
    border-radius: 0.3em;
}

.measurements-row-div.disabled {
    opacity: 0.5;
}

.measurement-text-row-input {
    background-color: var(--grey-transparent);
    border: 1px solid var(--dark-grey);
    border-radius: .25rem;
    color: var(--text-color);
    font-size: .8em;
    outline: 0;
    transition: border-color .1s ease-in-out, box-shadow .1s ease-in-out;
}

.measurements-delete-button {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.1em;
    height: 1.1em;
    opacity: 0.6;
    transition: opacity 0.2s;
    background-image: url(../../assets/buttons/trashBin.svg);
}

.measurements-title-inner-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-wrap: anywhere;
}

.measurements-list-buttons {
    display: flex; 
    gap: 0.5em;
}

.measurements-list-button {
    height: 1em;
    width: 1em;
    opacity: 0.6;
    cursor: pointer;
}

.measurement-color-picker {
    display: flex;
    background-color: var(--extra-dark-grey);
    padding: 0.5em;
    gap: 0.4em;
    height: 0.5em;
    justify-content: center;
    align-items: center;
    border-radius: 0.3em;
    margin-top: 0.2em;
}

.measurement-color-item {
    width: 1em;
    height: 1em;
    border-radius: 0.3em;
    cursor: pointer;
}

/* Chrome, Safari, Edge, Opera */
.measurements-number-picker::-webkit-outer-spin-button,
.measurements-number-picker::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.measurements-list-buttons.disabled {
    opacity: 0.1;
}

.measurement-type-icon {
    width: 1.3em;
    height: 1.3em;
}

.measurements-thickness-button{
    border: none !important;
}

.measurements-thickness-button.selected {
    background-color: var(--secondary);
}

.measurement-edit-panel {
    position: absolute; 
    display: flex; 
    background-color: var(--extra-dark-grey); 
    border-radius: 0.3em; 
    align-items: center; 
    box-shadow: 2px 4px 8px 0px rgb(0 0 0);
    z-index: 1;
}