/* DE Web Works - Main CSS */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #333;
    background-color: #edeff2;    
}

h1, h2, h3, h4 {
    font-family: 'Open Sans', sans-serif;
}

.page-wrapper {
    position: relative;
}

/*------------------------------------*\
    #FOUNTATION STYLE OVERRIDES
\*------------------------------------*/
.row {
    max-width: 100%;
}

table {
    border-collapse: collapse;
}

table thead,
table tfoot,
table tbody tr:nth-child(even) {
    color: inherit;
    background-color: transparent;
}

table tbody, table tfoot, table thead {
    border: none;
    background-color: transparent;
}

table caption, table tbody td, table tbody th {
    padding: 3px
}

/*------------------------------------*\
    #HEADER
\*------------------------------------*/
.header {
    position: relative;
    color: #fff;
    background-image: url(./images/bg-header.png);
    background-position: center;
    background-size: cover;    
    z-index: 10;
}

.header .text-logo {
    font-family: urbane-rounded, sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 50px;
}

.header-logo {
    display: inline-block;
    margin: 0 15px;
}

.header-user {
    position: relative;
    margin: 17px 0;
    font-size: 40px;
}

.user-icon {
    cursor: pointer;
}

.user-nav {
    display: none;
    position: absolute;
    right: -5px;
    top: calc(100% + 16px);
    border: 1px solid #4B9CD3;
    padding: 5px 0;
    font-size: 14px;
    text-align: left;
    color: #333;
    background-color: #fff;
    opaciy: 0;
    transition: opacity 0.2s;
}

.user-nav.open {
    display: block;
    opacity: 1;
}

.user-nav ul {
    list-style-type: none;
    margin: 0;
}

.user-nav a,
.user-nav .user-name {
    display: block;
    padding: 5px 15px;
    color: #333;
}

.user-nav .user-name {
    font-weight: 700;
}

.user-nav a:hover,
.user-nav a:focus {
    background-color: #f2f2f2;
}

.page-body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

/*------------------------------------*\
    #SIDEBAR
\*------------------------------------*/
.sidebar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 240px;
    background-color: #364147;
    transition: width 0.2s;
}

.sidebar > * {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.sidebar .top {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

.sidebar .menu > li > a {
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    white-space: nowrap;
}

.sidebar .menu > li a:hover {
    background-color: #4f595f;
}

.sidebar .fas {
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
}

.sidebar .is-accordion-submenu-parent > a::after {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: none;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    content: "\f107";
    text-align: center;
}

.is-accordion-submenu-parent[aria-expanded=true] > a::after {
    margin-top: 3px;
    transform: translateY(-50%) rotate(180deg);
}

.sidebar.collapsed {
    width: 55px;
    overflow: hidden;
}

.sidebar.collapsed .menu > li > a > span,
.sidebar.collapsed .is-accordion-submenu-parent > a::after {
    display: none;
}

.sidebar .toggle-sidebar .fas {
    transform: rotate(0deg);
    transition: all 0.2s;
}

.sidebar.collapsed .toggle-sidebar .fas {
    transform: rotate(-180deg);
}

/*------------------------------------*\
    #PAGE CONTENT
\*------------------------------------*/
main.content {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 15px 30px 30px;
    font-size: 15px;
}

.top-graphs {
    list-style-type: none;
    margin-left: 0;
}

.top-graphs li {
    display: inline-block;
    margin-right: 10px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    padding: 5px 15px;
    color: #11294B;
    background-color: #fff;
}

.content-wrapper {
    margin: 35px;
}

.content-wrapper.equipment {
    margin: 0 0 35px 0;
}

.heading-bar {
    display: flex;
    justify-content: flex-start;
    padding: 15px 35px;
    background-color: #fff;
}

.heading-bar h1 {
    margin-bottom: 0;
    font-size: 26px;
}

.heading-bar .block {
    position: relative;
    display:flex;
    align-items: center;
    margin-right: 50px;    
    background-color: #fff;    
}

.heading-bar .block:after {
    position: absolute;
    top: 0;
    left: -15px;
    width: 1px;
    height: 100%;
    content: "";
    background-color: rgba(0, 0, 0, 0.2);
}

.heading-bar .block:first-of-type:after {
    display: none;
}

.block.model{
    padding:10px;
}

.heading-bar .block.serial {
    padding-left: 50px;    
    background-image: url(./icons/equipment-serial.png);
    background-position: 10px center;
    background-repeat: no-repeat;    
}

.heading-bar .block.model {
    padding-left: 50px;    
    background-image: url(./icons/equipment-model-new.png);
    background-position: 10px center;
    background-repeat: no-repeat;    
}

.heading-bar .block.status {
    padding-left: 45px;    
    background-image: url(./icons/equipment-status.png);
    background-position: 10px center;
    background-repeat: no-repeat;    
}

.heading-bar .block.gps {
    padding-left: 55px;    
    background-image: url(./icons/equipment-gps.png);
    background-position: 10px center;
    background-repeat: no-repeat;    
}

.heading-bar .block.duration {
    padding-left: 55px;
    background-image: url(./icons/equipment-duration.png);
    background-position: 10px center;
    background-repeat: no-repeat;
}


.alternating-bg {
    padding: 15px 20px;
}

.alternating-bg.short {
    padding: 8px 20px;
}

.alternating-bg:nth-of-type(even) {
    background-color: #fff;
}

.alternating-bg:first-of-type {
    padding-top: 0;
}

.section-wrap {
    margin-right: -.9375rem;
    margin-left: -.9375rem;
    padding-right: .9375rem;
    padding-left: .9375rem;
    margin-bottom: 20px;
    border: solid 1px #d9d9d9;
    margin-top: -0.5rem;
}

.section-wrap .alternating-bg {
    padding-left: 0;
    padding-right: 0;
}

.section-wrap .alternating-bg:first-of-type {
    padding-top: 15px;
}

.section-wrap .alternating-bg.short:first-of-type {
    padding-top: 8px;
}

.section-wrap .header {
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #4F5157;
    background-image: none;
}

/*------------------------------------*\
    #RAD INPUTS / FORMS
\*------------------------------------*/
.content .RadInput_Silk[style*="width:160px"] {
    width: 100% !important;
}

.content .RadInput_Silk input[type="text"],
.content .RadInput_Silk input[type="password"] {
    height: 2.4375rem;
    margin: 0 0 1rem;
    padding: .5rem;
    border: solid 1px #364147;
    color: #333;
    font-size: 15px;
}

.content .RadInput_Silk input[type="text"]:disabled {    
    background-color: #f6f7f8;
}

.content span.Error {
    position: relative;
    top: -15px;
    color: #ff2222;    
}

.button {
    border-radius: 3px;
    background-color: #0f294b;
    transition: all .2s;
}

.button:hover,
.button:focus {
    background-color: #4B9CD3;
    box-shadow: 1px 1px 3px rgba(15, 41, 75, 0.5);
}

/*------------------------------------*\
    #RAD CALENDAR
\*------------------------------------*/
.content .RadPicker input[type="text"] {
  margin-bottom: 0;
}

.RadPicker .rcSelect a {
    text-indent: 0;
    background-image: none;
}

.RadPicker .rcSelect a:hover {
    border-color: #4B9CD3;
    color: #fff;
    background-color: #4B9CD3;
    background-image: none;
}

.rcCalPopup:before {    
    position: absolute;
    top: 50%;
    left: 50%;       
    transform: translate(-50%, -50%);
}

.RadInput a:after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle
}

.RadCalendarPopup table {
  margin: 0;
}

.RadCalendarPopup table caption {
  padding: 0;
}

.RadCalendar a {
  color: #000;
}

/*------------------------------------*\
    #DATA TABLE
\*------------------------------------*/
.data-table th,
.data-table td {
    padding: 8px 15px 10px;
}

.data-table thead th {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #fff;
    background-color: #4B9CD3;
}

.data-table tbody th {
    padding-top: 3px;
    padding-bottom: 4px;
    text-align: left;
    color: #fff;
    background-color: #364147;
}

.data-table tbody tr {
    background-color: #f4f7f9;
}

.data-table tbody tr:nth-child(even) {
    background-color: #fff;
}

.data-table tbody td a {
    color: #333;
}

.data-table tbody td a:hover,
.data-table tbody td a:focus {
    color: #4B9CD3;
}

.data-table span.full,
.data-table span.part,
.data-table span.freelance {
    font-size: 13px;
    ;
    font-weight: 600;
    padding: 2.5px 7px;
    border-radius: 5px;
    color: #fff;
    white-space: nowrap;
}

.data-table span.full {
    background-color: #4B9CD3;
}

.data-table span.part {
    background-color: #fdb94b;
}

.data-table span.freelance {
    background-color: #ee5744;
}

/*------------------------------------*\
    #LOGIN PAGE
\*------------------------------------*/
.login-form {
    width: 100%;
    max-width: 500px;    
    margin: 50px auto 0;
    border: solid 1px #364147;
    text-align: center;
    background-color: #fff;
    background-color: #fff;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
}

.login-logo-bg {
    margin-bottom: 15px;
    padding: 15px;
    background-image: url(./images/bg-header.png);
}

.login-logo {
    margin: 0 auto;
    padding: 0;
}

/*
body.login {
    background-image: url(./images/bg-login.jpg);
    background-position: center;
    background-size: cover;
}

body.login .page-wrapper > .container {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

body.login .page-wrapper > .container > .row {
    max-width: 875px;
}

.login-block-right {
    background-color: #fff;
    padding: 15px 65px;
}

.login-logo {
    margin: 0 auto;
    padding-bottom: 20px;
}

.login-block-right .RadInput_Silk[style*="width:160px"] {
    width: 100% !important;
}
*/

.login-email,
.login-password {
    position: relative;
}

.login-email input[type="text"],
.login-password input[type="password"] {
    position: relative;
    width: 100%;
    height: 2.4375rem;
    margin: 0 0 1rem;
    padding: .5rem;
    padding-left: 36px;
    border: solid 1px #11294B;
    color: #333;
    background-color: transparent;
    font-size: 15px;
}

/*
.login-block-right input::-webkit-input-placeholder {
    color: #4B9CD3;
}

.login-block-right input:-moz-placeholder {
    color: #4B9CD3;
}

.login-block-right input::-moz-placeholder {
    color: #4B9CD3;
}

.login-block-right input:-ms-input-placeholder {
    color: #4B9CD3;
}
*/

.login-email:before {
    position: absolute;
    left: 10px;
    top: 11px;
    width: 15px;
    height: 16px;
    content: "";
    background-image: url(images/icon-login-email.png) !important;
    background-repeat: no-repeat !important;
    background-position: center;
    z-index: 100;
}

.login-password:before {
    position: absolute;
    left: 10px;
    top: 11px;
    width: 17px;
    height: 20px;
    content: "";
    background-image: url(images/icon-login-password.png) !important;
    background-repeat: no-repeat !important;
    background-position: center;
    z-index: 100;
}

.login-form .button {
    background-color: #000;
}

.login-form .button:hover,
.login-form .button:focus {
    background-color: #333;
}

.button.btn-orange {
    font-size: 17px;
    background-color: #11294B;
    margin-bottom: 0;
    padding: 0.75rem 2rem;
    border-radius: 5px;
}

.button.btn-orange:hover,
.button.btn-orange:focus {
    background-color: #2B4365;
}

.login-block-right hr {
    background-color: #11294B;
}

.login-block-right .Error {
    color: red;
}

.login-block-right .Success {
    color: green;
}

a.passwordResetLink {
    color: #005596;
}

a.passwordResetLink:hover {
    text-decoration: none;
}

.columns.login-block-left {
    padding: 25px 35px 20px;
    color: #fff;
    font-size: 19px;
    background-color: #4B9CD3;
}

.login-block-left p {
    color: #fff;
    font-size: 19px;
    line-height: 1.3;
}

.login-block-left h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.0;
}

.login-ad-mobile {
    float: right;
    padding-left: 15px;
}

.bottom-login-logo {
    margin-top: 20px;
}

.button.btn-green {
    color: #fff;
    font-size: 17px;
    background-color: #11294B;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    border-radius: 5px;
}

.button.btn-green:hover,
.button.btn-green:focus {
    background-color: #2B4365;
}

/*------------------------------------*\
    #OFF CANVAS SIDEBAR
\*------------------------------------*/
.off-canvas {
    padding-top: 114px;
    background-color: #35373d;
}

.side-nav {
    margin: 0;
    margin-top: 2.4rem;
    border-top: 1px solid #4a4b51;
}

.side-nav li {
    border-bottom: 1px solid #4a4b51;
}

.side-nav a {
    display: block;
    padding: 20px;
    font-size: 14px;
    color: #b8bbc2;    
    text-transform: uppercase;
    text-decoration: none;    
}

.side-nav a:hover,
.side-nav a:focus {
    background-color: #0d1016;
}

/*------------------------------------*\
    #RESPONSIVE EMBED CONTAINER
\*------------------------------------*/
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*------------------------------------*\
    #FOOTER
\*------------------------------------*/
.footer {
    display: none;
    color: #fff;
    background-color: #222;
}

/*begin flexbox sticky footer*/
/*https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css*/
html,
body,
form {
    height: 100%;
}

body .page-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -moz-flex-direction: column;
    -o-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}

body .page-wrapper > * {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

body .page-wrapper > .page-body {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

body .page-wrapper > .page-body:after {
    content: '\00a0';
    display: block;
    height: 0;
    visibility: hidden;
}
/* end flexbox sticky footer */

/*------------------------------------*\
    #MEDIA QUERIES
\*------------------------------------*/
/* Small only */
@media screen and (max-width: 47.9375em) {
    /*------------------------------------*\
        #RAD INPUTS / FORMS
    \*------------------------------------*/    
    .small-12 label.middle {
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 4px;
    }

    /*------------------------------------*\
        #LOGIN PAGE
    \*------------------------------------*/
    body.login .page-wrapper > .container {
        top: 20%;
        padding: 0 30px;
    }
}

/* Small only landscape */
@media screen and (max-width: 47.9375em) and (orientation: landscape) {
}

/* Small only portrait */
@media screen and (max-width: 47.9375em) and (orientation: portrait) {
}

/* Small only portrait */
@media screen and (max-width: 320px) and (orientation: portrait) {
}

/* Medium and up */
@media screen and (min-width: 48em) {
    /*------------------------------------*\
        #LOGIN PAGE
    \*------------------------------------*/
    body.login .page-wrapper > .container {
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Tablet only */
@media screen and (min-width: 48em) and (max-width: 64em) {
}
/* Tablet only */
@media screen and (min-width: 48em) and (max-width: 64em) and (orientation: portrait) {
}

/* Large and up */
@media screen and (min-width: 64em) {
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
}

.Error {
    color: red;
    font-weight: bold;
}

.NoMarginError {
    color: red;
    font-weight: bold;
}

.Success {
    color: green;
    font-weight: bold;
}

.Cancelled {
    color: red;
    font-weight: bold;
}

.ExperianPasswordReset{
    background-color:red;
    padding-top: 15px;
    color:white;
}

.content .RadUpload .ruFakeInput {
    display: inline-block;
    width: 180px;
}

.textboxSpacing{
    margin-top: 20px;
}

.formatTextBox .RadInput{
    width: 500px;
}

.formatTextBox .RadAutoCompleteBox {
    display: block;
}


.RadAjaxPanel .fade{
    opacity: 1;

    animation: fadeIn 1s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from { opacity: 1; }
    to { opacity: 0; }
}

.Error {
    color: red;
}

.Success {
    color: green;
}

.RadPicker .rcSelect {
    position: absolute;
    bottom: 1px;
    right: 1px;
    top: 1px;
    overflow: hidden;
    height: 30px;
}