.responsiveGridLabel {
	display: none;
}


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

    /* background */
    #page {
        border-bottom: none !important;
    }

    /* login screens */
    #dialog {
        width: 100%;
        left: 0;
        top: 230px;
        margin-left: unset;
        height: calc(100% - 230px);
        background-color: #ffffff;
    }

    .hide-if-mobile {
        display: none;
    }

    .show-if-mobile {
        display: initial;
    }

    div.loginDialog #content {
        position: absolute;
        width: 375px;
        left: 50%;
        margin-left: -187.5px;
    }

    div.loginDialog .loginSection {
        margin-left: 0px;
        margin-right: 0px;
    }

    #dialog input.large {
        width: 15em;
    }

    #dialog #content {
        padding-bottom: 5em;
    }

    #dialog #content ul.properties label {
        width: 8em;
    }

    
    /* titleArea */          
    #page .titleArea {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
    }

    #page .titleArea .title {
        width: 100%;
    }

    #toolBar {
        position: static;
        width: 100%;

        margin-top: .4em;
        padding-top: .4em;
        padding-bottom: unset;
        padding-left: unset;
        padding-right: unset;

        overflow-x: auto;
    }

    #toolBar::-webkit-scrollbar {
        display: none;
    }

    ul.toolbar li {
        padding-left: 0em;
        padding-right: .3em;
    }
	
    /* content */
    #responsive-spacing {
        display: block;
    }

    #doc3 {
        min-width: unset;
    }

    .yui-t5 #yui-main {
        float: unset;
        margin-right: unset;
    }

    #page {
        min-width: unset;
        margin-right: 0px;
    }

  

    /* right side panel */
    .yui-t5 #yui-main .yui-b {
        margin-right: 0px;
    }

    #responsive-sidepanel-spacing {
        display: block;
    }

    div#secondaryContent {
        height: 100% !important;
        position: fixed !important;
        z-index: 1;
        top: 0 !important;
        right: -21em !important;
        overflow-x: hidden;
        transition: .5s;
    }

    div#secondaryContent.yui-b.secondaryContentOverride {
        right: -26em !important;
    }

    div#secondaryContent.open {
        right: 0em !important;
    }
    #secondaryContent.yui-b.secondaryContentOverride.open {
        right: 0em !important;
        padding-left: 0px;        
    }
    .yui-t5 .yui-b {
        float: right;
        width: 21em;
    }

    #secondaryContent #shift {
        left: 10px !important;
        margin-right: 20px !important;
    }

    .lockNavAndSidePanels #secondaryContent .panel .links {
        padding-right: 18px;
    }
    
    #responsive-sidepanel-toggle {
        display: inline-block;
        float: right;
        line-height: 1.4;
    }

    .responsive-btn:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }


    /* panel links */
    #content .panel .links.inline-mobile
    {
        position: static;
    }

    #content .panel .links.responsive {
        display: none;

        padding: 5px;
        border: solid 1px #555;
        background-color: #ffffff;
        z-index: 2000;

        transition: .5s;
    }

    #content .panel .links.responsive a {
        margin-top: 5px;
        margin-bottom: 5px;
        display: block;
    }

    .responsive-links-open {
        display: block;
        position: absolute;
        right: 0px;
        top: 8px;
        color: #E3691C;
        cursor: pointer;
    }

    /* grids */
    table.dataGrid.responsive thead {
        display: none;
    }

	table.dataGrid.responsive .responsiveGridLabel {
		display: inline-block;
		width: 10em;
		background-color: #5A84B5;
		color: #ffffff;
		margin-right: .5em;
		padding: .1em .5em .1em .5em;
	}

	#content table.dataGrid.responsive tbody tr {
		display: block;
		position: relative;
	}

	#content table.dataGrid.responsive tr td {
	    padding-left: 0;
	    padding-right: 0;
	    vertical-align: top;
	}

        #content table.dataGrid.responsive tr:not(.noborder):last-child td {
        padding-bottom: 0;
    }

    #content table.dataGrid.responsive tbody tr:not(.noborder) td {
        display: block;
        border-top: none;
        border-bottom: none;
    }

    #content table.dataGrid.responsive td.right,
    #content table.dataGrid.responsive td.actions {
        text-align: left;
    }

    #content table.dataGrid.responsive td.responsiveBlank,
    #content table.dataGrid.responsive tbody tr:not(.noborder) td.responsiveBlank {
        display: none;
    }

    #content table.dataGrid.responsive tbody tr {
        border-top: solid 1px #E0E0E0;
    }

    #content table.dataGrid.responsive {
        border-bottom: solid 1px #E0E0E0;
    }

    #content table.dataGrid.responsive tbody tr td.actions {
        position: absolute;
        right: 0px;
        top: 5px;
    }

    #content table.dataGrid tr td {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    /* miscellaneous */
    #content .pager.keepVisible.moving {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    div.pageSizeOptions {
        display: none;
    }

    
    /* alphabet bar does not fit, so just hide... */
    table.alphabetBar {
        display: none;
    }

    /* popups */
    .jqmWindow {
        width: 100% !important;
        height: calc(100% - 25px) !important;
        top: 25px !important;
        margin: 0px !important;
    }

    .jqmWindow .jqmFrameBorder {
        border: none;
    }

    .jqmClose {
        right: 30px;
    }

    /* forms */
    #content select.medium, #content input.medium, #content textarea.medium,
    #content select.large, #content input.large, #content textarea.large {
        width: 14em;
    }

    input.inputDate {
        width: 14em;
    }

    select:not(.small):not(.medium):not(.large):not(.xlarge):not(.xxlarge):not(.xxxlarge) {
        max-width: 14em;
    }

    #content select.xlarge, #content input.xlarge, #content textarea.xlarge,
    #content select.xxlarge, #content input.xxlarge, #content textarea.xxlarge,
    #content select.xxxlarge, #content input.xxxlarge, #content textarea.xxxlarge {
        width: 26em;
    }


    #content ul.properties > li {
        padding: 0.2em 0pt 0.2em 0pt;
    }

    #content ul.properties > li.responsive-widevalue .value,
    #content ul.properties.wideLabels > li.responsive-widevalue .value,
    #content ul.properties.extraWideLabels > li.responsive-widevalue .value {
        clear: both;
        padding-left: 0;
    }

    #content ul.properties > li.responsive-widevalue {
        padding: 0.2em 0pt 0.4em 0pt;
    }

    #content .panel ul.properties.wideLabels .value {
        padding-left: 10.5em;
    }

    #content .panel ul.properties.extraWideLabels .value {
        padding-left: 10.5em;
    }

    #content ul.properties span.field,
    #content div.editSchedule ul.properties label,
    #content div ul.properties.wideLabels label,
    #content div ul.properties.extraWideLabels label {
        width: 10em;
    }

    /* segmented controls */
    ul.buttonGroup {
        flex-direction: column;
        width: 14em;
    }

    ul.buttonGroup li {
        border-left: solid 1px #d3d3d3;
        border-top: none;
    }

    ul.buttonGroup > li:first-child {
        border-top: solid 1px #d3d3d3;
        border-top-right-radius: 5px;
        border-bottom-left-radius: 0px;
        border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-left-radius: 0px;
        -webkit-border-top-left-radius: 5px;
    }

    ul.buttonGroup > li:last-child {
        border-top-right-radius: 0px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        -webkit-border-top-right-radius: 0px;
        -webkit-border-bottom-left-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
    }

    /* date picker */
    #relativeDatePicker {
        max-width: 100%;
    }

    #relativeDatePicker table.container  {
        width: 100%;
    }

    #relativeDatePicker table td.container.first {
        border-right: none;
    }

    #relativeDatePicker table.container > tbody > tr > td {
        display: block;
        white-space: normal;
    }

    #relativeDatePicker table.container > tbody > tr > td ul {
        padding-left: 0px;
        list-style-type: none;
    }

    #relativeDatePicker table.container > tbody > tr > td ul > span {
        display: block;
    }

    #relativeDatePicker table.container > tbody > tr > td ul > li {
        display: inline-block;
    }

    #relativeDatePicker table.container > tbody > tr > td ul > li a::after {
        content: ", ";
    }
}

/* small phone */
@media only screen and (max-width: 550px) {

    #content select.medium, #content input.medium, #content textarea.medium,
    #content select.large, #content input.large, #content textarea.large {
        width: 100%; /*Fits according to available space*/
    }

    input.inputDate {
        width: 11.5em;
    }

    #content select.xlarge, #content input.xlarge, #content textarea.xlarge,
    #content select.xxlarge, #content input.xxlarge, #content textarea.xxlarge,
    #content select.xxxlarge, #content input.xxxlarge, #content textarea.xxxlarge {
        width: 24em;
    }

    ul.buttonGroup {
        width: 11.5em;
    }

}

@media only screen and (max-width: 360px){
    div.lookupAction {
        margin-left: -150px;
        display: flex;
        justify-content: space-between;
    }
}




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

    .yui-g .yui-u, .yui-g .div.first,
    .yui-gb .yui-u, .yui-gb div.first,
    .yui-gc .yui-u, .yui-gc div.first,
    .yui-gd .yui-u, .yui-gd div.first,
    .yui-ge .yui-u, .yui-ge div.first,
    .yui-gf .yui-u, .yui-gf div.first {
        width: 100%;
        margin-left: unset;
    }

}

/* tablet resolution */
@media only screen and (min-width: 550px) and (max-width: 780px) {

    #content select.medium, #content input.medium, #content textarea.medium,
    #content select.large, #content input.large, #content textarea.large {
        width: 25em;
    }

    input.inputDate {
        width: 11.5em;
    }

    #content select.xlarge, #content input.xlarge, #content textarea.xlarge,
    #content select.xxlarge, #content input.xxlarge, #content textarea.xxlarge,
    #content select.xxxlarge, #content input.xxxlarge, #content textarea.xxxlarge {
        width: 24em;
    }

    ul.buttonGroup {
        width: 11.5em;
    }
}
#content div.yui-u input.xxlarge {
    width: 100% !important;
}