﻿/* APPLICATION */
body {
    font-size: 16px;
}
/* img{border:solid 0px red; margin:10px;}
.selected{
    box-shadow:0px 12px 22px 1px #333;
}
*/
/* #equations-group {
    img{border:solid 3px gray; margin:10px;}
}    
    */  
.selected{
   // border:solid 5px red; margin:0px;
        color:red;
    //    border:solid 3px #c0c0c0; margin:0px;
    //   font-size: 1.3em;
       

}
.selected2{
  //  border:solid 3px #c0c0c0; margin:0px;
  //  font-weight:900;
    color:red;
   // font-size: 1.5em;
}

.selectedEquation{
    color:red;
}


.hide-for-swap
{
	display:none;
}
#applicationTitleInput
{
	font-size:30px;
	margin-top:13px;
	margin-left:0px;
	padding:5px;
	width:300px;
	vertical-align:middle;
}
#applicationDateInput
{
    font-size:30px;
	margin-top:13px;
	margin-left:0px;
	padding:5px;
	width:215px;
	vertical-align:middle;
    text-align:right;
    float:right;
}
#applicationTitleDiv
{
    padding:0px;
}
#applicationDateDiv
{
    padding:0px;
}
#applicationTitle
{
    margin-bottom:26px;
	margin-left:6px;
}
#applicationDate
{
    margin-bottom:26px;
	margin-right:6px;
    text-align:right;
}

/* ELEMENTS */
.element-input-group
{
    padding-right:15px !important;
}

/* SECTIONS */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
 {
    position: relative;
    min-height: 1px;
    padding-left: 0px;
    padding-right: 15px;
}
.form-control {
    width: 104%;
}
.section-title-bar
{
    padding:0px;
    cursor:pointer;
}
.section-title-bar:focus
{
    outline:none;
}
.section-title
{
    margin:0px;
    padding:2px 0px 0px 0px;
}
.glyphicon-chevron-down
{
    font-size: 20px;
    padding-right:10px;
    /*padding-left:25px;*/
    float:right;
    text-align:right;
    height:21px;
}
hr
{
    border-color:#e6e6e6;
    margin-top:13px;
    padding:0px !important;
}
@media (min-width: 720px)
{
    .section-title-bar
    {
        height:30px;
    }
    .section-title-bar:hover
    {
        cursor:pointer;
    }
    .section-title-bar:hover > .section-title
    {
        font-size:25px;
        padding:0px;
        color:#000000;
        /*font-weight:bold;*/
    }
    .section-title-bar:focus > .section-title
    {
        font-size:25px;
        padding:0px;
        color:#000000;
        /*font-weight:bold;*/
    }
    .section-title-bar:hover > .glyphicon-chevron-down
    {
        font-weight:bold;
        color:#000000;
    }
    .section-title-bar:focus > .glyphicon-chevron-down
    {
        font-weight:bold;
        color:#000000;
    }
    .section-title
    {
        height:28px;
    }
}

@media (max-width: 719px)
{
    .section-title
    {
        height:30px;
        font-size:18px;
    }
    .glyphicon-chevron-down
    {
        padding-left:3%;
        font-size:18px;
    }
    .input-sm
    {
        height:26px;
        font-size:11px;
    }
    .input-group-addon
    {
        font-size:11px;
    }
    .form-group
    {
        margin-bottom:10px;
    }
}
@media (max-width: 539px)
{
    .section-title
    {
        font-size:14px;
    }
    .glyphicon-chevron-down
    {
        font-size:15px;
    }
}
#myCanvas {
   width: 100%;
   text-align:center;
}

/* WELLS */
.section-well
{
    padding:0px;
}
.well
{
    margin-top: 10px;
    margin-bottom: 0px;
}

/* DEVICES */
label
{
    margin-top:5px;
}
.disabled-element
{
    cursor:text !important;
}
.primary-device
{
    margin-bottom:15px;
}
.device-title-div
{
    padding-left:0px;
}
.device-title, .device-btn
{
    padding:0px;
}
.device-btn
{
    padding-top:6px;
}
.add-device-btn
{
    height:25px;
    width:25px;
    float:right;
    padding:0px 0px 0px 1px;
}
.remove-device-btn
{
    height:25px;
    width:25px;
}
.add-case-btn
{
    margin-left:3px;
}
.add-subtract-case-form-group
{
    margin-bottom:0px;
}
.displacement-btn-label
{
    font-weight:normal;
    margin-top:5px;
}
.displacement-radios-and-min-displacement 
{
    padding:0px;
}
.motor-weight-label
{
    /*padding:4px 5px;*/
    text-align:center;
}
.motor-weight-div
{
    padding:0px;
}
td, th
{
    padding:3px;
}
.ohl-table-form-group, .form-horizontal .form-group
{
    margin-left:0px !important;
    margin-right:0px !important;
}
.table-header
{
    text-align:center;
}
.table-element-label
{
    padding-left:0px !important;
}
.table-input-group-addon
{
    border:1px solid #ccc !important;
    border-radius:4px !important;
    display:initial;
    padding-bottom:5px;
}
.device-family-selector, .device-model-selector
{
    display:inline;
    width:auto;
}
@media (min-width: 1080px)
{
    .add-device-btn, .remove-device-btn
    {
        margin-right:15px;
    }
}
@media (max-width: 719px)
{
    .table-input-group-addon-table-data
    {
        padding-top:1px;
    }
    .device-family-selector, .device-model-selector
    {
        /*width:48%;*/
        padding:3px;
        font-size:13px;
    }
}
@media (max-width: 539px)
{
    .device-family-selector, .device-model-selector
    {
        font-size:12px;
    }
    .device-model-selector
    {
        float:right !important;
    }
}
@media (max-width: 360px)
{
    
    .device-selectors
    {
        padding:0px;
    }
}

/* Fix for inputs without rounded corners that is due to nesting of custom element templates */
ohl-input-input .ohl-input-table-input
{
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
}


.clicked {
    color: red;
    border: 1px solid gray;
    background-color:lightgray;
    margin:2px;
}

.notClicked {
    border: none;
}

/*Coefficient input box*/


.input-with-icon {
  /* causes absolute icon div to be positioned correctly */
  position: relative;
  
  /*width: 25rem;*/
  height: 3.2rem;
  box-sizing: border-box;
}

.input-with-icon .form-control {
    height: 100%;
    width: 100%;
    padding-right: 3.65rem;
    box-sizing: border-box;
}

.input-with-icon .icon {
  position: absolute;
  
  /* These are set relative to the height of the input box to bound the box neatly inside. This is aesthetic to me but you may change the dimensions of course. */
  right: 0.3rem;
  top: 0.3rem;
  width: 2.6rem;
  height: 2.0rem;
  border-radius: 0.3rem;
  
  /* content in the icon div is centered, without bootstrap or font-awesome you may wish to add your own text in the span */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/*Adjustments for modal spacing*/
.modal-header {
       margin-bottom: 10px;
}



.owl-prev {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 25%;
    margin-left: -5px;
    padding-right: 20px;
    display: block !important;
    border:0px solid black;
}

.owl-next {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 25%;
    right: 5px;
    display: block !important;
    border:0px solid black;
}
.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;}

.owl-carousel .owl-stage-outer {
margin-left:10px;
margin-right:10px;
}


.modal{
    max-width: 100%;  
 /*   margin-left:-17%;  width/2) */ 
}

/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
input[type="number"] {
    -moz-appearance: textfield;
}

.item {
    height: 300px;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    cursor: not-allowed;
    color: #e6e6e6;
    background-color: #505050;
    opacity: 1;
}

