styles.css

.qtype_lti_textarea{

}
.qtype_lti_stem_hidden {
  display: none!important;
}
.path-qtype-lti .ltiframe {
    position: relative;
    width: 100%;
    height: 100%;
}

/** General Styles **/
.path-qtype-lti .userpicture,
.path-qtype-lti .picture.user,
.path-qtype-lti .picture.teacher {
    width: 35px;
    height: 35px;
    vertical-align: top;
}

.path-qtype-lti .feedback .files,
.path-qtype-lti .feedback .grade,
.path-qtype-lti .feedback .outcome,
.path-qtype-lti .feedback .finalgrade {
    float: right;
}

.path-qtype-lti .feedback .disabledfeedback {
    width: 500px;
    height: 250px;
}

.path-qtype-lti .feedback .from {
    float: left;
}

.path-qtype-lti .files img {
    margin-right: 4px;
}

.path-qtype-lti .files a {
    white-space: nowrap;
}

.path-qtype-lti .late {
    color: red;
}

.path-qtype-lti .message {
    text-align: center;
}

/* Styles for admin */
.path-admin-qtype-lti .mform .fitem .fitemtitle {
    min-width: 18em;
    padding-right: 1em;
} /* Prevent setting titles from wrapping */

/* Styles for instructor editing an external tool */

.path-qtype-lti .mform .fitem .fitemtitle {
    min-width: 14em;
    padding-right: 1em;
} /* Prevent setting titles from wrapping */

/* Styles for instructor_edit_tool_type.php */
#page-qtype-lti-instructor_edit_tool_type .mform .fitem .fitemtitle {
    min-width: 18em;
    padding-right: 1em;
} /* Prevent setting titles from wrapping */

/* Styling for tool_configure page */
#registration-choice-container .buffer-text {
    margin: 20px;
}

#choice-list {
    list-style: none;
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 1em;
    margin-left: 0;
}

#choice-list > li {
    display: inline-block;
}

#external-registration-container iframe {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    width: 100%;
    min-height: 800px;
}

.loading-screen {
    text-align: center;
    padding: 3em;
}

.loading-screen .loading-text {
    font-size: 2em;
}

.loading-screen .loader {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    height: 2em;
    width: 2em;
    font-size: 2em;
}

#registration-submit {
    min-width: 140px;
}

#registration-form-container {
    min-height: 260px;
}

#registration-form-container .well {
    margin-bottom: 0;
}

#registration-form-container .control-group:last-child {
    margin-bottom: 0;
}

#registration-choice-container .well {
    text-align: center;
}

#registration-choice-container .btn-toolbar {
    margin-bottom: 0;
}

#registration-choice-container p:last-child {
    margin-top: 20px;
}

#tool-type-capabilities-container .registration-loading-container {
    display: none;
}

#tool-type-capabilities-container.loading .registration-loading-container {
    display: block;
}

#tool-type-capabilities-container.loading #tool-type-capabilities-template-container {
    display: none;
}

.centered-menu {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.btn-text {
    display: block;
}

.btn-loader {
    display: none;
}

.loading .btn-text {
    display: none;
}

.loading .btn-loader {
    display: block;
}

.btn .loader {
    margin-left: auto;
    margin-right: auto;
}

.btn .loader img {
    height: 1.5em;
}

#tool-list-container h3 {
    display: inline-block;
}

#tool-list-loader-container {
    display: inline-block;
}

#tool-list-loader-container .loader {
    display: none;
}

#tool-list-loader-container .loader img {
    height: 2em;
}

.loading #tool-list-loader-container .loader {
    display: block;
}

.loading #tool-notools-text {
    display: none;
}

.tool-card {
    display: inline-block;
    width: 250px;
    height: 300px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    margin: 5px;
    position: relative;
    box-sizing: border-box;
    vertical-align: top;
}

.tool-card:hover,
.tool-card:focus {
    border-color: #08c;
    box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
}

.tool-card .overlay-container {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 100;
    box-sizing: border-box;
    padding: 10px;
}

.tool-card .overlay-container .img-container {
    position: absolute;
    top: 115px;
    left: 90px;
    display: block;
    width: 70px;
    height: 70px;
}

.tool-card .overlay-container .img-container img {
    height: 100%;
    width: 100%;
}

.tool-card.announcement > .overlay-container {
    display: block;
}

.tool-card.announcement .overlay-container .loader {
    display: none;
}

.tool-card.announcement.loading .overlay-container .loader {
    display: block;
    width: 100%;
    height: 100%;
}

.tool-card.announcement .overlay-container .success-icon-container {
    display: none;
}

.tool-card.announcement.success .overlay-container .success-icon-container {
    display: block;
}

.tool-card.announcement .overlay-container .fail-icon-container {
    display: none;
}

.tool-card.announcement.fail .overlay-container .fail-icon-container {
    display: block;
}

.tool-card.announcement .overlay-container .capabilities-container {
    display: none;
}

.tool-card.announcement.capabilities .overlay-container .capabilities-container {
    display: block;
}

.tool-card.announcement.capabilities .overlay-container {
    background-color: rgb(255, 255, 255);
}

.tool-card.announcement.capabilities .overlay-container .img-container {
    display: none;
}

.tool-card-content {
    z-index: 1;
}

.tool-card-header {
    text-align: center;
    background-color: #f5f5f5;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-sizing: border-box;
    height: 125px;
}

.tool-card-subheader {
    margin-bottom: 10px;
    text-align: left;
}

.tool-card-header .tool-card-icon {
    width: 35px;
    height: 35px;
}

.tool-card-header .name {
    margin-bottom: 0;
    white-space: nowrap;
}

.tool-card-header .tool-card-actions {
    float: right;
}

.tool-card-header .tool-card-actions img {
    width: 15px;
    height: 15px;
    margin-left: 7px;
}

.tool-card-body {
    border-top: 1px solid #e5e5e5;
    box-sizing: border-box;
    padding: 5px;
    height: 125px;
}

.tool-card-body .description {
    max-height: 100px;
    word-wrap: break-word;
}

.tool-card-footer {
    height: 50px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
}

.tool-card .contenteditable-container {
    position: relative;
}

.tool-card [contenteditable=true] {
    border: 1px solid transparent;
    padding: 0.25em;
    position: relative;
    z-index: 1;
    overflow: auto;
}

.tool-card [contenteditable=true]:hover {
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    background-color: #fff;
    border: 1px solid #e3e3e3;
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
    cursor: text;
}

.tool-card [contenteditable=true]:focus {
    outline: 0;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    background-color: #fff;
    border: 1px solid rgba(82, 168, 236, 0.8);
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
    cursor: text;
}

.tool-card [contenteditable=true].loading + .overlay-container {
    border-radius: 4px;
    display: block;
}

.tool-card [contenteditable=true] + .overlay-container .loader {
    display: inline-block;
    vertical-align: middle;
}

/* Styling for LTI view */

span.qtype_lti_togglebutton {
    position:absolute;
    cursor: pointer;
    right: -8px;
    top: -6px;
    padding-bottom: 8px;
    width:32px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ3My45MzEgNDczLjkzMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDczLjkzMSA0NzMuOTMxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoNCg0KPGc+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzE4OTBmZjsiIGQ9Ik0yNDkuNDU5LDIxNy43MThjMTguMTE4LDE4LjExOCwzOC42NTItMTEuODMxLDQ5Ljk5NC0yMy4xNzMNCgkJYzEwLjg1OS0xMC44NTksMjEuNzIxLTIxLjcyNSwzMi41OC0zMi41ODNjMS4wMSwxMS4zNTIsMi4wOTksMjIuNzA5LDMuNzcyLDMzLjk0OWMyLjY1MywxNy44NjcsMjQuNzgyLDI0LjU0MiwzMi45NDYsOC44MDENCgkJYzAuODQyLTEuMTE5LDEuMzgxLTIuNTIyLDEuNTk0LTQuMTU3YzAuMzc0LTEuNTIzLDAuMzgyLTIuOTIyLDAuMDc5LTQuMTc2Yy0wLjI5Mi0xNC43MjQtMC41ODQtMjkuNDQ4LTAuODc2LTQ0LjE3NQ0KCQljLTAuMjg0LTE0LjM1MywxLjY0My0yOS45NTMtMy42MTEtNDMuNDMxYy0wLjIwNi0wLjc2LTAuNDY4LTEuNTM0LTAuODYxLTIuMzE2Yy0xLjA1OS0yLjEyMi00LjUzOS04Ljk3Ni0wLjEwOS0wLjExNg0KCQljLTEuMjY1LTIuNTIyLTMuNTg4LTMuOTc0LTYuMTQ4LTQuNTEzYy0xMi40MDgtNC43MDctMjYuMTctMy4xNDctMzkuNDU3LTMuNDEyYy0xNi41MDEtMC4zMjktMzMuMDAyLTAuNjU1LTQ5LjUwMy0wLjk5Mg0KCQljLTE5LjA2OC0wLjM4Mi0xOS43NDUsMjQuMTIzLTUuODE4LDMyLjI4YzYuOTU2LDQuMDc5LDE4LjE0LDMuNjExLDI1Ljg2Myw0LjQwNGM0Ljk2OSwwLjUxMyw5LjkzOCwwLjk3NywxNC45MTUsMS40NjMNCgkJYy0xMC43OTUsMTAuNzg3LTIxLjU4MiwyMS41NzktMzIuMzY2LDMyLjM2MkMyNjEuMTI2LDE3OS4yNTMsMjMxLjM5NCwxOTkuNjUzLDI0OS40NTksMjE3LjcxOHoiICAvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiMxODkwZmY7IiBkPSJNOTYuNzM2LDE5OC4wMTRjLTAuMzgyLDE5LjA2OCwyNC4xMTYsMTkuNzQ1LDMyLjI3Myw1LjgxOGM0LjA3OS02Ljk1NiwzLjYxMS0xOC4xMzMsNC40LTI1Ljg2Mw0KCQljMC41MTMtNC45NjUsMC45OC05LjkzOCwxLjQ2My0xNC45MDdjMTAuNzg3LDEwLjc4NywyMS41NzUsMjEuNTgyLDMyLjM2NiwzMi4zNjZjMTEuMzE5LDExLjMyNiwzMS43MjYsNDEuMDU1LDQ5Ljc5OSwyMi45ODYNCgkJYzE4LjExLTE4LjExLTExLjgzOS0zOC42NDUtMjMuMTgtNDkuOTljLTEwLjg1OS0xMC44NTktMjEuNzIxLTIxLjcyMS0zMi41ODctMzIuNTc5YzExLjM1Ni0xLjAxNCwyMi43MTItMi4xMDMsMzMuOTUzLTMuNzcyDQoJCWMxNy44NjctMi42NTcsMjQuNTI3LTI0Ljc3NCw4LjgwOC0zMi45NWMtMS4xMTktMC44MzQtMi41MjItMS4zNzMtNC4xNTctMS41OTRjLTEuNTI3LTAuMzc0LTIuOTMtMC4zODItNC4xOTUtMC4wNzkNCgkJYy0xNC43MiwwLjI5Mi0yOS40MzYsMC41ODQtNDQuMTY0LDAuODc2Yy0xNC4zMDksMC4yODQtMjkuODY3LTEuNjMxLTQzLjMyMiwzLjU3Yy0wLjYyMSwwLjE1Ny0xLjIyNywwLjM5Ny0xLjgyNiwwLjcNCgkJYy0wLjE5OCwwLjA4Mi0wLjQsMC4xMzEtMC41OTEsMC4yMjVjMC4wMywwLjAxNSwwLjA2NywwLjAyNiwwLjEwMSwwLjA0MWMtMC4xMDksMC4wNi0wLjIxMywwLjEwNS0wLjMxNCwwLjE2OA0KCQljMC42NjYtMC45MDYsMC41Mi0wLjk5NS0xLjkwOCwxLjQzM2MtMS41NTcsMS41NTctMi4zNzYsMy4yOTYtMi42OSw1LjA1OWMtNC40OTQsMTIuMjg0LTIuOTc1LDI1Ljg3OC0zLjIzNywzOQ0KCQlDOTcuMzk0LDE2NS4wMTUsOTcuMDY1LDE4MS41MTMsOTYuNzM2LDE5OC4wMTR6Ii8+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzE4OTBmZjsiIGQ9Ik0xMDMuNzgxLDM2NC4yMzhjMCwwLDAtMC4wMDctMC4wMDctMC4wMDdDMTA1LjI2MywzNjUuNzEyLDEwNi42NTEsMzY3LjEwOCwxMDMuNzgxLDM2NC4yMzh6Ii8+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzE4OTBmZjsiIGQ9Ik0xMDMuNzY3LDM2NC4yMjNjMC4wMDcsMCwwLjAwNywwLjAwNCwwLjAwNywwLjAwNEMxMDIuMjE3LDM2Mi42NjYsMTAwLjU3OSwzNjEuMDM1LDEwMy43NjcsMzY0LjIyMw0KCQl6Ii8+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzE4OTBmZjsiIGQ9Ik0yMTcuNzI5LDI1MC44NDRjLTE4LjExOC0xOC4xMTgtMzguNjUyLDExLjgzMS00OS45OTQsMjMuMTczDQoJCWMtMTAuODU5LDEwLjg2Mi0yMS43MjEsMjEuNzI4LTMyLjU3OSwzMi41ODdjLTEuMDEtMTEuMzU2LTIuMDk5LTIyLjcxMi0zLjc3Mi0zMy45NTNjLTIuNjUzLTE3Ljg2My0yNC43NzQtMjQuNTI3LTMyLjk0Ni04LjgwOA0KCQljLTAuODM0LDEuMTIzLTEuMzgxLDIuNTI5LTEuNTk0LDQuMTY1Yy0wLjM4MiwxLjUyNy0wLjM4MiwyLjkzLTAuMDc5LDQuMTg3YzAuMjkyLDE0LjcyLDAuNTg0LDI5LjQ0LDAuODc2LDQ0LjE2NA0KCQljMC4yNzcsMTQuMDc3LTEuNTcyLDI5LjM0NywzLjMxMSw0Mi42NDFjMC4zMDcsMS43NzQsMS4xMjYsMy41MjUsMi42OTgsNS4wOTZjMC4wNTIsMC4wNTYsMC4wNzksMC4wODIsMC4xMzEsMC4xMzgNCgkJYzEuNTU3LDEuNTQyLDMuMjg5LDIuMzY1LDUuMDM2LDIuNjc1YzEyLjI5Miw0LjUwNSwyNS44OTMsMi45ODIsMzkuMDEyLDMuMjQ0YzE2LjUwMSwwLjMyOSwzMy4wMDIsMC42NTksNDkuNTAzLDAuOTg4DQoJCWMxOS4wNjgsMC4zNzgsMTkuNzQ1LTI0LjExOSw1LjgxOC0zMi4yOGMtNi45NTYtNC4wNzktMTguMTQtMy42MDctMjUuODYzLTQuNGMtNC45NjktMC41MTMtOS45MzgtMC45NzMtMTQuOTE1LTEuNDYzDQoJCWMxMC43OTUtMTAuNzg4LDIxLjU4Mi0yMS41NzUsMzIuMzY2LTMyLjM2MkMyMDYuMDc0LDI4OS4zMDksMjM1Ljc5NSwyNjguOTA5LDIxNy43MjksMjUwLjg0NHoiLz4NCgk8cGF0aCBzdHlsZT0iZmlsbDojMTg5MGZmOyIgZD0iTTM3MC40NiwyNzAuNTRjMC4zODItMTkuMDY4LTI0LjExNi0xOS43NDktMzIuMjgtNS44MThjLTQuMDcxLDYuOTU2LTMuNjAzLDE4LjEzMy00LjQsMjUuODU5DQoJCWMtMC41MTMsNC45NjktMC45NzMsOS45NDItMS40NjMsMTQuOTExYy0xMC43ODgtMTAuNzkxLTIxLjU3NS0yMS41ODItMzIuMzU5LTMyLjM2NmMtMTEuMzI2LTExLjMyNi0zMS43My00MS4wNTUtNDkuNzk5LTIyLjk4Ng0KCQljLTE4LjExOCwxOC4xMSwxMS44MzEsMzguNjQ5LDIzLjE3Myw0OS45ODZjMTAuODY2LDEwLjg2MiwyMS43MjgsMjEuNzI1LDMyLjU4NywzMi41ODNjLTExLjM1NiwxLjAxNC0yMi43MTIsMi4xMDMtMzMuOTUzLDMuNzcyDQoJCWMtMTcuODY3LDIuNjU3LTI0LjUyNywyNC43NzQtOC44MDEsMzIuOTVjMS4xMTksMC44MzQsMi41MjIsMS4zNzMsNC4xNSwxLjU5NGMxLjUzNCwwLjM3NCwyLjkzNywwLjM4Miw0LjE5NSwwLjA3OQ0KCQljMTQuNzItMC4yOTIsMjkuNDQ0LTAuNTg0LDQ0LjE2NC0wLjg3NmMxNC4wNzctMC4yODEsMjkuMzUsMS41NjQsNDIuNjQxLTMuMzExYzEuNzc3LTAuMzA3LDMuNTI4LTEuMTI2LDUuMS0yLjY5OA0KCQljMi40MjUtMi40MzIsMi4zMzktMi41NzQsMS40MjYtMS45MDFjMC4wNi0wLjEwNSwwLjEwOC0wLjIxNywwLjE2OC0wLjMyMmMwLjAxNSwwLjAzNywwLjAzLDAuMDcxLDAuMDQ1LDAuMTAxDQoJCWMwLjA4Ni0wLjIwMiwwLjE0Ni0wLjQwOCwwLjIzNi0wLjYxYzAuMjg0LTAuNTY1LDAuNTEzLTEuMTUyLDAuNjc0LTEuNzQ3YzQuODMxLTEyLjQ3MSwzLjI0NC0yNi4zMjcsMy41MS0zOS43MDQNCgkJQzM2OS44MDIsMzAzLjUzOSwzNzAuMTMxLDI4Ny4wNDIsMzcwLjQ2LDI3MC41NHoiLz4NCjwvZz4NCg0KPC9zdmc+DQo=) no-repeat;
}
div.qtype_lti_maximized {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0 none;
    z-index:99999999999;
}
.qtype_lti_framediv{
  position: relative;
}