<div class="container mt-5" style="height:1300px;">

        <!--Section-->
        <section class="section feature-box pt-5">

            <!--Grid row-->
            <div class="row features-small pt-5">

                <!--Grid column-1-->
                <div class="col-md-7 mb-r center-on-small-only">

                    <!--Grid row-Най-използвани услуги-лента -->
                    <div class="row d-flex justify-content-between p-2" style="background-color: #0a6587;">
                        <div (click)="mostCommonServices.toggle()" style="cursor: pointer">
                            <i class="fa fa-2x fa-caret-right mt-1 mr-2 float-left white-text" style="margin-left: -0.3em"></i>
                            <div class=" mt-2 ml-3 float-right white-text font-weight-bold"> Най-използвани услуги </div>
                        </div>
                        <div>
                            <div class="mt-2 float-left white-text"> всички услуги </div>
                            <button type="button" class="ml-3 float-right btn btn-info btn-circle waves-light" mdbRippleRadius>
                                <i class="fa fa-arrow-right white-text mr-0"></i>
                            </button>
                        </div>
                    </div>
                    <!--Grid row-->

                    <!--Grid row-Най-използвани услуги-съдържание -->
                    <div class="row" [mdbCollapse]="isCollapsed" #mostCommonServices="bs-collapse">
                        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil
                            anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
                    </div>
                    <!--Grid row-->

                    <!--Grid row-Видео-лента -->
                    <div class="row d-flex justify-content-between p-2 mt-5" style="background-color: #0a6587;">
                        <div #EmbededVideo (click)="embededVideo.toggle()" style="cursor: pointer">
                            <i class="fa fa-2x fa-caret-right mt-1 mr-2 float-left white-text" style="margin-left: -0.3em"></i>
                            <div class=" mt-2 ml-3 float-right white-text font-weight-bold"> Видео инструкции </div>
                        </div>
                    </div>
                    <!--Grid row-->

                    <!--Grid row-Видео-съдържание -->
                    <div class="row" [mdbCollapse]="isCollapsed" #embededVideo="bs-collapse">
                        <div class="embed-responsive embed-responsive-4by3">
                            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/9RBmnMsO_B8" allowfullscreen></iframe>
                        </div>
                    </div>
                    <!--Grid row-->

                </div>
                <!--Grid column-->

                <!--Grid column-2 -->
                <div class="col-md-5">

                    <!--Grid row-Информационен център-лента -->
                    <div class="row d-flex justify-content-between p-2 ml-4" style="background-color:grey;">
                        <div #Info (click)="info.toggle()" style="cursor: pointer">
                            <i class="fa fa-2x fa-caret-right mt-1 mr-2 float-left white-text" style="margin-left: -0.3em"></i>
                            <div class=" mt-2 ml-3 float-right white-text font-weight-bold"> Информационен център </div>
                        </div>
                    </div>
                    <!--Grid row-->

                    <!--Grid row-Информационен център-съдържание -->
                    <div class="row ml-4  grey lighten-4" [mdbCollapse]="isCollapsed" #info="bs-collapse">
                        <div class="p-2 pl-3">
                            <p class="grey-text font-weight-bold">бул."Витоша" №2, стая 79, партер</p>
                            <p class="grey-text font-weight-bold" style="margin-top: -1em">1061 София</p>
                            <p class="grey-text font-weight-bold" style="margin-top: -1em">тел: 02/986 7671</p>
                            <p class="font-weight-bold custom-color-2">Центърът работи с граждани от 8:30 часа до</p>
                            <p class="font-weight-bold custom-color-2" style="margin-top: -1em;">17:00 часа без прекъсване</p>
                        </div>
                    </div>
                    <!--Grid row-->

                    <!--Grid row-Провери преписка-лента-->
                    <div class="row d-flex justify-content-between p-2 ml-4 mt-5" style="background-color:grey;">
                        <div #Check (click)="check.toggle()" style="cursor: pointer">
                            <i class="fa fa-2x fa-caret-right mt-1 mr-2 float-left white-text" style="margin-left: -0.3em"></i>
                            <div class=" mt-2 ml-3 float-right white-text font-weight-bold"> Провери преписка </div>
                        </div>
                    </div>
                    <!--Grid row-->

                    <!--Grid row-Провери преписка-съдържание-->
                    <div class="row ml-4 grey lighten-4" [mdbCollapse]="isCollapsed" #check="bs-collapse">
                        <div class="p-2 pl-3">
                                <form class="ml-3">
                                        <!-- radio buttons -->
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" (click)="active(1)">
                                            <label #label1 class="custom-control-label font-weight-bold" for="customRadio1">Номер на преписка</label>
                                        </div>
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" (click)="active(2)">
                                            <label #label2 class="custom-control-label font-weight-bold" for="customRadio2">Регистрационнен номер на жалба/сигнал до Главен прокурор и ВКП</label>
                                        </div>
                                        <!-- radio buttons -->

                                        <!-- textBox and dropdown -->
                                        <div class="row ml-1 pt-2 pl-1">
                                            <label class="mr-5 grey-text font-weight-bold">Номер</label>
                                            <label class="ml-5 pl-5 grey-text font-weight-bold">Година</label>
                                        </div>
                                        <div class="row pl-4 pr-5">
                                            <input type="text" class=" w-42 mr-4 inline rgba-grey-slight border border-light">
                                            <select class="form-control w-42 mr-4 inline rgba-grey-slight border border-light" id="exampleSelect1">
                                                <option>1</option>
                                                <option>2</option>
                                                <option>3</option>
                                                <option>4</option>
                                                <option>5</option>
                                            </select>
                                        </div>
                                        <!-- textBox and dropdown -->

                                        <!--dropdown -->
                                        <div class="row ml-1 pt-2 pl-1">
                                            <label class="mr-5 grey-text font-weight-bold">Прокуратура</label>
                                        </div>
                                        <div class="row pl-4 pr-5">
                                            <select class="form-control mr-4 inline rgba-grey-slight border border-light" id="exampleSelect1">
                                                <option>A</option>
                                                <option>Б</option>
                                                <option>В</option>
                                                <option>Г</option>
                                                <option>Д</option>
                                            </select>
                                        </div>
                                        <!--dropdown -->

                                        <!-- 2 textBoxes -->
                                        <div class="row ml-1 pt-2 pl-1">
                                            <label class="mr-5 grey-text font-weight-bold">Въведи кода</label>
                                        </div>
                                        <div class="row pl-4 pr-5">
                                            <input type="text" class=" w-42 mr-4 inline rgba-grey-slight border border-light">
                                            <input type="text" class=" w-42 ml-2 inline white border border-light">
                                        </div>
                                        <!-- 2 textBoxes -->
                                        <button type="submit" class="btn w-85 ml-2 mr-2 mt-3 mb-1" style="background-color: #0a6587;">Провери</button>
                                    </form>
                        </div>

                    </div>
                    <!--Grid row-->

                    <!--Grid row-->
                    <div class="row d-flex justify-content-between p-2 ml-4 mt-5" style="background-color:grey;">
                        <div #HelpConnections (click)="helpConnections.toggle()" style="cursor: pointer">
                            <i class="fa fa-2x fa-caret-right mt-1 mr-2 float-left white-text" style="margin-left: -0.3em"></i>
                            <div class=" mt-2 ml-3 float-right white-text font-weight-bold"> Полезни връзки </div>
                        </div>
                    </div>
                    <!--Grid row-->

                    <!--Grid row-->
                    <div class="row ml-4 grey lighten-4" [mdbCollapse]="false" #helpConnections="bs-collapse">
                        <div class="p-2 pl-3">
                                <ul type="disk">
                                        <li class="custom-color font-weight-bold">
                                            <span class="custom-span-color">Административно обслужване</span>
                                        </li>
                                        <li class="custom-color font-weight-bold">
                                            <span class="custom-span-color">ЗЕУ</span>
                                        </li>
                                        <li class=" custom-color font-weight-bold">
                                            <span class="custom-span-color">е-Правителство</span>
                                        </li>
                                        <li class=" custom-color font-weight-bold">
                                            <span class="custom-span-color">Електронна идентичност</span>
                                        </li>
                                    </ul>
                        </div>

                    </div>
                    <!--Grid row-->
                </div>
                <!--Grid column-->

            </div>
            <!--Grid row-->

        </section>
        <!--Section-->
    </div>