html.lock-scrolling{
    overflow: hidden;
    width: 100%;
}


#modal {
    position:fixed;
    display:none;
    top:0;
    left:0;
    z-index:9999999;
    width:100%;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
}

@media (min-width: 1180px) {
    .modal-display-only-short {
        display: none;
    }

    ._modal-close {
        position: absolute;
        top: 30px;
        right: 30px;
        color: #494949;
        cursor: pointer;
        z-index: 102;
    }

    ._modal-close svg {
        width:36px !important;
        height: 36px !important;
    }

    ._modal-close:hover {
        color: #696969;
    }

    #modal-content {
        z-index: 9;
        position: absolute;
        top: 7vh;
        left: calc((100vw - 990px) / 2);
        width: 990px;
        height: 86%;
        overflow-y: auto;
        background-color: white;
        border: 1px solid rgb(170, 170, 170);
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        box-shadow: 5px 5px rgba(0, 0, 0, 0.05);
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 1179px) {
    .modal-display-only-full {
        display: none;
    }

    ._modal-close {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #494949;
        cursor: pointer;
        font-weight: 400;
        z-index: 99;
        width:40px;
        height: 40px;
        background-color: rgba(255,255,255,0.6);
        border: 1px solid rgb(200,200,200);
        border-radius: 6px;
        text-align:center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    ._modal-close svg {
        width:18px !important;
        height:18px !important;
    }

    ._modal-close:hover {
        color: #696969;
    }

    #modal-content {
        z-index: 9;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        background-color: white;
        -webkit-overflow-scrolling: touch;
    }
}




.modal-cover {
    position: relative;
    height: 180px;
}
.modal-cover:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url("/assets/dist/controllers/front/img/public-filters/modal/cover.jpg") no-repeat;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: -1;
    background-size: cover;
}


/** iScroll */
#modalScrollWrapper {
    width: 100%;
    overflow:hidden;
    margin-top: -6px;
    background-color: rgb(245,245,245);
    border-bottom: 1px solid rgb(239,238,237);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -ms-touch-action: none;
}

#modalScrollContain {
    display: inline-block;
    white-space: nowrap;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

.modal-menu-item {
    display: inline-block;
    color: rgb(140,140,140);
    font-size: 15px;
    font-weight: 400;
    line-height: 42px;
    border-bottom: 2px solid white;
    padding: 0 17px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: Montserrat, sans-serif;;
}

.modal-menu-item:hover {
    color: rgb(60,112,246);
    border-bottom: 2px solid rgb(60,112,246);
}

.modal-menu-item.active {
    color: rgb(60,112,246);
    border-bottom: 2px solid rgb(60,112,246);
}

.modal-activate-panel {
    background: white;
    background: repeating-linear-gradient(
            45deg,
            white,
            white 10px,
            rgb(253,253,253) 10px,
            rgb(253,253,253) 20px
    );
    text-align:center;
    padding:15px 0;
    font-size: 17px;
    color: rgb(96,96,96);
    font-weight:600;
    border-bottom: 1px solid rgb(239,238,237);
}

.modal-activate-panel .try-for-free-button {
    display:inline-block;
    width: auto;
    white-space:nowrap;
    margin:0 0 0 20px;
    font-size: 14px;
    line-height: 32px;
    padding: 0 15px;
}


.new-review-button {
    line-height: 36px;
    float:right;
    padding:0 20px;
    border: 1px solid rgb(200,200,200);
    color: rgb(110,110,110);
    border-radius:3px;
    font-size:15px;
    cursor:pointer;
    transition: all 0.3s;
    margin-bottom: 20px;
}

.new-review-button:hover {
    color: rgb(90,90,90);
    background-color: rgb(243,243,243);
}

@media (max-width: 840px)
{
    .pf-modal-table {
        display:block
    }

    .pf-modal-table-row {
        display: block;
    }

    .pf-modal-table-cell {
        display: block;
    }

    .pf-modal-table-cell-hover:hover {
        cursor:pointer;
        background-color: rgb(245,245,245);
    }

    .pf-modal-table-hr-big {
        display: none;
    }

    .pf-modal-table-hr-small {
        display: block;
    }

    .pf-modal-table-cell-bottom-border {
        border-bottom: 1px solid rgb(230,230,230);
    }

    [data-modal-content="reviews"] {
        padding: 20px;
    }

    .blue-button-responsive {
        display: table !important;
        margin: 12px auto 0 auto;
    }
}


@media (min-width: 841px)
{
    .pf-modal-table {
        display:table;width:100%;
    }

    .pf-modal-table-row {
        display: table-row;
    }

    .pf-modal-table-cell {
        display: table-cell;
        width:50%;
        vertical-align:top;
    }

    .pf-modal-table-cell-hover:hover {
        cursor:pointer;
        background-color: rgb(245,245,245);
    }

    .pf-modal-table-hr-big {
        display: block;
    }

    .pf-modal-table-hr-small {
        display: none;
    }

    .pf-modal-table-row-bottom-border {
        border-bottom: 1px solid rgb(230,230,230);
    }

    [data-modal-content="reviews"] {
        padding: 20px 40px;
    }

    .blue-button-responsive {
        display: inline-block !important;
        margin-left: 12px;
    }
}


.pf-modal-h1 {
    font-size:22px;
    font-weight: 600;
    color: rgb(80,80,80);
}

.pf-modal-h1-separ {
    background-color: rgb(230,230,230);
    width: 34px;
    height: 2px;
    margin-top: 3px;
}

.pf-wtb-desc-lines-front {
    display:inline-block;
    margin:0 6px 3px 20px;
    background-color:transparent;
    width:15px;
    height:15px;
    border-bottom-left-radius:3px;
    border-left:1px solid rgb(160,160,160);
    border-bottom:1px solid rgb(160,160,160);
}

.pf-modal-settings-col {
    font-size:17px;
    font-weight: 600;
    color: rgb(80,80,80)
}

.pf-modal-review-star-container {
    display:inline-block;
    background-color: rgb(63,112,249);
    border-radius: 10px;
    padding: 1px 6px;
    color: white;
}

.pf-modal-review-star-container .fa-rating-star.active {
    color: white;
}

.pf-review-content {
    font-size:14px;
    color: rgb(80,80,80);
    word-break: break-all;
}

.pf-review-date {
    color: rgb(180,180,180);
    font-size:12px;
}


.pf-tile-filter-name {
    line-height: 36px;
    max-height:108px;
    overflow:hidden;
    word-break: break-word;
    font-size:24px;
    text-shadow: 0 0 3px rgb(0,0,0), 0 0 5px rgb(0,0,0);
    font-weight: 600;
}

.pf-tile-filter-name.bigger {
    line-height: 44px;
    max-height:88px;
    font-size: 32px;
}


.blue-button {
    cursor:pointer;

    text-align:center;
    font-weight: bold;
    background-color: rgb(63,112,249);
    border-radius: 6px;
    color: white;
    border:0;

    outline: none;
    display:block;
    width: auto;
    white-space:nowrap;
    font-size: 14px;
    line-height: 32px;
    padding: 0 15px;
    transition: all 0.3s;
}

.blue-button:hover {
    background-color: rgb(57,100,230);
}

.blue-button.disabled {
    cursor: not-allowed;
    background-color: rgb(150,150,150);
}

.blue-button-pulse {
    animation: blue-button-pulse 1.4s infinite;
}

@-webkit-keyframes blue-button-pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(63,112,249, 0.4);
    }
    70% {
        -webkit-box-shadow: 0 0 0 9px rgba(63,112,249, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(63,112,249, 0);
    }
}
@keyframes blue-button-pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(63,112,249, 0.4);
        box-shadow: 0 0 0 0 rgba(63,112,249, 0.4);
    }
    70% {
        -moz-box-shadow: 0 0 0 9px rgba(63,112,249, 0);
        box-shadow: 0 0 0 9px rgba(63,112,249, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(63,112,249, 0);
        box-shadow: 0 0 0 0 rgba(63,112,249, 0);
    }
}

.label {
    font-weight: 600;
    padding: .3em .6em .2em;
    font-family: 'Montserrat', sans-serif;
}

.label-white {
    background-color: rgba(255, 255, 255, 0.7);
    color: #313a46 !important;
}
.label-default {
    background-color: #188ae2;
}
.label-primary {
    background-color: #7fc1fc;
}
.label-success {
    background-color: #4bd396;
}
.label-info {
    background-color: #3ac9d6;
}
.label-warning {
    background-color: #f9c851;
}
.label-danger {
    background-color: #f5707a;
}
.label-purple {
    background-color: #6b5fb5;
}
.label-pink {
    background-color: #f06292;
}
.label-orange {
    background-color: #ff9800;
}
.label-brown {
    background-color: #8d6e63;
}
.label-teal {
    background-color: #26a69a;
}
.label-inverse {
    background-color: #3b3e47;
}




.pf-tile {
    position:relative;
    width: 255px;
    height:176px;
    overflow: hidden;
}

.pf-tile:hover {
    cursor: pointer;
}

.pf-tile.img:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: -1;
    background-size: cover;

    border-radius: 3px;
    transition: all 0.3s;
}

.pf-tile.img.no-bottom-radius:after {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.pf-tile.img:hover:after {
    opacity: 0.85;
}

.pf-tile.img-1:after {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)
            ),
            url(/assets/dist/controllers/front/img/public-filters/tiles/1.jpg);
}

.pf-tile.img-2:after {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)
            ),
            url(/assets/dist/controllers/front/img/public-filters/tiles/2.jpg);
}

.pf-tile.img-3:after {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)
            ),
            url(/assets/dist/controllers/front/img/public-filters/tiles/3.jpg);
}

.pf-tile.img-4:after {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)
            ),
            url(/assets/dist/controllers/front/img/public-filters/tiles/4.jpg);
}

.pf-tile.img-5:after {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)
            ),
            url(/assets/dist/controllers/front/img/public-filters/tiles/5.jpg);
}

.pf-tile.img-6:after {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)
            ),
            url(/assets/dist/controllers/front/img/public-filters/tiles/6.jpg);
}

.pf-tile.img-7:after {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)
            ),
            url(/assets/dist/controllers/front/img/public-filters/tiles/7.jpg);
}

.pf-tile.img-8:after {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)
            ),
            url(/assets/dist/controllers/front/img/public-filters/tiles/8.jpg);
}

.pf-tile.img-9:after {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)
            ),
            url(/assets/dist/controllers/front/img/public-filters/tiles/9.jpg);
}

.pf-tile.img-10:after {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)
            ),
            url(/assets/dist/controllers/front/img/public-filters/tiles/10.jpg);
}

.pf-tile.img-11:after {
    background-image:
            linear-gradient(
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)
            ),
            url(/assets/dist/controllers/front/img/public-filters/tiles/11.jpg);
}


.pf-review-reply {
    margin:8px 0 10px 20px;
    border:1px solid rgb(220,220,220);
    border-radius:3px;
    padding:10px;
}

body.is-dark .pf-review-reply {
    border-color: rgb(90,90,90);
}

._modal-close::before, ._modal-close::after {
    width: 0;
    height: 0;
}


/** Dark mode */
body.is-dark #modal {
    background-color: rgba(0,0,0,0.6);
}

body.is-dark #modal a {
    color: rgb(90,192,255);
    transition: 0.3s;
}

body.is-dark #modal a:hover {
    color: rgb(70,160,255);
    text-decoration: none;
}

body.is-dark #modal-content {
    border: 1px solid #404046;
    background-color: #323236;
}

body.is-dark #modalScrollWrapper {
    background-color: #2D2D30;
    border-color: #404046;
}

body.is-dark .modal-menu-item {
    color: rgb(220,220,220);
    border-color: rgb(54,54,54);
}

body.is-dark .modal-menu-item:hover {
    color: rgb(90,192,255);
    border-color: rgb(90,192,255);
}

body.is-dark .modal-menu-item.active {
    color: rgb(90,192,255);
    border-color: rgb(90,192,255);
}

body.is-dark .modal-activate-panel {
    background: rgb(65,65,65);
    background: repeating-linear-gradient(
            45deg,
            rgb(60,60,60),
            rgb(60,60,60) 10px,
            rgb(65,65,65) 10px,
            rgb(65,65,65) 20px
    );
    color: rgb(210,210,210);

    border-color: rgb(40,40,40);
}

body.is-dark .pf-modal-h1 {
    color: rgb(210,210,210);
}

body.is-dark .pf-modal-h1-separ {
    background-color: rgb(100,100,100);
}

body.is-dark ._modal-close {
    color: rgb(210,210,210);
}

body.is-dark .pf-modal-table-row-bottom-border {
    border-color: rgb(40,40,40);
}

body.is-dark .pf-modal-table-cell-bottom-border {
    border-color: rgb(40,40,40);
}

body.is-dark .pf-modal-table-cell-hover:hover {
    cursor:pointer;
    background-color: rgb(57,57,57);
}

body.is-dark .pf-modal-settings-col {
    color: rgb(210,210,210);
}

body.is-dark .pf-review-content {
    color: rgb(210,210,210);
}

body.is-dark .new-review-button {
    background-color: rgb(80,80,80);
    color: rgb(210,210,210);
    border-color: rgb(40,40,40);
}

body.is-dark .new-review-button:hover {
    background-color: rgb(90,90,90);
    color: rgb(210,210,210);
}

@media (max-width: 1179px)
{
    body.is-dark ._modal-close {
        background-color: rgba(0,0,0,0.6);
        border-color: rgb(40,40,40);
    }
}

body.is-dark .pf-publish-modal-image-container {
    border: 1px solid rgb(120,120,120);
}