/* -------------------------------------------------- 
   Fonts
-------------------------------------------------- */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../../wwwres/font/OpenSans-Bold.woff) format('woff'),
                                                        url(../../wwwres/font/OpenSans-Bold.ttf) format('truetype'),
                                                        url(../../wwwres/font/OpenSans-Bold.eot) format('embedded-opentype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(../../wwwres/font/OpenSans-Light.woff) format('woff'),
                                                          url(../../wwwres/font/OpenSans-Light.ttf) format('truetype'),
                                                          url(../../wwwres/font/OpenSans-Light.eot) format('embedded-opentype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(../../wwwres/font/OpenSans-Semibold.woff) format('woff'),
                                                                url(../../wwwres/font/OpenSans-Semibold.ttf) format('truetype'),
                                                                url(../../wwwres/font/OpenSans-Semibold.eot) format('embedded-opentype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../../wwwres/font/OpenSans-Regular.woff) format('woff'),
                                              url(../../wwwres/font/OpenSans-Regular.ttf) format('truetype'),
                                              url(../../wwwres/font/OpenSans-Regular.eot) format('embedded-opentype');
}


/* -------------------------------------------------- 
   Generally Begin
-------------------------------------------------- */

.panel { border: none; }
.panel.panel-button { background-color: transparent; border: 1px solid #e2e2e2; }
img { border: none; }

a {
  color: #009EE0;
}
a:hover, a:focus ,a:active {
  color: #017eb2;  
}

/* -------------------------------------------------- 
   Buttons
-------------------------------------------------- */

.button.button-clean {
   border: none;
   -webkit-box-shadow: 0px 2px 0 rgba(0, 0, 0, 0.2); 
   -moz-box-shadow: 0px 2px 0 rgba(0, 0, 0, 0.2); 
   box-shadow: 0px 2px 0 rgba(0, 0, 0, 0.2); 
   padding: 10px 30px 11px; 
   font-weight: normal;
   text-transform: uppercase;
   background-color: #009EE0;
}

.button.button-clean:active {
   -webkit-box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.1); 
   -moz-box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.1); 
   box-shadow: 0px 2px 0 rgba(0, 0, 0, 0.1) inset;   
   background-color: #017eb2;
}
.button.button-clean:hover, .button.button-clean:focus {
   background-color: #017eb2;
}

.button.button-clean.spinner { background: #009EE0 url(../../wwwres/img/loader.gif) center center no-repeat; }
.button.button-clean.spinner2 { background: #E9E9E9 url(../../wwwres/img/loader2.gif) center center no-repeat; }

.button.button-clean.secondary {
    color: #444 !important;
    background-color: #e9e9e9;
}
.button.button-clean.secondary:hover ,.button.button-clean.secondary:active, .button.button-clean.secondary:focus {
    background-color: #d0d0d0;
}

/* -------------------------------------------------- 
   Typo
-------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', 'Times', 'Helvetica', Helvetica, Arial, sans-serif;
    font-weight: 300;
}

.headline-alert-box {
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 18px;
}

/* -------------------------------------------------- 
   Icon
-------------------------------------------------- */

.icon {
    background: transparent url('../img/icon-sprite.png') 0px 0px no-repeat;
}

.error-icon { background-position: 0 0; }
.success-icon { background-position: -33px 0; }

.pos-icon {
    position: absolute;
    top: 0;
    left: 0;
}

.content-icon { margin-left: 5px; }

.nav-a-dashboard img { background-position: 0px -75px; }
.nav-a-dashboard.active img { background-position: -42px -75px; }

.nav-a-device img { background-position: 0px -117px; }
.nav-a-device.active img { background-position: -42px -117px; }

.nav-a-version img { background-position: 0px -159px; }
.nav-a-version.active img { background-position: -42px -159px; }

.nav-a-user img { background-position: 0px -33px; }
.nav-a-user.active img { background-position: -42px -33px; }

.nav-a-account img { background-position: 0px -201px; }
.nav-a-account.active img { background-position: -42px -201px; }

.nav-a-company img { background-position: 0px -243px; }
.nav-a-company.active img { background-position: -42px -243px; }

.nav-a-brandkey img { background-position: 0px -285px; }
.nav-a-brandkey.active img { background-position: -42px -285px; }

.brandkeyDelete  { background-position: -90px -34px; }


.lock-icon { background-position: -121px -67px; }
.user-icon { background-position: -121px -34px; }
.settings-icon { background-position: -121px 0px; }
.key-icon { background-position: -121px -102px; }
.clock-icon { background-position: -121px -168px; }
.delete-icon { background-position: -121px -135px; }
.mail-icon { background-position: -121px -202px; }
.lockclose-icon { background-position: -121px -236px; }
.info-icon { background-position: -86px -376px; }

.details-icon { background-position: -155px -241px; }
.sig-icon { background-position: -155px -106px; }
.tl-icon { background-position: -155px -174px; }
.devices-icon { background-position: -155px -140px; }
.downloads-icon { background-position: -155px -208px; }
.check-icon { background-position: -155px -275px; }

.tools-icon-small { background-position: -104px 0px; }
.pencil-icon-small { background-position: -89px -58px; }
.show-icon-small { background-position: -90px -351px; }
.close-icon-small { background-position: -90px -84px; }

.num-one-icon { background-position: -121px -271px; }
.num-two-icon { background-position: -121px -306px; }
.num-three-icon { background-position: -121px -341px; }
.num-four-icon { background-position: -121px -376px; }
.num-five-icon { background-position: -121px -410px; }
.num-six-icon { background-position: -121px -444px; }
.num-seven-icon { background-position: -87px -444px; }
.num-eight-icon { background-position: -87px -410px; }

.tl-edit-icon { background-position: -41px -456px; }
.tl-plus-icon { background-position: 0px -456px; }
.tl-arrow-left { background-position: -89px -204px; }
.tl-arrow-right { background-position: -89px -242px; }

/* -------------------------------------------------- 
   Auth
-------------------------------------------------- */

.row.set-deeper-login {
    margin-top: 80px;
    margin-bottom: 20px;
}

.logo-login {
    margin-top: 25px;
}

.headline-login {    
    margin: 0;
    margin-right: 15px;
    color: #333;
    font-size: 37px;
    font-weight: 300;
    line-height: 1.1;
}

.headline-h2-login,.headline-h3-login, .headline-h3-content {    
    margin: 0;
    margin-right: 15px;
    color: #999;
    font-size: 23px;
    font-weight: 300;
    line-height: 1.4;
}

.headline-h3-login {    
    color: #828282;
}

.headline-h3-content {   
    margin-right: 0px;
    color: #4c4c4c;
}

.text-login {
    display: inline-block;    
    line-height: normal !important;
    margin: 0px;
}
.setVertical {
    line-height: 29px;
    height: 35px;
    overflow: hidden;
}

.data-out-login {
    z-index: 1;
}

.panel.submit-login {
    background-color: #d9d9d9;
}

.submit-login span, .or-span{
    color: #999;
    line-height: 35px;
}

.abort-link {
    color: #191d26;
    text-decoration: none;
}
.abort-link:hover, .abort-link:focus, .abort-link:active {
    color: #191d26;
    text-decoration: underline;
}

.left-input-padding {
    padding: 0 5px 0 0;
}
.right-input-padding {
    padding: 0 0 0 5px;
}

.panel-headline-create {
    background-color: #e6e6e6;
    border-bottom: 1px dotted #c2c2c2;
}

.panel-headline-p {
    line-height: 1.2;
    color: #828282;
}

.subdomain-output, .data-output {
    margin: 0 3px 0 3px;
    padding: 0 3px 0 3px;
    background-color: #666;
    color: #fff;
}

.subdomain-text {
    line-height: 28px;
    color: #4D4D4D;
}

@media only screen and (max-width: 767px) { 
    .row.set-deeper-login {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .panel.submit-login.submit-login-link {
        padding-bottom: 0;
    }    
    .right-input-padding, .left-input-padding {
        padding-left: 0px;
        padding-right: 0px;
    }    
}

/* -------------------------------------------------- 
   Alert Boxes
-------------------------------------------------- */

a.closeAlert { color: #fff; position: absolute; right: 4px; top: -1px; font-size: 17px; opacity: 1; padding: 4px; }
a.closeAlert:hover, div.alert-box a.closeAlert:focus { opacity: 0.4; }

.alert-box.alert.alert-box-clean,
.alert-box.success.alert-box-clean {
    margin-bottom: 0;
    padding: 20px;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    text-shadow: none;
}

.alert-box-p {
    position: relative;
    top: 0;
    left: 0;
    padding-left: 53px;
}

label.error {
    padding: 0px 0 10px 0;
    font-size: 12px;
}

div.alert-box.success {
    background-color: #eeaa07;
}

/* -------------------------------------------------- 
   Navi - Header
-------------------------------------------------- */

.row-nav, .row-head {
    width: 910px;
}

.panel-head-left, .panel-head-right, .panel-head-middle, .panel-head-version {
    line-height: 20px;
    color: #fff;
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
}

.panel-head-left {
    /* background-color: #999; 
    background-color: rgba(153,153,153,0.1); */
    background-color: transparent;
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
}

.panel-head-middle {
    /* background-color: #888; */
    background-color: rgba(153,153,153,0.1);
    font-size: 12px;    
}

.panel-head-right {
    /* background-color: #777; */
    background-color: rgba(153,153,153,0.3);
    padding: 0px;
}

.panel-head-version {
    background-color: rgba(153,153,153,0.1);
    padding: 0px;
}

.panel-head-version a {
    display: block;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
}

a.logout {
    display: block;
    padding: 20px;
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}
a.logout:hover {
    background-color: #C60F13;
}
.panel-nav {
    padding: 0px;
    word-wrap: break-word;
}

a.tools-link {
     margin-left: 10px;
}

a.version-link {
    position: absolute;
    top: 20px;
    right: 23px;
    color: #ffffff;
}

.panel-nav-a {
    display: block;
    padding: 20px;
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: #9e9e9e;
}

.panel-nav-a:hover {
    background-color: #e2e2e2;    
    color: #9e9e9e;
}

.panel-nav-a.active {
    background-color: #009EE0;
}

.panel-nav-a.active, .panel-nav-a.active:hover {
    color: #d4edf5;
    background-color: #009EE0;
}

.img-nav {
    margin-bottom: 5px;
}

.span-nav { display: block; }

.mobileMenuButton .panel {
    background: #7b7b7b url(../../wwwres/img/mobile-buttons.png) right -190px no-repeat;
    color: #fff;
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

.head-a {
    color: #fff;
    text-decoration: underline;
}
.head-a:hover, .head-a:focus, .head-a:active {
    color: #fff;
    text-decoration: none;
}

@media only screen and (max-width: 767px) { 
    .row-head, .row-nav { height: 60px; overflow: hidden; }   
    .panel-head-left.mobileView { 
        background: transparent url(../../wwwres/img/mobile-buttons.png) right 0px no-repeat;
        white-space: nowrap;
        cursor: pointer; 
    }
    .row-head.active { height: auto; }
    .row-head.active .panel-head-left.mobileView { background: transparent url(../../wwwres/img/mobile-buttons.png)  right -100px no-repeat;  }
    .row-nav.active { height: auto; }
    .panel-nav-a { border-bottom: 1px solid #D5D5D5; text-align: left; }
    .img-nav { margin: 0 10px 0 0; float: left; }
    .span-nav { display: inline-block; line-height: 42px; }
    
    
    .panel-head-middle { background-color: rgba(153,153,153,0.2); }
    .panel-head-right { background-color: rgba(153,153,153,0.3); }
}
/* -------------------------------------------------- 
   Article
-------------------------------------------------- */
.row-article-head, .row-article-content {
    width: 910px;
}

.panel-article-head {
    background-color: #009EE0;
    padding: 20px 15px 20px 15px;
}

.headline-article {    
    margin: 0;
    margin-right: 15px;
    color: #fff;
    font-size: 37px;
    font-weight: 300;
    line-height: 1.1;
}

.headline-h2-article,.headline-h3-article {    
    margin: 0;
    margin-right: 15px;
    color: #fff;
    font-size: 23px;
    font-weight: 300;
    line-height: 1.4;
}

.headline-h3-article {    
    color: #828282;
}

.headline-h4-user {
    margin: 20px 0 20px 0;
    font-size: 23px;
    font-weight: 300;
    line-height: 1;    
}

.text-user {
    display: inline-block;
    width: 100%;
    line-height: 1.4;
    font-size: 14px;
}

.text-user-name { color: #222; } 
.text-user-email { color: #9E9E9E; }

.role-user {
    width: 120px;
    position: absolute;
    top: 0;
    right: 15px;
    color: white;
    padding: 10px 0 10px 0;
    font-size: 12px;
    text-align: center;
}

.panel.panel-user { margin-bottom: 30px; }
.panel.panel-user-a { 
    display: inline-block;
    width: 100%;
}
.panel-user-a:hover, .panel-user-a:focus, .panel-user-a:active  { 
    background-color: #d5d5d5;
}

.sysOwner-color { background-color: #f2a05f; }
.compOwner-color { background-color: #86bb5a;}
.compAdmin-color { background-color: #d44b4e; }
.invited-color { background-color: #60bcd8; }
.invisible-color { background-color: #9e9e9e; }

.panel-headline-p-content {
    line-height: 1.2;
    color: #4c4c4c;
    margin-bottom: 30px;
}

.two-inputs { display: inline-block; width: 49%; }

/* -------------------------------------------------- 
   Footer
-------------------------------------------------- */

.list-footer {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.list-footer li {
    float: left;
    margin: 0;
    padding: 0;
    padding: 0 40px 0 0;
}

.list-footer li a {
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #9e9e9e;
    text-transform: uppercase;
}
.list-footer li a:hover {
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #7b7b7b;
    text-decoration: underline;
    text-transform: uppercase;
}

.copyright-footer {
    display: inline-block;
    color: #9e9e9e;
    font-size: 12px;
}

.copyright-text {
    display: block;
    clear: left; 
    padding-bottom: 10px;
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #9e9e9e;
}

.footer-login {
    line-height: 18px !important;
}

.logo-footer {
    margin-top: 10px;
}


/* -------------------------------------------------- 
   Brandkeys
-------------------------------------------------- */

.grid5-7 {
    margin: 0 15px 0 15px !important;
}
.brandkeyShow {
    display: inline-block;
    float: left;
    line-height: 44px;
}   
.DeleteBrandKeySingle, .DeleteLookUpNumber {
    display: inline-block;
    float: left;
    text-align: center;
    cursor: pointer;

}
.DeleteBrandKeySingle img, .DeleteLookUpNumber img { margin: 10px 15px 0 15px; }
.greybg1 { background-color: #e3e3e3; }
.noBrandkey {
    background-color: #e3e3e3;
    text-align: center;
    padding: 20px;
}

.brandkey, .lookupnumber {
    display: inline-block !important;
    margin-right: 10px !important;   
}
.brandkey-1, .lookupnumber { width: 77px !important; }
.brandkey-3 { width: 77px !important; }
.brandkey-2 { width: 77px !important; }

.label-brandkey {
    display: inline-block;
    margin-right: 20px !important;  
    float: left;
    width: 82px;
}

.brandkeyInputs {
    float: left;
}

.bk-info {
    padding: 10px !important;
    line-height: normal !important;
    color: #FFF;
    background-color: #c60f13;
    margin-bottom: 10px !important;
}

.BrandKeySubmit { margin-top: 14px !important; float: right !important; }

@media only screen and (max-width: 767px) { 
    .label-brandkey { width: 100% !important; }
}

/* -------------------------------------------------- 
  List View
-------------------------------------------------- */
ul.listView * {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.listHead1 {
    /* background-color: #7f7f7f; */
    margin-bottom: 20px !important;
    font-size: 23px;
    font-family: 'Open Sans', 'Times', 'Helvetica', Helvetica, Arial, sans-serif;
    font-weight: 300;
    line-height: 1;
}
.listHead2 { 
    position: relative;
    padding: 20px 20px !important;
    background-color: #D2D2D2;         
    color: #222;    
}
.arrowArea {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 73px;
    height: 62px;
    display: inline-block;
    float: right;
    background-color: #b1b1b1;
    text-align: center;
    cursor: pointer;
}
.arrowArea:hover { background-color: #9D9D9D; }
.slideArrow {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 21px !important;
    background-position: -433px -530px;
}
.text-version { line-height: 28px; }
.slideArrow.close { background-position: -433px -505px }

.listContent li div.columns {
    color: #888;
}
.listContent li form div.columns {
    color: #888;
}
.listContent li form {
    position: relative;
    top: auto;
    left: auto;
}
.onetypeListClose, .onetypeListClose:active {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #999;
    z-index: 2;
}
.onetypeListClose:hover, .onetypeListClose:focus { color: #bbb; }

.listContent li div.columns strong {
    color: #444;
    font-weight: normal;
    font-size: 16px;
}
.listContent li div.columns span.dark {
    color: #666;
    padding: 0px;
}
.listContent li span{
    padding-right: 20px;
}

.o .onedeviceList, .o .oneversionList, .o .closeEdit { background-color: #009ee0; }
.p .onedeviceList, .p .oneversionList, .p .closeEdit { background-color: #0094d1; }
.m { background-color: #d5d5d5; }
.assignedDevices * { word-wrap: break-word; }

.closeEdit { line-height: 0px;}

.o .onedeviceList .eleven, .o .oneversionList .eleven, .o { background-color: #f2f2f2; }
.p .onedeviceList .eleven, .p .oneversionList .eleven, .p { background-color: #e8e8e8; }

.onedevice form div.eleven, .oneversion form div.eleven { background-color: #f2f2f2; }
.oneversion.o, .oneversion.p, .onedevice.o, .onedevice.p { background-color: transparent;}

/*
.onedeviceList, .closeEdit { background-color: #009ee0; }
.closeEdit { line-height: 0px;}

.o .onedeviceList .eleven { background-color: #f2f2f2; }
.p .onedeviceList .eleven { background-color: #f2f2f2; }

.onedevice form .eleven { background-color: #f2f2f2; }
.onedevice { margin-bottom: 10px !important; }
*/

.inputMargin input, .inputMargin textarea { margin-bottom: 12px; padding: 0px 10px; }
.inputMargin textarea { height: 104px; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; padding-top: 7px; line-height: 20px; }
.inputMargin select { margin-bottom: 0px; }
.inputMargin label.error { margin-bottom: 10px;}
.saveVersionEdit { padding-top: 30px !important; text-align: right; }

.iconsListArea img, .closeEdit img { cursor: pointer; }
.swType {     
    position: absolute;
    top: 0px;
    left: 0px;
    margin-top: 26px !important;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: 'Open Sans', 'Times', 'Helvetica', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 49px;
    line-height: 23px;
}
.swType span {
    display: inline-block;
    line-height: normal;
    font-size: 19px;
}

.onedevice:hover  .onedeviceList  div.eleven,
.oneversion:hover  .oneversionList  div.eleven,
.listMark { background-color: #d9d9d9 !important; }
/*
.iconsListArea img, .closeEdit img { cursor: pointer; }
.listMark, .onedevice:hover  .onedeviceList  div.eleven { background-color: #e8e8e8 !important; }
*/

.iconsListArea {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -12px !important;
    text-align: center
}
.iconsListArea.versions { margin-top: -53px !important; }
.iconsListArea.versions .pencil-icon-small { margin: 22px 0 12px 0; }

.onedeviceList, .oneversionList { position: relative; }

.onedeviceList div.columns, .listContent li div.columns { word-wrap: break-word; }

.notFound {
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
    color: #444;
    font-weight: normal;
    font-size: 16px;
}


.resultViewReformat {
    max-height: 340px;
    overflow: auto;
}
.resultViewReformat span { 
    display: inline-block;
    word-wrap: break-word; 
    padding-bottom: 5px;
    width: 100%;
}

.historyListDay * .o { background-color: #f2f2f2; }
.historyListDay * .p { background-color: #e8e8e8; }

.saveArea span, .saveArea a { line-height: 35px; }
@media only label and (max-height: 29px) { 
    label { background-color:  red; }
}
@media only screen and (max-width: 697px) { 
    .iconsListArea {
        position: static;
        top: 0px;
        right: 0px;
        height: 62px;
        margin-top: 0px;
        text-align: center
    }
    .iconsListArea img { margin-top: 23px !important; }
}
/* -------------------------------------------------- 
   History List
-------------------------------------------------- */

.historyListDay { margin-bottom: 40px !important; }
.historyListDay ul li span { padding: 15px 20px; }
.listView  * .group3-hidden { background:#f03; }

/* -------------------------------------------------- 
   Pager and Search
-------------------------------------------------- */

.pager, .pagerPoints {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    background-color: #F2F2F2;
    color: #444;
}
.pager:hover, .pager.active { background-color: #d5d5d5; color: #444; }
.pageof { 
    color: #d5d5d5;
    line-height: 30px; 
    text-align: right;    
}
.pagerPoints { background-color: transparent; line-height: 14px; }

.searchButton {
    padding: 9px 20px !important;
}

.clear-search-button {
    color: #191D26;
    display: inline-block;
    line-height: 28px;
    text-decoration: underline;
}
.clear-search-button:hover, .clear-search-button:focus, .clear-search-button:active {
    color: #191D26;
    text-decoration: none;
}

.highlighting {
    color: #009EE0 !important;
    font-weight: bold !important;
}

@media only screen and (max-width: 697px) { 
    .pagerPoints { display: none !important; }    
}

/* -------------------------------------------------- 
   Legend Style
-------------------------------------------------- */
.deviceLegend {
    padding: 15px 0px 20px 0px;
    text-align: right;
}
.deviceLegend span {     
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    border-left: 1px solid #999;
    font-family: 'Open Sans', 'Times', 'Helvetica', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #999;
}
.deviceLegend span.first { padding-left: 0px;  border-left: none; }
.deviceLegend span.last { padding-right: 0px; }

/* -------------------------------------------------- 
   Generally end
-------------------------------------------------- */
.panel { word-wrap: break-word; }
.clear {
    clear: both;
    height: 0;
    font-size: 0;
    padding: 0px !important;
    margin: 0px !important;
}

.topMarginNone { margin-top: 0px !important; }
.topMargin { margin-top: 10px !important; }
.topMarginDouble { margin-top: 20px !important; }
.topMarginTripple { margin-top: 30px !important; }

.bottomMarginNone { margin-bottom: 0px !important; }
.bottomMargin { margin-bottom: 10px !important; }
.bottomMarginDouble { margin-bottom: 20px !important; }
.bottomMarginTirpple { margin-bottom: 30px !important; }
.bottomMarginQuintuple { margin-bottom: 50px !important; }

.leftMarginNone { margin-left: 0px !important; }
.leftMargin { margin-left: 10px !important; }
.rightMarginNone { margin-right: 0px !important; }
.rightMargin { margin-right: 10px !important; }

.topPaddingNone { padding-top: 0px !important; }
.topPadding { padding-top: 10px !important; }
.topPaddingDouble { padding-top: 20px !important; }
.topPaddingTripple { padding-top: 30px !important; }

.leftPaddingNone { padding-left: 0px !important; }
.leftPadding { padding-left: 10px !important; }
.leftPaddingDouble { padding-left: 20px !important; }

.rightPaddingNone { padding-right: 0px !important; }
.rightPadding { padding-right: 10px !important; }
.rightPaddingDouble { padding-right: 20px !important; }

.bottomPaddingNone { padding-bottom: 0px !important; }
.bottomPadding { padding-bottom: 10px !important; }
.bottomPaddingDouble { padding-bottom: 20px !important; }
.bottomPaddingTirpple { padding-bottom: 50px !important; }

.paddingNone { padding: 0px !important; }

.allPaddingNone {  padding: 0px !important; }
.gridPadding { padding-left: 15px; padding-right: 15px; }

.wrapper-nav { background-color: #f2f2f2; }
.wrapper-head { 
    background-color: #999;
    background-image: url(../../wwwres/img/bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}
.wrapper-article-head { background-color: #009EE0; }
.wrapper-article-content { background-color: #FFF; }
.wrapper-article-content.greystyle { background-color: #f2f2f2; }

body { background-color: #d5d5d5; }
body#login-bg { background-color: #fff; }

.comingsoon {
    padding: 30px 0 150px 0;
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: #9e9e9e;
    font-weight: 300;
}

.invite2boxes { padding-left: 150px; }
.invite2boxes.article { padding-left: 196px; }
.invite2boxes input { position: relative; top: 2px; line-height: 30px !important; margin-right: 13px; }
.invite2boxes label { line-height: 30px !important; display: inline-block;}

.gradientFake {
    background-color: #fff;
    background-image: -webkit-linear-gradient(right, #fff 25%, #F2F2F2 25%);
    background-image: -moz-linear-gradient(right, #fff 25%, #F2F2F2 25%);
    background-image: -ms-linear-gradient(right, #fff 25%, #F2F2F2 25%);
    background-image: -o-linear-gradient(right, #fff 25%, #F2F2F2 25%);
    background-image: -webkit-gradient(linear, right top, left top, color-stop(25%,#FFF), color-stop(25%,#F2F2F2));
    padding: 15px 0px;
    margin-bottom: 40px;
}

@media only screen and (max-width: 767px) { 
    .leftPaddingMobile { padding-left: 0px !important; }    
    .bottomMarginInputMobile { margin-bottom: 12px !important; }
    .bottomMarginMobile { margin-bottom: 10px !important; }    
    .topMarginMobile { margin-top: 10px !important; }
    .topMarginNoneMobile { margin-top: 0px !important; }
    .marginNoneMobile { margin: 0px !important; }
    .leftPaddingNoneMobile { padding-left: 0px !important; }
    .rightPaddingNoneMobile { padding-right: 0px !important; }    
    .bottomPaddingNoneMobile { padding-bottom: 0px !important; }
    
    .text-left-mobile { text-align: left; }
    .text-right-mobile { text-align: right; }
    .text-center-mobile { text-align: center; }
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    .show-mobile-inline { display: inline-block; }
    .wrapper-head { 
        background-position: center center;
        background-size: 150%;
    }
    .gridPaddingMobile { padding-left: 15px !important; padding-right: 15px !important; }
    .fullwidth-mobile { width: 100% !important; }
    
    .gradientFake { background-color: #F2F2F2; background-image: none; }
}


.cluetip-tooltip {
    background-color:white;
    font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
}



/* -------------------------------------------------- 
   Timeline Elm
-------------------------------------------------- */

    .tlElm {
        list-style-type: none;          
    }
    .tlData {
        background-color: #f2f2f2;
        padding: 0 20px 20px 20px !important;
        word-wrap: break-word;
    }
    .tlElm li {
        position: relative;
        top: 0;
        left: 0;   
    }        
    .tlLine {
        position: relative;
        top: 0px;
        left: 0px;
    }
    .tlLineEnd {
        position: absolute;
        left: 50%;
        bottom: 0px;
        margin-left: -40px;
        width: 80px;
        height: 2px;
        overflow: hidden;
        background-color: #f2f2f2;
    }
    .tlLineMore {
        position: absolute;
        left: 50%;        
        margin-left: -15px;
        width: 30px;
        height: 28px;
        overflow: hidden;
        background-position: -155px 4px;
        z-index: 0;
    }
    .tlLineMore.top {
        top: 0px;
    }
    .tlLineMore.bottom {
        bottom: 0px;
    }
    
    .tl-arrow-left {
        position: absolute;
        top: 0px;
        left: -1px;
        width: 19px;
        height: 36px;
        z-index: 1;
    }
    
    .tl-arrow-right {
        position: absolute;
        top: 0px;
        right: -1px;
        width: 19px;
        height: 36px;
        z-index: 1;
    }
    
    .tlElm li:hover .tl-plus-icon {
        background-position: -154px -26px;
    }
    .tlElm li:hover .tl-edit-icon {
        background-position: -154px -66px;
    }
    .tlElm li:hover .tl-arrow-left {
        background-position: -89px -278px;
    }
    .tlElm li:hover .tl-arrow-right {
        background-position: -89px -315px;
    }
    .tlElm li:hover .tlData {
        -webkit-box-shadow: inset 1px 1px 0px #009EE0, inset -1px -1px 0px #009EE0; /* webkit browser*/
        -moz-box-shadow: inset 1px 1px 0px #009EE0, inset -1px -1px 0px #009EE0;	/* firefox */ 
        -o-box-shadow: inset 1px 1px 0px #009EE0, inset -1px -1px 0px #009EE0;
        -ms-box-shadow: inset 1px 1px 0px #009EE0, inset -1px -1px 0px #009EE0;
        box-shadow: inset 1px 1px 0px #009EE0, inset -1px -1px 0px #009EE0;        
    }
    .tlElm li:hover .tlTimeFormat {
        color: #333;
    }
    
    .tlTimeFormat {
        font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #999;
    }
    
    .tlData {
        font-family: 'Open Sans', 'Helvetica', Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 16px;
        color: #666;
    }
    
    .tlData span {
        font-family: 'Helvetica', Helvetica, Arial, sans-serif;
        font-weight: normal;
        font-size: 14px;
        display: block;
        margin-top: 18px;
        text-decoration: none !important;
        color: #999;
    }
    
    @media only screen and (max-width: 767px) { 
        .tlElm li { 
            background-color: transparent; 
            background-image: none;
        }
    }

/* -------------------------------------------------- 
   MISC Pages
-------------------------------------------------- */

.misc-html { 
    background: url(../../wwwres/img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.misc-html body { background-color: transparent; height: 100%; }
.headline-misc-pages { margin: 50px 0; color: #fff; font-size: 60px; font-weight: 300; line-height: 1.1; }

.misc-sec { position: relative; top: 50%; margin-top: -200px; }    
.misc-p { color: #fff; font-size: 18px; line-height: 26px; }

/* --------
  OTHER
  ------- */

.OK img  { /* background: #30a030; */ background-position: -89px -174px; }
.WARNING img { /* background:#f0f030; */ background-position: -89px -141px; }
.FAIL img { /* background:#f03030; */ background-position: -89px -110px; }

.tlElm li {
    background: transparent url('../img/tl-bg.jpg') center center repeat-y;
}    

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}

input[type="text"][disabled], input[type="password"][disabled], input[type="date"][disabled], input[type="datetime"][disabled], input[type="email"][disabled], input[type="number"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="time"][disabled], input[type="url"][disabled], textarea[disabled] {
    background-color: #e2e2e2;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}


 .error-wrap {
    display: block;
    position: absolute;
    top: 22px;
    right: 0px;
    margin: 0 5px 0 10px;
    line-height: normal;
    z-index: 10;
    background-position: right -563px;
}
.listView * .error-wrap { min-height: 4px; }

.gridPaddingMobile .error-wrap { margin-right: 20px; }
.two-inputs { position: relative; }
.two-inputs .error-wrap { margin-right: 5px; }

.onedevice * .error-wrap { top: 44px; right: 25px; }
.oneversion * .error-wrap  { top: 51px; right: 25px; }

#MappingFields * .error-wrap { top: 41px; right: 13px; }

.selector .error-wrap { margin: 0 5px 0 10px; top: 22px !important; right: 0px !important; min-height: 4px; }

label.error {
    margin: 4px 0 0 0 !important;
    padding: 5px;
    background-color: #c60f13;
    color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}