/* #Primary
================================================== */
body.dark,
body.dark .dropdown-menu {
    color: #fff;
    background-color: #1f2029;
}

body.dark .dropdown-menu {
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
}

body.dark .navbar-light .navbar-toggler-icon:after,
body.dark .navbar-light .navbar-toggler-icon:before {
    background-color: black;
}

::selection {
	color: rgb(29, 26, 26);
	background-color: #8167a9;
}

::-moz-selection {
	color: rgb(29, 26, 26);
	background-color: #8167a9;
}

/* #Navigation
================================================== */
.navbar-light {
  background-color: black !important;
  border-bottom: 1px solid #000;
}

.navbar-text-color {
  color: white !important;
}

.dropdown-toggle-nav::after {
    display: none;
}

.text-decoration-none {
  text-decoration: none!important;
}

.icon-width { width: 2rem;}
.navbar-toggler-icon {
	color: black !important;
}

.dropdown-icon-style {
	margin-right: 0.8rem;
}

.nav-link {
	color: #212121 !important;
	font-weight: 500;
    transition: all 200ms linear;
}

.nav-item:hover .nav-link {
	color: #176ddd !important;
}

.nav-item.active .nav-link {
	color: #777 !important;
}

.dropdown-item:hover {
  	color: white;
	background-color: black !important;
}

.dropdown-item:focus {
	color: black;
	background-color: black;
}

/* #Navigation
================================================== */



/*.bg-img-so,
.bg-img-so.night {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/ECRP-Website/img/transition/TRANS1.webp');
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden;
}

    .bg-img-so.night {
        background-image: url('/ECRP-Website/img/transition/TRANS2.png');
    }
*/
input {
	-webkit-appearance: none;
	position: relative;
	width: 3.125rem;
  	height: 1.563rem;
	background-image: url(https://i.postimg.cc/857jHw2q/Screenshot-2020-04-16-at-1-07-06-PM.png);
	background-size: cover;
	border-radius: 3.125rem;
	outline: none;
	transition: background-image .90s;
	box-shadow: 0px 2px 5px 1px gray;
}
  
input:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 1.563rem;
	width: 1.563rem;
	background-color: navy;
	border-radius: 3.125rem;
	transition: all .9s;
	background-color: #F7CA33;
}

input:checked {
	background-image: url(https://i.postimg.cc/Hn0nstVK/Screenshot-2020-04-16-at-1-07-19-PM.png);
	transition: background-image .90s;
}

input:checked:before {
	transform: translate(100%);
	transition: all .9s;
	background-color: #ECF0F3;
}
/* Add comments for better organization */
/* Typography */
.ripples-color {
    color: #06cde6;
}

/* List Styling */
li::marker {
    display: none;
}

/* Navbar Link Hover Effect */
.navbar a:hover {
    text-decoration: underline;
    text-decoration-color: white;
}

/* Logo Sizing */
.ecrp-main-logo-png {
    height: 60%;
    width: 60%;
}

/* Button Styles */
.btn-outline-light.text-focus-in,
.btn-outline-light {
    overflow: hidden;
    transition: padding-right 0.3s;
}

.btn-outline-light .fa-angles-right {
    display: none;
    animation: bounce 0.5s infinite;
}

.btn-outline-light:hover .fa-angles-right {
    display: inline-block;
}

.btn-outline-light:hover {
    padding-right: 20px; /* Adjust the value as needed */
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Button Hover Effect */
.btn-outline-light.text-focus-in {
    position: relative;
    overflow: hidden;
    transition: color 0.3s, background-color 0.3s;
    z-index: 1;
}

.btn-outline-light.text-focus-in:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
    z-index: -1;
}

.btn-outline-light.text-focus-in:hover {
    color: #fff;
    background-color: #65623c;
}

.btn-outline-light.text-focus-in:hover:before {
    transform: scaleX(1);
    transform-origin: left;
}