/*Some vars ig*/
:root {
    --border-of-mand: white
}

/*Some basics*/
body {margin: 0;background: var(--background-color);color: white;font-size: var(--prefered-font-size);font-family: "Courier New"}
#mainContainer {display: flex;}
main {width: calc(100vw - 8.1em);margin-left: 8.1em;}
.bok {padding-right: 1em;}

/*Side nav*/
#sideNavBar {width: 8em;align-items: center;height: 100%;padding-top: 1em;background: var(--background-gradient-navbar);border-right: #000 .1em solid;min-height: calc(100vh - 1em);position: fixed;display: flex;flex-direction: column}
.logoImg {width: 6em;height: 6em;}
.sidenavItem {margin-top: 1em}
#sideNavBar a:link {color: #522b52 !important;text-decoration: none;}
#sideNavBar a:visited {color: #4a1b67;text-decoration: none;}

/*Top search bar*/
#topSearch {width: calc(20% - 5px);background-color: #e493e5;border-radius: 15px;height: 2.5em;margin-left: 80%}
#topSearchBar {background-color: transparent;color: black;width: calc(100% - 2em);display: flex;align-items: center;padding: 5px;overflow: scroll}
#topSearchBarBtn {background-color: transparent;border: 0;margin-right: 5px}

/*Search bar*/
#searchBarContainer {display: flex;justify-content: center;margin-top: 2em}
#searchBar {background-color: #232323;border: .2em solid gray;border-right: 0;color: white}
#searchBarBtn {background-color: #008101;border: .2em solid gray;padding: 0;display: flex;justify-content: center;align-items: center;border-left: 0;}

/*Slider on teh settings page*/
#slider {opacity: 0;}
.slider {display: inline-block;width: 3em;height: 1.5em;background-color: #222;border-radius: 20px;position: relative;transition: .4s;}
#slider:checked + .slider {background-color: #ccc}
.slider::before {position: absolute;content: "";height: 1.5em;width: 1.5em;background-size: 38px;-webkit-transition: .4s;transition: .4s;border-radius: 20px;background-color: #444}
#slider:checked + .slider::before {-ms-transform: translateX(1.5em);transform: translateX(1.5em);background-color: #008101}

/*Question on the faq page*/
.questions {border: #444 .2em solid;padding: .5em;margin-left: 2em;border-radius: 10px;margin-top: 1em;width: 30em}
.questions > div {display: flex;width: 100%;position: relative}
.questions > div > .imgThingy {height: 1em;width: 1em;position: absolute;right: 0}
.answers {display: none;margin-top: .7em;}

/*Additional stuff about the settings page*/
#ptk {font-weight: bold;color: red;}

/*Classes at links*/
.iconLinks {height: 1.2em;background-color: white}

/*Employees*/
#pipik{width: 90%;height: 15vh;background-color: black;border-radius: 25px;padding: 5px;}
.iconEmployee {border-radius: 50%;}
#wsscz{margin-bottom: 5px;}
#LSTV{margin-bottom: 5px}
#verathegai{margin-bottom: 5px}
#simik{margin-bottom: 5px}
.kjlasd{margin-right: 3%}
.nick{display: flex;align-items: center;}
.text{margin-bottom: 10px;margin-left: 10px;}
.dva{display: flex;margin-top: 3%;}
.dvapipici{width: 43%;height: 15vh;border-radius: 25px;padding: 5px;border: 1px solid #e493e5;}
.asdjkl{margin-left: 10px;}

/*Month page*/
.Content{display: flex;flex-direction: column;align-items: center;}
.kalendar{background-color: #d9d9d9;height: 440px;width: 440px;border-radius: 67px;margin-bottom: 1em}
.rok{height: 100px;width: 100%;background-color: #ff6060;align-items: center;display: flex;justify-content: center;border-radius: 67px 67px 0 0;font-size: 42px;margin-bottom: 25px;}
.months{display: flex;justify-content: center;color: black;}
.firstcol{margin-right: 100px;text-align: center;}
.secondcol{text-align: center;}
.month{margin-bottom: 25px;}
.currentYear {border: red 1px solid}

/*Reskins*/
.specialThing {position: absolute;bottom: 4vh;width: 6em;height: 30vh}

/*SSL pop up*/
#sslPopUp {position: absolute;left: calc(50% - 20vw);top: calc(50% - 15vw);width: 40vw;min-height: 20vw;height: fit-content;background-color: #444;border: 1px solid black;padding: 5px}
#sslPopUp > div > button {width: calc(50% - 2em);height: 3em;border: 0;border-radius: 10px;margin-bottom: 1em}
#sslPopUp > h1 {color: red;text-align: center}
#warningText {padding: 2em}
#disapproveSSL {background-color: #666;margin-left: 2em}
#approveSSL {background-color: var(--u-green)}

/*Bug report*/
.bugRep {background-color: var(--background-color);color: white}
.mandatoryAnswer {border-color: var(--border-of-mand)}
#bugRepNote {color: indianred}
#nameLabel {margin-right: 6em}
#submitBugRep {height: 3em; width: 12em;margin: 1em;background-color: var(--u-green);color: white;border-radius: 15px;border: 0}

/*slow internet mode*/
#modeSelector {border-radius: 8px;width: 368px;height: 16px;background-color: #444;display: flex;padding: 0;border: 1px solid #232323}
.modeSelectorInput {border-radius: 8px;width: 16px;height: 16px;border: 0;margin: 0;padding: 0;background-color: black;appearance: none}
.modeSelectorInput:checked {background-color: var(--u-green);}
#selectorForIcon {margin-right: 160px;margin-left: 160px}