/*
Theme Name: School College Theme 2
Theme URI: http://sahmed.com/
Author: Salah Uddin Ahmed
Author URI: http://sahmed.tech/
Description: This theme made by Salah Uddin Ahmed.
Version: 1.0
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: wsITfirm
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

	 * {
	 	box-sizing: border-box
	 }
	 body {
	 	font-family: Verdana, sans-serif;
	 	margin: 0
	 }
	 .mySlides {
	 	display: none
	 }
	 img {
	 	vertical-align: middle;
	 }
	 /* Slideshow container */
	 .slideshow-container {
	 	max-width: 1000px;
	 	position: relative;
	 	margin: auto;
	 }
	 /* Next & previous buttons */
	 .prev,
	 .next {
	 	cursor: pointer;
	 	position: absolute;
	 	top: 50%;
	 	width: auto;
	 	padding: 16px;
	 	margin-top: -22px;
	 	color: white;
	 	font-weight: bold;
	 	font-size: 18px;
	 	transition: 0.6s ease;
	 	border-radius: 0 3px 3px 0;
	 	user-select: none;
	 }
	 /* Position the "next button" to the right */
	 .next {
	 	right: 0;
	 	border-radius: 3px 0 0 3px;
	 }
	 /* On hover, add a black background color with a little bit see-through */
	 .prev:hover,
	 .next:hover {
	 	background-color: rgba(0, 0, 0, 0.8);
	 }
	 /* Caption text */
	 .text {
	 	color: #f2f2f2;
	 	font-size: 15px;
	 	padding: 8px 12px;
	 	position: absolute;
	 	bottom: 30px;
	 	width: 100%;
	 	text-align: center;
	 }
	 /* Number text (1/3 etc) */
	 .numbertext {
	 	color: #f2f2f2;
	 	font-size: 12px;
	 	padding: 8px 12px;
	 	position: absolute;
	 	top: 0;
	 }
	 /* The dots/bullets/indicators */
	 .dot {
	 	cursor: pointer;
	 	height: 15px;
	 	width: 15px;
	 	margin: 0 2px;
	 	background-color: #bbb;
	 	border-radius: 50%;
	 	display: inline-block;
	 	transition: background-color 0.6s ease;
	 }
	 .active,
	 .dot:hover {
	 	background-color: #717171;
	 }
	 /* Fading animation */
	 .fade {
	 	-webkit-animation-name: fade;
	 	-webkit-animation-duration: 1.5s;
	 	animation-name: fade;
	 	animation-duration: 1.5s;
	 }
	 @-webkit-keyframes fade {
	 	from {
	 		opacity: .4
	 	}
	 	to {
	 		opacity: 1
	 	}
	 }
	 @keyframes fade {
	 	from {
	 		opacity: .4
	 	}
	 	to {
	 		opacity: 1
	 	}
	 }
	 /* On smaller screens, decrease text size */
	 @media only screen and (max-width: 300px) {
	 	.prev,
	 	.next,
	 	.text {
	 		font-size: 11px
	 	}
	 }
	 img.wp-smiley,
	 img.emoji {
	 	display: inline !important;
	 	border: none !important;
	 	box-shadow: none !important;
	 	height: 1em !important;
	 	width: 1em !important;
	 	margin: 0 .07em !important;
	 	vertical-align: -0.1em !important;
	 	background: none !important;
	 	padding: 0 !important;
	 }
	 .ajax-calendar {
	 	position: relative;
	 }
	 #bddp_ac_widget th {
	 	background: none repeat scroll 0 0 #2cb2bc;
	 	color: #FFFFFF;
	 	font-weight: normal;
	 	padding: 5px 1px;
	 	text-align: center;
	 	font-size: 16px;
	 }
	 #bddp_ac_widget {
	 	padding: 5px;
	 }
	 #bddp_ac_widget td {
	 	border: 1px solid #CCCCCC;
	 	text-align: center;
	 }
	 #my-calendar a {
	 	background: none repeat scroll 0 0 #008000;
	 	color: #FFFFFF;
	 	display: block;
	 	padding: 6px 0;
	 	width: 100% !important;
	 }
	 #my-calendar {
	 	width: 100%;
	 }
	 #my_calender span {
	 	display: block;
	 	padding: 6px 0;
	 	width: 100% !important;
	 }
	 #today a,
	 #today span {
	 	background: none repeat scroll 0 0 #2cb2bc !important;
	 	color: #FFFFFF;
	 }
	 #bddp_ac_widget #my_year {
	 	float: right;
	 }
	 .select_ca #my_month {
	 	float: left;
	 }
	 .elementor a {
	 	font-family: 'SolaimanLipi';
	 }
	 body {
	 	font-family: splaimanLipi;
	 }
	 /* nav menu start */
	 .elementor-12 .elementor-element.elementor-element-56bf0f0 .elementor-nav-menu--main .elementor-item.elementor-item,
	 .elementor-12 .elementor-element.elementor-element-56bf0f0 .elementor-nav-menu--dropdown a,
	 .elementor-12 .elementor-element.elementor-element-56bf0f0 .elementor-menu-toggle {
	 	font-family: 'SolaimanLipi';
	 	font-weight: normal;
	 }
	 /* submenu */
	 .elementor-12 .elementor-element.elementor-element-56bf0f0 .elementor-nav-menu--dropdown .elementor-item,
	 .elementor-12 .elementor-element.elementor-element-56bf0f0 .elementor-nav-menu--dropdown .elementor-sub-item {
	 	padding-left: 5px;
	 	padding-right: 10px;
	 }
	 /* nav menu end */
	 /* notice bar start*/
	 .elementor-image-box-content {
	 	text-align: left;
	 }
	 .elementor-post__text {
	 	-webkit-box-flex: 1;
	 	-ms-flex-positive: 1;
	 	flex-grow: 1;
	 	padding: 10px 05px 0px 5px;
	 }
	 .elementor-post-date .elementor-post__meta-data {
	 	font-family: 'SolaimanLipi';
	 	font-size: 15px;
	 }
	 .elementor-widget-posts .elementor-post__meta-data,
	 .elementor-5 .elementor-element.elementor-element-b55df56 .elementor-post__meta-dat {
	 	font-family: 'SolaimanLipi';
	 	font-size: 15px;
	 	color: #333 !important;
	 }
	 /* notice bar end */
	 /* sidebar start */
	 .widget {
	 	background: #F4F4F4;
	 	padding: 10px;
	 	box-shadow: 0px 0px 0px 1px #dddddd;
	 	margin-bottom: 30px
	 }
	 .widget i.fa.fa-caret-right {
	 	color: red;
	 }
	 .widget h2 {
	 	background: #ffffff;
	 	padding: 5px 10px;
	 	border-radius: 0px 0px 10px 10px;
	 	border-bottom: 2px solid #663091;
	 	font-size: 25px
	 }
	 .widget a {
	 	padding: 10px;
	 }
	 .widget a img {
	 	margin-left: -10px;
	 	width: 100%;
	 }
	 /* side bar end */
	 /* post start */
	 p {
	 	font-family: solaimanlipi
	 }
	 a {
	 	font-family: solaimanlipi
	 }
	 .elementor-5 .elementor-element.elementor-element-b55df56 .elementor-post__title,
	 .elementor-5 .elementor-element.elementor-element-b55df56 .elementor-post__title a,
	 .elementor-464 .elementor-element.elementor-element-acd80fe .elementor-post__title,
	 .elementor-464 .elementor-element.elementor-element-acd80fe .elementor-post__title a {
	 	font-family: solaimanLipi !important;
	 }
	 /* post end */
	 /* ninja table start */
	 tbody,
	 thead {
	 	font-family: 'SolaimanLipi';
	 }
	 td.ninja_column_1.ninja_clmn_nm_নাম,
	 td.ninja_column_0.ninja_clmn_nm_নাম.footable-first-visible {
	 	font-weight: bold;
	 }
	 /* ninja table end */
	 /* photo gallary */
	 .elementor-181 .elementor-element.elementor-element-ab1f645 .elementor-post__title,
	 .elementor-181 .elementor-element.elementor-element-ab1f645 .elementor-post__title a {
	 	font-family: 'SolaimanLipi';
	 }
	 a.btn:hover {
	 	color: #fff;
	 }
	 /* routine page */
	 button {
	 	width: 100% color: #fff !important;
	 }
	 button a {
	 	color: #ffffff !important;
	 }
	 button a:hover {
	 	color: #ffffff !important;
	 }
	 li {
	 	display: none;
	 }
	 /* footer start */
	 .elementor-32 .elementor-element.elementor-element-0bdd5fc > .elementor-container {
	 	min-height: auto;
	 }
	 /* footer end */
	 
	 .table-image img{
		width: 85px;
		height: 95px !important;
		padding: 5px;
		border: 2px solid #ddd !important;
		margin-right: -32px;
	 }
	 
	 .teacher-headding {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		background-color: #ddd;
		padding: 8px;
		color: #000;
		font-family: Century Gothic;
	 }
	 
	.menu-item a {
		color: #ffffff;
	}
	
	.menu-item a:hover{
		background-color: #4169e1;
	}
	
	.current-menu-item {
		background-color: #4169e1;
	}
	
	.sub-menu li a {
		background-color: #4169e1;
	}
	
	.sub-menu li a:hover {
		background-color: #494c4f;
	}
	
	.new-notice {
		padding-left: 15%;
	}
	
	.new-notice-article {
		padding-top: 5%;
	}
	
	.side-bar-newbg {
		background-color: var(--e-global-color-c2c7a0c );
	}
	
	.table-users td img {
		width: 100px;
		height: 100px;
		border: 1px solid #ddd;
	}
	
	$baseColor: #398B93;
	$borderRadius: 10px;
	$imageBig: 100px;
	$imageSmall: 60px;
	$padding: 10px;

body {
   background-color: lighten($baseColor, 30%);
   * { box-sizing: border-box; }
}

.header {
   background-color: darken($baseColor, 5%);
   color: white;
   font-size: 1.5em;
   padding: 1rem;
   text-align: center;
   text-transform: uppercase;
}

img {
   border-radius: 50%;
   height: $imageSmall;
   width: $imageSmall;
}

.table-users {
   border: 1px solid darken($baseColor, 5%);
   border-radius: $borderRadius;
   max-width: calc(100% - 2em);
   margin: 1em auto;
   overflow: hidden;
   width: 800px;
}

table {
   width: 100%;
   
   td, th { 
      color: darken($baseColor, 10%);
      padding: $padding; 
   }
   
   td {
      text-align: center;
      vertical-align: middle;
      
      &:last-child {
         font-size: 0.95em;
         line-height: 1.4;
         text-align: left;
      }
   }
   
   th { 
      background-color: lighten($baseColor, 50%);
      font-weight: 300;
   }
   
   tr {     
      &:nth-child(2n) { background-color: white; }
      &:nth-child(2n+1) { background-color: lighten($baseColor, 55%) }
   }
}

@media screen and (max-width: 700px) {   
   table, tr, td { display: block; }
   
   td {
      &:first-child {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         width: $imageBig;
      }

      &:not(:first-child) {
         clear: both;
         margin-left: $imageBig;
         padding: 4px 20px 4px 90px;
         position: relative;
         text-align: left;

         &:before {
            color: lighten($baseColor, 30%);
            content: '';
            display: block;
            left: 0;
            position: absolute;
         }
      }

      &:nth-child(2):before { content: 'নাম:'; }
      &:nth-child(3):before { content: 'পদবী:'; }
      &:nth-child(4):before { content: 'ইমেইল:'; }
      &:nth-child(5):before { content: 'মোবাইল:'; }
   }
   
   tr {
      padding: $padding 0;
      position: relative;
      &:first-child { display: none; }
   }
}

@media screen and (max-width: 500px) {
   .header {
      background-color: transparent;
      color: lighten($baseColor, 60%);
      font-size: 2em;
      font-weight: 700;
      padding: 0;
      text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
   }
   
   img {
      border: 3px solid;
      border-color: lighten($baseColor, 50%);
      height: $imageBig;
      margin: 0.5rem 0;
      width: $imageBig;
   }
   
   td {
      &:first-child { 
         background-color: lighten($baseColor, 45%); 
         border-bottom: 1px solid lighten($baseColor, 30%);
         border-radius: $borderRadius $borderRadius 0 0;
         position: relative;   
         top: 0;
         transform: translateY(0);
         width: 100%;
      }
      
      &:not(:first-child) {
         margin: 0;
         padding: 5px 1em;
         width: 100%;
         
         &:before {
            font-size: .8em;
            padding-top: 0.3em;
            position: relative;
         }
      }
      
      &:last-child  { padding-bottom: 1rem !important; }
   }
   
   tr {
      background-color: white !important;
      border: 1px solid lighten($baseColor, 20%);
      border-radius: $borderRadius;
      box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
      margin: 0.5rem 0;
      padding: 0;
   }
   
   .table-users { 
      border: none; 
      box-shadow: none;
      overflow: visible;
   }
}