/* root element for accordion. decorated with rounded borders and gradient background image */
.toolsaccordion {
	
	background-color: #004A99 !important;
    width: 100%;
    border: 0px solid #E4DCAD;
    padding-top: 50px;
    -webkit-border-radius: 0 30px 0 0;
    -moz-border-radius: 0 30px 0 0;
    border-radius: 0 30px 0 0;
	position: relative;
}


.toolsaccordion-main::-webkit-scrollbar {
    width: 0.5rem;
}

.toolsaccordion-main::-webkit-scrollbar-track {
    background: transparent;
}

.toolsaccordion-main::-webkit-scrollbar-thumb {
    background: #4D81B8;
}

.dng-column-inner:has(.toolsaccordion),
.panebox:has(.toolsaccordion),
.DnnModule:has(.toolsaccordion),
.contentpane:has(.toolsaccordion),
.DNNModuleContent:has(.toolsaccordion),
.toolsaccordion{
	height: 100%;
	max-height: 100%;
}

@media (min-width:992px) {
	.toolsaccordion-main{
		height: calc(100% - 100px);
		top: 50px; 
		position: absolute;
		overflow: auto;
		width: 100%;
		display: block !important;
	}
}

@media (max-width:991px) {
	.toolsaccordion{
		border-radius: 0;
	}
	.toolsaccordion-main{
		display: none;
	}
	#dng-wrapper:has(.toolsaccordion){
		padding-top: 50px;
	}
	.toolsaccordion{
		position: absolute;
		width: 100%;
		top: -50px;
		left: 0;
		z-index: 999999;
	}

	.dng-column:has(.toolsaccordion),
	.dng-column:has(.toolsaccordion)+.dng-column{
		width: 100%;
	}
	#dng-wrapper:has(.toolsaccordion) .page-breadcrumbs .breadcrumbs{
        position: relative !important;
        margin-bottom: 10px;
        width: 100% !important;
        margin-top: 5px;
	}

	.toolsaccordion .mobile-icon{
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='448' height='512' viewBox='0 0 448 512'%3E %3Cpath fill='%23ffffff' d='M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z'/%3E%3C/svg%3E");
		width: 40px;
		height: 40px;
		position: absolute;
		top: 5px;
		left: 15px;
        background-size: 20px auto;
		background-repeat: no-repeat;
		background-position: center center;
		cursor: pointer;
	}
	.toolsaccordion .mobile-icon.active{
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='512' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z'/%3E%3C/svg%3E");
        background-size: 17px auto;

	}


}

/* accordion header */
	.toolsaccordion h3 {
		background-color:#004A99 !important;
		margin: 0;
		font-size: 15px;
		font-weight: normal;
		border-bottom: 0px solid #E4DCAD !important;
		cursor: pointer;
		padding: 0.5rem 0.5rem 0.5rem 0;
	}

/* currently active header */
	.toolsaccordion h3.current {
		cursor: default;
		background-color: #3C2313;
	}

	.toolsaccordion h3.current:before {
		content: '';
		position: absolute;
		background-image: url("/DesktopModules/DDRMenu/LeftMenu/active-arrow.png");
		background-size: 1rem;
		background-repeat: no-repeat;
		background-position-y: center;
		width: 2em;
		height: 2em;
		background-position-x: left !important;
		left: 0;
    	background-position-x: left;
	}


/* accordion pane */
	.toolsaccordion div.pane {
		border-bottom: 0px solid #E4DCAD !important;
		border-width: 0 2px;
		display: none;
		padding: 0px;
		font-size: 12px;
		background-color: #004A99;
	}

/* entry inside pane with no link */
		.toolsaccordion div.pane div {
			color: #ffffff;
			border-bottom: 1px solid #004A99 !important;
		}

/* a title inside pane */
		.toolsaccordion div.pane h3 {
			font-weight: normal;
			margin: 0 0 -5px 0;
			font-size: 15px;
			border-bottom: 0px solid #E4DCAD !important;
		}

.WInnerLevel {
	border-bottom: 0px solid #E4DCAD !important;
	background-color: #004A99;
	padding-left: 10px;
}

.toolsaccordion A:link, .toolsaccordion A:visited, .toolsaccordion A:active {
	color: #c5c6c8 !important;
	text-decoration: none;
	padding:2px 2px 2px 20px;
	font-size: 13px;
}

.toolsaccordion H3 A:link, .toolsaccordion H3 A:visited, .toolsaccordion H3 A:active {
	color: #FFFFFF;
	font-size: 15px;
}

.toolsaccordion h3.current:hover, .toolsaccordion H3:hover, .WInnerLevel:hover  {
		background-color: #014284 !important;
		color: #EEEEEE !important;
	}
.toolsaccordion A:hover, .toolsaccordion h3.current a:hover, .toolsaccordion H3 a:hover, 
 .toolsaccordion div.pane div:hover {
	color: #EEEEEE !important;
}

.toolsaccordion h3{
	position: relative;
}

.toolsaccordion h3 a::after{
	content: none;
}
.toolsaccordion .arrow{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 30px;
}
.toolsaccordion .arrow::after{
	content: "";
    border: solid White;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px 3px 3px 3px;
    transform: rotate(-45deg);
    position: absolute;
	top: calc(50% - 5px);
	left: calc(50% - 2px);
	transition: all ease-in 200ms;
}
.toolsaccordion .activate > .arrow::after{
    transform: rotate(45deg);
}

.toolsaccordion .current{
    background-color: #004A99 !important;
}
.toolsaccordion .current a{
    color: #fff !important;
}