/* GLOBAL SETTINGS */
:root {
	--font-color: grey;
  --main-color: #03a9f4;
  --green-color: #6FF8B6;
  --red-color: #FF6B6B;
  --font-size: 18px;
  --font-size-t4: 14px;
  --border-radius: 10px;
  --border-radius-5px: 10px;
  --input-max-width: 160px;
}

*{    
    box-sizing: border-box;
}
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
	  font-size: var(--font-size);
    color: var(--font-color);
}

#app_window{
    display: flex;
}

/*GENERAL*/


#debug_display {
  position: fixed;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background-color: white;
  color: var(--font-color);
  font-size: 12px;
  height: 20px;
}

/* FONTS */
.t1 {
  font-size: 24px;
  color: #757A8E;
}
.t2 {
  font-size: 20px;
  color: #757A8E;
}
.t3 {
  font-size: 16px;
  color: #757A8E;
}
.t4 {
  font-size: 12px;
  color: #757A8E;
}
.t5 {
  font-size: 10px;
  color: #757A8E;
}

.bold{
  font-weight: bold;
}

/* COLORS */
.red{
  color: var(--red-color);
}


/* INPUTS AND BUTTONS */
.input_textarea {
  width: 60vw;
  height: 10vh;
}

.small_button{
  border-radius: var(--border-radius-5px);
  font-size: var(--font-size-t5);
  background-color: white;
  border: 2px solid #EAEBF0;
  text-decoration: none;
  color: var(--font-color);
  padding: 1x 2px;
  padding-right: 7px;
  cursor: pointer;
  margin-left: 5px;
}

.button_default {
  border-radius: var(--border-radius-5px);
  font-size: var(--font-size-t4);
  background-color: white;
  border: 2px solid #EAEBF0;
  text-decoration: none;
  color: var(--font-color);
  padding: 5px 10px;
  cursor: pointer;
}

.button_default:hover{
  transition: 0.3s;
  -webkit-transition: 0.3s;
  border: 2px solid var(--main-color);
  color: var(--main-color);
}
.button_default.button_highlighted{
  color: white;
  background-color: var(--main-color);
  border: 2px solid var(--main-color);
}
.button_default.button_highlighted:hover{
  background-color: white;
  color: var(--main-color);
}
.button_default_options {
  border-radius: var(--border-radius-5px);
  font-size: var(--font-size-t4);
  background-color: white;
  border: 2px solid #EAEBF0;
  text-decoration: none;
  color: var(--font-color);
  padding: 5px 5px;
  cursor: pointer;
  width: 100%;
  margin: 0 2px;
}

.button_default_options:hover {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  border: 2px solid var(--main-color);
  color: var(--main-color);
}

.button_default_options_edit {
  border-radius: var(--border-radius-5px);
  font-size: var(--font-size-t4);
  background-color: white;
  border: 2px solid #EAEBF0;
  text-decoration: none;
  color: var(--font-color);
  padding: 5px 5px;
  cursor: pointer;
  margin: 0 2px;
}

.button_default_options_report {
  display: block;
  border-radius: var(--border-radius-5px);
  font-size: var(--font-size-t4);
  background-color: white;
  border: 2px solid #EAEBF0;
  text-decoration: none;
  color: var(--font-color);
  padding: 5px 5px;
  cursor: pointer;
  margin: 0 2px;
}

.button_default_options_report:hover {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  border: 2px solid var(--main-color);
  color: var(--main-color);
}

.button_default_options_delete {
  border-radius: var(--border-radius-5px);
  font-size: var(--font-size-t4);
  background-color: white;
  border: 2px solid #EAEBF0;
  text-decoration: none;
  color: var(--font-color);
  padding: 5px 5px;
  cursor: pointer;
  margin: 0 2px;
}

.button_default_options_delete:hover {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  border: 2px solid var(--red-color);
  color: var(--red-color);
}

.button_default_options_edit:hover {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  border: 2px solid var(--green-color);
  color: var(--green-color);
}

.button_default_options_arrow {
  border-radius: var(--border-radius-5px);
  font-size: var(--font-size-t4);
  background-color: white;
  border: 2px solid #EAEBF0;
  text-decoration: none;
  color: var(--font-color);
  padding: 5px 5px;
  cursor: pointer;
  margin: 0 2px;
}

.button_default_options_arrow:hover {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  border: 2px solid black;
  color: black;
}


.card_style {
    border: 2px solid #EAEBF0;
    border-radius: 10px;
    color: var(--font-color);
    background-color: white;
    width: 300px;
    padding: 20px 30px;
}

.select_style {
    max-width: var(--input-max-width);
    border-radius: 5px;
    outline: none;
    border: 2px solid #EAEBF0;
    color: var(--font-color);
    padding: 5px 10px;
}

.input_style {
    max-width: var(--input-max-width);
    border-radius: 5px;
    outline: none;
    border: 2px solid #EAEBF0;
    color: #EAEBF0;
    color: var(--font-color);
    padding: 5px 10px;
}
.input_style.max_width_none{
  max-width: none;
}
input[type="datetime-local"].input_style{
  max-width: none;
}
.button{
    /* margin-left: 30px; */    
    display: inline-block;
    font-size: var(--font-size);
    padding: 10px 20px;
    text-decoration: none;
    background-color: white;
    color: white;
}
.button_icon{
    vertical-align: middle;
}
.link {
    text-decoration: none;
    font-weight: bold;
    color: var(--font-color);
    cursor: pointer;
}
/* PAGING */
.pagination_button{
  background-color: var(--main-color);
  border: none;
  color: white;
  margin: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.pagination_button_selected{
  background-color: white;
  border: 2px solid var(--main-color);
  color: var(--main-color);
  margin: 5px;
  padding: 5px 10px;
  border-radius: 4px;
}

/* TABLEsS */
.table_general_style {
    margin: auto;
    border-collapse: collapse;
    font-size: 12px;
    width: 80%;
}

thead {
  white-space: nowrap;
}

th {
  position: sticky;
  top: 0px;  /* 0px if you don't have a navbar, but something is required */
  background: white;
}
.table_fix_head {
  overflow: auto;
}
.table_fix_head > table{
  border-radius: 10px;
  /* overflow: hidden; */
}
.table_fix_head > table > tbody tr:nth-child(odd) {
  background-color: white;
}
.table_fix_head > table > tbody tr:nth-child(even) {
  background-color: #fafafa;
}
.table_fix_head td, th{
  padding: 10px 20px;
}
.table_fix_head th{
  background-color: var(--main-color);
  color: white;
}
.table_fix_head thead tr {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Loading message CSS */
#loader_logo {
	position: relative;
  width: 40%;
	z-index: 99997;
}
#loader_div{
	position: fixed;
	background-color: white;
	bottom: 0%;
	left: 0%;
	width: 100vw;
	height: 100%;
	opacity: 1;
	z-index: 99999999999999999;
}
.loading_message_img{
  width: 200px;
}
.loading_message {
	position: relative;
	top: 250px;
	margin: auto;
}
.loader {
	
	margin: auto;
  border: 40px solid white;
  border-radius: 50%;
  border-top: 40px solid var(--main-color);
  border-bottom: 40px solid var(--main-color);
  width: 100px;
  height: 100px;
  background-color: white;
  -webkit-animation: spin 25s linear infinite; /* Safari */
  animation: spin 0.25s linear infinite;
}
.tiny_loader {
	
	margin: auto;
  border: 10px solid white;
  border-radius: 50%;
  border-top: 10px solid var(--main-color);
  border-bottom: 10px solid var(--main-color);
  width: 25px;
  height: 25px;
  background-color: white;
  -webkit-animation: spin 25s linear infinite; /* Safari */
  animation: spin 0.25s linear infinite;
}

.sitrep {
	margin: auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.browser_tiny_icon{
  height: 12px;
}
/* /IDS */
#scenario_editor{
  
  text-align: left;
  display: block;
  margin-left: 40px;
}
#contact_groups_editor{
  
  text-align: left;
  display: block;
  margin-left: 40px;
}

/* STATUS ICONS */
.status_gray {
  background-color: gray;
  height: 10px;
  width: 10px;
  border-radius: 20px;
}
.status_green {
  background-color: #6FF8B6;
  height: 10px;
  width: 10px;
  border-radius: 20px;
}

.status_yellow {
  background-color: #FFF96B;
  height: 10px;
  width: 10px;
  border-radius: 20px;
}

.status_orange {
  background-color: #FFA06B;
  height: 10px;
  width: 10px;
  border-radius: 20px;
}

.status_red {
  background-color: #FF6B6B;
  height: 10px;
  width: 10px;
  border-radius: 20px;
}