/* APPSTYLES.CSS: A SEMANTIC CSS LIBRARY FOR ADDING DESIGN STYLES TO WORKSAFEBC APPS.
/* EXTENDED BOOTSTRAP STYLESHEET * Copyright 2020 Worksafe BC * Based on Bootstrap 4.3.1 * Includes custom elements and classes */
/*GENERAL FONTS */
@font-face {
font-family: halis;
src: url(../css/assets/fonts/halis-regular.otf);
}
@font-face {
font-family: halis-bold;
src: url(../css/assets/fonts/halis-bold.otf);
font-weight: bold;
}
/*BRANDED FONT: HALIS WORKSAFE;
*/
@font-face {
font-family: halisws-bold;
src: url(../css/assets/fonts/worksafebchalisrbold-webfont.eot);
}
@font-face {
font-family: halisws-medium;
src: url(../css/assets/fonts/worksafebchalisrmedium-webfont.eot);
}
@font-face {
font-family: halisws;
src: url(../css/assets/fonts/worksafebchalisrregular-webfont.eot);
}
@font-face {
font-family: halisws-bold;
src: url(../css/assets/fonts/worksafebchalisrbold-webfont.eot);
}
@font-face {
font-family: halisws-bold;
src: url(../css/assets/fonts/worksafebchalisrbold-webfont.woff);
}
@font-face {
font-family: halisws-medium;
src: url(../css/assets/fonts/worksafebchalisrmedium-webfont.woff);
}
@font-face {
font-family: halisws;
src: url(../css/assets/fonts/worksafebchalisrregular-webfont.woff);
}
/*FONT VARIANTS*/
* {
font-variant-ligatures: none;
}
/*BODY PROPERTIES*/
body {
font-family: "verdana";
color: #453f39;
font-size: 14px;
}
/*BRANDED FONT: HALIS WORKSAFE;
*/
.font-halisws {
font-family: halisws;
}
.font-halisws-medium {
font-family: halisws-medium;
}
.font-halisws-bold {
font-family: halisws-bold;
}
/*BRANDED FONT: HALIS DEFAULT;
*/
.font-halis {
font-family: halis;
}
.font-halisbold {
font-family: halis-bold;
}
/*GENERAL HEADING STYLES */
h1, h2, h3, h4, h5, h5 {
font-weight: 500;
line-height: 1.1;
}
footer {
color: white;
}
/*HEADINGS*/
h1 {
font-size: 1.75rem;
font-family: halisws-bold;
line-height: 1.1;
color: #47423c;
padding-bottom: 15px;
}
h2 {
font-size: 1.3125rem;
color: #ed8b00;
font-family: halisws-bold;
padding-top: 15px;
}
h3 {
font-size: 1rem;
font-family: verdana;
font-weight: 700;
padding-top: 15px;
}
h4 {
font-size: 0.9rem;
font-family: verdana;
font-weight: 700;
}
h5 {
font-size: 0.8rem;
font-family: verdana;
font-weight: 700;
}
h6 {
font-size: 0.7rem;
font-family: verdana;
font-weight: 700;
}
.txt-dark {
color: #47423c;
}
/*PARAGRAPH*/
p {
font-size: 14px;
line-height: 20px;
margin-bottom: 20px;
}
.lead {
font-size: 18px;
line-height: 26px;
}
/*LINKS*/
a {
font-weight: 700;
}
a:focus, a:hover {
text-decoration: underline;
}
a, a:hover {
color: #59899c;
}
a:visited {
color: #6399ae;
}
a .underline {
text-decoration: underline;
}
a .underline:hover {
text-decoration: none;
}
a:focus {
color: #6399ae;
}
a:active, a:selected {
color: white;
}
.headlink a {
font-size: 18px;
font-weight: 700;
line-height: 18px;
margin: 20px 0 0;
}
/*EXIT BUTTON LINK*/
.exitbutton {
color: #453f39 !important;
}
.exitbutton a {
color: #453f39 !important;
font-weight: 700;
font-size: 14px;
}
.exitbutton a:visited {
color: #453f39 !important;
font-weight: 700;
font-size: 14px;
text-decoration: none;
}
.exitbutton:hover {
color: #ed8b00 !important;
text-decoration: none;
}
/* BRAND COLORS - PRIMARY */
.white {
background-color: white;
}
.black {
background-color: black;
}
.grey {
background-color: #776e64;
}
.orange {
background-color: #ed8b00;
}
/* BRAND COLORS - SECONDARY */
.mountainblue {
background-color: #6399ae;
}
.huckleberryred {
background-color: #a4343a;
}
.sunsetorange {
background-color: #dc4405;
}
.sunriseyellow {
background-color: #f1be48;
}
.mossgreen {
background-color: #888d30;
}
.fire {
background: #f1a223;
}
/* WARM GREYS */
.warmgrey1 {
background-color: #e4e2e0;
}
.warmgrey2 {
background-color: #c9c5c1;
}
.warmgrey3 {
background-color: #ada8a2;
}
.warmgrey4 {
background-color: #47423c;
}
.warmgrey5 {
background-color: #453f39;
}
/* WARM GREYS SEMANTIC */
.ashgrey {
background-color: #f1f0ef;
}
.silvergrey {
background-color: #e4e2e0;
}
.steelgrey {
background-color: #c9c5c1;
}
.smokegrey {
background-color: #ada8a2;
}
.irongrey {
background-color: #47423c;
}
/* SPECIAL COLORS */
.palemossgreen {
background-color: #e7e8d6;
}
.palemountainblue {
background-color: #e0ebef;
}
.palesunriseyellow {
background-color: #f9e0a0;
}
/* GREY SCALE */
.grey1 {
background-color: #ccc;
}
.grey2 {
background-color: #999;
}
.grey3 {
background-color: #666;
}
.grey4 {
background-color: #333;
}
.grey5 {
background-color: #000;
}
/* GRAYSCALE PALETTE - FROM DARK TO LIGHT*/
.dark1 {
background-color: #000;
}
.dark2 {
background-color: #333;
}
.dark3 {
background-color: #47423c;
}
.dark4 {
background-color: #666;
}
.dark5 {
background-color: #999;
}
/* GRAYSCALE PALETTE - FROM LIGHT TO DARK*/
.light1 {
background-color: #e4e2e0;
}
.light2 {
background-color: #ccc;
}
.light3 {
background-color: #c9c5c1;
}
.light4 {
background-color: #ada8a2;
}
.light5 {
background-color: #453f39;
}
/* TEXT COLORS - SECONDARY */
.txt-mountainblue {
color: #6399ae;
}
.txt-huckleberryred {
color: #a4343a;
}
.txt-sunsetorange {
color: #dc4405;
}
.txt-sunriseyellow {
color: #f1be48;
}
.txt-mossgreen {
color: #888d30;
}
/* SEMANTIC COLORS*/
.lightgray {
background: #e4e2e0;
}
/* TEXT PRIMARY */
.txt-white {
color: white;
}
.txt-black {
color: black;
}
.txt-grey {
color: #776e64;
}
.txt-orange {
color: #ed8b00;
}
/* INPUTS */
.form-group label {
font-weight: bold;
color: #453f39;
}
.form-group label span.required {
color: #dc4405 !important;
font-weight: bold;
}
.form-group label span {
font-weight: normal;
color: #928b83;
}
.is-invalid {
outline: none !important;
border: 2px solid #dc4405;
}
.is-invalid .text-area:focus {
border: 2px solid #dc4405;
}
.form-control.format-currency {
text-align: right;
}
.form-control {
box-shadow: none;
border-color: #c9c5c1 !important;
color: #453f39;
}
.form-control.is-invalid {
box-shadow: none;
border-color: #dc4405 !important;
}
.form-control.is-invalid:focus, .form-control.is-invalid:active {
box-shadow: none;
border-color: #dc4405 !important;
border-width: 2px !important;
}
.form-text.text-muted {
font-size: 14px !important;
color: #776e64 !important;
}
.form-text.text-danger {
font-size: 14px !important;
color: #dc4405 !important;
}
.form-control:active, .form-control:focus {
box-shadow: none !important;
outline: none !important;
border-color: #928b83;
border: 2px solid;
}
/* CUSTOMSELECT */
.custom-select-dropdown.form-control:focus, .custom-select-dropdown.form-control:active {
border-width: 1px !important;
}
/* CUSTOM SELECT DROPDOWN*/
.custom-select-dropdown {
border: 1px #c9c5c1 solid;
padding: 0;
position: relative;
}
.custom-select-dropdown li {
padding: 0 10px;
z-index: 2;
border-left: 1px solid #e4e2e0;
border-right: 1px solid #e4e2e0;
}
.custom-select-dropdown li.init:after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
position: absolute;
margin-top: 10px;
right: 3%;
}
.custom-select-dropdown li.init {
border-left-width: 0;
border-right-width: 0;
padding: 6px 10px;
}
.custom-select-dropdown li:last-child {
border-bottom: 1px solid #c9c5c1;
}
.custom-select-dropdown li:nth-child(1) {
border-top: 1px solid #c9c5c1;
}
.custom-select-dropdown .list-wrapper {
position: absolute;
width: 100%;
top: 2.4rem;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}
.custom-select-dropdown li:not(.init) {
float: left;
width: 100%;
display: none;
background: #fff;
color: #453f39;
}
.custom-select-dropdown li:not(.init):hover {
background: #6399ae;
color: white;
}
/* SELECT AND MULTISELECT */
select:focus {
border: 2px solid #ada8a2 !important;
}
select[multiple].form-control {
padding: 0;
}
select[multiple].form-control option {
padding-left: 10px;
}
select[multiple]:focus option:checked {
background: #6399ae linear-gradient(0deg, #6399ae 0%, #6399ae 100%) !important;
color: #000 !important;
}
/* TEXTAREA */
textarea {
height: 150px !important;
resize: none;
}
textarea:focus, input:focus {
outline: none !important;
border-color: #ada8a2 !important;
border: 2px solid;
outline-offset: -10px;
}
/* INPUTSIZES */
.input-50p {
width: 50px;
}
.input-75p {
width: 75px;
}
.input-100p {
width: 100px;
}
.input-150p {
width: 150px;
}
.input-200p {
width: 200px;
}
.input-250p {
width: 250px;
}
.input-300p {
width: 300px;
}
/* HEIGHT UTILITIES */
.height-50p {
height: 50px;
}
.height-75p {
height: 75px;
}
.height-100p {
height: 100px;
}
.height-150p {
height: 150px;
}
.height-200p {
height: 200px;
}
.height-250p {
height: 250px;
}
.height-300p {
height: 300px;
}
.height-350p {
height: 350px;
}
.height-400p {
height: 400px;
}
/*ZOOM UTILITIES*/
.zoom110 {
zoom: 110%;
}
.zoom120 {
zoom: 120%;
}
.zoom130 {
zoom: 130%;
}
.zoom140 {
zoom: 140%;
}
.zoom150 {
zoom: 150%;
}
.zoom160 {
zoom: 160%;
}
.zoom170 {
zoom: 170%;
}
.zoom180 {
zoom: 180%;
}
.zoom190 {
zoom: 190%;
}
.zoom200 {
zoom: 200%;
}
/* TABLE DOTTED */
.table-dots td {
border: 2px dotted gray;
}
/* HEADER TABLE */
.microtable tr td {
padding-right: 30px;
font-size: 14px;
}
/* CONFIRMATION BOX*/
.confirmationbox table tr td {
padding-right: 30px;
}
.confirmationbox {
font-size: 14px;
}
.outsidebox {
background: #e4e2e0;
border-radius: 10px;
padding: 10px;
}
.innerbox {
background: white;
border-radius: 7px;
height: auto;
padding: 14px 24px 14px 24px;
}
/* BUTTONS - FONT */
.btn-md, .btn-sm, .btn-lg {
font-weight: 700 !important;
}
a:focus {
outline: dotted thin;
outline: -webkit-focus-ring-color auto 5px;
outline-offset: -2px;
}
/* BUTTON SIZES AND RADIUS */
.btn-sm {
border-radius: 8px;
font-size: 14px;
padding: 8px 20px;
}
.btn-md {
border-radius: 10px;
font-size: 14px;
padding: 12px 20px;
}
.btn-lg {
border-radius: 14px;
font-size: 16px;
padding: 17px 20px;
}
/* BUTTONS - TABBING */
body:not(.user-is-tabbing) button:focus, body:not(.user-is-tabbing) input:focus, body:not(.user-is-tabbing) select:focus, body:not(.user-is-tabbing) textarea:focus {
outline: none;
}
/* BUTTONS - COLORS */
.btn-blue {
background-color: #6399ae;
border: 1px solid #6399ae !important;
color: white;
font-weight: 700px;
}
.btn-blue:hover {
border: 1px solid #6399ae !important;
background: #59899c;
color: white;
}
.btn-blue:focus {
color: white;
outline: none;
text-decoration: none;
}
.btn-blue:visited {
color: white;
outline: none;
text-decoration: none;
}
.btn-outline-blue {
border: 1px solid #6399ae;
background: white;
color: #6399ae;
font-weight: 700;
}
.btn-outline-blue:hover {
border: 1px solid #6399ae;
background: #e0ebef;
color: #6399ae;
text-decoration: none;
}
.btn-outline-blue:focus {
color: #6399ae;
outline: none;
text-decoration: none;
}
.btn-outline-blue:visited {
color: #6399ae;
outline: none;
text-decoration: none;
}
.btn-orange {
background: #ed8b00;
border: 1px solid #ed8b00 !important;
color: white;
font-weight: 700px;
outline: none;
text-decoration: none;
}
.btn-orange:hover {
border: 1px solid #ed8b00 !important;
background: #d57d00;
color: white;
text-decoration: none;
}
.btn-orange:focus {
color: white;
outline: none;
text-decoration: none;
}
.btn-orange:visited {
color: white;
outline: none;
text-decoration: none;
}
.btn-outline-orange {
border: 1px solid #ed8b00;
background: white;
color: #ed8b00;
font-weight: 700;
text-decoration: none;
}
.btn-outline-orange:hover {
border: 1px solid #ed8b00;
background: #fbe8cc;
color: #ed8b00;
text-decoration: none;
}
.btn-outline-orange:focus {
color: #d57d00;
outline: none;
text-decoration: none;
}
.btn-outline-orange:visited {
color: #d57d00;
outline: none;
text-decoration: none;
}
.btn-grey {
background-color: #c9c5c1;
border: 1px solid #c9c5c1 !important;
color: white;
font-weight: 700px;
cursor: default;
text-decoration: none;
}
.btn-grey:hover {
border: 1px solid #c9c5c1 !important;
background: #c9c5c1;
color: white;
cursor: default;
text-decoration: none;
}
.btn-grey:focus {
color: white;
outline: none;
cursor: default;
text-decoration: none;
}
.btn-grey:visited {
color: white;
outline: none;
text-decoration: none;
}
.btn-outline-grey, .btn-outline-grey:hover, .btn-outline-grey:focus, .btn-outline-grey:visited {
text-decoration: none;
border: 1px solid #c9c5c1;
background: white;
color: #c9c5c1;
font-weight: 700;
cursor: default;
}
.btn-primary {
background-color: #6399ae;
border: none;
text-decoration: none;
}
.btn-primary:hover {
border: none;
background: #59899c;
text-decoration: none;
}
.btn-primary:visited {
color: white;
outline: none;
text-decoration: none;
}
.btn-primary:hover {
border: none;
background: #59899c;
text-decoration: none;
}
/*BUTTON OUTLINE*/
button {
outline: none !important;
}
/* UTILITY STYLES */
.toastbox {
border: 2px solid #e4e2e0;
border-left: 5px solid yellow;
}
.rounded-10 {
border-radius: 10px;
}
.rounded-8 {
border-radius: 8px;
}
.rounded-4 {
border-radius: 4px;
}
.resize-half {
width: 50%;
height: 50%;
}
/* PADDING REMOVALS */
.padding-bottom-none {
padding-bottom: 0px;
}
.padding-top-none {
padding-top: 0px;
}
.padding-left-none {
padding-left: 0px;
}
.padding-right-none {
padding-right: 0px;
}
/* ARRANGE UP OR DOWN IN Z INDEX*/
.zindex-100 {
z-index: 100;
}
.zindex-200 {
z-index: 200;
}
.zindex-300 {
z-index: 300;
}
.zindex-400 {
z-index: 400;
}
.zindex-500 {
z-index: 500;
}
/* ALERTBOX */
.alertbox {
border: 7px solid whitesmoke;
padding: 30px;
margin-right: 20%;
margin-left: 20%;
border-radius: 8px;
}
.alerticon-bg {
background: #ed8b1e;
padding-top: 0px;
padding-left: 6px;
font-size: 24px;
color: white;
border-radius: 18px;
width: 36px;
height: 36px;
}
/* FOOTER IN TEMPLATE */
.page-template {
position: relative;
min-height: 100vh;
}
.content-wrapper {
padding-bottom: 150px;
}
.page-template footer {
position: absolute;
bottom: 0;
height: 150px;
width: 100%;
}
@media (max-width: 960px) {
.page-template footer {
height: auto !important;
}
}
/* FOOTER */
.contactus {
font-weight: 700;
}
.contactus:hover {
font-weight: 700;
}
/* HEADER TOP */
.header-thinline {
background: #f1a223;
height: 10px;
}
.header-topline {
background: #f1a223;
height: 39px;
}
.header-curve {
background: white;
top: 20px;
height: 40px;
border-top-left-radius: 40px;
margin-top: -1px;
}
header .sub-text {
font-size: 1.75rem;
font-family: "halisws-bold";
margin-left: 40px;
vertical-align: middle;
color: #47423c;
}
header img {
margin-top: 8px;
}
@media (max-width: 768px) {
.header-border-bottom {
box-shadow: 0px 5px 6px -6px rgba(0, 0, 0, 0.25);
border-bottom: 1px solid #d7d7d7 !important;
padding-bottom: 20px;
}
}
/* UTILITIES AND HELPERS*/
.noborder {
border: none !important;
}
.logo {
width: 90%;
}
/* STEPBALL */
.stepball {
width: 40px;
height: 40px;
background: #ed8b00;
border-radius: 50px;
text-align: center;
margin: 0 auto;
color: #fff;
font-size: 24px;
line-height: 40px;
}
/* LOADER ANIMATED */
.sk-three-bounce {
margin: 12px auto;
width: 120px;
text-align: center;
}
.sk-three-bounce .sk-child {
margin-right: 2px;
width: 10px;
height: 10px;
background-color: #ed8b00;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}
.sk-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.sk-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.sk-three-bounce .sk-bounce3 {
-webkit-animation-delay: -0.08s;
animation-delay: -0.08s;
}
@-webkit-keyframes sk-three-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes sk-three-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* STAGEBAR */
.stagebar {
border: 2px solid #c9c5c1;
border-radius: 10px;
text-align: center;
font-size: 16px;
padding: 5px;
}
.borderline-right {
border-right: 2px solid #e4e2e0;
}
.activestage {
background-color: #6399ae;
color: white;
font-weight: 700;
}
.activestage.borderline-right {
border-color: white;
}
.stepbox {
text-align: center;
padding: 3px;
border-radius: 6px;
}
.separatorline {
border-right: 1px solid grey;
}
/* BOOTSTRAP ELEMENTS - OVERRIDES */
.nav-tabs .nav-link {
border: 1px solid #ebeff1;
border-top-right-radius: 0.25rem;
border-top-left-radius: 0.25rem;
background-color: #f7f7f7;
margin-right: 2px;
padding: 20px;
}
.form-control-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn {
line-height: 2.5;
}
.page-link {
color: #6399ae;
}
.page-link:hover {
color: #6399ae;
background-color: whitesmoke;
}
.badge {
padding: 8px;
border-radius: 10px;
color: white;
}
.progress {
text-align: right;
background-color: #fbe8cc;
height: 30px;
border-radius: 0.25rem;
padding: 3px;
border: 2px solid #ed8b00;
}
.container-fluid {
max-width: 1920px;
padding-left: 40px;
padding-right: 40px;
}
/* BOOTSTRAP 4.3.1 UPDATES */
.dropdown {
background: white;
color: white;
}
.btn-secondary {
color: #453f39;
background-color: #e4e2e0;
border-color: #c9c5c1;
}
/* ANIMATION DELAYS SPEED */
.go1 {
animation-delay: 0.1s;
}
.go2 {
animation-delay: 0.3s;
}
.go3 {
animation-delay: 0.7s;
}
.go4 {
animation-delay: 1s;
}
.go5 {
animation-delay: 1.3s;
}
/* DROPDOWN */
.dropdown-item a {
color: black !important;
}
.dropdown-item a:visited {
color: black !important;
}
/* RADIOS */
.radioButtonLabel {
font-size: 14px;
font-weight: bold;
margin-bottom: 15px;
}
.container-radio {
display: table;
outline: none;
position: relative;
padding-left: 29px;
margin-bottom: 12px;
cursor: pointer;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-top: 3px;
}
.container-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.container-radio input:checked ~ .checkmark {
background-color: #fff;
}
.container-radio input:checked ~ .checkmark:after {
display: block;
}
.container-radio .checkmark:after {
top: 2px;
left: 2px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #6399ae;
}
.checkmark {
position: absolute;
top: 5px;
left: 0;
height: 17px;
width: 17px;
background-color: #fff;
border-radius: 50%;
border: 1px solid #928b83;
}
.container-radio:hover input ~ .checkmark {
border: 1px solid #6399ae;
}
.container-radio input:focus + .checkmark {
border-color: #453f39;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/*CHECKBOXES */
.checkboxButtonLabel {
font-size: 14px;
font-weight: bold;
margin-bottom: 15px;
}
.disabled-label {
color: #c9c5c1;
cursor: default !important;
}
.container-checkbox {
display: table;
outline: none;
position: relative;
padding-left: 30px;
margin-bottom: 22px;
cursor: pointer;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.2;
}
.container-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.container-checkbox input:checked ~ .checkmark-checkbox, .container-checkbox input:checked ~ .tertiary-checkmark-checkbox {
border: 1px solid #928b83;
}
.container-checkbox input:checked ~ .checkmark-checkbox:hover, .container-checkbox input:checked ~ .tertiary-checkmark-checkbox:hover {
border: 1px solid #6399ae;
}
.container-checkbox input:checked ~ .checkmark-checkbox:after, .container-checkbox input:checked ~ .tertiary-checkmark-checkbox:after {
display: block;
}
.container-checkbox .tertiary-checkmark-checkbox:after {
position: absolute;
left: 3px;
top: 3px;
border-left: 10px solid #6399ae;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
}
.container-checkbox input[type="checkbox"]:disabled ~ .tertiary-checkmark-checkbox {
border: 1px solid #c9c5c1;
cursor: default;
}
.container-checkbox input[type="checkbox"]:disabled + .tertiary-checkmark-checkbox:after {
position: absolute;
left: 3px;
top: 3px;
border-left: 10px solid #c9c5c1;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
}
.container-checkbox .checkmark-checkbox:after {
position: absolute;
left: 4px;
top: -1px;
width: 8px;
height: 14px;
border: solid #6399ae;
border-width: 0 4px 4px 0;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
}
.container-checkbox input[type="checkbox"]:disabled ~ .checkmark-checkbox {
border: 1px solid #c9c5c1;
cursor: default;
}
.container-checkbox input[type="checkbox"]:disabled + .checkmark-checkbox:after {
position: absolute;
left: 4px;
top: -1px;
width: 8px;
height: 14px;
border: 1px solid #c9c5c1;
border-width: 0 4px 4px 0;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
}
.checkmark-checkbox, .tertiary-checkmark-checkbox {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #fff;
border: 1px solid #928b83;
border-radius: 2px;
}
.container-checkbox:hover input ~ .checkmark-checkbox, .container-checkbox:hover input ~ .tertiary-checkmark-checkbox {
border: 1px solid #6399ae;
}
.checkmark-checkbox:after, .tertiary-checkmark-checkbox:after {
content: "";
position: absolute;
display: none;
}
.container-checkbox input:focus + .checkmark-checkbox {
border: 2px solid #453f39;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.container-checkbox:hover input[type="checkbox"]:disabled ~ .checkmark-checkbox, .container-checkbox:hover input[type="checkbox"]:disabled ~ .tertiary-checkmark-checkbox {
border: 1px solid #c9c5c1;
}
/* OUTLINES AND BOXES*/
.leafbox {
border: 10px solid #e4e2e0;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
padding: 24px;
}
.roundedframe {
border: 5px solid #e4e2e0;
border-radius: 18px;
padding: 24px;
}
.outlined {
border: 2px solid #e4e2e0;
border-radius: 10px;
}
.outlined-rounded {
border: 1px solid #e4e2e0;
border-radius: 18px;
}
.outlined-rounded-2p {
border: 2px solid #e4e2e0;
border-radius: 18px;
}
.outlined-rounded-5p {
border: 2px solid #e4e2e0;
border-radius: 18px;
}
/* BORDER COLORS */
.border-blue {
border-color: #6399ae;
}
.border-green {
border-color: #888d30;
}
/* BULLET LISTS */
.bullets ul {
list-style: none;
}
.bullets ul li {
margin-left: 0px;
line-height: 15px;
margin-bottom: 12px;
}
.bullets ul li::before {
content: "\2022";
color: #ada8a2;
display: inline-block;
width: 25px;
margin-bottom: 5px;
margin-left: -25px;
font-weight: bold;
}
.bullets ul {
padding-left: 20px;
}
.bullets ul li {
list-style-position: outside;
margin-left: 1em;
line-height: 1.5em;
}
.bullets ul li:before {
margin-left: -1.8em;
margin-bottom: 0;
}
/* TOAST */
.toast {
position: fixed;
z-index: 1;
top: 0px;
background: #fff;
border: 1px solid #453f39;
box-sizing: border-box;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 3px;
width: 100%;
max-width: 500px;
}
.toast-box {
height: 60px;
}
.toast-yellow-stripe {
background: #f1be48;
height: 100%;
width: 8px;
}
.toast-icon {
color: #f1be48;
font-size: 34px;
padding: 4px 0 5px 15px;
}
.toast-content {
padding: 21px 0px 0px 15px;
font-size: 14px;
color: #453f39;
}
.toast-content-container {
width: 85%;
}
.toast-close-container {
margin-left: auto;
}
.toast-close-container button {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #453f39;
font-size: 19px;
font-weight: bold;
}
/* TOAST DARK (AUTOSAVE)*/
.toast-dark {
position: fixed;
z-index: 1;
top: 0px;
background: #453f39 !important;
border: none;
box-sizing: border-box;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 3px;
width: 100%;
max-width: 500px;
}
.toast-dark .toast-icon {
color: #f1be48;
font-size: 34px;
padding: 4px 0 5px 15px;
}
.toast-dark .toast-content {
padding: 21px 0px 0px 15px;
color: #fff;
}
.toast-dark .toast-close-container {
margin-left: auto;
}
.toast-dark .toast-close-container button {
color: white;
}
/* PAGINATION */
.page-link {
position: relative;
display: block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #6399ae;
background-color: #fff;
border: none;
}
.pagination li a {
background: transparent !important;
outline: none !important;
}
.pagination li a:hover {
background: #e0ebef !important;
outline: none !important;
}
.pagination li a i {
font-size: 14px;
margin: 0 0px;
}
.pagination li.active a {
color: #453f39 !important;
font-weight: bold !important;
}
/* PAGECOUNT */
.pagecount {
padding: 6px;
}
/* MODAL */
.small-modal .modal-dialog, .medium-modal .modal-dialog, .large-modal .modal-dialog, .x-large-modal .modal-dialog {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.small-modal .modal-content {
width: 400px;
width: 100%;
}
.medium-modal .modal-content {
width: 600px;
width: 100%;
}
.large-modal .modal-content {
max-width: 800px;
width: 100%;
}
.x-large-modal .modal-content {
max-width: 1000px;
width: 100%;
}
.small-modal .modal-content, .medium-modal .modal-content, .large-modal .modal-content, .x-large-modal .modal-content {
font-family: verdana;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
border: solid 1px #776e64;
background-color: #fff;
border: 1px solid #776e64;
border-radius: 10px;
-webkit-box-shadow: 1px 12px 9px -15px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 1px 12px 9px -15px rgba(0, 0, 0, 0.75);
box-shadow: 1px 12px 9px -15px rgba(0, 0, 0, 0.75);
}
.modal-header {
border-bottom-width: 0;
padding: 23px 16px;
padding-bottom: 22px;
}
.small-modal .modal-body, .medium-modal .modal-body, .large-modal .modal-body, .x-large-modal .modal-body {
padding: 0 16px;
}
.small-modal .modal-header .close, .medium-modal .modal-header .closer, .large-modal .modal-header .close, .x-large-modal .modal-header .close {
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: 0.5;
padding: 12px 24px !important;
}
.modal-header .close:hover {
opacity: 1;
}
.modal-header h5 {
font-family: halisws-bold;
font-size: 21px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
color: #ed8b00;
}
.modal-footer {
border-top-width: 0;
font-family: verdana;
padding: 23px 16px;
padding-bottom: 15px;
padding-right: 20px;
}
.modal {
text-align: center;
padding: 0 !important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.modal-body .choice-card {
margin: 30px 0;
}
.modal-body .choice-card h6 {
font-size: 14px;
}
.modal-body .choice-card .btn {
padding: 0;
height: 35px;
line-height: 35px;
}
@media (min-width: 768px) {
.small-modal .modal-dialog {
max-width: 400px;
width: 100%;
}
.medium-modal .modal-dialog {
max-width: 600px;
width: 100%;
}
.large-modal .modal-dialog {
max-width: 800px;
width: 100%;
}
.large-modal .modal-content {
max-width: 800px;
width: 100%;
}
.x-large-modal .modal-dialog {
max-width: 1000px;
width: 100%;
}
.x-large-modal .modal-content {
max-width: 1000px;
width: 100%;
}
}
@media (max-width: 415px) {
.modal-dialog {
width: 90%;
margin-left: -10px;
}
.large-modal:before {
height: 100%;
}
.x-large-modal:before {
height: 100%;
}
.modal-footer {
display: table;
width: 100%;
display: -webkit-box;
display: -moz-box;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
.modal-footer .btn-blue .btn-outline-blue {
display: block;
width: 100%;
margin: 0 !important;
}
.modal-footer .btn-outline-blue {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
order: 2;
}
.modal-footer .btn-blue {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
margin-bottom: 10px !important;
order: 1;
}
}
/*TOOLTIP */
.tooltip {
left: 1px !important;
}
.tooltip-icon {
font-size: 18px;
}
.tooltip-icon {
color: #6399ae;
font-size: 16px;
}
.tooltip-inner {
font-family: "verdana" !important;
line-height: 16px !important;
background-color: #fff !important;
color: #453f39 !important;
text-align: left;
border-radius: 5px;
border: 2px solid #6399ae;
box-shadow: 0px 3px 7px 0px #c9c5c1;
font-size: 14px;
white-space: pre-wrap;
opacity: 1 !important;
z-index: 9999 !important;
padding: 10px !important;
}
.tooltip.show {
opacity: 1 !important;
}
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
border-width: 5px 5px 0;
border-top-color: #6399ae !important;
}
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
border-width: 0 5px 5px;
border-bottom-color: #6399ae !important;
}
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
border-width: 5px 5px 5px 0px;
border-right-color: #6399ae !important;
}
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
border-width: 5px 0 5px 5px;
border-left-color: #6399ae !important;
}
/*STEPPER */
.progressbar {
font-family: "verdana";
}
.progressbar-wrapper {
background: #fff;
width: 100%;
padding-top: 10px;
padding-bottom: 5px;
}
.progressbar li {
list-style-type: none;
width: 14.2%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
color: #e4e2e0;
}
.progressbar li:before {
width: 35px;
height: 35px;
content: "";
line-height: 26px;
border: 2px solid #e4e2e0;
display: block;
text-align: center;
margin: 0 auto 3px auto;
border-radius: 50%;
position: relative;
z-index: 2;
background-color: #fff;
border: 5px solid #ed8b00;
}
.md-step-bar {
display: flex;
position: absolute;
top: 14px;
left: 50%;
margin-left: 15px;
width: 100%;
}
.progressbar li:after {
width: 100%;
height: 4px;
content: "";
position: absolute;
top: 15px;
left: -50%;
z-index: 0;
}
.md-step-bar-line {
width: 20px;
margin-right: 2px;
}
.md-step-bar-line.one {
border-top: 8px solid #ed8b00;
width: 15.5%;
}
.md-step-bar-line.two {
border-top: 8px solid #ed8b00;
width: 44%;
}
.md-step-bar-line.three {
border-top: 8px solid #ed8b00;
width: 31%;
}
.md-step-bar-line.four {
border-top: 8px solid #ed8b00;
width: 28%;
}
.md-step-bar-line.five {
border-top: 8px solid #ed8b00;
width: 100%;
}
.md-step-bar-line.inprogress {
border-top: 8px solid #e4e2e0;
width: 100%;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active:before {
border-color: #ed8b00;
color: white;
margin-bottom: 12px;
}
.progressbar li.active:before {
background: #ed8b00;
background-size: 60%;
}
.progressbar {
counter-reset: step;
}
.progressbar li:before {
content: counter(step);
counter-increment: step;
font-size: 15px;
font-weight: bold;
}
.progressbar {
list-style: none;
padding: 0;
}
.progressbar li.active:before {
content: "\f00c";
font-family: FontAwesome;
color: white;
}
.progressbar li.active {
color: #453f39;
}
.progressbar li.inprogress {
color: #ed8b00;
font-weight: bold;
}
.progressbar li.incomplete {
color: #453f39;
}
.progressbar li.inprogress:before {
border: 5px solid #ed8b00;
margin-bottom: 12px;
}
.progressbar li.incomplete:before {
border: 5px solid #e4e2e0;
}
.progressbar li.incomplete:before {
background-color: #e4e2e0;
margin-bottom: 12px;
}
.progressbar span.text {
font-size: 14px;
font-family: "verdana", sans-serif;
}
.progressbar li.active:before {
font-size: 25px;
}
.progressbar li.incomplete:before, .progressbar li.inprogress:before {
font-size: 17px;
font-family: "Open Sans", sans-serif;
}
@media (max-width: 1024px) {
.md-step-bar-line.one {
width: 14.5%;
}
.md-step-bar-line.two {
width: 40%;
}
.md-step-bar-line.three {
width: 25%;
}
.md-step-bar-line.four {
width: 24%;
}
.md-step-bar-line.five {
width: 100%;
}
}
@media (max-width: 768px) {
.progressbar li:before {
height: 25px !important;
width: 25px !important;
line-height: 15px !important;
font-size: 12px !important;
}
.progressbar li .text {
font-size: 10px !important;
}
.progressbar li .text .step-label {
display: none;
}
.progressbar li.inprogress .text .step-label {
display: block;
}
.md-step-bar {
top: 9px !important;
left: 42% !important;
}
.md-step-bar-line.one {
width: 12%;
}
.md-step-bar-line.two {
width: 35%;
}
.md-step-bar-line.three {
width: 20%;
}
.md-step-bar-line.four {
width: 24%;
}
.md-step-bar-line.five {
width: 100%;
}
}
/*LEFTNAV */
.item {
background: #e0ebef;
border-top: 1px solid #c1d6df;
width: 210px;
height: 40px;
justify-content: space-between;
}
.light-background {
background: #f7fafb;
}
.dark-background {
background: #e0ebef;
}
.item:last-child {
background: #e0ebef;
border-bottom: 1px solid #c1d6df;
border-top: 1px solid #c1d6df;
width: 210px;
height: 40px;
}
.lg-item {
height: 55px;
}
.child_item {
display: flex;
background: #f7fafb;
width: 210px;
height: 40px;
justify-content: flex-end;
}
.inner_child {
display: flex;
width: 181px;
border-top: 1px solid #c1d6df;
}
.selected_item {
background-color: #82adbe;
width: 5px;
height: 39px;
}
.error {
background-color: #dc4405;
width: 5px;
height: 39px;
}
.hide_container {
opacity: 0;
}
.remove_container {
display: none !important;
}
.no_error {
width: 5px;
height: 39px;
background-color: transparent;
}
.vertical_ellipsis {
color: #3b5c68;
margin-right: 6px;
align-items: center;
display: flex;
}
.nav_content {
width: 170px;
align-items: center;
display: flex;
padding-left: 14px;
font-size: 12px;
}
.general_icon {
margin-right: 6px;
align-items: center;
}
.general_icon div {
background-color: #3b5c68;
border-radius: 50%;
color: #f7fafb;
font-family: Verdana;
font-size: 10px;
display: inline-block;
height: 14px;
width: 14px;
padding-left: 2px;
}
.plus_sign {
display: flex;
color: #6399ae;
align-items: center;
padding-left: 15px;
}
.indicators {
display: flex;
justify-content: flex-end;
}
.titles {
font-weight: bold;
font-family: Verdana;
font-size: 14px;
line-height: 17px;
padding: 20px 0px 20px 5px;
}
.recentlyViewedTitle {
margin-top: 20px;
font-family: Verdana;
font-size: 12px;
line-height: 21px;
color: #47423c;
font-weight: bold;
}
.recentlyViewedItem, .recentlyViewedItem:hover {
color: #6399ae;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
}
/*TOAST */
.toast {
position: fixed;
z-index: 1;
top: 0px;
background: #fff;
border: 1px solid #f1be48;
box-sizing: border-box;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
width: 100%;
max-width: 500px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.toast-box {
height: 60px;
}
.toast-yellow-stripe {
background: #f1be48;
height: 100%;
width: 8px;
}
.toast-icon {
color: #f1be48;
font-size: 34px;
padding: 4px 0 5px 15px;
}
.toast-content {
padding: 21px 0px 0px 15px;
font-size: 14px;
font-family: verdana;
color: #453f39;
}
.toast-content-container {
width: 85%;
}
.toast-close-container {
margin-left: auto;
}
.toast-close-container button {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #453f39;
font-size: 19px;
font-weight: bold;
}
/* TABLE WRAP AND GENERAL TABLE UTILITIES*/
.table {
color: #453f39;
margin-bottom: 0px;
}
.table-dotted {
border-radius: 10px !important;
}
.roundedtable {
border-radius: 10px !important;
}
.tablewrap {
background: #e4e2e0;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
border-radius: 10px;
}
.tablewrap.transparent {
background: transparent;
}
.tablewrap-title {
padding: 10px 0px 10px 5px;
}
/*TABLE STRIPPED */
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #e4e2e0;
border-top: none;
padding-bottom: 5px;
}
.table td, .table th {
border-top: 1px solid #e4e2e0;
}
.bottomborderline {
border-bottom: 2px solid #e4e2e0;
}
/* TABLE DOTTED GRID */
table.table-dotted {
font-size: 14px;
width: 100%;
border: 1px solid #e4e2e0;
background-color: #fff;
}
table.table-dotted td, table.table-dotted th {
border-width: 1px;
border-color: #ddd;
border-style: dotted;
padding: 15px;
}
/* EXPANDABLE TABLES */
.collapsible-table thead tr th, .collapsible-table tbody tr td {
cursor: pointer;
}
.collapsible-table tr.accordion-toggle td {
background: #e0ebef;
}
.collapsible-table tr.accordion-toggle.collapsed td {
background: transparent;
}
.collapsible-table tr.hide-table-padding td {
border-top-width: 0;
}
.collapsible-table tbody tr.light {
background-color: #fff;
}
.collapsible-table tbody tr.light td {
border-top-width: 1px;
}
.collapsible-table tbody tr.dark {
background-color: rgba(0, 0, 0, 0.05);
}
.collapsible-table tbody tr.dark td {
border-top-width: 1px;
}
.collapsible-table tbody tr:first-child td {
border-top-width: 2px;
}
.collapsible-table tbody tr:last-child td {
border-bottom: 2px solid #e4e2e0;
}
.collapsible-table tbody tr td {
border-top-width: 1px;
}
/*ALERT*/
.alert-danger {
color: #dc4405;
background-color: white;
border-color: #dc4405;
}
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 2px solid #dc4405;
border-radius: 10px;
}
/*TOGGLES AND SWITCHES*/
.btn-secondary {
color: #776e64;
background-color: #fff;
border-color: #c9c5c1;
font-size: 14px;
font-weight: bold;
font-family: Verdana;
}
.btn-secondary:hover {
background: #59899c;
border-color: #59899c;
cursor: pointer;
}
.btn-secondary:not(:disabled):not(.disabled).active {
color: #fff;
background-color: #6399ae;
border-color: #776e64;
}
.btn-secondary:not(:disabled):not(.disabled).active:hover {
background: #59899c;
border-color: #59899c;
box-shadow: inset 0 0 0 2px transparent;
}
.btn-secondary.focus, .btn-secondary:focus {
box-shadow: inset 0 0 0 2px #776e64;
outline: inherit;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 25px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #776e64;
-webkit-webkit: transition 0.1;
-moz-webkit: transition 0.1;
-ms-webkit: transition 0.1;
-o-webkit: transition 0.1;
-webkit: transition 0.1;
transition: 0.1s;
}
.slider:before {
position: absolute;
content: "";
height: 21px;
width: 22px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: 0.1s;
transition: 0.1s;
}
input:checked + .slider {
background-color: #6399ae;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .slider:before {
-webkit-transform: translateX(34px);
-ms-transform: translateX(34px);
transform: translateX(34px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.on {
display: none;
}
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 49%;
left: 66%;
font-size: 14px;
font-family: Verdana, sans-serif;
font-weight: bold;
}
.on {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 49%;
left: 32%;
font-size: 14px;
font-family: Verdana, sans-serif;
font-weight: bold;
}
input:checked + .slider .on {
display: block;
}
input:checked + .slider .off {
display: none;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*ALERTBOX*/
.warning span:first-child {
color: #ed8b00;
}
.fa-exclamation-triangle-icon {
font-size: 36px;
margin-right: 10px;
width: 20px;
height: 20px;
}
.alert-description {
margin-left: 40px;
}
.alert-title {
padding-top: 5px;
color: #47423c;
}
.alertmessagetext {
margin-bottom: 5px !important;
}
.alerticon {
margin-top: -1px;
margin-right: 7px;
}
/*FORM GROUP*/
.form-group {
margin-bottom: 1.3rem;
}
/*INVALID FIELD*/
.form-control.is-invalid, .was-validated .form-control:invalid {
border-color: #dc3545;
padding-right: 0.75rem;
background-image: none;
}
.form-control:disabled {
background: #e4e2e0;
color: #ada8a2;
}
/*BREADCRUMBS*/
.breadcrumb {
background: white;
}
.breadcrumb-item + .breadcrumb-item::before {
content: '\f105';
font-family: 'fontAwesome';
padding: 0 10px;
}
.breadcrumb-item + .breadcrumb-item {
padding-left: 0rem;
}
.breadcrumb-item.active {
color: #776e64 !important;
}
/*ICONMOON */
.iconmoontext {
font-family: "verdana";
color: #453f39;
}
/*PROGRESSBAR */
.progress-bar {
border-radius: 5px;
}
.progress {
border-radius: 8px;
}
/*DROPDOWN */
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
color: #fff;
background-color: #6399ae;
border-color: #6399ae;
}
.dropdown-toggle {
white-space: nowrap;
border-radius: 10px;
/*padding: 12px 20px;
*/
background-color: white;
color: #453f39;
border-color: #c9c5c1;
}
.toggle-sm {
white-space: nowrap;
font-size: 12px;
border-radius: 5px;
padding: 6px 10px;
}
/*PLACEHOLDER TEXT*/
.form-control::-webkit-input-placeholder {
text-align: left;
}
.form-control:-ms-input-placeholder {
text-align: left;
}
.form-control::placeholder {
text-align: left;
}
/* DISCLAIMERBOX*/
.disclaimer {
border: 10px solid #888d30;
color: #453f39;
padding: 29px 24px 29px 24px;
font-weight: bold;
border-radius: 10px;
display: table;
width: 100%;
margin-bottom: 50px;
}
.grey-bordered {
border-color: #e4e2e0;
}
.checkbox {
float: left;
width: 3%;
}
/*LEAFBOX*/
.wsbc-leaf-H2 {
border-radius: 30px 0 30px 0;
background-color: #e7e8d6;
padding-bottom: 1px;
}
.wsbc-leaf-H2 H2 {
color: #453f39;
margin-left: 30px;
}
.wsbc-leaf-inner {
border-radius: 15px 0 22px 0;
background-color: #fff;
color: #453f39;
margin: 10px 10px 10px 10px;
padding-bottom: 1px;
padding: 24px;
}
.wsbc-leaf-inner ul {
list-style: none;
margin: 0;
padding-left: 18px;
}
.wsbc-leaf-inner ul li::before {
content: "\2022";
color: #928b83;
font-weight: bold;
display: inline-block;
width: 1.5em;
margin-left: -1em;
}
/*SEPARATORS*/
.orangeline {
height: 2px;
background: #ed8b00;
}
.grayline {
height: 2px;
background: #e4e2e0;
}
.dashline {
border-bottom: 1px dotted #ada8a2;
}
.thinline {
height: 1px;
background: #e4e2e0;
}
/*SEARCHBARS*/
.custom-search.spacer input {
border-radius: 5px !important;
}
.custom-search.spacer .input-group-append {
margin-left: 5px;
}
.custom-search.spacer .input-group-append .btn {
border-radius: 5px !important;
border-width: 0 !important;
}
.custom-search .btn {
font-size: 12px;
outline: none;
box-shadow: none;
border: 1px solid #c9c5c1 !important;
}
.custom-search .btn:hover, .custom-search .btn:active {
outline: none;
box-shadow: none;
}
.custom-search .btn span {
color: #fff;
}
.custom-search .btn span:before {
color: #fff;
}
.custom-search.transparent .btn {
background: transparent;
border-width: 0 !important;
}
.custom-search.transparent .btn:hover, .custom-search.transparent .btn:active {
background: transparent;
}
.custom-search.transparent .btn span:before {
color: grey;
}
.custom-search.transparent input::-webkit-input-placeholder {
text-align: right;
color: #e4e2e0;
}
.custom-search.transparent input::-moz-placeholder {
text-align: right;
color: #e4e2e0;
}
.custom-search.transparent input:-ms-input-placeholder {
text-align: right;
color: #e4e2e0;
}
.custom-search.transparent input:-moz-placeholder {
text-align: right;
color: #e4e2e0;
}
.custom-search.transparent input {
position: relative;
border-radius: 0.25rem !important;
}
.clearable__clear {
display: none;
position: absolute;
right: 14.5px;
top: 35%;
font-style: normal;
font-size: 13px;
user-select: none;
cursor: pointer;
color: #e4e2e0;
}
.clearable input::-ms-clear {
display: none;
}
@media (min-width: 576px) {
.modal.left .modal-dialog, .modal.right .modal-dialog {
max-width: 50%;
}
}
.modal.left .modal-dialog, .modal.right .modal-dialog {
position: fixed;
margin: auto;
width: 50%;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left .modal-content, .modal.right .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.left .modal-body, .modal.right .modal-body {
padding: 23px 16px;
}
/*Left*/
.modal.left.fade .modal-dialog {
left: -50%;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.show .modal-dialog {
left: 0;
}
/*Right*/
.modal.right.fade .modal-dialog {
right: -50%;
-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
-o-transition: opacity 0.3s linear, right 0.3s ease-out;
transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.show .modal-dialog {
right: -1px;
}
/*NAVTABS*/
.custom-nav-tabs {
border-bottom-color: #e4e2e0;
border-bottom-width: 2px;
}
.custom-nav-tabs .nav-item {
margin-bottom: -3px;
margin-right: -2px;
}
.custom-nav-tabs .nav-item .nav-link {
border-color: #e4e2e0;
border-width: 2px;
padding: 10px 15px;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-bottom-width: 0;
background: #6399ae;
color: #fff;
}
.custom-nav-tabs .nav-item .nav-link.active {
background: #fff;
color: #6399ae;
}
.custom-nav-tabs .nav-item .nav-link:hover {
background: #fff;
color: #6399ae;
}
.custom-tab-content {
border: 2px solid #e4e2e0;
border-top-width: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
/*CARDS*/
.card {
border: 1px solid #c9c5c1;
border-radius: 15px;
margin-bottom: 30px;
}
.card h2 {
padding-top: 0px;
}
.card-img-top {
border-radius: 14px 14px 0px 0px;
}
.choice-card {
border: 1px solid #c9c5c1;
border-radius: 15px;
margin-bottom: 30px;
}
.choice-card .avatar {
height: 150px;
overflow: hidden;
background: #ada8a2;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
.choice-card .avatar img {
width: 100%;
}
.choice-card .text-right .btn {
margin: 20px;
position: absolute;
width: 30%;
right: 0;
bottom: 0;
}
.choice-card.horizontal {
position: relative;
display: table;
width: 100%;
height: 250px;
}
.choice-card.horizontal .content {
margin-bottom: 50px;
}
.choice-card.left-image {
height: 250px;
margin-bottom: 20px;
position: relative;
}
.choice-card.left-image .avatar {
float: left;
height: 250px;
width: 50%;
border-top-right-radius: 0;
border-bottom-left-radius: 15px;
margin-right: 20px;
position: absolute;
overflow: hidden;
}
.choice-card.left-image .avatar img {
width: 100%;
height: 100%;
}
.choice-card.left-image .content {
margin-left: 50%;
min-height: 80%;
margin-bottom: 50px;
}
.choice-card .content {
padding: 20px;
}
.choice-card .content .card-header {
color: #ed8b00;
background: transparent;
border-width: 0;
padding: 0;
margin-bottom: 10px;
padding-bottom: 0;
}
.choice-card .content .card-text {
font-size: 14px;
line-height: 20px;
margin-bottom: 20px;
padding-top: 0;
margin-bottom: 0;
}
.choice-card .content .btn {
margin-top: 10px;
}
/*ERRORPAGE*/
.errorpage h1 {
font-size: 35px;
color: #453f39;
}
/*HAMBURGER MENU*/
.thumbnail-hamburger-menu, .hamburger-menu {
position: fixed;
top: 0;
margin: 27px 17px;
z-index: 9999;
}
.thumbnail-hamburger-menu .btn, .hamburger-menu .btn {
height: 40px;
width: 40px;
padding: 0;
line-height: 40px;
text-align: center;
border-radius: 50%;
background: #ed8b00;
}
.thumbnail-hamburger-menu .btn i, .hamburger-menu .btn i {
color: #fff;
font-size: 20px;
}
.thumbnail-hamburger-menu.left, .hamburger-menu.left {
left: 0;
}
.thumbnail-hamburger-menu.right, .hamburger-menu.right {
right: 0;
}
.thumbnail-hamburger-menu .btn:hover, .hamburger-menu .btn:hover {
background: #f9c36c;
border: none;
}
.thumbnail-hamburgerMenu-content, .hamburgerMenu-content {
background: #fff;
padding: 10px 20px;
height: 100%;
overflow-y: auto;
border: 1px solid #e4e2e0;
position: fixed;
width: 300px;
margin-left: -300px;
z-index: 9999;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburgerMenu-content.width {
width: 300px;
margin-left: 0;
}
.thumbnail-hamburgerMenu-content .title, .hamburgerMenu-content .title {
margin-bottom: 30px;
color: #ed8b00;
}
.thumbnail-hamburgerMenu-content .title i, .hamburgerMenu-content .title i {
color: #ddd;
}
.thumbnail-hamburgerMenu-content .menu-item, .hamburgerMenu-content .menu-item {
margin-bottom: 50px;
}
.thumbnail-hamburgerMenu-content .menu-item h4, .hamburgerMenu-content .menu-item h4 {
color: #453f39;
}
.thumbnail-hamburgerMenu-content .menu-item p, .hamburgerMenu-content .menu-item p {
color: #c9c5c1;
font-size: 13px;
}
.thumbnail-hamburgerMenu-content .menu-item ul, .hamburgerMenu-content .menu-item ul {
margin: 0;
padding: 0;
}
.thumbnail-hamburgerMenu-content .menu-item ul li, .hamburgerMenu-content .menu-item ul li {
list-style: none;
}
.thumbnail-hamburgerMenu-content.width {
width: 800px;
margin-left: 0;
}
.thumbnail-hamburgerMenu-content .menu-item ul {
display: block;
margin: 0px;
padding: 0px;
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
.thumbnail-hamburgerMenu-content .menu-item ul li {
display: inline-block;
vertical-align: top;
}
.thumbnail-hamburgerMenu-content .menu-item ul li a .thumbnail-holder {
display: inline-block;
}
.thumbnail-hamburgerMenu-content .menu-item ul li a .thumbnail-holder {
height: 150px;
max-width: 300px;
overflow: hidden;
margin: 0;
border: 1px solid #ccc;
}
.thumbnail-hamburgerMenu-content .menu-item ul li a .thumbnail-holder img {
width: 100%;
height: 100%;
}
.thumbnail-hamburgerMenu-content .menu-item ul li a .thumbnail-holder img:hover {
filter: invert(100%);
}
/*NAVBAR*/
.navbar-light .navbar-nav .nav-link {
color: #453f39;
font-weight: 400;
}
.navbar-light .navbar-nav .nav-link:hover {
color: #ed8b00;
}
.navbar-light .navbar-nav .nav-link.active {
color: #ed8b00;
}
/*NAVMENU*/
.navigation-menu {
background: #e0ebef;
width: 200px;
}
.navigation-menu .nav-list-items {
padding: 0;
}
.navigation-menu .nav-list-items li {
list-style-type: none;
border-bottom: 1px solid #c1d6df;
padding-left: 0;
padding-right: 0;
}
.navigation-menu .nav-list-items li a {
padding: 10px;
text-decoration: none;
border-left: 5px solid transparent;
display: block;
font-weight: normal;
color: #453f39;
font-size: 12px;
}
.navigation-menu .nav-list-items li.sub-menu ul {
padding: 0;
padding-left: 20px;
background: #f7fafb;
}
.navigation-menu .nav-list-items li.sub-menu a span {
padding-right: 0px;
}
.navigation-menu .nav-list-items li.sub-menu ul li:last-child {
border-bottom-width: 0;
}
.navigation-menu .nav-list-items li.sub-menu a i.fa-caret-right {
font-size: 16px;
color: #82adbe;
margin-left: 10px;
}
.px.current > a i.fa-caret-right {
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.navigation-menu .nav-list-items li > a.active {
border-color: #82adbe;
font-weight: bold;
}
.navigation-menu .nav-list-items li a:hover {
background: #82adbe;
color: #fff;
}
.navigation-menu .nav-list-items li.sub-menu a:hover i.fa-caret-right {
color: #fff;
}
/*SELECTCARD*/
.wsbc-selectable-card {
border-radius: 10px;
border: solid #c9c5c1 1px;
padding: 10px 20px 20px 20px;
box-shadow: 3px #c9c5c1;
display: table;
width: 100%;
max-width: 600px;
}
.wsbc-selectable-card:hover {
border: solid #ada8a2 4px;
box-shadow: 0px;
padding: 7px 17px 17px 17px;
}
.wsbc-selectable-card a {
margin-top: 30px;
}
.wsbc-selectable-card table {
width: 100%;
}
.wsbc-selectable-card .button-container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.wsbc-selectable-card th:nth-of-type(2), .wsbc-selectable-card td:nth-of-type(even) {
text-align: right;
}
.wsbc-selectable-card th {
text-align: inherit;
padding-bottom: 10px;
padding-top: 10px;
}
/*HAMBURGER MENU*/
.hamburger-menu {
position: fixed;
top: 0;
margin: 27px 17px;
z-index: 9999;
}
.hamburger-menu .btn {
height: 40px;
width: 40px;
padding: 0;
line-height: 40px;
text-align: center;
border-radius: 50%;
background: #ed8b00;
}
.hamburger-menu .btn i {
color: #fff;
font-size: 20px;
}
.hamburger-menu.left {
left: 0;
}
.hamburger-menu.right {
right: 0;
}
.hamburger-menu .btn:hover {
background: #f9c36c;
border: 1px solid white;
}
.hamburgerMenu-content {
background: #fff;
padding: 10px 20px;
height: 100%;
overflow-y: auto;
border: 1px solid #e4e2e0;
position: fixed;
width: 0;
margin-left: -300px;
z-index: 9999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hamburgerMenu-content.width {
width: 300px;
margin-left: 0;
}
.hamburgerMenu-content .title {
margin-bottom: 30px;
color: #ed8b00;
}
.hamburgerMenu-content .title i {
color: #ddd;
}
.hamburgerMenu-content .menu-item {
margin-bottom: 50px;
}
.hamburgerMenu-content .menu-item h4 {
color: #453f39;
}
.hamburgerMenu-content .menu-item p {
color: #c9c5c1;
font-size: 13px;
}
.hamburgerMenu-content .menu-item ul {
margin: 0;
padding: 0;
}
.hamburgerMenu-content .menu-item ul li {
list-style: none;
}
/*OPACITY BACKDROPS*/
.blackModal .modal-content, .whiteModal .modal-content {
background: transparent;
border-width: 0;
}
.modal-content {
box-shadow: none;
}
.modal-backdrop {
opacity: 0.8 !important;
width: 100%;
padding: 0 15px !important;
}
/*TABLEGREEN*/
.tablewrap.palemossgreen {
background: #e7e8d6;
}
.tablewrap.palemossgreen .table.table-dotted {
border-color: #e7e8d6;
}
/*DECIMALFIELD*/
.input-group .input-group-append .input-group-text {
padding: 6px;
}
.input-group-text {
background-color: #e4e2e0;
border: 1px solid #c9c5c1;
}
/*ACCORDION*/
.accordion .card {
border: 0;
border-radius: 0px;
margin-bottom: 0px;
}
.accordion .card .card-header {
border-top: 1px solid #e4e2e0;
border-radius: 0;
}
.accordion .fa {
margin-right: 0.5rem;
font-size: 14px;
margin-top: 4px;
}
.accordion .card:first-child {
border-top: 5px solid #e4e2e0;
}
.accordion .card:last-child {
border-bottom: 5px solid #e4e2e0;
}
.accordion .card-header:hover {
background-color: #6399ae !important;
}
.accordion .card-header:hover h2 button {
color: #fff !important;
}
.accordion .card .card-header {
padding: 0;
border-bottom-width: 0;
background: #fff;
}
.accordion .card .card-header h2 {
padding: 0;
}
.accordion .card .card-header h2 button {
width: 100%;
text-align: left;
text-decoration: none;
color: #6399ae;
font-family: verdana;
font-weight: 700;
font-size: 14px;
}
.accordion .card.active > .card-header {
background-color: #6399ae;
}
.accordion .card.active > .card-header h2 button {
color: #fff;
}
.accordion .card .card-body ul {
padding-left: 0;
}
.accordion .card .card-body ul li {
list-style-type: none;
}
.accordion .card .card-body ul li::before {
content: "\2022";
color: #c9c5c1;
font-size: 14px;
margin-right: 10px;
}
/*BADGES & COLORS*/
.badge {
padding: 8px;
border-radius: 10px;
color: white;
}
.badge-bold {
font-weight: 700;
}
.badge-thin {
font-weight: normal;
}
.badge-leafy {
border-radius: 10px 0px 10px 0px;
}
.badge-sunsetorange {
background-color: #dc4405;
color: white;
}
.badge-sunriseyellow {
background-color: #f1be48;
color: #47423c;
}
.badge-mountainblue {
background-color: #6399ae;
color: white;
}
.badge-huckleberryred {
background-color: #a4343a;
color: white;
}
.badge-warmgrey {
background-color: #776e64;
color: white;
}
.badge-mossgreen {
background-color: #888d30;
color: white;
}
.warmgrey {
background-color: #776e64;
color: white;
}
.badge-lightorange {
background: #fbe8cc;
color: #47423c;
}
.badge-lightsunsetorange {
background-color: #f8dacd;
color: #47423c;
}
.badge-lightsunriseyellow {
background-color: #f9e0a0;
color: #47423c;
}
.badge-lightmountainblue {
background-color: #e0ebef;
color: #47423c;
}
.badge-lighthuckleberryred {
background-color: #edd6d8;
color: #47423c;
}
.badge-lightwarmgrey {
background-color: #e4e2e0;
color: #47423c;
}
.badge-lightmossgreen {
background-color: #e7e8d6;
color: #47423c;
}
.badge-darksunsetorange {
background-color: #b03604;
color: white;
}
.badge-darksunriseyellow {
background-color: #c19838;
color: white;
}
.badge-darkmountainblue {
background-color: #4f7a8b;
color: white;
}
.badge-darkhuckleberryred {
background-color: #832a2e;
color: white;
}
.badge-darkwarmgrey {
background-color: #5f5850;
color: white;
}
.badge-darkmossgreen {
background-color: #6d7126;
color: white;
}
/*DROPDOWNMENU*/
.dropdown-toggle {
white-space: nowrap;
border-radius: 10px;
background-color: #6399ae;
color: white;
border: none !important;
}
.dropdown-item.active, .dropdown-item:hover {
color: #fff;
text-decoration: none;
background-color: #6399ae;
}
.dropdown-toggle a:visited {
color: #453f39;
}
.dropdown-menu a:visited {
color: #453f39;
}
.dropdown-menu a:visited:hover {
color: white;
}
.dropdown-menu {
font-size: 14px;
text-align: left;
background-color: #fff;
border: 1px solid #e4e2e0;
border-radius: 4px;
margin-top: 3px;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.dropdown-item {
color: #453f39;
}
.dropdown-toggle::after {
margin-left: 15px;
}
.menu-sm {
font-size: 12px;
}
/*DATABAR*/
.databar {
border-radius: 10px;
background-color: #f2f2f2;
padding: 20px;
}
/*BTN-INLINE*/
.btn-inline {
border-radius: 4px;
font-weight: 700;
font-size: 14px;
padding: 8px 20px;
}
/*STAGESBAR*/
.stagesbar {
font-size: 14px;
}
.stagesbar li span {
color: #776e64;
font-size: 12px;
font-weight: 400;
}
.stagesbar li {
list-style-type: none;
float: left;
position: relative;
text-align: center;
}
.stagesbar li:before {
content: " ";
line-height: 20px;
border-radius: 50%;
width: 20px;
height: 20px;
border: 4px solid #c9c5c1;
display: block;
text-align: center;
margin: 0 auto 10px;
background-color: #f1f0ef;
}
.stagesbar li:after {
content: "";
position: absolute;
width: 100%;
height: 4px;
background-color: #c9c5c1;
top: 8px;
left: -50%;
z-index: -1;
}
.stagesbar li:first-child:after {
content: none;
}
.stagesbar li.active {
color: #453f39;
font-size: 14px;
font-weight: 700;
}
.stagesbar li.active:before {
border: 4px solid #ed8b00;
background-color: white;
}
.stagesbar .active:after {
background-color: #ed8b00;
}
.stagesbar-3steps li {
width: 33%;
position: relative;
text-align: center;
}
.stagesbar-4steps li {
width: 25%;
position: relative;
text-align: center;
}
.stagesbar-5steps li {
width: 20%;
position: relative;
text-align: center;
}
.stagesbar-6steps li {
width: 17%;
position: relative;
text-align: center;
}
/*STAGESBAR -MOBILE*/
@media only screen and (max-width: 600px) {
.stagesbar {
font-size: 11px;
}
.stagesbar li span {
font-size: 11px;
}
.stagesbar li.active {
font-size: 11px;
}
}
/*ICONS*/
.iconcircle {
height: 32px;
width: 32px;
padding: 4px;
padding-left: 6px;
border-radius: 15px;
}
.iconcircle-blue {
height: 32px;
width: 32px;
background-color: #6399ae;
color: white;
padding: 4px;
padding-left: 6px;
border-radius: 15px;
}
.iconcircle-orange {
height: 32px;
width: 32px;
background-color: #ed8b00;
color: white;
padding: 4px;
padding-left: 6px;
border-radius: 15px;
}
.txt-steelgrey {
color: #c9c5c1;
}
.txt-warmgrey {
color: #776e64;
}
a i:hover {
color: #59899c;
}
/*FORMCONTROL-FONTSIZE*/
.input-group-text {
font-size: 14px;
}
.form-control {
font-size: 14px;
}
/*MOBILENAV*/
.menulink {
text-decoration: none;
font-size: 14px;
vertical-align: text-top;
line-height: 30px;
}
.menulink i {
margin-top: 8px;
}
.list-unstyled a:hover {
color: #ed8b00;
}
.exitbutton:visited, .exitbutton a:visited {
text-decoration: none !important;
}
.menu-icon:visited, .menu-icon:focus, .menu-icon:hover {
text-decoration: none !important;
}
.hamburger-menu li a:visited, .hamburger-menu li a:focus {
text-decoration: none;
}
ul.list-unstyled.hamburger-menu.nav-link {
margin: 10px !important;
padding: 10px !important;
}
#leftNavBar .modal-dialog {
min-width: 320px !important;
}
#leftNavBar .modal-content {
border-radius: 0;
}
#leftNavBar .modal-body ul {
margin: 0;
padding: 0;
}
#leftNavbar {
max-width: 250px !important;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.list-unstyled a:hover {
text-decoration: none !important;
}
.menu-icon {
margin: 0 20px;
font-size: 24px;
display: none;
}
.hamburger-menu li {
margin: 10px 0;
}
.hamburger-menu li a {
font-weight: 400;
color: #453f39;
}
@media only screen and (max-width: 990px) {
header img {
margin-top: 4px;
}
.navbar .navbar-nav {
display: none;
}
.menu-icon {
display: block;
}
}
@media only screen and (min-width: 995px) {
#modal {
display: none;
}
}
/*DOCUMENTBLOCK*/
.documentblock {
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid whitesmoke;
}
/*LABEL*/
/*SNACKBAR for AUTOSAVE*/
.snackbar-wrapper {
position: fixed;
bottom: 0;
display: table-cell;
z-index: 9999;
left: 40%;
}
.snackbar {
font-family: verdana;
font-size: 14px;
display: none;
max-width: 350px;
background-color: #47423c;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 16px;
position: relative;
z-index: 1;
bottom: 40px;
font-size: 17px;
}
.snackbar.show {
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
display: block !important;
margin: 5px 0;
}
@-webkit-keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 40px;
opacity: 1;
}
}
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 40px;
opacity: 1;
}
}
@-webkit-keyframes fadeout {
from {
bottom: 40px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
@keyframes fadeout {
from {
bottom: 40px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
/*LANDINGPAGEGRIDS*/
.gridwrap {
border: 10px solid #f1be48;
border-radius: 14px;
background: #e4e2e0;
padding: 5px;
}
.gridboxpanel {
background: white;
border-radius: 8px;
padding: 10px;
border: 5px solid #e4e2e0;
height: auto;
}
.gridboxpanel-300 {
height: 300px;
}
.gridboxpanel h2 {
padding-top: 0px;
color: #47423c !important;
}
/*BLOCKQUOTES*/
blockquote {
background: #f1f0ef;
border-left: 4px solid #c9c5c1;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 20px 15px;
}
.blockquote-green {
background: #e7e8d6;
border-left: 4px solid #888d30;
}
.blockquote-blue, blockquote.info {
background: #e0ebef;
border-left: 4px solid #6399ae;
}
.blockquote-red, blockquote.warning {
background: #a4343a 33;
border-left: 4px solid #dc4405;
}
.blockquote-yellow {
background: #f9e0a0;
border-left: 4px solid #f1be48;
}
.blockquote-border-blue {
border-left: 4px solid #6399ae;
}
.blockquote-border-red {
border-left: 4px solid #a4343a;
}
.blockquote-border-yellow {
border-left: 4px solid #f1be48;
}
.blockquote-border-green {
border-left: 4px solid #888d30;
}
/*BROWSE BUTTON*/
.browsebox a .btn .fa:hover {
color: white;
}
.browsebox a .fa:hover {
color: #59899c;
}
/* FOOTER */
footer .footer-curve {
background: #6399ae;
height: 60px;
position: relative;
margin-bottom: -1px;
}
footer .footer-curve .footer-curve-bg {
position: absolute;
height: 60px;
background: #fff;
border-bottom-right-radius: 60px;
top: -1px;
height: 60px;
width: 100%;
left: 0;
}
footer .footer-top {
color: #fff;
background-color: #6399ae;
}
footer .footer-bottom {
background: #453f39;
font-size: 12px;
}
footer a {
color: white !important;
font-weight: 500;
font-size: 14px;
}
footer a:visited, footer a:focus {
color: #fff !important;
}
.breadcrumb {
padding-left: 0;
}
.btn.disabled, .btn:disabled {
background: #c9c5c1;
opacity: 1;
border-color: #c9c5c1 !important;
}
.btn-outline-blue.disabled {
background: #fff;
color: #ada8a2;
border-color: #cac6c3;
opacity: 1;
}
.btn-outline-orange.disabled {
background: #fff;
color: #ada8a2;
border-color: #cac6c3;
opacity: 1;
}
.file-input-button-wrap {
position: relative;
}
.file-input-button-wrap input[type="file"] {
position: absolute;
z-index: -1;
top: 6px;
left: 0px;
font-size: 15px;
color: #999;
outline: none !important;
border-width: 0 !important;
}
.file-input-button-wrap .file-input-button {
display: inline-block;
padding: 8px;
cursor: pointer;
border-radius: 4px;
background-color: #6399ae;
font-size: 12px;
color: #fff;
border-radius: 8px;
font-weight: 700;
margin-top: 3px;
margin-left: -5px;
}
.tabs {
position: relative;
min-height: 300px;
clear: both;
margin: 25px 0;
}
.wsbc-tab {
float: left;
margin: 0 5px 0 0;
}
.wsbc-tab label {
background: #c9c5c1;
padding: 15px 20px 14px 20px;
color: #fff;
line-height: 1;
border-radius: 10px 10px 0 0;
border-color: #e4e2e0;
margin-left: 5px;
position: relative;
left: -5px;
bottom: 20px;
font-family: Verdana;
font-weight: 600;
}
.wsbc-tab [type=radio] {
display: none;
}
.wsbc-tab label:hover {
background: #776e64;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 10px solid #e4e2e0;
border-radius: 0 0 15px 15px;
}
[type=radio]:checked ~ label {
background: #e4e2e0;
z-index: 2;
height: 50px;
padding: 10px 10px 10px 10px;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label > .wsbc-tab-decoration {
background: white;
color: #ed8b00;
border-bottom: 21px solid white;
border-radius: 6px 6px 0 0;
line-height: 1;
width: 100%;
display: block;
padding: 7px 10px 10px 10px;
position: relative;
}
/* BORDERLESS TABLES*/
.no-borders table {
border-width: 0;
}
.no-borders table thead tr th {
border-width: 0 !important;
}
.no-borders table tbody tr td {
border-width: 0 !important;
}
/*PRINT STYLES*/
@media print {
.no-print {
display: none !important;
}
.page-break {
display: block;
page-break-before: always;
}
}
input.toggleEnableDisableInput:disabled {
background: #fff !important;
opacity: 0.4 !important;
}
.btn-chckbox span {
border-color: #6399ae !important;
}
.grand-total-list li:nth-child(2) {
vertical-align: middle;
}
.grand-total-list li:nth-child(3) {
vertical-align: middle;
}
/* INFOPANEL */
.infopanel table tr td {
padding-right: 27px;
}
@media (max-width: 500px) {
.grand-total-list {
display: flex;
flex-direction: column;
}
.grand-total-list li:nth-child(1) {
order: 3;
}
.grand-total-list li:nth-child(1) button {
float: left;
}
.grand-total-list li:nth-child(2) {
vertical-align: middle;
order: 1;
}
.grand-total-list li:nth-child(3) {
vertical-align: middle;
order: 2;
}
.grand-total-list li:nth-child(4) {
order: 4;
}
.grand-total-list li:nth-child(4) button {
margin-top: -5.6em;
}
}
@media (max-width: 360px) {
.grand-total-list li:nth-child(1) {
margin-right: 0;
}
.grand-total-list li:nth-child(1) button {
display: block;
width: 100%;
margin: 10px 0;
}
.grand-total-list li:nth-child(4) {
margin-right: 0;
}
.grand-total-list li:nth-child(4) button {
display: block;
width: 100%;
margin: 10px 0;
}
}
/*BLOCK LINKS*/
.list-group-item {
color: #6399ae;
position: relative;
display: block;
padding: 0.75rem 1.25rem;
background-color: #fff;
border: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
border-left: 1px solid white;
border-right: 1px solid white;
}
.list-group-item:first-child {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top: 5px solid #e5e5e5;
}
.list-group-item:last-child {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 5px solid #e5e5e5;
}
.list-group-item-action:hover, .list-group-item-action:focus {
z-index: 1;
color: white;
text-decoration: none;
background-color: #6399ae;
}
/*MASONRYCONTAINER*/
#masonrycontainer {
width: 100%;
max-width: 700px;
margin: 2em auto;
margin-left: 16px;
}
.masonrycols {
-moz-column-count: 2;
-moz-column-gap: 3%;
-moz-column-width: 40%;
-webkit-column-count: 2;
-webkit-column-gap: 3%;
-webkit-column-width: 40%;
column-count: 2;
column-gap: 3%;
column-width: 40%;
}
.box {
margin-bottom: 20px;
display: none;
border: 2px solid #ddd;
}
.box img {
max-width: 100%;
}
.box img:hover {
filter: invert(100%);
}
.show {
display: inline-block;
}
.collapsible-table .rotate {
transform: rotate(180deg);
}
/*LINKS BLOCK*/
.linksblock {
line-height: 1.5em;
}
.linksblock div {
margin-bottom: 12px;
}
@media all and (max-width: 600px) {
.linksblock {
line-height: 35px;
margin-bottom: 10px;
}
}
.show-in-mobile {
display: none;
}
@media (max-width: 768px) {
.show-in-mobile {
display: block;
}
.menulink {
line-height: 0.6em;
}
.toc-wrapper {
display: none;
}
.hide-mobile-nav {
display: none;
}
.content-wrapper {
margin-left: 0 !important;
width: 100% !important;
}
.hamburger-menu {
margin: 38px 7px !important;
}
.hamburger-menu .btn:hover, .hamburger-menu .btn:active {
background: #ed8b00;
}
}
@media (max-width: 768px) {
.navbar-collapse .navbar-nav {
text-align: left;
}
.navbar-collapse .navbar-nav li a {
margin-left: 0 !important;
}
}
@media (max-width: 960px) {
.footer-curve-bg {
border-bottom-right-radius: 15px !important;
}
.footer-curve {
height: 10px !important;
}
.footer-curve-bg {
height: 10px !important;
}
footer .container-fluid {
padding: 0 40px !important;
}
footer .text-right {
text-align: left !important;
}
.footer-bottom {
padding: 8px 0 !important;
}
}
@media (max-width: 968px) {
header .header-topline {
height: 20px;
}
header .menu-icon i {
font-size: 18px;
}
header .header-curve {
border-top-left-radius: 15px;
}
header .container-fluid, header .container {
padding: 0 20px !important;
}
header .container-fluid .row, header .container .row {
margin: 0 -15px !important;
}
header .container-fluid img, header .container img {
max-width: 130px;
margin-top: 4px !important;
}
.hamburger-menu {
margin: 63px 7px !important;
}
}
/*MIN HEIGHT UTILITIES*/
.minheight-100p {
min-height: 100px;
}
.minheight-120p {
min-height: 120px;
}
.minheight-150p {
min-height: 150px;
}
.minheight-180p {
min-height: 180px;
}
.minheight-200p {
min-height: 200px;
}
.minheight-220p {
min-height: 220px;
}
.minheight-250p {
min-height: 250px;
}
.minheight-280p {
min-height: 280px;
}
.minheight-300p {
min-height: 300px;
}
.minheight-320p {
min-height: 320px;
}
.minheight-350p {
min-height: 350px;
}
.minheight-380p {
min-height: 380px;
}
.minheight-400p {
min-height: 400px;
}
.minheight-420p {
min-height: 420px;
}
.minheight-450p {
min-height: 450px;
}
.minheight-480p {
min-height: 480px;
}
.minheight-500p {
min-height: 500px;
}
.minheight-520p {
min-height: 520px;
}
.minheight-550p {
min-height: 550px;
}
.minheight-580p {
min-height: 580px;
}
.minheight-600p {
min-height: 600px;
}
.minheight-620p {
min-height: 620px;
}
.minheight-650p {
min-height: 650px;
}
.minheight-680p {
min-height: 680px;
}
.minheight-700p {
min-height: 700px;
}
.minheight-720p {
min-height: 720px;
}
.minheight-750p {
min-height: 750px;
}
.minheight-780p {
min-height: 780px;
}
