@font-face {
   font-family: "LuloCleanBold";
   src: url("../fonts/fontsfree-net-lulo-clean-w01-one-bold.woff") format("woff");
   src: url("../fonts/fontsfree-net-lulo-clean-w01-one-bold.woff2") format("woff2");
   }
   

   
@font-face {
       font-family: "LuloCleanRegular";
       src: url("../fonts/fontsfree-net-lulo-clean-w01-one.woff") format("woff");
       src: url("../fonts/fontsfree-net-lulo-clean-w01-one.woff2") format("woff2");
       }

body{
   width: 100vw;
   height: auto;

   margin: none;
   padding: none;
}

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

* { 
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

.noselect {
   -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
         -ms-user-select: none; /* Internet Explorer/Edge */
             user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
}

.tf_container{
   width: 960px;
   margin: auto;
}

.tf_section{
   width: 100%;
}

.tf_menubar{
   width: 100%;
   height: auto;
}

.tf_menubar_logo{
   margin-top: 32px;
   width: 148px;
   height: 42px;
   background-image: url('../assets/branding/tf_logo_dark.png');
   background-size: contain;
   background-repeat: no-repeat;
}

.tf_menubar_label_container{
   margin-top: 32px;

   width: 100%;
   height: 36px;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
}

.tf_menubar_label{
   width: auto;
   min-width: 64px;
   height: 32px;
   margin: 0px 16px 0px 16px;

   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;

   align-items: center;  

   font-family: sans-serif;
   font-size: 16pt;

   position: relative;
}

.tf_menubar_label_selected{
   width: 100%;
   height: 2px;
   background-color: #141F36;
   position: absolute;
   bottom: -10px;
   left: 0px;
}

.tf_menubar_label_icon{
   width: 32px;
   height: 32px;
   background-image: none;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   margin-right: 16px;
   flex-shrink: 0;
}

.tf_section_title{
   width: 50%;
   height: auto;
   margin: 64px 0px 64px 0px;

   font-family: sans-serif;
   font-size: 48pt;
}

.tf_stationchange_wrapper{
   width: 100%;
   height: auto;
   margin-bottom: 64px;
}

.tf_stationchange_title{
   margin: 0px 0px 32px 0px;
   font-family: sans-serif;
   font-size: 21pt;
}

.tf_stationchange_container{
   width: 100%;
   height: auto;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

   align-content: flex-start;
   gap: 21px;
}

.tf_stationchange_unit{
   width: 164px;
   height: 48px;
   
   text-align: center;

   background-color: rgba(0,0,0,0.1);

   -webkit-mask-image: url(../assets/UI/tf_unit.svg);
   mask-image: url(../assets/UI/tf_unit.svg);

   cursor: pointer;

   font-family: sans-serif;
}

.tf_stationchange_text{
   margin: auto;
   padding: 14px;
}

.tf_stationtextchange_wrapper{
   position: absolute;
   top: 0px;
   left: 0px;

   width: 100vw;
   height: 100vh;
   z-index: 0;

   background-color: rgba(0,0,0,0.1);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);

   display: flex;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
}

.tf_stationtextchange_container{
   width: 350px;
   height: auto;
   background-color: white;
   padding: 24px;
   border-radius: 20px;
   z-index: 5;
   position: fixed;
}


.tf_stationchange_description{
   font-family: sans-serif;
   font-size: 16pt;
   align-content: space-between;
   gap: 32px;
   display: flex;
   flex-wrap: wrap;
}

.tf_stationchange_info{
   width: auto;
}


.tf_stationchange_textfield{
   width: 100%;
   height: 200px;
   padding: 16px;
   background-color: rgba(0,0,0,0.1);
   border: 0px;
   resize: none;
   border-radius: 8px;
   margin-top: 16px;

   font-family: sans-serif;
   font-size: 12pt;
   text-align: center;
}

input:focus{
   outline:none;
}

.tf_stationchange_button_container{
   width: 100%;
   height: auto;
   display: flex;
   margin-top: 16px;
   align-content: space-between;
   justify-items: center;
   gap: 16px;
}

.tf_buttons_floating{
   position: absolute;
   top: -84px;
   left: 0px;
}

.tf_button_white{
   background-color: white !important;
}

.tf_button_blue{
   background-color: lightblue !important;
}

.tf_stationchange_button{
   display: flex;
   width: 50%;
   background-color: rgba(0,0,0,0.1);
   padding: 16px 0px 16px 16px;
   border-radius: 8px;
   font-family: sans-serif;
   font-size: 12pt;
   cursor: pointer;
}

.tf_button_StatusIndicator{
   margin-left: 16px;
   width: 18px;
   height: 18px;
   background-image: none;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.tf_location_card{
   width: 300px;
   height: 200px;
   border-radius:16px;
   background-color: white;
   background-image: none;  
   background-size: cover;
   background-position: center;
   position: relative;

   outline: none;
}

.tf_location_card_banner{
   width: 100%;
   height: 50px;
   border-radius: 0px 0px 16px 16px;
   background-color: rgba(255, 255, 255, 0.8);
   position: absolute;
   bottom: 0px;
   left: 0px;
   display: flex;
   justify-content: center;
   align-items: center;

   font-family: sans-serif;
}

.tf_textinput{
   width: 100%;
   max-width: 464px;
   height: 32px;
   margin-bottom: 16px;
   padding: 4px 16px 4px 16px;

   border-radius: 8px;
   border: none;
   background-color: var(--snow);

   overflow:visible;

   font-family: Thin;
   letter-spacing: -0.5px;
   font-size: 18pt;
   line-height: 18pt;

   display:block;

   flex-shrink: 1;
}

.tf_lineinput{
   width: 100%;
   height: 32px;
   margin-bottom: 16px;

   border-radius: 8px;
   border: none;
   background-color: #DFDFDF;

   overflow:visible;

   font-family: Thin;
   letter-spacing: -0.5px;
   font-size: 18pt;
   line-height: 18pt;


   padding-left: 8px;
}

.tf_previewStationWrapper{
   display: none;
   height: 540px;
   width: 960px;
   background-color: rgb(18,44,77);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   outline: 8px solid white;
}

.tf_previewStation_Top{
   width: 100%;
   height: 110px;
   background-color: rgba(77,189,198,0.7);
}

.tf_previewStation_ContentWrapper{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
}

.tf_previewStation_Content{
   position: absolute;
   margin: auto;
   width: 850px;
   height: auto;
   top: 55%;
   left: 50%;
   transform: translate(-50%, -50%);


   text-align: center;

   font-size: 43px;
   font-family: "LuloCleanBold";
   color:  white;
   opacity: 1.0;
   padding-top:25px;
}

.Activity{
   text-align: center;

   font-size: 43px;
   font-family: "LuloCleanBold";
   color:  white;
   opacity: 1.0;
   padding-top:25px;
}

.Spacing{
   width: 100%;
   height: 16px;
}