html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, nav ul, blockquote, q, blockquote:before, blockquote:after, q:before, q:after, a, ins, mark, del, abbr[title], dfn[title], table, hr, input, select, ul, ol {
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    -ms-tap-highlight-color: transparent;
    -o-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-focus-ring-color: transparent;
    -moz-focus-ring-color: transparent;
    -ms-focus-ring-color: transparent;
    -o-focus-ring-color: transparent;
    focus-ring-color: transparent;
}

textarea, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
}

@media only screen and (max-width : 1200px){
	.wrapper{min-width: 100%;}
}
@media only screen and (max-width : 850px){
	.well{
		width: 100%;
		padding: 20px;
	}
	.upload-area-holder .file-list .each-file{padding: 10px;}
	.upload-area-holder .file-list .file-action{margin-left: 10px;}
	.dash-main{
		display: -webkit-flex;
	    display: -moz-flex;
	    display: -ms-flex;
	    display: -o-flex;
	    display: flex;
	    -ms-align-items: center;
	    align-items: center;
	}
	.dash-main ul.dash-list{
		height: auto;
		padding: 40px 20px;
		width: 100%;
		-ms-align-items: flex-start;
    	align-items: flex-start;
	}
	.dash-main ul.dash-list li:nth-child(2n){margin-right: 0;}
	.each-row.grid-04 .each-col{
		margin-right: 20px;
		width: calc(33.333333333% - 20px);
	}
	.each-row.grid-04 .each-col:nth-child(3n){margin-right: 0;}
	.each-row.grid-04 .each-col:nth-child(4n){margin-right: 20px;}
	#header nav ul.main-nav{overflow: auto;}
	#header nav ul.main-nav li a{
		padding: 10px 20px;
		white-space: nowrap;
	}
	#header nav ul.main-nav{
		display: -webkit-flex;
	    display: -moz-flex;
	    display: -ms-flex;
	    display: -o-flex;
	    display: flex;
	}
	.each-row.grid-01 .each-col{
		width: 100%;
		margin-right: 0;
	}

	/* Login */
	#login .login-left{display: none;}
	#login .login-right{width: 100%;}
	/* END Login */

 /* Phase 3 CSS */
    .each-row.grid-05 .each-col {
        margin-right: 20px;
        width: calc(33.333333333% - 20px);
    }

    .each-row.grid-05 .each-col:nth-child(3n) {
        margin-right: 0;
    }

    .each-row.grid-05 .each-col:nth-child(5n) {
        margin-right: 20px;
    }

    .dash-main ul.csp-user.dash-list li:last-child {
        margin-right: 0;
    }

    .dash-main ul.last-child-marg.dash-list li:last-child {
        margin-right: 0;
    }

    .each-row.grid-3 .each-col {
        width: calc(52% - 30px);
        margin-right: 0;
    }

    .filter-row .button-col~.input-col {
        display: none;
    }

    #header .header-right .btn-notification {
        padding: 18px 4px;
    }

    /* EndPhase 3 CSS */


    /* 03-05-2024 */
    .primary-tabs .primary-tabs-buttons {
		width: calc(100vw - 40px);
        overflow: auto;
        padding-bottom: 10px;
        justify-content: flex-start;
        margin-bottom: 20px;
    }

    /* END 03-05-2024 */

    
}
@media only screen and (max-width : 640px){
	#header .header-left h1 a{padding: 3px 10px 4px 10px;}
	#header .header-right .profile-holder{
		margin-right: 20px;
    	margin-left: 0;
	}

	.dash-main ul.dash-list li{
		margin: 0 20px 20px 0;
		width: calc(50% - 10px);
		display: -webkit-flex;
	    display: -moz-flex;
	    display: -ms-flex;
	    display: -o-flex;
	    display: flex;
	}
	.dash-main ul.dash-list li a{
		width: 100%;
		height: auto;
		-webkit-flex: 1;
	    -moz-flex: 1;
	    -ms-flex: 1;
	    -o-flex: 1;
	    flex: 1;
	}
	#footer{
		-webkit-flex-direction: column-reverse;
	    -moz-flex-direction: column-reverse;
	    -ms-flex-direction: column-reverse;
	    -o-flex-direction: column-reverse;
	    flex-direction: column-reverse;
	}
	#container.dash-holder{height: calc(100vh - 104px);}

	#login .login-right .copyright{padding: 10px 0;}
	#footer > p,
	#login .login-right .copyright,
	#footer .last-date .date-time{
		text-align: center;
		font-size: 10px;
		line-height: 14px;
	}
	#footer .last-date{margin-bottom: 5px;}
	.dash-main ul.dash-list li a .text-holder{
		font-size: 16px;
		line-height: 20px;
		-webkit-flex: 1;
	    -moz-flex: 1;
	    -ms-flex: 1;
	    -o-flex: 1;
	    flex: 1;
	}
	.dash-main ul.dash-list li a .icon-holder{
		width: 60px;
		height: 60px;
		margin-bottom: 20px;
	}
	.dash-main ul.dash-list li a .icon-holder img{
		width: 50%;
	}
	.table-holder{
    	width: calc(100vw - 40px);
		overflow: auto;
	}
	.primary-table{min-width: 1000px;}
	.yellow-sec{
		-webkit-flex-direction: column;
	    -moz-flex-direction: column;
	    -ms-flex-direction: column;
	    -o-flex-direction: column;
	    flex-direction: column;
	    margin-bottom: 20px;
	}
	.yellow-sec .primary-button{
		width: 100%;
		margin: 10px 0 0 0;
	}
	.yellow-sec .each-col,
	.yellow-sec .primary-input{
		width: 100%;
	}
	.top-info-holder{padding: 15px;}
	.top-info-holder ul.top-info-list li{
		margin-right: 20px;
		width: calc(50% - 10px);
	}
	.top-info-holder ul.top-info-list li:nth-child(2n){margin-right: 0;}

	.confirmation-popup{
		min-width: auto;
		width: 90%;
	}
	.confirmation-popup .confirmation-cnt{
		-webkit-flex-direction: column;
	    -moz-flex-direction: column;
	    -ms-flex-direction: column;
	    -o-flex-direction: column;
	    flex-direction: column;
	}
	.confirmation-popup .confirmation-cnt .info-icon{width: 100%;}
	.confirmation-popup .confirmation-cnt .info-msg{
		text-align: center;
		padding: 15px;
	}
	.confirmation-popup .confirmation-cnt .info-action{padding: 15px;}
	.confirmation-popup .confirmation-cnt .info-action .secondary-button,
	.confirmation-popup .confirmation-cnt .info-action .primary-button{
		width: auto;
		padding: 10px 50px;
	}
	.each-row.grid-04 .each-col,
	.each-row.grid-04 .each-col:nth-child(4n){
		width: 100%;
		margin-right: 0;
	}
	.upload-area-holder .file-list .purpose-list{
		-webkit-flex-direction: column;
	    -moz-flex-direction: column;
	    -ms-flex-direction: column;
	    -o-flex-direction: column;
	    flex-direction: column;
	}
	ul.breakcrump-list li a{font-size: 12px;}
	ul.breakcrump-list li{font-size: 14px;}
	ul.breakcrump-list li:last-child{margin: 0;}

	.filter-row{
		-webkit-flex-direction: column;
	    -moz-flex-direction: column;
	    -ms-flex-direction: column;
	    -o-flex-direction: column;
	    flex-direction: column;
	}
	.filter-row .input-col{margin-right: 0;}
	.filter-row .input-col{margin-top: 20px;}
	.filter-row .input-col:first-child{margin-top: 0;}
	.filter-row .button-col ~ .input-col{display: none;}

	.upload-area-holder .upload-area .upload-link-area{
		-webkit-flex-direction: column;
	    -moz-flex-direction: column;
	    -ms-flex-direction: column;
	    -o-flex-direction: column;
	    flex-direction: column;
	}
	.upload-area-holder .upload-area .upload-link-area .primary-input{
		width: 100%;
		margin: 0;
	}

	.popup-main .zoom-main{width: 100%;}
	
	#login .login-right .login-form-holder{width: 90%;}
	#login .login-right .mtl-logo{padding: 30px 0;}

	
	.top-info-holder ul.top-info-list.payee-list li:first-child{width: 100%;}

	.each-section.back-holder.button-section{
		-webkit-flex-wrap: wrap;
	    -moz-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	    -o-flex-wrap: wrap;
	    flex-wrap: wrap;
	}
	.each-section.back-holder.button-section > *{
		width: calc(50% - 24px);
	}
	.each-section.back-holder.button-section .primary-button{
		width: 100%;
    	margin-top: 20px;
	}
	.filter-btn .primary-button{
		margin: 0;
		width: 100%;
	}

	/* Phase 3  CSS */
	.each-row.grid-05 .each-col{
		width: 100%;
		margin-right: 0;
	}
	.each-row.grid-05 .each-col:nth-child(5n){
		margin-right: 0;
	}
	.table-holder .table-header h2{
		text-align: left;
		font-size: 20px;
	}
	.secondary-header span{
		font: 12px/14px "Source Sans Pro", sans-serif;
		float: left;
		margin-top: 7px;
	}
	.dash-main ul.dash-list{padding: 0;}
	.dash-main{
		margin: 40px 20px;
		-ms-align-items: flex-start;
		align-items: flex-start;
		display: block;
	}
	.each-row.grid-3 .each-col{
		width:100%;
		margin-right: 0;
	}
	#header .header-right .btn-notification{padding: 18px 4px;}
	/* End phase 3 */

	/* 20-05-2024 */
	.noti-list-holder{
		left: -30vw;
		width: 90vw;
	}
	/* END 20-05-2024 */


	/* 11-09-2024 */
	.info-list{
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.info-list li{
		margin-right: 20px;
		margin-bottom: 20px;
		width: calc(50% - 10px);
	}
	.info-list li:nth-child(2n){margin-right: 0;}
	.info-list li:last-child{margin-bottom: 0;}
	/* END 11-09-2024 */


	/* 20-03-2025 */
	.tbl-filter-input input.primary-input{min-width: 110px;}
	.tbl-filter-input input{min-width: 100px;}
	.tbl-filter-select select{min-width: 100px;}
	.tbl-filter-input .sub-btn {
		padding: 5px 10px;
	}
	.btn-notification-holder{margin-right: 20px;}
	.button-section > *{margin: 0 5px;}
	.button-section{margin-top: 20px;}

	.each-row.grid-02 .each-col{
		margin-right: 0;
		width: 100%;
	}
	.popup-main{width: 95%;}
	.popup-table-holder{
		overflow: auto;
	}
	.popup-main .popup-cnt .popup-table{min-width: 1200px;}
	.dash-heading{margin-bottom: 40px;}

	.download-buttons{
		-webkit-flex-direction: column;
	    -moz-flex-direction: column;
	    -ms-flex-direction: column;
	    -o-flex-direction: column;
	    flex-direction: column;
	}
	.download-buttons > *{margin-bottom: 10px;}
	/* END 20-03-2025 */

    
}