/*-------------------------
The buttons
--------------------------*/

.progress-button{
display: inline-block;
font-size:24px;
color:#fff !important;
text-decoration: none !important;
padding:14px 60px;
line-height:1;
overflow: hidden;
position:relative;

box-shadow:0 1px 1px #ccc;
border-radius:2px;

background-color: #51b7e6;
background-image:-webkit-linear-gradient(top, #51b7e6, #4dafdd);
background-image:-moz-linear-gradient(top, #51b7e6, #4dafdd);
background-image:linear-gradient(top, #51b7e6, #4dafdd);
}

/* Hide the original text of the button. Then the loading or finished
text will be shown in the :after element above it. */

.progress-button.in-progress,
.progress-button.finished{
color:transparent !important;
}

.progress-button.in-progress:after,
.progress-button.finished:after{
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
text-align: center;
top: 0;
padding-top: inherit;
color: #fff !important;
left: 0;
}

/* If the .in-progress class is set on the button, show the
contents of the data-loading attribute on the butotn */

.progress-button.in-progress:after{
content:attr(data-loading);
}

/* The same goes for the .finished class */

.progress-button.finished:after{
content:attr(data-finished);
}

/* The colorful bar that grows depending on the progress */

.progress-button .tz-bar{
background-color:#e667c0;
height:3px;
bottom:0;
left:0;
width:0;
position:absolute;
z-index:1;

border-radius:0 0 2px 2px;

-webkit-transition: width 0.5s, height 0.5s;
-moz-transition: width 0.5s, height 0.5s;
transition: width 0.5s, height 0.5s;
}

/* The bar can be either horizontal, or vertical */

.progress-button .tz-bar.background-horizontal{
height:100%;
border-radius:2px;
}

.progress-button .tz-bar.background-vertical{
height:0;
top:0;
width:100%;
border-radius:2px;
}

/*----------------------------
Color themes
-----------------------------*/

.progress-button.red{
background-color: #e6537d;
background-image:-webkit-linear-gradient(top, #e6537d, #df5179);
background-image:-moz-linear-gradient(top, #e6537d, #df5179);
background-image:linear-gradient(top, #e6537d, #df5179);
}

.progress-button.red .tz-bar{
background-color:#6876b4;
}

.progress-button.green{
background-color: #64c896;
background-image:-webkit-linear-gradient(top, #64c896, #5fbd8e);
background-image:-moz-linear-gradient(top, #64c896, #5fbd8e);
background-image:linear-gradient(top, #64c896, #5fbd8e);
}

.progress-button.green .tz-bar{
background-color:#9e81d6;
}

#sgcboxOverlay.colorbox6 {
position:unset;
}
.formbox1 {
float:none!important;
}
*{margin:0;padding:0;}
input,select{vertical-align:middle}

.er {
color:red;
}
.popup-holder{background:#fff;border:3px solid #2dabc5;box-sizing:border-box;padding:15px;margin:0 auto;position:relative;width:240px;}
.popup-holder .popuptxt{color:#737373;font-size:14px;font-weight:400;line-height:24px;padding-bottom:10px;width:100%}
.popup-holder .popuptxt span{display:block}
strong{color: #2dabc5}
.popup-holder .popuptxt span strong{color:#2dacc6}
.popup-holder .popuptxt p{color:#737373;font-size:12px;line-height:20px;text-transform:uppercase;padding:0px 0 20px;}
.levelbox{margin-bottom:0px;}
.popup-holder .inputtxt{box-sizing:border-box;border:1px solid #d6d6d6;border-radius:3px;font-size:12px;text-transform:uppercase;padding:10px;width:100%;}
.popup-holder input::placeholder,.popup-holder textarea::placeholder{color:#2dabc5;}
.bdrbtm{border-bottom:1px solid #2dacc6;display:inline-block;margin-top:3px;width:100px}
.submitbtn2{background:#2dacc6;border:0;color:#fff;padding:10px 0;font-size:12px; font-weight:400;-webkit-appearance:none;text-transform:uppercase;cursor:pointer;width:100%;text-align:center;}