@charset "UTF-8";

/**
 * Long description
 * Proprietary software created by S&H Ording is closed source code. No licence is offered.
 *
 * @copyright Copyright (c) 2017- S&H Ording, Warendorf, Germany
 * @author GOrding
 * @created 05.01.2018 10:10
 */

@media all
{
    ::-webkit-scrollbar{
        width: 5px;
    }
    ::-webkit-scrollbar-thumb {
        background-color: red;
        border: 4px solid transparent;
        border-radius: 2px;
        background-clip: padding-box;
    }
    #content{background-color: transparent; box-shadow: none; position: relative;}
    #shoeingExportWrapper,
    #stableHorseList,
    #stableTrainerList{margin: 1vh auto 0; max-width: 500px; width: 80%}
    #stableHorseList .ehwHorse,
    #stableTrainerList .listLine a{display: block; margin: 0 10%; position: relative; width: 80%;}
    #stableHorseList .ehwHorse .visibility{position: absolute; right: 1%; top: 4px;}
    #stableHorseList .ehwHorse{margin-bottom: 1vh;}
    #stableHorseList .ehwHorse.very.urgent{background-color: #FFBBBB; color: #0000FF; }
    #stableHorseList .ehwHorse.urgent{background-color: #BBBBFF;}
    #stableHorseList .ehwHorse.urgent:hover{background-color: #DCDCDC; color: #111;}

    .listDescription{min-height: 30px;}

    #stableHorseList .ehwHorse.hidden{display: none;}
    .addStableHorseButton{
        background: url("../images/icons/plus.png") no-repeat center center transparent;
        background-size: contain;
        width: 28px;
        height: 28px;
        position: absolute;
        right: 6%;
        top: 0;
    }

    .addButton{
        background: url("../images/icons/plus.png") no-repeat center center transparent;
        background-size: contain;
        width: 20px;
        height: 20px;
        margin: 0 1%;
    }

    .deleteButton{
        background: url("../images/icons/muell.png") no-repeat center center transparent;
        background-size: contain;
        width: 20px;
        height: 20px;
        margin: 0 1%;
    }

    .sendMailButton{
        background: url("../images/icons/mail-send-icon.png") no-repeat center center transparent;
        background-size: contain;
        width: 20px;
        height: 20px;
        margin: 0 1%;
    }

    #documentationView{
        border: 2px inset #666;
        box-shadow: 2px 3px 6px #333, -2px 3px 6px #333;
        background-color: #dedede;
        padding: 1%;
        position: absolute;
        top: 5px;
        width: 92%;
        z-index: 10;

    }

    #horseShoeing{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr 2fr 2fr;
        grid-template-areas:
            "mList horseInfo"
            "mList shoeingForm"
            "mList lastShoeing";
        max-height: 50vh;
    }

    #materialList{
        grid-area: mList;
        overflow-y: auto;
        overflow-x: hidden;
        direction: rtl;
        background-color: #EFEFEF;
        border-radius: 6px;
        padding: 2px;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 117, 0.61) #ccc;
        box-shadow: 2px 1px 3px #222, -1px 2px 3px #222;
    }

    .shoeingContent,
    #materialStart,
    #shoeingBaseData{width: 90%; margin: 3vh auto 0;}


    #materialList .list{direction: ltr;}
    #materialList .listLine{width: 95%;}
    #lastShoeing .listField,
    #materialList .listField{
        background-color: #969696;
        color: #eee;
        text-align: center;
        width: 98%;}

    #horseInfo{grid-area: horseInfo; padding: 20px 0 0 0;}
    #horseInfo .horseName{color: #c40000; text-align: center; position: relative}
    #horseInfo .lastShoeingDate{color: #0000c4;}
    #horseInfo .additionalHorseInfo{width: 78%; margin: 1% 10% 0;}

    #shoeingForm{
        grid-area: shoeingForm;
        border: 3px inset #666;
        background-color: #ccc;
        border-radius: 6px;
        box-shadow: 2px 1px 3px #222, -1px 2px 3px #222;
    }
    #shoeingForm .headLine{
        background-color: #fefefe;
        padding-bottom: 4px;
        border-bottom: 3px inset #666;
    }

    #lastShoeing{
        grid-area: lastShoeing;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 117, 0.61) #ccc;
    }

    .lastShoeingPosition{
        border: 3px outset #333;
        margin-bottom: 1vh;
        border-radius: 6px;
        box-shadow: 2px 1px 3px #222, -1px 2px 3px #222;
    }

    .lastShoeingPosition .headline{background-color: #FFFFFF; padding: 3px 0; position: relative;}
    .lastShoeingPosition .headline.exported{background-color: transparent; }
    .lastShoeingPosition .headline .editShoeing{
        background: url('../images/icons/pencil.png') no-repeat center center transparent;
        background-size: contain;
        height: 15px;
        position: absolute;
        top: 0;
        right: 6%;
        width: 15px;
        min-width: 20px;
    }
    .lastShoeingPosition .headline .isMainShoeing{
        background: url('../images/icons/ok.png') no-repeat center transparent;
        background-size: contain;
        height: 15px;
        position: absolute;
        top: 2px;
        right: 2%;
        width: 15px;
        min-width: 20px;
    }

    .lastShoeingPosition .listLine{margin: 3px 5% 1px; width: 90%;}

    #currentShoeingMaterialList .listLine{background-color: #eeeeff; display: block; width: 92%;}
    #currentShoeingMaterialList .listLine .name{width: 74%; overflow: hidden;}
    #currentShoeingMaterialList .listLine .num{width: 10%; text-align: center;}

    #horseShoeing .editIcon{position: absolute; left: 5%;}


    #exportOverview{float: left; width: 90px;}
    #exportList{float: right; width: 400px; border: 4px outset ; border-radius: 12px;}

    .exportColumn{height: 80vh; overflow-y: auto; overflow-x: hidden;}

    #exportOverview .submitButton{margin-top: 5px; width: 90%; border-radius: 12px;}
    #exportOverview .submitButton.active{ background-color: #E36A66; border-radius: 12px 84px 84px 12px; width: 98%; z-index: 20; color: #0000c4; font-weight: bolder;}


    #exportData .stableName {text-align: left;}
    #exportData .stableName.submitButton {margin: 5px 5% 0; width: 79%; padding: 4px 5%;}
    #exportData .stableName.selected{position: absolute; top: -21px; left: 120px}
    #exportData .listField{font-size: 12px;}
    #exportData .listField.day{text-align: left; font-size: 14px; font-weight: bold; color: #CC0000; text-shadow: -1px 1px 2px #666; }
    #exportData .listField.horse{text-align: left; color: #333; margin-left: 5%; width: 85%; border-bottom: 2px inset #666;}
    #exportData .listField .blacksmith{text-align: left; color: #33F;}
    #exportData .listField.material{text-align: left; color: #333;}
    #exportData .listField.num{text-align: right; color: #333;}

    #exportData .listLine.day{width: 92%; margin: 0 0 1vh 5%; border: 2px outset #cc0000; background-color: #cccccc;}
    #exportData .listLine.day .listLine{border: none;}
    #exportData .listLine.day .listLine.materialLine{border-bottom: 1px solid #333; width: 77%; margin-left: 15%;}
    #exportData .listLine.day .listLine.materialLine:last-child{border-bottom: none;}

    #exportData .hiddenHorseList,
    #exportData .hiddenHorsesButton{width: 88%; margin: 0 0 1vh 5%;}

    #exportData .hiddenHorseList .hiddenHorseLine{border-bottom: 1px solid #666;}
    #exportData .hiddenHorseList .ownerName{width: 48%; text-align: left;}

    #materialStart .submitButton,
    #shoeingBaseData .submitButton{margin: 15px 15px 0 0; font-size: 120%; width: 40%; display: inline-block;}
    #shoeingBaseData .fullSubmitButton{margin: 15px 15px 0 0; font-size: 120%; width: 86%; display: inline-block;}

    #addStable,
    #addHorse{margin-top: 2vh;}
    #addStable .formFieldWrapper,
    #addHorse .formFieldWrapper{margin: 0 0 0.75vh 0;}
    #horseEdit label,
    #addStable label,
    #addHorse label{width:24%;}
    #horseEdit .bottomLabel label{width: 100%;}

    #horseEdit .leftLabel select,
    #horseEdit .leftLabel input,
    #horseEdit .leftLabel textarea,
    #addStable .leftLabel select,
    #addStable .leftLabel input,
    #horseEdit .leftLabel textarea,
    #addHorse .leftLabel textarea,
    #addHorse .leftLabel select,
    #addHorse .leftLabel input{width: 66%;}

    #horseEdit .formFieldWrapper,
    #addHorse .formFieldWrapper {margin-bottom: 0.75vh;}

    #newDocumentation .formFieldWrapper{margin:0;}

    #materialStart{ margin-top: 40px;}

    #materialsList{max-width: 600px; margin: 0 auto;}
    #materialsList .material{float: left; max-Width: 60%;}
    #materialsList .stockField{float: right; border: 2px inset #666; border-radius: 4px; min-width: 30px; width: 10%; text-align: right; padding-right: 1.5%; margin-right: 1.5%;}
    #materialsList .minStock{color: #FF6666;}
    #materialsList .stock{color: #3333FF;}

    .idInfo{width: 14px; height: 14px; font-size: 14px;}

    #stableEditList{width: 60%; margin: 2vh auto;}
    #stableEditList .idInfo{left: -30px; top: 9px; text-align: right;}
    #stableEditList .listLine{display: flex; align-items: center;}
    #stableEditList .eightsField{text-align: right;}

    .submitButton.green{color: #23700f;}

    #horseDocumentationHead,
    #horseDocumentationBody{

        border-color: #3333FF;
    }
    #horseDocumentationBody{
        background-color: #CCCCCC;
    }

    .deleteNewPicture {
        background: url(../images/icons/closeSmall.png) no-repeat 0 -23px transparent;
        cursor: pointer;
        height: 21px;
        position: absolute;
        right: -9px;
        top: -9px;
        width: 21px;
    }

}

@media screen and (max-width: 800px) {
    #stableEditList{width: 80%;}
}

@media screen and (max-width: 600px) {
    #content{width: 100%;}
    #exportOverview{width: 23%; font-size: 9px;}
    #exportList{width: 74%;}
    #materialStart .submitButton,
    #shoeing .submitButton{font-size: 100%;}

    #stableEditList{width: 90%;}
}