/* Copyright 2015, Avadine */

/*-------------------------------- Font ---------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/*------------------------------- Layout --------------------------------*/
body {
   margin: 0;
   background-color: #404040;
   font: 14px "Open Sans", sans-serif;
   color: #fff;
   height: 100%;
}

a:hover, a:active, a:visited, a:link, button {
   color: #00b0ff;
}

h1 {
   font-size: 30px;
}

h2 {
   font-size: 24px;
}

.top-absolute {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
}

.bottom-absolute {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
}

.middle {
   position: relative;
   top: 80px !important;
   bottom: 55px !important;
}

/*------------------------------- Header ------------------------------*/
#header {
   margin: 0 10px 0 10px;
   height: 70px;
   padding: 10px 0 0 0;
   min-width: 767px;
}

   #header a {
      text-decoration: none;
   }

      #header a:hover {
         text-decoration: underline;
      }

      #header a#logo {
         float: left;
         outline: none;
         height: 60px;
      }

         #header a#logo img {
            height: 58px;
            border: 0;
         }

   #header div#nav-login {
      text-align: right;
      right: 0;
      height: 30px;
   }

   #header div#nav {
      float: right;
   }

   #header ul#nav-links {
      margin: 8px 0;
      list-style: none;
      padding-right: 10px;
   }

      #header ul#nav-links li {
         display: inline-block;
         margin: 0 0 0 40px;
      }

         #header ul#nav-links li:first-child {
            margin-left: 0;
         }

         #header ul#nav-links li a {
            font-size: 16px;
            line-height: 21px;
            text-decoration: none;
            outline: none;
         }

            #header ul#nav-links li.selected a, #header ul#nav-links li a:hover {
               color: #dedede;
            }

/*------------------------------- Content ------------------------------*/
#content {
   margin: 0 10px 0 10px;
   min-height: 400px;
   min-width: 767px;
}

   #content > h2, #content > h3, #content > h4 {
      margin: 2px 0 2px 0;
   }

/*------------------------------- Footer -------------------------------*/
#footer {
   height: 30px;
   padding: 0;
   margin: 0 10px 0 10px;
   min-width: 767px;
}

   #footer a {
      text-decoration: none;
   }

      #footer a:hover {
         text-decoration: underline;
      }

   #footer p#question {
      float: left;
      margin: 6px 0 6px 5px;
   }

   #footer p#copyright {
      float: right;
      text-align: right;
   }

/*------------------------------ Forms -------------------------------*/
fieldset {
   margin-bottom: 20px;
}

#login-form, #change-password-form, #forgot-password-form {
   width: 220px;
}

   #login-form input[type="password"], #login-form input[type="email"],
   #forgot-password-form input[type="email"],
   #change-password-form input[type="password"] {
      width: 180px;
      margin: 5px;
   }

   #login-form p, #change-password-form p, #forgot-password-form p {
      margin: 5px;
   }

/*------------------------------- Dialog -----------------------------*/
.dialog .k-edit-label {
   width: 25%;
   margin: 0;
   padding: 8px 0 8px 0;
}

.dialog .k-edit-field {
   margin-right: 12px;
}

.dialog .k-tooltip-validation {
   margin-top: 5px;
   margin-left: 35px;
}

.dialog .k-upload-button {
   width: 100px;
   height: 30px;
}

.dialog .button-panel {
   margin: 5px auto;
}

   .dialog .button-panel button {
      color: #00b0ff;
      float: right;
      margin-left: 10px;
   }

   .dialog .button-panel .save-button {
      float: right;
   }

   .dialog .button-panel .cancel-button {
      float: right;
      margin-left: 10px;
   }

#upload-document-form .k-edit-field, #upload-document-form .k-edit-label {
   line-height: 60px;
   padding: 0;
   margin: 3px;
}

   #upload-document-form .k-edit-field > textarea {
      width: 223px;
      height: 50px;
   }

/*------------------------------- Injection Dialog -----------------------------*/
.injection-form .comment-area {
   width: 720px;
}

   .injection-form .comment-area > div {
      margin: 3px;
      text-align: right;
      width: 140px;
      display: inline-block;
      vertical-align: top;
   }

   .injection-form .comment-area textarea {
      margin: 3px 3px 6px 5px;
      width: 523px;
      height: 70px;
      display: inline-block;
   }

.injection-form input:disabled {
   background: #dddddd;
}

.injection-form .k-numerictextbox, .injection-form .k-dropdown, .injection-form .k-datepicker {
   width: 160px !important;
}

.injection-form > div {
   margin: 10px;
}

.injection-form .controls {
   width: 350px;
   float: left;
}

.injection-form .k-edit-field {
   width: 55%;
}

.injection-form .k-edit-label {
   width: 40%;
}

.injection-form .k-edit-field, .injection-form .k-edit-label {
   height: 30px;
   line-height: 30px;
   padding: 0;
   margin: 3px;
}

   .injection-form .k-edit-field > input[type=text] {
      width: 154px;
      height: 15px;
   }

/*------------------------------- Well Test Dialog -----------------------------*/
.welltest-form .comment-area {
   width: 720px;
}

   .welltest-form .comment-area > div {
      margin: 3px;
      text-align: right;
      width: 140px;
      display: inline-block;
      vertical-align: top;
   }

   .welltest-form .comment-area textarea {
      margin: 3px 3px 6px 5px;
      width: 523px;
      height: 70px;
      display: inline-block;
   }

.welltest-form input:disabled {
   background: #dddddd;
}

.welltest-form .k-numerictextbox, .welltest-form .k-dropdown, .welltest-form .k-datepicker {
   width: 160px !important;
}

.welltest-form > div {
   margin: 10px;
}

.welltest-form .controls {
   width: 350px;
   float: left;
}

.welltest-form .k-edit-field {
   width: 55%;
}

.welltest-form .k-edit-label {
   width: 40%;
}

.welltest-form .k-edit-field, .welltest-form .k-edit-label {
   height: 30px;
   line-height: 30px;
   padding: 0;
   margin: 3px;
}

   .welltest-form .k-edit-field > input[type=text] {
      width: 154px;
      height: 15px;
   }

/*------------------------------- Icons -----------------------------*/
.lock-icon {
   background-image: url("/Content/images/lock-icon.png") !important;
}

/*-------------------------- Miscellaneous --------------------------*/

#details-top-toolbar {
   position: absolute;
   top: 0;
   height: 40px;
   line-height: 40px;
   overflow: hidden;
   width: 100%;
}

   #details-top-toolbar > span {
      margin-right: 20px;
      margin-left: 5px;
      float: left;
   }

   #details-top-toolbar > button:disabled {
      color: #fff;
   }

   #details-top-toolbar > button {
      float: right;
      color: #00b0ff;
      margin-top: 8px;
      margin-left: 8px;
   }

#filter-toolbar {
   position: absolute;
   top: 0;
}

.toolbar {
   height: 45px;
   line-height: 45px;
   overflow: hidden;
   width: 100%;
   background-color: #1f2a35;
}

   .toolbar > * {
      margin: 0 0 0 7px;
   }

   .toolbar > :first-child {
      margin: 0 0 0 10px;
   }

   .toolbar > button {
      color: #00b0ff;
   }

   .toolbar .k-dropdown {
      width: 250px;
   }

   .toolbar .k-datepicker {
      width: 125px !important;
   }

   .toolbar input[type=text] {
      width: 154px;
   }

   .toolbar input[type=checkbox] {
      top: 3px;
      position: relative;
   }

.sign-in-button {
   height: 30px;
   width: 80px;
   line-height: 30px;
   border-style: none;
   border-radius: 3px;
   box-shadow: 2px 2px 5px #000000;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
   color: #fff !important;
   display: inline-block;
   text-align: center;
   text-decoration: none !important;
   background-color: #00b0ff;
}

   .sign-in-button:hover {
      background-color: #00C9FF;
   }

   .sign-in-button span {
      height: 16px !important;
      width: 16px !important;
      display: inline-block;
      margin-bottom: -2px;
      background-color: transparent;
      background-repeat: no-repeat;
   }

.info-section {
   padding: 5px 0;
   min-height: 250px;
   margin: 2px auto;
   background: none repeat scroll 0 0 #252f39;
   box-shadow: 0 0 2px #000000, 0 3px 5px #000000;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);
}

   .info-section > div {
      margin: 0 30px 10px 30px;
   }

      .info-section > div.odd {
         border-style: solid none solid none;
         border-color: #ECEDE6;
         border-width: 1px 0;
         background-color: #F8FAF2;
         margin: 0;
      }

         .info-section > div.odd > div.inner {
            margin: 0 30px 10px 30px;
         }

   .info-section h2, .info-section h3 {
      margin-top: 20px;
      margin-bottom: 20px;
   }

   .info-section p {
      text-align: justify;
      color: #fff;
      margin: 0 0 20px;
      line-height: 21px;
   }

      .info-section p a {
         outline: none;
      }

      .info-section p.extra-bottom {
         margin-bottom: 50px;
      }

   .info-section .shot-left {
      margin-right: 25px;
   }

   .info-section .shot-right {
      margin-left: 25px;
   }

.clear-fix {
   clear: both;
}

textarea {
   resize: none;
}

.separator {
   background: #D3D3D3;
   height: 1px;
   margin: 5px 0 5px 0;
}

.field-validation-error, .validation-summary-errors, .invalidRow td {
   color: red !important;
}

.left {
   float: left;
}

.right {
   float: right;
}

.details-button {
   color: #00b0ff;
}

/*-------------------------- Kendo Fixes --------------------------*/
.k-primary, .k-overflow-container .k-primary {
   color: #fff;
   border-color: #232d36;
   background-color: #212a33;
   background-image: url("kendo/textures/brushed-metal.png"), linear-gradient(to bottom, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .1) 100%);
}

   .k-primary:hover {
      color: #fff;
      border-color: #2d3b4f;
      background-color: #40444f;
      background-image: url("kendo/textures/brushed-metal.png"), linear-gradient(to bottom, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .1) 100%);
   }

span .k-invalid-msg {
   height: 18px;
}

span .k-warning {
   height: 16px !important;
}

.k-tabstrip > .k-content, .k-panelbar .k-tabstrip > .k-content {
   padding: .1em 0;
}

.k-button-icontext .k-icon, .k-button-icontext .k-image {
   margin-right: .2rem;
   margin-left: -.2rem;
}

.k-toolbar .k-button, .k-toolbar .k-split-button, .k-toolbar .k-button-group,
.k-toolbar .k-widget, .k-toolbar .k-textbox, .k-toolbar label, .k-toolbar .k-separator {
   margin: 0;
}

.k-toolbar {
   line-height: normal;
}

.k-treeview .k-in {
   line-height: normal;
   margin: 1px;
   padding: 1px 3px 1px 2px;
}

.k-button {
   padding: 0 7px;
}

.k-splitter .k-ghost-splitbar-horizontal, .k-splitter .k-splitbar-horizontal {
   width: 10px;
}

.k-splitbar-horizontal .k-icon {
   left: 25%;
}

.k-grid .k-pager-sizes .k-input {
   width: 50px;
}

.k-grid td {
   white-space: nowrap;
   text-overflow: ellipsis;
   padding: 1px 9px;
}

.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
   min-width: 0;
}

.k-grid tbody tr {
   height: 31px;
}

.k-grid tbody .k-button-icontext .k-icon, .k-grid tbody .k-button-icontext .k-image {
   margin: 0;
}

.k-grid tbody .k-button {
   padding: 0 6px;
}

/*---------------------------- Resizing --------------------------*/
@media (max-width: 980px) {
   #header ul#nav-links {
      padding: 0;
   }

      #header ul#nav-links li {
         margin-left: 8px;
      }
}

@media (max-width: 767px) {
   #header ul#nav-links li {
      margin: 0;
   }

   #header {
      background-position: left 55px, right 55px, left 55px;
      height: auto;
      margin: 0 10px 0 10px;
      padding: 10px 0 0 0;
   }
}

@media (-webkit-min-device-pixel-ratio: 1.2), (min-resolution: 120dpi) {
   .lock-icon {
      background-image: url("/Content/images/lock-icon_2x.png") !important;
      background-size: 16px 16px !important;
   }
}