/* Orima_Wordmark logo dimensions: w=400, h=103*/


/* mobile layout*/
@media (max-width: 419px) {
    div.logo-bar {
        height: 110px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 0;
        width: 200px;
        height: 100px;
        background-image: url('../images/Monash-Paul-Ramsay-logo.jpg');
    }

    div.logo-bar #right-logo {
        display: none;
    }

    #page-top div.title-bar { /* to improve presentation of logo bar at small screen */
        width: 98%;
    }
}

/* wider screen mobile layout*/
@media (min-width: 420px) {
    div.logo-bar {
        height: 110px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 0;
        width: 200px;
        height: 100px;
         background-image: url('../images/Monash-Paul-Ramsay-logo.jpg');/* dimensions of logo = 400 x 200   */
    }

    div.logo-bar #right-logo {
        display: none;
    }
}

/* smallscreen layout*/
@media (min-width: 600px) {
    div.logo-bar {
        height: 160px;
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 10px;
        width: 300px;
        height: 150px;
         background-image: url('../images/Monash-Paul-Ramsay-logo.jpg');/* dimensions of logo = 400 x 200   */
    }

    div.logo-bar #right-logo {
        top: 60px;
        right: 0;
        width: 200px;
        height: 52px;
        background-image: url('/_resources/images/Orima_Logo.png'); /*  dimensions of logo = 400 x 103  */
        display: inline-block;
    }
}

/* desktop layout  */
@media (min-width: 800px) {
    div.logo-bar {
        height: 145px; /* set height to accommodate size of logos */
    }

    div.logo-bar #left-logo {
        top: 10px;
        left: 0px;
        width: 500px;
        height: 130px;
         background-image: url('../images/Monash-Paul-Ramsay-logo.jpg');/* dimensions of logo = 400 x 200   */
    }

    div.logo-bar #right-logo {
        top: 65px;
        right: 0px;
        width: 180px;
        height: 46px;
        background-image: url('/_resources/images/Orima_Logo.png'); /*  dimensions of logo = 400 x 103  */
    }
}
div.hd-label {
    float:left;
    margin-top:70px;
}
div.hd-img {
    float:left;
    margin-left:9px;
}

.qure-btn {
    display:block;
    position:relative;
    background-color: #004b93;
    color:#ffffff;
    height:80px;
    width:230px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor:pointer;
    margin:0 12px 12px 0;
}

.qure-btn:hover, .qure-btn:focus {
    background-color: #174076;
    color:#ffffff;
}

.qure-btn div.btn-icon {
    position:absolute;
    top:15px;
    left:7px;
}

.qure-btn img {
    height:50px;
    width:50px;
}
.qure-btn svg {
    height:60px;
    width:60px;
    fill:#ffffff;
}
.qure-btn div.btn-label {
    position:absolute;
    top:12px;
    left:70px;
    width:150px;
    padding:0;
    font-size:100%;
    background-color: transparent;
}

.qure-btn div.btn-label-single {
    position:absolute;
    top:26px;
    left:70px;
    width:160px;
    padding:0;
    font-size:100%;
    background-color: transparent;
}

.qure-btn2 {
    display:block;
    position:relative;
    background-color: #004b93;
    color:#ffffff;
    height:80px;
    width:230px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor:pointer;
    margin:0 12px 12px 0;
}

.qure-btn2:hover, .qure-btn2:focus {
    background-color: #174076;
    color:#ffffff;
}

.qure-btn2:active, .qure-btn2:visited {
    background-color: #004b93;
    color:#ffffff;
}

.qure-btn2 div.btn-icon {
    position:absolute;
    top:12px;
    left: 170px;
}

.qure-btn2 svg {
    height:60px;
    width:60px;
    fill:#ffffff;
}
.qure-btn2 div.btn-label {
    position:absolute;
    top:12px;
    left:15px;
    width:160px;
    padding:0;
    font-size:95%;
    background-color: transparent;
    /*outline:1px solid silver;*/
}

/* wider version of btn2*/
.qure-btn3 {
    display:block;
    position:relative;
    background-color: #004b93;
    color:#ffffff;
    height:80px;
    width:280px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor:pointer;
    margin:0 12px 12px 0;
}

.qure-btn3:hover, .qure-btn3:focus {
    background-color: #174076;
    color:#ffffff;
}

.qure-btn3:active, .qure-btn3:visited {
    background-color: #004b93;
    color:#ffffff;
}

.qure-btn3 div.btn-icon {
    position:absolute;
    top:12px;
    left: 220px;
}

.qure-btn3 svg {
    height:60px;
    width:60px;
    fill:#ffffff;
}
.qure-btn3 div.btn-label {
    position:absolute;
    top:12px;
    left:15px;
    width:210px;
    padding:0;
    font-size:95%;
    background-color: transparent;
    /*outline:1px solid silver;*/
}




.smallAlert {
    width:400px;
    max-width:90%;
    margin:0 auto;
}

table.qure-table {
    border:none;
}
table.qure-table th {
    background-color:#004b93;
    color:#ffffff;
    font-weight:normal;
    text-align:center;
    padding:9px;
}

table.qure-table td {
    padding:6px;
    border-bottom:1px solid #4a9edc;
    text-align:center;
}

div.scaffold {
    width:200px;
    margin:6px;
    padding:6px;
    text-align:center;
    font-size:0.9em;
    height:330px;
}
div.scaffold:hover {
    background-color:#eeeeee;
}

img.scaffold{
    border:1px solid #ccc;
    margin-bottom:6px;
    height: 262px;
    width: 182px
}

#popup {
    text-decoration:underline;
    color:#004b93;
    cursor:pointer;
}
#popup:hover {
    color:#4a9edc;
}

div.grey-box {
    background-color: #eee;
    border: 1px solid #ccc;
    padding:12px;
}

.rl_box, .rl_grid {
    width:100%;
    max-width: 900px;
}

.rl_grid+.rl_grid {
    border-top: 3px solid black;
}

.rl_grid {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 15% 15% 70%;
    grid-template-areas:
    "header header header header"
    "subheader1 subheader1 subheader2 subheader2"
    "scfold1 scfold2 scfold3 scfold4";
    border-top: 3px solid black;
    padding-bottom: 10px;
}

.rl_grid_formation2 {
    grid-template-rows: 8% 8% 38% 6% 38%;
    grid-template-areas:
    "header header header header"
    "subheader1 subheader1 subheader1 subheader1"
    "scfold1 scfold2 scfold3 scfold4"
    "subheader2 subheader2 subheader2 subheader2"
    "scfold5 scfold6 scfold7 scfold8";
}

.rl_grid_formation3 {
    grid-template-areas:
    "header header header header"
    "subheader2 subheader2 subheader2 subheader2"
    "scfold1 scfold2 scfold3 scfold4"
}

h3.individual, h3.group {
    background: #E1ECF8;
    padding: 5px;
    margin-right: 20px;
    color: black;
}

.individual {
    grid-area: subheader1;
}

.group {
    grid-area: subheader2;
}

.rl_grid_formation2 .group {
    margin-top: 15px;
    margin-bottom: 2px;
}

@media (max-width: 950px) {
    .rl_grid {
        grid-template-columns: 50% 50%;
        grid-template-rows: 15% 15% 70%;
        grid-template-areas:
    "header header"
    "subheader1 subheader2"
    "scfold1 scfold3"
    "scfold2 scfold4";
    }

    .rl_grid_formation2 {
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: 8% 8% 38% 6% 38%;
        grid-template-areas:
    "header header header "
    "subheader1 subheader1 subheader1 "
    "scfold1 scfold2 scfold3 "
    "subheader2 subheader2 subheader2 "
    "scfold5 scfold6 scfold7 ";
    }

    .rl_grid_formation3 {
        grid-template-columns: 33% 33% 33%;
        grid-template-areas:
    "header header header "
    "subheader2 subheader2 subheader2 "
    "scfold1 scfold2 scfold3 "
    }

    .rl_grid_formation4 {
        grid-template-rows: 9% 9% 41% 41%;
    }
}

@media (max-width: 700px) {

    .rl_grid_formation2 {
        grid-template-columns: 50% 50%;
        grid-template-rows: 4% 5% 21% 21% 4% 21% 21%;
        grid-template-areas:
    "header header "
    "subheader1 subheader1 "
    "scfold1 scfold2 "
    "scfold3 ."
    "subheader2 subheader2 "
    "scfold5 scfold6 "
    "scfold7 .";
    }

    .rl_grid_formation3 {
        grid-template-columns: 50% 50%;
        grid-template-rows: 9% 9% 41% 41%;
        grid-template-areas:
    "header header "
    "subheader2 subheader2 "
    "scfold1 scfold3"
    "scfold2 scfold4";
    }

}

@media (max-width: 483px) {
    .rl_grid {
        grid-template-columns: 100%;
        grid-template-rows: 8% 8% 38% 8% 38%;
        grid-template-areas:
    "header"
    "subheader1 "
    "scfold1"
    "subheader2"
    "scfold3";
    }

    .rl_grid_formation2 {
        grid-template-rows: 3% 3% 15% 15% 15% 3% 15% 15% 15%;
        grid-template-areas:
    "header"
    "subheader1"
    "scfold1"
    "scfold2"
    "scfold3"
    "subheader2"
    "scfold5"
    "scfold6"
    "scfold7";
    }

    .rl_grid_formation3 {
        grid-template-rows: 6% 6% 29% 29% 29%;
        grid-template-areas:
    "header"
    "subheader2"
    "scfold1"
    "scfold2"
    "scfold3";
    }

    .rl_grid_formation4 {
        grid-template-rows: 4% 5% 21% 21% 5% 21% 21%;
        grid-template-areas:
    "header "
    "subheader1 "
    "scfold1"
    "scfold2"
    "subheader2"
    "scfold3 "
    "scfold4";
    }
}

.btn {
    border-radius: 4px;
    border: none;
    box-shadow: none;
    color: #FFF;
    font-family: "OpenSans-SemiBold", Arial, sans-serif;
    font-size: 19px;
    font-weight: normal;
    letter-spacing: 0.75px;
    height: 48px;
    margin: 3px 9px 3px 0;
    position: relative;
    padding: 0;
    width: 80px;
}

.btn svg.svg-center {
    margin: 0 auto;
    fill: #FFF;
    height: 48px;
}
.btn svg {
    width: 50px
}
.btn-success {
    color: #fff;
    background-color: #41831B;
    border-color: #376e17;
}
#close-button {
    width: 190px !important;
}
.url btn btn-info {
    padding-top: 10px;
}

a[title="FORGOTTEN PASSWORD button"] {
    padding-top: 10px;
}

button[title="SUBMIT DETAILS button"] {
    width: 200px !important;
}

a[title="Return to Logon Page button"] {
    width: 250px !important;
    padding-top: 10px;
}

button[title="Save Password button"] {
    width: 170px !important;
}

button[title="Generate random password"] {
    margin: 0px;
    height: 45px;
    width: 54px
}

#glyphicons-basic {
    width: 35px;
    height: 35px;
}

td[style*="text-align:left;"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
}

td[style*="text-align:left;"] .btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#reset-pin {
    transform: scale(1.7);
    transform-origin: center;
    margin-right: 8px;
}

button[data-bb-handler="cancel"] {
    width: 140px;
}

button[data-bb-handler="confirm"] {
    width: 155px;
}

/*FAQ*/
#close-page-btn {
    height: 55px;
    width: 160px;
}

#close-page-btn .btn-icon {
    top: 5px !important;
    left: 1px !important;
}

#close-page-btn svg {
    height: 45px;
}

#close-page-btn .btn-label-single {
    top: 13px !important;
    left: 58px !important;
}

/*assessments/history*/
#return-main-btn.qure-btn {
    height: 55px;
    width: 221px;
    text-decoration: none;
}

#return-main-btn.qure-btn .btn-icon {
    top: 5px !important;
    left: 1px;
}

#return-main-btn.qure-btn svg {
    height: 45px;
}

#return-main-btn.qure-btn .btn-label-single {
    top: 13px;
    left: 58px;
    position: relative;
}

/*assessments/start*/
#consent-btn.qure-btn {
    height: 55px;
    width: 221px;
}

#consent-btn.qure-btn .btn-icon {
    top: 5px !important;
    left: 1px;
}

#consent-btn.qure-btn svg {
    height: 45px;
}

#consent-btn.qure-btn .btn-label-single {
    top: 13px;
    left: 58px;
    position: relative;
}

#consent-btn.qure-btn .btn-label {
    top: 12px !important;
    left: 51px !important;
    width: 170px !important;
}

#consent-btn #glyphicons-basic {
    height: 45px !important;
    width: 52px !important;
}

/*Assessment Report*/
#download-pdf-btn.qure-btn2 {
    height: 60px !important;
    width: 325px !important;
}

#download-pdf-btn.qure-btn2 .btn-icon {
    top: 5px !important;
}

#download-pdf-btn.qure-btn2 svg {
    height: 45px;
}

#download-pdf-btn.qure-btn2 .btn-label-single {
    top: 13px !important;
}

#download-pdf-btn.qure-btn2 .btn-label {
    top: 15px !important;
    width: 260px !important;
}

#download-pdf-btn.qure-btn2 #glyphicons-basic {
    height: 45px !important;
    width: 245px !important;
}

#resources-btn.qure-btn3 {
    height: 60px !important;
    width: 360px !important;
}

#resources-btn.qure-btn3 .btn-icon {
    top: 5px !important;
}

#resources-btn.qure-btn3 svg {
    height: 45px;
}

#resources-btn.qure-btn3 .btn-label-single {
    top: 13px !important;
}

#resources-btn.qure-btn3 .btn-label {
    top: 15px !important;
    width: 290px !important;
}

#resources-btn.qure-btn3 #glyphicons-basic {
    height: 50px !important;
    width: 211px !important;
}

/*Average group assessment Report*/
#group-resources-btn.qure-btn3 {
    height: 60px !important;
    width: 420px !important;
}

#group-resources-btn.qure-btn3 .btn-icon {
    top: 5px !important;
}

#group-resources-btn.qure-btn3 svg {
    height: 45px;
}

#group-resources-btn.qure-btn3 .btn-label-single {
    top: 13px !important;
}

#group-resources-btn.qure-btn3 .btn-label {
    top: 15px !important;
    width: 336px !important;
}

#group-resources-btn.qure-btn3 #glyphicons-basic {
    height: 50px !important;
    width: 326px !important;
}

/*Group Assessment Report*/
#group-resources-btn.qure-btn3 {
    height: 60px !important;
    width: 215px !important;
}

#group-resources-btn.qure-btn3 .btn-icon {
    top: 5px !important;
}

#group-resources-btn.qure-btn3 svg {
    height: 45px;
}

#group-resources-btn.qure-btn3 .btn-label-single {
    top: 13px !important;
}

#group-resources-btn.qure-btn3 .btn-label {
    top: 15px !important;
    width: 290px !important;
}

#group-resources-btn.qure-btn3 #glyphicons-basic {
    height: 50px !important;
    width: 211px !important;
}

#group-resources-btn.qure-btn3 .btn-icon {
    top: 5px !important;
    left: 75px !important;
}

/*Group resources*/
#return-report-btn.qure-btn {
    height: 60px;
    width: 280px;
}

#return-report-btn.qure-btn .btn-icon {
    top: 1px !important;
    left: 6px !important;
}

#return-report-btn.qure-btn .btn-label-single {
    top: 15px !important;
}

#return-report-btn.qure-btn .btn-label {
    top: 15px !important;
    left: 51px !important;
    width: 220px !important;
}

#return-report-btn #glyphicons-basic {
    height: 56px !important;
    width: 40px !important;
}

#left-menu .navmenu li.menu-chevron-right {
    background: url('../../../_resources/v7.1/css/images/chevron-right.png') no-repeat left 6px
}

#left-menu .navmenu li.menu-chevron-down{
    background: url('../../../_resources/v7.1/css/images/chevron-down.png') no-repeat left 9px
}