/* PAGE: Main CSS */

html,
body {
    max-width: 1200px;
    min-height: 500px;
    margin: auto;	
}

html {
		background-color: #ffffff;
		background-image: url("img/overlay.png"), -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../img/bg.jpg");
		background-image: url("img/overlay.png"), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../img/bg.jpg");
		background-image: url("img/overlay.png"), -ms-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../img/bg.jpg");
		background-image: url("img/overlay.png"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../img/bg.jpg");
		background-repeat: repeat,			no-repeat,			no-repeat;
		background-size: 100px 100px, cover,				cover;
		background-position: top left,		center center,		bottom center;
		background-attachment: fixed,			fixed,				fixed;	
}	

body {
    font-family: 'Jost', sans-serif;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}


.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.avatar img {
    display: block;
    margin: 0 auto;
    border-radius: 100%;
    box-shadow: 0 0 0 0.1em #ffffff;
    box-shadow: 0px 1px 4px #fdfeff;
    width: 200px;
}

.topIntro {
    background: #2099a9;
}

.topIntro h1, .topIntro p {
    color: white;
    font-weight: 300;
    letter-spacing: 0.1em;
}

.topIntro h1 {
    font-size: 1.85em;
    letter-spacing: 0.22em;
    margin: 31px 0 0.525em 0;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media (max-width: 767px) {
    .nav li > form > button.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}


.has-error .form-control {
    border: 1px solid #a94442;
}


.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}


.has-error .form-control {
    border: 1px solid #a94442;
}


.has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

.select2-selection--single {
    height: 2.4rem !important;
}

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label, .help-block.help-block-error {
    color: #a94442;
}



.left-sidebar {
    background-color: #1d2228;
    position: fixed;
    width: 240px;
    height: 100%;
    top: 0;
    padding-top: 70px;
    z-index: 10;
    background: #fff;
    box-shadow: 1px 0 20px rgba(0, 0, 0, .08);
    transition: .2s ease-in;
}

.activity-item__profile img {
    float: right;
    margin-bottom: 32px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 1px 4px #a6a9ac;
}

.tags-list  {
    position: relative;
}
.tags-list  .tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
/*   border: 1px solid rgb(222 226 230 / 41%); */
    text-decoration: none;
    color: white;
    background-color:  grey;
}

.tags-list  .tag:hover {
    opacity: .9;
}

a.tag.tagMobile {
    box-shadow: none;
    font-size: 0.9rem;
    margin: 2px;
    margin-top: 7px;
}

.user-menu {
    left: -122px;
}


#wrapper {
    display: flex;
}

#wrapper #content-wrapper {
    background-color: #f8f9fc;
    width: 100%;
    overflow-x: hidden;
}

#wrapper #content-wrapper #content {
    flex: 1 0 auto;
}

.events__tags-list {
    width: 300px;
    background-color: #f3f5ff;
    min-height: 100vh;
    text-align: center;	
}

.hidden {
    display: none!important;
}

.logo {
    background-image: url(/img/logoText.png);
    width: 135px;
    height: 65px;
    background-size: 100%;
    background-repeat: no-repeat;
}



.tags-list .tag {
    font-size: 11px;
    padding: 2px;
    padding-left: 16px;
    padding-right: 16px;
    letter-spacing: 0.7px;
    box-shadow: 0 1px 4px #a6a9ac;
}

.events-index .events__tags-list {
    display: none;
}

.groupheader {
    font-size: 1.1rem;
    color: #62d0ba;
}

#available_or_not {
    font-size: 12px;
    margin-bottom: 4px;
}

.dropdown-menu .fas, .dropdown-menu .far {
    color: #62d0ba;
    padding-right: 4px;
}

.btn-success {
    padding: 13px 20px;
    background-color: #1abc9cab;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 3px 0px 0px #029e81;
    -webkit-box-shadow: 0px 3px 0px 0px #029e81b8;
    box-shadow: 0 1px 8px #c9cbcc;
    line-height: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    display: inline-block;
    cursor: pointer;
    letter-spacing: 1px;
    border-color: #48b9a2;
}

.btn-success:visited, .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle, .btn-success:focus, .btn-success.focus {
	background-color: #1abc9c;
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0px 3px 0px 0px #029e81;
	-webkit-box-shadow: 0px 3px 0px 0px #029e81;
	box-shadow: 0px 3px 0px 0px #029e81;
	color: #ffffff;
	}

.btn-success:hover {
	background-color: #81dac9;
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0px 3px 0px 0px #78cfbf;
	-webkit-box-shadow: 0px 3px 0px 0px #78cfbf;
	box-shadow: 0px 3px 0px 0px #78cfbf;
	color: #ffffff;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	}
	
.btn-success:active {
	background-color: #17a98c;
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0px 3px 0px 0px #09977c;
	-webkit-box-shadow: 0px 3px 0px 0px #09977c;
	box-shadow: 0px 3px 0px 0px #09977c;
	}


.btn-secondary {
    padding: 13px 20px;
    background-color: #bdc3c7;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 3px 0px 0px #b0b4b8;
    -webkit-box-shadow: 0px 3px 0px 0px #b0b4b8;
    box-shadow: 0px 3px 0px 0px #b0b4b8;
    line-height: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    display: inline-block;
    cursor: pointer;
}

#fullName {
    text-transform: uppercase;
    color: #2099a9;
    letter-spacing: 0.3px;
}

.profile-image {
    border-radius: 50%;
    width: 63px;
    height: 63px;
    background-size: 100%;
    margin-right: -13px;
    box-shadow: 0 1px 4px #a6a9ac;
}

i.fa.fa-circle, .fa fa-check-square, i.fa.fa-check-square {
    color: rgb(98 208 186);
}

#availableNow, #availableLater, #recurringEvent,.submitButton {
    padding: 25px;
	font-size: 1rem;
}

#sidebar-wrapper {
    display: none;
}

a.btn.btn-sm.btn-disabled.disabled {
    color: rgb(128 128 128 / 49%);
}

.site-contact {
    padding-left: 40px;
    padding-top: 22px;
}

.dropdown-item .fas, .dropdown-item .far {
    font-size: 13px;
}

#events-hours {
    width: 120px;
}

.control-label, .form-group.field-events-is_pro {
    font-size: 1.4rem;
}

input[type='checkbox'] {
    /* font-size: 1.4rem; */
    -webkit-appearance: none;
    width: 23px;
    height: 23px;
    /* background: white; */
    border-radius: 5px;
    border: 1px solid #65d2bc;
    /* margin-top: 10px; */
    margin-bottom: -3px;
}

input[type='checkbox']:checked {
    background: #2099a9;
}

#events-hours, #events-start_date, #events-start_time  {
    font-size: 1.4rem;
	margin: 0 auto;
    margin-top: 9px;
	
}

#events-start_date, #events-start_time, #events-hours {
    padding: 20px;
}

.form-control {
    display: block;
    width: 100%;
    height: auto;
}

.fa-pause-circle {
    color: white;
}

textarea.form-control, .availabilty_type, #events-hours, #events-start_date, #events-start_time, span.select2-selection.select2-selection--multiple, .submitButton {
    height: auto;
    width: 320px;
    margin: 0 auto;
	font-size: 1.4rem;	
    border-bottom: 1px solid #7fd9c7;
    box-shadow: 0 1px 0 0 #7fd9c7;	
}

span.select2-dropdown.select2-dropdown--above {
    width: 360px!important;
}

#addavail_options .fas {
    color: rgb(26 188 156 / 56%);
	font-size: 1.2rem;
}

.select2-container--krajee-bs4 .select2-selection--multiple .select2-selection__clear {
    top: 0.4rem;
    right: 0.3rem;
}

span.select2-selection.select2-selection--multiple {
    padding: 12px;
    font-size: 1.4rem;
    border-bottom: 1px solid #7fd9c7;
    box-shadow: 0 1px 0 0 #7fd9c7;	
}

.select2-container--krajee-bs4 .select2-results__option[aria-selected] {
    font-size: 1.2rem;
}

#events-start_date-kvdate, .bootstrap-timepicker.input-group {
    width: 320px;
    margin: 0 auto;
    flex-wrap: nowrap;
}

.btn-danger {
    background-color: rgb(220 53 69 / 75%);
}

.btn-dark {
    background-color: rgb(0 0 0 / 47%);
    border-color: rgb(120 115 115 / 65%);
}

.btn-primary {
    background-color: rgb(56 142 162 / 64%);
    border-color: rgb(107 162 174 / 86%);
}

.btn-primary:hover {
    background-color: #5aadc1;
    border-color: #3f8da0;
}

.btn-info {
    background-color: rgb(26 188 156 / 62%);
    border-color: rgb(105 183 167 / 82%);
}

.fa-user {
    font-size: 14px;
}

.activity-item {
    border-bottom: 1px solid rgb(0 0 0 / 8%);
    padding-bottom: 10px;
}

.disabled-item {
    display: block!important;
}

.btn-success:hover {
    background-color: #81dac9;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 3px 0px 0px #78cfbf;
    -webkit-box-shadow: 0px 3px 0px 0px #78cfbf;
    box-shadow: 0px 3px 0px 0px #78cfbf;
    color: #ffffff;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.btn-success:visited {
    background-color: #1abc9c;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 3px 0px 0px #029e81;
    -webkit-box-shadow: 0px 3px 0px 0px #029e81;
    box-shadow: 0px 3px 0px 0px #029e81;
    color: #ffffff;
}

.btn-success:hover {
    color: #fff;
    background-color: #2fe0bd;
    border-color: #1e7e34;
}


.btn-inactive, .btn-inactive:visited {
    -moz-box-shadow: 0px 3px 0px 0px rgb(2 158 129 / 72%);
    -webkit-box-shadow: 0px 3px 0px 0px rgb(2 158 129 / 72%);
    box-shadow: 0px 3px 0px 0px rgb(205 210 209 / 72%);
    color: #adadad;
    border-radius: 3px;
    border-color: rgb(223 225 227);
}


.events-index .btn-inactive {
    font-size: 12px;
    font-weight: 700;
    padding: 10px 20px;
}

/*
.disabled-item .description, .disabled-item .d-block {
    color: #aaaaaa;
}
*/

.disabled-item .col-md-7 {
    opacity: 0.5;
}

.disabled-item::before {
    content: "PAUSED";
    color: white;
    background: #878787;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
    /* margin-bottom: 10px; */
    font-size: 10px;
}

.disabled-item .col-md-7 {
    opacity: 0.5;
    margin-top: 7px;
}

.disabled-item {
    display: block!important;
}

.tooltiptest {
    position:relative; /* making the .tooltip span a container for the tooltip text */
    border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
  }

  .tooltiptest:before {
    content: "Pause availability to enable it later";
    position:absolute;
    
    /* vertically center */
    top:50%;
    transform:translateY(-50%);
    
    /* move to right */
    left:100%;
    margin-left:15px; /* and add a small left margin */
    
    /* basic styles */
    width:200px;
    padding:10px;
    border-radius:10px;
    background:#000;
    color: #fff;
    text-align:center;
  
    display:none; /* hide by default */
  }

  .tooltiptest:hover:before {
    display:block;
  }

  .tooltiptest:before {
    /* reset defaults */
    left:initial;
    margin:initial;
  
    /* set new values */
    right:100%;
    margin-right:15px;
  }

  #header_avail {
    margin: 0 auto;
}

#loginFB {
    font-size: 20px;
    color: white;
    border: 1px solid rgb(255 255 255 / 60%);
    padding-left: 13px;
    padding-right: 13px;
    background: none;
    /* font-weight: 300; */
}

#loginFB:hover {
    box-shadow: none;
    background: #1a7581;
}

i.fas.fa-exclamation-circle {
    color: #ee7581;
}

i.fa.fa-facebook-square {
    padding-right: 4px;
}

span.badge.badge-info {
    font-size: 11px;
    padding: 6px;
}

.tag .fas, .badge .fas {
    padding-right: 2px;
    font-size: 10px;
}

.site-contact textarea.form-control {
    width: 100%;
}

.footer-basic {
    padding:40px 0;
    background-color:#ffffff;
    color:#4b4c4d;
  }
  
  .footer-basic ul {
    padding:0;
    list-style:none;
    text-align:center;
    font-size:18px;
    line-height:1.6;
    margin-bottom:0;
  }
  
  .footer-basic li {
    padding:0 10px;
  }
  
  .footer-basic ul a {
    color:inherit;
    text-decoration:none;
    opacity:0.8;
  }
  
  .footer-basic ul a:hover {
    opacity:1;
  }
  
  .footer-basic .social {
    text-align:center;
    padding-bottom:25px;
  }
  
  .footer-basic .social > a {
    font-size:24px;
    width:40px;
    height:40px;
    line-height:40px;
    display:inline-block;
    text-align:center;
    border-radius:50%;
    border:1px solid #ccc;
    margin:0 8px;
    color:inherit;
    opacity:0.75;
  }
  
  .footer-basic .social > a:hover {
    opacity:0.9;
  }
  
  .footer-basic .copyright {
    margin-top:15px;
    text-align:center;
    font-size:13px;
    color:#aaa;
    margin-bottom:0;
  }

  .events-index {
    min-height: 650px;
}

i.fas.fa-envelope-open {
    color: #f08383;
}

.weeklyBadge {
    font-weight: 300;
    /* border: 1px solid #dad8d8; */
    font-size: 13px;
    letter-spacing: 1px;
    /* box-shadow: 0 1px 0px #e4e6e8; */
    padding-left: 0px;
    padding-right: 7px;
}

.weeklyBadge .fas, .fa-clock {
    color: #7cd4c3;
    font-size: 11px;
}

#start_end_time {
    letter-spacing: 0.5px;
}

#joinButton {
    float: right;
}

.sendMessage .fa-play {
    font-size: 12px;
    margin-right: 5px;
}

textarea#messageform-message {
    width: 100%;
    font-size: 1.2rem;
}

.social .fas, .social .fab, .social .far {
    padding-right: 0;
}

.btn-nextDay {
    border-color: rgb(178 179 179 / 82%);
    color: #85dbca;
    border: 1px solid;
    box-shadow: 0.5px 0.5px 0px #80e0cd;
}

#modal-form-success {
    background: #cefddc;
    padding: 20px;
    border-radius: 10px;
    color: green;
}

.sendMessage.contacted {
    background: #60a9ed;
    border: 1px solid #8baecf;
}

.sendMessage, .sendMessageForm {
    text-align: center;
    /* text-transform: uppercase; */
    cursor: pointer;
    /* font-size: 20px; */
    letter-spacing: 1px;
    position: relative;
    background-color: #16a085;
    border: none;
    color: #fff;
    /* padding: 20px; */
    /* width: 200px; */
    text-align: center;
    transition-duration: 0.4s;
    overflow: hidden;
    box-shadow: 0 1px 3px #a6a9ac;
    border-radius: 4px;
}

.sendMessage:hover {
    background: #fff;
    box-shadow: 0px 1px 6px 1px #1abc9c;
    color: #34c3a7;
}

.sendMessage:focus { outline:0; }

.proIcon {
    font-size: 15px;
    color: #16a090;
    /* background: aliceblue; */
    margin-top: 10px;
}

.form-group.field-events-is_pro {
    margin-bottom: 0;
}

.proIcon a {
    color: #16a090;
}

.proNotPushed, .proPushed {
    font-size: 13px;
    padding: 2px;
    padding-left: 16px;
    padding-right: 16px;
    letter-spacing: 0.7px;
    background: #908a8a;
    width: 100%;
    box-shadow: 0 1px 4px #a6a9ac;
}

.proPushed {
    background: #62d0ba;
}
#dontWorry .alert-success {
    width: 320px;
    box-shadow: 0px 3px 0px 0px rgb(205 210 209 / 72%);
}

#dontWorry {
    font-size: 0.9rem;
}

.sidenav .proNotPushed, .sidenav .proPushed {
    box-shadow: none;
}


.filterButton {
    background: none;
    color: rgb(128 128 128 / 44%);
    border: 1px solid rgb(128 128 128 / 34%);
}

.d-flex.signupBody {
    margin: 0 auto;
    width: 114px;
}

.proNotPushed:hover {
    background: #b7b4b4;
}

i.fas.fa-filter {
    font-size: 11px;
}

img.coronaProof.mt-2 {
    width: 50px;
}


  @media only screen and (max-width: 600px) {
    .main_title_div {
        background-image: url(/img/logo.png);
        width: 66px;
        display: none;
    }

    #events-description {
        height: 250px;
    }

    .topIntro h1 {
        font-size: 1.45em;
        margin-top: 41px;
    }

    .topIntro {
        padding: 4em 2em 2.5em 2em;
        width: 100%;
    }
  }



/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 250px; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Stay on top */
    top: 0; /* Stay at the top */
    right: -250px;
    background-color: rgba(0, 0, 0, 0.9); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 50px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    padding-left: 15px ;
    padding-right: 15px ;
    border-radius: 3px;
}

/* The navigation menu links */
.sidenav hr{
    color: white;

    border: none; /* Убираем границу для браузера Firefox */

    margin: 3px 10px;
    background-color: #545454; /* Цвет линии для браузера Firefox и Opera */
    height: 1px; /* Толщина линии */
}
.sidenav a {
    /*padding: 8px 8px 8px 32px;*/
    /*text-decoration: none;*/

    /*color: #818181;*/
    /*display: block;*/
    /*transition: 0.3s;*/
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 31px;
    margin-left: 50px;
    color: white;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 30px;}
    /*.sidenav a {font-size: 18px;}*/
}

/* Pro icon test */

.proIcon a {
    color: #16a090;
    font-weight: 700;
    margin-top: 52px;
    position: absolute;
    margin-left: 9px;
    letter-spacing: 0.1em;
}

i.far.fa-star {
    border-radius: 50%;
    border: 1px solid #16a085;
    padding: 5px;
    background-color: #16a085;
    color: white;
    position: absolute;
    margin-top: 30px;
    margin-left: -8px;
}

img.coronaProof.mt-2 {
    display: none;
}

.seeOtherAvails {
    width: 233px;
}

.seeOtherAvails .btn {
    font-size: 16px;
    font-weight: 300;
}