










@media screen and (min-width: 1400px) {

	.up-cnt {
		max-width: 1296px !important;
		width: auto !important;
	}


}


@media screen and (min-width: 1200px) {


	/*
	-----------------
	Invoices
	-----------------
	*/

	.invoices-div table {
		width: 100%;
	}


}


@media screen and (min-width: 1200px) and (max-width: 1365px) {


	.up-cnt {
		max-width: 1296px;
	}

	/*
	-----------------------
	Clear Check Login
	-----------------------
	*/

	.hdr-list li a,
	.hdr-list li span {
		font-size: 14px;
	}



	/*
	-------------------
	Application Status
	-------------------
	*/

	/* .direction-r,
	.direction-1 {
		width: 47% !important;
	}

	.active-direction-r::before {
		left: -6% !important;
	}

	.direction-1::before {
		right: -10.5% !important;
	}

	.direction-r::before {
		left: -6% !important;
	} */


}




/*
====================================
large Screen - Others
====================================
*/
@media screen and (min-width: 992px) and (max-width: 1199px) {


	/*=== main area start ===*/

	.menu-area {
	    width: 275px !important;
	}

	.up-cnt {
		max-width: 960px;
	}

	.menu-item2 ul li a {
	    font-size: 13.5px;
	}

	/*=== content area start ===*/

	.content-area {
	    width: calc(100% - 275px) !important;
	    padding-left: 30px !important;
	}

	.constantin-item3 ul li {
	    margin-left: 16px;
	}

	.update-area .row {
	    --bs-gutter-x: 16px;
	}

	.update-item a {
	    min-height: 170px !important;
	}

	.update-item-inner {
	    height: 110px !important;
	    padding-bottom: 30px !important;
	}

	.update-item-inner img {
		max-width: 40% !important;
	}

	.update-item p {
	    font-size: 13px !important;
	}

	.update-item span {
	    width: 18px !important;
	    height: 18px !important;
	    top: 15px !important;
	    right: 14px !important;
	}


	/*
	--------------------
	Premium cloud
	--------------------
	*/

	.clear-bg-div {
		padding: 30px 20px !important;
		background-position: right !important;
	}
	
	.clear-bg-content h2 {
		font-size: 32px !important;
	}

	.premium-div {
		padding: 40px 40px 40px;
	}




	/*
	-----------------
	Invoices
	-----------------
	*/

	.invoices-div {
		padding: 25px;
	}

	.invoices-div h2 {
		font-size: 22px;
	}

	.invoices-div table {
		width: 100%;
	}

	.invoices-div table tr th {
		font-size: 16px;
		padding: 15px 0;
	}

	.invoices-div table tr td {
		font-size: 14px;
		padding: 25px 0 0;
	}

	.invoices-div table tr th:nth-of-type(1),
	.invoices-div table tr td:nth-of-type(1) {
    	width: 30%;
	}



	/*
	-----------------------
	Clear Check Login
	-----------------------
	*/

	.login-logo a img {
		width: 180px;
	}

	.hdr-list li a,
	.hdr-list li span {
		font-size: 13.5px;
	}

	.hdr-list li span {
		margin: 0 3px;
	}

	.cloud-btn {
		font-size: 12px;
		padding: 4px 30px 9px;
	}


	/*
	-------------------
	Application Status
	-------------------
	*/

	.lost-certificate > h2, .support_h2 {
		font-size: 34px;
	}

	/* .direction-r,
	.direction-1 {
		width: 278px !important;
	} */

	.active-direction-r::before {
		left: -6% !important;
	}

	.flag {
		font-size: 17px;
	}

	.desc {
		font-size: 12px;
		line-height: 18px;
	}

	.direction-1 p, .direction-r p {
		bottom: -30px;
	}

  
	.cloud-benefits-content .clear-cloud-content.dbs-btm a {
    width: 100%;
		font-size: 12px;
  }
	
	.disclsr-form {
		padding: 25px 30px;
	}




}

/*
====================================
Small Screen - Tablate
====================================
*/
@media screen and (min-width: 768px) and (max-width: 991px) {


	/*=== main area start ===*/

	.menu-area {
	    width: 255px !important;
	}

	.up-cnt {
		max-width: 720px;
	}

	.menu-item2 ul li a {
	    font-size: 12px !important;
	}

	/*=== content area start ===*/

	.content-area {
	    width: calc(100% - 255px) !important;
	    padding-left: 25px !important;
	}

	.constantin-area {
	    flex-direction: column;
	    align-items: start !important;
	}

	.constantin-item {
		margin-bottom: 20px;
	}

	.constantin-item3 ul li:nth-of-type(1) {
	    margin-left: 0;
	}

	.update-area .row {
	    --bs-gutter-x: 12px;
	}

	.update-item a {
	    min-height: 113px !important;
	    margin-bottom: 14px !important;
	}

	.update-item-inner {
	    height: 78px !important;
	    padding-bottom: 20px !important;
	}

	.update-item-inner img {
		max-width: 28%;
	}

	.update-item p {
	    font-size: 10px !important;
	}

	.update-item span {
	    width: 15px !important;
	    height: 15px !important;
	    top: 12px !important;
	    right: 11px !important;
	}




	/*
	--------------------
	Premium cloud
	--------------------
	*/

	.md-constantin {
		flex-direction: row;
		align-items: center;
	}
	
	.md-constantin .constantin-item {
		margin-bottom: 0;
	}

	/*====clear-bg-div====*/

	.clear-bg-div {
		padding: 30px 15px;
		text-align: center;
		background-position: left;
	}

	.clear-bg-im {
		text-align: center;
		padding: 0 0 20px;
	}

	.clear-bg-im img {
		width: auto !important;
	}

	.pdng-div-1 {
		padding: 12px 0 0;
	}

	.clear-bg-content h2 {
		font-size: 22px;
	}

	.clear-bg-content p {
		font-size: 15px;
		line-height: 1.4;
	}

	.clear-bg-content a {
		font-size: 14px;
		padding: 10px 20px;
	}


	/*====premium-div====*/

	.premium-div {
		padding: 25px 20px;
	}

	.premium-div h3 {
		font-size: 17px;
		margin: 0 0 20px;
	}

	.premium-div ul li {
		margin: 0 0 20px;
		align-items: flex-start;
	}

	.premium-div ul li img {
		margin: 5px 0 0;
	}

	.premium-div ul li span {
		font-size: 14px;
		line-height: 20px;
	}

	.pson-div {
	  	padding: 0 !important;
	  	margin: 50px 0 0;
	  	width: 100% !important;
	}

	.pson-div p {
		font-size: 12px;
		margin: 25px 0 12px;
	}



	/*
	-----------------
	Invoices
	-----------------
	*/

	.invoices-div {
		padding: 25px !important;
	}

	.invoices-div h2 {
		font-size: 20px !important;
	}

	.invoices-div .table-responsive {
		padding: 0 0 20px !important;
	}

	.invoices-div table {
		width: 450px !important;
		max-width: none;
	}

	.invoices-div table tr th {
		font-size: 14px !important;
		padding: 12px 0 !important;
	}

	.invoices-div table tr td {
		font-size: 12px !important;
		padding: 18px 0 0 !important;
	}

	.invoices-div table tr th:nth-of-type(1),
	.invoices-div table tr td:nth-of-type(1) {
    	width: 30% !important;
	}





	/*
	--------------------
	Lost Certificate
	--------------------
	*/

	.lost-certificate {
		/* padding: 30px 0 0 !important; */
	}

	.certificate-div {
		padding: 20px !important;
	}

	.lost-certificate > h2,
	.support_h2 {
		font-size: 30px !important;
	}

	.certificate-div h3 {
		font-size: 19px !important;
	}



	/*
	-----------------------
	Share Your Certificate
	-----------------------
	*/

	.share-certificate {
		padding: 30px 30px 10px;
	}

	.share-certificate h3 {
		font-size: 20px;
	}

	.share-certificate ul li p {
		line-height: 26px;
	}
	
	.document-text p {
		font-size: 14px;
	}

	.scan-btn button span {
		font-size: 13px;
	}




	/*
	-----------------------
	Support Messages
	-----------------------
	*/

	.support_h2 {
		font-size: 24px;
		margin: 0 0 10px;
	}

	.new__msg {
		margin-left: auto !important;
		margin: 0 0 20px;
	}

	.new__msg a {
		font-size: 13px;
		padding: 10px 24px;
	}

	.subject-div {
		padding: 30px 30px 0;
	}

	.inr-subject .d-flex span,
	.inr-subject p {
		font-size: 14px;
	}

	.inr-subject {
		padding: 0 0 30px;
		margin: 0 0 30px;
	}




	/*
	-----------------------
	Clear Check Login
	-----------------------
	*/

	.login-area {
		margin: 16px 0 20px;
	}

	.w-sm-0 {
		display: none;
	}

	.w-sm-show {
		display: block !important;
		padding: 15px 0;
	}

	.log__im img {
		width: 260px;
	}

	.show-hdr-list li {
		display: block !important;
	}

	.show-hdr-list li a {
		color: #FDFBFD;
		font-size: 14px;
		font-weight: 400;
		line-height: 42px;
		width: 100%;
		padding: 0 20px;
		border-radius: 10px;
		transition: 0.3s all ease-in-out; 
		margin: 0 0 5px;
	}
	
	.show-hdr-list li a:hover {
		background: rgba(255, 255, 255, 0.2);
		color: #FDFBFD;
	}

	.show-hdr-list li span {
		display: none;
	}

	.log-bg-im {
		top: 20px;
	}

	.welcome-text h2 {
  		margin: 0 0 5px;
	}

	.cloud-btn {
		position: initial;
		margin: 40px 0 0;
		border-radius: 10px;
	}


	/*
	-------------------
	Application Status
	-------------------
	*/

	.direction-r,
	.direction-1 {
		width: 100% !important;
		margin: 30px 0 !important;
	}

	.flag {
		font-size: 20px !important;
	}

	.direction-r::before {
		top: -25px !important;
		left: 50% !important;
	}

	.direction-1::before {
		bottom: calc(100% + 15px) !important;
        top: inherit !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
	}




	/*
	--------------------
	Clear-Check-Cloud
	--------------------
	*/


	/*=====clear-cloud-area====*/

	.clear-cloud-area {
		margin: 10px 0 0;
	}

	.clear-cloud-div {
		padding: 15px 20px 0;
	}

	.clear-cloud-content {
  		padding: 15px 0 25px;
	}

	.clear-cloud-content h2 {
		font-size: 22px;
	}

	.clear-cloud-content p {
		font-size: 15px;
	}

	.clear-cloud-content p br {
		display: none;
	}

	.clear-cloud-content a {
		font-size: 15px;
		padding: 10px 25px;
	}




	/*====cloud-benefits-area====*/

	..cloud-benefits-area {
		padding: 0 0 40px;
	}

	.cloud-h2-div h2 {
		font-size: 25px;
	}

	.cloud-benefits-area .row > div {
		margin: 0 0 60px !important;
	}

	.cloud-benefits-content {
		padding: 0 20px 22px;
	}

	.cloud-benefits-content img {
		width: 75px;
		margin: -40px 0 0 -15px;
	}

	.cloud-benefits-content h3 {
		font-size: 18px;
		margin: 0 0 10px;
	}

	.cloud-benefits-content p {
		font-size: 14px;
		line-height: 21px;
	}

	.cloud-benefits-area .acc {
		margin: -30px 0 0;
	}

	.cloud-benefits-area .acc__card {
		margin: 0 0 12px;
	}

	.cloud-benefits-area .acc__title {
		padding: 20px 22px;
		font-size: 18px;
	}

	.cloud-benefits-area .acc__title::after {
		top: 25px;
		right: 25px;
	}

	.cloud-benefits-area .acc__panel {
		font-size: 15px;
		line-height: 21px;
		padding: 0 22px 15px;
	}


	/*
	--------------------
	Application-Details
	--------------------
	*/


	/*=====disclosure-area====*/

	.application-form h3 {
		font-size: 20px;
	}

	.application-form p {
		font-size: 14px;
		line-height: 20px;
	}

  
  /* 	new-7 page */
	
		.cloud-benefits-content .clear-cloud-content.dbs-btm {
    width: calc(100% - 64px);
		left: 32px;
    font-size: 9px;
  }

  
	.cloud-benefits-content .clear-cloud-content.dbs-btm a {
    width: 100%;
  }







}

/*
====================================
Small Screen - Mobile
====================================
*/
@media screen and (max-width: 767px) {


	.container {
		max-width: 100%;
		padding: 0 15px;
	}	

	/*=== content area start ===*/

	.main-wrapper {
	    padding: 15px 0 40px !important;
	}

	.content-area {
	    width: 100%;
	    padding-left: 0px !important;
	}

	.constantin-area {
	    padding-top: 0px !important;
	    margin-bottom: 20px;
	}

	.constantin-item3 ul li:nth-of-type(1) {
		display: none;
	}

	.constantin-item3 ul li:nth-of-type(2) img {
		width: 30px; 
	}

	.constantin-item3 ul li:nth-of-type(3) {
		display: block !important;
	}

	.update-area .row {
	    --bs-gutter-x: 12px;
	}

	.update-item a {
	    min-height: 113px !important;
	    margin-bottom: 14px !important;
	}

	.update-item-inner {
	    height: 78px !important;
	    padding-bottom: 20px !important;
	}

	.update-item-inner img {
		max-width: 36%;
	}

	.update-item p {
	    font-size: 10px !important;
	}

	.update-item span {
	    width: 11.5px !important;
	    height: 11.5px !important;
	    top: 12px !important;
	    right: 11px !important;
	}

	.update-item3 {
	    padding: 8px 10px;
	}




	/*
	--------------------
	Premium cloud
	--------------------
	*/


	/*====clear-bg-div====*/

	.clear-bg-div {
		padding: 30px 15px;
		text-align: center;
		background-position: left;
	}

	.clear-bg-im {
		text-align: center;
		padding: 0 0 20px;
	}

	.clear-bg-im img {
		width: auto !important;
	}

	.pdng-div-1 {
		padding: 12px 0 0;
	}

	.clear-bg-content h2 {
		font-size: 22px;
	}

	.clear-bg-content p {
		font-size: 15px;
		line-height: 1.4;
	}

	.clear-bg-content a {
		font-size: 14px;
		padding: 10px 20px;
	}


	/*====premium-div====*/

	.premium-div {
		padding: 25px 20px;
	}

	.premium-div h3 {
		font-size: 17px;
		margin: 0 0 20px;
	}

	.premium-div ul li {
		margin: 0 0 20px;
		align-items: flex-start;
	}

	.premium-div ul li img {
		margin: 5px 0 0;
	}

	.premium-div ul li span {
		font-size: 14px;
		line-height: 20px;
	}

	.pson-div {
	  	padding: 0 30px;
	  	position: inherit;
	  	margin: 50px 0 0;
	  	width: 100%;
	}

	.pson-div p {
		font-size: 12px !important;
		margin: 25px 0 12px !important;
	}




	/*
	-----------------
	Invoices
	-----------------
	*/

	.invoices-div {
		padding: 25px !important;
	}

	.invoices-div h2 {
		font-size: 20px !important;
	}

	.invoices-div .table-responsive {
		padding: 0 0 20px !important;
	}

	.invoices-div table {
		width: 450px !important;
		max-width: none;
	}

	.invoices-div table tr th {
		font-size: 14px !important;
		padding: 12px 0 !important;
	}

	.invoices-div table tr td {
		font-size: 12px !important;
		padding: 18px 0 0 !important;
	}

	.invoices-div table tr th:nth-of-type(1),
	.invoices-div table tr td:nth-of-type(1) {
    	width: 30% !important;
	}




	/*
	--------------------
	Lost Certificate
	--------------------
	*/
  
	.welcome-text img {
		width: 250px;
	}
	
	.lost-certificate > h2,
	.support_h2 {
		font-size: 22px !important;
		margin: 65px 0 20px ;
		text-align: center !important;
	}

	.certificate-div {
		padding: 20px !important;
	}

	.certificate-div h3 {
		font-size: 16px !important;
	}

	.certificate-div p {
		font-size: 14px !important;
		line-height: 20px !important;
	}

	#material__form .form__field {
		font-size: 14px !important;
	}

	#material__form .form__field:placeholder-shown ~ .form__label {

		font-size: 14px !important;
		left: 10px !;
	}





	/*
	--------------
	Add Phone
	--------------
	*/

	#material__form2 .intl-tel-input.separate-dial-code .selected-dial-code {
		font-size: 12px;
	}

	#material__form2 input {
		font-size: 12px;
		padding: 9px 11px !important;
	}






	/*
	------------------
	Update Password
	------------------
	*/

	#material__form3 .input-field > label {
	  	left: 10px;
	  	font-size: 14px;
	  	top: 0px;
	}

	#material__form3 .input-field input {
	  	font-size: 14px;
	  	padding: 10px 14px;
	  	margin: 0 0 14px;
	}

	span.field-icon {
		top: 10px;
	}



	/*
	------------------
	Renewal Reminder
	------------------
	*/

	.renewal__form label {
		margin: 0 0 12px;
	}

	.renewal__form label span {
		font-size: 16px;
	}

	.renewal__form select {
	  	font-size: 14px;
	  	padding: 10px 14px;
	  	background-position: 95% 50%;
	}

	.select-div:nth-child(2) {
		margin: 20px 0 0;
	}





	/*
	-----------------------
	Share Your Certificate
	-----------------------
	*/

	.share-certificate {
		padding: 20px 20px 10px !important;
	} 

	.share-certificate h3 {
		font-size: 18px;
	}

	.share-certificate ul li p {
		font-size: 14px;
		line-height: 26px;
	}

	.scan-btn {
		display: block !important;
		margin: 25px 0 30px;
	}

	.scan-btn button {
		margin: 0 auto;
	}
	
	.scan-btn p {
		display: block !important;
		margin: 20px 0;
	}

	.document-text p {
		font-size: 14px;
	}





	/*
	-----------------------
	Support Messages
	-----------------------
	*/

	.new__msg {
		text-align: center;
		margin: 0 0 20px;
	}

	.new__msg a {
		font-size: 14px;
		padding: 10px 30px;
	}

	.subject-div {
		padding: 30px 25px;
	}

	.inr-subject .d-flex span,
	.inr-subject p {
		font-size: 14px !important;
	}

	.inr-subject{
		padding: 0 0 30px;
		margin: 0 0 30px;
	}



	/*
	-----------------------
	Verify Online Voucher
	-----------------------
	*/

	.show-code-link ul li:nth-of-type(1) a {
		margin: 0 0 20px;
	}




	/*
	-----------------------
	Clear Check Login
	-----------------------
	*/

	.login-area {
		margin: 16px 0 20px;
	}

	.w-sm-0 {
		display: none;
	}

	.w-sm-show {
		display: block !important;
		padding: 15px 0;
	}

	.log__im img {
		width: 176px;
	}

	.show-hdr-list li {
		display: block !important;
	}

	.show-hdr-list li a {
		color: #FDFBFD;
		font-size: 14px;
		font-weight: 400;
		line-height: 42px;
		width: 100%;
		padding: 0 20px;
		border-radius: 10px;
		transition: 0.3s all ease-in-out; 
		margin: 0 0 5px;
	}
	
	.show-hdr-list li a:hover {
		background: rgba(255, 255, 255, 0.2);
		color: #FDFBFD;
	}

	.show-hdr-list li span {
		display: none;
	}

	.log-bg-im {
		top: 20px;
	}

	.welcome-text h2 {
  		margin: 0 0 5px;
	}

	.cloud-btn {
		position: initial;
		margin: 40px 0 0;
		border-radius: 10px;
	}



	/*
	-------------------
	Application Status
	-------------------
	*/

	.direction-r,
	.direction-1 {
		width: 100% !important;
		margin: 30px 0;
	}

	.flag {
		font-size: 20px !important;
	}

	.direction-r::before {
		top: -25px !important;
		left: 50% !important;
	}

	.direction-1::before {
		bottom: calc(100% + 15px) !important;
        top: inherit !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
	}

	#timeline-div {
		height: auto !important;
  		overflow-y: auto !important;
	}

	.pson-div2 {
		position: fixed !important;
		bottom: 0 !important;
	}




	/*
	--------------------
	Clear-Check-Cloud
	--------------------
	*/


	/*=====clear-cloud-area====*/

	.clear-cloud-area {
		margin: 10px 0 0;
	}

	.clear-cloud-div {
		padding: 15px 20px 20px;
	}

	.clear-cloud-content {
  		padding: 15px 0 25px;
  		text-align: center;
	}

	.clear-cloud-content h2 {
		font-size: 22px;
	}

	.clear-cloud-content p {
		font-size: 15px;
	}

	.clear-cloud-content p br {
		display: none;
	}

	.clear-cloud-content a {
		font-size: 15px;
		padding: 10px 25px;
	}
	
	.cloud-benefits-content .clear-cloud-content.dbs-btm {
    width: calc(100% - 64px);
		left: 32px;
    font-size: 9px;
  }

  
	.cloud-benefits-content .clear-cloud-content.dbs-btm a {
    width: 100%;
  }




	/*====cloud-benefits-area====*/

	..cloud-benefits-area {
		padding: 0 0 40px;
	}

	.cloud-h2-div h2 {
		font-size: 25px;
	}

	.cloud-benefits-area .row > div {
		margin: 0 0 60px !important;
	}

	.cloud-benefits-content {
		padding: 0 20px 22px;
	}

	.cloud-benefits-content img {
		width: 75px;
		margin: -40px 0 0 -15px;
	}

	.cloud-benefits-content h3 {
		font-size: 18px;
		margin: 0 0 10px;
	}

	.cloud-benefits-content p {
		font-size: 14px;
		line-height: 21px;
	}

	.cloud-benefits-area .acc {
		margin: -30px 0 0;
	}

	.cloud-benefits-area .acc__card {
		margin: 0 0 12px;
	}

	.cloud-benefits-area .acc__title {
		padding: 15px;
		font-size: 16px;
	}

	.cloud-benefits-area .acc__title::after {
		top: 20px;
		right: 20px;
	}

	.cloud-benefits-area .acc__panel {
		font-size: 14px;
		line-height: 21px;
		padding: 0 15px 15px;
	}




	/*
	--------------------
	Application-Details
	--------------------
	*/


	/*=====disclosure-area====*/

	.disclosure-div {
		padding: 25px 15px 30px;
	}

	.application-form h3 {
		font-size: 18px;
	}

	.application-form p {
		font-size: 13px;
		line-height: 20px;
	}

	.application-form .group1 input,
	.application-form .group1 select {
		font-size: 11px;
		margin: 0 0 10px;
	}

	.application-form input::placeholder {
		font-size: 11px;
	}

	.application-form input#datepicker {
		padding: 9px 10px;
	}

	.application-form .group1 select {
		background-size: 10px;
	}

	.application-form .group1 label,
	.application-form .group label {
		font-size: 11px;
		left: 10px;
	}

	.application-form input:focus ~ label,
	.application-form input:valid ~ label,
	.application-form textarea:focus ~ label{
	    top: -7px;
	    font-size: 10px;
	    color: #999;
	    background: #fff;
	    padding: 0 4px;
	}

	.address-btn button {
		font-size: 12px;
		padding: 10px 25px;
	}

	.check-box-div .form-group label {
		font-size: 12px !important;
	}

	.check-box-div button[type="submit"] {
		font-size: 14px;
		padding: 10px 35px;
	}





	/*------Modal-------*/
	
	.upload-modal .modal {
	    background: rgba(0, 0, 0, 0.5);
	}

	.upload-modal .modal-content {
	  	padding: 35px 20px 35px;
	}


}



@media screen and (min-width: 576px) and (max-width: 767px) {


	.container {
		max-width: 540px;
		padding: 0 15px;
	}
	

}


@media screen and (max-width: 576px) {

	.disclsr-form {
		padding: 25px 30px;
	}
	

}

/* @media (max-width: 767px) {

	.log__im img {
		width: 260px;
	}

} */

/* @media (max-width: 480px) {

	.log__im img {
		width: 75vw
	}

} */
.inr-subject.newmsg.newmsg3 {
    margin: 0;
    padding: 0;
    border: none;
}
.inr-subject{
	padding: 0 0 30px;
	margin: 0 0 30px;
}
