:root {
    --blue-main: #426071;
    --blue-secondary: #445057;
    --blue-light: #658ca3;
}

*{
    font-family: Muli, sans-serif;
}

h1, h2, h3, h4, h5 {
    color: #5E788F;
}

p{
    margin-bottom:5px;
}

.page {
    min-height: 100vh;
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    overflow-x:hidden;
}

.toggle-head{
    width:80%;
    margin:10px auto;
    justify-content:space-around;
}

.toggle-button {

    border-radius:0;
    background: transparent;
    color: var(--blue-secondary);
    border: none;
    font-size: 18px;
    padding:0;
    text-align: center;
    border-bottom: 2px solid transparent;
}

    .toggle-button:hover {
        border-color: var(--blue-light);
        background: transparent;
        color: var(--blue-light);
    }

.toggle-head .active {
    color: var(--blue-light);
    border-color: var(--blue-light);
}

.upload {
    background: white;
    height: max-content;
    width: max-content;
    min-width:600px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin-top: 5%;
    padding: 15px 40px 20px 40px;
    transition: all 2s linear;
    justify-content:space-between;
}

.image-header {
    font-size: 18px;
    color: var(--blue-main);
}

.upload p{
    font-size:18px;
    margin: 10px 0 10px 0;
}

.full{
    height:100%;
    max-height: calc(100% - 190px);

}

.card {
    margin:20px;
    padding:20px;
    border-radius: 8px;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.header {
    font-size: 22px;
    text-align: center;
    width: 100%;
    font-weight: bold;
    color: #54585c;
    margin-bottom: 20px;
}



button, .primary-button {
    padding: 6px 12px;
    background: var(--blue-main);
    border-radius: 4px;
    color: white;
    outline: none;
    border: none;
    transition: all .3s;
}


button:hover, .primary-button:hover {
    background: var(--blue-secondary);
}

.secondary-button {
    background: #6a8a9c;
}


    .cancel-button {
        color:white;
        background: #A14B3E;
    }

        .cancel-button:hover {
            background: #6e362e;
        }

.divider {
    border-bottom: 1px solid #B99D43;
    border-top: 1px solid #B99D43;
    height: 6px;
    width: 100%;
    margin:10px 0;
}


input, textarea, .k-textarea {
    background: #F6F6F6;
    border: none;
    outline: none;
    font-size: 18px;
    padding: 8px 12px;
    border-radius: 6px;
}


.catalog-modal {
    width: 700px !important
}

.custom-upload-modal {
    width: 800px !important
}

@media (max-width: 950px) {
    .custom-upload-modal {
        width: 420px !important
    }
}

@media (max-width: 900px) {
    .catalog-modal {
        width: 420px !important
    }
}

@media (max-width: 480px) {

    .catalog-modal {
        width: Calc(100% - 30px) !important;
        height: Calc(100% - 30px) !important;
    }

    .custom-upload-modal {
        width: Calc(100% - 30px) !important;
        height: Calc(100% - 30px) !important;
    }
}

@media (max-height: 950px) {
    .catalog-modal {
        height: Calc(100% - 30px) !important;
    }

    .custom-upload-modal {
        height: Calc(100% - 30px) !important;
    }
}