.modal-size-big {
    width:850px;
}

.modal-size-normal {
    width:600px;
}

//TODO add animation

.ModalWrap {
    width:100%;
    height:100%;
    position:fixed;
    left:0px;
    top:0px;
    background-color:rgba(60, 60, 60, 0.84);
    z-index: 1001;
}

.Modal {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    margin: 0px auto;
    width: 750px;
    min-height: 180px;
    max-width:87%;
    max-height:87%;
    background-color: #FFFFFF;
    overflow: hidden;

    display:flex;
    flex-flow:column;
    justify-content: flex-start;

    & > button {
        position: absolute;
        right: 15px;
        top: 10px;
        background: none;
        border: none;
        font-size: 32px;

        color: #ACACAC;

        &:hover {
            color: #CACACA;
        }
    }

}

.ModalHeader {
    flex: 0 0 auto;
    padding: 0px 15px;
    margin: 20px 0px;
    font-size:25px;
    position: relative;
}

.ModalContent {
    flex: 1 1 auto;
    padding: 15px;
    margin: 15px 0px;
    overflow-y:auto;
    font-size: 16px;
    font-weight:400;
}

.ModalButtonBar {
    flex: 0 0 auto;
    display: flex;
    padding: 20px 15px;
    justify-content: flex-end;
    align-items: baseline;
    margin:-10px;

    button {
        margin:10px;
        background: none;
        border: 0;
        cursor: pointer;
        font-weight: 400;
        font-size: 16px;
        min-width: 140px;
        padding: 7px 10px;
        overflow: hidden;
        outline: 0px;
        transition: all 0.3s ease;
        color: #646464;
        background-color: #ECECEC;

        &.primary {
            background-color: #4ec3e0;
            color: #FCFCFC;
        }

        &:hover {
            background-color: #f79239;
            color: #FCFCFC;
        }


    }

}
