/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

    .header-logo {
        max-height: 40px;
        object-fit: cover;
        content: url("../files/eq-daphnie.png");
        background-repeat: no-repeat;
    }

:root{
    --main-color: #005d7e;  /*#0c2038*/
    --secondary-color: #e0e9ed;
}

/*---------------*/
.hidde-help .ls-questionhelp {
  display: none;
}

@media (min-width: 576px) {
    .show-form .col-lg-6 {
        width: calc(50% - 8px);
    }
    
    .show-form .col-lg-3 {
        width: calc(25% - 12px);
    }
}

.group-outer-container {
    display: flex;
    flex-direction: column;
    font-size: 11pt;
}

.show-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.show-form .item {
  /*flex: 0 0 calc(50% - 15px); */
  box-sizing: border-box; 
  /*padding: 10px;*/
}
.show-form .form-label {
    margin-bottom: 0.2rem;
    font-weight: 600;
    font-size: 1rem;
    color: #003c51;
}

.show-form .field {
    font-weight: normal;
    padding: 5px;
    border-radius: 5px;
    min-height: 33.8px;
    font-size: 1.1rem;
}

.show-form .filled {
    background-color: #e9ecef47; /*#e9ecefa8;*/
    border: 1px solid #ced4da;
}



.selected-studies {
	margin: 5px 0;
	display: flex;
	flex-wrap: wrap;
}

.study_option {
    padding: 10px;
    border: 1px solid var(--main-color);
    margin: 10px;
    border-radius: 10px;
    background: var(--secondary-color);
    color: var(--main-color);
    height: fit-content;
}





.question-title-container {
    padding-bottom: 0;
}


.background {
    background: #e0e9ed61 !important;
}

.read-only input::readonly{
    background-color: #aaa;
    border: 1px solid #888;
    cursor: not-allowed;
}

.customForm .question-title-container {
    margin-top: 5px;
}


@media only screen and (min-width:768px){
    .customForm .ls-answers {
        column-gap: 50px;
        padding: 0;
    }
    
    .columns-2 .ls-answers{
        column-count: 2;
    }
    
    .columns-3 .ls-answers{
        column-count: 3;
    }

}
.customForm .ls-answers .answer-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px !important;
    break-inside: avoid;
}

.customForm .ls-answers .answer-item label {
    background-color: white;
    color: black;
    border: none;
    text-align: left;
    font-weight: bold;
    padding-bottom: 10px;
    width: 100%;
}

.customForm .ls-answers .answer-item div {
    width: 100%;
}

.short-box textarea {
    resize:vertical;
    height: calc(1.5rem + .375rem * 2);
}

/*********************************** NAVBAR ***********************************/
.navbar {
    background-color: var(--main-color) !important;
}

#navbar ul > li > a {
    color: white;
}

#navbar > li > a:hover{
    color: #f1b001;
}

.logo-container > img {
  max-height: 70px;
  padding: 15px;
  width: auto;
}

/*@media only screen and (max-width:812px){*/
/*    .header-logo table tr td{*/
/*        text-align: center;*/
/*    }*/
/*    .header-logo table tr td img{*/
/*        height: 80px; */
/*        width:auto;*/
/*    }*/
/*}    */

/*@media only screen and (min-width:812px){*/
/*    .header-logo table {*/
/*        max-width:1170px;*/
/*        padding-right:10px;*/
/*    }*/
/*    .header-logo table tr td{*/
/*        text-align: left;*/
/*    }*/
/*    .header-logo table tr td img{*/
/*        height: 90px; */
/*        width:auto;*/
/*        padding-right: 30px;*/
/*    }*/

/*}*/

/*********************************** FOOTER ***********************************/

.footer-container{
    background-color: transparent;
    height:80px
}
    
.uni-alberta-logo {
    content: url("../files/UniversityOfAlberta_LOGO.png");
    background-repeat: no-repeat;
}

/*********************************** BUTTONS ***********************************/

.btn-primary {
    background-color: var(--main-color);
    border: none;
    color: #fff;
}

.btn-primary:hover {
  background-color: var(--secondary-color);
  border: none;
  color: var(--main-color);
}

#ls-button-submit{
    background-color: var(--main-color); 
    border: none;
}

#ls-button-submit:hover{
    background-color: var(--secondary-color);
    border: none; 
    color: var(--main-color);
}

.btn-default, 
.btn-outline-secondary {
    border-color: #007c67;
    background-color: #FFFFFF;
    color: #007c67;
}

.btn-default:hover, 
.btn-outline-secondary:hover {
    color: var(--main-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn:focus {
    box-shadow: none;
}


/**************************** CUSTOM MODAL ********************************/
.alert-modal-custom {
  color: #c7254e; 
  background-color: #f9f2f4; 
  border: 1px solid #c7254e;  
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding:5px 20px 5px 20px;
  margin: 35px 0;
}

.icon-modal{
  font-size:36px;
  padding-right:20px;
}

/*********************************** BODY ***********************************/ 

.fa-asterisk{
    display:none;
}

body {
  font-family: "Arial";
  line-height: 1.42857143;
  color: #222222;
  background-color: #ffffff;
}

normal {
	font-weight: normal;
}

.question-container{
    background-color:transparent;
    border:none;
}

#outerframeContainer {
    /*max-width: 900px;*/
    hyphens: none; 
}


table {
    border: solid transparent !important;
}

.table-bordered > thead > tr > th {
    border: 1px solid #dadada;
}
.table-bordered > thead > tr > td {
    border: 1px solid #dadada;
}


h1 {
    font-size:28pt;
    font-weight: bolder;
    color: var(--main-color);
}

h2 {
    font-size:18pt;
    font-weight: bold;
    color: var(--main-color);
    background: var(--secondary-color);
    padding: 5px;
    margin-bottom: 2rem;
}

h3 {
    font-size:16pt;
    font-weight: bold;
    color: var(--main-color);
    border-bottom: 2px solid var(--secondary-color);
    padding: 5px;
    margin-bottom: 2rem;
}

.question-text {
    font-size: 16px;
    font-weight: bold;
}

.tempus-dominus-widget .date-container-days div:not(.no-highlight).active {
    background-color: var(--main-color);
}
.tempus-dominus-widget .date-container-days div:not(.no-highlight).today::before {
    border-color: rgba(0,0,0,.2) transparent var(--main-color);
}

/**************************** QUESTIONS FORM ********************************/

.question-container { 
    margin-bottom: 0px;
}

.question-form .question-title-container{
    padding-bottom: 2px;
    padding-top: 0;
}

.question-form .ls-answers{
    padding-top: 0;
    padding-bottom: 0;
}

.question-form .ls-answers label {
	background-color: white;
	color: var(--main-color);
	border: var(--main-color) solid 1px;
}

/****************************** YES NO BUTTON *********************************/

.yesno-button .btn-primary {
  background-color: var(--secondary-color);
  border: none;
  color: var(--main-color);
}

.yesno-button .btn-primary:hover{
    background-color: var(--secondary-color);
    color: var(--main-color);
    border: var(--main-color) solid 1px;
}

.yesno-button .active{
    background-color: var(--main-color);
    color: white;
	border: var(--main-color) solid 1px;
}

.yesno-button input[type="radio"]:checked + label {
	background-color: var(--main-color) !important;
	color: white;
	border: var(--main-color) solid 1px;
}


/**************************** MULTIPLE CHOICE ********************************/
.checkbox-item label::after{
    background-color: var(--main-color);
    color: white;
}

.multiple-opt .btn-primary {
  background-color: white !important;
  color: var(--main-color) !important;
  border: var(--main-color) solid 1px;
}

.multiple-opt .btn-primary:hover {
    background-color: var(--secondary-color) !important;   /*#e0e9ed;*/
    color: var(--main-color) !important;
    border: var(--main-color) solid 1px;
}

/*.multiple-opt .active{*/
/*    background-color: var(--main-color);*/
/*    color: white;*/
/*	border: var(--main-color) solid 1px;*/
/*}*/

.multiple-opt input[type="checkbox"]:checked + label {
	background-color: var(--main-color) !important;
	color: white !important;
	border: var(--main-color) solid 1px;
}

.multiple-opt input[type="checkbox"]:focus + label {
    background-color: white;   /*#e0e9ed;*/
    color: var(--main-color);
    border: var(--main-color) solid 1px;
}

/* =============================================================================
ARRAY STARTS
----------------------------------------------------------------------------- */

@media only screen and (min-width:760.2px){
    .array-flexible-row .question-title-container {
        padding-bottom: 0;
    }       
    
    .answer-container table {
        border-collapse: separate;
        border-spacing: 3px;
        border: none;
    }
    
    .answer-container .radio-array thead tr {
        background: white;
        border: 1px solid white; 
        color: black;
        empty-cells: hide;
    }  
    
    .answer-container .radio-array thead tr th {
        border-bottom: 4px solid #005d7e;
        border-left: transparent;
        border-right: transparent;
        border-top: none;
    }
    
    .answer-container .radio-array tbody th{
        border: 1px solid  #e7ecee;
        background-color: #e7ecee;
        text-align: left;
    }
    
    .answer-container .radio-array tbody td{
        border: 1px solid #F7F8FA;
        background-color: #F7F8FA;
    }
    
    .answer-container table tbody tr:hover{
        border: none;
        background-color: white;
    }
    
    .answer-container .radio-array .radio-item label{
        content: "";  
        margin-top: 2px;
        height: 30px;
        width: 30px;
        vertical-align: middle;
    }
    
    .radio-item .ls-label-xs-visibility, .checkbox-item .ls-label-xs-visibility{
        text-indent: 30px;
    }
    
    .answer-container .radio-array .radio-item label:before {
        content: "";  
        background-color: #FFF;
        border: 1px solid #005d7e;
        border-radius: 50%;
        display: inline-block;
        height: 17px;
        margin: 3.5px 0 0 5px ;
        width: 17px;
        text-align: center;
        vertical-align: middle;
    }
    
    .answer-container .radio-array .answer-item{
        border: none;
    }
    
    .answer-container .radio-array .answer-item input[type=radio]:checked + label:after{
        display: none;
    }
    
    .answer-container .radio-array .answer-item  input[type=radio]:checked + label:before{
        margin: 9px 20px 0 10px;
        padding-left: 3px;
        border-radius: 50%;
        width: 9px; 
        height: 9px;
        text-align: center;
        vertical-align: middle;
        background-color: #005d7e;
        position: absolute;
        
        box-shadow: inset 1px -2px 1px 1px #0B7C83, 0 0 0 3px white, 0 0 0  4px #005d7e, 0 0 5.5px 5.5px #005d7e60;
    }
    
    .answer-container .radio-array .answer-list .answertext:checked~td label {
        background-color: white;
        
    }
}


@media only screen and (max-width: 760px),
    (min-device-width: 760px) and (max-device-width: 768.96),
    (min-device-width: 767.98px) and (max-device-width: 1024px){
    .answer-container .radio-array{
        border: none;
    }
    
    .answer-container .radio-array tbody tr th{
        background-color: #005d7e20; 
        border:none;
        border-bottom: 3px solid #005d7e; 
    }
    
    .answer-container .radio-array tbody tr td{
        background-color: #F7F8FA;
        /*padding: 0px;*/
        padding: 0px !important;
        border-radius: 0;
        border: none;
    }
    
    .answer-container .radio-array .answer-item label{
        border-radius: 0;
        width: 100%;
        padding: 10px;
        padding-left:32px;
        
        margin-top:0;
        margin-bottom:0;
        height:auto;
    }

    .answer-container .radio-array .answer-item input[type=radio] + label:before{
        border: 1px solid #005d7e;
        border-radius: 50%;
        margin: 12px 0 0 8px;
    }
    
    .answer-container .radio-array .answer-item input[type=radio]:checked + label:after{
        display: none;
    }
    
    .answer-container .radio-array .answer-item input[type=radio]:checked + label:before{
        margin: 15px 0 0px 12px;
        border-radius: 50%;
        width: 9px; 
        height: 9px;
        text-align: center;
        vertical-align: middle;
        background-color: white;
        position: absolute;
        
        box-shadow: 0px 0px 0px 3px #005d7e, 0px 0px 0px 4px white;
    }
    
    .answer-container .radio-array .answer-item input[type=radio]:checked~label {
        color: white;
        font-weight: bolder;
        background: #005d7e;
    }
    
    .answer-container .radio-array tr {
	    border: transparent;
    }
}

.array-flexible-row .answer-container .table > :not(:first-child) {
    border-top: none;
}

/* -----------------------------------------------------------------------------
ARRAY ENDS
============================================================================= */


/* =============================================================================
DECISION ARRAY QUESTION ENDS
----------------------------------------------------------------------------- */
.buttons-container {
    display: flex;
    gap: 20px;
    justify-content: right;
    text-align: center;
    padding: 30px 0 5px 0;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.buttons-container button {
    flex: 1 1 20%;
}

.decision-array-colors tbody tr td input[type="radio"] {
    display: none;
}

.decision-array-colors tbody tr td label {
    display: block;
    padding: 10px 15px;
    margin-left:10px;
    background-color: white;
    color: var(--main-color);
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid var(--main-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    
    width: 100% !important;
    min-height: 64px !important;
    text-indent: 0 !important;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    align-content: center;
}

.decision-array-colors thead th {
    display: none;
}

.decision-array-colors tbody tr td label:hover {
    background-color: var(--secondary-color);
    border: 1px solid transparent;
    color: var(--main-color);
}

.decision-array-colors  .answer-container .radio-array .radio-item label:before {
    display:none;
}


.decision-array-colors tbody tr td.answer_cell_AP input[type="radio"]:checked + label {
    background-color: #4b994b !important; 
    color: white;
    border: 1px solid transparent;
}

.decision-array-colors tbody tr td.answer_cell_RM input[type="radio"]:checked + label {
    background-color: #b7862b !important; 
    color: white;
    border: 1px solid transparent;
}

.decision-array-colors tbody tr td.answer_cell_RC input[type="radio"]:checked + label {
    background-color: #a62a2a !important;
    color: white;
    border: 1px solid transparent;
}


.decision-array-colors table tr {
    border-bottom: 1px solid var(--main-color) !important;
}

.decision-array-colors .answer-container .radio-array tbody {
    background-color: white !important;
}

.decision-array-colors table {
    border-collapse: collapse !important;
    border-bottom: 1px solid var(--main-color) !important;
}

.decision-array-colors .table-bordered > thead > tr > td {
    border: none !important;
}

@media only screen and (min-width: 760.2px) {
    .decision-array-colors .answer-container .radio-array .radio-item label {
        content: "";
        margin-top: 2px;
        height: auto;
        width: 100%px;
        vertical-align: middle;
    }
    
    .decision-array-colors .answer-container .radio-array tbody th {
        border: 1px solid var(--main-color) 0 0 !important;
        background-color: white !important;
        text-align: left;
        font-weight: bold;
        text-indent: 20px;
    }
    
    .decision-array-colors .answer-container .radio-array tbody td {
        background-color: white !important;
    }

}

/* -----------------------------------------------------------------------------
DECISION ARRAY QUESTION ENDS
============================================================================= */

/* ============================================================================= 
DROPDOWN ARRAY QUESTION START
----------------------------------------------------------------------------- */

.array-dropdown table {
    border: transparent;
}

.array-dropdown .table > :not(:first-child) {
    border-top: transparent;
}

.array-dropdown .ls-answers tbody .answertext {
    text-align: left;
}

/* -----------------------------------------------------------------------------
DROPDOWN ARRAY QUESTION ENDS
============================================================================= */


/****************** Desicion layout (RADIO BUTTON QUESTION) *******************/
@media (min-width: 576px) {
    .desicion .radio-list {
        display: flex;
        justify-content: space-between;
    }
    .desicion .radio-list > div {
        width: 33%;
        max-width: 267px;
        min-height: 100%;
    }
    
    .desicion .radio-list > div > div{
    	padding: 0;
    }
    
    .desicion .radio-list .btn {
       min-height: 60px;
       align-content: center;
       
    }
}

.desicion .radio-list .btn:hover,
.desicion .radio-list .btn:active, 
.desicion .radio-list .bootstrap-buttons-div .btn-check:checked + .btn-primary {
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.34);
	font-weight: bold;
	border:none;
	color: var(--main-color);
}

.desicion .radio-list .bootstrap-buttons-div .btn-check:checked + .btn-primary,
.desicion .radio-list .bootstrap-buttons-div .btn-check:checked + .btn-primary:hover{
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.34);
	font-weight: bold;
	border:none;
	color: white;
}

.desicion .radio-list .bootstrap-buttons-div:nth-of-type(1) .btn-check:checked + .btn-primary {
    background: #4b994b;
}

.desicion .radio-list .bootstrap-buttons-div:nth-of-type(2) .btn-check:checked + .btn-primary {
    background: #b7862b;
}

.desicion .radio-list .bootstrap-buttons-div:nth-of-type(3) .btn-check:checked + .btn-primary {
    background: #a62a2a;
}


/**************************** UPLOAD FILES ********************************/
.upload-files .file-preview .control-label {
    width: auto;
}



/**************************** SEND 2FA SETUP EMAIL*****************************/
.btn-2FA {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
}