/* Set the Organizr theme to either Aquamarine or Hotline */
/* Import the glass-base.css and root variables in the Custom Theme CSS box like below */
/* 

@import "https://gilbn.github.io/theme.park/CSS/addons/organizr/glass-base.css"; 
:root {
    --main-bg-color: url(https://domain.com/your/hosted/wallpaper.jpg) center center/cover no-repeat fixed;
    --mobile-bg-color: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;

    --link-color: #fff;
    --custom-buttons-color: radial-gradient(ellipse at center, #3F51B5 0%, #009688 100%) center center/cover no-repeat fixed;
    --hompage-item-hover: radial-gradient(ellipse at center, rgba(0, 150, 136, 0.33) 0%, #b53f3f73 100%) center center/cover no-repeat fixed;
    --notification-box-line: #000;

    --div-background-color-10: rgba(0, 0, 0, 0.15);
    --div-background-color-15: rgba(0, 0, 0, 0.25);
    --div-background-color-25: rgba(0, 0, 0, 0.35);
    --div-background-color-35: rgba(0, 0, 0, 0.45);
}

*/

/* Replace the variables if you have a dark background  */
/* Light colors for dark backgrounds */
/*
    --div-background-color-10: rgba(255, 255, 255, 0.1);
    --div-background-color-15: rgba(255, 255, 255, 0.15);
    --div-background-color-25: rgba(255, 255, 255, 0.25);
    --div-background-color-35: rgba(255, 255, 255, 0.35);
*/
/* Dark blur colors for bright backgrounds */
/*
    --div-background-color-10: rgba(0, 0, 0, 0.15);
    --div-background-color-15: rgba(0, 0, 0, 0.25);
    --div-background-color-25: rgba(0, 0, 0, 0.35);
    --div-background-color-35: rgba(0, 0, 0, 0.45);
	
*/

/*Settings */
.feeds li>div i {
    color: black !important;
}
.row-in i {
    font-size: 24px;
    color: black;
}
.profile-social-icons a {
    color: #eee;
}
 .btn-info.btn-outline {
    color: #eee !important;
}
 .btn-info.btn-outline:hover {
    background: var(--div-background-color-15);
    color: #fff;
}
.content-wrap {
    background: var(--div-background-color-15) !important;
	border-radius: 0 0 15px 15px;
}
.content-wrap section.content-current {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0);
	border-radius: 0 0 15px 15px;
}
.panel-blue .panel-heading, .panel-info .panel-heading {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: transparent;

}
.panel .table {
    background: transparent !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

}
.sttabs nav ul {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
	border-radius: 15px 15px 0 0;

}
.sttabs nav {
    background: var(--div-background-color-25);
	border-radius: 15px 15px 0 0;
}
#settings-main-system-settings-anchor > .sttabs nav ul li{
	border-radius: 15px;
}
.tab-content>.active {
    background: transparent;
}
.bg-title {
    background: var(--div-background-color-10);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

}
.white-box {
    background: transparent;
}
.white-popup-block {
    background: var(--div-background-color-10) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.user-bg {
	border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#internal-Settings .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
    padding-top: 10px;
}
/* Nav bar
.navbar-header {
    background: transparent !important;
}
*/
@media (min-width: 768px) {
.navbar-static-top {
    background: var(--main-bg) !important;
}
}
/* Dropdown */
.dropdown-menu {
    background: var(--div-background-color-25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

}
.open>.dropdown-menu {
    display: block;
	border-radius: 15px;
}
.navbar-top-links .dropdown-user {
    border-radius: 15px;
}
#plexRecent  .recent-filter {
        background: var(--div-background-color-25) !important;
		border-radius: 15px;
}
/* Side bar */
.sidebar {
    background: var(--div-background-color-15) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none;

}
.sidebar-head {
    background: transparent !important;
}

/*Calendar */
 .fc-toolbar {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: var(--div-background-color-15) !important;

}
.fc-view {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: var(--div-background-color-15) !important;
	border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.fc-popover {
    background: var(--div-background-color-25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

}
#homepageOrdercalendar .fc-toolbar {
	border-top-left-radius: 15px;
    border-top-right-radius: 15px;

}
 .fc-row, .fc-unthemed {
	border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
/* Calendar mobile*/
.fc th.fc-widget-header {
    padding-left: 5px;
}
/*Error page */
.error-body {
    padding-top: 15%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: -webkit-fill-available;
    margin-top: -10%;

}


/* notify - popup */
.iziToast.update-notify.iziToast-layout2, .iziToast.success-notify.iziToast-layout2 {
    border: none;
    background: var(--div-background-color-25) !important;
    border-bottom: transparent;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

}
.iziToast.warning-notify.iziToast-layout2 {
    background: var(--div-background-color-25);
    border: 1px solid transparent;
    border-bottom: transparent;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

}
.iziToast:after {
    background: transparent !important;
}
.mfp-container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

}
.mfp-zoom-out.mfp-ready.mfp-bg {
    opacity: 1 !important;
    background: var(--main-bg-color) !important;
}
.mfp-wrap {
    background: var(--main-bg-color);
}
.main-email-panel .panel-body {
    background: var(--div-background-color-25) !important;
	border-bottom-right-radius: 15px !important;
	border-bottom-left-radius: 15px !important;
}
.white-popup-block {
     background: var(--div-background-color-25) !important;
}
.white-popup .panel-footer {
    background: var(--div-background-color-25);
    border-top: 1px solid #fff;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.panel>.table-responsive:last-child>.table:last-child, .panel>.table:last-child {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
/* Homepage downloader */

#homepageOrderdownloader {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: var(--div-background-color-15);
    padding: 10px;
	border-radius: 15px;

}
#homepageOrderdownloader .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
    padding-top: 14px;
}
#homepageOrderdownloader .nav-tabs>li>a {
    padding-top: 14px;
}

/* Homepage card */
.nowPlayingItem > .white-box > .el-card-item {
    background: var(--div-background-color-15) !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
	border-radius: 15px;

}
.active-tab-Homepage .white-popup .panel-body, .white-popup>.col-md-6>.white-box:nth-child(2) {
    background: var(--div-background-color-25) !important;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}
#plexStreams .el-element-overlay .el-card-item .el-overlay-1 img, #plexStreams .el-element-overlay:hover .el-card-item:hover .el-overlay-1:hover img:hover {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.el-element-overlay .el-card-item .el-overlay-1 {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.el-element-overlay .el-card-item .el-overlay {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
}
.white-popup .panel-heading, .white-popup>.col-md-6>.white-box:first-child {
    background: var(--div-background-color-25) !important;
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
}


.label-info {
    background: var(--div-background-color-25);
}

#plexRecent, #homepageOrderplexplaylist, #homepageOrdercalendar, #homepageOrderembyrecent, #ombi-requests, #homepageOrderdeluge, #homepageOrdernzbget, #homepageOrdertransmission, #homepageOrderrTorrent, #homepageOrderjdownloader, #homepageOrdersabnzbd,#homepageOrderqBittorrent  {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: var(--div-background-color-15);
    margin: 5px;
    border-radius: 15px;

}
.bg-info {
    background-color: transparent !important;
}
/* Health checks */
.card-body {
    background: var(--div-background-color-25) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

}
.bg-inverse .healthPosition {
    background: var(--div-background-color-25) !important;
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);

}

/* Unifi cards */
.unifiCards .panel-wrapper.collapse.in {
    background: var(--div-background-color-15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;

}
.unifiCards .panel-heading {
    background: var(--div-background-color-35) !important;
    color: #fff !important;
    border-color: transparent !important;
    text-align: inherit !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
	border-top-left-radius: 15px;
    border-top-right-radius: 15px;
	border-bottom: 0px;
}

.unifiCards .panel-warning .panel-heading, .unifiCards .panel-success .panel-heading {
	border-top-left-radius: 15px;
    border-top-right-radius: 15px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}
#allUnifi .unifiCards .panel .panel-warning {
	border-radius: 15px !important;

}
.unifiCards	.ti-close:before {
	content: "\f111";
	font-family: FontAwesome;
	font-size: 20px;
	color: rgba(255, 69, 58, 1);
	}
.unifiCards	.ti-minus:before {
	content: "\f111";
	font-family: FontAwesome;
	font-size: 20px;
	color: rgba(255, 204, 0, 1);
	}
.unifiCards	.ti-plus:before {
	content: "\f111";
	font-family: FontAwesome;
	font-size: 20px;
	color: rgba(40, 205, 65, 1);
    }
/* Custom HTML */    
    #homepageOrdercustomhtmlTwo, #homepageOrdercustomhtml {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background: var(--div-background-color-15);
        border-radius: 15px;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 5px;
    }    
/* Invite */
#invite-area .bg-org {
    background: var(--div-background-color-15) !important;
	border-radius: 15px;
}
#new-invite-area .white-popup .panel-body,#new-invite-area .white-popup>.col-md-6>.white-box:nth-child(2) {
    background: var(--div-background-color-15) !important;
	border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.white-popup .panel-body, .white-popup>.col-md-6>.white-box:nth-child(2) {
    background: var(--div-background-color-15) !important;
	border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

/* Email users */
.email-div .panel-body {
    border-radius: 0px !important;
}
/* Speedtest popup */

#speedtest-area .white-popup .panel-footer {
	background: var(--div-background-color-25) !important;
	border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
#speedtest-area .white-popup .panel-body,#speedtest-area .white-popup>.col-md-6>.white-box:nth-child(2) {
	border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}
/* Modal */
.modal-content, .modal-header, .modal-footer, .modal-body {
    background: var(--div-background-color-10) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
	border-color: transparent;
}
.modal-body {
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}
.modal-header {
	border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.modal-open .modal {
    background: var(--main-bg-color);
}
.modal-content {
    border-radius: 15px;
    box-shadow: none;
}
/* loginpage sidemenu */
@media (max-width: 480px) {
   #wrapper .login-register > .login-box > .white-box {
     background: transparent !important;
     margin-top: auto !important;
     width: 100% !important;
    -webkit-backdrop-filter: blur(0px) !important;
    backdrop-filter: blur(0px) !important;


   }
   }

@media (max-width: 480px) {
   .login-box.login-sidebar {
    background: var(--div-background-color-15) !important;
    -webkit-backdrop-filter:  blur(10px);
    backdrop-filter:  blur(10px);

}
}

/* logo */
	.white-box .visible-xs {
		display: block!important;
	}
	.loginLogo {
    border: 0;
    margin-top: -60%;
    transform: translateY(-10%);
	}
	@media (max-width: 480px) {
		.loginLogo {
		margin-top: -10% !important;
		}
	}
	.blockUI {
		opacity: 1 !important;
		background-color: transparent !important;
	}
	.blockMsg {
		background: rgba(0, 0, 0, 0.9) !important;
		border: none !important;
	}
	
    .login-register > .login-box > .white-box {
    background: var(--div-background-color-25) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    -webkit-box-shadow: none;
    box-shadow: none;
    }


    .login-register {
		
        height: 100%;
        position: fixed;
    }

	.slideInRight {
		-webkit-animation-name: none;
		animation-name: none;
	}

	.login-register  .login-box  .white-box  .bg-org {
		background-color: transparent !important;
    }

	/*2FA login button*/
	.panel-wrapper .panel-body > .btn-warning, .btn-warning.disabled {
        background: var(--div-background-color-15) !important;
        border: 1px solid #ffc36d00 !important;
        }

        /*2FA animation header*/
        .panel-warning .panel-heading, .panel-yellow .panel-heading {
        color: #fff;
        border-radius: 3px;
        background-color: rgba(0, 0, 0, 0.3);
        border-color: #00000000;
        }

        /*oAuth Successful*/
        .panel-green .panel-heading, .panel-success .panel-heading {
        color: #53e69d;
        text-align: center;
        text-transform: uppercase;
        border-radius: 3px;
        background-color: transparent;
        border-color: transparent;
        }

	/*Login sidebar*/
	.login-box.login-sidebar,
	#login-panels .panel-body,
	#login-panels .panel {
		background: transparent;
	}
	
    #login-panels  .form-control ,  #login-panels .btn {
    background: rgba(255, 255, 255, 0.35);
    color: white;
    border-radius: 25px;
    border: none;
    }
  /*  #login-panels {
    height: 44px;
    }*/
    #login-panles .btn-info.disabled.focus .btn-info.disabled:focus .btn-info.disabled:hover .btn-info.focus .btn-info:focus .btn-info:hover .btn:hover {
    background: rgba(255,255, 255, 0.65);
    border:none;

    }
	/*Center login Box*/
	.login-sidebar {
		position: relative;
		right: initial;
	}

	#lockScreen .white-box {
		width: 400px;
		height: 345px;
	}
	.login-sidebar .white-box {
		width: 100%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	#lockScreen .white-box {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: var(--div-background-color-25);
		-webkit-box-shadow: none;
		box-shadow: none;
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-radius: 15px;
    }
    .form-control::placeholder {
        color: white;
    }
    #login-username-Input, #login-password-Input {
            text-align: center;
    }
    .panel .panel-heading .panel-title, label, span, .fa-lock:before {
    color: #ffffff;
    }
	/* Lock screen */ 
	#lockScreen .form-material .form-control, .form-material .form-control:focus {
		background: rgba(255, 255, 255, 0.35);
		border-radius: 25px;
		padding: inherit;
		text-align: center;
	}
	 #lockScreen  .btn-info {
		background: rgba(255, 255, 255, 0.35);
		border-radius: 25px;
	 }

/* Extra */
.cbutton {
    background-color: var(--div-background-color-25) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
	border-radius: 15px !important;
	border: none !important;
	padding: 4px !important;

}
.cbutton:hover {
    background: var(--div-background-color-25) !important;
    -webkit-backdrop-filter: saturate(180%) blur(30px) !important;
    backdrop-filter: saturate(180%) blur(30px)!important;
    opacity: 1 !important;

}

/* Debug modal */
.mdi-package-variant-closed:before {
    content: "\F3D7";
    color: black;
}
.mdi-receipt:before {
    content: "\F449";
	color: black;
}
.debugModal .modal-body{
    border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}
.debugModal .modal-footer {
    background: var(--div-background-color-10) !important;
    border-bottom-left-radius: 15px !important;
	border-bottom-right-radius: 15px !important;
}
#debugPreInfo .slimScrollDiv, #debugResults .slimScrollDiv {
	background: var(--div-background-color-15);
}
/* Swal popup */
.swal-overlay--show-modal .swal-modal {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: var(--div-background-color-25);
    border-radius: 15px;
}
.swal-title {
    color: white;
}
.swal-overlay--show-modal {
    background: var(--main-bg-color);
}

/* Mobile*/
@media (max-width: 480px) {
#page-wrapper {
    background: var(--mobile-bg-color)  !important;
  background-size: cover;
  background-repeat: no-repeat;
    width: 100%;
  height: 100%;
}
#side-menu {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}	
.navbar-header {
    background: var(--div-background-color-25)    !important;
	    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
}
.navbar-default {
    background: var(--mobile-bg-color);
    border-color: #e7e7e7;
}

#internal-Settings {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    background: var(--mobile-bg-color) !important;
}
.mfp-zoom-out.mfp-ready.mfp-bg {
    opacity: 1 !important;
    background: var(--mobile-bg-color) !important;
}
.mfp-wrap {
    background: var(--mobile-bg-color)!important;
}
.modal-open .modal {
    background: var(--mobile-bg-color)!important;
}
#page-wrapper {
    background: var(--mobile-bg-color) !important;
}
#internal-Settings, #preloader, .preloader, .active-tab-Settings, .error-page {
    background: var(--mobile-bg-color) !important;
}
html {
    background: var(--mobile-bg-color) !important;
}
}