html{
    scroll-behavior: smooth;
}
body{
    --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);; 
}




a {
    /* color: var(--hopland-digital-blue); */
    
    text-decoration: none;
}
a:hover {
    color: var(--hopland-digital-orange);
    text-decoration: none;
}


.slogan{
    font-family: "adorn-condensed-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(121px, -30px) scale(0.7);
    position: absolute;
    color: rgb(55, 55, 55);
}
@media screen and (max-width: 375px) {
    .slogan{
        display: none;
    }
    
}

h2 .h2{
    /* text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.41), -2px -2px 2px white; */
}





.prevent-selection{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

/*

    BUTTON


    B U T T O N  -  S T Y L I N G 
    ______________________________________________________
*/

.light-button-tactile{
    color: var(--hopland-digital-weak-grey);
    box-shadow: -2px -2px 5px rgba(255, 255, 255, 0.69), 3px 3px 5px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    transition-duration: 0.2s;
    padding: 3px;
    margin: 8px;

}


.light-button-tactile:hover{
    color: var(--hopland-digital-orange);
    box-shadow: -2px -2px 5px rgba(255, 255, 255, 0.69), 3px 3px 5px rgba(0, 0, 0, 0.25);
}

.light-button-tactile:active{
    color: var(--hopland-digital-orange);
    box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 0.69), inset 3px 3px 5px rgba(0, 0, 0, 0.25);
}

.dark-button-extra-padding{
    border-radius: 26px;
padding: 1px;
margin: 3px;
}
.dark-button-tactile{
    color: #e7e7e7;
    box-shadow: -2px -2px 5px rgba(54, 54, 54, 0.96), 3px 3px 5px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    transition-duration: 0.2s;
    padding: 10px;
    margin: 15px;

    background-color: rgba(255, 0, 0, 0);
/* color: rgb(176, 176, 176); */
border: 1px solid rgba(74, 74, 74, 0.3);

border-radius: 5px;
padding: 7px;
margin: 6px;
backdrop-filter: blur(70px);

}

.dark-button-tactile:hover{
    color: var(--hopland-digital-orange);
    box-shadow: -2px -2px 5px rgba(54, 54, 54, 0.96), 3px 3px 5px rgba(0, 0, 0, 0.25);
}
.dark-button-tactile:active{
    color: var(--hopland-digital-orange);
    box-shadow: inset -2px -2px 5px rgba(54, 54, 54, 0.96), inset 3px 3px 5px rgba(0, 0, 0, 0.25);
}


footer{
    width: 100%;
    background-color: var(--gladiatorus-dark-grey-1);
    background-color: #0d0d0d;
color: white;
padding:20px;
padding-bottom: 150px;
}



tag{
    /* background-color: rgba(45, 45, 45, 1);
    color: var(--hopland-digital-orange);
    padding-left: 3px;
    border-radius: 5px;
    margin-left: 5px; */

    background-color: rgba(40, 40, 40, 0.5);
color: #ffffff;
padding: 5px;
padding-left: 7px;
padding-right: 7px;
border-radius: 18px;
margin-left: 5px;
font-weight: 200;
border: 1px solid rgba(143, 143, 143, 0.19);
}



p{
    /* font-size: 14px !important; */
    font-size: 15px !important;

}




/*

    TABLE


    T A B L E  -  S T Y L I N G 
    ______________________________________________________
*/


body{
    --bs-table-bg: #ffffff;
}
.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: #cccccc;
}
tr{
    border-style: hidden;
}
.spacer-row{
    height: 50px;
}

thead tr{
    color: rgba(198, 198, 198, 0.98);
    background-color: rgba(0, 0, 0, 0.12);
    font-weight: 100;
    border-bottom: 1px solid #00c6ff !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;
}



/*

    TOOLTIP


    T O O L T I P  -  S T Y L I N G 
    ______________________________________________________
*/

.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);
}


/*

    FORM


    F O R M  -  S T Y L I N G 
    ______________________________________________________
*/


form{
    align-items: center;
}
.form-container{
    background-color: #3c3c3c0f;
    background-color: #ffffff0f;
    /* background-color: light-dark(#ffffffbf, #101010ff); */
    color: light-dark(#e8e8e8, var(--afk-gentle-white));
    
}

.afk-studio-content{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.form-container{
    background-color: #3c3c3c0f;
    background-color: #6565650f;
    /* background-color: light-dark(#ffffffbf, #101010ff); */
    color: light-dark(#e8e8e8, var(--afk-gentle-white));
    margin-bottom: 100px;
}
.form-container h2{
    color: var(--hopland-digital-orange);
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);


    /* text-shadow: 
        80px 32px 9px rgba(255, 0, 0, 0.81), 
        -137px -34px 7px rgb(0, 148, 0),
        50px 20px 10px rgba(0, 0, 255, 0.5),
        -50px -20px 10px rgba(255, 255, 0, 0.5),
        30px 15px 5px rgba(0, 255, 255, 0.7),
        -30px -15px 5px rgba(255, 0, 255, 0.7),
        20px 10px 15px rgba(0, 255, 0, 0.6),
        -20px -10px 15px rgba(255, 0, 0, 0.6),
        10px 5px 20px rgba(0, 0, 255, 0.8),
        -10px -5px 20px rgba(255, 255, 0, 0.8),
        40px 20px 25px rgba(0, 255, 255, 0.4),
        -40px -20px 25px rgba(255, 0, 255, 0.4),
        60px 30px 30px rgba(0, 255, 0, 0.3),
        -60px -30px 30px rgba(255, 0, 0, 0.3),
        70px 35px 35px rgba(0, 0, 255, 0.9);

        text-shadow: 
        80px 32px 9px rgba(255, 0, 0, 0.81), 
        -137px -34px 7px rgb(0, 148, 0),
        50px 20px 10px rgba(0, 0, 255, 0.5),
        -50px -20px 10px rgba(255, 255, 0, 0.5),
        30px 15px 5px rgba(0, 255, 255, 0.7),
        -30px -15px 5px rgba(255, 0, 255, 0.7),
        20px 10px 15px rgba(0, 255, 0, 0.6),
        -20px -10px 15px rgba(255, 0, 0, 0.6),
        10px 5px 20px rgba(0, 0, 255, 0.8),
        -10px -5px 20px rgba(255, 255, 0, 0.8),
        40px 20px 25px rgba(0, 255, 255, 0.4),
        -40px -20px 25px rgba(255, 0, 255, 0.4),
        60px 30px 30px rgba(0, 255, 0, 0.3),
        -60px -30px 30px rgba(255, 0, 0, 0.3),
        70px 35px 35px rgba(0, 0, 255, 0.9); */
    color: rgba(255, 255, 255, 0.9);

    /* animation: color_animation_introduction 2s infinite ; */

    /* text-shadow: 
        -150px -50px 2px rgba(255, 0, 0, 0.8), 
        -125px -45px 3px rgba(255, 63, 0, 0.8),
        -100px -40px 4px rgba(255, 127, 0, 0.8),
        -75px -35px 5px rgba(255, 191, 0, 0.8),
        -50px -30px 6px rgba(255, 255, 0, 0.8),
        -25px -25px 7px rgba(191, 255, 0, 0.8),
        0px 0px 8px rgba(127, 255, 0, 0.8),
        25px 25px 9px rgba(63, 255, 0, 0.8),
        50px 30px 10px rgba(0, 255, 0, 0.8),
        75px 35px 11px rgba(0, 255, 63, 0.8),
        100px 40px 12px rgba(0, 255, 127, 0.8),
        125px 45px 13px rgba(0, 255, 191, 0.8),
        150px 50px 14px rgba(0, 255, 255, 0.8),
        175px 55px 15px rgba(0, 191, 255, 0.8),
        200px 60px 16px rgba(0, 127, 255, 0.8); */
}

@keyframes color_animation_introduction {
    0%{
        text-shadow: 
        80px 32px 9px rgba(255, 0, 0, 0.81), 
        -137px -34px 7px rgb(0, 148, 0),
        50px 20px 10px rgba(0, 0, 255, 0.5),
        -50px -20px 10px rgba(255, 255, 0, 0.5),
        30px 15px 5px rgba(0, 255, 255, 0.7),
        -30px -15px 5px rgba(255, 0, 255, 0.7),
        20px 10px 15px rgba(0, 255, 0, 0.6),
        -20px -10px 15px rgba(255, 0, 0, 0.6),
        10px 5px 20px rgba(0, 0, 255, 0.8),
        -10px -5px 20px rgba(255, 255, 0, 0.8),
        40px 20px 25px rgba(0, 255, 255, 0.4),
        -40px -20px 25px rgba(255, 0, 255, 0.4),
        60px 30px 30px rgba(0, 255, 0, 0.3),
        -60px -30px 30px rgba(255, 0, 0, 0.3),
        70px 35px 35px rgba(0, 0, 255, 0.9);
    color: rgba(255, 255, 255, 0.9);
    }
    25% {
        text-shadow: 
        80px 32px 9px rgba(255, 0, 0, 0.2), 
        -137px -34px 7px rgba(0, 148, 0, 0.2),
        50px 20px 10px rgba(0, 0, 255, 0.2),
        -50px -20px 10px rgba(255, 255, 0, 0.2),
        30px 15px 5px rgba(0, 255, 255, 0.2),
        -30px -15px 5px rgba(255, 0, 255, 0.2),
        20px 10px 15px rgba(0, 255, 0, 0.2),
        -20px -10px 15px rgba(255, 0, 0, 0.2),
        10px 5px 20px rgba(0, 0, 255, 0.2),
        -10px -5px 20px rgba(255, 255, 0, 0.2),
        40px 20px 25px rgba(0, 255, 255, 0.2),
        -40px -20px 25px rgba(255, 0, 255, 0.2),
        60px 30px 30px rgba(0, 255, 0, 0.2),
        -60px -30px 30px rgba(255, 0, 0, 0.2),
        70px 35px 35px rgba(0, 0, 255, 0.2);
        color: rgba(255, 255, 255, 0.2);
    }
    
    50% {
         text-shadow: 
        -150px -50px 2px rgba(255, 0, 0, 0.8), 
        -125px -45px 3px rgba(255, 63, 0, 0.8),
        -100px -40px 4px rgba(255, 127, 0, 0.8),
        -75px -35px 5px rgba(255, 191, 0, 0.8),
        -50px -30px 6px rgba(255, 255, 0, 0.8),
        -25px -25px 7px rgba(191, 255, 0, 0.8),
        0px 0px 8px rgba(127, 255, 0, 0.8),
        25px 25px 9px rgba(63, 255, 0, 0.8),
        50px 30px 10px rgba(0, 255, 0, 0.8),
        75px 35px 11px rgba(0, 255, 63, 0.8),
        100px 40px 12px rgba(0, 255, 127, 0.8),
        125px 45px 13px rgba(0, 255, 191, 0.8),
        150px 50px 14px rgba(0, 255, 255, 0.8),
        175px 55px 15px rgba(0, 191, 255, 0.8),
        200px 60px 16px rgba(0, 127, 255, 0.8);
    }
    75%{
        text-shadow: 
        -150px -50px 2px rgba(255, 0, 0, 0.8), 
        -125px -45px 3px rgba(255, 63, 0, 0.8),
        -100px -40px 4px rgba(255, 127, 0, 0.8),
        -75px -35px 5px rgba(255, 191, 0, 0.8),
        -50px -30px 6px rgba(255, 255, 0, 0.8),
        -25px -25px 7px rgba(191, 255, 0, 0.8),
        0px 0px 8px rgba(127, 255, 0, 0.8),
        25px 25px 9px rgba(63, 255, 0, 0.8),
        50px 30px 10px rgba(0, 255, 0, 0.8),
        75px 35px 11px rgba(0, 255, 63, 0.8),
        100px 40px 12px rgba(0, 255, 127, 0.8),
        125px 45px 13px rgba(0, 255, 191, 0.8),
        150px 50px 14px rgba(0, 255, 255, 0.8),
        175px 55px 15px rgba(0, 191, 255, 0.8),
        200px 60px 16px rgba(0, 127, 255, 0.8);
    }
    100% {
        text-shadow: 
        80px 32px 9px rgba(255, 0, 0, 0.81), 
        -137px -34px 7px rgb(0, 148, 0),
        50px 20px 10px rgba(0, 0, 255, 0.5),
        -50px -20px 10px rgba(255, 255, 0, 0.5),
        30px 15px 5px rgba(0, 255, 255, 0.7),
        -30px -15px 5px rgba(255, 0, 255, 0.7),
        20px 10px 15px rgba(0, 255, 0, 0.6),
        -20px -10px 15px rgba(255, 0, 0, 0.6),
        10px 5px 20px rgba(0, 0, 255, 0.8),
        -10px -5px 20px rgba(255, 255, 0, 0.8),
        40px 20px 25px rgba(0, 255, 255, 0.4),
        -40px -20px 25px rgba(255, 0, 255, 0.4),
        60px 30px 30px rgba(0, 255, 0, 0.3),
        -60px -30px 30px rgba(255, 0, 0, 0.3),
        70px 35px 35px rgba(0, 0, 255, 0.9);
    color: rgba(255, 255, 255, 0.9);
    }
    
}

.form-control{
    border: 1px solid light-dark(#9898982b,var(--afk-smn-border-color-dark));
    background-color: light-dark(rgba(255, 255, 255, 0.02), var(--afk-dark-grey-3));
    /* background-color: light-dark(rgba(255, 255, 255, 0.01), var(--afk-dark-grey)); */
    color: rgba(175, 239, 255, 0.58);
    color: rgb(175 239 255 / 46%);
    border-color: rgba(0, 198, 255, 0.23);
    /* border-top: 0px; */
    /* border-left: 0px; */
    /* border-right: 0px; */
    /* border: 1px solid; */
    /* box-shadow: 0px 3px 1px .0rem rgba(13,110,253,.55); */
    border-radius: 5px;
    font-size: 16px;
    transition-duration: 0.2s;
}

.form-control:focus{
    background-color: light-dark(rgba(255, 255, 255, 0.01), var(--afk-dark-grey));
    color: rgba(59, 215, 255, 1);
    border-color: var(--hopland-digital-blue-light);
    
    box-shadow: 0px 3px 0px .0rem rgba(13,110,253,.25);

    /* border-radius: 0px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px; */
    /* font-size: 27px; */
    /* font-family: "good-times"; */
    text-shadow: 0px 0px 1px rgba(0, 198, 255, 1);
}

.form-label {
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--hopland-digital-blue-light);
    background-color: rgba(25, 25, 25, 0.41);
    padding: 5px;
    /* position: absolute;
    transform: translate(0px, -45px); */
    }

.charfield{
    background-color: light-dark(rgba(255, 255, 255, 0.01), var(--afk-dark-grey));
    background-color: transparent;
    /* color: rgba(59, 215, 255, 0.82); */
    border-color: rgba(0, 198, 255, 0.51);
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-radius: 0px;
    font-size: 27px;
    font-weight: 100;
    transition-duration: 0.1s;
}
.charfield:focus{
    background-color: var(--afk-dark-grey-3);
    /* background-color: light-dark(rgba(255, 255, 255, 0.01), var(--afk-dark-grey)); */
    /* color: rgba(59, 215, 255, 1); */
    border-color: var(--hopland-digital-blue-light);
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    box-shadow: 0px 3px 0px .0rem rgba(13,110,253,.25);
    border-radius: 0px;
    font-size: 27px;
    /* font-family: "good-times"; */
    text-shadow: 0px 0px 2px rgba(0, 198, 255, 1);
    
}

.mb-3{
    /* display: flex; */
    padding-top: 25px;
}

.datetimefield{
    width: auto;
}

[type="time"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: light-dark(rgba(255, 255, 255, 0.01), var(--afk-dark-grey));
    background-color: transparent;
    color: rgba(59, 215, 255, 0.82);
    border: 1px solid rgba(0, 198, 255, 0.51);
    /* border-top: 0px;
    border-right: 0px;
    border-left: 0px; */
    border-radius: 5px;
    padding: 5px;
    font-size: 16px;
    transition-duration: 0.2s;
    margin: 0px;
}

[type="time"]:focus {
    background-color: light-dark(rgba(255, 255, 255, 0.01), var(--afk-dark-grey));
    color: rgba(59, 215, 255, 1);
    border-color: var(--hopland-digital-blue-light);
    box-shadow: 0px 3px 0px .0rem rgba(13,110,253,.25);
    /* border-radius: 0px; */
    text-shadow: 0px 0px 1px rgba(0, 198, 255, 1);
}




.hd-btn{
    border: 1px solid light-dark(#9898982b,var(--afk-smn-border-color-dark));
    background-color: light-dark(rgba(255, 255, 255, 0.02), var(--afk-dark-grey-3));
    /* background-color: light-dark(rgba(255, 255, 255, 0.01), var(--afk-dark-grey)); */
    color: rgba(175, 239, 255, 0.58);
    color: rgb(175 239 255 / 46%);
    border-color: rgba(0, 198, 255, 0.23);
    /* border-top: 0px; */
    /* border-left: 0px; */
    /* border-right: 0px; */
    /* border: 1px solid; */
    /* box-shadow: 0px 3px 1px .0rem rgba(13,110,253,.55); */
    border-radius: 5px;
    font-size: 16px;
    transition-duration: 0.2s;
}
.hd-btn:hover{
    background-color: light-dark(rgba(255, 255, 255, 0.01), var(--afk-dark-grey));
    color: rgba(59, 215, 255, 1);
    border-color: var(--hopland-digital-blue-light);
    /* border-top: 0px;
    border-left: 0px;
    border-right: 0px; */
    box-shadow: 0px 3px 0px .0rem rgba(13,110,253,.25);
    /* border-radius: 0px; */
    /* font-size: 27px; */
    /* font-family: "good-times"; */
    text-shadow: 0px 0px 1px rgba(0, 198, 255, 1);
}