/* here you can put your own css to customize and override the theme */

#lock-screen{
	position:absolute;
	z-index:999999;
	width:100%;
	height:100%;
	background:#474747;
	display:none;
}


.tr-cpointer tr{
	cursor:pointer;
}


.dd3-content .link{
	cursor:pointer;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.mb10{ margin-bottom:10px !important; }
.mb15{ margin-bottom:15px !important; }
.mb20{ margin-bottom:20px !important; }

.mt10{ margin-top:10px !important; }
.mt15{ margin-top:15px !important; }
.mt20{ margin-top:20px !important; }

.p10 { padding: 10px !important; }
.p20 { padding: 20px !important; }

.br1 {
	border-right: 1px solid #ececec;
}

.bl1{
	border-left: 1px solid #ececec;	
}


.fright{
	float:right;
}


.fleft{
	float:left;
}

.dx-header-row{
	color:#474747;
}

.dx-datagrid .dx-header-filter {
    color: #5587ff !important;
}


.dx-datagrid .dx-header-filter-empty {
    color: #c8c8c8  !important;
}

.dx-datagrid-table .dx-state-hover{
	background-color:#f4f4f4 !important;
}

.dxHeaderStyle {
	background-color: #fcfcfc  !important;
	color: rgb(68, 68, 68) !important;
	font-weight: bolder !important;
	font-size: 14px !important;
}
.dxGroupStyle {
	background-color: #eaeaeab0    !important;
	color: #474747 !important;
	font-size: 14px !important;
}


.selection-summary {
	padding: 25px;
	display: ruby-base-container;
	position: relative;
	top: -17px;
}


.colmn{
	display: inline-table !important;
}
.column {

	display: inline-block;
	white-space: nowrap;
	text-align: right;
}

.value {
	font-size: 40px;
	display: inline-block;
	vertical-align: middle;
	color: steelblue;
	font-weight: bolder;
	font-style: italic;
	padding: 0 25px;
}

.text {
	text-align: left;
	white-space: normal;
	display: inline-block;
	vertical-align: middle;
}

.dxColColor1 {
	color: #585858;
}

.dxColColor2 {
	color: #5280ec;
}

.dxColColor3 {
	color: #ff4330;
}



.modal-xlg {
	width:90% !important;
}



.summary-area{
	width:100%;
	height:auto;
	padding:0;
	margin:0;
	display:block;
}



.summary-area .summary{
	padding:0;
}

.summary-area .summary ul{
	margin:0;
	padding:0;
	width:100%;
	overflow-x:auto;
	overflow-y:hidden;
	border-bottom:1px solid #e1e5ed;
	border-top:1px solid #e1e5ed;
	white-space: nowrap;
	background-color:#fff;
}
.summary-area .summary ul::after {
  content: "";
  clear: both;
  display: table;
}


.summary-area .summary li{
	list-style:none;
	min-width:120px;
	height:auto;
	border-right: 1px solid #e1e5ed;
	padding:5px 30px 15px 40px;
	color: #8392a5;
	position:relative;
	display: inline-block;
	margin-bottom: -5px;
}



.summary-area .summary li:before {
    position: absolute;
    z-index: 1;
    top: 0;
    content: '';
    left: 0px;
    width: 0px;
    height: 100%;
    background-color:#8A91FF;
}

.summary-area .summary li:after {
    position: absolute;
    z-index: 1;
    top: calc(50% - 24px);
    transform: translateY(-50%);
    content: '';
    left: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    border-color:transparent transparent transparent #8A91FF;
}

.summary-area .summary li.color_1:before{background-color: #8A91FF !important;}
.summary-area .summary li.color_2:before{background-color: #F7D982 !important;}
.summary-area .summary li.color_2:after {border-color:transparent transparent transparent #F7D982;}	
.summary-area .summary li.color_3:before{background-color: #72EEEE  !important;}
.summary-area .summary li.color_3:after {border-color:transparent transparent transparent #72EEEE ;}	
.summary-area .summary li.color_4:before{background-color: #AEAEAE !important;}
.summary-area .summary li.color_4:after {border-color:transparent transparent transparent #AEAEAE;}
.summary-area .summary li.color_5:before{background-color: #FF9E9E   !important;}
.summary-area .summary li.color_5:after {border-color:transparent transparent transparent #FF9E9E  ;}
.summary-area .summary li.color_6:before{background-color: #B0EE72   !important;}
.summary-area .summary li.color_6:after {border-color:transparent transparent transparent #B0EE72  ;}
.summary-area .summary li.color_7:before{background-color: #8BFFC9 !important;}
.summary-area .summary li.color_7:after {border-color:transparent transparent transparent #8BFFC9 ;}
.summary-area .summary li.color_8:before{background-color: #F4AAD8 !important;}
.summary-area .summary li.color_8:after {border-color:transparent transparent transparent #F4AAD8;}
.summary-area .summary li.color_9:before{background-color: #ACCA8E !important;}
.summary-area .summary li.color_9:after {border-color:transparent transparent transparent #ACCA8E;}
.summary-area .summary li.color_10:before{background-color: #FFAB8A !important;}
.summary-area .summary li.color_10:after {border-color:transparent transparent transparent #FFAB8A;}

.summary-area .summary li h5{
	width:100%;
	display:flex;
	font-size:24px;
	font-weight:600;
}

.summary-area .summary li.active{
	color: #001737;
}

.summary-area .summary li label{
	width:100%;
	display:flex;
	color: #6c6c6c;
	font-weight: 600;
}

.summary-area .summary li span.small{
	width:100%;
	display:flex;
	font-size:12px;
	color: #3c6dff;
	font-weight:600;
}

@media only screen and (max-width: 768px) {
	.modal-xlg {
		width:100% !important;
	}
	.value {
		font-size: 30px;
	
	}
	.selection-summary {
		display: contents;
	
	}
}
@media (min-width: 768px) and (max-width: 1024px) {

	.value {
		font-size: 30px !important;
		
	}
	.column {	
		display: inline-block;
		white-space: nowrap;
		text-align: right;
	}
	
}

.btn-group .btn:first-child {
		border-top-left-radius: 4px !important;
		border-bottom-left-radius: 4px !important;

}

.btn-group .btn:last-child {
	border-top-right-radius: 4px !important;
	border-bottom-right-radius: 4px !important;

}

.boxArea {
	border-radius: 5px !important;
	padding: 0px;
	position: relative;
	min-height: 50px;
}


.boxArea:after {
  content: "";
  clear: both;
  display: table;
}

.dashboard-stat-v4 {
	position: relative;
	padding: 0px;
	border-radius: 0.25rem !important;
	color: #474747;
	min-height: 120px;
	margin: 0;
}

.dashboard-stat-v4 .modul-header {
	width: 100%;
	height: auto;
	padding: 0px;
	-webkit-box-shadow:inset  0px -8px 3px -8px rgba(0,0,0,0.14);
	-moz-box-shadow:inset  0px -8px 3px -8px rgba(0,0,0,0.14);
	box-shadow:inset  0px -8px 3px -8px rgba(0,0,0,0.14);
	position: relative;
}

.dashboard-stat-v4 .modul-header:after {
  content: "";
  clear: both;
  display: table;
}
.dashboard-stat-v4 .modul-title {
	padding: 10px 0px 10px 0px;
	margin: 0;
	display: block;
	float: left;
	width: calc(100% - 230px);
	color: #233168;
	font-weight: bold;
	margin-left:-11px;
	
}
.dashboard-stat-v4.modul-area.mobile{
	font-size: 11px !important;
}
.dashboard-stat-v4.modul-area.mobile .modul-body{
	font-size: 10px !important;
}
.dashboard-stat-v4.modul-area.mobile .modul-body .text{
	font-size: 12px !important;
}
.dashboard-stat-v4.modul-area.mobile .modul-body .text2{
	font-size: 12px !important;
}
.dashboard-stat-v4.modul-area.mobile .modul-body .text span{
	font-size: 12px !important;
}
.dashboard-stat-v4.modul-area.mobile .modul-body .text2 span{
	font-size: 12px !important;
}
.dashboard-stat-v4.modul-area.mobile .modul-body .icon{
	font-size: 25px !important;
}
.dashboard-stat-v4.mobile .modul-title{
	width: calc(100% - 80px);
}

.modul-area .mobileBtnArea{
	display:none;
}
.modul-area.mobile .mobileBtnArea{
	display:block;
}
.modul-area.mobile .desktopBtnArea{
	display:none;
}

.modul-area.mobile .time-select{
    bottom: 7px;
    right: -14px;
}

.dashboard-stat-v4 .mobileBtnArea .btn {
	padding: 6px !important;
	font-size: 12px;
	line-height: 0.8;
	border-bottom-right-radius: 4px !important;
	border-top-right-radius: 4px !important;
}

.dashboard-stat-v4 .mobileBtnArea1 .btn {
	padding: 5px !important;
	font-size: 12px;
	line-height: 0.8;
	border-bottom-right-radius: 4px !important;
	border-top-right-radius: 4px !important;
}
.mobileBtnArea1 .dropdown-menu{
	min-width: 75px !important;
}

.mobileBtnArea1 .dropdown-menu li{
	border-bottom: 1px solid #f0f0f0;
}
.mobileBtnArea1 .dropdown-menu li.active{
	background-color:#ccfcff;
}

.mobileBtnArea1 .dropdown-menu li.active:hover{
	background-color:#ccfcff;
}

.dashboard-stat-v4 .time-select {
	width: auto;
	position: absolute;
	bottom: 7px;
	right: 4px;
}

.dashboard-stat-v4 .desktopBtnArea .btn {
	padding: 8px !important;
	font-size: 12px;
	line-height: 0.8;
}

.dashboard-stat-v4 .modul-body {
	position: relative;
	padding: 0;
	margin: 0;
	font-size: 12px;
}

.dashboard-stat-v4 .link {
	cursor: pointer !important;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;

}

.dashboard-stat-v4 .modul-table {
	display:inline-grid;
       max-height:150px;
    overflow-y:auto; 
}

.modul-table tbody {
 
}
.modul-table thead, .modul-table tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
.modul-table thead {
    width:100%; 
}

.modul-table tr {
	border-bottom: 1px solid #e1e5ed;
}

.modul-table td,
.modul-table th {
	padding: 5px 10px;
}

.modul-table th {
	background-color: #fbfbfb;
}

.dashboard-stat-v4 .icon {
	position: relative;
	float: left;
	width: 40px;
	height: auto;
	font-size: 40px;
	color: #7987a1;
}

.dashboard-stat-v4 .text {
	float: left;
	width: calc(100% - 40px);
	color: #8392a5;
	font-size: 13px;
}



.dashboard-stat-v4 .text .number {
	font-size: 15px;
	font-weight: bold;
}
.dashboard-stat-v4 .text2 {
	float: left;
	width: 100% ;
	color: #8392a5;
	font-size: 13px;
}



.dashboard-stat-v4 .text2 .number {
	font-size: 15px;
	font-weight: bold;
}



.time-select {
	margin: 0 auto;
	width: 100%;
	height: auto;
}



.w100 {
	display: block;
	width: 100% !important;
}

.w50 {
	width: 50%;
	float: left;
}
.w110 {
	width: 110px !important;
	float: left;
}
.w200 {
	width: 200px !important;
	float: left;
}




.w75 {
	width: 75%;
	float: right;
}

.w25 {
	width: 25%;
	float: left;

}


.groupSortList{
	display:block;
	width:100%;
	height:auto;
}

.groupSortList li{
	display:block;
	width:100%;
	float:left;
	list-style:none;
	padding:5px 5px 1px 5px;
	cursor:pointer;
	position:relative;
}

.groupSortList li .sortIcon{
	display: inline-block;
	width: 20px;
	height: 20px;
	color: red;
}

.groupSortList li span{
	position:absolute;
	top:4px;
	left:20px;	
	display:block;
}

.groupSortList li:hover{
	background-color:#F5F5F5;
}