/**********************
START #service-all
***********************/
	#service-all{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#service-all td, #service-all th{width:auto;border: 1px solid #cdcdcd;padding: 8px; }
	#service-all th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#service-all table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#service-all thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #service-all tr {
      margin: 0;
    }
      
    #service-all tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#service-all td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#service-all td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#service-all td:nth-of-type(1):before { content: "Sl.No."; }
		#service-all td:nth-of-type(2):before { content: "Domain Name"; }
		#service-all td:nth-of-type(3):before { content: "Services"; }
		#service-all td:nth-of-type(4):before { content: "Status"; }
		#service-all td:nth-of-type(5):before { content: "Registered Date"; }
		#service-all td:nth-of-type(6):before { content: "Expiry Date"; }
	}
	
	
	
	
/**********************
START #billing-all
***********************/
	#billing-all{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#billing-all td, #billing-all th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#billing-all th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#billing-all table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#billing-all thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #billing-all tr {
      margin: 0;
    }
      
    #billing-all tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#billing-all td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#billing-all td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#billing-all td:nth-of-type(1):before { content: "Sl.No."; }
		#billing-all td:nth-of-type(2):before { content: "Domain Name"; }
		#billing-all td:nth-of-type(3):before { content: "Services"; }
		#billing-all td:nth-of-type(4):before { content: "Status"; }
		#billing-all td:nth-of-type(5):before { content: "Registered Date"; }
		#billing-all td:nth-of-type(6):before { content: "Expiry Date"; }
	}
	
	
/**********************
START #billing-paid
***********************/
	#billing-paid{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#billing-paid td, #billing-paid th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#billing-paid th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#billing-paid table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#billing-paid thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #billing-paid tr {
      margin: 0;
    }
      
    #billing-paid tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#billing-paid td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#billing-paid td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#billing-paid td:nth-of-type(1):before { content: "Invoice Number"; }
		#billing-paid td:nth-of-type(2):before { content: "Payment Terms"; }
		#billing-paid td:nth-of-type(3):before { content: "Bill Date"; }
		#billing-paid td:nth-of-type(4):before { content: "Due Date"; }
		#billing-paid td:nth-of-type(5):before { content: "Amount"; }
		#billing-paid td:nth-of-type(6):before { content: "Actions"; }
	}
	
	
	
/**********************
START #pending
***********************/
	#pending{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#pending td, #pending th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#pending th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#pending table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#pending thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #pending tr {
      margin: 0;
    }
      
    #pending tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#pending td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#pending td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#pending td:nth-of-type(1):before { content: "Sl.No."; }
		#pending td:nth-of-type(2):before { content: "Domain Name"; }
		#pending td:nth-of-type(3):before { content: "Service"; }
		#pending td:nth-of-type(4):before { content: "Status"; }
		#pending td:nth-of-type(5):before { content: "Expiry Date"; }
	}



/**********************
START #services
***********************/
	#services{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#services td, #services th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#services th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#services table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#services thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #services tr {
      margin: 0;
    }
      
    #services tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#services td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#services td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#services td:nth-of-type(1):before { content: "Sl.No."; }
		#services td:nth-of-type(2):before { content: "Domain Name"; }
		#services td:nth-of-type(3):before { content: "Domain Registration"; }
		#services td:nth-of-type(4):before { content: "Status"; }
		#services td:nth-of-type(5):before { content: "Registered Date"; }
		#services td:nth-of-type(6):before { content: "Expiry Date"; }
	}


/**********************
START #renew
***********************/
	#renew{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#renew td, #renew th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#renew th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#renew table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#renew thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #renew tr {
      margin: 0;
    }
      
    #renew tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#renew td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#renew td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#renew td:nth-of-type(1):before { content: ""; }
		#renew td:nth-of-type(2):before { content: "Domain"; }
		#renew td:nth-of-type(3):before { content: "Reg. Period"; }
	}


/**********************
START #search-grid
***********************/
	#search-grid{
	background:#fff;
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	margin-bottom:1em;
	}
	#search-grid td, #search-grid th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#search-grid th{
	background: #002f5e;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#search-grid table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#search-grid thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #search-grid tr {
      margin: 0;
    }
      
    #search-grid tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#search-grid td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#search-grid td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#search-grid td:nth-of-type(1):before { content: ""; }
		#search-grid td:nth-of-type(2):before { content: "Domain Name"; }
		#search-grid td:nth-of-type(3):before { content: "Status"; }
		#search-grid td:nth-of-type(4):before { content: "Subscription Period"; }
		#search-grid td:nth-of-type(5):before { content: "Price"; }
	}

/**********************
START #AddOns
***********************/
	#AddOns{
	background:#fff;
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	margin-bottom:1em;
	}
	#AddOns td, #AddOns th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#AddOns .hh{color: #000;font-size: 14px;font-family: 'montserratsemi_bold';}
	#AddOns th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}
	.t-chk{ text-align:center!important;}
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#AddOns table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#AddOns thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #AddOns tr {
      margin: 0;
    }
      
    #AddOns tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#AddOns td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#AddOns td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}
		

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#AddOns td:nth-of-type(1):before { content: "Services"; }
		#AddOns td:nth-of-type(2):before { content: "Plan"; }
		#AddOns td:nth-of-type(3):before { content: "Quantity"; }
		#AddOns td:nth-of-type(4):before { content: "Subscription Period"; }
		#AddOns td:nth-of-type(5):before { content: "Price"; }
		#AddOns td:nth-of-type(6):before { content: "Add"; }
	}




/**********************
START #Domain-Cart
***********************/
	#Domain-Cart{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#Domain-Cart td, #Domain-Cart th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#Domain-Cart th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#Domain-Cart table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#Domain-Cart thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #Domain-Cart tr {
      margin: 0;
    }
      
    #Domain-Cart tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#Domain-Cart td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#Domain-Cart td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#Domain-Cart td:nth-of-type(1):before { content: "#"; }
		#Domain-Cart td:nth-of-type(2):before { content: "Domain"; }
		#Domain-Cart td:nth-of-type(3):before { content: "Subscription Period"; }
		#Domain-Cart td:nth-of-type(4):before { content: "Price"; }
		#Domain-Cart td:nth-of-type(5):before { content: ""; }
	}




/**********************
START #Service-Cart
***********************/
	#Service-Cart{
	border-collapse: collapse;
    border: 1px solid #ccc;
    font: normal 12px 'montserratregular';
    width: 100%;
	text-align: left;
	}
	#Service-Cart td, #Service-Cart th{width:auto;border: 1px solid #cdcdcd;padding: 8px;}
	#Service-Cart th{
	background: #31a3e2;
    color: #fff;
    font-size: 14px;
    font-family: 'montserratsemi_bold';
	}

	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#Service-Cart table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#Service-Cart thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #Service-Cart tr {
      margin: 0;
    }
      
    #Service-Cart tr:nth-child(odd) {
      background: #e4e4e4;
    }
    
		#Service-Cart td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#Service-Cart td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 10px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#Service-Cart td:nth-of-type(1):before { content: "#"; }
		#Service-Cart td:nth-of-type(2):before { content: "Domain Name"; }
		#Service-Cart td:nth-of-type(3):before { content: "Services"; }
		#Service-Cart td:nth-of-type(4):before { content: "Plan"; }
		#Service-Cart td:nth-of-type(5):before { content: "Quantity"; }
		#Service-Cart td:nth-of-type(6):before { content: "Subscription Period"; }
		#Service-Cart td:nth-of-type(7):before { content: "Price"; }
		#Service-Cart td:nth-of-type(8):before { content: ""; }
	}