locked
remove attribute from class RRS feed

  • Question

  • User-2146352328 posted

    Hi.
    Someone has named a carousel div's with the same name.
    I' trying to distinguish between same names and remove an attribute.

    Here is the source part of interest:

    <div id="select-center" class="choose-center">
        <div class="choose-day-slider">
            <div class="carousel slide multi-item-carousel" data-interval="false" id="cinemaSelection">
                <div class="carousel-inner">
                        <div class="item active">
        <div class="col-xs-2">
             <a class="datepick vc-selected  vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="99">
                 <span class="str-day">TEST CINEMA1</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="21">
                 <span class="str-day">Village ΑΤ ΤΗΕ MALL</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="01">
                 <span class="str-day">Village ΡΕΝΤΗ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="24">
                 <span class="str-day">Village ΦΑΛΗΡΟ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick   vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="26">
                 <span class="str-day">Village ΑΓ. ΔΗΜΗΤΡΙΟΣ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="03">
                 <span class="str-day">Village ΠΑΓΚΡΑΤΙ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="22">
                 <span class="str-day">Village Cosmos ΘΕΣΣ.</span><br>
             </a>
        </div>
    </div>
                        <div class="item ">
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="23">
                 <span class="str-day">Village ΒΟΛΟΣ</span><br>
             </a>
        </div>
    </div>
                </div>
                <a class="left carousel-control" data-slide="prev" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="right carousel-control" data-slide="next" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
    
                <div class="grey_fields">
                    Επιλογή Ημέρας
                </div>
                <div class="choose-day">
                    <div class="choose-day-slider">
                        <div id="theCarousel" class="carousel slide multi-item-carousel" data-interval="false">
                            <div class="carousel-inner">
                                    <div class="item active">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181009" id="date20181009">
                                                        <span class="str-day">09/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181010" id="date20181010">
                                                        <span class="str-day">10/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
    
    ...........etc

    As you can see there is 2 "choose-day-slider"

    Now the script part goes like this:

    function selectDate(date) {
                console.log(date);
                var dateId = "#date" + date;
                var timeId = "#timeof" + date;
    /*            $('.vc-selected', '.choose-day-slider').removeClass('vc-selected');  this is the original script, this will remove the  vc-selected from all the carousel*/
    $("choose-day").find("choose-day-slider").removeClass('vc-selected');  /* this is what I am trying */
                $(dateId).addClass('vc-selected');  /* this will add the vc-selected to a specific button */
                $('.vc-selected', '.choose-hour-slider').removeClass('vc-selected');
                $('.choose-hour-slider').hide();
                $('.vc-instructions').hide();
                $('.dateSelected').show();
                $(timeId).show();
                var sessions = $('.timepicker:not(.not-available)', timeId);
                var firstSession = $(sessions[0]).attr('id');
                if (!!firstSession) {
                    selectHour(firstSession, false);
                } else {
                    $('#nextEnabled').hide();
                    $('#nextDisabled').show();
                }
            }

    I'm trying to remove vc-selected , the window of opportunity is that guy forgot to have the same name for the out class.
    So one class is named choose-center --> choose-day-slider and the other choose-day --> choose-day-slider .
    I'm trying to get the choose-day --> choose-day-slider and to work as would the $('.vc-selected', '.choose-day-slider').removeClass('vc-selected'); would work but only on the second carousel.
    When I run this it will only select any button I click and not remove the whole row as I'm trying to do.
    I have also tried .parent but it does not work .


    also tried this for the fun of it:
    $('.vc-selected', $('choose-day').find('choose-day-slider')).removeClass('vc-selected');
    $('.vc-selected', $('choose-day').find('choose-day-slider').find('#theCarousel').find('.item active').removeClass('vc-
    selected');

    nothing works.

    Thanks

    Tuesday, October 9, 2018 6:24 PM

Answers

  • User-2146352328 posted

    I can get remove all the vc-selected with the below

    $('.vc-selected').each(function(i){
    $(this).removeClass('vc-selected');
    
    });

    question is how to make it understand that it has to search only on the elements contained inside the choose-day div.

    Edit.

    I think this is proper?

    $('.vc-selected', '.choose-day').each(function(i){
    $(this).removeClass('vc-selected');
    
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 10, 2018 10:09 AM

All replies

  • User839733648 posted

    Hi sapator,

    According to your description and code, I could not reproduce your issue.

    It seems that you've used Bootstrap Carousel and I've tried to quote the source and the following image is my running result.

    When I run this it will only select any button I click and not remove the whole row as I'm trying to do.

    According to this statement and my running result, I think maybe I've lost some other references and styles.

    $("choose-day").find("choose-day-slider").removeClass('vc-selected');  /* this is what I am trying */

    Besides, I've checked that in the choose-day class and find that there is no vc-selected class according to your code provided.

    So I'm a little confused about your requirement.

    If possible, please provide more details (such as detailed descriprion, codes, references ,styles and running screenshot) so that it will be better for us to help with you.

    Best Regards,

    Jenifer

    Wednesday, October 10, 2018 6:16 AM
  • User-2146352328 posted

    Hello Jenifer.

    Ok.

    The first was an example (see when I used etc) to get the idea but.

    Here is the complete page and css style.

    I will post the vbhtml and page created source

    I will post them in different post so they can be readable.

    The requirement is for the second carousel not removing the css class vc-selected when clicked and thus making the first carousel checked - color empty - white again

    Thanks.

    vbhtml

    @ModelType SelectionsViewModel
    @Code
        ViewBag.Title = "Επιλογές"
        ViewBag.ShowFastForward = Not System.Configuration.ConfigurationManager.AppSettings("HideConcessions").ToLower = "true"
        Dim lSelectedMovie = Model.Movies.FirstOrDefault(Function(x) x.MovieCode = Session("MovieCode"))
        Dim lSelectedCinema = Model.AllCinemas.FirstOrDefault(Function(x) x.CinemaCode = Session("CinemaCode"))
        Dim lSelectedScreenType = Model.AllScreenTypes.FirstOrDefault(Function(x) x.ScreenTypeCode = Session("ScreenTypeCode"))
        Dim lInstructions As String
        If lSelectedCinema Is Nothing AndAlso lSelectedMovie Is Nothing Then
            lInstructions = "instructions-movie-cinema"
        ElseIf lSelectedCinema Is Nothing AndAlso Not lSelectedMovie Is Nothing Then
            lInstructions = "instructions-cinema"
        ElseIf Not lSelectedCinema Is Nothing AndAlso lSelectedMovie Is Nothing Then
            lInstructions = "instructions-movie"
        Else
            lInstructions = "instructions-date"
        End If
    End Code
    @section scripts
        <script>
            //var cinemaCode;
            //var movieCode;
            //var screenTypeCode;
            //var onlyPlayingNow = true;
            $(document).ready(function () {
                var form = $('#selectionOptions');
                var submitForm = function () {
                    form.children(':input[value=""],:input:not([value])').attr("disabled", "disabled");
                    form.submit();
                }
                $('.vc-movie').click(function () {
                    $('input[name="MovieCode"]', form).val($(this).attr('data-vc-movie'));
                    submitForm();
                })
                $('.vc-cinema').click(function () {
                    $('input[name="CinemaCode"]', form).val($(this).attr('data-vc-cinema'));
                    submitForm();
                })
                $('.vc-screentype').click(function () {
                    $('input[name="ScreenTypeCode"]', form).val($(this).attr('data-vc-screentype'));
                    submitForm();
                })
                $('.vc-clear').click(function () {
                    form.find("input").val("");
                    submitForm();
                })
            })
            function show_select_class() {
    
                if ($('#select-class-type').hasClass("in")) {
                    //setTimeout(function () { $('.select_class').removeClass('class_active'); }, 380);
                    $('#select-center').fadeIn(300);
                    $('#search-class-icon').removeClass('circle-minus');
                    $('#search-class-icon').addClass('circle-plus');
                } else {
                    //$('.select_class').addClass('class_active');
                    $('#select-center').fadeOut(384);
                    $('#search-class-icon').removeClass('circle-plus');
                    $('#search-class-icon').addClass('circle-minus');
                }
            }
            function selectDate(date) {
                console.log(date);
                var dateId = "#date" + date;
                var timeId = "#timeof" + date;
                $('.vc-selected', '.choose-day-slider').removeClass('vc-selected');
                $(dateId).addClass('vc-selected');
                $('.vc-selected', '.choose-hour-slider').removeClass('vc-selected');
                $('.choose-hour-slider').hide();
                $('.vc-instructions').hide();
                $('.dateSelected').show();
                $(timeId).show();
                var sessions = $('.timepicker:not(.not-available)', timeId);
                var firstSession = $(sessions[0]).attr('id');
                if (!!firstSession) {
                    selectHour(firstSession, false);
                } else {
                    $('#nextEnabled').hide();
                    $('#nextDisabled').show();
                }
            }
            var selectedSession;
            function selectHour(session, allowAutoselection) {
                if (allowAutoselection && selectedSession === session) {
                    $('#nextStep').submit();
                }
    
                selectedSession = session;
                var formNext = $('#nextStep');
                var sessionId = '#' + session;
                $('.vc-selected', '.choose-hour-slider').removeClass('vc-selected');
                $(sessionId).addClass('vc-selected');
                $('#nextEnabled').show();
                $('#nextDisabled').hide();
                $('input[name="SessionID"]', formNext).val(session);
            }
            $('.timepicker').click(function () {
                var sessionId = $(this).attr('id');
                selectHour(sessionId, true);
            })
            $('.datepick').click(function () {
                var dateId = $(this).attr('data-vc-selecteddate');
                selectDate(dateId);
            })
        </script>
    End Section
    
    <div class="col-xs-12 col-lg-12 col-md-12 main_content">
        <div class="sidebar">
            <div class="grey_fields">
                Επιλογή Ταινίας
            </div>
            @If Session("MovieCode") Is Nothing OrElse lSelectedMovie Is Nothing Then
                Dim lMovies = Model.Movies.ToList
                @<div class="media_sidebar with-scroll">
                    @*style="height: 516px!important;">*@
                    @For i As Integer = 0 To lMovies.Count() - 1
                        @<div class="media @(If(i Mod 2 = 0, "media_item_first", "media_item_sec")) vc-movie vc-process" style="cursor:pointer" data-vc-movie="@lMovies(i).MovieCode">
                            <div class="media-left media-middle">
                                @If String.IsNullOrWhiteSpace(lMovies(i).ImageUrl) Then
                                    @<div style="display:block;width:46px;height:66px;"></div>
                                Else
                                    @<img class="media-object" width="46" height="66" src="@lMovies(i).ImageUrl.Replace("http://", "https://")" alt="@lMovies(i).Title">
                                End If
                            </div>
                            <div class="media-body">
                                <h5 class="media-heading">@lMovies(i).TitleAlt</h5>
                                @If lMovies(i).Title.Trim <> lMovies(i).TitleAlt.Trim Then
                                    @<h5 class="media-heading">@lMovies(i).Title</h5>
                                End If
                            </div>
                        </div>
                    Next
                </div>
            Else
                @<div class="media_sidebar ">
                    <div class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <div class="media-body media_body_seperator">
                                <div class="view_media_title">@lSelectedMovie.Title</div>
                                <div class="view_media_pointer">
                                    <span class="glyphicon glyphicon-triangle-bottom pointer_icon"> </span>
                                </div>
                            </div>
                        </a>
                        <ul class="dropdown-menu with-scroll">
                            @For i As Integer = 0 To Model.Movies.Count() - 1
                                @<li>
                                    <div class="media @(If(i Mod 2 = 0, "media_item_first", "media_item_sec")) vc-movie vc-process" style="cursor:pointer" data-vc-movie="@Model.Movies(i).MovieCode">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                @If String.IsNullOrWhiteSpace(Model.Movies(i).ImageUrl) Then
                                                    @<div style="display:block;width:46px;height:66px;"></div>
                                                Else
                                                    @<img class="media-object" width="46" height="66" src="@Model.Movies(i).ImageUrl.Replace("http://","https://")" alt="@Model.Movies(i).Title">
                                                End If
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">@Model.Movies(i).TitleAlt</h5>
                                            @If Model.Movies(i).Title.Trim <> Model.Movies(i).TitleAlt.Trim Then
                                                @<h5 class="media-heading">@Model.Movies(i).Title</h5>
                                            End If
                                        </div>
                                    </div>
    
                                </li>
                            Next
                        </ul>
                    </div>
                    <div class="media media_item_first">
                        <div class="collapse in">
                            <div class="media_content">
                                <img class="media-object" src="@lSelectedMovie.ImageUrl" alt="@lSelectedMovie.Title">
                            </div>
                            <span class="ratings @lSelectedMovie.Rating.ToLower"></span>
    
                        </div>
                    </div>
                </div>
            End If
        </div>
    
        <div class="main_content_right">
            <div class="grey_fields">
                Επιλογή Κινηματογράφου
                <a data-toggle="collapse" href="#select-class-type" aria-expanded="false" aria-controls="select-class-type" onclick="show_select_class()">
                    @If Not lSelectedScreenType Is Nothing Then
                        @<span class="pull-right select_class class_active "><span>@lSelectedScreenType.Description</span><span id="search-class-icon" class="toggle-search-class circle-plus pull-right"></span></span>
                    Else
                        @<span class="pull-right select_class class_active "><span>Επιλογή Τύπου Αίθουσας</span><span id="search-class-icon" class="toggle-search-class circle-plus pull-right"></span></span>
                    End If
                </a>
            </div>
            <div class="collapse" id="select-class-type">
                <div class="choose-day-slider choose-type-center">
                    <div class="carousel slide multi-item-carousel" data-interval="false" id="screenTypeSelection">
                        <div class="carousel-inner">
                            @For j As Integer = 0 To (Model.AllScreenTypes.Count() + 1) / 7 '- 1
                                @<div class="item @(IIf(j=0,"active",String.Empty))">
                                    @For i As Integer = 0 To 6
                                    If (j * 7 + i < Model.AllScreenTypes.Count() + 1) Then
                                        If j = 0 And i = 0 Then
                                        @<div class="col-xs-2">
                                            <a class="btn type1 dark vc-screentype datepick" data-vc-screentype="-1" style="cursor:pointer">
                                                <img src="@Url.Content("~/img/real/all.png")">
                                            </a>
                                        </div>
                                        Else
                                            Dim lIndex = j * 7 + i - 1
                                            If j = 0 Then
                                                lIndex = i - 1
                                            End If
                                            Dim lScreenType = Model.AllScreenTypes.OrderBy(Function(x) x.Description).ToList(lIndex)
                                            Dim lSelectedScreenTypeClass = String.Empty
                                            If Not lSelectedScreenType Is Nothing AndAlso lScreenType.ScreenTypeCode = lSelectedScreenType.ScreenTypeCode Then
                                                lSelectedScreenTypeClass = "vc-selected"
                                            End If
                                            Dim lDisableScreenTypeSelection = String.Empty
                                            If Not Model.ValidScreenTypes.Any(Function(x) x.ScreenTypeCode = lScreenType.ScreenTypeCode) Then
                                                lDisableScreenTypeSelection = "disableClick"
                                            End If
                                            Dim lScreenTypeImage = Url.Content("~/img/real/all.png")
                                            Select Case lScreenType.ScreenTypeCode
                                                Case 1
                                                    lScreenTypeImage = Url.Content("~/img/real/comfort.png")
                                                Case 2
                                                    lScreenTypeImage = Url.Content("~/img/real/summer.png")
                                                Case 3
                                                    lScreenTypeImage = Url.Content("~/img/real/gold_class.png")
                                                Case 4
                                                    lScreenTypeImage = Url.Content("~/img/real/vmax.png")
                                                Case 5
                                                    lScreenTypeImage = Url.Content("~/img/real/sphera-cat.png")
                                                Case 6
                                                    lScreenTypeImage = Url.Content("~/img/real/vkids-cat.png")
                                            End Select
                                            If Not lScreenType Is Nothing Then
    
    
                                        @<div class="col-xs-2">
                                            <a class="btn type1 dark vc-screentype @lSelectedScreenTypeClass @lDisableScreenTypeSelection  vc-process datepick" data-vc-screentype="@lScreenType.ScreenTypeCode" style="cursor:pointer">
                                                <img src="@lScreenTypeImage">
                                            </a>
                                        </div>
    
                                            End If
                                        End If
                                    End If
    
                                    Next
                                </div>
                            Next
                        </div>
                        @If (Model.AllScreenTypes.Count() + 1) >= 7 Then
                        @<a class="left carousel-control" data-slide="prev" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-left"></i></a>
                        @<a class="right carousel-control" data-slide="next" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-right"></i></a>
                            
                        End If
    
                    </div>
                </div>
            </div>
            @Code
                ViewBag.SelectedCinema = lSelectedCinema
                ViewBag.ValidCinemas = Model.Cinemas
                Html.RenderPartial("ChooseCenter", Model.AllCinemas) ', New ViewDataDictionary(New With {.SelectedCinema = lSelectedCinema, .ValidCinemas = Model.Cinemas}))
            End Code
            @If Not Model.Sessions Is Nothing Then
                Dim lDates = Model.Sessions.Select(Function(x) DateTime.ParseExact(x.ShowDateTime, "yyyy-MM-dd HH:mm", System.Globalization.CultureInfo.InvariantCulture)).OrderBy(Function(x) x).GroupBy(Function(x) x.Date).Select(Function(x) New With {.Date = x.Key.ToString("dd/MM"), .DateName = x.Key.ToString("dddd"), .SelectionDate = x.Key.ToString("yyyyMMdd")}) '.GroupBy(Function(x) x.Date).Select(Function(x)New With{.Date = x.Key, .DisplayDate = x.Key.ToString()})
                @<div class="grey_fields">
                    Επιλογή Ημέρας
                </div>
                @<div class="choose-day">
                    <div class="choose-day-slider">
                        <div id="theCarousel" class="carousel slide multi-item-carousel" data-interval="false">
                            <div class="carousel-inner">
                                @For i = 0 To lDates.Count - 1 Step 7
                                    @<div class="item @(If(i=0,"active",""))">
                                        @For j = 0 To 6
                                            @If i + j <= lDates.Count - 1 Then
                                                @<div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="@lDates.ToList(i + j).SelectionDate" id="date@(lDates.ToList(i + j).SelectionDate)">
                                                        <span class="str-day">@lDates.ToList(i + j).Date</span><br />
                                                        <span class="day-item">@lDates.ToList(i + j).DateName</span>
                                                    </a>
                                                </div>
                                            End If
                                        Next
                                    </div>
                                Next
                            </div>
                            <a data-slide="prev" href="#theCarousel" class="left carousel-control"><i class="glyphicon glyphicon-chevron-left"></i></a>
                            <a data-slide="next" href="#theCarousel" class="right carousel-control"><i class="glyphicon glyphicon-chevron-right"></i></a>
                        </div>
    
    
                    </div>
                </div>
                @*End If
    
                    @If Not Model.Sessions Is Nothing Then*@
                Dim lTimes = Model.Sessions.Select(Function(x) New With {.Record = x, .Date = DateTime.ParseExact(x.ShowDateTime, "yyyy-MM-dd HH:mm", System.Globalization.CultureInfo.InvariantCulture)}) _
                        .OrderBy(Function(x) x.Date.TimeOfDay.Hours < 6) _
                        .ThenBy(Function(x) x.Date) _
                        .GroupBy(Function(x) x.Date.Date) _
                        .Select(Function(x) New With {.Date = x.Key, .DisplayDate = x.Key.ToString(), .Times = x.Select(Function(t) t.Record.ShowDateTime), .Records = x.Select(Function(r) r.Record)})
                @<div class="grey_fields dateSelected" style="display:none;">
                    Επιλογή Ώρας
                </div>
                @<div class="payment-label-help vc-instructions @lInstructions">
                </div>
    
                @<div class="choose-hour dateSelected">
                    @For Each lTime In lTimes
                        @<div class="choose-hour-slider" id="timeof@(lTime.Date.ToString("yyyyMMdd"))" style="display:none;">
                            @For Each lRecord In lTime.Records
                            Dim lAllowSelection = True
                            Dim lAvailabilityClass As String = String.Empty
                                @Select Case lRecord.Availability
                                Case VC.Common.ScreenAvailability.Free
                                lAvailabilityClass = "available"
                                Case VC.Common.ScreenAvailability.Limited
                                lAvailabilityClass = "limited"
                                Case VC.Common.ScreenAvailability.SoldOut
                                lAllowSelection = False
                                lAvailabilityClass = "not-available disableClick"
                                End Select
    
                            Dim lScreenTypeClass As String = String.Empty
                                @Select Case lRecord.Screen.ScreenTypeCode
                                Case 1
                                lScreenTypeClass = "comfort-class"
                                Case 2
                                lScreenTypeClass = "summer-class"
                                Case 3
                                lScreenTypeClass = "golden-class"
                                Case 4
                                lScreenTypeClass = "vmax-class"
                                Case 5
                                lScreenTypeClass = "europa-class"
                                Case 6
                                lScreenTypeClass = "vkids-class"
                                End Select
                                @<div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker @lAvailabilityClass @lScreenTypeClass" id="@lRecord.SessionId">
                                        <span class="str-time">@lRecord.ShowDateTime.Substring(lRecord.ShowDateTime.Length - 5, 5)</span>
                                        <span class="type-item">@lRecord.Screen.ScreenName</span>
                                        <span class="availability @lAvailabilityClass"></span>
                                    </a>
                                </div>
                            Next
    
                        </div>
                    Next
                </div>
                @<div class="col-xs-3 comments left-item dateSelected" style="display:none;"><span class="comment-color available-c "></span><span>Διαθέσιμες Θέσεις</span></div>
                @<div class="col-xs-3 comments dateSelected" style="display:none;"><span class="comment-color limited-c"></span><span>Περιορισμένες Θέσεις</span></div>
                @<div class="col-xs-3 comments  right-item dateSelected" style="display:none;"><span class="comment-color not-available-c"></span><span>Μη διαθέσιμες θέσεις</span></div>
            Else
                @<div class="payment-label-help vc-instructions @lInstructions">
                </div>
            End If
        </div>
    
    
    </div>
    
    <div class="col-xs-12 col-lg-12 col-md-12 ">
        @Using Html.BeginForm("Index", "TicketsSelection", FormMethod.Get, New With {.id = "nextStep", .class = "vc_step"})
            @<input type="hidden" name="CinemaCode" value="@Session("CinemaCode")" />
            @<input type="hidden" name="SessionID" value="" />
            @<input type="hidden" name="RenewSession" value="True" />
            @<button type="submit" id="nextEnabled" style="display:none;" class="btn btn-sm btn-vc btn-orange vc-process"><i class="glyphicon glyphicon-menu-right"></i>&nbsp;Επόμενο</button>
            @*<input type="submit" id="nextEnabled" style="display:none;" class="vc-process" value="" />*@
        End Using
        <div id="nextDisabled" class="vc_step">
            <a class="btn btn-sm btn-vc btn-light-gray disableClick"><i class="glyphicon glyphicon-menu-right"></i>&nbsp;Επόμενο</a>
            @*<img src="@Url.Content("~/img/real/next_idle.png")" />*@
        </div>
        @Using Html.BeginForm("Index", "Home", FormMethod.Get, New With {.id = "selectionOptions"})
            @<input type="hidden" name="CinemaCode" value="@Session("CinemaCode")" />
            @<input type="hidden" name="MovieCode" value="@Session("MovieCode")" />
            @<input type="hidden" name="ScreenTypeCode" value="@Session("ScreenTypeCode")" />
            @<input type="hidden" name="OnlyPlayingNow" value="@Session("OnlyPlayingNow")" />
        End Using
        <a id="resetOrder" href="@Url.Action("Index", "Home", New With {.Reset = True}, Nothing)" class="btn btn-sm btn-vc btn-orange pull-left vc_step vc-process"><i class="glyphicon glyphicon-menu-right"></i>&nbsp;Νέα Αναζήτηση</a>
        @*<a id="resetOrder" class="vc_step pull-left" href="@Url.Action("Index", "Home", New With {.Reset = True}, Nothing)"><img src="@Url.Content("~/img/real/new-search-active.png")" /></a>*@
    </div>
    

    Wednesday, October 10, 2018 7:12 AM
  • User-2146352328 posted

    page source

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
    
        <script>
    
            (function (i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
    
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date(); a = s.createElement(o),
    
                m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    
            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
    
    
    
            ga('create', 'UA-10216282-3', 'auto');
    
            ga('send', 'pageview');
    
    
    
        </script>
    
        <title>Village Cinemas ETicket</title>
        
        <link rel="icon" href="/WebTicketing/favicon.ico" type="image/x-icon" />
        <link href="/WebTicketing/Content/css?v=Uhjz-iIoh-C7LhhkZT9YJdwBtH1A0xw2pwwENu9AHyA1" rel="stylesheet"/>
    
        <script src="/WebTicketing/bundles/modernizr?v=inCVuEFe6J4Q07A0AcRsbJic_UE5MwpRMNGcOtk94TE1"></script>
    
        
    </head>
    <body>
        
        <script>
            window.onunload = function () { };
            window.history.go(1);
            //var blurred = false;
            //window.onblur = function () { blurred = true; };
            //window.onfocus = function () { blurred && (location.reload()); };
        </script>
    
        <!-- Spinner -->
        <div id="work-in-progress" style="display:none;">
            <div class="work-spinner">
                <i class="glyphicon glyphicon-cog gly-spin"></i>
            </div>
        </div>
        <div class="container">
            <div class="row site-cookie-policy" style="display:none;">
                <div class="container">
    
                    <div class="vc-description">
                        <p>
                            To website χρησιμοποιεί cookies για την λειτουργία του.  Αν δεν συμφωνείτε με τη χρήση των cookies, πρέπει να αλλάξετε τις σχετικές ρυθμίσεις στον browser σας.
                            Αν χρειάζεστε περισσότερες σχετικές πληροφορίες, επισκεφτείτε τους <a href="http://www.villagecinemas.gr/el/oroi-hrisis/" target="_blank">Όρους Χρήσης</a>.
                        </p>
                    </div>
                    <button class="btn btn-sm btn-vc btn-orange site-cookie-policy-agree ">
                        <i class="glyphicon glyphicon-menu-right"></i>Αποδοχή Cookies
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-lg-12 col-md-12 col-sm-12 borders vc_header">
                    <div class="row ">
                        <!-- Single button -->
                        <div class="col-xs-4 col-lg-4 col-md-4 vc_menu_item">
                                <span class="vc_label">MENU</span>
                                <div class="btn-group">
                                    <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn  custom-button dropdown-toggle " type="button">
                                        <span aria-hidden="true" class="menu-icon  menu-icon-silver"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                            <li><a href="#" data-toggle="modal" data-target="#login">Είσοδος Χρήστη</a></li>
                                            <li><a href="/WebTicketing/Account/SignInDetails?Loc=https%253A%252F%252Ftest.villagecinemas.gr%252FWebTicketing%252F">Δημιουργία Χρήστη</a></li>
                                                                                                            </ul>
                                </div>
                                        <div data-toggle="modal" data-target="#login" class="vc_desc" style="cursor:pointer;">Είσοδος</div>
    
                        </div>
    <div class="col-xs-5 col-lg-5 col-md-3 vc_wallet_icon">
            <span class="vc_wallet_icon_span">0</span>
    </div>                    <div class="col-xs-3 col-lg-3 col-md-5 kulikeio_cell">
                            <span class="kulikeio">
                                    <a href="/WebTicketing/ConcessionSelection?RenewSession=True"><img src="/WebTicketing/img/real/kulikeio.png"></a>
                            </span>
                        </div>
                    </div>
                </div>
                
    
    
    <div class="col-xs-12 col-lg-12 col-md-12 main_content">
        <div class="sidebar">
            <div class="grey_fields">
                Επιλογή Ταινίας
            </div>
                <div class="media_sidebar ">
                    <div class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <div class="media-body media_body_seperator">
                                <div class="view_media_title">ΨΥΧΡΑΙΜΙΑ</div>
                                <div class="view_media_pointer">
                                    <span class="glyphicon glyphicon-triangle-bottom pointer_icon"> </span>
                                </div>
                            </div>
                        </a>
                        <ul class="dropdown-menu with-scroll">
                                <li>
                                    <div class="media media_item_first vc-movie vc-process" style="cursor:pointer" data-vc-movie="HO00001599">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                    <img class="media-object" width="46" height="66" src="https://test.villagecinemas.gr/media/17919/TheSimpsonsMovie.jpg" alt="THE SIMPSONS MOVIE (ENG)">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">THE SIMPSONS: Η ΤΑΙΝΙΑ (ΥΠΟΤΙΤΛ)</h5>
                                                <h5 class="media-heading">THE SIMPSONS MOVIE (ENG)</h5>
                                        </div>
                                    </div>
    
                                </li>
                                <li>
                                    <div class="media media_item_sec vc-movie vc-process" style="cursor:pointer" data-vc-movie="HO00001856">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                    <img class="media-object" width="46" height="66" src="https://test.villagecinemas.gr/media/17920/FlyMeToTheMoon.jpg" alt="FLY ME TO THE MOON (3D)">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">ΤΑΞΙΔΙ ΣΤΟ ΦΕΓΓΑΡΙ (3D)</h5>
                                                <h5 class="media-heading">FLY ME TO THE MOON (3D)</h5>
                                        </div>
                                    </div>
    
                                </li>
                                <li>
                                    <div class="media media_item_first vc-movie vc-process" style="cursor:pointer" data-vc-movie="HO00001684">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                    <img class="media-object" width="46" height="66" src="https://test.villagecinemas.gr/media/17921/Psyxraimia.jpg" alt="ΨΥΧΡΑΙΜΙΑ">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">ΨΥΧΡΑΙΜΙΑ</h5>
                                        </div>
                                    </div>
    
                                </li>
                                <li>
                                    <div class="media media_item_sec vc-movie vc-process" style="cursor:pointer" data-vc-movie="HO00001654">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                    <img class="media-object" width="46" height="66" src="https://test.villagecinemas.gr/media/17925/30daysOfNight.jpg" alt="30 DAYS OF NIGHT">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">30 ΜΕΡΕΣ ΝΥΧΤΑ</h5>
                                                <h5 class="media-heading">30 DAYS OF NIGHT</h5>
                                        </div>
                                    </div>
    
                                </li>
                                <li>
                                    <div class="media media_item_first vc-movie vc-process" style="cursor:pointer" data-vc-movie="HO00001311">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                    <img class="media-object" width="46" height="66" src="https://test.villagecinemas.gr/media/17926/AsterixAndTheVikings.jpg" alt="ASTERIX AND THE VIKINGS (FR)">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">ΑΣΤΕΡΙΞ ΚΑΙ ΟΙ ΒΙΚΙΝΓΚΣ (ΥΠΟΤΙΤΛ)</h5>
                                                <h5 class="media-heading">ASTERIX AND THE VIKINGS (FR)</h5>
                                        </div>
                                    </div>
    
                                </li>
                                <li>
                                    <div class="media media_item_sec vc-movie vc-process" style="cursor:pointer" data-vc-movie="HO00001096">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                    <div style="display:block;width:46px;height:66px;"></div>
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">FANTASTIC FOUR</h5>
                                        </div>
                                    </div>
    
                                </li>
                                <li>
                                    <div class="media media_item_first vc-movie vc-process" style="cursor:pointer" data-vc-movie="HO00000335">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                    <img class="media-object" width="46" height="66" src="https://test.villagecinemas.gr/media/17918/MatrixRevolutions.jpg" alt="THE MATRIX REVOLUTIONS">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">THE MATRIX REVOLUTIONS</h5>
                                        </div>
                                    </div>
    
                                </li>
                                <li>
                                    <div class="media media_item_sec vc-movie vc-process" style="cursor:pointer" data-vc-movie="HO00000262">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                    <img class="media-object" width="46" height="66" src="https://test.villagecinemas.gr/media/17917/Matrix-Reloaded.jpg" alt="THE MATRIX RELOADED">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">THE MATRIX RELOADED</h5>
                                        </div>
                                    </div>
    
                                </li>
                                <li>
                                    <div class="media media_item_first vc-movie vc-process" style="cursor:pointer" data-vc-movie="HO00000384">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                    <img class="media-object" width="46" height="66" src="https://test.villagecinemas.gr/media/17927/Monster.jpg" alt="MONSTER">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">MONSTER</h5>
                                        </div>
                                    </div>
    
                                </li>
                                <li>
                                    <div class="media media_item_sec vc-movie vc-process" style="cursor:pointer" data-vc-movie="HO00000754">
                                        <div class="media-left media-middle">
                                            <a href="#">
                                                    <img class="media-object" width="46" height="66" src="https://test.villagecinemas.gr/media/17928/WeDontLiveHereAnymore.jpg" alt="WE DON&#39;T LIVE HERE ANYMORE">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h5 class="media-heading">WE DON&#39;T LIVE HERE ANYMORE</h5>
                                        </div>
                                    </div>
    
                                </li>
                        </ul>
                    </div>
                    <div class="media media_item_first">
                        <div class="collapse in">
                            <div class="media_content">
                                <img class="media-object" src="http://test.villagecinemas.gr/media/17921/Psyxraimia.jpg" alt="ΨΥΧΡΑΙΜΙΑ">
                            </div>
                            <span class="ratings κ17"></span>
    
                        </div>
                    </div>
                </div>
        </div>
    
        <div class="main_content_right">
            <div class="grey_fields">
                Επιλογή Κινηματογράφου
                <a data-toggle="collapse" href="#select-class-type" aria-expanded="false" aria-controls="select-class-type" onclick="show_select_class()">
                        <span class="pull-right select_class class_active "><span>Επιλογή Τύπου Αίθουσας</span><span id="search-class-icon" class="toggle-search-class circle-plus pull-right"></span></span>
                </a>
            </div>
            <div class="collapse" id="select-class-type">
                <div class="choose-day-slider choose-type-center">
                    <div class="carousel slide multi-item-carousel" data-interval="false" id="screenTypeSelection">
                        <div class="carousel-inner">
                                <div class="item active">
                                        <div class="col-xs-2">
                                            <a class="btn type1 dark vc-screentype datepick" data-vc-screentype="-1" style="cursor:pointer">
                                                <img src="/WebTicketing/img/real/all.png">
                                            </a>
                                        </div>
                                        <div class="col-xs-2">
                                            <a class="btn type1 dark vc-screentype  disableClick  vc-process datepick" data-vc-screentype="1" style="cursor:pointer">
                                                <img src="/WebTicketing/img/real/comfort.png">
                                            </a>
                                        </div>
                                        <div class="col-xs-2">
                                            <a class="btn type1 dark vc-screentype    vc-process datepick" data-vc-screentype="3" style="cursor:pointer">
                                                <img src="/WebTicketing/img/real/gold_class.png">
                                            </a>
                                        </div>
                                        <div class="col-xs-2">
                                            <a class="btn type1 dark vc-screentype  disableClick  vc-process datepick" data-vc-screentype="6" style="cursor:pointer">
                                                <img src="/WebTicketing/img/real/vkids-cat.png">
                                            </a>
                                        </div>
                                        <div class="col-xs-2">
                                            <a class="btn type1 dark vc-screentype    vc-process datepick" data-vc-screentype="4" style="cursor:pointer">
                                                <img src="/WebTicketing/img/real/vmax.png">
                                            </a>
                                        </div>
                                        <div class="col-xs-2">
                                            <a class="btn type1 dark vc-screentype  disableClick  vc-process datepick" data-vc-screentype="5" style="cursor:pointer">
                                                <img src="/WebTicketing/img/real/sphera-cat.png">
                                            </a>
                                        </div>
                                        <div class="col-xs-2">
                                            <a class="btn type1 dark vc-screentype  disableClick  vc-process datepick" data-vc-screentype="2" style="cursor:pointer">
                                                <img src="/WebTicketing/img/real/summer.png">
                                            </a>
                                        </div>
                                </div>
                                <div class="item ">
                                </div>
                        </div>
                        <a class="left carousel-control" data-slide="prev" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-left"></i></a>
                        <a class="right carousel-control" data-slide="next" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-right"></i></a>
    
                    </div>
                </div>
            </div>
    
    <div id="select-center" class="choose-center">
        <div class="choose-day-slider">
            <div class="carousel slide multi-item-carousel" data-interval="false" id="cinemaSelection">
                <div class="carousel-inner">
                        <div class="item active">
        <div class="col-xs-2">
             <a class="datepick vc-selected  vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="99">
                 <span class="str-day">TEST CINEMA1</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="21">
                 <span class="str-day">Village ΑΤ ΤΗΕ MALL</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="01">
                 <span class="str-day">Village ΡΕΝΤΗ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="24">
                 <span class="str-day">Village ΦΑΛΗΡΟ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick   vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="26">
                 <span class="str-day">Village ΑΓ. ΔΗΜΗΤΡΙΟΣ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="03">
                 <span class="str-day">Village ΠΑΓΚΡΑΤΙ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="22">
                 <span class="str-day">Village Cosmos ΘΕΣΣ.</span><br>
             </a>
        </div>
    </div>
                        <div class="item ">
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="23">
                 <span class="str-day">Village ΒΟΛΟΣ</span><br>
             </a>
        </div>
    </div>
                </div>
                <a class="left carousel-control" data-slide="prev" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="right carousel-control" data-slide="next" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
    
                <div class="grey_fields">
                    Επιλογή Ημέρας
                </div>
                <div class="choose-day">
                    <div class="choose-day-slider">
                        <div id="theCarousel" class="carousel slide multi-item-carousel" data-interval="false">
                            <div class="carousel-inner">
                                    <div class="item active">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181009" id="date20181009">
                                                        <span class="str-day">09/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181010" id="date20181010">
                                                        <span class="str-day">10/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181011" id="date20181011">
                                                        <span class="str-day">11/10</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181012" id="date20181012">
                                                        <span class="str-day">12/10</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181013" id="date20181013">
                                                        <span class="str-day">13/10</span><br />
                                                        <span class="day-item">Σάββατο</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181014" id="date20181014">
                                                        <span class="str-day">14/10</span><br />
                                                        <span class="day-item">Κυριακή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181015" id="date20181015">
                                                        <span class="str-day">15/10</span><br />
                                                        <span class="day-item">Δευτέρα</span>
                                                    </a>
                                                </div>
                                    </div>
                                    <div class="item ">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181016" id="date20181016">
                                                        <span class="str-day">16/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181017" id="date20181017">
                                                        <span class="str-day">17/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181018" id="date20181018">
                                                        <span class="str-day">18/10</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181019" id="date20181019">
                                                        <span class="str-day">19/10</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181020" id="date20181020">
                                                        <span class="str-day">20/10</span><br />
                                                        <span class="day-item">Σάββατο</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181021" id="date20181021">
                                                        <span class="str-day">21/10</span><br />
                                                        <span class="day-item">Κυριακή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181022" id="date20181022">
                                                        <span class="str-day">22/10</span><br />
                                                        <span class="day-item">Δευτέρα</span>
                                                    </a>
                                                </div>
                                    </div>
                                    <div class="item ">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181023" id="date20181023">
                                                        <span class="str-day">23/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181024" id="date20181024">
                                                        <span class="str-day">24/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181025" id="date20181025">
                                                        <span class="str-day">25/10</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181026" id="date20181026">
                                                        <span class="str-day">26/10</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181027" id="date20181027">
                                                        <span class="str-day">27/10</span><br />
                                                        <span class="day-item">Σάββατο</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181028" id="date20181028">
                                                        <span class="str-day">28/10</span><br />
                                                        <span class="day-item">Κυριακή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181029" id="date20181029">
                                                        <span class="str-day">29/10</span><br />
                                                        <span class="day-item">Δευτέρα</span>
                                                    </a>
                                                </div>
                                    </div>
                                    <div class="item ">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181030" id="date20181030">
                                                        <span class="str-day">30/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181031" id="date20181031">
                                                        <span class="str-day">31/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181101" id="date20181101">
                                                        <span class="str-day">01/11</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181102" id="date20181102">
                                                        <span class="str-day">02/11</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                    </div>
                            </div>
                            <a data-slide="prev" href="#theCarousel" class="left carousel-control"><i class="glyphicon glyphicon-chevron-left"></i></a>
                            <a data-slide="next" href="#theCarousel" class="right carousel-control"><i class="glyphicon glyphicon-chevron-right"></i></a>
                        </div>
    
    
                    </div>
                </div>
                <div class="grey_fields dateSelected" style="display:none;">
                    Επιλογή Ώρας
                </div>
                <div class="payment-label-help vc-instructions instructions-date">
                </div>
                <div class="choose-hour dateSelected">
                        <div class="choose-hour-slider" id="timeof20181009" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66634">
                                        <span class="str-time">22:35</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181010" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66662">
                                        <span class="str-time">15:45</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66659">
                                        <span class="str-time">17:15</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66663">
                                        <span class="str-time">22:25</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181011" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66691">
                                        <span class="str-time">15:50</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66688">
                                        <span class="str-time">17:20</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66692">
                                        <span class="str-time">22:30</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181012" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66720">
                                        <span class="str-time">16:05</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66717">
                                        <span class="str-time">17:35</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66721">
                                        <span class="str-time">22:45</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181013" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66749">
                                        <span class="str-time">16:10</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66746">
                                        <span class="str-time">17:40</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66750">
                                        <span class="str-time">22:50</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181014" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66778">
                                        <span class="str-time">16:20</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66775">
                                        <span class="str-time">17:50</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66779">
                                        <span class="str-time">23:00</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181015" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66807">
                                        <span class="str-time">15:40</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66804">
                                        <span class="str-time">17:10</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66808">
                                        <span class="str-time">22:20</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181016" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66836">
                                        <span class="str-time">15:55</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66833">
                                        <span class="str-time">17:25</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66837">
                                        <span class="str-time">22:35</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181017" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66865">
                                        <span class="str-time">15:45</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66862">
                                        <span class="str-time">17:15</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66866">
                                        <span class="str-time">22:25</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181018" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66894">
                                        <span class="str-time">15:50</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66891">
                                        <span class="str-time">17:20</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66895">
                                        <span class="str-time">22:30</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181019" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66923">
                                        <span class="str-time">16:05</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66920">
                                        <span class="str-time">17:35</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66924">
                                        <span class="str-time">22:45</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181020" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66952">
                                        <span class="str-time">16:10</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66949">
                                        <span class="str-time">17:40</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66953">
                                        <span class="str-time">22:50</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181021" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66981">
                                        <span class="str-time">16:20</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="66978">
                                        <span class="str-time">17:50</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="66982">
                                        <span class="str-time">23:00</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181022" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67010">
                                        <span class="str-time">15:40</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="67007">
                                        <span class="str-time">17:10</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67011">
                                        <span class="str-time">22:20</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181023" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67039">
                                        <span class="str-time">15:55</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="67036">
                                        <span class="str-time">17:25</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67040">
                                        <span class="str-time">22:35</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181024" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67068">
                                        <span class="str-time">15:45</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="67065">
                                        <span class="str-time">17:15</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67069">
                                        <span class="str-time">22:25</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181025" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67097">
                                        <span class="str-time">15:50</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="67094">
                                        <span class="str-time">17:20</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67098">
                                        <span class="str-time">22:30</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181026" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67126">
                                        <span class="str-time">16:05</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="67123">
                                        <span class="str-time">17:35</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67127">
                                        <span class="str-time">22:45</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181027" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67155">
                                        <span class="str-time">16:10</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="67152">
                                        <span class="str-time">17:40</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67156">
                                        <span class="str-time">22:50</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181028" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67184">
                                        <span class="str-time">16:20</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="67181">
                                        <span class="str-time">17:50</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67185">
                                        <span class="str-time">23:00</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181029" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67213">
                                        <span class="str-time">15:40</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="67210">
                                        <span class="str-time">17:10</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67214">
                                        <span class="str-time">22:20</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181030" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67242">
                                        <span class="str-time">15:55</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="67239">
                                        <span class="str-time">17:25</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67243">
                                        <span class="str-time">22:35</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181031" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67271">
                                        <span class="str-time">15:45</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="67268">
                                        <span class="str-time">17:15</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67272">
                                        <span class="str-time">22:25</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181101" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67300">
                                        <span class="str-time">15:50</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available vmax-class" id="67297">
                                        <span class="str-time">17:20</span>
                                        <span class="type-item">VMax (ΑΙΘ 7)</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67301">
                                        <span class="str-time">22:30</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                        <div class="choose-hour-slider" id="timeof20181102" style="display:none;">
                                <div class="col-xs-2 extra-marg">
                                    <a href="#" class="timepicker available golden-class" id="67329">
                                        <span class="str-time">16:05</span>
                                        <span class="type-item">GOLD 1</span>
                                        <span class="availability available"></span>
                                    </a>
                                </div>
    
                        </div>
                </div>
                <div class="col-xs-3 comments left-item dateSelected" style="display:none;"><span class="comment-color available-c "></span><span>Διαθέσιμες Θέσεις</span></div>
                <div class="col-xs-3 comments dateSelected" style="display:none;"><span class="comment-color limited-c"></span><span>Περιορισμένες Θέσεις</span></div>
                <div class="col-xs-3 comments  right-item dateSelected" style="display:none;"><span class="comment-color not-available-c"></span><span>Μη διαθέσιμες θέσεις</span></div>
        </div>
    
    
    </div>
    
    <div class="col-xs-12 col-lg-12 col-md-12 ">
    <form action="/WebTicketing/TicketsSelection" class="vc_step" id="nextStep" method="get">        <input type="hidden" name="CinemaCode" value="99" />
            <input type="hidden" name="SessionID" value="" />
            <input type="hidden" name="RenewSession" value="True" />
            <button type="submit" id="nextEnabled" style="display:none;" class="btn btn-sm btn-vc btn-orange vc-process"><i class="glyphicon glyphicon-menu-right"></i>&nbsp;Επόμενο</button>
    </form>    <div id="nextDisabled" class="vc_step">
            <a class="btn btn-sm btn-vc btn-light-gray disableClick"><i class="glyphicon glyphicon-menu-right"></i>&nbsp;Επόμενο</a>
            
        </div>
    <form action="/WebTicketing/" id="selectionOptions" method="get">        <input type="hidden" name="CinemaCode" value="99" />
            <input type="hidden" name="MovieCode" value="HO00001684" />
            <input type="hidden" name="ScreenTypeCode" />
            <input type="hidden" name="OnlyPlayingNow" />
    </form>    <a id="resetOrder" href="/WebTicketing/?Reset=True" class="btn btn-sm btn-vc btn-orange pull-left vc_step vc-process"><i class="glyphicon glyphicon-menu-right"></i>&nbsp;Νέα Αναζήτηση</a>
        
    </div>
    
                <div class="col-xs-12 col-lg-12 col-md-12 pre_footer">
                </div>
                <div class="col-xs-12 col-lg-12 col-md-12 footer">
                    <p>
                        &copy; 2016 - 2018 VILLAGE ROADSHOW S.A.<br />
                        Χρησιμοποιώντας το σύστημα έκδοσης εισιτηρίων και αγοράς προϊόντων κυλικείου, συμφωνείτε με τους <a href="https://www.villagecinemas.gr/el/oroi-hrisis/" target="_blank">όρους χρήσης</a>.
                    </p>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="login1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close close-modal-custom" data-dismiss="modal" aria-label="Close">
                            <span style="margin-right:22px;">Είσοδος Χρήστη</span>
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
    <form action="/WebTicketing/Account/Login" method="post" role="form">                    <div class="modal-body text-center">
                            <div class="personal-group1">
                                <div class="payment-other-personaldata reformed">Χρήστης</div>
                                <div class="register-texts"><input Name="username" data-val="true" data-val-required="Το Όνομα Χρήστη είναι υποχρεωτικό πεδίο" name="$VB$Local_luser.Username" type="text" value="" /></div>
                            </div>
                            <div class="personal-group1">
                                <div class="payment-other-personaldata reformed">Κωδικός</div>
                                <div class="register-texts"><input Name="password" data-val="true" data-val-required="Ο Κωδικός Χρήστη είναι υποχρεωτικό πεδίο" name="$VB$Local_luser.Password" type="password" /></div>
                            </div>
                            <div class="checkbox pull-right modal-checkbox">
                                <label>
    
                                    Να αποθηκευτεί
                                    <input type="checkbox" name="RememberMe" value="true">
                                    <span class="custom-check modal-checkbox-extrmarg"></span>
                                    <input type="hidden" name="RememberMe" value="false" />
    
                                </label>
                            </div>
    
    
    
                        </div>
                        <div class="modal-footer">
                            <div class="row" style="padding-top-10px;">
                                <div class="col-xs-12">
                                    <a href="/WebTicketing/Account/RemindPassword" class="btn btn-sm forgot-pass-btn pull-left"><i class="glyphicon glyphicon-menu-right"></i>&nbsp;Αλλαγή Κωδικού</a>
                                    <button type="submit" class="btn btn-sm login-btn pull-right "><i class="glyphicon glyphicon-menu-right"></i>&nbsp;Είσοδος</button>
                                    
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <a href="/WebTicketing/Account/SignInDetails" class="btn btn-sm create-user pull-left "><i class="glyphicon glyphicon-menu-right"></i>&nbsp;Δημιουργία Χρήστη</a>
                                    
                                    <a href="/WebTicketing/Account/ExternalLogin?Provider=Facebook" class="btn btn-sm fb-login pull-right "><i class="glyphicon glyphicon-menu-right"></i>&nbsp;Facebook</a>
                                </div>
                            </div>
                             <div class="row">
                                 <div class="col-xs-12">
                                     <a href="/WebTicketing/Account/ExternalLogin?Provider=Google" class="btn btn-sm google-login pull-right "><i class="glyphicon glyphicon-menu-right"></i>&nbsp;Google</a>
                                 </div>
                             </div>
                             
                        </div>
    </form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    
    
        <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header login_modal_header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 class="modal-title" id="myModalLabel">Είσοδος Χρήστη</h3>
                    </div>
                    <div class="modal-body login-modal">
                        <div class="clearfix"></div>
                        <div id='social-icons-conatainer'>
    <form action="/WebTicketing/Account/Login" method="post" role="form">                        <div class='modal-body-left'>
                                <div class="form-group">
                                    <input Class="form-control login-field" Name="username" Placeholder="Χρήστης ή email" data-val="true" data-val-required="Το Όνομα Χρήστη είναι υποχρεωτικό πεδίο" name="$VB$Local_luser.Username" type="text" value="" />
                                    <i class="fa fa-user login-field-icon"></i>
                                </div>
    
                                <div class="form-group">
                                    <input Class="form-control login-field" Name="password" Placeholder="Κωδικός" data-val="true" data-val-required="Ο Κωδικός Χρήστη είναι υποχρεωτικό πεδίο" name="$VB$Local_luser.Password" type="password" />
                                    <i class="fa fa-lock login-field-icon"></i>
                                </div>
    
                                <div class="form-group">
                                    <div class="checkbox pull-right modal-checkbox">
                                        <label>
                                            Να αποθηκευτεί
                                            <input type="checkbox" name="RememberMe" value="true">
                                            <span class="custom-check modal-checkbox-extrmarg"></span>
                                            <input type="hidden" name="RememberMe" value="false" />
    
                                        </label>
                                    </div>
                                </div>
                                 <button type="submit" class="btn btn-sm login-btn pull-right ">Είσοδος</button>
                                
                                 <a href="/WebTicketing/Account/SignInDetails" class="btn btn-sm create-user">Δημιουργία Χρήστη</a>
                                 <a href="/WebTicketing/Account/RemindPassword" class="btn btn-sm forgot-pass-btn pull-left">Αλλαγή Κωδικού</a>
                                
                            </div>
    </form>
    
                            <div class='modal-body-right'>
                                <div class="modal-social-icons">
                                    <a href="/WebTicketing/Account/ExternalLogin?Provider=Facebook" class="btn btn-sm facebook pull-left">Facebook</a>
                                    
                                    <a href="/WebTicketing/Account/ExternalLogin?Provider=Google" class="btn btn-sm google">Google</a>
                                    
                                </div>
                            </div>
                            <div id='center-line'> &nbsp;Ή&nbsp; </div>
                        </div>
                        <div class="clearfix"></div>
    
                        
                    </div>
                    <div class="clearfix"></div>
                    <div class="modal-footer login_modal_footer">
                    </div>
                </div>
            </div>
        </div>
    
        <!-- Error Modal -->
        <div id="error" class="modal fade" role="dialog">
            <div class="modal-dialog">
    
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close close-modal-custom" data-dismiss="modal" aria-label="Close">
    
                            <span style="margin-right:22px;">Υπήρξε κάποιο πρόβλημα</span>
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
    </ul></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
    
            </div>
        </div>
    
    
        <script src="/WebTicketing/bundles/jquery?v=yuMp_AiknJx1CClwZg1H_FF6IUxqQeDHAjt3qZKPvCs1"></script>
    
        
        <script src="/WebTicketing/bundles/jqueryval?v=dJkrBZRpI6bAhfY20X5yFlXxot_RINJl5v4Yf3XbfXo1"></script>
    
        <script src="/WebTicketing/bundles/bootstrap?v=-ktyuuYVm8reiCqek-REkH9kFQQZ53F1Ay-TXz9RIew1"></script>
    
        <script>
            var siteRoot = '/WebTicketing/';
            var loading = [];
            $(document).ajaxStart(function () {
                $('#work-in-progress').fadeIn(100);
                loading.push(1);
            });
            $('.vc-process').on('click', function () {
                loading.push(1);
                $('#work-in-progress').fadeIn(100);
            });
            $(document).ajaxStop(function () {
                loading.pop(1);
                if (loading.length <= 0) {
                    $('#work-in-progress').fadeOut(100);
                }
            });
    
            function setCookie(cname, cvalue, exdays) {
                var d = new Date();
                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                var expires = "expires=" + d.toUTCString();
                document.cookie = cname + "=" + cvalue + "; " + expires;
            }
    
            function getCookie(cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(name) == 0) {
                        return c.substring(name.length, c.length);
                    }
                }
                return "";
            }
            function handleCookiePolicy() {
                var $cookiePolicyInfo = $('.site-cookie-policy');
                var cookie = getCookie('cookies_accepted');
                if (cookie !== 'T') {
                    $cookiePolicyInfo.show();
                }
    
                $cookiePolicyInfo.find('.site-cookie-policy-agree').off('click').on('click', function (e) {
                    e.preventDefault();
                    setCookie('cookies_accepted', 'T', 365)
                    $cookiePolicyInfo.hide();
                });
            }
            handleCookiePolicy();
    
            $.validator.setDefaults({
                ignore: "",///":hidden:not(#agreeTerms)",
                submitHandler: function (form) {
                    $('#work-in-progress').fadeIn();
                    form.submit();
                }
            })
    
            //$(window).bind("load", function () {
            //    $('#work-in-progress').fadeOut(100);
            //});
            //$(document).ready(function () {
            //    var dirty_bit = $('#page_is_dirty');
            //    console.log(dirty_bit, dirty_bit.val(), dirty_bit.val()==='1');
    
            //    if (dirty_bit.val() === '1') {
            //        console.log('forward');
            //        window.history.forward();
            //    }
            //    dirty_bit.val('1');
            //})
        </script>
        
        <script>
            //var cinemaCode;
            //var movieCode;
            //var screenTypeCode;
            //var onlyPlayingNow = true;
            $(document).ready(function () {
                var form = $('#selectionOptions');
                var submitForm = function () {
                    form.children(':input[value=""],:input:not([value])').attr("disabled", "disabled");
                    form.submit();
                }
                $('.vc-movie').click(function () {
                    $('input[name="MovieCode"]', form).val($(this).attr('data-vc-movie'));
                    submitForm();
                })
                $('.vc-cinema').click(function () {
                    $('input[name="CinemaCode"]', form).val($(this).attr('data-vc-cinema'));
                    submitForm();
                })
                $('.vc-screentype').click(function () {
                    $('input[name="ScreenTypeCode"]', form).val($(this).attr('data-vc-screentype'));
                    submitForm();
                })
                $('.vc-clear').click(function () {
                    form.find("input").val("");
                    submitForm();
                })
            })
            function show_select_class() {
    
                if ($('#select-class-type').hasClass("in")) {
                    //setTimeout(function () { $('.select_class').removeClass('class_active'); }, 380);
                    $('#select-center').fadeIn(300);
                    $('#search-class-icon').removeClass('circle-minus');
                    $('#search-class-icon').addClass('circle-plus');
                } else {
                    //$('.select_class').addClass('class_active');
                    $('#select-center').fadeOut(384);
                    $('#search-class-icon').removeClass('circle-plus');
                    $('#search-class-icon').addClass('circle-minus');
                }
            }
            function selectDate(date) {
                console.log(date);
                var dateId = "#date" + date;
                var timeId = "#timeof" + date;
    /*            $('.vc-selected', '.choose-day-slider').removeClass('vc-selected'); */
    /* $('choose-day').find('choose-day-slider').removeClass('vc-selected'); */
    
    
    /* $('.vc-selected', $('choose-day').find('choose-day-slider')).removeClass('vc-selected'); */
    $('.vc-selected', $('choose-day').find('choose-day-slider').find('#theCarousel').find('.item active').removeClass('vc-selected');
    
    
    
                $(dateId).addClass('vc-selected');
                $('.vc-selected', '.choose-hour-slider').removeClass('vc-selected');
                $('.choose-hour-slider').hide();
                $('.vc-instructions').hide();
                $('.dateSelected').show();
                $(timeId).show();
                var sessions = $('.timepicker:not(.not-available)', timeId);
                var firstSession = $(sessions[0]).attr('id');
                if (!!firstSession) {
                    selectHour(firstSession, false);
                } else {
                    $('#nextEnabled').hide();
                    $('#nextDisabled').show();
                }
            }
            var selectedSession;
            function selectHour(session, allowAutoselection) {
                if (allowAutoselection && selectedSession === session) {
                    $('#nextStep').submit();
                }
    
                selectedSession = session;
                var formNext = $('#nextStep');
                var sessionId = '#' + session;
                $('.vc-selected', '.choose-hour-slider').removeClass('vc-selected');
                $(sessionId).addClass('vc-selected');
                $('#nextEnabled').show();
                $('#nextDisabled').hide();
                $('input[name="SessionID"]', formNext).val(session);
            }
            $('.timepicker').click(function () {
                var sessionId = $(this).attr('id');
                selectHour(sessionId, true);
            })
            $('.datepick').click(function () {
                var dateId = $(this).attr('data-vc-selecteddate');
                selectDate(dateId);
            })
        </script>
    
    </body>
    </html>
    

    Wednesday, October 10, 2018 7:13 AM
  • User-2146352328 posted

    css.

    /* vim: set expandtab tabstop=2 shiftwidth=2 softtabstop=2: */
    .container {
        width:1000px!important;
    }
    
    .sidebar,
    .main_content {
        background-color: white;
    }
    .kulikeio_cell {
        margin-top: 59px;
    
        z-index:1;
    }
    .kulikeio {
        float: right;
        padding-right: 16px;
    }
    
    .vc_header {
        background-color: white;
        height: 131px;
        margin-bottom: 0px;
        padding-left: 1px;
        border-bottom: 1px solid #E5E7E6;
    	background: url('../img/real/header.png') white no-repeat;
        background-size: 100% 100%;
    }
    
    .vc_header_noeticket {
        background-color: white;
        height: 131px;
        margin-bottom: 0px;
        padding-left: 1px;
        border-bottom: 1px solid #E5E7E6;
    	background: url('../img/real/header_partner.png') white no-repeat;
        background-size: 100% 100%;
    }
    
    .vc_wallet_icon {
    	background: url('../img/real/wallet.png') transparent no-repeat;
        z-index: 1;
        height: 22px;
        margin-top: 89px;
    }
    
    .vc_wallet_icon > a {
    	display:block;
        width:15px;
    }
    
    .vc_wallet_full {
    	background: url('../img/real/wallet_full.png') transparent no-repeat;
        z-index: 1;
        height: 22px;
        margin-top: 89px;
    
    }
    .vc_wallet_icon_span {
        display: block;
        margin-top: 0px;
        margin-left: -12px;
        color: white;
        font-size: 11px;
    }
    
    .vc_desc  { 
        display: inline-block;
        padding-left: 12px;    
        font-size: 14px;
        color: #F78D1E;  
    }
    
    
    .vc_desc_2  {
          padding-top: 33px;
        display: inline-block;
        padding-left: 52px;}
    
    
    .vc_menu {
        height: 57px;
        background-color: white;
        border-bottom: 1px solid #F7F7F7 ;background: url('../img/menu.png') #F3F3F3 no-repeat;
        background-size: 353px 60px;
    }
    
    .grey_fields {
        margin-top: 8px;
        background-color: #e6e7e7;
        padding: 4px;
        padding-left: 7px;
        border-left: 2px solid orange;
        /* font-size: 14px; */
        color: grey;
        font-size: 13px;
        font-weight:bold;
    }
    
    .seatSelecion{
        cursor:pointer;
    }
    
    .glyphicon-nav {
        width: 18px;
        padding: 8px 0;
        ;
        display: inline-block;
    }
    .glyphicon-nav:before {
        content: '';
        ;
        width: 100%;
        height: 100%;
        left: 0;
        border-top: 2px solid black;
        border-bottom: 2px solid black;
        top: 0px;
    }
    .glyphicon-nav:after {
        content: '';
        ;
        top: 7px;
        left: 0px;
        height: 2px;
        width: 100%;
        background: black;
    }
    
    .vc_menu_item {
        DISPLAY: BLOCK;
        PADDING-LEFT: 32px;
        font-size: 9px;
        padding-top: 78px;
        color: #F78D1E;
    }
    
    .vc_menu_item .vc_label {
        display:block;
        padding-left: 9px;
    }
    
    
    .pre_footer{
        background-color: #e6e7e7;
        padding: 4px;
        border-bottom: 3px solid #e0922f;
    }
    
    .footer {
         height: 42px;
        background-color: white;
        padding-left: 22px;
        padding-top: 7px;
        font-size: 11px;
    }
    
    .main_content {
        height:562px;
    }
    .vc_step {
        margin-top: -19px;
        float: right;
        margin-right: 20px;
    }
    
    .sidebar {
        width: 266px;
        display: block;
        padding-right: 5px;
        height:492px;
        display:block;
        float:left;
    }
    
    .custom-sidebar {
     height:495px;
    }
    
    .media_sidebar {
      margin-top: 5px;
      border: 2px solid #d0d1d3;
    }
    
    .media_item_first {
        padding: 5px;
        margin-top: 3px;
        margin-bottom: -4px;
    }
    
    .media_item_sec {
        background-color: #e6e7e7;
        padding: 5px;
        margin-top: 6px;
    }
    
    
    .main_content_right {
        margin-left: 266px;
        border-left: 1px solid rgb(210, 210, 212);
        padding-left: 5px;
    }
    ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }
    ::-webkit-scrollbar-track {
        border-left: 1px solid #ccc;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #ccc;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: #aaa;
    }
    .with-scroll {
        overflow-y: scroll;
        height: 490px!important;
    }
    
    ul.with-scroll{
        height:380px !important;
    }
    
    /*view movie*/
    
    .media_content>img.media-object{
        width:216px;
        height:312px;
    }
    
    .media_view_sidebar {
        height: 78px;
        margin-top: 6px;
        border-bottom: 1px solid rgb(210, 210, 212);
    } 
    
    .view_media_title {
        height: 67px;
        display: block;
        width: 199px;
        float: left;
        padding-top: 9px;
        padding-left: 10px;
        color: #F78D1E;
        font-weight: bold;
    
    
    }
    
    .view_media_pointer {
        height: 74px;
        display: block;
        width: 28px;
        float: right;
        background-color: #E6E7E7;
    
    }
    
    .pointer_icon {
        padding-top: 28px;
        padding-left: 8px;
        font-size: 13px;
    }
    
    .media_content {
        background-color: #e6e7e7;
        margin-top: 8px;
        height: 349px;
        padding:11px;
        padding: 11px;
        /*padding-left: 12px;*/
    }
    
    .media_content img {
        height:312px;
      border-radius: 16px;
    
    }
    
    .collapse .links {
        display: inline-block;
        width: 100%;
        margin-top: 6px;
        color: #f78d1e;
    
    }
    .links {
        cursor:pointer;
    }
    
    .links > a{
        color: #f78d1e !important;
        text-decoration:none;
    }
    
    .view_media_pointer a{
        color:black;
    }
    
    .view_media_pointer a:hover {
      color: black ;
    }
    
    .media_body_seperator {
        border-bottom: 1px solid #d0d1d3;
        /*padding-bottom: 8px;*/
    }
    
    .ratings{
        display: block;
        margin-top: -16px;
        height: 31px;
        width: 45px;
        margin-right: 102.5px;
        float: right;
    }
    
    .κ12 {
        background: url('../img/real/K12.gif');
        border: 2px solid #d0d1d3;
    }
    
    .κ15 {
            background: url('../img/real/K15.gif');
        border: 2px solid #d0d1d3;
    }
    
    .κ18 {
            background: url('../img/real/K18.gif');
        border: 2px solid #d0d1d3;
    }
    
    .custom-button {
        border: 0px;
        box-shadow: none;
        background-color: white;
    }
    
    .custom-button:active{
        box-shadow: none!important;
        border-radius: 0px;
    }
    
    .btn-group.open .dropdown-toggle {
    -webkit-box-shadow: none;
     box-shadow: none;
    }
    
    .choose-center {
        height: 92px;
        margin-top: 7px;
        border-bottom: 1px solid rgb(210, 210, 212);
    }
    
    .choose-center .item-class {
        display: inline-block;
        width: 174.5px;
        height: 40px;
        padding: 10px 0;
    
        margin-right: -4px;
    }
    
    .choose-center  .light {
        background-color: #F3F3F3;
        border:1px solid #F3F3F3;
    }
    
    .choose-center .dark {
        background-color: #E6E7E7;
        border:1px solid #E6E7E7;
    }
    
    .choose-day {
       height: 102px;
        margin-top: 6px;
        border-bottom: 1px solid rgb(210, 210, 212);
        margin-bottom: 11px;
    }
    
    .choose-day-slider {
        background-color: #E6E7E7;
        height: 92px;
    }
    
    .choose-hour {
        height: 174px;
        margin-top: 6px;
    }
    
    
    .choose-hour-slider {
        background-color: #E6E7E7;
        height: 179px;
        overflow-y: auto;
        padding-bottom: 5px;}
    
    
    .select_class {
        height: 29px;
        display: block;
        height: 25px;
        /*width: 195px;*/
        width:199px;
        padding-left: 23px;
        padding-top: 4px;
        margin-right: -4px;
        margin-top: -3px;
        font-size: 0.85em;
    }
    
    .class_active {
        background: url('../img/real/select.png') no-repeat;    
    }
    
    .darker {
     background-color: #d0d1d3;
    }
    
    a, a:hover, a:visited , a:focus{
        color: #808080;
    }
    
    .choose-type-center {
        margin-top: 0px;
        width: 100%;
        /* background: url('../img/real/center-type.png') no-repeat; */
        background: url('../img/real/center-type.png') no-repeat;
        background-size: 698px;
        display: block;
    	padding-top: 7px;
    	padding-left: 4px;
    	height: 110px;
    	background-color: #d0d1d3;
    }
    
    
    .type1 {
          /* width: 98px; */
        /* display: inline-block; */
        /* margin-top: 9px; */
        /* height: 71px; */
        /* margin-left: 3px; */
        /* border-radius: 0px; */
        /* margin: 0px; */
        padding: 5px;
        background-color:white}
    
    .type1 img {
        width: 83px;
        height: 49px;
    }
    
    a.type1:hover ,a.type2:hover,a.type3:hover,a.type4:hover,a.type5:hover,a.type6:hover{
    border: 1px solid black;
    }
    
    a.type1.vc-selected,
    a.type2.vc-selected,
    a.type3.vc-selected,
    a.type4.vc-selected,
    a.type5.vc-selected,
    a.type6.vc-selected {
        background-color: #FFFBF4;
        border: 1px solid black;
        z-index: 9999999999;
        text-decoration:none;
        color:#333;
        cursor:pointer;
        padding-right :5px;
    }
    
    .type2 {
        width: 98px;
        display: inline-block;
        margin-top: 9px;
        height: 71px;
        margin-left: -2px;
        border-radius: 0px
    }
    .type3 {
        width: 98px;
        display: inline-block;
        margin-top: 9px;
        height: 71px;
        margin-left: -1px;
        border-radius: 0px
    }
    
    .type4 {
        width: 98px;
        display: inline-block;
        margin-top: 9px;
        height: 71px;
        margin-left: 0px;
        border-radius: 0px;
    }
    
    .type5 {
        width: 98px;
        display: inline-block;
        margin-top: 9px;
        height: 71px;
        margin-left: 2px;
        border-radius: 0px;
    }
    
    .type6 {
        width: 98px;
        display: inline-block;
        margin-top: 9px;
        height: 71px;
        margin-left: 1px;
        border-radius: 0px;
    }
    
    .menu-icon {
         margin-top: -4px;
        /* background: url('../img/real/center-type.png') no-repeat; */
        background: url('../img/real/menu-icon.png') no-repeat;
        background-size: 33px 26px;
        display: block;
        height: 26px;
        width: 33px;
        margin-left: -6px;
        border-radius: 0px;
    }
    
    .menu-icon-black {
        background: url('../img/real/menu-icon.png') no-repeat;
        background-size: 33px 26px;
    }
    
    
    .menu-icon-silver {
    
        background: url('../img/real/menu-icon-silver.png') no-repeat;
        background-size: 33px 26px;
    }
    
    a.item-class.light.text-center:hover,
    a.item-class.dark.text-center:hover,
    a.item-class.light.text-center.vc-selected,
    a.item-class.dark.text-center.vc-selected {   
        border: 1px solid black;
        z-index: 9999999999;
        width: 174px;
        height: 40px;
        text-decoration:none;
        color:#333;
        cursor:pointer;
        padding-right :10px;
    }
    
    
    a.item-class.light.text-center,
    a.item-class.dark.text-center{
        color:#333;
    }
    
    .disableClick{
        pointer-events: none;
        color:silver!important;
    }
    
    .disableClick img{
        opacity: 0.4;
    }
    
    .pos-fixed{
        ;
        width: 258px;
        background-color: white;
        display: inline-block;
        padding-bottom: 6px;
    }
    
    .top-padding {
        display: block;
        margin-top: 83px;
    }
    
    /*DAy selection*/
    
    .carousel {
        ;
        height: 90px;
    }
    
    
    .carousel-inner {
        ;
        overflow: hidden;
        width: 88%;
        margin-left: 41px;}
    
    .item .col-xs-2 {
        width: 84px;
        padding-top: 1px;
        margin-top: 4px;
        height: 84px;
        background-color: white;
        margin-left: 3px;}
    
    .carousel-control {
        ;
        top: 0;
        left: 0;
        bottom: 0;
        width: 4%;
        opacity:10;
        filter: alpha(opacity=50);
        color: #929496;
        text-align: center;
         text-shadow:0 1px 2px rgba(0, 0, 0, 0)!important;
        background-color: transparent;
    
    }
    
    .carousel-control.left, .carousel-control.right {
       background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0,0,0,0.0001) 100%);
        background-image: -o-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0, 0, 0, 0)), to(rgba(0,0,0,0.0001)));
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0,0,0,0.0001) 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    }
    
    .carousel-control:hover, .carousel-control:focus{
        color:#929496;
    }
    
    
    .carousel-control .glyphicon-chevron-left, .glyphicon-chevron-right,.carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {
        width: 30px;
        height: 30px;
        margin-top: -10px;
        font-size: 22px;
    }
    
    .datepick {
        display: block;
        width: 84px;
        height: 83px;
        margin-left: -15px;
        padding-top: 19px;
        text-align: center;
    }
    
    
    a.datepick:hover, 
    a.timepicker:hover,
    a.datepick.vc-selected,
    a.timepicker.vc-selected{
     background-color: #FFFBF4;
        border:1px solid black;
        text-decoration: none;
    }
    
    .timepicker {
        display: block;
        width: 107px;
        height: 75px;
        margin-left: 0px;
        padding-top: 8px;
        text-align: center;
        background-color: white;}
    
    .extra-marg {
        margin: 3px;
        margin-left: -6px;
        margin-top: 8px;
    }
    
    .str-time, .time-item, .type-item{
        display: block;
        width:100%;
    }
    
    .not-available {
            border-bottom: 5px solid #EE1C25;
    }
    
    .limited {
            border-bottom: 5px solid #F8931D;
    }
    
    .available {
            border-bottom: 5px solid #39B44A;
    }
    
    .type-item{
        margin-top: 16px;
    }
    
    .availability {
        height: 5px;
        width: 100%;
        display: block;
    }
    
    .background-class {
        background-size: 107px 65px;
        background-position: -1px 9px;
    }
    
    span.str-time {
        font-size: 17px;
    }
    
    .golden-class {
        background: url('../img/real/gold_class.png') white;
     background-size: 107px 65px;
        background-position: -1px 9px;
    
    }
    
    .vmax-class {
        background: url('../img/real/vmax.png') white;
        background-size: 120px 65px;
        background-position: -4px 8px;}
    
    .mainstream-class {
        background: url('../img/real/mainstream.png') white;
     background-size: 142px 65px;
        background-position: -18px 9px;
    }
    
    .summer-class {
        background: url('../img/real/summer.png') white;
     background-size: 107px 65px;
        background-position: -1px 9px;
    
    }
    
    .comfort-class {
        background: url('../img/real/comfort.png') white;
     background-size: 107px 65px;
        background-position: -1px 9px;
    
    }
    
    .europa-class {
        background: url('../img/real/sphera-color.png') white;
        background-size: 155px 65px;
        background-position: -23px 9px;
    }
    
    
    .vkids-class {
        background: url('../img/real/vkids-color.png') white;
        background-size: 120px 65px;
        background-position: -4px 8px;}
    }
    
    
    a:visited {
    text-decoration:none!important;
    }
    
    .comments {
        padding-top: 17px;
        font-size: 11px;
        color: #919395;
    }
    
    .comment-color {
      height: 4px;
      width: 12px;
      display: inline-block;
      margin-right: 8px;
    }
    
    .comment-color img {
        width:13px;
        height:12px;
    }
    
    .not-available-c {
      background-color:#EE1C25;
    }
    
    .limited-c {
      background-color:#F8931D;
    }
    
    .available-c {
       background-color:#39B44A;
    }
    
    .left-item {
        margin-right: -54px;
        margin-left: -11px;
    }
    
    .right-item {
        margin-left: -36px;
    }
    
    input > #nextEnabled {
        background: url('../img/real/next_active.png') no-repeat;
        border: solid 0px #000000;
        width:86px;
        height:29px;
    }
    
    /*...............Tickets.........*/
    .tickets {
        height: 485px;
    }
    
    
    .no-border {
        border:0px;
    }
    
    .ticket-item-selection {
        padding: 9px;
        padding-top: 2px;
        padding-bottom: 0px;
    }
    
    .ticket-item-desc {
        height:183px;
        width:260px;
    }
    
    .ticket-item-desc div{
        padding: 5px 0;
        color: #6e7073;
    }
    .ticket-item-count{
        height:57px;
        width:260px;
    }
    
    .ticket-item-money{
        height: 130px;
        width: 260px;
        background-color: #F2F3F3;
        padding-top: 13px;
        padding-left: 13px;
        color: #838484;
    }
    
    
    
    .ticket-rating {
        height: 31px;
        width: 45px;
    }
    
    .ticket-center {
        /*padding-top:15px;
        padding-bottom: 21px;*/
    }
    
    .ticket-class {
        width: 100px;
        height: 25px;
    }
    
    
    .t-golden-class {
        background: url('../img/real/gold_class.png');
     background-size: 107px 65px;
    background-position: -21px -26px;
    
    }
    
    .t-vmax-class {
        background: url('../img/real/vmax.png');
        background-size: 120px 65px;
        background-position: -26px -21px;
    }
    
    .t-mainstream-class {
        background: url('../img/real/mainstream.png') ;
     background-size: 142px 65px;
      background-position: -34px -26px;
      }
    
    .t-summer-class {
        background: url('../img/real/summer.png') ;
        background-size: 107px 65px;
        background-position: -31px -22px;
    
    }
    
    .t-comfort-class {
        background: url('../img/real/comfort.png') ;
     background-size: 107px 65px;
        background-position: -25px -26px;
    
    }
    
    .t-europa-class {
        background: url('../img/real/sphera-color.png') ;
        background-size: 155px 65px;
        background-position: -47px -22px;
    }
    
    .t-vkids-class {
        background: url('../img/real/vkids-color.png');
        background-size: 120px 65px;
        background-position: -26px -21px;
    }
    
    
    
    
    .ticket-class-desc {
        /*font-size: 23px;
        margin-top: -21px;*/
        font-weight: 500;
        color: #6E7073;
        width: auto;
    }
    
    .ticket-class-time {
        margin-left:38px;
    }
    
    .ticket-count {
        padding-top: 10px;
        font-size: 12px;
        color: grey;
        display: inline-block;
        width: 230px;
    }
    
    .ticket-sponsor {
    display: inline-block
    }
    
    .ticket-sponsor img {
        height: 28px;
        border-radius: 0px;
        padding-left: 17px;
    }
    
    .choose-tickets-label {
        padding-top: 6px;
        padding-left: 9px;
        padding-bottom: 38px;
        font-size:13px;
        color:dimgray;
    }
    
    
    .custom-ticket-table {
       font-size:14px; 
       width: 690px;
       margin-bottom: 0px;
    }
    
    table tr.header-tickets {
        background-color: #E6E7E7;
        border-bottom: 3px solid orange;
    }
    
    table tr.seperator {
        height: 5px;
        border: 0px;
    }
    
    .borderless td, .borderless th {
        border: none;
    }
    
    table tbody tr.main-row{
       background-color: #E6E7E7; 
    }
    
    table tbody tr.main-row td{
        padding-top: 12px;
        vertical-align: middle !important;
    }
    .extra-pad {
    padding-left: 9px;
    
    }.choose-seat-main
    
    .numbers-row {
        display:inline-block;
    }
    .numbers-row input {
            width: 21px;
        height: 23px;
        text-align: center;
        /* padding-right: 3px; */
        background-color: #CCCCCC;
        border: 0px;
        outline:0px;
        color: #6E7073;
    }
    
    table tbody tr td.number-rows-count{
    padding-left: 11px;
    }
    
    
    
    /*..........seat selection*/
    
    .choose-seat-label {
        padding-top: 6px;
        padding-left: 9px;
        padding-bottom: 13px;
        color:dimgray;
    
    }
    
    .choose-seat-block {
       background: url('../img/real/seat-back.png') no-repeat;
        height: 410px;
        background- 0px;
        width: 664px;
    }
    
    .choose-seat-main {
         width: 641px;
        max-height: 330px;
        display: inline-block;
        padding-left: 33px;
        padding-top: 2px;
        overflow-x: auto;
        overflow-y: auto;
        white-space: nowrap;
        padding-right: 33px;
        overflow-x: auto;
        overflow-y: auto;
        margin-left: 16px;
        margin-top: 71px;}
    
    
    .seats {
        background-size: 13px 12px;
        display: inline-block;
        height: 12px;
        width: 13px;
        margin: 1px;
    }
    
    
    .seat-choiced {
        background: url('../img/real/choiced-seat.png') no-repeat;
        background-size: 13px 12px;
    
    }
    
    
    .seat-not-available {
        background: url('../img/real/not-available-seat.png') no-repeat;
        background-size: 13px 12px;
    
    }
    
    .seat-temp-choiced {
        background: url('../img/real/orange_seat.png') no-repeat;
        background-size: 13px 12px;
    
    }
    
    .seat-available {
        background: url('../img/real/empty-seat.png') no-repeat;
        background-size: 13px 12px;
    
    }
    
    .seat-available-left {
        background: url('../img/real/empty-seat-left.png') no-repeat;
        background-size: 100% 100%;
    
    }
    
    .seat-available-right {
        background: url('../img/real/empty-seat-right.png') no-repeat;
        background-size: 100% 100%;
    
    }
    
    .seat-available-middle {
        background: url('../img/real/empty-seat-middle.png') no-repeat;
        background-size: 100% 100%;
    
    }
    
    .seat-nil {
        background: url('../img/real/nil-seat.png') no-repeat;
        background-size: 13px 12px;
    
    }
    
    
    
    .comment-seat-left {
        margin-right: -123px;
        margin-left: 4px;
    }
    
    .comment-seat-third {
    margin-left: -131px;
    }
    
    .comment-seat-right {
    margin-left: -110px;
    }
    
    
    .seats a{
    height: 12px;
        display: block;
        width: 13px
    }
    
    
    /*.....Payment*/
    
    .payment-label-info {
          padding-top: 6px;
        padding-left: 9px;
        padding-bottom: 11px;
        font-size: 12px;
        font-weight: bold;
        color:dimgray;
    
    }
    
    
    .payment-label-help {
         padding-left: 9px;
        color: #838383;
        padding-bottom: 12px;}
    
    .payment-label-help a,
    .terms a,
    .redirect a{
        color: #DE8D2D;
        text-decoration:underline;
    }
    
    .personal-group1 {
        display:block;
        width:100%
    }
    
    .payment-text-info {
        width:322px;
        display:inline-block;
        padding-left: 6px;
    }
    .payment-text-info input,
    .payment-text-info div,
    .register-texts input,
    .payment-text-info select{
        width: 100%;
        height: 24px;
        padding-left: 6px;
        background-color: #E6E7E7;
        outline: 0;
        border: 0px;
        color: #939393;
        border: 1px solid #CCCCCC;
    }
    
    
    .payment-surnamelabel {
           width: 131px;
        /*background-color: #E6E7E7;*/
        margin-left: 9px;
        padding: 2px;
        padding-left: 6px;
        color: #8C8C8C;
    
        display:inline-block;
    
    }
    
    .payment-other-personaldata {
        width: 131px;
       /* background-color: #E6E7E7;*/
        margin-left: 9px;
        /* padding-left: 6px; */
        padding: 2px;
        padding-left: 6px;
        color: #8C8C8C;
        margin-top: 10px;
    
        display:inline-block;
    }
    
    
    
    
    .terms {
        padding-left: 9px;
        color: #838383;
        padding-bottom: 7px;
        margin-top:13px;
    }
    
    .terms-box {
        margin-left: 9px;
        margin-top: 13px;
        display: inline-block;
        height: 40px;
        color: #838383;
       
        width: 100%;
        font-size: 12px;
        margin-bottom: 23px;
    }
    
    .terms-box-text {
        ;
        display: inline-block;
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 3px;
    
        width: 457px;
     background-color: #E6E7E7;
    }
    
    
    .terms-box-button {
        display: inline-block;
        /*height: 40px;*/
        /*margin-left: 73px;*/
    
    }
    
    
    .terms-box-button a{
        /*padding-bottom: 18px;*/
    }
    
    
    .terms-box-text label {
        min-height: 0px; 
        padding-left: 28px;
        margin-bottom: 0;
        font-weight: normal;
        cursor: pointer;
    }
    
    
    .icons-img {
        margin-left: 16px;
        margin-top: 19px;
    }
    
    
    .payment-card-number {
           width: 131px;
        margin-left: 9px;
        padding-left: 6px;
        color: #8C8C8C;
        display:inline-block;
    }
    
    
    .payment-other-data {
        width: 131px;
        margin-left: 9px;
        /* padding-left: 6px; */
        padding-left: 6px;
        color: #8C8C8C;
        margin-top: 10px;
        display:inline-block;
    }
    
    .payment-text-other {
        width:84px;
        display:inline-block;
        padding-left: 6px;
    }
    
    
    .payment-text-month {
     width: 50px;
        display: inline-block;
        padding-left: 6px;
    }
    .payment-text-month input,
    .payment-text-month select{
        width: 100%;
        height: 24px;
        padding-left: 6px;
        background-color: #E6E7E7;
        outline: 0;
        border: 0px;
        color: #939393;
        border: 1px solid #CCCCCC;
    }
    
    
    .payment-text-year {
     width: 80px;
        display: inline-block;
        padding-left: 6px;
    }
    .payment-text-year input,
    .payment-text-year select{
        width: 100%;
        height: 24px;
        padding-left: 6px;
        background-color: #E6E7E7;
        outline: 0;
        border: 0px;
        color: #939393;
        border: 1px solid #CCCCCC;
    }
    
    .sep {
        display: inline-block;
        padding-left: 4px;
        margin-right: -6px;
        font-size: 14px;
        color: #919191;
    }
    
    .payment-text-other input{
        width: 100%;
        height: 24px;
        padding-left: 6px;
        background-color: #E6E7E7;
        outline: 0;
        border: 0px;
        color: #939393;
        border: 1px solid #CCCCCC;
    }
    
    
    input[type="checkbox"] {
      display: none;
    }
    
    .custom-check {
    	display: inline-block;
        width: 15px;
        height: 15px;
        background: white;
        border: 1px solid #CCCCCC;
        font-size: 22px;
        margin-left: -23px;
        margin-bottom: -3px;
        margin-right: 5px;	
    }
    
    .custom-check::before {
      content: "\2713";
      color: #DE8D2D;
      display: none;
      margin-top: -12px;
    
    }
    
    input[type=checkbox]:checked+.custom-check::before {
      display: block;
      color: #DE8D2D;
     
    }
    
    
    .required {
        padding-top: 249px;
        font-size: 10px;
        color: #8C8C8C;
    }
    
    .required-field {
        color:#DE8D2D;
    }
    
    
    .thank-you-message {
        background-color: #F2F3F3;
        width: 100%;
        height: 265px;
        margin-top: 21px;
        padding-top:50px;
        text-align:center;
        color: #8C8C8C;
    }
    
    .goodbye-info {
        display:block;
    }
    
    .redirect {
        margin-top:45px;
        display:block;
    }
    
    .new-buy {
        margin-top:27px;
        display:block
    }
    .new-buy img {
        width:90px;
        height:26px;
    }
    .footer-banner {
        display: block;
        margin-top:11px;
    }
    .footer-banner img {
        width:100%;
    }
    
    .ticket-values {
        height: 325px;
        overflow: auto;
        width: 699px;
    }
    
    
    /**********Spinner***********/
    #work-in-progress {
      ;
      width: 100%;
      height: 100%;
      font-size: 50px;
      text-align: center;
      vertical-align: middle;
      color: #000000;
      z-index: 200000;
      background-color: rgba(230, 230, 230, 0.31);
    }
    
    .work-spinner {
      width: 100px;
      height: 100px;
      margin: 300px auto;
      color: #DF8E30;
    }
    
    
    .gly-spin {
        -webkit-animation: spin 3000ms infinite linear;
        animation: spin 3000ms infinite linear;
    }
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }
    }
    @keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }
    }
    
    .modal-content{
        border: none!important
    }
    
    
    /******************END OF SPINNER*************************/
    
    
    .toggle-search-class {
        width: 13px;
        /*margin-right: 2px;*/
        margin-right: 10px;
        margin-top: 2px;
    }
    
    
    .circle-plus {
         background: url('../img/real/search-class-plus.png') no-repeat;
        background-size: 13px 13px;
        display: inline-block;
        height: 13px;
        width: 13px;
        margin-bottom: -2px;}
    
    .circle-minus {
         background: url('../img/real/search-class-minus.png') no-repeat;
        background-size: 13px 13px;
        display: inline-block;
        height: 13px;
        width: 13px;
        margin-bottom: -2px;}
    
    #resetOrder {
        margin-left:55px;
    }
    
    .order-total{
        font-weight:bold;
    }
    
    form > img{
        cursor:pointer;
    }
    
    
    /*************Modal***************/
    
    
    /*.modal-content {
      border-radius: 45px;
        width: 458px;
        height: 313px;
        background-color: #E6E7E7;
        margin: 0px auto;
        background: url('../img/real/log_in_popup.png') no-repeat;}
    
    
    .modal-body {
        ;
        padding-top: 31px;
        height: 174px;
        border-radius: 37px 32px 0px 0px;}*/
    
    
    .register-texts {
        width: 215px;
        display: inline-block;
        padding-left: 6px;
    }
    
    
    /*.modal-footer {
        padding: 15px;
    text-align: center;
        border-top: 1px solid #e5e5e5;
    }*/
    
    .reformed{
            width: 79px;
    }
    
    .modal-checkbox {
        /*margin-right: 80px;
        margin-top: 18px;*/
        color: #8C8C8C;
    }
    
    .modal-checkbox-extrmarg {
        margin-left: 5px;
    }
    
    /*.login-btn {
        background: url('../img/real/eisodos.png');
        width: 92px;
        height: 29px;
        border: 0px;
        outline: 0px;
        margin-right: 40px;
        margin-top:-7px;
        text-align:left;
        width:100%;
        border-radius: 10px;
        background-color:#f78d1e; 
        color:white!important;
        font-weight:bold
    }*/
    
    .login-btn :active,
    .send-email-btn :active,
    .forgot-pass-btn :active,
    .create-user :active 
    .fb-login :active{
        box-shadow: none!important;
        border-radius: 0px;
    }
    
    
    .fb-login {
        margin-right: 40px;
        margin-top:8px;
        text-align:left;
        width:150px;
        border-radius: 10px;
        color:white!important;
        font-weight:bold;
        background-color:#4267B2;
    }
    
    .google-login {
        margin-right: 40px;
        margin-top:8px;
        text-align:left;
        width:150px;
        border-radius: 10px;
        color:white!important;
        font-weight:bold;
        background-color:#dd4b39;
    }
    
    .instagram-login {
        margin-right: 40px;
        margin-top:8px;
        text-align:left;
        width:150px;
        border-radius: 10px;
        color:white!important;
        font-weight:bold;
        background-color:#bc2a8d;
    }
    .close-modal-custom {
        margin-right: 18px;
        outline: 0px;
    }
    
    
    
    
    .order-bar {
           background: url('../img/real/title_bar.png') no-repeat;
        width: 1000px;
        height: 55px;
        ;
        margin-top: 5px;
        margin-left: -15px;
        text-align: center;
        color: #8C8C8C;
        padding-top: 14px;
    }
    
    /* Carousel */
    
    #quote-carousel {
          padding: 0 10px 30px 10px;
        margin-top: 27px;
        margin-left: 155px;
        /* Previous button  */
        /* Next button  */
        /* Changes the position of the indicators */
        /* Changes the color of the indicators */
    }
    #quote-carousel .carousel-control {
        background: none;
        color: #CACACA;
        font-size: 2.3em;
        text-shadow: none;
        padding-top: 171px;
    }
    #quote-carousel .carousel-control.left {
        left: -49px;
        width: 121px; 
        background-color: white;
        opacity: 1;
        height: 421px;
    }
    #quote-carousel .carousel-control.right {
        right: -13px;
        /* left: -49px; */
        width: 125px;
        background-color: white;
        opacity: 1;
        height: 421px;
    }
    
    
    #quote-carousel .carousel-indicators {
        right: 50%;
        top: auto;
        bottom: 0px;
        margin-right: -19px;
    }
    #quote-carousel .carousel-indicators li {
        width: 50px;
        height: 50px;
        margin: 5px;
        cursor: pointer;
        border: 4px solid #CCC;
        border-radius: 50px;
        opacity: 0.4;
        overflow: hidden;
        transition: all 0.4s;
    }
    #quote-carousel .carousel-indicators .active {
        background: #333333;
        width: 128px;
        height: 128px;
        border-radius: 100px;
        border-color: #f33;
        opacity: 1;
        overflow: hidden;
    }
    
    #quote-carousel .carousel-inner {
        min-height: 300px;
        margin-left:0px!important;
    }
    
    
    .order-carousel {
        min-height: 420px;
        width: 700px;}
    
    
    
    #quote-carousel .carousel-inner .item {
        padding-left:62px;
    }
    
    .item-order {
        background: url('../img/real/order-item.png');
        width: 516px;
        height: 422px;
        padding-top: 31px;
    }
    
    
    .order-col-1 {
        width: 343;
        display: inline-block;
        float: left;
        /* padding-top: 31px; */
        background-color: #FFFFFF;
    }
    
        .order-col-1 span {
            display: block;
            text-align: left;
            line-height: 25px;
            /*color: #424243;}*/
            color: #979797;
        }
    
    .order-col-2 {
        margin-right: 34px;
    margin-bottom: 25px;
    }
    
    
    .order-movie-greek,
    .order-movie-eng {
        color: #DF8E2F!important;
        font-weight: 600;
    }
    
    
    .order-info-class {
        display: inline-block!important;
        margin-top: 6px;
        float: left;
    }
    
    .order-info-rating {
        float: left;
        margin: 0px;
        margin-right: 10px;
        margin-top: 4px;
    }
    
    .cosmote {
    display: inline-block!important;
        float: left;
        margin-top: 4px;
    }
    
    .kulikeio-order {
      background-color: #E7E8E9;
        height: 99%;
        DISPLAY: block;
        border-radius: 1px 0px 43px 41px;
        width: 505px;
        margin-left: 6px;
    }
    .kulikeio-items {
        width: 100%;
        height: 75px;
        overflow-y: auto;
        /*background-color: #F3F3F4;*/
        background-color: #FFFFFF;
    }
    
    .kulikeio-item-label {
        /*max-width: 68px;*/
        display: inline-block!important;
        overflow: hidden;
        max-height: 18px;
        color: #6D6D6D!important;
        width:200px;
    }
    .kulikeio-item-value {
        display: inline-block!important;
        margin-left: 43px;
        color:#424243!important;
    }
    .zero-marg {
        margin-top: -15px;
        margin-left:0px;
    }
    
    .kulikeio-item {
        /*padding-left:38px;*/
        padding-left:50px;
    }
    
    .dark-item {
        background-color: #BBBCBE;
    }
    
    .light-item {
        background-color: #F3F3F4;
    }
    
    .kulikeio-qrcode {
        margin-top: -10px;
        margin-right: 18px;
    }
    
    .kulikeio-qrcode img {
        padding: 11px;
        background-color: white;
    }
    
    
    .kulikeio-col-1 {
        width: 100%;
        display: inline-block;
        float: left;
        /* padding-top: 31px; */
        ;
    }
    
    .total-price {
           margin-top: 8px;
        float: left;
        display: block;
        width: 503px;
        color: #424243;
        font-weight: bold;
        ;
        bottom: 11px;
    }
    .total-price span:first-of-type {
       float: left;
        margin-left: 40px;}
    
    
    .login-on-top {
        margin-top: -59px;
        display: inline-block;
        float: right;
        margin-right: -8px;
        color: dimgrey;
        border-bottom: 1px dotted grey;
        font-size: 12px;
    }
    
    .login-on-top .glyphicon {
        padding-right: 5px;
    }
    
    .login-on-top a:hover, a:focus, a:active {
    
        text-decoration:none;
    }
    
    /** Coupon **/
    
    .cosmote-coupon-header {
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        color: #303073;
        width: 248px;
        margin-left: 28px;
    }
    
    .coupon-rec {
        display: inline-block;
        margin-left: 28px;
        color: grey;
    }
    
    .myCoupon .modal-header {
        padding-bottom : 7px;
    
    }
    
    .myCoupon .modal-header .close {
        margin-top: -22px;
    }
    
    .myCoupon .modal-content {
        border-radius: 45px;
        width: 458px;
        height: auto;
        margin: 0px auto;
        background : transparent;
    
        background-color : #FFFFFF;
    }
    
    .myCoupon .coupon-btn {
        background: url('../img/real/elegxo.png');
        width: 102px;
        height: 27px;
        outline: 0px;
        border: 0px;
        display: inline-block;
        /*margin-top: -18px;*/
        /*padding-bottom: 8px;*/
        margin-right: 6px;
    }
    
    
    /*.myCoupon .coupon-clear-btn {
        background: url('../img/real/canc.png');
        width: 25px;
        height: 25px;
        outline: 0px;
        border: 0px;
        display: inline-block;
        /*margin-top: -18px;*/
        /*padding-bottom: 2px;*/
    }*/
    
    
    .myCoupon .seperator {
        margin-right: 18px;
        margin-bottom: 12px;
    }
    
    
    
    .myCoupon .modal-body {
        ;
        padding-top: 23px;
        height: auto;
        border-radius: 37px 32px 0px 0px;
    }
    
    .coupon-valid img {
        height:25px;
        width:25px;
        /*margin-bottom:15px;*/
    }
    
    .coupon-valid {
        width:107px;
    }
    
    .myCoupon form div {
        display:inline-block;
        /*vertical-align:middle;*/
    }
    
    .myCoupon .validations {
          width: 379px;
        ;
        margin-left: -185px;
        margin-top: -14px;
        padding-top: 7px;
        overflow-y: auto;}
    
    .groupi {    
         margin-left: 5px;
        padding: 0px;
        width: 506px;
        border-radius: 5px 0px 0px 0px;
        background-color: white;
        margin-bottom:10px;
    }
    
    .customized {
        padding-left: 38px;
        border-radius: 8px 0px 0px 0px;
    }
    
    .proionta-kilikeiou {
        padding-left: 38px;
        color: #DF8E2F!important;
        font-weight: bold;
    }
    
    .order-date-info-d {
        display: inline-block!important;
        float: left;
    }
    
    .order-date-info-t {
        /*display: inline-block!important;*/
        /*margin-right: 132px;*/
        padding-left:200px;
    }
    .order-date-info-seats {
        /*margin-top: -30px;*/
        float: left;
        display: block;
        width: 100%;
        margin-bottom: 18px
    }
    
    
    .total-val{
      margin-left: -94px;
    }
    .total-price span:last-of-type {
          display: block;
        margin-top: 13px;
        font-weight: bold;
        color: #4E4E4F;
        font-size: 12px;}
    
    .export-label a {
        color: #DE8D2D;
        text-decoration: underline;
    }
    
    .validation-summary-valid{
        display:none;
    }
    
    .input-validation-error{
        border:1px solid red !important;
    }
    
    .datepicker {
    
        border: 1px solid rgb(255, 213, 166);
        border-radius:0px !important;
    }
    
    
    .datepicker th.datepicker-switch {
        background-color: #E0922F;
    
        border-radius: 0px!important;
    
    }
    
    
    .datepicker th.next, .datepicker th.prev {
        background-color: #E0922F;
        border-radius: 0px!important;
    }
    
    
    .datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover {
        background: #F1B66A;
    }
    
    
    .datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover {
        background-color: #E0922F!important;
    background-image: none;
    }
    
    
    .datepicker table tr td span.active {
    
      background-color: #E0922F!important;
    background-image: none;
    
    }
    
    .instructions-movie-cinema {
        background: rgba(243, 243, 243, 1) url("../img/real/instructionsMovieCinema.png") no-repeat scroll 0 0;
        height: 395px;
        padding-left: 10px;
        padding-top: 40px;
    }
    
    .instructions-movie {
        background: rgba(243, 243, 243, 1) url("../img/real/instructionsMovie.png") no-repeat scroll 0 0;
        height: 395px;
        padding-left: 10px;
        padding-top: 40px;
    }
    
    .instructions-cinema {
        background: rgba(0, 0, 0, 0) url("../img/real/instructionsCinema.png") repeat scroll 0 10px;
        height: 370px;
        padding-left: 10px;
        padding-top: 40px;
    }
    
    .instructions-date {
        background: rgba(243, 243, 243, 1) url("../img/real/instructionsDate.png") no-repeat scroll 0 0;
        height: 216px;
        padding-left: 10px;
        padding-top: 40px;
    }
    
    table.concessions tbody tr.main-row img {
        width: 25px;
    }
    
    table.concessions tbody tr.main-row td:nth-child(2n+2) {
        max-width: 208px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    
    
    
    
    .seperation-in-kulikeio {
        background-color: #F3F3F4;
        margin-bottom: 6px;
        line-height: 25px;
    }
    
    span.date-published {
        display: inline-block;
        font-size: 12px;
        float: left;
        margin-left: 38px;
    }
    
    
    span.date-get {
        /*display: inline-block;*/
        font-size: 12px;
        margin-left: -50px;
    }
    
    .media-heading{
        font-size: 12px;
    }
    
    .media-left, .media-right, .media-body{
        vertical-align:middle!important;
    }
    
    .btn-dark-gray {
        /*background: url('../img/real/eisodos.png');
        width: 92px;
        height: 29px;
        border: 0px;
        outline: 0px;*/
        margin-right: 40px;
        margin-top:-7px;
        text-align:left;
        width:150px;
        border-radius: 10px;
        background-color:#f78d1e; 
        color:white!important;
        font-weight:bold
    }
    
    .btn-vc {
        text-align:left;
        width:150px;
        border-radius: 10px;
        color:white!important;
        font-weight:bold
    }
    .btn-light-gray {
        background-color:#E5E6E7; 
        color:silver!important;
    }
    
    .btn-dark-gray {
        background-color:#929396; 
        }
    
    .btn-orange {
        background-color:#f78d1e;
    }
    
    .site-cookie-policy {
      background-color: #929396;
      color: white;
      display: block;
      ;
    }
    
    .vc-description {
      padding: 10px 210px 10px 10px;
    }
    
    .site-cookie-policy-agree {
      ;
      right: 20px;
      top: 20px;
    }
    
    .vc-description a {
      color: #f78d1e;
    }
    
    .coupon-clear-btn {
        ;
        right: 5px;
        top: 0;
        bottom: 0;
        height: 14px;
        width: 14px;
        margin: auto;
        font-size: 14px;
        cursor: pointer;
        color: #6e7073;
    }
    
    .contest-outer-box {
      background-color: #f78d1e;
      color: white;
      display: inline-block;
      font-weight: bold;
      margin-left: 9px;
      margin-top: 13px;
      padding: 5px;
      width: 621px;
    }
    
    .contest-box {
      color: #838383;
      display: inline-block;
      font-size: 12px;
      height: 40px;
    }
    
    .contest-box-text {
      background-color: #e6e7e7;
      display: inline-block;
      margin-bottom: 0;
      margin-top: 0;
      padding: 3px 3px 3px 10px;
      width: 610px;
    }
    
    .voucher{
        ;bottom:50px;width:690px;height:46px;background-color:#e6e7e7;vertical-align: middle; padding:12px 10px;
    }
    
    .grey_fields.header {
        margin-bottom:10px;
        margin-left:9px;
    }
    
    
    .login_modal_footer{margin-top:5px;}
    .login_modal_header #myModalLabel.modal-title {text-align: center;font-family:'Philosopher',sans-serif; margin-top:-5px !important;}
    .form-group{;}
    .form-group .login-field-icon {
        font-size: 20px;
        ;
        right: 15px;
        top: 3px;
        transition: all 0.25s ease 0s;
        padding-top: 2%;
    }
    .login-modal{
        width:100%;
        padding-bottom:20px;
    }
    .login_modal_header
    {
        background: #f78d1e !important;
        color:#fff;
        border-top-left-radius:7px;
        border-top-right-radius:7px;
        height:50px !important;
    }
    .login_modal_footer 
    {
        background: #E8E8E8 !important;
        color:#fff;
        /*height:5px !important;*/
        border-bottom-left-radius:7px;
        border-bottom-right-radius:7px;
    }
    .modal-register-btn{margin: 4% 33% 2% 33% ;width:100%;}
    .login-modal input{height:40px; box-shadow: none; border:1px solid #ddd;}
    .modal-body-left{float:left; width:50%; padding-right:4%; border-right:4px solid #ddd;}
    .modal-body-right{float:right; width:47%;}
    .login-link{padding:0 20%;}
    .modal-social-icons{padding:0 10%;}
    .facebook, .instagram, .google, .linkedin, .forgot-pass-btn, .login-btn,.send-email-btn,.create-user {width:100%;height:40px; padding-top:3%; margin-top:2%;vertical-align:middle;}
    .login-btn,.login-btn:hover {background-color:#f78d1e;border:2px solid #f78d1e;color:white !important; cursor:pointer;}
    .forgot-pass-btn,.forgot-pass-btn:hover {background-color:#929396;border:2px solid #929396;color:white !important; cursor:pointer;}
    .send-email-btn,.send-email-btn:hover {background-color:#929396;border:2px solid #929396;color:white !important; cursor:pointer;}
    .create-user,.create-user:hover {background-color:#929396;border:2px solid #929396;color:white !important; cursor:pointer;}
    .modal-icons{margin-left: -10px; margin-right: 20px;}
    .google, .google:hover{background-color:#dd4b39;border:2px solid #dd4b39;color:#fff !important; cursor:pointer;}
    .instagram, .instagram:hover{ background-color: #bc2a8d; border:2px solid #bc2a8d;color: #fff !important; cursor:pointer;}
    .facebook, .facebook:hover{background-color: #3b5999; border:2px solid #3b5999;color:#fff !important; cursor:pointer;}
    .linkedin, .linkedin:hover{background-color: #007bb6; border: 2px solid #007bb6; color:#fff !important; cursor:pointer;}
    #social-icons-conatainer{;}
    #center-line{;  right: 270.7px;top: 80px;background:#ddd;  border: 4px solid #DDDDDD;border-radius: 20px;}
    .modal-login-btn{width:100%;height:40px; margin-bottom:10px;}
    #modal-launcher{margin: 30% 0 0 30%; }

    Wednesday, October 10, 2018 7:14 AM
  • User-2146352328 posted

    Hope I did not scare you with the code.

    the main html to concentrate is this:

    <div id="select-center" class="choose-center">
        <div class="choose-day-slider">
            <div class="carousel slide multi-item-carousel" data-interval="false" id="cinemaSelection">
                <div class="carousel-inner">
                        <div class="item active">
        <div class="col-xs-2">
             <a class="datepick vc-selected  vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="99">
                 <span class="str-day">TEST CINEMA1</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="21">
                 <span class="str-day">Village ΑΤ ΤΗΕ MALL</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="01">
                 <span class="str-day">Village ΡΕΝΤΗ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="24">
                 <span class="str-day">Village ΦΑΛΗΡΟ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick   vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="26">
                 <span class="str-day">Village ΑΓ. ΔΗΜΗΤΡΙΟΣ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="03">
                 <span class="str-day">Village ΠΑΓΚΡΑΤΙ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="22">
                 <span class="str-day">Village Cosmos ΘΕΣΣ.</span><br>
             </a>
        </div>
    </div>
                        <div class="item ">
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="23">
                 <span class="str-day">Village ΒΟΛΟΣ</span><br>
             </a>
        </div>
    </div>
                </div>
                <a class="left carousel-control" data-slide="prev" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="right carousel-control" data-slide="next" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
    
                <div class="grey_fields">
                    Επιλογή Ημέρας
                </div>
                <div class="choose-day">
                    <div class="choose-day-slider">
                        <div id="theCarousel" class="carousel slide multi-item-carousel" data-interval="false">
                            <div class="carousel-inner">
                                    <div class="item active">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181009" id="date20181009">
                                                        <span class="str-day">09/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181010" id="date20181010">
                                                        <span class="str-day">10/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181011" id="date20181011">
                                                        <span class="str-day">11/10</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181012" id="date20181012">
                                                        <span class="str-day">12/10</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181013" id="date20181013">
                                                        <span class="str-day">13/10</span><br />
                                                        <span class="day-item">Σάββατο</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181014" id="date20181014">
                                                        <span class="str-day">14/10</span><br />
                                                        <span class="day-item">Κυριακή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181015" id="date20181015">
                                                        <span class="str-day">15/10</span><br />
                                                        <span class="day-item">Δευτέρα</span>
                                                    </a>
                                                </div>
                                    </div>
                                    <div class="item ">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181016" id="date20181016">
                                                        <span class="str-day">16/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181017" id="date20181017">
                                                        <span class="str-day">17/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181018" id="date20181018">
                                                        <span class="str-day">18/10</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181019" id="date20181019">
                                                        <span class="str-day">19/10</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181020" id="date20181020">
                                                        <span class="str-day">20/10</span><br />
                                                        <span class="day-item">Σάββατο</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181021" id="date20181021">
                                                        <span class="str-day">21/10</span><br />
                                                        <span class="day-item">Κυριακή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181022" id="date20181022">
                                                        <span class="str-day">22/10</span><br />
                                                        <span class="day-item">Δευτέρα</span>
                                                    </a>
                                                </div>
                                    </div>
                                    <div class="item ">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181023" id="date20181023">
                                                        <span class="str-day">23/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181024" id="date20181024">
                                                        <span class="str-day">24/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181025" id="date20181025">
                                                        <span class="str-day">25/10</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181026" id="date20181026">
                                                        <span class="str-day">26/10</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181027" id="date20181027">
                                                        <span class="str-day">27/10</span><br />
                                                        <span class="day-item">Σάββατο</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181028" id="date20181028">
                                                        <span class="str-day">28/10</span><br />
                                                        <span class="day-item">Κυριακή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181029" id="date20181029">
                                                        <span class="str-day">29/10</span><br />
                                                        <span class="day-item">Δευτέρα</span>
                                                    </a>
                                                </div>
                                    </div>
                                    <div class="item ">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181030" id="date20181030">
                                                        <span class="str-day">30/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181031" id="date20181031">
                                                        <span class="str-day">31/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181101" id="date20181101">
                                                        <span class="str-day">01/11</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181102" id="date20181102">
                                                        <span class="str-day">02/11</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                    </div>
                            </div>
                            <a data-slide="prev" href="#theCarousel" class="left carousel-control"><i class="glyphicon glyphicon-chevron-left"></i></a>
                            <a data-slide="next" href="#theCarousel" class="right carousel-control"><i class="glyphicon glyphicon-chevron-right"></i></a>
                        </div>
    Wednesday, October 10, 2018 9:18 AM
  • User-2146352328 posted

    I can get remove all the vc-selected with the below

    $('.vc-selected').each(function(i){
    $(this).removeClass('vc-selected');
    
    });

    question is how to make it understand that it has to search only on the elements contained inside the choose-day div.

    Edit.

    I think this is proper?

    $('.vc-selected', '.choose-day').each(function(i){
    $(this).removeClass('vc-selected');
    
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 10, 2018 10:09 AM