@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:700');
@import url('https://fonts.googleapis.com/css?family=Patua+One');

.site-title
{
    font-family: 'Patua One', cursive;
    font-weight: 500;
    font-size: 26px;
    margin-right: 5px;
}

/* Move down content because we have a fixed navbar that is 50px tall */
body
{
    margin-top: 70px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fcfcfc;
}

#mapid {
    min-height: 600px;
}

/* Reduce margin/padding in map popups */
.leaflet-popup-content{
    margin: 0 7px !important;
    padding-right: 8px; /* Allow the close button to not overlap */
}

.leaflet-container a.leaflet-popup-close-button {
    padding: 2px 0 0 0; /* Puts close button closer to border*/
}

#login
{
    margin: 33.333% 0;
    text-align: center;
    border: 1px solid #e3e3e3;
    font-size: 100%;
}

#login h1
{
    margin-bottom: 60px;
    margin-top: 30px;
    font-size: 63px;
}

#login .form-group
{
    margin: 0;
}

#login .form-control
{
    height: auto;
    font-size: 30px;
    margin: 10px 0;
    color: #555;
}

#login .btn
{
    padding: 8px 12px;
    margin-top: 20px;
    width: 100%;
}

h1, h2, h3, h4
{
    font-family: 'Roboto Slab', serif;
    margin-top: 5px !important;
}

.well-sm {
    padding: 10px !important;
    border-radius: 3px;
}

.main-title
{
    text-transform: uppercase;
    font-weight: bold;
}

#main_menu > .well
{
    list-style-type: none;
}

#main_menu li{
    list-style-type: none;
}

/* This re orders the main page at the lg break point */
@media (max-width: 1200px )
{
    #main_menu { order:1 ; }
    #recent_blasts { order:2 ; margin-top: 0 !important; }
    #recent_results { order:3 ; margin-top: 0 !important; }
}

.flex-container
{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*@media (min-width: 768px)
{
    .page-title
    {
        text-align: right;
    }
}*/

#navbarCollapse, #footer_bar {} /*Applies to the navbar and footer*/

.fill
{
    padding-bottom: 50px; /*Stop sticky footer from overlapping content*/
    background-color: #FEFEFE;
}

.table-bordered>thead>tr>td, .table-bordered>thead>tr>th, .table>tbody>tr /* :nth-of-type(even) */
{
    border-spacing: 0;
    background-color: #FEFEFE;
}

.table-hover>tbody>tr:hover
{
    background-color: #F2F2F2 !important;
}

.pagination>li.active>a
{
    background: #C90202 !important;
    color: #FFF !important;
    border-color: #C90202 !important;
}

.pagination>li>a
{
    color: #C90202 !important;
    border: 1px solid #C90202 !important;
}

.pagination>li>a:focus
{
    outline: none;
}

.form-group > .btn-default,
:not(.btn-group) > .btn-default
{
    text-shadow: 2px 2px 5px #050505;
    color: #F8F8F8;
    background-image: -webkit-linear-gradient(top,#C90202 0,#F11212 100%);
    background-image: -o-linear-gradient(top,#C90202 0,#F11212 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#C90202),to(#F11212));
    background-image: linear-gradient(to bottom,#C90202 0,#F11212 100%);
    background-repeat: repeat-x;
    border-color: #C90202;
}

.form-group > .btn-group > .active {
    text-shadow: 2px 2px 5px #050505;
    color: #F8F8F8;
    background-color: #286090;
    border-color: #286090;
}

/* Stop button having an inner outline */
button:focus, button:focus-visible, button:active {
    outline: none !important;
}

.btn
{
    font-family: 'Roboto Slab', serif;
}

:not(.btn-group) > .btn-default:hover, :not(.btn-group) > .btn-default:focus, :not(.btn-group) > .btn-default:active
{
    color: #FFF;
    background-color: transparent;
    background-position: 0;
}

.btn-wide
{
    padding: 6px 30px 6px 30px;
    font-size: 1.2em;
}

.btn-large
{
    font-size: 0.8em;
    padding: 4px 15px;
}

.btn-form-inline /* Used to thin a btn that is inline with an input box so they are the same height and moves slightly closer */
{
    padding: 4px 10px;
    margin-left: -7px;
}

.btn-dl
{
    margin-left: 0;
}

@media (min-width: 768px)
{
    .btn-dl
    {
        margin-left: 180px;
    }
}

.label-disabled /* View edit_results second review and js for how to use */
{
    margin-left: 10px !important;
    cursor: not-allowed;
    pointer-events: none;
}

form .input-sm, form .form-control, form .btn
{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    /*color: #333;*/
}

.form-control[disabled] /* this applies to disabled form input for edit_results of a blast */
{

}

.form-control:focus
{
    border-color: rgba(201, 2, 2, 0.6);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(201, 2, 2, 0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(201, 2, 2, 0.6);
}

.form-group
{
    margin-bottom: 3px;
}

.form-horizontal .control-label /* Fix alignment issue on extra small devices in Bootstrap 3.2 */
{
    padding-top: 7px;
}

.panel-title
{
    font-size: 25px;
}

.panel-terrock
{
    margin-bottom: 20px !important;
}

.panel
{
    margin-bottom: 0;
}

.panel-terrock a
{
    color: #d84848;
    /*font-weight: bold;*/
    font-size: 15px;
    font-weight: bold;
    line-height: 0.1em;
}

.panel-warning
{
    border-color: #efcf43;
}

.panel-warning > .panel-heading
{
    background-color: #f7e7a1;
    border-color: #efcf43;
}

.panel-warning > .panel-heading > .panel-title, .panel-danger > .panel-heading > .panel-title
{
    font-size: 20px !important;
}

.main_side_url
{
    font-size: 0.7em;
    font-weight: normal;
    font-family: 'Open Sans', sans-serif;
    color: #d84848;
    margin-left: 10px;
}

#myModal
{
    overflow-y: hidden;
    overflow-x: hidden;
}

.modal-lg
{
    width:97%;
}

.modal-md
{
    width: 80%;
}
@media ( max-width: 767px ) { .modal-md { width: 97%; }}

.modal-body
{
    max-height: calc(100vh - 210px);
    max-width: 100%;
    overflow-y: auto;
    overflow-x: auto;
}

.alert-shadow
{
    box-shadow: 0 0 3px 3px #E2E2E2;
    border: 1px solid #DDD;
}

.cp /* cursor-point class for toggle icon's and waveform */
{
    cursor: pointer;
}

a:hover /* Stops underline form the a tag hover */
{
    text-decoration: none;
}

.capitalize:first-letter
{
    text-transform: uppercase;
}

.file-input
{
    background:#FFF;
    border: 1px solid #e9e9e9;
}

.bg-info
{
    padding: 5px;
    margin: 15px 0 5px 0;
    border-radius: 4px;
    border: 1px solid #e3e3e3;
}

.pad-text
{
    padding: 5px;
}

.btn-xl
{
    padding: 15px 25px;
    font-size: 20px;
    line-height: 2;
    border-radius: 8px;
}

.align-center
{
    display: flex;
    align-items: center;
}

.margin-bottom
{
    margin-bottom: 20px !important;
}

.thinRow > thead > tr > th, .thinRow > tbody > tr > td, .thinRow > tr > th, .thinRow > tr > td
{
    padding: 2px 5px;
}

/* For the contact div which shows when the contact us is clicked in the footer */
#contact_form_div
{
    border: 1px solid #b2b2b2; /* border and shadow to made div look like it's overlapping */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    width: 30%;     /* This sets the base width of the div */
    overflow: hidden;
    position: fixed; /* Fixed position is based on the window so this moves if the users scrolls */

    bottom: 38px; /* These values are based off the footer and margins of wells etc */
    right: 8px;
    z-index: 1000; /* This is to make sure this overlaps all other content */
}

/* These media queries change the width of the contact form depending on the page size using the bootstrap break points and a custom 1400 width */
@media (min-width: 1201px) and (max-width: 1400px ) { #contact_form_div { width: 40%; } }
@media (min-width: 992px) and (max-width: 1200px ) { #contact_form_div { width: 50%; } }
@media (min-width: 768px) and (max-width: 991px ) { #contact_form_div { width: 60%; } }
@media (max-width: 767px ) { #contact_form_div { width: 98%; } }

/* Need to make media query to change the width of the form so it doesn't get distorted i.e md 33% sm 50% xs 100% */

/* Use class in a span or div to create a break in the page */
.page-divider
{
    height: 2px;
    width: 97%;
    display: block;
    margin: 10px 1.5%;
    overflow: hidden;
    background-color: #d9d9d9;
}

/* This class is for elements that are only for printing and not displayed normally */
.printOnly{
    display: none;
}

/* Css only for printing */
@media print{
    /* Adding the class noPrint will stop it appearing in printing, also hide all tooltips */
    .noPrint, .tooltip {
        display:none !important;
    }

    .printOnly{
        display: block !important;
    }

    @page {
        margin: 15mm 10mm 5mm 2mm;
        padding: 0;
    }

    body, html, .panel {
        margin:0;
        padding:0;
    }

    .print-divider{
        display: block;
        height: 2px;
        width: 97%;
        margin: 20px 1.5%;
        -webkit-print-color-adjust: exact !important;
        background-color: #d9d9d9 !important;
    }

    /* This will attempt to group by div when printing */
    .avoidPageBreak{
        page-break-inside: avoid;
    }

    .col-print-1 {width:8%;  float:left;}
    .col-print-2 {width:16%; float:left;}
    .col-print-3 {width:25%; float:left;}
    .col-print-4 {width:33%; float:left;}
    .col-print-5 {width:42%; float:left;}
    .col-print-6 {width:50%; float:left;}
    .col-print-7 {width:58%; float:left;}
    .col-print-8 {width:66%; float:left;}
    .col-print-9 {width:75%; float:left;}
    .col-print-10{width:83%; float:left;}
    .col-print-11{width:92%; float:left;}
    .col-print-12{width:100%; float:left;}
}

/* Theme for terrock duo-tone font awesome icons */
.theme-terrock {
    --fa-secondary-opacity: 1.0;
    --fa-primary-color: rgb(201, 2, 2);
    --fa-secondary-color: rgb(90, 90, 90);
}

.theme-terrock-reverse {
    --fa-secondary-opacity: 1.0;
    --fa-primary-color: rgb(90, 90, 90);
    --fa-secondary-color: rgb(201, 2, 2);
}

/* Theme for terrock duo-tone font awesome icons */
.theme-terrock-lite {
    --fa-secondary-opacity: 0.5;
    --fa-primary-color: rgb(201, 2, 2);
    --fa-secondary-color: rgb(90, 90, 90);
}

/* Thin border for font awesome icons */
.terrock-border path {
    stroke: black;
    stroke-width: 10;
}

.navbar-inverse { background-color: #222222}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #C90202}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #C90202}
.dropdown-menu { background-color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #C90202}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: #080808}
.navbar-inverse .navbar-brand { color: #999999}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #999999}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #333333}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
.navbar-fixed-top /* Top navigation, Hide default border to remove 1px line. */ { border: 0; }

/* this overrides the @grid-float-breakpoint and collapses the navbar as soon as the screen is small
 * This is so all content in the navbar doesn't overlap the page
 * http://stackoverflow.com/questions/27092929/where-to-edit-bootstrap-grid-float-breakpoint
 * Also added classes from media queries at sm 761px width to this 991px width
 */
@media (max-width: 1200px)
{
    .navbar-header { float: none; }
    .navbar-toggle { display: block; }
    .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
    .navbar-nav { float: none!important; margin: 8px -15px; }
    .navbar-nav>li { float: none; }
    .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; }
    .navbar-text { float: none; margin: 15px 0; }
    .navbar-collapse.collapse.in { display: block!important; }
    .navbar-collapse.collapse { display: none!important; }
    .navbar-collapse.bs-navbar-collapse.collapse.in { overflow-y: auto !important; overflow-x: hidden !important; }
    .collapsing { overflow: hidden !important; }

    .navbar-left,.navbar-right { float: none !important; }
    .navbar-fixed-top { top: 0; border-width: 0 0 1px; }

    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #9d9d9d; }
    .navbar-nav .open .dropdown-menu>li>a { line-height: 20px; }
    .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a { padding: 5px 15px 5px 25px; }
    .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; }
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #080808; }
}

td.legendColorBox > div
{
    font-family: monospace !important;
    border: none !important;
}

.dist_calc
{
    padding-left: 5px;
    color: #5CB85C;
}

/* layout.css Style */
.upload-drop-zone
{
    height: 400px;
    border-width: 2px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

/* skin.css Style*/
.upload-drop-zone
{
    color: #000;
    border-style: dashed;
    border-color: #ccc;

    text-align: center;
    font-size: 20px;
}

.upload-drop-zone.drop
{
    color: #222;
    border-color: #222;
}

.upload-drop-zone .btn-lg
{
    font-size: 24px;
}

.fullTable, .minTable, .minTableUnordered {
    display: none;
}

.analysis_div div img {
    max-width: 100%;
    height: auto;
}

.alert-thin{
    margin-bottom: 0;
    padding: 4px 10px;
}

.alert-close-button{
    position: static !important;
    right: 0 !important;
}

#loader {
    margin: 14px 0;
}

.pt-2 { margin-top:20px; }