/*Light-color er brukt på bakgrunnen til knapper og ting som skal trykkes på*/
/*Dark-color er brukt til tekst eller ikoner som ligger oppå light-color*/
/*Light-color og dark-color bytter plass når man hovrer over noe.*/
/*Very-dark-color er brukt til illustrere at noe er valgt. Feks når brukeren velger skin*/
:root {
	--light-color: #e8e8e8;
	--dark-color: #787878;
	--very-dark-color: #545454;
	--navbar-line-color: #ff6002;
}

:focus { outline: none; }

table.dataTable thead .sorting_asc {
	background-image: url("./sort_asc.png") !important;
}

table.dataTable thead .sorting_desc {
	background-image: url("./sort_desc.png") !important;
}

.TopLogo {
	background: url('./logo nias.png') no-repeat 0 0;
}

.navbar, .nav-link {
	color: var(--dark-color) !important;
	border-color: var(--navbar-line-color) !important;
}

.navbar > div > ul > li > a:hover{
	color: var(--light-color) !important;
}

.navbar > div > ul > li > a:hover .icon-background{
	color: var(--dark-color) !important;
}

.nav-link:focus {
	color: var(--light-color) !important;
}

.nav-link:focus  .icon-background{
	color: var(--dark-color) !important;
}
.icon-background {
	color: var(--light-color);
}

	.icon-background:hover {
		color: var(--dark-color) !important;
	}

.Heading3 {
	color: #404040;
}

.tableHeaderFixed thead th {
	background-color: white;
	border: 0px !important;
}

.statusInfo {
	color: var(--dark-color) !important;
	background-color: var(--light-color);
}
	.statusInfo:hover {
		background-color: var(--dark-color);
		color: var(--light-color) !important;
	}
	.statusInfo:focus {
		background-color: var(--dark-color);
		color: var(--light-color) !important;
	}

.certificateInfo {
	color: var(--dark-color) !important;
	background-color: var(--light-color);
}
	.certificateInfo:hover {
		background-color: var(--dark-color);
		color: var(--light-color) !important;
	}
	.certificateInfo:focus {
		background-color: var(--dark-color);
		color: var(--light-color) !important;
	}

.radio-mypage label {
	border: 0px;
	font-weight: bold;
	color: var(--dark-color);
	background-color: var(--light-color);
}
	.radio-mypage label:hover {
		background-color: var(--dark-color);
		color: var(--light-color);
	}
	.radio-mypage label:focus {
		background-color: var(--dark-color);
		color: var(--light-color);
	}
.radio-mypage input[type="radio"]:checked + label {
	background-color: var(--very-dark-color);
	color: var(--light-color);
}

.CourseListTitle {
	color: var(--dark-color);
}

.smallStartCourse {
	color: var(--dark-color) !important;
	background-color: var(--light-color) !important;
	border-color: transparent !important;
	border-radius: 0px !important;
}

	.smallStartCourse:hover {
		color: var(--light-color) !important;
		background-color: var(--dark-color) !important;
	}
	.smallStartCourse:focus {
		color: var(--light-color) !important;
		background-color: var(--dark-color) !important;
	}

.btn-mypage, .saveNote, .deleteNote {
	font-weight: bold;
	border: 0;
	background-color: var(--light-color);
	color: var(--dark-color);
}

.btn-mypage:hover, .saveNote:hover, .deleteNote:hover {
	color: var(--light-color);
	background-color: var(--dark-color);
}
.btn-mypage:focus, .saveNote:focus, .deleteNote:focus {
	color: var(--light-color);
	background-color: var(--dark-color);
}

.radio-frontpage label {
	font-weight: bold;
	background-color: var(--light-color);
	color: var(--dark-color);
	border: 0;
	border-radius: 0;
	margin: 5px;
}

	.radio-frontpage label:hover {
		background-color: var(--dark-color) !important;
		color: var(--light-color) !important;
	}
	.radio-frontpage label:focus {
		background-color: var(--dark-color) !important;
		color: var(--light-color) !important;
	}

.radio-frontpage input[type="radio"]:checked + label {
	background-color: var(--light-color);
	border-color: transparent;
}

.list-group-item {
	color: var(--dark-color) !important;
}

.dataTables_wrapper {
	overflow-x: unset !important;
}

.TabStatus {
	background-color: var(--light-color);
	padding: 8px;
}

.TabInfo {
	background-color: var(--light-color);
	padding: 8px;
}

.TabMessage {
	background-color: var(--light-color);
	padding: 8px;
}

.TabMail {
	background-color: var(--light-color);
	padding: 8px;
}

.TabLink {
	background-color: var(--light-color);
	padding: 8px;
	transition: 0.3s;
}

	.TabLink:hover {
		color: var(--light-color) !important;
		background-color: var(--dark-color);
	}
	.TabLink:focus {
		color: var(--light-color) !important;
		background-color: var(--dark-color);
	}

.TabActive {
	background-color: var(--dark-color);
	color: var(--light-color) !important;
	padding: 8px;
}

.Home {
	display: none;
}
.Speaker {
	display: none;
}

.Status1 {
    display: none;
}

/*fjern dette*/
.fa-search {
	visibility: hidden;
}

.SelectButton {background:url('./select_button_square.png') no-repeat 0 0;cursor : pointer;height : 21px;width : 21px; vertical-align : middle;}
.SelectButtonDisabled {background: url('./select_button_disabled.png') no-repeat 0 0;height : 21px;width : 21px}
.SelectButtonSquare {background: url('./select_button_square.png') no-repeat 0 0;cursor : pointer;height : 20px;width : 21px}
.SelectButtonSquareDisabled {background: url('./select_button_square_disabled.png') no-repeat 0 0;height : 20px;width : 21px}
.CorrectSymbol {background: url('./correct_symbol.png') no-repeat 0 0;cursor : pointer;height : 21px;width : 21px;}
.CorrectSymbolSquare {background: url('./correct_symbol.png') no-repeat 0 0;cursor : pointer;height : 20px;width : 21px;}
.WrongSymbol {background: url('./wrong_symbol.png') no-repeat 0 0;cursor : pointer;height : 21px;width : 21px}
.WrongSymbolSquare {background: url('./wrong_symbol.png') no-repeat 0 0;cursor : pointer;height : 20px;width : 21px}
.SUOn {background: url('./su_on.png') no-repeat 0 0;cursor : pointer;height : 21px;width : 21px}
.SUOnDisabled {background: url('./su_on_disabled.png') no-repeat 0 0;height : 21px;width : 21px}
.SUOnSquare {background: url('./su_on_square.png') no-repeat 0 0;cursor : pointer;height : 21px;width : 21px}
.SUOnSquareDisabled {background: url('./su_on_disabled.png') no-repeat 0 0;height : 21px;width : 21px;}
.SUOnSquareCorrect {background: url('./correct_symbol.png') no-repeat 0 0;height : 21px; width : 21px;}
.WrongAnswerSmall {background: url('./wrong_answer_small.png') no-repeat 0 0;height :21px; width:21px;}

.Visible30001_L_2 {
    width: 746px;
    height: 480px;
    left: 26px;
    top: 10px;
}

.ContentTemplateButton {
    font-family: arial, sans-serif;
    font-size: 14px;
    color: black;
    text-align: center;
    width: 115px;
    height: 26px;
    padding: 4px;
    line-height: 18px;
    vertical-align: middle;
}

.DashBoard {
    font-size: 13px;
    padding-left: 3px;
}