/*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: 0.5em;
    box-sizing: border-box;
    text-align: left;
    vertical-align: top;
}

div.ax-tile div.ax-course-list-record {
    transition: all 0.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: 0.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: 0.5em;
    box-sizing: border-box;
    text-align: left;
    vertical-align: top;
}

div.ax-course-details > div:not(.ui-loader):not(.enroller-content) {
    transition: all 0.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,
    div.ax-shopping-cart-list table td,
    div.ax-shopping-cart-list table tbody,
    div.ax-shopping-cart-list table tr {
        display: block !important;
        border-right: none;
        width: 100%;
        text-align: left !important;
        white-space: normal;
    }
    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, 0.15);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 3px rgba(0, 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: 0.5em;
}

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

/**** CART ****/

button.added:after,
input[type="button"].added:after,
input[type="reset"].added:after,
input[type="submit"].added:after,
.button.added:after,
.added_to_cart.added:after {
    content: "✔";
    font-family: "Arial";
    margin-left: 0.53em;
}
div.ax-shopping-cart-list * {
    box-sizing: border-box;
}

.ax-overlay {
    background: rgba(51, 51, 51, 0.5686274509803921) !important;
}
.ax-overlay-inner {
    padding: 20px;
    font-size: 1.5em;
    background: #fcfcfc;
    border-radius: 4px;
    opacity: 0.9;
}

div.ax-form-standard {
    padding: 8px;
    max-width: 100%;
    width: 30em;
}
div.ax-form-standard form {
    display: block;
}
div.ax-form-standard p {
    flex: 1;

    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
    clear: both;
    flex-wrap: wrap;
}

div.ax-form-standard p:last-child {
    justify-content: flex-end;
}
div.ax-form-standard *:focus {
    outline: none;
    box-shadow: 0px 0px 2px blue;
}

div.ax-form-standard label {
    display: flex;
    flex: 2;
    max-width: 100%;
    width: 20em;
    min-width: 10em;
}
div.ax-form-standard input[type="text"],
div.ax-form-standard input[type="password"],
div.ax-form-standard input[type="email"] {
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
    flex: 4;
    flex-basis: 20em;
}
div.ax-form-standard button {
    max-width: 100%;
    min-width: 10em;
}
.ax-form-standard div.alert {
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 8px 12px 8px 12px;
    border-width: 1px;
    border-style: solid;
}

.ax-form-standard .alert.warning {
    background: #fff3cd;
    border-color: #ffeeba;
}
.ax-form-standard .alert.info {
    background: #d1ecf1;
    border-color: #bee5eb;
}
div.ax-form-standard .button-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
div.ax-form-standard .button-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
div.ax-form-standard .btn-outline-secondary {
    color: #6c757d;
    background-color: transparent;
    background-image: none;
    border-color: #6c757d;
}
div.ax-form-standard div.warning p,
div.ax-form-standard div.info p {
    justify-content: flex-start;
}

div.ax-form-standard input:focus:required:invalid,
div.ax-form-standard input:focus:invalid,
div.ax-form-standard input:not(:focus).invalid {
    -moz-box-shadow: none;
    border-color: red;
}

div.ax-form-standard div.input-group {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

div.ax-form-standard div.input-group.right {
    justify-content: flex-end;
}
div.ax-form-standard div.input-group.right * {
    margin-left: 4px;
}

div.ax-form-standard input:focus:required:valid,
div.ax-form-standard input:focus:valid {
    border-color: #ebebeb;
}

div.ax-complex-course-search div.input-group-addon {
    width: 3em;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.form-control {
    height: auto;
}
div.ax-complex-course-search-controls {
    padding: 1em;
}

table#ax_course_search_table div.input-group-text {
    justify-content: center;
    white-space: normal;
}

div.progress {
    height: 1.5em;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
}
div.ax-complex-course-search .overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ax-complex-course-search table td {
    vertical-align: middle;
    text-align: center;
}

div.ax-complex-course-search-controls > * {
    margin-bottom: 4px;
}

div.ax-complex-date {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
div.ax-complex-course-search .btn-outline-info {
    width: 100%;
}
div.ax-complex-course-search .btn-outline-info span {
    white-space: normal;
}
button.close {
    box-shadow: none;
}

@media only screen and (max-width: 479px) {
    div.ax-complex-course-search-controls {
        padding: 0em;
    }
    .ax-complex-course-search .input-group .input-group-prepend,
    .ax-complex-course-search .input-group .input-group-text,
    .input-group .form-control {
        width: 100%;
        border-radius: 0.25rem;
    }
    div.ax-form-standard input,
    div.ax-form-standard button {
        width: 100%;
    }
}

.ax-cog-button:hover {
    background-color: #fbfbfb;
    box-shadow: rgb(51 67 82) 0px 0px 2px, rgb(51 67 82 / 56%) 0px 1px 2px,
        rgb(51 67 82 / 2%) -2px -2px 5px inset !important;
}

.ax-cog-button {
    margin-left: 4px;
    margin-right: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 12px;
    flex: 1;
    flex-basis: 240px;
    box-sizing: content-box;
    box-shadow: 0px 0px 2px rgba(51, 67, 82, 0.33), 0px 1px 2px rgba(51, 67, 82, 0.18),
        inset -2px -2px 5px rgba(51, 67, 82, 0.02);
    border-radius: 4px;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
}