/* ----------------------------------------------------------------
	Portal CSS
-----------------------------------------------------------------*/

.portal-menu-top{
	background-color: #004ede !important;
}
.portal-menu-top #header-wrap{
	background-color: #004ede !important;
}


.side-menu{
	padding: 40px;
	border-right: solid 2px #ddd;
	height: 100vh;
	background-color: #fff;
	position: fixed;
	width: 25%;
	top: 106px;
	/* overflow-y:scroll; */
}

.side-link a{
	color: #555;
}

.portal-logo{
	width: 100px;
	height: auto;
}

.side-menu-field{
	border-bottom: solid 2px #ddd;
	padding: 20px 0px;
	width: 100%;
}

.side-link{
	padding: 6px 10px;
	margin-bottom: 0px;
	width: 100%;
	border: solid 0px #fff !important;
}

.side-link:hover{
	background-color: #eee;
}

.portal-content{
	position: relative;
	width: 75%;
	padding: 30px 40px;
	left: 25%;
}

.portal-content-header{
	padding: 20px;
	width: 100%;
	border-bottom: solid 2px #ccc;
	margin-bottom: 40px;
}

.portal-content-header-content{
	width: 60%;
}

.pch-arrow{
	width: 60px;
	height: auto;
	margin-right: 20px;
}

.portal-content-section{
	width: 60%;
}

.portal-box{
	border: solid 2px #ddd;
	background-color: #fff;
	margin-bottom: 40px;
	border-radius: 6px;
}

.portal-box-image{
	padding-bottom: 20px;
}

.portal-box-content{
	padding: 20px;
}



.top-menu-main{
	display: flex;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}

.top-menu-search{
	padding: 10px 10px;
	margin-top: 30px;
	width: 500px;
	background-color: rgba(0, 0, 0, 0.2);
	box-shadow: none;
	border: solid 0px #555;
	border-radius: 6px;
}

.top-menu-search::placeholder{
	color: #ddd;
}

.top-menu-search::input{
	color: #ddd;
}

.portal-logo{
	margin-right: 0px;
	width: 160px;
}

.portal-Overlay{
	width:60%;
	height: 90vh;
	position: fixed;
	top: 70px;
	left: 40%;
	right: 0px;
	z-index: 99999;
	background-color: #efefef;
	border: solid 1px rgba(0, 0, 0, 0.1);
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	transition: left 0.6s;
}

.join-overlay{
	top: 10%;
	width: 70%;
	left: 30%;
	height: 88vh;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

.join2-overlay{
	top: 10%;
	width: 70%;
	left: 30%;
	height: 88vh;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}



.portal-hide{
	display:none;
}

.overlay-logo{
	width:60px;
	height: auto;
	padding: 20px 0px 20px 20px;
}

.overlay-nav{
	border-bottom: solid 5px #004ede;
}

.overlay-content{
	padding: 30px 20px;
}


.overlay-sidebar{
	overflow-y: scroll;
	overflow-x: hidden;
	height: 84vh;
	width: 100%;
	border-right: solid 1px #ddd;
}

.overlay-details{
	overflow-y:scroll;
	height: 84vh;
	width: 100%;
}

.overlay-close{
	border: solid 1px #ddd;
	padding: 6px 10px;
	transition: 0.6s;
}

.overlay-close:hover{
	color: #fff;
	background-color: #004ede;
}



.overlay-details-box{
	border:solid 1px rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	background-color: #f5f6fa;
	padding: 30px 20px;
}

#overlayBox2{
	transition: width 0.6s;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}

.overlay2-header{
	width:100%;
	padding: 20px 0px;
	border-bottom: solid 1px #ddd;
	box-shadow: 3px 3px 3px #ddd;
}

.overlay2-content{
	padding: 40px 20px;
	background-color: #f5f6fa;
	border-bottom-left-radius: 20px;
}

.portal-overlay2-image{
	border-top-left-radius: 20px;
}

.overlay2-box{
	padding: 20px;
	background-color: #fff;
	border: solid 1px #ddd;
	border-radius: 6px;
	margin-bottom: 40px;
}

.o2-close{
	position: absolute;
	top: 10px;
	right: 10px;
}



.expand-overlay{
	width: 100% !important;
	left: 0% !important;
	transition: 0.6s;
}

.expand-btn{
	border: 0px;
	background-color: rgba(0, 0, 0, 0.0);
	color: #555;
}

.expand-btn:hover{
	color: #004ede;
}

.dark-overlay{
	background-color: rgba(0, 0, 0, 0.6);
	width: 100%;
	z-index: 99999;
	position: absolute;
	top: 0px;
	left: 0px;
	transition: 0.1s;
}

.hide-dark-overlay{
	display: none;
}

.create-cont{
	width: 100%;
	border: solid 1px #ddd;
	border-radius: 6px;
}

.create-btn{
	border: 0px;
}

.create-icon{
	font-size: 26px;
	color: #555;
	position: relative;
	top: 3px;
	left: 5px;
}

.portal-btn{
	min-width: 150px;
	border-radius: 6px;
}

.w-80{
	width: 80%;
}





.portal-edit-btn{
	color: red;
	border: solid 1px red;
	border-radius: 6px;
	background-color: #fff;
	height: 40px;
	transition: 0.6s;
}

.portal-edit-btn:hover{
	color: #fff;
	border: solid 1px red;
	border-radius: 6px;
	background-color: red;
	height: 40px;
}

.portal-vis-chbox{
	padding: 20px 50px;
	background-color: #fff;
	border-color: green;
	margin-top: 0px;
}

.portal-vis-chbox:checked{
	background-color: green;
	border-color: green;
}

.portal-vis-chbox:focus{
	box-shadow: 0px 0px 1px green;
}

.vis-text{
	color: #777 !important;
}




.toggleContainer {
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   width: fit-content;
   border: 3px solid #999;
   border-radius: 6px;
   background: #999;
   font-weight: 500;
   color: #999;
   cursor: pointer;
 }
 .toggleContainer::before {
   content: '';
   position: absolute;
   width: 50%;
   height: 100%;
   left: 0%;
   border-radius:6px;
   background: #fff;
   transition: all 0.3s;
 }

 .toggleCheckbox:checked + .toggleContainer{
 	background: #00ff80;
 	border: 3px solid #00ff80;
 }

 .toggleCheckbox:checked + .toggleContainer::before {
    left: 50%;
 	   
 }

 .toggleContainer div {
   padding: 6px;
   text-align: center;
   z-index: 1;
 }
 .toggleCheckbox {
   display: none;
 }
 .toggleCheckbox:checked + .toggleContainer div:first-child{
   color: white;
   transition: color 0.3s;
 }
 .toggleCheckbox:checked + .toggleContainer div:last-child{
   color: #555;
   transition: color 0.3s;
 }
 .toggleCheckbox + .toggleContainer div:first-child{
   color: #343434;
   transition: color 0.3s;
 }
 .toggleCheckbox + .toggleContainer div:last-child{
   color: white;
   transition: color 0.3s;
 }

 .dblue-btn{
 	background-color: #004ede;
 	padding: 5px 10px;
 	border-radius: 6px;
 	transition: 0.6s;
 }

  .dblue-btn:hover{
 	background-color: #001b4d;
 	padding: 5px 10px;
 	border-radius: 6px;
 }

 .fs-20{
 	font-size: 28px;
 	position: relative;
 	top: 5px;
 	margin-top: -5px;
 	margin-bottom: 1px;
 }

 .fs-15{
 	font-size: 20px;
 	position: relative;
 	top: 2px;
 	margin-top: -2px;
 }

 .portal-help-btn{
 	position: fixed;
 	left: 90%;
 	top: 90vh;
 	background-color: #333;
 	color: #fff;
 	border: solid 1px #333;
 	border-radius: 6px;
 }

  .portal-help-btn:hover{
 	background-color: #000;
 	color: #fff;
 }

 .sl-view{
 	background-color: #eee;
 }

 .portal-not-num{
 	position: relative;
 	top: -12px;
 	left: -22px;
 	font-size: 8px;
 	border:solid 1px #fff;
 	padding: 2px;
 	line-height: 1;
 	z-index: 9999;
 	background-color: #004ede;
 }

 .portal-perc-num{
 	font-size: 10px;
 	color:#fff;
 	margin-left: 2px;
 	margin-right:4px;
 }