/*
	==============================================================
	   Formatting for the GI Web Components
	==============================================================

*/

:root {
    /* ============       Survey      ============ */
    --gpi_table_txt_col: #2e5979; /* Colour for the Likert survey table (GPI dark blue #2e5979) */
    --gpi_table_bkg_col: #ffffff; /* Colour for the Likert survey table background */
    --gpi_table_alt_col: #c4cfd5; /* Alternating colour for Likert survey table background (GPI grey #c4cfd5) */
    --mtr_table_txt_col: #2e5979; /* Colour for the Likert survey table (GPI dark blue #2e5979) */
    --mtr_table_head_col: #c4cfd5; /* Head row colour for weighted survey table background (GPI grey #c4cfd5) */
    --mtr_table_bkg_col: #ffffff; /* Colour for the weighted survey table background */
    --mtr_table_alt_col: #f8f8f8; /* Alternating colour for weighted survey table background (GPI grey #c4cfd5) */
    --mtr_add_sub_col: #c4cfd5; /* Alternating colour for weighted survey table background (GPI grey #c4cfd5) */
    --mtr-nav-col: #2259e3; /* Colour for navigation arrows */
    --mtr-nav-txt-col: #579aed; /* Colour for navigation text */
    --mtr-nav-box-hov: #F0F0F0; /* Nav box hover colour */
    --mtr-link-col: #579aed; /* Link colour */
    --mtr-active-nav-col: #71ccdf; /* Active navigation button colour */
    --mtr-blue: #2259E3; /* myTeamRadar blue */
    --mtr-blue-sqr: #2158e3; /* Colour of blue square on logo */
    --mtr-blue-tab: #2259e3; /* Colour of blue link tab on brochure site */
    --mtr-highlight-col: #2259E3; /* Highlighted text colour */
    --mtr-loading-border-col: #f3f3f3; /* Border colour for loader */
}

h3 {
    text-align:center;
}

a:hover {
    text-decoration:none;
}

/*
	==============================================================
	   Page specific
	==============================================================
*/

/* Layout header */

#my_header {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    background-color:white;
}

#logoff-id {
    position: absolute;
    top: 24px;
    right: 14px;
    color: var(--mtr-nav-col);
}

    #logoff-id:hover {
        cursor: pointer;
        color: var(--mtr-link-col);
    }

    .mtr-row {
        padding-top: 40px;
        padding-left: 10px;
        padding-right: 10px;
    }

.mtr-link:hover {
    cursor:pointer;
}

/* myTeamRadar logo */
.logo_container {
    font-size: 22px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    width:250px;
}
    
.link_container {
    font-size: 18px;
    padding-top: 8px;
    padding-bottom: 16px;
}

.my {
    
    font-family: helvetica-w01-roman,helvetica-w02-roman,helvetica-lt-w10-roman,sans-serif;
    letter-spacing: 0.03em;
}

.teamradar {

    font-family: helvetica-w01-bold,helvetica-w02-bold,helvetica-lt-w10-bold,sans-serif;
    letter-spacing: 0.03em;
    color: var(--mtr-blue);
    font-weight:bolder;
}

/* Application div */
#MTR-content {

    padding-top: 40px;
}


/* Behaviour examples */
#example-text {
    padding-top: 10px;
}

/* Login and register pages */
#invalid-email {
    text-align:left;
    color:red;
}

#invalid-password {
    text-align:left;
    color:red;
}

#invalid-confirm {
    text-align: left;
    color: red;
}

#authorization-error {
    text-align: left;
    color: red;
}

#invalid-code {
    text-align: left;
    color: red;
}

#blue-square {
    max-width:200px;
}
/*
	==============================================================
	   General
	==============================================================
*/
body {
    padding-top: 50px;
    padding-bottom: 20px;
    font-size: 16px;
}

p {
    text-align:justify;
}

.centered {
    text-align:center;
}

.highlight {
    color: var(--mtr-highlight-col);
}

.red-txt {
    color: red;
}

.green-txt {
    color: green;
}

/* Used to configure 'read more' and 'read less' icons */
.plus {
    font-weight: bold;
    color: var(--mtr-link-col);
    display: inline;
}

    .plus:hover {
        cursor: pointer;
    }

.mtr-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.mtr-button {
    margin: auto;
    width: 200px;
    background-color: var(--mtr-nav-col);
    border: none;
    color: white;
    border-radius: 50px;
    padding: 15px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

    .mtr-button:hover {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    }

    .mtr-button:active {
        background-color: var(--mtr-active-nav-col);
    }

.mtr-notify {
    display: flex;
    align-items: center;
    justify-content: center;
}

.notify-text {
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
}

.notify-text-ok {
    color:green;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
}

.notify-text-warn {
    color: red;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
}

.notify-text-center {
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

.notify-link {
    cursor: pointer;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--mtr-link-col);
}


.tick:before {
    font-size: 25px;
    font-weight: 900;
    color: green;
    content: "\2713";
}

.cross:before {
    font-size: 20px;
    font-weight: 900;
    color: red;
    content: "\2716";
}

/* Animated loading icon */
.loader {
    border: 16px solid var(--mtr-loading-border-col);
    border-radius: 50%;
    border-top: 16px solid var(--mtr-blue); /* #3498db */
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

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

    100% {
        transform: rotate(360deg);
    }
}

/*
	==============================================================
	   Likert survey questions
	==============================================================
*/
/* Progress bar */
.gpi_progress {
    height: 30px;
}

/* Lead question */
.gpi_lead_qu {
    font-style: italic;
}

/* Survey label */
.gpi_surv_label {
    display: none;
}

/* Survey table */
.gpi_surv_table {
    display: table;
    width: 100%;
    color: var(--gpi_table_txt_col);
    overflow: auto;
}

/* Survey table row */
.gpi_surv_tr {
    display: table-row;
}

/* Survey table head */
.gpi_surv_thead {
    display: table-row;
}

/* Alternate table row colours */
div.gpi_surv_tr:nth-child(even) {
    background-color: var(--gpi_table_alt_col);
}

/* Alternate table row colours */
div.gpi_surv_tr:nth-child(odd) {
    background-color: var(--gpi_table_bkg_col);
}

/* Survey question */
.gpi_surv_qu {
    width: 25%;
    display: table-cell;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
    text-align: left;
}

/* Survey table data */
.gpi_surv_td {
    width: 15%;
    display: table-cell;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    vertical-align: middle;
}

/* Survey table head content */
.gpi_surv_th {
    width: 15%;
    display: table-cell;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    vertical-align: bottom;
}

/* Survey button box */
.gpi_surv_button_box {
    text-align: center;
}

/* Radio button */
.gpi_surv_radio {
}

@media only screen and (max-width: 768px) {
    .gpi_surv_radio {
        margin-left: 10pt;
    }
}

/* Scale the radio buttons on the survey */
input[type='radio'] {
    transform: scale(1.5);
}

/* Give pointer when user hovers over a radio button */
input:hover {
    cursor: pointer;
}

@media only screen and (max-width: 768px) {

    /* Survey table head (hides this on mobile) */
    .gpi_surv_thead {
        display: none;
    }

    /* Survey question */
    .gpi_surv_qu {
        display: block;
        width: 100%;
        margin-top: 5px;
    }

    /* Survey table data */
    .gpi_surv_td {
        display: block;
        width: 100%;
        background-color: var(--gpi_table_alt_col);
        text-align: left;
        margin-bottom: 5px;
        padding-left:20px;
    }

    /* Alternate table row colours */
    div.gpi_surv_tr:nth-child(even) {
        background-color: var(--gpi_table_bkg_col);
    }

    /* Survey label */
    .gpi_surv_label {
        display: inline;
        padding-left: 10px;
    }

    /* Radio button */
    
    
}


/*
	==============================================================
	   Weighted survey questions
	==============================================================
*/

/* Hide spinner arrows on input boxes */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Example total score*/
#mtr_sum_example {

    color:green;
}
/* Lead question */
.mtr_lead_qu {
    font-style: italic;
}

/* Survey label */
.mtr_surv_label {
    display: none;
}

/* Survey table */
.mtr_surv_table {
    display: table;
    width: 80%;
    margin:auto;
    padding-top:10px;
    padding-bottom:10px;
    color: var(--mtr_table_txt_col);
    overflow: auto;
}

/* Survey table row */
.mtr_surv_tr {
    display: table-row;
}

/* Survey table head */
.mtr_surv_thead {
    font-weight: bold;
    background-color: var(--mtr_table_head_col);
    display: table-row;
}

/* Alternate table row colours */
div.mtr_surv_tr:nth-child(even) {
    background-color: var(--mtr_table_bkg_col);
}

/* Alternate table row colours */
div.mtr_surv_tr:nth-child(odd) {
    background-color: var(--mtr_table_alt_col);
}

.mtr_input {
    width:50px;
    text-align:center;
    margin:auto;
}

.add_sub {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    background-color: var(--mtr_add_sub_col);
}

.add_sub:hover {
    cursor:pointer;
}

/* Survey question */
.mtr_surv_qu {
    display: table-cell;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
    text-align: left;
}

/* Survey table data */
.mtr_surv_td {
    width: 10%;
    display: table-cell;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    vertical-align: middle;
}

/* Survey table head content */
.mtr_surv_th {
    display: table-cell;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: bottom;
}

/* Survey button box */
.mtr_surv_button_box {
    text-align: center;
}


@media only screen and (max-width: 768px) {
    /* Survey table */
    .mtr_surv_table {
        width: 100%;       
    }

}

/*
	==============================================================
	   Navigation
	==============================================================
*/


.next {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid var(--mtr-nav-col);
    border-bottom: 25px solid transparent;
}

.prev {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-right: 50px solid var(--mtr-nav-col);
    border-bottom: 25px solid transparent;
}

.nav-text {
    padding: 20px;
    color: var(--mtr-nav-txt-col);
}

.nav-box {
    display: flex;
    align-items: center;
    cursor:pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
    .nav-box:hover {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    }



/*
	==============================================================
	   Form table
	==============================================================
*/
.mtr-form-table {
    width:100%;
    display: table;
    overflow: auto;
}

/* Form table row */
.mtr-form-tr {
    display: table-row;
}

/* Form table data */
.mtr-form-td {
    display: table-cell;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
    text-align:right;
}

.mtr-form-td-left {
    display: table-cell;
    padding-left:20px;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
    font-style:italic;
}

.mtr-form-td-norm {
    display: table-cell;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
}

.mtr-form-td-long {
    display: table-cell;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
    text-align: right;
    width:300px;
}

.mtr-form-label {
    padding-right:10px;
}

.mtr-textarea {
    width:100%;
}