:root{
	--base-dark:#19398A;
	--base-medium:#3B6E8F;
	--base-light:#00AEEF;
	--body-light:#eefaff;
	--base-highlighter:#F2751C;
	--base-white:#ffffff;
	--base-green:#8DC63F;
	--base-yellow:#FDC00F;
	--base-black:#000000;
	--filter-dark: brightness(0) saturate(100%) invert(51%) sepia(13%) saturate(7095%) hue-rotate(163deg) brightness(100%) contrast(101%);
	--filter-light: brightness(0) saturate(100%) invert(99%) sepia(7%) saturate(157%) hue-rotate(255deg) brightness(115%) contrast(100%);
}
body{background: var(--body-light);font-family: 'Raleway', sans-serif;}
form{ width: 100%; float: left;}
.nav-width{ width: 250px;}
.left-panel, .right-panel{ float:left;}
.breadcrumb{ font-size: 14px; color: var(--base-black); font-weight: bold; margin-top: 20px; float: left;}
.breadcrumb a{ padding-right: 5px; color: var(--base-dark); text-decoration: none;}
.filter{ font-size: 12px; color: var(--base-dark); margin-top: 20px; margin-bottom: 1rem; padding-right: 20px; float: right; text-align: right; }
.filter img{width: 15px;margin-left: 10px;filter: var(--filter-dark);}
.filter .navbar-nav{ height: auto;}
#dropdown11:after {display: none;}
#dropdown11{color: var(--base-dark); margin: 0; padding: 0;}
.drpdown-filter{ width: 200px !important; right: 0 !important; border: none; background: #fff; box-shadow: 0 0 10px #ccc; border-radius: 10px;}
.notification-dropdown-wrapper form{ padding: 5%; width: 100%; float: left;}
.notification-dropdown-wrapper form label{font-size: 12px;margin: 0 0 5px 0;width: 100%;float: left;}
.notification-dropdown-wrapper form select{ border:1px solid var(--base-dark); border-radius: 5px; padding: 5px 10px; font-size:12px; width: 100%; margin: 0 0 10px 0; float: left;}

.mobile-navigation{ display: none;}
.mobile-nav{ display: none;}

a{color: var(--base-dark);text-decoration: none;}
a:hover {color: #000000;}

.active-user{ background: #fff; border-radius: 10px; padding: 10px; margin:0; float: left;}
.logged-user{background: var(--base-light);border-radius: 10px;padding: 10px;margin: 0 10px;float: left;text-align: center;width: 15%;}
.logged-user img{width: 70px;margin: 26px 0;transform: rotate(180deg);filter: var(--filter-light)}
.logged-user h4{ font-size: 12px; line-height: 20px; margin-bottom: 14px;}
.logged-user h4, .logged-user h3{ color: #fff;}
.logged-user h3{font-size: 30px; font-weight: bold;}
.report-user{ width: 30%; padding: 0px; margin: 0; float: left;}
.report-user-item { background: var(--base-dark); border-radius: 10px; padding: 10px;  margin: 0 5px !important; float: left; text-align: center; width: 15%;}
.report-user-item.isd{background: var(--base-medium)}
.report-user .report-user-item{ width: 100%; margin-bottom: 20px !important;}
.report-user-item span.report-icon{ background: #2F90A9; padding: 15px; border-radius: 10px; margin: 5px 14px 5px 5px; float: left; width: 60px;}
.report-user-item span.report-icon img{width: 30px; filter: invert(99%) sepia(100%) saturate(0%) hue-rotate(180deg) brightness(105%) contrast(101%);}
#chartdiv{ float: right; margin: 0; padding: 0; width: 40%; height: 210px}
.user-details{ width: 100%; float: left;}
.user-details .total_users{float:left;width: 30%;}
.user-details .users_byrole{float:left;width: 70%;}
.user-details .users_byrole span{width:50%;float:left;color: #fff;font-size: 14px;}
.user-details .users_byrole span strong{width:50%;float:right;font-size: 16px;}
.report-details{ width: 100%;}
.user-details ul{margin: 0; padding: 0; width: 100%; float: left;}
.user-details ul li{ list-style: none; width: 100%; float: left; margin: 10px 0; padding: 10px 0;}
.report-details ul li{ margin: 2.5px 0;}
.user-details ul li h3{font-size: 30px;font-weight: bold;color: var(--base-white);text-align: left;}
.user-details ul li h4{ font-size: 12px; font-weight: normal; color: #333; margin-top: 10px; margin-bottom: 0; text-align: left;}
.report-user-item ul li h4, .report-user-item ul li h3{ color: #fff; }
hr{float: left; width: 100%; margin: 0; background: #43ABE0;}
span.active-user-icon img{filter: var(--filter-light)}
span.active-user-icon{padding: 15px;border-radius: 10px;margin: 5px 15px 5px 5px;float: left;width: 60px;background: var(--base-highlighter);}
span.acount-created-icon img{filter: var(--filter-light);}
span.acount-created-icon{padding: 15px;border-radius: 10px;margin: 5px 15px 5px 5px;float: left;width: 60px;background: var(--base-highlighter);}

.tile-header a{ float: right;}
.tile-header a img{width: 15px;float: right;filter: var(--filter-dark);}
.recent-reports span{ font-size: 10px;}
.recent-reports p{ margin: 0;}
.recent-reports a img{width: 10px;filter: var(--filter-dark);}
.ask-research{ margin-left: 10px !important; width: 56.4%;}
.resent-upload{ margin: 10px 10px 0 0 !important; width: 56.4%;}
.mar-top{ margin-top: 10px !important;}

.content-area{ background: #fff; padding: 1%; width: 99%; border-radius: 10px; margin-bottom: 20px; float: left;}
.report-content{ padding: 0 1% 1%;}

.align-left{ text-align: left !important; padding: 10px !important;}
.left-align{ text-align: left !important;}
/*--Survey Form --*/
.form-register .steps {
    margin-bottom: 33px;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
    background: var(--base-light);
    padding: 10px;
    height: auto;
    border-radius: 10px;
}
.form-register .steps ul {
    display: -webkit-flex;
    list-style: none;
    padding-left: 108px;
    margin: 0 auto;
    overflow: hidden;
    width: 56%;;
}
.form-register .steps li,
.form-register .steps li.current {
    outline: none;
    -o-outline: none;
    -ms-outline: none;
    -moz-outline: none;
    -webkit-outline: none;
    position: relative;
}
.form-register .steps li .current-info {
    display: none;
}
.form-register .steps li a {
    text-decoration: none;
    outline: none;
    -o-outline: none;
    -ms-outline: none;
    -moz-outline: none;
    -webkit-outline: none;
}
.form-register .steps li a .title span {
    display: block;
}
.form-register .steps li a .title .step-icon { 
    width: 20px;
    height: 20px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #fff;
    margin: 0 auto;
    position: relative;
    outline: none;
    -o-outline: none;
    -ms-outline: none;
    -moz-outline: none;
    -webkit-outline: none;
    color: #fff;
    font-size: 25.6px;
    margin-right: 108px;
}
.form-register .steps li a .step-icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.form-register .steps li .step-icon::before,
.form-register .steps li:last-child .step-icon::after {
    position: absolute;
    content: "";
    background: #fff;
    width: 108px;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.form-register .steps li .step-icon::before {
    right: 100%;
}
.form-register .steps li:last-child .step-icon::after {
    left: 100%;
}

.form-register .steps li.current a .step-icon,
.form-register .steps li.current a:active .step-icon,
.form-register .steps li.done a .step-icon,
.form-register .steps li.done a:active .step-icon {
    background-image: -moz-linear-gradient( 136deg, #F2751C 0%, #F2751C 50%, #773302 100%);
    background-image: -webkit-linear-gradient(136deg, #F2751C 0%, #F2751C 50%, #773302 100%);
    background-image: -ms-linear-gradient( 136deg, #F2751C 0%, #F2751C 50%, #773302 100%);
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    -o-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    -ms-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
}
.form-register .steps .current .step-icon::before,
.form-register .steps .current:last-child .step-icon::after,
.form-register .steps .done .step-icon::before {
    background-image: -moz-linear-gradient( 0deg, #F2751C 0%, #F2751C 50%, #773302 100%);
    background-image: -webkit-linear-gradient( 0deg, #F2751C 0%, #F2751C 50%, #773302 100%);
    background-image: -ms-linear-gradient( 0deg, #F2751C 0%, #F2751C 50%, #773302 100%);
}
.form-register .steps li a .step-text {
    font-weight: 400;
    font-size: 8px;
    margin-left: -108px;
    padding: 5px 0;
    text-align: center;
    color: #333;
}
.form-register .steps .current .step-text,
.form-register .steps .done .step-text {
    color: #333;
}
.form-register .content {
}
.form-register .content h2 {
    display: none;
}
.form-register .content .inner h3 {
    font-size: 25px;
    color: #333;
    font-weight: 700;
    margin: 0;
    padding-bottom: 18px;
}
.form-register .content #form-total-p-3 .inner h3 {
    padding-bottom: 5px;
}
.form-register .content .inner h4 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0;
}
.actions ul {
    list-style: none;
    padding-left: 0;
    padding: 0 20px;
    margin: 30px 0;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
}
.actions ul li.disabled {
    opacity: 0;
}
.actions ul li {
    padding: 0;
    border: none;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    display: inline-flex;
    font-size: 12px;
    color: #fff;
    font-weight: 400;
    cursor: pointer;
    background: var(--base-highlighter);
}
.actions ul li:hover {
    background: var(--base-light);
}
.actions ul li:first-child {
    background: #999;
}
.actions ul li:first-child:hover {
    background: #666;
}
.actions ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
}
.survey-content{ margin: 50px auto 0; padding: 0; width: 50%; overflow: hidden;}
.survey-field{ float: left;}
.survey-field label{ font-size: 12px; text-align: left; width: 90%; float: left;}
.survey-field select{font-size: 12px;padding: 10px 5px;border-radius: 5px;border: 1px solid var(--base-dark);width: 200px;}
.Decoder-field{ margin: 10px 0 0; width: 100%; float: left;}
.Decoder-field input{float: left; margin-right: 10px; width: 15px; height: 15px;}

/*--File upload--*/
.customReport {
    display: flex;
    grid-gap: 30px;
	position: relative;
	float: left;
	width: 100%;
	margin-top: 10px;
}
.customReport .download {
	display: flex;
    flex-direction: column;
    grid-gap: 30px;
	width: 25%;
}
.customReport .download .report {
	display: flex;
	flex-direction: column;
	grid-gap: 20px;
	justify-content: center;
	align-items: center;
	height: 193px;
	padding: 20px;
	background-image: url(../../../assets/images/img/btn-custom-report-templates.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	border-radius: 7px;
	font-size: 20px;
	color: #ffffff;
	font-weight: 400;
	text-align: center;
}
.customReport .download .report .icon {
	width: 52px;
}
.customReport .files {
	position: relative;
	width: 75%;
	margin-bottom: 60px;
	border: 1px dashed var(--base-dark);
    border-radius: 7px;
}
.customReport .files:before {
    height: auto;
    font-size: 14px;
    bottom: 25px;
}
.customReport .files:after {
	top: 120px;
}
.customReport .files label {
    float: left;
    width: 100%;
    margin: 0;
	font-size: 16px;
    font-weight: bold;
    text-align: center;
	position: absolute;
    top: 30px;
}
.customReport .files input {
    padding: 236px 40% 100px;
	border-radius: 7px;
	opacity:0;
}
.customReport .files .uploadFile{
	position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    border: 1px solid #4ac6f4;
    padding: 5px 10px;
    border-radius: 7px;
}
.customReport .files .main-button {
    margin: 15px 0 0 0;
    padding: 12px 24px;
    border: 0;
    background: var(--base-highlighter);
    border-radius: 5px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    position: absolute;
    top: 100%;
    left: 0;
}

.files{ position:relative}
.files label{ font-size: 14px; font-weight: bold; text-align: center; margin: 30px 0 20px; width: 100%; float: left;}
.files input {
    border: 1px dashed var(--base-dark);
    outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
    padding: 150px 40%;
    text-align: center !important;
    margin: 0;
    width: 100% !important;
    font-size: 12px;
}
.files input:focus{     outline: 2px dashed #92b0b3;  outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;
}
.files:after {
    pointer-events: none;
    position: absolute;
    top: 100px;
    left: 0;
    width: 70px;
    right: 0;
    height: 76px;
    content: "";
    background-image: url(../../../assets/images/img/icon-upload.svg);
    display: block;
    margin: 0 auto;
    background-size: 100%;
    background-repeat: no-repeat;
    filter: var(--filter-dark);
}
.color input{ background-color:#f1f1f1;}
.files:before {
    position: absolute;
    bottom: 10px;
    left: 0;  pointer-events: none;
    width: 100%;
    right: 0;
    height: 57px;
    content: " or drag it here. ";
    display: block;
    margin: 0 auto;
    color: var(--base-dark);
    font-weight: 600;
    text-transform: capitalize;
    text-align: center;
    font-size: 12px;
}

/*--Metrics Details--*/
.survey-content-upload, .upload-metrics-details{ width: 100%; float: left;}
.upload-metrics-details span, .upload-metrics-details p{ background: var(--base-yellow); padding: 5px; border-radius: 5px; font-size: 12px; margin: 10px; float: left;}
.upload-metrics-details p{ background: none;}
.upload-metrics-details h3{ width: 100%; margin: 20px 0; font-size: 14px; font-weight: bold; float: left;}
.tab-content{ width: 100%; float: left;}
.tab-content .nav-link{ font-size: 12px;}
.tab-content .nav-link span{ width: auto; padding: 5px; margin: 0;}
.tab-content .nav-link p{ margin: 0; color: var(--base-white); float: left;}
.nav-tabs .nav-link.active p{color: var(--base-dark)}
.nav-link img{ border-radius: 0 !important;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{ background: var(--body-light); border: none; }
.tab-content .nav-link{ background: var(--base-dark); margin: 0 10px 0 0; border-radius: 10px 10px 0 0;}
.nav-tabs{ border: none; margin-bottom: 0 !important;}
.tab-content>.tab-pane { background: var(--body-light); float: left; width: 100%; border-radius: 0 10px 10px 10px; }
.dc-response{ float: left; padding:0px 10px 10px;}
.dc-response div{ float: left; font-size: 12px; margin: 10px;}
.table-borderless ol, .table-borderless ul{width: 100%;border-bottom: 1px solid var(--body-light);}
/*.table-borderless ul:nth-last-child(1){ border: none;}*/
.table-borderless ol, .table-borderless ul, .table-borderless li{ font-size: 12px; list-style: none; margin: 0; padding: 5px 0; float: left;}
.table-borderless li.col-lg-1, .table-borderless li.col-md-1, .table-borderless li.col-sm-1{ text-align: center;}
.table-striped>ul:nth-of-type(odd){background-color: var(--body-light);}
.table-borderless ul li textarea, .table-borderless ul li input{ width: 90%; font-size: 12px; padding: 10px; border:1px solid #ccc; border-radius: 5px; float: left;}
.table-borderless li{ padding-left: 5px; padding-right: 5px;}

/* NOTIFICATION*/
.table-striped > div > div:nth-of-type(2n+1) {
  background-color: var(--body-light);
}
/* END: NOTIFICATION */


/*--report table--*/
.report-table {width:4700px;}
.user-report-table {width:5400px;}
.report-table ol, .report-table ul{ padding: 0;}
.report-table ol li.rep-col-1, .report-table ul li.rep-col-1{width: 100px;height: 100px;text-align: center;padding: 5px;border-right: 1px solid var(--base-light);font-size: 12px;line-height: 18px;}
.report-table ol li.rep-col-3{ width: 500px; height: 100px; text-align: center; padding: 5px; border-right: 1px solid var(--base-light); font-size: 12px; line-height: 18px;}
.report-table ol li.rep-col-2, .report-table ul li.rep-col-2{ width: 200px; height: 100px; text-align: center; padding: 5px; border-right: 1px solid var(--base-light); line-height: 18px;}
.report-table ol li.rep-col-7{ width: 1200px; height: 100px; text-align: center; border-right: 1px solid var(--base-light); font-size: 12px; line-height: 18px;}

.report-table ul li:nth-last-child(1), .report-table ol li:nth-last-child(1){ border: none;}
.report-table ul li.rep-col-2, .report-table ul li.rep-col-1, .report-table ol.sec-row li.rep-col-3, .report-table ol.sec-row li.rep-col-2, .report-table ol.sec-row li.rep-col-1, .report-table ol.sec-row li.rep-col-5, .report-table ol.sec-row li.rep-col-4, .report-table ol.sec-row li.rep-col-6{ height: auto; padding: 10px 0;}

.report-table ol.sec-row li.rep-col-4{ width: 800px; text-align: center; border-right: 1px solid var(--base-light); font-size: 12px; line-height: 18px;}
.report-table ol.sec-row li.rep-col-5{ width: 2400px; text-align: center; border-right: 1px solid var(--base-light); font-size: 12px; line-height: 18px;}
.report-table ol.sec-row li.rep-col-6{ width: 400px; text-align: center; border-right: 1px solid var(--base-light); font-size: 12px; line-height: 18px;}
.report-table ol.sec-row li input{ margin-right: 5px;}

.report-table h4{ padding: 30px 0;}
ol li{ font-weight: bold;}

.bg_lightblue{ background: #EDF7FC;}
.bg_yellow{ background: #FFFEB2;}
.edit-icon{width: 16px;margin: 0 5px;filter: var(--filter-dark);}
.delete-icon{ width: 16px; margin: 0 5px; filter: invert(13%) sepia(91%) saturate(4816%) hue-rotate(359deg) brightness(103%) contrast(121%);}
.add-icon{width: 16px;margin: 0 5px;filter: var(--filter-dark);transform: rotate(45deg);}

.actions{ width: 100%; margin: 0; padding: 0; float: left;}
.main-button{ background: var(--base-highlighter); color: #fff; font-size: 12px; padding: 10px 20px; border-radius: 5px; margin: 10px 10px 10px 0; text-decoration: none; float: left;}
/*.main-button:hover{color: #fff;}*/
.secondary-button{ background: #fff; color: var(--base-dark); border:1px solid var(--base-dark); font-size: 12px; padding: 9px 30px; border-radius: 5px; margin: 10px 10px 10px 0;  text-decoration: none; float: left;}

/*--Comparison Editor--*/
.report-editor{ width: 100%; margin: 0; padding: 20px; float: left;}
.report-editor label, .report-editor p{ width: 100%; margin: 20px 0 5px; font-size: 12px; float: left;}
.report-editor p{ font-size: 10px; margin: 0;}
.report-editor input, .report-editor textarea{ width: 100%; padding: 10px; border:1px solid var(--base-dark); border-radius: 5px; font-size: 12px; float: left;}
.report-files{ width: 48%; margin-right: 2%; float: left;}
.left-margin-fileupload{ margin:0 0 0 2%;}
.margin-top{ margin-top: 20px;}
.margin-all{ margin: 20px;}

/*-- Accordion--*/
.accordion{ margin: 20px;}
.accordion-item{ margin: 5px 0; border-radius: 10px !important; overflow: hidden; border: none;}
.accordion-item button{ font-size: 12px;}
.accordion-button:not(.collapsed) { color: #333; background: none; box-shadow: none;}

.user-login{ font-size: 10px;}
.user-login img{width: 10px;margin-left: 5px;filter: var(--filter-dark);}
.download-btn{ float: right;}
.navbar-collapse{ width: auto; float: left;}

.white-tile{ background: #fff; border-radius: 10px; padding: 10px; margin: 0; float: left;}
.white-tile p{ font-size: 12px;}
.usage-calculater{ text-align: center; float: left;}
.usage-calculater h4{ font-size: 14px; font-weight: bold; text-align: center; width: 100%; margin: 52px 0 10px; float: left;}
.usage-calculater select{ width: 250px; margin: 0 auto 10px; overflow: hidden; border:1px solid var(--base-dark); font-size: 12px; padding: 10px; border-radius: 10px;}
.usage-calculater p{ font-size: 12px; font-weight: bold; text-align: center; width: 100%; margin: 0; float: left;}
.usage-calculater span{ font-size: 40px; font-weight: bold; text-align: center; color: var(--base-dark); width: 100%; margin: 0 0 30px; float: left;}

.float-right{ float: right !important;}
.margin-right{ margin-right: 9px !important;}
.margin-left{ margin-left: 9px !important;}
.margin-bottom{margin-bottom: 10px !important;}
.align-right{ text-align: right;}
.tile-1{}
.tile-2{}
.tile-3{}
.tile-4{ width: 32.333333%;}
.tile-5{}
.tile-6{}
.tile-7{}
.tile-8{ width: 65.666667%;}
.tile-9{}
.tile-10{}
.tile-11{}
.tile-12{}

.group-tile h3{ font-size: 14px; font-weight: bold;}
.group-tile p, .group-tile a{ font-size: 12px; width: 100%; margin: 5px 0; float: left; overflow-wrap: break-word;}
.group-tile a img{ width: 10px; filter: var(--filter-dark);}
.group-details{ width: 100%; float: left;}
.group-details ul{ margin: 0; padding: 0; float: left; width: 100%;}
.group-details ul li{ width: 25%; margin: 0; padding: 5px; font-size: 12px; list-style: none; border-right: 1px solid #C6F1FB; border-bottom: 1px solid #C6F1FB; float: left;}
.group-details ul li:nth-child(4), .group-details ul li:nth-child(8), .group-details ul li:nth-child(12), .group-details ul li:nth-child(16), .group-details ul li:nth-child(20), .group-details ul li:nth-child(24), .group-details ul li:nth-child(28), .group-details ul li:nth-child(32){ border-right: none;}
.group-details ul li p{ margin: 0;}
.group-model{ max-width: 70%;}

.profile-art{ width: 100%; margin: 0; padding: 0; position: relative; float: left;}
.profile-art img.profile-art-img{ width: 100%; height: 200px; position: absolute; border-radius: 20px; top: 0; left: 0; z-index: -1;}
.profile-art-overlay{width: 100%;height: 200px;position: absolute;border-radius: 20px;top:0;left: 0;background: var(--base-light);opacity: .8;z-index: -1;}
.profile-user-img{ border:5px solid #fff; width:150px; height:150px; border-radius:100px; position:absolute; left:20px; top:125px;}
.profile-user-edit{background: var(--base-dark);width:25px;padding:5px;border-radius:100px;position:absolute;top:240px;left:80px;}
.profile-art h3{ font-size:25px; font-weight: bold; margin-top: 160px; color: #fff; margin-left: 190px; float: left; z-index: 999; width: 100%;}
.profile-art p{ font-size:20px; font-weight: bold; float: left; margin-top: 10px; margin-left: 190px; width: 100%;}
.profile-art p img{width: 20px;margin-left: 20px;filter: var(--filter-dark);cursor: pointer;}
.profile-details{ margin-top: 50px; float: left;}
.prilfe-item img{width: 40px;margin-right: 10px;margin-top: 5px;float: left;filter: var(--filter-dark);}
.profile-details-item{ width: 70%; margin: 0; padding: 0; float: left;}
.profile-details-item span{ font-size: 11px; margin-top: 10px; float: left; width: 100%;}
.profile-details-item p{ font-size: 14px;}
.prilfe-item a{ width: 10%; float: right;}
.prilfe-item a img{ width: 10px; margin: 25px 10px; float: left;}
.user-role label{ font-size: 12px; width: 100%; float: left;}
.user-role input, .user-role select, .user-role textarea{width: 100%;margin: 5px 0 10px;padding: 10px;font-size: 12px;border-radius: 10px;border-color: var(--base-dark);}

.notification-filter{ position: relative;}
.notification-filter label{ font-size: 10px; width: auto; margin: 12px 5px; float: left;}
.notification-filter select, .notification-filter input{ font-size: 12px; border:1px solid #C8C8C8; padding:5px; margin: 5px; border-radius: 5px; width: 224px; float: left;}
.notification-filter button{ background: none; border:none; position: absolute; top: 6px; right: 10px;}
.notification-filter button img{ width: 13px;}
.notification-list img{ width: 60px; border-radius: 5px; float: left;}
.notification-list h3, .notification-list p{ font-size: 12px;}
.notification-action img{ width: 15px; float: right; margin: 4px 10px; filter: var(--filter-dark);}

.category-item span{padding: 5px;background: var(--base-light);border-radius: 5px;color: #fff;font-size: 11px;float: left;}

.library-list{border-bottom: 1px solid var(--base-light);padding: 10px !important;}
.library-list:nth-last-child(1){ border: none;}
.library-list img{ width: 100%; margin: 0; border:1px solid var(--base-dark); border-radius: 5px;}
.library-list h3{ font-size: 12px; line-height: 18px; font-weight: bold; width: 100%; margin: 10px 0; float: left;}
.library-list span{ background: #f4f4f4; border: 1px solid #ccc; border-radius: 5px; margin-right: 10px; padding: 5px 10px; font-size: 10px; float: left;}
.library-list a img{ border:none; width: 15px; margin: 6px; float: left;}
.library-model label{ width: 100%; font-size: 12px; float: left;}
.library-model input.library-field, .library-model textarea, .library-model select{width: 100%;margin: 5px 0 10px;padding: 10px;font-size: 12px;border-radius: 10px;border-color: var(--base-dark);}

/*--user--*/
.logo{ width: 170px; padding: 10px 20px 10px 10px; border-right: 1px solid #83DEF7; margin-right: 20px; float: left;}

.menu--off { position: absolute; left: -50%; top: 60px; width: 300px; display: block; transition: all 300ms; z-index: 999;}
.menu--on { left: 0; top:60px; transition: all 300ms; z-index: 9999; }
.material-design-hamburger button { display: block; border: none; background: none; outline: 0; }
.material-design-hamburger a img{ width: 30px; filter: invert(64%) sepia(46%) saturate(6304%) hue-rotate(163deg) brightness(99%) contrast(101%);}
.material-design-hamburger a span{ font-size: 10px; font-weight: bold; display: block;}
.material-design-hamburger__icon { padding: 0; cursor: pointer; }

.material-design-hamburger__layer:before, .material-design-hamburger__layer:after {display: block; width: inherit; height: 3px; position: absolute; background: inherit; left: 0; content: ''; animation-duration: 300ms; animation-timing-function: ease-in-out;}
/*.material-design-hamburger__layer:before {bottom: 200%;}*/
.material-design-hamburger__layer:after {top: 60px;}
.material-design-hamburger__icon--to-arrow {
  animation-name: material-design-hamburger__icon--slide;
  animation-fill-mode: forwards;
}

.material-design-hamburger__icon--to-arrow:before {
  animation-name: material-design-hamburger__icon--slide-before;
  animation-fill-mode: forwards;
}

.material-design-hamburger__icon--to-arrow:after {
  animation-name: material-design-hamburger__icon--slide-after;
  animation-fill-mode: forwards;
}

.material-design-hamburger__icon--from-arrow {
  animation-name: material-design-hamburger__icon--slide-from;
}

.material-design-hamburger__icon--from-arrow:before {
  animation-name: material-design-hamburger__icon--slide-before-from;
}

.material-design-hamburger__icon--from-arrow:after {
  animation-name: material-design-hamburger__icon--slide-after-from;
}

@keyframes material-design-hamburger__icon--slide {
  0% {
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes material-design-hamburger__icon--slide-before {
  0% {
  }
  100% {
    transform: rotate(45deg); margin: 3% 37%; width: 75%;
  }
}

@keyframes material-design-hamburger__icon--slide-after {
  0% {
  }
  100% {
    transform: rotate(-45deg); margin: 3% 37%; width: 75%;
  }
}

@keyframes material-design-hamburger__icon--slide-from {
  0% { transform: rotate(-180deg);
  }
  100% {
  }
}

@keyframes material-design-hamburger__icon--slide-before-from {
  0% {
    transform: rotate(45deg); margin: 3% 37%; width: 75%;
  }
  100% {
  }
}

@keyframes material-design-hamburger__icon--slide-after-from {
  0% { transform: rotate(-45deg); margin: 3% 37%; width: 75%;
  }
  100% {
  }
}

.user-footer{ margin-top: 50px;}
.user-footer .footer-nav{ margin: 0 auto; overflow: hidden;}
.user-footer p{margin-top: 10px;}
.user-footer a{ float: none;}
.user-gradient{background-color: #43ABE0; background-image: linear-gradient(#43ABE0, var(--base-dark)) !important;}
.user-navi{ padding-bottom: 10px; border-bottom: 1px solid #83DEF7;}
.user-breadcrumb{ margin-left: 10px; margin-top: 10px;}

.support-search{ background: #fff; border-radius: 10px; padding: 50px 10px; text-align: center; float: left; position: relative;}
.support-search form{ position: relative;}
.support-search-field{ box-shadow: 0px 1px 10px #243d88 inset; color: #fff; background: no-repeat; width: 100%; border:1px solid #83DEF7; border-radius: 10px; margin: 10px auto; float: none;}
.support-search img{ margin: 10px 0; width: 70px; filter: invert(25%) sepia(97%) saturate(1699%) hue-rotate(169deg) brightness(101%) contrast(91%);}
.support-search p{ width: 85%; margin: 10px auto 20px; font-size: 14px;}
.support-search a{ font-size: 12px; background: var(--base-dark); color: #fff !important; margin: 10px; padding: 10px 20px; border-radius: 5px;}

.form-demographic-analysis{ margin: 10px 0; width: 100%; float: left;}
.form-demographic-analysis label{ font-size: 12px; margin-top: 10px;}
.form-demographic-analysis input{ width: 100%; border:1px solid #83DEF7; border-radius: 5px; font-size: 14px; }
.form-demographic-analysis textarea{ width: 100%; height: 150px; padding: 10px; border:1px solid #83DEF7; border-radius: 5px; font-size: 14px; }
.demographic-button{ width: 31%; margin: 1%; padding: 2%; float: left;}
.demographic-button p, .demographic-button span{ text-align: center; font-size: 12px; margin: 10px 0; width: 100%; float: left;}
.demographic-button a{background: var(--base-dark); width: 100%; border: none; color: #fff !important; font-size: 17px; font-weight: bolder; padding: 10px 0px; border-radius: 5px; margin: 0px; text-decoration: none; text-align: center; float: left;}
.demographic-button span{ font-weight: bold;}
.border-right{ border-right: 1px solid #83DEF7;}
.border-left{ border-left: 1px solid #83DEF7;}
.response-number{ width: 31%; margin: 0 10px 10px; background-color: #43ABE0; background-image: linear-gradient(#43ABE0, var(--base-dark)) !important; float: left; border-radius: 10px; padding: 50px 10px;}
.response-number p{ font-size: 25px; text-align: center; margin: 0; color: #fff;}
.response-number h2{ color: #fff; text-align: center; font-size: 50px;}

.user-filter{ margin-top: 10px; margin-right: 20px; margin-bottom: 19px;}
.my-selection{ width: 95%; margin: 0 10px 10px 10px; background-color: #fff; float: left; border-radius: 10px; padding:10px; position: sticky; top: 10px;}
.my-selection h6, .analysis-choices h6{ font-weight: bolder;}
.my-selection span{ width: 46.9%; margin: 0px; padding: 10px; font-size: 12px; text-align: center; background: var(--base-yellow); border-radius: 5px; float: left;}
.choices{ width: 48.5%; margin: 0; padding: 0; float: left;}
.choices label, .dese label{ font-size: 12px; margin-top: 10px;}
.choices select, .dese input{width: 100%; border:1px solid #83DEF7; padding: 10px; border-radius: 5px; font-size: 14px;}
.blue-raw{ background: #C8EFFA; padding: 10px; margin: 20px 0 0;}
.demographic-sections{ width: 100%;}
.dese{ width: 24%; margin: 0; padding: 0; float: left; position: relative;}
.dese img{ position: absolute; bottom: 12px; right: 5px; width: 20px; filter: invert(91%) sepia(0%) saturate(16%) hue-rotate(259deg) brightness(96%) contrast(79%);}
.dese-short{ width:48.5%; float:left;}
span.note{ width: auto; float: right; color: orange; font-size: 10px; font-style: italic; margin: 6px;}
.analysis-choices h6{ float: left;}
.result-table{ width: 1700px !important;}
.result-flow{ overflow-y: scroll;}
.bg_gray{ background: #ccc;}
.size-17{ font-size: 14px !important;}
.bg_orange{ background: #FF6D02;}
.full-wide{ width: 100%;}
.bg_dark-yellow{ background: #FBBC05;}
.bg_green{ background: #93C47D !important;}
.color-red{ color: red;}
.bg_light-red{ background: #FFE4DC !important;}
.bg_green-red{ background: #CFEAC7 !important;}
.report-check{ margin: 10px 0; font-size: 11px; width: 100%; float: left;}
.report-check input{ float: left; margin-right: 10px;}
.report-check p{ font: 10.5px; float: left; margin: 0;}
.left-report-btn-wrap a{ width: 47%; text-align: center;}


.column { float: left; width: 23%; padding: 10px;}
/* Clear floats after the columns */
.row:after { content: ""; display: table; clear: both;}
/* Style the buttons */
.btn { border: none; outline: none; padding: 12px 16px; background-color: var(--base-dark); cursor: pointer;}
.btn:hover { background-color: #ddd;}
.btn.active { background-color: #666; color: white;}

.report-name img{ width: 20px; margin-right: 10px; float: left; filter: invert(25%) sepia(97%) saturate(1699%) hue-rotate(169deg) brightness(101%) contrast(91%);}
.report-stats{ padding: 3px; border-radius: 3px;}
.grid-column{ width: 23% !important; padding: 5px !important; margin: 5px !important; border:1px solid #ccc; border-radius: 5px !important; float: left !important;}

.report-filter{ padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #83DEF7; width: 100%; float: left;}
/*.report-filter select{ border:1px solid #83DEF7; padding: 6px 10px; margin: 5px; border-radius: 5px; font-size: 12px; float: right;}
.report-filter input{ width: 200px; border:1px solid #83DEF7; padding: 5px 10px; margin: 5px; border-radius: 5px; font-size: 12px; float: right;}*/
.report-filter input, .report-filter select{ border:1px solid #83DEF7; padding: 5px 10px; margin: 5px; border-radius: 5px; font-size: 12px; float: right;}
.report-filter input{ width: 200px;}
a.report-link{ color: #212529;}

.report-details-wrapper ul li.report-details-title h5 img { filter: invert(64%) sepia(46%) saturate(6304%) hue-rotate(163deg) brightness(99%) contrast(101%); padding: 0 5px 0 0; width: 20px; }
.report-details-wrapper ul { padding: 0; }
.report-details-wrapper ul li { list-style: none; font-size: 14px; margin: 5px 0; width: 100%; float: left; }
.report-details-wrapper ul li img { width: 10px; margin-left: 20px; filter: invert(25%) sepia(97%) saturate(1699%) hue-rotate(169deg) brightness(101%) contrast(91%); }
.report-details-wrapper ul li.report-details-title { margin: 0; }
/*.report-details-wrapper ul li.report-details-title h5 img { filter: invert(99%) sepia(100%) saturate(0%) hue-rotate( 180deg) brightness(105%) contrast(101%); padding: 0 5px 0 0; width: 20px; }*/
.report-details-wrapper .left-right-border { border-left: 1px solid #98DAFC; border-right: 1px solid #98DAFC; padding-left: 10px; padding-right: 10px; float: left; margin-right: 10px; width: 24%; }
p.quote-text { font-size: 16px; color: #000; padding: 45px 20px; width: 100%; float: left; text-align: center; }
.report-actions a { background: var(--base-dark); color: #000; padding: 5px; border-radius: 5px; border: 1px solid var(--base-dark); font-size: 12px; color: #fff; }
.report-actions a img { width: 10px; filter: invert(99%) sepia(100%) saturate(0%) hue-rotate( 180deg) brightness(105%) contrast(101%); }
.report-actions a.compare-btn { width: 100%; border: 1px solid var(--base-dark); border-radius: 5px; padding: 5px; margin: 5px 0; text-align: center; float: left; border: 1px solid var(--base-dark); }

.left-border { border-left: 1px solid #98DAFC; padding-left: 5px;}
.float-left{ float: left;}
a.download{ width: 46%; float: left; margin: 5px; text-align: center;}

.dc_repo{ width: 100%; padding: 0; float: left;}
.dc_repo li{ width: 24%; height: 200px; margin: .5%; padding: 20px; color: #000; border: 1px solid #ddd; border-radius: 10px; text-align: center; overflow: hidden; float: left;}
.dc_repo li img{ width: 100%;}
.dc_repo li a h6, .dc_repo li a p{ color: #000;}
.dc_repo li a h6{ margin-top: 10px;}
.dc_repo li a{ font-size: 12px; color: #fff; background:var(--base-dark); padding: 5px; border-radius: 5px; }

.compare-wrapper li{ list-style: none; text-align: center; padding-bottom: 10px;}
.compare-wrapper li label{ font-size:16px;font-weight: bold;}
.compare-wrapper li select{ width: 80%; border: 1px solid #83DEF7; border-radius: 5px; font-size: 14px; padding: 5px; color: #fff;}
.compare-wrapper li span{background: var(--base-highlighter);border-radius: 5px;font-size: 15px;padding: 8px;margin-top: 15px;width: 80%;display: inline-block;}
/*.user-comparison-bgimg{ height: auto; overflow: hidden; background:url(../../../assets/images/img/img-comparison.png) no-repeat; background-size: cover; position: relative;}
.user-comparison-bgimg .user-details{ background-color: rgba(0, 0, 0, 0.1); text-align: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; padding: 80px 0 20px;}
.user-comparison-bgimg p{ font-size: 12px; color: #fff; margin-top: 10px;}*/

.margin-top-100{ margin-top: 100%;}
.margin-0{ margin: 0;}

.tell-model .half-wide{ width: 50%; margin: 0px; float: left;}
.tell-model label{ font-size: 10px; width: 100%;}
.tell-model input, .tell-model textarea{width: 98%;border: 1px solid var(--base-dark);border-radius: 5px;font-size: 12px;padding: 5px;margin: 1%;}
.tell-model textarea{ width: 99%; margin: .5%;}

.des-cal h6{ font-size: 14px; font-weight: bolder;}
.des-cal p{ font-size: 12px;}

.perform-analysis{ height: 250px; overflow: hidden; background:url(../../../assets/images/img/perform-analysis-bg.jpg) no-repeat; background-size: cover; position: relative;}
.perform-analysis .user-details{ background-color: rgba(0, 0, 0, 0.5); text-align: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%;}
.perform-analysis p{ font-size: 12px; color: #fff; margin: 80px 0 20px;}
.user-dashboard-perform-analysis-btn{font-size:30px;padding:20px;background-image:linear-gradient(var(--base-dark),#00698c)!important;border-radius:10px;background:var(--base-dark);color:#fff;margin:10px 10px 10px 0;text-decoration:none}

.accordion-button::after{margin-left:0;filter: var(--filter-dark);}
.tab-editor{ width: auto; float: right; margin-left: auto;}
.tab-editor a img{ width: 18px; padding: 1px; margin: 1px 5px;}

.column-code input{ font-size: 12px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; float: left;}
.column-code label{ margin: 5px 10px 5px 0; float: left;}

.width-welcome{ width: 98%; font-size: 14px; color: var(--base-dark);}
.user-report{ background: var(--base-dark);}
.width-30{ width: 40%; float: left; margin: 44px 0;}
.width-30 a{ margin-top: 10px !important; float: left !important;}
.user-dash-button{ right: 0px; top: 20px;}
.bg-3B6E8F{ background: #3B6E8F;}
.bottom-10{ margin-bottom: 10px;}
.bottom-20{ margin-bottom: 20px;}
.user-dash-items p{ font-size: 12px; width: 95%;}

.faq-category{ background: #fff; border-radius: 10px; float: left; padding: 10px;}
.faq-category ul{ float: left; width: 100%; margin: 0; padding: 0;}
.faq-category ul li{ list-style: none; padding: 5px 0px; width: 100%; float: left;}
.faq-category ul li a{ color: #333; text-decoration: none; font-size: 14px;}

.faq-item{ float: left; width: 74%;}
.myaccordion{ background:none; border:none; padding: 0px !important; margin: 0; width: 100%; border-radius: 10px; float: left;}
.card { background: #fff; border: none; border-radius: 10px; margin: 0 0 5px 0; width: 100%; float: left;}
.card-header{ background: none; border: none; width: 100%; float: left;}
.card-header button{ width: 100%; margin: 0; padding:5px 0; text-align: left; text-decoration: none; background: none; color: #333; font-size: 14px; font-weight: bolder;}
.card-header button:hover, .card-header button:active{ background: none; color:#333;}
.card-body p{ font-size: 14px; text-align: left;}
.collapse{ border-top: 1px solid #ccc;}

.chat-btn { position: fixed; right: 14px; bottom: 30px; cursor: pointer}
.chat-btn .close { display: none}
.chat-btn i {transition: all 0.9s ease}
#check:checked~.chat-btn i {display: block;pointer-events: auto; transform: rotate(180deg)}
#check:checked~.chat-btn .comment {display: none}
.chat-btn i {font-size: 22px;color: #fff !important}
.chat-btn {width: 50px;height: 50px;display: flex;justify-content: center;align-items: center;border-radius: 50px;background-color: var(--base-highlighter);color: #fff;font-size: 22px;border: none;}
.wrapper {position: fixed;right: 20px;bottom: 100px;width: 300px;background-color: #fff;border-radius: 5px;transition: all 0.4s; display:none; z-index:2}
#check:checked~.wrapper {display:block;}
.header {background-color: var(--base-dark); border-radius: 100px; width: 64%; margin: -45px 0 0 18%; padding: 15px; color: #fff;}
    .header .comment{ font-size: 20px; margin-right: 10px;}
.header h6{ margin: 0; padding: 0; font-size: 17px;}
.chat-form { padding: 20px 15px 15px; box-shadow: 0px 0px 10px #ccc; background: #fff; border-radius: 10px; margin-top: 0px; float: left;}
.chat-form label{ font-size: 12px; margin: 5px 0 5px; width: 100%; float: left;}
.chat-form textarea, .chat-form select, .chat-form input {margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; padding: 10px 2%; font-size: 12px; width: 95%; float: left;}
.chat-form select{ width: 100%;}
.chat-form textarea { font-size: 12px; resize: none; }
.btn-submit{ background: var(--base-dark); font-size: 14px; width: 100%; float: left; border: none; border-radius: 5px; padding: 10px 0; color: #fff;}
.form-control:focus,
.btn:focus {box-shadow: none}
#check {display: none !important}

.loader_wrap{ position: fixed; width: 100%; height: 100%; z-index: 9999; background-color: #f9f9f9; top: 0; opacity: 0.8; }
.loader_wrap img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 80px; }
/*
.dashboard-user-bg{ overflow: hidden; background:url(../../../assets/images/img/bg_dashboard_staff.png) no-repeat; background-size: cover; position: relative;}

.noti-dropdown{position:absolute;right:30px;top:-6px;width:250px;background-color:var(--base-dark);outline:0;opacity:0;z-index:-1;max-height:0;transition:opacity .1s,z-index .1s,max-height: 5s;padding:10px;border-radius:50px;color:#fff}
.noti-dropdown a{margin:5px 10px}
.noti-dropdown a{color:#fff}
.noti-dropdown-container:focus{outline:0}
.noti-dropdown-container:focus .noti-dropdown{opacity:1;z-index:100;max-height:100vh;transition:opacity .2s,z-index .2s,max-height: .2s}
.noti-dropdown-container{position:relative}
.reply-noti{width:100%;float:left;padding-left:50px}
.reply-noti img{margin-right:10px}*/

.compar-download{background:url(../../../assets/images/img/img-comparison.png) no-repeat; background-size: cover; background-blend-mode:overlay; position: relative; padding: 90px 0;}
.legend-text{ font-size: 12px; text-align: left; color: #fff; margin: 20px 0; width: 100%; float: left;}
.compar-down-btn{ margin: 0;}

.dashboard-bg{ background: url(../../../assets/images/img/werc-dashboard-pic.jpg) no-repeat; background-size: cover; background-color: #fff;}
.dashboard-bg ul li h4{ color: #fff;}

.noti-dropdown { position: absolute; right: 30px; top: -6px; width: 300px; background-color: var(--base-dark); outline: none; opacity: 0; z-index: 1; max-height: 0;
  transition: opacity 0.1s, z-index 0.1s, max-height: 5s; padding: 10px; border-radius: 50px; color: #fff;}
.noti-dropdown a{ margin: 5px 10px;}
.noti-dropdown a{ color: #fff;}
.noti-dropdown-container:focus {outline: none; }
.noti-dropdown-container:focus .noti-dropdown { opacity: 1; z-index: 100; max-height: 100vh; transition: opacity 0.2s, z-index 0.2s, max-height: 0.2s; }
.noti-dropdown-container{ position: relative; z-index:1;}
.reply-noti{ width: 100%; float: left; padding-left: 50px;}
.reply-noti img{ margin-right: 10px;}

/*Push content*/
.wrapper-push { display: flex; width: 100%; align-items: stretch; }
#sidebar-push { min-width: 31%; max-width: 31%; transition: all 0.3s;}
#sidebar-push.active { margin-left: -31%; }
a[data-toggle="collapse"] { position: relative; }
#sidebarCollapse{ padding: 0 5px; float: left; margin-right: 5px; border-radius:5px; border: none; background: var(--base-dark); color: #fff; font-size: 12px; padding: 5px;}
#sidebarCollapse span img{filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(214deg) brightness(105%) contrast(101%)}
#sidebarCollapse img{ width: 15px; filter: invert(64%) sepia(46%) saturate(6304%) hue-rotate(163deg) brightness(99%) contrast(101%)}
.overflow-hidden{overflow: hidden;}
.push-btn{ width: 100%; border-bottom: 1px solid #98DAFC; margin-bottom: 10px; padding: 0 0 8px 0; float: left;}

/*Grid/List Table*/
.view-group { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; padding-left: 0; margin-bottom: 0; }
.thumbnail { margin-bottom: 30px; padding: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
.item.list-group-item { float: none; width: 100%; background-color: #fff; margin-bottom: 30px; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0 1rem; border: 0; }
.item.list-group-item .img-event { float: left; width: 30%;}
.item.list-group-item .list-group-image{ margin-right: 10px;}
.item.list-group-item .thumbnail{ margin-bottom: 0px; display: inline-block;}
.item.list-group-item .caption{ float: left; width: 70%; margin: 0;}
.item.list-group-item:before, .item.list-group-item:after{ display: table; content: " ";}
.item.list-group-item:after{ clear: both; }

.grid-group-item, .grid-item{ width: 23%; height: 200px; margin: 5px 1%; padding: 20px; color: #000; border: 1px solid #ddd; border-radius: 10px; text-align: center; overflow: hidden; float: left;}
.grid-item a{ font-size: 12px; color: #fff; background:var(--base-dark); padding: 5px; border-radius: 5px; }
.grid-item p{ font-size: 14px;}
.list-group-item{ width: 100%; height: auto; margin: 5px 1%; border-radius: 0px !important; text-align: left; padding: 10px; border: none; border-bottom: 1px solid #ccc;}
.list-group-item h6, .list-group-item p{ width: 90%; float: left;}
.list-group-item a{ float: right;}
a#list, a#grid{ float: right; margin: 5px; font-size: 12px; color: #fff; padding: 5px; border-radius: 5px;}
a#list img, a#grid img{ width: 20px;}

.upload-comparison-wrapper {  display: -webkit-flex; display: flex; webkit-flex-direction: column; flex-direction: column; webkit-flex-wrap: wrap; flex-wrap: wrap; /*height: 100vw; position:absolute;*/}


/* PAGINATION */
.pagination .nav-links{
    padding-top:10px;
    padding-bottom:10px;
    width:100%;
    float:left;
}

.pagination .nav-links a{
    padding:15px 20px;
    background-color: var(--body-light);
    text-align: center;
    border-radius:5px;
    margin-right:5px;
}

.pagination .nav-links span{
    padding:15px 20px;
    background-color: tranparent;
    text-align: center;
    border-radius:5px;
    margin-right:5px;
}


/* END: PAGINATION */

/*--- New Theme CSS ---*/
.tile-bg-lightblue {background: linear-gradient(237.99deg, var(--base-light) -76.83%, var(--body-light) 136.27%);}
.dash-tile-full { margin: 5px; float: left; width: 98.8%; padding: 10px; text-align: left; }
.announcement { display: flex; align-items: center; }
.announcement .icon { width: 20%; padding: 20px; text-align: center; }
.announcement .icon img { width: auto; margin: 0px; filter: none; }
.announcement .icon h6 { margin: 10px 0 0 0; font-size: 20px; font-weight: 700; text-transform: uppercase; }
.announcement .info { width: 55%; padding: 20px; background-image: url(../../images/img/announcement-border.png); background-repeat: no-repeat; background-position: left top -18px; }
.announcement .info .date { display: flex; align-items: center; margin: 0 0 10px 0; font-size: 14px; color: #1B96C6; }
.announcement .info .date span { display: inline-block; margin: 0 0 0 7px; padding: 2px 7px; border: 1px solid #ffffff; background: #0472AD; border-radius: 5px; font-size: 8px; color: #ffffff; text-transform: uppercase; }
.announcement .info h6 { margin: 0 0 10px 0; font-size: 20px; font-weight: 700; text-transform: uppercase; }
.announcement .info p { width: 100%; margin: 0 0 10px 0; font-size: 14px; }
.announcement .info .button { display: inline-block; margin: 20px 0 0 0; padding: 0px; background: none; }
.announcement .info .button img { width: 30px; margin: 0; filter: none; }
.announcement .image { width: 25%; padding: 20px; text-align: right; }
.announcement .image img { width: 100%; margin: 0px; filter: none; }

.dash-tile{ margin: 5px; float: left; width: 32.5%; padding: 10px;}
.dash-tile-half{ margin: 5px; float: left; width: 49.2%; padding: 10px; text-align: left; height: 240px;}
.dash-tile-300{ height: 320px;}
.dash-tile-180{ height: 180px;}
.tile-bg-blue{background: var(--base-light);color: #fff;}
.tile-bg-darkblue{background: var(--base-medium);color: #fff;}
.tile-bg-darkerblue{background: var(--base-dark);color: #fff;}
.dash-tile img.section-img{ height: 100px; width: auto; float: left; margin-bottom: 10px; margin-left: 10px;}
.dash-tile h6{ text-transform: uppercase; text-align: left; margin: 0 20px 0 10px; width: 100%; float: left;}
.dash-tile p, .dash-tile-half p{ text-align: left; margin: 10px; width: 95%; float: left;}
.dash-tile a, .dash-tile-half a{ background: none; float: left; text-align: left; margin: 0 10px; padding: 0;}
.dash-tile a img, .dash-tile-half a img{ width: 30px; float: left; margin: 0;}
.dash-tile img, .dash-tile-half img{ filter: none;}
.about-logo{ height: 50px; width: auto !important; margin: 20px 10px 0 !important;}

.dash-tile-dark-grad{ margin: 5px; width: 65.8%; background: var(--base-dark); color: #fff; border-radius: 10px; padding: 50px 10px 70px; float: left; position: relative;}
.dash-tile-dark-grad img{ width: 220px; position: absolute; top: 35px; right: 20px;}
.dash-tile-dark-grad h2{ width: 60%; font-size: 20px; font-weight: bolder; margin: 10px;}
.dash-tile-dark-grad h4{ margin-left: 10px;}
.dash-tile-dark-grad p{ font-size: 14px; width: 60%; margin-left: 10px;}
.dash-tile-dark-grad a{ position: relative; border-radius: 5px; padding: 10px 50px 10px 10px; border: 1px solid #00AEF1; background: rgb(27,150,198); background: linear-gradient(180deg, rgba(27,150,198,1) 35%, rgba(103,207,251,1) 100%); font-size: 17px; text-transform: uppercase; color: #fff; text-align: left; margin-left: 10px;}
.dash-tile-dark-grad a:hover{ background: rgb(27,150,198); background: linear-gradient(180deg, rgba(103,207,251,1) 100%), rgba(27,150,198,1) 35%;}
.dash-tile-dark-grad a img{ position: absolute; top: 10px; right: 10px; width: 20px;}
.dash-tile-light-grad{ position: relative;width: 15.8%; margin: 5px; height: 227px; background: rgb(27,150,198);
background: linear-gradient(225deg, rgba(27,150,198,1) 35%, rgba(219,238,249,1) 100%); color: #000; border-radius: 10px; padding: 20px 10px 0px; float: left; position: relative;}
.dash-tile-light-grad p, .dash-tile-light-grad h2{ margin:0 0 0 10px;}
.dash-tile-light-grad img{ width:90%; position: absolute; bottom:10px; left:10px; right:10px;}

.new-demographic-button{ width: 30%; margin: 13px; float: left;}
a.btn-analysis{ width: 100%; height: 58px; position: relative; border-radius: 5px 5px 0px 0px; padding: 10px 50px 10px 10px; border: 1px solid #00AEF1; background: rgb(27,150,198); background: linear-gradient(180deg, rgba(27,150,198,1) 35%, rgba(103,207,251,1) 100%); font-size: 13px; color: #fff; text-align: left; float: left;}
a.btn-analysis h6{ width: 100%; font-size: 17px; text-align: left; margin: 0; float: left;}
a.btn-analysis span{ width: 100%; font-size: 11px; text-align: left; float: left;}
a.btn-analysis img{ position: absolute; top: 20px; right: 10px; width: 20px;}
.new-demographic-button p{ width: 100%; text-align: center; font-size: 11px; background: #f4f4f4; border-radius: 5px; padding: 20px 10px 10px; border-radius: 0px 0px 5px 5px; height: 100px; float: left;}
.form-start-analysis label, .form-start-analysis input, .form-start-analysis textarea{ margin-left:15px; margin-right: 15px; width: 96%;}

.start-right{ width: 32%; float: right;}
.start-quote{ width: 100%; border-radius:10px;float: left; background-image: url(../../../assets/images/img/img-start.png); background-color: #CAD5E5; background-size: 70%; background-repeat: no-repeat; background-position: center top;}
.start-quote span{ width: 100%; margin: 190px 0 0; float: left; text-align: center; font-size: 17px; font-style: italic;}
.start-quote p{ width: 100%; margin:0 0 20px; float: left; text-align: center; font-size: 12px; color: #00AEF1;}
.response-count{ background: rgb(0,174,241);
background: linear-gradient(180deg, rgba(0,174,241,1) 0%, rgba(9,33,81,1) 100%); width: 48%; float: left; border-radius: 10px; float: left; margin: 16px 0; height: 197px; position: relative;}
.marginR-8{ margin-right: 8px;}
.marginL-8{ margin-left: 8px;}
.response-count p{ font-size: 14px; color: #fff; width: 100%; text-align: center; margin: 20px 0 0;}
.response-count h2{ color: #fff; width: 100%; text-align: center;}
.response-count img{ position: absolute; bottom: 0; left: 0; right: 0; width: 100%;}
.wid99{ width:99%; padding: 20px;}

.support-tile-half{ position: relative; background: rgb(27,150,198); background: linear-gradient(214deg, rgba(27,150,198,1) 0%, rgba(219,238,249,1) 100%); height: 215px;}
.support-tile-half h6{ text-transform: uppercase; color: #000; margin-left: 10px; margin-top: 50px; font-weight: bolder;}
.support-tile-half p{ color: #000; margin: 0 0 20px 10px;}
.support-tile-half img.img-icon-support{ position: absolute; right: 10px; top: 10px; width: 220px;}
.sup-tile{ margin: 5px; float: left; width: 24.2%; padding: 10px;}
.sup-tile img.section-img{ height: 100px; width: auto; float: left; margin-bottom: 10px; margin-left: 10px;}
.sup-tile h6{ font-weight: bolder; text-align: left; margin: 10px 20px 0px 10px; width: 100%; float: left;}
.sup-tile p{ text-align: left; margin: 10px; width: 95%; float: left;}
.sup-tile a{ background: none; float: left; text-align: left; margin: 0 10px; padding: 0;}
.sup-tile a img{ width: 30px; float: left; margin: 0;}
.sup-tile img{ filter: none;}

.library-filter-area{ background: var(--base-light); border-radius: 10px; width: 99%; padding: 10px; margin: 5px; float: left;}
.library-filter-area input{ background: none; border:1px solid #083567; border-radius: 5px; padding: 7px; width: 70%; float: left;}
.library-filter-area input::placeholder{}
.library-filter-area select{ background: none; border:1px solid #083567; border-radius: 5px; padding: 9px; width: 29%; float: right;}
.library-item .grid-item{ width: 24.1%; margin: 5px; padding: 20px; text-align: left; /*background: #fff url(../../../assets/images/img/bg-librabry-item.png) no-repeat;*/ background-size: 100%; height:auto; background-color: #fff;}
.library-item .grid-item h6{ font-size: 20px; font-weight: bolder; text-align: left;}
.library-item .grid-item p{ text-align: left;}
.library-item .grid-item a{ background: none; padding: 0; margin: 0;}
.library-item .grid-item a img{ width: 30px;}
.library-head{ background: url("../../../assets/images/img/bg-librabry.png") no-repeat; background-size: 100%; background-position-y: -30px;}

.comparison-header ul li.compar-download{ background: url("../../../assets/images/img/bg-comparison-header.png") no-repeat; background-size:cover; position: relative;}
p.comparison-quote{ font-size: 20px; width: 98%; text-align: center; float: left; margin: 0;}
p.legend-text{ margin:50px 0 0; padding: 20px 0 0; border-top: 1px solid #0382BF; width: 100%; font-size: 12px; float: left;}
.compare-download-btn{ position: absolute !important; bottom: 80px; right: 20px; background: none !important; padding: 0 !important; margin:0 !important; border:none !important;}
.compare-download-btn img{ width: 30px !important;}
.compare-report-details{ border-left:1px solid #0382BF;}
.compare-report-details p{margin: 10px 0px;width: 100%;font-size: 12px;float: left;}
.compare-report-details select{ background:none; width: 95% !important;}
.compare-report-details label{ width: 100%; border-bottom:1px solid #0382BF; margin-bottom: 10px; padding-bottom: 10px; float: left;}

/*--Responsive--*/
@media only screen and (max-width: 1024px) {
    .user-dash-button{ top:30px;}
    .main-button{ padding: 5px 10px;}
    .demographic-button a{ font-size: 14px;}
    .dese{ width: 23%;}
    .left-report-btn-wrap a, .my-selection span{ width: 46%;}
    .dese-short{ width: 48%;}
    .clone_report{ margin-bottom: 5px;}
    a.download{ width: 45%;}
    .grid-group-item, .grid-item{ width: 31%;}
    .search-section { height: 315px !important;/* width: 32.7% !important*/;}
    .modal{ z-index: 9999;}
    .library-item .grid-item{ width: 23.9%;}
    a.btn-analysis h6{ font-size: 13px;}
    a.btn-analysis span{ font-size:8px;}
    .new-demographic-button{ width:29%;}
    .new-demographic-button p{ font-size:10px; }
    .marginR-8{ margin-right: 4px;}
    .dash-tile-full{ width:99%;}
    .dash-tile-half{ width:49%;}
    .sup-tile{ width:24%;}
    .dash-tile-light-grad{ width:15.6%;}
    .dash-tile{ width:32.3%;}
}
@media only screen and (max-width: 768px) {
    .nav-item .dropdown-toggle{ width: 150px !important;}
    .dropdown-toggle::after{ margin-left: 1em;}
    .user-navi{ z-index: 999;}
    .collapse:not(.show){ display: block;}
    .material-design-hamburger{ float: left;}
    .navbar-nav{ width: 34%; float: left; display: block;}
    .nav-width{ width: 82%; float: left;}
    .nav-item .dropdown-toggle{ width: 70%;}
    a.nav-link{ width: 10% !important;}
    .bg-gradient ul li a{ width: 100% !important;}
    .user-reports-search{ width: 35%; float: right;}
    .report-search{ width: 240px;}
    .dropdown-menu[data-bs-popper]{ height: auto; left: 225px; position: absolute;}
    .user-dash-button{ top: 60px;}
    .main-button{ padding: 5px 10px;}
    .user-dash-items .col-12{ display: block !important;}
    .user-dash-items .col-12 .support-search{ width: 48% !important; min-height: 350px;}
    .response-number{ width: 30%;}
    .dese{ width: 48%;}
    .left-report-btn-wrap a{ width: 100%; margin: 0 0 5px;}
    .choices{ width: 48%;}
    .my-selection span{ width: 100%; margin: 0 0 5px !important;}
    .dese-short{ width: 100%; margin: 0 !important;}
    .grid-group-item, .grid-item{ width: 31.3%; height: 300px;}
    .search-section { height: 215px !important; width: 32.8%;}
    .faq-item{ width: 73%;}
    .library-item .grid-item{ width: 48.6%; height: 200px;}
    .response-count{ width:100%; margin:7px 0;}
    .marginL-8{ margin-left: 0;}
    .new-demographic-button p{ font-size:10px; height: 60px; }
    .new-demographic-button{ width: 97%; height: 100px;}
    .start-quote span{ margin: 165px 0 0;}
    .dash-tile-full{ width:99%;}
    .dash-tile-half{ width:99%;}
    .sup-tile{ width:48.6%;}
    .dash-tile-light-grad{ width: 15%; height: 225px;}
    .dash-tile{ width:31.9%;}
}
@media screen and (max-width: 425px) and (min-width:1px) {
    .logo{ width: 120px;}
    .left-panel{ width: 100%;}
    .right-panel{ width: 100%;}
    .menu--off{ left: -90%;}
    .menu--on{ left: 0 !important;}
    .navbar-nav{ width: 40%;}
    .nav-item img{ display: none;}
    .dropdown-menu[data-bs-popper]{ left: auto; right: 0 !important;}
    .report-search{ width: 100%;}
    .user-reports-search{ width: 100%; float: left; position: relative;}
    .user-dash-button{ top: 25px;}
    .nav-item .dropdown-toggle{ width: 140px !important;}
    .dropdown-menu{ right: 10px; top: 50px;}
    .dropdown-toggle::after{ margin-left: 4.255em;}
    .dropdown-notification{ display: none;}
    .report-user{ width: 100%; margin: 10px 0 0;}
    .content{ width: 100% !important;}
    .user-dash-items .col-12 .support-search{ width: 100% !important;}
    .white-tile{ width: 100%;}
    /*.perform-analysis{ display: none;}*/
    .demographic-button{ border: none !important; border-top: 1px solid #ccc !important; width: 100%;}
    .demographic-button p{ height: auto !important;}
    .response-number{ width: 100%; padding: 20px 0; margin: 10px 0 5px;}
    .filter{ width: 100%; float: left; margin: 10px 0 !important; padding: 0; text-align: center;}
    .filter a{ width: 100%; text-align: center;}
    /*#sidebar-push, .push-btn{ display: none;}*/
    .dese{ width: 46%;}
    .analysis-choices h6{ width: 100%;}
    /*.sticky-report ol{ display: none;}*/
    .report-details-wrapper{ display: block !important;}
    .report-details-wrapper section{ width: 100%; border: none; border-bottom: none; padding-bottom: 20px; float: left;}
    .sticky-report ul li{ width: 100%;}
    .result-flow{ width: 100%;}
    .choices{ width: 100%; margin-left: 0 !important;}
    .secondary-button{ padding: 4px 20px;}
    .wrapper-push{ display: block;}
    #sidebar-push{ min-width: 100%; max-width: 100%;}
    #sidebar-push.active{ margin-left: -110%;}
    #content-push{ overflow: unset !important;}
    .clone_report{ margin-bottom: 0;}
    p.quote-text{ padding: 10px 0;}
    .report-details-wrapper .left-right-border{ width: 100%; border: none; margin: 0;}
    .compare-wrapper{ overflow-y: scroll;}
    .compare-wrapper ul{ width: 200%;}
    .grid-group-item, .grid-item { width: 100%; height: auto; margin: 5px 12px; }
    .report-filter input{ width: 100px;}
    .search-section{ width: 100% !important; height: auto !important;}
    .support-search-field{ width: 90%;}
    .user-breadcrumb, .faq-category{ width: 100%;}
    .faq-item{ width: 100% !important; margin-left: 0 !important;}
    .profile-art h3{ font-size:20px; width: 52%; margin-top: 170px; margin-left: 130px;}
    .profile-art p{ font-size: 12px; margin-top: 0px; margin-left: 130px;}
    .profile-user-img{ width: 100px; height: 100px; top:145px;}
    .profile-user-edit{ top: 210px; left: 60px;}
    
    .dashboard-bg{ width: 100%;}
    .logged-user{ width: 100% !important; margin: 10px 0 0 !important;}
    .report-user-item{ width: 100% !important; margin: 10px 0 0 !important;}
    .ask-research{ margin: 10px 0 0 !important;}
    ol li.tile-header{ width: 100%;}
    ul.recent-reports li:nth-child(2){ float: right;}
    .survey-content{ width: 90%;}
    .survey-field{ width: 100%; margin-right: 5px;}
    .survey-field span{font-size: 12px; text-align: center; width: 100%; float: left; margin-top: 10px;}
    .survey-field select{ width: 100%;}
    .tab-content .nav-link{ width: 46%; margin: 5px; border-radius: 10px;}
    .tab-content .nav-link p{ width: 100%; text-align: center;}
    .width-welcome{ width: 100%;}
    .my-selection{ width: 100%; margin: 0 0 10px;}
    .select-compare-1, .select-compare-2, .select-compare-3{ width: 100%;}
    .support-search{ margin-left: 0 !important;}
    .report-files{ width: 100%;}
	
	.customReport { flex-wrap: wrap; }
	.customReport .download { flex-direction: row; width: 100%; }
	.customReport .download .report { font-size: 15px; }
    .customReport .files { width: 100%; }
	.customReport .files input { padding: 236px 23% 100px; }
	
    #year, #uploaded_member, #find{ width: 96%;}
    .upload-comparison-wrapper .col-md-9{ width: 77%;}
    .upload-comparison-wrapper .col-md-1{ width: 10%; text-align: right;}
    
    .comp-edit-form{ width: 846px;}
    /*.collapse:not(.show){overflow-x:scroll;}*/
    
    .evalution li.col-lg-1, .user-table-area .table-borderless li.col-lg-1, .comp-edit-form li.col-lg-1{flex:0 0 auto;width:8.3333333333%}
    .evalution li.col-lg-2, .user-table-area .table-borderless li.col-lg-2, .comp-edit-form li.col-lg-2{flex:0 0 auto;width:16.6666666667%}
    .evalution li.col-lg-3, .user-table-area .table-borderless li.col-lg-3, .comp-edit-form li.col-lg-3{flex:0 0 auto;width:25%}
    .evalution li.col-lg-4, .user-table-area .table-borderless li.col-lg-4, .comp-edit-form li.col-lg-4{flex:0 0 auto;width:33.3333333333%}
    .evalution li.col-lg-5, .user-table-area .table-borderless li.col-lg-5, .comp-edit-form li.col-lg-5{flex:0 0 auto;width:41.6666666667%}
    .evalution li.col-lg-6, .user-table-area .table-borderless li.col-lg-6, .comp-edit-form li.col-lg-6{flex:0 0 auto;width:50%}
    .evalution li.col-lg-7, .user-table-area .table-borderless li.col-lg-7, .comp-edit-form li.col-lg-7{flex:0 0 auto;width:58.3333333333%}
    .evalution li.col-lg-8, .user-table-area .table-borderless li.col-lg-8, .comp-edit-form li.col-lg-8{flex:0 0 auto;width:66.6666666667%}
    .evalution li.col-lg-9, .user-table-area .table-borderless li.col-lg-9, .comp-edit-form li.col-lg-9{flex:0 0 auto;width:75%}
    .evalution li.col-lg-10, .user-table-area .table-borderless li.col-lg-10, .comp-edit-form li.col-lg-10{flex:0 0 auto;width:83.3333333333%}
    .evalution li.col-lg-11, .user-table-area .table-borderless li.col-lg-11, .comp-edit-form li.col-lg-11{flex:0 0 auto;width:91.6666666667%}
    .evalution li.col-lg-12, .user-table-area .table-borderless li.col-lg-12, .comp-edit-form li.col-lg-12{flex:0 0 auto;width:100%}
    
    .user-table-area, #collapse_decoder_0, #collapse0, #collapse1, #collapse2, #collapse3, #collapse4, #collapse5, #collapse6, #collapse7, #collapse_decoder_0, #collapse_decoder_1, #collapse_decoder_2, #collapse_decoder_3, #collapse_decoder_4, #collapse_decoder_5, #collapse_decoder_6, #collapse_decoder_7 {overflow-x: scroll;}
    .user-table-area .table-borderless{ width: 1000px;}
    
    .evalution{ overflow-x: scroll;}
    .evalution ol, .evalution ul{ width: 1000px;}
    
    .mobile-nav{ display: block; position: absolute; right: 10px; top: 25px; z-index: 9999;}
    .desktop-nav{ display: none !important;}
    
    .library-head { padding:50px 10px;}
    .library-head p{ width: 100%;}
    .library-item .grid-item{ width: 99%;}
    .new-demographic-button p{ font-size:10px; height: 60px; padding-top: 10px;}
    .new-demographic-button{ width: 97%; height: 100px;}
    .start-quote span{ margin: 165px 0 0;}
    .start-right{ width: 100%; margin-top: 20px;}
    .dash-tile-dark-grad p{ width: 100%;}
    .dash-tile-full{ width:99%;}
    .dash-tile-half{ width:99%;}
    .support-tile-half img.img-icon-support{ display: none;}
    .sup-tile{ width:99%;}
    .dash-tile-dark-grad, .dash-tile-light-grad{ width:98%;}
    .dash-tile{ width:98%; margin-left: 5px !important;}
    .dash-tile-180{ height: 200px;}
    .dash-tile-dark-grad img{ width:170px; top:55px; right: 0;}
    
}