@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    background-color: #f9f9f9;
    color: grey;
    cursor: default;
    font-family: 'Roboto', sans-serif;
    background-image: url(../mediapool/images/background.png);
    background-size: 1400px auto;
    overflow-x: hidden;
}

.margin-top-7 {
    margin-top: 7rem;
}

.dashboard-wrapper {
    width: 100%;
}

.sectionWrapper {
    background-color: rgb(250,250,250);
    border-radius: .75rem;
    border: 1px solid grey;
    margin: 2rem 0 1.5rem 0;
}

.sectionWrapper > h5 {
    margin: .75rem 0 .75rem 0;
}

#googleMap {
    border-radius: .75rem !important;
    margin-bottom: 1.5rem;
    width:100%;
    height:500px;
}

.material-tooltip {
    padding: 1rem !important;
    border-radius: .75rem !important;
}

.btn {
    box-shadow: none !important;
}

.transparent {
    background: none !important;
}

.interaction-bar {
    padding: 1rem 0 1rem 0 !important;
    margin-bottom: 2rem;
    border-radius: .75rem;
    background: rgb(250,250,250);
    border: 1px solid grey;
}

table.striped {
    background: rgb(250,250,250);
    border: 1px solid grey;
    border-radius: .75rem;
    border-collapse: inherit;
    overflow: hidden;
}

.striped > tbody > tr:nth-child(odd)
{
    background-color: #eeeeee !important;
}

.interaction-bar > * .select-dropdown {
    color: grey !important;
    border-bottom-color: #9e9e9e !important;
}

::placeholder {
    color: black !important;
    opacity: 1;
  }
  
:-ms-input-placeholder {
    color: black !important;
}
  
::-ms-input-placeholder { 
    color: black !important;
}

/* Navbar */
header, main, footer {
    padding-left: calc(300px + 1rem);
    padding-right: 1rem;
}

/* Preloader */
#preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh !important;
    overflow: hidden;
    background-color: #f9f9f9;
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 150px;
}

.lds-ripple div {
    position: absolute;
    border: 3px solid grey;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 3s cubic-bezier(0, 0.2, 0.4, 1.5) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
      top: 75px;
      left: 75px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: 0px;
      left: 0px;
      width: 150px;
      height: 150px;
      opacity: 0;
    }
}

.confirmation-modal {
    border-radius: 1rem !important;
    height: auto;
    max-width: 500px;
}

.modal {
    font-size: 1.15rem;
}

.modal-content > h4 {
    text-align: center;
}

.modal-fixed-footer {
    height: auto !important;
    min-height: 250px;
}

#preload-content {
    display: none;
}

.select-dropdown {
    max-height: 500px !important;
}

ul.dropdown-content {
    border-radius: .75rem !important;
}

ul.pagination {
    margin-top: 3rem;
    text-align: center !important;
}

ul.pagination > .active {
    background-color: #eeeeee !important;
    border-radius: .25rem !important;
    border: 1px solid grey;
}

ul.pagination > li > a {
    font-size: 12pt;
    color: grey;
}

ul.pagination > .active > a {
    color: grey !important;
}

.paginationInfo {
    flex-direction: row;
    margin: -1.5rem 0 4rem 0 !important;
    padding: .5rem 0 .5rem 0 !important;
    border-radius: .25rem;
}

.dropdown-content li > a,
.dropdown-content li > span {
    color: grey !important;
}

nav.desktop {
    background-color: #3D3D3D;
    box-shadow: inherit !important;
    margin-left: 300px;
    width: calc(100% - 300px);
    padding: 0 5% 0 5%;
    z-index: 901;
    position: sticky;
    top: 0;
}

.mobile {
    background-color: white;
    box-shadow: 0px 0px 20px #d1d1d1;
    position: sticky;
    z-index: 900;
    top: 0;
    display: none;
}
  
.nav-header {
    display: flex;
    flex-flow: column;
    text-align: center;
    padding: 1rem 0 1rem 0;
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

.nav-header .subtext {
    margin-top: -1rem;
    font-size: .8rem;
}

.sidenav {
    background-color: #3D3D3D !important;
    box-shadow: none !important;
}

.sidenav-overlay  {
    background-color: rgba(61, 61, 61,.8);
}

.sidenav-trigger {
    color: grey;
}

.sidenav .collapsible-body {
    background-color: #222222 !important;
}

.material-icons-outlined {
    color: grey;
}
.sidenav li > a,
.sidenav .material-icons-outlined,
.sidenav {
  color: white !important;
}

.dashboard {
    max-width: 1500px;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.notification-wrapper {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-bottom: 2rem;
    border-radius: .75rem;
    box-shadow: 0px 0px 5px #d1d1d1;
    background-color: rgba(255, 255, 255, .8);
    text-align: left;
    cursor: pointer;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.notification-wrapper:hover {
    box-shadow: 0 7px 14px rgba(150,150,150,0.25), 0 5px 5px rgba(150,150,150,0.22);
    cursor: pointer;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;   
}

.notification-wrapper > div:first-child {
    width: 100%;
}

.notification-wrapper > * > h5 {
    font-size: 1.5rem;
    margin-top: 0;
}

.notification-wrapper:last-child {
    margin-bottom: 0rem;
}

.notification-text {
    font-size: 1.15rem;
}

.notificationContainer > .link-wrapper {
    margin: -1rem 0 -1rem 0;
}

.notification-link {
    font-size: 1.15rem;
    color: grey;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.notification-link:hover {
    color: #222222;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.boxContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    margin-bottom: 25px;
    margin-top: 3rem;
    transform: scale(.95);
    padding: 2.5rem;
    min-height: 14rem;
    background-color: rgba(255, 255, 255, .8); 
    color: grey;
    box-shadow: 0px 0px 20px #d1d1d1;
    border-radius: .75rem;
    font-size: 2.5rem;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.boxContainer:hover {
    transform: translate(0, -.25rem);
    transform: scale(.97);
    cursor: pointer;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
  }

.boxContainer > .material-icons-outlined {
    color: #f2f2f2;
    margin-top: -6rem;
    margin-bottom: 1.5rem;
    padding: 1.2rem;
    border-radius: .75rem;
}


.orange
{
    background-image: linear-gradient(to top, #eb8f44, #fec404);
}

.orange-unsaturated
{
    background-color: #d8d2a0;
}

.blue
{
    background-image: linear-gradient(to top, #4481eb, #04befe);
}

.blue-unsaturated
{
    background-color: #b4ceee;
}
  
.green
{
    background-image: linear-gradient(to top, #1bc237, #25e15d);
}
  
.green-unsaturated
{
    background-color: #95e0a2;
}
  
.red
{
    background-image: linear-gradient(to top,#b91818, #e12525);
}

.red-unsaturated
{
    background-color: #d69797;
}

.purple
{
    background-image: linear-gradient(to top,#75006c, #b100a2);
}

.purple-unsaturated
{
    background-color: #d3a6cf;
}

.grey
{
    background-image: linear-gradient(to top, #222222, #3D3D3D);
}

.container-text {
    text-align: center;
    font-size: 1.15rem;
}

#admin-user-settings {
    display: none;
}

.notificationContainer {
    background-color: rgba(255, 255, 255, .5);
    text-align: center;
    margin-bottom: 6rem;
    margin-top: 4rem;
    transform: scale(.97);
    padding: 2rem !important;
    color: grey;
    box-shadow: 0px 0px 20px #d1d1d1;
    border-radius: .75rem;
    font-size: 2.5rem;
}

.defaultContainerFlex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    margin-top: -4rem;
    padding: 4rem;
    color: grey;
    border-radius: .75rem;
}

.defaultContainerFlex > .material-icons-outlined {
    color: #f2f2f2;
    margin-top: -6.5rem;
    margin-bottom: 2rem;
    padding: 1.2rem;
    border-radius: .75rem;
}

.flex-width-100 {
    width: 100%;
}

.flex-width-100 > .col > h4 {
    margin-top: .75rem !important;
}

.defaultContainer {
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5rem;
    margin-top: 6rem;
    transform: scale(.97);
    padding: 4rem;
    min-height: 17rem;
    background-color: rgba(255, 255, 255, .8); 
    color: grey;
    box-shadow: 0px 0px 20px #d1d1d1;
    border-radius: .75rem;
}

.defaultContainer > .material-icons {
    color: #f2f2f2;
    margin-top: -8rem;
    margin-bottom: 2rem;
    padding: 1.7rem;
    border-radius: .75rem;
}

/* infobox */
.infobox {
    border-radius: .75rem;
    border: 1px solid grey;
    margin-top: 3rem;
    line-height: 1.5rem !important;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    margin-left: .5rem !important;
    margin-right: .5rem !important;
    min-height: 100px !important;
}

.infobox-icon {
	font-size: 45pt !important;
	width: 7rem;
	color: white;
	background-image: linear-gradient(to top, #222222, #3D3D3D);
    padding-top: .5rem;
	padding-bottom: 1rem;
    border-bottom-left-radius: 3.5rem;
	border-bottom-right-radius: 3.5rem;
	margin-top:-.05rem;
}

.infobox > * > i {
	align-items: flex-start !important;
}

.infobox > .col {
    align-items: center;
}

.infobox > * > h5 {
    margin:0 !important;
    padding-top: .75rem;
    padding-bottom: .3rem;
}

.infobox :last-child {
    margin-top: -.05rem !important;
}

.form-message {
    margin: 2rem 0 2rem 0 !important;
}

button,
a.btn {
    background-image: linear-gradient(to top, #222222, #3D3D3D);
    border-radius: .75rem !important;
}

#login-outer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0 1.15rem 0 1.15rem;
}

#login-container {
    background-color: white;
    width: 100%;
    max-width: 750px;
    box-shadow: 0px 0px 20px #d1d1d1;
    border-radius: .75rem;
    padding: 2rem;
}

#footer {
    margin-top: 3rem;
}


/* Responsive Styles */
@media only screen and (max-width : 992px) {

    .modal {
        top: 8.5% !important;
        width: 95% !important;
    }

    .defaultContainerFlex {
        margin-top: -1.5rem;
    }

    .sidenav {
        background-color: #3D3D3D !important;
    }

    header, main, footer {
        padding-left: 0px !important;
        padding-right: 0px;
    }
  
    .mobile {
      display: block;
    }
  
    nav.desktop {
      position: relative;
      margin-left: 0px;
      width: 100%;
      padding: 0;
      text-align: center;
      padding-left: 0px;
      box-shadow: none;
    }
  
    nav .nav-wrapper {
      color:white;
    }

    .notificationContainer,
    .defaultContainer,
    .defaultContainerFlex
    {
        transform: scale(.95) !important;
        min-width: auto;
    }

    .interaction-bar > * .select-wrapper {
        margin-bottom: 1.5rem;
    }

    .defaultContainer
    {
        margin-top: 3rem !important;
        padding: 1rem;
    }

    .infobox {
        text-align: center;
    }
    
    
  }

/* Mobile */
@media screen and (max-width: 600px) {

    .dashboard {
        padding-left: auto !important;
        padding-right: auto !important;
    }

    .defaultContainerFlex {
        margin-top: -1rem;
    }

    .notificationContainer,
    .defaultContainer,
    .defaultContainerFlex
    {
        transform: scale(.92) !important;
    }

    .defaultContainer,
    #login-container
    {
        padding: .5rem;
    }

    .notificationContainer {
        padding: .75rem !important;
    }

    .notification-wrapper {
        margin-bottom: 1rem !important;
    }

    .notification-wrapper > * > h5 {
        font-size: 1.15rem;
        font-weight: bold;
    }

    .notificationContainer > .link-wrapper {
        margin: 1rem 0 0 0;
    }

  }

/* Animations */
@keyframes scale {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.5);
    }
}