#page-loader{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,.75);
	z-index:5000;
	display:flex;
	display:-moz-flex;
	justify-content:center;
	align-items:center;
}

#page-loader svg{
	color:#000;
    width:50px;
    height:50px;
	animation : spin 1s linear infinite;
	-moz-animation : spin 1s linear infinite;
	-webkit-animation : spin 1s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }



.list-group-item.custom{
    border:none;
    border-radius:0;
    font-weight:bold;
    border-bottom:1px dashed #ccc;
}
.list-group-item.custom:hover a, .list-group-item.custom:hover{
    background:#f7f7f7;
    color:#000;
}
.floating-badge{
    position:absolute;
    top:5px;
    right:5px;
}


/* test page */
.counter{
    position:absolute;
    top:-5px;
    right:-5px;
    background:#fff;
    padding:.5em .8em;
    border-radius:5px;
    box-shadow:0 0 5px #ddd;
    font-weight:bold;
    font-size:25px;
}

ol.answer-container::after{
    content:"";
    display:block;
    position:relative;
    clear:both;    
}
ol.answer-container li{
    padding: 0.5em 1em;
    font-weight: bold;
    width: 95%;
    float: left;
    margin: 0.5em 1.5em;
}
ol.answer-container li:hover, ol.answer-container li.active{
    cursor:pointer;
    color:#45716B;
    background:#D3FFF9;
}
.pembahasan ol.answer-container li:hover:not(.active, .selected-answer, .true-answer){
    background:initial;
    color:initial;
}
ol.answer-container li.selected-answer{
    cursor:pointer;
    color:#000;
    background:#faa;
}

ol.answer-container li.true-answer{
    cursor:pointer;
    color:#000;
    background:#4BDDA4;
}

.question-label{
    position:absolute;
    top:0;
    left:0;
    padding:1rem;
    opacity:.15;
    font-size:50px;
    font-weight:bold;
    letter-spacing:-5px;
}

.pembahasan .question-container{
    border-bottom:1px solid #ccc;
}

.question-group{
    width:100%;
    clear:both;
}
.question-group::after{
    content:"";
    display:block;
    position:relative;
    clear:both;
}

.transition{
    transition:.3s ease;
    -moz-transition:.3s ease;
    -o-transition:.3s ease;
    -webkit-transition:.3s ease;
    -ms-transition:.3s ease;    
}

.load-more{
    background:#E6F8FF;
    text-align:center;
    cursor:pointer;
}

.profile-picture{
    border-radius:5px;
    width:100%;
    padding-bottom:100%;
    position:relative;
    overflow:hidden;
    cursor:pointer;
}
.profile-picture img, .profile-picture .overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.profile-picture input{
    display:none;
}
.profile-picture .overlay{
    z-index:2;
    background:rgba(0,0,0,.15);
    color:#fff;
    font-weight:bold;
    text-align:center;
    align-items:center;
    justify-content:center;
    text-transform:uppercase;
    display:none;
}
.profile-picture:hover .overlay{
    display:flex;
    display:-moz-flex;
}
.profile-picture .close{
    background:#d00;
    color:#fff;
    position:absolute;
    z-index:3;
    opacity:1;
    right:0;
    top:0;
    border-radius:5px;
    width:30px;
    height:30px;
    line-height:30px;
}

.screen.main-screen{
    width:100%;
}
.quick-change-page{
    margin:.75em 0;
    z-index:2;
    position:relative;
}
.quick-change-page .change-page{
    padding:.3em .6em;
    display:inline-block;
    margin-bottom:.3em;
    border:2px solid #ccc;
    color:#ccc;
    border-radius:4px;
    -moz-border-radius:4px;
    margin-right:.25em;
    transition:.3s ease;
    -moz-transition:.3s ease;
    -o-transition:.3s ease;
    -webkit-transition:.3s ease;
    -ms-transition:.3s ease;
}
.quick-change-page .change-page.current{
    border:2px solid #000!important;
    color:#000;
    font-weight:bold;
}
.quick-change-page .change-page.answered{
    background:#3ddc97;
    color:#fff;
    border:2px solid #3ddc97;
}
.not-visible{
    visibility:hidden;
}

.disable-selection .btn-selection{
    cursor:no-drop;
    pointer-events: none;
    opacity:.6;
}

.finish-test-container{
    position:fixed;
    z-index:5;
    width:100%;
    display:block;
    left:0;
    width:100%;
    bottom:0;
    border-radius:0;
    -moz-border-radius:0;
}
.finish-test-container .btn{
    display:block;
    font-size:40px;
    border-radius:0;
    font-weight:bold;
}

.ovx{
    overflow-x:scroll;
}

.bg-gradient-animated {
	animation-name: backgroundColorPalette;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear; 
}

@keyframes backgroundColorPalette {
	0% {
		background: #ee6055;
	}
	25% {
		background: #438A00;
	}
	50% {
		background: #438ABB;
	}
	75% {
		background: #ffd97d;
	}
	100% {
		background: #ff9b85;
	}
}


@media (max-width:767px){
    .question-label{
        font-size:30px;
        letter-spacing:-2px;
        position:relative;
        padding:0;
    }

    .counter{
        font-size:17px;
    }

    ol.answer-container li{
        width:100%;
        margin:.5em 0;
    }

    .finish-test-container .btn{
        font-size:18px;
    }

    .control-buttons .btn{
        font-size:.8rem;
    }

}









/* additional custom theme */
#page-topbar{
    background:#F7F7F7!important;
}

body[data-topbar=colored] .dropdown.show .header-item{
    background:#f0f0f0;
    color:#000;
}

body[data-topbar=colored] .header-item{
    color:#222;
}

.page-title-box{
    background-color:#CA393D;
}

body.authentication-bg{
    background-color:#CA393D!important;
}

body.authentication-bg .card-body{
    background:#f7f7f7;
    overflow:hidden;
}

body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav .nav-link, .topnav .navbar-nav .dropdown-item.active, .topnav .navbar-nav .dropdown-item:hover{
    color:#CA393D!important;
}
body[data-layout=horizontal][data-topbar=colored] .topnav .navbar-nav .nav-link.active{
    font-weight:bold;
}

.character-lists, .question-list{
    text-align:left;
    padding:1em 0;
    display:block;
    justify-content:center;
    align-items:center;
}
.character-lists .qbox, .question-list .char-question{
    display:inline-block;
    background:#eee;
    padding:.5em;
    border-radius:8px;
    margin-right:.25em;
}
.character-lists .qbox .char{
    font-size:40px;
    font-weight:bold;
    text-align:center;
    padding:.5rem 1rem;
    color:#000;
}
.character-lists .qbox .label{
    font-size:12px;
    font-weight:bold;
    border-top:1px solid #ccc;
    padding:.5rem 1rem;
    color:#000;
}

.question-list .char-question{
    font-size:30px;
    background:#f7f7f7;
    border:1px solid #f0f0f0;
}

.answer-list{
    text-align:left;
}
.answer-item:hover{
    background:#333;
    color:#fff;
    transition:.25s ease;
    -moz-transition:.25s ease;
    -o-transition:.25s ease;
    -webkit-transition:.25s ease;
}

@media (max-width:767px){
    .character-lists .qbox, .question-list .char-question{
        padding:0;
    }
    .character-lists .qbox .char{
        font-size: 20px;
    }
    .character-lists .qbox .label{
        font-size:10px;
    }
    .question-list .char-question{
        font-size:20px;
    }
}