html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    #accordion .glyphicon {
        margin-right: 10px;
    }

    #selected {
        background-color: #489FDC;
    }

        #selected a {
            color: azure;
        }

    @media ( min-width: 768px ) {
        .grid-divider {
            position: relative;
            padding: 0;
        }

            .grid-divider > [class*='col-'] {
                position: static;
            }

                .grid-divider > [class*='col-']:nth-child(n+2):before {
                    content: "";
                    border-left: 1px solid #DDD;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                }

        .col-padding {
            padding: 0 15px;
        }
    }

    .progress {
        position: relative;
        height: 25px;
    }

        .progress > .progress-type {
            position: absolute;
            left: 0px;
            font-weight: 800;
            padding: 3px 30px 2px 10px;
            color: rgb(255, 255, 255);
            background-color: rgba(25, 25, 25, 0.2);
        }

        .progress > .progress-completed {
            position: absolute;
            right: 0px;
            font-weight: 800;
            padding: 3px 10px 2px;
        }
    /* css for course tree	*/
    .tree, .tree ul {
        margin: 0 0 0 1em; /* indentation */
        padding: 0;
        list-style: none;
        color: #369;
        position: relative;
    }

        .tree ul {
            margin-left: .5em;
        }
            /* (indentation/2) */
            .tree:before, .tree ul:before {
                content: "";
                display: block;
                width: 0;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                border-left: 1px solid;
            }

        .tree li {
            margin: 0;
            padding: 0 1.5em; /* indentation + .5em */
            line-height: 2em; /* default list item's `line-height` */
            font-weight: bold;
            position: relative;
        }

            .tree li:before {
                content: "";
                display: block;
                width: 10px; /* same with indentation */
                height: 0;
                border-top: 1px solid;
                margin-top: -1px; /* border top width */
                position: absolute;
                top: 1em; /* (line-height/2) */
                left: 0;
            }

            .tree li:last-child:before {
                background: white; /* same with body background */
                height: auto;
                top: 1em; /* (line-height/2) */
                bottom: 0;
            }
            .answer:hover {
        color: #fff;
        background-color: #5fa2db;
        border-radius:5px;
        transform: scale(1.3) rotate(360deg) ;
	    transition: 0.5s;
    }