/*
-----------------------------------
Dummy container
-----------------------------------
*/
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

#mainWrap {
    background-color:#EDEEEE;
}

#mainWrap .container {
    display: flex;
    width:75%;
    margin:0 auto;
}

#mainWrap .ccol {
    flex-grow:1;
}

#mainWrap .content {
    width: 75%;
    background-color:white;
    min-height:1200px;
    padding:80px 20px;
    padding-bottom:300px;
}

#mainWrap .sidebar {
    width: 25%;
    background-color: #ccc;
}


/*
-----------------------------------
Interactive Elements
-----------------------------------
*/
.mb0 {
    margin-bottom:0 !important;
}

.superScript {
    font-size:16px;
    vertical-align:top;
}

.boxKeyFind *, .canvasWrap *, .swal2-container * {
    font-family: 'Open Sans', sans-serif;
    color:black;
}

.canvasWrap {
    /* Note: width or max-width is needed for chartjs animation to work; */
    /*     max-width: 800px; */
    min-height:100px;
    margin:0 auto 120px;
    text-align: center;
    position:relative;
}

.canvasWrap canvas {
    /* display: inline-block; */
    width: 100%;
    border:solid 1px #cccccc;
}

.canvasWrap h2 {
    margin-bottom:20px;
    text-align: left;
}

.canvasWrap .text {
    text-align: left;
    margin-bottom:20px;
}

.canvasWrap button {
    display:inline-block;
    padding:10px 20px;
    font-size:20px;
    font-weight:bold;
    background-color:#43B02A;
    border:0;
    color:white;
    cursor:pointer;
    width:80px;
    margin-right:10px;
    border-radius:3px;
    border:solid 1px #b4ff5b;
}

.boxKeyFind h2 {
    margin-bottom:20px;
}







/*
-----------------------------------
Responsive Adjustments
-----------------------------------
*/
@media(max-width:1024px) {
    
    #mainWrap .container, #mainWrap .content {
        width:100%;
    }

    #mainWrap .sidebar {
        display:none;
    }
}