@font-face {
    font-family: 'Trenda-bold';
    src: url('../css/font/Latinotype  Trenda Black.otf');
    font-weight: normal;
}
@font-face {
    font-family: 'Trenda-regular';
    src: url('../css/font/Latinotype  Trenda Regular.otf');
    font-weight: normal;
}

body {
    font-family: 'Trenda-bold';
    font-weight: normal;
}
label input{
    
    font-family:Trenda-regular;    
}
.font-light
{
    font-family:Trenda-regular;
}


.content {
    cursor: pointer;
    margin-left:5px;
    margin-right:5px;
    max-width:152.35px;
}



:root {
    --backgroundColor: #007380;
    --chatboxColor: #007380;
}

body {
    background-color: var(--backgroundColor);
}




.whiteText {
    color: white;
}

.whiteBackground {
    color: var(--backgroundColor);
    background-color: white;
    padding-left:20px;
    padding-right:20px;
}



form {
    background-color: var(--chatboxColor);
}
.custom-button {
    background-color: white;
    color: var(--chatboxColor);
    padding: 6px 10px 6px 10px;
    border: 1px solid var(--backgroundColor);
    border-radius: 4px;
}
custom-button:active {
    transform: scale(0.9); 
}



form
{
    border: 2px rgb(220, 220, 220) outset;
    padding: 15px;
    border-radius: 5px;
    padding-top: 20px;
    padding-right:60px;
}

.chatbox-main
{
    padding-right:30px;
    padding-left:30px;
    
}

content-image{
    max-height:100%;
}

/*----- mood -------*/
@font-face {
    font-family: 'Trenda-semibold';
    src: url('../css/font/Latinotype  Trenda Semibold.otf'); 
    font-weight: normal;
}

@font-face {
    font-family: 'Trenda-heavy';
    src: url('../css/font/Trenda Heavy.otf');
    font-weight: normal;
}


.mood-welcome-text {
    font-family: 'Trenda-heavy';
    color: rgb(46, 216, 195);
    padding-top: 10px;
    padding-bottom: 30px;
}

.mood-description {
    font-family: 'Trenda-semibold';
    color: rgb(0, 70, 80);
}

.mood-textarea textarea {
    border-color: rgb(0, 70, 80);
    border-width: 2px;
    transition: box-shadow .25s;
}

    .mood-textarea textarea:focus {
        border-color: rgb(0, 70, 80);
        border-width: 2px;
        box-shadow: 0 0 8px rgba(0, 70, 80, 0.2), /*  sol golge */
        8px 0 8px rgba(0, 70, 80, .2), /* sag golge */
        0 8px 8px rgba(0, 70, 80, .2), /* alt golge */
        -8px 0 8px rgba(0, 70, 80, .2); /* ust golge */
    }

.mood-textarea label {
    color: rgb(0, 70, 80);
}

.mood-icon img {
    padding: 0;
    min-width: 100px;
    min-height: 100px;
    max-height: 200px;
    max-width: 200px;
}

.mood-chekbox {
    padding-top: 10px;
    padding-bottom: 10px;
}

.mood-submit-button {
    padding-top: 10px;
    padding-bottom: 10px;
}

    .mood-submit-button button {
        background-color: rgb(0, 70, 80);
        color: white;
        font-family: 'Trenda-semibold';
        padding: 8px;
        width: 120px;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
        scale: 1;
        transition: box-shadow,0.3s, scale 0.3s;
    }

        .mood-submit-button button:active {
            scale: 0.95;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0);
        }

.mood-chekbox input {
    scale: 1.3;
}

.mood-option {
    margin-right: 8px;
    margin-left: 8px;
}