/* The root section sets variables used throughout this sheet; change these values here rather than on an element-by-element basis. */

:root {
    --accent-one: rgba(0,159,223,1);
    --accent-one-mid: rgba(0,159,223,0.50);
    --accent-one-light: rgba(0,159,223,0.05);
    --accent-two: rgba(240,78,152,1);
    --accent-two-mid: rgba(240,78,152,0.5);
    --accent-two-light: rgba(240,78,152,0.1);
    --accent-three: rgba(0,45,114,1);
    --accent-three-mid: rgba(0,45,114,0.5);
    --accent-three-light: rgba(0,45,114,0.1);
    --accent-four: rgba(128,130,133,1);
    --accent-four-mid: rgba(128,130,133,0.5);
    --accent-four-light: rgba(128,130,133,0.1);
    --accent-five: rgba(142,58,128,1);
    --accent-five-mid: rgba(142,58,128,0.5);
    --accent-five-light: rgba(142,58,128,0.05);
    --light-text: #FFFFFF;
    --mid-text: #D5D5D5;
    --dark-text: #000000;
    --error: #F04E98;
    --standard-box-shadow: 2px 2px 1px rgba(128,130,133,0.15);
    --roundness: 20px;
    --transition: all 0.3s ease;
}

/* IE Hacks */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    font-family: Arial, sans-serif;
}



/* Animations */



@keyframes check-scale-down {

    0% {
        transform: scale(2.5) rotateZ(-45deg);
    }

    75% {
        transform: scale(1.0) rotateZ(-45deg);
    }

    100% {
        transform: scale(1.3) rotateZ(-45deg);
    }
}



@webkit-keyframes check-scale-down {

    0% {
        -webkit-transform: scale(2.5) rotateZ(-45deg);
    }

    100% {
        -webkit-transform: scale(1.3) rotateZ(-45deg);
    }
}





@-webkit-keyframes tracking-in-expand-fwd {

    0% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-700px);
        transform: translateZ(-700px);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes tracking-in-expand-fwd {

    0% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-700px);
        transform: translateZ(-700px);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}





@-webkit-keyframes flip-in-hor-top {

    0% {
        -webkit-transform: rotateX(-80deg);
        transform: rotateX(-80deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
}

@keyframes flip-in-hor-top {

    0% {
        -webkit-transform: rotateX(-80deg);
        transform: rotateX(-80deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
}



@-webkit-keyframes jello-vertical {

    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    40% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    50% {
        -webkit-transform: scale3d(0.85, 1.15, 1);
        transform: scale3d(0.85, 1.15, 1);
    }

    65% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    75% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes jello-vertical {

    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    40% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    50% {
        -webkit-transform: scale3d(0.85, 1.15, 1);
        transform: scale3d(0.85, 1.15, 1);
    }

    65% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    75% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}



@-webkit-keyframes swing-in-top-fwd {

    0% {
        -webkit-transform: rotateX(-100deg);
        transform: rotateX(-100deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
    }
}

@keyframes swing-in-top-fwd {

    0% {
        -webkit-transform: rotateX(-100deg);
        transform: rotateX(-100deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
    }

    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
    }
}



@-webkit-keyframes fade-out {

    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-out {

    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}



@-webkit-keyframes scale-in-hor-center {

    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes scale-in-hor-center {

    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        opacity: 1;
    }
}





/* Navigation */



.navbar {
    background-color: var(--accent-three);
    box-shadow: var(--standard-box-shadow);
    border-color: var(--accent-three);
}



.dropdown-menu {
    background: linear-gradient(to bottom, var(--accent-three), var(--accent-three-mid)) !important;
    border-radius: var(--roundness);
    border: 0px solid transparent;
    padding-bottom: 20px;
    box-shadow: var(--standard-box-shadow);
    -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

.dropdown-menu > li {
    font-weight: bold;
    color: var(--light-text);
    padding: 0px 10px 0px 10px;
}


    .dropdown-menu > li > a {
        outline-style: none;
    }



        .dropdown-menu > li > a:hover {
            background-color: var(--accent-two) !important;
            border-radius: var(--roundness);
        }



            /* Disables custom link underline from applying to dropdown items*/

            .dropdown-menu > li > a:hover:before {
                visibility: hidden;
            }



.navbar-nav > li > a {
    font-weight: bold;
    color: var(--light-text) !important;
}



    .navbar-nav > li > a:before {
        background-color: transparent;
    }



    .navbar-nav > li > a:hover {
        color: var(--accent-two) !important;
        outline-style: none;
        /* -webkit-animation: jello-vertical 0.5s both;

	        animation: jello-vertical 0.5s both; */
    }



.navbar-nav > .open > a:hover {
    color: var(--light-text) !important;
    animation: none;
}



.navbar-nav > li > a:active {
    color: var(--light-text) !important;
}



.open > a {
    background-color: var(--accent-two) !important;
}



body {
    font-family: Arial, sans-serif;
    background-color: var(--accent-three-light);
}



.footer {
    background-color: var(--accent-four-mid);
    color: var(--light-text);
    font-weight: bold;
    text-align: center;
    padding-top: 0px;
    height: 40px;
}



    .footer p {
        padding-top: 10px;
    }



.page-end-links {
    margin-left: -15px;
    margin-right: -15px;
    border-top: solid 0px var(--accent-three-light);
    box-shadow: inset 0px 11px 8px -10px var(--accent-four-mid);
}



.body-content {
    background-color: var(--light-text);
    box-shadow: 0px 0px 4px var(--accent-four-mid);
    border-radius: 0px 0px var(--roundness) var(--roundness);
    /* Adds central 'page' */
}



#tabs {
    padding-right: 45px;
    /* Fixes tabs div not being aligned within the 'page' */
}



.nav-tabs {
    border: none;
}



    .nav-tabs > li > a:before {
        background-color: transparent;
    }



    .nav-tabs > li > a {
        outline-style: none;
        font-weight: bold;
        border-radius: var(--roundness) var(--roundness) 0 0;
        border-bottom: transparent;
        bottom: -3px;
        box-shadow: 0px 1px 1px var(--accent-four-light) inset;
        transition: var(--transition);
    }



        .nav-tabs > li > a:hover {
            background-color: var(--light-text);
            background: linear-gradient(to top, var(--accent-four-light), 15%, white);
            bottom: 0px;
            transition: var(--transition);
        }



    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        background: none;
        background-color: var(--accent-four-light);
        border-radius: var(--roundness) var(--roundness) 0 0;
        border-color: var(--accent-four-light);
        border-bottom: transparent;
        bottom: 1px;
        transition-delay: 0.1s;
    }



/* Links */

a {
    color: var(--accent-two);
    position: relative;
}



    a:visited {
        color: var(--accent-two);
    }



    a:active {
        outline: none;
    }



    a:hover {
        color: var(--accent-two);
        text-decoration: none;
    }



/* Custom underline for hovered links */

    a:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 0.11em;
        bottom: 0;
        left: 0;
        background-color: var(--accent-two-mid);
        visibility: hidden;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        transition: all .25s cubic-bezier(1,.25,0,.75) 0s;
    }



    a:hover:before {
        visibility: visible;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }



/* Headings */

h1 {
    color: var(--accent-three);
    font-weight: bold;
    padding-left: 0px;
    -webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}



h2 {
    color: var(--accent-three);
    font-weight: bold;
    padding-left: 0px;
}



h3 {
    background-color: var(--accent-three);
    background: linear-gradient(to right, var(--accent-three), var(--accent-three-mid));
    color: var(--light-text);
    font-weight: bold;
    margin-top: 50px;
    margin-left: -10px;
    margin-right: -10px;
    padding: 5px 10px 5px 10px;
    border-radius: var(--roundness);
    display: flex;
}



.well h3 {
    margin-left: inherit;
    margin-right: inherit;
    background: none;
    border: none;
    box-shadow: none;
}





h4 {
    color: var(--accent-three);
    padding-left: 0px;
}



h5 {
    color: var(--accent-three);
    padding-left: 0px;
}



h3.panel-title {
    background-color: transparent;
    /* Keeps 'Quick Nav' legible given wider h3 changes */
}





/* Form inputs */



input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    /* Removes default blue outline from active UI elements */
}



.form-control {
    background-color: var(--accent-one-light) !important;
    border-color: var(--accent-four-light);
    border-radius: var(--roundness) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8' standalone='no'?%3e%3c!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' version='1.1' id='Capa_1' x='0px' y='0px' width='292.362px' height='292.362px' viewBox='0 0 292.362 292.362' style='enable-background:new 0 0 292.362 292.362;' xml:space='preserve' sodipodi:docname='caret-down.svg' inkscape:version='0.92.4 (5da689c313, 2019-01-14)'%3e%3cmetadata id='metadata854'%3e%3crdf:RDF%3e%3ccc:Work rdf:about=''%3e%3cdc:format%3eimage/svg+xml%3c/dc:format%3e%3cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3e%3c/cc:Work%3e%3c/rdf:RDF%3e%3c/metadata%3e%3cdefs id='defs852' /%3e%3csodipodi:namedview pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='1920' inkscape:window-height='1017' id='namedview850' showgrid='false' inkscape:zoom='2.9005138' inkscape:cx='146.181' inkscape:cy='146.181' inkscape:window-x='1358' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:current-layer='Capa_1' /%3e%3cg id='g817' style='fill:%23808285;fill-opacity:1'%3e%3cpath d='m 286.935,69.377 c -3.614,-3.617 -7.898,-5.424 -12.848,-5.424 H 18.274 c -4.952,0 -9.233,1.807 -12.85,5.424 C 1.807,72.998 0,77.279 0,82.228 c 0,4.948 1.807,9.229 5.424,12.847 l 127.907,127.907 c 3.621,3.617 7.902,5.428 12.85,5.428 4.948,0 9.233,-1.811 12.847,-5.428 L 286.935,95.074 c 3.613,-3.617 5.427,-7.898 5.427,-12.847 0,-4.948 -1.814,-9.229 -5.427,-12.85 z' id='path815' inkscape:connector-curvature='0' style='fill:%23808285;fill-opacity:1' /%3e%3c/g%3e%3c/svg%3e");
    background-repeat: no-repeat, repeat;
    background-position: right .8em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
    .form-control {
	background-image: none;
    } 
}

.form-control[type="text"], .form-control[type="search"], textarea.form-control {
    background-image: none;
}


.form-control:hover, .form-control:focus {
        border-color: var(--accent-one);
        box-shadow: 0 0 0 transparent;
    }



.form-signin input[type="text"], .form-signin input[type="password"] {
    background-color: var(--accent-two-light) !important;
    border-color: var(--accent-four-light);
    border-radius: var(--roundness) !important;
}



.form-control[disabled], .form-control[disabled]:hover {
    background-color: var(--accent-four-light) !important;
    border-color: transparent;
    box-shadow: inherit;
}



select.input-sm {
    line-height: inherit;
}



.datepicker-field {
    border-radius: var(--roundness) !important;
}





/* Validation */



.has-error .form-control, .has-error .form-control:focus {
    border-color: var(--error);
    border-width: 2px;
    border-style: dashed;
    box-shadow: none;
}



.tooltip-inner {
    background-color: var(--accent-two);
    border: 1px solid var(--accent-two);
    color: var(--light-text);
    font-weight: bold;
    box-shadow: var(--standard-box-shadow);
    -webkit-animation: jello-vertical 0.5s both;
    animation: jello-vertical 0.5s both;
}



    .tooltip-inner::after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: var(--accent-two) transparent transparent transparent;
    }



.tooltip .tooltip-arrow {
    display: none;
}



.tooltip-alert.alert-danger {
    background-color: var(--accent-two);
    color: var(--light-text);
}





/* Question labels */

.col-md-4.control-label {
    color: var(--accent-one);
}





/* Guidance button */

.btn.btn-sm {
    background-color: var(--accent-two-mid);
    border-color: var(--accent-two-light);
    color: var(--light-text);
    border-radius: var(--roundness) !important;
    box-shadow: var(--standard-box-shadow);
    width: 32px;
    transition: var(--transition);
    outline: none;
    cursor: help;
}



    .btn.btn-sm:hover,
    .btn.btn-sm:active {
        background-color: var(--accent-two);
        width: 90px;
        transition: var(--transition);
    }



        .btn.btn-sm:hover:after, .btn.btn-sm:active:after {
            content: "Guidance";
            -webkit-animation: flip-in-hor-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: flip-in-hor-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }



/* Guidance pane */

.alert.alert-info.guidance {
    background-color: var(--accent-two-light);
    border-color: var(--accent-two-mid);
    border-style: dashed;
    background: linear-gradient(135deg, var(--accent-two-light) 75%, white);
    border-radius: var(--roundness);
    color: var(--dark-text);
    -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    animation-delay: 0.3s;
}



/* Quick Nav */



@media(max-width: 768px) {

    .quick-nav-panel {
        display: none;
    }
}



.quick-nav-panel {
    display: none;
}



.panel {
    border-radius: var(--roundness);
    box-shadow: var(--standard-box-shadow);
}



.panel-heading {
    border-radius: var(--roundness) var(--roundness) 0 0;
}



.panel-body {
    -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}







.well {
    /* display: block; */
    background-color: var(--accent-four-light);
    background: linear-gradient(135deg, var(--accent-four-light), white);
    /* border-color: var(--accent-four-mid);

	border-style: dashed; */
    border-radius: var(--roundness);
    box-shadow: var(--standard-box-shadow) inset;
}



.well-white {
    background: none;
}



.div-padding.well {
    background: none;
    background-color: var(--accent-four-light);
    border-radius: 0 var(--roundness) var(--roundness) var(--roundness);
    border-style: solid;
    border-color: var(--accent-four-light);
    border-top: none;
    box-shadow: none;
}



/* Routed question inputs within wells */

label.col-md-3.control-label {
    color: var(--accent-five);
}



.well > div .form-control {
    background-color: var(--accent-five-light) !important;
}



.well > .form-group .form-control:hover,
.well > .form-group .form-control:focus {
    border-color: var(--accent-five);
}



/* Pagination */



.paginate_button a {
    color: var(--accent-two) !important;
    font-weight: bold;
    outline: none;
}



    .paginate_button a:before {
        background-color: transparent;
    }



    .paginate_button a:hover {
        background-color: var(--accent-two-light) !important;
    }



    .paginate_button a:focus {
        background-color: var(--light-text) !important;
    }



.paginate_button.disabled a {
    color: var(--accent-four-mid) !important;
}



    .paginate_button.disabled a:hover {
        background-color: var(--accent-four-light) !important;
    }



.paginate_button.active a {
    background-color: var(--accent-two);
    border-color: var(--accent-two-light);
    color: var(--light-text) !important;
    font-weight: bold;
}



    .paginate_button.active a:hover,
    .paginate_button.active a:focus {
        background-color: var(--accent-two) !important;
        border-color: var(--accent-two-light);
    }



.paginate_button.previous a {
    border-radius: var(--roundness) 0 0 var(--roundness) !important;
}



.paginate_button.next a {
    border-radius: 0 var(--roundness) var(--roundness) 0 !important;
}



/* Tables */

table {
    border: solid var(--accent-three-light) 1px !important;
    border-collapse: separate;
    border-radius: var(--roundness) !important;
    box-shadow: var(--standard-box-shadow);
    overflow: hidden;
}



th {
    background-color: var(--accent-three-light) !important;
    color: var(--accent-three);
    border: none !important;
}



    th:first-child {
        border-radius: var(--roundness) 0 0 0 !important;
        padding-left: 15px !important;
    }



    th:last-child {
        border-radius: 0 var(--roundness) 0 0 !important;
    }



td {
    border-color: var(--accent-four-light) !important;
    border: none !important;
}



    td:first-child {
        padding-left: 15px !important;
    }



tbody > tr:last-child {
    border: none;
    border-radius: var(--roundness) !important;
}



tr:nth-of-type(odd) {
    background-color: var(--light-text) !important;
}



tr:nth-of-type(even) {
    background-color: var(--accent-four-light) !important;
}





/* Date Picker */



.datepicker {
    padding-bottom: 5px;
}



    .datepicker.dropdown-menu {
        animation: none;
    }



.datepicker-dropdown::before {
    display: none;
}



.datepicker-dropdown::after {
    border-bottom-color: var(--accent-three)
    /*display: none; */
}



.datepicker-dropdown.datepicker-orient-left:before,
.datepicker-dropdown.datepicker-orient-left:after {
    left: 20px;
}



.datepicker-dropdown.datepicker-orient-top:after {
    border-top: solid 6px var(--accent-three-mid);
}



.datepicker th {
    border-radius: 0px;
}



th.dow {
    border-radius: 0px !important;
}



th.clear {
    border-radius: 0px !important;
}



.datepicker tr:nth-of-type(even) {
    background-color: var(--light-text) !important;
}



td.day {
    border-radius: 0px !important;
}



    td.day:hover {
        background-color: var(--accent-two-light) !important;
    }



td.old.day,
td.new.day {
    font-style: oblique;
}



    td.old.day:hover,
    td.new.day:hover {
        background-color: var(--accent-four-light) !important;
    }



td.active.day {
    background: none !important;
    background-color: var(--accent-two) !important;
}





/* Sign In */



.form-signin {
    opacity: 1;
    box-shadow: var(--standard-box-shadow);
    border: solid 2px var(--accent-three);
}



    .form-signin .btn[type="submit"] {
        width: 100%;
        text-transform: uppercase;
    }





/* Buttons */



.btn:visited {
    color: inherit;
}



.btn.disabled {
    background-color: var(--accent-four-light) !important;
    background: linear-gradient(to top, var(--accent-four-light) 50%, var(--accent-four-light) 50%, var(--light-text));
    border-color: var(--accent-four-mid);
    color: var(--accent-four-mid) !important;
}



    .btn.disabled:hover {
        background: linear-gradient(to top, var(--accent-four-light) 50%, var(--accent-four-light) 50%, var(--light-text));
        border-color: var(--accent-four);
        color: var(--accent-four);
    }



.btn-primary {
    border-radius: var(--roundness) !important;
    border-color: var(--accent-two);
    /*background: linear-gradient(to top, var(--accent-two) 50%, var(--accent-two-light) 50%, var(--light-text));

	background-position: top;

    background-size: 100% 200%; */
    background: linear-gradient(to right, var(--accent-two) 50%, var(--accent-two-light) 50%, var(--light-text));
    background-position: right;
    background-size: 200% 100%;
    border-width: 2px;
    color: var(--accent-two);
    font-weight: bold;
    transition: var(--transition);
}



    .btn-primary:hover, .btn-primary:focus {
        /*background: linear-gradient(to top, var(--accent-two) 50%, var(--light-text) 50%);

	background-position: bottom;

	background-size: 100% 200%;*/
        background: linear-gradient(to right, var(--accent-two) 50%, var(--accent-two-light) 50%, var(--light-text));
        background-position: left;
        background-size: 200% 100%;
        border-color: var(--accent-two);
        color: var(--light-text);
        transition: var(--transition);
        outline: none;
    }



.btn-lg {
    box-shadow: var(--standard-box-shadow);
}



.btn-xs {
    margin-bottom: 5px;
}



.btn-default {
    background-color: var(--accent-four-mid);
    border-color: var(--accent-two-light);
    border-radius: var(--roundness);
    border-width: 0px;
    margin: 5px !important;
    box-shadow: -2px -2px 0px var(--accent-four-mid) inset;
    font-weight: bold;
    color: var(--light-text);
    text-transform: uppercase;
    focus: none;
}



    .btn-default:hover {
        background-color: var(--accent-four-mid);
        border-color: var(--accent-two);
        box-shadow: 2px 2px 0px var(--accent-four-mid) inset;
        transition: var(--transition);
    }





[id^="btnCreate"]::before {
    font-family: "Glyphicons Halflings";
    content: "\2b";
    padding-right: 5px;
    font-size: 0.8em;
}



#btnSave {
    text-transform: uppercase;
}



    #btnSave::before {
        font-family: 'Glyphicons Halflings';
        font-size: 0.8em;
        content: "\e166";
        padding-right: 10px;
    }



#btnDelete {
    background-color: var(--accent-four) !important;
    background: linear-gradient(to left, var(--accent-four) 50%, var(--accent-four-light) 50%, var(--light-text)) !important;
    background-position: left !important;
    background-size: 200% 100% !important;
    border-color: var(--accent-four) !important;
    color: var(--accent-four) !important;
}



    #btnDelete:hover {
        background-position: right !important;
        color: var(--light-text) !important;
    }



    #btnDelete::before {
        font-family: "Glyphicons Halflings";
        content: "\e020";
        padding-right: 5px;
        font-size: 0.7em;
    }



a > .blockButton {
    border-radius: var(--roundness);
    border-color: var(--accent-two);
    border-style: solid;
    border-width: 0.15em;
    background: linear-gradient(to top, var(--accent-two) 50%, var(--accent-two-light) 50%, var(--light-text));
    background-position: top;
    background-size: 100% 200%;
    padding: 10px;
    text-align: center;
    color: var(--accent-two);
    font-weight: bold;
    transition: var(--transition);
    box-shadow: var(--standard-box-shadow);
    cursor: pointer;
}



    a > .blockButton:hover, blockButton:active {
        background: linear-gradient(to top, var(--accent-two) 50%, var(--accent-two-light) 50%, var(--light-text));
        background-position: bottom;
        background-size: 100% 200%;
        padding: 10px;
        color: var(--light-text);
        transition: var(--transition);
    }



.blockButton {
    background: linear-gradient(to top, var(--accent-four-light) 50%, var(--accent-four-light) 50%, var(--light-text));
    background-position: top;
    background-size: 100% 200%;
    padding: 10px;
    border-radius: var(--roundness);
    border-color: var(--accent-four-mid);
    border-style: dashed;
    border-width: 0.15em;
    color: var(--accent-four-mid);
    font-weight: bold;
    text-align: center;
    transition: var(--transition);
    cursor: not-allowed;
}

.blockButton:hover {
    background: linear-gradient(to top, var(--accent-four-light) 50%, var(--accent-four-light) 50%, var(--light-text));
    background-position: bottom;
    background-size: 100% 200%;
    transition: var(--transition);
}



h3.pull-left {
    background-color: transparent;
    color: var(--accent-three);
}



.well h3 {
    margin-top: 0px;
    background-color: transparent;
    color: var(--accent-three);
}



/* Notifications/toasts */



.toast-top-center {
    /* Hijacking this to display in centre of screen */
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}



    .toast-top-center > div {
        width: auto !important;
        max-width: 75%;
        margin: 0 0 0 0;
    }



#toast-container > div, #toast-container > div:hover {
    opacity: 1;
    border-radius: var(--roundness);
    box-shadow: var(--standard-box-shadow);
    -webkit-animation: jello-vertical 0.5s both;
    animation: jello-vertical 0.5s both;
}



.toast-title {
    display: none;
}



.toast-success {
    background-color: var(--accent-one);
    /*background: linear-gradient(to bottom, var(--accent-two) 50%, var(--accent-two-mid) 50%, var(--light-text));*/
}



.toast-error {
    background-color: var(--accent-two);
}


/* Custom Checkboxes*/

/*
label {
    color: var(--accent-four);
}

label:hover {
        color: black;
}


input[type="checkbox"] {
    visibility: hidden;
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   input[type="checkbox"] {
    		visibility: visible !important;
	}
}


    input[type="checkbox"] + label::before {
        visibility: visible;
        content: "";
        display: inline-block;
        height: 16px;
        width: 16px;
        background-color: var(--accent-four-light);
        border: 1px solid var(--accent-four-light);
        border-radius: 4px;
    }



    input[type="checkbox"]:checked + label::before {
        background-color: inherit;
        border-color: transparent;
    }



    input[type="checkbox"]:hover + label::before {
        border: 1px solid var(--accent-four-mid);
    }



    input[type="checkbox"] + label::after, input[type="checkbox"]:checked:hover + label::after {
        visibility: visible;
        content: "";
        display: inline-block;
        height: 5px;
        width: 9px;
        border-left: 0.17em solid;
        border-bottom: 0.17em solid;
        border-left-color: var(--accent-two);
        border-bottom-color: var(--accent-one);
        border-bottom-left-radius: 2px;
        transform: rotate(-45deg);
    }



    input[type="checkbox"]:hover + label::after {
        visibility: visible;
        content: "";
        display: inline-block;
        height: 5px;
        width: 9px;
        border-left: 0.17em solid;
        border-bottom: 0.17em solid;
        border-color: var(--accent-four-mid);
        border-bottom-left-radius: 2px;
        transform: rotate(-45deg) scale(1.3);
    }



    input[type="checkbox"]+ label::before,
    input[type="checkbox"]+ label::after {
        position: absolute;
    }



    input[type="checkbox"] + label::before {
        top: -1px;
        left: 0px;
    }



    input[type="checkbox"] + label::after {
        left: 4px;
        top: 4px;
    }



    input[type="checkbox"] + label::after {
        content: none;
    }



    input[type="checkbox"]:checked + label::after {
        content: "";
        -webkit-animation: check-scale-down 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: check-scale-down 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
*/