/* Common classes */

/*
span.specialbutton img {
    width:20px;	
  height:20px;
  position:relative;
  top:0px;
    padding-right:5px;
}

span.specialbutton a {
  transition: color 0.5s ease;
  color: var(--theme-specialbutton-fore-color);
  font-family:Arial;
  font-size:16px;
  font-weight:normal;
  font-stretch:normal;
  line-height:18px;
  text-decoration:none;
  position:relative;
  top:-4px;
  left:15px;
  background: var(--theme-specialbutton-back-color);
  color:#303030;
  padding:12px;
  border: 1px solid var(--theme-specialbutton-border-color);
  border-radius:5px;
  
  transition: background-color 0.5s ease;
}
span.specialbutton a:hover {
    color: var(--theme-specialbutton-hover-fore-color);
   background: var(--theme-specialbutton-hover-back-color);
    border: 1px solid var(--theme-specialbutton-hover-border-color);
}

*/

h1.title {
    font-size:32px;
}

h2.subtitle {
    --color:#ffbb00;
    position:relative;
    top:-20px;
    font-size:24px;
}


/* Styling UI elements inside a formblock class */

.formblock {
      margin-bottom:25px;      
}  
  

.formblock select {
    border-radius: 5px;
    line-height: 24px;
}

.formblock select:focus {
    box-shadow: 0 0 5px #07c;
}

.formblock .textbox {
    border-radius: 5px;
    line-height: 24px;
}

/* default is primary button - greenish */

.formblock .button {
    font-weight: bold;
    font-size: 16px;
    padding: 9px 15px;
    margin: 0 0 0 0px;
    color: var(--theme-primarybutton-fore-color);
    background: var(--theme-primarybutton-back-color);
    transition: background-color 0.5s ease;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    border: 0;
    position: relative;
    top: -6px;
}

.formblock .button:hover {
    background: var(--theme-primarybutton-hover-back-color);
}

/* to use <span><a><img> structure we need this */

.formblock span.button img {
    width:20px;	
  height:20px;
  position:relative;
  top:0px;
    padding-right:5px;
}

.formblock .button a{
    color: var(--theme-specialbutton-fore-color);
    text-decoration: none;
}

.formblock .button a:hover, .formblock .button a:focus, .formblock .button a:active {
    color: var(--theme-specialbutton-hover-fore-color);
    text-decoration: none;
}



/* secondary button - white/gray */

.formblock .button.secondary-button {
    color: var(--theme-secondarybutton-fore-color);
    background: var(--theme-secondarybutton-back-color);
}

.formblock .button.secondary-button:hover {
    background: var(--theme-secondarybutton-hover-fore-color);
    background: var(--theme-secondarybutton-hover-back-color);
}

/* special button - bluish */

.formblock .button.special-button {
    color: var(--theme-specialbutton-fore-color);
    background: var(--theme-specialbutton-back-color);
}

.formblock .button.special-button:hover {
    background: var(--theme-specialbutton-hover-fore-color);
    background: var(--theme-specialbutton-hover-back-color);
}


/* fix some Joomla! templae.css issues */

.formblock label {
    display: inline;
}




.formblock input {
    margin-bottom: 5px;
}


/*
a.wp_button {
    font-weight: bold;
    font-size: 16px;
    padding: 10px 15px;
    margin: 0 0 0 0px;
    color: #fff;
    background: #14a733;
    transition: background-color 0.5s ease;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    border: 0;
}

a.wp_button:hover {
    background: #14883d;
}*/