:root {
    --main: #0288d1;
    --secondary: #12a0ed;
    --secondary-hover: #56b5e8;
    --dark: #0d76af;
    --standard-green: #18bb5c;
    --standard-orange: #f49b26;
}

* {
    font-family: Roboto, Arial;
}

.sideBar>ion-icon {
    color: white;
    position: absolute;
    top: 0;
    right: 8px;

    height: clamp(50px, 5.5vw, 90px);
    width: 5vw;

    max-width: 50px;
    min-width: 30px;

    transform: translateX(clamp(45px, calc(5vw + 10px), 60px));
    transition: transform .14s ease-out;
}

.sideBar {
    position: absolute;
    height: fit-content;
    width: max(15vw, min(450px, 100vw));

    top: 0;
    left: 0;
    background-color: white;
    z-index: 5;

    transform: translateX(-100%);
    transition: transform .45s ease-out, box-shadow .75s ease-out;
    min-height: calc(100vh + 100px);

}

.sideBarHead {
    background-color: var(--main);
    height: clamp(50px, 5.5vw, 90px);
}

.sideBar>ion-icon:hover {
    cursor: pointer;
}

.sideBar>ul {
    border: none;
    list-style: none;
    padding: 0;
    margin: 0;
    color: rgba(0, 0, 0, .85)
}

.sideBar li {

    left: 0;
    padding: 25px 5px 25px 5px;

    text-indent: 20px;
    font-size: clamp(1.2rem, 3vw, 1.5rem);

    border-top: 2px solid rgba(0, 0, 0, 0.414);
    white-space: nowrap;

    transition: background-color .2s, font-size .2s, color .2s;
    background-color: white;
}

.sideBar li:nth-last-child(1),
.sideBar li:nth-last-child(2) {
    border-bottom: 2px solid rgba(0, 0, 0, 0.414);
}

.sideBar li:nth-child(1) {
    border-top: none;
}

.sideBar li:hover {
    background-color: #edf8ff;
    cursor: pointer;
    font-size: clamp(1.3rem, 3.2vw, 1.6rem);
}

.sideBar li>ion-icon {
    position: relative;
    top: 3px;
    scale: 1.4;
    transition: transform .3s;
}

.sideBar .open>ion-icon {
    transform: rotate(90deg);
}

.sideBar .dropdownElements {
    position: absolute;
    bottom: 0;
    z-index: -1;
    transition: transform .3s;
    font-size: 23px;
    background-color: white;
    width: 98%;
    pointer-events: none;
}

#sideBarCloseField {
    position: fixed;
    top: 0;
    left: max(15vw, min(450px, 100vw));
    width: 100vw;
    height: 100%;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0);

    transition: background-color .3s;
    /*backdrop-filter: blur(3px);*/
}

.horseDropElement {
    position: relative;
    text-indent: 100px;
    background-image: url("./res/ferd.png");
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: 45px 10px;
    line-height: 60px;
}

.horseDropElement ion-icon {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 12px;
    padding: 3px;
    right: 10px;
    top: 30px;
    transform: translateY(-50%);
    transition: background-color .22s;
    color: rgb(232, 29, 29);
    pointer-events: all;

}

.horseDropElement ion-icon:hover {
    color: rgb(152, 18, 18);
    cursor: pointer;
}

#hallenMenu>.dropdownElements {
    z-index: -2;
}

.dropdownElements p {
    text-indent: 80px;
}

.dropdown {
    transition: margin-bottom .3s, background-color .2s, font-size .2s, color .2s !important;
    position: relative;
}

.dropdown:not(.open) {
    margin-bottom: 0px;
}

.sideBar .dropdown.open>.dropdownElements {
    transform: translateY(100%);
}

.screen#adminScreen {
    width: 100%;
    height: 100%;
    min-height: fit-content;
}

.screen#adminScreen h2 {
    position: relative;
    left: 1%;
}

.userManagement {
    width: 100%;
    min-height: fit-content;
}

.userManagement li {

    position: relative;

    width: 100%;
    left: -22.5px;
    height: 70px;
    padding: 20px 0 20px 0;

    text-indent: 20px;
    line-height: 70px;
    font-size: clamp(1rem, 2vw, 1.8rem);
    color: rgba(0, 0, 0, .75);

    transition: background-color .2s;
    line-break: anywhere;
    overflow: hidden;
    list-style-type: none;

    border-bottom: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
}

ul#unconfList>li:nth-child(1) {
    border-top: 2px solid black;
}

.userManagement h2 {
    margin-left: 1%;
}

.confirmedUsers {
    position: relative;
    width: 98%;
    left: 1%;
    overflow: hidden;

    border: 2px solid var(--secondary);
    box-shadow: 3px 3px 10px rgba(19, 161, 238, .8);
    background-color: white;
    overflow: hidden;
    transition: height .3s;
    margin-bottom: 50px;
}

.confirmedUsers:not(.open) {
    max-height: 90px !important;
}

.confirmedUsers.open {
    max-height: fit-content;
}

.unconfirmedUsers {
    width: 100%;
}

.unconfirmedUsers p,
.confirmedUsers p {
    margin: 0;
}

.confDropdown {
    width: 100%;
    height: 90px;
    border-bottom: 2px solid var(--secondary);

    transition: background-color .2s;
}

.confDropdown:hover {
    background-color: rgba(21, 173, 223, 0.35);
    cursor: pointer;
}

.loadUserPage {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-50%);
    width: 50px;
    height: 110px;
    border-radius: 50px;
}

.loadUserPage:hover {
    color: var(--secondary);
    cursor: pointer;
}

.confDropdown>ion-icon {
    display: block;
    width: 100%;
    height: 100%;
    color: black;
    transition: transform .4s;
    cursor: pointer;
}

.confirmedUsers>ul {
    margin-top: 0;
}

.adText {
    position: absolute;
    bottom: 0;
    left: 0;
}

.deleteButtonDisp.confDisplay {
    position: absolute;
    top: 15px;
    right: 0;


    width: 30%;
    min-width: 200px;
    max-width: 400px;
    height: 70px;

    margin: 0;
}

.button.denyUser,
.button.confUser {
    width: 80px;
    height: 80px;

    margin-bottom: 60px;
    text-align: center;

    border-radius: 50%;
    color: white;
    margin: 0;
}

.button.denyUser ion-icon,
.button.confUser ion-icon {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    transition: background-color .3s, box-shadow .2s, border .3s;
}

.button.denyUser {
    background-color: red;
    box-shadow: 0 5px 7.5px rgba(222, 59, 59, 0.647);
}

.button.denyUser:hover {
    background-color: white;
    border: 1px solid red;
    color: red;
}

.button.denyUser:active {
    box-shadow: none;
}

.button.confUser {
    background-color: rgb(22, 196, 25);
    box-shadow: 0 5px 7.5px rgba(64, 245, 67, 0.603);
}

.button.confUser:hover {
    background-color: white;
    border: 1px solid rgb(22, 196, 25);
    color: rgb(22, 196, 25);
}

.button.confUser:active {
    box-shadow: none;
}

.switch {
    height: 40px;
    width: 80px;
    background-color: gray;
    border-radius: 30px;
    box-shadow: 1px 1px 1px 1px lightgray;

    transition: background-color .2s;

    margin: 15px auto 0 auto;
}

.switch:hover {
    cursor: pointer;
}

.switch:active .switchIndicator {
    scale: 1.05;
}

.switchIndicator {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: white;
    top: 5px;
    left: 5px;

    transition: width .15s, left .2s, scale .1s;
}

.switchContainer p {
    font-size: clamp(.8rem, 1.4vw, 1rem);
    text-transform: uppercase;
}