/*
	Theme Name: Hello Elementor Child
    Template:   hello-elementor
	Description: Child theme of Hello Elementor for adding custom page templates
	Author: Sujal Gurung
	Author URI: https://gurungsujal.com.np/
	Version: 1.0.0
	Stable tag: 1.0.0
	Requires at least: 6.0
	Tested up to: 6.5
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/

.main {
	padding: 0 50px;
}
@media(max-width: 640px) {
	.main {
		padding: 0 20px;
	}
}
.sector {
    font-size: 1.5rem;
    text-transform: capitalize;
}
.text-center {
    text-align: center;
}
.subtitle {
    display: block;
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;
}
/* used for tables in project, courses pages */
.data-table--container {
    width: 100%;
    
    thead {
        background: var(--e-global-color-primary);
        color: var(--e-global-color-be669f9);
		border-color: var(--e-global-color-be669f9);
		position: sticky;
        top: 0;
        z-index: 5;
		
		th:first-child { width: 50px; }
		th:nth-child(2) { width: 30%; }
    }
	th, td {
		word-break: normal;
        word-break: auto-phrase !important;
    }

/*     tbody>tr:nth-child(odd) { 
        td,th {
            background-color: transparent;
        }
    } */
    tbody>tr:hover {background-color: hsla(0, 0%, 50.2%, .0705882353); }

    /*
    tbody>tr:nth-child(odd) { 
        td,th {
            background-color: white;
        }
        &:hover { background-color: hsla(0, 0%, 50.2%, .0705882353); }
    }
    tr:has(th[scope="row"]:nth-of-type(odd)) {
        td,th {
            background-color: hsla(0, 0%, 50.2%, .0705882353);
        }
    }
    */
}

.data-table--container--scrollable {
	overflow: auto;
	max-height: 60dvh;
	
	/* to make table cells sticky, 
	 * set table's container's class to "data-table--container data-table--container--scrollable",
	 * enable rowspan for the cell and wrap its text in a <span> */
	td[rowspan] {
		span, ul {
			position: sticky;
        	top: 60px;
		}
	}
}
@media (min-width: 1130px) {
	.data-table--container--scrollable {
		td[rowspan] {
		span, ul {
			top: 40px;
		}
	}
}