input {
	background-color: hsl(180,100%,100%,0.2);
	border: 0.1px rgba(0, 14, 90, 0.15) solid;
	box-shadow:  0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
}
input:focus{
	border-color: #9ecaed;
	box-shadow: 0 0 10px #9ecaed;
}


body {
	color: rgba(0,0,0,0.5);
   -webkit-tap-highlight-color: transparent;
   scrollbar-color: rgba(0, 14, 190, 0.30) #f1f1f1 ;
  }

#centerroom{
	background: #F0F0FF;
}
#roomnameA{
	background: #FFFFF0;
}
#roomnameA:hover{
	background: #FFFFE0;
}
#roomnameB{
	background: #F0FFFF;
}


.cColor{
	background: #FFFFF0;
}
.dColor{
	background: #FFFFF0;
}
#roomnameC{
	background: #FFF0F0;
}
#roomnameC:hover{
	background: #FFE0E0;
}
#roomnameD{
	background: #FFF0FF;
}
#roomnameD:hover{
	background: #FFE0FF;
}
#button1{
	background : rgb(240, 240, 255);
}
#button2{
	background : rgb(240, 240, 255);
}
#button3{
	background : rgb(240, 255, 240);
}
#button4{
	background-color : rgb(240, 255, 240);
}
.sendicon{
	color: rgba(0, 14, 190, 0.4);
}
.notif-icon{
	color:red;
}
.online-icon{
	color:green;
}
.online{
	color:green;
}
.notifs{	
	color:red;
}


.doneicon{
	color: rgba(0, 190, 14, 0.8);
}
.buildicon{
	color: rgba(190, 14, 190, 0.6);
}
.erroricon{
	color: rgba(0, 14, 90, 0.7);
}

.inner-error{
	color: rgba(0, 14, 90, 0.5);
}

#progressbar{
	background: rgba(0, 14, 190, 0.2);
}
#thebar{
	background: rgba(0, 14, 190, 0.5);
}

.checkmark {
	background-color: rgba(0, 14, 90, 0.10);
  }
  
  /* On mouse-over, add a grey background color */
  .checkboxs:hover input ~ .checkmark {
	background-color: rgba(0, 14, 90, 0.40);
  }
  
  /* When the checkbox is checked, add a blue background */
  .checkboxs input:checked ~ .checkmark {
	background-color: rgba(0, 14, 90, 0.70);
  }

  
  /* Style the checkmark/indicator */
  .checkboxs .checkmark:after {
	border: solid rgba(240, 255, 240, 0.9);
  }
  /* Create a custom radio button */
  .radiospan {
	background-color: rgba(0, 90, 14, 0.15);
  }
  
  .radiocontainer:hover input ~ .radiospan {
	background-color: rgba(0, 90, 14, 0.45);
  }
  
  /* When the radio button is checked, add a blue background */
  .radiocontainer input:checked ~ .radiospan {
	background-color:  rgba(0, 90, 14, 0.9) solid;
  }

  
  /* Style the indicator (dot/circle) */
  .radiocontainer .radiospan:after {
	  background: rgba(0, 90, 14, 0.9);
  }

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(0, 14, 190, 0.30);
}


/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 14, 190, 0.50); 
}

.blue{
	color: rgba(0, 14, 90, 0.9);
	background: rgba(225, 225, 255, 0.9);
	border: 0.1px rgba(0, 14, 90, 0.15) solid;
}
.cyan{
	color: rgba(0, 14, 90, 0.9);
	background: rgba(225, 255, 255, 0.9);
	border: 0.1px rgba(0, 14, 90, 0.15) solid;
}
.green{
	color: rgba(0, 90, 14, 0.9);
	background: rgba(225, 255, 225, 0.9);
	border: 0.1px rgba(0, 90, 14, 0.15) solid;
}
.yellow{
	color: rgba(90, 90, 0, 0.9);
	background: rgba(255, 255, 225, 0.9);
	border: 0.1px rgba(90, 90, 90, 0.15) solid;
}
.red{
	color: rgba(90, 14, 0, 0.9);
	background: rgba(255, 225, 225, 0.9);
	border: 0.1px rgba(90, 14, 0, 0.15) solid;
}

.purple{
	color: rgba(90, 14, 90, 0.9);
	background: rgba(255, 225, 255, 0.9);
	border: 0.1px rgba(90, 14, 90, 0.15) solid;
}

input[type="password"]:disabled{
	background: rgba(0,0,0,0.07)
}
.borderSub{
	box-shadow:  0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
}


.box2 {
	color: rgba(0, 14, 90, 0.8); 
	border: 1px rgba(0, 14, 90, 0.10) solid;
	box-shadow:  0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
}

.box1 {
    background-color: #fefefe;
	box-shadow:  0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);
}

#section1 > .box1{
    color: rgba(0, 14, 90, 0.9); 
 	border: 1px rgba(0, 14, 90, 0.10) solid;
	background-color: rgba(225,225,255,0.9);
}
#section1 > .box2{
    color: rgba(0, 14, 90, 0.9); 
 	border: 1px rgba(0, 14, 90, 0.10) solid;
	background-color: rgba(225,225,255,0.9);
}
#section3 > .box1{
    color: rgba(0, 90, 14, 0.9); 
 	border: 1px rgba(0, 90, 14, 0.10) solid;
	background-color: rgba(225,255,225,0.9);
}
#section3 > .box2{
    color: rgba(0, 90, 14, 0.9); 
 	border: 1px rgba(0, 90, 14, 0.10) solid;
	background-color: rgba(225,255,225,0.9);
}

#section2 > .box1 {
    color: rgba(90, 14, 90, 0.9); 
 	border: 1px rgba(90, 14, 90, 0.10) solid;
	background-color: rgba(250,225,250,0.9);
}

#section2 > .box2 {
    color: rgba(90, 14, 90, 0.9); 
 	border: 1px rgba(90, 14, 90, 0.10) solid;
	background-color: rgba(250,225,250,0.9);
}
#section4 > .box1 {
    color: rgba(90, 90, 14, 0.9); 
 	border: 1px rgba(90, 90, 14, 0.10) solid;
	background-color: rgba(250,250,225,0.9);
}

#section4 > .box2 {
    color: rgba(90, 90, 14, 0.9); 
 	border: 1px rgba(90, 90, 14, 0.10) solid;
	background-color: rgba(250,250,225,0.9);
}

.dot {
	background-color:rgba(250, 100, 100,0.2);
}
  
.active, .dot:hover {
	background-color:rgba(250, 100, 100,0.5);
}
.prev{
	color:rgba(250, 100, 100, 0.2);
}
.next{
	color:rgba(250, 100, 100, 0.2);
}