@charset "UTF-8";
/* CSS Document */

/* fuentes utilizadas den el documento una de ellas son íconos */

@font-face {
    font-family: 'lockton_gmm';
    src: url('../../assets/fonts/lockton_gmm.eot');
    src: url('../../assets/fonts/lockton_gmm.eot') format('embedded-opentype'), url('../fonts/lockton_gmm.ttf') format('truetype'), url('../../assets/fonts/lockton_gmm.woff') format('woff'), url('../assets/fonts/lockton_gmm.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root {
    /*  colores principales del proyecto */
    --lockton_blue: #00AEEF;
    --lockton_black: #000000;
    --lockton_white: #ffffff;
    --lockton_silver: #B8B8B8;
    --lockton_jet: #363636;
    --lockton_bakground: #E3E3E3;
    /* colores complementarios del proyecto de claro a obscuro */
    --lockton_blue2: #055EA3;
    --lockton_blue3: #0D245C;
    --lockton_green: #7EB142;
    --lockton_green2: #4D7838;
    --lockton_green3: #384F2B;
    --lockton_yellow: #FFD534;
    --lockton_yellow2: #E5B000;
    --lockton_yellow3: #786100;
    --lockton_orange: #FF732B;
    --lockton_orange2: #CF4F0A;
    --lockton_orange3: #873B00;
    --lockton_red: #FF2147;
    --lockton_red2: #AB001C;
    --lockton_red3: #700000;
    --lockton_purple: #822EBF;
    --lockton_purple2: #4F2970;
    --lockton_purple3: #331C52;
    /* tamaño de texto */
    --fontsize: 14px;
}

.bg-nota-verde {
    background-color: #cedac0;
    padding-right: 20px;
    color: var(--lockton_green2);
    box-shadow: 4px 6px 24px -2px rgba(0,0,0,0.59);
    -webkit-box-shadow: 4px 6px 24px -2px rgba(0,0,0,0.59);
    -moz-box-shadow: 4px 6px 24px -2px rgba(0,0,0,0.59);
}

h1 {
    font-size: calc(var(--fontsize)+20px);
    font-weight: 100;
}

h2 {
    padding: 1em 0 0 .2em;
    font-size: calc(var(--fontsize)+30px);
    font-weight: 100;
}

.txt-bold {
    font-weight: 600;
    padding-left: 10px;
}

/*.card {
    max-width: 32%;
}*/

.card2 {
    max-width: 23%;
}

.txt-card1 {
    font-weight: 100;
    font-size: .8rem;
}

.txt-card2 {
    text-align: center;
    font-weight: 100;
    font-size: 1rem;
    color: #8B8B8B;
    margin: 0 0 20px 0;
}

.txt-card-alert {
    padding: 10px 20px 10px 20px;
    font-weight: 100;
    background-color: var(--lockton_yellow);
    font-size: 1rem;
    color: var(--lockton_yellow3);
    border-radius: 10px;
    margin: 0 0 20px 0;
}

.txt-card-folio {
    font-weight: 600;
    font-size: 1.3rem;
}

.h1-home {
    font-size: 30px;
    font-weight: 100;
}

.h2-home {
    padding: 10px 0 0 0;
    font-size: 24px;
    font-weight: 100;
}

.doctos {
    font-size: 23px;
    padding-left: 20px;
    vertical-align: middle;
    color: var(--lockton_red);
}

.doctos2 {
    font-size: 25px;
    vertical-align: middle;
    color: var(--lockton_blue);
}

.tabladoctos {
    max-width: 100%;
}



a {
    text-decoration: none;
    color: var(--lockton_blue);
}

    a:hover {
        color: var(--lockton_jet);
    }

/* Iconos Lockton */

.icon {
    /* use !importante para navegadores que cambian la extensión de las fuentes */
    font-family: 'lockton_gmm' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Para el despliegue Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon {
    margin-right: 2px;
}

.icon-terapias .path1:before {
    content: "\e900";
    color: rgb(54, 54, 54);
}

.icon-terapias .path2:before {
    content: "\e901";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-terapias .path3:before {
    content: "\e902";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-terapias .path4:before {
    content: "\e903";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-terapias .path5:before {
    content: "\e904";
    margin-left: -1em;
    color: rgb(250, 250, 250);
}

.icon-terapias .path6:before {
    content: "\e905";
    margin-left: -1em;
    color: rgb(250, 250, 250);
}

.icon-terapias .path7:before {
    content: "\e906";
    margin-left: -1em;
    color: rgb(249, 249, 249);
}

.icon-terapias .path8:before {
    content: "\e907";
    margin-left: -1em;
    color: rgb(249, 249, 249);
}

.icon-terapias .path9:before {
    content: "\e908";
    margin-left: -1em;
    color: rgb(250, 250, 250);
}

.icon-terapias .path10:before {
    content: "\e909";
    margin-left: -1em;
    color: rgb(249, 249, 249);
}

.icon-terapias .path11:before {
    content: "\e90a";
    margin-left: -1em;
    color: rgb(249, 249, 249);
}

.icon-terapias .path12:before {
    content: "\e90b";
    margin-left: -1em;
    color: rgb(249, 249, 249);
}

.icon-terapias .path13:before {
    content: "\e90c";
    margin-left: -1em;
    color: rgb(252, 252, 252);
}

.icon-terapias .path14:before {
    content: "\e90d";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-reembolso .path1:before {
    content: "\e90e";
    color: rgb(54, 54, 54);
}

.icon-reembolso .path2:before {
    content: "\e90f";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-reembolso .path3:before {
    content: "\e910";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-reembolso .path4:before {
    content: "\e911";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-reembolso .path5:before {
    content: "\e912";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-reembolso .path6:before {
    content: "\e913";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-reembolso .path7:before {
    content: "\e914";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.icon-reembolso .path8:before {
    content: "\e915";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.icon-reembolso .path9:before {
    content: "\e916";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-reembolso .path10:before {
    content: "\e917";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.icon-reembolso .path11:before {
    content: "\e918";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.icon-reembolso .path12:before {
    content: "\e919";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-quimioterapias:before {
    content: "\e91a";
}

.icon-programacion .path1:before {
    content: "\e91b";
    color: rgb(54, 54, 54);
}

.icon-programacion .path2:before {
    content: "\e91c";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.icon-programacion .path3:before {
    content: "\e91d";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-programacion .path4:before {
    content: "\e91e";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.icon-menores .path1:before {
    content: "\e91f";
    color: rgb(54, 54, 54);
}

.icon-menores .path2:before {
    content: "\e920";
    margin-left: -1em;
    color: rgb(255, 255, 255);
}

.icon-medicamentos:before {
    content: "\e921";
}

.icon-estudios .path1:before {
    content: "\e922";
    color: rgb(234, 229, 229);
}

.icon-estudios .path2:before {
    content: "\e923";
    margin-left: -1em;
    color: rgb(234, 229, 229);
}

.icon-estudios .path3:before {
    content: "\e924";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path4:before {
    content: "\e925";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path5:before {
    content: "\e926";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path6:before {
    content: "\e927";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path7:before {
    content: "\e928";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path8:before {
    content: "\e929";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path9:before {
    content: "\e92a";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path10:before {
    content: "\e92b";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path11:before {
    content: "\e92c";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path12:before {
    content: "\e92d";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path13:before {
    content: "\e92e";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path14:before {
    content: "\e92f";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path15:before {
    content: "\e930";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path16:before {
    content: "\e931";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path17:before {
    content: "\e932";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path18:before {
    content: "\e933";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path19:before {
    content: "\e934";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path20:before {
    content: "\e935";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path21:before {
    content: "\e936";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path22:before {
    content: "\e937";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path23:before {
    content: "\e938";
    margin-left: -1em;
    color: rgb(54, 54, 54);
}

.icon-estudios .path24:before {
    content: "\e939";
    margin-left: -1em;
    color: rgb(254, 254, 254);
}

.icon-alerta:before {
    content: "\e93a";
}

.icon-arrow_left:before {
    content: "\e93b";
}

.icon-arrow-right:before {
    content: "\e93c";
}

.icon-download:before {
    content: "\e93d";
}

.icon-full_arrow_left:before {
    content: "\e93e";
}

.icon-help:before {
    content: "\e93f";
}

.icon-hoja:before {
    content: "\e940";
}

.icon-imagen:before {
    content: "\e941";
}

.icon-perfil:before {
    content: "\e942";
}

.icon-ok:before {
    content: "\e943";
}

.icon-mensaje:before {
    content: "\e944";
}

.icon-mas:before {
    content: "\e945";
}

.icon-warn_triang:before {
    content: "\e946";
}

.icon-warn_circle:before {
    content: "\e947";
}

.icon-upload:before {
    content: "\e948";
}

.icon-trash:before {
    content: "\e949";
}

.icon-sobre:before {
    content: "\e94a";
}

.icon-eye_open:before {
    content: "\e94b";
}

.icon-eye_closed:before {
    content: "\e94c";
}

.img_login {
    width: 100%;
    height: auto;
}

.img_folio {
    background-image: url("../imgs/doctora.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.txt_folio {
    border-left: 0.1rem solid #ffffff;
    color: var(--lockton_blue);
    font-size: 2rem;
    padding: 20px 0 10px 0;
}

.fecha_folio {
    color: #ffffff;
    font-size: .8rem;
}

.txt_tramite {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 100;
    padding: 20px 0 20px 0;
}

.txt-status1 {
    margin: 20px 0 20px 0;
    background-color: #d6f1fb;
    border-color: var(--lockton_blue);
    border: solid 1px;
    color: var(--lockton_blue);
    border-radius: 8px;
    padding: 5px 10px 5px 10px;
}

.txt-status2 {
    margin: 20px 0 20px 0;
    background-color: #e1d0ed;
    border-color: var(--lockton_purple);
    border: solid 1px;
    color: var(--lockton_purple);
    border-radius: 8px;
    padding: 5px 10px 5px 10px;
}

.txt-status3 {
    margin: 20px 0 20px 0;
    background-color: #dadada;
    border-color: var(--lockton_jet);
    border: solid 1px;
    color: var(--lockton_jet);
    border-radius: 8px;
    padding: 5px 10px 5px 10px;
}

.txt-status4 {
    margin: 20px 0 20px 0;
    background-color: var(--lockton_blue);
    border-color: var(--lockton_blue);
    border: solid 1px;
    color: #ffffff;
    border-radius: 8px;
    padding: 5px 10px 5px 10px;
}

.txt-status5 {
    margin: 20px 0;
    background-color: #ECA0A8;
    border-color: #B64553;
    border: solid 1px;
    color: #B64553;
    border-radius: 8px;
    padding: 5px 10px;
}

.img_red {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.table {
    background-color: transparent;
}

td {
    font-weight: 100;
    font-size: .9rem;
}



/* Estilos generales */
body {
    font-family: Sarabun, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('../imgs/background.jpg');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: right;
    background-attachment: fixed;
}

/* Estilo del encabezado */
.header {
    background-color: black;
    color: white;
}

/* Logo */
.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

/* Botones del encabezado */
.btn-outline-light {
    border-color: white;
    color: white;
}

    .btn-outline-light:hover {
        background-color: white;
        color: black;
    }

/* Secciones internas */
.bg-light {
    background-color: #f8f9fa !important;
    text-align: center;
    font-weight: bold;
}

/* Botones de opciones */
.boton-primario {
    background-color: var(--lockton_blue);
    border-color: var(--lockton_blue);
    color: var(--lockton_white);
    padding: 10px;
}

    .boton-primario:hover {
        background-color: var(--lockton_white);
        border-color: var(--lockton_blue);
        color: var(--lockton_blue);
        padding: 10px;
    }

.boton-blanco {
    background-color: var(--lockton_white);
    border-color: var(--lockton_blue);
    color: var(--lockton_blue);
    padding: 10px;
}

.bot-tansp {
    background-color: var(--lockton_white);
    border-color: var(--lockton_blue);
    color: var(--lockton_blue);
    padding: 10px;
}

.bot-tramite {
    background-color: transparent;
    border-color: var(--lockton_blue);
    border: none;
    color: black;
    padding: 10px;
}

.bot-tramite-active {
    background-color: transparent;
    border-color: var(--lockton_blue);
    border: none;
    padding: 10px;
    border-bottom: 2px solid;
    color: var(--lockton_blue);
}


.bot-card {
    background-color: transparent;
    border: none;
    color: var(--lockton_blue);
    font-size: 1.4rem;
    padding: 10px;
}

.bot-tansp:hover {
    background-color: var(--lockton_blue);
    border-color: var(--lockton_blue);
    color: var(--lockton_white);
    padding: 10px;
}

.bot-icon {
    height: 25px;
    margin-right: 20px
}

.bot-icon2 {
    height: 32px;
    margin-right: 17px;
    margin-left: -2px;
}


.boton-tramite {
    background-color: var(--lockton_white);
    border-bottom: 1px solid var(--lockton_silver);
    color: var(--lockton_black);
    padding: 10px;
    text-align: start;
    border-radius: 0px;
    font-size: 1em;
}

    .boton-tramite:hover {
        background-color: lightgrey .9;
        border-bottom: 1px solid var(--lockton_silver);
    }

.boton-blanco-circ {
    width: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    background-color: var(--lockton_white);
    color: var(--lockton_blue);
    box-shadow: 2px 1px 9px var(--lockton_silver);
    ;
    margin-right: 10px;
}


.boton-blanco-circ2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    color: var(--lockton_blue);
    background: #ffffff;
    border: none;
    outline: none;
    border-radius: 50%;
    margin-right: 20px;
}

.icon-button__badge {
    position: absolute;
    top: 12px;
    right: 38px;
    width: 20px;
    height: 20px;
    background: var(--lockton_blue);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 12px;
}


.boton-blanco:hover {
    background-color: var(--lockton_blue);
    border-color: var(--lockton_white);
    color: var(--lockton_white);
    padding: 10px;
}

.boton-blanco:enabled {
    background-color: var(--lockton_blue);
    border-color: var(--lockton_white);
    color: var(--lockton_white);
    padding: 10px;
}

.boton-blanco-circ:hover {
    background-color: var(--lockton_blue);
    border-color: var(--lockton_white);
    color: var(--lockton_white);
    margin-right: 10px;
}

.boton-blanco-circ2:hover {
    background-color: var(--lockton_blue);
    color: var(--lockton_white);
    margin-right: 20px;
}

.texto-primario {
    color: #007bff;
    text-decoration: none;
}

.text-input {
    padding: 10px;
    color: var(--lockton_jet);
    border: 1px solid var(--lockton_silver);
}

    .text-input:disabled {
        padding: 10px;
        color: var(--lockton_silver);
        border: 1px solid var(--lockton_silver);
    }

.text-input2 {
    padding: 10px;
    height: 120px;
    color: var(--lockton_jet);
    border: 1px solid var(--lockton_silver);
}

    .text-input2:disabled {
        padding: 10px;
        height: 120px;
        color: var(--lockton_silver);
        border: 1px solid var(--lockton_silver);
    }

.titles {
    color: black;
}

.titulos {
    width: 80%;
    border: solid var(--lockton_blue);
    border-width: 0px 0px 2px 0px;
    margin-left: 10px;
}

.subt-col {
    font-weight: 700;
    font-size: 1.2rem;
    padding-left: .4rem;
}

.p-col {
    text-align: start;
    padding-left: 10px;
    font-weight: lighter;
}

text-input::placeholder {
    opacity: 0.5;
}

.spacing {
    padding: 20px 0 10px 0;
}

.spacing2 {
    margin-top: 30px;
}

.iconbig {
    color: var(--lockton_blue);
    font-size: 60px;
}

textarea {
    resize: none;
}

#count_message {
    color: darkgray;
    margin-top: -20px;
    margin-right: 5px;
}

.requerido {
    color: var(--lockton_silver);
}

/*  FORMSTEPS */
.form-steps {
    width: 100%;
    clear: both;
}

    .form-steps:before, .form-steps:after {
        display: table;
        content: "";
    }

    .form-steps:after {
        clear: both;
    }

.form-steps__step {
    width: 33%;
    float: left;
    padding: 1rem;
    text-align: center;
    position: relative;
}

    .form-steps__step:after {
        content: "";
        /*background: #eee;*/
        height: 0.2rem;
        top: 2.29rem;
        left: 50%;
        width: 100%;
        display: block;
        position: absolute;
        z-index: 1;
    }

.form-steps__step--last:after {
    display: none;
}

.form-steps__step--active .form-steps__step-circle {
    background: #7cb342;
    border: 1px solid #33691e;
    color: #fff;
}

.form-steps__step--alerta .form-steps__step-circle {
    background: #EF8035;
    border: 1px solid #EF8035;
    color: #fff;
}

.form-steps__step--completed:after {
    background: #7cb342;
}

.form-steps__step--completed .form-steps__step-circle {
    background: #7cb342;
    border: 1px solid #33691e;
    color: #fff;
}

    .form-steps__step--completed .form-steps__step-circle .form-steps__step-number {
        display: none;
    }

    .form-steps__step--completed .form-steps__step-circle .form-steps__step-check {
        display: inline-block;
    }

.form-steps__step-circle {
    background: #000000;
    border: 2px solid #bdbdbd;
    line-height: 2.4rem;
    border-radius: 50%;
    height: 2.5rem;
    width: 2.5rem;
    text-align: center;
    color: #bdbdbd;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.form-steps__step-check {
    display: none;
}

.form-step__step-name {
    margin-top: 0.8rem;
    display: inline-block;
    font-size: 1rem;
    line-height: 1.4rem;
}

.form-step__step-name-alerta {
    color: #EF8035;
    margin-top: 0.8rem;
    display: inline-block;
    font-size: 1rem;
    line-height: 1.4rem;
}

/*  CIRCULO PASOS */
.form-steps__step-circle {
    background: #eee;
    border: 1px solid #bdbdbd;
    line-height: 2.4rem;
    border-radius: 50%;
    height: 2.5rem;
    width: 2.5rem;
    text-align: center;
    color: #bdbdbd;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

/*  Esconde el check */
.form-steps__step-check {
    display: none;
}


/* Estilos envio de archivos */

.dropzone {
    border: 0.2rem dashed var(--lockton_blue);
    padding: 2rem;
    color: var(--lockton_blue);
    border-radius: 0.55rem;
    background-color: #fff;
    text-align: center;
    font-size: 1.2rem;
    transition: 0.25s background-color ease-in-out;
    cursor: pointer;
}

    .dropzone-dragging, .dropzone:hover {
        background-color: #e0eef3;
    }

.dropzone-icon {
    max-width: 75px;
    display: block;
    margin: 0 auto 1.5rem;
}

.dropzone-input {
    display: none;
}

.dropzone-success {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.progress {
    background-color: transparent;
}

.alert-danger {
    border: 0.1rem solid var(--lockton_red);
    padding: 1rem;
    color: var(--lockton_red);
    border-radius: 0.55rem;
    background-color: #ffffff;
    text-align: center;
    font-size: 1.2rem;
    transition: 0.25s background-color ease-in-out;
    cursor: pointer;
}

.alert-success {
    border: 0.1rem solid var(--lockton_silver);
    padding: 2rem;
    color: var(--lockton_black);
    border-radius: 0.55rem;
    background-color: #ffffff;
    text-align: center;
    font-size: 1.2rem;
    transition: 0.25s background-color ease-in-out;
    cursor: pointer;
}


.doctores {
    height: 400px;
    margin-top: -100px;
}

.separa-columna {
    margin-left: 20px;
}

.ancho1 {
    max-width: 40%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ancho {
    max-width: 20%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.numgrande {
    max-width: 60%;
    font-size: 2vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.numchico {
    padding-top: 1vw;
    max-width: 40%;
    font-size: 1vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer {
    max-width: 80%;
    margin-left: 5%;
    padding: 0 0% 20px 10%;
    margin-bottom: 0px;
    border-top: solid 1px;
}


@media only screen and (max-width: 600px) {
    .doctores {
        width: 100%;
        margin-top: -50px;
        height: 250px;
    }

    .separa-columna {
        margin-left: -2px;
    }

    .card {
        max-width: 100%;
    }

    .card2 {
        max-width: 100%;
    }

    table {
        min-width: 1000px;
    }

    .tabladoctos {
        max-width: 300px;
    }
}

@media (min-width:600px) and (max-width:900px) {
    .doctores {
        margin-top: -300px;
        margin-left: 200px;
        height: 400px;
    }

    .card2 {
        max-width: 49%;
    }

    .separa-columna {
        margin-left: -2px;
    }
    
}
/*cambios G*/
/*.card {
    max-width: 30%;
}*/

.card2 {
    max-width: 100%;
}

table {
    min-width: 1000px;
}

.tabladoctos {
    max-width: 300px;
}

}

@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }    
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .m-md-l {
        margin-left: 300px; /* Margen por defecto para todos los tamaños */
    }
}

@media (min-width: 576px) {
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }    
}

@media (min-width: 576px) {
    .px-sm-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }
}

.form-steps__step--cancelado {
    margin-left: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .form-steps__step--cancelado .form-steps__step-circle {
        background-color: #FFA726; /* naranja suave */
        color: white;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5px;
    }

    .form-steps__step--cancelado .form-steps__step-number {
        font-size: 18px;
    }

    .form-steps__step--cancelado .form-step__step-name {
        color: #EF6C00; /* naranja fuerte */
        font-weight: 600;
        font-size: 14px;
        text-align: center;
    }