/*
Remove this when PDS fixes the issue. PDS is in maintenance now though, so most likely it will never be fixed and we will have to leave this.
Fix issue (it's a PDS bug) where the left nav item text just extends and doesn't wrap
Hopefully this is temporary and PDS will fix it soon
No reason not to fix it. It's easy and it looks bad otherwise
 */
.pds-scope pds-app-nav div.pds-nav-lists.style-scope.pds-app-nav ul.pds-primary-nav-list.style-scope.pds-app-nav{
    max-width: 110px !important;
}

.pds-scope pds-app-nav .pds-nav-primary.pds-app-nav a.pds-app-nav span.pds-app-nav{
    white-space: pre-wrap !important;
}

/*
Remove this when PDS fixes the issue. PDS is in maintenance now though, so most likely it will never be fixed and we will have to leave this.
When the text wraps, if your window is too small, it will overflow on top of the next icon below. I'm betting this is caused by the same PDS issue as above.
Will revisit when that PDS issue is fixed.
 */
.pds-scope pds-app-nav .pds-nav-primary.pds-app-nav a.pds-app-nav{
    height: auto !important;
}

/*
This is so that the you can have longer titles on links when you open a menu from the pd nav. IF you have a long title, the menu will expand horizontally with the text.
Before it would just wrap the text.
 */
div.pds-scope div.pds-nav-secondary.pds-is-open.pds-nav-secondary-selected.style-scope.pds-app-nav{
    width: auto;
    min-width: 240px;
}

/*temporary fix for pds bug*/
.pds-scope .pds-detail-pro-content .pds-page-toolbar button:first-child{
    border-right: 1px solid #0066a5;
}

/*
To make sure all form fields are aligned correct horizontally relative to each other.

 */
.pds-scope .pd-admin-form-input-margin-left{
    margin-left: 15px;
}

.pds-scope .pd-admin-hide{
    display: none !important;
}

.pds-scope .pd-admin-column-basic{
    display: flex;
    flex-direction: column;
}

.pds-scope .pd-admin-column-full{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-grow: 1;
}

.pds-scope .pd-admin-no-margin-row{
    margin: 0 1.0714rem;
}

.pds-scope div.pd-admin-border{
    border-radius: 4px;
    border:1px #e0e0e0 solid;
    overflow:hidden;
}

.pds-scope div.pd-admin-margin{
    margin: 0 1.0714rem 1.0714rem;
}

.pds-scope div.pd-admin-row-border-margin{
    border-radius: 4px;
    border:1px #e0e0e0 solid;
    overflow:hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1.0714rem 1.0714rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pds-scope div.pd-admin-row-border-margin-with-overflow{
    border-radius: 4px;
    border:1px #e0e0e0 solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1.0714rem 1.0714rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pds-scope div.pd-admin-row-border{
    border-radius: 4px;
    border:1px #e0e0e0 solid;
    overflow:hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1.0714rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pds-scope div.pd-admin-row-border-with-overflow{
    border-radius: 4px;
    border:1px #e0e0e0 solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1.0714rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pds-scope div.pd-admin-row-margin{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1.0714rem 1.0714rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pds-scope div.pd-admin-row-margin-padding{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1.0714rem 1.0714rem;
    padding: 10px 10px;
}

.pds-scope div.pd-admin-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1.0714rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pds-scope div.pd-admin-row-skinny{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pds-scope div.pd-admin-col{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 1.0714rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pds-scope div.pd-admin-flex-end{
    justify-content: flex-end;
}

.pds-scope div.pd-admin-flex-start{
    justify-content: flex-start;
}

.pds-scope div.pd-admin-flex-center{
    justify-content: center;
}

.pds-scope div.pd-admin-align-start{
    align-items: start;
}

.pds-scope div.pd-admin-align-end{
    align-items: end;
}

.pds-scope div.pd-admin-align-center{
    align-items: center;
}

.pds-scope div.pd-admin-align-items-stretch{
    align-items: stretch;
}

.pds-scope .pd-admin-text-ellipsis{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

}

/*This will give an element an explicit width in px based off percentage.
Useful trick for some overflow situations*/
.pds-scope div.pd-admin-explicit-width{
    width: calc(100%);
}

.pds-scope div.pd-admin-colored-icon-row-header{
    margin-right:10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
}

.pds-scope div.pd-admin-colored-row-header{
    margin-right:10px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    border-radius: 2px;
}

.pd-admin-color-fuschia
{
    color: #9942AB;
}

.pd-admin-color-light-purple
{
    color: #ab7bea;
}

.pd-admin-color-teal
{
    color: #207991;
}

.pd-admin-color-light-green
{
    color: #90EE90;
}

.pd-admin-color-orange
{
    color: #CC4E00;
}

.pd-admin-background-fuschia
{
    background: #9942AB;
}

.pd-admin-background-light-purple
{
    background: #ab7bea;
}

.pd-admin-background-teal
{
    background: #207991;
}

.pd-admin-background-orange
{
    background: #CC4E00;
}

/*Icons*/

div.pds-pd-admin-icon-label-row {
    display: inline-flex;
    align-items: center;
}

div.pm-icon-left-text {
    margin-right: 6px;
}

/*If there's no text in a button then the icon needs to be centered in the button*/
.pds-scope pds-icon.pd-admin-button-icon-no-text{
    margin: 0;
    padding: 0;
}

.pds-scope div.pd-admin-details-form-area-header{
    font-size: 18px;
    line-height: 18px;
    padding: 18px 0;
}

/*Pd Admin dropdown menu*/

ul.pd-admin-dropdown-menu-item
{
    z-index: 9999;
    border: 1px solid #EFEFEF;
    border-radius: 5px;
    list-style-type: none;
    background: white;
    position: absolute;
    top: 100%;
    padding: 5px 10px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.349019607843137);
    white-space: nowrap;
    margin-left: 0;
    margin-right: 0;
    margin-top: 5px;
}

.pds-scope div.pd-admin-dropdown-menu-item-row{
    padding-top: 5px;
    padding-bottom: 5px;
}

ul.pd-admin-dropdown-menu-item-bottom{
    bottom: 10px !important;
    top: unset !important;
}

ul.pd-admin-dropdown-menu-item-left{
    left: auto;
    right: 0;
}

ul.pd-admin-dropdown-menu-item-right{
    left: 0;
    right: auto;
}

/*Overrides*/

/*!*override to fix checkboxes bouncing you to the top of the page*!*/
.pds-scope label.pds-checkbox-widget.pds-checkbox-input-positioning-label input.pds-checkbox-positioned-input[type=checkbox]
{
    opacity: 0;
    left: 0;
    height: 0;
    width: 0;
}

.pds-scope label.pds-checkbox-widget.pds-checkbox-input-positioning-label{
    position: relative;
}

/*override to fix radios bouncing you to the top of the page*/
.pds-scope fieldset.pds-input-radio label.pds-radio-input-positioning-label input.pds-radio-positioned-input[type=radio] {
    opacity: 0;
    left: 0;
    height: 0;
    width: 0;
}

.pds-scope fieldset.pds-input-radio label.pds-radio-input-positioning-label {
    position: relative;
}

/*override to fix offcenter checkboxes*/
.pds-scope div.pds-checkbox-widget::after{
    height: 15px !important;
    width: 15px !important;
}

.pds-scope div.pds-switch label.pds-switch-paddle.pds-switch-paddle-disabled{
    background: #e0e0e0;
    box-shadow: 0 0 0 1px #e0e0e0;
}


.pds-scope div.pd-approval-workflow-step-abbr {
    border: 1px solid #4B4B4B;
    border-radius: 50%;
    min-width: 30px;
    min-height: 30px;
    width: 35px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    color: white !important;
    background-color: #006EB2;
}

.pds-scope span.pd-column-header {
    font-weight: 650;
    font-style: normal;
    font-size: 12px;
    color: #666666;
}

.pd-admin-course-interface-icon-large > span {
    width: 40px !important;
    height: 40px !important;
}

.pds-scope div.pd-admin-filters-container select{
    padding: 0 0 0 7px;
}

.pds-scope button.pd-admin-button-white-border{
    border: 1px solid white;
}

/*
    ACCESSIBILITY CLASSES
 */

/*
    Give a focus style to the checkbox switch because it doesn't natively have one in PDS.
*/
.pds-input-switch:focus-visible + .pds-switch-paddle{
    box-shadow: 0 0 4px 2px #00f5ff !important;
}


.pds-scope th.pd-admin-invisible-table-header span, .pds-scope span.pd-admin-invisible-table-header{
    opacity: 0;
    position: absolute;
    left: -1000000px;
}

.pds-scope li.pd-admin-tabs-list-tab{
    box-sizing: border-box;
}

.pds-scope li.pd-admin-tabs-list-tab:focus{
    outline: none !important;
    border: none !important;
    box-shadow: 0px 0px 0px 1px #00f5ff inset;
}

/*Remove background gradient that gets applied to our tables from PDS. It messes up AXE*/
.pds-scope table.pm-grid-table tbody td{
    background-image: none;
}

/*
Helper class to shrink a table column to the min size of the content.
Uses a cool trick- make the column tiny and then prevent text from wrapping.
 */
.pds-scope td.shrink-to-fit-column{
    width: .1%;
    white-space: nowrap;
}

.pds-scope div.pds-datalist-contents{
    min-width: 0;
    display: inline-flex;
    margin-left: 15px;
    margin-right: 15px;
}

.pds-scope div.pd-admin-form-input div.pd-admin-row-skinny input.pds-datalist-input-enabled{
    border-right: none;
    border-top-right-radius: unset;
    border-bottom-right-radius: unset;
}

.pds-scope div.pd-admin-dropdown-typeahead-contents button.pd-widget-dropdown-typeahead-button{
    background-image: url(https://assets.powerschool.com/pds/30.0.0/img/select.svg);
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 100%;
    min-width: 30px;
    margin-left: -1px;
    padding-left: 0;
    z-index: 10;

    background-color: white;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}

.pds-scope div.pd-admin-dropdown-typeahead-contents button.pd-widget-dropdown-typeahead-button:not(:focus):not(:hover){
    border: 1px solid rgb(164, 170, 186);
    border-left: none;
}

.pds-scope div.pd-admin-dropdown-typeahead-contents button.pd-widget-dropdown-typeahead-button:focus{
    border: 1px solid rgb(0, 66, 124);
}

.pds-scope div.pd-admin-dropdown-typeahead-contents div.pds-message-error{
    margin-left: 0;
}

.pds-scope div.pd-admin-dropdown-typeahead-contents div.pd-admin-typeahead-hidden-input{
    opacity: 0; position: absolute; left: -100000px
}

/*
    Not sure why this was causing problems but it was creating double scroll bars in the edit course page.
    ui-helper-hidden-accessible is something added by jquery automatically for the autocomplete, but for some reason it was breaking the page with height: 1px;
    Auto doesn't break anything though.
 */
.pds-scope div.pd-admin-dropdown-typeahead-contents span.ui-helper-hidden-accessible{
    height: auto !important;
}

/*
    PRINT STUFF
 */

div.pd-admin-row-print{
    display: -webkit-box;
}