/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

#page-title h1 {
    font-size: 45px;
    font-weight: 700;	
}

#page-title.page-title-dark span {
    font-size: 2em;
    font-weight: 600;
}

.page-title-text {
	padding: 15px;
	max-width: 100%;
}

/*
Booking related css start
*/
.booking-navigation {
	font-size: 15px;
	padding: 3px;
	border-radius: 5px;
	vertical-align: middle;
	text-decoration: none;
	color: inherit;
	border: 1px solid #AAAAAA;
	cursor: pointer;
}

.booking-navigation-td {
	width: 33%;
}

table.booking {
	margin: 5px;
}

table.booking tr, table.booking td {
	border-spacing: 0;
	border-collapse: collapse;
	font-size: 14px;
	padding: 0px;
	border: 0px solid black;
}

table.booking td.booking-date {
	white-space: nowrap;
	padding: 5px;
	background-color: #DDDDDD;
	border-radius: 5px;
}

table.booking td.slot {
}

table.booking-details td {
	font-size: 12px;
	padding: 5px;
}

.box  {
	float: left;
	width: 17px;
	height: 17px;
	margin: 1px 1px 1px 1px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(0, 0, 0, .2);
	border-radius: 3px;
}

.box.free {
	background-color: #90CA77;
	cursor: pointer;
}

.box.occupied {
	background-color: #f44336;
	cursor: pointer;
}

.box.unavailable {
	background-color: #BBBBBB;
}

.box.transparent {
	background-color: transparent;
	border-color: transparent;
	
}

.box.future {
	background-color: #DDDDDD;
}


.slot-box {
    display: inline-block;
    height: 50px;
    line-height: 16px;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
                
.slot-box.booking-resource-header {
	height: 40px;
	line-height: 40px;
	background-color: #DDDDDD;
	font-weight: bold;
	padding-top: 3px;
	padding-bottom: 3px;
}

.slot-box.free {
       background-color: #9CCD9C;
       cursor: pointer;
}

.slot-box.unavailable {
       background-color: #DDDDDD;
}

.slot-box.occupied {
       background-color: #FF726F;
}

.slot-box.future {
    background-color: #DDDDDD;
}

.owl-dot {
       background-color: #428bca;
       border-radius: 5px;
       color: white;
       margin-right: 5px;
       border: none;
}

.owl-dot.active {
       background-color: #00008B;
}

#owl-custom-nav {
       text-align: center;
       padding-bottom: 10px;
}

/*
Booking related css end
*/


/*
Participants stuff css start
*/
#participants ul {
	padding-left: 15px;
	list-style-type: none;
}

#participants li {
	display: inline;
	padding-right: 0px;
    padding-left: 5px;	
}

#participants .list-inline {
    list-style: none;
}

#participants .row {
	width: 100%;
    float: left;
    list-style: none;	
}

#participants .action {
	float: right;
	line-height: 33px;
}

#participants .name-div {
	display: inline-block;
	white-space: nowrap;
	width: calc(100% - 90px);
	overflow: hidden;
    text-overflow: ellipsis;
}

#participants .name {
    max-width: 100%;
    white-space: nowrap;
	line-height: 33px;
}

#participants .clear {
	clear: both;
	margin: 0;
	padding: 0;
}

#participants .fa-plus-square {
	color: green;
	font-size: 1.2em;
}

#participants .fa-minus-square {
	color: #be1622;
	font-size: 1.2em;
}

#participants .fa-check-square {
	color: #f39200;
	font-size: 1.2em;
}

#participants .fa-question-circle {
	color: #1d70b7;
	font-size: 1.2em;
}

#participants fieldset {
	padding-bottom: 20px;
}

#participants .count-span {
	font-size: 12px;
}

.button-word-wrap {
	white-space: normal;
	font-size: 12px; 
}

.horizontal-line {
	border-bottom: 1px solid #EEEEEE;
}
/*
Participants stuff css end
*/

ol, ul {
	list-style-position:inside;
}

/*
Menu stuff
*/
.primary-menu-wrap {
	-ms-flex: 0 1 auto;
	flex: 0 1 auto;
	
}

.primary-menu-wrap .menu-link {
	padding: 15px;
}

/*
Spinner stuf
*/
.loading {
    display: flex;
    justify-content: center;
}

.loading::after {
    content: "";
    width: 50px;
    height: 50px;
    border: 10px solid #dddddd;
    border-top-color: #009579;
    border-radius: 50%;
    animation: loading 1s ease infinite;
}

@keyframes loading {
    to {
        transform: rotate(1turn);
    }
}

.consent-member-field {
	display: block !important;
}


/* File browser start */

/* The list style
-------------------------------------------------------------- */

.directory-list ul {
  margin-left: 10px;
  padding-left: 20px;
  border-left: 1px dashed #ddd;
}

.directory-list li {
  list-style: none;
  color: #888;
  font-size: 15px;
  font-weight: normal;
}

.directory-list a {
  border-bottom: 1px solid transparent;
  color: #888;
  text-decoration: none;
  transition: all 0.2s ease;
}

.directory-list a:hover {
  border-color: #eee;
  color: #000;
}

.directory-list .folder,
.directory-list .folder > a {
  color: #777;
  font-weight: bold;
}

/* The icons
-------------------------------------------------------------- */
.directory-list li:before {
  margin-right: 10px;
  content: "";
  height: 20px;
  vertical-align: middle;
  width: 20px;
  background-repeat: no-repeat;
  display: inline-block;
  /* file icon by default */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='lightgrey' d='M85.714,42.857V87.5c0,1.487-0.521,2.752-1.562,3.794c-1.042,1.041-2.308,1.562-3.795,1.562H19.643 c-1.488,0-2.753-0.521-3.794-1.562c-1.042-1.042-1.562-2.307-1.562-3.794v-75c0-1.487,0.521-2.752,1.562-3.794 c1.041-1.041,2.306-1.562,3.794-1.562H50V37.5c0,1.488,0.521,2.753,1.562,3.795s2.307,1.562,3.795,1.562H85.714z M85.546,35.714 H57.143V7.311c3.05,0.558,5.505,1.767,7.366,3.627l17.41,17.411C83.78,30.209,84.989,32.665,85.546,35.714z' /></svg>");
  background-position: center 2px;
  background-size: 60% auto;
}

.directory-list li.folder:before {
  /* folder icon if folder class is specified */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='lightblue' d='M96.429,37.5v39.286c0,3.423-1.228,6.361-3.684,8.817c-2.455,2.455-5.395,3.683-8.816,3.683H16.071 c-3.423,0-6.362-1.228-8.817-3.683c-2.456-2.456-3.683-5.395-3.683-8.817V23.214c0-3.422,1.228-6.362,3.683-8.817 c2.455-2.456,5.394-3.683,8.817-3.683h17.857c3.422,0,6.362,1.228,8.817,3.683c2.455,2.455,3.683,5.395,3.683,8.817V25h37.5 c3.422,0,6.361,1.228,8.816,3.683C95.201,31.138,96.429,34.078,96.429,37.5z' /></svg>");
  background-position: center top;
  background-size: 75% auto;
}

/* File browser end */

.calendar-event {
	min-height: 50px;	
}

/* Spinner start */
/* ALL LOADERS */
.loader{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}

/* LOADER 1 */
#loader-1:before, #loader-1:after{
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 10px solid transparent;
  border-top-color: #3498db;
}

#loader-1:before{
  z-index: 100;
  animation: spin 1s infinite;
}

#loader-1:after{
  border: 10px solid #ccc;
}

@keyframes spin{
  0%{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#spinner-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Spinner end */

/* Chat start */
.msger {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 867px;
  margin: 25px 10px;
  height: calc(100% - 50px);
  border: 2px solid #ddd;
  border-radius: 5px;
  background: var(--msger-bg);
  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
}

.msger-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: var(--border);
  background: #eee;
  color: #666;
}

.msger-chat {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.msger-chat::-webkit-scrollbar {
  width: 6px;
}
.msger-chat::-webkit-scrollbar-track {
  background: #ddd;
}
.msger-chat::-webkit-scrollbar-thumb {
  background: #bdbdbd;
}
.msg {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}
.msg:last-of-type {
  margin: 0;
}
.msg-img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  background: #ddd;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
}
.msg-bubble {
  max-width: 450px;
  padding: 15px;
  border-radius: 15px;
}
.msg-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.msg-info-name {
  margin-right: 10px;
  font-weight: bold;
}
.msg-info-time {
  font-size: 0.85em;
}

.left-msg .msg-bubble {
  border-bottom-left-radius: 0;
  background-color: #ECECEC;
}

.right-msg {
  flex-direction: row-reverse;
}
.right-msg .msg-bubble {
  color: #fff;
  border-bottom-right-radius: 0;
  background-color: #699DF4;
}
.right-msg .msg-img {
  margin: 0 0 0 10px;
}

.msger-inputarea {
  display: flex;
  padding: 10px;
  border-top: var(--border);
  background: #eee;
}
.msger-inputarea * {
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 1em;
}
.msger-input {
  flex: 1;
  background: #FFFFFF;
}
.msger-send-btn {
  margin-left: 10px;
  background: rgb(0, 196, 65);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.23s;
}
.msger-send-btn:hover {
  background: rgb(0, 180, 50);
}

/* Chat end */

/* Enrollment start */
.activity-filter {
	margin-bottom: 20px;
}

.activity-filter button {
	margin-bottom: 5px;
}

.activity-entry {
	box-shadow: 0px 2px 11px rgba(0, 0, 0, .25); border-radius: 25px;
	margin-bottom: 25px;
}

.activity-entry:hover {
	box-shadow: 0 0 25px rgba(33,33,33,.2); 
}

.activity-entry i {
	width: 20px;
}

h3.activity-name {
	margin: 0px 0px 10px 0px;
}

.activity-description {
	padding: 25px;	
}

.activity-buttons {
	margin-top: 15px;
}

.activity-image {
	border-radius: 25px 0px 0px 25px; 
	height:100%; 
	width:100%; 
	min-height: 200px; 
	display: block;
	background-size: cover; 
	background-position: center center; 	
}

@media (max-width: 800px) {
	.activity-image {
		border-radius: 25px 25px 0px 0px; 
	}
}

:root{
    --sus-image-margin: 25px;
}

.activity-image-scale-to-fit {
	background-size: contain;
	height: auto;
	width:auto;
	aspect-ratio: 4/3;
	background-repeat: no-repeat;
	margin: var(--sus-image-margin);
	background-position: left top;
	border-radius:0px;
}

@media (max-width: 800px) or (orientation: portrait){
	.activity-image-scale-to-fit {
		aspect-ratio: 16/9;
		width: calc(100% - var(--sus-image-margin) * 2);
	}
}

@media (min-width: 992px){
	.activity-entry-image-scale-to-fit .col-lg-3 {flex: 0 0 auto; width: fit-content;}
	.activity-entry-image-scale-to-fit .col-lg-9.activity-description {flex: 1 1; width:unset;}
	.activity-entry-image-scale-to-fit .col-lg-9.activity-description .col-lg-4{width:fit-content;}
}

/* Enrollment end */

/* Instructor list start */
.instructor-thumbnail {
    border-radius: 100%;
    width: 100%;
    display: block;
    padding-top: 100%;
    background-position: center center;
    background-size: cover;
}
/* Instructor list end */


/* Booking compact calendar start */
.booking-short-name {
	line-height: 20px; 
	height: 20px; 
	width: 20px; 
	background-color: white;
	border-radius: 50%; 
	display: inline-block; 
	color: black; 
	text-align: center;	
}
.booking-description {
	font-weight: normal;
}
/* Booking compact calendar end */

/* Captcha image start */
.captcha-image {
	height: 30px;
	width: 100px;
	border: 1px #ced4da solid;
	margin-bottom: 5px;
	border-radius: 3px;
}
/* Captcha image end */