/* Top level container */
#idpSelectIdPSelector
{
    width: 480px;
    text-align: left;
    background-color: #FFFFFF;
    border: 1px #98a2b3 solid;
    padding: 12px;
    margin: 0 auto;
    border-radius: 16px;
    margin-top: 40px;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

html.dark #idpSelectIdPSelector {
    background-color: #191c24;
    border: 1px solid #394056;
}

/* Continue buttons */
#idpSelectSelectButton, #idpSelectListButton
{
    cursor: pointer;
    margin-left: 8px;
    padding-left: 8px;
    padding-right: 8px;
    color: white;
    font-weight: 600;
    border-radius: 6px;
    background-color: #088AB2;
    width: 82px;
    height: 24px;
    line-height: 22px;
}

html.dark #idpSelectSelectButton, html.dark #idpSelectListButton {
    background-color: #0E7090;
}

/* Input and Dropdown button */

#idpSelectInput, #idpSelectSelector
{
    width: calc(100% - 90px);
    height: 25px;
    border: 1px solid #d0d5dd;
    padding-left: 8px;
    padding-right: 4px;
    border-radius: 6px;
    color: #344054;
}

html.dark #idpSelectInput {
    background-color: #313749;
    border-color: #414962;
    color: white;
}

#idpSelectInput:focus {
    outline: 2px solid #088AB2;
}

/* Button to switch between Input and Dropdown */

a.IdPSelectDropDownToggle
{
    margin-top: 8px;
    font-size: .9rem;
    display: inline-block;
    width: 80%;
    color: #088AB2;
    font-weight: 600;
}

html.dark a.IdPSelectDropDownToggle {
    color: #22ccee;
}

/* Help button */

a.IdPSelectHelpButton
{
    margin-top: 8px;
    font-size: .9rem;
    display: inline-block;
    text-align: right;
    width: 20%;
    color: #088AB2;
}

html.dark a.IdPSelectHelpButton {
    color: #22ccee;
}

/* Radio buttons */

input[type="radio"] {
    margin-right: 8px;
}

/* Preferred IDP Buttons */

div.IdPSelectPreferredIdPButton {
    border-radius: 16px;
    cursor: pointer;
    border: 1px solid #d0d5dd;
    color: #344054;
    width: 142px;
    height: 142px;
    margin: 4px;
    margin-right: 5px;
    float: left;
}

div.IdPSelectPreferredIdPButton:hover {
    background-color: #f9fafb;
}

html.dark div.IdPSelectPreferredIdPButton {
    background-color: #eaecf0;
    border: 1px solid #414962;
    color: #344054;
}

html.dark div.IdPSelectPreferredIdPButton:hover {
    background-color: #f9fafb;
}

#idpSelectPreferredIdPTile {
    height: 190px;
}

div.IdPSelectPreferredIdPImg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 4px;
    padding-right: 4px;
    height: 77px;
    margin-top: 16px;
    margin-bottom: 8px;
}

/* Combo box */

ul.IdPSelectDropDown {
    color: #344054;
}

ul.IdPSelectDropDown li.IdPSelectCurrent {
    background-color: #088AB2;
    color: white;
}




/* OLD STYLINGS, SOME MAY STILL BE APPLICABLE */




/**
 * The preferred IdP tile (if present) has a specified height, so
 * we can fit the preselected * IdPs in there
 */
#idpSelectPreferredIdPTileNoImg
{
    height:60px;
}

/*
 *  Make the entire box look like a hyperlink
 */
div.IdPSelectPreferredIdPButton a
{
    float: left;
    width: 99%; /* Need a specified width otherwise we'll fit
                   the contents which we don't want because
                   they have auto margins */

}
div.IdPSelectTextDiv{
    height: 3.5ex; /* Add some height to separate the text from the boxes */
    font-size: 15px;
    clear: left;
}

img.IdPSelectIdPImg {
   width:auto;
}

div.IdPSelectautoDispatchTile {
    display: block;
}

div.IdPSelectautoDispatchArea {
    margin-top: 30px ;
}

div.IdPSelectPreferredIdPButton img
{
    display: block;    /* Block display to allow auto centring */
    height: auto;
    max-width:  110px; /* Specify max to allow scaling, percent does work */
    max-height: 85px;  /* Specify max to allow scaling, percent doesn't work */
    margin-top: 3px ;
    margin-bottom: 3px ;
    border: solid 0px #000000;  /* Strip any embellishments the brower may give us */
    margin-left: auto; /* Auto centring */
    margin-right: auto;  /* Auto centring */

}

div.IdPSelectPreferredIdPButton div.IdPSelectTextDiv
{
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    max-width: 100%;
    height: 30px;
    margin-top: 8px;
    margin-bottom: 8px;
}

/*
 * change underlining of HREFS
 */
#idpSelectIdPSelector a:link
{
    text-decoration: none;
}

#idpSelectIdPSelector a:visited
{
    text-decoration: none;
}

#idpSelectIdPSelector a:hover
{
    text-decoration: underline;
}


/**
 * Drop down (incremental search) stuff - see the associated javascript for reference
 */
ul.IdPSelectDropDown {
    -moz-box-sizing: border-box;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    box-sizing: border-box;
    list-style: none;
    padding-left: 0px;
    border: 1px solid black;
    z-index: 6;
    position: absolute;
}

ul.IdPSelectDropDown li {
    background-color: white;
    cursor: default;
    padding: 0px 3px;
}

/* Legacy */
div.IdPSelectDropDown {
    -moz-box-sizing: border-box;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    box-sizing: border-box;
    border: 1px solid black;
    z-index: 6;
    position: absolute;
}

div.IdPSelectDropDown div {
    background-color: white;
    cursor: default;
    padding: 0px 3px;
}

 div.IdPSelectDropDown div.IdPSelectCurrent {
    background-color: #3366cc;
    color: white;
}
/* END */