/** structure **/
			.wrapper {
			
				width: 100%;
				margin: 0 auto;			  
				padding-left: 1em;
				padding-right: 1em;
			
			    -webkit-box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    -o-box-sizing: border-box;
			    -ms-box-sizing: border-box;
			    box-sizing: border-box;
			
			  
				/* padding: 0 50px; */
				background-color: white;
			}
			
			.content {
			  width: 100%;
			  margin: 0;
			  padding: 0;
			}
			/* Masthead ----------------------- */
			
			.masthead {
			  padding: 10px 0;
			  margin-bottom:10px;
			  text-align: center;
			  background:white;
			  border-bottom: 2px #F3B172 solid;
			  /* #180394; */
			}
			
			.masthead-logo {
			  width: 250px;
			  padding-left: 0;
			}

			/* Mobile masthead styles */
			@media (max-width: 768px) {
			  .masthead {
			    padding: 5px 10px;
			    margin-bottom: 3px;
			  }
			  
			  .masthead-logo {
			    width: 125px;
			    max-width: 50%;
			    height: auto;
			  }
			}

			/* Small phone masthead styles */
			@media (max-width: 576px) {
			  .masthead {
			    padding: 4px 8px;
			    margin-bottom: 2px;
			  }
			  
			  .masthead-logo {
			    width: 100px;
			    max-width: 40%;
			  }
			}

			/* Very small phone masthead styles */
			@media (max-width: 400px) {
			  .masthead {
			    padding: 3px 5px;
			    margin-bottom: 2px;
			  }
			  
			  .masthead-logo {
			    width: 80px;
			    max-width: 35%;
			  }
			}
			
			.masthead_name {
			  	color:#ffffff; 
				font-size: x-large;
				/* padding-top:30px; */
				font-weight: 100; 
				letter-spacing: .09em;
				vertical-align: middle;
			}
			
			.masthead h1 {
				color:#EEE;
				text-align: center;
				font-size: xx-large;
				/* padding-top: 15px;
				padding-bottom: 0; */
				padding-top:5px;
				margin-bottom:0;
			}
			/* Body ------------------------------ */
			
			.content-body {
			  width: 100%;
			  margin: 0;
			  padding: 0;
			  /* border-bottom: 1px solid #f1af4c; */
			  background-color: #FFFFFF;
			  
			  border: 1px solid #c1c1c1;
			  border-radius: 2px;
			}
			
			.content-body_inner {
			  width: 100%;
			  margin: 0 auto;
			  padding: 40px; 0 0 40px;
			  

			  
			}
			
			/** Footer  **/
			.footer {
			  width: 570px;
			  margin: 0 auto;
			  padding: 0;
			  text-align: center;
			  padding-top: 20px;
			  padding-bottom: 20px;
			  background-color: #f3f3f6;
			  
			}
			
			.footer-wrapper {
			  text-align: center;
			/*  padding-top: 10px;
			  padding-bottom: 10px; */
			  background-color: #f3f3f6;
			  border-top: 2px #F3B172 solid;
			  padding:0;
			  margin:0;
			}

			.footer p {
			  color: #AEAEAE;
			}
			
			.footer a {
			  color: #AEAEAE;
			  text-decoration: none;
			  font-size:large;
			  margin-bottom: 10px;
			  
			}
			
			/** navbar **/
			.navbar-header h1 {
				  margin-top: 0;
				  padding-top:30px;
				  color: #fff;
				  font-size: 39px;
				  font-weight: bold;
				}
			
			.navbar-header h2 {
				  margin-top: 0;
				  color: #fff;
				  font-size: 30px;
				  font-weight: 500;
				  letter-spacing: .11em;
				  padding-bottom: 20px;
				}
					
			.navbar{
			  padding: 10px 0;
			  text-align: center;
			  background:#515280;
			  text-align: center;

			  /* #180394; */
			}
			
			//** Alerts & buttons **/
			.message {
				text-align: center;
				font-size: 18px;
				font-weight: 400;
				padding:15px;
				margin-right: auto;
				margin-left: auto;
				
				border: 1px solid #888888;
				border-radius: 4px;
				border: 1px solid #888888;
				border-radius: 4px;
						
			}
			
			.error{
				
				background:rgba(253, 6, 6, 0.47);
			}
			
			.success{
				
				background:rgba(3, 201, 16, 0.58);
			}
			
			.warning{
				
				background:rgba(255, 163, 0, 0.64);
			}
			
			.btn-sosi {
				color:#fff;
				background-color:#F3B172;
				border-color:#b87912;
				color:#7B7C8E;
				font-size: larger;				
			}
			
			/** specifics **/
			.sign-in{
				width: 40%;
				border: 2px solid #F3B172;
				border-radius: 2px;
				background:#DDDDDD;
				margin: 50px auto;
				padding: 30px;
				box-shadow: 10px 10px 7px #cfcccc;
			}
			
			.sign-in-title h2{
				text-align:center;
				padding-bottom:20px;
				/* font-size:1.6rem; */
				font-weight: 300;
				color:#7B7C8E;
			}
						
			.sub-content{
				width: 100%;
				border: 2px solid #F3B172;
				border-radius: 2px;
				background:#faf3eb; 
				padding: 10px 30px;
				min-height: 250px;
			}
			
			.sub-content-title h2{
				text-align:center;
				/* padding-bottom:10px;
				 font-size:1.6rem; */
				font-weight: 300;
				color:#7B7C8E;
			}

			/* Tablet styles for sub-content-title */
			@media (max-width: 768px) {
			  .sub-content-title h2 {
			    font-size: 1.1rem;
			    margin-top: 3px;
			    margin-bottom: 3px;
			  }
			  
			  .sub-content-title h3 {
			    font-size: 0.9rem;
			    margin-top: 2px;
			    margin-bottom: 2px;
			  }
			  
			  .sub-content-title h4 {
			    font-size: 0.8rem;
			    margin-top: 2px;
			    margin-bottom: 2px;
			  }
			}

			/* Mobile styles for sub-content-title */
			@media (max-width: 576px) {
			  .sub-content-title h2 {
			    font-size: 0.95rem;
			    margin-top: 2px;
			    margin-bottom: 2px;
			  }
			  
			  .sub-content-title h3 {
			    font-size: 0.8rem;
			    margin-top: 2px;
			    margin-bottom: 2px;
			  }
			  
			  .sub-content-title h4 {
			    font-size: 0.7rem;
			    margin-top: 2px;
			    margin-bottom: 2px;
			  }
			}

			/* Very small phone styles for sub-content-title */
			@media (max-width: 400px) {
			  .sub-content-title h2 {
			    font-size: 0.85rem;
			    margin-top: 2px;
			    margin-bottom: 2px;
			  }
			  
			  .sub-content-title h3 {
			    font-size: 0.75rem;
			    margin-top: 1px;
			    margin-bottom: 1px;
			  }
			  
			  .sub-content-title h4 {
			    font-size: 0.65rem;
			    margin-top: 1px;
			    margin-bottom: 1px;
			  }
			}
						
			.sub-content h4{
				text-align:center;
				padding-bottom:20px;
				/* font-size:1.6rem; */
				font-weight: 300;
				color:#7B7C8E;
				
			}
			
			/** styles **/
			.centered{
			    float: none;
			    margin: 0 auto;
			}
			
			.error{
				background-color: #F3B172;
				color:#7B7C8E;
				font-size: larger;
				text-align: center;
			}
			
			/* Menu */
			
			.menu-wrapper{
				/* width: 60%; */
				border: 2px solid #d1d1d1;
				border-radius: 2px;
				background:#faf3eb; 
				padding: 10px 30px;
				min-height: 250px;
				
				/* 
					margin: 50px auto;
					box-shadow: 5px 5px 7px #cfcccc; 
				/* box-shadow: 2px 6px 3px 4px rgba(0, 0, 0, 0.51) */
			}

			/* Mobile styles for menu-wrapper */
			@media (max-width: 576px) {
			  .menu-wrapper {
			    padding: 10px 15px;
			    min-height: auto;
			  }
			  
			  .menu-wrapper ul {
			    padding-left: 15px;
			  }
			  
			  .menu-wrapper li {
			    padding-bottom: 10px !important;
			  }
			}

			@media (max-width: 400px) {
			  .menu-wrapper {
			    padding: 8px 10px;
			  }
			  
			  .menu-wrapper ul {
			    padding-left: 10px;
			  }
			}
			
			.tester{
				width: 400px;
				height: 50px;
				font-size: 18px;
				font-weight: 400;
				color:#767474;
				letter-spacing: 2px;
				padding-top: 3px;
			}

			/* Mobile styles for tester/menu links */
			@media (max-width: 576px) {
			  .tester {
			    width: 100%;
			    max-width: 100%;
			    height: auto;
			    font-size: 16px;
			    letter-spacing: 1px;
			    padding: 5px 0;
			  }
			}

			@media (max-width: 400px) {
			  .tester {
			    font-size: 14px;
			    letter-spacing: 0.5px;
			  }
			}
			
			.menu-title{
				text-align:center;
				/* padding-bottom:10px;
				 font-size:1.6rem; */
				font-weight: 300;
				color:#7B7C8E;
			}

			/* Mobile styles for menu-title */
			@media (max-width: 576px) {
			  .menu-title {
			    font-size: 1.1rem;
			  }
			}
			
			/* Dates */	
			.dates-wrapper{
				/* width: 60%; */
				border: 2px solid #d1d1d1;
				border-radius: 2px;
				background:#f2faeb; 
				padding: 10px 30px;
				min-height: 250px;
				
			}

			/* Mobile styles for dates-wrapper */
			@media (max-width: 576px) {
			  .dates-wrapper {
			    padding: 10px 15px;
			    min-height: auto;
			  }
			  
			  .dates-wrapper ul {
			    padding-left: 10px;
			  }
			  
			  .dates-wrapper li {
			    padding: 8px 0 !important;
			  }
			  
			  .dates-wrapper span {
			    font-size: 14px !important;
			  }
			}

			@media (max-width: 400px) {
			  .dates-wrapper {
			    padding: 8px 10px;
			  }
			  
			  .dates-wrapper span {
			    font-size: 13px !important;
			  }
			}			
			
			.message{
				background-color: #F3B172;
				color:#7B7C8E;
				font-size: larger;
				text-align: center;
				padding: 10px;
				margin: 0 50px;
			}
			
			.panel{
				padding:20px;
			}
			
			.panel-default{
				background: #fafafb;
			}
			
			.panel-success{
				background: #f2faeb;
			}
			
			.panel-warning{
				background: #fffdec;
			}
			
			.panel-info{
				background: #ecf8ff;
			}
			
			.panel-danger{
				background: #fff4ee;
			}

			/* Mobile styles for panels */
			@media (max-width: 576px) {
			  .panel {
			    padding: 12px;
			  }
			  
			  .panel h2 {
			    font-size: 1.3rem;
			  }
			  
			  .panel h3 {
			    font-size: 1.1rem;
			  }
			  
			  .panel h4 {
			    font-size: 0.95rem;
			  }
			  
			  .panel p {
			    font-size: 14px;
			  }
			}

			@media (max-width: 400px) {
			  .panel {
			    padding: 10px;
			  }
			  
			  .panel h2 {
			    font-size: 1.1rem;
			  }
			  
			  .panel h3 {
			    font-size: 1rem;
			  }
			  
			  .panel h4 {
			    font-size: 0.9rem;
			  }
			  
			  .panel p {
			    font-size: 13px;
			  }
			}

			
			/*tabs */
			.tab-content{
				padding: 20px;
				border:1px solid #ddd;
			}
			
			/* tables */
			.table th{
				background: #e7f8f3;
				border: 1px solid #dadada;
			}
			
			table.details th{
				width:150px;
			}
			
			table.details td{
				text-align: left;
			}
			
			table.mycourse td{
				text-align: left;
			}
			
			/* image thumbnails */
			.thumb img { 
			margin:3px;
			/* width:60%;
			height:60%; */
			float:left;
			}
			
			.thumb span { 
				position:absolute; 
				visibility:hidden;
				/* height:0px; */
				
				-webkit-box-shadow: 11px 11px 26px -14px rgba(36,36,36,1);
				-moz-box-shadow: 11px 11px 26px -14px rgba(36,36,36,1);
				box-shadow: 11px 11px 26px -14px rgba(36,36,36,1);
				border:1px solid #888;
				border-radius:3px;
				padding:10px;
				background-color:#FFF;
				left:50px;
			}
			.thumb:hover, .thumb:hover span { 
				visibility:visible;
				margin-top:auto;
				margin-left:auto;
				/* top:0; */
				
				left:250px; 
				z-index:1;
			}
			
			.thumb:hover img { 
				height:300px;
			}
			
			li.list1 {
				padding-bottom: 5px;
			}
			
			/* forms */
			span.required  {
			  content:"*";
			  color:red;
			  font-size:x-large;
			  line-height:10px;
			}
			
			.form-group{
			 	padding-left:20px;
			 }
			 
			.btn-warning, .message{
				background-color:#faf3eb;
				color:#696969;
			}
			
				.btn-warning:hover {
				background-color:#ffddb6;
				color:#757373;
			}
			
			.radio label{
				padding-left:30px;
			}

			/* Training Cards - Mobile Optimized */
			.training-cards {
				margin: 20px 0;
			}

			.training-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: 100%;
    display: block;
    padding: 0;
}

			.training-card:hover {
    border-color: #F3B172;
    box-shadow: 0 2px 6px rgba(243, 177, 114, 0.2);
    background-color: #fff8e1;
}

.training-card:focus {
    outline: 2px solid #F3B172;
    outline-offset: 2px;
    background-color: #fff8e1;
    border-color: #F3B172;
}

.training-card.selected {
    border-color: #F3B172;
    background-color: #fffdec;
    box-shadow: 0 2px 8px rgba(243, 177, 114, 0.3);
}

			.card-content {
				display: flex;
				align-items: center;
				padding: 20px;
				min-height: 80px;
				width: 100%;
			}

			.card-text {
				flex: 1;
				word-break: break-word;
				white-space: normal;
			}

			.card-text h4 {
				margin: 0;
				color: #7B7C8E;
				font-size: 18px;
				font-weight: 500;
				line-height: 1.3;
			}

			.card-radio-input {
				display: none !important;
			}

			@media (max-width: 768px) {
				.training-card {
					margin-bottom: 12px;
				}
				.card-content {
					padding: 16px;
					min-height: 70px;
				}
				.card-text h4 {
					font-size: 16px;
				}
			}

			@media (max-width: 480px) {
				.card-content {
					padding: 14px;
					min-height: 60px;
				}
				.card-text h4 {
					font-size: 15px;
				}
			}

			/* Hide sub-content on mobile and tablet */
			@media (max-width: 991px) {
				.sub-content {
					border: none;
					padding: 0;
					margin: 0;
					background: transparent;
					min-height: auto;
				}
			}

			/* Text Response Analysis Styles */
			.keyword-cloud {
				line-height: 2.5;
				text-align: center;
			}

			.keyword-tag {
				transition: all 0.3s ease;
				cursor: default;
			}

			.keyword-tag:hover {
				background-color: #c3e6cb !important;
				transform: scale(1.05);
			}

			.text-response-sample {
				transition: background-color 0.2s ease;
			}

			.text-response-sample:hover {
				background-color: #e9ecef !important;
			}

			.text-response-full {
				transition: background-color 0.2s ease;
			}

			.text-response-full:hover {
				background-color: #e9ecef !important;
			}

			/* Modal enhancements */
			.modal-body {
				font-size: 14px;
			}

			.text-response-full p {
				line-height: 1.6;
				word-wrap: break-word;
			}

			/* Assessment Statistics Styles */
			.statistical-summary-compact {
				background-color: #f8f9fa;
				padding: 15px;
				border-radius: 5px;
				border: 1px solid #dee2e6;
				height: 200px;
				display: block;
			}

			.statistical-summary-compact strong {
				color: #495057;
				font-size: 14px;
			}

			/* Chart container - Force small size */
			.chart-container {
				position: relative;
				height: 200px !important;
				width: 400px !important;
				max-width: 400px !important;
				overflow: hidden;
				display: block;
			}
			
			.chart-container canvas {
				width: 400px !important;
				height: 200px !important;
				max-width: 400px !important;
				max-height: 200px !important;
				display: block !important;
			}