/*!
Theme Name: Hostinger AI theme
Author: Hostinger
Author URI: https://hostinger.com
Details URI: https://hostinger.com
Description: Hostinger AI theme built with SEO and mobile responsiveness in mind, this theme ensures optimal performance and a better online presence.
Version: 1.0.38
Tested up to: 6.5
Requires at least: 5.6
Requires PHP: 8.0
License: GPLv3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hostinger-ai-theme
Tags: ai-theme
*/

/* From Uiverse.io by ErzenXz */ 
/*
.standard-input 
{  
  width: 100%;  
  max-width: 220px;  
  height: 45px;  
  padding: 12px;  
  border-radius: 12px;  
  border: 1.5px solid lightgrey;  
  outline: none;  
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);  
  box-shadow: 0px 0px 20px -18px;
}

.input:hover 
{  
  border: 2px solid lightgrey;  
  box-shadow: 0px 0px 20px -17px;
}

.input:active 
{  
  transform: scale(0.95);
}

.input:
focus 
{  
  border: 2px solid grey;
}
*/

led-box {
  height: 30px;
  width: 25%;
  margin: 10px 0;
  float: left;
}

.led-box p {
  font-size: 12px;
  text-align: center;
  margin: 1em;
}

.led-red {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #F00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkRed 0.5s infinite;
  -moz-animation: blinkRed 0.5s infinite;
  -ms-animation: blinkRed 0.5s infinite;
  -o-animation: blinkRed 0.5s infinite;
  animation: blinkRed 0.5s infinite;
}

.led-green-light {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #85fa78;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #6ac75f 0 -1px 9px, rgba(0, 255, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkRed 0.5s infinite;
  -moz-animation: blinkRed 0.5s infinite;
  -ms-animation: blinkRed 0.5s infinite;
  -o-animation: blinkRed 0.5s infinite;
  animation: blinkRed 0.5s infinite;
}

.led-green-off {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #5fbd55;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #3eba30 0 -1px 9px, rgba(0, 255, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkRed 0.5s infinite;
  -moz-animation: blinkRed 0.5s infinite;
  -ms-animation: blinkRed 0.5s infinite;
  -o-animation: blinkRed 0.5s infinite;
  animation: blinkRed 0.5s infinite;
}

.led-orange {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #ffbf87;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #f57402 0 -1px 9px, rgba(180, 150, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkRed 0.5s infinite;
  -moz-animation: blinkRed 0.5s infinite;
  -ms-animation: blinkRed 0.5s infinite;
  -o-animation: blinkRed 0.5s infinite;
  animation: blinkRed 0.5s infinite;
}

.menu-button {
  text-decoration: none !important;
}

/*

  border: none !important;
  padding: 0.7em 1.7em;
  font-size: 14px;
  border-radius: 0.5em;
  background: #fcedb8;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
}

a:link { 
  text-decoration: none; 
} 
a:visited { 
  text-decoration: none; 
} 
a:hover { 
  text-decoration: none; 
} 
a:active { 
  text-decoration: none; 
}
*/

.remove-all-styles
{
    all: revert;
}

trade-button {
  position: relative;
  display: inline-block;  
  padding: 12px 24px;  
  border: none;  
  font-size: 16px;  
  background-color: inherit;  
  border-radius: 100px;  
  font-weight: 600;  
  color: #ffffff40;  
  box-shadow: 0 0 0 2px #ffffff20;  
  cursor: pointer;  
  overflow: hidden;  
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.trade-button span:last-child {
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  width: 20px;  
  height: 20px;  
  background-color: #2196F3;  
  border-radius: 50%;  
  opacity: 0;  
  transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
}

.trade-button span:first-child {
  position: relative;  
  z-index: 1;
}

.trade-button:hover {
  box-shadow: 0 0 0 5px #2195f360;  
  color: #ffffff;
}

.trade-button:active {
  scale: 0.95;
}

.trade-button:hover span:last-child {
  width: 150px;  
  height: 150px;
  opacity: 1;
}

.tradelong-button {
  background-color: #488700;
  color: #f0f0f0;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  width: 80px;
  height: 80px;
  transition: 0.3s;
}

.tradelong-button:hover {
  background-color: #78e000;
  box-shadow: 0 0 0 5px #78e0006f;
  color: #000000;
}

.tradelong-off-button {
  background-color: #a0a0a0;
  color: #202020;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  width: 80px;
  height: 80px;
  transition: 0.3s;
}

.tradeshort-button {
  background-color: #a10000;
  color: #f0f0f0;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  width: 80px;
  height: 80px;
  transition: 0.3s;
}

.tradeshort-button:hover {
  background-color: #f52a2a;
  box-shadow: 0 0 0 5px #f52a2a5f;
  color: #000000;
}

.tradeshort-off-button {
  background-color: #a0a0a0;
  color: #202020;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  width: 80px;
  height: 80px;
  transition: 0.3s;
}

.renew-button {
  background-color: #ffe72e;
  color: #202020;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  width: 80px;
  height: 22px;
  transition: 0.3s;
}

.renew-button:hover {
  background-color: #ffed61;
  box-shadow: 0 0 0 5px #ffed615f;
  color: #101010;
}