/* -------------  CSS Loader  ----------- */

.overlay{
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 10;
	opacity: 0.7;
}
.loader{
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border:10px solid #8caee2;
	position: relative;
	margin: 0 auto;
	top:30%;
	animation:loader 2s linear infinite;
}
@keyframes loader{
	50% {
		opacity: 0.5;
	}
	100% {
		transform:rotate(360deg);
	}
}
.loader:after{
	content: "";
    width: 35px;
    height: 35px;
    background: #8caee2;
    position: absolute;
    border-radius: 50%;
    top: -20px;
    left: 55px;
}
.loader:before{
	content: "";
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #8caee2;
    position: absolute;
    transform: rotate(-90deg);
    top: -10px;
    left: 39px;

}

/* --------- CSS Loader End Here ------------*/



body{color:#425059;
	font-family:"Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
	font-size:14px;
	font-weight:400;
	line-height:1.471
	height: 100vh;
}
.wrapper{	
	height: 100vh;
}
.myColor{
	background-image: linear-gradient(to right, #f83600 50%,#f9d423 150%);
}
.myShadow{
	box-shadow: 0 5px 10px #111;
}
.myBtn{
	border-radius: 5px;
	font-weight: bolder;
	font-size: 20px;
	background-image: linear-gradient(to right,#0acffe 0%,#495aff 100%);
	border:none;
}
.myBtn:hover{
	background-image: linear-gradient(to right, #495aff 0%, #0acffe 100%);
	
}
.myHr{
	height: 2px;
	border-radius: 	100px;
}
.myLinkBtn{
	border-radius: 5px;
	width: 	50%;
	border:2px solid #fff;	
}
@media(max-width: 720px){
	.wrapper{
		margin: 2px;
	}
}

.show-content {
	display:none;
}

.preload {
	margin:0;
	position:absolute;
	top:50%;
	left:65%;
	margin-right: -50%;
	transform:translate(-50%, -50%);
}

.mybackground {
	background-color:#001f3f;

}

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:focus,
 [class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover {
    background-color: #17a2b8;
    color: #fff;
}
/*   color variables */
$clr-primary: #18ffff;
$clr-primary-light: #adffff;
$clr-primary-dark: #091034;
$clr-gray100: #f9fbff;
$clr-gray150: #f4f6fb;
$clr-gray200: #eef1f6;
$clr-gray300: #e1e5ee;
$clr-gray400: #767b91;
$clr-gray500: #4f546c;
$clr-gray600: #2a324b;
$clr-gray700: #161d34;
$clr-bg: #060b23;

/*   border radius */
.input-group {
  position: relative;
  margin: 40px 0 20px;
}

.input {
  font-size: 14px;
  padding: 5px 5px 5px 5px;
  display: block;  
  width:300px;
  border:1px solid gray;
  border-radius: 5px;
}

.label {
  color: #999;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 5px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.input:focus ~ label,
.input:valid ~ label {
  top: -12px;
  font-size: 10px;
  color: #4285f4;
  background: white;
  left: 10px;  

}

.input-focus:focus ~input{
  border:2px solid cyan;
  border-radius: 5px;
  background-color : red;
}

.h-scrool {
  height:100%;
  overflow-y: scroll;
}
 
.w-scrool {
  width:100%;
  overflow-x: scroll;
}

/*----------------------------------------------------------------------*/

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}