<div class="gadgetPredefinedEquivalencyDialog">
    
    <style type="text/css">
        /* Blockable Content*/
        .equivalency-selection .interactiveContent {
            width: 100%;
            height: 100%;
        }

        .equivalency-selection .equivalencyListWrapper {
            height: 260px;
            width: 100%;
            border: 1px solid #9f9fa3;
            border-radius: 5px;
            overflow: hidden;
            padding: 5px;
        }

        .equivalency-selection .equivalencyTable {
            height: 240px;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            width: 100%;
            border: solid 1px #9fa0a4;
            border-radius: 5px;
            padding: 5px;

        }

        .equivalency-selection .equivalencyTable .equivalencyRow {
            cursor: pointer;
            padding: 7px 0 5px 10px;
        }

    </style>

    <div class="separatorBar"></div>

    <div class="dialog-body equivalency-selection">
        <div class="equivalencyTable"></div>
    </div>

    <div class="controlButtonWrapper">
        <div class="dialogValidationErrorMessage"></div>
        <input type="button" value="<%loc General.Select %>" title="<%loc General.Select %>" class="dialog-okbutton" disabled="disabled"/>
        <span class="CancelLink floatSecondary"><%loc General.Cancel %></span>
    </div>

    <div class="clear"></div>
</div>

<script type="text/template" class="equivalencyRowEntryTemplate">
    <div class="equivalencyRow customListItem noSelect" Title="<%- description %>"><%- name %></div>
</script>