#detailsFrame{
    z-index: 10;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-direction: row;

}
@media screen and (min-width: 950px){
    #detailsFrame{
        height: unset!important;
        z-index: 10;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        flex-direction: row;
    }
    .operationalCompetenceSymbol{
        display: block;
        min-width: 1%;
        max-width: 1%;
        text-align: center;
        color: #897754;
    }
    .operationalCompetenceName{
        display: block;
        min-width: 12%;
        max-width: 12%;
    }
    .competenceDomainSymbol{
        display: block;
        min-width: 1%;
        max-width: 1%;
        color: #897754;
        padding: unset!important;
        padding-top: .75rem!important;


    }
    .competenceDomainName{
        display: block;
        min-width: 10%;
        max-width: 10%;
        padding: unset!important;
        padding-top: .75rem!important;
        padding-bottom: .75rem!important;


    }
    #courseplandetails{
        table-layout: fixed;
        background-color: white;

    }
    #courseplandetails tr{
        display: flex;
        flex-direction: row;
        width: 100%;
        max-width: 100%;
        border-top: 1px solid #dee2e6;;
        padding-left: 5px;

    }
    #courseplandetails td{
        border:unset;
    }
    #exitdetails{
        align-self: center;
        margin-left: 70%;
        font-size: 2rem;
    }
    #exitdetails:hover{
        color: black;
    }

}

@media screen and (max-width: 1260px){
    #courseplandetails{
        font-size: 0.7rem;
    }
}
@media screen and (max-width: 950px){
    #leftColumn{
        transform: translateX(0);
        transition: transform .5s ease-in-out;
        z-index: 9;
        position: absolute;
        left: 0;
        top: 0;
        width: 30%;
        display: flex;
        flex-direction: column;
        background-color: #AE9B70 ;
        min-width: 125px !important;
        max-height: 100vh;
        min-height: 100vh;
        overflow-y: auto;
    }
    .compdom{
        display: flex;
        flex-direction: column;
        color: white;
        padding: 0 2% 0 2%;
        margin:0 2% 0 2%;
        background-color: white;
        border-radius: 10px;
        cursor: default;
        font-size: 0.8rem;
    }
    .compdom:hover{
        background-color:rgba(220, 220, 220, 0.8);
    }
    .compdom:nth-child(n+2){
        border-top: .1rem white solid;
        margin-bottom: 5px;
    }
    #opcompList{
        padding-left: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: padding-left .5s ease-in-out;
        min-height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        justify-content: stretch;
    }
    #closelbtn{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        position: absolute;
        left: 5%;
        top: 0;
        transition: all .3s linear;
        z-index: 10;
        transform: translateX(-100vh);
        color: #85724e;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background-color: white;

    }
    #closelbtn:hover{
        background-color: #85724e;
        color: white;
    }
    #listbtn{
        transition: all .3s linear;
        color: #85724e;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background-color: white;
    }
    #listbtn:hover{
        background-color: #85724e;
        color: white;
    }
    .operationalCompetence{
        font-size: 0.8rem;
        display: flex;
        flex-direction: column;
        background-color: white;
        width: 80%;
        margin-bottom: 5px;
        border: 2px #897754 solid;
        border-radius: 10px;
        min-height: 150px;
        max-height: 400px;
        flex: 1.2;
        justify-content: space-between;
    }

    .operationalCompetenceSymbol{
        border-bottom: 2px #dee2e6 solid;
        margin: 0 .8rem 0 .8rem;
        color: #897754;
    }
    .operationalCompetenceName{
        margin: 0 .8rem 0 .8rem;

    }
    .operationalCompetenceProgress{
        margin: 0 .8rem 0 .8rem;

    }
    .competenceDomainSymbol{
        color: #897754;
        border-bottom: 1px #dee2e6 solid;
    }
    .competenceDomainName{
        color: black;
    }
    #exitdetails{
        position: absolute;
        top: 0;
        right: 5px;
        align-self: center;
        margin-left: 70%;
        font-size: 2rem;
        color: white;
    }
    #exitdetails:hover{
        color: black;
    }
}