/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #a1a1a1 ; 
  border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #6b6b6b ; 
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #0f5765 ; 
}
   

* a{
	color: inherit;
	text-decoration: none;
}

* b{
	margin-right: 10px;
	display: inline-block;
}

/*input, textarea {
	font-size: 16px;
}*/

  
html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #fcfbfa;	
	/*background-color: #fcfcfc;*/	
	color: #3E3E3E ;
	font-family: 'Times New Roman', Times, serif;
}


.loader-bg{	
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(00, 00, 00, 0.2);
	z-index: 98;
}

.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: inline-block;
	border-top: 4px solid #e16c27;
	border-right: 4px solid transparent;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}
.loader::after {
	content: '';  
	box-sizing: border-box;
	position: absolute;
	left: 0;
	top: 0;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	border-left: 4px solid #0f5765;
	border-bottom: 4px solid transparent;
	animation: rotation 0.5s linear infinite reverse;
}
@keyframes rotation {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
} 


.prompter{
	display: none;
	position: fixed;
	width: 300px;
	height: 80px;
	top: 30px;
	right: 5px;
	background-color: #0f5765;
	border-radius: 8px;
	padding: 10px;
	z-index: 99;
}


.prompter-close i{
	font-size: 20px;
	color: #fff;
}

.prompter-text{
	color: #fff;
	padding: 10px;
}

@keyframes loadingEffect{
	0% {
	  width: 0%;
	}
	100% {
	 	width: 100%;
	}

}

.promter-loader{
	width: 100%;
	height: 4px;
	background-color: #fff;
	animation: loadingEffect;
	animation-duration: 5s;
	animation-fill-mode: forwards;
	border-radius: 6px;
}

.login-main{
	display: flex;
	width: 100%;
	height: 100%;
	/*background-image: url("../images/bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;*/
}

.login-area{
	vertical-align: middle;
	width: 1000px;
	height:  500px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: table;	
	box-shadow: 0 0 20px -10px #0f5765;	
	padding: 20px;
	/*background-color: rgb(00, 00, 00, 0.4);*/
}

.login-text{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.login{	
	display: table-cell;
	width: 40%;
	vertical-align: middle;
}

.login-text .logoarea{
	width: 60%;
	display: inline-block;
	text-align: left;
}

.login-text img{
	width: 90px;
}

.login-text h3{
	display: inline-block;
	width: 60%;
	text-align: left;
	margin: 5px;
	font-size: 30px;
	color: #0f5765;
}
.login-text p{
	display: inline-block;
	width: 60%;
	text-align: left;
	margin: 5px;
}

.login-text p a{
	color: #0f5765;
	text-decoration: underline;
}

.login-text p a:hover{
	color: #e84f01;
}

.login form{
	padding-top: 20px;
	width: 300px;
}

.resend-btn{
	cursor: pointer;
}

.label{
	color: #515151;
	text-align: left;
	padding: 4px;
	font-size: 13px;
}


.box{
	border-bottom: 1px solid #0f5765;
	padding: 3px;
	margin-bottom: 15px;
	font-size: 13px;	
	box-shadow: 0 0 10px -5px #0f5765;
	border-radius: 4px;
}

.box i{
	font-size: 20px;
	width: 20px;
}
.box input[type=text]{
	padding: 8px;
	display: inline-block;
	width: 85%;
	background-color: transparent;
	border: none;
	outline: none;
}

.box input[type=number],
.box select,
.box input[type=date],
.box input[type=email],
.box input[type=password],
.box input[type='datetime-local'],
.box input[type=file]{
	padding: 8px;
	display: inline-block;
	width: 85%;
	background-color: transparent;
	border: none;
	outline: none;
}

#password{
	width: 80%;
}

.passView{
	cursor: pointer;
}

.box textarea{
	padding: 8px;
	display: inline-block;
	width: 95%;
	background-color: transparent;
	border: none;
	outline: none;
}

.box #password-input{
	padding: 8px;
	display: inline-block;
	width: 75%;
	background-color: transparent;
	border: none;
	outline: none;
}

.box #password-input2{
	padding: 8px;
	display: inline-block;
	width: 75%;
	background-color: transparent;
	border: none;
	outline: none;
}

.box .pass{
	font-size: 15px;
}

input[type=submit]{
	padding: 10px;
	display: inline-block;
	width: 99%;
	border: none;
	outline: none;
	background-color: #0f5765;
	color: #fff;
	border-radius: 4px;
	border: 1px solid #0f5765;
}

input[type=submit]:hover{
	background-color: transparent;
	color: #0f5765;
}


.signup-bg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgb(00, 00, 00, 0.2);
	text-align: center;
}

.signup-area{
	position: fixed;
	width: 450px;
	height: 90%;
	overflow-y: auto;
	padding: 10px;
	background-color: #EAECF5;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	border-radius: 6px;
}

.signup-area h3{
	font-size: 25px;
	margin: 0;
	color: #0f5765;
}

.signup-area p{
	font-size: 16px;
	margin: 5px;
	
}

.signup-area img{
	width: 40px;
}

.signup-area form{
	width: 90%;
	display: inline-block;
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
}


.signup-area form input[type=submit]{
	width: 98%;
	padding: 10px;
	border: 1px solid #0f5765;
	outline: none;
	background-color: transparent;
	color: #0f5765;
	text-align: center;
}

.signup-area p a{
	color: #0f5765;
	text-decoration: underline;
}

.signup-close{
	position: absolute;
	right: 10px;
	top: 10px;
	color: #ba0101;
	text-align: right;
}

.signup-close a{
	display: inline-block;
}

.signup-close i{
	font-size: 25px;
}



.forgot-bg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgb(00, 00, 00, 0.2);
	text-align: center;
}

.forgot-area{
	position: absolute;
	width: 400px;
	padding: 20px;
	background-color: #EAECF5;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	border-radius: 6px;
}

.forgot-area h3{
	font-size: 25px;
	margin: 0;
	color: #0f5765;
}

.forgot-area p{
	font-size: 16px;
	margin: 5px;
	
}

.forgot-area img{
	width: 40px;
}

.forgot-area form{
	width: 300px;
	display: inline-block;
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
}


.forgot-area form input[type=submit]{
	width: 98%;
	padding: 10px;
	border: 1px solid #0f5765;
	outline: none;
	background-color: transparent;
	color: #0f5765;
	text-align: center;
}

.forgot-area p a{
	color: #0f5765;
	text-decoration: underline;
}

.forgot-close{
	position: absolute;
	right: 10px;
	top: 10px;
	color: #ba0101;
	text-align: right;
}

.forgot-close a{
	display: inline-block;
}

.forgot-close i{
	font-size: 25px;
}


.main{
	display: flex;
	width: 100%;
	height: 100%;
}

.menu-area{
	width: 70px;
	padding: 5px;
	border-right: 2px #f0f0f0 solid;
	text-align: center;
	display: grid;
    place-items: center;
	z-index: 2;
}

.menu{
	padding-top: 10px;
}

.menu li{
	list-style: none;	
	color: #0f5765;
	margin-bottom: 15px;
	display: inline-block;
	padding: 8px;
	background-color: #f0efef;
	border-radius: 6px;
	width: 45px;
	box-shadow: 0px 0px 5px -3px;
	cursor: pointer;
}

.menu li:hover{
	background-color: #0f5765;
	color: #f0efef;
}
.menu li i{
	font-size: 20px;
}

.menu span{
	font-size: 11px;
	display: block;
}


.container{
	flex: 1;
}

.ribon{
	display: flex;
	padding: 20px;
}

.title-area{
	flex: 1;
}


.title-area .menu-open{
	margin-right: 20px;
	font-size: 25px;
	color: #0f5765;
	text-align: center;
	cursor: pointer;
	display: none;
}

.menu .menu-close{
	margin-bottom: 10px;
	font-size: 25px;
	color: #0f5765;
	text-align: center;
	cursor: pointer;
	display: none;
}

.title-area h3{
	margin: 0;
	font-size: 20px;
	display: inline-block;
}

.search-area{
	flex: 1;
	text-align: center;	
	display: grid;
    place-items: center;
}

.search-box{	
	border: 1px #e2e2e2 solid;
	border-radius: 6px;
	width: 80%;
}

.search-box input[type=search]{
	width: 90%;
	border: none;
	outline: none;
	padding: 6px;
	background-color: transparent;
}

.search-box i{
	font-size: 18px;
}


.search-results{
	display: none;
	position: absolute;
	background-color: #fcfbfa ;
	border: 1px solid #b3b3b3;
	border-radius: 8px;
	width: 350px;
	max-height: 180px;
	overflow-y: auto;
	padding: 5px;
	box-shadow: 0px 0px 20px -13px #000;
	z-index: 97;
}

.search-results li{
	list-style: none;
	text-align: left;
	padding: 8px;
	margin-bottom: 5px;
	cursor: pointer;
	font-size: 13px;
	background-color: #f5f5f5;
	border-radius: 6px;
}

.search-results li:hover{
	background-color: #f0efef;
}

.profile-area{
	flex: 1;
	text-align: right;
}


.profile-area li{
	list-style: none;	
	color: #0f5765;
	margin-right: 10px;
	display: inline-block;
	padding: 8px;
	background-color: #f0efef;
	border-radius: 6px;
	text-align: center;
	box-shadow: 0px 0px 5px -3px;
	cursor: pointer;
}


.profile-area li i{
	font-size: 20px;
}


.profile-area span{
	font-size: 11px;
}

.profile-area li:hover{
	background-color: #0f5765;
	color: #f0efef;
}


.tiles-area{
	display: flex;
	gap: 30px;
	padding: 20px;
	padding-bottom: 10px;
	margin-top: 40px;
	margin-bottom: 20px;
}

.tiles{
	flex:1;
	border-radius: 8px;
	box-shadow: 0px 0px 20px -13px #000;
}

.tile-header{
	background-color: #f9f9f9;
	color: #818181;
	padding: 10px;
	display: flex;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.tile-icon-area{
	width: 40px;
	height: 40px;
	border-radius: 8px;
	padding: 8px;
	text-align: center;
	margin-top: -30px;
	position: relative;
	font-size: 30px;
	z-index: 1;
}

.tile-icon-bg-color1{
	background-color: #f8edd9;
	color: #e16c27;
	/*border: 1px solid #f6b12f;*/
}

.tile-icon-bg-color2{
	background-color: #ccf8d4;
	color: #1ec018;
	/*border: 1px solid #62cb71;*/
}

.tile-icon-bg-color3{
	background-color: #eee8dd;
	color: #f7b226;
	/*border: 1px solid #b658a0;*/
}

.tile-icon-bg-color4{
	background-color: #e5f1f1;;
	color: #0ec8c7;
	/*border: 1px solid #592ff6;*/
}

.tile-text-area{
	flex: 1;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* Align items to the right vertically */
    height: 80px;
}

.tiles h4,
.tiles h3{
	margin: 0;
	text-align: right;
	color: #686868;
}

.tiles h4{
	font-weight: 100;
	font-size: 14px;
	margin-bottom: 5px;
}

.tiles h3{
	color: #555555;
	font-size: 16px;
	font-weight: 600;
}

.tile-footer{
	background-color: #0f5765;
	color: #fff;
	padding: 10px;
	font-size: 13px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}



.tile-icon-bg-color4{
	background-color: #e5f1f1;;
	color: #0ec8c7;
	/*border: 1px solid #592ff6;*/
}


.content{	
	height: calc(100% - 98px);
}

.section-area{
	display: flex;
	height: 100%;
}

.section-area2{
	display: flex;
	height: auto;
}

.section-mini{	
	width: 350px;
	border-right: 2px #f0f0f0 solid;
	padding: 10px;
	overflow-y: auto;
}

.section{
	flex: 1;
	padding: 40px;
	padding-top: 10px;
}


.section2{
	flex: 1;
	padding: 10px;
	padding-top: 10px;
}

.overflow{
	overflow-y: auto;
	max-height: 80vh;
}

.section-header{
	display: flex;
	border-bottom: 2px #f0f0f0 solid;
	margin-bottom: 10px;
	box-shadow: 0 8px 5px -9px;
	padding: 10px;
	border-radius: 6px;
}

.section-header h3{
	flex: 1;
	margin: 0;
	font-size: 15px;
}

.section-header .section-btn{
	width: 100px;
	padding: 8px;
	color: #fff;
	background-color: #0f5765;
	border: 1px solid #0f5765;
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
	cursor: pointer;
	font-weight: normal;
	margin-left: 10px;
}

.section-header .section-btn:hover{
	color: #0f5765;
	background-color: transparent;

}

.items{	
	font-size: 13px;
}

.items li{
	display: flex;
	list-style: none;
	padding: 10px;
	margin-bottom: 10px;
	padding-bottom:10px;
	border-bottom: 2px #f0f0f0 solid;
	cursor: pointer;
	box-shadow: 0 8px 5px -9px;
	border-radius: 6px;
}

.items li i{
	width: 30px;
	border-radius: 6px;
	padding: 3px;
	font-size: 20px;
	display: grid;
	margin: 0;
	margin-right: 10px;
    place-items: center;

}

.items-details{
	flex: 1;
}

.item-top{
	display: flex;
}

.item-name{
	flex: 1;
	font-weight: 700;
}

.item-amount{
	flex: 1;
	text-align: right;
}

.item-bottom{
	display: flex;
}

.item-client{
	flex: 1;
}

.item-status{
	width: 50px;
	text-align: right;
}

.header{
	font-weight: 900;
	background-color: #f0efef;
	color: #000;
}

.header h3{
	margin: 0;
}

.body{		
	color: #707070;
	background-color:#f7f7f7;
}

.log-message{
	display: grid;
    place-items: center;
	height: 100%;
	font-size: 13px;
}


.popupbg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: rgb(00,00,00,0.3);
	z-index: 96;
}

.popup{
	width: 90%;
	max-height: 90%;
	min-height: 80%;
	overflow-y: auto;
	background-color: #fcfbfa;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 4px;
	padding: 20px;
}

.popup-close{
	text-align: right;
	margin-bottom: 0px;
}

.popup-close i{
	color: #0f5765;
	font-size: 20px;
	cursor: pointer;
}

.popup-split{
	display: flex;
}

.popup-split-left{
	width: 400px;
	margin-right: 20px;
}

.popup-split-right{
	flex: 1;
	height: calc(100vh - 200px);
	padding: 20px;
	overflow-y: auto;
}

.popup h3{
	margin: 0;
	font-size: 18px;
	color: #0f5765;
}

.btn-area{
	display: flex;
}

.btn{
	width: 80px;
	padding: 6px;
	color: #fff;
	background-color: #0f5765;
	border: 1px solid #0f5765;
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
	cursor: pointer;
	font-weight: normal;
	margin-left: 10px;
}
.btn:hover{
	color: #0f5765;
	background-color: transparent;
}

.popup-split-left p{
	font-size: 14px;
}


.platform-bg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: rgb(00,00,00,0.3);
	z-index: 97;
}

.platform{
	width: 450px;
	min-height: 90px;
	max-height: 90%;
	background-color: #fcfbfa;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 6px;
	padding: 10px;
	overflow-y: auto;
}


.platform-close{
	text-align: right;
	margin-bottom: -20px;
}

.platform-close i{
	color: #0f5765;
	font-size: 20px;
	cursor: pointer;
}

.platform-body{
	margin-top: -5px;
	padding: 20px;
}

.platform-body h3{
	margin: 0;
	margin-bottom: 10px;
	font-size: 15px;
}



.alert-bg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: rgb(00,00,00,0.3);
	z-index: 97;
}

.alert{
	width: 400px;
	min-height: 90px;
	max-height: 90vh;
	overflow-y: auto;
	background-color: #fcfbfa;	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 4px;
	padding: 10px;
}


.alert-close{
	text-align: right;
	margin-bottom: -20px;
}

.alert-close i{
	color: #0f5765;
	font-size: 20px;
	cursor: pointer;
}

.alert-body{
	margin-top: -5px;
	padding: 20px;
}

.alert-body h3{
	margin: 0;
	margin-bottom: 10px;
	font-size: 15px;
}

.list{
	margin: 0;
}
.list h3{
	margin: 0;
	margin-bottom: 10px;
	padding: 8px;
	border-radius: 6px;
	font-size: 15px;
	box-shadow: 0 0 20px -9px;
}

.list li{
	display: flex;
	list-style: none;
	padding: 4px;
	margin-bottom: 12px;
	border-bottom: 2px #f0f0f0 solid;
	box-shadow: 0 8px 5px -9px;
	border-radius: 6px;
	font-size: 13px;
	place-items: center ;
}

.list li i{
	width: 30px;
	border-radius: 6px;
	padding: 3px;
	font-size: 13px;
	display: grid;
	margin: 0;
	margin-right: 10px;
    place-items: center;
}

.name{
	flex: 1;
	display: flex;
}

.contact{
	flex: 1;
}

.email{
	flex: 1;
}

.status{
	flex: 1;
}

.action{
	flex: 1;
}

.amount{
	flex: 1;
}

.hide{
	display: none;
}

.name i{
	display: inline-block;
	cursor: pointer;
}

.shortColumn{
	flex: none;
	width: 120px;
}


.color1{
	color: #e16c27;
}

.color2{
	color: #1ec018;
}

.color3{
	color: #f7b226;
}

.color4{
	color: #0ec8c7;
}

.bg-color1{
	background-color: #ffdddd;
	/*border: 1px solid #f6b12f;*/
}

.bg-color2{
	background-color: #ccf8d4;
	/*border: 1px solid #62cb71;*/
}

.bg-color3{
	background-color: #eee8dd;
	/*border: 1px solid #b658a0;*/
}

.bg-color4{
	background-color: #e5f1f1;
	/*border: 1px solid #592ff6;*/
}

.bg-color5{
	background-color: #e9e9e9;
	color: #515151;
	/*border: 1px solid #592ff6;*/
}

.notificationson, 
.notificationsoff, 
.instructions,
.viewMessage,
.apion,
.apioff{
	cursor: pointer;
}

.form-action{
	display: flex;
	margin-top: 20px;
	gap: 20px;
}


.approveLPR{
	padding: 10px;
	cursor: pointer;
	background-color: #ba0101;
	border: 1px solid #ba0101;
	border-radius: 4px;
	width: 90px;
	text-align: center;
	color: #fff;
	font-size: 13px;
}

.approveLPR:hover{
	background-color: transparent;
	color:  #047014;
}


.declineLPR{
	flex: 1;
	padding: 10px;
	cursor: pointer;
	background-color: #047014;
	border: 1px solid #047014;
	border-radius: 4px;
	text-align: center;
	color: #fff;
	font-size: 13px;
}

.declineLPR:hover{
	background-color: transparent;
	color: #ba0101;
}


.deluser{
	cursor: pointer;
}

.updatelogo,
.changeTemp,
.updatesign{
	display: none;
}

.apiswitch,
.newkey{
	font-size: 20px;
	cursor: pointer;
}

.lift{
	margin: 0;
}


.lift .close{
	display: none;
	font-size: 30px;
	text-align: left;
	color:  #0f5765;
}

.pagination{
	width: auto;
	display: inline-block;
}

.crypto{
	cursor: pointer;
}



.network-logos{
	display: block;
	text-align: center;
	margin-top: 20px;
}

.network-logos img{
	display: inline-block;
	width: 50px;
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 10px;
}


.spinner{
	display: block;
	margin-top: 20px;
	text-align: center;
}

.initiatedLoader {
	width: 64px;
	height: 48px;
	position: relative;
	display: inline-block;
	animation: split 1s ease-in infinite alternate;
  }
.initiatedLoader::before , .initiatedLoader::after {
	content: '';
	position: absolute;
	height: 48px;
	width: 48px;
	border-radius: 50%;
	left: 0;
	top: 0;
	transform: translateX(-10px);
	background: #ff7900;
	opacity: 0.75;
	backdrop-filter: blur(20px);
  }
  
.initiatedLoader::after {
	left: auto;
	right: 0;
	background: #0f5765;
	transform: translateX(10px);
}

@keyframes split {
	0% , 25%{ width: 64px }
	100%{ width: 148px }
}


.strength-display{
	display: none;
	font-size: 13px;
	color: #a1a1a1;
	text-align: left;
	margin-bottom: 5px;
}
.password-strength{
	display: none;
	width: 100%;
	background-color: #536d6d;
	margin-bottom: 15px;
	border-radius: 4px;
	overflow: hidden;
}

.strength-bar{	
	background-color: #ff7900;
	width: 0%;
	font-size: 8px;
	color: #636363;
}

.strength-filler{
	flex: 1;
	padding: 2px;
	background-color: transparent;
}

.viewOldPass,
.viewCustomPass,
.viewCustomPass2{
	cursor: pointer;
}

.ailoader-container {
	text-align: center;
}
/* The outer rotating loader with a conic gradient */
.ailoader {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: conic-gradient(
	from 0deg,
	#ff6a00,
	#ee0979,
	#9b00ff,
	#3498db,
	#00c3ff,
	#00f2c3,
	#ff6a00
	);
	animation: rotate 2s linear infinite;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}
/* Inner circle to mask the gradient and create a ring effect */
.ailoader::before {
	content: '';
	position: absolute;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: #111;
	z-index: 1;
}
/* Pulsing glowing dot at the center */
.ailoader::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ff6a00;
	box-shadow: 0 0 10px 2px rgba(255,106,0,0.7);
	animation: pulse 1.5s ease-in-out infinite;
	z-index: 2;
}
/* Loader text with animated dots */
.ailoader-text {
	margin-top: 20px;
	font-size: 1.2rem;
}
.ailoader-text .dot {
	opacity: 0;
	animation: blink 1.4s infinite;
	animation-fill-mode: both;
}
.ailoader-text .dot:nth-child(2) {
	animation-delay: 0.2s;
}
.ailoader-text .dot:nth-child(3) {
	animation-delay: 0.4s;
}
/* Keyframe for rotating the gradient loader */
@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/* Keyframe for the pulsing effect on the center dot */
@keyframes pulse {
	0% {
	transform: scale(1);
	opacity: 1;
	}
	50% {
	transform: scale(1.5);
	opacity: 0.5;
	}
	100% {
	transform: scale(1);
	opacity: 1;
	}
}
/* Keyframe for the blinking dots in the text */
@keyframes blink {
	0%, 80%, 100% { opacity: 0; }
	40% { opacity: 1; }
}



@media only screen and (max-width: 1000px) {
	.login-area{
		width: 90%;
		height:  90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;	
		box-shadow: 0 0 20px -10px #000;	
		padding: 20px;
		border-radius: 8px;
	}

	.login-text{
		display: block;
		text-align: center;
	}
	
	.login{	
		display: block;
		text-align: center;
		width: 100%;
	}

	
	.login-text .logoarea{
		width: 100%;
		display: inline-block;
		text-align: center;
	}

	.login-text img{
		width: 40px;
	}

	.login-text h3{
		display: inline-block;
		width: 100%;
		text-align: center;
		margin: 5px;
		font-size: 30px;
		color: #818080;
	}
	.login-text p{
		display: inline-block;
		width: 100%;
		text-align: center;
		margin: 5px;
		color: #818080;
	}

	.login-text p a{
		color: #0f5765;
		text-decoration: underline;
	}

	.login-text p a:hover{
		color: #818080;
	}

	.login form{
		padding-top: 40px;
		width: 100%;
	}

	
	.signup-area{
		position: absolute;
		width: 80%;
		padding: 20px;
		background-color: #EAECF5;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		border-radius: 6px;
	}

	
	.alert{
		position: absolute;
		width: 80%;
		padding: 20px;
		background-color: #fcfbfa;	
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		border-radius: 6px;
	}
	
		
	.platform{
		width: 80%;
		min-height: 90px;
		background-color: #fcfbfa;	
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 4px;
		padding: 10px;
	}

	.menu-area{
		width: 100px;
		display: none;
		position: fixed;
		height: 100%;
		overflow-y: auto;
		background-color: #fcfbfa;
		padding-top: 20px;
	}

		
	.menu li{
		list-style: none;	
		color: #0f5765;
		margin-bottom: 15px;
		display: inline-block;
		padding: 6px;
		background-color: #f0efef;
		border-radius: 6px;
		width: 51px;
		box-shadow: 0px 0px 5px -3px;
		cursor: pointer;
	}

	.menu li:hover{
		background-color: #0f5765;
		color: #f0efef;
	}
	.menu li i{
		font-size: 15px;
	}

	.menu span{
		font-size: 9px;
		display: block;
	}

		
	.search-area{
		flex: 1;
		text-align: center;	
		display: grid;
		place-items: center;
	}

	.search-box{	
		border: 1px #e2e2e2 solid;
		border-radius: 6px;
		width: 80%;
	}

	.search-box input[type=search]{
		width: 80%;
		border: none;
		outline: none;
		padding: 6px;
		background-color: transparent;
	}

	.search-box i{
		font-size: 18px;
	}

	.profile-area{
		display: none;
	}

	.profile-area2{
		display: block;
	}
		
	.title-area{
		flex: 1;
	}

	.title-area .menu-open{
		display: inline-block;
	}

	.menu .menu-close{
		display: block;
	}

	.title-area h3{
		margin: 0;
		font-size: 18px;
	}

	.search-area{
		flex: 1;
		text-align: center;	
		display: grid;
		place-items: center;
	}

		
	.tiles-area{
		display: block;
		gap: 30px;
		padding: 20px;
		padding-bottom: 10px;
		margin-top: 40px;
		margin-bottom: 20px;
		text-align: center;
	}

	.tiles{
		display: inline-block;
		flex: none;
		width: 80%;
		border-radius: 8px;
		box-shadow: 0px 0px 20px -13px #000;
		margin-bottom: 50px;
	}

	
	.content{	
		height: auto;
		overflow-y: auto;
	}
	
	.overflow{
		overflow-y: auto;
		max-height:none;
	}

	.section-area{
		display: block;
		height: auto;
	}

	.section-area2{
		display: block;
		height: auto;
	}

	.section-mini{	
		width: auto;
		border-right: 2px #f0f0f0 solid;
		padding: 10px;
		overflow-y: auto;
	}

	.section{
		flex: none;
		width: auto;
		padding: 10px;
		padding-top: 10px;
	}


	.section2{
		flex: none;
		width: auto;
		padding: 10px;
		padding-top: 10px;
	}

		
	.section-header{
		display: flex;
		border-bottom: 2px #f0f0f0 solid;
		margin-bottom: 10px;
		box-shadow: 0 8px 5px -9px;
		padding: 10px;
		border-radius: 6px;
	}

	.section-header .section-btn{
		width: auto;
		padding: 8px;
		color: #fff;
		background-color: #0f5765;
		border: 1px solid #0f5765;
		border-radius: 4px;
		font-size: 11px;
		text-align: center;
		cursor: pointer;
		font-weight: normal;
		margin-left: 10px;
	}

	.section-header .section-btn:hover{
		color: #0f5765;
		background-color: transparent;

	}

	.lift{
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		z-index: 3;
		background-color: #fcfbfa;
		min-width: 600px;  /*Set your desired maximum width */
		width: 100vw; /* Set the width to match the viewport width */
		transform: scale(0.8); /* Adjust the scale value as needed */
		transform-origin: 0 0; /* Ensure scaling starts from the top-left corner */
		margin: 0 auto; /* Center the div horizontally */
	

	}


	.lift .close{
		display: block;
		padding: 20px;
		cursor: pointer;
	}

	.shortColumn{
		flex: none;
		width: 70px;
	}

	.expendable{
		display: none;
	}
		
	.list li{
		display: flex;
		list-style: none;
		padding: 4px;
		margin-bottom: 12px;
		border-bottom: 2px #f0f0f0 solid;
		box-shadow: 0 8px 5px -9px;
		border-radius: 6px;
		font-size: 13px;
		place-items: center ;
	}

	.smaller{
		font-size: 8px;
	}

		
	.popupbg{
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background-color: rgb(00,00,00,0.3);
		z-index: 96;
	}

	.popup{
		width: 85%;
		max-height: 85%;
		min-height: 85%;
		overflow-y: auto;
		background-color: #fcfbfa;	
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 4px;
		padding: 20px;
	}

	.popup-close{
		text-align: right;
		margin-bottom: 0px;
	}

	.popup-close i{
		color: #0f5765;
		font-size: 20px;
		cursor: pointer;
	}

	.popup-split{
		display: block;
	}

	.popup-split-left{
		width: 100%;
		margin-right: 0;
		margin-bottom: 40px;
	}

	.popup-split-right{
		width: 100%;
		flex: none;
		height: auto;
		padding: 0;
		overflow-y: auto;
	}

	.popup h3{
		margin: 0;
		font-size: 18px;
		color: #0f5765;
	}

	

	.alert-bg{
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background-color: rgb(00,00,00,0.3);
		z-index: 97;
	}

	.alert{
		width: 90%;
		min-height: 95px;
		max-height: 95vh;
		overflow-y: auto;
		background-color: #fcfbfa;	
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 4px;
		padding: 10px;
	}
		
	.alert-body{
		margin-top: 0;
		padding: 10px;
	}
		
	.platform-bg{
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		background-color: rgb(00,00,00,0.3);
		z-index: 97;
	}

	.platform{
		width: 90%;
		min-height: 95px;
		max-height: 95%;
		background-color: #fcfbfa;	
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 6px;
		padding: 10px;
		overflow-y: auto;
	}

	.platform-body{
		margin-top: 0;
		padding: 10px;
	}

		
	.box{
		border-bottom: 1px solid #0f5765;
		padding: 3px;
		margin-bottom: 10px;
		font-size: 13px;	
		box-shadow: 0 0 10px -5px #0f5765;
		border-radius: 4px;
	}


		
	.list li{
		display: flex;
		list-style: none;
		padding: 4px;
		margin-bottom: 12px;
		border-bottom: 2px #f0f0f0 solid;
		box-shadow: 0 8px 5px -9px;
		border-radius: 6px;
		font-size: 11px;
		place-items: center ;
	}

	.list li i{
		width: 20px;
		border-radius: 6px;
		padding: 3px;
		font-size: 9px;
		display: grid;
		margin: 0;
		margin-right: 10px;
		place-items: center;
	}


}