body, html {
    height: 100%;
   /* font-family: 'Kanit', cursive !important;*/
    /* font-size: 0.95rem !important; */
}
.bg {
    background: #01999A;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    clip-path: polygon(0 0, 55% 0, 45% 100%, 0% 100%);
}
.canvas{
    height: 300px!important;
}
.toggle.ios, .toggle-on.ios, .toggle-off.ios { 
    border-radius: 20px; 
    font-weight: 100px;
}
.toggle.ios .toggle-handle { 
    border-radius: 20px; 
}
.toggle-on.btn {
    padding-right: 19px;
    font-weight: 100 !important;
}
.btn {
    font-size: inherit !important;
}

.card, .small-box, .small-box-footer{
    border-radius: 15px !important;
}
.small-box h1{
    font-size: 2rem !important;
}

.rtl{
    direction: rtl !important;
}

@media (max-width: 1200px) {
    .small-box h1 {
        font-size: 1.7rem !important;
    }
}

@media (max-width: 767px) {
    .small-box h1 {
        font-size: 1.4rem !important;
    }
	}

.event-box {
	padding: 10px;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 5px;
	}
.navbar {
	margin-bottom: 0;
	border-radius: 0;
	}

.row.content {
	height: 450px
	}

.sidenav {
	padding-top: 20px;
	background-color: #f1f1f1;
	height: 100%;
	}

footer {
	background-color: #555;
	color: white;
	padding: 15px;
	}

@media screen and (max-width: 767px) {
	.sidenav {
		height: auto;
		padding: 15px;
	}

.row.content {
	height: auto;
	}
	}

footer {
	position: fixed;
	height: 50px;
	bottom: 0;
	width: 100%;
	}