.button_top {
    cursor         : pointer;
    background     : transparent;
    text-decoration: none;
}

.button_top {
    color: var(--second--color);
}

.button_top:hover {
    color             : var(--third--color);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

@keyframes hover-shadow {
    0% {
        transform: translateY(6px);
        opacity  : 0.4;
    }

    50% {
        transform: translateY(3px);
        opacity  : 1;
    }

    100% {
        transform: translateY(6px);
        opacity  : 0.4;
    }
}

.hover-shadow {
    display                    : inline-block;
    position                   : relative;
    transition-duration        : 0.3s;
    transition-property        : transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform                  : translateZ(0);
    box-shadow                 : 0 0 1px rgba(0, 0, 0, 0);
}

.hover-shadow:before {
    pointer-events     : none;
    position           : absolute;
    z-index            : -1;
    content            : "";
    top                : 100%;
    left               : 5%;
    height             : 10px;
    width              : 90%;
    opacity            : 0;
    background         : radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    /* W3C */
    transition-duration: 0.3s;
    transition-property: transform opacity;
}

.hover-shadow:hover {
    transform                : translateY(-6px);
    animation-name           : hover;
    animation-duration       : 1.5s;
    animation-delay          : 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction      : alternate;
}

.hover-shadow:hover:before {
    opacity                  : 0.4;
    transform                : translateY(6px);
    animation-name           : hover-shadow;
    animation-duration       : 1.5s;
    animation-delay          : 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction      : alternate;
}

.first_bt_2,
.first_bt {
    font-size       : 20px;
    background-color: var(--main--color);
    color           : var(--second--color) !important;
    border-radius   : 15px;
    border          : 2px solid var(--main--color);
    display         : flex;
    justify-content : center;
    align-items     : center;
    padding         : 10px 30px !important;
    margin          : 5px 10px;
}

.first_bt_2:hover,
.first_bt:hover {
    background-color: var(--second--color);
    color           : var(--main--color) !important;
}

.second_bt_2,
.second_bt {
    font-size       : 20px;
    background-color: var(--second--color);
    color           : var(--main--color) !important;
    border-radius   : 15px;
    border          : 2px solid var(--main--color);
    display         : flex;
    justify-content : center;
    align-items     : center;
    padding         : 10px 30px !important;
    margin          : 5px 10px;
}

.second_bt_2:hover,
.second_bt:hover {
    background-color: var(--main--color);
    color           : var(--second--color) !important;
}

.first_bt_2 {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    width          : 250px !important;
    padding        : 10px !important;
}

.second_bt_2 {
    display        : flex;
    justify-content: center;
    align-items    : center;
    width          : 250px !important;
    padding        : 10px !important;
}


.navbar-light .navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.modal-header {
    border-bottom: 1px solid var(--main--color);
}

.modal-footer {
    border-top: none;
}

.my_input {
    border : 1px solid #a8d18d70;
    padding: 10px 45px 10px 10px;
    width  : 100%;
}

.modal label {
    font-size  : 14px;
    font-weight: bold;
    padding    : 10px;
}

.in_modal i {
    position : absolute;
    color    : var(--main--color);
    font-size: 24px;
    top      : 12px;
    right    : 15px;
}

.option-input {
    -webkit-appearance: none;
    -moz-appearance   : none;
    -ms-appearance    : none;
    -o-appearance     : none;
    appearance        : none;
    top               : 3px;
    position          : relative;
    right             : 0;
    bottom            : 0;
    left              : 0;
    height            : 20px;
    width             : 20px;
    transition        : all 0.15s ease-out 0s;
    background        : var(--main--color);
    border            : none;
    color             : #fff;
    cursor            : pointer;
    display           : inline-block;
    margin-right      : 0.5rem;
    outline           : none;
    position          : relative;
    z-index           : 1000;
}

.option-input:hover {
    background: var(--main--color);
}

.option-input:checked {
    background: var(--main--color);
}

.option-input:checked::before {
    width          : 20px;
    height         : 20px;
    display        : flex;
    content        : '\2714';
    font-size      : 13px;
    font-weight    : bold;
    position       : absolute;
    align-items    : center;
    justify-content: center;
}

.option-input:checked::after {
    -webkit-animation: click-wave 0.65s;
    -moz-animation   : click-wave 0.65s;
    animation        : click-wave 0.65s;
    background       : var(--main--color);
    content          : '';
    display          : block;
    position         : relative;
    z-index          : 100;
}

.option-input.radio {
    border-radius: 50%;
}

.option-input.radio::after {
    border-radius: 50%;
}

@keyframes click-wave {
    0% {
        height  : 40px;
        width   : 40px;
        opacity : 0.35;
        position: relative;
    }

    100% {
        height     : 200px;
        width      : 200px;
        margin-left: -80px;
        margin-top : -80px;
        opacity    : 0;
    }
}