/* GLOBAL ------------------------------------------------------------------- */

    :root {
        --black      : #131426;
        --black2     : #0F0328;
        --black-dk   : #0D0D0D;
        --blue       : #0098F0;
        --blue-pale  : #88B6F2;
        --blue-black : #344767;
        --green      : #00F2A0;
        --grey-lt    : #E1E1E1;
        --grey-md    : #D9D9D9;
        --grey-mdk   : #CCCCCC; /* Mdk : medium dark */
        --grey       : #AAAAAA;
        --grey-dk    : #27293D;
        --orange     : #FFCC31; /* Try not to use it except if really really necessary */
        --purple     : #462391;
        --purple-lt  : #D2BDFF;
        --red        : #D90B31;
        --red-lt     : #F27289;
        --teal       : #4AD9B0;
        --white      : #FDFDFD;
    }

    @font-face {
        font-family : 'ailerons';
        src: url("fonts/Ailerons.otf") format("opentype");
        src: url('fonts/Ailerons.ttf') format('truetype');
        font-style  : normal;
    }

    @font-face {
        font-family : 'morganite';
        font-weight : 300;
        font-style  : normal;
        src : url('/css/fonts/morganite/Morganite-Light.ttf') format('truetype');
    }

    @font-face {
        font-family : 'morganite';
        font-weight : normal;
        font-style  : normal;
        src : url('/css/fonts/morganite/Morganite-SemiBold.ttf') format('truetype');
    }

    @font-face {
        font-family : 'morganite';
        font-weight : bold;
        font-style  : normal;
        src : url('/css/fonts/morganite/Morganite-Bold.ttf') format('truetype');
    }

    @font-face {
        font-family: 'terminator';
        /* src: url('fonts/TERMINAT.TTF') format('truetype'); */
        src: url('/css/fonts/future_earth/future-earth.ttf') format('truetype');
        font-weight : normal;
        font-style  : normal;
    }

    html, body {
        background: transparent;
    }

    .ailerons {
        font-family    : "ailerons";
        letter-spacing : -5px;
    }

    .morg {
        font-family    : 'morganite';
        letter-spacing : 2px;
    }

    /* To make sure it's not under the navbar if the bar is fixed */
    .main-content {
        margin-top: 60px;
    }


    a {text-decoration: none }
    p a { color: var(--red); }


    /* Bootstrap override */
    .text-success { color : var(--green) !important }
    .text-primary { color : var(--purple) !important }


/*
    ALERTS =====================================================================
*/
    .alert.floating-alert {
        background   : white;
        bottom       : 20px;
        border-color : var(--blue-black);
        padding      : 0;
        position     : fixed;
        right        : 20px;
        z-index      : 5000;

        box-shadow: 2px 5px 9px 2px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 2px 5px 9px 2px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 2px 5px 9px 2px rgba(0, 0, 0, 0.5);
    }

    .alert.floating-alert .alert-heading {
        border-bottom : 1px solid var(--blue-black);
        border-radius : 7px 7px 0 0;
        color         : var(--white);
        font-size     : 16px;
        margin        : 0;
        padding       : 10px 30px;
    }

    .alert.floating-alert .alert-content {
        color     : var(--blue-black);
        font-size : 14px;
        margin    : 0;
        padding   : 10px 15px;
    }

    .alert.floating-alert .btn-close {
        background-color : transparent;
        color     : var(--white) !important;
        font-size : 20px;
        opacity   : 1;
        right     : -17px !important;
        top       : -27px !important;
    }

    .alert.floating-alert .btn-close:hover {
        cursor  : pointer;
        opacity : 0.8;
    }

    /* Top part background */
    .alert.floating-alert.alert-danger .alert-heading {
        background: var(--red-lt);
        background: linear-gradient(138deg, var(--red-lt) 0%, rgba(19,20,38,1) 65%);
    }

    .alert.floating-alert.alert-info .alert-heading {
        background: var(--red-lt);
        background: linear-gradient(138deg, var(--blue) 0%, rgba(19,20,38,1) 65%);
    }

    .alert.floating-alert.alert-success .alert-heading {
        background: var(--red-lt);
        background: linear-gradient(138deg, var(--green) 0%, rgba(19,20,38,1) 65%);
    }



/*
    BARS =======================================================================
*/
    .ratio-bar {
        border   : 1px solid var(--black);
        display  : inline-block;
        height   : 12px;
        margin   : 10px 0;
        overflow : hidden;
        width    : 100%;
        border-radius : 10px;

        box-shadow: 1px 2px 3px 0px rgba(19, 20, 0, 0.5);
        -moz-box-shadow: 1px 2px 3px 0px rgba(19, 20, 0, 0.5);
        -webkit-box-shadow: 1px 2px 3px 0px rgba(19, 20, 0, 0.5);
    }

    .ratio-bar .inside-bar {
        display  : inline-block;
        height   : 12px;
        position : relative;
        top      : -8px;
    }

    .ratio-bar .inside-bar.blue {
        background: var(--blue);
    }

    .ratio-bar .inside-bar.green {
        background: var(--green);
    }

    .ratio-bar .inside-bar.red {
        background: var(--red);
    }


/*
    BUTTONS ====================================================================
*/

    /* Danger */
    .btn.btn-outline-danger {
        border-color : var(--red);
        color        : var(--red);
    }

    .btn.btn-outline-danger:hover, .btn.btn-outline-danger:focus {
        background : var(--red);
        color      : #FFF;
    }

    /* Disabled */
    .btn.disabled {
        border-color : var(--grey) !important;
        color        : var(--grey) !important;
    }

    /* Primary */
	.btn.btn-outline-primary {
		border  : var(--purple) 1px solid;
		color   : var(--purple);
	}

	.btn.btn-outline-primary:hover {
		background : var(--purple);
        border     : var(--purple) 1px solid;
		color      : white;
	}

    .btn.btn-outline-primary:focus, .btn.btn-outline-primary:active, .btn.btn-outline-primary:focus:active {
        background-color : var(--purple-lt) ; /* or your desired color */
        border-color     : var(--purple-lt) ;
        box-shadow       : none;
        color            : white;
    }

    /* Success */
    .btn.btn-outline-success {
        border-color : var(--teal); /* green */
        color        : var(--teal);
    }

    .btn.btn-outline-success:hover, .btn.btn-outline-success:focus {
        background : var(--teal); /* green */
        color      : #FFF;
    }


/*
    COUNTRY INPUTS =============================================================
*/

    .country-select.inside input, .country-select.inside input[type="text"] {
        border         : 1px solid var(--bs-gray-400) !important;
        border-radius  : 8px !important;

        /* Besoin de diviser pour override l'existant */
        padding-top    : 5px  !important;
        padding-bottom : 7px  !important;
        padding-left   : 49px !important;
        padding-right  : 0px  !important;
    }



/*
    HEAT MAPS ==================================================================
*/
    .heat-map {
        background-image:  url("../images/quad/12x12.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        height : 100%;
        width  : 100%;
    }

    .heat-map .tile {
        border   : 1px solid rgba(19, 20, 38, 0.2); /* equivalent à var(--black) */
        float    : left;
        height   : 16.66666667%;
        opacity  : 0.9;
        position : relative;
        width    : 16.66666667%;
    }
    .heat-map .tile:hover {
        opacity: 1 !important;
    }

    /*
        Heatmap color :
        #0A0A1E : Deep black
        #4B214B : Deep Purple
        #AA2855 : Bordeau
        #E16450 : Orange
        #F6E6D8 : White
    */


/*
    ICONS
*/

    /* Clickable Icons */

        .clickable-icon:hover {
            color  : var(--red);
            cursor : pointer;
        }


    /* Flags Icons */

        .sm-flag-icon {
            height: 18px;
            margin: -4px 3px 0 0;
        }

        .md-flag-icon {
            height     : 24px;
            margin-top : 8px;
        }

        .sort-icon:hover {
            color  : var(--blue);
            cursor : pointer;
        }


    /* Sort Icons */

        .sort-icon.double {
            margin-left : -18px;
            position    : absolute;
        }

        .sort-icon.double.bi-caret-up {
            margin-top : -6px;
        }

        .sort-icon.double.bi-caret-down {
            margin-top : 6px;
        }



/*
    LIST GROUPS COLOR BUTTONS
    1 - Danger
    2 = Info
*/
    .list-group-item.bg-danger,  .list-group-item.bg-info, .list-group-item.bg-success {
        color: #FFF;
    }

    .list-group-item.bg-danger.active, .list-group-item.bg-info.active {
        background : #FFF !important;
        border     : 1px solid #FFF;
    }

    .list-group-item.bg-danger.active {
        color : #DC3545;
    }

    .list-group-item.bg-info.active {
        color : #0dcaf0;
    }

    .list-group-item.active {
        cursor: pointer;
    }



/*
    LOADERS ====================================================================
*/

    /* For every loaders */
    .loading-area {
        min-height     : 40px;
        padding-bottom : 10px;
        padding-left   : calc(50% - 24px);
        padding-top    : 10px;
        position       : relative;
        width          : 100%;
    }

    /* Circular loaders */
    .circular-loader {
        display  : inline-block;
        height   : 48px;
        position : relative;
        width    : 48px;
    }

    .circular-loader::after, .circular-loader::before {
        content: '';
        border        : 2px solid #FFF;
        border-radius : 50%;
        box-sizing    : border-box;
        height        : 48px;
        left          : 0;
        opacity       : 0;
        position      : absolute;
        top           : 0;
        width         : 48px;
        animation     : circle-load 3s linear infinite;
    }
    .circular-loader::after {
        animation-delay: 1.5s;
    }

    @keyframes circle-load {
        0% {   transform: scale(0); opacity: 1; }
        100% { transform: scale(1); opacity: 0; }
    }



    /* Three squares going into circle --------------------------------------- */

        .squares-loader.active {
            animation : rolling 1.2s infinite;
            aspect-ratio: 1;
            --g1 : conic-gradient(from  90deg at 3px  3px , var(--black) 90deg, var(--white) 0);
            --g2 : conic-gradient(from -90deg at 10px 10px, var(--black) 90deg, var(--white) 0);
            background        : var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
            background-size   : 8px 8px;
            background-repeat : no-repeat;
            position          : absolute;
            right             : 15px;
            top               : 11px;
            width             : 18px;
            z-index           : 10;

            transition-timing-function : ease-in;
        }

        /* Inverted animation */
        .squares-loader.white.active {
            animation : rolling 1.2s infinite;
            aspect-ratio: 1;
            --g1 : conic-gradient(from  90deg at 3px  3px , var(--white) 90deg, var(--white) 0);
            --g2 : conic-gradient(from -90deg at 10px 10px, var(--white) 90deg, var(--white) 0);
            background        : var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
            background-size   : 8px 8px;
            background-repeat : no-repeat;
            position          : absolute;
            right             : 15px;
            top               : 11px;
            width             : 18px;
            z-index           : 10;

            transition-timing-function : ease-in;
        }

        .squares-loader.centered {
            right : calc(50% - 9px);
        }

        /* when inside buttons */
        .btn .loader-area {
            height   : 25px;
            position : relative;
            width    : 75px;
        }

        .btn .loader-area .squares-loader.active {
            right : 28px;
            top   : 2px;
        }

        @keyframes rolling {
            0%   {background-position:0    0   ,0 100%,100% 100% }
            25%  {background-position:100% 0   ,0 100%,100% 100% }
            50%  {background-position:100% 0   ,0 0   ,100% 100% }
            75%  {background-position:100% 0   ,0 0   ,0    100% }
            100% {background-position:100% 100%,0 0   ,0    100% }
        }



/*
    LOGOS
*/
    .logo, .logo-xs, .logo-sm, .logo-md, .logo-lg {
        display      : block;
        margin-left  : auto;
        margin-right : auto;
    }

    .logo    { max-height : 40px; }
    .logo-xs { height:auto; width:45px; }
    .logo-sm { height:auto; width:60px; }
    .logo-md { height:auto; width:80px; }
    .logo-lg { height:auto; width:100px; }

    .logo img, .logo-xs img, .logo-sm img, .logo-md img, .logo-lg img {
        max-width: 100%;
    }



/*
    NAVS =======================================================================
*/
    .main-nav {
        background    : var(--white);
        border-bottom : 1px solid #BBB;
        box-shadow    : var(--bs-box-shadow-sm) !important;
        padding       : 6px 10px 4px 10px;
    }

    .nav-item a, .navbar-toggle, .navbar-brand {
        font-family    : "ailerons";
        font-size      : 18px;
        letter-spacing : -4px;
    }

    .navbar-brand:hover {
        cursor : pointer;
    }

    .navbar .navbar-logo {
         height : 30px;
         margin : 0px -5px 0 25px;
    }

    .logout-btn {
        margin-top : -5px;
    }

    /* Turn the links in red when hover */
    .main-nav .nav-link:hover, .main-nav .nav-item:hover {
        cursor : pointer;
        color  : var(--red) !important;
    }


    /* BLACK VERSION */

        .main-nav.black {
            background    : #000;
            border-bottom : 1px solid #111111;
        }

        .main-nav.black .navbar-brand, .main-nav.black .navbar-toggler, .main-nav.black .nav-link {
            color: var(--white);
        }


    /* DARK VERSION */

        .main-nav.dark { background: var(--black); }

        .main-nav.dark .navbar-brand, .main-nav.dark .navbar-toggler, .main-nav.dark .nav-link {
            color: var(--white) !important;
        }






/*
    QR CODES ===================================================================
*/
    .qr-code.centered {
        margin-left: 23%;
    }



/*
    PROGRESS BARS ==============================================================
*/
    .progress-container.medium .progress {
        height: 10px;
    }

    .progress-container.thin .progress {
        height: 5px;
    }

    .progress-container .winrate {
        font-size : .62475rem;
        margin    : -4px 0 -10px 0;
    }

    .progress-container .average-time {
        font-size : .62475rem;
        margin    : 1px 0 -3px 0;
    }

    .progress-container .progress {
        background-color : rgba(200, 200, 200, .3);
        border-radius    : .85rem;
        box-shadow       : 0 0 0 1px rgba(0,0,0,.4);
        display          : flex;
        font-size        : .65625rem;
        height           : 10px;
        margin-top       : 15px;
        overflow         : hidden;
        width            : 100%;
    }


/*
    Subtitles
*/
    .subtitle {
        color          : #999;
        font-size      : 0.85rem;
        margin-top     : -5px;
        text-transform : uppercase;
        font-weight    : 300;
    }

    .subtitle.white {
        color : #FFF;
    }

/*
    Texture
*/

    .black-lines {
        background-color: #000000;
        opacity: 0.1;
        background-size: 32px 32px;
        background-image:  repeating-linear-gradient(to right, #ffffff, #ffffff 1.6px, #000000 1.6px, #000000);
    }


/*
    SEARCH && TEAMS INPUTS =====================================================
*/
    /* SEARCH INPUT */

        .search-dropdown.dropdown-menu {
            border       : 1px solid;
            border-color : var(--grey-md);
            display      : none;
            margin-top   : 43px;
        }

        .search-dropdown.dropdown-menu.active {
            display: inline-block;
        }

        .search-dropdown.dropdown-menu li {
            padding: 10px 15px;
        }

        .search-dropdown.dropdown-menu li:hover {
            background : var(--grey-dk);
            color      : white;
            cursor     : pointer;
        }

    /* TEAM INPUT */

        .teams-input {
            margin    : auto;
            max-width : 300px;
        }

        .teams-input .btn-success, .sqrd-search-dropdown .btn-success {
            background : rgb(85, 180, 95);
        }


    /* BOTH */

        .search-dropdown.dropdown-menu, .teams-dropdown.dropdown-menu {
            max-height : 200px;
            overflow   : auto;
            width      : 280px;
        }

        .search-dropdown.dropdown-menu .inactive, .sqrd-search-dropdown.dropdown-menu .inactive, .teams-dropdown.dropdown-menu .inactive {
            background : #AAA;
            color      : #555;
        }

        .search-dropdown.dropdown-menu .inactive:hover, .search-dropdown.dropdown-menu .dropdown-item.inactive:hover,
        .sqrd-search-dropdown.dropdown-menu .inactive:hover, .sqrd-search-dropdown.dropdown-menu .dropdown-item.inactive:hover,
        .teams-dropdown.dropdown-menu .inactive:hover, .teams-dropdown.dropdown-menu .dropdown-item.inactive:hover {
            background : #AAA !important;
            cursor     : not-allowed;
        }

        .teams-dropdown.dropdown-menu.searching, .sqrd-search-dropdown.dropdown-menu.searching {
            margin-right: -42px !important;
        }

        .search-dropdown.dropdown-menu li.preselected, .sqrd-search-dropdown.dropdown-menu li.preselected, .teams-dropdown.dropdown-menu li.preselected {
            background : var(--grey-md) !important;
        }


/*
    Tooltip
*/
    .tooltp {
        position : relative;
    }

    /* Tooltip text */
    .tooltp .tooltiptext {
        background-color : var(--black);
        border-radius    : 6px;
        color            : #fff;
        display          : none;
        left             : 2%;
        padding          : 5px 0;
        text-align       : center;
        top              : 25%;
        width            : 120px;

        /* Position the tooltip text - see examples below! */
        position         : absolute;
        z-index          : 10;
    }

    .tooltp .tooltiptext.xs {
        font-size : 12px;
        width     : 60px;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltp:hover .tooltiptext {
        display: inline-block;
    }




/*
    vignettes ==================================================================
*/

    .player-vignette {
        background    : var(--black);
        border	      : 1px solid var(--black2);
        border-radius : 5px;
        color         : var(--white);
        display       : inline-block;
        margin		  : 5px;
        padding		  : 15px 8px;
        position	  : relative;
        width	  	  : calc(25% - 10px);
    }

    .player-vignette.white {
        background : var(--white);
        color      : var(--background);
    }

    .player-vignette .name {
        margin-bottom : 0px;
        overflow	  : hidden;
        text-overflow : ellipsis;
        width		  : calc(100% - 18px);
        white-space   : nowrap;
    }

    .player-vignette .remove-player-btn {
        right 	 : 10px;
        top 	 : 12px;
        position : absolute;
    }

    .player-vignette .remove-player-btn:hover {
        cursor : pointer;
        color  : var(--red);
    }