:root {
    --gray: #D4D4D5;
    --blue: #054d7f;
}

header .menu-mobile {
    display: none !important;
}

/* New home classes desktop */
body {
    background-image: none !important;
    background-color: #e4e4e4 !important;

}

.ui.brown.dividing.header {
    color: var(--blue) !important;
    border-bottom: solid 1px var(--blue) !important;
}

.ui.steps:not(.vertical) .step>.icon {}

.ui.ordered.steps .step.active:before,
.ui.steps .active.step .icon {
    color: var(--blue) !important;
}

.ui.segment {
    box-shadow: 0px 1px 2px 0 var(--gray);
    border: 1px solid var(--gray);
    border-radius: 2px;
}

button.ui.button.brown {
    background: var(--blue) !important;
}

.ui.menu .teal.active.item,
.ui.teal.menu .active.item {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}

.ui.menu.fluid,
.ui.vertical.menu.fluid {
    height: 100%;
    border-radius: 2px;
    box-shadow: 0px 1px 2px 0 var(--gray);
    border-color: var(--gray);
    background: #fafafa;
}

.ui.divider:not(.vertical):not(.horizontal) {
    border-top-color: var(--blue) !important;
}

.ui.steps .step.active .title {
    color: var(--blue);
}

.ui.steps .step:after {
    border-color: var(--gray);
}

.ui.steps {
    border-color: var(--gray);
    border-radius: 2px;
}

.ui.steps .step .title {
    font-size: .9rem;
}

.ui.steps .step {
    border-color: var(--gray);
}

.ui.form input:not([type]):focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="file"]:focus,
.ui.form input[type="url"]:focus {
    border-color: #007bff;
}

a {
    color: var(--blue);
}

.ui.brown.dividing.header+.divider {
    border: none;
}

form .ui.basic.segment {
    padding: 0;
}

form .ui.basic.segment button {
    margin: 0;
    float: none;
}

.ui.list .list>.item a.header,
.ui.list>.item a.header {
    color: var(--blue) !important;
    margin-bottom: 8px;
}

.ui.list .list>.item>i.icon,
.ui.list>.item>i.icon {
    color: var(--blue);
}

.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="file"],
.ui.form input[type="url"],
.ui.selection.dropdown,
.ui.form textarea {
    border: 1px solid rgba(34, 36, 38, .6);
}

.ui.divided.list>.item {
    border-color: var(--blue);
    padding-block: 5px;
    margin-block: 10px;
}

.ui.relaxed.list:not(.horizontal)>.item:not(:first-child) {
    padding-top: 16px;
}

.ui.orange.buttons .button,
.ui.orange.button {
    background: var(--blue);
}

input:read-only,
textarea:read-only,
select:read-only {
    color: black !important;
    background: #f7f7f7 !important;
    text-align: center;
}

.ui.orange.buttons .button:hover,
.ui.orange.button:hover {
    background: #396695 !important;
}

.ui.form .fields>.field {
    width: 50%;
}

.content-slide .content-back {
    background: #396695;
    border-radius: 4px;
}

@media only screen and (max-width: 991px) {

    .grid.ui>*,
    .grid.ui .row>* {
        width: 100% !important;
    }

    .grid.ui>*,
    .grid.ui .row>*:not(:last-child) {
        margin-bottom: 16px;
    }

    .ui.grid>.row>.column:is([class*="one"], [class*="two"], [class*="three"], [class*="four"], [class*="five"], [class*="six"], [class*="seven"], [class*="eight"], [class*="nine"], [class*="ten"], [class*="eleven"], [class*="twelve"]),
    .ui.grid>.column.row>.column:is([class*="one"], [class*="two"], [class*="three"], [class*="four"], [class*="five"], [class*="six"], [class*="seven"], [class*="eight"], [class*="nine"], [class*="ten"], [class*="eleven"], [class*="twelve"]),
    .ui.grid>.column:is([class*="one"], [class*="two"], [class*="three"], [class*="four"], [class*="five"], [class*="six"], [class*="seven"], [class*="eight"], [class*="nine"], [class*="ten"], [class*="eleven"], [class*="twelve"]),
    .ui.column.grid>.column:is([class*="one"], [class*="two"], [class*="three"], [class*="four"], [class*="five"], [class*="six"], [class*="seven"], [class*="eight"], [class*="nine"], [class*="ten"], [class*="eleven"], [class*="twelve"]),
    .ui.three.cards>.card {
        width: 100% !important;
    }

    .ui.steps:not(.unstackable) {
        display: flex;
        flex-flow: row nowrap;
        overflow-x: auto;
        padding: 0;
        border: none !important;
        align-items: flex-start;
        border-radius: 0;
        min-height: 115px;
        height: auto;
        overflow-y: hidden;
    }

    .ui.steps:not(.unstackable) .step {
        width: 25% !important;
        font-size: 11px;
        transition: all ease-in-out 200ms;
        border-bottom: solid 1px #054d7f !important;
        height: 100%;
        min-height: 110px;
    }


    .ui.steps:not(.unstackable) .step:after {
        left: 0;
        transform: unset;
        width: 0;
        height: 3px;
        border: none;
        background: #21ba45;
        transition: all ease-in-out 200ms;
        transform-origin: center center;
        right: 0;
    }


    .ui.steps:not(.unstackable) .step i {
        font-size: 22px;
    }

    .ui.steps:not(.unstackable) .step.completed:after {
        width: 100%;
        bottom: -2px;
        top: auto;
    }

    .ui.five.cards>.card {
        width: 100%;
    }

    .ui.buttons .button,
    .ui.buttons .or,
    .ui.button {
        width: 100%;
        margin-bottom: 10px;
        min-height: 46px;
    }


    .ui.table.primary.flat thead th {
        color: #fff;
        background: #054d7f !important;
    }

    .ui.form {
        max-width: unset;
    }

    .ui.checkbox {
        margin-bottom: 14px;
    }


    .ui.ui.ui.red.ribbon.label {
        width: 90%;
    }

    .ui.ui.ui.grid.container {
        /*width: 100%;*/
    }

    .ui.grid>.row {
        margin-bottom: 0;
    }

    .ui.stackable.grid>.column:not(.row) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .ui.stackable.grid {
        margin: 0;
    }

    .ui.table:not(.unstackable) {
        display: block;
        width: 100%;
        overflow: auto;
        margin-top: 10px;
        border-radius: 4px !important;
    }

    .ui.table:not(.unstackable) td button {
        width: auto !important;
        margin: 0;
        min-height: 36px;
    }

    .ui.table:not(.unstackable)> :is(tbody, thead, tfoot) {
        display: table-header-group !important;
    }

    .ui.table:not(.unstackable)> :is(thead, tbody, tfoot)>tr {
        display: table-row !important;
        width: 100% !important;
    }

    .ui.table:not(.unstackable)> :is(thead, tbody, tfoot)>tr> :is(th:not(.rowspanned), td:not(.rowspanned)) {
        display: table-cell !important;
        width: 100% !important;
        padding: 10px !important;
    }

    header>.ui.grid {
        grid-gap: 0 1rem;
    }

    .ui.six.cards>.card {
        width: 100%;
    }

    .ui.six.cards>.card .extra.content button {
        margin-bottom: 0 !important;
    }


    .mx-1 {
        margin: 0 !important;
    }

    .ui.radio.checkbox label {
        font-size: 16px;
    }


    .ui.celled.grid>.column:not(.row),
    .ui.celled.grid>.row>.column {
        box-shadow: none;
    }

    .ui.table.primary.flat {
        border-color: #acacac !important;
    }

    html body .styled.ui.accordion .content {
        background: #f6f7f7;
        padding: 10px !important;
        border-radius: 0 0 4px 4px;
    }

    /* New home classes mobile */
    body .master-container:after {
        bottom: 140px;
        background-size: 250%;
    }

    .products-description .description h2,
    .products-description .description p {
        max-width: 100%;
    }

    .ui.form .fields .field .ui.input input,
    .ui.form .field .ui.input input {
        width: 100% !important;
    }

    .ui.form .fields>.field {
        width: 100%;
        margin-bottom: 10px;
    }

    .ui.menu.fluid,
    .ui.vertical.menu.fluid {
        /* margin-bottom: 10px; */
    }

    app-extend-visa {
        margin-top: 17px;
        display: block;
    }

    .ui.four.steps>.step {
        height: 100%;
        border-radius: 0 !important;
        display: flex;
        justify-content: flex-start;
    }

    .ui.steps:not(.unstackable) {
        height: 100px;
    }

    .content-slide .ui.buttons {
        display: flex;
        flex-direction: column;
    }

    .content-slide .ui.buttons .button {
        border-radius: 4px;
    }

    img.main-logo {
        height: 40px;
    }

    header .nav-top .row {
        display: flex;
    }

    header .nav-top .row>* {
        width: 50%;
    }

    .call-center {
        display: flex;
        gap: 10px;
    }

    header .nav-top .col-md-3.col-sm-12.align-self-center.text-center {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    header .nav-top .col-md-6.col-sm-12.text-center {
        order: 3;
        width: 100%;
    }

    header .nav-top .call-center i {
        order: 1;
        align-self: center;
        margin: 0;
    }

    header .nav-top .col-md-6.col-sm-12.text-center .divider:last-child {
        display: none !important;
    }

    .ui.four.steps {
        margin-top: 17px;
        width: calc(100% + 32px);
        margin-inline: -16px;
        border-block: solid 1px var(--blue) !important;
    }

    .ui.menu.fluid,
    .ui.vertical.menu.fluid+.divider {
        border: none;
    }
}

/* home page: */

.card.home-card {padding: 0;min-height: 350px;border: none;height: 100%;background: transparent;}
.card-img {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-img > img {max-width: 50%;}

.card.home-card h3 {
  font-size:23px;
  text-align:center;
}

.card.home-card > a {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  transition: all ease-in-out 300ms;
  box-shadow: 0 0 9px 0px rgb(0 0 0 / 10%);
}

.card.home-card > a:hover {
  background: #005184;
  color: #fff;
  box-shadow: 7px 7px 4px 2px rgb(0 0 0 / 15%);
}

.card.home-card > a:hover * {

  color: inherit;
}


app-home .content-slide .row {
  gap: 30px 0;
}

app-home {
  min-height: calc(100vh - 330px);
  display: block;
  background: url(/assets/img/sheild-shape.png) no-repeat center bottom;
  background-size: contain;
  height: auto;
  padding-bottom: 60px;
  display: flex;
  align-items: center;
}

.page {
  position: relative;
}

app-home .content-slide {
  margin: 30px 10px;
}