/* ==================================================================================
//  Terrace V2.0
//  Start date: 31/12/2023
//  app.css
//  Dependencies: doron.css
-------------------------------------------------------------------------------------    
================================================================================== */

/* =============================================
// ------------------ INDEX --------------------
0. Globals
    0.1. Core styling
    0.2. Variables
1. Navigation
    1.1. Main menu
    1.2. Buttons
    1.3. Filtering
        1.3.1 Sub filters
        1.3.2 Panel filters
        1.3.3 View selector
2. Content tabs
    2.1. Basic styling
    2.2. Squad panel
    2.3. Starting 11 panel
    2.4. Fixtures panel
    2.5. Trophies panel
    2.6. Kick-off times panel
    2.7. Competition names panel
    2.8. Opponents panel
    2.9. Pages panel
    2.10. Formation panel
    2.11. Panel intros
3. Swipe panels, standard panels & modals
    3.1. Basic styling
    3.2. Swipe panel content
    3.3. Standard panels
    3.4. Modals
    3.5. Pod swipe panels
    3.6. Content cards
4. Graphics editor
    4.1. Overlay
    4.2. Canvas
        4.2.1. Canvas elements
        4.2.2. Text elements
        4.2.3. Image elements
        4.2.4. Shape elements
        4.2.5. Component elements
            4.2.5.1 Squad
            4.2.5.2 Starting 11
            4.2.5.3 Player focus
            4.2.5.4 Fixtures
            4.2.5.5 Sponsors
            4.2.5.6 Formation
            4.2.5.7 Socials
            4.2.5.8 Opponents badge
    4.3. Navigation
    4.4. Tools
    4.5. Options
    4.6. Styling drawer
    4.7. Layers & layers panel
    4.8. Exporting
    4.9. Tool styles
    4.10. Skin options
5. Animations
6. Kit builder
7. Badge uploader
8. My club
9. Pages editor
    9.1. Overlay
    9.2. Tools
    9.3. Page
        9.3.1. Page elements
        9.3.2. Text elements
        9.3.3. Image elements
        9.3.4. Gradient elements
        9.3.5. Button elements
        9.3.6. Columns
        9.3.7. Component elements
        9.3.8. Spacer elements
    9.4. Options
    9.5. Root URL
    9.6. Notifications
    9.7. Menus
10. Loaders
11. Media library
12. Components
    12.1. Search header & brand header
    12.2. Matchday card
    12.3. Home filters
    12.4. Tab filters
    12.5. Recent exports card
    12.6. My club detail cards
    12.7. Feature panel
    12.8. Title cards
    12.9. Fixed prompt card & floating CTA
    12.10. Squad card
    12.11. Trophy card
    12.12. Live pages card
    12.13. Captain card
    12.14. Hamburger menu
    12.15. Searching
    12.16. No content and error messages
    12.17. Exports
    12.18. Tools
    12.19. Match centre
    12.20. Guidance and helpers
    12.21. Updates
    12.22. Accordions
    12.23. Player details
    12.24. Home panels
    12.25. Custom layout UI
    12.26. Drawers
    12.27. Modal alerts
    12.28. Favourites
    12.29. Templates
    12.30. Packs
    12.31. Tiers
    12.32. Last opened
    12.33. Watermark
    12.34. Loaders
    12.35. Verification
    12.36. Cards
    12.37. Pagination
    12.38. Gating
    12.39. Tier cards
    12.40. Banners
    12.41. Log in overlay
    12.44. Offer banners & modals
    12.45. Suggest a layout
13. News
    13.1. Overlay
    13.2. Posts
14. Animation editor
    14.1. Elements
    14.2. Tools
============================================= */

/*------------------------------------------------
0. Globals
--------------------------------------------------
0.1. Core styling
------------------------------------------------*/
@media only screen and (min-width:200px) {
    body    {
        width:100%;
        max-width:initial;
        height:100%;
        font-size:13px;
        line-height:18px;
        font-family: 'ca_slalomregular';
        color:var(--brand-text-color)
    }
}
@media only screen and (min-width:768px) {
    body    {
        font-size:13px;
    }
}
::selection {
    background:none;
}
.no-cursor  {
    cursor: none; 
}

@font-face {
    font-family: 'ca_slalombold';
    src: url('../fonts/caslalom-bold-webfont.woff2') format('woff2'),
         url('../fonts/caslalom-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ca_slalommedium';
    src: url('../fonts/caslalom-medium-webfont.woff2') format('woff2'),
         url('../fonts/caslalom-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ca_slalomregular';
    src: url('../fonts/caslalom-regular-webfont.woff2') format('woff2'),
         url('../fonts/caslalom-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

strong {
    font-family: 'ca_slalombold';
}

input   {
    border:1px solid var(--brand-border-color);
    border-radius:3px;
    padding:5px 10px;
}

select  {
    text-rendering: auto;
    color:#000;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    box-sizing: border-box;
    align-items: center;
    -webkit-rtl-ordering: logical;
    background-color: field;
    cursor: default;
    margin: 0em;
    white-space: pre;
    border-width: 1px;
    border-style: solid;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
    border-image: initial;
    border-radius: 0px;
    font-family: 'ca_slalombold';
    font-size: 1.1em;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 15px;
    border: 1px solid var(--brand-text-color);
}

/*------------------------------------------------
0.2. Variables
------------------------------------------------*/
:root   {
    /* ---------- Colours ---------- */
    /* --brand-main-color:#5E1BD4;
    --brand-pale-color:#E5DBFF;
    --brand-tertiary-color:#CFFF4B;
    --brand-yellow:#ffde17;

    --brand-text-color:#0C1216;

    --brand-grey-color:#F2F3F5;

    --brand-border-color:#f2f2f2;

    --brand-deletion-color:#E62323;

    --main-theme-color:#fff;
    --tab-background-color:#fff;
    
    --graphics-editor-navigation-background-color:#444;
    --graphics-editor-background-color:#ddd;

    --canvas-background-color:green;
    --canvas-border-color:#aaa;
    
    --tools-drawer-background-color:#444;
    --options-drawer-background-color:#fff;
    
    --open-tools-button-background-color:green;

    --input-placeholder-color:#BCBCBC;

    --guidance-color:#028cef;
    --helper-colour:#028cef;

    --delete-color:red;
    --error-color:#FF3333;
    --no-error-color:#66ad2f;

    --tier-free-fill:#294ED5;
    --tier-free-text:#CFFF4B;
    --tier-plus-fill:#FFC507;
    --tier-plus-text:#FA015A; */

    /* ---------- Element attributes ---------- */
    /* Graphics editor*/
    --graphics-editor-navigation-height:60px;    
    --canvas-scale:scale(1);

    /* ---------- Guidance panels ---------- */
    --guidance-panel-peach:rgb(250, 219, 189);
    --guidance-panel-peach-dark:rgb(229, 182, 145);
    --guidance-panel-peach-gradient:linear-gradient(to bottom right, var(--guidance-panel-peach), var(--guidance-panel-peach-dark));

    --guidance-panel-pale-green:rgb(83, 223, 106);
    --guidance-panel-pale-green-dark:rgb(63, 175, 76);
    --guidance-panel-pale-green-gradient:linear-gradient(to bottom right, var(--guidance-panel-pale-green), var(--guidance-panel-pale-green-dark));

    --guidance-panel-pale-blue:#75e3ff;
}

/*------------------------------------------------
1. Navigation
--------------------------------------------------
1.1. Main menu
------------------------------------------------*/
/* This is the main menu at the bottom of the screen that the user uses to switch tabs */
@media only screen and (min-width:200px)    {
    .main-menu  {
        position: fixed;
        top: initial;
        bottom:0;
        width:100%;
        height:65px;
        background:var(--main-theme-color);
        border-top:1px solid var(--brand-border-color);
        z-index:1;
    }
    .main-menu .tabs-ui-wrapper .tab    {
        width:25%;
        padding:14px 0;
        opacity:0.4;
        border-top: 2px solid var(--main-theme-color);
        border-bottom:none;
    }
    .main-menu .tabs-ui-wrapper .tab span    {
        font-size:0.65em;
        text-align:center;
        font-family: 'ca_slalombold';
    }
    .main-menu .tabs-ui-wrapper .tab img    {
        width:17px;
        height:17px;
        float:initial;
        margin:0 auto 7px auto;
        display:block;
    }
    .main-menu .tabs-ui-wrapper .active    {
        opacity:1;
    }
    .desktop-menu   {
        display:none;
    }
}

@media only screen and (min-width:768px)    {
    .main-menu  {
        display:none;
        height: 70px;
        width: 100%;
        border-top: none;
        padding: 3px 0 0 0;
        bottom: initial;
        top: 0;
    }
    .main-menu .tabs-ui-wrapper .tab    {
        width: auto;
        padding: 14px;
        opacity: 0.4;
        border-top: none;
    }
    .main-menu .tabs-ui-wrapper .tab img    {
        width:20px;
        height:20px;
    }
    .main-menu .tabs-ui-wrapper .active    {
        opacity:1;
        border-top:none;
        /* border-right: 2px solid var(--brand-main-color); */
    }
    .desktop-menu   {
        display: block;
        position: fixed;
        height: 90px;
        background: var(--main-theme-color);
        border-bottom:1px solid var(--brand-pale-color);
        padding: 30px;
    }
    .desktop-menu .tabs-ui-wrapper  {
        width: auto;
        font-size: 1.15em;
        left:3%;
        font-family:'ca_slalombold';
    }
    .desktop-menu .tabs-ui-wrapper .tab {
        padding: 5px 5px 0 10px;
        border-bottom:none;
        color:var(--brand-text-color);
        opacity:0.6;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    .desktop-menu .tabs-ui-wrapper .tab.active {
        opacity:1;
    }
    .desktop-menu .tabs-ui-wrapper .tab img {
        margin:0 10px 0 0;
    }
}
@media only screen and (min-width:1024px)    {
    .desktop-menu .tabs-ui-wrapper  {
        left:50px;
    }
    .desktop-menu .tabs-ui-wrapper .tab {
        padding: 5px 15px 0 5px;
    }
}

/*------------------------------------------------
1.2. Buttons
------------------------------------------------*/
.filled-button  {
    background:var(--brand-main-color);
    color:#fff;
    width:100%;
    padding:15px;
    text-align: center;
    font-family: 'ca_slalombold';
    border-radius:5px;
    text-decoration:none;
}
.linear-button  {
    color:var(--brand-main-color);
    width:100%;
    padding:15px;
    text-align: center;
    font-family: 'ca_slalombold';
    border-radius:5px;
    border: 1px solid var(--brand-main-color);
}
.modal .linear-button   {
    margin:10px 0 0 0;
}
.add-button {
    background: var(--brand-main-color) url('../images/icons/add-icon-white.svg') no-repeat center center;
    background-size:10px 10px;
    width: 30px;
    height: 30px;
    text-align: center;
    position: absolute;
    right: 0;
    float: initial;
    top: 20px;
    border-radius: 5px;
    color: var(--main-theme-color);
}
.delete-button  {
    background: var(--brand-deletion-color) url('../images/icons/delete-icon.svg') no-repeat center center;
    background-size:20px 20px;
    width:40px !important;
    height:40px !important;
    border-radius:5px;
}
.confirm-deletion-button    {
    background: var(--brand-deletion-color);
    text-transform: uppercase;
}
.modal .delete-button   {
    width:100% !important;
    background:var(--brand-deletion-color);
    border-radius:60px;
    height:auto !important;
}
.upload-button  {
    padding: 15px;
    border: 1px solid var(--brand-pale-color);
    background: #fff;
    color: var(--brand-text-color);
    border-radius: 55px;
}
.download-button    {
    background:var(--brand-main-color);
    color:#fff;
}
.edit-button    {
    width: 40px;
    height: 40px;
    background: #fff url(../images/icons/edit-button-icon.svg) no-repeat center center;
    background-size: 20px 20px;
    border-radius: 20px;
    border: 1px solid var(--brand-main-color);
}

/*------------------------------------------------
1.3. Filtering
--------------------------------------------------
1.3.1 Sub filters
------------------------------------------------*/
@media only screen and (min-width:200px) {
    .sub-filters    {
        position: fixed;
        top:50px;
        background:var(--main-theme-color);
        color:var(--brand-text-color);
        font-family:'ca_slalombold';
        overflow-x:auto;
        padding: 0 20px;
        display:flex;
        z-index:2;
    }
    .sub-filters-inner  {

    }
    .sub-filters-inner div  {
        width:auto;
        padding:14px 12px 12px 12px;
        /* font-family: 'ca_slalombold'; */
        opacity:0.4;
        cursor:pointer;
    }
    .sub-filters-inner div.active  {
        border-bottom:2px solid var(--brand-tertiary-color);
        opacity:1;
    }
}
@media only screen and (min-width:768px) {
    .sub-filters    {
        top:90px;
    }
    .sub-filters-inner  {
        width:100% !important;
    }
    .sub-filters-inner div  {
        padding: 20px 17px;
        font-family: 'ca_slalombold';
        color: var(--brand-text-color);
        font-size: 1.15em;
    }
    .sub-filters-inner div.active  {
        border-bottom: 2px solid var(--brand-tertiary-color);
        opacity: 1;
    }
}
.sub-filters::-webkit-scrollbar {
    -webkit-appearance: none;
}

/* .panel-filters  {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0 0 20px 0;
}
.panel-filters div  {
    width:auto;
} */

/*------------------------------------------------
1.3.2. Panel filters
------------------------------------------------*/
.panel-filters  {
    padding:10px 20px;
    border-bottom:1px solid var(--brand-border-color);
    overflow-x: auto;
}
.panel-filters::-webkit-scrollbar {
    -webkit-appearance: none;
}
.panel-filters-inner    {
    
}
.panel-filters-inner.centered   {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:10px;
}
.panel-filters-inner div    {
    width: auto;
    padding: 5px 10px;
    margin: 0 5px 0 0;
    font-family: 'ca_slalombold';
    border-radius: 40px;
    opacity: 0.3;
    cursor: pointer;
}
.panel-filters-inner div.active {
    color:var(--brand-main-color);
    opacity:1;
}
.panel-filters-inner div   {
    background: var(--brand-pale-color);
    padding:10px 30px;
}

/*------------------------------------------------
1.3.3 View selector
------------------------------------------------*/
.view-selector  {
    padding:10px 20px 0 20px;
    display:none;
}
.view-selector div  {
    width:50%;
    padding:10px;
    border-radius:3px;
    border:1px solid var(--brand-border-color);
    text-align:center;
    font-family: 'ca_slalombold';
    display:flex;
    justify-content: center;
}
.view-selector div img  {
    width:15px;
    height:15px;
    margin:0 10px 0 0;
}
.view-selector div span {
    width:auto;
    margin:-2px 0 0 0;
    opacity:0.4;
}
.view-selector > div:first-child    {
    border-right:none;
    border-radius: 3px 0 0 3px;
}
.view-selector > div:last-child    {
    border-radius: 0 3px 3px 0;
}
.view-selector div.active span   {
    opacity:1;
}

/*------------------------------------------------
2. Content tabs
--------------------------------------------------
2.1. Basic styling
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .content-tab    {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        padding:0 0 160px 0;
        background:var(--tab-background-color);
        overflow: auto;
        z-index:0;
    }
    #homeTab    {
        /* padding-top:60px; */
    }
    #pagesTab   {
        padding-top: 95px;
    }
    #myLayoutsTab   {
        padding-top: 95px;
    }
    #myClubTab  {
        padding-top: 95px;
    }
    #toolsTab   {
        padding-top: 95px;
    }
    #exportsTab {
        padding-top:40px;
    }
    .content-panel  {
        padding: 0;
    }
}
@media only screen and (min-width:768px)    {
    .content-tab    {
        width: 100%;
        padding: 0 0 160px 0;
    }
    #homeTab    {
        padding-top:70px;
    }
    #pagesTab   {
        padding-top: 150px;
    }
    #myLayoutsTab   {
        padding-top: 150px;
    }
    #myClubTab  {
        padding-top: 150px;
    }
    #toolsTab   {
        padding-top: 150px;
    }
    #exportsTab {
        padding-top:90px;
    }
    .content-panel  {
        padding: 0 30px;
    }
}

/*------------------------------------------------
2.2. Squad panel
------------------------------------------------*/
@media screen and (min-width:200px) {
    .squad-name-header .six-columns {
        width:50%;
    }
    .squad-name-header {
        font-size: 1.5em;
        line-height:1em;
        color: var(--brand-text-color);
        font-family: 'ca_slalombold';
        letter-spacing: 0;
        margin: 0;
        padding: 20px 0px 20px 0px;
    }
}
@media screen and (min-width:768px) {
    .squad-name-header  {
        font-size: 2em;
        padding: 50px 0px 40px 0px;
    }
}
.squad-name-header .options-button  {
    width:40px;
    height:40px;
    background:url('../images/icons/options-icon.svg') no-repeat center center;
    background-size: 30px 30px;
    float:right;
}
.squad-name-header .list-item-popout    {
    font-size:0.5em;
}
.squad-list {
    padding:0 20px 60px 20px;
}
.squad-buttons-wrapper  {
    margin:0 0 20px 0;
}
.squad-buttons-wrapper .back-button, .squad-buttons-wrapper .filled-button    {
    width:auto;
    padding:15px 30px;
    text-align: center;
    font-family: 'ca_slalombold';
}
.squad-buttons-wrapper .back-button {
    float:left;
    background:url('../images/icons/exit-editor-icon-black.svg') no-repeat left center;
    background-size:20px 20px;
}
.squad-buttons-wrapper .filled-button   {
    float:right;
}
@media only screen and (min-width:200px) {
    .squad-list-card {
        width:49%;
        min-height:100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin:0 1% 1% 0;
        padding:0 0 10px 0;
        color:var(--brand-text-color);
        background:url('../images/dot-pattern.png') no-repeat center center;
        background-size: cover;
        border:1px solid var(--brand-pale-color);
        /* box-shadow: 0 0 7px 0 #dedede; */
        font-family: inherit;
        border-radius:10px;
        cursor:pointer;
    }
    .squad-card:nth-child(2n)   {
        margin:0 0 1% 0;
    }
    .squad-list-card span   {
        font-family: 'ca_slalombold';
        font-size: 1.2em;
        text-align: center;
    }
    .squad-list-card.add-a-squad    {
        background:var(--brand-main-color);
        color:#fff;
    }
    .squad-list-card.add-a-squad:hover  {
        color:#fff;
    }
}
@media only screen and (min-width:768px) {
    .squad-list-card {
        width:19.2%;
        margin:0 1% 1% 0;
    }
    .squad-list-card:nth-child(2n), .squad-list-card:nth-child(3n)   {
        margin:0 1% 1% 0;
    }
    .squad-list-card:nth-child(5n)   {
        margin:0 0 1% 0;
    }
}

/*------------------------------------------------
2.3. Starting 11 panel
------------------------------------------------*/
.starting-11-list   {
    padding:20px 20px 40px 20px;
}
.starting-11-row    {
    padding: 5px 0;
    font-family: 'ca_slalombold';
    font-size: 1.1em;
    border-bottom: 1px solid var(--brand-border-color);
}
.starting-11-player-photo   {
    width:40px;
    height:40px;
    border-radius:25px;
    margin:0 15px 0 0;
}
.starting-11-row .player-number, .starting-11-row .player-name, .starting-11-row .player-position   {
    width:auto;
    padding:12px;
}
.starting-11-row .player-number {
    padding:12px 0;
}
.starting-11-row .player-name   {
    max-width: calc(100% - 55px);
    overflow: hidden;
    height: 40px;
}
.starting-11-row .player-position   {
    font-size:0.8em;
    font-family:'ca_slalomregular';
}
.modal-inner .name-and-number   {
    margin:0 0 2% 0;
}
.modal-inner .name-and-number input   {
    width:49%;
    margin:0 2% 0 0;
}
.modal-inner .name-and-number input:last-child   {
    margin:0;
}
#photoPanel   {
    padding:0 20px 0 0;
}

/*------------------------------------------------
2.4. Fixtures panel
------------------------------------------------*/
.fixtures-list  {
    padding: 20px 20px 40px 20px;
}
.fixture-list-row   {
    border-radius: 15px;
    padding: 30px 25px;
    margin: 0 0 10px 0;
    background: #D9FFD9 url('../images/card-background-fixture.svg') no-repeat center center;
    background-size: cover;
}
.fixture-list-row .inner    {
    width:70%;
}
.fixture-details span   {
    display: block;
    width:100%;
}
.fixture-details    {
    width:30%;
    font-size:0.8em;
}
.fixture-list-row .home-team, .fixture-list-row .away-team {
    width:80%;
    display: flex;
    justify-content: left;
    font-size: 0.8em;
}
.fixture-list-row .home-team    {
}
.fixture-list-row .away-team    {
}
.fixture-list-row .seperator    {
    opacity:0;
}
.fixture-list-row .home-goals, .fixture-list-row .away-goals    {
    width:20%;
    display: flex;
    justify-content: left;
}
@media only screen and (min-width:200px) {
    .fixture-list-row .home-team, .fixture-list-row .away-team, .fixture-list-row .home-goals, .fixture-list-row .away-goals    {
        font-family: 'ca_slalombold';
        font-size:1em;
        overflow: hidden;
        height: 18px;
    }
    .fixture-list-row .away-goals   {
        font-size:1em !important;
    }    
    .fixture-list-row .home-scorers, .fixture-list-row .away-scorers, .fixture-list-row .home-bookings, .fixture-list-row .away-bookings {
        font-size:0.8em;
    }
    .fixture-list-row .fixture-options  {
        display: block;
    }
    .fixture-list-row .fixture-options span {
        text-align: center;
        padding: 8px 18px;
        cursor: pointer;
        border-radius: 35px;
        color: #fff;
        font-family: 'ca_slalombold';
        font-size: 1em;
        width: auto;
        margin: 0 1% 0 0;
        background: var(--brand-text-color);
    }
    .fixture-list-row .fixture-options span:last-child {
        margin:0;
    }
}
@media only screen and (min-width:768px) {
    
}
@media only screen and (min-width:1024px) {
    .fixture-list-row   {
        width:49%;
        margin:0 2% 2% 0;
    }
    .fixture-list-row:nth-child(2)   {
        margin:0 0 2% 0;
    }
    .fixture-list-row .home-team, .fixture-list-row .away-team, .fixture-list-row .home-goals, .fixture-list-row .away-goals    {
        font-size:1.1em;
        line-height:1em;
    }
    .fixture-list-row .away-goals   {
        font-size:1.1em !important;
    }    
}
@media only screen and (min-width:1280px) {
    .fixture-list-row   {
        width:32%;
        margin:0 2% 2% 0;
    }
    .fixture-list-row:nth-child(2)   {
        margin:0 2% 2% 0;
    }
    .fixture-list-row:nth-child(3)   {
        margin:0 0 2% 0;
    }
}
.fixture-list-row .home-scorers span, .fixture-list-row .away-scorers span    {
    padding:10px 0;
}
.fixture-list-row .home-scorers span, .fixture-list-row .home-bookings span    {
    text-align: right;
}
.fixture-list-row .away-scorers span, .fixture-list-row .away-bookings span    {
    text-align: left;
}
.fixture-list-row .fixture-options {
    padding:20px 0 0 0;
}

/*------------------------------------------------
2.5. Trophies panel
------------------------------------------------*/
/* .trophies-list  {
    padding:20px;
} */

/*------------------------------------------------
2.6. Kick-off times panel
------------------------------------------------*/
.kick-off-time  {
    font-family: 'ca_slalombold';
    font-size:1.1em;
    padding:20px 0;
    border-bottom: 1px solid var(--brand-border-color);
}
.kick-off-time::before  {
    content: '';
    width: 30px;
    height: 20px;
    background: url(../images/icons/kick-off-time-icon.svg) no-repeat center center;
    background-size: 15px 15px;
    display: flex;
    float: left;
}

/*------------------------------------------------
2.7. Competition names panel
------------------------------------------------*/
.competition-name   {
    font-family: 'ca_slalombold';
    font-size:1.1em;
    padding:20px 0;
    border-bottom: 1px solid var(--brand-border-color);
}
.competition-name::before  {
    content: '';
    width: 30px;
    height: 20px;
    background: url(../images/icons/competition-name-icon.svg) no-repeat center center;
    background-size: 15px 15px;
    display: flex;
    float: left;
}

/*------------------------------------------------
2.8. Opponents panel
------------------------------------------------*/
.opponent-list-row  {
    font-family: 'ca_slalombold';
    font-size:1.1em;
    padding:20px 0;
    border-bottom: 1px solid var(--brand-border-color);
}
.opponent-list-row .opponent-badge  {
    margin:0 15px 0 0;
}
.opponent-list-row .opponent-name   {
    padding:15px 0;
}

/*------------------------------------------------
2.9. Pages panel 
------------------------------------------------*/
.pages-list-item    {
    padding: 15px 0 15px 0;
    /* margin: 0 0 10px 0; */
    border-radius: 5px;
    border-bottom: 1px solid var(--brand-pale-color);
    /* border-left: 5px solid var(--brand-main-color); */
    font-family: "ca_slalomregular";
    cursor: pointer;
}
.pages-list-item div:first-child > div  {
    opacity:0.4;
}
@media only screen and (min-width:200px)    {
    .pages-list-item div:first-child > div:first-child  {
        font-family: "ca_slalombold";
        opacity: 1;
        font-size: 1em;
        margin: 0 0 5px 0;
    }
}
@media only screen and (min-width:768px)    {
    .pages-list-item div:first-child > div:first-child  {
        font-size: 1.2em;
        margin: 0 0 10px 0;
    }
}
.pages-list-item .home-icon {
    position: absolute;
    float: initial;
    top: 18px;
    right: 60px;
    width: 20px;
    height: 20px;
}
.pages-list-item .home-icon img {
    width:20px;
    height:20px;
}
.list-item-options-button  {
    position: absolute;
    float: initial;
    top: 29px;
    right: 10px;
    width:30px;
    height:30px;
    background:url('../images/icons/more-options-icon.svg') no-repeat center center;
    background-size:18px 18px;
    opacity:1;
    z-index:1;
}
.list-item-popout   {
    position: absolute;
    float: initial;
    top: 10px;
    right: 5px;
    width: 130px;
    font-size: 0.9em;
    background: var(--main-theme-color);
    z-index: 2;
    border: 1px solid var(--brand-pale-color);
    border-radius: 3px;
}
.list-item-popout div   {
    padding: 10px;
    border-bottom: 1px solid var(--brand-pale-color);
}
.list-item-popout div:hover {
    background: var(--brand-pale-color);
}

/*------------------------------------------------
2.10. Formation panel
------------------------------------------------*/
#formationList > div  {
    display: flex;
    justify-content: center;
    align-items: center;
}
.formations-editor  {
    padding:20px;
    overflow:auto;
}
.formations-editor input    {
    border:1px solid #000;
    padding:20px;
}
.formations-editor .search-pop-out  {
    max-height: 200px;
    overflow: auto;
    border: 1px solid #000;
    padding: 0 10px;
    border-radius: 0 0 5px 5px;
}
.formation-editor-window    {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px 0 100px 0
}
.formation-editor-window .editor    {
    width:320px;
    height:300px;
    background:url('../images/formations-editor-background.svg') no-repeat top center;
    background-size:320px 300px;
}
.formations-editor .buttons-bar {
    position: fixed;
    top: initial;
    z-index: 1;
    bottom: 0;
    left:0;
    height: 70px;
    border-top: 1px solid var(--brand-border-color);
    background:var(--main-theme-color);
    padding:10px 20px;
}
.formations-editor .buttons-bar .button {
    width:auto;
}
.formations-editor .buttons-bar .button:first-child {
    float: left;
}
.formations-editor .buttons-bar .button:last-child {
    float: right;
}

.populated-formation-player {
    position:absolute;
    top:125px;
    left:125px;
    width:60px;
    height:70px;
}
.formation-editor-window .editor .populated-formation-player   {
    cursor:pointer;
}
.formation-editor-window .editor .populated-formation-player .image-wrapper, .formation-content .populated-formation-player .image-wrapper   {
    display: flex;
    justify-content: center;
}
.formation-editor-window .editor .populated-formation-player .image, .formation-content .populated-formation-player .image   {
    width:45px;
    height:45px;
    border-radius:30px;
    border:1px solid var(--brand-border-color);
    background-color: #fff;
}
.formation-editor-window .editor .populated-formation-player .number, .formation-content .populated-formation-player .number   {
    width:100%;
    height:20px;
    overflow:hidden;
    text-align: center;
    font-weight:bold;
    font-style: italic;
    margin:5px 0 0 0;
}
.formation-editor-window .editor .populated-formation-player .move-button  {
    position: absolute;
    float: initial;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--main-theme-color);
    background-size:20px 20px;
    background-position:center center;
    background-repeat:no-repeat;
    height: 30px;
    width: 30px;
    border: 1px solid var(--brand-pale-color);
    border-radius: 15px;
}
.formation-editor-window .editor .populated-formation-player .up-button  {
    top: -30px;
    left: 15px;
    background-image:url('../images/icons/move-button-up.svg');
}
.formation-editor-window .editor .populated-formation-player .down-button  {
    top: 75px;
    left: 15px;
    background-image:url('../images/icons/move-button-down.svg');
}
.formation-editor-window .editor .populated-formation-player .left-button  {
    top: 30px;
    left: -30px;
    background-image:url('../images/icons/move-button-left.svg');
}
.formation-editor-window .editor .populated-formation-player .right-button  {
    top: 30px;
    left: 60px;
    background-image:url('../images/icons/move-button-right.svg');
}

.formation-editor-window .delete-player-button {
    background: red;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    top: -35px;
    color: #fff;
    font-family: 'ca_slalombold';
    border-radius: 3px;
}

/*------------------------------------------------
2.11. Panel intros
------------------------------------------------*/
@media screen and (min-width:200px) {
    .panel-intro   {
        
    }
    .panel-intro p  {
        font-size:0.9em;
        text-align: center;
        margin:0 0 20px 0;
        padding:0 10%;
    }
    .panel-intro p.title    {
        font-family: 'akira expanded';
        font-size: 1.3em;
        margin: 10px 0 10px 0;
        text-align: center;
    }
}
@media screen and (min-width:768px) {
    .panel-intro   {
    
    }
    .panel-intro p  {
        font-size:1em;
        margin:0 0 30px 0;
        padding:0 30%;
    }
    .panel-intro p.title    {
        font-size: 1.5em;
        margin: 0 0 10px 0;
    }
}

/*------------------------------------------------
3. Swipe panels, standard panels & modals
--------------------------------------------------
3.1. Basic styling
------------------------------------------------*/
.swipe-panel-wrapper    {
    height:auto;
    overflow: hidden;
    /* padding:0 20px 10px 20px; */
}
@media only screen and (min-width:200px)    {
    .swipe-panel-title  {
        margin: 0 0 12px 0;
        font-family: 'ca_slalombold';
        font-size:1em;
        padding:0 20px;
    }
}
@media only screen and (min-width:768px)    {
    .swipe-panel-title  {
        margin: 0 0 12px 0;
        font-size:1.1em;
        padding:0 20px;
    }
}
.swipe-panel    {
    height:auto;
    overflow:auto;
    width:100%
}
.swipe-panel::-webkit-scrollbar {
    -webkit-appearance: none;
}
.swipe-panel-inner  {
    width:1000px;
    padding:0 20px;
}
.swipe-panel-inner video    {
    width:100%;
    height:auto;
    border-radius:10px;
}

/*------------------------------------------------
3.2. Swipe panel content
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .swipe-panel-icon-wrapper  {
        width:105px;
        margin:0 20px 20px 0;
        overflow:hidden;
    }
    .swipe-panel-icon-wrapper .icon {
        width: 115px;
        height: 80px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* padding: 10px 0; */
        cursor: pointer;
        border: 1px solid var(--brand-pale-color);
    }
    .swipe-panel-icon-wrapper .icon img {
        border-radius:3px;
        /* max-width:125px; */
        height:100%;
        width:auto;
    }
}
@media only screen and (min-width:768px)    {
    .swipe-panel-icon-wrapper  {
        width:135px;
        /* height:150px; */
        /* margin:0 20px 0 0; */
    }
    .swipe-panel-icon-wrapper .icon {
        width: 135px;
        height: 100px;
        border-radius: 5px;
        /* padding: 10px 0; */
    }
    .swipe-panel-icon-wrapper .icon img {
        height:100%;
    }
}
.swipe-panel-icon-wrapper span  {
    font-family: 'ca_slalomregular';
    margin: 10px 0 0 0;
    font-size: 0.9em;
    height: 15px;
    overflow: hidden;
}
.swipe-panel-icon-wrapper span.tier, .last-opened-layout span.tier, .instant-search-result span.tier {
    margin: 7px 0 0 0;
    text-transform: capitalize;
    font-size: 0.8em;
    /* border-right: 1px solid var(--brand-text-color); */
    width: auto;
    height: 20px;
    padding: 1px 0 0 0;
    border-radius: 3px;
    opacity: 0.4;
}
.last-opened-layout span.tier {
    margin:0;
}
.swipe-panel-icon-wrapper span.tier.plus, .last-opened-layout span.tier.plus, .instant-search-result span.tier.plus  {
    opacity:1;
}
.swipe-panel-icon-wrapper span.tier.plus::before, .last-opened-layout span.tier.plus::before, .instant-search-result span.tier.plus::before  {
    content: '';
    display: inline-block;
    background: gold;
    width: 8px;
    height: 8px;
    margin: 0px 4px 0 0;
    border-radius: 5px;
}
.swipe-panel-icon-wrapper span.pack-count  {
    height:20px;
    width:auto;
    font-family: 'ca_slalombold';
    font-size: 0.6em;
    padding: 0px 6px;
    margin:7px 5px 0 0;
    border: 1px solid var(--brand-text-color);
    border-radius: 3px;
    opacity: 0.4;
}
.swipe-panel-icon-wrapper .icon img.add-icon, .full-width-prompt img.add-icon {
    width:15px;
    height:15px;
    display: flex;
    align-items:center
}
.swipe-panel-wrapper .view-all-button   {
    position: absolute;
    left:initial;
    float: initial;
    right:20px;
    color: var(--brand-main-color);
    font-family:'ca_slalombold';
    font-size:0.9em;
    z-index:1;
}
.full-width-prompt  {
    padding:0 20px;
}
.full-width-prompt-inner  {
    padding:15px;
    background:var(--brand-main-color);
    border:1px solid var(--brand-main-color);
    color:#fff;
    font-family:'ca_slalombold';
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
}

.featured-pack-pod  {
    padding:10px;
    margin:0 20px 0 0;
    width:290px;
    background: var(--brand-pale-color);
    border-radius:5px;
}

/*------------------------------------------------
3.3. Standard panels
------------------------------------------------*/
@media only screen and (min-width:200px) {
    .standard-panel {
        padding:8px 20px 60px 20px;
    }
    .standard-panel .swipe-panel-icon-wrapper  {
        width:48%;
        margin:0 4% 4% 0;
    }
    .standard-panel .swipe-panel-icon-wrapper:nth-child(2n)  {
        margin:0 0 0 0;
    }
    .standard-panel .swipe-panel-icon-wrapper .icon  {
        width: 100%;
        overflow: hidden;
        height: 150px;
        max-height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--brand-pale-color);
        padding: 10px;
    }
    .standard-panel .swipe-panel-icon-wrapper .icon img {
        width:70%;
        height:auto;
    }
    .standard-panel .swipe-panel-title  {
        padding:10px 0 0 0;
    }

    .standard-panel .swipe-panel-icon-wrapper .icon.pack img {
        width:100%;
        height:auto;
    }
}

@media only screen and (min-width:768px)    {
    .standard-panel .swipe-panel-icon-wrapper  {
        width:19.2%;
        margin:0 1% 0 0;
    }
    .standard-panel .swipe-panel-icon-wrapper:nth-child(2n)  {
        margin:0 1% 1% 0;
    }
    .standard-panel .swipe-panel-icon-wrapper:nth-child(5n)  {
        margin:0 0 1% 0;
    }
    .standard-panel .swipe-panel-icon-wrapper .icon  {
        min-height:120px;
        max-height: 150px;
        height:150px;
    }
    .standard-panel .swipe-panel-icon-wrapper .icon.pack img {
        width:90%;
        height:auto;
    }
}

@media only screen and (min-width:1024px)    {
    .standard-panel .swipe-panel-icon-wrapper .icon.pack img {
        width:70%;
        height:auto;
    }
}

/*------------------------------------------------
3.4. Modals
------------------------------------------------*/
@media screen and (min-width:200px) {
    .modal-title    {
        margin: 0 0 10px 0;
        font-family: 'ca_slalombold';
        font-size: 1.2em;
        line-height:1em;
        /* padding: 0 0 0 10px; */
        width: auto;
        display: flex;
        align-items: center;
    }
}
@media screen and (min-width:768px) {
    .modal-title    {
        font-size: 1.6em;
        line-height:1.2em;
    }
}

.modal-inner span, .modal-inner label   {
    margin: 0 0 5px 0;
    font-family: 'ca_slalombold';
}
.modal-inner p   {
    margin:0 0 20px 0;
}
.modal-inner input, .modal-inner textarea  {
    margin:0 0 10px 0;
    padding: 15px;
    border:1px solid var(--brand-text-color);
}
.modal .blurb   {
    margin-bottom:10px;
}

.full-screen-overlay    {
    position: fixed;
    float:initial;
    height:100%;
    background:var(--main-theme-color);
    z-index:99;
}
.full-screen-overlay .close-modal-button    {
    position:absolute;
    float:initial;
    top:10px;
    right:10px;
    width:35px;
    height:35px;
    background:url('../images/icons/close-drawer-icon-white.svg') no-repeat center center;
    background-size:20px 20px;
    z-index:1;
}
@media only screen and (min-width:200px)    {
    .full-screen-overlay .modal-inner   {
        padding:20px;
        height:calc(100% - 180px);
        max-height:initial;
    }
    .full-screen-overlay .masthead  {
        background: var(--brand-main-color);
        background-size: cover;
        padding: 60px 0 0;
        height: 180px;
    }
    .full-screen-overlay .masthead .logo    {
        position:absolute;
        float:initial;
        top:20px;
        left:20px;
        width:80px;
        z-index:1;
    }
}
@media only screen and (min-width:768px)    {
    .full-screen-overlay .modal-inner   {
        padding:20px;
        max-height:initial;
    }
}
.full-screen-overlay .masthead .modal-title, .full-screen-overlay .masthead .blurb  {
    color:#fff;
    font-family:'ca_slalombold';
    width:100%;
    justify-content: center;
}
.full-screen-overlay .masthead .blurb   {
    font-family:'ca_slalomregular';
    padding:0 20px 20px 20px;
    text-align:center;
}
.full-screen-overlay .masthead .live-search-bar-wrapper {
    padding:0 20px;
}
.full-screen-overlay .masthead .live-search-bar {
    padding:15px;
}
.full-screen-overlay .modal-inner .swipe-panel-icon-wrapper .icon   {
    overflow:hidden;
}
.modal-inner .svg-preview   {
    /* background: var(--brand-border-color); */
    border: 1px solid var(--brand-pale-color);
    border-radius: 10px;
}
/* .modal-inner .svg-preview svg   {
    transform-origin: center center;
    transform:scale(0.6);
} */
.modal-back-button  {
    width:40px;
    height:40px;
    background:Red;
}

/*------------------------------------------------
3.5. Pod swipe panels
------------------------------------------------*/
.pod-swipe-panel::-webkit-scrollbar {
    -webkit-appearance: none;
}

@media screen and (min-width:200px) {
    .pod-swipe-panel    {
        overflow-x:auto;
    }
    .pod-swipe-panel .inner    {
        padding: 20px;
        width:1000px;
    }
    .pod-swipe-panel .inner .pod   {
        background:var(--brand-pale-color);
        border-radius:15px;
        width:300px;
        margin:0 20px 0 0;
        overflow: hidden; 
        cursor:pointer;
    }
    .pod-swipe-panel .inner .pod .nine-columns  {
        padding:30px 30px 10px 30px;
        width:74.999%;
    }
    .pod-swipe-panel .inner .pod p  {
        font-family: 'ca_slalombold';
        font-size: 1.2em;
        margin: 0 0 10px 0;
    }
    .pod-swipe-panel .inner .pod p img  {
        width:15px;
        height:15px;
        margin:0 5px 0 0;
    }
    .pod-swipe-panel .inner .pod span  {
        font-size: 1em;
        margin: 0 0 10px 0;
    }
    .pod-swipe-panel .inner .pod .three-columns  {
        width:25%;
    }
    .pod-swipe-panel .inner .pod a  {
        font-family: 'ca_slalombold';
        font-size: 0.9em;
        margin: 0 0 10px 0;
        float:right;
        width:auto;
        padding:30px 30px 0 0;
        cursor:pointer;
    }
    .pod-swipe-panel .inner .pod .images .thumb {
        width:auto;
        margin:0 0 0 5px;
        border-radius:5px;
    }

    .pod-swipe-panel .inner.free    {
        padding: 0 20px 20px 20px;
        width:100%;
    }
    .pod-swipe-panel .inner .pod.free   {
        width:100%;
        background:var(--main-theme-color);
    }
}
@media screen and (min-width:768px) {
    .pod-swipe-panel .inner    {
        padding: 20px;
        width:auto;
    }
    .pod-swipe-panel .inner .pod   {
        background:var(--brand-pale-color);
        border-radius:15px;
        width:32%;
        margin:0 2% 0 0;
    }
    .pod-swipe-panel .inner .pod:last-child {
        margin:0;
    }
    .pod-swipe-panel .inner .pod .nine-columns  {
        padding:30px;
    }
    .pod-swipe-panel .inner .pod p  {
        font-size: 1.4em;
        margin: 0 0 10px 0;
    }
    .pod-swipe-panel .inner .pod span  {
        font-size: 1.2em;
        margin: 0 0 10px 0;
    }
    .pod-swipe-panel .inner .pod a  {
        font-size: 1em;
        padding:30px 30px 0 0;
    }
    .pod-swipe-panel .inner .pod .images .thumb {
        margin:0 0 0 10px;
        border-radius:10px;
    }
}
@media screen and (min-width:1024px)    {
    .pod-swipe-panel    {
        margin:0 0 20px 0;
    }
}

.pod-swipe-panel .inner .pod .images    {
    overflow:hidden;
    height:80px;
    padding:0 0 0 30px;
    margin:0 0 30px 0;
    width:1000px;
}
.pod-swipe-panel .inner .pod .images .thumb:first-child {
    margin:0;
}
.pod-swipe-panel .inner .pod .images img    {
    float: left;
    height:80px;
    width:auto;
    border-radius:10px;
}

/*------------------------------------------------
3.6. Content cards
------------------------------------------------*/
@media screen and (min-width:200px) {
    .content-card   {
        padding:0 20px;
        margin:0 0 30px 0;
        width:100%;
    }
    .content-card .swipe-panel-title    {
        padding:0;
        font-size:1.2em;
    }
    .content-card p {

    }
    .content-card .feed .thumb  {
        width:24%;
        margin:0 1.333% 20px 0;
        cursor:pointer;
    }
    .content-card .feed .thumb:nth-child(4n) {
        margin:0 0 20px 0;
    }
    .content-card .feed .thumb.social div:first-child   {
        height:120px;
        border-radius:10px;
    }

    .content-card .feed .thumb.story div:first-child   {
        height:180px;
        border-radius:10px;
    }  
}
@media screen and (min-width:768px) {
    .content-card   {
        padding:0 20px;
        margin:0 0 30px 0;
    }
    .content-card .swipe-panel-title    {
        padding:0;
        font-size:1.2em;
    }
    .content-card p {
        font-size:1.1em;
    }
    .content-card .feed .thumb  {
        width:19%;
        margin:0 1.25% 20px 0;
    }
    .content-card .feed .thumb:nth-child(4n) {
        margin:0 1.25% 20px 0;
    }
    .content-card .feed .thumb:nth-child(5n) {
        margin:0 0 20px 0;
    }
    .content-card .feed .thumb.social div:first-child   {
        height:140px;
        border-radius:10px;
    }

    .content-card .feed .thumb.story div:first-child   {
        height:220px;
        border-radius:10px;
    }  
}
@media screen and (min-width:1024px) {
    .content-card .feed .thumb  {
        width:19%;
        margin:0 1.25% 20px 0;
    }
    .content-card .feed .thumb:nth-child(4n) {
        margin:0 1.25% 20px 0;
    }
    .content-card .feed .thumb:nth-child(5n) {
        margin:0 0 20px 0;
    }
    .content-card .feed .thumb.social div:first-child   {
        height:160px;
        border-radius:10px;
    }

    .content-card .feed .thumb.story div:first-child   {
        height:240px;
        border-radius:10px;
    }  
}
@media screen and (min-width:1280px) {
    .content-card   {
        padding:0 20px;
        margin:0 0 30px 0;
    }
    .content-card .feed .thumb  {
        width:12%;
        margin:0 0.57% 20px 0;
    }
    .content-card .feed .thumb:nth-child(4n) {
        margin:0 0.57% 20px 0;
    }
    .content-card .feed .thumb:nth-child(5n) {
        margin:0 0.57% 20px 0;
    }
    .content-card .feed .thumb:nth-child(8n) {
        margin:0 0 20px 0;
    }
    .content-card .feed .thumb.social div:first-child   {
        height:180px;
        border-radius:10px;
    }

    .content-card .feed .thumb.story div:first-child   {
        height:260px;
        border-radius:10px;
    }  
}


.content-card .feed {
    margin:20px 0 0 0;
}
.content-card .feed .thumb .tier    {
    position: absolute;
    top: 10px;
    /* bottom: 10px; */
    left: 10px;
    width: auto;
    background: #000;
    color: #fff;
    text-transform: capitalize;
    font-family: 'ca_slalombold';
    font-size: 0.6em;
    padding: 0px 4px;
    border-radius: 3px;
}
.content-card .feed .thumb .tier.free   {
    background:var(--tier-free-fill);
    color:var(--tier-free-text);
}
.content-card .feed .thumb .tier.plus   {
    background:var(--tier-plus-fill);
    color:var(--tier-plus-text);
}
.content-card .feed .thumb div:last-child   {
    padding:10px 0 0 0;
    font-family:'ca_slalomregular';
    font-size:0.8em;
    line-height: 1.2em;
    height: 35px;
    overflow-y: hidden;
}

.content-card .view-all-button  {
    position: absolute;
    left: initial;
    float: initial;
    right: 0px;
    color: var(--brand-main-color);
    font-family: 'ca_slalombold';
    font-size: 0.9em;
    z-index: 1;
    cursor:pointer;
} 

/*------------------------------------------------
4. Graphics editor
--------------------------------------------------
4.1. Overlay
------------------------------------------------*/
.graphics-editor-overlay    {
    width:100%;
    height:100%;
    background:var(--graphics-editor-background-color);
    overflow:hidden;
    z-index:2;

    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;
}
.cursor-shield  {
    position:absolute;
    height:100%;
    background:red;
    z-index:99;
    cursor: none;
}

/*------------------------------------------------
4.2. Canvas
------------------------------------------------*/
.canvas-wrapper {
    position: relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:var(--brand-grey-color);

    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;

    overflow-y:auto;
    overflow-x: hidden;
}
.canvas {
    border:none !important;
    
    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;
    
}
.canvas, .offscreen-canvas {
    position: relative;
    margin: calc(var(--graphics-editor-navigation-height) * 2) 0 0 0;
    width: 1000px;
    height: 1200px;
    background: var(--canvas-background-color);
    border: 1px solid var(--canvas-border-color);
    float: initial;
    left:initial;
    transform: var(--canvas-scale);
    transform-origin: top center;
    overflow:hidden;
}
.offscreen-canvas {
    margin: 0 !important;
}
.canvas-element {
    position: absolute;
    width:auto;
    min-width:30px;
    min-height:30px;
    border:1px dotted var(--brand-main-color);
    /* max-width:1000px; */
    /* transform:scale(1); */
    transform-origin: bottom right;
    /* overflow:hidden; */
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    cursor:pointer;

    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;
}
.offscreen-canvas .canvas-element   {
    border: none !important;
}
.active-element {
    /* border:2px magenta solid; */
    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;
}
/* .active-element.locked::before  {
    content:'';
    position: absolute;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    background:red;
    border-radius: 10px;;
} */
.locked-layer-modal {
    position: fixed;
    top: initial;
    float: initial;
    right: 40px;
    bottom: 90px;
    width: 280px;
    height: auto;
    padding: 16px;
    background: var(--main-theme-color);
    border-radius: 10px;
    border: 1px solid var(--brand-main-color);
    box-shadow: 0 0 10px var(--brand-border-color);
    z-index: 100;
}
.locked-layer-modal .modal-title    {
    font-size: 0.9em;
    margin: 0 0 5px 0;
    width: calc(100% - 25px);
    height: 27px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0 0 0 10px;
}
.locked-layer-modal img {
    width: 13px;
    height: auto;
    margin:5px 0 0 0;
}
.locked-layer-modal p   {
    font-size:0.9em;
}
.locked-layer-modal .filled-button     {
    background: none;
    padding: 10px 0;
    color: var(--brand-main-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.locked-layer-modal .button span    {
    width:calc(100% - 40px);
    padding:0 20px 0 0;
}
.locked-layer-modal .button img {
    width: 20px;
    height: 20px;
    float: right;
    right: 35px;
}

.active-element div:first-child::selection  {
    background:var(--brand-main-color);
    color:var(--main-theme-color);
}
.editable-element   {
    height:auto;
}
.canvas-bound-marker    {
    position: absolute;
    width:1px;
    height:1px;
    background:var(--brand-main-color);
    z-index:999;

    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;
}

/* Offscreen canvas used to build final image */
.offscreen-canvas   {
    position: fixed;
    transform: scale(1);
    z-index: 3;
    border: none !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
    overflow: hidden !important;
}

/*------------------------------------------------
4.2.1 Canvas elements
------------------------------------------------*/
.grid-guide, .grid-guide-x {
    position: absolute;
    top:0;
    left:0;
    height:2px;
    background:red;
    z-index:100;
}
.grid-guide-x   {
    width:2px;
}
.width-button, .height-button   {
    position:absolute;
    border:2px solid var(--brand-main-color);
    z-index:4;
}
.width-button   {
    width:40px;
    height:50px;
    background:#fff url('../images/icons/width-button-icon.svg') no-repeat center center;
    background-size:6px 14px;
    border-radius:0 30px 30px 0;
}
.height-button  {
    width:50px;
    height:40px;
    background:#fff url('../images/icons/height-button-icon.svg') no-repeat center center;
    background-size:14px 6px;
    border-radius:0 0 30px 30px
}
.element-tools  {
    position:absolute;
    height:40px;
    min-width:40px;
    width:auto;
    background:var(--main-theme-color);
    border:1px solid var(--brand-main-color);
    border-radius:3px;
    z-index:4;
}
.element-tools .button  {
    width:40px;
    height:40px;
    border-right:1px solid var(--brand-pale-color);
}
.element-tools .plus-button {
    background: url('../images/icons/add-icon.svg') no-repeat center center;
    background-size:18px 18px;
}
.element-tools .minus-button {
    background: url('../images/icons/text-size-icons-decrease.svg') no-repeat center center;
    background-size:18px 18px;
}
.element-tools .height-plus-button {
    background: url('../images/icons/spacing-icons-increase.svg') no-repeat center center;
    background-size:18px 18px;
}
.element-tools .height-minus-button {
    background: url('../images/icons/spacing-icons-decrease.svg') no-repeat center center;
    background-size:18px 18px;
}
.element-tools .scale-up-button {
    background: url('../images/icons/add-icon.svg') no-repeat center center;
    background-size:18px 18px;
}
.element-tools .scale-down-button {
    background: url('../images/icons/text-size-icons-decrease.svg') no-repeat center center;
    background-size:18px 18px;
}
.element-tools .up-button {
    background: url('../images/icons/element-specific-tools-up-icon.svg') no-repeat center center;
    background-size:30px 30px;
}
.element-tools .down-button {
    background: url('../images/icons/element-specific-tools-down-icon.svg') no-repeat center center;
    background-size:30px 30px;
}
.element-tools .left-button {
    background: url('../images/icons/element-specific-tools-left-icon.svg') no-repeat center center;
    background-size:30px 30px;
}
.element-tools .right-button {
    background: url('../images/icons/element-specific-tools-right-icon.svg') no-repeat center center;
    background-size:30px 30px;
}

.resize-element-button  {
    position: absolute;
    width:30px;
    height:30px;
    background:#fff url('../images/icons/active-element-icons-resize.svg') no-repeat center center;
    background-size:23px 23px;
    border:1px solid var(--brand-main-color);
    border-radius:15px;
    opacity:0.7;
    transform-origin:center center;
    transform:scale(1);
    /* transition: all 0.2s ease; */
    cursor:move;
    z-index:100;
}
@media only screen and (min-width:200px) {
    .move-element-button    {
        position: absolute;
        top:0;
        right:-30px;
        float: initial;
        width: 25px;
        height: 25px;
        background:#fff url('../images/icons/active-element-icons-move.svg') no-repeat center center;
        background-size:10px 10px;
        border:1px solid var(--brand-main-color);
        border-radius:15px;
        opacity:0.7;
        transform-origin:center center;
        transform:scale(1);
        /* transition: all 0.2s ease; */
        cursor:move;
        z-index:100;
    }
}
@media only screen and (min-width:768px) {
    .move-element-button    {
        width:20px;
        height:20px;
    }
}
.fit-to-canvas-button    {
    position: absolute;
    top:-30px;
    left:100px;
    float: initial;
    width:30px;
    height:30px;
    background:#fff url('../images/icons/active-element-icons-fit-to-canvas.svg') no-repeat center center;
    background-size:23px 23px;
    border:1px solid var(--brand-main-color);
    border-radius:15px;
    opacity:0.7;
    transform-origin:center center;
    transform:scale(1);
    /* transition: all 0.2s ease; */
    cursor:move;
    z-index:100;
}
.resize-element-button:hover, .move-element-button:hover, .fit-to-canvas-button:hover    {
    /* transform: scale(1.5); */
    border:2px solid blue;
}
.element-outline    {
    position: absolute;
    background:var(--brand-main-color);
    width:2px;
    height:2px;
    z-index:3;
}
.new-element-highlighter    {
    background:var(--brand-main-color);
    animation: flasher 1s ease 1;
}

.start-typing-message   {
    position: absolute;
    background:var(--brand-main-color);
    color:#fff;
    padding:10px 20px;
    border-radius:3px;
    width:auto;
    height:30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: flasher 1s ease infinite;
}

/*------------------------------------------------
4.2.2 Text elements
------------------------------------------------*/
.text-element, .club-name-component, .club-founded-component, .ground-name-component, .club-website-component   {
    font-size:2em;
    text-wrap: balance;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .text-element .editable-element {
    display: flex;
    align-items: center;
} */

/* User-applied font styles */
.font-bold  {
    font-weight:bold;
}
.font-italic    {
    font-style:italic;
}
.font-underline {
    text-decoration:underline;
}
.font-strikethrough {
    text-decoration: line-through;
}
.font-uppercase {
    text-transform:uppercase;
}

/*------------------------------------------------
4.2.3 Image elements
------------------------------------------------*/
.flip-x {
    transform:scaleX(-1);
}
.flip-y {
    transform:scaleY(-1);
}


/*------------------------------------------------
4.2.4 Shape elements
------------------------------------------------*/
.canvas-element svg, .canvas-element rect    {
    height:100%;
}

/*------------------------------------------------
4.2.5. Component elements
------------------------------------------------*/
.canvas .empty-component    {
    background: var(--brand-main-color);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    font-size: 0.8em;
    line-height: 1.4em;
    border-radius: 20px;
    color:#fff !important;
}
.canvas .empty-component .empty-component-message   {

}
.canvas .starting-11 {
    width:auto;
}
.canvas .starting-11 .player {
    clear: both;
    font-size:2em; 
    padding:10px 0;
}
.canvas .starting-11 .player > .image, .modal-inner .player > .image {
    width:50px;
    height:50px;
    border-radius:25px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.canvas .starting-11 .name, .canvas .starting-11 .number, .modal-inner .name, .modal-inner .number    {
    width:auto;
}
.canvas .player-focus   {
    width:100%;
    height:100%;
}
.canvas .player-focus > .editable-element   {
    height:100%;
}
.canvas .player-focus-photo {
    position: absolute;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index:0;
}
.canvas .player-focus .player-stat  {
    position: relative;
    font-size:3em;
    text-transform: capitalize;
    z-index:1;
}

.modal-inner .player {
    clear: both;
    font-size:1em; 
    padding:10px;
    border:1px solid var(--brand-pale-color);
    border-left:3px solid var(--brand-main-color);
}
.modal-inner .player .image {
    width:65px;
    height:65px;
    border-radius:40px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.modal-inner .player .image .image-upload-button    {
    width:30px;
    height:30px;
    border-radius:15px;
    background:rgba(0,0,0,0.7) url('../images/icons/add-icon-white.svg') no-repeat center center;
    background-size:15px 15px;
}
.modal-inner .player .number-wrapper, .modal-inner .player .name-wrapper, .modal-inner .player .position-wrapper {
    width:50%;
    padding:0 10px;
}
.modal-inner .player .number-wrapper .number-input  {
    padding:0 10px;
}
.modal-inner .player .number-wrapper    {
    padding-left:0;
}
.modal-inner .player .position-wrapper    {
    padding-right:0;
}
.modal-inner .player .name-wrapper, .modal-inner .player .number-wrapper    {
    width:calc(100% - 65px);
    padding:0 10px;
}
.modal-inner .player input, .modal-inner .player select  {
    width:100%;
    height:40px;
}
.modal-inner .player select {
    padding:0 10px;
}
.modal-inner .player .delete-button {
    width:auto;
    color:var(--brand-deletion-color);
}
.add-player-button {
    background: var(--brand-pale-color);
    color: var(--brand-main-color);
    margin: 0 0 10px 0;
    border: 1px solid var(--brand-main-color);
}
.modal-inner .name-input    {
    width:calc(100% - 50px) !important;
}
.modal-inner .name-wrapper .name-input {
    width:100% !important;
}

.modal-inner .squad-player .name-input  {
    width:calc(100% - 65px) !important;
}
.modal-inner .squad-player .position-wrapper, .modal-inner .squad-player .number-wrapper  {
    width:100%;
    padding:0 10px;
}

.canvas .populated-formation-player {
    position:absolute;
    top:125px;
    left:125px;
    width:60px;
    height:70px;
}
.canvas .populated-formation-player   {
    cursor:pointer;
}
.canvas .populated-formation-player .image-wrapper {
    display: flex;
    justify-content: center;
}
.canvas .populated-formation-player .image {
    width:45px;
    height:45px;
    border-radius:30px;
    border:1px solid var(--brand-border-color);
    background-color: #fff;
}
.canvas .populated-formation-player .number    {
    width: 100%;
    height: 20px;
    /* overflow: hidden; */
    text-align: center;
    font-weight: bold;
    font-style: italic;
    margin: 10px 0 0 0;
    font-size: 0.5em;
    line-height: 1em;
}

/*------------------------------------------------
4.2.5.1 Squad
------------------------------------------------*/
.canvas .squad-card, .offscreen-canvas .squad-card {
    background:none;
    height:auto;
    border:none !important;
    font-family:inherit !important;
    color:inherit;
}
.canvas .squad-card .circular-headshot-wrapper .circular-headshot, .offscreen-canvas .squad-card .circular-headshot-wrapper .circular-headshot {
    /* border-bottom: 1px solid #000; */
}
.canvas .squad-card .squad-name, .offscreen-canvas .squad-card .squad-name {
    text-align: center;
    padding: 0;
    font-size: 0.6em !important;
    font-weight: bold;
    height: auto;
    overflow: hidden;
    line-height: 1.2em !important;
    top: 10px;
}
.canvas .squad-card .squad-position, .canvas .squad-card .squad-number, .offscreen-canvas .squad-card .squad-position, .offscreen-canvas .squad-card .squad-number {
    font-size:0.5em !important;
    line-height: 1em !important;
    width:100%;
    padding:20px 5px !important;
}
.canvas .squad-card .squad-position, .offscreen-canvas .squad-card .squad-position {
    text-align: center;
    font-family:inherit !important;
    padding:20px 0 10px 0 !important;
}
.canvas .squad-card .squad-number, .offscreen-canvas .squad-card .squad-number {
    text-align: center;
    font-family:inherit !important;
    font-weight: bold;
    padding:0 !important;
}
.canvas .squad-card {
    width: 19.2%;
    margin: 0 1% 1% 0 !important;
}
.canvas .squad-card:nth-child(3n) {
    margin: 0 1% 1% 0;
}
.canvas .squad-card:nth-child(5n) {
    margin: 0 0 1% 0 !important;
}
.canvas .squad-card .circular-headshot  {
    height: 180px;
}

.squad-component-item   {
    width: 100%;
    padding: 15px 0 15px 20px;
    border: 1px solid var(--brand-border-color);
    font-family: 'ca_slalombold';
    border-left: 3px solid var(--brand-main-color);
    margin: 0 0 5px 0;
    border-radius: 3px;
}

/*------------------------------------------------
4.2.5.2 Starting 11
------------------------------------------------*/
.canvas .player {
    font-size: 1em;
    font-family: inherit;
    margin: 0 0 10px 0;
}
.canvas .player .image {
    height:80px;
    width:80px;
}
.canvas .player .number, .canvas .player .name, .canvas .player .position   {
    width:auto;
    display: flex;
    align-items: center;
    height:80px;
}

/*------------------------------------------------
4.2.5.3 Player focus
------------------------------------------------*/
.canvas .player-focus-component .player-focus-photo {
    width:100%;
    height: 100%;
    z-index:1;
}
.canvas .player-focus-component .gradient, .offscreen-canvas .player-focus-component .gradient {
    position: absolute;
    top:initial;
    bottom:0;
    height:33.333%;
    background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
    z-index:2;
}
.canvas .player-focus-component .player-focus-stats, .offscreen-canvas .player-focus-component .player-focus-stats {
    width: 100% !important;
    position: absolute !important;
    top: initial !important;
    bottom: 0 !important;
    z-index:3;
}
.canvas .player-focus-component .player-focus-name {
    font-size:2em !important;
    line-height: 0.9em !important;
    margin:0 0 30px 0;
}
.canvas .player-focus-component .player-focus-number {
    font-size:1.3em !important;
    margin:0 0 30px 0;
}
.canvas .player-focus-component .player-focus-position {
    font-size:1.3em !important;
    margin:0 0 30px 0;
}
.canvas .player-stat span:first-child {
    font-size:0.6em !important;
}

/*------------------------------------------------
4.2.5.4 Fixtures
------------------------------------------------*/
.canvas .fixture-list-row, .offscreen-canvas .fixture-list-row  {
    background:none;
}
.canvas .fixtures-component-list, .offscreen-canvas .fixtures-component-list  {
    padding: 0;
}
.canvas .fixtures-component-list .fixture-list-row, .offscreen-canvas .fixtures-component-list .fixture-list-row    {
    border:none;
    padding:30px 40px;
    margin:0 0 10px 0;
    width:100%;
    background:inherit;
    color:inherit;
}
.canvas .fixtures-component-list .fixture-list-row .inner, .offscreen-canvas .fixtures-component-list .fixture-list-row .inner    {
    width:70%;
    line-height:1.2em;
    font-weight: bold;
}
.canvas .fixtures-component-list .fixture-details span, .offscreen-canvas .fixtures-component-list .fixture-details span   {
    display: block;
    width:100%;
    line-height:1.4em;
}
.canvas .fixtures-component-list .fixture-details, .offscreen-canvas .fixtures-component-list .fixture-details    {
    width:30%;
    font-size:0.6em;
}
.canvas .fixtures-component-list .fixture-list-row .home-team, .canvas .fixtures-component-list .fixture-list-row .away-team {
    width:80%;
    display: flex;
    justify-content: left;
}
.offscreen-canvas .fixtures-component-list .fixture-list-row .home-team, .offscreen-canvas .fixtures-component-list .fixture-list-row .away-team {
    width:80%;
    display: flex;
    justify-content: left;
}
.canvas .fixtures-component-list .fixture-list-row .home-goals, .canvas .fixtures-component-list .fixture-list-row .away-goals    {
    width:20%;
    display: flex;
    justify-content: left;
}
.offscreen-canvas .fixtures-component-list .fixture-list-row .home-goals, .offscreen-canvas .fixtures-component-list .fixture-list-row .away-goals    {
    width:20%;
    display: flex;
    justify-content: left;
}
.canvas .fixtures-component-list .fixture-list-row .home-team, .canvas .fixtures-component-list .fixture-list-row .away-team, .canvas .fixtures-component-list .fixture-list-row .home-goals, .fixture-list-row .away-goals    {
    font-size: 0.8em;
    height: 35px;
    margin:0
}
.offscreen-canvas .fixtures-component-list .fixture-list-row .home-team, .offscreen-canvas .fixtures-component-list .fixture-list-row .away-team, .offscreen-canvas .fixtures-component-list .fixture-list-row .home-goals, .fixture-list-row .away-goals    {
    font-size: 0.8em;
    height: 35px;
    margin:0
}
.canvas .fixtures-component-list .fixture-list-row .home-scorers, .canvas .fixtures-component-list .fixture-list-row .away-scorers, .fixture-list-row .home-bookings, .fixture-list-row .away-bookings {
    font-size:0.8em;
}
.offscreen-canvas .fixtures-component-list .fixture-list-row .home-scorers, .offscreen-canvas .fixtures-component-list .fixture-list-row .away-scorers, .offscreen-canvas .fixtures-component-list .fixture-list-row .home-bookings, .offscreen-canvas .fixtures-component-list .away-bookings {
    font-size:0.8em;
}
.canvas .fixtures-component-list .fixture-list-row .fixture-options  {
    display: block;
}
.offscreen-canvas .fixtures-component-list .fixture-list-row .fixture-options  {
    display: block;
}
.canvas .fixtures-component-list .fixture-list-row .fixture-options span:last-child {
    margin:0;
}
.offscreen-canvas .fixtures-component-list .fixture-list-row .fixture-options span:last-child {
    margin:0;
}

/*------------------------------------------------
4.2.5.5 Sponsors
------------------------------------------------*/
.canvas .sponsors-component .editable-element, .offscreen-canvas .sponsors-component .editable-element {
    display: flex;
    align-items: center;
}
.modal-inner.sponsor-reorder-list   {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px 0;
}
.modal-inner.sponsor-reorder-list img   {
    max-height:200px;
}

/*------------------------------------------------
4.2.5.6 Formation
------------------------------------------------*/
.formation-player .player-name  {
    border-bottom: 1px solid var(--brand-main-color);
    height: 15px;
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing:0;
    font-weight:bold;
}
.offscreen-canvas .formation-player .player-name    {
    border-bottom:none;
}

/*------------------------------------------------
4.2.5.7 Socials
------------------------------------------------*/
.social-list-item   {
    margin:0 0 5px 0;
    display: flex;
    align-items: center;
}
.social-list-item img   {
    width:45px;
    height:45px;
    padding:10px;
    background:black;
    border-radius:30px;
}
.social-list-item span  {
    width:calc(100% - 40px);
    padding:0 0 0 10px;
}

/*------------------------------------------------
4.2.5.8 Opponents badge
------------------------------------------------*/
.chosen-badge-wrapper   {
    background:var(--brand-border-color);
    border:1px solid var(--brand-pale-color);
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin: 0 0 10px 0;
}
.chosen-badge-wrapper img   {
    width:auto;
    max-height:150px;
}

/*------------------------------------------------
4.3. Navigation
------------------------------------------------*/
.graphics-editor-overlay .navigation    {
    position: fixed;
    background:var(--main-theme-color);
    height:var(--graphics-editor-navigation-height);
    overscroll-behavior: none;
    touch-action: none;
    z-index:105;
}
.graphics-editor-overlay .navigation .button    {
    padding:20px;
    color:#fff;
}
.close-drawer-button    {
    width: 30px;
    height: 30px;
    color: #fff;
    position: absolute;
    background: url(../images/icons/close-drawer-icon.svg) no-repeat;
    background-position: center center;
    background-size: 15px 15px;
    border-radius: 15px;
    /* border:1px solid var(--brand-pale-color); */
    top: 10px;
    right: 10px;
}
.fixed-close-drawer-button  {
    position:absolute;
    float:initial;
    right:10px;
    top:10px;
    width:30px;
    height:30px;
    /* border:1px solid var(--brand-pale-color); */
    background:url('../images/icons/close-drawer-icon.svg') no-repeat center center;
    background-size:15px 15px;
    border-radius:15px;
    z-index:2;
}
.close-graphics-editor-button   {
    width:var(--graphics-editor-navigation-height);
    height:var(--graphics-editor-navigation-height);
    background:url('../images/icons/exit-editor-icon-black.svg') no-repeat;
    background-position:center center;
    background-size:20px 20px;
}
.layers-button {
    width:var(--graphics-editor-navigation-height);
    height:var(--graphics-editor-navigation-height);
    background:url('../images/icons/layers-icon.svg') no-repeat;
    background-position: center center;
    background-size:27.04px 25px;
}
.undo-button {
    width:var(--graphics-editor-navigation-height);
    height:var(--graphics-editor-navigation-height);
    background: url('../images/icons/undo-icon.svg') no-repeat;
    background-position: center center;
    background-size:20px 20px;
}
.redo-button {
    width:var(--graphics-editor-navigation-height);
    height:var(--graphics-editor-navigation-height);
    background: url('../images/icons/redo-icon.svg') no-repeat;
    background-position: center center;
    background-size:20px 20px;
}
.options-button {
    width:var(--graphics-editor-navigation-height);
    height:var(--graphics-editor-navigation-height);
    background: url('../images/icons/editor-options-icon-white-black.svg') no-repeat;
    background-position: center center;
    background-size:30px 30px;
}
.play-button    {
    width:var(--graphics-editor-navigation-height);
    height:var(--graphics-editor-navigation-height);
    background: url('../images/icons/play-button-icon-black.svg') no-repeat;
    background-position: center center;
    background-size:30px 30px;
}
.pause-button    {
    width:var(--graphics-editor-navigation-height);
    height:var(--graphics-editor-navigation-height);
    background: url('../images/icons/pause-button-icon-black.svg') no-repeat;
    background-position: center center;
    background-size:30px 30px;
}
.export-button {
    top: 7.5px;
    height: calc(var(--graphics-editor-navigation-height) - 15px);
    float: right;
    color: var(--brand-main-color) !important;
    border-radius: 3px;
    display: flex;
    align-items: center;
    right: 20px;
    font-family: 'ca_slalombold';
    justify-content: center;
    padding: 0 !important;
}
.export-button img  {
    width:35px;
    height:35px;
    margin:0;
}

/*------------------------------------------------
4.4. Tools
------------------------------------------------*/
.open-tools-button {
    position: fixed;
    top:initial;
    bottom:20px;
    left:20px;
    float:initial;
    width:50px;
    height:50px;
    border-radius:25px;
    background:var(--brand-main-color) url('../images/icons/open-tools-button-icon.svg') no-repeat;
    background-size:15px 15px;
    background-position: center center;
    animation: bobber 5s ease infinite;
    z-index:103;

    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;
}
.tools-drawer   {
    position: fixed;
    top:initial;
    bottom:calc(var(--graphics-editor-navigation-height) * 1.5);
    left:20px;
    width: 100%;
    max-width:190px;
    height:auto;
    background:var(--main-theme-color);
    border:1px solid var(--brand-main-color);
    border-radius:10px;
    padding:10px;
    overflow: auto;
    z-index: 5;
}
.show-drawer   {
    animation: slideInDrawer 0.3s ease 1 forwards;
}
.transparency-panel {
    min-height:30px;
}
.slider-node    {
    position: absolute;
    left:0;
    top:0;
    width:30px;
    height:30px;
    background:var(--main-theme-color);
    border:1px solid var(--canvas-border-color);
    border-radius:15px;
    cursor:move;
}
.tool-button    {
    font-family: 'ca_slalombold';
    font-size: 1.1em;
    margin: 0 0 5px 0;
}

/*------------------------------------------------
4.5. Options
------------------------------------------------*/
/* .graphics-editor-options    {
    position: fixed;
    top:100%;
    width:100%;
    height:100%;
    padding:30px 30px 20px 30px;
    background:var(--options-drawer-background-color);
    border-radius:20px 20px 0 0;
    overflow: auto;
    z-index:101;
} */
@media only screen and (min-width:200px) {
    .graphics-editor-options     {
        position: fixed;
        top:calc(var(--graphics-editor-navigation-height) + 10px);
        left:10px;
        width:calc(100% - 20px);
        padding:20px;
        background:var(--options-drawer-background-color);
        border:1px solid var(--brand-border-color);
        border-radius:10px;
        overflow: auto;
        z-index:106;
    }   
}
@media only screen and (min-width:768px) {
    .graphics-editor-options    {
        position: fixed;
        width: 320px;
    }   
}
.graphics-editor-options ul     {
    margin:20px 0 0 0;
}
.graphics-editor-options ul li  {
    list-style-type: none;
    /* margin: 0 0 10px 0; */
    cursor: pointer;
    padding: 10px 0;
    border-radius: 5px;
    transform-origin: center center;
    transform: scale(1);
    transition: all 0.2s ease;
}
.graphics-editor-options ul li:first-child  {
    /* border-bottom:1px solid var(--brand-pale-color); */
    padding-top:0;
}
.graphics-editor-options ul li:hover  {
    transform:scale(0.975);
}
.graphics-editor-options ul li span:first-child  {
    font-family: 'ca_slalombold';
    font-size: 1em;
    margin: 0 0 3px 0;
}
.graphics-editor-options ul li:hover span:first-child  {
    color:var(--brand-main-color);
}
.graphics-editor-options ul li > span:last-child  {

}
.graphics-editor-options ul li img  {
    width: 30px;
    height: 30px;
    margin: 0 0 10px 0;
}
.pack-info-banner   {
    margin:0 0 10px 0;
}
.pack-info-banner .pack-info    {
    display: flex;
    justify-content: center;
    align-items: center;
    margin:10px 0 0 0;
    border:1px solid var(--brand-border-color);
    border-radius:5px;
}
.pack-info-banner .pack-info .image {
    width:70px;
    height:auto;
    border-radius:5px 0 0 5px;
}
.pack-info-banner .pack-info .image .tier-tag {
    width: auto;
    padding: 1px 5px 3px 5px;
    border-radius: 2px;
    position: absolute;
    z-index: 1;
    font-size: 0.7em;
    text-transform: capitalize;
    font-family: 'ca_slalombold';
    top: 5px;
    left: 5px;
}
.pack-info-banner .pack-info .image img   {
    width:70px;
    height:auto;
    border-radius:3px;
}
.pack-info-banner .pack-info span {
    padding:0 20px;
    font-family: 'ca_slalombold';
}
.pack-info-banner .button   {
    padding: 15px;
    font-family: 'ca_slalombold';
    border-bottom: 1px solid var(--brand-border-color);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pack-info-banner .button img   {
    width:20px;
    height:20px;
    margin:0 15px 0 0;
}

/*------------------------------------------------
4.6. Styling drawer
------------------------------------------------*/
@media only screen and (min-width:200px) {
    .styling-drawer {
        position: fixed;
        top:initial;
        bottom:-70px;
        height:70px;
        background:var(--main-theme-color);
        border:1px solid var(--brand-pale-color);
        border-radius:10px 10px 0 0;
        padding:0 0 0 80px;
        overflow:auto;
        overscroll-behavior: none;
        touch-action:pan-x;
        z-index:102;
    }
    .styling-drawer::selection  {
        background:none;
    }
    .styling-drawer::-webkit-scrollbar {
        -webkit-appearance: none;
    }
    .styling-button   {
        width:55px;
        height:55px;
        padding:14px 5px;
    }
    .styling-button img    {
        width:17px;
        height:17px;
        float:initial;
        margin:0 auto 7px auto;
        display:block;
    }
    .styling-button img::selection  {
        background:none;
        color:var(--brand-text-color);
    }
}
@media only screen and (min-width:768px) {
    .styling-drawer {
        bottom:-80px;
        height:80px;
        padding:0 0 0 100px;
    }
    .styling-button   {
        width:70px;
        height:80px;
        padding:14px 5px;
    }
    .styling-button img    {
        width:20px;
        height:20px;
        margin:0 auto 7px auto;
    }
}
.show-styling-drawer    {
    animation: slideInStylingDrawer 0.3s ease 1 forwards;
}
.styling-panel  {
    padding: 5px 0 5px 0;
    border-bottom:1px solid var(--brand-border-color);
}
.styling-panel:last-child   {
    padding: 5px 0 5px 0;
}
.styling-button span    {
    font-size:0.8em;
    line-height:1.1em;
    text-align:center;
}
.styling-button span::selection  {
    background:none;
    color:var(--brand-text-color);
}
.styling-button .active    {
    color:var(--brand-main-color);
    opacity:1;
}
.styling-button.selected    {
    background:none;
    border:none;
    border-top:5px solid var(--brand-main-color);
}
.rotate-blurb   {
    padding:0 0 5px 0;
}
@media only screen and (min-width:200px) {
    .half-drawer    {
        position: fixed;
        top: initial;
        height: auto;
        background: var(--main-theme-color);
        border: 1px solid var(--brand-main-color);
        border-radius: 5px;
        padding: 15px;
        z-index: 101;
        bottom: -750px;
        width: 100%;
        max-width: 280px;
        float: initial;
    }
}
@media only screen and (min-width:768px) {
    .half-drawer    {
        padding: 20px;
    }
}
.show-half-drawer   {
    animation: slideInHalfDrawer 0.3s ease 1 forwards;
}
.half-drawer p, .half-drawer .title {
    padding:0 0 10px 0;
    font-family: "ca_slalombold";
}
.half-drawer p:first-child, .half-drawer .title:first-child {
    padding:0 0 5px 0;
}
.half-drawer input  {
    padding: 5px;
    border: 1px solid var(--brand-text-color);
}
.half-drawer p.modal-title   {
    padding:0;
}
.style-panel    {
    margin:0 0 5px 0;
}
.half-drawer .close-drawer-button   {
    top: -15px;
    right: -15px;
    background: var(--main-theme-color) url(../images/icons/close-drawer-icon.svg) no-repeat center center;
    border: 2px solid var(--brand-main-color);
    background-size: 12px 13px;
}
.fit-to-canvas-inline-button    {
    padding:5px 0;
    font-size:0.85em;
    width:49%;
    margin:0 2% 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background:var(--brand-pale-color);
    color:var(--brand-main-color);
    border-radius:3px;
    cursor:pointer;
}
.fit-to-canvas-inline-button:last-child {
    margin:0;
}

.drawer-half-element    {
    width:50% !important;
}

.rounded-edges-input    {
    width: 24%;
    margin: 0 1.333% 0 0;
}
.rounded-edges-input:last-child {
    margin:0;
}

.layer-button   {
    padding:10px 0;
    border-bottom:1px solid var(--brand-border-color);
}

li.image-alignment-button {
    width:33.333%;
    padding:0;
    list-style-type: none;
    display:flex;
    justify-content: center;
    align-items: center;
}
li.image-alignment-button:first-child, li.image-alignment-button:nth-child(4), li.image-alignment-button:nth-child(7)   {
    justify-content: left;
}
li.image-alignment-button:nth-child(3n){
    justify-content: right;
}
li.image-alignment-button img {
    width:25px;
    height:25px;
}

li.shift-button {
    width:33.333%;
    /* border:1px solid var(--brand-border-color); */
    list-style-type:none;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:10px;
}
li.shift-button img {
    width:25px;
    height:25px;
}

li.colour-button    {
    list-style-type:none;
    display: inline-block;
}

li.alignment-button   {
    width:33.333%;
    display: inline-block;
    padding:10px;
    text-align: center;
    /* border:1px solid var(--brand-border-color); */
    display: flex;
    justify-content: center;
}

li.alignment-button img {
    width:15px;
    height:15px;
}
li.text-spacing-button  {
    width:33.333%;
    display: inline-block;
    padding:10px;
    text-align: center;
    border:1px solid var(--brand-border-color);
    display: flex;
    justify-content: center;
}
li.text-spacing-button img {
    width:15px;
    height:15px;
}

.current-font-indicator {
    border:1px solid var(--brand-border-color);
    padding:5px;
    text-align: center;
}
ul.fonts-list   {
    max-height:150px;
    overflow: auto;
}
li.font-button  {
    width:100%;
    display: inline-block;
    padding:10px;
    text-align: center;
    border:1px solid var(--brand-border-color);
}
.font-style-buttons {
    background: var(--main-theme-color);
}
.font-style-buttons .active {
    background: var(--brand-border-color);
}
.font-style-buttons div {
    width:25%;
    padding:10px;
    text-align: center;
    border:1px solid var(--brand-border-color);
}

.font-style-buttons {
    background: var(--main-theme-color);
}
.font-style-buttons .active {
    background: var(--brand-border-color);
}
.font-style-buttons div {
    width:20%;
    padding:10px;
    text-align: center;
    border:1px solid var(--brand-border-color);
}

.effects-list .effect-button    {
    padding:10px 0;
    border-bottom:1px solid var(--brand-border-color);
}

.shape-options-list .styling-panel  {
    /* width:50%; */
    border-bottom:initial;
}
.shape-options-list input[type="color" i]   {
    width:100%;
    margin:5px 0 10px 0;
}
.border-width-wrapper input.width-field   {
    /* width:auto; */
}
.border-style-wrapper   {
    margin:0;
}
.border-style-wrapper .border-style-button  {
    border:1px solid var(--brand-border-color);
    width:50%;
    padding:5px;
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
}
.border-style-button img {
    width:15px;
    height:15px;
}

.gradient-options-list .styling-panel  {
    /* width:50%; */
    border-bottom:initial;
}
.gradient-type-buttons-wrapper  {
    margin:5px 0 0 0;
}
.gradient-options-list input[type="color" i]  {
    width:100%;
    margin:5px 0 10px 0;
}
.gradient-options-list li.gradient-type-button    {
    border:1px solid var(--brand-border-color);
    width:50%;
    padding:10px;
    text-align: center;
    list-style-type: none;
}

.flip-panel div {
    width:50%;
    padding:10px;
    text-align: center;
    border:1px solid var(--brand-border-color);
    display: flex;
    justify-content: center;
}
.flip-panel div img {
    width:25px;
    height:25px;
}
.flip-panel div.active  {
    background:var(--brand-border-color);
}

.component-option   {
    border: 1px solid var(--brand-pale-color);
    border-radius: 5px;
    width: 100%;
    margin: 0 0 1.25% 0;
    padding:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'ca_slalombold';
    text-align: center;
}
.component-option:nth-child(4n) {
    margin:0 0 1.25% 0;
}
.component-option img   {
    width:40px;
    height:40px;
}
.component-option span  {
    width:auto;
    float:initial;
    color:var(--brand-text-color);
    margin:0;
    padding:0 0 0 20px;
    font-size:0.9em;
}

/* .sponsor-reorder-list   {
    display: flex;
    align-items: center;
}
.sponsor-reorder-list img   {
    width:100px;
    height:auto;
}
*/
.sponsor-reorder-list .active   {
    border: 2px solid var(--brand-main-color);
}

.modal .move-up-button {
    position: absolute;
    top: 30px;
    left: 30px;
    height: 40px;
    background: var(--main-theme-color) url(../images/icons/move-button-left.svg) no-repeat center center;
    border-bottom: 1px solid var(--brand-border-color);
    z-index: 1;
    width: 40px;
    border: 1px solid var(--brand-main-color);
    justify-content: center;
    display: flex;
    align-items: center;
    border-radius: 20px;
    background-size: 25px 25px;
}
.modal .move-down-button   {
    position: absolute;
    top: 30px;
    left: initial;
    right:30px;
    height: 40px;
    background: var(--main-theme-color) url(../images/icons/move-button-left.svg) no-repeat center center;
    border-bottom: 1px solid var(--brand-border-color);
    z-index: 1;
    width: 40px;
    border: 1px solid var(--brand-main-color);
    justify-content: center;
    display: flex
;
    align-items: center;
    border-radius: 20px;
    background-size: 25px 25px;
}

/* Graphics library */
.graphics-filters-bar   {
    padding: 10px 0;
    margin: 10px 0 0 0;
    overflow-x: auto;
}
.graphics-filters-bar-inner {
    padding:0 20px;
}
.graphics-filters-bar-inner .filter-button, .modal-inner .filter-button     {
    color: #fff;
    padding: 5px 13px;
    margin: 0 5px 5px 0;
    /* border: 1px solid #fff; */
    background: var(--brand-main-color);
    border-radius: 133px;
}
.graphics-filters-bar-inner .filter-button.filled, .modal-inner .filter-button.filled  {
    background:var(--brand-pale-color);
    border:1px solid var(--brand-pale-color);
}
@media only screen and (min-width:200px)    {
    .graphics-library-thumb {
        width:49%;
        margin:0 2% 2% 0;
    }
    .graphics-library-thumb .colour1, .svg-preview .colour1    {
        fill:#fff !important;
    }
    .graphics-library-thumb .colour2, .svg-preview .colour2    {
        fill:#000 !important;
    }
    .graphics-library-thumb:nth-child(2n) {
        margin:0 0 2% 0;
    }
    .graphics-library-thumb .icon {
        height: 150px;
        overflow: hidden;
        margin: 0 0 10px 0;
        border: 1px solid var(--brand-border-color);
        display: flex;
        justify-content: center;
        align-items: baseline;
        cursor:pointer;
    }
    .graphics-library-thumb .icon svg {
        height:150px;
    }
    .graphics-library-thumb span    {
        font-family:'ca_slalomregular';
        height: 18px;
        overflow: hidden;
    }
}
@media only screen and (min-width:768px)    {
    .graphics-library-thumb {
        width:24%;
        margin:0 1.25% 2% 0;
    }
    .graphics-library-thumb:nth-child(2n) {
        margin:0 1.25% 2% 0;
    }
    .graphics-library-thumb:nth-child(4n) {
        margin:0 0% 2% 0;
    }
    .graphics-library-thumb .icon {
        height: 150px;
        overflow: hidden;
        margin: 0 0 10px 0;
        border: 1px solid var(--brand-border-color);
        display: flex;
        justify-content: center;
        align-items: baseline;
        cursor:pointer;
    }
    .graphics-library-thumb .icon svg {
        height:150px;
    }
    .graphics-library-thumb span    {
        font-family:'ca_slalomregular';
    }
}

/*------------------------------------------------
4.7. Layers
------------------------------------------------*/
.layers-panel   {
    position: fixed;
    top: calc(var(--graphics-editor-navigation-height) + 10px);
    left: 10px;
    width: 320px;
    height: calc(100% - var(--graphics-editor-navigation-height) - 20px);
    background: var(--main-theme-color);
    border: 1px solid var(--brand-border-color);
    padding: 35px 20px 20px 20px;
    z-index: 105;
    border-radius: 10px;
}
.layers-panel-tab   {
    width: 48%;
    border-bottom: 3px solid var(--main-theme-color);
    padding: 0 20px 10px 10px;
    font-family: 'ca_slalombold';
    margin: 0 2% 0 0;
    opacity: 0.7;
}
.layers-panel-tab.active    {
    opacity:1;
    border-bottom:3px solid var(--brand-main-color);
}
.layers-view-wrapper    {
    height:auto;
    max-height:500px;
    overflow:auto;
}
.layer-view-button  {
    height:50px;
    border:1px solid var(--canvas-border-color);
    border-radius:5px;
    margin:0 0 5px 0;
    overflow:hidden;
    cursor:pointer;
}
.layer-view-button .off-canvas-button   {
    position: absolute;
    width: 100%;
    height: 100%;
    background:rgba(255, 0, 0, 0.7);
    color:#fff;
    font-family: 'ca_slalombold';
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:1;
}
.layer-view-button .layer-number    {
    width:40px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background:var(--brand-main-color);
    color:#fff;
}
.layer-view-button .layer-content    {
    width:calc(100% - 80px);
    background:var(--brand-border-color);
}
.layer-view-button .layer-lock-icon    {
    width:40px;
    height:40px;
    background:url('../images/icons/layer-lock-icons-unlocked.svg') no-repeat center center;
    background-size:30px 30px;
}
.layer-view-button .layer-lock-icon.locked {
    background:url('../images/icons/layer-lock-icons-locked.svg') no-repeat center center;
    background-size:30px 30px;
}
.layer-view-button .editable-element    {
    padding:0 !important;
    height:50px !important;
}
.layer-view-button img  {
    top:0 !important;
    left:0 !important;
    height:50px !important;
    width:auto;
}
.layer-view-button svg  {
    height:50px !important;
    width:auto;
}
.layer-label    {
    position: absolute;
    width:auto;
    height:auto;
    padding:5px 10px;
    border-radius:3px 3px 0 0;
    background:var(--brand-main-color);
    color:#fff;
    font-size:11px;
    text-transform: capitalize;
    z-index:100;
    display:none;
}
.locked-label    {
    position: absolute;
    width:auto;
    height:auto;
    padding:5px 10px;
    border-radius:3px 3px 0 0;
    background:red;
    color:#fff;
    font-size:11px;
    text-transform: capitalize;
    z-index:100;
}
.layer-bubble   {
    position: absolute;
    width: auto;
    max-width: 280px;
    height: 30px;
    max-height: 30px;
    background: var(--main-theme-color);
    color: #000;
    border: 1px solid var(--brand-main-color);
    border-radius: 3px;
    /* box-shadow: 0 0 10px var(--brand-border-color); */
    overflow: hidden;
    animation: animateInLayerBubble 0.3s ease 1 forwards;
    z-index: 101;
    font-size: 1.1em;
    font-family: 'ca_slalombold';
    text-align: center;
}
.layer-bubble .layer-bubble-layer-number    {
    width:30px;
    height:100%;
    background:var(--brand-main-color);
    color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family:'ca_slalomregular';
    font-size:0.9em;
}
.layer-bubble img {
    height:30px;
    width:auto;
    border-radius: 3px 0 0 3px;
}
.layer-bubble svg {
    height:30px;
    width:30px;
}
.layer-bubble span  {
    width: auto;
    height:30px;
    padding: 5px 10px;
    font-size:0.8em;
}

.canvas-size-editor {
    padding:20px 0;
}
.canvas-size-editor > p:first-child   {
    font-family: 'ca_slalombold';
    margin:0 0 5px 0;
}
.canvas-size-editor > p:nth-child(2)   {
    margin:0 0 10px 0;
}
.canvas-size-editor > .canvas-size-field-labels {
    padding:5px 0;
}
.canvas-size-editor > .canvas-size-field-labels div   {
    width:50%;
    font-size: 0.8em;
}
.canvas-size-editor input   {
    width:40%;
    padding:10px 15px;
    font-family: 'ca_slalombold';
}
.canvas-size-editor > .filled-button    {
    margin:20px 0 0 0;
}
.canvas-size-editor .canvas-px-label    {
    width:10%;
    font-family: 'ca_slalombold';
    font-size: 0.8em;
    text-align: center;
    padding:10px 0 0 0;
}

.canvas-colours-editor  {
    padding:20px 0;
    border-top:1px solid var(--brand-border-color);
    border-bottom:1px solid var(--brand-border-color);
}
.canvas-colours-editor p  {
    font-family: 'ca_slalombold';
    margin:0 0 5px 0;
}
.canvas-colours-editor input[type="color" i]    {
    width:100%;
    margin:0 0 20px 0;
}

.layers-view    {
    padding:20px 0;
    font-size: 0.9em;
}
.layers-view > p:first-child   {
    margin:0 0 10px 0;
    background:var(--brand-pale-color);
    padding: 15px;
    border-radius: 5px;
}
.layers-view > p:nth-child(2)   {
    margin:0 0 10px 0;
}

/*------------------------------------------------
4.8. Exporting
------------------------------------------------*/
.processing-image-wrapper   {
    position: fixed;
    top: calc(var(--graphics-editor-navigation-height) + 10px);
    left: initial;
    right: 10px;
    width: 300px;
    height:auto;
    max-height:300px;
    overflow: auto;
    padding: 50px 0 0 0;
    background: var(--main-theme-color);
    border: 1px solid var(--brand-border-color);
    border-radius:10px;
    /* box-shadow: 0 0 10px var(--brand-border-color); */
    z-index: 100;

    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;
}
.processing-image-wrapper > div:first-child {
    position: fixed;
    top: calc(var(--graphics-editor-navigation-height) + 10px);
    background: var(--brand-main-color);
    color: #fff;
    font-family: 'ca_slalombold';
    border: 1px solid var(--brand-border-color);
    padding: 15px 20px;
    z-index: 101;
    right: 10px;
    float: initial;
    width: 300px;
    border-radius: 10px 10px 0 0;
    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;
}
.processing-image-wrapper .close-drawer-button  {
    position: fixed;
    top: calc(var(--graphics-editor-navigation-height) + 20px);
    right: 20px;
    /* border: 1px solid #fff; */
    background: url(../images/icons/close-drawer-icon-white.svg) no-repeat center center;
    width: 30px;
    height: 30px;
    float: right;
    border-radius: 20px;
    background-size: 15px 15px;
    left: initial;
    z-index: 102;
}
.processing-image-wrapper .processing-image-message   {
    padding:20px 20px 20px 20px;
    border-bottom:1px solid var(--brand-border-color);
    font-size: 0.9em;
    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;
}
.processing-image-wrapper .processing-image-message a   {
    width: 48%;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--brand-main-color);
    border: 1px solid var(--brand-pale-color);
    font-family: 'ca_slalombold';
    padding: 5px;
    border-radius: 5px;
}
.processing-image-wrapper .processing-image-message a   {
    margin:0 2% 0 0;
}
.processing-image-wrapper .processing-image-message > p:nth-child(1)   {
    display: flex;
    justify-content: left;
    align-items: center;
}
.processing-image-wrapper .processing-image-message > p:nth-child(2)   {
    padding: 5px 0 10px 0;
    display: flex;
    justify-content: left;
    align-items: center;
}
.processing-image-wrapper .processing-image-message > p:nth-child(1)::before    {
    content: '';
    width: 10px;
    height: 10px;
    margin: 0 7px 0 2px;
    border: 1px solid var(--brand-main-color);
    border-radius: 3px;
    background-size: 15px 15px;
    display: inline-block;
    transform: rotate(45deg);
}
.processing-image-wrapper .processing-image-message > p:nth-child(2)::before    {
    content: '';
    width:15px;
    height:15px;
    margin:0 5px 0 0;
    background: url('../images/icons/button-icons-publish.svg') no-repeat center center;
    background-size:15px 15px;
    display: inline-block;
}
.processing-image-wrapper .processing-image-message > .export-limit::before    {
    content: '';
    width:15px;
    height:15px;
    margin:0 5px 0 0;
    background: url('../images/icons/export-limit-icon.svg') no-repeat center center !important;
    background-size:15px 15px;
    display: inline-block;
}

/* Processing image overlay */
.processing-overlay-message {
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.processing-overlay-message div {
    text-align: center;
}
.processing-overlay-message div span    {
    font-family: 'ca_slalombold';
    padding:15px;
}
.processing-overlay-message .processing-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.processing-overlay-message .processing {
    width:50px;
    height:50px;
    background:var(--brand-main-color);
    border:1px solid var(--brand-main-color);
    border-radius:5px;
    animation: processing 2s ease infinite;
    margin:0% 0 0 0;
}

/*------------------------------------------------
4.9. Tool styles
------------------------------------------------*/
.tool   {

}
.tool .tool-input {
    border:1px solid var(--brand-border-color);
    height:30px;
}
.tool .tool-button    {
    border:1px solid var(--brand-border-color);
    height:30px;
    width:30px;
    cursor:pointer;
}

/* --------- specific styling --------- */

.tool-tabs .tab  {
    width:50%;
    height:40px;
    font-family: 'ca_slalombold';
    font-size:1em;
    opacity:0.6;
    cursor:pointer;
}
.tool-tabs .tab.active  {
    opacity:1;
    border-bottom:3px solid var(--brand-main-color);
}

.tool-tab-wrapper   {
    padding:15px 0 0 0;
}

.tool-button.subtract   {
    background:url('../images/icons/text-size-icons-decrease.svg') no-repeat center center;
    background-size:15px 15px;
}
.tool-button.increase   {
    background:url('../images/icons/text-size-icons-increase.svg') no-repeat center center;
    background-size:15px 15px;
}


/*------------------------------------------------
4.10. Skin options
------------------------------------------------*/
.skin-button    {
    position: fixed;
    top: initial;
    bottom: 100px;
    left: 26px;
    width: 40px;
    height: 40px;
    background: var(--main-theme-color) url(../images/icons/skin-button-icon.svg) no-repeat center center;
    background-size: 25px 25px;
    border-radius: 20px;
    border: 1px solid var(--brand-main-color);
    z-index: 4;
}
.skin-options-popout    {
    position: fixed;
    top: initial;
    bottom: 150px;
    left: 20px; 
    width:190px;
    background: var(--main-theme-color);
    border:1px solid var(--brand-main-color);
    border-radius: 10px;
    z-index:103;
}
.skin-options-popout .option, .skin-options-popout .wrapper    {
    font-family: 'ca_slalombold';
    padding: 10px 20px;
    line-height:1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.skin-options-popout .wrapper {
    display: block;
}
.skin-options-popout div img    {
    width: 25px;
    height: 25px;
    margin: 0 5px 0 0;
}
.skin-options-popout div:first-child {
    padding: 20px 20px 10px 20px;
}
.skin-options-popout div:last-child {
    padding: 10px 20px 20px 20px;
}

/*------------------------------------------------
5. Animations
------------------------------------------------*/
@keyframes slideInDrawer {
    0%      {top:100%}
    100%    {top:0%}
}
@media only screen and (min-width:200px) {
    @keyframes slideInStylingDrawer {
        0%      {bottom:-70px}
        100%    {bottom:0}
    }    
}
@media only screen and (min-width:768px) {
    @keyframes slideInStylingDrawer {
        0%      {bottom:-80px}
        100%    {bottom:0}
    }    
}

@keyframes slideInHalfDrawer {
    0%      {bottom:-90px}
    100%    {bottom:89px}
}
@keyframes animateInLayerBubble {
    0%      {top: -30px}
    100%    {top:calc(var(--graphics-editor-navigation-height) + var(--graphics-editor-navigation-height) / 4)}
}
@keyframes rainbowHighlighter   {
    0%      {border:5px solid var(--brand-deletion-color)}
    25%     {border:5px solid var(--guidance-color)}
    50%     {border:5px solid var(--brand-main-color)}
    75%     {border:5px solid limegreen}
    100%    {border:5px solid var(--brand-deletion-color)}
}
@keyframes bobber   {
    0%      {transform:scale(1); bottom:20px;}
    50%     {transform:scale(1.1); bottom:30px;}
    100%    {transform: scale(1); bottom:20px;}
}
@keyframes processing   {
    0%      {transform:scale(1); bottom:20px; background:none; transform:rotate(0deg)}
    50%     {transform:scale(1.1); bottom:30px; background:var(--brand-main-color); transform:rotate(180deg);}
    100%    {transform: scale(1); bottom:20px; background:none; transform:rotate(360deg);}
}
@keyframes flasher  {
    0%      {opacity:1}
    50%     {opacity:0.5}
    100%     {opacity:1}
}
@keyframes gradientHighlighter  {
    0%      {background:linear-gradient(to left, var(--brand-main-color), var(--brand-tertiary-color))}
    50%     {background:linear-gradient(to right, var(--brand-main-color), var(--brand-tertiary-color))}
    100%    {background: var(--brand-main-color)}
}
@keyframes attentionAnimation {
    0%      {transform:scale(1)}
    50%     {transform:scale(0.95)}
    100%    {transform:scale(1)}
}

@keyframes spinningLoaderAnimation    {
    0%      {margin-bottom:0; height:20px}
    50%     {margin-bottom: 70px; height:25px}
    100%    {margin-bottom:0; height:20px}
}

@keyframes  bounceToolbar   {
    0%      {bottom:30px}
    25%     {bottom:60px}
    50%     {bottom:30px}
    75%     {bottom:60px}
    100%    {bottom:30px}
}

@keyframes  animatedIcon    {
    0%      {margin-left:0}
    50%     {margin-left:5px}
    100%    {margin-left:0;}
}

@keyframes plusPulse        {
    0%      {transform:scale(1)}
    50%     {transform: scale(0.95)}
    100%    {transform:scale(1)}
}

.scale-down-on-hover    {
    transform: scale(1);
    transform-origin: center center;
    transition: all 0.2s ease;
    cursor:pointer;
}
.scale-down-on-hover:hover    {
    color: var(--brand-main-color);
    transform: scale(0.985);
}
.attention-animation    {
    animation: attentionAnimation 5s ease infinite;
}

/*------------------------------------------------
6. Kit builder
------------------------------------------------*/
.kit-builder-overlay    {
    top:0 !important;
    width:100% !important;
    height:100% !important;
}
.kit-wrapper    {
    float: initial;
    width:420px;
    height:330px;
    margin:30px auto 0 auto;
}
.kit-wrapper #badge, .kit-wrapper #collar, .kit-wrapper #shirt, .kit-wrapper #sleeves   {
    position: absolute;
}
.kit-wrapper #badge {
    top:70px;
    left:65%;
    width:35px;
    height:35px;
    z-index:1;
}
.kit-wrapper #badge svg, .kit-wrapper #badge svg rect {
    width:35px;
    height:35px;
    display:block;
}
.kit-wrapper #collar {
    width:135px;
    height:25px;
    left: calc(50% - 135px / 2);
    z-index:1;
}
.kit-wrapper #shirt {
    z-index:0;
}
.kit-wrapper #shirt rect {
    height:inherit;
}
.kit-tools-wrapper  {
    overflow:hidden;
}
.kit-tools-wrapper-inner    {

}
.kit-tools-wrapper .kit-tool  {
    width:40px;
    height:40px;
    border:1px solid var(--brand-border-color);
    border-radius:5px;
    margin:0 10px 0 0;
}

/*------------------------------------------------
7. Badge uploader
------------------------------------------------*/
.upload-badge-wrapper, .upload-sponsor-wrapper, .upload-club-photo-wrapper   {
    max-height:200px;
    padding:20px;
    border-radius:10px;
    display: flex;
    justify-content: center;
    background: var(--brand-border-color);
    margin: 0 0 10px 0;
}
.upload-badge-wrapper img, .upload-sponsor-wrapper img, .upload-club-photo-wrapper img  {
    max-height:100px;
    width:auto;
}

/*------------------------------------------------
8. My club
------------------------------------------------*/
.edit-text-button   {
    position: absolute;
    width:20px;
    height:20px;
    background:var(--tools-drawer-background-color);
    float:initial;
    right:-20px;
    border-radius:10px;
}
.search-pop-out {
    
}
.opponent-list-row  {
    cursor:pointer;
}
.opponent-list-row .opponent-badge  {
    width:50px;
    height:50px;
    background-size: cover;
    background-position: center center;
}
.opponent-list-row .opponent-name  {
    width:auto;
}

.formation-content-wrapper {
    display: flex;
    justify-content: center;
}
.formation-content  {
    width: 320px;
    height: 300px;
    background: url(../images/formations-editor-background.svg) no-repeat top center;
    background-size: 320px 300px;
}
.formation-player   {
    position: absolute;
    width:40px;
    height: 40px;
    border-radius:20px;
}
.formation-player-name  {
    position: absolute;
    float:none;
    height:30px;
    border:1px solid #000;
    width:60px;
}
.modal-inner .formation-player  {
    cursor: pointer;
}
.modal-inner .formation-player.editable {
    background:Green;
}
.formation-player .up, .formation-player .down, .formation-player .left, .formation-player .right   {
    width:30px;
    height:30px;
    background:var(--main-theme-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid var(--brand-main-color);
    border-radius:15px;
    cursor:pointer;
}
.formation-player .up   {
    top: -70px;
    left: 5px;
}
.formation-player .down {
    top: -30px;
    left: 5px;
}
.formation-player .left {
    left: -30px;
    top: -100px;
}
.formation-player .right   {
    left: 40px;
    top: -129px;
}
.make-players-editable-message  {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: var(--brand-main-color);
    color: #fff;
    left: 0;
    font-family: 'ca_slalombold';
}

.trophy {
    cursor:pointer;
}

/* .styled-modal   {
    
}
.styled-modal.the-basics {
    background:var(--main-theme-color) url('../images/card-background-the-basics.svg');
} */

/*------------------------------------------------
9. Pages editor
--------------------------------------------------
9.1. Overlay
------------------------------------------------*/
.pages-editor-overlay    {
    width:100%;
    height:100%;
    padding:var(--graphics-editor-navigation-height) 0 calc(var(--graphics-editor-navigation-height) * 2) 0;
    background:var(--brand-grey-color);
    overflow:auto;
    z-index:2;
}
.pages-editor-overlay .navigation    {
    position: fixed;
    background:var(--main-theme-color);
    color:var(--brand-text-color);
    height:var(--graphics-editor-navigation-height);
    z-index:5;
}
@media only screen and (min-width:200px) {
    .pages-editor-overlay .navigation .button    {
        padding: 13px;
        color: var(--brand-text-color);
        top: 7px;
        font-family: 'ca_slalombold';
        font-size: 0.9em;
        border-radius: 5px;
    }
}
@media only screen and (min-width:768px) {
    .pages-editor-overlay .navigation .button    {
        padding: 13px 20px;
        font-size:1em;
    }
}
.pages-editor-overlay .navigation .publish-button {
    background:var(--brand-tertiary-color);
    color:var(--brand-main-color);
    float: right;
    right:10px;
    display: flex;
    align-items: center;
}
.pages-editor-overlay .navigation .publish-button img {
    width:20px;
    height:20px;
}
.pages-editor-overlay .navigation .save-as-a-draft-button {
    float: right;
    right: 10px;
    background: var(--brand-pale-color);
    color: var(--brand-main-color);
    padding: 14px;
    margin: 0 10px 0 0;
}
@media only screen and (min-width:200px) {
    .pages-editor-overlay .navigation .preview-button {
        float: right;
        right: 20px;
        width: 47px;
        height: 47px;
        background: url(../images/icons/preview-icon.svg) no-repeat center center;
        background-size: 20px 20px;
        border: 1px solid var(--brand-pale-color);
    }
}
@media only screen and (min-width:768px) {
    .pages-editor-overlay .navigation .preview-button {
        width: 47px;
        height: 47px;
    }
}
.pages-editor-overlay .navigation .options-button {
    background: url(../images/icons/editor-settings-icon-black.svg) no-repeat center center;
    background-size: 25px 25px;
    height:48px;
}
.pages-editor-overlay .navigation .close-graphics-editor-button {
    background: url(../images/icons/exit-editor-icon-black.svg) no-repeat center center;
    background-size: 20px 20px;
    height:48px;
}
.page-meta  {
    width: 100%;
    border-bottom: 1px solid var(--brand-pale-color);
    padding: 20px;
    margin: 0 0 0px 0;
}
.page-meta span {
    font-family:"ca_slalombold";
    margin:0 0 5px 0;
}
.page-meta input    {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 15px;
    border: 1px solid var(--brand-text-color);
}
.page-status    {
    
}
.page-status-details    {
    margin:0 0 10px 0;
}
.page-status-details span    {
    width:auto;
    font-family:'ca_slalomregular';
}
.page-status-details span:first-child   {
    padding:0 5px 0 0;
}
.page-options   {
    width:50%;
}
.page-options-popout    {
    position:absolute;
    top:var(--graphics-editor-navigation-height);
    float:initial;
    right:20px;
    width:180px;
    background: var(--main-theme-color);
    border:1px solid var(--brand-border-color);
    border-radius: 3px;
    z-index:5;
}
.page-options-button    {
    width:40px;
    height:40px !important;
    border:1px solid var(--brand-border-color);
    border-radius:3px;
    float:right;
    background: url('../images/icons/editor-options-icon-black.svg') no-repeat center center;
    background-size: 15px 15px;
    height: 48px;
}
.visibility-status.draft    {
    background: var(--brand-pale-color);
    padding: 5px 10px !important;
    border-radius: 2px;
    color: var(--brand-main-color);
    font-family:'ca_slalombold'; 
}
.visibility-status.draft::before    {
    content: "";
    width: 10px;
    height: 10px;
    background:var(--brand-main-color);
    display: inline-block;
    position: relative;
    margin: 0 5px 0 0;
    border-radius: 5px;
}
.visibility-status.published    {
    background: var(--brand-tertiary-color);
    padding: 5px 10px !important;
    border-radius: 2px;
    color: var(--brand-main-color);
    font-family:'ca_slalombold';
}
.visibility-status.published::before    {
    content: "";
    width: 10px;
    height: 10px;
    background:var(--brand-main-color);
    display: inline-block;
    position: relative;
    margin: 0 5px 0 0;
    border-radius: 5px;
}
.meta-input-wrapper {
    width:100%
}
.copy-link-button, .delete-page-button, .set-as-home-page-button, .view-page-button  {
    width: 100%;
    padding: 10px 0;
    margin: 0 0 5px 0;
    border: 1px solid var(--brand-pale-color);
    border-radius: 3px;
    font-family: 'ca_slalombold';
    display: flex;
    justify-content: center;
    align-items: center;
}
.copy-link-button img, .delete-page-button img, .set-as-home-page-button img, .view-page-button img {
    width:15px;
    height:15px;
    margin:0 5px 0 0;
}
.copy-link-button span, .delete-page-button span, .set-as-home-page-button span, .view-page-button span {
    width:auto;
    height:19px;
    margin:0;
}

.page-option    {
    width: 100%;
    border-bottom: 1px solid var(--brand-pale-color);
    padding: 15px;
    margin: 0 0 0px 0;
}
.page-option span   {
    font-family:"ca_slalombold";
    margin:0 0 5px 0;
}
.page-option .page-option-buttons {

}
.page-option .page-option-buttons span {
    width: 50%;
    border: 1px solid var(--brand-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 0.9em;
    font-family: 'ca_slalomregular';
}
@media only screen and (min-width:200px) {
    .page-wrapper   {
        font-size: 11px;
    }
}
@media only screen and (min-width:768px) {
    .page-wrapper   {
        margin:0 0 100px 0;
        font-size: 13px;
    }
}

/*------------------------------------------------
9.2. Tools
------------------------------------------------*/
.pages-editor-overlay .open-tools-button {
    position: fixed;
    top: initial;
    bottom: 20px;
    left: 20px;
    float: initial;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: var(--brand-main-color) url(../images/icons/open-tools-button-icon.svg) no-repeat;
    background-size: 15px 15px;
    background-position: center center;
    animation: bobber 5s ease infinite;
    z-index: 103;
}
.pages-editor-overlay .tools-drawer   {
    position: fixed;
    top:100%;
    width:100%;
    height:100%;
    background:var(--tools-drawer-background-color);
    border-radius:20px 20px 0 0;
    overflow: auto;
    z-index:101;
}

/*------------------------------------------------
9.3. Page
--------------------------------------------------
9.3.1. Page elements
------------------------------------------------*/
.page-row  {
    min-height:50px;
    /* background:var(--brand-grey-color); */
    border: 1px solid var(--brand-main-color);
    z-index:1;
}
/* .page-row::before   {
    content:"Row";
    width:auto;
    padding:5px;
    background:var(--brand-main-color);
    color:#fff;
} */
.page-row.active-row  {
    border: 2px solid var(--brand-tertiary-color);
}
.page-element   {
    border:1px dotted var(--brand-main-color);
}
.row-tools-wrapper  {
    position: fixed;
    top:initial;
    bottom:calc(var(--graphics-editor-navigation-height) * 1.5);
    left:20px;
    width: 100%;
    max-width:190px;
    height:auto;
    background:var(--main-theme-color);
    border:1px solid var(--brand-main-color);
    border-radius:10px;
    padding:10px;
    overflow: auto;
    z-index: 5;
}
.row-tool, .row-tool.delete-button  {
    width:100%;
    height:50px !important;
    background:var(--main-theme-color);
    border-radius:5px 60px 60px 5px;
    display: flex;
    justify-content: left;
    align-items: center;
    font-family:'ca_slalombold';
    background-size: 20px 20px !important;
    background-repeat: no-repeat !important;
    background-position: 10px 15px !important;
    padding:0 0 0 40px;
    cursor:pointer;
}

.row-tool.text-button  {
    background:url('../images/icons/pages-tool-text-icon.svg');
}
.row-tool.image-button  {
    background:url('../images/icons/pages-tool-image-icon.png');
}
.row-tool.button-button  {
    background:url('../images/icons/pages-tool-button-icon.png');
}
.row-tool.spacer-button  {
    background:url('../images/icons/pages-tool-spacer-icon.svg');
}
.row-tool.module-button  {
    background:url('../images/icons/pages-tool-modules-icon.png');
}
.row-tool.video-button  {
    background:url('../images/icons/pages-tool-video-icon.png');
}
.row-tool.component-button  {
    background:url('../images/icons/pages-tool-component-icon.png');
}
.row-tool.shape-button  {
    background:url('../images/icons/pages-tool-shape-icon.svg');
}
.row-tool.gradient-button  {
    background:url('../images/icons/pages-tool-gradient-icon.png');
}
.row-tool.graphics-button  {
    background:url('../images/icons/pages-tool-graphics-icon.svg');
}
.row-tool.columns-button  {
    background:url('../images/icons/pages-tool-columns-icon.png');
}

.show-row-options-button {
    position: absolute;
    top:0;
    left:0;
    background: var(--brand-main-color);
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
    width: auto;
    padding: 6px 8px;
    z-index: 3;
    display:flex;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
}
.show-row-options-button.expanded {
    height:40px;
}
.show-row-options-button.expanded img {
    transform:rotate(-90deg);
}
.show-row-options-button span   {
    width:auto;
    font-size:11px;
}
.show-row-options-button img    {
    width: 10px;
    height: auto;
    margin: 0 0 0 5px;
}
.row-options-wrapper  {
    position: absolute;
    left: 45px;
    width: auto;
    height: 40px;
    background: var(--main-theme-color);
    z-index: 2;
    border: 1px solid var(--brand-main-color);
}
.row-option, .row-option.delete-button  {
    height:40px !important;
    width:40px !important;
    background:var(--main-theme-color);
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 20px 20px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius:0 5px 5px 0;
    cursor:pointer;
}
.row-option.style-button  {
    background:url('../images/icons/pages-tool-style-icon.png');
}
.row-option.row-add-columns-button  {
    background: url("../images/icons/pages-tool-columns.png");
}
.row-option.row-padding-button  {
    background: url("../images/icons/styling-drawer-icons-padding.svg");
}
.row-option.row-background-color-button {
    background: url("../images/icons/styling-drawer-icons-fill-colour.svg");
}
.row-option.row-background-image-button {
    background: url("../images/icons/pages-tool-image-icon.png");
}
.row-option.row-background-position-button {
    background: url("../images/icons/styling-drawer-icons-shift.svg");
}
.row-option.up-button  {
    background:url('../images/icons/pages-tool-up-icon.png');
}
.row-option.down-button  {
    background:url('../images/icons/pages-tool-down-icon.png');
}
.row-option.delete-button  {
    background:url('../images/icons/delete-icon-red.svg');
}

.active-page-element    {
    border:2px solid limegreen;
}
/* .active-page-element::before    {
    line-height: 1em;
    content: "Selected";
    font-family:"ca_slalomregular" !important;
    letter-spacing:0px !important;
    line-height:1em !important;
    position: absolute;
    top: 0;
    right: 0;
    background: limegreen;
    color: #fff;
    font-weight: bold;
    font-size: 10px;
    width: auto;
    padding: 7px 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: auto;
} */
.editable-page-element  {
    height:100%;
    min-height:50px;
    cursor:pointer;
}
.editable-page-element span {
    font-size:inherit !important;
}
.element-tools-wrapper  {
    position: absolute;
    float: initial;
    top: 0;
    right: 0;
    width: 70px;
    height: 35px;
    background: limegreen;
    z-index: 2;
}
.element-tools-wrapper .button   {
    width:35px;
    height:35px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.element-tools-wrapper .button img   {
    width:20px;
    height:20px;
}

.row-styling-drawer {
    position:absolute;
    top:var(--graphics-editor-navigation-height);
    max-width:280px;
    background:var(--main-theme-color);
    font-size:11px;
    border-radius:10px;
    padding:20px;
    z-index:4;
}
.row-styling-drawer input   {
    border:1px solid var(--brand-main-color);
}
.row-styling-drawer .linear-button  {
    padding:10px;
    margin:10px 0 0 0;
}
.row-styling-drawer .style-button {
    width: 50%;
    display: inline-block;
    padding: 10px;
    text-align: center;
    border: 1px solid var(--brand-border-color);
}
.uploaded-background-wrapper    {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    background:var(--brand-pale-color);
}
.uploaded-background-wrapper img, .upload-image-wrapper img    {
    width:auto;
    max-height:100px;
    border-radius:3px;
}
.upload-image-wrapper   {
    padding:20px;
    background:var(--brand-pale-color);
    border-radius:10px;
    margin:0 0 20px 0;
    text-align: center;
}
.upload-image-wrapper img   {
    clear:both;
    margin:0 0 20px 0;
    float: initial;
    border-radius:5px;
}
.row-mask   {
    position: absolute;
    left:0;
    height:100%;
    background:rgba(0, 0, 0, 0.3);
    z-index:3;
}

.padding-wrapper    {
    width:24%;
    margin:0 1.333% 0 0;
}
.padding-wrapper:last-child    {
    margin:0;
}
.insert-button-wrapper  {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:10px;
}
.insert-button  {
    width:40px;
    height:40px;
    background: var(--brand-main-color) url("../images/icons/open-tools-button-icon.svg") no-repeat center center;
    background-size:15px 15px;
    border-radius:5px;
}

.insert-content-popout-wrapper  {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}
.insert-content-popout  {
    background:var(--main-theme-color);
    height:40px;
    width:auto;
    border:1px solid var(--brand-main-color);
    border-radius:5px;
}
.inline-insert-content-button   {
    width:40px;
    height:40px;
    background-position: center center !important;
    background-size:20px 20px !important;
    background-repeat:no-repeat !important;
}
.insert-text-button {
    background:url("../images/icons/pages-tool-text-icon.svg");
}
.insert-image-button {
    background:url("../images/icons/pages-tool-image-icon.png");
}
.insert-button-button {
    background:url("../images/icons/pages-tool-button-icon.png");
}
.insert-spacer-button {
    background:url("../images/icons/pages-tool-spacer-icon.svg");
}
.insert-module-button {
    background:url("../images/icons/pages-tool-modules-icon.png");
}
.insert-video-button {
    background:url("../images/icons/pages-tool-video-icon.png");
}
.insert-component-button {
    background:url("../images/icons/pages-tool-component-icon.png");
}
.insert-graphics-button {
    background:url("../images/icons/pages-tool-graphics-icon.svg");
}

.colour-button  {
    width:30px;
    height:30px;
    border-radius:20px;
    border:1px solid var(--brand-pale-color);
    margin:0 5px 0 0;
}
.no-colour-button   {
    background:url('../images/icons/no-colour-icon.svg') no-repeat center center;
    background-size:30px 30px;
}
.home-colours-list, .away-colours-list, .custom-colours-list    {
    /* width: 100%;
    padding: 10px 0; */
}
.home-colours-list {
    padding:0 0 10px 0;
}


/*------------------------------------------------
9.3.2. Text elements
------------------------------------------------*/
.text-page-element  {
    z-index:2;
}
.canvas .editable-text  {
    /* background:url('../images/icons/editable-text-background.svg') repeat;
    background-size:10px 10px; */
}
.offscreen-canvas .editable-text    {

}

/*------------------------------------------------
9.3.3. Image elements
------------------------------------------------*/
.image-page-element  {
    z-index:0;
}
.image-page-element img  {
    width:100%;
    height:auto;
}
@media only screen and (min-width:200px)    {
    .add-a-new-image-wrapper, .choose-from-media-library-wrapper    {
        padding:20px;
        margin:0 0 20px 0;
        border-radius:10px;
    }
    .add-a-new-image-wrapper    {
        background:var(--brand-pale-color);
    }
    .choose-from-media-library-wrapper  {
        background:#F5F1FF;
    }
    .add-a-new-image-wrapper img, .choose-from-media-library-wrapper img    {
        width: auto;
        height: 120px;
        max-height: 120px;
        margin: 0 auto;
        display: table;
        float: initial;
        padding: 0 0 20px 0;
    }
}
@media only screen and (min-width:768px)    {
    .add-a-new-image-wrapper, .choose-from-media-library-wrapper    {
        padding:0;
        margin:0;
    }
    .add-a-new-image-wrapper    {
        padding:20px;
        border-radius:10px 0 0 10px;
    }
    .choose-from-media-library-wrapper  {
        padding:20px;
        border-radius:0 10px 10px 0;
    }
    .add-a-new-image-wrapper img, .choose-from-media-library-wrapper img    {
        height:150px;
    }
}

/*------------------------------------------------
9.3.4. Gradient elements
------------------------------------------------*/
.gradient-page-element  {
    position: absolute;
    height: 100%;
    z-index:1;
}

/*------------------------------------------------
9.3.5. Button elements
------------------------------------------------*/
.target-option  {
    padding:10px;
    border:1px solid var(--brand-border-color);
}

/*------------------------------------------------
9.3.6. Columns
------------------------------------------------*/
.row-column {
    height:100%;
    min-height:200px;
    border: 1px solid var(--canvas-border-color);
}
@media only screen and (min-width:200px)    {
    .column-half    {
        width:100%;
        height:100%;
    }
    .column-third   {
        width:100%;
        height:100%;
    }
}
@media only screen and (min-width:768px)    {
    .column-half    {
        width:50%;
        height:100%;
    }
    .column-third   {
        width:33.333333%;
        height:100%;
    }
}
.page-row .column-third:nth-child(2) {
    border-left: 1px solid var(--canvas-border-color);
    border-right: 1px solid var(--canvas-border-color);
}
.column-quarter {
    width:25%;
    height:100%;
}
.column-size-button {
    width:33.333%;
    text-align: center;
    padding:0 40px;
}
.column-size-button img {
    width:100%;
}
.column-size-button span    {
    width:100%;
    display:block;
    margin:10px 0 10px 0;
}

/*------------------------------------------------
9.3.7. Component elements
------------------------------------------------*/
.component-overlay-message  {
    position: absolute;
    color:#fff;
    height: 100%;
    z-index: 2;
    padding: 5% 10%;
    font-size: 12px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.component-overlay-message-inner    {
    height: auto;
    background: rgba(0, 0, 0, 0.8);
    border:1px solid #000;
    padding: 20px;
    border-radius: 5px;
}
.component-overlay-message-inner .button    {
    width:100%;
    text-decoration: underline;
}
.component-overlay-message-inner .button:first-child    {
    margin:5px 0 0 0;
}
.component-overlay-message-inner .make-static-button    {
    background: var(--brand-main-color);
    margin:10px 0 0 0;
    padding:5px;
    text-align: center;
    font-family: 'ca_slalombold';
    text-decoration:none;
}

@media only screen and (min-width:200px)   {
    .squad-component .squad-card .squad-name    {
        font-size: 13px;
    }
    .squad-component .squad-card .squad-position, .squad-component .squad-card .squad-number    {
        font-size: 11px;
    }
}
@media only screen and (min-width:768px)   {
    .squad-component .squad-card .squad-name    {
        font-size:1.1em;
    }
    .squad-component .squad-card .squad-position, .squad-component .squad-card .squad-number    {
        font-size: 0.9em;
    }
}

@media only screen and (min-width:200px)    {
    .match-wrapper  {
        margin:0 0 10px 0;
    }
    .match-wrapper .info {
        font-size:1em;
        display: flex;
        justify-content: center;
        align-items: center;
        padding:10px;
    }
    .match-wrapper .teams-and-score {
        font-size:1.2em;
    }
    .match-wrapper .teams-and-score span:first-child, .match-wrapper .teams-and-score span:nth-child(4) {
        width:40%;
        height:30px;
        display: flex;
        align-items: center;
        /* font-family:"ca_slalombold"; */
    }
    .match-wrapper .teams-and-score span:first-child    {
        padding:0 20px 0 0;
    }
    .match-wrapper .teams-and-score span:nth-child(4) {
        padding:0 0 0 20px;
    }
    .match-wrapper .teams-and-score span:nth-child(2), .match-wrapper .teams-and-score span:nth-child(3) {
        width:10%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight:bold;
        /* font-family:"ca_slalombold"; */
        height:30px;
        background:var(--brand-yellow);
    }
    .match-wrapper .teams-and-score span:nth-child(2)   {
        border-right:1px solid var(--main-theme-color);
    }
}
@media only screen and (min-width:768px)    {
    .match-wrapper  {
        margin:0 0 20px 0;
    }
    .match-wrapper .info {
        font-size:1em;
        padding:20px;
    }
    .match-wrapper .teams-and-score {
        font-size:1.3em;
    }
    .match-wrapper .teams-and-score {
        font-size:1.3em;
    }
    .match-wrapper .teams-and-score span:first-child, .match-wrapper .teams-and-score span:nth-child(4) {
        width:45%;
        height:40px;
    }
    .match-wrapper .teams-and-score span:nth-child(2), .match-wrapper .teams-and-score span:nth-child(3) {
        width:5%;
        height:40px;
    }
}
.match-wrapper .teams-and-score span:first-child    {
    justify-content: right;
}
.match-wrapper .teams-and-score span:nth-child(4)   {
    justify-content: left;
}

@media only screen and (min-width:200px)    {
    .starting-11-component  {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .starting-11-component .editable-page-element  {
        width:auto;
    }
    .starting-11-component .player  {
        display: flex;
        justify-content: left;
        align-items: center;
    }
    .starting-11-component .details {
        width:calc(100% - 80px);
    }
    .starting-11-component .player .number, .starting-11-component .player .name {
        width:auto;
        height: auto;
        display:flex;
        justify-content: center;
        align-items: center;
    }
    .player .number  {
        padding:0;
    }
    .starting-11-component .player .image  {
        width:80px;
        height:80px;
        background-size:cover;
        background-position:center center;
    }
    .starting-11-component .player  {
        font-size:1.2em;
        font-family:inherit;
        margin:0 0 10px 0;
    }
    .starting-11-component .player .number  {
        font-weight:bold;
        text-align: right;
        min-width:40px;
    }
    .starting-11-component .player .number sup  {
        font-size:0.7em;
        font-style: italic;
    }
    .starting-11-component .player .name    {
        padding:0 0 0 10px;
    }
}
@media only screen and (min-width:768px)    {
    .starting-11-component .editable-page-element  {
        width:auto;
        max-width: 600px;
    }
    .starting-11-component .player .number, .starting-11-component .player .name {
        min-height: 40px;
    }
    .starting-11-component .player .image  {
        width:80px;
        height:100%;
        background-size:cover;
        background-position:center center;
    }
    .starting-11-component .player  {
        font-size:1.2em;
    }
    .starting-11-component .player .number  {
        
    }
}

.formation-component    {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sponsors-component .editable-page-element {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sponsors-component img {
    /* max-width:100px; */
    padding:10px;
}

@media only screen and (min-width:200px)    {
    .player-focus-component .player-stat {
        font-size:1em;
        line-height:44px;
        padding: 5px 0;
        width: 19%;
        border-radius: 3px;
        margin: 0 1% 1% 0;
        padding:10px 10px 20px 10px;
        border:1px solid var(--brand-border-color);
    }
    .player-focus-component .player-stat:nth-child(8n) {
        margin:0 0 1.11% 0;
    }
    .player-focus-component .player-stat span {
        width:100%;
        text-transform: capitalize;
        text-align: center;
        font-style: italic;
    }
    .player-focus-component .player-stat span:first-child {
        font-size:0.7em;
        margin:0 0 10px 0;
    }
    .player-focus-component .player-stat span:nth-child(2) {
        font-size:1em;
        font-weight: bold;
    }
    .player-focus-component .player-focus-photo {
        width:100%;
        height:250px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    .player-focus-component .player-focus-photo img {
        height:250px;
        width:auto;
    }
    .player-focus-component .player-focus-stats {
        width:100%;
        padding:20px;
    }
    .player-focus-component .player-focus-name  {
        width:100%;
        background:none;
        border:none;
        box-shadow:none;
        font-size:1.5em;
        font-weight:bold;
        margin:0 0 10px 0;
        padding:0;
        display: block;
    }
    .player-focus-component .player-focus-number, .player-focus-component .player-focus-position  {
        border:none;
        box-shadow:none;
        font-size:1.5em;
        font-weight:bold;
        width:50%;
        margin:0;
        padding:0;
        display:block;
    }
}
@media only screen and (min-width:768px)    {
    .player-focus-component .editable-page-element  {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .player-focus-component .player-stat {
        font-size: 1em;
    }
    .player-focus-component .player-stat span {
        width:100%;
        text-transform: capitalize;
    }
    .player-focus-component .player-stat span:first-child {
        font-size:0.7em;
    }
    .player-focus-component .player-stat span:nth-child(2) {
        font-size:1.2em;
        font-weight: bold;
    }
    .player-focus-component .player-focus-photo {
        width:50%;
        height:400px;
    }
    .player-focus-component .player-focus-photo img {
        height:400px;
        width:auto;
    }
    .player-focus-component .player-focus-stats {
        width:50%;
    }
    .player-focus-component .player-focus-name  {
        font-size:2em !important;
    }
    .player-focus-component .player-focus-number, .player-focus-component .player-focus-position  {
        font-size:1.6em !important;
    }
}

.latest-news-component .news-post   {
    width:32%;
    height:300px;
    background:#fff;
    border:1px solid var(--brand-border-color);
    border-radius:10px;
    margin:0 2% 0 0;
}
.latest-news-component .news-post:nth-child(4), .latest-news-component .news-post:nth-child(5)   {
    margin:0 0 0 0;
}
.latest-news-component .news-post .thumbnail    {
    height:150px;
    background: var(--brand-border-color);
    border-radius:10px 10px 0 0;
}
.latest-news-component .news-post .headline  {
    padding:0 20px;
    /* font-family: 'ca_slalombold'; */
}

.element-banner {
    position: absolute;
    height:50px;
    background: var(--brand-main-color);
    color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family:'ca_slalombold';
    font-size:11px;
    z-index:1;
}

/*------------------------------------------------
9.3.8. Spacer elements
------------------------------------------------*/
.spacer-page-element    {
    background:url('../images/spacer-background.svg') repeat;
    background-size:5px 5px;
}

/*------------------------------------------------
9.4. Options
------------------------------------------------*/
@media only screen and (min-width:200px) {
    .page-editor-options    {
        position: fixed;
        top: calc(var(--graphics-editor-navigation-height) + 10px);
        left:20px;
        width: 100%;
        max-width:280px;
        height: calc(100% - 80px);
        border-radius: 5px;
        padding: 40px 0 0;
        background: var(--options-drawer-background-color);
        border:1px solid var(--brand-pale-color);
        font-size:0.95em;
        overflow: auto;
        z-index: 104;
    }
    .fixed-menu-header  {
        position: fixed;
        width: 280px;
        top: 70px;
        left:20px;
        padding: 15px 20px;
        border-radius: 5px 5px 0 0;
        background: var(--main-theme-color);
        border:1px solid var(--brand-pale-color);
        z-index: 2;
    }
    .fixed-menu-header .modal-title {
        margin:0;
    }
    .fixed-menu-header .fixed-close-drawer-button   {
        top:10px;
    }
}
@media only screen and (min-width:768px) {
    .page-editor-options    {
        top: calc(var(--graphics-editor-navigation-height) + 10px);
        width: 300px;
        max-width:300px;
        left: 20px;
        height: calc(100% - 80px);
    }
    .fixed-menu-header  {
        width: 300px;
        top: 70px;
        left: 20px;
        padding: 10px 20px;
    }
    .fixed-menu-header .fixed-close-drawer-button   {
        top:5px;
    }
}

/*------------------------------------------------
9.5. Root URL
------------------------------------------------*/
.root-url-wrapper   {
    padding:0 20px;
    margin:0 0 20px 0;
}
.root-url-wrapper-inner {
    padding:15px;
    border:1px solid var(--brand-pale-color);
    border-radius: 5px;
}
.root-url-wrapper .swipe-panel-title    {
    padding:initial;
}
.root-url-wrapper p {
    margin:0 0 10px 0;
}
.root-url-wrapper input {
    margin: 0 0 10px 0;
    padding: 15px;
    border: 1px solid var(--brand-text-color);
}
.confirm-root-url-wrapper   {
    background:var(--brand-pale-color);
    font-family:'ca_slalombold';
    border:1px solid var(--brand-border-color);
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:10px 0;
    margin: 0 0 10px 0;
}
.root-url-wrapper-inner.success   {
    height:50px;
    border: 1px solid green;
    background: lightgreen;
    overflow: hidden;
}
.root-url-wrapper-inner.error {
    background:red;
}
.root-url-wrapper-inner .expand-button  {
    position: absolute;
    top: 6px;
    right: 9px;
    float: initial;
    width: auto;
    padding: 8px 10px;
    border: 1px solid green;
    font-family: 'ca_slalombold';
    background: green;
    color: #fff;
    border-radius: 5px;
    font-size: 0.9em;
}


/*------------------------------------------------
9.6. Notifications
------------------------------------------------*/
.notification-wrapper   {
    position: fixed;
    top:calc(var(--graphics-editor-navigation-height) + 20px);
    float: initial;
    right:20px;
    width:auto;
    padding:10px;
    border:1px solid var(--brand-border-color);
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family:'ca_slalombold';
    z-index:105;
}
.notification-wrapper img {
    width:20px;
    height:20px;
    margin:0 10px 0 0;
}
.notification-wrapper span  {
    width:auto;
}
.notification-wrapper.success  {
    background:var(--no-error-color);
    color:#fff;
}
.notification-wrapper.added-to-favourites   {
    background:var(--main-theme-color);
}
.page-published-information-wrapper {
    position: fixed;
    top:calc(var(--graphics-editor-navigation-height) + 20px);
    float: initial;
    right:20px;
    width:280px;
    border:1px solid var(--brand-pale-color);
    border-radius:5px;
    z-index: 10;
    background: var(--main-theme-color);
    padding: 20px;
    transform-origin: bottom center;
}
.page-published-information-wrapper .button {
    margin:10px 0 0 0;
}
.page-published-information-wrapper .close-menu-button  {
    top:0;
}

/*------------------------------------------------
9.7. Menus
------------------------------------------------*/
.menu-pages-search .search-result-title   {
    margin:0 0 10px 0;
    padding:0;
}
.menu-pages-search .instant-search-result   {
    border: 1px solid var(--brand-border-color);
    border-left: 3px solid var(--brand-main-color);
    padding: 10px;
    border-radius: 3px;
    font-family: 'ca_slalombold';
}
.menu-pages-list    {
    max-height:200px;
}
.menu-pages-list ul {
    margin:0 0 50px 0;
}
.menu-pages-list li   {
    display:block;
    width:100%;
    padding:10px;
    border-bottom:1px solid var(--brand-pale-color);
}
.menu-pages-list li a   {
    text-decoration: none;
    color:var(--brand-text-color);
    font-family:'ca_slalombold';
}
.menu-pages-list li .delete-button   {
    position: absolute;
    right: 0;
    float: initial;
    top: 6px;
    height: 25px !important;
    width: 25px !important;
    background: url('../images/icons/close-drawer-icon.svg') no-repeat center center;
    background-size: 15px 15px;
}
.menu-pages-list li .move-button   {
    position: absolute;
    float: initial;
    right: 0;
    top: 6px;
    height: 25px !important;
    width: 25px !important;
    background-size: 15px 15px;
    border-bottom:none;
}
.menu-pages-list .move-button.move-down-button  {
    background: url('../images/icons/element-tools-icons-down-purple.svg') no-repeat center center;
    left:initial;
    right:30px;
}
.menu-pages-list .move-button.move-up-button  {
    background: url('../images/icons/element-tools-icons-up-purple.svg') no-repeat center center;
    left: initial;
    right:60px;
}
@media only screen and (min-width:200px)    {
    .menu-list-row  {
        border-bottom: 1px solid var(--brand-border-color);
        font-family: "ca_slalombold";
        cursor: pointer;
        font-size: 1em;
        padding: 20px 0;
    }
    .menu-list-row span {
        height:100%;
        padding:0;
    }
    .menu-list-row .list-item-options-button    {
        top:13px;
    }
    .menu-list-row span::before  {
        content: '';
        width: 15px;
        height: 15px;
        background: url(../images/icons/menu-list-icon.svg) no-repeat center center;
        background-size: 15px 15px;
        display: inline-block;
        margin: 0 10px 0 0;
    }
}
@media only screen and (min-width:768px)    {
    .menu-list-row  {
        font-size: 1.2em;
    }
}

.menu .tier {
    width: auto;
    padding: 3px 7px;
    border: 1px solid var(--brand-text-color);
    border-radius: 3px;
    text-transform: capitalize;
    font-family: 'ca_slalombold';
    font-size: 0.9em;
}
.menu .tier.plus::before    {
    content: '';
    display: inline-block;
    background: gold;
    width: 8px;
    height: 8px;
    margin: 0px 4px 0 0;
    border-radius: 5px;
}

/*------------------------------------------------
10. Loaders
------------------------------------------------*/
.start-up-loader    {
    position: fixed;
    height:100%;
    background: var(--main-theme-color);
    z-index:100;
}
.overlay-loader {
    position: absolute;
    height:100%;
    background:var(--main-theme-color);
    z-index:4;

    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;
}
.overlay-loader .spinning-loader    {
    margin:0% 0 0 0;
}

/*------------------------------------------------
11. Media library
------------------------------------------------*/
.media-library-overlay  {
    position: fixed;
    width:100%;
    height:100%;
    overflow:hidden;
    background:var(--main-theme-color);
    z-index:200;
}
.media-library-top-nav  {
    height:70px;
    background:var(--main-theme-color);
    z-index:1;
}
.media-library-list {
    z-index:0;
    overflow:auto;
    height:auto;
}
.media-library-list-reduced    {
    width:75%;
}
@media only screen and (min-width:200px)    {
    .media-library-thumbnail    {
        border-radius:5px;
        background: var(--brand-border-color);
        border:1px solid var(--brand-pale-color);
        width:18%;
        margin:0 2.5% 2% 0;
        height:100px;
        display: flex;
        justify-content: center;
        cursor:pointer;
        overflow:hidden;
    }
}
@media only screen and (min-width:768px)    {
    .media-library-thumbnail    {
        height:150px;
    }
}
.media-library-thumbnail:nth-child(5n)   {
    margin:0 0 2% 0;
}
.media-library-thumbnail img    {
    height: 100%;
    width:auto;
}
@media only screen and (max-width:768px) {
    .media-library-thumbnail  {
        height:70px;
    }
}
.media-library-image-panel  {
    padding: 30px 30px 30px 30px;
    width:25%;
    background: var(--main-theme-color);
    height:100%;
}
.media-library-image-panel img {
    border-radius: 5px;
}
.image-details  {
    padding:0 0 20px 0;
}

/*------------------------------------------------
12. Components
--------------------------------------------------
12.1. Search header & brand header
------------------------------------------------*/
@media only screen and (min-width:200px)   {
    .hero-banner    {
        margin:0 0 20px 0;
        border-bottom: 1px solid var(--brand-border-color);
        color:#fff;
    }
    .hero-banner > div  {
        background: url('../images/upgrade-banner-background.jpg') no-repeat top center;
        background-size: cover;
        display: block;
        padding: 25px 20px;
    }
    .hero-banner > div h1   {
        margin-block-start: 0;
        margin-block-end:0;
        padding:0;
        margin:0 0 10px 0;
        font-size:1.1em;
        line-height: 1.4em;
        font-family: 'ca_slalombold';
        letter-spacing:0;
    }
    .hero-banner div p  {
        font-size:0.9em;
        line-height:1.4em;
        margin:0 0 15px 0;
    }
    .hero-banner span.coupon-code   {
        font-style: oblique;
        display: flex;
        width: auto;
        justify-content: center;
        align-items: center;
        margin: 0 0 20px 0;
        background: var(--brand-tertiary-color);
        color: #000;
        line-height: normal;
        padding: 10px;
        font-family: 'ca_slalombold';
        border-radius: 3px;
        border-left: 5px solid var(--brand-main-color);
    }
    .hero-banner div .button-wrapper    {
        border: 2px solid var(--brand-main-color);
        width: auto;
        padding: 2px;
        border-radius: 100px;
    }
    .hero-banner div .button {
        background: var(--brand-main-color);
        color:var(--main-theme-color);
        padding: 10px 17px;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1em;
    }
    .hero-banner div .button img    {
        width:15px;
        height:15px;
        margin:0 10px 0 0;
    }
    .brand-header   {
        height: 60px;
        padding: 15px;
        background: var(--main-theme-color);
        border-bottom: 1px solid var(--brand-pale-color);
    }
    .brand-header .brand-logo   {
        width:60%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin:3px 0 0 0;
    }
    .brand-header .brand-logo img   {
        height: 17px;
        width: auto;
        margin: 4px 0 0 0;
    }
    .brand-header .brand-club-badge {
        width:20%;
        display: flex;
        justify-content: right;
        align-items: center;
    }
    .brand-header .brand-club-badge img {
        width:auto;
        height:30px;
    }
    .open-menu-button    {
        width: 20%;
        height: 30px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    .open-menu-button img    {
        width:20px;
        height:auto;
    }
    .search-header  {
        left:0px;
        padding:25px 20px 15px 20px;
        width: 100%;
    }
    .search-header h1   {
        font-size: 1.7em;
        color: #fff;
        font-family: 'ca_slalombold';
        letter-spacing: 0;
        margin: 10px 0;
        text-align: center;
    }
    .search-header p {
        color: #fff;
        text-align: center;
        margin: 0 0 20px 0;
        font-size: 1em;
        opacity: 0.7;
    }
    .search-header input    {
        height: 60px;
        border-radius: 5px;
        width: 100%;
        padding: 12px 15px 10px 15px;
        color: var(--brand-text-color);
        border: 1px solid var(--brand-main-color);
        font-size: 1em;
    }
    .search-header input:focus  {
        color: var(--brand-text-color);
    }
    .search-icon    {
        top: 188px;
        right: 130px;
    }

    .search-header .clear-search-results    {
        height: 40px;
        width: 40px;
        position: absolute;
        z-index: 2;
        background: #fff url(../images/icons/close-drawer-icon.svg) no-repeat center center;
        background-size: 15px 15px;
        top: 35px;
        left: initial;
        right: 30px;
        float: none;
        border-radius: 25px;
    }
    .search-header .search-suggestions  {
        display: none;
        justify-content: center;
        align-items: center;
        padding: 20px 0 0px 0;
    }
    .search-header .search-suggestions p    {
        width:auto;
        margin:0 10px 0 0;
        font-size:0.8em;
    }
    .search-header .search-suggestions span {
        width: auto;
        margin: 0 5px 0 0;
        padding: 6px 12px;
        border-radius: 20px;
        color: var(--brand-pale-color);
        cursor: pointer;
        background: #4D21AD;
        font-size:0.8em;
    }
    .search-icon    {
        position: absolute;
        top: 125px;
        right: 60px;
        float: initial;
        width: 40px;
        height: 40px;
        z-index: 1;
    }
    .desktop-menu .brand-logo   {
        width: 120px;
        margin: 7px 0 0 0;
    }
}
@media only screen and (min-width:440px)    {
    .search-header h1   {
        font-size: 1.7em;
        margin: 15px 0;
    }
}
@media only screen and (min-width:768px)   {
    .hero-banner .six-columns   {
        width:100%;
    }
    .hero-banner > div  {
        padding:40px;
        background: url('../images/upgrade-banner-background.jpg') no-repeat top center;
        background-size:cover;
    }
    .hero-banner > div h1   {
        margin-block-start: 0;
        margin-block-end:0;
        padding:0;
        margin:0 0 10px 0;
        font-size:1.2em;
        line-height: 1.4em;
    }
    .hero-banner div p  {
        font-size:1em;
        line-height:1.4em;
        margin:0 0 15px 0;
    }
    .brand-header   {
        height:50px;
        padding: 10px 20px;
        display:none;
    }
    .desktop-menu .brand-club-badge {
        width: 30px;
        display: flex;
        justify-content: right;
        align-items: center;
        float: right;
        right: 20px;
    }
    .desktop-menu .brand-club-badge img {
        width:auto;
        height:30px;
    }
    .open-menu-button    {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        float: right;
    }
    .open-menu-button img    {
        width:20px;
        height:auto;
    }
    .search-header  {
        left:0px;
        padding: 40px 30px 20px 30px;
        width: 100%;
    }
    .search-header .clear-search-results    {
        height: 40px;
        width: 40px;
        top: 50px;
        right: 40px;
        border-radius: 30px;
    }
    .search-header h1   {
        font-size: 2.6em;
        color: #fff;
        font-family: 'ca_slalombold';
        letter-spacing: 0;
        margin: 30px 0;
        text-align: center;
    }
    .search-header p {
        color: #fff;
        text-align: center;
        margin: 0 0 30px 0;
        font-size: 1.3em;
        opacity: 0.7;
    }
    .search-header input    {
        height: 60px;
        border-radius: 5px;
        width: 100%;
        padding: 30px 80px 27px 30px;
        background-size: 70px 22px;
        font-size: 1.3em;
    }
    .search-header input:focus  {
        color: var(--brand-text-color);
    }
    .search-icon    {
        top: 188px;
        right: 130px;
    }

    .search-header .search-suggestions  {
        display: none;
        justify-content: center;
        align-items: center;
        padding:30px 0 10px 0;
    }
    .search-header .search-suggestions p    {
        width:auto;
        margin:0 10px 0 0;
        font-size:1em;
    }
    .search-header .search-suggestions span {
        width: auto;
        margin: 0 5px 0 0;
        padding: 6px 12px;
        border-radius: 20px;
        color: var(--brand-pale-color);
        cursor: pointer;
        background: #4D21AD;
        font-size:1em;
    }
}
@media only screen and (min-width:1080px)    {
    .search-header  {
        padding: 40px 30px 20px 30px;
    }
    .search-icon    {
        top: 188px;
        right: 200px;
    }
}
@media only screen and (min-width:1024px)   {
    .hero-banner    {
        margin:0 0 40px 0;
    }
    .hero-banner > div  {
        background: url('../images/upgrade-banner-background.jpg') no-repeat top center;
        background-size:cover;
        display:flex;
        align-items: center;
        padding:40px 60px;
    }
    .hero-banner > div h1   {
        margin-block-start: 0;
        margin-block-end:0;
        padding:0 30px 0 0;
        margin:0 0 10px 0;
        font-size:1.5em;
        line-height: 1.2em;
        font-family: 'ca_slalombold';
        letter-spacing:0;
    }
    .hero-banner div p  {
        font-size:1.1em;
        line-height:1.4em;
        margin:0 0 20px 0;
    }
    .hero-banner div .button {
        background: var(--brand-main-color);
        color:var(--main-theme-color);
        padding: 12px 20px;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.1em;
    }
    .hero-banner div .button img    {
        width:20px;
        height:20px;
        margin:0 10px 0 0;
    }
}

.search-icon img    {
    top:8px;
    left:8px;
    width:20px;
    height:20px;
    margin:0 auto;
}

/*------------------------------------------------
12.2. Matchday card
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .header-card  {
        padding:17px 10px 15px 10px;
        margin:0 0 5px 0;
    }
    .intro-card  {
        padding:30px 20px;
    }
    .intro-card span    {
        font-size: 1em;
        color: var(--brand-main-color);
        margin: 0 0 15px 1px;
    }
    .intro-card p:nth-child(1)  {
        font-size: 1.5em;
        color: var(--brand-text-color);
        font-family: 'ca_slalombold';
        letter-spacing: 0;
        margin: 0 0 20px 0;
    }
    .intro-card p:last-child   {
        font-size: 1.2em;
        opacity: 0.6;
        line-height: 1.6em;
        max-width: 600px;
    }
}
@media only screen and (min-width:768px)    {
    .header-card  {
        padding:17px 20px 15px 20px;
        margin:0 0 5px 0;
    }
    .intro-card  {
        padding:50px 20px 40px 20px;
    }
    .intro-card-inner   {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .intro-card-inner .six-columns:last-child   {
        display: flex;
        justify-content: right;
        align-items: center;
        padding:0 0 0 100px;
    }
    .intro-card-inner .six-columns:last-child .button   {
        width:auto;
        padding-left: 30px;
        padding-right:30px;
    }
    .intro-card span    {
        font-size:1.2em;
        color: var(--brand-main-color);
        margin:0 0 25px 0;
    }
    .intro-card p:last-child   {
        font-size: 1.4em;
        opacity: 0.6;
        line-height: 1.6em;
        max-width: 600px;
    }
}

.header-card-inner    {
    background: var(--main-theme-color);
    border-radius: 10px;
    /* border: 1px solid var(--brand-pale-color); */
}
.my-club-progress-image   {
    width:30%;
    padding:10px 20px 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.my-club-progress-image img {
    max-width:80px;
}
.my-club-progress-text   {
    width:70%;
    padding:10px 20px 0 0;
}
.welcome-blurb  {
    font-size:0.9em;
}
.welcome-blurb > div:first-child  {
    display:flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (min-width:200px)    {
    .welcome-blurb p:first-child {
        font-family: 'Akira Expanded';
        font-size:1em;
        line-height:2em;
    }
    .welcome-blurb p:nth-child(2)   {
        line-height:1.4em;
    }
}
@media only screen and (min-width:768px)    {
    .welcome-blurb p:first-child {
        font-size:1.1em;
    }
    .welcome-blurb p:nth-child(2)   {
        font-size:1.1em;
    }
}
.header-card .badge   {
    width:25%;
}
.header-card .badge img  {
    max-width:50px;
    height:auto;
}
.header-card .details {
    width:75%;
    padding:3px 0 0 0;
}
.header-card .details span:first-child    {
    font-family: 'ca_slalombold';
    font-size:1.2em;
    margin:0 0 3px 0;
}
.header-card .arrow-prompt    {
    position: absolute;
    top:15px;
    height:15px;
    width:10px;
    float: initial;
    right:0;
    background: url('../images/icons/arrow-right-icon.svg') no-repeat;
}
.header-card .linear-button   {
    margin:20px 0 0 0;
}

.my-club-completion-progress    {
    padding: 10px;
    display: flex;
    align-items: center;
}
.my-club-completion-progress span   {
    font-family: 'ca_slalombold';
    font-size: 1.1em;
    text-align: center;
    padding: 0 0 0 10px;
    width:10%;
}
.my-club-completion-progress .progress-container    {
    width:90%;
    height:10px;
    background:var(--brand-pale-color);
    border-radius:5px;
}
.my-club-completion-progress .progress-container .progress-bar    {
    /* background:var(--brand-main-color); */
    background:linear-gradient(to right, var(--brand-main-color), var(--brand-tertiary-color));
    width:25%;
    height:inherit;
    border-radius:inherit;
}

/*------------------------------------------------
12.3. Home filters
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .home-filters   {
        padding: 0px 5px 10px 5px;
        overflow-x: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .home-filters::-webkit-scrollbar {
        -webkit-appearance: none;
    }
    .home-filters-inner {
        width:auto;
        color:var(--brand-text-color);
    }
    .home-filters > .home-filters-inner > div {
        width:40px;
        margin:0 8px 0 0;
        opacity:0.4;
        cursor:pointer;
    }
    .home-filters > .home-filters-inner > div:last-child {
        margin-right:0;
    }
    .home-filters > .home-filters-inner > div > span:first-child  {
        width:100%;
        height:25px;
        /* border:1px solid var(--brand-text-color); */
        margin:0 0 0 0;
    }
    .home-filters > .home-filters-inner > div.active {
        opacity:1;
    }
    .home-filters > .home-filters-inner > div.active > span:first-child  {
        /* border:1px solid var(--brand-main-color); */
    }
    .home-filters > .home-filters-inner > div > span {
        display: flex;
        justify-content: center;
        align-items: center;
        font-family:'ca_slalombold';
    }
    .home-filters > .home-filters-inner > div > span:first-child img  {
        width:15px;
        height:15px;
    }
    .home-filters > .home-filters-inner > div > span:last-child  {
        text-align: center;
        font-size:0.8em;
        font-family: 'ca_slalombold';
    }
    .home-filters > .home-filters-inner > div.active > span:last-child  {
        text-align: center;
        color:var(--brand-main-color);
    }
}
@media only screen and (min-width:768px)    {
    .home-filters   {
        padding: 15px 20px 20px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .home-filters > .home-filters-inner > div {
        width:auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin:0 20px 0 0;
    }
     .home-filters > .home-filters-inner > div > span:first-child  {
        margin:0 15px 0 0;
    }
    .home-filters > .home-filters-inner > div > span:first-child img  {
        width:25px;
        height:25px;
    }

    .home-filters > .home-filters-inner > div > span:last-child  {
        text-align: center;
        font-size:1.1em;
    }
    .home-filters > .home-filters-inner > div.active > span:last-child  {
        text-align: center;
        font-size:1.1em;
        color:var(--brand-main-color);
    }
}

/* img.animated-icon   {
    animation:animatedIcon 1s ease infinite;
} */

/*------------------------------------------------
12.4. Tab filters
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .tab-header {
        position: fixed;
        height:50px;
        background:var(--main-theme-color);
        color:var(--brand-text-color);
        border-bottom:1px solid var(--brand-pale-color);
        z-index:2;
    }
}
@media only screen and (min-width:768px)    {
    .tab-header {
        width:calc(100% - 70px);
    }
}
.tab-header > div:first-child   {
    font-family: 'ca_slalombold';
    font-size:1.1em;
    text-align:center;
    padding:14px 0 0 0;
}
.tab-header .search-icon    {
    top: 5px;
    right: 10px;
    cursor:pointer;
}

/*------------------------------------------------
12.5. Recent exports card
------------------------------------------------*/
.recent-exports-card    {
    margin:20px 0 0 0;
    padding:0 20px;
}
.recent-exports-card-inner  {
    padding:20px;
    border:1px solid var(--brand-border-color);
}
.recent-exports-card-inner > div:first-child    {
    margin:0 0 20px 0;
}
.recent-exports-card-inner > div:first-child > span:first-child    {
    font-family: 'ca_slalombold';
    font-size:1.1em;
    margin:0 0 10px 0;
}

/* Exports list items */
.recent-exports-card-inner > div:nth-child(2) > div {
    margin:0 0 15px 0;
}
.recent-exports-card-inner > div:nth-child(2) > div > span:first-child   {
    background:var(--brand-pale-color);
    width:15px;
    height:15px;
    margin:0 10px 0 0;
}
.recent-exports-card-inner > div:nth-child(2) > div > span:nth-child(2), .recent-exports-card-inner > div:nth-child(2) > div > span:nth-child(3), .recent-exports-card-inner > div:nth-child(2) > div > span:nth-child(4) {
    width:auto;
}
.recent-exports-card-inner > div:nth-child(2) > div > span:nth-child(3), .recent-exports-card-inner > div:nth-child(2) > div > span:nth-child(4)    {
    font-family: 'ca_slalombold';
    float:right;
    padding:0 0 0 10px;
}

/*------------------------------------------------
12.6. My club detail cards
------------------------------------------------*/
.my-club-detail {
    /* padding:0 20px;
    margin:0 0 20px 0; */
    width:100%;
}
.my-club-detail img {
    width: 40px;
    height: 40px;
    margin: 22px 0px 0 0;
    padding: 0 10px 0 0;
}
.my-club-detail label    {
    margin:0 0 5px 0;
    width:calc(100% - 40px);
}
.my-club-detail input   {
    height: 40px;
    border-radius: 5px;
    width: 100%;
    padding: 0 40px 0 15px;
    border: 1px solid var(--brand-main-color);
}
.my-club-detail input:focus {
    border:1px solid var(--brand-main-color);
}

@media only screen and (min-width:200px)    {
    .my-club-header {

    }
    .my-club-card   {
        margin:0 0 20px 0;
        padding:0 20px;
    }
}
@media only screen and (min-width:768px)    {
    .my-club-card, .my-club-header  {
        width:25%;
        height:360px;
        margin:0 0 20px 0;
        padding:0 20px;
    }
}
.my-club-card .swipe-panel-title    {
    padding:0;
}
.my-club-card .edit-button  {
    position: absolute;
    float: initial;
    top:10px;
    right: 30px;
}
.current-badge-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    border:1px solid var(--brand-pale-color);
}
.current-badge-card img {
    max-width:80px;
    height:auto;
}
.current-colours-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    border:1px solid var(--brand-pale-color);
}
.current-colours-card div   {
    width: 40px;
    height: 40px;
    border: 1px solid var(--brand-border-color);
    border-radius: 20px;
    margin: 0 5px;
}
.current-kit-card   {
    padding:20px;
}
.current-sponsors-card  {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--brand-pale-color);
    height: auto;
    min-height: 130px;
    overflow:hidden;
}
.current-sponsors-card img  {
    width: 20%;
    height: auto;
    padding: 0 10px;
}
.current-club-photo-card    {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    border: 1px solid var(--brand-pale-color);
    overflow: hidden;
}
.current-club-photo-card img    {
    max-height:130px;
    width:auto;
}
.current-club-video-card    {
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    border: 1px solid var(--brand-pale-color);
}
.current-club-video-card iframe {
    width:100%;
    height:280px;
}
.sponsor-image  {
    border: 1px solid var(--brand-pale-color);
    border-radius: 5px;
    padding: 10px;
    width: 24%;
    background: var(--brand-border-color);
    margin: 0 1% 0 0;
}
.sponsor-image img  {
    border-radius:5px;
}
.modal-inner .sponsor-image div    {
    clear: both;
}
.modal-inner .sponsor-image .delete-button  {
    text-align: center;
    padding:5px;
    top:0;
    right:0;
}

/*------------------------------------------------
12.7. Feature panel
------------------------------------------------*/
.feature-panel  {
    padding:0 20px;
    margin:0 0 30px 0;
}
.feature-panel-inner    {
    height:150px;
    background:var(--brand-grey-color);
    border-radius:5px;
    display: flex;
}

.instant-website-card-inner   {
    border:1px solid var(--brand-pale-color);
    border-radius:5px;
    padding:20px;
}

.instant-website-card p:first-child   {
    font-family: 'ca_slalombold';
    margin:0 0 5px 0;
}
.instant-website-card p:nth-child(2)   {
    margin:0 0 10px 0;
}
.generate-website-button    {
    width: auto;
    padding: 8px 10px;
    color: green;
    border: 1px solid green;
    font-family: 'ca_slalombold';
    background: green;
    color: #fff;
    border-radius: 5px;
    font-size: 0.9em;
}
.home-panel.standard-panel .card {
    border-radius:20px;
    color:#fff;
    background:url('../images/thumbnails/pack-thumbnail-placeholder.png') no-repeat center center;
    background-size: cover;
    cursor:pointer;
}
.home-panel.standard-panel .card:last-child {
    margin:0;
}
@media screen and (min-width:200px) {
    .hub-feature-panel .card .details    {
        position: absolute;
        top: initial;
        left:0;
        bottom:0;
        height:auto;
        padding:0 15px 15px;
        font-size:0.9em;
        z-index:2;
    }
    .hub-feature-panel .card .details p.title    {
        font-size: 0.9em;
        margin: 0 0 2px 0;
        font-weight: 700;
    }
    .hub-feature-panel .card .details .meta .pack-count  {
        margin: 0 5px 0 0;
        width: 15px;
        height: 15px;
        border-radius: 2px;
        font-size: 0.75em; 
        background: var(--brand-main-color);
    }
    .hub-feature-panel .card .details .meta .tier   { 
        height: 15px;
        font-size: 0.75em;
        padding: 0 3px;
        border-radius: 2px;
        text-transform: capitalize;
    }
}
@media screen and (min-width:768px) {
    .hub-feature-panel .card .details    {
        padding:0 25px 25px;
        font-size:0.9em;
    }
    .hub-feature-panel .card .details p.title    {
        font-size: 1.2em;
        margin: 0 0 2px 0;
    }
    .hub-feature-panel .card .details .meta .pack-count  {
        margin: 0 10px 0 0;
        width: 20px;
        height: 20px;
        border-radius: 3px;
        font-size: 0.8em;
    }
    .hub-feature-panel .card .details .meta .tier   { 
        height: 20px;
        font-size: 0.85em;
        padding: 0 5px;
        border-radius: 3px;
    }
}

.hub-feature-panel .card .details .meta  {
    margin:5px 0 0 0
}
.hub-feature-panel .card .details .meta div  {
    width:auto;
}
.hub-feature-panel .card .details .meta .tier.free  {
    background: var(--tier-free-fill);
    color: var(--tier-free-text);
    border: 1px solid var(--tier-free-fill);
}
.hub-feature-panel.card .details .meta .tier.plus  {
    background: var(--tier-plus-fill);
    color: var(--tier-plus-text);
    border: 1px solid var(--tier-plus-fill);
}
.hub-feature-panel .card .gradient    {
    position: absolute;
    left:0;
    top:initial;
    bottom:0;
    height:70%;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
    border-radius:0 0 5px 5px;
    z-index:1;
}

@media screen and (min-width:200px) {
    .hub-feature-panel  {
        padding:0 20px 20px 20px;
    }
    .hub-feature-panel .swipe-panel-title   {
        padding:0;
    }
    .hub-feature-panel .card {
        border-radius:5px;
        color:#fff;
        background:url('../images/thumbnails/pack-thumbnail-placeholder.png') no-repeat center center;
        background-size: cover;
        cursor:pointer;
    }
    .hub-feature-panel .card.pack    {
        width:49%;
        max-width:initial;
        height:200px;
        margin:0 2% 2% 0;
    }
    .hub-feature-panel .inner .card.pack:nth-child(2n), .card.pack:last-child {
        margin: 0 0 2% 0;
    }
}
@media screen and (min-width:768px) {
    .hub-feature-panel  {
        padding:0 20px 40px 20px;
    }
    .hub-feature-panel .card {
        border-radius:5px;
    }
    .hub-feature-panel .card.pack    {
        width:24%;
        height:300px;
        margin:0 1.333% 1.333% 0;
    }
    .hub-feature-panel .inner .card.pack:nth-child(2n), .card.pack:last-child    {
        margin:0 1.333% 1.333% 0;
    }
    .hub-feature-panel .inner .card.pack:nth-child(4n), .card.pack:last-child    {
        margin:0 0 1.333% 0;
    }

    .hub-feature-panel .card.social   {
        width:19%;
        height:350px;
        margin:0 1.25% 1.25% 0;
    }
    .hub-feature-panel .inner .card.social:nth-child(2n), .card.social:last-child    {
        margin:0 1.25% 1.25% 0;
    }
    .home-panel.standard-panel .inner .card.social:nth-child(5n), .card.social:last-child    {
        margin:0 0 1.25% 0;
    }

    .hub-feature-panel .card.story   {
        width:16%;
        height:400px;
        margin:0 0.75% 0.75% 0;
    }
    .hub-feature-panel .inner .card.story:nth-child(3n), .card.story:last-child    {
        margin:0 0.75% 0.75% 0;
    }
    .hub-feature-panel .inner .card.story:nth-child(6n), .card.story:last-child    {
        margin:0 0 0.75% 0;
    }
}

/*------------------------------------------------
12.8. Title cards
------------------------------------------------*/
.title-card {
    padding:0 20px 20px 20px;
    border-bottom:1px solid var(--brand-border-color);
}
.title-card > p:first-child {
    font-family: 'ca_slalombold';
    font-size:1.1em;
    margin-bottom:10px;
}
.title-card > p:nth-child(2) {
    line-height:1.7em;
}

/*------------------------------------------------
12.9. Fixed prompt card & floating CTA
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .fixed-prompt-card  {
        position:fixed;
        top:initial;
        bottom:65px;
        background:var(--main-theme-color);
        border-top:1px solid var(--brand-border-color);
        padding:15px;
        z-index:2;
    }
    .floating-cta   {
        display:none;
    }
    .floating-cta .button   {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .floating-cta img   {
        width: 25px;
        height: 20px;
        padding: 0 10px 0 0;
    }
}
@media only screen and (min-width:768px)    {
    .fixed-prompt-card  {
        bottom:0px;
        padding:15px 20px;
        width:calc(100% - 70px);
        display:none;
    }
    .floating-cta   {
        position: fixed;
        z-index: 2;
        display: block;
        max-width: 120px;
        top: 23px;
        float: right;
        right: 80px;
    }
    .floating-cta .filled-button    {
        background: #fff;
        color: var(--brand-main-color);
        padding: 12px;
        font-family: 'ca_slalombold';
    }
}

/*------------------------------------------------
12.10. Squad card
------------------------------------------------*/
@media only screen and (min-width:200px) {
    .squad-card {
        width:49%;
        margin:0 2% 2% 0;
        padding:0 0 10px 0;
        color:var(--brand-text-color);
        border:1px solid var(--brand-pale-color);
        /* box-shadow: 0 0 7px 0 #dedede; */
        font-family: inherit;
        border-radius:10px;
        cursor:pointer;
    }
    .squad-card:nth-child(2n)   {
        margin:0 0 2% 0;
    }
    .squad-card > .gradient {
        position: absolute;
        top:initial;
        bottom:0;
        left:0;
        width:100%;
        height:50%;
        background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
        border-radius:0 0 10px 10px;
        transition: all 0.1s ease;
        z-index:0;
    }
    .squad-card:hover > .gradient  {
        height:100%;
    }
    .squad-card .circular-headshot-wrapper  {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .squad-card .circular-headshot  {
        height:140px;
        background-color:#F3F2F9 !important;
        border-radius:8px 8px 0 0;
    }
    .canvas .squad-card .circular-headshot  {
        background-color: initial !important;
    }
    .squad-card .squad-number   {
        top: 0;
        left: 0;
        padding: 2px;
        border-radius: 0 0 5px 0;
        text-align: center;
        font-family: 'ca_slalomregular';
        font-size:0.8em;
        opacity: 0.6;
    }
    .squad-card .squad-name {
        font-family:'ca_slalombold';
        text-align: center;
        padding: 10px 0 5px 0;
        font-size: 1em;
        height: 30px;
        overflow: hidden;
    }
    .squad-card .squad-position {
        text-align:center;
        text-transform: capitalize;
        font-family: 'ca_slalomregular';
        font-style: italic;
        font-size:0.8em;
        opacity:0.6;
    }
}

@media only screen and (min-width:460px) {
    .squad-card {
        width:32.666%;
        margin:0 1% 1% 0;
    }
    .squad-card:nth-child(2n)   {
        margin:0 1% 1% 0;
    }
    .squad-card:nth-child(3n)   {
        margin:0 0 1% 0;
    }
}

@media only screen and (min-width:768px) {
    .squad-card {
        width:19.2%;
        margin:0 1% 1% 0;
    }
    .squad-card:nth-child(2n), .squad-card:nth-child(3n)   {
        margin:0 1% 1% 0;
    }
    .squad-card:nth-child(5n)   {
        margin:0 0 1% 0;
    }
    .squad-card .circular-headshot  {
        height:180px;
    }
}

@media only screen and (min-width:1024px) {
    
}

@media only screen and (min-width:1280px) {
    
}

.offscreen-canvas .squad-card .circular-headshot-wrapper    {
    background: none !important;
    background-color: none !important;
}

/*------------------------------------------------
12.11. Trophy card
------------------------------------------------*/
.trophy-card {
    width:48%;
    height:150px;
    padding:15px;
    margin:0 4% 4% 0;
    color:#fff;
    border-radius:10px;
    transition: all 0.1s ease;
    cursor:pointer;
}
.trophy-card:nth-child(2n)   {
    margin:0 0 2% 0;
}
.trophy-card > span:nth-child(1), .trophy-card > span:nth-child(2)    {
    font-family: 'ca_slalombold';
    z-index:1;
}
.trophy-card > span:nth-child(2) {
    top:53%;
    height:23px;
    overflow: hidden;
}
.trophy-card > span:nth-child(3) {
    top:51%;
    z-index:1;
}
.trophy-card > .gradient {
    position: absolute;
    top:initial;
    bottom:0;
    left:0;
    width:100%;
    height:50%;
    background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
    border-radius:0 0 10px 10px;
    transition: all 0.1s ease;
    z-index:0;
}
.trophy-card:hover > .gradient  {
    height:100%;
}
.trophies-list .card    {
    background:var(--brand-yellow) url('../images/card-background-club-trophy.svg');
}

/*------------------------------------------------
12.12. Live pages card
------------------------------------------------*/
.live-pages-card    {
    margin:20px 0 0 0;
    padding:0 20px;
}
.live-pages-card-inner  {
    padding:20px;
    border:1px solid var(--brand-border-color);
}
.live-pages-card-inner > div:first-child    {
    margin:0 0 20px 0;
}
.live-pages-card-inner > div:first-child > span:first-child    {
    font-family: 'ca_slalombold';
    font-size:1.1em;
    margin:0 0 10px 0;
}

/* Exports list items */
.live-pages-card-inner > div:nth-child(2) > div {
    margin:0 0 15px 0;
}
.live-pages-card-inner > div:nth-child(2) > div > span:first-child   {
    background:var(--brand-pale-color);
    width:15px;
    height:15px;
    margin:0 10px 0 0;
}
.live-pages-card-inner > div:nth-child(2) > div > span:nth-child(2), .live-pages-card-inner > div:nth-child(2) > div > span:nth-child(3), .live-pages-card-inner > div:nth-child(2) > div > span:nth-child(4) {
    width:auto;
}
.live-pages-card-inner > div:nth-child(2) > div > span:nth-child(3), .live-pages-card-inner > div:nth-child(2) > div > span:nth-child(4)    {
    font-family: 'ca_slalombold';
    float:right;
    padding:0 0 0 10px;
}

/*------------------------------------------------
12.13. Captain card
------------------------------------------------*/
.captain-card   {
    border:1px solid var(--brand-border-color);
    border-radius:10px;
}
.captain-card .captain-details   {
    width:calc(100% - 130px);
    padding:15px;
}
.captain-card .captain-details > span:nth-child(2)  {
    font-family: 'ca_slalombold';
    font-size:1.1em;
    margin:5px 0 5px 0; 
}
.captain-card .captain-photo    {
    width:100px;
    height:100px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius:0 10px 10px 0;
}
.captain-icon   {
    width:30px;
    height:100px;
    background:#FEF200;
    font-family: 'ca_slalombold';
    display: flex;
    align-items: center;
    justify-content: center;
}

/*------------------------------------------------
12.14. Hamburger menu
------------------------------------------------*/
.menu-overlay   {
    position: fixed;
    height:100%;
    background: rgba(0,0,0,0.6);
    z-index:10;
}
.menu-overlay input, .modal-overlay textarea {
    padding: 15px;
    border: 1px solid var(--brand-text-color);
}
.close-menu-button  {
    position: absolute;
    top: 10px;
    left: initial;
    float: initial;
    right: 10px;
    width: 30px;
    height: 30px;
    color: var(--brand-text-color);
    background: url(../images/icons/close-drawer-icon.svg) no-repeat center center;
    background-size: 15px 15px;
    z-index:10;
}
@media only screen and (min-width:200px)    {
    .menu   {
        width: 100%;
        max-width: 340px;
        height: calc(100% - 20px);
        background: #fff;
        padding: 30px;
        overflow: auto;
        left: 10px;
        border-radius: 10px;
        top: 10px;
    }
}
@media only screen and (min-width:768px)    {
    .menu   {
        top: 10px;
        right: 20px;
        left:initial;
        float: right;
    }
}
.menu-list  {
    padding:30px 0 10px 0;
    cursor:pointer;
}
.menu-list ul li  {
    list-style-type: none;
    display: block;
    width: 100%;
    margin: 0 0 15px 0;
    font-family:'ca_slalombold';
    font-size:1.2em;
}
.menu-title {
    font-family:'ca_slalombold';
    padding:0 0 20px 0;
}
.user-information-panel {
    display: flex;
    justify-content: center;
}
.user-information-panel div:first-child {
    width:40px;
    height:40px;
}
.user-information-panel div:first-child img {
    border-radius:20px;
}
.user-information-panel div:last-child {
    width:calc(100% - 40px);
    padding: 0 0 0 15px;
}
.user-information-panel div:last-child span:first-child {
    font-family: 'ca_slalombold';
    font-size: 1.2em;
    line-height: 1.3em;
    margin: 0 0 5px 0;
}
.user-information-panel div:last-child span:last-child {
    color: var(--canvas-border-color);
    font-size: 1.1em;
    line-height: 1.3em;
}
.menu span  {
    margin:0 0 5px 0;
}
.menu input, .menu textarea {
    margin:0 0 10px 0;
}
.menu textarea  {
    width:100%;
    min-width:100%;
    max-width:100%;
    height:100px;
    min-height:100px;
    max-height:200px;
}
.menu .filled-button    {
    margin:0 0 10px 0;
}
.menu .menu-feedback-wrapper    {
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}
.menu .menu-feedback-wrapper p:first-child  {
    font-family: 'ca_slalombold';
    font-size: 1.2em;
    line-height: 1.3em;
    margin: 0 0 5px 0;
}
.menu .menu-feedback-wrapper p:last-child  {
    font-family: 'ca_slalomregular';
}
.menu .menu-feedback-wrapper .button    {
    margin:10px 0 0 0;
}
.menu .newsletter-options   {
    margin:0 0 10px 0;
}
.menu .newsletter-options div   {
    width: 50%;
    text-align: center;
    padding: 10px;
    font-family: 'ca_slalombold';
    cursor:pointer;
    border-radius:3px;
}
.menu .fixed-update-cta {
    position: fixed;
    top: initial;
    bottom: 10px;
    padding: 20px;
    background: #fff;
    border-top: 1px solid var(--brand-border-color);
    max-width: 340px;
    z-index: 1;
    right: 20px;
    border-radius: 0 0 20px 20px;
}
.version-information    {
    color:var(--canvas-border-color);
    font-size:0.8em;
    padding:20px 0 0 0;
}

/*------------------------------------------------
12.15. Searching
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .search-drawer  {
        background: #fff;
        padding: 20px;
        z-index: 10;
        position: absolute;
        top: 205px;
        right: 20px;
        width: calc(100% - 40px);
        height: 50%;
        overflow: auto;
        border-radius: 5px;
        border: 1px solid var(--brand-main-color);
    }
}
@media only screen and (min-width:440px)    {
    .search-drawer  {
        top:205px;
    }
}
@media only screen and (min-width:768px)    {
    .search-drawer  {
        top: 225px;
        width: calc(100% - 60px);
        right: 30px;
    }
}
.search-result-title    {
    font-family:'ca_slalombold';
    padding:0 0 20px 0;
    margin:0 0 20px 0;
    border-bottom:1px solid var(--brand-border-color);
}
.search-result-title span   {
    width:auto;
    font-family:'ca_slalomregular';
    float:right;
    color:var(--brand-main-color);
    cursor:pointer;
}
.instant-search-dropdown    {

}
.instant-search-result  {
    margin:0 0 10px 0;
    cursor:pointer;
}
.instant-search-result img  {
    border-radius:5px;
}
.instant-search-result div:first-child  {
    width:100px;
}
.instant-search-result .name  {
    width:calc(100% - 100px);
    padding: 20px 20px 0 20px;
    font-family: 'ca_slalombold';
    font-size: 1em;
}
.instant-search-result span  {
    width:calc(100% - 100px);
    padding:0 20px !important;
}

/*------------------------------------------------
12.16. No content and error messages
------------------------------------------------*/
.no-content-message {
    top:-20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;
}
.no-content-message span    {
    text-align: center;
    font-family:'ca_slalombold';
    padding:0 20px;
}
.error-message  {
    border:1px solid var(--brand-border-color);
    border-radius:5px;
    padding:10px 15px;
    margin:0 0 10px 0;
}
.error-message.error    {
    background:var(--error-color);
    color:#fff;
}
.error-message.no-error    {
    background:var(--no-error-color);
    color:#fff;
}
.nothing-found  {
    text-align: center;
}
.nothing-found > div    {
    display: flex;
    justify-content: center;
    align-items: center;
}
.nothing-found img  {
    width:auto;
    height:100px;
}
.nothing-found span {
    width:100%;
    opacity:0.2;
}

/*------------------------------------------------
12.17. Exports
------------------------------------------------*/
.export-overlay {
    position: fixed;
    height:100%;
    background: rgba(0,0,0,0.6);
    z-index:10;
}
.export-options {
    background: var(--main-theme-color);
    height:70px;
    padding:10px 10px 10px 0;
}
.export-option-button   {
    height:50px;
    width:50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.export-image-wrapper   {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    padding:20px;
}
.export-image-wrapper img   {
    max-width:500px;
    border-radius: 10px;
}
.deletion-modal {
    background:var(--graphics-editor-background-color);
    max-width:300px;
    padding:20px;
    border-radius:5px;
}

/*------------------------------------------------
12.18. Tools
------------------------------------------------*/
.tool-overlay   {
    position: fixed;
    height:100%;
    background: var(--main-theme-color);
    z-index:10;
}
.tool-overlay .overlay-inner    {
    top:50px;
    padding:40px;
}
.tools-toolbar  {
    position: absolute;
    height:50px;
    border-bottom:1px solid var(--brand-border-color);
    z-index:1;
}
.tools-toolbar .button  {
    height:50px;
    min-width:50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*------------------------------------------------
12.19. Match centre
------------------------------------------------*/
.match-centre-fixture-select-row    {
    padding: 20px;
    margin: 0 0 10px 0;
    border-radius: 5px;
    border: 1px solid var(--brand-border-color);
    cursor: pointer;
    font-family: 'ca_slalombold';
    border-left: 5px solid var(--brand-main-color);
}
.match-centre-fixture-select-row div    {
    display: flex;
    justify-content: center;
    align-items: center;
}
.match-centre-fixture-select-row div:first-child    {
    justify-content: right;
}
.match-centre-fixture-select-row div:last-child    {
    justify-content: left;
}
.match-centre-fixture-select-row div:first-child, .match-centre-fixture-select-row div:last-child  {
    width:45%;
}
.match-centre-fixture-select-row div:nth-child(2)   {
    width:10%;
}
.match-centre-overlay   {
    position: fixed;
    height:100%;
    background:var(--main-theme-color);
    overflow: auto;
    z-index:3;
}
.match-centre-toolbar   {
    background: var(--main-theme-color);
    height:50px;
    border-bottom:1px solid var(--brand-border-color);
}
.match-centre-toolbar .button   {
    height:50px;
    min-width:50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.match-centre-header    {
    border-bottom:1px solid var(--brand-border-color);
    background:#000;
    color:#fff;
    padding:20px;
}
.match-centre-header .team  {
    width:35%;
    height:60px;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 1.4em;
    font-family: 'ca_slalombold';
}
.match-centre-header .team:first-child  {
    justify-content: right;
}
.match-centre-header .divider   {
    width:5%;
    display: flex;
    justify-content: center;
}
.match-centre-header .divider div   {
    width: 3px;
    height: 60px;
    background: #000;
}
.match-centre-header .competition-name  {
    display: flex;
    justify-content: center;
    align-items: center;
}
.match-centre-header .score  {
    width:12.5%;
    height:60px;
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 3em;
    font-family: 'ca_slalombold';
}
.match-centre-header .match-date, .match-centre-header .match-time  {
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.match-centre-header .match-details {
    padding:20px;
}
.match-centre-header .match-stats   {

}
.match-centre-header .match-stats .home-match-stats, .match-centre-header .match-stats .away-match-stats    {
    width:50%;
}

.match-centre-header .match-stats span  {
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.match-centre-action-bar    {
    padding:20px;
    background:var(--main-theme-color);
    display: flex;
    justify-content: center;
}
.match-centre-action-bar .button    {
    padding:10px;
    margin:0 5px;
    border:1px solid var(--brand-border-color);
    border-radius:5px;
}
.match-centre-feed-wrapper  {
    display: flex;
    justify-content: center;
    background:#f6f6f6;
    padding:20px;
}
.match-centre-feed  {
    max-width:600px;
}
.match-centre-list-row  {
    padding:10px;
    margin:0 0 10px 0;
    border-radius:5px;
    border:1px solid var(--brand-border-color);
    border-left:5px solid var(--brand-main-color);
    cursor:pointer;
}
.match-centre-list-row div:first-child span {
    width:45%;
    display:flex;
    justify-content: center;
    align-items: center;
    font-family: 'ca_slalombold';
}
.match-centre-list-row div:first-child span:first-child    {
    justify-content: right;
}
.match-centre-list-row div:first-child span:nth-child(2) {
    width:10%;
}
.match-centre-list-row div:first-child span:nth-child(3)    {
    justify-content: left;
}
.match-centre-list-row div:nth-child(2) {
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:0.8em;
    padding:10px 10px 0 10px;
}
.match-centre-post  {
    background:#e6e8ea;
    border-radius:3px;
    padding:20px;
    margin:0 0 20px 0;
    font-size:1.2em;
    line-height:1.4em;
}
.match-centre-post div:first-child  {
    font-size:2em;
    font-family: 'ca_slalombold';
    border-bottom:1px solid var(--brand-border-color);
    padding:0 0 10px 0;
}
.match-centre-post div:nth-child(2)  {
    padding:10px 0;
    font-family: 'ca_slalombold';
    font-size:1.2em;
}
.match-centre-post div:nth-child(3)  {
    padding: 10px 0;
    font-size: 1.1em;
    line-height: 1.7em;
}
.match-centre-post.red-card    {
   
}
.match-centre-post.red-card::before    {
    content: 'Red card';
    background: red;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 0 0 80px 0;
    color: #fff;
    font-family: 'ca_slalombold';
}
.match-centre-post.booking   {
   
}
.match-centre-post.booking::before    {
    content: 'Booking';
    background: #FEF200;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 0 0 80px 0;
    color: var(--brand-text-color);
    font-family: 'ca_slalombold';
}
.match-centre-post.goal  {

}
.match-centre-post.goal::before    {
    content: 'GOAL!';
    background: green;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 0 0 80px 0;
    color: #fff;
    font-family: 'ca_slalombold';
}
.match-centre-post.red-card div:first-child, .match-centre-post.booking div:first-child, .match-centre-post.goal div:first-child  {
    margin-top:20px;
}
.select-scoring-team-button {
    width: 50%;
    padding:20px;
    border-radius:5px;
}
.scoring-team   {
    background:green;
}
.edit-match-event-button    {
    position: absolute;
    width:30px;
    height:30px;
    background:url('../images/icons/view-options-icon.svg') no-repeat center center;
    background-size: 20px 20px;
    right:10px;
}
.delete-post-button {
    position: absolute;
    width:30px;
    height:30px;
    background:red;
    top:20px;
    right:20px;
    border-radius:5px;
}

/*------------------------------------------------
12.20. Guidance and helpers
------------------------------------------------*/
.guidance-panel-wrapper {
    padding:20px;
}
.guidance-panel {
    padding:30px 20px;
    color:var(--brand-text-color);
    border:1px solid var(--brand-border-color);
}
.guidance-panel h1  {
    font-family: 'ca_slalombold';
    font-size:1.1em;
    margin-block-start: 0em;
}
.guidance-panel p   {
    line-height:1.6em;
}
.guidance-panel-reduced {
    padding:30px;
    background: var(--guidance-panel-peach);
    color:var(--brand-text-color);
    border-radius: 5px;
}
.guidance-panel-reduced h1  {
    font-family: 'ca_slalombold';
    font-size:1.2em;
    margin-block-start: 0em;
}
.guidance-panel-reduced p   {
    line-height:1.6em;
}
.helper {
    max-width:280px;
    padding:20px;
    border-radius:5px;
    background:var(--helper-colour);
    color:#fff;
    z-index:2;
}
.helper .close-button   {
    position: absolute;
    width:30px;
    height:30px;
    background:#fff;
}

.bugs-banner    {
    padding: 0 20px;
    margin: 0 0 20px 0;
}
.bugs-banner .inner {
    padding: 15px;
    border: 1px solid var(--brand-main-color);
    border-left:5px solid var(--brand-main-color);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em;
    background: var(--brand-pale-color);
    font-family: 'ca_slalombold';
}
.modal .bug {
    padding:0 0 10px 0;
    margin:0 0 10px 0;
    border-bottom:1px solid var(--brand-pale-color);
}
.modal .bug p   {
    margin:0 0 10px 0;
}

/*------------------------------------------------
12.21. Updates
------------------------------------------------*/
.updates-list   {
    
}
.update-card    {
    margin: 0 0 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: left;
    transition:all 0.2s ease;
}
.update-card:hover  {
    background:var(--brand-border-color);
}
.update-card-image  {
    width: 50px;
    height: 50px;
    margin: 0 0 0px 0;
    background-color: var(--canvas-border-color);
    background-size: cover;
    background-position: center center;
    border-radius: 5px;
}
.update-card-text   {
    width: calc(100% - 70px);
    padding: 0 10px;
}
.update-card-text span:first-child   {
    font-family: 'ca_slalombold';
    font-size:1.1em;
    padding:0 0 5px 0;
}
.update-card-text span:last-child   {
    font-family: 'ca_slalomregular';
    font-size:0.8em;
    opacity:0.7;
}
.update-title   {
    font-family: 'ca_slalombold';
    font-size: 1.7em;
    padding: 0 0 10px 0;
}
.update-date   {
    font-family: 'ca_slalomregular';
    font-size:0.8em;
    opacity:0.7;
}
.update-categories   {
    font-family: 'ca_slalomregular';
    font-size:0.8em;
    opacity:0.7;
}
.update-content   {
    margin: 20px 0 100px 0;
    font-size: 1em;
    line-height: 1.7em;
    opacity: 0.8;
}

/*------------------------------------------------
12.22. Accordions
------------------------------------------------*/
.accordion  {
    border:1px solid var(--brand-border-color);
    margin: 0 0 10px 0;
}
.accordion div:first-child   {
    padding:10px;
    background:var(--brand-main-color);
    color:var(--main-theme-color);
    font-family: 'ca_slalombold';
    font-size:0.9em;
    border-radius:5px 5px 0 0 ;
    cursor:pointer;
}
.accordion div:last-child   {
    font-size:0.9em;
    padding:15px;
    border-radius:0 0 5px 5px;
}
.accordion.collapsed div:first-child   {
    border-radius:5px;
}
.accordion.collapsed div:last-child   {
    display:none;
}

/*------------------------------------------------
12.23. Player details
------------------------------------------------*/
.player-details-summary span:nth-child(2) {
    font-size: 1.7em;
    margin: 0 0 10px 0;
}
.player-details-summary span:last-child {
    font-family: 'ca_slalomregular';
    opacity:0.6;
}
.player-details-headshot    {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--brand-border-color);
    border: 1px solid var(--brand-pale-color);
    border-radius: 5px;
}
.player-details-headshot img    {
    max-height:100px;
    width:auto;
    border-radius:5px;
}
@media only screen and (min-width:200px)    {
    ul.player-details-list  {
        padding:10px 0 0 0;
    }
}
@media only screen and (min-width:768px)    {
    ul.player-details-list  {
        padding:0 0 0 20px;
    }
}
ul.player-details-list li    {
    list-style-type: none;
    width: 100%;
    padding: 0 0 3px 0;
    font-family: 'ca_slalombold';
    font-size: 1em;
}

/*------------------------------------------------
12.24. Home panels
------------------------------------------------*/
.home-panel {
    padding:0 20px 20px 20px;
    border-top:1px solid var(--brand-border-color);
}
#hubPanel   {
    padding:0 0 0 0;
}

/*------------------------------------------------
12.25. Custom layout UI
------------------------------------------------*/
.layout-sizes-list  {
    margin:0 0 20px 0;
}
@media only screen and (min-width:200px)    {
    .layout-size-row    {
        cursor: pointer;
        padding: 10px 0;
        display: flex;
        border-bottom: 1px solid var(--brand-border-color);
        transition:all 0.1s ease;
    }
    .layout-size-row::before    {
        content: '';
        width: 15px;
        height: 15px;
        margin: 0 10px 0 0;
        background: url('../images/icons/my-layouts-icon.svg') no-repeat center center;
        background-size: 15px 15px;
        display: inline-block;
    }
    .layout-size-row.selected   {
        border-bottom:1px solid green;
        border-radius:3px;
        padding-left:10px;
    }
}
@media only screen and (min-width:768px)    {
    .layout-size-row    {
       
    }
}

/*------------------------------------------------
12.26. Drawers
------------------------------------------------*/
.drawer input, .drawer select   {
    height: 40px;
    border-radius: 5px;
    width: 100%;
    padding: 0 15px;
    border: 1px solid var(--brand-main-color);
    font-family: 'ca_slalomregular';
}
.drawer select   {
    padding:0 10px;
}
.drawer .padding-wrapper span   {
    font-family: 'ca_slalomregular';
}

/*------------------------------------------------
12.27. Modal alerts
------------------------------------------------*/
.modal-alert-image  {
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-alert-image img  {
    width:100px;
    height:auto;
}

/*------------------------------------------------
12.28. Favourites
------------------------------------------------*/
.favourite-preview  {
    margin:0 0 20px 0;
    padding:20px;
    border:1px solid var(--brand-pale-color);
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--brand-border-color);
    margin: 0 0 10px 0;
}
.favourite-preview img  {
    border-radius:5px;
    max-width:300px;
    height:auto;
}
.modal .favourite-name  {
    padding:10px 0;
    font-size:2em;
}
.modal .delete-button   {
    position: absolute;
    width: auto !important;
    float: right;
    right: 20px;
    width: 40px !important;
    height: 40px !important;
    top: 20px;
    border-radius: 5px;
    background: #fff url('../images/icons/delete-button-icon.svg') center center no-repeat;
    background-size:40px 40px;
    border: 1px solid var(--brand-pale-color);
}
.remove-from-favourites-button  {
    width:auto;
    margin: 0 0 20px 0;
    border: 1px solid red;
    color: red;
    padding: 7px 10px;
    border-radius: 3px;
    position: absolute;
    top: initial;
    background: Red;
    bottom: 0px;
    color: #fff;
    float: initial;
    right: 20px;
}
.swipe-panel-icon-wrapper .favourite-icon   {
    position: absolute;
    top: 0;
    left: initial;
    right:5px;
    width: 30px;
    height: 30px;
    background: var(--main-theme-color) url(../images/icons/added-to-favourites-icon.svg) no-repeat center center;
    background-size: 20px 20px;
    z-index: 1;
    display:none;
}

/*------------------------------------------------
12.29. Templates
------------------------------------------------*/
.swipe-panel-icon-wrapper .template-icon   {
    position: absolute;
    top: 0;
    left: initial;
    right:5px;
    width: 30px;
    height: 30px;
    background: var(--main-theme-color) url(../images/icons/save-as-a-template-icon-filled.svg) no-repeat center center;
    background-size: 15px 15px;
    z-index: 1;
    display:none;
}

/*------------------------------------------------
12.30. Packs
------------------------------------------------*/
.tier-free  {
    width:auto;
    height:28px;
    padding:5px 10px;
    font-family: 'ca_slalomregular' !important;
    text-transform: capitalize;
    background:var(--tier-free-fill);
    color:var(--tier-free-text);
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tier-plus  {
    width:auto;
    height:28px;
    padding:5px 10px;
    font-family: 'ca_slalomregular' !important;
    text-transform: capitalize;
    background:var(--tier-plus-fill);
    color:var(--tier-plus-text);
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pack-splash-overlay    {
    position: fixed;
    left:0;
    height:100%;
    background:rgba(0, 0, 0, 0.9);
    color:#fff;
    overflow: auto;
    z-index:2;
}
.pack-splash-overlay .header    {
    padding: 15px 0;
    border-bottom: 1px solid #333;
}
.pack-splash-overlay .close-button  {
    width:70px;
    height:40px;
    border:none;
    border-radius:0;
    background: url('../images/icons/close-pack-icon-white.svg') no-repeat center center;
    background-size:20px 20px;
}
.pack-splash-overlay .modal-title   {
    font-size:2em;
    width:auto;
    height:40px;
    margin:0 !important;
    display: flex;
    justify-content: left;
    align-items: center;
}
.pack-splash-overlay .pack-splash-details   {
    padding:20px;
}
.pack-splash-overlay .blurb {
    padding: 0 20px;
    margin: 0 0 30px 0;
    opacity: 0.7;
    max-width: 600px;
    font-size: 1.1em;
    line-height: 1.4em;
}
.modal-inner.pack-splash    {
    overflow: hidden;
}
.pack-splash .blurb p   {
    padding:0;
    margin:0;
}
.pack-splash-details .category, .pack-splash-details .sub-category    {
    width:auto;
    height:28px;
    font-family: 'ca_slalombold' !important;
    font-size:0.85em;
    padding:5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pack-splash-details .sub-category  {
    padding:5px 10px 5px 0;
}
.pack-splash-details .category  {
    border-radius: 0;
    margin:0 0 0 5px;
    padding-right:0;
}
.pack-splash-details .category::after   {
    content:'>';
    padding:0 10px;
}
.pack-splash-details .amount    {
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #aaa;
    border-radius: 5px;
    margin: 0 10px 0 0;
}
.layouts-list   {
    height:auto;
    overflow-x: auto;
    margin:0 0 30px 0;
}
.layouts-list-inner {
    display: flex;
    justify-content: left;
    align-items: center;
    padding:0 20px;
}
.layouts-list-inner .pack-item    {
    margin: 0 10px 0 0;
    border-radius: 15px;
    color: #fff;
    transform-origin: center center;
    transform: scale(1);
    transition: all 0.2s ease;
    cursor: pointer;
}
.layouts-list-inner .pack-item:hover    {
    transform: scale(0.98);
}
.layouts-list .pack-item div:first-child    {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.layouts-list .pack-item div:first-child img {
    height: auto;
    width: 250px;
    border-radius: 15px;
}
.layouts-list .pack-item div:nth-child(2)    {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 20px 10px;
    font-family: 'ca_slalomregular';
    overflow: hidden;
    font-size:1.1em;
}
.layouts-list .pack-item div:nth-child(3)    {
    display: flex;
    justify-content: center;
    align-items: center;
}
.layouts-list .pack-item div:nth-child(3) .button    {
    background: #fff;
    color: var(--brand-main-color);
    font-family: 'ca_slalombold';
    font-size: 1em;
    padding: 15px 15px;
    border-radius: 0 0 15px 15px;
    height: auto;
    width: 100%;
    border-top: 1px solid var(--brand-pale-color);
}
.not-added  {
    opacity:0.6;
}
.add-to-favourites-button   {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    right: 20px;
    left: initial;
    float: right;
    border: 1px solid #ffe6ae;
}
.add-to-favourites-button img   {
    width:20px;
    height:20px;
}
.add-to-favourites-button span  {
    width:auto;
    color:var(--brand-text-color);
}
.added-to-favourites-button {
    border:1px solid var(--brand-yellow);
    opacity:1;
}

@media only screen and (min-width:200px)    {
    .swipe-panel-icon-wrapper .layout-count {
        position: absolute;
        float: initial;
        top: 0;
        left: 40px;
        width: 25px;
        height: 25px;
        border-radius: 0 3px 3px 0;
        background: var(--brand-pale-color);
        color: var(--brand-main-color);
        font-size: 0.85em;
        font-family: 'ca_slalombold';
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
    }
    .standard-panel .layout-count   {
        top:10px;
        right:10px;
    }
}
@media only screen and (min-width:768px)    {
    .swipe-panel-icon-wrapper .layout-count {
        /* position: absolute;
        float:initial;
        top:15px;
        right:0px;
        width: 25px;
        height:25px; */
    }
}

/*------------------------------------------------
12.31. Tiers
------------------------------------------------*/
.tier-tag.free    {
    background: #fff;
    color: var(--brand-main-color);
}
.tier-tag.plus    {
    background:var(--tier-plus-fill);
    color:var(--tier-plus-text);
}
.swipe-panel-icon-wrapper .tier-tag, .instant-search-result .tier-tag, .last-opened-layout .tier-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    font-size: 0.7em;
    line-height: 13px;
    font-family: 'ca_slalombold';
    text-transform: capitalize;
    padding: 2px 5px 1px 5px;
    border-radius: 3px 0 0 3px;
    z-index: 1;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.standard-panel .swipe-panel-icon-wrapper .tier-tag {
    top:10px;
    left:10px;
}
.instant-search-result .tier-tag    {
    top:5px;
}
.last-opened-layout .tier-tag   {
    left:35px;
}

/*------------------------------------------------
12.32. Last opened
------------------------------------------------*/
.last-opened-layout {
    padding:0 20px;
    margin:0 0 20px 0;
    cursor:pointer;
}
.last-opened-layout img  {
    border-radius: 5px;
}
.last-opened-layout span    {
    padding:10px 0;
}


/*------------------------------------------------
12.33. Watermark
------------------------------------------------*/
#watermark  {
    position: absolute;
    float:initial;
    top:20px;
    right: 20px;
    width:auto;
    z-index:999;
    opacity:0.7;

    /* Disable pull down to refresh */
    overscroll-behavior: none;
    touch-action:manipulation;
}

/*------------------------------------------------
12.34. Loaders
------------------------------------------------*/
.spinning-loader    {
    width:100%;
    height:100%;
    min-height:100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.spinning-loader .spinner    {
    background:var(--brand-main-color);
    height:25px;
    width:25px;
    border-radius:25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: bottom center;
    animation: spinningLoaderAnimation 2s ease infinite;
}
.spinning-loader .node    {
    background:var(--main-theme-color);
    width:10px;
    height:10px;
    border-radius:5px;
}

/*------------------------------------------------
12.35. Verififcation
------------------------------------------------*/
.verification-modal {
    position: fixed;
    top: 100px;
    float: initial;
    right: 20px;
    width: 320px;
    background: var(--brand-pale-color);
    z-index: 999;
    padding: 20px;
    border: 1px solid var(--brand-main-color);
    border-radius: 10px;
}
.verification-modal .modal-title    {
    font-size:1em;
    margin:0 0 5px 0;
}
.verification-modal .filled-button {
    margin:10px 0 0 0;
}
.verification-modal .close-drawer-button    {
    top:5px;
    right:5px;
}

/*------------------------------------------------
12.36. Cards
------------------------------------------------*/
.card   {
    background: var(--brand-yellow);
    padding: 25px;
    border-radius: 15px;
    background-repeat:no-repeat !important;
    background-size:cover !important;
    background-position: bottom right !important;
}
.card span  {
    font-family: 'ca_slalombold';
    font-size: 1.3em;
    margin: 0 0 10px 0;
}
.card p {
    margin: 0 0 10px 0;
}
.card .button   {
    width: auto;
    background: var(--brand-text-color);
    color: #fff;
    padding: 8px 18px;
    border-radius: 35px;
    font-family: 'ca_slalombold';
}

@media only screen and (min-width:200px)    {
    .cards-flow {
        padding:0 20px;
    }
    .cards-flow .card    {
        margin: 0 2% 2% 0;
        width: 100%;
        max-width: initial;
        background: var(--main-theme-color);
        background-size: cover;
        /* box-shadow: 0 0 10px var(--brand-border-color); */
        border:1px solid var(--brand-border-color)
    }
}
@media only screen and (min-width:768px)    {
    .cards-flow .card    {
        margin: 0 2% 2% 0;
        width: 49%;
    }
    .cards-flow .card:nth-child(2n)    {
        margin:0 0 2% 0;
    }
}
@media only screen and (min-width:1080px)    {
    .cards-flow .card    {
        margin: 0 2% 2% 0;
        width: 32%;
    }
    .cards-flow .card:nth-child(2n)    {
        margin:0 2% 2% 0;
    }
    .cards-flow .card:nth-child(3n)    {
        margin:0 0 2% 0;
    }
}
@media only screen and (min-width:1280px)    {
    .cards-flow .card    {
        margin: 0 2% 2% 0;
        width: 23.5%;
    }
    .cards-flow .card:nth-child(2n), .cards-flow .card:nth-child(3n)    {
        margin:0 2% 2% 0;
    }
    .cards-flow .card:nth-child(4n)    {
        margin:0 0 2% 0;
    }
}

.home-colours-card  {
    background:var(--guidance-panel-pale-green) url('../images/card-background-home-colours.svg');
}
.away-colours-card  {
    background:var(--guidance-panel-pale-blue) url('../images/card-background-away-colours.svg');
}
.club-video-card  {
    background:#D9FFD9 url('../images/card-background-club-video.svg');
}
.club-photo-card  {
    background:#FC8C65 url('../images/card-background-club-photo.svg');
}
.sponsors-logos-card    {
    background:var(--guidance-panel-peach) url('../images/card-background-sponsors-logos.svg');
}
.club-badge-card    {
    background:var(--brand-pale-color) url('../images/card-background-club-badge.svg');
}
.plus-badge-card    {
    background:var(--brand-pale-color) url('../images/card-background-club-badge.svg');
    animation: plusPulse 3s ease infinite;
}

.plus-badge-card .button    {
    background: var(--tier-plus-fill);
    color:#000;
}

.plus-badge-card .requested {
    background:orange;
    padding:10px;
    border-radius:50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'ca_slalombold';
}
.plus-badge-card .active {
    background:var(--brand-tertiary-color);
    padding:10px;
    border-radius:50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'ca_slalombold';
}

.the-basics-card    {
    background:var(--brand-yellow) url('../images/card-background-the-basics.svg');
}
.club-socials-card  {
    background:var(--guidance-panel-peach-dark) url('../images/card-background-club-socials.svg');
}

/*------------------------------------------------
12.37. Pagination
------------------------------------------------*/
.pagination-wrapper {
    overflow: auto;
    margin:30px 0 0 0;
}
.pagination-wrapper .gradient   {
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    height: 30px;
    width: 30px;
    z-index: 1;
    position: absolute;
}
.pagination-wrapper .gradient:last-child   {
    left:initial;
    right:0;
    float:initial;
}
.pagination-wrapper ul  {
    padding:0;
}
.pagination-wrapper ul li   {
    width: 30px;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px 0 0;
    height: 30px;
    border-radius: 15px;
    font-family:'ca_slalombold';
}
.pagination-wrapper ul li.button.selected   {
    background:var(--brand-pale-color);
    color:var(--brand-main-color);
    border:1px solid var(--brand-main-color);
}

/*------------------------------------------------
12.38. Gating
------------------------------------------------*/
.tier-gate  {
    position: fixed;
    left:0;
    background:rgba(0, 0, 0, 0.7);
    height:100%;
    padding:0 5%;
    overflow: auto;
    z-index:9999;
}
@media only screen and (min-width:200px)    {
    .tier-gate .gate-inner  {
        background: var(--main-theme-color);
        padding: 30px;
        max-width:600px;
        border-radius:10px;
    }
    .tier-gate .gate-inner .modal-title {
        background: url('../../images/hero-gradient.svg') no-repeat center center;
        background-size: cover;
        background-clip: text;
        color: transparent;
        text-shadow: none;
        font-size: 1.5em;
        line-height: 1.3em;
    }
    .tier-gate .gate-inner .offer, .modal-inner .offer   {
        background: var(--brand-yellow);
        margin: 0 0 20px 0;
        padding: 20px 25px;
        border-radius: 5px;
    }
    .tier-gate .gate-inner .offer .name, .modal-inner .offer .name {
        font-size:1.2em;
        margin:0 0 10px 0;
        text-align: center;
        width:100% !important;
    }
    .tier-gate .gate-inner .offer .code, .modal-inner .offer .code {
        background: #fff;
        padding:15px;
        border-radius: 5px;
        text-align: center;
        border: 1px dotted var(--brand-main-color);
    }
    .tier-gate .gate-inner .offer .description, .modal-inner .offer .description  {
        text-align: center;
        margin: 0 0 10px 0;
    }
}
@media only screen and (min-width:768px)    {
    .tier-gate .gate-inner  {
        background: var(--main-theme-color);
    }
}

.tier-gate .gate-inner .pricing-matrix  {
    margin:20px 0 !important;
    padding:0 !important;
}
.tier-gate .gate-inner span.upgrade-blurb   {
    line-height: 1.6em;
    margin-bottom: 20px;
}
.tier-gate .gate-inner .filled-button    {
    margin:0 0 10px 0;
}
.tier-banner    {
    /* background: var(--main-theme-color); */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    /* width: calc(100% - 35px); */
    color: #fff;
    font-family: 'ca_slalombold';
}
.tier-banner .button a    {
    color:#fff;
}
.upgrade-inline-banner  {
    background: var(--brand-pale-color);
    color: var(--brand-main-color);
    font-family: 'ca_slalombold';
    padding: 5px 10px;
    border-radius: 3px;
    text-align: center;
    border: 1px solid var(--brand-main-color);
}
@media screen and (min-width:200px) {
    .exports-remaining-banner   {
        padding:0 20px;
        margin:0 0 20px 0;
        font-size:0.9em;
    }
    .exports-remaining-banner .inner {
        border:1px solid var(--brand-main-color);
        border-radius:5px;
        min-height:50px;
        padding:20px 20px;
        background:var(--brand-pale-color);
         
    }
    .exports-remaining-banner .inner .six-columns   {
        width:100%;
    }
    .exports-remaining-banner span  {
        margin:0 0 10px 0;
    }
    .exports-remaining-banner .button   {
        width: auto;
        font-family: 'ca_slalombold';
        font-size:1em;
        border-radius:50px;
        background:var(--brand-main-color);
        color:#fff;
        text-decoration: none;
        float: left;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 30px;
    }
}
@media screen and (min-width:768px) {
    .exports-remaining-banner .inner    {
        padding:10px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .exports-remaining-banner span  {
        margin:0;
    }
    .exports-remaining-banner .button   {
        float:right;
        font-size: 1em;
    }
}

.blocker    {
    position: fixed;
    left:0;
    height:100%;
    background:rgba(0, 0, 0, 0.8);
    z-index:104;
}
.verification-blocker    {
    position:absolute;
    left:0;
    height:100%;
    background:var(--brand-pale-color);
    color:var(--brand-text-color);
    padding:20px;
    z-index:104;
    display: flex;
    justify-content: center;
    align-items: center;
}
.verification-blocker > div {
    padding:30px;
    background:var(--main-theme-color);
    border:1px solid var(--brand-pale-color);
    border-radius:10px;
    max-width:420px;
}
.verification-blocker .logo {
    border-bottom:1px solid var(--brand-pale-color);
    text-align: center;
    padding:0 0 20px 0;
    margin:0 0 10px 0;
}
.verification-blocker .logo img {
    max-width:100px;
}
.verification-blocker .filled-button    {
    margin:20px 0 0 0;
}
@media screen and (min-width:200px) {
    .inline-plus-gate   {
        background: url(../images/welcome-banner-background-mobile.png) no-repeat center center;
        display: block;
        padding: 20px 30px;
        border-radius: 10px;
        background-size: cover;
        border: 1px solid var(--brand-border-color);
        text-align:center;
    }
    .inline-plus-gate .six-columns  {
        width:100%;
    }
    .inline-plus-gate p {
        font-family: var(--font-headings);
        padding:0 0 10px 0;
        text-align:center;
        font-size:1.3em;
    }
    .inline-upgrade-prompt  {
        width: 100%;
        height: auto;
        background: var(--main-theme-color);
        border-radius: 5px;
        border: 1px solid var(--brand-text-color);
        padding: 30px 0;
    }
    .inline-upgrade-prompt div  {
        padding: 0px 20px;
    }
    .inline-upgrade-prompt .thumbs  {
        height: 40px;
        padding: 0;
        margin: 0 0 30px 0;
    }
    .inline-upgrade-prompt .thumbs img  {
        height:40px;
        width:auto;
    }
    .inline-upgrade-prompt p:first-of-type   {
        font-size: 1.7em;
        line-height: 1.1em;
        margin: 0 0 15px 0;
        font-family: 'Maghelia';
    }
    .inline-upgrade-prompt a.button  {
        padding:0 20px;
        margin:20px 0 0 0;
        height:40px;
        background: var(--brand-text-color);
        border-radius: 5px;
        color:#fff;
        font-family: var(--font-headings);
        font-size:1.2em;
        text-decoration: none;
    }
}
@media screen and (min-width:768px) {
    .inline-plus-gate   {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: initial;
    }
    .inline-plus-gate .six-columns  {
        width:50%;
    }
    .inline-plus-gate p {
        padding:0 0 10px 0;
        text-align:left;
    }
    .inline-upgrade-prompt  {
        width:49%;
        height:300px;
    }
    .inline-upgrade-prompt div  {
        padding:40px;
    }
    .inline-upgrade-prompt .thumbs  {
        height: 60px;
        padding: 0;
        margin: 0 0 30px 0;
    }
    .inline-upgrade-prompt .thumbs img  {
        height:60px;
        width:auto;
    }
    .inline-upgrade-prompt p:first-of-type   {
        font-size: 1.7em;
        margin: 0 0 10px 0;
        font-family: 'Maghelia';
        line-height: 1em;
    }
}


/*------------------------------------------------
12.39. Tier cards
------------------------------------------------*/
.current-tier-card  {
    box-shadow: 0 0 10px var(--brand-border-color);
    border-radius:10px;
    background:var(--main-theme-color);
}
.current-tier-card.plus {
    /* border:1px solid var(--tier-plus-fill); */
}
.current-tier-card span.plus    {
    background: var(--tier-plus-fill);
    width: auto;
    padding: 3px 7px;
    border-radius: 3px 0 0 3px;
    font-family: 'ca_slalombold';
}
.current-tier-card span.free    {
    background: var(--tier-free-fill);
    color: var(--tier-free-text);
    width: auto;
    padding: 3px 7px;
    border-radius: 3px;
    font-family: 'ca_slalombold';
}

.menu .current-tier-card    {
    margin:20px 0 0 0;
    /* padding:10px 20px; */
}
.current-tier-card .tier-header {
    background: url('../images/welcome-banner-background-mobile.png') no-repeat center center;
    background-size:cover;
    border-radius: 10px 10px 0 0;
    padding:20px;
}
.current-tier-card .tier-header > div > div {
    width:100%;
    display: flex;
    justify-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.current-tier-card .tier-header span    {
    text-align: center;
}
.current-tier-card .sub-status  {
    width:auto;
    padding: 3px 7px;
    text-transform: capitalize;
    font-size: 1em;
    font-style: italic;
    border-radius: 0 3px 3px 0;
}
.current-tier-card .sub-status.trialing  {
    background:var(--brand-pale-color);
}
.current-tier-card .sub-status.active  {
    background:var(--brand-tertiary-color);
}
.current-tier-card .cancellation-status {
    background: #ff8a8a;
    padding: 11px;
    font-size: 0.9em;
    border-radius: 0 0 10px 10px;
    margin: 0;
}
.button-wrapper  {
    padding:10px 20px;
}
.upgrade-button-outline  {
    border: 2px solid var(--tier-plus-fill);
    padding: 2px;
    border-radius: 100px;
    animation: attentionAnimation 2s ease infinite;
}
.upgrade-button  {
    transform: scale(1);
    transform-origin: center center;
    text-align: center;
    font-family:'ca_slalombold';
    text-decoration: none;
    width: 100%;
    background: var(--tier-plus-fill);
    padding: 10px;
    border-radius: 95px;
    margin:0;
}

/*------------------------------------------------
12.40. Banners
------------------------------------------------*/
.slim-banner    {
    background: var(--brand-yellow);
}
@media only screen and (min-width:200px)    {
    .slim-banner    {
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slim-banner p, .slim-banner span  {
        width:auto;
        font-size:0.85em;
    }
    .slim-banner p  {
        margin:0 10px 0 0;
        font-family: 'ca_slalombold';
        line-height:14px;
    }
    .slim-banner span  {
        width:auto;
        font-size: 1em;
        background: var(--brand-main-color) url('../images/icons/');
        color: #fff;
        padding: 7px 11px;
        margin: 0;
        border-radius: 50px;
        display: flex;
        align-items: center;
        height: 30px;
        text-align: center;
    }
    .slim-banner span img   {
        width:15px;
        height:15px;
        margin:0 5px 0 0;
    }
}
@media only screen and (min-width:768px)    {
    .slim-banner    {
        top:20px;
        padding:10px 20px;
        display: flex;
        align-items: center;
    }
    .slim-banner p, .slim-banner span  {
        width:auto;
        font-size:1em;
    }
    .slim-banner span   {
        margin:0;
    }
    .slim-banner p  {
        margin:0 20px 0 0;
    }
}

/*------------------------------------------------
12.41. Log in overlay
------------------------------------------------*/
.log-in-overlay {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:999;
}
.log-in-form    {
    width:360px;
    height:auto;
    background:var(--main-theme-color);
    padding:50px 25px 25px 25px;
    overflow:auto;
    border-radius:10px;
}
.log-in-form h1 {
    margin:0;
}
.log-in-form span   {
    font-family: 'ca_slalombold';
    margin:0 0 10px 0;
}
.log-in-form input[type="email"], .log-in-form input[type="password"]   {
    margin: 0 0 10px 0;
    padding: 15px;
    border: 1px solid var(--brand-main-color);
}
.log-in-splash  {
    width:calc(100% - 360px);
    height:100%;
    background:var(--brand-main-color);
}
.sign-up-cta    {
    margin:30px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sign-up-cta p, .sign-up-cta a  {
    width:auto;
}
.brand {
    margin: 0 0 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.brand img {
    width: 120px;
}

/*------------------------------------------------
12.44. Offer banners and modals
------------------------------------------------*/
@media screen and (min-width:200px) {
    .offer-modal   {
        position: fixed;
        top: initial;
        float: initial;
        height: 100%;
        padding: 0 2%;
        background:rgba(0, 0, 0, 0.8) url('../images/offer-modal-background.jpg') no-repeat center center;
        background-size:cover;
        color: var(--brand-text-color);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
    }
    .offer-modal .inner {
        background: var(--main-theme-color);
        border-radius:10px;
        max-width:420px;
        padding:25px;
    }
    .offer-modal .inner img {
        max-width:100px;
    }
    .offer-modal .inner .six-columns:first-child    {
        display: flex;
        justify-content: center;
        align-items: center;
        padding:20px;
        width:95%;
    }
    .offer-modal .inner .six-columns:last-child    {
        background:url('../images/modal-offer-background.jpg') no-repeat center center;
        background-size:cover;
        border-radius:0 10px 10px 0;
        width:5%;
    }
    .offer-modal .name  {
        font-size: 1.3em;
        font-family: 'ca_slalombold';
        margin: 20px 0 10px 0;
        text-align: center;
        line-height: 1.1em;
    }
    .offer-modal .code  {
        border: 1px dashed var(--main-theme-color);
        background: var(--brand-pale-color);
        width: 100%;
        padding: 15px;
        border-radius: 5px;
        color:var(--brand-main-color);
        font-size: 0.9em;
        line-height: 1.3em;
        text-align: center;
    }
    .offer-modal .description   {
        margin:15px 0 25px 0;
        font-size:0.9em;
        text-align:center;
    }
    .offer-modal .dismiss   {
        margin:20px 0 0 0;
        width:100%;
        text-decoration: underline;
        text-align:center;
    }

    .offer-banner   {
        background: var(--brand-yellow);
        padding: 15px 25px;
        display: block;
    }
    .offer-banner .eight-columns   {
        height: 100%;
        margin: 0 0 10px 0;
        font-size: 1em;
        line-height: 1.5em;
    }
    .offer-banner a.button   {
        text-decoration: none;
        background: var(--brand-main-color);
        color: #fff;
        float: left;
        padding: 8px 24px;
        font-size: 0.9em;
        font-family: 'ca_slalombold';
        border-radius: 5px;
    }
}
@media screen and (min-width:420px) {

}
@media screen and (min-width:768px) {
    .offer-modal    {
        padding:0 5%;
    }
    .offer-modal .inner {
        padding:30px;
    }
    .offer-modal .inner img {
        max-width:120px;
    }
    .offer-modal .inner .six-columns    {
        height:100%;
    }
    .offer-modal .inner .six-columns:first-child    {
        padding:70px 40px;
        width:70%;
    }
    .offer-modal .inner .six-columns:last-child    {
        width:30%;
        display: block;
    }
    .offer-modal .name  {
        font-size: 1.5em;
        margin: 20px 0 15px 0;
        line-height: 0.9em;
    }
    .offer-modal .code  {
        font-size: 1.1em;
        padding: 15px;
    }
    .offer-modal .description   {
        margin: 20px 0;
        font-size: 1.1em;
        line-height:1.5em;
    }

    .offer-banner   {
        padding: 15px 35px;
        display: flex;
        align-items: center;
    }
    .offer-banner .eight-columns   {
        margin:0;
    }
    .offer-banner a.button   {
        float: right;
    }
}
@media screen and (min-width:1024px) {
    .offer-modal .inner .six-columns:first-child    {
        padding:100px 50px;
        width:70%;
    }
    .offer-modal .inner .six-columns:last-child    {
        width:30%;
    }
    .offer-modal .name  {
        font-size: 1.6em;
        margin: 20px 0 15px 0;
        line-height: 1.1em;
    }
    .offer-modal .code  {
        font-size:1em;
        padding:20px;
    }
    .offer-modal .description   {
        margin: 15px 0;
        font-size: 1.1em;
        line-height: 1.5em;
    }
    .offer-modal .dismiss   {
        margin:20px 0 0 0;
        width:100%;
        text-decoration: underline;
    }
}

.offer-modal .cta   {
    height:40px;
    background:#B7CADB;
    color:var(--brand-text-color);
    font-size:1.4em;
    font-family: var(--font-headings);
    padding:0 20px;
    border-radius:5px;
    text-decoration: none;
}
.offer-modal .close {
    width: 25px;
    height: 25px;
    background: url(../images/icons/close-drawer-icon-white.svg) no-repeat center center;
    background-size: 15px 15px;
    position: absolute;
    top: 10px;
    float: initial;
    right: 10px;
    opacity: 0.7;
}

/*------------------------------------------------
12.45. Suggest a layout
------------------------------------------------*/
.suggest-button {
    position: fixed;
    top: initial;
    bottom: 80px;
    left: initial;
    right: 20px;
    /* width: 40px;
    height: 40px; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding:6px 20px 6px 15px;
    background: var(--main-theme-color);
    border-radius: 20px;
    border: 1px solid var(--brand-main-color);
    color:var(--brand-main-color);
    font-family:'ca_slalombold';
    font-size:0.9em;
    z-index: 4;
}
.suggest-button img {
    width:20px;
    height:20px;
    margin:0 10px 0 0;
}

/*------------------------------------------------
13. News
--------------------------------------------------
13.1. Overlay
------------------------------------------------*/
.news-editor-overlay    {
    width:100%;
    height:100%;
    padding: calc(var(--graphics-editor-navigation-height) * 1.25) 0 calc(var(--graphics-editor-navigation-height) * 2) 0;
    background:var(--graphics-editor-background-color);
    overflow:auto;
    z-index:2;
}
.news-editor-overlay .navigation    {
    position: fixed;
    background:var(--brand-main-color);
    height:var(--graphics-editor-navigation-height);
    overscroll-behavior: none;
    touch-action: none;
    z-index:105;
}
.news-editor-overlay .navigation .button    {
    padding:20px;
    color:#fff;
}
.news-editor-overlay .navigation .publish-button {
    background:var(--brand-tertiary-color);
    color:var(--brand-main-color);
    float: right;
    right:10px;
    display: flex;
    align-items: center;
}
.news-editor-overlay .navigation .publish-button img {
    width:20px;
    height:20px;
}
.news-editor-overlay .navigation .save-as-a-draft-button {
    float: right;
    right: 10px;
    background: var(--brand-pale-color);
    color: var(--brand-main-color);
    padding: 14px;
    margin: 0 10px 0 0;
}
@media only screen and (min-width:200px) {
    .news-editor-overlay .navigation .preview-button {
        float: right;
        right: 20px;
        width: 47px;
        height: 47px;
        background: url(../images/icons/preview-icon.svg) no-repeat center center;
        background-size: 20px 20px;
        border: 1px solid var(--brand-pale-color);
    }
}
@media only screen and (min-width:768px) {
    .news-editor-overlay .navigation .preview-button {
        width: 47px;
        height: 47px;
    }
}
.news-editor-overlay .news-thumbnail-wrapper    {
    display: flex;
    justify-content: center;
    align-items: center;
}
.news-editor-overlay .news-thumbnail    {
    max-width:720px;
    padding:0 20px 20px 20px;
    border:1px solid var(--brand-pale-color);
}
.news-editor-overlay .news-thumbnail .thumbnail-output  {
    border:1px solid #fff;
}
.news-editor-overlay .news-wrapper  {
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0 20px;
}
.news-editor-overlay .news-title    {
    padding:0 20px 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.news-editor-overlay .news-title input {
    max-width:720px;
    margin:0 0 10px 0;
    padding: 15px;
    margin:0;
    border:1px solid var(--brand-border-color);
    font-size: 1.4em;
    font-family: 'ca_slalombold';
    border-radius:5px;
}
.news-editor-overlay .news-meta {
    padding:0 20px 20px;
}
.news-editor-overlay .news-meta .visibility-status {
    width:auto;
}
.news-wrapper .news-post    {
    background:var(--main-theme-color);
    max-width:720px;
    height:100%;
    overflow: auto;
    border-radius:5px;
    padding:20px;
    font-size: 1.3em;
    line-height: 1.2em;
}
.news-wrapper .news-post::selection {
    background: var(--brand-main-color);
    color:#fff;
}

/*------------------------------------------------
13.2. Posts
------------------------------------------------*/
.news-list-row  {
    border-bottom: 1px solid var(--brand-border-color);
    cursor: pointer;
    padding: 15px 0 15px 0;
}
.news-list-row .image {
    width:50px;
    height:50px;
    border-radius:5px
}
@media only screen and (min-width:200px)    {
    .news-list-row div:nth-child(2) {
        width: calc(100% - 50px);
        height: 50px;
        padding: 10px 20px;
        display: flex;
        justify-content: left;
        align-items: center;
        overflow: hidden;
        font-family: 'ca_slalombold';
        font-size: 1em;
    }
}
@media only screen and (min-width:768px)    {
    .news-list-row div:nth-child(2) {
        font-size: 1.2em;
    }
}
.news-list-row div:nth-child(3) {
    position: absolute;
    float: none;
    top: 17px;
    right: 10px;
    width: auto;
    height: 50px;
    display: flex;
    justify-content: left;
    align-items: center;
    text-transform: capitalize;
}

/*------------------------------------------------
14. Animation editor
--------------------------------------------------
14.1. Elements
------------------------------------------------*/
.canvas-container   {
    width:100%;
    height:auto;
}
.animation-canvas-prompt    {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.3);
    z-index: 999;
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    line-height:24px;
    text-align: center;
    cursor:pointer;
    transition:all 0.2s ease;
}
.animation-canvas-prompt > div  {
    background: var(--main-theme-color);
    padding: 30px;
    border-radius: 10px;
}
.animation-canvas-prompt span   {
    padding:0 30px 20px 30px;
}
.animation-canvas-prompt:hover .button    {
    transform:scale(0.975);
    transform-origin: center center;
}

.output-frames-container    {
    position: absolute;
    top:0;
    left:0;
    width:auto;
    height:auto;
    z-index:1000;
}

/*------------------------------------------------
14.2. Tools
------------------------------------------------*/
.animation-tools-tab {
    position: fixed;
    top: initial;
    bottom: 30px;
    height: 60px;
    display: flex;
    z-index: 99;
    justify-content: center;
    align-items: center;
}
.bounce-toolbar {
    animation: bounceToolbar 1s ease 1;
}
.animation-tools-tab .animation-tools-tab-inner {
    background: var(--main-theme-color);
    width:auto;
    border-radius:5px;
    border:2px solid var(--brand-main-color);
}
.animation-tools-tab .tab-button {
    width: 60px;
    height: 60px;
    background-size: 30px 30px !important;
}
.animation-tools-tab .animation-tools-tab-inner .tab-button.tab-button-canvas   {
    background: url('../images/icons/pages-tool-canvas-icon.svg') no-repeat center center;
}
.animation-tools-tab .animation-tools-tab-inner .tab-button.tab-button-image-element   {
    background: url('../images/icons/pages-tool-image-icon.png') no-repeat center center;
}
.animation-tools-tab .animation-tools-tab-inner .tab-button.tab-button-text-element   {
    background: url('../images/icons/pages-tool-text-icon.svg') no-repeat center center;
}
.animation-tools-tab .animation-tools-tab-inner .tab-button.tab-button-club-badge-component   {
    background: url('../images/icons/component-icon-club-badge.svg') no-repeat center center;
}
.animation-tools-tab .animation-tools-tab-inner .tab-button.tab-button-graphics-element   {
    background: url('../images/icons/pages-tool-graphics-icon.svg') no-repeat center center;
}

.animation-tool {
    position: fixed;
    top:initial;
    left:calc(50% - 130px);
    bottom:100px;
    width:260px;
    background:var(--main-theme-color);
    border-radius:10px;
    border:1px solid var(--brand-main-color);
    padding:0 20px 20px;
    z-index:99;
}

.animation-tool .tabs   {
    border-bottom:1px solid var(--brand-border-color);
    margin:0 0 10px 0;
}
.animation-tool .tabs .tab   {
    width: 50%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'ca_slalombold';
    opacity: 0.5;
    font-size: 0.9em;
    line-height: 0;
}
.animation-tool .tabs .tab.active   {
    border-bottom:3px solid var(--brand-main-color);
    opacity:1;
}

.animation-tool label   {
    font-family:'ca_slalombold';
    margin:0 0 5px 0;
}
.animation-tool input   {
    border:1px solid #000;
    margin:0 0 5px 0;
}

.animation-tool .upload-image-wrapper  {
    padding:0;
    margin:0 0 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.animation-tool .upload-image-wrapper img   {
    padding:10px 0;
    margin:0;
}

.animation-tool .size-buttons  {
    margin:0 0 10px 0;
}
.animation-tool .increase-button, .animation-tool .decrease-button    {
    width:50%;
    height:40px;
    border:1px solid var(--brand-pale-color);
}
.animation-tool .increase-button    {
    border-right:none;
    background:url('../images/icons/add-icon.svg') no-repeat center center;
    background-size:17px 17px;
}
.animation-tool .decrease-button    {
    background:url('../images/icons/text-size-icons-decrease.svg') no-repeat center center;
    background-size:17px 17px;
}
.animation-tool .up-button, .animation-tool .down-button, .animation-tool .left-button, .animation-tool .right-button  {
    width:25%;
    height:40px;
    border:1px solid var(--brand-pale-color);
}
.animation-tool .up-button  {
    background:url('../images/icons/element-specific-tools-up-icon.svg') no-repeat center center;
    background-size:30px 30px;
}
.animation-tool .down-button  {
    background:url('../images/icons/element-specific-tools-down-icon.svg') no-repeat center center;
    background-size:30px 30px;
}
.animation-tool .left-button  {
    background:url('../images/icons/element-specific-tools-left-icon.svg') no-repeat center center;
    background-size:30px 30px;
}
.animation-tool .right-button  {
    background:url('../images/icons/element-specific-tools-right-icon.svg') no-repeat center center;
    background-size:30px 30px;
}

.animation-tool .close-drawer-button    {
    top: -15px;
    right: -15px;
    background-color: var(--main-theme-color);
    border: 2px solid var(--brand-main-color);
}

.too-long-message   {
    position:absolute;
    padding:20px;
    background: var(--brand-main-color);
    color:#fff;
    z-index:2;
}