/* 
 *  GCM Web App - Base Stylesheet
 *  @walle
 *  
 *  This stylesheet will act as the baseline styles for the MasterCraft Web app
*/

/* 
 *
 *   Base styles 
 *
 *      
*/

/* Telerik Analytic graph layout pop out window */


.graph-window, .surf-window, .surf-window .k-window-titlebar, .graph-window .k-window-titlebar {
    color: white !important;
    background-color: darkslategray !important;
}

.graph-window span {
    font-size: 24px
}

.graph-window ul li {
    padding: 1rem 1rem;
}

.pdm-outputs {
    padding: 1rem;
}

    .pdm-outputs p {
        border-bottom: 1px solid white;
        font-family: TungstenCond-Bold;
        text-transform: uppercase;
        text-align: center;
        font-size: 26px;
        padding-bottom: 5px;
    }

.graph-window table {
    color: white;
    margin: auto;
    display: block;
    margin-left: 1.5rem;
}

.surf-table-container {
    justify-content: left;
}

.surf-table-container p, .surf-table-container span {
    border: none;
}

    .graph-window table td {
        padding-left: 1rem;
        font-family: TungstenCond-Bold;
        text-transform: uppercase;
        text-align: center;
        font-size: 26px;
    }

    .graph-window table tr {
        /*border-bottom: 1px solid white;*/
    }

.surf-window table {
    color: white;
    margin: auto;
    display: block;
    margin-left: 1.5rem;
    z-index: 10000;
}

.surf-window table td {
    padding-left: 1rem;
    font-family: TungstenCond-Bold;
    text-transform: uppercase;
    font-size: 26px;
}

/* Telerik announcements & notifications */
.AnnouncementNotifications .k-notification-container .k-notification {
    width: 600px;
    height: 75px;
    font-size: 1em;
    text-align: center;
    align-items: center;
    margin-bottom: 10px;
}

.AnnouncementNotifications .k-icon {
    /* Don't use 'px' units for k-icons, it causes them to look distorted */
    width: 2em;
    height: 2em;
}

.notification-circle {
    position: absolute;
    margin-left: -27px;
    margin-top: 12px;
    width: 12px;
    height: 12px;
}

.BellIcon {
    color: white;
}

@media only screen and (max-width: 800px) {
    .AnnouncementNotifications .k-notification-container .k-notification {
        width: 100%;
        font-weight: bold;
        font-size: 1.1em;
        padding-bottom: 15px;
    }
}

@media screen and (max-width: 500px) {
    .BellIcon {
        width: 50%;
        margin: 0 0 0 5px;
    }

    #notification-container {
        margin: 0;
    }
}
/*
    telerik device and device pages headers
*/
.k-column-title {
    min-width: 0;
    white-space: pre-line !important;
    font-weight: bold !important;
    height: min-content;
    padding: 0px !important;
    font-size: 12px;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}

.k-grid .k-cell-inner > .k-link {
    width: auto;
    display: flex;
    /*    flex-flow: column nowrap !important;
*/ text-align: center !important;
    align-items: center !important;
    justify-content: center;
    flex: 1;
    overflow: unset !important;
}

/*
    device groups ddata grid on overpage, doesn't need a header
*/
.overview-device-groups-grid .k-grid-header {
    display: none;
}
/*.k-column-title {
    min-width: max-content !important;
    text-overflow: inherit;
    word-break: break-all;
    white-space: break-spaces;
    overflow: clip;
    font-weight: bold;
}*/
/*.k-column-title {
    min-width: max-content !important;
    text-overflow: inherit;
    word-break: break-all;
    white-space: break-spaces;
    overflow: clip;
    font-weight: bold;
}*/
/*
 * --------------------------------------
 * Universal
 * --------------------------------------
*/
@font-face {
    font-family: TungstenCond-Bold;
    src: url("/fonts/Tungsten-Bold.otf") format("opentype");
}

h1, h2, h3, h4,h5, h6 {
    font-family: TungstenCond-Bold;
    font-size: 36px;
    text-transform: uppercase;
}

/* mainLayout */

.logo {
    float: left;
    vertical-align: auto;
    height: 40px;
    margin: 15px 0px 0px 15px;
}

.sticky-table {
    text-align: center;
    position: relative;
    /*border-collapse: collapse;*/
}

.sticky-table th {
    position: sticky;
    top: 0;
    background-color: white;
    border-bottom: 1px solid black !important;
}

.sticky-table thead tr {
    border-bottom: 1px solid black;
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

.device-list-alert {
    color: #842029 !important;
    background-color: #f8d7da !important;
    border-color: #f5c2c7 !important;
}

main {
    flex: 1;
}

.top-row ::deep a, .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
}

.top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky {
    position: sticky;
    top: 0px;
    aligh-self: flex-start;
    /*top: 100px;
    width: 100%;*/
}

@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 225px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row, article {
        /*padding-left: 2rem !important;*/
        padding-right: 1.5rem !important;
    }
}


/* end nav */

.date-picker {
    border: solid lightgrey 1px;
}

/* Ending site styles *****************************/

body {
    background-color: #e2e1df;
}

.content {
    padding-top: 1.1rem;
}

.content-no-pad {
    padding-top: 0;
}

.content-slim {
    padding-top: .5rem;
}

.ml-1 {
    margin-left: .25rem !important;
}

.ml-2 {
    margin-left: .5rem !important;
}

.ml-3 {
    margin-left: .75rem !important;
}

.ml-4 {
    margin-left: 1rem !important;
}

.ml-5 {
    margin-left: 1.25rem !important;
}

.ml-6 {
    margin-left: 1.5rem !important;
}

.border-b {
    border-bottom: 5px solid black !important;
}

.border-t {
    border-top: 5px solid black !important;
}

.bg-lightgray {
    background-color: lightgray;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.bg-fail {
    background: #f8d7da !important;
}

.bg-pass {
    background: #d1e7dd;
}

.font-size-16 {
    font-size: 16px !important;
}

/* Added 1/28 for log warning messages */
.bg-caution {
    background: #FAED73;
}

.max-w900 {
    max-width: 900px;
}

.max-w600 {
    max-width: 600px;
}

.max-w400 {
    max-width: 400px;
}

.alert-color-dot {
    cursor: pointer;

}

.alert-symbol {
    position: absolute;
}

.dropdown-nav-item {
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.dropdown-nav-item a {
    color: #d7d7d7 !important;
    text-decoration: none !important;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out !important;
}

.mud-ripple a div, .mud-ripple a svg {
    color: #d7d7d7 !important;
}

.user-email {
    /*color: white;*/
    float: right;
    margin: 10px 20px 0px 0px;
}

.user-email:hover {
    text-decoration: underline;
    cursor: pointer;
}

.nav-border {
    /*border-bottom: 1px solid #666666;*/
    border-bottom: 1px solid black;
}

.page-header {
    background-color: white;
    border-bottom: 1px solid #d6d5d5;
    /*height: 3.5rem;*/
    padding: 3px;
    display: flex;
    align-items: center;
    width: 100%;
}

/*.page-title {
    float: left;
    margin: 5px 5px 0px 10px;
}*/
.page-title {
    margin-bottom: 0px !important;
    height: 48px;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.underline {
    text-decoration: underline;
}

.overflow-sm {
    overflow: scroll;
    max-height: 250px;
}

.overflow-md {
    overflow: scroll;
    max-height: 350px;
}

.overflow-lg {
    overflow: scroll;
    max-height: 450px;
}

.overflow-xl {
    overflow: scroll;
    max-height: 650px;
}

.overflow-xxl {
    overflow: scroll;
    max-height: 850px;
}

.overflow-y-report-history {
    overflow-y: scroll;

}

.w-40 {
    width: 40%!important;
}

.hyperlink-button {
    background: none;
    color: Highlight !important;
    text-decoration: underline !important;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.hyperlink-button-dropdown {
    color: black;
    text-decoration: none;
    border: 1px solid black;
    margin-left: -25px;
    cursor: pointer;
    width: 100%;
}

.hidden {
    display: none;
}

.show {
    display: inline;
}

.strikethrough {
    text-decoration: line-through;
}

.cursor-pointer {
    cursor: pointer;
}

.status-row-hover:hover {
    opacity: .75;
    border: 1px solid lightgray;
    background-color: dimgray;
} 

/* Dropdown */

.dropdown {
    display: inline-block;
    position: relative;
}

.dd-button {
    display: inline-block;
    border: 1px solid gray;
    border-radius: 4px;
    padding: 10px 30px 10px 20px;
    background-color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    height: 40px;
}

    .dd-button:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid black;
    }

    .dd-button:hover {
        background-color: #eeeeee;
    }


.dd-input {
    display: none;
}

.dd-menu {
    position: absolute;
    top: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0;
    margin: 2px 0 0 0;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
    background-color: #ffffff;
    list-style-type: none;
    z-index: 999;
}

.dd-input + .dd-menu {
    display: none;
}

.dd-input:checked + .dd-menu {
    display: block;
}

.dd-menu li {
    padding: 10px 20px;
    cursor: pointer;
    white-space: nowrap;
}

    .dd-menu li:hover {
        background-color: #f6f6f6;
    }

    .dd-menu li a {
        display: block;
        margin: -10px -20px;
        padding: 10px 20px;
    }

    .dd-menu li.divider {
        padding: 0;
        border-bottom: 1px solid #cccccc;
    }

    /* logout dropdown */
.logoutdd-button {
    display: inline-block;
    border: none;
    border-radius: 4px;
    padding: 10px 30px 10px 20px;
    background-color: none;
    cursor: pointer;
    white-space: nowrap;
    height: 40px;
    color: white;
}

.logoutdd-button:hover {
    text-decoration: underline;
}


.logoutdd-input {
    display: none;
}

.logoutdd-input + .logoutdd-menu {
    display: none;
}

.logoutdd-input:checked + .logoutdd-menu {
    display: block;
}

.logoutdd-menu li {
    padding: 10px 0px;
    cursor: pointer;
    /*white-space: nowrap;*/
    margin-left: 0;
}

    .logoutdd-menu li a {
        display: block;
       /* margin: -10px -20px;
        padding: 10px 20px;*/
       margin: 10px 25px;
    }

    .logoutdd-menu li.divider {
        padding: 0;
        border-bottom: 1px solid #cccccc;
    }

.form-input {
    display: inline-block;
    position: relative;
    top: -3.25em;
}

.form-label {
    display: inline-block;
    width: 6em;
    margin-right: .5em;
    padding-top: 0em;

}

.input-container {
    margin-left: 1rem;
}

/* end user dropdown*/
.eu-device-dropdown {
    display: inline-block;
    position: relative;
}

.eu-device-dd-button {
    display: inline-block;
    border: 1px solid gray;
    border-radius: 4px;
    padding: 10px 30px 10px 20px;
    background-color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    height: 40px;
    width: 10rem;
}

    .eu-device-dd-button:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid black;
    }

    .eu-device-dd-button:hover {
        background-color: #eeeeee;
    }


.eu-device-dd-input {
    display: none;
}

.eu-device-dd-menu {
    position: absolute;
    top: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0;
    margin: 2px 0 0 0;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
    background-color: #ffffff;
    list-style-type: none;
    z-index: 999;
}

.eu-device-dd-input + .eu-device-dd-menu {
    display: none;
}

.eu-device-dd-input:checked + .eu-device-dd-menu {
    display: block;
}

.eu-device-dd-menu li {
    padding: 10px 20px;
    cursor: pointer;
    white-space: nowrap;
    width: 20rem;
}

    .eu-device-dd-menu li:hover {
        background-color: #f6f6f6;
    }

    .eu-device-dd-menu li a {
        display: block;
        margin: -10px -20px;
        padding: 10px 20px;
    }

    .eu-device-dd-menu li.divider {
        padding: 0;
        border-bottom: 1px solid #cccccc;
    }



/* 
    error handling
*/
.error-msg {
    display: inline;
    color: black;
    font-weight: bold;
    font-size: 14px;
    margin: .2px 0px .2rem; 0px;
    padding: .25rem;
    width: 100%;
    height: 2rem;
    background-color: lightcoral;
}

/* 
 *  Login Page
 *
*/

#Input_Email.login-page, #Input_Password.login-page{
    color:white;
    background-color:black;
    border-radius: 2rem;
    border: none;
    opacity: 0.6;
    height:3rem;
}

#login-submit {
    border-radius: 2rem;
    background-color: #2798FB;
    border: none;
}

#forgot-password-btn, #resend-confirmation-btn {
    padding:0.5rem;
}

#forgot-password-btn a, #resend-confirmation-btn a {
    color:white;
}

.login-box .mail-icon, .login-box .key-icon{
    color:white;
}

.login-box {
    width: 60%;
    min-width: 35%;
    max-width: 75%;
    padding: 1rem;
    height: auto;
    margin-top: 50px;
    margin: auto;
}

.login-box .form-label{
    color:white;
}

.inner-login-box {
    width: 75%;
    margin: auto;
    display: block;
}

.login-logo {
    width: 100%;
    max-width: 100%;
    align-content: center;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.login-heading {
    font-weight: bold;
    margin-top: 4rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color:#FFF;
}

.login-heading-mc {
    font-weight: bold;
    margin-top: 4rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: black;
}

.sso-logo {
    width: 250px;
    height: auto;
    cursor: pointer;
    margin: auto;
}

@media screen and (max-width: 499px) and (min-width: 300px) {
    .login-logo {
        height: 100%;
        width: auto;
    }

    .login-heading {
        font-size: 28px;
        text-align: center;
    }

    .login-box {
        width: 100%;
        padding: 0rem;
        max-width: 100%;
    }
}

/*
    Register page
*/

.register-box {
    width: 100%;
    min-width: 75%;
    padding: 1rem;
    margin-top: 25px;
    margin: auto;
}

/*
 * --------------------------------------
 * Index & status Rectangles
 * --------------------------------------
*/
.status-element-rect {
    display: inline-block;
    padding: 5px 0px;
    width: 12rem;
    background-color: white;
}

.status-title {
    float: left;
    margin: .6rem 0px 0px 5px;
}

.status-title-med {
    float: left;
    font-size: 14px;
    margin: .7rem 0px 0px 5px;
}

.status-title-small {
    font-size: 12px;
    float: left;
    margin: .7rem 0px 0px 5px;
}

.status {
    float: right;
    margin: 0px 5px 0px 0px;
}

.bg-red {
    background-color: red;
}

.bg-green {
    background-color: green;
}

.bg-yellow {
    background-color: yellow;
}

.bg-blue {
    background-color: #009DCD;
}

.bg-gray {
    background-color: gray;
}

.status-rect {
    width: 6rem;
    height: 2.5rem;
    text-align: center;
    padding: .6rem 0px 0px 0px;
    font-weight: bold;
}

.status-rect-text {
    width: 6rem;
    height: 2.5rem;
    text-align: center;
    font-size: 12px;
    padding: 5px 0px 0px 0px;
}

.notif-table {
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 14px;
}

/*
 * --------------------------------------
 * Engine Data 
 * --------------------------------------
*/
.toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
    background-color: gray;
    border-radius: 15px;
    border: 2px solid gray;
    margin: .5rem 0px 0px 0px;
}

/* After slide changes */
.toggle:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border-color: cornflowerblue;
    background-color: aliceblue;
    top: 1px;
    left: 0px;
    transition: all 0.5s;
}

/* Checkbox checked effect */
.checkbox:checked + .toggle::after {
    left: 21px;
}

/* Checkbox checked toggle label bg color */
.checkbox:checked + .toggle {
    background-color: cornflowerblue;
}

/* Checkbox vanished */
.checkbox {
    display: none;
}

.engine-data-header {
    margin-bottom: .5rem;
    padding-bottom: .25rem;
    border-bottom: 2px solid #e2e1df;
}

.engine-notif-toggle {
    float: left;
    display: inline-block;
    margin-left: .5rem;
}

.engine-notif-header {
    margin: .8rem 0px 0px 4.5rem;
}

.engine-header-edit {
    float: right;
    margin: .3rem .3rem 0px 0px;
}

.engine-column-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 3.5rem;
    border-bottom: 2px solid #e2e1df;
}

.engine-column {
    border-left: 1px solid #e2e1df;
    border-right: 1px solid #e2e1df;
}

.engine-column-container {
    padding: 0px 1rem;
}

.pgn-element {
    width: 200px;/*10rem;*/
    padding: .25rem;
    height: 4.75rem;
    margin: 10px auto;
    justify-content: center;
    border-bottom: 2px solid #e2e1df;
    background-color: lightgrey;
}

    .pgn-element h6 {
        text-align: center;
        font-weight: bold;
        font-family: Arial, monospace;
        font-size: 18px;
        height: 2rem;
        vertical-align:middle;
        background-color: #000000;
        border: 1pt inset #CCCCCC;
        padding-top: 5px;
    }

    .pgn-element p {
        text-align: center;
        vertical-align: central;
        font-weight: bold;
        color: #000000;
        text-transform: none;
        text-align: center;
    }

.color-green {
    color: #00CC00;
}

.color-red {
    color: red;
}

.color-yellow {
    color: yellow;
}

.color-gray {
    color: gray;
}

.engine-data-table {
    width: 100%;
    justify-content: center;
    margin: 1rem auto;
    font-size: 14px;
}

/* Asset Dashboard Component  */
.status-table {
    background-color: white;
    margin-bottom: 0px;
}

.status-gps-cord {
    font-size: 14px;
}

.status-row {
    display:block;
    padding: .15rem;
    height: 4rem;
}

.status-row p {
    margin-bottom: .25rem;
}

.status-row-heading {
    display: inline-block;
    font-weight: bold;
}

.status-row-value {
    display: inline-block;
    margin: 0px .25rem 0px .25rem;
}

.status-row-icon {
    display: inline-block;
    float: right;
    margin: 15px .1rem 0px .1rem;
    border: 10px solid;
    border-radius: 25px;
    background-color: black;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

.status-row-clock-icon {
    display: inline-block;
    float: right;
    margin: 0px .1rem 0px .1rem;
}

.status-row-lr {
    font-size: 12px;
}

/*
 * --------------------------------------
 * Batteries
 * --------------------------------------
*/

.battery-element {
    height: 8rem;
}

.battery-element h6 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0rem;
}

.battery {
    height: 7rem;
    width: 7rem;
    margin: auto;
    color: white;
}

.battery h4 {
    text-align: center;
    padding-top: 2.8rem;
    font-weight: bold;
}

.batt-green {
    background-image: url("/images/base/battery-green.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.batt-red {
    background-image: url("/images/base/battery-red.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.batt-gray {
    background-image: url("/images/base/battery-gray.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/*
 * --------------------------------------
 * Shore Power
 * --------------------------------------
*/

.ac-element {
    width: auto;
    height: auto;
}

.ac-element h5, .ac-element h6 {
    font-weight: bold;
    text-align: center;
}

.ac-element img {
    display: block;
    margin: auto;
}

/*
 * --------------------------------------
 * Fuel/Tanks
 * --------------------------------------
*/

.tank-element {
    width: auto;
    height: 21.5rem;
}

.tank-element h6 {
    font-weight: bold;
    text-align: center;
    height: 2.5rem;
}

.tank-bar {
    height: .5rem;
    width: auto;
    margin: 5px auto;
}

.bar-green {
    background-color: green;
}

.bar-red {
    background-color: red;
}

.bar-gray {
    background-color: lightgray;
}

/*
 * --------------------------------------
 * Switches
 * --------------------------------------
*/

.button-element {
    width: auto;
    height: 12rem;
    margin: 5px 0px;
}

.button-element h6 {
    text-align: center;
    font-weight: bold;
}

.butt {
    width: 5.5rem;
    height: 5.5rem;
    margin: .5rem auto;
    cursor: pointer;
}

.butt-on {
    background-image: url("/images/base/button-on.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.butt-off {
    background-image: url("/images/base/button-off.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.butt-wait {
    background-image: url("/images/base/button-wait.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/*
 * --------------------------------------
 * GeoFences
 * --------------------------------------
*/

.geofence-form-select {
    max-width: 50% !important;
}

.chevron-small {
    width: 25px;
    height: 25px;
    margin-top: 1.75rem;
    margin-left: .25rem;
    position: relative;
}

.breadcrumb {
    font-size: 16px !important;
    font-weight: bold;
    /**/margin-top: 1.75rem !important;
    margin-right: .5rem;
    margin-left: 0;
}

#geo-map {
    height: 85vh;
    margin: 0 1rem;
    border-radius:1rem;
}

.geofence-info-button {
    width: 35px;
    height: auto;
    padding: 0;
    font-size: 10px;
    box-shadow: none !important;
    transition: none !important;
}

#geoFenceTitle {
    display: inherit;
}

span {

}

/*
 * --------------------------------------
 * Profile
 * --------------------------------------
*/

.u-email {
    font-weight: bold;
    margin-left: 1rem;
}

.profile-form-label {
    height: 1.2rem;
}

.profile-form-common {
    height: 2rem;
    width: 18rem;
    border: 1px solid lightgray !important;
    font-size: 14px;
    padding-left: .5rem;
    position: relative;
}

.profile-form-save {
    height: 2rem;
}

.toggle-group {
    margin-left: 1rem;
    float: left;
}

.toggle-group p {
    margin-top: .75rem;
    margin-left: .5rem;
}

.toggle-group p, .toggle-group label {
    float: left;
}

/*
 * --------------------------------------
 * Tickets
 * --------------------------------------
*/

.ticket-textarea {
    margin: 0rem 1rem;
    padding: .5rem;
    width: 90%;
    height: 14rem;
}

.new-ticket-form-group select {
    margin-bottom: .5rem;
    max-width: 11.5rem;
}

.table-ticket-body {
    width: 40%;
}

/* show ticket */

.comment-element {
    max-width: 125rem;
    margin: .25rem auto;
    padding: .5rem;
    display: inline-block;
   /* border: 2px dotted blue; */
}

.comment-body {
    border: 1px solid black;
    max-width: 40rem;
    height: 9rem;
    padding: .5rem;
}

.riverside-color {
    background-color: lightblue;
}

.riverside-text-color {
    color: #01579b;
    font-weight: bold;
}

.riverside-profile-pic {
    width: 50px;
    height: 50px;
    margin: .5rem;
    background-image: url("/images/base/favicon.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
}

.user-profile-pic {
    width: 50px;
    height: 50px;
    margin: .5rem;
    background-image: url("/images/base/blank-profile-pic.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
}

/*
 * --------------------------------------
 * Tickets
 * --------------------------------------
*/

.accountsettings-header {
    color: #01579b;
    font-weight: bold;
}

/*
 * --------------------------------------
 * Devices
 * --------------------------------------
*/
.device-table .btn {
    margin-left: auto;
    margin-right: auto;
}

.device-table td {
    margin-bottom: 1rem !important;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-bottom: 1px solid gray;
    padding: .25rem .25rem .25rem .25rem;
}

.device-boat {
    width: 100%;
    height: auto;
    border: 2px solid lightgray;
    background-color: white;
}

.dashboard-notif-table {
    font-size: 12px;
}

.dashboard-notif-table span {
    margin-top: 1.2rem;
    text-align: center;
}

.default-boat {
    width: 25px;
    height: 25px;
    padding: 2px;
    margin: 5px 10px;
    border-radius: 5px;
}

.default-boat-sm {
    width: 15px;
    height: 15px;
    padding: 1px;
    margin: 0px 0px 0px 10px;
    top: 0;
    border-radius: 3px;
}

.device-ui-col {
    width: 160px !important;
    min-width: 160px !important;
}

/* For when battery switch is dis/co */

.switch-table {
    margin-left: 50px;
}

/* show */
.smaller-engine-column-container .engine-column-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    display: block;
    height: 3.5rem;
    font-size: 16px;
    border-bottom: 2px solid #e2e1df;
}

.boat-profile p {
    margin: .5rem 1rem;
}

@media screen and (max-width: 816px) {
    .profile-image {
        display: none;
    }
}

/* Settings */
.display-detail-table {
    max-width: 900px;
}

.display-detail-table td {
    text-align: left;
    padding: .25rem 0rem .25rem 1rem;
}

.purge-element {
    margin: auto;
}

.purge-element button {
    margin-left: 1rem;
}

.btn-border-black {
    border: 1px solid black;
}

.sensor-table {
    max-width: 900px;
}

.dm1-filter-table {
    max-width: 950px;
}

/* Report History */
.report-history-ui {
    min-width: 29rem;
    float: left;
}

.report-history-inputs {
    margin: 0px 1rem;
    float: right;
}

.report-history-table {
    text-align: center;
}

.report-message {
    text-align: left !important;
}

.report-history-table th {
    font-size: 16px;
}

.report-history-table td {
    font-size: 14px;
}

.report-history-table td:not(.report-message) {
    vertical-align: middle;
}

/* Multi engine button on engine history | */

.engine-select-button-container {
    margin-bottom: 2rem;
    display: block;
}

.display-inline-block {
    display: inline-block;
}


/*
 *
 *
 *      Site User
 *   
 *
 * 
*/

/* Dashboard */

/*.k-card.telerik-blazor {
    border-radius: 1rem;
    box-shadow: 2px 2px 2px 2px #d9d9d98a;
}

.k-card .k-card-header {
    background-color: #0b406b;
    color:white;
}

#blue-square {
    background-color: #0B406B;
    position: relative;
    z-index: 0;
}*/

#white-rounded-corner {
    border-top-left-radius: 4rem;
    background-color: white; 
    height: 1rem;
    z-index: 1;
    position: absolute;
}

.total-device {
    margin: 0rem 0rem 0rem 1rem;
    width: max-content;
    float: left;
    font-size: 22px;
    font-weight: bold;
}

.su-card-body {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 1px solid lightgrey;
}

.su-table th {
    font-size: 16px;
}

.su-table td {
    font-size: 12px;
}

/* overview */

.device-circle {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    float: left;
    padding: .75rem .1rem;
    margin: .25rem .5rem .25rem .25rem;
    background-color: black;
    text-align: center;
    color: white;
    font-size: 12px;
}

.device-circle-container {
    margin: 1rem 0rem 0rem 0rem;
    cursor: pointer;
    height: 55px;
}

.device-circle-title {
    padding-top: 16px;
    padding-left: 10px;
}

.overview-org-table {

}

/* Organizations */
#organizations-page-title {
    margin-bottom: 0px !important;
    height: 48px;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

#organizations-search-btn{
    border-top-left-radius:0rem;
    border-bottom-left-radius:0rem;
    padding:0.7rem;
}

#organizations-search-bar {
    height: 38px;
    border-top-left-radius:2rem;
    border-bottom-left-radius:2rem;
    font-family:Roboto;
}

#organizations-search-bar:focus {
    outline: none;
}

#organizations-search-bar-container {
    display:flex;
    flex-direction:row;
}

#organizations-search-bar-container:focus {
    /*Disable the outline on focusing the input. It'll be in the wrong spot anwyay*/
    outline:none;
}

.material-icons.back-icon {
    font-size: 48px;
    cursor: pointer;
}

.material-icons.search-icon {
    color:white;
}

.org-table {
    text-align: center;
}

.mud-table {
    border-radius:1rem;
}

.mud-table .mud-table-container {
    border-radius:1rem;
}

/* Org Settings */
.api-element {
    border: 1px solid lightgray;
    height: 3rem;
    margin-top: .5rem;
}

.api-key-element p {
    margin-top: .25rem;
}

/* labels */
.green-check-sm {
    width: 20px;
    height: 20px;
}

.green-check-lg {
    width: 50px;
    height: 50px;
}

/* map */
.map-search {
    margin-right: .15rem;
    
}

.map-search-button {
    padding-top: .55rem;
}

#map {
    height: 85vh;
    margin: 0 1rem;
    border-radius:1rem;
}

.map-ml {
    margin-left: 12px;
}

.map-guide-img {
    width: 20px;
    height:auto;
    margin-left: 1.4rem;
}

.map-guide-img-green {
    width: 20px;
    height: auto;
    margin-left: 1.6rem !important;
}

figure {
    margin: 0;
}

#show-map-icon {
    z-index: 999;
    position: absolute;
    margin: 2rem;
    margin-top:1rem;
}

#posHistoryUI {
    z-index: 999;
    position: absolute;
    margin-left: 9rem;
    margin-top: .5rem;
    padding: .25rem;
    width: contain;
    height: auto;
    background-color: lightgray;
}

#posCurrentUI {
    z-index: 990;
    position: absolute;
    margin-left: 9rem;
    margin-top: .5rem;
    padding: .25rem .45rem .25rem .25rem;
    width: contain;
    height: auto;
    background-color: lightgray;
    display: inline-block;
}

.posHistoryUIText {
    font-size: 8pt;
    color: black;
    margin: .1rem;
}

.posHistoryLabel {
    position: relative;
    top: 0px;
    left: 0px;
}


/*
 *
 *  Super User
 *
 *
*/

/* Device Manager */
.dm-ui-header {
    color: white;
    background-color: black;
}

/* Message Manager */
.mm-table thead{
    color: white;
    background-color: black;
}

.mm-table tbody {
    background-color: gray;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mm-data {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: break-word
}

@media screen and (max-width: 1100px) {
    .mm-data {
        word-wrap: normal;
        white-space: normal;
        word-break: normal;
    }
}

/* pgn manager */
.pgn-table thead {
    font-size: 14px;
}
/* End super user */

/* Sensor Page */
.update-sensor-ui {
    width: 250px;
}

/*
 *
 *  Mobile Styles
 *  Beyond this point, we will style each page/view seperately
 *  Hopefully we can avoid restructuring classes based upon different pages for classes that are shared.
 *  
*/

/* site wide? 

    Will keep an eye if this style affects pages where it's not needed
*/

@media screen and (max-width: 499px) and (min-width: 300px) {
    .table {
        font-size: 12px;
    }

    article {
        padding: 0px !important;
    }

    thead, th {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
    }

    .overflow-x300 {
        overflow-x: scroll;
        max-width: 100%;
    }

    .error-msg {
        font-size: 10px;
        margin: 0px;
    }
}

/*
RmBar
*/
@media screen and (max-width: 499px) and (min-width: 300px) {
    .logo {
        height: 15px;
        margin: 5px;
    }

    .logoutdd-button {
        font-size: 10px;
        padding: 5px;
    }

    /* nav */
    .flex-column {
        margin-right: 35px;
    }

    .page-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 820px) and (min-width: 750px) {
    .page-header {
        background-color: white;
        border-bottom: 1px solid #d6d5d5;
        /*height: 3.5rem;*/
        padding: 3px;
        display: flex;
        align-items: center;
        width: 100%;
    }
}

@media screen and (max-width: 700px) and (min-width: 500px) {
    .logo {
        height: 25px;
    }
}

/*  Navigation */

@media screen and (max-width: 965px) and (min-width: 912px) {
    .sidebar {
        width: 270px !important;
        height: 100vh;
        position: sticky;
        top: 0;
    }
}

@media screen and (max-width: 911px) and (min-width: 830px) {
    .sidebar {
        width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
    }
}

@media screen and (max-width: 829px) and (min-width: 600px) {
    .sidebar {
        width: 275px;
        height: 100vh;
        position: sticky;
        top: 0;
    }
}

/* /orgs */

@media screen and (max-width: 499px) and (min-width: 300px) {
    .org-button {
        padding: .35rem 1rem;
        margin: .35rem 0rem .25rem 0rem;
    }
}

/* Overview */
@media screen and (max-width: 499px) and (min-width: 300px) {
    .overview-button {
        padding: .35rem 1rem;
        margin: .35rem 0rem .25rem 0rem;
        font-size: 12px;
    }

    .overview-title {
        font-size: 24px;
    }
}

/* devices page */
#devices-page-title{
    margin-bottom:0px !important;
    height:48px;
    padding-top:0.2rem;
    padding-bottom:0.2rem;
}

@media screen and (max-width: 499px) and (min-width: 300px) {
    .switch-table {
        margin-left: 0px;
        width: 125px;
    }
}

@media screen and (max-width: 499px) and (min-width: 300px) {
    .create-group-btn {
        width: 75px;
        font-size: 14px;
    }
}

/* Asset Dashboard Navigation */
@media screen and (max-width: 499px) and (min-width: 300px) {
    .asset-nav-row {
        padding: 5px;
        max-width: 325px;
    }
}

/* Asset Settings */
@media screen and (max-width: 499px) and (min-width: 300px) {
    .display-detail-table {

    }
}

/* Asset Report History */
@media screen and (max-width: 499px) and (min-width: 300px) {
    .report-history-ui {
        display: inline-block;
        max-width: 300px;
        min-width: 0px;
    }

    .report-history-ui button {
        width: 100%;
        margin: 5px;
    }

    .report-history-inputs {
        display: block;
        margin: 5px !important;
        float: left !important;
    }

    .report-history-inputs input {
        margin: 5px;
    }

    .report-history-ui .dropdown {
        float: left!important;
        margin-top: 15px;
    }

    .report-history-ui p {
        margin-bottom: 5px!important;
    }
}

/* Users Select */
@media screen and (max-width: 499px) and (min-width: 300px) {
    .input-group {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        width: 90%;
    }

    .u-email {
        font-size: 24px;
    }
}

/* Map */
@media screen and (max-width: 499px) and (min-width: 300px) {
    .map-ui-row .map-input {
        max-width: 225px;
    }

    .map-ui-row {
        width: 100%;
        margin: 0px !important;
    }

    .map-ui-row .btn {
        margin: 10px 0px 0px 0px;
    }

    .map-ui-row .input-group {
        position: relative;
        display: flex;
        flex-wrap: wrap !important;
        align-items: stretch;
        width: 90%;
    }
}

/* Org Settings */
@media screen and (max-width: 499px) and (min-width: 300px) {
   .toggle-group {
       margin: 5px;
       display: inline-block;
       width: 100%;
   }

   .toggle-group p {
       margin: 13px 5px 0px 5px !important;
       font-size: 12px;
       vertical-align: central;
   }

   .api-element {
       font-size: 14px;
       width: 275px;
       display: inline-block;
       padding: 0px !important;
   }

   .api-element button {
       right: 0;
       position: absolute;
   }

   .api-element p {
       margin: 5px;
   }
}

/* Sensor page */
@media screen and (max-width: 499px) and (min-width: 300px) {
    .sensor-input-group {
        position: relative;
        /*display: flex;*/
        /* flex-wrap: nowrap; */
        align-items: stretch;
        width: 90%;
    }
}

/* Batteries page */
@media screen and (max-width: 499px) and (min-width: 300px) {
    .battery-element h6 {
        font-size: 24px;
    }
}

/* User Accounts page */

/* Generic styling*/

.faria-btn-white {
    border-radius: 2rem;
    background-color: white;
    color: black;
    height: 38px;
    padding: 1rem;
    font-family;
    Roboto;
    font-weight: 500;
    cursor: pointer;
}

.faria-btn-grey {
    border-radius: 2rem;
    background-color: dimgrey;
    color: white;
    height: 38px;
    padding: 1rem;
    font-family: Roboto;
    font-weight: 500;
    cursor: pointer;
}

.faria-btn-yellow {
    border-radius: 2rem;
    background-color: #FFCA2C;
    color: white;
    height: 38px;
    padding: 1rem;
    font-family: Roboto;
    font-weight: 500;
    cursor: pointer;
}

.faria-btn-red {
    border-radius: 2rem;
    background-color: #bb2d3b;
    color: white;
    height: 38px;
    padding: 1rem;
    font-family: Roboto;
    font-weight: 500;
    cursor: pointer;
}

.faria-btn-light-grey {
    border-radius: 2rem !important;
    background-color: lightgrey !important;
    color: black !important;
    height: 38px !important;
    padding: 1rem !important;
    font-family: Roboto !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

.faria-btn-green {
    border-radius: 2rem;
    background-color: #1a8c57;
    color: white;
    height: 38px;
    padding: 1rem;
    font-family: Roboto;
    font-weight: 500;
    cursor: pointer;
}

.faria-btn-small {
    height: 30px;
    cursor: pointer;
}

.faria-dropdown {
    border-radius:2rem;
    background-color:white;
    color:black;
    padding-left:1rem;
    padding-right:1rem;
    font-family:Roboto;
    font-weight:400;
}

.faria-search-bar-container {
    display: flex;
    flex-direction: row;
}

.faria-search-bar-container:focus {
    /*Disable the outline on focusing the input. It'll be in the wrong spot anwyay*/
    outline: none;
}

.faria-search-btn {
    border-top-left-radius: 0rem !important;
    border-bottom-left-radius: 0rem !important;
    padding: 0.7rem !important;
}

/*.mud-nav-link-text :hover {
    color: white !important;
}*/

.faria-search-bar {
    height: 38px;
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
    font-family: Roboto;
}

.faria-input {
    border-radius:2rem;
    font-family:Roboto;
    height:38px;
}

.faria-labelled-input {
    border-radius:2rem;
    font-family:Roboto;
    height:58px;
}

.faria-input-label {
    padding-top:1.2rem;
    opacity:0.65;
}

.faria-rounded {
    border-radius:2rem;
}

.faria-rounded-top {
    border-top-left-radius:2rem!important;
    border-top-right-radius:2rem!important;
}