/* =====================================================================
   EvoCloud Page Editor buttons (evo_buttons.css)

   Source: the "Buttons" sample designs published at
   https://themes.evogov.com/buttons (copied verbatim from that page's
   Buttons CSS template on 2026-10-19). The Pulse button is not included:
   it uses a <button> inside a link, which the Page Editor does not create.

   Loaded:
     - in the Page Editor (TipTap) so inserted buttons preview correctly
     - on public pages, only when the page content uses one of these
       classes AND the theme CSS does not already define them (a theme
       with its own Buttons template is left alone). It is linked just
       before </head>, after the theme CSS (common/db_template.py), which
       also adds a small text-transform:none override on every page that
       uses these classes, so button text shows as typed on every theme.

   Keep the design rules below in sync with the themes site. EvoCloud
   additions are at the bottom of the file. One deliberate difference
   (John, 2026-10-20): the themes-site "text-transform: uppercase" is
   removed from every design, so button text displays exactly as typed.
   ===================================================================== */
/* Sliding Button */
/* a class="btn-slide" */
:root {
    --button-text-color-before:#121212;
    --button-text-color-hover:#fff;
    --btn-border-thickness:3px;
    --btn-border-color:rgb(252, 70, 100);
    --btn-bg:#eee;
    --btn-bg-hover:#333;
    --btn-font-size:1rem;
    --btn-width-max:280px;
    --btn-font-weight:600;
}
/* green - #4B7D43 */
/* oceangreen #5aa786 */
/* tealblue #264653 */
/* blue #0367A6  */
/* lightblue #0E91C9 */
/* darkblue #033859 */
/* red #9E0909 */
/* orange #D96E11 */
/* gray #888D93 */
/* dark #121212 */
/* tan #BFAB93 */
/* midnight #112244 */
/* slate #585C81 */
/* brown #735B46 */
/* darkbrown #40352c */
/* gold #E7A632 */
/* goldensand #e9c46a */
/* crusta #ee8959 */
/* lighttan #f2ceae */
/* lightgray #a6a6a6 */
/* darkgray #262626 */
/* violet #474073 */
/* SIMPLE BUTTONS */
a.btn-simple-green {
    background-color: #4B7D43;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-simple-oceangreen {
    background-color: #5aa786;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-simple-tealblue {
    background-color: #264653;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-simple-blue {
    background-color:#0367A6;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-simple-lightblue {
    background-color:#0E91C9;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-simple-darkblue {
    background-color:#033859;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-simple-red {
    background-color:#9E0909;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;
}
a.btn-simple-orange {
    background-color:#D96E11;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-simple-gray {
    background-color:#888D93;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;
}
a.btn-simple-dark {
    background-color:#121212;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;
}
a.btn-simple-tan {
    background-color:#BFAB93;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;
}
a.btn-simple-midnight {
    background-color:#112244;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;
}
a.btn-simple-slate {
    background-color:#585C81;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;}
a.btn-simple-brown {
    background-color:#735B46;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;}
a.btn-simple-darkbrown {
    background-color:#40352c;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;}
a.btn-simple-gold {
    background-color:#E7A632;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;}
a.btn-simple-goldensand {
    background-color:#e9c46a;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;}
a.btn-simple-sandybrown {
    background-color:#f4a261;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;}
a.btn-simple-crusta {
    background-color:#ee8959;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;}
a.btn-simple-lighttan {
    background-color:#f2ceae;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #121212;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;}
a.btn-simple-lightgray {
    background-color:#a6a6a6;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;}
a.btn-simple-darkgray {
    background-color:#262626;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;}
a.btn-simple-violet {
    background-color:#474073;
    display:inline-block;
    padding: .5rem 1rem;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
        text-align:center;
}
/* GROW BUTTONS */
a.btn-grow {
    background-color: #0367A6;
    display:inline-block;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow:hover {
  filter: brightness(1.3);
  box-shadow: 0 0 20px #6fc5ff50;
  transform: scale(1.1);
  webkit-transform: scale(1.1);
}
a.btn-grow:active {
  filter: brightness(1);
  transition: all 0.25s;
  box-shadow: none;
  transform: scale(0.98);
  webkit-transform: scale(0.98);
}
/* Green */
a.btn-grow-green {
    background-color: #4B7D43;
    display:inline-block;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-green:hover {
  filter: brightness(1.3);
  box-shadow: 0 0 20px #6fc5ff50;
  transform: scale(1.1);
  webkit-transform: scale(1.1);
}
a.btn-grow-green:active {
  filter: brightness(1);
  transition: all 0.25s;
  box-shadow: none;
  transform: scale(0.98);
  webkit-transform: scale(0.98);
}
/* oceangreen #5aa786 */
a.btn-grow-oceangreen {
    background-color: #5aa786;
    display:inline-block;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-oceangreen:hover {
  filter: brightness(1.3);
  box-shadow: 0 0 20px #6fc5ff50;
  transform: scale(1.1);
  webkit-transform: scale(1.1);
}
a.btn-grow-oceangreen:active {
  filter: brightness(1);
  transition: all 0.25s;
  box-shadow: none;
  transform: scale(0.98);
  webkit-transform: scale(0.98);
}
/* tealblue #264653 */
a.btn-grow-tealblue {
    background-color: #264653;
    display:inline-block;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-tealblue:hover {
  filter: brightness(1.3);
  box-shadow: 0 0 20px #6fc5ff50;
  transform: scale(1.1);
  webkit-transform: scale(1.1);
}
a.btn-grow-tealblue:active {
  filter: brightness(1);
  transition: all 0.25s;
  box-shadow: none;
  transform: scale(0.98);
  webkit-transform: scale(0.98);
}
/* blue #0367A6  */
a.btn-grow-blue {
    background-color: #0367A6;
    display:inline-block;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-blue:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-blue:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* lightblue #0E91C9 */
a.btn-grow-lightblue {
    background-color: #0E91C9;
    display:inline-block;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-lightblue:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-lightblue:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* darkblue #033859 */
a.btn-grow-darkblue {
    background-color:#033859;
    display:inline-block;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-darkblue:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-darkblue:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* red #9E0909 */
a.btn-grow-red {
    background-color:#9E0909;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-red:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-red:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* orange #D96E11 */
a.btn-grow-orange {
    background-color:#D96E11;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-orange:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-orange:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* gray #888D93 */
a.btn-grow-gray {
    background-color:#888D93;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-gray:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-gray:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* dark #121212 */
a.btn-grow-dark {
    background-color:#888D93;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-dark:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-dark:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* tan #BFAB93 */
a.btn-grow-tan {
    background-color:#BFAB93;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-tan:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-tan:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* midnight #112244 */
a.btn-grow-midnight {
    background-color:#112244;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-midnight:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-midnight:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* slate #585C81 */
a.btn-grow-slate {
    background-color:#585C81;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-slate:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-slate:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* brown #735B46 */
a.btn-grow-brown {
    background-color:#735B46;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-brown:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-brown:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* darkbrown #40352c */
a.btn-grow-darkbrown {
    background-color:#40352c;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-darkbrown:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-darkbrown:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* gold #E7A632 */
a.btn-grow-gold {
    background-color:#E7A632;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-gold:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-gold:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* goldensand #e9c46a */
a.btn-grow-goldensand {
    background-color:#e9c46a;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-goldensand:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-goldensand:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* crusta #ee8959 */
a.btn-grow-crusta {
    background-color:#ee8959;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-crusta:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-crusta:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* lighttan #f2ceae */
a.btn-grow-lighttan {
    background-color:#f2ceae;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-lighttan:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-lighttan:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* lightgray #a6a6a6 */
a.btn-grow-lightgray {
    background-color:#a6a6a6;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-lightgray:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-lightgray:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* darkgray #262626 */
a.btn-grow-darkgray {
    background-color:#262626;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-darkgray:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-darkgray:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* violet #474073 */
a.btn-grow-violet {
    background-color:#474073;
    display:inline-block;
    padding:.5rem 1rem;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.5s;
    text-decoration:none;
    width:max-content;
    max-width:var(--btn-width-max);
    text-align:center;
}
a.btn-grow-violet:hover {
    filter: brightness(1.3);
    box-shadow: 0 0 20px #6fc5ff50;
    transform: scale(1.1);
    webkit-transform: scale(1.1);
}
a.btn-grow-violet:active {
    filter: brightness(1);
    transition: all 0.25s;
    box-shadow: none;
    transform: scale(0.98);
    webkit-transform: scale(0.98);
}
/* Slide Button */
a.btn-slide {
    display: inline-block;
    padding: .5rem 1rem;
    font-size: var(--btn-font-size);
    font-weight: 700;
    color: var(--button-text-color-before);
    border: var(--btn-border-thickness) solid var(--btn-border-color);
    border-radius:10px;
    cursor: pointer;
    position: relative;
    background-color: var(--btn-bg);
    text-decoration: none;
    overflow: hidden;
    z-index: 1;
    font-family: inherit;
    width:max-content;
    max-width:200px;
}
a.btn-slide::before {
     position: absolute;
     content: "";
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: var(--btn-bg-hover);
     transform: translateX(-100%);
     transition: all .3s;
     z-index: -1;
     color:#fff !important;
}
a.btn-slide:hover::before {
    transform: translateX(0);
    color: #fff !important;
}
a.btn-slide:hover {color:var(--button-text-color-hover);}
/* Glow Button */
a.btn-glow {
    position: relative;
    padding: .5rem 1rem;;
    border-radius: 10px;
    border: var(--btn-border-thickness) solid var(--btn-border-color);
    font-size: var(--btn-font-size);
    background: var(--btn-bg);
    color: var(--button-text-color-before);
    width:max-content;
    max-width:200px;
    font-weight: 600;
    text-decoration:none;

    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
a.btn-glow:hover {
  background: var(--btn-bg-hover);
  box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  color:var(--button-text-color-hover);
}
a.btn-glow:hover::before {
  -webkit-animation: sh02 0.5s 0s linear;
  -moz-animation: sh02 0.5s 0s linear;
  animation: sh02 0.5s 0s linear;
}
a.btn-glow::before {
  content: '';
  display: block;
  width: 0px;
  height: 86%;
  position: absolute;
  top: 7%;
  left: 0%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 50px 30px #fff;
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -ms-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}
@keyframes sh02 {
  from {opacity: 0;left: 0%;}
  50% {opacity: 1;}
  to {opacity: 0;left: 100%;}
}
a.btn-glow:active {
  box-shadow: 0 0 0 0 transparent;
  -webkit-transition: box-shadow 0.2s ease-in;
  -moz-transition: box-shadow 0.2s ease-in;
  transition: box-shadow 0.2s ease-in;
}
/* Push Button */
a.btn-push {
    color: #ecf0f1;
    font-size: 1.1rem;
    background-color: #e67e22;
    border: 1px solid #f39c12;
    border-radius: 10px;
    padding: .5rem 1rem;
    box-shadow: 0px 6px 0px #d35400;
    transition: all .1s;
    font-weight: 600;
    text-decoration:none;
    width:max-content;
    max-width:200px;
}
a.btn-push:active {
    box-shadow: 0px 2px 0px #d35400;
    position: relative;
    top: 2px;
}

/* =====================================================================
   EvoCloud additions (accessibility, not part of the sample designs)
   ===================================================================== */
/* Visible keyboard focus ring for every button design (WCAG 2.4.7).
   Same blue as the site-wide skip link. */
a[class^="btn-simple-"]:focus-visible,
a[class*=" btn-simple-"]:focus-visible,
a[class^="btn-grow"]:focus-visible,
a[class*=" btn-grow"]:focus-visible,
a.btn-slide:focus-visible,
a.btn-glow:focus-visible,
a.btn-push:focus-visible {
    outline: 3px solid #0b3d91;
    outline-offset: 3px;
}
/* Respect the visitor's reduced-motion setting (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    a[class^="btn-simple-"], a[class*=" btn-simple-"],
    a[class^="btn-grow"], a[class*=" btn-grow"],
    a.btn-slide, a.btn-slide::before,
    a.btn-glow, a.btn-glow::before,
    a.btn-push {
        transition: none !important;
        animation: none !important;
    }
    a[class^="btn-grow"]:hover, a[class*=" btn-grow"]:hover,
    a[class^="btn-grow"]:active, a[class*=" btn-grow"]:active {
        transform: none !important;
    }
}