@font-face {
    font-family: 'SiemensSans_Global_Bold';
    src: url('../woff2/SiemensSans_Prof_Bold-cbe587a0.woff2') format('woff2');
}

@font-face {
    font-family: 'SiemensSans_Prof_Black';
    src: url('../woff2/SiemensSans_Prof_Black-616fb6d5.woff2') format('woff2');
}

@font-face {
    font-family: 'SiemensSans_Global_Roman';
    src: url('../woff2/SiemensSans_Prof_Roman-369cbdc0.woff2') format('woff2');
}

@font-face {
    font-family: 'SiemensSans_Prof_Roman';
    src: url('../woff2/SiemensSans_Prof_Roman-369cbdc0.woff2') format('woff2');
}

.modal-content {
    background-color: #222831;
    font-family: 'SiemensSans_Global_Bold',sans-serif;
}
.modal-dialog {
    width:85%!important;
    color:rgb(0,190,220);
}
.modal-header {
    border-bottom-color:#393e46;
}
.modal-footer {
    border-top-color:#393e46;
    display:flex;
    justify-content:space-around;
}
.accord{
    background-color:#393e46;
}

.btn-modal-primary {
    color: #090909;
    padding: 0.4em 1.7em;
    font-size: 18px;
    border-radius: 0.3em;
    background: #e8e8e8;
    border: 1px solid #e8e8e8;
    transition: all .3s;
    box-shadow: 3px 3px 6px #686967, -3px -3px 6px #686963;
}

.btn-modal-primary:hover {
    border: 1px solid white;
}

.btn-modal-primary:active {
    box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
}

.btn-modal-secondary {
    color: #090909;
    padding: 0.4em 1.9em;
    font-size: 18px;
    border-radius: 0.3em;
    background: #e8e8e8;
    border: 1px solid #e8e8e8;
    transition: all .3s;
    box-shadow: 3px 3px 6px #686967, -3px -3px 6px #686963;
}



.accordion {
    width: 100%;
    margin: 30px auto 20px !important;
    padding: 0;
    background: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.accordion .link {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px 15px 42px;
    color: #eeeeee;
    font-size: 16px;
    letter-spacing:1px;
    border-bottom: 1px solid #222831;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.accordion div:last-child .link { border-bottom: 0; }

.accordion li i {
  position: absolute;
  top: 16px;
  left: 12px;
  font-size: 18px;
  color: #595959;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 16px;
}


.accordion div.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  color:rgb(0,190,220);
}

/**
 * Submenu
 -----------------------------*/


.submenu {
  display: none;
  background: #444359;
  font-size: 14px;
}

.submenu li { 
    border-bottom: 1px solid #4b4a5e; 
    padding:0;
}

.submenu a {
  display: block;
  text-decoration: none;
  color: #d9d9d9;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.submenu a:hover {
  background: #b63b4d;
  color: #FFF;
}


.topics {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding: 6px 17px;
    margin: 0 15px 10px 0;
    width: auto;
    text-transform: capitalize;
    border: 2px solid rgb(0,153,153);
    border-radius: 24px;
    color: rgb(229,229,234);
    cursor: pointer;
    font-family: 'SiemensSans_Global_Bold',sans-serif;
}

/* .accordion{
    margin:2rem 10rem;
    position: relative;
} */
.accordion-body {
    padding: 0%;
}


.topiclist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem 4rem;
    background-color: #000028;
    margin: -1px;
    overflow: hidden;
}

.topiclist p{
    color:#e8e8e8;
    letter-spacing:1px;
}


.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-color: white;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    content: "\f078"; /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: 'SiemensSans_Global_Bold',sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(0,0,40);
    box-shadow: 0px 2px 6px;
}



.selection-checkbox {
    position: absolute;
    top: 30%;
    left: 3%;
}

.checkbox-label {
    position: relative;
    top: -10px;
    left: 10px;
    cursor: pointer;
}

.checkbox-button {
    position: absolute;
    top: -20%;
    left: 20%;
    height: 34px;
    width: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
}

    .checkbox-button:hover {
        background-color: gray;
    }

    .checkbox-button::after {
        display: block;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        height: 12px;
        width: 12px;
        border-radius: 50%;
        background-color: #fff;
        opacity: 0;
    }

.form-checkbox:checked ~ .checkbox-label .checkbox-button::after {
    opacity: 1;
}

.form-checkbox {
    display: none;
}

.acord-switch {
    width: 100%;
    color: white;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 18px;
    font-size: 16px;
    text-align: left;
    font-family: 'SiemensSans_Global_Bold',sans-serif;
}

.banner-head {
    background-image: linear-gradient(to bottom, rgb(0,85,124),rgb(0,190,220));
    margin: -1px;
    height: 50px;
    font-family: 'SiemensSans_Global_Bold',sans-serif;
}

.banner {
    margin: 10px;
    background: transparent;
}

.acord-switch:hover {
    text-decoration: none;
    color: white;
}

.acord-switch:focus {
    box-shadow: none;
    text-decoration: none;
}

.button-filter {
    position: relative;
    display: block;
    margin: 0px 2rem;
    width: 6rem;
    height: 6rem;
    background: #282936;
    border-radius: 3rem;
    cursor: pointer;
    outline: none;
    border: 0;
    color:#e8e8e8;
}
.link-header {
    display: flex;
    align-items: center;
    justify-content: center;
}
.link-header i {
    height: 30px;
    width: 30px;
    background: #222831;
    border-radius: 30% 70% 70% 30% / 35% 44% 56% 65%;
    color: #686967;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right:10px;
    cursor:pointer;
}

.link-header i:hover{
    color:red;
    transform:scale(1.2);
}


.help-card {
    background: white !important;
    color: #222831 !important;
    font-family: 'SiemensSans_Global_Bold' !important,sans-serif;
    padding: 20px;
    min-width: 300px;
    height: auto;
    border-radius: 5px;
    margin-bottom: 20px;
}


    .help-card p {
        font-size: 16px;
        color: #222831 !important;
    }


.btn-admin div {
    position: absolute;
    background: #fff;
    top: 50%;
    right: 20px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    transform: translateY(-50%);
    display: flex;
}

.btnadminpanel div p {
    padding: 0;
    margin: 0;
    margin: auto;
    font-size: 12px;
    color: #c50000;
}

.btnadminpanel {
    background: linear-gradient(-45deg, #3f00b5, #9f69fe, #27c8b7, #3f00b5);
    background-size: 800% 400%;
    padding: 0.6em 2em;
    margin: 15px 0px;
    display: flex;
    justify-content: center;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-family: 'SiemensSans_Global_Bold',sans-serif;
    color: white;
    transition: all 2s ease-in-out;
    /*animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both;*/
}

    .btnadminpanel:hover {
        animation: gradient 3s infinite;
        background-position:20% 50%!important;
        transform: scale(1.05);
        color: #222831!important;
    }

    .btnadminpanel:active {
        animation: gradient 3s infinite;
        transform: scale(0.8);
    }



/*@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}*/