.mainContentBox {
    color: #eee;
    border: none;
    background-color: transparent;
}

.mainContentBox.addTaskForm {
    color: #eee;

    margin-top: 4em;
    margin-bottom: 1em;
    /*padding-bottom: 0.5em;*/
    min-width: 50%;
    max-width: 60%;

    font-size: 100%;
    text-align: center;

    border: 2px #f40011 solid;
    border-radius: 10px;
    background-color: #f44336;
}

.mainContentBox.addTaskForm h1 {
    width: 100%;

    border-bottom: 2px solid #fff;
    border-radius: 0px;
    background-color: transparent;
}

form-control {
    padding-right: 0px;
    padding-left: 0px;
}

.mainContentBox.addTaskFormBox .form-row {
    padding-left: 0px;
    padding-right: 0px;
}

.form-row>.col, .form-row>[class*=col-] {
    padding-left: 0px;
    padding-right: 0px;
}

.mainContentBox.addTaskFormBox {
    max-width: 100%;
    font-size: 100%;
    text-align: center;
}

.mainContentBox.addTaskFormBox h1 {
    width: 100%;

    padding-bottom: 0.1em;

    border: 2px #f40011 solid;
    border-radius: 10px;
    background-color: #f44336;
}

.createTaskForm {
    text-align: center;
    margin-bottom: 2em;

    background-color: transparent;
}

.createTaskForm .formRow {
    display: block;
    margin-bottom: 1em;
}

.createTaskForm .formFooter {
    padding-left: 15%;
    padding-right: 15%;

    text-align: center;
}

.createTaskForm .formFieldError {
    margin-top: 1pxt;
}

.createTaskFormContent,
.createTaskTitleForm,
.createTaskPriceForm {
    text-align: left;

    /*border: 1px solid #00f;*/
}

.createTaskTitleForm h1,
.createTaskPriceForm h1 {
    text-align: center;
}

.createTaskFormContent .formFooter,
.createTaskTitleForm .formFooter,
.createTaskPriceForm .formFooter {
    margin-top: 2em;
    padding-right: 0px;
    padding-left: 0px;
}

.createTaskTitleForm input#txtTaskTitle,
.createTaskTitleForm input#txtTaskPin,
.createTaskTitleForm input#txtTaskCity,
.createTaskTitleForm textarea {
    width: 100%;
}

.createTaskTitleForm textarea {
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    resize: vertical;
}

.createTaskTitleForm label,
.createTaskPriceForm label{
    margin-bottom: 0.3rem;
}

.createTaskPriceForm row {
    margin-bottom: 1em;
}

.selectTaskCategoryForm {
    padding-right: 0;
    padding-left: 0;
}

.boxWorkCategory {
    text-align: center;
}

.icoWorkCategory {
    width: 80%;
}

.btnWorkCategory {
    text-align: center;
    vertical-align: center;
    min-width: 16%;
    padding: 0.2em;
}
.btnHandyman img {
    width: 80%;
    height: 80%;
}

.colTaskPin {
    max-width: 55%;
    padding: 0px;
    margin-right: 5px;
}

.colTaskStartDate,
.colTaskStartTime,
.colTaskEndDate,
.colTaskEndTime {
    min-width: 45%;
    max-width: 48%;
    margin-right: 1em;
}

.colTaskStartTime,
.colTaskEndTime {
    margin-right: 0;
}

.colTaskPrice {
    color: #fff;
    max-width: 99%;
    padding-top: 1em;
}

#rowTaskEndAt {
    padding-top: 1em;
}

input#txtTaskPriceTotal {
    text-align: right;
}

button#btnTaskStartDateCalender,
button#btnTaskStartTimeSelector,
button#btnTaskEndDateCalender,
button#btnTaskEndTimeSelector,
button#priceCurrency {
    color: #fff;
    border: 1px solid #fff;
    min-width: 2.8em;
}

a#btnCreateTaskFormBack,
a#btnCreateTaskFormForward {
    min-width: 38%;
    max-width: 48%;
}

@media (orientation: portrait) {
    .mainContentBox.addTaskFormBox {
        margin-top: 0.1em !important;
    }

    .mainContentBox.addTaskFormBox,
    .mainContentBox.addTaskForm {
        min-width: 60%;
        max-width: 75%;
    }

    .mainContentBox.addTaskForm {
        max-width: 80%;
        margin-top: 0.3em;

        font-size: 80%;
    }

    .mainContentBox.addTaskForm label {
        margin-bottom: 0.1rem;
    }

    .colTaskPin {
        min-width: 50%;
        max-width: 75%;
    }

    .colTaskStartDate,
    .colTaskStartTime,
    .colTaskEndDate,
    .colTaskEndTime,
    .colTaskPrice {
        min-width: 84%;
        max-width: 95%;
    }
}

@media (max-width: 767.98px)
and (orientation: landscape) {
    .mainContentBox.addTaskFormBox,
    .mainContentBox.addTaskForm {
        min-width: 70%;
        max-width: 90%;
    }

    .mainContentBox.addTaskForm {
        margin-top: -0.5em;

        font-size: 98%;
    }

    .mainContentBox.addTaskForm label {
        margin-bottom: 0.1rem;
    }
}

@media (min-width: 768px)
and (max-width: 961.98px)
and (orientation: landscape) {
    .mainContentBox.addTaskFormBox,
    .mainContentBox.addTaskForm {
        margin-top: 0em;
        margin-bottom: 1em;
    }

    /*.createTaskTitleForm,
    .createTaskPriceForm {
        padding-left: 15%;
    }*/

    .createTaskTitleForm .formFooter,
    .createTaskPriceForm .formFooter {
        margin-left: -1em;
    }

    .colTaskStartDate,
    .colTaskStartTime,
    .colTaskEndDate,
    .colTaskEndTime /*,
    .colTaskPrice*/ {
        min-width: 84%;
        max-width: 95%;
    }

    #rowTaskStartAt,
    #rowTaskEndAt,
    .colTaskPrice {
        margin-left: 12%;
    }

    /*.colTaskPrice {
        min-width: 60%;
        max-width: 75%;
    }*/
}

@media (max-width: 767.98px) {
    .mainContentBox.addTaskFormBox {
        margin-top: 0em;
        margin-bottom: 1em;
        min-width: 85%;
        /*max-width: 80% !important;*/
    }

    .mainContentBox.addTaskForm {
        max-width: 80%;
        margin-top: 0.1em;

        font-size: 80%;
    }

    .mainContentBox.addTaskFormBox h1 {
        font-size: 130%;
    }

    .createTaskForm {
        font-size: 80%;
    }
}