:root{
    /* this has to be set to switch between light or dark */
    color-scheme: light dark;


    --gladiatorus-dark-grey-1: #101010;
    --gladiatorus-medium-grey-1: #171717;
    --gladiatorus-medium-grey-weak: #1b1b1b;
    
    /* --afk-red: #9c362b; */
    --afk-red: #e80000;
    --afk-soft-grey: #252525;
    --afk-dark-grey: #1a1a1a;
    --afk-dark-grey-2: #181818;
    --afk-dark-grey-3: #0e0e0e;

    --afk-soft-white: #ececec;
    --afk-gentle-white: #cecece;
    
    /* V3 Colors */
    --afk-smn-border-color-dark: #f6f6f62b;
    --afk-smn-border-color-light: #0000002b;

    --afk-smn-border-color-dark: #f6f6f617;
    --afk-smn-border-color-light: #00000017;
    
    --afk-smm-search-light-background: #f5f5f5;

    --afk-separator-thin: #80808029;
    



    /* HOPLAND DIGITAL COLORS */
    --hopland-digital-blue: #00c6ff;
    --hopland-digital-blue-transparent: rgba(0, 198, 255, 0.45);
    --hopland-digital-blue-dark: #0072ff;
    --hopland-digital-blue-light: #00c6ff;

    --hopland-digital-orange: #ff9c28;
    --hopland-digital-orange-dark: #ff6a00;
    --hopland-digital-orange-lighter: #ff9c28;
    --hopland-digital-orange-light: #ff8a00;


    --hopland-digital-red: #ff0000;
    --hopland-digital-red-dark: #aa0000;
    --hopland-digital-red-light: #ff2f2f;

    --hopland-digital-green: #00ff8c;
    --hopland-digital-green-dark: #00aa5e;
    --hopland-digital-green-light: #00ff8c;



    --hopland-digital-weak-grey: #4a4a4a;
    --hopland-digital-grey: #2d2d2d;
    --hopland-digital-strong-grey: #1e1e1e;

    --hopland-digital-off-white: rgb(231, 231, 231);;
    --hopland-digital-weaker-white: rgb(204, 204, 204);; 


    --status-grey: #9aa0a6;
    --status-green: var(--hopland-digital-green);
    --status-blue:  var(--hopland-digital-blue);
    --status-orange: var(--hopland-digital-orange);
    --status-red:   var(--hopland-digital-red);

    --status-bg-grey: rgba(154,160,166,.16);
    --status-bg-green: rgba(0,255,140,.14);
    --status-bg-blue: rgba(0,198,255,.14);
    --status-bg-orange: rgba(255,156,40,.16);
    --status-bg-red: rgba(255,0,0,.14);


}

body{
    overflow-x: hidden;

    /* display: flex; */
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;

    text-align: -webkit-center;
    background-color: var(--afk-gentle-white);

    /* DARKMODE */
    color: lightgrey;
    color: #393939;
    /* background-color: var(--afk-dark-grey-2); */
    background-color: var(--afk-dark-grey);
    background-color: light-dark(var(--afk-soft-white), var(--afk-dark-grey));
    color: light-dark(var(--afk-dark-grey), var(--afk-soft-white));
}



body div{
    transition-duration: 0.2s;
}

.secretcloud-modal{
    height: 100vh;
}


a{
    text-decoration: none;
    color: light-dark(var(--afk-dark-grey),var(--afk-soft-white));
    font-size: 0.75rem;
    opacity: 0.9;
    transition-duration: 0.2s;
}
a:hover{
    opacity: 1;
    color: var(--afk-red);
}




/* FONT CLASSES */
.carlito-regular {
    font-family: "Carlito", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .carlito-bold {
    font-family: "Carlito", sans-serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .carlito-regular-italic {
    font-family: "Carlito", sans-serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .carlito-bold-italic {
    font-family: "Carlito", sans-serif;
    font-weight: 700;
    font-style: italic;
  }
/* */  


.afk-studio-main-window{
    position: absolute;
    top: 0px;
    /* left: 300px; */
    padding-left: 300px;
    /* height: 100%; */
    /* width: 100%; */
    
    padding-left: 0px; /* same as main-navbar-width*/
    color: var(--afk-dark-grey);
    background-color: var(--afk-gentle-white);
}
.afk-studio-main-window {
    position: absolute;
    top: 0px;
    padding-left: 100px;
    color: var(--afk-dark-grey);
    /* background-color: var(--afk-gentle-white); */
    background-color: var(--afk-soft-white); 
    /* We make it a bit lighter to increase percieved contrast and "floating space" */
    /* background-color: #070707;
    background-color: #a7a7a7; */

    background-color: light-dark(var(--afk-soft-white), var(--afk-dark-grey));
    color: light-dark(var(--afk-dark-grey), var(--afk-soft-white));


    width: 100%; /* Default width for regular desktop */

    contain: content;
    scroll-snap-type: y mandatory;

    /* Media query for mobile devices */
    /* 
    @media (max-width: 767px) {
        width: calc(100% + 25px);
    } 
    */
}
.afk-smn-container-minimized .afk-studio-main-window{
    /* padding-left: 100px; */
    opacity: 0.2;
    background-color: var(--gladiatorus-dark-grey-1);
}

.afk-studio-content{
    min-height: 85vh;
    scroll-snap-type: y mandatory;
}


/**   SCROLLBAR   **/
/**   SCROLLBAR   **/
::-webkit-scrollbar-track
{
	/* -webkit-box-shadow: inset 0 0 6px rgba(255, 0, 0, 0.3); */
	background-color: none;
    stroke: 0px solid var(--afk-red);
    border-radius: 5px;
}


::-webkit-scrollbar
{
	width: 6px;
	height: 6px;
	background-color: none;
    stroke: 1px solid white;
    border-left: 1px solid var(--afk-red);
    border-radius: 0px;
    border-top: 1px solid var(--afk-red);
    border-bottom: 1px solid var(--afk-red);
	border: 0px;
}

::-webkit-scrollbar-thumb
{
	background-color:light-dark(var(--afk-gentle-white),  var(--afk-dark-grey-2));
	border: none;
    border-radius: 0 0px 0px 0;
	border-radius: 5px;
	transition-duration: 0.2s;
}
::-webkit-scrollbar-thumb:hover{
	background-color: light-dark(var(--afk-dark-grey-2), var(--afk-gentle-white));
	cursor: -webkit-grab;
	cursor: grab;
}

/**  SCROLLBAR  ^^ **/

/**  SCROLLBAR  ^^ **/




.h2{
    color: #d6d6d6;
}



.afk-studio-main-footer{
    background-color: var(--gladiatorus-dark-grey-1);
    color: white;
    padding-bottom: 150px;
}


/*   STANDARD WEB COMPONENTS  */
ul {
    list-style-type: disc;
    margin-left: 20px;
}

li {
    margin-bottom: 10px;
}

.info-list-container{
    width: 300px;
}
/*   STANDARD WEB COMPONENTS  ^^ */

/*   NOTIFCATION DESIGN   */

/*   NOTIFCATION DESIGN ^^ */


/*

    -------------------------------------------------
    -----                                       -----
    ---                 F O R M                   ---
    -----                                       -----
    _________________________________________________

*/
.form-outer-container-since-css-is-wierd{
    height: -webkit-fill-available;
}
.form-container{
    /* background-color: #ffffff0d;
    background-color: #0000004f; *//*Darker more black transparent*/  
    background-color: #ffffffbf;
    background-color: light-dark(#ffffffbf, #101010ff);
    color: light-dark(var(--afk-soft-grey), var(--afk-gentle-white));
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 3px 6px 0px #00000012;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    width: auto;

    

    /* FLEX INFO */
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.form-header{
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    color: light-dark(var(--afk-soft-grey), var(--afk-gentle-white));
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.form-footer{
    margin-top: 20px;
}

.form, .default-form{
    padding: 10px;
    /* background-color: white; */
    width: 100%;
    /* border-radius: 5px; */
    border-top: 1px solid #dcdcdc2e;
    border-bottom: 1px solid #dcdcdc2e;
    padding-top: 30px;
    padding-bottom: 30px;
    
    /* FLEX INFO */
    display: flex;
    flex-direction: column;
    align-items: baseline;
    flex-wrap: wrap;
    align-content: center;
}
.form-control{
    border: 1px solid light-dark(#9898982b,var(--afk-smn-border-color-dark));
    background-color: light-dark(#fff, var(--afk-dark-grey-3));
    color: light-dark(var(--afk-soft-grey), var(--afk-gentle-white));

}
.form-control:focus{
    background-color: var(--afk-dark-grey-3);
    background-color: light-dark(#fff, var(--afk-dark-grey));
    color: light-dark(var(--afk-soft-grey), var(--afk-gentle-white));
}
.form-text{
    background-color: rgba(115, 115, 115, 0.03);
    border-radius: 5px;
    padding: 2px;
    margin: 6px;
}

label{
    transform: translateY(5px) scale(0.8);
    opacity: 0.6;
}
/****__ FORM __****/




/***
######################################################
------------------------------------------------------
-----                                            -----
---        A F K     B R E A D C R U M B           ---
-----                                            -----
------------------------------------------------------
######################################################
***/

.breadcrumb-item::before{
    color: var(--afk-red) !important;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 0.5rem;
    font-size: 0.75rem;
    margin-top: 5px;
    }


    .breadcrumb li, .breadcrumb-item{
        color: light-dark(rgb(40, 40, 40), rgb(212, 212, 212));
    }

.breadcrumb-item {
    text-decoration: none;
    color: light-dark(var(--afk-dark-grey),var(--afk-soft-white));
    font-size: 0.75rem;
    opacity: 0.9;
    transition-duration: 0.2s;
    margin-bottom: 0px;
    margin-top: 5px;
}


/**** WELCOME  ****/
.afk-studio-main-focus-logo-img{
    max-width: 70vw;
    max-height: 70vh;
    object-fit: contain;

    width: 150px;
    height: 150px;
}

.afk-studio-main-focus-logo-sub-title{
    margin-top: 20px;
    font-size: 12px;
    color: var(--afk-dark-grey);
    text-transform: uppercase;
    font-style: italic;
}
.designed-by-sub-title{
    margin-top: 20px;
    font-size: 10px;
    color: var(--afk-dark-grey);
    text-transform: uppercase;
    /* font-style: italic; */
}

/**** JUMBOTRON  ****/
.afk-studio-main-focus-logo-img .app{
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 5px 6px 0px #0000007f;
    object-fit: contain;
}
.app-icon{
    /* width: 100px;
    height: 100px; */
    object-fit: contain;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 5px 6px 0px #0000007f;
}





.matrix-p{
    min-width: 13px;
    animation-duration: 0.4s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform: translateX(0%);
    transition-duration: 0.4s;
}
/* ANIMATIONS  */
@keyframes character_lock_in{
    0%{
        transform: translateX(-100%);
        color: red;
        opacity: 0;
    }
    100%{
        transform: translateX(0%);
        /* color: white; */
    }
}


.fade-in {
    opacity: 0;
    transition: opacity 0.5s;
}


.fade-in.fade-in-visible {
    opacity: 1;
}






.afk-show-header{
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.afk-show-header-text-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 19;
}

.afk-image-outer-border{
    border-radius: 20px;
    border: 4px solid light-dark(var(--afk-dark-grey), var(--afk-soft-white));
    flex-shrink: 5;
    transform: translate(100px, 0px);
    transform: translate(100px, 0px) scale(2);
}

@media screen and (max-width: 767px) {
    .afk-image-outer-border{
        transform: translate(100px, 0px);
        transform: translate(100px, 0px) scale(2);
    }
    
}

.afk-image-container{
    border-radius: 12px;
    margin: 10px;
    contain: content;
    width: 300px;
    box-shadow: -1px 3px 7px 0px #000000b0;
}

.afk-image-container img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/*
######################################################
------------------------------------------------------
-----                                            -----
---        A F K     C O O K I E     B A R         ---
-----                                            -----
------------------------------------------------------
######################################################
*/
.cookie-bar{
    position: fixed;
z-index: 1000;
width: calc(100% - 100px);
transform: translateX(100px);
height: auto;
background-color: light-dark(#ffffff, var(--afk-dark-grey));
color: var(--afk-gentle-white);
color: light-dark(var(--afk-dark-grey), var(--afk-soft-white));
padding: 20px;
bottom: 0px;
/* opacity: 0.97; */
/* -webkit-box-shadow: 0px 0px 4px 0px rgba(23, 23, 23, 0.22); */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-top: 1px solid var(--afk-smn-border-color-light);
    
}

@media screen and (max-width: 767px) {
    .cookie-bar{
        width: calc(100% - 50px);
        transform: translateX(50px);
    }
    
}




/*
------------------------------------------------------
-----                                            -----
---            C A R D     S T Y L I N G           ---
-----                                            -----
------------------------------------------------------
*/
.card{
    background-color: light-dark(#fff, rgba(0, 0, 0, 0.07));
}



/*
######################################################
------------------------------------------------------
-----                                            -----
---    A F K     S E C T I O N    S T Y L E S      ---
-----                                            -----
------------------------------------------------------
######################################################
*/

section{
    background-color: light-dark(var(--afk-soft-white), var(--afk-dark-grey));
    color: light-dark(var(--afk-dark-grey), var(--afk-soft-white));

    /* FLEX INFO */

    padding-right: 100px;
    padding-left: 100px;

    min-height: 100vh;

    
    scroll-snap-align: start;

}

@media screen and (max-width: 767px) {
    section{
        padding-right: 0px;
        padding-left: 0px;
    }
    
}

@media screen and (max-width: 1376px) {
    section{
        padding-right: 50px;
        padding-left: 50px;
    }
    
}




/*
######################################################
------------------------------------------------------
-----                                            -----
---    A F K           P - E L E M E N T           ---
-----                                            -----
------------------------------------------------------
######################################################
*/
p{
    color: rgb(92, 92, 92);
}










/*
######################################################
------------------------------------------------------
-----                                            -----
---    A F K                    T A B L E          ---
-----                                            -----
------------------------------------------------------
######################################################
*/

table{
    font-family: "roboto-thin", sans-serif;
    /* border-color: transparent;
    border-width: 1px; */
}

body{
    --bs-table-bg: #ffffff;
}


.presenters-section{
    margin-top: 150px;
}
table .fa-square-dashed{
    opacity: 0.01;
    transition-duration: 0.2s;
}
table tr:hover .fa-square-dashed{
    opacity: 0.5;
}

table .fa-square-dashed:hover{
    cursor: pointer;
    opacity: 1;
    color: var(--bs-success);
}



table tr{
    border-radius: 5px;
    margin: 5px;
    transition-duration: 0.2s;
}

table tr:hover{
    background-color: var(--afk-soft-grey);

}
.kategori{
    margin-top: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    color: #00c6ff;
    border-bottom-color: var(--hopland-digital-blue);
    color: var(--hopland-digital-orange);
    contain: content;
    display: flex
;
    font-size: 1.12rem;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.kategori td{
    font-weight: bold;
    background-color: transparent;
    padding: 5px;
    border-bottom: 1px solid #00c6ff !important;
    color: var(--hopland-digital-orange-light);
    color: #ececec;
    flex: 1;

    /* margin-top: 42px; */
    /* border-style: dashed !important; */
    /* border-radius: 10px; */
}
.odd{
    background-color: #f0f0f000;
}
.even{
    background-color: #e0e0e008;
}
.table>:not(caption)>*>* {
    background-color: transparent;
}

td{
    border-bottom: 1px solid var(--hopland-digital-blue);
    color: light-dark( #212121, #cccccc);
}
tr:hover td{
    color: light-dark(var(--afk-soft-grey), var(--afk-gentle-white));
    color: var(--afk-gentle-white);
}
tr:hover td a{
    color: var(--afk-gentle-white);
}
tr:hover td a:hover{
    color: var(--afk-red);
}
tfoot tr:hover a:hover{
    color: inherit;
}
tr{
    border-style: hidden;
}
.spacer-row{
    height: 50px;
}

thead tr{
    color: light-dark(#292929, rgba(198, 198, 198, 0.98));
    background-color: light-dark(rgb(255 255 255 / 63%), rgba(0, 0, 0, 0.12));
    /* border-bottom: 1px solid #00c6ff !important; */
    font-family: "roboto-light", sans-serif;
    font-size: 1.2rem;
}
thead tr:hover{
    background-color: light-dark(rgb(255 255 255 / 63%), rgba(0, 0, 0, 0.12));
    color: light-dark(#292929, rgba(198, 198, 198, 0.98));
}

tbody tr{
    background-color: transparent;
    color: light-dark(var(--afk-soft-grey), var(--afk-gentle-white));
}

table thead th {
    font-weight: 300 !important;
    /* Optionally, set font-family if needed */
    /* font-family: "roboto-light", sans-serif !important; */
}

.table>:not(caption)>*>* {
    padding: .5rem .5rem;
    /* background-color: var(--bs-table-bg); */
    /* border-bottom-width: 1px; */
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.underlined-table-header-identifier{
    text-decoration: underline;
    text-decoration-color: var(--hopland-digital-blue) !important;
    border-radius: 3px;
}



/*
######################################################
------------------------------------------------------
-----                                            -----
---    A F K           T O O L T I P               ---
-----                                            -----
------------------------------------------------------
######################################################
*/

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  /* Show the tooltip */
[data-title]:hover .tooltip {
opacity: 1;
transform: translate(-50%, -20px);
}




/*
######################################################
------------------------------------------------------
-----                                            -----
---       I M P O R T E D        T O G G L E       ---
-----                                            -----
------------------------------------------------------
######################################################
*/

/* From Uiverse.io by cssbuttons-io */ 
/* From Uiverse.io by WhiteNervosa */ 
.slider {
  background-color: #ffffff2b;
  border-radius: 100px;
  padding: 1px;
  margin: 10px;
  cursor: pointer;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  align-items: center;
  position: relative;
  display: block;
  width: 51px;
  height: 29px;
  box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, rgba(0, 0, 0, 0.21) 0px 0px 0px 24px inset,
        #22cc3f 0px 0px 0px 0px inset, rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
}

.slider::after {
  content: "";
  display: flex;
  top: 2.3px;
  left: 2px;
  width: 26px;
  height: 26px;
  background-color: #e3e3e3;
  border-radius: 200px;
  position: absolute;
  box-shadow: transparent 0px 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 6px 6px;
  transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
  will-change: left, background-color;
}

.switch input[type="checkbox"]:checked + .slider {
  box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, #22cc3f 0px 0px 0px 2px inset, #22cc3f 0px 0px 0px 24px inset,
        rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
}

.switch input[type="checkbox"]:checked + .slider::after {
  left: 24px;
}

.switch input[type="checkbox"] {
  display: none;
}