:root {
  --theme-colour: #282E39;		
  --mdc-theme-secondary: #edf0f6;
}

html, body{
	font-family: 'Roboto, sans-serif','MyriadPro-Regular','Helvetica', sans-serif;
	font-size: 14px; line-height: 20px;color:#000;background-color:#FAFBFC;margin:0;
}

label, textarea, .mdc-data-table__header-cell, .mdc-data-table__cell, .mdc-top-app-bar__title, .mdc-button__label, .mdc-floating-label, .mdc-text-field__input, .mdc-floating-label, .mdc-list-item__text, .mdc-select__selected-text, .mdc-dialog__content{font-family: 'Roboto, sans-serif','MyriadPro-Regular','Helvetica', sans-serif;}

.chrome-css{font-family: 'Roboto, sans-serif','MyriadPro-Regular','Helvetica', sans-serif;}

a:link, a:visited, a:hover, a:active  {text-decoration: none;}
footer {position: fixed;left: 0;bottom: 0;width: 100%;text-align: center;}

hr{border: 1px solid var(--mdc-theme-secondary);}

legend{padding-bottom:5px;font-weight: bold;}

*:focus {outline: none;}

/* Login */
#password-help-btn{font-size:15px;width:25px;height:25px;padding:0px;color:var(--theme-colour);}
#username-tooltip, #password-tooltip{	max-width:550px;line-height:20px;text-align:left;padding:10px;}

/* Role */
.role-btn{width:250px;height:150px;display: inline-block;margin: 10px;}		
.role-btn__label{font-size:14px;font-weight: bold;color:var(--theme-colour);}	

.bg{background-color:#FAFBFC; padding:80px 20px;}

.material-symbols-outlined.icon{color: #020304;}
.material-symbols-outlined.act{font-size:60px;color:#4B5568;}
.material-symbols-outlined.action{font-size:30px;color:#4B5568;}

/* top Bar */
.mdc-top-app-bar__row.top{height:55px; background-color:#FFFFFF; border-bottom: 1px solid var(--mdc-theme-secondary);}
.mdc-top-app-bar__title{color: var(--theme-colour);font-size:14px;}
.account-top{width:30px;height:30px;background-color:var(--theme-colour);}
.account-top.mdc-fab:hover{cursor:none;}
.mdc-fab.mdc-fab--mini{background-color:var(--theme-colour);}
.mdc-top-app-bar__title.activity_code{font-size: 20px;font-weight:bold;}	
.subtitle{color:var(--theme-colour);}	
#profile-arrow-btn{font-size:15px;width:25px;height:25px;padding:0px;color:var(--theme-colour);}
.mdc-top-app-bar__title.activity_code{font-size: 20px;font-weight:bold;}	
#logout-btn, #profile-btn{text-decoration:none;color:#8e8e8e;}

#session-top-bar, #assessment-bar{color: var(--theme-colour); height:30px; background-color:var(--mdc-theme-secondary); font-weight:600; vertical-align:middle;}
.session-top-bar.mdc-button__label, .assessment-bar.mdc-button__label{color:var(--theme-colour);}

/* Left menu bar */
    .mdc-drawer__content{;text-align: center;}
	hr.left-menu{width:45px;margin:0 5px;padding:0 5px;}
	#left-menu-bar{margin-top: 85px; position: fixed;display: flex; height: 100vh; width:100vw;}
	.mdc-drawer.left-menu {background-color:#F0EFEF;width:65px;border:0;}
    .left-menu-material-icon, .session-function-material-icon{font-size:32px;}	
    .left-menu-font, .session-menu-font{font-size:10px;}	
    .left-menu-btn{padding:5px 0px;cursor: pointer;}	
 	.left-menu-btn:hover{ background-color:var(--theme-colour); color:#FFF;border-radius:5px;}
	.left-menu-btn img{cursor: pointer; padding-top: 10px; width:30px;}
	.left-menu-btn.participant{padding:5px 8px;}

/* Select activity */
    .mdc-card.act:hover{background-color:#F0EFEF; }

/* Function Bar */
	.drawer-frame-app-content.basic-funtion-bar{width:100%;}	
	.mdc-top-app-bar__row.session-funtion{background-color:#F0EFEF; height:65px;color: #595959;}
	.session-funtion-btn{padding:5px; text-align: center;cursor: pointer;min-width:45px;}	
 	.session-funtion-btn:hover{ background-color:var(--theme-colour); color:#FFF;border-radius:5px;}
    .arrow-material-icon{font-size:22px; line-height: 0.6;}	
	.vl{border-left: 1px solid; height:55px;margin:5px 0px;}
	#participant_panel{position: fixed;bottom:0; text-align: center;}
	#participant_num, #completion_rate{font-size: 20px;padding:0 0 10px 0;}

/* Resizable Split Views */
    .container {display: flex;border: 1px solid #cbd5e0;height: 100vh;width: 100%; }
    .container__right {flex: 1;align-items: center;display: flex;justify-content: center;flex-direction: column;background-color: #FFFFFF;}
    .resizer {background-color: #F0EFEF;cursor: ew-resize;height: 100%;width: 5px;}
    .container__left {width: 50%;align-items: center;display: flex;justify-content: center;flex-direction: column;background-color: #FFFFFF;min-width:330px;}	
	.container__content{overflow-y:auto;height:100vh; white-space: normal;width:100%;}

/* ckeditor Panel */
	.container__left.ckeditor-panel{width:60%;min-width:280px;}
	.container__content.ckeditor-panel{width:100%;font-size:16px;font-weight:500;}

/* Accordion */
	.accordion-body.question{margin:0; padding:0;}

/* SelectField */
	.mdc-select.question{min-width: 300px;max-width:70%;}	
	.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {color: var(--theme-colour); font-weight:bold;}
	.mdc-select__anchor .mdc-select__ripple::before, .mdc-select__anchor .mdc-select__ripple::after {background-color:  var(--mdc-theme-secondary);}
	.mdc-list-item{height:25px;padding-top:5px;}
	.mdc-list-item--selected .mdc-list-item__primary-text, .mdc-list-item--activated .mdc-list-item__primary-text {color: #000;}

/* Textfield */
	.textfield.mdc-text-field__input, .mdc-text-field--textarea{width:100%;}
	.mdc-text-field.mdc-text-field--filled {background-color:var(--mdc-theme-secondary);} 
	.textfield.mdc-floating-label.mdc-floating-label--float-above{color:var(--theme-colour);}

/* Question Type - Explaination */
	.question-type-txt{padding: 10px; font-size:14px;}

/*Create Question Panel*/
	.areatext.mdc-floating-label.mdc-floating-label--float-above{color:var(--theme-colour); }
	#question-type-info-btn{font-size:15px;width:25px;height:25px;padding:0px;color:var(--theme-colour);}

/* Tooltip */
	.question-type-tooltip.mdl-tooltip{text-align:left;padding:20px;line-height:20px;max-width:480px;}
	.questionnum-txt{padding:5px 15px;}

/* Question Panel*/
	#question_panel{padding:0 1vw 1vw 1vw;font-size:20px;}

/* Results Panel*/
	#container-right-overlay{background-color: rgba(0,0,0,0.5);z-index: 2; width:100%;height:100%;position: fixed;display: none;}
	#explanation-box{height:100%;position: absolute;font-size:20px;padding:1vw;border-radius:3px;color:#000;background-color:#FFF;z-index:3;overflow-y: auto;margin:20px;}
	.results-container{padding:1vw;}

/* Countdown */
	#countdown{width:128px;height:35px;background-color:#616261;border-radius:5px;margin:6px 2px;color:#FFF;padding-top:15px;text-align: center;}

/* Dialog Overlay */
.mdc-dialog .mdc-dialog__overlay{background-color:rgba(0,0,0,.32)}
.mdc-dialog,.mdc-dialog__overlay{position:fixed;top:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%}
.mdc-dialog.mdc-dialog__overlay--hidden .mdc-dialog__overlay{opacity:0}.mdc-dialog__overlay{opacity:0;z-index:-1}
.mdc-dialog--opening .mdc-dialog__overlay{transition:opacity 150ms linear}	
.mdc-dialog--closing .mdc-dialog__overlay,.mdc-dialog--closing .mdc-dialog__container{transition:opacity 75ms linear}	
.mdc-dialog--open .mdc-dialog__overlay{opacity:1}

.disabled{pointer-events: none;opacity:0.5;}

/* Container */
	@media screen and (max-width: 930px) {	.session-menu-font {font-size: 0;}  }

	.results-box{position: relative;top:40px;left:0px;}
	.box{
   		position: absolute;font-size: 16px;display: none;padding:5px;border-radius:3px;
		color:#000;background-color:var(--mdc-theme-secondary);font-weight: 500;z-index: 1;opacity: 0.9;
	}	

/* Zoom */
#question-zoom-list, #result-zoom-list{float:right;border-radius:25px;background:var(--mdc-theme-secondary);margin-top:5px;display:inline-flex;}
.zoom-btn{background:var(--mdc-theme-secondary);padding-top:4px;}
.zoom-icon{color:var(--theme-colour);}

/* Likert */
#lowtext, #hightext{width:45%;}

/* Question Bank */
.nav{font-size:16px; text-transform:none;margin: 5px 0px; color: #595959; font-weight: normal;}	

/**/
.preview-close, .preview-open{cursor:pointer;}
#preview-container{width:100%;border-style:solid;margin-left:10px; padding:10px;border-color:var(--mdc-theme-secondary);border-radius: 10px;}

.mdc-card__content.main{padding:10px;heigth:500px;}
.mdc-card.act{cursor:pointer; width:285px;}

.no-act-bg{ 
	height: 100vh;
    width: 100vw;
	background-image: url("../images/bg.png");
	background-repeat: no-repeat;
	background-size: 400px 500px;
    background-position: bottom 20px left 0px;
} 

.no-act-title{font-size: 18px;color:#4B5568;font-weight:bold;}
.mdc-button__label{text-transform: none;}

.mdc-button{font-size:14px;font-weight:bold;margin:2px;}
.mdc-button.main_btn{background-color: var(--theme-colour);white-space: nowrap;}
.mdc-button.no-act-btn{width:280px;height: 45px;background-color: var(--theme-colour);}
.mdc-button.function-btn{background-color: var(--theme-colour);}
.mdc-button.share-btn{background-color: #edf0f6;color: var(--theme-colour);width:100%}
.mdc-button.foldername-dialog-btn{color: #FFF;}

.title{font-size: 14px;color:#4B5568;font-weight:bold;}
.description{font-size: 12px;color:#000; }

.mdc-data-table__header-cell.act, .mdc-data-table__header-cell.folder , .mdc-data-table__header-cell.question, .mdc-data-table__header-cell.report{color:#8B95A8;font-weight: bold;}
.mdc-data-table{border-style:none;}
.mdc-data-table__row.odd{background-color:#FFF;}
.mdc-data-table__row.even{background-color:#EBF0F6;}
.mdc-data-table__row.odd.act, .mdc-data-table__row.even.act{cursor:pointer;}


.act-container{display: flex;flex-wrap: wrap; }
.act-container > div {width: 320px;margin: 10px;}

.mdc-dialog__surface.map-course{width:500px;}

#activity-details{padding:0;min-width:600px;max-width:90vw;}
.mdc-layout-grid__cell--span-12.task{padding:10px;background-color:#f8f8f8;}
#qrcode_panel{min-width:200px;max-width:300px;}


/* Question Bank - Resizable Split View */
#parent{display:flex; border:1px solid #cbd5e0; height:80vh; width:100%;}
#LeftCol{flex-grow:1; resize:horizontal; overflow:auto; width:100%;}
#RightCol{flex-grow:3; min-width: 360px; width:40%;}

/*Check box*/
.mdc-checkbox__checkmark{background-color: var(--theme-colour);}

/*Radio button*/
.mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle, .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle{border-color: var(--theme-colour);}

/*Hashtag*/
#openAI-hashtag-container, #openAI-dialog-hashtag-container{
  display: flex;
  flex-flow: row wrap;
}

.tag, .tag-dialog{
  pointer-events: none;
  background-color: var(--theme-colour);
  color: white;
  padding: 6px;
  margin: 5px;
  border-radius: 10px;
}

.tag::before, .tag-dialog::before {
  pointer-events: all;
  display: inline-block;
  content: 'x';  
  height: 20px;
  width: 20px;
  border-radius: 5px;
  margin-right: 6px;
  text-align: center;
  font-weight: bold;
  color: var(--theme-colour);
  background-color: white;
  cursor: pointer;
}

#qrcode-dialog {
  position: absolute;
  z-index: 2;
  background-color: #FFF;
}

#qrcode-header {
  padding: 10px;
  cursor: move;
  z-index: 3;
  background-color: var(--mdc-theme-secondary);
  color: #000;
}	

/* Text Overflow */
.overflow-text{overflow:unset; white-space: normal;  }

/* Hoverable Dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFF;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {display: block; }
.dropdown-content a:hover {background-color: #f1f1f1;}