@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);

/* Constants */

:root {
--BlocMargin: 100px;
--BlocPadding: 150px;
--TitleMargin: 40px;
--TitlePadding: 180px;
--SubTitleMargin: 180px;
--SubTitlePadding: 100px;
--Color0: #4a0c73;
--Color1: #00365b;
--Color2: #253b37;
--Color3: #cfe8e2;
--Color4: #28887b;
--Color5: #00b299;
--Color6: #0a5c51;
--Color10: rgba(0, 0, 0, 0.2);
--Color11: rgba(0, 0, 0, 0.1);
}

main{
margin: 3rem;
text-align: -webkit-center;
}


body {
color: white;
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
font-family: "Jost", sans-serif;
background-color: var(--Color2);
}


/* ----------------------------------- */

.title h1 {
height: var(--height-300);
padding-block: var(--TitlePadding);
padding-inline: var(--TitlePadding) 20px;
font-size: var(--font-size-80);
}


/* ----------------------------------- */

/*  Tables */
.currentSurveys {
margin: var(--margin-50);
}

h2 {
font-size: max(2.5vw, 25px);
color: #fff;
font-weight: 300;
padding: 20px 20px;
margin: auto;
background-color: var(--Color6);
border-color: var(--Color2);
border-bottom: 0.1px solid;
border-collapse: separate;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
-moz-border-top-left-radius: 6px;
-moz-border-top-right-radius: 6px;
}

a {
text-decoration: none;
color: white;
}

.styled-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
overflow-x: auto;
}

.tableFixHead {
overflow-y: auto;
height: var(--height-300);
}

.tableFixHead2 {
overflow-y: auto;
height: var(--height-100);
}

.tableFixHead3 {
overflow-y: auto;
height: var(--height-100);
}

.styled-table thead th {
position: sticky;
top: 0;
background-color: var(--Color6);
text-align: left;
}


.styled-table th {
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: max(1.5vw, 20px);
color: #fff;
}

.styled-table td {
text-overflow: ellipsis;
word-wrap: break-word;
padding: var(--padding-15);
}

.styled-table tr:nth-child(even) {
background: var(--Color10);
}
.styled-table tr:nth-child(2n + 3) {
background: var(--Color11);
}

.delete_btn {
color: #fff;
}


.currentSondages{
width:90%;
text-align:center;
}


table {
width: 100%;
table-layout: fixed;
}
.tbl-header {
background-color: var(--Color6);
}
.tbl-content {
max-height: var(--height-500);
overflow-x: auto;
margin-top: var(--margin-0);
border: 1px solid rgba(255, 255, 255, 0.3);
}
th {
padding: 20px 15px;
text-align: left;
font-weight: 500;
/* font-size: max(1.5vw, 20px); */
font-size: 1.1rem;
color: #fff;
}
td {
padding: var(--padding-15);
text-align: left;
vertical-align: middle;
font-weight: 300;
font-size: var(--font-size-15);
color: #fff;
border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

tr:nth-child(even) {
background: var(--Color10);
}
tr:nth-child(2n + 3) {
background: var(--Color11);
}




.Nouveau_sondage{
max-width :30rem;

}

.Nouveau_sondage .bouton_creation{
background: green;
width : auto

}

.Nouveau_sondage a {
width : auto
}

/* Liste des sondages */
.col_1{ width: auto;   padding: 10px;}
.col_1 a {width:100% ; display:block;}

.col_2{ width: 11rem;  padding: 10px;}
.col_3{ width: 11rem;  padding: 10px;}
.col_4{	width: 15rem;  padding: 10px;}
.col_5{ width: 4rem;   padding: 10px;}

.bouton_supprimer{
background: darkred;
}


.nav_onglet {

}




/*
@media only screen and (max-width: 480px) {
horizontal scrollbar for tables if mobile screen */
/*
** For table mobile
.tablemobile {
overflow-x: auto;
display: block;
}
} */


/* for custom scrollbar for webkit browser*/
/*
::-webkit-scrollbar {
width: var(--width-15);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background: var(--Color3);
border-radius: 10px;
} */

/* Form new survey */
/*
.mainNewSurvey {
margin: 1rem 0rem;
padding: var(--padding-40);
border-left: solid;
border-bottom: solid;
border-radius: 2rem;
border-color: var(--Color6);
width: fit-content;
}

h3 {
margin-bottom: var(--margin-40);
font-size: 1.7rem;
}

.newSurvey {
display: flex;
}

.surveyPlaceholder {
width: 50vw;
}

form,
label {
display: grid;
grid-gap: 2rem;
}

label {
align-items: center;
grid-template-columns: auto 1fr;
}

input {
background: white;
color: rgb(7 2 18);
transition: all 200ms ease;
border-left: 0 solid transparent;
border: 0;
height: 3rem;
padding: 0 calc(3rem * 0.5);
border-radius: calc(3rem * 0.3);
box-shadow: 0 0 2rem rgb(0, 0, 0, 20%);
}

.create-survey-button {
padding: 0.6rem 0.8rem;
margin-left: 1vw;
font-size: 1rem;
width: max(15vw, 140px);
cursor: pointer;
background-color: var(--Color5);
border: 1.5px solid #f2f5f7;
border-radius: 2em;
}

.create-survey-button:hover {
color: #fff;
background-color: #dd5f24;
border: 1.5px solid #dd5f24;
transition: all ease-in-out 350ms;
} */

/*
Responsive Adding Media Queries
TO BE CHECKED !!!!
*/
/*
@media screen and (max-width: 800px) {
nav {
position: fixed;
z-index: 3;
}
.hamburger {
display: block;
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
transition: all 0.7s ease;
}
.nav-links {
background: #053742;
position: fixed;
opacity: 1;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(50px at 90% -20%);
-webkit-clip-path: circle(50px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.nav-links li {
opacity: 0;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(4) {
transition: all 0.5s ease 0.7s;
}
.nav-links li:nth-child(5) {
transition: all 0.5s ease 0.8s;
}
.nav-links li:nth-child(6) {
transition: all 0.5s ease 0.9s;
margin: 0;
}
.nav-links li:nth-child(7) {
transition: all 0.5s ease 1s;
margin: 0;
}

li.fade {
opacity: 1;
} */

/* Navigation Bar Icon on Click*/

/* .toggle .bars1 {
transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .bars2 {
transition: all 0s ease;
width: 0;
}

.toggle .bars3 {
transform: rotate(45deg) translate(-5px, -6px);
}
} */