/*   Aaron Klabunde,  JIMP STUDIO,  http://jimpstudio.com 
     Created 2013 July 28 
     Primary Styles (primary-styles.css) 
*/

@font-face {
 font-family: Muli;
 src: url("fonts/Muli/Muli-Regular.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: Muli;
 font-weight: bold;
 src: url("fonts/Muli/Muli-SemiBold.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: Muli;
 font-weight: bold;
 font-style: italic;
 src: url("fonts/Muli/Muli-SemiBoldItalic.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: Muli;
 font-style: italic;
 src: url("fonts/Muli/Muli-Italic.ttf") /* TTF file for CSS3 browsers */
}

body {
     margin: 0 auto;
     text-align: left; 
     font-size: 14px;
     font-family: Muli, Verdana, Geneva, sans-serif;
     line-height: 1.32em;
     background-color: #ecece9;
     color: #000;
}
header {
     margin: 0;
     padding: 6px 24px;
     font-weight: bold;
     text-shadow: 1px 1px 2px rgba(0,0,0, 0.2);
     text-align: center; 
     vertical-align: middle;
     position: relative;
     z-index: 900;
     color: #fff;
     background-color: #777;
     background: linear-gradient(to bottom, #555 0%, #777 100%); /* W3C Markup, IE10 Release Preview */
}
header a, nav a, .white a {
     text-decoration: none;
     color: #fff;
     opacity: 1.0;
     -moz-transition: opacity0.25s;
     -webkit-transition: opacity 0.25s;
     -o-transition: opacity 0.25s;
     transition: opacity 0.25s;
}
header a:hover, nav a:hover, .white a:hover {
     opacity: 0.5;
     -moz-transition: opacity0.25s;
     -webkit-transition: opacity 0.25s;
     -o-transition: opacity 0.25s;
     transition: opacity 0.25s;
}
form#login {
     display: inline-block;
     width: auto;
     padding: 3em;
     margin: 4em auto;
     text-align: right;
     border-radius: 4px;
     color: #fff;
     background-color: #777;
     /*text-shadow: 1px 1px 2px rgba(0,0,0, 0.2);*/
}
form#login input[type="submit"] {
     background-color: #fff;
     background-image: url('../images/gray/i-check.png');
     color: #333;
}
form#login input[type="submit"][class="cancel"] {
     background: #f4ca7a url('../images/gray/i-xout.png') 6px 4px no-repeat;
     background-size: 20px;
}
form#login img { 
     width: 280px;
}
nav {
     /*float: left;*/
     position: fixed;
     top: 0;
     vertical-align: top;
     display: block;
     /* max-width: 10%;
     min-width: 50px; */
     width: 180px;
     height: 100%;
     text-align: left;
     font-weight: bold;
     overflow-x: auto;
     
}
nav, th {
     color: #fff;
     background-color: #777;
     text-shadow: 1px 1px 2px rgba(0,0,0, 0.2);
}
nav ul li {
     margin: 2px 0.5em;
     padding: 0;
     border-bottom: 1px solid #aaa;
     vertical-align: middle
}
nav ul li a {
     display: block;
     text-decoration: none;
     padding: 10px 6px 12px 6px;
     overflow: hidden;
}
nav ul li:first-of-type {
     display: block;
     position: relative;
     top: 0;
     z-index: 999;
}
nav img.logo {
     z-index: 999;
     margin: 30px 0 1em 0;
     max-width: 100%;
     border-radius: 3px;
}
nav ul li ul li {
     border-left: 1px solid #777;
}
nav img#menu-button {
     display: none;
}

.popup-container {
     text-align: left;
     padding: 2em 3%;
}
.popup-container .close-popup {
     position: fixed;
     top: 0;
     right: 10px;
}
img {
     max-width: 100%;
}
.container {
     position: relative;
     top: 0;
     text-align: left; 
     vertical-align: top;
     display: inline-block;
     width: calc(99% - 200px);
     margin: 0 1% 0 200px;
}
.container.login {
     width: 100%;
     text-align: center;
     margin: 0;
}
.container.uploads,
.container.contact-details {
     text-align: center;
}
.container ol { 
     list-style-type: decimal; 
     margin-left: 4em;
}
.container ul { 
     list-style-type: circle; 
     margin-left: 4em;
}
ul li {
     margin: 1px 0 1px 30px;
}
form.comments div.default ul,
form.ecom-order-details ul {
     list-style-type: disc; 
     margin-left: 1em;
}
form.comments div.default ul li,
form.ecom-order-details ul li {
     margin: 1px 0 0.8em 1em;
}
ul.event-nav { 
     width: 400px; 
}
li#mini { 
     display: none;
     margin-bottom: 0;
     padding: 2px 8px 0 0;
}
li.drop {
     cursor: pointer;
     padding: 1px 6px;
}
li.drop ul {
     display: none;
     cursor: pointer;
}
li.drop2 ul {
     display: none;
     cursor: pointer;
}
.welcome {
     margin: 0.8em;
     padding: 1em;
     text-align: left;
}
.welcome ul {
     margin: 0;
}
.welcome ul li {
     margin: 0.6em 0 0.6em 1em;
}

blockquote {
     margin: 20px 60px;
     padding: 20px 30px;
     border: 2px solid #700;
     background-color: #f4f4f4;
}
a, .boguslink { color: #700; /*#215e5d;*/ 
     text-decoration: none;
}
label a { color: #700; }
i, em { font-style: italic; }
.float-right {
     float: right;
     text-align: right;
}
.float-left {
     float: left;
     text-align: left;
}
.hidden { display: none; }
.block { display: block; width: 100%; height: auto; }
.inline-block { display: inline-block; }
.center { text-align: center; }
.right-align, .right { text-align: right; }
.left-align, .left { text-align: left; }
.middle { vertical-align: middle; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
.red, .red a { color: #900; }
.red-bg { background-color: #f5ddcc; padding: 0.75em; }
.orange-bg{ background-color: #ffccaa; }
.yellow-bg { background-color: #fffce1; }
.green-bg { background-color: #9d9; }
.green { color: #070; }
.orange { color: #ff6f00; }
.gray { color: #555; }
.graylt { color: #888; }
.white, .fff { color: #fff; }
.black { color: #000; }
.bg-special td { background-color: #def; }
.big, big { font-size: 1.2em; line-height: 150%; }
.double { font-size: 1.8em; }
.bold, b, strong { font-weight: bold; font-weight: 900; }
.unbold { font-weight: normal; }
.unline a { text-decoration: none; }
.whiteline { border-bottom: 2px solid #fff; }
.noinput {
     margin: 3px 0;
     font-size: 1.1em;
     vertical-align:middle;
}
.small, small {
     font-size: 0.85em;
     font-weight: normal;
}
p.small {
     line-height: 1.0;
     margin: 0.2em;
}
.smallest {
     font-size: 0.7em;
     font-weight: normal;
}
.mh100 { 
     max-height: 100px; 
     overflow-y: scroll;
}
.mh160 { 
     max-height: 160px; 
     overflow-y: scroll;
}
.dash-form-results { 
     height: 200px; 
     overflow-y: auto; 
     overflow-x: hidden; 
     margin-right: 0;
     padding-right: 0.5em;
     -webkit-mask: linear-gradient(#000 80px, #0000);
     mask: linear-gradient(#000 80px, #0000);
}
.mh200 {
     height: 200px; 
     overflow-y: scroll;
}
.mh240 { 
     max-height: 240px; 
     overflow-y: scroll;
}
.h100 { height: 100px; }
.h160max { max-height: 160px; }
.h60 { height: 60px; }
.h90vh { /*height: calc(100vh - 80px); */ }
.wauto { width: auto; }
.w600 { width: 600px; }
.w540 { width: 540px; }
.w480 { width: 480px; }
.w400 { width: 400px; }
.w370 { width: 370px; }
.w360 { width: 360px; }
.w340 { width: 340px; }
.w320 { width: 320px; }
.w280 { width: 280px; }
.w240 { width: 240px; }
.w200 { width: 200px; }
.w160 { width: 160px; }
.w140 { width: 140px; }
.w120, input[type="text"].w120 { width: 120px; }
.w100 { width: 100px; }
.w80, input[type="text"].w80 { width: 80px; }
.w60 { width: 60px; }
.w40 { width: 40px; }
.w30 { width: 30px; }
.w20 { width: 20px; }
.w100prc { width: 100%; }
.mw100prc { max-width: 100%; }
.w90prc { width: 90%; }
.max600w { max-width: 600px; }
.max500w { max-width: 500px; }
.max320w { max-width: 320px; }
.max240w { max-width: 240px; }
.max120w { max-width: 120px; }
.min240w { min-width: 240px; }
.min80w { min-width: 80px; display: inline-block; }
.clear { clear: both;}
.pointer { cursor: pointer; }
.indent { margin-left: 30px; }
.invert30 { filter: invert(30%); }

.no-margin { margin: 0; }
.no-padding { padding: 0; }
.no-underline { text-decoration: none; }
.no-overflow { overflow: visible; }
/* pastels...
.bg-orange{ background-color: #fffacd; }
.bg-yellow { background-color: #ffffe0; }
.bg-red { background-color: #ffebcd; }
.bg-slate { background-color: #f9fffa; } */
.bg-red { background-color: #a44343; } /* #833 */
.bg-orange { background-color: #d73; }
.bg-yellow { background-color: #db2; }
.bg-yellow-lt { background-color: #f902; }
.bg-slate { background-color: #949f9f; }

.bg-white,
.bg-fff { background-color: #fff; }
.bg-eee { background-color: #f4f4f4; }
.bg-aaa { background-color: #aaa; }
.bg-ddd { background-color: #ddd; }
.bg-888 { background-color: #888; }
.bg-555 { background-color: #555; }
.bg-green { background-color: #216e4d; } /*  #090 */
.bg-teal, td.bg-teal { background-color: #425e5e; }
.bg-none { background-color: transparent; }
.border-none { border: 0; }
.border-light { border: 1px solid #fff; }
.dim { color: #888; }
.border-top-red { border-top: 0.5em solid #f5ddcc; }
.circle { border-radius: 50%; }
.margin { margin: 1.5em; }
.margin-none { margin: 0; }
.padding { padding: 1.5em; }
.lh-150 { line-height: 150%; }
.lh-200 { line-height: 200%; }

img.float-right,
img[style*="float: right"] {
    margin: 8px 0 8px 10px ;
}
img.float-left,
img[style*="float: left"] {
    margin: 8px 10px 8px 0;
}
.scroll-y { 
     overflow-y: auto; 
     overflow-x: hidden; 
     /*width: calc(100% + 20px);*/
     margin-right: 0;
}
.scroll-auto {
     overflow: auto;
}
p { margin: 1em 0; }
p.i-edit { margin: 0 0 -3px 0; }
p.i-edit a { 
     color: #fff;
     font-weight: bold;
     text-decoration: none;
}
.big-blocks p.center.gray,
.big-blocks p.center.paginate {
     margin: 0;
     padding: 1em;
     max-height: 80px;
     overflow-x: auto;
}
.big-blocks {
     display: inline-block;
     vertical-align: top;
     overflow-x: hidden;
     margin: 0 1em 1em 0;
     box-shadow: 3px 3px 12px #ccc;
     background-color: #f9f9f9;
}

.container.dashboard {
     text-align: center;
}
.container.dashboard .big-blocks {
     margin: 0 calc(25% - 400px) 3% 0;
     background-color: #fff;
     padding: 18px 1%;
     text-align: left;
     height: 532px;
     overflow-y: auto;
     vertical-align: top;
}
.container.dashboard .big-blocks .contact-count {
     overflow: auto;
     -webkit-mask: linear-gradient(#000 80%, #0000);
     mask: linear-gradient(#000 90%, #0000);
     height: 90%;
}
.container.dashboard .big-blocks .comment-block + div.small {
     margin: 10px 0 -10px 0;
}
.container.dashboard .big-blocks.stretch {
     min-height: 532px;
     height: auto;
}
#ecom-dash {
     display: inline;
}
#ecom-dash .big-blocks {
     height: auto;
     height: 308px;
     overflow: hidden;
}
#calendar-wrap {
     height: 568px;
     vertical-align: top;
}
#about-wrap {
     vertical-align: top;
     color: #555;
     line-height: 180%;
}
.container.dashboard #about-wrap ul {
     list-style-type: disc;
     margin-left: 0;
}
#about-wrap .big-blocks {
     width: 90%;
     margin: 0;
     padding: 30px 5%;
     height: calc(308px - 24px);
     overflow: hidden;
}
#about-wrap .big-blocks .scroll-auto {
     height: 100%;
     -webkit-mask: linear-gradient(#000 80%, #0000);
     mask: linear-gradient(#000 80%, #0000);
}

div.ecom-item-images p {
     margin: 2em 2em 1em 0;
}
h4.ecom-sku {
     margin: -1em 0 0 1em;
     color: #aaa;
}
div.ecom-subs {
     border-left: 2px solid #999;
     margin: 0 0 4em 4em;
}
div.ecom-subitem {
     background-color: #fff;
     box-shadow: -2px 2px 8px #5557;
     margin: 0 0 3em 4em;
     padding: 2em;
}
div.ecom-item-descrip {
     border: solid #ddd;
     border-width: 1px 0 1px 0;
     margin-right: 2em;
}
form#role-editor div.ecom-subitem {
     background-color: transparent;
}

@media screen and (min-width: 2200px) { 
     #dash-wrap {
          max-width: 2340px;
          margin: 0 auto;
     }
     .container.dashboard #calendar-wrap,
     #about-wrap {
          width: calc(33%);
     }
     .container.dashboard .big-blocks {
          margin: 0 calc(23% - 440px) 3% 0;
     }
}
@media screen and (max-width: 1860px) { 
     #dash-wrap {
          width: 1136px;
          margin: 0 auto;
     }
     .container.dashboard .big-blocks {
          margin: 0 calc(33% - 350px) 3% 0;
     }
     .container.dashboard #calendar-wrap,
     #about-wrap {
          width: 63%;
          float: left;
          margin: 0 0 0 1%;
     }
     #about-wrap {
          margin-top: -532px;
     }
     #about-wrap .big-blocks {
          height: 438px;
     }
     #ecom-dash {
          display: inline-block;
          width: 344px;
          margin-left: -6px;
     }
     #ecom-dash .big-blocks {
          padding: 18px 3.5%;
          margin: 0 0 10% 0;
     }
}
@media screen and (max-width: 1360px) { 
     #dash-wrap {
          width: 800px;
          margin: 0 auto;
     }
     .container.dashboard .big-blocks {
          margin: 0 18px 3% 0;
     }
     .container.dashboard .big-blocks:nth-of-type(4) {
          width: 85%;
     }
     .container.dashboard #calendar-wrap {
          width: 87%;
          float: none;
          margin: 0 0 0 -14px;
     }
     #about-wrap {
          width: 42%;
          float: left;
          margin: 0 0 0 45px;
     }
     #about-wrap {
          margin-top: 34px;
     }
     #about-wrap .big-blocks {
          height: 1004px;
     }
     #ecom-dash {
          display: inline-block;
          width: 336px;
          margin-left: -35px;
          margin-top: 34px;
     }
     #ecom-dash .big-blocks {
          padding: 12px 8px;
          margin: 0 0 10% 0;
     }
}
@media screen and (max-width: 1010px) { 
     #dash-wrap {
          width: auto;
          margin: 0 auto;
     }
     #ecom-dash {
          margin-left: 0;
     }
}
.container.dashboard #scroll-calendar.big-blocks {
     width: 100%;
     margin: 0;
     padding: 0;
     text-align: center;
     height: 100%;
}
.container.contact-details .big-blocks#comment-column,
.container.contact-details .big-blocks#upload-column {
     overflow-x: visible;
     box-shadow: 0 0 0 transparent;
     background-color: transparent;
}
div.list-submits {
     border-bottom:3px dotted #eee;
     box-shadow: 0 0 0 transparent;
     background-color: transparent;
}

/* BEGIN Bar Graph used for Tasks on Dash (home page) */
.graph-block { 
     width: 100%;
     min-height: 60px;
     max-height: 60px;
     margin: 10px;
     overflow-x: hidden;
     overflow-y: auto;
     transition: max-height 0.5s;
     -webkit-mask: linear-gradient(#0009, #0003);
     mask: linear-gradient(#0009, #0003);
}
.graph-block.show {
     transition: max-height 1s;
     max-height: 200px; 
     -webkit-mask: linear-gradient(#000 130px, #0003);
     mask: linear-gradient(#000 130px, #0003);
}
.graph-block ul { list-style-type: none; margin: 0; }
.graph-block ul li { margin: 0 0 1em 0; }
.graph-block ul li em { margin-left: 1.5em; }
/* for contact-details page */
.graph-block.inline-block { 
     width: 320px; 
     vertical-align: top;
}

.bar-graph-border {
     display: inline-block;
     border: 0 solid #aaa;
     border-radius: 2px;
     box-shadow: 2px 2px 8px #0005;
}
.bar-graph { 
     text-align: right;
     cursor: pointer;
}
.bar-graph div div { 
     display: inline-block; 
     width: 180px; 
     text-align: left;
     border-radius: 2px;
}
.bar-graph .bg-red ,
.bar-graph .bg-orange ,
.bar-graph .bg-yellow ,
.bar-graph .bg-slate { display: inline-block; }

.bar-graph span b { 
     padding: 3px 6px 3px 3px; 
     overflow: visible;
     font-weight: bold;
}
.dash-report .bar-graph { 
     margin: 1em 0;
     cursor: default;
}

.border-red { border: 4px solid #a44343; } /* #833 */
.border-orange { border: 4px solid #d73; }
.border-yellow { border: 4px solid #db2; }
.border-slate { border: 4px solid #949f9f; }

.border-red,
.border-orange,
.border-yellow,
.border-slate { 
     background: repeating-linear-gradient(
       45deg,
       #f4f4f4,
       #f4f4f4 16px,
       transparent 16px,
       transparent 20px );
}
/* pastels...
.border-red { border: 4px solid #ffebcd; }
.border-orange { border: 4px solid #fffacd; }
.border-yellow { border: 4px solid #ffffe0; }
.border-slate { border: 4px solid #f9fffa; }*/


/* END Bar Graph */

/* BEGIN Stat Circles */
.stat-block {
     display: block;
     position: relative;
     z-index: 99;
     background: linear-gradient(to bottom, 
          rgba(255,255,255,0) 0,
          rgba(255,255,255,0.85) 30px,
          rgba(255,255,255,1) 80px,
          rgba(255,255,255,1) 100% );
}
.stat-block h3 {
     padding-top: 1.2em;
     text-shadow: 0 0 2px #fff; 
}
/*.stat-block:first-of-type h3 {
     padding-top: 0;
}*/
.stat-block h3 a {
     text-decoration: none;
     color: inherit;
}
.stat-circle {
     vertical-align: middle;
     margin-top: 4px;
     margin-left: 1.25em;
     background: linear-gradient(to bottom, 
          rgba(255,255,255,0) 0,
          rgba(255,255,255,0.85) 30px,
          rgba(255,255,255,1) 80px,
          rgba(255,255,255,1) 100% );
}
.stat-circle a {
     text-decoration: none;
     color: inherit;
     border-bottom: 1px solid transparent;
     padding: 0 0 0.05em 0;
     /* for dark colors...
     background: linear-gradient(to top, 
          rgba(244,244,244,1) 0%,
          rgba(244,244,244,0.5) 80%,
          rgba(244,244,244,0.1) 100%); */
}
.stat-circle a:hover {
     border-bottom: 1px solid #aaa;
     color: #555;
     transition: color 0.3s, border-bottom 0.3s;
}
.stat-circle div {
     display: inline-block;
     text-align: left;
     vertical-align: top;
     box-shadow: 0 0 1px rgba(221, 221, 221, 1); 
     box-shadow: 3px 3px 1px #aaa;
     border-radius: 2px 50% 50% 50%;
     min-width: 2em;
     min-height: 2em;
}
.stat-circle div b {
     padding-left: 0.5em;
}
/* END Stat Circles */


p.paginate a {
     background-color: #555;
     border-radius: 2px;
     color: #fff;
     font-weight: bold;
     line-height: 220%;
     padding: 0.4em 0.7em;
     text-decoration: none;
     display: inline-block;
     border: 1px solid #ecece9;
}
p.paginate a:hover, p.paginate a.active {
     background-color: #ccc;
}
p.paginate.compress a {
     width: 12px;
     color: #555;
     overflow: hidden;
     margin: 0;
     padding: 0;
}
p.paginate.compress.pg25 a { width: 10px; }
p.paginate.compress.pg50 a { width: 8px; }
p.paginate.compress.pg75 a { width: 6px; }
p.paginate.compress.pg100 a { width: 4px; }
p.paginate.compress.pg125 a { width: 2px; }

p.paginate.compress a:first-of-type,
p.paginate.compress a:last-of-type,
p.paginate.compress a.active,
p.paginate.compress a:hover {
     color: #fff;
     width: auto;
     padding: 0.4em 0.7em;
}

/*tr.red-bg td,
tr.bg-yellow td { background-color: transparent; } */
form.upload {
     background-color: #f4f4f4;
     padding: 1em;
}
form.filter {
     padding: 1em;
     vertical-align: top;
}
/*.filter input, .filter select {
     padding-right: 2em;
} */
.container.contact-details form.comments,
form.upload {
     margin: 0 0 1em 0;
     box-shadow: 3px 3px 12px #ccc;
}
.comment-block {
     margin:0;
     padding: 1em;
     overflow-x: hidden;
}
.sub-comment {
     margin: -1em 1em 1em 40px;
}
.comment-block textarea.fixed {
     padding: 0;
     margin: 0;
     border: 0;
     font-family: inherit;
     font-style: italic;
     font-size: 1.1em;
     display: block;
     width: 98%;
     margin-left: 1%;
     height: auto;
     background-color: transparent;
     resize: none;
     text-align: left;
     color: #600;
}
.comment-block #flex-text {
     text-align: center;
     overflow-y: hidden; /* prevents scroll bar flash */
     padding-top: 1.1em; /* prevents text jump on Enter keypress */
}
.comment-block .title-text {
     font-weight: bold;
     font-size: 1.2em;
     font-family: inherit;
     color: #777;
     background-color: transparent;
     border: 0;
     width: 90%;
     vertical-align: middle;
}
.contact-card div.bg-eee ,
.card div.bg-eee {
     margin: 0;
}
.card, .contact-card {
     display: inline-block;
     margin: 0 1em 1em 0;
     box-shadow: 3px 3px 12px #ccc;
     /*border: 1px solid #aaa;*/
     vertical-align: top;
}
.contact-card p {
     display: inline-block;
     vertical-align: top;
     padding: 10px 3px 10px 10px;
     margin: 0;
     /*background-color: #f4f4f4;*/
     width: 234px; /*194px;*/
     overflow: hidden;
}
.contact-card p.profile-box {
     width: 138px;
     /*margin-right: 0.1em;
     margin: 0;
     border-right: solid #aaa 2px;*/
}

.contact-card .primary-data {
     height: 224px;
     overflow: hidden;
}

.card p {
     display: inline-block;
     vertical-align: top;
     padding: 0.8em;
     margin: 0;
     /*background-color: #f4f4f4;*/
     width: 138px;
     overflow: hidden;
}
.card p:first-of-type {
     width: 160px;
     /*margin-right: 0.1em;
     margin: 0;
     border-right: solid #aaa 2px;*/
}

.card p.block, .contact-card p.block {
     display: block;
     /*width: 70%;*/
     margin-left: 25%;
}
.contact-card .more-contacts {
     max-height: 24px;
     overflow: hidden;
     transition: max-height 0.25s;
}
.contact-card .more-contacts b {
     display: block;
     height: 24px;
     cursor: pointer;
     color: #fff;
     font-weight: bold;
}
.contact-card div.all {
     max-height: 2400px;
     overflow: visible;
     transition: max-height 0.7s;
}
.contact-card p.profile-box img {
     width: 100%;
     overflow: hidden;
}
.contact-card p.profile-box img.w80 {
     max-width: 80px;
     max-height: 80px;
}
.contact-card p img.icon {
      /*background-color: #555;*/
      margin: 0 0 0.4em 0.4em ;
      padding: 2px;
      border-radius: 2px;
      float: right;
}
.contact-card p img.w20 {
     margin: 0 0.6em -0.3em 0;
}
.contact-card b a {
     line-height: 140%;
     text-decoration: none;
}
.contact-card a {
     text-decoration: none;
}
.para-list {
     width: 100%;
     background-color: #f4f4f4;
     border-bottom: 1px solid #fff;
}
.para-list p {
     display: inline-block;
     width: 18%;
     padding: 0.5em 1%;
     overflow: hidden;
     box-shadow: #f4f4f4 -1em 0 1em 0;
}
.para-list p:first-of-type {
     display: inline-block;
     width: 90px;
     box-shadow: transparent 0 0 0 0;
}
.para-list p:last-of-type {
     display: inline-block;
     width: auto;
}
.icon, img.float-left.icon { 
     height: 20px; 
     width: 20px;
     margin: 0 0.4em 0 0;
     vertical-align: middle;
     position: relative;
     top: -2px;
}
label .icon,
.ext-radios img {
     filter: invert(30%);
}
label a .icon,
label button .icon {
     filter: invert(0);
}

form.filter label {
     width: auto;
     text-align: left;
}

.icon-sm { 
     height: 16px; 
     width: 16px;
     margin: 0 0.2em 0 0;
     vertical-align: middle;
}
q#toggle-q1 {
     display: inline-block;
     margin-top: 3px;
     float: right;
     color: #fff;
     background-color: #900;
     border-radius: 50%;
     text-align: center;
     font-size: 1em;
     font-weight: 900;
     height: 1.5em;
     width: 1.5em;
     cursor: pointer;
}
q.alert {
     display: inline-block;
     float: none;
     color: #000;
     font-weight: normal;
     /*text-shadow: 0 0 3px rgba(0,0,0, 1.0);*/
}
h1 {
     text-align: left;
     margin: 1em 0 0.8em 0;
     font-size: 1.4em;
     font-weight: bold;
     color: #999;
}
h2 {
     text-align: left;
     margin: 1em 0 0.8em 1em;
     font-size: 1.2em;
     font-weight: bold;
     color: #656565;
}
.welcome h2{
     margin: 1em 0;
}
h3 {
     text-align: left;
     margin: 0;
     padding: 1em 0 0.8em 0;
     font-size: 1.2em;
     font-weight: normal;
     color: #555;
}
h3.pointer {
     color: #700;
}
h4 {
     text-align: left;
     padding: 0;
     margin: 0.5em;
     font-size: 1.1em;
     font-weight: bold;
     color: #555;
}
h5 {
     text-align: left;
     padding: 0;
     margin: 0.5em 0.5em 0 0.5em;
     font-size: 1em;
     font-weight: bold;
     color: #222;
}
form textarea, form input[type='radio'], form input[type='checkbox'], form select {
     vertical-align: middle;
}
/*
form#event-details, form#page-details, form#inquiry-details, form#contact-details, form#event-timeline {
     background-color: #ddd;
     padding: 8px 10px;
} */
label,
form#new-user label {
     margin: 3px 12px 3px 0;
     display: inline-block;
     vertical-align: middle;
     width: 140px;
     color: #555;
     font-weight: bold;
     text-align: right;
}
form.backup label {
     display: block;
     width: auto;
     text-align: left;
}
form.backup label input[type="checkbox"] {
     margin: 0.4em 1em;
}
div.label-block {
     margin: 2px 0;
     display: inline-block;
     vertical-align: middle;
}
/*
div.bar-graph {
     margin: 0 3px -20px 3px;
     vertical-align: bottom;
     background-color: #090;
}
div.graph-col {
     display: inline-block;
     margin-bottom: 20px;
} */
div.bg-label {
     margin: 0;
     display: inline-block;
     line-height: 100%;
     padding: 3px;
}
form div.label-block label {
     margin: 2px 3px;
     display: inline;
     vertical-align: middle;
     width: 220px;
     color: #000;
     font-weight: normal;
     text-align: right;
}
table {
     text-align: center;
     width: auto;
}
tr {
     background-color: #f4f4f4;
}
th {
     color: #fff;
     border-right: 1px solid #fff;
     padding: 5px;
     font-weight: normal;
     border-radius: 4px 5px 0px 0px ;
     background-color: #425e5e;
}
td {
     border-right: 1px solid #fff;
     border-bottom: 1px solid #fff;
     border-top: 2px solid #fff;
     margin: 2px;
     padding: 4px;
     background-color: #f4f4f4;
}
.fulfillist label:hover {
     text-decoration: underline;
     cursor: pointer;
}
footer {
     clear: both;
     margin: 60px 0 20px 0;
     text-align: center;
}
footer, footer a {
     color: #777;
}

input[type="text"],
input[type="password"] {
     width: 175px;
}
.button-row a b {
     font-size: 20px;
}
textarea, 
select,
input,
label.button,
a.button,
b.button,
button {
     padding: 3px 6px;
     margin: 0.5em 0;
     background-color: #fff;
     border: 4px solid #fff;
     border-radius: 3px;
     box-shadow: 1px 1px 5px #ccc;
}
label.button,
a.button,
b.button,
button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
     display: inline-block;
     font-family: Muli, Verdana, Geneva, sans-serif;
     margin: 1em 0.5em;
     vertical-align: middle;
     padding: 6px 4px 4px 4px;
     border: 0;
     color: #fff;
     opacity: 1.0;
     -moz-transition: opacity 0.25s;
     -webkit-transition: opacity 0.25s;
     -o-transition: opacity 0.25s;
     transition: opacity 0.25s;
     font-weight: bold;
     font-size: 14px;
     text-decoration: none;
     text-align: left;
     /*background-color: #215e5d;*/
     background-color: #555;
     line-height: 100%;
}
a.button.margin-none,
b.button.margin-none,
button.margin-none {
     margin: 0;
}
label.button:hover,
a.button:hover,
b.button:hover,
button:hover,
input:hover[type="reset"],
input:hover[type="submit"],
input:hover[type="button"] {
     cursor: pointer;
     opacity: 0.6;
     -moz-transition: opacity 0.25s;
     -webkit-transition: opacity 0.25s;
     -o-transition: opacity 0.25s;
     transition: opacity 0.25s;
}
input:focus,
button:focus,
select:focus,
textarea:focus  {
     box-shadow: #777 0 0 5px 0;
}
label.button:focus,
a.button:focus,
b.button:focus,
button:focus,
input:hover[type="reset"],
input:hover[type="submit"],
input:hover[type="button"] {
     box-shadow: 1px 1px 6px #999;
     /* background-color: #ffff7d; */
     border: 0;
}
b.button.arrow {
     background-color: #888;
     display: inline-block;
     width: 20px;
     text-align: center;
     vertical-align: baseline;
     margin: 0 0.25em;
}

input#toggler + form#search {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s;
}
input#toggler:checked + form#search {
     max-height: 3000px;
     overflow: auto;
     transition: max-height 0.3s;
}
/* this is used for simple toggle  */
button.toggle b { display: inline-block; width: 0; overflow: hidden; text-align: center; }
button.toggle b.on { width: 100%; }
button.toggle:hover { opacity: 1; background-color: #555; }
button.toggle:hover b.on { width: 0; display: none; }
button.toggle:hover b { width: 100%; }
button.toggle-none:hover { background-color: #090; cursor: default; opacity: 1; }

a.button-green { background-color: #216e4d; }
a.bg-orange{ background-color: #ff6f00; }
a.bg-yellow { background-color: #a83; }
a.bg-white { background-color: #fff; }
a.bg-red { background-color: #833; }
a.bg-eee { background-color: #f4f4f4; }

a.common-form-input {
     padding: 3px 6px;
     margin: 2px 5%;
     width: 85%;
     display: block;
     text-align: left;
}

a.common-form-input b {
     float: right;
     font-style: italic;
}
/*
input[type="file"] {
     background: #216e4d url('../images/white/i-attach.png') 6px 4px no-repeat;
     background-color: #777;
     background-size: 20px;
} */
input[type="submit"] {
     background: #216e4d url('../images/white/i-check.png') 6px 4px no-repeat;
     background-size: 20px;
     padding-left: 2.6em;
     padding-bottom: 9px;
}
input[type="submit"][name="search"] {
     background: #555 url('../images/white/i-search.png') 6px 4px no-repeat;
     background-size: 20px;
}
input[type="submit"][class="delete"] ,
input[type="submit"][class="delete-button"] {
     background: #833 url('../images/white/i-xout.png') 6px 4px no-repeat;
     background-size: 20px;
}
input[value="Upload"] {
     /*background: #215e5d url('../images/white/i-upload.png') 6px 4px no-repeat;*/
     background: #216e4d url('../images/white/i-upload.png') 6px 4px no-repeat;
     background-size: 20px;
}
input[name="download"] {
     background: #555 url('../images/white/i-backup.png') 6px 4px no-repeat;
     background-size: 20px;
}
input[type="file"]:focus,
input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus {
     box-shadow: #999 0 0 5px 0;
}
input.zero-margin, a.zero-margin {
     margin: 8px 0;
}
input[type="radio"] {
     display: inline-block;
     overflow: hidden;
}
input[type="radio"].hidden {
     display: none;
}
div.select-box {
     padding: 1px 1em;
     width: auto;
     border: 4px solid #fff;
     border-radius: 3px;
     box-shadow: 1px 1px 5px #ccc;
}
.actions input[type="text"], 
.actions textarea, 
.actions select {
     vertical-align: top;
     margin: 2px 0;
     padding: 0;
     width: 100%;
}
.actions {
     width: 100%;
}
.actions td {
     max-width: 280px;
}

.hide { 
     max-height: 0; 
     overflow: hidden; 
     transition: max-height 0.25s; 
}
.show,
input:checked + .hide,
.show-child + ul.hide { 
     height: auto;
     max-height: 1100px;
     transition: max-height 1s; 
}
.com-new.show {
     padding: 0 4px;
}
input + .hide#card-element {
     width: 0;
     padding: 0;
     margin: 0;
}
input:checked + .hide#card-element {
     width: auto;
     padding: 1em;
     margin: 1em;
}
div.role-select {
     display: inline-block;
     background-color: #fff;
     overflow-y: auto;
     border-radius: 3px;
     padding: 0;
     width:auto;
     text-align:left;
     box-shadow: 0 0 5px #ccc;
     margin: 4px 1em 0 0;
     position: relative;
}
div.role-select div {
     padding: 8px;
}
div.role-select > label,
form.comments div.role-select > label {
     display: block;
     position: sticky;
     padding: 5px 8px 8px 8px;
     margin: 0;
     margin-bottom: 0;
     top: 0;
     font-size: 1.1em;
     background-color: #fff;
     box-shadow: 0 6px 6px #ddd;
     border-bottom: 1px solid #ccc;
     border-radius: 2px;
}
div.role-select:has(input#roles-expand) {
     height: 29px;
     overflow: hidden;
}
div.role-select:has(input#roles-expand:checked) {
     height: 400px;
     overflow: auto;
     margin-bottom: -380px;
     box-shadow: 0 0 20px #aaa;
}
form.comments div.role-select:has(input#roles-expand:checked) {
     height: 340px;
     overflow: auto;
     margin-bottom: -320px;
}

#domain-hosting ~ div.inline-block {
     display: none;
}

table.top textarea {
     min-height: 204px;
}
table.mid textarea {
     min-height: 104px;
}
table.low textarea {
     min-height: 72px;
}
table.low tr.h40 textarea {
     min-height: 40px;
}
table.low td:first-of-type, table.low td:last-of-type  {
     width: 220px;
}
.actions td {
     padding: 0 4px;
}
.actions input,  
.actions select {
     text-align: center;
}
.actions td.t-list {
     line-height: 110%; 
}
.actions td.t-list input[type="radio"] {
     padding: 0 4px;
     margin: 0;
     display: inline;
     text-align: left;
}

.form-settings label {
     margin-left: 0.5em;
}
/*.form-settings input, */
.form-settings textarea {
     width: 280px;
     height: 110px;
}
.form-settings div.inline-block input {
     width: auto;
}
#mapid {
     border: 5px solid #f4f4f4;
     width: 390px;
}

div.page-editor {
     width: 980px;
}
div.page-editor textarea#description {
     width: 15em; /* fallback */
     width: 50%;
     height: 60px;
}
div.wysiwyg {
     display: inline-block;
     width: 800px; /* fallback */
     width: calc( 100% - 164px );
     vertical-align: middle;
     margin: 0.5em 0;
     border: 0 solid #fff;
     border-radius: 3px;
     box-shadow: 1px 1px 5px #ccc;
}
div.wysiwyg.w600 {
     width: 600px;
}
.comment-block div.wysiwyg {
     display: block;
     width: 100%;
     margin-bottom: 1em;
}
div.wysiwyg .cke_chrome {
     border: 0;
     box-shadow: none;
}
div.wysiwyg .cke_top,
div.wysiwyg .cke_bottom {
     border: 1px solid #fff;
     box-shadow: none;
     background: #fafafa;
}
div#cke_sponsors:focus, div#cke_map_custom:focus, div#cke_contact_info:focus, div#cke_description:focus {
     border: 1px solid #700;
     box-shadow: 1px 1px 4px rgba(100, 20, 20, 0.6);
}
.cke_source {
  white-space: pre-wrap !important; 
}
iframe {
     width: 100%;
     height: 600px;
}
form.inquiries textarea, form.inquiries select, form.inquiries input[type='radio'], form.inquiries input[type='checkbox']  {
     vertical-align: top;
}
input[type="text"].phone_a,
input[type="text"].phone_b,
input[type="text"].phone_x {
     width: 3em;
}
input[type="text"].phone_c {
     width: 4em;
}
.inline-box-clear {
     padding: 0;
     margin: 0;
     display: inline-block;
     vertical-align: top;
} 
.inline-box {
     margin: 0.75em;
     display: inline-block;
     width: auto;
     vertical-align: top;
     /* padding: 0 0.5em 0.5em 0; */
     padding: 1em;
     text-align: left;
     /*background-color: #f4f4f4;*/
	border-radius: 3px;
} 
.inline-box p {
     margin: 0 0.5em;
} 
.inline-box h4 { 
     margin: 0.1em 0.5em;
}
/*.container.contact-edit .inline-box,
.container.orders .inline-block.bg-eee {
     box-shadow: 3px 3px 12px #ccc;
}*/
.container .inline-box.bg-eee,
.container .inline-block.bg-eee,
.container.order-details .bg-eee,
.container.expense-order-details .bg-eee,
.container.report-editor .contact-row {
     box-shadow: 3px 3px 12px #ccc;
}
.container.report-editor .contact-row {
     background-color: #fefefe;
     border-bottom: 2px solid #ccc;
     display: inline-block;
}
.container.report-editor .contact-row > div {
     background-color: #fefefe;
     box-shadow: 0 0 0 #ccc;
     border-right: 0 solid #ccc;
}
.container.report-editor form.query > div.comment-block {
     margin: 2em 2% 2em 0;
}
div.facili {
     border: 1px solid #fff;
     border-radius: 4px;
     vertical-align: middle;
     height: 60px;
     width: 220px;
     background: transparent;
     overflow-y: scroll;
}
.toggle-ib1, .toggle-ib2 { 
     max-height: 16px; 
     overflow: hidden;
     -moz-transition: max-height 0.8s;
     -webkit-transition: max-height 0.8s;
     -o-transition: max-height 0.8s;
     -ms-transition: max-height 0.8s;
     transition: max-height 0.8s;
}
.toggle-ib1-show, .toggle-ib2-show {
     max-height: 800px;
}
.toggle-q1, .toggle-q2 { 
     margin: 0.75em 0;
     padding: 0 0.5em;
     overflow: hidden;
     max-height: 1px;
     color: transparent;
     background-color: transparent;
     visibility: hidden; 
     text-align: left;
     -moz-transition: max-height 0.6s, visibility 0.6s, padding 0.6s, color 0.6s, background-color 0.6s;
     -webkit-transition: max-height 0.6s, visibility 0.6s, padding 0.6s, color 0.6s, background-color 0.6s;
     -o-transition: max-height 0.6s, visibility 0.6s, padding 0.6s, color 0.6s, background-color 0.6s;
     -ms-transition: max-height 0.6s, visibility 0.6s, padding 0.6s, color 0.6s, background-color 0.6s;
     transition: max-height 0.6s, visibility 0.6s, padding 0.6s, color 0.6s, background-color 0.6s;
}
.toggle-q1 a, .toggle-q2 a { 
     color: transparent;
     -moz-transition: color 1.0s;
     -webkit-transition: color 1.0s;
     -o-transition: color 1.0s;
     -ms-transition: color 1.0s;
     transition: color 1.0s;
}
.toggle-q1-show a, .toggle-q2-show a { color: #009; }
.toggle-q1 q#toggle-q1, .toggle-q2 q#toggle-q2 { visibility: visible; }
.toggle-q1-show, .toggle-q2-show {
     padding: 0.5em;
     max-height: 1200px;
     color: #000;
     background-color: #f5ddcc;
     visibility: visible;
}

h4 label#toggle-ib1, h4 label#toggle-ib2 {
     width: 90%;
     text-align: left;
     padding: 0;
     margin: 0em;
     font-weight: bold;
}
.h-contacts {
     display: inline-block;
     vertical-align: top;
     border-right: 4px solid #fff;
     padding: 0 8px 8px 4px;
     margin-top: 32px;
}
.h-contacts span {
     vertical-align: middle;
     margin: 0 0 0 16px;
     font-weight: bold;
}
.uploads-col {
     display: inline-block;
     vertical-align: top;
     margin: 0;
}
.big-blocks .uploads-col {
     background-color: transparent;
}
.uploads-col .thumb-viewer {
     box-shadow: 3px 3px 12px #ccc;
}
.thumb-viewer {
     margin: 1em 1em 2em 1em;
     display: block;
     vertical-align: top;
     padding: 12px;
     text-align: center;
     background-color: #f4f4f4;
     /*box-shadow: 3px 3px 1px #aaa;*/
     width: 216px;
}
form.form-demo .thumb-viewer {
     background-color: #fff;
}
.thumb-viewer p {
     text-align: left;
}
.big-blocks .thumb-viewer {
     margin: 0 0 1em 0 ;
}
.thumb-viewer p {
     max-width: 100%;
}
.thumb-viewer p.right {
     text-align: right;
}
.thumb-viewer img {
     max-width: 100%;
     max-height: 260px;
}
div.sizes {
     display: block;
     position: relative;
     top: 0;
     margin: 0;
     width: 220px;
     text-align: center;
     font-size: 0.8em;
}
div.sizes a {
     display: inline-block;
     padding: 0.5em 1em;
     margin: 0 0.1em;
     background-color: rgba(70, 70, 70, 1);
     text-decoration: none;
     color: #fff;
     font-weight: bold;
}
div.sizes a:hover {
     background-color: rgba(150, 150, 150, 1);
}
/* Role Editor, Item Editor */
#role-editor div.form-sort-blocks {
     margin: 4px 0;
     padding: 1em 0.25em 1em 1em;
     border: 2px dashed #fff;
     cursor: move;
}
#role-editor div.top {
     margin: 0;
     border-bottom: 0 solid #fff;
}
#role-editor.ecom-item-edit label {
     width: 140px;
}
#role-editor.ecom-item-edit label.cancel ,
#role-editor.ecom-item-edit label.delete ,
#role-editor label {
     width: auto;
}
#role-editor .cancel , 
#role-editor .delete {
     margin: 0;
     padding: 0;
     width: 0;
     height: 0;
     max-height: 0;
     opacity: 0;
     overflow: hidden;
     transition: max-height 0.5s, opacity 0.5s, overflow 0.5s; /* max-height 1s, */
}
#role-editor .delete.show ,
#role-editor input[value="cancel"]:checked + label.delete , 
#role-editor input[value="delete"]:checked + label.cancel ,
#role-editor input[value="delete"]:checked ~ p.red {
     margin:  0;
     height: auto;
     width: auto;
     max-height: 400px;
     opacity: 1;
     overflow: visible;
     transition: max-height 0.5s, opacity 0.5s, overflow 0.5s; /* max-height 1s, */
}
#role-editor input[value="delete"]:checked ~ p.red {
     width: auto;
}

/* Calendar */
#close-calendar {
     display: none;
}
#close-calendar.show-close {
     display: block;
     text-align: center;
     position: fixed;
     font-size: 20px;
     font-weight: bold;
     color: #fff;
     top: 0;
     left: 0;
     padding-top: calc(10% - 24px);
     width: 100%;
     overflow: hidden;
     z-index:99999;
}
div#pop-up-calendar {
     display: none;
}
div#pop-up-calendar.pop-up {
     display: block;
}
.calendar {
     text-align: center;
     background-color: #fff;
     position: relative;
     top: 0;
     height: 560px;
     overflow-y: scroll;
     overflow-x: hidden;
     /* ??? width: calc(100% + 20px); */
     z-index: 789;
}
.calendar h3 {
     text-align: center;
     margin: 1em 0 0 0;
     padding: 1em 0 2px 0;
     font-weight: bold;
     font-size: 2em;
     color: #999;
     vertical-align: baseline;
}
.day-name {    
     width: 13%;
     display: inline-block;
     margin: 2px 1px;
     height: auto;
     color: #777;
     font-weight: bold;
}
.day-null {    
     width: 13%;
     display: inline-block;
     margin: 2px 1px;
     height: 8px;
     vertical-align: top;
}
.day-full {    
     width: 13%;
     display: inline-block;
     margin: 2px 1px;
     height: 80px;
     background-color: #fafafa;
     vertical-align: top;
     text-align: right;
     /*transition: width 0.3s;*/
} 
.day-full q {
    font-weight: 900;
    color: #555;
}
.day-full q small,
.day-full-expand q small {
     border-radius: 50%;
     display: inline-block;
     vertical-align: middle;
     padding: 0 1px 1px 1px;
     font-size: 0.8em;
     margin: 0 1px 1px 0;
}
.day-full-expand q small {
     font-size: 0.8.5em;
     padding: 0 3px 1px 3px;
}
.day-full .showcase {
     border: 1px solid #900;
}
.day-full-expand .showcase {
     border: 2px solid #900;
}
.day-full p {
     margin: 1px;
}
.day-full-expand p {
     margin: 1em;
     padding: 0.6em;
}
.day-full p span, .day-full p i {
     display: none;
}
.day-full:hover {
     background: #f4f4f4 url('../images/white/i-search.png') 0 0 no-repeat;
     background-size: 20px 20px;
     cursor: zoom-in;
}
.day-full-expand {
     background: #f4f4f4 url('../images/gray/i-xout.png') 0 0 no-repeat;
     background-size: 20px 20px;
}
.day-full-expand:hover {
     cursor: zoom-out;
}
.day-full-expand h4 {
     cursor: pointer;
     margin: 2em 1em;
}
.grid-row {    
     width: 90%;
     /*transition: width 0.3s;*/
     min-height: 80px;
     height: auto;
}
.day-full.day-full-expand p span, .day-full.day-full-expand p i, .grid-row p span, .grid-row p i {
     display: inline;
}
.day-full .number {
     line-height: 100%;
     width: 50%;
     display: inline-block;
     margin: 0;
     padding: 0;
     overflow: hidden;
}
.day-full .number b {
     font-weight: bold;
     color: #777;
     padding: 0 1px 2px 8px;
     cursor: pointer;
}
.day-full .number b:hover {
     color: #000;
}
.day-full .number b.red {
     color: #a44;
}
.day-full .number b.dark {
     color: #222;
}
.day-full .items {
     font-size:0.9em;
     line-height: 100%;
     text-align: left;
}
.day-full .items a {
     text-decoration: none;
}
.day-full-expand, .day-full-expand.grid-row { 
     display: block;
     margin: -548px 0 0 0;
     position: relative;
     top: 0;
     left: 6px;
     height: 540px;
     text-align: center;
     box-shadow: 0 0 2em #999;
     overflow-y: auto;
     z-index: 999;
}
/*#pop-up-calendar .day-full-expand { 
     display: inline-block;
}*/
.day-full-expand .items, .day-full-expand.grid-row .items {
     font-size: 1em;
     text-align: left;
     
}
#grid-row-toggle {
     position: relative;
     margin-bottom: -24px;
     margin-left: 2px;
     z-index: 879;
}
.pop-up #grid-row-toggle {
     display: inline-block;
     vertical-align: top;
     position: absolute;
     left: 50%;
     margin-bottom: -32px;
     text-align: center;
     z-index: 879;
     clear: both;
}
.toggle-row {
     background: transparent url('../images/white/i-text.png') 0 0 no-repeat;
     background-size: contain;
     width: 20px;
     height: 20px;
     box-shadow: 0 0 2px #aaa;
}
/*.pop-up .toggle-row {
     margin-left: -350px;
}*/
.toggle-grid {
     background: transparent url('../images/white/i-grid.png') 0 0 no-repeat;
     background-size: contain;
}
.calendar .weekend {
     background-color: #f1f1f1;
}
.calendar .today {
     background-color: #eafafa;
     /*background-color: #f9fffa;*/
}

/* Clock */
div#pop-up-clock {
     display: none;
}
div#pop-up-clock.pop-up {
     display: block;
}
div.clock {
	text-align: center;
	border: 4px solid #aaa;
	border-radius: 50%;
	background-color: #aaa;
	width: 174px;
	height: 174px;
	line-height: 100%;
	font-size: 20px;
	color: #fff;
	font-weight: bold;
	font-family: arial, sans-serif, helvetica;
}
.big-blocks.clock {
     overflow-x: visible;
     margin: 0;
}
.clock ul {
	list-style-type: none;
	text-align: center;
	margin: 0;
	padding: 0;
	line-height: 100%;
}
.clock li {
	display: inline-block;
	position: relative;
	z-index: 555;
	padding: 0;
	padding-top: 5px;
	margin: 0;
	list-style-type: none;
	width: 30px;
	height: 25px;
	border: 2px solid #aaa;
	border-radius: 50%;
	line-height: 100%;
	margin-top: 2px;
     cursor: pointer;
}
.clock li:hover {
	border: 2px solid #ddd;
     background-color: #ddd;
}
.clock ul:nth-of-type(1) li:first-of-type,
.clock ul:nth-of-type(1) li:last-of-type {
     position: relative;
     top: 6px;
     margin: 0 -4px 0 -4px;
}
.clock ul:nth-of-type(1) li:nth-of-type(2) {
     position: relative;
     top: -4px;
}
.clock ul:nth-of-type(2) {
     position: relative;
     top: -4px;
}
.clock ul:nth-of-type(2) li:first-of-type {
     margin: 0 86px 0 0;
}
.clock ul:nth-of-type(3) {
     position: relative;
     top: -4px;
}
.clock ul:nth-of-type(3) li:first-of-type {
     margin: 0 100px 0 0;
}
.clock ul:nth-of-type(4) li:first-of-type {
     margin: 0 84px 0 0;
}
.clock ul:nth-of-type(4) {
     position: relative;
     top: -4px;
}
.clock ul:nth-of-type(5) {
     position: relative;
     top: -14px;
}
.clock ul:nth-of-type(5) li:nth-of-type(2) {
     position: relative;
     top: 10px;
     margin: 0 -4px 0 -4px;
}
.clock ul li span, .clock .ampm {
     display: none;
}
.clock div.ampm {
     display: none;
     position: relative;
     top: -120px;
	z-index: 444;
}
.clock ul li span.showtime, .clock .ampm.showtime {
     display: inline;
}
.clock .ampm span {
     display: inline-block;
	padding-top: 16px;
     width: 36px;
     height: 40px;
     border-left: 2px solid #fff;
     border-radius:  0 50% 50% 0;
     cursor: pointer;
}
.clock .ampm span:first-of-type {
     border-left: 0 solid #fff;
     border-right: 2px solid #fff;
     border-radius: 50% 0 0 50%;
}
.clock .ampm span:hover {
     background-color: #ddd;
}

.pop-up {
     position: fixed;
     top: 0;
     left: 0;
     padding: 10% 3% 0 3%;
     width: 94%;
     height: 90%;
     text-align: center;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 9999;
}
/*.pop-up:first-child {
     box-shadow: 0 0 500px #000;
}*/

/*
.ext-radios input + p {
     display: none;
}
.ext-radios input:focus + p {
     display: block;
} */

/* Comments / Tasks Management System... */

form.comments input[type="radio"] {
     display: none;
}
form.query input[type="radio"] {
     display: inline;
}
form.comments label {
     display: inline;
     width: auto;
     color: #222;
     font-weight: normal;
}
form.comments label {
     
}
form.query .show-users , 
form.comments .default , 
form.comments .update , 
form.comments .delete {
     display: inline-block;
     margin: 0;
     padding: 0;
     width: 0;
     height: 0;
     /*max-height: 0;*/
     opacity: 0;
     overflow: hidden;
     transition: display 0.5s, opacity 0.5s, overflow 0.5s; /* max-height 1s, */
}
.comment-block input[value="2"]:checked ~ .show-users , 
.comment-block input[value="default"]:checked ~ .default , 
.comment-block input[value="update"]:checked ~ .update , 
.comment-block input[value="delete"]:checked ~ .delete {
     display: block;
     margin:  0;
     height: auto;
     width: auto;
     /*max-height: 400px;*/
     opacity: 1;
     overflow: visible;
     transition: display 0.5s, opacity 0.5s, overflow 0.5s; /* max-height 1s, */
}
.comment-block input[value="default"]:checked ~ .default.priority {
     text-align: left;
     padding: 0 0.5em;
     width: 66px;
     margin: -1.1em;
     color: #777;
     height: calc(66px + 1em);
}
.comment-block input[value="default"]:checked ~ .default.completed {
     text-align: left;
     margin: 0;
     position: relative;
     left: 64px;
     top: -56px;
     margin-bottom: -40px;
     width: 200px;
}
.comment-block input[value="update"]:checked ~ label.update {
     display: inline-block;
}
form.comments input:checked + label {
     color: #050;
}
.comments div.default h3 {
     padding-bottom: 0;
}
.comment-block textarea,
.comment-block input[type='text'] {
     width: calc(98% - 12px);
}
.comment-block img + textarea,
.comment-block img + input[type='text'] {
     width: 90%;
}
.comment-block img + textarea.dt-date,
.comment-block img + input[type='text'].dt-date {
     width: 140px;
}

   
/*@keyframes borderBlink {    
    from, to { border-color: transparent; }    
    50% { border-color: #565; }    
}*/
.showcase {
     border: 2px solid #900;
     /*border: 2px solid #565;
     -webkit-animation: borderBlink 1s step-end infinite;  
     animation: borderBlink ease 1s infinite;*/
}

.auto-tags {
     overflow: hidden;
     margin-bottom: 4px; 
     max-height: 0;
     transition: max-height 0.4s;
}
input:focus + .auto-tags {
     max-height: 100px;
     transition: max-height 0.4s;
}
.auto-tags a {
     background-color: transparent;
     border-radius: 4px;
     font-size: 0.9em;
     padding: 1px 3px 2px 3px;
     margin: 2px;
     cursor: pointer;
}
.auto-tags a:hover {
     background-color: #fff;
}


/* Form Management system... */

form.form-input label ,
.form-sort-blocks .edit-input {
     width: auto;
     text-align: center;
     cursor: pointer;
     padding: 3px;
     margin: 6px 0;
     /*height: 30px; */
     border: 1px solid #888;
     border-radius: 3px;
     background-color: #888;
     display: inline-block;
     vertical-align: middle;
     line-height: 100%;
     color: #fff;
}
form.form-input div label  {
     color: #333;
}
form.form-input input[name="type"] {
     display: none;
}
form.form-input input[type="radio"]:checked + label {
     border-color: #aaa;
     background-color: #aaa;
}
form.form-input label img {
     width: 30px;
     vertical-align: middle;
}
form.form-input label b {
     vertical-align: middle;
     padding-top: 0;
     line-height: 50%;
}
form.form-input .attribs label {
     display: inline-block;
     position: relative;
     vertical-align: top;
     width: 140px;
     overflow: visible;
     text-align: right;
     border: 0;
     background-color: transparent;
}
form input[name="form-public-allow"][value="1"] + div,
form input[class="more-inputs"][value="1"] + div {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s;
}
form input[name="form-public-allow"][value="1"]:checked + div,
form input[class="more-inputs"][value="1"]:checked + div {
     max-height: 800px;
     overflow: hidden;
     transition: max-height 0.2s;
}
.attribs textarea , 
.attribs .group {
     display: inline-block;
     vertical-align: top;
     width: 180px;
     min-height: 40px;
     position: relative;
     margin: 6px 0;
}
.attribs input[type="text"] {
     min-height: 28px;
     margin: 6px 0;
}
.attribs .group { 
     vertical-align: middle;
}
.attribs input[type="radio"] {
     min-height: 28px;
     margin: 6px 0;
}

div.attribs {
     max-height: 0;
     opacity: 0;
     overflow: hidden;
     transition: max-height 1s, opacity 0.5s, overflow 0.5s;
}
input#title:checked ~ div.title ,
input#subtitle:checked ~ div.subtitle ,
input#paragraph:checked ~ div.paragraph ,
input#other:checked ~ div.other ,
input#text:checked ~ div.text ,
input#textarea:checked ~ div.textarea ,
input#upload:checked ~ div.upload ,
input#signature:checked ~ div.signature ,
input#checkbox:checked ~ div.checkbox ,
input#radio:checked ~ div.radio ,
input#select:checked ~ div.select ,
input#common:checked ~ div.common ,
input#search:checked ~ div.search {
     max-height: 400px;
     opacity: 1;
     overflow: visible;
}
form.form-input div.w-full label , 
div.w-full textarea , 
div.w-full input {
     text-align: left;
     width: 90%;
     margin: 0 3%;
}

.embed-code, .embed-code:focus {
     cursor: pointer;
     background-color: transparent;
     box-shadow: 0 0 0 transparent;
     border: 0;
}

div.w-full textarea {
     min-height: 200px;
}

form.ecom-items {
    line-height: 200%;
}
form.ecom-items p {
    line-height: 160%;
}
form.form-demo {
     box-shadow: 3px 3px 12px #ccc;
}
.comment-block form.form-demo {
     box-shadow: 0 0 0 transparent;
}
form.form-demo label {
     width: auto;
     text-align: left;
     color: #000;
     font-weight: normal;
}
form.form-demo input[type="text"] {
    width: 250px;
    display: block;
}

.form-sort-blocks {
     background-color: #f4f4f4;
     margin: 4px 1em;
     padding: 0.4em 0.8em;
     text-align: left;
     cursor: pointer;
}
form.disabled .form-sort-blocks {
     padding: 0;
     margin: 0;
     cursor: default;
}

.drag-box .form-sort-blocks {
     border: 2px dashed #fff;
     cursor: move;
}

.form-sort-blocks textarea {
     width: 90%;
}

.form-sort-blocks .edit-input {
     float: right;
     width: 16px;
     height: 16px;
     margin: -9px -17px 0 0;
}
.form-sort-blocks .edit-input img {
     width: 100%;
}    

form.comments.query input + label {
     margin: 3px 9px 3px 0;
}
form.comments.query input:checked + label {
  color: inherit;
}
#ival-show-text,
#ival-show-sel,
#ival-show-check {
     margin: 1.4em;
     display: none;
}
#ival-type-1:checked ~ #ival-show-text,
#ival-type-4:checked ~ #ival-show-sel,
#ival-type-5:checked ~ #ival-show-sel,
#ival-type-3:checked ~ #ival-show-check {
     display: block;
}

:disabled {
     color: #000;
}

a.bggreen { background-color: #216e4d; }


#popdiv {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1999;
     text-align: center;
     height: 0;
     width: 100%;
     overflow: hidden;
     background-color: rgba(0, 0, 0, 0);
     opacity: 0;
     transition: opacity 0.5s;
}
#popdiv b {
     text-shadow: 0 0 2px #000;
     display: block;
     height: 24px;
}
#popdiv.show {
     height: 94%;
     padding: 3% 0;
     background-color: rgba(0, 0, 0, 0.7);
     opacity: 1;
     transition: opacity 0.5s;
}
#popdiv iframe {
     margin: 0 auto;
     height: calc(96% - 24px);
     width: 96%;
     overflow: scroll;
}
input[type="submit"][value="Upload"]:focus {
     opacity: 0;
}
input[type="submit"][value="Upload"]:focus + div.loading {
     width: calc(100% - 2em);
}
input[type="submit"][value="Upload"]:focus + div.loading b {
     display: inline-block;
     margin-left: -16px;
     border: 16px solid #bbb;
     border-radius: 50%;
     border-top: 16px solid #be0;
     width: 120px;
     height: 120px;
     -webkit-animation: spin 2s linear infinite;
     animation: spin 2s linear infinite;
     /*margin: calc(50vh - 76px) calc(50vw - 76px);*/
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ckeditor pop-ip via iframe */ 
.fm-modal {
	z-index: 10011; /* CKEditor image dialog z-index was at 10010 */
	width: 90%;
	height: 90%;
	position: fixed;
	top: 5%;
	left: 5%;
	border: 0;
	-moz-box-shadow: 0px 1px 5px 0px #656565;
	-webkit-box-shadow: 0px 1px 5px 0px #656565;
	-o-box-shadow: 0px 1px 5px 0px #656565;
	box-shadow: 0px 1px 5px 0px #656565;
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=5);
}


/* input type="file" Upload Manager way better Browse button...
*/
/*input.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}*/

input.inputfile {
  background-color: #fff;
  border-color: transparent;
  color: #050;
  width: 90%;
}
.tog-up-file,
.tog-up-search {
     padding: 0 4px;
}

/*.inputfile + label {
    font-size: 1.0em;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
}*/

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}


/* style 1 */

.inputfile-1 + label {
    color: #f1e5e6;
    background-color: #d3394c;
}

.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:hover {
    background-color: #722040;
}


/* style 2 */

.inputfile-2 + label {
    color: #d3394c;
    border: 2px solid currentColor;
}

.inputfile-2:focus + label,
.inputfile-2.has-focus + label,
.inputfile-2 + label:hover {
    color: #722040;
}


/* style 3 */

.inputfile-3 + label {
    color: #d3394c;
}

.inputfile-3:focus + label,
.inputfile-3.has-focus + label,
.inputfile-3 + label:hover {
    color: #722040;
}


/* style 4 */

.inputfile-4 + label {
    color: #425e5e;
    opacity: 1.0;
    transition: opacity 1s;
}

.inputfile-4:focus + label,
.inputfile-4.has-focus + label,
.inputfile-4 + label:hover {
    opacity:  0.7;
}

.inputfile-4 + label figure {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #425e5e;
    display: inline-block;
    padding: 4px;
    margin: 0 auto;
}

.inputfile-4:focus + label figure,
.inputfile-4.has-focus + label figure,
.inputfile-4 + label:hover figure {
    background-color: #425e5e;
}

.inputfile-4 + label svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}


/* style 5 */

.inputfile-5 + label {
    color: #d3394c;
}

.inputfile-5:focus + label,
.inputfile-5.has-focus + label,
.inputfile-5 + label:hover {
    color: #722040;
}

.inputfile-5 + label figure {
    width: 100px;
    height: 135px;
    background-color: #d3394c;
    display: block;
    position: relative;
    padding: 30px;
    margin: 0 auto 10px;
}

.inputfile-5:focus + label figure,
.inputfile-5.has-focus + label figure,
.inputfile-5 + label:hover figure {
    background-color: #722040;
}

.inputfile-5 + label figure::before,
.inputfile-5 + label figure::after {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
}

.inputfile-5 + label figure::before {
    border-top: 20px solid #dfc8ca;
    border-left: 20px solid transparent;
}

.inputfile-5 + label figure::after {
    border-bottom: 20px solid #722040;
    border-right: 20px solid transparent;
}

.inputfile-5:focus + label figure::after,
.inputfile-5.has-focus + label figure::after,
.inputfile-5 + label:hover figure::after {
    border-bottom-color: #d3394c;
}

.inputfile-5 + label svg {
    width: 40px;
    height: 40px;
    fill: #425e5e;
}


/* style 6 */

.inputfile-6 + label {
    color: #d3394c;
}

.inputfile-6 + label {
    border: 1px solid #d3394c;
    background-color: #f1e5e6;
    padding: 0;
}

.inputfile-6:focus + label,
.inputfile-6.has-focus + label,
.inputfile-6 + label:hover {
    border-color: #722040;
}

.inputfile-6 + label span,
.inputfile-6 + label strong {
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.inputfile-6 + label span {
    width: 200px;
    min-height: 2em;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
}

.inputfile-6 + label strong {
    height: 100%;
    color: #f1e5e6;
    background-color: #d3394c;
    display: inline-block;
}

.inputfile-6:focus + label strong,
.inputfile-6.has-focus + label strong,
.inputfile-6 + label:hover strong {
    background-color: #722040;
}

@media screen and (max-width: 50em) {
	.inputfile-6 + label strong {
		display: block;
	}
}

.vis { overflow-x: visible; overflow-y: visible; }


/* Mobile Styles */

@media screen and (min-width: 1440px) {
     .big-block-filler {
          margin-left: calc(25vw - 360px);
     }
}
@media screen and (max-width: 1280px) {
     
     div.page-editor {
          display: block;
          width: auto;
     }
     div.wysiwyg {
          display: block;
          width: 100%;
     }
     div.page-editor label {
          display: block;
          text-align: left;
          width: auto;
          margin-top: 1em;
     }
}

@media screen and (max-width: 830px) {
     .w540 {
          width: 100%;
     }
}
@media screen and (min-width: 780px) and (max-width: 1010px) {
     .container.dashboard #calendar-wrap,
     #about-wrap {
          width: auto;
          float: none;
          margin: 0 0 0 1%;
     }
}
@media screen and (max-width: 780px) {
     
     @-ms-viewport { width: device-width, initial-scale=1; }
     @-o-viewport { width: device-width, initial-scale=1; }
     @viewport { width: device-width, initial-scale=1; }
     
     body {
          margin: 0;
     }
     .container {
          width: 96%;
          margin: 0 2%;
          vertical-align: top;
     }
     div.w320 {
          margin-right: 0;
     }
     nav {
          float: none;
          position: fixed;
          z-index: 9999;
          top: 0;
          left: 0;
          width: 60px;
          height: 30px;
          overflow: hidden;
          background-color: transparent;
     }
     nav img#menu-button {
          display: block;
          padding: 6px;
          background: linear-gradient(to bottom, #555 0%, #777 100%);
     }
     nav img.logo {
          display: none;
     }
     nav.show {
          width: 180px;
          height: 100%;
          background-color: #777;
     }
     nav.show img.logo {
          display: inline;
          margin-top: -2px;;
     }
     .w240 { width: 218px; }
     .w320 { width: 300px; }
     
     label {
          /*display: block;*/
          text-align: left;
          width: auto;
          margin-top: 1em;
     }
     form#new-user input[type="text"],
     form#new-user input[type="password"] {
          width: 124px;
     }
     .container.dashboard #calendar-wrap,
     #about-wrap {
          width: auto;
          float: none;
          margin: 0 0 0 1%;
     }
}

@media screen and (max-width: 600px) {
     .inline-box {
          display: block;
          min-width: calc(100% - 3.5em);
     }
     .inline-block {
          display: block;
     }
     #calendar-wrap.inline-block {
          display: inline-block;
     }
     .comment-block.w480 {
          max-width: calc(100% - 4% - 2em);
     }
     div.inline-block.w480 div.inline-block.right,
     div.inline-block.w480 div.inline-block.left {
          display: inline-block;
     }
}

@media screen and (max-width: 530px) {
     .big-blocks {
          margin: 0 0 1em 0;
     }
     form.contact-edit div.inline-box label {
          display: block;
          text-align: left;
          margin-top: 1em;
     }
     div.page-editor textarea#description {
          width: 15em;
     }
     .thumb-viewer {
         margin: 0.75em 0.75em 0.2em 0;
     }
}

@media screen and (max-width: 488px) {
     /*.card, .contact-card {
          margin: 0 0 1em 0;
     }*/
     .w480 {
          width: 460px;
          max-width: 100%;
     }
     .w360 {
          max-width: calc(100% - 2em);
     }

     .form-settings label {
          text-align: left;
          display: block;
     }
     .form-settings input,
     .form-settings textarea {
          display: block;
     }
     .comment-block textarea,
     .comment-block input[type='text']{
          width: 94%;
     }
     .comment-block img + input[type='text'] {
          width: 84%;
     }

     .contact-card div.bg-eee ,
     .card div.bg-eee {
          margin: 0;
     }
     .card, .contact-card {
          display: inline-block;
          margin: 0 0 1em 0;
          padding: 1px;
          vertical-align: top;
     }
     /*.contact-card p {
          padding: 0.8em;
     }   */
     .contact-card p.profile-box {
          width: 124px;
          /*margin-right: 0.1em;
          margin: 0;
          border-right: solid #aaa 2px;*/
      }
     .thumb-viewer {
         margin: 0.75em 0 0.2em 0;
         width: calc(100% - 24px);
     } 
     .thumb-viewer > a {
         display: block;
         text-align: center;
     }
}

@media screen and (max-width: 464px) {
     
     @-ms-viewport { width: device-width, initial-scale=0.5; }
     @-o-viewport { width: device-width, initial-scale=0.5; }
     @viewport { width: device-width, initial-scale=0.5; }
     
     .w320, .w480, .w400 {
          max-width: 100%;
     }
     .card, .contact-card {
          display: block;
          padding: 1px;
     }
     .contact-card .primary-data {
          height: auto;
     }
     .contact-card p {
          padding: 0.8em 3%;
          width: 94%;
          display: block;
     }
     .contact-card p.profile-box {
          padding: 0.8em 3%;
          width: 94%;
          max-height: 220px;
          text-align: center;
     } 
     .contact-card p.profile-box img {
          max-width: 50%;
          max-height: 50%;
     }
}  

input[type="text"].dt-date { width: 140px; }

div.alert-form {
     border: 1px solid #900; 
     border-radius: 2px; 
     padding: 2px 8px 8px; 
     margin: 4px -8px;
}
div.alert-form b.alert-b {
     color: #900;
}
div.alert-pop {
     position: fixed;
     top: 0;
     left: 0;
     font-size: 1.1em;
     padding: 1em 8%;
     background-color: #f4f4f4;
     box-shadow: 0 0 200px #444;
     z-index: 9999;
     text-align: center;
}
div.alert-pop.user-notify {
     padding: 1em max(1em, calc(50% - 300px));
     line-height: 1.5em;
}
div.user-notify h4 {
     background-color: #999;
     color: #fff;
     padding: 0.8em;
     font-size: 1.2em;
     margin: 0;
}
div.big-blocks div.user-notify h4 {
     margin-top: 1em;
}
div.user-notify ul {
     margin-left: 0;
     text-align: left;
     list-style: disc;
}
div.user-notify ul li {
     margin: 0.4em 0 1em 0.4em; 
}
div.user-notify div.notify-area {
  background-color: #fff;
  box-shadow: 0 0 50px #0002;
  padding: 1em calc(0.6em + 3%);
}
div.alert-pop a.thumbnail {
     box-shadow: 2px 2px 20px #0025;
     display: inline-block;
     padding: 0.6em;
     border: 1px solid #fff;
     border-radius: 8px;
     margin: 1.4em;
}
div.alert-pop a.thumbnail:hover {
     background-color: #eee;
}
div.alert-pop a.thumbnail img {
     display: block;
     border: 1px solid #fff;
     border-radius: 6px;
     background-color: #f9f9f9;
}
div.alert-pop.user-notify div.notify-area b.user-notify-dismiss {
     cursor: pointer;
     color: #700;
     border: 1px solid #700;
     padding: 0.3em 0.6em;
}
div.alert-pop.user-notify div.notify-area b.user-notify-dismiss:hover {
     color: #755;
     border: 1px solid #755;
     background-color: #eee;
}
div.alert-pop h4 {
     text-align: center;
}
div.alert-pop > b {
     cursor: pointer;
     color: #700;
}
div.alert-hide {
     display: none;
}


.cke_dialog .ImagePreviewBox {
     width: 400px;
     width: calc(100% - 120px);
}