/*--Responsive CSS--*/

/* Extra small devices (phones, <480px) */
@media screen and (max-width: 480px) {
	.login-wrapper .card.reg-card {
	    width: 350px;
	    margin: 20px 10px;
	}
	.login-wrapper .card {
	    width: 350px;
	    padding: 30px 20px;
	}
	.logo {
	    margin: 10px 0 20px;
	    text-align: center;
	}
	.card.dash-design.extn h5, .exp h3 {
	    font-size: 20px;
	}
	.main-wrapper .nav-tabs li.nav-item .nav-link {
	    font-size: 15px;
	}
	.main-wrapper .nav-tabs {
    	margin: 0 0 30px;
	}
	.footer p {
	    font-size: 14px;
	}
	ul.social-urls {
	    text-align: center;
	}
	.dash-design h5 {
	    font-size: 30px;
	    line-height: 40px;
	}
	.main-wrapper .dt-layout-cell.dt-layout-start {
	    width: 100%;
	}
	#myTabContent .card {
		margin-bottom: 0;
	}
	#myTabContent .ref-blk {
		margin-top: 20px;
	}
	.dt-paging,
	#payhistory_info {
		position: relative;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
	}

	.main-wrapper .dt-layout-cell.dt-layout-start {
		width: 100%;
	}
}

/* Small devices (phones/tablets, 481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
	.card.dash-design.extn h5, .exp h3 {
	    font-size: 16px;
	    line-height: 25px;
	}
	.card.dash-design.extn p {
	    font-size: 15px;
	}
	.main-wrapper .nav-tabs {
    	margin: 0 0 30px;
	}
	#myTabContent .col-md-3, #myTabContent .col-md-4, #myTabContent .col-md-8,  #myTabContent .col-md-10,  #myTabContent .col-md-2{
		width: 100%;
	}
	#myTabContent .card{
		margin-bottom: 0;
	}
	#myTabContent .ref-blk{
		margin-top: 20px;
	}
}

/* Medium devices (tablets/laptops, 769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	.card.dash-design.extn h5, .exp h3 {
	    font-size: 16px;
	    line-height: 25px;
	}
	.card.dash-design.extn p {
	    font-size: 15px;
	}
	.dash-design h5 {
	    font-size: 35px;
	    line-height: 55px;
	}
	ul.social-urls li {
		margin: 31px 0px 10px 0;
	}
}

/* Large devices (desktops, 1025px - 1366px) */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
	.card.dash-design.extn h5, .exp h3 {
	    font-size: 20px;
	    line-height: 30px;
	}
	.dash-design h5 {
	    font-size: 22px;
	    line-height: 35px;
	}
	.dash-design p {
	    font-size: 18px;
	}
	
}

/* Extra large devices (large desktops, 1367px and up) */
@media screen and (min-width: 1367px) {
	.card.dash-design.extn h5, 
	.exp h3 {
	    font-size: 28px;
	    line-height: 40px;
	}
	.dash-design h5 {
	    font-size: 30px;
	    line-height: 45px;
	}
	.extned h5 {
	    font-size: 22px;
	    word-break: initial;
	}
}

/* additional screens: 1600, 1536, 1440, 1366, 1280, 1024, 920, 820, 760, 640, 540, 480 */