﻿.selectCSS {
    /*font-family: Roboto;*/
    background: #e8e8e8;
    border: 1px solid #c3c3c3;
    border-radius: 4px;
    width: 165px;
    padding: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #3F3F3F;
    cursor: pointer;
    /* Here's the code we need */
    /*-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;*/
}



.select-wrapper {
    position: relative;
}

#dropdownIcon {
    /*font-family: FontAwesome;
  	content: '\f108';*/
    font-size: 20px;
    position: absolute;
    top: 10px;
    right: 25px;
    color: #434B67;
    pointer-events: none;
}


.factorsCSS {
    /*font-family: Roboto;*/
    background: #e8e8e8;
    border: 1px solid #c3c3c3;
    border-radius: 4px;
    width: 175px;
    padding: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #3F3F3F;
    /* Here's the code we need */
    /*-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;*/
}

.factorsCSSCustom {
    /*font-family: Roboto;*/
    background: #ffffff;
    border: 1px solid #c3c3c3;
    border-radius: 4px;
    width: 175px;
    padding: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #3F3F3F;
    /* Here's the code we need */
    /*-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;*/
}

.factorsSelectCSS {
    /*font-family: Roboto;*/
    background: #e8e8e8;
    border: 1px solid #c3c3c3;
    border-radius: 4px;
    width: 175px;
    padding: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #3F3F3F;
    /* Here's the code we need */
    /*-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;*/
}

.resultsCSS {
    /*font-family: Roboto;*/
    background: #eeeeee;
    border: 1px solid #cccccc;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    width: 75px;
    padding: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #555555;
    display: block;
    margin-left: auto;
    text-align: center;
    /*margin-right: auto;*/
}


.resultsCSSRed {
    /*font-family: Roboto;*/
    background: #C3000F;
    border: 1px solid #000000;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    width: 75px;
    padding: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #ffffff;
    display: block;
    margin-left: auto;
    text-align: center;
    /* Here's the code we need */
}

.resultsColumn1 {
    /*font-family: Roboto;*/
    background: #D3D3D3;
    border: 1px solid #ffffff;
    border-radius: 4px;
    width: 75px;
    padding: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    /* Here's the code we need */
    /*-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;*/
}

.resultsColumn2 {
    /*font-family: Roboto;*/
    background: #D3D3D3;
    border: 1px solid #ffffff;
    border-radius: 4px;
    width: 75px;
    padding: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    /* Here's the code we need */
    /*-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;*/
}


.resultsCSS2 {
    /*font-family: Roboto;*/
    background: #d3d3d3;
    border: 1px solid #000000;
    border-radius: 4px;
    width: 75px;
    padding: 5px;
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    /* Here's the code we need */
    /*-webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;*/
}

.buttonCSS {
    /*font-family: Roboto;*/
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
    color: red;
    cursor: pointer;
    background-image: none;
    border: 1px solid red;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}

.buttonCSS:hover {
    /*font-family: Roboto;*/
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    background-color: #c3000f;
    color: white;
    cursor: pointer;
    background-image: none;
    border: 1px solid red;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.addButtonCSS {
    /*font-family: Roboto;*/
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    background-color: #707070;
    color: #ffffff;
    cursor: pointer;
    background-image: none;
    border: 1px solid #808080;
    border-top-color: #808080;
    border-right-color: #808080;
    border-bottom-color: #808080;
    border-left-color: #808080;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.addButtonCSS:hover {
    /*font-family: Roboto;*/
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    background-color: #ffffff;
    color: #707070;
    cursor: pointer;
    background-image: none;
    border: 1px solid #808080;
    border-top-color: #808080;
    border-right-color: #808080;
    border-bottom-color: #808080;
    border-left-color: #808080;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.specs {
    text-align: center;
}

.errorStyle {
  color: #000000;
  text-align: center;
  border-radius: 15px;
  background: #d8d8d8;
  padding: 10px; 
  width: 100%;
  height: 100%; 
  margin-bottom:10px;
}

.errorStyle2 {
  color: #ffffff;
  text-align: center;
  border-radius: 15px;
  background: #C3000f;
  padding: 10px; 
  width: 100%;
  height: 100%; 
  margin-bottom:10px;
}

.errorRedBox {
background: #C3000F;
color:#FFFFFF;
border: 1px solid #f00;
border-radius: 4px;
text-align: center;
}

  .buttonRedCSS {
    display: inline-block;
    margin-bottom: 0;
    margin-top:5px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    background-color: #e8e8e8;
    cursor: pointer;
    background-image: none;
    border: 2px solid #000000;
    color: #000000; 
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    #pumpHeader {
        width: 100%;
    }

    .buttonCSS {
        width: 100%;
    }

    .addButtonCSS {
        width: 100%;
    }

    #lastColumn {
        display: none;
    }
}

@media (min-width: 1001px) {
    #pumpHeader {
        width: 70%;
    }
    .buttonCSS {
        width: 70%;
    }

    .addButtonCSS {
        width: 70%;
    }
}

/*iPhone Portrait Mode*/
@media all and (max-width: 479px) {
    .input-group-addon {
        display: none
    }

        .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
            border-bottom-right-radius: 5px;
            border-top-right-radius: 5px;
        }

    #shockFactor {
        margin-bottom: 10px;
    }
    .selectCSS {
        width: 100%;
    }

    #pump1, #pump2, #pump3, #pump4 {
        margin-left: 20%;
        margin-right:20%;
    }

    .addButtonCSS {
        
        margin-left: 20%;
    }

    .buttonCSS {
        /*margin-left:20%;*/
        margin-bottom:30px;
    }

    #delete2 {
        margin-left:20%;
    }
}

/*iPhone landscape*/
@media (max-device-width : 999px) and (orientation : landscape) {
    .selectCSS {
        width: 100%;
    }

    #pumpNumberHeader {
        font-family: Roboto;
        font-size: .8em !important;
        font-weight: bold;
        color: #707070;
        text-align:right;
    }
}

#pumpNumberHeader {
    font-family: Roboto;
    font-size: 1.5em;
    font-weight: bold;
    color: #707070;
}

.lwHeaders {
    font-family: Roboto;
    font-size: 1.2em;
    font-weight: bold;
    color: #707070;
    text-align: left;
}

#specFields {
    /*width:165px !important;
    margin-left:5px;*/

}

.td:hover {
    background:#000000;
}

.select2-results__option--highlighted {
    color: white !important;
    background-color: darkgreen !important;
}
