@font-face {
    font-family: SegoeUI;
    src:
        local("Segoe UI"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format("woff");
    font-weight: 400;
}

@font-face {
	font-family: 'BAUHS93';
	src: url('font/BAUHS93.eot');
	src: local('BAUHS93'), url('font/BAUHS93.woff') format('woff'), url('font/BAUHS93.ttf') format('truetype');
}

@font-face {
	font-family: 'CENTAUR';
	src: url('font/centaur/CENTAUR.eot');
	src: local('CENTAUR'), url('font/centaur/CENTAUR.woff') format('woff'), url('font/centaur/CENTAUR.ttf') format('truetype');
}


/* my Costum */

html,
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100%;
}


.font-primary-dark {
    color: #48813A;
}

.font-primary {
    color: #95C01E;
}

.btn-primary {
    background-color: #BFE72C;
    border: 2px solid #95C01E;
}

.btn-primary:hover {
    background-color: #95C01E;
    border: 2px solid #BFE72C;
}


/* end of my Costum */


/* index CSS */

.landing {
    width: 100%;
    height: 100%;
}

.landing img {
    width: 200px;
}

.landing h1,
.side-nav-header h3 {
    font-family: 'BAUHS93', Courier, monospace;
}

.landing .description {
    font-family: 'CENTAUR', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.landing .btn {
    border-radius: 100px;
}

.landing footer{
    color: #48813A;
    font-weight: bold;
}


/* responsive panding img */

@media only screen and (min-width:300px) {
    .landing img {
        width: 350px;
    }
}

@media only screen and (min-width:600px) {
    .landing img {
        width: 500px;
    }
}


/* end of responsive panding img */


/* end of index CSS */


/* template */

.body{
    position: relative;
    width: 100%;
    min-height: 100%!important;
}

/* side-nav */

.side-nav {
    position: absolute;
    background-color: #95C01E;
    transform: translateX(-100%);
    min-height: 100%;
    transition: 1s;
    z-index: 1000;
}

.side-nav-header {
    background-color: #F0F1F1;
    /* border: 1px solid red; */
}
.side-nav-header a{
    text-decoration: none;
    color: #48813A;
}
.side-nav-header a:hover{
    color: #95C01E;
}

.side-nav-header button {
    position: absolute;
    width: auto;
    height: auto;
    top: 5px;
    right: 5px;
    background-color: transparent;
    border: none;
}

.side-nav-toggler-icon {
    display: inline-block;
    background-image: url(img/side-nav-toggler-icon.svg);
    content: "";
    background-repeat: no-repeat;
    width: 2.5em;
    height: 2.5em;
    object-fit: fill;
    background-size: 100% 100%;
    margin-top: 10px;
    margin-bottom: 5px;
}

.side-nav-header img {
    width: 60%;
}

.list-group .list-group-item {
    background-color: transparent;
    border: none;
    color: aliceblue;
}

.separator {
    width: 100%;
    height: 1px;
    background-color: #fff;
    border-radius: 100px;
}

.side-nav-content {
    background-color: #95C01E;
    height: auto;
}

.side-nav-content p, .side-nav-content .separator{
    display: none;
}

.side-nav-content .separator {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.list-group .active::after {
    content: "";
    display: block;
    width: 50%;
    height: 3px;
    border-radius: 100px;
    background-color: #ffffff;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}


/* end of side-nav */


/* content */

.content {
    position: absolute;
    width: 100%;
    min-height: 100%;
    top: 0;
    /* transition:1s;  */
}


/* top-nav */

.top-nav {
    background-color: #F0F1F1;
    width: 100%;
    height: 50px;
    display: inline-flex;
    border: 1px solid #95C01E;
}

.top-nav button {
    background-color: transparent;
    border: none;
    height: 80%;
    margin-top: 5px;
}

.top-nav-toggler-icon {
    display: inline-block;
    background-image: url(img/humberger-icon.svg);
    content: "";
    background-repeat: no-repeat;
    width: 1.5em;
    height: 1.5em;
    object-fit: fill;
    background-size: 100% 100%;
    margin-top: 5px;
}

.top-nav h3 {
    width: 100%;
    text-align: center;
    line-height: 50px;
    margin: 0;
    text-align: center;
    font-size: 15pt;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* end of top-nav */

/* accordion */
.body .accordion .card-header .btn{
    color: #6C6D70;
    text-decoration: none;
    transition: 1s;
}
.body .accordion .card-header .btn:hover{
    color: rgb(43, 43, 44);
    font-size: 12.5pt;
}
/* accordion */

/* footer */
.body footer{
    margin-top: 15px;
    color: #48813A;
    font-weight: bold
}
/* end of footer */

/* end of content */

.open {
    transform: translateX(0);
}


/* responsive */

@media only screen and (min-width: 700px) {

    html {
        overflow: hidden;
    }
    body {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .body {
        display: flex;
        height: auto;
    }
    .side-nav {
        position: relative;
        transform: translateX(0);
        width: 25%;
        border: 1px solid #95C01E;
        height: auto;
    }
    
    .content {
        position: relative;
        width: 75%;
        height: auto;
    }
    .content .top-nav {
        border-left: none;
    }
    #show-menu,
    #hide-menu {
        display: none;
    }
}


/* end of responsive */


/* end of template */


/* container */

.container .card-body {
    border-bottom: 1px solid #dddddd;
}

.x-row,
.x-row-interval {
    color: red;
}

.x-row:hover,
.x-row-interval:hover {
    cursor: pointer;
}


@media only screen and (min-width: 768px) {
    .jawaban-benar-distribusi-frekuensi .row .card {
        height: 462px;
    }
    .jawaban-benar-distribusi-frekuensi .row .card-data,
    .jawaban-benar-distribusi-frekuensi .row .card-tabel-distribusi {
        height: auto;
    }
}

.data-distribusi-f {
    word-wrap: break-word;
}


/* end of container *