.mtatooltip {
    position: relative;
    display: inline-block;
    /* border-bottom: 1px dotted black; If you want dots under the hoverable text */
}

/* Tooltip text */
.mtatooltip .mtatooltiptext {
    opacity: 0;
    transition: opacity 0.5s;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    
    width: 140px;
    top: 100%;
    left: 50%;
    margin-top: 7px;
    margin-left: -70px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.mtatooltip .mtatooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.mtatooltip:hover .mtatooltiptext {
    opacity: 1;
}

.centerflex {
    display: flex;
    align-items: center;
}

.rightflex {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

.table>tbody>tr>td {
    vertical-align: middle;
}

.bg-grey {
    background-color: #f5f5f5;
}

.col-sm-6.col-md-offset-2.col-md-8 {
    min-width: 500px;
}

.text-green {
    color:#1B5E20;
}





.mta-btn-group-title {
    margin: 0px 0 10px 0;
    /* display: flex;
    flex: 1;
    justify-content: flex-end; */
}

.mta-header-with-btn {
    /* display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between */
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: "title btn";
    align-items: center;
}

@media (max-width: 767px) {
    .mta-header-with-btn {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: "title" "btn";
    }

    
}

.mta-header-with-btn div {
    margin: 10px;
}





.citem-heading {
    margin-bottom: 0;
}

.citem-text {
    margin-top: 5px;
}

.pale-text {
    color: #777;
}

pre {
    max-height: 350px;
}

/* simpleMDE fix min-height */
.CodeMirror, .CodeMirror-scroll {
	min-height: 110px;
}

div.formio-form td button.btn-danger {
    margin: auto;
    display: block;
}

div.formio-form .formio-component-datagrid .panel {
    box-shadow: none;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
}

div.formio-form .formio-component-datagrid .panel .panel-body {
    padding-bottom: 0;
}

.p-inline p {
    display: inline;
}

.no-border, .no-border table, .no-border td, .no-border tr, .no-border th, .no-border thead, .no-border tbody {
    border: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0;
}

.no-margin-bottom-child * {
    margin-bottom: 0;
}

.has-feedback .form-control {
    padding-right: 12px;
}

.question-choice {
    font-style: italic;
}

i.material-icons {
    vertical-align: middle;
}

.review-view {
    /* margin-left: 25px; */
    margin-top: 5px;
    background-color: #ccf5cc;
    padding: 1px 25px;
    border-radius: 5px;
}

.evaluation-view {
    /* margin-left: 20px; */
    /* margin-right: 20px; */

    margin-top: 5px;
    background-color: #ddddf5;
    padding: 1px 25px;
    border-radius: 5px;
}


.char-count .badge-info {
    color: #fff;
    background-color: #5bc0de;
}

.char-count .badge-warn {
    color: #fff;
    background-color: #f0ad4e;
}