@font-face {
	font-family: "Roboto";
	src: url('/static/fonts/Roboto/Roboto-Regular.ttf')
}

/* Standard Colors */
:root {
	--bg-color: #4c4c4c
	--bg-color-light: #939393
	--bg-color-dark: #353535
	
   	--accent-color: #a11919;
    --accent-color-light: #f04745;
    --accent-color-dark: #660000;

   	--text-color: #fafafa;
    --text-color-light: #ffffff;
    --text-color-dark: #bababa;

    --error-color: #ec363a;

	--extra-color: #6c757d;
    --bw-media-color: #9e1a1a;
}

/* General */

.pw-bn {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
}

.button-transparent  {
	background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
	/* padding-bottom: 10px; */
	width: 100%;
	height: 37px;
}

.button-transparent:focus {
	outline: none;
}

.p-style-bold {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: 20px;
}

	
.bwm-color {
	color: var(--bw-media-color);
}

.card {
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
	border-radius: 3px;
}

#icon-style {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px, rgba(0, 0, 0, 0.2) 0px 7px 13px -2px, rgba(0, 0, 0, 0.2) 0px -2px 0px inset;
	padding: 7px;
	width: 37px;
	height: 37px;
	background-color: #E9ECEF;

	/* margin-top: 5px; */
}

.user-login {

	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	padding: 20px 70px;
	
}

.btn-style {
	box-shadow: 0 0.15rem 0.35rem rgba(5,1,0,5);

}

.hr-style {
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}



/* Navbar */

.navbar-brand-min {
    width: 18vw;
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap
}

.navbar-brand-max {
    width: 23vw;
    display: inline-block;
    padding-top: auto;
    padding-bottom: auto;
    margin-right: auto;
    font-size: auto;
    line-height: inherit;
    white-space: nowrap
}

.navbar {
	font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
	
}


.navbar-dark .navbar-nav .current{
	box-shadow: 0 0.15rem 0.35rem rgba(5,1,0,5);

}



.navbar .navbar-collapse .navbar-nav a {
    display: inline;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 14px;
    width: 130px;
    text-transform: uppercase;
    transition: all 0.3s;
    color: black;
    padding: 15px;
    text-align: center;
	margin-bottom: 2px;
}

.navbar .navbar-collapse .navbar-nav a:hover {
    transition: all 0.3s ease-in-out;
    color: white;
    background-color: var(--bw-media-color);
	box-shadow: 0 0.1rem 0.1rem rgba(5,1,0,5);
}


.navbar-brand {
	max-height: 100px;
}


.navbar-dark .navbar-nav .active > .dropdown_2{
    background-color: transparent;
    color: white;
}


.navbar-brand img {
	max-height: 100px;
}

ul
{
    font-size: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 999;
}

ul li
{
    display: block;
	padding: 1px 3px;
    position: relative;
    float: left;
}

li ul
{
    display: none;
}

ul li a
{
    display: block !important;
    text-decoration: none;
    color: #ffffff;
    padding: 0;
    white-space: nowrap;
    margin:0;
    width:100% !important;
    text-align: center !important;
}

ul li a:hover
{
    background: white;
}
li:hover ul
{
    display: block;
    position: absolute;
}

li:hover li
{
    float: none;
    
}

li:hover a
{
    background: white;
}

li:hover li a:hover
{
    background: white;
    text-decoration: none;
}

.navbar-dark .navbar-nav .active > .dropdown-item{
    background-color: var(--bw-media-color);
    color: white;
}


/* .navbar-brand-min {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap
}

.navbar-brand-max {
    display: inline-block;
    padding-top: auto;
    padding-bottom: auto;
    margin-right: auto;
    font-size: auto;
    line-height: inherit;
    white-space: nowrap
} */


nav ul li .dropdown-item {
    margin: 0;
    padding: 0;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
}


.bg-color {
	background-color: #ffffff;
}

/* Login */

.float-style {
	/* padding: 5px 0px 0px 5px; */
	float: right;
}

.slash-icon {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px, rgba(0, 0, 0, 0) 0px 7px 13px -2px, rgba(0, 0, 0, 0.1) 0px -2px 0px inset;
	/* width: 90%; */
	height: 37px;

}
.placeholder-style {

	/* margin-top: 50px; */
	box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px, rgba(0, 0, 0, 0) 0px 7px 13px -2px, rgba(0, 0, 0, 0.3) 0px -2px 0px inset;
	/* height: 39px; */
	/* transform: translate(-2%, -26%); */
	border: none;
	
}



form.login input#username {
	
	background-color: #f7f7f7;
    width: 86.5%;
    outline: none;
    /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; */
	border-radius: 2px;
	/* padding: 5px; */
	/* margin: 0; */
    color: black;
	height: 37px;
	
}

form.login input#password {
    /* width: 67%; */
	background-color: #f7f7f7;
    outline: none;
    /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; */
	border-radius: 2px;
	/* padding: 5px 5px 5px 0px; */
	/* margin: 0; */
    color: black;
	height: 37px;
    width: auto;
	
}



form.login input#password::placeholder,
form.login input#username::placeholder {
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #6c757d;
	font-size: 13px;
	
}

form.login input#password:focus,
form.login input#username:focus {
    transition: ease-in-out 0.3s;
    background-color: #F7F2F1;
	color: #615C5C ; 
    border-radius: 5px;
    
}

form.login input#login_btn {
	width: 100%;
    border-radius: 2px;
    background: #6c757d;
    color: #ffffff;
    border: none;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 10px;
	margin-bottom: 7px;
	

}


form.login input#login_btn:hover {
    transition: ease-in-out 0.3s;
    border-radius: 5px;
    background-color: var(--bw-media-color);
}




/* Logout */
.logout_btn #logout_btn {

    border-radius: 2px;
    transition: ease-in-out 0.4s;
    background: #6c757d;
    color: #ffffff;
    border: none;
	margin-right: 25px;
  	padding: 10px 25px;
    width: 100%;
}

#logout_btn:hover {
    transition: ease-in-out 0.25s;
    color: #fff;
    border-radius: 5px;
    background-color: var(--bw-media-color);
}

/* superadmin */
.margin-top {
	margin: 15%;
}

#superadmin {
	padding: 25px;
}

.h1-style {
	font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
	text-align: center;
	font-weight: 500;
	margin-bottom: 25px;
	
}


.logout-superadmin {
	border-radius: 2px;
    transition: ease-in-out 0.4s;
    background: #6c757d;
    color: #ffffff;
    border: none;
	margin-right: 25px;
  	padding: 10px 25px;
    width: 100%;
}


.logout-superadmin:hover {
	background-color: var(--bw-media-color);
	transition: ease-in-out 0.3s;
    border-radius: 5px;
}

.superadmin-username {
	width: 86.5%;
	
}

.superadmin-style {
	height: 37px;
	outline: none;
}

.superadmin-button {
	width: 100%;
    border-radius: 2px;
    background: #6c757d;
    color: #ffffff;
    border: none;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 10px;
	margin-bottom: 7px;
	
}

.superadmin-button:hover {
	transition: ease-in-out 0.3s;
    border-radius: 5px;
    background-color: var(--bw-media-color);
}