/************************
Bootstrap meets Databay CorporateDesign
************************/

/* ALERTS */
.alert-primary {
	color: var(--primaryText);
	background-color: var(--primary75);
	border-color: var(--primary75);
}
.alert-secondary {
	color: var(--secondaryText);
	background-color: var(--secondary75);
	border-color: var(--secondary75);
}
.alert-success {
	color: var(--successText);
	background-color: var(--success75);
	border-color: var(--success75);
}
.alert-warning {
	color: var(--warningText);
	background-color: var(--warning75);
	border-color: var(--warning75);
}
.alert-danger {
	color: var(--dangerText);
	background-color: var(--danger75);
	border-color: var(--danger75);
}
.alert-info {
	color: var(--infoText);
	background-color: var(--info75);
	border-color: var(--info75);
}

/* BADGES */
.badge-primary {
	color: var(--primaryText);
	background-color: var(--primary);
}
.badge-secondary {
	color: var(--secondaryText);
	background-color: var(--secondary);
}
.badge-success {
	color: var(--successText);
	background-color: var(--success);
}
.badge-warning {
	color: var(--warningText);
	background-color: var(--warning);
}
.badge-danger {
	color: var(--dangerText);
	background-color: var(--danger);
}
.badge-info {
	color: var(--infoText);
	background-color: var(--info);
}

/* BUTTONS */
.btn {
	border-radius: 0;
}

.btn-primary {
    color: var(--primaryText);
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary:active,
.btn-primary:hover {
    color: var(--primaryText);
    background-color: var(--primaryHover);
    border-color: var(--primary);
    box-shadow: none;
}

.btn-secondary {
    color: var(--secondaryText);
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:active:focus,
.btn-secondary:hover {
    color: var(--secondaryText);
    background-color: var(--secondaryHover);
    border-color: var(--secondary);
    box-shadow: none;
}

.btn-success {
    color: var(--successText);
    background-color: var(--success);
    border-color: var(--success);
}

.btn-success:focus,
.btn-success:active,
.btn-success:active:focus,
.btn-success:hover {
    color: var(--successText);
    background-color: var(--successHover);
    border-color: var(--success);
    box-shadow: none;
}

.btn-danger {
    color: var(--dangerText);
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-danger:focus,
.btn-danger:active,
.btn-danger:active:focus,
.btn-danger:hover {
    color: var(--dangerText);
    background-color: var(--dangerHover);
    border-color: var(--danger);
    box-shadow: none;
}

.btn-warning {
    color: var(--warningText);
    background-color: var(--warning);
    border-color: var(--warning);
}

.btn-warning:focus,
.btn-warning:active,
.btn-warning:active:focus,
.btn-warning:hover {
    color: var(--warningText);
    background-color: var(--warningHover);
    border-color: var(--warning);
    box-shadow: none;
}

.btn-info {
    color: var(--infoText);
    background-color: var(--info);
    border-color: var(--info);
}

.btn-info:focus,
.btn-info:active,
.btn-info:active:focus,
.btn-info:hover {
    color: var(--infoText);
    background-color: var(--infoHover);
    border-color: var(--info);
    box-shadow: none;
}

.btn-light {
    color: var(--darkText);
    background-color: var(--light);
    border-color: var(--light);
}

.btn-light:focus,
.btn-light:active,
.btn-light:active:focus,
.btn-light:hover {
    color: var(--darkText);
    background-color: var(--lightHover);
    border-color: var(--light);
    box-shadow: none;
}

.btn-dark {
    color: var(--lightText);
    background-color: var(--dark);
    border-color: var(--dark);
}

.btn-dark:focus,
.btn-dark:active,
.btn-dark:active:focus,
.btn-dark:hover {
    color: var(--lightText);
    background-color: var(--darkHover);
    border-color: var(--dark);
    box-shadow: none;
}

.btn-link {
    color: var(--primary);
}

.btn-link:focus,
.btn-link:active,
.btn-link:active:focus,
.btn-link:hover {
    color: var(--primaryHover);
    box-shadow: none;
}

/* BUTTONS OUTLINED */
.btn-outline-primary {
    color: var(--primary);
    background-color: transparent;
    border-color: var(--primary);
}

.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:active:focus,
.btn-outline-primary:hover {
    color: var(--primaryText);
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: none;
}

.btn-outline-secondary {
    color: var(--secondary);
    background-color: transparent;
    border-color: var(--secondary);
}

.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary:active:focus,
.btn-outline-secondary:hover {
    color: var(--secondaryText);
    background-color: var(--secondary);
    border-color: var(--secondary);
    box-shadow: none;
}

.btn-outline-success {
    color: var(--success);
    background-color: transparent;
    border-color: var(--success);
}

.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success:active:focus,
.btn-outline-success:hover {
    color: var(--successText);
    background-color: var(--success);
    border-color: var(--success);
    box-shadow: none;
}

.btn-outline-danger {
    color: var(--danger);
    background-color: transparent;
    border-color: var(--danger);
}

.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger:active:focus,
.btn-outline-danger:hover {
    color: var(--dangerText);
    background-color: var(--danger);
    border-color: var(--danger);
    box-shadow: none;
}

.btn-outline-warning {
    color: var(--warning);
    background-color: transparent;
    border-color: var(--warning);
}

.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning:active:focus,
.btn-outline-warning:hover {
    color: var(--warningText);
    background-color: var(--warning);
    border-color: var(--warning);
    box-shadow: none;
}

.btn-outline-info {
    color: var(--info);
    background-color: transparent;
    border-color: var(--info);
}

.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info:active:focus,
.btn-outline-info:hover {
    color: var(--infoText);
    background-color: var(--info);
    border-color: var(--info);
    box-shadow: none;
}

.btn-outline-light {
    color: var(--light);
    background-color: transparent;
    border-color: var(--light);
}

.btn-outline-light:focus,
.btn-outline-light:active,
.btn-outline-light:active:focus,
.btn-outline-light:hover {
    color: var(--darkText);
    background-color: var(--light);
    border-color: var(--light);
    box-shadow: none;
}

.btn-outline-dark {
    color: var(--dark);
    background-color: transparent;
    border-color: var(--dark);
}

.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark:active:focus,
.btn-outline-dark:hover {
    color: var(--lightText);
    background-color: var(--dark);
    border-color: var(--dark);
    box-shadow: none;
}

/* SCROLLBAR */
@media (min-width: 767px) {
    /* shows y scrollbar over content */
    body {
            overflow-y: overlay;
    }

    ::-webkit-scrollbar {
            width: 10px;
    }

    ::-webkit-scrollbar-track {
            background: transparent;
    }

    ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #969595;
    }

    ::-webkit-scrollbar-thumb:hover {
            background-color: #4A4A4A;
    }
}

/* TOTOP LINK */
#totop {
    position: fixed;
    bottom: 80px;
    right: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: var(--secondaryText);
    background: var(--secondary);
    border: 1px solid var(--secondary);
    cursor: pointer;
    display: none;
    z-index: 10;
    text-align: center;
    font-size: 18px;
    border-radius: 0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}

#totop:hover {
    color: var(--secondaryText);
    background-color: var(--secondaryHover);
    border-color: var(--secondaryHover);
}

/* BLOCKQUOTE */
blockquote {
    position: relative;
    text-align: center;
    width: 80%;
    padding: 1.5rem 1.5rem;
    margin: 3rem auto;
}

blockquote::before,
blockquote::after {
    font: var(--fa-font-solid);
    position: absolute;
    color: #9799a0;
    font-size: 48px;
}

blockquote:before {
    content: "\f10e";
    margin-right: -1.5rem;
    bottom: 0;
    right: 100%;
}

blockquote:after {
    content: "\f10d";
    margin-left: -1.5rem;
    left: 100%;
    top: 0;
    bottom: auto;
}


/* BORDER */
.border-primary {
	border-color: var(--primary) !important;
}
.border-secondary {
	border-color: var(--secondary) !important;
}
.border-success {
	border-color: var(--success) !important;
}
.border-warning {
	border-color: var(--warning) !important;
}
.border-danger {
	border-color: var(--danger) !important;
}
.border-info {
	border-color: var(--info) !important;
}

/* TEXT */
.text-bold {
	font-family: MainFontBold;
}
.text-italic {
	font-family: MainFontItalic;
}
.text-regular {
	font-family: MainFontRegular;
}
.text-primary {
	color: var(--primary) !important;
}
.text-secondary {
	color: var(--secondary) !important;
}
.text-success {
	color: var(--success) !important;
}
.text-warning {
	color: var(--warning) !important;
}
.text-danger {
	color: var(--danger) !important;
}
.text-info {
	color: var(--info) !important;
}
.text-text {
	color: var(--textColor) !important;
}

/* BACKGROUNDS */
.bg-primary {
	color: var(--primaryText);
	background-color: var(--primary) !important;
}
.bg-secondary {
	color: var(--secondaryText);
	background-color: var(--secondary) !important;
}
.bg-success {
	color: var(--successText);
	background-color: var(--success) !important;
}
.bg-warning {
	color: var(--warningText);
	background-color: var(--warning) !important;
}
.bg-danger {
	color: var(--dangerText);
	background-color: var(--danger) !important;
}
.bg-info {
	color: var(--infoText);
	background-color: var(--info) !important;
}

/* TABLES */
.table-primary,
.table-primary>td,
.table-primary>th {
	background-color: var(--primary25);
}
.table-primary tbody+tbody,
.table-primary td,
.table-primary th,
.table-primary thead th {
	border-color: var(--primary75);
}
.table-hover .table-primary:hover,
.table-hover .table-primary:hover>td,
.table-hover .table-primary:hover>th {
	background-color: var(--primary50);
}
.table-secondary,
.table-secondary>td,
.table-secondary>th {
	background-color: var(--secondary25);
}
.table-secondary tbody+tbody,
.table-secondary td,
.table-secondary th,
.table-secondary thead th {
	border-color: var(--secondary75);
}
.table-hover .table-secondary:hover,
.table-hover .table-secondary:hover>td,
.table-hover .table-secondary:hover>th {
	background-color: var(--secondary50);
}
.table-success,
.table-success>td,
.table-success>th {
	background-color: var(--success25);
}
.table-success tbody+tbody,
.table-success td,
.table-success th,
.table-success thead th {
	border-color: var(--success75);
}
.table-hover .table-success:hover,
.table-hover .table-success:hover>td,
.table-hover .table-success:hover>th {
	background-color: var(--success50);
}
.table-danger,
.table-danger>td,
.table-danger>th {
	background-color: var(--danger25);
}
.table-danger tbody+tbody,
.table-danger td,
.table-danger th,
.table-danger thead th {
	border-color: var(--danger75);
}
.table-hover .table-danger:hover,
.table-hover .table-danger:hover>td,
.table-hover .table-danger:hover>th {
	background-color: var(--danger50);
}
.table-warning,
.table-warning>td,
.table-warning>th {
	background-color: var(--warning25);
}
.table-warning tbody+tbody,
.table-warning td,
.table-warning th,
.table-warning thead th {
	border-color: var(--warning75);
}
.table-hover .table-warning:hover,
.table-hover .table-warning:hover>td,
.table-hover .table-warning:hover>th {
	background-color: var(--warning50);
}
.table-info,
.table-info>td,
.table-info>th {
	background-color: var(--info25);
}
.table-info tbody+tbody,
.table-info td,
.table-info th,
.table-info thead th {
	border-color: var(--info75);
}
.table-hover .table-info:hover,
.table-hover .table-info:hover>td,
.table-hover .table-info:hover>th {
	background-color: var(--info50);
}