@font-face {
    font-family: OpenSans;
    src: url(../../Fonts/OpenSans-Regular.ttf);
}

* {
    font-family: OpenSans;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler {
    border-color: white;
}

/* tela de login */
.btn-crm-menu {
    display: none;
}

.body-login {
    background: url(../../Images/Cliente/login/new/login-topfama.png) no-repeat center fixed;
    background-size: cover;
}

    .body-login #logo-login {
        content: url('../../Images/logo-topfama.png');
        width: 250px;
        margin: 0 auto;
        padding-bottom: 25px;
    }

    .body-login form button[type=submit] {
        background-color: #231F59;
        border: 1px solid #231F59;
    }

        .body-login form button[type=submit]:hover,
        .body-login form button[type=submit]:active,
        .body-login form button[type=submit]:hover {
            background-color: #FFCB08;
            border: 1px solid #FFCB08;
            color: #231F59;
        }

@media only screen and (min-width: 1000px) {
    .body-login .form {
        float: right;
        margin-right: 5%;
    }
}

/* menu global */
.navbar-brand {
    color: #231F59 !important;
}

#img-brand-header {
    content: url(../../Images/logo_moninf.png);
}

.menu-login {
    background-color: #ff5000;
    color: white;
    padding: 8px;
}

    .menu-login ul {
        text-align: right;
        margin: 0;
        margin-right: 20px;
        padding: 0;
        list-style: none;
    }

        .menu-login ul li {
            display: inline-block;
        }

            .menu-login ul li a {
                color: white;
            }

header {
    background-color: white;
    padding: 0px;
}

    header nav {
        background-color: white;
    }

.nav-item a.btn {
    color: black;
    background-color: white;
}

.nav-item a:hover {
    background-color: white !important;
    color: black;
}

.nav-item form .nav-link {
    color: white;
    background-color: #231F59;
}

    .nav-item form .nav-link:hover {
        background-color: #FFCB08;
        color: #231F59;
    }

.nav-link-hover {
    background-color: #FFCB08;
    color: #231F59;
}

.nav-item > a.nav-link-hover {
    color: white;
    background-color: #FFCB08;
}

.dropdown-menu a {
    color: #231F59;
}

.dropdown-menu {
    background-color: #FFCB08;
    color: #231F59;
}

.dropdown-item:hover {
    background-color: white;
    color: #231F59;
}

.invisivel {
    display: none;
}

/* footer global */
footer {
    background-color: #3a3a3a;
}

    footer, footer a {
        color: white;
        font-size: medium;
    }

        footer hr {
            background-color: white;
        }

        footer #btn-scroll {
            text-align: right;
            display: none;
            position: fixed;
            bottom: 115px;
            right: 5px;
            z-index: 99;
            cursor: pointer;
        }

        footer #btn-whatsapp {
            font-size: 30px;
            position: fixed;
            width: 55px;
            height: 55px;
            bottom: 40px;
            right: 5px;
            text-align: center;
            z-index: 100;
        }

        footer input[type=submit] {
            background-color: #00aaeb;
            border: none;
            width: 50px;
            height: 24px;
            cursor: pointer;
        }

/* tela inicial */
.recomendados {
    background-color: #fde887;
    color: #231F59;
}

    .recomendados * {
        color: #231F59;
    }

.seguros h3 {
    border-bottom: 3px solid #231F59;
    color: #231F59;
}

.seguros a {
    border-radius: 0 20px 0 20px !important;
    background-color: #231F59;
    border: 1px solid #231F59;
    color: white;
}

    .seguros a:hover {
        background-color: #FFCB08;
        border: 1px solid #FFCB08;
        color: #231F59;
    }

#buscar {
    background-color: #231F59;
    border: 1px solid #231F59;
    color: white;
}

    #buscar:hover {
        background-color: #FFCB08;
        border: 1px solid #FFCB08;
        color: #231F59;
    }

#pagina-home #section-5 table {
    border-collapse: collapse;
    width: 100%;
    font-weight: bold;
}

#pagina-home #section-5 table, #section-5 table td, #section-5 table th {
    border: 1px solid black;
}

    #pagina-home #section-5 table td span:nth-child(1) {
        float: left;
        font-size: 22px;
    }

    #pagina-home #section-5 table td span:nth-child(2) {
        float: right;
        font-size: 25px;
    }

    #pagina-home #section-5 table td {
        padding: 15px;
    }

#pagina-home #section-5 .resposta {
    display: none;
    font-weight: normal;
    text-align: justify;
}

.padrao-img {
    object-fit: cover;
}

#proposta-form button {
    background-color: #ff5000;
    border: none;
    border-radius: 19px;
    color: white;
    padding: 11px 40px;
    font-weight: bold;
    font-size: 20px;
}

/*#pagina-planos #section-1 button {
    background-color: #00aaeb;
    border: none;
    border-radius: 19px;
    color: white;
    padding: 11px 40px;
    font-weight: bold;
    font-size: 20px;
    top: 213px;
}*/

#PageCadastro label {
    font-size: 0.7em;
}

/* acompanhamento */
#btn-buscar {
    /*border-radius: 0 20px 0 20px !important;*/
}

.list-botoes-workflow .btn-acompanhamento {
    background-color: #cbcdcc !important;
    border: none !important;
    border-radius: 19px !important;
    color: #1c3503 !important;
    padding: 11px 18px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    min-width: -webkit-fill-available;
}

.list-botoes-workflow span, .list-botoes-workflow i {
    color: #1c3503 !important;
}

.list-botoes-workflow .btn-detalhe {
    min-width: unset !important;
}

#btn-exportar {
    background-color: #3a3a3a !important;
}

/*#btn-exportar, #btn-donwload-exportacao {
    border-radius: 0 20px 0 20px !important;
    background-color: #231F59;
}

#proposta-form #btn-exportar span {
    border-radius: 0 20px 0 20px !important;
    color: white;
}

#proposta-form #btn-exportar:hover, #proposta-form #btn-donwload-exportacao:hover {
    background-color: #FFCB08;
    border-color: #FFCB08;
    color: #231F59;
}*/

/*#proposta-form #btn-exportar:hover span, #proposta-form #btn-donwload-exportacao:hover span {
        color: #231F59;
    }*/

.resumo .btn-primary {
    border-radius: 0 20px 0 20px !important;
    background-color: #231F59;
    border-color: #231F59;
    color: white !important;
}

    .resumo .btn-primary:hover,
    .resumo .btn-primary:active {
        background-color: #FFCB08 !important;
        border-color: #FFCB08 !important;
        color: #231F59 !important;
    }

/* tela de contratação */
.steps {
    display: none;
}

.step {
    position: relative;
    z-index: 2;
    text-align: center;
}

.steps .step > a {
    background-color: #00aaeb;
    color: white !important;
}

.steps .step:not(.active) > a {
    background-color: #0052eb;
}

.plano .btn {
    background-color: #0052eb;
    border: 1px solid #0052eb;
    color: white !important;
    text-transform: uppercase;
}

    .plano .btn:hover,
    .plano .btn:active {
        background-color: #00aaeb !important;
        border: 1px solid #00aaeb !important;
        color: #0052eb !important;
        text-transform: uppercase;
    }

.checked {
    color: #deb608 !important;
}

.cnpj_empresa button {
    background-color: #231F59;
    border: 1px solid #231F59;
    color: white !important;
}

    .cnpj_empresa button:hover, .cnpj_empresa button:active {
        background-color: #f8d12a !important;
        border: 1px solid #f8d12a !important;
        color: #231F59 !important;
    }

.btn-cep {
    background-color: #231F59;
    border: 1px solid #231F59;
    color: white !important;
}

    .btn-cep:hover, .btn-cep:active {
        background-color: #f8d12a !important;
        border: 1px solid #f8d12a !important;
        color: #231F59 !important;
    }

.formulario hr {
    background-color: black;
}

.error {
    display: block;
    color: #ff0000 !important;
    font-size: 11px !important;
    margin-top: 5px;
    margin-left: 2px;
    justify-content: left !important;
}

    .error label {
        text-align: left !important;
    }

.btn-default {
    background-color: #ff5000;
    border: none;
    border-radius: 19px;
    color: white;
    padding: 11px 40px;
    font-weight: bold;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
}

.btn-back {
    background-color: #3a3a3a;
    border: none;
    border-radius: 19px;
    color: white;
    padding: 11px 40px;
    font-weight: bold;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
}


#pagina-pagamento .check-pagamento {
    border: 2px solid grey;
    border-radius: 15px;
    margin: auto;
    cursor: pointer;
    display: block;
    width: 20px;
    height: 20px;
}

#pagina-pagamento .ocultar {
    display: none;
}

#pagina-pagamento .painel {
    display: none;
}

/*#pagina-pagamento button {
    background-color: #00c785;
    border: none;
    border-radius: 30px;
    color: #1c3503;
    padding: 11px 40px;
    font-weight: bold;
    font-size: 20px;
}*/

#pagina-pagamento label {
    font-size: 0.7em;
}

.bg-primary {
    background-color: #00aaeb !important;
}
/*
    Tela de Login
*/
#div-login {
    background-image: url("../../Images/Cliente/logo-parceiro/login_portal_fleet.png");
    background-color: #000;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 720px;
    padding: 100px 0;
    margin-bottom: 150px;
}

@media only screen and (min-device-width: 1200px) {
    #div-login {
        padding: 60px !important;
    }

    .box-login > .row {
        margin: 0.5em !important;
    }
}

#div-login h1 {
    font-weight: bold;
    font-size: 2.3em;
    color: #fff;
}

#div-login a {
    font-style: italic;
    font-size: 0.8em;
    color: #5a6480;
}

#div-login input {
    background-color: #cdcdcd;
    color: #7e7e78;
}

#div-login .btn-primary {
    background-color: #ff5000;
    color: #fff;
    font-weight: 100;
    text-transform: uppercase;
}

#div-login table, #div-login tr, #div-login td {
    border: 0;
}

.box-login {
    background-color: #fff;
    border: 1px solid #e5eae5;
    border-radius: 15px;
    padding: 1.5em;
}

    .box-login > .row {
        margin: 0.9em 0;
    }

    .box-login i {
        color: #c5c5c5;
    }

    .box-login .input-group-text {
        background-color: #fff;
    }

@media (max-width: 480px) {
    #div-login {
        background-position: top;
        min-height: 920px;
    }

        #div-login h1 {
            font-size: 1.7em;
            text-align: center;
        }
}

#pagina-planos span {
    color: black !important;
}


#pagina-planos .condicoes-gerais span,
#pagina-dados-cadastrais .condicoes-gerais span {
    color: #d8770c !important;
    font-size: small;
}

#pagina-planos .condicoes-gerais img,
#pagina-dados-cadastrais .condicoes-gerais img {
    width: 25px;
}

#hr-plano {
    width: 5%;
    height: 1px;
    margin: auto;
    background-color: #00aaeb;
    margin: 40px auto;
}

#img-plano-main {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-10.png");
    width: 84%;
}

#img-icon1 {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-15.png");
    width: 80px;
    padding-top: 10px;
    display: inline;
}

#img-icon2 {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-19.png");
    width: 80px;
    padding-top: 10px;
    display: inline;
}

#img-icon3 {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-21.png");
    width: 80px;
    padding-top: 10px;
    display: inline;
}

#img-icon4 {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-16.png");
    width: 80px;
    padding-top: 10px;
    display: inline;
}

#img-icon5 {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-20.png");
    width: 80px;
    padding-top: 10px;
    display: inline;
}

#img-icon6 {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-22.png");
    width: 80px;
    padding-top: 10px;
    display: inline;
}

#img-icon7 {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-17.png");
    width: 80px;
    padding-top: 10px;
    display: inline;
}

#img-icon8 {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-24.png");
    width: 80px;
    padding-top: 10px;
    display: inline;
}

#img-icon9 {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-23.png");
    width: 80px;
    padding-top: 10px;
    display: inline;
}

#img-icon10 {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-18.png");
    width: 80px;
    padding-top: 10px;
    display: inline;
}

#img-icon11 {
    content: url("../../Images/Cliente/lockton/ELEMENTOS_LOCKTON_v2-27.png");
    width: 80px;
    padding-top: 10px;
    display: inline;
}

/*
    Tela de Cadastro
*/
#PageCadastro > .row {
    margin-bottom: 20px;
}

#pagina-planos #section-1 #bntsalvar {
    background-color: #00c785;
    border: none;
    border-radius: 19px;
    color: #1c3503;
    padding: 11px 40px;
    font-weight: bold;
    font-size: 20px;
}

@media (min-width: 576px) {
    /*#carouselExampleIndicators {
        display: none;
    }
*/
    .planos-monitor-grande {
        display: block;
    }

    .planos-monitor-pequeno {
        display: none;
    }
}

@media (max-width: 575px) {
    .img-fluid {
        width: auto;
    }

    .planos-monitor-pequeno {
        display: block;
    }

    .planos-monitor-grande {
        display: none !important;
    }

    #pagina-planos .carousel-indicators button {
        background-color: #ff5000;
        border: none;
        border-radius: 19px;
        color: white;
        padding: 11px 40px;
        font-weight: bold;
        font-size: 20px;
        top: 213px;
    }

    #pagina-planos .navigation-buttons button {
        background-color: transparent !important;
        color: #ff5000 !important;
        border: none;
        border-radius: 19px;
        font-weight: bold;
        font-size: 55px;
        z-index: 100;
    }

    #pagina-planos .carousel-control-prev, .carousel-control-next {
        opacity: .7 !important;
    }

    #pagina-planos .carousel-indicators .active {
        background-color: #ff5000 !important;
        opacity: .5 !important;
    }

    #pagina-planos .carousel-control-prev {
        left: -18px;
    }

    #pagina-planos .carousel-control-next {
        right: -18px;
    }

    #pagina-dados-cadastrais .carousel-indicators button, #pagina-dados-cadastrais .navigation-buttons button {
        display: none;
    }
}

.tableQuestionario {
    border-bottom: 1px solid;
    margin-bottom: 20px;
    border-color: #00aaeb;
}


#pagina-dados-cadastrais label,
#pagina-alterar-beneficiarios label {
    font-size: 0.7em;
}

/*===========================================
======== CONTRATAÇÃO - QUESTIONÁRIO =========
===========================================*/
/*-------------------------------------------
            QUESTIONÁRIO - SEÇÃO 1 
-------------------------------------------*/
#questionario-section-1 img {
    width: inherit;
}


/*-------------------------------------------
            QUESTIONÁRIO - SEÇÃO 2 
-------------------------------------------*/
#pagina-questionario {
    text-align: center;
}

    #pagina-questionario h1 {
        color: #f66b40;
        font-size: 40px;
    }

    #pagina-questionario h2 {
        color: #f66b40;
        font-size: xx-large;
    }

    #pagina-questionario h3 {
        font-size: larger;
    }

    #pagina-questionario h4 {
        color: #f66b40;
        font-weight: 600;
        font-size: x-large;
    }

/*--------------- TÍTULO -------------------*/
#questionario-section-2 h1 {
    font-weight: 600;
}

#questionario-section-2 .txt-color-destaque {
    color: black;
}

/*-------------- COBERTURAS ----------------*/
#questionario-box-coberturas {
    text-align: left !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

.questionario-cobertura-item img {
}

.questionario-cobertura-item span {
    font-size: larger;
}

.questionario-cobertura-item {
    display: flex !important;
}

/*-------------- FORMULÁRIO ----------------*/
#questionario-box-form {
    border-radius: 15px;
    background-color: #fce0a2;
    display: inline-block !important;
}

    #questionario-box-form input[type=text], select {
        width: inherit !important;
    }

.questionario-form-box-subsecao {
    text-align: left !important;
}

    .questionario-form-box-subsecao span {
        font-size: medium;
        margin-bottom: 5px !important;
    }

.questionario-form-item {
    display: inline-grid;
}

.form-item-radio {
    display: inline-flex !important;
}

    .form-item-radio label {
        padding: 1px 5px;
        display: inline-flex !important;
    }

    .form-item-radio input[type=radio] {
        margin: 5px;
        width: 15px !important;
        height: 14px !important;
    }

.questionario-form-item-multiplo {
    padding: 0px !important;
    display: inline-grid;
}

/*===========================================
=========== CONTRATAÇÃO - PLANOS ============
===========================================*/
#pagina-planos h1 {
    color: #ff5000;
    font-size: 25px;
    font-weight: 600;
}

#pagina-planos h2 {
    color: #ff5000;
    font-size: 35px;
    font-weight: 600;
    text-align: center !important;
}

#pagina-planos h3 {
    color: black;
    font-size: 22px;
    font-weight: 600;
}

#pagina-planos .txt-color-destaque {
    color: black !important;
}


/*----------------------------------------
            COBERTURAS
/*----------------------------------------*/
#plano-box-coberturas {
    display: inline-flex;
}

.plano-cobertura-item {
    display: flex;
    margin-bottom: 20%;
    text-align: justify !important;
}

    .plano-cobertura-item img {
        margin: 3%;
    }

    .plano-cobertura-item span {
        font-size: large;
    }


/*----------------------------------------
            MOBILE
/*----------------------------------------*/
@media (min-width: 576px) {
    .textoH1Responsivo {
        font-size: 25px !important;
    }

    .iconeResponsivoHome {
        border: 50px solid transparent !important;
        
    }

    .iconeMidiasSociaisResponsivo {
        width:40px !important;
    }

    .textoH2Responsivo {
        font-size: 20px !important;
    }

    /*#carouselExampleIndicators {
        display: none;
    }*/

    .planos-monitor-grande {
        display: block;
    }

    .planos-monitor-pequeno {
        display: none;
    }

    .dados-contratante{

    }
}

@media (max-width: 575px) {
    .img-fluid {
        width: auto;
    }

    .planos-monitor-pequeno {
        display: block;
    }

    .planos-monitor-grande {
        display: block;
    }
    .dados-contratante {

    }
   /* #pagina-planos .carousel-indicators button {
        background-color: #f66b40;
        border: none;
        border-radius: 19px;
        color: white;
        padding: 11px 40px;
        font-weight: bold;
        font-size: 20px;
        top: 213px;
    }*/

    #pagina-planos .navigation-buttons button {
        background-color: transparent !important;
        color: #f66b40 !important;
        border: none;
        border-radius: 19px;
        font-weight: bold;
        font-size: 55px;
        z-index: 100;
    }

   /* #pagina-planos .carousel-control-prev, .carousel-control-next {
        opacity: .7 !important;
    }*/

   /* #pagina-planos .carousel-indicators .active {
        background-color: #f66b40 !important;
        opacity: .5 !important;
    }

    #pagina-planos .carousel-control-prev {
        left: -18px;
    }

    #pagina-planos .carousel-control-next {
        right: -18px;
    }

    #pagina-dados-cadastrais .carousel-indicators button, #pagina-dados-cadastrais .navigation-buttons button {
        display: none;
    }*/
}

/*-------------------------------------------*/
/*.plano .btn {
    background-color: #0052eb;
    border: 1px solid #0052eb;
    color: white !important;
    text-transform: uppercase;
}

    .plano .btn:hover,
    .plano .btn:active {
        background-color: #00aaeb !important;
        border: 1px solid #00aaeb !important;
        color: #0052eb !important;
        text-transform: uppercase;
    }*/

/*.checked {
    color: #deb608 !important;
}*/

/*.cnpj_empresa button {
    background-color: #231F59;
    border: 1px solid #231F59;
    color: white !important;
}

    .cnpj_empresa button:hover, .cnpj_empresa button:active {
        background-color: #f8d12a !important;
        border: 1px solid #f8d12a !important;
        color: #231F59 !important;
    }*/

/*.btn-cep {
    background-color: #231F59;
    border: 1px solid #231F59;
    color: white !important;
}

    .btn-cep:hover, .btn-cep:active {
        background-color: #f8d12a !important;
        border: 1px solid #f8d12a !important;
        color: #231F59 !important;
    }*/

/*.formulario hr {
    background-color: black;
}*/


/*===========================================
====== CONTRATAÇÃO - DADOS CADASTRAIS =======
===========================================*/
#pagina-dados-cadastrais {
    text-align: left;
}

    #pagina-dados-cadastrais h1 {
        font-size: x-large;
    }

    #pagina-dados-cadastrais h2 {
        color: #f66b40;
        font-size: larger;
    }

    #pagina-dados-cadastrais h3 {
        font-size: medium;
    }

    #pagina-dados-cadastrais span {
        font-size: 17.5px;
    }

    #pagina-dados-cadastrais label {
        font-size: medium;
    }

    #pagina-dados-cadastrais .txt-color-destaque {
        color: #ff5000 !important;
    }

    #pagina-planos .lnk-condicoes-gerais,
    #pagina-dados-cadastrais .lnk-condicoes-gerais {
        float: left;
        color: black;
        font-size: medium !important;
    }


/*===========================================
========== CONTRATAÇÃO - PAGAMENTO ==========
===========================================*/
#pagina-pagamento .check-pagamento {
    border: 2px solid grey;
    border-radius: 15px;
    margin: auto;
    cursor: pointer;
    display: block;
    width: 20px;
    height: 20px;
}

#pagina-pagamento .ocultar {
    display: none;
}

#pagina-pagamento .painel {
    display: none;
}

#pagina-pagamento label {
    font-size: 0.7em;
}

.bg-primary {
    background-color: #00aaeb !important;
}


/*===========================================
=========== CONTRATAÇÃO - FIM ============
===========================================*/
#pagina-fim {
    width: 70%;
    margin: 4% 10% 5% 15%;
    border-radius: 20px;
    background-color: #DCDCDC;
}

    #pagina-fim h1 {
        font-size: x-large;
        text-align: center;
    }

    #pagina-fim h2 {
        font-size: larger;
        text-align: center;
    }

    #pagina-fim h3 {
        font-size: large;
        font-weight: 600;
    }

    #pagina-fim span {
        font-size: medium;
    }

    #pagina-fim .btn-default {
        color: white !important;
        overflow-wrap: break-word;
        box-shadow: 2px 3px 10px darkgrey;
    }

/*===========================================
=========== CONTRATAÇÃO - ERRO ==============
===========================================*/
#pagina-erro {
    width: 70%;
    margin: 4% 10% 5% 15%;
    border-radius: 20px;
    background-color: #DCDCDC;
}

    #pagina-erro h1 {
        font-size: x-large;
        text-align: center;
    }

    #pagina-erro h2 {
        font-size: larger;
        text-align: center;
    }

    #pagina-erro h3 {
        font-size: large;
        font-weight: 600;
    }

    #pagina-erro span {
        font-size: medium;
    }

    #pagina-erro .btn-default {
        color: white !important;
        overflow-wrap: break-word;
        box-shadow: 2px 3px 10px darkgrey;
    }



/* On screens that are 992px wide or less, the background color is blue */
@media screen and (max-width: 992px) {

    .responsive-row-collum {
        display: flex;
        flex-direction: row;
    }

    .responsive-row-collum-reverse {
        display: flex;
        flex-direction: row;
    }
}

/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {

    .responsive-row-collum {
        display: flex;
        flex-direction: column;
    }

    .responsive-row-collum-reverse {
        display: flex;
        flex-direction: column-reverse;
    }
}