@import url('fonts.css');

body, * {
    margin: 0px;
    padding: 0px;
    font-family: "Open Sans";
    font-weight: 400;
    box-sizing: border-box;
    outline: none;
    font-weight: 100;
    font-size:100%;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; 
}

body {
    display: flex;
    flex-flow: column;
    overflow-x: hidden;
}

h1, h1 * {
    font-weight: 500;
    font-size: 2.6em;
    display: block;
    text-align: center;
}
h1::after {
    content: "";
    background-image: url(../assets/Icon_Kolag.svg);
    width: 30px;
    display: block;
    height: 30px;
    background-repeat: no-repeat;
    margin: 10px auto 30px auto;
}

h2, h3, h4, h5 {
    margin: 15px 0px 10px 0px;
}

h2, h2 * {
    font-weight: 500;
    font-size: 2em;
    color: black;
}

h3, h3 * {
    font-size: 1.8em;
    font-weight: 600;
    color: #4CB658;
}
h4, h4 * {
    font-size: 1.5em;
    font-weight: 600;
    color: black;
}
h5, h5 > * {
    font-size: 1.3em;
    font-weight: 600;
    color: black;
}

p {
    font-size: 1em;
}

a {
    color: #4CB658;
    border-bottom: 1px solid #4CB658;
    text-decoration: none;
    cursor: pointer;
    font-size: 1em;
}

a.withoutUnderline {
    color: black;
    border: none;
    padding-bottom: 0px;
    text-decoration: none;
    cursor: pointer;
}

li {
    margin-left: 15px;
}

img {
    image-orientation: from-image;
}

strong {
    font-weight: 700;
}


.labelButton, button.simpleButton, input[type="submit"], div.field-caption, .labelField, label {
    letter-spacing: 2px;
    border: none;
    font-size: 0.9em;
    border: none;
    background: transparent;
    font-weight: 600;
    color: black;
}

.labelButton {
    padding: 10px 0px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.labelButton svg, .labelButton use{
    height: 25px;
    width: 25px;
    margin-right: 10px;
    stroke: #979797 !important;
    stroke-width: 40px !important;
    fill: transparent !important;
}

button.simpleButton, input[type="submit"] {
    padding: 20px 35px;
    background: linear-gradient(100deg, #65CC71 0%, #3BAB48 100%);
    color: white;
    cursor: pointer;
    margin: 2px;
}

div.field-caption {
    cursor: pointer;
    padding: 10px;
    text-align: left;
}


input[type="text"], input[type="date"], input[type="email"], input[type="number"], input[type="password"], select, textarea {
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: white;
    border: 2px solid #ededed;
    border-radius: 3px;
    width: 100%;
    outline: none;
    box-shadow:none;
    font-size: 0.9em;
    resize: none;
    background-color: #ededed;
}

textarea {
    height: 200px;
}

label.input-field {
    width: 100%;
    padding: 5px;
}

input[type="text"]:focus, input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
    border: 2px solid #4CB658;
    color: #4CB658;
}

input[type="text"]:invalid, input[type="date"]:invalid, input[type="email"]:invalid, input[type="number"]:invalid, input[type="password"]:invalid, select:invalid, textarea:invalid {
    border: 2px solid #ff7a7a;
    color: #ff7a7a;
}

select::after {
    content: '4';
}
select.select-arrow-active:after {
    display: none;
}





::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 100px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

*{
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
    scrollbar-highlight-color: #555;
}


/*
    Owner-Portal
*/
div.owner-portal-main {
    width: 100%;
    height: calc(100% - 110px);
    position: absolute;
}

div.owner-portal-content {
    width: calc(100% - 380px);
    height: 100%;
    float: right;
    background-color: #EEF3F6;
}

div.owner-portal-tile {
    background-color: white;
    margin-left: 40px;
    margin-top: 40px;
    width: calc(50% - 60px);
    height: calc(50% - 60px);
    display: inline-block;
    overflow: scroll;
}

.owner-portal-tile-title {
    margin: 35px;
    text-transform: uppercase;
    border-bottom: 1px solid black;
}

div.owner-portal-tile-row {
    margin: 35px;
    height: 40px;
}

div.owner-portal-tile-row-image {
    width: 50px;
    float: left;
}

div.owner-portal-tile-row-image img {
    height: 50px;
    width: auto;
}

div.owner-portal-tile-row-content {
    width: calc(100% - 50px);
    padding-left: 40px;
    float: right;
}

.owner-portal-tile-row-content-item-title {
    font-weight: bolder;
}


@media(max-width: 1300px)
{
    body {
        font-size: 90%
    }
    h1::after {
        width: 25px;
        height: 25px;
    }
    button.simpleButton, input[type="submit"] {
        padding: 15px 20px;
        background: linear-gradient(100deg, #65CC71 0%, #3BAB48 100%);
        color: white;
        cursor: pointer;
        margin: 2px;
    }
}

@media(max-width: 500px)
{
    body {
        font-size: 80%
    }
    h1::after {
        width: 20px;
        height: 20px;
    }
}