/*Standard CSS Styles for Course List and Course Details*/

/*TILES*/
div.ax-tile div.ax-course-list-record{
	display:inline-block;
    width: 32%;
    min-width: 25em;
    min-height:25em;
    padding:0.5em 1.5em;
	margin:.5em;
    box-sizing:border-box;
    text-align: left;
    vertical-align: top;

}

div.ax-tile div.ax-course-list-record { transition: all .2s ease-in-out; }
div.ax-tile div.ax-course-list-record:hover { transform: scale(1.1); }

div.ax-tile .ax-course-list-record  *{
	max-width: 100%;
}


div.ax-tile.ax-course-list{
	text-align:center;
}

div.ax-tile .ax-course-thumb {
    max-height: 15em;
    overflow: hidden;
    min-height: 15em;
}

div.ax-tile div.ax-course-list-record.ax-course-selected:hover{
	transform:none;
}
div.ax-tile div.ax-course-list-record.ax-course-selected{
	display:block;
	width: 100%;
}



/*LIST*/

div.ax-list div.ax-course-list-record{
	margin-bottom: 3em;
}

/*Image in Description Setting*/
div.ax-course-list.ax-hide-images div.ax-course-list-description img{
	display:none;
}


/*List with Image*/

div.ax-list-image{
	display:table;
}
div.ax-list-image div.ax-course-list-record{
	display:table-row;
}

div.ax-list-image div.ax-course-list-description {
    max-height: 250px;
    text-overflow: ellipsis;
    overflow: hidden;
}

div.ax-list-image div.ax-course-thumb {
    overflow: hidden;
    -webkit-clip-path: circle(90px at 50% 50%);
    width: 200px;
    max-width:200px;
	clip-path: circle(90px at 50% 50%);
	vertical-align:middle;
}
div.ax-list-image div.ax-course-thumb, div.ax-list-image div.ax-course-list-record-body {
	display:table-cell;
}

div.ax-list-image div.ax-course-thumb img {
    height: 200px;
    width: 200px;
    object-fit: cover;
}

div.ax-list-image div.ax-course-list-record-body{
	clear:right;
	padding: 2em;
	vertical-align:top;
}

@media only screen and (max-width: 766px) {
div.ax-list-image div.ax-course-thumb, div.ax-list-image div.ax-course-list-record-body {
    display: block;
    margin: 0 auto;
}
}


/*COURSE DETAILS PAGES*/

div.ax-course-details.ax-standard div.ax-cd-image,
div.ax-course-details.ax-standard div.ax-cd-description{
	display:inline-block;
	max-width:50%;
	vertical-align:middle;
    
}

@media (max-width:700px){
	div.ax-course-details.ax-standard div.ax-cd-image,
	div.ax-course-details.ax-standard div.ax-cd-description{
		display:block;
		width:auto;
		max-width: 100%;
		vertical-align:middle;
	}
	div.ax-course-details.ax-standard div.ax-cd-description{
		padding-bottom: 1em;
	}
} 
div.ax-course-details.ax-standard div.ax-cd-description{
	padding-right: .5em;
}
div.ax-course-details div.ax-cd-image img.ax-course-image{
	max-width: 100%;
}


/*TILED LAYOUT*/
div.ax-course-details.ax-tile > div:not(.ui-loader):not(.enroller-content){
	display:inline-block;
	width: 48%;
	min-width: 25em;
    min-height:20em;
    padding:1em;
	margin:.5em;
	 box-sizing:border-box;
    text-align: left;
    vertical-align: top;
}

div.ax-course-details > div:not(.ui-loader):not(.enroller-content){ transition: all .2s ease-in-out; }
/*div.ax-course-details > div:not(.ui-loader):not(.enroller-content):hover { transform: scale(1.15); z-index: 100}*/


/***** Course Instance List Layouts *****/

.ax-course-instance-list{
	
}

.ax-course-instance-list.ax-table{
	width: 100%;
	
}
.ax-course-instance-list.ax-table thead td{
	font-weight: 600;
}
.ax-course-instance-list table thead:not(:first-of-type){
	display:none;
}
@media ( max-width :700px) {
	div.ax-course-instance-list.ax-table thead {
		display: none;
	}
	div.ax-course-instance-list.ax-table tbody, div.ax-course-instance-list.ax-table tr,
		div.ax-course-instance-list.ax-table td {
		display: block !important;
		border-right: none;
		width: 100%;
	}
	div.ax-course-instance-list {
		width: 100%;
	}
	div.ax-course-instance-list table {
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
}

#enroller_success .enrolment-success{
	padding: 2em;
    margin: 1em;
	color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.15);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}




/**** AJAX COURSE SEARCH ****/

div.ax-course-search-ajax{
	padding: 1em;
	display: inline-block;
	text-align: center;
	min-width: 30em;
	max-width: 100%;
	vertical-align:top;
}

div.ax-course-search-ajax div, div.ax-course-search-ajax a {
	margin-top: .5em;
}


/**** COURSE SUMMARY ****/
div.ax-course-summary, div.ax-course-summary *{
	text-align: center;
}