/*
 Theme Name: SWTheme
 Theme URI: http://example.org/themes/dusk/
 Description: SW child theme
 Version: 1.0
 Author: Dave Francis
 Author URI: http://example.org/
 Template: GeneratePress
*/

html {height:100%;}
body {font-family:"Roboto","sans serif";background-color:#f4f4f4;color:#202020;margin:0px;padding:0px;font-size:10pt;position:relative;}
a {color: #009fa5;text-decoration:none;}
h5 {font-size: 120%; font-weight: 400; margin: 0; margin-bottom: 0.5em;}

.uwmaster {min-height:100vh;display:flex;flex-direction:column;flex:1;}

#fg-header {
    display:flex;
    height:66px;
    align-items:stretch;
    justify-content:space-between;
    padding:0px;
    box-sizing:border-box;
    background-color: #3c3c3c;
    font-family: "Roboto","sans serif";
}
#fg-head-left {
    width:300px;
    padding:0 17px;
    box-sizing: border-box;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: #14a3a9;
}
#fg-head-left a {margin:auto;}
#fg-head-right {
    display:flex;
    align-items: center;
    padding-right: 2em;    
}
#fg-head-right a, #fg-head-right span {
    padding: 0 1.5em;
    line-height:40px;
    font-size:120%;
    font-weight:300;
    margin-left:1em;
}
#fg-head-right a {
    color:#ffffff;
    /*background-color: #077f84;*/
    transition:background-color 0.2s;
}
#fg-head-right span {
    color: lightgrey;
}
#fg-head-right a:hover {
    background-color:#189da2;
}
/*
#fg-head-right a.fg-head-light {
    background-color: #f59f3a;
    border:0;
}
*/
#fg-head-right a.fg-head-light:hover {background-color:#f9ab50;border-color:#f9ab50;}
#fg-header .signup-btn {border:#f0f0f0 1px solid}

.uwpage {background-color:#ffffff;flex:1 1 auto;display:flex;align-items:stretch;}
.uw-content {
    width:950px;
    margin:0 auto;
    padding-top:2em;
}

#uwfooter {
    background-color: #202020;
    color: #808080;
    font-size: 8pt;
    line-height: 22px;
    font-family:"Roboto";
}
#uwfooter .padder {
    display: flex;
    justify-content: space-between;
}
#uwfooter .padder div:first-child {
    flex-grow: 1;
}
#uwfooter a {
    color: #808080;
    font-size: 9pt;
    margin:0 0.5em;
}
#uwfooter a:hover {
    color: #D0D0D0;
}
.uw_lhs #uwfooter {
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:10;
}
.uw_lhs #uwfooter .padder {
    padding:1em 2em;
    display: block;
}

/* there is a bug in IE10,11. Min height in a flex column container doesn't work. The fix is to contain the flex column in a flex-directio:row container :-\. We do this in all these pages */
body.flexpage {display:flex;flex-direction:row;}


.uw_lhs {
    width: 300px;
    position: relative;
    flex-shrink: 0;
    background-color: #333333;
}
.uw_main {flex:1 1 auto;display:flex;align-items:stretch;overflow:hidden;}

.padder {padding:15px;box-sizing:border-box;}
.slimpadder {padding:5px;box-sizing: border-box;}
.centered {display:block;text-align:center;}

.divider {border-bottom: 1px solid #585858;height:1px;}
.tab-top .divider {border-color: #6f6f6f;}

.spacer {height:20px;}
.spacer15 {height:15px;}
.spacer5 {height:5px;}
.bluebtn {background-color:#8C68B3;color:#ffffff;line-height:30px;text-decoration:none;padding:0 1em;display:inline-block;transition:background-color 0.2s;}
.bluebtn:hover {background-color: #2fb9bf;}
.greybox {background-color: #f5f5f5;color:#101010;}

.warning {color: #f00;}
.hidden {
    display: none;
}

.uw-lhs-row {display:flex;align-items:flex-start;justify-content:space-between;}
.col50 {;width:48%;}
.smalltext {font-size:80%}
.marginbottom2 {margin-bottom:2em;}
.indent {
    padding-left: 2.5em;
}
.smindent {
    padding-left: 1em;
}
.noindent {
    padding-left: 0;
    margin-left: 0;
}

.ws-widget {
    flex: 1;
    position: relative;
}
.ws-widget-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.ws-widget-loading span {
    margin-left: 10px;
    font-size: 1.2em;
}
.ws-widget-noimg {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ws-widget-noimg p {
    margin-left: 20px;
    margin-right: 20px;
}
[id|=fg-widget] {margin:2em auto;}
[id|=fg-widget]:not(.uw-showborder):not(.uw-transparent) {
    box-shadow: 0 0 7px rgba(0,0,0,0.5);
    border-width: 0;
}

.lhstext {background-color:#ffffff;color:#202020;}

/* Dialogs */
.no-close .ui-dialog-titlebar-close {display: none }

/* Tabs */
.tab {position:absolute;top:0;left:0;bottom:0;right:0;background-color:#4a375e;opacity:0;transition:opacity 0.3s;overflow-y:auto;box-sizing:border-box;}

.tab-top a {
    color: #35c6cc;
}

.tab-top {
    width:320px;
    margin-left:-320px;
    position:relative;
    background-color: #484848;
    transition: margin-left 0.3s; /*transform 0.3s;*/
    /*transform:translateX(-100%);*/
    overflow-y:auto;
    box-sizing:border-box;
    padding-top:40px;
    color: #ffffff;
    flex-shrink: 0;
}

.tab.selected {opacity:1.0;background-color:#604a77;}
.tab-top.selected {margin-left:0px;/*transform:translateX(0%);*/}
.tab-top-nopad {
    padding-top: 15px;
}

.tab-label, .tab-label-x, .steptitle, .tab-label-top {
    font-size:22pt;
    font-weight:300;
    display:block;
    margin:0;
    color: #ffffff;
    cursor:pointer;
    text-align:left;
    background-color:transparent;
    transition:background-color 0.2s;
}
.tab-label:hover, .tab-label-x:hover, .lhs-lower a:hover, .tab-label-top:hover, a.sw-getembed:hover  {background-color: #585858;} 
.tab-label-top:hover i, .tab-label-x:hover i, .lhs-lower a:hover i {color:#f59f3a;}

/*.lhs-lower a:hover, .tab-label-top:hover {background-color:#604a77;}*/
.tab-label-top.nolink:hover {background-color:transparent;cursor:default;}
.tab-label-top.nolink:hover i {color:white;}

.tab-label-top.selected {background-color: #484848;}
.tab-label-top.selected i {color:#f59f3a;}
.tab-label-top i, .tab-label-x i, .lhs-lower a i, .steptitle i {
    width:24px;
    color: #ffffff;
    margin-right:10px;
    text-align:center;
}
.tab-label-top i, .tab-label-x i, .steptitle i {
    font-size:14pt;
    vertical-align:3px;
}

h5.tab-label-top {font-size:18pt;padding-top:0.2em;padding-bottom:0.2em;}
.tab-label.smaller, .tab-label-x.smaller  {font-size:14pt;color:#ddccee;}
.tab-head {color:#ffffff;font-size:22pt;font-weight:300;border-bottom:#6f6f6f 1px solid;padding-bottom:15px;margin-bottom:0.5em;margin-top:0;position:relative;}
h2.tab-head {margin-top: 15px; padding-left: 15px; border-color: #71588C;}

.tab-close, .page-close, .tab-close-top {
    background:url('images/cross.png') no-repeat 50% 50%;
    height:21px;
    width:21px;
    position:absolute;
    right:15px;
    top:25px;
    cursor:pointer;
    opacity:0.8;
    transition:opacity 0.3s;
}
h4 .tab-close {
    top:25px;
}
.tab-close:hover, .page-close:hover, .tab-close-top {
    opacity:1.0;
}
.tab-close-top.tab-saving {
    background-image: url('images/settings-spinner.gif');
    height:30px;
    width:30px;
    right:10px;
    top:20px;
}
.tab-close-top.tab-saved::before {
    content: 'Saved';
    position: absolute;
    left: -45px;
}

.lhs-lower a {
    color: #ffffff;
    display:block;
    line-height:30px;
    font-weight:300;
    font-size:14pt;
    transition:background-color 0.2s;
    padding-top:0.3em;
    padding-bottom:0.3em;
}

a.sw-getembed {
    color: #ffd09d;
    line-height: 24px;
    display: block;
    border-bottom: #505050 1px solid;
    font-size: 150%;
    font-weight: 300;
}
a.sw-getembed i {margin-right:0.6em;}


/*
.lhs-lower a.sw-getembed {background-color:#14a3a9;margin-top:0.5em;}
.lhs-lower a.sw-getembed:hover {background-color:#2fb9bf}
.lhs-lower a.sw-getembed:hover i {color:white;}
*/

.tab-label-x a {color:#eeddff;}

.steptitle {color:#bababa;cursor:default;}
.currentstep {
    color: #ffffff;
    background-color: #5c5c5c;
}

/* Buttons */
.bluebtn, .ui-dialog .ui-dialog-buttonpane button {background-color:#14a3a9;color:#ffffff;line-height:30px;text-decoration:none;padding:0 1em;display:inline-block;cursor:pointer;}
.orangebtn, a.orangebtn {
    background: #d77900;
    color: #fff;
}
.smallbtn {
    display: inline-block;
    padding: 2px 5px;
    font-size: 9pt;
}

/* CSS for the list of slides in the Edit Content pane */
#slidelist {background-color:#ffffff;}

/* The template picker dialog */
#tp-mask {display:none;background-color:rgba(0,0,0,0.4);position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;}
.uw-dialog {
    display: none;
    color:#202020;
    font-family:"Roboto","Sans serif";
}
.uw-dialog label {
    color:#202020;
    margin-bottom:5px;
}
.uw-dialog p {
    margin: 0.8em 0;
}
.uw-dialog p:first-child {
    margin-top: 0;
}
.uw-dialog p:last-child {
    margin-bottom: 0;
}

#sw-embedcode, #sw-embedcode-if {
    height: 123px;
}

#tp-dialog {width:850px;height:90%;}
.scroller {overflow-y:scroll;height:100%;overflow-x:hidden;}
.uw-adminpage h3, .uw-adminpage h4, .uw-dialog h3, .uw-dialog h4 {
    color:#202020;
    display:block;
    text-align:center;
    font-weight:300;
    font-size:20pt;
    margin: 1em 0 0.5em;
}
.uw-adminpage h1, .uw-dialog h1 {
    text-align: center;
    font-weight: 300;
    /*border-bottom: #d0d0d0 1px solid;*/
    padding: 0.5em 0;
    font-size: 22pt;
    margin:0;
    font-family:'Roboto Slab','sans serif';    
    padding-bottom:1em;
}
.uw-adminpage h1 {border-bottom:0px;}


.uw-adminpage a {text-decoration:none;}
.uw-adminpage h1 {font-size:28pt;font-weight:300;text-align:center;}
.uw-adminpage h2 {font-size:24pt;font-weight:300;margin:0 auto;display:block;text-align:center;}

.uw-adminpage h1.heavier {
    color: #444444;
    font-size: 43px;
    font-family: "Roboto Slab", Sans-serif;
    font-weight: 400;
    line-height: 1.3em;
}

.uw-fl {
    display:flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content:center;
}
.uw-fl-3col div {
    flex-basis:33%;
}
.uw-fl-2col div {
    flex-basis:50%;
    box-sizing: border-box;
}
.uw-fl-2col div:first-child{padding-right: 4px}

.uw-fl-vcent {
    align-items: center;
}

.templatelist {
    margin-bottom:2em;
    margin-top:2em;
}
.templatelist .flexwrap {
    margin-top: 2em;
    flex-basis: 100%;
}
.templatelist div {
    cursor: pointer;
}
.templatelist img {
    box-shadow:0px 0px 5px rgba(0,0,0,0.5);
    margin-bottom: 10px;
}
.templatelist i {
    display: block;
    padding: 1em 0;
    color: #202020;
    font-style: normal;
}
.templatelist i span {
    margin:0 1em;
}

#ws-tmpldlg .subhead {font-size:120%;}

.uw-fl-1col.templatelist i {padding:1em;}
.templatelist div:hover {background-color:#f0f0f0;}

.tp-rss .tp-socialonly {
    display: none;
}

.dialog-close, .dialog-close2 {background:url('cross2.png');height:29px;width:29px;position:relative;float:right;margin-top:-26px;margin-right:-26px;cursor:pointer;/*opacity:0.8;transition:opacity 0.3s;*/}

#ct-dialog {width:870px;}

#slide-dialog, #rss-dialog {height:auto;width:400px;}

#tp-proonlydlg {font-size:110%;}
#tp-proonlydlg .padder div:first-child {float:left;margin-right:1.5em;}
#tp-proonlydlg .purbutton {
    display:inline-block;
    line-height:32px;
    margin-top:5px;
    color: #ffffff;
}
#proonly-img {
    box-shadow:0px 0px 6px rgba(0,0,0,0.3);
}

.proonly {position:relative;}
.proonly::after {
    content:url('images/proonly.png');
    position:absolute;
    top:0;right:0;
}
#widstyleform {position:relative;}
#protemplwarning {
    padding: 0.3em 0;
    background-color:#f02020;
    color:white;
    text-align:center;
    position:absolute;
    left:0;
    right:0;
    top:0;
}
#protemplwarning a {color:white;font-weight:bold;padding:3px 7px;background-color:#7b0b0b;}
.extrawidspace {margin-top:1em}
#yw-create {
    padding: 0.5em 1.2em;
    font-size: 110%;
}

/* Dialogs */
#ip-rssdlg label {
    color: inherit;
    margin: 0;
}
#ip-rssdlg label + label {
    margin-top: 15px;
}
#ip-rssdlg small {
    display: none;
}
#ip-rssdlg input:invalid + small {
    display: initial;
}

/* styling for input range */
input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;

    /*fix for FF unable to apply focus style bug */
    /*border: 1px solid #867398;*/

    /*required for proper track sizing in FF*/
    width: 85%;
    margin:0;
    margin-top:20px;
    background-color:transparent;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 50%;
    height: 7px;
    background: #6f6f6f;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: #f0f0f0;
    box-shadow:0px 1px 1px rgba(0,0,0,0.5);
    margin-top: -10px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 7px;
    background: #6f6f6f;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    background: #f0f0f0;
    box-shadow:0px 1px 1px rgba(0,0,0,0.5);
    margin-top: -10px;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;

    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;

    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

/* forms */
span.label, label {display:block;font-size:11pt;line-height:120%;color: #ffffff;margin-bottom:1.5em;position:relative;}
span.label.nospace, label.nospace {margin-bottom:0.5em;} /* DJF - new for border setting UI */

.rangeval {font-size:8pt;color:#f0f0f0;position:absolute;bottom:-15px;left:0;}
label.centered .rangeval {left:auto;}

input[type=text], input[type=password], select, #fontfamily-button {
    display:inline-block;
    /*margin-left:5px;*/
    padding:0.4em 0.5em;
    font-size:11pt;
    border: #6f6f6f 1px solid;
    background-color: #6f6f6f;
    color: #ffffff;
    width:100%;
    box-sizing:border-box;
}

input[type=text]:focus, select:focus {
    color:#ffffff;
    background-color: #6f6f6f;
    border-color:#989898;
    outline:0;
}

input[type=text] {width:8em;}
input.smaller {width:3em;}

.uw-fl-2col input[type=text] {margin:0;margin-top:5px;}

input[type=checkbox] {
    display:inline-block;
    vertical-align:-1px;
}

input[type='checkbox']:checked, input[type='radio']:checked {-webkit-filter: grayscale(100%);outline: #a7a7a7 1px solid;}
input.smallfield {width:3em;}
input.bigfield {width:100%;display:block;margin:0.2em 0;box-sizing:border-box;}
input.lightfield {color:#202020;background-color:#f4f4f4;border:#d0d0d0 1px solid;}
input.lightfield:focus {color:#202020;background-color:#f8f8f8;border:#b0b0b0 1px solid;}


/* color picker */
.input-group
{
    padding:4px;
    /*width:120px;*/
    display: flex;
    /*justify-content: space-between;*/
    margin-top:5px;
    border: #6f6f6f 1px solid;
    background-color: #6f6f6f;
    color: #ffffff;
}

.input-group input[type=text]
{
    border:0px;
    padding:0px;
    outline:0;
    margin:0;
    width:5em;
    background-color:#6f6f6f;
    color:#ffffff;
    margin-left:0.7em;
}

.input-group input[type=text]:focus
{
    outline:0;
    border:0;

}

.label-above select {margin:0;}
.label-above label {display:block;margin-bottom:5px;}

.colorpicker-element .input-group-addon i {
    width: 24px !important;
    height: 24px !important;
    display:block;
    border:#d0d0d0 1px solid;
    cursor:pointer;
}

/* My widgets page, widget list */
.wid-cont {
    width:700px;
    margin:0 auto;
    margin-bottom:15px;
    background-color: #f0f0f0;
    display:flex;
    box-shadow:0px 1px 1px rgba(0,0,0,0.3);
}
.wid-cont img {float:left;margin-right:15px;}
.wid-text {overflow:hidden;color:#383838;}
.wid-text .widsource {
    display: inline-block;
    margin-bottom: 0.5em;
    color: #505050;
    word-break: break-all;
}
.wid-text .widtitle {font-size:14pt;display:block;margin-bottom:0.5em;}
.wid-cont .lhs {flex:1;padding:15px;}
.wid-cont .rhs {padding:15px;background-color:#e0e0e0;}
.widtitle .fa-pencil {
    cursor: pointer;
}
.widdomains:not(:empty) + span {
    display: none;
}

.wid-cont .rhs a.purbutton {
    font-size:90%;
    margin-right:5px;
    margin-bottom:25px;    
}
.wid-cont .rhs a.purbutton:last-child {margin-right:0;}

a.purbutton {
    display:inline-block;
    text-decoration:none;
    text-align:center;
    background-color: #15999e;
    transition:background-color 0.1s;
    color:#ffffff;
    line-height:30px;
    padding:0 1em;
    border:0;
}
a.purbutton:hover {background-color: #23b4b9;}

.disabledbtn, .disabledbtn:hover, a.disabledbtn, a.disabledbtn:hover {
    background-color:#c8c8c8;
}

.wid-cont .links {display:flex;justify-content: space-evenly;}
.wid-cont .links a {color: #0a8d92;border-right:#b0b0b0 1px solid;padding:0 0.8em;}
.wid-cont .links a:last-child {border:0;}

#domains-dialog {width:400px;height:auto;}
#domains-dialog textarea {
    display: block;
    background-color: #f4f4f4;
    width: 100%;
    height:150px;
    padding: 1em;
    box-sizing: border-box;
    border: #d0d0d0 1px solid;
    margin: 1em 0;
    text-align: left;
}
.yourwidgets-head {
    width:700px;
    margin:0 auto;
}
.yourwidgets-head div {
    display:flex;
    justify-content: center;
    margin-bottom:2em;
    text-align:center;
}

/* Image Picker */
#ip-cont { 
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 15px 15px;
}
#ip-tabs > div:not(.active) { 
    display: none; 
}
.ip-tab {
    padding-top: 1em;
}
#ip-nav {
    display: flex;
    justify-content:center;
    background-color:#f0f0f0;    
}
#ip-nav div {
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 4px solid transparent;
    font-size: 140%;
    margin: 0px 1em;    
}
#ip-nav .active {
    border-color: #FFAA16;
}

#ip-rss {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#ip-rss > p {
    width: 100%;
    text-align: center;
    margin-top: 1em;
    margin-bottom: 2em;    
}
#ip-rss > div {
    display: none;
}
#ip-rss > div:nth-of-type(odd) {
    width: 60%;
}
#ip-rss > div:nth-of-type(even) {
    width: 38%;
}
#ip-rss .ip-cont {
    min-height: 40vh;
}
#ip-rss .bluebtn {line-height:34px;padding:0 1.2em;}

#ip-rssmedia {
    overflow-wrap: break-word;
}

/*
#ip-rssadd {
    background-color: transparent;
    color: #14a3a9;
    font-weight: bold;
    border: #14a3a9 1px solid;
}
*/

.ip-rss-col {
    background-color:#f0f0f0;
    padding:1em;
    box-sizing:border-box;
}

.ip-rssitem {display:flex;align-items: center;border-bottom:#ddd4e8 1px solid;padding-bottom:1px;}
.ip-rssitem:last-child {border:0;padding:0;}
.ip-rssitem span {
    flex:1;
    line-height:28px;
    margin-right:5px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:100%;
}
.ip-mediaitem a, .ip-rssitem a {
    color: #000000;
}
.ip-mediaitem.ip-medianoimg a {
    color: #808080;
}
.ip-mediaitem a:hover, .ip-rssitem a:hover {
    background-color:#ddd4e8;
}
.ip-mediaitem .fa, .ip-rssitem .fa {
    padding:4px 5px;
    text-align: center;
    font-size: 12pt;
}
.ip-mediaitem {
    padding-bottom:5px;
    margin-bottom:5px;
    border-bottom:#d0d0d0 1px solid;
    overflow:hidden;
    color:#202020;
}
.ip-mediaitem:last-child {
    border:0;
    padding-bottom:0;
}
.ip-mediaitem img {
    float: left;
    width: 80px;
    margin-right: 5px;
}
.ip-mediaitem img[src=""] {
    display: none;
}
.ip-mediaitem .rhs {
    float: right;
}
.ip-mediaitem img:not([src=""]) ~ .lhs {
    margin-left: 85px;
}

.ip-finish {
    margin-left: 1em;
}

.ip-cont {
    border-top: #d0d0d0 1px solid;
    margin-top: 1em;
    padding-top: 0.7em;
}
.ip-nomediamsg {
    display: none;
}
.ip-imglist {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 10px;
    border-top: 0;
}
.ip-imglist div {
    flex-basis: 25%;
}
.ip-imglist div:nth-child(n+4) {
    margin-top: 10px;
}
.ip-imglist img {
    display: block;
    margin: 0 auto;
    max-width: 160px;
}

#sw-waitdlg, #auth-wait {
    display: flex;
    align-items: center;
}
#sw-waitdlg::before, #auth-wait:before {
    content: "\f110";
    font: 2em FontAwesome;
    animation: fa-spin 2s infinite linear;
    margin-right: 15px;
}

.ip-logged { display: none; }
.ip-social + .ip-login { margin-left: 20px; }

.ip-notice {
    display: none;
    border: 2px solid #D7D7D7;
    background: #fff;
    padding: 5px 10px;
    font-size: 80%;
}

/* Jquery UI Custom */
.ui-icon { background-image: none !important; } /* Do not make requests to Jquery UI images */
.ui-dialog .ui-dialog-title {
    display: none;
}
.ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-buttonpane {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
}
.ui-dialog .ui-dialog-titlebar-close {
    width: 29px !important; /* needed to override jqueryui */
    height: 29px !important;
    top: -26px !important;
    right: -26px !important;
    background: url('images/cross2.png') no-repeat !important;
    border:0 !important;
    margin:0 !important;
    padding: 0 !important;
}
.ui-widget {
    font-family: inherit;
}
.ui-widget.ui-widget-content {
    color: inherit;
    border: 0;
    border-radius: 0;
    padding: 0;
}
.ui-widget-overlay {
    background: rgba(0,0,0,0.4);
}
.ui-dialog .ui-dialog-content {
    padding: 15px;
}
.ui-dialog .ui-dialog-buttonpane button {
    margin: 0 15px 15px;
    border: 0;
    border-radius: 0;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
}
.ui-widget-content .ui-state-active {
    background: none;
    border: none;
    margin: 0;
}
.ui-corner-all {
    border-radius: 0;
}

/* Create Widget page */
.sw-createwidget .uw-content section ~ section {
    display:none;
}

/* header image UI */
#headerimgcont {
    display: inline-flex;
    align-items: center;
    width: 100px;
    height: 80px;
    background-color: #6f6f6f;
    margin-right:10px;
    border: #8c8c8c 1px solid;
}
#headerimgcont span {
    display:block;
}
#headerimgcont img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}
#headerimgcont img[src=""] {
    display: none;
}
#headerimgright {
    display: inline-block;
    vertical-align: top;
}

/* The font image selector */
#fontfamily + span, #shareheadfont + span {
    margin:0;
    padding:0;
    margin-top:5px;
}

#fontfamily + span span.ui-icon, #shareheadfont + span span.ui-icon {
    text-align: center;
    text-indent: 0px;
    margin-top: -9px;
}

#fontfamily + span .ui-icon::before, #shareheadfont + span .ui-icon::before {
    content:"\f0dd";
    font-family: FontAwesome;
    color: #ffffff;
    font-size:10pt;
    vertical-align:top;
}

#fontfamily-menu, #fontfamily-button, #shareheadfont-menu, #shareheadfont-button {
    font-size: 1em;
    background-color: #6f6f6f;
}

#fontfamily-menu, #shareheadfont-menu {
    border:#6f6f6f 1px solid;
    color:#ffffff;
    background-color:#6f6f6f;
    padding:0;
    margin:0;
}

#fontfamily-menu li, #shareheadfont-menu li {
    height:30px;
    line-height:30px;
    padding-left:0.5em;
    border: 1px solid transparent;
    display:block;
}

#fontfamily-menu li:hover, #shareheadfont-menu li:hover {
    color:#E4DBEC;
    border:#d0d0d0 1px solid;
}

#fontfamily-menu li div, #fontfamily-button .ui-selectmenu-text, #shareheadfont-menu li div, #shareheadfont-button .ui-selectmenu-text {
    background-repeat: no-repeat;
    display: inline-block;
    height: 24px;
    width: 120px;
    background-position:0px 2px;
}

#fontfamily-button, #shareheadfont-button {padding-left: 3px;}

#fontfamily-button .ui-selectmenu-text, #shareheadfont-button .ui-selectmenu-text {
    padding: 0;
    margin: 4px;
    color: #ffffff;
    line-height: 28px;
}

.ui-selectmenu-menu {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.ui-selectmenu-menu .ui-menu {
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    padding: 2px 0.4em;
    margin: 0.5em 0 0 0;
    height: auto;
    border: 0;
}
.ui-selectmenu-open {
    display: block;
}
.ui-selectmenu-button {
    display: inline-block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    cursor: pointer;
}
.ui-selectmenu-button span.ui-icon {
    right: 0.5em;
    left: auto;
    margin-top: -8px;
    position: absolute;
    top: 50%;
}
.ui-selectmenu-button span.ui-selectmenu-text {
    text-align: left;
    padding: 0.4em 2.1em 0.4em 1em;
    display: block;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* end font image selector */

.collapsible-head {
    cursor: pointer;
}
.collapsible-head.folded i:before {
    content: '\f0da';
}
.collapsible-head i:before {
    content: '\f0d7';
}
.collapsible-head.folded + .collapsible-cont {
    display: none;
}
.collapsible-head, .collapsible-cont {
    background-color: #6f6f6f;
    padding: 5px;
}
.collapsible-cont p {
    margin: 1em 0;
}

.collapsible-cont input[type=text] {
    background-color:#909090;
    border-color:#909090;
}
.collapsible-cont input[type=text]:focus {
    border-color:#b0b0b0;
}

#ws-keyworddlg label {
    margin-top: 1em;
}
#widstyleform:not(.ws-planfree) .ws-proonly, .ws-backtransp .ws-nobacktransp {
    display: none;
}
#widstyleform .orangebtn {
    margin-top: 0.5em;
}
#widstyleform .ip-rssitem {
    flex-direction: column;
    align-items: flex-start;
}
#widstyleform .ip-rssitem .warning,
#widstyleform .ip-rssitem .fa-warning {
    font-size: 85%;
    padding: 0;
}
.ws-divider {
    margin: 1.2em 0;
    border-top: 1px #6f6f6f solid;
}
.ws-backtransp.ws-whitetext {
    background-color: #c0c0c0;
}

/* For payment / upgrade page */
.clearall {clear:both}

.pf-section {
    padding:30px;
    background-color:#f0f0f0;
    border:#d0d0d0 1px solid;
    margin-bottom:20px;
}
.pf-col-m {
    float:left;
    width:40%;
    margin-bottom:10px;
}
.pf-col-s {
    float:left;
    width:25%;
    margin-bottom:10px;
}
.pf-col-l {
    overflow:hidden;
}
#payment-top {margin-bottom:3em;}
#payment-top h1, #payment-top h3 {text-align:center}
#payment-top h1 {margin:1em;margin-bottom:0;}

#upgrade-list {
    width: 450px;
    margin: 0 auto;
    text-align: left;
    font-size: 110%;
    line-height: 150%;
    margin-bottom:40px;
}
#payment-form h3 {
    margin:0;
    margin-bottom:20px;
    font-size:170%;
    text-align:left;
}
#payment-form label, #registerform label {
    font-size:110%;
    font-weight:400;
    margin-bottom:5px;
    margin-top:1em;
    color:#202020;
}
#payment-form input[type=text], #payment-form select, #registerform input[type=text], #registerform input[type=password] {
    border-radius:2px;
    background-color:#ffffff;
    padding:0.5em;
    border:#d0d0d0 1px solid;
    font-size:110%;
    width:90%;
    box-sizing:border-box;
    margin:0;
    color:#202020;
}

#payment-form input[type=text]:focus, #payment-form select:focus, #registerform input[type=text]:focus, #registerform input[type=password]:focus {color:#202020}


#payment-form .sublabel-r {
    float:left;
    font-size:100%;
    margin-left:-2em;
    margin-top:0.4em;
}
#payment-form .radio-label {
    display: inline-block;
    padding:0.5em;
}
#payment-form .radio-label:first-child {
    padding-left: 0;
}

#payment-form .paymenterror {color:#f03030;}
#payment-form .paymenterrorinput {border-color:#ff4040;}

.pf-bt-cont {
    background-color:#ffffff;
    padding:20px;
    border-radius:2px;
    border:#d0d0d0 1px solid;
}
#vatnumber {
    margin-right: -15px;
}
#vatfields
{
    margin-top:15px;
}
#validatebtn {
    padding: 0.6em 1em;
    height: auto;
    font-size: 100%;
    margin-top: 0;
    color: #ffffff;
    background-color: #14a3a9;
    float: left;
    transition: none;
}
#validatebtn.disabledbtn {
    background-color:#c8c8c8;
}
#total_incl_vat {font-size:90%;color:#7E7E7E;display:none;margin-top:-5px;}
#vatcountrycode {margin-right:3px;font-size:120%}
#vatcountrycode:empty {margin-right:0;}
.vatvalidated {
    background: #FFFFFF url('images2/tick1.png') no-repeat 97% center;
}
#vatstatus {
    font-size: 90%;
    padding: 7px;
    background: #fff;
    margin-bottom: 10px;
}
#vatstatus:empty {display:none;}
.vatstatussuccess {border:1px solid #59B3E6;}
.vatstatusfailure {border:1px solid #E65959;}

#payment-form label.pf-biglabel {font-size:140%;font-weight:bold;line-height:2.1em;margin-top:0.5em}

#upgradecarddetails #braintree-dropin-frame {
    margin-top:-68px;
}
#braintree-form {overflow:hidden}

#pf-assure {margin:1em 0;padding:1em;background-color:#ffffff;display:flex;align-items:center;justify-content:space-around;border:#d0d0d0 1px solid}
#pf-assure span {display:inline-block}
#pf-assure a  img {width:164px}

select#braintree_plan, select#braintree_period {width:60%;margin-top:0.5em}
.pf-terms {background-color:#ffffff;border:#d0d0d0 1px solid;padding:20px;}
.pf-terms p {margin:0}
#pf-upgradebtn, #registerbtn  {
    border: 1px solid #066b6f;
    background-color: #14a3a9;
    width:8em;
    height: 2.5em;
    line-height: 2.5em;
    font-size: 130%;
    margin:2em auto 0 auto;
    float:none;
    display:block;
    transition:background-color 0.3s;
}
#pf-upgradebtn {height:auto;line-height:1.5em;}
#registerbtn {
    width:12em;
    text-align:center;
}
#pf-upgradebtn:hover, #registerbtn:hover {
    background-color:#19b3b9;
    cursor:pointer;
}
#pf-upgradebtn.upgradebtn-disabled {
    background-color:#808080;
    color:#b0b0b0;
}
#upgradespinner {
    height:34px;
    line-height:34px;
    font-size:14pt;
    display:flex;
    justify-content:center;
    margin-top:8px;
}
#upgradespinner div {
        background: url('images/upgrade-spinner.gif') no-repeat 0px center;
        width:30px;
        display:inline-block;
        margin-right:8px;
}
/* End payment / upgrade page */

/* Terms page */
.content {
    width: 950px;
    margin-left: auto;
    margin-right: auto;
}

DIV.termsalign {
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
}

.termshead {
    font-weight: 700;
    font-size: 14pt;
}

/* Account page */
.sw-account .divider, .sw-account .purbutton {
    margin-bottom: 1.5em;
}

.sw-account h2 {
    text-align:left;
    margin-top:1em;
    margin-bottom:0.5em;
}

/* Login / Signup */
#auth-dlg {padding:2em;background-color:#f4f4f4;width:300px !important;box-shadow:0 0 40px rgba(0,0,0,0.3);}

#auth-dlg input {margin-bottom:1.2em;background-color:#ffffff;padding:0.7em;}

#auth-dlg h2 {font-family:roboto slab;font-size:210%;text-align:center;font-weight:500;}
#signup-form, #login-form {text-align:center;}

#signup-form .bluebtn, #login-form .bluebtn {
    font-size: 110%;
    padding: 0 2.6em;
    line-height: 38px;
    margin-top:3px;
}


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #a0a0a0;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #a0a0a0;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #a0a0a0;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #a0a0a0;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color:    #a0a0a0;
}
.auth-msg {color:red;}
.auth-msg:empty {
    display: none;
}
a.auth-forgot {
    font-size: 90%;
    color: #15999e;
}
#auth-dlg .the_champ_login_container {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#login-pwd {margin-bottom:0;}


.the_champ_login_ul {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction:column;
}
.the_champ_login_ul li ~ li {
    margin-left: 5px;
}
.the_champ_login_ul i {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    cursor: pointer;
}
.theChampLogin.theChampGoogleLogin {
    width: 179px;
    height: 40px;
    background-image: url('images/social/google-login.png');
    color:white;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}


.theChampLogin.theChampFacebookLogin {
    width: 179px;
    height: 40px;
    background-image: url('images/social/facebook-login.png');
    color:white;
    margin:5px 5px 10px 5px;
}

div.theChampFacebookLogoContainer {display:none;}

.theChampLoginSvg {
    opacity: 0;
}

/* Admin page */
.sw-admin #search {
    width: 250px;
}
.sw-admin h2 {
    margin-top: 20px;
}
.sw-admin h3 {
    margin: 15px 0;
}
.adm-monthstats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

/* tablets of all sizes */
@media screen and (max-width:1024px)
{
    .uw-content {width:100%;padding:0;}

    #fg-head-left {width:20%;padding:0 2px;}
    #fg-head-right {flex:1;justify-content:space-around;padding:0;}
    #fg-head-right a, #fg-head-right span {padding:0;margin:0;font-size:140%;}

    #fg-header .signup-btn {padding: 0 0.5em;   /* line-height: 20px;*/}

    section.elementor-element-wnxtqoo {width:100%;margin-top:0;}

    #uwfooter .padder {justify-content:space-around;padding:1em 0;}
    #uwfooter .padder div:first-child {flex-grow:0;}
}


/* tablets in portrait mode */
@media screen and (max-width:768px)
{ 
}

/* Phones */    
@media only screen 
and (min-width : 320px) 
and (max-width : 568px) 
{ 
    body {font-size:8pt}

    /*#fg-header {height:42px;}*/
    #fg-head-right a, #fg-head-right span {font-size:120%;}
    #auth-dlg .the_champ_login_container {display:block;}
    .the_champ_login_ul {flex-direction:column;}
}