.btn {
    background-color: DodgerBlue;
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 8px;
}

/* Non-rounded border */
.btn.nr {
    border-radius: 0px;
}

/* Full width */
.btn.fw {
    width: 100%
}

/* Darker background on mouse-over */
.btn:hover {
    background-color: RoyalBlue;
}

/* Success btn */
.btn.success {
    background-color: #a6efb8e6;
}

/* Danger btn */
.btn.danger {
    background-color: #ffafb4e6;
}

/* Warning btn */
.btn.warning {
    background-color: #ffefb4e6;
}

/* Info btn */
.btn.info {
    background-color: #b4e4f9e6;
}

/* button (input style) */
.btn.input {
    background-color: rgb(82, 124, 165);
}

/* Darker on mouse-over */
.btn.input:hover {
    background-color: rgb(72, 109, 146);
}

/* Darker on active */
.btn.input:active {
    background-color: rgb(66, 111, 155);
}

/* Coffee buttons */
.cf-btns {
    display: flex;
    justify-content: center;
}

.cf-btns-item {
    margin: 2px;
}

/* Form buttons */
input[type=button],
input[type=submit],
input[type=reset] {
    background-color: rgb(82, 124, 165);
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 8px;
}

/* Darker background on mouse-over */
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
    background-color: rgb(72, 109, 146);
}

input[type=file] {
    padding: 4px;
    margin: -4px;
    position: relative;
    outline: none;
    /* File Selector Button Styles */
    /* Faked label styles and icon */
    /* Handle Component Focus */
}

input[type=file]::file-selector-button {
    border-radius: 4px;
    padding: 0 16px;
    height: 40px;
    cursor: pointer;
    background-color: rgb(74, 115, 156);
    border: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    margin-right: 16px;
    /*
      This is a hack to change the button label. 
      I'm hiding the default label and then 
      manually applying the width based on 
      updated icon and label.
    */
    width: 132px;
    color: transparent;
    /*
      Firefox doesn't support the pseudo ::before 
      or ::after elements on this input field so 
      we need to use the @supports rule to enable 
      default styles fallback for Firefox.
    */
}

@supports (-moz-appearance: none) {
    input[type=file]::file-selector-button {
        color: var(--primary-color);
    }
}

input[type=file]::file-selector-button:hover {
    background-color: rgb(66, 105, 145);
}

input[type=file]::file-selector-button:active {
    background-color: rgb(66, 111, 155);
}

input[type=file]::before {
    position: absolute;
    pointer-events: none;
    top: 14px;
    left: 16px;
    height: 20px;
    width: 20px;
    content: "";
}

input[type=file]::after {
    position: absolute;
    pointer-events: none;
    top: 16px;
    left: 40px;
    color: var(--primary-color);
    content: "Upload File";
}

input[type=file]:focus-within::file-selector-button,
input[type=file]:focus::file-selector-button {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}