:root {
    --side-width: 270px;
    --topnav-height: 75px;

    --accent-color: rgba(26, 68, 87, 1);
    --accent-color-hover: rgb(13, 40, 52);
    --sidenav-color: rgba(222, 228, 237, 1);
    --light-color: rgb(118, 118, 118, 1); 
    --light-color-opacity: rgb(118, 118, 118, .3); 

    --main-bg: rgba(239, 243, 248, 1);
    --white-color: rgba(255, 255, 255);
    --text-color: rgb(25, 25, 25);
}
.dark-theme {
    --accent-color: rgb(52, 170, 194);
    --accent-color-hover: rgb(91, 187, 227);
    --sidenav-color: rgb(24, 24, 24);
    --light-color: rgb(255, 255, 255); 
    --light-color-opacity: rgb(118, 118, 118, .3); 

    --main-bg: rgb(19, 19, 19);
    --white-color: rgb(0, 0, 0);
    --text-color: #fff;
}

.small-sidebar {
    --side-width: 50px;
}
@media (max-width: 992px) {
    :root {
        --side-width: 0;
    }
    .small-sidebar {
        --side-width: 0;
    }
}

* {
    font-family: 'Montserrat', sans-serif;
}
html {
    font-size: 15px;
}
body {
    min-height: 100vh;
    min-height: fill-available;
    min-height: -webkit-fill-available;
    background-color: var(--main-bg);
}
body.lock {
    overflow: hidden;
}
main {
    margin-left: var(--side-width);
    margin-top: var(--topnav-height);
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1.25rem;
    padding-bottom: 2rem;
    color: var(--text-color);
}

a {
    color: inherit;
    text-decoration: inherit;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
input {
    font-family: 'Montserrat', sans-serif!important;
}


/* login */
form.login {
    width: 70%;
}

.login-logo-area {
    background-color: var(--accent-color);
    color: var(--main-bg);
}
.login.title h3 {
    line-height: 1;
    margin-bottom: 0;
}
.login.title span {
    font-size: .8rem;
    opacity: .7;
}
.login.madeby {
    font-size: .7rem;
    color: var(--light-color);
    opacity: .7;
    letter-spacing: 1px;
}

main.contract {
    padding-left: 0;
    padding-right: 0;
}
.new-measur {
    display: block;
}
.admin {
    display: none;
}
@media (min-width: 992px) {
    main.contract {
        margin-right: 45px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .new-measur {
        display: none;
    }
    .admin {
        display: block;
    }
}

.add-contract, .edit-contract {
    position: fixed;
    bottom: 15px;
    right: 15px;
}



.progress-percent h1 {
    font-size: 3rem;
    font-weight: 700;
}

.con-percent-big {
    font-weight: 700;
    font-size: 4rem;
    line-height: 0.9;
    white-space: nowrap;
}

select {
    padding: .375rem .75rem;
    border-radius: .375rem;
    border: 0;
    outline: 1px solid #ced4da;
    border-right: .75rem solid transparent;
}

.card.dashboard {
    align-items: center;
    justify-content: center;
    min-height: 200px;
    flex-direction: column;
    padding: 1rem;
    cursor: pointer;
    border-radius: .75rem;
    transition: all .6s;
}

.card.dashboard i {
    font-size: 2rem;
    color: var(--accent-color);
}
.card.dashboard:hover i {
    font-size: 2rem;
    color: var(--accent-color-hover);
}
.card.dashboard:hover {
    color: var(--accent-color);
    -webkit-box-shadow: 0px 10px 30px 0px rgb(66 68 90 / 15%);
    -moz-box-shadow: 0px 10px 30px 0px rgba(66, 68, 90, 0.15);
    box-shadow: 0px 10px 30px 0px rgb(66 68 90 / 15%);
}


.layers-box {
    height: 200px;
}

.design.setup {
    background-color: white;
}
.design-layers .input-group-text {
    border-radius: 0;
    border-left: none;
}
.design-layers .form-control {
    border-radius: 0;
    border-right: none;
}
.design .layers {
    height: 300px;
    max-height: calc(100% - 200px);
}


.card.btn.files {
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    background-color: var(--main-bg);
}
.add-new-file {
    position: fixed;
    bottom: 30px;
    -webkit-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 0.41);
    -moz-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 0.41);
    box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 0.41);
}


/* folder */
.folder{

    width: 100%;
    height: auto;
    margin: 1rem 0;

    border-radius: 5px 25px 25px 25px;

    background: white;
    position: relative;

}

.folder::before{
    content:  '';
    position: absolute;
    top: -18px;
    width: 200px;
    height: 25px;
    background: white;
    border-radius: 25px 0 0 0;
    clip-path: path('M 0 0 L 160 0 C 185 2, 175 16, 200 18 L 0 50 z');
}
 
.added-design {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: .25rem;
    margin-top: .25rem;
}
.added-design-card {
    max-height: 180px;
    overflow-y: scroll;
}

.add-input-btn {
    color: var(--accent-color);
}
.add-input-btn::before {
    content: '\F4F9';
    font-family: "bootstrap-icons";
}
.remove-input-btn {
    color: red;
    display: none;
}
.remove-input-btn::before {
    content: '\F2E6';
    font-family: "bootstrap-icons";
}