/* ICONOS */

@import url("../lib/FluentIcons/FluentSystemIcons.css");



/* RESET */

	html, body, div, span, applet, object,iframe, h1, h2, h3, h4, h5, h6, p, blockquote,pre, a, abbr, acronym, address, big, cite,code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b,u, i, center, dl, dt, dd, ol, ul, li, fieldset,form, label, legend, table, caption, tbody,tfoot, thead, tr, th, td, article, aside,canvas, details, embed, figure, figcaption,footer, header, hgroup, menu, nav, output, ruby,section, summary, time, mark, audio, video {

		margin: 0;

		padding: 0;

		border: 0;

		font-size: 100%;

		font: inherit;

		vertical-align: baseline;

	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

		display: block; }

	body {

		line-height: 1; }

	ol, ul {

		list-style: none; }

	blockquote, q {

		quotes: none; }

	blockquote:before, blockquote:after, q:before, q:after {

		content: '';

		content: none; }

	table {

		border-collapse: collapse;

		border-spacing: 0; }

	body {

		text-size-adjust: none;

		-webkit-text-size-adjust: none; }

	input:focus, textarea:focus, select:focus,

	input, textarea, select {

		-moz-appearance: none;

		-webkit-appearance: none;

		-ms-appearance: none;

		appearance: none;

		outline-offset: 0;

	}

    a {

		border-bottom: none;

		color: #0078d4;

        display: flex;

		text-decoration: none;

		cursor: pointer;

        outline: none;

	}
    #PinR #faq .c-drawer>div>p>a {
    background: linear-gradient(90.51deg, #008575 -29.75%, #30e5d0 139.03%);
    color: lemonchiffon;
    width: fit-content;
    padding: 0rem 0.25rem;
    border-radius: 1rem;
}

    :focus { 

        outline-color: transparent; 

        outline-style: none;

    }

/* BOX MODEL */

	*, *:before, *:after {

		-moz-box-sizing: border-box;

		-webkit-box-sizing: border-box;

		box-sizing: border-box;

		transition: all .25s ease;

	}

    * {

        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    }

/* BASIC */

    body {

        background-color: #ffffff;

        color: #282828;

    }

    body, input, select, textarea, button {

        font-family: SegoeUI,Segoe UI;

        font-weight: 300;

        font-size: 1rem !important;

    }

    strong, b {

        font-weight: 600;

        text-transform: uppercase;

    }

    h1, h2, h3, h4, h5, h6 {

        letter-spacing: 0.175em;

        line-height: 1.75;

        text-transform: uppercase;

    }

        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {

            color: inherit;

            text-decoration: none;

        }

    h1 {

        font-size: 3rem;

        letter-spacing: -0.05em;

        line-height: 1.1;

        text-transform: none;

    }

    h2 {

        font-size: 1.25rem;

    }

    h3 {

        font-size: 0.875rem;

    }

    h4 {

        font-size: 0.875rem;

    }

    h5 {

        font-size: 0.75rem;

    }

    h6 {

        font-size: 0.625rem;

    }

    li {display: block;}

    sup {

        text-transform: lowercase;

    }

    input:disabled {

        cursor: no-drop;

    }

    input[readonly]{

        cursor: wait;

        background: #c1c1c1 !important;

        color: #818181 !important;

        border-color: transparent  !important;

    }

    .hidden{

        display: none;

    }

/* ACRYLIC */

    [class*="Acrylic"] {

        -webkit-backdrop-filter: blur(30px) saturate(175%);

        backdrop-filter: blur(30px) saturate(175%);

    }

    .Acrylic--Light {

        background: rgba(255,255,255,.85) !important;

    }
/* PROGRESS BAR */
    #progressbar{
        border-radius: 0.5rem;
        height: 1rem;
        background: #eee;
    }
    #progressbar #loading{
        position: relative;
        height: 1rem;
        background: linear-gradient(90.51deg,#008575 -29.75%,#30e5d0 139.03%);
        color: #FFF;
        border-radius: 0.5rem;
        min-width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
/* Mensae de Alertas */
    #Noticia{
		background: rgba(238, 238, 238, 0.25);
		backdrop-filter: saturate(180%) blur(10px);
		background-color: rgba(255,255,255,0.25);
		border-radius: 0.5em 0 0 0.5em;
		color: #000;
		max-width: 50%;
		position: absolute;
		padding: 0.8em;
		right: 0;
		top: 10%;
		z-index: 2;
	}
/* SPINNERS */

    .Glifo-Spinner {

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: center;

    }

    .Glifo-Spinner .Glifo-Spinner-label{

        color:rgba(0, 113, 227, 1)

    }.Glifo-Spinner .Glifo-Spinner-circle {

        border-color: 

        rgba(0, 113, 227, 1)

        rgba(0, 113, 227, 25%) 

        rgba(0, 113, 227, 25%) ;

    }



    .Glifo-Spinner.Light .Glifo-Spinner-label{

        color:#FFF;

    }.Glifo-Spinner.Light .Glifo-Spinner-circle {

        border-color: 

        rgba(255, 255, 255, 1) 

        rgba(255, 255, 255, 0.25) 

        rgba(255, 255, 255, 0.25);

    }

    .Glifo-Spinner.Dark .Glifo-Spinner-label{

        color:#000;

    }.Glifo-Spinner.Dark .Glifo-Spinner-circle {

        border-color: 

        rgba(0, 0, 0, 1) 

        rgba(0, 0, 0, 0.25) 

        rgba(0, 0, 0, 0.25);

    }



    .Glifo-Spinner.Right{

        flex-direction: row-reverse;

    }

    .Glifo-Spinner.Right .Glifo-Spinner-label{

        margin: 0px 0.5rem 0px 0px;

    }



    .Glifo-Spinner.Left .Glifo-Spinner-label{

        margin: 0px 0px 0px 0.5rem;

    }



    .Glifo-Spinner.S .Glifo-Spinner-circle{

        width: 1rem;

        height: 1rem;

    }.Glifo-Spinner.S .Glifo-Spinner-label{

        font-size: 1rem;

    }



    .Glifo-Spinner.M .Glifo-Spinner-circle{

        width: 2rem;

        height: 2rem;

    }.Glifo-Spinner.M .Glifo-Spinner-label{

        font-size: 1.3rem;

    }



    .Glifo-Spinner.X .Glifo-Spinner-circle{

        width: 5rem;

        height: 5rem;

    }.ms-Spinner.X .ms-Spinner-label{

        font-size: 1.8rem;

    }



    .Glifo-Spinner-circle {

        box-sizing: border-box;

        border-radius: 50%;

        border-width: 0.125rem;

        border-style: solid;

        border-image: initial;

        animation-name: css-252;

        animation-duration: 1.3s;

        animation-iteration-count: infinite;

        animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);

    }



    @keyframes css-252 {

    0% {transform: rotate(0deg);}

    100%{transform: rotate(360deg);}

    }

/* MIDDLE */

    .Middle{

        padding: 2rem 1rem;

        display: flex;

        flex-direction: column;

        align-items: center;

    }

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

        .Middle{

            padding: 2rem 0.25rem;

        }

    }

/* PIN */

    #Pin{

    max-width: 36rem;

    border-radius: 1rem;

    }

    #divPinTitle{

    padding: 0.5rem 0rem;

    text-align: center;

    border-radius: 1rem;

    margin-bottom: 1rem;

    color: rgba(0,0,0,90%);     

    } 

    #divPinPanel{

    padding: 2rem;

    border-radius: 1rem;



    background: #0071E3;

    background: -moz-linear-gradient(180deg, #0071E3 0%, #0983ff 100%);

    background: -webkit-linear-gradient(180deg, #0071E3 0%, #0983ff 100%);

    background: linear-gradient(180deg, #0071E3 0%, #0983ff 100%);

    }

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

    #divPinPanel {

        padding: 0.5rem;

        border-radius: 1rem;

    }

    }@media screen and (max-width: 480px) {

    #divPinPanel {

        padding: 0.25rem;

    }

    }

    #divPinPanel .pinFiveByFive {

        display: flex;

    }

    #divPinPanel h2 {

        text-align: center;

        margin-bottom: 1rem;

    } 

        #divPinPanel .pinFiveByFive .pinInput {

            text-transform: uppercase;

            border-radius: 0.5rem;

            outline: none;

            height: 3rem;

            width: 100%;

            margin: 0 0.25rem;

            text-align: center;

        }@media screen and (max-width: 480px) {

            .pinFiveByFive .pinInput {

                margin: 0 0.125rem !important;

                font-size: .90rem !important;

            }

        }

        #divPinPanel .Actions {

            display: flex;

            align-items: center;

            margin: 1em 0em 0em 0em;

        }

        /* BOTONES */

            #divPinPanel .Btn1 {

                background: #FFF;

                border: none;

                border-radius: 2em;

                color: #181818;

                height: 3em;

                outline: none;

                padding: 0em 1.125em;

                text-transform: uppercase;

            }#divPinPanel .Btn1:hover,#divPinPanel .Btn1:focus {

                background: #181818;

                color: #FFF;

            }#divPinPanel .Btn1:disabled {

                background: #c1c1c1;

                color: #818181;

            }

        #divPinPanel .Glifo-Spinner{

            margin-left: 1rem;

        }

        

        #divPinPanel[class*="--Light"]{

            color: rgba(0,0,0,90%);

            border: solid 0.25rem rgba(0,0,0,15%);

        }

        #divPinPanel[class*="--Light"] .pinFiveByFive .pinInput {

            border: solid 0.125rem rgba(0,0,0,25%);

            color: rgba(0,0,0,60%);

            background: rgba(255,255,255,25%);

        }

        #divPinPanel[class*="--Light"] .pinFiveByFive .pinInput:hover {

            background: rgba(255,255,255,60%);

        }

        #divPinPanel[class*="--Light"] .pinFiveByFive .pinInput:focus{

            border: solid 0.125rem rgba(0,0,0,60%);

        }



        #divPinPanel,#divPinPanel[class*="--Dark"] {

            color: rgba(255,255,255,90%);

        }

        #divPinPanel[class*="--Dark"] {

            background: rgba(0,0,0,.65) !important;

        }

        #divPinPanel .pinFiveByFive .pinInput ,

        #divPinPanel[class*="--Dark"] .pinFiveByFive .pinInput {

            border: solid 0.125rem transparent;

            color: rgba(255,255,255,60%);

            background: rgba(255,255,255,10%);

        }

        #divPinPanel .pinFiveByFive .pinInput:hover,

        #divPinPanel[class*="--Dark"] .pinFiveByFive .pinInput:hover {

            background: rgba(255,255,255,15%);

        }

        #divPinPanel .pinFiveByFive .pinInput:focus,

        #divPinPanel[class*="--Dark"] .pinFiveByFive .pinInput:focus{

            border: solid 0.125rem rgba(255,255,255,100%);

        }

/* PIN FAQ */

	#PinR{

		max-width: 36rem;

		width: 100%;

		border-radius: 1rem;

		padding: 1rem;

		margin-top: 1rem;

	}

		#PinR #faq .c-drawer{

			background: rgba(255,255,255,.65);

			margin: .5rem 0rem;

			border-radius: 0.5rem;

			box-shadow: rgb(0 0 0 / 13%) 0px 1.6px 3.6px 0px, rgb(0 0 0 / 11%) 0px 0.3px 0.9px 0px;

		}

		#PinR #faq .c-drawer button{

            background: transparent;

            width: 100%;

            border: none;

            padding: 0.75rem;

            display: flex;

            font-size: 1rem;

            align-items: center;

            justify-content: flex-start;

		}#PinR #faq .c-drawer>div{

			border-top: solid 1px rgba(0,0,0,.125);

			padding: 0.75rem;

			

		}#PinR #faq .c-drawer>button[aria-expanded="false"]::after {

			content: "\f2a3" !important;

			position: absolute;

			right: 1rem;

			transform: rotate(0deg);

			transition: transform 0.1s linear 0s;

		}#PinR #faq .c-drawer>button[aria-expanded="true"]::after {

			content: "\f2a3" !important;

			position: absolute;

			right: 1rem;

			transform: rotate(180deg);

			transition: transform 0.1s linear 0s;

		}#PinR #faq .c-drawer>button:hover, .c-drawer>button:focus{

			box-shadow: none !important;

		}#PinR #faq .c-drawer>button:before {

			margin-right: .125rem;

			position: relative !important;

			top: 0 !important;

			-ms-transform: none !important;

			transform: none !important;

			left: 0 !important;

			font-size: 1.5rem;

		}

/* ALERTS */

    #divPinAlert{

        max-width: 36rem;

        display: flex;

        flex-direction: column;

    }

    #divPinAlert i{

        padding: 1rem;

        border-radius: 0.75rem;

        margin-top: 0.5rem;

        width: 36rem;

        display: flex;

        align-items: center;

    }

    #divPinAlert i::before{

        font-size: 1.25rem;

    }

    #divPinAlert i[class^="checkmark"], i[class*="checkmark"]{

        background: rgb(223,246,221,.85);

        color: #000;

    }#divPinAlert i[class^="checkmark"]:before, i[class*="checkmark"]:before {

        color:rgb(16, 124, 16);

    }





    #divPinAlert i[class^="warning"], i[class*="warning"]{

        background: rgb(255,244,206,.85);

        color: #000;

    }#divPinAlert i[class^="warning"]:before, i[class*="warning"]:before {

        color:rgb(121, 119, 117);

    }



    #divPinAlert i[class^="dismiss"], i[class*="dismiss"]{

        background: rgb(253,231,233,.85);

        color: #000;

    }#divPinAlert i[class^="dismiss"]:before, i[class*="dismiss"]:before {

        color:rgb(168, 0, 0);

    }

/* FICHA DE PAGO */

    #FichaDePago {

        max-width: 36rem;

        background: rgba(240,248,255,.9);

        backdrop-filter: blur(1rem);

        box-shadow: rgb(0 0 0 / 16%) 0px 1.6px 3.6px 0px, rgb(0 0 0) 0px 0.3px 0.9px 0px;

        padding: 1rem;

        border-radius: .5rem;

        margin-bottom: 1rem;

    }

    #FichaDePago table {

        border-spacing: 0rem;

        border-collapse: collapse;

        background: white;

        border-radius: 1rem;

        overflow: hidden;

        width: 100%;

        margin: 1rem 0rem;

        position: relative;

      }

      #FichaDePago table * {

        display: flex;

        flex-direction: row;

        align-content: center;

        justify-content: center;

        align-items: center;

        width: 100%;

      }

      #FichaDePago table thead tr {

        height: 4rem;

        background: #00b4c7;

        color: #FFF;

      }

      #FichaDePago table tbody {

        flex-direction: column;

      }

      #FichaDePago table tbody tr {

        height: 3rem;

        border-bottom: solid 0.05rem rgba(0, 0, 0, 0.1);

      }

      #FichaDePago table tbody tr:last-child {

        border: 0;

      }

      #FichaDePago>div>div>a{

        display: flex;

        flex-direction: column;

      }

/* FOOTER */

/* FOOTER */

footer {

    align-items: center;

    background: #fbfbfd;

    display: flex !important;

    justify-content: space-between;

    padding: 0.8em 1em;

}

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

    footer {

        text-align: center;

        padding-bottom: 7em;

    }

    footer img {

        width: 30% !important;

    }

}

footer a {

    display: inline-block;

    margin: 0 5px 0;

    padding: 0 5px;

    font-size: 16px;

    color: #c7c7c7;

    font-weight: 400;

    cursor: pointer;

}

footer img {

    width: 8rem;

}