@charset "utf-8";

/* ########################################################################################################################################## */
/* V12 QPF STYLES */
/* Document Version 12.02 */
/* minify with: https://cssminifier.com/
/* ########################################################################################################################################## */


#qpf-wrapper {
    background: -webkit-linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.4) 100%),
                -webkit-linear-gradient(315deg, #406BAD 40%, #003A92 40%, #003A92 100%);
                /* (180deg, rgba(2,0,36,0) 0%, rgba(0,0,6,1) 94%, rgba(0,0,0,1) 100%);*/
    border-radius: 0.5rem;
    width: 100%;
    color: white;
    }
    #qpf-wrapper.qpf-home {
        background: none !important;
        color: #0046ad;
        }
    #qpf-wrapper form {margin-bottom: 0;}
    #qpf-wrapper.qpf-home form {margin-bottom: 4rem;}



/* ########################################################################################################################################## */
/* QPF grid styles start  */

#qpf-grid-container {
    display: inline-grid;
    grid-template-columns: auto auto 1fr auto auto 1fr 1fr 1fr;
    column-gap: 10px;
    align-items: center;
    font-weight: 400;
    padding: 50px;
}

#qpf-grid-container.qpf-home  {
    padding: 0;
    font-weight: bold;
}

/*  .qpf-item-1a {padding-right:20px;}
    .qpf-item-2a {padding-right:20px;}*/
    .qpf-item-1b {padding-right:20px;}
    .qpf-item-2b {padding-right:20px;}




    /* QPF on product pages, not on home page, behave differently for higher res */
    @media only screen and (min-width: 1351px) {
        #qpf-grid-container:not(.qpf-home) .qpf-item-1c {padding-right:45px;}
        #qpf-grid-container:not(.qpf-home) .qpf-item-2c {justify-self: end;}
        #qpf-grid-container:not(.qpf-home) .qpf-item-2d {justify-self: center;}
        #qpf-grid-container:not(.qpf-home) .qpf-item-2e {justify-self: start;}
    }
    @media only screen and (max-width: 1350px) and (min-width: 851px)  {	
        #qpf-grid-container {
            grid-template-columns: auto auto auto auto auto;
            grid-template-rows: 60px 60px;
            justify-items: start;
        } 
        .qpf-item-2a, .qpf-item-2b, .qpf-item-2c, .qpf-item-2d, .qpf-item-2e {
            grid-row-start: 2;
            grid-row-end: 3;
        }
    }
    
    /* QPF on home page, not on prod pages, behave differently for lower res */
    @media only screen and (min-width: 851px)  {	
        #qpf-grid-container.qpf-home {
            grid-template-columns: auto auto auto auto auto;
            grid-template-rows: 60px 60px;
            justify-items: start;
        } 
        #qpf-grid-container.qpf-home .qpf-item-2a, 
        #qpf-grid-container.qpf-home .qpf-item-2b, 
        #qpf-grid-container.qpf-home .qpf-item-2c, 
        #qpf-grid-container.qpf-home .qpf-item-2d, 
        #qpf-grid-container.qpf-home .qpf-item-2e   {
            grid-row-start: 2;
            grid-row-end: 3;
        }
    }


    /* QPF everywhere behaves like this for lowest res */

    @media only screen and (max-width: 850px) {	
        #qpf-grid-container {
            display: grid;
            width: auto;
            max-width: 350px; 
            padding:50px 10px;
            margin:0 auto;
            grid-template-columns: 60px auto;
            grid-template-rows: 60px 60px 60px 60px 60px 60px;
            justify-items: center;
        } 
            .qpf-item-1a {}
            .qpf-item-1b {justify-self: start;}
            .qpf-item-1c { 
                grid-column-start: 1;
                grid-column-end: 3;
            }
            .qpf-item-2a {
                grid-row-start: 3;
                grid-row-end: 4;
            }
            .qpf-item-2b { 
                justify-self: start;
                grid-row-start: 3;
                grid-row-end: 4;
                }
            .qpf-item-2c { 
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 4;
                grid-row-end: 5;
            }
            .qpf-item-2d {
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 5;
                grid-row-end: 6;
            }
            .qpf-item-2e {
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 6;
                grid-row-end: 7;
            }
        }


/* QPF grid styles end --------------------------------------------------------------------- */
/* ########################################################################################################################################## */

/* qpf external link symbol gets special treatmet so it doesn't wrap to next line alone */

.qpf-external:after {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230046ad' viewBox='0 0 32 32'%3E%3Cpath d='M12 0v5h11.5l-5 5H0v22h22V17.5l-2 2V30H2V12h14.5l-7.8 7.7 3.6 3.6L27 8.5V20h5V0z'/%3E%3C/svg%3E");
    background-size: 82% 82%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    content: " ";
    height: 1em;
    width:  1.125em;
    margin-left:    0.2rem;
    margin-right:   -1.325em;   /* width + margin-left, stops the icon from ever wrapping by itself to next line */
    }
    .qpf-external.light:after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 32 32'%3E%3Cpath d='M12 0v5h11.5l-5 5H0v22h22V17.5l-2 2V30H2V12h14.5l-7.8 7.7 3.6 3.6L27 8.5V20h5V0z'/%3E%3C/svg%3E");
        }
    


.numberCircle {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    padding: 4px;
    background: rgba(255,255,255,0.2);
    border: 3px solid #fff;
    color: #fff;
    text-align: center;
    font: 16px Arial, sans-serif;
    font-weight: bold;
    display: inline-block;
    }
    .qpf-home .numberCircle {
        background: rgba(255,255,255,0.8);
        border: 3px solid #0046ad;
        color: #0046ad;
        }



        
/* qpf form styles start */

#qpf-grid-container button, #qpf-grid-container input[type=button] {
    min-width:125px;
    line-height: 1.9;
    padding: .35em .5em .35em .5em;
    margin: 0;
    text-transform: none;
}


.select-css {
    /*display: inline;*/
    font-size: 0.9rem;
    font-family: sans-serif;
    font-weight: normal;
    color: #fff;
    line-height: 1.9;
    padding: .4em 1.4em .3em .8em;
    width: 125px;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #3EADCB;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: 4px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
        linear-gradient(to bottom, #3EADCB 0%,#3EADCB 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .45em auto, 100%;
    margin: 0 auto;
    cursor: pointer;
}


.select-css option          {font-weight:normal; color: #003A92;}
.select-css::-ms-expand     {display: none;}
.select-css:focus           { outline: 3px solid #F5A321; }
.select-css:hover           { border-color: #FFFFFF; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"),  linear-gradient(to bottom, #3EADCB 0%,#3EADCB 100%);}
.qpf-home .select-css:hover { border-color: #38374A; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23FFFFFF%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"),  linear-gradient(to bottom, #38374A 0%,#38374A 100%);}