/*
Todo:
evtl. nur  style für den header hier
alles in kalender kann in class ter_kal-gutenberg-block-script
<div class="ter_kal-gutenberg-block-script">[kalender]</div>
block oder block editor style, ...testen

*/
         .fc-event{
             cursor: pointer;
             --fc-list-event-dot-width:2em ;
        }
        .kategoriezeile, .ter_kal_kalender  {
                padding: 0.6em;
            }

        .ter_kal_kalender  {
                width: 100%;
                height:100%;

            }
         .fc-today-button {
             cursor: none;
             }
         .kategoriezeile  {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            background-color: #DCE1E5 ;
        }
        .kategoriezeile div,  .kat_btn {
            text-align: center;
            padding: 0px 0.3em 0px 0.3em;
            border-radius: 0.3em;
            margin-right: 0.3em;
            margin-top:  0.3em;
        }

        .kalender_dashicons {
            font-size: 3em;
           	width: 1em;
            height: 0.1em;
    		line-height: 0.5;
        }
		.tk_list_titel_dashicons {
		    font-size: 1.6em;
		    width: 1em;
		    line-height: 0.5;
		    position: relative;
		    top: 50%;
		    transform: translateY(-50%);
		}


		.tk_kalender_button_icons{
			font-size: 1.7em;
		    width: 1.3em;
		    height: 1.3em;
			position: absolute;
			top: -1.2em;
			left: 0.5em;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    border-radius: 50%;
		}

	    .tk_zeit_block_zeit{

	    }
		.tk_zeit_block_title{
			font-size: 1.2em;
			font-weight: bold;
		}
		.tk_zeit_block{
			font-size: 1.1em;
			font-weight: bold;
			color: #7A8E9F;
		}
		.tk_zeit_block_next{
			font-size: 1em;
			font-weight: bold;
			color: #7A8E9F;
		}

	    .tk_zeit_block_old{
	      font-size: 0.7em;
	    }

		.tk_kategorie-title {
		    height: 2em;
		    padding: 0.3em;
		    position: relative;
		    border-radius: 0.4em 0.4em 0 0;
			max-width: 800px;
		}


    .tk_responsive-row {
       border: 1px solid lightgray;
       padding: 0.6em;
	   position: relative;
	   max-width: 800px;
    }

    .tk_responsive-row:last-of-type {
       border-radius: 0 0 0.6em 0.6em;
    }


        .wp-block-column:not(:last-child) {
        margin-right: 1em;
        }
         .infotext{
            color: #B9C3CC ;
            font-size: 0.8em;
            font-style: italic;
        }
        .labeltext{
            color: #A9B6C1 ;
            font-size: 0.9em;
            font-style: italic;
        }

        .benutzer_rechte {
            color: #AEBEE0;
            font-style: italic;
            margin: 0 auto;
            display: block;
        }

	.ter_kal_info {
	    display: block;
	    text-align: center;
	    font-size: 0.8em;

	}

        /* select[multiple] */
        #event_attendees  {
            height: auto;
            max-height: 150em;
            overflow-y: auto;
        }

        #einzel_id  {
            display: none;
        }


        .ter_kal_notes{
            background-color: #FFFFEB !important;
            border: 0.05em solid #A9B6C1;
            border-radius: 0.4em;
            box-shadow: 0.3em 0.3em 0.5em #BDBDBD;
            padding: 0.3em;
        }

        .modal-body {
		  background-color: #F6F7F8;
        }

		.beschreibung_text {
            color: #1F3051;
            font-style: italic;
        }


/*

.site-header, .site-footer, .entry-title, .site-content .widget-area, .sidebar {
           display: none;
        }

        .site-content {
            width: 100% !important;
            padding: 0;
        }


.fullscreen-div {
  width: 100vw; 100% of the viewport width
  height: 100vh 100% of the viewport height
  position: fixed; or absolute, depending on use case
  top: 0;
  left: 0;
}


    .tk-full-browser-content {
        width: 100vw !important;
        height: 100vh !important;
        position: fixed;
        -------------top: -1em;  Default to top: 0
    	top: 2em;  --------- Only set top to 2em if admin bar is active
        left: 0;
    	right: 0;
        background: rgba(255, 255, 255, 0.95);
    	z-index: 300000 !important;
        overflow: auto;
    }

*/ 

    .modal-backdrop {
        all: unset !important; /*to avoid conflict with themes like enfold/avia..*/
/*
    		z-index: 99998  ;
			background: rgba(0, 0, 0, 0.7);
*/
    }


		#kalender_modal {
        	background: rgba(0, 0, 0, 0.7);
			/*z-index: 99999  ;  */
        }



	.help_content_images{
	  max-width: 99%;
	  height: auto;
	}

  .ter_kal_form_help {
    color: #95A5B2;
    cursor: pointer;
    text-size: 2.2em;
    vertical-align: middle;
	display: none;
  }

	.t_k_reservation-container {
		position: relative;
		border: 2px solid #B9DFF3;
		border-radius: 15px;
		background-color: #e7f4fb;
		padding: 15px;
		box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
		max-width: 800px; /* Added line */
	}

  .t_k_reservation-container .t_k_reservation-image {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    opacity: 0.5; /* Makes the element 50% transparent */
  }

	.tk_reservation_category {
		opacity: 0.5;
	}

	.tk_reservation_titel_dashicons  {
	    font-size: 3em;
		position: relative;
	    width: 1em;
	    top: 50%;
	    transform: translateY(-50%);
	}


   .col-form-label {
   		color: #8FA0AE ;
    	font-size: 0.9em ;
   }

   .tk_form_zeigen {
		border: none ;
   }

	/* hide caret pfeil of select field if field is text only (termin zeigen) */
	select[disabled] {
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    text-indent: 0.01px;
	    text-overflow: '';
	}

	.label-beta{
		background-color: #f0ad4e;
		color: white;
		border-radius: 3px;
		padding: 3px 6px;
		font-size: 0.75em;
		margin-left: 10px;
	}

	.label-free{
		background-color: #8DF046;
		color: white;
		border-radius: 3px;
		padding: 3px 6px;
		font-size: 0.75em;
		margin-left: 10px;
	}

	.label-pro{
		background-color: #068BF0;
		color: white;
		border-radius: 3px;
		padding: 3px 6px;
		font-size: 0.75em;
		margin-left: 10px;
	}




/* Style for phones (small screens) */
@media screen and (max-width: 767.98px) {

    #termin-kalender-calendar{
      font-size: 0.8em;
    }
            .kategoriezeile div, .kat_btn {
                font-size: 0.8em;
            }

            .kat_btn{
                //font-weight: 900;
                font-size: 0.8em;
                padding: 0px 0.3em 0px 0.3em;
            }

            .fc .fc-toolbar.fc-header-toolbar {
                display: block;
                text-align: center;
            }

            .fc-header-toolbar .fc-toolbar-chunk {
                display: block;
            }
/*	tbody, thead { float: left; }
    thead { min-width: 120px }
    td,th { display: block }
 */

}