@import url("colors.css");
@import url("menu.css");
@import url("table.css");

/*
@import url("tab/tabulator_fch.css");
font-family: Verdana,sans-serif;

*/

html,body{    
    text-decoration: none;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    font-size: 12px;
}

div.maintable{
    display: table;
    width: 100%;

    min-height: 100%;
    height:auto !important;
    height:100%;
}

h1 {

}

h2 {
    font-size: 12px;  
    margin-top: 5px;
    margin-bottom: 5px;    
}

img.cards {
    -ms-interpolation-mode: bicubic;
    padding: 4px 4px 10px 10px;
    height: 20px;
}

div.window {
    position: absolute;
    /*background: #664444;*/
    color: #000000;
    background: #FFFFFF;
    opacity:1.00;
    width: 350px;
    height: 400px;  

    top: 200px;
    left: 50%;
    margin: -110px 0 0 -175px;
    padding: 3px 3px 3px 3px;
    text-align: center;

    border: 1px solid gray; 
    border-radius: 0px 20px 0px 0px
}


div.window2 {
    /*position: absolute;*/
    position: relative;
    background: #6666AA;
    opacity:0.95;

    width: 300px;
    height: 400px;  

    top: 20px;

    /*margin: -110px 0 0 -175px;*/
    padding: 3px 3px 3px 3px;
    text-align: center;

    border: 1px solid gray; 
    border-radius: 0px 20px 0px 0px;
    z-index: -1;
}

table.info_abo {

    border: 0px solid white;
    background: none;
    color: black;
    padding: 5px;
}

img.bgpic {
    position: absolute;
    top: 130px;
    width: 100%; 
    z-index: -50;    
}

div.main {
    /*background: #6666AA;*/
    border: 0px solid red;
    width:  100%;
    height: 480px;    
}

div.theorie {
    border: 1px solid var(--cl-gray-5);  
    padding: 5px;
    margin: 10px;
}

div.maindiv{
    border: 1px solid var(--cl-gray-5);  
    padding: 5px;
    margin: 10px;
    height: 440px;
    width: 840px;
    overflow: auto;
}

div.mainframe {
    border: 1px solid var(--cl-gray-3);  
    padding: 5px 10px;
    margin: 2px 0px;
}

div.regframe {
    border: 1px solid var(--cl-gray-2);
    border-top : 0px;
    padding: 5px 10px;
    margin: 0px 0px;
}

div.regframefull {
    border: 1px solid var(--cl-gray-2);
    padding: 5px 10px;
    margin: 0px 0px;
}

div.theoriewrapper{
    border: 1px solid red;
    column-width: 300px; 
    column-count: 2;
}

div.theoriefloatleft {
    border: 1px solid var(--cl-gray-5);  
    padding: 5px;
    margin: 10px;
    /*float: left;*/
}


div.qred{
    border: 1px solid var(--cl-gray-3);
    background: var(--cl-red);
    color: red;
    width: 10px;
    height: 10px;
}

div.qgreen{
    border: 1px solid var(--cl-gray-3);
    background: var(--cl-darkgreen);
    color: red;
    width: 10px;
    height: 10px;
}

div.qyellow{
    border: 1px solid var(--cl-gray-3);
    background: var(--cl-yellow);
    color: red;
    width: 10px;
    height: 10px;
}

div.head1 {
    color: var(--main-head-textcolor);
    /*background: var(--cl-gray-5);*/
    background-image: linear-gradient(to bottom,  var(--cl-gray-5), var(--cl-gray-6), var(--cl-gray-5));  
    border-bottom: 1px solid var(--cl-gray-2);
    padding: 5px 10px;
    margin: 0px 0px;  
    /*box-shadow: 8px 8px 5px var(--cl-gray-4);*/

    font-size: 18px;
    text-align: left;    
}

div.headgreen {
    color: var(--cl-darkgreen);
    /*background: var(--cl-gray-5);*/
    background-image: linear-gradient(to bottom,  var(--cl-green-2), var(--cl-green));  
    border-bottom: 1px solid var(--cl-darkgreen);

    padding: 5px 10px;
    margin: 0px 0px;  
    /*box-shadow: 8px 8px 5px var(--cl-gray-4);*/

    font-size: 18px;
    text-align: left;    
}


div.begin {
    border: 2px solid var(--cl-gray-3);
    border-radius: 4px;
    color: black;
    background: var(--cl-yellow-2);
    text-align: center;  
    padding: 2px 2px;
    width: 80px;
    cursor: pointer;
    margin: auto;
}

div.begin:hover{
    border: 2px solid var(--cl-gray-1);
    background: var(--cl-yellow);
}

div.ende {
    border: 2px solid var(--cl-gray-3);
    border-radius: 4px;
    color: black;
    background: var(--cl-green-2);
    text-align: center;  
    padding: 2px 2px;
    width: 80px;
    cursor: pointer;
    margin: auto;
}

div.ende:hover{
    border: 2px solid var(--cl-gray-1);
    background: var(--cl-green);
}

div.col3 {
    column-count: 2;
}


img.icon {
    margin: auto;
}

/*
            Tooltips

*/

/*.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
        visibility: hidden;
    background-color: var(--cl-yellow-2);
    color: var(--cl-gray-1);
    text-align: center;
    border: 1px solid var(--cl-gray-2);
    border-radius: 6px;
    padding: 5px 0;

    opacity: 0;
    transition: opacity 0s;
    transition-delay: 0s;
    transition-timing-function: ease-in;


     Position the tooltip 
    width: 120px;
    bottom: 120%;
    left: 50%;
    margin-left: -60px;  Use half of the width (120/2 = 60), to center the tooltip     
    position: absolute;
    z-index: 1;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%;  At the bottom of the tooltip 
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--cl-gray-2) transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    transition-delay: 2s;
    opacity: 1;
}*/

div.progress {
    color:white;
    background-color: var(--cl-gray-2);   
    border: 1px solid black;
    width: 100%;
    /*height: 16px;*/
}

div.progressbar {
    color:white;    
    background-image: linear-gradient(to bottom,  var(--cl-blue-5), var(--cl-blue-3));    
    text-height: 8px;
    /*height: 12px;*/
    /*line-height: 14px;*/
    vertical-align: middle;
    text-align: center;        
}

select.newlesson {
    width: 250px;
}

select:disabled {
    background: var(--cl-gray-5);
}

/*

*/

label { 
    display: block; 
    color: WindowText; 
    background-color: Window; 
    vertical-align: text-bottom;
    margin: 0px; 
    padding: 0;
    padding-top: 2px;
    text-indent: 0px;
    width: 100%;     
}

label:hover { 
    background-image: linear-gradient(to bottom,  var(--cl-blue-3), var(--cl-blue-2));    
    color: HighlightText; 
}

label.liste input[type=checkbox]{
    color: red;
    position: relative;
    vertical-align: middle;
    bottom: 1px;
}

label.form input{ 
    padding: 0px;    
    position: relative;
    vertical-align: middle;  
    bottom: 1px;
}
label.form input:hover{
    background-image:none;
    bottom: 1px;  
}

label.form:hover{
    background-image:none;
    color:black;
    bottom: 1px;  
}

div.checklist{
    border:1px solid var(--cl-gray-3);
    overflow-y: scroll;
}

div.checklist input[type='checkbox']{    
    margin: 4px;
    margin-right: 4px;
    margin-top: 0px;
    vertical-align: top;  
}

div.booking {  
    font-family: sans-serif;
    font-size: 11px;
    padding : 3px;
    box-sizing : border-box;
    text-align: left;

    line-height : 1.2;
    display : inline-block;
    vertical-align : middle;

    opacity : 0.75;
    color : white;
    border-radius : 4px;
    position : absolute;
    text-overflow: ellipsis;
    overflow: hidden;
    /*white-space: nowrap;*/ 
}

input.form_red {
    border: 1px solid red;
    background:  #ffe6e6;
}

.dd_red {
    box-shadow: 0px 0px 4px 4px rgba(200,0,0,0.2);
}

/*Formulare mit Fieldset*/
fieldset.form {
    color:black;
    margin: 2px;
}

fieldset.form legend{
    color:darkblue;
}

fieldset.form td{
    border: 0px solid green;
    vertical-align: middle;
    padding: 2px;
    font-family: Arial;
}

fieldset.form input{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

fieldset.form select{
    font-family: Arial, Helvetica, sans-serif;    
    font-size: 13px;
}

fieldset.form textarea{
    font-family: Arial, Helvetica, sans-serif;    
    font-size: 13px;
}

fieldset.form input[type=hidden]{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    border: 1px solid green;
}

/*Formulare mit editable select*/

 .select-editable {
     position:relative;
     background-color:white;
     border:solid grey 1px;
     width:220px;
     height:18px;
 }
 .select-editable select {
     position:absolute;
     top:0px;
     left:0px;
     font-size:14px;
     border:none;
     width:220px;
     margin:0;
 }
 .select-editable input {
     position:absolute;
     top:0px;
     left:0px;
     width:200px;
     padding:1px;
     font-size:12px;
     border:none;
 }
 .select-editable select:focus, .select-editable input:focus {
     outline:none;
 }
 
.drop-elements{
    margin: 0 0 20px;    
    padding: 20px 0;
    border-top: 1px solid #ccc;
    border-bottom:1px solid #ccc;
    overflow: auto;
    text-align: center;
}

.dropElement{
    display:inline-block;
    width: 400px;
    margin-right:3%;
    height:150px;
    padding:1%;
    background-color:#FFC551;
    vertical-align: top;
}

.dropElement:last-child{
    margin-right:0;
}

.drag-elements{
    height:80px;
    width: 800px;
    padding-top:10px;
    overflow:auto;
    background-color:#FFC551;
    text-align: center;
}

.dropElement,.drag-elements,.dragElement{
    border-radius:5px;
}

.dragElement{
    display:inline-block;
    margin: 0 auto;
    width: 100px;
    height:100px;
    background-color:#0F368F;
    color:#fff;
    font-weight:bold;
    text-align: center;
    line-height: 100px;
    border: 4px solid;
    border-radius:5px;
}

.drag-elements .dragElement{
    margin-right:10px;
}

.drag-elements .dragElement:last-child{
    margin-right:0;
}

.dragElement:hover{cursor: pointer;}

.dragEnter{background-color:#33A0A0;}
.hasChild{background-color:#D56100;}

.redBorder{border-color: #DC143C;}
.greenBorder{border-color: #ADFF2F;}
.orangeBorder{border-color: #FFA500;}
.pinkBorder{border-color: #FF1493;}

/*
Für index.html

*/



.logintable {
    color: red;
}

.logintable td{
    padding:10px; 
    color: darkblue;
    text-align: center;
}

.logindiv{
    color: blue;
    background-image: url('https://www.flyfch.com/wp-content/uploads/20210117_124350-klein-scaled.jpg');
    width:100%;
    height:600px;
}

.logindiv h1{
    color: red; 
    padding:30px;
}

.logindiv img{
    width:300px;
    padding: 30px;
}

.trainingrecord td {
    border: 1px solid lightgray;
    padding: 10px 5px;
}

.trainingrecord {
    border: 0px dotted red;
    padding: 2px;
}


.frame_magenta {
    border: 1px solid magenta;
}

.frame_blue {
    border: 1px solid blue;
}

.noframe {
    border: 0px solid gray;
}