Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<html>

<head>
    <!-- Vuetify Style Resources -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <!-- END Vuetify Style Resources -->

   
    <!-- NCSTATE THEME engr.ncsu.edu styles -->
    <link rel="stylesheet" id="ncst/main.css-css" href="https://www.engr.ncsu.edu/wp-content/themes/ncstate-theme/dist/styles/mainStyle.css?ver=8edc45df99c340a2e66a" media="all">

    <!-- Prefetch UNIVERS fonts and NCSU Favicons -->
    <link rel="dns-prefetch" href="https://cdn.ncsu.edu">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">

    <!-- Prefetch all Univers font weights -->
    <link rel="preload" href="https://fonts.gstatic.com/s/robotoslab/v16/BngMUXZYTXPIvIBgJJSb6ufN5qWr4xCC.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="preload" href="https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="preload" href="https://fonts.gstatic.com/s/robotocondensed/v19/ieVg2ZhZI2eCN5jzbjEETS9weq8-19eDpCEobdNZUSdy4Q.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="icon" type="image/x-icon" href="https://cdn.ncsu.edu/brand-assets/favicons/favicon.ico" sizes="any">
    <link rel="icon" href="https://cdn.ncsu.edu/brand-assets/favicons/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="https://cdn.ncsu.edu/brand-assets/favicons/apple-touch-icon.png">
    <link rel="manifest" href="https://cdn.ncsu.edu/brand-assets/favicons/manifest.webmanifest">


    <!-- NC STATE Utility Bar Styles -->
    <style type="text/css">
        html {
            margin-top: 30px !important;
        }

        * html body {
            margin-top: 30px !important;
        }

        #ncstate-utility-bar {
            overflow: hidden;
            *zoom: 1;
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            width: 100%;
            height: 30px;
            font-family: UniversRoman, arial, sans-serif;
            font-size: 14px;
            line-height: 1;
            z-index: 99997 !important;
            overflow: visible;
        }

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

        #ncstate-utility-bar html {
            line-height: 1;
        }

        #ncstate-utility-bar ol,
        #ncstate-utility-bar ul {
            list-style: none;
        }

        #ncstate-utility-bar table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        #ncstate-utility-bar caption,
        #ncstate-utility-bar th,
        #ncstate-utility-bar td {
            text-align: left;
            font-weight: normal;
            vertical-align: middle;
        }

        #ncstate-utility-bar q,
        #ncstate-utility-bar blockquote {
            quotes: none;
        }

        #ncstate-utility-bar q:before,
        #ncstate-utility-bar q:after,
        #ncstate-utility-bar blockquote:before,
        #ncstate-utility-bar blockquote:after {
            content: "";
            content: none;
        }

        #ncstate-utility-bar a img {
            border: none;
        }

        #ncstate-utility-bar elements-of-type(html5-block) {
            display: block;
        }

        #ncstate-utility-bar input,
        #ncstate-utility-bar button {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
        }

        #ncstate-utility-bar *,
        #ncstate-utility-bar *:before,
        #ncstate-utility-bar *:after {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        #ncstate-utility-bar a {
            color: #ffffff;
            text-decoration: none;
        }

        #ncstate-utility-bar ul li {
            list-style: none;
            list-style-type: none;
        }

        #ncstate-utility-bar .ncstate-utility-bar-tools {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            width: 100%;
            height: 30px;
            z-index: 99999;
            background: #000;
        }

        #ncstate-utility-bar .ncstate-utility-bar-wrapper {
            margin-right: auto;
            margin-left: auto;
            padding-left: 15px;
            padding-right: 15px;
        }

        #ncstate-utility-bar .ncstate-utility-bar-wrapper:before,
        #ncstate-utility-bar .ncstate-utility-bar-wrapper:after {
            content: " ";
            display: table;
        }

        #ncstate-utility-bar .ncstate-utility-bar-wrapper:after {
            clear: both;
        }

        @media (min-width: 768px) {
            #ncstate-utility-bar .ncstate-utility-bar-wrapper {
                width: 750px;
            }
        }

        @media (min-width: 992px) {
            #ncstate-utility-bar .ncstate-utility-bar-wrapper {
                width: 970px;
            }
        }

        @media (min-width: 1200px) {
            #ncstate-utility-bar .ncstate-utility-bar-wrapper {
                width: 1170px;
            }
        }

        #ncstate-utility-bar .ncstate-utility-bar-wrapper-primary {
            height: 30px;
            position: relative;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links {
            letter-spacing: 0.02em;
            background: #333;
            padding: 0 10px;
            overflow: auto;
            transition-property: all;
            transition-duration: .5s;
            transform: translate(0, 0);
            z-index: 99998;
            position: relative;
            top: 30px;
            display: none;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links.is-hidden {
            transform: translate(0, -100%);
        }

        #ncstate-utility-bar .ncstate-utility-bar-links ul.ncstate-utility-bar-primary-util li {
            display: inline-block;
            padding-top: 2em;
            padding-bottom: 1em;
            width: 100%;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links ul.ncstate-utility-bar-primary-util li a:hover {
            text-decoration: underline;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links ul.ncstate-utility-bar-primary-util li:before {
            display: none;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links ul.ncstate-utility-bar-primary-util li.ncstate-utility-bar-directory {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Cpath fill='%23fff' d='M71.857 81.672c12.941 0 23.435-12.537 23.435-28.002 0-15.467-10.493-28.003-23.435-28.003S48.423 38.203 48.423 53.67c0 15.465 10.493 28.002 23.434 28.002zm15.358 5.133c-4.588 2.769-9.812 4.346-15.357 4.346-5.674 0-11.018-1.644-15.683-4.535l-37.256 10.47v19.722h105.877V97.085l-37.581-10.28z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: left 20px;
            background-size: 2em;
            padding-left: 2.75em;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links ul.ncstate-utility-bar-primary-util li.ncstate-utility-bar-mypack {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Cpath fill='%23fff' d='M125.081 47.844V25.915h-47.04v9.752l6.844 12.177zM67.755 43.11H18.919v73.975h106.162V60.457H77.505z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: left 20px;
            background-size: 2em;
            padding-left: 2.75em;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links ul.ncstate-utility-bar-primary-util li.ncstate-utility-bar-map {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Cpath d='M90.821 85.199V67.552l-12.94 17.647z'/%3E%3Cpath fill='%23fff' d='M73.484 119.085s29.812-40.537 29.812-64.474c0-8.227-3.202-15.959-9.019-21.775-5.817-5.816-13.55-9.022-21.777-9.021-8.226-.001-15.96 3.203-21.775 9.021-5.817 5.816-9.021 13.549-9.021 21.775 0 27.2 29.811 64.474 29.811 64.474h1.969zM55.459 54.612c0-4.552 1.772-8.833 4.993-12.052A16.92 16.92 0 0172.5 37.566c4.553 0 8.832 1.771 12.05 4.992a16.94 16.94 0 014.991 12.051c0 4.554-1.772 8.833-4.993 12.053a16.919 16.919 0 01-12.049 4.994 16.919 16.919 0 01-12.049-4.991 16.922 16.922 0 01-4.991-12.053z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: left 20px;
            background-size: 2em;
            padding-left: 2.75em;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links ul.ncstate-utility-bar-primary-util li.ncstate-utility-bar-libraries {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 144 144'%3E%3Cpath d='M49.252 95.633h11.677v25.279H49.252z'/%3E%3Cpath d='M95.958 104.621H64.619v3.691H103.246a2.017 2.017 0 100-4.036h-1.038V89.83c.041.01.07.037.109.037 1.17 0 2.115-.936 2.115-2.088V26.613c0-1.152-.856-2.238-2.026-2.238-.891 0-.891 0-2.048.017h-48.81s-10.087-1.152-14.215 2.691c-4.127 3.844-3.515 11.757-3.515 11.757l.049 57.2c-.01.197-.059.385-.059.592 0 .203.048.398.059.6v.6l.05-.109c.564 5.924 5.506 10.592 11.572 10.592h.076v-3.691h-.076c-4.409 0-7.993-3.586-7.993-7.99 0-4.197 3.256-7.605 7.369-7.93h50.85l.243 15.917z'/%3E%3C/svg%3E");
            background-position: left 20px;
            background-repeat: no-repeat;
            background-position: left 23px;
            background-size: 2em;
            padding-left: 2.75em;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links .ncstate-utility-bar-sec-util {
            padding: 1.5em 0;
            padding-bottom: 0.5em;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links .ncstate-utility-bar-sec-util dl:last-child {
            padding-top: 0;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links .ncstate-utility-bar-sec-util dl:last-child dt {
            display: none;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links .ncstate-utility-bar-sec-util dl:nth-child(3) {
            padding-bottom: 0;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links dl {
            line-height: 1.6em;
            padding: 1.5em;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links dl dt {
            color: #ffffff;
            padding-bottom: .5em;
            text-transform: uppercase;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links dl dt ul li:before {
            display: none;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links dl dt.ncstate-utility-bar-primary-util {
            margin-bottom: 1.5em;
            text-transform: none;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links dl dd {
            font-weight: lighter;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links dl dd a {
            color: #AAA;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links dl dd a:hover {
            text-decoration: underline;
        }

        #ncstate-utility-bar .ncstate-utility-bar-links dl dd ul li:before {
            display: none;
        }

        #ncstate-utility-bar .ncstate-utility-bar-home {
            float: left;
        }

        #ncstate-utility-bar .ncstate-utility-bar-home a {
            display: block;
            padding: 8px 14px 8px 28px;
            line-height: 14px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Cpath fill='%23fff' d='M49.477 85.676l41.031 41.033 13.678-13.679-41.033-41.032 41.033-41.032L90.508 17.29 35.799 71.998z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: left;
            background-size: 1.2em;
        }

        #ncstate-utility-bar .ncstate-utility-bar-home a:hover {
            background-color: #333;
        }

        #ncstate-utility-bar .ncstate-utility-bar-options {
            height: 30px;
            position: absolute;
            top: 0px;
            right: 0px;
        }

        #ncstate-utility-bar .ncstate-utility-bar-covid {
            float: left;
        }

        #ncstate-utility-bar .ncstate-utility-bar-covid a {
            display: block;
            text-align: center;
            background-color: #900;
            width: 80px;
            height: 30px;
            text-transform: uppercase;
            font-size: 0.8em;
            line-height: 14px;
            letter-spacing: 0.02em;
            padding: 8px 13px;
        }

        #ncstate-utility-bar .ncstate-utility-bar-covid a:hover {
            background-color: #5e0000;
        }

        #ncstate-utility-bar .covid-text {
            display: none;
        }

        @media screen and (min-width: 620px) {
            #ncstate-utility-bar .ncstate-utility-bar-covid a {
                width: 140px;
            }

            #ncstate-utility-bar .covid-text {
                display: inline;
            }
        }

        #ncstate-utility-bar .ncstate-utility-bar-toggle {
            float: left;
        }

        #ncstate-utility-bar .ncstate-utility-bar-toggle a {
            display: block;
            background-color: #c00;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Cpath fill='%23fff' d='M28.322 28.437V45.7h87.357V28.437H28.322zm0 87.127h87.357V98.302H28.322v17.262zm0-34.931h87.357V63.369H28.322v17.264z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: 90% 50%;
            background-size: 1.78572em;
            width: 120px;
            height: 30px;
            text-transform: uppercase;
            font-size: 0.8em;
            line-height: 14px;
            letter-spacing: 0.02em;
            padding: 8px 13px;
        }

        #ncstate-utility-bar .ncstate-utility-bar-toggle a:hover {
            background-color: #5e0000;
        }

        #ncstate-utility-bar .ncstate-utility-bar-toggle a:hover+.indicator {
            border-top: 8px solid #5e0000;
        }

        #ncstate-utility-bar .ncstate-utility-bar-toggle .indicator {
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid #c00;
            margin: 0 auto -0.5em;
            display: none;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search {
            overflow: hidden;
            *zoom: 1;
            float: left;
            background: #333;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-submit {
            float: left;
            color: #ffffff;
            background-color: #333;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 144'%3E%3Cpath fill='%23fff' d='M125.409 112.381L93.296 80.269c4.181-6.493 6.431-14.051 6.43-21.955.001-10.864-4.23-21.079-11.914-28.76C80.13 21.87 69.917 17.64 59.052 17.64s-21.079 4.23-28.761 11.914c-7.683 7.681-11.914 17.896-11.913 28.76-.001 10.864 4.23 21.078 11.913 28.761 7.682 7.683 17.897 11.913 28.761 11.913 7.906 0 15.46-2.25 21.953-6.431l32.113 32.115 12.291-12.291zm-85.415-35.01C34.904 72.28 32.1 65.512 32.1 58.313c0-7.2 2.804-13.967 7.894-19.057 5.091-5.09 11.858-7.895 19.058-7.895 7.198 0 13.965 2.805 19.057 7.895 5.091 5.09 7.894 11.857 7.894 19.057 0 7.199-2.803 13.967-7.894 19.058-5.091 5.09-11.858 7.895-19.057 7.895-7.199 0-13.967-2.805-19.058-7.895z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 1.3em;
            border: none;
            width: 30px;
            height: 30px;
            padding: 0px;
            border-radius: 0px;
            /* Make corners not round */
            -webkit-appearance: none;
            /* Make corners not round */
            text-indent: 200%;
            overflow: hidden;
            white-space: nowrap;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-submit:hover {
            cursor: pointer;
            background-color: #1a1a1a;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-field {
            float: left;
            border-radius: 0px;
            /* Make corners not round */
            -webkit-appearance: none;
            /* Make corners not round */
            background-color: #333;
            border: none;
            color: #ffffff;
            font-size: 13px;
            width: 150px;
            padding: 6px;
            text-align: center;
            height: 30px;
            box-sizing: border-box;
            /* Make form hidden dropdown in mobile */
            display: none;
            position: absolute;
            top: 30px;
            right: 0;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-field::-webkit-input-placeholder {
            color: #ffffff;
            font-size: 13px;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-field:-moz-placeholder {
            color: #ffffff;
            font-size: 13px;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-field::-moz-placeholder {
            color: #ffffff;
            font-size: 13px;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-field:-ms-input-placeholder {
            color: #ffffff;
            font-size: 13px;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-field:focus {
            background-color: #1a1a1a;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-field:focus::-webkit-input-placeholder {
            transition: opacity 0.5s ease;
            opacity: 0;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-field:focus:-moz-placeholder {
            transition: opacity 0.5s ease;
            opacity: 0;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-field:focus::-moz-placeholder {
            transition: opacity 0.5s ease;
            opacity: 0;
        }

        #ncstate-utility-bar .ncstate-utility-bar-search-field:focus:-ms-input-placeholder {
            transition: opacity 0.5s ease;
            opacity: 0;
        }

        @media screen and (min-width: 528px) {
            #ncstate-utility-bar .ncstate-utility-bar-links {
                overflow: auto;
                transition-duration: .4s;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links dl {
                width: 50%;
                display: inline-block;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links dl:nth-child(3) {
                clear: both;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links dl dd,
            #ncstate-utility-bar .ncstate-utility-bar-links dl dt {
                padding-right: 3%;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links ul.ncstate-utility-bar-primary-util {
                padding-bottom: 1.5em;
                width: 100%;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links ul.ncstate-utility-bar-primary-util li {
                width: 50%;
                padding-right: 3%;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links .ncstate-utility-bar-sec-util dl:last-child {
                padding-top: 1.5em;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links .ncstate-utility-bar-sec-util dl:last-child dt {
                display: block;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links .ncstate-utility-bar-sec-util dl:nth-child(3) {
                padding-bottom: 1.5em;
            }

            #ncstate-utility-bar .ncstate-utility-bar-search-field {
                display: block;
                position: static;
                top: auto;
                right: auto;
            }
        }

        @media screen and (min-width: 800px) {
            #ncstate-utility-bar .ncstate-utility-bar-links {
                transition-duration: .3s;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links dl {
                width: 25%;
                display: inline-block;
                padding: 0 1.5em;
                vertical-align: top;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links dl:nth-child(3) {
                clear: none;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links ul.ncstate-utility-bar-primary-util {
                padding-bottom: 0;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links ul.ncstate-utility-bar-primary-util li {
                width: 25%;
                padding-right: 3%;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links .ncstate-utility-bar-sec-util {
                padding-bottom: 2em;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links .ncstate-utility-bar-sec-util dl:last-child {
                padding-top: 0;
            }

            #ncstate-utility-bar .ncstate-utility-bar-links .ncstate-utility-bar-sec-util dl:nth-child(3) {
                padding-bottom: 0;
            }
        }

        #ncstate-utility-bar.gray .ncstate-utility-bar-tools {
            background: #333;
        }

        #ncstate-utility-bar.gray .ncstate-utility-bar-links {
            background: #1a1a1a;
        }

        #ncstate-utility-bar.gray .ncstate-utility-bar-toggle a {
            background-color: #c00;
        }

        #ncstate-utility-bar.gray .ncstate-utility-bar-toggle a:hover {
            background-color: #5e0000;
        }

        #ncstate-utility-bar.gray .ncstate-utility-bar-toggle a:hover+.indicator {
            border-top: 8px solid #5e0000;
        }

        #ncstate-utility-bar.gray .ncstate-utility-bar-toggle .indicator {
            border-top: 8px solid #c00;
        }

        #ncstate-utility-bar.gray .ncstate-utility-bar-search {
            background: #1a1a1a;
        }

        #ncstate-utility-bar.gray .ncstate-utility-bar-search-submit {
            background-color: #1a1a1a;
        }

        #ncstate-utility-bar.gray .ncstate-utility-bar-search-submit:hover {
            background-color: #2b2b2b;
        }

        #ncstate-utility-bar.gray .ncstate-utility-bar-search-field {
            background-color: #1a1a1a;
        }

        #ncstate-utility-bar.gray .ncstate-utility-bar-search-field:focus {
            background-color: #2b2b2b;
        }

        #ncstate-utility-bar.gray:not(.show-brick) .ncstate-utility-bar-home a:hover {
            background-color: #1a1a1a;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-tools {
            background: #c00;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-links {
            background: #900;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-links dl dd a {
            color: #ccc;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-toggle a {
            background-color: #333;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-toggle a:hover {
            background-color: #1a1919;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-toggle a:hover+.indicator {
            border-top: 8px solid #1a1919;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-toggle .indicator {
            border-top: 8px solid #333;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-search {
            background: #900;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-search-submit {
            background-color: #900;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-search-submit:hover {
            background-color: #bd0000;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-search-field {
            background-color: #900;
        }

        #ncstate-utility-bar.red .ncstate-utility-bar-search-field:focus {
            background-color: #bd0000;
        }

        #ncstate-utility-bar.red:not(.show-brick) .ncstate-utility-bar-home a:hover {
            background-color: #900;
        }

        #ncstate-utility-bar.show-brick .ncstate-utility-bar-home a {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 34.493'%3E%3Cpath fill='%23c00' d='M71.998 34.493H0V0h71.998v34.494'/%3E%3Cpath fill='%23fff' d='M10.063 8.99h.027l2.819 7.55h2.844V6.212h-2.016v7.151h-.029l-2.744-7.15H8.046v10.325h2.017V8.99M21.035 15.167c-1.216 0-1.374-1.145-1.374-3.79 0-2.646.158-3.79 1.374-3.79.644 0 .885.517.885 1.888h2.117c.087-2.215-.8-3.432-3.002-3.432-3.56 0-3.56 2.603-3.56 5.334 0 2.702 0 5.332 3.56 5.332 2.016 0 3.118-.886 3.118-3.644h-2.131c-.03.815.014 2.102-.987 2.102M35.105 13.721c0-3.246-4.347-3.073-4.347-5.031 0-.716.417-1.103 1.116-1.103.872 0 1.001.787 1.001 1.56h2.102c.143-2.16-.902-3.104-3.002-3.104-2.633 0-3.404 1.287-3.404 2.903 0 3.077 4.346 3.188 4.346 5.049 0 .699-.356 1.172-1.085 1.172-1.189 0-1.23-.83-1.23-1.817h-2.16c-.114 1.788.386 3.36 3.06 3.36 1.643 0 3.603-.313 3.603-2.989M38.238 16.54h2.16V7.931h2.403V6.213h-6.965v1.719h2.402v8.607M45.302 12.665l.984-4.464h.028l1.044 4.464zm-.289-6.452L42.155 16.54h2.13l.586-2.288h2.947l.568 2.288h2.274L47.858 6.213h-2.845M54.553 16.54V7.931h2.405V6.213h-6.966v1.719h2.405v8.607h2.156M63.714 14.952H60.12v-3.015h3.204V10.35h-3.204V7.802h3.475V6.213H57.96V16.54h5.755v-1.587M12.233 25.147c0 1.1 0 2.668-1.72 2.668-1.719 0-1.719-1.568-1.719-2.668v-5.308h-.748v5.86c0 2.176 1.145 2.747 2.467 2.747 1.323 0 2.466-.571 2.466-2.747v-5.86h-.746v5.308M19.79 27.23l-.024.022-3.426-7.413h-1.147v8.44h.75v-7.466l.023-.024 3.438 7.49h1.132v-8.44h-.747v7.39M22.89 28.28h.748v-8.441h-.747v8.44M28.01 27.394h-.02l-2-7.555h-.797l2.351 8.44h.935l2.339-8.44h-.724l-2.084 7.555M33.086 24.26h2.94v-.632h-2.94V20.47h3.078v-.632H32.34v8.44h3.906v-.628h-3.16v-3.39M39.942 23.557h-1.215V20.47h1.53c.876 0 1.333.223 1.333 1.38 0 1.416-.524 1.706-1.648 1.706zm1.088.34v-.022c1.134-.26 1.31-.961 1.31-2.013 0-1.483-.408-2.023-2.035-2.023H37.98v8.44h.746V24.19h1.416c1.623 0 1.378 1.624 1.388 1.99.015.451.047 1.856.117 2.1h.714c-.022-.326-.08-.652-.08-.98 0-3.02-.071-3.158-1.252-3.403M46.646 23.594c-.96-.69-1.593-.725-1.593-1.977 0-.993.577-1.31 1.484-1.31 1.149 0 1.408.633 1.432 1.672h.756c0-1.215-.372-2.305-2.128-2.305-1.377 0-2.301.61-2.292 2.07.015.845.086 1.347 1.724 2.352 1.213.749 1.974 1.074 1.974 2.222 0 .971-.48 1.497-1.466 1.497-1.507 0-1.573-.973-1.573-1.908h-.774c-.07 1.65.667 2.54 2.314 2.54 1.475 0 2.244-.736 2.244-2.245 0-1.638-1.062-1.861-2.102-2.608M50.858 28.28h.749v-8.441h-.749v8.44M53.22 20.471h2.059v7.809h.75V20.47h2.057v-.632H53.22v.632M63.724 19.839l-2.025 4.199-1.93-4.2h-.844l2.388 4.937v3.505h.751v-3.505l2.406-4.936h-.746'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
            height: 60px;
            color: transparent;
            height: 60px;
        }

        #ncstate-utility-bar.show-brick .ncstate-utility-bar-home a:hover {
            background-color: transparent;
        }

        #ncstate-utility-bar.show-brick ul.ncstate-utility-bar-primary-util {
            padding-top: 30px;
        }
    </style>
    <!-- END NCSTATE UTILITY BAR STYLES -->

    <!-- END NC STATE WEB RESOURCES  -->

</head>

<!--   START CONTENT AREA   -->

<body>

    <!-- nc state utility bar -->
    <header id="ncstate-utility-bar" class="ncstate-utility-bar gray show-brick" role="navigation" aria-label="NC State Brand Utility Bar">
        <div class="ncstate-utility-bar-tools">
            <div class="ncstate-utility-bar-wrapper ncstate-utility-bar-wrapper-primary" id="ncstate-utility-bar-wrapper-primary">
                <div class="ncstate-utility-bar-home">
                    <a href="https://www.ncsu.edu">NC State Home</a>
                </div>
                <div class="ncstate-utility-bar-options">
                    <div class="ncstate-utility-bar-toggle">
                        <a id="ncstate-utility-bar-toggle-link" aria-label="Toggle resources" href="#">Resources</a>
                        <div class="indicator"></div>
                    </div>
                    <div class="ncstate-utility-bar-search" role="search" aria-label="search ncsu.edu">
                        <form action="https://www.ncsu.edu/search" name="navsearchform" class="ncstate-utility-bar-search-form">
                            <input class="ncstate-utility-bar-search-field" id="search-input" name="q" type="search" placeholder="search ncsu.edu" aria-label="search ncsu.edu">
                            <input type="submit" id="search-submit" name="search-submit" value="search" class="ncstate-utility-bar-search-submit">
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="ncstate-utility-bar-links is-hidden">
            <div class="ncstate-utility-bar-wrapper">
                <ul class="ncstate-utility-bar-primary-util">
                    <li class="ncstate-utility-bar-primary-util ncstate-utility-bar-directory"><a href="https://directory.ncsu.edu/" id="ncstate-utility-bar-first-link">Campus Directory</a></li>
                    <li class="ncstate-utility-bar-primary-util ncstate-utility-bar-mypack"><a href="https://mypack.ncsu.edu/">MyPack Portal</a></li>
                    <li class="ncstate-utility-bar-primary-util ncstate-utility-bar-map"><a href="https://maps.ncsu.edu/">Campus Map</a></li>
                    <li class="ncstate-utility-bar-primary-util ncstate-utility-bar-libraries"><a href="https://www.lib.ncsu.edu/">Libraries</a></li>
                </ul>
                <div class="ncstate-utility-bar-sec-util">
                    <dl>
                        <dt>Campus Resources</dt>
                        <dd>
                            <ul>
                                <li><a href="https://housing.ncsu.edu/">University Housing</a></li>
                                <li><a href="https://dining.ncsu.edu/">NC State Dining</a></li>
                                <li><a href="https://shop.ncsu.edu/">Bookstores</a></li>
                                <li><a href="https://ncsu.transloc.com/">Wolfline Buses</a></li>
                                <li><a href="https://www.ncsu.edu/calendars">Calendar</a></li>
                                <li><a href="https://www.ncsu.edu/diversity/">Diversity</a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl>
                        <dt>Academic Resources</dt>
                        <dd>
                            <ul>
                                <li><a href="https://admissions.ncsu.edu/">Undergraduate Admissions</a></li>
                                <li><a href="https://www.ncsu.edu/academics/departments-a-z/">Academic Departments</a></li>
                                <li><a href="https://wolfware.ncsu.edu/">WolfWare/Moodle</a></li>
                                <li><a href="https://global.ncsu.edu/">Global Engagement</a></li>
                                <li><a href="https://online-distance.ncsu.edu/">Distance Education</a></li>
                                <li><a href="https://studentservices.ncsu.edu/calendars/academic/">Academic Calendar</a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl>
                        <dt>Other Resources</dt>
                        <dd>
                            <ul>
                                <li><a href="https://studentservices.ncsu.edu/">Student Services Center</a></li>
                                <li><a href="https://treasurer.ofb.ncsu.edu/cashier/">Cashier's Office</a></li>
                                <li><a href="https://registrar.ncsu.edu/">Registration and Records</a></li>
                                <li><a href="https://studentservices.ncsu.edu/your-money/financial-aid/">Scholarships and Financial Aid</a></li>
                                <li><a href="https://careers.dasa.ncsu.edu/">Career Development Center</a></li>
                                <li><a href="https://help.oit.ncsu.edu/">NC State Help Desk</a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl>
                        <dt>&nbsp;</dt>
                        <dd>
                            <ul>
                                <li><a href="https://ncsu.edu/coronavirus/">Coronavirus Updates</a></li>
                                <li><a href="https://campaign.ncsu.edu/">Giving</a></li>
                                <li><a href="https://news.ncsu.edu/">NC State News</a></li>
                                <li><a href="https://grad.ncsu.edu/">Graduate School</a></li>
                                <li><a href="https://mail.google.com/">Gmail Access</a></li>
                                <li><a href="https://social.ncsu.edu/">NC State Social Media</a></li>
                            </ul>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </header>
    <!-- END nc state utility bar -->

    <!-- START CONTENT -->
    <template id="app">
        <v-app>
            <v-main>
                <v-layout justify-center py-5>
                    <v-flex xs12 md9 sm10 lg6>
                        
                        <v-container fluid>
                            <v-row justify="center">
                                <v-col cols="12">
                                    <h1>{{pageTitle}}</h1>
                                    
                                     <!-- <p v-for="sentence in messageFormatted">
                                         {{sentence}}
                                    </p> -->
                                    <p> {{message}} </p>
                                </v-col>
                            </v-row>
                            
                            <v-row justify="center">
                                <v-col
                                    cols="12"
                                    md="12"
                                    lg="12"
                                >
                                    <v-form>
                                    
                                        <!-- <v-container fluid> -->
                                                <v-row>
                                                    <v-col cols="12">
                                                        <span 
                                                            class="font-weight-bold"
                                                            aria-hidden="true"
                                                        > 
                                                            Current User:
                                                        </span>
                                                        <span 
                                                            arial-label="current user's email"
                                                        > 
                                                            {{currentUserEmail}}
                                                        </span>
                                                        <h2> Hello {{nameFromUnityid}} </h2>
                                                    </v-col>
                                                </v-row>
                                                <v-row>
                                                    <v-col
                                                        cols="12"
                                                    >
                                                        <v-radio-group
                                                            v-model="pickedRadiobtn"
                                                            mandatory
                                                        >
                                                            <p> 
                                                                Are you reserving this meeting for someone else? 
                                                            </p>
                                                            <v-radio
                                                                label="Yes"
                                                                value="yes"
                                                                 v-on:click="isNewUser(value)"
                                                            ></v-radio>
                                                            <v-radio
                                                                label="No"
                                                                value="no"
                                                                v-on:click="isNewUser(value)" 
                                                            ></v-radio>
                                                        </v-radio-group>
                                                    </v-col>                            
                                                </v-row>
                                            
                                            <!-- IF CONDITION: reveal new user contact info fields -->
                                            <template v-if="pickedRadiobtn === 'yes'">
                                                
                                                <v-row>
                                                    <v-col cols="12">
                                                        <h3> {{titleAddUser}} </h3>
                                                    </v-col>
                                                </v-row>
                                                
                                                <v-row>
                                                    <v-col
                                                        xs="12" sm="12" md="8"
                                                    >
                                                        <v-text-field 
                                                            :counter="50" 
                                                            label="First name" 
                                                            type="text"
                                                            clear-icon="mdi-close-circle"
                                                            clearable
                                                            required
                                                           >
                                                        </v-text-field>
                                                    </v-col>
                                                
                                                    <v-col
                                                        xs="12" sm="12" md="8"
                                                    >
                                                        <v-text-field 
                                                            :counter="50" 
                                                            label="Last name" 
                                                            type="text" 
                                                            required 
                                                            clear-icon="mdi-close-circle" 
                                                            clearable
                                                        >
                                                        </v-text-field>
                                                    </v-col>
                                            
                                            <!-- <v-divider></v-divider> -->
                                                    <v-col
                                                        xs="12" sm="12" md="8" 
                                                    >
                                                        <v-text-field 
                                                            label="E-mail"
                                                            type="text"
                                                            clear-icon="mdi-clear-close"
                                                            clearable
                                                            required
                                                       >    
                                                       </v-text-field>
                                                    </v-col>
                                                </v-row>
                                            </template><!-- END v-if v-else-if div  -->
                                            
                                            <v-divider></v-divider>
                                            
                                            <v-row  justify="left">
                                                <h3>{{planMeetingTitle}}</h3>
                                            </v-row>
                                            <v-row>
                                                <v-col 
                                                    xs="12" sm="12" md="8"
                                                >
                                                    <v-text-field
                                                        counter="200"
                                                        label="Event Name"
                                                        type="text"
                                                        clear-icon="mdi-clear-close"
                                                        clearable
                                                        required  
                                                    >   
                                                    </v-text-field>
                                                </v-col>
                                                <v-col 
                                                    xs="12" sm="12" md="8" 
                                                >
                                                    <v-select
                                                        class="mb-1"
                                                        :items="items" 
                                                        label="Select Meeting Room"
                                                    >  
                                                    </v-select>
                                                </v-col>
                                            </v-row>
                                    
                                            <v-divider></v-divider>
                                    
                                            <v-row>
                                                <v-col
                                                    xs="12" sm="12" md="8"
                                                >
                                                    <v-menu
                                                        v-model="dateMenu"
                                                        :close-on-content-click="false"
                                                        :nudge-left="40"
                                                        transition="slide-y-transition"
                                                        offset-y
                                                    >
                                                        <template
                                                            v-slot:activator="{on, attrs}"
                                                        >
                                                           <v-text-field
                                                               v-model="date"
                                                               label="Date of Meeting"
                                                               prepend-icon="mdi-calendar"
                                                               readonly  
                                                               v-bind="attrs"
                                                               v-on="on"
                                                           ></v-text-field> 
                                                        </template>
                                                       <v-date-picker
                                                           v-model="date"
                                                           @input="dateMenu=false"
                                                           :style="dateTimePickerWidths"
                                                       >
                                                       </v-date-picker> 
                                                    </v-menu>
                                                </v-col>
                                                <v-divider></v-divider>                                                <v-col
                                                    xs="12" sm="12"  md="8"
                                                >
                                                    <v-menu
                                                       ref="menu"
                                                       v-model="timeMenu"
                                                       :close-on-content-click="false"
                                                       :nudge-right="20"
                                                       :return-value.sync="time"
                                                       transition="slide-y-transition"
                                                       offset-y 
                                                    >
                                                        <template
                                                            v-slot:activator="{on,attrs}"
                                                        >
                                                            <v-text-field
                                                              v-model="time"
                                                              label="Meeting Time"
                                                              prepend-icon="mdi-clock-time-four-outline"
                                                              readonly
                                                              v-bind="attrs"
                                                              v-on="on"
                                                            ></v-text-field>
                                                        </template>    
                                                        <v-time-picker
                                                           v-if="timeMenu"
                                                           v-model="time"
                                                           :style="dateTimePickerWidths"
                                                           @click:minute="$refs.menu.save(time)"
                                                        ></v-time-picker>
                                                    </v-menu>
                                                </v-col>
                                                <v-col
                                                    xs="12" sm="12" md="8"
                                                >
                                                    <v-text-field
                                                          v-model.number="numberValue"
                                                          single-line
                                                          label="Duration (HH.MM)"
                                                          aria-label="Type duration of time in the following format: hours dot minutes. Type in two digits for hours and for minutes"
                                                          type="number"
                                                          prepend-icon="mdi-timer-outline"
                                                          clear-icon="mdi-close-circle"
                                                          clearable
                                                          :style="numberFieldHeight"
                                                    >  
                                                    </v-text-field>
                                                </v-col>
                                                <v-col
                                                    xs="12" md="8"
                                                >
                                                    <v-textarea 
                                                        label="Comments" 
                                                        counter 
                                                        maxlength="1000" 
                                                        filled
                                                        clear-icon="mdi-close-circle"
                                                        clearable
                                                    >        
                                                    </v-textarea>
                                                </v-col>
                                                <v-col
                                                    cols="12"
                                                >
                                                    <v-btn color="primary" class="white--text" tile>
                                                        Submit
                                                    </v-btn>
                                                </v-col>
                                            </v-row>
                                    </v-form>
                                </v-col>
                            </v-row>
                        </v-container>
                    </v-flex>
                </v-layout>
            </v-main>
            <!-- END CONTENT -->
        </v-app>
    </template> <!-- END div#app -->
    <!--   END CONTENT AREA   -->

    <!-- NCSU FOOTER -->
    <footer class="site-footer has-reynolds-400-background-color ">
        <div class="site-footer__container">
            <div class="site-footer__header">
                <a href="https://www.engr.ncsu.edu" class="site-footer__lockup">
                    <div class="site-footer__brick">
                        <svg aria-label="NC State" role="img" viewBox="0 0 54 17.1">
                            <path d="M0,13.5v-10h2.8l2.6,6.9V3.5h2.1v10H4.8L2.1,6.1v7.4C2.1,13.6,0,13.6,0,13.5z M9.2,8.5c0-2.6,0-5.2,3.5-5.2
	c2.1,0,3,1.3,2.8,3.4h-2.1c0-1.3-0.1-1.8-0.8-1.8c-1.3,0-1.3,1-1.3,3.6s0.1,3.8,1.3,3.8c0.9,0,0.9-1.3,0.9-2.1h2.1
	c0,2.6-1,3.5-3,3.5C9.2,13.6,9.2,11,9.2,8.5z M22.8,13.6c-2.6,0-3.1-1.4-3-3.2H22c0,1,0,1.8,1.3,1.8c0.6-0.1,1-0.6,0.9-1.1l0,0
	c0-1.8-4.1-1.9-4.1-4.9c0-1.6,0.6-2.8,3.2-2.8c2.1,0,3.1,0.9,3,3.1h-2.1c0-0.8-0.1-1.6-1-1.6c-0.6,0-1,0.5-1,1
	c0,1.9,4.1,1.8,4.1,4.9C26.3,13.4,24.5,13.6,22.8,13.6z M33.8,3.5v1.7h-2.3v8.4h-2.1V5.2h-2.3V3.5H33.8z M33.2,13.5l2.8-10h2.7
	l2.7,10h-2.2l-0.5-2.2h-2.8l-0.6,2.2H33.2z M37.2,5.5l-0.9,4.3h1.9L37.2,5.5z M47.5,3.5v1.7h-2.2v8.4h-2.1V5.2h-2.3V3.5H47.5z
	 M48.6,13.5v-10H54v1.4h-3.5v2.6h3.1v1.6h-3.1v3H54v1.4H48.6z" style="fill:#FFF"></path>
                        </svg>

                    </div>
                    <span class="site-footer__unit-name">College of Engineering</span>
                    <span class="sr-only">Home</span>
                </a>
            </div>

            <div class="site-footer__contact">
                <p>Fitts-Woolard Hall<br>
                    915 Partners Way<br>
                    Raleigh, NC 27695-7901</p>

            </div>

            <div class="site-footer__user-engagement-area site-footer__map">
                <h2 class="site-footer__subhead">Campus Map</h2>
                <a href="https://maps.ncsu.edu/#/buildings/782E">
                    <img width="300" height="169" src="https://www.engr.ncsu.edu/wp-content/uploads/2021/11/Centennial-Campus-map-300x169.png" class="attachment-medium size-medium" alt="Illustrated aerial overhead view of NC State's Centennial Campus." decoding="async" srcset="https://www.engr.ncsu.edu/wp-content/uploads/2021/11/Centennial-Campus-map-300x169.png 300w, https://www.engr.ncsu.edu/wp-content/uploads/2021/11/Centennial-Campus-map-1024x576.png 1024w, https://www.engr.ncsu.edu/wp-content/uploads/2021/11/Centennial-Campus-map-768x432.png 768w, https://www.engr.ncsu.edu/wp-content/uploads/2021/11/Centennial-Campus-map.png 1500w" sizes="(max-width: 300px) 100vw, 300px">
                </a>
            </div>

            <div class="site-footer__links">
                <ul id="menu-footer-menu" class="menu">
                    <li id="menu-item-36498" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-36498"><a href="https://accessibility.ncsu.edu/">Accessibility</a></li>
                    <li id="menu-item-43945" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43945"><a href="https://admissions.ncsu.edu/apply/">Apply</a></li>
                    <li id="menu-item-43590" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43590"><a href="https://www.engr.ncsu.edu/about/glance/">At A Glance</a></li>
                    <li id="menu-item-36497" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-36497"><a href="https://www.engr.ncsu.edu/about/contact/">Contact Us</a></li>
                    <li id="menu-item-43947" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43947"><a href="https://www.engr.ncsu.edu/academics/departments/">Departments</a></li>
                    <li id="menu-item-43949" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43949"><a href="https://www.engr.ncsu.edu/people/">Directory</a></li>
                    <li id="menu-item-42050" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-42050"><a href="https://www.engr.ncsu.edu/jobs/">Employment Opportunities</a></li>
                    <li id="menu-item-46663" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46663"><a href="https://it.engr.ncsu.edu/">IT Resources</a></li>
                    <li id="menu-item-43948" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43948"><a href="https://portalsp.acs.ncsu.edu/shibboleth-ds/?entityID=https%3A%2F%2Fportalsp.acs.ncsu.edu%2Fsp%2Fshibboleth&amp;return=https%3A%2F%2Fportalsp.acs.ncsu.edu%2FShibboleth.sso%2FLogin%3FSAMLDS%3D1%26target%3Dss%253Amem%253Ae743628e2391f30a6ea79be96d31db148fdc34f354df465d654f5a79f43899d5">MyPack Portal</a></li>
                    <li id="menu-item-36509" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-36509"><a href="https://maps.ncsu.edu/#" class="anchor-link">Parking and Directions</a></li>
                    <li id="menu-item-36499" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-36499"><a href="https://www.ncsu.edu/privacy/">Privacy Policy</a></li>
                    <li id="menu-item-43589" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43589"><a href="https://www.engr.ncsu.edu/about/strategic-plan/">Strategic Plan</a></li>
                    <li id="menu-item-43428" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43428"><a href="https://www.engr.ncsu.edu/update-your-directory-listing/">Update/Add Directory Profile</a></li>
                    <li id="menu-item-49475" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-49475"><a href="mailto:engineering-comm@ncsu.edu">Website Feedback/Report Issue</a></li>
                    <li id="menu-item-79445" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-79445"><a href="https://wellness.ncsu.edu/">Wolfpack Wellness</a></li>
                </ul>
            </div>

            <div class="site-footer__connect">
                <h2 class="site-footer__subhead">Connect With Us</h2>
                <ul class="site-footer__social-channels" aria-label="Social Media channels">

                    <li>
                        <a href="https://www.facebook.com/NCStateEngineering" id="site-footer__social-facebook" data-ua-cat="Footer" data-ua-action="Social Channel Click" data-ua-label="Facebook">
                            <svg class="wolficon wolficon-facebook" role="img" aria-labelledby="wolficon-label-65c55965ca940">
                                <title id="wolficon-label-65c55965ca940">Facebook</title>
                                <use xlink:href="#wolficon-facebook">
                                </use>
                            </svg>
                        </a>
                    </li>

                    <li>
                        <a href="https://www.twitter.com/NCStateEngr" id="site-footer__social-twitter" data-ua-cat="Footer" data-ua-action="Social Channel Click" data-ua-label="X">
                            <svg class="wolficon wolficon-twitter" role="img" aria-labelledby="wolficon-label-65c55965ca946">
                                <title id="wolficon-label-65c55965ca946">X</title>
                                <use xlink:href="#wolficon-twitter">
                                </use>
                            </svg>
                        </a>
                    </li>

                    <li>
                        <a href="https://www.linkedin.com/company/nc-state-college-of-engineering/" id="site-footer__social-linkedin" data-ua-cat="Footer" data-ua-action="Social Channel Click" data-ua-label="LinkedIn">
                            <svg class="wolficon wolficon-linkedin" role="img" aria-labelledby="wolficon-label-65c55965ca949">
                                <title id="wolficon-label-65c55965ca949">LinkedIn</title>
                                <use xlink:href="#wolficon-linkedin">
                                </use>
                            </svg>
                        </a>
                    </li>

                    <li>
                        <a href="https://www.instagram.com/ncstateengr" id="site-footer__social-instagram" data-ua-cat="Footer" data-ua-action="Social Channel Click" data-ua-label="Instagram">
                            <svg class="wolficon wolficon-instagram" role="img" aria-labelledby="wolficon-label-65c55965ca94b">
                                <title id="wolficon-label-65c55965ca94b">Instagram</title>
                                <use xlink:href="#wolficon-instagram">
                                </use>
                            </svg>
                        </a>
                    </li>

                    <li>
                        <a href="https://www.youtube.com//channel/UChv0LyPuE-o1F5dpNgGCS6g" id="site-footer__social-youtube" data-ua-cat="Footer" data-ua-action="Social Channel Click" data-ua-label="YouTube">
                            <svg class="wolficon wolficon-youtube" role="img" aria-labelledby="wolficon-label-65c55965ca94d">
                                <title id="wolficon-label-65c55965ca94d">YouTube</title>
                                <use xlink:href="#wolficon-youtube">
                                </use>
                            </svg>
                        </a>
                    </li>

                </ul>
            </div>

            <div class="site-footer__copyright">
                © 2024 NC State University. All rights reserved.
            </div>

        </div>
    </footer>
    <!-- END NCSU FOOTER -->

    <!-- ncsu brand assets JavaScript -->
    <script type="text/javascript" src="https://cdn.ncsu.edu/brand-assets/utility-bar/ub.php?color=gray&amp;showBrick=1&amp;ver=v3.3.5" id="ncsu_brand_bar-js"></script>
    <script type="text/javascript" src="https://cdn.ncsu.edu/brand-assets/bootstrap/js/bootstrap.min.js?ver=v3.3.5" id="ncsu_bootstrap_js-js"></script>

    <!-- VUE ssets and data -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <!-- <script> 
        //place your internal vue code here
        // or append an external .js file for your code
        //adding src="[yourVueCode.js]" to the opening script tag
        </script>  -->
</body>

</html>
              
            
!

CSS

              
                
/* Only use these styles for global styling of vuetify elements in the UI */
/* Form Styles: fonts and colors */


/* Form Styles: fonts and colors */
h2 {
    font-size:33px !important;
}

h3 {
    font-size:23px !important;
}

fieldStyle {
    font-family: "Roboto,sans-serif;    
}

/*END Form Styles: fonts and colors */





/*END Form Styles: fonts and colors */


/* Form Dimensions */


/* .field-height .v-text-field .v-input__control .v-input__slot {
    max-height: 32px !important;
    display: flex !important;
    align-items: center !important;
  } */




              
            
!

JS

              
                new Vue({
    el:'#app',
    vuetify: new Vuetify({
        theme:{
            themes:{
                light:{
                    primary:'#cc0000',
                    secondary:'#000000'
               }
            }
        }
    }),
    data: {
        pageTitle:'Reserve a Conference Room',
        message: 'Need a space for your next collaboration session? \n Fill out our form to reserve your next meeting. \n After submitting, your reservation will create a google calendar event.',
        currentUserEmail:'kdottoe@ncsu.edu'
        ,
        nameFromUnityid:'Kristal Ottoe',
        planMeetingTitle:'Plan your Meeting',
        pickedRadiobtn: 'no',
        titleAddUser: 'Add this Person to the Meeting:',
        items: [
            'LMP-228','LMP-401',
            'LMP-424','LMP-444'
         ],
        date: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0,10),
        dateMenu:false,
        time: null,
        timeMenu: false,
        durationMenu: false,
        numberFieldHeight:{ 
            fontSize:'65px',
        },
        dateTimePickerWidths: {
            maxWidth:'290px',
            minWidth:'290px'
        }
    },
    computed: {
       messageFormatted: function() {
         return this.message.split("\n")
        }
    },
    method: {
        isNewUser: function(picked){
            if( picked === 'yes'){
                return true
            } else if (picked === 'no'){
                return false
            }
        }
    }
})
              
            
!
999px

Console