@import url('../fonts/fonts.css');

/*font-family: 'OpenSans-Semibold';

*/

::-webkit-scrollbar{width:5px;height:5px;background:#000000;}

::-webkit-scrollbar-track{border-radius:0px}

::-webkit-scrollbar-thumb{border-radius:0px;background-color:#888888}

::-webkit-scrollbar-thumb:hover{background-color:#ff3664}

.l{box-shadow: inset 0 0 0 1px red;}

body {

	font-family: "OpenSans", Arial, sans-serif;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

	text-rendering: optimizeLegibility;

	text-shadow: none;

	font-size: 15px;

	background-color: #FAFCFF;

	color: #444444;

	min-height: 100vh;

	position: relative;

	/*padding-bottom: 80px;*/

}

.icon{

	stroke: unset;

	stroke-width: 0px;

	display: inline-block;

	width: 1em;

	height: 1em;

	fill: currentColor;

	vertical-align: -0.11em;

	transform-origin: center;

}

.icon-1x{transform:scale(1.1)}.icon-2x{transform:scale(1.2)}.icon-3x{transform:scale(1.3)}.icon-4x{transform:scale(1.4)}

.icon-5x{transform:scale(1.5)}.icon-6x{transform:scale(1.6)}.icon-7x{transform:scale(1.7)}.icon-8x{transform:scale(1.8)}

.container{width: 100%;max-width: 1230px;}

@media(min-width: 1400px){

	.container{width: 100%; max-width: 1600px;}

}



/*Login/Forgot Design*/

.login-section{

	min-height: 100vh;

  background: #1082be url(../images/login-bg.jpg);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

}

.login-logo{

	background: rgba(255, 255, 255,1);

	width: 100%;

	max-width: 250px;

	text-align: center;

}

.login-inputs{

	background-color: rgb(54 199 255 / 89%);

	min-height: 440px;

}

@media(max-width: 575px){

	.login-logo, .login-inputs{

		flex-basis: auto;

		max-width: 100%;

	}

	.login-logo img{

		height: 100px;

	}

	.login-inputs{

		padding-top: 20px;

		padding-bottom: 20px;

		min-height: 380px;

	}

}

/*End*/



header{

	position: relative;

	width: 100%;

	background-color: rgba(21,94,171,0.89);

}

.company-name{

	color: #ffffff;

	text-transform: uppercase;

	text-decoration: none;

	font-family: 'OpenSans-Semibold', Arial, sans-serif;

	font-size: 22px;

	transition: 350ms;

}

.company-name:hover{

	text-decoration: none;

	color: #000;

}

.notify-dropdown, .user-dropdown{

	display: inline-block;

	vertical-align: middle;

}

.notify-dropdown .dropdown-toggle .badge{

	position: absolute;

	top: 6px;

	right: 6px;

	font-size: 11px;

	padding: 3px 5px 4px 5px;

	font-weight: normal;

}

.notify-dropdown .dropdown-toggle,

.user-dropdown .dropdown-toggle{

	background: transparent;

	border: none;

	display: flex;

	align-items: center;

	height: 60px;

	outline: none;

}

.notify-dropdown.show .dropdown-toggle,

.user-dropdown.show .dropdown-toggle{

	background: rgba(255, 255, 255, 0.15);

}

.user-picture{

	height: 36px;

  width: 36px;

  position: relative;

  display: inline-flex;

  border-radius: 50%;

  overflow: hidden;

  border: 3px solid rgba(255, 255, 255, 0.5);

}

.user-picture img{

	width: 100%;

	height: 100%;

	display: block;

	position: absolute;

	object-fit: cover;

	object-position: center;

}

.no-caret::after{display: none;}

.progress-light{

	height: 7px;

  background-color: rgba(233,236,239,0.18);

}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{color: rgb(38, 183, 28);}

nav.navbar.navbar-expand-lg.navbar-dark{ background: rgb(241, 241, 241);}



.navbar-light{

	padding: 0;

	z-index: 100;

	position: sticky;

	top: 0;

	background: #fff;

}

@media (min-width: 768px){

	.navbar-expand-md .navbar-nav .nav-link {

    padding: 14px 0;

    margin-right: 40px;

	}

}

.navbar-light .navbar-nav .nav-link{

  color: rgba(0,0,0,.7);

}

.navbar-light .navbar-nav .active>.nav-link,

.navbar-light .navbar-nav .show>.nav-link {

  color: #ff3664;

}





.show.dropdown .dropdown-menu{

  transform-origin: 0 0!important; 

  animation: dropdown 200ms linear;

  font-size: 14px;

  margin-top: 0px;

  border: 0;

  border-top-left-radius: 0;

  border-top-right-radius: 0;

  box-shadow: 0 .55rem 1rem rgba(0,0,0,.15);

}

@keyframes dropdown{

  from{margin-top: -10px; opacity: 0.75} to{margin-top: 0px;}

}

.dropdown-item {

  display: block;

  width: 100%;

  padding: .45rem 1.2rem;

}

.dropdown-item.active, .dropdown-item:active{

  background-color: rgba(255,54,100,0.89);

}



.wrapper-section{

	padding-bottom: 80px;

	min-height: calc(100vh - 120px);

}







.table{color: inherit;}

.table thead th{

	font-family: "OpenSans-Semibold", Arial, sans-serif;

}

.table-align-middle td, .table-align-middle th{

	vertical-align: middle;

}

.table-gapy10 td, .table-gapy10 th{

	padding-top: 10px;

	padding-bottom: 10px;

}

.table-gapy10 tbody tr:hover{

	background-color: #f7f7f7

}



.btn-group-xs>.btn, .btn-xs{

  padding: .18rem .42rem;

  font-size: .80rem;

  line-height: 1.45;

  border-radius: .2rem;

  cursor: pointer;

}

.badge-xs{

	font-weight: normal;

	padding: .31rem .5rem .35rem .5rem;

	font-size: .80rem;

}

.font-10px{font-size:10px}.font-11px{font-size:11px}.font-12px{font-size:12px}.font-13px{font-size:13px}

.font-14px{font-size:14px}.font-15px{font-size:15px}.font-16px{font-size:16px}.font-17px{font-size:17px}

.font-18px{font-size:18px}

.font-20px{font-size:20px}.font-21px{font-size:21px}.font-22px{font-size:22px}



.font-semibold{font-family: "OpenSans-Semibold", Arial, sans-serif;}



.px5py1-px{padding: 1px 5px;} .px8py1-px{padding: 1px 8px;}

.px5py2-px{padding: 2px 5px;} .px8py2-px{padding: 2px 8px;}

.px-30px{padding-left: 30px; padding-right: 30px;}



.text-theme{color: #fe4c75!important}

.bg-light2{background-color: #FAFCFF!important;}

.form-control {font-size: 15px;}



.maxw-100px{max-width: 100px;}.maxw-120px{max-width: 120px;}

.maxw-130px{max-width: 130px;}.maxw-140px{max-width: 140px;}

.minh-100vh{min-height: 100vh;}

.spin-360{pointer-events:none; animation:spin 2s linear infinite;}

@keyframes spin{ from{transform: rotate(0)} to{transform: rotate(360deg)}}

.modal-backdrop.show{opacity:.85}



footer{

	width: 100%;

	position: absolute;

	left: 0;

	bottom: 0;

	background-color: #FAFCFF;

	border-top: 1px solid #dee2e6;

	height: 60px;

	font-size: 14px;

}

.navbar-light.collapse{display: block;}

.navbar-toggler {

  padding: .25rem .30rem;

  background: transparent;

  color: #ddd;

  margin-right: 15px;

  display: none;

  outline: none!important;

}

.navbar-toggler[aria-expanded="true"]{

	opacity: 0.5;

	color: #000;

}



@media(max-width: 1600px){

}

@media(max-width: 900px){

	.navbar-toggler {

		display: inline-block;

	}

	header {

    position: sticky;

    top: 0;

    z-index: 200;

    background-color: rgba(255,54,100,1);

  }

	.navbar-light{

		display: block;

		position: fixed;

		top: 60px;

		left: -250px;

		padding: 15px;

		width: 240px;

		min-height: calc(100% - 60px);

		height: calc(100% - 60px);

		overflow: hidden;

		overflow-y: auto;

		transition: 350ms;

	}

	.navbar-light.show{

		left: 0;

	}

	.navbar-expand-md .navbar-nav {

    -ms-flex-direction: column;

    flex-direction: column;

  }

  .navbar-expand-md .collapse:not(.show) {

    display: block;

  }

  .company-name{

    font-size: 18px;

  }

}

@media(max-width: 768px){

}

@media(max-width: 767px){

}

@media(max-width: 700px){

	.company-name{

    font-size: 14px;

    white-space: nowrap;

  }

}

@media(max-width: 575px){

	.company-name{display: none;}

}

@media(max-width: 450px){

	.user-dropdown .dropdown-toggle .ml-2{

		display: none;

	}

}