/*
Theme Name:     wp spc
Description:    spcevents.gr
Author:         toolbox

*/


html,
body {
    height: 100%;
}

.strong{
    font-weight: bold;
}

.align-center{
    text-align: center;
}
a.normal-letter{
    text-decoration: none;
}
.italic{
    font-style: italic;
}

#main-header{
    margin-top: 1.5rem;
}

#main-header img{
    width: 20vw;
    height: auto;
}

#login-image img{
    width: 15vw;
    height: auto;    
}

#main-nav{
    border-top: 1px solid #00833c;        
    margin-top: 1rem;    
    border-bottom: 1px solid #00833c;    
    margin-bottom: 1rem;
}

.btn-primary, .btn-primary:hover, .btn-primary:focus{
    background-color: #00833c;
    border-color: #00833c;
}

.alert-primary{
    color: #00833c;    
    background-color: #A7DFC0;
    border-color: #00833c;
}

input.form-control:focus{
    border-color: #A7DFC0;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(167, 223, 192, .25);
}

.btn-primary:focus{
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(167, 223, 192, .25);    
}

.nav-link, .nav-link:hover, .bi-chat::before, .main-title, #choose-event a, #choose-event a:hover, #choose-event a:focus, .nav-link.active{
    color: #00833c;        
}

.nav-link.active{
    font-weight: bold;
}

.accordion-button:not(.collapsed){
    color: #00833c;    
    background-color: #A7DFC0;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300833c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}

.accordion-button:focus {
    z-index: 3;
    border-color: #A7DFC0;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(167, 223, 192, .25);
}

#login .container #login-row #login-column #login-box {
  margin-top: 120px;
  max-width: 600px;
  max-height: 380px;
  border: 1px solid #9C9C9C;
}
#login .container #login-row #login-column #login-box #login-form {
  padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form #register-link {
  margin-top: -85px;
}

#login .btn{
    width: 100%;
    margin-top: 3%;
}

.mobile, .uploadedimage, #end-event, #show-last-button{
    display: none;
}

.main-title{
    padding-top: 2rem;
}

.form-switch{
    min-height: 2.5rem;
}

.form-switch .form-check-input{
    width: 4em;
    height: 2em;
}

#event-area-submission .form-switch{
    margin-bottom: 1rem;
}

#event-area-submission .form-outline{
    margin-bottom: 1.5rem;    
}

#event-area-submission .form-switch label{
    font-size: 1.3rem;
    padding-top: 0.2rem;
    padding-left: 0.5rem;
}

#button-start-event p, #start-event-time p{
    padding-bottom: 1rem;
}

#button-start-event button{
    margin-bottom: 1rem;
}

form.formId div, .submit-upload{
  position: relative;
  height: auto;
  overflow: hidden;
  cursor: pointer;
  margin:  0 auto;
}

.formId input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

.submit-upload button, .formId button{
    width: 100%;
}

.submit-upload{
    margin-bottom: 1rem;
    display: none;
}

.preview{
    width: 300px; margin: 0 auto 20px auto;
}

.preview img{
    padding-bottom: 20px;}

.remove-image{
    width: 100%;
}

#first_images{
    margin-top: 50px; 
}

.col-sm-6.opened img, .col-sm-12.opened img{
    padding-bottom: 10px;
}

#panelsStayOpen-collapseFour .col-6, #panelsStayOpen-collapseSix .col-6{
    margin-bottom: 1rem;
}

.overlay-form{
    display: none;
    position: fixed;
    z-index: 50;
    padding: 10px 20px;
    border: 1px solid #ced4da;
    background-color: #ffffff;
    right: 10px;
    bottom: 0;
}

.overlay-form button{
    width: 100%;
    margin-top: 10px; 
}

.overlay-form .list-group{
    display: none;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 20px;
}

.bubble-box{
    position: fixed;
    z-index: 50;
    right: 10px;
    bottom: 10px;    
    background-color: #ffffff;    
}

#choose-event{
    margin-bottom: 20px;
}

#step_two_images, #step_five_images{
    margin-top: 50px;
}

@media (max-width: 897px) {
    
    .mobile{
        display: block;
    }    
}