﻿body {
    font-family: "robotolight";
    padding-top: 50px;
    padding-bottom: 20px;
}

/****************/
/*Region HEADERS*/
/****************/

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "robotothin";
    color: #bfff2f;
    margin-left: 0;
}


h1,
.h1 { font-size: 48px; }

h2,
.h2 { font-size: 36px; }

h3,
.h3 { font-size: 28px; }

h4,
.h4 {
    font-size: 24px;
    color: white;
}

h5,
.h5 { font-size: 18px; }

h6,
.h6 { font-size: 16px; }

#href .a{
    color: #bfff2f;
}

.h6.White {
    color: white;
}
.h5.White {
    color: white;
}
.h4.White {
    color: white;
}
.h3.White {
    color: white;
}
.h2.White {
    color: white;
    font-weight: 600;
}
.h1.White {
    color: white;
    font-weight: 800;
}

.defaultHighlightText {
    color: #bfff2f !important;
}

.mainInfoTextDiv {
 /*padding-left: 25px;padding-right: 25px; margin-top: 30px;*/ font-size: 18px;color: #EEEEEE;text-align: justify;;   
}

.textDivWrapper {
    background-color: rgba(20,20,20,0.5);
}


.semiTransparentSmallPadding {
    background: gray; 
    background: rgba(10, 10, 10, 0.5);
    padding: 10px;
}

.darkTransparentSmallPadding {
    background: gray;
    background: rgb(10, 10, 10);
    background: rgba(10, 10, 10, 0.75);
    padding: 10px;
}

.nonTransparentSmallPadding {
     background: gray; 
    background: rgb(10, 10, 10);
    padding: 10px;
}

/*Default banner*/
.banner-Background {
    background-image: url(img/iStock_xs.jpg);
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
}


.mainInfoDiv {
    background: gray;
    background: rgba(30, 30, 30, 0.6);
    min-height: 450px;
    margin-bottom: 70px;
    padding-top: 30px;
}

.mainLoginDiv {
    background: black;
    background: rgba(10, 10, 10, 0.95);
    height: 450px;
    padding-top: 20px;
}


.centerParent { text-align: center; }

.centerParent .centerX {
    margin-left: auto;
    margin-right: auto;
    right: 0;
    left: 0;
    display: table;
}

.clearNoSpace { clear: both; }

.clearXSmallSpace {
    clear: both;
    height: 5px;
}

.clearSmallSpace {
    clear: both;
    height: 10px;
}

.clearMediumSpace {
    clear: both;
    height: 20px;
}

.clearLargeSpace {
    clear: both;
    height: 50px;
}

.clearXLargeSpace {
    clear: both;
    height: 100px;
}


.marginSmall {
    margin: 10px;
}

.marginSmallY {
     margin-top: 10px;
     margin-bottom: 10px;
}

.marginSmallRight {
    margin-right: 10px;
}

.marginSmallLeft {
    margin-left: 10px;
}

.paddingSmall {
    padding: 10px;
}
.paddingNone {
    padding: 0px; 
}

/****************/
/*Region button*/
/***************/
.btn {
    border-radius: 7px;
}

.btn-default {
    border: 2px solid #bfff2f;
    width: 250px;
    color: #bfff2f;
    background-color: black !important;
}

.btn-default.Wide { width: 280px; }

.btn-default.Medium { width: 150px; }

.btn-default.Narrow { width: 120px; }
.btn-default.XNarrow { width: 100px; }


.btn-default.Large {
    height: 70px;
    padding-top: 15px;
    font-size: 24px;
}

.btn-warn {
    border: 2px solid orangered;
    color: orangered;
    background-color: black !important;
}

.btn-warn.Wide { width: 280px; }

.btn-warn.Medium { width: 150px; }

.btn-warn.Narrow { width: 120px; }

    
.btn-primary {
    border: 2px solid #bfff2f;
    color: #bfff2f;
    color: black;
    background-color: #bfff2f !important;
    width: 250px;
  }
.btn-primary.Wide { width: 280px; }

.btn-primary.Medium { width: 150px; }

.btn-primary.Narrow { width: 120px; }

.btn-primary.Slim { height: 20px; }

.loginBtn {
    height: 20px;
    color: white !important;
    margin-top: 8px;
    line-height: 1px !important;
}
    
.btn-imagebutton /*, .btn-imagebutton:hover, .btn-imagebutton:focus*/
{
    background-repeat: no-repeat;
    background-position: 5px 5px; 
    width: 250px;
    height: 60px;
    /*color: #D9D9D9;
    border: 1px solid;*/
    margin: 10px 10px 10px 0;
}

.btn-imagebutton-cloud, .btn-imagebutton-cloud:hover, .btn-imagebutton-cloud:focus {
    background-image: url('img/HouseBaseCloud-48x48.png');
}

.btn-imagebutton-remote, .btn-imagebutton-remote:hover, .btn-imagebutton-remote:focus {
    background-image: url('img/HouseBaseRemote-48x48.png');
}

.btn-imagebutton-config, .btn-imagebutton-config:hover, .btn-imagebutton-config:focus {
    background-image: url('img/Wrench-48x48.png');
}

.btn-imagebutton .title {
    display: block;
    margin-top: -6px;
    margin-left: 50px;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
}

.btn-imagebutton .subtitle {
    display: block;
    margin-top: 0;
    text-align: left;
    margin-left: 50px;
    font-size: 11px;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}


/*************/
/*Region MENU*/
/*************/
.navbar-brand img {
    margin-top: -6px;
}

.navbar-text {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 24px;
    margin-right: 8px;
    margin-left: 8px;
}

/*todo remove?*/
.navbar-brand img:hover, .navbar-brand img:focus {
    /*
    margin-top: -10px;
    width: 40px;
    height: 40px;
    */
}

.navbar .glyphicon {
    font-size: 24px;
    margin-top: -3px;
}


.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #bfff2f;
    outline: none;
}
.navbar-inverse .navbar-nav > li > a {
    color: #888;
    outline: none;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
  	color: #bfff2f;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    color: #bfff2f;
    background-color: transparent;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: black;
    color: #bfff2f;
    /*background-color: #bfff2f;*/
    background-color: transparent;
}
.navbar-nav > li > .dropdown-menu {
    border: 1px solid #bfff2f;
}
/*.nav > li:hover > a:after{*/
/*.nav > li > a:after{*/
/*.dropdown-menu > li > a:after{*/
.dropdown-menu > li > a:before{
/*.nav > a:after{*/
	content:"";
	height:0;
	width:0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #bfff2f;
	position:absolute;
	/*bottom:-1px;*/
	top:-7px;
	left:15%;
	margin:0 0 0 -3px;
	z-index:100;	
}

a[href*="language"]:before {
    right: 15% !important;
    left: unset !important;
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid  #bfff2f;
}



:focus {outline:none;}
::-moz-focus-inner {border:0;}

select.short-control,
input.short-control {
    max-width: 120px;
}


/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea,
option,
select {
    max-width: 280px;
    border-color: #bfff2f !important;
    border-width: 2px !important;
    background-color: gray !important;
    color: white;
}

.form-control,address { 
    color: white;
}

input {
    color: white !important;
}

.control-label {
    color: white;
}

label {
    color: #bfff2f;
    font-weight: normal;
}

.label.larger {
    font-size: 16px;
}
span {
    color: white;
}

.text-danger, .text-danger > span {
    color:rgb(255,110,0) !important;
}

.bulletPoint-normal {
    font-weight: inherit;
    color: #EEEEEE;
    font-size: 18px;
}

.bulletPoint-Highlight {
    font-weight: bolder;
    color: white;
    font-size: 18px;
}

.defaultHouseBase {
    -webkit-box-shadow: inset 1px 1px 10px 1px rgba(219, 189, 30, 1);
    -moz-box-shadow: inset 1px 1px 10px 1px rgba(219, 189, 30, 1);
    box-shadow: inset 1px 1px 3px 1px rgba(219, 189, 30, 1);
    border-color: rgba(219, 189, 30, 0.7);
    background-color: rgba(219, 189, 30, 0.7) !important;
    color: white;
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  
  border-bottom: 6px solid green;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  
  border-top: 6px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}

.optionLabel {
    min-width: 80px;
    max-width: 400px;
    float: left;
}


/*crown symbol*/
.corwn {
    background-image: url(img/crown.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: 7px;
    background-position-y: 1px;
}

.paypal {
    background-image: url(img/paypal.png);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    
    background-position-x: 25px;
    background-position-y: 4px;
}

.payment_paypal {
    background-image: url(img/payment_paypal_black.png);
    background-repeat: no-repeat;
    height: 37px;
    width: 115px;
    background-size: contain;
    background-position-x: 1px;
    background-position-y: 6px;
}

.payment_invoice {
    background-image: url(img/payment_post_black.png);
    background-repeat: no-repeat;
    height: 37px;
    width: 115px;
}

.brokenChain {
    background-image: url(img/broken_chain.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: 7px;
}

.trusted {
    background-image: url(img/trust.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    width: 30px;
}

.quantityInput {
    width: 50px;
    height: 25px;
    padding-right: 0px;
    padding-left: 7px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.round-small-div {
    /*margin-right: 10px;*/
    /*margin-left: 15px;*/
    height: 20px;
    width: 20px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    line-height: 20px;
    background-color: #bfff2f;
    cursor: pointer;
    /*background-image: url(img/plus75x75.png);
    background-repeat: no-repeat;
    background-size: cover;*/
}

.round-small-div.Delete {
    background-color: rgb(250, 10, 10);
    background-color: rgba(250, 10, 10, 0.7);
    float: right;
}

.round-small-div.Delete:hover { background-color: rgba(250, 10, 10, 1); }


.shop-Plus {
    color: black !important;
    font-weight: 800;
    font-size: 19px;
}

.noselect  {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.required:after 
{
    content: " *";
    font-weight: bold;
}

.addressBox {
    border: 1px solid #bfff2f;
    border: 1px solid rgba(214,230,19,0.5);
    min-width: 160px;
    max-width: 200px;
    min-height: 245px;
    margin: 5px;
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
.addressBox:hover {
      border: 1px solid #bfff2f;
}

.editBtn {
    min-width: 115px;
}

.tooltip {
    /*position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;
    height: 20px;
    width: 20px;*/



    position: absolute;
    display: inline-block;
    border-bottom: 1px dotted black;
    height: 20px;
    width: 20px;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1500;
    top: -5px;
    left: 105%; 
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

[tooltip]:before {
    /* needed - do not touch */
    content: attr(tooltip);
    position: absolute;
    opacity: 0;
    
    /* customizable */
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

[tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;
    
    /* customizable */
    background: black;
    color: white;
    margin-top: -50px;
    margin-left: 20px;
    z-index: 1000;
}

[tooltip]:not([tooltip-persistent]):before {
    pointer-events: none;
}


.logfileCode {
    color: white;
    font-size: 12px;
    font-family: "Courier New";
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.logfileCode td {
    vertical-align: top;
    padding-left: 10px;
    word-wrap: break-word;
}



.cookie-PopUp {
    z-index: 10;
    max-width: 550px;
     background-color: lightgray;
    background-color: rgba(10, 10, 10, 0.7);
    border: 1px solid black;
    display: inline-block;
    position: fixed;
    /*top: 0;*/
    bottom: 0;
    left: 0;
    padding: 5px;
    /*right: 0;*/
    /*height: 150px;*/
    /*margin: auto 0;*/
}

.cookie-PopUp .close-cookie {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border: 2px solid #555;
    border-radius: 20px;
    background-color: green;
    text-align: center;
    cursor: pointer;
    line-height: 16px;
}

.cookie-PopUp .close-cookie .Confirm {
       line-height: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 300;
    color: white !important;
     	
}

.facebook-black {
    background-image: url('/Content/img/facebook_black.png');
    height: 60px;
    width: 60px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.youtube-black {
    background-image: url('/Content/img/youtube_black.png');
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.linkedIn-black {
    background-image: url('/Content/img/linkedin_black.png');
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: 10px;
    margin-left: 10px;
}

.xing-black {
    background-image: url('/Content/img/xing_black.png');
    height: 45px;
    width: 45px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: 5px;
}

.twitter-black {
    background-image: url('/Content/img/twitter_black.png');
    height: 60px;
    width: 60px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.font-color-yellow {
    color: #bfff2f;
}


.black { color: #000000 !important; }

.blackBG { background-color: #000000 !important; }

.blackSemiTransparentBG {
    background-color: #000000;
    background-color: rgba(0,0,0,0.6) !important;
}

.grayBG { background-color: #444 !important; }


.graySemiTransparentBG {
    background-color: #444;
    background-color: rgba(80,80,80,0.65) !important;
}




.grayBorderBot { border-bottom: 1px solid gray; }

.grayBorderTop {
    border-collapse: collapse;
    border-spacing: 0px 0px;
    border-top-color: rgb(40, 40, 40);
    border-top-style: solid;
    border-top-width: 1px;
}

.white { color: white !important; }

.green { color: #bfff2f; }


.font-10 { font-size: 10px !important; }

.font-11 { font-size: 11px !important; }

.font-12 { font-size: 12px !important; }

.font-13 { font-size: 13px !important; }

.font-14 { font-size: 14px !important; }

.font-15 { font-size: 15px !important; }

.font-16 { font-size: 16px !important; }

.font-18 { font-size: 18px !important; }

.font-20 { font-size: 20px !important; }

.font-22 { font-size: 22px !important; }

.font-25 { font-size: 25px !important; }

.font-30 { font-size: 30px !important; }

.font-35 { font-size: 35px !important; }

.font-40 { font-size: 40px !important; }

.font-45 { font-size: 45px !important; }

.font-50 { font-size: 50px !important; }

.font-60 { font-size: 60px !important; }

.text-justify { text-align: justify !important; }

.m-5 { margin: 5px; }

.m-10 { margin: 10px; }

.m-15 { margin: 15px; }

.m-20 { margin: 20px; }

.m-25 { margin: 25px; }

.m-30 { margin: 30px; }

.m-40 { margin: 40px; }

.m-50 { margin: 50px; }

.mw-50 { max-width: 50%; }

.mw-100 { max-width: 100%; }

.b-0 { border: 0px !important; }

.text-right { text-align: right; }

.text-left { text-align: left; }

.text-center { text-align: center; }

.align-left { float: left; }

.align-right { float: right; }

.vertical-align-bot { vertical-align: bottom; }

.inline-center {
    text-align: center !important;
    display: block !important
}

.inline-center div {
    display: inline-block;
    text-align: left;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-underline {
    text-decoration: underline;
}


.btn-info {
  color: #ffffff;
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info:focus,
.btn-info.focus {
  color: #ffffff;
  background-color: #31b0d5;
  border-color: #1b6d85;
}
.btn-info:hover {
  color: #ffffff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  color: #ffffff;
  background-color: #31b0d5;
  border-color: #269abc;
}
.btn-info:active:hover,
.btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info:active.focus,
.btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus {
  color: #ffffff;
  background-color: #269abc;
  border-color: #1b6d85;
}
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus,
.btn-info[disabled].focus,
fieldset[disabled] .btn-info.focus {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info .badge {
  color: #5bc0de;
  background-color: #ffffff;
}