@import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap');
	
body
{
    /* background:#eee; */
    font-size: 14px;
}
table
{
    margin: auto !important;
}

/* figure
{
		margin: auto !important;
		display:flex !important;
		justify-content: center !important;
} */

/* figure img
{
		max-width: 80% !important;
}

.image_resized
{
	margin: auto !important;
}

.image_resized img
{
	max-width: 80% !important;
}*/



img
{
	width: 40% !important;
} 

figure
	{
		margin: auto !important;
		display:flex;
		justify-content: center;
	}

	.image-style-side {
		max-width: 50%;
		float: right;
		margin-left: var(--ck-image-style-spacing);
	}

	.image.image_resized {
		max-width: 60%;
	}

	 image.image_resized {
		display: block;
		box-sizing: border-box;
	}
	
	.image.image_resized img {
		width: 60%;
	}
	
	.image.image_resized > figcaption {
		display: block;
	}

.print-pdf span a:first-child
{
    border: 2px solid #03407a;
    padding: 6px 12px;
    background: #03407a;
    color: #fff;
}
.print-pdf span a:nth-child(2)
{
    border: 2px solid #dc3545;
    padding: 6px 12px;
    background: #dc3545;
    color: #fff;
}
.statement-page
{
    position: relative;
    page-break-before: always;
    margin-bottom: 40px;
}
.watermark
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 500px;
    opacity: 0.15;
}
.statement
{
    background: #fff;
    /* border: 2px solid #959595; */
}
.statement > .row
{
    margin: 0 !important;
}
.statement-header 
{
    background-color: #fff;
    color: #fff;
    font-size: 13px;
    border-bottom: 10px solid #db9800;
}

.statement-header img
{
    width:150px !important;
}

.statement .title {
    font-size: 45px;
    font-weight: 500;
    color: #134a9c !important;
}

.statement .article-title
{
    font-size:20px !important;
}

.statement a.sub-title {
    font-size: 20px;
    font-weight: 500;
    color: #134a9c !important;
    text-decoration: none !important;
}
.statement .article-title
{
    color: #000 !important;
    text-align: center;
    font-family:'Times New Roman', Times, serif;
    text-transform: uppercase;
}

.statement .article-title h3
{
    font-weight: bolder;
}
.statement .article-title h6
{
   font-size: 18px;
   margin-top:15px;
   text-transform: uppercase;
 
}
.statement .article-title span a
{
   font-size: 18px;
   text-transform: uppercase !important;
}

.statement .article-title a
{
    font-size: 18px;
    text-transform: none !important;
}
.statement .statement-header .col-12 img:nth-child(2)
{
    display: none;
}
.statement-header img + div
{
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
}
.statement-header .col-4
{
    align-self: center;
    text-align: right;
}
.statement-body .col-12 > .row
{
    margin: 0;
}
.statement-body .teacher
{
    width: 300px !important;
}
.statement-body .col-12 .personal_information
{
    margin: 24px 0px;
    border: 1px solid lightgray;
    padding: 20px 0;
    font-weight: 500;
}
.statement-body .col-12 .personal_information .col-6
{
    margin-bottom: 8px;
}
.statement-body .col-12 .statement_date_range h6
{
    text-align: center;
    font-size: 17px;
    margin: 16px 0
}
.statement-body .statement_table .col-12
{
    padding: 0;
    margin: 20px 0;
}
.statement-body .statement_table .table thead th
{
    text-align: center;
    font-weight: 600;
    background: aliceblue;
    font-size: 15px;
}
.statement-body .statement_table .table thead th i
{
    font-size: 12px;
}
.statement-body .statement_table .table tbody tr td
{
    text-align: right;
}
.statement-body .statement_table .table tbody tr td:first-child
{
    text-align: center;
}
.statement-body .disclaimer .col-12
{
    padding: 0 4px;
}

.statement-body .disclaimer h6
{
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bolder;
    text-decoration: underline;
}
.statement-body .disclaimer p span
{
    text-transform: uppercase;
    margin-right: 6px;
    font-weight: 600;
}
.statement-body .disclaimer .gmail_acc,.phone_no
{
    text-transform: none !important;
    font-weight:600;
    font-size: 15px;
}
.statement-body .disclaimer a
{
    font-size: 15px !important;
}
.statement_footer .col-12 div
{
    text-align: center;
    margin-bottom: 30px;
    margin-top: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}
.statement-body .statement_table .table thead .credit,
.credit
{
    color: limegreen!important;
    font-weight: 600;
}
.debit
{
    color: red;
    font-weight: 600!important;
}
.balance
{
    color: #354a6b;
    font-weight: 600!important;
}

.section-blackboard .shade 
{
	/* overflow: auto; */
	/* position: absolute; */
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
    		
}

.section-blackboard .blackboard 
{
	position: relative;
	min-width: 300px;
	max-width: 350px;
	margin-top: 40px;
	margin-bottom: 40px;
	margin-right: auto;
	margin-left: auto;
	border: tan solid 12px;
	border-top: #bda27e solid 12px;
	border-left: #b19876 solid 12px;
	border-bottom: #c9ad86 solid 12px;
	box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
	background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
	background-color: #333;
}

.section-blackboard .blackboard:before 
{
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: linear-gradient( 175deg, transparent, transparent 40px, rgba(120, 120, 120, 0.1) 100px, rgba(120, 120, 120, 0.1) 110px, transparent 220px, transparent), linear-gradient( 200deg, transparent 80%, rgba(50, 50, 50, 0.3)), radial-gradient( ellipse at right bottom, transparent, transparent 200px, rgba(80, 80, 80, 0.1) 260px, rgba(80, 80, 80, 0.1) 320px, transparent 400px, transparent);
	border: #2c2c2c solid 2px;
	font-family: 'Permanent Marker', cursive;
	font-size: 2.2em;
	color: rgba(238, 238, 238, 0.7);
	text-align: center;
	padding-top: 20px;
}

.section-blackboard .form 
{
	padding: 20px;
}

.section-blackboard h3
{
	color: rgba(238, 238, 238, 0.8);
	text-align: center;
	font-family: 'Permanent Marker', cursive;
	padding-bottom: 5px;
}

.section-blackboard p 
{
	position: relative;
	margin-bottom: 1em;
}

.section-blackboard p 
{
	vertical-align: middle;
	font-family: 'Permanent Marker', cursive;
	font-size: 18px;
	color: rgba(238, 238, 238, 0.7);
	text-align: justify;
}

.section-blackboard p:nth-of-type(5) > label 
{
	vertical-align: top;
}

.section-blackboard input
{
	vertical-align: middle;
	padding-left: 10px;
	background: none;
	border: none;
	font-family: 'Permanent Marker', cursive;
	font-size: 1.6em;
	color: rgba(238, 238, 238, 0.8);
	line-height: .6em;
	outline: none;
}

.section-blackboard textarea 
{
	height: 120px;
	font-size: 1.4em;
	line-height: 1em;
	resize: none;
}

.section-blackboard h3
{
    font-size:18px !important;
}

.section-blackboard p
{
    font-size:15px !important;
}
.section-blackboard input[type="submit"] 
{
	cursor: pointer;
	color: rgba(238, 238, 238, 0.7);
	line-height: 1em;
	padding: 0;
}

.section-blackboard input[type="submit"]:focus 
{
	background: rgba(238, 238, 238, 0.2);
	color: rgba(238, 238, 238, 0.2);
}

.section-blackboard ::-moz-selection 
{
	background: rgba(238, 238, 238, 0.2);
	color: rgba(238, 238, 238, 0.2);
	text-shadow: none;
}

.section-blackboard ::selection 
{
	background: rgba(238, 238, 238, 0.4);
	color: rgba(238, 238, 238, 0.3);
	text-shadow: none;
}
.section-blackboard .teacher 
{
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    left: 60%;
    top: 25px;
    width: 300px;
}



@media (max-width:991px) and (min-width:768px)
{
    .statement .statement-body .personal_information > .col-6
    {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
@media (max-width:767px)
{
    body
    {
        min-width: 1100px;
        overflow-x: auto;
    }
    .container
    {
        max-width: 90%;
    }
}

@media print
{
    .print-pdf
    {
        display: none;
       
    }
    .statement .statement-header .col-8 img:first-child
    {
        display: none;
    }
    .statement .statement-header .col-8 img:nth-child(2)
    {
        display: block;
    }
    .statement .statement-header,
    .balance,
    .debit,
    .credit,
    .statement-body .statement_table .table thead .credit
    {
        color: #212529 !important;
    }

    .section-blackboard .blackboard 
    {
        color-adjust: exact !important;
    }
  
    .watermark
    {
        position: fixed;
    }
    .statement .statement-body .personal_information > .col-6
    {
        flex: 0 0 50%;
        max-width: 50%;
    }
 
    @page
    {
        margin:80px auto;
    }
}