/*

My Custom CSS
=============

/* --------------------------------------
   Layout
   -------------------------------------- */
a {
    border: none;
    outline: 0;
}

a img {border:none;}

a:link, a:visited, a:hover, a:active   {
    text-decoration: none;
}
/*
html {height: 100%}
*/
/* removes blue border in chrome and ff*/
:focus {outline:none;}
::-moz-focus-inner {border:0;}

body {
    background: rgba(89,87,91,1);
    background: -moz-radial-gradient(center, ellipse cover, rgba(65,64,66,1) 0%, rgba(27,27,27,1) 100%); /* Old Browsers */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(65,64,66,1)), color-stop(100%, rgba(27,27,27,1))); /* FF3.6+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(65,64,66,1) 0%, rgba(27,27,27,1) 100%);/* Chrome, Safari4+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(65,64,66,1) 0%, rgba(27,27,27,1) 100%);/* Chrome10+,Safari5.1+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(65,64,66,1) 0%, rgba(27,27,27,1) 100%);/* Opera 11.10+ */
    background: radial-gradient(ellipse at center, rgba(65,64,66,1) 0%, rgba(27,27,27,1) 100%);/* IE 10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59575b', endColorstr='#303030', GradientType=1 );/* W3C */
    /* IE6-9 fallback on horizontal gradient */
    background-size: cover;
}

/* --------------------------------------
   general styles
   -------------------------------------- */

.container {
    height: auto;
    width: 100%;
    margin: 0 auto;
}


/* Font-face Icons */
@font-face {
    font-family: 'FontAwesome';
    src:url('../fonts/fontawesome-webfont.eot');
    src:url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/fontawesome-webfont.woff') format('woff'),
    url('../fonts/fontawesome-webfont.ttf') format('truetype'),
    url('../fonts/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontAwesome';
    src:url('../fonts/glyphicons-halflings-regular.eot');
    src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
    url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
    url('../fonts/glyphicons-halflings-regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* --------------------------------------
   change email
   -------------------------------------- */

/* popup close button */

.passclose {
    float: right;
    position: absolute;
    right: 27px;
    top: 14px;
    width: 32px;
}

.heading {
    margin: 0;
    width: 432px;
    height: auto;
}

.heading p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    color: white;
    padding: 9px 0 27px 18px;
}

.thermostat_table {
    width: 100%;
    height: 270px;
    margin: 0 auto;
    border: 1px solid #3f3f3f;
    padding: 0;
}

.title {
      width: 100%;
      padding-left: 15px;
      height: 27px;
}

.title h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: white;
}


.header {
      width: 100%;
      height: 54px;
      background-color: #262627;
      padding: 0;
      margin: 0;
}

.header1 {
    width: 25%;
    height: 54px;
    background-color: #262627;
    float: left;
    border-right: 1px solid #3f3f3f;
    border-bottom: 1px solid #3f3f3f;
}

.header1 p {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: white;
    padding: 18px;
    text-align: center;
}

.header2 {
    width: 49%;
    height: 54px;
    background-color: #262627;
    float: left;
    border-right: 1px solid #3f3f3f;
    border-bottom: 1px solid #3f3f3f;
}

.header2 p {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: white;
    padding: 18px;
    text-align: center;
}

.header3 {
    width: 26%;
    height: 54px;
    background-color: #262627;
    float: right;
    border-bottom: 1px solid #3f3f3f;
}

.header3 p {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: white;
    padding: 18px;
    text-align: center;
}

.contentbox {
      width: 100%;
      height: 108px;
      padding: 0;
      margin: 0;
}

.row1 {
    width: 100%;
    height: 54px;
      padding: 0;
}

.ic2imagebox {
    width: 25%;
    height: 108px;
    float: left;
    border-right: 1px solid #3f3f3f;
    border-bottom: 1px solid #3f3f3f;
}

.ic2imagebox img {
      width: 81%;
      padding: 9px 0 0 0;
      margin: 0 auto;
      display: block;
}

.modeltextbox {
    width: 49%;
    height: 108px;
    float: left;
    border-right: 1px solid #3f3f3f;
    border-bottom: 1px solid #3f3f3f;
}

.introduced {
    width: 100%;
    height: 108px;
    float: right;
    padding: 27px;
}

.introduced p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: white;
    padding: 18px 0 0 18px;
    margin: 0;
    text-align: center;
}

.row2 {
    width: 100%;
    height: 54px;
    padding: 0;
}

.ic3imagebox {
    width: 25%;
    height: 108px;
    float: left;
    border-right: 1px solid #3f3f3f;
    border-bottom: 1px solid #3f3f3f;
}

.ic3imagebox img {
      width: 81%;
      padding: 9px 0 0 0;
      margin: 0 auto;
      display: block;
}

/* desktop table style */

.tftable {
    font-size:12px;
    color:#fbfbfb;
    width:100%;
    margin:0px auto;
}

.table_head p {
    text-align: center;
    margin: 0 0 3px;
}

.tftable th {
    font-size:12px;
    background-color:#262627;
    border-width: 1px;padding: 8px;
    border-style: solid;
    border-color: #404040;
    text-align:left;
}

.tftable tr {
    background-color:transparent;
}

.tftable td {
    font-size:12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #404040;
}

.modelnumber {
      width: 45%;
}

.modelnumber p {
    padding-left: 18px;
}

.modelnumber ul {
    padding: 0;
    padding-left: 18px;
}

.modelnumber ul li {
    color: white;
    list-style: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.imgbox {
      width: 25%;
}

.ic2img {
    width: 72%;
    margin: 0 auto;
    display: block;
}


/* mobile table style */

.tftablemobile {
    font-size:12px;
    color:#fbfbfb;
    width:100%;
    margin:0px auto;
}

.table_headmobile p {
    text-align: center;
    margin: 0 0 3px;
}

.tftablemobile th {
    font-size:12px;
    background-color:#262627;
    border-width: 1px;padding: 8px;
    border-style: solid;
    border-color: #404040;
    text-align:left;
}

.tftablemobile tr {
    background-color:transparent;
}

.tftablemobile td {
    font-size:12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #404040;
}

.modelnumber {
      width: 45%;
}

.modelnumber p {
    padding-left: 18px;
}

.modelnumber ul {
    padding: 0;
    padding-left: 18px;
}

.modelnumber ul li {
    color: white;
    list-style: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.imgbox {
      width: 25%;
}

.ic2img {
    width: 72%;
    margin: 0 auto;
    display: block;
}


.tftablemobile {
    display: none;
}


/* --------------------------------------
Over writing Bootstrap Styles
-------------------------------------- */


.modal-content {
    height: auto;
}

.modalcontainer {
    width: 100%;
    height: 478px;
    border-radius: 0;
}

.modal-dialog {
    width: 720px;
    position: relative;
    top: 99px;
}

.form-horizontal .control-label {
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.form-control {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    display: block;
    width: 81%;
    height: 34px;
    font-size: 14px;
    color: white;
    background-color: #464548;
    background-image: none;
    border: none;
    border-radius: 0;
    position: absolute;
}

.modal-content {
    background-color: #1e1e1e;
    border: none;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    text-align: center;
    border: none;
    margin-top: 0;
}

.modal-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    line-height: 1.42857143;
    text-align: left;
    color: white;
}

.btn-primary {
    color: #fff;
    background-color: #1F1F1F;
    border-color: #3A3A3A;
    width: 378px;
    height: 40px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    border-radius: 0;
    padding-bottom: 4px;
}

.btn-primary:hover {
    border-color: #3A3A3A;
    background-color: #1F1F1F;
}

.btn-lg, .btn-group-lg>.btn {
    padding: 4px 16px;
}


/*---------------------------------------------------
media queries
----------------------------------------------------*/

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 1100px) {

}

@media only screen and (max-width: 765px) {
    .modal-dialog {
        margin: 0!important;
    }

    .modalcontainer {
        width: 100%;
        height: auto;
    }

    .modal-header {
        background-color: #1f1f1f;
        border-bottom: none;
    }

    .btn-primary {
        width: 99%;
    }

    .modal-footer {
        width: 95%;
        margin-top: 0;
    }

    #exampleInputEmail1 {
        position: relative;
        margin: 0 auto;
        background-color: #272728!important;
        border-top: 2px solid #404040;
        border-top: 2px solid #404040;
        height: 44px;
        width: 100%;
    }

    .form-group {
        margin-bottom: -3px!important;
        position: relative;
    }

    .emailclass {
        display: none;
    }

    .passclass {
        display: none;
    }
    
    .tftable {
        display: none;
    }
}


@media only screen and (max-width: 450px) {
    .modal-dialog {
        margin: 0!important;
    }

    .modalcontainer {
        width: 100%;
        height: 522px!important;
        position: relative;
        top: -68px;
    }

    .modal-header {
        background-color: #1f1f1f;
        border-bottom: none;
        padding: 9px!important;
    }

    .btn-primary {
        width: 99%;
    }

    .modal-footer {
        width: 95%;
        margin-top: 0;
    }

    .form-group {
        margin-bottom: -3px!important;
        position: relative;
    }

    .emailclass {
        display: none;
    }

    .passclass {
        display: none;
    }

    .btn-lg, .btn-group-lg>.btn {
        padding: 4px 7px!important;
    }

    .btn-primary {
        color: #fff;
        border-color: #3A3A3A!important;
        background-color: #1F1F1F!important;;
    }
    
    .emaildialogbox {
        width: 99%!important;
        height: 480px;
    }
    
    .title {
      width: 93%!important;
      padding-left: 0!important;
      height: 27px;
    }
    
    .title h4 {
      font-size: 14px!important;
    }
    
    .heading p {
        padding: 0!important;
        font-size: 12px!important;
    }
    
    .heading {
        width: 100%!important;
        margin-bottom: 14px;
    }
    
    .modal-body {
      padding: 9px;
    }
    
    .modal-backdrop.in {
      filter: alpha(opacity=50);
      opacity: 0.81!important;
    }
    
    .tftable {
        display: none;
    }
    
    .tftablemobile {
      display: block;
    }
    
    .introduced {
      width: 100%;
      height: 27px;
      float: right;
      padding: 0;
    }
    
    .introduced p {
      padding: 5px 0 0 0;
    }
    
    .ic2img {
      width: 90%;
      margin: 0 auto;
      display: block;
    }
    
    .modelnumber {
        vertical-align: top;
    }
    
    .modelnumber ul li {
      color: white;
      list-style: none;
      font-family: 'Open Sans', sans-serif;
      font-size: 11px;
      font-weight: 300;
      position: relative;
      top: -12px;
    }
    
    .selecticomtxt {
        z-index: -9999;
    }
    
    /*.qmark img {
      width: 100%;
      float: right;
    }*/
    
    .passclose {
      float: right;
      position: absolute;
      right: 27px;
      top: 6px;
      width: 32px;
    }
    
}

@media only screen and (max-width: 390px) {
    .modal-dialog {
        margin: 0!important;
    }

    .modalcontainer {
        width: 100%;
        height: 522px!important;
        position: relative;
        top: -68px;
    }

    .modal-header {
        background-color: #1f1f1f;
        border-bottom: none;
        padding: 9px!important;
    }

    .btn-primary {
        width: 99%;
    }

    .modal-footer {
        width: 95%;
        margin-top: 0;
    }

    .form-group {
        margin-bottom: -3px!important;
        position: relative;
    }

    .emailclass {
        display: none;
    }

    .passclass {
        display: none;
    }

    .btn-lg, .btn-group-lg>.btn {
        padding: 4px 7px!important;
    }

    .btn-primary {
        color: #fff;
        border-color: #3A3A3A!important;
        background-color: #1F1F1F!important;;
    }
    
    .emaildialogbox {
        width: 99%!important;
        height: 480px;
    }
    
    .title {
      width: 93%!important;
      padding-left: 0!important;
      height: 27px;
    }
    
    .title h4 {
      font-size: 14px!important;
    }
    
    .heading p {
        padding: 0!important;
        font-size: 11px!important;
    }
    
    .heading {
        width: 100%!important;
        margin-bottom: 14px;
    }
    
    .modal-body {
      padding: 9px;
    }
    
    .modal-backdrop.in {
      filter: alpha(opacity=50);
      opacity: 0.81!important;
    }
    
    .tftable {
        display: none;
    }
    
    .tftablemobile {
      display: block;
    }
    
    .introduced {
      width: 100%;
      height: 27px;
      float: right;
      padding: 0;
    }
    
    .introduced p {
      padding: 5px 0 0 0;
    }
    
    .ic2img {
      width: 90%;
      margin: 0 auto;
      display: block;
    }
    
    .modelnumber {
        vertical-align: top;
    }
    
    .modelnumber ul li {
      color: white;
      list-style: none;
      font-family: 'Open Sans', sans-serif;
      font-size: 11px;
      font-weight: 300;
      position: relative;
      top: -12px;
    }
    
    .selecticomtxt {
        z-index: -9999;
    }
    
    /*.qmark img {
      width: 100%;
      float: right;
    }*/
}

@media only screen and (max-width: 360px) {
    
    .modal-dialog {
        margin: 0!important;
    }

    .modalcontainer {
        width: 100%;
        height: 522px!important;
        position: relative;
        top: -68px;
    }

    .modal-header {
        background-color: #1f1f1f;
        border-bottom: none;
        padding: 9px!important;
    }

    .btn-primary {
        width: 99%;
    }

    .modal-footer {
        width: 95%;
        margin-top: 0;
    }

    #exampleInputEmail1 {
        position: relative;
        margin: 0 auto;
        background-color: #272728!important;
        border-top: 2px solid #404040;
        border-top: 2px solid #404040;
        height: 44px;
        width: 100%;
    }

    .form-group {
        margin-bottom: -3px!important;
        position: relative;
    }

    .emailclass {
        display: none;
    }

    .passclass {
        display: none;
    }

    .btn-lg, .btn-group-lg>.btn {
        padding: 4px 7px!important;
    }

    .btn-primary {
        color: #fff;
        border-color: #3A3A3A!important;
        background-color: #1F1F1F!important;;
    }
    
    .emaildialogbox {
        width: 99%!important;
        height: 464px;
    }
    
    .title {
      width: 93%!important;
      padding-left: 0!important;
      height: 27px;
    }
    
    .title h4 {
      font-size: 14px!important;
    }
    
    .passclose {
      right: 9px!important;
      top: 5px!important;
    }
    
    .heading p {
        padding: 0!important;
        font-size: 11px!important;
    }
    
    .heading {
        width: 100%!important;
        margin-bottom: 14px;
    }
    
    .modal-body {
      padding: 9px;
    }
    
    .modal-backdrop.in {
      filter: alpha(opacity=50);
      opacity: 0.81!important;
    }
    
    .tftable {
        display: none;
    }
    
    .tftablemobile {
      display: block;
    }
    
    .introduced {
      width: 100%;
      height: 27px;
      float: right;
      padding: 0;
    }
    
    .introduced p {
      padding: 5px 0 0 0;
    }
    
    .ic2img {
      width: 90%;
      margin: 0 auto;
      display: block;
    }
    
    .modelnumber {
        vertical-align: top;
    }
    
    .modelnumber ul li {
      color: white;
      list-style: none;
      font-family: 'Open Sans', sans-serif;
      font-size: 11px;
      font-weight: 300;
      position: relative;
      top: -12px;
    }
}