/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
*/
html,
body {
  height: 100%;
  font-family: 'Poppins', sans-serif;
}

a{
    text-decoration: none;
    color: unset;
}

.b-green{
    background-color: #5CA410;
}
.b-gray-a{
    background-color: #bfbfbf !important;
}
.b-gray{
    background-color: #7F7F7F;
}
.b-blue-a{
    background-color: #BDD7EE !important;
}
.c-blue-a{
    color: #0070c0 !important;
}
.b-red{
    background-color: #ff0000 !important;
}

.b-red-o{
    background-color: #FF7E82;
}
.b-red-a{
    background-color: #ff0000 !important;
}
.b-red-b{
    background-color: #c0504d !important;
}

.c-blue{
    color: blue;
}

.c-red {
    color: #ED1C24;
}

.c-white{
    color: #fff;
}

.c-black {
    color: #000;
}

.form-select,
.form-control {
    font-size: 14px;
}

.login {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #fff;
}
  
.form-signin {
    width: 100%;
    max-width: 40%;
    padding: 15px;
    margin: auto;
}
  
.form-signin .checkbox {
    font-weight: 400;
}
  
.form-signin .form-floating:focus-within {
    z-index: 2;
}

.btn-main {
    background-color: #ED1C24;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
}

.btn-main:hover{
    background-color: #393939;
    color: #fff;
}

.modal-header {
    border: none;
}

.main_menu {
    padding: 5px 100px 5px 100px;
    border-bottom: 5px solid #ED1C24;
}

.btn-dark{
    background-color: #393939;
}

.btn-group button{
    border: none;
    background-color: transparent;
}

.btn-group .dropdown-menu{
    padding: 0;
    
}

.dropdown-menu[data-bs-popper] {
    margin-top: 10px;
}

.btn-group .dropdown-menu .dropdown-item{
    background-color: #393939;
    color: #fff;
    border-radius: 5px;
    text-align: center;
}

footer{
    position: fixed;
    bottom: 0;
    background-color: #ED1C24;
    color: #fff;
    width: 100%;
    padding: 10px 0;
    font-size: 12px;
    z-index: 9;
}

.content{
    padding: 50px 0;
}

.btn-create-inner,
.btn-clear,
.btn-primary {
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
}

.btn-create-inner:hover{
    background-color: #ED1C24;
    color: #fff;
}

.btn-clear:hover{
    background-color: #000;
    color: #fff;
}

.search-box_main .accordion-button  {
    background-color: #F5F5F5;
    border: 1px solid #C1C1C1;
    padding: 10px 20px;
    border-radius: 5px;
    color: #7F7F7F;
}

.accordion-button:not(.collapsed) {
    color: #7F7F7F;
}

.search-box_main .accordion-body{
    border: 1px solid #C1C1C1;
    border-top: none;
}

.table {
    font-size: 14px;
}

.table-main thead{
    background-color: #393939;
    color: #fff;
    vertical-align: middle;    
}

.dataTables_scrollBody thead{
    background-color: transparent;
}


.table-main thead th{
    font-weight: normal;
    border: 0.5px solid #C1C1C1;
}

.sorting.sorting_asc{
    vertical-align: middle;
}

.icon-progress i{
    display: inline-block;
    margin: 0 1px;
    color: #C1C1C1;
    border: 3px solid #C1C1C1;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    padding: 5px;
}

.icon-progress i.done{
    color: #ED1C24;
    border: 3px solid #ED1C24;
    
}

table.table-main {
    table-layout: fixed;
    width: 100%;  
    word-break: break-word;
}

.page-item.disabled .page-link{
    background-color: #C1C1C1;
    color: #fff;
    font-size: 12px;
    /*margin: 0 5px;*/
    /*border-radius: 5px;*/
}

.page-item.active .page-link {
    background-color: #ED1C24;
    color: #fff;
    font-size: 12px;
    /*border-radius: 5px;*/
    border: 1px solid #ED1C24;
}
.page-item .page-link {
    background-color: #ffffff;
    color: #000;
    font-size: 12px;
}

.dataTables_info {
    font-size: 12px;
    color: #BFBFBF;
    margin-bottom: 15px;
}

table.dataTable>thead .sorting:before, table.dataTable>thead .sorting:after, table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_asc:after, table.dataTable>thead .sorting_desc:before, table.dataTable>thead .sorting_desc:after, table.dataTable>thead .sorting_asc_disabled:before, table.dataTable>thead .sorting_asc_disabled:after, table.dataTable>thead .sorting_desc_disabled:before, table.dataTable>thead .sorting_desc_disabled:after{
    bottom: 10px !important;
}

table.table-bordered.dataTable th{
    padding: 10px;
    word-break: initial;
}

table.table-main.table-bordered.dataTable td{
    border-bottom: none;
}

table.table-main{
    border-bottom: 1px solid rgb(222, 226, 230);
}

.btn-update {
    background-color: #ED1C24;
    color: #fff;
    padding: 2px 10px;
    border-radius: 5px;
    margin-left: 5px;
}

.btn-update:hover{
    background-color: #393939;
    color: #fff;
}

.table_manage a{
    color: #000;
    padding: 0 5px;
}

.table_manage a:hover{
    color: #ED1C24;
}

.p-35 {
    padding-left: 35px;
}

.content-inner a .figure-caption{
    color: #000;   
}

div.dataTables_wrapper div.dataTables_info{
    padding-top: 15px !important;
}

div.dataTables_wrapper div.dataTables_paginate{
    padding-top: 15px;
    align-items: center!important;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  color: #929292;
}
.steps .step {
  position: relative;
  display: table-cell;
  text-align: center;
  font-size: 14px;
  color: #7F7F7F;
}
.steps .step:before {
  display: block;
  margin: 0 auto;
  background: #ffffff;
  border: 3px solid #C1C1C1;
  color: #C1C1C1;
  width: 60px;
  height: 60px;
  text-align: center;
  margin-bottom: 15px;
  line-height: 3.4rem;
  border-radius: 100%;
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 30px;
}

.steps .step:after {
  content: "";
  position: absolute;
  display: block;
  background: #C1C1C1;
  width: 100%;
  height: 0.125rem;
  top: 1.8rem;
  left: 50%;
}

/*Step New*/
.steps .step span:before {
  display: block;
  margin: 0 auto;
  background: #ffffff;
  border: 3px solid #C1C1C1;
  color: #C1C1C1;
  width: 60px;
  height: 60px;
  text-align: center;
  margin-bottom: 15px;
  line-height: 3.4rem;
  border-radius: 100%;
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 30px;
}
/*.steps .step span:after {
  content: "";
  position: absolute;
  display: block;
  background: #C1C1C1;
  width: 100%;
  height: 0.125rem;
  top: 1.8rem;
  left: 50%;
}*/


.steps .step a{
    color: #ED1C24;
}
.steps .step:last-child:after {
  display: none;
}
.steps .step.is-complete {
    /*font-size: 14px;*/
    color: #ED1C24;
}
.steps .step.is-complete span:before{
    border: 3px solid #ED1C24;
    color: #ED1C24;
}
.steps .step.is-complete:before {
    color: #ED1C24;
    border: 3px solid #ED1C24;
    background: #FFF;
}
.steps .step.is-complete:after {
  background: #ED1C24;
}
.steps .step.is-active {
  /*font-size: 14px;*/
  color: #ED1C24;
}
.steps .step.is-active span:before{
    border: 3px solid #ED1C24;
    color: #ED1C24;
}
.steps .step.is-active:before {
  color: #ED1C24;
  border: 3px solid #ED1C24;
  background: #FFF;
}


.steps {
  margin-bottom: 3em;
}

.steps .step.step1:before{
    font-family: "Font Awesome 5 Free";
    content: "\f508";
}

.steps .step span.step1:before{
    font-family: "Font Awesome 5 Free";
    content: "\f508";
}

.steps .step.step2:before{
    font-family: "Font Awesome 5 Free";
    content: "\f002";
}

.steps .step span.step2:before{
    font-family: "Font Awesome 5 Free";
    content: "\f002";
}

.steps .step.step3:before{
    font-family: "Font Awesome 5 Free";
    content: "\f0ca";
}

.steps .step span.step3:before{
    font-family: "Font Awesome 5 Free";
    content: "\f0ca";
}

.steps .step.step4:before{
    font-family: "Font Awesome 5 Free";
    content: "\f46c";
}

.steps .step span.step4:before{
    font-family: "Font Awesome 5 Free";
    content: "\f46c";
}

.steps .step.step5:before{
    font-family: "Font Awesome 5 Free";
    content: "\f46d";
}

.steps .step span.step5:before{
    font-family: "Font Awesome 5 Free";
    content: "\f46d";
}

.steps .step.step6:before{
    font-family: "Font Awesome 5 Free";
    content: "\f080";
}

.steps .step span.step6:before{
    font-family: "Font Awesome 5 Free";
    content: "\f080";
}

.btn-download-inner{
    border-radius: 5px;
    font-size: 14px;
}

.btn-download-inner:hover{
    color: #fff;
    background-color: #393939;
}


.form-information {
    font-size: 14px;
}

.form-information_inner {
    background-color: #FBE2E3;
    padding: 20px;
    border-radius: 10px;
    font-size: 14px;
}


.tooltip-inner{
    font-size: 12px;
    display: block;
    text-align: left;
    white-space: pre-line;
}

.m100{
    margin-bottom: 100px;
}

.box_save {
    position: relative;
    width: 100%;
}

.box_save-inner{
    position: fixed;
    bottom: 35px;
    background-color: #F5F5F5;
    border-radius: 5px;
    padding: 10px;
    display: inline-table;
    left:50%;
    -ms-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    z-index: 10;
}

.box_save-inner a{
    font-size: 14px;
    color: #fff;
    margin: 0 3px;
    padding: 5px 12px;
    border-radius: 5px;
}

.box_save-inner a.btn-back{
    background-color: #393939;
}

.box_save-inner a.btn-save{
    background-color: #0070C0;
}

.box_save-inner a.btn-save_next{
    background-color: #5CA410;
}

.btn-close-inner a{
    margin: 0 5px;
    border-radius: 5px;
    color: #fff;
    padding: 8px 15px;
}

.btn-close-inner a.btn-receive,
.btn-close-inner a.btn-save{
    background-color: #0070C0;
}

.btn-close-inner a.btn-lose,
.btn-close-inner a.btn-cancle{
    background-color: #ED1C24;
}

.btn-close-inner a.btn-onprocess{
    background-color: #5CA410;
}

.form-control:focus{
    border-color: transparent;
    box-shadow: none;
    border: 1px solid #ced4da;
}

.heading-text_link-reset a{
    font-size: 12px;
    color: #0070C0;
    text-decoration: underline;
}

.heading-text_link-reset a:hover{
    color: #ED1C24;
}

.table_result_pc {
    border-bottom: 1px solid rgb(222, 226, 230);
    vertical-align: middle;
    width: 100%;  
    table-layout: fixed;
    word-break: break-word;
}

.table_result_pc th{
    vertical-align: middle;
    background-color: #393939;
    color: #FFF;
    font-size: 12px;
    font-weight: normal;    
}

table.table_result_pc.table-bordered.dataTable th{
    padding: 5px;
}

.table>:not(:first-child) {
    border-top: none;
}

.table_result_pc td{
    font-size: 12px;
}

.table_result_pc tbody tr{
    border-bottom: none;
    border-top: none;
}

.btn-show_table {
    background-color: #ED1C24;
    color: #fff;
    font-size: 12px;
    border: none;
    border-radius: 5px;
    padding: 2px 10px;
}

.btn-close_table {
    background-color: #393939;
    color: #fff;
    font-size: 12px;
    border: none;
    border-radius: 5px;
    padding: 2px 10px;
}

table.table_result_pc.table-bordered.dataTable td{
    border-bottom: 0;
}

.table_search-pc {
    margin-bottom: 100px;
}

.ui-draggable, .ui-droppable {
	background-position: top;
}

.offcanvasTopSearch {
    max-width: 90%;
    margin: 0 auto;
    height: 95vh;
}

.offcanvas-header {
    background-color: #ED1C24;
    padding: 10px 20px;
}

.tab-heading_criteria h5{
    color: #fff;
    font-size: 16px;
    margin: 0 0 0 auto;
}

button.btn-reset_search{
    background-color: #393939;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 20px;
}

button.btn-search-pc{
    background-color: #0070C0;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 20px;
}

.offcanvas-body {
    padding: 0;
}
.ui-tabs .ui-tabs-nav li {
    /*width: 33.33%;*/
    text-align: center;
    margin: 0;
    border: 1px solid #7F7F7F;
    border-radius: 0;
    background-color: #C1C1C1;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button{
    color: #000;
    width: 100%;
    position: relative;
    line-height: 1.5;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: none;
    color: #000;    
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #fff;
    font-family: 'Prompt', sans-serif;
}

.ui-tabs .ui-tabs-nav,
.ui-tabs {
    padding: 0;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0;
    padding-bottom: 0;
    border: 1px solid #FF5157;
    background-color: #FF7E82;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor i{
    position: absolute;
    left: 5px;
    top: 13px;
}

.ui-widget-header ,
.ui-widget-content{
    background-color: transparent;
    border: none;
}

.ui-corner-all, .ui-corner-bottom {
    border-bottom-right-radius: 0;
}

.offcanvas-body{
    background-color: #FBE2E3;
}

.ui-widget.ui-widget-content {
    border: none;
}

.has-search {
    position: relative;
}

.has-search .form-control {
    padding-right: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
    right: 0;
}

.search-criteria-inner {
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #C1C1C1;
    font-size: 12px;
}

.btn-check_name {
    background-color: transparent;
    border: 1px solid #C1C1C1;
    color: #000;
    width: 100%;
    padding: 3px 10px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.add-result_plus {
    position: absolute;
    right: 5px;
    font-size: 14px;
}

.btn-check:active+.btn-check_name, .btn-check:checked+.btn-check_name, .btn-check_name.active, .btn-check_name:active, .show>.btn-check_name.dropdown-toggle{
    background-color: #FF7E82;
    border: 1px solid #FF5157;
}

.data_search {
    padding: 7px 7px 0 7px;
}

.data_search .col-4,
.data_search .col-3{
    padding-left: 5px;
    padding-right: 5px;
}

.link-select a{
    color: #0070C0;
}

.length-input .input-group-text {
    background-color: transparent;
    border: none;
    font-size: 14px;
    font-weight: bold;
}

.ui-widget {
    font-family: 'Prompt', sans-serif;
}

.mytooltip {
    display: inline;
    position: relative;
    z-index: 999;
}

.mytooltip .tooltip-item {
    cursor: pointer;
    display: inline-block;
    font-weight: 500;
    padding: 0 10px;
}

.mytooltip .tooltip-content {
    position: absolute;
    z-index: 9999;
    width: 380px;
    left: 20%;
    margin: 0 0 20px -180px;
    bottom: 100%;
    text-align: left;
    font-size: 12px;
    line-height: 1.2;
    -webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
    box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
    background: #2b2b2b;
    opacity: 0;
    cursor: default;
    pointer-events: none;
    padding: 10px;
}

.mytooltip .tooltip-content-bottom {
    margin: 10px 0 0 -100px !important;
    top: 100% !important;
    width: 580px;
    bottom: unset;
}
.mytooltip .tooltip-content-bottom::after {
    top: -7% !important;
    left: 19% !important;
    border-color: transparent transparent #2a3035 !important;
}
.mytooltip .tooltip-content::after {
    content: '';
    top: 100%;
    left: 50%;
    border: solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: #2a3035 transparent transparent;
    border-width: 10px;
    margin-left: -10px;
}



/*.mytooltip .tooltip-content img{
    background-color: #000;
    position: relative;
    height: 80px;
    display: block;
    margin: 10px 5px;
    width: 49%;
    float: left;
}*/

.mytooltip .tooltip-item::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 20px;
    bottom: 100%;
    left: 50%;
    pointer-events: none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.mytooltip:hover .tooltip-item::after {
    pointer-events: auto;
}

.mytooltip:hover .tooltip-content {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg);
}

.mytooltip:hover .tooltip-content2 {
    opacity: 1;
    font-size: 18px;
}

.mytooltip .tooltip-content  .tooltip-content-text {
    color: #fff;
    font-size: 12px;
    position: relative;
    /*width: 45%;*/
    float: left;
    /*margin-top: 10px;*/
    font-weight: normal;
}

/* MY Tooltop bottom */



table.modal-table td ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

table.modal-table td ul li{
    margin-bottom: 5px;
}

table.modal-table td ul li:last-child{
    margin-bottom: 0;
}

table.modal-table td ul li i{
    font-size: 10px;
    vertical-align: baseline;
}

.modal-table td{
    font-size: 13px;
}

.table_comparison_pc {
    vertical-align: middle;
    font-size: 12px;
}

.table_comparison_pc tr td:first-child{
    border-left: 2px solid #DEE2E6;
}

.btn-competitor {
    color: #fff;
    background-color: #2a3035;
    font-size: 12px;
    width: 100%;
    display: block;
    margin-bottom: 5px;
}

.btn-catalog {
    color: #fff;
    background-color: #0070C0;
    font-size: 12px;
    width: 100%;
    display: block;
    margin-bottom: 5px;
}

.btn-delete {
    color: #fff;
    background-color: #ED1C24;
    font-size: 12px;
    width: 100%;
    display: block;
}

.btn-competitor:hover,
.btn-catalog:hover,
.btn-delete:hover{
    color: #fff;
    opacity: 0.8;
}

.table_comparison{
    margin-bottom: 10%;
}

.table_like {
    width: 100%;
    table-layout: fixed;
}

.table_options {
    vertical-align: middle;
    font-size: 12px;
    margin-bottom: 5%;
}

.table_options select{
    font-size: 12px;
    height: 38px;
    border-radius: 0;
}

/*  Toggle Switch  */

.toggleSwitch span span {
	display: none;
}  
  
.toggleSwitch {
	display: inline-block;
	position: relative;
	overflow: visible;
	padding: 0;
	cursor: pointer;
	width: 50%;
	background-color: #fafafa;
	height:28px;
}
.toggleSwitch * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.toggleSwitch label,
.toggleSwitch > span {
	line-height: 20px;
	height: 20px;
	vertical-align: middle;
}
.toggleSwitch input:focus ~ a,
.toggleSwitch input:focus + label {
	outline: none;
}
.toggleSwitch label {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
}
.toggleSwitch input {
	position: absolute;
	opacity: 0;
	z-index: 5;
}
.toggleSwitch > span {
	position: absolute;
	right: 0;
	width: calc(100% - 0px);
	text-align: left;
	white-space: nowrap;
    margin:0;
}
.toggleSwitch > span span {
	position: absolute;
	z-index: 5;
	display: block;
	margin-left: 50px;
	font-size: 0.9em;
	right: 0;
	opacity: 1;
	width:40%;
	text-align: center;
    line-height:28px;
}
.toggleSwitch a {
	position: absolute;
	right: 50%;
	z-index: 4;
	display: block;
	top: 0;
	bottom: 0;
	padding: 0;
	right: 0;
	width: 50%;
	background-color: #ED1C24;
	border-radius: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.toggleSwitch > span span:first-of-type {
	color: #FFF;
	opacity: 1;
	right: 0;
	margin: 0;
    width: 50%;
}
.toggleSwitch > span span:last-of-type {
	right:auto;
	left:0;
	color: #999;
	margin: 0;
    width: 50%;
}
.toggleSwitch > span:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: -2px;
	border-radius: 30px;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.toggleSwitch input:checked ~ a {
	right: calc(50% - 0px);
}
.toggleSwitch input:checked ~ span span:first-of-type {
	right:0;
	color:#999;
}
.toggleSwitch input:checked ~ span span:last-of-type {
	color:#FFF;
}

.tab-heading_inner {
    background-color: #2a3035;
    padding: 15px 35px;
}

.tab-heading_inner h5{
    color: #fff;
    margin: 0;
    font-size: 14px;
}

.questionnaire_input {
    font-size: 14px;
}

/*  End Toggle Switch  */