/* Primary Tabs */
@media only screen and (min-width: 591px) and (max-width: 760px) { .tabs nav a {padding: .3em 2em 0 2em; font-size: 1.2em;} }
@media only screen and (min-width: 451px) and (max-width: 590px) { .tabs nav a {padding: .1em 1.8em 0 1.8em; font-size: 1em;} }
@media only screen and (min-width: 50px) and (max-width: 450px) { .tabs nav a {padding: .05em 1em 0 1em; font-size: 1em;} }
/* Responsive Columns */
@media only screen and (min-width:2801px) { .responsive-column-1 { display: table-cell; } }
@media only screen and (max-width:2800px) { .responsive-column-1 { display: none; } }
@media only screen and (min-width:1801px) { .responsive-column-2 { display: table-cell; } }
@media only screen and (max-width:1800px) { 
    .responsive-column-2 { display: none; }
    [data-attendancestatus="CWA"] label.button-label { font-size: 1.1em; }
}
@media only screen and (min-width:1301px) 
{ 
	.responsive-column-3 { display: table-cell; }
	/*.search-model {
		font-size: 0.85em;
	}*/
}
@media only screen and (max-width:1300px) { .responsive-column-3 { display: none; } }
@media only screen and (min-width:941px) { .responsive-column-4 { display: table-cell; } }
@media only screen and (max-width:940px) { .responsive-column-4 { display: none; } }

/* Screen Sizes */
@media only screen and (max-width: 1600px) {
	[data-dialog-width="2"] {
		width: 50%;
	}
	.breadcrumb-single-element {
		width: 20%;
	}
	.search-model-title-header > ol > li > * > *,
	.my-column-helper-display-fields-reset span.icon-cross {
		padding: 0.1em 0.2em;
	}
	.my-column-helper-display-fields-reset {
		right: 5px;
	}
	/*.my-button {
		min-width: inherit;
	}*/
}

@media only screen and (min-width: 1602px) and (max-width: 1801px) {
	.search-model {
		font-size: 0.85em;
	}

	.my-button {
		padding: 0.3em;
	}
}

@media only screen and (min-width: 1201px) and (max-width: 1601px) {
	.search-model {
		font-size: 0.75em;
	}
	.my-button {
		padding: 0.2em;
	}
}

@media only screen and (min-width: 1001px) and (max-width: 1200px) {
	.search-model {
		font-size: 0.65em;
	}
}

@media only screen and (min-width: 860px) and (max-width: 1000px) {
	.search-model {
		font-size: 0.5em;
	}
	.my-button {
		padding: 0.1em;
	}
}

@media only screen and (max-width: 1371px) {
    .student-page-profile-picture {
        width: 80px;
    }
	[data-dialog-width="1"] {
		width: 50%;
	}
	[data-dialog-width="3"] {
		width: 80%;
	}
    .my-dropdown-model > .icon,
	.smaller-screen-hidden {
        display: none;
    }
  /*  #tabs {
        overflow: inherit;
    }	*/
	.search-model-title-header > ol > li.nestedPrimary, 
	.search-model-title-header > ol > li.nestedSecondary {
		padding-top: 0.2em;
	}
	.search-model-title-header > ol > li > * > * {
		padding: 0.2em 0.4em;
	}
    .left-menu > ul > li > a {
        font-size: 0.9em;
    }
	th, td {
		padding: 0.05em;
	}
}
@media only screen and (max-width:1200px) {
	.hide-below-1200,
	.gradebook-add-column > a:not(.icon-plus) {
		display: none !important;
	}
    .left-menu {
        width: 20%;
    }
    .responsive-button,
    .left-menu > ul > li > a {
        padding: 5px 1% 5px 9%;
    }
    #left-top-menu {
        width: 45%;
    }
    #right-top-menu {
        width: 55%;
    }

    .my-dropdown-wrapper > .my-dropdown-model-label {
        visibility: collapse;
    }
    .my-dropdown-model > span {
        padding-left: 2em;
    }
    .nav-secondary-ul  {
        right: 0px;
        min-width: 125px;
    }
}
@media only screen and (min-width: 1001px) {
    .tabs nav a {
        padding: 0 1.25em;
        font-size: 1.45em
    }
}
@media only screen and (max-width:990px) {
	#top-left-menu{
		margin-left:290px;
	}
    .responsive-button,
    .left-menu > ul > li > a {
        padding-left: 2%;
        padding-right: 2%;
        font-size: .9em;
    }
	.left-menu {
		width:17%;
	}
	.left-menu > ul{
		width:90%;
	}
	.nav-secondary-ul, .pasi-dialog {
		right:0px;
	}
}
@media only screen and (max-width:920px) {
    #right-top-menu {
        width: 50%
    }
    #left-top-menu {
        width: 50%;
    }
    .container > header > h1 {
        font-size: 1.5em;
    }
    .single-column-dynamic-wrapper {
        width: 50%;
    }
	.single-column-dynamic-form {
		width: 100%;
	}
}
@media only screen and (max-width:860px) {
    #searchbox {
        width: 270px;
    }
}

@media only screen and (min-width: 761px) and (max-width: 1000px) {
    .tabs nav a {
        padding: 0 1.2em;
        font-size: 1.1em
    }
    .left-menu > ul > li > a {
        font-size: 0.63em
    }
}

/*** tablet and phone  ***/

/* styles for screens above 760 */
@media only screen and (min-width:861px) {
	[id^="sub-section"] {
		margin-top:30px;
	}
	.has-add-menu {
		margin-top:50px;	
	}
	.tool-tip-text {
		display: inline-block;
	}
	.left-menu {
		display:block;
	}
	table {
		display:table;
        min-width: 180px;
	}
	thead {
		display:table-header-group;
	}
	tbody {
		display:table-row-group;
	}
	th {
		display:table-cell;
	}
	td {
		display:table-cell;
	}
	tr { 
		display: table-row; 
	}
	.no-td-mobile{
		display:table-cell;
	}
	.no-tr-mobile{
		display:table-row;
	}	
	.header-tr-mobile{
		display:none;
	}
	.mobile-header,
	.mastertab-sub-mobile {
		display:none;
	}
	.search-model-title-header-button {
		font-size: .8em;
		/*position: relative;
		top: 8px;*/
	}
    [data-attendancestatus="CWA"] label.button-label {
        font-size: 0.85em;
    }
	/*.search-model {
		font-size: 100%;
	}*/
}

/* styles for everything below 860 */
@media only screen and (min-width:50px) and (max-width:860px) {
	.no-mobile,
	.no-td-mobile, /* the magic - creating the left column */
	.no-tr-mobile,
	#subtabA4 th,
	thead th[scope=col],
	/*.nav-ul > li.hide-mobile,*/
	.hide-mobile,
	.left-menu,
	.student-page-profile-picture,
	.header-buttons > .my-hoverover-button,
	.search-model > table > thead > tr:nth-child(1) > th:first-child,
	.tabs nav a span,

	.student-name > .age-suffix,
	
	.mastertab-sub,
	.tool-tip-text {
		display: none;
	}
	.Student-search-model .my-button {
		display: block;
	}

	table.assessment-information > thead {
		display: none !important;
	}

	section fieldset,
	.content-no-left-menu {
		padding: 0;
		margin: 0
	}
	.checkbox label {
		max-width: 75%
	}
	
	.my-button {
		float: none;
	}
	.group .my-button {
		float: left;
	}
	.breadcrumb-single-element {
		width: 50%;
	}

	.tabs nav a:before {
		margin-right: 0;
	}
    [id^="sub-section"] {
        margin-top: 0px;
    }
	.has-add-menu {
		margin-top:0px;	
	}
	/* move around the tables */
		
	/* Force table to not be like tables anymore */
	table:not(.notresponsive),
	thead:not(.notresponsive),
	thead:not(.notresponsive) tr,
	thead:not(.notresponsive) td,
	tbody:not(.notresponsive),
	tbody:not(.notresponsive) th,
	tbody:not(.notresponsive) td,
	tbody:not(.notresponsive) tr,
	.mastertab-sub-mobile {
		display: block;
	}
	thead:not(.notresponsive) th,
	thead:not(.notresponsive) th > *,
	thead:not(.notresponsive) th > * > * {
		display: inline;
	}
	tr { 
		border: 1px solid #ccc; 
		height: inherit;
	}
	tr:nth-child(2n+1),
	tr:nth-child(2n+1):hover,
	.search-model > table:not([data-nohighlight]):not(.print-only) > tbody > tr:hover,
    .search-model > table:not([data-nohighlight]) > tbody > tr:nth-child(odd):hover,
	.large-search-model:not([data-report-mode="MasterList"]) > table > tbody > tr:nth-child(2n+1) {
		background-color: inherit !important;
	}
	tbody td {
		text-align: center
	}
	/*tbody td[data-label="Student"] {*/
		/* Behave  like a "row" */
		/*border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 38%;
		padding-bottom: 5px;
		font-size: 18px;
		text-align: center
	}*/
	tbody:not([data-HideMobileColumnHeader]) td:not([data-HideMobileColumnHeader]) {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 38%;
		padding-bottom: 5px;
		font-size: 18px;
	}
	table.ParentProgramPlan_return td {
		padding-left: inherit !important;
	}
	tbody:not([data-HideMobileColumnHeader]) td:not([data-HideMobileColumnHeader]):before { /* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		height: 0;
		padding-right: 10px;
		white-space: nowrap;
		content: attr(data-label);
	}

    .search-model-title-header-button {
        font-size: .8em;
        right: 5%;
    }

	.header-tr-mobile{
		display:table-row;
	}
	td:nth-child(odd) {
		background:#fff;
	}
	/* end responsive tables */

	#burger{
		display:inline-block;
	}
	#left-top-menu{
		width:100%;
		float:none;
		margin-top:0px;
	}
	#searchbox-container {
		margin-top:0;
		margin-left:10px;
	}
	#searchbox{
		width:350px; 
		margin:20px 20px; 
		max-width:100%;
	}
	#right-top-menu{
		display:none; 
		margin-left:90px;
		width:90%;
	}
	#right-top-menu li{
		width:20%;
	}
	#home-icon{
		position:absolute;
		right:5%;
		top:25px;
		z-index: 2;
	}
	.right-data{
		width:90%; 
		margin-left:5%;
		overflow:hidden;
	}
	.left-menu {
		width: 180px;
		position: fixed;
		left: -180px;
		top: 0px;
		background-color:#253939;height:100%;
	}
	.left-menu > ul{
		margin-top:0;
	}
	.icon-home:before {
		display:inline-block;
	}
	.nav-secondary-ul > li > a,
    .pasi-dialog > li > a {
		width:100px;
	}
	.container > header > h1,
	.container > header > h2,
	.container > header > .header-two {
		display: block;
		margin-bottom: 5px;
		padding-left: 0;
	}
	.my-dialog-inner-wrapper {
		min-width:90%;
		max-width:90%;
	}
	.my-button {
		min-width: 30px;
		padding: 0.15em;
	}
	.ListItem {
		max-width: inherit;
	}
	.mobile-width-100 {
		width: 100%;
	}
}
/* other fine tuning */
@media only screen and (min-width:50px) and (max-width:550px) {
    #searchbox {
        margin: 20px 20px;
        max-width: 70%;
    }
	#right-top-menu li{
		width:18%;
	}
    .single-column-dynamic-wrapper,
	.single-column-dynamic-form {
        width: 100%;
    }
    .login-tip {
        display: none;
    }
}
@media only screen and (min-width:50px) and (max-width:450px) {
	#searchbox{
		width:170px; 
		max-width:50%;
		margin:20px 20px 20px 30px; 
		max-width:100%;
	}
	#right-top-menu li{
		width:15%;
	}
	td {
		font-size:14px;
	}
}
@media only screen and (max-width:500px) {
	.tabs nav a {
		padding: 0.8em;
	}

    #searchbox-container {
        margin-top: 0;
        margin-left: 20px;
    }

    #searchbox {
        width: 250px;
        margin: 20px 20px;
        max-width: 60%;
    }

    #right-top-menu {
        display: none;
        margin-left: 60px;
        width: 65%;
    }

    .search-model-title-header-button {
        font-size: .3em;
    }

    #right-top-menu li {
        width: 15%;
    }
}
@media only screen and (min-width:921px)   {
    #searchbox {
		width: 340px;
	}
}

@media only screen and (max-width: 860px) {
    .flex-forty-eight {
        flex-basis: 96% !important;
    }
}