/******** Bootstrap Tabs Centering ********/
/* Don't need to change 'korpnet'.  Used in tab components */

#korpnet-tab-headers.nav-tabs > li, #korpnet-tab-headers.nav-pills > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    zoom: 1; /* hasLayout ie7 trigger */
}

#korpnet-tab-headers.nav-tabs, #korpnet-tab-headers.nav-pills {
    text-align: center;
}

#korpnet-tab-content.tab-content {
    margin-top: 25px;
}

/******** Smaller buttons - used with datatables ********/
.btn-datatable {
    padding: 2px 7px;
}

/******** Add additional space after icon ********/
.nav .glyphicon {
    margin-right: 5px;
}

.fa, .fas, .fal, .far. .fab {
    margin-right: 5px;
}

/******** Dashboard Background Setting ********/
@media screen {
    body {
        background: url(/images/carbon-fiber-texture.jpg) repeat top left;
        height: 100vh;
        margin: 0 auto;
        width: 100%;
    }
}

/******** Quote Detail Formatting ********/
table.quote_detail {
    width: 100%;
    line-height: 13px;
    font-size: 0.8em;
}

table.quote_detail th {
    text-align: left;
    border-bottom: 2px solid black;
}

table.quote_detail td {
    padding: 2px 5px;
}

/******** Correct Print Page Rendering ********/
div.print-page {
    font-family: arial;
}

/******** Rounded Rectangles ********/

.rounded-grey-border {
    height: 100%;
    width: 100%;
    min-height: 20px;
    padding: 8px;
    margin-bottom: 0px;
    background-color: #FFF;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.rounded-grey-well {
    height: 100%;
    width: 100%;
    min-height: 20px;
    padding: 8px;
    margin-bottom: 0px;
    background-color: #EEEEEE;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

/******** Datatables ********/
/*.dataTables_filter{*/
    /*text-align: right !important;*/
/*}*/

.dataTables_filter input {
    width: 85% !important;
}

.dataTables_filter label {
    width: 100% !important;
}

/******** Pricebook ********/
.border-shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 20px;
}

.label-primary {
    color: black;
}

.pricebook-view-image-container {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    vertical-align: center;

}

.pricebook-view-image {
    height: 190px;
    width: 100%;
    max-width: 250px;
    object-fit: cover; /*magic*/
    border: lightgrey 3px double;
    vertical-align: center;
}

.korpnet-image-container {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    vertical-align: center;

}

.korpnet-image {
    height: 190px;
    width: 100%;
    /*max-width: 250px;*/
    object-fit: cover; /*magic*/
    border: lightgrey 3px double;
    vertical-align: center;
}

.korpnet-map {
    height: 190px;
    width: 100%;
    /*max-width: 250px;*/
    /*object-fit: cover; !*magic*!*/
    border: lightgrey 3px double;
    vertical-align: center;
}

.calendar-closed {
    margin-bottom: 2px;
    text-align: center;
    border-color: #777;
    background-color: #777;
}

.calendar-priority1 {
    border-color: #bf5329;
    background-color: #bf5329;
}

.calendar-priority2 {
    border-color: #cbb956;
    background-color: #cbb956;
}

.calendar-priority3 {
    border-color: #3275b5;
    background-color: #3275b5;
}

.calendar-order {
    margin-bottom: 2px;
    text-align: center;
    background-color: #ffc845;
    border-color: #ffc845;
    color: black;
}

.calendar-regulatory-compliance {
    margin-bottom: 2px;
    text-align: center;
    background-color: #ffc845;
    border-color: #ffc845;
    color: black;
}

.help-block {
    color: crimson;
    font-size: 0.8em;
}

/* Inspection Sheets */
.inspection-sheet-table {
    width: 100%;
}

.inspection-sheet-field {
    border: 1px solid black;
    padding-right: 5px !important;
    padding-left: 5px !important;
    vertical-align: top;
}

.inspection-sheet-image {
    height: 120px;
    width: 100%;
    /*max-width: 250px;*/
    object-fit: cover; /*magic*/
    border: lightgrey 3px double;
    vertical-align: center;
}

.social {
    font-size: 2.5em;
    color: #ffc845;
    text-shadow: 1px 1px 1px silver;
}

.social:hover {
    font-size: 2.5em;
    color: black;
    text-shadow: 1px 1px 1px #ffc845;
}

/******** Progress Bar ********/

.bs-wizard {margin-top: 25px;}

/*Form Wizard*/
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: silver; font-size: 0.8em; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum-black {color: black; font-size: 0.8em; margin-bottom: 5px; font-weight: bold}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 25px; height: 25px; display: block; background: #ffc845; top: 32px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot-black {position: absolute; width: 25px; height: 25px; display: block; background: #ffc845; top: 32px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 9px; height: 9px; background: #fbe8aa; border-radius: 5px; position: absolute; top: 8px; left: 8px; }
.bs-wizard > .bs-wizard-step > .bs-wizard-dot-black:after {content: ' '; width: 9px; height: 9px; background: black; border-radius: 5px; position: absolute; top: 8px; left: 8px; }
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 8px 0; background-color: silver; border-bottom: 1px solid silver}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #ffc845;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: silver;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
/*END Form Wizard*/



/* Photo upload */
.cover-photo{
    position:relative;
}

.cover-photo .photo-upload{
    position:absolute;
    right: 22px;
    bottom:12px; 
    z-index:1;
    width:26px;
    height:26px;
    padding: 3px;
    color:#ffc845;
    opacity:0;
    background: black;
    border-radius:9999px;
    transition: 300ms opacity;
}

.cover-photo:hover .photo-upload{
    opacity:1;
}
/* End photo upload */