@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --background: #f8f8f8;
    --white: #ffffff;
    --primary: #74bbe4;
    --primary-dark: #216a88;
    --primary-light: #8bd1f0;
    --text: #2a2a2a;
    --input: #666666;
    --border: #999999;
    --placeholder: #cfcfcf;
    --error: #a81818;
    --error-dark: #891414;
}

body{
    margin: 0;
    padding: 0;
    background: var(--background);
    color: var(--text);
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    min-height: 100vh;
    position: relative;
}

h1{
    font-family: Raleway, Helvetica, Arial, sans-serif;
}

header, footer{
    background: var(--primary-dark);
}

header h1{
    color: var(--white);
    font-weight: 500;
    letter-spacing: 0.2rem;
}

header .container, footer .container{
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding: 2rem 0;
    align-items: center;
    gap: 2rem;
}

header .container{
    display: flex;
    justify-content: space-between;
}

header .container > a{
    display: flex;
    align-items: center;
    gap: 2rem;
    text-decoration: none;
}

header .container > nav{
    display: flex;
    align-items: center;
    gap: 5rem;
    color: rgba(250, 250, 250, 0.6);
    font-size: 1.5em;
}

header .container > nav ul{
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 2rem;
    text-align: center;
}

header .container > nav a{
    color: var(--white);
    text-decoration: none;
    box-sizing: border-box;
    border-bottom: 1px solid transparent;
    transition: 0.2s all ease-in-out;
}

header .container > nav a:hover{
    border-bottom: 1px solid var(--white);
}

footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

footer .container{
    justify-content: space-between;
}

footer img{
    max-width: 200px;
}

footer #locale-selector{
    background: var(--primary);
    padding: 0.5rem;
    font-size: 18px;
    color: var(--text);
    border: none;
    min-width: 0;
    box-sizing: border-box;
}

.bubble{
    padding: 1.7rem;
}

.bubble-full{
    background: var(--primary);
    border-radius: 0 15% 15% 15%;
}

.bubble-outline{
    border: 10px solid var(--primary);
    overflow: hidden;
    z-index: 2;
}

main{
    padding-bottom: 280px;
    padding-top: 50px;
}

main .container{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

main .block{
    background: var(--white);
    width:70%;
    padding: 5rem;
    transform: translateY(-5rem);
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.08);
    height: fit-content;
}

.block ol>li{
    margin: 1rem 0;
}

.block h1{
    margin-bottom: 3rem;
    margin-top: 0;
    padding: 0;
    text-transform: capitalize;
}

.drawings{
    margin-top: 18rem;
    position: relative;
    min-height: 10px;
    width: 30%;
    height: 6rem;
}

.drawings *{
    width: 10rem;
    height: 10rem;
    overflow: hidden;
}

.drawings .bubble-outline{
    border-radius: 15% 0 15% 15%;
    position: absolute;
}

.drawings .bubble-outline:first-of-type {
    top: -5rem;
    right: 5rem;
}

.drawings .bubble-outline:last-of-type {
    top: 0;
    right: 10rem;
}

.button{
    text-transform: uppercase;
    font-weight: 600;
    color: var(--white);
    background: var(--primary-light);
    border: none;
    border-radius: 5px;
    padding: 0.75rem;
    text-decoration: none;
    transition: 0.2s all ease-in-out;
}

.button:hover{
    background: var(--primary);
    cursor: pointer;
}

.button-red{
    text-transform: uppercase;
    font-weight: 600;
    color: var(--border);
    background: transparent;
    border: none;
    border-radius: 5px;
    padding: 0.75rem;
    transition: 0.2s all ease-in-out;
    border: 1px solid var(--border);
    box-sizing: border-box;
}

.button-red:hover{
    background: var(--error);
    color: var(--white);
    border: none;
    cursor: pointer;
}

form.code-form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

form.code-form input[type="text"], form select{
    width: 100%;
    padding: 0.5rem;
    font-size: 18px;
    color: var(--input);
    border: 1px solid var(--border);
    min-width: 0;
    box-sizing: border-box;
}

form input[type="submit"]{
    align-self: flex-end;
    margin-top: 1.5rem;
}

input::placeholder{
    color: var(--placeholder);
}

.error{
    color: var(--error);
    border: 1px solid var(--error);
    padding: 0.5rem;
    font-weight: 500;
    border-radius: 0 15px 15px 15px;
    transform: translateY(-5px);
}

.key{
    font-size: 2em;
    border: 1px solid var(--border);
    padding: 1rem;
}

.note{
    margin-top: 5rem;
    color: var(--input);
}


.main-view header img{
    width: 50px;
}

.main-view header .bubble{
    width: 50px;
    padding: 1rem;
}

.main-view main .container{
    display: block;
}

.main-view form label, .body-with-sidebar form label{
    margin-top: 1.5rem;
    display: block;
}

table#datatable{
    border-collapse: collapse;
    width: 100%;
    empty-cells: show;
    overflow-x: auto;
}

table#datatable tr:nth-child(even) td{
    background: lightgray;
}

table#datatable tr td, table#datatable tr th{
    padding: 1rem;
    position: relative;
}

table#datatable tr th{
    border-bottom: 2px solid var(--text);
    text-align: left;
    padding-right: 1.5rem;
}

.body-login{
    background-image: url("../images/tsg-background.png");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.body-error{
    background-image: url("../images/tsg-background.png");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    color: var(--white);
}

.body-error p{
    font-size: 1.5rem;
    font-weight: bold;
}

.body-error img{
    filter: drop-shadow(3px 5px 5px rgb(250 250 250 / 0.7));
    width: 20rem;
}

.body-error .button{
    margin-top: 3rem;
    display: block;
    width: max-content;
}


.body-login > div{
    background: var(--background);
}

.body-login img{
    width: 300px;
}


.google-btn {
    display: block;
    width: 200px;
    height: 42px;
    background-color: #4285f4 !important;
    border-radius: 2px;
    box-shadow: 0 3px 4px 0 rgba(0,0,0,.25);
    margin-top: 2rem;
    transition: 0.2s linear;
}

.google-btn:hover{
    box-shadow: 0 0 6px #4285f4;
    cursor: pointer;
}

.google-btn:active{
    background: #1669F2;
}

.btn-text-google span{
    font-weight: bold;
}

.google-btn .google-icon-wrapper {
    position: absolute;
    margin-top: 1px;
    margin-left: 1px;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    background-color: #fff;
}

.google-btn .google-icon {
    position: absolute;
    margin-top: 11px;
    margin-left: 11px;
    width: 18px;
    height: 18px;
}

.google-btn .btn-text {
    float: right;
    margin: 13px 11px 0 0;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.2px;
    font-family: "Roboto", sans-serif;
}

.body-login .block{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem;
    border-radius: 5px;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.08);
}

#datatable_wrapper{
    display: grid;
    grid-template-areas:
        "a b"
        "c b"
        "d b"
        "e b"
        "f b";
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-columns:auto 400px;
    grid-column-gap: 3rem;
}

.no-border {
    border: 0;
}

.rounded-pill{
    background: gray;
    border-radius: 100px;
    color: var(--white);
    text-align: center;
    font-weight: 500;
}

.dtsp-searchPanes input::placeholder{
    color: var(--text);
    font-weight: bold;
}

.dtsp-searchPanes input{
    color: var(--input);
    font-weight: normal;
}

.dtsp-searchPanes .dtsp-searchPane{
    padding-bottom: 1rem;
    padding-top: 3rem;
    border-bottom: 2px solid var(--primary-light) !important;
}

.btn-group button{
    height: 35px !important;
    width: 35px !important;
}

.btn-group{
    display: flex;
align-items: flex-start;
}

div.dtsp-topRow div input, #datatable_filter input, #datatable_length select
{
    font-size: 18px !important;
    color: var(--input) !important;
    border: 1px solid var(--border) !important;
    padding: 0.5rem !important;
    background: var(--white) !important;
}

tr.selected{
    background: var(--primary) !important;
    font-weight: 600;
}

table.dataTable>tbody>tr.selected>*{
    box-shadow: none !important;
}




#datatable_length{
    grid-area: a;
    display: table;
    padding-bottom: 1rem;
}

#datatable {
    grid-area: d;
    width: 100% !important;
}

.dataTables_info{
    grid-area: e;
}

.dataTables_paginate
{
    grid-area: f;
}

.dataTables_filter{
    grid-area: c;
    text-align: left !important;
}

.dtsp-panesContainer{
    grid-area: b;
    box-sizing: border-box; /* Include padding in the width */
}

#datatable_info{
    display: flex;
    justify-content: center !important;
}

ul.pagination{
    list-style: none;
    margin: 0;
    text-align: left;
    display: flex;
    justify-content: center !important;
    padding:0;
    padding-top: 1rem;
}


.paginate_button a{
    color: var(--text);
    text-decoration: none;
    padding: 0.5rem;
    transition: 0.2s all ease-in-out;
}

.paginate_button a:hover{
    color: var(--primary-dark);
    text-decoration: underline;
}

.paginate_button.active a{
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 0 3px 3px 3px;
    transition: 0.2s all ease-in-out;
}

.paginate_button.disabled a{
    color: #aaaaaa;
}

.paginate_button.disabled:hover a{
    color: #aaaaaa;
    text-decoration: none;
}

.paginate_button.active:hover a{
    background: var(--primary);
    color: var(--white);
    text-decoration: none;
}


.body-with-sidebar > div{
    width: 100%;
}

.body-with-sidebar table{
    height: min-content;
}

.large-buttons{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.large-buttons > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0 10rem;
    text-align: center;
}

.large-buttons img{
    width: 100px;
}

.copyBtn{
    color: var(--border);
    margin-right: 2rem;
    transition: 0.2s all ease-in-out;
}

.copyBtn:hover{
    cursor: pointer;
    color: var(--primary);
}

.popup{
    position: absolute;
    left: 2.5rem;
    top: 50%;
    background: var(--primary-dark);
    color: var(--white);
    padding: 7px;
    border-radius: 0 5px 5px 5px;
    font-size: 13px;
    z-index: 3;
}

@media screen and (max-width: 2100px) {
    .body-with-sidebar{
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 3rem;
    }
}

@media screen and (max-width: 1850px) {
    .body-with-sidebar{
        display: flex;
        flex-direction: column-reverse;
    }

    #datatable_wrapper{
        display: grid;
        grid-template-areas:
        "b"
        "a"
        "c"
        "d"
        "e"
        "f";
        grid-template-rows: auto;
        grid-template-columns:auto;
        grid-column-gap: 3rem;
    }

    .large-buttons{
        grid-template-columns: 1fr;
        grid-gap: 60px;
    }

}

@media screen and (max-width: 1600px) {
    main .block{
        background: none;
        width:90%;
        padding: 5rem;
        transform: translateY(0);
        box-shadow: none;
        height: fit-content;
    }

    .drawings{
        display: none;
    }

    header img{
        width: 50px;
    }

    header .bubble{
        width: 50px;
        padding: 1rem;
    }

    footer img{
        width: 100px;
    }
}