/* 
    This file is used to hold any non-conforming CSS. The original intent of this file is acknowledging “this code 
    is poor quality or hacky, but I don’t know another way to do it”. Not always is it a matter of negligence… 
    sometimes the only solution is a hacky one. We want to manage these separately from more standardized CSS.  
    A few examples are: 
    •	Browser-specific hacks or workarounds due to browser vendor implementations being wrong or inconsistent, 
        making best practices impossible to enforce. 
    •	Temporary CSS for scenarios when our AmplifyUI library isn’t sufficient in handling an unrealized use case 
        and is creating an impediment for development. Developers should use class selectors in these scenarios always. 
        This way we provide a good developer experience with an approach that is familiar and the class selector 
        becomes a method for technical debt flagging. 
*/

div[ui-type="button-group"] {
    display: flex;
    width: 100%;
    margin-top: 2em;
}
div[ui-type="button-group"] ui-button:first-child {
    margin-right: 1em;
}
compose img {
    width: 100%;
}
[layout="operations"] nav { 
    /* hacky because of how nav has to be 
    brought inside the route for operations */
    --default-nav-width: 100%;
    --default-nav-height: 3.5em;
}
[ui-type="aside-cover"] {
    background: var(--color-1-dark);
    color: white;
    position: absolute;
    top: 10em;
    width: 20em;
    height: calc(100% - 7em);
    --default-a-color: white;
    --default-ul-margin: 1em 0 0;
    --default-li-display: list-item;
    --default-li-font-size: 1.25em;
    --default-li-padding: 0.5em 1.5em;
}
draggables {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
draggable {
    flex: 0;
    padding: 1em;
    flex: 0 0 37%;
    min-height: 6em;
    border: 2px solid var(--color-1-lighter);
    border-radius: 3px;
    font-size: 0.75em;
    text-transform: uppercase;
    display: -webkit-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 0 0.85em;
}
multi-step-view-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 2em;
}

[ui-type="step-menu"] {
    text-align: center;
}

[ui-type="step-menu"] h2 {
    font-size: 3em;
    width: 100%;
    display: block;
}

multi-step-view-menu ul {
    font-size: 1.7em;
    font-weight: bold;
    display: block;
    margin-left: 1em;
}

multi-step-view-menu li {
    display: block;
    text-align: left;
    margin-top: 10px;
}

[ui-type="step-body"] strong.message {
    font-size:1.7em;
    display: block;
    text-align: center;
}

[ui-type="step-body"] strong.tons-of-padding {
    padding: 5em 0;
}

[ui-type="step-body"] h3 {
    font-size: 3em;
    color: rgb(137, 144, 152);
    text-align: center;
    width: 100%;
    display: block;
    padding: 15px 0;
}

[ui-type="step-body"] charities-list li {
    display: block;
    margin-top: 10px;
}

[ui-type="step-body"] charities-list li charity-select {
    grid-area: charity-select;
}

[ui-type="step-body"] charities-list li charity-name {
    grid-area: charity-name;
    font-weight: bold;
    font-size: 1.2em;
}

[ui-type="step-body"] charities-list li charity-address {
    grid-area: charity-address;
}

[ui-type="step-body"] charities-list li label {
    display: grid;
    grid-template-columns: 2em auto;
    grid-template-areas: 
    "charity-select charity-name"
    "charity-select charity-address";
}

[ui-type="step-body"] .charity-actions button {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 15px;
}

au-data-grid {
  width: 100%;
}

loading-animation {
  z-index: 10;
}

h3[uid="oauth-client-list-no-records"] {
  margin: 45px 0;
  width: 100%;
  font-size: 3em;
  text-align: center;
}

div[name="OauthSteps.Create"],
div[name="OauthSteps.Display"],
div[name="OauthSteps.Confirm"] {
    display: flex;
    justify-content: flex-end;
}

ux-dialog-body #clientId {
    margin-bottom: 2em;
}

ux-dialog h1 {
    font-size: 19px;
    padding: 0px;
}

amp-input-error {
    color: red;
}

ux-dialog-footer {
    padding: 6px 16px!important;
}

ux-dialog[uid='create-oauth'] {
    height: 25em !important;
    width: 40em !important;
    display: flex;
    flex-direction: column;
}

ux-dialog[uid='create-oauth'] ux-dialog-header,
ux-dialog[uid='create-oauth'] ux-dialog-footer {
    flex: 0 0 auto;
}

ux-dialog[uid='create-oauth'] ux-dialog-body {
    flex: 1 1 auto;
}

/* Needed for IE */
ux-dialog[uid='create-oauth'] amp-input {
    width:100%;
}

/* fixes for edge */
amp-datalist datalist-item a,
[ui-menu] li amp-datalist datalist-item a {
    color: #767676;
    text-decoration: none;
    display: block;
}

amp-datalist datalist-item:hover a,
amp-datalist datalist-item a:hover {
    color: #323232;
}

amp-datalist datalist-item {
    padding: 0.75em 1.5em;
}

amp-datalist datalist-item:hover {
    background: #aaa;
    color: #323232;
}

amp-date-filter div button[ui-type="datefilter-button"] {
    border-radius: 0 !important;
    margin: -30px -21px -14px -21px;
    text-align: left;
}

amp-date-filter div ul[ui-type="filterDropdown"] li a {
    color: rgb(71, 78, 88);
}

amp-date-filter div ul[ui-type="filterDropdown"] li a:hover {
    width: 100%;
    padding: 1em 1.5em;
    color: rgb(71, 78, 88);
}

amp-date-filter div ul[ui-type="filterDropdown"] li a[ui-state="selected"]:hover {
    color: #ffffff;
}

amp-datepicker ui-calendar ul[ui-type='years-list'] li,
amp-datepicker ui-calendar ul[ui-type='months-list'] li {
    display:flex;
    align-items: center;
    justify-content: center;
}

amp-input.amp-datepicker {
    z-index: auto !important;
    box-shadow: none;
}

amp-date-filter button[ui-type='datefilter-button'] {
    margin-left: -1.5em !important;
    margin-bottom: 0em !important;
    border-radius: 0em !important;
}

amp-page {
    page-width: 100%;
    width: 100%;
}

ux-dialog {
    width: auto !important;
}
/* end fixes for edge */

amp-datepicker.datepicker-grouped {
    --input-container-border-radius: 0em 0.25em 0.25em 0em;
}