.green-text {
    color: green;
}

.red-text {
    color: red;
}

.blue-text {
    color: rgb(55, 88, 208);
}

.redWhite {
    color: #FFF;
    background-color: red;
}

.greenWhite {
    color: #FFF;
    background-color: darkgreen;
}



/* Extend the width of the main content area */
.md-grid {
    /* max-width: 100% !important;*/
    /* padding: 0 2rem;*/
}

body {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, "Helvetica Neue", Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.md-content,
.md-sidebar--secondary .md-sidebar__inner {
    /* border-left: 1px solid rgba(0, 0, 0, .1);*/
}

.md-typeset h1 {
    color: #2980B9;
    border-bottom: 1px solid #2980B9;
    border-top: 1px solid #2980B9;
    font-weight: 600;
}

.md-typeset h2 {
    color: #2980B9;
    border-bottom: 1px solid #2980B9;
}

.md-typeset .admonition,
.md-typeset details {
    font-size: inherit !important;
}

/**********Iframe************/
.containerFrame {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/************edit code pen********************/
.editCp {
    display: inline-flex;
    /*flex-flow: row nowrap;
    justify-content: center;*/
    align-items: center;
    min-height: 50px;
    /* background-color: #4CAF50; */
    background-image: url('../images/editOnCp.png');
    background-repeat: no-repeat;
    padding: 0 3px 0 170px;
    color: rgb(60, 58, 58);
    border: 1px solid rgb(60, 58, 58);
    text-decoration: none;
    vertical-align: middle;
    /*margin-left: 10rem;*/
}

.editCpLong {
    display: inline-flex;

    align-items: center;
    min-height: 50px;
    background-color: #3d3d3f;
    background-image: url('../images/editOnCpLong.png');
    background-repeat: no-repeat;
    padding: 0 15px 0 170px;
    color: #FFF;
    text-decoration: none;
    vertical-align: middle;


    outline: 1px solid #FFF;
    outline-offset: -5px;

}

.editCp2 {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    background-color: #4CAF50;
    background-image: url('../images/logo-w3schools-small.png');
    background-repeat: no-repeat;
    padding: 0 3px 0 40px;
    color: white;
    text-decoration: none;
    vertical-align: middle;
    margin-left: 10rem;
}

/**align img****/
.clearFloat {
    clear: both;
}

/*******************/
.widthInhe {
    width: inherit !important;
}

/*******************/
.flex-container {
    display: flex;
    justify-content: space-between;
}

.flex-item {
    flex: 1;
    padding: 10px;
}

/*******quiz************/

.explanation {
    margin-bottom: 1rem;
}

/***********************/
.md-nav__item--section>.md-nav__link:not(.md-nav__container) {
    color: var(--md-primary-fg-color--dark);
}

img {
    border: 1px solid #CCC;
}