@charset "utf-8";



.boards #board_suche {
    margin-bottom: 8px;
    width: 100%;
    font-size: 18px;
    padding: 16px 16px 16px 48px;
    background-image: url('../../img/lupe.png');
    background-position: 8px center;
    background-size: 32px;
    background-repeat: no-repeat;
}


.boards .board_karte {
    width: 250px;
    padding: 16px;
    margin: 4px;
    vertical-align: top;
    display: inline-block;
    background-color: #ffffff;
    border: 1px solid #c9c9c9;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
    transition: all .25s;
}

.board_karte:hover {
    border: 1px solid #727272;
}

.board_karte .titel {
    font-size: 18px;
    margin-bottom: 8px;
    color: #488925;
}



@media screen and (max-width: 800px) {
    
    .boards #board_suche {
        width: 100%;
        font-size: 14px;
        padding: 8px 8px 8px 32px;
        background-size: 24px;
    }
    
    .board_karte .titel {
        font-size: 14px;
    }
    
}



.board_toolbar {
    display: inline-block;
    position: sticky;
    top: calc(100% - 32px);
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 16px #00000055;
    padding: 4px;
    z-index: 2;
    cursor: default;
}



.board_toolbar .toolbar_knopf {
    display: inline-block;
    vertical-align: middle;
    padding: 4px;
    cursor: pointer;
    background-color: #fff;
    border-radius: 4px;
    transition: all 0.2s;
}

.board_toolbar .toolbar_knopf:hover {
    background-color: #e9e9e9;
}

.board_toolbar .toolbar_knopf img {
    width: 20px;
    filter: saturate(0);
    transition: all 0.2s;
}

.board_toolbar .toolbar_knopf.aktiv img {
    filter: saturate(1);
}



.board_toolbar .toolbar_trenner {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 8px 0px 8px;
    border-right: 1px solid #8d8d8d;
    cursor: default;
}



.board_toolbar .toolbar_farbe {
    padding: 0px;
    margin: 0px;
    width: 26px;
    height: 28px;
    border: none;
    vertical-align: bottom;
}



.board_anzeige {
    background-image: url(../../img/millimeterpapier.png);
    top: 0px;
    bottom: 0px;
    left: 140px;
    right: 0px;
    position: absolute;
    z-index: 1;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

@media screen and (max-width: 600px) {

    .board_anzeige {
        left: 45px;
    }

}



.board_anzeige .board_rechteck {
    display: inline-block;
    position: absolute;
}



.board_anzeige .board_kreis {
    display: inline-block;
    position: absolute;
    border-radius: 50%;
}



.board_anzeige .board_linie {
    display: inline-block;
    position: absolute;
}



.board_anzeige .board_zeichnen {
    display: inline-block;
    position: absolute;
}



.board_anzeige .board_bild {
    display: inline-block;
    position: absolute;
    background-color: #5a5a5a;
}



.board_anzeige .board_text {
    display: inline-block;
    position: absolute;
    background-color: #ebebeb;
}



.board_anzeige .board_selektiert {
    outline: 5px solid #503cff
}



.board_anzeige .board_handle {
    display: none;
    background-color: transparent;
    border: 5px solid #503cff;
    border-radius: 50%;
    position: absolute;
    height: 16px;
    width: 16px;
    z-index: 1;
}

.board_anzeige .board_handle.board_handle_1 {
    cursor: nwse-resize;
}

.board_anzeige .board_handle.board_handle_2 {
    cursor: nesw-resize;
}

.board_anzeige .board_handle.board_handle_3 {
    cursor: nwse-resize;
}

.board_anzeige .board_handle.board_handle_4 {
    cursor: nesw-resize;
}

.board_anzeige .board_handle.sichtbar {
    display: inline-block;
}



.board_anzeige .animiert {
    transition: all 0.5s;
}



.board_anzeige .board_select_box {
    background-color: rgb(41 100 174 / 48%);
    border-width: 5px;
    border-style: solid;
    border-color: rgb(41 100 174);
    display: none;
    z-index: 1;
    position: absolute;
}



.board_panel {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
    padding: 0px 16px 0px 16px;
    background-color: #fff;
    border-radius: 0px 0px 0px 8px;
    z-index: 1;
    max-height: 0px;
    opacity: 0.0;
    transition: all 0.4s;
}



.board_panel.sichtbar {
    max-height: 1000px;
    padding: 16px;
    opacity: 1.0;
}



.board_panel .board_panel_bereich {
    max-height: 0px;
    opacity: 0.0;
    transition: all 0.4s;
    overflow: hidden;
}



.board_panel .board_panel_bereich.sichtbar {
    max-height: 500px;
    opacity: 1.0;
}



.board_panel label {
    font-size: 12px;
}

.board_panel input {
    font-size: 12px;
}

.board_panel select {
    font-size: 12px;
}