body {
    background: #fafafa;
}

    body:before {
        content: '- TEST VERSION - Not Live Data -';
        font-weight: bold;
        text-align: center;
        letter-spacing: 5px;
        color: #ffffff;
        display: block;
        background-color: #aa0000;
    }

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 20px 0;
}

i,
span {
    display: inline-block;
}

h4#currentinspectionheader {
    color: #444444 !important;
    font-weight: normal;
}

span.required {
    color: #b51a00;
    font-weight: bold;
}

h4#currentinspectionheader a.unlockLink {
    margin-left: 10px;
}

a.swalLink {
    color: #4473c5;
    text-decoration: underline;
}


/* ---------------------------------------------------
    NAV BAR
----------------------------------------------------- */

.navbar {
    padding: 15px 10px;
    background-color: #dddddd;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.nav-link:hover {
    background-color: #dddddd;
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}


/* ---------------------------------------------------
    BUTTON STYLE
----------------------------------------------------- */

button:disabled,
label.disabled {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.btn-info {
    color: #3663b0 !important;
    background-color: #ffffff !important;
    border-color: #4473c5 !important;
}

    .btn-info:hover {
        color: #ffffff !important;
        background-color: #3663b0 !important;
        border-color: #3663b0 !important;
    }

    .btn-info:focus {
        box-shadow: 0 0 0 0.2rem rgba(54, 99, 176, 0.5) !important;
    }

    .btn-info.active {
        color: #ffffff !important;
        background-color: #4473c5 !important;
        border-color: #3663b0 !important;
        box-shadow: none !important;
    }

.btn-group-toggle .btn-info.disabled {
    pointer-events: none;
}

.btn.btn-info.disabled {
    pointer-events: none;
}

.btn-primary {
    background-color: #4473c5 !important;
}

    .btn-primary:hover {
        background-color: #3663b0 !important;
    }

.btn.btn-primary.disabled {
    pointer-events: none;
}


/* ---------------------------------------------------
    DATE PICKER STYLE
----------------------------------------------------- */

div.datepicker .datetimepicker-input {
    border: 1px solid #4473c5;
}

div.datepicker .input-group-text {
    color: #3663b0 !important;
    border: 1px solid #4473c5;
    background-color: #ffffff;
}

    div.datepicker .input-group-text:hover {
        color: #ffffff !important;
        background-color: #3663b0 !important;
        border-color: #3663b0 !important;
    }

div.datepicker.disabled {
    pointer-events: none;
}

    div.datepicker.disabled .input-group-text {
        opacity: .65;
    }

div.datepicker .input-group-append.hidden {
    display: none;
}

div.datepicker .input-group-append.applyradius .input-group-text {
    border-top-right-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
}

div.datepicker .datetimepicker-input.noneditable {
    pointer-events: none;
}


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    position: relative;
    min-width: 250px;
    max-width: 250px;
    /*
    background-color: #00387d;
    background-image: linear-gradient(#00387d, #001f3d);
    */
    background-image: url(/images/footer.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-color: #06509d;
    /* */
    color: #fff;
    transition: all 0.3s;
}

    #sidebar ul {
        text-transform: uppercase;
        font-weight: bold;
    }

        #sidebar ul li a {
            text-align: left;
        }

    #sidebar .sidebar-header {
        padding: 20px;
        background-color: transparent;
    }

        #sidebar .sidebar-header img.narrow {
            display: none;
        }

    #sidebar ul.components {
        padding: 20px 0;
        border: none;
        padding-left: 1em;
    }

    #sidebar ul li a {
        padding: 10px;
        font-size: 1.1em;
        display: block;
    }

        #sidebar ul li a:hover {
            color: #3663b0;
            background: #fff;
        }

        #sidebar ul li a i {
            margin-right: 10px;
        }

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

#sidebar ul li.active > a,
#sidebar a[aria-expanded="true"] {
    color: #fff;
    background: #4473c5;
}

#sidebar svg {
    margin-right: 1.5em;
}

#sidebar div.image-container {
    position: absolute;
    bottom: 0;
    overflow: hidden;
}

    #sidebar div.image-container img.btm-logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        width: 100%;
        height: 50px;
    }


/* ---------------------------------------------------
    TOP NAV BAR STYLE
----------------------------------------------------- */

#topnavbarlandscapemenu .nav-item.disabled .nav-link:hover {
    color: rgba(0, 0, 0, .5);
    cursor: not-allowed;
}


/* ---------------------------------------------------
    TOP LANDSCAPE NAV BAR STYLE
----------------------------------------------------- */

.topbarlandscape {
    margin-bottom: 0px !important;
    background-color: #eeeeee !important;
    padding: 0.25em 1.0em;
    margin-top: 4em;
}

#topbarlandscapeitemlist li a {
    font-size: 1.0em;
}

    #topbarlandscapeitemlist li a span {
        margin-left: 6px;
    }

#topbarlandscapeitemlist .svg-inline--fa {
    color: #4473c5;
}

#topbarlandscapeitemlist #topbarlandscapeitemlistcancel .svg-inline--fa {
    color: #cc0000;
}


/* ---------------------------------------------------
    TOP PORTRAIT NAV BAR STYLE
----------------------------------------------------- */

.topbarportrait {
    margin-bottom: 0px !important;
    padding: 0px 0px;
    background-color: #eeeeee !important;
    margin-top: 4em;
}

#topbarportraititemlist li a {
    font-size: 1.0em;
    text-align: center;
}

    #topbarportraititemlist li a:hover {
    }

#topbarportraititemlist li.active a {
}

    #topbarportraititemlist li.active a:hover {
    }

#topbarportraititemlist li a span {
    display: block;
}

#topbarportraititemlist ul li a i {
    display: block;
}

#topbarportraititemlist .svg-inline--fa {
    color: #4473c5;
}

#topbarportraititemlist #topbarportraititemlistcancel .svg-inline--fa {
    color: #cc0000;
}


/* ---------------------------------------------------
    BOTTOM NAV BAR STYLE
----------------------------------------------------- */

.bottombar {
    /*
    background-color: #00387d !important;
    background-image: linear-gradient(#00387d, #001f3d) !important;
    */
    background-color: #06509d !important;
    /* */
    margin-bottom: 0px !important;
    padding: 0px 0px;
}

#bottombaritemlist li a {
    font-size: 1.0em;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
}

    #bottombaritemlist li a:hover {
        color: #4473c5;
        background: #ffffff;
    }

#bottombaritemlist li.active a {
    background: #4473c5;
}

    #bottombaritemlist li.active a:hover {
        background: #ffffff;
    }

#bottombaritemlist li a span {
    display: block;
}

#bottombaritemlist ul li a i {
    display: block;
}


/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
}

#innercontent {
    padding: 20px 20px 20px 20px;
    font-size: 1.0em;
}

    #innercontent h2 {
        color: #00387d;
        font-size: 1.7em;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    #innercontent h3 {
        color: #212529;
        font-size: 1.2em;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    #innercontent h4 {
        color: #3663b0;
        font-size: 1.0em;
    }

        #innercontent h4 span {
            display: block;
        }

    #innercontent p {
        font-size: 0.85em;
    }

        #innercontent p a {
            font-size: 1.0em;
            color: #4473c5;
            text-decoration: underline;
        }

    #innercontent #topimagecontainer img {
        display: block;
        margin: 10px auto 20px auto;
        width: 400px;
    }

    #innercontent .highlight {
        font-weight: bold;
    }

    #innercontent div.submitRow {
        padding-top: 30px;
    }


    /* ---------------------------------------------------
    QUESTIONS GRID STYLE
----------------------------------------------------- */

    #innercontent div.questionsgrid {
        padding-right: 0px;
        padding-left: 0px;
    }

        #innercontent div.questionsgrid div.row {
            padding-bottom: 5px;
        }

        #innercontent div.questionsgrid span,
        #innercontent div.questionsgrid label,
        #innercontent div.questionsgrid .btn-info {
            font-size: 0.85em;
        }

            #innercontent div.questionsgrid span p {
                color: #000000;
                font-size: 1.0em;
            }

        #innercontent div.questionsgrid .form-control {
            font-size: 0.85em;
        }

        #innercontent div.questionsgrid textarea {
            margin-bottom: 5px !important;
        }

        #innercontent div.questionsgrid .lastrow {
            border-bottom: 1px dashed #ddd;
            padding-bottom: 10px !important;
            margin-bottom: 10px;
        }

        #innercontent div.questionsgrid div.printcomments {
            font-size: 0.85em;
        }

        #innercontent div.questionsgrid div.subheaderrow {
            padding-right: 0px;
            padding-left: 0px;
            padding-bottom: 5px;
            background-color: #cecece;
            margin-bottom: 5px;
            border-left: 0px;
        }

        #innercontent div.questionsgrid div.prequestiontextrow {
            padding-bottom: 5px;
            background-color: #dddddd;
            margin-bottom: 5px;
        }


    /* ---------------------------------------------------
    VESSEL PARTICULARS GRID STYLE
----------------------------------------------------- */

    #innercontent div.vesselparticularsgrid {
        padding-right: 0px;
        padding-left: 0px;
    }

        #innercontent div.vesselparticularsgrid div.row {
            padding-bottom: 5px;
        }

        #innercontent div.vesselparticularsgrid span,
        #innercontent div.vesselparticularsgrid label,
        #innercontent div.vesselparticularsgrid .btn-info {
            font-size: 0.85em;
        }

            #innercontent div.vesselparticularsgrid span p {
                color: #000000;
            }

        #innercontent div.vesselparticularsgrid input[type=text],
        #innercontent div.vesselparticularsgrid textarea,
        #innercontent div.vesselparticularsgrid input[type=email],
        #innercontent div.vesselparticularsgrid input[type=number],
        #innercontent div.vesselparticularsgrid select,
        #innercontent div.vesselparticularsgrid input[type=date],
        #innercontent div.vesselparticularsgrid input[type=url] {
            width: 100%;
            font-size: 0.85em;
        }

        #innercontent div.vesselparticularsgrid input:read-only {
            border: none;
            /*padding: 0.5em 0.2em*/
        }

        #innercontent div.vesselparticularsgrid input[type=checkbox].checkboxClass {
            width: 15px;
            height: 15px;
        }

        #innercontent div.vesselparticularsgrid input[type=date] {
            width: 25%;
        }

        #innercontent div.vesselparticularsgrid input[type=range] {
            width: 80%;
            height: 10px;
            margin-right: 10px;
            display: inline;
        }

        #innercontent div.vesselparticularsgrid output.rangeOutput {
            height: calc(1.5em + 0.75rem + 1px);
            padding: 0.375rem 0.75rem;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }

        #innercontent div.vesselparticularsgrid .lastrow {
            border-bottom: 1px dashed #ddd;
            padding-bottom: 10px !important;
            margin-bottom: 10px;
        }

        #innercontent div.vesselparticularsgrid div.col-sm-4.legacyDataMessage {
            margin-top: 5px;
            color: red;
        }

        #innercontent div.vesselparticularsgrid div.col-sm-8.legacyDataAnswer {
            margin-top: 5px;
        }

        #innercontent div.vesselparticularsgrid div.col-sm-8.legacyDataDate input[type=text] {
            margin-top: 5px;
            width: 25%;
        }

/* ---------------------------------------------------
    INDEX OF CERTIFICATES GRID STYLE
----------------------------------------------------- */
#innercontent div.indexofcertificates {
    padding-right: 0px;
    padding-left: 0px;
}

        #innercontent div.indexofcertificates div.row {
            padding-bottom: 5px;
        }

        #innercontent div.indexofcertificates span,
        #innercontent div.indexofcertificates label,
        #innercontent div.indexofcertificates .btn-info {
            font-size: 0.85em;
        }

            #innercontent div.indexofcertificates span p {
                color: #000000;
            }

        #innercontent div.indexofcertificates textarea {
            width: 100%;
        }

        #innercontent div.indexofcertificates .lastrow {
            border-bottom: 1px dashed #ddd;
            padding-bottom: 10px !important;
            margin-bottom: 10px;
        }

        #innercontent div.indexofcertificates div.dateinputrow [class*="col-"],
        #innercontent div.indexofcertificates div.subfluidinputrow [class*="col-"] {
            padding-right: 5px;
            padding-left: 0;
        }

        #innercontent div.indexofcertificates div.dateinputrow .input-group-text,
        #innercontent div.indexofcertificates div.dateinputrow .datetimepicker-input {
            font-size: 0.85em !important;
        }


    /* ---------------------------------------------------
    CREW QUALIFICATIONS GRID STYLE
----------------------------------------------------- */

    #innercontent div.crewqualifications {
        padding-right: 0px;
        padding-left: 0px;
    }

        #innercontent div.crewqualifications div.row {
            padding-bottom: 5px;
        }

        #innercontent div.crewqualifications span,
        #innercontent div.crewqualifications label,
        #innercontent div.crewqualifications .btn-info {
            font-size: 0.85em;
        }

            #innercontent div.crewqualifications span p {
                color: #000000;
            }

        #innercontent div.crewqualifications textarea,
        #innercontent div.crewqualifications input[type=text] {
            width: 100%;
            font-size: 0.85em;
        }

        #innercontent div.crewqualifications .lastrow {
            border-bottom: 1px dashed #ddd;
            padding-bottom: 10px !important;
            margin-bottom: 10px;
        }


    /* ---------------------------------------------------
	BUTTON GRID GRID STYLE
----------------------------------------------------- */

    #innercontent div.buttongrid {
        padding-right: 0px;
        padding-left: 0px;
        margin-bottom: 30px;
    }

        #innercontent div.buttongrid div.row {
            padding-bottom: 5px;
        }

        #innercontent div.buttongrid span,
        #innercontent div.buttongrid .btn-info {
            font-size: 0.85em;
        }


    /* ---------------------------------------------------
	SECTIONS GRID STYLE
----------------------------------------------------- */

    #innercontent div.sectionsgrid {
        padding-right: 0px;
        padding-left: 0px;
        margin-bottom: 30px;
    }

        #innercontent div.sectionsgrid div.row {
            padding-bottom: 5px;
        }

            #innercontent div.sectionsgrid div.row:hover {
                cursor: pointer !important;
            }

        #innercontent div.sectionsgrid span,
        #innercontent div.sectionsgrid .btn-info {
            font-size: 0.85em;
        }

        #innercontent div.sectionsgrid .lastrow {
            border-bottom: 1px dashed #ddd;
            padding-bottom: 10px !important;
            margin-bottom: 10px;
        }

        #innercontent div.sectionsgrid .green {
            color: #10d441;
        }

        #innercontent div.sectionsgrid .red {
            color: #cf2215;
        }

        #innercontent div.sectionsgrid span span {
            font-size: 1.0em;
        }


    /* ---------------------------------------------------
    CHANGE SUPPLEMENTS GRID STYLE
----------------------------------------------------- */

    #innercontent div.changesupplementgrid {
        padding-right: 0px;
        padding-left: 0px;
    }

        #innercontent div.changesupplementgrid div.row {
            padding-bottom: 5px;
        }

        #innercontent div.changesupplementgrid span,
        #innercontent div.changesupplementgrid label,
        #innercontent div.changesupplementgrid .btn-info {
            font-size: 0.85em;
        }

            #innercontent div.changesupplementgrid span p {
                color: #000000;
            }

        #innercontent div.changesupplementgrid .lastrow {
            border-bottom: 1px dashed #ddd;
            padding-bottom: 10px !important;
            margin-bottom: 10px;
        }

    #innercontent #changesupplementsupervisorpresentgrid {
        margin-bottom: 20px;
    }

    #innercontent #changesupplementsaveselectiongrid {
        margin-top: 20px;
    }


    /* ---------------------------------------------------
    SUMMARY GRID STYLE
----------------------------------------------------- */

    #innercontent div.summarygrid {
        padding-right: 0px;
        padding-left: 0px;
        margin-bottom: 30px;
    }

        #innercontent div.summarygrid div.row {
            padding-bottom: 5px;
        }

        #innercontent div.summarygrid span,
        #innercontent div.summarygrid label,
        #innercontent div.summarygrid .btn-info {
            font-size: 0.85em;
        }

            #innercontent div.summarygrid span p {
                color: #000000;
            }

        #innercontent div.summarygrid .form-control {
            font-size: 0.85em;
        }

        #innercontent div.summarygrid .lastrow {
            border-bottom: 1px dashed #ddd;
            padding-bottom: 10px !important;
            margin-bottom: 10px;
        }

        #innercontent div.summarygrid div.fullheightbtn .btn-info {
            height: 100% !important;
        }

        #innercontent div.summarygrid #closeoutreportcontrols .btn-info {
            margin-right: 5px;
        }


    /* ---------------------------------------------------
    SUMMARY FINDINGS GRID STYLE
----------------------------------------------------- */

    #innercontent div.summaryfindinggrid {
        padding-right: 0px;
        padding-left: 0px;
    }

        #innercontent div.summaryfindinggrid div.row {
            padding-bottom: 5px;
        }

            #innercontent div.summaryfindinggrid div.row:hover {
                cursor: pointer !important;
            }

        #innercontent div.summaryfindinggrid span,
        #innercontent div.summaryfindinggrid .btn-info {
            font-size: 0.85em;
        }

        #innercontent div.summaryfindinggrid .lastrow {
            border-bottom: 1px dashed #ddd;
            padding-bottom: 10px !important;
            margin-bottom: 10px;
        }

        #innercontent div.summaryfindinggrid a {
            font-size: 0.85em;
        }


    /* ---------------------------------------------------
    HOME OPTIONS STYLE
----------------------------------------------------- */

    #innercontent div.homeoptionsgrid {
        padding-right: 0px;
        padding-left: 0px;
        margin-bottom: 30px;
    }

    #innercontent #homeoptions {
        font-size: 0.85em;
    }

        #innercontent #homeoptions div.card {
            background-color: #fafafa;
            border: 0px solid rgba(0, 0, 0, .125);
        }

        #innercontent #homeoptions div.card-header {
            padding: 0px 0px 0px 0px;
            background-color: #fafafa;
            border-bottom: 0px solid rgba(0, 0, 0, .125);
        }

        #innercontent #homeoptions a {
            background: #fafafa;
        }

        #innercontent #homeoptions h5.card-title {
            font-size: 1.15em;
            font-weight: 400;
        }

            #innercontent #homeoptions h5.card-title a.collapsed .fa-folder-open {
                display: none;
            }

            #innercontent #homeoptions h5.card-title a.collapsed .fa-folder {
                display: inline-block;
            }

            #innercontent #homeoptions h5.card-title a .fa-folder-open {
                display: inline-block;
            }

            #innercontent #homeoptions h5.card-title a .fa-folder {
                display: none;
            }

            #innercontent #homeoptions h5.card-title a {
                color: #4473c5;
            }

                #innercontent #homeoptions h5.card-title a span {
                    margin-left: 20px;
                    color: #212529;
                }

        #innercontent #homeoptions div.card-body {
            padding: 0px 0px 0px 0px;
        }

            #innercontent #homeoptions div.card-body ul {
                list-style: none;
                padding: 10px 0px 0px 30px;
            }

                #innercontent #homeoptions div.card-body ul li {
                    padding: 0px 0px 10px 0px;
                }

                    #innercontent #homeoptions div.card-body ul li .fa-arrow-right {
                        opacity: 0;
                    }

                    #innercontent #homeoptions div.card-body ul li.fileopen .fa-arrow-right {
                        display: inline-block;
                        opacity: 1;
                    }

                #innercontent #homeoptions div.card-body ul a.filedelete {
                    color: #3663b0;
                    margin-left: 20px;
                }

                #innercontent #homeoptions div.card-body ul li.fileopen {
                    color: #3663b0;
                }

                #innercontent #homeoptions div.card-body ul li span,
                #innercontent #homeoptions div.card-body ul li a {
                    margin-left: 10px;
                }

        #innercontent #homeoptions h5.card-title a.nodata {
            opacity: 0.5;
            pointer-events: none;
        }

        #innercontent #homeoptions #userdetailcard {
            margin-top: 30px;
        }

div.about {
    display: block;
    margin: 60px auto 0px auto;
    width: 100%;
    text-align: center;
}

    div.about a.about-link {
        font-size: 0.85em;
        text-decoration: underline;
        color: #4473c5;
    }


/* ---------------------------------------------------
    INITIAL BODY STATE
----------------------------------------------------- */

body.initialstate .wrapper {
    display: none !important;
}


/* ---------------------------------------------------
    HOME
----------------------------------------------------- */

body.home #topnavbarlandscapemenu,
body.home #topnavbarportraitmenu {
    display: none;
}

body.home h4#currentinspectionheader {
    display: none;
}

body.home #topnavbarlandscapemenu {
    display: none;
}


/* ---------------------------------------------------
    HOME NOT LOGGED IN - NO INSPECTION STYLE
----------------------------------------------------- */

body.notloggedin-noinsp #sidebar,
body.notloggedin-noinsp #bottomnavbarmenu,
body.notloggedin-noinsp #topnavbarlandscapemenu,
body.notloggedin-noinsp #topnavbarportraitmenu,
body.notloggedin-noinsp #currentinspectionheader,
body.notloggedin-noinsp #innercontent #homeoptions #newinspectionoptioncard,
body.notloggedin-noinsp #innercontent #homeoptions #auditinspectioncard,
body.notloggedin-noinsp #innercontent #homeoptions #openinspectioncloudcard,
body.notloggedin-noinsp #innercontent #homeoptions #userdetailcard {
    display: none;
}


/* ---------------------------------------------------
    HOME NOT LOGGED IN - WITH INSPECTION STYLE
----------------------------------------------------- */

body.notloggedin-insp #innercontent #homeoptions #newinspectionoptioncard,
body.notloggedin-insp #innercontent #homeoptions #auditinspectioncard,
body.notloggedin-insp #innercontent #homeoptions #openinspectioncloudcard,
body.notloggedin-insp #innercontent #homeoptions #userdetailcard {
    display: none;
}


/* ---------------------------------------------------
    HOME LOGGED IN - WITH INSPECTION STYLE
----------------------------------------------------- */

body.loggedin-insp #innercontent div.logingrid,
body.loggedin-insp #innercontent div.homeoptionsgrid h3,
body.loggedin-insp #innercontent div.homeoptionsgrid div.about {
    display: none;
}


/* ---------------------------------------------------
    HOME LOGGED IN - WITH NO INSPECTION STYLE
----------------------------------------------------- */

body.loggedin-noinsp #innercontent div.logingrid,
body.loggedin-noinsp #innercontent div.homeoptionsgrid h3,
body.loggedin-noinsp #innercontent div.homeoptionsgrid div.about {
    display: none;
}

body.loggedin-noinsp #sidebar #sidebaritemlistoverview,
body.loggedin-noinsp #bottomnavbarmenu #bottombaritemlistoverview,
body.loggedin-noinsp #sidebar #sidebaritemlistquestions,
body.loggedin-noinsp #bottomnavbarmenu #bottombaritemlistquestions,
body.loggedin-noinsp #sidebar #sidebaritemlistsummary,
body.loggedin-noinsp #bottomnavbarmenu #bottombaritemlistsummary,
body.loggedin-noinsp #sidebar #sidebaritemlistupload,
body.loggedin-noinsp #bottomnavbarmenu #bottombaritemlistupload {
    pointer-events: none;
}


/* ---------------------------------------------------
    HOME LOGIN GRID STYLE
----------------------------------------------------- */

#innercontent div.logingrid {
    padding: 10px 20px 10px 20px;
    background-color: #4473c5;
    margin-bottom: 20px;
    color: #ffffff;
    border-radius: .25rem;
}

    #innercontent div.logingrid div.row {
        padding-bottom: 5px;
    }

    #innercontent div.logingrid div.usernamerow {
        padding-top: 10px;
    }

    #innercontent div.logingrid h3 {
        font-size: 1.2em;
        color: #ffffff;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    #innercontent div.logingrid span {
        margin-left: 7px;
    }

    #innercontent div.logingrid input[type=text],
    #innercontent div.logingrid input[type=password] {
        width: 100%;
        font-size: 0.85em;
    }

    #innercontent div.logingrid a {
        font-size: 0.85em;
    }

    #innercontent div.logingrid.alwaysdisplay {
        display: block !important;
    }


/* ---------------------------------------------------
    NO TOOLBAR
----------------------------------------------------- */

body.notoolbar #topnavbarlandscapemenu,
body.notoolbar #topnavbarportraitmenu {
    display: none;
}

body.notoolbar h4#currentinspectionheader {
    margin-top: 0;
    margin-bottom: 0;
}


/* ---------------------------------------------------
    USER DETAILS GRID STYLE
----------------------------------------------------- */

#innercontent div.userdetailgrid {
    padding-right: 0px;
    padding-left: 0px;
}

    #innercontent div.userdetailgrid div.row {
        padding-bottom: 5px;
    }

    #innercontent div.userdetailgrid span,
    #innercontent div.userdetailgrid label,
    #innercontent div.userdetailgrid .btn-info {
        font-size: 0.85em;
    }

    #innercontent div.userdetailgrid ul {
        list-style-type: none;
        padding: 0px 0px 0px 0px;
        font-size: 0.85em;
    }


/* ---------------------------------------------------
    START INSPECTION GRID STYLE
----------------------------------------------------- */

#innercontent div.startinspection {
    padding-right: 0px;
    padding-left: 0px;
}

    #innercontent div.startinspection div.row {
        padding-bottom: 5px;
    }

    #innercontent div.startinspection span,
    #innercontent div.startinspection .form-control {
        font-size: 0.85em;
    }

    #innercontent div.startinspection .twitter-typeahead input[type=text] {
        font-size: 1.0em;
    }

    #innercontent div.startinspection label {
        font-size: 0.85em;
    }

    #innercontent div.startinspection h3 {
        font-size: 1.2em;
        color: #4473c5;
        margin-top: 5px;
        margin-bottom: 2px;
    }

    #innercontent div.startinspection a {
        font-size: 0.85em;
        color: #4473c5;
        text-decoration: underline;
    }

    #innercontent div.startinspection div.cannotfind {
        padding-bottom: 10px;
    }

    #innercontent div.startinspection div.startblank {
        padding-top: 25px;
    }

        #innercontent div.startinspection div.startblank a {
            font-size: 1.0em;
        }


/* TYPEAHEAD OVERRIDE STYLES */

.twitter-typeahead {
    width: 100%;
}

.tt-menu {
    /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 100%;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

    .tt-suggestion.tt-is-under-cursor {
        color: #fff;
        background-color: #0097cf;
    }

    .tt-suggestion p {
        margin: 0;
    }

.tt-empty-message {
    padding-left: 10px;
}


/* ---------------------------------------------------
    START BLANK TEMPLATE GRID STYLE
----------------------------------------------------- */

#innercontent div.startblanktemplategrid {
    padding-right: 0px;
    padding-left: 0px;
    margin-bottom: 20px;
}

    #innercontent div.startblanktemplategrid div.row {
        padding-bottom: 5px;
    }

    #innercontent div.startblanktemplategrid span,
    #innercontent div.startblanktemplategrid label,
    #innercontent div.startblanktemplategrid .btn-info {
        font-size: 0.85em;
    }

    #innercontent div.startblanktemplategrid .form-control {
        font-size: 0.85em;
    }

    #innercontent div.startblanktemplategrid div.buttonrow {
        padding-top: 10px;
    }


/* ---------------------------------------------------
    UPLOAD GRID STYLE
----------------------------------------------------- */

#innercontent div.uploadgrid {
    padding-right: 0px;
    padding-left: 0px;
    margin-bottom: 30px;
}

    #innercontent div.uploadgrid div.row span .icon {
        margin-right: 10px;
    }

    #innercontent div.uploadgrid div.row span .iconinfo {
        margin-left: 5px;
        font-size: 1.2em;
    }

    #innercontent div.uploadgrid ul {
        list-style-type: none;
        padding: 0px 0px 0px 0px;
        font-size: 1.0em;
    }

    #innercontent div.uploadgrid div.auditorrow {
        padding-top: 10px;
    }

    #innercontent div.uploadgrid a {
        font-size: 0.85em;
        color: #4473c5;
        text-decoration: underline;
    }

    #innercontent div.uploadgrid div.paymentrowheader {
        margin-top: 15px;
    }

    #innercontent div.uploadgrid div.payoptions {
        padding-top: 10px;
    }

    #innercontent div.uploadgrid div.prepay {
        padding-top: 15px;
    }

    #innercontent div.uploadgrid div.upload {
        padding-top: 30px;
    }

    #innercontent div.uploadgrid .form-control {
        font-size: 0.85em;
    }

    #innercontent div.uploadgrid .green {
        color: #10d441;
    }

    #innercontent div.uploadgrid .red {
        color: #cf2215;
    }

    #innercontent div.uploadgrid span,
    #innercontent div.uploadgrid label,
    #innercontent div.uploadgrid .btn-info {
        font-size: 0.85em;
    }

    #innercontent div.uploadgrid #supervisinginspectorrow_4 {
        padding-top: 10px;
    }

    #innercontent div.uploadgrid #supervisinginspectorrow_1,
    #innercontent div.uploadgrid #supervisinginspectorrow_2,
    #innercontent div.uploadgrid #supervisinginspectorrow_3 {
        padding-bottom: 5px;
    }

    #innercontent div.uploadgrid #linkvessellist span a {
        font-size: 1.0em;
    }

#innercontent #supervisinginspectorrow div.logingrid {
    display: block !important;
}


/* ---------------------------------------------------
    OVERVIEW GRID STYLE
----------------------------------------------------- */

#innercontent div.overviewoutergrid {
    padding-right: 0px !important;
    padding-left: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 30px !important;
}

    #innercontent div.overviewoutergrid div.nopad {
        padding: 0px 15px;
    }

#innercontent div.overviewgrid {
    padding-right: 0px;
    padding-left: 0px;
}

    #innercontent div.overviewgrid div.row {
        padding-bottom: 5px;
    }

    #innercontent div.overviewgrid span,
    #innercontent div.overviewgrid label,
    #innercontent div.overviewgrid .btn-info {
        font-size: 0.85em;
    }

    #innercontent div.overviewgrid .form-control {
        font-size: 0.85em;
    }

    #innercontent div.overviewgrid span p {
        color: #000000;
    }

    #innercontent div.overviewgrid div.dateinputrow [class*="col-"] {
        padding-right: 5px;
        padding-left: 0;
    }

    #innercontent div.overviewgrid div.dateinputrow .input-group-text,
    #innercontent div.overviewgrid div.dateinputrow .datetimepicker-input {
        font-size: 0.85em !important;
    }

    #innercontent div.overviewgrid .lastrow {
        border-bottom: 1px dashed #ddd;
        padding-bottom: 10px !important;
        margin-bottom: 10px;
    }

    #innercontent div.overviewgrid .btn-info {
        float: right;
    }

    #innercontent div.overviewgrid #coverlogocontrols .btn-info,
    #innercontent div.overviewgrid #coverphotocontrols .btn-info {
        margin-left: 5px;
    }

    #innercontent div.overviewgrid div.logingrid {
        margin-bottom: 0px;
        display: block;
    }


/* ---------------------------------------------------
    IMAGE POPUP STYLE
----------------------------------------------------- */

div.imagePopup {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 9999 !important;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

    div.imagePopup .modal-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
    }

    div.imagePopup #caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
        text-align: center;
        color: #ccc;
        padding: 10px 0;
        height: 150px;
    }

    div.imagePopup .modal-content,
    #caption {
        animation-name: zoom;
        animation-duration: 0.6s;
    }

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

div.imagePopup .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

    div.imagePopup .close:hover,
    div.imagePopup .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }


/* ---------------------------------------------------
    LOGIN POPUP STYLE
----------------------------------------------------- */

div.loginPopup div.logingrid {
    padding: 10px 20px 10px 20px;
    background-color: #4473c5;
    color: #ffffff;
    border-radius: .25rem;
}

    div.loginPopup div.logingrid div.row {
        padding-bottom: 5px;
    }

    div.loginPopup div.logingrid div.usernamerow {
        padding-top: 10px;
    }

    div.loginPopup div.logingrid h3 {
        font-size: 1.2em;
        color: #ffffff;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    div.loginPopup div.logingrid span {
        margin-left: 7px;
    }

    div.loginPopup div.logingrid input[type=text],
    div.loginPopup div.logingrid input[type=password] {
        width: 100%;
        font-size: 0.85em;
    }

    div.loginPopup div.logingrid a {
        font-size: 0.85em;
    }

div.loginPopup .container {
    padding: 16px;
}

div.loginPopup {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1059 !important;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
    padding-top: 60px;
}

    div.loginPopup .modal-content {
        background-color: #4473c5;
        margin: 5% auto 15% auto;
        /* 5% from the top, 15% from the bottom and centered */
        width: 80%;
        /* Could be more or less, depending on screen size */
        border-radius: .25rem;
    }

    div.loginPopup .animate {
        -webkit-animation: animatezoom 0.6s;
        animation: animatezoom 0.6s
    }

@-webkit-keyframes animatezoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (orientation:landscape) {
    .hide-on-landscape {
        display: none;
    }

    h4#currentinspectionheader {
        margin-top: -7.5em;
        margin-bottom: 5em;
    }
}

@media (orientation:portrait) {
    .hide-on-portrait {
        display: none;
    }

    #innercontent {
        padding: 90px 20px 70px 20px;
    }

    body.home.notloggedin-noinsp #innercontent {
        padding: 20px 20px 20px 20px;
    }

    body.home.notloggedin-insp #innercontent {
        padding: 20px 20px 50px 20px;
    }

    h4#currentinspectionheader {
        margin-top: -13em;
        margin-bottom: 6em;
    }

    body.notoolbar h4#currentinspectionheader {
        margin-top: -5em;
    }
}

@media (max-width: 1024px) {
    #sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
    }

        #sidebar .sidebar-header img.wide {
            display: none;
        }

        #sidebar .sidebar-header img.narrow {
            display: block;
        }

        #sidebar ul {
            font-size: 0.8em;
        }

            #sidebar ul.components {
                padding-left: 0.3em;
            }

            #sidebar ul li a {
                padding: 20px 5px;
                text-align: center;
                font-size: 0.85em;
            }

                #sidebar ul li a i {
                    margin-right: 0;
                    display: block;
                    font-size: 1.8em;
                    margin-bottom: 5px;
                }

                #sidebar ul li a span {
                    display: block;
                }

            #sidebar ul ul a {
                padding: 10px !important;
            }

        #sidebar svg {
            margin-right: 0;
        }

        #sidebar div.image-container img.btm-logo {
            height: 50px;
            margin-bottom: 0px;
            width: 80%;
        }
}

@media (max-width: 768px) {
    #innercontent div.indexofcertificates div.row [class*="col-"] {
        margin-bottom: 5px;
    }

    #innercontent div.summarygrid div.row [class*="col-"] {
        margin-bottom: 5px;
    }
}

@media (max-width: 700px) {
    #topbarlandscapeitemlist li a {
        font-size: 0.9em;
    }

    #innercontent h2 {
        font-size: 1.4em;
    }
}

@media (max-width: 630px) {
    #topbarlandscapeitemlist li a {
        font-size: 0.8em;
    }
}

@media (max-width: 582px) {
    #topbarlandscapeitemlist li a {
        font-size: 0.7em;
    }

    body.home.loggedin-insp #topimagecontainer,
    body.home.loggedin-noinsp #topimagecontainer {
        margin-top: -70px;
    }
}

@media (max-width: 576px) {
    #bottombaritemlist li a {
        font-size: 0.7em;
    }

    #topbarportraititemlist li a {
        font-size: 0.7em;
    }

    h4#currentinspectionheader {
        margin-top: -11em;
        margin-bottom: 5em;
    }

    body.notoolbar h4#currentinspectionheader {
        margin-top: -3.75em;
    }

    div.btn-group {
        width: 100%;
    }

    body.home.loggedin-insp #topimagecontainer,
    body.home.loggedin-noinsp #topimagecontainer {
        margin-top: 0px;
    }
}

@media (max-width: 576px) and (orientation:portrait) {
    #innercontent {
        padding: 70px 20px 50px 20px;
    }

    body.home #innercontent {
        padding: 20px 20px 50px 20px;
    }
}

@media (min-width: 600px) {
    #innercontent div.logingrid,
    #innercontent div.homeoptionsgrid,
    #innercontent div.uploadgrid {
        width: 500px !important;
    }

    #innercontent div.overviewgrid div.logingrid {
        width: 100% !important;
    }
}

@media print {
    #innercontent #allfindingsgrid div.answertogglebtns .btn-info.disabled {
        display: none;
    }

    #innercontent #allfindingsgrid div.answertogglebtns .btn-info.active.disabled {
        display: block;
        opacity: 1.0;
        color: #000000 !important;
    }
}