﻿@import "../font";
#RegionCityModal {
    display: block;
    background: #fff;
    min-height: 100%;
    width: 100%;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    color: #fff;
    bottom: 0;
    

    .city-modal-container {
        margin: 100px auto;
        padding-left: 5%;
        padding-right: 5%;
    }

    .head-city-modal {
        position: relative;
        margin-bottom: 30px;
        background: #414248;
        padding: 30px 30px;

        .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .close-dialog {
            z-index: 200;
            margin-left: auto;
            cursor: pointer;
            font-size: 18px;
            color: #fff;
            font-family: @fontMedium;

            span, svg {
                display: inline-block;
                vertical-align: middle
            }

            span {
                color: #fff;
                margin-left: 2px;
            }

            svg path {
                fill: white;
            }
        }

        h3 {
            color: #ffffff;
            font-family: @fontBold;
            font-size: 32px;
            display: inline-block;
            margin: 0;
        }

        .close-modal-bar {
            cursor: pointer;
            float: right;
            padding-top: 5px;

            img {
                margin-right: 10px;
            }

            span {
                cursor: pointer;
                color: #ffffff;
                font-family: @fontLight;
                font-size: 16px;
                border-bottom: 1px solid rgba(255,255,255,0.5);
            }
        }
    }

    .modal-form {
        padding-right: 20px;

        #modalCityInput {
            background-color: transparent;
            border: 0;
            border-bottom: 2px solid #000000;
            color: #414249;
            padding: 14px 10px;
            font-family: @fontLight;
            font-size: 18px;
            width: 100%;
            outline: none;

            &::-webkit-input-placeholder { /* Safari, Chrome and Opera */
                color: #797b80;
            }

            &:-moz-placeholder { /* Firefox 18- */
                color: #D6D6D6;
            }

            &::-moz-placeholder { /* Firefox 19+ */
                color: #D6D6D6;
            }

            &:-ms-input-placeholder { /* IE 10+ */
                color: #D6D6D6;
            }

            &::-ms-input-placeholder { /* Edge */
                color: #D6D6D6;
            }

            &:placeholder-shown { /* Standard one last! */
                color: #D6D6D6;
            }
        }
    }

    .add-city-holder {
        text-align: left;
        padding-left: 20px;

        a {
            cursor: pointer;
            position: relative;
            font-size: 16px;
            font-family: @fontLight;
            color: #414249;
            display: inline-block;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);

            &:hover {
                text-decoration: underline !important;
            }
        }
    }

    .city-reg-cont {
        .state-model-label {
            font-family: @forntMainPage;
            font-size: 24px;
            color: #414249;
            text-decoration: none;
            position: relative;
            padding-left: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .city-choice-cont {
            margin-bottom: 25px;

            .noFound {
                padding-left: 20px;
            }

            .city-modal-choice {
                font-family: @forntMainPage;
                font-size: 24px;
                color: #414249;
                text-decoration: none;
                position: relative;
                padding-left: 20px;

                .bull {
                    border-radius: 50%;
                    height: 25px;
                    width: 25px;
                    background-color: #4FA4D3;
                    display: block;
                    margin-top: 8px;
                    margin-left: 19px;
                }
            }

            .small-city {
                &:before {
                    content: url('/Images/Common/circlecity.png');
                    position: relative;
                    top: 3px;
                    margin-right: 5px;
                }
            }

            .big-city {
                &:before {
                    content: '';
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    border-radius: 5px;
                    background-color: #414249;
                    margin-top: 0;
                    left: 0;
                    top: 9px;
                }
            }

            .active-city {
                color: #FFC320;
            }

            .region-modal-choice, .area-modal-choice {
                font-family: @fontLight;
                font-size: 16px;
                color: white;
                text-decoration: none;
                position: relative;
                opacity: 0.5;

                &:hover {
                    opacity: 1;
                    border-bottom: 1px solid rgba(255,255,255,0.5);
                }
            }
        }


        .reg-name {
            .region-modal-name {
                font-family: "Roboto-Light";
                font-size: 18px;
                color: white;
                text-decoration: none;
                opacity: 0.3;
            }
        }

        #regionView {
            margin-bottom: 25px;
            border-bottom: 1px solid rgba(255,255,255,0.5);

            .reg-name {
                position: relative;
                margin-bottom: 20px;

                h4 {
                    font-size: 24px;
                    font-family: @fontLight;
                    color: rgba(255,255,255,0.5);
                    display: inline-block;
                    padding-right: 15px;
                    margin: 0;
                    margin-right: 15px;
                    border-right: 1px solid rgba(255,255,255,0.5);
                }

                a {
                    position: relative;
                    top: -3px;
                    font-size: 16px;
                    font-family: @fontLight;
                    color: rgba(255,255,255,0.5);
                    display: inline-block;
                    border-bottom: 1px solid rgba(255,255,255,0.5);
                }
            }
        }
    }

    .search-group-city {
        display: flex;
        margin-bottom: 30px;
        align-items: center;

        &-item {
            flex: 1
        }
    }
}
.md-dialog-container md-dialog {
    -webkit-transform: inherit!important;
    transform: inherit!important;
    -webkit-transition: all .1s ease!important;
    transition: all .1s ease!important;
}
.md-dialog-container md-dialog.md-transition-in {
    -webkit-transform: inherit;
    transform: inherit;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
}

@media screen and (max-width: 736px) {

    #RegionCityModal .head-city-modal .close-dialog span {
        display: none;
    }

    #RegionCityModal .head-city-modal {
        padding: 25px 5px;
    }

    #RegionCityModal .head-city-modal h3 {
        font-size: 28px;
    }

    #RegionCityModal .search-group-city {
        flex-wrap: wrap;
    }

    #RegionCityModal .search-group-city-item {
        flex: 1 1 100%;
        padding-right: 0;
        padding-left: 0;
        justify-content: center;
    }

    #RegionCityModal .modal-form {
        margin-bottom: 30px;
    }

    #RegionCityModal .add-city-holder {
        text-align: center;
    }
}

@media screen and (max-width: 414px) {
    #RegionCityModal .city-reg-cont .city-choice-cont.col-xs-6{
        width: 100%;
    }
    #RegionCityModal .head-city-modal h3 {
        font-size: 24px;
    }
}