.pantone632 {
    color: rgb(0,145,179); /* Pantone 632 */
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -o-transition: background 0.5s;
    transition: background 0.5s;
}

    .pantone632:hover,
    .pantone632:active {
        color: rgb(0,93,131); /* Pantone 634 */
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
    }

.pantone634 {
    color: rgb(0,93,131); /* Pantone 634 */
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -o-transition: background 0.5s;
    transition: background 0.5s;
}

    .pantone634:hover,
    .pantone634:active {
        color: rgb(0,145,179); /* Pantone 632 */
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
    }



    /* NEEDS TIDYUP UP FROM HERE DOWN */


.admin_container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    min-height: 0
}

#admin_header,
#admin_body,
#admin_footer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

#admin_header {
    flex-shrink: 0;
    background-color: rgb(116,196,214); /* Pantone 630 */
}

#admin_body {
    min-height: 0;
    height: 100%
}

.filters,
.export {
    flex-shrink: 0;
    padding: 10px;
}

@media print {
    .export {
        display: none;
    }
}

#admin_footer {
    color: rgb(255,255,255);
    background-color: rgb(84,86,91); /* PANTONE Cool Gray 11 C */
    padding: 5px 10px;
    text-align: right
}

.list_and_form_wrapper {
    display: flex;
    flex-direction: row;
    min-height: 0;
    /*height :100%*/
    flex: 1
}

.list_container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    border-right: solid 1px rgb(204,204,204); /* 20% Black */
    background: rgb(204,204,204); /* 20% Black */ /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(217,217,214,0.25) 0%, rgba(217,217,214,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(217,217,214,0.25) 0%,rgba(217,217,214,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(217,217,214,0.25) 0%,rgba(217,217,214,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*flex: 0 0 250px; MS 19 04 21 dynamic width list development */
}

.form_container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    /*flex: 1 1 auto; MS 19 04 21 dynamic width list development */
    width: 100%
}


#list_filter {
    display: flex;
    align-items: baseline;
    background-color: rgb(255,255,255);
    padding: 5px 10px;
}

    #list_filter input,
    #list_filter select {
        margin-left: 10px;
    }

    #list_filter .form_feedback {
        margin-left: auto;
        margin-right: auto;
    }

@media print {
    #list_filter {
        display: none;
    }

    #admin_footer {
        background-color: rgb(255,255,255);
        color: rgb(0,0,0)
    }
}

/* MAIN CONTAINERS */


/* PANEL STYLES */
.panel {
    margin: 0;
    padding: 0;
    background: rgb(255,255,255);
}

.footer {
    margin: 10px 0;
    padding: 0;
}

    .footer p {
        margin: 0;
        color: rgb(255,255,255);
        font-size: 80%
    }

.content {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.bordered {
    border-top: solid 1px rgb(204,204,204); /* 20% Black */
    border-bottom: solid 1px rgb(204,204,204); /* 20% Black */
}

.margined {
    margin: 0 20px;
}

/* PANEL STYLES */


/* FORM STYLES */

.validation_list ul {
    margin: 0;
    margin-left: 20px;
    padding: 0
}

    .validation_list ul li {
        padding-bottom: 10px;
        list-style-type: none;
        font-style: italic
    }

        .validation_list ul li:last-child {
            padding-bottom: 0
        }

a.text_link {
    color: rgb(51,51,51); /* 80% Black */
    font-weight: 700;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s; /* IE10 is actually unprefixed */
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

    a.text_link:hover,
    a.text_link:active {
        color: rgb(204,204,204); /* 20% Black */
        background: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none; /* IE10 is actually unprefixed */
        -o-transition: none;
        transition: none;
    }


.fade {
    animation: fadeout 2s 1;
    -webkit-animation: fadeout 2s 1;
    animation-delay: 2s;
    -webkit-animation-delay: 2s; /* Safari and Chrome */
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


div.spinner {
    display: block;
    width: 200px;
    height: 200px;
    margin: auto;
    -webkit-animation: spin 3s linear infinite; /* Safari 4+ */
    -moz-animation: spin 3s linear infinite; /* Fx 5+ */
    -o-animation: spin 3s linear infinite; /* Opera 12+ */
    animation: spin 3s linear infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(360deg);
    }
}

@-o-keyframes spin {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* participant info */

.participant_info {
    width: 500px;
    padding: 0;
    margin: auto;
    background: #ffffff;
    box-shadow: rgba(51,51,51,0.5) 0 5px 10px; /* 80% Black */
    -webkit-border-radius: 3px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-border-radius: 3px; /* Firefox 1-3.6 */
    border-radius: 3px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}

    .participant_info > .scroller {
        height: 350px;
        overflow-y: auto
    }

    .participant_info h2,
    .participant_info p {
        margin: 10px 0;
        padding: 0 10px;
    }

    .participant_info label {
        padding: 0 !important;
    }

    .participant_info .button_group {
        padding: 10px;
    }

/* participant info */

.filter_group {
    background: rgba(204,204,204,0.25);
    -webkit-border-radius: 3px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-border-radius: 3px; /* Firefox 1-3.6 */
    border-radius: 3px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    display: inline-block;
    padding-left: 10px;
}

    .filter_group > span > input[type=text] {
        padding: 6px;
        margin: 5px;
        margin-right: 10px;
        background: rgba(255,255,255,1);
    }



.questionnaire-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.questionnaire-content {
    background: rgba(255,255,255,1);
    padding: 20px;
}

.progress-container {
    display: flex;
    width: 100%;
    border-radius: 20px;
    overflow: hidden
}

.progress-segment {
    flex-grow: 1;
    height: 10px;
    background: rgba(0,0,0,0.1);
}

    .progress-segment:not(first-child) {
        border-left: solid 1px rgb(255,255,255)
    }

.progress-complete {
    background: rgba(0,0,0,0.25);
}







.report_container {
    width: 100%;
    padding: 10px 20px;
    overflow-y: auto
}

    .report_container h3 {
        margin-top: 2em
    }

.report_progress {
    width: 100%;
    padding: 10px;
    font-weight: 700;
    font-size: 120%;
    background-color: rgba(116,196,214,0.25); /* Pantone 630 */
}

    .report_progress > span {
        vertical-align: middle;
    }

        .report_progress > span:not(:last-child):after {
            display: inline-block;
            padding: 0 10px;
            color: rgb(116,196,214); /* Pantone 630 */
            content: "◀";
            transform: rotate(180deg)
        }

        .report_progress > span:last-child {
            font-style: italic;
            color: rgb(0,93,131); /* Pantone 634 */
        }

.report_step {
    font-size: 150%;
    font-style: italic;
    text-align: center;
    padding: 40px 20px 20px 20px !important;
}

.report_form {
    width: 50%;
    margin: auto;
    text-align: center
}

.report_container table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    border: solid 1px rgba(217,217,214,0.5)
}

    .report_container table tr td,
    .report_container table tr th {
        padding: 10px
    }

        .report_container table tr td:not(:first-child),
        .report_container table tr th:not(:first-child) {
            text-align: center
        }

        .report_container table tr td:first-child,
        .report_container table tr th:first-child {
            text-align: left
        }

    .report_container table tr:nth-child(2n+2) td,
    .report_container table tr:nth-child(2n+2) th {
        background-color: rgba(217,217,214,0.25)
    }

    .report_container table tr:last-child td,
    .report_container table tr:last-child th {
        background-color: rgba(217,217,214,0.5)
    }