.n-clippy {
    width: 2rem;
}


input[disabled] {
    /* Disabled elements "eat" clicks in some browsers */
    /* https://stackoverflow.com/questions/3100319/event-on-a-disabled-input */
    pointer-events:none;
}

.n-warning {
    font-weight:600;
    font-size:16px;
    color: var(--color-1);
}
.n-red {
    color: var(--color-1);
}

.n-settings {
    border: solid 2px var(--color-10);
    border-radius: 10px;
    padding:20px;
    display: flex;
    flex-direction:column;
    row-gap:15px;
}

.n-settings {
    margin-bottom: 25px;
}
.custom-span {
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-10);
    border-radius:4px;
    top: calc(50% - 8px);
    left: 0;
    position: absolute;
}

.custom-span::after {
    content:"";
    position: absolute;
    left: 50%;
    border-radius:3px;
    width: 9px;
    height: 9px;
    opacity: 0;
    transition: all 0.3s ease 0s;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: green;
}
.custom-block {
    display:block;
    transition: all 0.3s ease 0s;
    position:relative;
    margin-bottom: 0px;
}
.custom-block .custom-label{
    padding-left: 22px;
    display:inline-block;
}
.custom-block:hover {
    cursor:pointer;
}
.custom-input {
    width: 1px;
    height: 1px;
    position: fixed;
    top: -10000%;
    clip: rect (0,0,0,0);
}
.button-block__list {
    display:flex;
    column-gap:15px;
    align-items: center;
}
@media(max-width:767.98px){
    .special-characters-wrapper {
        display: flex;
        flex-direction: column;
        row-gap:10px;
    }
}

.minus-button,
.plus-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    border-radius: 5px;
    height: 45px;
    line-height: 1;
    color:var(--color-0);
    transition: all 0.3s ease 0s;
    border:1px solid var(--color-0);
}
.minus-button:hover,
.plus-button:hover {
    cursor: pointer;
    color:var(--color-8);
    border: 1px solid var(--color-8);
}
.minus-button:focus,
.plus-button:focus {
    color:var(--color-8);
    border:1px solid var(--color-8);
    outline: none;
}
.input-text {
    height: 45px;
    border:1px solid var(--color-8);
    border-radius: 5px;
    color: var(--color-10);
    font-size:16px;
    line-height:1.2;
}
.input-text-center {
    text-align:center;
}
.custom-label {
    margin-bottom: 0px;
    padding-left:25px;
    font-weight:600;
    font-size:16px;
}

.text-input-color {
   font-weight:600;
    font-size:16px;
    
}
.custom-input:checked~.custom-span::after {
    opacity: 1;
}
.custom-input:checked~.custom-span {
     border: 1px solid black;
}
.button-submit {
    width:300px;
    text-align:center;
    padding: 12px 24px;
    border:1px solid var(--color-8);
    border-radius:5px;
    transition: all .3s ease 0s;
    line-height: 1.2;
    background-color: var(--color-10);
    border-radius:25px;
    color: var(--color-6);
}


.n-result-below {
    border:1px solid var(--color-13);
    background-color: var(--color-12);
}



@media(max-width: 767.98px) {
    .input-text {
        font-size:14px;
    }
    .custom-label {
        font-size:14px;
    }
    
}
.input-text-disabled:disabled {
    opacity:0.5;
}


.button-submit:hover {
    cursor: pointer;
    background-color: var(--color-8);
}

.button-block {
    column-gap:15px;
    justify-content: start;
    align-items:center;
}
@media(max-width: 500px) {
    .button-block {
        flex-direction: column;
        align-items: flex-start;
        row-gap:10px;
    }
}
.button-block-label {
    display: flex;
    column-gap:15px;
    white-space:nowrap;
    align-items:center;
    margin-bottom: 0px;
}
.generated-password {
    margin-top: 3em;
    display: flex;
    flex-direction:column;
    align-items:flex-start;
}
.generated-password button{
     -webkit-tap-highlight-color:  transparent;
    width:100%;
    font-family: monospace;
    display: flex;
    padding:12px 24px;
    background-color: var(--color-4);
    border-radius: 6px;
    column-gap: 10px;
    transition: all 0.3s ease 03;
    align-items:center;
    outline:none;
}
.generated-password button:focus {
    outline:none;
}
.generated-password button:hover {
    cursor:pointer;
}

.n-to-clipboard {
    display: flex; 
    align-items:center;
}
.n-to-clipboard::before {
    content:none;
    display:none;
}

.n-result-button {
    margin-right: 1em;
}

.n-generated-password-headline {
    margin-top: 3em;
    font-weight: bold;
    font-size: 2em;
}

p.n-label {
    margin-bottom: 0em;
}