﻿button
{
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    text-wrap: nowrap;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.no-user-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.btn-lifemart {
    color: white;
    background-color: var(--main-green);
    border: none;
    border-radius: 99px;
    padding: 15px 40px;
    font-family: "PT Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.btn-lifemart:hover {
    background-color: #5cbc54;
}

.btn-lifemart:focus {
    
}

.btn-light {
    color: #3f9e37;
    background: rgba(63, 158, 55, .16);

    font-size: 16px;
    line-height: 130%;
    height: 40px;
    padding: 0 20px;
}

.btn-light:hover {
    background: rgba(63, 158, 55, .3);
}

.btn-light:focus {
    
}

.btn-white {
    background-color: white;
    border-radius: 99px;
    border: none;
    color: #3F9E38;
    padding: 15px 25px;
    font-size: 24px;
    font-weight: 700;
    width: fit-content;
}

.btn-close-popup-cross {
    border-radius: 99px;
    background-color: rgba(10, 10, 10, 20%);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    width: 40px;
    height: 40px;
}

.btn-close-popup-cross:hover {
    background-color: rgba(10, 10, 10, 40%);
}

.btn-internal-ui-green {
    color: white;
    background-color: var(--main-green);
    border: none;
    border-radius: 99px;
    padding: 8px 20px;
    font-family: "PT Sans", sans-serif;
    font-size: 20px;
    height: fit-content;
    width: fit-content;
}

.btn-internal-ui-green:hover {
    background-color: #5cbc54;
}

.btn-internal-ui-green-outline {
    color: var(--main-green-dark);
    border: var(--main-green) solid 2px;
    border-radius: 99px;
    padding: 8px 20px;
    font-family: "PT Sans", sans-serif;
    font-size: 20px;
    height: fit-content;
    width: fit-content;
    box-sizing: border-box;
}

.btn-internal-ui-green-outline:hover {
    background-color: rgba(255, 255, 255, 20%);
}

.btn-icon {
    border-radius: 16px;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(30, 30, 30, 10%);
}

.btn-icon:hover {
    background-color: rgba(30, 30, 30, 20%);
}

.btn-icon-img {
    width: 24px;
    height: 24px;
}

.text-as-link {
    text-decoration: underline;
    cursor: pointer;
    margin: 0;
}

.textbox-with-label {
    display: flex;
    flex-direction: column;
}

.default-textbox {
    border-radius: 16px;
    padding: 8px 16px;
    border: var(--main-green-darkest) 1px solid;
    font-size: 16px;
    outline: none;
}

.textbox-with-label label {
    margin: 0 0 8px;
    line-height: 1;
}

/*.default-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

input[type="checkbox"] {
    !* Add if not using autoprefixer *!
    -webkit-appearance: none;
    appearance: none;
    !* For iOS < 15 to remove gradient background *!
    background-color: #fff;
    !* Not removed via appearance *!
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.25em;
    height: 1.25em;
    border: 0.15em solid currentColor;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.85em;
    height: 0.85em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #0c4128;
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
}

input[type="checkbox"]:disabled {
    color: gray;
    cursor: not-allowed;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}*/

.test {
    outline: red 1px;
}