/* HTML5 요소 브라우져 인식 */
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

html,
body {
  height: 100%;
  overflow: hidden;
}



/* reset */
* {
  margin: 0;
  padding: 0;
}


#container {
  position: absolute;
  width: 100%;
  top: 180px;
  height: calc(100% - 180px);
}

#left_container {
  position: absolute;
  top: 180px;
  width : 340px;
  height: calc(100% - 180px);
  background-color: rgb(255, 255, 255, 0.4);
  z-index: 10000;
  
  display: hidden;
}

#scene-container {
  width: 100%;
  height: 100%;
}

#header {
  background-image: url( "/legacy/static/images/top_back_1.png" );
  background-repeat: repeat;
  position: relative;
  background-color: #040d2e;
  width: 100%;
  height: 80px;
  text-align: center;
}


#header .centerBg {
  width:667px;
  height:80px;
  background-image: url( "/legacy/static/images/top_back_mid.png" );
  background-repeat: no-repeat;
  margin: auto;
}

.lil-gui.autoPlace {
  max-height: 100%;
  position: fixed;
  top: 260px;
  z-index: 10050;
}

.mainTitle {
  position: relative;
  padding-top:15px;
  color: #0096ff;
  font-size:32px;
  font-weight: bold;
  display: block;
}

.mainTitle_sub {
  color: #dadada;
}

#header .headerWrap {
  position: relative;
  width: 100%;
  min-width: 1200px;
}

.headerUtil {
  background-image: url( "/legacy/static/images/top_back_2.png" );
  background-repeat: repeat;
  position: relative;
  width: 100%;
  height:180px;
  min-width: 1200px;
  display: block;
  margin : 0;
  padding: 0;
  z-index:10002;
  text-align: center;
}

#fps_view {
  left:auto !important;
  top: 90px !important;
  right: 10px !important;
  z-index: 10010 !important;
}

.tableUtil {
  color: white;
  position: relative;
  float:left;
  z-index: 102;
  display: block;
  top:30px;
  padding-left: 10px;
  width:100%;
}

.box {
  display: inline-block; /* 인라인 블록 요소로 배치 */
  margin-left: 10px; /* 각 div 사이의 간격 */
}

.box_con {
  display: inline-block; /* 인라인 블록 요소로 배치 */
  margin-left: 10px; /* 각 div 사이의 간격 */
  width:120px;
  font-size: 35px;
  text-align: left;
  font-weight: bold;
  color: #6da9d8;
  top:-10px;
  position: relative;
}

#currentDateTime {
  width:400px;
  position: fixed; /* 화면 고정 위치 */
  top: 0; /* 위쪽 여백 */
  left: 0; /* 왼쪽 여백 */
  padding: 10px; /* 내부 여백 */
  font-size: 32px; /* 글꼴 크기 */
  z-index: 102;
  display: inline-block;
  margin-top:5px;
}

#currentDateTime .date {
  position: relative;
  float:left;
  color: #fff; /* 날짜 텍스트 색상 (하얀색) */
}

#currentDateTime .time {
  margin-left:10px;
  position: relative;
  float:left;
  color: #0096ff; /* 시간 텍스트 색상 (파란색) */
  font-weight: bold;
}


#contents {
  float: left;
  width: calc(100%);
  height: 100%;
  /* 임의 지정 */
}


canvas {
  display: block;
  height: 100%;
}


#debugLog {
  position: absolute;
  width: 98%;
  height: 200px;
  overflow-y: scroll;
  background-color: aliceblue;
  left: 20px;
  bottom: 20px;
  opacity: 0.6;
  z-index: 1111;
}

.dash1 {
  position: absolute;
  left: 20px;
  top: 60px;
  z-index: 999;
  width: 600px;
  height: 330px;
  /* background-color: #3498db; */
  /* border: 1px solid white; */
  background-color: rgba(50, 50, 50, 0.7);
  /* opacity: 0.7; */
  border-radius: 20px;
}

/* #scene-container {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
} */

.label {
  font-size: 14px;
  color: #fff;
  font-family: sans-serif;
  padding: 10px 30px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid white;
  border-radius: 20px;
}

.sensorLabel {
  font-size: 14px;
  color: #fff;
  font-family: sans-serif;
  padding: 5px 10px;
  background: rgba(14, 39, 94, 0.8);
  border: 1px solid rgb(5, 10, 87);
  border-radius: 20px;
}

.sensorEqLabel {
  font-size: 14px;
  color: #fff;
  font-family: sans-serif;
  padding: 10px 20px;
  background: rgba(14, 39, 94, 0.8);
  border: 1px solid rgb(5, 10, 87);
  border-radius: 20px;
}


.equipLabel {
  font-size: 14px;
  color: #fff;
  font-family: sans-serif;
  padding: 5px 10px;
  background: rgba(128, 3, 86, 0.8);
  border: 1px solid rgb(77, 2, 52);
  border-radius: 20px;
}


/* loading spinner */


#splash_screen {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  top:0;
  left:0;
  background-color: #040d2e;
  z-index: 100001;
  position: absolute;
  transition-duration: 1s;
  opacity: 0.4;
}


#splash_logo {

  width: 200px;
  padding: 0;
  margin: 0;
  z-index: 100001;
  position: absolute;
  display: block;
  top:20px;
  left:20px;

}

#splash_title {
  font-size: 3rem;
  font-weight: bold;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 100001;
  position: absolute;
  display: block;
  top:calc(50% - 220px);
  /* left:20px; */
  color:white;
  text-align: center;

}

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 100002;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  color:white;
}

.loaderValue {
  position: absolute;
  z-index: 100010;
  left: 50.5%;
  top: 55%;
  width: 150px;
  height: 150px;
  text-align: center;
  margin: -75px 0 0 -75px;
  color:white;
}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* 현재출력 등*/

div.content_block {
  margin-left: 10px;
  width: calc(100% - 20px);
  color: #fff;
  text-align: center;
}

/* 인버터 이하 페이지 제목 */

.highcharts-background {
  fill: rgb(50, 50, 50);
  opacity: 0;
}

div.graph {

  width: 170px;
  float: left;
}

div.mainItem {
  float: left;
  width: calc(100% - 4px);
  padding: 1px;
  /* background: #003f83; */
  border-radius: 10px;

  margin-top: 10px;
}

div.mainItem span {
  width: 100%;
  text-align: center;
  /* margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 5px; */
  font-size: 16pt;
  font-weight: bold;
  color: #ffffff;
  float: left;
}

div.main_chart {
  float: left;
  height: 300px;
  margin-top: 20px;
}

div.mainInverter {
  margin-top: 20px;
}

div.item {
  float: left;
  width: 180px;
  height: 283px;
  padding-left: 10px;
}

div.value2 {
  width: 55%;
  display: inline-block;
  text-align: right;
}

div.unit {
  width: 30%;
  display: inline-block;
  text-align: left;
}

/* 메인화면 차트 안쪽 */

div.chartDesign,
div.origin {
  font-size: 17px;
  width: 150px;
  margin-left: 70px;
}

span.chart_value {
  width: 60%;
  display: inline-block;
  text-align: right;
  font-size: 14px;
  color: #ffffff;
}

span.chart_unit {
  width: 30%;
  display: inline-block;
  font-size: 12px;
  color: #ffffff;
}

div.origin {
  margin-top: 5px;
}

footer {
  width: 100%;
  height: 90px;
  float: left;
  background: #2f323a;
  display: block;
  color: #ffffff;
  text-align: center;
}

footer span {
  width: 100%;
  margin-top: 30px;
  text-align: center;
  float: left;
}

div.clock {
  display: block;
  position: absolute;
  left: 100px;
  top: 5px;
}

span.ymd {
  font-size: 1.5rem;
  color: #146ab4;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

span.hms {
  font-size: 1.5rem;
  margin-left: 10px;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

/* echo sensor */

div.echosensor {
  display: block;
  float: left;
}

#dl_state dt,
dd {
  font-size: 15pt;
  float: left;
  padding: 0px;
  margin: 0px;
}

#dl_state dt {
  font-size: 13pt;
  background: #7a7a79;
  padding: 10px 10px;
  margin-right: 20px;
  border-radius: 5px;
}

#dl_state dd {
  margin-right: 10px;
  color: #ffffff;
  background: #ffffff;
  display: block;
}

#dl_state dd .val {
  float: left;
  margin-left: 40px;
  margin-top: 10px;
}

#dl_state dd .unit {
  font-size: 13pt;
  float: left;
  margin-left: 5px;
  margin-top: 10px;
}

#dl_state .dd_state1 {
  height: 39px;
  background: url('../images/icon1_1.png') no-repeat;
  display: block;
}

#dl_state .dd_state2 {
  height: 39px;
  background: url('../images/icon1_2.png') no-repeat;
  display: block;
}

.b {
  /* display: block; */
  position: relative;
  float: right;
  width: 200px;
  padding: 0;
  margin: 10px 20px 10px 0;
  font-weight: 600;
  text-align: center;
  line-height: 50px;
  color: #fff;
  border-radius: 5px;
  transition: all 0.2s;
}

.btnFloat {
  background: none;
  color: #ffffff;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
}

.btnFloat:before {
  content: 'TEST?';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 50px;
  border-radius: 5px;
  transition: all 0.2s;
}

.btnBlueGreen.btnFloat:before {
  background: #00ae68;
}

.btnLightBlue.btnFloat:before {
  background: #5dc8cd;
}

.btnOrange.btnFloat:before {
  background: #ffaa40;
}

.btnPurple.btnFloat:before {
  background: #8d336a;
}

.btnFloat:before {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.4);
}

.btnFloat:hover:before {}

.btnFloat:hover:before {
  margin-top: -2px;
  margin-left: 0px;
  transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.25);
}


#scene-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: indianred;
}

#button {
  position: fixed;
  bottom: 16px;
  right: 16px;
  padding: 12px;
  border-radius: 50%;
  margin-bottom: 0px;
  background-color: #fff;
  opacity: 0.9;
  z-index: 999;
  box-shadow: 0 0 4px rgb(0 0 0 / 15%);
}

#scene-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #040d2e;
}


#simpleView {
  position: relative;
  bottom: 50px;
  left: 25px;
  z-index: 10030;
  width: 200px;
  height: 40px;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  opacity: 0.89;
}

#keti_optimizer_btn {
  position: absolute;
  top: 450px;
  left: 25px;
  z-index: 999;
  width: 200px;
  height: 40px;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  opacity: 0.89;
}

#ieum_arc_btn {
  position: absolute;
  top: 500px;
  left: 25px;
  z-index: 999;
  width: 200px;
  height: 40px;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  opacity: 0.89;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2000;
}

.modal-content {
  position: relative;
  width: 70%;
  max-width: 500px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.modal-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.modal-close {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  cursor: pointer;
  color: #666;
  background-color: #f9f9f9;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.arc_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2000;
}

.arc_modal-content {
  position: relative;
  width: 100%;
  /* 가로 길이를 조정해보세요. */
  max-width: 1800px;
  /* 최대 가로 폭 설정 */
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.arc_modal-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.arc_modal-close {
  display: block;
  /* 버튼을 블록 요소로 변경하여 가운데 정렬 적용 */
  margin: 0 auto;
  /* 수평 가운데 정렬 */
  font-size: 18px;
  cursor: pointer;
  color: #666;
  background-color: #f9f9f9;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}


.lil-gui>* {
  /* background-color: red; */
  font-size: 0.9rem;

}


.lil-gui button {
  font-size: 14px;
  padding: 5px;
  height: 30px;
}

.styled-table {
  border-collapse: collapse;
  margin: 15px 10px;
  padding : 10px;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 320px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table td {
  font-size:16px;
  font-weight: bold;
  color: #009879;
  background-color: #f3f3f3;
}

.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

/* .styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
} */

.styled-table tbody td:nth-of-type(even) {
  color: black;
}

.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

/* .styled-table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
} */

#left_btn_container {
  width:100%;
  margin-top:90px;
  text-align: center;

}


a[class*="btn"] {text-decoration: none;}
input[class*="btn"], 
button[class*="btn"] {border: 0;}

/* Here you can change the button sizes */
.btn.large, 
.btn-two.large, 
.btn-effect.large {
  padding: 20px 40px; 
  font-size: 22px;
}
.btn.small, 
.btn-two.small, 
.btn-gradient.small, 
.btn-effect.small {
  padding: 8px 18px;  
  font-size: 14px;
  margin-bottom:10px;
}
.btn.mini, 
.btn-two.mini, 
.btn-gradient.mini, 
.btn-effect.mini {
  padding: 4px 12px;  
  font-size: 12px;
}
.btn.block, 
.btn-two.block, 
.btn-gradient.block, 
.btn-effect.block {
  display: block;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.btn-gradient.large {
  padding: 15px 45px; 
  font-size: 22px;
}

/* Colors for .btn and .btn-two */
.btn.blue, .btn-two.blue     {background-color: #7fb1bf;}
.btn.green, .btn-two.green   {background-color: #9abf7f;}
.btn.red, .btn-two.red       {background-color: #fa5a5a;}
.btn.purple, .btn-two.purple {background-color: #cb99c5;}
.btn.cyan, .btn-two.cyan     {background-color: #7fccde;}
.btn.yellow, .btn-two.yellow {background-color: #f0d264;}

.rounded {
  border-radius: 10px;
}

/* default button style */
.btn {
  position: relative;
  border: 0;
  padding: 15px 25px;
  display: inline-block;
  text-align: center;
  color: white;
}
.btn:active {
  top: 4px; 
}

/* color classes for .btn */
.btn.blue {box-shadow: 0px 4px #74a3b0;}
.btn.blue:active {box-shadow: 0 0 #74a3b0; background-color: #709CA8;}

.btn.green {box-shadow: 0px 4px 0px #87a86f;}
.btn.green:active {box-shadow: 0 0 #87a86f; background-color: #87a86f;}

.btn.red {box-shadow:0px 4px 0px #E04342;}
.btn.red:active {box-shadow: 0 0 #ff4c4b; background-color: #ff4c4b;}

.btn.purple {box-shadow:0px 4px 0px #AD83A8;}
.btn.purple:active {box-shadow: 0 0 #BA8CB5; background-color: #BA8CB5;}

.btn.cyan {box-shadow:0px 4px 0px #73B9C9;}
.btn.cyan:active {box-shadow: 0 0 #73B9C9; background-color: #70B4C4;}

.btn.yellow {box-shadow:0px 4px 0px #D1B757;}
.btn.yellow:active {box-shadow: 0 0 #ff4c4b; background-color: #D6BB59;}

/* Button two - I have no creativity for names */
.btn-two {
  color: white; 
  padding: 15px 25px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.21);
  border-bottom-color: rgba(0,0,0,0.34);
  text-shadow:0 1px 0 rgba(0,0,0,0.15);
  box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 
              0 2px 0 -1px rgba(0,0,0,0.13), 
              0 3px 0 -1px rgba(0,0,0,0.08), 
              0 3px 13px -1px rgba(0,0,0,0.21);
}
.btn-two:active {
  top: 1px;
  border-color: rgba(0,0,0,0.34) rgba(0,0,0,0.21) rgba(0,0,0,0.21);
  box-shadow: 0 1px 0 rgba(255,255,255,0.89),0 1px rgba(0,0,0,0.05) inset;
  position: relative;
}
/* 3D Button */
.btn-3d {
  position: relative;
  display: inline-block;
  font-size: 22px;
  padding: 20px 60px;
  color: white;
  margin: 20px 10px 10px;
  border-radius: 6px;
  text-align: center;
  transition: top .01s linear;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.btn-3d.red:hover    {background-color: #e74c3c;}
.btn-3d.blue:hover   {background-color: #699DD1;}
.btn-3d.green:hover  {background-color: #80C49D;}
.btn-3d.purple:hover {background-color: #D19ECB;}
.btn-3d.yellow:hover {background-color: #F0D264;}
.btn-3d.cyan:hover   {background-color: #82D1E3;}

.btn-3d:active {
  top: 9px;
}

/* 3D button colors */
.btn-3d.red {
  background-color: #e74c3c;
  box-shadow: 0 0 0 1px #c63702 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 #C24032,
        0 8px 0 1px rgba(0,0,0,0.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.red:active {
  box-shadow: 0 0 0 1px #c63702 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.blue {
  background-color: #6DA2D9;
  box-shadow: 0 0 0 1px #6698cb inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(110, 164, 219, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.blue:active {
  box-shadow: 0 0 0 1px #6191C2 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.green {
  background-color: #82c8a0;
  box-shadow: 0 0 0 1px #82c8a0 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(126, 194, 155, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.green:active {
  box-shadow: 0 0 0 1px #82c8a0 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.purple {
  background-color: #cb99c5;
  box-shadow: 0 0 0 1px #cb99c5 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(189, 142, 183, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.purple:active {
  box-shadow: 0 0 0 1px #cb99c5 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.cyan {
  background-color: #7fccde;
  box-shadow: 0 0 0 1px #7fccde inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(102, 164, 178, .6),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.cyan:active {
  box-shadow: 0 0 0 1px #7fccde inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.yellow {
  background-color: #F0D264;
  box-shadow: 0 0 0 1px #F0D264 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(196, 172, 83, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.yellow:active {
  box-shadow: 0 0 0 1px #F0D264 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

/* Gradient buttons */
.btn-gradient {
  text-decoration: none;
  color: white;
  padding: 10px 30px;
  display: inline-block;
  position: relative;
  border: 1px solid rgba(0,0,0,0.21);
  border-bottom: 4px solid rgba(0,0,0,0.21);
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
/* Gradient - ugly css is ugly */
.btn-gradient.cyan {
  background: rgba(27,188,194,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(27,188,194,1)), to(rgba(24,163,168,1)));
  background: -webkit-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: -moz-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: -o-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1bbcc2', endColorstr='#18a3a8', GradientType=0);
}

.btn-gradient.red{ 
  background: rgba(250,90,90,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(250,90,90,1)), to(rgba(232,81,81,1)));
  background: -webkit-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: -moz-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: -o-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa5a5a', endColorstr='#e85151', GradientType=0 );
}
.btn-gradient.orange {
  background: rgba(255,105,30,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,105,30,1)), to(rgba(230,95,28,1)));
  background: -webkit-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: -moz-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: -o-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
}
.btn-gradient.blue {
  background: rgba(102,152,203,1);
  background: -moz-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(102,152,203,1)), color-stop(100%, rgba(92,138,184,1)));
  background: -webkit-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -o-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -ms-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: linear-gradient(to bottom, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6698cb', endColorstr='#5c8ab8', GradientType=0 );
}
.btn-gradient.purple { 
  background: rgba(203,153,197,1);
  background: -moz-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(203,153,197,1)), color-stop(100%, rgba(181,134,176,1)));
  background: -webkit-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -o-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -ms-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: linear-gradient(to bottom, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb99c5', endColorstr='#b586b0', GradientType=0 );
}
.btn-gradient.yellow {
  background: rgba(240,210,100,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(240,210,100,1)), to(rgba(229,201,96,1)));
  background: -webkit-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: -moz-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: -o-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0d264', endColorstr='#e5c960', GradientType=0 );
}
.btn-gradient.green {
  background: rgba(130,200,160,1);
  background: -moz-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(130,200,160,1)), color-stop(100%, rgba(130,199,158,1)));
  background: -webkit-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -o-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -ms-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: linear-gradient(to bottom, rgba(130,200,160,1) 0%, rgba(124, 185, 149, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c8a0', endColorstr='#82c79e', GradientType=0 );
}

.btn-gradient.red:active    {background: #E35252;}
.btn-gradient.orange:active {background: #E8601B;}
.btn-gradient.cyan:active   {background: #169499;}
.btn-gradient.blue:active   {background: #608FBF;}
.btn-gradient.purple:active {background: #BD8EB7;}
.btn-gradient.yellow:active {background: #DBC05B;}
.btn-gradient.green:active  {background: #72B08E;}