/*******************************************
        Temp Styles for engineers
*******************************************/

.placeholderComponent {
    border: 2px solid blue;
    margin: 3px;
    padding: 3px;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.pointer {
    cursor: pointer;
}

.border-bottom {
    border-bottom: 2px solid grey;
}

.category-selector {
    position: absolute;
    background-color: white;
    z-index: 100;
}

.word-details {
    z-index:100;
    position: absolute;
    max-width: none;
    height: auto;
}

/*.is-critical:after{*/
    /*content:"*";*/
    /*font-weight: bold;*/
/*}*/

/*.is-copied{*/
    /*border: solid 1px #92479a;*/
/*}*/

.is-word-large{
    width: 300px;
}

.is-word-medium{
    width: 250px;
}

.is-word-small{
    width: 200px;
}

/*basic styles for Your Lessons content*/
.container {
    height:100%;
    width:100%;
    border: 2px solid green;
}
.sidebar {
    float: left;
    width: 30%;
    display: block;
    height: inherit;
}

.content {
    float: left;
    width: 68%;
    height: inherit;
}

.vertical-row {
    Float:left;
    height:100px;
    width:1px;
    background-color: red
}
.grid-container{
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 5px;
}

.grid-item{
    border: 1px solid rgba(0,0,0,0.8);
    text-align: left;
    padding: 10px;
}
/*end your lessons content */


textarea.ng-invalid.ng-dirty, /* invalid data entered by user */
textarea.ng-invalid.highlightPristine /* invalid prepopulated data */ {
    background: #ffd8d8;
    padding-right: 26px;
    border: solid 1px #ef7b7b;
}

select.ng-invalid.ng-dirty, /* invalid data entered by user */
select.ng-invalid.highlightPristine /* invalid prepopulated data */ {
    background: #ffd8d8;
    padding-right: 26px;
    border: solid 1px #ef7b7b;
}

.radioCustom_button.ng-invalid.ng-dirty, /* invalid data entered by user */
.radioCustom_button.ng-invalid.highlightPristine /* invalid prepopulated data */ {
    background: #ffd8d8;
    border: solid 1px #ef7b7b;
}

.error-msg {
    color: red;
}

/*
.indent {
    position: relative;
    left: 20px;
}
.wide {
    width: 100%;
}
*/

.content-width {
    width: max-content;
}