From a1a53156a49581f5c5b515a705efe14a704ddbdc Mon Sep 17 00:00:00 2001
From: cuqmbr <dr.juniorf@gmail.com>
Date: Fri, 13 May 2022 11:41:44 +0300
Subject: [PATCH] refactor: decouple different types of popups

---
 TicketOffice/Pages/Auth/Account.cshtml        | 146 +++++++--------
 TicketOffice/Pages/Routes/Index.cshtml        | 153 ++++++++--------
 TicketOffice/wwwroot/css/Account.css          |   6 +
 .../css/{Popup.css => CityListPopup.css}      |  42 ++---
 TicketOffice/wwwroot/css/Routes.css           | 133 --------------
 TicketOffice/wwwroot/css/TicketOrderPopup.css | 171 ++++++++++++++++++
 6 files changed, 347 insertions(+), 304 deletions(-)
 rename TicketOffice/wwwroot/css/{Popup.css => CityListPopup.css} (79%)
 create mode 100644 TicketOffice/wwwroot/css/TicketOrderPopup.css

diff --git a/TicketOffice/Pages/Auth/Account.cshtml b/TicketOffice/Pages/Auth/Account.cshtml
index eb40953..032e973 100644
--- a/TicketOffice/Pages/Auth/Account.cshtml
+++ b/TicketOffice/Pages/Auth/Account.cshtml
@@ -7,8 +7,8 @@
     CultureInfo.CurrentCulture = CultureInfo.GetCultureInfo("uk-UA");
 }
 
+<link rel="stylesheet" href="~/css/CityListPopup.css"/>
 <link rel="stylesheet" href="~/css/Account.css"/>
-<link rel="stylesheet" href="~/css/Popup.css"/>
 
 <div class="section">
     <div class="section-header">Придбані квитки</div>
@@ -59,84 +59,82 @@
                     </div>
                 </div>
                 
-                <div class="popup-container" id="popup-city-list-@ticket.Id">
-                    <div class="popup">
-                        <div class="popup-header">
+                <div class="popup-container-city-list" id="popup-city-list-@ticket.Id">
+                    <div class="popup-city-list">
+                        <div class="popup-header-city-list">
                             Автобус №@ticket.Route.Number
                         </div>
-                        <div class="popup-body">
-                            <div class="popup-body-main">
-                                <table>
-                                    <thead>
-                                    <tr class="tr-intermediate">
-                                        <th class="th-route">
-                                            Інформація
-                                        </th>
-                                        <th class="th-route">
-                                            Місто
-                                        </th>
-                                        <th class="th-route">
-                                            Час прибуття
-                                        </th>
-                                        <th class="th-route">
-                                            Час відправлення
-                                        </th>
-                                    </tr>
-                                    </thead>
-                                    <tbody>
-                                    <tr class="tr-departure">
-                                        <td class="td-route">
-                                            Відправлення
+                        <div class="popup-body-city-list">
+                            <table class="city-list">
+                                <thead>
+                                <tr class="tr-intermediate city-list">
+                                    <th class="th-route city-list">
+                                        Інформація
+                                    </th>
+                                    <th class="th-route city-list">
+                                        Місто
+                                    </th>
+                                    <th class="th-route city-list">
+                                        Час прибуття
+                                    </th>
+                                    <th class="th-route city-list">
+                                        Час відправлення
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr class="tr-departure city-list">
+                                    <td class="td-route city-list">
+                                        Відправлення
+                                    </td>
+                                    <td class="td-route city-list">
+                                        @ticket.Route.Cities.First().Name
+                                    </td>
+                                    <td class="td-route city-list">
+                                        -
+                                    </td>
+                                    <td class="td-route city-list">
+                                        @ticket.Route.Cities.First().DepartureTime?.ToString("HH:mm")
+                                    </td>
+                                </tr>
+                                
+                                @for (int i = 1; i < ticket.Route.Cities.Count - 1; i++)
+                                {
+                                    <tr class="tr-intermediate city-list">
+                                        <td class="td-route city-list">
+                                            Проміжна станція
                                         </td>
-                                        <td class="td-route">
-                                            @ticket.Route.Cities.First().Name
+                                        <td class="td-route city-list">
+                                            @ticket.Route.Cities.ToList()[i].Name
                                         </td>
-                                        <td class="td-route">
-                                            -
+                                        <td class="td-route city-list">
+                                            @ticket.Route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm")
                                         </td>
-                                        <td class="td-route">
-                                            @ticket.Route.Cities.First().DepartureTime?.ToString("HH:mm")
+                                        <td class="td-route city-list">
+                                            @ticket.Route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm")
                                         </td>
                                     </tr>
-                                    
-                                    @for (int i = 1; i < ticket.Route.Cities.Count - 1; i++)
-                                    {
-                                        <tr class="tr-intermediate">
-                                            <td class="td-route">
-                                                Проміжна станція
-                                            </td>
-                                            <td class="td-route">
-                                                @ticket.Route.Cities.ToList()[i].Name
-                                            </td>
-                                            <td class="td-route">
-                                                @ticket.Route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm")
-                                            </td>
-                                            <td class="td-route">
-                                                @ticket.Route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm")
-                                            </td>
-                                        </tr>
-                                    }
-                                    
-                                    <tr class="tr-arrival">
-                                        <td class="td-route">
-                                            Прибуття
-                                        </td>
-                                        <td class="td-route">
-                                            @ticket.Route.Cities.Last().Name
-                                        </td>
-                                        <td class="td-route">
-                                            @ticket.Route.Cities.Last().ArrivalTime?.ToString("HH:mm")
-                                        </td>
-                                        <td class="td-route">
-                                            -
-                                        </td>
-                                    </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                            <div class="popup-body-footer">
-                                <a class="popup-footer-button" onclick="document.getElementById('popup-city-list-@ticket.Id').style.display = 'none'">Закрити</a>
-                            </div>
+                                }
+                                 
+                                <tr class="tr-arrival city-list">
+                                    <td class="td-route city-list">
+                                        Прибуття
+                                    </td>
+                                    <td class="td-route city-list">
+                                        @ticket.Route.Cities.Last().Name
+                                    </td>
+                                    <td class="td-route city-list">
+                                        @ticket.Route.Cities.Last().ArrivalTime?.ToString("HH:mm")
+                                    </td>
+                                    <td class="td-route city-list">
+                                        -
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <div class="popup-footer-city-list">
+                            <a class="popup-footer-button-city-list" onclick="document.getElementById('popup-city-list-@ticket.Id').style.display = 'none'">Закрити</a>
                         </div>
                     </div>
                 </div>
@@ -150,3 +148,7 @@
 <div class="section">
     <div class="section-header">Керування аккаунтом</div>
 </div>
+
+@* <div class="popup-container-info"> *@
+@*     <div class="popup-info"></div> *@
+@* </div> *@
diff --git a/TicketOffice/Pages/Routes/Index.cshtml b/TicketOffice/Pages/Routes/Index.cshtml
index ab95407..e917c05 100644
--- a/TicketOffice/Pages/Routes/Index.cshtml
+++ b/TicketOffice/Pages/Routes/Index.cshtml
@@ -11,7 +11,8 @@
 
 
 <link rel="stylesheet" href="~/css/Routes.css"/>
-<link rel="stylesheet" href="~/css/Popup.css"/>
+<link rel="stylesheet" href="~/css/CityListPopup.css"/>
+<link rel="stylesheet" href="~/css/TicketOrderPopup.css"/>
 
 <div class="wrapper">
     
@@ -193,84 +194,82 @@
 {
     foreach (var route in Model.Routes)
     {
-        <div class="popup-container" id="popup-city-list-@route.Id">
-            <div class="popup">
-                <div class="popup-header">
+        <div class="popup-container-city-list" id="popup-city-list-@route.Id">
+            <div class="popup-city-list">
+                <div class="popup-header-city-list">
                     Автобус №@route.Number
                 </div>
-                <div class="popup-body">
-                    <div class="popup-body-main">
-                        <table>
-                            <thead>
-                            <tr class="tr-intermediate">
-                                <th class="th-route">
-                                    Інформація
-                                </th>
-                                <th class="th-route">
-                                    Місто
-                                </th>
-                                <th class="th-route">
-                                    Час прибуття
-                                </th>
-                                <th class="th-route">
-                                    Час відправлення
-                                </th>
-                            </tr>
-                            </thead>
-                            <tbody>
-                            <tr class="tr-departure">
-                                <td class="td-route">
-                                    Відправлення
+                <div class="popup-body-city-list">
+                    <table class="city-list">
+                        <thead>
+                        <tr class="tr-intermediate city-list">
+                            <th class="th-route city-list">
+                                Інформація
+                            </th>
+                            <th class="th-route city-list">
+                                Місто
+                            </th>
+                            <th class="th-route city-list">
+                                Час прибуття
+                            </th>
+                            <th class="th-route city-list">
+                                Час відправлення
+                            </th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr class="tr-departure city-list">
+                            <td class="td-route city-list">
+                                Відправлення
+                            </td>
+                            <td class="td-route city-list">
+                                @route.Cities.First().Name
+                            </td>
+                            <td class="td-route city-list">
+                                -
+                            </td>
+                            <td class="td-route city-list">
+                                @route.Cities.First().DepartureTime?.ToString("HH:mm")
+                            </td>
+                        </tr>
+                        
+                        @for (int i = 1; i < route.Cities.Count - 1; i++)
+                        {
+                            <tr class="tr-intermediate city-list">
+                                <td class="td-route city-list">
+                                    Проміжна станція
                                 </td>
-                                <td class="td-route">
-                                    @route.Cities.First().Name
+                                <td class="td-route city-list">
+                                    @route.Cities.ToList()[i].Name
                                 </td>
-                                <td class="td-route">
-                                    -
+                                <td class="td-route city-list">
+                                    @route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm")
                                 </td>
-                                <td class="td-route">
-                                    @route.Cities.First().DepartureTime?.ToString("HH:mm")
+                                <td class="td-route city-list">
+                                    @route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm")
                                 </td>
                             </tr>
-                            
-                            @for (int i = 1; i < route.Cities.Count - 1; i++)
-                            {
-                                <tr class="tr-intermediate">
-                                    <td class="td-route">
-                                        Проміжна станція
-                                    </td>
-                                    <td class="td-route">
-                                        @route.Cities.ToList()[i].Name
-                                    </td>
-                                    <td class="td-route">
-                                        @route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm")
-                                    </td>
-                                    <td class="td-route">
-                                        @route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm")
-                                    </td>
-                                </tr>
-                            }
-                            
-                            <tr class="tr-arrival">
-                                <td class="td-route">
-                                    Прибуття
-                                </td>
-                                <td class="td-route">
-                                    @route.Cities.Last().Name
-                                </td>
-                                <td class="td-route">
-                                    @route.Cities.Last().ArrivalTime?.ToString("HH:mm")
-                                </td>
-                                <td class="td-route">
-                                    -
-                                </td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="popup-body-footer">
-                        <a class="popup-footer-button" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'none'">Закрити</a>
-                    </div>
+                        }
+                        
+                        <tr class="tr-arrival city-list">
+                            <td class="td-route city-list">
+                                 Прибуття
+                            </td>
+                            <td class="td-route city-list">
+                                @route.Cities.Last().Name
+                            </td>
+                            <td class="td-route city-list">
+                                @route.Cities.Last().ArrivalTime?.ToString("HH:mm")
+                            </td>
+                            <td class="td-route city-list">
+                                -
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="popup-footer-city-list">
+                    <a class="popup-footer-button-city-list" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'none'">Закрити</a>
                 </div>
             </div>
         </div>
@@ -281,9 +280,7 @@
 {
     foreach (var route in Model.Routes)
     {
-        <div class="popup-container" id="popup-ticket-@route.Id" style='display:@(Model.Ticket is not null && Model.Ticket.RouteId == route
-        .Id 
-        ? "inherit" : "none")'>
+        <div class="popup-container-ticket-order" id="popup-ticket-@route.Id" style='display:@(Model.Ticket is not null && Model.Ticket.RouteId == route.Id ? "inherit" : "none")'>
             <div class="ticket">
                 <div class="ticket-header">
                     Купити квиток
@@ -378,14 +375,14 @@
                         </div>
                     </div>
                     <div class="ticket-body-footer">
-                        <a class="popup-footer-link-button" onclick="document.getElementById('popup-ticket-@route.Id').style.display = 'none'">Закрити</a>
+                        <a class="popup-footer-link-button-ticket-order" onclick="document.getElementById('popup-ticket-@route.Id').style.display = 'none'">Закрити</a>
                         @if (HttpContext.Session.GetString("UserId") != null)
                         {
-                            <input class="popup-footer-button" type="submit" form="ticket-form-@route.Id" value="Купити">
+                            <input class="popup-footer-button-ticket-order" type="submit" form="ticket-form-@route.Id" value="Купити">
                         }
                         else
                         {
-                            <a class="popup-footer-link-button" href="/Auth/Login">Авторизуватись</a>
+                            <a class="popup-footer-link-button-ticket-order" href="/Auth/Login">Авторизуватись</a>
                         }
                     </div>
                 </div>
diff --git a/TicketOffice/wwwroot/css/Account.css b/TicketOffice/wwwroot/css/Account.css
index 78423de..6e8d888 100644
--- a/TicketOffice/wwwroot/css/Account.css
+++ b/TicketOffice/wwwroot/css/Account.css
@@ -9,6 +9,8 @@ body {
     margin: 0;
 }
 
+/* Sections */
+
 .section {
     width: 70rem;
     margin: 1.5rem auto;
@@ -27,6 +29,8 @@ body {
     margin: 2rem 0;
 }
 
+/* Tickets in section */
+
 .tickets {
     display: flex;
     flex-wrap: wrap;
@@ -100,6 +104,8 @@ body {
     opacity: 0.8;
 }
 
+/* Misc */
+
 .link-btn {
     line-height: 2.5rem;
     padding: 0 1rem;
diff --git a/TicketOffice/wwwroot/css/Popup.css b/TicketOffice/wwwroot/css/CityListPopup.css
similarity index 79%
rename from TicketOffice/wwwroot/css/Popup.css
rename to TicketOffice/wwwroot/css/CityListPopup.css
index c572e42..e7cf574 100644
--- a/TicketOffice/wwwroot/css/Popup.css
+++ b/TicketOffice/wwwroot/css/CityListPopup.css
@@ -1,4 +1,4 @@
-.popup-container {
+.popup-container-city-list {
     position: fixed;
     top: 0;
     left: 0;
@@ -9,7 +9,7 @@
     display: none;
 }
 
-.popup {
+.popup-city-list {
     width: 40rem;
     height: 30rem;
     background: #eaeef1;
@@ -20,7 +20,7 @@
     box-shadow: 0 10px 15px 5px #6c6e6f;
 }
 
-.popup-header {
+.popup-header-city-list {
     border-radius: 0.5rem 0.5rem 0 0;
     height: 3rem;
     background: #a1b0b9;
@@ -31,14 +31,11 @@
     line-height: 3rem;
 }
 
-.popup-body {
+.popup-body-city-list {
     width: calc(100% - 2rem);
-    height: calc(100% - 5rem);
-    padding: 1rem 1rem;
-}
-
-.popup-body-main {
-    height: calc(100% - 4rem);
+    height: calc(100% - 7.5rem);
+    padding: 0 1rem;
+    margin-top: 0.5rem;
     overflow-y: auto;
     overflow-x: hidden;
 }
@@ -64,12 +61,14 @@ tr.tr-departure, tr.tr-arrival {
     font-weight: 700;
 }
 
-.popup-body-footer {
-    text-align: center;
-    margin-top: 1rem;
+.popup-footer-city-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 4rem;
 }
 
-.popup-footer-link-button {
+.popup-footer-link-button-city-list {
     line-height: 2.5rem;
     padding: 0 1rem;
     margin: 0 0.5rem;
@@ -83,7 +82,7 @@ tr.tr-departure, tr.tr-arrival {
     text-decoration: none;
 }
 
-.popup-footer-button {
+.popup-footer-button-city-list {
     line-height: 2.5rem;
     padding: 0 1rem;
     margin: 0 0.5rem;
@@ -98,19 +97,20 @@ tr.tr-departure, tr.tr-arrival {
     text-decoration: none;
 }
 
-.popup-footer-button:hover, .popup-footer-link-button:hover {
+.popup-footer-button-city-list:hover, 
+.popup-footer-link-button-city-list:hover {
     opacity: 0.8;
 }
 
 /* table */
 
-table {
+table.city-list {
     width: 100%;
     border-collapse: collapse;
     border: 1px solid #d7dce1;
 }
 
-th {
+th.city-list {
     height: 6rem;
     line-height: 1.6rem;
     background: #e6e9ed;
@@ -122,16 +122,16 @@ th {
     color: #777a7e;
 }
 
-tr {
+tr.city-list {
     line-height: 5rem;
     background-color: white;
 }
 
-tr:hover {
+tr.city-list:hover {
     background-color: #dee9f4;
 }
 
-td {
+td.city-list {
     padding: 0 1rem;
     border: 1px solid #d7dce1;
     text-align: center;
diff --git a/TicketOffice/wwwroot/css/Routes.css b/TicketOffice/wwwroot/css/Routes.css
index a5540b5..e37ad34 100644
--- a/TicketOffice/wwwroot/css/Routes.css
+++ b/TicketOffice/wwwroot/css/Routes.css
@@ -9,12 +9,6 @@ body {
     margin: 0;
 }
 
-/*@media (min-width: 768px) {
-    html {
-        font-size: 16px;
-    }
-}*/
-
 .wrapper {
     width: 78rem;
     margin: 2.5rem auto;
@@ -204,131 +198,4 @@ td.time, td.duration {
     text-align: center;
     margin-top: 2rem;
     line-height: 3rem;
-}
-
-/* ~~~~~~ ticket ordering popup ~~~~~~ */
-
-.ticket {
-    width: 50rem;
-    height: 20rem;
-    background: #eaeef1;
-    position: fixed;
-    top: calc(50% - 10rem);
-    left: calc(50% - 25rem);
-    border-radius: 0.5rem;
-    box-shadow: 0 10px 15px 5px #6c6e6f;
-}
-
-.ticket-header {
-    border-radius: 0.5rem 0.5rem 0 0;
-    height: 3rem;
-    background: #a1b0b9;
-    color: white;
-    font-weight: 700;
-    font-size: 1.1rem;
-    text-align: center;
-    line-height: 3rem;
-}
-
-.ticket-body {
-    width: calc(100% - 2rem);
-    height: calc(100% - 5rem);
-    padding: 1rem 1rem;
-}
-
-.ticket-body-main {
-    height: calc(100% - 4rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-    text-align: center;
-}
-
-form.ticket-form {
-    
-}
-
-div.ticket-input-item {
-    display: inline-block;
-    width: 15rem;
-    height: 5rem;
-    line-height: 4.7rem;
-    text-align: left;
-    vertical-align: top;
-}
-
-input.ticket-input-firstname, input.ticket-input-lastname,
-select.ticket-place-select {
-    display: flex;
-    font-size: 1.5rem;
-    color: #262626;
-    font-weight: 500;
-    box-sizing: border-box;
-    background: #dfe3e5;
-    border: 1px solid #b8bfc7;
-    box-shadow: 0 1px 0 0 #fff;
-    border-radius: .3rem;
-    padding: 0 1rem;
-    margin-top: 0.25rem;
-    text-align: left;
-    width: 100%;
-    height: 3rem;
-}
-
-input.ticket-input-firstname:read-only, input.ticket-input-lastname:read-only,
-select.ticket-place-select:disabled {
-    background: #bcbfc0;
-    outline: none;
-    color: #7a7c7d;
-}
-
-select {
-    -webkit-appearance: menulist-button;
-    color: #262626;
-}
-
-select:invalid {
-    color: #7a7c7d;
-}
-
-div.ticket-validation-error {
-    color: #777a7e;
-    text-align: center;
-    font-size: 0.9rem;
-    font-weight: 700;
-    line-height: 1rem;;
-    margin: 0.25rem 0 0 0;
-}
-
-div.ticket-info div {
-    font-weight: 700;
-    font-size: 1.1rem;
-    text-align: justify;
-    line-height: 1.4rem;
-}
-
-div.ticket-info-line {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 1px solid #c5c7cc;
-    margin-bottom: 0.4rem;
-}
-
-div.ticket-info-line-left {
-    display: inline-flex;
-    justify-content: right;
-}
-
-div.ticket-info-line-right {
-    width: 70%;
-    display: inline-flex;
-    justify-content: left;
-}
-
-div.ticket-info-line-right-block {
-    display: inline-flex;
-}
-
-.ticket-body-footer {
-    text-align: center;
-    margin-top: 1rem;
 }
\ No newline at end of file
diff --git a/TicketOffice/wwwroot/css/TicketOrderPopup.css b/TicketOffice/wwwroot/css/TicketOrderPopup.css
new file mode 100644
index 0000000..821ddef
--- /dev/null
+++ b/TicketOffice/wwwroot/css/TicketOrderPopup.css
@@ -0,0 +1,171 @@
+/* ~~~~~~ ticket ordering popup ~~~~~~ */
+
+.popup-container-ticket-order {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.25);
+    display: none;
+}
+
+.ticket {
+    width: 50rem;
+    height: 20rem;
+    background: #eaeef1;
+    position: fixed;
+    top: calc(50% - 10rem);
+    left: calc(50% - 25rem);
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px 5px #6c6e6f;
+}
+
+.ticket-header {
+    border-radius: 0.5rem 0.5rem 0 0;
+    height: 3rem;
+    background: #a1b0b9;
+    color: white;
+    font-weight: 700;
+    font-size: 1.1rem;
+    text-align: center;
+    line-height: 3rem;
+}
+
+.ticket-body {
+    width: calc(100% - 2rem);
+    height: calc(100% - 5rem);
+    padding: 1rem 1rem;
+}
+
+.ticket-body-main {
+    height: calc(100% - 4rem);
+    overflow-y: auto;
+    overflow-x: hidden;
+    text-align: center;
+}
+
+form.ticket-form {
+
+}
+
+div.ticket-input-item {
+    display: inline-block;
+    width: 15rem;
+    height: 5rem;
+    line-height: 4.7rem;
+    text-align: left;
+    vertical-align: top;
+}
+
+input.ticket-input-firstname, input.ticket-input-lastname,
+select.ticket-place-select {
+    display: flex;
+    font-size: 1.5rem;
+    color: #262626;
+    font-weight: 500;
+    box-sizing: border-box;
+    background: #dfe3e5;
+    border: 1px solid #b8bfc7;
+    box-shadow: 0 1px 0 0 #fff;
+    border-radius: .3rem;
+    padding: 0 1rem;
+    margin-top: 0.25rem;
+    text-align: left;
+    width: 100%;
+    height: 3rem;
+}
+
+input.ticket-input-firstname:read-only, input.ticket-input-lastname:read-only,
+select.ticket-place-select:disabled {
+    background: #bcbfc0;
+    outline: none;
+    color: #7a7c7d;
+}
+
+select {
+    -webkit-appearance: menulist-button;
+    color: #262626;
+}
+
+select:invalid {
+    color: #7a7c7d;
+}
+
+div.ticket-validation-error {
+    color: #777a7e;
+    text-align: center;
+    font-size: 0.9rem;
+    font-weight: 700;
+    line-height: 1rem;;
+    margin: 0.25rem 0 0 0;
+}
+
+div.ticket-info div {
+    font-weight: 700;
+    font-size: 1.1rem;
+    text-align: justify;
+    line-height: 1.4rem;
+}
+
+div.ticket-info-line {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #c5c7cc;
+    margin-bottom: 0.4rem;
+}
+
+div.ticket-info-line-left {
+    display: inline-flex;
+    justify-content: right;
+}
+
+div.ticket-info-line-right {
+    width: 70%;
+    display: inline-flex;
+    justify-content: left;
+}
+
+div.ticket-info-line-right-block {
+    display: inline-flex;
+}
+
+.ticket-body-footer {
+    text-align: center;
+    margin-top: 1rem;
+}
+
+.popup-footer-link-button-ticket-order {
+    line-height: 2.5rem;
+    padding: 0 1rem;
+    margin: 0 0.5rem;
+    display: inline-block;
+    color: #1d4965;
+    font-weight: 500;
+    background: linear-gradient(0deg,#79b6db,#b3dbf2);
+    border: none;
+    border-radius: .3rem;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.popup-footer-button-ticket-order {
+    line-height: 2.5rem;
+    padding: 0 1rem;
+    margin: 0 0.5rem;
+    display: inline-block;
+    color: #1d4965;
+    font-weight: 700;
+    font-size: 1rem;
+    background: linear-gradient(0deg,#79b6db,#b3dbf2);
+    border: none;
+    border-radius: .3rem;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.popup-footer-button-ticket-order:hover,
+.popup-footer-link-button-ticket-order:hover {
+    opacity: 0.8;
+}
\ No newline at end of file