
html { scroll-behavior: smooth !important; scroll-padding-top: 95px; }

/*body { background-color: #fff; }*/
.navbar .nav-link { font-size:18px; }
/*.navbar.mx-4 { margin-left: 0.5rem !important; }*/

.breadcrumb { background-color: transparent; }
.breadcrumb-item+.breadcrumb-item::before { display: none; content: ""; }
.breadcrumb-item+.breadcrumb-item { margin-top: -3px; }

.heart { animation: heathing 1s ease infinite; }
@keyframes heathing {
  0% { transform: scale(0.75); }
  20% { transform: scale(1); }
  40% { transform: scale(0.75); }
  60% { transform: scale(1); }
  80% { transform: scale(0.75); }
  100% { transform: scale(0.75); }
}

.text-secondary {
    color: #333 !important;
}

 p {
    font-weight: 400 !important;
}

.font-weight-400 {
    font-weight: 400 !important;
}

.icon-move-right i {
    transition: all 0.2s cubic-bezier(0.34, 1.61, 0.7, 1.3);
}

.icon-move-right:hover i, .icon-move-right:focus i {
    transform: translateX(5px);
}

.btn-neutral-custom {
    color: #51cbce !important;
}

.btn-neutral-custom:hover, .btn-neutral-custom:focus, .btn-neutral-custom:active {
    color: #34b5b8 !important;
}

.text-xs { font-size: 11px; }

.alert-info-custom {
    background-image: linear-gradient(310deg, #111 0%, #343a40 100%);
}

a.text-primary:focus, a.text-primary:hover {
    color: #34b5b8 !important;
}

h3, h4, .h4 { margin-bottom:20px; }
a { font-weight: 400 !important; }

.card-primary { background-color: #2ba9cd; border: 1px solid #2ba9cd; border-radius: 10px; color: #fff; padding: 30px; }

.section-primary { background-color: #2ba9cd; }

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

.min-vh-1 { min-height: 1vh !important; }
.min-vh-2 { min-height: 2vh !important; }
.min-vh-3 { min-height: 3vh !important; }
.min-vh-4 { min-height: 4vh !important; }
.min-vh-5 { min-height: 5vh !important; }
.min-vh-6 { min-height: 6vh !important; }
.min-vh-7 { min-height: 7vh !important; }
.min-vh-8 { min-height: 8vh !important; }
.min-vh-9 { min-height: 9vh !important; }
.min-vh-10 { min-height: 10vh !important; }
.min-vh-15 { min-height: 15vh !important; }
.min-vh-16 { min-height: 16vh !important; }
.min-vh-17 { min-height: 17vh !important; }
.min-vh-18 { min-height: 18vh !important; }
.min-vh-19 { min-height: 19vh !important; }
.min-vh-20 { min-height: 20vh !important; }

/*.container-mr-05rem { margin-right: 0.5rem;}*/
/*.container-pr-05rem { padding-right: 0.5rem;}*/

@media (max-width: 768px){ 
	/*.container-mr-05rem-570w { margin-right: 0.5rem;}*/
	/*.container-pr-05rem-570w { padding-right: 0.5rem;}*/
}

.form-switch .form-check-input:checked {
    border-color: rgba(255, 0, 128, 0.55);
    background: linear-gradient(310deg, #7928CA 0%, #FF0080 100%);
}



.ml-xs { margin-left: 5px; }
.ml-sm { margin-left: 10px; }
.ml-md { margin-left: 15px; }
.ml-lg { margin-left: 20px; }
.ml-xl { margin-left: 25px; }
.ml-xxl { margin-left: 30px; }

.mr-xs { margin-right: 5px; }
.mr-sm { margin-right: 10px; }
.mr-md { margin-right: 15px; }
.mr-lg { margin-right: 20px; }
.mr-xl { margin-right: 25px; }
.mr-xxl { margin-right: 30px; }

.header-icon { font-size: 16px !important; margin-right: 5px; vertical-align: text-bottom; }

.password-container { position: relative; }
.toggle-icon { margin-top: 12px; position: absolute; right: 15px; font-size: 16px; color: #666; z-index: 2; cursor: pointer; }

@media (min-width: 992px){
	.dropdown.dropdown-hover .dropdown-menu, .dropdown .dropdown-menu { left: -240px !important; }
	.dropdown .dropdown-menu:before { left: 320px !important; }
}

@media (min-width: 820px){
	.dropdown.dropdown-hover .dropdown-menu, .dropdown .dropdown-menu { left: -140px !important; }
	.dropdown .dropdown-menu:before { left: 220px !important; }
}

@media (min-width: 768px){
	.dropdown.dropdown-hover .dropdown-menu, .dropdown .dropdown-menu { left: -185px !important; }
	.dropdown .dropdown-menu:before { left: 240px !important; }
}

@media (min-width: 360px){
	.dropdown.dropdown-hover .dropdown-menu, .dropdown .dropdown-menu { left: -170px !important; }
	.dropdown .dropdown-menu:before { left: 240px !important; }
}

@media (min-width:100px) and (max-width:992px){
	.showContributeLeft { display:none; }
	.showContributeBottom { display:block; }
}

@media (min-width:992px) and (max-width:10000px) {
	.showContributeLeft { display:block; }
	.showContributeBottom { display:none; }
}

.badge-status-width { width: 100%; }
table.footable td { white-space: normal !important; }
table.footable td p { white-space: normal !important; }
table.footable thead th { white-space: normal !important;border: 0px none !important;padding-left: 8px; }
table.footable tbody td { white-space: normal !important; border: 0px none !important; }
table.footable thead th.widthName { width: 200px !important; min-width: 200px !important; max-width: 200px !important; }
table.footable tbody span.borderName { display: table-cell; }
table.footable thead th.widthBankNameCol { width: 290px !important; min-width: 290px !important; max-width: 290px !important; }
table.footable tbody span.widthBankName { width: 250px !important; min-width: 250px !important; max-width: 250px !important; display: table-cell; }
table.footable tbody span.widthBankLogo { width: 40px !important; min-width: 40px !important; max-width: 40px !important; margin-right: 10px; display: table-cell; }
table.footable thead th.widthStatus { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
table.footable td.footable-row-detail-cell { border-style: none !important; }
.footable.breakpoint > tbody > tr > td > span.footable-toggle { display: table-cell !important;}

#name_first-error, #name_surname-error, #email_address-error
{ position: absolute; right: 10px; top: 10px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(310deg, #7928CA, #FF0080); }
#categorySelect-error, #subcategorySelect-error
{position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(310deg, #7928CA, #FF0080); float: right; margin-top: 5px; margin-right: 10px; }
#categoryComments-error
{position: relative; float: right; right: 15px; top: -140px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(310deg, #7928CA, #FF0080); }

.footable .footable-toggle > span:before {
    content: "\25BC"; /* Unicode character for down arrow */
}
footable .footable-expanded > .footable-toggle > span:before {
    content: "\25B2"; /* Unicode character for up arrow */
}

.mouseScroll { display: block; margin: 0 auto; width: 24px; height: 100px; margin-top: 55px; }
.mouseScroll-arrows { display: block; width: 5px; height: 5px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); border-right: 2px solid white; border-bottom: 2px solid white; margin: 0 0 3px 4px; width: 16px; height: 16px; }
.mouseScroll-arrow1 { margin-top: 1px; }
.mouseScroll-arrow1, .mouseScroll-arrow2, .mouseScroll-arrow3 { -webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite; animation: mouse-scroll 1s infinite; }
.mouseScroll-arrow1 { -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -webkit-animation-direction: alternate; animation-direction: alternate; animation-delay: alternate; }
.mouseScroll-arrow2 { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -webkit-animation-direction: alternate; animation-delay: .2s; animation-direction: alternate; margin-top: -6px; }
.mouseScroll-arrow3 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -webkit-animation-direction: alternate; animation-delay: .3s; animation-direction: alternate; margin-top: -6px; }
.mouseScroll-mouse { height: 42px; width: 24px; border-radius: 14px; transform: none; border: 2px solid white; top: 170px; }
.mouseScroll-wheel { height: 5px; width: 2px; display: block; margin: 5px auto; background: white; position: relative; height: 4px; width: 4px; border: 2px solid #fff; -webkit-border-radius: 8px; border-radius: 8px; }
.mouseScroll-wheel { -webkit-animation: mouse-wheel 0.6s linear infinite; -moz-animation: mouse-wheel 0.6s linear infinite; animation: mouse-wheel 0.6s linear infinite; }
@-webkit-keyframes mouse-wheel{
	0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
	100% { opacity: 0; -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); }
}
@-moz-keyframes mouse-wheel {
	0% { top: 1px; }
	25% { top: 2px; }
	50% { top: 3px;}
	75% { top: 2px;}
	100% { top: 1px;}
}
@-o-keyframes mouse-wheel {
	0% { top: 1px; }
	25% { top: 2px; }
	50% { top: 3px;}
	75% { top: 2px;}
	100% { top: 1px;}
}
@keyframes mouse-wheel {
	0% { top: 1px; }
	25% { top: 2px; }
	50% { top: 3px;}
	75% { top: 2px;}
	100% { top: 1px;}
}
@-webkit-keyframes mouse-scroll {
	0%   { opacity: 0;}
	50%  { opacity: .5;}
	100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}
@keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}

/* Checkboxes and Radios */
/* container */
.custom-checkbox-container { display: block; position: relative; padding-left: 28px; margin-bottom: 12px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* Hide the browser's default checkbox */
.custom-checkbox-container input { position: absolute; opacity: 0; cursor: pointer; }
/* Create a custom checkbox */
.custom-checkbox-container .checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; border-radius: 5px; background-color: #eee; }
/* On mouse-over, add a grey background color */
.custom-checkbox-container:hover input ~ .checkmark { background-color: #ccc; }
/* When the checkbox is checked, add a blue background */
.custom-checkbox-container input:checked ~ .checkmark { background-color: #2196F3; }
/* Create the checkmark/indicator (hidden when not checked) */
.custom-checkbox-container .checkmark:after { content: ""; position: absolute; display: none; }
/* Show the checkmark when checked */
.custom-checkbox-container input:checked ~ .checkmark:after { display: block; }
/* Style the checkmark/indicator */
.custom-checkbox-container .checkmark:after { left: 7px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* Radios */
.custom-radio-container { display: block !important; position: relative !important; padding-left: 28px !important; margin-bottom: 12px !important; cursor: pointer; font-size: 14px; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; }
/* Hide the browser's default radio button */
.custom-radio-container input { position: absolute; opacity: 0; cursor: pointer; }
/* Create a custom radio button */
.ccustom-radio-container .checkmark { position: absolute; top: 0; left: 0; height: 28px; width: 28px; background-color: #eee; border-radius: 50%; }
/* On mouse-over, add a grey background color */
.custom-radio-container:hover input ~ .checkmark { background-color: #ccc; }
/* When the radio button is checked, add a blue background */
.custom-radio-container input:checked ~ .checkmark { background-color: #2196F3; }
/* Create the indicator (the dot/circle - hidden when not checked) */
.custom-radio-container .checkmark:after { content: ""; position: absolute; display: none; }
/* Show the indicator (dot/circle) when checked */
.custom-radio-container input:checked ~ .checkmark:after { display: block; }
/* Style the indicator (dot/circle) */
.custom-radio-container .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; }
