/*==============================================================================
Primary Wrapper
==============================================================================*/

.directory-module {
    position:         relative;
    background-color: #666666;
    padding:          5rem 0;
}

/*==============================================================================
Modal
==============================================================================*/

body.directory-module-open {
    overflow: hidden;
}

.directory-module-veil {
    position:         fixed;
    top:              0;
    right:            0;
    bottom:           0;
    left:             0;
    z-index:          9999;
    width:            100vw;
    height:           100vh;
    background-color: rgba(0, 0, 0, .85);
}

.directory-module-open .directory-module-veil {
    display: block;
}

.directory-module-dialog {
    position:         fixed;
    top:              5rem;
    left:             50%;
    z-index:          9999;
    background-color: #ffffff;
    border-top:       8px solid #3fa0d2;
    max-width:        350px;
    width:            100%;
    transform:        translateX(-50%);
}

.directory-module-dialog .inner {
    display:    flex;
    max-width:  350px;
    max-height: 75vh;
    width:      100%;
    height:     auto;
}

.directory-module-dialog form {
    padding: 0 24px 24px;
}

.directory-module-dialog form .directory-module-submit {
    text-align: center;
}

.directory-module-dialog form .directory-module-submit input[type="submit"] {
    background-color: #ffffff;
    border-color:     #3fa0d2;
    text-align:       center;
    color:            #3fa0d2;
}

.directory-module-search-results form .directory-module-submit input[type="submit"]:hover {
    background-color: #3fa0d2;
    color:            #ffffff;
}

.directory-module-dialog.loading .directory-module-search-results-title,
.directory-module-dialog.loading .directory-module-search-results-title ~ * {
    opacity: .33;
}

.directory-module-spinner,
.directory-module-spinner:after {
    border-radius: 50%;
    width:         10em;
    height:        10em;
}

.directory-module-spinner {
    position:      relative;
    top:           33%;
    font-size:     5px;
    text-indent:   -9999em;
    border-top:    8px solid rgba(25, 63, 82, 0.2);
    border-right:  8px solid rgba(25, 63, 82, 0.2);
    border-bottom: 8px solid rgba(25, 63, 82, 0.2);
    border-left:   8px solid #ffffff;
    margin:        60px auto;
    transform:     translateZ(0);
    animation:     spin 1.1s infinite linear;
}

.directory-module-search-results {
    position:       relative;
    display:        flex;
    flex-direction: column;
    width:          100%;
    padding:        24px;
}

.directory-module-search-results-list {
    height:       100%;
    margin-right: -8px;
    overflow:     auto;
}

.directory-module-search-results .btn-close {
    cursor:    pointer;
    position:  absolute;
    top:       8px;
    right:     8px;
    font-size: 40px;
    color:     #979797;
}

.directory-module-search-results .btn-close:hover {
    color: #3fa0d2;
}

.directory-module-search-results-title h2 {
    border-bottom: 1px solid #9b9b9b;
    font-family:   "Open Sans", sans-serif;
    font-size:     1.5em;
    font-weight:   700;
    color:         #9b9b9b;
    margin-bottom: 1rem;
    padding:       .75rem 0;
}

ul.directory-module-search-results-list li.directory-module-search-result {
    margin-bottom: 16px;
}

.directory-module-search-result-featured {
    font-size:      .8em;
    font-weight:    700;
    text-transform: uppercase;
    line-height:    1;
    color:          #f6af3a;
    margin-bottom:  4px;
}

.directory-module-search-result-tags {
    font-size:      .9em;
    font-weight:    400;
    text-transform: uppercase;
    line-height:    1;
    color:          #3fa0d2;
    margin-bottom:  4px;
}

ul.directory-module-search-results-list li.directory-module-search-result .directory-module-search-result-name {
    font-size:   1.7em;
    font-weight: 500;
    line-height: 1.25;
    color:       #9b9b9b;
}

ul.directory-module-search-results-list li.directory-module-search-result .directory-module-search-result-name:hover {
    color: #696969;
}

.directory-module-search-result-name:after {
    content:        '\20';
    display:        inline-block;
    width:          0;
    height:         0;
    border-top:     .3em solid transparent;
    border-bottom:  .3em solid transparent;
    border-left:    .4em solid #3fa0d2;
    vertical-align: baseline;
}

.directory-module-search-results-pagination {
    display:         flex;
    justify-content: space-between;
    color:           #c7c7c7;
    margin-top:      24px;
}

.directory-module-search-results-page-prev,
.directory-module-search-results-page-next {
    cursor:           pointer;
    background-color: transparent;
    border:           1px solid #c7c7c7;
    text-align:       center;
    line-height:      40px;
    color:            #c7c7c7;
    width:            40px;
    height:           40px;
}

.directory-module-search-results-page-prev:hover,
.directory-module-search-results-page-next:hover {
    background-color: #c7c7c7;
    color:            #ffffff;
}

.directory-module-search-results-page-prev:after,
.directory-module-search-results-page-next:after {
    content:        '\20';
    display:        inline-block;
    border-top:     .5em solid transparent;
    border-bottom:  .5em solid transparent;
    width:          0;
    height:         0;
    vertical-align: baseline;
}

.directory-module-search-results-page-next:after {
    border-left: .7em solid #c7c7c7;
}

.directory-module-search-results-page-prev:after {
    border-right: .7em solid #c7c7c7;
}

.directory-module-search-results-page-prev:hover:after {
    border-right-color: #ffffff;
}

.directory-module-search-results-page-next:hover:after {
    border-left-color: #ffffff;
}

.directory-module-search-results-pages {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

.directory-module-search-results-pages span {
    cursor:      pointer;
    display:     inline-block;
    font-size:   1.2rem;
    font-weight: 700;
    color:       #c7c7c7;
    padding:     0 12px;
}

.directory-module-search-results-pages li.active span,
.directory-module-search-results-pages li:hover span {
    color: #7d7d7d;
}

@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*==============================================================================
Background Image & Gradient
==============================================================================*/

.directory-module > .directory-module-gradient {
    content:    '\20';
    position:   absolute;
    top:        0;
    right:      0;
    bottom:     0;
    left:       0;
    z-index:    10;
    display:    block;
    background: transparent;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .05) 50%, rgba(0, 0, 0, 0) 100%);
}

.directory-module .directory-module-bg {
    position:            absolute;
    top:                 0;
    right:               0;
    bottom:              0;
    left:                0;
    background-position: center center;
    background-repeat:   no-repeat;
    background-size:     cover;
}

.directory-module .inner {
    position: relative;
    z-index:  20;
}

/*==============================================================================
Inner Content
==============================================================================*/

.directory-module .inner {
    text-align: center;
    width:      100%;
    max-width:  300px;
    margin:     0 auto;
}

.directory-module .directory-module-title {
    font-family:    "Open Sans", sans-serif;
    font-size:      24px;
    font-weight:    400;
    text-transform: uppercase;
    color:          #ffffff;
}

.directory-module .directory-module-title:after {
    content:          '\20';
    display:          block;
    background-color: #ffffff;
    font-size:        18px;
    width:            3rem;
    height:           2px;
    margin:           1rem auto;
}

/*==============================================================================
Form Fields
==============================================================================*/

.directory-module-field {
    margin: 0 0 .75rem;
}

.directory-module-field input[type="text"],
.directory-module-submit input[type="submit"],
.directory-module-field select {
    display:   block;
    border:    1px solid #d8d8d8;
    font-size: 16px;
    color:     #9b9b9b;
    width:     100%;
    padding:   .5rem;
}

.directory-module-field input[type="text"]::placeholder {
    color: #9b9b9b;
}

.directory-module-field select,
.directory-module-submit input[type="submit"] {
    cursor: pointer;
}

.directory-module-submit input[type="submit"],
.directory-module-search-again {
    display:          inline-block;
    background-color: transparent;
    border:           1px solid #ffffff;
    font-size:        14px;
    font-weight:      600;
    text-transform:   uppercase;
    color:            #ffffff;
    width:            auto;
    margin-top:       1.25rem;
    padding:          8px 28px;
    transition:       color .1s ease-in-out, background-color .1s ease-in-out;
}

.directory-module-submit input[type="submit"]:hover {
    background-color: #ffffff;
    color:            #666666;
}

.directory-module-search-again {
    cursor:       pointer;
    border-color: #9b9b9b;
    text-align:   center;
    color:        #9b9b9b;
}

.directory-module-search-again:hover {
    background-color: #f8af55;
    border-color:     #f8af55;
    color:            #ffffff;
}

.directory-module-search-again svg,
.directory-module-search-again i {
    margin-right:   .5rem;
    vertical-align: middle;
}

.directory-module-clear {
    cursor:         pointer;
    font-size:      .75em;
    font-weight:    700;
    text-transform: uppercase;
    text-shadow:    0 0 4px rgba(0, 0, 0, .5);
    color:          #ffffff;
    margin-top:     .75rem;
    opacity:        .75;
}

.directory-module-clear:hover {
    opacity: 1;
}

.directory-module-clear svg,
.directory-module-clear i {
    margin-right: .25rem;
}

.directory-module .directory-module-loading {
    display:          none;
    position:         absolute;
    top:              50%;
    left:             50%;
    z-index:          50;
    background-color: rgba(0, 0, 0, .5);
    width:            100%;
    height:           100%;
    transform:        translate(-50%, -50%);
}

.directory-module.loading .directory-module-loading {
    display: block;
}

.directory-module .field-title {
    text-align:     left;
    font-size:      .85em;
    font-weight:    600;
    text-transform: uppercase;
    text-shadow:    1px 1px 2px rgba(0, 0, 0, .5);
    color:          #ffffff;
    margin-bottom:  -.5rem;
}

.directory-module .directory-module-field-checkbox .field-title,
.directory-module .directory-module-field-radio .field-title {
    margin-bottom: 0;
}

.zzzdirectory-module .directory-module-append-fields .directory-module-field:not(.directory-module-child-category) {
    background-color: rgba(0, 0, 0, .33);
    border-radius:    8px;
    text-align:       left;
    padding:          .75rem;
}

.directory-module .directory-module-append-fields .directory-module-field-content {
    max-height: 12rem;
    overflow:   auto;
}

.directory-module .directory-module-field label {
    cursor:      pointer;
    display:     block;
    text-align:  left;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    color:       #ffffff;
    white-space: nowrap;
}