@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;500;700;900&display=swap');

:root {
    --charcoal: #666666;
    --lightGray: #999999;
    --electricPurple: #94278F;
    --eggplant: #552354;
    --yellowGreen: #8CC73F;
    --princetonOrange: #ED7923;
    --copperCoffee: #BD955C;
    --stoneBriar: #D6D1C4;
    --indigoDye: #0E294A;
    --darkUmber: #232729;
    --softMagenta: #E91976;
    --sunnyYellow: #FDD106;
    --darkSpringGreen: #00764B;
    --seaGreen: #33BEAD;
    --blueSapphire: #005F85;
}



/** base elements **/
html, body {
    padding: 0;
    margin: 0;
    font-family: "Lato", serif;
    font-size: 16px;
    height: 100%;
    /*overflow-x: hidden;*/
}

svg {
    max-height: 100vh;
}

svg circle:hover {
    cursor: pointer;
}

.rp-1 {
    padding-right: 1em;
}

.rp-2 {
    padding-right: 2em;
}

.lp-2 {
    padding-left: 2em;
}

h1, h2 {
    color: var(--electricPurple);;
    font-weight: 700;
    line-height: 32px;
    text-align: left;
}

h2 {
    font-size: 35px;
}


.rotate90 {
    -webkit-transform: rotateY(90deg);
    -webkit-transform-style: preserve-3d;
    -ms-transform: rotateY(90deg);
    -ms-transform-style: preserve-3d;
    transform: rotateY(90deg);
    transform-style: preserve-3d;
}

/** general/body classes **/
.hidden {
    display: none !important;
}

.playerwidget {
    text-align: center;
    margin-top:15px;
}

.playerwidget button {
    cursor: pointer;
    color: var(--yellowGreen);
    border-radius: 4px;
    font-size: 1vh;
    border: 1px solid var(--yellowGreen);
    padding: 12px;
    text-align: center;
}

.playerwidget button.active {
    background-color: var(--yellowGreen);
    color: var(--charcoal);
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
    padding-right: 7px;
}

.stop-scrolling #pocnavitems {
    padding-right: 56px;
}

.stop-scrolling #main {
    padding-right: 12px;
}

.container-fluid {
    padding: 0;
    width: calc( 100% - 2vw);
    margin-left: 2vw;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

#tooltip {
    position: absolute;
    background: rgba(0, 0, 0, .95);
    border-radius: 3px;
    box-shadow: -3px 3px 15px #262626;
    color: var(--darkSpringGreen);
    padding: 4px 2px;
    font-family: "Lato", serif;
    font-size: 2em;
    max-width: 400px;
    z-index: 1000000;
}

/** side color bars **/
#bar-container {
    width: auto;
    position: fixed;
    z-index: 1000;
    top:0;
}

#green-color-bar {
    width: 1vw;
    height: 100vh;
    background-color: var(--yellowGreen);
    float: left;
}

#grey-color-bar {
    width: 1vw;
    height: 100vh;
    background: linear-gradient(45deg, #686868, #979797);
    float: right;
}


/** logo and hamburger **/
#pocnavHolder {
    padding: 20px 0;
    border-bottom: 1px solid #808080;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    z-index: 100001;
}

#pocnavHolder img {
    height: 30px;
}

#logo img, #thankyoulogo img {
    width: 100%;
    height: auto;
    max-width: 300px;
    margin-left: 30px
}

/** section parent **/
#main {
    overflow: hidden;

}


.nswers_section {
    overflow:hidden;
    height: 100vh;
    padding-top: 31px;
    font-family: "Lato", serif;
    font-weight: 400;
    line-height: 1.4em;
    text-align: justify;
    min-height: 500px;
    background-color: white;
    padding-bottom: 100px;
    opacity: 0;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.nswers_section:nth-child(even) {
    background-color: var(--indigoDye);
    color: #fff;
}

.nswers_section:nth-child(even) .table tr:nth-child(even) {
    color: #000;
}

.nswers_section:nth-child(even) text {
    fill: #FFFFFF;
}

.nswers_section:nth-child(even) a {
    color: #FFFFFF;
}

.nswers_section > div > div {
    overflow: auto;
    max-height: 75vh;
}

.purplebg {
    width:100%;
    height: 120px;
    background-image:url(/assets/images/nswers_purple_bg.png);
    background-size: 415px;
    position:absolute;
    top:65px;
}
.nswers_section.visible {
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

/** first slide - title and intro **/

#main-title, #subtitle {
    font-weight: bold;
    padding-top: 2vw;
    padding-bottom: 0;
    color: var(--charcoal);
    font-size: 3vw;
    line-height: 110%;
    overflow:hidden;
}

#subtitle {
    font-weight: normal;
    font-style: italic;
    padding-top: 0;
    font-size: 2.75vw;
    width: 90%;

}

#LogoTitleHolder #subtitle p {
    margin:5px;
    max-width: 50vw;
    text-align: left;
}

/** Intro slide **/

#LogoTitleHolder p {
    max-width: 95%;
}
#IntroHolder svg {
    max-width: 700px;
}

/** gender **/

#studentgender {
    max-width: 500px;
}

/** race/ethnicity **/
#studentrace {
    max-width:500px;
}

/** graduation **/
#studentgraduation { max-width:500px;}
#graduationlegend {
    max-width: 700px;
}

#genderlegend {
    height:100px;
}

/*persistence*/
#postsecondarypersistence {
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

/* pathway */
#PathwaysVizHolder {
    text-align:center;
    max-height: 100vh;
    overflow: hidden;
}

#PathwaysHolder > div {
    padding-left: 1rem;
    padding-right: 1rem;
}

#learnmorepathways {
    text-decoration: underline;
}

#learnmorepathways:hover {
    opacity: 0.5;
}

#current_time {
    font-size: 6vh;
    line-height: 125%;
    color: var(--charcoal);
    text-align: center;
}

#PathwaysHolder .pathwaystext {
    overflow: auto;
    padding-right:10px;
}

/* The Modal (background) */
.learnmore_pathways_modal, .playerhelp_modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.learnmore_pathways_modal_content, .playerhelp_modal_content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    color: var(--charcoal);
}

/* The Close Button */
.learnmore_pathways_close, .playerhelp_close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.learnmore_pathways_close:hover, .playerhelp_close:hover,
.learnmore_pathways_close:focus, .playerhelp_close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.slidecontainer {
    width: 100%; /* Width of the outside container */
    text-align: center;
}

/* The slider itself */
#pathwaysslider {
    width: 80%; /* Full-width */
    color: #ffffff;
    outline: none; /* Remove outline */
    opacity: 0.5; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: opacity .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

#studentpathways {
    background-color: #ececec;
}


/** industry transitions **/
#industryTransitionsSlider {
    width: 100%; /* Full-width */
    color: #ffffff;
    outline: none; /* Remove outline */
    opacity: 0.5; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition:opacity .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}



.transitionplayer > div {
    margin-top:15px;
}



/** 2yr and 4yr */

.table {
    border-collapse: collapse;
    width: 100%;
}

.table td, .table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align:left;
}

.table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.table tr:hover {
    background-color: #ddd;
}

.table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: var(--yellowGreen);
    color: white;
}


#backtotop {
    display: block; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px;
    right: 30px;
    z-index: 99; /* Make sure it does not overlap */
    border: 2px solid var(--electricPurple);
    outline: none;
    background-color: #FFFFFF;
    color: var(--electricPurple); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    opacity:0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#backtotop:hover {
    opacity:1;
}

#twoyeardegrees .active, #fouryeardegrees .active {
    stroke-width:15px;
}

table tbody tr {
    cursor: pointer;
}

table tbody tr.active {
    color: #FFFFFF!important;
}

svg {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/** responsive css **/

@media only sscreen and (max-width: 1300px) {
    #pocnavHolder {
        position: relative;
        margin-top:-100px;
    }

    .purplebg {
        margin-top:0;
    }

    #main > div {
        padding-top:20px;
        padding-bottom:20px;
        padding-left: 10px;
        padding-right: 10px;
        min-height: 100vh;
        height: auto;
        /*min-height: 695px;*/
    }

    #main > #LogoTitleHolder {
        /* padding-bottom:120px;*/
    }

    #PathwaysHolder .pathwaystext {
        max-height: 330px;
        overflow: auto;
    }

}

/** xs **/
@media only screen and (max-width: 48em) {
    .nswers_section, .nswers_section > div > div {
        height: auto;
        max-height: none;
        opacity: 1;
    }

    #FourYearDegreesHolder > div + div, #TwoYearDegreesHolder > div {
         padding: 10px 15px;
    }
    .xs-first {
        order: -1;
    }

    .purplebg {
        position: relative;
        top: auto;
    }
}

@media only screen and (max-width: 64em) {
    .sm-first {
        order:-1;
    }

    #LogoTitleHolder {
        padding-top:0;
    }
    #pocnavHolder {
        position:relative;
    }


}

@media only screen and (max-width: 75em) {
    .md-first {
        order:-1;
    }
}

@media only screen and (max-height: 740px) {
    #LogoTitleHolder {
        padding-top:160px;
    }
}

@media only screen and (max-height: 675px) {
    #pocnavHolder {
        position:relative;
    }
    #LogoTitleHolder {
        padding-top: 0;
    }
    .purplebg {
        display:none;
    }

    .nswers_section {
        height: auto;
        min-height: 100vh;
        padding-top: 50px;
        padding-bottom:50px;
    }

    .nswers_section > div > div {
        height: auto;
    }

    .nswers_section > div > div.svgholder{
        max-height: initial;
    }
}