/*
 * facts12.mdb.css
 * Factsweb version 12 css overrides for all environments
 * for use with mdbootstrap library
 */
@charset "utf-8";

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

main.loginpage {
  background-image: url('/carrierlogistics/images/clitrucks.jpg');
  background-size: 100%;
  height: 80%;
  padding-bottom: 0px;
}

.logincard {
	width: 30rem;
}

.btn {
	text-transform: none;
}

.tooltip {
    --mdb-tooltip-max-width: 400px;
}

#topframelogo {
	height: 50px;
}

img.cliavatar {
    max-height: 50px;
    max-width: 50px;
}

div.userinitials {
	width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--mdb-secondary-bg);
    color: var(--mdb-secondary-text-emphasis);
	border: 1px var(--mdb-secondary-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

div.pagetitle {
	--mdb-bg-opacity: 1;
    background-color: rgba(var(--mdb-secondary-bg-rgb), var(--mdb-bg-opacity)) !important;
	color: var(--mdb-body-color);
	padding: .5rem !important;
	margin-bottom: 1rem !important;
	text-align: center !important;
	background-image: var(--mdb-gradient) !important;
}

#mainf {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.page-footer {
	background-color: var(--mdb-primary-bg-subtle);
	color: var(--mdb-body-color);
}
.page-footer a {
    color: var(--mdb-body-color);
}
.page-footer .btn-floating {
	color: var(--mdb-btn-color);
}

.page-footer .poweredby {
    color: var(--mdb-info);
    font-size: x-small;
}
.page-footer .copyright {
    font-size: small;
}


div.zipcodefield {
	max-width: 12rem;
}
div.datefield {
	max-width: 12rem;
}
div.phonefield {
	max-width: 15rem;
}
div.emailfield {
	max-width: 30rem;
}

.mw35 {
		max-width: 35rem;
}
.mw40 {
		max-width: 40rem;
}
.mw50 {
		max-width: 50rem;
}

.invalid-feedback, .valid-feedback {
	white-space: nowrap;
}

.card {
	--mdb-card-cap-color: var(--mdb-gray-900);
}

.datatable {
    --mdb-datatable-sm-th-td-padding-x: 1rem;
	--mdb-datatable-tbody-font-weight: 400;
	--mdb-datatable-color: var(--mdb-gray-900);
	--mdb-datatable-hover-color: var(--mdb-gray-900);
}

:root,[data-mdb-theme=light] {	 
    --mdb-link-color: var(--mdb-primary);
    --mdb-link-color-rgb: var(--mdb-primary-rgb);
	
	.form-check-input:checked {
        background-color: var(--mdb-primary);
        border-color: var(--mdb-primary);
    }
	.form-range::-webkit-slider-thumb {
        background-color: var(--mdb-primary);
    }
	.form-range::-moz-range-thumb {
        background-color: var(--mdb-primary);
    }
	.range {
		--mdb-range-thumb-background: var(--mdb-primary);
	}
	.btn-primary {
        --mdb-btn-bg: var(--mdb-primary);
        --mdb-btn-border-color: var(--mdb-primary);
        --mdb-btn-disabled-bg: var(--mdb-primary);
        --mdb-btn-disabled-border-color: var(--mdb-primary);
    }
	.btn-outline-primary {
        --mdb-btn-color: var(--mdb-primary);;
        --mdb-btn-border-color: var(--mdb-primary);
        --mdb-btn-hover-border-color: var(--mdb-primary);
        --mdb-btn-active-bg: var(--mdb-primary);
        --mdb-btn-active-border-color: var(--mdb-primary);
        --mdb-btn-disabled-color: var(--mdb-primary);
        --mdb-btn-disabled-border-color: var(--mdb-primary);
		--mdb-btn-outline-border-color: var(--mdb-primary);
    }
	.dropdown-menu {
		--mdb-dropdown-link-active-bg: var(--mdb-primary);
	}
	.nav-tabs {
		--mdb-nav-tabs-link-active-color: var(--mdb-primary);
        --mdb-nav-tabs-link-active-border-color: var(--mdb-primary);
	}
	.nav-tabs .nav-link {
		--mdb-nav-tabs-link-active-color: var(--mdb-primary);
        --mdb-nav-tabs-link-active-border-color: var(--mdb-primary);
	}
	.nav-pills.menu-sidebar .nav-link.active,.nav-pills.menu-sidebar .show>.nav-link {
		--mdb-scrollspy-menu-sidebar-active-color: var(--mdb-primary);
        --mdb-scrollspy-menu-sidebar-active-border-color: var(--mdb-primary);
	}
	.accordion {
		--mdb-accordion-active-color: var(--mdb-primary);
	}
	.pagination {
		--mdb-pagination-active-border-color: var(--mdb-primary);
	}
	.list-group {
		--mdb-list-group-active-bg: var(--mdb-primary);
        --mdb-list-group-active-border-color: var(--mdb-primary);
	}
	.form-outline {
        --mdb-form-outline-select-notch-border-color: var(--mdb-primary);
    }
	.form-control:focus {
        border-color: var(--mdb-primary);
        box-shadow: inset 0px 0px 0px 1px var(--mdb-primary);
    }
	.form-select:focus {
        border-color: var(--mdb-primary);
        box-shadow: inset 0px 0px 0px 1px var(--mdb-primary);
    }
	.form-check-input:checked {
        border-color: var(--mdb-primary);
    }
	.form-check-input:checked:focus {
        border-color: var(--mdb-primary);
    }
    .form-check-input:checked:focus:before {
        box-shadow: 0px 0px 0px 13px var(--mdb-primary);
    }
    .form-check-input:indeterminate:focus:before {
        box-shadow: 0px 0px 0px 13px var(--mdb-primary);
    }
	.form-check-input[type=checkbox]:checked {
        background-color: var(--mdb-primary);
    }
	.form-check-input[type=checkbox]:checked:focus {
        background-color: var(--mdb-primary);
    }
    .form-check-input[type=checkbox]:indeterminate {
        border-color: var(--mdb-primary);
    }
	.form-check-input[type=radio]:checked:after {
		border-color: var(--mdb-primary);
        background-color: var(--mdb-primary);
	}
	.form-switch .form-check-input:checked[type=checkbox]:after {
		background-color: var(--mdb-primary);
	}
	.input-group>.form-control:focus {
        border-color: var(--mdb-primary);
        box-shadow: inset 0 0 0 1px var(--mdb-primary);
    }
	timepicker-wrapper {
		--mdb-timepicker-time-tips-inner-active-bg: var(--mdb-primary);
		--mdb-timepicker-item-middle-dot-bg: var(--mdb-primary);
        --mdb-timepicker-hand-pointer-bg: var(--mdb-primary);
		--mdb-timepicker-circle-border-color: var(--mdb-primary);
		--mdb-timepicker-input-color: var(--mdb-primary);
		--mdb-datepicker-toggle-focus-color: var(--mdb-primary);
	}
	.timepicker-toggle-button {
		--mdb-timepicker-btn-icon-hover-color: var(--mdb-primary);
        --mdb-timepicker-btn-icon-focus-color: var(--mdb-primary);
	}
	.datepicker-main {
		--mdb-datepicker-cell-selected-background-color: var(--mdb-primary);
		--mdb-datepicker-cell-focused-selected-background-color: var(--mdb-primary);
	}
	.select-wrapper {
		--mdb-form-outline-select-clear-btn-focus-color: var(--mdb-primary);
		--mdb-form-outline-select-label-color: var(--mdb-primary);
        --mdb-form-outline-select-notch-border-color: var(--mdb-primary);
        --mdb-form-outline-select-input-focused-arrow-color: var(--mdb-primary);
	}
	.autocomplete-label {
		--mdb-autocomplete-label-color: var(--mdb-primary);
	}
	.multi-range-slider {
		--mdb-multi-range-hand-bg: var(--mdb-primary);
		--mdb-multi-range-tooltip-bg: var(--mdb-primary);
	}
}
	

/*
 * custom helper classes
 */
 
.h10 {
  height: 10px;
}
.h20 {
  height: 20px;
}
.h50 {
  height: 50px;
}
.h100 {
  height: 100px;
}
.h150 {
  height: 150px;
}
.fs80 {
  font-size: 80%;
}
.fs120 {
  font-size: 120%;
}
.g0 {
  gap: 0px;
}
.g1 {
  gap: 1px;
}
.g5 {
  gap: 5px;
}
.g10 {
  gap: 10px;
}
.g20 {
  gap: 20px;
}
.w90 {
  width: 90%;
}


:root, :host {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root, :host {
    color-scheme: dark;
  }
}