/* --------------------------------------------------
   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; }

/* --------------------------------------------------
   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;
}

.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;
}

.button.button-clean.spinner { background: #2BA6CB 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;
}

/* --------------------------------------------------
   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; }

/* --------------------------------------------------
   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 {
    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 {
    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;
}

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;
}

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

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

.panel-nav-a.active {
    background-color: #2BA6CB;
}

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

.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; }
}
/* --------------------------------------------------
   Article
-------------------------------------------------- */
.row-article-head, .row-article-content {
    width: 910px;
}

.panel-article-head {
    background-color: #2BA6CB;
    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;
}

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


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

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

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

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

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

.brandkeyInputs {
    float: left;
}

.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;
}
.listOrder1 {
    background-color: #f2f2f2;
    padding: 20px !important;
}
.listHead2 {
    padding: 10px 10px !important;
    background-color: #D2D2D2;
    color: #222;
}
.slideArrow {
    width: 20px;
    height: 20px;
    display: inline-block;
    float: right;
    background-position: -127px -530px;
}
.text-version { line-height: 28px; }

.slideArrow.close { background-position: -127px -505px }

.listBreak { border-bottom: 5px solid #f2f2f2; }
.listContent li div.columns {
    padding: 20px 20px !important;
    color: #888;
}
.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 { background-color: #f2f2f2; }
.p { background-color: #e8e8e8; }

.inputMargin input, .inputMargin textarea { margin-bottom: 12px; padding: 0px 10px; }
.inputMargin textarea { height: 104px; }
.inputMargin select { margin-bottom: 0px; }
.inputMargin label.error { margin-bottom: 10px;}
.saveVersionEdit { padding-top: 30px !important; text-align: right; }
.oneversionList, .onedeviceList { cursor: pointer; }

.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;
}

@media only label and (max-height: 29px) {
    label { background-color:  red; }
}

/* --------------------------------------------------
   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; }

.deviceLegend {
    padding: 15px 20px;
    background-color: #d5d5d5;
    text-align: right;
}
.deviceLegend span { 
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    border-left: 1px solid #444;
    color: #444;
}
.deviceLegend span.first { padding-left: 0px;  border-left: none; }
.deviceLegend span.last { padding-right: 0px; }

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

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

/* --------------------------------------------------
   Generally end
-------------------------------------------------- */
.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; }
.rightMarginNone { margin-right: 0px !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; }

.bottomPaddingDouble { padding-bottom: 20px !important; }
.bottomPaddingTirpple { padding-bottom: 50px !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: #2BA6CB; }
.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; }
    .topMarginNoneMobile { margin-top: 0px !important; }
    .marginNoneMobile { margin: 0px !important; }
    .leftPaddingNoneMobile { padding-left: 0px !important; }
    .rightPaddingNoneMobile { padding-right: 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; }
    .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;
}

/* --------------------------------------------------
   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; }




div.selector.error { border-color: #c60f13; background-color: rgba(198, 15, 19, 0.1); }

select { opacity: 0; }

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

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

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

.nav-a-keys img { background-position: 0px -327px; }
.nav-a-keys.active img { background-position: -42px -327px; }

.nav-a-certificates img { background-position: 0px -411px; }
.nav-a-certificates.active img { background-position: -42px -411px; }

.nav-a-signatures img { background-position: 0px -369px; }
.nav-a-signatures.active img { background-position: -42px -369px; }


.cert_info { position: relative; top: auto; left: auto;}
.cert_info li { padding: 6px 20px; color: #888; word-wrap: break-word; }
.cert_info li ul li { padding-bottom: 0px; padding-top: 0px;  }
.cert_info * span.dark { padding: 0px; color: #666;  }
.cert-ok { background-color: rgba(15, 198, 19, 0.1); }
.cert-error { background-color: rgba(198, 15, 19, 0.1);	}

/* link to online help */
a.help {
	color: #F2A05F;/* FIXME: @ck please make this pretty */
}