﻿.infotext-next-to-button {
    margin: 1px;
    border-radius: var(--border-radius-buttons);
    box-sizing: border-box;
    display: inline-block;
    text-decoration: none;
    line-height: 20px;
    list-style: none;
    padding: 6px 0px;
    position: relative;
    vertical-align: middle;
    white-space: wrap;
    word-wrap: break-word;
    justify-self: start;
    min-width: 54px;
    min-height: 34px;
    align-content: center;
    text-align: left;
    line-break:anywhere;
        
}


.btn {
    margin: 1px;
    appearance: none;
    border-radius: var(--border-radius-buttons);
    box-sizing: border-box;
    color: var(--white-color);
    cursor: pointer;
    display: inline-block;
    font-weight: 500;
    text-decoration: none;
    line-height: 20px;
    list-style: none;
    padding: 6px 16px;
    position: relative;
    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: break-word;
    justify-self: start;
    min-width: 54px;
    min-height: 34px;
    align-content: center;
    text-align: center;
}

    .btn:hover {
        /*text-decoration: underline;*/
        transition-duration: 0.1s;
        /*text-shadow: 0px 0px 3px var(--dark-color);*/
        box-shadow: 0px 0px 2px 2px var(--shadow-color);
    }

    .btn:disabled {
        display: none;
    }

    .btn:active {
        background-color: var(--white-color);
        box-shadow: var(--shadow-color) 0 1px 0 inset;
        transition: none 0s;
    }

    .btn:focus {
        outline: 1px transparent;
    }

    .btn:before {
        display: none;
    }

    .btn:-webkit-details-marker {
        display: none;
    }


.btn-default {
    border: var(--border-width) solid var(--default-border-color);
    border-top: var(--border-width) solid var(--default-border-top-color);
    background-image: linear-gradient(92.83deg, var(--default-hover-color) 0, var(--default-color) 100%);
}

    .btn-default:hover {
        background-image: linear-gradient(92.83deg, var(--default-color) 0, var(--default-hover-color) 100%);
    }

.btn-primary {
    border: var(--border-width) solid var(--primary-border-color);
    border-top: var(--border-width) solid var(--primary-border-top-color);
    background-image: linear-gradient(92.83deg, var(--primary-hover-color) 0, var(--primary-color) 100%);
}

    .btn-primary:hover {
        background-image: linear-gradient(92.83deg, var(--primary-color) 0, var(--primary-hover-color) 100%);
    }

.btn-info {
    border: var(--border-width) solid var(--info-border-color);
    border-top: var(--border-width) solid var(--info-border-top-color);
    background-image: linear-gradient(92.83deg, var(--info-hover-color) 0, var(--info-color) 100%);
    color: var(--black-color);
}

    .btn-info:hover {
        background-image: linear-gradient(92.83deg, var(--info-color) 0, var(--info-hover-color) 100%);
        text-shadow: 0px 0px 3px var(--light-color);
    }

.btn-success {
    border: var(--border-width) solid var(--success-border-color);
    border-top: var(--border-width) solid var(--success-border-top-color);
    background-image: linear-gradient(92.83deg, var(--success-hover-color) 0, var(--success-color) 100%);
}

    .btn-success:hover {
        background-image: linear-gradient(92.83deg, var(--success-color) 0, var(--success-hover-color) 100%);
    }

.btn-warning {
    border: var(--border-width) solid var(--warning-border-color);
    border-top: var(--border-width) solid var(--warning-border-top-color);
    background-image: linear-gradient(92.83deg, var(--warning-hover-color) 0, var(--warning-color) 100%);
}

    .btn-warning:hover {
        background-image: linear-gradient(92.83deg, var(--warning-color) 0, var(--warning-hover-color) 100%);
    }

.btn-danger {
    border: var(--border-width) solid var(--danger-border-color);
    border-top: var(--border-width) solid var(--danger-border-top-color);
    background-image: linear-gradient(92.83deg, var(--danger-hover-color) 0, var(--danger-color) 100%);
}

    .btn-danger:hover {
        background-image: linear-gradient(92.83deg, var(--danger-color) 0, var(--danger-hover-color) 100%);
    }

.btn-dark {
    border: var(--border-width) solid var(--dark-border-color);
    border-top: var(--border-width) solid var(--dark-border-top-color);
    background-image: linear-gradient(92.83deg, var(--dark-hover-color) 0, var(--dark-color) 100%);
}

    .btn-dark:hover {
        background-image: linear-gradient(92.83deg, var(--dark-color) 0, var(--dark-hover-color) 100%);
    }

.btn-light {
    border: var(--border-width) solid var(--light-border-color);
    border-top: var(--border-width) solid var(--light-border-top-color);
    background-image: linear-gradient(92.83deg, var(--light-hover-color) 0, var(--light-color) 100%);
    color: var(--black-color);
}

    .btn-light:hover {
        background-image: linear-gradient(92.83deg, var(--light-color) 0, var(--light-hover-color) 100%);
        text-shadow: 0px 0px 3px var(--light-color);
    }

.btn-strava {
    border: var(--border-width) solid var(--strava-border-color);
    border-top: var(--border-width) solid var(--strava-border-top-color);
    background-image: linear-gradient(92.83deg, var(--strava-hover-color) 0, var(--strava-color) 100%);
}

    .btn-strava:hover {
        background-image: linear-gradient(92.83deg, var(--strava-color) 0, var(--strava-hover-color) 100%);
    }

.btn-transparent {
    border: var(--border-width) solid var(--transparent-border-color);
    border-top: var(--border-width) solid var(--transparent-border-top-color);
    background-image: linear-gradient(92.83deg, var(--transparent-hover-color) 0, var(--transparent-color) 100%);
    color: var(--dark-text-color);
}

    .btn-transparent:hover {
        background-image: linear-gradient(92.83deg, var(--transparent-color) 0, var(--transparent-hover-color) 100%);
    }

.btn-dark-transparent {
    border: var(--border-width) solid var(--dark-transparent-border-color);
    border-top: var(--border-width) solid var(--dark-transparent-border-top-color);
    background-image: linear-gradient(92.83deg, var(--dark-transparent-hover-color) 0, var(--dark-transparent-color) 100%);
    color: var(--light-text-color);
}

.btn-dark-transparent:hover {
    background-image: linear-gradient(92.83deg, var(--dark-transparent-color) 0, var(--dark-transparent-hover-color) 100%);
}

.btn-light-transparent {
    border: var(--border-width) solid var(--light-transparent-border-color);
    border-top: var(--border-width) solid var(--light-transparent-border-top-color);
    background-image: linear-gradient(92.83deg, var(--light-transparent-hover-color) 0, var(--light-transparent-color) 100%);
    color: var(--dark-text-color);
}

.btn-light-transparent:hover {
    background-image: linear-gradient(92.83deg, var(--light-transparent-color) 0, var(--light-transparent-hover-color) 100%);
}

.btn-neon-default {
    color: var(--default-color);
    border: var(--border-width) solid var(--default-color);
    background-color: transparent;
    box-shadow: inset 0px 0px 1px 1px var(--default-color);
}

    .btn-neon-default:hover {
        background-color: var(--default-color);
        color: var(--white-color);
    }

.btn-neon-primary {
    color: var(--primary-color);
    border: var(--border-width) solid var(--primary-color);
    background-color: transparent;
    box-shadow: inset 0px 0px 1px 1px var(--primary-color);
}

    .btn-neon-primary:hover {
        background-color: var(--primary-color);
        color: var(--white-color);
    }

.btn-neon-info {
    color: var(--info-color);
    border: var(--border-width) solid var(--info-color);
    background-color: transparent;
    box-shadow: inset 0px 0px 1px 1px var(--info-color);
}

    .btn-neon-info:hover {
        background-color: var(--info-color);
        color: var(--black-color);
    }

.btn-neon-success {
    color: var(--success-color);
    border: var(--border-width) solid var(--success-color);
    background-color: transparent;
    box-shadow: inset 0px 0px 1px 1px var(--success-color);
}

    .btn-neon-success:hover {
        background-color: var(--success-color);
        color: var(--white-color);
    }

.btn-neon-warning {
    color: var(--warning-color);
    border: var(--border-width) solid var(--warning-color);
    background-color: transparent;
    box-shadow: inset 0px 0px 1px 1px var(--warning-color);
}

    .btn-neon-warning:hover {
        background-color: var(--warning-color);
        color: var(--white-color);
    }

.btn-neon-danger {
    color: var(--danger-color);
    border: var(--border-width) solid var(--danger-color);
    background-color: transparent;
    box-shadow: inset 0px 0px 1px 1px var(--danger-color);
}

    .btn-neon-danger:hover {
        background-color: var(--danger-color);
        color: var(--white-color);
    }

.btn-neon-dark {
    color: var(--black-color);
    border: var(--border-width) solid var(--dark-color);
    background-color: transparent;
    box-shadow: inset 0px 0px 1px 1px var(--dark-color);
}

    .btn-neon-dark:hover {
        background-color: var(--dark-color);
        color: var(--white-color);
    }

.btn-neon-light {
    color: var(--light-color);
    border: var(--border-width) solid var(--light-color);
    background-color: transparent;
    box-shadow: inset 0px 0px 1px 1px var(--light-color);
}

    .btn-neon-light:hover {
        background-color: var(--light-color);
        color: var(--black-color);
    }

.btn-neon-strava {
    color: var(--strava-color);
    border: var(--border-width) solid var(--strava-color);
    background-color: transparent;
    box-shadow: inset 0px 0px 1px 1px var(--strava-color);
}

    .btn-neon-strava:hover {
        background-color: var(--strava-color);
        color: var(--white-color);
    }





}


