.group {
        position: relative;
        margin-bottom: 30px;
    }
    select {
        font-size: 14px;
        padding: 5px 10px 5px 5px;
        display: block;

        background-color: transparent;
        border: none;
        border-bottom: 1px solid #757575;
    }
    select:focus {
        outline: none;
        border-bottom: 2px solid #0088cc;
    }
    .input {
        font-size: 14px;
        padding: 5px 10px 5px 5px;
        display: block;

        background-color: transparent;
        border: none;
        border-bottom: 1px solid #757575;
    }

        .input:focus {
            outline: none;
            border-bottom: 2px solid #0088cc;
        }

    .label {
        color: #999;
        font-size: 14px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 10px;
        top: 5px;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }

    .input:focus ~ .label, .input:valid ~ .label {
        top: -17px;
        font-size: 14px;
        color: #0088cc;
    }
    select:focus ~ .label, select:valid ~ .label {
        top: -17px;
        font-size: 14px;
        color: #0088cc;
    }

    .disabledlabel {
        color: #0088cc;
        font-size: 14px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 15px;
         top: -19px;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }
     .unselectable { 
      -webkit-user-select: none; 
      -webkit-touch-callout: none; 
      -moz-user-select: none; 
      -ms-user-select: none; 
      user-select: none;    
      } 

    .bar {
        position: relative;
        display: block;
    }

    .bar:before, .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 0;
        position: absolute;
        background: #0088cc;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }

    .bar:before {
        left: 0%;
    }

    .bar:after {
        right: 0%;
    }

    .input:focus ~ .bar:before, .input:focus ~ .bar:after {
        width: 0%;
    }
    select:focus ~ .bar:before, select:focus ~ .bar:after {
        width: 0%;
    }

    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .highlight {
        position: absolute;
        height: 50%;
        width:100%;
        top: 15%;
        left: 0;
        pointer-events: none;
        opacity: 0.5;
    }

    .input:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }
    select:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    #page-title 
    {
        color: #0088cc; 
        margin-bottom: 0px; 
        margin-top: 0.7em;
    }

    @-webkit-keyframes inputHighlighter {
        from {
            background: #0088cc;
        }

        to {
            width: 0;
            background: transparent;
        }
    }

    @-moz-keyframes inputHighlighter {
        from {
            background: #0088cc;
        }

        to {
            width: 0;
            background: transparent;
        }
    }

    @keyframes inputHighlighter {
        from {
            background: #0088cc;
        }

        to {
            width: 0;
            background: transparent;
        }
    }
    /*
    Extra small devices (portrait phones, less than 544px) 
    No media query since this is the default in Bootstrap because it is "mobile first"
    */
    /*h2 {font-size:18px;}*/ /*1rem = 16px*/
    /*.fas fa-edit {
        font-size:2em;
    }
    .fa {
        font-size:0.75em;
    }*/
    /*
    ####################################################
    M E D I A  Q U E R I E S
    ####################################################
    */

    /*
    ::::::::::::::::::::::::::::::::::::::::::::::::::::
    Bootstrap 4 breakpoints
    */

    @media(max-width:479px) {
        html h2 {
            font-size: 18px;
        }

        .fa-3x {
            font-size: 2.5em;
        }
    }
    /* Small devices (landscape phones, 544px and up) */
    @media (min-width: 576px) {
        h2 {
            font-size: 24px;
        }
        /*1rem = 16px*/
    }

    /* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
    @media (min-width: 768px) {
        h2 {
            font-size: 2rem;
        }
        /*1rem = 16px*/
    }

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
        h2 {
            font-size: 2.5rem;
        }
        /*1rem = 16px*/
    }

    /* Extra large devices (large desktops, 1200px and up) */
    @media (min-width: 1200px) {
        h2 {
            font-size: 3rem;
        }
        /*1rem = 16px*/
    }

    /*
    ::::::::::::::::::::::::::::::::::::::::::::::::::::
    Custom media queries
    */

    /* Set width to make card deck cards 100% width */
    @media (min-width: 950px) and (max-width:1100px) {
        h1 {
            font-size: 2.75rem;
            color: red;
        }
    }