@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?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");
*,*:before,*:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
body {
	background: #fff;
	margin: 0;
	font-family: "Roboto", sans-serif;
}
.firstContainer {
	max-width: 400px;
	height: auto;
	border: 1px solid #DCDCDC;
	border-radius: 5px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
}
.firstContainer-navbar {
	background: #fff;
	width: 100%;
	height: auto;
	padding: 10px;
	border-bottom: 1px solid #DCDCDC;
}
.firstContainer-navbar img {
	width: 30px;
}
.firstContainer-body {
	width: 100%;
	height: auto;
	padding: 15px;
}
.firstContainer-content {
	width: 100%;
	height: auto;
	margin-bottom: 25px;
}
.firstContainer-content-date {
	color: #696969;
	font-size: 15px;
	text-align: left;
}
.firstContainer-content-title {
	color: #000;
	font-size: 25px;
	font-weight: bold;
	text-align: left;
}
.firstContainer-message {
	width: 100%;
	height: auto;
	margin-bottom: 30px;
}
.firstContainer-message-title {
	color: #000;
	font-size: 20px;
	font-weight: bold;
	text-align: left;
}
.firstContainer-message-content {
	width: 100%;
	height: auto;
	margin-top: 20px;
}
.firstContainer-message-content-left-icon-box {
	width: 35px;
	height: auto;
	margin-top: 7px;
	float: left;
}
.firstContainer-message-content-left-icon-box i {
	font-size: 25px;
}
.firstContainer-message-content-right-icon-box {
	width: 35px;
	height: auto;
	border: 1px solid #000;
	float: left;
}
.firstContainer-message-content-right-icon-box i {
	font-size: 25px;
}
.firstContainer-message-content-title {
	color: #000;
	font-size: 17px;
	font-weight: 500;
	text-align: left;
}
.firstContainer-message-content-description {
	color: #696969;
	font-size: 16px;
	text-align: left;
}
.firstContainer-info {
	width: 100%;
	height: auto;
	margin-bottom: 30px;
}
.firstContainer-info-title {
	margin-bottom: 30px;
	color: #000;
	font-size: 20px;
	font-weight: bold;
	text-align: left;
}
.firstContainer-info-content {
	width: 100%;
	height: auto;
	margin-top: 20px;
	cursor: pointer;
}
.firstContainer-info-content-left-icon-box {
	width: 35px;
	height: auto;
	font-size: 22px;
	float: left;
}
.firstContainer-info-content-right-icon-box {
	width: 35px;
	height: auto;
	color: #696969;
	font-size: 22px;
	text-align: right;
	float: right;
}
.firstContainer-info-content-title {
	color: #000;
	font-size: 17px;
	font-weight: 500;
	text-align: left;
}
.firstContainer-form {
	width: 100%;
	height: auto;
	margin-bottom: 30px;
}
.firstContainer-form-title {
	margin-bottom: 15px;
	color: #000;
	font-size: 20px;
	font-weight: bold;
	text-align: left;
}
.firstContainer-form-description {
	margin-bottom: 30px;
	color: #000;
	font-size: 15px;
	text-align: left;
}
.firstContainer-form input {
	background: #fff;
	width: 100%;
	height: auto;
	margin-bottom: 5px;
	padding: 10px;
	color: #000;
	font-size: 15px;
	text-align: left;
	border: 1px solid #DCDCDC;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
}
.firstContainer-form button {
	background: #0866FF;
	width: 100%;
	height: auto;
	margin-top: 10px;
	margin-bottom: 5px;
	padding: 10px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	border: 1px solid #0866FF;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
}
.firstContainer-form input::placeholder {
	color: #808080;
}
.secondContainer {
	background: #fff;
	max-width: 400px;
	height: auto;
	border: 1px solid #DCDCDC;
	border-radius: 5px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
}
.secondContainer-navbar {
	background: #fff;
	height: auto;
	padding: 11px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.secondContainer-navbar-title {
	color: #000;
	font-size: 17px;
	font-weight: bold;
	text-align: left;
}
.secondContainer-content {
	width: 100%;
	height: auto;
	padding: 10px;
	padding-bottom: 0px;
}
.secondContainer-content input {
	background: #fff;
	width: 200px;
	height: auto;
	margin-top: 15px;
	padding: 7px;
	color: #000;
	font-size: 15px;
	text-align: left;
	border: 1px solid #DCDCDC;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
}
.secondContainer-footer {
	width: 100%;
	height: auto;
	margin-top: 10px;
}
.secondContainer-footer-title {
	padding-top: 17px;
	color: #0866FF;
	text-align: left;
	cursor: pointer;
	float: left;
}
.secondContainer-footer-action {
	width: auto;
	height: auto;
	margin-top: 10px;
	float: right;
}
.secondContainer-footer-action button {
	background: #0866FF;
	width: 80px;
	height: auto;
	padding: 7px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	border: 1px solid #0866FF;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
	display: inline-block;
}
.thirdContainer {
	background: #fff;
	max-width: 400px;
	height: auto;
	border: 1px solid #DCDCDC;
	border-radius: 5px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
}
.thirdContainer-navbar {
	background: #fff;
	height: auto;
	padding: 11px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom: 1px solid #DCDCDC;
}
.thirdContainer-navbar-title {
	color: #000;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
.thirdContainer-content {
	width: 100%;
	height: auto;
	padding: 10px;
	text-align: center;
}
.thirdContainer-content i {
	padding: 10px;
	color: #0866FF;
	font-size: 25px;
}
.thirdContainer-content p {
	font-size: 20px;
	font-weight: bold;
	line-height: 0;
}
.thirdContainer-footer {
	width: 100%;
	height: auto;
	margin-top: 10px;
	padding: 10px;
	border-top: 1px solid #DCDCDC;
}
.thirdContainer-footer button {
	background: #0866FF;
	width: 100%;
	height: auto;
	padding: 7px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	border: 1px solid #0866FF;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
	display: inline-block;
}
.popup {
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
	position: fixed;
}
.popup-box-wrapper {
	background: #fff;
	width: 390px;
	height: auto;
	margin: 50px auto;
	margin-top: 15%;
	border-radius: 3px;
	position: relative;
}
.popup-box-navbar {
	background: #f5f6f8;
	height: auto;
	padding: 11px;
	border-bottom: 1px solid #DCDCDC;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.popup-box-navbar-title {
	color: #000;
	font-size: 17px;
	font-weight: 500;
	text-align: left;
}
.popup-box-content {
	width: 100%;
	height: auto;
	padding: 10px;
	padding-bottom: 0px;
}
.popup-box-content-alert {
	background: #ffece8;
	width: 100%;
	height: auto;
	margin-bottom: 10px;
	padding: 10px;
	color: #000;
	border: 1px solid #deb2a1;
}
.popup-box-content input {
	background: #fff;
	color: #000;
	font-size: 15px;
	text-align: left;
	border: 1px solid #DCDCDC;
	border-radius: 1px;
	outline: none;
	cursor: pointer;
}
.popup-box-profile {
	width: 100%;
	height: auto;
	margin-bottom: 30px;
}
.popup-box-profile-media {
	width: 50px;
	height: auto;
	margin-right: 10px;
	float: left;
}
.popup-box-profile-media img {
	width: 100%;
	border-radius: 2px;
}
.popup-box-profile-media-title {
	padding-top: 15px;
	color: #000;
	font-size: 17px;
	font-weight: 500;
	text-align: left;
}
.popup-box-footer {
	width: 100%;
	height: auto;
	margin-top: 10px;
	padding-bottom: 11px;
	border-top: 1px solid #DCDCDC;
}
.popup-box-footer-title {
	padding-top: 14px;
	color: #4066b4;
	text-align: left;
	cursor: pointer;
	float: left;
}
.popup-box-footer-action {
	width: auto;
	height: auto;
	margin-top: 10px;
	float: right;
}
.popup-box-footer-action button {
	background: #4066b4;
	width: 75px;
	height: auto;
	padding: 5px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	border: 1px solid #4066b4;
	border-radius: 3px;
	outline: none;
	cursor: pointer;
	display: inline-block;
}
/*
.popup-box-footer-action button:nth-child(1) {
	background: #f5f6f8;
	color: #4e4f53;
	border: 1px solid #d3d4d7;
}
.popup-box-footer-action button:nth-child(2) {
	background: #4066b4;
	color: #fff;
	border: 1px solid #4066b4;
}
*/
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}
@media only screen and (max-width:600px) {
    .firstContainer {
        width: 100%;
        height: auto;
		padding: 0px;
        border: none;
        border-radius: 0px;
		top: 0%;
		left: 0%;
		transform: none;
		position: relative;
    }
	.secondContainer, .thirdContainer {
        width: 95%;
        height: auto;
    }
    .popup-box-wrapper {
        width: 350px;
        margin-top: 60%;
    }
}