Your IP : 216.73.216.164
/*
Common FormCraft CSS elements
*/
@import "less-variables.less";
@keyframes checkbox-check {
0% {
width: 0;
}
100%{
width: 100%;
}
}
@-webkit-keyframes loadAnimate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadAnimate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.width-100 {
width: 100%;
}
.width-50 {
width: 50%;
}
.formcraft-shadow {
background-color: white;
box-shadow: 0 0 0 0.5px rgba(0,20,40,.11), 0 2px 8px 0 rgba(50,55,90,.2);
}
.smoothing {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
.noSmoothing {
-webkit-font-smoothing: initial;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: initial;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('../lib/material-icons/MaterialIcons-Regular.eot');
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url('../lib/material-icons/MaterialIcons-Regular.woff') format('woff'),
url('../lib/material-icons/MaterialIcons-Regular.ttf') format('truetype');
}
.formcraft-loader,
.formcraft-loader:after {
border-radius: 100%;
width: 18px;
height: 18px;
display: inline-block;
}
.formcraft-loader {
margin: 0;
font-size: 12px;
position: relative;
text-indent: -9999em;
border-top: 2px solid @themeColor;
border-right: 2px solid @themeColor;
border-bottom: 2px solid @themeColor;
border-left: 2px solid transparent;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: loadAnimate 1.1s infinite linear;
animation: loadAnimate 1.1s infinite linear;
}
.formcraft-css .formcraft-icon {
font-family: 'Material Icons' !important;
font-weight: normal;
font-style: normal;
font-size: 110%;
line-height: 1;
display: inline-block;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align: text-bottom;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
body.ReactModal__Body--open {
overflow: hidden;
}
.FormCraftModalOverlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 999999;
background: rgba(0,0,0,.3);
opacity: 0;
transition: opacity .5s;
.CloseIcon {
position: absolute;
top: 0;
right: 0;
font-size: 1.4em;
padding: .75em;
color: inherit;
opacity: .5;
cursor: pointer;
z-index: 99999;
&:hover {
opacity: .75;
}
}
.FormCraftModal {
border-radius: @borderRadius;
position: absolute;
top: 50%;
left: 50%;
background: white;
transform: scale(.98) translateY(-48%) translateX(-50%);
opacity: 0;
transition: transform .25s, opacity .25s, height .5s, width .5s;
box-shadow: 0 5px 25px 0 rgba(0,0,0,.4);
transform-origin: 0 0;
overflow: hidden;
}
&.ShowingModal {
opacity: 1;
.FormCraftModal {
opacity: 1;
transform: scale(1) translateY(-50%) translateX(-50%);
}
}
&.HidingModal {
opacity: 0;
.FormCraftModal {
opacity: 0;
transform: scale(.98) translateY(-48%) translateX(-50%);
}
}
}
.formcraft-css {
line-height: 1.35;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
.IsRed {
color: #e86464;
}
.IsGreen {
color: #1d8e56;
border-color: #1d8e56;
}
.IsRedBorder {
border-color: #e86464 !important;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: 1.3;
text-transform: none;
font-weight: normal;
margin: 0;
outline: none;
}
::-webkit-input-placeholder {
color: #bbb;
}
::-moz-placeholder {
color: #bbb;
}
:-ms-input-placeholder {
color: #bbb;
}
:-moz-placeholder {
color: #bbb;
}
select {
height: auto;
color: inherit;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
box-shadow: none;
border: 0px;
margin: 0px;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDYgMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPnNlbGVjdC0tYXJyb3dzPC90aXRsZT48cGF0aCBkPSJNMS4xNDIgOC42ODNMMi4zMSA5Ljc1cy4zNS4zOC42OS4zOGMuMzQgMCAuNjg5LS4zNzkuNjg5LS4zNzlsMS4xNjktMS4wNjhhLjY5LjY5IDAgMCAxIC45NDMuMDA2LjYyLjYyIDAgMCAxIC4wMDYuOTA1TDMuNDcgMTEuODE3QS42NzEuNjcxIDAgMCAxIDMgMTJhLjY3MS42NzEgMCAwIDEtLjQ2OS0uMTgzTC4xOTMgOS41OTRhLjYyLjYyIDAgMCAxIC4wMDYtLjkwNS42OS42OSAwIDAgMSAuOTQzLS4wMDZ6bTAtNS4zNjZBLjY5LjY5IDAgMCAxIC4yIDMuMzExYS42Mi42MiAwIDAgMS0uMDA2LS45MDVMMi41My4xODNBLjY3MS42NzEgMCAwIDEgMyAwYy4xNzEgMCAuMzQxLjA2LjQ2OS4xODNsMi4zMzggMi4yMjNhLjYyLjYyIDAgMCAxLS4wMDYuOTA1LjY5LjY5IDAgMCAxLS45NDMuMDA2TDMuNjg4IDIuMjVTMy4zNCAxLjg3IDMgMS44N2MtLjM0IDAtLjY5LjM4LS42OS4zOEwxLjE0MiAzLjMxN3oiIGZpbGw9IiM1MjVGN0YiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
background-repeat: no-repeat;
background-size: 6px;
background-position: 92% 54%;
background-position: right 1.2em top 55%;
background-color: transparent;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
input[type="checkbox"],
input[type="radio"] {
position: relative;
box-sizing: border-box;
border: 1px solid darken(#d6d8d9, 4%);
background-color: #fafafa;
box-shadow: none;
border-radius: 100%;
width: 18px;
height: 18px;
vertical-align: bottom;
-webkit-appearance: none;
text-align: center;
cursor: pointer;
display: inline-block;
padding: 0;
-moz-appearance: none;
&:focus {
border: 1px solid darken(#d6d8d9, 4%);
outline: 2px solid rgba(51, 51, 51, 0.2);
}
&:hover {
border: 1px solid darken(#d6d8d9, 12%);
background-color: darken(#fafafa, 2%);
}
&:before {
background: none;
vertical-align: middle;
box-sizing: border-box;
.noSmoothing();
margin: 0;
position: absolute;
color: white;
display: none;
transform-origin: 0% 100%;
content: "";
left: 6px;
top: 8px;
height: 5px;
width: 10px;
border-left: 2px solid white;
border-bottom: 2px solid white;
transform: rotate(-45deg);
border-radius: 0px;
}
&:checked:before {
display: inline-block;
}
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
border-color: darken(#4cb787, 6%);
background: #4cb787;
&:before {
display: inline-block;
}
}
input[type="checkbox"] {
border-radius: 2px;
}
/* ColorPicker */
.wp-picker-holder {
position: absolute;
z-index: 999;
margin-top: 0px;
}
.wp-picker-active {
box-shadow: @boxShadowDarkOne;
}
.wp-picker-active .wp-picker-holder {
box-shadow: @boxShadowDarkOne;
}
.wp-picker-container .iris-picker {
margin-top: 0;
border: 0;
}
/* textAngular */
.textangular {
display: block;
border: 0;
margin-top: 2px;
background-color: white;
transition: box-shadow .4s;
position: relative;
padding-top: 4px;
box-shadow: 0 0 0 1px rgba(0,20,40,.08);
&:before {
height: 4px;
top: 0;
left: -1px;
right: -1px;
position: absolute;
content: '';
background-color: #777;
}
&.focussed {
box-shadow: 0 0 0 0.5px rgba(0,20,40,.08), 0 2px 12px rgba(0,10,20,.16);
&:before {
background-color: @themeColor;
}
}
.ta-toolbar {
border-bottom: 1px solid @borderColorDarkOne;
background-color: @backgroundGreyOne;
padding-bottom: .45em;
padding-top: .35em;
.btn-group {
display: inline-block;
border: 0;
margin: .35em 0 0 .65em;
box-shadow: 0 0 0 0.5px rgba(0,0,0,.22);
border-radius: 2px;
background-color: white;
overflow: hidden;
button {
cursor: pointer;
background: none;
box-shadow: none;
border: 0px;
padding: .52em .55em .47em;
display: inline-block;
margin: 0;
margin-bottom: -1px;
outline: none;
.formcraft-icon {
font-size: 1.2em;
}
&.active {
color: @themeColor;
}
&:hover {
background-color: #f0f1f2;
}
}
}
}
.ta-editor {
textarea {
outline: none;
background: inherit;
}
}
.ta-hidden-input {
width: 1px;
height: 1px;
border: none;
margin: 0;
padding: 0;
position: absolute;
top: -10000px;
left: -10000px;
opacity: 0;
overflow: hidden;
}
/* add generic styling for the editor */
.ta-root.focussed > .ta-scroll-window.form-control {
outline: 0;
}
.ta-editor.ta-html,
.ta-scroll-window.form-control {
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
width: 100%;
box-shadow: none;
outline: none;
border: 0px;
margin: 0;
vertical-align: top;
}
.ta-scroll-window.form-control {
position: relative;
padding: 0;
}
.ta-scroll-window > .ta-bind {
height: auto;
padding: 0 1em;
}
.ta-bind,
textarea {
min-height: 200px;
}
textarea,
textarea:focus,
textarea:hover {
box-shadow: none !important;
border: 0px !important;
border-radius: 0 !important;
}
.ta-editor:focus {
user-select: text;
}
/* add the styling for the awesomness of the resizer */
.ta-resizer-handle-overlay {
z-index: 100;
position: absolute;
display: none;
}
.ta-resizer-handle-overlay > .ta-resizer-handle-info {
position: absolute;
bottom: 16px;
right: 16px;
border: 1px solid black;
background-color: #FFF;
padding: 0 4px;
opacity: 0.7;
}
.ta-resizer-handle-overlay > .ta-resizer-handle-background {
position: absolute;
bottom: 5px;
right: 5px;
left: 5px;
top: 5px;
border: 1px solid black;
background-color: rgba(0, 0, 0, 0.2);
}
.ta-resizer-handle-overlay > .ta-resizer-handle-corner {
width: 10px;
height: 10px;
position: absolute;
}
.ta-resizer-handle-overlay > .ta-resizer-handle-corner-tl{
top: 0;
left: 0;
border-left: 1px solid black;
border-top: 1px solid black;
}
.ta-resizer-handle-overlay > .ta-resizer-handle-corner-tr{
top: 0;
right: 0;
border-right: 1px solid black;
border-top: 1px solid black;
}
.ta-resizer-handle-overlay > .ta-resizer-handle-corner-bl{
bottom: 0;
left: 0;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.ta-resizer-handle-overlay > .ta-resizer-handle-corner-br{
bottom: 0;
right: 0;
border: 1px solid black;
cursor: se-resize;
background-color: white;
}
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 230px !important;
padding: 0;
font-size: 1em;
font-weight: normal;
line-height: 1.42857143;
text-align: left;
white-space: normal;
background-color: #fff;
border-radius: 0;
box-shadow: @boxShadowDarkOne;
.arrow {
display: none !important;
}
}
.popover.top {
margin-top: -10px;
}
.popover.bottom {
margin-top: 10px;
}
.popover-title {
padding: 8px 14px;
margin: 0;
font-size: 14px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
}
.popover-content {
padding: 0;
white-space: nowrap;
.btn-group {
display: inline-block;
padding-right: 0 !important;
}
button {
cursor: pointer;
background: none;
box-shadow: none;
border: 0px;
padding: .65em;
display: inline-block;
margin: 0;
outline: none;
.formcraft-icon {
font-size: 1.25em;
}
&:hover {
color: @themeColor;
}
}
}
}
/* Tooltips */
.tooltip {
position: absolute;
z-index: 99999;
display: block;
visibility: visible;
font-size: 12px;
font-weight: normal;
line-height: 1.4;
margin-top: -4px;
opacity: 0;
filter: alpha(opacity=0);
letter-spacing: 0;
text-transform: none;
}
.tooltip.right.in {
margin-top: 0px;
padding: 0 5px;
margin-left: 3px;
}
.tooltip-cover {
position: relative;
}
.tooltip.in {
opacity: 1;
filter: alpha(opacity=100);
}
.tooltip.top {
margin-top: -10px;
padding: 0;
}
.tooltip.right {
margin-left: 3px;
margin-top: 0px;
padding: 0 5px;
}
.tooltip.bottom {
margin-top: 3px;
padding: 5px 0;
}
.tooltip.left {
margin-right: 22px;
margin-left: 0;
padding: 0 5px;
margin-top: 1px;
}
.tooltip-inner {
max-width: 400px;
min-width: 40px;
padding: 8px 10px;
color: #656565;
text-align: left;
text-decoration: none;
background-color: #fff;
box-shadow: 0 0 0 0.5px rgba(0,20,40,.14), 0 2px 12px 0 rgba(20,40,80,.4);
border-radius: 2px;
br {
line-height: 1.8em;
}
}
.tooltip.top .tooltip-arrow:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-color: transparent;
bottom: -1px;
left: 50%;
margin-left: -7px;
border-width: 7px 7px 0;
border-top-color: #ddd;
border-style: solid;
z-index: -1;
}
.tooltip.right .tooltip-arrow:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-color: transparent;
bottom: -7px;
left: 14px;
margin-left: -15px;
border-width: 7px 7px 7px 0;
border-right-color: #ddd;
border-style: solid;
z-index: -1;
}
.tooltip.left .tooltip-arrow:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-color: transparent;
bottom: -7px;
right: 14px;
margin-right: -15px;
border-width: 7px 0 7px 7px;
border-left-color: #ddd;
border-style: solid;
z-index: -1;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: -6px;
left: 50%;
margin-left: -7px;
border-width: 7px 7px 0;
border-top-color: #fff;
}
.tooltip.top-left .tooltip-arrow {
bottom: 0;
right: 7px;
margin-bottom: -7px;
border-width: 7px 7px 0;
border-top-color: #fff;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
left: 7px;
margin-bottom: -7px;
border-width: 7px 7px 0;
border-top-color: #fff;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -7px;
border-width: 7px 7px 7px 0;
border-right-color: #fff;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -7px;
border-width: 7px 0 7px 7px;
border-left-color: #fff;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -7px;
border-width: 0 7px 7px;
border-bottom-color: #fff;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
right: 7px;
margin-top: -7px;
border-width: 0 7px 7px;
border-bottom-color: #fff;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
left: 7px;
margin-top: -7px;
border-width: 0 7px 7px;
border-bottom-color: #fff;
}
.formcraft-button {
.smoothing();
display: inline-block;
text-decoration: none;
background-color: @themeColor;
box-shadow: none;
border: 0px;
color: white;
padding: 1em 1.3em 1em 1.3em;
border-radius: 4px;
cursor: pointer;
text-transform: uppercase;
font-weight: 700;
letter-spacing: .1px;
font-size: .85em;
box-shadow: 0 0 0 .5px rgba(70,120,200,1), 0 2px 4px rgba(0,20,40,.18);
transition: box-shadow .1s, padding .2s;
line-height: inherit;
position: relative;
.formcraft-loader {
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
border-left-color: transparent;
width: 9px;
height: 9px;
top: 50%;
margin-top: -.45em;
right: .75em;
display: inline-block;
position: absolute;
transition: right .25s, opacity .25s;
opacity: 0;
}
&.loading .formcraft-loader {
opacity: 1;
}
&:hover {
box-shadow: 0 0 0 .5px rgba(70,120,200,1), 0 2px 5px rgba(0,20,40,.32);
}
&.isEnabled {
box-shadow: 0px 1px 4px rgba(0,20,40,.45) inset;
background-color: darken(@themeColor, 2%);
}
&:active {
box-shadow: 0 0 0 0.5px rgba(0,20,40,.15), 0 2px 5px rgba(0,20,40,.32);
}
.formcraft-icon {
font-weight: 700;
font-size: 1.25em;
vertical-align: sub;
margin: -.24em .35em -.24em -.22em;
}
.loader {
margin-bottom: -2px;
margin-left: -1px;
margin-right: 3px;
}
&.small {
padding: .79em 1.3em .71em 1.3em;
font-size: .78em;
border-radius: 3px;
&.loading {
padding-left: 0.5em;
}
.formcraft-loader {
width: 7px;
height: 7px;
margin-bottom: -3px;
}
}
&.large {
padding: 1.4em 1.85em 1.18em 1.85em;
font-size: .95em;
letter-spacing: .1px;
font-weight: 700;
.loader {
margin-bottom: -3px;
}
}
&.white {
text-transform: none;
display: inline-block;
outline: none;
background-color: @backgroundGreyOne;
box-shadow: none;
border: 0px;
color: lighten(@fontColor, 2%);
padding: .86em 1.5em .83em 1.6em;
border-radius: 4px;
font-weight: 400;
font-size: 1em;
box-shadow: 0 0 0 0.5px rgba(0,0,0,.10), 0 1px 4px rgba(0,20,40,.12);
transition: box-shadow .1s;
border: 0px;
&.small {
padding: .53em 1em .51em 1em;
font-size: .9em;
}
&:hover,
&:focus {
color: @fontColor;
border: 0px;
background-color: white;
box-shadow: 0 0 0 0.5px rgba(0,0,0,.12), 0 2px 6px rgba(0,20,40,.16);
}
}
&.red {
background-color: #f56969;
box-shadow: 0 0 0 .5px rgba(100,0,0,.7), 0 2px 4px rgba(0,20,40,.18);
&:hover {
background-color: darken(#f56969, 6%);
box-shadow: 0 0 0 .5px rgba(100,0,0,1), 0 2px 5px rgba(0,20,40,.32);
}
&:disabled {
background-color: lighten(#f56969, 10%);
cursor: default;
}
}
&.green {
background-color: #4cb787;
box-shadow: 0 0 0 .5px rgba(0,100,0,.65), 0 2px 4px rgba(0,20,40,.18);
&:hover {
background-color: darken(#4cb787, 4%);
box-shadow: 0 0 0 .5px rgba(0,100,0,1), 0 2px 5px rgba(0,20,40,.32);
}
&:disabled {
background-color: lighten(#4cb787, 10%);
cursor: default;
}
}
&:hover {
background-color: darken(@themeColor, 4%);
}
&:disabled,
&.disabled {
opacity: .5;
cursor: default;
&:hover {
background-color: @themeColor;
box-shadow: 0 0 0 .5px rgba(70,120,200,1), 0 2px 4px rgba(0,20,40,.18);
}
}
}
.formcraft-input-button {
padding: 0;
display: inline-block;
position: relative;
&.type-search:after {
font-family: 'Material Icons';
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
content: 'search';
position: absolute;
left: .6em;
margin-top: -.7em;
top: 50%;
font-size: 105%;
font-weight: 500;
color: darken(@borderColor, 20%);
}
&.small {
padding: 0;
}
&.small input {
padding: .53em 1em .51em 2.2em;
font-size: .9em;
max-width: 70px;
}
&.large input {
padding: .94em 1.2em .92em 1.2em;
font-size: 1.2em;
max-width: 300px;
}
input {
max-width: 180px;
outline: none;
background-color: @backgroundGreyOne;
box-shadow: none;
border: 1px solid darken(@borderColor, 5%);
border: 0;
box-shadow: 0 0 0 0.5px rgba(0,0,0,.12), 0 1px 2px rgba(0,20,40,.12);
color: lighten(@fontColor, 2%);
padding: .86em 1.5em .83em 1.6em;
border-radius: 4px;
font-weight: 400;
font-size: 1em;
text-shadow: none;
transition: box-shadow .1s;
.noSmoothing();
&:hover,
&:focus {
background-color: white;
color: @fontColor;
box-shadow: 0 0 0 0.5px rgba(0,0,0,.12), 0 2px 4px rgba(0,20,40,.16);
}
}
}
}
.formcraft-datepicker {
width: 224px;
position: absolute;
display: none;
padding: 0;
font-size: 90%;
background: @backgroundGreyTwo;
border: none;
margin: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
background-color: white;
border: 0;
border-radius: 0 0 2px 2px;
box-shadow: 0 0 0 0.5px rgba(0,10,20,.1), 15px 0 15px -15px rgba(0,10,20,.12), 15px 15px 15px -15px rgba(0,10,20,.12), -15px 15px 15px -15px rgba(0,10,20,.12);
z-index: 9999999 !important;
color: #666;
* {
box-sizing: border-box;
}
}
.formcraft-datepicker .ui-datepicker-header {
border: none;
background: transparent;
font-weight: normal;
font-size: 15px;
margin-top: -1px;
}
.formcraft-datepicker .ui-datepicker-header .ui-state-hover {
background: transparent;
border-color: transparent;
cursor: pointer;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
.formcraft-datepicker .ui-datepicker-title {
margin: 0;
background-color: @themeColor;
color: white;
text-align: center;
line-height: 2.9em;
height: 2.90em;
white-space: nowrap;
}
.formcraft-datepicker .ui-datepicker-title select {
color: inherit;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
box-shadow: none;
padding: 0em .5em !important;
height: 2.90em;
vertical-align: top;
margin: 0;
border: 0px;
background: transparent;
cursor: pointer;
width: auto;
display: inline-block;
font-size: inherit;
border-radius: 0;
&:hover {
background-color: darken(@themeColor, 5%);
}
}
.formcraft-datepicker .ui-datepicker-prev {
position: absolute;
padding: 0 1em;
color: white;
top: 0;
line-height: 2.90em;
cursor: pointer;
left: 0;
font-size: inherit;
margin-top: -1px;
}
.formcraft-datepicker .ui-datepicker-next {
position: absolute;
padding: 0 1em;
color: white;
top: 0;
line-height: 2.90em;
cursor: pointer;
right: 0;
font-size: inherit;
margin-top: -1px;
}
.formcraft-datepicker .ui-datepicker-prev:hover,
.formcraft-datepicker .ui-datepicker-next:hover {
background-color: darken(@themeColor, 5%);
}
.formcraft-datepicker .ui-datepicker-prev-hover,
.formcraft-datepicker .ui-datepicker-next-hover,
.formcraft-datepicker .ui-datepicker-next,
.formcraft-datepicker .ui-datepicker-prev {
border: none;
}
.formcraft-datepicker .ui-datepicker-next span,
.formcraft-datepicker .ui-datepicker-prev span {
background-position: -32px 0;
margin-top: 0;
top: 0;
font-weight: normal;
}
.formcraft-datepicker .ui-datepicker-prev span {
background-position: -96px 0;
}
.formcraft-datepicker table {
margin: 0;
margin-bottom: -1px;
border-collapse: collapse;
border-radius: 0 0 2px 2px;
overflow: hidden;
}
.formcraft-datepicker th {
padding: 1em 0;
font-size: 13px;
font-weight: normal;
border: none;
color: @themeColor;
text-align: center;
}
.formcraft-datepicker td {
border: none;
padding: 0;
}
.formcraft-datepicker td .ui-state-default {
background: transparent;
border: none;
text-align: center;
padding: .61em .7em;
margin: 0;
font-weight: normal;
text-decoration: none;
color: inherit;
font-size: 12px;
display: block;
}
.formcraft-datepicker td.ui-datepicker-today .ui-state-default {
color: red;
}
.formcraft-datepicker td.ui-datepicker-today .ui-state-active,
.formcraft-datepicker td.ui-datepicker-today .ui-state-hover {
color: white !important;
}
.formcraft-datepicker .ui-state-disabled {
opacity: .25;
}
.formcraft-datepicker td .ui-state-active,
.formcraft-datepicker td .ui-state-hover {
background: @themeColor;
color: white;
}
.fc-form-modal .fc_modal-content
{
background-color: transparent;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-clip: padding-box;
outline: none;
}
.fc-form-modal .fc_modal-body
{
background-color: transparent;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 0px;
padding: 0px;
}
.fc_modal-open {
overflow: hidden !important;
width: 100%;
}
.fc_modal {
display: none;
overflow: auto;
overflow-y: scroll;
position: fixed !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding-top: 50px;
z-index: 9999998;
transition: transform .3s cubic-bezier(0.1,0,.7,1), opacity .2s linear;
-moz-transition: transform .3s cubic-bezier(0.1,0,.7,1), opacity .2s linear;
-webkit-transition: -webkit-transform .3s cubic-bezier(0.1,0,.7,1), opacity .2s linear;
-ms-transition: transform .3s cubic-bezier(0.1,0,.7,1), opacity .2s linear;
-o-transition: transform .3s cubic-bezier(0.1,0,.7,1), opacity .2s linear;
}
.fc_modal.fc_fade
{
opacity: 0.0;
filter: alpha(opacity=0);
-webkit-transform: scale(.99) translate3d(0, -2px, 0);
-moz-transform: scale(.99) translate3d(0, -2px, 0);
-o-transform: scale(.99) translate3d(0, -2px, 0);
-ms-transform: scale(.99) translate3d(0, -2px, 0);
transform: scale(.99) translate3d(0, -2px, 0);
}
.fc_modal.fc_fade.fc_in
{
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1) translate3d(0, 0, 0);
-moz-transform: scale(1) translate3d(0, 0, 0);
-o-transform: scale(1) translate3d(0, 0, 0);
-ms-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
.fc_modal.animate-right,
.fc_modal.animate-left
{
transition: transform .35s ease-out, opacity .2s linear;
-moz-transition: transform .35s ease-out, opacity .2s linear;
-webkit-transition: -webkit-transform .35s ease-out, opacity .2s linear;
-ms-transition: transform .35s ease-out, opacity .2s linear;
-o-transition: transform .35s ease-out, opacity .2s linear;
}
.fc_modal.fc_fade.animate-right
{
opacity: 0;
-webkit-transform: scale(.5) translate3d(75%, 0px, 0) rotate(-3deg);
-moz-transform: scale(.5) translate3d(75%, 0px, 0) rotate(-3deg);
-o-transform: scale(.5) translate3d(75%, 0px, 0) rotate(-3deg);
-ms-transform: scale(.5) translate3d(75%, 0px, 0) rotate(-3deg);
transform: scale(.5) translate3d(75%, 0px, 0) rotate(-3deg);
}
.fc_modal.fc_fade.animate-right.fc_in
{
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
-moz-transform: scale(1) translate3d(0, 0, 0);
-o-transform: scale(1) translate3d(0, 0, 0);
-ms-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
.fc_modal.fc_fade.animate-left
{
opacity: 0;
-webkit-transform: scale(.5) translate3d(-75%, 0px, 0) rotate(3deg);
-moz-transform: scale(.5) translate3d(-75%, 0px, 0) rotate(3deg);
-o-transform: scale(.5) translate3d(-75%, 0px, 0) rotate(3deg);
-ms-transform: scale(.5) translate3d(-75%, 0px, 0) rotate(3deg);
transform: scale(.5) translate3d(-75%, 0px, 0) rotate(3deg);
}
.fc_modal.fc_fade.animate-left.fc_in
{
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
-moz-transform: scale(1) translate3d(0, 0, 0);
-o-transform: scale(1) translate3d(0, 0, 0);
-ms-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
}
.fc_modal-dialog {
margin-left: auto;
margin-right: auto;
width: auto;
padding: 10px;
z-index: 99999;
}
.fc_modal-content {
position: relative;
background-color: #ffffff;
border-radius: 3px;
box-shadow: 0 0 0 0.5px rgba(0,20,40,.5), 0 2px 25px 0 rgba(50,55,90,.75);
background-clip: padding-box;
outline: none;
}
.fc_modal-backdrop {
position: fixed !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999997;
transition: opacity .2s linear;
-moz-transition: opacity .2s linear;
-webkit-transition: opacity .2s linear;
-ms-transition: opacity .2s linear;
-o-transition: opacity .2s linear;
background: rgb(50,50,50);
background: rgba(50,50,50,.3);
}
.fc_modal-backdrop.fc_fade {
opacity: 0;
filter: alpha(opacity=0);
}
.fc_modal-backdrop.fc_fade.fc_in
{
opacity: 1;
filter: alpha(opacity=100);
}
.fc_modal-backdrop:before
{
content: 'press ESC';
font-size: 14px;
color: #000;
position: absolute;
top: 10px;
left: 10px;
}
.fc_modal-header {
padding: 16px 20px;
background-color: #f4f4f4;
border-bottom: 1px solid #ddd;
font-size: 20px;
font-weight: normal;
color: #666;
border-radius: 3px 3px 0 0 ;
}
.fc_modal-header h3
{
font-size: 18px;
margin: 0;
color: inherit;
}
body .fc_modal .fc_close,
body .fc-trigger-close
{
position: absolute;
top: 5px;
right: 5px;
padding: 0;
border: none;
font-size: 160%;
z-index: 9000;
color: #666;
cursor: pointer;
font-weight: bold;
background: transparent;
width: 30px;
height: 30px;
line-height: 30px;
outline: none;
box-shadow: none;
margin: 0;
}
body .fc_modal .fc_close:hover
{
color: #666;
box-shadow: none;
}
.fc_modal-title {
margin: 0;
font-size: 22px;
font-weight: normal;
line-height: 1.428571429;
}
.fc_modal-body {
position: relative;
padding: 20px;
margin-bottom: 0px;
}
.fc_modal-footer {
padding: 19px 20px 20px;
background-color: #f4f4f4;
text-align: right;
border-top: 1px solid #e5e5e5;
border-radius: 0 0 3px 3px;
}
.fc_modal-footer:before,
.fc_modal-footer:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.fc_modal-footer:after {
clear: both;
}
.fc_modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}
.fc_modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.fc_modal-footer .btn-block + .btn-block {
margin-left: 0;
}
@media screen and (min-width: 768px) {
.fc_modal-dialog {
left: 50%;
right: auto;
width: 600px;
padding-top: 40px;
padding-bottom: 40px;
}
}
@media screen and (max-width: 768px) {
.fc_modal-backdrop:before
{
content: '';
}
}