@import "//fonts.googleapis.com/css?family=Poppins:400,500,600";

:root {
  --brand-primary-color: #005DAA;
  --brand-secondary-color: #014693;
}

html {
    scroll-behavior: smooth; /*for all anchors*/
}

body {
    color: #222;
    font-family: "Poppins","Segoe UI","Helvetica Neue",Helvetica,Arial;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Loading overlay styles
-------------------------------------------------- */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.9;
    background-color: #FFF;
    z-index: 9999;
    text-align: center;
}
#loading-overlay img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
#loading-overlay > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Buttons
-------------------------------------------------- */
.btn {
    border-radius: 4px;
    font-weight: 600;
}
.btn-default {
    color: var(--brand-secondary-color);
    border-color: var(--brand-secondary-color);
}
.btn-primary {
    color: #FFF;
    background-color: var(--brand-secondary-color);
    border-color: var(--brand-secondary-color);
}
.btn-warning {
    background-color: #FF9A00;
    border-color: #FF9A00;
}
.btn-danger {
    background-color: #D80A3A;
    border-color: #D80A3A;
}

/* Buttons
-------------------------------------------------- */
.text-primary {
    color: #014693;
}

/* Checkbox
-------------------------------------------------- */
input[type=checkbox] {
/*    transform: scale(2); */
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
}
.checkbox input[type=checkbox] {
    margin: 1px 0 0 -30px;
}
.checkbox label {
    padding-left: 30px;
}

/* Panel
-------------------------------------------------- */
.panel > .panel-heading {
    background-color: #005DAA;
    border-radius: 0px;
    color: #FFF;
}
.panel-body {
    padding: 20px;
}
/* Flex Grid
-------------------------------------------------- */
@media (min-width: 992px) {
    .row {
        display: flex;
        flex-wrap: wrap;
    }
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
.row > [class*='col-'] > .block-column,
.row > [class*='col-'] > .entity-form-wrapper,
.row > [class*='col-'] > .entity-form-tab {
    flex-grow: 1;
}
/* Progress bar
-------------------------------------------------- */
#dot-progress li {
    list-style-type: none;
    float: left;
    position: relative;
    text-align: center;
}
#dot-progress li .step-circle  {
    width: 50px;
    height: 50px;
    line-height: 40px;
    border: 5px solid #D4D4D2;
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    color: #FFF;
    background-color: #D4D4D2;
    position: relative;
    z-index: 1;
    font-size: 20px;
}
#dot-progress li .step-text  {
    color: #888;
}
#dot-progress li:before {
    position: absolute;
    width: 100%;
    height: 2px;
    content: '';
    top: 25px;
    left: -50%;
    z-index: 0;
    background-color: #D4D4D2;
}
#dot-progress li:first-child:before {
    content: none;
}
#dot-progress li.step-active:before {
    background-color: #005DAA;
}
#dot-progress li.step-active .step-circle {
    background-color: #005DAA;
    border-color: #005DAA;
}
#dot-progress li.step-active .step-text {
    color: #005DAA;
}
#dot-progress li.step-success:before {
    background-color: #005DAA;
}
#dot-progress li.step-success .step-circle {
    background-color: #005DAA;
    border-color: #005DAA;
}
#dot-progress li.step-success .step-text {
    color: #005DAA;
}

/* Top navbar break point
-------------------------------------------------- */
@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
  		display:block !important;
	}
}

/* Layout
-------------------------------------------------- */
.pos-center {
    position: relative;
}
.pos-center > .pos-center-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-container > .row {
    color: #FFF;
    margin-left: 0px; /*replace BS default -15px*/
    margin-right: 0px; /*replace BS default -15px*/
}
.banner-container .banner-left {
    background-color: #005DAA;
}
.banner-container .banner-left .text-block {
    text-align: center;
    margin: 0;
}
.banner-container .banner-left .title {
    font-size: 28px;
    font-weight: 600;
}
.banner-container .banner-right { /*using Flexbox to centre elements, which is not supported in IE10 and earlier versions*/
    background-color: #888888;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.banner-container .banner-right::before { /*opacity in CSS without affecting text*/
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.4);
}
.banner-container .banner-right .text-block {
    text-align: center;
    /*position: relative;*/ /*over the opacity layer*/
}
.banner-container .banner-right .title {
    font-size: 38px;
    font-weight: 600;
}

.block-container {
    padding-top: 60px;
    padding-bottom: 60px;
}
.block-container .container-title {
    font-size: 22px;
    font-weight: 600;
}
.block-container .block-title {
    color: #577083;
    font-size: 18px;
    font-weight: 600;
    padding-top: 20px;
}
.block-container .block-subtitle {
    color: #005DAA;
    font-size: 15px;
}
.block-container .img-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 150px;
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    font-weight: bold;
}
.block-container .block-column {
    background-color: #FFF;
    box-shadow:0 4px 10px 0 rgba(0,0,0,0.1);
}
.block-container .block-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

/* Panel Group
-------------------------------------------------- */
.panel-group {
    margin: 0px; /*override BS*/
}
.panel-group > .panel {
    border: 0px;
    box-shadow: 0 0px 0px;
    background-color: transparent;
}
.panel-group .panel-title {
    font-size: 18px;
    line-height: 50px;
    font-weight: bold;
    margin-left: 20px;
}
.panel-group > .panel+.panel {
    margin-top: 30px;
}
.panel-group > .panel > .panel-heading {
    cursor: pointer;
    position: relative; /*for view button*/
    color: #005DAA;
    background-color: #FFF;
    border: 1px solid #DDD;
}
.panel-group .panel-heading .glyphicon,
.panel-group .panel-heading .fas,
.panel-group .panel-heading .far,
.panel-group .panel-heading .fad,
.panel-group .panel-heading .fal,
.panel-group .panel-heading .fa {
    font-size: 30px;
    margin-left: 20px;
    vertical-align: middle;
}
.panel-group .panel-heading .glyphicon-menu-down {
    display: none;
}
.panel-group .panel-heading .btn {
    position:absolute;
    right: 30px;
    width: 100px;
    margin-top: 8px;
    display: none;
}
/*
.panel-group .panel-heading.collapsed {
    color: #005DAA;
    background-color: #FFF;
    border: 1px solid #DDD;
}
*/
.panel-group .panel-heading.collapsed .glyphicon-menu-up {
    display: none;
}
.panel-group .panel-heading.collapsed .glyphicon-menu-down {
    display: inline-block;
}
.panel-group .panel-heading.collapsed .btn {
    display: inline-block;
}
.panel-group .panel-body {
    padding: 0px;
    margin-top: 30px;
}

.panel-group .block-column {
    padding: 30px;
}


/* Side Note
-------------------------------------------------- */
.panel.side-note {
    margin:0px;
}
.panel.side-note .panel-heading .glyphicon,
.panel.side-note .panel-heading .fas,
.panel.side-note .panel-heading .far,
.panel.side-note .panel-heading .fad,
.panel.side-note .panel-heading .fal,
.panel.side-note .panel-heading .fa {
    font-size: 30px;
    margin-left: 20px;
    vertical-align: middle;
}

.panel.side-note .panel-title {
    font-size: 18px;
    line-height: 50px;
    font-weight: bold;
    margin-left: 20px;
}

/* Icons
-------------------------------------------------- */
.svg-icon [data-color="1"] {
    fill: #FFF;
}

.svg-primary [data-color="1"] {
    fill: #005DAA;
}

/* Media query
-------------------------------------------------- */
@media (min-width: 1200px) {
    .container {
        width: 970px; /*fixed width for bigger screen*/
    }
}

@media (min-width: 992px) {
    .row-800  {
        margin: auto;
        width: 800px;
    }
    .row-900  {
        margin: auto;
        width: 900px;
    }

    .carousel4 .carousel-inner > .item {
        transition: 500ms ease-in-out left;
        transform: none !important;
    }
    .carousel4 .carousel-inner .active.left {
        left: -25%;
    }
    .carousel4 .carousel-inner .active.right {
        left: 25%;
    }
    .carousel4 .carousel-inner .next {
        left: 25%;
    }
    .carousel4 .carousel-inner .prev {
        left: -25%;
    }
}
@media (min-width: 768px) {
    .row-600  {
        margin: auto;
        width: 600px;
    }
    .row-700  {
        margin: auto;
        width: 700px;
    }
}

/* Tables
-------------------------------------------------- */
.table-fees {
    border-collapse: separate;
    border-spacing: 1px;
    font-size: 13px;
    text-align: center;
    width: 100%;
}
.table-fees>thead>tr>th {
    background-color: #014791;
    color: #fff;
    padding: 8px;
    text-align: center;
}
.table-fees>tbody>tr:nth-of-type(odd) {
    background-color: #FFF;
}
.table-fees>tbody>tr:nth-of-type(even) {
    background-color: #E1E6E0;
}
.table-fees td {
    padding: 8px;
}
.table-fees tr:first-child th:first-child {
    border-top-left-radius: 6px;
}
.table-fees tr:first-child th:last-child {
    border-top-right-radius: 6px;
}
.table-fees tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}
.table-fees tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

/* Carousel
-------------------------------------------------- */
.carousel-control.left,
.carousel-control.right {
    background-image: none;
}
.carousel .glyphicon {
    color: #005DAA;
}

/* Main Layout
-------------------------------------------------- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: #FFF;
    border: 0px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    border-radius: 0px; /*override default*/
    transition: top .3s ease-in-out;
    font-size: 18px;
}
.main-header .navbar-header {
    margin-top: 10px;
    margin-bottom: 10px;
}
.main-header .navbar-toggle {
    /*border-color: #DDD;*/
}
.main-header .navbar-toggle .icon-bar {
    background-color: #888;
}
.main-header .navbar-toggle:hover {
    background-color: #DDD;
}
.main-header .sidebar-toggle {
    position: relative;
    float: left;
    margin-top: 18px;
    margin-left: 15px;
    padding: 5px 10px 9px 10px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    /*border-color: #DDD;*/
    outline: none;
}
.main-header .sidebar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #888;
    margin-top: 4px;
}
/*.sidebar-toggle:focus*/
.main-header .sidebar-toggle:hover  {
    background-color: #DDD;
}
.main-header ul.nav a {
    color: #000;
}
.main-header #navbar-main {
    padding-right: 0px; /*remove right gap*/
}
.main-header #navbar-main > ul.nav > li > a {
    padding-top: 35px;
    padding-bottom: 35px;
}
.main-header #navbar-main > ul.nav > li.active {
    background-color: #EEE;
}
.main-header #navbar-main > ul.nav > li.active > a {
    color: #005DAA;
    border-bottom: 4px solid #005DAA;
    padding-bottom: 31px;
}
.main-header .navbar-right img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    vertical-align: middle;
    border-style: none;
    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)
}
.main-sidebar {
    min-height: 100%;
    position: absolute;
    top: 0px;
    background-color: #FFF;
    width: 120px;
    transition: left .3s ease-in-out;
    box-shadow: 5px 0 10px 0 rgba(0, 0, 0, 0.1);
    font-size: 15px;
}
@media (min-width: 768px) { /*lg*/
    .main-sidebar {
        left: 0px;
    }
}
@media (max-width: 768px) { /*sm*/
    .main-sidebar {
        left: -120px;
    }
}
.main-sidebar .navbar {
    margin-top: 90px;
    text-align: center;
    border: 0px;
}
.main-sidebar ul.nav > li > a {
    padding: 20px 15px;
    color: #005DAA;
}
.main-sidebar ul.nav > li.active {
    background-color: #EEE;
}
.main-sidebar ul.nav > li.active > a {
    padding: 20px 11px 20px 15px;
    border-right: 4px solid #005DAA;
}
.main-sidebar ul.nav > li .glyphicon,
.main-sidebar ul.nav > li .fas,
.main-sidebar ul.nav > li .far,
.main-sidebar ul.nav > li .fad,
.main-sidebar ul.nav > li .fal,
.main-sidebar ul.nav > li .fa {
    font-size: 30px;
}
.main-content-wrapper {
    /*position: relative;*/
    transition: margin-left .3s ease-in-out;
}
@media (min-width: 768px) { /*lg*/
    .main-content-wrapper {
        margin-left: 120px;
    }
}
@media (max-width: 768px) { /*sm*/
    .main-content-wrapper {
        margin-left: 0px;
    }
}
.main-footer {
    position: relative; /*show on the top on sidebar*/
    box-shadow: 0 -10px 20px 0 rgba(0, 0, 0, 0.2);
    padding: 40px 0;
    background-color: #005DAA;
    color: #FFF;
}
.quick-access-toolbar {
    width: 120px;
    background-color: #FFF;
    position: fixed;
    top: 340px;
    z-index: 999;
    transition: right .3s ease-in-out;
    box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.1);
    font-size: 15px;
}
@media (min-width: 768px) { /*lg*/
    .quick-access-toolbar {
        right: 0px;
    }
}
@media (max-width: 768px) { /*sm*/
    .quick-access-toolbar {
        right: -120px;
    }
}
.quick-access-toolbar ul.nav > li > a {
    padding: 20px 15px;
    color: #005DAA;
}
.quick-access-toolbar ul.nav > li.active {
    background-color: #EEE;
}
.quick-access-toolbar ul.nav > li.active > a {
    padding: 20px 15px 20px 11px;
    border-left: 4px solid #005DAA;
}
.quick-access-toolbar > .navbar {
    margin-top: 20px;
    text-align: center;
    border: 0px;
}
.navbar ul.nav > li > a { /*3 bars*/
    margin: 0px;
}

/* Button align responsive
-------------------------------------------------- */
@media (min-width: 768px) { /*lg*/
    .text-left-responsive {
        text-align: left;
    }
    .text-right-responsive {
        text-align: right;
    }
}
@media (max-width: 768px) { /*sm*/
    .text-left-responsive {
        text-align: center;
    }
    .text-right-responsive {
        text-align: center;
    }
}
/* Entity form
-------------------------------------------------- */
.entity-form-tab {
    margin: 30px 0;
    background-color: #005DAA;
    color: #FFF;
    padding: 70px 50px 60px;
}
.entity-form-tab.left {
    border-top-left-radius: 80px;
    border-bottom-left-radius: 40px;
}
.entity-form-tab.right {
    border-top-right-radius: 80px;
    border-bottom-right-radius: 40px;
}
@media (min-width: 992px) {
    .no-left-padding {
        padding-left: 0px;
    }
    .no-right-padding {
        padding-right: 0px;
    }
}
.entity-form-wrapper {
    background-color: #FFF;
    padding: 0px;
    box-shadow: 0 1px 22px 0px rgba(0,0,0,0.14);
}
.crmEntityFormView h2.tab-title,
.crmEntityFormView .section-title {
    font-size: 23px;
    font-weight: bold;
    border-bottom: 0px; /*override entityform*/
    margin: 0px;
    padding: 30px 30px 0;
    width: auto; /*override legend width 100%*/
}
.crmEntityFormView .cell {
    padding: 25px 30px 0;  /*override entityform*/
    margin-bottom: 0px; /*override sm breakpoint*/
}
.crmEntityFormView .cell .info label {
    margin-bottom: 20px; /*override BS*/
}
.crmEntityFormView .cell.boolean-radio-cell .info label {
    float: left; /*override entityform*/
}
.crmEntityFormView .form-control {
    border-radius: 0px;
    border: 1px solid #E5EAEF;
    box-shadow: none;
}
.crmEntityFormView .input-group-addon {
    border-radius: 0px;
    border: 1px solid #E5EAEF;
}
.crmEntityFormView .btn-group-justified > label.btn {
    float: none;
    display: table-cell;
}
.crmEntityFormView .btn-switch {
    border-radius: 0px;
    border-width: 0px;
    color: #333;
}
.crmEntityFormView .btn-switch.active {
    border-bottom: 2px solid #005DAA;
    background-color: #F0F1F2;
    box-shadow: none;
}
.crmEntityFormView .btn-switch:hover {
    background-color: #F0F1F2;
    color: #333;
}
.crmEntityFormView .btn-switch:focus,
.crmEntityFormView .btn-switch:active {
    box-shadow: none;
}
.crmEntityFormView .btn-switch input[type=radio] {
    display: none;
}
.crmEntityFormView .control > .input-group { /*avoid 2 columns form issue, use .control> selecter to avoid side effect */
    width: 100%;
}
/*.crmEntityFormView .datetimepicker {
    width: 100%;
}
*/
.crmEntityFormView .actions,
.crmEntityFormView .form-custom-actions,
.crmEntityFormView .form-action-container-left,
.crmEntityFormView .form-action-container-right {
    display: none;
    margin: 0px;
    padding: 0px;
    border-width: 0px;
}
.crmEntityFormView .form-message {
    font-weight: bold;
    margin: 0px;
}
.crmEntityFormView .cell div.info.required label:after {
    content: ''; /*remove asterisk*/
}

.crmEntityFormView.readOnlyFormView h2.tab-title,
.crmEntityFormView.readOnlyFormView .section-title {
    font-size: 18px;
    margin: 0 0 30px 0;
    padding: 0px;
}
.crmEntityFormView.readOnlyFormView .info {
    margin-top: 20px;
}
.crmEntityFormView.readOnlyFormView .form-control  {
    margin-top: 10px;
}

.webform-actions #PreviousButton,
.webform-actions #SkipButton,
.webform-actions #NextButton,
.webform-actions #DeleteButton,
.webform-actions #SubmitButton {
    width: 180px;
}

/* Lookup buttons
-------------------------------------------------- */
.input-group .input-group-btn .fa {
    line-height: 0;
}

/* Temp block
-------------------------------------------------- */
#custom-block-1 {
    background-color: #005DAA;
}
#custom-block-2 {
    background-color: #014693;
}
#custom-block-3 {
    background-color: #005DAA;
}

/* Modal
-------------------------------------------------- */
.modal-content-wrapper .row {
    margin-left: 0px;
    margin-right: 0px;
}
.modal-content-wrapper .row > [class*='col-'] {
    padding-left: 0px;
    padding-right: 0px;
}
.modal .form-loading {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
    .modal-content-wrapper .row {
        display: flex;
        flex-wrap: wrap;
    }
}
.modal-dialog {
    margin: 0px auto;
    display: flex;
    flex-direction:column;
    justify-content: center;
    height: 100%;
}
/*.modal-transparent > .modal-dialog {
    padding-bottom: 30px;
}
*/
.modal-transparent > .modal-dialog > .modal-header {
    height: 30px;
    padding: 0px;
    border-bottom-width: 0px; 
}
.modal-transparent > .modal-dialog > .modal-header > .close {
    color: #FFF;
    opacity: .5;
    font-size: 34px;
}
.modal-transparent > .modal-dialog > .modal-footer {
    height: 30px;
    border-width: 0px;
}
.lookup-modal .remove-value {
    display: none;
}
/* Card
-------------------------------------------------- */
.card {
    min-height: 20px;
    padding: 30px;
    border: 0px solid #e3e3e3;
    border-radius: 30px;
    box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 10%);
}
.card-default {
    color: #005DAA;
    background-color: #F1F1F1;
}
.card-primary {
    color: #FFF;
    background-color: #005DAA;
}

/* Tab
-------------------------------------------------- */
.container ul.nav-tabs {
    border-bottom: 1px solid #DDD;
}
.container ul.nav-tabs > li {
    height: 70px;
    vertical-align: middle;
}
.container ul.nav-tabs > li:hover {
    background-color: #EEE;
}
.container ul.nav-tabs > li.active {
    background-color: #EEE;
    border-bottom: 4px solid #005DAA;
}
.container ul.nav-tabs > li > a {
    border: 0px solid transparent;
}
.container ul.nav-tabs > li.active > a,
.container ul.nav-tabs > li.active > a:focus,
.container ul.nav-tabs > li.active > a:hover {
    color: #005DAA;
    background-color: #EEE;
    border: 0px solid transparent;
}

/* youtube video
-------------------------------------------------- */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Power Virtual Agent styles */
.pva-floating-style {
  position: fixed;
  bottom: 0px;
  right: 0px;
  margin-right: 16px;
  margin-bottom: 18px;
  z-index: 9999;
}
/* Power Virtual Agent styles ends */