@import url('https://fonts.googleapis.com/css?family=Roboto');

*{
	
}

#spinner
{
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: url(images/loader.gif) 50% 50% no-repeat;
}

body{
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		height: 100%;
		font-family: 'Roboto', sans-serif;
	   /* background-image: linear-gradient(126deg, #f9f081,#e3f2fd);
	    background-repeat: no-repeat;
	    background-size: cover;*/

}
.welcome{  margin: 8% 20%;}
.notification{cursor: pointer; transition: all .1s ease-in}
.notification:hover{
	font-size: 20px;
}
.form {
  position: relative;
  margin: 14% auto;
  background: #fff;
  width: 30%;	 
  padding: 40px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 780px) {
 .form{
 	width: 80%;
 	margin: 25% auto;
 }
}
.form h2 {
  margin: 0 0 20px;
  line-height: 1;
  color: #44c4e7;
  font-size: 18px;
  font-weight: 400;
}
.form input {
  outline: none;
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  color: #000;
  font-family: "Roboto";
  box-sizing: border-box;
  font-size: 14px;
  font-wieght: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: 0.2s linear;
}
.form inputinput:focus {
  color: #333;
  border: 1px solid #44c4e7;
}
.form button {
  cursor: pointer;
  background: #44c4e7;
  width: 100%;
  padding: 10px 15px;
  border: 0;
  color: #fff;
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 400;
}
.form button:hover {
  background: #369cb8;
}
.error,
.valid {
  display: none;
}
#exportbtn{ float: right; margin-bottom: 10px;}

.btnforlist{ font-size: 12px; }
.btnforlist a { margin-left: 15px; }

.dropdown > button{ float: right; margin-bottom: 10px; margin-left: 5px;}

.reco-menu{ background-color: #990a0b; color: #fff; padding: 10px; border-radius: 5px; text-decoration: none;}
.reco-menu:hover{ text-decoration: none; color: #fff !important; background-color: #bd0d0e; }
.logout{ cursor: pointer; float: right; }
.subheading{ font-size: 16px; display: inline-block; margin: 10px auto;}
.header{ height: 40px; padding: 50px auto;  border-bottom: 1px solid #000; }
.dropdown{ margin-top: 10px !important; }
#customer_table{ font-size: 12px !important; width: 100% !important; border-collapse: collapse;}
#customer_table table th { background-color: #990a0b !important; }

#customer_table td, #customer_table th {
    border: 1px solid #ddd;
    padding: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#customer_table tr:nth-child(even){background-color: #f2f2f2;}

#customer_table tr:hover {background-color: #f3f3f3;}

#customer_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #990a0b;
    color: white;
    font-weight: normal;
}

#customer_table th:nth-child(2){
	width: 20% !important;
}
#notification_table{ font-size: 12px !important; width: 100% !important; border-collapse: collapse;}
#notification_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #990a0b;
    color: white;
    font-weight: normal;
}
#fail_notification_table{ font-size: 12px !important; width: 100% !important; border-collapse: collapse;}
#fail_notification_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #990a0b;
    color: white;
    font-weight: normal;
}
#package1_notification_table{ font-size: 12px !important; width: 100% !important; border-collapse: collapse;}
#package1_notification_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #990a0b;
    color: white;
    font-weight: normal;
}
#package2_notification_table{ font-size: 12px !important; width: 100% !important; border-collapse: collapse;}
#package2_notification_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #990a0b;
    color: white;
    font-weight: normal;
}
#package3_notification_table{ font-size: 12px !important; width: 100% !important; border-collapse: collapse;}
#package3_notification_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #990a0b;
    color: white;
    font-weight: normal;
}
#trial_notification_table{ font-size: 12px !important; width: 100% !important; border-collapse: collapse;}
#trial_notification_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #990a0b;
    color: white;
    font-weight: normal;
}

#trial_expire_notification_table{ font-size: 12px !important; width: 100% !important; border-collapse: collapse;}
#trial_expire_notification_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #990a0b;
    color: white;
    font-weight: normal;
}


table.dataTable thead .sorting{ background-image: none !important; }
table.dataTable thead .sorting_asc{ background-image: none !important; }
table.dataTable thead .sorting_desc{ background-image: none !important; }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{ font-size: 12px !important; }

.search-box {  }
.search-box >label{ font-size: 12px; }
#fromdate, #todate{	margin-left: 25px;	border-radius: 5px;	border: 1px solid #990a0b; }
#fromdate:focus, #todate:focus{ border: 1px solid green; }
.search{ background-color: #990a0b; color: #fff; padding: unset; text-decoration: none; padding: 0px 5px ;}

#footer{height: auto; background: #111111; bottom:0; position: fixed; width: 100%;  padding: 5px; color: #fff; text-align: center;}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}